:root{font-family:Trebuchet MS,Arial,sans-serif;color:#243e45;background:#f6f2e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{max-width:1400px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:20px 28px}h1{font-size:29px;margin:5px 0;letter-spacing:-1px}em{font-style:normal;color:#cf5d48}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:#638180}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;max-width:1400px;margin:auto;padding:0 24px}.stage{position:relative;align-self:start;border:7px solid white;border-radius:22px;overflow:hidden;box-shadow:0 12px 35px #25494c18;background:#93c5b5}canvas{width:100%;display:block;touch-action:none}aside{padding:10px 0}h2{font-size:27px;line-height:1.1;margin:13px 0}p{font-size:14px;line-height:1.5}#stats{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.stat{background:white;border-radius:9px;padding:10px;font-size:12px}.stat strong{display:block;font-size:18px;margin-top:4px}.card{background:#e4ece4;border-radius:15px;padding:15px}h3{margin:0;font-size:15px}button{font:inherit;font-size:12px;font-weight:bold;border:1px solid #cad8cb;border-radius:9px;background:#fffdf6;color:#243e45;padding:11px 14px;cursor:pointer;touch-action:none}button:hover{background:#e1eee2}button:focus-visible{outline:3px solid #cf5d48;outline-offset:2px}button:disabled{opacity:.5;cursor:default}#actions{display:flex;flex-wrap:wrap;gap:6px}#notice{color:#954638;min-height:42px;font-weight:bold}.controls{border-top:1px solid #d3ddcf;padding-top:12px;font-size:12px}.controls p{font-size:12px;color:#627674}#banner{position:absolute;top:15px;left:50%;transform:translateX(-50%);background:#263f46ed;color:white;border-radius:12px;padding:10px 17px;font-size:13px;text-align:center;width:max-content;max-width:90%;pointer-events:none}#banner:empty{display:none}#touch{max-width:1400px;margin:12px auto;padding:0 24px;display:flex;gap:20px;align-items:center}.dpad{display:grid;grid-template-columns:repeat(3,42px);gap:4px}.dpad button{padding:10px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.touch-actions{display:flex;gap:5px;flex-wrap:wrap}dialog{border:0;border-radius:24px;padding:35px;max-width:520px;width:calc(100% - 28px);color:#243e45;background:#fffdf4;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#1b393cc9;backdrop-filter:blur(5px)}dialog h2{font-size:42px;letter-spacing:-2px}dialog .primary{display:block;background:#d6634e;color:white;width:100%;padding:16px;margin:22px 0 12px}.practice{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.small{font-size:12px;color:#71827d}@media(max-width:800px){header{padding:12px 16px}h1{font-size:23px}main{grid-template-columns:1fr;padding:0 10px;gap:4px}aside{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}aside>.eyebrow,aside>h2,aside>#objective{grid-column:1/-1;margin:0}aside>#stats{margin:5px 0;align-content:start}aside>.card{grid-column:2;grid-row:4/7}.controls{display:none}#notice{font-size:12px}#touch{position:sticky;bottom:0;background:#f6f2e7f5;margin:0;padding:8px 12px;gap:10px}.touch-actions button{padding:9px;font-size:10px}.stage{border-width:4px}#banner{font-size:10px;padding:7px}dialog h2{font-size:34px}}
