html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;color:var(--text)}body{background:radial-gradient(circle at 50% 40%,#152145 0,#070b18 42%,#02040b 100%)}button{border:0;cursor:pointer;touch-action:manipulation}.game-shell{position:relative;width:100vw;height:100dvh;min-height:420px;overflow:hidden;isolation:isolate}.screen{position:absolute;inset:0;display:none}.screen.is-active{display:flex}.menu-screen{align-items:center;justify-content:center;background:#01030a}.splash{position:relative;height:100%;aspect-ratio:942/1668;max-width:100%;background:url('../assets/images/gravity-flip-splash.png') center/cover no-repeat;overflow:hidden;box-shadow:0 0 70px #000}.splash::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 15%,transparent 85%,rgba(0,0,0,.15))}.hotspot{position:absolute;z-index:2;background:rgba(3,10,25,.74);border:2px solid var(--cyan);clip-path:polygon(9% 0,91% 0,100% 25%,100% 75%,91% 100%,9% 100%,0 75%,0 25%);font-weight:900;font-style:italic;letter-spacing:.05em;text-shadow:0 0 10px currentColor;box-shadow:inset 0 0 18px rgba(78,232,255,.22)}.hotspot:hover,.hotspot:focus-visible{filter:brightness(1.35);transform:scale(1.025);outline:2px solid #fff;outline-offset:3px}.sound-hotspot{left:3.2%;top:1.5%;width:22%;height:5%;font-size:clamp(9px,1.5vh,18px)}.settings-hotspot{right:3.2%;top:1.5%;width:24%;height:5%;font-size:clamp(9px,1.5vh,18px)}.sound-hotspot span,.settings-hotspot span{display:block;font-size:1.25em}.hotspot small{font-weight:900}.play-hotspot{left:18%;top:63%;width:64%;height:10%;font-size:clamp(34px,8vh,86px);background:rgba(3,20,54,.82);box-shadow:inset 0 0 30px rgba(78,232,255,.42),0 0 24px var(--cyan)}.tutorial-hotspot{left:25%;top:75%;width:50%;height:5.5%;font-size:clamp(15px,2.5vh,32px);border-color:var(--violet);color:#f7dfff}.best-card{position:absolute;z-index:2;top:1.3%;left:36%;width:28%;height:5.8%;display:grid;place-items:center;text-align:center;background:rgba(4,5,22,.84);border:2px solid var(--violet);clip-path:polygon(9% 0,91% 0,100% 25%,100% 75%,91% 100%,9% 100%,0 75%,0 25%)}.best-card small{display:block;font-weight:800;letter-spacing:.08em;font-size:clamp(8px,1.3vh,15px)}.best-card strong{display:block;color:var(--warning);font-size:clamp(18px,3vh,34px);line-height:1}.settings-popover{position:absolute;z-index:10;top:8%;right:4%;width:55%;padding:18px;display:grid;gap:12px;border:1px solid var(--cyan);background:var(--panel);box-shadow:var(--shadow);text-align:center}.settings-popover button{padding:10px;background:#111c39;border:1px solid var(--line);font-weight:800}.play-screen{align-items:center;justify-content:center;background:#02040b;touch-action:none;user-select:none}.play-screen canvas{width:100%;height:100%;object-fit:contain}.hud{position:absolute;z-index:3;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:grid;grid-template-columns:1fr 1fr 1fr;pointer-events:none;text-shadow:0 2px 8px #000}.hud-block{display:flex;flex-direction:column;align-items:flex-start}.hud-block small,.hud-block span{font-size:clamp(10px,1.5vw,15px);font-weight:800;letter-spacing:.12em;color:var(--muted)}.hud-block strong{font-size:clamp(22px,3.5vw,42px);line-height:1;color:#fff}.hud-center{align-items:center}.icon-button{justify-self:end;align-self:start;pointer-events:auto;width:50px;height:50px;border:1px solid var(--cyan);border-radius:10px;background:rgba(6,14,32,.8);font-size:24px;box-shadow:var(--shadow)}.gravity-indicator{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(15px,env(safe-area-inset-bottom));padding:7px 12px;border-left:3px solid var(--violet);color:#d4c6ff;font-weight:900;letter-spacing:.08em;font-size:12px;background:rgba(5,8,18,.62)}.status-message{position:absolute;z-index:3;left:50%;top:23%;transform:translate(-50%,-50%);color:var(--warning);font-size:clamp(22px,4vw,50px);font-weight:1000;font-style:italic;white-space:nowrap;text-shadow:0 0 18px currentColor,0 3px 0 #311}.status-message.pop{animation:message-pop .8s ease-out both}.tap-hint{position:absolute;z-index:2;left:50%;bottom:8%;transform:translateX(-50%);margin:0;color:#fff;font-weight:900;letter-spacing:.12em;white-space:nowrap;text-shadow:0 0 12px var(--cyan);transition:opacity .35s}.overlay-screen{z-index:6;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(1,3,10,.72);backdrop-filter:blur(7px)}.panel{width:min(620px,94vw);max-height:94dvh;overflow:auto;padding:clamp(22px,4vw,46px);border:1px solid var(--line);clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);background:linear-gradient(145deg,rgba(14,25,53,.98),rgba(5,8,22,.98));box-shadow:0 0 55px rgba(78,232,255,.2);text-align:center}.panel h2{margin:5px 0 22px;font-size:clamp(32px,7vw,62px);font-style:italic;line-height:.95}.panel-kicker{color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.22em}.panel-kicker.accent{color:var(--warning)}.tutorial-panel{width:min(780px,96vw)}.tutorial-panel ol{padding:0;margin:20px 0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}.tutorial-panel li{display:flex;gap:12px;padding:12px;border:1px solid rgba(78,232,255,.18);background:rgba(4,11,26,.7)}.tutorial-panel li>span{color:var(--cyan);font-weight:1000}.tutorial-panel p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}.tutorial-panel p strong{color:#fff}.tutorial-demo{position:relative;height:118px;border:1px solid var(--violet);background:repeating-linear-gradient(90deg,#090e21 0,#090e21 59px,#151c36 60px);overflow:hidden;cursor:pointer}.demo-floor,.demo-ceiling{position:absolute;left:0;width:100%;height:7px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.demo-floor{bottom:0}.demo-ceiling{top:0}.demo-runner{position:absolute;left:24%;bottom:8px;width:28px;height:34px;border-radius:9px;background:white;box-shadow:0 0 16px var(--cyan);transition:bottom .45s cubic-bezier(.2,.8,.3,1),transform .45s}.tutorial-demo.flipped .demo-runner{bottom:76px;transform:rotate(180deg)}.tutorial-demo span{position:absolute;right:7%;top:48%;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.1em}.primary-button,.secondary-button,.text-button{width:100%;min-height:52px;margin-top:10px;padding:12px 18px;font-weight:1000;letter-spacing:.08em}.primary-button{color:#fff;background:linear-gradient(180deg,#1287dc,#064479);border:2px solid var(--cyan);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);box-shadow:inset 0 0 18px rgba(78,232,255,.45)}.secondary-button{background:#151b39;border:1px solid var(--violet)}.text-button{background:transparent;color:var(--muted)}.primary-button:hover,.secondary-button:hover,.text-button:hover,.primary-button:focus-visible,.secondary-button:focus-visible,.text-button:focus-visible,.icon-button:focus-visible{filter:brightness(1.3);outline:2px solid white;outline-offset:2px}.countdown-screen{z-index:5;align-items:center;justify-content:center;pointer-events:none}.countdown-screen strong{font-size:min(26vw,180px);font-style:italic;text-shadow:0 0 30px var(--cyan);animation:countdown .55s ease-out}.compact-panel{width:min(440px,92vw)}.result-panel{width:min(560px,94vw)}.result-panel h2{color:var(--danger)}.result-score small{display:block;color:var(--muted);font-size:12px;letter-spacing:.18em}.result-score strong{display:block;color:var(--warning);font-size:clamp(50px,10vw,88px);line-height:1}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.stats-grid p{margin:0;padding:11px;background:rgba(1,7,18,.65);border:1px solid rgba(78,232,255,.14)}.stats-grid small,.stats-grid strong{display:block}.stats-grid small{color:var(--muted);font-size:10px;letter-spacing:.1em}.stats-grid strong{font-size:20px}.share-status{min-height:18px;margin:8px 0 0;color:var(--energy);font-size:12px;font-weight:900}@keyframes countdown{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:scale(1)}}@keyframes message-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.65)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-85%) scale(.95)}}