:root{--bg: #070a18;--bg-surface: #0d1126;--bg-card: #131a38;--gold: #ffc233;--gold-hi: #ffe9a0;--gold-deep: #d98f10;--cyan: #35e0ff;--cyan-deep: #18a8d8;--danger: #ff3b5c;--text: #f2f5ff;--text-muted: #8b93b8;--border: rgba(160, 190, 255, .1);--font: system-ui, -apple-system, "Segoe UI", Arial, sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;touch-action:none;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#gameover-input{-webkit-user-select:text;user-select:text}body{display:flex;align-items:center;justify-content:center;height:100dvh;background:radial-gradient(ellipse 120% 90% at 50% -10%,#141b3d,#0b0f24 45%,#070a18);font-family:var(--font)}#bg-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}.bg-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}.bg-orb-1{width:42vmax;height:42vmax;left:-12vmax;top:-10vmax;background:radial-gradient(circle,rgba(53,224,255,.14),transparent 70%);animation:orb-drift-1 26s ease-in-out infinite}.bg-orb-2{width:38vmax;height:38vmax;right:-10vmax;bottom:-12vmax;background:radial-gradient(circle,rgba(255,194,51,.12),transparent 70%);animation:orb-drift-2 31s ease-in-out infinite}.bg-orb-3{width:26vmax;height:26vmax;right:4vmax;top:-8vmax;background:radial-gradient(circle,rgba(255,59,92,.1),transparent 70%);animation:orb-drift-1 22s ease-in-out infinite reverse}@keyframes orb-drift-1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.15)}}@keyframes orb-drift-2{0%,to{transform:translate(0) scale(1.1)}50%{transform:translate(-5vmax,-5vmax) scale(.95)}}#game-frame{position:relative;width:min(100vw,calc(100dvh * .56));height:100dvh;background-color:var(--bg);background-image:radial-gradient(circle,rgba(92,140,255,.07) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}@media(min-aspect-ratio:.62){#game-frame{height:94dvh;width:min(96vw,calc(94dvh * .56));border-radius:24px;border:1px solid rgba(53,224,255,.22);box-shadow:0 0 0 6px #080c1ed9,0 0 50px #35e0ff21,0 24px 80px #0000008c}}#game-wrapper{position:absolute;inset:0}#game-canvas{display:block;width:100%;height:100%}#gameover-form{position:absolute;display:flex;flex-direction:column;z-index:5;pointer-events:auto}#gameover-form.hidden{display:none}#gameover-input{width:100%;flex:0 0 auto;background:var(--bg);border:1px solid var(--border);border-radius:999px;color:var(--text);font-family:var(--font);outline:none;text-align:center}#gameover-input:focus{border-color:#ffc2338c}#gameover-btn{width:100%;flex:0 0 auto;background:linear-gradient(to bottom,var(--gold),var(--gold-deep));border:none;border-radius:999px;color:#1a1200;font-family:var(--font);font-weight:700;cursor:pointer;letter-spacing:.05em}#gameover-btn:active{filter:brightness(.9)}.html-screen{position:absolute;inset:0;display:none;background-color:var(--bg);background-image:radial-gradient(circle,rgba(92,140,255,.07) 1px,transparent 1px);background-size:18px 18px;z-index:10}.html-screen.active{display:block}.screen-inner{width:100%;height:100%;display:flex;flex-direction:column;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}.screen-top-nav{position:absolute;top:max(24px,env(safe-area-inset-top,0px));left:16px;z-index:1}.btn-back{background:#0d1126cc;border:1px solid var(--border);border-radius:999px;color:var(--cyan);font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:8px 18px;cursor:pointer}.btn-back:active{filter:brightness(.85)}.btn-primary{width:100%;padding:18px 0;background:linear-gradient(to bottom,#5ae8ff,var(--cyan-deep));border:none;border-radius:999px;color:#03202e;font-family:var(--font);font-size:1.05rem;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 22px #35e0ff59,0 4px 18px #0006;animation:btn-pulse 1.4s ease-in-out infinite}.btn-primary:active{filter:brightness(.9)}@keyframes btn-pulse{0%,to{transform:scale(1);box-shadow:0 0 18px #35e0ff4d,0 4px 18px #0006}50%{transform:scale(1.03);box-shadow:0 0 32px #35e0ff80,0 4px 18px #0006}}.btn-ghost{width:100%;padding:13px 0;background:#0d112699;border:1px solid rgba(53,224,255,.35);border-radius:999px;color:var(--cyan);font-family:var(--font);font-size:.82rem;font-weight:600;letter-spacing:.06em;cursor:pointer}.btn-ghost:active{filter:brightness(.85)}#screen-menu:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 35% at 50% 22%,rgba(255,194,51,.13) 0%,rgba(53,224,255,.05) 50%,transparent 72%);pointer-events:none}.menu-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding-top:16px;min-height:0}.menu-logo{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.logo-ball-area{position:relative;height:76px;width:76px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:4px}.logo-ball{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 35%,var(--gold-hi),var(--gold) 55%,#7a4f00);box-shadow:0 0 26px 8px #ffc23366;animation:logo-bounce 1.15s infinite;transform-origin:center bottom;z-index:1}.logo-ball-shadow{position:absolute;bottom:-7px;left:50%;width:34px;height:7px;border-radius:50%;background:#0000008c;animation:logo-bounce-shadow 1.15s infinite}@keyframes logo-bounce{0%{transform:translateY(-44px);animation-timing-function:cubic-bezier(.45,0,.9,.6)}44%{transform:translateY(0) scale(1);animation-timing-function:ease-out}52%{transform:translateY(1px) scale(1.28,.7);animation-timing-function:ease-in}60%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.1,.4,.45,1)}to{transform:translateY(-44px)}}@keyframes logo-bounce-shadow{0%{transform:translate(-50%) scale(.55);opacity:.25;animation-timing-function:cubic-bezier(.45,0,.9,.6)}44%{transform:translate(-50%) scale(1);opacity:.65;animation-timing-function:ease-out}52%{transform:translate(-50%) scale(1.25);opacity:.75;animation-timing-function:ease-in}60%{transform:translate(-50%) scale(1);opacity:.65;animation-timing-function:cubic-bezier(.1,.4,.45,1)}to{transform:translate(-50%) scale(.55);opacity:.25}}.logo-keepit{font-size:1.9rem;font-weight:900;letter-spacing:.22em;margin-left:.22em;color:#35e0ffcc;text-shadow:0 0 18px rgba(53,224,255,.35);line-height:1.15}.logo-up{font-size:5.8rem;font-weight:900;letter-spacing:.04em;line-height:.95;background:linear-gradient(to bottom,var(--gold-hi) 0%,var(--gold) 38%,var(--gold-deep) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:title-glow 1.3s ease-in-out infinite}@keyframes title-glow{0%,to{text-shadow:0 0 6px rgba(255,194,51,.28),0 0 16px rgba(255,194,51,.16),0 0 32px rgba(255,194,51,.08)}50%{text-shadow:0 0 9px rgba(255,194,51,.42),0 0 22px rgba(255,194,51,.24),0 0 44px rgba(255,194,51,.12)}}.title-line{display:flex;align-items:center;gap:11px}.title-arm{width:37px;height:1px;background:#35e0ff59;position:relative;flex-shrink:0}.title-arm-l:before,.title-arm-r:after{content:"";position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background:#35e0ff59}.title-arm-l:before{left:0;transform:translate(-50%,-50%)}.title-arm-r:after{right:0;transform:translate(50%,-50%)}.menu-tagline{margin-top:10px;font-size:.8rem;font-weight:400;color:var(--text-muted);letter-spacing:.06em}.menu-footer{display:flex;align-items:center;gap:10px;width:100%;max-width:380px;padding:0 24px;flex-shrink:0}.menu-footer .btn-ghost{flex:1}.btn-icon{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:#0d112699;border:1px solid var(--border);font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-icon:active{filter:brightness(.85)}.btn-icon.muted{opacity:.45}.menu-spikes{position:absolute;left:0;right:0;bottom:0;height:38%;background:radial-gradient(ellipse 90% 100% at 50% 130%,rgba(53,224,255,.12) 0%,rgba(255,194,51,.05) 38%,transparent 70%);pointer-events:none}.mode-cards{display:flex;flex-direction:column;align-items:center;gap:11px;padding:0 18px;width:100%;flex-shrink:0}.mode-card{--mode-rgb: 255, 194, 51;--mode-color: var(--gold)}.mode-card[data-mode=gates]{--mode-rgb: 53, 224, 255;--mode-color: var(--cyan)}.mode-card[data-mode=flip]{--mode-rgb: 255, 92, 122;--mode-color: #ff5c7a}.mode-card{display:flex;align-items:stretch;width:100%;max-width:380px;height:96px;background:linear-gradient(to right,rgba(var(--mode-rgb),.1),rgba(var(--mode-rgb),0) 45%),linear-gradient(to bottom,var(--bg-card),var(--bg-surface));border:1px solid rgba(var(--mode-rgb),.3);border-radius:14px;cursor:pointer;overflow:hidden;text-align:left;position:relative;transition:transform .1s ease,box-shadow .15s ease}.mode-card:hover{box-shadow:0 0 24px rgba(var(--mode-rgb),.18)}.mode-card:active{transform:scale(.98);filter:brightness(1.15)}.mode-card-stripe{width:5px;flex-shrink:0;background:linear-gradient(to bottom,rgba(var(--mode-rgb),1),rgba(var(--mode-rgb),.35));box-shadow:0 0 12px rgba(var(--mode-rgb),.55)}.mode-card-body{padding:0 14px;display:flex;flex-direction:column;justify-content:center;gap:6px;flex:1;min-width:0;max-width:72%}.mode-card-title{font-size:1.55rem;font-weight:800;letter-spacing:.06em;color:var(--text);line-height:1}.mode-card-desc{font-size:.8rem;font-weight:400;color:var(--text-muted);letter-spacing:.01em;line-height:1.3}.mode-card-icon{position:absolute;right:7%;top:50%;transform:translateY(-50%);width:58px;height:58px;opacity:.3;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.mode-icon-classic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M6 27 L24 12' stroke='%23ffc233' stroke-width='3' stroke-linecap='round'/%3E%3Cpolyline points='16,12 24,12 24,20' stroke='%23ffc233' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 13 L16 28' stroke='%23ffc233' stroke-width='3' stroke-linecap='round'/%3E%3Cpolyline points='24,28 16,28 16,20' stroke='%23ffc233' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.mode-icon-gates{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='5' y='5' width='7' height='30' rx='2' fill='%2335e0ff'/%3E%3Crect x='28' y='5' width='7' height='30' rx='2' fill='%2335e0ff'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%2335e0ff'/%3E%3C/svg%3E")}.mode-icon-flip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cline x1='20' y1='5' x2='20' y2='35' stroke='%23ff5c7a' stroke-width='3' stroke-linecap='round'/%3E%3Cpolyline points='12,13 20,5 28,13' stroke='%23ff5c7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='12,27 20,35 28,27' stroke='%23ff5c7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.scores-page-header{text-align:center;font-size:1.1rem;font-weight:800;letter-spacing:.12em;color:var(--text);padding:84px 16px 12px;flex-shrink:0}.scores-tabs{display:flex;margin:0 16px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px;flex-shrink:0}.scores-tab{flex:1;padding:8px 0;border:none;border-radius:999px;background:transparent;color:var(--text-muted);font-family:var(--font);font-size:.72rem;font-weight:500;letter-spacing:.06em;cursor:pointer;transition:background .15s,color .15s}.scores-tab.active{background:#35e0ff1a;border:1px solid rgba(53,224,255,.4);color:var(--cyan);font-weight:700}.scores-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 8px}.scores-content::-webkit-scrollbar{display:none}.scores-content{scrollbar-width:none}.scores-podium{display:flex;align-items:flex-end;gap:6px;margin-bottom:12px}.podium-spot{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}.podium-crown{font-size:1.4rem;line-height:1;filter:drop-shadow(0 0 8px rgba(255,194,51,.7));animation:crown-glow 1.5s ease-in-out infinite}@keyframes crown-glow{0%,to{filter:drop-shadow(0 0 6px rgba(255,194,51,.6))}50%{filter:drop-shadow(0 0 14px rgba(255,194,51,.9))}}.podium-name{font-size:.7rem;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}.podium-spot.first .podium-name{color:var(--text);font-weight:700}.podium-spot.second .podium-name{color:#adb5bd}.podium-spot.third .podium-name{color:var(--text-muted)}.podium-score{font-size:.95rem;font-weight:800;text-align:center}.podium-spot.first .podium-score{color:var(--gold);font-size:1.3rem;animation:score-glow 1.5s ease-in-out infinite}.podium-spot.second .podium-score{color:#adb5bd}.podium-spot.third .podium-score{color:#cd7f32}@keyframes score-glow{0%,to{text-shadow:0 0 10px rgba(255,194,51,.5)}50%{text-shadow:0 0 24px rgba(255,194,51,.9)}}.podium-block{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:.78rem;font-weight:800;border:1px solid transparent}.podium-spot.first .podium-block{height:64px;background:linear-gradient(to bottom,#ffc23361,#ffc23324);border-color:#ffc2338c;color:var(--gold)}.podium-spot.second .podium-block{height:46px;background:linear-gradient(to bottom,#adb5bd42,#adb5bd14);border-color:#adb5bd59;color:#adb5bd}.podium-spot.third .podium-block{height:32px;background:linear-gradient(to bottom,#cd7f3242,#cd7f3214);border-color:#cd7f3259;color:#cd7f32}.scores-list{background:linear-gradient(to bottom,var(--bg-card),var(--bg-surface));border:1px solid var(--border);border-radius:10px;overflow:hidden}.scores-list:before{content:"";display:block;height:3px;background:linear-gradient(to right,var(--cyan),var(--gold))}.scores-row{display:flex;align-items:center;padding:10px 14px;gap:10px}.scores-row.alt{background:#ffffff05}.scores-rank{font-size:.8rem;font-weight:700;color:var(--text-muted);min-width:26px;flex-shrink:0}.scores-name{flex:1;font-size:.8rem;font-weight:400;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scores-score{font-size:.8rem;font-weight:700;color:var(--text);flex-shrink:0}.scores-empty{text-align:center;color:var(--text-muted);font-size:.82rem;padding:40px 16px}@media(max-width:360px){.mode-cards{padding-left:8px;padding-right:8px}.scores-tabs{margin-left:8px;margin-right:8px}.scores-content{padding-left:8px;padding-right:8px}}@media(max-height:760px){.logo-up{font-size:4.6rem}.logo-keepit{font-size:1.6rem}.logo-ball-area{height:60px}.menu-hero{gap:14px}.mode-card{height:82px}.mode-card-title{font-size:1.35rem}}