/* KiWEDOGO v3 — brand restyle layered on v2.css (loaded after it).
   Brand kit: 品牌設計/ — white paper, hand-drawn ink lines, flat kiwi colours, Gochi Hand for small handwritten labels,
   PingFang / Noto Sans TC for reading. Bigger type and calmer surfaces for readability. */
@font-face { font-family: "Gochi Hand"; font-display: swap; src: url("/assets/brand-20261013/gochi-hand.woff") format("woff"); }
:root {
  --ink: #1c1c1c;
  --ink-soft: #4d4b46;
  --paper: #ffffff;
  --cream: #faf6ea;
  --kiwi: #b9dc63;
  --kiwi-deep: #5e7f1f;     /* text-safe kiwi on white */
  --seed: #8dbb3f;
  --citrus: #e3dc5c;        /* cat-eye yellow */
  --beam: #fff6cf;
  --dome: #e9f4fb;
  --pilot: #c8955f;
  --red: #8a5a33;           /* ear brown takes the old accent role */
  --red-deep: #8a5a33;
  --pixel: "Gochi Hand", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --hand: "Gochi Hand", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --display: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --wobble: 255px 14px 225px 16px / 16px 225px 14px 255px;
  --wobble-sm: 18px 6px 16px 7px / 7px 16px 6px 18px;
  --line: 2.5px solid var(--ink);
}

body { background: var(--cream); }
.stage { background: linear-gradient(180deg, var(--sky-top, #e3f0f8) 0%, var(--sky-mid, #f3f6ef) 46%, var(--sky-low, #fbf8ef) 70%); --px: 2px; }
.world { image-rendering: auto; width: 100%; height: 100%; }
.titles { display: none; }

/* ink line instead of the pixel border */
.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 {
  box-shadow: none; border: var(--line); border-radius: var(--wobble-sm);
}

/* ---------- HUD ---------- */
.hud-logo {
  background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; gap: calc(1.2 * var(--u));
  padding: calc(0.8 * var(--u)) calc(2.4 * var(--u)) calc(0.8 * var(--u)) calc(1.2 * var(--u));
}
.hud-logo .ufo { height: calc(7 * var(--u)); width: auto; display: block; }
.hud-logo .word { height: calc(3.6 * var(--u)); width: auto; display: block; }
.proto { background: var(--ink); color: #fff; font: 400 calc(2.8 * var(--u))/1 var(--hand); border-radius: 4px; }
.hud-map { background: var(--kiwi); font: 800 calc(3.6 * var(--u))/1 var(--display); border-radius: 999px; }
.hud-map::before { font: 400 calc(3.4 * var(--u))/1 var(--hand); letter-spacing: 0.02em; }
.hud-lang { border: var(--line) !important; border-radius: 999px !important; box-shadow: none !important; background: var(--paper) !important; color: var(--ink) !important; }
.hud-stamps { border-radius: 999px; font: 800 calc(3.6 * var(--u))/1 var(--display); }
.star { background: var(--citrus); outline: 0; filter: drop-shadow(0 0 0.5px var(--ink)) drop-shadow(0 0 0.5px var(--ink)); }
.hud-dots li { height: calc(1.2 * var(--u)); background: rgba(28, 28, 28, 0.12); border-radius: 999px; }
.hud-dots li.seen { background: var(--seed); }
.hud-dots li.on { background: var(--ink); box-shadow: none; }

/* ---------- arrows & hint ---------- */
.nav { background: var(--paper); border-radius: 50%; top: 56cqh; width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.nav.prev span { border-color: transparent var(--ink) transparent transparent; }
.nav.next span { border-color: transparent transparent transparent var(--ink); }
.hint { background: var(--ink); color: #fff; border: 0; border-radius: 999px; font: 700 calc(3.2 * var(--u))/1 var(--sans); }
.hint span { color: var(--kiwi); }

/* ---------- speech bubble from the UFO pilot ---------- */
.bubble {
  bottom: calc(100% - var(--ufo-top, 30%) + calc(3.4 * var(--u)));
  background: var(--paper); border-radius: var(--wobble);
  padding: calc(5 * var(--u)) calc(4.6 * var(--u)) calc(3.4 * var(--u));
  width: min(calc(100% - calc(8 * var(--u))), calc(96 * var(--u)));
}
.bubble::before { bottom: calc(-3.4 * var(--u) - 2.5px); border-width: calc(3.4 * var(--u)) calc(2.6 * var(--u)) 0; border-color: var(--ink) transparent transparent; }
.bubble::after { bottom: calc(-3.4 * var(--u) + 1.5px); border-width: calc(3.1 * var(--u)) calc(2.2 * var(--u)) 0; border-color: var(--paper) transparent transparent; }
.bubble h2 { font-size: calc(5 * var(--u)); font-weight: 900; letter-spacing: 0; }
.bubble.mini { border-radius: 999px; padding: calc(2.4 * var(--u)) calc(4 * var(--u)); }
.bubble.mini h2::after { content: " ▾"; color: var(--kiwi-deep); }
/* fold control: ▴ folds the open bubble, the collapsed pill ends in ▾ */
.bubble .fold {
  position: absolute; right: calc(3 * var(--u)); top: calc(2.6 * var(--u)); width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u));
  display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper);
  font: 700 calc(3 * var(--u))/1 var(--sans); color: var(--ink);
}
/* a drawn chevron (the ▴ glyph is tiny in most fonts) */
.bubble .fold::before { content: ""; width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); margin-top: calc(0.9 * var(--u));
  border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); transform: rotate(45deg); }
.bubble.mini .fold { display: none; }
.bubble h2 { padding-right: calc(8 * var(--u)); }
.bubble.mini h2 { padding-right: 0; }
.bubble:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }
.who {
  top: calc(-3.8 * var(--u)); left: calc(4 * var(--u)); background: var(--kiwi); color: var(--ink);
  font: 400 calc(3.6 * var(--u))/1 var(--hand); padding: calc(1.2 * var(--u)) calc(2.6 * var(--u)) calc(1.2 * var(--u)) calc(1.4 * var(--u));
  border: var(--line); border-radius: 999px;
}
.face { width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: url("/assets/brand-20261013/icon-simple.svg") center / contain no-repeat; box-shadow: none; }
.face::after { content: none; }
.say { font-size: calc(4 * var(--u)); line-height: 1.65; color: var(--ink-soft); }
.say.typing::after { color: var(--seed); }

/* wide screens: the bubble talks from the left of the UFO instead of above it */
@media (min-width: 900px) {
  .bubble {
    left: auto; right: calc(50% + var(--ufo-half, 90px) + calc(4 * var(--u))); margin: 0;
    bottom: auto; top: calc(var(--ufo-top, 30%) - calc(2 * var(--u)));
    width: min(calc(50% - var(--ufo-half, 90px) - calc(10 * var(--u))), 560px);
  }
  .bubble::before { left: auto; right: calc(-3.4 * var(--u) - 2.5px); bottom: auto; top: calc(8 * var(--u)); transform: none;
    border-width: calc(2.6 * var(--u)) 0 calc(2.6 * var(--u)) calc(3.4 * var(--u)); border-color: transparent transparent transparent var(--ink); }
  .bubble::after { left: auto; right: calc(-3.4 * var(--u) + 1.5px); bottom: auto; top: calc(8.4 * var(--u)); transform: none;
    border-width: calc(2.2 * var(--u)) 0 calc(2.2 * var(--u)) calc(3.1 * var(--u)); border-color: transparent transparent transparent var(--paper); }
  .bubble.mini { width: max-content; }
  /* the tail sits on a straight stretch of the edge, centred, so it stays attached when the bubble collapses */
  .bubble, .bubble.mini { border-radius: 22px 12px 20px 14px / 14px 20px 12px 22px; }
  .bubble::before { top: calc(50% - 2.6 * var(--u)); }
  .bubble::after { top: calc(50% - 2.2 * var(--u)); }
}

/* ---------- action bar ---------- */
.dialog { background: linear-gradient(180deg, rgba(251, 248, 239, 0), rgba(251, 248, 239, 0.92) 40%); }
.btn { background: var(--paper); font: 800 calc(4 * var(--u))/1.15 var(--sans); padding: calc(2.8 * var(--u)) calc(4.4 * var(--u)); transition: transform 0.15s ease; }
.btn::after { content: none; }
.btn.primary { background: var(--kiwi); }
.btn.hot { background: var(--citrus); }
.btn:hover { transform: rotate(-1.2deg); }
.nav:active, .btn:active, .hud-map:active { transform: translateY(2px); }
.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: 3px solid var(--seed); outline-offset: 3px;
}

/* ---------- sheet: a sheet of paper ---------- */
.stage::after { background: rgba(28, 28, 28, 0.22); }
/* blur the street behind an open panel so the panel reads on its own */
.stage.sheet-open::after { -webkit-backdrop-filter: blur(10px) saturate(0.85); backdrop-filter: blur(10px) saturate(0.85); }
.sheet { background: var(--paper); border-radius: var(--wobble); overflow: hidden; }
.sheet-bar, .sheet[data-tone] .sheet-bar { background: var(--kiwi); color: var(--ink); border-bottom: var(--line); }
.sheet[data-tone="red"] .sheet-bar, .sheet[data-tone="brick"] .sheet-bar { background: var(--beam); }
.sheet[data-tone="blue"] .sheet-bar, .sheet[data-tone="teal"] .sheet-bar { background: var(--dome); }
.sheet[data-tone="citrus"] .sheet-bar { background: var(--citrus); }
.sheet[data-tone="purple"] .sheet-bar { background: #e8e1f2; }
.sheet[data-tone="wood"] .sheet-bar { background: #f3e2c8; }
.sheet-bar h2 { font: 400 calc(5 * var(--u))/1.1 var(--hand); letter-spacing: 0.01em; }
.close { background: var(--paper); border: var(--line); border-radius: 50%; }

.panel { font-size: calc(4.1 * var(--u)); line-height: 1.75; }
.kicker { font: 400 calc(4 * var(--u))/1.2 var(--hand); color: var(--red); letter-spacing: 0.02em; }
.panel h3 { font-size: calc(6.2 * var(--u)); letter-spacing: -0.005em; }
.loop li::before { background: var(--kiwi); font: 400 calc(5 * var(--u))/1 var(--hand); box-shadow: none; border: var(--line); border-radius: 50%; }
.rows { border-top: 2px dashed #d9d3c3; }
.quest-steps i { background: #ece7da; border-radius: 999px; }
.quest-steps i.on { background: var(--seed); }
.quest textarea:focus, .quest input:focus { border-color: var(--seed); }
.chip { border-width: 2px; }
.chip:has(input:checked), .chip.on { background: var(--kiwi); color: var(--ink); }
.letter { border-radius: var(--wobble); }
.letter::before { content: none; }
.letter .to { font: 400 calc(3.6 * var(--u))/1.3 var(--hand); color: var(--red); }
.slot { background: var(--paper); }
.slot .buy, .topic-list li { background: var(--citrus); }
.slot .q { font: 400 calc(8 * var(--u))/1 var(--hand); }
.links a span, .stops b, .stops i, .svc-no, .sign, .cab-meta i, .screen span, .post-meta time, .item-no, .count b { font-family: var(--hand); font-weight: 400; }
.stops b { font-size: calc(4.2 * var(--u)); }
.stops i { font-size: calc(3.2 * var(--u)); }
.svc-no { font-size: calc(3.8 * var(--u)); }
.idea-card, .svc, .cabinet, .post, .cta-box { border: var(--line); border-radius: var(--wobble-sm); box-shadow: none; }
.idea-cat, details summary { color: var(--kiwi-deep); }
.chip.on { background: var(--kiwi); }
.panel a { color: var(--ink); text-decoration-color: var(--seed); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story blockquote { background: var(--beam); color: var(--ink); border: var(--line); border-radius: var(--wobble-sm); }
.cab-meta, .cabinet .sub { color: var(--ink); }
.cab-meta i { background: var(--ink); }
.screen { background: var(--ink); border-radius: 10px; }
.stamp-grid .got .mark { border-color: var(--seed); color: var(--kiwi-deep); background: rgba(185, 220, 99, 0.18); }
.toast { background: var(--ink); color: #fff; border: 0; border-radius: 999px; }

/* hand-drawn IDEA items: undiscovered ones stay a soft grey silhouette */
/* item tiles: flat brand pastel per category, ink frame */
.idea-card .tile, .idea-card.open .idea-body { box-shadow: none; border: var(--line); border-radius: var(--wobble-sm); }
.idea-card .tile { overflow: hidden; }
.item-stage { --tone: var(--kiwi); background: var(--tone); border-bottom: var(--line); }
.idea-card[data-tone="1"] .item-stage { --tone: var(--beam); }
.idea-card[data-tone="2"] .item-stage { --tone: var(--dome); }
.idea-card[data-tone="3"] .item-stage { --tone: #f3e2c8; }
.idea-card[data-tone="4"] .item-stage { --tone: #ece6f4; }
.idea-card[data-tone="5"] .item-stage { --tone: #e4f1dc; }
.idea-card.open .tile .item-stage { border-bottom: 0; border-right: var(--line); }
.item-no { font: 400 calc(3.2 * var(--u))/1 var(--hand); color: rgba(28, 28, 28, 0.6); }
.sticker { font: 400 calc(3.2 * var(--u))/1 var(--hand); color: var(--ink); box-shadow: none; border: 2px solid var(--ink); border-radius: 6px; }
.sticker.live { background: var(--citrus); }
.sticker.demo { background: var(--kiwi); }
.count b { font: 400 calc(3.4 * var(--u))/1.4 var(--hand); color: var(--kiwi-deep); }
.item-stage .item { width: 80%; image-rendering: auto; transition: filter 0.4s, opacity 0.4s; }
.item-stage .item.locked { filter: grayscale(1); opacity: 0.38; }
.slot .icon { image-rendering: auto; background: var(--paper); border-radius: 10px; }
.machine { background: var(--kiwi); box-shadow: none; border: var(--line); border-radius: var(--wobble-sm); padding-top: calc(4.6 * var(--u)); }
.slot.empty { background: var(--cream); }

/* opening animation: the street UI waits until the UFO has landed its show */
.hud, .bubble, .dialog, .nav { transition: opacity 0.5s ease; }
.stage.intro .hud, .stage.intro .bubble, .stage.intro .dialog, .stage.intro .nav, .stage.intro .lang-suggest, .stage.intro .hint { opacity: 0 !important; pointer-events: none; }
.intro-skip {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 6 * var(--u));
  appearance: none; cursor: pointer; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 999px;
  font: 800 calc(3.6 * var(--u))/1 var(--sans); padding: calc(2.4 * var(--u)) calc(4.4 * var(--u));
}
.intro-skip:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }

/* analytics consent: waits for the opening, then slides in a beat after KiWE's greeting; brand ink frame */
.analytics-consent { border: var(--line); border-radius: var(--wobble-sm); box-shadow: none;
  transition: opacity 0.5s ease 1.4s, transform 0.5s ease 1.4s; }
.analytics-consent button { border: 2px solid var(--ink); border-radius: var(--wobble-sm); box-shadow: none; }
.stage.intro .analytics-consent { opacity: 0; transform: translateY(calc(4 * var(--u))); pointer-events: none; visibility: hidden; transition: none; }


/* map list: stop name plus a plain line saying what it is for */
.stops span { display: grid; gap: calc(0.6 * var(--u)); font-weight: 800; }
.stops small { font: 500 calc(3.3 * var(--u))/1.35 var(--sans); color: var(--ink-soft); }
/* a door into a room of this stop (點子櫥窗 inside 點子郵筒, 作品試玩 inside 接案工坊) */
.room-door { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: calc(0.6 * var(--u)) calc(3 * var(--u));
  background: var(--beam); margin: 0 0 calc(5 * var(--u)); padding: calc(3.4 * var(--u)) calc(4.4 * var(--u)); }
.room-door b { grid-column: 1; font-size: calc(4.4 * var(--u)); }
.room-door span { grid-column: 1; font: 500 calc(3.5 * var(--u))/1.4 var(--sans); color: var(--ink-soft); }
.room-door::after { content: none; }

/* while three.js and the drawings load: the UFO hovers */
.loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; transition: opacity 0.5s; }
.loading img { width: calc(22 * var(--u)); height: auto; animation: hover 1.6s ease-in-out infinite; }
.street-ready .loading, .no-webgl .loading { opacity: 0; }
@keyframes hover { 50% { transform: translateY(calc(-2.4 * var(--u))) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .loading img { animation: none; } }

/* no WebGL: still show the street as a calm drawing */
.no-webgl .stage { background: #fbf8ef url("street/st-home.svg") center 62% / auto 42% no-repeat; }

/* one action at the bottom centre; the panel it opens says the rest */
.dialog { background: none; pointer-events: none; }
.dialog .actions { pointer-events: auto; }

/* wayfinding kites: an arrow kite on each edge of the screen, flying the way it points (app.js sets --kw, --kite-top) */
.kites { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity 0.5s ease; }
.kite {
  position: absolute; top: var(--kite-top, 40%); width: var(--kw, 110px); aspect-ratio: 212 / 132;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--ink);
}
.kite.prev { left: var(--kite-edge, 12px); }
.kite.next { right: var(--kite-edge, 12px); }
.kite-fly { position: absolute; inset: 0; display: block; animation: kite-float 3.4s ease-in-out infinite; transform-origin: 50% 50%; }
.kite.prev .kite-fly { animation-delay: -1.7s; }
.kite-art { position: absolute; inset: 0; display: block; rotate: var(--sway, 0deg); transition: rotate 0.4s ease; }
.kite.prev .kite-art { transform: scaleX(-1); }   /* the back kite is the same kite, pointing left */
.kite-body { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the tail streams behind the kite, from its back corner toward the middle of the screen */
.kite-tail { position: absolute; right: 94%; top: 34%; width: 52%; height: auto; transform-origin: 100% 50%; animation: kite-tail 1.3s ease-in-out infinite; }
.kite b {
  /* the destination on a tag under the kite: plain background, nothing crossing the words */
  position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; width: max-content; max-width: calc(var(--kw, 110px) * 1.3);
  padding: 4px 10px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; text-align: center;
  font: 800 clamp(12px, calc(var(--kw, 110px) * 0.11), 17px)/1.18 var(--sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity 0.35s ease 0.1s;
}
.kite.next b { background: #fbeeb0; }
.kite { transition: opacity 0.45s ease 0.15s; }   /* back in once the UFO has arrived */
.kites.moving .kite { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }   /* the whole kite fades while the UFO flies */
.kite:hover .kite-fly { scale: 1.06; }
.kite:active .kite-fly { scale: 0.96; }
.kite:focus-visible { outline: 3px solid var(--seed); outline-offset: 4px; border-radius: 12px; }
@keyframes kite-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes kite-tail { 0%, 100% { transform: rotate(10deg) skewY(4deg); } 50% { transform: rotate(24deg) skewY(-5deg); } }  /* droops a little, away from the UFO */
.stage.intro .kites { opacity: 0 !important; }
.stage.intro .kites .kite { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kite-fly, .kite-tail { animation: none; } .kite-art { rotate: 0deg; } }

/* top right: one gear for language, stamp card and the rest */
.hud-gear {
  margin-left: auto; width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 36px; min-height: 36px; padding: 0;
  display: grid; place-items: center; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 50%; cursor: pointer;
  transition: transform 0.3s ease;
}
.hud-gear svg { width: 62%; height: 62%; }
.hud-gear:hover { transform: rotate(40deg); }
.hud-gear:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }


/* sky behind the street (sky.js): stars, sun and moon, weather over it */
.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky .stars { position: absolute; inset: 0; opacity: var(--stars, 0); transition: opacity 3s ease; }
.sky .stars i { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #fffbe8; box-shadow: 0 0 4px rgba(255, 251, 232, 0.9); animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.25; } }
.sky .sun, .sky .moon { position: absolute; width: clamp(84px, 17vmin, 176px); height: auto; translate: -50% -50%; transition: left 3s ease, top 3s ease, opacity 3s ease; }
.sky .sun { left: var(--sun-x, 80%); top: var(--sun-y, 20%); opacity: var(--sun-o, 0); }
.sky .moon { left: var(--moon-x, 20%); top: var(--moon-y, 20%); opacity: var(--moon-o, 0); width: clamp(72px, 14vmin, 148px); }
.weather-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kite-art { filter: brightness(calc(1 - var(--night, 0) * 0.28)); }
/* the clock beside the gear: weather, local time, temperature */
.sky-clock {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box;
  padding: 4px 11px 4px 8px; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 999px;
  font: 800 clamp(12px, calc(3.4 * var(--u)), 15px)/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sky-clock[hidden] { display: none; }
.sky-clock .temp:empty { display: none; }
.sky-clock .ico { font-size: 1.1em; }
@media (prefers-reduced-motion: reduce) { .sky .stars i { animation: none; } }

.sky-clock:not([hidden]) + .hud-gear { margin-left: 0; }
/* KiWEDOGO 帳號 (account-chip.js): a person when signed out, the photo or initial when signed in */
.hud-me {
  margin-left: auto; width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 36px; min-height: 36px; padding: 0; box-sizing: border-box;
  display: grid; place-items: center; background: var(--paper); color: var(--ink); border: var(--line); border-radius: 50%; overflow: hidden;
  text-decoration: none; font: 800 clamp(14px, calc(4.2 * var(--u)), 19px)/1 var(--sans);
}
.hud-me svg { width: 62%; height: 62%; }
.hud-me img { width: 100%; height: 100%; object-fit: cover; }
.hud-me.in { background: var(--citrus); }
.hud-me:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }
.sky-clock:not([hidden]) + .hud-me, .hud-me ~ .hud-gear { margin-left: 0; }   /* the gear stays beside the account button */
/* the personal menu under the button once signed in: one row per service (new services add a row) */
.me-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; width: min(300px, calc(100vw - 24px)); box-sizing: border-box; padding: 8px;
  background: var(--paper); color: var(--ink); border: var(--line); border-radius: 18px 10px 16px 11px / 11px 16px 10px 18px;
  box-shadow: 0 6px 0 rgba(28, 28, 28, 0.15); font-family: var(--sans);
}
.me-menu[hidden] { display: none; }
.me-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; margin-bottom: 4px; border-bottom: 1.5px dashed #d9d3c3; }
.me-head .pic { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--citrus); border: 1.5px solid var(--ink); font: 800 17px/1 var(--sans); }
.me-head .pic img { width: 100%; height: 100%; object-fit: cover; }
.me-head div { min-width: 0; }
.me-head b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.me-head small { display: block; font-size: 12.5px; color: #6b6a64; overflow-wrap: anywhere; }
.me-menu .row { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left;
  text-decoration: none; font: 700 15px/1.3 var(--sans); cursor: pointer; }
.me-menu .row small { display: block; font-weight: 500; font-size: 12.5px; color: #6b6a64; margin-top: 2px; }
.me-menu .row:hover, .me-menu .row:focus-visible { background: #f3eedc; outline: none; }
.me-menu .row.out { color: #6b6a64; font-weight: 600; border-top: 1.5px dashed #d9d3c3; border-radius: 0 0 10px 10px; margin-top: 4px; }
/* one row on phones: a slightly smaller logo, the clock without the temperature */
.hud { flex-wrap: nowrap; }
@media (max-width: 420px) {
  .sky-clock .temp { display: none; }
  .sky-clock { padding: 4px 9px 4px 7px; gap: 4px; }
  .hud { gap: 6px; }
  .hud-logo { padding: 3px 8px 3px 4px; gap: 4px; }
  .hud-logo .ufo { height: calc(6 * var(--u)); }
  .hud-logo .word { height: calc(3.1 * var(--u)); }
}
@media (max-width: 340px) { .sky-clock .ico { display: none; } }
/* with the KiWEDOGO 帳號 button the row is one button longer: drop the clock icon and the map's "/09" on phones, and the wordmark on the narrowest */
@media (max-width: 420px) { .sky-clock .ico, .hud-map i { display: none; } .hud-me, .hud-gear { min-width: 34px; min-height: 34px; } }
@media (max-width: 370px) { .hud-logo .word { display: none; } }
/* the top bar and the kite tags stay readable on any sky: a soft lift by day, dark glass with cream lines at night */
.hud-logo, .hud-gear, .hud-me, .sky-clock, .kite b { box-shadow: 0 2px 0 rgba(28, 28, 28, 0.12); transition: background 1.5s ease, color 1.5s ease, border-color 1.5s ease; }
.stage.is-night .hud-logo, .stage.is-night .hud-gear, .stage.is-night .hud-me:not(.in), .stage.is-night .sky-clock, .stage.is-night .kite b {
  background: rgba(17, 25, 54, 0.78); color: #fff3c4; border-color: #fff3c4; box-shadow: 0 0 0 1px rgba(17, 25, 54, 0.5), 0 0 14px rgba(255, 243, 196, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.stage.is-night .hud-logo .word { filter: invert(1) sepia(0.25); }
.stage.is-night .hud-map { box-shadow: 0 0 12px rgba(185, 220, 99, 0.35); }
.stage.is-night .kite.next b { background: rgba(60, 52, 18, 0.82); }

/* idea gallery categories: all of them in view (they wrap), no sideways scrolling */
.filters .chips { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 2px 0 4px; }
.filters .chip { padding: 6px 12px; font-size: clamp(13px, calc(3.2 * var(--u)), 15px); }

/* contact: pick a topic, then the things you mean (hand-drawn chips instead of dropdowns) */
.contact-form .chips { gap: 8px; }
.contact-form .chip { font: 700 clamp(13px, calc(3.4 * var(--u)), 15px)/1.2 var(--sans); padding: 8px 13px; border: 2px solid var(--ink); border-radius: var(--wobble-sm); background: var(--paper); transition: background 0.15s ease, transform 0.15s ease; }
.contact-form .chip:hover { transform: rotate(-1deg); }
.contact-form .chip.on { background: var(--kiwi); }
.contact-form .chip:disabled { opacity: 0.45; cursor: default; transform: none; }
.contact-form .chip:focus-visible { outline: 3px solid var(--seed); outline-offset: 2px; }
.topic-items { margin-top: 12px; padding: 4px 12px 12px; border: 2px dashed #d9d3c3; border-radius: 14px; }
.topic-items .chips-label { margin: 8px 0 8px !important; font-size: 14px; }
.topic-hint { margin: 10px 0 0 !important; }
.topic-list li { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.topic-list button { border-radius: 50%; width: 22px; height: 22px; }

/* arcade panel: a lobby of game cards */
.games { list-style: none; margin: calc(4 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(4 * var(--u)); }
.game { border: 2.5px solid var(--ink); border-radius: var(--wobble); background: #fff; padding: calc(4 * var(--u)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); }
.game-head { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.game-icon { width: calc(14 * var(--u)); height: auto; flex: none; background: #e9f4fb; border: 2px solid var(--ink); border-radius: 50%; padding: calc(1.6 * var(--u)); box-sizing: content-box; }
.game h4 { margin: 0; font-size: 1.25em; line-height: 1.2; }
.game-tag { margin: 2px 0 0; font-size: 0.82em; color: #6b675e; font-weight: 700; }
.game-intro { margin: calc(3 * var(--u)) 0; }
.arcade-story { margin: calc(3 * var(--u)) 0 0; padding: 10px 14px; background: #fff6c9; border: 2px solid var(--ink); border-radius: var(--wobble-sm); line-height: 1.7; }
.game.soon > span > a { display: block; margin-top: 4px; color: var(--red); font-weight: 800; text-decoration: none; }
.game.feedback { margin-top: calc(4 * var(--u)); }
.game.feedback h4 { margin: 0 0 calc(2 * var(--u)); }
.game.feedback .kicker { margin: 0 0 calc(1.6 * var(--u)); }
.feedback .fb-kinds { margin-bottom: calc(4.6 * var(--u)); }
.feedback .fb-kinds legend { font-size: calc(3.7 * var(--u)); font-weight: 800; margin-bottom: calc(2.2 * var(--u)); }
.feedback .field textarea { margin-top: calc(2.2 * var(--u)); }
.feedback .field + .fine { margin-top: calc(-3 * var(--u)); }
.game-ver { margin: calc(2.4 * var(--u)) 0 0; font-size: 0.82em; color: #6b675e; font-variant-numeric: tabular-nums; }
.log-list { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px dashed #d9d3c3; display: grid; gap: calc(3 * var(--u)); }
.log-list li p { margin: 0; font-size: 0.9em; line-height: 1.6; }
.log-list .log-head { font-size: 0.82em; color: #6b675e; font-variant-numeric: tabular-nums; }
.log-list .log-head b { color: var(--ink); margin-right: 0.4em; }
.arcade-best { font-weight: 800; background: #e8e1f2; border: 2px solid var(--ink); border-radius: var(--wobble-sm); padding: 10px 14px; margin: 0; }
.panel.arcade .btn.wide { margin-top: 10px; }
.game-wall { margin-top: calc(5 * var(--u)); }
.game-wall summary { cursor: pointer; list-style: none; font: 400 calc(4 * var(--u))/1.2 var(--hand); color: var(--red); margin-bottom: calc(2.4 * var(--u)); }
.game-wall summary::-webkit-details-marker { display: none; }
.arcade-wall { border: 2px dashed #d9d3c3; border-radius: 14px; padding: 4px 14px; }
.arcade-wall > p { margin: calc(2.6 * var(--u)) 0; }
.panel.arcade .wall-note { margin: calc(2.6 * var(--u)) 0 0; color: #6b675e; font-size: 0.86em; line-height: 1.6; }
.game.soon { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); border-style: dashed; background: transparent; box-shadow: none; color: #6b675e; font-weight: 800; }
.soon-coin { display: grid; place-items: center; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border: 2px dashed #b9b2a2; border-radius: 50%; font-size: 1.1em; }
.wall-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; }
.wall-list li { display: grid; grid-template-columns: 1.6em 0.9em minmax(0, 1fr) auto; align-items: center; gap: 0.5em; padding: 0.3em 0.2em; border-bottom: 1px dashed #e4dece; font-size: 0.86em; line-height: 1.4; }
.wall-list li:last-child { border-bottom: 0; }
.wall-list li.me { background: #fff6c9; border-radius: 8px; }
.wall-list .rk { text-align: center; font-variant-numeric: tabular-nums; }
.wall-list li:nth-child(-n+3) .rk { color: #c2410c; }
.wall-list .dot { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.wall-list .nm { display: flex; align-items: baseline; gap: 0.35em; min-width: 0; }
.wall-list .nk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 700; }
.wall-list .tag { flex: none; font-size: 11px; font-weight: 600; color: #8a867c; font-variant-numeric: tabular-nums; }
.wall-list .sc { font-weight: 800; font-variant-numeric: tabular-nums; }
.wall-list .lv { color: #6b675e; font-size: 0.8em; }
.panel.arcade .btn.wide { margin-top: 10px; }

/* journal panel (紀錄): a grid of building blocks, one per project (icon, short name, one-line tag, status dot).
   Tapping a block unfolds it across the row (one at a time); the long story and the timeline fold once more inside.
   Status dots: doing = seed, proto = muzzle, explore = citrus, done = sky, paused = stone. */
.jr-lead { margin: 0 0 calc(2.6 * var(--u)); color: var(--ink-soft); line-height: 1.6; }
.jr-lead time { display: block; margin-top: 2px; font: 400 0.82em/1.4 var(--hand); color: #8a857a; }
.jr-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 calc(4 * var(--u)); font-size: 0.78em; color: var(--ink-soft); }
.jr-counts span { display: inline-flex; align-items: center; gap: 5px; }
.jr-counts b { font-family: var(--hand); font-weight: 400; color: var(--ink); }
.jr-dot { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; background: var(--seed); flex: none; }
.is-proto .jr-dot { background: #f3e2c8; }
.is-explore .jr-dot { background: var(--citrus); }
.is-done .jr-dot { background: #a9d3ec; }
.is-paused .jr-dot { background: #d6d0c2; }

.jr-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: calc(3.6 * var(--u)); padding: 2px 4px 6px 2px; }
@media (min-width: 560px) { .jr-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jr-block { --c: var(--dome); background: var(--c); border: var(--line); border-radius: var(--wobble-sm); box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.jr-block:nth-child(3n + 1) { transform: rotate(-0.8deg); }
.jr-block:nth-child(3n + 2) { transform: rotate(0.6deg); }
.jr-block.c-pink { --c: #fde4e5; }
.jr-block.c-kiwi { --c: #e8f4c8; }
.jr-block.c-lilac { --c: #ece4f8; }
.jr-block.c-beam { --c: var(--beam); }
.jr-block.c-dome { --c: var(--dome); }
.jr-block.c-muzzle { --c: #f7ecdc; }
.jr-block > summary { list-style: none; cursor: pointer; position: relative; display: grid; justify-items: center; align-content: start; gap: 2px;
  padding: calc(3.4 * var(--u)) calc(2.4 * var(--u)) calc(3.6 * var(--u)); text-align: center; color: var(--ink); font-weight: 400; font-size: 1em; }
.jr-block > summary::-webkit-details-marker { display: none; }
.jr-block > summary::before, .jr-block[open] > summary::before { content: none; }  /* the street's generic ＋/－ marker */
.jr-art { display: grid; place-items: center; width: calc(17 * var(--u)); height: calc(17 * var(--u)); max-width: 76px; max-height: 76px; margin-bottom: 4px; }
.jr-art img { display: block; width: 100%; height: 100%; }
.jr-block > summary b { font-size: 1em; line-height: 1.3; }
.jr-block > summary small { font-size: 0.74em; line-height: 1.4; color: var(--ink-soft); }
.jr-block > summary .jr-dot { position: absolute; top: 10px; right: 10px; }
.jr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jr-block:not([open]):hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 4px 7px 0 var(--ink); }
.jr-block:not([open]):active { transform: translateY(2px); box-shadow: 1px 2px 0 var(--ink); }
.jr-block > summary:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; border-radius: var(--wobble-sm); }

/* unfolded: the block spans the row, its header turns into a strip, the story sits on white below */
.jr-block[open] { grid-column: 1 / -1; transform: none; box-shadow: 3px 4px 0 var(--ink); }
.jr-block[open] > summary { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 0 12px;
  padding: calc(2.6 * var(--u)) calc(3.4 * var(--u)); }
.jr-block[open] .jr-art { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
.jr-block[open] > summary b { font-size: 1.1em; }
.jr-block[open] > summary b::after { content: " ▴"; font-size: 0.7em; color: var(--ink-soft); }
.jr-open { background: #fff; border-top: 2.5px solid var(--ink); border-radius: 0 0 var(--wobble-sm); padding: calc(3.6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); }
.jr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font-size: 0.76em; color: var(--ink-soft); }
.jr-state { font-weight: 800; color: var(--ink); padding: 1px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--c); }
.jr-open h4 { margin: 0 0 6px; font-size: 1.05em; line-height: 1.4; }
.jr-sum { margin: 0 0 calc(3 * var(--u)); font-size: 0.92em; line-height: 1.65; }
.jr-why { margin: 0 0 calc(3 * var(--u)); padding: calc(2.6 * var(--u)) calc(3.4 * var(--u)); font-size: 0.88em; line-height: 1.65; background: var(--c); border-radius: var(--wobble-sm); }
.jr-why b { display: block; font: 400 1.05em/1.3 var(--hand); color: var(--red); margin-bottom: 4px; }
.jr-why p { margin: 0 0 calc(1.6 * var(--u)); }
.jr-why p:last-child { margin-bottom: 0; }
.jr-next { margin: 0 0 calc(3 * var(--u)); padding: calc(2.2 * var(--u)) calc(3 * var(--u)); font-size: 0.86em; line-height: 1.6; background: var(--beam); border: 2px solid var(--ink); border-radius: var(--wobble-sm); }
.jr-next b { margin-right: 0.5em; }
.jr-go { margin: 0 0 calc(2.4 * var(--u)); }
.jr-sub { border-top: 2px dashed #e4dece; padding-top: calc(2 * var(--u)); margin-top: calc(2 * var(--u)); }
.jr-sub > summary { font-size: 0.86em; color: var(--ink); }
.jr-body { font-size: 0.88em; line-height: 1.7; padding-top: calc(2 * var(--u)); }
.jr-body p, .jr-body ul { margin: 0 0 calc(2.4 * var(--u)); }
.jr-body ul { padding-left: 1.3em; }
.jr-body li::marker { color: var(--seed); }
.jr-body h3 { font-size: 1em; margin: calc(3 * var(--u)) 0 calc(1.4 * var(--u)); }
.jr-log { list-style: none; margin: calc(2 * var(--u)) 0 calc(1 * var(--u)); padding: 0 0 0 14px; border-left: 2px dashed var(--seed); font-size: 0.84em; line-height: 1.6; }
.jr-log li { position: relative; padding: 3px 0; }
.jr-log li::before { content: ""; position: absolute; left: -20px; top: 0.75em; width: 9px; height: 9px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; }
.jr-log time { display: block; font-family: var(--hand); color: var(--ink-soft); }
.jr-history { margin-top: calc(5 * var(--u)); }
.jr-history summary { cursor: pointer; font-weight: 800; font-size: 0.86em; }
@media (prefers-reduced-motion: reduce) { .jr-block, .jr-block:hover, .jr-block:active { transition: none; transform: none; } }

/* ---------- IDEA post: talk with 孔明 (one speech box, answers below; app.js initIdea) ---------- */
.km { display: grid; gap: calc(3.6 * var(--u)); }
.km-stage { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); min-height: calc(36 * var(--u)); }
.km-face { width: calc(36 * var(--u)); max-width: 156px; height: auto; flex: none; overflow: visible; }
.km-echo {
  margin: 0 0 calc(2 * var(--u)) auto; max-width: 62%; padding: calc(2.2 * var(--u)) calc(3.2 * var(--u));
  background: var(--kiwi); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wobble-sm);
  font: 700 calc(3.5 * var(--u))/1.45 var(--sans); white-space: pre-wrap; word-break: break-word;
}
.km-box {
  position: relative; cursor: pointer; min-height: calc(24 * var(--u));
  padding: calc(6 * var(--u)) calc(4.6 * var(--u)) calc(4.4 * var(--u));
  background: var(--paper); border: var(--line); border-radius: var(--wobble);
}
.km-name {
  position: absolute; left: calc(4.4 * var(--u)); top: calc(-3.6 * var(--u)); margin: 0;
  padding: calc(1.4 * var(--u)) calc(3.4 * var(--u)); background: var(--ink); color: #fff; border-radius: 999px;
  font: 800 calc(3.6 * var(--u))/1 var(--display); letter-spacing: 0.08em;
}
.km-lines p { margin: 0 0 calc(2 * var(--u)); font: 500 calc(4.2 * var(--u))/1.7 var(--sans); color: var(--ink); }
.km-lines p:last-child { margin-bottom: 0; }
.km-lines p.typing::after { content: "▌"; color: var(--kiwi-deep); animation: blink 0.8s steps(1) infinite; }
.km-more { position: absolute; right: calc(4 * var(--u)); bottom: calc(2 * var(--u)); font-size: calc(3 * var(--u)); color: var(--kiwi-deep); opacity: 0; }
.km[data-mood="talking"] .km-more { opacity: 1; animation: km-bob 0.9s ease-in-out infinite; }
.km-choices { display: grid; gap: calc(2.8 * var(--u)); }
.km-choices.two { grid-template-columns: 1fr 1fr; }
.km-choices:empty { display: none; }
.km-opt { width: 100%; justify-content: flex-start; text-align: left; line-height: 1.35; }
.km-choices .chips-label { margin: 0 !important; }
.km-choices .field-error { margin: 0 !important; }
.km-choices .fine { margin: 0; }
.km-row { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); justify-content: flex-end; }
.km-choices .stamp-big { margin: calc(1 * var(--u)) auto calc(2 * var(--u)); }
.km-choices .stamp-big + .km-row { justify-content: center; }
.km-bag { padding-top: calc(8 * var(--u)); background: var(--beam);
  box-shadow: inset 0 0 0 calc(1.4 * var(--u)) var(--beam), inset 0 0 0 calc(1.9 * var(--u)) var(--red); }
.km-bag-tag {
  position: absolute; left: 50%; top: calc(-0.6 * var(--u)); translate: -50% 0; margin: 0;
  padding: calc(1.2 * var(--u)) calc(4 * var(--u)); background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 0 0 12px 12px;
  font: 800 calc(3.4 * var(--u))/1 var(--display); letter-spacing: 0.2em;
}
.km-foot { display: flex; justify-content: flex-start; min-height: 1px; }
.km-deep {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--u)) calc(3 * var(--u)); margin: 0;
  padding: calc(3 * var(--u)) calc(3.6 * var(--u)); border: 2px dashed var(--ink-soft); border-radius: var(--wobble-sm);
  font: 600 calc(3.4 * var(--u))/1.5 var(--sans); color: var(--ink);
}
.km-deep .btn { text-decoration: none; }
.km-pop { animation: km-pop 0.28s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes km-pop { from { opacity: 0; transform: translateY(8px); } }
@keyframes km-bob { 50% { transform: translateY(3px); } }
/* moods: talking (mouth and fan move), idle (blinks), happy (smiling eyes, a quicker fan) */
.km-face .km-fan { transform-box: view-box; transform-origin: 118px 140px; }
.km-face .km-eyes { transform-box: fill-box; transform-origin: center; animation: km-blink 4.2s infinite; }
.km-face .km-eyes-happy, .km-face .km-mouth-open { opacity: 0; }
.km[data-mood="talking"] .km-fan { animation: km-fan 1.6s ease-in-out infinite; }
.km[data-mood="talking"] .km-mouth-open { animation: km-talk 0.32s steps(1) infinite; }
.km[data-mood="happy"] .km-eyes { opacity: 0; animation: none; }
.km[data-mood="happy"] .km-eyes-happy { opacity: 1; }
.km[data-mood="happy"] .km-fan { animation: km-fan 0.9s ease-in-out 3; }
@keyframes km-fan { 0%, 100% { rotate: 0deg; } 35% { rotate: -9deg; } 70% { rotate: 5deg; } }
@keyframes km-talk { 50% { opacity: 1; } }
@keyframes km-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) {
  .km-pop, .km-face .km-eyes, .km[data-mood] .km-fan, .km[data-mood] .km-mouth-open, .km[data-mood] .km-more { animation: none; }
}
/* arcade lobby: a game with a cover picture (三小朋友下樓梯) and its beta badge */
.game-cover-link { display: block; margin: 0 0 calc(2.5 * var(--u)); }
.game-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 14px 6px 12px 7px / 7px 12px 6px 14px; }
.game-beta { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--citrus, #f7e27a); font-size: 0.62em; font-weight: 800; }
/* 作品 (works): three shelves — open now, free downloads, prototypes — with chips that jump to each shelf */
.shelf-nav { position: sticky; top: 0; z-index: 2; gap: 8px; margin: calc(3 * var(--u)) 0 0; padding: 8px 0; background: var(--paper); }
.shelf-nav .chip { text-decoration: none; padding: 7px 13px; font-size: clamp(13px, calc(3.3 * var(--u)), 15px); border: 2px solid var(--ink); border-radius: var(--wobble-sm); }
.shelf-nav .chip i { font: 400 1.05em/1 var(--hand); font-style: normal; margin-left: 6px; color: var(--kiwi-deep); }
.shelf-nav .chip:hover { background: var(--beam); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: calc(7 * var(--u)) 0 calc(1 * var(--u)); padding-bottom: 6px; border-bottom: 2.5px dashed var(--ink); scroll-margin-top: 64px; }
.shelf-head b { font-size: calc(5.2 * var(--u)); }
.shelf-head span { font: 500 calc(3.5 * var(--u))/1.4 var(--sans); color: var(--ink-soft); }
.panel.works .machine { margin-top: calc(3 * var(--u)); }
.cabinet.live .cab-meta i { background: var(--kiwi); color: var(--ink); }
/* 認識我們 (品牌 + 故事 + 工坊 in one panel): the long parts fold */
.about .svc-list { display: grid; gap: calc(3 * var(--u)); }
.about .svc h4 { margin: 0 0 4px; font-size: 1.08em; line-height: 1.35; }
.about .svc > p:not(.svc-no) { margin: 0 0 calc(2.4 * var(--u)); font-size: 0.92em; line-height: 1.6; color: var(--ink-soft); }
.about-more { margin: calc(3 * var(--u)) 0 0; border: 2px dashed #cfc8b8; border-radius: var(--wobble-sm); padding: 4px 14px; }
.about-more > summary { cursor: pointer; padding: 8px 0; font: 400 calc(4 * var(--u))/1.2 var(--hand); color: var(--red); }
.about-more[open] > summary { margin-bottom: 4px; }
.idea-contact { margin-top: calc(8 * var(--u)); padding-top: calc(5 * var(--u)); border-top: 2.5px dashed var(--ink); scroll-margin-top: 12px; }
.panel .journal { margin-top: calc(2 * var(--u)); }

/* KiWE好玩遊戲區: one game per row, a block like the 紀錄's; the play button sits on the row */
.game-rows { grid-template-columns: 1fr; gap: calc(3.6 * var(--u)); }
.game-rows > li { position: relative; }
.game-rows .jr-block.game { padding: 0; border-radius: var(--wobble-sm); box-shadow: 3px 4px 0 var(--ink); transform: none; }
.game-rows .jr-block > summary { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 0 14px;
  padding: calc(3 * var(--u)) calc(3.4 * var(--u)); padding-right: 104px; min-height: 64px; }
.game-rows .jr-art { grid-row: span 2; width: 60px; height: 60px; margin: 0; }
.game-rows .jr-art .game-icon { width: 100%; height: 100%; padding: 6px; box-sizing: border-box; }
.game-rows .game-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--ink); border-radius: 12px; }
.game-rows .jr-block > summary b { font-size: 1.08em; }
.game-rows .jr-block > summary small { font-size: 0.8em; }
.game-rows .row-play { position: absolute; top: calc(3 * var(--u) + 10px); right: 14px; z-index: 1; }
.game-rows .jr-block:not([open]):hover { transform: translateY(-2px); }
.game-rows .jr-open .game-ver { margin-top: 0; }
.game-rows .game.soon { padding: calc(3.4 * var(--u)); border-radius: var(--wobble-sm); }
/* top bar (2026-10-19): the clock by the logo without a border; MAP is a button on the right, drawn like the street's CTA */
.sky-clock { margin-left: 0; border: 0; }
.hud-map { margin-left: auto; display: inline-flex; align-items: center; gap: calc(1.4 * var(--u)); height: calc(10 * var(--u)); min-height: 36px; box-sizing: border-box;
  padding: 0 calc(3.6 * var(--u)) 0 calc(2.8 * var(--u)); background: var(--kiwi); color: var(--ink); border: var(--line); border-radius: var(--wobble-sm);
  box-shadow: 2px 3px 0 var(--ink); font: 800 clamp(14px, calc(4.4 * var(--u)), 24px)/1 var(--display); white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hud-map::before { content: none; }
.hud-map .map-ico { flex: none; width: clamp(17px, calc(5.2 * var(--u)), 28px); height: auto; aspect-ratio: 1; }
.hud-map .map-word { font: 400 1em/1 var(--hand); letter-spacing: 0.02em; margin-right: 2px; }
.hud-map:hover { transform: translateY(-1px); box-shadow: 3px 4px 0 var(--ink); }
.hud-map:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.stage.is-night .hud-map { box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(185, 220, 99, 0.45); }
.hud-map + .hud-me { margin-left: 0; }
@media (max-width: 420px) { .hud-map { height: 34px; min-height: 34px; padding: 0 10px; gap: 4px; font-size: 14px; } .hud-map .map-ico { display: none; } }
/* 洋流 ribbon left of MAP (until 2026-11-26): 20px tall, 18px on phones, no frame */
.hud-yl { margin-left: auto; flex: none; display: block; line-height: 0; border-radius: 2px; }
.hud-yl img { display: block; height: 20px; width: auto; border-radius: 2px; }
.hud-yl:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }
.hud-yl + .hud-map { margin-left: 0; }
@media (max-width: 420px) { .hud-yl img { height: 18px; } }
/* 欣潮 ribbon right of 洋流 (左流右欣): same size, a little closer to its partner */
.hud-xc { flex: none; display: block; line-height: 0; border-radius: 2px; margin-left: -4px; }
.hud-xc img { display: block; height: 20px; width: auto; border-radius: 2px; }
.hud-xc:focus-visible { outline: 3px solid var(--seed); outline-offset: 3px; }
.hud-xc + .hud-map { margin-left: 0; }
@media (max-width: 420px) { .hud-xc img { height: 18px; } .hud-xc { margin-left: -2px; } }
/* the clock sits under the logo with no background (2026-10-19): text only, readable on day and night skies */
.hud .sky-clock { position: absolute; left: 2px; top: calc(100% + 6px); min-height: 0; padding: 0 2px; gap: 5px;
  background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink); text-shadow: 0 0 6px rgba(255, 253, 247, 0.9), 0 0 2px rgba(255, 253, 247, 0.9); }
.stage.is-night .hud .sky-clock { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff3c4; text-shadow: 0 0 6px rgba(17, 25, 54, 0.95), 0 0 2px rgba(17, 25, 54, 0.95); }
@media (max-width: 420px) { .hud .sky-clock .ico, .hud .sky-clock .temp:not(:empty) { display: inline; } }   /* room for the icon and temperature again under the logo */
/* one item per row everywhere (2026-10-19): 作品, 紀錄, 工坊, 遊戲區 and the 點子櫥窗 are strips — art, name, one line;
   tap to unfold, and only one opens at a time in each list (details[name], app.js keeps older browsers to it) */
.row-blocks { display: grid; grid-template-columns: 1fr; gap: calc(3.2 * var(--u)); margin: calc(3 * var(--u)) 0 0; }
.jr-blocks { grid-template-columns: 1fr; gap: calc(3.2 * var(--u)); }
@media (min-width: 560px) { .jr-blocks { grid-template-columns: 1fr; } }
.jr-blocks .jr-block, .row-blocks .jr-block { transform: none; }
.jr-blocks .jr-block > summary, .row-blocks .jr-block > summary {
  grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 0 14px;
  padding: calc(2.8 * var(--u)) calc(3.4 * var(--u)); padding-right: 36px; }
.jr-blocks .jr-art, .row-blocks .jr-art { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
.jr-blocks .jr-block > summary b, .row-blocks .jr-block > summary b { font-size: 1.05em; }
.jr-blocks .jr-block:not([open]) > summary b::after, .row-blocks .jr-block:not([open]) > summary b::after { content: " ▾"; font-size: 0.7em; color: var(--ink-soft); }
.jr-blocks .jr-block:not([open]):hover, .row-blocks .jr-block:not([open]):hover { transform: translateY(-2px); }
/* 作品 rows: a screenshot thumbnail, the badge beside the name; the card unfolds below */
.row-blocks .work-thumb { width: 84px; height: 56px; }
.row-blocks .work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); }
.row-badge { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); font: 400 0.68em/1.3 var(--hand); font-style: normal; }
.jr-open.cabinet { margin: 0; padding: calc(3.6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); border: 0; border-top: 2.5px solid var(--ink); border-radius: 0 0 var(--wobble-sm); box-shadow: none; }
.jr-open.cabinet .screen { margin-top: 0; }
/* 工坊 rows have no picture */
.row-blocks .svc-row > summary { grid-template-columns: minmax(0, 1fr); }
.row-blocks .svc-row .jr-open p { margin-top: 0; }
/* 點子櫥窗: the tiles become rows (art on the left), still one open at a time */
.idea-list { grid-template-columns: 1fr; gap: calc(3 * var(--u)); }
.idea-card .tile, .idea-card.open .tile { grid-template-columns: calc(17 * var(--u)) 1fr; align-items: center; }
.idea-card .tile .item-stage { border-bottom: 0; border-right: var(--line); }
.idea-card .tile-title, .idea-card.open .tile-title { -webkit-line-clamp: 2; font-size: clamp(15px, calc(4 * var(--u)), 19px); min-height: 0; }
.post.featured { background: var(--beam); }   /* a page outside the street, first in the 報刊亭 (build.py FEATURES) */

/* ---------- panel typography and rhythm (2026-10-20): one scale for every stop's sheet ----------
   kicker 14–16px hand · panel title 22–28px · section title 19–23px · body 15.5–17.5px · small 13–14px
   spacing steps: 8 · 12 · 16 · 24 · 36 px (scaled with --u where the sheet grows) */
.sheet-body .panel { font-size: clamp(15.5px, calc(4.1 * var(--u)), 17.5px); line-height: 1.75; }
.sheet-body .panel p { margin: 0 0 calc(3.6 * var(--u)); }
.sheet-body .panel .kicker { font-size: clamp(14px, calc(3.8 * var(--u)), 16px); margin: 0 0 calc(2.2 * var(--u)); }
.sheet-body .panel > h3, .sheet-body .panel .quest > h3, .sheet-body .panel .game.feedback h4 {
  font-size: clamp(22px, calc(6.2 * var(--u)), 28px); line-height: 1.35; margin: 0 0 calc(3.2 * var(--u)); }
.sheet-body .panel > .kicker + p, .sheet-body .panel > h3 + p { color: var(--ink-soft); }
.sheet-body .panel .fine { font-size: clamp(13px, calc(3.4 * var(--u)), 14.5px); line-height: 1.65; color: var(--ink-soft); }
.sheet-body .panel ul, .sheet-body .panel ol { margin-top: 0; }
.sheet-body .panel li { margin-bottom: calc(1.4 * var(--u)); }

/* section titles inside a sheet (作品 shelves, 紀錄, 我們的故事, 接案工坊): air above, a clear line below */
.sheet-body .shelf-head { margin: calc(9 * var(--u)) 0 calc(3.6 * var(--u)); padding-bottom: calc(2 * var(--u)); gap: 4px 12px; line-height: 1.3; }
.sheet-body .shelf-head b { font-size: clamp(19px, calc(5.4 * var(--u)), 23px); }
.sheet-body .shelf-head span { font-size: clamp(13.5px, calc(3.6 * var(--u)), 15px); }
.sheet-body .shelf-nav + .shelf-head { margin-top: calc(5 * var(--u)); }
.sheet-body .shelf-head + p { margin-top: 0; }

/* the shelf chips stay on top while scrolling and cover the sheet's top padding too (nothing shows through above them) */
.sheet-body .shelf-nav { padding: 10px 0; margin: calc(4 * var(--u)) 0 0; box-shadow: 0 calc(-5 * var(--u) - 1px) 0 0 var(--paper), 0 6px 8px -8px rgba(28, 28, 28, 0.35); }
.sheet-body .works .shelf-head, .sheet-body .works .jr-block { scroll-margin-top: 70px; }

/* rows: the same gap everywhere, room around the unfolded card */
.sheet-body .row-blocks, .sheet-body .jr-blocks { gap: calc(3.4 * var(--u)); margin-top: calc(3.6 * var(--u)); }
.sheet-body .jr-block > summary small { margin-top: 2px; line-height: 1.45; }
.sheet-body .jr-blocks .jr-block:not([open]) > summary b::after, .sheet-body .row-blocks .jr-block:not([open]) > summary b::after { margin-left: 4px; }
.sheet-body .jr-open { padding: calc(4.2 * var(--u)) calc(4.4 * var(--u)) calc(4.6 * var(--u)); }
.sheet-body .jr-open > p:last-child, .sheet-body .jr-open > .row:last-child { margin-bottom: 0; }
.sheet-body .jr-open ul { padding-left: 1.3em; margin-bottom: calc(3.6 * var(--u)); }
.sheet-body .jr-open .fine { margin: 0 0 calc(3.6 * var(--u)); }
.sheet-body .jr-open .cab-meta { margin: 0 0 calc(2.4 * var(--u)); }
.sheet-body .jr-open .screen { margin-bottom: calc(4 * var(--u)); }

/* button rows: never touching, wrap neatly */
.sheet-body .panel .row { display: flex; flex-wrap: wrap; gap: 10px; margin: calc(4 * var(--u)) 0 0; }
.sheet-body .panel .row .btn { margin: 0; }

/* end-of-sheet call to action and folds */
.sheet-body .cta-box { margin: calc(9 * var(--u)) 0 calc(1 * var(--u)); padding: calc(5 * var(--u)); gap: calc(2.8 * var(--u)); }
.sheet-body .cta-box span { line-height: 1.65; }
.sheet-body .about-more { margin: calc(4 * var(--u)) 0 0; padding: 4px 16px; }
.sheet-body .about-more[open] { padding-bottom: 14px; }
.sheet-body .tags.wide { margin: calc(1 * var(--u)) 0 calc(3 * var(--u)); gap: 8px; }

/* 寫訊息 under 孔明: a clear break, then the form */
.sheet-body .idea-contact { margin-top: calc(11 * var(--u)); padding-top: calc(8 * var(--u)); }
.sheet-body .contact-form .field { margin-bottom: calc(5 * var(--u)); }
.sheet-body .contact-form fieldset { margin: 0 0 calc(5 * var(--u)); }

/* 報刊亭 cards and the 點子櫥窗 */
.sheet-body .post-list { display: grid; gap: calc(4 * var(--u)); margin-top: calc(4 * var(--u)); }
.sheet-body .post { padding: calc(4.4 * var(--u)); }
.sheet-body .post h3 { font-size: clamp(18px, calc(5 * var(--u)), 21px); line-height: 1.4; margin: calc(1.6 * var(--u)) 0 calc(2 * var(--u)); }
.sheet-body .post > p:not(.post-meta) { color: var(--ink-soft); }
.sheet-body .idea-card.open .idea-body { padding: calc(4.4 * var(--u)); }
.sheet-body .idea-body dt { margin-top: calc(3 * var(--u)); font-weight: 800; }
.sheet-body .idea-body dd { margin: 4px 0 0; color: var(--ink-soft); }

/* KiWE好玩遊戲區 (spacing and type only; the lobby's structure belongs to the 遊戲間 PM) */
.sheet-body .game-rows { margin-top: calc(4 * var(--u)); }
.sheet-body .game-rows .jr-open > * + * { margin-top: calc(3.4 * var(--u)); }
.sheet-body .game-rows .jr-open .btn.wide { margin-top: calc(3 * var(--u)); }
.sheet-body .arcade-story { margin: calc(6 * var(--u)) 0 0; padding: 14px 16px; }
/* the stuck shelf chips on iPhone Safari (2026-10-20): the rows (details with transitions) were painted over the bar and their
   frames showed through. The bar now gets its own layer above them and runs edge to edge of the sheet, covering the top padding. */
.sheet-body .shelf-nav {
  z-index: 6; -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate;
  margin-left: calc(-4.6 * var(--u)); margin-right: calc(-4.6 * var(--u)); padding: 10px calc(4.6 * var(--u));
  background: var(--paper); border-bottom: 1.5px solid #e4ded0;
  box-shadow: 0 calc(-5 * var(--u) - 2px) 0 0 var(--paper), 0 8px 10px -10px rgba(28, 28, 28, 0.35);
}
.sheet-body .works .row-blocks .jr-block { position: relative; z-index: 0; }
/* 2026 政見看板: a city mark instead of a picture on each candidate row */
.row-blocks .vote-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 2.5px solid var(--ink); border-radius: 50%;
  background: #fff; font: 900 22px/1 var(--display); color: var(--ink); }
.vote-axis b { display: block; margin-bottom: 4px; font-size: 0.86em; color: var(--ink-soft); }
.vote-src { margin-top: calc(4 * var(--u)); }