*{box-sizing:border-box}body{margin:0;background:#f3f1e7;color:#173b36;font-family:Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:25px 32px}header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;gap:12px;align-items:center;font-size:29px;text-decoration:none;color:inherit}.brand span{font-size:16px;font-weight:900;letter-spacing:1px}.brand small{display:block;font-size:10px;letter-spacing:2.5px;margin-top:5px}button{font:inherit;font-weight:700;border:1px solid #b6c1b1;border-radius:8px;padding:11px 17px;background:#fffdf3;color:#173b36;cursor:pointer}button:hover{background:#dcebd9}button:focus-visible{outline:3px solid #ef9b41;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.intro{padding:38px 0 25px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:800;color:#658071}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-2px;line-height:1.08;margin:12px 0}h1 em{color:#43855c;font-style:normal}.intro p{color:#6e7c70;font-size:14px}.arcade{border:2px solid #173b36;border-radius:14px;overflow:hidden;box-shadow:0 9px 0 #d8ddce}.hud{background:#173b36;color:#b9ceb9;display:grid;grid-template-columns:repeat(4,1fr);padding:16px 24px;gap:10px;font-size:9px;letter-spacing:1.5px}.hud strong{display:block;color:#fffbea;font-size:24px;letter-spacing:0;margin-top:5px}#lives{color:#f3ac75;font-size:21px}.stage{position:relative;background:#cbd9c4}canvas{display:block;width:100%;aspect-ratio:16/9}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#173b3638;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.card{text-align:center;background:#fffdf0;padding:27px 38px;border:2px solid #173b36;border-radius:14px;box-shadow:7px 7px 0 #173b36;max-width:92%}h2{font-size:34px;line-height:1.05;letter-spacing:-1px;margin:13px 0}.card p{font-size:13px;line-height:1.6;color:#657568}.primary{background:#f5b14f;border-color:#173b36;display:block;width:100%;margin:18px 0 10px}.record{letter-spacing:1px;font-size:10px!important}.record b{color:#173b36;font-size:18px;margin-left:10px}.controls{padding:14px 20px;display:flex;justify-content:space-between;font-size:10px;background:#e7e9dc;color:#647461}kbd{display:inline-block;background:#fffdf0;border:1px solid #bdc6b4;border-radius:3px;padding:3px 5px;margin-right:3px}i{margin:0 7px}.touch{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.touch button{min-width:90px;min-height:56px;touch-action:none;background:#173b36;color:#fff}.touch span{font-size:10px;letter-spacing:2px;color:#7b8775}footer{display:flex;justify-content:space-between;font-size:10px;color:#8c9685;padding-top:26px}@media(min-width:800px){.touch{display:none}}@media(max-width:600px){main{padding:18px 12px}.brand span{font-size:12px}header button{padding:9px;font-size:11px}.intro{padding:24px 4px 15px}h1{letter-spacing:-1px}.hud{padding:12px 10px;font-size:7px;gap:4px}.hud strong{font-size:18px}#lives{font-size:13px}.controls{font-size:8px;padding:10px}.controls span:last-child{display:none}.stage canvas{aspect-ratio:4/3}.card{padding:12px 18px}h2{font-size:24px;margin:8px 0}.card p{font-size:11px}.card .primary{margin:10px 0 6px}.card button{padding:9px}.record{margin:8px 0}footer{gap:15px;line-height:1.6}.touch span{font-size:8px;letter-spacing:1px}}
