: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, .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; }.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; margin-inline: auto; /* A board is no use if the player cannot see their own back row. It grows with the column it sits in, but never past the height left under the header, so on a short screen it shrinks instead of running off the bottom; the floor keeps it playable on a phone held sideways, where the header is small and the screen is shorter still. */ max-width: min(100%, max(270px, calc(100vh - 236px))); max-width: min(100%, max(270px, calc(100svh - 236px))); 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); touch-action: none; }.board-art { position: absolute; inset: 0; /* A canvas is a replaced element: told only where its edges are, it keeps its own pixel size instead of stretching to them, so on a screen that packs two device pixels into one it drew at twice the board's width and spilled off the bottom. The size is spelled out. */ width: 100%; height: 100%; z-index: 3; pointer-events: none; }.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; }.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%; }


/* 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,.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; }

@keyframes blink { 50% { opacity:.3; } }  
@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, .turn-orb, .control-button { flex: 1; }.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; }.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; } }

/* Device comfort: keep board squares proportional; enlarge only page controls. */
body :is(.control-button,.site-nav a){min-height:44px}
body .site-nav a{display:flex;align-items:center;justify-content:center}
body .result-card{max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);overflow:auto}
body .result-card p{font-size:14px;line-height:1.7}
@media(max-width:820px){
 body .hud{grid-template-columns:1fr 1fr;gap:8px}
 body .mission-panel{grid-column:1/-1;grid-row:2;padding:10px}
 body .player-card--cpu{grid-column:2;grid-row:1}
 body .player-card{min-width:0;padding:10px;gap:8px}
 body .player-card strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body .side-panel--right{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body .side-panel--right .turn-orb,body .side-panel--right .control-hint{display:none}
 body .control-button{font-size:11px;padding:10px}
}
@media(orientation:landscape) and (max-height:600px){
 body .app-shell{padding:8px 12px;gap:8px}
 body .hud{display:none}
 body .game-layout{grid-template-columns:minmax(0,1fr) 180px;gap:16px}
 body .board-wrap{grid-column:1;grid-row:1;width:min(100%,calc(100svh - 108px));justify-self:center}
 body .side-panel--left{display:none}
 body .side-panel--right{grid-column:2;display:flex;flex-direction:column}
 body .board-legend{display:none}
 body .topbar{min-height:44px}
}

@media(max-width:650px){
 body .player-card{padding:8px;gap:6px}
 body .player-card>div:not(.pilot-icon):not(.piece-readout){min-width:0;flex:1}
 body .player-card :is(strong,.label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* A control button floats its decorative arrow to the right edge. The word
   beside it must not float too: it is the label, it comes first, and it is set
   in the button own type, not the arrow’s 15px. */
.control-button .control-label { float: none; font: inherit; }