/* Painted mode plates and a restrained 1912 liner menu. Gameplay HUD is untouched. */
.game-lobby[data-step=mode]{gap:clamp(20px,3.5vh,40px);padding:28px 4vw 18px;background:radial-gradient(ellipse at 50% 35%,#263338 0,#101a20 45%,#050b10 100%)}
.game-lobby[data-step=mode]:before{inset:18px;border-color:#ad93602b}
.game-title .liner-route{margin:0 0 16px;font:11px/1.4 Georgia,serif;letter-spacing:.32em;color:#b8a782}
.game-lobby[data-step=mode] .game-title h1{font:400 clamp(32px,4.3vw,58px)/.98 Georgia,serif;letter-spacing:.12em;color:#f0e6cf}
.game-lobby[data-step=mode] .game-title h1 span{font-size:.42em;letter-spacing:.23em;margin-top:11px}
.mode-selection{width:min(1180px,92vw);gap:clamp(20px,3vw,38px)}
.mode-card{display:block;height:clamp(330px,53vh,540px);border:1px solid #b5a27c65;border-radius:0;background:#070c10;box-shadow:0 16px 50px #0008;transition:border-color .25s,box-shadow .25s}
.mode-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 44%;opacity:1;transition:transform .65s ease,filter .4s}
.battle-card img{object-position:48% 50%}
.mode-card:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#040a10fa 0,#060d14df 12%,#07101940 45%,transparent 70%)}
.mode-card:after{inset:7px;border:1px solid #d9bc8142;z-index:3}
.mode-card .mode-card-copy{position:absolute;inset:auto 0 0;z-index:2;padding:34px 32px 30px;gap:10px;border:0;background:none}
.mode-card-copy small{font:10px/1.4 Georgia,serif;letter-spacing:.18em;color:#d0bd94;text-shadow:0 1px 7px #000}
.mode-card-copy strong{font:400 clamp(29px,3.4vw,44px)/1.12 Georgia,serif;letter-spacing:.015em;color:#f5ead3;text-shadow:0 3px 18px #000}
.mode-card-copy>span{font:13px/1.55 Georgia,serif;color:#c3c6bd;max-width:350px;min-height:0}
.mode-card-copy:before{content:'';width:38px;height:1px;background:#c8ad70;margin-bottom:4px;transition:width .3s}
.mode-card:hover,.mode-card:focus-visible{transform:none;border-color:#ddc595;box-shadow:0 14px 60px #000a,0 0 0 1px #ddc59555}
.mode-card:hover img,.mode-card:focus-visible img{transform:scale(1.025);filter:brightness(1.09)}
.mode-card:hover .mode-card-copy:before,.mode-card:focus-visible .mode-card-copy:before{width:70px}
.mode-card:focus-visible{outline:2px solid #efdbaf;outline-offset:4px}
.game-lobby[data-step=mode] .lobby-footer{width:min(1180px,92vw);color:#a0a79f;font:11px/1.5 Georgia,serif}
.game-lobby[data-step=mode] .lobby-footer button,.game-lobby[data-step=mode] .lobby-footer a{color:inherit}
.game-lobby[data-step=mode] .lobby-footer button:hover,.game-lobby[data-step=mode] .lobby-footer a:hover{color:#ead6b1}
.game-lobby[data-step=character] .liner-route{display:none}
/* Compact pause navigation over the live scene; no panel or GPU-heavy blur. */
#pause{place-items:center start;background:linear-gradient(90deg,#040a10f5 0%,#061019dc 32%,#06101966 65%,#06101928);backdrop-filter:none;padding:clamp(24px,8vw,130px)}
#pause .liner-pause{position:relative;width:min(390px,100%);min-width:0;padding:24px 0;background:none;border:0;border-radius:0;box-shadow:none;outline:0;color:#e9dfc7;text-align:left;max-height:calc(100dvh - 48px);overflow:auto}
#pause .liner-pause:before,#pause .liner-pause:after{display:none}
#pause .pause-brand{font:10px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.2em;color:#ae9e7f;margin:0 0 14px}
#pause h2{font:400 clamp(42px,5vw,60px)/1.1 Georgia,serif;letter-spacing:-.02em;color:#f1e9d8;margin:0 0 36px}
.pause-actions{display:flex;flex-direction:column;text-align:left;gap:6px}
#pause .pause-actions button{width:100%;min-height:52px;display:flex;align-items:center;margin:0;padding:13px 18px;border:0;border-left:2px solid transparent;border-radius:0;background:none;box-shadow:none;text-align:left;font:400 18px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.015em;text-transform:none;color:#bdc3c5;transition:color .15s,background .15s}
#pause .pause-actions #resume{color:#f4e8cc;border-left-color:#c4aa72;background:linear-gradient(90deg,#b6a07024,transparent)}
#pause .pause-actions #quit{margin-top:14px;color:#9ca7ad;font-size:15px}
#pause .pause-actions button:hover,#pause .pause-actions button:focus-visible{background:linear-gradient(90deg,#bba57735,transparent);color:#fff0d4;border-left-color:#d8be86}
#pause .pause-actions button:focus-visible{outline:1px solid #d9bd83;outline-offset:-1px}
#pause .pause-note{margin:32px 0 0 20px;color:#9ca7ad;font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.02em}
#pause .pause-note:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#b7a27d;margin-right:8px;vertical-align:middle}
/* Settings share the pause palette. Detailed rules remain available on demand. */
#help{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:36px 42px;background:#101b22;color:#e5e1d7;border:1px solid #53606a;outline:0;box-shadow:0 24px 80px #0008;font-family:Arial,Helvetica,sans-serif;scrollbar-color:#667178 #101b22}
#help::backdrop{background:#02090dc9;backdrop-filter:none}
#help h2{margin:0 0 30px;font:400 34px/1.15 Georgia,serif;color:#efe6d4}
#help .close{color:#b9c1c4;right:20px;top:12px;padding:5px 10px}
.mouse-settings{padding:0 0 24px;border-bottom:1px solid #62707a55}
.setting-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px}
.setting-heading output{font:600 14px/1.4 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#e4c78c;min-width:56px;text-align:right}
#mouse-sensitivity{display:block;width:100%;height:32px;margin:16px 0 0;accent-color:#ccb37f;cursor:pointer}
.setting-scale{display:flex;justify-content:space-between;font-size:11px;color:#9caab3}
#help #mouse-setting-note{font-size:12px;line-height:1.5;color:#a7b1b8;margin:16px 0 10px}
#mouse-sensitivity-reset{padding:7px 0;color:#d4bd91;font:12px/1.4 Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
.command-keys{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:16px;margin:24px 0;font-size:12px}
.command-keys>div{display:flex;flex-direction:column;gap:6px}.command-keys dt{color:#e6d6b5}.command-keys dd{margin:0;color:#aebac3}
.passenger-guide{padding-top:18px;border-top:1px solid #62707a55}
.passenger-guide summary{cursor:pointer;color:#d5dce0;font-size:13px;padding:6px 0;min-height:32px}
#help .passenger-guide p{color:#b8c2c9;font:13px/1.7 Arial,sans-serif}
#help .help-grid b{color:#dfc99f}#help .help-note{border-color:#62707a55}
@media(max-width:480px){#help{padding:28px 22px}#help h2{font-size:30px}.command-keys{column-gap:16px}}
@media(max-width:600px){
 .game-lobby[data-step=mode]{padding:30px 6vw 22px;gap:23px}
 .game-lobby[data-step=mode]:before{inset:10px}
 .game-title .liner-route{font-size:9px;margin-bottom:12px}
 .mode-selection{width:100%;gap:18px}
 .mode-card{height:270px;min-height:0}
 .mode-card img{height:100%;min-height:0;object-position:50% 30%}
 .mode-card .mode-card-copy{padding:22px 24px;gap:6px}
 .mode-card-copy strong{font-size:31px}.mode-card-copy small{font-size:9px}
 .mode-card-copy>span{font-size:12px;max-width:280px}
 .game-lobby[data-step=mode] .lobby-footer{width:100%;flex-wrap:wrap;gap:10px}
 #pause .liner-pause{padding:20px 0}
 #pause h2{margin-bottom:25px}
 #pause .pause-actions button{padding:14px 16px;font-size:18px}
}
@media(max-height:620px) and (min-width:601px){
 .game-lobby[data-step=mode]{padding:18px 4vw 12px;gap:16px}
 .game-title .liner-route{display:none}.game-lobby[data-step=mode] .game-title h1{font-size:30px}
 .mode-card{height:clamp(220px,56vh,330px)}.mode-card .mode-card-copy{padding:20px 25px;gap:5px}
 .mode-card-copy strong{font-size:30px}.mode-card-copy>span{font-size:11px}
 #pause .liner-pause{padding-block:20px}#pause h2{font-size:36px;margin-bottom:20px}
 #pause .pause-actions button{min-height:50px;padding-block:12px}#pause .pause-note{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.mode-card,.mode-card img,.mode-card-copy:before,.pause-actions button{transition:none}.mode-card:hover img,.mode-card:focus-visible img{transform:none}}

@media(pointer:coarse){#pause kbd{display:none}}

/* Native mouse capture prompt: same understated liner palette as the pause menu. */
#mouse-capture{z-index:24;background:#041018cf;backdrop-filter:blur(4px)}
.capture-card{width:min(430px,92vw);padding:32px 24px;text-align:center;color:#ede4cf;border-block:1px solid #baa16b70;font-family:Georgia,serif}
.capture-mouse{width:26px;height:36px;fill:none;stroke:#cfb982;stroke-width:1.4}
.capture-card h2{font:400 30px/1.2 Georgia,serif;margin:16px 0}
.capture-card p{color:#c6c8c4;font:14px/1.6 Arial,sans-serif;margin:0 0 24px}
.capture-card button,.capture-card a{display:block;width:100%;padding:14px 18px;margin:10px auto 0;border:1px solid #bba16a80;background:#b99e6520;color:#f0dfb9;text-decoration:none;font:18px/1.3 Georgia,serif;cursor:pointer}
.capture-card button:hover,.capture-card a:hover{background:#b99e6538}
.capture-card button:focus-visible,.capture-card a:focus-visible{outline:2px solid #ead6a7;outline-offset:3px}
.capture-card button:disabled{cursor:wait;opacity:.5}
.capture-card button.capture-back{border:0;background:none;color:#b7b8af;font:13px/1.4 Arial,sans-serif}