html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090b10;color:#fff;font-family:Arial,Helvetica,sans-serif}canvas{display:block}.panel{position:absolute;inset:0;margin:auto;width:min(920px,92vw);height:max-content;background:rgba(12,16,25,.94);border:1px solid #2d3957;border-radius:24px;padding:28px;box-shadow:0 20px 80px #000;z-index:5}.panel h1{font-size:52px;margin:0}.panel h2{margin:8px 0 12px}.panel p{color:#bdc7dc}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid section{background:#151c2e;border:1px solid #2d3957;border-radius:18px;padding:16px;min-height:160px}button{border:0;border-radius:14px;background:#2b344d;color:#fff;padding:12px 14px;font-weight:700;cursor:pointer;margin:5px 4px 5px 0}button:hover,.pick.active{background:#5d7cff}#start{font-size:22px;padding:16px 28px;margin-top:20px;background:#26c281}label{display:block;margin:12px 0;color:#e7ecff}.hud{position:absolute;left:16px;top:16px;z-index:4;background:rgba(10,12,18,.78);border:1px solid #35415f;border-radius:18px;padding:14px 18px;line-height:1.55;font-weight:700}.small{font-size:12px;color:#bdc7dc;font-weight:400}.hidden{display:none}.message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;background:rgba(0,0,0,.78);border:1px solid #fff;border-radius:22px;padding:28px 34px;font-size:36px;text-align:center;font-weight:900;max-width:80vw}
@media(max-width:850px){.grid{grid-template-columns:1fr 1fr}.panel{overflow:auto;max-height:90vh}.panel h1{font-size:38px}}

.touch-controls{position:absolute;inset:0;z-index:4;pointer-events:none;touch-action:none;user-select:none}.touch-left,.touch-right{position:absolute;bottom:22px;display:flex;gap:10px;align-items:center}.touch-left{left:18px;flex-direction:column}.touch-right{right:18px;flex-wrap:wrap;justify-content:flex-end;max-width:240px}.touch-btn{pointer-events:auto;border:1px solid rgba(255,255,255,.35);background:rgba(20,26,42,.72);backdrop-filter:blur(6px);color:#fff;border-radius:18px;min-width:62px;min-height:54px;font-size:20px;font-weight:900;margin:4px;box-shadow:0 8px 24px rgba(0,0,0,.28)}.touch-btn:active,.touch-btn.held{background:#5d7cff;transform:scale(.96)}.touch-btn.action{min-width:78px}.touch-btn.smallbtn{min-width:70px;font-size:15px}.touch-left>div{display:flex}.touch-left .touch-btn:first-child{margin-left:74px}@media(pointer:coarse),(max-width:900px){.touch-controls:not(.hidden){display:block}.hud{font-size:14px;max-width:calc(100vw - 36px)}.small{font-size:11px}.panel{padding:18px}.grid{grid-template-columns:1fr}.panel h1{font-size:34px}button{padding:11px 12px}.message{font-size:26px;padding:22px}}