/* Sunderland Arcade: the permanent palette for the UI and Canvas renderer. */
:root {
  color-scheme: dark;
  font-family: Consolas, 'Cascadia Code', monospace;
  --uos-blue: #0069FA;
  --uos-orange: #FF7533;
  --uos-light-blue: #42ABE8;
  --bg: #0B111D;
  --panel: #172132;
  --text: #F4F7FC;
  --muted: #94a6bd;
  --line: #2a3c52;
  --accent: var(--uos-light-blue);
  --collectible: var(--uos-orange);
  --collectible-glow: #ff753329;
  --body-glow: #1b2c43;
  --dashboard-bg: #172132;
  --card-bg: #172132;
  --card-border: #355570;
  --field-bg: #0B111D;
  --field-border: #355570;
  --action-bg: #1b304a;
  --action-ink: #F4F7FC;
  --action-hover: #243f5c;
  --brand-bg: #172d47;
  --brand-ink: var(--uos-light-blue);
  --self-bg: #42abe80c;
  --badge-border: #34566d;
  --arena-bg: #0B111D;
  --arena-grid: #172536;
  --arena-border: #42abe83d;
  --arena-focus: #42abe855;
  --arena-markings: #233d55;
  --arena-ring: var(--uos-light-blue);
  --arena-label: #F4F7FC;
  --arena-face: #0B111D;
  --arena-font: bold 13px Consolas, monospace;
}
*{box-sizing:border-box}
body{margin:0;
background:radial-gradient(ellipse at 45% -20%,var(--body-glow) 0,transparent 55%),var(--bg);
color:var(--text)}
button,input{font:inherit}
.shell{max-width:1510px;
margin:auto;
padding:0 38px}
.masthead{height:86px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:32px}
.brand{font-weight:800;
font-size:18px;
letter-spacing:1px;
color:var(--text);
text-decoration:none;
display:flex;
align-items:center;
gap:9px;
flex-shrink:0;
white-space:nowrap}
.brand-name{display:block}
.brand-icon{background:var(--brand-bg);
color:var(--brand-ink);
border-radius:7px;
width:36px;
height:36px;
flex-shrink:0;
display:grid;
place-items:center;
font-size:20px;
line-height:1;
letter-spacing:0;
box-shadow:inset 0 0 0 1px var(--uos-blue)}
.muted{color:var(--muted)}
.edition{font-size:10px;
letter-spacing:1.7px;
color:var(--muted)}
.connection{margin-left:auto;
border:1px solid var(--line);
border-radius:25px;
padding:8px 13px;
display:flex;
align-items:center;
gap:8px;
font-size:11px}
.connection i,.live-dot,.room-label i{display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:var(--collectible)}
.connection[data-state=connected] i,.live-dot,.room-label i{background:var(--accent)}
.intro{display:flex;
justify-content:space-between;
align-items:center;
margin:34px 0 26px}
.eyebrow,.stat-label,.panel-heading,.card-tag{font-size:10px;
font-weight:700;
letter-spacing:1.8px}
.eyebrow{color:var(--accent);
margin:0 0 12px}
h1{font-size:clamp(24px,2.5vw,36px);
letter-spacing:-1.3px;
margin:0;
font-weight:700}
h1 span{color:#98a6b9}
.subtitle{font-size:13px;
color:var(--muted);
margin:11px 0 0}
.room-label{font-family:Consolas,monospace;
font-size:11px;
letter-spacing:1px}
.room-label i{margin-right:7px}
.room-label span{display:block;
text-align:right;
color:var(--muted);
font-size:9px;
margin-top:8px}
.dashboard{display:grid;
grid-template-columns:.8fr 1.1fr 1fr 1fr;
border:1px solid var(--line);
border-radius:10px;
background:var(--dashboard-bg);
margin-bottom:22px}
.dashboard>div{position:relative;
padding:18px 26px;
border-right:1px solid var(--line)}
.dashboard>div:last-child{border-right:0}
.stat-label{color:var(--muted);
display:block;
font-size:9px;
margin-bottom:8px}
.dashboard strong{font-family:Consolas,monospace;
font-size:31px;
font-weight:600;
letter-spacing:1px}
.accent{color:var(--accent)}
.stat-small{font-size:13px;
color:var(--muted);
font-weight:400}
.time-track{height:3px;
position:absolute;
bottom:0;
left:0;
right:0;
background:#253044}
#time-bar{height:100%;
width:100%;
background:var(--accent)}
.game-layout{display:grid;
grid-template-columns:minmax(0,1fr) 285px;
gap:22px}
.arena-panel,.leader-panel{border:1px solid var(--line);
background:var(--panel);
border-radius:10px;
overflow:hidden}
.panel-heading{height:48px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
border-bottom:1px solid var(--line);
font-size:10px}
.panel-heading>span:last-child{color:var(--muted);
font-size:8px;
letter-spacing:1px}
.live-dot{margin-right:8px}
.canvas-wrap{position:relative;
min-height:410px;
aspect-ratio:1200/760;
background:var(--arena-bg)}
canvas{display:block;
object-fit:contain;
width:100%;
height:100%;
outline-offset:-2px}
canvas:focus-visible{outline:1px solid var(--arena-focus)}
.overlay{position:absolute;
inset:0;
background:#0a111d9c;
display:flex;
align-items:center;
justify-content:center;
padding:18px}
.hidden{display:none!important}
.join-card,.result-card{width:min(370px,100%);
padding:27px 30px;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:12px;
box-shadow:0 18px 60px #0007}
.card-tag{color:var(--accent);
font-size:9px}
.join-card h2,.result-card h2{font-size:27px;
letter-spacing:-.7px;
line-height:1.15;
margin:15px 0 12px}
.join-card p,.result-card p{font-size:12px;
line-height:1.7;
color:#a5b3c5}
.join-card label{display:block;
font-size:9px;
letter-spacing:1.3px;
color:#bec8d8;
margin:22px 0 8px}
.join-card input{width:100%;
padding:12px;
border:1px solid var(--field-border);
border-radius:5px;
background:var(--field-bg);
outline:none;
color:#fff;
font-size:13px}
.join-card input:focus{border-color:var(--accent)}
.join-card small{display:block;
font-size:10px;
color:var(--muted);
margin-top:7px}
button{cursor:pointer}
.join-card button{background:var(--action-bg);
width:100%;
border:0;
padding:13px 16px;
border-radius:5px;
font-weight:700;
font-size:12px;
color:var(--action-ink);
margin-top:18px;
text-align:left}
.join-card button span{float:right;
font-size:17px;
line-height:15px}
.join-card button:hover{background:var(--action-hover)}
.join-card button:disabled{opacity:.5;
cursor:wait}
.join-card .error{color:#ff9dab;
margin:9px 0;
font-size:11px;
min-height:0}
.error:empty{display:none}
.join-foot{margin-top:18px;
text-align:center;
color:var(--muted);
font-size:8px;
letter-spacing:1.7px}
.arena-footer{display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
font-size:10px;
gap:12px;
border-top:1px solid var(--line)}
.key{display:inline-flex;
align-items:center;
justify-content:center;
min-width:20px;
height:23px;
border:1px solid #3e4a5d;
border-bottom-width:2px;
border-radius:4px;
margin-right:3px;
color:#becadb;
font-family:Consolas,monospace}
.control-label{font-size:8px;
color:var(--muted);
letter-spacing:1px;
margin-left:6px}
.spark-legend{color:var(--collectible);
font-size:8px;
letter-spacing:1px;
white-space:nowrap}
.badge{border:1px solid var(--badge-border);
color:var(--accent)!important;
padding:3px 6px;
border-radius:3px}
.leader-subhead{display:flex;
justify-content:space-between;
padding:17px 20px 9px;
color:var(--muted);
font-size:8px;
letter-spacing:1.3px}
#leaderboard{list-style:none;
padding:0 12px;
margin:0;
max-height:355px;
overflow:auto;
min-height:80px}
#leaderboard li{display:flex;
gap:9px;
align-items:center;
padding:12px 9px;
border-bottom:1px solid #263040;
font-size:12px}
#leaderboard li.self{background:var(--self-bg);
border-radius:5px}
#leaderboard .rank{width:16px;
color:var(--muted);
font:11px Consolas,monospace}
.player-dot{width:9px;
height:9px;
border-radius:3px;
flex-shrink:0}
.player-name{overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex:1}
.you{font-size:8px;
color:var(--accent);
margin-left:5px}
.points{font:13px Consolas,monospace}
.offline{opacity:.45}
#empty-leaders{font-size:12px;
line-height:1.8;
text-align:center;
color:var(--muted);
padding:10px 15px 30px}
.mission{margin:22px 20px;
padding-top:20px;
border-top:1px solid var(--line)}
.mission h3{font-size:22px;
letter-spacing:-.5px;
line-height:1.25;
margin:12px 0}
.mission p{font-size:12px;
color:var(--muted);
line-height:1.8}
.mission>div{display:flex;
align-items:center;
gap:12px;
font-size:11px;
color:#c2cbd8;
margin-top:20px}
.status-message{font-size:11px;
color:var(--muted);
margin:14px 0 26px}
footer{display:flex;
justify-content:space-between;
border-top:1px solid var(--line);
padding:23px 0;
font-size:8px;
letter-spacing:1.4px;
color:var(--muted)}
.touch-controls{display:none}
.result-card{text-align:center}
.result-card h2{overflow-wrap:anywhere}
.timer-stat.urgent strong{color:var(--collectible)}
@media(min-width:1600px){.shell{padding:0 48px}
}
@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr) 235px}
.shell{padding:0 22px}
.edition{display:none}
.room-label{display:none}
.join-card{padding:20px 24px}
.join-card h2{font-size:23px}
.join-card label{margin-top:13px}
.join-card p{margin:8px 0}
.join-foot{margin-top:10px}
.control-label{display:none}
}
@media(max-width:760px){.shell{padding:0 14px}
.masthead{height:auto;
min-height:65px;
padding:12px 0;
flex-wrap:wrap;
gap:8px}
.brand{font-size:13px;
letter-spacing:.4px}
.connection{padding:7px 9px;
font-size:10px}
.intro{margin:25px 0 20px}
h1{font-size:26px}
h1 span{display:block}
.dashboard>div{padding:14px 12px}
.stat-label{font-size:7px;
letter-spacing:.6px}
.dashboard strong{font-size:25px}
.stat-small{font-size:10px}
.game-layout{grid-template-columns:1fr}
.canvas-wrap{aspect-ratio:1/1;
min-height:410px}
canvas{object-fit:contain}
.panel-heading{padding:0 14px}
.touch-controls{display:flex;
justify-content:center;
gap:12px;
padding:12px;
touch-action:none}
.touch-controls button{width:48px;
height:44px;
border:1px solid #485970;
border-radius:6px;
background:#222f41;
color:var(--accent);
font-size:22px;
touch-action:none;
user-select:none}
.leader-panel .mission{display:none}
#leaderboard{max-height:210px}
.arena-footer{padding:12px 10px}
.key{min-width:18px;
margin-right:1px}
.spark-legend{font-size:7px}
footer{gap:18px;
font-size:7px;
line-height:1.8}
.join-card{width:320px}
.join-card h2{font-size:24px}
}


/* Keep intrinsic canvas/form sizes from pushing overlays beyond narrow panels. */
.canvas-wrap{width:100%;
min-width:0}
.overlay{min-width:0}
.join-card,.result-card{min-width:0;
flex-shrink:1}
.leader-panel{min-width:0}
.mission p{overflow-wrap:anywhere}

@media(max-width:760px){.canvas-wrap{aspect-ratio:auto;
height:410px}
.join-card{flex-basis:300px}
.overlay{padding:14px}
}



.join-card button { box-shadow: inset 0 0 0 1px var(--uos-blue);
 }

.join-card h2 { font-size: 23px;
 letter-spacing: -1px;
 }

.spark-icon { display: inline-block;
 width: 18px;
 height: 18px;
 fill: var(--collectible);
 vertical-align: middle;
 flex-shrink: 0;
 }

.spark-legend { display: inline-flex;
 align-items: center;
 gap: 7px;
 }

.mission-spark { display: inline-flex;
 }

.mission-spark .spark-icon { width: 22px;
 height: 22px;
 }

@media (max-width:760px) { .arena-footer .key { min-width:17px;
 }
 }
/* Milestone 2 feedback stays compact and uses the existing palette. */
.boost-status { position:absolute;right:10px;bottom:8px;font:9px Consolas,monospace;color:var(--accent); }
.lead-notice { position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;max-width:90%;padding:8px 12px;border:1px solid var(--card-border);border-radius:5px;background:var(--panel);color:var(--text);font:11px Consolas,monospace;pointer-events:none;text-align:center; }
#leaderboard li.leader { border-left:2px solid var(--collectible); }
.leader-badge { color:var(--collectible);font:8px Consolas,monospace;order:3; }
#leaderboard .points { order:4; }
.powerup-help { font-size:10px!important;line-height:2!important; }
.bonus-key { color:var(--collectible); }
.speed-key { color:var(--accent); }
@media(max-width:760px) { .boost-status { font-size:7px;right:5px;bottom:4px; } }
/* Small feedback for console experiments, with no challenge or administration panel. */
.experiment-notice { position:fixed;right:24px;bottom:24px;z-index:10;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;border:1px solid var(--accent);border-radius:6px;background:var(--panel);color:var(--text);box-shadow:0 6px 24px #0005;font:12px/1.6 Consolas,monospace;pointer-events:none; }
.experiment-notice.rejected { border-color:var(--collectible); }
@media(max-width:760px) { .experiment-notice { right:16px;bottom:16px; } }

.game-nav { color:var(--accent); font-size:10px; margin-left:auto; white-space:nowrap; }
@media(max-width:600px) { .game-nav { font-size:9px; } }

.gameplay-closed { position:absolute; inset:0; z-index:10; display:grid; place-content:center; padding:28px; text-align:center; background:#0b111df2; color:var(--accent); font-size:clamp(16px,2vw,23px); line-height:1.6; }
.gameplay-closed[hidden] { display:none; }
.gameplay-locked #join-overlay,.gameplay-locked #result-overlay,.gameplay-locked #combat-join,.gameplay-locked #combat-status { visibility:hidden; }