/* Kingdom Guard visual foundation. Keep shared color, scale, and motion decisions here. */
:root{
  --kg-navy:#14213a;--kg-navy-deep:#101827;--kg-royal:#2864c8;--kg-bright:#4d8cff;
  --kg-gold:#e3b341;--kg-gold-light:#f6d675;--kg-ivory:#f4efe2;--kg-stone:#a8adb8;
  --kg-panel:#172b49;--kg-panel-raised:#244469;--kg-panel-soft:#2f5781;
  --kg-danger:#c44747;--kg-danger-text:#ffb7ae;--kg-enemy:#932f3a;--kg-poison:#55a650;--kg-frost:#65c9e8;
  --kg-lightning:#6f9eff;--kg-arcane:#9b69db;--kg-holy:#ffd873;
  --kg-text:var(--kg-ivory);--kg-text-muted:#c5d4e5;--kg-line:#87add4;
  --kg-space-1:4px;--kg-space-2:8px;--kg-space-3:12px;--kg-space-4:16px;
  --kg-space-6:24px;--kg-space-8:32px;--kg-space-12:48px;
  --kg-type-display:clamp(29px,4vw,46px);--kg-type-section:26px;--kg-type-panel:20px;
  --kg-type-body:15px;--kg-type-label:13px;--kg-type-micro:11px;
  --kg-radius-sm:8px;--kg-radius-card:14px;--kg-radius-panel:20px;--kg-radius-pill:999px;
  --kg-shadow-panel:0 18px 48px #071629aa,0 0 0 1px #f6d67525;
  --kg-shadow-press:0 4px 0 #0b2854,0 6px 12px #07162977;
  --kg-opacity-panel:.96;--kg-motion-hover:150ms;--kg-motion-press:90ms;
  --kg-motion-modal:180ms;--kg-motion-progress:240ms;
  --kg-layer-field:0;--kg-layer-hud:2;--kg-layer-panel:5;--kg-layer-modal:10;--kg-layer-toast:12;
  --kg-touch:44px;
  font-family:'Segoe UI',system-ui,sans-serif;color:var(--kg-text);background:var(--kg-navy-deep);
}

.kg-icon{display:inline-block;flex:none;width:1.4em;height:1.4em;vertical-align:-.25em;stroke-width:1.8}
.app{background:radial-gradient(circle at 50% 18%,#3269ae 0,#1f426e 38%,var(--kg-navy) 75%,var(--kg-navy-deep) 100%)}
.topbar{background:linear-gradient(180deg,#3473ca,#1d4d91);border-bottom-color:var(--kg-gold);box-shadow:0 5px 19px #081b3a88}
.bottom-bar{background:linear-gradient(180deg,#1a3962,var(--kg-navy));border-top-color:var(--kg-gold)}
.brand{font-family:Georgia,serif;color:#fff9e9;text-shadow:0 2px 4px #0b2758aa}
.brand b,.brand-gem{color:var(--kg-gold-light);text-shadow:0 0 11px #f6d67577}
.resource,.kg-resource{color:var(--kg-ivory);background:linear-gradient(180deg,#244d80,#17365d);border:1px solid #92b9e6;border-radius:var(--kg-radius-sm);box-shadow:inset 0 1px #ffffff24,0 3px 8px #081a35aa;font-variant-numeric:tabular-nums}
.resource strong,.kg-resource strong{color:#fffdf4;font-variant-numeric:tabular-nums}
.resource.lives .kg-icon,.kg-resource[data-kind="life"] .kg-icon{color:#ff8d85}
.resource.gold .kg-icon,.kg-resource[data-kind="gold"] .kg-icon{color:var(--kg-gold-light)}
.resource.wave .kg-icon{color:#b5dcff}
.icon-button{color:#f8f3e4;background:linear-gradient(#3a72b5,#255386);border-color:#8eb5df;border-radius:var(--kg-radius-sm);box-shadow:var(--kg-shadow-press);transition:filter var(--kg-motion-hover),transform var(--kg-motion-press)}
.icon-button:hover{filter:brightness(1.15)}.icon-button:active{transform:translateY(3px);box-shadow:none}
.icon-button .kg-icon{width:20px;height:20px}
.battlefield{border-color:var(--kg-gold-light);box-shadow:0 0 0 3px #275286,0 12px 30px #081a35aa}

.primary-button,.kg-button--primary{color:#3e2d18;background:linear-gradient(#ffe59b,#e9b64d);border:1px solid #fff0bd;box-shadow:0 4px 0 #a37025,0 7px 14px #08172f88}
.secondary-button,.kg-button--secondary{color:#f8f5ea;background:linear-gradient(#4783d6,#2864ad);border:1px solid #b2d1f4;box-shadow:var(--kg-shadow-press)}
.kg-button--danger{color:#fff8ed;background:linear-gradient(#ce5654,#a73842);border-color:#f1a19c;box-shadow:0 4px 0 #63202c}
.primary-button,.secondary-button,.kg-button{min-height:var(--kg-touch);border-radius:10px;transition:filter var(--kg-motion-hover),transform var(--kg-motion-press),box-shadow var(--kg-motion-press)}
.kg-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kg-space-2);padding:10px 16px;font-weight:800;font-size:var(--kg-type-body);cursor:pointer}
.primary-button:hover,.secondary-button:hover,.kg-button:hover{filter:brightness(1.08)}
.primary-button:active,.secondary-button:active,.kg-button:active{transform:translateY(3px);box-shadow:none}
.primary-button:disabled,.secondary-button:disabled,.kg-button:disabled{opacity:.53;filter:saturate(.38);box-shadow:none;cursor:not-allowed}
.text-button{min-height:var(--kg-touch);color:#d5e8ff}
.icon-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.kg-button:focus-visible,.text-button:focus-visible{outline:3px solid #fff3b1;outline-offset:3px}

.overlay-card,.upgrade-modal,.side-panel,.kg-panel,.kg-modal{color:var(--kg-text);background:linear-gradient(145deg,#315d91,var(--kg-panel) 72%);border:2px solid var(--kg-gold);border-radius:var(--kg-radius-panel);box-shadow:var(--kg-shadow-panel)}
.overlay-card h1,.upgrade-heading h2,.kg-display{font-family:Georgia,'Trebuchet MS',serif;font-size:var(--kg-type-display);font-weight:700;letter-spacing:.015em;line-height:1.08;text-shadow:0 3px 0 #0d274b}
.overlay-card h1 span,.upgrade-heading h2,.kg-display em{color:var(--kg-gold-light)}
.eyebrow,.panel-kicker,.kg-eyebrow{color:var(--kg-gold-light);font-size:var(--kg-type-micro);letter-spacing:.16em;font-weight:800}
.overlay-card p,.kg-panel p{color:var(--kg-text-muted)}
.kingdom-card,.world-card{background:var(--kg-navy)!important}
.kingdom-header,.world-header{background:linear-gradient(180deg,#2d67b2,#1b4179);border-bottom-color:var(--kg-gold)}
.kingdom-scroll,.world-scroll{background:radial-gradient(ellipse at 50% 0,#2e6096,var(--kg-navy) 64%,var(--kg-navy-deep))}
.kingdom-panel,.mode-card,.mission-card,.collection-card,.bestiary-entry,.hero-select-card,.guide-item,.kg-card{background:linear-gradient(150deg,#315a87,#1d3658);color:var(--kg-text);border:1px solid #8db4dc;border-radius:var(--kg-radius-card);box-shadow:0 6px 15px #0716296b}
.kingdom-panel{border-color:var(--kg-gold)}
.kingdom-panel h1,.mode-card h2,.kg-section{font-family:'Trebuchet MS','Segoe UI',sans-serif;font-weight:900;color:#fff7df}
.mode-card strong,.mission-card strong,.collection-card strong{color:var(--kg-gold-light)}
.setting-row,.target-mode{color:var(--kg-text)}
.setting-row select,.target-mode select,.goal-filter select,.profile-choice select{background:#1c385f;color:var(--kg-text);border-color:#8cb2dc;min-height:var(--kg-touch)}
.switch{background:#607c9a}.setting-row input:checked+.switch{background:var(--kg-royal)}

.tower-legend button,.tower-choice,.kg-tower-card{color:var(--kg-ivory);background:linear-gradient(#315f92,#1e416f);border:1px solid #90b8e2;border-radius:var(--kg-radius-sm);box-shadow:0 3px 0 #0d2a53}
.tower-legend button>[data-kg-icon]{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;min-width:20px;box-shadow:none}
.tower-legend button>[data-kg-icon] .kg-icon{width:20px;height:20px}
.tower-legend button{min-width:var(--kg-touch);min-height:var(--kg-touch);display:inline-flex;align-items:center;justify-content:center;gap:4px}
.tower-legend button .kg-icon,.tower-choice .kg-icon{color:var(--kg-gold-light)}
.tower-legend button b,.tower-choice b{color:var(--kg-gold-light);font-variant-numeric:tabular-nums}
.tower-legend button b,.tower-choice b{font-size:max(11px,1em)}
.tower-legend button.armed,.tower-choice:hover,.tower-legend button:hover{background:linear-gradient(#447ec0,#2864a4);border-color:#ffe49e;box-shadow:0 0 0 2px #e3b34166,0 5px 14px #09192e}
.tower-legend button.unaffordable,.tower-choice.unaffordable{opacity:.7}.tower-legend button.unaffordable b,.tower-choice.unaffordable b{color:#ffac9b}
.tower-legend button.restricted{filter:saturate(.35);opacity:.65}
.stage-node b,.kg-stage-node{background:linear-gradient(#4f8cd9,#2864a7);border:3px solid var(--kg-gold-light);box-shadow:0 4px 0 #173c70,0 0 13px #f6d67555;color:#fff9e9}
.stage-node.locked b,.kg-stage-node.is-locked{background:#46566b;border-color:#a8adb8;box-shadow:none;color:#d5d9e0}
.stage-node.selected b{outline:3px solid #fff9d7;outline-offset:3px}
.world-detail{background:linear-gradient(145deg,#315d91,#172b49);border-color:var(--kg-gold)}

.hero-hud{color:var(--kg-text);background:linear-gradient(135deg,#2b639f,#172b49);border-color:var(--kg-gold-light);box-shadow:0 4px 18px #091b34b3}
.hero-hud.selected{border-color:#a9d6ff;box-shadow:0 0 0 2px #79b3f7,0 5px 16px #0b1f3b}
.hero-portrait{border-color:var(--kg-gold-light);background:#2f649b}
.hero-skills button{background:linear-gradient(#356ba8,#1d416c);border-color:#90b5dd;color:#fff7e3;border-radius:var(--kg-radius-card);box-shadow:0 3px 0 #0b2a54}
.hero-skills button .kg-icon{width:24px;height:24px;display:block;margin:auto}
.hero-skills button:disabled{filter:saturate(.3);opacity:.6}
.hero-skills button:not(:disabled):hover{border-color:var(--kg-gold-light);filter:brightness(1.12)}
.hero-skills button.ultimate-button{background:linear-gradient(#8b6c30,#5b431f);border-color:var(--kg-gold-light);color:#fff0ad}
.hero-skills button.ultimate-button.ready{box-shadow:0 0 0 2px #f6d67588,0 0 13px #f6d67555}
.hero-bar.hp i{background:#e77973}.hero-bar.xp i{background:var(--kg-bright)}.hero-bar.ult i{background:var(--kg-gold-light)}
.boss-hud{background:linear-gradient(100deg,#4e2438,#28283f);border-color:#e4a76c;box-shadow:0 5px 20px #1b0e20a8}
.boss-heading{color:#ffdfbf}.boss-track{background:#331b2d;border-color:#e6a177}.boss-track i{background:linear-gradient(90deg,#b83e4a,#e47462)}
.boss-hud[data-phase="3"] .boss-track i{background:linear-gradient(90deg,#902d4b,#d3545a)}
.next-wave-card{background:#1e426edc;border-color:var(--kg-gold-light)}.next-wave-card strong{color:var(--kg-gold-light)}
.game-toast,.kg-toast{color:#fff4de;background:#254f7fe8;border:1px solid var(--kg-gold-light);border-radius:var(--kg-radius-sm)}
.wave-banner{background:#2c5684e8;border-color:var(--kg-gold-light)}
.wave-banner[data-danger="true"],.kg-toast--danger{background:#752d3bdc;border-color:#ffad8a}

.upgrade-card,.evolution-card,.kg-upgrade-card{background:linear-gradient(#315b88,#1b3558);border:2px solid var(--kg-stone);border-radius:var(--kg-radius-card);box-shadow:0 5px 14px #08182eb0}
.upgrade-card.rarity-rare,.kg-upgrade-card.rarity-rare{border-color:var(--kg-frost)}
.upgrade-card.rarity-epic,.kg-upgrade-card.rarity-epic{border-color:var(--kg-arcane)}
.upgrade-card.rarity-legendary,.kg-upgrade-card.rarity-legendary{border-color:var(--kg-gold-light);background:linear-gradient(#685b40,#2b3d58)}
.upgrade-rarity,.upgrade-card.rarity-legendary .upgrade-icon{color:var(--kg-gold-light)}
.upgrade-rarity{font-size:11px}
.upgrade-card.rarity-rare .upgrade-icon{color:var(--kg-frost)}.upgrade-card.rarity-epic .upgrade-icon{color:#d1a6f5}
.upgrade-card-actions button{background:var(--kg-gold-light);color:#32271b;border-color:#ffe7ad;min-height:var(--kg-touch)}
.upgrade-card-actions button:first-child,.upgrade-footer button,.upgrade-close{background:#315f95;color:var(--kg-text);border-color:#a4c3e4;min-height:var(--kg-touch)}
.evolution-card.selected{border-color:var(--kg-gold-light)}

.kg-progress{position:relative;height:13px;min-width:70px;overflow:hidden;border:1px solid #93b0d2;border-radius:var(--kg-radius-pill);background:#102844;box-shadow:inset 0 2px 4px #091629}
.kg-progress>span{display:block;height:100%;background:linear-gradient(90deg,#c99431,var(--kg-gold-light));transition:width var(--kg-motion-progress) ease}
.kg-progress--life>span{background:linear-gradient(90deg,#bb4554,#f38d7e)}
.kg-progress--xp>span{background:linear-gradient(90deg,#2864c8,#89c2ff)}
.kg-progress--boss>span{background:linear-gradient(90deg,#943142,#e56c62)}
.kg-progress>b{position:absolute;inset:0;text-align:center;font-size:10px;line-height:12px;color:#fffdf4;text-shadow:0 1px 2px #000}
.loading-track{background:#102844;border-color:#93b0d2}.loading-track span{background:linear-gradient(90deg,var(--kg-royal),var(--kg-gold-light))}
.mission-card .kg-progress,.kingdom-panel .kg-progress{margin:8px 0}
.kingdom-progress{height:13px;border-color:#91b0d0;background:#102844}.kingdom-progress span{background:linear-gradient(90deg,#cb942e,var(--kg-gold-light))}
.kg-badge{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:2px 9px;border:1px solid #8fb5df;border-radius:var(--kg-radius-pill);background:#2a5990;color:#f8f6eb;font-size:11px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.kg-badge--gold,.kg-badge--legendary{background:#71562b;border-color:var(--kg-gold-light);color:#ffe8a2}
.kg-badge--rare{background:#1d5674;border-color:var(--kg-frost);color:#caf3ff}
.kg-badge--epic{background:#553f75;border-color:var(--kg-arcane);color:#eee1ff}
.kg-badge--danger{background:#6d2c3a;border-color:#ed8b83;color:#ffe8df}
.kg-resource{display:flex;align-items:center;gap:8px;min-height:var(--kg-touch);padding:7px 12px}
.kg-resource small{font-size:var(--kg-type-label);color:var(--kg-text-muted)}
.kg-card{display:flex;align-items:center;gap:12px;padding:14px;min-width:0}
.kg-card>.kg-icon{width:37px;height:37px;color:var(--kg-gold-light)}
.kg-card>div{display:grid;gap:3px;min-width:0;flex:1}.kg-card strong{font-size:15px;color:#fff5dc}.kg-card small{font-size:12px;color:var(--kg-text-muted)}
.kg-card p{font-size:13px;line-height:1.4;margin:0;color:var(--kg-text-muted)}
.kg-tower-card[data-element="frost"]>.kg-icon{color:var(--kg-frost)}.kg-tower-card[data-element="lightning"]>.kg-icon{color:var(--kg-lightning)}
.kg-tower-card[data-element="arcane"]>.kg-icon{color:var(--kg-arcane)}.kg-tower-card[data-element="poison"]>.kg-icon{color:#8fce79}.kg-tower-card[data-element="holy"]>.kg-icon{color:var(--kg-holy)}
.kg-enemy-card{border-color:#b57481;background:linear-gradient(145deg,#5a334b,#292c45)}.kg-enemy-card>.kg-icon{color:#ee9994}
.kg-hero-card img{width:50px;height:50px;object-fit:cover;border:2px solid var(--kg-gold-light);border-radius:10px}
.kg-upgrade-card{display:grid;align-content:start;gap:10px}.kg-upgrade-heading{display:flex;align-items:center;gap:10px}.kg-upgrade-heading .kg-icon{width:30px;height:30px;color:var(--kg-gold-light)}
.kg-stage-node{width:75px;height:80px;display:grid;place-items:center;border-radius:14px}.kg-stage-node .kg-icon{width:21px;height:21px}.kg-stage-node small{font-size:11px}
.kg-tooltip{max-width:250px;padding:9px 12px;color:var(--kg-text);background:#122b4de8;border:1px solid #9dc0e8;border-radius:var(--kg-radius-sm);box-shadow:0 8px 22px #071629aa;font-size:var(--kg-type-label)}
.kg-modal{padding:24px;max-width:520px}.kg-bottom-sheet{padding:16px 18px calc(16px + env(safe-area-inset-bottom));border:2px solid var(--kg-gold);border-radius:18px 18px 0 0;background:linear-gradient(#305d91,#182d4c)}

body[data-quality="low"] .overlay,body[data-quality="low"] .upgrade-overlay{backdrop-filter:none}
body[data-quality="low"] .kg-card,body[data-quality="low"] .overlay-card{box-shadow:none}
.reduced-motion .kg-progress>span{transition:none}
@media(max-width:700px){
  :root{--kg-type-display:32px;--kg-type-section:22px;--kg-type-panel:18px;--kg-type-body:14px}
  .icon-button{min-width:var(--kg-touch);height:var(--kg-touch)}
  .resource{min-height:36px}.overlay-card h1{font-size:var(--kg-type-display)}
  .world-detail,.side-panel{border-radius:18px 18px 0 0;box-shadow:0 -8px 28px #08172faa}
  .kg-modal,.kg-bottom-sheet{max-height:82dvh;overflow:auto}
}
@media(max-width:900px) and (orientation:landscape){.brand{font-size:13px;letter-spacing:.2px;gap:4px}.brand-gem .kg-icon{width:22px;height:22px}}
@media(max-height:500px) and (orientation:landscape){
  .overlay-card h1{font-size:28px}.resource strong{font-size:13px}
  .world-detail,.side-panel{border-radius:14px 0 0 14px}
  .kg-modal,.kg-bottom-sheet{max-height:96dvh}
  .battlefield{overflow:visible}.battlefield canvas{border-radius:12px}
  .hero-hud{position:absolute;left:auto;right:calc(100% + 7px);top:24px;bottom:auto;width:96px;min-height:83px;padding:5px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:3px;border-radius:10px}
  .hero-portrait{width:28px;height:28px;flex-basis:28px;grid-row:1}
  .hero-hud-details{min-width:0;grid-column:1/-1}.hero-hud-details strong{font-size:11px}.hero-hud-details small{display:block;font-size:11px;line-height:1.1;white-space:normal;overflow:visible}
  .hero-bar{height:5px}
  .upgrade-rarity{font-size:11px}.tower-legend button b{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.kg-progress>span,.primary-button,.secondary-button,.kg-button,.icon-button{transition:none}}