:root{--bg: #1f1a24;--ink: #17131b;--cream: #f5ead6;--cream-dim: rgba(245, 234, 214, .72);--cream-faint: rgba(245, 234, 214, .48);--line: rgba(245, 234, 214, .12);--line-strong: rgba(245, 234, 214, .26);--pink: #ef7fa6;--orange: #f3a35b;--gold: #f4d271;--lime: #a9cf6e;--violet: #a58ae0;--teal: #6fc2b4;--sage: #9bbd7a;--groove: linear-gradient(100deg, #f3a35b 0%, #ef7fa6 30%, #a58ae0 62%, #6fc2b4 100%);--groove-soft: linear-gradient(100deg, rgba(243,163,91,.22), rgba(239,127,166,.22), rgba(165,138,224,.22), rgba(111,194,180,.22));--display: "Shrikhand", "Cooper Black", "Georgia", serif;--sans: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "Fredoka", "Nunito", system-ui, sans-serif;--radius: 18px;--panel: rgba(36, 28, 44, .86);--panel-solid: #2a2232;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:hidden}body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:15.5px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.game-host{position:absolute;inset:0}.game-host canvas{display:block;width:100%!important;height:100%!important}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(30,18,36,.42) 100%)}.overlay{position:absolute;inset:0;pointer-events:none}.overlay>*{pointer-events:auto}.passthrough{pointer-events:none!important}.label{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--cream-faint)}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}.display{font-family:var(--display)}.gold{color:var(--gold)}.dim{color:var(--cream-dim)}h1,h2,h3,h4{margin:0;font-weight:600}.groovy-text{background:var(--groove);-webkit-background-clip:text;background-clip:text;color:transparent}.btn{appearance:none;border:2px solid var(--line-strong);background:#fff0dc0a;color:var(--cream);padding:10px 20px;border-radius:999px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;transition:border-color .2s,background .2s,color .2s,transform .18s cubic-bezier(.3,1.6,.5,1);min-height:46px;text-align:left}.btn:hover{border-color:var(--pink);transform:rotate(-1deg) scale(1.02)}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line);transform:none}.btn.primary{background:var(--groove);background-size:220% 100%;color:#241a26;border-color:transparent;font-weight:700;box-shadow:0 6px 22px #ef7fa647;animation:grooveShift 6s ease-in-out infinite alternate}.btn.primary:hover{box-shadow:0 8px 30px #ef7fa673}.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a1f1a;font-weight:700}.btn.ghost{border-color:transparent;background:none}.btn.ghost:hover{border-color:var(--line-strong)}.btn.small{padding:6px 14px;min-height:36px;font-size:14px}.btn .kbd,.kbd{font-family:var(--sans);font-size:11px;font-weight:600;padding:1px 8px;border:1.5px solid currentColor;border-radius:999px;opacity:.6}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--line-strong);background:var(--panel);border-radius:50%;cursor:pointer;color:var(--cream);transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s}.icon-btn:hover{border-color:var(--pink);transform:rotate(12deg)}.panel{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 50px #14081c6b,inset 0 1px #ffffff0a;backdrop-filter:blur(10px) saturate(1.2)}.rule{height:2px;background:var(--groove-soft);border:0;margin:16px 0;border-radius:2px}.logo{display:block}.logo-word{font-family:var(--display);font-size:clamp(36px,5.4vw,68px);line-height:1;letter-spacing:.01em;color:var(--cream);text-shadow:3px 3px 0 #ef7fa6,6px 6px 0 #a58ae0,9px 9px 0 rgba(111,194,180,.7);transform:rotate(-2deg);transform-origin:left center;animation:wobble 7s ease-in-out infinite;white-space:nowrap}.logo-arc{display:block;width:100%;height:auto;margin-bottom:-2px}.logo-sub{margin-top:18px;font-size:14px}.menu{position:absolute;left:clamp(16px,4vw,64px);top:50%;transform:translateY(-50%);width:min(430px,calc(100vw - 32px));display:flex;flex-direction:column;gap:20px;animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both}.menu-nav{display:flex;flex-direction:column;gap:9px}.menu-nav .btn{width:100%}.menu-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu-stats>div{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:9px 14px}.menu-stats .v{font-family:var(--sans);font-weight:700;font-size:20px;margin-top:1px;font-variant-numeric:tabular-nums}.menu-foot{font-size:13px;color:var(--cream-faint)}.menu-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#241628c7,#24162873 32%,#24162800 56%)}@keyframes rise{0%{opacity:0;transform:translateY(calc(-50% + 20px))}to{opacity:1;transform:translateY(-50%)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseGold{0%,to{box-shadow:0 0 #f4d27100}50%{box-shadow:0 0 0 5px #f4d27166}}@keyframes flash{0%{background:#f4d27159}to{background:var(--panel)}}@keyframes grooveShift{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes wobble{0%,to{transform:rotate(-2deg)}50%{transform:rotate(-.6deg) translateY(-2px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.hud-top{position:absolute;left:0;right:0;top:calc(12px + var(--safe-top));display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;gap:12px;pointer-events:none!important}.hud-top>*{pointer-events:auto}.readout{display:flex;gap:18px;align-items:flex-end;padding:10px 16px;border-radius:22px}.readout .big{font-family:var(--sans);font-weight:700;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.readout .big small{font-size:15px;color:var(--cream-dim);margin-left:3px}.readout .sm{font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}.region-chip{padding:8px 18px;min-width:220px;text-align:center;border-radius:999px}.region-chip .name{font-family:var(--display);font-size:18px}.region-bar{height:5px;background:var(--line);margin-top:6px;border-radius:999px;overflow:hidden}.region-bar>div{height:100%;background:var(--groove);width:0%;transition:width .15s linear}.hud-right{display:flex;gap:8px;align-items:flex-start}.rc-chip{padding:8px 16px;text-align:right;border-radius:22px}.rc-chip .v{font-weight:700;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}.controls-hint{position:absolute;left:50%;translate:-50% 0;bottom:calc(112px + var(--safe-bottom));padding:9px 20px;font-size:15px;font-weight:500;display:flex;gap:10px;align-items:center;white-space:nowrap;pointer-events:none!important;animation:fadeUp .3s both;border-radius:999px}.controls-hint .kbd{opacity:.85;color:var(--pink)}.charge{position:absolute;left:50%;translate:-50% 0;bottom:calc(26px + var(--safe-bottom));width:min(460px,calc(100vw - 32px));padding:12px 18px;pointer-events:none!important;animation:fadeUp .25s both;border-radius:26px}.charge-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.charge-head .pct{font-weight:700;font-size:24px;font-variant-numeric:tabular-nums}.charge-track{position:relative;height:22px;border-radius:999px;background:var(--ink);border:2px solid var(--line);overflow:hidden}.charge-zone{position:absolute;top:0;bottom:0}.charge-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--lime);border-radius:999px}.charge-sweet{position:absolute;top:0;bottom:0;border:2px solid var(--gold);background:#f4d27129;border-radius:999px}.charge-marks{position:relative;height:16px;margin-top:5px}.charge-marks span{position:absolute;transform:translate(-50%)}.charge-marks span:first-child{transform:none}.charge-marks span:last-child{transform:translate(-100%)}.charge.max .charge-track{animation:pulseGold .4s infinite}.charge.sweet .charge-sweet{background:#f4d27180}.abilities{position:absolute;left:50%;translate:-50% 0;bottom:calc(18px + var(--safe-bottom));display:flex;gap:8px;padding:8px;animation:fadeUp .3s both;border-radius:26px}.ability{position:relative;width:84px;min-height:70px;padding:8px 6px 7px;border-radius:20px;border:2px solid var(--line-strong);background:#17131be6;cursor:pointer;color:var(--cream);display:flex;flex-direction:column;align-items:center;gap:2px;overflow:hidden;touch-action:manipulation;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}.ability .g{font-family:var(--display);font-size:18px}.ability .n{font-size:10.5px;font-weight:600;text-align:center;line-height:1.05;color:var(--cream-dim)}.ability .k{position:absolute;top:4px;left:8px;font-size:10px;font-weight:600;opacity:.55}.ability .c{position:absolute;top:4px;right:8px;font-size:11px;font-weight:700;color:var(--gold)}.ability.ready{border-color:var(--pink)}.ability.ready:hover{background:#ef7fa624;transform:translateY(-3px) rotate(-2deg)}.ability.used{opacity:.38;cursor:default}.ability.active{background:var(--groove-soft);border-color:var(--gold)}.ability.locked{opacity:.25;cursor:default}.log{position:absolute;left:50%;translate:-50% 0;top:calc(86px + var(--safe-top));display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none!important;z-index:20}.log-item{font-size:14px;font-weight:500;padding:7px 16px;background:#241c2ce0;border:2px solid var(--line);border-radius:999px;animation:fadeUp .3s both;max-width:min(560px,calc(100vw - 32px));text-align:center}.log-item:before{content:"✿ ";color:var(--pink)}.log-item.gold{border-color:#f4d2718c;color:var(--gold)}.log-item.violet{border-color:#a58ae099;color:#d8ccf6}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));background:radial-gradient(ellipse at 30% 20%,rgba(165,138,224,.18),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(239,127,166,.14),transparent 55%),#1a121eb8;backdrop-filter:blur(4px);animation:fadeIn .25s both}.sheet{width:min(1060px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:30px;animation:fadeUp .4s cubic-bezier(.2,.9,.3,1.15) both;overflow:hidden}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;border-bottom:2px solid var(--line);background:var(--groove-soft)}.sheet-head h2{font-family:var(--display);font-size:32px;font-weight:400;text-shadow:2px 2px 0 #ef7fa6,4px 4px 0 rgba(165,138,224,.7)}.sheet-body{overflow-y:auto;padding:20px 26px 24px;-webkit-overflow-scrolling:touch;touch-action:pan-y}.sheet-foot{padding:14px 26px;border-top:2px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{appearance:none;background:#fff0dc0a;border:2px solid var(--line);color:var(--cream-dim);padding:7px 18px;border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;min-height:40px;text-transform:capitalize;transition:transform .18s cubic-bezier(.3,1.6,.5,1),color .2s}.tab:hover{color:var(--cream);transform:translateY(-2px)}.tab.on{color:#241a26;background:var(--groove);border-color:transparent}.balance{font-weight:700;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}.upg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.upg{position:relative;padding:14px 16px;border:2px solid var(--line);border-radius:22px;background:var(--panel);transition:border-color .2s,transform .2s cubic-bezier(.3,1.6,.5,1);display:flex;flex-direction:column;gap:8px}.upg:hover{border-color:#ef7fa699;transform:translateY(-3px) rotate(-.4deg)}.upg.maxed{border-color:#f4d2718c}.upg.flash{animation:flash .9s ease-out;border-color:var(--gold)}.upg-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.upg-name{font-weight:700;font-size:17px;line-height:1.15}.upg-lv{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:#fff0dc14;color:var(--cream-dim);white-space:nowrap}.pips{display:flex;gap:4px}.pip{flex:1;max-width:20px;height:7px;background:var(--line);border-radius:999px}.pip.on{background:var(--groove);background-size:400% 100%}.upg.maxed .pip.on{background:var(--gold)}.upg-bonus{font-size:15px;font-weight:600;color:var(--lime);min-height:22px}.upg-bonus.none{color:var(--cream-faint);font-weight:500}.upg-buy{width:100%;justify-content:space-between}.upg-buy .cost{font-weight:700}.upg-tip{position:absolute;left:10px;right:10px;top:46px;z-index:5;background:#3a2c44;border:2px solid rgba(239,127,166,.55);color:var(--cream);border-radius:16px;padding:9px 13px;font-size:13.5px;line-height:1.35;box-shadow:0 12px 30px #0a041080;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s,transform .18s}.upg:hover .upg-tip,.upg.tip-on .upg-tip{opacity:1;transform:none}.upg-info{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);background:none;color:var(--cream-faint);font-size:13px;font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0;flex:none}.report{width:min(720px,100%)}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.report-grid>div{background:#17131b99;border:2px solid var(--line);border-radius:16px;padding:10px 14px}.report-grid .v{font-weight:700;font-size:21px;margin-top:1px;font-variant-numeric:tabular-nums}.hero-distance{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.hero-distance .d{font-family:var(--display);font-size:clamp(48px,8vw,72px);line-height:1.05;text-shadow:3px 3px 0 #ef7fa6,6px 6px 0 rgba(165,138,224,.7)}.record-badge{font-size:13px;font-weight:700;padding:4px 12px;background:var(--gold);color:#2a1f1a;border-radius:999px;animation:float 2s ease-in-out infinite}.ledger{font-size:15px}.ledger-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:2px dotted var(--line);animation:fadeUp .3s both}.ledger-total{display:flex;justify-content:space-between;padding-top:10px;font-size:20px;font-weight:700;color:var(--gold)}.commentary{font-size:17px;font-weight:500;color:var(--cream-dim)}.unlocks{display:flex;flex-wrap:wrap;gap:6px}.unlock{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;border:2px solid rgba(244,210,113,.5);color:var(--gold)}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.card{border:2px solid var(--line);border-radius:20px;padding:14px 16px;background:#17131b8c}.card.locked{opacity:.5}.card.on{border-color:var(--pink)}.card h4{margin:0 0 4px;font-size:16px;font-weight:700}.stat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 28px}.stat-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:2px dotted var(--line);font-size:14.5px}.records{font-size:15px}.records .row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;padding:9px 0;border-bottom:2px dotted var(--line)}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);display:inline-block;vertical-align:middle}.region-card{position:relative;overflow:hidden;min-height:120px}.region-card .band{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:.8}.setting{display:grid;grid-template-columns:160px 1fr 56px;gap:14px;align-items:center;padding:12px 0;border-bottom:2px dotted var(--line)}input[type=range]{width:100%;accent-color:var(--pink);height:28px;touch-action:pan-x}.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer}.toggle input{width:22px;height:22px;accent-color:var(--pink)}.tutorial{position:absolute;left:50%;translate:-50% 0;bottom:calc(190px + var(--safe-bottom));width:min(480px,calc(100vw - 32px));padding:14px 18px;border-color:#ef7fa68c!important;animation:fadeUp .35s both;z-index:30;border-radius:24px}.tutorial.top{bottom:auto;top:calc(130px + var(--safe-top))}.tutorial .step,.tutorial-inline .step{font-size:13px;font-weight:700;color:var(--pink)}.tutorial p{margin:6px 0 4px;font-size:15.5px}.tutorial-inline{margin-top:16px;padding:12px 16px;border-color:#ef7fa68c;box-shadow:none;border-radius:20px}.tutorial-inline p{margin:4px 0 0}.tutorial-row{display:flex;justify-content:space-between;align-items:center}.highlight{animation:pulseGold 1.2s infinite;border-color:var(--gold)!important}.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}@media (max-width: 900px){.menu-scrim{background:linear-gradient(0deg,#241628eb,#24162899 45%,#24162800 70%)}.menu{top:auto;bottom:calc(16px + var(--safe-bottom));transform:none;left:16px;right:16px;width:auto;gap:14px;animation:fadeUp .5s both}.menu .logo-word{font-size:clamp(28px,9vw,44px)}.menu-stats>div:nth-child(n+3){display:none}.menu-nav{display:grid;grid-template-columns:1fr 1fr}.menu-nav .btn.primary{grid-column:1 / -1}}@media (max-width: 640px){body{font-size:14.5px}.readout{gap:12px;padding:8px 12px}.readout .big{font-size:24px}.readout .hide-sm{display:none}.region-chip{min-width:0;padding:7px 12px}.region-chip .name{font-size:15px}.hud-top{padding:0 10px;top:calc(8px + var(--safe-top))}.hud-top .region-chip{display:none}.rc-chip{padding:7px 12px}.ability{width:62px;min-height:60px}.ability .n{display:none}.report-grid{grid-template-columns:1fr 1fr}.sheet{border-radius:24px}.sheet-head{padding:14px 18px}.sheet-head h2{font-size:25px}.sheet-body{padding:14px 16px 18px}.sheet-foot{padding:12px 16px}.setting{grid-template-columns:1fr 48px}.setting .label{grid-column:1 / -1}.controls-hint{bottom:calc(104px + var(--safe-bottom));font-size:14px}.tutorial{bottom:calc(176px + var(--safe-bottom))}.log{top:calc(72px + var(--safe-top))}}@media (max-height: 520px) and (orientation: landscape){.menu{transform:translateY(-50%);inset:50% auto auto 16px;width:min(380px,48vw);gap:10px;animation:none}.menu .logo-word{font-size:30px}.menu-stats{display:none}.menu-nav{grid-template-columns:1fr 1fr}.menu-scrim{background:linear-gradient(90deg,rgba(36,22,40,.86) 0%,rgba(36,22,40,.4) 50%,transparent 70%)}.tutorial{bottom:auto;top:calc(70px + var(--safe-top))}.controls-hint{bottom:calc(92px + var(--safe-bottom))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}