:root{--bg: #0e1116;--bg-grad: radial-gradient(1200px 600px at 50% -10%, #1a2230 0%, #0e1116 60%);--surface: #161c26;--card: #1b2230;--card-2: #222b3b;--line: #2a3344;--text: #e8edf3;--muted: #8b97a7;--amber: #eba834;--amber-light: #ffd47a;--amber-dark: #c98a1e;--court: #2f8f6a;--win: #3ecf7a;--lose: #ff6b6b;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--radius: 16px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}body{background:var(--bg-grad);background-attachment:fixed}button{font-family:inherit;cursor:pointer}h1,h2{margin:0}.muted{color:var(--muted);font-size:.85rem}.app{max-width:520px;margin:0 auto;min-height:100vh;padding:16px 16px 40px}.screen{display:flex;flex-direction:column;gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.btn{border:none;border-radius:12px;padding:10px 16px;font-weight:700;font-size:.95rem;color:#fff;background:var(--card-2);transition:transform .06s ease,filter .15s ease,opacity .15s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--amber-light),var(--amber));color:#2a1d00}.btn-secondary{background:linear-gradient(180deg,#3a475e,#2a3344)}.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn-lg{padding:14px 18px;font-size:1.05rem}.btn-sm{padding:8px 12px;font-size:.85rem}.btn-xs{padding:4px 8px;font-size:.75rem}.btn-block{width:100%}.btn-primary:not(:disabled):hover{filter:brightness(1.05)}.brand{display:flex;align-items:center;gap:14px;padding:8px 4px}.brand-logo{width:56px;height:52px}.brand h1{font-size:1.5rem;letter-spacing:-.5px}.brand-sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar-id{display:flex;align-items:center;gap:10px}.topbar-logo{width:38px;height:36px}.coins{background:var(--card);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-weight:800;white-space:nowrap}.onboarding-grid{display:grid;grid-template-columns:1fr;gap:16px}.preview-card{display:flex;flex-direction:column;align-items:center;gap:12px}.form-card{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:.9rem}.field input{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font-size:1rem}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--line)}.swatch.is-sel{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.spec-btn{display:flex;align-items:center;gap:6px;justify-content:center;background:var(--card-2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px;font-weight:700}.spec-btn.is-sel{border-color:var(--amber);background:#eba83426}.home-grid{display:grid;grid-template-columns:1fr;gap:16px}.avatar-card{display:flex;flex-direction:column;align-items:center;gap:10px}.character-svg{display:block}.xp{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}.xp-track,.statbar-track{width:100%;height:8px;background:var(--bg);border-radius:999px;overflow:hidden;position:relative}.xp-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-light))}.record{text-align:center}.stats-card h2{font-size:1.05rem;margin-bottom:12px}.home-actions{display:grid;grid-template-columns:1fr;gap:10px}.energy-card{padding:12px 16px}.link-reset{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:.8rem;margin:4px auto 0}.statbars{display:flex;flex-direction:column;gap:12px}.statbar-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:5px}.statbar-value{color:var(--amber-light)}.statbar-bonus{color:var(--win)}.statbar-fill{position:absolute;top:0;height:100%;background:linear-gradient(90deg,#4a8cff,#6aa6ff);border-radius:999px}.statbar-fill--bonus{background:linear-gradient(90deg,var(--win),#7fffb0)}.energybar{display:flex;flex-direction:column;gap:6px}.energybar-pips{display:flex;gap:6px;font-size:1.2rem}.energy-pip.is-off{filter:grayscale(1) brightness(.5);opacity:.5}.energybar-text{font-size:.85rem;color:var(--muted)}.energybar-text strong{color:var(--text)}.scoreboard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}.score-head{display:grid;grid-template-columns:1fr 42px 52px 52px;gap:12px;font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:center;padding-bottom:4px}.score-head span:first-child{text-align:left}.score-row{display:grid;grid-template-columns:1fr 42px 52px 52px;gap:12px;align-items:center;padding:6px 0;font-weight:700}.score-sets{min-width:42px;text-align:center;font-size:1.3rem;font-weight:900;color:var(--win)}.score-row+.score-row{border-top:1px solid var(--line)}.score-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-games{min-width:52px;text-align:center;background:var(--bg);border-radius:10px;padding:4px 14px;color:var(--amber-light);font-size:1.9rem;font-weight:900;line-height:1.1}.score-points{min-width:52px;text-align:center;font-size:1.25rem;font-weight:800;color:var(--text)}.score-points.is-gold{color:var(--amber)}.score-caption{text-align:center;color:var(--muted);font-size:.75rem;margin-top:6px}.court{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:linear-gradient(160deg,#2f8f6a,#1f6f4f);border:1px solid #15573e;border-radius:var(--radius);padding:16px 10px;min-height:190px;position:relative}.court-side{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;transition:transform .2s ease}.court-side.is-winner{transform:translateY(-6px) scale(1.04)}.flip-x{transform:scaleX(-1)}.court-name{font-size:.78rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}.court-net{display:flex;flex-direction:column;align-items:center;gap:6px}.vs{font-weight:900;color:#ffffffd9;letter-spacing:1px}.point-score{background:#00000059;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}.shot-bubble{background:#fff;color:#111;font-weight:800;font-size:.8rem;padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px #0000004d;animation:pop .25s ease}.shot-bubble.is-error{background:var(--lose);color:#fff}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.actionbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:10px 12px;text-align:left;transition:transform .06s ease,border-color .15s ease}.action-btn:active{transform:translateY(1px)}.action-btn:disabled{opacity:.5}.action-icon{font-size:1.3rem}.action-label{font-weight:800}.action-risk{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.action-desc{font-size:.72rem;color:var(--muted)}.risk-high{border-left:4px solid var(--lose)}.risk-high .action-risk{color:var(--lose)}.risk-mid{border-left:4px solid var(--amber)}.risk-mid .action-risk{color:var(--amber)}.risk-low{border-left:4px solid var(--win)}.risk-low .action-risk{color:var(--win)}.match-log{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto}.log-line{font-size:.8rem;padding:6px 10px;border-radius:8px;background:var(--card);border:1px solid var(--line)}.log-win{border-left:3px solid var(--win)}.log-lose{border-left:3px solid var(--lose)}.log-rally{color:var(--muted)}.log-info{color:var(--amber-light)}.result-banner{text-align:center;padding:26px 16px;border-radius:var(--radius)}.result-banner.win{background:linear-gradient(160deg,#3ecf7a40,#3ecf7a0d);border:1px solid rgba(62,207,122,.4)}.result-banner.lose{background:linear-gradient(160deg,#ff6b6b33,#ff6b6b0a);border:1px solid rgba(255,107,107,.35)}.result-banner h1{font-size:1.8rem}.result-score{font-size:1.1rem;color:var(--muted);margin:8px 0 0}.reward-card h2{font-size:1.05rem;margin-bottom:10px}.reward-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:1.05rem}.shop-title{font-size:1.2rem}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tab{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:10px;font-weight:700}.tab.is-sel{color:#2a1d00;background:linear-gradient(180deg,var(--amber-light),var(--amber))}.shop-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}.shop-row+.shop-row{border-top:1px solid var(--line)}.shop-items-layout{display:flex;flex-direction:column;gap:16px}.equipped-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-top:8px}.equip-slot{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:8px;padding:6px 10px;font-size:.8rem}.items-grid{display:flex;flex-direction:column;gap:10px}.item-card{display:flex;align-items:center;gap:12px;padding:8px 0}.item-card+.item-card{border-top:1px solid var(--line)}.item-swatch{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);flex-shrink:0}.item-body{flex:1;display:flex;flex-direction:column}.item-bonus{color:var(--win)}.install-banner{position:fixed;left:50%;transform:translate(-50%);bottom:16px;width:min(490px,calc(100% - 24px));display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);z-index:50}.install-banner-logo{width:40px;height:38px;flex-shrink:0}.install-banner-text{flex:1;display:flex;flex-direction:column}.install-banner-text span{font-size:.78rem;color:var(--muted)}.install-banner-actions{display:flex;flex-direction:column;gap:6px}.install-accept{background:linear-gradient(180deg,var(--amber-light),var(--amber));color:#2a1d00;border:none;border-radius:9px;padding:7px 12px;font-weight:800}.install-dismiss{background:transparent;border:none;color:var(--muted);font-size:.78rem}.match-header{display:flex;flex-direction:column;gap:8px}.abandon-btn{align-self:flex-end}.field-help{font-size:.8rem;line-height:1.4;color:var(--muted);margin:0 0 4px}.field-help strong{color:var(--text)}.shot-bubble.is-counter{background:var(--amber);color:#2a1d00;box-shadow:0 0 0 2px #fff,0 2px 8px #0006}.clash{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.clash-side{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg);border:2px solid transparent;transition:all .2s ease}.clash-player{justify-content:flex-end;animation:slide-in-left .3s ease}.clash-opp{justify-content:flex-start;animation:slide-in-right .3s ease}.clash-icon{font-size:1.5rem}.clash-name{font-weight:800;font-size:.85rem}.clash-side.is-win{border-color:var(--win);background:#3ecf7a26;transform:scale(1.06)}.clash-x{font-size:1.4rem;animation:clash-pulse .4s ease}@keyframes slide-in-left{0%{transform:translate(-30px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-in-right{0%{transform:translate(30px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes clash-pulse{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.5) rotate(10deg)}to{transform:scale(1)}}.clash--kill_player,.clash--kill_opp{border-color:var(--amber);box-shadow:0 0 0 2px #eba83466}.rally-status{display:flex;flex-direction:column;gap:6px}.rally-meter{position:relative;height:14px;background:var(--bg);border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;overflow:hidden}.rally-fill{height:100%;transition:width .3s ease}.rally-fill--opp{background:linear-gradient(90deg,var(--lose),#ff9a9a);margin-left:auto;border-radius:999px 0 0 999px}.rally-fill--player{background:linear-gradient(90deg,#7fffb0,var(--win));border-radius:0 999px 999px 0}.rally-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--muted);transform:translate(-50%);z-index:1}.rally-info{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}.rally-event{font-weight:800;color:var(--amber-light)}.read-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px dashed var(--amber);border-radius:12px;padding:10px 14px;font-size:.9rem}.read-label{color:var(--muted)}.read-value{font-weight:800;color:var(--amber-light);font-size:1.05rem}.read-rel{margin-left:auto;font-size:.78rem;color:var(--muted)}.action-btn{position:relative}.action-btn.is-recommended{border-color:var(--amber);box-shadow:0 0 0 2px #eba83466}.action-counter{position:absolute;top:-9px;right:8px;background:var(--amber);color:#2a1d00;font-size:.68rem;font-weight:800;padding:2px 7px;border-radius:999px}.help-card{font-size:.85rem}.help-card p{margin:0 0 8px}.help-cycle{margin:0 0 8px;padding-left:18px;display:grid;gap:3px}.link-help{background:none;border:none;color:var(--amber-light);text-decoration:underline;font-size:.82rem;align-self:center}.point-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:var(--radius);pointer-events:none;z-index:5;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.point-overlay.point-win,.point-overlay.game-win{background:#1496509e}.point-overlay.point-lose,.point-overlay.game-lose{background:#c828289e}.point-overlay.kill-win{background:#eba834b3}.point-overlay.kill-lose{background:#a01e1eb3}.kill-win .overlay-title,.kill-lose .overlay-title{font-size:3.2rem;color:#fff}.overlay-title{font-size:2.6rem;font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 22px rgba(0,0,0,.4);animation:punch .45s cubic-bezier(.2,1.4,.4,1)}.game-win .overlay-title,.game-lose .overlay-title{font-size:3rem}.overlay-sub{font-size:.95rem;font-weight:700;color:#fff;background:#00000059;padding:3px 12px;border-radius:999px}@keyframes punch{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.confetti span{position:absolute;top:-12px;left:calc(8% + (var(--i) * 7.5%));width:9px;height:14px;border-radius:2px;background:hsl(calc(var(--i) * 40),90%,60%);animation:fall 1.1s ease-in forwards;animation-delay:calc(var(--i) * .03s);transform:rotate(calc(var(--i) * 30deg))}@keyframes fall{to{transform:translateY(220px) rotate(420deg);opacity:0}}.skillpoints-banner{background:#eba83426;border:1px solid var(--amber);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:.88rem}.skillpoints-pill{background:#eba83426;border:1px solid var(--amber);border-radius:999px;padding:5px 12px;font-size:.8rem;color:var(--amber-light);font-weight:700}.reward-levelup{font-size:1.2rem;color:var(--amber-light)}.dev-toggle{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;color:var(--muted);margin-top:2px;cursor:pointer}.dev-toggle input{width:16px;height:16px;accent-color:var(--amber)}@media (min-width: 480px){.onboarding-grid{grid-template-columns:200px 1fr;align-items:start}.home-grid{grid-template-columns:1fr 1.2fr;align-items:start}.home-actions{grid-template-columns:1.4fr 1fr}}