:root{color:#e5e7eb;background:#090f1b;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button,select,input{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}.app-shell{width:min(1800px,100%);margin:0 auto;padding:18px}.app-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.mode-tabs{display:flex;gap:4px;padding:4px;border:1px solid #334155;background:#111827;border-radius:6px}.mode-tab{min-height:34px;border:1px solid transparent;border-radius:3px;background:transparent;padding:6px 12px;color:#94a3b8;cursor:pointer;font-weight:700}.mode-tab:hover{color:#e2e8f0;background:#1e293b}.mode-tab--active{border-color:#38bdf8;background:#075985;color:#f0f9ff}h1,h2,p{margin:0}h1{font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.03em}.eyebrow{color:#38bdf8;font:700 .72rem ui-monospace,monospace;letter-spacing:.12em;margin-bottom:4px}.result-chip{display:flex;gap:10px;align-items:baseline;border:1px solid #334155;background:#111827;padding:8px 12px;border-radius:4px}.result-chip strong{color:#facc15}.result-chip span{font-family:ui-monospace,monospace}.build-workflow,.watch-workflow,.build-workflow__row{display:grid;gap:16px}.build-workflow__row--formations,.build-workflow__row--synergy,.build-workflow__row--roster,.identity-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.build-workflow__row--formations>div,.identity-selector__group,.roster-panel,.matchup-indicators,.synergy-readout,.save-load-panel,.breakdown-panel{min-width:0;border:1px solid #334155;background:#0f172a;border-radius:6px}.build-workflow__row--formations>div{padding:12px}.build-workflow h2,.build-workflow h3,.breakdown-panel h2{font-size:1rem}.formation-picker{display:grid;grid-template-columns:auto minmax(140px,220px);align-items:center;gap:8px;margin:10px 0;color:#94a3b8;font:700 .72rem ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}.formation-picker select,.save-load-panel input{min-height:36px;border:1px solid #475569;border-radius:3px;background:#020617;padding:6px 8px;color:#e2e8f0;font:inherit;letter-spacing:normal;text-transform:none}.formation-board{position:relative;min-height:260px;overflow:hidden;border:1px solid #334155;border-radius:4px;background:linear-gradient(90deg,transparent 49.75%,#334155 49.75%,#334155 50.25%,transparent 50.25%),repeating-linear-gradient(0deg,#071624 0,#071624 25px,#091a2a 25px,#091a2a 50px)}.formation-board:before{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:1px dashed #334155;pointer-events:none}.formation-board__token{position:absolute;z-index:1;min-width:58px;transform:translate(-50%,-50%);border:1px solid #64748b;border-radius:999px;background:#1e293b;padding:4px 8px;cursor:pointer;text-align:center;box-shadow:0 3px 10px #0206178c}.formation-board--offense .formation-board__token{border-color:#2563eb;background:#172554}.formation-board--defense .formation-board__token{border-color:#dc2626;background:#3f101b}.formation-board__token--selected{outline:2px solid #facc15;outline-offset:2px}.formation-board__token--swappable,.formation-board__token--drop-target{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf84d}.formation-board__slot,.formation-board__name{display:block;line-height:1.15}.formation-board__slot{color:#94a3b8;font:700 .59rem ui-monospace,monospace}.formation-board__name{max-width:72px;overflow:hidden;color:#f8fafc;font-size:.7rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.matchup-indicators{overflow-x:auto}.matchup-indicators__header,.synergy-readout__header,.roster-panel__header,.breakdown-panel__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid #334155;background:#111827}.matchup-indicators table{width:100%;min-width:640px;border-collapse:collapse;font-size:.78rem}.matchup-indicators th,.matchup-indicators td{padding:8px 10px;border-bottom:1px solid #1e293b;text-align:left}.matchup-indicators th{color:#94a3b8;font:700 .65rem ui-monospace,monospace;text-transform:uppercase}.matchup-indicators small,.roster-panel__header span,.synergy-item span{color:#94a3b8}.matchup-indicators__edge--offense{color:#4ade80}.matchup-indicators__edge--defense{color:#fb7185}.synergy-readout ul,.roster-panel__list,.save-load-panel__list,.breakdown-list{margin:0;padding:0;list-style:none}.synergy-readout__empty,.save-load-panel__empty,.breakdown-panel__empty{padding:12px;color:#94a3b8}.synergy-item{padding:10px 12px;border-bottom:1px solid #1e293b}.synergy-item__row{display:flex;justify-content:space-between;gap:8px}.synergy-item p{margin-top:4px;color:#cbd5e1;font-size:.78rem}.synergy-item__next{color:#94a3b8!important;font:.68rem ui-monospace,monospace}.identity-selector__group{overflow:hidden}.identity-selector__group>h3{padding:10px 12px;border-bottom:1px solid #334155;background:#111827}.identity-selector__options{display:grid;gap:8px;padding:10px}.identity-option{display:grid;grid-template-columns:auto 1fr;gap:8px;border:1px solid #334155;border-radius:4px;background:#111827;padding:9px;cursor:pointer}.identity-option:hover{border-color:#64748b}.identity-option--selected{border-color:#38bdf8;background:#082f49}.identity-option input,.trait-chip input,.debug-overlay-panel input{accent-color:#38bdf8}.identity-option strong{display:block}.identity-option p{margin-top:3px;color:#cbd5e1;font-size:.76rem;line-height:1.35}.identity-option__fit{color:#7dd3fc!important;font-weight:800}.identity-option__missing{color:#fbbf24!important}.roster-panel{overflow:hidden}.roster-panel__list{display:grid;gap:8px;padding:10px}.roster-card{display:grid;gap:8px;border:1px solid #334155;border-radius:4px;background:#111827;padding:9px}.roster-card__identity{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.roster-card__meta{color:#94a3b8;font:.68rem ui-monospace,monospace}.roster-card__attributes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0}.roster-card__attributes div{min-width:0;border-radius:3px;background:#020617;padding:4px;text-align:center}.roster-card__attributes dt{overflow:hidden;color:#94a3b8;font:.54rem ui-monospace,monospace;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.roster-card__attributes dd{margin:2px 0 0;color:#f8fafc;font-size:.76rem;font-weight:800}.roster-card__traits{display:flex;flex-wrap:wrap;gap:5px;min-width:0;margin:0;padding:0;border:0}.roster-card__traits legend{width:100%;margin-bottom:2px;color:#94a3b8;font:700 .65rem ui-monospace,monospace;text-transform:uppercase}.trait-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #475569;border-radius:999px;background:#020617;padding:3px 7px;color:#cbd5e1;cursor:pointer;font-size:.7rem}.trait-chip--active{border-color:#38bdf8;background:#0c4a6e;color:#f0f9ff}.trait-chip:has(input:disabled){cursor:not-allowed;opacity:.45}.trait-chip small{color:#94a3b8;font-size:.58rem;text-transform:uppercase}.save-load-panel{padding:12px}.save-load-panel__form{display:flex;gap:8px;margin-top:8px}.save-load-panel__form label,.save-load-panel__form input{flex:1}.save-load-panel__error{margin-top:8px;color:#fda4af}.save-load-panel__status{margin-top:8px;color:#86efac}.save-load-panel__list{display:grid;gap:6px;margin-top:10px}.save-load-panel__list li{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #1e293b;padding-top:7px;font-size:.78rem}.save-load-panel__actions{display:flex;gap:6px}.build-workflow__run{display:flex;justify-content:end}.watch-workflow__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.debug-overlay-panel{display:flex;align-items:start;gap:8px}.debug-overlay-panel__toggle{border:1px solid #475569;border-radius:3px;background:#111827;padding:6px 9px;color:#94a3b8;cursor:pointer;font:700 .68rem ui-monospace,monospace;text-transform:uppercase}.debug-overlay-panel .overlay-bar{flex:1;margin-bottom:0}.breakdown-panel{overflow:hidden}.breakdown-panel__header span{color:#facc15;font:.72rem ui-monospace,monospace}.breakdown-list__item{border-bottom:1px solid #1e293b}.breakdown-list__scrub{display:grid;grid-template-columns:52px 1fr;gap:8px;width:100%;border:0;background:transparent;padding:10px 12px;color:inherit;cursor:pointer;text-align:left}.breakdown-list__scrub:hover{background:#172554}.breakdown-list__item details{margin:0 12px 10px 72px;color:#cbd5e1;font-size:.76rem}.breakdown-list__item summary{color:#facc15;cursor:pointer}.breakdown-list__traits{margin-top:8px;border-left:2px solid #38bdf8;padding-left:8px}.breakdown-list__traits p,.breakdown-list__traits ul{margin:4px 0}.breakdown-list__traits ul{padding-left:16px}.setup-bar,.overlay-bar,.transport{background:#111827;border:1px solid #334155}.setup-bar{display:grid;grid-template-columns:minmax(110px,.7fr) 1fr 1fr auto;gap:10px;align-items:end;padding:12px;margin-bottom:8px}.setup-bar label{display:grid;gap:4px;color:#94a3b8;font-size:.76rem;font-weight:700;text-transform:uppercase}.setup-bar input,.setup-bar select{width:100%;min-height:40px;border:1px solid #475569;border-radius:3px;background:#0f172a;padding:7px 9px}.button{min-height:38px;border:1px solid #64748b;border-radius:3px;background:#1e293b;padding:7px 12px;cursor:pointer}.button:hover{background:#334155}.button--run{min-height:40px;background:#0369a1;border-color:#38bdf8;font-weight:800}.button--run:hover{background:#075985}.overlay-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:9px 12px;margin-bottom:12px;font-size:.82rem}.overlay-bar>span{color:#94a3b8;font:700 .72rem ui-monospace,monospace;text-transform:uppercase}.overlay-bar label{display:flex;align-items:center;gap:5px;cursor:pointer}.overlay-bar input{accent-color:#38bdf8;width:16px;height:16px}.playback-grid{display:grid;grid-template-columns:minmax(680px,1050px) minmax(380px,1fr);gap:16px;align-items:start}.field-panel{min-width:0}.canvas-wrap{position:relative;background:#020617;border:1px solid #475569;overflow:hidden}.field-canvas{display:block;width:100%;aspect-ratio:55 / 40;touch-action:none}.field-legend{position:absolute;left:8px;bottom:8px;display:flex;flex-wrap:wrap;gap:8px;background:#020617db;padding:5px 7px;font:.66rem ui-monospace,monospace;pointer-events:none}.field-legend span{display:flex;align-items:center;gap:4px}.dot{display:inline-block;width:9px;height:9px;border:1px solid white;border-radius:50%}.dot--offense{background:#2563eb}.dot--defense{background:#dc2626}.line{width:17px;border-top:2px solid}.line--intended{border-top-style:dashed;border-color:#fff}.line--actual{border-color:#22d3ee}.contest-tooltip{position:absolute;z-index:4;width:238px;border:1px solid #facc15;background:#020617f5;padding:8px;box-shadow:0 8px 22px #020617;pointer-events:none;font-size:.73rem}.contest-tooltip strong,.contest-tooltip span{display:block}.contest-tooltip span{color:#cbd5e1;margin-top:3px}.contest-tooltip ul{margin:6px 0 0;padding-left:16px;columns:2}.contest-tooltip b{color:#facc15}.transport{display:grid;gap:10px;padding:10px;border-top:0}.transport__buttons,.transport__readout{display:flex;align-items:center;gap:8px}.transport__readout{justify-content:space-between;color:#cbd5e1;font-family:ui-monospace,monospace}.transport__readout strong{color:#fff}.scrubber input{width:100%;accent-color:#38bdf8}.speed-control{display:flex;gap:5px;align-items:center;border:0;padding:0;margin:0}.speed-control legend{float:left;margin-right:9px;color:#94a3b8;font:700 .72rem ui-monospace,monospace;text-transform:uppercase}.speed-button{flex:1;border:1px solid #475569;background:#0f172a;padding:5px 2px;border-radius:2px;cursor:pointer;font-size:.78rem}.speed-button--active{color:#082f49;background:#38bdf8;border-color:#7dd3fc;font-weight:800}.event-panel{height:min(82vh,900px);min-height:480px;display:grid;grid-template-rows:auto 1fr;border:1px solid #334155;background:#0f172a;overflow:hidden}.event-panel__header{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border-bottom:1px solid #334155;background:#111827}.event-panel__header h2{font-size:1rem}.event-panel__header span{color:#94a3b8;font:.72rem ui-monospace,monospace}.event-log{overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0;list-style:none}.event-log__item{border-bottom:1px solid #1e293b;padding:3px}.event-log__item--active{background:#172554;box-shadow:inset 3px 0 #38bdf8}.event-log__scrub{display:grid;grid-template-columns:48px 1fr;gap:8px;width:100%;border:0;background:transparent;padding:7px;text-align:left;cursor:pointer;font-size:.78rem}.event-log__scrub:hover{background:#3341558c}.event-log__time{color:#38bdf8;font-family:ui-monospace,monospace}.event-log details{margin:0 7px 7px 63px;font-size:.72rem}.event-log summary{color:#facc15;cursor:pointer}.factor-list{margin:5px 0 0;padding:5px 7px;list-style:none;background:#020617}.factor-list li{display:grid;grid-template-columns:1fr auto 70px;gap:6px;padding:2px 0}.factor-list small{color:#64748b;text-align:right}.factor--positive{color:#4ade80}.factor--negative{color:#fb7185}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1100px){.setup-bar{grid-template-columns:1fr 1fr}.playback-grid{grid-template-columns:1fr}.field-canvas{max-height:none}.event-panel{height:60vh;min-height:400px}.build-workflow__row--formations,.build-workflow__row--synergy,.build-workflow__row--roster,.identity-selector{grid-template-columns:1fr}}@media(max-width:520px){.app-shell{padding:9px}.app-header{align-items:start;flex-direction:column}.result-chip{flex-direction:column;gap:1px}.setup-bar{grid-template-columns:1fr}.transport__buttons{display:grid;grid-template-columns:1fr 1fr}.event-log details{margin-left:12px}.mode-tabs{width:100%}.mode-tab{flex:1}.formation-board{min-height:220px}.formation-board__token{min-width:50px;padding:3px 5px}.formation-board__name{max-width:58px;font-size:.63rem}.formation-picker{grid-template-columns:1fr}.formation-picker select{width:100%}.roster-card__identity,.save-load-panel__list li,.watch-workflow__toolbar{align-items:start;flex-direction:column}.roster-card__attributes{grid-template-columns:repeat(3,minmax(0,1fr))}.save-load-panel__form,.debug-overlay-panel{align-items:stretch;flex-direction:column}.save-load-panel__form .button,.build-workflow__run .button{width:100%}.build-workflow__run{display:block}.breakdown-list__item details{margin-left:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}