:root {
  --ink: #040710;
  --panel: rgba(7, 12, 26, 0.88);
  --cyan: #23f3ff;
  --cyan-soft: rgba(35, 243, 255, 0.2);
  --pink: #ff327f;
  --acid: #d9ff43;
  --orange: #ff8b3d;
  --white: #f5fbff;
  --muted: #8090ab;
  --line: rgba(127, 209, 255, 0.22);
  --cyber: 'Arial', 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Broadcast-style hierarchy: court first, score second, supporting UI quiet. */
body { background: #111719 !important; }
body::before { display: none; }
.top-hud, .control-deck { clip-path: none !important; background: #182024 !important; box-shadow: none !important; }
.eyebrow { letter-spacing: .12em !important; color: #aebdbb !important; }
.start-card h1 em { color: #e6c48e !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
.start-card h1 { line-height: 1 !important; }
.shot-feedback { text-shadow: 0 2px 5px #000 !important; letter-spacing: .025em !important; }
.shot-feedback.hype { font-size: clamp(1.2rem, 3vw, 2rem) !important; }
.slot-icon, .loadout-card .item-icon { text-shadow: none !important; }
.loadout-card { border-radius: 4px; }
button:focus-visible { outline: 2px solid #f0d29f; outline-offset: 3px; }
button { font: inherit; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: Arial, 'Yu Gothic UI', Meiryo, sans-serif;
  background:
    linear-gradient(rgba(35, 243, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 243, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 22% 8%, rgba(35, 243, 255, 0.13), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(255, 50, 127, 0.11), transparent 34%),
    #03050b;
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(35, 243, 255, 0.035) 45%, transparent 46%);
}

#game-container {
  width: min(1240px, 100vw);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 18px 18px;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr) auto;
  gap: 10px;
}

.top-hud,
.control-deck {
  border: 1px solid var(--line);
  background: linear-gradient(100deg, rgba(7, 13, 28, 0.96), rgba(9, 17, 35, 0.78));
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.03);
}

.top-hud {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.eyebrow {
  display: block;
  color: var(--cyan);
  font: 700 0.61rem/1.3 var(--cyber);
  letter-spacing: 0.2em;
}

.brand-block strong {
  display: block;
  margin-top: 3px;
  font: 900 clamp(0.85rem, 2vw, 1.15rem)/1 var(--cyber);
  letter-spacing: 0.08em;
}

.scoreboard { display: flex; align-items: stretch; font-family: var(--cyber); }
.score-side { min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 14px; }
.score-side span { font-size: 0.69rem; font-weight: 900; letter-spacing: 0.14em; }
.score-side strong { font-size: 2.5rem; line-height: 1; }
.player-side { color: var(--cyan); border: 1px solid rgba(35, 243, 255, 0.34); border-right: 0; }
.ai-side { color: var(--pink); border: 1px solid rgba(255, 50, 127, 0.34); border-left: 0; }
.clock-stack { width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #02040a; border: 1px solid rgba(255, 255, 255, 0.15); }
.clock-stack > span { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.08em; }
.clock-stack small { color: var(--orange); font-size: 0.58rem; letter-spacing: 0.15em; }
.clock-stack b { font-size: 0.78rem; }

.match-rule { justify-self: end; text-align: right; font-family: var(--cyber); }
.match-rule span { display: block; color: var(--muted); font-size: 0.58rem; letter-spacing: 0.15em; }
.match-rule strong { display: block; color: var(--acid); font-size: 0.82rem; letter-spacing: 0.1em; }
.match-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.home-btn { padding: 8px 10px; color: var(--cyan); cursor: pointer; background: rgba(35, 243, 255, 0.06); border: 1px solid rgba(35, 243, 255, 0.4); font: 800 0.58rem var(--cyber); letter-spacing: 0.12em; }
.home-btn small { color: var(--muted); font-size: 0.48rem; }
.home-btn:hover { color: #001014; background: var(--cyan); }

.arena {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: #030711;
  border: 1px solid rgba(35, 243, 255, 0.38);
  box-shadow: inset 0 0 60px #000, 0 0 24px rgba(35, 243, 255, 0.1);
}
.arena::before,
.arena::after { content: ''; position: absolute; left: 0; right: 0; z-index: 10; height: 8%; pointer-events: none; background: #010208; transition: transform 0.28s ease; }
.arena::before { top: 0; transform: translateY(-102%); }
.arena::after { bottom: 0; transform: translateY(102%); }
.arena.shot-cinematic::before,
.arena.shot-cinematic::after,
.arena.dunk-cinematic::before,
.arena.dunk-cinematic::after,
.arena.goal-cinematic::before,
.arena.goal-cinematic::after { transform: translateY(0); }
.arena.goal-cinematic { border-color: rgba(217, 255, 67, 0.78); box-shadow: inset 0 0 90px rgba(217, 255, 67, 0.08), 0 0 34px rgba(217, 255, 67, 0.18); }
.arena.dunk-cinematic { border-color: rgba(217, 255, 67, 0.92); box-shadow: inset 0 0 110px rgba(35, 243, 255, 0.1), 0 0 42px rgba(217, 255, 67, 0.22); }
.arena.time-stop #webgl-stage { filter: saturate(0.45) hue-rotate(145deg) brightness(1.12); transition: filter 0.12s ease; }
.arena.time-stop { border-color: #b38cff; box-shadow: inset 0 0 90px rgba(128, 90, 255, 0.16), 0 0 34px rgba(128, 90, 255, 0.2); }
.arena.rival-item { border-color: rgba(255, 50, 127, 0.88); box-shadow: inset 0 0 90px rgba(255, 50, 127, 0.12), 0 0 34px rgba(255, 50, 127, 0.2); }
.arena.rival-lock:not(.time-stop) #webgl-stage { filter: saturate(0.72) hue-rotate(-24deg) contrast(1.08); transition: filter 0.12s ease; }

#webgl-stage,
#webgl-stage canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
#webgl-stage { position: absolute; inset: 0; }
.arena-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.74); background: linear-gradient(180deg, transparent 60%, rgba(2, 5, 12, 0.34)); }

.speed-lines {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.82);
  background: repeating-conic-gradient(from 0deg at 50% 58%, transparent 0deg 4deg, rgba(35, 243, 255, 0.16) 4.2deg 4.45deg, transparent 4.7deg 9deg);
  mask-image: radial-gradient(circle at 50% 58%, transparent 0 22%, #000 60%, transparent 78%);
  transition: opacity 0.18s ease, transform 0.18s ease;
  mix-blend-mode: screen;
}
.speed-lines.active { opacity: 0.8; transform: scale(1.05); animation: speed-pulse 0.32s linear infinite; }
.screen-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.8), rgba(35,243,255,0.25) 28%, transparent 64%); mix-blend-mode: screen; }
.screen-flash.active { animation: impact-flash 0.34s ease-out; }
.arena.impact { animation: arena-impact 0.24s ease-out; }

.possession-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  color: #001218;
  background: var(--cyan);
  font: 900 0.62rem var(--cyber);
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  opacity: 0;
  transform: translateY(-6px);
  transition: 0.25s ease;
}
.possession-badge.visible { opacity: 1; transform: none; }
.possession-badge.rival { color: #fff; background: var(--pink); }

.shot-meter {
  position: absolute;
  left: 50%;
  bottom: 19px;
  width: min(430px, 66%);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(3, 7, 16, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 12;
}
.shot-meter.active { opacity: 1; transform: translate(-50%, 0); }
.arena.shot-cinematic .shot-meter { width: min(540px, 74%); bottom: 38px; border-color: rgba(35, 243, 255, 0.62); box-shadow: 0 0 28px rgba(35, 243, 255, 0.16); }
.meter-label, .contest-readout { font: 800 0.55rem var(--cyber); letter-spacing: 0.12em; }
.contest-readout { min-width: 72px; text-align: right; color: var(--cyan); }
.meter-track { height: 14px; position: relative; overflow: visible; background: #151b29; border: 1px solid #3d485c; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #1ec6ef, var(--acid), var(--orange)); opacity: 0.55; }
.green-window { position: absolute; top: -1px; bottom: -1px; left: 68%; width: 10%; background: rgba(87, 255, 134, 0.72); box-shadow: 0 0 13px #42ff78; }
.meter-cursor { position: absolute; top: -5px; left: 0; width: 3px; height: 22px; background: #fff; box-shadow: 0 0 8px #fff; }

.shot-feedback,
.item-toast {
  position: absolute;
  left: 50%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.95);
  transition: 0.2s ease;
  text-align: center;
}
.shot-feedback { top: 18%; color: var(--white); font: 900 clamp(1.1rem, 3vw, 2rem) var(--cyber); letter-spacing: 0.13em; text-shadow: 0 0 18px currentColor; }
.shot-feedback.show, .item-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.shot-feedback.perfect { color: #48ff81; }
.shot-feedback.bad { color: var(--orange); }
.shot-feedback.hype { color: var(--acid); font-size: clamp(1.35rem, 4vw, 2.7rem); }
.item-toast { top: 10%; padding: 8px 16px; color: var(--acid); background: rgba(5, 10, 20, 0.88); border: 1px solid currentColor; font: 800 0.67rem var(--cyber); letter-spacing: 0.12em; }
.item-toast.rival { color: var(--pink); background: rgba(24, 3, 17, 0.92); box-shadow: 0 0 22px rgba(255, 50, 127, 0.28); }

.drive-hud {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 190px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: var(--muted);
  background: rgba(3, 7, 16, 0.82);
  border-left: 2px solid var(--cyan);
  font: 700 0.46rem var(--cyber);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.2s ease;
}
.drive-hud.visible { opacity: 1; transform: none; }
.drive-hud > div { height: 5px; overflow: hidden; background: #162033; }
.drive-hud i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--acid)); box-shadow: 0 0 8px var(--cyan); transition: width 0.08s linear; }
.drive-hud b { color: var(--cyan); font-size: 0.46rem; }
.drive-hud.driving { color: var(--acid); border-color: var(--acid); }
.drive-hud.driving b { color: var(--acid); text-shadow: 0 0 8px currentColor; }

.flow-hud {
  position: absolute;
  left: 14px;
  bottom: 48px;
  z-index: 9;
  width: 190px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 6px;
  align-items: end;
  gap: 4px 8px;
  padding: 7px 8px;
  color: var(--cyan);
  background: rgba(3, 7, 16, 0.86);
  border-left: 2px solid currentColor;
  font-family: var(--cyber);
  opacity: 0;
  transform: translateY(6px);
  transition: 0.2s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.flow-hud.visible { opacity: 1; transform: none; }
.flow-copy { display: flex; align-items: baseline; gap: 7px; }
.flow-copy span { font-size: 0.52rem; font-weight: 900; letter-spacing: 0.14em; }
.flow-copy b { overflow: hidden; color: var(--muted); font-size: 0.39rem; letter-spacing: 0.06em; text-overflow: ellipsis; white-space: nowrap; }
.flow-track { grid-column: 1; height: 6px; overflow: hidden; background: #162033; }
.flow-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--acid), #fff); box-shadow: 0 0 10px var(--cyan); transition: width 0.16s ease-out; }
.flow-hud > strong { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 25px; text-align: right; font-size: 0.67rem; }
.flow-hud.overdrive { color: var(--acid); box-shadow: 0 0 24px rgba(217, 255, 67, 0.22), inset 0 0 20px rgba(217, 255, 67, 0.08); animation: overdrive-pulse 0.46s ease-in-out infinite alternate; }
.flow-hud.overdrive .flow-track i { background: linear-gradient(90deg, var(--acid), #fff); }
.arena.overdrive { border-color: rgba(217, 255, 67, 0.74); }

.finish-prompt {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 9;
  min-width: 235px;
  padding: 7px 11px;
  text-align: right;
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  color: var(--cyan);
  background: rgba(3, 7, 16, 0.84);
  border-right: 2px solid currentColor;
  transition: 0.2s ease;
}
.finish-prompt.visible { opacity: 1; transform: none; }
.finish-prompt small,
.finish-prompt strong { display: block; font-family: var(--cyber); }
.finish-prompt small { color: var(--muted); font-size: 0.46rem; letter-spacing: 0.16em; }
.finish-prompt strong { margin-top: 2px; font-size: 0.64rem; letter-spacing: 0.08em; }
.finish-prompt.layup { color: var(--orange); }
.finish-prompt.dunk { color: var(--acid); animation: prompt-pulse 0.65s ease-in-out infinite alternate; }
.finish-prompt.rebound { color: #fff; border-color: var(--pink); }

@keyframes impact-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes arena-impact { 35% { filter: saturate(1.45) brightness(1.12); } }
@keyframes speed-pulse { to { transform: scale(1.12) rotate(0.3deg); } }
@keyframes prompt-pulse { to { filter: brightness(1.4); transform: translateY(-2px); } }
@keyframes overdrive-pulse { to { filter: brightness(1.22); } }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 42%, rgba(13, 30, 54, 0.78), rgba(2, 4, 10, 0.95));
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s ease;
}
.overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

.start-card { width: min(860px, 100%); max-height: 100%; overflow-y: auto; padding: 12px; }
#career-panel { margin: 18px 0; padding: 16px; border: 1px solid #52606b; background: #131c25; border-radius: 8px; }
#career-panel h2 { font-size: 1rem; display: flex; justify-content: space-between; }
#career-panel p, #career-panel small { font-size: 12px; line-height: 1.8; color: #b5c3ce; }
#career-panel button { padding: 8px 12px; color: #eef1f3; background: #293b48; border: 1px solid #617789; border-radius: 4px; cursor: pointer; }
#career-panel button:disabled { opacity: .35; cursor: default; }
.athlete-select { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
#career-panel [aria-pressed="true"] { border-color: #edc58c; background: #544633; }
.stat-row { display: grid; grid-template-columns: 100px 60px 1fr 55px; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.stat-row meter { width: 100%; }
.loadout-card.locked { border-style: dashed; opacity: .7; }
@media(max-width: 500px) { .stat-row { grid-template-columns: 85px 48px 1fr 48px; gap: 4px; } }
.start-card h1 { margin: 8px 0 6px; font: 900 clamp(2rem, 5vw, 4rem)/0.88 var(--cyber); letter-spacing: -0.05em; }
.start-card h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--cyan); text-shadow: 0 0 20px rgba(35, 243, 255, 0.38); }
.lead { color: #aab9cf; font-size: 0.82rem; }
.item-heading { margin: 22px 0 9px; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.item-heading small { color: var(--pink); font: 800 0.56rem var(--cyber); letter-spacing: 0.2em; }
.item-heading h2 { margin-top: 2px; font-size: 0.92rem; }
.item-heading > span { color: var(--acid); font: 700 0.58rem var(--cyber); letter-spacing: 0.12em; }

.item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.loadout-card {
  min-height: 134px;
  position: relative;
  padding: 14px 12px 12px;
  overflow: hidden;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  background: rgba(11, 19, 37, 0.84);
  border: 1px solid rgba(130, 166, 208, 0.2);
  transition: 0.18s ease;
}
.loadout-card:hover { border-color: rgba(35, 243, 255, 0.6); transform: translateY(-2px); }
.loadout-card.selected { background: linear-gradient(145deg, rgba(35, 243, 255, 0.16), rgba(11, 19, 37, 0.92)); border-color: var(--cyan); box-shadow: inset 0 -3px var(--cyan), 0 0 22px rgba(35, 243, 255, 0.13); }
.loadout-card .item-code { position: absolute; right: 8px; top: 7px; color: #465573; font: 900 0.7rem var(--cyber); }
.loadout-card .item-icon { display: block; color: var(--cyan); font: 500 2rem/1 var(--cyber); text-shadow: 0 0 12px currentColor; }
.loadout-card strong { display: block; margin: 12px 0 5px; color: var(--cyan); font: 800 0.68rem var(--cyber); letter-spacing: 0.06em; }
.loadout-card small { display: block; color: #8f9fb7; font-size: 0.66rem; line-height: 1.55; }

.launch-btn {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17px 0 20px;
  color: #001014;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  font: 900 0.75rem var(--cyber);
  letter-spacing: 0.15em;
  box-shadow: 0 0 24px rgba(35, 243, 255, 0.28);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
.launch-btn:hover { filter: brightness(1.15); }
.launch-btn b { font-size: 1rem; }

.result-card { width: min(480px, 92%); text-align: center; padding: 34px; border: 1px solid var(--cyan); background: rgba(5, 11, 24, 0.92); box-shadow: 0 0 50px rgba(35, 243, 255, 0.16); }
.result-card h2 { margin: 10px 0; font: 900 clamp(1.7rem, 5vw, 3rem) var(--cyber); }
.final-score { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: var(--cyber); }
.final-score strong { font-size: 4rem; }
.final-score strong:first-child { color: var(--cyan); }
.final-score strong:last-child { color: var(--pink); }
.result-card p { color: var(--muted); font: 700 0.7rem var(--cyber); letter-spacing: 0.14em; }

.control-deck { min-height: 74px; display: grid; grid-template-columns: minmax(230px, 0.9fr) 1.4fr minmax(270px, 1fr); gap: 14px; align-items: center; padding: 10px 12px; }
.item-slot button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; color: var(--white); text-align: left; cursor: pointer; background: rgba(35, 243, 255, 0.06); border: 1px solid rgba(35, 243, 255, 0.38); }
.item-slot button:disabled { opacity: 0.38; cursor: not-allowed; }
.slot-icon { color: var(--cyan); font: 500 1.6rem var(--cyber); text-shadow: 0 0 10px currentColor; }
.slot-copy small, .slot-copy strong { display: block; font-family: var(--cyber); }
.slot-copy small { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.11em; }
.slot-copy strong { margin-top: 2px; font-size: 0.65rem; }
.slot-state { padding: 3px 5px; color: #00130a; background: var(--acid); font: 900 0.5rem var(--cyber); }
.control-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.control-list div { text-align: center; }
.control-list kbd { display: block; color: var(--white); font: 700 0.57rem var(--cyber); border: 0; }
.control-list span { color: var(--muted); font-size: 0.57rem; }
.action-buttons { display: flex; gap: 7px; }
.action-button { flex: 1; height: 42px; color: var(--white); cursor: pointer; background: #10182a; border: 1px solid #40506c; font: 800 0.59rem var(--cyber); letter-spacing: 0.05em; }
.action-button small { color: var(--muted); }
.action-button > span { pointer-events: none; }
.action-button.defense { border-color: rgba(255, 50, 127, 0.6); }
.action-button.steal { color: var(--orange); border-color: rgba(255, 139, 61, 0.7); background: rgba(255, 139, 61, 0.08); }
.action-button.steal:active { color: #160800; background: var(--orange); }
.action-button.drive { color: var(--cyan); border-color: rgba(35, 243, 255, 0.7); background: rgba(35, 243, 255, 0.09); }
.action-button.drive:active { color: #001014; background: var(--cyan); }
.action-button.shoot { color: #001014; background: var(--acid); border-color: var(--acid); }
#touch-stick { display: none; }

.quick-tutorial {
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 16px;
  width: min(720px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  color: #eafcff;
  background: rgba(4, 12, 25, .92);
  border: 1px solid rgba(35, 243, 255, .72);
  box-shadow: 0 0 22px rgba(35, 243, 255, .2);
  font: 700 12px/1.35 var(--cyber);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity .2s, transform .2s;
}
.quick-tutorial[hidden] { display: none; }
.quick-tutorial.visible { opacity: 1; transform: translate(-50%, 0); }
.quick-tutorial > strong { color: var(--acid); letter-spacing: .12em; }
.quick-tutorial span b { color: var(--cyan); }
.quick-tutorial small { color: #9eb1c0; }

@media (max-width: 850px) {
  #game-container { padding: 8px; grid-template-rows: auto minmax(400px, 1fr) auto; }
  .top-hud { grid-template-columns: 1fr auto; }
  .brand-block { display: none; }
  .scoreboard { justify-self: start; }
  .score-side { min-width: 84px; padding: 4px 8px; gap: 6px; }
  .score-side strong { font-size: 1.8rem; }
  .clock-stack { width: 82px; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .loadout-card { min-height: 105px; }
  .control-deck { grid-template-columns: 1fr 1fr; }
  .control-list { display: none; }
}

@media (max-width: 560px) {
  .match-rule { display: none; }
  .match-actions { position: absolute; top: 18px; right: 14px; }
  .home-btn small { display: none; }
  .top-hud { grid-template-columns: 1fr; justify-items: center; }
  .scoreboard { justify-self: center; }
  .arena { min-height: 430px; }
  .start-card h1 { font-size: 2rem; }
  .lead { font-size: 0.7rem; }
  .item-heading { margin-top: 14px; }
  .loadout-card { min-height: 100px; padding: 9px; }
  .loadout-card .item-icon { font-size: 1.4rem; }
  .loadout-card strong { margin: 6px 0 2px; font-size: 0.58rem; }
  .loadout-card small { font-size: 0.56rem; }
  .control-deck { grid-template-columns: 1fr; }
  .action-buttons { display: none; }
  .flow-hud, .drive-hud { width: 165px; }
}

/* One-screen home and touch-first match controls. */
html, body { height: 100%; min-height: 0; overflow: hidden; }
#game-container { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; padding: 8px; gap: 6px; }
.arena { min-height: 0; }
body:has(#start-overlay.active) .control-deck { display: none; }
body:has(#start-overlay.active) #game-container { grid-template-rows: auto minmax(0,1fr); }
body:has(#start-overlay.active) .top-hud { display: none; }
body:has(#start-overlay.active) #game-container { grid-template-rows: minmax(0,1fr); }
#start-overlay { padding: 12px; }
.start-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'title title' 'stats heading' 'stats items' 'matches matches'; gap: 12px 20px; width: min(920px,100%); padding: 0; overflow: visible; max-height: none; }
.home-title { grid-area: title; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-title h1 { font-size: clamp(16px,3vw,28px) !important; margin: 0; letter-spacing: -.03em; }
.home-title a { color: #efd1a0; border: 1px solid #6f6557; border-radius: 5px; padding: 10px; white-space: nowrap; font-size: 14px; }
#career-panel { grid-area: stats; margin: 0; padding: 12px; }
#career-panel h2 { margin: 0 0 8px; }
.stat-row { grid-template-columns: 92px 52px minmax(20px,1fr) 44px; margin: 6px 0; }
#career-panel button { min-height: 44px; padding: 6px; }
.career-record { font-size: 12px; color: #aabfce; }
.start-card .item-heading { grid-area: heading; margin: 0; align-self: end; }
.start-card .item-grid { grid-area: items; grid-template-columns: 1fr 1fr; gap: 8px; }
.start-card .loadout-card { min-height: 78px; padding: 8px; }
.start-card .loadout-card { min-width: 0; overflow: hidden; }
.start-card .item-icon { font-size: 22px; }
.start-card .loadout-card strong { font-size: 13px; margin: 4px 0 0; }
.start-card .item-code { font-size: 11px; }
.start-card .loadout-card.locked { opacity: 1; }
.start-card .item-code { color: #acbed0; }
.match-select { grid-area: matches; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match-select .launch-btn { margin: 0; min-height: 48px; padding: 12px; font-size: 15px; }
.action-button, #touch-stick, #webgl-stage { touch-action: none; user-select: none; -webkit-user-select: none; }
@media(max-width: 600px) and (min-height: 501px) {
  .start-card { grid-template-columns: 1fr; grid-template-areas: 'title' 'stats' 'heading' 'items' 'matches'; gap: 8px; }
  #career-panel { padding: 8px 12px; }
  .stat-row { margin: 2px 0; }
  .start-card .item-grid { grid-template-columns: repeat(4,1fr); gap: 5px; }
  .start-card .loadout-card { min-height: 74px; padding: 5px; }
  .start-card .loadout-card strong { font-size: 11px; }
  .start-card .item-code { font-size: 9px; }
  .match-select { gap: 8px; }
}
@media(pointer: coarse), (max-width: 850px) {
  .control-deck { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 6px; }
  #touch-stick { display: grid; place-items: center; width: 100px; height: 100px; border: 2px solid #687c8f; background: #15232f; border-radius: 50%; grid-row: 1 / 3; position: relative; }
  #touch-stick span { position: absolute; bottom: 5px; font-size: 11px; color: #bbcad5; }
  #touch-stick i { width: 40px; height: 40px; border-radius: 50%; background: #526b7c; pointer-events: none; }
  .control-list { display: none; }
  .action-buttons { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
  .action-button { min-width: 0; min-height: 48px; padding: 4px; font-size: 11px; }
  .action-button small { display: none; }
  .item-slot { min-width: 0; }
  #btn-item { padding: 4px 8px; min-height: 42px; }
  .slot-copy small { display: none; }
  .slot-copy strong { font-size: 12px; }
  .slot-icon { font-size: 20px; }
  .flow-hud { display: none !important; }
  .drive-hud { width: 105px; }
  .match-actions { position: static; }
  .top-hud { grid-template-columns: 1fr auto; padding: 4px; }
  .score-side { min-width: 48px; padding: 2px 5px; }
  .score-side strong { font-size: 22px; }
  .clock-stack { width: 65px; }
  .match-rule { display: none; }
  .quick-tutorial { top: 8px; display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 10px; font-size: 10px; }
  .quick-tutorial span:last-of-type { display: none; }
  .quick-tutorial small { grid-column: 2 / -1; }
}
@media(max-height: 500px) {
  #start-overlay { padding: 6px 12px; }
  .start-card { gap: 5px 16px; }
  .home-title h1 { font-size: 18px !important; }
  .home-title a { padding: 5px 10px; }
  #career-panel { padding: 6px 10px; }
  #career-panel h2 { font-size: 14px; margin-bottom: 2px; }
  .stat-row { margin: 1px 0; }
  #career-panel button { min-height: 36px; }
  .start-card .loadout-card { min-height: 58px; }
  .start-card .item-icon { font-size: 17px; }
  .match-select .launch-btn { min-height: 40px; padding: 8px; }
}

.start-card { grid-template-areas: 'title wallet' 'stats heading' 'stats items' 'matches matches'; gap: 10px 20px; min-width: 0; }
.home-title h1 { font-size: clamp(26px,3.6vw,44px) !important; font-weight: 900; font-style: italic; letter-spacing: -.055em; filter: drop-shadow(3px 3px 0 #14323f); }
.home-title h1 em { color: #6ce5ef !important; }
.home-title nav { display: grid; gap: 6px; }
.home-title a, .language-setting { padding: 6px 8px; color: #eacb98; background: #121e28; border: 1px solid #66727e; border-radius: 4px; font-size: 12px; text-align: center; white-space: nowrap; }
.language-setting { display:flex; gap:6px; align-items:center; justify-content:center; }
.language-setting select { color:#82e6ef; background:transparent; border:0; font:inherit; font-weight:800; cursor:pointer; }
.language-setting option { color:#15232f; background:#f1f4f5; }
.lock-svg { width:14px; height:14px; vertical-align:-2px; fill:none; stroke:#ffe0a0; stroke-width:2; stroke-linejoin:round; margin-right:3px; }
.start-card .loadout-card.locked .item-code { display:flex; align-items:center; justify-content:center; gap:2px; }
.shared-wallet small { display:none; }
.shared-wallet { grid-area: wallet; align-self: center; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #aa8750; background: #2a261f; border-radius: 6px; padding: 12px; }
.shared-wallet span { display: block; font-size: 14px; color: #f6d69f; font-weight: 800; }
.shared-wallet small { display: block; font-size: 11px; color: #c5bbab; }
.shared-wallet strong { white-space: nowrap; font-size: 26px; color: #ffe6ac; }
.start-card .loadout-card.locked { background: repeating-linear-gradient(135deg,#151c24 0,#151c24 8px,#1c2530 8px,#1c2530 10px); border: 1px solid #67707a; color: #a7b2bf; }
.start-card .loadout-card.locked .item-icon { color: #77838f; opacity: .5; }
.start-card .loadout-card.locked .item-code { font-weight: 900; color: #ffe0a0; background: #171d23; padding: 2px 4px; border-radius: 3px; }
dialog { position:fixed; inset:0; margin:auto; color: #e9f2f7; background: #12202c; border: 1px solid #7895a5; border-radius: 10px; width: min(650px,94vw); max-height: 92dvh; padding: 22px; }
.start-card .loadout-card .item-icon { display:block; margin-top:12px; line-height:1; }
dialog::backdrop { background: #020810df; }
dialog button, dialog select { color: #f1e3c9; background: #263b49; border: 1px solid #8ca2b2; padding: 12px; border-radius: 4px; margin: 8px 4px; }
.dialog-actions { display: flex; justify-content: flex-end; }
.opponent-rank { display: flex; align-items: center; justify-content: center; gap: 20px; }
.opponent-rank strong { font-size: 42px; }
.rival-stats, .cup-path { font-size: 12px; color: #b4c7d4; text-align: center; margin: 8px 0; }
.cup-bracket { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.bracket-pair { padding: 12px; border: 1px solid #566b7a; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bracket-pair.your-pair { border-color: #eecb82; background: #302d25; }
.cup-bracket { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; }
.bracket-round { display:flex; flex-direction:column; min-width:0; }
.bracket-round h4 { font-size:12px; text-align:center; margin:0 0 6px; color:#91a8b8; }
.bracket-round.current h4 { color:#f2d38f; }
.round-pairs { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:8px; }
.bracket-pair { flex-direction:column; align-items:stretch; gap:2px; padding:6px 8px; font-size:12px; border-left-width:3px; }
.bracket-pair span + span { border-top:1px solid #617386; padding-top:2px; }
.result-card { max-height: 100%; overflow: auto; }
#cup-result:empty { display:none; }
#cup-result h3 { font-size: 16px; }
@media(max-width:600px) and (min-height:501px) {
  .start-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'title' 'wallet' 'stats' 'heading' 'items' 'matches'; gap: 6px; width:100%; }
 .home-title { display:grid; grid-template-columns:1fr; gap:6px; }
 .home-title h1 { font-size: 34px !important; }
 .home-title nav { display:flex; flex-direction:row; justify-content:flex-end; }
 .shared-wallet { padding: 5px 10px; }
 .shared-wallet strong { font-size: 24px; }
 #career-panel { padding: 6px 10px; }
 #career-panel h2 { margin-bottom: 2px; font-size: 15px; }
 .start-card .loadout-card { min-height: 66px; min-width: 0; overflow: hidden; }
 .start-card .item-code { font-size: 10px; }
 .cup-bracket { grid-template-columns: repeat(3,minmax(0,1fr)); gap:5px; }
}
@media(max-height:500px) {
 .start-card { gap: 5px 16px; }
 .home-title h1 { font-size: 27px !important; }
 .shared-wallet { padding: 6px 10px; }
}

/* Cyberpunk interaction pass */
body {
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 225, 255, .16), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(255, 26, 117, .15), transparent 34%),
    linear-gradient(rgba(38, 235, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 235, 255, .035) 1px, transparent 1px),
    #030711 !important;
  background-size:auto,auto,26px 26px,26px 26px,auto !important;
}
body::before {
  display:block !important;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(80,235,255,.018) 4px) !important;
}
.top-hud,.control-deck {
  background:linear-gradient(105deg,rgba(5,13,25,.98),rgba(11,27,39,.94)) !important;
  border-color:rgba(55,229,255,.48) !important;
  box-shadow:0 0 22px rgba(24,211,241,.09),inset 0 1px rgba(126,244,255,.08) !important;
}
.arena { border-color:rgba(35,243,255,.46); box-shadow:0 0 30px rgba(19,217,245,.12),inset 0 0 35px rgba(1,8,18,.8); }
#start-overlay { background:
  linear-gradient(135deg,rgba(7,15,30,.96),rgba(5,10,23,.94)),
  repeating-linear-gradient(90deg,transparent 0,transparent 39px,rgba(35,243,255,.06) 40px); }
.start-card { position:relative; }
.start-card::before { content:'PLAYER // TERMINAL'; position:absolute; right:0; top:-18px; color:rgba(35,243,255,.55); font:700 9px var(--cyber); letter-spacing:.2em; }
.home-title h1 { color:#f4fdff; text-shadow:-2px 0 rgba(255,44,125,.65),2px 0 rgba(35,243,255,.75),0 0 22px rgba(35,243,255,.24); }
#career-panel,.shared-wallet,.loadout-card { backdrop-filter:blur(9px); }
#career-panel { border-color:rgba(73,218,237,.48); background:linear-gradient(130deg,rgba(11,25,38,.95),rgba(12,18,32,.95)); box-shadow:inset 3px 0 var(--cyan),inset -1px 0 rgba(255,50,127,.32),0 8px 25px rgba(0,0,0,.25); }
#career-panel h2,.item-heading h2 { font-family:var(--cyber); letter-spacing:.08em; text-transform:uppercase; }
.shared-wallet { border-color:rgba(217,255,67,.58); background:linear-gradient(110deg,rgba(33,42,23,.9),rgba(22,29,29,.92)); box-shadow:inset 3px 0 var(--acid),0 0 18px rgba(217,255,67,.07); }
.stat-row { grid-template-columns:86px 58px minmax(38px,1fr) 58px; gap:7px; min-height:46px; }
.stat-value { display:flex; align-items:center; gap:7px; color:#d9e4eb; font-family:var(--cyber); }
.stat-value b { min-width:20px; font-size:12px; color:#bdcbd4; }
.stat-grade { --grade:#96a0aa; display:grid; place-items:center; width:30px; height:30px; flex:none; color:var(--grade); border:2px solid var(--grade); background:color-mix(in srgb,var(--grade) 12%,#07101b); box-shadow:0 0 10px color-mix(in srgb,var(--grade) 35%,transparent),inset 0 0 7px color-mix(in srgb,var(--grade) 18%,transparent); font:900 15px/1 var(--cyber); clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,18% 100%,0 82%); }
.stat-row meter { height:8px; accent-color:var(--cyan); filter:drop-shadow(0 0 4px rgba(35,243,255,.4)); }
.stat-row button { display:grid; place-items:center; gap:0; min-width:0; min-height:40px !important; border-color:rgba(35,243,255,.55) !important; background:linear-gradient(145deg,rgba(21,59,73,.95),rgba(20,36,50,.95)) !important; transition:transform .12s,box-shadow .12s,filter .12s; }
.stat-row button span { font:800 13px var(--cyber); }
.stat-row button small { color:#8feaf2 !important; font:700 9px var(--cyber) !important; line-height:1 !important; }
.stat-row button:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 0 14px rgba(35,243,255,.28); filter:brightness(1.2); }
.stat-row button:not(:disabled):active { transform:translateY(1px) scale(.96); }
.stat-row.upgrading { animation:stat-upgrade .42s ease-out; }
@keyframes stat-upgrade { 0%{background:rgba(217,255,67,.25);transform:translateX(-2px)} 45%{transform:translateX(2px)} 100%{background:transparent;transform:none} }
.loadout-card { position:relative; transition:transform .14s,filter .14s,box-shadow .14s; }
.loadout-card:not(.locked):hover { transform:translateY(-3px); box-shadow:0 0 18px rgba(35,243,255,.25); filter:brightness(1.16); }
.loadout-card:active { transform:scale(.97); }
.loadout-card.selected { box-shadow:inset 0 -3px var(--cyan),0 0 16px rgba(35,243,255,.25); }
.launch-btn { background:linear-gradient(100deg,var(--cyan),#75f6e5); box-shadow:5px 5px 0 rgba(255,50,127,.55),0 0 20px rgba(35,243,255,.2); transition:transform .12s,box-shadow .12s,filter .12s; }
.launch-btn:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(255,50,127,.62),0 0 25px rgba(35,243,255,.33); }
.launch-btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 rgba(255,50,127,.55); }
.action-button,#btn-item,.home-btn,.language-setting { transition:transform .1s,filter .12s,box-shadow .12s; }
.action-button:active,#btn-item:active,.home-btn:active { transform:scale(.95); filter:brightness(1.28); }
@media(max-width:600px) {
  .stat-row { grid-template-columns:78px 56px minmax(30px,1fr) 54px; gap:5px; min-height:42px; }
  .stat-grade { width:28px;height:28px; }
  .start-card::before { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* Full-screen cyber-item projection: iconography only, so match feedback stays text-free. */
.item-hologram { --holo:#25efff; position:absolute; inset:0; z-index:11; overflow:hidden; pointer-events:none; opacity:0; mix-blend-mode:screen; }
.item-hologram.rival { --holo:#ff327f; }
.item-hologram[data-type="bigHoop"] { --holo:#d9ff43; }
.item-hologram[data-type="warp"] { --holo:#ff37d1; }
.item-hologram[data-type="drain"] { --holo:#ff6b32; }
.item-hologram.active { animation:holo-veil 1.55s cubic-bezier(.16,.8,.24,1) both; }
.item-hologram::before,.item-hologram::after { content:''; position:absolute; inset:0; }
.item-hologram::before { background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--holo) 22%,transparent),transparent 42%),repeating-linear-gradient(0deg,transparent 0 6px,color-mix(in srgb,var(--holo) 10%,transparent) 7px 8px); animation:holo-flicker .12s steps(2) infinite; }
.item-hologram::after { inset:8%; border:1px solid color-mix(in srgb,var(--holo) 58%,transparent); clip-path:polygon(0 8%,8% 0,38% 0,41% 2%,72% 2%,75% 0,94% 0,100% 6%,100% 92%,92% 100%,62% 100%,59% 98%,27% 98%,24% 100%,6% 100%,0 94%); box-shadow:inset 0 0 38px color-mix(in srgb,var(--holo) 18%,transparent); animation:holo-frame-pulse .3s steps(2) infinite; }
.holo-core { position:absolute; width:min(50vmin,360px); left:50%; top:50%; overflow:visible; transform:translate(-50%,-50%); filter:drop-shadow(0 0 7px var(--holo)) drop-shadow(0 0 20px color-mix(in srgb,var(--holo) 65%,transparent)); }
.holo-core path,.holo-core circle,.holo-core ellipse,.holo-core rect { fill:none; stroke:var(--holo); stroke-width:3; vector-effect:non-scaling-stroke; }
.holo-frame { stroke-dasharray:16 7; animation:holo-spin 3.8s linear infinite; transform-origin:120px 111px; }
.holo-orbit { stroke-width:1.5 !important; stroke-dasharray:5 11; transform-origin:120px 111px; animation:holo-spin 2.1s linear infinite reverse; }
.orbit-b { animation-duration:1.35s; animation-direction:normal; }
.holo-symbol { display:none; }
.item-hologram[data-type="wall"] .symbol-wall,.item-hologram[data-type="freeze"] .symbol-freeze,.item-hologram[data-type="bigHoop"] .symbol-bigHoop,.item-hologram[data-type="warp"] .symbol-warp,.item-hologram[data-type="lock"] .symbol-lock,.item-hologram[data-type="drain"] .symbol-drain { display:block; }
.holo-scan { position:absolute; z-index:2; left:-10%; right:-10%; height:22%; top:-24%; background:linear-gradient(transparent,color-mix(in srgb,var(--holo) 42%,transparent),transparent); filter:blur(2px); animation:holo-scan 1.05s ease-in both; transform:skewY(-5deg); }
.holo-shard { position:absolute; width:18%; height:2px; background:var(--holo); box-shadow:0 0 12px var(--holo); }
.shard-a { left:8%; top:30%; transform:rotate(-13deg); }.shard-b { right:7%; top:66%; transform:rotate(11deg); }.shard-c { left:22%; bottom:12%; width:9%; }
.item-hologram.active .holo-shard { animation:holo-shard .7s ease-out both; }
@keyframes holo-veil { 0%{opacity:0;filter:brightness(2)} 7%{opacity:1} 15%{opacity:.35} 21%,78%{opacity:.92} 100%{opacity:0;filter:brightness(1.2)} }
@keyframes holo-flicker { 0%{transform:translateX(-1px);opacity:.72} 100%{transform:translateX(1px);opacity:1} }
@keyframes holo-frame-pulse { 50%{opacity:.52;transform:scale(.995)} }
@keyframes holo-spin { to{transform:rotate(360deg)} }
@keyframes holo-scan { from{top:-24%} to{top:108%} }
@keyframes holo-shard { 0%{opacity:0;transform:translateX(-35px) scaleX(.2)} 24%{opacity:1} 100%{opacity:0;transform:translateX(70px) scaleX(1.8)} }

/* Neon-industrial court pass */
body {
  background:
    linear-gradient(115deg,rgba(255,214,52,.055),transparent 24%),
    radial-gradient(circle at 12% 82%,rgba(255,40,123,.25),transparent 29%),
    radial-gradient(circle at 87% 15%,rgba(0,229,255,.22),transparent 31%),
    repeating-linear-gradient(90deg,transparent 0 63px,rgba(35,243,255,.035) 64px),
    #01040a !important;
}
.top-hud,.control-deck {
  background:linear-gradient(105deg,rgba(2,7,16,.98),rgba(7,20,31,.96) 54%,rgba(18,8,24,.96)) !important;
  border:1px solid rgba(35,243,255,.7) !important;
  box-shadow:inset 4px 0 #d9ff43,inset -3px 0 #ff327f,0 0 22px rgba(35,243,255,.2),0 10px 35px rgba(0,0,0,.38) !important;
}
.top-hud { clip-path:polygon(0 0,98.4% 0,100% 22%,100% 100%,1.2% 100%,0 77%) !important; }
.brand-block strong { color:#f3fcff; text-shadow:2px 0 #ff327f,-2px 0 #25efff,0 0 13px rgba(35,243,255,.55); letter-spacing:.1em; }
.brand-block .eyebrow { color:#d9ff43 !important; }
.scoreboard { position:relative; filter:drop-shadow(0 0 9px rgba(35,243,255,.25)); transform:skewX(-3deg); }
.scoreboard::before { content:''; position:absolute; left:-12px; right:-12px; bottom:-5px; height:2px; background:linear-gradient(90deg,var(--cyan),var(--acid),var(--pink)); box-shadow:0 0 10px var(--cyan); }
.score-side,.clock-stack { transform:skewX(3deg); }
.player-side { background:linear-gradient(110deg,rgba(0,218,255,.18),rgba(2,8,18,.9)) !important; border-color:rgba(35,243,255,.8) !important; box-shadow:inset 0 0 18px rgba(35,243,255,.11); }
.ai-side { background:linear-gradient(250deg,rgba(255,35,117,.2),rgba(11,5,18,.92)) !important; border-color:rgba(255,50,127,.82) !important; box-shadow:inset 0 0 18px rgba(255,50,127,.12); }
.score-side strong { text-shadow:0 0 13px currentColor,2px 2px 0 rgba(255,255,255,.12); }
.clock-stack { color:#f7fbff; border-color:rgba(217,255,67,.62) !important; background:linear-gradient(#02040a,#0b1014) !important; box-shadow:inset 0 -3px rgba(217,255,67,.65),0 0 13px rgba(217,255,67,.12); }
.clock-stack > span { text-shadow:0 0 10px rgba(255,255,255,.6); }
.clock-stack small { color:#ffcf34 !important; }
.arena {
  background:#01040b;
  border:1px solid rgba(35,243,255,.85) !important;
  box-shadow:inset 0 0 70px rgba(0,5,15,.86),inset 0 -3px rgba(255,50,127,.52),0 0 28px rgba(35,243,255,.24) !important;
}
.arena-vignette {
  background:
    linear-gradient(90deg,rgba(35,243,255,.1) 1px,transparent 1px),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(35,243,255,.035) 6px),
    linear-gradient(135deg,rgba(217,255,67,.045),transparent 22%,transparent 78%,rgba(255,50,127,.065)) !important;
  background-size:96px 100%,100% 6px,100% 100% !important;
  box-shadow:inset 0 0 125px rgba(0,0,0,.65),inset 0 0 0 1px rgba(35,243,255,.14) !important;
}
.possession-badge { color:#02060c !important; background:linear-gradient(90deg,#25efff,#aafcff) !important; border:0 !important; box-shadow:5px 0 #d9ff43,0 0 18px rgba(35,243,255,.5); clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%); }
.possession-badge.rival { background:linear-gradient(90deg,#ff327f,#ff8aaf) !important; box-shadow:5px 0 #ffcf34,0 0 18px rgba(255,50,127,.5); }
.finish-prompt,.drive-hud,.flow-hud { background:linear-gradient(105deg,rgba(2,8,18,.94),rgba(7,20,29,.88)) !important; border-color:rgba(35,243,255,.66) !important; box-shadow:inset 3px 0 var(--cyan),0 0 17px rgba(35,243,255,.13) !important; }
.finish-prompt { clip-path:polygon(7% 0,100% 0,100% 82%,94% 100%,0 100%,0 22%); }
.finish-prompt small { color:#d9ff43 !important; }
.control-deck { position:relative; }
.control-deck::before { content:'NEURAL INPUT · ONLINE'; position:absolute; top:2px; right:10px; color:rgba(217,255,67,.5); font:700 7px var(--cyber); letter-spacing:.16em; pointer-events:none; }
.action-button,#btn-item { border-color:rgba(35,243,255,.54) !important; box-shadow:inset 0 0 14px rgba(35,243,255,.055),0 0 8px rgba(0,0,0,.35); }
.action-button:hover,#btn-item:hover { box-shadow:inset 0 0 18px rgba(35,243,255,.14),0 0 13px rgba(35,243,255,.2); }
@media(max-width:600px) { .control-deck::before { display:none; } .scoreboard { transform:none; } .score-side,.clock-stack { transform:none; } }

/* Rival time stop is presented as a missing slice of time, never as visible frozen movement. */
.time-skip-curtain { position:absolute; inset:0; z-index:13; overflow:hidden; pointer-events:none; opacity:0; background:#00030a; }
.time-skip-curtain::before,.time-skip-curtain::after { content:''; position:absolute; inset:0; }
.time-skip-curtain::before { background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(35,243,255,.1) 8px),radial-gradient(circle at 50% 48%,rgba(255,50,127,.18),transparent 42%); }
.time-skip-curtain::after { left:-15%; right:-15%; top:48%; bottom:auto; height:2px; background:#e9ffff; box-shadow:0 0 12px #25efff,0 0 35px #ff327f; transform:scaleX(0); }
.time-skip-curtain i { position:absolute; left:-10%; width:120%; height:3px; background:#25efff; box-shadow:0 0 9px #25efff; opacity:0; }
.time-skip-curtain i:nth-child(1) { top:23%; }.time-skip-curtain i:nth-child(2) { top:57%; background:#ff327f; }.time-skip-curtain i:nth-child(3) { top:78%; }
.arena.rival-time-skip .time-skip-curtain { animation:time-skip-cut .56s steps(1,end) both; }
.arena.rival-time-skip .time-skip-curtain::after { animation:time-skip-seam .56s ease-in-out both; }
.arena.rival-time-skip .time-skip-curtain i { animation:time-skip-glitch .18s steps(2,end) 2; }
@keyframes time-skip-cut { 0%{opacity:0} 8%{opacity:.2} 14%,72%{opacity:1} 79%{opacity:.35} 86%{opacity:.9} 100%{opacity:0} }
@keyframes time-skip-seam { 0%,9%{transform:scaleX(0)} 28%,67%{transform:scaleX(1)} 100%{transform:scaleX(0);opacity:0} }
@keyframes time-skip-glitch { 0%{opacity:0;transform:translateX(-12%)} 45%{opacity:.8} 100%{opacity:0;transform:translateX(18%)} }