/* v0.23 · Full UI from the Visual & UX v2.1 concepts: emerald ribbon titles with gold rims and leaf
   sprigs, cream cards with a double gold line, fat gold pill buttons, a HUD pill (portrait · Lv ·
   coins), and full-screen layers over painted river scenery. Art lives in /assets/kit/. */
:root {
  --kit-emerald: #0c5a4f;
  --kit-emerald-2: #0f6e5f;
  --kit-gold: #e2b55a;
  --kit-gold-2: #f3d58a;
  --kit-cream: #fffaef;
  --kit-ink: #163f37;
  --kit-muted: #5d6f66;
  --kit-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2024%27%3E%3Cg%20fill%3D%27%23e8c060%27%3E%3Cpath%20d%3D%27M46%2012H8%27%20stroke%3D%27%23e8c060%27%20stroke-width%3D%271.8%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M34%2012c-2-6-8-10-15-10%202%206%208%209%2015%2010z%27%2F%3E%3Cpath%20d%3D%27M34%2012c-2%206-8%2010-15%2010%202-6%208-9%2015-10z%27%2F%3E%3Cpath%20d%3D%27M20%2012c-2-4-6-7-11-7%201.5%204%206%206.5%2011%207z%27%2F%3E%3Cpath%20d%3D%27M20%2012c-2%204-6%207-11%207%201.5-4%206-6.5%2011-7z%27%2F%3E%3Cellipse%20cx%3D%276%27%20cy%3D%2712%27%20rx%3D%275%27%20ry%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* ---- ribbon title ---- */
.kit-ribbon {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
  margin: 0 auto;
}
.kit-ribbon > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 46px 12px;
  border-radius: 18px;
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff4d6;
  font: 800 clamp(22px, 6.4vw, 30px) / 1.15 Prompt, Poppins, sans-serif;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    0 0 0 3px var(--kit-gold),
    0 0 0 5px #a87b2c,
    0 8px 18px rgba(20, 40, 30, 0.35);
  white-space: nowrap;
}
.kit-ribbon > span::before,
.kit-ribbon > span::after {
  content: "";
  width: 40px;
  height: 20px;
  background: var(--kit-leaf) center / contain no-repeat;
  flex-shrink: 0;
}
.kit-ribbon > span::after {
  transform: scaleX(-1);
}
.kit-sub {
  display: flex;
  justify-content: center;
  margin: -6px auto 0;
  position: relative;
  z-index: 2;
}
.kit-sub > span {
  padding: 6px 26px;
  border-radius: 999px;
  background: var(--kit-cream);
  color: var(--kit-ink);
  font: 700 15px Prompt, sans-serif;
  box-shadow:
    0 0 0 2px var(--kit-gold),
    0 4px 10px rgba(60, 40, 10, 0.18);
}
.kit-sprig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--kit-ink);
  font: 800 20px Prompt, sans-serif;
}
.kit-sprig::before,
.kit-sprig::after {
  content: "";
  width: 30px;
  height: 18px;
  background: var(--kit-leaf) center / contain no-repeat;
}
.kit-sprig::after {
  transform: scaleX(-1);
}
/* ---- cards & buttons ---- */
.kit-card {
  position: relative;
  background: var(--kit-cream);
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 2px var(--kit-gold-2),
    inset 0 0 0 6px var(--kit-cream),
    inset 0 0 0 7px #f1e2bd,
    0 0 0 2px var(--kit-gold),
    0 10px 26px rgba(60, 40, 10, 0.2);
  padding: 18px;
  color: var(--kit-ink);
}
.kit-gold,
.kit-cream {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 999px;
  cursor: pointer;
  font-family: Prompt, Poppins, sans-serif;
  color: #173c34;
  text-decoration: none;
}
.kit-gold {
  min-height: 62px;
  padding: 10px 24px;
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 800;
  background: linear-gradient(#ffe27a, #f8c742 55%, #eda824);
  border: 2px solid #d99a24;
  box-shadow:
    inset 0 3px 0 #fff4ae,
    inset 0 -3px 0 #e0961e,
    0 5px 0 #b97f22,
    0 10px 22px rgba(201, 140, 35, 0.35);
  text-shadow: 0 1px 0 #fff0b0;
}
.kit-gold:disabled {
  filter: grayscale(0.7);
  opacity: 0.6;
  cursor: not-allowed;
}
.kit-gold:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 0 #fff4ae,
    0 3px 0 #b97f22;
}
.kit-cream {
  min-height: 54px;
  padding: 8px 20px;
  font-size: 19px;
  font-weight: 700;
  background: var(--kit-cream);
  border: 2px solid #e6c46e;
  box-shadow: 0 3px 0 #e4d3a6;
}
.kit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  background: none;
  border: 0;
  color: var(--kit-ink);
  font: 600 16px Prompt, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.kit-round {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff;
  border: 0;
  box-shadow:
    0 0 0 3px var(--kit-gold),
    0 5px 12px rgba(0, 0, 0, 0.25);
  font: 800 26px/1 Poppins, sans-serif;
  cursor: pointer;
  flex-shrink: 0;
}
.kit-round.light {
  background: var(--kit-cream);
  color: var(--kit-emerald);
}
.kit-round svg,
.kit-round .icon {
  width: 26px;
  height: 26px;
}
/* ---- HUD pill ---- */
.kit-hud {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 52px;
}
.kit-hud img {
  position: absolute;
  left: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: #2aa58e;
  box-shadow:
    0 0 0 3px var(--kit-gold),
    0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.kit-hud > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 32px;
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--kit-ink);
  font: 700 20px Poppins, Prompt, sans-serif;
}
.kit-coin {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe89a, #f2b632 60%, #c98a1a);
  color: #9a6510;
  font: 800 17px Poppins, sans-serif;
  box-shadow:
    inset 0 0 0 2px #ffd56a,
    0 2px 0 #b07a1a;
  flex-shrink: 0;
}
.kit-coin.big {
  width: 54px;
  height: 54px;
  font-size: 30px;
}
/* ---- full-screen layer ---- */
#kit-layer:empty {
  display: none;
}
.kit-screen {
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #e9dfc8 url("/assets/kit/bg-river.webp") center / cover no-repeat;
  animation: kit-in 0.24s ease-out;
}
.kit-screen.scrim::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(16, 40, 34, 0.38);
  pointer-events: none;
}
@keyframes kit-in {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
}
.reduce-motion .kit-screen {
  animation: none;
}
.kit-col {
  position: relative;
  max-width: 540px;
  min-height: 100%;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
}
.kit-hero {
  margin: 0 -16px;
  position: relative;
}
.kit-hero > img {
  display: block;
  width: 100%;
  height: auto;
}
.kit-hero.fade > img {
  mask-image: linear-gradient(#000 70%, transparent);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
}
.kit-panel {
  margin-top: 22px;
  padding-top: 34px;
}
.kit-panel > .kit-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}
.kit-close {
  position: absolute;
  right: -6px;
  top: -24px;
  z-index: 4;
}
.kit-close.light,
.kit-close {
  width: 52px;
  height: 52px;
}
/* ---- shared rows ---- */
.kit-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 1.5px #efdfba;
  color: var(--kit-ink);
  font: 700 18px Prompt, sans-serif;
  min-height: 64px;
}
.kit-row > .kit-ico {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f1e9d6;
  color: var(--kit-emerald);
  flex-shrink: 0;
}
.kit-row > .kit-ico svg,
.kit-row > .kit-ico .icon {
  width: 30px;
  height: 30px;
}
.kit-row > .grow {
  flex: 1;
  min-width: 0;
}
.kit-row .val {
  font: 800 24px Poppins, Prompt, sans-serif;
  padding: 6px 14px;
  border-radius: 12px;
  background: #eef5ec;
}
.kit-row .val.gold {
  background: linear-gradient(90deg, #fff1c6, #f9df95);
  color: #6b4a00;
}
.kit-row input[type="range"] {
  width: min(48%, 230px);
  accent-color: var(--kit-emerald);
  height: 28px;
}
.kit-row select {
  max-width: 48%;
  min-height: 42px;
  border-radius: 999px;
  border: 1.5px solid #e1c37b;
  background: var(--kit-cream);
  padding: 0 12px;
  font: 600 14px Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-chev {
  font: 800 30px/1 Poppins, sans-serif;
  color: var(--kit-ink);
}
.kit-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 46%;
  min-height: 48px;
  padding: 6px 18px 6px 24px;
  border-radius: 999px;
  border: 1.5px solid #e1c37b;
  background: var(--kit-cream);
  font: 700 18px Prompt, sans-serif;
  color: var(--kit-ink);
  cursor: pointer;
}
.kit-pill-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.kit-toggle {
  position: relative;
  width: 112px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #8e8e88;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
  color: #fff;
  font: 800 20px Poppins, sans-serif;
  text-align: right;
  padding: 0 18px;
}
.kit-toggle::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fffaef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: left 0.18s;
}
.kit-toggle.on {
  background: var(--kit-emerald-2);
  text-align: left;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 0 2px #0a4d43;
}
.kit-toggle.on::after {
  left: 64px;
}
/* ---- business (09) ---- */
body[data-screen="business"] .workspace main,
body[data-screen="quest"] .workspace main {
  background: #eadfc6 url("/assets/kit/bg-river.webp") center top / cover fixed no-repeat;
}
body[data-screen="business"] .page-title,
body[data-screen="quest"] .page-title {
  display: none;
}
.kit-page {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 24px;
}
.kit-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding: 14px 18px;
  font: 700 clamp(18px, 5vw, 24px) Prompt, Poppins, sans-serif;
}
.kit-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kit-stats > i {
  width: 1.5px;
  align-self: stretch;
  background: #e4cf9a;
}
.kit-stats .icon {
  width: 34px;
  height: 34px;
  color: var(--kit-emerald);
}
.kit-biz {
  display: grid;
  grid-template-columns: 52% 1fr auto;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
}
.kit-biz-art {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 170px;
  background: radial-gradient(ellipse at 50% 70%, #cfe3d4, #eaf1e3 60%, #fbf3e2);
  border-radius: 24px 0 0 24px;
  margin: 3px 0 3px 3px;
}
.kit-biz-art .building-render {
  width: 92%;
  height: 160px;
  object-fit: contain;
}
.kit-biz-info {
  padding: 16px 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kit-biz-info h3 {
  margin: 0;
  font: 800 clamp(20px, 5.4vw, 26px) / 1.2 Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-tag {
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 10px;
  background: #e5efe4;
  font: 600 15px Prompt, sans-serif;
  color: #2f5a4c;
}
.kit-biz-info hr {
  width: 100%;
  border: 0;
  border-top: 1.5px solid #eadcb8;
  margin: 2px 0;
}
.kit-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 clamp(18px, 5vw, 24px) Poppins, Prompt, sans-serif;
}
.kit-biz .kit-chev {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 44px;
  background: #f6ecd6;
  border-radius: 14px 0 0 14px;
  margin: 26px 0;
}
.kit-find {
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.kit-find img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  border-radius: 24px 0 0 24px;
  margin: 3px 0 3px 3px;
}
.kit-find > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 12px;
}
.kit-find .kit-gold {
  font-size: clamp(17px, 4.6vw, 22px);
  min-height: 54px;
  padding: 8px 12px;
}
.kit-plus {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff;
  font: 400 52px/1 Poppins, sans-serif;
  box-shadow:
    0 0 0 3px var(--kit-gold),
    0 6px 14px rgba(0, 0, 0, 0.25);
}
.kit-all {
  margin-top: 4px;
}
.kit-all > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font: 700 17px Prompt, sans-serif;
  color: var(--kit-ink);
  padding: 12px;
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.92);
  box-shadow: 0 0 0 1.5px #e1c37b;
}
.kit-all .portfolio-banner {
  display: none;
}
.kit-all .property-grid {
  margin-top: 14px;
}
/* ---- quests (11) ---- */
.kit-banner {
  position: relative;
  margin: 0 -16px;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  padding: 18px 12px 120px;
  background: url("/assets/kit/quests-banner.webp") center bottom / cover no-repeat;
}
.kit-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50px auto 0;
  position: relative;
  z-index: 2;
}
.kit-steps > span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 22px Poppins, sans-serif;
  background: #f1ece2;
  color: #6c6a63;
  box-shadow:
    0 0 0 3px #fff,
    0 3px 8px rgba(0, 0, 0, 0.25);
}
.kit-steps > i {
  width: 22px;
  height: 6px;
  background: #fff8e8;
}
.kit-steps > span.done {
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff;
}
.kit-steps > span.now {
  background: linear-gradient(#ffe27a, #f2b632);
  color: #6b4a00;
  width: 64px;
  height: 64px;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--kit-gold),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.kit-quest-body {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 14px;
  align-items: center;
  margin: 10px 0 16px;
}
.kit-quest-art {
  position: relative;
  text-align: center;
}
.kit-quest-art .building-render,
.kit-quest-art > img {
  width: 100%;
  height: 190px;
  object-fit: contain;
}
.kit-lv {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 4px 26px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 2px var(--kit-gold);
  font: 700 18px Poppins, sans-serif;
}
.kit-quest-body h4 {
  margin: 0 0 12px;
  font: 700 19px/1.4 Prompt, sans-serif;
}
.kit-reward {
  border-radius: 18px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 1.5px #efdfba;
  padding: 10px 14px;
}
.kit-reward small {
  display: block;
  color: var(--kit-muted);
  font: 600 14px Prompt, sans-serif;
  margin-bottom: 4px;
}
.kit-reward p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0;
  font: 700 26px Poppins, sans-serif;
}
.kit-xp {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font: 800 13px Poppins, sans-serif;
  color: #fff;
  background: linear-gradient(#5bb6f2, #2a7fd0);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
}
.kit-next {
  display: grid;
  grid-template-columns: 44% 1fr auto;
  align-items: center;
  gap: 12px;
  opacity: 0.92;
  background: #f4efe5;
}
.kit-next .building-render {
  width: 100%;
  height: 120px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.15);
}
.kit-next h4 {
  margin: 0 0 6px;
  font: 800 19px Prompt, sans-serif;
}
.kit-next small {
  color: var(--kit-muted);
  font: 500 14px Prompt, sans-serif;
}
.kit-lock {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #6c6c66;
  color: #fff;
  box-shadow: 0 0 0 3px #d9d4c7;
}
.kit-lock svg {
  width: 24px;
  height: 24px;
}
/* ---- contracts (12) / abilities (14) ---- */
.kit-choice {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 22px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 1.5px #efdfba;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--kit-ink);
  position: relative;
}
.kit-choice img {
  width: 100%;
  border-radius: 999px 999px 999px 999px / 60% 60% 60% 60%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.kit-choice h4 {
  margin: 0 0 8px;
  font: 800 20px Prompt, sans-serif;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #ead9ad;
}
.kit-choice p {
  margin: 0;
  color: var(--kit-muted);
  font: 500 16px Prompt, sans-serif;
}
.kit-choice .kit-amt {
  position: absolute;
  right: 14px;
  bottom: 12px;
}
.kit-choice.sel {
  background: #e3f2ea;
  box-shadow:
    inset 0 0 0 3px #128a74,
    0 0 0 3px #b9e6d4;
}
.kit-choice.sel::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0f6e5f;
  color: #fff;
  font: 800 24px Poppins, sans-serif;
  box-shadow: 0 0 0 3px var(--kit-gold);
}
.kit-choice:disabled {
  opacity: 0.55;
  cursor: default;
}
.kit-amt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 1.5px #e7cf95;
  font: 800 24px Poppins, sans-serif;
}
.kit-progress {
  height: 26px;
  border-radius: 999px;
  background: #e2ddd2;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}
.kit-progress > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #11705f 0 10px, #0e6153 10px 20px);
}
.kit-progress > b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 14px Poppins, sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.kit-gems {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 22px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 1.5px #e7cf95;
  font: 800 22px Poppins, sans-serif;
}
.kit-gems i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fe0b9, #138a63 60%, #0a5a40);
  box-shadow: 0 0 0 2px #0a4d3b;
}
.kit-gems i.off {
  background: #d8d3c6;
  box-shadow: 0 0 0 2px #bdb6a4;
}
.kit-abil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kit-abil {
  position: relative;
  border: 0;
  padding: 8px 8px 10px;
  border-radius: 22px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 2px #edd9a6;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: inherit;
}
.kit-abil img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 16px;
}
.kit-abil b {
  width: 92%;
  padding: 6px 0;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 1.5px #e7cf95;
  font: 700 17px Prompt, sans-serif;
  color: var(--kit-ink);
  text-align: center;
}
.kit-abil.locked img {
  filter: grayscale(0.85) brightness(1.05);
}
.kit-abil.locked {
  background: #e9e5dc;
}
.kit-abil .kit-lockpill {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 16px;
  border-radius: 999px;
  background: #5c5c57;
  color: #fff;
  font: 700 17px Poppins, sans-serif;
}
.kit-abil.sel {
  background: #dff1e8;
  box-shadow:
    inset 0 0 0 3px #128a74,
    0 0 0 3px #f3d58a;
}
.kit-abil-detail {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 1.5px #efdfba;
}
.kit-abil-detail img {
  width: 100%;
  border-radius: 16px;
}
.kit-abil-detail h4 {
  margin: 0;
  font: 800 24px Prompt, sans-serif;
}
.kit-abil-detail .fx {
  font: 900 42px/1.1 Poppins, sans-serif;
  color: #e3a52a;
  -webkit-text-stroke: 1.5px #8a5a0a;
}
.kit-abil-detail p {
  margin: 4px 0 8px;
  font: 500 15px Prompt, sans-serif;
  color: var(--kit-muted);
}
.kit-abil-detail .cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 1.5px #e7cf95;
  font: 600 15px Prompt, sans-serif;
}
.kit-abil-detail .cost i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fe0b9, #138a63 60%, #0a5a40);
}
/* ---- event / idle ---- */
.kit-art {
  display: block;
  width: 100%;
  border-radius: 18px;
}
.kit-bigamt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow:
    0 0 0 2px var(--kit-gold),
    0 4px 10px rgba(0, 0, 0, 0.08);
  font: 800 clamp(40px, 12vw, 58px) / 1 Poppins, sans-serif;
  color: var(--kit-ink);
}
.kit-bigamt.neg {
  color: #a33d37;
}
.kit-title {
  text-align: center;
  margin: 4px 0 0;
  font: 800 clamp(30px, 8.6vw, 40px) / 1.2 Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-lead {
  text-align: center;
  margin: 0;
  font: 500 18px/1.5 Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* ---- company (10) ---- */
.kit-hq {
  position: relative;
  margin: 0 -16px;
  height: 340px;
  background: url("/assets/kit/company-hero.webp") center / cover no-repeat;
}
.kit-hq::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(250, 244, 230, 0.55), rgba(250, 244, 230, 0.75));
  backdrop-filter: blur(3px);
}
.kit-hq > .building-render {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(78%, 360px);
  height: 300px;
  object-fit: contain;
  z-index: 1;
}
.kit-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: -30px;
  position: relative;
  z-index: 2;
}
.kit-plate > span {
  padding: 8px 30px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 2px var(--kit-gold);
  font: 800 22px Prompt, sans-serif;
}
.kit-plate > em {
  font-style: normal;
  margin-top: -2px;
  padding: 4px 28px;
  border-radius: 999px;
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff;
  font: 700 17px Prompt, sans-serif;
}
.kit-value {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.kit-value .coins {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f4ead2;
  font-size: 46px;
}
.kit-value small {
  font: 600 18px Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-value b {
  display: block;
  font: 800 clamp(34px, 10vw, 50px) / 1 Poppins, sans-serif;
}
.kit-value .target {
  border-left: 1.5px solid #e4cf9a;
  padding-left: 14px;
  text-align: right;
}
.kit-value .target b {
  font-size: clamp(22px, 6.4vw, 34px);
}
.kit-stages {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.kit-stages > div {
  position: relative;
  border-radius: 18px;
  background: #f6efe1;
  box-shadow: inset 0 0 0 1.5px #ebdcb6;
  padding: 6px 6px 34px;
  text-align: center;
}
.kit-stages > div.cur {
  background: linear-gradient(#d3eadd, #eef6ef);
  box-shadow: inset 0 0 0 2px var(--kit-gold);
}
.kit-stages .building-render {
  width: 100%;
  height: 110px;
  object-fit: contain;
}
.kit-stages > div:not(.cur):not(.done) .building-render {
  filter: grayscale(1) brightness(1.2);
}
.kit-stages b {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 22px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 1.5px #e7cf95;
  font: 700 18px Poppins, sans-serif;
}
.kit-stages > div.cur b,
.kit-stages > div.done b {
  background: #0f6e5f;
  color: #fff;
}
.kit-stages > span {
  color: #d9a63c;
  font: 800 22px Poppins, sans-serif;
}
/* ---- summary (17) / ending (18) / welcome (06) ---- */
.kit-screen.summary {
  background-image: url("/assets/kit/summary-hero.webp");
  background-size: cover;
  background-position: center top;
  background-color: #f2e4c8;
}
.kit-screen.ending {
  background: #1b2547 url("/assets/kit/ending-night.webp") center top / cover no-repeat;
}
.kit-screen.welcome {
  background: #f5dfb4 url("/assets/kit/welcome-hero.webp") center 30% / cover no-repeat;
}
.kit-logo {
  margin: 18px auto 0;
  text-align: center;
  position: relative;
}
.kit-logo > b {
  display: inline-block;
  padding: 18px 44px 20px;
  border-radius: 28px 28px 32px 32px;
  background: linear-gradient(#11705f, #0a4d43);
  color: #fff6dc;
  font: 900 clamp(46px, 14vw, 72px) / 1 Prompt, sans-serif;
  text-shadow:
    0 3px 0 #b88a2a,
    0 6px 10px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 4px var(--kit-gold),
    0 0 0 7px #9c6f24,
    0 12px 26px rgba(0, 0, 0, 0.35);
  position: relative;
}
.kit-logo > b::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  width: 120px;
  height: 46px;
  background: linear-gradient(#11705f, #0a4d43);
  clip-path: polygon(50% 0, 62% 40%, 100% 100%, 0 100%, 38% 40%);
  box-shadow: 0 0 0 4px var(--kit-gold);
}
.kit-logo > small {
  display: block;
  margin-top: 14px;
  font: 700 clamp(17px, 4.8vw, 22px) Prompt, sans-serif;
  color: var(--kit-ink);
  text-shadow: 0 1px 0 #fff;
}
.ending .kit-logo > b {
  background: linear-gradient(#fffaef, #f4e7c8);
  color: #0f4f43;
  text-shadow: none;
}
.ending .kit-logo > b::before {
  background: #f4e7c8;
}
.ending .kit-logo > small {
  color: #fff3d0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.kit-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.welcome .kit-bottom .kit-link,
.ending .kit-bottom .kit-link {
  color: #2b3b36;
  background: rgba(255, 250, 239, 0.85);
  padding: 6px 16px;
  border-radius: 999px;
  text-decoration: none;
}
/* ---- character (07) ---- */
.kit-screen.character {
  background: #e2ecef url("/assets/kit/char-bg.webp") center / cover no-repeat;
}
.kit-chars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.kit-char {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.kit-char img {
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  object-position: bottom;
  transition: transform 0.18s;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2));
}
.kit-char.sel img {
  filter: drop-shadow(0 0 10px rgba(80, 220, 160, 0.9)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2));
  transform: translateY(-4px);
}
.kit-char.sel::after {
  content: "✓";
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0f6e5f;
  color: #fff;
  font: 800 28px Poppins, sans-serif;
  box-shadow: 0 0 0 4px var(--kit-gold);
}
.kit-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fbf3e2;
  box-shadow: inset 0 0 0 1.5px #e7d4a6;
}
.kit-input input {
  flex: 1;
  border: 0;
  background: none;
  font: 600 20px Prompt, sans-serif;
  color: var(--kit-ink);
  outline: none;
  min-width: 0;
}
.kit-input svg {
  width: 26px;
  height: 26px;
  color: #5d6f66;
}
/* ---- account (20) ---- */
.kit-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 26px;
  border-radius: 999px;
  background: var(--kit-cream);
  box-shadow: 0 0 0 2px var(--kit-gold);
  font: 700 19px Prompt, sans-serif;
}
.kit-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 18px;
  background: rgba(244, 240, 230, 0.95);
  font: 600 16px Prompt, sans-serif;
  color: var(--kit-ink);
}
.kit-note svg {
  width: 30px;
  height: 30px;
  color: #0f6e5f;
  flex-shrink: 0;
}
.kit-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fbf3e2;
  font: 700 22px Poppins, Prompt, sans-serif;
}
.kit-split > i {
  width: 1.5px;
  height: 36px;
  background: #e4cf9a;
}
.kit-split > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kit-split small {
  font: 600 15px Prompt, sans-serif;
}
/* ---- restyled modals: every dialog gets the ribbon title and cream gold card ---- */
.modal.kit-modal {
  background: var(--kit-cream);
  border: 0;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 2px var(--kit-gold-2),
    inset 0 0 0 6px var(--kit-cream),
    inset 0 0 0 7px #f1e2bd,
    0 0 0 2px var(--kit-gold),
    0 24px 70px rgba(18, 40, 30, 0.4);
  overflow: visible;
  padding-top: 42px;
  margin-top: 30px;
}
.modal.kit-modal > .modal-header {
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  display: flex;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}
.modal.kit-modal > .modal-header h2 {
  margin: 0;
}
.modal.kit-modal > .modal-header .icon-button {
  position: absolute;
  right: -8px;
  top: -6px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--kit-cream);
  color: var(--kit-emerald);
  box-shadow:
    0 0 0 3px var(--kit-gold),
    0 4px 10px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
}
.modal.kit-modal > .modal-header .kit-ribbon > span {
  font-size: clamp(18px, 5vw, 24px);
  padding: 8px 34px 10px;
}
.modal-backdrop {
  padding-top: 40px;
}
/* ---- story (13): full-bleed scene with a dialogue card ---- */
.modal-story.kit-modal {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: #0d3f37;
  overflow: hidden;
}
.modal-story.kit-modal > .modal-header {
  top: max(18px, env(safe-area-inset-top));
  left: 16px;
  right: auto;
  justify-content: flex-start;
}
.modal-story.kit-modal > .modal-header .icon-button {
  display: none;
}
.modal-story .story-scene-art {
  position: absolute;
  inset: 0;
  height: auto !important;
  border-radius: 0 !important;
}
.modal-story .story-scene-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-story .story-scene-art > span {
  display: none;
}
.modal-story .story-dialogue {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  background: var(--kit-cream);
  border-radius: 26px;
  padding: 34px 22px 18px;
  box-shadow:
    inset 0 0 0 2px var(--kit-gold-2),
    0 0 0 2px var(--kit-gold),
    0 12px 30px rgba(0, 0, 0, 0.35);
}
.modal-story .story-dialogue .speaker {
  position: absolute;
  top: -24px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 30px 6px 8px;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(#11705f, #0a4d43);
  box-shadow: 0 0 0 2px var(--kit-gold);
}
.modal-story .story-dialogue .speaker b {
  color: #fff4d6 !important;
  font: 700 20px Prompt, sans-serif;
}
.modal-story .story-dialogue .speaker > span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--kit-gold) !important;
}
.modal-story .dialogue-text {
  font: 700 clamp(19px, 5.4vw, 26px) / 1.5 Prompt, sans-serif !important;
  color: var(--kit-ink) !important;
  min-height: 0 !important;
}
.modal-story .story-dialogue > .primary {
  width: 100%;
  min-height: 58px;
  border-radius: 999px;
  font-size: 22px;
}
.modal-story .story-dialogue .section-kicker {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
}
/* ---- tutorial (08) ---- */
.tutorial-dice {
  display: block;
  width: min(260px, 70%);
  margin: 0 auto 6px;
}
.focus-row[data-action] {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
@media (min-width: 901px) {
  .kit-screen {
    background-size: cover;
  }
  .kit-screen.summary {
    background-size: cover;
  }
}

.kit-row .grow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.kit-row input[type="range"]{width:38%}.kit-row{font-size:16px;gap:10px}.kit-row>.kit-ico{width:46px;height:46px}.kit-toggle{width:96px;height:46px;font-size:17px}.kit-toggle::after{width:36px;height:36px}.kit-toggle.on::after{left:54px}}
.kit-choice .kit-amt{position:static;grid-column:2;justify-self:end;margin-top:-4px}

@media (max-width:600px){.kit-ribbon>span{padding:9px 14px 11px;gap:6px;font-size:clamp(19px,5.6vw,26px)}.kit-ribbon>span::before,.kit-ribbon>span::after{width:30px}}
@media (max-width:600px){.kit-steps>span{width:42px;height:42px;font-size:18px}.kit-steps>span.now{width:50px;height:50px}.kit-steps>i{width:10px}}
/* v0.23.1 · desktop: painted full-screens become a portrait card over a blurred scene, pages fill
   the window, overlay columns grow a little on large screens. */
body[data-screen="business"] .workspace main,
body[data-screen="quest"] .workspace main {
  min-height: calc(100dvh - 105px);
  box-sizing: border-box;
}
@media (min-width: 901px) {
  .kit-page {
    max-width: 640px;
  }
  .kit-screen.welcome,
  .kit-screen.ending {
    background: #2a3a35 url("/assets/kit/bg-river.webp") center / cover no-repeat;
  }
  .kit-screen.ending {
    background-color: #1b2547;
  }
  .kit-screen.welcome > .kit-col,
  .kit-screen.ending > .kit-col {
    max-width: min(540px, calc((100dvh - 40px) * 0.5625));
    min-height: calc(100dvh - 40px);
    margin: 20px auto;
    border-radius: 28px;
    overflow: hidden;
    background: url("/assets/kit/welcome-hero.webp") center 40% / cover no-repeat;
    box-shadow:
      0 0 0 3px var(--kit-gold),
      0 30px 80px rgba(0, 0, 0, 0.45);
  }
  .kit-screen.ending > .kit-col {
    background-image: url("/assets/kit/ending-night.webp");
    background-position: center 30%;
  }
  .kit-screen .kit-logo > b {
    font-size: clamp(40px, 5.4vh, 64px);
  }
}
@media (min-width: 1400px) {
  .kit-col {
    max-width: 600px;
  }
}
/* v0.24 · coin shower over the screen on big gains. */
.coin-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 180;
  overflow: hidden;
}
.coin-rain i {
  position: absolute;
  top: -60px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 20px Poppins, sans-serif;
  font-style: normal;
  color: #9a6510;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #f5bf3a 55%, #c98a1a);
  box-shadow: inset 0 0 0 2.5px #ffd56a, 0 3px 0 #a86f12, 0 6px 12px rgba(120, 80, 0, 0.3);
  transform: scale(var(--s));
  animation: coin-fall 1.8s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
}
@keyframes coin-fall {
  85% {
    opacity: 1;
  }
  to {
    top: 112vh;
    opacity: 0;
    transform: scale(var(--s)) rotate(var(--r));
  }
}
#wallet {
  font-variant-numeric: tabular-nums;
}
/* v0.24.1 · declutter: on phones the map keeps two camera buttons, rivals show as faces only, passed
   plots scroll in one row; the welcome subtitle sits on its own plate. */
@media (max-width: 900px) {
  body[data-screen="city"] .world-controls [data-action="zoom-in"],
  body[data-screen="city"] .world-controls [data-action="zoom-out"],
  body[data-screen="city"] .world-controls [data-action="idle"],
  body[data-screen="city"] .world-controls [data-action="transit-links"] {
    display: none !important;
  }
  body[data-screen="city"] .world-controls {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
  body[data-screen="city"] .map-toolbar .map-title > .icon {
    display: none;
  }
  body[data-screen="city"] .rivals-hud {
    padding: 4px 8px !important;
  }
  body[data-screen="city"] .rivals-hud > span:not(.rival-faces) {
    display: none !important;
  }
  .passed-plots > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .passed-chip {
    flex-shrink: 0;
    font-size: 11px;
    min-height: 30px;
    padding: 3px 10px;
  }
  .passed-plots {
    padding: 6px 8px;
    margin: 2px 0 6px;
  }
  .passed-plots small {
    font-size: 10px;
    margin-bottom: 4px;
  }
}
.kit-screen.welcome .kit-logo > b,
.kit-screen.ending .kit-logo > b {
  font-size: clamp(34px, 10vw, 48px);
  padding: 12px 30px 14px;
}
.kit-screen.welcome .kit-logo > b::before,
.kit-screen.ending .kit-logo > b::before {
  width: 80px;
  height: 30px;
  top: -24px;
}
.kit-screen .kit-logo > small {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.95);
  box-shadow: 0 0 0 2px var(--kit-gold);
  text-shadow: none;
  font-size: clamp(14px, 4vw, 18px);
}
.kit-screen.ending .kit-logo > small {
  color: var(--kit-ink);
  text-shadow: none;
}
.turn-content .passed-plots{grid-column:1/-1;min-width:0}
/* v0.25.1 · graphics picker in the welcome screen's top-right corner. */
.kit-quality{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:5;display:grid;grid-template-columns:repeat(4,auto);gap:4px;padding:8px;border-radius:18px;background:rgba(255,250,239,.92);box-shadow:0 0 0 2px var(--kit-gold),0 6px 16px rgba(0,0,0,.2);max-width:calc(100% - 24px)}
.kit-quality>b{grid-column:1/-1;font:800 13px Prompt,sans-serif;color:var(--kit-ink);padding:0 4px}
.kit-quality>button{border:0;border-radius:999px;padding:6px 10px;min-height:34px;background:#f1e9d6;color:var(--kit-ink);font:700 13px Prompt,sans-serif;cursor:pointer}
.kit-quality>button.on{background:linear-gradient(#11705f,#0a4d43);color:#fff;box-shadow:0 0 0 2px var(--kit-gold)}
.kit-quality>small{grid-column:1/-1;font:500 11px Prompt,sans-serif;color:var(--kit-muted);padding:0 4px}
.kit-screen.welcome .kit-logo{margin-top:130px}
/* v0.26.1 · dialogs scroll again: the ribbon title and close button sit inside the card (no overflow
   needed), the card is capped to the viewport, and its body scrolls under a sticky action bar. */
.modal.kit-modal:not(.modal-story) {
  overflow-y: auto !important;
  overflow-x: hidden;
  margin-top: 0;
  padding-top: 76px;
  max-height: calc(100dvh - 24px) !important;
  overscroll-behavior: contain;
}
.modal.kit-modal:not(.modal-story) > .modal-header {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
}
.modal.kit-modal:not(.modal-story) > .modal-header .icon-button {
  right: 12px;
  top: 2px;
  width: 44px;
  height: 44px;
}
.modal.kit-modal .property-actions {
  position: sticky;
  bottom: -1px;
  z-index: 3;
  margin-top: 12px;
}
.modal-backdrop {
  padding-top: 12px;
}
@media (max-width: 600px) {
  .modal.kit-modal:not(.modal-story) > .modal-header .kit-ribbon > span {
    max-width: calc(100vw - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.modal.kit-modal:not(.modal-story){position:relative}
/* v0.27 · affordability badges */
.afford{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;font:700 12px Prompt,sans-serif}
.afford.ok{background:#dff3e8;color:#0d6b55;box-shadow:inset 0 0 0 1px #9fd6bf}
.afford.short{background:#fde6e1;color:#a33d37;box-shadow:inset 0 0 0 1px #f0b2a6}
.passed-chip.short{opacity:.75;border-color:#e7a99b!important;color:#a33d37!important}
.property-actions .primary:disabled{opacity:1;filter:none;background:#efe7d6!important;color:#a33d37!important;text-shadow:none!important;box-shadow:inset 0 0 0 1.5px #e9b0a4!important}
/* v0.27 · ornate Thai-frame ribbon (notched ends, double gold line) like the kit references; story dots. */
.kit-ribbon > span, .modal.kit-modal > .modal-header .kit-ribbon > span {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2050%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2313735f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230a4a40%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M14%204%20H286%20Q290%204%20291%208%20L296%2018%20Q300%2025%20296%2032%20L291%2042%20Q290%2046%20286%2046%20H14%20Q10%2046%209%2042%20L4%2032%20Q0%2025%204%2018%20L9%208%20Q10%204%2014%204%20Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%239c6f24%27%20stroke-width%3D%274%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M14%204%20H286%20Q290%204%20291%208%20L296%2018%20Q300%2025%20296%2032%20L291%2042%20Q290%2046%20286%2046%20H14%20Q10%2046%209%2042%20L4%2032%20Q0%2025%204%2018%20L9%208%20Q10%204%2014%204%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23e9c46a%27%20stroke-width%3D%272%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M18%209%20H282%20L287%2018%20Q290%2025%20287%2032%20L282%2041%20H18%20L13%2032%20Q10%2025%2013%2018%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23e9c46a%27%20stroke-opacity%3D%27.45%27%20stroke-width%3D%271%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 6px 10px rgba(20, 40, 30, 0.35));
  padding: 12px 52px 14px !important;
}
body.theme-glass .kit-ribbon > span { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal-story .story-dialogue [data-action="story-skip"] { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 5; width: auto; padding: 8px 18px; border-radius: 999px; background: rgba(255,250,239,.95); box-shadow: 0 0 0 2px var(--kit-gold), 0 4px 10px rgba(0,0,0,.2); color: var(--kit-ink); font: 700 14px Prompt, sans-serif; text-decoration: none; }
.modal-story .story-dialogue [data-action="story-skip"]::before { content: "📖 "; }
.story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.story-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8d2c4; }
.story-dots i.on { background: var(--kit-gold); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--kit-gold); }
@media (max-width:600px){.kit-ribbon > span, .modal.kit-modal > .modal-header .kit-ribbon > span{padding:10px 30px 12px !important}.modal.kit-modal:not(.modal-story) > .modal-header{padding-right:52px}}
/* v0.27 · slimmer desktop frame: 64px top bar, 68px side rail, map gets the space. */
@media (min-width: 901px) {
  .sidebar { width: 68px !important; padding: 10px 6px !important; }
  .workspace { margin-left: 68px !important; width: calc(100% - 68px) !important; }
  .brand { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .brand-word, .sidebar-leaf { display: none !important; }
  .sidebar nav { margin-top: 14px !important; gap: 4px !important; }
  .sidebar .nav-item { padding: 8px 0 !important; gap: 4px !important; font-size: 11px; border-radius: 12px !important; }
  .sidebar .nav-item .icon { width: 20px; height: 20px; }
  .topbar { height: 64px !important; padding: 0 20px !important; }
  .wordmark { font-size: 22px !important; }
  .wordmark span { display: none !important; }
  .wallet { padding: 4px 12px !important; }
  .wallet small, .level-block small { display: none !important; }
  .wallet strong { font-size: 20px !important; }
  .topbar .avatar { width: 42px !important; height: 42px !important; }
  body[data-screen="city"] .map-wrap { height: calc(100dvh - 64px) !important; }
}
.toll-tag{align-self:flex-start;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#fff1c6,#f9df95);color:#6b4a00;font:700 13px Prompt,sans-serif;box-shadow:inset 0 0 0 1px #e7c05c}

/* 0.30 status chips, fly picker, card flip */
.status-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 2px}
.status-chips .chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#fff6dc;color:#6b4a12;border:1px solid #e7c779;white-space:nowrap}
.status-chips .chip.shield{background:#e4f4ee;color:#0f6b56;border-color:#93d4bf}
.status-chips .chip.boost,.status-chips .chip.combo{background:#fde8df;color:#a2391c;border-color:#f2b29b}
.status-chips .chip.ev-rain{background:#e3eef8;color:#2a5b86;border-color:#a9c8e6}
.fly-pick{display:flex;flex-direction:column;gap:6px;font-weight:700;margin:8px 0;text-align:left}
.fly-pick select{font:inherit;padding:8px 10px;border-radius:12px;border:1px solid #d9c7a0;background:#fffdf6;color:#3b2a10}
.card-kicker{margin:-4px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;color:#b8860b}
.kit-art.card-flip{animation:cardflip .7s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:50% 50%}
@keyframes cardflip{0%{transform:perspective(600px) rotateY(180deg) scale(.7);opacity:0}60%{opacity:1}100%{transform:perspective(600px) rotateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.kit-art.card-flip{animation:none}}
.turn-content .fly-pick{flex:1 0 100%;margin:2px 0}
.turn-content .fly-pick+.secondary{flex:1 0 100%!important}
.turn-content .bo-note{flex:1 0 100%;text-align:center;font-size:12.5px;font-weight:700;color:#6b4a12;background:#fff6dc;border:1px solid #e7c779;border-radius:10px;padding:4px 8px}
.turn-content .bo-note.lm{background:#f3ecff;border-color:#c9b3ef;color:#4b2f86}

/* 0.33 install chip */
#install-chip{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:4px;align-items:center;background:#fffdf4;border:1px solid #e7c779;border-radius:999px;padding:4px;box-shadow:0 6px 18px rgba(60,40,10,.18);animation:chipin .4s ease-out both}
#install-chip .go{border:0;background:#0f8a72;color:#fff;font:700 13px/1 inherit;padding:9px 14px;border-radius:999px;cursor:pointer}
#install-chip .x{border:0;background:none;color:#8a6a2a;font-size:14px;width:30px;height:30px;border-radius:50%;cursor:pointer}
@keyframes chipin{from{transform:translateY(20px);opacity:0}}
@media (min-width:900px){#install-chip{bottom:20px}}

/* 0.34 daily gift + lucky wheel */
.status-chips .chip.daily{cursor:pointer;background:linear-gradient(#ffe9a6,#f6c95a);color:#5b3a06;border-color:#d9a63c;animation:dailypulse 1.6s ease-in-out infinite;font:inherit;font-size:12px;font-weight:800}
@keyframes dailypulse{50%{transform:scale(1.06);box-shadow:0 0 0 4px rgba(246,201,90,.35)}}
.dg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}
.dg-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:14px;background:#fffaf0;border:1.5px solid #ecd9a8;font-size:12px;color:#6b4a12}
.dg-day b{font-size:20px;line-height:1.2}.dg-day span{font-weight:800}.dg-day em{font-style:normal;font-size:10.5px;color:#0f6b56}
.dg-day.big{grid-column:span 2;background:linear-gradient(#fff3c9,#ffe08a)}
.dg-day.today{border-color:#0f8a72;box-shadow:0 0 0 3px rgba(15,138,114,.25);background:#effaf5}
.dg-day.got{opacity:.62}.dg-day i{position:absolute;top:4px;right:6px;font-style:normal;color:#0f8a72;font-weight:900}
.wheel-wrap{position:relative;width:min(300px,78vw);margin:4px auto 6px}
.wheel-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(80,50,10,.25))}
.wheel-svg text{font:800 12px Prompt,sans-serif;fill:#4a2f08}.wheel-svg text.hub{fill:#fff;font-size:12px}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:30px;color:#c0392b;text-shadow:0 2px 0 #fff}
.wheel-result{min-height:1.4em;font-size:17px;text-align:center;margin:0}.wheel-result b{color:#0f8a72}

/* 0.35 heavy rain over the city */
body.weather-rain .map-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:
  repeating-linear-gradient(104deg,transparent 0 46px,rgba(235,244,252,.22) 46px 47.5px,transparent 47.5px 95px),
  repeating-linear-gradient(98deg,transparent 0 70px,rgba(225,238,250,.14) 70px 71px,transparent 71px 140px),
  linear-gradient(rgba(60,78,96,.09),rgba(60,78,96,.05));
 background-size:240px 260px,330px 380px,100% 100%;animation:rainfall .55s linear infinite}
@keyframes rainfall{to{background-position:-60px 260px,-80px 380px,0 0}}
body.weather-rain .status-chips .chip.ev-rain{background:#dfeaf5;color:#23506f;border-color:#9fbedb}
@media (prefers-reduced-motion:reduce){body.weather-rain .map-wrap::after{animation:none}}

/* 0.36 LINE login */
.line-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:80%;margin:10px auto 2px;padding:13px 16px;border:0;border-radius:14px;background:#06c755;color:#fff;font:700 16px/1.2 inherit;cursor:pointer;box-shadow:0 4px 0 #04a045}
.line-btn b{font:900 12px/1 sans-serif;background:#fff;color:#06c755;border-radius:6px;padding:4px 5px;letter-spacing:.02em}
.line-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #04a045}.line-btn:disabled{opacity:.7}
.line-hint{text-align:center;font-size:13px;color:#6b5a3a;margin:2px 0 6px}
.line-out{display:block;margin:6px auto 0;color:#8a5a2a}
.acct-pic{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle}
.status-chips .chip.save-line{cursor:pointer;background:#e7f9ee;color:#047a37;border-color:#8fdcae;font:inherit;font-size:12px;font-weight:800}