:root{
  --bg:#06101a;--panel:#0a1927ee;--panel2:#071522;--line:#315772;--line2:#25435b;
  --text:#edf7ff;--muted:#8fa8bb;--gold:#f7b731;--gold2:#ffdf72;--cyan:#56d7ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  background:#06111c;position:relative;isolation:isolate;overflow-x:hidden;
}
body:before{
  content:"";position:fixed;z-index:-2;inset:-14%;pointer-events:none;
  background:
    radial-gradient(circle at 17% 15%,rgba(65,142,191,.38) 0,rgba(27,83,121,.22) 22%,transparent 46%),
    radial-gradient(circle at 52% 45%,rgba(38,111,154,.28) 0,rgba(14,55,84,.18) 26%,transparent 53%),
    radial-gradient(circle at 80% 11%,rgba(255,151,58,.24) 0,rgba(191,76,16,.12) 18%,transparent 38%),
    radial-gradient(circle at 88% 73%,rgba(37,93,132,.26) 0,rgba(14,48,72,.15) 25%,transparent 47%),
    linear-gradient(150deg,#050d16 0%,#081b2a 30%,#0a2435 58%,#07131f 100%);
  animation:paletteDrift 18s ease-in-out infinite alternate;
}
body:after{
  content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,7,12,.08),rgba(2,11,18,.24) 48%,rgba(2,8,14,.52)),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 28px);
}
@keyframes paletteDrift{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.02)}
  50%{transform:translate3d(1%,1.5%,0) scale(1.045)}
  100%{transform:translate3d(-.5%,2%,0) scale(1.025)}
}
button,select,input{font:inherit}
button{touch-action:manipulation}
.shell{width:min(1540px,calc(100% - 26px));margin:auto;padding:76px 0 64px}

.top-center-nav{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:20;
}
.nav-pill{
  display:flex;align-items:center;gap:7px;text-decoration:none;color:#e8f6ff;
  background:#081827e8;border:1px solid #365a73;border-radius:999px;padding:10px 17px;
  font-weight:850;box-shadow:0 10px 30px #0005;transition:.2s;
}
.nav-pill:hover{transform:translateY(-2px);border-color:#dca629;box-shadow:0 0 24px #f7b73126}

.theme-toggle{
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid #4c6a80;border-radius:999px;background:#091827e8;color:#edf8ff;
  min-height:46px;padding:10px 16px;font-weight:900;cursor:pointer;
  box-shadow:0 10px 30px #0004;transition:.18s;backdrop-filter:blur(12px);
}
.floating-theme-toggle{
  position:fixed;right:20px;top:50vh;z-index:100000;transform:translateY(-50%);
}
.floating-theme-toggle:hover{transform:translateY(-50%) translateX(-4px);border-color:#f0bc45}
.theme-toggle-text{font-size:.76rem;white-space:nowrap}

.event-hero{
  position:relative;overflow:hidden;min-height:300px;border:1px solid #37556e;border-radius:26px;
  background:linear-gradient(90deg,rgba(4,13,23,.96),rgba(5,17,29,.82) 46%,rgba(5,16,27,.22) 76%);
  box-shadow:0 28px 80px #0008;padding:40px 42px;display:flex;align-items:flex-end;
}
.event-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,12,20,.04),rgba(5,12,20,.10) 45%,rgba(5,12,20,.48));
}
.hero-building{
  position:absolute;right:5%;top:50%;transform:translateY(-50%);
  height:118%;width:45%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 24px 24px #000a) saturate(1.08);opacity:.92;pointer-events:none;
}
.event-copy{position:relative;z-index:2;max-width:700px;text-shadow:0 2px 14px #000b}
.event-kicker{
  display:inline-flex;gap:8px;align-items:center;border:1px solid #d99b2e88;
  background:#74410833;color:#ffe1a0;border-radius:999px;padding:7px 11px;
  font-weight:900;font-size:.75rem;letter-spacing:.08em;
}
.event-copy h1{font-size:clamp(2.5rem,5vw,5rem);line-height:.92;margin:12px 0 10px;color:#fff}
.event-copy p{margin:0;color:#e2edf5;max-width:670px;line-height:1.55;font-weight:600}

.panel{
  margin-top:18px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(7,24,38,.96),rgba(5,17,29,.95));
  backdrop-filter:blur(14px);border-radius:23px;padding:19px;
  box-shadow:0 20px 55px #0006,inset 0 1px 0 rgba(183,229,255,.055);
}
.section-title{
  display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:15px;
}
.section-title h2,.section-title h3{margin:0}
.section-title p{margin:4px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45}
.secondary{
  border:1px solid #47657b;border-radius:12px;background:#102334;color:white;
  font-weight:850;padding:10px 17px;cursor:pointer;transition:.18s;
}
.secondary:hover{border-color:#6f94ae;transform:translateY(-1px)}

.totals-panel{border-color:#4f6b39;box-shadow:0 20px 55px #0006,0 0 0 1px #f7b73110}
.total-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 235px 285px;gap:12px;align-items:stretch;
}
.total-resources{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.total-rss{
  min-width:0;border:1px solid #29485f;background:#071522;border-radius:15px;
  min-height:106px;padding:10px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
}
.total-rss img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 7px #0006)}
.total-rss strong{font-size:1rem}
.total-time{
  border:1px solid #66501f;border-radius:16px;
  background:linear-gradient(135deg,#211b0e,#111a21);display:grid;place-items:center;
  text-align:center;padding:15px;box-shadow:inset 0 0 30px #f7b7310b;
}
.total-time span{display:block;color:#d3b365;font-size:.67rem;font-weight:950;letter-spacing:.09em}
.total-time strong{display:block;color:#ffe08b;font-size:1.55rem;margin-top:6px}


/* Compact planner grid: 5 across on normal desktop, 6 across on wide screens */
.shell{width:min(1840px,calc(100% - 24px))}
.building-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}

.building-slot{
  position:relative;min-width:0;min-height:365px;border-radius:16px;
  border:1px solid #31536b;background:linear-gradient(155deg,#0a1b2a,#06131f);
  box-shadow:0 10px 25px #0004,inset 0 1px 0 rgba(159,219,255,.05);overflow:hidden;
}
.building-slot.empty{
  min-height:365px;display:grid;place-items:center;cursor:pointer;color:#a9c1d2;
  border:1px dashed #4b7390;background:
  radial-gradient(circle at 50% 43%,rgba(86,215,255,.10),transparent 31%),
  linear-gradient(155deg,#0a1a28,#07131f);transition:.18s;
}
.building-slot.empty:hover{transform:translateY(-2px);border-color:#f0bd45;color:#fff;box-shadow:0 15px 30px #0005,0 0 22px #56d7ff13}
.add-inner{text-align:center;padding:14px}
.add-plus{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;
  border:2px solid #4e7d9d;background:#0d2638;color:#7fdcff;font-size:3rem;line-height:1;
  font-weight:200;box-shadow:0 0 22px #38bdf81a,inset 0 0 18px #38bdf812;
}
.building-slot.empty:hover .add-plus{color:#ffe08b;border-color:#e8b23d;background:#31230d}
.add-inner strong{display:block;font-size:.88rem}
.add-inner span{display:block;color:#7894a8;font-size:.62rem;margin-top:4px}

.filled-slot{min-height:365px;height:100%;display:flex;flex-direction:column;padding:8px}
.remove-slot{
  position:absolute;right:7px;top:7px;z-index:20;width:27px;height:27px;border-radius:8px;
  border:1px solid #49657a;background:#091725ee;color:#9fb5c5;cursor:pointer;font-weight:950;font-size:.78rem;
}
.remove-slot:hover{color:#fff;border-color:#ff718d;background:#4b1724}
.building-visual{
  position:relative;height:105px;min-height:105px;display:grid;place-items:center;overflow:hidden;
  border:1px solid #23465c;border-radius:12px;background:
  radial-gradient(circle at 50% 43%,rgba(91,182,232,.16),transparent 44%),
  linear-gradient(180deg,#102b3d,#081826);margin-bottom:6px;pointer-events:none;
}
.building-visual:after{content:"";position:absolute;left:14%;right:14%;bottom:5px;height:10px;border-radius:50%;background:#0005;filter:blur(7px)}
.building-art{
  position:relative;z-index:2;display:block;width:86%;height:94px;max-width:86%;max-height:94px;
  object-fit:contain;object-position:center;filter:drop-shadow(0 7px 9px #0008);pointer-events:none;
}
.building-title{
  text-align:center;font-size:.84rem;font-weight:950;margin:0 28px 6px;line-height:1.14;
  min-height:28px;display:grid;place-items:center;
}
.auto-requirement-badge{
  display:flex;align-items:center;justify-content:center;gap:4px;margin:-1px 0 5px;
  min-height:22px;border:1px solid #a56f1e;border-radius:8px;background:#3b270c;
  color:#ffd878;font-size:.57rem;font-weight:950;letter-spacing:.035em;text-align:center;padding:3px 5px;
}
.needs-start{
  border-color:#e5a62a!important;
  box-shadow:0 0 0 2px #f7b73118,inset 0 0 18px #f7b7310d;
}
.controls-box{
  position:relative;z-index:10;border:1px solid #2c4f67;border-radius:10px;
  background:#071724;padding:6px;margin-bottom:6px;
}
.level-row{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:4px;align-items:end}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field span{color:#9bb1c1;font-size:.55rem;font-weight:850}
.field select{
  position:relative;z-index:15;width:100%;height:31px;min-height:31px;background:#06131f;color:#fff;
  border:1px solid #365a72;border-radius:7px;padding:3px 5px;outline:0;font-weight:850;
  cursor:pointer;pointer-events:auto;font-size:.66rem;
}
.field select:focus{border-color:#e8b23d;box-shadow:0 0 0 2px #f7b73118}
.level-arrow{align-self:end;height:31px;display:grid;place-items:center;color:#7ecfff;font-size:.83rem;font-weight:950}

.cost-box{position:relative;z-index:8;border:1px solid #26475d;border-radius:10px;background:#071522;padding:5px}
.resource-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
.rss{
  min-width:0;min-height:43px;border:1px solid #203d51;background:#0a1b29;border-radius:7px;
  padding:3px 2px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
}
.rss img{width:24px;height:24px;object-fit:contain;display:block;margin:0 auto 1px;filter:drop-shadow(0 2px 3px #0007)}
.rss b{display:block;font-size:.57rem;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.slot-status{
  min-height:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:#8ba6b8;
  font-size:.55rem;padding:4px 3px 0;line-height:1.18;
}
.slot-status.error{color:#ffb4bf}
.slot-status.start-warning{color:#ffd878;font-weight:850}
.slot-time{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:5px;
  border-top:1px solid #1f394b;padding-top:6px;margin-top:6px;color:#cfe5f4;font-weight:950;font-size:.66rem;
}
.slot-time .hourglass{font-size:.85rem}
.slot-time-base{color:#7f9aac;font-size:.53rem;font-weight:700}

/* Global speed / requirements controls */
.speed-panel{padding:15px 17px}
.speed-panel .section-title{margin-bottom:10px}
.speed-total-pill{
  min-width:135px;border:1px solid #4d6f85;background:#0a2030;border-radius:12px;padding:7px 12px;text-align:center;
}
.speed-total-pill span{display:block;color:#8fa8bb;font-size:.58rem;font-weight:800}
.speed-total-pill strong{display:block;color:#8fe6ff;font-size:1.12rem}
.speed-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.speed-card{
  min-width:0;min-height:70px;display:grid;grid-template-columns:auto 42px minmax(0,1fr);gap:7px;
  align-items:center;border:1px solid #29485f;border-radius:12px;background:#071522;padding:8px;
}
.speed-card img{width:40px;height:40px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 4px 5px #0007)}
.speed-card-copy{min-width:0}
.speed-card-copy b{display:block;font-size:.72rem}
.speed-card-copy small{display:block;color:#8199aa;font-size:.55rem;line-height:1.2;margin-top:2px}
.buff-check{width:17px;height:17px;accent-color:#eeb13b;cursor:pointer}
.mini-select{
  grid-column:2/4;width:100%;height:27px;border:1px solid #34556c;border-radius:7px;background:#06131f;
  color:#fff;padding:2px 5px;font-size:.61rem;font-weight:800;
}
.speed-input-card{grid-template-columns:1fr auto}
.speed-input-card .speed-card-copy{grid-column:1}
.percent-input{grid-column:2;display:flex;align-items:center;border:1px solid #365a72;border-radius:8px;background:#06131f;overflow:hidden}
.percent-input input{width:65px;height:31px;border:0;outline:0;background:transparent;color:#fff;padding:4px 6px;font-weight:900;text-align:right}
.percent-input span{padding-right:6px;color:#8fdfff;font-weight:900}
.requirements-card{grid-template-columns:auto 42px 1fr}
.requirement-symbol{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:#15344a;color:#8fdfff;font-size:1.25rem;font-weight:950}

.speed-card.disabled-detail .mini-select{opacity:.5}
.speed-card.disabled-detail img{opacity:.6}

@media(min-width:1720px){.building-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1450px){.speed-grid{grid-template-columns:repeat(4,1fr)}.total-layout{grid-template-columns:1fr 235px 270px}}
@media(max-width:1320px){.building-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.total-layout{grid-template-columns:1fr 235px}}
@media(max-width:980px){.building-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.speed-grid{grid-template-columns:repeat(2,1fr)}.total-layout{grid-template-columns:1fr}.svs-prep-card{min-height:140px}}
@media(max-width:700px){.building-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.speed-grid{grid-template-columns:1fr}}
@media(max-width:470px){.building-grid{grid-template-columns:1fr}}

.svs-prep-card{
  border:1px solid #765d1d;border-radius:15px;
  background:linear-gradient(145deg,#21190b,#0d1820);
  padding:10px;display:flex;flex-direction:column;justify-content:center;gap:8px;
  box-shadow:inset 0 0 28px #f7b7310a;
}
.svs-prep-head{display:grid;grid-template-columns:62px minmax(0,1fr);gap:9px;align-items:center}
.svs-prep-head>img{
  width:62px;height:48px;object-fit:cover;border-radius:10px;border:1px solid #d09b2c;
  box-shadow:0 5px 12px #0006;
}
.svs-prep-head span{display:block;color:#d7b75e;font-size:.57rem;font-weight:950;letter-spacing:.08em}
.svs-prep-head strong{display:block;color:#ffe082;font-size:1.35rem;line-height:1.05;margin-top:3px}
.svs-prep-controls{display:grid;grid-template-columns:1fr;gap:6px}
.svs-valeria{
  display:grid;grid-template-columns:30px 1fr 62px;gap:6px;align-items:center;
  border:1px solid #55451e;border-radius:9px;background:#17170f;padding:5px 6px;
}
.svs-valeria img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid #d39b28}
.svs-valeria span{font-size:.64rem;font-weight:850;color:#f2dfaa}
.svs-valeria select{
  height:28px;border:1px solid #796126;border-radius:7px;background:#0c151b;color:#ffe082;
  font-size:.65rem;font-weight:900;padding:2px 5px;
}
.svs-speedups{
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid #4b4326;border-radius:9px;background:#121915;padding:6px;
  color:#e7dcae;font-size:.63rem;font-weight:850;cursor:pointer;
}
.svs-speedups input{accent-color:#e9ae32;width:15px;height:15px}
.agnes-card img{object-fit:cover}
body.light-theme .svs-prep-card{background:linear-gradient(145deg,#fff9e8,#f2f8fb);border-color:#d1aa4b}
body.light-theme .svs-valeria,
body.light-theme .svs-speedups{background:#fff;border-color:#d8c68f;color:#4f3a0a}
body.light-theme .svs-valeria span{color:#624910}
body.light-theme .svs-valeria select{background:#fff;color:#654800;border-color:#c9a646}
body.light-theme .svs-prep-head strong{color:#785400}


/* Strong light-theme override for the numeric Construction Speed input */
body.light-theme .speed-input-card .percent-input{
  background:#ffffff!important;
  border-color:#86abc1!important;
  box-shadow:inset 0 0 0 1px rgba(84,136,166,.08);
}
body.light-theme .speed-input-card .percent-input input{
  background:#ffffff!important;
  color:#12364f!important;
  -webkit-text-fill-color:#12364f!important;
  caret-color:#12364f!important;
  opacity:1!important;
}
body.light-theme .speed-input-card .percent-input span{
  color:#126f98!important;
}



.preset-launch-area{
  display:flex;justify-content:center;align-items:center;
  margin:18px auto 5px;padding:2px 0;
}
.preset-launch-btn{
  min-width:min(520px,88vw);min-height:84px;
  display:flex;align-items:center;justify-content:center;gap:15px;
  border:1px solid #ffd46a;border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,239,151,.32),transparent 45%),
    linear-gradient(135deg,#8b5d06,#d59612 45%,#8d5e05);
  color:#fff6cf;cursor:pointer;padding:12px 28px;
  box-shadow:0 0 0 1px rgba(255,224,122,.18),0 0 24px rgba(247,183,49,.46),0 0 58px rgba(247,183,49,.22),inset 0 1px 0 rgba(255,255,255,.26);
  animation:presetAura 2.4s ease-in-out infinite;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.preset-launch-hidden{display:none}
.preset-launch-btn:hover{
  transform:translateY(-2px) scale(1.015);
  border-color:#fff0a8;
  box-shadow:0 0 0 1px rgba(255,236,154,.28),0 0 32px rgba(247,183,49,.62),0 0 78px rgba(247,183,49,.30),inset 0 1px 0 rgba(255,255,255,.32);
}
.preset-launch-icon{font-size:2.35rem;line-height:1;filter:drop-shadow(0 0 8px rgba(255,244,176,.75))}
.preset-launch-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.preset-launch-copy b{font-size:1.15rem;line-height:1.05;text-shadow:0 2px 8px rgba(62,37,0,.45)}
.preset-launch-copy small{margin-top:6px;font-size:.74rem;line-height:1.15;color:#fff0bc;font-weight:750}
@keyframes presetAura{
  0%,100%{box-shadow:0 0 0 1px rgba(255,224,122,.16),0 0 20px rgba(247,183,49,.38),0 0 50px rgba(247,183,49,.18),inset 0 1px 0 rgba(255,255,255,.24)}
  50%{box-shadow:0 0 0 1px rgba(255,224,122,.28),0 0 32px rgba(247,183,49,.58),0 0 78px rgba(247,183,49,.28),inset 0 1px 0 rgba(255,255,255,.30)}
}

.presets-panel{
  padding:13px 14px;margin-top:12px;border-color:#6f5721;
  background:linear-gradient(145deg,rgba(28,24,13,.97),rgba(8,19,28,.96));
}
.presets-panel-hidden{display:none}
.preset-panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid #3e3823;
}
.preset-panel-top h2{margin:0;font-size:1rem;color:#ffe08a}
.preset-panel-top p{margin:3px 0 0;color:#a99662;font-size:.67rem}
.preset-minimize-btn{
  border:1px solid #8b6d2b;border-radius:9px;background:#201b0f;color:#f3d783;
  padding:7px 11px;font-size:.68rem;font-weight:900;cursor:pointer;white-space:nowrap;
}
.preset-minimize-btn:hover{background:#332812;border-color:#d9ab3e;color:#fff1bd}

.preset-content-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:10px}
.preset-group{min-width:0;border:1px solid #38495a;border-radius:12px;background:#081621;padding:9px}
.preset-group-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;margin-bottom:7px;
}
.preset-group-title strong{display:block;font-size:.82rem;color:#eef8ff;line-height:1.1}
.preset-group-title>span,.preset-group-title>div>span{
  display:block;color:#8ca2b2;font-size:.64rem;line-height:1.25;margin-top:3px;
}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.preset-btn{
  min-width:0;min-height:62px;border:1px solid #3d5d72;border-radius:9px;
  background:linear-gradient(145deg,#0f2535,#091722);color:#eef8ff;
  padding:8px 10px;cursor:pointer;text-align:left;transition:.15s;
}
.preset-btn:hover{transform:translateY(-1px);border-color:#d4a63e;background:linear-gradient(145deg,#173144,#10212d)}
.preset-btn span{display:block;color:#91a9b9;font-size:.68rem;font-weight:800;line-height:1.1}
.preset-btn b{display:block;color:#f1f8fc;font-size:.89rem;line-height:1.12;margin-top:4px}
.preset-btn small{display:block;color:#d7b86d;font-size:.62rem;line-height:1.1;margin-top:4px}
.preset-btn.minimum{border-color:#315d56}
.preset-btn.minimum:hover{border-color:#58bf9e}
.preset-btn.active-preset{border-color:#f0b83f;box-shadow:0 0 0 1px #f7b73122,0 0 14px #f7b73114}

.minimum-title{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.minimum-title>div:first-child{
  width:100%;
}
.minimum-title .troop-toggle-wrap{
  width:100%;
  justify-content:center!important;
  margin-top:8px;
}
.troop-toggle-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.troop-toggle{
  position:relative;width:62px;min-height:61px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid #36566a;border-radius:9px;background:#0a1b27;color:#a9bdca;
  cursor:pointer;padding:4px;transition:.15s;
}
.troop-toggle input{position:absolute;opacity:0;pointer-events:none}
.troop-toggle img{width:37px;height:37px;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px #0008)}
.troop-toggle span{margin:0!important;font-size:.56rem!important;line-height:1!important;font-weight:900!important;color:#a9bdca!important}
.troop-toggle:hover{border-color:#79a7c2;background:#102535}
.troop-toggle.active{border-color:#e3b044;background:#30250e;box-shadow:0 0 0 1px rgba(247,183,49,.12),0 0 12px rgba(247,183,49,.16)}
.troop-toggle.active span{color:#ffe09a!important}

body.light-theme .preset-launch-btn{
  color:#fff8db;border-color:#e3a929;
  background:radial-gradient(circle at 50% 0%,rgba(255,247,192,.34),transparent 44%),linear-gradient(135deg,#9a6709,#dba31f 45%,#966506);
}
body.light-theme .presets-panel{background:linear-gradient(145deg,#fffaf0,#f1f8fb);border-color:#d1aa4d}
body.light-theme .preset-panel-top{border-color:#ddcfaa}
body.light-theme .preset-panel-top h2{color:#775000}
body.light-theme .preset-panel-top p{color:#7b704d}
body.light-theme .preset-minimize-btn{background:#fff7df;color:#755100;border-color:#d1aa4d}
body.light-theme .preset-group{background:#fafdff;border-color:#a9c2d1}
body.light-theme .preset-group-title strong{color:#173247}
body.light-theme .preset-group-title>span,body.light-theme .preset-group-title>div>span{color:#60798a}
body.light-theme .preset-btn{background:linear-gradient(145deg,#fff,#edf6fb);color:#173247;border-color:#9fbfd1}
body.light-theme .preset-btn:hover{background:#fff7dd;border-color:#c99a2d}
body.light-theme .preset-btn span{color:#627d8e}
body.light-theme .preset-btn b{color:#173247}
body.light-theme .preset-btn small{color:#8b681f}
body.light-theme .preset-btn.active-preset{background:#fff4d2;border-color:#c89423}
body.light-theme .troop-toggle{background:#fff;color:#486579;border-color:#a8c2d1}
body.light-theme .troop-toggle span{color:#486579!important}
body.light-theme .troop-toggle.active{background:#fff1c7;border-color:#c79422}
body.light-theme .troop-toggle.active span{color:#715000!important}

@media(max-width:1150px){.preset-content-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .preset-launch-btn{min-width:min(440px,92vw);padding:11px 18px}
  .preset-launch-copy b{font-size:1rem}
  .preset-launch-copy small{font-size:.68rem}
  .preset-panel-top{align-items:flex-start}
  .preset-group-title{align-items:flex-start;flex-direction:column}
  .troop-toggle-wrap{width:100%;justify-content:center}
}
@media(max-width:480px){
  .preset-grid{grid-template-columns:1fr}
  .preset-launch-btn{min-height:76px}
  .preset-launch-icon{font-size:2rem}
}

.modal-backdrop{
  position:fixed;inset:0;z-index:200000;background:#02080edb;display:none;
  align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(7px);
}
.modal-backdrop.open{display:flex}
.modal{
  width:min(1000px,96vw);max-height:88vh;overflow:auto;border:1px solid #3b617b;
  border-radius:22px;background:linear-gradient(150deg,#0b1e2e,#06121d);box-shadow:0 30px 90px #000b;
}
.modal-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 18px;border-bottom:1px solid #28475c;background:#0a1a29f5;backdrop-filter:blur(12px);
}
.modal-head h2{margin:0;font-size:1.15rem}
.modal-head p{margin:4px 0 0;color:#8199aa;font-size:.72rem}
.modal-close{
  width:36px;height:36px;border-radius:10px;border:1px solid #3d5d72;background:#102536;
  color:#d9e8f2;cursor:pointer;font-weight:950;
}
.building-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.pick-building{
  min-width:0;min-height:174px;overflow:visible;border:1px solid #294a60;border-radius:15px;background:#081725;
  color:#eaf6ff;padding:10px;cursor:pointer;text-align:center;transition:.18s;
}
.pick-building:hover{transform:translateY(-2px);border-color:#e1ad38;background:#102434;box-shadow:0 0 22px #f7b73118}
.pick-building img{
  display:block;width:100%;height:128px;max-width:100%;max-height:128px;margin:0 auto;
  object-fit:contain;object-position:center;filter:drop-shadow(0 8px 9px #0008);pointer-events:none;
}
.pick-building b{display:block;margin-top:6px;font-size:.82rem}
.picker-note{
  grid-column:1/-1;border:1px solid #28495f;border-radius:12px;background:#071522;
  color:#8fa7b8;font-size:.72rem;line-height:1.45;padding:10px 12px;
}

body.light-theme{background:#edf7fc;color:#173247}
body.light-theme:before{
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,1) 0,rgba(242,251,255,.96) 22%,transparent 47%),
    radial-gradient(circle at 55% 46%,rgba(217,244,255,.84) 0,rgba(183,226,247,.46) 27%,transparent 55%),
    radial-gradient(circle at 80% 10%,rgba(255,195,118,.30) 0,rgba(255,150,65,.13) 18%,transparent 38%),
    radial-gradient(circle at 88% 72%,rgba(218,242,252,.74) 0,rgba(180,221,241,.36) 25%,transparent 47%),
    linear-gradient(150deg,#fbfeff 0%,#edf8fd 30%,#dceff8 62%,#f8fcfe 100%);
}
body.light-theme:after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(108,160,190,.08),rgba(81,136,168,.14)),
    repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 1px,transparent 1px 28px);
}
body.light-theme .nav-pill,
body.light-theme .theme-toggle{
  background:#ffffffed;color:#173247;border-color:#9bbbcf;box-shadow:0 8px 24px #345a711e;
}
body.light-theme .event-copy,
body.light-theme .event-copy h1{color:#fff!important}
body.light-theme .event-copy p{color:#edf7ff!important}
body.light-theme .event-kicker{color:#ffe1a0!important}
body.light-theme .panel{
  background:linear-gradient(145deg,rgba(252,254,255,.98),rgba(237,247,252,.97));
  border-color:#9dbed1;color:#10283a;box-shadow:0 18px 48px #31546b24;
}
body.light-theme .building-slot{
  background:linear-gradient(155deg,#fafdff,#e9f4f9);border-color:#a5c2d3;color:#173247;
  box-shadow:0 12px 28px #31546b17;
}
body.light-theme .building-slot.empty{
  background:radial-gradient(circle at 50% 44%,#c9efff55,transparent 35%),linear-gradient(155deg,#fbfeff,#eaf5fa);
  border-color:#8fb4ca;color:#36576c;
}
body.light-theme .add-plus{background:#e7f5fc;border-color:#75aac8;color:#1681b3}
body.light-theme .add-inner span,
body.light-theme .field span{color:#587084}
body.light-theme .field select{background:#fff;color:#10263a;border-color:#9cb9cb}
body.light-theme .rss,
body.light-theme .total-rss{background:#fff;border-color:#b3cbd9;color:#10283a}
body.light-theme .slot-time{border-color:#c6d9e5;color:#38566a}
body.light-theme .secondary{background:#e8f2f8;color:#173247;border-color:#9ab7c9}
body.light-theme .total-time{background:linear-gradient(135deg,#fff7df,#edf6fa);border-color:#d5b65b}
body.light-theme .total-time strong{color:#6d4b00}

body.light-theme .speed-card,
body.light-theme .speed-total-pill,
body.light-theme .controls-box,
body.light-theme .cost-box{background:#f8fcff;border-color:#abc7d6;color:#10283a}
body.light-theme .speed-card-copy small{color:#587084}
body.light-theme .percent-input,
body.light-theme .mini-select{background:#fff;color:#10263a;border-color:#8fb0c3}
body.light-theme .percent-input input{color:#10263a}
body.light-theme .requirement-symbol{background:#e3f3fa;color:#16739c}
body.light-theme .auto-requirement-badge{background:#fff5d8;color:#785000;border-color:#d6a43a}
body.light-theme .slot-status.start-warning{color:#9b6500}

body.light-theme .modal{background:linear-gradient(150deg,#fafdff,#e8f4fa);border-color:#9cbfd2}
body.light-theme .modal-head{background:#f6fbfeef;border-color:#b8ceda;color:#173247}
body.light-theme .modal-head p{color:#587084}
body.light-theme .modal-close{background:#e6f1f7;color:#173247;border-color:#9cb8c8}
body.light-theme .pick-building{background:#fff;color:#173247;border-color:#b2cad8}
body.light-theme .pick-building:hover{background:#fff9e8;border-color:#c6931f}
body.light-theme .picker-note{background:#f4f9fc;color:#587084;border-color:#b4cbd8}


body.light-theme .building-visual{
  background:
    radial-gradient(circle at 50% 43%,rgba(72,171,220,.14),transparent 44%),
    linear-gradient(180deg,#eef8fd,#dcecf4);
  border-color:#a8c6d6;
}
body.light-theme .controls-box,
body.light-theme .cost-box{
  background:#f8fcff;border-color:#abc7d6;
}
body.light-theme .rss{
  background:#fff;border-color:#b8cedb;color:#10283a;
}
body.light-theme .field select{
  background:#fff;color:#10263a;border-color:#8fb0c3;
}
body.light-theme .building-title{color:#10283a}

@media(max-width:980px){
  .building-grid{grid-template-columns:1fr}
  .total-layout{grid-template-columns:1fr}
  .total-resources{grid-template-columns:repeat(3,1fr)}
  .building-picker{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .shell{width:calc(100% - 14px);padding-top:72px}
  .top-center-nav{top:13px}.nav-pill{padding:8px 12px}
  .floating-theme-toggle{right:10px;top:auto;bottom:14px;transform:none}
  .floating-theme-toggle:hover{transform:none}
  .event-hero{min-height:300px;padding:25px 18px}
  .hero-building{right:-16%;width:78%;height:100%;opacity:.4}
  .building-grid{grid-template-columns:1fr}
  .building-slot,.building-slot.empty,.filled-slot{min-height:510px}
  .resource-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .total-resources{grid-template-columns:repeat(2,1fr)}
  .building-picker{grid-template-columns:repeat(2,1fr)}
  .section-title{align-items:flex-start;flex-direction:column}
}