.tt-app{--tt-ink:#233a52;--tt-paper:#fffbed;--tt-accent:#357daf;--tt-red:#e2574f;--tt-green:#3f9d6b;overflow:hidden;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100dvh;background:#b9c7da}.tt-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;cursor:crosshair;touch-action:none}.tt-app:not([data-phase=play]) :is(.tt-score,.tt-serve,.tt-hint,.tt-quit){display:none}.tt-app:not([data-phase=play]) .tt-scene{cursor:default}.tt-score{position:absolute;z-index:4;top:calc(env(safe-area-inset-top, 0px) + 12px);left:14px;display:flex;flex-direction:column;gap:4px;pointer-events:none}.tt-score b{font:800 18px/1 Playful,sans-serif;color:var(--tt-ink);background:rgba(255,251,237,.92);border:2px solid #fff;border-radius:12px;padding:5px 12px;box-shadow:0 3px 0 rgba(35,58,82,.18);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tt-score .tt-s-ai{color:var(--tt-red)}.tt-score .tt-s-you{color:var(--tt-accent)}.tt-serve{position:absolute;z-index:4;top:calc(env(safe-area-inset-top, 0px) + 14px);left:50%;transform:translateX(-50%);font:800 15px/1 Playful,sans-serif;color:#fff;background:rgba(35,58,82,.78);padding:6px 14px;border-radius:11px;pointer-events:none;white-space:nowrap}.tt-serve:empty{display:none}.tt-hint{position:absolute;z-index:4;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);transform:translateX(-50%);margin:0;pointer-events:none;font:800 15px/1.2 Playful,sans-serif;color:var(--tt-ink);background:rgba(255,255,255,.92);padding:7px 14px;border-radius:12px;white-space:nowrap;text-align:center}.tt-hint:empty{display:none}.tt-banner{position:absolute;z-index:7;pointer-events:none;left:50%;top:42%;transform:translate(-50%,-50%) scale(.85);font:800 clamp(34px,10vw,62px)/1 Playful,sans-serif;color:#fff;text-align:center;width:max-content;max-width:92vw;-webkit-text-stroke:3px var(--tt-ink);paint-order:stroke fill;text-shadow:0 5px 0 rgba(35,58,82,.4);opacity:0;transition:opacity .18s,transform .18s}.tt-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}.tt-banner.red{color:#ffe1e0;-webkit-text-stroke-color:#9c2a25}.tt-banner.green{color:#e3ffef;-webkit-text-stroke-color:#2a6b4c}.tt-corner{position:absolute;z-index:8;top:calc(env(safe-area-inset-top, 0px) + 12px);right:12px;display:flex;gap:6px}.tt-icon-btn{width:44px;height:40px;padding:0;border-radius:12px;border:2px solid #fff;display:grid;place-items:center;background:rgba(255,251,237,.94);color:var(--tt-ink);cursor:pointer}.tt-icon-btn .off,.tt-icon-btn[aria-pressed=true] .on{display:none}.tt-icon-btn[aria-pressed=true] .off{display:inline}.tt-app:not([data-phase=play]) .tt-corner{display:none}.playful-game .tt-menu,.playful-game .tt-result{align-items:flex-end;justify-content:center;padding-right:max(5vw,24px);background:linear-gradient(90deg,rgba(35,58,82,0) 40%,rgba(35,58,82,.4) 72%);-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.tt-menu>*,.tt-result>*{pointer-events:auto}.tt-card{width:min(420px,100%);background:var(--tt-paper);border:4px solid #fff;border-radius:28px;flex-shrink:0;box-shadow:0 8px 0 var(--tt-accent);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;color:var(--tt-ink)}.tt-kicker{font:800 12px/1.2 Playful,sans-serif;letter-spacing:.08em;color:var(--tt-red)}.tt-title{margin:0;font:800 clamp(38px,5.5vw,56px)/.95 Playful,sans-serif;color:#fff;letter-spacing:-.5px;-webkit-text-stroke:2.5px var(--tt-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--tt-accent)}.tt-pitch{margin:0;font-size:15px;line-height:1.45}.tt-pitch b{color:var(--tt-accent)}.tt-levels-row{display:flex;flex-direction:column;gap:6px}.tt-levels-label{font:800 12px/1 Playful,sans-serif;letter-spacing:.06em;color:#6a7a8a}.tt-levels{display:flex;flex-wrap:wrap;gap:6px}.tt-levels button{min-height:40px;padding:6px 14px;border-radius:20px;cursor:pointer;border:2px solid rgba(35,58,82,.15);background:#fff;color:var(--tt-ink);font:800 14px/1 Playful,sans-serif}.tt-levels button[aria-pressed=true]{border-color:var(--tt-accent);background:var(--tt-paper);box-shadow:0 3px 0 var(--tt-accent);color:var(--tt-accent)}.tt-rec{font-weight:800;color:var(--tt-accent);min-height:1.2em}.tt-keys,.tt-rec{margin:0;text-align:center}.tt-keys{font-size:12px;font-weight:700;color:#6a7a8a;line-height:1.4}@media (hover:none),(pointer:coarse){.tt-keys{display:none}}.tt-small-card{width:min(380px,100%);text-align:center;align-items:stretch}.tt-result-title{margin:0;font:800 clamp(34px,9vw,50px)/1 Playful,sans-serif;color:#e3ffef;transform:rotate(-3deg);-webkit-text-stroke:3px #2a6b4c;paint-order:stroke fill;text-shadow:0 5px 0 rgba(42,107,76,.35)}.tt-result.fail .tt-result-title{color:#ffe1e0;-webkit-text-stroke-color:#9c2a25;text-shadow:0 5px 0 rgba(156,42,37,.35)}.tt-result-line{margin:0;font-size:16px;font-weight:700}.tt-result-score{display:flex;align-items:baseline;justify-content:center;gap:8px}.tt-result-score b{font:800 56px/1 Playful,sans-serif;color:var(--tt-accent);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tt-result-score span{font-weight:800;font-size:22px;color:#6a7a8a}.tt-result.fail .tt-result-score b{color:var(--tt-red)}.tt-link-btn{background:none;border:0;color:var(--tt-accent);font:800 16px/1.2 Playful,sans-serif;padding:8px;min-height:44px;cursor:pointer}@media (max-aspect-ratio:4/5),(max-width:700px){.playful-game :is(.tt-menu,.tt-result){align-items:center;justify-content:flex-end;padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 12px);background:linear-gradient(180deg,rgba(35,58,82,0) 35%,rgba(35,58,82,.5) 62%)}.tt-card{max-height:66dvh;overflow-y:auto;gap:10px;padding:16px 16px 12px}.tt-title{font-size:40px}}