/* Swirl Whirl Woo 3D - UI chrome rebuilt as shapes + the Omnes font (no bitmaps except the posters).
   --s: HUD scale (game px -> CSS px), set from the window size in ui.js. Posters are 700 x 520 cards
   whose contents size with container units (cqw). */
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-RegularItalic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-MediumItalic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-Semibold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-SemiboldItalic.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Omnes; src: url(../../assets/fonts/Omnes-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --s: 1;
  --blue: #0b63c4; --blue-d: #034f9c; --cyan: #1d9fd6; --cyan-l: #7fd0ef; --navy: #1a4898;
  --pink: #f0386b; --pink-d: #c8174a; --yellow: #ffe23d; --gold: #ffb800;
  --tint: #d6434c; --tint-a: rgba(214, 67, 76, 0.4); --tint-m: rgba(214, 67, 76, 0.75);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
/* iOS: no selection loupe, callout or zoom on tap-and-hold / double tap, on any element (on html / body alone it
   still happened); main.js also blocks the pinch gesture */
*, *::before, *::after { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
html, body { margin: 0; height: 100%; background: #1f1f1f; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }
#game { position: fixed; inset: 0; background: #1f1f1f; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: absolute; inset: 0; pointer-events: none; font-family: Omnes, 'Trebuchet MS', system-ui, sans-serif; color: #fff; overflow: hidden; }
.noscript { color: #ccc; font: 16px system-ui; text-align: center; margin-top: 40vh; }
button { font: inherit; }

/* ---- shared text looks -------------------------------------------------------------------------- */
.t-outline { -webkit-text-stroke: 0.22em #fff; paint-order: stroke fill; }
.t-blue { color: var(--cyan); font-weight: 700; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase;
  -webkit-text-stroke: 0.2em #fff; paint-order: stroke fill; filter: drop-shadow(0 0.08em 0.06em rgba(3, 79, 156, 0.55)); }

/* ---- HUD ---------------------------------------------------------------------------------------------- */
.hud { position: absolute; inset: 0; transition: opacity 0.25s; }
.hud.off { opacity: 0; }
.hud-block { position: absolute; transform: scale(var(--s)); }
.hud-tl { left: var(--safe-l); top: var(--safe-t); width: 310px; height: 100px; transform-origin: 0 0; }
.hud-tr { right: var(--safe-r); top: var(--safe-t); transform-origin: 100% 0; padding: 10px 12px 0 0; white-space: nowrap; }
.hud-title { position: absolute; left: 20px; top: 9px; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.hud-title .joy { font-size: 22px; }
.hud-title .score { font-size: 12px; font-weight: 700; font-style: italic; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 0 #6eb6dc, 1px 0 0 #6eb6dc, -1px 0 0 #6eb6dc, 0 -1px 0 #6eb6dc, 0 2px 3px rgba(3, 79, 156, 0.5); letter-spacing: 0.01em; }
.meter { position: absolute; left: 10px; top: 42px; width: 290px; height: 28px; }
.meter .frame { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(#fff, #eef4f9);
  box-shadow: 0 0 0 1.5px rgba(127, 208, 239, 0.9), 0 3px 4px rgba(3, 79, 156, 0.35), inset 0 -2px 0 rgba(127, 208, 239, 0.6); }
.meter .glow { position: absolute; inset: -5px; border-radius: 19px; opacity: 0; box-shadow: 0 0 10px 5px #fff59a, 0 0 22px 8px rgba(255, 70, 150, 0.8); }
.meter .track { position: absolute; left: 8px; right: 8px; top: 8px; height: 12px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(#8f8f8f, #b8b8b8); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.meter .fill, .meter .fill2 { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; }
.meter .fill2 { background: var(--tint-a); }
.meter .fill { background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), var(--tint); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18); }
.meter .boost { position: absolute; top: -2px; bottom: -2px; left: 86.67%; width: 2px; background: #fff; box-shadow: 0 0 4px #fff; display: none; }
.meter .boost.on { display: block; }
.marker { position: absolute; top: 25px; left: 0; width: 0; height: 30px; }
.marker .carrot { position: absolute; left: -7px; top: 0; width: 0; height: 0; border: 7px solid transparent; border-top: 0; border-bottom: 8px solid var(--tint-m); filter: drop-shadow(0 -1px 0 #fff); }
.marker .pct { position: absolute; color: #fff; top: 7px; width: 74px; height: 25px; border-radius: 0 0 14px 14px; display: flex; align-items: center; justify-content: center;
  background: var(--tint-m); box-shadow: 0 0 0 2px #fff, 0 3px 4px rgba(3, 79, 156, 0.35); font-size: 17px; font-weight: 700; font-style: italic; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.hud-tr .stage { font-size: 22px; }
.hud-tr .name { font-size: 15px; margin-left: 4px; color: var(--tint); font-weight: 700; font-style: italic; text-transform: uppercase;
  -webkit-text-stroke: 0.22em #fff; paint-order: stroke fill; filter: drop-shadow(0 0.08em 0.06em rgba(3, 79, 156, 0.45)); }

.hud-buttons { position: absolute; left: 50%; bottom: var(--safe-b); width: 700px; height: 60px; transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 100%;
  transition: transform 0.25s ease-out; }
.hud-buttons.hidden { transform: translateX(-50%) scale(var(--s)) translateY(64px); transition-timing-function: ease-in; }
.hud-buttons .pill { position: absolute; top: 12px; width: 148px; height: 31px; font-size: 14px; pointer-events: auto; }
.hud-buttons .b-pause { left: 96px; } .hud-buttons .b-quit { left: 452px; }
.hud-buttons .b-mute { position: absolute; left: 330px; top: 10px; width: 40px; height: 36px; pointer-events: auto; }
body.is-touch .hud-buttons { display: none; }
.hud-corner { position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 46px * var(--s)); display: none; gap: 8px; padding-right: 12px; transform-origin: 100% 0; }
body.is-touch .hud-corner { display: flex; }
.hud-corner .round { width: calc(44px * max(var(--s), 0.85)); height: calc(44px * max(var(--s), 0.85)); pointer-events: auto; }

/* ---- buttons (pill: the original's white button, pink highlight on hover / focus) -------------------- */
.pill { position: absolute; border: 0; padding: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; outline: none;
  color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden;
  background: linear-gradient(#ffffff 0%, #ffffff 45%, #e6eef6 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 196, 226, 0.7), 0 0.12em 0 #7aa9d6, 0 0.2em 0.35em rgba(3, 50, 110, 0.35);
  transition: transform 0.08s, color 0.15s; }
.pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.15s;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #ff6f93, var(--pink) 45%, var(--pink-d)); }
.pill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent); }
.pill > span { position: relative; z-index: 1; }
.pill:hover, .pill:focus-visible, .pill.active { color: var(--yellow); }
.pill:hover::before, .pill:focus-visible::before, .pill.active::before { opacity: 1; }
.pill:hover::after, .pill:focus-visible::after { opacity: 1; animation: sheen 0.6s ease-out; left: 120%; }
.pill:active { transform: translateY(0.08em) scale(0.98); }
@keyframes sheen { from { left: -60%; } to { left: 120%; } }
.round { border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--blue);
  background: linear-gradient(#fff, #e3ecf5); box-shadow: inset 0 0 0 1px rgba(160, 196, 226, 0.7), 0 2px 0 #7aa9d6, 0 3px 6px rgba(3, 50, 110, 0.35); }
.round svg, .b-mute svg { width: 62%; height: 62%; }
.b-mute { border: 0; background: none; cursor: pointer; color: var(--blue); padding: 0; filter: drop-shadow(0 1px 0 #fff); }
.muted .ic-on { display: none; } .ic-off { display: none; } .muted .ic-off { display: inline; }

/* ---- popups ----------------------------------------------------------------------------------------- */
.popups { position: absolute; inset: 0; }
.pts { position: absolute; left: 0; top: 0; font-size: calc(30px * var(--s)); font-weight: 700; font-style: italic; letter-spacing: -0.02em; white-space: nowrap; will-change: transform, opacity; }
.pts span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); color: var(--yellow); -webkit-text-stroke: 0.14em #fff7b0; paint-order: stroke fill;
  text-shadow: 0 0.04em 0 #e09a00; }
.pts span.g1 { opacity: 0.45; } .pts span.g2 { opacity: 0.22; }
.msg { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); text-align: center; font-weight: 700; line-height: 1.05; white-space: pre-line;
  font-size: calc(38px * var(--s)); color: var(--yellow); -webkit-text-stroke: 0.12em #fff59a; paint-order: stroke fill; text-shadow: 0 0.05em 0 #d68a00, 0 0 0.4em rgba(255, 255, 255, 0.5);
  animation: msg 1.5s linear forwards; }
.msg b { display: block; font-size: 0.82em; color: #ffd12a; }
@keyframes msg { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); color: #fff; } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  18% { transform: translate(-50%, -50%) scale(1); color: var(--yellow); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1); } }

/* ---- touch controls ------------------------------------------------------------------------------------ */
.touch { position: absolute; inset: 0; display: none; }
body.is-touch .touch.on { display: block; }
.touch .pad { position: absolute; bottom: calc(var(--safe-b) + 3vmin); display: flex; gap: 3vmin; }
.touch .pad.l { left: calc(var(--safe-l) + 3vmin); flex-direction: row; }
.touch .pad.r { right: calc(var(--safe-r) + 3vmin); flex-direction: column; }
.tbtn { width: clamp(77px, 20.4vmin, 134px); height: clamp(77px, 20.4vmin, 134px); border-radius: 50%; pointer-events: auto; touch-action: none;
  display: grid; place-items: center; color: rgba(11, 99, 196, 0.85);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.42) 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 10px rgba(3, 50, 110, 0.3); backdrop-filter: blur(2px); transition: transform 0.06s, background 0.06s; }
.tbtn svg { width: 46%; height: 46%; }
.tbtn.down { transform: scale(0.92); background: radial-gradient(circle at 50% 35%, rgba(255, 120, 160, 0.9), rgba(240, 56, 107, 0.7) 70%); color: var(--yellow); }

/* ---- poster screens -------------------------------------------------------------------------------------- */
.screen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: rgba(12, 22, 34, 0.62);
  animation: fadein 0.25s ease-out; container-type: size; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
.screen.clear { background: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* The 700 x 520 card is as big as fits with a margin of one modal button's height (32 of its 520) on every
   side, in any orientation: width + 2 * 32/700 width <= the screen's width, height + 2 * 32/520 height <= its
   height (cq units: the .screen inside the safe area). Corners round like the buttons (radius 16): the posters
   are white in their corners. */
.card { position: relative; width: min(calc(100vw * 700 / 764), calc(100vh * 700 / 584)); width: min(calc(100cqw * 700 / 764), calc(100cqh * 700 / 584));
  aspect-ratio: 700 / 520; container-type: inline-size; border-radius: calc(100% * 16 / 700) / calc(100% * 16 / 520);
  box-shadow: 0 1vmin 5vmin rgba(0, 0, 0, 0.45); overflow: hidden; background: #2a3a4a; }
@supports not (aspect-ratio: 1) { .card { height: min(calc(100vh * 520 / 584), calc(100vw * 520 / 764)); } }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.card .pill { font-size: 2.1cqw; }
.card .stat { position: absolute; color: var(--navy); font-weight: 600; white-space: nowrap; line-height: 1; }
.card .hint { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font-size: 1.7cqw; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.end img { transition: none; }

/* ---- loading ------------------------------------------------------------------------------------------------ */
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #39b6e3, #1777b8 70%, #0d4f86); pointer-events: auto; }
.loading .box { width: min(70vw, 420px); text-align: center; }
.loading h1 { margin: 0 0 4vmin; font-size: clamp(34px, 9vmin, 76px); font-weight: 700; font-style: italic; color: var(--yellow); letter-spacing: -0.02em; line-height: 0.95;
  -webkit-text-stroke: 0.1em #fff8b8; paint-order: stroke fill; text-shadow: 0 0.06em 0 #d39600, 0 0.12em 0.3em rgba(0, 0, 0, 0.3); }
.loading .bar { height: 18px; border-radius: 9px; background: #fff; padding: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
.loading .bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--pink), #ff8a5c); transition: width 0.2s; }
.loading p { margin: 2.5vmin 0 0; font-weight: 600; font-size: 15px; color: #dff3fb; }
.loading.err p { color: #ffd7d7; }

/* ---- debug overlay -------------------------------------------------------------------------------------- */
.dbg { position: absolute; left: 6px; bottom: 6px; font: 11px/1.35 ui-monospace, monospace; color: #fff; text-shadow: 0 1px 2px #000; white-space: pre; display: none; }
.dbg.on { display: block; }