*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#090b25;color:#fff;font-family:Arial,Helvetica,sans-serif}body{touch-action:none;user-select:none}.game-shell{position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#24215f 0,transparent 53%),#090b25}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.hud{position:absolute;z-index:2;inset:9px 9px auto;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.hud-group{display:flex;flex-wrap:wrap;gap:5px;max-width:65%}.hud-pill,.combo-panel{border:1px solid rgba(255,255,255,.14);background:rgba(7,8,31,.8);box-shadow:0 10px 32px rgba(0,0,0,.3);backdrop-filter:blur(8px)}.hud-pill{margin:0;border-radius:99px;padding:7px 10px;color:#a8acd1;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hud-pill strong{margin-left:3px;color:#fde68a;font-size:12px}.hud-pill b{color:#f0abfc}.combo-panel{width:min(195px,36vw);border-radius:13px;padding:8px 10px}.combo-panel p{display:flex;justify-content:space-between;margin:0;color:#a8acd1;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.combo-panel strong{color:#67e8f9}.progress{height:5px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.progress span{display:block;width:20%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#67e8f9,#a855f7,#f0abfc);box-shadow:0 0 12px #a855f7;transition:width .18s ease}
.hand-name{position:absolute;z-index:3;top:20%;left:50%;width:92%;margin:0;transform:translateX(-50%);color:#fde68a;font-size:clamp(22px,5.5vw,48px);font-weight:1000;letter-spacing:-.035em;text-align:center;text-shadow:0 4px 24px #030413;opacity:0;pointer-events:none;transition:.18s ease}.hand-name.visible{opacity:1;transform:translateX(-50%) translateY(-5px)}.action-button{position:absolute;z-index:3;bottom:5%;left:50%;margin:0;transform:translateX(-50%);background:#67e8f9!important;color:#101334!important}.action-button:hover{transform:translateX(-50%) translateY(-2px)!important}.action-button.hidden{visibility:hidden;opacity:0;pointer-events:none}
.overlay,.pause-panel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(5,6,24,.74);backdrop-filter:blur(8px);transition:opacity .18s ease}.overlay.hidden,.pause-panel.hidden{visibility:hidden;opacity:0;pointer-events:none}.panel,.pause-panel>div{border:1px solid rgba(255,255,255,.16);border-radius:27px;background:radial-gradient(circle at 50% 0%,rgba(240,171,252,.14),transparent 42%),linear-gradient(145deg,rgba(35,31,92,.98),rgba(18,15,57,.98));box-shadow:0 30px 100px rgba(0,0,0,.55);text-align:center}.panel{width:min(530px,100%);padding:clamp(21px,5vw,38px)}.pause-panel>div{width:min(330px,100%);padding:28px}.kicker{margin:0;color:#67e8f9;font-size:10px;font-weight:1000;letter-spacing:.2em;text-transform:uppercase}h1,h2{margin:10px 0 0;line-height:.94;letter-spacing:-.055em;text-transform:uppercase}h1{font-size:clamp(36px,8.5vw,66px)}h2{font-size:40px}#screen-copy,.pause-panel p:last-child{margin:15px auto 0;max-width:415px;color:#c9cbe3;font-size:14px;line-height:1.55}button{margin-top:21px;border:0;border-radius:99px;padding:13px 24px;background:#fde68a;color:#121535;font:inherit;font-size:13px;font-weight:1000;cursor:pointer;box-shadow:0 12px 34px rgba(103,232,249,.18);transition:.15s ease}button:hover{transform:translateY(-2px);background:#fff}button:focus-visible{outline:3px solid #fff;outline-offset:4px}.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}.controls-grid p{display:grid;gap:3px;margin:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px;background:rgba(255,255,255,.035);font-size:10px}.controls-grid strong{text-transform:uppercase}.controls-grid span{color:#a8acd1}
@media(max-width:560px),(max-height:440px){.hud{inset:5px}.hud-pill{padding:5px 7px;font-size:7px}.hud-pill strong{font-size:9px}.combo-panel{padding:6px 8px}.panel{padding:17px 20px}.controls-grid{margin-top:12px}.action-button{bottom:3%;padding:10px 18px}}@media(max-height:360px){#screen-copy{margin-top:8px;font-size:12px}button{margin-top:10px;padding-block:10px}.controls-grid{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}