:root{--ink:#172a43;--cream:#fff0d7;--red:#d9574e;--orange:#fb9b46;--line:#99a7b3;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body,button,select{font-family:Nunito,system-ui,"Noto Sans",sans-serif;font-weight:800;color:var(--ink)}body{background:var(--ink)}button,select{font-size:1rem;min-height:44px;min-width:44px;border:2px solid var(--ink);border-radius:10px;padding:6px 12px}button{background:var(--cream);cursor:pointer;touch-action:none}button:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}button:disabled{opacity:.45}button:active{background:#ffd19b}h1{font-size:1.1rem;margin:0;flex:1}header{display:flex;align-items:center;gap:4px;background:var(--cream);padding:3px}header button{padding:4px 10px}#app{height:100dvh;display:flex;flex-direction:column}#hud{display:flex;gap:5px;justify-content:space-between;align-items:center;padding:4px 10px;background:#f5ddc4;font-size:.8rem}#hud>div{display:flex;flex-wrap:wrap;gap:5px;align-items:center}meter{width:80px;height:16px}#round{white-space:nowrap}#viewport{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;max-width:100%;max-height:100%;outline:none}#state{position:absolute;top:12px;left:0;width:100%;text-align:center;color:var(--cream);pointer-events:none;margin:0}#rotate{display:none;font-size:.75rem;text-align:center;color:var(--cream);margin:4px}#controls{display:flex;justify-content:space-between;gap:12px;padding:6px 10px}.team{display:flex;gap:8px;flex:1}.team>button{flex:1;background:#ffb56c}.move{display:flex;gap:3px;flex:1}.move button{flex:1;padding:4px}#p2controls>button{background:#f18479}[hidden]{display:none!important}.panel{position:fixed;inset:0;background:#102338b8;display:flex;align-items:center;justify-content:center;padding:8px;z-index:10}.sheet{background:var(--cream);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--orange);border-radius:16px;width:min(560px,100%);max-height:calc(100dvh - 16px);overflow:auto;padding:18px}.sheet h2{margin:0 0 7px;font-size:1.5rem}.sheet p{line-height:1.4;margin:8px 0}.sheet label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0}.sheet select{max-width:70%;width:290px}.actions,.settings{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.settings label{justify-content:flex-start}.settings input{width:24px;height:24px}.actions button{flex:1}#records p{border-bottom:1px solid var(--line);padding:7px 0}@media(max-width:600px){header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}h1{grid-column:1/-1}header button{padding:3px;font-size:.85rem;overflow:hidden;text-overflow:ellipsis}#hud{padding:3px;font-size:.7rem}meter{width:45px}.sheet{padding:13px}#rotate{display:block}#controls{gap:3px;padding:5px 3px}.team{gap:3px}.team>button,.move button{font-size:.8rem;padding:3px}}@media(max-height:420px){#hud{padding:1px 6px}#controls{padding:3px 8px}header h1{font-size:.95rem}#state{top:8px}.sheet{padding:12px}#rotate{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.resultHeadline{display:flex;align-items:center;gap:12px}.resultHeadline canvas{width:72px;height:72px;flex-shrink:0}

@media(max-width:600px){#hud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#hud>div{min-width:0}#hud>div:last-child{justify-content:flex-end}#round{grid-column:1/-1;grid-row:2;text-align:center;font-size:.75rem}}
@media(max-width:600px){#controls{flex-direction:column}.team{min-height:44px}}