@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101b23;--panel:#17252e;--line:#30434d;--muted:#a0b2bb;--lime:#d4ff63;--text:#f4f6ed;--orange:#ff9a64}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 35% 10%,#233b43 0,transparent 60%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid transparent;color:inherit;border-radius:8px;padding:12px 16px;font-weight:700}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #86deff;outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.12)}button:active:not(:disabled){transform:translateY(1px)}header,main{max-width:1340px;margin:auto;padding:0 30px}header{height:85px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.brand{color:inherit;text-decoration:none;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-icon{font-size:34px;color:var(--lime)}.brand small{font-size:11px;letter-spacing:1.4px;border-left:1px solid var(--line);padding-left:14px;color:var(--muted)}.quiet{background:transparent;color:var(--muted);border-color:var(--line)}.topline{display:flex;justify-content:space-between;align-items:center;margin:28px 0 22px;gap:20px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;color:var(--lime);margin:0 0 8px}h1,h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;margin:0;font-weight:700;line-height:1.05}h1{font-size:46px;letter-spacing:.5px}h2{font-size:32px}p{line-height:1.55}.mode-tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:10px;background:#0d171d}.mode-tabs button{background:transparent;color:var(--muted);font-size:14px}.mode-tabs button.selected{background:#32443f;color:var(--lime)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}.arena{border:1px solid #445951;border-radius:14px;overflow:hidden;background:#14212a;box-shadow:0 20px 65px #0004}.arena-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;font-size:12px;letter-spacing:1.3px;border-bottom:1px solid #ffffff0c}.arena-bar>span{color:var(--lime)}.arena-bar label{display:flex;align-items:center;gap:6px;letter-spacing:0;color:var(--muted);font-size:13px}input[type=checkbox]{accent-color:var(--lime)}.scene{position:relative;background:radial-gradient(ellipse at 50% 48%,#3d5551 0,#23383c 45%,#15252e 78%)}canvas{width:100%;height:540px;display:block;touch-action:none;user-select:none}.map-corner{position:absolute;top:18px;left:20px;display:flex;flex-direction:column;gap:5px;pointer-events:none}.map-code{font-size:11px;letter-spacing:2px;color:#aec9c3}#routeLength{font-size:11px;color:#849e9d}.toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#0b1725e8;padding:10px 18px;border:1px solid #698885;border-radius:7px;font-weight:700;font-size:14px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s}.toast.show{opacity:1}.battle-hud{display:flex;gap:24px;align-items:center;border-top:1px solid var(--line);padding:14px 20px;background:#101e26}.health{flex:1}.health>span,.stat>span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:6px}.health b{float:right;font-size:14px;color:var(--text)}.health-track{height:5px;background:#34444a;border-radius:4px;overflow:hidden}.health-track i{display:block;background:var(--lime);height:100%;width:100%;transition:width .15s}.stat{min-width:55px}.stat b{font-size:20px;font-variant-numeric:tabular-nums}.arena-hint{font-size:12px;color:var(--muted);padding:0 20px;margin:10px 0 14px}.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:8px;margin:8px 0 20px}.badge{font-size:10px;letter-spacing:1px;padding:5px 7px;border:1px solid #526251;white-space:nowrap;color:var(--lime);border-radius:4px}.muted{color:var(--muted);font-size:14px;margin:16px 0}.gear{display:grid;gap:9px;margin:20px 0}.gear-card{text-align:left;display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:10px;background:#192a33;border:1px solid var(--line);padding:13px 12px}.gear-card[aria-pressed=true]{border-color:#8ba752;background:#293b35}.gear-card .icon{font-size:23px;background:#ffffff08;border-radius:8px;padding:8px;text-align:center;color:var(--lime)}.gear-card b{display:block;font-size:15px;margin-bottom:3px}.gear-card small{color:var(--muted);font-size:11px;font-weight:400}.gear-card .check{color:var(--lime)}.intel{border-top:1px solid var(--line);padding:16px 0 4px}.intel .eyebrow{color:var(--orange);font-size:10px}.intel p{color:var(--muted);font-size:13px;margin:8px 0 16px}.primary{background:var(--lime);color:#15251e}.secondary{background:#263941;border-color:#4c6268}.wide{width:100%;margin-top:8px}.primary.wide{display:flex;justify-content:space-between;align-items:center}.small{color:var(--muted);font-size:11px;line-height:1.5}.form-row{display:grid;gap:10px;margin:18px 0}label{font-size:13px;color:var(--muted)}input:not([type=checkbox]){display:block;background:#101c24;border:1px solid var(--line);border-radius:6px;color:var(--text);width:100%;padding:10px;margin-top:5px;min-width:0}.budget-row{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;margin:20px 0 12px}.budget-row b{color:var(--lime)}.palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool{text-align:left;background:#1e3039;border-color:var(--line);padding:12px;font-size:13px}.tool.selected{background:#334537;border-color:#9daf65;color:var(--lime)}.tool small{display:block;margin-top:6px;color:var(--muted);font-weight:400;font-size:11px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:#101e26}.action{background:#d4ff63;color:#15251e;padding:14px 12px;display:flex;justify-content:space-between;align-items:center}.action b{font-size:16px}.action small{font-size:11px;display:block}.action.active{background:#89deff}.action:disabled{opacity:.5}.result{position:absolute;inset:0;background:#0a151dcc;backdrop-filter:blur(5px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px}.result h2{font-size:48px}.result p{color:#c1d1d3;max-width:360px;font-size:14px}.result-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.result-buttons button{font-size:13px}.live-key{font-size:65px;color:var(--lime);font-family:'Barlow Condensed',sans-serif;padding:35px 0}.live-key span{color:var(--muted);font-size:32px}.share-panel{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:20px}.share-panel>div{display:flex;gap:10px;align-items:center}.after-run{display:flex;gap:15px;align-items:center;margin:15px 0}.notice{min-height:22px;font-size:13px;color:var(--lime)}footer{display:flex;justify-content:space-between;gap:15px;padding:20px 0 30px;color:#81969d;font-size:10px;letter-spacing:1px;border-top:1px solid var(--line)}footer a{color:var(--muted)}[hidden]{display:none!important}
@media(min-width:1450px){canvas{height:590px}}@media(max-width:1000px){header,main{padding-left:20px;padding-right:20px}.game-layout{gap:18px;grid-template-columns:minmax(0,1fr) 270px}canvas{height:490px}.gear-card{padding:10px 8px;gap:6px}.gear-card small{font-size:10px}}
@media(max-width:760px){header,main{padding-left:12px;padding-right:12px}header{height:62px}.brand{font-size:14px;letter-spacing:1px;gap:7px}.brand-icon{font-size:27px}.brand small{font-size:8px;max-width:64px;padding-left:8px}.quiet{font-size:12px;padding:9px 11px}.topline{margin:17px 0 14px;align-items:end;gap:8px}.topline .eyebrow{font-size:8px;letter-spacing:1px;max-width:170px}h1{font-size:32px}.mode-tabs{padding:3px}.mode-tabs button{font-size:11px;padding:9px}.game-layout{display:flex;flex-direction:column;gap:20px}.arena,aside{width:100%}.arena-bar{padding:11px 12px;font-size:9px;letter-spacing:1px}.arena-bar label{font-size:11px}canvas{height:410px}.map-corner{top:13px;left:12px}.battle-hud{padding:12px;gap:20px}.arena-hint{font-size:11px;padding:0 12px}.panel-heading{margin:0 0 10px}#planPanel h2{font-size:29px}#planPanel h2 br{display:none}.gear{grid-template-columns:1fr 1fr 1fr;gap:6px;margin:13px 0}.gear-card{display:flex;flex-direction:column;position:relative;padding:12px 5px;gap:6px;text-align:center;min-height:130px}.gear-card .icon{font-size:21px;padding:5px}.gear-card b{font-size:13px}.gear-card small{font-size:10px;line-height:1.35;display:block}.gear-card .check{position:absolute;right:6px;top:5px;font-size:12px}.muted{margin:12px 0}.intel{padding-top:12px}.actions{position:sticky;bottom:0;z-index:2}.action{padding:13px 10px}.result h2{font-size:42px}.result-buttons{max-width:280px}.result-buttons button{min-height:43px}.form-row{grid-template-columns:1fr 1fr}.palette{grid-template-columns:repeat(3,1fr)}.tool{font-size:12px;padding:10px}.after-run{align-items:start;flex-direction:column;gap:4px}footer{flex-wrap:wrap;font-size:9px}.live-key{display:none}#livePanel h2{font-size:27px}body.running #livePanel{display:none}body.running .arena-hint{display:none}body.running .topline{margin:10px 0}.toast{font-size:12px;max-width:95%;white-space:normal;text-align:center}}
@media(max-width:380px){canvas{height:370px}.brand small{display:none}.topline .eyebrow{font-size:7px}.mode-tabs button{padding:9px 7px}.topline h1{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:760px){.gear-card small{font-size:12px}.gear-card{min-height:150px}.mode-tabs button{font-size:12px}.small{font-size:12px}.muted{font-size:14px}.arena-hint{font-size:12px}.arena-bar label{font-size:12px}canvas{height:390px}.topline .eyebrow{font-size:9px}}

.arena.critical{border-color:#ff8c6b;box-shadow:0 0 30px #e4482628}.arena.critical .arena-bar>span{color:#ffad83}.scene{background:radial-gradient(ellipse at 50% 48%,#394d49 0,#203339 50%,#132029 85%)}

:root{--bg:#181513;--panel:#28221c;--line:#554637;--muted:#b8a995;--lime:#ffd08a;--text:#f4e9d7;--orange:#ff9a64}body{background:radial-gradient(ellipse at 35% 10%,#463125 0,transparent 65%),var(--bg)}.arena{background:#241c17;border-color:#785c3e;box-shadow:0 20px 65px #0007}.scene{background:radial-gradient(ellipse at 50% 60%,#5b3b24 0,#30221b 50%,#171313 85%)}.battle-hud,.actions{background:#211b16}.mode-tabs,input:not([type=checkbox]){background:#201915}.mode-tabs button.selected,.gear-card[aria-pressed=true],.tool.selected{background:#493928;border-color:#a47b45}.gear-card,.tool{background:#30271f}.primary,.action{background:#ffd08a;color:#302014}.secondary{background:#433326;border-color:#796145}.health-track{background:#514332}.health-track i{background:#ffd08a}.intel .eyebrow{color:#f5a263}.toast{background:#211610ed;border-color:#a77b48}.result{background:#150e09d4}.result p{color:#d2bd9e}.map-code{color:#cdb28c}#routeLength{color:#b39777}.arena.critical{box-shadow:0 0 40px #e64b202a}.brand small,footer{color:#b39879}

/* 0.7: primary controls fit the visual viewport, including phone browser chrome. */
#planPanel{display:flex;flex-direction:column}#planPanel #start{order:-1;margin:0 0 16px;min-height:48px}#planPanel .panel-heading{order:-2}#planPanel h2{font-size:27px}.render-message{position:absolute;inset:20px;z-index:5;background:#231b17e8;border:1px solid #ab8655;border-radius:8px;padding:20px;line-height:1.5}.scene{overflow:hidden}#board{background:transparent}#planPanel .gear-card small{font-size:12px}
@media(max-width:760px){
header{height:44px;padding:0 10px}.brand-icon{font-size:22px}.brand{font-size:12px}.brand small{display:none}header .quiet{padding:7px 10px}main{padding:0 8px}.topline{height:48px;margin:6px 0;align-items:center}.topline .eyebrow{display:none}h1{font-size:26px;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-tabs button{font-size:11px;padding:9px 8px}.arena{border-radius:10px}.arena-bar{height:30px;padding:5px 10px}.arena-bar label{font-size:11px}.map-corner{top:8px;left:10px}.map-code{display:none}#routeLength{font-size:10px}canvas{height:max(150px,calc(100svh - 310px - env(safe-area-inset-bottom,0px)))}.battle-hud{height:42px;padding:7px 10px;gap:20px}.stat>span,.health>span{font-size:9px;margin-bottom:3px}.stat b{font-size:17px}.arena-hint{display:none}.game-layout{gap:0}.arena>#planPanel{padding:7px 9px 9px;background:#1c1713;border-top:1px solid #554637;display:grid;grid-template-columns:1fr;gap:5px}#planPanel>h2,#planPanel>.muted,#planPanel>.small,#planPanel>.panel-heading,#planPanel>#intel{display:none}#planPanel #gear{margin:0;gap:6px;grid-row:1}#planPanel .gear-card{min-height:39px;height:39px;padding:5px 7px;display:flex;flex-direction:row;gap:5px;justify-content:center}#planPanel .gear-card .icon{font-size:17px;padding:0;background:none}#planPanel .gear-card b{margin:0;font-size:13px}#planPanel .gear-card small{display:none}#planPanel .gear-card .check{position:static;font-size:12px}#planPanel #start{order:initial;grid-row:2;margin:0;min-height:44px;padding:10px 15px}body[data-mode=run] canvas,body[data-mode=replay] canvas{height:max(170px,calc(100svh - 240px - env(safe-area-inset-bottom,0px)))}body.running .topline{margin:6px 0}.actions{padding:8px;gap:8px;height:66px;position:static}.action{min-height:48px}#livePanel{display:none}.notice{margin:8px 0;font-size:12px;min-height:0}footer{margin-top:14px;padding-top:10px}#buildPanel{padding:14px 0}body[data-mode=build] canvas{height:max(180px,calc(100svh - 330px))}body[data-mode=build] #palette{position:fixed;bottom:62px;left:8px;right:8px;background:#201810ed;z-index:9;padding:6px;border:1px solid #6b533a;border-radius:8px;grid-template-columns:repeat(5,1fr)}body[data-mode=build] .tool{font-size:10px;padding:8px 2px;text-align:center}body[data-mode=build] .tool small{font-size:9px}body[data-mode=build] #test{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;width:calc(100% - 16px);z-index:10;min-height:44px}body[data-mode=build]{padding-bottom:135px}.result{padding:15px}.result h2{font-size:34px}.result p{margin:10px 0;font-size:13px}.result .eyebrow{font-size:10px}.result-buttons button{padding:9px 11px;min-height:40px}
}
@media(max-height:520px) and (orientation:landscape){header{height:38px}.topline{margin:8px 0}canvas{height:260px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px}.arena>#planPanel{padding:6px}.topline h1{font-size:25px}}

@media(max-width:760px){body[data-mode=build][data-verified=true] #test{width:calc(50% - 12px);right:auto;font-size:12px}body[data-mode=build][data-verified=true] #share{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));right:8px;width:calc(50% - 12px);z-index:10;min-height:44px;margin:0;font-size:12px}}

/* Fit the arena to the real visible WebView area; cap its aspect to avoid letterboxing. */
@media(max-width:760px){header{height:40px}.topline{height:44px;margin:4px 0}.arena-bar{height:27px}.map-corner{top:4px}.arena>#livePanel:not([hidden]){display:block;padding:0 8px 7px;background:#211b16}.arena>#livePanel>:not(#abort){display:none}#livePanel #abort{margin:0;min-height:36px;padding:7px;font-size:12px}.arena canvas{max-height:112vw}.after-run{margin:8px 0}.after-run .small{display:none}body[data-mode=plan] footer,body[data-mode=run] footer,body[data-mode=replay] footer{display:none}}

#sound.sound-toggle{width:44px;height:36px;padding:6px;display:flex;align-items:center;justify-content:center;color:var(--lime)}.sound-muted{display:none}#sound[data-state=off] .sound-waves{display:none}#sound[data-state=off] .sound-muted{display:block}#sound[data-state=off]{color:var(--muted)}#sound[data-state=blocked]{border-color:#e7a16d}

/* Beta: one clear instruction, three ready-to-play challenges. */
#feedbackOpen{margin-left:auto;margin-right:8px;font-size:12px}.fortresses{display:flex;gap:8px;margin:0 0 12px}.fortress{flex:1;background:#211b16;border-color:var(--line);font-size:13px;padding:10px}.fortress[aria-pressed=true]{border-color:var(--lime);color:var(--lime);background:#493928}#quickRules{margin:4px 0 8px;font-size:16px;line-height:1.5}.round-rules{color:var(--lime);font-size:12px;margin:0 0 10px}#planPanel #start{order:initial;margin:12px 0 0}#planPanel .panel-heading{margin-bottom:10px}#advanced{font-size:12px;padding:7px;margin:4px 0}dialog{color:var(--text);background:#241c17;border:1px solid #94754f;border-radius:12px;max-width:430px;width:calc(100% - 24px);max-height:85dvh;padding:22px}dialog::backdrop{background:#000b}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}dialog h2{font-size:28px}dialog label{display:block;margin:14px 0 6px}dialog select,dialog textarea{width:100%;background:#171310;color:var(--text);border:1px solid var(--line);padding:10px;border-radius:6px;font:inherit}dialog .metrics-choice{display:flex;align-items:center;gap:8px}#feedbackStatus{font-size:13px;margin-bottom:0}
@media(max-width:760px){.fortresses{gap:5px;margin:0 0 6px}.fortress{padding:7px 4px;font-size:11px;min-height:34px}#quickRules{margin:0;font-size:12px;line-height:1.4;grid-row:1}#roundRules{margin:0;font-size:11px;grid-row:2}#planPanel #gear{grid-row:4}#planPanel #start{grid-row:5;margin:0}#planPanel #advanced{grid-row:3;margin:0;padding:4px;min-height:28px}#planPanel #lesson{display:none}.arena>#planPanel{gap:4px}#feedbackOpen{padding:6px 8px;font-size:11px}.result-buttons{max-width:330px}.result-buttons button{font-size:11px;min-height:36px;padding:7px 9px}}

@media(min-width:761px){header{height:64px}.topline{margin:17px 0}.topline h1{font-size:38px}.fortresses{margin-bottom:10px}}

#language{margin-left:auto;margin-right:8px;width:58px;height:36px;padding:5px;color:var(--text);background:#241c17;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12px}#feedbackOpen{margin-left:0}#language:focus-visible{outline:3px solid #86deff;outline-offset:2px}@media(max-width:760px){#language{width:51px;margin-right:5px;height:32px;font-size:11px}#feedbackOpen{margin-right:5px}header .brand{letter-spacing:.5px;gap:4px}}

/* DURVIUM wordmark: keep the subtitle visible without increasing the mobile header. */
.brand-name{display:flex;flex-direction:column;gap:2px;line-height:1.1}.brand .brand-name small{display:block;border:0;padding:0;max-width:none;font-size:9px;letter-spacing:1.6px;font-weight:500}.brand-name{letter-spacing:1.8px}@media(max-width:760px){.brand-name{font-size:12px}.brand .brand-name small{font-size:8px;letter-spacing:1.3px}}

/* One clear next step; replay and sharing remain available on demand. */
.result-buttons{width:100%;max-width:320px}.result-buttons>.primary{width:100%;min-height:48px;font-size:15px}
#resultMore{margin-top:14px;width:100%;max-width:340px;font-size:12px;color:var(--muted)}
#resultMore summary{cursor:pointer;padding:8px} .result-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 0}
.result-extras button{background:transparent;border-color:var(--line);color:var(--muted);font-size:12px;padding:8px}
.result-extras .after-run{margin:0;display:block}.result-extras .after-run .small{display:none}
.result{overflow-y:auto}

.action{position:relative;overflow:hidden;padding-bottom:17px}.action.active:disabled{opacity:1}.power-duration{position:absolute;left:9px;right:9px;bottom:5px;height:5px;background:#17232b55;border-radius:3px;opacity:0}.action.active .power-duration{opacity:1}.power-duration i{display:block;height:100%;background:#183c49;border-radius:3px;transform-origin:left;transform:scaleX(var(--power-left,0))}