/* KiWEDOGO v2 — phone-first game stage; desktop shows the same stage scaled up. */
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url("./fonts/silkscreen-400.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url("./fonts/silkscreen-700.woff2") format("woff2"); }
/* Silkscreen draws lowercase as capitals; brand-name elements put this one-glyph font first to keep the small i in KiWEDOGO (v2/src/brand_i.py). */
@font-face { font-family: "KiWEDOGO Brand i"; font-weight: 400 700; font-display: swap; src: url("./fonts/kiwedogo-brand-i.woff") format("woff"); unicode-range: U+0069; }
:root {
  --ink: #24303d;
  --ink-soft: #4a5663;
  --paper: #fbfaf5;
  --cream: #f4ecd8;
  --kiwi: #7ed957;
  --kiwi-deep: #1f6f43;
  --citrus: #f7c64a;
  --red: #d64b35;
  --red-deep: #a8352a;
  --sky: #2f7fe0;
  --sky-pale: #d9eefe;
  --px: 2px;
  --pixel: "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, var(--sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  display: flex; justify-content: center;
  background: linear-gradient(180deg, #5fa7ee 0%, #a9d4fa 55%, #e4f2fe 100%);
  color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- stage ---------- */
.stage {
  /* phone-width unit: equals 1cqw on phones, capped by height on wide screens so the UI never balloons */
  --u: clamp(2.9px, min(1cqw, 0.55cqh), 6.2px);
  position: relative; flex: none;
  width: 100vw; height: 100dvh;
  overflow: hidden; overflow: clip; container-type: size;
  background: var(--sky);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.world { position: absolute; left: 0; top: 0; image-rendering: crisp-edges; image-rendering: pixelated; }

/* pixel border recipe */
.px-border, .hud-logo, .hud-stamps, .hud-map, .btn, .bubble, .sheet, .toast, .hint, .nav,
.quest textarea, .quest input:not([type="radio"]), .chip, .letter, .slot, .links a {
  --bw: calc(var(--px) * 2);
  --bc: var(--ink);
  box-shadow:
    0 calc(var(--bw) * -1) 0 0 var(--bc), 0 var(--bw) 0 0 var(--bc),
    calc(var(--bw) * -1) 0 0 0 var(--bc), var(--bw) 0 0 0 var(--bc);
  border: 0; border-radius: 0;
}

/* ---------- sky titles ---------- */
.titles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; overflow: clip; }
.title {
  position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(env(safe-area-inset-top) + 13cqh);
  color: #fff; will-change: transform, opacity; opacity: 0;
}
.title b {
  display: block; white-space: nowrap;
  font: 900 min(var(--fs, calc(13.5 * var(--u))), 7.2cqh)/0.92 var(--display); letter-spacing: -0.045em;
  text-shadow: 0 calc(var(--px) * 1.5) 0 rgba(20, 70, 150, 0.55), 0 0 calc(6 * var(--u)) rgba(30, 100, 200, 0.35);
}
.title span {
  display: block; margin-top: calc(1.8 * var(--u));
  font: 700 calc(3.5 * var(--u))/1.3 var(--display); letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(20, 70, 150, 0.6), 0 0 calc(3 * var(--u)) rgba(30, 100, 200, 0.5);
}

/* ---------- HUD ---------- */
.hud {
  position: absolute; z-index: 5;
  top: calc(env(safe-area-inset-top) + calc(3 * var(--u))); left: calc(3.5 * var(--u)); right: calc(3.5 * var(--u));
  display: flex; align-items: center; gap: calc(2.4 * var(--u));
}
.hud-logo {
  position: relative; background: var(--ink); color: #fff;
  font: 700 calc(3.3 * var(--u))/1 var(--pixel); letter-spacing: 0.04em;
  padding: calc(1.5 * var(--u)) calc(2.2 * var(--u));
}
.proto {
  position: absolute; right: calc(-2 * var(--u)); top: calc(-2.6 * var(--u));
  background: var(--red); color: #fff; font: 700 calc(2.1 * var(--u))/1 var(--pixel); font-style: normal;
  padding: calc(0.6 * var(--u)) calc(1 * var(--u)); transform: rotate(6deg);
}
.hud { flex-wrap: wrap; row-gap: calc(2.2 * var(--u)); }
.hud-logo { text-decoration: none; }
.hud-map {
  cursor: pointer; background: var(--citrus); color: var(--ink);
  font: 800 calc(3.4 * var(--u))/1 var(--display); padding: calc(1.4 * var(--u)) calc(2.2 * var(--u)); display: inline-flex; align-items: baseline; gap: calc(0.4 * var(--u));
}
.hud-map::before { content: "MAP"; font: 700 calc(2.5 * var(--u))/1 var(--pixel); margin-right: calc(1.2 * var(--u)); letter-spacing: 0.04em; }
.hud-map i, .hud-stamps i { font-style: normal; opacity: 0.55; font-size: 0.85em; }
.hud-dots { flex-basis: 100%; display: flex; gap: calc(1.4 * var(--u)); margin: 0; padding: 0; list-style: none; }
.hud-dots li { flex: 1; height: calc(1.3 * var(--u)); background: rgba(255, 255, 255, 0.45); }
.hud-dots li.seen { background: rgba(126, 217, 87, 0.95); }
.hud-dots li.on { background: var(--citrus); box-shadow: 0 0 0 calc(var(--px) * 0.75) var(--ink); }
.hud-stamps {
  margin-left: auto; display: inline-flex; align-items: center; gap: calc(1.2 * var(--u));
  background: #fff; color: var(--ink); cursor: pointer;
  font: 800 calc(3.4 * var(--u))/1 var(--display); padding: calc(1.4 * var(--u)) calc(2 * var(--u));
}
.star { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); background: var(--red);
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 81% 100%, 50% 77%, 19% 100%, 29% 60%, 0 38%, 37% 35%); }

/* ---------- hint & arrows ---------- */
.hint {
  position: absolute; z-index: 1; left: 50%; top: calc(-4.6 * var(--u)); transform: translateX(-50%);
  background: var(--ink); color: #fff; white-space: nowrap;
  font: 700 calc(3 * var(--u))/1 var(--sans); padding: calc(1.5 * var(--u)) calc(2.4 * var(--u));
  transition: opacity 0.4s;
}
.hint span { color: var(--citrus); display: inline-block; animation: nudge 1.2s ease-in-out infinite; }
.hint span:last-child { animation-direction: reverse; }
.hint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 50% { transform: translateX(calc(-1.2 * var(--u))); } }

.nav {
  position: absolute; z-index: 4; top: 48cqh; width: calc(9 * var(--u)); height: calc(9 * var(--u));
  background: rgba(255, 255, 255, 0.92); cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.nav.prev { left: calc(3.5 * var(--u)); }
.nav.next { right: calc(3.5 * var(--u)); }
.nav span { width: 0; height: 0; border-style: solid; }
.nav.prev span { border-width: calc(1.8 * var(--u)) calc(2.4 * var(--u)) calc(1.8 * var(--u)) 0; border-color: transparent var(--ink) transparent transparent; }
.nav.next span { border-width: calc(1.8 * var(--u)) 0 calc(1.8 * var(--u)) calc(2.4 * var(--u)); border-color: transparent transparent transparent var(--ink); }
.nav:disabled { opacity: 0; pointer-events: none; }
.nav:active, .btn:active, .hud-map:active { transform: translateY(var(--px)); }

/* ---------- speech bubble above the guide dog + slim action bar ---------- */
.bubble {
  position: absolute; z-index: 5; left: 0; right: 0; margin-inline: auto;
  bottom: calc(100% - var(--dog-top, 78%) + calc(4 * var(--u)));
  width: min(calc(100% - calc(8 * var(--u))), calc(88 * var(--u)));
  background: var(--paper); padding: calc(5.4 * var(--u)) calc(4.2 * var(--u)) calc(3.4 * var(--u)); cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.bubble::before, .bubble::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; border-style: solid; transform: translateX(-50%); }
.bubble::before { bottom: calc(-3.2 * var(--u) - var(--px) * 2); border-width: calc(3.2 * var(--u)) calc(2.6 * var(--u)) 0; border-color: var(--ink) transparent transparent; }
.bubble::after { bottom: calc(-3.2 * var(--u) + var(--px) * 0.5); border-width: calc(3 * var(--u)) calc(2.2 * var(--u)) 0; border-color: var(--paper) transparent transparent; }
.bubble.moving { opacity: 0; transform: translateY(calc(2 * var(--u))); pointer-events: none; }
.bubble h2 { margin: 0 0 calc(1.2 * var(--u)); font-size: calc(4.6 * var(--u)); line-height: 1.25; font-weight: 800; letter-spacing: 0.01em; }
.bubble.mini { width: max-content; max-width: calc(100% - calc(8 * var(--u))); padding: calc(2.4 * var(--u)) calc(3.4 * var(--u)) calc(2.2 * var(--u)); }
.bubble.mini .who, .bubble.mini .say { display: none; }
.bubble.mini h2 { margin: 0; font-size: calc(3.8 * var(--u)); }
.bubble.mini h2::after { content: " …"; color: var(--kiwi-deep); }
.dialog {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  padding: calc(3.2 * var(--u)) calc(4 * var(--u)) calc(env(safe-area-inset-bottom) + calc(3.6 * var(--u)));
  background: linear-gradient(180deg, rgba(20, 26, 34, 0), rgba(20, 26, 34, 0.55) 45%);
  transition: opacity 0.25s;
}
.dialog.moving { opacity: 0.6; }
.who {
  position: absolute; left: calc(3 * var(--u)); top: calc(-3.4 * var(--u)); margin: 0;
  display: inline-flex; align-items: center; gap: calc(1.4 * var(--u));
  background: var(--kiwi-deep); color: #fff; font: 700 calc(3 * var(--u))/1 var(--sans);
  padding: calc(1.5 * var(--u)) calc(2.4 * var(--u)) calc(1.5 * var(--u)) calc(1.6 * var(--u));
}
.face { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); background: linear-gradient(90deg, #25282f 0 40%, #f4f2ec 40% 60%, #25282f 60%); box-shadow: inset 0 calc(var(--px) * -1) 0 #f4f2ec; position: relative; }
.face::after { content: ""; position: absolute; right: 12%; top: 30%; width: 16%; height: 16%; background: #f7c64a; }
.say { margin: 0; font-size: calc(3.6 * var(--u)); line-height: 1.55; color: var(--ink-soft); }
.say.typing::after { content: "▌"; color: var(--kiwi-deep); animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3 * var(--u)); margin: 0; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; cursor: pointer; position: relative;
  background: #fff; color: var(--ink);
  font: 800 calc(3.8 * var(--u))/1.15 var(--sans); letter-spacing: 0.02em;
  padding: calc(2.6 * var(--u)) calc(3.8 * var(--u)); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(1.4 * var(--u));
}
.btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--px); background: rgba(0, 0, 0, 0.16); }
.btn.primary { background: var(--kiwi); }
.btn.hot { background: var(--citrus); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible, .hud-map:focus-visible, .stops a:focus-visible, summary:focus-visible, .nav:focus-visible, .chip:focus-within, .slot:focus-visible, .links a:focus-visible, .hud-stamps:focus-visible, .close:focus-visible {
  outline: calc(var(--px) * 1.5) solid var(--citrus); outline-offset: calc(var(--px) * 3);
}

/* ---------- sheet ---------- */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: rgba(20, 32, 46, 0.42); opacity: 0; transition: opacity 0.25s;
}
.stage.sheet-open::after { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; z-index: 10;
  left: 0; right: 0; margin-inline: auto; width: min(calc(100% - calc(7 * var(--u))), calc(130 * var(--u)));
  top: calc(env(safe-area-inset-top) + calc(18 * var(--u))); bottom: calc(env(safe-area-inset-bottom) + calc(3.5 * var(--u)));
  background: var(--paper); display: flex; flex-direction: column;
  animation: rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.sheet[hidden] { display: none; }
@keyframes rise { from { transform: translateY(12cqh); opacity: 0; } }
.sheet-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--u));
  padding: calc(3 * var(--u)) calc(3.4 * var(--u)) calc(3 * var(--u)) calc(4.4 * var(--u)); background: var(--kiwi-deep); color: #fff;
}
.sheet[data-tone="red"] .sheet-bar { background: var(--red); }
.sheet[data-tone="blue"] .sheet-bar { background: var(--sky); }
.sheet[data-tone="citrus"] .sheet-bar { background: var(--citrus); color: var(--ink); }
.sheet[data-tone="teal"] .sheet-bar { background: #2f6f73; }
.sheet[data-tone="brick"] .sheet-bar { background: #a65d40; }
.sheet[data-tone="purple"] .sheet-bar { background: #3b2a5c; }
.sheet[data-tone="wood"] .sheet-bar { background: #7a5230; }
.sheet-bar h2 { margin: 0; font: 700 calc(3.7 * var(--u))/1.2 var(--pixel); letter-spacing: 0.03em; }
.close {
  appearance: none; border: 0; cursor: pointer; width: calc(8 * var(--u)); height: calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.95); color: var(--ink); font: 800 calc(4 * var(--u))/1 var(--sans);
}
.sheet-body {
  position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(5 * var(--u)) calc(4.6 * var(--u)) calc(6 * var(--u)); touch-action: pan-y; user-select: text; -webkit-user-select: text;
}

/* ---------- panel content ---------- */
.panel { font-size: calc(3.9 * var(--u)); line-height: 1.65; }
.panel p { margin: 0 0 calc(3.4 * var(--u)); }
.kicker { display: block; font: 700 calc(2.9 * var(--u))/1.2 var(--pixel); color: var(--kiwi-deep); letter-spacing: 0.06em; margin: 0 0 calc(2.4 * var(--u)); }
.panel h3 { margin: 0 0 calc(3 * var(--u)); font-size: calc(6 * var(--u)); line-height: 1.3; font-weight: 900; }

.loop { list-style: none; margin: calc(5 * var(--u)) 0; padding: 0; display: grid; gap: calc(3 * var(--u)); counter-reset: s; }
.loop li { counter-increment: s; display: grid; grid-template-columns: calc(9 * var(--u)) 1fr; column-gap: calc(3 * var(--u)); align-items: center; }
.loop li::before {
  content: counter(s); grid-row: span 2; width: calc(9 * var(--u)); height: calc(9 * var(--u)); display: grid; place-items: center;
  background: var(--citrus); font: 700 calc(4.4 * var(--u))/1 var(--pixel);
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink);
}
.loop b { font-size: calc(4.2 * var(--u)); }
.loop span { color: var(--ink-soft); font-size: calc(3.6 * var(--u)); line-height: 1.45; }
.rows { border-top: var(--px) dashed #cfc5ad; padding-top: calc(4 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.rows p { color: var(--ink-soft); font-size: calc(3.6 * var(--u)); }
.rows b { display: block; color: var(--ink); font-size: calc(4 * var(--u)); }

/* quest form */
.quest fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quest legend { padding: 0; margin-bottom: calc(3.6 * var(--u)); font-size: calc(5.4 * var(--u)); font-weight: 900; line-height: 1.3; }
.quest-steps { display: flex; gap: calc(2 * var(--u)); margin-bottom: calc(4.4 * var(--u)); }
.quest-steps i { flex: 1; height: calc(2 * var(--u)); background: #e3dccb; }
.quest-steps i.on { background: var(--red); }
.quest textarea, .quest input:not([type="radio"]) {
  width: 100%; display: block; background: #fff; color: var(--ink);
  font: 500 calc(4.1 * var(--u))/1.55 var(--sans); padding: calc(3 * var(--u)) calc(3.2 * var(--u)); resize: none;
}
.quest textarea:focus, .quest input:focus { outline: none; --bc: var(--red); }
.field { display: block; font-weight: 800; font-size: calc(3.7 * var(--u)); margin-bottom: calc(4.6 * var(--u)); }
.field input { margin-top: calc(2.2 * var(--u)); }
.chips-label { margin: calc(4 * var(--u)) 0 calc(2.4 * var(--u)) !important; color: var(--ink-soft); font-size: calc(3.5 * var(--u)); }
.chips { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); }
.chip {
  appearance: none; cursor: pointer; background: #fff; color: var(--ink);
  font: 700 calc(3.5 * var(--u))/1 var(--sans); padding: calc(2.2 * var(--u)) calc(3 * var(--u)); display: inline-flex; align-items: center;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--citrus); }
.field-error { color: var(--red-deep); font-weight: 700; font-size: calc(3.5 * var(--u)); min-height: 1em; margin: calc(3 * var(--u)) 0 0 !important; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quest-nav { display: flex; justify-content: space-between; gap: calc(3 * var(--u)); margin-top: calc(6 * var(--u)); }
.quest-nav [data-act="back"][hidden] + [data-act="next"] { margin-left: auto; }

.letter {
  --bc: var(--ink);
  position: relative; padding: calc(5 * var(--u)) calc(4.4 * var(--u)) calc(4.4 * var(--u)); background:
    repeating-linear-gradient(135deg, var(--red) 0 calc(3 * var(--u)), #fff calc(3 * var(--u)) calc(6 * var(--u)), var(--sky) calc(6 * var(--u)) calc(9 * var(--u)), #fff calc(9 * var(--u)) calc(12 * var(--u))) border-box;
  font-size: calc(3.7 * var(--u));
}
.letter::before { content: ""; position: absolute; inset: calc(1.8 * var(--u)); background: var(--paper); }
.letter > * { position: relative; }
.letter .to { font: 700 calc(2.8 * var(--u))/1.3 var(--pixel); color: var(--red-deep); margin: 0 0 calc(1 * var(--u)); }
/* pixel text that shows the brand name: keep the small i of KiWEDOGO */
.hud-logo, .letter .to, .stops i { font-family: "KiWEDOGO Brand i", var(--pixel); }
.letter .from { color: var(--ink-soft); font-size: calc(3.3 * var(--u)); margin: 0 0 calc(3 * var(--u)); word-break: break-all; }
.letter .body { white-space: pre-wrap; word-break: break-word; margin: 0 0 calc(2.4 * var(--u)); font-weight: 700; }
.letter .scene { white-space: pre-wrap; word-break: break-word; color: var(--ink-soft); margin: 0 0 calc(2.4 * var(--u)); font-size: calc(3.5 * var(--u)); }
.letter .postmark {
  position: absolute; right: calc(3.4 * var(--u)); top: calc(3.4 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%;
  border: calc(0.6 * var(--u)) solid rgba(214, 75, 53, 0.75); color: rgba(214, 75, 53, 0.85);
  display: grid; place-items: center; text-align: center; font: 700 calc(2.2 * var(--u))/1.1 var(--pixel); transform: rotate(-12deg);
}
.status { min-height: 1.2em; font-weight: 700; font-size: calc(3.5 * var(--u)); margin-top: calc(3.4 * var(--u)) !important; }
.status[data-kind="error"] { color: var(--red-deep); }
.status[data-kind="info"] { color: var(--kiwi-deep); }

.step-done { text-align: center; padding-top: calc(2 * var(--u)); }
.step-done h3 { font-size: calc(5.6 * var(--u)); }
.step-done .row { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); justify-content: center; margin-top: calc(5 * var(--u)); }
.stamp-big {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(2 * var(--u)) auto calc(6 * var(--u)); border-radius: 50%;
  border: calc(1.2 * var(--u)) solid var(--red); color: var(--red); display: grid; place-items: center;
  font: 700 calc(4.4 * var(--u))/1.2 var(--pixel); transform: rotate(-10deg);
  animation: stampIn 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes stampIn { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } }

/* mart */
.machine {
  background: #20303d; padding: calc(3.6 * var(--u)); margin: calc(4 * var(--u)) 0; display: grid; gap: calc(3.4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink), inset 0 calc(4 * var(--u)) 0 var(--sky);
  padding-top: calc(7.6 * var(--u));
}
.slot {
  --bc: #0f1820;
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: calc(13 * var(--u)) 1fr auto; grid-template-rows: auto auto auto; column-gap: calc(3 * var(--u)); align-items: center;
  background: #f2f2ee; color: var(--ink); text-decoration: none; padding: calc(3 * var(--u)); font-family: var(--sans);
}
.slot .icon, .slot .q { grid-row: 1 / span 3; width: calc(13 * var(--u)); height: calc(13 * var(--u)); image-rendering: pixelated; background: #fff; }
.slot .q { display: grid; place-items: center; font: 700 calc(7 * var(--u))/1 var(--pixel); color: #9aa3ad; background: #e7e7e1; }
.slot b { font-size: calc(4.2 * var(--u)); line-height: 1.25; }
.slot .tag { font-size: calc(3.2 * var(--u)); color: var(--ink-soft); line-height: 1.35; }
.slot .meta { font: 700 calc(3 * var(--u))/1.4 var(--sans); color: var(--kiwi-deep); }
.slot .buy { grid-column: 3; grid-row: 1 / span 3; background: var(--citrus); font-weight: 900; font-size: calc(3.3 * var(--u)); padding: calc(2 * var(--u)) calc(2.4 * var(--u)); white-space: nowrap; }
.slot.empty { background: #dfe3e6; }
.slot.empty .buy { background: var(--kiwi); }
.fine { color: var(--ink-soft); font-size: calc(3.2 * var(--u)); }

/* soon */
.links { list-style: none; padding: 0; margin: calc(4 * var(--u)) 0 0; display: grid; gap: calc(3.6 * var(--u)); }
.links a {
  display: flex; justify-content: space-between; align-items: center; gap: calc(3 * var(--u));
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 800; padding: calc(3.2 * var(--u)) calc(3.6 * var(--u));
}
.links a span { font: 700 calc(2.7 * var(--u))/1 var(--pixel); color: var(--kiwi-deep); }

/* stamps */
.stamp-grid { list-style: none; padding: 0; margin: calc(4 * var(--u)) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(5 * var(--u)); }
.stamp-grid li { text-align: center; font-weight: 800; font-size: calc(3.5 * var(--u)); }
.stamp-grid .mark {
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: 0 auto calc(2 * var(--u)); border-radius: 50%;
  border: calc(0.8 * var(--u)) dashed #c8c0ab; display: grid; place-items: center; color: #b8af99; font: 700 calc(3 * var(--u))/1.2 var(--pixel);
}
.stamp-grid .got .mark { border: calc(1 * var(--u)) solid var(--red); color: var(--red); transform: rotate(-8deg); background: rgba(214, 75, 53, 0.06); }

/* ---------- toast ---------- */
.toast {
  position: absolute; z-index: 12; left: 50%; top: calc(env(safe-area-inset-top) + calc(15 * var(--u)));
  transform: translate(-50%, calc(-3 * var(--u))); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--citrus); font: 800 calc(3.5 * var(--u))/1 var(--sans); padding: calc(2.4 * var(--u)) calc(3.6 * var(--u));
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* the street is full screen everywhere; keyboard help lives in the page markup for screen readers only */
.desk-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- v2 panels ---------- */
.btn.small { font-size: calc(3.4 * var(--u)); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.tags { display: flex; flex-wrap: wrap; gap: calc(1.6 * var(--u)); margin: 0 0 calc(3 * var(--u)) !important; }
.tags span { background: #ebe5d6; color: var(--ink-soft); font: 700 calc(2.9 * var(--u))/1 var(--sans); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); }
.cta-box { margin: calc(6 * var(--u)) 0 calc(1 * var(--u)); padding: calc(4.4 * var(--u)); background: #fff; display: grid; gap: calc(2.4 * var(--u)); justify-items: start;
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink); }
.cta-box b { font-size: calc(4.4 * var(--u)); }
.cta-box span { color: var(--ink-soft); font-size: calc(3.6 * var(--u)); line-height: 1.55; }

.stops { list-style: none; margin: calc(3 * var(--u)) 0 calc(5 * var(--u)); padding: 0; display: grid; gap: calc(2.4 * var(--u)); }
.stops a { display: grid; grid-template-columns: calc(9 * var(--u)) 1fr auto; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(3 * var(--u)); background: #fff; color: var(--ink); text-decoration: none; font-weight: 800; font-size: calc(3.8 * var(--u));
  box-shadow: 0 calc(var(--px) * -1.5) 0 var(--ink), 0 calc(var(--px) * 1.5) 0 var(--ink), calc(var(--px) * -1.5) 0 0 var(--ink), calc(var(--px) * 1.5) 0 0 var(--ink); }
.stops b { font: 700 calc(3.2 * var(--u))/1 var(--pixel); color: var(--kiwi-deep); }
.stops i { font: 700 calc(2.4 * var(--u))/1 var(--pixel); font-style: normal; color: var(--ink-soft); }

/* gallery */
.filters { position: sticky; top: calc(-5 * var(--u)); z-index: 2; background: var(--paper); margin: 0 calc(-4.6 * var(--u)) calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(4.6 * var(--u)) calc(2.4 * var(--u)); border-bottom: var(--px) solid #e3dccb; }
.search input { width: 100%; background: #fff; color: var(--ink); font: 500 calc(3.9 * var(--u))/1.4 var(--sans); padding: calc(2.6 * var(--u)) calc(3 * var(--u)); border: 0;
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink); }
.search input:focus { outline: none; box-shadow: 0 calc(var(--px) * -2) 0 #2f6f73, 0 calc(var(--px) * 2) 0 #2f6f73, calc(var(--px) * -2) 0 0 #2f6f73, calc(var(--px) * 2) 0 0 #2f6f73; }
.filters .chips { margin-top: calc(3.4 * var(--u)); gap: calc(2.4 * var(--u)); flex-wrap: nowrap; overflow-x: auto; padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(2 * var(--u)); scrollbar-width: none; }
.filters .chips::-webkit-scrollbar { display: none; }
.filters .chip { white-space: nowrap; font-size: calc(3.2 * var(--u)); }
.filters .chip i { font-style: normal; opacity: 0.6; margin-left: calc(1 * var(--u)); }
.chip.on { background: #2f6f73; color: #fff; }
.count { margin: calc(1.4 * var(--u)) 0 0 !important; font-size: calc(3.2 * var(--u)); color: var(--ink-soft); }
.idea-list { display: grid; gap: calc(5 * var(--u)); }
.idea-card { background: #fff; scroll-margin-top: calc(30 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink); }
.idea-card.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 calc(var(--px) * 3) var(--citrus); } }
.idea-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #e3dccb; image-rendering: auto; }
.idea-body { padding: calc(3.6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); }
.idea-cat { font: 700 calc(2.8 * var(--u))/1.2 var(--sans); color: #2f6f73; margin: 0 0 calc(1.4 * var(--u)) !important; }
.idea-card h3 { font-size: calc(4.6 * var(--u)); margin: 0 0 calc(1.2 * var(--u)); }
.hook { color: var(--ink-soft); margin: 0 0 calc(2.4 * var(--u)) !important; }
details summary { cursor: pointer; font-weight: 800; color: #2f6f73; list-style: none; font-size: calc(3.6 * var(--u)); }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "＋ "; }
details[open] summary::before { content: "－ "; }
dl { margin: calc(3 * var(--u)) 0; }
dt { font-weight: 800; font-size: calc(3.4 * var(--u)); margin-top: calc(2.4 * var(--u)); }
dd { margin: calc(0.6 * var(--u)) 0 0; color: var(--ink-soft); font-size: calc(3.6 * var(--u)); line-height: 1.6; }
.empty { text-align: center; color: var(--ink-soft); }

/* services */
.svc-list { display: grid; gap: calc(5 * var(--u)); margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
.svc { background: #fff; padding: calc(4.4 * var(--u)); scroll-margin-top: calc(4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink), inset 0 calc(1.4 * var(--u)) 0 #a65d40; }
.svc-no { font: 700 calc(2.7 * var(--u))/1.2 var(--pixel); color: #a65d40; margin: calc(1.4 * var(--u)) 0 calc(1.6 * var(--u)) !important; }
.svc h3 { font-size: calc(4.8 * var(--u)); margin: 0 0 calc(2 * var(--u)); }
.svc p { color: var(--ink-soft); font-size: calc(3.6 * var(--u)); }
.svc ul, .cabinet ul { margin: 0 0 calc(3 * var(--u)); padding-left: calc(5 * var(--u)); font-size: calc(3.6 * var(--u)); }
.svc li, .cabinet li { margin-bottom: calc(1 * var(--u)); }
.bounds { list-style: none; padding: 0; margin: calc(3 * var(--u)) 0; display: grid; gap: calc(3.4 * var(--u)); }
.bounds b { display: block; font-size: calc(3.9 * var(--u)); }
.bounds span { color: var(--ink-soft); font-size: calc(3.5 * var(--u)); line-height: 1.55; }

/* arcade */
.cabinet { background: #fff; margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); padding: calc(3.4 * var(--u)) calc(3.4 * var(--u)) calc(4.4 * var(--u)); scroll-margin-top: calc(4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink); }
.screen { position: relative; background: #140d24; padding: calc(2.4 * var(--u)); margin-bottom: calc(3.4 * var(--u)); }
.screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #2a1d43; }
.screen span { position: absolute; left: calc(3.6 * var(--u)); bottom: calc(3.6 * var(--u)); background: #ff5fa2; color: #fff; font: 700 calc(2.4 * var(--u))/1 var(--pixel); padding: calc(1 * var(--u)) calc(1.6 * var(--u)); }
.cab-meta { display: flex; justify-content: space-between; font-size: calc(3 * var(--u)); color: #3b2a5c; font-weight: 800; margin: 0 0 calc(1.4 * var(--u)) !important; }
.cab-meta i { font: 700 calc(2.5 * var(--u))/1.4 var(--pixel); font-style: normal; background: #3b2a5c; color: #fff; padding: 0 calc(1.6 * var(--u)); }
.cabinet h3 { font-size: calc(5 * var(--u)); margin: 0; }
.cabinet .sub { color: #3b2a5c; font-weight: 800; margin-bottom: calc(2 * var(--u)) !important; }
.cabinet > p { font-size: calc(3.6 * var(--u)); color: var(--ink-soft); }
.row { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); }

/* story */
.story .lead { font-size: calc(4.2 * var(--u)); font-weight: 800; }
.story p { color: var(--ink-soft); }
.story .turn { color: var(--ink); font-weight: 900; font-size: calc(4.3 * var(--u)); margin-top: calc(5 * var(--u)) !important; }
.story blockquote { margin: calc(5 * var(--u)) 0; padding: calc(4 * var(--u)) calc(4.4 * var(--u)); background: #2d4434; color: var(--cream); font-weight: 800; line-height: 1.7; }
.sign { font: 700 calc(3.4 * var(--u))/1.3 var(--pixel); color: var(--kiwi-deep) !important; }

/* contact */
.contact-form h3 { font-size: calc(5.6 * var(--u)); }
.topics { border: 0; padding: 0; margin: 0 0 calc(4.6 * var(--u)); min-width: 0; }
.topics legend { font-weight: 800; font-size: calc(3.7 * var(--u)); padding: 0; margin-bottom: calc(2.2 * var(--u)); }
.topics legend span { color: var(--ink-soft); font-weight: 500; font-size: calc(3.2 * var(--u)); }
.topic-pick { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(3 * var(--u)); }
.topic-pick select { width: 100%; min-width: 0; font: 600 calc(3.5 * var(--u))/1.3 var(--sans); padding: calc(2.4 * var(--u)) calc(2 * var(--u)); background: #fff; color: var(--ink); border: var(--px) solid var(--ink); border-radius: 0; }
.topic-list { list-style: none; padding: 0; margin: calc(3 * var(--u)) 0 0; display: flex; flex-wrap: wrap; gap: calc(2.4 * var(--u)); }
.topic-list li { display: inline-flex; align-items: center; gap: calc(1.4 * var(--u)); background: var(--citrus); font-weight: 700; font-size: calc(3.2 * var(--u)); padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)) calc(1.4 * var(--u)) calc(2.4 * var(--u)); }
.topic-list button { appearance: none; border: 0; background: rgba(0, 0, 0, 0.12); width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); cursor: pointer; font-weight: 900; color: var(--ink); }
.contact-form .status { margin-top: calc(3 * var(--u)) !important; }
#contactAgain { margin-top: calc(3 * var(--u)); }
.panel a { color: #2f6fbf; }
.panel .btn, .panel .stops a, .panel .slot { color: var(--ink); }

/* newsstand (blog) */
.post-list { display: grid; gap: calc(5 * var(--u)); margin: calc(4 * var(--u)) 0 calc(4 * var(--u)); }
.post { background: #fff; padding: calc(4.4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink), inset 0 calc(1.4 * var(--u)) 0 #2f6f73; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.6 * var(--u)); margin: calc(1.4 * var(--u)) 0 calc(2 * var(--u)) !important; }
.post-meta time { font: 700 calc(2.9 * var(--u))/1 var(--pixel); color: #2f6f73; margin-right: calc(1 * var(--u)); }
.post-meta span { background: #e2efed; color: #22504f; font: 700 calc(2.8 * var(--u))/1 var(--sans); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); }
.post h3 { font-size: calc(5 * var(--u)) !important; margin-bottom: calc(2 * var(--u)) !important; }
.post h3 a { color: inherit; text-decoration: none; }
.post > p:not(.post-meta) { color: var(--ink-soft); font-size: calc(3.6 * var(--u)); }

/* analytics consent (pixel version) */
.analytics-consent { position: absolute; z-index: 13; left: 0; right: 0; margin-inline: auto; width: min(calc(100% - calc(8 * var(--u))), calc(120 * var(--u))); bottom: calc(env(safe-area-inset-bottom) + calc(4 * var(--u))); background: var(--paper); color: var(--ink); padding: calc(4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink), 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.2); }
.analytics-consent[hidden] { display: none; }
.analytics-consent p { margin: 0 0 calc(3 * var(--u)); font-size: calc(3.4 * var(--u)); line-height: 1.6; }
.analytics-consent > div { display: flex; gap: calc(3 * var(--u)); }
.analytics-consent button { flex: 1; appearance: none; border: 0; cursor: pointer; font: 800 calc(3.5 * var(--u))/1.2 var(--sans); padding: calc(2.6 * var(--u)); background: #fff; color: var(--ink);
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink); }
.analytics-consent button:first-child { background: var(--kiwi); }
.analytics-preference { appearance: none; border: 0; background: transparent; color: var(--ink-soft); text-decoration: underline; font: 600 calc(3.3 * var(--u))/1 var(--sans); padding: calc(3 * var(--u)) 0; cursor: pointer; }

/* without JavaScript: show the content as a plain page */
.no-js body { display: block; overflow: auto; height: auto; }
.no-js .stage { height: auto; width: auto; max-width: 640px; margin: 0 auto; overflow: visible; container-type: inline-size; touch-action: auto; user-select: text; background: var(--paper); }
.no-js .world, .no-js .titles, .no-js .hud, .no-js .nav, .no-js .dialog, .no-js .bubble, .no-js .sheet-bar, .no-js .stage::after { display: none; }
.no-js .sheet, .no-js .sheet[hidden] { display: block !important; position: static; animation: none; }
.no-js .panel[hidden] { display: block !important; margin-bottom: calc(10 * var(--u)); }
.no-js .step[hidden] { display: block !important; }
.noscript { max-width: 640px; margin: 16px auto; padding: 0 16px; font-size: 15px; }

/* ---------- languages ---------- */
.hud-lang {
  cursor: pointer; background: #fff; color: var(--ink); font: 800 calc(3.1 * var(--u))/1 var(--display); padding: calc(1.4 * var(--u)) calc(1.8 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink);
  border: 0; border-radius: 0;
}
.hud-lang:active { transform: translateY(var(--px)); }
.hud-lang:focus-visible { outline: calc(var(--px) * 1.5) solid var(--citrus); outline-offset: calc(var(--px) * 3); }
.langs { list-style: none; margin: calc(3 * var(--u)) 0 calc(5 * var(--u)); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); }
.langs a { display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(2.8 * var(--u)) calc(3 * var(--u)); background: #fff; color: var(--ink) !important; text-decoration: none; font-weight: 800; font-size: calc(3.7 * var(--u));
  box-shadow: 0 calc(var(--px) * -1.5) 0 var(--ink), 0 calc(var(--px) * 1.5) 0 var(--ink), calc(var(--px) * -1.5) 0 0 var(--ink), calc(var(--px) * 1.5) 0 0 var(--ink); }
.langs a b { font: 800 calc(3 * var(--u))/1 var(--display); background: #ebe5d6; padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)); min-width: calc(9 * var(--u)); text-align: center; }
.langs a[aria-current] { background: var(--citrus); }
.langs a[aria-current] b { background: #fff; }
.lang-suggest { position: absolute; z-index: 9; left: 0; right: 0; margin-inline: auto; width: min(calc(100% - calc(8 * var(--u))), calc(120 * var(--u))); top: calc(env(safe-area-inset-top) + calc(18 * var(--u))); background: var(--paper); padding: calc(3.6 * var(--u)) calc(4 * var(--u));
  box-shadow: 0 calc(var(--px) * -2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -2) 0 0 var(--ink), calc(var(--px) * 2) 0 0 var(--ink), 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.18); }
.lang-suggest p { margin: 0 0 calc(3 * var(--u)); font-weight: 800; font-size: calc(3.7 * var(--u)); line-height: 1.45; }

/* per-language type: Latin text breaks on words; CJK and Thai use their own system fonts */
:lang(en) .dialog, :lang(en) .panel, :lang(en) .lang-suggest { overflow-wrap: break-word; }
:lang(en) .say { line-height: 1.5; }
:lang(ja) { --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif; }
:lang(ko) { --sans: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }
:lang(th) { --sans: "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif; }
:lang(th) .say, :lang(th) .panel { line-height: 1.75; }
:lang(es) .dialog, :lang(es) .panel { overflow-wrap: break-word; }

/* ---------- IDEA gallery as a pixel item collection ---------- */
.idea-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3.4 * var(--u)); align-items: start; }
.idea-card { background: transparent; box-shadow: none; scroll-margin-top: calc(30 * var(--u)); }
.idea-card .tile {
  appearance: none; border: 0; padding: 0; width: 100%; cursor: pointer; background: #fff; color: var(--ink); text-align: left;
  display: grid; font: inherit;
  box-shadow: 0 calc(var(--px) * -1.5) 0 var(--ink), 0 calc(var(--px) * 1.5) 0 var(--ink), calc(var(--px) * -1.5) 0 0 var(--ink), calc(var(--px) * 1.5) 0 0 var(--ink);
}
.idea-card .tile:active { transform: translateY(var(--px)); }
.idea-card .tile:focus-visible { outline: calc(var(--px) * 1.5) solid var(--citrus); outline-offset: calc(var(--px) * 3); }
.item-stage {
  --tone: #7ed957; position: relative; display: grid; place-items: center; aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1.5px) 0 0 / calc(3 * var(--u)) calc(3 * var(--u)),
    var(--tone);
}
.idea-card[data-tone="1"] .item-stage { --tone: #f7c64a; }
.idea-card[data-tone="2"] .item-stage { --tone: #8ec3ea; }
.idea-card[data-tone="3"] .item-stage { --tone: #ef7a62; }
.idea-card[data-tone="4"] .item-stage { --tone: #c9a2e8; }
.idea-card[data-tone="5"] .item-stage { --tone: #9ad7c9; }
.item-stage .item { width: 72%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.item-no { position: absolute; left: calc(1.4 * var(--u)); bottom: calc(1.2 * var(--u)); font: 700 calc(2.3 * var(--u))/1 var(--pixel); color: rgba(36, 48, 61, 0.7); }
.sticker {
  position: absolute; right: calc(-1 * var(--u)); top: calc(1.4 * var(--u)); transform: rotate(6deg);
  font: 800 calc(2.4 * var(--u))/1 var(--sans); padding: calc(1 * var(--u)) calc(1.4 * var(--u)); color: #fff;
  box-shadow: 0 0 0 calc(var(--px) * 0.75) var(--ink);
}
.sticker.live { background: var(--red); }
.sticker.demo { background: #3b2a5c; }
.tile-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: calc(1.8 * var(--u)) calc(2 * var(--u)) calc(2.2 * var(--u)); font-size: calc(3 * var(--u)); font-weight: 800; line-height: 1.35; min-height: calc(calc(3 * var(--u)) * 1.35 * 2 + calc(4 * var(--u)));
}
.idea-card .idea-body { display: none; }
.idea-card.open { grid-column: 1 / -1; }
.idea-card.open .tile { grid-template-columns: calc(30 * var(--u)) 1fr; align-items: center; }
.idea-card.open .tile-title { -webkit-line-clamp: 3; font-size: calc(4 * var(--u)); min-height: 0; }
.idea-card.open .idea-body {
  display: block; background: #fff; padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4.4 * var(--u)); margin-top: calc(var(--px) * 1.5);
  box-shadow: 0 calc(var(--px) * -1.5) 0 var(--ink), 0 calc(var(--px) * 1.5) 0 var(--ink), calc(var(--px) * -1.5) 0 0 var(--ink), calc(var(--px) * 1.5) 0 0 var(--ink);
}
.idea-card.open .idea-body h3 { display: none; }
.idea-card.open .idea-body dl { margin-top: calc(1 * var(--u)); }
.btn.ghost { background: transparent; }
.btn.ghost::after { display: none; }
.count { display: flex; justify-content: space-between; gap: calc(2 * var(--u)); }
.count b { font: 700 calc(2.8 * var(--u))/1.4 var(--pixel); color: #2f6f73; }
.no-js .idea-card .idea-body { display: block; }

/* ---------- DEMO screenshots inside an arcade CRT ---------- */
.screen { overflow: hidden; }
.screen::after {
  content: ""; position: absolute; inset: calc(2.4 * var(--u)); pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(10, 6, 24, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(10, 6, 24, 0.45) 100%);
  box-shadow: inset 0 0 0 calc(var(--px) * 1) rgba(79, 227, 255, 0.35), inset 0 0 calc(4 * var(--u)) rgba(79, 227, 255, 0.18);
}
.screen img { filter: saturate(1.08) contrast(1.04); }
.screen span { z-index: 1; }