/* Layout only. Plates, buttons and sockets reuse the preserved native image_gen atlas. */
#learning-hud{position:absolute;z-index:22;left:50%;top:90px;transform:translateX(-50%);width:min(660px,calc(100% - 28px));padding:12px 20px;color:#f4eccb;background:var(--native-dialog) center/100% 100% no-repeat;image-rendering:pixelated;pointer-events:none;text-align:center}
#learning-hud[hidden],#spectator-selection[hidden],#training-config[hidden]{display:none!important}
#learning-title{font-size:14px}#learning-description{font-size:12px;line-height:1.4;margin:5px 0}#learning-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;pointer-events:auto}#learning-actions button,#spectator-add{font:inherit;font-size:11px;color:#f4eccb;background:var(--native-button) center/100% 100% no-repeat;border:0;padding:10px 15px;cursor:pointer}#learning-actions select,.learning-config select{font:inherit;font-size:12px;color:#f4eccb;background:#10242c;padding:6px;max-width:100%}
#spectator-selection{width:100%;padding:12px;background:var(--native-dialog) center/100% 100% no-repeat;box-sizing:border-box}#spectator-selection h2{font-size:18px;margin:0 0 6px}#spectator-selection p{font-size:11px;line-height:1.35}#spectator-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:8px 0}#spectator-slots .team-socket{width:100%;height:54px}#spectator-slots img{max-width:100%;max-height:45px;image-rendering:pixelated}.spectator-preparation .featured-panel .partner-scene,.spectator-preparation .featured-panel #selected-desc,.spectator-preparation .featured-panel #selected-stats,.spectator-preparation .featured-panel #loadout,.spectator-preparation .featured-panel .loadout-heading{display:none!important}
.learning-config{display:grid;grid-template-columns:1fr 1fr;gap:9px}.learning-config label{display:flex;flex-direction:column;gap:4px;font-size:12px}#training-config{padding:10px}#training-config h3{font-size:14px;margin:0 0 8px}body[data-learning-mode=spectator] #skill-bar,body[data-learning-mode=spectator] #touch-controls,body[data-learning-mode=spectator] .player-hud{display:none!important}
.native-ui .game-selection.spectator-preparation .featured-panel{display:flex!important;flex-direction:column;overflow:hidden}.native-ui .game-selection.spectator-preparation .featured-panel>:not(#spectator-selection){display:none!important}.native-ui .game-selection.spectator-preparation #spectator-selection{width:100%;min-width:0;order:0}.native-ui .game-selection.spectator-preparation #spectator-selection>h2{font-size:16px;line-height:1.25}.native-ui .game-selection.spectator-preparation #spectator-selection>p{white-space:normal}.native-ui .game-selection.spectator-preparation .roster-heading h2{font-size:15px}
.boot-mode-list{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px}.boot-mode{min-height:215px}.boot-mode-land{height:74px}.boot-mode-brand{max-width:300px}.boot-modes{gap:12px;padding:14px}.boot-mode>span{font-size:11px}
@media(max-width:700px){.boot-mode-list{grid-template-columns:repeat(2,minmax(0,1fr))}.boot-mode{min-height:157px;padding:8px;gap:4px}.boot-mode-land{height:42px}.boot-mode-brand{max-width:200px}.boot-mode>span{font-size:10px}#learning-hud{top:112px;padding:9px 13px}#learning-title{font-size:12px}#learning-description{font-size:10px}#learning-actions button{font-size:10px;padding:8px}#spectator-slots .team-socket{height:42px}.learning-config{gap:5px}.learning-config select{font-size:11px}}
@media(max-height:540px){.boot-mode-list{grid-template-columns:repeat(4,minmax(0,1fr))}.boot-mode{min-height:140px;gap:3px;padding:7px}.boot-mode-land{height:32px}.boot-mode strong{font-size:16px}.boot-mode>span{font-size:10px}.boot-modes header .boot-mode-brand{display:none}.boot-modes h2{font-size:18px;margin:0}.boot-modes{gap:7px}#learning-hud{top:6px;width:min(440px,55%);padding:7px 12px}#learning-description{font-size:10px}#learning-title{font-size:11px}#learning-actions button{padding:5px;font-size:9px}#spectator-selection{padding:6px}#spectator-selection h2{font-size:14px}#spectator-selection p{margin:3px 0}#spectator-slots .team-socket{height:36px}.learning-config{grid-template-columns:1fr 1fr}#training-config{padding:3px}}
@media(max-width:700px) and (orientation:portrait){.native-ui .game-selection.spectator-preparation{grid-template-rows:190px minmax(0,1fr)}.native-ui .game-selection.spectator-preparation #spectator-selection{height:190px;padding:12px 18px}.native-ui .game-selection.spectator-preparation #spectator-selection h2{font-size:15px}.native-ui .game-selection.spectator-preparation #spectator-selection p{margin:4px 0;font-size:10px;line-height:1.3}.native-ui .game-selection.spectator-preparation #spectator-slots{margin:5px 0}.native-ui .game-selection.spectator-preparation #spectator-add{width:100%;padding:7px 10px}.native-ui .lobby[data-menu-phase=arena] .game-selection.spectator-preparation{grid-template-rows:minmax(0,1fr)}}

/* Six permanent footer readouts. Native image_gen frames and meter textures. */
body[data-learning-mode=spectator] .game-screen canvas#game-canvas{left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;transform:none;aspect-ratio:auto}
#spectator-scoreboard{position:absolute;z-index:23;inset:auto 8px calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:62px;gap:3px;pointer-events:none}
#spectator-scoreboard[hidden]{display:none!important}
.spectator-fighter{box-sizing:border-box;position:relative;width:100%;height:62px;padding:10px 11px 9px 43px;border:0;border-radius:0;box-shadow:none;background:var(--native-tooltip) center/100% 100% no-repeat;color:#f6ebce;image-rendering:pixelated;font:12px var(--pixel);text-align:left;cursor:pointer;pointer-events:auto;min-width:0;display:grid;grid-template-rows:15px 7px 12px;gap:2px}
.spectator-fighter[data-followed=true]{background-image:var(--native-selected)}
.spectator-fighter:focus-visible{filter:brightness(1.3);outline:0}
.spectator-face{position:absolute;left:10px;top:18px;width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.spectator-name{font-size:13px;line-height:15px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.spectator-meta{display:flex;justify-content:space-between;gap:3px;min-width:0;line-height:12px}
.spectator-life{flex-shrink:0;font-size:10px;line-height:12px;color:#e6edc4;white-space:nowrap}
.spectator-hp-track{height:7px;width:100%;overflow:hidden;background:var(--native-depleted) left center/100% 100% no-repeat;image-rendering:pixelated}
.spectator-hp-fill{display:block;width:100%;height:100%;background:var(--native-healthFill) left center/100% 100% no-repeat;transform-origin:left center;transition:transform .1s linear}
.spectator-target{font-size:10px;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#bbd4da}
.spectator-fighter[data-eliminated=true]{cursor:default;color:#bbc5c8;opacity:1}.spectator-fighter[data-eliminated=true] .spectator-face{filter:grayscale(1);opacity:.65}.spectator-fighter[data-eliminated=true] .spectator-life{color:#d8b9ab}
body[data-learning-mode=spectator] .game-screen .match-center,body[data-learning-mode=spectator] .game-screen .in-game-help,body[data-learning-mode=spectator] #interaction-prompt{display:none!important}
body[data-learning-mode=spectator] #learning-hud{top:8px;width:min(620px,calc(100% - 280px));padding:9px 18px}
body[data-learning-mode=spectator] #learning-description{margin:4px 0 0}
body[data-learning-mode=spectator] #learning-actions{gap:4px}
body[data-learning-mode=spectator] .game-screen .minimap-panel{bottom:78px;right:8px}
.spectator-camera-actions select{max-width:185px;min-width:0}
.spectator-camera-actions button{white-space:nowrap}
#spectator-zoom{align-self:center;min-width:37px;font-size:11px}
@media(max-width:999px){
 #spectator-scoreboard{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,58px)}
 .spectator-fighter{height:58px;padding:8px 10px 7px 40px;grid-template-rows:14px 6px 12px;gap:2px}
 .spectator-face{left:9px;top:16px;width:27px;height:27px}
 .spectator-name{font-size:13px;line-height:14px}.spectator-hp-track{height:6px}
 body[data-learning-mode=spectator] #learning-hud{left:8px;transform:none;width:calc(100% - 132px);max-width:650px;padding:9px 12px;text-align:left}
 body[data-learning-mode=spectator] #learning-title{font-size:12px}
 body[data-learning-mode=spectator] #learning-description{font-size:10px;line-height:1.2}
 body[data-learning-mode=spectator] #learning-actions{justify-content:flex-start}
 body[data-learning-mode=spectator] #learning-actions button{font-size:10px;padding:6px 8px}
 body[data-learning-mode=spectator] #learning-actions select{font-size:11px;padding:4px;max-width:100%}
 body[data-learning-mode=spectator] .game-screen .match-right{right:8px;top:8px;width:108px}
 body[data-learning-mode=spectator] .game-screen .match-stats{min-width:0;width:108px;max-width:108px;box-sizing:border-box;padding:5px 8px}
 body[data-learning-mode=spectator] .game-screen #kills-label{display:none}
 body[data-learning-mode=spectator] .game-screen .minimap-panel{bottom:135px;right:8px}
}
@media(max-width:480px){
 #spectator-scoreboard{left:5px;right:5px}
 .spectator-fighter{padding-left:8px;padding-right:8px}
 .spectator-face{left:auto;right:7px;top:7px;width:20px;height:20px;opacity:.85}
 .spectator-name{padding-right:21px;font-size:12px;letter-spacing:-.2px}
 .spectator-life,.spectator-target{font-size:9px}
}
@media(max-height:540px) and (min-width:600px){
 #spectator-scoreboard{bottom:5px;left:6px;right:6px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:56px;gap:3px}
 .spectator-fighter{height:56px;padding:8px 8px 6px;grid-template-rows:13px 6px 11px;gap:2px}
 .spectator-face{left:auto;right:7px;top:7px;width:20px;height:20px}
 .spectator-name{font-size:12px;line-height:13px;padding-right:21px}.spectator-life,.spectator-target{font-size:9px;line-height:11px}.spectator-hp-track{height:6px}
 body[data-learning-mode=spectator] #learning-hud{top:4px;left:6px;transform:none;width:calc(100% - 142px);max-width:640px;padding:7px 12px;text-align:left}
 body[data-learning-mode=spectator] .game-screen .minimap-panel{bottom:68px;right:8px;width:94px}
 body[data-learning-mode=spectator] .game-screen .minimap-panel canvas{width:84px;height:55px}
}
@media(prefers-reduced-motion:reduce){.spectator-hp-fill{transition:none}}

/* 1.7 exhibition preparation: reuse the lobby's native controls and complete portraits. */
.native-ui .game-selection.spectator-preparation .featured-panel{overflow-y:auto;align-items:stretch;container-type:inline-size;container-name:exhibition}
.native-ui .game-selection.spectator-preparation #spectator-selection{height:auto;min-height:0;padding:22px 28px;background:none}
#spectator-selection select{width:100%;min-width:0;min-height:38px;padding:8px 12px;font:inherit;font-size:12px;color:#f4eccb;background:#10242c;border:1px solid #466267;box-sizing:border-box}
#spectator-selection label{display:grid;gap:5px;font-size:12px;min-width:0}
#spectator-custom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}
#spectator-custom[hidden]{display:none!important}
#spectator-selection #spectator-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 5px;margin:14px 0}
#spectator-selection #spectator-slots[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
#spectator-selection #spectator-slots[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.spectator-slot{display:grid;grid-template-rows:50px auto;align-content:start;gap:3px;min-width:0;text-align:center}
#spectator-selection #spectator-slots .team-socket{height:50px;min-height:50px;margin:0;padding:8px 12px}
#spectator-selection #spectator-slots img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.spectator-slot-name{font-size:11px;line-height:1.25;overflow-wrap:anywhere}
.spectator-team-label{font-size:10px;color:#cee5c2}
#spectator-selection .spectator-slot select{font-size:10px;padding:5px;min-height:30px}
.spectator-selection-actions{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px}
#spectator-selection .spectator-selection-actions button{font:inherit;font-size:12px;color:#f4eccb;background:var(--native-button) center/100% 100% no-repeat;image-rendering:pixelated;border:0;min-width:0;min-height:46px;padding:12px 18px;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
#spectator-selection .spectator-selection-actions button:disabled{opacity:1;filter:saturate(.35);cursor:default}
#spectator-selection #spectator-status{min-height:2.8em;font-size:11px;line-height:1.4;margin:9px 0 0}
@container exhibition (max-width:310px){
 #spectator-selection #spectator-slots,#spectator-selection #spectator-slots[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 #spectator-selection .spectator-selection-actions{grid-template-columns:1fr}
 #spectator-custom{grid-template-columns:1fr}
}
body.native-ui #spectator-scoreboard{grid-template-columns:repeat(var(--spectator-count,6),minmax(0,1fr));grid-template-rows:auto;align-items:stretch}
body.native-ui #spectator-scoreboard .spectator-fighter{height:auto;min-height:80px}
body.native-ui #spectator-scoreboard .spectator-name,body.native-ui #spectator-scoreboard .spectator-target{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
body.native-ui #spectator-scoreboard .spectator-meta{flex-wrap:wrap}
body.native-ui[data-learning-mode=spectator] #game-screen .minimap-panel{top:auto;bottom:calc(var(--spectator-footer-height,84px) + 8px)}
@media(max-width:1100px){
 body.native-ui #spectator-scoreboard{grid-template-columns:repeat(min(var(--spectator-count,6),4),minmax(0,1fr))}
}
@media(max-width:700px) and (orientation:portrait){
 .native-ui .game-selection.spectator-preparation{grid-template-rows:minmax(250px,45%) minmax(0,1fr)}
 .native-ui .game-selection.spectator-preparation #spectator-selection{padding:18px 24px}
 body.native-ui #spectator-scoreboard{grid-template-columns:repeat(min(var(--spectator-count,6),3),minmax(0,1fr))}
 body.native-ui #spectator-scoreboard .spectator-fighter{padding:10px 12px;min-height:78px}
}
@media(max-height:540px) and (min-width:600px){
 .native-ui .game-selection.spectator-preparation #spectator-selection{padding:15px 20px}
 #spectator-selection #spectator-slots{margin:8px 0;gap:5px}
 #spectator-selection .spectator-selection-actions button{min-height:42px;padding:10px 16px;font-size:11px}
 body.native-ui #spectator-scoreboard{grid-template-columns:repeat(var(--spectator-count,6),minmax(0,1fr))}
 body.native-ui #spectator-scoreboard .spectator-fighter{padding:10px 12px;min-height:76px;grid-template-columns:1fr;grid-template-rows:20px auto 5px auto;row-gap:2px;text-align:center}
 body.native-ui #spectator-scoreboard .spectator-portrait{grid-column:1;grid-row:1;width:20px;height:20px;justify-self:center}
 body.native-ui #spectator-scoreboard .spectator-name{grid-column:1;grid-row:2;font-size:10px;line-height:1.2}
 body.native-ui #spectator-scoreboard .spectator-hp-track{grid-column:1;grid-row:3}
 body.native-ui #spectator-scoreboard .spectator-meta{grid-column:1;grid-row:4;justify-content:center;gap:0 4px}
 body.native-ui #spectator-scoreboard .spectator-life,body.native-ui #spectator-scoreboard .spectator-target{font-size:9px;line-height:1.2}
}