:root { color-scheme: light; --ink:#111; --paper:#fff; --soft:#e9e9e9; --mid:#777; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100vh; }
header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:2px solid var(--ink); gap:16px; }
.brand { font-weight:800; letter-spacing:.04em; }
.version { font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace; border:1px solid var(--ink); padding:3px 7px; }
main { width:min(1120px,100%); margin:0 auto; padding:16px; }
.panel { border:2px solid var(--ink); padding:14px; margin-bottom:14px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.grow { flex:1; }
input,button { font:inherit; border:2px solid var(--ink); background:#fff; color:#111; padding:8px 10px; border-radius:0; }
button { font-weight:700; cursor:pointer; }
button:hover:not(:disabled) { background:#111; color:#fff; }
button:disabled { opacity:.35; cursor:not-allowed; }
code,kbd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
kbd { border:1px solid #111; padding:1px 5px; background:#f6f6f6; color:#111; }
#initials { font:800 26px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-align:center; text-transform:uppercase; width:88px; }
.codebox { display:inline-block; font:800 34px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; border:3px solid #111; padding:8px 12px; min-width:110px; text-align:center; }
.initialbox { width:74px; height:74px; border:3px solid #111; border-radius:50%; display:grid; place-items:center; font:900 25px ui-monospace,SFMono-Regular,Menlo,monospace; }
.codeCaption { margin-top:7px; text-align:center; }
.muted { color:#666; }
.ok { font-weight:700; }
.error { font-weight:700; text-decoration:underline; }
.hidden { display:none !important; }
#gameWrap { position:relative; width:100%; aspect-ratio:5/3; min-height:320px; border:3px solid #111; background:#fff; overflow:hidden; }
canvas { display:block; width:100%; height:100%; background:#fff; }
.hud { display:flex; gap:18px; flex-wrap:wrap; font:700 14px ui-monospace,SFMono-Regular,Menlo,monospace; margin:8px 0; }
.controlLegend { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.controlLegend>div { border:2px solid #111; padding:8px; background:#fff; color:#111; }
.slotActive { border-width:3px !important; font-weight:700; }
.metaLine { margin-top:8px; font-size:12px; color:#666; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.card { border:2px solid #111; padding:10px; min-height:112px; }
.card h3 { font-size:15px; margin:0 0 6px; }
.mini { position:relative; height:52px; border:1px solid #111; overflow:hidden; margin-top:8px; }
.miniCircle { position:absolute; width:18px; height:18px; border:2px solid #111; border-radius:50%; transform:translate(-50%,-50%); display:grid; place-items:center; font:800 7px ui-monospace,monospace; background:#fff; }
footer { padding:12px 16px 20px; text-align:center; color:#666; font-size:12px; }
.ringClosed { display:inline-block; margin:8px 0 4px; padding:5px 8px; border:2px solid #111; font-weight:900; letter-spacing:.04em; }
.ringChain { margin-top:6px; font:800 16px ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.countdownPanel { border:3px solid #111; text-align:center; padding:18px; margin-bottom:14px; }
.countdownLabel { font-weight:800; }
.countdownNumber { font:900 72px/1 ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:8px; }
@media (max-width:650px){ .controlLegend{grid-template-columns:1fr;} .codebox{font-size:28px;} main{padding:10px;} }
.stationIdentity { text-align:center; padding:6px 18px 6px 4px; }
.codeTitle { font-weight:850; font-size:12px; letter-spacing:.04em; }
.stationIdentity .codebox { display:block; margin:7px auto; font-size:52px; line-height:1.1; border-color:#b63338; min-width:146px; }
.initialCaption { font-size:14px; color:#555; }
#rightCode { width:90px; font:800 24px ui-monospace,monospace; text-align:center; text-transform:uppercase; margin-left:6px; }
.powerupStatus { margin:8px 0; padding:8px 10px; background:#f5f5f5; border-left:4px solid #b63338; font-size:14px; }
.powerupStatus.active { background:#fff6dd; border-color:#d58a18; font-weight:750; }
.connectionStatus { padding:8px; background:#fff0de; font-weight:700; }
canvas:focus-visible { outline:3px solid #b63338; outline-offset:-4px; }
body.playing #linkPanel {padding:8px 12px;}
body.playing #teamHint {display:none;}
.teamName {font-size:24px;font-weight:950;}
.leaderboard {display:flex;gap:8px;flex-wrap:wrap;}
.teamScore {border:2px solid;padding:7px 10px;display:grid;gap:3px;min-width:150px;}
.teamScore.ownTeam {background:#f0f0f0;border-width:4px;}
.small {font-size:12px;}
#rejoinChoices button {display:block;margin:8px 0;}
#roundTime {font:900 24px ui-monospace,monospace;}
#gameWrap { min-height:0; }
.connectedStatus { color:#197238; font-weight:800; }
.waitingStatus { background:#fff6dd; border-left:4px solid #bf861e; padding:8px 10px; font-weight:750; }
.testBanner { font-size:24px; font-weight:950; letter-spacing:.08em; color:#b63338; }
.headerTools { display:flex; align-items:center; gap:10px; }
.headerTools button { padding:5px 10px; font-size:14px; }
.scoringLine { font-size:13px; color:#555; }
#feedbackComment { display:block; width:100%; max-width:650px; margin-top:6px; font:inherit; padding:8px; border:2px solid #111; }
#feedbackResult { margin-left:10px; }
@media(max-width:650px) {header{flex-wrap:wrap;gap:8px;}.testBanner{font-size:21px;}}
.starRating { border:0; padding:8px 0; margin:6px 0; }
.starRating legend { font-weight:750; }
.ratingRow { display:flex; gap:7px; align-items:center; }
.ratingRow input { position:absolute; opacity:0; width:1px; height:1px; }
.ratingRow label { font-size:40px; line-height:1.3; cursor:pointer; color:#c98b0d; padding:0 3px; }
.ratingRow input:focus-visible + label { outline:2px solid #b63338; outline-offset:2px; }
.levelClock { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 0 8px; }
#levelTime { font:900 24px ui-monospace,monospace; }
#levelWarning { color:#b63338; font-weight:850; }
.timerTrack { flex-basis:100%; height:5px; background:#e9e9e9; }
#timerFill { height:100%; background:#777; transition:width .3s linear; }
#timerFill.warning { background:#b63338; }
.effectSwitch { font-size:13px; white-space:nowrap; }
.effectSwitch input { accent-color:#b63338; }

body.playing #competitionPanel {padding:8px 12px;}
body.playing #competitionPanel p {margin:5px 0;font-size:12px;}
body.playing #teamMembers {margin:4px 0;font-size:12px;}
body.playing .teamScore {padding:4px 8px;min-width:140px;font-size:13px;}
body.playing .teamScore small {font-size:11px;}
body.playing #gameWrap {width:min(100%, max(420px, calc((100dvh - 300px) * 1.6667)));margin:0 auto;}

.objectivesRow {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.wvsGoal {display:flex;gap:5px;align-items:center;}
.wvsGoal>span {font:950 28px system-ui;color:#b8b8b8;min-width:25px;text-align:center;}
.wvsGoal>span.collected {color:#ce5b0a;text-shadow:0 0 8px #ffd352;}
.wvsGoal small {font-size:11px;color:#666;max-width:170px;margin-left:6px;}
.wvsGoal.complete>span {color:#a94706;}
.questStatus {border-left:4px solid #2579c0;background:#edf7ff;padding:6px 10px;font-weight:750;font-size:14px;margin:5px 0;}
.objectivesRow button {font-size:12px;padding:4px 6px;}
body.playing #gameWrap {width:min(100%, max(420px, calc((100dvh - 350px) * 1.6667)));}