: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;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}.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}}