/* Hand-painted forest game interface */
:root{color:#f9edc9;background:#0b1c18}
body{background:#0b1c18;overflow:hidden}
.shell{max-width:none;padding:0;margin:0;height:100svh;position:relative}
.frame{padding:0;border:0;box-shadow:none;background:#101f19}
.game{height:100svh;min-height:0;max-height:none}
.topbar{position:absolute;z-index:5;right:24px;top:20px;height:auto;pointer-events:none}
.brand,.topbar-note,footer{display:none}
.top-actions{gap:9px;pointer-events:auto}
.icon-button{width:44px;height:44px;border:2px solid #c7a05c;border-radius:12px;color:#f4dfad;background:linear-gradient(145deg,#536146,#1e382c 65%,#10271f);box-shadow:inset 0 1px #fff4b466,inset 0 0 0 2px #12251d,0 4px 0 #13251c,0 6px 12px #0008;font-size:18px}
.icon-button:hover{background:linear-gradient(145deg,#7b8353,#365441);transform:translateY(-2px)}
.icon-button:focus-visible,.primary:focus-visible,.guide-link:focus-visible,.secondary:focus-visible,.choice:focus-visible,.guide-mini:focus-visible{outline:3px solid #fff1a1;outline-offset:3px}
.game-shade{background:linear-gradient(180deg,#10251e85,transparent 24%,transparent 67%,#0d241d99)}
.intro{background-position:center;background-size:cover}
.intro-scrim{background:linear-gradient(90deg,#0c211be8 0%,#102a21ca 31%,#14312544 58%,transparent 78%),linear-gradient(0deg,#10251d85,transparent 35%)}
.intro-content{width:min(570px,46%);padding:30px 0 35px clamp(36px,7vw,115px);text-align:center;filter:drop-shadow(0 4px 5px #081b16);text-shadow:0 3px 1px #183528,0 5px 14px #07170e}
.intro-tag{color:#d6c28c;font-size:10px;letter-spacing:.2em;white-space:nowrap}
.intro-tag span{background:#e9be6d;width:5px;height:5px;margin:0 8px 2px}
.intro-logo{margin:21px -25px 0;font-family:Georgia,serif;font-size:clamp(58px,7vw,105px);line-height:.9;letter-spacing:-.075em;font-weight:900;color:#fff1c1;-webkit-text-stroke:1px #80602e;paint-order:stroke fill;text-shadow:0 3px 0 #a97735,0 6px 0 #543b25,0 9px 0 #203526,0 13px 20px #06150d}
.intro-logo em{color:#f0bf62}.intro-logo span{font-size:.24em;vertical-align:top;margin-left:8px;color:#f9d480;-webkit-text-stroke:0}
.intro-subtitle{display:inline-block;margin:14px 0 3px;padding:7px 18px;color:#f0cf8a;border-top:1px solid #d4ad6699;border-bottom:1px solid #d4ad6699;font-size:10px;font-weight:800;letter-spacing:.22em}
.intro h1{font-size:clamp(14px,1.2vw,18px);line-height:1.7;letter-spacing:.03em;margin:20px 0 24px;color:#f8efce}.intro h1 em{color:#d9e5b9}
.primary,.guide-link,.secondary{font-family:Forest,sans-serif}
.primary{min-height:57px;padding:0 18px;gap:14px;justify-content:center;border:2px solid #f5d68a;border-radius:11px;color:#513414;background:linear-gradient(#ffe5a0 0%,#e8b65c 42%,#bf7932 100%);box-shadow:inset 0 2px #fff6c4,inset 0 -3px #9d5c26,0 4px 0 #513a21,0 7px 14px #071911a8;font-size:12px;text-shadow:0 1px #fff2bd;letter-spacing:.1em}
.primary b{font-size:16px;color:#865a28}.primary:hover{background:linear-gradient(#fff0ba,#f2c874 50%,#d49342);transform:translateY(-2px)}.primary:active{transform:translateY(2px);box-shadow:inset 0 2px #fff6c4,0 2px 0 #513a21}
.intro .primary,.intro .guide-link{max-width:350px;margin-left:auto;margin-right:auto}
.guide-link{display:flex;justify-content:space-between;align-items:center;min-height:50px;margin-top:12px;padding:0 20px;border:2px solid #bd9b60;border-radius:10px;background:linear-gradient(#3b5745,#19382c);box-shadow:inset 0 1px #d0c58c70,inset 0 0 0 2px #173124,0 4px 0 #0c241a,0 6px 12px #0008;color:#f0ddb2;text-align:center;text-shadow:0 2px #12251c;font-size:10px;letter-spacing:.08em}
.guide-link span{float:none;color:#dfbd75;font-size:15px}.guide-link:hover{background:linear-gradient(#506b4e,#254a36);transform:translateY(-2px)}
.intro-foot{justify-content:center;flex-wrap:wrap;margin-top:26px;color:#d2d2a9;font-size:9px;letter-spacing:.12em}
.hud{top:24px;left:25px;right:130px}.hud-left,.hud-right,.progress-block{background:linear-gradient(145deg,#263d2fe8,#142c22e8);border:2px solid #ab8c56;border-radius:11px;box-shadow:inset 0 0 0 2px #12291e,0 3px 0 #1a2519,0 5px 15px #10201880;padding:11px 15px}.hud-left{min-width:220px}.hud-right{min-width:130px;text-align:center}.status{margin-top:7px}.health-icon{color:#e89478}.track,.xp-track{height:9px;border:1px solid #bba470;background:#10251b}.track i{background:linear-gradient(#ffa68a,#c75e50)}.xp-track i{background:linear-gradient(#d5eaaa,#81b66b)}
.game-bottom{left:25px;bottom:25px}.progress-block{width:240px}.build-chip{border:2px solid #bc9b5d;border-radius:9px;background:linear-gradient(#456247,#1b372b);box-shadow:inset 0 1px #ffffff40,0 2px 4px #0007}.build-chip small{background:#f1d28a}.notice{border:2px solid #c6a267;border-radius:8px;background:#1e3c2feb;box-shadow:0 4px 0 #10241c}
.joystick-base{border:2px solid #e2cd92;background:#172c20a8;box-shadow:inset 0 0 0 4px #30483599,0 4px 10px #13221a88}.joystick-stick{border:2px solid #f7e4a8;background:linear-gradient(#e6d298,#9eaa70);box-shadow:0 3px 0 #46543b}
.modal-overlay{background:#0b1a16b8;backdrop-filter:blur(4px)}
.modal{width:min(820px,100%);padding:52px 58px;color:#f9ebc6;background:#18392c url('./assets/ui-forest-panel.png') center / 100% 100% no-repeat;border:0;border-radius:18px;box-shadow:0 24px 70px #000a,0 0 0 2px #7c653c;text-align:center}
.modal:before{display:none}.modal h2{color:#fff1c8;font-family:Georgia,serif;font-weight:900;font-size:clamp(30px,3.1vw,43px);line-height:1.1;letter-spacing:-.02em;text-transform:none;text-shadow:0 3px #0d241b}.modal h2 em{color:#f2c774}.modal p{color:#c3d0af;font-size:12px}.overline{color:#dcbd7a;font-size:9px}.overline i{color:#f3ce75}.modal-top{text-align:left}.modal-count{color:#d3bb82}.choices{gap:14px}
.choice{position:relative;min-height:205px;padding:16px;color:#f8eac6;background:linear-gradient(155deg,#627b54,#314d39 52%,#1a3428);border:2px solid #9b8653;border-radius:12px;box-shadow:inset 0 0 0 2px #223e2d,inset 0 2px #c6ce8b55,0 4px 0 #10251b,0 7px 12px #0a1c1577;text-shadow:0 2px 2px #10251c}
.choice:hover,.choice:focus-visible{background:linear-gradient(155deg,#799462,#426346 52%,#284b36);border-color:#f2d18b;transform:translateY(-5px)}
.choice .icon{width:51px;height:51px;background:radial-gradient(circle at 40% 30%,#668366,#203d2d 70%);border:2px solid #d3b574;border-radius:50%;box-shadow:inset 0 1px 5px #061a12,0 2px 5px #071a12;font-size:28px}.choice .rank{color:#d4c69d}.choice .type{color:#c2d2a5}.choice b{color:#fff0c8;font-size:17px}.choice small{color:#d4dcc2}.choice .synergy{color:#f3c77a}
.modal-foot{color:#c0cba9}.guide-mini{color:#f1d18b}.small-modal{width:min(480px,100%)}.small-modal .primary{margin-top:22px}.secondary{color:#ddc18a}.end-card{width:min(570px,100%)}.end-stats{border-color:#a18c5c}.end-stats span,.end-build-title{color:#c4d0aa}.end-stats b{color:#ffe1a0}.end-combos{color:#efd18a}.end-card>small{color:#c0cdaa}.recipes{border-color:#a88d59;text-align:left}.recipes>div+div{border-color:#8d8057}.recipes>div>span{color:#edcb81}.recipes i{color:#b6bf9f}.recipes small{color:#c8d4b7}.guide-card{width:min(600px,100%)}
@media(max-width:700px){.topbar{top:12px;right:12px}.icon-button{width:39px;height:39px}.intro{background-position:70% center}.intro-scrim{background:linear-gradient(0deg,#0a211af7 0%,#102a21db 40%,#142b2255 72%,#12291b22 100%)}.intro-content{width:100%;max-width:470px;padding:20px 25px max(25px,env(safe-area-inset-bottom));align-self:end;margin:auto auto 0}.intro-tag{font-size:8px;white-space:normal}.intro-logo{font-size:clamp(52px,15vw,74px);margin:13px -15px 0}.intro-subtitle{font-size:8px;margin-top:10px}.intro h1{font-size:13px;margin:12px 0 15px}.intro .primary,.intro .guide-link{max-width:330px}.primary{min-height:50px;font-size:10px}.guide-link{min-height:45px;margin-top:9px}.intro-foot{margin-top:14px;font-size:8px}.hud{top:12px;left:10px;right:102px}.hud-left,.hud-right{padding:7px 9px;border-radius:9px}.hud-left{min-width:0}.hud-right{min-width:78px}.health-box{width:100px}.hud-right strong{font-size:23px}.hud-right span{font-size:7px}.boss-hud{top:80px}.game-bottom{left:10px;right:10px;bottom:12px}.progress-block{width:170px;padding:9px}.build-label{margin-top:8px}.modal-overlay{padding:12px}.modal{padding:36px 27px;max-height:calc(100% - 8px);overflow-y:auto}.modal h2{font-size:27px}.modal p{font-size:10px}.choices{grid-template-columns:1fr;gap:8px}.choice{min-height:0;padding:9px 12px;grid-template-columns:45px 1fr;column-gap:12px}.choice .icon{width:42px;height:42px;font-size:23px}.choice .rank{background:#304b36;color:#f4ddb1}.choice b{font-size:15px}.choice .type{font-size:7px}.choice small{font-size:10px}.modal-foot{margin-top:12px}.recipes>div{padding:8px 0}}
@media(max-height:600px) and (min-width:701px){.intro-content{padding-top:15px;padding-bottom:15px}.intro-logo{font-size:60px;margin-top:10px}.intro h1{margin:10px 0}.intro-foot{margin-top:10px}.modal{padding:35px 55px}.choice{min-height:150px}.choice .type{margin-top:6px}}

/* Keep all intro actions reachable on short screens. */
.intro-content{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.controls-help{margin:0 0 16px;padding:9px 12px;border:1px solid #a58d5a;border-radius:8px;background:#10291caa;color:#e1e9cb;font:12px/1.6 Forest,system-ui,sans-serif;text-align:left}
.controls-help b{color:#f3cd82;font-size:10px;letter-spacing:.05em}
.small-modal .controls-help{margin:12px 0 0}
@media(max-width:700px){.controls-help{font-size:10px;line-height:1.5;margin-bottom:9px;padding:7px 9px}.controls-help b{font-size:9px}}
@media(max-height:450px) and (min-width:701px){.upgrade-card{padding:18px 40px}.upgrade-card h2{font-size:26px;margin:5px 0}.upgrade-card .modal-top p{margin-bottom:7px}.upgrade-card .controls-help{font-size:10px;line-height:1.4;padding:5px 9px;margin-bottom:7px}.upgrade-card .choice{min-height:110px;padding:8px 12px}.upgrade-card .choice .icon{width:34px;height:34px;font-size:20px}.upgrade-card .choice .type{margin-top:4px}.upgrade-card .choice b{margin:3px 0;font-size:15px}.upgrade-card .modal-foot{margin-top:8px}}
.notice{max-width:90%;white-space:normal;text-align:center;line-height:1.35}
.notice-stack{position:absolute;top:19%;left:50%;transform:translateX(-50%);width:min(620px,90%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.notice-stack .notice{position:relative;inset:auto;transform:none;max-width:100%;opacity:1;transition:none}
.notice-stack .notice:not(.show){display:none}
.notice-danger{border-color:#efab86;background:#593329f2;color:#fff1d8}
.notice-result{background:#1e3c2ff0}
@media(max-width:700px){.notice-stack{top:max(17%,142px);left:10px;right:118px;width:auto;transform:none;align-items:flex-start}.notice-stack .notice{font-size:9px;padding:7px 9px;text-align:left}}