:root{--navy:#03133d;--blue:#0a72dd;--gold:#ffd43a;--green:#55ee55;--red:#f04b4f}
*{box-sizing:border-box}html,body{margin:0;background:#020a24;color:#fff;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}.tt-page{min-height:100%}.tt-top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:6px 18px;background:linear-gradient(180deg,#061945,#020b28);border-bottom:2px solid #0e62bc;position:relative;z-index:20}.tt-brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;text-decoration:none;color:#fff;line-height:.9}.tt-brand span{font-size:27px;font-weight:1000;color:#ffce25}.tt-brand b{font-size:17px;align-self:end}.tt-brand small{grid-column:1/3;font-size:8px;color:#74c9ff;letter-spacing:1px}.tt-top nav{display:flex;gap:10px}.tt-top nav a{color:#d9edff;text-decoration:none;font-weight:900;font-size:12px;padding:12px 10px;border-radius:8px}.tt-top nav a.active{background:#0e5dcc}.tt-shell{max-width:1280px;margin:auto;padding:10px}.tt-game{position:relative;height:clamp(620px,calc(100dvh - 84px),720px);overflow:hidden;border:2px solid #1687e8;border-radius:20px;background:#03226a;box-shadow:0 18px 70px #0009}.tt-stadium{position:absolute;inset:0;background:url('../assets/tennis-centre-court-game.jpg') center/cover no-repeat;filter:blur(6px) brightness(.34) saturate(1.15);transform:scale(1.08)}.tt-game[data-surface="grass"] .tt-court{--court1:#258b48;--court2:#116634}.tt-game[data-surface="clay"] .tt-court{--court1:#d86e34;--court2:#a64c27}.tt-game[data-surface="night"] .tt-court{--court1:#39309c;--court2:#15166b}.tt-game[data-surface="champ"] .tt-court{--court1:#168de0;--court2:#064e9f}
.tt-scorebar{position:absolute;left:12%;right:12%;top:12px;height:74px;display:grid;grid-template-columns:1fr 1.2fr 1fr;background:#061849ef;border:2px solid #4db6ff;border-radius:16px;z-index:5;overflow:hidden;box-shadow:0 8px 24px #0008}.tt-side{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:1000;padding:8px}.tt-side.hero{background:linear-gradient(90deg,#084fae,#0b79e4)}.tt-side.rival{background:linear-gradient(90deg,#b51e2b,#e84131)}.tt-side b{font-size:34px}.tt-side span{font-size:14px}.tt-centre{text-align:center;display:grid;place-items:center;padding:5px}.tt-centre small{font-size:9px;color:#9edcff}.tt-centre strong{font-size:18px}.tt-power{position:relative;width:74%;height:8px;border-radius:99px;background:#03112f;border:1px solid #699fd1;overflow:visible}.tt-power i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffc62b,#fff461);border-radius:99px;transition:width .15s}.tt-power span{position:absolute;right:-20px;top:-7px;font-size:15px}.tt-pause{position:absolute;z-index:8;top:101px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:13px;border:1px solid #7cc6ff;background:#061a4eee;color:#fff;font-size:19px;font-weight:1000}.tt-pause:disabled{opacity:.35}
.tt-playfield{position:absolute;inset:96px 0 0;z-index:3;overflow:hidden;touch-action:manipulation;cursor:pointer;user-select:none}.tt-court{--court1:#158ed0;--court2:#075aa6;position:absolute;z-index:1;left:6%;right:6%;top:18%;bottom:3%;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--court1),var(--court2));box-shadow:inset 0 0 60px #ffffff12}.tt-court:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.7%,#ffffffaa 49.7% 50.3%,transparent 50.3%),linear-gradient(180deg,transparent 49%,#ffffffaa 49% 50%,transparent 50%)}.tt-court .net{position:absolute;left:4%;right:4%;top:47%;height:6px;background:#effaff;box-shadow:0 4px 0 #001c4b,0 0 12px #fff8}.tt-opponent{position:absolute;z-index:4;left:50%;top:19%;transform:translateX(-50%);display:grid;place-items:center}.tt-rival-avatar{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#e5383e,#721924);border:3px solid #fff;box-shadow:0 0 0 6px #091637aa,0 8px 24px #0008;font-size:28px}.tt-opponent small{margin-top:5px;padding:3px 7px;border-radius:999px;background:#06133ddd;border:1px solid #e95357;font-size:8px;font-weight:1000}.tt-hero{position:absolute;z-index:4;left:50%;bottom:-1%;width:145px;height:145px;transform:translateX(-50%);display:grid;place-items:end center;pointer-events:none}.tt-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px #00133a)}
.tt-hit-zone{position:absolute;z-index:6;left:50%;top:71%;width:132px;height:132px;transform:translate(-50%,-50%);border-radius:50%;border:6px solid #5ba9e0;background:#0a3e7477;box-shadow:0 0 0 10px #0b5ba42e,0 0 25px #2f98e377;display:grid;place-items:center;transition:left .18s ease-out,top .18s ease-out,border-color .08s,background .08s,box-shadow .08s,transform .08s;pointer-events:none}.tt-hit-zone span{font-size:18px;font-weight:1000;color:#bfeaff;text-shadow:0 2px #0b2c57}.tt-hit-zone.ready{border-color:#ffe057;background:#715a1577;box-shadow:0 0 0 11px #ffd62e22,0 0 34px #ffd62e88}.tt-hit-zone.go{border-color:#69f06b;background:#1a8f3277;box-shadow:0 0 0 13px #5bff5b29,0 0 52px #57f15ccc;transform:translate(-50%,-50%) scale(1.08)}.tt-hit-zone.go span{color:#f2ffab;font-size:26px}.tt-hit-zone.perfect{border-color:#fff85a;background:#1cae3a99;box-shadow:0 0 0 14px #fff45435,0 0 66px #8aff5f}.tt-hit-zone.miss{border-color:#ff5d66;background:#8f182977;box-shadow:0 0 0 13px #ff33442b,0 0 48px #ff4658cc;transform:translate(-50%,-50%) scale(1.05)}.tt-hit-zone.miss span{color:#fff;font-size:22px}.tt-ball{position:absolute;z-index:8;left:50%;top:28%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#dfff3d;font-size:33px;line-height:1;text-shadow:0 0 8px #fff,0 0 16px #cfff27;transform:translate(-50%,-50%)}.tt-status{position:absolute;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%);min-width:230px;max-width:72%;padding:9px 14px;text-align:center;border-radius:13px;background:#03113ddd;border:2px solid #4aaeff;pointer-events:none}.tt-status strong{display:block;color:#ffe136;font-size:24px}.tt-status span{font-size:11px}.tt-rally{position:absolute;z-index:9;left:2%;top:3%;padding:6px 9px;border-radius:10px;background:#03113ddd;border:1px solid #4aaeff;color:#aee8ff;font-size:10px;font-weight:1000}.tt-countdown{position:absolute;z-index:12;inset:0;display:grid;place-items:center;font-size:94px;font-weight:1000;text-shadow:0 4px #073f89,0 0 24px #fff;pointer-events:none}.tt-smash{position:absolute;z-index:12;left:50%;top:37%;transform:translate(-50%,-120px);opacity:0;padding:12px 18px;border-radius:15px;background:linear-gradient(#ffe453,#ffad16);color:#102252;font-size:26px;font-weight:1000;box-shadow:0 0 38px #ffe443;transition:.2s;pointer-events:none}.tt-smash.show{opacity:1;transform:translate(-50%,0)}.tt-tap-hint{position:absolute;z-index:9;left:50%;bottom:3%;transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:#03113dcc;border:1px solid #60bcff;color:#c9edff;font-size:10px;font-weight:1000;letter-spacing:.4px;pointer-events:none}
.tt-overlay{position:absolute;inset:0;z-index:15;display:none;place-items:center;background:#020a25e6;padding:18px}.tt-overlay.show{display:grid}.tt-intro-card{width:min(1040px,96%);display:grid;grid-template-columns:1.12fr .88fr;background:linear-gradient(145deg,#061a50,#082a70);border:2px solid #38aaff;border-radius:22px;overflow:hidden;box-shadow:0 20px 80px #000c}.tt-intro-art{min-height:430px;background:#021339}.tt-intro-art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}.tt-intro-copy{padding:24px}.tt-kicker{font-size:10px;font-weight:1000;color:#81d7ff;letter-spacing:.8px}.tt-intro-copy h1{margin:8px 0 12px;line-height:.88}.tt-intro-copy h1 span{display:block;font-size:28px}.tt-intro-copy h1 strong{display:block;font-size:48px;color:#ffd42c;text-shadow:0 3px #7b4800}.tt-rule{font-size:20px;line-height:1.3;margin:12px 0}.tt-rule em{font-style:normal;color:#83ff78}.tt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.tt-steps span{display:grid;place-items:center;gap:3px;padding:11px 5px;border-radius:13px;background:#03133d;border:1px solid #4fb9ff;font-size:28px}.tt-steps b{font-size:10px}.tt-small{font-size:12px;line-height:1.45;color:#d9f0ff}.tt-level-select{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;background:#04133d;border:1px solid #4fb9ff;border-radius:15px;padding:8px}.tt-level-select button{height:42px;border-radius:10px;border:1px solid #56bfff;background:#0a4a9f;color:#fff;font-size:28px}.tt-level-select div{text-align:center}.tt-level-select small,.tt-level-select span{display:block;font-size:9px;color:#9ddcff}.tt-level-select strong{font-size:18px}.tt-progress{height:8px;background:#03102e;border-radius:8px;overflow:hidden;margin:9px 0}.tt-progress i{display:block;height:100%;width:20%;background:linear-gradient(90deg,#1bd15d,#ffe23d)}.tt-unlock{display:block;text-align:center;color:#9ddcff}.tt-start,.tt-result-actions button{width:100%;margin-top:12px;padding:14px;border:0;border-radius:12px;background:linear-gradient(#ffd83e,#f09e14);color:#14285b;font-size:17px;font-weight:1000}.tt-academy-link{display:block;text-align:center;color:#9ddcff;text-decoration:none;font-weight:900;font-size:11px;margin-top:12px}.tt-result-card{width:min(520px,94%);background:linear-gradient(145deg,#061a50,#092d77);border:2px solid #45b8ff;border-radius:22px;padding:24px;text-align:center}.tt-result-card h2{font-size:35px;margin:7px 0;color:#ffe13b}.tt-stars{font-size:34px;color:#ffdd2e}.tt-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.tt-result-stats div{background:#031239;border:1px solid #4fb8ff;border-radius:12px;padding:10px}.tt-result-stats small{display:block;color:#93d6ff;font-size:9px}.tt-result-stats b{font-size:22px}.tt-result-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tt-result-actions button{margin:0;font-size:12px}.tt-result-actions .secondary{background:#0a4d9f;color:#fff;border:1px solid #6fc6ff}.tt-pause-overlay{position:absolute;inset:0;z-index:18;display:none;place-items:center;background:#020a25d9}.tt-pause-overlay.show{display:grid}.tt-pause-overlay div{padding:24px;border-radius:20px;background:#061a50;border:2px solid #45b8ff;text-align:center}.tt-pause-overlay strong{display:block;font-size:30px;color:#ffe13b}.tt-pause-overlay button{margin-top:14px;padding:12px 24px;border:0;border-radius:12px;background:#ffd83e;color:#14285b;font-weight:1000}
body.tt-active-play .tt-top{pointer-events:none;opacity:.75}body.tt-active-play{touch-action:manipulation}
@media(max-width:820px){.tt-top{height:52px;padding:5px 8px}.tt-top nav{gap:2px}.tt-top nav a{font-size:9px;padding:9px 5px}.tt-brand small{display:none}.tt-shell{padding:0}.tt-game{height:calc(100dvh - 52px);min-height:0;border-radius:0;border-left:0;border-right:0}.tt-scorebar{left:2%;right:2%;top:6px;height:58px}.tt-side{padding:4px;gap:5px}.tt-side span{font-size:9px}.tt-side b{font-size:25px}.tt-centre strong{font-size:13px}.tt-centre small{font-size:7px}.tt-power{height:6px}.tt-pause{top:72px;width:38px;height:38px}.tt-playfield{inset:68px 0 0}.tt-opponent{top:19%}.tt-rival-avatar{width:48px;height:48px;font-size:21px}.tt-hero{width:110px;height:110px}.tt-hit-zone{width:104px;height:104px}.tt-hit-zone span{font-size:15px}.tt-hit-zone.go span{font-size:22px}.tt-status{top:47%;min-width:190px;padding:7px 10px}.tt-status strong{font-size:19px}.tt-status span{font-size:9px}.tt-tap-hint{font-size:8px;bottom:2%}.tt-intro-card{grid-template-columns:1fr;max-height:94dvh;overflow:auto}.tt-intro-art{min-height:190px;max-height:240px}.tt-intro-copy{padding:15px}.tt-intro-copy h1 strong{font-size:35px}.tt-rule{font-size:16px}.tt-steps span{font-size:22px;padding:7px}.tt-small{font-size:10px}.tt-result-actions{grid-template-columns:1fr}}
@media(max-height:600px) and (orientation:landscape){.tt-top{height:42px}.tt-game{height:calc(100dvh - 42px)}.tt-scorebar{height:48px;top:4px;left:10%;right:10%}.tt-side b{font-size:20px}.tt-side span{font-size:8px}.tt-centre strong{font-size:12px}.tt-pause{top:56px;width:34px;height:34px}.tt-playfield{inset:52px 0 0}.tt-opponent{top:12%}.tt-rival-avatar{width:40px;height:40px;font-size:18px}.tt-opponent small{display:none}.tt-hero{width:82px;height:82px;bottom:-2%}.tt-hit-zone{width:78px;height:78px;top:72%}.tt-hit-zone span{font-size:12px}.tt-hit-zone.go span{font-size:17px}.tt-ball{width:27px;height:27px;font-size:27px}.tt-status{top:43%;padding:4px 8px;min-width:160px}.tt-status strong{font-size:15px}.tt-status span{font-size:8px}.tt-rally{font-size:8px;padding:4px 6px}.tt-tap-hint{font-size:7px;padding:4px 7px}.tt-intro-card{grid-template-columns:1fr 1fr;max-height:92dvh}.tt-intro-art{min-height:0;max-height:none}.tt-intro-copy{padding:10px}.tt-intro-copy h1{margin:4px 0}.tt-intro-copy h1 span{font-size:18px}.tt-intro-copy h1 strong{font-size:30px}.tt-rule{font-size:13px;margin:5px 0}.tt-steps{margin:5px 0}.tt-steps span{font-size:18px;padding:5px}.tt-small{font-size:8px;margin:4px 0}.tt-level-select{padding:4px}.tt-start{padding:8px;margin-top:6px}.tt-academy-link{margin-top:5px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.tt-hit-zone,.tt-smash{transition:none}}