:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #000;
  --panel: #050505;
  --panel-2: #0b0b0b;
  --line: rgba(255,255,255,.23);
  --line-soft: rgba(255,255,255,.10);
  --text: #fff;
  --muted: #aaa;
  --theme-primary: #fff;
  --theme-secondary: #37a9ff;
  --theme-accent: #8bd8ff;
  --theme-danger: #ff4545;
  --glow: 0 0 .45rem rgba(255,255,255,.8), 0 0 1.5rem rgba(255,255,255,.25);
  --canvas-scale: 1;
  --canvas-target-width: 1200px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; min-height: 100dvh; background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb, var(--theme-primary) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 3%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
button, input, select { font: inherit; }
button, select, input { border: 1px solid var(--line); border-radius: .35rem; background: var(--bg); color: var(--text); box-shadow: inset 0 0 1rem rgba(255,255,255,.025); }
button { min-height: 2.75rem; padding: .65rem .95rem; cursor: pointer; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; transition: border-color .12s, box-shadow .12s, transform .08s, filter .12s; }
button:hover { border-color: var(--theme-primary); box-shadow: var(--glow); }
button:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
button.primary { color: var(--bg); border-color: var(--theme-primary); background: var(--theme-primary); box-shadow: var(--glow); }
button.primary:hover { filter: invert(1); }
button.danger { border-style: solid; color: #ddd; }
button.full { width: 100%; }
input, select { min-height: 2.5rem; padding: .55rem .65rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: .16em; text-shadow: var(--glow); }
h2, h3 { margin: 0; letter-spacing: .08em; }
small, .hint { color: var(--muted); letter-spacing: .08em; }
code { color: #fff; overflow-wrap: anywhere; text-shadow: 0 0 .5rem #fff; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(.85rem, env(safe-area-inset-top)) 1rem .85rem; background: color-mix(in srgb, var(--panel) 90%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.connection-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
button.compact { min-height: 2rem; padding: .35rem .6rem; font-size: .7rem; }
.pill { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .75rem; font-weight: 900; white-space: nowrap; letter-spacing: .08em; text-transform: uppercase; }
.pill.online { border-color: var(--theme-primary); color: var(--theme-primary); box-shadow: 0 0 1rem color-mix(in srgb, var(--theme-secondary) 35%, transparent); }
.pill.warning { border-style: solid; color: #ccc; }
.panel { padding: 1rem; border: 1px solid var(--line); border-radius: .55rem; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 0 2rem color-mix(in srgb, var(--theme-secondary) 5%, transparent); }
.panel summary { cursor: pointer; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.panel[open] summary { margin-bottom: 1rem; }
.panel-title, .player-card { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.host-layout { width: 100%; max-width: calc(var(--canvas-target-width) + 30rem); margin: 0 auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, min(var(--canvas-target-width), calc(100vw - 30rem))) minmax(20rem, 27rem); justify-content: center; gap: 1rem; }
.game-column { min-width: 0; width: min(100%, var(--canvas-target-width)); justify-self: center; }
.game-shell { --fx-flash: 0; position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; isolation: isolate; border: 1px solid var(--theme-primary); border-radius: .45rem; background: var(--bg); box-shadow: 0 0 1rem color-mix(in srgb, var(--theme-primary) 40%, transparent), 0 0 5rem color-mix(in srgb, var(--theme-secondary) 15%, transparent); }
#game { position: relative; z-index: 0; display: block; width: 100%; height: 100%; background: var(--bg); transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; contain: strict; }
.game-shell:fullscreen { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; }
.game-shell::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px), radial-gradient(circle at 50% 50%, transparent 48%, rgba(0,0,0,.5) 100%); opacity: .55; transform: translateZ(0); }
.game-shell::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: var(--theme-primary); opacity: var(--fx-flash); will-change: opacity; transform: translateZ(0); }
.game-hud { position: absolute; z-index: 3; inset: .85rem 1rem auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none; text-shadow: var(--glow); }
.hud-side { display: grid; justify-items: start; line-height: 1; }
.hud-side.right { justify-items: end; }
.hud-side small { color: #fff; font-weight: 900; }
.hud-side b { font: 950 clamp(2rem, 6vw, 4.5rem)/.9 ui-monospace, monospace; }
.hud-center { display: grid; will-change: transform, filter; justify-items: center; gap: .1rem; padding: .25rem 1rem; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.58); box-shadow: 0 0 1rem rgba(255,255,255,.15); }
.hud-center strong, .hud-center small { color: #fff; font: 850 .68rem ui-monospace, monospace; letter-spacing: .2em; }
.hud-center b { font: 950 clamp(1.45rem, 4vw, 2.5rem) ui-monospace, monospace; }
.countdown { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; font: 950 clamp(3rem, 11vw, 7rem) ui-monospace, monospace; text-shadow: 0 0 .65rem #fff, 0 0 2rem #fff; pointer-events: none; }
.game-message { position: absolute; z-index: 3; left: 50%; bottom: .6rem; transform: translateX(-50%); width: min(82%, 34rem); padding: .32rem .55rem; border: 1px solid var(--line); border-radius: .25rem; background: rgba(0,0,0,.7); text-align: center; color: #fff; font-size: .78rem; font-weight: 750; letter-spacing: .035em; pointer-events: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.toolbar label { display: flex; align-items: center; gap: .5rem; color: var(--muted); text-transform: uppercase; font-size: .75rem; font-weight: 850; letter-spacing: .07em; }
.telemetry { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .7rem; }
.telemetry span { padding: .42rem .7rem; border: 1px solid var(--line-soft); border-radius: 999px; background: #020202; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.telemetry b { color: var(--theme-primary); text-shadow: 0 0 .7rem var(--theme-secondary); }
.side-column { display: grid; align-content: start; gap: .8rem; }
.stack { display: grid; gap: .35rem; margin: .8rem 0; color: var(--muted); }
.qr { display: block; width: min(100%, 18rem); margin: .8rem auto; border: .65rem solid #fff; border-radius: .2rem; background: #fff; box-shadow: 0 0 2rem rgba(255,255,255,.45); }
.join-link { display: block; color: #fff; overflow-wrap: anywhere; font-size: .82rem; text-shadow: 0 0 .6rem rgba(255,255,255,.7); }
.players { display: grid; gap: .65rem; }
.player-card { display: grid; grid-template-columns: 1fr auto; padding: .8rem; border: 1px solid var(--line); border-radius: .35rem; background: #000; }
.player-card p, .player-card button { grid-column: 1 / -1; margin: .35rem 0 0; }
.player-card p { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.arcade-help { border-style: solid; }
.arcade-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .65rem; }
.arcade-legend span { padding: .45rem; border: 1px solid var(--line-soft); color: var(--muted); font-size: .72rem; }
.arcade-legend b { display: block; color: #fff; text-shadow: 0 0 .5rem #fff; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.setting { display: grid; gap: .3rem; min-width: 0; }
.setting span { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .75rem; }
.setting output { color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 .5rem #fff; }
.setting input[type="range"] { width: 100%; padding: 0; accent-color: var(--theme-secondary); }
.setting.checkbox { display: flex; align-items: center; justify-content: space-between; min-height: 2.7rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .25rem; }
.setting.checkbox input { min-height: auto; width: 1.1rem; height: 1.1rem; accent-color: #fff; }
.controller-setup { width: min(100%, 42rem); margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); display: grid; gap: 1rem; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.permission-grid button.granted { border-color: #fff; color: #fff; box-shadow: var(--glow); }
.permission-grid button.denied { border-style: solid; color: #aaa; }
.calibrate { min-height: 4.3rem; font-size: 1.02rem; }
.notice { margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .25rem; background: #000; color: var(--muted); text-align: center; }
.game-controls { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: max(2px, env(safe-area-inset-top)) max(2px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)); background: #fff; touch-action: none; }
.game-controls[hidden] { display: none; }
.action { border: 0; border-radius: 0; display: grid; place-content: center; gap: .5rem; font-size: clamp(1.6rem, 9vw, 4rem); user-select: none; -webkit-user-select: none; touch-action: none; background: #000; color: #fff; box-shadow: inset 0 0 4rem rgba(255,255,255,.06); }
.action span { font-weight: 950; letter-spacing: .12em; text-shadow: var(--glow); }
.action small { color: #aaa; opacity: 1; font-size: .75rem; }
.action.slowmo { background: #fff; color: #000; }
.action.slowmo span { text-shadow: 0 0 .8rem rgba(0,0,0,.35); }
.action.slowmo small { color: #333; }
.action.kick { background: #000; color: #fff; }
.action.pressed { filter: invert(1); transform: scale(.995); }
@media (max-width: 980px) { .host-layout { grid-template-columns: 1fr; } .side-column { grid-template-columns: repeat(2, minmax(0,1fr)); } .invite-panel, .players, .arcade-help, .side-column > .full { grid-column: 1 / -1; } }
@media (max-width: 620px) { .topbar { align-items: flex-start; } .connection-actions { align-items: flex-end; flex-direction: column; } .host-layout { padding: .5rem; } .side-column { grid-template-columns: 1fr; } .permission-grid, .settings-grid, .arcade-legend { grid-template-columns: 1fr; } .toolbar > * { flex: 1; } .game-hud { inset: .5rem .55rem auto; } .hud-center { padding-inline: .55rem; } }

.hud-center.pulse { animation: hud-pulse .16s cubic-bezier(.2,.8,.2,1); }
@keyframes hud-pulse { 0% { transform: translateZ(0) scale(1); filter: brightness(1); } 45% { transform: translateZ(0) scale(1.13); filter: brightness(1.8); } 100% { transform: translateZ(0) scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .hud-center.pulse { animation: none; } #game { transform: none !important; } }

.action.passive, .action:disabled { opacity: .72; filter: grayscale(1); cursor: default; }
.action.passive:active, .action:disabled:active { transform: none; }
.action.stored-power {
  color: #000;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from 0deg,#ff3b3b,#ffd93b,#52ff7a,#43d9ff,#6f5cff,#ff4fd8,#ff3b3b) border-box;
  box-shadow: 0 0 2rem rgba(255,255,255,.5);
  animation: stored-power-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes stored-power-pulse {
  from { filter: brightness(.9); }
  to { filter: brightness(1.2); }
}

html[data-theme="neon"] .game-shell {
  animation: neon-shell 2.4s ease-in-out infinite alternate;
}
html[data-theme="neon"] .game-shell::before {
  background: repeating-linear-gradient(90deg, transparent 0 42px, color-mix(in srgb, var(--theme-secondary) 12%, transparent) 43px 44px), repeating-linear-gradient(0deg, transparent 0 42px, color-mix(in srgb, var(--theme-accent) 9%, transparent) 43px 44px);
  animation: circuit-drift 3.2s linear infinite;
}
html[data-theme="ember"] .game-shell {
  animation: ember-shell 1.25s ease-in-out infinite alternate;
}
html[data-theme="ember"] .game-shell::before {
  background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--theme-danger) 38%, transparent), transparent 58%), repeating-linear-gradient(112deg, transparent 0 28px, color-mix(in srgb, var(--theme-secondary) 8%, transparent) 30px 32px);
  animation: ember-heat 1.6s ease-in-out infinite alternate;
}
html[data-theme="tide"] .game-shell {
  box-shadow: 0 0 3rem color-mix(in srgb, var(--theme-secondary) 30%, transparent), inset 0 0 4rem color-mix(in srgb, var(--theme-accent) 10%, transparent);
}
html[data-theme="tide"] .game-shell::before {
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--theme-accent) 22%, transparent), transparent 38%), radial-gradient(ellipse at 78% 105%, color-mix(in srgb, var(--theme-secondary) 25%, transparent), transparent 45%);
  animation: tide-drift 4.5s ease-in-out infinite alternate;
}
html[data-theme="ink"] .game-shell {
  box-shadow: 0 1rem 2.6rem rgba(25,12,30,.42), inset 0 0 2rem color-mix(in srgb, var(--theme-primary) 15%, transparent);
}
html[data-theme="ink"] .game-shell::before {
  background: repeating-linear-gradient(7deg, transparent 0 17px, rgba(40,22,45,.025) 18px 19px), repeating-linear-gradient(97deg, transparent 0 31px, rgba(255,255,255,.06) 32px 33px);
  opacity: .28;
}
html[data-theme="bloom"] .game-shell {
  animation: bloom-shell 2.6s ease-in-out infinite alternate;
}
html[data-theme="bloom"] .game-shell::before {
  background: conic-gradient(from 0deg at 50% 50%, transparent, color-mix(in srgb, var(--theme-secondary) 17%, transparent), transparent 30%, color-mix(in srgb, var(--theme-accent) 14%, transparent), transparent 63%);
  animation: bloom-spin 11s linear infinite;
}

@keyframes neon-shell {
  from { filter: saturate(1) brightness(.92); }
  to { filter: saturate(1.35) brightness(1.12); }
}
@keyframes circuit-drift {
  to { background-position: 88px 0, 0 88px; }
}
@keyframes ember-shell {
  from { filter: brightness(.92) saturate(1.05); }
  to { filter: brightness(1.14) saturate(1.4); }
}
@keyframes ember-heat {
  from { opacity: .48; transform: translateY(3px) scaleY(.98); }
  to { opacity: .82; transform: translateY(-5px) scaleY(1.04); }
}
@keyframes tide-drift {
  from { opacity: .45; transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to { opacity: .86; transform: translate3d(2%, 2%, 0) scale(1.08); }
}
@keyframes bloom-shell {
  from { filter: hue-rotate(-8deg) saturate(1); }
  to { filter: hue-rotate(12deg) saturate(1.35) brightness(1.08); }
}
@keyframes bloom-spin {
  to { transform: rotate(360deg) scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .game-shell,
  html[data-theme] .game-shell::before { animation: none; }
}