:root{--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--s-8: 64px;--inset: clamp(12px, 2.2vw, 24px);--t-xs: 11px;--t-sm: 13px;--t-md: 15px;--t-lg: 18px;--t-xl: 24px;--t-2xl: 34px;--t-3xl: clamp(44px, 9vw, 86px);--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-pill: 999px;--bg: #06121a;--bg-2: #0b1e29;--panel: rgba(9, 26, 35, .82);--panel-solid: #0d2330;--line: rgba(160, 208, 220, .16);--line-strong: rgba(160, 208, 220, .3);--ink: #e9f4f2;--ink-dim: #9db4bd;--ink-faint: #6c848e;--accent: #4ad9c4;--accent-ink: #04231f;--gold: #f7e04a;--warn: #ff8a5b;--danger: #ff6b6b;--shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);--shadow-sm: 0 6px 20px rgba(0, 0, 0, .4);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{position:relative;width:100%;height:100%;isolation:isolate}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;cursor:pointer}.btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-1);min-height:52px;padding:var(--s-3) var(--s-5);border:1px solid var(--line-strong);border-radius:var(--r-md);background:#ffffff0a;color:var(--ink);text-align:left;transition:background .16s ease,border-color .16s ease,transform .08s ease}.btn:hover{background:#ffffff17;border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn strong{font-size:var(--t-md);font-weight:650;letter-spacing:.01em}.btn span{font-size:var(--t-sm);color:var(--ink-dim)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn--primary span{color:#04231fb8}.btn--primary:hover{background:#6ce9d6;border-color:#6ce9d6}.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink-dim)}.btn--ghost:hover{color:var(--ink)}.btn--wide{width:100%;align-items:center;text-align:center}.icon-btn{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line);border-radius:var(--r-md);background:#ffffff0d;font-size:var(--t-md);line-height:1;transition:background .16s ease,border-color .16s ease}.icon-btn:hover{background:#ffffff1f;border-color:var(--accent)}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:var(--inset);background:radial-gradient(120% 110% at 50% 0%,#06121a9e,#040b10f0);backdrop-filter:blur(3px);overflow-y:auto;z-index:10}.overlay[hidden]{display:none}.screen{width:min(1080px,100%);display:flex;flex-direction:column;gap:var(--s-6);animation:rise .28s ease both}.screen[hidden]{display:none}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.screen--modal{align-items:center}.screen__head{display:flex;align-items:flex-start;gap:var(--s-4)}.screen__title{margin:0;font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em}.screen__sub{margin:var(--s-1) 0 0;font-size:var(--t-sm);color:var(--ink-dim);max-width:62ch}.stack{display:flex;flex-direction:column;gap:var(--s-4)}.stack--center{align-items:center;text-align:center}.eyebrow{margin:0;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.title{margin:0;font-size:var(--t-3xl);font-weight:800;letter-spacing:-.045em;line-height:.94}.title span{color:var(--accent)}.lede{margin:0;max-width:54ch;font-size:var(--t-lg);color:var(--ink-dim)}.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3);width:min(760px,100%);margin-top:var(--s-2)}.profile-chip{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}.profile-chip__label{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.profile-chip__input{width:150px;padding:var(--s-2) var(--s-3);border:1px solid transparent;border-radius:var(--r-pill);background:#ffffff0f;color:var(--ink);font:inherit;font-size:var(--t-sm)}.profile-chip__input:focus{outline:none;border-color:var(--accent)}.profile-chip__elo{padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:#4ad9c429;color:var(--accent);font-family:var(--mono);font-size:var(--t-sm);font-weight:600}.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));grid-auto-rows:1fr;gap:var(--s-3)}.char{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.char:hover{transform:translateY(-2px);background:#102a37eb}.char[aria-checked=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow-sm)}.char__head{display:flex;align-items:center;gap:var(--s-3)}.char__swatch{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;line-height:1}.char__id{display:flex;flex-direction:column;gap:2px;min-width:0}.char__name{font-size:var(--t-md);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.char__type{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.char__blurb{margin:0;font-size:var(--t-sm);color:var(--ink-dim);flex:1}.char__stats{display:grid;grid-template-columns:84px 1fr 20px;align-items:center;gap:var(--s-1) var(--s-2);margin:0}.char__stats dt{font-size:var(--t-xs);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}.char__stats dd{margin:0;height:6px;border-radius:var(--r-pill);background:#ffffff14;overflow:hidden}.char__stats dd i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#8ff3e2)}.char__stats .val{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-dim);text-align:right}.char__hand{position:absolute;top:var(--s-4);right:var(--s-4);font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}.select-footer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-4);padding-top:var(--s-2);border-top:1px solid var(--line)}.select-footer .btn--primary{flex:0 0 auto;min-width:220px}.field-row{display:flex;flex-wrap:wrap;gap:var(--s-3);flex:1 1 420px}.field-row--tight{gap:var(--s-2);flex:initial}.field{display:flex;flex-direction:column;gap:var(--s-1);flex:1 1 140px;min-width:0}.field--switch{flex-direction:row;align-items:center;justify-content:space-between}.field__label{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.field__input{width:100%;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-md);background:#ffffff0d;color:var(--ink);font:inherit;font-size:var(--t-sm)}.field__input:focus{outline:2px solid var(--accent);outline-offset:1px}.field__input--code{width:130px;flex:0 0 130px;font-family:var(--mono);font-size:var(--t-lg);letter-spacing:.24em;text-transform:uppercase;text-align:center}.card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}.card__title{margin:0;font-size:var(--t-lg);font-weight:650}.card__body{margin:0;font-size:var(--t-sm);color:var(--ink-dim);flex:1}.card--wide{grid-column:1 / -1}.online-grid,.howto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-4)}.bullets{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--t-sm);color:var(--ink-dim)}.keylist{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0;font-size:var(--t-sm)}.keylist dt{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink);background:#ffffff12;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px var(--s-2);white-space:nowrap;justify-self:start}.keylist dd{margin:0;color:var(--ink-dim)}.lobby-status{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}.lobby-status__line{margin:0;font-weight:600}.lobby-status__sub{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink-dim)}.lobby-status .btn{margin-left:auto}.spinner{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}.table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}.table th,.table td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--line)}.table thead th{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;background:#ffffff08}.table tbody tr:last-child td{border-bottom:none}.table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}.table tr.is-me{background:#4ad9c41a}.table tr.is-me td:first-child{box-shadow:inset 2px 0 0 var(--accent)}.table--stats{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}.table__empty{padding:var(--s-6);text-align:center;color:var(--ink-dim);font-size:var(--t-sm)}.modal{width:min(460px,100%);display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--panel-solid);box-shadow:var(--shadow-lg)}.modal--wide{width:min(560px,100%)}.modal__title{margin:0;font-size:var(--t-2xl);font-weight:750;letter-spacing:-.02em}.modal__actions{display:flex;gap:var(--s-3)}.modal__actions .btn{flex:1;align-items:center;text-align:center}.result-score{margin:0;font-family:var(--mono);font-size:var(--t-xl);letter-spacing:.04em;color:var(--gold)}.elo-row{display:flex;gap:var(--s-4)}.elo{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:#ffffff0d;border:1px solid var(--line);flex:1}.elo__label{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.elo__value{font-family:var(--mono);font-size:var(--t-xl);font-weight:700}.elo__delta{font-family:var(--mono);font-size:var(--t-md);font-weight:600;margin-left:auto}.elo__delta.up{color:var(--accent)}.elo__delta.down{color:var(--danger)}.hud{position:absolute;inset:0;pointer-events:none;z-index:5;padding:calc(var(--inset) + env(safe-area-inset-top,0px)) calc(var(--inset) + env(safe-area-inset-right,0px)) calc(var(--inset) + env(safe-area-inset-bottom,0px)) calc(var(--inset) + env(safe-area-inset-left,0px));display:grid;grid-template-rows:auto 1fr auto;gap:var(--s-4)}.hud[hidden]{display:none}.hud button{pointer-events:auto}.hud__top{display:flex;align-items:flex-start;gap:var(--s-3)}.scorebug{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);background:#06141bdb;backdrop-filter:blur(8px);overflow:hidden;box-shadow:var(--shadow-sm)}.scorebug__row{display:grid;grid-template-columns:14px 22px minmax(96px,1fr) auto auto;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);font-size:var(--t-sm)}.scorebug__row+.scorebug__row{border-top:1px solid var(--line)}.scorebug__row.is-leading .scorebug__name{color:#fff}.scorebug__serve{width:8px;height:8px;border-radius:50%;background:transparent}.scorebug__row.is-serving .scorebug__serve{background:var(--gold);box-shadow:0 0 8px #f7e04ab3}.scorebug__flag{font-size:15px;line-height:1}.scorebug__name{font-weight:600;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scorebug__sets{display:flex;gap:var(--s-2);font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-dim)}.scorebug__sets b{font-weight:600;min-width:12px;text-align:center}.scorebug__sets b.won{color:var(--ink)}.scorebug__points{min-width:46px;padding:1px var(--s-2);border-radius:var(--r-sm);background:#ffffff14;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;text-align:center}.hud__status{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}.pill{padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:#06141bdb;border:1px solid var(--line);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);backdrop-filter:blur(8px)}.pill--muted{color:var(--ink-dim)}.pill[hidden]{display:none}.hud__call{place-self:center;font-size:clamp(28px,5vw,52px);font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 26px rgba(0,0,0,.8);opacity:0;transform:scale(.9);transition:opacity .18s ease,transform .18s ease}.hud__call.show{opacity:1;transform:scale(1)}.hud__call.out{color:var(--warn)}.hud__call.good{color:var(--accent)}.hud__bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--s-4)}.stamina-group{grid-column:1;display:flex;flex-direction:column;gap:var(--s-2);width:min(220px,34vw)}.stamina{display:flex;flex-direction:column;gap:var(--s-1)}.stamina__name{font-size:var(--t-xs);color:var(--ink-dim);letter-spacing:.06em}.stamina__track{height:6px;border-radius:var(--r-pill);background:#00000080;border:1px solid var(--line);overflow:hidden}.stamina__fill{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#9ef7e6);transition:width .14s linear,background .3s ease}.stamina__fill.low{background:linear-gradient(90deg,var(--warn),#ffc9a8)}.meter{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:#06141bdb;backdrop-filter:blur(8px)}.meter[hidden]{display:none}.meter__label{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.meter__track{position:relative;width:min(260px,46vw);height:12px;border-radius:var(--r-pill);background:#0000008c;border:1px solid var(--line);overflow:hidden}.meter__fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#2f6ea8,var(--gold))}.meter__ideal{position:absolute;top:0;bottom:0;left:86%;width:14%;background:#4ad9c447;border-left:1px solid var(--accent)}.meter__hint{font-size:var(--t-xs);color:var(--ink-dim)}.shotbar{grid-column:3;justify-self:end;display:flex;gap:var(--s-2)}.shotbar__key{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);min-width:54px;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-md);background:#06141bcc;backdrop-filter:blur(8px);transition:border-color .12s ease,background .12s ease}.shotbar__key.is-active{border-color:var(--accent);background:#4ad9c42e}.shotbar__key b{font-family:var(--mono);font-size:var(--t-sm);font-weight:700}.shotbar__key span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}.hud__pause{position:absolute;top:calc(var(--inset) + env(safe-area-inset-top,0px));right:calc(var(--inset) + env(safe-area-inset-right,0px));font-size:var(--t-xs);letter-spacing:.1em}.hud__ping{position:absolute;top:calc(var(--inset) + 48px + env(safe-area-inset-top,0px));right:calc(var(--inset) + env(safe-area-inset-right,0px));padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);background:#06141bcc;border:1px solid var(--line);font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-dim)}.hud__ping[hidden]{display:none}.touch-controls{position:absolute;inset:auto 0 0;height:190px;pointer-events:none;z-index:6}.touch-stick{position:absolute;left:calc(var(--inset) + env(safe-area-inset-left,0px));bottom:calc(var(--inset) + env(safe-area-inset-bottom,0px));width:132px;height:132px;border-radius:50%;border:1px solid var(--line-strong);background:#06141b6b;pointer-events:auto;display:grid;place-items:center;touch-action:none}.touch-stick__knob{width:54px;height:54px;border-radius:50%;background:#4ad9c48c;border:1px solid var(--accent)}.touch-buttons{position:absolute;right:calc(var(--inset) + env(safe-area-inset-right,0px));bottom:calc(var(--inset) + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(3,60px);gap:var(--s-2);pointer-events:auto}.touch-btn{height:52px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:#06141bb3;color:var(--ink);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;touch-action:none}.touch-btn.is-down{background:#4ad9c459}.touch-btn--top{grid-column:span 2;background:#4ad9c438}.toast{position:absolute;left:50%;bottom:calc(var(--inset) + env(safe-area-inset-bottom,0px));transform:translate(-50%);padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);background:#06141bf0;border:1px solid var(--line-strong);font-size:var(--t-sm);box-shadow:var(--shadow-sm);z-index:20}.toast[hidden]{display:none}.toast.error{border-color:var(--danger);color:#ffd7d7}.loading{position:absolute;inset:0;display:grid;place-items:center;gap:var(--s-4);align-content:center;background:var(--bg);z-index:30;transition:opacity .4s ease}.loading[hidden]{display:none}.loading.fade{opacity:0;pointer-events:none}.loading__ball{width:46px;height:46px;border-radius:50%;background:#d8e841;box-shadow:inset -6px -8px #0000001f;animation:bounce .9s cubic-bezier(.5,.05,.5,.95) infinite alternate}@keyframes bounce{0%{transform:translateY(-26px) scale(1)}to{transform:translateY(0) scale(1.08,.92)}}.loading__text{margin:0;font-size:var(--t-sm);color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase}@media(max-width:720px){.hud__bottom{grid-template-columns:1fr;justify-items:stretch}.stamina-group{width:100%}.meter,.shotbar{grid-column:1;justify-self:center}.shotbar{display:none}.screen__title{font-size:var(--t-xl)}.modal{padding:var(--s-5)}}@media(max-height:520px){.stamina-group{display:none}.hud{gap:var(--s-2)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}