/* Bundled OFL fonts (library/fonts): a stylized display face for titles/buttons, a rounded UI face for the rest. */
@font-face { font-family: 'Display'; src: url('assets/fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Display'; src: url('assets/fonts/lilita-one-latin-ext-400-normal.woff2') format('woff2'); font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'UI'; font-weight: 700 900; src: url('assets/fonts/nunito-latin-800-normal.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'UI'; font-weight: 700 900; src: url('assets/fonts/nunito-latin-ext-800-normal.woff2') format('woff2'); font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Palette: night-stadium indigo + glossy toy-plastic accents (same values as the 3D scene in game.js) */
:root {
  --accent: #ffc531; --accent-dark: #a86f00; --coral: #ff5d73; --mint: #3ee0a1; --sky: #4cb8ff;
  --ink: #12122e; --panel: rgba(20, 20, 52, .86); --panel-hi: rgba(48, 46, 104, .92); --line: rgba(255, 255, 255, .14); --text: #f6f4ff; --dim: #b9b6dc;
  --u: clamp(11px, 2.1vmin, 18px); /* base UI unit: legible at 800x450, not huge at 1920x1080 */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--ink); color: var(--text);
  font: 800 16px/1.25 "UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
svg { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
svg.gold { color: var(--accent); }

button {
  font: inherit; font-size: calc(var(--u) * 1.15); cursor: pointer; border: 0; border-radius: 14px; padding: .6em 1.3em; color: var(--text);
  background: var(--panel-hi); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); display: inline-flex; align-items: center; justify-content: center; gap: .45em;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
button.big {
  font-family: 'Display', 'UI', sans-serif; font-weight: 400; letter-spacing: .03em; font-size: calc(var(--u) * 1.9);
  background: linear-gradient(180deg, #ffd65c, #ffb31a); color: #3b2300; box-shadow: 0 5px 0 var(--accent-dark); padding: .45em 1.6em;
}
button.wide { min-width: 11em; }
button.big.online { background: linear-gradient(180deg, #7fd2ff, #3fa3f0); color: #06263f; box-shadow: 0 5px 0 #1d6aa8; }
button.subtle { background: rgba(255, 255, 255, .08); box-shadow: none; font-size: var(--u); }
button.reward { background: linear-gradient(180deg, #57eab0, #26c486); color: #04301d; box-shadow: 0 4px 0 #11804f; }
button.icon { width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); padding: 0; border-radius: 50%; background: var(--panel); }
.dot { width: .6em; height: .6em; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 93, 115, .3); }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: var(--u); }
#hud button { pointer-events: auto; }
.hud-left { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hud-right { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pill { display: flex; align-items: center; gap: .45em; padding: .4em .9em; border-radius: 999px; background: var(--panel); font-size: calc(var(--u) * 1.15); }
.pill .sep { width: 1px; height: 1em; background: var(--line); margin: 0 .2em; }
.pill.spin svg { color: var(--sky); }
.meter { width: calc(var(--u) * 8); height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .12); overflow: hidden; }
.meter i { display: block; height: 100%; width: 50%; border-radius: 1em; background: linear-gradient(90deg, var(--sky), var(--mint)); transition: width .15s; }
.meter i.low { background: linear-gradient(90deg, #ff3d55, #ff8a3d); }
#feed { display: flex; flex-direction: column; gap: 4px; }
#feed div { padding: .25em .7em; border-radius: 8px; background: rgba(20, 20, 52, .7); font-size: calc(var(--u) * .9); animation: feedIn .25s ease-out; }
#feed div em { font-style: normal; color: var(--dim); margin: 0 .3em; }
#feed div.me { box-shadow: inset 3px 0 0 var(--accent); }
@keyframes feedIn { from { transform: translateX(-12px); opacity: 0; } }

#board { margin: 0; padding: .45em .6em; list-style: none; border-radius: 12px; background: var(--panel); min-width: calc(var(--u) * 11); font-size: calc(var(--u) * .92); }
#board li { display: flex; gap: .5em; align-items: center; padding: .12em 0; color: var(--dim); }
#board li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
#board li .sw { width: .7em; height: .7em; border-radius: 50%; flex: none; }
#board li.me { color: var(--accent); }
#board li.hu { color: #9ee7ff; }
#board li.me b { color: var(--accent); }
#board li.gap { border-top: 1px dashed var(--line); margin-top: .2em; padding-top: .3em; }
#board li svg { width: 1em; height: 1em; color: var(--accent); }
#board li.boss { color: var(--accent); }
#board li svg.hu { color: #9ee7ff; width: .9em; height: .9em; }

#centerChips { position: absolute; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#eventChip { padding: .4em 1em; border-radius: 999px; background: var(--coral); color: #fff;
  font-size: calc(var(--u) * 1.05); display: flex; gap: .6em; box-shadow: 0 0 0 4px rgba(255, 93, 115, .25); }
#bossChip { display: flex; align-items: center; gap: .5em; padding: .35em .9em; border-radius: 999px; background: #2e2a5c; border: 2px solid var(--accent); font-size: var(--u); }
#bossChip svg { color: var(--accent); }
#bossChip .meter { width: calc(var(--u) * 7); }
#bossChip .meter i { background: linear-gradient(90deg, #ff8a3d, var(--accent)); }
#bossChip span { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 2.2em; }
#zoneChip { padding: .35em 1em; border-radius: 999px; background: var(--panel); border: 2px solid var(--coral); font-size: var(--u); }
#zoneChip.closing { background: var(--coral); color: #fff; }
#leftPill span { color: var(--dim); }
#eventChip span { opacity: .85; font-variant-numeric: tabular-nums; }

#roomChip { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: .6em; padding: .3em .4em .3em .9em;
  border-radius: 999px; background: var(--panel); font-size: calc(var(--u) * .92); pointer-events: auto; white-space: nowrap; }
#roomChip svg { color: var(--sky); }
#roomChip small { color: var(--dim); }
#roomChip #roomInfo { color: var(--dim); }
#roomChip button { font-size: calc(var(--u) * .9); padding: .35em .8em; background: var(--sky); color: #06263f; box-shadow: none; }
#dashKey { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 14px;
  background: var(--panel); font-size: var(--u); --cd: 1; }
#dashKey svg { width: 1.8em; height: 1.8em; padding: .25em; border-radius: 50%; color: #3b2300;
  background: conic-gradient(var(--accent) calc(var(--cd) * 360deg), rgba(255, 255, 255, .15) 0); }
.key { display: inline-block; padding: .1em .5em; border-radius: 6px; background: #fff; color: #1d1d3a; box-shadow: 0 3px 0 #9a98c4; font-size: .95em; }

/* ---------------- big moments ---------------- */
#banner { position: fixed; z-index: 12; left: 50%; top: 24%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
#banner b { display: block; font: 400 calc(var(--u) * 3.6)/1 'Display', 'UI', sans-serif; color: var(--accent); letter-spacing: .03em;
  -webkit-text-stroke: 2px #3b1d00; text-shadow: 0 5px 0 #3b1d00, 0 0 30px rgba(255, 197, 49, .5); white-space: nowrap; }
#banner small { display: block; margin-top: .4em; font-size: calc(var(--u) * 1.2); text-shadow: 0 2px 4px #000; }
#banner.bad b { color: var(--coral); }
#countdown { position: fixed; z-index: 12; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none;
  font: 400 calc(var(--u) * 7)/1 'Display', 'UI', sans-serif; color: #fff; -webkit-text-stroke: 3px #1d1d3a; text-shadow: 0 6px 0 #1d1d3a; }
#countdown.tick { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }

/* tutorial coach: visuals first, a few words, always skippable */
#coach { position: fixed; z-index: 13; left: 50%; bottom: calc(var(--u) * 1.2); transform: translateX(-50%); display: flex; align-items: center; gap: .9em;
  padding: .6em .8em .6em .7em; border-radius: 18px; background: var(--panel); border: 2px solid var(--accent); font-size: var(--u); max-width: calc(100vw - 24px);
  animation: coachIn .3s ease-out; }
@keyframes coachIn { from { transform: translate(-50%, 20px); opacity: 0; } }
@keyframes coachInL { from { transform: translateY(20px); opacity: 0; } }
.coach-icon { display: flex; gap: .25em; align-items: center; font-size: calc(var(--u) * 1.1); }
.coach-icon .key { min-width: 1.7em; text-align: center; }
.coach-icon .keys { display: grid; grid-template-columns: repeat(3, auto); gap: .2em; }
.coach-icon .keys .key:first-child { grid-column: 2; }
.coach-icon svg { width: 2em; height: 2em; color: var(--accent); }
.coach-icon .hand { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(.5em, -.3em); } }
.coach-text { display: flex; flex-direction: column; }
.coach-text small { color: var(--accent); font-size: .85em; }
.coach-text b { font-size: 1.3em; }
#btnSkipTut { font-size: calc(var(--u) * .9); padding: .4em .9em; background: rgba(255, 255, 255, .1); box-shadow: none; }

/* ---------------- screens: content always sits on an opaque card, never directly over the 3D scene ---------------- */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: var(--u); }
.screen.side { justify-content: flex-start; padding-left: max(16px, 6vw); background: linear-gradient(90deg, rgba(10, 10, 32, .65), rgba(10, 10, 32, 0) 60%); }
#paused, #gameover { background: rgba(10, 10, 32, .6); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); display: flex; flex-direction: column;
  align-items: flex-start; gap: calc(var(--u) * .8); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.card.center { align-items: center; text-align: center; }
.card h1 { margin: 0; font: 400 calc(var(--u) * 4.6)/1 'Display', 'UI', sans-serif; letter-spacing: .02em; color: var(--accent);
  -webkit-text-stroke: 2px #3b1d00; text-shadow: 0 6px 0 #3b1d00; }
.card h2 { margin: 0; font: 400 calc(var(--u) * 2.6)/1 'Display', 'UI', sans-serif; letter-spacing: .02em; }
.tagline { margin: 0; color: var(--dim); max-width: 18em; font-size: calc(var(--u) * 1.1); }
.stats { display: flex; gap: 1.2em; font-size: calc(var(--u) * 1.15); }
.stats > span { display: flex; align-items: center; gap: .35em; }
.controls { display: flex; flex-wrap: wrap; gap: .5em 1em; color: var(--dim); font-size: calc(var(--u) * .95); max-width: 22em; }
.controls span { display: flex; align-items: center; gap: .35em; }

.garage { width: min(560px, 54vw); align-items: stretch; }
.garage-head { display: flex; align-items: center; justify-content: space-between; }
.gears { display: flex; align-items: center; gap: .35em; font-size: calc(var(--u) * 1.3); }
.tabs { display: flex; gap: .4em; flex-wrap: wrap; }
.tabs button { font-size: var(--u); padding: .45em .9em; background: rgba(255, 255, 255, .08); box-shadow: none; }
.tabs button.on { background: var(--accent); color: #3b2300; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 7.5), 1fr)); gap: .5em; }
.part { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2em; padding: .6em .7em; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 2px solid transparent; box-shadow: none; font-size: var(--u); }
.part b { font-size: 1.05em; }
.part small { color: var(--dim); font-size: .85em; line-height: 1.2; }
.part.on { border-color: var(--accent); background: rgba(255, 197, 49, .12); }
.part.locked { opacity: .9; }
.part .cost { display: flex; align-items: center; gap: .25em; color: var(--accent); font-size: .9em; }
.part .cost.no { color: var(--coral); }
.part .swatch { width: 100%; height: 1.6em; border-radius: 8px; }
.statbars { display: grid; grid-template-columns: auto 1fr; gap: .35em .8em; align-items: center; font-size: calc(var(--u) * .95); }
.statbars .bar { height: .65em; border-radius: 1em; background: rgba(255, 255, 255, .1); overflow: hidden; }
.statbars .bar i { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--sky), var(--mint)); transition: width .25s; }
#btnGarageDone { align-self: center; }

.results { min-width: min(440px, 92vw); }
.results .by { margin: 0; color: var(--dim); }
.results .final { margin: 0; font: 400 calc(var(--u) * 4.4)/1 'Display', 'UI', sans-serif; color: var(--accent); -webkit-text-stroke: 2px #3b1d00; text-shadow: 0 5px 0 #3b1d00; }
.results .best { margin: 0; color: var(--dim); }
#newBest { color: var(--mint); margin-left: .4em; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; width: 100%; }
.grid div { display: flex; flex-direction: column; padding: .45em .3em; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.grid small { color: var(--dim); font-size: .8em; }
.grid b { font-size: 1.35em; }
.earned { margin: 0; display: flex; align-items: center; gap: .3em; font-size: calc(var(--u) * 1.3); }
.row { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; }

/* menu: level, mode + arena pickers, the top's stats */
.lvrow { display: flex; align-items: center; gap: .6em; width: 100%; font-size: calc(var(--u) * .95); }
.lv { flex: none; padding: .15em .6em; border-radius: 8px; background: var(--accent); color: #3b2300; font-family: 'Display', 'UI', sans-serif; font-weight: 400; letter-spacing: .03em; }
.xpbar { flex: 1; min-width: 5em; height: .65em; border-radius: 1em; background: rgba(255, 255, 255, .12); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; border-radius: 1em; background: linear-gradient(90deg, #ffd65c, #ff8a3d); transition: width .9s cubic-bezier(.3, .9, .3, 1); }
.lvrow small { color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); width: 100%; }
.seg button { flex: 1; font-size: calc(var(--u) * .9); padding: .45em .5em; border-radius: 9px; background: transparent; box-shadow: none; color: var(--dim); white-space: nowrap; }
.seg button.on { background: var(--panel-hi); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }
.seg button.locked { opacity: .55; }
.seg button svg { width: 1em; height: 1em; }
.seg button small { font-size: .8em; }
#btnOnline > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
#onlineCount { font: 800 calc(var(--u) * .7) "UI", sans-serif; letter-spacing: 0; opacity: .8; }
.menu-row { width: 100%; justify-content: flex-start; }
.menu-row button { flex: 1; position: relative; }
.badge { padding: .05em .45em; border-radius: 8px; background: rgba(0, 0, 0, .3); font-size: .8em; white-space: nowrap; }
/* 2.0 menu: a compact grid (level + best on one row, Play and Play online side by side); the part stats live in the garage */
#menu .card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(31em, 46vw); }
#menu .card > * { grid-column: 1 / -1; }
#menu .card > .lvrow { grid-column: 1; }
#menu .card > .stats { grid-column: 2; justify-content: flex-end; }
#menu .card > #btnPlay { grid-column: 1; }
#menu .card > #btnOnline { grid-column: 2; }
#menu .card > .big { justify-content: center; padding: .4em .5em; white-space: nowrap; }
.badge.todo { background: var(--coral); }
.minestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em .6em; width: 100%; font-size: calc(var(--u) * .78); color: var(--dim); }
.minestats div { display: flex; flex-direction: column; gap: .2em; }
.minestats i { display: block; height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .12); overflow: hidden; }
.minestats i b { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--sky), var(--mint)); }
.statbars .bar { position: relative; }
.statbars .bar s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1em; border: 2px solid var(--accent); text-decoration: none; transition: width .2s; }
.part .lvl { display: flex; align-items: center; gap: .25em; color: var(--sky); font-size: .9em; }

/* missions + records */
.profile { width: min(520px, 54vw); align-items: stretch; }
.profile .sub { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * .8); }
.missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45em; }
.missions li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3em .7em; padding: .5em .7em; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.missions li > svg { grid-row: span 2; width: 1.6em; height: 1.6em; color: var(--dim); }
.missions li.done > svg { color: var(--mint); }
.missions li b { font-size: 1em; }
.missions li em { grid-row: span 2; font-style: normal; display: flex; align-items: center; gap: .2em; color: var(--accent); }
.missions li .xpbar { height: .5em; }
.missions li.done .xpbar i { background: var(--mint); }
.missions li small { color: var(--dim); }
.profile .next { margin: 0; color: var(--dim); font-size: calc(var(--u) * .95); }
.profile .next b { color: var(--text); }
.recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 7.5), 1fr)); gap: .4em; }
.recs div { display: flex; flex-direction: column; padding: .4em .6em; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.recs small { color: var(--dim); font-size: .8em; }
.recs b { font-size: 1.15em; }
#btnProfileDone { align-self: center; }

/* results: XP + chips */
.lvrow.over { max-width: 26em; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; }
.chips:empty { display: none; }
.chips span { display: inline-flex; align-items: center; gap: .3em; padding: .25em .7em; border-radius: 999px; background: rgba(62, 224, 161, .16); color: var(--mint); font-size: calc(var(--u) * .9); }
.chips span.lvup { background: var(--accent); color: #3b2300; }
.chips span.rec { background: rgba(255, 197, 49, .16); color: var(--accent); }
.chips svg { width: 1em; height: 1em; }
.results.win .final, .results.win h2 { color: var(--accent); }

/* floating numbers + callouts over the arena */
#pops { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
#pops div { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 calc(var(--u) * 1.3)/1 'Display', 'UI', sans-serif; color: #fff; -webkit-text-stroke: 1.5px #1d1d3a; text-shadow: 0 3px 0 #1d1d3a; will-change: transform, opacity; }
#pops div.dmg { color: #ffb14a; }
#pops div.big { font-size: calc(var(--u) * 2.4); color: var(--accent); -webkit-text-stroke: 2px #3b1d00; text-shadow: 0 4px 0 #3b1d00; }
#pops div.cool { color: #9ee7ff; }
#missionPop { position: fixed; z-index: 14; left: 50%; bottom: calc(var(--u) * 4.2 + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: .7em; padding: .55em 1em; border-radius: 16px;
  background: var(--panel); border: 2px solid var(--mint); font-size: var(--u); animation: coachIn .35s ease-out; pointer-events: none; }
#missionPop > svg { width: 1.8em; height: 1.8em; color: var(--mint); }
#missionPop span { display: flex; flex-direction: column; }
#missionPop small { color: var(--mint); }
#missionPop em { font-style: normal; color: var(--accent); font-size: 1.2em; }

/* loading */
#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 22px; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #2c2466, var(--ink)); }
#loading .logo { font: 400 clamp(36px, 9vmin, 80px)/1 'Display', 'UI', sans-serif; color: var(--accent); -webkit-text-stroke: 2px #3b1d00; text-shadow: 0 6px 0 #3b1d00; }
#loading .bar { width: min(60vw, 360px); height: 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#loading i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }

/* touch controls: floating joystick (appears where the thumb lands) + dash button with a cooldown sweep */
#joystick { position: fixed; z-index: 15; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .25); pointer-events: none; }
#joystick .knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.touch-btn { position: fixed; z-index: 15; right: 26px; bottom: 26px; width: 88px; height: 88px; border-radius: 50%; padding: 0; color: #3b2300; --cd: 1;
  background: conic-gradient(var(--accent) calc(var(--cd) * 360deg), rgba(255, 255, 255, .25) 0); box-shadow: 0 4px 0 var(--accent-dark); }
.touch-btn svg { width: 46px; height: 46px; }

#toast { position: fixed; z-index: 40; left: 50%; bottom: 14%; transform: translateX(-50%); padding: .6em 1.1em; border-radius: 12px; background: var(--panel); font-size: var(--u); }

.lobby { width: min(460px, 50vw); }
.lobby .who { margin: 0; color: var(--sky); }
.codeRow { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.codeRow label { color: var(--dim); }
#codeInput { font: 800 calc(var(--u) * 1.2) "UI", sans-serif; letter-spacing: .25em; text-transform: uppercase; width: 6.5em; padding: .45em .6em; border-radius: 10px;
  border: 2px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--text); user-select: text; -webkit-user-select: text; }
#codeInput:focus { outline: none; border-color: var(--sky); }
.lobby .status { margin: 0; min-height: 1.3em; color: var(--dim); }
.lobby .status.bad { color: var(--coral); }

/* narrow / portrait screens: stack the menu card full-width at the bottom so the top preview stays visible above it */
@media (max-aspect-ratio: 1/1) {
  .screen.side { justify-content: center; align-items: flex-end; padding: 12px; background: linear-gradient(0deg, rgba(10, 10, 32, .75), rgba(10, 10, 32, 0) 60%); }
  .screen.side .card { width: 100%; align-items: center; text-align: center; }
  #menu .card { width: 100%; }
  .garage, .lobby, .profile { width: 100%; max-height: 62vh; }
  #roomChip #roomInfo { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- power-up slot: the held skill with a 10 s countdown ring (desktop: next to the dash key; touch: a button) */
.power-slot { --pt: 1; }
.power-slot .pw { display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: radial-gradient(circle, var(--pc, #ff8a3d) 58%, transparent 60%), conic-gradient(#fff calc(var(--pt) * 360deg), rgba(255, 255, 255, .15) 0); }
.power-slot[data-kind="blast"] { --pc: #ff8a3d; } .power-slot[data-kind="shield"] { --pc: #4cb8ff; }
.power-slot[data-kind="magnet"] { --pc: #c27bff; } .power-slot[data-kind="turbo"] { --pc: #3ee0a1; }
.power-slot[data-kind="anchor"] { --pc: #7f8fc4; } .power-slot[data-kind="decoy"] { --pc: #ff7ce0; }
.part .swatch.trail { background-size: 100% 100%; }
.power-slot.urgent .pw { animation: urgent .5s ease-in-out infinite alternate; }
@keyframes urgent { to { transform: scale(1.12); filter: brightness(1.3); } }
#powerKey { position: absolute; right: 14px; bottom: calc(14px + 3.4em); display: flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 14px;
  background: var(--panel); font-size: var(--u); pointer-events: none; }
#powerKey .pw { width: 2.4em; height: 2.4em; }
#powerKey .pw svg { width: 1.3em; height: 1.3em; }
#btnPower { right: calc(26px + 104px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 76px; height: 76px; background: none; box-shadow: none; }
#btnPower .pw { width: 100%; height: 100%; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
#btnPower .pw svg { width: 38px; height: 38px; }
.done-x { display: none; }

/* ---------------- touch devices: bigger targets, thumb-friendly placement, notch-safe edges */
body.touch { --u: clamp(12px, 2.6vmin, 18px); }
body.touch #btnPause { width: 48px; height: 48px; }
body.touch #btnPause svg { width: 22px; height: 22px; }
body.touch .touch-btn:not(.power-slot) { width: 96px; height: 96px; right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
body.touch .touch-btn:not(.power-slot) svg { width: 50px; height: 50px; }
/* touch: the room chip joins the right column under the pause button, compact (code + invite icon), clear of the spin meter */
body.touch #roomChip { position: static; transform: none; gap: .45em; padding: .2em .25em .2em .7em; }
body.touch #roomChip small, body.touch #roomChip #roomInfo, body.touch #btnInvite span { display: none; }
body.touch #btnInvite { display: grid; place-items: center; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; }
body.touch #btnInvite svg { width: 20px; height: 20px; color: #06263f; }
/* touch: tips and the tutorial coach never sit under the dash / power buttons (landscape: bottom-left; portrait: above them) */
body.touch #missionPop { left: calc(12px + env(safe-area-inset-left)); transform: none; max-width: calc(100vw - 250px - env(safe-area-inset-right)); animation-name: coachInL; }
@media (max-aspect-ratio: 1/1) {
  body.touch #missionPop, body.touch #coach { left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); bottom: calc(132px + env(safe-area-inset-bottom)); animation-name: coachIn; }
}
body.touch #centerChips { top: calc(56px + env(safe-area-inset-top)); }
body.touch button { min-height: 44px; }
.hud-left { left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); }
.hud-right { right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); }

/* ---------------- short screens (phones in landscape): compact HUD, garage and results */
@media (max-height: 520px) {
  .pill { padding: .3em .7em; }
  .meter { width: calc(var(--u) * 6); }
  #board { min-width: calc(var(--u) * 9.5); padding: .3em .5em; font-size: calc(var(--u) * .85); }
  #feed div { font-size: calc(var(--u) * .8); }
  #banner { top: 30%; }
  #banner b { font-size: calc(var(--u) * 2.8); }
  #countdown { font-size: calc(var(--u) * 5.5); }
  #coach { bottom: calc(8px + env(safe-area-inset-bottom)); max-width: calc(100vw - 260px); }
  body.touch #coach { left: calc(12px + env(safe-area-inset-left)); transform: none; max-width: calc(100vw - 250px - env(safe-area-inset-right)); animation-name: coachInL; } /* clear of the dash + power buttons */
  .screen { padding: 8px; }
  .screen.side { padding-left: max(12px, 4vw, env(safe-area-inset-left)); }
  .card { padding: calc(var(--u) * .9) calc(var(--u) * 1.1); gap: calc(var(--u) * .5); max-height: calc(100vh - 16px); border-radius: 18px; }
  .card h1 { font-size: calc(var(--u) * 3.6); }
  .card h2 { font-size: calc(var(--u) * 2.1); }
  button.big { font-size: calc(var(--u) * 1.6); padding: .35em 1.3em; }
  .garage { width: min(640px, 70vw); }
  .garage .parts { grid-template-columns: repeat(4, 1fr); }
  .garage .part small { display: none; }
  .garage .part .cost, .garage .part.on small, .garage .part small:last-child { display: flex; }
  .garage .statbars { grid-template-columns: auto 1fr auto 1fr; }
  .garage #btnGarageDone { display: none; }
  .garage button.done-x { display: grid; place-items: center; margin-left: .6em; width: 44px; height: 44px; background: var(--accent); color: #3b2300; box-shadow: 0 3px 0 var(--accent-dark); }
  .garage-head .gears { margin-left: auto; }
  .results { min-width: min(560px, 80vw); }
  .results .final { font-size: calc(var(--u) * 3); }
  .results .grid div { padding: .3em; }
  .results .row, .results > button { margin: 0; }
  #menu .tagline, #menu .controls { display: none; }
  /* phones in landscape: the menu fits without scrolling (level + stats share a row, Play + Play online side by side; the part stats live in the garage) */
  #menu .card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(540px, 66vw); }
  #menu .card > * { grid-column: 1 / -1; }
  #menu .card > .lvrow { grid-column: 1; }
  #menu .card > .stats { grid-column: 2; justify-content: flex-end; font-size: var(--u); }
  #menu .card > #btnPlay { grid-column: 1; }
  #menu .card > #btnOnline { grid-column: 2; }
  #menu .card > .big { justify-content: center; padding: .3em .5em; font-size: calc(var(--u) * 1.45); white-space: nowrap; }
  .profile { width: min(640px, 70vw); }
  .profile #btnProfileDone { display: none; }
  .profile button.done-x { display: grid; place-items: center; margin-left: .6em; width: 44px; height: 44px; background: var(--accent); color: #3b2300; box-shadow: 0 3px 0 var(--accent-dark); }
  .profile .garage-head .lv { margin-left: auto; }
  .missions li { padding: .35em .6em; }
  #bossChip .meter { width: calc(var(--u) * 5); }
}

/* ---------------- 1.4: settings, name picker, online modes + daily top, Teams / spectate chips, notices */
.titlerow { display: flex; align-items: center; gap: .6em; width: 100%; }
.titlerow h1 { flex: 1; }
.titlerow button.icon { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); background: rgba(255, 255, 255, .08); box-shadow: none; }
#settings { background: rgba(10, 10, 32, .55); z-index: 26; }
.settings { width: min(420px, 92vw); gap: calc(var(--u) * .9); }
.slider { display: grid; grid-template-columns: 5.5em 1fr 2.6em; align-items: center; gap: .7em; width: 100%; font-size: calc(var(--u) * 1.05); }
.slider b { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .14); outline: none; touch-action: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); box-shadow: 0 3px 0 var(--accent-dark); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 1.5em; height: 1.5em; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.setrow { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: .7em; width: 100%; font-size: calc(var(--u) * 1.05); text-align: left; }
.seg button .tag { margin-left: .3em; padding: 0 .35em; border-radius: 6px; background: var(--mint); color: #04301d; font-size: .75em; }

.lobby { width: min(760px, 92vw); display: grid; grid-template-columns: 1fr minmax(11em, 15em); gap: calc(var(--u) * 1.2); align-items: start; }
.lobby-main { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .7); min-width: 0; }
.namerow { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; font-size: calc(var(--u) * .95); }
.namerow > span { color: var(--dim); margin-right: .2em; }
.namerow select { font: 800 calc(var(--u) * .95) "UI", sans-serif; color: var(--text); background: rgba(0, 0, 0, .3); border: 2px solid var(--line); border-radius: 10px; padding: .35em .4em; }
.namerow select:focus { outline: none; border-color: var(--sky); }
.namerow button.icon { width: 2.3em; height: 2.3em; background: var(--panel-hi); }
.dailytop { display: flex; flex-direction: column; gap: .4em; padding: .7em .8em; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.dailytop .sub { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * .78); }
#topList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .15em; font-size: calc(var(--u) * .9); counter-reset: r; }
#topList li { display: flex; gap: .5em; color: var(--dim); counter-increment: r; }
#topList li::before { content: counter(r) "."; width: 1.6em; text-align: right; }
#topList li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
#topList li.me { color: var(--accent); }
#topList li.empty::before { content: ''; width: 0; }
.results .daily { margin: 0; color: var(--accent); font-size: calc(var(--u) * .95); }

#teamChip { display: flex; align-items: center; gap: .8em; padding: .3em .9em; border-radius: 999px; background: var(--panel); font-size: calc(var(--u) * 1.1); }
#teamChip b { min-width: 2.4em; padding: .05em .5em; border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; }
#teamChip .t0 { background: #4cb8ff; color: #06263f; } #teamChip .t1 { background: #ff5d73; color: #3a0612; }
#teamChip span { color: var(--dim); font-variant-numeric: tabular-nums; }
#specChip { display: flex; align-items: center; gap: .5em; padding: .3em .9em; border-radius: 999px; background: var(--panel); font-size: var(--u); color: var(--dim); }
#specChip svg { color: var(--sky); }
#missionPop.hint { border-color: var(--sky); }
#missionPop.hint > svg, #missionPop.hint small { color: var(--sky); }
#board li .tm { width: .35em; height: 1em; border-radius: 3px; flex: none; }
#spectate { pointer-events: none; }

@media (max-aspect-ratio: 1/1) {
  .lobby { grid-template-columns: 1fr; }
  .dailytop { display: none; }
}
@media (max-height: 520px) {
  .lobby { width: min(760px, 96vw); }
  .lobby .tagline { display: none; }
  .settings { gap: calc(var(--u) * .55); }
}
#specChip button { display: none; font-size: calc(var(--u) * .85); padding: .3em .8em; background: rgba(255, 255, 255, .12); box-shadow: none; }
#hud.spectating #specChip button { display: inline-flex; }
#hud.spectating .hud-left .pill, #hud.spectating #dashKey, #hud.spectating #powerKey, #hud.spectating #btnPause { display: none !important; }
button:disabled { filter: saturate(.35) brightness(.85); cursor: default; transform: none; }
button.big:disabled { font-size: calc(var(--u) * 1.25); box-shadow: none; }

/* ---------------- 1.5: how to play, weekly rule, quick chat, arena vote, season + badges */
.weekly { margin: 0; padding: .3em .7em; border-radius: 10px; background: rgba(62, 224, 161, .14); color: var(--mint); font-size: calc(var(--u) * .85); width: 100%; }
.weekly:empty { display: none; }
#howto { background: rgba(10, 10, 32, .6); z-index: 25; }
.howto { width: min(920px, 94vw); align-items: stretch; }
.howgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 15), 1fr)); gap: .6em; }
.howgrid section { display: flex; flex-direction: column; gap: .35em; padding: .6em .8em; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.howgrid h3 { margin: 0; font: 400 calc(var(--u) * 1.2)/1.1 'Display', 'UI', sans-serif; color: var(--accent); letter-spacing: .02em; }
.howgrid p { margin: 0; display: flex; gap: .5em; align-items: flex-start; font-size: calc(var(--u) * .88); color: var(--dim); line-height: 1.25; }
.howgrid p b { color: var(--text); }
.howgrid p svg { flex: none; width: 1.5em; height: 1.5em; padding: .15em; border-radius: 50%; color: #fff; background: var(--ic, var(--panel-hi)); }
#btnHowDone { align-self: center; }
.chat { position: relative; pointer-events: auto; }
.chat button.icon { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); }
.chatmenu { position: absolute; left: calc(100% + 6px); top: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 5px; border-radius: 12px; background: var(--panel); }
.chatmenu button { font-size: calc(var(--u) * .85); padding: .35em .7em; background: var(--panel-hi); box-shadow: none; white-space: nowrap; }
.chatmenu button .key { font-size: .8em; padding: 0 .35em; margin-right: .2em; }
#pops div.say { font: 800 calc(var(--u) * 1.05)/1 "UI", sans-serif; color: #1d1d3a; -webkit-text-stroke: 0; text-shadow: none; background: #fff; padding: .35em .7em; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.vote { display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; align-items: center; font-size: calc(var(--u) * .9); }
.vote > span { color: var(--dim); }
.vote button { font-size: calc(var(--u) * .9); padding: .35em .8em; background: var(--panel-hi); box-shadow: none; }
.vote button.on { box-shadow: inset 0 0 0 2px var(--accent); }
.vote button b { margin-left: .3em; color: var(--accent); }
#specVote { pointer-events: auto; padding: .35em .6em; border-radius: 14px; background: var(--panel); }
.season { display: flex; flex-direction: column; gap: .3em; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 9.5), 1fr)); gap: .4em; }
.badges > div { display: flex; flex-direction: column; gap: .25em; padding: .45em .6em; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: calc(var(--u) * .82); color: var(--dim); }
.badges > div b { display: flex; align-items: center; gap: .3em; color: var(--text); font-size: 1.05em; }
.badges > div svg { width: 1.2em; height: 1.2em; color: rgba(255, 255, 255, .25); }
.badges > div.done svg { color: var(--accent); }
.badges .xpbar { height: .4em; }
#board li .tm.t1cb { background: repeating-linear-gradient(45deg, #ffb02e 0 3px, #8a5200 3px 6px) !important; }
@media (max-height: 520px) {
  .howto .howgrid { grid-template-columns: repeat(3, 1fr); }
  .howto #btnHowDone { display: none; }
  .howto button.done-x { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; background: var(--accent); color: #3b2300; box-shadow: 0 3px 0 var(--accent-dark); }
}
@media (max-aspect-ratio: 1/1) { .howto { width: 100%; max-height: 70vh; } }
.howto { background: #19183f; }
.howto button.done-x { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; background: var(--accent); color: #3b2300; box-shadow: 0 3px 0 var(--accent-dark); }
.howto #btnHowDone { display: none; }

/* ---------------- 1.6: private room lobby, watching live, run story, near miss, results emotes, sets, phone settings */
.room { width: min(520px, 52vw); align-items: stretch; gap: calc(var(--u) * .6); }
.room .garage-head { gap: .6em; }
.room .garage-head h2 { flex: 1; }
.room .code { padding: .1em .55em; border-radius: 10px; background: rgba(0, 0, 0, .3); font: 400 calc(var(--u) * 1.7)/1.2 'Display', 'UI', sans-serif; letter-spacing: .12em; color: var(--accent); }
.room button.done-x.show { display: grid; place-items: center; width: 44px; height: 44px; background: var(--sky); color: #06263f; box-shadow: 0 3px 0 #1d6aa8; }
.room .tagline { max-width: none; font-size: var(--u); }
.room .sub { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * .78); }
.players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3em .5em; max-height: 9.5em; overflow-y: auto; }
.players li { display: flex; align-items: center; gap: .45em; min-width: 0; padding: .35em .6em; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: calc(var(--u) * .95); }
.players li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players li small { color: var(--dim); }
.players li svg { width: 1em; height: 1em; flex: none; color: var(--sky); }
.players li .tm { width: .4em; height: 1.1em; border-radius: 3px; flex: none; }
.players li b { margin-left: auto; display: flex; align-items: center; gap: .2em; color: var(--accent); font-size: .8em; flex: none; }
.players li b svg { color: var(--accent); }
.players li.me { box-shadow: inset 0 0 0 2px rgba(255, 197, 49, .5); }
.room .seg button:disabled { filter: none; opacity: .55; }
.room .seg button.on:disabled { opacity: 1; }
.room .status { margin: 0; min-height: 1.2em; color: var(--dim); font-size: calc(var(--u) * .9); }
.room .status.bad { color: var(--coral); }
.room-row { justify-content: stretch; }
.room-row .big { flex: 2; }
.room-row .wide { flex: 1; min-width: 0; }
.lobby-row { justify-content: flex-start; }
.results .near { margin: 0; padding: .3em .9em; border-radius: 999px; background: rgba(76, 184, 255, .14); color: #9ee7ff; font-size: calc(var(--u) * .95); }
.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; width: 100%; }
.story:empty { display: none; }
.story div { display: flex; flex-direction: column; gap: .1em; padding: .4em .5em; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); min-width: 0; }
.story small { color: var(--dim); font-size: .78em; text-transform: uppercase; letter-spacing: .05em; }
.story b { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story b i { width: .8em; height: .8em; border-radius: 50%; flex: none; }
.emotes { display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; }
.emotes button { font-size: calc(var(--u) * .85); padding: .3em .8em; background: rgba(255, 255, 255, .1); box-shadow: none; }
#specChip .live { padding: .05em .45em; border-radius: 6px; background: var(--coral); color: #fff; font-size: .8em; letter-spacing: .06em; }
#specChip button.cyc { padding: .3em .6em; min-width: 2.2em; justify-content: center; }
.parts.sets { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 13), 1fr)); }
.set { display: flex; flex-direction: column; gap: .3em; padding: .6em .7em; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 2px solid transparent; }
.set.done { border-color: rgba(62, 224, 161, .5); }
.set small { color: var(--dim); font-size: .85em; }
.set .chips { justify-content: flex-start; }
.set .chips i { font-style: normal; padding: .1em .55em; border-radius: 999px; background: rgba(0, 0, 0, .3); color: var(--dim); font-size: .82em; }
.set .chips i.got { background: rgba(62, 224, 161, .18); color: var(--mint); }
.set em { font-style: normal; color: var(--accent); font-size: .85em; }
.set button { align-self: flex-start; font-size: .9em; padding: .35em .9em; }
.menu-row .badge:empty { display: none; }
body:not(.touch) .touch-only { display: none; }
@media (max-aspect-ratio: 1/1) {
  .room { width: 100%; max-height: 72vh; overflow-y: auto; }
}
@media (max-height: 520px) {
  .room { width: min(620px, 72vw); max-height: calc(100vh - 16px); overflow-y: auto; }
  .room .tagline { display: none; }
  .players { max-height: 5.2em; }
  .story div { padding: .25em .4em; }
  .story small { font-size: .7em; }
  .menu-row button { padding-left: .5em; padding-right: .5em; }
  .results { gap: calc(var(--u) * .35); } /* the run story is one row more: phones in landscape still fit it all */
  .results .final { font-size: calc(var(--u) * 2.6); }
  .results .grid div, .results .story div { padding-top: .18em; padding-bottom: .18em; }
}
.legal { margin: 0; max-width: 30em; color: var(--dim); font-size: calc(var(--u) * .78); line-height: 1.35; text-align: left; }