:root {
  --ink: #071127;
  --ink-2: #0c1a38;
  --panel: #102348;
  --line: #385785;
  --soft-line: #8aa7d455;
  --white: #eff8ff;
  --muted: #8ea7c9;
  --red: #ff4e6a;
  --red-hot: #ff9b77;
  --cyan: #42e9ed;
  --cyan-hot: #bdffff;
  --gold: #ffd66b;
  --tile-dark: #172a54;
  --tile-light: #263f72;
}

* { box-sizing: border-box; }
body {
  min-width: 320px; margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--white);
  background: url("./assets/arcade-playground-background.png") center / cover fixed no-repeat, var(--ink);
  font-family: "Space Grotesk", sans-serif;
}
body::before, body::after { display: none; }
.grain { position: fixed; z-index: 10; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
button { font: inherit; cursor: pointer; }
.app-shell { width: min(1300px, 100%); min-height: 100vh; margin: auto; padding: 24px clamp(16px, 4vw, 56px) 18px; }

.topbar, .hud, footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { min-height: 49px; gap: 16px; border-bottom: 1px solid var(--soft-line); }
.brand { display: inline-flex; gap: 12px; align-items: center; color: var(--white); text-decoration: none; font-size: clamp(19px, 2.8vw, 30px); font-weight: 700; letter-spacing: .05em; }
.brand em { color: var(--red); font-style: normal; }.brand-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; padding: 6px; transform: rotate(45deg); background: var(--red); box-shadow: 0 0 18px #ff4e6a99; }.brand-mark i { width: 8px; height: 8px; background: var(--ink); }.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: #ff899d; }.arcade-tag, .label, .board-legend, footer, .control-hint { font-family: "DM Mono", monospace; letter-spacing: .1em; }.arcade-tag { color: var(--muted); font-size: 11px; }.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); animation: blink 1.4s infinite; }.help-button { width: 33px; height: 33px; padding: 0; border: 1px solid var(--soft-line); border-radius: 50%; color: var(--cyan); background: #ffffff08; font-size: 18px; font-weight: 700; }.help-button:hover { color: var(--ink); background: var(--cyan); box-shadow: 0 0 20px #42e9ed77; }

.hud { gap: 18px; margin: 21px 0 13px; }.player-card { display: flex; align-items: center; gap: 10px; width: 31%; min-width: 220px; padding: 9px 11px; border: 1px solid var(--soft-line); background: #0e2046a8; box-shadow: inset 0 1px #ffffff10; }.player-card--you { justify-content: flex-end; text-align: right; }.pilot-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 7px; font: 700 11px "DM Mono", monospace; }.pilot-icon--cpu { color: var(--cyan); box-shadow: inset 0 0 15px #42e9ed31; }.pilot-icon--you { color: var(--red); box-shadow: inset 0 0 15px #ff4e6a31; }.label { display: block; color: var(--muted); font-size: 8px; font-weight: 500; }.player-card strong { display: block; margin-top:3px; font-size: 12px; letter-spacing: .06em; }.piece-readout { display: flex; flex-direction: column; justify-content: center; min-width: 43px; color: var(--muted); }.player-card--you .piece-readout { border-left: 1px solid var(--soft-line); }.player-card--cpu .piece-readout { border-right: 1px solid var(--soft-line); }.piece-readout b { color: var(--white); font-size: 19px; line-height: 17px; }.piece-readout span { font: 7px "DM Mono", monospace; letter-spacing: .07em; }.mission-panel { position: relative; flex: 1; min-width: 255px; padding: 8px 20px; text-align: center; }.mission-panel::before, .mission-panel::after { content:""; position: absolute; top: 50%; width: 19%; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }.mission-panel::before { left: 0; }.mission-panel::after { right: 0; transform: rotate(180deg); }.mission-panel strong { display: block; margin-top: 4px; color: var(--gold); font-size: 14px; letter-spacing: .08em; }.sub-status { color: var(--muted); font-size: 11px; }

.game-layout { display: grid; grid-template-columns: 155px minmax(420px, 680px) 155px; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 36px); }.side-panel { display: flex; flex-direction: column; gap: 11px; }.stat-block, .scanner-card, .turn-orb, .control-button { border: 1px solid var(--soft-line); background: linear-gradient(135deg, #172d5bd4, #0d1c3cda); }.stat-block { padding: 11px 13px; }.stat-block b { display: block; margin-top: 1px; color: var(--gold); font: 700 25px "DM Mono", monospace; }.scanner-card { position: relative; min-height: 114px; padding: 18px 13px 10px; overflow: hidden; }.scanner-line { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 41%, #42e9ed22 48%, #42e9ed44 50%, #42e9ed22 52%, transparent 59%); animation: scan 3s linear infinite; }.scanner-card p { position: relative; margin: 8px 0 0; color: #bed0eb; font-size: 12px; line-height: 1.35; }.turn-orb { display: grid; place-content: center; width: 105px; height: 105px; margin: 0 auto 5px; border-radius: 50%; text-align: center; box-shadow: inset 0 0 0 6px #ffffff06, 0 0 0 5px #42e9ed0c, 0 0 20px #42e9ed22; }.turn-orb span { color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .13em; }.turn-orb b { color: var(--gold); font-size: 19px; letter-spacing: .12em; }.turn-orb.cpu-turn { border-color: #42e9edcc; box-shadow: inset 0 0 0 6px #ffffff06, 0 0 22px #42e9ed66; }.turn-orb.cpu-turn b { color: var(--cyan); }.control-button { padding: 12px 10px; color: var(--white); font: 600 10px "DM Mono", monospace; letter-spacing: .09em; transition: transform .16s, box-shadow .16s, background .16s; }.control-button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px #0008; }.control-button--primary { border-color: #ff7a887d; background: linear-gradient(135deg, #ff526d, #c42c5d); box-shadow: 0 4px 14px #ff365144; }.control-button--primary:hover { background: linear-gradient(135deg, #ff657d, #e7346b); }.control-button span { float: right; font-size: 15px; line-height: 8px; }.control-hint { padding-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.65; text-align: center; }

.board-wrap { width: 100%; }.board-frame { position: relative; padding: clamp(9px, 1.7vw, 15px); background: linear-gradient(135deg, #546e9e 0%, #193258 13%, #0e1a36 48%, #355889 100%); clip-path: polygon(3.2% 0, 96.8% 0, 100% 3.2%, 100% 96.8%, 96.8% 100%, 3.2% 100%, 0 96.8%, 0 3.2%); filter: drop-shadow(0 18px 18px #000a); }.board-frame::before { content: ""; position:absolute; inset: 4px; opacity: .7; background: linear-gradient(135deg, #ffffff23, transparent 15%, transparent 85%, #ffffff18); clip-path: inherit; pointer-events: none; }.board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; overflow: hidden; border: 1px solid #a9c1e340; background: var(--tile-dark); }.square { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 0; padding: 0; background: var(--tile-light); }.square.dark { background: var(--tile-dark); }.square.dark::after { content: ""; position: absolute; inset: 0; opacity: .27; background: linear-gradient(135deg, transparent 48%, #6c8fc923 49%, transparent 51%), repeating-linear-gradient(0deg, transparent 0 6px, #ffffff0a 7px 8px); pointer-events: none; }.square:nth-child(16n + 1)::before, .square:nth-child(16n + 3)::before, .square:nth-child(16n + 5)::before, .square:nth-child(16n + 7)::before { content: attr(data-coordinate); position: absolute; top: 5px; left: 6px; color: #b7d4ff4d; font: 8px "DM Mono", monospace; pointer-events: none; }.square:nth-child(n + 57)::before { top: auto; bottom: 5px; }.square.legal { cursor: pointer; background: #315786; }.square.legal::before { content:""; position:absolute; z-index:1; width: 22%; aspect-ratio: 1; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 5px #ffd66b22, 0 0 17px var(--gold); animation: pulse 1s infinite alternate; }.square.capture-legal::before { background: var(--red-hot); box-shadow: 0 0 0 5px #ff9b7722, 0 0 17px var(--red-hot); }.square.selected { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 24px #ffd66b55; }.square.last-move { background-color: #375783; }.piece { position: relative; z-index: 2; width: 72%; aspect-ratio: 1; border: 0; border-radius: 50%; color: transparent; cursor: pointer; transition: transform .17s ease, filter .17s ease; }.piece::before, .piece::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }.piece::before { inset: 8%; border: 1px solid #ffffff69; }.piece::after { inset: 19%; border: 1px solid #0005; }.piece.red { background: radial-gradient(circle at 33% 25%, #ffd0b7 0 3%, var(--red-hot) 6%, var(--red) 36%, #a31945 78%, #6b1234); box-shadow: inset -5px -7px 9px #5b0d2990, inset 5px 5px 8px #ffffff2d, 0 5px 0 #570c2b, 0 9px 11px #0008, 0 0 12px #ff4e6a55; }.piece.cyan { background: radial-gradient(circle at 33% 25%, #efffff 0 3%, var(--cyan-hot) 6%, var(--cyan) 36%, #0a9cb5 78%, #075174); box-shadow: inset -5px -7px 9px #064a6c90, inset 5px 5px 8px #ffffff47, 0 5px 0 #043d5b, 0 9px 11px #0008, 0 0 12px #42e9ed55; }.piece.available { animation: ready .9s ease-in-out infinite alternate; }.piece.selected-piece { transform: translateY(-7%) scale(1.1); filter: brightness(1.26); }.piece.king { outline: 2px solid var(--gold); outline-offset: 2px; }.piece.king span { position: absolute; z-index: 3; top: 50%; left: 50%; color: var(--gold); font: 700 clamp(11px, 2.2vw, 19px)/1 "DM Mono", monospace; text-shadow: 0 1px #7a4b00; transform: translate(-50%, -53%); }.board-scan { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0 48%, #fff3 50%, transparent 52%) 0 0 / 17% 100%, linear-gradient(180deg, transparent 0 49%, #fff2 50%, transparent 51%) 0 0 / 100% 17%; mix-blend-mode: overlay; opacity: .32; }.corner { position:absolute; z-index:3; width: 23px; height:23px; border-color: var(--cyan); border-style: solid; filter: drop-shadow(0 0 5px var(--cyan)); }.corner--tl { top: 3px; left:3px; border-width: 2px 0 0 2px; }.corner--tr { top:3px; right:3px; border-width: 2px 2px 0 0; }.corner--bl { bottom:3px; left:3px; border-width: 0 0 2px 2px; }.corner--br { right:3px; bottom:3px; border-width: 0 2px 2px 0; }.board-legend { display:flex; justify-content:center; gap: 23px; padding: 9px 0 0; color: var(--muted); font-size: 8px; }.board-legend i { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; }.legend-red { background:var(--red); box-shadow:0 0 7px var(--red); }.legend-cyan { background:var(--cyan); box-shadow:0 0 7px var(--cyan); }

footer { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--soft-line); color: var(--muted); font: 8px "DM Mono", monospace; letter-spacing: .1em; } footer b { color: #9eb4d3; font-weight: 500; }
dialog { width: min(430px, calc(100vw - 32px)); border: 1px solid #5575a5; color: var(--white); background: linear-gradient(140deg, #183466, #0b1938); box-shadow: 0 20px 70px #000b; padding: 27px; }dialog::backdrop { background: #030918bb; backdrop-filter: blur(5px); }dialog h2 { margin: 6px 0 12px; color: var(--gold); font-size: 24px; letter-spacing:.05em; }dialog p, dialog li { color: #c6d5ed; line-height: 1.55; }dialog li { margin: 8px 0; }dialog b { color: var(--gold); }.dialog-close { position:absolute; right:9px; top:5px; border:0; color: var(--muted); background:transparent; font-size:25px; }.dialog-close:hover { color:var(--white); }dialog .control-button { width: 100%; margin-top: 12px; }.result-overlay { position: fixed; z-index: 20; inset:0; display:grid; place-items:center; pointer-events:none; background:transparent; }.result-overlay[hidden] { display:none; }.result-card { width: min(390px, calc(100vw - 32px)); padding: 31px; border: 1px solid #5575a5; text-align:center; pointer-events:auto; background: linear-gradient(140deg, #183466f5, #0b1938f5); box-shadow:0 16px 50px #000d, inset 0 1px #fff2; }.result-card h2 { margin: 8px 0; color: var(--gold); font-size: 36px; letter-spacing:.1em; }.result-card p { margin:0 0 23px; color:#c6d5ed; }.result-card button { width: 100%; }
.piece { cursor: grab; touch-action: none; }
.piece:active { cursor: grabbing; }
.piece.drag-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; transform: translate(-50%, -50%) scale(1.14); transition: none; filter: brightness(1.25) drop-shadow(0 12px 12px #0009); animation: none; }
.square.drop-hover { box-shadow: inset 0 0 0 4px var(--cyan), inset 0 0 25px #42e9ed66; }
.start-actions { display:grid; gap:10px; }.start-actions .control-button { width:100%; }

/* Shared multiplayer pages */
.page-topbar { align-items: center; flex-wrap: wrap; padding-bottom: 12px; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.site-nav a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: #d7e7fb; font: 500 9px "DM Mono", monospace; letter-spacing: .07em; text-decoration: none; transition: .17s ease; }
.site-nav a span { color: var(--cyan); font-size: 13px; }.site-nav a:hover { border-color: #d9effc55; background: #0a234a99; transform: translateY(-1px); }.site-nav a[aria-current="page"] { border-color: #ffd66b77; color: var(--gold); background: #163361df; box-shadow: 0 0 12px #ffd66b25; }.site-nav a[aria-current="page"] span { color: var(--gold); }
.page-body .app-shell { padding-bottom: 52px; }.page-hero { max-width: 670px; margin: clamp(42px, 7vw, 82px) auto 33px; text-align: center; text-shadow: 0 2px 7px #071127aa; }.page-hero h1 { margin: 7px 0 10px; color: #fff9e8; font-size: clamp(36px, 6vw, 72px); letter-spacing: .04em; line-height: .96; }.page-hero h1 em { color: var(--red); font-style: normal; }.page-hero p { margin: 0; color: #e5f2ff; font-size: 17px; }.arcade-panel { position: relative; border: 1px solid #c7e7ff6e; background: linear-gradient(140deg, #15376eea, #102855e3); box-shadow: 0 13px 28px #07112788, inset 0 1px #ffffff2b; }.arcade-panel::before { content:""; position:absolute; inset:7px; border: 1px solid #ffffff15; pointer-events:none; }.arcade-panel h2 { position:relative; margin: 5px 0 18px; color: var(--white); font-size: 24px; letter-spacing:.05em; }.arcade-panel label { position:relative; display:grid; gap:7px; margin:13px 0; color:#ddecff; font-size:12px; font-weight:600; }.arcade-panel input,.arcade-panel select { width:100%; padding:12px; border:1px solid #a8cef16c; color:var(--white); background:#071a3be8; font: 12px "DM Mono", monospace; outline:none; }.arcade-panel input:focus,.arcade-panel select:focus { border-color: var(--cyan); box-shadow:0 0 0 3px #42e9ed2c; }.arcade-panel option { background:#102855; }.lobby-layout,.profile-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap:20px; max-width:1000px; margin:auto; }.lobby-layout>.arcade-panel,.profile-layout>.arcade-panel { min-height: 345px; padding:25px; }.panel-heading { position:relative; display:flex; align-items:start; justify-content:space-between; gap:16px; }.panel-heading h2 { margin-bottom:13px; }.mini-button { padding:8px 10px; border:1px solid #a9cdfd71; color:var(--white); background:#102958d9; font: 9px "DM Mono", monospace; letter-spacing:.07em; }.mini-button:hover { border-color:var(--cyan); background:#1b4780; }.mini-button:disabled { opacity:.5; cursor:not-allowed; }.room-list,.score-list,.move-list { position:relative; list-style:none; padding:0; margin:0; }.room-list { display:grid; gap:9px; }.room-list li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border:1px solid #b9dcff4f; background:#0a2148a8; }.room-list strong,.room-list small,.room-list code { display:block; }.room-list strong { color:#fff5c5; font-size:14px; }.room-list small { margin:4px 0; color:#bfcee6; font-size:11px; }.room-list code { color:var(--cyan); font:10px "DM Mono",monospace; letter-spacing:.12em; }.create-panel .control-button { position:relative; width:100%; margin-top:8px; }.switch-line { grid-template-columns:auto 1fr; align-items:center; }.switch-line input { width:auto; accent-color:var(--red); }.join-code { position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; margin-top:18px; padding-top:15px; border-top:1px solid #afd7ff4d; }.join-code label { margin:0; }.muted-copy { position:relative; margin:15px 0 0; color:#c2d4ee; font-size:12px; line-height:1.4; }.score-head,.score-list li { display:grid; grid-template-columns: 80px 1fr 90px 100px; gap:12px; align-items:center; }.leaderboard-panel { max-width: 850px; margin:auto; padding:19px; }.score-head { position:relative; padding:0 12px 9px; color:#bfd2ef; font:9px "DM Mono",monospace; letter-spacing:.09em; }.score-list li { position:relative; padding:14px 12px; border-top:1px solid #b4d9ff43; background:#0a214880; }.score-list li:nth-child(1) { background:#5b451055; }.score-list li span:first-child { color:var(--gold); font:700 15px "DM Mono",monospace; }.score-list li strong { color:var(--white); }.score-list li b { color:var(--cyan); text-align:right; }.profile-card { text-align:center; }.profile-score { position:relative; margin:15px 0 19px; }.profile-score b { display:block; color:var(--gold); font:700 57px "DM Mono",monospace; line-height:.9; }.profile-score span { color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.14em; }.profile-card dl { position:relative; display:grid; grid-template-columns:1fr 1fr; margin:0; }.profile-card dl div { padding:12px; border-top:1px solid #b9dcff4b; }.profile-card dt { color:#c7d8ee; font:9px "DM Mono",monospace; letter-spacing:.1em; }.profile-card dd { margin:4px 0 0; color:var(--cyan); font-size:24px; font-weight:700; }.profile-layout .arcade-panel { padding:27px; }.profile-layout .control-button { width:100%; margin-top:12px; }.rules-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; max-width:900px; margin:auto; }.rules-grid .arcade-panel { min-height:198px; padding:25px; }.rules-grid .arcade-panel>b { position:relative; display:block; color:var(--red); font:700 30px "DM Mono",monospace; }.rules-grid .arcade-panel p { position:relative; margin:0; color:#d9e6f7; line-height:1.5; }.start-link { display:block; width:100%; text-decoration:none; }.move-list { margin-top:9px; max-height:190px; overflow:auto; }.move-list li { position:relative; display:flex; gap:7px; padding:5px 0; border-bottom:1px solid #c5e1ff1a; color:#d4e4fb; font:10px "DM Mono",monospace; }.move-list b { width:15px; color:var(--red); }.move-list b.cyan { color:var(--cyan); }

@keyframes blink { 50% { opacity:.3; } } @keyframes scan { from { transform:translateY(-100%); } to { transform:translateY(100%); } } @keyframes pulse { to { transform:scale(1.25); opacity:.65; } } @keyframes ready { to { filter:brightness(1.3); transform:translateY(-3px); } }
@media (max-width: 850px) { .game-layout { grid-template-columns: 1fr; max-width: 610px; margin: auto; }.side-panel { flex-direction: row; align-items: stretch; }.side-panel--left { order:2; }.side-panel--right { order:3; }.stat-block, .scanner-card, .turn-orb, .control-button { flex: 1; }.scanner-card { min-height: auto; }.turn-orb { width:auto; height:auto; margin:0; padding:9px; border-radius: 4px; }.turn-orb span, .turn-orb b { display:inline; margin:0 3px; }.control-hint { display:none; }.board-wrap { order:1; } }
@media (max-width: 650px) { .app-shell { padding-top:16px; }.arcade-tag { display:none; }.hud { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.mission-panel { order:-1; grid-column:1/-1; padding:5px; }.mission-panel::before,.mission-panel::after { display:none; }.player-card { width:auto; min-width:0; padding:7px; }.player-card strong { font-size:10px; }.piece-readout { min-width:32px; }.piece-readout b { font-size:16px; }.pilot-icon { flex-basis:28px; width:28px; height:28px; font-size:9px; }.side-panel { gap:6px; }.scanner-card { display:none; }.stat-block { padding:7px 9px; }.stat-block b { font-size:18px; }.control-button { padding:10px 6px; font-size:9px; }.board-legend { gap:12px; font-size:7px; } footer span:nth-child(2) { display:none; } }
@media (max-width: 850px) { .page-topbar { justify-content:center; }.page-topbar .arcade-tag { display:none; }.lobby-layout,.profile-layout { grid-template-columns:1fr; max-width:610px; }.page-hero { margin-top:40px; }.rules-grid { max-width:610px; }.site-nav { width:100%; order:3; }.site-nav a { flex:1; justify-content:center; } }
@media (max-width: 520px) { .site-nav { gap:2px; }.site-nav a { padding:7px 3px; font-size:7px; }.site-nav a span { display:none; }.page-hero h1 { font-size:37px; }.page-hero p { font-size:14px; }.rules-grid { grid-template-columns:1fr; }.score-head,.score-list li { grid-template-columns: 38px 1fr 45px 60px; gap:5px; }.score-head { padding-left:4px; padding-right:4px; font-size:7px; }.score-list li { padding:12px 4px; font-size:11px; }.leaderboard-panel { padding:12px; }.lobby-layout>.arcade-panel,.profile-layout>.arcade-panel { padding:18px; }.join-code { grid-template-columns:1fr; }.page-topbar .brand { font-size:22px; } }