/* Approved mockup: five equal footer strips, real portraits and live factory. */
body.choosing main{max-width:none;padding:0}
body.choosing .game{border:0}
body.choosing #overlay{background:transparent;gap:clamp(6px,.8vw,13px);padding:clamp(12px,2vw,30px);overflow:auto}
body.choosing #character-selection{width:100%;max-width:min(76vw,1480px)}
body.choosing .menu-title{margin:0 auto 12px;gap:3px}
body.choosing .menu-logo-v55{width:clamp(180px,15vw,280px);max-height:none;height:auto}
body.choosing .menu-title small{font-size:clamp(7px,.65vw,11px);letter-spacing:3px;margin-top:7px}
body.choosing #character-selection h2{font-size:clamp(12px,1.2vw,20px);letter-spacing:3px;margin:0 0 16px}
body.choosing .character-roster{--caption64:clamp(58px,5.2vw,94px);display:flex;gap:0;padding:12px;background:#152126c9;border:1px solid #63726d;border-top:2px solid #e6a65b}
body.choosing .character-card{display:flex;flex-direction:column;flex:1 1 20%;width:20%;min-width:0;aspect-ratio:.64;height:auto;padding:0;border:1px solid #78858070;border-right:0;position:relative;overflow:visible;background:#111c22;opacity:1;transform:none;box-shadow:none}
body.choosing .character-card:last-child{border-right:1px solid #78858070}
body.choosing .character-card img{display:block;width:100%;height:calc(100% - var(--caption64));min-height:0;object-fit:cover;object-position:50% 32%;flex:1 1 auto}
body.choosing #pick-guardian img{object-position:50% 18%}
body.choosing #pick-mechanist img{object-position:50% 28%}
body.choosing .character-card.unavailable img{filter:grayscale(1) brightness(.72)}
body.choosing .character-card.selected{border-color:#efb065;box-shadow:none}
body.choosing .character-card.selected:before{font-size:clamp(7px,.7vw,11px);letter-spacing:1px;top:10px;left:9px;padding:5px 8px;background:#ecae65;color:#162022}
body.choosing .operative-caption{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 var(--caption64);height:var(--caption64);min-height:var(--caption64);width:100%;padding:9px 5px;gap:8px;border-top:1px solid #75807660;background:#101c22;color:#e8e0cc;box-sizing:border-box}
body.choosing .operative-caption strong{font-size:clamp(12px,1.3vw,21px);line-height:1.2;letter-spacing:1px;white-space:nowrap;font-weight:normal}
body.choosing .operative-caption small{font-size:clamp(7px,.65vw,11px);line-height:1.2;letter-spacing:1px;white-space:nowrap;color:#eaa75b}
body.choosing .character-card.unavailable .operative-caption{color:#aab0ac}
body.choosing .character-card.unavailable .operative-caption small{color:#eaa75b}
body.choosing .locked-caption64{border-top:1px solid #edb263;background:#0b151be8}
body.choosing .locked-caption64 strong{font-size:clamp(9px,.92vw,16px);letter-spacing:0;color:#eee9dc}
body.choosing .locked-caption64 small{font-size:clamp(8px,.84vw,14px);letter-spacing:.5px;color:#eee9dc}
body.choosing .locked-caption64 em{font-style:normal;color:#efab58}
.roster-lock64{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:clamp(18px,1.5vw,24px);height:clamp(18px,1.5vw,24px);padding:3px;fill:#989f9b;background:#10191f;box-sizing:border-box;pointer-events:none}
body.choosing #start{font-size:clamp(12px,1.2vw,20px);padding:12px 28px;min-height:44px;margin-top:8px;background:#e6a35f;border:2px solid #f2bf82;box-shadow:inset 0 0 0 2px #573b28;color:#102028}
body.choosing #load{font-size:clamp(8px,.8vw,13px);margin:0;color:#ecd3a8}
body.choosing #load-progress{width:clamp(200px,18vw,330px);height:8px;border:1px solid #a98854}
#menu-credit64{display:none;position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:4;font:12px system-ui,sans-serif;color:#a2aaa8;pointer-events:none;text-shadow:0 1px 3px #000}
body.choosing #menu-credit64{display:block}
@media(max-width:1000px){body.choosing #character-selection{max-width:86vw}body.choosing .character-roster{padding:8px}body.choosing .operative-caption strong{font-size:clamp(9px,1.4vw,14px)}body.choosing .locked-caption64 strong{font-size:clamp(7px,1vw,10px)}body.choosing .locked-caption64 small{font-size:clamp(7px,.9vw,9px)}}
@media(max-height:560px){body.choosing #overlay{gap:5px;padding:10px}body.choosing #character-selection{max-width:82vw}body.choosing .menu-title{margin-bottom:6px}body.choosing .menu-logo-v55{width:150px;max-height:58px}body.choosing .menu-title small{font-size:6px;margin-top:3px}body.choosing #character-selection h2{font-size:10px;margin-bottom:7px}body.choosing .character-roster{--caption64:44px;padding:7px}body.choosing .character-card{height:clamp(145px,45dvh,235px);aspect-ratio:auto}body.choosing .operative-caption{padding:6px 3px;gap:5px}body.choosing .operative-caption strong{font-size:clamp(9px,1.35vw,13px);letter-spacing:.3px}body.choosing .operative-caption small{font-size:7px;letter-spacing:.3px}body.choosing .locked-caption64 strong{font-size:clamp(7px,1vw,10px)}body.choosing .locked-caption64 small{font-size:clamp(6px,.9vw,9px)}body.choosing #start{font-size:11px;min-height:34px;padding:7px 20px;margin-top:3px}body.choosing #load{font-size:8px}body.choosing #load-progress{height:6px;width:200px}#menu-credit64{font-size:9px;left:10px;bottom:7px}}
@media(max-width:600px) and (orientation:portrait){body.choosing #character-selection{max-width:96vw}body.choosing .character-roster{--caption64:44px;padding:5px}body.choosing .character-card{aspect-ratio:.58}body.choosing .operative-caption strong{font-size:8px;letter-spacing:0}body.choosing .operative-caption small{font-size:6px;letter-spacing:0}body.choosing .locked-caption64 strong{font-size:6px}body.choosing .locked-caption64 small{font-size:5px}body.choosing .menu-logo-v55{width:180px}body.choosing #overlay{padding:8px}}

/* Match the legacy :has selector so its opaque menu scrim cannot win. */
body.choosing #overlay:has(#character-selection:not([hidden])){background:transparent}