*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050816;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden;background:#050816}
#board{position:absolute;inset:0;width:100vw;height:100dvh;display:block;z-index:1;touch-action:none}
.hud{position:absolute;z-index:3;padding:5px 7px;min-width:56px;border:1px solid rgba(56,189,248,.38);border-radius:12px;background:rgba(2,6,23,.58);text-align:center;pointer-events:none;backdrop-filter:blur(4px)}
.hud span{display:block;font-size:9px;font-weight:900;letter-spacing:.06em;color:#93c5fd}.hud strong{display:block;font-size:18px;line-height:1.05;color:#fff}
.top-left{left:max(4px,env(safe-area-inset-left));top:max(4px,env(safe-area-inset-top))}.top-right{right:max(4px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top))}.bottom-left{left:max(4px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom))}.bottom-right{right:max(4px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom))}
.pause{display:none}.comment{position:absolute;z-index:3;left:50%;bottom:calc(max(44px,env(safe-area-inset-bottom) + 36px));transform:translateX(-50%);width:min(94vw,440px);padding:7px 10px;border-radius:999px;background:rgba(2,6,23,.56);border:1px solid rgba(148,163,184,.2);font-size:13px;font-weight:800;text-align:center;pointer-events:none;color:#e0f2fe}.combo{position:absolute;z-index:4;left:50%;top:22%;transform:translate(-50%,-50%) scale(.8);font-size:clamp(30px,12vw,66px);font-weight:1000;color:#fff;text-shadow:0 0 10px #38bdf8;opacity:0;pointer-events:none}.combo.show{animation:comboPop 620ms ease-out}
.modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);pointer-events:auto}.modal.show{display:flex}.modal-box{width:min(420px,92vw);border-radius:24px;padding:24px 20px;text-align:center;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.96));border:1px solid rgba(56,189,248,.48);box-shadow:0 0 32px rgba(14,165,233,.22);pointer-events:auto}.modal-box h1{margin:0 0 8px;font-size:clamp(44px,15vw,72px);line-height:.9;font-weight:1000;letter-spacing:.02em;background:linear-gradient(90deg,#ef4444,#facc15,#22c55e,#38bdf8,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.modal-box p{margin:12px 0 20px;color:#dbeafe;font-size:16px;font-weight:750;line-height:1.35}.modal-box button{border:0;border-radius:16px;padding:15px 22px;font-size:20px;font-weight:1000;color:#06101f;background:linear-gradient(90deg,#facc15,#38bdf8);box-shadow:0 8px 0 rgba(0,0,0,.34)}.modal-box button:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.34)}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}72%{opacity:1;transform:translate(-50%,-68%) scale(1)}100%{opacity:0;transform:translate(-50%,-86%) scale(.9)}}
@supports(height:100svh){#board{height:100svh}}