/* Doodle 3D: paper, ink, team colours. No remote fonts or images. */
:root{color-scheme:light;font-family:system-ui,"Arial Rounded MT Bold",sans-serif;background:#eee9db;color:#253442;--ink:#253442;--paper:#fffaf0;--blue:#1267af;--red:#cb3549;--gold:#ffc84c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#fffaf0,transparent 75%)}main{max-width:1300px;margin:auto;padding:20px}header{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:14px}h1{font-size:34px;margin:0;letter-spacing:-1.8px;transform:rotate(-1deg)}h1 span{color:var(--blue);margin-left:6px;text-shadow:2px 2px 0 #ffc84c}header p{font-weight:800;letter-spacing:2px;font-size:12px;margin:0;color:#667569}h2{margin:0 0 12px;font-size:22px}h2 small{font-size:12px;margin-left:10px;color:#65706c}.intro{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.intro span,footer,.hint{color:#617068;font-size:13px}.teams{display:grid;grid-template-columns:1fr 1fr;gap:18px}.team{background:var(--paper);border:2px solid var(--ink);border-top:6px solid var(--blue);border-radius:18px 12px 17px 10px;padding:18px;box-shadow:3px 4px 0 #25344218}.team.b{border-top-color:var(--red)}.team.a h2{color:var(--blue)}.team.b h2{color:var(--red)}.row{display:grid;grid-template-columns:1fr 85px;align-items:center;gap:8px;border-bottom:1px dashed #c7c9b9;padding:8px 0}.row label{font-size:14px}.row small{display:block;font-size:12px;color:#65706c;margin-top:3px}
input,select,button{font:inherit;border:2px solid var(--ink);border-radius:10px 7px 10px 8px;background:var(--paper);color:var(--ink);min-height:46px;padding:8px 12px;max-width:100%}input{width:100%;text-align:right}button{cursor:pointer;font-weight:800;box-shadow:2px 3px 0 #253442;transition:transform .1s,box-shadow .1s}button:hover{background:#f1e8d3}button:active{transform:translate(2px,2px);box-shadow:0 1px 0 #253442}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1e8fc5;outline-offset:3px}button.primary{background:var(--gold);color:var(--ink);border-color:var(--ink)}button.primary:hover{background:#ffdb7a}button:disabled{opacity:.42;cursor:default;box-shadow:none}button::before{margin-right:6px}#editorStart::before{content:"▶"}#undo::before{content:"↶"}#deleteSelected::before{content:"×"}#rotateSelected::before{content:"↻"}#placeToggle::before{content:"＋"}#placeEnd::before{content:"✓"}#again::before{content:"↻"}#savePreset::before{content:"▣"}#back::before,#return::before{content:"✎"}#resetCamera::before{content:"⌖"}.actions,.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}.actions .primary{margin-left:auto;padding:12px 26px}#notice{color:#617068;font-size:13px}
.hud{display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;padding:12px;background:var(--ink);color:#fffaf0;border-radius:12px 12px 0 0;border:2px solid var(--ink)}.hud>div:last-child{text-align:right}.hud b{display:block;font-size:13px}.hud>div:first-child b{color:#8fd7ff}.hud>div:last-child b{color:#ffafb7}.hud small{font-size:11px;color:#eceddb}.hud strong{align-self:center;text-align:center;font-size:18px;color:var(--gold)}progress{appearance:none;display:block;width:100%;height:18px;margin:6px 0;border:2px solid #fffaf0;border-radius:6px;overflow:hidden;background:#131e28;accent-color:#57b5ec}progress::-webkit-progress-bar{background:#131e28}progress::-webkit-progress-value{background:#57b5ec}#hp1::-webkit-progress-value{background:#f56577}progress::-moz-progress-bar{background:#57b5ec}#hp1::-moz-progress-bar{background:#f56577}#hp1{accent-color:#f56577}#arena{position:relative;height:65vh;min-height:300px;background:#bfdbe0;overflow:hidden;border:2px solid var(--ink);border-top:0}canvas{display:block;width:100%;height:100%;touch-action:none}#selected{position:absolute;bottom:10px;left:10px;max-width:calc(100% - 20px);background:#fffaf0ed;color:var(--ink);border:2px solid var(--ink);padding:8px 12px;border-radius:10px;font-size:12px;pointer-events:none;box-shadow:2px 2px 0 #25344228}#result{position:absolute;inset:0;background:#253442c9;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;align-content:center;gap:12px;padding:12px}#result[hidden],[hidden]{display:none!important}#winner{width:100%;text-align:center;font-size:clamp(32px,7vw,80px);color:var(--gold);text-shadow:4px 4px 0 #17212c;transform:rotate(-2deg)}#dumbbellLabel{position:absolute;transform:translate(-50%,-50%);font-weight:900;color:white;text-shadow:0 2px 3px #000;pointer-events:none}.controls label{display:flex;align-items:center;gap:6px;font-size:13px}#performance{font-size:12px;color:#617068}footer{text-align:center;margin-top:22px}
.placement{padding:12px;background:var(--paper);border:2px solid var(--ink);border-top:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-radius:0 0 12px 12px}#placeOptions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}#placeOptions label{display:flex;align-items:center;gap:6px;font-size:14px}#placeType{max-width:210px}#placeStatus{width:100%;margin:0;font-size:14px;color:#617068}#placeStatus[data-team="0"]{color:var(--blue)}#placeStatus[data-team="1"]{color:var(--red)}#placeTeam{font-weight:800}#placeToggle[aria-pressed="true"]{background:var(--gold)}
#editorBar{position:sticky;top:0;z-index:5;background:var(--paper);border:2px solid var(--ink);border-radius:12px 12px 0 0;padding:10px;box-shadow:0 5px 10px #25344218}.editorTop,.editorTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.editorTop h2{font-size:17px;margin:0}.editorTop .primary{margin-left:auto;font-size:15px}.editorTools{margin:8px 0}.editorTools label{display:flex;gap:6px;align-items:center;font-size:13px}.editorTools button{font-size:13px}#editorPlacement{display:contents}#editorBar #placeOptions{gap:6px}#editorBar #placeStatus{font-size:12px;padding-bottom:4px}#editorCamera{display:block;margin-top:6px}#editorCamera button{min-height:44px;font-size:12px;padding:5px 10px}#editorStatus{font-size:13px}#editCounts{color:#617068;font-size:12px}#editorDetails{padding:8px 12px;background:var(--paper);border:2px solid var(--ink);border-top:0}details{font-size:14px;margin-top:8px}summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700}#composition{line-height:1.8;font-size:13px;white-space:pre-line}#presetName{width:190px;text-align:left}#presetList{max-width:230px}#editorBar #editTool{max-width:190px}#editorBar #placeType{max-width:180px}.editing .placement{display:none}
@media(max-width:600px){main{padding:10px}header{gap:8px 16px}h1{font-size:27px}header p{font-size:10px}.teams{gap:8px}.team{padding:10px}.row{grid-template-columns:1fr 58px}.row label{font-size:13px}.row small{font-size:11px}input{padding:8px 4px}h2{font-size:17px}h2 small{display:block;margin:3px 0}.hud{gap:8px;padding:8px}.actions .primary{width:100%;margin:0}.controls{gap:8px}.controls button{font-size:12px;padding:8px}#arena{height:60vh;min-height:300px}.placement{padding:10px}#placeOptions{gap:8px;width:100%}#placeOptions label{flex-wrap:wrap}#placeType{max-width:175px}.editorTop{gap:6px}.editorTop h2{font-size:16px}.editorTop .primary{margin-left:auto}.editorTools{gap:8px}.editorTools label{flex-wrap:wrap}.editorTools select{max-width:260px}#editorBar #placeOptions label{font-size:12px}#editorBar #placeType,#editorBar #placeTeam{max-width:150px}#editorBar #editTool{max-width:160px}}
@media(orientation:landscape) and (max-height:500px){header{display:none}.hud{padding:6px}.controls{margin:8px 0}.hint,footer{display:none}#battle #arena{height:62vh;min-height:190px}.editing #battle #arena{height:calc(100dvh - 225px);min-height:160px}.editing .editorTop{gap:6px}.editing .editorTools{margin:4px 0}.editing #editorStatus{max-width:100%}}
@media(prefers-reduced-motion:reduce){button{transition:none}}