*{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark}html,body{height:100%}body{background:#0b0d12;color:#e8eaf0;font-family:Courier New,ui-monospace,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden}#layout{display:flex;gap:16px;align-items:flex-start}#stage{position:relative}#board{display:block;height:min(78vh,600px);aspect-ratio:1 / 2;background:#10121a;border:2px solid #2a2f45;border-radius:4px}#panel{display:flex;flex-direction:column;gap:12px;min-width:110px}.stat{display:flex;flex-direction:column;gap:2px}.label{font-size:11px;color:#8a90a8;text-transform:uppercase;letter-spacing:1.5px}.value{font-size:22px;font-weight:700}#next{width:84px;height:84px;background:#10121a;border:1px solid #2a2f45;border-radius:4px}button{font:inherit;background:#2a2f45;color:#e8eaf0;border:1px solid #4a5170;border-radius:6px;padding:10px 22px;cursor:pointer}button:active{transform:translateY(1px);background:#353b58}#btn-mute{padding:8px;font-size:18px;width:44px}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#080a10e0;text-align:center;border-radius:4px}.overlay h1{font-size:34px;letter-spacing:6px;color:#3fd8e8}.overlay h2{font-size:24px;letter-spacing:3px}#new-record{color:#f2d035;font-weight:700}.hidden{display:none!important}#touch-controls{display:none;gap:10px}#touch-controls button{width:56px;height:56px;padding:0;font-size:24px;touch-action:none}@media (pointer: coarse){#touch-controls{display:flex}#board{height:min(60vh,600px)}}@media (max-width: 480px){#layout{gap:8px}#panel{min-width:78px;gap:8px}.value{font-size:17px}#next{width:60px;height:60px}#board{height:min(56vh,78vw)}#touch-controls{gap:8px}#touch-controls button{width:50px;height:50px}}