#start-screen{width:min(540px,calc(100vw - 32px));box-sizing:border-box;padding:40px;border:1px solid #6a927e;background:#091712;color:#dbe9df;box-shadow:0 24px 100px #000b;font:16px/1.55 monospace}#start-screen::backdrop{background:#030a10ec}#start-screen h1{font-size:clamp(32px,7vw,54px);line-height:1.1;letter-spacing:.04em;margin:24px 0}#start-screen h1 span{display:block;color:#85b99b;font-size:.58em;letter-spacing:.3em;margin-top:8px}#start-screen p{color:#adc4b8;margin:22px 0}.start-actions{display:grid;gap:12px;margin:26px 0}.start-actions button{padding:16px;text-align:left;font-size:18px;border:1px solid #476557;background:#13261d;color:#e7f5e9;cursor:pointer}.start-actions button:not(:disabled):hover{background:#9ac7ad;color:#0c2115}.start-actions small{display:block;font-size:14px;margin-top:4px;font-weight:400;opacity:.8}.start-actions button:disabled{background:#1a2020;color:#737e79;border-color:#343d38;cursor:not-allowed}.start-actions button:focus-visible,.tutorial-actions button:focus-visible,summary:focus-visible{outline:2px solid #e5c56c;outline-offset:3px}
#tutorial-panel{position:fixed;right:22px;top:86px;bottom:auto;z-index:200;width:min(380px,calc(100vw - 44px));max-height:calc(100dvh - 110px);overflow:auto;box-sizing:border-box;background:#0b1b16f5;border:1px solid #7bb397;padding:20px;box-shadow:0 10px 32px #0008;color:#e2efe7;font:16px/1.5 monospace}#tutorial-panel h2{font-size:20px;margin:10px 0}#tutorial-panel p{margin:12px 0}#tutorial-panel small{font-size:14px;color:#a1cfb7}.tutorial-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.tutorial-actions button{font-size:14px;padding:10px;cursor:pointer}.tutorial-actions button:disabled{opacity:.35;cursor:not-allowed}
#context-menu{width:330px;max-width:calc(100vw - 24px)}#detail h2{font-size:22px;margin:4px 0 10px}#detail .action{padding:12px 10px;font-size:14px;line-height:1.4;text-align:left;margin:6px 0}#detail .primary{border-left:3px solid #98d4b0}#detail .city-facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}#detail .city-facts span{padding:5px 7px;background:#ffffff08;font-size:14px}#detail .sub{font-size:14px;line-height:1.45}#detail .order-section{border:1px solid #456051;margin:12px 0;padding:0 10px}#detail .order-section summary{cursor:pointer;padding:12px 0;font-size:15px;font-weight:600;color:#c1e1cc}#detail .order-section[open]{padding-bottom:10px}#detail .cityrow{padding:10px 0;border-bottom:none}#detail .cityrow>.name{display:none}
@media(max-width:700px){#start-screen{padding:24px}#tutorial-panel{right:12px;top:76px;bottom:auto;width:calc(100vw - 24px);max-height:calc(100dvh - 165px);padding:14px;font-size:14px}#tutorial-panel h2{font-size:18px}.tutorial-actions{margin-top:10px}}
/* Locale labels remain readable at narrow widths, without adding map effects. */
.language-choice{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;color:#b4c3ba;font-size:12px}
.language-choice select{width:160px;padding:8px;background:#111d19;color:#e5efe9;border:1px solid #465950;border-radius:4px}
#tutorial-panel p{line-height:1.55;max-height:36vh;overflow:auto}
.tutorial-actions{flex-wrap:wrap}
#start-screen .start-actions button small{white-space:normal}
#start-screen .system-name{margin:-12px 0 24px;color:#85b99b;font-size:14px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase}
#intro-background{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:40;pointer-events:none;filter:saturate(.88) contrast(1.04)}#intro-video-shade{position:fixed;inset:0;z-index:41;pointer-events:none;background:radial-gradient(circle at center,transparent 20%,rgba(0,4,2,.2) 70%,rgba(0,4,2,.55) 100%)}body:not(.intro-playing) #intro-background,body:not(.intro-playing) #intro-video-shade{display:none}body.intro-playing dialog::backdrop{background:rgba(0,4,2,.32)!important;backdrop-filter:blur(1px)!important}body.intro-playing #start-screen,body.intro-playing #campaign-picker,body.intro-playing #uk-missions,body.intro-playing #difficulty-picker,body.intro-playing #faction-picker,body.intro-playing #tutorial-recommendation,body.intro-playing #briefing,body.intro-playing #beta-welcome,body.intro-playing #mobile-notice{background:rgba(3,16,8,.88);box-shadow:0 0 0 1px #102e17,0 0 70px rgba(33,255,69,.3)}
#mobile-notice{width:min(520px,calc(100vw - 28px));box-sizing:border-box;padding:28px;border:1px solid #8c743d;background:#091712;color:#dbe9df;box-shadow:0 24px 100px #000d;font:16px/1.55 monospace}#mobile-notice::backdrop{background:#030a10f2}#mobile-notice h2{margin:14px 0;color:#e4c879;letter-spacing:.06em}#mobile-notice p{color:#adc4b8;margin:16px 0}#mobile-notice button{width:100%;margin-top:10px;padding:14px;font-weight:bold;letter-spacing:.08em}
[hidden]{display:none!important}
/* Compact command transmissions: one portrait beside one order. */
#tutorial-panel{width:min(440px,calc(100vw - 44px));padding:16px;background:#0b1515f5;border-color:#66766c}
.command-transmission{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;margin-top:14px}
.command-crt{position:relative;margin:0;background:#020404;border:4px solid #252a28;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 18px #000}
.command-crt img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.command-crt figcaption{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:10px monospace;color:#cee1bb;text-shadow:0 1px 3px #000}
#tutorial-panel h2{margin:0 0 8px;font-size:19px;color:#e4d4a0;line-height:1.25}
#tutorial-panel p{font-size:16px;line-height:1.45;margin:0 0 12px;max-height:none;overflow:visible}
#tutorial-status{display:block;min-height:20px;margin-top:10px}
.tutorial-actions{gap:8px;margin-top:10px}.tutorial-actions button{padding:9px;font-size:14px}
#tutorial-exit{margin-left:auto;background:transparent;border:0;color:#9aa9a3}
.mission-timing{font-size:12px;color:#9aa9a3;margin-top:6px}.mission-timing summary{cursor:pointer;width:max-content}
#tutorial-objective{position:absolute;left:0;top:0;z-index:90;border:0;background:transparent;color:#ffe3a0;min-width:12px;width:12px;height:12px;padding:0;border-radius:0;box-shadow:none;cursor:pointer;pointer-events:auto;animation:tutorial-objective-blink .85s steps(2,end) infinite}

.mission-active .cardintro,.mission-active .intel-card,.mission-active .footnote,.mission-active #nextcard,.mission-active #war-goal{display:none}
.launch-general{border:4px solid #252a28;border-radius:12px;box-shadow:inset 0 0 24px #000}
.launch-general img{filter:none;object-position:center}
.launch-general::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000015 3px 4px);box-shadow:inset 0 0 25px #0007}
@media(max-width:1100px){#tutorial-panel{width:350px}.command-transmission{grid-template-columns:84px minmax(0,1fr);gap:10px}#tutorial-panel h2{font-size:17px}}
@media(max-width:700px){#tutorial-panel{width:calc(100vw - 24px)}.command-transmission{grid-template-columns:72px minmax(0,1fr)}}

#tutorial-objective::before,#tutorial-objective.build-objective::before{content:'';display:block;width:0;height:0;margin:2px auto 0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid #ffe3a0;background:none;border-radius:0;filter:drop-shadow(0 1px 1px #000)}
@keyframes tutorial-objective-blink{50%{opacity:.3;filter:brightness(1.65)}}
#detail .tutorial-order-pulse{position:relative;z-index:1;border-color:#ffe08a!important;background:#594817!important;color:#fff2bd!important;box-shadow:0 0 0 2px #ffe08a,0 0 18px #ffc94d99!important;animation:tutorial-order-blink .85s steps(2,end) infinite}
@keyframes tutorial-order-blink{50%{filter:brightness(1.55);box-shadow:0 0 0 3px #fff0a8,0 0 25px #ffd45ccc!important}}

#tutorial-recommendation{max-width:620px;width:calc(100% - 48px)}
#tutorial-recommendation p{line-height:1.6}
.briefing-general{float:left;object-fit:cover;border-radius:12px;margin:0 18px 12px 0}
.briefing-purpose::after{content:"";display:block;clear:both}

/* Tutorial cues live on the actual interactive icon, never on top of its hit area. */
#labels .citylabel.tutorial-friendly-target{z-index:12;outline:3px solid #45ff91;outline-offset:4px;animation:tutorial-friendly-flash 1s ease-in-out infinite}
#labels .citylabel.tutorial-enemy-target{z-index:12;outline:3px solid #ff3939;outline-offset:6px;animation:tutorial-enemy-flash 1s ease-in-out infinite}
#labels .citylabel.tutorial-enemy-target::after{content:'';position:absolute;inset:-14px;border:3px dashed #ff5151;border-radius:50%;pointer-events:none}
@keyframes tutorial-friendly-flash{0%,100%{background:#14673e;border-color:#45ff91;box-shadow:0 0 0 5px #3cff7940,0 0 20px #3cff79}50%{background:#359561;border-color:#b0ffce;box-shadow:0 0 0 9px #3cff7930,0 0 28px #3cff79}}
@keyframes tutorial-enemy-flash{0%,100%{background:#702323;border-color:#ff3939;box-shadow:0 0 0 6px #ff393940,0 0 24px #ff3939}50%{background:#ad2929;border-color:#ffb0a6;box-shadow:0 0 0 11px #ff393930,0 0 32px #ff3939}}
#tutorial-objective.build-objective{width:28px;height:28px;border:2px dashed #45ff91;border-radius:50%;background:#16492d99;box-shadow:0 0 12px #3cff79;animation:tutorial-objective-blink 1s ease-in-out infinite}
#tutorial-objective.build-objective::before{content:'+';width:auto;height:auto;margin:0;border:0;color:#adffcc;font:24px/24px monospace;filter:none}