*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#10151b;--panel:#19212b;--line:#354353;--text:#edf3f9;--muted:#abb9ca;--accent:#b8f46a;--red:#ff929b;--cyan:#7ce5ec}
html,body{margin:0;width:100%;max-width:100%;overflow-x:clip}
body{background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,sans-serif}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a.card,summary{cursor:pointer}
button,select,input{border:1px solid var(--line);border-radius:8px;background:#101820;color:var(--text);padding:9px 12px;min-width:0;max-width:100%}
button:hover,a.card:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
header{border-bottom:1px solid var(--line);padding:16px max(20px,calc((100% - 1280px)/2));display:flex;justify-content:space-between;gap:20px;align-items:center}
nav{display:flex;gap:20px;flex-wrap:wrap}nav a{color:var(--muted);font-size:14px}nav a[aria-current]{color:var(--accent)}
.brand{font-weight:850;letter-spacing:2px}.brand span{color:var(--accent)}
main{max-width:1320px;margin:auto;padding:28px 20px;min-width:0}h1{font-size:clamp(28px,3vw,38px);line-height:1.25;margin:6px 0 10px;letter-spacing:-1px}h2{font-size:22px;margin:8px 0 12px;line-height:1.4}p{margin:8px 0}
.eyebrow{font-size:13px;letter-spacing:1.5px;color:var(--accent);font-weight:750}.muted,small{color:var(--muted)}.small{font-size:14px}.bad{color:var(--red)!important}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}.card{display:block}.card .number{display:block;font-size:56px;font-weight:850;line-height:1.2;color:var(--accent);margin-bottom:28px}.card p{color:var(--muted)}.card strong{display:block;margin-top:24px;color:var(--accent)}
.layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;margin-top:22px;align-items:start}.layout>*,.training-panel,.feedback-dock{min-width:0;max-width:100%}
.controls{display:grid;gap:14px;align-content:start}.controls label{display:grid;gap:5px;font-size:14px}.controls select{width:100%}.controls .check{display:flex;align-items:center;gap:8px}.check input{width:auto;accent-color:var(--accent)}.controls>*{min-width:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.primary{background:var(--accent);color:#17200f;border-color:var(--accent);font-weight:800}
.stats{display:flex;gap:12px 24px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:14px}.stats b{color:var(--accent);margin-left:5px}
.feedback-dock{position:sticky;top:0;z-index:5;background:var(--panel);padding:12px 0}.state{font-size:14px;color:var(--muted);margin-bottom:12px}.state span{background:#111820;padding:3px 8px;border-radius:5px;overflow-wrap:anywhere}
.arena{position:relative;overflow:hidden;width:100%;border:1px solid #40546a;border-radius:10px;background:#101a24;user-select:none;touch-action:none}
.arena:focus{border-color:var(--accent)}.spatial-arena{height:320px;background-image:linear-gradient(#27364755 1px,transparent 1px),linear-gradient(90deg,#27364755 1px,transparent 1px);background-size:32px 32px}.rhythm-arena{height:125px;display:grid;place-items:center}
#scene{position:absolute;inset:0;pointer-events:none}.next{color:var(--accent);font-size:24px;font-weight:800;text-align:center;pointer-events:none;overflow-wrap:anywhere}.spatial-arena .next{position:absolute;top:12px;left:12px;right:12px;font-size:18px}.board-caption{position:absolute;top:48%;left:10%;right:10%;text-align:center;color:var(--muted);font-size:16px}
.target-zone{position:absolute;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);background:#b8f46a16;color:var(--accent);font-size:14px;border-radius:8px}
.unit-token{position:absolute;display:flex;align-items:center;justify-content:center;border:2px solid var(--cyan);border-radius:50%;background:#16373c;color:#c7faff;font-size:12px;white-space:nowrap}.unit-token.decoy{border-color:var(--red);background:#492730;color:#ffd0d4}
.selection-box{position:absolute;pointer-events:none;border:1px solid var(--cyan);background:#7ce5ec22;z-index:3}[hidden]{display:none!important}
.input-feedback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:14px;min-height:30px}#live{font-family:ui-monospace,monospace;font-size:17px;font-weight:700}#hint{color:var(--accent);overflow-wrap:anywhere}.feedback{min-height:3.2em;font-size:14px;margin:4px 0 10px;overflow-wrap:anywhere}
progress{width:100%;height:6px;accent-color:var(--accent);display:block;margin:8px 0 12px}
.queue{display:flex;flex-wrap:nowrap;gap:8px;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overscroll-behavior-x:contain;contain:inline-size;scrollbar-width:thin;padding:8px 2px 14px;position:relative}
.token{flex:0 0 auto;border:1px solid var(--line);border-radius:7px;padding:8px 10px;text-align:center;color:var(--muted);background:#101820;font-size:14px}.token small{display:block;font-size:12px}.token.current,.cycle-action.current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}.token.done,.cycle-action.done{background:#283b25;color:#c8e3b5}.token.error,.cycle-action.error{border-color:var(--red)}
.overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin-top:18px}.cycle-card{min-width:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:14px}.cycle-card.inactive{opacity:.5}.cycle-card>strong{display:block;margin-bottom:8px;color:var(--cyan)}.cycle-actions{display:flex;gap:4px;flex-wrap:wrap}.cycle-action{font-size:14px;line-height:1.4;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:#111820}.cycle-card>small{display:block;margin-top:8px;font-size:12px}
summary{color:var(--accent);font-size:14px}details{margin:8px 0}.results{font-size:14px}.result{padding:8px 0;border-bottom:1px solid var(--line)}
dialog{width:min(880px,94vw);max-height:88dvh;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text)}dialog::backdrop{background:#000a}.mapping-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.mapping-row{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:12px;align-items:center;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:10px}.mapping-row small{display:block;font-size:12px}.mapping-row input{width:100%;text-transform:uppercase}#settings-status{color:var(--red);font-size:14px}
footer{max-width:1280px;margin:16px auto;padding:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media(max-width:1000px){.overview{grid-template-columns:repeat(3,minmax(0,1fr))}.layout{grid-template-columns:minmax(0,220px) minmax(0,1fr)}}
@media(max-width:760px){header{align-items:flex-start;flex-direction:column;gap:12px}main{padding:22px 14px}.layout,.cards{grid-template-columns:minmax(0,1fr)}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls>p,.controls>details,.controls>button{grid-column:1/-1}.panel{padding:16px}.overview{grid-template-columns:repeat(2,minmax(0,1fr))}.spatial-arena{height:280px}.mapping-fields{grid-template-columns:minmax(0,1fr)}.next{font-size:21px}.stats{gap:8px 16px}}
@media(max-height:650px){.feedback-dock{position:static}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Wuthering custom builder: wrap long names, quick swaps and sequence tokens. */
.wuthering-page .overview{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:start}
.wuthering-page .cycle-card{padding:10px;overflow-wrap:anywhere}
.wuthering-page .cycle-card>strong{white-space:normal;overflow-wrap:anywhere}
.wuthering-page .cycle-actions{display:flex;flex-wrap:wrap;min-width:0;max-width:100%}
.wuthering-page .cycle-action{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:clamp(.875rem,.8rem + .2vw,1rem)}
.wuthering-page .queue{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px}
.wuthering-page .token{flex:0 0 auto;min-width:72px;white-space:nowrap;font-size:.9rem}
.wuthering-page #party,.wuthering-page #task,.wuthering-page .state{overflow-wrap:anywhere}
.cycle-files{min-width:0;border-top:1px solid var(--line);padding-top:16px}
.file-buttons{display:grid;gap:8px}.file-buttons button{width:100%}
#cycle-builder{width:min(960px,95vw);max-height:90dvh;overflow-y:auto}
#builder-form{min-width:0}
.builder-label,.builder-party label,.builder-segment>label{display:grid;gap:6px;font-size:14px}
.builder-label{margin:12px 0}.builder-party{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.builder-party>*{min-width:0}.builder-party input,.builder-label input{width:100%}
.builder-toolbar{margin:18px 0;padding:12px;background:#111820;border:1px solid var(--line);border-radius:8px}
#action-palette{margin-top:8px;gap:6px}#action-palette button{font-size:14px;padding:6px 10px}
.builder-segment{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:10px;padding:14px;margin-bottom:12px;border:1px solid var(--line);border-radius:8px;min-width:0}
.builder-segment>.row{grid-column:1/-1}.builder-segment .row button{font-size:14px;padding:5px 10px}
.builder-segment textarea{font:inherit;color:var(--text);background:#101820;border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical;width:100%;min-width:0;max-width:100%}
.builder-segment select{width:100%}.builder-footer{margin-top:14px}
#builder-status{color:var(--red);overflow-wrap:anywhere}
@media(max-width:760px){.controls>.cycle-files{grid-column:1/-1}.builder-party{grid-template-columns:minmax(0,1fr)}.builder-segment{grid-template-columns:minmax(0,1fr)}.wuthering-page .overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.wuthering-page .overview{grid-template-columns:minmax(0,1fr)}}

/* Portrait dimensions are fixed so lazy loading never shifts the active token. */
.wuthering-page .portrait{display:inline-block;width:32px;height:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;background:#253340;border:1px solid var(--line);vertical-align:middle}
.wuthering-page .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;transform:scale(1.75);transform-origin:50% 22%}
.wuthering-page .portrait-fallback{display:grid;place-items:center;font-size:13px;color:var(--muted)}
.wuthering-page .cycle-heading{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:7px;font-size:clamp(.8rem,.75rem + .25vw,1rem)}
.wuthering-page .cycle-heading strong{min-width:0;overflow-wrap:anywhere}
.wuthering-page .queue .portrait{width:26px;height:26px;vertical-align:middle;margin-right:6px}
.wuthering-page .character-preview{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px;color:var(--muted)}
.builder-party select{width:100%;min-width:0}
#example-info a,footer a{text-decoration:underline;text-underline-offset:3px}
.wuthering-page #queue-wrap{max-width:100%;min-width:0}

/* v6: shared alpha notice, portrait pickers and four-mode navigation. */
.alpha-notice{display:flex;gap:10px 20px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:1px solid #74633c;background:#342d1c;color:#f2d593;border-radius:10px;margin-bottom:24px;font-size:14px}
.alpha-notice strong{letter-spacing:1px;white-space:nowrap}
.mode-card-head{display:flex;align-items:center;gap:18px}.mode-card .number{font-size:clamp(22px,3vw,36px);margin:0}
.game-icon{width:72px;height:72px;object-fit:contain;background:#0e141c;border-radius:14px;flex-shrink:0}
.mode-card:last-child{border-style:dashed}.mode-card:last-child p{color:#f2d593}
.cycle-page .field-label{display:grid;gap:6px;font-size:14px}.cycle-page .party-member{display:flex;align-items:center;gap:8px}
.cycle-page .builder-party{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.cycle-page .party-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:66px;text-align:left;font-size:14px}
.cycle-page .range-picker{display:block;min-width:0}.range-picker summary{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px;border-radius:8px;overflow-wrap:anywhere}
.range-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:320px;overflow-y:auto;margin-top:8px}
.portrait-choice{display:flex;align-items:center;gap:6px;text-align:left;font-size:12px;white-space:normal;padding:6px;min-width:0;overflow-wrap:anywhere}
.portrait-choice[aria-pressed=true],.roster-tile[aria-pressed=true]{border-color:var(--accent);background:#293d29;box-shadow:inset 0 0 0 1px var(--accent)}
.segment-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:8px}
.cycle-page .builder-segment{grid-template-columns:minmax(190px,1fr) minmax(0,2fr)}
#roster-dialog{width:min(800px,94vw);max-height:88dvh;overflow:auto}
#roster-dialog>label{display:grid;gap:6px}#roster-search{width:100%}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:5px}
.roster-tile{display:flex;align-items:center;flex-direction:column;gap:8px;padding:10px 5px;font-size:13px;min-width:0;overflow-wrap:anywhere}
.cycle-page .roster-tile .portrait{width:52px;height:52px;flex-basis:52px}
.roster-tile small{font-size:10px}.roster-tile:disabled{opacity:.4}
.cycle-page .overview{gap:8px}.cycle-page .cycle-card{min-width:0}
.cycle-page[data-game=endfield] .overview{grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}
.cycle-page[data-game=endfield] .cycle-card{padding:8px}.cycle-page[data-game=endfield] .cycle-heading{font-size:12px}
.cycle-page[data-game=endfield] .cycle-action{font-size:12px}
@media(max-width:760px){header{align-items:flex-start;flex-direction:column}nav{gap:8px 14px}.cycle-page .builder-segment{grid-template-columns:minmax(0,1fr)}.segment-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.game-icon{width:52px;height:52px}.mode-card-head{gap:12px}.roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}