*{box-sizing:border-box}body{margin:0;background:#102b2c;color:#f5edce;font:16px/1.5 system-ui}main{max-width:920px;margin:auto;padding:26px 22px}header small{font-size:10px;letter-spacing:2px;color:#e2ba69}h1{font:58px Georgia;margin:5px 0}header p{color:#bdcebf;margin-top:0}.intro{border-left:3px solid #dfb65f;background:#173839;padding:12px 18px}.intro p{margin:6px 0}nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}button,select{min-height:44px;background:#254a49;color:#fff4d1;border:1px solid #68817b;border-radius:7px;padding:9px 13px;font:600 14px system-ui;cursor:pointer}button:hover{background:#3e665b}button:focus-visible,select:focus-visible,#board:focus-visible{outline:3px solid #e6bc58;outline-offset:2px}.status{display:flex;justify-content:space-between;gap:8px;background:#173839;padding:12px;font-size:13px;border-radius:10px 10px 0 0}#board{width:100%;aspect-ratio:600/440;border:1px solid #53746b;border-radius:0 0 10px 10px;overflow:hidden;touch-action:none}svg{width:100%;height:100%;display:block}.controls{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.controls button{font-size:25px;touch-action:none;user-select:none}#feedback{min-height:48px;color:#f1cc7a;font-weight:600}details{border-top:1px solid #53746b;padding:16px 0}summary{cursor:pointer}footer{font-size:12px;color:#b8cdc5;border-top:1px solid #53746b;padding-top:14px}a{color:#f1cc7a}@media(max-width:520px){main{padding:18px 12px}h1{font-size:44px}.intro{font-size:14px}.status{font-size:11px}.controls{gap:5px}.controls button{padding:5px}nav label{width:100%}select{max-width:70%}}