*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#cfe9df;color:#10201a;font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block;touch-action:none}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:18px}.topbar{display:flex;align-items:center;gap:10px;width:min(680px,calc(100vw - 36px))}.brand,.metric,.status,.leaderboard,.quick-start,.title-panel,.store-panel,.celebration{background:#ffffffd1;border:2px solid rgba(16,32,26,.14);box-shadow:0 14px 32px #14463c29;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{border-radius:8px;padding:10px 14px;font-weight:900;letter-spacing:0}.metric{min-width:92px;border-radius:8px;padding:8px 12px}.metric span,.store-jewels span{display:block;color:#4a6b61;font-size:12px;font-weight:800;text-transform:uppercase}.metric strong,.store-jewels strong{font-size:22px;line-height:1}.status{width:min(580px,calc(100vw - 36px));min-height:44px;margin:12px 0 0;border-radius:8px;padding:11px 14px;font-weight:800}.leaderboard{position:fixed;top:18px;right:18px;width:min(230px,calc(100vw - 36px));margin:0;padding:12px 14px 12px 34px;border-radius:8px;font-weight:850}.leaderboard li{margin:4px 0}.quick-start{position:fixed;left:18px;bottom:18px;pointer-events:auto;border-radius:8px;border-color:#10201a33;padding:12px 18px;font-weight:900;color:#10201a;cursor:pointer}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:22px;background:#0e322e38}.title-panel,.store-panel,.celebration{border-radius:8px}.title-panel{width:min(520px,calc(100vw - 44px));padding:30px 28px 28px;text-align:center;overflow:hidden}.title-logo{display:flex;justify-content:center;align-items:baseline;gap:1px;font-weight:950;font-size:72px;line-height:.95;letter-spacing:-1px;color:#10201a}.title-logo .logo-letter{display:inline-block;transform:translate(-120%) rotate(-12deg);opacity:0;animation:logo-slide .55s cubic-bezier(.34,1.56,.64,1) forwards;text-shadow:0 6px 0 rgba(168,63,32,.18)}.title-logo .logo-letter:nth-child(1){animation-delay:.05s}.title-logo .logo-letter:nth-child(2){animation-delay:.12s}.title-logo .logo-letter:nth-child(3){animation-delay:.19s}.title-logo .logo-letter:nth-child(4){animation-delay:.26s}.title-logo .logo-letter:nth-child(5){animation-delay:.33s}.title-logo .logo-dot{animation-delay:.4s}.title-logo .logo-letter:nth-child(7){animation-delay:.46s}.title-logo .logo-letter:nth-child(8){animation-delay:.52s}.title-logo .logo-dot{display:inline-block;color:#ff7a45;transform:scale(0);opacity:0;animation:logo-dot-pop .4s cubic-bezier(.34,1.56,.64,1) .4s forwards}.title-logo .logo-letter.io{color:#ff7a45}@keyframes logo-slide{0%{transform:translate(-120%) rotate(-12deg);opacity:0}60%{transform:translate(8%) rotate(2deg);opacity:1}to{transform:translate(0) rotate(0);opacity:1}}@keyframes logo-dot-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.5);opacity:1}to{transform:scale(1);opacity:1}}.title-sub{margin:14px 0 8px;color:#31574d;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px;opacity:0;animation:title-fade-up .5s ease .65s forwards}.title-tagline{position:relative;height:28px;margin:0 0 22px;opacity:0;animation:title-fade-up .5s ease .85s forwards}.title-tagline .tag{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-weight:850;color:#10201a;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}.title-tagline .tag.active{opacity:1;transform:translateY(0)}.title-cta{opacity:0;animation:cta-pop .5s cubic-bezier(.34,1.56,.64,1) 1.05s forwards}@keyframes title-fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes cta-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.primary-action{min-width:148px;min-height:48px;border:0;border-radius:8px;background:#ff7a45;color:#fff8ed;box-shadow:0 10px #a83f20;font-weight:950;cursor:pointer}.primary-action:active{transform:translateY(5px);box-shadow:0 5px #a83f20}.store-panel{width:min(780px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:18px}.inventory-panel{width:min(900px,calc(100vw - 28px))}.store-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.store-header h2,.celebration h2{margin:0}.store-header p,.celebration p{margin:6px 0 0;color:#31574d;font-weight:750}.store-jewels{border-radius:8px;background:#66f7ff38;padding:9px 14px;text-align:right}.inventory-body{display:grid;grid-template-columns:240px 1fr;gap:18px;margin:14px 0 16px}.character-stage{position:relative;background:linear-gradient(180deg,#cfe9df,#fff8ed);border:3px solid rgba(16,32,26,.18);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;min-height:360px}.character-stage canvas{width:100%;height:auto;max-height:340px;image-rendering:-webkit-optimize-contrast}.character-tag{position:absolute;top:10px;left:50%;transform:translate(-50%);background:#ff7a45;color:#fff8ed;padding:4px 14px;border-radius:8px;font-weight:950;font-size:13px;letter-spacing:1.5px;box-shadow:0 4px #a83f20;z-index:1}.inventory-side{display:flex;flex-direction:column;gap:10px;min-width:0}.inventory-tabs{display:flex;flex-wrap:wrap;gap:6px}.inventory-tabs button{border:2px solid rgba(16,32,26,.18);border-radius:10px;background:#fff8ed;color:#10201a;font-weight:850;padding:8px 14px;cursor:pointer}.inventory-tabs button.active{border-color:#ff7a45;background:#ffe4d6;box-shadow:0 4px #a83f20}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:10px;background:#ede2cd;border:3px solid #b39c70;border-radius:10px;min-height:220px}.inv-slot{position:relative;aspect-ratio:1 / 1;background:#fffaf0;border:2px solid #b39c70;border-radius:8px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .06s,border-color .1s;font:inherit}.inv-slot:hover:not(:disabled){transform:translateY(-2px);border-color:#ff7a45}.inv-slot:active:not(:disabled){transform:translateY(0)}.inv-slot canvas{width:78%;height:78%;pointer-events:none}.inv-slot.equipped{border-color:#2ec27a;box-shadow:0 0 0 3px #2ec27a52;background:#e6f8ee}.inv-slot.locked{filter:grayscale(.85);background:#d6c9a8;cursor:not-allowed}.inv-slot.locked canvas{opacity:.55}.inv-slot:disabled{cursor:not-allowed}.inv-badge{position:absolute;top:4px;right:4px;background:#ff7a45;color:#fff8ed;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:900;display:inline-flex;align-items:center;gap:3px;box-shadow:0 2px #a83f20;pointer-events:none}.inv-badge.owned{background:#2ec27a;box-shadow:0 2px #1c7d4d}.inv-badge.lock{background:#6b6155;box-shadow:0 2px #3d352c}.inv-name{position:absolute;bottom:3px;left:3px;right:3px;text-align:center;font-size:10px;font-weight:850;color:#4a3b1b;background:#fffaf0eb;border-radius:4px;padding:1px 2px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inventory-legend{margin:0;display:flex;flex-wrap:wrap;gap:12px;font-size:11px;font-weight:800;color:#4a6b61}.inventory-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}.inventory-legend .dot.equipped{background:#2ec27a}.inventory-legend .dot.owned{background:#fffaf0;border:2px solid #b39c70}.inventory-legend .dot.buy{background:#ff7a45}.inventory-legend .dot.lock{background:#6b6155}.celebration{position:fixed;top:50%;left:50%;z-index:11;width:min(420px,calc(100vw - 32px));padding:22px;text-align:center;transform:translate(-50%,-50%)}.joystick{position:fixed;right:22px;bottom:22px;z-index:6;width:118px;height:118px;border-radius:50%;background:#ffffff3d;border:2px solid rgba(16,32,26,.12);touch-action:none}.stick{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:#ff7a45e6;transform:translate(-50%,-50%);box-shadow:inset 0 -6px #00000029}.hidden{display:none!important}.combo-meter{position:fixed;top:50%;left:24px;transform:translateY(-50%);pointer-events:none;z-index:7;background:#fff8edeb;border:3px solid #ff7a45;border-radius:14px;padding:10px 14px 12px;min-width:84px;text-align:center;box-shadow:0 8px #a83f20;font-weight:950;color:#10201a;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}.combo-meter.tier-2{border-color:#ff8a3a;box-shadow:0 8px #b54a18}.combo-meter.tier-3{border-color:#ffb703;box-shadow:0 8px #c47800}.combo-meter.tier-4{border-color:#f25f5c;box-shadow:0 8px #993f3d;background:#fff5e8}.combo-meter.tier-5{border-color:#d62828;box-shadow:0 8px #761313;background:#fff0e0;animation:combo-glow .6s ease-in-out infinite alternate}.combo-meter.punch{transform:translateY(-50%) scale(1.4)}.combo-meter .combo-x{font-size:14px;color:#ff7a45;letter-spacing:1px}.combo-meter strong{font-size:38px;display:inline-block;line-height:1}.combo-bar{height:6px;background:#10201a2e;border-radius:4px;margin-top:6px;overflow:hidden}.combo-bar-fill{height:100%;width:100%;background:linear-gradient(90deg,#ffd166,#ff7a45);transition:width .06s linear}@keyframes combo-glow{0%{box-shadow:0 8px #761313,0 0 18px #d6282866}to{box-shadow:0 8px #761313,0 0 28px #d62828bf}}.lead-banner{position:fixed;top:28%;left:50%;transform:translate(-50%);z-index:9;pointer-events:none;padding:14px 32px;border-radius:12px;background:linear-gradient(90deg,#ffd166,#ff7a45);color:#fff8ed;font-weight:950;font-size:36px;letter-spacing:1.5px;text-shadow:0 4px 0 rgba(0,0,0,.32);box-shadow:0 12px 32px #a83f2080;animation:lead-pop .6s cubic-bezier(.34,1.56,.64,1)}.lead-banner.lost{background:linear-gradient(90deg,#6b6155,#3d352c);font-size:22px}.cutscene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:13;pointer-events:none;display:grid;place-items:center;overflow:hidden;perspective:800px}.cutscene:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0e322e00;animation:cutscene-fade .4s ease forwards}.cutscene-burst{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-conic-gradient(from 0deg,#ffd1662e,#ffd1662e 8deg,#ff7a4500 8deg,#ff7a4500 16deg);transform-origin:center;animation:cutscene-burst-spin 6s linear infinite,cutscene-burst-fade 1.6s ease forwards}.cutscene-content{position:relative;text-align:center;color:#fff8ed;text-shadow:0 8px 0 rgba(0,0,0,.32);padding:0 24px}.cutscene-eyebrow{display:inline-block;background:#fff8ed;color:#ff7a45;padding:6px 16px;border-radius:8px;font-weight:950;letter-spacing:2px;font-size:14px;text-shadow:none;box-shadow:0 6px #a83f20;transform:translateY(-30px);opacity:0;animation:cutscene-eyebrow .5s cubic-bezier(.34,1.56,.64,1) .05s forwards}.cutscene-title{margin:14px 0 8px;font-size:clamp(48px,12vw,120px);font-weight:950;letter-spacing:-1px;line-height:1;transform:translate(-100%) skew(-12deg);opacity:0;animation:cutscene-title-slide .55s cubic-bezier(.34,1.56,.64,1) .2s forwards;-webkit-text-stroke:3px #a83f20;color:#ffd166}.cutscene-title.victory{color:#ffd166;-webkit-text-stroke:4px #a83f20}.cutscene-sub{margin:0 auto;max-width:600px;font-size:clamp(18px,3vw,26px);font-weight:850;color:#fff8ed;opacity:0;transform:translateY(20px);animation:cutscene-fade-up .5s ease .5s forwards}.cutscene.exiting .cutscene-content{animation:cutscene-exit .3s ease forwards}@keyframes cutscene-fade{to{background:#0e322e8c}}@keyframes cutscene-burst-spin{to{transform:rotate(360deg)}}@keyframes cutscene-burst-fade{0%{opacity:0}20%{opacity:1}to{opacity:.4}}@keyframes cutscene-eyebrow{to{transform:translateY(0);opacity:1}}@keyframes cutscene-title-slide{60%{transform:translate(8%) skew(2deg);opacity:1}to{transform:translate(0) skew(0);opacity:1}}@keyframes cutscene-fade-up{to{opacity:1;transform:translateY(0)}}@keyframes cutscene-exit{to{transform:scale(1.2);opacity:0}}@keyframes lead-pop{0%{transform:translate(-50%) scale(.4);opacity:0}50%{transform:translate(-50%) scale(1.1);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}.podium-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:12;display:grid;place-items:center;background:#0e322e6b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:22px}.podium-panel{width:min(720px,calc(100vw - 28px));background:linear-gradient(180deg,#fff8ed,#ffe4d6);border:3px solid rgba(16,32,26,.18);border-radius:18px;padding:22px 24px 24px;box-shadow:0 24px 60px #14463c66;text-align:center}.podium-panel h2{margin:0;font-size:32px;letter-spacing:.5px;color:#10201a}#podiumSubtitle{margin:4px 0 14px;font-weight:750;color:#31574d}.podium-stage{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:12px;margin:8px auto 16px;max-width:520px}.podium-slot{display:flex;flex-direction:column;align-items:center;animation:podium-rise .55s cubic-bezier(.34,1.56,.64,1) both}.podium-slot.first{animation-delay:.05s}.podium-slot.second{animation-delay:.18s}.podium-slot.third{animation-delay:.3s}.podium-slot canvas{width:100%;max-width:130px;height:auto}.podium-step{width:100%;border:3px solid rgba(16,32,26,.2);border-radius:8px 8px 0 0;padding:8px 6px 10px;font-weight:950;background:#fff8ed;margin-top:-4px;position:relative;z-index:1}.podium-slot.first .podium-step{background:linear-gradient(180deg,#ffd166,#f5c542);border-color:#a8801f;height:92px;box-shadow:0 6px #a8801f}.podium-slot.second .podium-step{background:linear-gradient(180deg,#e8e8e8,#c8c8c8);border-color:#8e8e8e;height:70px;box-shadow:0 6px #8e8e8e}.podium-slot.third .podium-step{background:linear-gradient(180deg,#e0a872,#c97f44);border-color:#7f4d22;height:54px;box-shadow:0 6px #7f4d22}.podium-step .rank{display:block;font-size:26px;line-height:1}.podium-step strong{display:block;font-size:13px;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.podium-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 12px}.podium-stats div{background:#10201a0f;border-radius:8px;padding:8px 6px}.podium-stats span{display:block;font-size:11px;font-weight:800;color:#4a6b61;text-transform:uppercase;letter-spacing:.5px}.podium-stats strong{font-size:18px;display:block;margin-top:2px}.podium-reward{background:linear-gradient(90deg,#66f7ff40,#ffd16640);border-radius:10px;padding:10px 16px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:850;font-size:16px;color:#10201a}.podium-reward strong{font-size:28px;color:#ff7a45}.podium-reward .diamond{color:#66f7ff;font-size:22px}.podium-next{background:#ff7a451f;border:2px dashed rgba(255,122,69,.5);border-radius:10px;padding:10px 14px;margin-bottom:14px;animation:podium-next-slide .6s cubic-bezier(.34,1.4,.64,1) .55s both}.podium-next .next-label{display:block;font-size:11px;font-weight:850;color:#a83f20;text-transform:uppercase;letter-spacing:1px}.podium-next strong{display:block;font-size:22px;color:#10201a;margin:2px 0}.podium-next #podiumNextSub{font-size:13px;color:#4a6b61;font-weight:750}@keyframes podium-rise{0%{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes podium-next-slide{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:760px){.podium-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.hud{padding:10px}.topbar{width:calc(100vw - 20px);gap:6px}.brand{display:none}.metric{flex:1;min-width:0;padding:8px}.metric strong{font-size:19px}.status{width:calc(100vw - 20px);font-size:13px}.leaderboard{top:auto;right:10px;bottom:150px;width:180px;font-size:12px}.quick-start{left:10px;bottom:10px}.joystick{width:104px;height:104px;right:10px;bottom:10px}.title-logo{font-size:52px}.inventory-body{grid-template-columns:1fr;gap:12px}.character-stage{min-height:240px}.character-stage canvas{max-height:220px;max-width:200px}.inventory-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}}