/* Shared menu components. Game HUD and touch controls belong to their viewport shells. */
:root{--menu-ink:#f3ead5;--menu-muted:#a8beb9;--menu-gold:#e8c68e;--menu-edge:#afc2b42b}
#overlay,body.playing .overlay{grid-template-columns:minmax(0,1fr);justify-items:center}
#overlay .menu-panel,body.playing .overlay .menu-panel,body.legacy-game .menu-panel{position:relative;width:min(100%,480px);max-width:480px;max-height:100%;margin:0;padding:26px;text-align:left;color:var(--menu-ink);background:linear-gradient(150deg,#243f45,#142b35 80%);border:1px solid #8da99a57;border-top:2px solid #ddbf85;border-radius:24px;box-shadow:0 24px 80px #0008;overflow:auto;overscroll-behavior:contain;word-break:keep-all;overflow-wrap:anywhere;font-family:system-ui,'Noto Sans KR',sans-serif}
.menu-panel .menu-heading{position:relative;padding-bottom:17px;border-bottom:1px solid var(--menu-edge);margin-bottom:18px}
.menu-panel .menu-heading>small,.menu-panel .menu-heading>.eyebrow,.menu-panel .card-kicker{display:block;font-size:10px;line-height:1.5;font-weight:650;letter-spacing:.6px;color:var(--menu-gold);margin:0}
#overlay .menu-panel h2,body.playing .overlay .menu-panel h2,body.legacy-game .menu-panel h2{font:800 clamp(22px,5.6vw,29px)/1.32 system-ui,sans-serif;letter-spacing:-1px;margin:9px 0 10px;text-wrap:balance;color:var(--menu-ink)}
#overlay .menu-panel p,body.playing .overlay .menu-panel p,body.legacy-game .menu-panel p{font-size:12px;line-height:1.75;white-space:pre-line;color:#b7cbc4;margin:0;text-wrap:pretty}
.menu-panel #guide{display:none}
#campaign-settings.menu-settings,.menu-settings{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;text-align:left;margin:0}
.menu-panel .choice-group,body.playing .modal .choice-group{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.menu-panel .choice-group legend,.menu-panel .section-label,body.playing .modal .choice-group legend{font-size:11px;line-height:1.5;color:#d4ddce;font-weight:700;margin:0 0 8px;padding:0;width:100%;letter-spacing:.15px}
.menu-panel .choice{position:relative;display:block!important;min-width:0;cursor:pointer}
.menu-panel .choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:12px;top:12px}
.menu-panel .choice>span{display:flex;min-height:62px;flex-direction:column;justify-content:center;gap:4px;padding:11px 14px;border:1px solid #819b9347;border-radius:13px;background:#0e263166;color:#e3e9da;transition:background .15s,border-color .15s}
.menu-panel .choice b{font-size:13px;line-height:1.3;font-weight:750;display:flex;justify-content:space-between;gap:4px}
.menu-panel .choice small{font-size:10px;line-height:1.4;color:var(--menu-muted);font-weight:400;letter-spacing:0}
.menu-panel .choice input:checked+span{border-color:#e4c58c;background:linear-gradient(130deg,#76664440,#b29c6630);box-shadow:inset 0 0 0 1px #d7bf6e25}
.menu-panel .choice input:checked+span b{color:#ffe3a9}
.menu-panel .choice input:checked+span b:after{content:'✓';color:#f0d395}
.menu-panel .choice input:focus-visible+span{outline:2px solid #fff0bf;outline-offset:3px}
.menu-panel .section-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.menu-panel .section-label>span{font-size:9px;font-weight:400;color:var(--menu-muted)}
.menu-panel .stage-steps,body.playing[data-phase=ready] .menu-panel #route-map{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0;padding:0;overflow:visible}
body.playing[data-phase=ready] .menu-panel #route-map{grid-template-columns:repeat(5,minmax(0,1fr))}
.menu-panel .stage-steps button,body.playing .menu-panel #route-map button{position:relative;min-width:0;width:100%;height:44px;min-height:44px;padding:0;border:1px solid #7f9c8b44;border-radius:10px;background:#112c36;color:#cadbd1;font:650 13px/1 system-ui;opacity:1;box-shadow:none;text-overflow:clip;letter-spacing:.5px}
.menu-panel .stage-steps button[aria-current=true],body.playing .menu-panel #route-map button[aria-current=true]{background:#e7c68e;color:#233733;border-color:#ffe4ad;box-shadow:0 3px 10px #0002}
.menu-panel .stage-steps button:disabled,body.playing .menu-panel #route-map button:disabled{color:#91a69b;background:#142c33;border-style:dashed;cursor:default;opacity:.65}
.menu-panel .stage-steps button:disabled:after,body.playing .menu-panel #route-map button:disabled:after{content:'';position:absolute;right:4px;bottom:4px;width:5px;height:5px;border:1px solid #98aa9b;border-radius:1px}
.menu-panel .stage-steps button:disabled:before,body.playing .menu-panel #route-map button:disabled:before{content:'';position:absolute;right:5px;bottom:10px;width:3px;height:3px;border:1px solid #98aa9b;border-bottom:0;border-radius:3px 3px 0 0}
.menu-panel .stage-preview{padding:10px 1px 0;display:flex;flex-direction:column;gap:3px;min-height:46px}
.menu-panel .stage-preview b{font-size:12px;line-height:1.5;font-weight:650;color:#e7dfc5}
.menu-panel .stage-preview small{font-size:10px;line-height:1.5;color:#9db8b0}
#overlay .menu-panel #start,body.playing .menu-panel #start,body.legacy-game .menu-panel .primary{display:block;width:100%;min-height:50px;margin:20px 0 0;padding:12px 16px;border:1px solid #ffe1a8;border-radius:13px;background:linear-gradient(110deg,#f4d69f,#d8b578);color:#243930;font:800 14px/1.4 system-ui,sans-serif;box-shadow:0 4px 0 #091f2999,0 6px 18px #0002;text-align:center}
.menu-panel button:active{transform:translateY(1px);filter:brightness(1.08)}
.menu-panel button:focus-visible{outline:2px solid #fff2bf;outline-offset:3px}
#overlay .menu-panel .note{font-size:9px;text-align:center;color:#8ba89f;margin:11px 0 0}
body.playing .menu-panel #again{display:block;width:100%;margin:12px 0 0;background:transparent;border:1px solid #8ca49755;color:#c5d3c6;border-radius:12px;min-height:44px}
body.legacy-game .menu-panel .difficulty{grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0}
body.legacy-game .menu-panel .difficulty label.choice{background:transparent;border:0;padding:0;box-shadow:none;border-radius:0}
body.legacy-game .menu-panel .difficulty .choice>span{padding:10px;min-height:60px}
body.legacy-game .menu-panel .mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
body.legacy-game .menu-panel .mode-buttons button{margin:0;min-height:70px;border-radius:13px;padding:12px 8px}
body.legacy-game .menu-panel .mode-buttons small{display:block;font-size:9px;margin-top:5px;font-weight:400}
body.legacy-game .menu-panel .mode-buttons b{font-size:15px}
body.legacy-game .menu-panel .secondary{background:#26454c;border:1px solid #88a69866;color:#e9e6cf}
body.legacy-game .menu-panel .setup-note,body.legacy-game .menu-panel .keyboard-note{display:block;text-align:center;margin-top:16px;font-size:10px;color:#a5bdb4}
body.legacy-game .menu-panel .mission{display:flex;justify-content:center;gap:10px;margin:20px 0;font-size:11px;color:#e0c997}
@media(max-width:380px),(max-height:690px){#overlay .menu-panel,body.playing .overlay .menu-panel,body.legacy-game .menu-panel{padding:19px;border-radius:19px}.menu-panel .menu-heading{padding-bottom:12px;margin-bottom:13px}#overlay .menu-panel h2,body.playing .overlay .menu-panel h2{font-size:23px;margin:7px 0 8px}#overlay .menu-panel p,body.playing .overlay .menu-panel p{font-size:11px;line-height:1.65}#campaign-settings.menu-settings,.menu-settings{gap:12px}.menu-panel .choice>span{min-height:55px;padding:9px 11px}.menu-panel .choice b{font-size:12px}.menu-panel .choice small{font-size:9px}.menu-panel .section-label>span{font-size:8px}#overlay .menu-panel #start,body.playing .menu-panel #start{margin-top:14px;min-height:46px}}
@media(orientation:landscape) and (max-height:600px){#overlay:has(.menu-settings:not([hidden])),body.playing .overlay{padding:10px!important;inset:0!important}#overlay .menu-panel:has(.menu-settings:not([hidden])),body.playing .overlay .menu-panel:has(.menu-settings:not([hidden])){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:24px;width:min(100%,820px);max-width:820px;padding:18px 22px;overflow:auto}.menu-panel:has(.menu-settings:not([hidden])) .menu-heading{grid-column:1;grid-row:1;align-self:start;margin:0;border:0;padding:0}.menu-panel:has(.menu-settings:not([hidden])) .menu-settings{grid-column:2;grid-row:1/4;gap:10px}.menu-panel:has(.menu-settings:not([hidden])) #start{grid-column:1;grid-row:2;align-self:end;margin-top:16px}.menu-panel:has(.menu-settings:not([hidden])) .note{grid-column:1;grid-row:3;display:block!important}.menu-panel .choice>span{min-height:48px;padding:7px 10px}.menu-panel .choice-group legend,.menu-panel .section-label{margin-bottom:5px}.menu-panel .stage-preview{padding-top:7px;min-height:40px}.menu-panel .section-label>span{display:none}#overlay .menu-panel h2,body.playing .overlay .menu-panel h2{font-size:23px}body.playing .menu-panel .choice-group legend{margin-bottom:5px}body.playing .menu-panel .choice>span{min-height:46px}.menu-panel .stage-steps,body.playing[data-phase=ready] .menu-panel #route-map{gap:4px}}
@media(orientation:portrait) and (max-height:610px){#overlay .menu-panel,body.playing .overlay .menu-panel{padding:16px}.menu-panel .menu-heading{margin-bottom:10px;padding-bottom:10px}#campaign-settings.menu-settings,.menu-settings{gap:10px}.menu-panel .choice>span{min-height:50px}.menu-panel .stage-preview{min-height:38px;padding-top:7px}.menu-panel .choice-group legend,body.playing .modal .choice-group legend,.menu-panel .section-label{margin-bottom:6px}#overlay .menu-panel #start,body.playing .menu-panel #start{margin-top:12px}}
@media(max-width:350px){.menu-panel .stage-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(orientation:landscape) and (max-height:600px){#overlay .menu-panel:has(.menu-settings:not([hidden])),body.playing .overlay .menu-panel:has(.menu-settings:not([hidden])){padding:14px 20px}.menu-panel:has(.menu-settings:not([hidden])) .menu-settings{gap:6px}.menu-panel .stage-preview{min-height:36px}}
@media(orientation:landscape) and (max-width:700px){.menu-panel .stage-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.menu-panel *{transition:none!important}}
@media(orientation:landscape) and (max-height:600px){body.legacy-game .duel-overlay:not([hidden]),body.legacy-game .overlay:not([hidden]){inset:0;padding:10px}body.legacy-game .setup-card.menu-panel,body.legacy-game .intro-card.menu-panel{width:min(100%,800px);max-width:800px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px 20px;padding:18px 20px}body.legacy-game .menu-panel .menu-heading{grid-column:1;grid-row:1/4;border:0;margin:0;padding:0}body.legacy-game .menu-panel .menu-heading h2{font-size:24px}body.legacy-game .menu-panel .menu-heading p{font-size:11px}body.legacy-game .menu-panel .difficulty{grid-column:2;margin:0}body.legacy-game .menu-panel .difficulty .choice>span{min-height:56px;padding:8px}body.legacy-game .menu-panel .difficulty .choice small{font-size:8px}body.legacy-game .menu-panel .mode-buttons{grid-column:2;margin:0;gap:8px}body.legacy-game .menu-panel .mode-buttons button{min-height:64px}body.legacy-game .menu-panel .setup-note,body.legacy-game .menu-panel .keyboard-note{grid-column:2;margin:0;font-size:9px}body.legacy-game .menu-panel .mission{grid-column:2;margin:0;flex-wrap:wrap;align-items:center}body.legacy-game .menu-panel #start{grid-column:2;margin:0}body.legacy-game .intro-card.menu-panel{align-items:center}}