:root{color-scheme:dark;--bg:#080b10;--panel:#11161e;--panel2:#171d27;--line:#27303d;--text:#edf2f7;--muted:#93a1b2;--accent:#7cf0c5;--accent2:#57a8ff;--danger:#ff7c8e;--warn:#ffc86b;font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,#152436 0,transparent 34rem),var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}button,input,textarea,select{border:1px solid var(--line);border-radius:.65rem}button{background:var(--accent);color:#06130f;padding:.68rem 1rem;font-weight:750;cursor:pointer;transition:transform .15s,filter .15s}button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent2) 60%,transparent);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.42}.secondary{background:transparent;color:var(--text)}.compact{padding:.4rem .7rem}.full{width:100%}.masthead{height:4.2rem;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5vw,4rem);border-bottom:1px solid var(--line);background:#080b10d9;backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.brand{color:var(--text);font-weight:800;text-decoration:none;letter-spacing:-.02em}.brand span{display:inline-grid;place-items:center;width:2rem;height:2rem;margin-right:.55rem;border:1px solid #477063;border-radius:.5rem;color:var(--accent);font-size:.72rem}.connection-state{display:flex;gap:.55rem;align-items:center;color:var(--muted);font-size:.85rem}.dot{width:.55rem;height:.55rem;border-radius:50%;background:#586372;display:inline-block}.dot.live{background:var(--accent);box-shadow:0 0 .75rem #7cf0c580}main{max-width:1240px;margin:auto;padding:clamp(1.25rem,4vw,3.5rem)}.hero{max-width:760px;margin:2rem 0 2.5rem}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:var(--accent);font-size:.72rem;font-weight:800}.hero h1{font-size:clamp(2.5rem,8vw,5rem);letter-spacing:-.065em;line-height:.95;margin:.3rem 0 1.2rem}.hero>p:last-child{color:#b6c1ce;font-size:clamp(1rem,2.4vw,1.25rem);max-width:690px}.status{padding:.8rem 1rem;border-radius:.7rem;margin-bottom:1.25rem;border:1px solid}.status.info{background:#142131;border-color:#263d56}.status.success{background:#10271f;border-color:#245843;color:#b7f5dc}.status.error{background:#30161c;border-color:#69303c;color:#ffd0d6}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.card{background:linear-gradient(145deg,#131923,#0e131b);border:1px solid var(--line);border-radius:1rem;padding:clamp(1rem,3vw,1.5rem);box-shadow:0 1.2rem 3rem #0004}.card.combat{grid-column:1/-1}.card-heading{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.2rem}.card-heading h2{margin:0;font-size:1.16rem}.card-heading p{margin:.2rem 0 0;color:var(--muted);font-size:.86rem}.step{font:700 .68rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent);border:1px solid #345d51;border-radius:1rem;padding:.42rem}form{display:grid;gap:.62rem;margin:0 0 1rem}label,legend{font-size:.8rem;color:#c3ccd7;font-weight:700}input,textarea,select{width:100%;background:#090d13;color:var(--text);padding:.67rem .72rem}input::placeholder{color:#5e6b7b}.input-action{display:grid;grid-template-columns:1fr auto;gap:.5rem}.button-row{display:flex;gap:.6rem}.button-row>*{flex:1}.state-box,.empty,.profile,.match-summary,.replay-round{border:1px dashed #34404e;border-radius:.7rem;padding:1rem;margin-bottom:1rem;color:var(--muted)}.state-box{display:grid;grid-template-columns:auto 1fr;column-gap:.65rem;align-items:center}.state-box small{grid-column:2}.state-box.queued{border-style:solid;border-color:#715b2d}.state-box.queued .dot{background:var(--warn)}.state-box.matched{border-style:solid;border-color:#2e6e59}.state-box.matched .dot{background:var(--accent)}.profile{display:flex;align-items:center;gap:1rem;color:var(--text)}.profile img{width:4rem;height:4rem;object-fit:cover;border-radius:50%;background:var(--panel2)}.profile strong,.profile small{display:block}.profile small{color:var(--muted);overflow-wrap:anywhere}.muted{color:var(--muted);font-weight:400}fieldset{border:0;padding:0;margin:0}.moves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;margin-top:.5rem}.move label{display:block;margin-bottom:.25rem}.match-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;color:var(--text)}.stat{background:#0a0f16;padding:.75rem;border-radius:.55rem}.stat small,.stat strong{display:block}.stat small{color:var(--muted)}.replay-heading{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem}.replay-heading h3{font-size:1rem}.replay-round{color:var(--text)}.replay-round summary{cursor:pointer;font-weight:750}.events{margin:.7rem 0 0;padding-left:1.2rem;color:#bcc6d2;font: .8rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.future{margin:1rem 0;padding:1.2rem;color:var(--muted)}.future h2{color:var(--text);font-size:1rem}dialog{width:min(580px,calc(100% - 2rem));border:1px solid #3a4656;border-radius:1rem;background:#10161e;color:var(--text);padding:0;box-shadow:0 2rem 7rem #000}dialog::backdrop{background:#020408d9;backdrop-filter:blur(5px)}.dialog-content{padding:1.5rem}.dialog-content h2{margin-top:0}.warning{border-left:3px solid var(--warn);padding:.65rem .8rem;background:#2c2415;color:#ffe4ac}#issued-key{resize:none;overflow-wrap:anywhere;margin:.35rem 0 1rem}
@media(max-width:760px){.grid{grid-template-columns:1fr}.card.combat{grid-column:auto}.moves{grid-template-columns:repeat(2,minmax(0,1fr))}.match-summary{grid-template-columns:repeat(2,1fr)}.masthead{position:static}.input-action{grid-template-columns:1fr}.button-row{flex-direction:column}}
.observer-arena{margin-top:1rem;border:1px solid #3a263d;border-radius:1rem;padding:clamp(1rem,3vw,1.8rem);background:radial-gradient(circle at 15% 35%,#4a101d55,transparent 35%),radial-gradient(circle at 85% 35%,#102d5c66,transparent 35%),#090912;box-shadow:0 1.5rem 4rem #0008;overflow:hidden}.arena-heading{display:flex;justify-content:space-between;gap:1rem;align-items:end}.arena-heading h2{margin:.1rem 0;font-size:clamp(1.5rem,4vw,2.4rem)}.arena-heading>p,.observer-status{color:var(--muted)}.observer-load-actions{display:grid;grid-template-columns:minmax(12rem,1fr) auto auto auto;gap:.5rem}.observer-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.8rem 0}.observer-toolbar output{margin-left:auto;font:700 .78rem ui-monospace,monospace}.observer-stage{position:relative;display:grid;grid-template-columns:1fr minmax(4rem,10%) 1fr;gap:1rem;align-items:center;min-height:25rem;margin:1rem 0;border:1px solid #452740;border-radius:1rem;padding:clamp(1rem,4vw,3rem);background:linear-gradient(90deg,#320d18aa,transparent 42%,transparent 58%,#0c2855aa),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px),#080910}.fighter{text-align:center;position:relative}.fighter.beta{direction:rtl}.avatar-shell{width:clamp(6rem,15vw,10rem);aspect-ratio:1;margin:auto;border-radius:1.3rem;display:grid;place-items:center;overflow:hidden;background:#121019;border:2px solid #ff385c;box-shadow:0 0 2rem #ff274344}.beta .avatar-shell{border-color:#429cff;box-shadow:0 0 2rem #2788ff44}.avatar-shell>*{grid-area:1/1;width:100%;height:100%}.avatar-shell img{object-fit:cover;position:relative}.avatar-fallback{display:grid;place-items:center;font-size:clamp(2rem,6vw,4rem);font-weight:900;color:#ff5570}.beta .avatar-fallback{color:#65adff}.fighter h3{direction:ltr;text-transform:uppercase}.meter{direction:ltr;display:grid;grid-template-columns:2rem 1fr 2rem;gap:.4rem;align-items:center;font:700 .7rem ui-monospace,monospace;margin:.35rem auto;max-width:23rem}.meter progress{width:100%;accent-color:#ff385c}.beta .meter.hp progress{accent-color:#429cff}.meter.energy progress{accent-color:#eebd45}.move-chip{direction:ltr;display:inline-block;margin-top:.75rem;padding:.3rem .7rem;border:1px solid #ffffff2b;border-radius:2rem;font:800 .75rem ui-monospace,monospace}.reaction{position:absolute;inset:35% 0 auto;z-index:2;font-weight:1000;font-size:clamp(1rem,4vw,2.3rem);text-shadow:0 0 1rem #ffcf4a}.observer-impact{font:1000 clamp(1.2rem,4vw,3rem)/1 ui-sans-serif;text-align:center;font-style:italic;text-shadow:0 0 1rem currentColor;z-index:2}.impact-hit{color:#ffe469;animation:impact-pop .42s}.impact-block{color:#88d8ff;animation:impact-pop .55s}.impact-wait{color:#7a8390}.fighter.act{animation:lunge .48s}.fighter.beta.act{animation-name:lunge-beta}.fighter.hurt{animation:hurt .42s}.fighter.guard .avatar-shell{animation:guard .5s}.fighter.recover{animation:recover .65s}.observer-log{max-height:12rem;overflow:auto;margin:0;padding:0;list-style-position:inside;color:#aeb8c7;font:.76rem/1.7 ui-monospace,monospace}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes lunge{50%{transform:translateX(12%) scale(1.06)}}@keyframes lunge-beta{50%{transform:translateX(-12%) scale(1.06)}}@keyframes hurt{25%{transform:translateX(-5%) rotate(-2deg);filter:brightness(1.8)}}@keyframes guard{50%{box-shadow:0 0 0 .8rem #75d4ff33,0 0 3rem #75d4ff}}@keyframes recover{50%{transform:translateY(-4%);filter:drop-shadow(0 0 1rem #63ffb9)}}@keyframes impact-pop{50%{transform:scale(1.5) rotate(3deg)}}
@media(max-width:760px){.observer-load-actions{grid-template-columns:1fr 1fr}.observer-load-actions input{grid-column:1/-1}.observer-stage{min-height:21rem;padding:1rem .5rem;gap:.25rem}.arena-heading{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}