/* Fighter selection belongs to the painted Arena; bout HUD styles stay scoped out. */
#game-shell.selecting{--select-ink:#fff1d2;--select-muted:#ccd8c8;--select-gold:#efc66d;--select-line:#cbd9bf38;padding-bottom:0;font-family:'Trebuchet MS',sans-serif}
#game-shell.selecting .masthead{display:flex;gap:16px;margin-bottom:28px}
#game-shell.selecting .game{height:auto;min-height:0;max-height:none;aspect-ratio:auto;width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;isolation:auto}
#game-shell.selecting .game>:not(#overlay){display:none!important}
#game-shell.selecting #overlay{position:static;display:block;inset:auto;overflow:visible;background:none;backdrop-filter:none;padding:0}
#game-shell.selecting #intro{display:block;width:100%;max-width:none;max-height:none;height:auto;overflow:visible;padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:var(--select-ink);text-align:left}
#intro .selection-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:24px}
#intro .selection-heading h2{display:block;margin:0;font:700 clamp(30px,3.4vw,42px)/1.1 Georgia,serif;letter-spacing:-.025em}
#intro .selection-heading p{max-width:430px;margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--select-muted)}
#intro .mode-picker{display:flex;gap:8px;flex:0 1 540px;margin:0;align-self:stretch}
#intro .mode-picker button{flex:1;min-width:0;min-height:62px;padding:10px 12px;border:1px solid var(--select-line);border-radius:10px;background:#203e3c;color:var(--select-ink);font-family:inherit;text-align:left}
#intro .mode-picker button[aria-pressed="true"]{background:var(--select-gold);border-color:transparent;color:#223d34;box-shadow:0 4px 12px #071e1d30}
#intro .mode-picker strong{font:700 19px/1.2 Georgia,serif;display:block}
#intro .mode-picker small{display:block;margin-top:4px;font-size:13px;line-height:1.3}
#intro .selection-layout{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.35fr);grid-template-areas:"spotlight roster" "spotlight moves" "spotlight setup";gap:22px 36px;align-items:start}
#intro .roster-picker{grid-area:roster;min-width:0}
#intro .roster-hint{display:none}
#intro .fighter-spotlight{grid-area:spotlight;position:sticky;top:20px;min-width:0}
#intro .fighter-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 12px}
#intro .fighter-heading h3{font:700 clamp(30px,3.2vw,42px)/1.1 Georgia,serif;letter-spacing:-.025em;margin:0;color:var(--select-gold)}
#intro .fighter-heading p{font-size:15px;line-height:1.3;margin:0;color:var(--select-muted);text-align:right}
#intro .fighter-stage{position:relative;height:360px;overflow:hidden;border-radius:14px;background:#214541 url('assets/home/spotlight-stage.6f08ba3f64527fe0.webp') center 68%/cover}
#intro .fighter-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
#intro .preview-portrait{position:absolute;left:50%;bottom:8%;height:82%;aspect-ratio:1;max-width:95%;transform:translateX(-50%);background-image:url('assets/optimized/portraits.0f0920134db69621.webp');background-size:400% 300%;background-position:0 0;background-repeat:no-repeat}
#intro .preview-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 0 0;min-height:54px}
#intro .preview-tools button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 14px;background:#2c504b;border:0;border-radius:8px;color:var(--select-ink);font:700 14px/1.3 'Trebuchet MS',sans-serif}
#intro .preview-tools button:hover:not(:disabled){background:#3b6258}
#intro .preview-tools button:disabled{opacity:.6;cursor:default}
#intro .preview-tools svg{width:16px;height:16px;fill:currentColor}
#intro #preview-status{flex:1 1 130px;font-size:14px;line-height:1.4;color:var(--select-muted)}
#intro #selected-fighter-summary{margin:12px 0 0;max-width:38ch;font-size:16px;line-height:1.55;color:var(--select-muted)}
#intro .fighter-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;max-height:none;overflow:visible}
#intro .fighter-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:auto;min-height:104px;min-width:0;padding:9px 4px 8px;border:0;border-radius:9px;background:#284a44;color:var(--select-ink);font-family:inherit;box-shadow:none}
#intro .fighter-choice:hover:not(:disabled):not([aria-pressed="true"]){background:#34594e}
#intro .fighter-choice[aria-pressed="true"]{background:#f0c86f;color:#243d32;outline:none;box-shadow:inset 0 0 0 2px #fff2c5}
#intro .fighter-choice:focus-visible{outline:3px solid #fff4bd;outline-offset:3px}
#intro .fighter-choice:disabled{opacity:.42;cursor:default}
#intro .fighter-choice canvas{width:100%;height:49px;max-height:none;object-fit:contain}
#intro .fighter-choice strong{display:flex;align-items:center;justify-content:center;min-height:34px;width:100%;padding:0 2px;font:700 14px/1.2 'Trebuchet MS',sans-serif;text-align:center;white-space:normal;overflow-wrap:normal;letter-spacing:0}
#intro .fighter-choice span,#intro .fighter-choice small,#intro .selection-check{display:none}
#intro .move-guide{grid-area:moves;min-width:0;padding:0}
#intro .move-guide h3{font:700 24px/1.2 Georgia,serif;margin:0 0 14px}
#intro .move-guide dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin:0}
#intro .move-guide dl>div{min-width:0;padding:0 0 12px;border-bottom:1px solid var(--select-line)}
#intro .move-guide dt{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.3}
#intro .move-guide kbd{flex:0 0 auto;min-width:27px;padding:4px 6px;border:0;border-radius:4px;background:#36574d;color:#fff0c6;font:700 12px/1.2 'Trebuchet MS',sans-serif;text-align:center}
#intro .move-guide dd{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--select-muted)}
#intro .move-guide>p{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--select-muted)}
#intro .match-setup{grid-area:setup;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:0;padding-top:18px;border-top:1px solid var(--select-line)}
#intro .opponent-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;min-width:0;flex:1 1 200px;color:var(--select-ink);font-size:14px}
#intro .opponent-choices{display:none}
#intro #opponent-select{display:block;min-width:0;width:160px;min-height:44px;padding:10px;border:1px solid #b9ccb25c;border-radius:7px;background:#294d46;color:var(--select-ink);font:700 14px 'Trebuchet MS',sans-serif}
#intro #shuffle-rivals,#intro #shuffle-teams{min-height:44px;padding:10px 12px;border:0;background:#31574d;color:var(--select-ink);font:700 14px 'Trebuchet MS',sans-serif}
#intro .friend-entry{display:flex;gap:8px;margin:0;flex:0 1 auto}
#intro .friend-entry #play-friend{min-height:44px;padding:10px 14px;background:#31574d;color:var(--select-ink);font-size:14px}
#intro #friend-hint,#intro .selection-home,#intro .selection-settings{display:none}
#intro .selection-footer{position:sticky;bottom:0;z-index:7;margin-top:26px;padding:16px 12px 14px;background:#183a37;box-shadow:0 -12px 22px #183a37d9}
#intro .start-actions{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:14px;align-items:center;width:min(600px,100%);margin-left:auto}
#intro .start-actions>*{grid-area:auto}
#intro .start-actions .primary{min-height:52px;padding:14px 20px;box-shadow:0 4px 12px #091c1a45;background:var(--select-gold);color:#223d34;font:700 17px/1.3 'Trebuchet MS',sans-serif}
#intro .start-actions .primary:hover:not(:disabled){background:#f7d58d}
#intro .practice-entry{min-height:48px;padding:12px 18px;border:1px solid var(--select-line);border-radius:8px;background:#274b43;color:var(--select-ink);font:700 14px 'Trebuchet MS',sans-serif}
#intro #matchup{display:block;width:min(600px,100%);margin:10px 0 0 auto;font-size:14px;line-height:1.4;text-align:left;color:var(--select-muted);min-height:20px}
#intro .selection-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 0;margin-top:8px;border-top:1px solid var(--select-line);color:var(--select-muted);font-size:14px;line-height:1.4}
#intro .selection-legal>span:last-child{display:flex;gap:4px}
#intro .selection-legal a{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;color:inherit;text-underline-offset:3px}
#intro .room-panel{display:block;max-height:none;margin:0 0 24px;padding:16px;border-radius:12px;background:#254b42;color:var(--select-ink)}
#intro .room-panel .room-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:19px;color:var(--select-ink)}
#intro .room-heading .text-button{min-height:44px;padding:10px 12px;color:#f1dba7}
#intro .room-panel p{font-size:14px;line-height:1.45;color:var(--select-muted);max-width:none;margin:8px 0 12px}
#intro .invite-row{display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:12px}
#intro .room-panel .room-note{display:block;margin:12px 0 0}
#intro .room-message{font-size:15px;line-height:1.5;padding:12px 16px;margin:0 0 16px;color:#ffe0ba;background:#593a30;border-radius:8px}
#game-shell.selecting .below{display:none}
@media(max-width:1050px){
 #intro .selection-heading{align-items:flex-start;gap:18px}
 #intro .selection-heading>div:first-child{flex:1}
 #intro .mode-picker{flex:1.35}
 #intro .mode-picker button{padding:9px}
 #intro .selection-layout{gap:24px;grid-template-columns:minmax(235px,.8fr) minmax(0,1.2fr)}
 #intro .fighter-stage{height:300px}
 #intro .fighter-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
 #intro .fighter-choice{min-height:90px;padding:6px 3px}
 #intro .fighter-choice canvas{height:40px}
 #intro .move-guide dl{gap:16px}
 #intro .fighter-heading{display:block}
 #intro .fighter-heading p{text-align:left;margin-top:7px}
}
@media(max-width:650px){
 #game-shell.selecting{padding:18px 16px 0}
 #game-shell.selecting .masthead{margin-bottom:22px;gap:12px}
 #game-shell.selecting .masthead h1{font-size:23px}
 #game-shell.selecting .edition{display:none}
 #intro .selection-heading{display:block;margin-bottom:18px}
 #intro .selection-heading h2{font-size:31px}
 #intro .selection-heading p{font-size:14px;margin-top:8px}
 #intro .mode-picker{margin-top:16px;gap:6px}
 #intro .mode-picker button{padding:10px 8px;min-height:44px;text-align:center}
 #intro .mode-picker strong{font-size:18px}
 #intro .mode-picker small{display:none}
 #intro .selection-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"roster" "spotlight" "moves" "setup";gap:20px}
 #intro .fighter-spotlight{position:static;width:100%}
 #intro .fighter-heading{display:flex;align-items:baseline;padding-bottom:10px}
 #intro .fighter-heading h3{font-size:34px}
 #intro .fighter-heading p{font-size:14px;text-align:right;margin:0}
 #intro .fighter-stage{height:180px;background-position:center 73%}
 #intro .preview-tools{padding-top:8px;gap:8px 12px}
 #intro #selected-fighter-summary{font-size:15px;margin-top:9px;max-width:none}
 #intro .roster-hint{display:block;margin:0 0 8px;color:var(--select-muted);font-size:14px;line-height:1.4}
 #intro .fighter-choices{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c1ae74 #234940;padding:3px 3px 9px;scroll-padding:3px}
 #intro .fighter-choice{flex:0 0 78px;min-height:78px;padding:5px 2px}
 #intro .fighter-choice canvas{height:34px}
 #intro .fighter-choice strong{font-size:14px;min-height:29px}
 #intro .move-guide{padding-top:0}
 #intro .move-guide h3{font-size:24px}
 #intro .move-guide dl{gap:16px 14px}
 #intro .move-guide dt{align-items:flex-start;gap:7px;font-size:14px}
 #intro .move-guide kbd{font-size:12px;min-width:23px;padding:4px}
 #intro .move-guide dd{font-size:14px}
 #intro .match-setup{margin-top:0;padding-top:16px;gap:14px}
 #intro .opponent-row{flex:1 1 180px}
 #intro .selection-footer{margin-top:20px;padding:12px 8px max(12px,env(safe-area-inset-bottom))}
 #intro .start-actions{grid-template-columns:minmax(0,1fr) auto;gap:10px}
 #intro .start-actions .primary{font-size:16px;min-height:50px;padding:12px}
 #intro .practice-entry{padding:12px 14px}
 #intro #matchup{font-size:14px;line-height:1.4;margin-top:8px;min-height:20px}
 #intro .invite-row{grid-template-columns:1fr}
 #intro .invite-actions>*{flex-basis:calc(50% - 6px)}
 #intro .room-panel{padding:14px;margin-bottom:20px}
}
@media(max-width:350px){
 #game-shell.selecting{padding-left:12px;padding-right:12px}
 #intro .mode-picker button{padding:9px 6px}
 #intro .mode-picker strong{font-size:17px}
 #intro .move-guide dl{grid-template-columns:1fr}
 #intro .fighter-stage{height:170px}
 #intro .fighter-heading h3{font-size:29px}
 #intro .start-actions{gap:8px}
 #intro .practice-entry{padding:12px 10px;font-size:14px}
}
@media(max-height:520px) and (orientation:landscape){
 #game-shell.selecting{padding:14px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
 #game-shell.selecting .masthead{margin-bottom:18px}
 #game-shell.selecting .masthead h1{font-size:24px}
 #game-shell.selecting .edition{display:none}
 #intro .selection-heading{gap:18px}
 #intro .selection-heading h2{font-size:30px}
 #intro .mode-picker{max-width:470px}
 #intro .selection-layout{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:22px;display:grid}
 #intro .fighter-stage{height:250px}
 #intro .fighter-spotlight{position:static}
 #intro .fighter-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
 #intro .selection-footer{padding:10px 8px}
 #intro .room-panel{display:block}
}
@media(prefers-reduced-motion:reduce){#intro button{transition:none}}

/* Authoritative readiness is visible in both the private selector and result. */
.room-readiness { margin: 14px 0 18px; text-align: left; }
.ready-rows { display: grid; gap: 10px; }
.ready-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.ready-row strong { min-width: 0; font: 700 15px/1.4 'Trebuchet MS',sans-serif; overflow-wrap: anywhere; }
.ready-row>span { padding: 6px 10px; border-radius: 6px; background: #e3d7bf; color: #4e4d3c; font: 700 14px/1.3 'Trebuchet MS',sans-serif; }
.ready-row>span[data-state="ready"] { background: #245a46; color: #fff1d2; }
.room-readiness p { margin: 0; font: 400 14px/1.5 'Trebuchet MS',sans-serif; }
#intro .room-readiness { margin: 12px 0 16px; }
#intro .room-readiness p { margin: 0; }
#intro .ready-row>span { background: #183b34; color: #dfebd3; }
#intro .ready-row>span[data-state="ready"] { background: #efd180; color: #203f35; }
#result { width: min(560px,100%); max-height: calc(100% - 8px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px; }
#result #result-title { font-size: 32px; margin: 6px 0; }
#result #result-copy { font-size: 15px; line-height: 1.4; margin: 8px 0 12px; }
#result .result-stats { margin: 12px 0 16px; }
#result .room-readiness { margin: 12px 0 14px; }
#result .text-button { min-height: 44px; padding: 12px 10px; font-size: 14px; }
#result>small { font-size: 14px; line-height: 1.4; }
@media(max-width:360px) { .ready-row { gap: 8px; } .ready-row>span { padding: 6px 8px; } }
@media(max-width:650px) { #result { padding: 18px; } }
@media(max-width:360px) { #result { padding-inline: 16px; } #result #result-title { font-size: 28px; } }
@media(max-height:520px) and (orientation:landscape) {
  #result { padding: 14px 22px; }
  #result #result-title { font-size: 28px; margin: 4px 0; }
  #result #result-kicker { margin: 4px 0; }
  #result:not(.has-room-reason) #result-copy { display: none; }
  #result .result-stats { margin: 8px 0 10px; }
  #result .result-stats strong { font-size: 22px; }
  #result .room-readiness { margin: 10px 0; }
  #result>small { margin-top: 6px; }
}