@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/russo-one-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/russo-one-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/russo-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #07051a;
  --bg2: #120a2e;
  --panel: rgba(18, 12, 46, .82);
  --line: rgba(160, 140, 255, .28);
  --text: #e8ecff;
  --dim: rgba(232, 236, 255, .62);
  --p1: #22e6ff;
  --p2: #ff2fd6;
  --gold: #ffcf4d;
  --warn: #ff5e3a;
  --ok: #4dff7a;
  --font: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #030209;
  color: var(--text); font-family: var(--font);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
body {
  display: flex; align-items: center; justify-content: center;
  padding: var(--st) var(--sr) var(--sb) var(--sl);
  /* desktop side fields: dark, with a faint neon haze toward the game */
  background:
    radial-gradient(ellipse at 50% 50%, rgba(122, 92, 255, .10), transparent 60%),
    #030209;
}

#frame {
  --aw: calc(100vw - var(--sl) - var(--sr));
  --ah: calc(100dvh - var(--st) - var(--sb));
  position: relative;
  width: min(var(--aw), calc(var(--ah) * 9 / 16));
  height: min(var(--ah), calc(var(--aw) * 16 / 9));
  container-type: size;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(122, 92, 255, .18), 0 0 0 1px rgba(122, 92, 255, .14);
}
@supports not (height: 100dvh) { #frame { --ah: calc(100vh - var(--st) - var(--sb)); } }

canvas#game { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: 4cqw; }
#ui > * { pointer-events: auto; }

/* ---------- boot ---------- */
.boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqw; background: var(--bg); z-index: 50; transition: opacity .3s; }
.boot.gone { opacity: 0; pointer-events: none; }
.spinner { width: 10cqw; height: 10cqw; border-radius: 50%; border: .8cqw solid rgba(34, 230, 255, .2); border-top-color: var(--p1); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 4cqw 5cqw 5cqw;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(7, 5, 26, .88), rgba(7, 5, 26, .95));
  animation: fadein .18s ease-out;
}
.screen::-webkit-scrollbar { display: none; }
.screen.clear { background: none; }
.overlay { background: rgba(5, 3, 18, .78); backdrop-filter: blur(2px); justify-content: center; align-items: center; text-align: center; }
@keyframes fadein { from { opacity: 0; transform: translateY(1.5cqw); } to { opacity: 1; transform: none; } }

.topbar { display: flex; align-items: center; gap: 3cqw; min-height: 11cqw; margin-bottom: 3cqw; flex: none; }
.topbar h2 { flex: 1; margin: 0; font-size: 5.4cqw; font-weight: 400; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .right { margin-left: auto; display: flex; gap: 2cqw; align-items: center; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: .6cqw solid var(--p1); outline-offset: .6cqw; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2cqw;
  min-height: 12cqw; padding: 0 5cqw;
  border-radius: 3cqw; border: .5cqw solid var(--p1);
  color: var(--text); background: rgba(34, 230, 255, .1);
  font-size: 4.4cqw; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 0 3cqw rgba(34, 230, 255, .3), inset 0 0 2cqw rgba(34, 230, 255, .12);
  transition: transform .08s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn:hover { background: rgba(34, 230, 255, .18); }
.btn.pink { border-color: var(--p2); background: rgba(255, 47, 214, .1); box-shadow: 0 0 3cqw rgba(255, 47, 214, .3), inset 0 0 2cqw rgba(255, 47, 214, .12); }
.btn.pink:hover { background: rgba(255, 47, 214, .18); }
.btn.ghost { border-color: var(--line); background: rgba(255, 255, 255, .04); box-shadow: none; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-col { display: flex; flex-direction: column; gap: 3cqw; width: 100%; max-width: 76cqw; }

.icon-btn {
  width: 11cqw; height: 11cqw; flex: none; border-radius: 3cqw;
  border: .4cqw solid var(--line); background: rgba(255, 255, 255, .04);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 5cqw; color: var(--text);
}
.icon-btn:hover { border-color: var(--p1); }
.icon-btn svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- logo ---------- */
.logo { text-align: center; line-height: 1; }
.logo-text {
  display: inline-block; font-size: 10.5cqw; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--p1) 0%, #b7f6ff 46%, #ffc4f4 54%, var(--p2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 1.2cqw rgba(34, 230, 255, .55)) drop-shadow(0 0 2.6cqw rgba(255, 47, 214, .35));
}
.tag { margin-top: 1.6cqw; font-size: 3.4cqw; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- lobby ---------- */
.lobby { padding-top: 3cqw; background: linear-gradient(180deg, rgba(7, 5, 26, .7), rgba(7, 5, 26, .86)); }
.lobby .topbar { position: absolute; top: 3cqw; right: 5cqw; margin: 0; min-height: 0; z-index: 2; }
.lobby .logo { margin: 4cqw 0 5cqw; }
.label { font-size: 3.1cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 2cqw; }

.scen-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-bottom: 5cqw; flex: none; }
.scen {
  grid-column: 1 / -1; height: 27cqw; position: relative; min-width: 0;
  border-radius: 3.4cqw; padding: 3cqw 3.4cqw; text-align: left;
  border: .5cqw solid var(--line); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #120a2e;
}
.scen .art { position: absolute; inset: 0; z-index: 0; }
.scen > .name, .scen > .meta { position: relative; z-index: 1; }
.scen .name { font-size: 4.6cqw; text-shadow: 0 0 2cqw rgba(0, 0, 0, .8); }
.scen .meta { font-size: 2.9cqw; color: var(--dim); margin-top: .8cqw; }
.scen.on { border-color: var(--p2); box-shadow: 0 0 3.4cqw rgba(255, 47, 214, .35); }
.scen.soon .name { font-size: 3.1cqw; line-height: 1.15; }
.scen.soon { grid-column: auto; height: 17cqw; padding: 2cqw 2.2cqw; cursor: default; background: #0e0a24; }
.scen.soon .art, .scen.soon .name { opacity: .55; filter: grayscale(.5); }
.scen.soon .badge { top: 1.6cqw; right: 1.6cqw; font-size: 2.2cqw; padding: .6cqw 1.4cqw; }
.badge { position: absolute; top: 2.4cqw; right: 2.4cqw; font-size: 2.6cqw; padding: .8cqw 2cqw; border-radius: 9cqw; background: rgba(0, 0, 0, .55); border: .3cqw solid var(--line); letter-spacing: .08em; text-transform: uppercase; z-index: 2; }
.scen .check { position: absolute; top: 2.4cqw; right: 2.4cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--p2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 3.4cqw; z-index: 2; box-shadow: 0 0 2cqw var(--p2); }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; flex: none; }
.mode {
  --c: var(--p1);
  position: relative; text-align: left; min-height: 30cqw;
  padding: 3.6cqw; border-radius: 3.6cqw;
  border: .5cqw solid color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(10, 6, 32, .7) 70%);
  box-shadow: 0 0 3cqw color-mix(in srgb, var(--c) 25%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.2cqw;
  transition: transform .08s;
}
.mode:active { transform: scale(.97); }
.mode .ico { position: absolute; top: 3cqw; left: 3.4cqw; width: 12cqw; height: 9cqw; }
.mode .ico svg { width: 100%; height: 100%; }
.mode .t { font-size: 4.6cqw; line-height: 1.1; }
.mode .d { font-size: 2.9cqw; color: var(--dim); line-height: 1.3; }
.mode.c2 { --c: var(--p2); }
.mode.c3 { --c: #ffb02e; }
.mode.c4 { --c: #9d5cff; }
.foot { margin-top: auto; padding-top: 4cqw; text-align: center; font-size: 2.6cqw; color: rgba(232, 236, 255, .35); }

/* ---------- settings ---------- */
.rows { display: flex; flex-direction: column; gap: 3cqw; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; min-height: 13cqw; padding: 0 4cqw; border-radius: 3cqw; background: var(--panel); border: .3cqw solid var(--line); }
.row .k { font-size: 4.2cqw; }
select {
  font: inherit; font-size: 4cqw; color: var(--text); background: #1a1140;
  border: .4cqw solid var(--line); border-radius: 2.4cqw; padding: 1.6cqw 3cqw; max-width: 50cqw;
}
.toggle { width: 16cqw; height: 8.4cqw; border-radius: 9cqw; background: rgba(255, 255, 255, .1); border: .4cqw solid var(--line); position: relative; transition: background .15s; }
.toggle::after { content: ''; position: absolute; top: .8cqw; left: .8cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--dim); transition: transform .15s, background .15s; }
.toggle[aria-checked="true"] { background: rgba(34, 230, 255, .3); border-color: var(--p1); }
.toggle[aria-checked="true"]::after { transform: translateX(7.6cqw); background: var(--p1); box-shadow: 0 0 2cqw var(--p1); }

/* ---------- campaign ---------- */
.stars-total { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 4cqw; color: var(--gold); white-space: nowrap; }
.world { margin-bottom: 6cqw; }
.world-h { display: flex; align-items: baseline; gap: 2cqw; margin-bottom: 2.4cqw; }
.world-h .n { font-size: 3cqw; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.world-h .wn { font-size: 5cqw; }
.world-h .ws { margin-left: auto; font-size: 3.2cqw; color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.stage {
  --c: var(--p1);
  position: relative; min-height: 23cqw; border-radius: 3cqw; padding: 2cqw 1.6cqw;
  border: .4cqw solid color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 10%, rgba(10, 6, 32, .75));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw;
}
.stage .num { font-size: 6cqw; line-height: 1; text-shadow: 0 0 2cqw var(--c); }
.stage .sn { font-size: 2.5cqw; color: var(--dim); text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage.boss { --c: var(--p2); }
.stage.locked { opacity: .35; cursor: default; filter: grayscale(.6); }
.stage.next { box-shadow: 0 0 3cqw var(--c); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 1cqw var(--c); } }
.st { display: inline-flex; gap: .4cqw; font-size: 3.4cqw; letter-spacing: 0; }
.st i { font-style: normal; color: rgba(255, 255, 255, .18); }
.st i.on { color: var(--gold); text-shadow: 0 0 1.4cqw rgba(255, 207, 77, .8); }

/* ---------- picker (bot/duo) ---------- */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-bottom: 6cqw; }
.seg button { min-height: 12cqw; border-radius: 3cqw; border: .4cqw solid var(--line); background: rgba(255, 255, 255, .04); font-size: 3.8cqw; }
.seg button[aria-pressed="true"] { border-color: #ffb02e; background: rgba(255, 176, 46, .16); box-shadow: 0 0 2.6cqw rgba(255, 176, 46, .4); }
.arenas { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-bottom: 6cqw; }
.arena { position: relative; min-height: 25cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; border: .4cqw solid var(--line); background: rgba(16, 11, 42, .92); text-align: left; display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqw; overflow: hidden; }
.arena .an { font-size: 3.8cqw; }
.arena .aw { font-size: 2.6cqw; color: var(--dim); }
.arena[aria-pressed="true"] { border-color: var(--p1); background: #0f2440; box-shadow: 0 0 2.6cqw rgba(34, 230, 255, .4); }
.arena.locked { cursor: default; }
.arena.locked > :not(.lock) { opacity: .4; }
.arena .lock { position: absolute; top: 2cqw; right: 2.4cqw; font-size: 3cqw; color: var(--gold); }
.arena .mini { position: absolute; top: 2.2cqw; left: 3cqw; display: grid; grid-template-columns: repeat(10, 1.6cqw); gap: .3cqw; opacity: .8; }
.arena .mini i { height: .9cqw; border-radius: .2cqw; }
.big-choice { display: flex; flex-direction: column; gap: 4cqw; }
.choice { --c: var(--p1); text-align: left; padding: 5cqw; border-radius: 4cqw; border: .5cqw solid var(--c); background: color-mix(in srgb, var(--c) 12%, rgba(10, 6, 32, .7)); box-shadow: 0 0 3cqw color-mix(in srgb, var(--c) 30%, transparent); }
.choice .t { font-size: 5.2cqw; margin-bottom: 1.6cqw; }
.choice .d { font-size: 3.2cqw; color: var(--dim); line-height: 1.35; }
.choice.c2 { --c: var(--p2); }
.spacer { flex: 1; min-height: 4cqw; }

/* ---------- online ---------- */
.code-in { display: flex; gap: 2.4cqw; }
.code-in input {
  flex: 1; min-width: 0; font: inherit; font-size: 6cqw; letter-spacing: .3em; text-align: center; text-transform: uppercase;
  color: var(--text); background: rgba(255, 255, 255, .05); border: .5cqw solid var(--line); border-radius: 3cqw; padding: 0 2cqw; min-height: 13cqw;
  user-select: text; -webkit-user-select: text;
}
.code-in input::placeholder { letter-spacing: .06em; font-size: 3.6cqw; color: rgba(232, 236, 255, .35); }
.or { text-align: center; color: var(--dim); font-size: 3.2cqw; margin: 4cqw 0; letter-spacing: .1em; text-transform: uppercase; }
.status { min-height: 6cqw; margin-top: 4cqw; text-align: center; font-size: 3.4cqw; color: var(--dim); line-height: 1.4; }
.status.err { color: var(--warn); }
.room-code { font-size: 15cqw; letter-spacing: .14em; color: var(--p1); text-shadow: 0 0 3cqw rgba(34, 230, 255, .7); margin: 2cqw 0 4cqw; text-align: center; user-select: text; -webkit-user-select: text; }
.players { display: flex; flex-direction: column; gap: 2.4cqw; width: 100%; margin: 4cqw 0; }
.player { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw; border-radius: 3cqw; background: var(--panel); border: .3cqw solid var(--line); font-size: 3.8cqw; }
.player .dot { width: 3cqw; height: 3cqw; border-radius: 50%; flex: none; }
.player .lat { margin-left: auto; color: var(--dim); font-size: 3cqw; }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ---------- story ---------- */
.story { justify-content: flex-end; background: linear-gradient(180deg, rgba(7, 5, 26, .3), rgba(7, 5, 26, .95) 55%); padding-bottom: 10cqw; }
.story .who { font-size: 3.2cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--p2); margin-bottom: 2cqw; }
.story h3 { font-size: 7cqw; font-weight: 400; margin: 0 0 4cqw; text-shadow: 0 0 3cqw rgba(255, 47, 214, .6); }
.story p { font-size: 4.3cqw; line-height: 1.5; margin: 0 0 8cqw; min-height: 30cqw; }
.story .acts { display: flex; gap: 3cqw; }
.story .acts .btn { flex: 1; }

/* ---------- in-game HUD ---------- */
#ui > .hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.pause-btn { position: absolute; left: 1.6cqw; top: 1.4cqw; width: 9cqw; height: 9cqw; border-radius: 2.4cqw; border: .3cqw solid rgba(232, 236, 255, .25); background: rgba(10, 6, 32, .45); display: flex; align-items: center; justify-content: center; gap: 1.2cqw; }
.pause-btn i { width: 1.2cqw; height: 3.6cqw; background: var(--text); border-radius: .3cqw; }
.serve-hint { position: absolute; left: 0; right: 0; bottom: 4.5%; text-align: center; font-size: 3.6cqw; color: var(--text); text-shadow: 0 0 2cqw var(--p1); pointer-events: none !important; animation: blink 1.4s ease-in-out infinite; letter-spacing: .05em; }
.serve-hint.top { bottom: auto; top: 4.5%; }
.serve-hint.high { bottom: 14%; }
@keyframes blink { 50% { opacity: .45; } }
.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30cqw; color: var(--text); text-shadow: 0 0 6cqw var(--p1); pointer-events: none !important; }
.toast { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 2cqw 4cqw; border-radius: 3cqw; background: rgba(10, 6, 32, .85); border: .3cqw solid var(--line); font-size: 3.2cqw; white-space: nowrap; pointer-events: none !important; animation: fadein .2s; }

/* ---------- results / pause ---------- */
.card { width: 100%; max-width: 82cqw; padding: 6cqw 5cqw; border-radius: 4.4cqw; background: rgba(14, 9, 40, .92); border: .5cqw solid var(--line); box-shadow: 0 0 6cqw rgba(122, 92, 255, .25); display: flex; flex-direction: column; align-items: center; gap: 3.6cqw; }
.card h2 { margin: 0; font-size: 8cqw; font-weight: 400; letter-spacing: .03em; }
.card h2.win { color: var(--ok); text-shadow: 0 0 3cqw rgba(77, 255, 122, .6); }
.card h2.lose { color: var(--warn); text-shadow: 0 0 3cqw rgba(255, 94, 58, .6); }
.card h2.clear { color: var(--gold); text-shadow: 0 0 3cqw rgba(255, 207, 77, .6); }
.card .sub { font-size: 3.4cqw; color: var(--dim); margin-top: -1.6cqw; }
.big-stars { display: flex; gap: 3cqw; font-size: 12cqw; }
.big-stars i { font-style: normal; color: rgba(255, 255, 255, .12); }
.big-stars i.on { color: var(--gold); text-shadow: 0 0 3cqw rgba(255, 207, 77, .9); animation: starpop .4s backwards; }
.big-stars i.on:nth-child(2) { animation-delay: .25s; }
.big-stars i.on:nth-child(3) { animation-delay: .5s; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); } }
.star-why { width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; font-size: 3.1cqw; color: var(--dim); }
.star-why div { display: flex; gap: 2cqw; align-items: center; }
.star-why .on { color: var(--text); }
.star-why b { font-weight: 400; color: rgba(255, 255, 255, .2); width: 4cqw; text-align: center; }
.star-why .on b { color: var(--gold); }
.stats { width: 100%; display: flex; flex-direction: column; gap: 1.6cqw; }
.stats div { display: flex; justify-content: space-between; font-size: 3.8cqw; padding: 1.6cqw 0; border-bottom: .25cqw solid rgba(255, 255, 255, .07); }
.stats div span:first-child { color: var(--dim); }
.score-vs { display: flex; align-items: center; gap: 5cqw; font-size: 14cqw; line-height: 1; }
.score-vs .a { color: var(--p1); text-shadow: 0 0 3cqw var(--p1); }
.score-vs .b { color: var(--p2); text-shadow: 0 0 3cqw var(--p2); }
.score-vs .sep { font-size: 7cqw; color: var(--dim); }
.score-names { display: flex; justify-content: space-between; width: 60cqw; font-size: 3cqw; color: var(--dim); margin-top: -2cqw; }
.card .btn-col { margin-top: 2cqw; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- VoltBreak mark: a neon lightning bolt next to the name ---------- */
.logo-row, .boot .logo { display: inline-flex; align-items: center; gap: 1.6cqw; }
.logo-mark {
  flex: none; width: 7.6cqw; height: 11cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 52'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322e6ff'/%3E%3Cstop offset='1' stop-color='%23ff2fd6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M22 2 L4 30 H16 L12 50 L32 20 H20 Z' fill='url(%23g)' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 1.2cqw rgba(34, 230, 255, .7)) drop-shadow(0 0 2.4cqw rgba(255, 47, 214, .45));
  animation: zap 3.2s ease-in-out infinite;
}
@keyframes zap { 0%, 88%, 100% { opacity: 1; } 90% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .5; } }

/* ---------- juice: screen animations (JUICE.md, part 3) ---------- */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.overlay > .card { position: relative; z-index: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(4cqw) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cardpop { 0% { opacity: 0; transform: scale(.82); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
.lobby .logo { animation: rise .45s ease-out backwards; }
.scen-row > *, .modes > .mode, .big-choice > *, .arenas > .arena, .rows > .row, .seg > button { animation: rise .32s ease-out backwards; }
.scen-row > :nth-child(2), .modes > :nth-child(2), .big-choice > :nth-child(2), .arenas > :nth-child(2), .rows > :nth-child(2), .seg > :nth-child(2) { animation-delay: .05s; }
.scen-row > :nth-child(3), .modes > :nth-child(3), .arenas > :nth-child(3), .rows > :nth-child(3), .seg > :nth-child(3) { animation-delay: .1s; }
.scen-row > :nth-child(4), .modes > :nth-child(4), .arenas > :nth-child(4), .rows > :nth-child(4) { animation-delay: .15s; }
.arenas > :nth-child(5), .rows > :nth-child(5) { animation-delay: .2s; }
.arenas > :nth-child(6) { animation-delay: .25s; }
.grid > .stage { animation: rise .28s ease-out backwards; }
.grid > .stage:nth-child(3n+2) { animation-delay: .04s; }
.grid > .stage:nth-child(3n) { animation-delay: .08s; }
.overlay > .card { animation: cardpop .38s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.card .count { font-variant-numeric: tabular-nums; }
.mode:hover { transform: translateY(-.6cqw); }
.mode:active { transform: scale(.97); }

/* ---------- Overcharge button (JUICE.md, part 1) ---------- */
.over-btn {
  position: absolute; right: 3cqw; bottom: 17%; width: 16cqw; height: 16cqw; border-radius: 50%;
  border: .6cqw solid #fff36b; background: radial-gradient(circle, rgba(255, 243, 107, .35), rgba(40, 30, 0, .55));
  box-shadow: 0 0 4cqw rgba(255, 243, 107, .75), inset 0 0 3cqw rgba(255, 243, 107, .4);
  display: flex; align-items: center; justify-content: center; touch-action: none;
  animation: overpulse .7s ease-in-out infinite alternate;
}
.over-btn.left { right: auto; left: 3cqw; }
.over-btn[hidden] { display: none; }
.over-btn .bolt {
  width: 7cqw; height: 10cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 52'%3E%3Cpath d='M22 2 L4 30 H16 L12 50 L32 20 H20 Z' fill='%23fff36b' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes overpulse { from { transform: scale(.94); } to { transform: scale(1.06); box-shadow: 0 0 7cqw rgba(255, 243, 107, .95), inset 0 0 3cqw rgba(255, 243, 107, .5); } }

/* ---------- start-up intro (intro.js) ---------- */
canvas.intro { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 60; display: block; touch-action: none; cursor: pointer; }

/* ---------- Duo layout picker and facing co-op (JUICE.md, «Кооператив напротив») ---------- */
.layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-bottom: 5cqw; }
.layout {
  --c: var(--p1);
  display: flex; align-items: center; gap: 2.4cqw; text-align: left; padding: 2.6cqw; min-height: 24cqw;
  border-radius: 3.4cqw; border: .45cqw solid var(--line); background: rgba(16, 11, 42, .92);
  animation: rise .32s ease-out backwards;
}
.layout.c2 { --c: var(--p2); animation-delay: .05s; }
.layout[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, #100b2a); box-shadow: 0 0 3cqw color-mix(in srgb, var(--c) 40%, transparent); }
.layout .scheme { flex: none; width: 12cqw; height: 18cqw; }
.layout .scheme svg { width: 100%; height: 100%; display: block; }
.layout .lt { display: flex; flex-direction: column; gap: .8cqw; min-width: 0; }
.layout .t { font-size: 4cqw; }
.layout .d { font-size: 2.6cqw; color: var(--dim); line-height: 1.3; }
.stage.coop { --c: #9d5cff; }
/* One device, two facing players: the top player's hint and Overcharge button face them. */
.serve-hint.facing { transform: rotate(180deg); top: 14%; bottom: auto; } /* mirror of .serve-hint.high */
.over-btn.top { right: auto; left: 3cqw; bottom: auto; top: 17%; }
.over-btn.top .bolt { transform: rotate(180deg); }
.hud.coop .pause-btn { top: calc(50% - 4.5cqw); } /* corners belong to the players' HUD strips */