:root{--bg:#1b0c0f;--panel:rgba(35,14,17,.94);--panel2:rgba(54,22,22,.86);--text:#fff7ef;--muted:#c9aa99;--steel:#9ac9d8;--shard:#ef7148;--gold:#f2c46b;--green:#70e083;--shadow:0 14px 38px rgba(0,0,0,.4)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text)}
body{height:100vh;overflow:hidden;background:radial-gradient(circle at 50% -12%,rgba(191,74,42,.35),transparent 34%),radial-gradient(circle at 8% 54%,rgba(111,45,31,.22),transparent 28%),radial-gradient(circle at 92% 54%,rgba(104,37,29,.25),transparent 30%),linear-gradient(180deg,#451d20 0%,#281114 46%,#180b0d 100%);display:grid;grid-template-rows:auto auto minmax(0,1fr)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(30deg,transparent 24%,rgba(255,255,255,.05) 25%,transparent 26%),linear-gradient(150deg,transparent 24%,rgba(255,255,255,.035) 25%,transparent 26%);background-size:58px 58px;mix-blend-mode:screen}
button,input,select{font:inherit}

.hero{position:relative;z-index:30;text-align:center;padding:12px 20px 5px;background:linear-gradient(180deg,rgba(18,7,9,.96),rgba(18,7,9,.56));border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(12px)}
.hero h1{font-size:clamp(28px,3.1vw,44px);line-height:1;margin:0;text-shadow:0 5px 24px rgba(0,0,0,.5)}
.hero-sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c9aa99;margin-top:5px;font-weight:800}
.header-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.round-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.19);box-shadow:0 7px 18px rgba(0,0,0,.28);cursor:pointer;font-size:20px;transition:.16s ease}
.round-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);box-shadow:0 9px 22px rgba(0,0,0,.34)}
.round-btn .home-glyph{font-size:22px;transform:translateY(-1px)}

.controls{position:relative;z-index:25;display:flex;align-items:center;justify-content:center;gap:8px 10px;flex-wrap:wrap;padding:7px 14px 10px;background:rgba(18,7,9,.66);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.speed-box{display:flex;align-items:center;gap:9px;padding:5px 9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);border-radius:12px}
.speed-box label{font-size:11px;font-weight:900}.speed-wrap{position:relative}.speed-wrap input{width:88px;background:#13090a;color:#fff;border:1px solid rgba(255,255,255,.17);border-radius:8px;padding:6px 23px 6px 8px;font-size:13px;font-weight:900;text-align:right;outline:none}.speed-wrap:after{content:"%";position:absolute;right:7px;top:50%;transform:translateY(-50%);color:#ba9c8b;font-size:11px;font-weight:900}
.focus-group{display:flex;gap:4px;padding:4px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.focus-btn,.mass-btn,.global-btn{border:1px solid transparent;border-radius:8px;padding:6px 8px;color:#fff;font-size:10px;font-weight:950;background:rgba(255,255,255,.055);cursor:pointer;white-space:nowrap;transition:.15s ease}
.focus-btn:hover,.mass-btn:hover,.global-btn:hover{filter:brightness(1.13);transform:translateY(-1px)}
.focus-btn.active{background:linear-gradient(180deg,#8a3c2d,#67261f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.mass-actions{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.mass-group{display:flex;align-items:center;gap:3px;padding:3px 4px 3px 7px;border:1px solid color-mix(in srgb,var(--branch) 35%,rgba(255,255,255,.08));border-radius:10px;background:rgba(255,255,255,.025)}
.mass-title{font-size:8px;letter-spacing:.07em;text-transform:uppercase;font-weight:1000;color:color-mix(in srgb,var(--branch) 72%,white 28%);margin-right:2px}
.mass-btn{padding:5px 6px}.mass-btn.max{background:color-mix(in srgb,var(--branch) 40%,#281013)}.mass-btn.reset{background:rgba(255,255,255,.055)}
.global-btn.reset-all{background:linear-gradient(180deg,#7c3327,#5b211b)}.global-btn.max-all{background:linear-gradient(180deg,#9b5d25,#704015);border-color:rgba(242,196,107,.24)}.global-btn.view-reset{background:rgba(255,255,255,.075)}

.workspace{position:relative;z-index:3;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:10px;padding:10px 12px 10px;overflow:hidden}
.stage-wrap{position:relative;min-height:0;overflow:visible}
.stage{position:relative;width:100%;height:100%;min-height:360px;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 45% 13%,rgba(111,49,37,.23),transparent 27%),linear-gradient(180deg,rgba(48,19,21,.76),rgba(20,8,10,.8));box-shadow:inset 0 0 75px rgba(0,0,0,.28),var(--shadow);cursor:grab;touch-action:none;user-select:none}
.stage.dragging{cursor:grabbing}.stage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.025),transparent 58%)}
.map-shell{position:absolute;left:0;top:0;width:1780px;height:1700px;transform-origin:0 0;will-change:transform}
.tree-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px rgba(0,0,0,.32));pointer-events:none}
.branch-zone{position:absolute;pointer-events:none;z-index:13;padding:7px 10px;border-radius:10px;background:rgba(18,7,9,.74);border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.08));border-left:3px solid var(--accent);box-shadow:0 8px 18px rgba(0,0,0,.28);white-space:nowrap}
.zone-title{font-weight:1000;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:color-mix(in srgb,var(--accent) 78%,white 22%);text-shadow:0 3px 12px #000}.zone-sub{font-size:8px;letter-spacing:.1em;color:#d0b2a2;margin-left:5px}

.academy-core{position:absolute;left:245px;top:850px;width:138px;height:140px;transform:translate(-50%,-50%);z-index:6;display:grid;place-items:center;pointer-events:none}
.core-glow{position:absolute;width:165px;height:165px;border-radius:50%;background:radial-gradient(circle,rgba(255,87,54,.25),rgba(255,87,54,.07) 42%,transparent 72%);filter:blur(2px)}
.core-pedestal{position:relative;width:104px;height:106px;border-radius:16px 16px 27px 27px;background:linear-gradient(180deg,#553237,#2b171b 60%,#1a0c0f);border:2px solid rgba(235,155,112,.34);box-shadow:0 16px 30px rgba(0,0,0,.45),inset 0 0 24px rgba(255,115,70,.08)}
.core-pedestal:before{content:"";position:absolute;left:11px;right:11px;bottom:12px;height:15px;border-radius:8px;background:linear-gradient(180deg,#3f2429,#211013);box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.core-crystals{position:absolute;left:50%;top:45%;width:74px;height:68px;transform:translate(-50%,-50%)}
.core-crystal{position:absolute;display:block;background:linear-gradient(145deg,#ffd09c 0 10%,#ff8c5d 11% 38%,#ed503a 39% 68%,#9d2226 69%);clip-path:polygon(50% 0,88% 72%,68% 100%,28% 100%,8% 72%);filter:drop-shadow(0 0 8px rgba(255,73,43,.55))}
.core-crystal.c1{width:33px;height:56px;left:21px;top:5px}.core-crystal.c2{width:24px;height:44px;left:1px;top:23px;transform:rotate(-11deg)}.core-crystal.c3{width:24px;height:42px;right:0;top:26px;transform:rotate(12deg)}.core-crystal.c4{width:19px;height:33px;left:18px;top:33px;transform:rotate(-4deg)}.core-crystal.c5{width:19px;height:33px;right:17px;top:34px;transform:rotate(5deg)}

.node{position:absolute;width:168px;transform:translate(-50%,-50%);z-index:5;transition:transform .14s ease,filter .14s ease,opacity .18s ease;transform-origin:center center}
.node:hover{z-index:22;transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.skill{--accent:#d66f43;position:relative;overflow:visible;background:linear-gradient(180deg,rgba(27,11,13,.97),rgba(16,7,8,.97));border:1px solid color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.1));border-radius:15px;padding:7px 7px 6px;box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 16px color-mix(in srgb,var(--accent) 9%,transparent)}
.skill-main{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:4px;align-items:center;position:relative;z-index:2}
.level-control{display:flex;flex-direction:column;align-items:center;gap:2px}.arrow{width:26px;height:21px;border:0;border-radius:6px;background:rgba(255,255,255,.085);color:#fff;font-size:10px;font-weight:1000;cursor:pointer;line-height:1}.arrow:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 48%,#251012)}.arrow:disabled{opacity:.2;cursor:not-allowed}.level-num{font-size:11px;font-weight:1000;font-variant-numeric:tabular-nums;white-space:nowrap}.level-label{font-size:6px;letter-spacing:.06em;text-transform:uppercase;color:#a98f80}
.icon-block{text-align:center;min-width:0}.skill-icon{display:block;width:50px;height:50px;margin:0 auto 2px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}.skill-name{font-size:9px;font-weight:900;line-height:1.05;min-height:20px;display:grid;place-items:center;color:#fff5ee}.max-label{font-size:6px;color:#9e8477;margin-top:1px}
.cost-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:2px 5px;margin-top:5px;padding-top:4px;border-top:1px solid rgba(255,255,255,.065)}.cost{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;font-size:7.8px;font-weight:900;color:#e9ded8}.cost.time{grid-column:1/-1}.cost strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}.res-icon{width:11px;height:11px;display:inline-block;flex:0 0 auto}.steel-icon{background:linear-gradient(145deg,#bdd9e3 0 18%,#7297a8 19% 52%,#335a70 53% 76%,#88afbe 77%);clip-path:polygon(8% 28%,58% 3%,94% 24%,83% 76%,43% 98%,4% 76%)}.shard-icon{background:linear-gradient(145deg,#ffb062,#e95035 55%,#a61f22);clip-path:polygon(50% 0,95% 87%,76% 100%,24% 100%,4% 87%)}.time-icon{position:relative;border:1.5px solid #d8c7b4;border-radius:50%}.time-icon:before{content:"";position:absolute;width:1.5px;height:4px;background:#d8c7b4;left:4px;top:1px;transform-origin:bottom;transform:rotate(20deg)}.time-icon:after{content:"";position:absolute;width:4px;height:1.5px;background:#d8c7b4;left:4px;top:5px;transform-origin:left;transform:rotate(20deg)}

/* Red flame-particle effect for an unlocked Helios troop node. */
.helios-on .skill{border-color:rgba(255,84,55,.9);box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 18px rgba(255,56,35,.42),inset 0 0 18px rgba(255,56,35,.08)}
.flame-particles{position:absolute;inset:-5px;pointer-events:none;z-index:1;border-radius:18px}
.flame-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s)*1.8);border-radius:70% 70% 48% 48%;background:radial-gradient(circle at 50% 72%,#ffd17a 0 12%,#ff6b3c 28%,#d81f26 60%,transparent 72%);filter:drop-shadow(0 0 4px rgba(255,53,33,.85));opacity:0;transform:translate(-50%,-50%) scale(.55);animation:emberFloat 1.65s ease-out infinite;animation-delay:var(--d)}
@keyframes emberFloat{0%{opacity:0;transform:translate(-50%,2px) scale(.45)}20%{opacity:.9}70%{opacity:.55}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-18px) scale(1.05)}}

/* Focus mode keeps only the chosen branch on the map. */
.map-shell[data-view="marksman"] [data-branch="infantry"],.map-shell[data-view="marksman"] [data-branch="lancer"],
.map-shell[data-view="infantry"] [data-branch="marksman"],.map-shell[data-view="infantry"] [data-branch="lancer"],
.map-shell[data-view="lancer"] [data-branch="marksman"],.map-shell[data-view="lancer"] [data-branch="infantry"]{display:none}

.side-stack{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;scrollbar-width:thin;scrollbar-color:#7a4134 transparent}
.side-panel{background:linear-gradient(180deg,rgba(38,15,18,.96),rgba(20,8,10,.96));border:1px solid rgba(255,255,255,.085);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.panel-title{font-size:13px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;color:#f4e7df}.panel-sub{font-size:8px;line-height:1.35;color:#bda295;margin-top:3px}
.grand-cost{display:grid;grid-template-columns:1fr;gap:5px;margin-top:9px;padding:8px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065)}
.resource-line{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;font-size:9px;color:#cbb5aa}.resource-line strong{font-size:12px;color:#fff;font-variant-numeric:tabular-nums}.resource-line .res-icon{width:13px;height:13px}
.branch-costs{display:grid;gap:6px;margin-top:8px}.branch-cost-card{--branch:#999;padding:7px 8px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid color-mix(in srgb,var(--branch) 23%,rgba(255,255,255,.055));transition:.18s ease}.branch-cost-card.active{background:color-mix(in srgb,var(--branch) 15%,rgba(255,255,255,.035));border-color:color-mix(in srgb,var(--branch) 78%,white 8%);box-shadow:0 0 18px color-mix(in srgb,var(--branch) 25%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--branch) 20%,transparent)}
.branch-cost-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:5px}.branch-cost-name{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;color:color-mix(in srgb,var(--branch) 78%,white 22%)}.focus-badge{display:none;font-size:6px;text-transform:uppercase;letter-spacing:.1em;padding:3px 5px;border-radius:6px;background:color-mix(in srgb,var(--branch) 32%,#180a0c);color:#fff}.branch-cost-card.active .focus-badge{display:block}
.branch-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 7px}.branch-mini{font-size:7px;color:#a98f83}.branch-mini strong{display:block;margin-top:1px;font-size:9px;color:#f7eee9}.branch-mini.time{grid-column:1/-1}

.stock-form{display:grid;gap:7px;margin-top:9px}.stock-field label{display:block;font-size:7px;text-transform:uppercase;letter-spacing:.09em;color:#bca094;font-weight:900;margin:0 0 3px 2px}.stock-field input,.stock-field select{width:100%;border:1px solid rgba(255,255,255,.12);background:#13090a;color:#fff;border-radius:9px;padding:8px 9px;font-size:11px;font-weight:850;outline:none}.stock-field input:focus,.stock-field select:focus{border-color:rgba(239,113,72,.65);box-shadow:0 0 0 2px rgba(239,113,72,.08)}
.auto-fill-btn{border:1px solid rgba(112,224,131,.28);background:linear-gradient(180deg,#397244,#275531);color:#fff;border-radius:10px;padding:8px;font-size:10px;font-weight:1000;cursor:pointer}.auto-fill-btn:hover{filter:brightness(1.1)}
.planner-status{min-height:29px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);font-size:8px;line-height:1.35;color:#cbb6aa}.planner-status strong{color:var(--green)}

.skill-tooltip{position:fixed;z-index:1000;width:min(360px,calc(100vw - 24px));pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .09s ease,transform .09s ease;background:linear-gradient(180deg,#f7dfd9,#ebcbc4);color:#5a3d3d;border:1px solid rgba(95,56,52,.2);border-radius:14px;padding:11px 12px;box-shadow:0 18px 46px rgba(0,0,0,.48)}
.skill-tooltip.show{opacity:1;transform:translateY(0)}.tooltip-title{font-size:16px;line-height:1.05;font-weight:1000;color:#8e3634}.tooltip-desc{font-size:10px;line-height:1.3;color:#9d625f;margin-top:4px;padding-bottom:7px;border-bottom:1px solid rgba(94,55,52,.14)}.tooltip-level{font-size:9px;font-weight:900;color:#8f5956;margin-top:7px}.tooltip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:6px;padding:6px 7px;border-radius:8px;background:rgba(111,59,55,.08)}.tooltip-key{font-size:10px;font-weight:850;color:#634646}.tooltip-change{white-space:nowrap;font-size:11px;font-weight:1000}.tooltip-value{color:#169c4a}.tooltip-arrow{color:#8d6e68;margin:0 5px}.tooltip-power{margin-top:7px;border-top:1px solid rgba(94,55,52,.12);padding-top:7px}.tooltip-power .tooltip-key{font-weight:1000}

.help-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(10,4,5,.72);backdrop-filter:blur(6px)}.help-overlay.show{display:flex}.help-card{width:min(470px,100%);border-radius:20px;padding:18px;background:linear-gradient(180deg,#3b181c,#1d0c0f);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.58)}.help-card h2{margin:0;font-size:23px}.help-card p{margin:6px 0 0;font-size:10px;color:#c9afa3;line-height:1.45}.help-steps{display:grid;gap:7px;margin:13px 0}.help-step{display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center;padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055)}.help-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(239,113,72,.15);font-size:17px}.help-step strong{font-size:10px}.help-step span{display:block;font-size:8px;color:#bda296;margin-top:2px}.help-close{width:100%;border:0;border-radius:10px;padding:9px;background:linear-gradient(180deg,#91402f,#68271f);color:white;font-size:11px;font-weight:1000;cursor:pointer}

@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr) 290px}.controls{padding-left:8px;padding-right:8px}.mass-title{display:none}}
@media(max-width:860px){body{height:auto;min-height:100vh;overflow:auto;display:block}.workspace{display:block;overflow:visible}.stage-wrap{height:72vh;min-height:520px}.side-stack{overflow:visible;margin-top:10px}.side-panel{max-width:none}.branch-costs{grid-template-columns:repeat(3,1fr)}.controls{position:sticky;top:0}.stage{min-height:520px}}
@media(max-width:620px){.hero h1{font-size:27px}.focus-group{width:100%;justify-content:center}.mass-actions{width:100%}.mass-group{flex:1;justify-content:center}.workspace{padding:6px}.stage-wrap{height:68vh}.branch-costs{grid-template-columns:1fr}.side-panel{border-radius:14px}}


/* =========================================================
   V5 readability + navigation refinement
   ========================================================= */

/* The controls are grouped instead of one long horizontal strip. */
.controls{
  padding:10px 14px 12px;
  display:block;
  background:rgba(18,7,9,.76);
}
.controls-grid{
  width:min(1560px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(235px,.72fr) minmax(430px,1.15fr) minmax(570px,1.7fr);
  gap:10px;
  align-items:stretch;
}
.control-card{
  min-width:0;
  padding:10px 11px;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.control-heading{
  font-size:14px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#f7ebe4;
}
.control-hint{
  margin-top:4px;
  min-height:15px;
  color:#bda397;
  font-size:11px;
  line-height:1.25;
}
.speed-box{
  margin-top:9px;
  padding:0;
  border:0;
  background:transparent;
  justify-content:space-between;
}
.speed-box label{font-size:14px}
.speed-wrap input{
  width:108px;
  padding:9px 27px 9px 10px;
  font-size:16px;
  border-radius:10px;
}
.speed-wrap:after{font-size:13px;right:9px}
.navigation-row{
  margin-top:9px;
  display:flex;
  gap:8px;
  align-items:center;
}
.focus-group{
  flex:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  padding:5px;
}
.focus-btn,.mass-btn,.global-btn{
  min-height:36px;
  padding:8px 10px;
  font-size:12px;
  border-radius:9px;
}
.focus-btn{min-width:0}
.global-btn.view-reset{min-width:92px}
.actions-card .mass-actions{
  margin-top:9px;
  display:grid;
  grid-template-columns:repeat(3,minmax(138px,1fr)) auto auto;
  gap:6px;
  align-items:stretch;
}
.mass-group{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:5px;
  align-items:center;
  padding:5px 6px 5px 9px;
  border-radius:11px;
}
.mass-title{
  display:block;
  margin:0;
  font-size:10px;
  letter-spacing:.075em;
}
.mass-btn{
  min-height:32px;
  padding:6px 8px;
  font-size:11px;
}
.global-btn.reset-all,.global-btn.max-all{
  min-width:78px;
  min-height:100%;
}

/* Give the right-hand planner enough room for genuinely readable text. */
.workspace{
  grid-template-columns:minmax(0,1fr) 400px;
  gap:12px;
}
.side-stack{gap:12px}
.side-panel{
  padding:16px;
  border-radius:20px;
}
.panel-title{
  font-size:19px;
  line-height:1.1;
  letter-spacing:.065em;
}
.panel-sub{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
}
.grand-cost{
  gap:8px;
  margin-top:13px;
  padding:11px 12px;
  border-radius:14px;
}
.resource-line{
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:8px;
  font-size:13px;
}
.resource-line strong{font-size:18px}
.resource-line .res-icon{width:16px;height:16px}
.branch-costs{gap:8px;margin-top:10px}
.branch-cost-card{
  padding:10px 11px;
  border-radius:13px;
}
.branch-cost-head{margin-bottom:8px}
.branch-cost-name{font-size:13px}
.focus-badge{
  font-size:9px;
  padding:4px 7px;
}
.branch-mini-grid{gap:7px 10px}
.branch-mini{
  font-size:11px;
  line-height:1.2;
}
.branch-mini strong{
  margin-top:3px;
  font-size:15px;
}
.stock-form{gap:10px;margin-top:13px}
.stock-field label{
  margin:0 0 5px 2px;
  font-size:11px;
}
.stock-field input,.stock-field select{
  min-height:43px;
  padding:10px 11px;
  font-size:14px;
  border-radius:11px;
}
.auto-fill-btn{
  min-height:43px;
  padding:10px;
  font-size:13px;
  border-radius:11px;
}
.planner-status{
  min-height:42px;
  padding:9px 10px;
  font-size:11.5px;
  line-height:1.45;
}

/* Make the first-visit navigation explanation easy to read. */
.help-card{
  width:min(650px,100%);
  border-radius:24px;
  padding:25px;
}
.help-card h2{font-size:31px}
.help-card p{
  margin-top:9px;
  font-size:15px;
  line-height:1.5;
}
.help-steps{gap:10px;margin:18px 0}
.help-step{
  grid-template-columns:46px 1fr;
  gap:13px;
  padding:12px 13px;
  border-radius:14px;
}
.help-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  font-size:24px;
}
.help-step strong{font-size:15px}
.help-step span{
  margin-top:3px;
  font-size:12.5px;
  line-height:1.42;
}
.help-close{
  min-height:46px;
  padding:11px;
  border-radius:12px;
  font-size:14px;
}

/* Large, clickable troop-tree identity cards. */
.branch-zone{
  width:275px;
  padding:0;
  overflow:visible;
  pointer-events:auto;
  z-index:45;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(25,9,11,.94),rgba(15,6,8,.94));
  border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.1));
  border-left:5px solid var(--accent);
  box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
.zone-primary{
  width:100%;
  padding:13px 14px 12px;
  text-align:left;
  color:inherit;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:14px;
}
.zone-primary:hover{
  background:color-mix(in srgb,var(--accent) 11%,transparent);
}
.zone-title{
  display:block;
  font-size:21px;
  line-height:1;
  letter-spacing:.08em;
}
.zone-sub{
  display:block;
  margin:5px 0 0;
  font-size:13px;
  line-height:1.15;
  letter-spacing:.075em;
  color:#eee1da;
}
.zone-click{
  display:inline-flex;
  margin-top:8px;
  padding:4px 7px;
  border-radius:7px;
  background:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.03));
  color:color-mix(in srgb,var(--accent) 70%,white 30%);
  font-size:10px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.branch-zone.zone-focused{
  width:330px;
  border-width:2px;
  border-left-width:7px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 11%,#1c0a0d),rgba(16,6,8,.98));
  box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 30px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
}
.zone-focused .zone-title{font-size:25px}
.zone-focused .zone-sub{font-size:14px}
.zone-focused .zone-click{font-size:11px}
.zone-switch-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:0 10px 11px;
  border-top:1px solid rgba(255,255,255,.08);
}
.zone-switch-label{
  grid-column:1/-1;
  padding-top:8px;
  font-size:9px;
  color:#bca096;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:950;
}
.zone-switch-btn{
  min-width:0;
  padding:8px 9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.zone-switch-btn:hover{background:rgba(255,255,255,.09)}
.zone-switch-btn span{
  display:block;
  font-size:12px;
  font-weight:1000;
}
.zone-switch-btn small{
  display:block;
  margin-top:2px;
  font-size:8px;
  color:#bea69a;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Stronger unlocked-Helios flames: brighter edge, larger embers, denser particle field. */
.helios-on .skill{
  border:2px solid rgba(255,75,42,.98);
  box-shadow:
    0 8px 22px rgba(0,0,0,.34),
    0 0 18px rgba(255,47,25,.72),
    0 0 38px rgba(255,47,25,.38),
    inset 0 0 23px rgba(255,50,25,.13);
  animation:heliosGlowPulse 1.25s ease-in-out infinite alternate;
}
.helios-on .skill:after{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:0;
  pointer-events:none;
  border-radius:20px;
  border:2px solid rgba(255,92,50,.62);
  box-shadow:0 0 16px rgba(255,42,21,.8),0 0 30px rgba(255,42,21,.45);
  animation:heliosRingPulse 1.05s ease-in-out infinite alternate;
}
.flame-particles{
  inset:-13px;
  z-index:1;
  filter:drop-shadow(0 0 6px rgba(255,41,18,.85));
}
.flame-particles:before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:20px;
  box-shadow:0 0 26px rgba(255,48,25,.45);
}
.flame-particles i{
  width:var(--s);
  height:calc(var(--s)*2.25);
  background:
    radial-gradient(circle at 50% 76%,#fff1a0 0 10%,#ffb245 18%,#ff5531 38%,#d30f1e 66%,transparent 75%);
  filter:drop-shadow(0 0 7px rgba(255,50,22,.98));
  animation-duration:1.2s;
}
@keyframes heliosGlowPulse{
  from{filter:drop-shadow(0 0 2px rgba(255,58,31,.45))}
  to{filter:drop-shadow(0 0 12px rgba(255,58,31,.95))}
}
@keyframes heliosRingPulse{
  from{opacity:.52;transform:scale(.985)}
  to{opacity:1;transform:scale(1.025)}
}
@keyframes emberFloat{
  0%{opacity:0;transform:translate(-50%,4px) scale(.55) rotate(-4deg)}
  14%{opacity:1}
  62%{opacity:.92}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-30px) scale(1.3) rotate(5deg)}
}

/* Responsive adjustments for the larger UI. */
@media(max-width:1380px){
  .controls-grid{grid-template-columns:240px minmax(410px,1fr)}
  .actions-card{grid-column:1/-1}
  .actions-card .mass-actions{grid-template-columns:repeat(3,minmax(150px,1fr)) auto auto}
  .workspace{grid-template-columns:minmax(0,1fr) 370px}
}
@media(max-width:1040px){
  .controls-grid{grid-template-columns:1fr}
  .actions-card{grid-column:auto}
  .workspace{grid-template-columns:minmax(0,1fr) 340px}
  .navigation-row{align-items:stretch}
}
@media(max-width:860px){
  .workspace{display:block}
  .controls{position:relative;top:auto}
  .side-stack{margin-top:12px}
  .panel-title{font-size:18px}
}
@media(max-width:620px){
  .focus-group{width:auto}
  .navigation-row{display:block}
  .global-btn.view-reset{width:100%;margin-top:7px}
  .actions-card .mass-actions{grid-template-columns:1fr 1fr}
  .mass-group{grid-column:1/-1}
  .global-btn.reset-all,.global-btn.max-all{min-height:38px}
}


/* V5.1: keep mass actions visually separated instead of squeezing every action into one row. */
.actions-card .mass-actions{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.actions-card .mass-group{
  grid-column:span 2;
}
.actions-card .global-btn.reset-all,
.actions-card .global-btn.max-all{
  grid-column:span 3;
  min-height:36px;
}
@media(max-width:620px){
  .actions-card .mass-actions{grid-template-columns:1fr 1fr}
  .actions-card .mass-group{grid-column:1/-1}
  .actions-card .global-btn.reset-all,
  .actions-card .global-btn.max-all{grid-column:auto}
}


/* =========================================================
   V6 — focus navigation, compact side planner, full-tree hover
   ========================================================= */

/* Top area now contains only the useful mass actions. */
.controls{padding:7px 12px 8px}
.controls-grid{display:block;width:min(1540px,100%)}
.academy-actions-card{padding:9px 11px}
.actions-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.academy-actions-card .control-heading{font-size:13px}
.academy-actions-card .control-hint{font-size:10px;min-height:0;margin-top:2px}
.academy-actions-card .mass-actions{
  margin-top:7px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;
}
.academy-actions-card .mass-group{grid-column:span 2}
.academy-actions-card .global-btn.reset-all,
.academy-actions-card .global-btn.max-all{grid-column:span 3;min-height:34px}
.academy-actions-card .view-reset{min-width:96px;min-height:34px}

/* Widen the planner to the left, but keep the entire page on one screen. */
.workspace{
  grid-template-columns:minmax(0,1fr) 500px;
  gap:10px;
  padding:8px 10px 9px;
}
.side-stack{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  gap:9px;
  padding-right:0;
}
.side-panel{
  padding:12px 13px;
  border-radius:17px;
}
.panel-title{font-size:17px}
.panel-sub{font-size:10.5px;line-height:1.35;margin-top:3px}

/* Research speed now belongs to the Total Planned Cost panel. */
.cost-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 165px;
  gap:12px;
  align-items:center;
}
.cost-speed{
  padding:7px 8px;
  border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.cost-speed label{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#cbb2a6;
}
.cost-speed .speed-wrap{width:100%}
.cost-speed .speed-wrap input{
  width:100%;
  box-sizing:border-box;
  min-height:34px;
  padding:6px 28px 6px 9px;
  font-size:14px;
}

/* Grand total: Steel / Shards / Time all visible in one row. */
.grand-cost{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:8px;
  padding:7px;
}
.resource-line{
  grid-template-columns:15px auto minmax(0,1fr);
  gap:5px;
  padding:5px 6px;
  border-radius:8px;
  background:rgba(0,0,0,.14);
  font-size:10px;
}
.resource-line strong{
  justify-self:end;
  font-size:13px;
}

/* Each troop type is one compact, readable row. */
.branch-costs{gap:5px;margin-top:7px}
.branch-cost-card{
  padding:7px 9px;
  cursor:pointer;
  outline:none;
}
.branch-cost-card:hover,
.branch-cost-card:focus-visible{
  transform:translateX(-3px);
  border-color:color-mix(in srgb,var(--branch) 75%,white 10%);
  background:color-mix(in srgb,var(--branch) 11%,rgba(255,255,255,.04));
  box-shadow:0 0 15px color-mix(in srgb,var(--branch) 18%,transparent);
}
.branch-cost-head{margin-bottom:5px}
.branch-cost-name{font-size:11px}
.focus-badge{font-size:7px}
.branch-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.branch-mini,
.branch-mini.time{
  grid-column:auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:5px;
  font-size:9px;
  white-space:nowrap;
}
.branch-mini strong{
  display:inline;
  margin:0;
  font-size:12px;
  white-space:nowrap;
}
.cost-focus-hint{
  margin-top:6px;
  font-size:8.5px;
  color:#9f887d;
  text-align:right;
}

/* Stock Auto Planner compressed into a single-screen layout. */
.auto-panel .panel-sub{max-width:100%}
.stock-form{gap:7px;margin-top:9px}
.stock-resource-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.stock-bottom-row{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:7px;
  align-items:end;
}
.stock-field label{font-size:9px;margin-bottom:4px}
.stock-field input,.stock-field select{
  min-height:37px;
  padding:7px 9px;
  font-size:12px;
}
.auto-fill-btn{
  min-height:37px;
  padding:7px 9px;
  font-size:11px;
}
.planner-status{
  min-height:31px;
  padding:7px 8px;
  font-size:9.5px;
  line-height:1.35;
}

/* In Full Tree, hovering a skill makes the whole skill card dramatically larger. */
.map-shell[data-view="all"] .node:hover{
  z-index:120;
  transform:translate(-50%,-50%) scale(1.78);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.72));
}
.map-shell[data-view="all"] .node:hover .skill{
  box-shadow:0 12px 30px rgba(0,0,0,.48),0 0 22px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Full-tree troop labels: much larger, placed in the open areas indicated. */
.full-tree-zone{
  width:340px;
  min-height:126px;
  z-index:48;
  transform:translate(-50%,-50%);
}
.full-tree-zone .zone-primary{
  min-height:126px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:17px 19px;
}
.full-tree-zone .zone-title{font-size:28px}
.full-tree-zone .zone-sub{font-size:15px;margin-top:6px}
.full-tree-zone .zone-click{font-size:12px;margin-top:10px;padding:6px 9px}

/* Screen-fixed navigator for focused views.
   It never moves when switching Infantry/Marksman/Lancer. */
.focus-navigator{
  position:absolute;
  left:62%;
  top:18px;
  width:min(440px,40%);
  z-index:180;
  pointer-events:none;
  opacity:0;
  transform:translateX(-50%) translateY(-10px);
  transition:opacity .18s ease,transform .18s ease;
}
.focus-navigator.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.focus-nav-card{
  --focus-accent:#5dba66;
  overflow:hidden;
  border-radius:19px;
  background:linear-gradient(180deg,rgba(28,12,14,.97),rgba(14,6,8,.97));
  border:2px solid color-mix(in srgb,var(--focus-accent) 74%,white 7%);
  border-left:8px solid var(--focus-accent);
  box-shadow:0 16px 38px rgba(0,0,0,.45),0 0 30px color-mix(in srgb,var(--focus-accent) 24%,transparent);
  padding:15px 16px 14px;
}
.focus-nav-kicker{
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:1000;
  color:#a89185;
}
.focus-nav-title{
  margin-top:2px;
  font-size:30px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--focus-accent) 78%,white 22%);
}
.focus-nav-sub{
  margin-top:5px;
  font-size:15px;
  color:#efe2db;
}
.focus-nav-current{
  display:inline-flex;
  margin-top:8px;
  padding:5px 8px;
  border-radius:7px;
  background:color-mix(in srgb,var(--focus-accent) 25%,rgba(255,255,255,.03));
  color:color-mix(in srgb,var(--focus-accent) 72%,white 28%);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.focus-nav-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.focus-nav-btn{
  min-width:0;
  min-height:52px;
  padding:8px 9px;
  text-align:left;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--btn-accent) 45%,rgba(255,255,255,.08));
  border-left:4px solid var(--btn-accent);
  background:color-mix(in srgb,var(--btn-accent) 8%,rgba(255,255,255,.035));
  color:#fff;
  cursor:pointer;
}
.focus-nav-btn:hover{
  background:color-mix(in srgb,var(--btn-accent) 18%,rgba(255,255,255,.045));
  transform:translateY(-1px);
}
.focus-nav-btn strong{
  display:block;
  font-size:12px;
  color:color-mix(in srgb,var(--btn-accent) 73%,white 27%);
}
.focus-nav-btn span{
  display:block;
  margin-top:3px;
  font-size:8px;
  color:#b8a197;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.focus-nav-btn.full-tree{
  border-left-color:#d7b99e;
}

/* Old focused-zone styling is no longer used. */
.branch-zone.zone-focused{display:none}

/* On narrower desktop screens, keep everything readable without a sidebar scrollbar. */
@media(max-width:1450px){
  .workspace{grid-template-columns:minmax(0,1fr) 460px}
  .focus-navigator{width:min(410px,42%)}
}
@media(max-height:850px) and (min-width:861px){
  .hero{padding-top:8px}
  .hero h1{font-size:30px}
  .header-actions{margin-top:5px}
  .round-btn{width:34px;height:34px}
  .controls{padding-top:5px;padding-bottom:6px}
  .academy-actions-card{padding:7px 9px}
  .academy-actions-card .control-hint{display:none}
  .academy-actions-card .mass-actions{margin-top:5px}
  .side-panel{padding:9px 11px}
  .panel-title{font-size:15px}
  .panel-sub{font-size:9px}
  .cost-focus-hint{display:none}
  .planner-status{min-height:26px}
}
@media(max-width:1040px){
  .workspace{grid-template-columns:minmax(0,1fr) 390px}
  .focus-navigator{left:58%;width:min(380px,47%)}
  .grand-cost{grid-template-columns:1fr}
}
@media(max-width:860px){
  body{height:auto;min-height:100vh;overflow:auto;display:block}
  .workspace{display:block}
  .side-stack{height:auto;overflow:visible;margin-top:10px}
  .focus-navigator{position:absolute;left:50%;width:calc(100% - 24px)}
}


/* V6.1 readability pass for the right-side planner. */
.workspace{grid-template-columns:minmax(0,1fr) 510px}
.panel-title{font-size:18px}
.panel-sub{font-size:11.5px;line-height:1.4}
.cost-speed label{font-size:10px}
.resource-line{font-size:11.5px}
.resource-line strong{font-size:15px}
.branch-cost-name{font-size:12.5px}
.branch-mini,.branch-mini.time{font-size:10.5px}
.branch-mini strong{font-size:13.5px}
.cost-focus-hint{font-size:9.5px}
.stock-field label{font-size:10px}
.stock-field input,.stock-field select{font-size:13.5px}
.auto-fill-btn{font-size:12px}
.planner-status{font-size:10.5px}
@media(max-width:1450px){
  .workspace{grid-template-columns:minmax(0,1fr) 470px}
}


/* =========================================================
   V7 — larger full-tree focus boxes, merged planner actions,
   color-correct focused navigator, and hold-click arrows.
   ========================================================= */

.controls{display:none !important}
.workspace{
  grid-template-columns:minmax(0,1fr) 545px;
  gap:12px;
}
.side-panel{
  padding:13px 14px;
}
.panel-title{font-size:18px}
.panel-sub{font-size:11.5px;line-height:1.42}
.auto-panel-sub{font-size:12.5px;line-height:1.48}

/* Merge the former War Academy Actions into the cost planner. */
.planner-actions{margin-top:9px}
.planner-global-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
}
.planner-global-actions .global-btn{
  min-height:38px;
  font-size:12px;
}
.branch-costs{
  gap:8px;
  margin-top:9px;
}
.branch-cost-card{
  padding:10px 11px;
  border-radius:14px;
}
.branch-cost-head{margin-bottom:7px}
.branch-cost-name{font-size:13px;letter-spacing:.05em}
.focus-badge{font-size:8px}
.branch-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.branch-mini{
  font-size:10.5px;
}
.branch-mini strong{
  font-size:14px;
}
.branch-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:9px;
}
.branch-card-btn{
  min-height:34px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--branch) 50%,rgba(255,255,255,.1));
  background:color-mix(in srgb,var(--branch) 10%,rgba(255,255,255,.04));
  color:#fff;
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}
.branch-card-btn:hover{
  background:color-mix(in srgb,var(--branch) 18%,rgba(255,255,255,.05));
}
.cost-focus-hint{
  margin-top:8px;
  font-size:9.5px;
}
.stock-form{margin-top:10px}
.auto-panel .panel-sub{font-size:12.5px}

/* Larger full-tree focus cards and moved to the right so they do not cover skills. */
.full-tree-zone{
  width:420px;
  min-height:155px;
  z-index:55;
  transform:translate(-50%,-50%);
}
.full-tree-zone .zone-primary{
  min-height:155px;
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.full-tree-zone .zone-title{
  font-size:34px;
  line-height:1;
  letter-spacing:.07em;
}
.full-tree-zone .zone-click{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  margin-top:16px;
  padding:10px 15px;
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.08));
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 16%,transparent), inset 0 0 0 1px rgba(255,255,255,.04);
}
.zone-click-label{
  position:relative;
  z-index:2;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 78%,white 22%);
}
.full-tree-zone .zone-click:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--accent) 60%,white 10%) 0 2px,transparent 3px),
    radial-gradient(circle at 25% 22%,color-mix(in srgb,var(--accent) 75%,white 20%) 0 2px,transparent 3px),
    radial-gradient(circle at 43% 74%,color-mix(in srgb,var(--accent) 80%,white 18%) 0 2px,transparent 3px),
    radial-gradient(circle at 63% 28%,color-mix(in srgb,var(--accent) 75%,white 12%) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 58%,color-mix(in srgb,var(--accent) 75%,white 18%) 0 2px,transparent 3px);
  opacity:.95;
  animation:zoneSparkle 2s linear infinite;
}
.full-tree-zone .zone-click:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0 28%,rgba(255,255,255,.22) 40%,transparent 52%);
  transform:translateX(-120%);
  animation:zoneSweep 2.4s ease-in-out infinite;
}
@keyframes zoneSparkle{
  0%{transform:translateX(0)}
  100%{transform:translateX(10px)}
}
@keyframes zoneSweep{
  0%,35%{transform:translateX(-120%)}
  65%,100%{transform:translateX(140%)}
}

/* Focused-view navigator uses the active troop color correctly. */
.focus-navigator{
  left:63%;
  top:14px;
  width:min(500px,43%);
}
.focus-nav-card{
  border-radius:21px;
  padding:16px 18px 15px;
}
.focus-nav-title{font-size:31px}
.focus-nav-sub{font-size:15px}
.focus-nav-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--focus-accent) 50%,rgba(255,255,255,.08));
  background:color-mix(in srgb,var(--focus-accent) 20%,rgba(255,255,255,.03));
  color:color-mix(in srgb,var(--focus-accent) 75%,white 25%);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.focus-nav-actions{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.focus-nav-btn strong{
  font-size:13px;
}
.focus-nav-btn span{
  font-size:8.5px;
}

/* Make hover enlargement in full tree readable but not overwhelming. */
.map-shell[data-view="all"] .node:hover{
  transform:translate(-50%,-50%) scale(1.68);
}

/* Arrow buttons feel more interactive, and Max Lv text is slightly larger. */
.arrow{
  user-select:none;
  touch-action:none;
}
.max-label{
  text-transform:none;
}

/* Keep the right side on one screen. */
.side-stack{
  gap:10px;
}
@media(max-width:1500px){
  .workspace{grid-template-columns:minmax(0,1fr) 500px}
}
@media(max-width:1180px){
  .workspace{grid-template-columns:minmax(0,1fr) 430px}
  .full-tree-zone{width:360px}
}


/* =========================================================
   V8 — refocus entire focused box, make full-tree larger,
   add rising flames to click-to-focus, and conversion planner.
   ========================================================= */

/* Use more of the right column height with the new conversion panel. */
.workspace{
  grid-template-columns:minmax(0,1fr) 555px;
}
.side-stack{
  gap:9px;
}

/* Move the focused navigator into the upper-right free space and let the whole card be clickable. */
.focus-navigator{
  left:auto;
  right:18px;
  top:10px;
  width:min(470px,36%);
  transform:translateY(-10px);
}
.focus-navigator.show{
  transform:translateY(0);
}
.focus-nav-card{
  cursor:pointer;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.focus-nav-card:hover{
  box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 36px color-mix(in srgb,var(--focus-accent) 34%,transparent);
  transform:translateY(-1px);
}
.focus-nav-current{
  pointer-events:none;
}

/* Rising flame particles on the full-tree Click To Focus chips, colored per troop type. */
.full-tree-zone{
  width:430px;
  min-height:160px;
}
.full-tree-zone .zone-primary{
  min-height:160px;
}
.full-tree-zone .zone-click{
  padding:11px 16px 10px;
  min-width:175px;
}
.zone-click-label{
  font-size:16px;
}
.full-tree-zone .zone-click:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 8% 100%, color-mix(in srgb,var(--accent) 82%,white 10%) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 100%, color-mix(in srgb,var(--accent) 75%,white 14%) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 100%, color-mix(in srgb,var(--accent) 88%,white 16%) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 100%, color-mix(in srgb,var(--accent) 80%,white 10%) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 100%, color-mix(in srgb,var(--accent) 90%,white 18%) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 100%, color-mix(in srgb,var(--accent) 76%,white 12%) 0 2px, transparent 3px);
  background-repeat:no-repeat;
  background-size:14% 95%,14% 90%,14% 100%,14% 86%,14% 98%,14% 92%;
  animation:zoneFlameRise 1.8s linear infinite;
  opacity:.95;
}
.full-tree-zone .zone-click:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to top, color-mix(in srgb,var(--accent) 28%,transparent), transparent);
  filter:blur(6px);
  opacity:.8;
}
@keyframes zoneFlameRise{
  0%{
    background-position:
      4% 115%,20% 113%,36% 118%,54% 112%,72% 116%,88% 114%;
    opacity:.55;
  }
  55%{
    background-position:
      4% 48%,20% 40%,36% 30%,54% 42%,72% 28%,88% 38%;
    opacity:1;
  }
  100%{
    background-position:
      4% -8%,20% -16%,36% -30%,54% -10%,72% -24%,88% -12%;
    opacity:.12;
  }
}

/* Make the all-tree skills visibly larger by using more of the stage. */
.map-shell[data-view="all"] .node:hover{
  transform:translate(-50%,-50%) scale(1.58);
}

/* Conversion planner styles */
.conversion-panel .panel-sub{
  font-size:11.25px;
  line-height:1.42;
}
.conversion-top-row{
  margin-top:9px;
}
.conversion-bar-wrap{
  margin-top:10px;
  padding:10px 11px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.conversion-percent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.percent-chip{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.percent-chip strong{
  font-size:14px;
  color:#fff;
}
.percent-chip.steel{color:#8dc8ff}
.percent-chip.fc{color:#ff8f62}
.split-slider-shell{
  position:relative;
}
#conversionSplit{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:14px;
  border-radius:999px;
  outline:none;
  background:
    linear-gradient(to right,
      rgba(78,172,230,.95) 0%,
      rgba(78,172,230,.95) var(--split,50%),
      rgba(255,122,76,.95) var(--split,50%),
      rgba(255,122,76,.95) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
#conversionSplit::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;
  border:3px solid #311213;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  cursor:pointer;
}
#conversionSplit::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:#fff;
  border:3px solid #311213;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  cursor:pointer;
}
.conversion-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.conversion-card{
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.conversion-card.steel{
  border-color:rgba(78,172,230,.34);
  box-shadow:inset 0 0 0 1px rgba(78,172,230,.06);
}
.conversion-card.fc{
  border-color:rgba(255,122,76,.34);
  box-shadow:inset 0 0 0 1px rgba(255,122,76,.06);
}
.conversion-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.conversion-card-title{
  font-size:13px;
  font-weight:1000;
}
.conversion-metrics{
  display:grid;
  gap:6px;
}
.conversion-metric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
}
.conversion-metric strong{
  font-size:12px;
  color:#fff;
}

@media(max-width:1500px){
  .workspace{grid-template-columns:minmax(0,1fr) 505px}
  .focus-navigator{width:min(430px,36%)}
}
@media(max-height:950px){
  .conversion-panel .panel-sub{font-size:10.25px}
  .conversion-card{padding:9px 10px}
  .conversion-metric{font-size:9px}
}


/* V9 refinements */
.focus-navigator{top:14px;right:18px;width:min(470px,35%)}
.focus-nav-card{padding:16px 17px 15px;cursor:pointer;border:2px solid color-mix(in srgb,var(--focus-accent) 68%,white 8%);border-left:9px solid var(--focus-accent);background:linear-gradient(180deg,rgba(28,10,13,.98),rgba(13,5,7,.98));box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 18px color-mix(in srgb,var(--focus-accent) 11%,transparent)}
.focus-nav-card:hover{border-color:color-mix(in srgb,var(--focus-accent) 88%,white 12%);background:linear-gradient(180deg,color-mix(in srgb,var(--focus-accent) 12%,#1d0b0e),rgba(13,5,7,.99));box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 22px color-mix(in srgb,var(--focus-accent) 46%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--focus-accent) 22%,transparent)}
.focus-nav-title{margin:0;font-size:32px;line-height:1;color:color-mix(in srgb,var(--focus-accent) 80%,white 20%)}
.focus-nav-actions{margin-top:13px;padding-top:12px}
.focus-nav-kicker,.focus-nav-sub,.focus-nav-current{display:none!important}
.map-shell[data-view="all"] .node.hover-persist,.map-shell[data-view="all"] .node:hover{z-index:125;transform:translate(-50%,-50%) scale(1.58);filter:drop-shadow(0 18px 28px rgba(0,0,0,.72))}
.map-shell[data-view]:not([data-view="all"]) .node.hover-persist,.map-shell[data-view]:not([data-view="all"]) .node:hover{z-index:125;transform:translate(-50%,-50%) scale(1.20);filter:drop-shadow(0 14px 24px rgba(0,0,0,.62))}
.panel-heading-with-help{display:flex;align-items:center;gap:8px}
.panel-help{position:relative;width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#f7ded1;font-size:13px;font-weight:1000;line-height:1;cursor:help}
.panel-help:hover,.panel-help:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.panel-help::after{content:attr(data-help);position:absolute;right:0;top:calc(100% + 9px);width:310px;padding:10px 11px;border-radius:11px;background:rgba(17,7,9,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 32px rgba(0,0,0,.48);color:#eadbd4;font-size:10.5px;font-weight:600;line-height:1.45;text-align:left;text-transform:none;letter-spacing:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:400}
.panel-help:hover::after,.panel-help:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0)}
.grand-cost{gap:10px;padding:8px}
.resource-line{min-width:0;padding:8px 9px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18);border-radius:10px}
.resource-line span:nth-child(2){font-size:10.5px;color:#d4beb3}
.resource-line strong{margin-left:8px;font-size:14px}
.branch-mini-grid{gap:9px}
.branch-mini,.branch-mini.time{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.065);background:rgba(0,0,0,.14)}
.branch-mini span{font-size:9.5px;color:#bca49a}
.branch-mini strong{justify-self:end;font-size:13px;white-space:nowrap}
.branch-cost-card{padding:10px 10px 11px}
.auto-panel .stock-form,.conversion-panel .conversion-top-row{margin-top:10px}
@media(max-width:1500px){.focus-navigator{width:min(430px,37%)}}


/* =========================================================
   V10 — replace resource icons with provided PNGs,
   enlarge icons, remove duplicate words, and fix help tooltip clipping.
   ========================================================= */

.res-icon {
  display:inline-block;
  flex:0 0 auto;
  width:18px;
  height:18px;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  border:0 !important;
  clip-path:none !important;
  box-shadow:none !important;
}
.steel-icon {
  background: center / contain no-repeat url("/static/image/steel-photo.png") !important;
}
.shard-icon {
  background: center / contain no-repeat url("/static/image/fire-crystal-shard.png") !important;
}
.fc-icon {
  background: center / contain no-repeat url("/static/image/fire-crystal.png") !important;
}
.time-icon {
  background: center / contain no-repeat url("/static/generated/embedded/e8b36e984dce966280bf.png") !important;
  border:0 !important;
  border-radius:0 !important;
}
.time-icon:before,
.time-icon:after {
  display:none !important;
  content:none !important;
}

.cost {
  gap:5px;
}
.cost .res-icon {
  width:16px;
  height:16px;
}
.cost.time .res-icon {
  width:18px;
  height:18px;
}
.cost strong {
  max-width:none;
}

.resource-line {
  grid-template-columns:24px 1fr !important;
  gap:10px !important;
  padding:9px 10px !important;
}
.resource-line .res-icon {
  width:22px !important;
  height:22px !important;
}
.resource-line strong {
  justify-self:end;
  margin-left:0 !important;
  font-size:14px !important;
}

.branch-mini,
.branch-mini.time {
  grid-template-columns:22px 1fr !important;
  gap:10px !important;
}
.branch-mini .res-icon,
.branch-mini.time .res-icon {
  width:18px !important;
  height:18px !important;
}
.branch-mini strong {
  justify-self:end;
}

.conversion-card-head {
  justify-content:center;
}
.conversion-card-head .res-icon {
  width:40px !important;
  height:40px !important;
}
.conversion-metric {
  grid-template-columns:20px 1fr;
  display:grid !important;
  align-items:center;
}
.conversion-metric .res-icon {
  width:18px !important;
  height:18px !important;
}
.conversion-metric strong {
  justify-self:end;
}

.percent-chip {
  gap:10px;
}
.percent-chip .res-icon {
  width:18px !important;
  height:18px !important;
}

.panel-heading-with-help,
.side-panel,
.side-stack,
.workspace {
  overflow:visible !important;
}
.panel-help::after {
  right:auto !important;
  left:50% !important;
  top:calc(100% + 10px) !important;
  width:min(340px, calc(100vw - 60px)) !important;
  transform:translate(-50%, -4px) !important;
  white-space:normal !important;
}
.panel-help:hover::after,
.panel-help:focus-visible::after {
  transform:translate(-50%, 0) !important;
}

@media(max-width:1500px) {
  .resource-line strong {
    font-size:13px !important;
  }
}


/* =========================================================
   V11 — new research-speed PNG, larger planner icons,
   compact conversion subtotals, and better one-screen fit.
   ========================================================= */

/* Replace EVERY time/research-speed icon with the newly supplied PNG. */
.time-icon {
  background: center / contain no-repeat url("/static/image/research-speed.png") !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
}
.time-icon::before,
.time-icon::after {
  display:none !important;
  content:none !important;
}

/* Total Planned Cost: make all three resource icons much easier to see. */
.grand-cost {
  padding:7px !important;
  gap:7px !important;
}
.resource-line {
  grid-template-columns:32px 1fr !important;
  min-height:46px;
  padding:7px 10px !important;
}
.resource-line .res-icon {
  width:29px !important;
  height:29px !important;
}
.resource-line strong {
  font-size:15px !important;
}

/* Individual troop totals: increase icon size without increasing card height much. */
.branch-mini-grid {
  gap:6px !important;
}
.branch-mini,
.branch-mini.time {
  grid-template-columns:29px 1fr !important;
  min-height:38px;
  padding:5px 8px !important;
}
.branch-mini .res-icon,
.branch-mini.time .res-icon {
  width:25px !important;
  height:25px !important;
}
.branch-mini strong {
  font-size:13px !important;
}

/* Skill rows use the same new speed icon, but remain compact. */
.cost .res-icon {
  width:17px !important;
  height:17px !important;
}
.cost.time .res-icon {
  width:19px !important;
  height:19px !important;
}

/* Conversion planner:
   no oversized top resource icon, larger row icons, Days as text. */
.conversion-card {
  padding:8px 10px !important;
}
.conversion-card-head {
  display:none !important;
}
.conversion-metrics {
  gap:4px !important;
}
.conversion-metric {
  min-height:27px;
  grid-template-columns:28px 1fr !important;
  gap:7px;
}
.conversion-metric .res-icon {
  width:23px !important;
  height:23px !important;
}
.conversion-metric strong {
  font-size:12px !important;
}
.conversion-metric.days-row {
  grid-template-columns:auto 1fr !important;
}
.days-label {
  font-size:10px;
  font-weight:1000;
  color:#d8c2b7;
  letter-spacing:.04em;
}

/* Keep the whole right-side tool stack just a little tighter vertically. */
.side-stack {
  gap:7px !important;
}
.side-panel {
  padding:11px 13px !important;
}
.branch-costs {
  gap:6px !important;
  margin-top:7px !important;
}
.branch-cost-card {
  padding:8px 9px 9px !important;
}
.branch-card-actions {
  margin-top:6px !important;
}
.branch-card-btn {
  min-height:31px !important;
}
.planner-actions {
  margin-top:7px !important;
}
.planner-global-actions .global-btn {
  min-height:34px !important;
}
.stock-form {
  gap:6px !important;
  margin-top:8px !important;
}
.conversion-bar-wrap {
  margin-top:8px !important;
  padding:8px 10px 9px !important;
}
.conversion-summary {
  margin-top:8px !important;
  gap:7px !important;
}
.conversion-top-row {
  margin-top:7px !important;
}
.panel-title {
  line-height:1.05;
}

/* Slightly reduce non-essential helper line heights before adding scrolling. */
.cost-focus-hint {
  margin-top:5px !important;
  line-height:1.2;
}
.planner-status {
  min-height:28px !important;
  padding:6px 8px !important;
}


/* =========================================================
   V12 — server/viewport stability and complete full-tree fit
   ========================================================= */

/* The subtitle under the page title has been removed in HTML. */
.hero{
  padding-bottom:7px;
}

/* Use the real dynamic browser viewport and only two visible grid rows:
   header + workspace. This avoids the blank/cut layout seen through the
   private-server browser viewport. */
body{
  height:100dvh !important;
  min-height:100dvh !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  overflow:hidden !important;
}

.workspace{
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

/* Never hard-clip the right-side tools. If the browser viewport is a few
   pixels shorter, they remain reachable with wheel scrolling, without a
   visible default scrollbar. */
.side-stack{
  min-height:0 !important;
  height:100% !important;
  overflow-x:visible !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  padding-right:0 !important;
  overscroll-behavior:contain;
}
.side-stack::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Help bubbles themselves remain visible. */
.side-panel{
  overflow:visible !important;
}

/* Keep the map stage filling all available workspace height. */
.stage-wrap{
  min-height:0 !important;
  height:100% !important;
}
.stage{
  min-height:0 !important;
  height:100% !important;
}

/* A little less vertical bulk on ordinary laptop-height screens so the
   three planner panels usually fit without needing any scroll at all. */
@media (max-height: 980px) and (min-width: 861px){
  .side-stack{gap:6px !important}
  .side-panel{padding:9px 11px !important}
  .panel-title{font-size:16px !important}
  .cost-title-row{gap:8px !important}
  .grand-cost{margin-top:6px !important;padding:6px !important}
  .resource-line{min-height:40px !important;padding:5px 8px !important}
  .planner-actions{margin-top:5px !important}
  .planner-global-actions .global-btn{min-height:31px !important}
  .branch-costs{gap:5px !important;margin-top:5px !important}
  .branch-cost-card{padding:7px 8px !important}
  .branch-cost-head{margin-bottom:4px !important}
  .branch-mini,.branch-mini.time{min-height:33px !important;padding:4px 7px !important}
  .branch-card-actions{margin-top:5px !important}
  .branch-card-btn{min-height:28px !important}
  .cost-focus-hint{display:none !important}
  .stock-form{margin-top:6px !important;gap:5px !important}
  .stock-field input,.stock-field select{min-height:34px !important;padding:6px 8px !important}
  .auto-fill-btn{min-height:34px !important;padding:6px 8px !important}
  .planner-status{min-height:25px !important;padding:5px 7px !important}
  .conversion-top-row{margin-top:5px !important}
  .conversion-bar-wrap{margin-top:6px !important;padding:6px 9px 7px !important}
  .conversion-summary{margin-top:6px !important}
  .conversion-card{padding:6px 8px !important}
  .conversion-metric{min-height:23px !important}
}

/* Very short desktop windows get one extra compact pass, still keeping text readable. */
@media (max-height: 820px) and (min-width: 861px){
  .hero{padding-top:7px !important;padding-bottom:4px !important}
  .hero h1{font-size:27px !important}
  .header-actions{margin-top:5px !important}
  .round-btn{width:34px !important;height:34px !important}
  .side-panel{padding:7px 9px !important}
  .panel-title{font-size:14px !important}
  .resource-line .res-icon{width:24px !important;height:24px !important}
  .branch-mini .res-icon,.branch-mini.time .res-icon{width:21px !important;height:21px !important}
}

/* Phase 3 branch palette tokens moved out of template attributes. */
.branch-cost-card.branch-marksman{--branch:#e46e42}.branch-cost-card.branch-infantry{--branch:#5dba66}.branch-cost-card.branch-lancer{--branch:#46a7dc}