:root{color:#102033;background:#5fd4ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--safe-bottom: max(18px, env(safe-area-inset-bottom));--safe-top: max(28px, calc(env(safe-area-inset-top) + 18px) );--ink: #102033;--navy: #17324d;--cream: #fff4d6;--court: #2e9b5f;--lime: #b9f24d;--coral: #ff6b4a;--gold: #ffd447}*{box-sizing:border-box}html,body,#app-shell{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{min-width:320px;min-height:100vh;touch-action:none;-webkit-user-select:none;user-select:none}#app-shell{position:fixed;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 18%,rgba(16,32,51,.1) 100%),linear-gradient(180deg,#fff4d638,#fff4d600 34%),linear-gradient(90deg,#2e9b5f1a,#2aa7df14,#ff6b4a14),#5fd4ff}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}.court-glow{position:absolute;inset:auto 0 0;height:22vh;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 45%,transparent 72%),linear-gradient(180deg,transparent,rgba(16,32,51,.14)),repeating-linear-gradient(90deg,rgba(255,244,214,.09) 0 2px,transparent 2px 34px)}#ui-layer{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding:var(--safe-top) 18px var(--safe-bottom)}.loading-mark{position:absolute;top:var(--safe-top);left:18px;display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.78rem;font-weight:950;text-transform:uppercase}body[data-game-ready=true] .loading-mark{display:none}.logo-ball{width:28px;height:28px;flex:0 0 28px;border:2px solid rgba(16,32,51,.18);border-radius:50%;background:radial-gradient(circle at 34% 32%,#e3ff82 0 11%,transparent 12%),radial-gradient(circle at 66% 36%,rgba(16,32,51,.85) 0 8%,transparent 9%),radial-gradient(circle at 36% 62%,rgba(16,32,51,.65) 0 6%,transparent 7%),var(--lime);box-shadow:0 4px #10203338}.hud{position:absolute;top:var(--safe-top);left:50%;transform:translate(-50%);width:min(92vw,340px);padding:8px 12px 9px;border:2px solid rgba(16,32,51,.18);border-radius:8px;background:linear-gradient(90deg,rgba(255,107,74,.1),transparent 34%,rgba(46,155,95,.1)),linear-gradient(180deg,#ffffffc7,#fff4d6f0),var(--cream);text-align:center;box-shadow:0 4px #10203324,0 16px 34px #10203324}.hud:before{content:"";position:absolute;inset:4px 8px auto;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent);pointer-events:none}.hud-topline{display:flex;justify-content:space-between;gap:10px;color:var(--navy);font-size:.68rem;font-weight:950;white-space:nowrap}.hud[data-visible=false]{display:none}#debug-readout{position:absolute;left:18px;right:18px;bottom:calc(var(--safe-bottom) + 8px);display:none;max-width:560px;padding:8px 10px;border:1px solid rgba(16,32,51,.22);border-radius:8px;background:#102033c7;color:#fff4d6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.68rem;line-height:1.35;pointer-events:none}#debug-readout[data-visible=true]{display:block}.hud-label{display:block;margin-top:2px;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:0;color:var(--navy)}#score-value{display:block;margin-top:1px;font-size:1.86rem;line-height:1;color:var(--coral);text-shadow:0 2px 0 rgba(255,244,214,.94),0 7px 16px rgba(255,107,74,.24)}.powerup-status{display:none;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;min-height:24px;margin:4px auto 0;padding:3px 8px 3px 5px;border:1px solid rgba(16,32,51,.16);border-radius:999px;background:#ffffff94;color:var(--navy);font-size:.68rem;font-weight:950;line-height:1;box-shadow:0 2px #1020331a}.powerup-status[data-visible=true]{display:inline-flex}#powerup-icon{display:inline-grid;width:16px;height:16px;place-items:center;border-radius:50%;background:var(--gold);color:var(--ink);font-size:.56rem;font-weight:950}.powerup-status[data-kind=shield] #powerup-icon{background:var(--lime)}.powerup-status[data-kind=smash] #powerup-icon{background:var(--coral);color:var(--cream)}.powerup-status[data-kind=slowRally] #powerup-icon{background:var(--gold)}.progress-track{--progress-pct: 0%;position:relative;width:100%;height:14px;margin-top:8px;padding:3px;overflow:visible;border:1px solid rgba(16,32,51,.16);border-radius:999px;background:linear-gradient(180deg,#ffffff9e,#10203314),#10203321;box-shadow:inset 0 1px #ffffffd1,inset 0 -2px #1020331f}.progress-track:before{content:"";position:absolute;inset:3px 8px;border-radius:999px;background:repeating-linear-gradient(90deg,transparent 0 18%,rgba(255,244,214,.55) 18% 19%,transparent 19% 25%),#2e9b5f47;pointer-events:none}.progress-court-line{position:absolute;left:11px;right:11px;top:50%;height:2px;border-radius:999px;background:#fff4d6bd;transform:translateY(-50%);pointer-events:none}#progress-fill{position:relative;display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 45%),linear-gradient(90deg,var(--lime),var(--gold),var(--coral));box-shadow:0 0 0 1px #10203314,0 0 14px #ffd44775}#progress-marker{position:absolute;top:50%;left:clamp(12px,var(--progress-pct),calc(100% - 12px));width:18px;height:18px;border:2px solid rgba(16,32,51,.18);border-radius:50%;background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.82) 0 14%,transparent 15%),radial-gradient(circle at 68% 36%,rgba(16,32,51,.55) 0 6%,transparent 7%),radial-gradient(circle at 36% 66%,rgba(16,32,51,.45) 0 5%,transparent 6%),var(--lime);box-shadow:0 2px #10203333,0 0 14px #b9f24d85;transform:translate(-50%,-50%);pointer-events:none}.challenge-toast{position:absolute;left:50%;bottom:-31px;max-width:min(82vw,290px);padding:5px 10px;border:1px solid rgba(16,32,51,.16);border-radius:999px;background:linear-gradient(180deg,#fffc,#fff4d6f0),var(--cream);color:var(--navy);font-size:.68rem;font-weight:950;line-height:1;white-space:nowrap;opacity:0;box-shadow:0 3px #1020331f,0 10px 22px #10203324;transform:translate(-50%,-5px) scale(.96);transition:opacity .16s ease,transform .16s ease;pointer-events:none}.challenge-toast[data-visible=true]{opacity:1;transform:translate(-50%) scale(1)}.score-pop{animation:score-pop .26s ease-out}.hud-pulse{animation:hud-pulse .28s ease-out}.stage-stepper{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin:4px 0 2px}.stage-step{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;border:1px solid rgba(16,32,51,.12);background:#ffffff8c;font-size:.65rem;font-weight:800;color:var(--navy);opacity:.5;transition:all .2s ease;letter-spacing:-.01em}.stage-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#10203324;font-size:.58rem;font-weight:900}.stage-step[data-status=active]{opacity:1;background:linear-gradient(180deg,#ffffff,var(--cream));border-color:var(--gold);box-shadow:0 0 10px #ffd44799,inset 0 1px #fff;transform:scale(1.04)}.stage-step[data-status=active] .step-num{background:var(--gold);color:var(--navy)}.stage-step[data-status=completed]{opacity:.9;background:#2e9b5f2e;border-color:#2e9b5f73;color:var(--court-green)}.stage-step[data-status=completed] .step-num{background:var(--court-green);color:#fff}.stage-mini-metric{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:2px;font-size:.62rem;font-weight:800;color:#102033b8}.level-up-banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%) scale(.8);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 28px;border-radius:16px;background:linear-gradient(135deg,#102033f2,#1e3a58f5);border:2px solid var(--gold);box-shadow:0 0 30px #ffd447bf,0 12px 32px #00000073;text-align:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .26s cubic-bezier(.175,.885,.32,1.275)}.level-up-banner[data-visible=true]{opacity:1;transform:translate(-50%,-50%) scale(1)}.level-up-title{font-size:1.05rem;font-weight:950;letter-spacing:.04em;color:var(--gold);text-shadow:0 0 12px rgba(255,212,71,.8);text-transform:uppercase}.level-up-desc{font-size:.82rem;font-weight:800;color:#fff;margin-top:4px;letter-spacing:.02em}@keyframes level-up-pop{0%{transform:translate(-50%,-20%) scale(.7);opacity:0}20%{transform:translate(-50%,-52%) scale(1.08);opacity:1}35%{transform:translate(-50%,-50%) scale(1)}85%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-58%) scale(.95);opacity:0}}.level-up-banner.level-up-pop{animation:level-up-pop 2.8s cubic-bezier(.2,.8,.2,1) forwards}.stage-select-bar{width:100%;margin:12px 0 8px;padding:10px;border-radius:12px;background:#1020330f;border:1px solid rgba(16,32,51,.1);display:flex;flex-direction:column;gap:8px}.stage-select-bar[data-visible=false]{display:none}.stage-select-header{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:900;color:var(--navy);letter-spacing:.03em}.stage-select-subtitle{color:#102033a6;font-weight:700}.stage-pills-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stage-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:8px;border:1px solid rgba(16,32,51,.14);background:#fff;color:var(--navy);cursor:pointer;transition:all .15s ease;font-family:inherit}.stage-pill:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold);box-shadow:0 4px 10px #1020331f}.stage-pill .pill-num{font-size:.85rem;font-weight:950;line-height:1}.stage-pill .pill-title{font-size:.58rem;font-weight:800;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.stage-pill[data-active=true]{border-color:var(--gold);background:linear-gradient(180deg,#ffffff,var(--cream));box-shadow:0 0 0 2px var(--gold),0 4px 12px #ffd44766}.stage-pill:disabled{opacity:.42;background:#1020330f;cursor:not-allowed;border-style:dashed}.icon-button{position:absolute;top:var(--safe-top);right:18px;width:46px;min-height:46px;border:2px solid rgba(16,32,51,.14);border-radius:50%;background:linear-gradient(180deg,#ffffffc2,#fff4d6f5);color:var(--navy);font-size:.7rem;font-weight:950;text-transform:uppercase;pointer-events:auto;box-shadow:0 4px #1020331f,0 12px 26px #10203321}.icon-button:after{content:"";position:absolute;width:26px;height:3px;left:10px;top:22px;border-radius:99px;background:var(--coral);transform:rotate(-38deg);opacity:1}.icon-button[data-enabled=true]:after{opacity:0}.panel{width:min(100%,390px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 10px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding:16px;border:2px solid rgba(16,32,51,.14);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 18%),linear-gradient(135deg,#fffc,#fff4d6f5),var(--cream);box-shadow:0 4px #10203324,0 24px 52px #1020333d}.panel[data-hidden=true]{display:none}.panel[data-state=gameOver]{border-color:#ff6b4a57;background:linear-gradient(135deg,#ffd44761,#fff4d6f5),var(--cream)}.brand-lockup{display:flex;align-items:center;gap:9px;margin-bottom:8px}.wordmark{color:var(--court);font-size:.86rem;font-weight:950;text-transform:uppercase}h1{margin:0;color:var(--navy);font-size:clamp(1.82rem,8vw,2.42rem);line-height:1.02;letter-spacing:0}#panel-copy{margin:10px 0 14px;color:var(--navy);font-size:1rem;line-height:1.38}#funnel-content:empty,#funnel-status:empty{display:none}#funnel-status{margin:10px 0;color:var(--navy);font-size:.88rem;line-height:1.3}.privacy-link{display:block;margin:8px 0 10px;color:var(--navy);font-size:.8rem;font-weight:800;text-align:center;pointer-events:auto}.profile-card,.recommendation-card,.leaderboard-card,.language-card,.disclosure-box{margin:10px 0;padding:10px;border:1px solid rgba(16,32,51,.13);border-radius:8px;background:linear-gradient(180deg,#ffffffc2,#ffffff75),#ffffff8f;box-shadow:inset 0 1px #ffffffd1}.profile-card--result{position:relative;overflow:hidden;background:linear-gradient(135deg,#b9f24d52,#ffffffb3 52%,#ffd44747),#ffffff9e}.profile-card--result:after{content:"";position:absolute;inset:auto 10px 8px auto;width:34px;height:34px;border:2px solid rgba(16,32,51,.14);border-radius:50%;background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.92) 0 13%,transparent 14%),radial-gradient(circle at 68% 36%,rgba(16,32,51,.42) 0 6%,transparent 7%),radial-gradient(circle at 36% 66%,rgba(16,32,51,.34) 0 5%,transparent 6%),var(--lime);opacity:.82;pointer-events:none}.reward-card{border-color:#ffd44770;background:linear-gradient(90deg,#ffd44747,#ffffff8f),#ffffff8f}.funnel-section-heading{margin:12px 2px 6px;color:var(--navy);font-size:.72rem;font-weight:950;text-transform:uppercase}.profile-card strong,.recommendation-card strong,.leaderboard-card strong,.language-card strong{display:block;color:var(--navy);font-size:.98rem}.leaderboard-card ol{margin:8px 0 0;padding-left:22px}.leaderboard-card li{margin:4px 0;color:var(--navy);font-size:.84rem;font-weight:750}.profile-card span{display:inline-flex;margin-bottom:4px;padding:3px 7px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.72rem;font-weight:900}.category-row,.language-row,.funnel-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.funnel-actions{grid-template-columns:1fr}.language-row{grid-template-columns:repeat(2,1fr)}.category-row button,.language-row button,.funnel-actions button,.marketplace-cta{min-height:42px;padding:8px;border:2px solid rgba(16,32,51,.14);background:var(--cream);color:var(--navy);font-size:.82rem;box-shadow:0 3px #1020331a}.category-row button[data-selected=true]{border-color:var(--coral);background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 56%),var(--gold);box-shadow:0 3px #1020331f,0 0 0 3px #ffd4473d}.language-row button[data-selected=true]{border-color:var(--coral);background:var(--gold)}.recommendation-card{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;position:relative;overflow:hidden;border-color:#2e9b5f38;background:linear-gradient(135deg,#2e9b5f24,#ffffffbd 58%,#ff6b4a1f),#ffffff9e}.recommendation-card img{width:64px;height:64px;border-radius:8px;border:1px solid rgba(16,32,51,.12);background:center / 42px 42px no-repeat url(/piko-icon.svg),var(--lime);object-fit:cover;box-shadow:0 3px #1020331f}.recommendation-card p{margin:3px 0;color:var(--navy);font-size:.82rem;line-height:1.25}.recommendation-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}.recommendation-tags span{display:inline-flex;min-height:20px;align-items:center;padding:2px 6px;border-radius:999px;background:#ffd447b8;color:var(--ink);font-size:.64rem;font-weight:950}.marketplace-cta{grid-column:1 / -1;width:100%;margin-top:8px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 52%),var(--coral);color:var(--cream)}.disclosure-box{color:var(--navy);font-size:.78rem;line-height:1.3}button{width:100%;min-height:52px;border:0;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%),var(--coral);color:var(--cream);font:inherit;font-size:1.1rem;font-weight:950;cursor:pointer;touch-action:manipulation;box-shadow:0 4px #10203329,0 12px 24px #ff6b4a33}button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}#rotate-notice{display:none;pointer-events:none}.screen-shake{animation:screen-shake .19s linear}@keyframes score-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}to{transform:scale(1)}}@keyframes hud-pulse{0%{box-shadow:0 8px 24px #1020331f}50%{box-shadow:0 0 0 6px #ffd44757,0 8px 24px #1020331f}to{box-shadow:0 8px 24px #1020331f}}@keyframes screen-shake{0%,to{transform:translateZ(0)}25%{transform:translate3d(4px,-2px,0)}50%{transform:translate3d(-3px,2px,0)}75%{transform:translate3d(2px,1px,0)}}@media(min-width:760px){#ui-layer{align-items:center;justify-content:flex-end;padding-right:42px}.panel{margin-top:90px}}@media(orientation:landscape)and (max-height:520px){#rotate-notice{position:absolute;inset:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;border-radius:8px;background:#fff4d6f5;color:var(--navy);text-align:center;box-shadow:0 18px 40px #1020332e}#rotate-notice strong{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}.auth-card{margin:12px 0;padding:12px;border:1px solid rgba(46,155,95,.22);border-radius:16px;background:#fffcf2c2;text-align:left}.auth-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-link{border:0;background:none;color:var(--green-dark, #237444);text-decoration:underline;cursor:pointer}#auth-note,#auth-status{margin:6px 0;font-size:.75rem;color:#5f6d67}#auth-form{display:grid;gap:8px}#auth-form[hidden],#google-auth[hidden]{display:none}#auth-form label{display:grid;gap:4px;font-size:.78rem;color:#30443b}#auth-name-field[hidden]{display:none}#auth-form input[type=email],#auth-form input[type=password],#auth-form input[name=name]{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #c7d8cd;border-radius:10px;background:#fff}.preference-row{display:flex;flex-wrap:wrap;gap:8px}.preference-row label{display:inline-flex!important;align-items:center;gap:4px}.auth-submit{padding:9px 12px;border:0;border-radius:10px;background:#2e9b5f;color:#fff;font-weight:700;cursor:pointer}.auth-divider{display:flex;align-items:center;gap:8px;margin:8px 0;color:#718078;font-size:.72rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#d3dfd7}.google-auth{width:100%;padding:9px 12px;border:1px solid #c7d8cd;border-radius:10px;background:#fff;color:#30443b;font-weight:700;cursor:pointer}body[data-platform=youtube] #rotate-notice{display:none!important}.yt-status-card{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;background:#ffffffd9;border:1px solid rgba(255,0,0,.2);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.yt-status-card p{margin:0;font-size:.8rem;font-weight:600;color:var(--navy)}.yt-badge-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:red;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.yt-ad-boost-card{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:12px 14px;background:linear-gradient(135deg,#e6f8eef2,#fffcf2f2);border:1.5px solid rgba(46,155,95,.35);border-radius:14px;box-shadow:0 4px 14px #2e9b5f1f}.yt-ad-header{display:flex;align-items:center;gap:12px}.yt-ad-icon{font-size:1.8rem;line-height:1}.yt-ad-text{flex:1;text-align:left}.yt-ad-text strong{display:block;font-size:.88rem;color:#17324d}.yt-ad-text p{margin:2px 0 0;font-size:.75rem;color:#4b6358}.yt-ad-button{width:100%!important;min-height:42px!important;padding:8px 14px!important;border:none!important;border-radius:10px!important;background:linear-gradient(135deg,#2e9b5f,#237444)!important;color:#fff!important;font-size:.88rem!important;font-weight:700!important;cursor:pointer;box-shadow:0 2px 6px #2e9b5f40!important;transition:transform .1s ease,filter .1s ease}.yt-ad-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.yt-ad-button:active:not(:disabled){transform:translateY(1px)}.yt-ad-button:disabled{background:#2a8352!important;color:#e6f6ec!important;cursor:default!important;box-shadow:none!important;opacity:.92}.yt-locker-section{margin-top:10px;text-align:left}.yt-locker-title{margin:0 0 10px;font-size:.92rem;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.03em}.yt-locker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;max-height:240px;overflow-y:auto;padding-right:4px}.yt-locker-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#ffffffbf;border:1px solid rgba(23,50,77,.1);transition:all .15s ease}.yt-locker-item[data-unlocked=true]{background:#fffffff2;border-color:#2e9b5f66;box-shadow:0 2px 8px #2e9b5f14}.yt-locker-item[data-unlocked=false]{opacity:.65;background:#f0f4f899}.yt-item-badge{font-size:1.4rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#17324d0f}.yt-locker-item[data-unlocked=true] .yt-item-badge{background:#b9f24d47}.yt-item-info{flex:1}.yt-item-info strong{display:block;font-size:.8rem;color:#17324d}.yt-item-info p{margin:1px 0 3px;font-size:.7rem;color:#5b6e65;line-height:1.25}.yt-item-status{display:inline-block;font-size:.66rem;font-weight:700;padding:1px 5px;border-radius:4px;background:#eef2f5;color:#64748b}.yt-locker-item[data-unlocked=true] .yt-item-status{background:#e2f8e9;color:#1f7a43}