:root{--bg-0: #090e15;--bg-1: #111a27;--bg-2: #1a2738;--bg-backdrop-side: #2b2f36;--surface-0: rgba(7, 12, 20, .84);--surface-1: rgba(10, 16, 27, .76);--surface-2: rgba(14, 23, 37, .78);--glass-0: rgba(9, 15, 24, .7);--scrim-0: rgba(4, 8, 14, .55);--text-0: #f0f4fb;--text-1: #c1cbdb;--text-2: #8f9cb3;--line: rgba(157, 176, 209, .28);--line-strong: rgba(184, 206, 236, .44);--accent: #f04146;--accent-strong: #ff5f63;--accent-2: #ff9ea1;--accent-warm: #ffb6b8;--danger: #ff8d96;--success: #7fd7aa;--focus-ring: #ff8f92;--shadow-soft: 0 18px 42px rgba(2, 6, 12, .34);--shadow-card: 0 24px 62px rgba(2, 5, 12, .42);--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: clamp(1.65rem, 6vw, 2.2rem)}*{box-sizing:border-box}html,body,#app,.app-root{margin:0;min-height:100%;max-width:100%;overflow-x:hidden}body{min-height:100vh;min-height:100dvh;color:var(--text-0);background:radial-gradient(circle at 12% 18%,rgba(240,65,70,.12),transparent 34%),radial-gradient(circle at 84% 2%,rgba(255,182,184,.08),transparent 32%),linear-gradient(155deg,var(--bg-0),var(--bg-1) 45%,var(--bg-2));font-family:Space Grotesk,Segoe UI,sans-serif;font-size:var(--font-md);line-height:1.35;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input{font:inherit}.app-root{--app-header-height: calc(108px + var(--safe-top));--header-side-width: 260px;position:relative;min-height:100vh;min-height:100dvh;max-width:100%;isolation:isolate;overflow-x:hidden;overflow-y:auto}.app-content{position:relative;z-index:2;max-width:100%}.app-content-with-header{padding-top:var(--app-header-height)}.app-content-with-header .screen{min-height:calc(100vh - var(--app-header-height));min-height:calc(100dvh - var(--app-header-height))}.route-smooth-enter-active,.route-smooth-leave-active{transition:opacity .3s cubic-bezier(.22,1,.36,1)}.route-smooth-enter-from,.route-smooth-leave-to{opacity:.01}.route-none-enter-active,.route-none-leave-active{transition:none}.top-header{position:fixed;top:0;left:0;right:0;z-index:8;background:linear-gradient(180deg,#080c12d6,#080c12ad);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.14);backdrop-filter:blur(16px) saturate(1.14);padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right)}.top-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#ff989c1f,#f04146b8 36%,#ffc1c280 72%,#ff989c1f)}.top-header-inner{max-width:100%;margin:0 auto;padding:var(--space-2) var(--space-3) var(--space-3);min-height:108px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"left right" "center center";align-items:center;gap:var(--space-2)}.top-header-side{display:flex;align-items:center;min-width:0}.top-header-left{grid-area:left;justify-self:start;width:100%}.top-header-home{border:1px solid var(--line);background:linear-gradient(138deg,#0f1722ed,#0a1018db);color:inherit;border-radius:12px;min-height:44px;width:min(68vw,260px);max-width:min(68vw,260px);padding:6px 12px;margin:0;display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-width:0;justify-content:flex-start;transition:border-color .14s ease,transform .14s ease,background-color .14s ease}.top-header-home:hover{transform:translateY(-1px);border-color:var(--line-strong);background:linear-gradient(138deg,#151e2cf2,#0e151fe6)}.top-header-home:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 3px #4513178f}.top-header-logo{width:30px;height:30px;border-radius:10px;background:linear-gradient(145deg,#f85c62f2,#ffcdced1),linear-gradient(180deg,#0b1320f0,#0b1320b8);box-shadow:0 0 0 1px #b4ddff66 inset,0 10px 20px #08101e6b;flex:0 0 auto}.top-header-brand{min-width:0}.top-header-title{margin:0;color:var(--text-0);font-weight:600;font-size:var(--font-md);letter-spacing:.01em}.top-header-center{grid-area:center;justify-self:center;text-align:center;color:var(--text-1);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;font-weight:600;max-width:min(100%,320px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-header-center-link{text-decoration:none;transition:color .14s ease,text-shadow .14s ease}.top-header-center-link:hover{color:#ffd2d4;text-shadow:0 0 14px rgba(255,120,128,.38)}.top-header-center-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:6px}.top-header-right{grid-area:right;justify-self:end;justify-content:flex-end;position:relative;min-width:0;width:100%}.top-header-profile{border:1px solid var(--line);background:linear-gradient(138deg,#0f1722ed,#0a1018db);border-radius:12px;color:var(--text-0);min-height:44px;width:min(68vw,260px);max-width:min(68vw,260px);padding:6px 10px;display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;transition:border-color .14s ease,transform .14s ease,background-color .14s ease;touch-action:manipulation}.top-header-profile:hover{transform:translateY(-1px);border-color:var(--line-strong);background:linear-gradient(138deg,#151e2cf2,#0e151fe6)}.top-header-avatar{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:700;color:#e9f6ff;background:linear-gradient(145deg,#f24b52ed,#ffb9bbc2);box-shadow:0 8px 18px #0e1a2e70;flex:0 0 auto}.top-header-user{min-width:0;text-align:left}.top-header-username{margin:0;font-size:var(--font-sm);font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-header-meta{margin:1px 0 0;color:var(--text-1);font-size:.75rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-header-dropdown{position:absolute;right:0;top:calc(100% + 8px);border:1px solid var(--line-strong);border-radius:12px;background:#080e18f0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);padding:8px;min-width:150px;z-index:9}.top-header-logout{width:100%;min-height:44px}.global-backdrop{--backdrop-width: min(760px, 100%);--backdrop-edge-guard: 56px;position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg-backdrop-side);overflow:hidden}.global-backdrop:before{content:"";position:absolute;inset:-28px;z-index:0;background-image:url(/assets/game-zone-bg-BfRQywbf.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;opacity:.42;filter:blur(18px) grayscale(.48) saturate(.5) brightness(.56);transform:scale(1.04);-webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,.9),rgba(0,0,0,.55) 68%,transparent 100%);mask-image:radial-gradient(circle at center,rgba(0,0,0,.9),rgba(0,0,0,.55) 68%,transparent 100%)}.global-backdrop-canvas{position:absolute;left:50%;top:calc(var(--backdrop-edge-guard) * -1);z-index:1;width:var(--backdrop-width);height:calc(100% + (var(--backdrop-edge-guard) * 2));display:block;margin:0;background-color:transparent;background-image:url(/assets/game-zone-bg-BfRQywbf.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;transform:translate(-50%) scale(1.02);transform-origin:center;filter:blur(12px) saturate(.92);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 95%,transparent 100%);box-shadow:inset 1px 0 #cfddf229,inset -1px 0 #cfddf229}.global-backdrop-veil{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 22% 18%,#ffaeb029,#fff0 44%),radial-gradient(circle at 80% 12%,#f041461f,#fff0 34%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 95%,transparent 100%)}.screen{position:relative;min-height:100vh;min-height:100dvh;padding:var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-4);max-width:100%}.panel{background:linear-gradient(160deg,var(--surface-1),rgba(8,14,25,.84));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.eyebrow{color:#ffb8bb;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin:0 0 var(--space-2)}.title{margin:0 0 var(--space-2);font-size:var(--font-xl);line-height:1.12}.subtitle{margin:0 0 var(--space-4);color:var(--text-1);font-size:var(--font-sm)}.auth-panel,.game-over-panel{width:min(560px,100%);padding:var(--space-5)}.auth-form{display:grid;gap:var(--space-3)}.field-label{color:var(--text-1);font-size:var(--font-sm)}.field-input{height:44px;border-radius:12px;border:1px solid var(--line);background:#101a2ad6;color:var(--text-0);padding:0 12px}.field-input:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 3px #4513178f}.primary-btn,.secondary-btn{border:1px solid transparent;border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background-color .14s ease;touch-action:manipulation}.primary-btn{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#fff4f4;font-weight:700;border-color:#ffb0b385;box-shadow:0 10px 22px #5a141861}.secondary-btn{background:#0c111ae6;border-color:var(--line);color:var(--text-0)}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}.primary-btn:hover{background:linear-gradient(120deg,#ff575d,#ff7d82);border-color:#ffc6c7b8}.primary-btn:active,.secondary-btn:active{transform:translateY(0)}.secondary-btn:hover{border-color:var(--line-strong);background:#0f1620f2}.primary-btn:disabled,.secondary-btn:disabled{opacity:.52;cursor:not-allowed;transform:none}.error-text{margin:0;color:var(--danger)}.backdrop-glow{pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 22% 24%,rgba(252,88,95,.18),transparent 42%),radial-gradient(circle at 78% 12%,rgba(255,179,181,.12),transparent 35%)}.menu-hub-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:max(var(--space-4),calc(var(--safe-top) + var(--space-3)));padding-bottom:max(var(--space-4),calc(var(--safe-bottom) + var(--space-3)))}.menu-center{width:min(620px,100%);margin:0 auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);min-height:0}.leaders-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}.leaders-list li{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 0;border-bottom:1px solid rgba(158,179,214,.18)}.leader-meta{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px}.leader-rank{color:var(--text-2);font-variant-numeric:tabular-nums;flex:0 0 auto}.leader-score{color:#f3f6fd}.leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-score{flex:0 0 auto;margin-left:auto;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}.leaders-list-large{flex:0 0 auto;max-height:none;overflow:visible;margin-bottom:var(--space-2);padding-right:4px}.menu-main-actions,.menu-actions{display:grid;gap:var(--space-3)}.menu-main-actions .primary-btn,.menu-main-actions .secondary-btn,.menu-actions .primary-btn,.menu-actions .secondary-btn{width:100%}.big-play-btn{min-height:48px;font-size:var(--font-md)}.menu-footer{position:static;margin:var(--space-2) auto 0;width:min(620px,100%);color:var(--text-2);font-size:.82rem;padding-left:2px}.game-over-screen{background:var(--scrim-0)}.game-play-screen{padding:0;min-height:100dvh;align-items:stretch;justify-content:stretch;background:url(/assets/game-zone-bg-BfRQywbf.jpg) center / cover no-repeat}.game-shell{position:relative;width:100%;min-height:calc(100dvh - var(--app-header-height));height:calc(100dvh - var(--app-header-height));background:url(/assets/game-zone-bg-BfRQywbf.jpg) center / cover no-repeat;display:flex;flex-direction:column}.game-shell-clean{border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.game-overlay{position:absolute;z-index:6;left:50%;top:max(var(--space-2),calc(var(--safe-top) + var(--space-2)));transform:translate(-50%);width:calc(100% - 24px - var(--safe-left) - var(--safe-right));text-align:center;color:var(--text-0);text-shadow:0 10px 30px rgba(2,5,10,.62);background:linear-gradient(180deg,rgba(5,10,17,.6),rgba(5,10,17,.22) 66%,transparent);border:1px solid rgba(176,202,236,.12);border-radius:14px;padding:8px 10px 12px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}.game-overlay .primary-btn,.game-overlay .secondary-btn{pointer-events:auto}.score-title{margin:0;font-size:clamp(2.3rem,15vw,4.8rem);line-height:.95;font-weight:500;color:#f7f9ff;text-shadow:0 2px 0 rgba(255,255,255,.08),0 16px 34px rgba(4,7,13,.7)}.score-title-perfect{animation:score-perfect-glow .22s ease-out}.perfect-badge{margin:4px 0 12px;min-height:1.1em;color:#ffc2c4;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;text-shadow:0 0 14px rgba(255,132,124,.75);opacity:0;transform:translateY(2px);transition:opacity .18s ease-out,transform .18s ease-out}.perfect-badge-visible{opacity:1;transform:translateY(0)}.game-over-actions{margin-top:12px;display:grid;gap:10px;justify-items:center}.game-over-actions .primary-btn,.game-over-actions .secondary-btn{width:min(270px,100%);min-height:46px}.game-over-actions .primary-btn{background:linear-gradient(120deg,#ef3b42,#ff656b);border-color:#ffc0c2b8;color:#fff3f3}.game-over-actions .primary-btn:hover{background:linear-gradient(120deg,#ff4a52,#ff7379)}.game-over-actions .secondary-btn{background:linear-gradient(150deg,#0f141ef0,#090e16e6);border-color:#d6e1f247;color:#edf2fa}.game-over-actions .secondary-btn:hover{border-color:#ffa5a985;background:linear-gradient(150deg,#141924f5,#0c111beb)}.canvas-wrap{position:relative;z-index:1;width:100%;min-height:calc(100dvh - var(--app-header-height));height:calc(100dvh - var(--app-header-height));overflow:hidden;display:flex;align-items:stretch;justify-content:center}.canvas-wrap-clean{width:100%;margin:0 auto;border:none;border-radius:0;background-color:transparent;background-image:url(/assets/game-zone-bg-BfRQywbf.jpg);background-size:cover;background-position:center calc(50% + var(--bg-parallax-y, 0px));background-repeat:no-repeat;box-shadow:inset 1px 0 #cbdcf229,inset -1px 0 #cbdcf229;touch-action:none}.canvas-aspect-box{position:relative;width:min(100%,760px);height:100%;margin:0 auto}@supports (aspect-ratio: 9 / 16){.canvas-wrap{align-items:center}.canvas-aspect-box{aspect-ratio:9 / 16;height:min(100%,calc((100vw - var(--safe-left) - var(--safe-right)) * (16 / 9)));max-height:100%}}.canvas-aspect-box:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 50% 22%,#accbf21a,#fff0 54%),linear-gradient(180deg,#070a0f1a,#070a0f59)}.game-canvas{position:relative;z-index:2;width:100%;height:100%;display:block;touch-action:none}.canvas-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--text-0);background:#0509108f;font-weight:600}.game-error{position:absolute;left:12px;right:12px;bottom:max(12px,calc(var(--safe-bottom) + 6px));z-index:7;background:#310e13d1;border:1px solid rgba(255,140,148,.42);padding:8px 10px;border-radius:10px;text-align:center}.backdrop-grid{pointer-events:none;position:absolute;inset:0;background-image:linear-gradient(rgba(170,184,206,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(170,184,206,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 78%);mask-image:radial-gradient(circle at center,black,transparent 78%)}@keyframes score-perfect-glow{0%{text-shadow:0 2px 0 rgba(255,255,255,.08),0 16px 34px rgba(4,7,13,.7)}45%{text-shadow:0 2px 0 rgba(255,255,255,.2),0 0 18px rgba(255,143,147,.68),0 18px 36px rgba(4,7,13,.72)}to{text-shadow:0 2px 0 rgba(255,255,255,.08),0 16px 34px rgba(4,7,13,.7)}}@media(min-width:768px){.app-root{--app-header-height: calc(82px + var(--safe-top));--header-side-width: clamp(248px, 24vw, 286px)}.top-header-inner{max-width:min(760px,calc(100vw - var(--safe-left) - var(--safe-right) - 28px));min-height:82px;padding:var(--space-3) 0;grid-template-columns:var(--header-side-width) minmax(0,1fr) var(--header-side-width);grid-template-areas:"left center right";gap:var(--space-3)}.top-header-center{font-size:.84rem;max-width:100%}.top-header-home{min-height:48px;width:70%;max-width:100%;padding:8px 10px;gap:9px}.top-header-logo{width:34px;height:34px;border-radius:11px}.top-header-profile{min-height:48px;width:70%;max-width:100%;padding:8px 10px;gap:9px}.top-header-avatar{width:32px;height:32px}.top-header-username{font-size:.93rem}.top-header-meta{font-size:.78rem}.game-play-screen,.game-shell{background:var(--bg-backdrop-side)}.canvas-wrap-clean{width:min(760px,100%);background-size:100% auto;background-repeat:repeat-y}.menu-hub-screen{align-items:center;justify-content:center;padding-top:var(--space-5);padding-bottom:var(--space-5)}.menu-center{padding:24px}.menu-main-actions,.menu-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.big-play-btn{min-width:0}.menu-footer{font-size:.88rem}.game-overlay{width:min(560px,calc(100% - 40px))}.game-over-actions{display:flex;justify-content:center}.game-over-actions .primary-btn,.game-over-actions .secondary-btn{width:min(220px,100%)}@supports (aspect-ratio: 9 / 16){.canvas-aspect-box{height:min(100%,calc((100vh - var(--app-header-height)) * .98))}}}@media(min-width:1024px){.global-backdrop:before{opacity:.5;filter:blur(19px) grayscale(.56) saturate(.46) brightness(.52)}.menu-center{margin-top:8px;padding:28px}.leaders-list-large{max-height:none}.canvas-wrap-clean{width:min(760px,100%)}}