:root{
  --bg:#09111c;
  --panel:#0f1b2a;
  --panel-2:#142235;
  --line:#213349;
  --text:#f7fafc;
  --muted:#91a4ba;
  --accent:#42a5ff;
  --danger:#ff667a;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input{font:inherit}
button{color:inherit}
.app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.topbar{min-height:64px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(9,17,28,.96);display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand-title{font-weight:800;font-size:18px;letter-spacing:.1px}
.brand-sub{font-size:11px;color:var(--muted);margin-top:2px}
.status-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{font-size:11px;color:#dbeafe;border:1px solid #284563;background:#122338;padding:5px 8px;border-radius:999px}
.pill-r4{border-color:#7f1d1d;background:#32191d}
.pill-r5{border-color:#6b21a8;background:#281637}
.workspace{min-height:0}
.canvas-shell{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,#13263a 0,#0b1522 55%,#07101a 100%)}
#planner{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.grid-bg{fill:#0f1a28}
.grid-line{shape-rendering:geometricPrecision}
.grid-line-minor{stroke:#2a3d52;stroke-width:.055}
.grid-line-major{stroke:#4b647c;stroke-width:.09}
.axis-text{fill:#6e8499;font-size:.55px;font-weight:700;pointer-events:none}
.object{cursor:pointer}
.object.locked{cursor:default}
.object-body{stroke-width:.085}
.object-label{fill:white;font-weight:900;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.object-coord{fill:#e6edf5;font-size:.48px;font-weight:700;text-anchor:middle;pointer-events:none}
.object.selected .selection-outline{display:block}
.selection-outline{display:none;fill:none;stroke:#fff;stroke-width:.16;stroke-dasharray:.35 .18;pointer-events:none}
.ghost-body{fill-opacity:.34;stroke-width:.085;stroke-dasharray:.3 .18;pointer-events:none}
.ghost-invalid{fill:#ef4444!important;stroke:#fecaca!important}
.empty-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:4px;text-align:center;color:#b7c7d8;pointer-events:none;background:rgba(7,16,26,.74);padding:12px 16px;border:1px solid #274059;border-radius:12px;backdrop-filter:blur(8px)}
.empty-hint strong{color:white}
.empty-hint span{font-size:12px}
.selection-card{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(10,20,32,.94);border:1px solid #2a4158;border-radius:14px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 12px 32px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
.selection-name{font-weight:800}
.selection-meta{font-size:12px;color:var(--muted);margin-top:2px}
.selection-actions{display:flex;gap:7px}
.small-btn{border:1px solid #38516b;background:#17283a;border-radius:9px;padding:7px 9px;font-size:12px;font-weight:700}
.small-btn.danger{border-color:#7a2a38;color:#ffd1d8;background:#311821}
.bottom-toolbar{padding:7px 7px calc(7px + var(--safe-bottom));display:grid;grid-template-columns:repeat(6,1fr);gap:5px;background:#09111c;border-top:1px solid var(--line)}
.tool-btn{min-width:0;border:1px solid transparent;background:transparent;border-radius:11px;padding:6px 3px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#91a4ba;font-size:10px;font-weight:700}
.tool-btn .tool-icon{font-size:19px;line-height:1}
.tool-btn.active{background:#14263a;border-color:#2d4d6b;color:#e7f4ff}
.tool-btn.primary{background:#0c6ed4;color:white;border-color:#248bea}
.tool-btn.danger{color:#ffb9c5;border-color:#5a2834;background:#25151c}
.tool-btn.danger:not(:disabled):active{background:#351a24}
.tool-btn:disabled{opacity:.34;cursor:default}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:30}
.bottom-sheet{position:fixed;z-index:40;left:0;right:0;bottom:0;background:#0e1a29;border-top:1px solid #31465b;border-radius:20px 20px 0 0;max-height:min(76vh,680px);padding:8px 14px calc(18px + var(--safe-bottom));overflow:auto;box-shadow:0 -20px 60px rgba(0,0,0,.42)}
.sheet-handle{width:42px;height:4px;border-radius:999px;background:#40556a;margin:0 auto 9px}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.sheet-head h2{font-size:19px;margin:0}
.sheet-head p{font-size:12px;color:var(--muted);margin:3px 0 0}
.close-btn{width:34px;height:34px;border-radius:50%;border:1px solid #38516b;background:#162536;color:#dbe7f3;font-size:24px;line-height:1}
.element-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.element-card{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid #2d4258;background:#132235;border-radius:13px;padding:10px}
.swatch{flex:0 0 42px;height:42px;border-radius:8px;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10px}
.element-info strong{display:block;font-size:13px}
.element-info span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.action-card{min-height:74px;border:1px solid #2d4258;background:#132235;border-radius:13px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;justify-content:center}
.action-card strong{font-size:14px}
.action-card span{font-size:11px;color:var(--muted)}
.danger-card{border-color:#70303c;background:#2a1820}
.import-card{position:relative;cursor:pointer}
.import-card input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(78px + var(--safe-bottom));transform:translateX(-50%);background:#e6f4ff;color:#10243a;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:88vw;text-align:center}
@media (min-width:800px){
  .app{grid-template-rows:auto auto minmax(0,1fr)}
  .bottom-toolbar{position:absolute;left:14px;top:84px;bottom:auto;width:74px;grid-template-columns:1fr;z-index:10;border:1px solid var(--line);border-radius:14px;padding:7px;background:rgba(9,17,28,.92)}
  .tool-btn{min-height:58px}
  .selection-card{left:auto;right:16px;width:360px}
  .element-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bottom-sheet{left:auto;right:18px;bottom:18px;width:540px;border:1px solid #31465b;border-radius:20px;max-height:78vh}
  .sheet-backdrop{background:rgba(0,0,0,.28)}
}

.selection-card,
.selection-card button,
.bottom-toolbar button,
.bottom-sheet button {
  touch-action: manipulation;
}
.small-btn:disabled {
  opacity:.45;
}

.version-badge{
  display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  background:#163451;border:1px solid #2e5f89;color:#bfe3ff;font-weight:800;
  font-size:10px;vertical-align:1px
}
.element-list{display:block}
.element-category{margin:13px 0 7px}
.element-category:first-child{margin-top:0}
.element-category-title{
  display:flex;align-items:center;gap:7px;color:#91a4ba;font-size:11px;
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin:0 0 7px
}
.element-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.element-info .meta-line{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.meta-chip{
  display:inline-flex;align-items:center;padding:2px 5px;border-radius:999px;
  border:1px solid #36516b;background:#102033;color:#a9bfd3;font-size:9px;font-weight:800
}
.meta-chip.verified{border-color:#28684a;background:#102c22;color:#9de4bd}
.custom-element-panel{
  margin-top:16px;border-top:1px solid #2d4258;padding-top:14px
}
.custom-element-title{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.custom-element-title strong{font-size:14px}
.custom-element-title span{font-size:11px;color:#91a4ba}
.custom-element-form{
  display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px
}
.custom-element-form label{
  display:flex;flex-direction:column;gap:4px;color:#91a4ba;font-size:10px;font-weight:800
}
.custom-element-form input{
  width:100%;min-width:0;border:1px solid #36516b;background:#0b1725;color:#fff;
  border-radius:9px;padding:9px 8px;outline:none
}
.custom-element-form input:focus{border-color:#42a5ff}
.custom-add-btn{
  grid-column:1/-1;border:1px solid #247cc9;background:#0d68bb;color:white;
  border-radius:10px;padding:9px;font-weight:900
}
@media (min-width:800px){
  .element-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .custom-element-form{grid-template-columns:minmax(0,1fr) 72px 72px auto;align-items:end}
  .custom-add-btn{grid-column:auto;height:38px}
}

.pill-heat{border-color:#0d7490;background:#0b2730;color:#b7f3ff}
.pill-heat.warn{border-color:#8a5d1a;background:#342511;color:#ffe2a8}
.pill-heat.good{border-color:#267052;background:#102c22;color:#a7f3d0}

.heat-zone{
  fill:#38bdf8;
  fill-opacity:.075;
  stroke:#38bdf8;
  stroke-opacity:.88;
  stroke-width:.12;
  stroke-dasharray:.45 .22;
  pointer-events:none;
}
.heat-zone-label{
  fill:#7dd3fc;
  font-size:.62px;
  font-weight:900;
  text-anchor:start;
  pointer-events:none;
}

.populate-card{
  grid-column:1/-1;
  min-height:0;
  padding:12px;
  gap:10px;
}
.populate-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.populate-head>div{display:flex;flex-direction:column;gap:4px}
.populate-head span{font-size:11px;color:#91a4ba}
.target-field{
  flex:0 0 70px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:9px;
  font-weight:900;
  color:#91a4ba;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.target-field input{
  width:100%;
  border:1px solid #36516b;
  background:#0b1725;
  color:#fff;
  border-radius:8px;
  padding:7px 6px;
  text-align:center;
  font-weight:900;
}
.populate-btn{
  width:100%;
  border:1px solid #247cc9;
  background:#0d68bb;
  color:white;
  border-radius:10px;
  padding:10px;
  font-weight:900;
}
.populate-btn:disabled{
  opacity:.45;
}

/* V0.11 navigation performance */
#objectLayer, #effectLayer, #gridLayer {
  transform: translateZ(0);
}
.object-body, .grid-line, .heat-zone {
  vector-effect: non-scaling-stroke;
}

/* V0.12: lightweight map-style navigation preview */
#worldLayer{
  transform-box:fill-box;
  transform-origin:0 0;
}
.canvas-shell.is-navigating .object-label,
.canvas-shell.is-navigating .object-coord,
.canvas-shell.is-navigating .axis-text,
.canvas-shell.is-navigating .heat-zone-label,
.canvas-shell.is-navigating .selection-outline{
  visibility:hidden;
}
.canvas-shell.is-navigating .grid-line{
  shape-rendering:optimizeSpeed;
}

.season-bar{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:4px 7px;
  background:#0b1522;
  border-bottom:1px solid var(--line);
}
.season-scroll{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
}
.season-scroll::-webkit-scrollbar{display:none}
.season-tab{
  flex:1 1 0;
  min-width:39px;
  max-width:62px;
  border:1px solid #2d4258;
  background:#122033;
  color:#91a4ba;
  border-radius:8px;
  padding:5px 5px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  touch-action:manipulation;
}
.season-tab.active{
  background:#0c6ed4;
  border-color:#36a0ff;
  color:#fff;
  box-shadow:0 0 0 1px rgba(66,165,255,.12) inset;
}
.season-current{
  flex:0 0 auto;
  color:#7f95aa;
  font-size:9px;
  white-space:nowrap;
}
.season-current strong{color:#cfe8ff}
@media (max-width:520px){
  .season-current{display:none}
}

@media (max-width:600px){
  .topbar{
    min-height:58px;
    padding:7px 10px;
    gap:8px;
  }
  .brand-title{font-size:17px}
  .brand-sub{font-size:10px}
  .status-pills{gap:4px}
  .pill{
    font-size:10px;
    padding:4px 7px;
  }
  .bottom-toolbar{
    padding-top:5px;
    padding-bottom:calc(5px + var(--safe-bottom));
  }
  .tool-btn{
    padding-top:4px;
    padding-bottom:4px;
  }
  .tool-btn .tool-icon{font-size:18px}
}

.selection-card[hidden]{
  display:none !important;
}

html,body{
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
.app{
  width:100%;
}
@supports (height:100dvh){
  html,body,.app{height:100dvh}
}
#planner{
  -webkit-touch-callout:none;
}
.bottom-sheet{
  overscroll-behavior:contain;
}
button{
  -webkit-tap-highlight-color:transparent;
}

body{max-width:100vw}
.season-bar{max-width:100vw}

/* V0.17 Populate Preview */
.populate-preview-bar{
  position:absolute;z-index:18;left:8px;right:8px;bottom:8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border:1px solid #2e6fa4;border-radius:13px;
  background:rgba(8,24,38,.96);box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(10px)
}
.populate-preview-bar[hidden]{display:none!important}
.preview-summary{min-width:0;display:flex;flex-direction:column;gap:2px}
.preview-summary strong{font-size:13px;color:#e7f5ff}
.preview-summary span{font-size:10px;line-height:1.25;color:#9db6ca}
.preview-actions{flex:0 0 auto;display:flex;gap:6px}
.small-btn.apply{background:#0d68bb;border-color:#2b8ee6;color:white}
.preview-member{
  fill:#2d8cff;fill-opacity:.25;stroke:#78c6ff;stroke-width:.13;
  stroke-dasharray:.32 .18;vector-effect:non-scaling-stroke
}
.canvas-shell.is-navigating .preview-member{shape-rendering:optimizeSpeed}

/* V0.17 validation */
.validate-card{border-color:#315e80;background:#11283a}
.validation-sheet{max-height:min(82vh,760px)}
.validation-hero{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid #30485e;border-radius:14px;background:#101f2e;
  padding:12px;margin-bottom:12px
}
.validation-hero>div:first-child{display:flex;flex-direction:column;gap:3px}
.validation-hero strong{font-size:15px}
.validation-hero span{font-size:11px;color:#91a4ba}
.validation-score{
  flex:0 0 auto;min-width:62px;height:62px;border-radius:50%;
  border:2px solid #36516b;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:900;color:#d8e9f8;background:#0b1725
}
.validation-score.good{border-color:#2d8b63;color:#a7f3d0;background:#102c22}
.validation-score.warn{border-color:#9b6b24;color:#ffe0a3;background:#332511}
.validation-score.bad{border-color:#a43e50;color:#ffd0d7;background:#321720}
.validation-section-title{
  margin:12px 0 7px;font-size:10px;color:#8ea5ba;text-transform:uppercase;
  letter-spacing:.08em;font-weight:900
}
.mg-stats-card{
  border:1px solid #2d4258;border-radius:13px;padding:10px;background:#0c1927
}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.stat{
  border:1px solid #263c50;border-radius:9px;padding:8px;background:#101f2e;
  display:flex;flex-direction:column;gap:2px
}
.stat span{font-size:9px;color:#8ea5ba;text-transform:uppercase;font-weight:800}
.stat strong{font-size:14px;color:#e7f4ff}
.stats-note{margin:8px 1px 0;color:#8299ad;font-size:10px;line-height:1.35}
.validation-list{display:flex;flex-direction:column;gap:7px;padding-bottom:4px}
.validation-row{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:flex-start;
  border:1px solid #293e52;border-radius:10px;background:#101e2c;padding:9px
}
.validation-icon{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:12px
}
.validation-row.good .validation-icon{background:#143b2c;color:#9ee4bd}
.validation-row.warn .validation-icon{background:#3a2a13;color:#ffd98d}
.validation-row.bad .validation-icon{background:#3a1921;color:#ffb9c5}
.validation-copy{display:flex;flex-direction:column;gap:2px}
.validation-copy strong{font-size:12px}
.validation-copy span{font-size:10px;line-height:1.3;color:#91a4ba}
@media(min-width:800px){
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .populate-preview-bar{left:90px;right:16px;max-width:720px}
}

/* V0.18 Furnace heat focusing */
.pill-heat{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  line-height:normal;
  cursor:pointer;
  touch-action:manipulation;
}
.pill-heat[aria-disabled="true"]{
  cursor:default;
}
.focus-heat-card{
  border-color:#17647a;
  background:#102a34;
}
.action-card:disabled{
  opacity:.42;
  cursor:default;
}

/* V0.19 editable Populate Preview */
.small-btn.adjust{
  background:#14283a;
  border-color:#41637f;
  color:#cfe7fa;
}
.small-btn.adjust.active{
  background:#694c13;
  border-color:#b98527;
  color:#ffe2a8;
}
.preview-member{pointer-events:none}
.preview-adjusting .preview-member{
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}
.preview-adjusting .preview-member:active{cursor:grabbing}
.preview-member.selected-preview{
  fill-opacity:.44;
  stroke:#ffffff;
  stroke-width:.19;
  stroke-dasharray:none;
}
.preview-member.manually-adjusted{
  stroke:#ffd270;
  fill-opacity:.32;
}

/* V0.23 combined Edit / Navigate mode */
#modeTool.navigate{
  background:#102233;
  border-color:#315775;
  color:#b9daf4;
}

/* V0.24 optional player names */
.selection-card{align-items:flex-end}
.selection-copy{min-width:0;flex:1}
.player-name-editor{
  margin-top:7px;display:flex;align-items:center;gap:7px;min-width:0
}
.player-name-editor[hidden]{display:none!important}
.player-name-editor span{
  flex:0 0 auto;color:#91a4ba;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em
}
.player-name-editor input{
  width:100%;min-width:0;border:1px solid #36516b;background:#0b1725;color:#fff;
  border-radius:8px;padding:7px 8px;font-size:12px;font-weight:750;outline:none
}
.player-name-editor input:focus{border-color:#42a5ff;box-shadow:0 0 0 2px rgba(66,165,255,.12)}
.player-name-editor input:disabled{opacity:.5}
.object-player-name{font-weight:900;letter-spacing:-.01em}
.object-role{fill:#eaf3ff;font-weight:900;text-anchor:middle;dominant-baseline:middle;pointer-events:none;opacity:.92}
@media (max-width:430px){
  .selection-card{gap:8px;padding:9px 10px}
  .selection-actions{gap:5px}
  .selection-actions .small-btn{padding:7px 7px}
}

/* V0.25 named-base refinement */
.object-player-name{font-weight:900;letter-spacing:-.025em;text-anchor:middle;dominant-baseline:middle;pointer-events:none}

/* Nerfed HQ tool-preview shell — presentation only. Planner behavior is unchanged. */
.nerfed-toolbar{
  background:linear-gradient(180deg,rgba(5,11,20,.99),rgba(7,17,30,.98));
  border-bottom-color:rgba(85,169,255,.25);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.nerfed-brand{
  display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;
  min-width:0;flex:0 1 auto;
}
.nerfed-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(126,195,255,.2),0 0 20px rgba(66,165,255,.12);
}
.nerfed-mark img{width:100%;height:100%;display:block;object-fit:cover;filter:contrast(1.06)}
.nerfed-brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.nerfed-kicker{font-size:8px;letter-spacing:.1em;font-weight:900;color:#8fbde9;white-space:nowrap}
.nerfed-kicker b{color:#7ec3ff}
.nerfed-brand .brand-title{font-size:16px;margin-top:2px;white-space:nowrap}
.nerfed-brand .brand-sub{font-size:9px;margin-top:2px;white-space:nowrap}
.nerfed-hq-card{border-color:#2b6596;background:linear-gradient(145deg,#10263a,#0d1f31);text-decoration:none;color:var(--text)}
.nerfed-hq-card strong{color:#a8d6ff}

@media (max-width:520px){
  .topbar{padding:8px 8px;gap:6px;min-height:58px}
  .nerfed-mark{width:30px;height:30px;flex-basis:30px;border-radius:7px}
  .nerfed-brand{gap:6px}
  .nerfed-kicker{font-size:7px;letter-spacing:.075em}
  .nerfed-brand .brand-title{font-size:13px}
  .nerfed-brand .brand-sub{font-size:8px}
  .version-badge{font-size:8px;padding:1px 4px;margin-left:2px}
  .status-pills{gap:3px;flex-wrap:nowrap}
  .pill{font-size:9px;padding:4px 5px}
}
@media (max-width:370px){
  .nerfed-kicker{display:none}
  .nerfed-brand .brand-title{font-size:12px}
  .status-pills .pill{font-size:8px;padding-inline:4px}
}