/* 米花星域 STARFIELD — the park's skin outside the match (UI-DESIGN-STANDARD
   §2: cream cards, dark wood bars, honey-yellow primary, warm brown ink), and
   a deep candy-cosmos stage inside it (codex spec 2026-10-17). */
:root {
  /* park tokens (UI-DESIGN-STANDARD §2.3) */
  --ui-cream-0: #fffdf7; --ui-cream-1: #fff8e8; --ui-cream-2: #f6e8c8;
  --ui-ink: #3a2c12; --ui-body: #6b5327; --ui-muted: #806d4d; --ui-gold: #f5a91b; --ui-gold-dark: #9d6508;
  --ui-blue: #2e8fd6; --ui-green: #35ad58; --ui-danger: #d94b52;
  --ui-radius-sm: 11px; --ui-radius-md: 18px; --ui-radius-lg: 24px;
  --ui-shadow-card: 0 10px 30px rgba(60, 40, 20, .24), 0 3px 0 rgba(184, 121, 15, .12), inset 0 2px 0 rgba(255, 255, 255, .6);
  --ui-speed-fast: 160ms; --ui-speed: 220ms;
  --card: linear-gradient(rgba(255, 253, 247, .95), rgba(255, 248, 232, .92));
  --wood: rgba(50, 32, 14, .66);
  --wood-edge: rgba(255, 230, 160, .35);
  --wood-ink: #fff5dc;
  --wood-hi: #ffd45e;
  /* the house colours of this booth: night sky, used sparingly */
  --sf-night-0: #10172d; --sf-night-1: #23214a; --sf-night-2: #452b63;
  --sf-cyan: #75d9df; --sf-lilac: #bba7ef; --sf-popcorn: #fff1c8; --sf-coral: #ef635f;
  /* shared panels: variables only (standard §2.3) — same values as 米花爆 */
  --soc-sheet: linear-gradient(rgba(255, 253, 247, .98), rgba(255, 248, 232, .96)); --soc-edge: #fff; --soc-ink: #3a2c12; --soc-secfg: #6b5327;
  --soc-card: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 250, 240, .85)); --soc-cardfg: #3a2c12; --soc-accent: #f5a91b;
  --soc-bg: rgba(255, 250, 238, .96); --soc-fg: #6b5327; --soc-line: rgba(184, 121, 15, .35);
  --pshare-bg: rgba(50, 32, 14, .72); --pshare-fg: #fff5dc; --pshare-accent: #ffd45e; --pshare-btn: rgba(255, 245, 220, .14);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--sf-night-1); color: var(--ui-body); overflow: hidden;
  font: 15px/1.45 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Hiragino Sans", "Malgun Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: none; }
input { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(46, 143, 214, .78); outline-offset: 2px; }
[hidden] { display: none !important; }

#arena { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

/* ------------------------------------------------------------ scene -- */
/* The park booth behind every screen outside the match: the scene is the
   star (standard §1.1), the cards sit on it. One scroll container on phones. */
.screen { position: fixed; inset: 0; z-index: 10; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--sf-night-1) url("assets/bg/bg_wide.webp?v=1") center / cover no-repeat; }
@media (orientation: portrait) { .screen { background-image: url("assets/bg/bg_tall.webp?v=1"); } }
/* Results sit over the finished field, not over the booth: you see where it ended. */
#over { background: rgba(16, 23, 45, .55); }
.panel-screen { display: flex; align-items: flex-start; justify-content: center; }
.panel { position: relative; width: min(600px, 100%); margin: auto; background: var(--card); border: 3px solid #fff; border-radius: 22px;
  padding: 18px 18px 16px; box-shadow: var(--ui-shadow-card); color: var(--ui-body); }
h2 { margin: 2px 0 12px; font-size: 22px; color: var(--ui-ink); letter-spacing: .02em; }
h3 { margin: 0; font-size: 13px; color: var(--ui-muted); letter-spacing: .06em; }
/* the wooden sign on a panel's title */
.panel > h2 { display: inline-block; margin: -32px 0 12px; padding: 6px 18px; border-radius: 12px; font-size: 18px;
  background: linear-gradient(#a8743f, #7a4f26); border: 2px solid #d0a06a; color: #ffe9a8; box-shadow: 0 5px 0 #5a3618; }
#over .panel > h2 { display: block; margin: 0 0 10px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--ui-ink); font-size: clamp(28px, 7vw, 38px); }

/* ------------------------------------------------------------ title -- */
.title-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 44px; padding-right: calc(var(--park-dock-rest-w, 40px) + 14px); }
.pass { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--wood); border: 1.5px solid var(--wood-edge); color: var(--wood-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pass a { color: var(--wood-hi); }
.online { margin-right: auto; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--wood); border: 1.5px solid var(--wood-edge); color: var(--wood-ink); display: inline-flex; align-items: center; gap: 6px; }
.online::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #35c15f; }
.title-main { max-width: 620px; margin: 0 auto; text-align: center; padding-bottom: 70px; display: flex; flex-direction: column; }
/* the play buttons belong on the first screen: the CPU demo goes under them */
.title-main .preview { order: 1; margin: 14px auto 0; }
.title-main #card, .title-main .guest-note, .title-main .legal { order: 2; }
.rating-mark { display: flex; align-items: center; gap: 10px; max-width: 380px; margin: 0 auto 10px; padding: 8px 10px; border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, .78); border: 2px solid #fff; }
.rating-mark img { flex: none; width: 60px; height: 60px; }
.rating-mark p { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--ui-muted); }
.rating-mark b { color: var(--ui-gold-dark); font-weight: 800; }
.rating-mark span { display: block; }
/* The name is set in text, never drawn by a model (standard §6). */
.wordmark { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.wm-zh { font-size: clamp(44px, 12vw, 70px); font-weight: 900; letter-spacing: .08em; color: #fff4cf;
  -webkit-text-stroke: 2px #6b3d12; paint-order: stroke fill;
  text-shadow: 0 4px 0 #8a5420, 0 8px 18px rgba(40, 20, 60, .55), 0 0 26px rgba(255, 212, 94, .45); }
.wm-en { margin-top: 8px; font-size: 14px; font-weight: 900; letter-spacing: .6em; padding: 4px 4px 4px calc(.6em + 10px); border-radius: 999px;
  color: var(--wood-hi); background: var(--wood); border: 1.5px solid var(--wood-edge); }
.stage { position: relative; height: 150px; margin: 6px auto 0; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.stage img { height: 150px; width: 150px; object-fit: contain; animation: sf-float 8s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(30, 15, 50, .35)); }
.stage img:nth-child(2) { height: 170px; width: 170px; animation-delay: -2.5s; }
.stage img:nth-child(3) { animation-delay: -5s; }
@keyframes sf-float { 50% { transform: translateY(-4px); } }
.tagline { margin: 6px auto 14px; max-width: 30em; padding: 6px 14px; border-radius: 999px; background: var(--wood); border: 1.5px solid var(--wood-edge); color: var(--wood-ink); font-size: 14px; display: inline-block; }
.title-card { background: var(--card); border: 3px solid #fff; border-radius: 22px; box-shadow: var(--ui-shadow-card); padding: 14px; text-align: center; }
.name-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 0 auto 10px; font-size: 13px; color: var(--ui-muted); }
.name-row input, .code-row input { background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(150, 115, 55, .28); color: var(--ui-ink); border-radius: var(--ui-radius-sm); padding: 9px 11px; font: inherit; width: 12em; }
.name-row input:focus, .code-row input:focus { border-color: var(--ui-gold); box-shadow: 0 0 0 4px rgba(245, 169, 27, .14); outline: none; }
.sens-row input { width: 12em; accent-color: var(--ui-gold); }
.signed { margin: 0 0 10px; color: var(--ui-ink); font-weight: 700; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; min-height: 62px;
  padding: 10px 14px; border-radius: var(--ui-radius-md); border: 2px solid rgba(150, 115, 55, .22); background: rgba(255, 252, 244, .95); color: var(--ui-body);
  box-shadow: 0 3px 0 rgba(150, 110, 40, .14); transition: transform var(--ui-speed-fast); }
.mode svg { grid-row: span 2; color: var(--ui-gold-dark); }
.mode .m-name { font-weight: 800; color: var(--ui-ink); letter-spacing: .02em; }
.mode .m-sub { font-size: 12px; color: var(--ui-muted); }
.mode.big { grid-column: span 2; min-height: 70px; }
/* The one honey-yellow action on the title (standard §1.2): quick versus. */
.mode.versus { background: linear-gradient(#ffe08a, #f5a91b); border: 2px solid #ffedb0; box-shadow: 0 8px 0 #c9871a, 0 12px 20px rgba(120, 70, 0, .25); }
.mode.versus, .mode.versus .m-name, .mode.versus svg { color: #5a3800; }
.mode.versus .m-sub { color: #7a5200; }
/* co-op is the tool-blue "go here too" */
.mode.coop { background: linear-gradient(#5cc3f2, #2e8fd6); border: 2px solid #a8e1ff; box-shadow: 0 6px 0 #1d6aa6; }
.mode.coop, .mode.coop .m-name, .mode.coop svg { color: #fff; }
.mode.coop .m-sub { color: #e3f4ff; }
.mode:active { transform: translateY(3px); }
.row-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.guest-note { font-size: 12px; color: var(--ui-muted); margin: 10px 0 0; }
.legal { font-size: 12px; color: var(--wood-ink); margin: 12px auto 0; padding: 6px 12px; border-radius: 999px; background: var(--wood); display: inline-block; }
.legal a { color: var(--wood-hi); }

/* ------------------------------------------------------------ buttons -- */
.primary, .ghost, .tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; padding: 10px 18px;
  font-weight: 800; letter-spacing: .02em; transition: transform var(--ui-speed-fast), filter var(--ui-speed-fast); }
.primary { border: 2px solid #ffedb0; color: #5a3800; background: linear-gradient(#ffe08a, #f5a91b); box-shadow: 0 6px 0 #c9871a; }
.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 #c9871a; }
.primary:disabled { filter: grayscale(.6); opacity: .55; }
.tool { border: 2px solid #a8e1ff; color: #fff; background: linear-gradient(#5cc3f2, #2e8fd6); box-shadow: 0 5px 0 #1d6aa6; }
.tool:active { transform: translateY(3px); box-shadow: 0 2px 0 #1d6aa6; }
.ghost { border: 2px solid rgba(150, 115, 55, .22); background: rgba(255, 252, 244, .95); color: var(--ui-body); box-shadow: 0 3px 0 rgba(150, 110, 40, .14); }
.ghost:active { transform: translateY(2px); }
.ghost:disabled { opacity: .5; }
.ghost.small, .tool.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
/* Back / close / leave: a small wooden sign, always top-right (standard §5.6). */
.back, #b-leave { position: absolute; top: 12px; right: 12px; min-height: 36px; padding: 6px 12px; font-size: 13px; margin: 0;
  background: linear-gradient(#a8743f, #7a4f26); border: 2px solid #d0a06a; color: #ffe9a8; box-shadow: 0 4px 0 #5a3618; }
.back:active, #b-leave:active { transform: translateY(2px); box-shadow: 0 2px 0 #5a3618; }

/* the CPU demo window on the title */
.preview { position: relative; margin: 0 auto 14px; width: min(520px, 100%); padding: 6px; border-radius: 18px; background: var(--card); border: 3px solid #fff; box-shadow: var(--ui-shadow-card); }
.preview canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--sf-night-1); }
.preview figcaption { position: absolute; left: 14px; top: 12px; font-size: 11px; font-weight: 900; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; background: var(--wood); color: var(--wood-hi); border: 1.5px solid var(--wood-edge); }

/* leaderboard */
.lb-tabs { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .72); color: var(--ui-ink); font-weight: 700; }
.lb li .rk { font-weight: 900; color: var(--ui-muted); text-align: center; }
.lb li:nth-child(1) .rk, .lb li:nth-child(2) .rk, .lb li:nth-child(3) .rk { color: #fff; border-radius: 999px; padding: 2px 0; }
.lb li:nth-child(1) .rk { background: linear-gradient(#ffe08a, #f5a91b); color: #5a3800; }
.lb li:nth-child(2) .rk { background: linear-gradient(#e9eef3, #b8c4cf); color: #3a4652; }
.lb li:nth-child(3) .rk { background: linear-gradient(#f0c89a, #c98a4e); color: #4a2a0e; }
.lb li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li .v { font-variant-numeric: tabular-nums; color: var(--ui-gold-dark); }
.lb li.me { background: #fff1c2; box-shadow: inset 0 0 0 2px var(--ui-gold); }
.lb .empty { display: block; color: var(--ui-muted); background: none; font-weight: 600; }
.lb-me { margin: 10px 0 0; font-size: 13px; color: var(--ui-muted); }

/* level line on the record card, and the tasks screen */
.lvl { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lvl b { font-size: 18px; color: var(--ui-ink); white-space: nowrap; }
.lvl span { font-size: 12px; font-weight: 800; color: var(--ui-gold-dark); white-space: nowrap; }
.bar { flex: 1; height: 10px; border-radius: 999px; background: #f0dfbd; overflow: hidden; box-shadow: inset 0 1px 2px rgba(60, 40, 20, .2); }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd06a, #f5a91b); }
.task { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 12px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 2px solid #fff; }
.task .tn { font-weight: 800; color: var(--ui-ink); }
.task .tx { font-size: 12px; font-weight: 800; color: var(--ui-gold-dark); }
.task .bar { grid-column: 1 / -1; height: 8px; }
.task .tp { font-size: 11px; color: var(--ui-muted); grid-column: 1 / -1; }
.task.done { background: linear-gradient(#eaffea, #d4f5d6); }
.task.done .bar i { background: linear-gradient(90deg, #6fdc6f, #2faa4a); }
.tasks-h { margin: 12px 0 6px; font-size: 13px; color: var(--ui-muted); letter-spacing: .06em; }

/* ------------------------------------------------------------ record card -- */
.card { margin-top: 12px; text-align: left; background: var(--card); border: 3px solid #fff; border-radius: 22px; box-shadow: var(--ui-shadow-card); padding: 12px 14px; }
.card h3 { margin-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.stat b { display: block; font-size: 19px; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--ui-muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1.5px solid rgba(150, 115, 55, .22); color: var(--ui-muted); background: rgba(255, 255, 255, .6); }
.badge.got { color: #5a3800; border-color: #ffedb0; background: linear-gradient(#ffe9a8, #ffd06a); }

/* ------------------------------------------------------------ ship picker -- */
.ships { display: flex; justify-content: center; gap: 8px; margin: 0 auto 12px; flex-wrap: wrap; }
.ship { position: relative; display: grid; justify-items: center; gap: 2px; width: 74px; min-height: 64px; padding: 6px 4px; border-radius: 14px;
  border: 2px solid rgba(150, 115, 55, .22); background: rgba(255, 252, 244, .95); color: var(--ui-gold-dark); font-size: 11px; box-shadow: 0 3px 0 rgba(150, 110, 40, .14); }
.ship span { color: var(--ui-muted); font-weight: 700; }
.ship .pic { width: 56px; height: 56px; object-fit: contain; margin: -10px 0 -12px; }
.ship.locked .pic { filter: grayscale(.85) opacity(.6); }
.ship.on { background: linear-gradient(#fff2c2, #ffd774); border-color: #ffedb0; box-shadow: 0 4px 0 #c9871a; }
.ship.on span { color: #5a3800; }
.ship.locked { background: rgba(240, 230, 210, .9); color: #b0a080; }
.ship .lk { position: absolute; right: 6px; top: 6px; color: var(--ui-muted); }

/* ------------------------------------------------------------ rooms -- */
.code-row { display: flex; gap: 8px; margin-bottom: 14px; }
.code-row input { flex: 1; text-transform: uppercase; letter-spacing: .3em; font-size: 20px; text-align: center; width: auto; }
.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.room-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.room-list li button { width: 100%; min-height: 44px; display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--wood-edge); background: var(--wood); color: var(--wood-ink); text-align: left; font-weight: 700; }
.room-list .empty { color: var(--ui-muted); font-size: 13px; padding: 6px 2px; }
.create-box { display: grid; gap: 10px; border-top: 2px dashed rgba(150, 115, 55, .22); padding-top: 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-muted); }
.check input { width: 18px; height: 18px; accent-color: var(--ui-gold); }
.seg { display: inline-flex; border: 2px solid rgba(150, 115, 55, .22); border-radius: 999px; overflow: hidden; background: rgba(255, 252, 244, .95); }
.seg button { border: 0; background: transparent; padding: 7px 14px; min-height: 36px; font-weight: 800; font-size: 13px; color: var(--ui-muted); }
.seg button.on { background: linear-gradient(#ffe08a, #f5a91b); color: #5a3800; }
.seg.locked button:not(.on) { display: none; }

/* ------------------------------------------------------------ lobby -- */
.lobby-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 110px 12px 0; }
.lobby-head > div:first-child { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 12px;
  background: linear-gradient(#a8743f, #7a4f26); border: 2px solid #d0a06a; box-shadow: 0 5px 0 #5a3618; }
.kicker { color: #ffe9a8; font-size: 12px; letter-spacing: .1em; font-weight: 800; }
.code { font-size: 26px; letter-spacing: .25em; color: #fff4cf; }
.seats { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px 8px 0; border-radius: 16px; overflow: hidden;
  border: 2px solid #fff; background: rgba(255, 255, 255, .78); box-shadow: 0 3px 0 rgba(150, 110, 40, .14); }
.seat .sw { width: 6px; align-self: stretch; border-radius: 0 4px 4px 0; }
.seat img, .seat .av { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: var(--ui-cream-2); flex: none; }
.seat .av { display: grid; place-items: center; color: var(--ui-muted); }
.seat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--ui-ink); }
.seat .tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1.5px solid rgba(150, 115, 55, .22); color: var(--ui-muted); white-space: nowrap; }
.seat .tag.ok { color: #fff; border-color: #a8f0b4; background: linear-gradient(#6fdc6f, #2faa4a); }
.seat .tag.host { color: #5a3800; border-color: #ffedb0; background: linear-gradient(#ffe9a8, #ffd06a); }
.seat.empty { border-style: dashed; border-color: rgba(150, 115, 55, .3); background: rgba(255, 252, 244, .5); box-shadow: none; }
.seat.empty .nm { color: var(--ui-muted); font-weight: 600; }
.seat.me { border-color: var(--ui-gold); background: rgba(255, 246, 214, .95); }
.seat .kick { border: 0; background: transparent; color: var(--ui-muted); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.seat .kick:hover { color: var(--ui-danger); background: rgba(217, 75, 82, .08); }
.bot-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.host-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .55); }
.hr-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-muted); }
.hr-item b { min-width: 2.2em; text-align: center; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
#auto-ready-wrap { margin: 0 0 8px; }
#b-bot-remove { color: var(--ui-danger); }
.status { min-height: 1.4em; color: var(--ui-muted); font-size: 13px; margin: 6px 0 10px; }
#share { margin-bottom: 12px; }
.lobby-actions, .o-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lobby-actions .primary, .o-actions .primary { flex: 1; min-width: 150px; min-height: 52px; font-size: 18px; }

/* ------------------------------------------------------------ hud -- */
/* In the match: small dark-wood chips over the field, nothing that hides it. */
#hud { position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); height: calc(46px + env(safe-area-inset-top)); pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-l, .hud-c { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(50, 32, 14, .72); border: 1.5px solid var(--wood-edge);
  color: var(--wood-ink); }   /* no backdrop blur: over a canvas that changes every frame it is re-blurred every frame */
.hud-k { font-size: 11px; color: var(--wood-hi); letter-spacing: .1em; font-weight: 800; }
#h-score { font-size: 19px; font-variant-numeric: tabular-nums; }
/* combo: the multiplier in honey, the count, and a bar draining to the reset */
.combo { position: relative; display: inline-flex; align-items: baseline; gap: 5px; margin-left: 4px; padding: 1px 8px 3px; border-radius: 999px;
  background: linear-gradient(#ffe08a, #f5a91b); color: #5a3800; font-size: 12px; font-weight: 800; overflow: hidden; }
.combo b { font-size: 15px; font-variant-numeric: tabular-nums; }
.combo i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #8a5420; transform-origin: left; }
#h-time { font-size: 17px; font-variant-numeric: tabular-nums; }
#h-info { font-size: 12px; color: #f2dfb5; }
.hud-r { display: flex; gap: 6px; margin-right: calc(var(--park-dock-rest-w, 40px) + 8px); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--wood-edge); background: rgba(50, 32, 14, .72); color: var(--wood-ink); }
#b-quit { color: #ffb3b6; }
.emotes { position: fixed; z-index: 20; right: calc(max(12px, env(safe-area-inset-right)) + var(--park-dock-rest-w, 40px) + 8px); top: calc(54px + env(safe-area-inset-top));
  display: grid; grid-template-columns: repeat(4, auto); gap: 6px; background: var(--card); border: 3px solid #fff; padding: 8px; border-radius: 16px; box-shadow: var(--ui-shadow-card); }
.emotes button { border: 2px solid rgba(150, 115, 55, .22); background: rgba(255, 255, 255, .8); color: var(--ui-ink); border-radius: 11px; padding: 8px 10px; min-height: 40px; font-weight: 800; font-size: 13px; }
/* Countdown / GO: cream letters on a caramel stroke, no flash. */
.banner { position: fixed; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; white-space: pre-line;
  font-size: clamp(32px, 10vw, 72px); font-weight: 900; letter-spacing: .04em; color: #fff4cf; -webkit-text-stroke: 2px #6b3d12; paint-order: stroke fill;
  text-shadow: 0 4px 0 #8a5420, 0 10px 22px rgba(20, 10, 40, .5); animation: sf-pop 220ms ease-out; }
.banner.end { font-size: clamp(40px, 12vw, 92px); animation: sf-end 520ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sf-end { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.banner.small { font-size: clamp(15px, 4.4vw, 22px); font-weight: 800; -webkit-text-stroke: 0; padding: 8px 16px; border-radius: 999px; background: rgba(50, 32, 14, .78);
  border: 1.5px solid var(--wood-edge); color: var(--wood-ink); text-shadow: none; }
.banner.small.warn { background: rgba(255, 250, 238, .96); border: 2px solid var(--ui-danger); color: #8e2a2f; }
@keyframes sf-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
.hint { position: fixed; z-index: 6; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); pointer-events: none; font-size: 13px; font-weight: 700;
  color: var(--wood-ink); background: rgba(50, 32, 14, .78); border: 1.5px solid var(--wood-edge); padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ replay -- */
.replaybar { position: fixed; z-index: 7; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: rgba(50, 32, 14, .82); border: 1.5px solid var(--wood-edge); padding: 6px 10px; border-radius: 999px; max-width: calc(100vw - 24px); color: var(--wood-ink); }
.rp-tag { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--wood-hi); }
#rp-time { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.replaybar.rec .rp-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-danger); margin-right: 6px; }

/* ------------------------------------------------------------ results -- */
.o-sub { color: var(--ui-muted); margin: -6px 0 10px; }
.o-me { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.o-me .pill { padding: 5px 11px; border-radius: 999px; border: 1.5px solid rgba(150, 115, 55, .22); font-size: 13px; font-weight: 800; color: var(--ui-body); background: rgba(255, 255, 255, .7); }
.o-me .pill.best { color: #5a3800; border-color: #ffedb0; background: linear-gradient(#ffe9a8, #ffd06a); }
.o-me .pill.up { color: #fff; border-color: #a8f0b4; background: linear-gradient(#6fdc6f, #2faa4a); }
.o-me .pill.down { color: #8e2a2f; border-color: rgba(217, 75, 82, .4); }
.o-me .note { flex-basis: 100%; font-size: 12px; color: var(--ui-muted); }
.o-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.o-table th { text-align: right; color: var(--wood-ink); background: var(--wood); font-weight: 700; font-size: 11px; padding: 6px 8px; }
.o-table th:first-child { border-radius: 10px 0 0 10px; } .o-table th:last-child { border-radius: 0 10px 10px 0; }
.o-table td { text-align: right; padding: 7px 8px; background: rgba(255, 255, 255, .72); color: var(--ui-ink); }
.o-table td:first-child { border-radius: 10px 0 0 10px; } .o-table td:last-child { border-radius: 0 10px 10px 0; }
.o-table th:first-child, .o-table td:first-child { text-align: left; }
.o-table tr.me td { background: #fff1c2; font-weight: 800; }
.o-table .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 2px #fff; }

/* ------------------------------------------------------------ how to -- */
.howto { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: step; }
.howto > li { position: relative; padding-left: 42px; counter-increment: step; }
.howto > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; color: #ffe9a8; background: linear-gradient(#a8743f, #7a4f26); border: 2px solid #d0a06a; box-shadow: 0 3px 0 #5a3618; }
.howto p { margin: 0; color: var(--ui-body); }
.weapons { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.weapons li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ui-muted); padding: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, .72); border: 1.5px solid #fff; }
.weapons li b { display: block; color: var(--ui-ink); font-size: 13px; }
.weapons .orb { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #3a2c12; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 0 0 2px #fff; }
#howto .panel { width: min(760px, 100%); }

/* ------------------------------------------------------------ misc -- */
.boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--sf-night-1) url("assets/bg/bg_wide.webp?v=1") center / cover no-repeat; transition: opacity .3s; }
@media (orientation: portrait) { .boot { background-image: url("assets/bg/bg_tall.webp?v=1"); } }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-sub { color: var(--wood-ink); font-size: 13px; letter-spacing: .2em; padding: 4px 14px; border-radius: 999px; background: var(--wood); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px)); transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast div { background: var(--card); border: 2px solid #fff; color: var(--ui-ink); padding: 9px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: var(--ui-shadow-card); animation: tin 200ms ease-out; }
@keyframes tin { from { opacity: 0; transform: translateY(6px); } }

/* settings content inside the shared sheet */
.sf-set { display: grid; gap: 12px; margin-top: 12px; color: var(--ui-body); }
.sf-set label, .sf-set .row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; font-size: 13px; }
.sf-set input[type=range] { width: 100%; accent-color: var(--ui-blue); }
.sf-set select, .sf-set input:not([type]) { font: inherit; background: rgba(255, 255, 255, .85) !important; color: var(--ui-ink) !important; border: 1.5px solid rgba(150, 115, 55, .28) !important; border-radius: 8px; padding: 6px; }
.sf-meter { position: relative; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff8e8 0 40%, #f0dfbd 41% 100%); border: 3px solid #a8743f; }
.sf-meter i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-blue); left: 23px; top: 23px; box-shadow: 0 0 0 2px #fff; }

/* ------------------------------------------------------------ layout -- */
@media (min-width: 821px) {
  /* two even columns: quick versus | co-op, then solo | daily */
  .modes { grid-template-columns: 1fr 1fr; }
  .mode.big { grid-column: span 1; }
}
@media (max-width: 820px) {
  /* one scroll container: nothing inside scrolls on its own (standard §5.5) */
  .room-list, .panel { overflow: visible; }
  .seats { grid-template-columns: 1fr; }
  .stage { height: clamp(90px, 16vh, 130px); }
  .stage img:nth-child(1), .stage img:nth-child(3) { display: none; }
  .stage img:nth-child(2) { height: clamp(100px, 17vh, 140px); width: clamp(100px, 17vh, 140px); }
  /* four ships on one row, so the play buttons stay on the first screen */
  .ship { width: auto; flex: 1 1 0; max-width: 74px; min-width: 0; }
  .lobby-head { margin-right: 96px; }
}
@media (max-width: 820px) and (max-height: 600px) {
  .stage { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .title-main { padding-bottom: 40px; }
  .wm-zh { font-size: 40px; }
  .stage { display: none; }
  .tagline { margin: 6px auto 8px; }
  .modes { grid-template-columns: repeat(4, 1fr); }
  .mode, .mode.big { grid-column: span 1; min-height: 56px; padding: 8px 10px; }
  .mode .m-sub { display: none; }
}
/* ------------------------------------------------- narrow screens (2026-10-17 audit) -- */
/* HUD: the pills give way, the buttons never do (the quit button left the screen). */
.hud-l, .hud-c { white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.hud-r { flex: none; }
.ship .pic { width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; }
.code-row input { min-width: 0; }
.sf-set label, .sf-set .row { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); }
.sf-set label > *, .sf-set .row > * { min-width: 0; }
.sf-set input[type=range] { margin: 0; }
.seg button { white-space: nowrap; }
.weapons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.howto > li, .weapons li > * { min-width: 0; }
.howto p, .weapons li { overflow-wrap: break-word; }
.kicker, .online, .pass { white-space: nowrap; }
.panel > h2 { max-width: calc(100% - 100px); }
.lb-tabs.seg { border-radius: 16px; }
@media (max-width: 820px) {
  /* the park buttons sit top-right: a card starts below them, and the ping chip
     bottom-left never covers its last button */
  .panel-screen { padding-top: max(62px, env(safe-area-inset-top)); padding-bottom: max(56px, env(safe-area-inset-bottom)); }
  .o-actions > * { flex: 1 1 auto; }
  .hint { bottom: max(58px, env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  /* one row cannot hold score, time and three buttons: time drops to a second
     row, in the space render.js leaves above the arena on a narrow portrait screen */
  .hud-c { position: fixed; left: 50%; top: calc(52px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 24px); }
  #h-score { font-size: 17px; }
  #hud { gap: 6px; }
  .hud-l, .hud-c { padding: 4px 9px; }
  .hud-l .hud-k, #h-cnum { display: none; }
  .icon-btn { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  /* settings: each label over its control */
  .sf-set label, .sf-set .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .code { font-size: 20px; letter-spacing: .15em; }
  .pass { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .weapons { grid-template-columns: minmax(0, 1fr); }
  .mode:not(.big) .m-sub { display: none; }
  .online, .pass { font-size: 11px; padding: 5px 9px; }
  .seg button { padding: 7px 10px; }
  .panel > h2 { font-size: 15px; padding: 6px 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode, .mode.big { column-gap: 6px; padding: 8px; }
  .panel-screen { padding-top: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage img { animation: none; }
  .banner, .toast div { animation: none; }
}