/* KAM TRAVEL — K·A·M LOOK (THEME × MODE), after K·A·M RIDE and K·A·M Notch.
   Theme tokens are set on :root by look.js: --bezel --bezel-ink --screen --ink --ink2 --label --accent
   --lead --text, plus house accents --h-green/cyan/amber/purple/pink/blue/orange/red.
   Modes switch on :root[data-mode]: pixel | kam | digital | ios | gameboy. */

:root {
  /* defaults = K·A·M ORANGE before JS runs */
  --bezel: #0B1830; --bezel-ink: #FF7700; --screen: #04080F; --ink: #FF8A1F; --ink2: #00FF88; --label: #4A6888; --accent: #FFCC00;
  --lead: #FF7700; --text: #C0D8F0;
  --h-green: #00FF88; --h-cyan: #00D4FF; --h-amber: #FFCC00; --h-purple: #AA66FF; --h-pink: #FF66CC; --h-blue: #3388FF; --h-orange: #FF7700; --h-red: #FF3355;

  --panel: color-mix(in srgb, var(--screen) 90%, var(--label));
  --raised: color-mix(in srgb, var(--screen) 82%, var(--label));
  --input: color-mix(in srgb, var(--screen) 75%, #000);
  --line: color-mix(in srgb, var(--label) 55%, transparent);
  --line-faint: color-mix(in srgb, var(--label) 22%, transparent);
  --muted: color-mix(in srgb, var(--label) 55%, var(--text));
  --on-lead: var(--screen);
  --screen-edge: color-mix(in srgb, var(--bezel-ink) 35%, transparent);

  /* legacy aliases used inline by views */
  --accent-hi: var(--lead); --accent-fill: color-mix(in srgb, var(--lead) 12%, transparent); --accent-line: color-mix(in srgb, var(--lead) 55%, transparent);
  --bg: var(--screen); --bg-deep: var(--screen); --well: var(--input); --line-panel: var(--line); --line-input: var(--line);
  --text-2: color-mix(in srgb, var(--text) 88%, var(--screen)); --body: color-mix(in srgb, var(--text) 78%, var(--screen)); --dim: var(--label);
  --ok: var(--h-green); --warn: var(--h-amber); --danger: var(--h-red); --info: var(--h-cyan); --purple: var(--h-purple);

  /* mode tokens (pixel defaults) */
  --f-ui: 'Silkscreen', 'IBM Plex Mono', monospace; --f-head: 'Press Start 2P', 'Silkscreen', monospace; --f-num: 'Press Start 2P', monospace;
  --f-body: 'Silkscreen', 'IBM Plex Mono', monospace;
  --bw: 3px; --r: 0px; --r-btn: 0px; --r-chip: 0px; --case: uppercase; --track: .5px; --fs-body: 15px;
  --nav-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
:root[data-mode="kam"] {
  --f-ui: 'IBM Plex Mono', monospace; --f-head: 'IBM Plex Mono', monospace; --f-num: 'Bebas Neue', 'IBM Plex Mono', monospace; --f-body: 'IBM Plex Mono', monospace;
  --bw: 1px; --track: 1px; --fs-body: 14.5px;
}
:root[data-mode="digital"] {
  --f-ui: 'IBM Plex Mono', monospace; --f-head: 'IBM Plex Mono', monospace; --f-num: 'IBM Plex Mono', monospace; --f-body: 'IBM Plex Mono', monospace;
  --bw: 1px; --r: 6px; --r-btn: 6px; --r-chip: 6px; --track: 1.5px; --fs-body: 14px;
}
:root[data-mode="ios"] {
  --f-ui: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; --f-head: -apple-system, system-ui, Roboto, sans-serif; --f-num: -apple-system, system-ui, Roboto, sans-serif; --f-body: -apple-system, system-ui, Roboto, sans-serif;
  --bw: 0px; --r: 18px; --r-btn: 14px; --r-chip: 999px; --case: none; --track: 0; --fs-body: 16px;
  --panel: color-mix(in srgb, var(--screen) 88%, var(--text)); --raised: color-mix(in srgb, var(--screen) 80%, var(--text)); --input: color-mix(in srgb, var(--screen) 84%, var(--text));
  --line-faint: color-mix(in srgb, var(--text) 10%, transparent); --line: color-mix(in srgb, var(--text) 16%, transparent);
}
:root[data-mode="gameboy"] { --bw: 3px; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100dvh; overflow: hidden; background: var(--bezel); }
body { font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.45; color: var(--text); padding-top: var(--safe-t); -webkit-font-smoothing: antialiased; }
:root[data-mode="pixel"] body, :root[data-mode="gameboy"] body { -webkit-font-smoothing: none; }
a { color: var(--lead); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--lead) 40%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: var(--label); }
#app { height: 100%; display: flex; flex-direction: column; align-items: center; }

/* scanlines (RIDE: 3 px every 8 px) + LCD dot grid for GAME BOY */
#scan { position: fixed; inset: 0; pointer-events: none; z-index: 999; display: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, color-mix(in srgb, var(--screen) 35%, transparent) 5px 8px); opacity: .5; }
:root[data-mode="pixel"]:not([data-fx="0"]) #scan, :root[data-mode="kam"]:not([data-fx="0"]) #scan { display: block; }
:root[data-mode="kam"] #scan { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.08) 3px 4px); opacity: 1; }
:root[data-mode="gameboy"]:not([data-fx="0"]) #scan { display: block; opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--screen) 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, var(--screen) 3px 4px); }

/* type */
.lbl, .k, .sh, .tag, .chip, .seg button, .tab, .btn { text-transform: var(--case); letter-spacing: var(--track); }
.lbl { font-family: var(--f-ui); font-size: 12px; color: var(--muted); }
.h1 { font-family: var(--f-head); font-size: 20px; line-height: 1.3; color: var(--ink); font-weight: 700; }
.h2 { font-family: var(--f-ui); font-size: 16px; line-height: 1.3; color: var(--text); font-weight: 700; }
.sub { font-family: var(--f-ui); font-size: 13px; color: var(--muted); }
.txt { font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.5; color: var(--body); }
.big { font-family: var(--f-num); color: var(--ink); line-height: 1; font-size: 44px; }
.num { font-variant-numeric: tabular-nums; }
:root[data-mode="pixel"] .h1, :root[data-mode="gameboy"] .h1 { font-size: 15px; line-height: 1.6; text-transform: uppercase; }
:root[data-mode="pixel"] .big, :root[data-mode="gameboy"] .big { font-size: 34px; line-height: 1.15; }
:root[data-mode="kam"] .big { font-size: 60px; letter-spacing: 2px; text-shadow: 0 0 14px color-mix(in srgb, var(--ink) 45%, transparent); }
:root[data-mode="kam"] .h1 { text-transform: uppercase; letter-spacing: 1px; }
:root[data-mode="digital"] .big { font-weight: 300; font-size: 48px; letter-spacing: 2px; text-shadow: 0 0 10px color-mix(in srgb, var(--ink) 70%, transparent); }
:root[data-mode="digital"] .h1, :root[data-mode="digital"] .h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; }
:root[data-mode="digital"] .txt { font-weight: 300; }
:root[data-mode="ios"] .big { font-weight: 800; font-size: 52px; letter-spacing: -1.5px; }
:root[data-mode="ios"] .h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
:root[data-mode="ios"] .h2 { font-size: 17px; font-weight: 600; }
:root[data-mode="ios"] .lbl, :root[data-mode="ios"] .sh { font-size: 13px; font-weight: 600; }
.c-ok { color: var(--ok) } .c-warn { color: var(--warn) } .c-bad { color: var(--danger) } .c-acc { color: var(--lead) } .c-info { color: var(--info) } .c-mut { color: var(--muted) }
.blink { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0 } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes slideIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes slideUp { from { transform: translateY(100%) } to { transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* icons */
.i { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }
.ipx { fill: currentColor; }
.ivec { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-mode="digital"] .ivec { stroke-width: 1.4; }
:root[data-mode="ios"] .ivec { stroke-width: 2.3; }
.iascii { width: auto; min-width: 1em; text-align: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; line-height: 1; vertical-align: 0; }

/* ═══ FRAME: the device — bezel (hardware) around a screen, as in RIDE ═══ */
.app { position: relative; width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; background: var(--bezel); min-height: 0; }
.app > .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--screen);
  margin: 0 8px; border: var(--bw) solid var(--screen-edge); position: relative; }
:root[data-mode="ios"] .app { background: var(--screen); }
:root[data-mode="ios"] .app > .scroll { margin: 0; border: 0; }
:root[data-mode="gameboy"] .app > .scroll { margin: 0 12px; border: 4px solid var(--label); box-shadow: 0 0 0 6px var(--bezel), inset 0 0 0 2px var(--screen); }
.page { padding: 14px 14px 104px; animation: slideIn .16s ease-out; }

/* app bar — on the bezel */
.appbar { height: 58px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px 0 8px; background: var(--bezel); color: var(--text); }
.appbar .mark { font-family: var(--f-head); font-size: 13px; color: var(--bezel-ink); padding: 0 8px; cursor: pointer; white-space: nowrap; height: 44px; display: flex; align-items: center; }
:root[data-mode="kam"] .appbar .mark { font-family: 'Bebas Neue', var(--f-head); font-size: 22px; letter-spacing: 3px; text-shadow: 0 0 10px color-mix(in srgb, var(--bezel-ink) 55%, transparent); }
:root[data-mode="digital"] .appbar .mark { font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 8px var(--bezel-ink); }
:root[data-mode="ios"] .appbar .mark { font-weight: 800; font-size: 15px; letter-spacing: .5px; color: var(--lead); }
.appbar .ttl { flex: 1; min-width: 0; }
.appbar .ttl b { display: block; font-family: var(--f-head); font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; text-transform: var(--case); }
:root[data-mode="pixel"] .appbar .ttl b, :root[data-mode="gameboy"] .appbar .ttl b { font-size: 11px; line-height: 1.7; }
:root[data-mode="kam"] .appbar .ttl b::after { content: '▌'; color: var(--lead); animation: blink 1s step-start infinite; margin-left: 2px; }
:root[data-mode="ios"] .appbar .ttl b { font-size: 17px; font-weight: 700; }
.appbar .ttl small { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: var(--track); text-transform: var(--case); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); padding: 0 4px; font-family: var(--f-ui); }
.dot { width: 8px; height: 8px; background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: pulse 2s infinite; flex: none; }
:root:not([data-mode="pixel"]):not([data-mode="gameboy"]) .dot { border-radius: 50%; }
.dot.off { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: none; }
.ib { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); font-size: 20px; cursor: pointer; }
.ib.acc { color: var(--lead); }

/* ticker (kam-v1 Ticker, COMMAND peer ticker) */
.ticker { flex: none; height: 26px; overflow: hidden; background: var(--bezel); border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); margin: 0 8px; }
.ticker .run { display: inline-flex; white-space: nowrap; animation: marquee 40s linear infinite; font-family: var(--f-ui); font-size: 11px; line-height: 24px; color: var(--muted); letter-spacing: var(--track); text-transform: var(--case); }
.ticker .run span { padding: 0 18px; } .ticker .run b { color: var(--lead); font-weight: 700; }
:root[data-mode="ios"] .ticker { display: none; }

/* bottom nav — on the bezel; on K·A·M themes each control takes its own house accent */
.tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 8px calc(8px + var(--safe-b)); background: var(--bezel); }
.tab { height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  background: var(--screen); border: var(--bw) solid color-mix(in srgb, var(--hc) 35%, transparent); color: color-mix(in srgb, var(--hc) 70%, var(--label));
  font-family: var(--f-ui); font-size: 10px; border-radius: var(--r-btn); --hc: var(--label); }
.tab .i { font-size: 20px; }
.tab[data-v="today"] { --hc: var(--h-green); } .tab[data-v="plan"] { --hc: var(--h-cyan); } .tab[data-v="map"] { --hc: var(--h-blue); }
.tab[data-v="decide"] { --hc: var(--h-amber); } .tab[data-v="guide"] { --hc: var(--h-purple); }
.tab.on { background: var(--hc); color: var(--screen); border-color: var(--hc); }
:root[data-mode="pixel"] .tab, :root[data-mode="gameboy"] .tab { font-size: 9px; box-shadow: 0 4px 0 color-mix(in srgb, var(--hc) 30%, #000); }
:root[data-mode="pixel"] .tab.on, :root[data-mode="gameboy"] .tab.on { transform: translateY(4px); box-shadow: none; }
:root[data-mode="kam"] .tab { border-width: 1px; }
:root[data-mode="kam"] .tab.on { background: color-mix(in srgb, var(--hc) 14%, var(--screen)); color: var(--hc); box-shadow: inset 0 2px 0 var(--hc); }
:root[data-mode="digital"] .tab.on { background: transparent; color: var(--hc); border-color: var(--hc); box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 50%, transparent), inset 0 0 8px color-mix(in srgb, var(--hc) 25%, transparent); text-shadow: 0 0 6px var(--hc); }
:root[data-mode="ios"] .tabs { gap: 0; padding: 4px 4px calc(4px + var(--safe-b)); background: color-mix(in srgb, var(--screen) 82%, transparent); backdrop-filter: blur(20px); border-top: 1px solid var(--line-faint); }
:root[data-mode="ios"] .tab { background: none; border: 0; text-transform: none; font-size: 10.5px; font-weight: 600; color: var(--label); height: 52px; }
:root[data-mode="ios"] .tab .i { font-size: 24px; }
:root[data-mode="ios"] .tab.on { background: none; color: var(--hc); }
.tab:active, .btn:active, .tile:active, .chip:active, .li:active { transform: translateY(2px); }

/* ═══ COMPONENTS ═══ */
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 24px 0 8px; font-family: var(--f-ui); font-size: 12px; color: var(--label); }
.sh > span:first-child::before { content: '▶ '; color: var(--lead); }
:root[data-mode="kam"] .sh > span:first-child::before { content: '> '; }
:root[data-mode="digital"] .sh > span:first-child::before { content: '— '; }
:root[data-mode="ios"] .sh > span:first-child::before { content: none; }
:root[data-mode="ios"] .sh { color: var(--muted); text-transform: none; font-size: 13px; }
.sh button, .sh a { font: inherit; color: var(--lead); background: none; border: 0; cursor: pointer; }

.panel, .hero, .list, .tile, .dcard, .well, .empty { border-radius: var(--r); }
.panel { background: var(--panel); border: var(--bw) solid var(--line); padding: 12px 14px; margin-bottom: 8px; }
.panel.picked { border-color: var(--lead); box-shadow: inset 4px 0 0 var(--lead); }
.panel.dim { opacity: .5; }
.well { background: var(--input); border: var(--bw) solid var(--line-faint); padding: 10px 12px; }
.empty { background: var(--input); border: var(--bw) dashed var(--line); color: var(--muted); font-family: var(--f-ui); font-size: 13px; padding: 20px; text-align: center; }
:root[data-mode="ios"] .panel, :root[data-mode="ios"] .list, :root[data-mode="ios"] .tile, :root[data-mode="ios"] .dcard, :root[data-mode="ios"] .well { border: 0; }
:root[data-mode="digital"] .panel, :root[data-mode="digital"] .list, :root[data-mode="digital"] .tile, :root[data-mode="digital"] .dcard { background: transparent; }

/* hero */
.hero { position: relative; background: var(--panel); border: var(--bw) solid var(--lead); padding: 16px; overflow: hidden; }
.hero .k { font-family: var(--f-ui); font-size: 11.5px; color: var(--label); }
.hero .big { margin: 12px 0 6px; }
.hero .s { font-family: var(--f-body); font-size: 14px; color: var(--text); }
.hero .meter { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-size: 11px; color: var(--label); }
.hero .meter > :last-child { flex: 1; }
:root[data-mode="pixel"] .hero, :root[data-mode="gameboy"] .hero { box-shadow: 6px 6px 0 color-mix(in srgb, var(--lead) 30%, #000); margin-right: 6px; }
:root[data-mode="kam"] .hero { border-width: 1px; border-top-width: 2px; }
:root[data-mode="kam"] .hero::before, :root[data-mode="kam"] .hero::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--lead); }
:root[data-mode="kam"] .hero::before { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
:root[data-mode="kam"] .hero::after { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
:root[data-mode="digital"] .hero { background: transparent; border-width: 1px; box-shadow: 0 0 18px color-mix(in srgb, var(--lead) 18%, transparent), inset 0 0 24px color-mix(in srgb, var(--lead) 8%, transparent); }
:root[data-mode="ios"] .hero { border: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--lead) 32%, var(--panel)), var(--panel) 70%); padding: 20px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tiles.three { grid-template-columns: 1fr 1fr 1fr; }
.tile { --tc: var(--lead); position: relative; background: var(--panel); border: var(--bw) solid var(--line); padding: 10px 12px 10px 16px; min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; color: inherit; width: 100%; }
.tile > span { display: block; }
.tile .k { font-family: var(--f-ui); font-size: 11px; color: var(--label); }
.tile .v { font-family: var(--f-num); font-size: 30px; color: var(--tc); line-height: 1.1; }
.tile .v.sm { font-family: var(--f-ui); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.tile.warn { --tc: var(--warn); } .tile.bad { --tc: var(--danger); } .tile.ok { --tc: var(--ok); } .tile.acc { --tc: var(--lead); }
.tile.info { --tc: var(--info); } .tile.pur { --tc: var(--purple); }
.tile::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
:root[data-mode="pixel"] .tile .v, :root[data-mode="gameboy"] .tile .v { font-size: 20px; line-height: 1.3; }
:root[data-mode="pixel"] .tile, :root[data-mode="gameboy"] .tile { box-shadow: 4px 4px 0 #0008; }
:root[data-mode="pixel"] .tile::after, :root[data-mode="gameboy"] .tile::after { width: 6px; }
:root[data-mode="kam"] .tile .v { font-size: 40px; letter-spacing: 1px; }
:root[data-mode="digital"] .tile .v { font-weight: 300; text-shadow: 0 0 8px var(--tc); }
:root[data-mode="digital"] .tile::after { width: 1px; box-shadow: 0 0 6px var(--tc); }
:root[data-mode="ios"] .tile { padding-left: 14px; }
:root[data-mode="ios"] .tile::after { display: none; }
:root[data-mode="ios"] .tile .v { font-weight: 800; letter-spacing: -.5px; font-size: 32px; }
:root[data-mode="ios"] .tile .k { text-transform: none; font-size: 13px; font-weight: 600; color: var(--muted); }

/* progress bars */
.bar-cells { display: flex; gap: 2px; height: 12px; width: 100%; }
.bar-cells i { flex: 1; background: color-mix(in srgb, var(--label) 30%, transparent); }
.bar-cells i.on { background: var(--h-cyan); } .bar-cells i.head { background: var(--h-green); }
.bar-ascii { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--label); white-space: nowrap; letter-spacing: -.5px; }
.bar-ascii b { color: var(--h-cyan); font-weight: 400; }
.bar-ticks { position: relative; display: block; height: 12px; width: 100%; background: linear-gradient(var(--line), var(--line)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%) 0 100%/100% 5px no-repeat; }
.bar-ticks .fill { position: absolute; left: 0; top: 5px; height: 2px; background: var(--h-cyan); box-shadow: 0 0 6px var(--h-cyan); }
.bar-ticks .head { position: absolute; top: 0; width: 2px; height: 12px; margin-left: -1px; background: var(--h-green); box-shadow: 0 0 6px var(--h-green); }
.bar-cap { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.bar-cap span { display: block; height: 100%; background: var(--lead); border-radius: 99px; }

/* ask bar */
.askbar { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; margin-top: 10px; background: var(--input); cursor: pointer; text-align: left;
  border: var(--bw) solid var(--h-purple); color: var(--muted); font-family: var(--f-ui); font-size: 14px; border-radius: var(--r-btn); }
.askbar .i { color: var(--h-purple); font-size: 18px; }
:root[data-mode="kam"] .askbar::after { content: '▌'; color: var(--h-purple); animation: blink 1s step-start infinite; }
:root[data-mode="ios"] .askbar { border: 0; background: var(--raised); border-radius: 14px; }

/* rails */
.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 14px 10px; margin: 0 -14px; scrollbar-width: none; scroll-padding: 0 14px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }
.dcard { width: 68vw; max-width: 290px; min-height: 158px; background: var(--panel); border: var(--bw) solid var(--line); padding: 12px; text-align: left; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; gap: 6px; }
.dcard.on { border-color: var(--lead); background: color-mix(in srgb, var(--lead) 8%, var(--panel)); }
.dcard .dn { font-family: var(--f-num); font-size: 30px; line-height: 1; color: var(--ink); }
.dcard .dw { font-family: var(--f-ui); font-size: 11px; color: var(--label); text-transform: var(--case); letter-spacing: var(--track); }
.dcard .t2 { font-family: var(--f-ui); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcard .s { font-family: var(--f-ui); font-size: 12.5px; color: var(--muted); margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode="pixel"] .dcard .dn, :root[data-mode="gameboy"] .dcard .dn { font-size: 22px; }
:root[data-mode="pixel"] .dcard.on { box-shadow: 5px 5px 0 color-mix(in srgb, var(--lead) 35%, #000); }
.ocard { width: 86vw; max-width: 440px; align-self: flex-start; }
.ocard > .panel { margin: 0; }

/* date strip */
.dstrip { position: sticky; top: 0; z-index: 5; background: var(--screen); border-bottom: var(--bw) solid var(--line); margin: -14px -14px 14px; padding: 10px 14px; }
.dstrip .rail { padding-top: 0; padding-bottom: 4px; gap: 6px; }
.dp { width: 52px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--input); border: var(--bw) solid var(--line);
  color: var(--label); cursor: pointer; border-radius: var(--r-btn); font-family: var(--f-ui); }
.dp .n { font-family: var(--f-num); font-size: 22px; line-height: 1; color: var(--text); }
.dp .w { font-size: 10px; letter-spacing: 1px; }
.dp.on { border-color: var(--h-cyan); background: var(--h-cyan); color: var(--screen); }
.dp.on .n { color: var(--screen); }
.dp.today:not(.on) { border-color: var(--h-green); }
.dp .pip { width: 6px; height: 6px; background: var(--warn); }
.dp .pip.ok { background: var(--ok); } .dp.on .pip { background: var(--screen); }
:root[data-mode="pixel"] .dp .n, :root[data-mode="gameboy"] .dp .n { font-size: 16px; }
:root[data-mode="ios"] .dp { border: 0; background: var(--raised); }

/* list rows */
.list { background: var(--panel); border: var(--bw) solid var(--line); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line-faint); cursor: pointer; width: 100%;
  background: none; color: inherit; text-align: left; font-family: var(--f-ui); }
.li:last-child { border-bottom: 0; }
.li:active { background: color-mix(in srgb, var(--lead) 10%, transparent); }
.li .ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: var(--bw) solid var(--line); font-size: 18px; color: var(--text); border-radius: calc(var(--r) * .6); }
.li .bd, .li .t, .li .s { display: block; }
.li .bd { flex: 1; min-width: 0; }
.li .t { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.li .s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-family: var(--f-body); }
.li .s.wrap { white-space: normal; }
.li .m { flex: none; text-align: right; font-size: 13px; color: var(--lead); }
.li .chev { flex: none; color: var(--label); font-size: 14px; }
.li.static { cursor: default; } .li.static:active { background: none; transform: none; }
:root[data-mode="ios"] .li .ic { border: 0; background: color-mix(in srgb, currentColor 16%, transparent); border-radius: 10px; }
:root[data-mode="ios"] .li .t { font-weight: 600; }
:root[data-mode="digital"] .li .ic { box-shadow: inset 0 0 8px color-mix(in srgb, currentColor 30%, transparent); }

/* timeline */
.tl { position: relative; }
.tl .st { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.tl .st::before { content: ''; position: absolute; left: 61px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl .st:first-child::before { top: 16px; } .tl .st:last-child::before { bottom: calc(100% - 16px); }
.tl .tm { width: 44px; flex: none; text-align: right; font-family: var(--f-ui); font-size: 12px; color: var(--lead); padding-top: 2px; }
.tl .nd { width: 12px; height: 12px; flex: none; margin-top: 4px; background: var(--screen); border: 2px solid var(--label); position: relative; z-index: 1; }
.tl .st.link .nd { border-color: var(--h-cyan); background: var(--h-cyan); }
:root:not([data-mode="pixel"]):not([data-mode="gameboy"]):not([data-mode="kam"]) .tl .nd { border-radius: 50%; }
.tl .lb { flex: 1; min-width: 0; font-family: var(--f-ui); font-size: 15px; color: var(--muted); }
.tl .st.link { cursor: pointer; } .tl .st.link .lb { color: var(--text); }
.tl .lb small { display: block; font-size: 12px; color: var(--label); font-family: var(--f-body); }
.tl.nt .tm { display: none; } .tl.nt .st::before { left: 5px; }

/* segmented */
.seg { display: flex; border: var(--bw) solid var(--line); margin-bottom: 12px; border-radius: var(--r-btn); overflow: hidden; background: var(--input); }
.seg button, .seg label { flex: 1; }
.seg button { height: 44px; background: none; border: 0; border-right: 1px solid var(--line); color: var(--muted); font-family: var(--f-ui); font-size: 12px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--lead); color: var(--on-lead); font-weight: 700; }
.seg label { display: flex; } .seg label .btn { border: 0; width: 100%; min-height: 44px; box-shadow: none; }
.seg label input:checked + .btn { background: var(--lead); color: var(--on-lead); }
:root[data-mode="ios"] .seg { border: 0; padding: 3px; gap: 3px; background: var(--raised); border-radius: 12px; }
:root[data-mode="ios"] .seg button { border: 0; border-radius: 9px; height: 36px; text-transform: none; font-size: 14px; font-weight: 600; }
:root[data-mode="ios"] .seg button.on { background: color-mix(in srgb, var(--text) 18%, var(--screen)); color: var(--text); }
:root[data-mode="digital"] .seg button.on { background: transparent; color: var(--lead); box-shadow: inset 0 -2px 0 var(--lead); text-shadow: 0 0 6px var(--lead); }
:root[data-mode="kam"] .seg button.on::before { content: '['; } :root[data-mode="kam"] .seg button.on::after { content: ']'; }

/* buttons */
.btn { min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: var(--f-ui); font-size: 13px;
  background: var(--input); border: var(--bw) solid var(--label); color: var(--text); border-radius: var(--r-btn); white-space: nowrap; }
.btn.solid { background: var(--lead); border-color: var(--lead); color: var(--on-lead); font-weight: 700; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.bad { color: var(--danger); border-color: var(--danger); }
.btn.ok { color: var(--ok); border-color: var(--ok); }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 12px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
:root[data-mode="pixel"] .btn, :root[data-mode="gameboy"] .btn { box-shadow: 4px 4px 0 #000a; }
:root[data-mode="pixel"] .btn:active, :root[data-mode="gameboy"] .btn:active { transform: translate(4px, 4px); box-shadow: none; }
:root[data-mode="kam"] .btn { border: 0; background: none; padding: 0 8px; color: var(--lead); font-weight: 700; }
:root[data-mode="kam"] .btn::before { content: '['; color: var(--label); margin-right: 4px; font-weight: 400; }
:root[data-mode="kam"] .btn::after { content: ']'; color: var(--label); margin-left: 4px; font-weight: 400; }
:root[data-mode="kam"] .btn.solid { background: var(--lead); color: var(--on-lead); }
:root[data-mode="kam"] .btn.solid::before, :root[data-mode="kam"] .btn.solid::after { color: var(--on-lead); }
:root[data-mode="kam"] .btn.ghost { color: var(--text); }
:root[data-mode="kam"] .btn.bad { color: var(--danger); } :root[data-mode="kam"] .btn.ok { color: var(--ok); }
:root[data-mode="digital"] .btn { background: transparent; border-color: color-mix(in srgb, var(--lead) 60%, transparent); color: var(--lead); }
:root[data-mode="digital"] .btn.solid { background: transparent; color: var(--lead); box-shadow: 0 0 12px color-mix(in srgb, var(--lead) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--lead) 25%, transparent); text-shadow: 0 0 6px var(--lead); }
:root[data-mode="ios"] .btn { border: 0; background: var(--raised); font-size: 16px; font-weight: 600; min-height: 50px; }
:root[data-mode="ios"] .btn.solid { background: var(--lead); }
:root[data-mode="ios"] .btn.ghost { background: color-mix(in srgb, var(--text) 9%, transparent); }
:root[data-mode="ios"] .btn.sm { min-height: 36px; font-size: 14px; border-radius: 999px; }

.vote { min-width: 48px; min-height: 40px; background: var(--input); border: var(--bw) solid var(--line); color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 10px; border-radius: var(--r-btn); }
.vote.up.on { color: var(--screen); background: var(--h-green); border-color: var(--h-green); }
.vote.dn.on { color: var(--screen); background: var(--h-red); border-color: var(--h-red); }
:root[data-mode="pixel"] .vote { box-shadow: 3px 3px 0 #000a; }

/* tags, chips */
.tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-ui); font-size: 11px; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.5; border-radius: var(--r-chip); }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--danger); } .tag.acc { color: var(--lead); }
.tag.info { color: var(--info); } .tag.mut { color: var(--label); } .tag.pur { color: var(--purple); }
.tag.solid { background: var(--lead); color: var(--on-lead); border-color: var(--lead); font-weight: 700; }
:root[data-mode="ios"] .tag { border: 0; background: color-mix(in srgb, currentColor 16%, transparent); font-weight: 600; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--f-ui);
  background: var(--input); border: var(--bw) solid var(--line); color: var(--muted); font-size: 12px; border-radius: var(--r-chip); }
.chip.on { border-color: var(--lead); color: var(--lead); background: color-mix(in srgb, var(--lead) 12%, var(--input)); }
:root[data-mode="ios"] .chip { border: 0; background: var(--raised); font-size: 14px; font-weight: 600; }
:root[data-mode="ios"] .chip.on { background: var(--lead); color: var(--on-lead); }
.who { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 4px; font-family: var(--f-ui); font-size: 11px; font-weight: 700; border: 2px solid; border-radius: calc(var(--r-chip) / 2); }
:root[data-mode="ios"] .who { border-radius: 999px; border: 0; background: color-mix(in srgb, currentColor 20%, transparent); }

/* inputs */
input, select, textarea { background: var(--input); border: var(--bw) solid var(--line); color: var(--text); font-family: var(--f-ui); font-size: 16px; padding: 11px 12px; width: 100%;
  border-radius: var(--r-btn); outline: none; -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus { border-color: var(--lead); }
:root[data-mode="ios"] input, :root[data-mode="ios"] select, :root[data-mode="ios"] textarea { border: 0; background: var(--raised); }
input[type=checkbox] { width: 24px; height: 24px; padding: 0; flex: none; cursor: pointer; border: 2px solid var(--label); border-radius: calc(var(--r-btn) / 2); }
input[type=checkbox]:checked { background: var(--h-green); border-color: var(--h-green); box-shadow: inset 0 0 0 4px var(--input); }
textarea { min-height: 96px; resize: vertical; }
label.f { display: block; } label.f > span { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: var(--track); color: var(--label); margin-bottom: 4px; text-transform: var(--case); }

/* misc layout */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .row.sb { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.grid2 { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.hr { height: 1px; background: var(--line); margin: 10px 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13.5px; }
.kv dt { color: var(--label); text-transform: var(--case); letter-spacing: var(--track); font-family: var(--f-ui); font-size: 11px; padding-top: 2px; }
.kv dd { color: var(--body); word-break: break-word; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-faint); cursor: pointer; }
.banner { display: flex; align-items: center; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--warn) 10%, var(--screen)); border: var(--bw) solid var(--warn);
  margin-bottom: 10px; cursor: pointer; color: var(--text); width: 100%; text-align: left; font-family: var(--f-ui); border-radius: var(--r); }
.banner .i { color: var(--warn); font-size: 18px; }
.daybar { position: relative; height: 26px; background: var(--input); border: var(--bw) solid var(--line-faint); margin-top: 6px; overflow: hidden; border-radius: var(--r-btn); }
.daybar .lit { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--h-amber) 25%, transparent); border-left: 2px solid var(--h-amber); border-right: 2px solid var(--h-amber); }
.daybar .now { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--h-cyan); box-shadow: 0 0 6px var(--h-cyan); }
.daybar .lab { position: absolute; top: 4px; font-family: var(--f-ui); font-size: 11px; color: var(--text); }

/* FAB */
.fab { position: absolute; right: 20px; bottom: calc(var(--nav-h) + 30px + var(--safe-b)); z-index: 50; width: 60px; height: 60px; background: var(--lead); color: var(--on-lead);
  border: var(--bw) solid var(--lead); font-size: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--r-btn); }
:root[data-mode="pixel"] .fab, :root[data-mode="gameboy"] .fab { box-shadow: 5px 5px 0 #000b; }
:root[data-mode="digital"] .fab { background: var(--screen); color: var(--lead); box-shadow: 0 0 18px color-mix(in srgb, var(--lead) 60%, transparent); }
:root[data-mode="ios"] .fab { border-radius: 50%; border: 0; box-shadow: 0 8px 24px #0008; }

/* sheets */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 900; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--screen); border: var(--bw) solid var(--lead); border-bottom: 0; width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto;
  padding: 6px 16px calc(20px + var(--safe-b)); animation: slideUp .18s ease-out; border-radius: var(--r) var(--r) 0 0; }
.sheet .handle { width: 44px; height: 5px; background: var(--label); margin: 4px auto 12px; border-radius: 3px; }
.sheet .sh-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet .sh-t b { font-family: var(--f-head); font-size: 16px; color: var(--ink); text-transform: var(--case); }
:root[data-mode="pixel"] .sheet .sh-t b, :root[data-mode="gameboy"] .sheet .sh-t b { font-size: 12px; }
:root[data-mode="ios"] .sheet { border: 0; border-radius: 22px 22px 0 0; background: var(--panel); }
.moregrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.moregrid .tile { min-height: 100px; }
.moregrid .tile .g { font-size: 24px; color: var(--tc); }
.moregrid .tile .h2 { font-size: 13px; }
.moregrid .tile .k { text-transform: none; letter-spacing: 0; font-size: 11.5px; line-height: 1.3; }

/* map */
.mapwrap { height: 100%; position: relative; }
#map { position: absolute; inset: 0; background: var(--screen); }
.mapbar { position: absolute; z-index: 500; left: 0; right: 0; top: 0; padding: 8px 0; }
.mapbar .rail { padding-left: 10px; padding-right: 10px; margin: 0; gap: 6px; }
.mapbar .chip { background: color-mix(in srgb, var(--screen) 90%, transparent); }
.mapfabs { position: absolute; z-index: 500; right: 10px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.mapfabs .ib { background: color-mix(in srgb, var(--screen) 92%, transparent); border: var(--bw) solid var(--h-blue); color: var(--h-blue); border-radius: var(--r-btn); }
.leaflet-container { font-family: var(--f-ui) !important; background: var(--screen) !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--screen) 80%, transparent) !important; color: var(--label) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-control-zoom { display: none; }
:root[data-mode="gameboy"] .leaflet-tile-pane { filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(2) brightness(.7) contrast(1.3); }
:root[data-theme="vboy"] .leaflet-tile-pane { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(5) brightness(.7); }
:root[data-theme="synth"] .leaflet-tile-pane { filter: hue-rotate(230deg) saturate(1.6); }
:root[data-theme="ride"] .leaflet-tile-pane, :root[data-theme="clean"] .leaflet-tile-pane { filter: contrast(1.25) brightness(1.1); }
.pin { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--screen); border: 3px solid; font-size: 14px; }
.pin.est { border-style: dashed; }
.pin.avoid { color: var(--danger) !important; border-color: var(--danger) !important; }
.pin.pick { box-shadow: 0 0 0 2px var(--screen), 0 0 0 5px var(--lead); }
.pin.me { width: 18px; height: 18px; border-radius: 50%; background: var(--h-cyan); border: 3px solid #fff; box-shadow: 0 0 12px var(--h-cyan); }
:root[data-mode="ios"] .pin { border-radius: 50%; }

/* guide chat */
.chatpage { display: flex; flex-direction: column; min-height: 100%; padding: 14px 14px 0; }
.chatpage .chat { flex: 1; padding-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 12px; font-size: var(--fs-body); white-space: pre-wrap; word-break: break-word; max-width: 90%; font-family: var(--f-body); border-radius: var(--r); }
.msg.u { align-self: flex-end; background: color-mix(in srgb, var(--h-purple) 18%, var(--screen)); border: var(--bw) solid var(--h-purple); color: var(--text); }
.msg.g { align-self: flex-start; background: var(--panel); border: var(--bw) solid var(--line); color: var(--text); }
.msg .src { display: block; margin-top: 6px; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: var(--track); color: var(--label); text-transform: var(--case); }
:root[data-mode="kam"] .msg.g::before { content: 'GUIDE> '; color: var(--h-purple); font-weight: 700; }
:root[data-mode="kam"] .msg.u::before { content: 'YOU> '; color: var(--lead); font-weight: 700; }
:root[data-mode="ios"] .msg { border: 0; border-radius: 20px; } :root[data-mode="ios"] .msg.u { background: var(--lead); color: var(--on-lead); }
.typing::after { content: '▌'; animation: blink 1s step-start infinite; color: var(--h-purple); }
.composer { position: sticky; bottom: 0; background: var(--screen); border-top: var(--bw) solid var(--line); margin: 0 -14px; padding: 8px 10px; display: flex; gap: 8px; }
.composer input { flex: 1; }

/* field */
.compass { width: 54px; height: 54px; border: 2px solid var(--label); border-radius: 50%; position: relative; }
.compass .needle { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; transition: transform .2s; }
.compass .needle::before { content: ''; position: absolute; top: 0; left: -3px; border: 4px solid transparent; border-bottom: 22px solid var(--danger); border-top: 0; }
.night { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 40px; }
.night.red { background: #f00; } .night.white { background: #fff; }
details.card > summary { list-style: none; } details.card > summary::-webkit-details-marker { display: none; }
.feed img { width: 100%; display: block; border: var(--bw) solid var(--line); margin-top: 8px; border-radius: var(--r); }
:root[data-mode="gameboy"] .feed img { filter: grayscale(1) contrast(1.4); }

/* ═══ TITLE SCREEN (RIDE: K·A·M / R I D E / PRESS START) ═══ */
.gate { width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: center; padding: 14px; background: var(--bezel); }
.gate .screen { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 18px;
  background: var(--screen); border: 6px solid var(--screen-edge); overflow-y: auto; position: relative; }
.gate .logo { font-family: var(--f-head); font-size: 54px; color: var(--ink); line-height: 1; text-align: center; letter-spacing: 2px; }
.gate .logo-sub { font-family: var(--f-head); font-size: 20px; letter-spacing: 12px; color: var(--accent); margin: 14px 0 6px; text-align: center; padding-left: 12px; }
:root[data-mode="kam"] .gate .logo { font-family: 'Bebas Neue', var(--f-head); font-size: 96px; letter-spacing: 10px; color: var(--lead); text-shadow: 0 0 30px color-mix(in srgb, var(--lead) 50%, transparent); }
:root[data-mode="kam"] .gate .logo-sub { font-family: 'IBM Plex Mono', monospace; color: var(--text); }
:root[data-mode="digital"] .gate .logo { font-weight: 200; font-size: 64px; letter-spacing: 8px; text-shadow: 0 0 18px var(--ink); }
:root[data-mode="ios"] .gate .logo { font-weight: 800; font-size: 64px; letter-spacing: -1px; color: var(--text); }
:root[data-mode="ios"] .gate .logo-sub { font-weight: 600; letter-spacing: 6px; font-size: 16px; color: var(--lead); }
:root[data-mode="pixel"] .gate .logo, :root[data-mode="gameboy"] .gate .logo { font-size: 40px; }
:root[data-mode="pixel"] .gate .logo-sub, :root[data-mode="gameboy"] .gate .logo-sub { font-size: 14px; }
.gate .sprite { margin: 16px 0 6px; color: var(--h-orange); display: flex; justify-content: center; }
.gate .press { font-family: var(--f-head); font-size: 16px; color: var(--ink2); margin: 16px 0; text-align: center; cursor: pointer; background: none; border: 0; }
:root[data-mode="pixel"] .gate .press, :root[data-mode="gameboy"] .gate .press { font-size: 12px; }
.gate .box { width: 100%; max-width: 380px; }
.gate .hud { display: flex; gap: 14px; align-items: center; justify-content: center; font-family: var(--f-ui); font-size: 12px; color: var(--label); flex-wrap: wrap; margin-top: 4px; }
.gate .look-btn { position: absolute; top: 10px; right: 10px; }

/* ═══ POP-UP CARDS (RIDE: CELEBRATE · WARNING · INFO) ═══ */
.popup { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.popup .pcard { position: relative; min-width: 260px; max-width: 86vw; padding: 22px 24px; text-align: center; background: var(--screen); border: 6px solid var(--h-green);
  animation: celebrate .5s cubic-bezier(.3, 1.6, .5, 1) both; box-shadow: 8px 8px 0 #000a; border-radius: var(--r); }
.popup.warning .pcard { border-color: var(--h-amber); animation: slam .45s ease-out both; }
.popup.info .pcard { border-color: var(--h-cyan); }
.popup .pt { font-family: var(--f-head); font-size: 22px; color: var(--ink); text-transform: var(--case); line-height: 1.3; }
:root[data-mode="pixel"] .popup .pt, :root[data-mode="gameboy"] .popup .pt { font-size: 15px; line-height: 1.6; }
.popup .ps { font-family: var(--f-ui); font-size: 13px; color: var(--muted); margin-top: 8px; }
.popup.celebrate .pcard { animation: celebrate .5s cubic-bezier(.3, 1.6, .5, 1) both, border-cycle .6s steps(3) infinite; }
.popup.out .pcard { transition: transform .35s, opacity .35s; transform: scale(.6); opacity: 0; }
.sparks i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--h-amber); transform: rotate(var(--a)) translateY(0); animation: spark .6s ease-out forwards; }
.sparks i:nth-child(3n) { background: var(--h-cyan); } .sparks i:nth-child(3n+1) { background: var(--h-pink); }
@keyframes celebrate { 0% { transform: scale(.3); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes slam { 0% { transform: translateY(-120%) } 60% { transform: translateY(6%) } 75% { transform: translateX(-6px) } 90% { transform: translateX(6px) } 100% { transform: none } }
@keyframes border-cycle { 0% { border-color: var(--h-green) } 33% { border-color: var(--h-amber) } 66% { border-color: var(--h-pink) } }
@keyframes spark { to { transform: rotate(var(--a)) translateY(-150px); opacity: 0 } }

/* LOOK picker */
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatch { text-align: left; padding: 0; border: var(--bw) solid var(--line); background: none; cursor: pointer; color: inherit; overflow: hidden; border-radius: var(--r); }
.swatch.on { border-color: var(--lead); box-shadow: 0 0 0 2px var(--lead); }
.swatch .sw { display: flex; height: 42px; } .swatch .sw i { flex: 1; }
.swatch .sw i:first-child { flex: 2; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', monospace; font-size: 10px; font-style: normal; }
.swatch .sn { display: block; padding: 8px 10px 2px; font-family: var(--f-ui); font-size: 12px; font-weight: 700; color: var(--text); }
.swatch .so { display: block; padding: 0 10px 8px; font-family: var(--f-ui); font-size: 10.5px; color: var(--label); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 30px + var(--safe-b)); z-index: 950; background: var(--screen);
  border: var(--bw) solid var(--danger); color: var(--text); padding: 10px 14px; font-family: var(--f-ui); font-size: 13px; max-width: 92vw; border-radius: var(--r); }
.spin { width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--lead); animation: spin .7s linear infinite; display: inline-block; }
.hide { display: none !important; }
.bob { animation: bob 1s steps(2) infinite; } @keyframes bob { 50% { transform: translateY(-6px) } }
.tab > span { display: block; }