/* Crystal City — web design preview. Gameplay and account data use the existing app. */
:root { --ink:#080d20; --surface:#0c1529; }
body { background:radial-gradient(ellipse at 50% 35%,#122340 0,#070c1b 55%,#040712); }
body::before { inset:0; transform:none; opacity:.65; background:url('assets/neon-city.svg') center bottom / cover no-repeat; }
button { cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
button:disabled { cursor:default; }
.game-shell,.overlay { width:min(100vw,480px); height:min(100dvh,940px); min-height:0; }
.game-shell { padding:18px 22px 12px; background:linear-gradient(180deg,#080e20f5,#080d1ff0); box-shadow:0 20px 100px #0008; border-inline:1px solid #6dcfff24; overflow:hidden; grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto; }
.overlay { background:radial-gradient(ellipse at 50% 12%,#12233b,#080e20 65%); border-inline:1px solid #6dcfff24; }
.overlay.hidden { visibility:hidden; }
.home-screen { padding:20px 24px 12px; gap:12px; overflow-y:auto; isolation:isolate; }
.home-screen::before { inset:100px -50px 35%; background:url('assets/neon-city.svg') center bottom / cover; opacity:.4; filter:none; animation:none; mask-image:linear-gradient(transparent,#000 30%,#000 65%,transparent); }
.home-screen::after { background:radial-gradient(ellipse at 50% 35%,#38e8ee0d,transparent 45%); opacity:1; animation:none; }
.home-screen>* { width:100%; max-width:420px; flex-shrink:0; }
.home-player { display:flex; align-items:center; gap:10px; min-height:42px; padding-right:50px; font-size:12px; letter-spacing:.08em; }
.runner-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--cyan); background:radial-gradient(circle at 65% 25%,#7b50ce,#112644 65%); color:#d3faff; font-size:11px; box-shadow:0 0 16px #43eaff22; }
.player-gems { margin-left:auto; color:var(--cyan); white-space:nowrap; font-size:15px; }.player-gems b{color:#ecf8ff;font-size:12px;}
.home-settings-btn { right:24px; top:20px; width:40px!important; height:40px; border-color:#54729d66; background:#0a1429; box-shadow:none; color:#d9eaff; }
.home-screen .logo { display:grid; grid-template-columns:auto auto; justify-content:center; column-gap:10px; margin:12px 0 0; filter:none; text-align:center; }
.home-screen .logo span,.home-screen .logo b { font-size:clamp(28px,7.9vw,39px); line-height:1.1; letter-spacing:.07em; margin:0; font-style:normal; }
.home-screen .logo span { color:var(--cyan); text-shadow:0 0 20px #38e8ee45; }.home-screen .logo b { background:linear-gradient(110deg,#bba2ff,#df73fb); background-clip:text; }
.home-screen .logo i { grid-column:1 / -1; font-style:normal; font-size:8px; color:#b1eefa; letter-spacing:.27em; line-height:2.8; }
.home-hero { position:relative; height:clamp(150px,26dvh,256px); display:grid; place-items:center; }
.home-hero>img { position:relative; z-index:2; width:70%; height:80%; align-self:start; margin-top:-6px; object-fit:contain; filter:drop-shadow(0 8px 24px #3fdcff28); animation:crystalFloat 6s ease-in-out infinite; }
.hero-orbit { position:absolute; width:77%; height:49%; top:27%; border:1px solid #60e6ff66; border-right-color:#cd72ff; border-radius:50%; transform:rotate(-16deg); box-shadow:0 0 15px #51eaff12; }
.hero-orbit::after { content:''; position:absolute; width:5px; height:5px; top:14%; left:10%; background:#deffff; border-radius:50%; box-shadow:0 0 12px 3px #45eaff; }
.hero-platform { position:absolute; left:50%; bottom:8px; width:90px; height:54px; transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; gap:5px; opacity:.8; }
.hero-platform i { background:linear-gradient(135deg,#82f5ff50,#49379a44); border:1px solid #80ddff88; transform:rotate(-30deg) skewX(30deg) scaleY(.7); box-shadow:0 4px 0 #142d50,0 8px 15px #44ecff20; }
.hero-caption { position:absolute; z-index:3; bottom:5px; text-align:center; font-size:7px; letter-spacing:.22em; color:#9dbad1; }
.best-level-card { display:flex; align-items:center; gap:22px; padding:12px 16px; background:linear-gradient(110deg,#102339c9,#0a1327d9); border:1px solid #4bd8ff50; border-radius:14px; }
.best-level-card small { font-size:8px; color:#94c7df; display:block; margin-bottom:3px; }.best-level-card b { font-size:27px; color:var(--cyan); white-space:nowrap; }.best-level-card b span { font-size:16px; color:#afbbda; }
.level-track { flex:1; min-width:50px; height:9px; background:repeating-linear-gradient(90deg,#1a2c46 0, #1a2c46 calc(10% - 3px),transparent calc(10% - 3px),transparent 10%); border-radius:3px; overflow:hidden; }.level-track i { height:100%; min-width:4%; display:block; background:linear-gradient(90deg,var(--cyan),#4d9ec7); box-shadow:0 0 10px #38e8ee55; transition:width .4s; }
.home-screen .league-card { margin:0; min-height:76px; padding:10px 16px; gap:15px; border:1px solid #3983b66b; border-radius:14px; background:linear-gradient(110deg,#102038d9,#0a1327e6); box-shadow:none; }
.league-emblem { transform:none; flex:0 0 45px; width:45px; height:54px; border:0; background:none; box-shadow:none; }.league-emblem svg{width:45px;height:54px;filter:drop-shadow(0 0 9px #53c4ff40)}
.league-info small { color:#9aacca; font-size:8px; }.home-screen .league-card h2 { font-size:15px; margin:3px 0; }.home-screen .league-card p{font-size:8px;margin:0}.league-info p strong{font-size:11px;}.home-screen .rank-arrow{border:0;color:#e1f4ff;font-size:28px;}
.home-screen .home-stats { display:none; }
.home-screen #playBtn { margin:2px 0 0; min-height:64px; padding:18px 24px; border:1px solid #a0faff; outline:2px solid #0b6570; outline-offset:3px; border-radius:28px; background:linear-gradient(180deg,#74fbff,#2edbe6 65%,#20bad0); color:#061a2c; font-size:18px; letter-spacing:.15em; box-shadow:inset 0 2px 8px #edffffaa,0 7px 25px #1cdcea28; transition:transform .18s,filter .18s; }
.home-screen #playBtn::before{content:none}.home-screen #playBtn span{font-size:27px;line-height:22px}.home-screen #playBtn:hover{filter:brightness(1.08)}.home-screen #playBtn:active{transform:scale(.98)}
.daily-actions { margin-top:4px; gap:10px; }.daily-actions button { min-height:67px; grid-template-columns:29px 1fr; gap:4px 5px; padding:11px 10px; background:linear-gradient(120deg,#112139,#0b1327); border-color:#38769799; border-radius:13px; }.daily-actions span{font-size:31px;color:#ffe08c!important;text-shadow:0 0 15px #ffbf4c55!important}.daily-actions button:last-child span{color:#d986ff!important;text-shadow:0 0 15px #b759ff66!important}.daily-actions b{font-size:8px;letter-spacing:.04em}.daily-actions small{font-size:6px;color:#9aabc8;letter-spacing:.07em}.daily-actions button:last-child{border-color:#764fa177;}
.home-screen #homeRankBtn { border:0; background:transparent; min-height:36px; padding:7px; color:#b7b7ed; font-size:10px; letter-spacing:.15em; box-shadow:none; }.home-screen .season{font-size:7px;margin:0;color:#66809a;}
.top-brand { min-height:42px; margin-bottom:12px; }.arena-brand .title{font-size:15px;letter-spacing:.15em;white-space:nowrap}.world-badge{box-shadow:none!important}.rank-shortcut{padding:5px;gap:3px;border:0;background:none;font-size:10px;box-shadow:none}.rank-shortcut span{font-size:12px}.sound-btn{width:34px;height:34px;box-shadow:none}.top-actions{gap:5px;}
.hud { gap:10px; min-height:37px; }.menu-btn{min-height:36px;font-size:8px;border-color:#41708b66;background:#0d1b30;box-shadow:none}.level-block{gap:4px}.level-block small{font-size:8px;color:#8ec6df}.level-block strong{font-size:22px;}.energy{max-width:85px;opacity:.7}.energy span{display:none}.energy i{height:5px;padding:0;border:0;background:#26334b}.hearts{font-size:17px;letter-spacing:1px;text-shadow:0 0 10px #ff34d266;margin-left:auto;}
.score-row { position:relative; min-height:108px; margin-top:8px; align-items:flex-start; padding-top:13px; }.score-row small{font-size:9px;color:#91c4dc}.score-row strong{font-size:28px;font-variant-numeric:tabular-nums;}.score-block>strong{color:var(--cyan)}
.brain-reactor { margin:0; width:96px; height:94px; align-self:flex-start; position:absolute; left:50%; top:0; transform:translateX(-50%); }.brain-reactor span{display:block;width:76px;height:72px;filter:none;font-size:0}.brain-reactor img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #56e9ff33)}.brain-reactor::before,.brain-reactor::after{display:none}.brain-reactor .brain-orbit{inset:14px 8px 28px;opacity:.3}.brain-reactor small{bottom:0;font-size:7px;letter-spacing:.22em;color:#749db2}.brain-callout{bottom:0;min-width:170px;font-size:13px;font-style:normal;letter-spacing:.1em;text-shadow:0 0 12px #43eaff88;background:#080e20;line-height:20px;}.brain-callout.show{animation:crystalPraise 1s ease-out}.brain-reactor:has(.brain-callout.show)>small{visibility:hidden}
.board-wrap { display:grid; place-items:center; padding-bottom:32px; }
#gameCanvas { width:100%; height:100%; object-fit:contain; }
.message { top:auto; bottom:0; padding:5px 10px; border:0; background:none; box-shadow:none; font-size:10px; letter-spacing:.16em; }
.combo-badge{top:2%;right:0;opacity:.65}.combo-badge small{font-size:7px}.combo-badge b{font-size:18px}
.controls { min-height:72px; padding:8px 0; gap:18px; }
.control-btn { display:grid;grid-template-columns:28px 1fr;column-gap:6px;align-items:center; min-width:115px;min-height:48px;padding:8px 12px;border:1px solid #355f8066;border-radius:15px;background:linear-gradient(130deg,#11203a,#091126);font-size:9px; }.control-btn span{grid-row:1/3;font-size:27px;line-height:1;text-shadow:none;color:#d5edff}.control-btn small{font-size:7px;margin:0;color:#a7b3cc}.control-btn br{display:none}
.mini-map { display:none; }
.play-controls { height:48px; min-width:125px; padding:3px; border:1px solid #b47be5;border-radius:24px; background:#392468; box-shadow:0 4px 20px #864aff22; }.play-controls .start-btn,.play-controls .start-btn.running { min-width:115px; border-radius:20px; font-size:11px; background:linear-gradient(140deg,#be47ee,#7046fa); box-shadow:inset 0 1px 3px #efc0ff99; }
.stage { gap:6px; }.stage i { height:7px;width:78%;padding:0;border:0;background:#21324b;mask-image:repeating-linear-gradient(90deg,#000 0,#000 calc(33.33% - 4px),transparent calc(33.33% - 4px),transparent 33.33%)}.stage small{font-size:8px;color:#a8bed8}.stage b{background:var(--cyan);}.app-version{font-size:7px;color:#71829e;padding-top:7px;}
.welcome-panel{background:radial-gradient(ellipse at 50% 0,#14334c,#080d20 65%);}.welcome-card,.settings-card,.auth-card,.profile-card{background:linear-gradient(140deg,#122239f5,#0b1326f5);border-color:#4b8bb655;box-shadow:0 14px 50px #0003}.primary-btn{background:linear-gradient(120deg,var(--cyan),#69c5e1);box-shadow:0 4px 18px #35eaff22}.secondary-btn{background:#111b30;box-shadow:none}.panel-head h2{font-size:23px}.round-result{background:linear-gradient(130deg,#102c40f5,#141332fa)}
@keyframes crystalFloat { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes crystalPraise { 0%{opacity:0;transform:translateX(-50%) scale(.8)}20%,75%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.04)} }
@media(min-height:850px){.home-screen{gap:16px}.home-hero{height:260px}.home-screen .logo{margin-top:18px}.home-screen #playBtn{min-height:70px}.daily-actions button{min-height:72px}}
@media(max-height:740px){.home-screen{padding-top:12px;gap:9px}.home-settings-btn{top:12px}.home-screen .logo{margin-top:5px}.home-hero{height:155px}.best-level-card{padding:9px 14px}.home-screen .league-card{min-height:67px}.home-screen #playBtn{min-height:54px;padding:13px 22px;font-size:16px}.daily-actions button{min-height:56px}.game-shell{padding-top:10px}.top-brand{margin-bottom:6px}.score-row{min-height:96px}.controls{min-height:62px}.brain-reactor{height:88px}}
@media(max-width:360px){.home-screen{padding-inline:18px}.game-shell{padding-inline:14px}.energy{display:none}.hearts{font-size:15px}.daily-actions b{font-size:7px}.home-player{font-size:10px}.home-screen .league-card h2{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.brain-callout.show{opacity:1;transform:translateX(-50%)} }