/* Two deliberate screens: choose a story, then prepare a passenger. */
body[data-lobby=mode] #world{visibility:hidden}
.game-lobby[data-step=mode]{justify-content:center;gap:clamp(24px,5vh,52px);background:radial-gradient(ellipse at 50% 25%,#22343e 0,#0a1822 44%,#030a11 100%);overflow:auto}
.game-lobby[data-step=mode]:before{content:'';position:absolute;inset:16px;pointer-events:none;border:1px solid #bda67a23}
.game-lobby[data-step=mode] .game-title h1{font-size:clamp(33px,5vw,60px);letter-spacing:5px;text-shadow:0 3px 24px #000}
.mode-selection{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,32px);width:min(1060px,92vw);flex:none}
.mode-card{position:relative;overflow:hidden;text-align:left;padding:0;border:1px solid #b4a78b66;border-radius:2px;background:#09151e;color:#f3e8d0;box-shadow:0 15px 38px #0007;transition:transform .2s,border-color .2s,box-shadow .2s;isolation:isolate}
.mode-card img{display:block;width:100%;height:clamp(150px,26vh,280px);object-fit:cover;opacity:.95;transition:filter .2s}
.mode-card:after{content:'';position:absolute;inset:7px;pointer-events:none;border:1px solid #c4b38c23}
.mode-card-copy{position:relative;display:flex;flex-direction:column;padding:21px 27px 23px;gap:9px;background:linear-gradient(115deg,#203039,#0b1721);border-top:1px solid #b4a78b39}
.traitor-card .mode-card-copy{background:linear-gradient(115deg,#2a2529,#101923)}
.mode-card-copy small{font:500 10px/1.4 var(--ui-face);letter-spacing:2px;color:#b8ab91}
.mode-card-copy strong{font:400 clamp(25px,3vw,35px)/1.15 var(--serif);letter-spacing:.5px}
.mode-card-copy>span{font:12px/1.5 var(--ui-face);color:#adbcc3;min-height:18px}
.mode-card-copy b{display:flex;justify-content:space-between;align-items:center;padding-top:13px;margin-top:6px;border-top:1px solid #b8aa8b30;font:600 11px/1 var(--ui-face);text-transform:uppercase;letter-spacing:2px;color:#dac49a}
.mode-card-copy i{font:24px/1 Georgia,serif;font-style:normal}
.mode-card:hover,.mode-card:focus-visible{transform:translateY(-4px);border-color:#dfc59b;box-shadow:0 19px 42px #0009}
.mode-card:hover img{filter:brightness(1.12)}
.mode-card:focus-visible{outline:2px solid #ebd7b1;outline-offset:4px}
.game-lobby[data-step=mode] .lobby-footer{width:min(1060px,92vw);padding-top:3px}
.character-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,1320px);min-height:34px;flex:none}
.character-heading button{padding:8px 13px;border:1px solid #ad9f8255;border-radius:2px;color:#ddceb0;background:#101e27;font:12px var(--ui-face)}
.character-heading button:hover{border-color:#d8bf8d;background:#24343c}
.character-heading h2{font:400 clamp(20px,2.6vw,29px)/1.2 var(--serif);color:#ecddbd;margin:0}
.character-heading>span{font:10px var(--ui-face);text-transform:uppercase;letter-spacing:1.5px;color:#91a5af;min-width:120px;text-align:right}
.game-lobby[data-step=character]{gap:12px}
.game-lobby[data-step=character] .game-title h1{font-size:25px}
.game-lobby[data-step=character] .character-lineup{min-height:180px}
.game-lobby[data-step=character] #mode-description{margin:0 auto 12px;min-height:0;max-width:560px;font-size:12px}
.game-lobby .lobby-mode button{min-height:32px}
.game-lobby [hidden]{display:none!important}
@media(max-width:600px){
 .game-lobby[data-step=mode]{gap:24px;padding:30px 5vw 24px;justify-content:flex-start}
 .mode-selection{width:100%;gap:12px;grid-template-columns:1fr}
 .mode-card{display:grid;grid-template-columns:36% 64%;min-height:180px}
 .mode-card img{height:100%;min-height:180px;object-position:50% 50%}
 .mode-card-copy{padding:21px 20px;border-top:0;border-left:1px solid #b4a78b39;gap:8px}
 .mode-card-copy small{font-size:8px;letter-spacing:1px}
 .mode-card-copy strong{font-size:25px}
 .mode-card-copy>span{font-size:11px}
 .mode-card-copy b{margin:0;padding-top:8px;font-size:10px}
 .character-heading{gap:8px}.character-heading>span{display:none}
 .character-heading button{padding:9px;font-size:11px}.character-heading h2{font-size:23px}
 .game-lobby[data-step=character] .character-lineup{min-height:150px}
}
@media(max-height:600px) and (min-width:601px){
 .game-lobby[data-step=mode]{gap:16px;padding-block:20px}
 .game-lobby[data-step=mode] .game-title h1{font-size:30px}
 .mode-card img{height:128px}.mode-card-copy{padding:12px 20px;gap:6px}
 .mode-card-copy strong{font-size:25px}.mode-card-copy b{padding-top:7px;margin-top:1px}
 .game-lobby[data-step=character]{gap:6px}.game-lobby[data-step=character] .character-lineup{min-height:90px}
 .game-lobby[data-step=character] .game-title{display:none}
}
@media(prefers-reduced-motion:reduce){.mode-card,.mode-card img{transition:none}.mode-card:hover{transform:none}}

.traitor-card img{object-position:50% 100%}
@media(orientation:landscape){.touch-mode .equipment-icons{left:calc(50% - 206px)}}