/* Juicy Village. One dark game world in the JuicyGrade palette: deep green-black,
   lime for actions and progress, sage, sky and peach as supporting accents. */
:root {
  --bg: #0e110d; --bg-2: #12160f; --surface: #191d16; --surface-2: #22271e; --surface-3: #2a3025;
  --line: #333a2d; --line-2: #434b3b;
  --text: #f2f2e9; --muted: #a0a696; --faint: #6f7667;
  --lime: #e7ff26; --lime-deep: #a9bd00; --on-lime: #11140f;
  --sage: #bfd48d; --sky: #9acbef; --peach: #ffb27a; --good: #b6f28a; --bad: #ff8f80;
  --screen: #050604;
  --f-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg-2); }
img, canvas { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(20px, 2.3vw, 26px); font-weight: 800; line-height: 1.15; }
h3 { font-size: 17px; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--f-mono); }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.meta { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 17px; color: var(--muted); max-width: 62ch; margin-top: 10px; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
ul.clean { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 0.06s, background 0.15s; }
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-lime { background: var(--lime); color: var(--on-lime); border-color: transparent; box-shadow: 0 3px 0 var(--lime-deep); }
.btn-lime:hover:not(:disabled) { background: #f0ff6a; }
.btn-lime:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--lime-deep); }
.btn.big { font-size: 17px; padding: 13px 22px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); padding-left: 4px; }
.btn.danger { border-color: #6b2e27; color: var(--bad); }
.btn[aria-pressed="true"] { border-color: var(--sky); color: var(--sky); }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.seg button span { font-weight: 400; font-size: 12px; margin-left: 6px; opacity: 0.8; }
.seg button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.seg.sm button { font-family: var(--f-mono); font-size: 11px; padding: 4px 10px; letter-spacing: 0.04em; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 10px max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: baseline; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
.brand-the { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.brand-sq { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -0.09em; color: var(--lime); }
.brand-drop { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--peach); margin-left: 2px; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav-btn { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 7px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.nav-btn:hover { color: var(--text); background: var(--surface); }
.nav-btn[aria-current="true"] { color: var(--on-lime); background: var(--lime); }
.stats { display: flex; align-items: center; gap: 10px; }
.rank-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px 4px 5px; font-weight: 700; font-size: 13px; cursor: pointer; }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; }
.xp-mini { display: grid; gap: 3px; min-width: 84px; }
.xp-num { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.xp-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.xp-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--lime)); border-radius: inherit; transition: width 0.4s; }
.xp-bar.wide { flex: 1; height: 8px; }
.stat { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; }
.stat b { color: var(--lime); }

/* ---------- layout ---------- */
main { padding-block: 26px 60px; outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-head > div:first-child { min-width: 0; }
.head-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.wrap > .card + .card, .wrap > section.card, .wrap > div > .card + .card { margin-top: 16px; }
.grid-3, .grid-4 { display: grid; gap: 14px; margin-top: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 > .card, .grid-4 > .card { margin-top: 0; }
.foot { border-top: 1px solid var(--line); padding-block: 22px 40px; color: var(--faint); font-size: 13px; }
.foot p { max-width: 90ch; }
.loading { display: flex; align-items: center; gap: 12px; padding: 50px 0; color: var(--muted); justify-content: center; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--lime); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- rank swatches ---------- */
.swatch { height: 46px; border-radius: 10px; }
.swatch.big { height: 70px; margin-bottom: 14px; }
.sw-raw { background: linear-gradient(90deg, #2c2b27, #4c4940 55%, #25241f); }
.sw-log { background: linear-gradient(90deg, #76776d, #8d8e84 50%, #9d9e94); }
.sw-bal { background: linear-gradient(90deg, #1e1e1e, #808080 50%, #ececec); }
.sw-match { background: linear-gradient(90deg, #b98466 0 47%, #191d16 47% 53%, #b98466 53% 100%); }
.sw-graded { background: linear-gradient(90deg, #1c555c, #2f8a8f 42%, #df975a 58%, #f2b77a); }
.sw-juicy { background: linear-gradient(90deg, #ff6a2a, #ffad2e 35%, #e7ff26 68%, #6fdc63); }

/* ---------- home ---------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: 20px; }
.rank-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; }
.rank-card .swatch { height: 92px; }
.rank-body { display: grid; gap: 6px; }
.xp-line { display: flex; align-items: center; gap: 10px; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-grid > .card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feature h2 { font-size: 24px; }
.feature.taste { grid-column: 1 / -1; background: linear-gradient(120deg, #2a3a10, var(--surface) 60%); border-color: #4f6110; }
.feature.daily { background: linear-gradient(160deg, #23301a, var(--surface) 70%); }
.feature .row { margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.diff-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.dd { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--muted); padding: 5px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.dd b { font-family: var(--f-mono); color: var(--text); }
.dd.played { border-color: var(--lime-deep); }
.go-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; }
.thumb { border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.arcade-strip { margin-top: 26px; }
.strip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tile { text-align: left; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-width: 0; }
.tile:hover { border-color: var(--lime-deep); }
.tile b { font-family: var(--f-display); font-size: 15px; }
.tile-node { font-size: 11px; color: var(--lime); }
.tile-best { font-size: 11.5px; color: var(--sage); }
.board-mini { margin-top: 26px; }

/* ---------- node tree ---------- */
.tree-wrap { overflow-x: auto; margin-inline: -4px; padding: 4px; }
.tree { width: 100%; min-width: 900px; height: auto; display: block; }
.tnode { cursor: pointer; }
.tnode:focus { outline: none; }
.tnode:focus-visible .n-rect { stroke: var(--sky); stroke-width: 3; }
.n-rect { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; transition: stroke 0.15s; }
.tnode:hover .n-rect { stroke: var(--sage); }
.n-done .n-rect { stroke: var(--lime); stroke-width: 2; }
.n-open .n-rect { stroke: var(--sky); stroke-width: 2; }
.n-locked .n-title, .n-unbuilt .n-title { fill: var(--muted); }
.n-unbuilt .n-rect { stroke-dasharray: 2 4; }
.tnode.sel .n-rect { fill: #2c3424; stroke-width: 3; }
.n-el { cursor: default; }
.n-el .n-rect { stroke-dasharray: 5 4; fill: var(--surface); }
.n-el .n-title { fill: var(--faint); }
.n-num { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.n-done .n-num { fill: var(--lime); }
.n-open .n-num { fill: var(--sky); }
.n-title { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; fill: var(--text); }
.n-bar { fill: var(--surface-3); }
.n-bar-fill { fill: var(--lime); }
.wire { stroke: var(--line-2); stroke-width: 2; fill: none; }
.wire.lit { stroke: var(--lime); }
.wire.el { stroke-dasharray: 5 5; }
.port { fill: var(--good); }
.out-label { font-family: var(--f-mono); font-size: 11px; fill: var(--lime); letter-spacing: 0.08em; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 2px solid var(--line-2); margin-right: 6px; vertical-align: -1px; }
.legend .l-done { border-color: var(--lime); }
.legend .l-open { border-color: var(--sky); }
.legend .l-el { border-style: dashed; }

/* ---------- node detail ---------- */
.node-detail { display: grid; gap: 14px; }
.node-head h2 { font-size: 30px; }
.lessons { display: grid; gap: 10px; }
.lesson-row, .boss-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.lesson-info { display: grid; gap: 2px; }
.lesson-play { display: flex; gap: 6px; flex-wrap: wrap; }
.diff-btn { display: grid; gap: 1px; justify-items: center; min-width: 82px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13px; }
.diff-btn:hover { border-color: var(--lime); }
.diff-btn.has { border-color: var(--lime-deep); }
.stars-sm { font-size: 12px; color: var(--lime); letter-spacing: 1px; font-weight: 400; }
.boss-row { background: linear-gradient(110deg, #33240f, var(--surface-2) 60%); border-color: #5c4318; }
.boss-row.cleared { background: linear-gradient(110deg, #26330f, var(--surface-2) 60%); border-color: var(--lime-deep); }
.boss-tag { color: var(--peach); letter-spacing: 0.1em; }
.cleared .boss-tag { color: var(--lime); }

/* ---------- lesson / tasks ---------- */
.lesson-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.steps-bar { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 16px; }
.steps-bar li { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); padding-top: 8px; border-top: 3px solid var(--surface-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps-bar li.done { color: var(--sage); border-color: var(--sage); }
.steps-bar li.now { color: var(--lime); border-color: var(--lime); }
.brief-card { display: grid; gap: 16px; }
.brief-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 26px; }
.brief-grid > div { display: grid; gap: 8px; align-content: start; }
.big-quote { font-family: var(--f-display); font-size: 21px; font-weight: 700; line-height: 1.3; }
.manual { font-family: var(--f-mono); font-size: 12.5px; color: var(--sage); }
.banner { background: #2c2310; border: 1px solid #5c4318; color: var(--peach); padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 600; }
.round-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.round-dots { display: flex; gap: 5px; }
.round-dots i { width: 22px; height: 6px; border-radius: 99px; background: var(--surface-3); }
.round-dots i.now { background: var(--sky); }
.round-dots i.good { background: var(--lime); }
.round-dots i.miss { background: var(--bad); }

.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 14px; }
.task-title { font-size: 24px; }
.task-prompt { font-size: 17px; color: var(--text); max-width: 70ch; }
.task-media { display: grid; gap: 12px; }
.task-media.n2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.task-media .media-img, .task-media > .media .media-img { width: 100%; height: auto; border-radius: 10px; max-height: 52vh; object-fit: contain; background: var(--screen); }
.task-media > .media-img { width: auto; margin: 0 auto; }
.media { margin: 0; display: grid; gap: 6px; }
.media figcaption, .pair figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.media-scope { width: 100%; height: auto; border-radius: 10px; background: var(--screen); }
.task-media > .media:has(.media-scope), .task-media > .media-scope { width: 100%; max-width: 560px; margin: 0 auto; }
.task-media.n1 > .media:has(.media-img) { max-width: 760px; margin: 0 auto; width: 100%; }
.media-scope.sq { max-width: 300px; margin: 0 auto; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair-item { margin: 0; display: grid; gap: 6px; }
.pair-item .media-img { border-radius: 10px; width: 100%; height: auto; }

.opts { display: grid; gap: 10px; }
.opts-text.c3, .opts-text.c4, .opts-text.c5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.opts-text.c1 { grid-template-columns: 1fr; }
.opts-media { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.opts-media.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-media.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; font-weight: 600; display: grid; gap: 8px; min-width: 0; transition: border-color 0.12s, background 0.12s; }
.opt:hover:not(:disabled) { border-color: var(--sage); background: var(--surface-3); }
.opt:disabled { cursor: default; }
.opt[aria-pressed="true"] { border-color: var(--sky); background: #1d2a33; }
.opt.right { border-color: var(--good); background: #1f2e16; }
.opt.wrong { border-color: var(--bad); background: #331c18; opacity: 0.85; }
.opt-media { padding: 8px; }
.opt-media .media-img, .opt-media .media-scope { width: 100%; height: auto; border-radius: 8px; }
.opt-label { font-size: 15px; }
.opt-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.feedback { display: grid; gap: 8px; }
.feedback:empty { display: none; }
.ok-text { color: var(--good); font-weight: 700; }
.miss-text { color: var(--bad); font-weight: 700; }
.verdict { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.verdict-score { font-family: var(--f-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.verdict-unit { font-family: var(--f-mono); color: var(--muted); }
.verdict-stars { color: var(--lime); font-size: 22px; letter-spacing: 3px; }
.verdict-extra { font-family: var(--f-mono); font-size: 12px; color: var(--muted); flex-basis: 100%; }
.verdict.good .verdict-score { color: var(--lime); }
.verdict.ok .verdict-score { color: var(--peach); }
.verdict.miss .verdict-score { color: var(--bad); }

/* wipe */
.wipe { position: relative; border-radius: 10px; overflow: hidden; background: var(--screen); touch-action: none; --x: 50%; max-height: 56vh; }
.wipe canvas { width: 100%; height: auto; display: block; }
.wipe .wipe-a { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.wipe-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.wipe-tag { position: absolute; top: 10px; font-family: var(--f-mono); font-size: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 8px; border-radius: 6px; pointer-events: none; }
.wipe-tag.l { left: 10px; } .wipe-tag.r { right: 10px; }
.wipe-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* guess */
.guess { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.guess-top { display: flex; justify-content: space-between; align-items: baseline; }
.guess-val { font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--lime); }
.guess-track { position: relative; padding: 30px 0 4px; }
.guess-track input { width: 100%; accent-color: var(--lime); }
.guess-answer { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--f-mono); font-size: 12px; background: var(--good); color: var(--on-lime); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.guess-answer::after { content: ""; position: absolute; left: 50%; bottom: -8px; border: 4px solid transparent; border-top-color: var(--good); transform: translateX(-50%); }
.guess-marks { position: relative; height: 30px; margin-top: 18px; }
.chip { position: absolute; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.ends { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--faint); }

/* grading desk */
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.stage { display: grid; gap: 12px; min-width: 0; position: sticky; top: 70px; }
.viewers { display: grid; gap: 10px; }
.viewers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viewer-wrap { position: relative; border-radius: 10px; overflow: hidden; background: var(--screen); }
.viewer { width: 100%; height: auto; display: block; }
.viewer-tag { position: absolute; top: 8px; left: 8px; font-family: var(--f-mono); font-size: 11px; background: rgba(0, 0, 0, 0.62); color: #fff; padding: 2px 8px; border-radius: 6px; }
.viewer-wrap.ref .viewer-tag { background: rgba(231, 255, 38, 0.92); color: var(--on-lime); }
.scope-box { background: var(--screen); border-radius: 10px; padding: 8px 10px 10px; }
.scope-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #cfd3c7; }
.scope-head .seg { background: transparent; border-color: #2a2e26; }
.scope-head .seg button { color: #cfd3c7; }
.scope-head .seg button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.scope-canvas { width: 100%; height: auto; display: block; }
.scope-canvas.sq { max-width: 300px; margin: 0 auto; }
.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.brief { font-size: 15.5px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--line); }
.controls { display: grid; gap: 12px; }
.controls.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.controls.locked { opacity: 0.45; }
.ctrl { display: grid; gap: 2px; }
.ctrl label { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; }
.ctrl output { font-family: var(--f-mono); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ctrl input[type=range] { width: 100%; accent-color: var(--lime); }
.meter { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; }
.meter-val { font-family: var(--f-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.meter-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0; background: var(--bad); border-radius: inherit; transition: width 0.12s, background 0.2s; }
.meter-fill[data-band="good"] { background: var(--peach); }
.meter-fill[data-band="great"] { background: var(--lime); }
.hint { font-size: 14.5px; padding: 10px 12px; border-radius: 10px; background: #1d2a33; border: 1px solid #2d4556; color: #d8ecfb; }
.live { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.live:empty { display: none; }
.diag { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid #5c4318; background: #241c0f; }
.diag-q { font-weight: 700; }
.diag-fb { font-size: 14px; color: var(--peach); }
.result-box { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.bridge { font-size: 14px; color: var(--muted); }
.bridge b { color: var(--sage); }

/* node detective */
.nodegraph { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 14px 6px; background: var(--bg-2); border-radius: 10px; border: 1px solid var(--line); }
.nodegraph .wire { display: block; width: 22px; min-width: 14px; height: 2px; background: var(--line-2); }
.nodegraph .port { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: none; }
.node { flex: none; display: grid; gap: 4px; min-width: 96px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
.node[aria-pressed="true"] { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(154, 203, 239, 0.18); }
.node.off { opacity: 0.45; }
.node.right { border-color: var(--good); }
.node.wrong { border-color: var(--bad); }
.node-num { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.node-label { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.node-toggle { font-family: var(--f-mono); font-size: 11px; border-radius: 6px; padding: 2px 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--good); cursor: pointer; justify-self: start; }
.node-toggle[aria-pressed="false"] { color: var(--bad); }
.complaint { font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.35; display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: #2c2310; border: 1px solid #5c4318; }

/* results */
.done-card { display: grid; gap: 14px; }
.done-card.failed { border-color: #6b2e27; }
.done-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.done-top > div { display: grid; gap: 10px; align-content: start; }
.done-top h2 { font-size: 34px; }
.stars-big { font-size: 34px; color: var(--lime); letter-spacing: 6px; line-height: 1; }
.res-stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; }
.res-stats dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.res-stats dd { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.resolve-card { padding: 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.resolve-card li { display: flex; justify-content: space-between; gap: 10px; }
.share { display: grid; gap: 8px; align-content: start; }
.share-box { width: 100%; font-family: var(--f-mono); font-size: 14px; line-height: 1.6; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; resize: none; }

/* daily */
.diff-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.diff-card { text-align: left; display: grid; gap: 8px; align-content: start; cursor: pointer; margin: 0; color: var(--text); }
.diff-card:hover { border-color: var(--lime-deep); }
.diff-card h2 { font-size: 30px; }
.played { color: var(--lime); font-weight: 700; }

/* arcade */
.arcade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.game-card { text-align: left; display: grid; gap: 6px; align-content: start; cursor: pointer; margin: 0; color: var(--text); }
.game-card:hover { border-color: var(--lime-deep); }

/* grade-off */
.go-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.go-intro > div { display: grid; gap: 10px; }
.go-img { border-radius: 12px; width: 100%; }
.vote-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.vote { display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; font-weight: 700; }
.vote:hover { border-color: var(--lime); }
.vote .media-img { width: 100%; height: auto; border-radius: 8px; }
.fridge-title { margin: 20px 0 10px; }
.fridge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fridge-item { margin: 0; display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #f2f2e9; color: #171a13; transform: rotate(-1deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.fridge-item:nth-child(2) { transform: rotate(1.2deg); }
.fridge-item:nth-child(3) { transform: rotate(-0.4deg); }
.fridge-item .media-img { border-radius: 6px; width: 100%; height: auto; }
.fridge-item figcaption { font-size: 13px; }
.fridge-item .muted { color: #555b4d; }
.fridge-item.me { outline: 3px solid var(--lime); }

/* leaderboard */
table.board { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.board th, .board td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.board th { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.board td.num, .board th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.board tr.me td { background: #26300f; color: var(--lime); font-weight: 700; }

/* profile */
.name-edit { display: grid; gap: 4px; }
.name-edit input, .onb input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); min-width: 0; }
.ranks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rank { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.rank.current { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(231, 255, 38, 0.15); }
.rank.past { opacity: 0.75; }
.rank b { font-family: var(--f-display); font-size: 17px; }
.stats-grid .stat-card { display: grid; gap: 4px; }
.stat-val { font-family: var(--f-display); font-weight: 800; font-size: 26px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.badge { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-2); opacity: 0.5; }
.badge.got { opacity: 1; border-style: solid; border-color: var(--lime-deep); background: #1f2712; }
.history { list-style: none; padding: 0; margin: 8px 0 0; display: grid; }
.history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.history b { color: var(--lime); white-space: nowrap; }
.settings { display: grid; gap: 12px; justify-items: start; }
.check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--lime); }
.confirm { display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid #6b2e27; background: #2a1714; }

/* modal, toasts, confetti */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 4, 0.72); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: pop 0.25s ease-out; }
.modal:focus { outline: none; }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.onb { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.onb input { flex: 1; }
.onb-body { display: grid; gap: 10px; }
.onb.onb-welcome { display: grid; gap: 10px; }
.onb-welcome .check { align-items: flex-start; }
.onb-welcome .check input { flex: none; padding: 0; border: 0; margin-top: 3px; }
.toasts { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text); padding: 10px 14px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: pop 0.2s ease-out; transition: opacity 0.4s, transform 0.4s; }
.toast.xp { background: var(--lime); color: var(--on-lime); border-color: transparent; font-family: var(--f-mono); }
.toast.badge { background: var(--peach); color: #2a1606; border-color: transparent; }
.toast.out { opacity: 0; transform: translateY(8px); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .stats .xp-mini { display: none; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controls.two { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topbar-in { flex-wrap: wrap; gap: 8px 14px; }
  .nav { order: 3; flex-basis: 100%; }
  .stats { margin-left: auto; }
  .home-hero, .home-grid, .split, .brief-grid, .done-top, .go-intro, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
  /* While grading on a phone, keep the picture and scope on screen above the controls. */
  .topbar { position: relative; top: 0; }
  .grade .stage { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: var(--surface); padding-block: 6px; gap: 6px; }
  .grade .scope-canvas { max-height: 26vh; width: auto; max-width: 100%; margin: 0 auto; }
  .grade .scope-box { padding: 4px 8px 6px; }
  .diff-cards, .arcade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-media.n2 { grid-template-columns: minmax(0, 1fr); }
  .opts-media.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .card, .task { padding: 16px; }
  .diff-cards, .arcade-grid, .strip, .fridge, .vote-pair { grid-template-columns: minmax(0, 1fr); }
  .opts-media.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-row, .boss-row { grid-template-columns: minmax(0, 1fr); }
  .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-bar li { font-size: 0; }
  .steps-bar li.now { font-size: 11px; }
  .go-row { grid-template-columns: 96px minmax(0, 1fr); }
  .stat { display: none; }
  .pair-item figcaption { font-size: 11px; }
  .viewers.two { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .grade .viewers.two .viewer { display: block; width: auto; max-width: 100%; max-height: 22vh; margin: 0 auto; }
  .grade .scope-canvas { max-height: 18vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- lead capture ---------- */
.lead-card { display: grid; gap: 8px; border-color: #4f6110; background: linear-gradient(120deg, #23300f, var(--surface) 65%); }
.home-grid > .lead-card { margin: 0; }
.lead-form { display: grid; gap: 10px; margin-top: 4px; }
.lead-fields { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: 8px; }
.lead-fields input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); min-width: 0; }
.form-err { color: var(--bad); font-size: 14px; }
.form-err:empty { display: none; }
@media (max-width: 600px) { .lead-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- village ---------- */
body.in-village main { padding: 0; }
body.in-village .foot { display: none; }
.village-card { background: linear-gradient(150deg, #1f3424, var(--surface) 70%); border-color: #3c5a3a; }
.village { position: relative; overflow: hidden; background: #0f1630; min-height: 420px; user-select: none; -webkit-user-select: none; }
.v-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.v-canvas.retro { image-rendering: pixelated; image-rendering: crisp-edges; }
.v-hud { position: absolute; top: 12px; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.v-card { background: rgba(14, 17, 13, 0.82); border: 2px solid #3a4232; border-radius: 10px; padding: 8px 12px; color: var(--text); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
.v-time { display: grid; gap: 6px; max-width: min(360px, 60vw); }
.v-clock { font-family: var(--f-mono); font-size: 13px; }
.v-clock b { font-family: var(--f-display); font-size: 22px; letter-spacing: -0.02em; color: var(--lime); }
.v-energy { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.v-energy-bar { flex: 1; height: 8px; border-radius: 99px; background: #2a3025; overflow: hidden; min-width: 90px; }
.v-energy-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6fdc63, var(--lime)); }
.v-energy-bar span[data-low="1"] { background: var(--bad); }
.v-goal { font-size: 12.5px; color: var(--sage); line-height: 1.35; }
.v-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--f-mono); font-size: 13px; justify-content: flex-end; max-width: 50vw; }
.v-stats b { color: var(--lime); font-weight: 600; }
.v-right { display: grid; gap: 8px; justify-items: end; }
.v-mini { display: grid; gap: 6px; justify-items: center; pointer-events: auto; }
.v-minimap { display: block; width: 150px; height: 150px; border-radius: 50%; background: #25331f; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); cursor: pointer; }
.v-minimap:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.v-camctl { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(14, 17, 13, 0.82); border: 2px solid #3a4232; }
.v-camctl button { width: 34px; height: 30px; border-radius: 7px; border: 1px solid #3a4232; background: #22271e; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.v-camctl button:hover { border-color: var(--lime-deep); }
.v-needle { display: inline-block; font-size: 12px; color: var(--lime); }
.v-canvas.dragging { cursor: grabbing; }
.v-mapview { position: relative; margin: 0 auto; border-radius: 12px; border: 2px solid #3a4232; background: #25331f; }
.v-mapcanvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; cursor: crosshair; }
.v-pin { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 99px; background: rgba(14, 17, 13, 0.88); border: 1.5px solid #4a5440; color: var(--text); font: 700 12px/1.2 var(--f-body); white-space: nowrap; cursor: pointer; }
.v-pin:hover, .v-pin:focus-visible { border-color: var(--lime); color: var(--lime); z-index: 1; }
.v-pin i { font-style: normal; }
.v-you { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; pointer-events: none; }
.v-you i { font-style: normal; font-size: 16px; line-height: 1; color: var(--lime); text-shadow: 0 0 2px #11140f, 0 0 2px #11140f, 0 0 4px #11140f; }
.v-you b { position: absolute; top: 18px; font: 800 11px/1 var(--f-body); color: #11140f; background: var(--lime); padding: 2px 5px; border-radius: 99px; }
.v-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.v-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid #11140f; }
.v-prompt { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; border: 2px solid var(--lime); background: rgba(14, 17, 13, 0.9); color: var(--lime); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -3px); } }
.v-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(14, 17, 13, 0.82); border: 2px solid #3a4232; }
.v-bar button { font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 8px; border: 1px solid #3a4232; background: #22271e; color: var(--text); cursor: pointer; }
.v-bar button:hover { border-color: var(--lime-deep); }
.v-overlay { position: absolute; inset: 0; background: rgba(5, 6, 4, 0.6); display: grid; place-items: center; padding: 14px; overflow-y: auto; z-index: 5; }
.v-panel { width: min(680px, 100%); max-height: calc(100% - 8px); overflow-y: auto; background: var(--surface); border: 2px solid #4a5440; border-radius: 16px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.5); animation: pop 0.2s ease-out; }
.v-panel.wide { width: min(1180px, 100%); }
.v-head { display: flex; align-items: center; gap: 12px; }
.v-head > div { flex: 1; min-width: 0; }
.v-head h2 { font-size: 24px; }
.v-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 20px; cursor: pointer; flex: none; }
.v-portrait { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 20px; color: #fff; flex: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.v-say { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.v-say p { font-size: 16px; line-height: 1.5; padding-top: 4px; }
.v-sub { font-size: 15px; margin-top: 6px; color: var(--sage); }
.v-jobs { display: grid; gap: 8px; }
.v-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.v-job.locked { opacity: 0.6; }
.v-job-body { display: grid; gap: 2px; }
.v-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid #5c4318; background: #241c0f; }
.v-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14.5px; }
.v-posts li { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.v-posts b { color: var(--lime); }
.v-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.v-tile { text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.v-tile:hover { border-color: var(--lime); }
.v-tile b { font-family: var(--f-display); font-size: 17px; }
.v-tile span { font-size: 13.5px; color: var(--muted); }
.v-tile.hi { border-color: var(--lime-deep); background: #26300f; }
.v-shop { display: grid; gap: 8px; }
.v-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.v-item > b { grid-column: 1; }
.v-item > span.small { grid-column: 1; }
.v-item > .btn, .v-item > .pill { grid-column: 2; grid-row: 1 / span 2; }
.v-item.owned { border-color: var(--lime-deep); }
.v-member { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid #4f6110; background: #1f2712; }
.v-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.v-map { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.v-map.here { border-color: var(--lime-deep); }
.v-needs { list-style: none; padding: 0; margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.v-needs li.ok { color: var(--good); }
.v-post { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.v-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v-statgrid > div { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.v-statgrid b { font-family: var(--f-display); font-size: 20px; }
.v-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#v-name { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); max-width: 320px; }
.v-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v-path { text-align: left; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.v-path[aria-pressed="true"] { border-color: var(--lime); background: #26300f; }
.v-path b { font-family: var(--f-display); font-size: 17px; }
.v-path-dot { width: 22px; height: 22px; border-radius: 6px; }
.v-gig-body { display: grid; gap: 12px; }
.v-gig-body .task { border: 0; padding: 0; background: transparent; }
.v-result { display: grid; gap: 10px; }
@media (max-width: 760px) {
  .v-paths, .v-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-stats { max-width: 46vw; font-size: 12px; }
  .v-clock b { font-size: 18px; }
  .v-goal { display: none; }
  .v-minimap { width: 104px; height: 104px; }
  .v-camctl button { width: 30px; height: 28px; }
  .v-pin { font-size: 10.5px; padding: 2px 6px 2px 3px; }
  .v-job { grid-template-columns: auto minmax(0, 1fr); }
  .v-job > .btn, .v-job > .pill { grid-column: 1 / -1; justify-self: start; }
  .v-panel { padding: 16px; }
}
.v-place { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: #f6ecd2; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); pointer-events: none; }
.v-online { color: var(--good); }
.v-note { display: grid; gap: 6px; }
.lead-fields.two { grid-template-columns: minmax(0, 1fr) auto; }
.v-tile:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 760px) { .v-place { display: none; } }

/* ---------- life in the village ---------- */
.v-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.v-seg button { font: 600 13px/1 var(--f-body); padding: 7px 10px; border-radius: 7px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.v-seg button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.v-seg.small button { font-size: 12px; padding: 6px 8px; }
.v-swatches { display: flex; gap: 8px; }
.v-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-2); cursor: pointer; }
.v-swatches button[aria-pressed="true"] { outline: 3px solid var(--lime); outline-offset: 2px; }
.v-hearts { color: #ff8fb0; letter-spacing: 2px; font-size: 16px; }
.v-friend { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.v-friend-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-friend select { min-width: 0; flex: 1 1 160px; padding: 8px; border-radius: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); font: inherit; }
.v-scene-line { font-size: 19px; line-height: 1.5; min-height: 3.2em; }
.v-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-cards li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--lime); background: var(--surface-2); }
.v-cards span { font-size: 14px; color: var(--muted); }
.v-goal-line { font-family: var(--f-mono); font-size: 13px; color: var(--lime); }
.v-standings { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; }
.v-standings li { padding: 4px 8px; border-radius: 8px; }
.v-standings li b { float: right; }
.v-standings li.me { background: #26300f; color: var(--lime); }
.v-emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.v-emotes button { font-size: 28px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
.v-emotes button:hover { border-color: var(--lime); }
.v-goals { display: grid; gap: 8px; }
.v-goalbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13.5px; }
.v-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.v-wall figure, .v-wall-item { margin: 0; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.v-wall img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); }
.v-ending { font-size: 40px; color: var(--lime); }
.v-ending-page { display: grid; gap: 12px; min-height: 240px; align-content: center; }
.v-credits { text-align: center; display: grid; gap: 6px; }
.v-bar button[title] { font-size: 16px; padding: 5px 10px; }

/* Photo mode: the HUD steps aside for the grade panel and the shutter. */
.village.photo-on .v-hud, .village.photo-on .v-bar, .village.photo-on .v-prompt, .village.photo-on .v-place,
.village.room-on .v-hud, .village.room-on .v-bar, .village.room-on .v-prompt, .village.room-on .v-place { display: none; }
.v-photo { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.v-photo.flash::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0.7; animation: flash 0.18s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
.v-ph-grid { position: absolute; inset: 0; background:
  linear-gradient(to right, transparent calc(33.33% - 1px), rgba(255,255,255,0.4) calc(33.33% - 1px), rgba(255,255,255,0.4) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), rgba(255,255,255,0.4) calc(66.66% - 1px), rgba(255,255,255,0.4) 66.66%, transparent 66.66%),
  linear-gradient(to bottom, transparent calc(33.33% - 1px), rgba(255,255,255,0.4) calc(33.33% - 1px), rgba(255,255,255,0.4) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), rgba(255,255,255,0.4) calc(66.66% - 1px), rgba(255,255,255,0.4) 66.66%, transparent 66.66%); }
.v-ph-top { position: absolute; top: 12px; left: 12px; max-width: min(340px, calc(100% - 360px)); pointer-events: auto; }
.v-ph-brief { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(14, 17, 13, 0.85); border: 2px solid #3a4232; }
.v-checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.v-checks li::before { content: "○ "; }
.v-checks li.ok { color: var(--good); }
.v-checks li.ok::before { content: "✓ "; }
.v-ph-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 320px; overflow-y: auto; pointer-events: auto; display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(20, 24, 18, 0.92); border: 2px solid #3a4232; }
.v-ph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-ph-head b { font-family: var(--f-display); font-size: 17px; }
.v-ph-looks { display: flex; flex-wrap: wrap; gap: 6px; }
.v-ph-looks .chip { position: static; transform: none; font: 600 12px/1 var(--f-body); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.v-ph-looks .chip:hover { border-color: var(--lime); }
.v-ph-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.v-ph-slider span { display: flex; gap: 6px; align-items: baseline; }
.v-ph-slider span i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.v-ph-slider output { font-size: 12px; color: var(--lime); }
.v-ph-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--lime); }
.v-ph-scope { width: 100%; height: auto; border-radius: 8px; background: #0a0c09; border: 1px solid var(--line-2); }
.v-shutter { position: absolute; left: calc(50% - 170px); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: transparent; pointer-events: auto; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.v-shutter span { width: 54px; height: 54px; border-radius: 50%; background: #fff; transition: transform 0.1s; }
.v-shutter:active span { transform: scale(0.88); }
.v-ph-result { width: 100%; border-radius: 10px; border: 1px solid var(--line-2); }

/* Room decorating. */
.v-roomui { position: absolute; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(20, 24, 18, 0.92); border: 2px solid #3a4232; z-index: 3; }
.v-roomhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v-roomhead > div { display: grid; }
.v-catalog { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.v-cat { flex: none; display: grid; gap: 2px; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.v-cat b { font-size: 13.5px; }
.v-cat span { font-size: 12px; color: var(--muted); }
.v-cat.on, .v-cat:hover:not(:disabled) { border-color: var(--lime); }
.v-cat:disabled { opacity: 0.45; cursor: not-allowed; }
.v-roomsel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-roomtip { margin: 0; }

@media (max-width: 760px) {
  .v-ph-panel { top: auto; left: 8px; right: 8px; width: auto; height: 44%; bottom: 8px; }
  .v-ph-top { right: 8px; left: 8px; max-width: none; }
  .v-shutter { left: auto; right: 16px; bottom: calc(44% + 22px); width: 60px; height: 60px; }
  .v-shutter span { width: 44px; height: 44px; }
  .v-goalbar { grid-template-columns: 1fr auto; }
  .v-goalbar .v-energy-bar { grid-column: 1 / -1; grid-row: 2; }
  .v-goalbar i { display: none; }
  .v-bar-map { display: none; }
  .v-bar { left: 8px; right: 8px; transform: none; width: fit-content; margin-inline: auto; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; }
  .v-bar button, .v-bar button.v-today { padding: 7px 9px; font-size: 12px; }
  .v-bar button[title] { padding: 5px 8px; }
  .v-emotes { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Today, deliveries, decisions and the Wilds ---------- */
.v-bar button.v-today { position: relative; font-size: 13px; padding: 7px 12px; }
.v-badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lime); color: #11140f; font: 700 11px/18px var(--f-mono); text-align: center; }
.v-prog { display: block; height: 6px; border-radius: 3px; background: #2c3326; overflow: hidden; margin-top: 4px; }
.v-prog > span { display: block; height: 100%; background: var(--lime); border-radius: 3px; }
.v-job.done { opacity: 0.7; }
.v-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.v-pay a { color: var(--lime); }
.v-item > .v-pay { grid-column: 2; grid-row: 1 / span 2; }
.v-story-btn { justify-self: start; margin-top: 4px; }
.v-friend { display: grid; gap: 8px; }
.v-secrets li.ok, .v-fate li { color: var(--text); }
.v-secrets li { color: var(--muted); }
.lead-card.compact { padding: 14px; }
.linkish.v-report { font-size: 12px; margin-left: 4px; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: start; font: inherit; }
.village.map-wilds .v-place { color: #bfe6a8; }
@media (max-width: 560px) {
  .v-item > .v-pay { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
}

/* Server: the Turnstile check (usually invisible) and joining a friend's room */
.turnstile-box { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; }
.v-join { margin-left: 8px; font-size: 13px; }

/* Faces: portraits in panels, and the face-to-face conversation box */
.v-portrait.face { padding: 0; overflow: hidden; background: #f6ecd2; border: 2px solid rgba(0, 0, 0, 0.25); }
.v-portrait.face svg, .v-talk-face svg { width: 100%; height: 100%; display: block; }
.v-head .v-portrait.face { width: 56px; height: 56px; border-radius: 14px; }
.v-say .v-portrait.face { width: 72px; height: 72px; border-radius: 14px; }
.v-say-name { display: block; font-family: var(--f-display); font-size: 14px; color: var(--lime); }
.v-say > div { min-width: 0; }

.v-talk-veil { position: absolute; inset: 0; z-index: 6; cursor: pointer; background: linear-gradient(to top, rgba(5, 6, 4, 0.55), rgba(5, 6, 4, 0) 48%); }
.v-talk-veil.spotting { background: none; }
.v-spot { position: absolute; z-index: 6; border: 3px solid var(--lime); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(5, 6, 4, 0.58), 0 0 24px rgba(231, 255, 38, 0.55); pointer-events: none; transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
.v-talk { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: min(780px, calc(100% - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: end; cursor: pointer; animation: talk-in 0.18s ease-out; }
.v-talk.top { top: 84px; bottom: auto; }
.v-talk.narration { grid-template-columns: minmax(0, 1fr); }
.v-talk.narration .v-talk-face { display: none; }
.v-talk-face { width: 136px; height: 136px; border-radius: 18px; overflow: hidden; border: 4px solid #3a2e1e; background: #f6ecd2; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.v-talk-face.pop { animation: talk-pop 0.28s ease-out; }
.v-talk-card { position: relative; background: #fbf3df; color: #2a2418; border: 4px solid #3a2e1e; border-radius: 18px; padding: 18px 20px 26px; min-height: 120px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.v-talk-name { position: absolute; top: -17px; left: 16px; background: var(--lime); color: #11140f; font-family: var(--f-display); font-weight: 800; font-size: 15px; padding: 3px 14px; border-radius: 999px; border: 3px solid #3a2e1e; }
.v-talk-title { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a6a3a; margin: 0 0 4px; }
.v-talk-text { font-size: 18px; line-height: 1.5; margin: 0; min-height: 3em; overflow-wrap: anywhere; }
.v-talk-text.narration { font-style: italic; color: #5a4c38; }
.v-talk-next { position: absolute; right: 16px; bottom: 6px; font-size: 14px; color: #3a2e1e; animation: talk-bob 1.1s ease-in-out infinite; }
.v-talk-hint { position: absolute; left: 20px; bottom: 6px; font-size: 12px; color: #9a8a6a; }
.v-talk-choices { display: grid; gap: 8px; margin-top: 12px; }
.v-talk-choice { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; font-weight: 700; font-size: 16px; padding: 10px 14px; border-radius: 12px; border: 2px solid #3a2e1e; background: #fff8e8; color: #2a2418; cursor: pointer; }
.v-talk-choice:hover, .v-talk-choice:focus-visible { background: var(--lime); }
.v-talk-choice b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #3a2e1e; color: #fbf3df; font-size: 13px; flex: none; }
@keyframes talk-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes talk-bob { 50% { transform: translateY(3px); } }
@keyframes talk-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (max-width: 600px) {
  .v-talk { grid-template-columns: minmax(0, 1fr); gap: 0; width: calc(100% - 16px); }
  .v-talk-face { width: 76px; height: 76px; border-radius: 14px; border-width: 3px; margin: 0 0 -14px 10px; position: relative; z-index: 1; }
  .v-talk-card { padding: 22px 16px 26px; min-height: 100px; }
  .v-talk-name { left: 96px; top: -14px; }
  .v-talk.narration .v-talk-name { left: 16px; }
  .v-talk-text { font-size: 16px; }
  .v-talk.top { top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .v-talk, .v-talk-face.pop, .v-talk-next { animation: none; } }

/* Guide: what each tab is for, how they connect, what the numbers mean, the tour */
.help-btn { font-weight: 800; font-family: var(--f-display); color: var(--lime); }
.modal.wide { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.guide-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: -6px 0 22px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lime); }
.guide-strip p:not(.meta) { font-size: 14px; line-height: 1.5; margin: 0; }
.guide-strip .meta { margin: 0 0 4px; color: var(--lime); }
.how-card { margin-bottom: 16px; display: grid; gap: 14px; }
.how-card h2 { font-size: 20px; }
.how { display: grid; gap: 20px; }
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: loop; }
.loop-step { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.loop-step:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 22px; color: var(--lime); font-weight: 800; z-index: 1; }
.loop-step h3 { font-size: 17px; margin: 0; }
.loop-step p { margin: 0; color: var(--muted); }
.loop-n { position: absolute; top: 12px; right: 14px; color: var(--muted); font-size: 12px; }
.loop-icon { font-size: 24px; }
.btn.small { font-size: 13px; padding: 6px 10px; border-radius: 10px; }
.how-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.how-cols h3 { font-size: 16px; margin: 0 0 10px; }
.numbers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; }
.numbers dt { font-family: var(--f-mono); font-weight: 600; color: var(--lime); margin-top: 8px; }
.numbers dt:first-child { margin-top: 0; }
.numbers dd { margin: 0; font-size: 14px; color: var(--muted); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ladder li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.ladder li .mono { grid-column: 2; color: var(--muted); }
.ladder li .pill { grid-column: 1; grid-row: 2; justify-self: start; font-size: 10px; padding: 2px 6px; }
.ladder li.done b { color: var(--good, #8fd16a); }
.ladder li.here { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent); }
.tour { position: fixed; inset: 0; z-index: 200; }
.tour-spot { position: fixed; border-radius: 14px; border: 3px solid var(--lime); box-shadow: 0 0 0 9999px rgba(5, 6, 4, 0.66), 0 0 24px rgba(231, 255, 38, 0.5); pointer-events: none; transition: all 0.25s ease; }
.tour-spot.none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; border: 0; }
.tour-tip { position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 2px solid var(--lime); border-radius: 16px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: left 0.25s ease, top 0.25s ease; }
.tour-top { display: flex; gap: 12px; align-items: center; }
.tour-face { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; border: 2px solid rgba(0, 0, 0, 0.3); background: #f6ecd2; }
.tour-face svg { width: 100%; height: 100%; display: block; }
.tour-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.tour-tip h3 { font-size: 18px; margin: 0; }
.tour-tip p { margin: 0; line-height: 1.5; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-actions:empty { display: none; }
.tour-row { display: flex; align-items: center; gap: 8px; }
.tour-row .grow { flex: 1; }
@media (max-width: 900px) {
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop-step:nth-child(2)::after { display: none; }
  .how-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-step::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-tip { transition: none; } }

/* Sunny Acres: placing buildings on your land */
.v-buildbar { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 58px); width: min(640px, calc(100% - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(14, 17, 13, 0.92); border: 2px solid var(--lime); color: var(--text); font-weight: 700; }
.v-buildbar > span:first-child { flex: 1 1 100%; }
.v-buildbar .small { flex: 1; font-weight: 600; }
.v-buildbar .small.ok { color: var(--good); }
.v-buildbar .small.bad { color: var(--bad); }
.v-buildbar .btn { padding: 7px 12px; font-size: 14px; }
.v-bar button.v-bar-build { color: var(--lime); }
.v-item.hi { border-color: var(--lime); }

/* Your look: the wardrobe and the three-step start, beside a close-up of your character */
.v-overlay.side { place-items: center start; background: linear-gradient(to right, rgba(5, 6, 4, 0.7), rgba(5, 6, 4, 0.15) 55%, rgba(5, 6, 4, 0)); }
.v-overlay.side .v-panel { width: min(470px, 100%); max-height: calc(100% - 8px); }
.v-wardrobe { display: grid; gap: 8px; }
.v-wardrobe-top { display: flex; gap: 12px; align-items: center; }
.v-wardrobe-face { width: 96px; height: 96px; border-radius: 18px; overflow: hidden; border: 3px solid #3a2e1e; background: #f6ecd2; flex: none; }
.v-wardrobe-face svg { width: 100%; height: 100%; display: block; }
.v-wardrobe .v-label { margin: 6px 0 0; }
.v-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.v-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.v-swatch.on { outline: 3px solid var(--lime); outline-offset: 2px; }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.v-chip.on { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.v-chip.locked { opacity: 0.55; cursor: help; }
.v-sticky { position: sticky; bottom: -20px; padding: 10px 0 2px; background: linear-gradient(to top, var(--surface) 70%, transparent); }
.v-lives { grid-template-columns: minmax(0, 1fr); }
.v-life { text-align: left; }
.v-life-icon { font-size: 26px; }
@media (max-width: 760px) {
  .v-overlay.side { place-items: end center; padding: 8px; background: linear-gradient(to top, rgba(5, 6, 4, 0.7), rgba(5, 6, 4, 0) 70%); }
  .v-overlay.side .v-panel { width: 100%; max-height: 58%; }
  .v-wardrobe-face { width: 72px; height: 72px; }
}
.v-overlay.side .v-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-overlay.side .v-paths.v-lives { grid-template-columns: minmax(0, 1fr); }

/* Fishing: the bobber, then the reel (keep the fish inside your bar) */
.fish-water { position: relative; height: 120px; border-radius: 12px; background: linear-gradient(180deg, #1f4f6e, #123247); overflow: hidden; margin-top: 10px; }
.fish-water::before { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 18px, transparent 18px 36px); }
.fish-bob { position: absolute; left: 50%; top: 46px; width: 18px; height: 26px; margin-left: -9px; border-radius: 50% 50% 40% 40%; background: linear-gradient(180deg, #ff5a4a 50%, #f6ecd2 50%); animation: fishbob 1.6s ease-in-out infinite; }
@keyframes fishbob { 50% { transform: translateY(-4px); } }
.fish-bob.dip { animation: dip 0.25s ease-in-out infinite alternate; }
@keyframes dip { from { transform: translateY(6px); } to { transform: translateY(16px); } }
.fish-msg { margin-top: 10px; font-family: var(--f-mono); font-size: 14px; color: var(--lime); }
.fish-game { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }
.fish-track { position: relative; width: 70px; height: 240px; border-radius: 10px; background: #123247; border: 1px solid var(--line-2); overflow: hidden; }
.fish-bar { position: absolute; left: 6px; right: 6px; border-radius: 8px; background: rgba(231, 255, 38, 0.25); border: 2px solid var(--lime-deep); }
.fish-bar.on { background: rgba(231, 255, 38, 0.45); border-color: var(--lime); }
.fish-fish { position: absolute; left: 0; right: 0; text-align: center; font-size: 22px; line-height: 24px; }
.fish-meter { position: relative; width: 14px; height: 240px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.fish-meter span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--good); }
.fish-btn { width: 100%; margin-top: 12px; touch-action: none; user-select: none; }

/* Color Rush at the Juicy Arcade */
.rush-target { height: 110px; border-radius: 14px; margin-top: 12px; border: 3px solid var(--text); }
.rush-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rush-swatch { height: 80px; border-radius: 12px; border: 2px solid var(--line-2); cursor: pointer; }
.rush-swatch:hover, .rush-swatch:focus-visible { border-color: var(--lime); }

/* Fun festival banner, standings, trade-ins and the members' market */
.v-funbar { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(14, 17, 13, 0.88); border: 1px solid var(--lime-deep); color: var(--lime); font-family: var(--f-mono); font-size: 13px; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.v-standings li { padding: 3px 0; }
.v-standings li.me { color: var(--lime); font-weight: 600; }
.v-px { display: grid; gap: 6px; margin: 6px 0; }
.v-rules { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.v-trade-form { display: grid; gap: 6px; margin-top: 8px; }
.v-trade-form select, .v-trade-form input { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); min-width: 0; }
.v-trade-form .row { margin-top: 0; }
.v-trade-form select { flex: 1; }
.v-trade-form input { width: 72px; }

/* One level per session: the bar on the Path, the Daily and the Arcade, and one Play button per lesson */
.level-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 14px 0; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); }
.level-text { min-width: 0; flex: 1 1 240px; display: grid; gap: 2px; }
.level-note { margin-top: 12px; }
.lesson-go { display: grid; gap: 6px; justify-items: end; }
.lv-row { display: flex; gap: 10px; color: var(--faint); }
.lv-stars.now { color: var(--lime); }
.diff-cards.one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@media (max-width: 640px) { .lesson-go { justify-items: start; } }