/* L09: a scene-led RTS menu, forged bronze / dark timber / old gold. */
:root{--forge:#252b2b;--brass:#aa8751;--ivory:#f0dfb7;--steel:#6b7676;--menu-text:#e6d8b9}
.home-screen #battlefield{inset:0;opacity:1;transition:none;background:#273d41}
.home-screen .sky{display:none}
.home-screen #pause-cover,.home-screen #pause-plan-tools,.home-screen #boss,.home-screen #context,.home-screen #moment,.home-screen #floaters{visibility:hidden}
#welcome[open]{display:block;position:fixed;inset:0;margin:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:0;overflow:hidden;background:transparent;color:var(--menu-text);box-shadow:none;text-align:left}
#welcome::backdrop{background:transparent;backdrop-filter:none}
#welcome:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#07191d0a,transparent 47%,#0b121514),linear-gradient(0deg,#09131638,transparent 25%)}
#welcome:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 5px #171f20,inset 0 0 0 7px #9280668c,inset 0 0 0 10px #171d20,inset 0 0 65px #0b151a2a}
.landing-title{position:absolute;top:clamp(27px,6vh,68px);left:clamp(26px,4vw,90px);filter:drop-shadow(0 3px 7px #07171d)}
.landing-title .title-top{display:block;color:#e9d5a4;font:11px Georgia,var(--serif);letter-spacing:6px;margin:0 0 9px 5px;text-shadow:0 1px 3px #000}
#welcome .landing-title h2{font:700 clamp(48px,5.5vw,88px)/1.1 'STKaiti','KaiTi',var(--serif);letter-spacing:5px;margin:0;color:#edcf8e;background:linear-gradient(#fff2c3 7%,#e8c281 35%,#b1833e 53%,#f7d591 66%,#bb8439);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #553919) drop-shadow(0 4px 0 #192324)}
.landing-subtitle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:#ffedc1;font:20px 'STKaiti','KaiTi',var(--serif);letter-spacing:8px;text-shadow:0 2px 3px #000}
.landing-subtitle:before,.landing-subtitle:after{content:'';width:25px;height:1px;background:linear-gradient(90deg,transparent,#d5b575)}
.landing-subtitle:after{transform:rotate(180deg)}
.landing-rail{position:absolute;right:clamp(24px,4.5vw,100px);top:clamp(128px,23vh,250px);width:300px;padding:20px 20px 17px;isolation:isolate;background:repeating-linear-gradient(89deg,#ffffff02 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px),linear-gradient(115deg,#384043ed,#21282bf5 55%,#2d3538ee);border:5px solid #303739;border-radius:2px;box-shadow:0 0 0 1px #9a8d72,0 0 0 3px #1e2427,0 0 0 5px #5c6566,inset 0 0 0 1px #ac956569,inset 0 0 0 4px #121b1d66,0 14px 35px #09131785}
.landing-rail:before,.landing-rail:after{content:'';position:absolute;top:-105vh;height:105vh;width:23px;z-index:-1;background:url("../assets/ui/menu-chain.png") repeat-y center bottom;filter:drop-shadow(3px 2px 3px #0008)}
.landing-rail:before{left:25px}.landing-rail:after{right:25px}
.rail-rivets{position:absolute;inset:7px;pointer-events:none;background:radial-gradient(circle at 3px 3px,#c3b48b 0 1px,#5d6460 2px,#10191b 3px,transparent 4px),radial-gradient(circle at calc(100% - 3px) 3px,#c3b48b 0 1px,#5d6460 2px,#10191b 3px,transparent 4px),radial-gradient(circle at 3px calc(100% - 3px),#c3b48b 0 1px,#5d6460 2px,#10191b 3px,transparent 4px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#c3b48b 0 1px,#5d6460 2px,#10191b 3px,transparent 4px)}
.rail-heading{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 17px;color:#c6b385;font:14px 'KaiTi',var(--serif);letter-spacing:5px;text-shadow:0 2px #000}
.rail-heading:before,.rail-heading:after{content:'◆';font:8px Georgia;color:#9f8958}
#welcome .landing-rail button{width:100%;min-height:50px;border-radius:1px;margin:0;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 14px;font:18px 'STKaiti','KaiTi',var(--serif);letter-spacing:2px;transition:filter .16s,border-color .16s,box-shadow .16s;text-shadow:0 2px 2px #000}
#welcome .landing-rail button:focus-visible{outline:2px solid #ffe2a1;outline-offset:4px}
#welcome .landing-rail button.primary{background:linear-gradient(#a9884c 0 2px,#58605b 2px 4px,#173c43 4px,#0f2930 49%,#102329 50%,#22464c calc(100% - 5px),#111d20 calc(100% - 5px));border:1px solid #b69b62;color:#f5dfa7;box-shadow:0 0 0 3px #11191c,inset 0 0 0 3px #172529,0 4px 6px #0008}
#welcome .landing-rail button.primary:hover{filter:brightness(1.22);border-color:#efcf8c;box-shadow:0 0 0 3px #11191c,inset 0 0 8px #9cd7d929,0 0 13px #c8a56944}
#welcome .landing-rail button span:last-child:not(:first-child){font-size:17px;color:#c4a76d;position:absolute;right:15px}
#welcome #enter-button{margin:0 0 13px;min-height:56px}
#welcome.has-save #enter-button{font-size:15px;min-height:45px;background:linear-gradient(#3f4948,#293336);border-color:#74796b;color:#d0c6ad;box-shadow:inset 0 0 0 3px #182326,0 2px 4px #0006}
#welcome .home-guide-button{background:linear-gradient(#48514f 0 2px,#283739 2px,#233034 55%,#1e2b2e);border:1px solid #7d887d;min-height:50px;color:#ead9ae;margin:0 0 10px;box-shadow:inset 0 0 0 3px #162326,0 3px 4px #0006;text-align:center}
#welcome .home-guide-button strong{font:17px 'KaiTi',var(--serif);letter-spacing:2px}
#welcome .home-guide-button small{display:none}
#welcome .home-guide-arrow{display:none}
#welcome .home-secondary{margin:0;display:block}
#welcome .home-secondary button{font:14px var(--serif);letter-spacing:1px;min-height:42px;padding:9px;color:#b9baa8;background:#141e224d;border:1px solid #6f766348;box-shadow:inset 0 1px #a6a89215}
#welcome .landing-rail button:hover{filter:brightness(1.18)}
#welcome .welcome-note{font:11px/1.9 var(--sans);letter-spacing:.5px;color:#b5b7a8;margin:15px 0 0;text-align:center;text-shadow:0 1px 2px #000}
#welcome .resume-card{border:0;border-radius:0;border-bottom:1px solid #91917750;background:none;padding:0 0 16px;margin:0 0 13px}
#welcome .resume-card>span{color:#c4c5ad;font:11px var(--sans);letter-spacing:2px;display:block;text-align:center}
#welcome .resume-card p{color:#b9bbaa;font:11px/1.8 var(--sans);margin:7px 0 12px;white-space:pre-line;text-align:center}
#welcome .resume-card .primary{font-size:20px;min-height:54px}
#welcome .landing-rail .resume-card .primary{justify-content:center}
#welcome .save-warning{font-size:11px;color:#ffd7a6;line-height:1.7}
#home-help.has-guide-reminder:after{right:23px;top:11px;width:8px;height:8px;box-shadow:0 0 0 2px #1d2a2e,0 0 8px #df503c;background:#f35a43}
.landing-caption{position:absolute;left:clamp(30px,4vw,90px);bottom:40px;color:#ede4ca;text-shadow:0 2px 5px #000;letter-spacing:4px}
.landing-caption b{display:block;font:22px 'KaiTi',var(--serif);letter-spacing:5px;margin-bottom:10px}
.landing-caption span{font:10px var(--sans);letter-spacing:4px;color:#c2c8bf}
#scenery-status{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:11px var(--sans);color:#e9debd;text-shadow:0 2px 4px #000;white-space:nowrap}

/* Related overlays use the same bronze edging, without hiding the live battle. */
#help,#result,#confirm,#new-run-confirm,#post-preview{background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 5px),linear-gradient(120deg,#34433deb,#1b2e2aec);border:3px solid #7d8067;border-radius:3px;color:#dfdcc9;box-shadow:0 0 0 1px #191f1e,inset 0 0 0 1px #b9a77766,0 18px 65px #0008}
#help::backdrop,#result::backdrop,#confirm::backdrop,#new-run-confirm::backdrop,#post-preview::backdrop{background:#0b191c22;backdrop-filter:none}
#help h2,#result h2,#confirm h2,#new-run-confirm h2,#post-preview h2{color:#e7c78b;font-family:'KaiTi',var(--serif)}
#help .eyebrow,#result-kicker,#post-preview .eyebrow{color:#c9b885}
#help .dialog-close{color:#d2d5bd}#tutorial-stage h3{color:#e8d29f}.tutorial-lead,#tutorial-stage figcaption,.tutorial-safety,.tutorial-actions>span{color:#c6cbb5}
.tutorial-steps button{color:#c6cbb7;border-color:#84917a66;background:#1c322c}.tutorial-steps b{color:#d4b777}.tutorial-steps [aria-current=step]{background:linear-gradient(#4f6a58,#344b40);border-color:#b9a46d;color:#fff1cb;box-shadow:inset 0 1px #d4d0a233}.tutorial-steps [aria-current=step] b{color:#ffe1a0}
.tutorial-pair,.tutorial-wide{background:#142c2590;border-color:#77856c88}.tutorial-tip{background:#223b31;color:#c4ceba;border-color:#b8a46a}.tutorial-tip>b,#tutorial-stage figcaption b,.tutorial-flow{color:#e4c18c}.tutorial-roles{color:#bbc9b4}.tutorial-roles b{color:#e3c18b}.combo-row{background:#1b322a;border-color:#82947466}.combo-person{color:#e4c38a}.combo-person small{color:#bfccb8}.combo-row>span{color:#d3b673}
#help .primary,#result .primary,#post-preview .primary,#confirm .primary,#new-run-confirm .primary{background:linear-gradient(#677d58,#3c583f);border-color:#ae9b64;box-shadow:inset 0 1px #d3d6ae66,0 3px 0 #14251d;color:#fff1ca}
#help .secondary,#result .secondary,#post-preview .secondary,#confirm .secondary,#new-run-confirm .secondary{background:linear-gradient(#42504a,#2a3a32);color:#dfd8ba;border-color:#8a8d6a}
#confirm p,#new-run-confirm p,#result>p,#result .result-stats small,#result .leader,#result .ad-tip,.post-note{color:#c4ccb8}
#result .result-stats b,#result .leader>b,#result .reward-line b,.post-draft h3{color:#e9cc91}
#result .reward-line,#result-advice,.support-report,.post-draft{background:#142e25;color:#bdcbb6;border-color:#8f946355}#result-advice b,.support-report strong{color:#ddc084}.post-draft p{color:#c1cfba}
#result .result-actions{background:#20352e;box-shadow:0 -7px 12px #20352e}

/* Compact, translucent command surfaces; the existing battlefield stays clear. */
:root{--live-panel:rgba(25,43,36,.78);--live-inset:rgba(12,29,23,.44);--live-edge:rgba(192,174,119,.65)}
.controls{background:rgba(32,47,39,.82);border:2px solid #8d906b;border-radius:3px;box-shadow:inset 0 0 0 1px #17251e,0 6px 17px #0003}
.controls .temple-button small{color:#b9c3a9}.controls .temple-button b{color:#ebd5a1}.controls .temple-button>span:first-child{color:#c8ad74}.controls .chevron,.controls .utility button{color:#e0d5b4}.controls .utility button:hover{color:#fff0be;background:#c5ba8b18}
.controls .primary,#context .primary,#pause-cover .primary{background:linear-gradient(#587766,#2e5147);border-color:#b5a476;color:#ffedc4;box-shadow:inset 0 1px #d9ddae55,0 3px 0 #142820}
.controls .wave-button small{color:#c5d2bb}.controls .wave-button.combat{background:linear-gradient(#465346,#2c4034);color:#d8cfac;border-color:#8d936e}.controls .wave-button.combat small{color:#b0c0a7}
.map-zoom,.pause-plan-tools{background:rgba(32,49,40,.82);border-color:#a69b6d;color:#e7d1a1;border-radius:3px}.map-zoom button{color:#eedeb3}.map-zoom button:hover:not(:disabled){background:#d4d1a71f}.pause-plan-tools button{color:#e5d4a5;background:#3d5847;border-color:#909469}
#context{background:var(--live-panel);border:2px solid var(--live-edge);border-radius:3px;color:#d6dec8;text-shadow:0 1px 2px #0008;box-shadow:inset 0 0 0 1px #17291d,0 10px 25px #0004}
#context h3{color:#e6cd94;font-family:'KaiTi',var(--serif)}#context .panel-top>div>small,#context .unit-description,#context .panel-note,#context .cost-line,#context .stat-grid small,#context .unit-totals,#context .charge-top,#context .check-row{color:#c6d1ba}
#context .stat-grid{background:#102b202d;border-color:#a1b08a44}#context .stat-grid>div{border-color:#b5bd8e33}#context .stat-grid b,#context .unit-totals b{color:#ead3a0}
#context .build-card{background:#112a2044;border-color:#939e7288;border-radius:3px}#context .build-card:hover:not(:disabled){background:#49654b99;border-color:#d6c68c}#context .build-card strong{color:#eed3a0}#context .build-card small,#context .build-card b i{color:#c2ceb3}#context .build-card b{color:#e9c990}
#context .portrait{border-color:#a2ac7555;background:#273d2c88}#context .panel-close{color:#dfdfbf}#context .upgrade-preview{background:var(--live-inset);border-color:#bdac75;color:#c5d0b7}#context .upgrade-preview strong,#context .cost-line b,#context .promotion-title{color:#e8ca8f}
#context .temple-effects{color:#c4d3b9;border-color:#b4a777}#context .temple-steps span{color:#a4b29a;border-color:#80916b55}#context .temple-steps span.active{color:#efd4a0;background:#52664877;border-color:#c6b57d}#context .temple-steps span.done{color:#c0d2a7}#context .secondary{background:#334b38aa;color:#e0dab9;border-color:#a4a373}
#context .synergy-note{color:#c6d0b4;background:#1a362780;border-color:#b7a770}#context .synergy-note b{color:#ebc68b}#context .unit-tags span{color:#d2cfaa;background:#354d37bb;border-color:#9aa87966}#context .skill-button{color:#e6d3a6;background:#3c583c99;border-color:#aeac7777}#context .charge-track{background:#b9c18a22}#context .charge-track i{background:#ccbb7c}
#pause-cover{background:rgba(8,24,18,.22);text-shadow:0 2px 4px #000,0 0 12px #071c12}#pause-cover h2,#pause-cover>span{color:#f3d49a}#pause-cover p,#pause-cover .save-note,#pause-cover .local-save-note{color:#e5e7d2}#pause-cover>.secondary{background:rgba(33,57,40,.85);color:#f0dfb5;border-color:#b7ac78}#pause-cover>#pause-plan{color:#f3e4bd;text-shadow:0 1px 4px #000}
#help-button.has-guide-reminder{background:#52644666;color:#ffdd9e;border-color:#c4ae7077}
#context .build-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#context{padding:16px}#context .panel-top{margin-bottom:12px}#context .stat-grid{padding:9px 0}#context .stat-grid b{font-size:19px}
#context .unit-description{font-size:12px;line-height:1.7;margin:10px 0}#context .unit-tags{margin:6px 0 8px}#context .upgrade-preview{padding:9px 10px;margin:10px 0;font-size:12px;line-height:1.65}
#context .cost-line{margin:10px 0 8px}#context .panel-buttons{margin-top:10px}#context .unit-totals{margin-top:10px;padding-top:9px;font-size:11px}
#context .build-list .build-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px;padding:12px 4px;min-height:145px}
#context .build-list .portrait{width:34px;height:35px;flex-shrink:0}
#context .build-list .build-card strong{font-size:13px}#context .build-list .build-card small{font-size:10px;line-height:1.6}#context .build-list .build-card b{margin:0;font-size:15px}#context .build-list .build-description{display:none}
@media(min-width:701px){.context-open .map-zoom{left:24px;right:auto;top:315px}}
@media(max-width:700px){.context-open .map-zoom{visibility:hidden}#context .build-list .build-card{min-height:125px}}

@media(min-width:1550px){.landing-rail{width:330px;padding:25px}.landing-rail .rail-heading{margin-bottom:21px}#welcome .landing-rail button{min-height:56px}#welcome .welcome-note{font-size:12px}}
@media(max-height:680px) and (min-width:701px){.landing-title{top:25px}.landing-rail{top:80px;width:285px;padding:16px}.rail-heading{margin-bottom:12px}#welcome .landing-rail button{min-height:44px;padding:9px}#welcome #enter-button{min-height:48px;margin-bottom:10px}#welcome .welcome-note{margin-top:10px}#welcome .resume-card{padding-bottom:11px;margin-bottom:10px}#welcome .resume-card p{font-size:10px;line-height:1.5}.landing-caption{bottom:25px}}
@media(max-width:700px) and (orientation:portrait){
  #welcome:before{background:linear-gradient(0deg,#091a2066,transparent 48%)}
  .landing-title{top:max(25px,env(safe-area-inset-top));left:24px}
  #welcome .landing-title h2{font-size:49px;letter-spacing:3px}.landing-title .title-top{font-size:8px;letter-spacing:3px;margin-bottom:8px}.landing-subtitle{font-size:16px;letter-spacing:5px;gap:8px;margin-top:9px}
  .landing-rail{top:auto;bottom:max(35px,calc(env(safe-area-inset-bottom) + 22px));right:22px;left:22px;width:auto;padding:16px 20px 13px;background:linear-gradient(120deg,#344345ef,#1b2a2ff0);border-width:3px}
  .landing-rail:before,.landing-rail:after{height:38px;top:-40px;width:17px;background-size:17px 33px}
  .rail-heading{font-size:12px;letter-spacing:4px;margin-bottom:12px}
  #welcome .landing-rail button{min-height:48px;font-size:17px}
  #welcome #enter-button{min-height:51px;margin-bottom:11px}
  #welcome .home-guide-button{min-height:46px;margin-bottom:8px}
  #welcome .home-secondary button{min-height:39px;font-size:13px}
  #welcome .welcome-note{font-size:10px;line-height:1.7;margin-top:11px}
  #welcome .resume-card{padding-bottom:12px;margin-bottom:11px}
  #welcome .resume-card>span{display:none}
  #welcome .resume-card p{font-size:10px;line-height:1.6;margin:0 0 10px}
  #welcome.has-save #enter-button{min-height:40px;font-size:14px;padding-block:8px}
  .landing-caption{display:none}#scenery-status{bottom:13px;font-size:9px}
}
@media(max-height:700px) and (max-width:700px) and (orientation:portrait){.landing-rail{bottom:25px;padding:12px 17px 10px}.rail-heading{margin-bottom:10px}#welcome .landing-rail button{min-height:43px;padding:9px}#welcome #enter-button{min-height:47px;margin-bottom:9px}#welcome .welcome-note{margin-top:8px;font-size:9px}#welcome .home-guide-button{min-height:43px}#welcome .home-secondary button{min-height:34px}.landing-title{top:22px}#welcome .landing-title h2{font-size:42px}.landing-subtitle{font-size:14px}#welcome.has-save .resume-card p{font-size:9px}}
@media(orientation:landscape) and (max-height:480px){.landing-title{left:25px;top:25px}#welcome .landing-title h2{font-size:46px}.landing-subtitle{font-size:15px}.landing-title .title-top{font-size:8px}.landing-rail{top:22px;right:23px;width:265px;padding:13px 17px}.rail-heading{margin-bottom:9px}#welcome .landing-rail button{min-height:39px;padding:8px;font-size:16px}#welcome #enter-button{min-height:43px;margin-bottom:9px}#welcome .home-guide-button{min-height:41px;margin-bottom:8px}#welcome .home-secondary button{min-height:33px;font-size:12px}#welcome .welcome-note{font-size:9px;margin-top:9px}.landing-caption{bottom:25px}.landing-caption b{font-size:17px}#welcome .resume-card{padding-bottom:10px;margin-bottom:10px}#welcome .resume-card>span{display:none}#welcome .resume-card p{font-size:9px;line-height:1.5;margin:0 0 8px}#welcome.has-save #enter-button{min-height:35px;font-size:13px}}

/* L12: compact portrait commands leave the rising summit and standard visible. */
@media(max-width:700px) and (orientation:portrait){
  .landing-rail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;bottom:max(18px,env(safe-area-inset-bottom));padding:12px 16px 10px}
  .landing-rail>.rail-heading,.landing-rail>.resume-card,.landing-rail>.home-secondary,.landing-rail>.welcome-note{grid-column:1/-1}
  .rail-heading{margin:0;font-size:11px;line-height:18px}
  #welcome .resume-card{padding:0;margin:0;border:0}
  #welcome .resume-card p,#welcome.has-save .resume-card p{font-size:9px;line-height:1.5;margin:0 0 7px}
  #welcome .resume-card .primary{min-height:46px;font-size:19px;padding:10px}
  #welcome .landing-rail #enter-button,#welcome .landing-rail .home-guide-button{min-height:44px;margin:0;padding:8px 5px;font-size:13px;letter-spacing:1px}
  #welcome .home-guide-button strong{font-size:13px;letter-spacing:1px}
  #welcome:not(.has-save) #enter-button{grid-column:1/-1}
  #welcome:not(.has-save) .home-guide-button{grid-column:1/-1}
  #welcome .home-secondary button{min-height:32px;padding:6px;font-size:12px}
  #welcome .welcome-note{margin:0;font-size:9px;line-height:1.5}
  #welcome .landing-title h2{font-size:40px}.landing-subtitle{font-size:14px;margin-top:7px}
  #home-help.has-guide-reminder:after{right:8px;top:5px}
  #welcome .scene-view{top:auto;bottom:285px;left:22px;right:auto}
}