@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");
  :root{
    --bg:#0f0f12;
    --panel:#1a1c1f;
    --panel2:#22262a;
    --line:#4b535b;
    --text:#e8e4d8;
    --sub:#b9b3a5;
    --accent:#87c06a;
    --accent2:#5da0d8;
    --danger:#d86d5d;
    --warning:#d8b45d;
    --shadow:rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html,body{
    margin:0;height:100%;overflow:hidden;background:#000;color:var(--text);
    font-family: "VT323","Trebuchet MS",Verdana,monospace;
  }
  body{user-select:none;font-size:17px}
  button,input{
    font:inherit;
  }
  .hidden{display:none !important}
  .screen, #mapScreen{
    position:absolute;inset:0;
  }
  .panel{
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:2px solid #000;
    box-shadow:0 6px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--line);
    border-radius:4px;
  }
  .title{
    font-family:"Press Start 2P","VT323",monospace;
    font-size:34px;
    letter-spacing:.04em;
    margin-bottom:14px;
    text-shadow:0 2px 0 #000, 0 0 18px rgba(255,255,255,.08);
  }
  .titleHex{color:var(--text)}
  .titleVale{color:#b8bcc4}
  .titleVersion{color:#b8bcc4;font-size:.34em;display:inline-block;margin-left:14px;vertical-align:middle;letter-spacing:.02em;position:relative;top:-1px;cursor:pointer;user-select:none}
  .titleVersion:hover{filter:brightness(1.1)}
  .titleVersion:focus-visible{outline:2px solid #f5efae;outline-offset:4px;border-radius:3px}
.titleVersion[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(-2px);
  width:min(220px,60vw);
  padding:8px 10px;
  background:#101317;
  border:1px solid #252b31;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
  color:#e8e4d8;
  font-family:"VT323","Trebuchet MS",Verdana,monospace;
  font-size:18px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.2;
  text-align:left;
  white-space:normal;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:1200;
}
.titleVersion[data-tip]::before{
  content:"";
  position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#252b31;
  opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:1201;
}
.titleVersion[data-tip]:hover,
.titleVersion[data-tip]:focus-visible{z-index:1000;}
.titleVersion[data-tip]:hover::after,
.titleVersion[data-tip]:hover::before,
.titleVersion[data-tip]:focus-visible::after,
.titleVersion[data-tip]:focus-visible::before{opacity:1;}
.titleVersion[data-tip]:hover::after,
.titleVersion[data-tip]:focus-visible::after{transform:translateX(-50%) translateY(0);}
.menuSubtitle{color:var(--sub);font-size:20px;line-height:1.25;margin:-8px 0 18px;text-align:left}

.menuSocialLinks{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.menuSocialLink{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(16,19,23,0.9);
  border:1px solid #252b31;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
  text-decoration:none;
  transition:transform .12s ease, filter .12s ease, border-color .12s ease;
}
.menuSocialLink svg{
  width:22px;
  height:22px;
  display:block;
}
.menuSocialLink:hover,
.menuSocialLink:focus-visible{
  filter:brightness(1.08);
  transform:translateY(-1px);
  border-color:#4f5a66;
}
.menuSocialLink:focus-visible{
  outline:2px solid #f5efae;
  outline-offset:2px;
}
.menuSocialYouTube svg{width:24px;height:24px}
.menuSocialReddit svg{width:24px;height:24px}
.menuSocialKofi svg{width:24px;height:24px}

.menuLegalLinks{margin-top:12px;text-align:center;display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.menuLegalLink,
.inlineTextLink{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:#cfc3a6;
  text-decoration:underline;
  cursor:pointer;
}
.menuLegalLink{font-size:18px;line-height:1.25}

.menuLegalSeparator{color:#8b95a1;display:inline-flex;align-items:center;padding:0 2px}
#mainMenuHexopediaHelpLinks{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0}
#mainMenuHexopediaHelpLinks .menuLegalLink{margin:0}

.menuLegalLink:hover,
.inlineTextLink:hover{filter:brightness(1.08)}
.menuLegalLink:focus-visible,
.inlineTextLink:focus-visible{outline:2px solid #f5efae;outline-offset:3px;border-radius:2px}
.inlineTextLink{font-size:1em;vertical-align:baseline}
  .subtitle{color:var(--sub);margin-bottom:22px}
  .menuWrap{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    overflow:visible;
    background:linear-gradient(180deg,#101114,#060607);
    isolation:isolate;
  }
  .menuWrap::before{
    content:"";
    position:absolute;inset:-24px;
    background:
      linear-gradient(180deg, rgba(5,7,10,.34), rgba(6,7,9,.46)),
      radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), rgba(255,255,255,0) 52%),
      url('assets/bg.png') center/cover no-repeat;
    filter: blur(4px) brightness(.76) saturate(.92);
    transform: scale(1.03);
    transform-origin:center;
    z-index:-2;
  }
  .menuWrap::after{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.05), rgba(0,0,0,.24) 70%), linear-gradient(180deg, rgba(5,6,9,.12), rgba(5,6,8,.22));
    z-index:-1;
  }
  .menuCard{
    width:min(640px,94vw);
    padding:26px 28px 24px;
    overflow:visible;
  }
  .menuFieldStack{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
  .menuFieldStack .menuField{margin-bottom:0}
  .menuField{
    display:flex;gap:8px;align-items:center;margin-bottom:14px;
  }
  .menuSeedField{align-items:center}
  .menuField label{color:var(--sub);min-width:84px}
  .menuModeField > label{align-self:center}
  .menuField input{
    flex:1;padding:10px 12px;border-radius:3px;background:#0f1113;color:var(--text);
    border:2px solid #000;box-shadow: inset 0 0 0 2px #31363b;
  }
  .menuModeField{align-items:center}
  .menuModeField > label{min-width:100px}
  .menuRadioGroup{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;min-height:42px;flex:1;min-width:0}
  .menuRadioOption{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:1 1 0;min-width:0}
  .menuRadioOption input{position:absolute;opacity:0;pointer-events:none}
  .menuRadioOption span{
    display:inline-flex;align-items:center;justify-content:center;min-height:42px;width:100%;padding:0 8px;
    background:#1a2026;border:2px solid #000;color:#dfe6db;border-radius:4px;
    box-shadow: inset 0 0 0 2px #48505a;font-size:20px;font-weight:700;letter-spacing:.02em;text-align:center;
    transition:filter .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  }
  .menuRadioOption:hover span{filter:brightness(1.06)}
  .menuRadioOption input:checked + span{background:linear-gradient(180deg,#456b95,#2f4d71);color:#f3f7fb;box-shadow: inset 0 0 0 2px #9cbce4}
  .menuRadioOption input:focus-visible + span{outline:2px solid #f5efae;outline-offset:2px}
.menuRadioOption[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(-2px);
  width:min(260px,72vw);
  padding:8px 10px;
  background:#101317;
  border:1px solid #252b31;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
  color:#e8e4d8;
  font-size:18px; line-height:1.2;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:120;
}
.menuRadioOption[data-tip]::before{
  content:"";
  position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:#252b31;
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
  z-index:121;
}
.menuRadioOption[data-tip]:hover::after,
.menuRadioOption[data-tip]:hover::before,
.menuRadioOption[data-tip]:focus-within::after,
.menuRadioOption[data-tip]:focus-within::before{
  opacity:1;
}
.menuRadioOption[data-tip]:hover,
.menuRadioOption[data-tip]:focus-within{z-index:1000;}
.menuRadioOption[data-tip]:hover::after,
.menuRadioOption[data-tip]:focus-within::after{
  transform:translateX(-50%) translateY(0);
}
  .menuButtons{display:grid;grid-template-columns:1fr;gap:10px;overflow:visible;position:relative;z-index:1;isolation:isolate}
.menuLegalNotice{margin-top:14px;text-align:center;font-size:18px;line-height:1.25;color:#b7ac96;opacity:.95}
  .menuBtn{
    font-family:"VT323","Trebuchet MS",Verdana,monospace;
    font-size:28px;
    padding:12px 14px;background:linear-gradient(180deg,#3a4b36,#2d382a);
    color:var(--text);border:2px solid #000;box-shadow: inset 0 0 0 2px #5e7258;
    border-radius:4px;cursor:pointer;text-align:left;
  }
  .menuBtn.secondary{
    background:linear-gradient(180deg,#31363c,#272b30);
    box-shadow: inset 0 0 0 2px #59636e;
  }
  .menuBtn:hover{filter:brightness(1.08)}
.menuBtn[data-tip]{position:relative}
.menuBtn[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(-2px);
  width:min(320px,72vw);
  padding:8px 10px;
  background:#101317;
  border:1px solid #252b31;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
  color:#e8e4d8;
  font-size:18px; line-height:1.2;
  text-align:left;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:120;
}
.menuBtn[data-tip]::before{
  content:"";
  position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:#252b31;
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
  z-index:121;
}
.menuBtn[data-tip]:hover::after,
.menuBtn[data-tip]:hover::before,
.menuBtn[data-tip]:focus-visible::after,
.menuBtn[data-tip]:focus-visible::before{
  opacity:1;
}
.menuBtn[data-tip]:hover,
.menuBtn[data-tip]:focus-visible{z-index:1000;}
.menuBtn[data-tip]:hover::after,
.menuBtn[data-tip]:focus-visible::after{
  transform:translateX(-50%) translateY(0);
}
  .menuBtn:disabled{opacity:.55;cursor:not-allowed}
  #loadingOverlay{
    position:absolute; inset:0; background:rgba(0,0,0,.82);
    display:flex; align-items:center; justify-content:center; z-index:50;
  }
  #loadingCard{
    width:min(760px,90vw); padding:20px 22px;
  }
  .progressOuter{
    height:16px;background:#0d0e10;border:2px solid #000;box-shadow: inset 0 0 0 2px #353a3e;
    border-radius:2px;overflow:hidden;margin:14px 0 16px;
  }
  .progressInner{
    height:100%; width:0%; background:linear-gradient(90deg,#6ea856,#a3da80);
  }
  #loadingLog{
    font-family: Consolas, Monaco, monospace;font-size:13px;line-height:1.45;
    height:240px;overflow:auto;background:#0d0f11;border-radius:3px;padding:10px 12px;
    border:2px solid #000; box-shadow: inset 0 0 0 2px #2e3438;
  }
  #mapCanvas{
    position:absolute;inset:0;width:100%;height:100%;background:#000;image-rendering:pixelated;
    cursor:grab;
  }
  #mapCanvas.dragging{cursor:grabbing}
  #bottomBar{
    position:absolute;left:14px;bottom:14px;z-index:9;
    display:flex;align-items:flex-end;padding:0;background:none;border:none;box-shadow:none;
  }
  #resourcePanel{
    width:350px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:10px;
    font-size:21px;
    align-self:flex-end;
  }
  #resourcePanel strong{font-size:23px}
  .resourceRow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .resourceItem{display:flex;align-items:center;gap:8px;min-width:152px}
  .iconSlot,.tinyIcon{
    width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
    image-rendering:pixelated;flex:0 0 auto;
  }
  .tinyIcon{width:20px;height:20px}
  #rightSidebar{
    position:absolute;top:14px;right:14px;bottom:14px;width:290px;z-index:9;padding:12px;
    display:flex;flex-direction:column;gap:10px;overflow:hidden;
  }
  #topSidebarButtons{display:grid;grid-template-columns:1fr;gap:8px;order:0}
  .researchRow{display:flex;align-items:center;gap:12px}
  .researchIconButton{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;box-shadow:none;border-radius:0;min-height:0;padding:0;flex:0 0 auto;cursor:pointer}
  .researchIconButton:disabled{cursor:not-allowed;opacity:.48;filter:none}
  .sidebarActionHidden{display:none !important}
  #rosterTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #rosterSubtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .rosterTab.active,.rosterSubtab.active{box-shadow: inset 0 0 0 2px #8fb96f, 0 0 0 2px rgba(143,185,111,.22)}
  #rosterSubtabs .rosterSubtab{font-size:13px;padding:2px 6px;min-height:24px;line-height:1.1}
  #rosterAutoFilterRow{display:flex;align-items:center;gap:8px;margin:2px 2px 0;color:#d8d5cb;font-size:15px;user-select:none}
  #rosterAutoFilterRow input{accent-color:#8fb96f}
  
#rosterWrap.locked #rosterAutoFilterRow{opacity:.58;pointer-events:none}
.automationModeToggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:8px}
.automationModeOption{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;min-width:0}
.automationModeOption input{position:absolute;opacity:0;pointer-events:none}
.automationModeOption span{display:inline-flex;align-items:center;justify-content:center;min-height:30px;width:100%;padding:0 8px;background:#1a2026;border:2px solid #000;color:#dfe6db;border-radius:4px;box-shadow: inset 0 0 0 2px #48505a;font-size:18px;font-weight:700;letter-spacing:.02em;text-align:center;transition:filter .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;}
.automationModeOption:hover span{filter:brightness(1.06)}
.automationModeOption input:checked + span{background:linear-gradient(180deg,#456b95,#2f4d71);color:#f3f7fb;box-shadow: inset 0 0 0 2px #9cbce4}
.automationModeOption input:focus-visible + span{outline:2px solid #f5efae;outline-offset:2px}
.automationModeOption.isDisabled{cursor:default}
.automationModeOption.isDisabled span,.automationModeOption input:disabled + span{filter:none;opacity:.45;background:#14191e;color:#8f98a3;box-shadow: inset 0 0 0 2px #39414a}
.automationModeOption.isDisabled:hover span{filter:none}
.actionBtn:disabled,.miniBtn:disabled{opacity:.48;filter:grayscale(.18);cursor:default;pointer-events:none}
.automationMenuList{display:flex;flex-direction:column;gap:8px;width:100%}
.automationMenuCancel{margin-top:8px;width:100%}
.unitPanelAutomation .statBlock,.unitPanelAutomation .moveTextOnly{display:none}
.unitPanelAutomation #selectedSub{display:none}
.unitPanelAutomation #actionButtons{display:block;width:100%}
  .rosterItem.cityItem{grid-template-columns:minmax(0,1fr)}
  .cityPanelMeta{display:flex;justify-content:space-between;color:var(--sub);font-size:13px;margin-top:6px}
  #hireBtn,#buildBtn,#researchBtn,#endTurnBtn,.actionBtn,.spellBtn,.combatBtn,.miniBtn{
    padding:9px 10px;background:linear-gradient(180deg,#40543a,#304128);color:var(--text);
    border:2px solid #000;box-shadow: inset 0 0 0 2px #69845f;border-radius:4px;cursor:pointer;
  }
  .btnInner{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
  .btnInner .tinyIcon{width:18px;height:18px}
  .btnInner.rightIcon{justify-content:space-between}
  .combatBtn .btnInner{justify-content:center}
  .miniBtn,.combatBtn,.spellBtn{
    background:linear-gradient(180deg,#363d45,#272d34);box-shadow: inset 0 0 0 2px #65707c;
  }
  #researchBtn{
    background:linear-gradient(180deg,#de249b,#9d2471);box-shadow: inset 0 0 0 2px #9d2471;flex:1 1 auto;
    border-color:#f553ba;
  }
  #researchBtn .btnInner > span:last-child{font-size:1.2em;}
  #researchPotionButton{width:58px;height:58px}
  #researchPotionIcon{width:58px;height:58px;display:block}
  #endTurnBtn{
    background:linear-gradient(180deg,#544a31,#3d351f); box-shadow: inset 0 0 0 2px #8f7a4c;
    width:100%;
    font-family:"Press Start 2P","VT323",monospace;
    font-size:16px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#d2d7b8;
    text-align:center;
  }
  #hireBtn:hover,#buildBtn:hover,#researchBtn:hover,#endTurnBtn:hover,.actionBtn:hover,.spellBtn:hover,.combatBtn:hover,.miniBtn:hover{filter:brightness(1.08)}
  #hireBtn:disabled,#buildBtn:disabled,#researchBtn:disabled,#endTurnBtn:disabled,.actionBtn:disabled,.spellBtn:disabled,.combatBtn:disabled,.miniBtn:disabled{opacity:.48;cursor:not-allowed;filter:none}
  #researchPotionButton.canResearch{animation:researchPotionPulse 1.25s ease-in-out infinite}
#hirePanel .miniBtn.unavailable{opacity:.48;cursor:not-allowed;filter:none;pointer-events:auto}
#hirePanel .miniBtn.unavailable:hover{filter:none}
#hirePanel .miniBtn.settlerLocked{opacity:.48;cursor:not-allowed;filter:none}
#hirePanel .miniBtn.settlerLocked .inlineCost{opacity:1}
#hirePanel .miniBtn.settlerLocked:hover{filter:none}
.hireLimitNote,.hireSettlerLimitNote{margin-top:8px;font-size:13px;line-height:1.45;color:var(--danger)}
  #researchPotionIcon.canResearch{animation:researchPotionGlow 1.25s ease-in-out infinite}
  @keyframes researchPotionPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.16);}
  }
  @keyframes researchPotionGlow{
    0%,100%{filter:drop-shadow(0 0 0 rgba(191,71,255,0.0));}
    50%{filter:drop-shadow(0 0 10px rgba(191,71,255,0.92)) drop-shadow(0 0 18px rgba(130,44,220,0.55));}
  }
  #rosterWrap{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1;order:1}
  .sidebarTip{order:2}
  #unitPanel{order:3}
  #endTurnBtn{order:4;margin-top:0}
  #rosterList{
    overflow:auto;min-height:0;flex:1;padding-right:4px;display:flex;flex-direction:column;gap:8px;
  }
  .rosterItem{
    padding:8px;border-radius:4px;border:2px solid #000;box-shadow: inset 0 0 0 2px #4e565e;
    background:linear-gradient(180deg,#252a2f,#1a1e22);cursor:pointer;
    display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px;align-items:stretch;
  }
  .rosterItem.selected{box-shadow: inset 0 0 0 2px #8fb96f, 0 0 0 2px rgba(143,185,111,.24)}
  #rosterWrap.locked .rosterTab,
  #rosterWrap.locked .rosterSubtab,
  #rosterList.locked .rosterItem{
    pointer-events:none;
    cursor:default;
  }
  #rosterWrap.locked .rosterTab,
  #rosterWrap.locked .rosterSubtab{opacity:.6}
  #rosterList.locked .rosterItem{opacity:.72}
  .rosterMain{min-width:0}
  .rosterName{font-size:15px;font-weight:700;margin-bottom:6px}
  .rosterPreviewWrap{
    display:flex;align-items:center;justify-content:center;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 1px #29323a;border-radius:3px;overflow:hidden;
  }
  .rosterPreviewCanvas{width:84px;height:84px;display:block;image-rendering:pixelated}
  .barWrap{height:10px;background:#0f1113;border:1px solid #000;border-radius:2px;overflow:hidden}
  .bar{height:100%}
  .bar.hp-green{background:#74c86b}
  .bar.hp-yellow{background:#d8c45a}
  .bar.hp-red{background:#cf5d52}
  .bar.mana{background:#5d8fff}
  .rosterMeta{display:flex;justify-content:space-between;color:var(--sub);font-size:13px;margin-top:5px}
  .rosterSectionHeader{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0;color:#d8d5cb;font-size:13px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
  .rosterSectionCount{color:var(--sub);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
  #unitPanel{
    position:relative;left:auto;transform:none;bottom:auto;z-index:0;width:100%;
    min-width:0;padding:12px 14px;margin-top:auto;display:flex;flex-direction:column;gap:8px;
    overflow:hidden;
  }
  #unitPanel .row{display:block}
  #unitPanel .name{font-size:18px;font-weight:700}
  #unitPanel .sub{color:var(--sub);font-size:13px}
  .nameEditInput{
    width:100%;background:rgba(10,13,16,.72);color:var(--text);border:2px solid #000;
    box-shadow: inset 0 0 0 1px #56616c;border-radius:3px;padding:5px 8px;font:inherit;font-weight:700;
  }
  .nameEditInput:focus{outline:none;box-shadow: inset 0 0 0 1px #8fb96f, 0 0 0 1px rgba(143,185,111,.2)}
  .nameEditHint{font-size:11px;color:var(--sub);margin-top:5px}
  .abilityChipRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .abilityChip{
    display:inline-flex;align-items:center;padding:4px 7px;background:#20262c;border:1px solid #000;
    box-shadow: inset 0 0 0 1px #56616c;border-radius:3px;color:var(--text);font-size:13px;cursor:help;
  }
  .uiTooltip{
    position:fixed;z-index:80;max-width:280px;padding:9px 11px;border-radius:3px;pointer-events:none;
    background:#11161b;border:2px solid #000;box-shadow: inset 0 0 0 2px #46515b, 0 8px 20px rgba(0,0,0,.45);
    font-size:14px;line-height:1.4;color:var(--text);
  }
  #enemyHoverPanel{
    position:fixed;z-index:32;width:230px;padding:10px 12px;border-radius:3px;pointer-events:none;
    background:rgba(17,22,27,.84);border:2px solid #000;box-shadow: inset 0 0 0 2px rgba(70,81,91,.92), 0 8px 20px rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
  }
  #enemyHoverPanel .enemyHoverName{font-size:16px;font-weight:700;margin-bottom:4px}
  #enemyHoverPanel .enemyHoverMeta{margin-bottom:7px;color:#93d4ff;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #enemyHoverPanel .enemyHoverMetaWarn{color:#ff7d7d}
  .hoverStat{display:flex;align-items:center;gap:7px;margin-top:7px}
  .hoverStat:first-of-type{margin-top:0}
  .hoverStatLabel{width:44px;color:var(--sub);font-size:13px}
  .hoverStatValue{min-width:46px;text-align:right;font-size:13px}
  .hoverStatFiller{flex:1}
  .hoverStatNote{flex:1;color:#93d4ff;font-size:14px;text-align:left;white-space:nowrap}
  .hoverStat.movesOnly .hoverStatValue{margin-left:auto;min-width:34px;text-align:right}
  .hoverBarWrap{height:8px;flex:1;background:#0f1113;border:1px solid #000;border-radius:2px;overflow:hidden}
  .hoverOdds{margin-top:10px;font-size:15px;line-height:1.38;color:var(--text)}
  .hoverOddsLabel{font-weight:700}
  .hoverOddsLabel.even{color:#e5d85c}
  .hoverOddsLabel.favorable,.hoverOddsLabel.very-favorable{color:#8ddf8d}
  .hoverOddsLabel.unfavorable,.hoverOddsLabel.very-unfavorable{color:#f08b8b}
  .statBlock{display:flex;align-items:center;gap:8px;margin-top:6px}
  .statLabel{width:58px;color:var(--sub);font-size:14px}
  .statValue{min-width:56px;text-align:right;font-size:14px}
  .barWrap.big{height:12px;flex:1}
  #actionButtons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:10px;max-width:100%}
  .actionBtn{padding:8px 10px}
.dismissActionBtn,.dangerBtn{background:linear-gradient(180deg,#8c3c38,#6f2c28);box-shadow:inset 0 0 0 2px rgba(255,214,214,.16),0 3px 0 rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.55);color:#fff3f1}
.dismissActionBtn:hover,.dangerBtn:hover{filter:brightness(1.08)}
.spellbookActionBtn{position:relative;min-width:0;padding:8px 10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:inherit;color:#f4f6fa;background:linear-gradient(120deg,#7b33b4,#326ea4,#2e8c68,#a6862f,#9d3f77,#7b33b4);background-size:300% 300%;animation:spellbookRainbowShift 8s ease-in-out infinite;transition:filter .6s ease, box-shadow .6s ease;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 2px 10px rgba(0,0,0,.35)}
.spellbookActionBtn:hover{filter:brightness(1.05) saturate(1.03);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 3px 14px rgba(0,0,0,.42)}
.spellbookActionBtn:disabled{animation:none;background:rgba(72,74,88,.9);color:rgba(255,255,255,.72)}
.spellbookActionBtn .inlineIconStub,.spellbookActionBtn .tinyIcon{margin:0;flex:0 0 auto}
.spellbookActionLabel{display:inline-block;line-height:1;letter-spacing:.02em;white-space:nowrap;text-shadow:-1px 0 0 rgba(0,0,0,.75),1px 0 0 rgba(0,0,0,.75),0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(0,0,0,.75)}
@keyframes spellbookRainbowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .moveTextOnly{display:flex;align-items:center;gap:8px;margin-top:6px}
  .moveTextOnly .statValue{margin-left:auto}
  #movementArrows{
    transition: opacity .12s ease;

    position:absolute;inset:0;z-index:7;pointer-events:none;
  }
  .moveArrow{
    position:absolute;width:34px;height:34px;border:2px solid #000;
    box-shadow: inset 0 0 0 2px rgba(180,220,255,.7), 0 2px 10px rgba(0,0,0,.35);
    background:rgba(102,175,230,.18);color:#fff;font-size:20px;pointer-events:none;
    display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);
  }
  .moveArrow.attack{
    background:rgba(170,82,82,.24);
    box-shadow: inset 0 0 0 2px rgba(240,160,160,.75), 0 2px 10px rgba(0,0,0,.35);
  }
  .moveArrow.mine{
    width:auto;min-width:62px;padding:0 10px;pointer-events:auto;cursor:pointer;
    font-family:"VT323","Trebuchet MS",Verdana,monospace;font-size:22px;
    background:rgba(105,84,40,.9);box-shadow: inset 0 0 0 2px rgba(229,198,119,.78), 0 2px 10px rgba(0,0,0,.35);
  }
  .moveArrow.mine:hover{filter:brightness(1.08)}

  .moveArrow.cityAction{min-width:94px;font-size:20px;padding:0 12px}
  .mapResourceFloat{
    position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
    padding:4px 8px;border:2px solid #000;border-radius:4px;pointer-events:none;z-index:8;
    background:rgba(18,22,27,.92);box-shadow:inset 0 0 0 2px rgba(95,111,125,.82),0 2px 10px rgba(0,0,0,.35);
    color:#f3efe4;font-family:"VT323","Trebuchet MS",Verdana,monospace;font-size:24px;line-height:1;
    animation:mapResourceFloatRise 1200ms ease-out forwards;white-space:nowrap;
  }
  .mapResourceFloatIcon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;line-height:0;overflow:hidden;flex:0 0 auto}
  .mapResourceFloatIcon .iconSlot,.mapResourceFloatIcon .tinyIcon,.mapResourceFloatIcon canvas{width:20px !important;height:20px !important;display:block}
  .mapResourceFloatText{display:inline-block;transform:translateY(1px)}
  .mapResourceFloat-gold{box-shadow:inset 0 0 0 2px rgba(212,182,96,.84),0 2px 10px rgba(0,0,0,.35)}
  .mapResourceFloat-wood{box-shadow:inset 0 0 0 2px rgba(126,186,116,.84),0 2px 10px rgba(0,0,0,.35)}
  .mapResourceFloat-ore{box-shadow:inset 0 0 0 2px rgba(164,154,194,.84),0 2px 10px rgba(0,0,0,.35)}
  .mapResourceFloat-crystal{box-shadow:inset 0 0 0 2px rgba(124,195,230,.84),0 2px 10px rgba(0,0,0,.35)}
  .mapResourceFloat-health{box-shadow:inset 0 0 0 2px rgba(184,214,126,.84),0 2px 10px rgba(0,0,0,.35)}
  .mapResourceFloat-mana{box-shadow:inset 0 0 0 2px rgba(126,182,232,.84),0 2px 10px rgba(0,0,0,.35)}
  .panelResourceFloat{z-index:12;animation-duration:2200ms}
  .panelResourceFloatLeft{
    transform:translate(0,-100%);
    animation-name:mapResourceFloatRiseLeft;
  }
  @keyframes mapResourceFloatRiseLeft{
    0%{opacity:0;transform:translate(0,-85%) scale(.92)}
    12%,55%{opacity:1;transform:translate(0,-100%) scale(1)}
    100%{opacity:0;transform:translate(0,-155%) scale(1.02)}
  }
  @keyframes mapResourceFloatRise{
    0%{opacity:0;transform:translate(-50%,-35%) scale(.92)}
    12%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-105%) scale(1.02)}
  }
.mergePromptCard{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto}
.mergePromptLabel{min-width:132px;padding:6px 12px;border:2px solid #000;border-radius:4px;background:rgba(24,29,35,.96);box-shadow:inset 0 0 0 2px rgba(95,111,125,.82),0 2px 10px rgba(0,0,0,.35);color:#f3efe4;font-size:22px;text-align:center;pointer-events:none}
.mergePromptButtons{display:flex;align-items:center;gap:10px}
.mergePromptBtn{position:static !important;transform:none !important;min-width:72px;height:34px}
  #hireModal,#buildModal{
    position:absolute;inset:0;z-index:58;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.68);
  }
  #hirePanel{
    width:min(940px,92vw);max-height:min(760px,88vh);padding:14px;
    display:flex;flex-direction:column;gap:10px;
  }
  #hireHeaderRow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-width:0;flex:1 1 auto;width:100%}
  #hireResourceSummary{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4750;border-radius:3px;font-size:18px;
  }
  #hireBatchHint{
    color:var(--sub);font-size:17px;line-height:1.15;white-space:nowrap;display:flex;align-items:center;justify-content:center;text-align:center;justify-self:center;width:100%;
  }
  #hireSearchRow{margin:0 0 2px}
  #hireSearchInput{
    width:100%;height:38px;padding:0 12px;border:1px solid #3d4650;border-radius:4px;
    background:#11161b;color:#f5ebd3;font:18px/1.2 "VT323","Trebuchet MS",Verdana,monospace;outline:none;box-sizing:border-box;
  }
  #hireSearchInput::placeholder{color:#8fa0b2;opacity:1}
  #hireSearchInput:focus{border-color:#89b4e3;box-shadow:0 0 0 1px rgba(137,180,227,.35) inset}
  #hireTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
  #hireLowUtilityAnimalsRow{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:8px;padding:0;background:transparent;border:0;border-radius:0;font-size:15px;color:var(--text)}
  #hireLowUtilityAnimalsRow.hidden{display:none}
  #hireLowUtilityAnimalsRow input{width:18px;height:18px;flex:0 0 auto}
  #hireLowUtilityAnimalsRow span{display:inline-flex;align-items:center}
  .hireFilterTab.active{box-shadow: inset 0 0 0 2px #8fb96f, 0 0 0 2px rgba(143,185,111,.22)}
  #hireList{
    overflow:auto;min-height:0;padding-right:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;
  }
  .hireCard{
    padding:13px;border-radius:4px;background:#14181c;border:2px solid #000;box-shadow: inset 0 0 0 2px #444d56;
    display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:13px;align-items:stretch;
  }
  .hireCardMain{min-width:0}
  .hireCardTitle{font-size:20px;font-weight:700;line-height:1.15}
  .hireCardMeta{font-size:15px;color:var(--sub);margin:6px 0 8px}
  .hireCardInfo{font-size:15px;line-height:1.42;color:var(--text);margin:8px 0 10px}
  .hireCardInfo .mute{color:var(--sub);font-size:15px}
  .iconValueRow{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:8px}
  .iconValue{display:inline-flex;align-items:center;gap:7px;font-size:15px}
  .iconValue .tinyIcon,.costPill .tinyIcon,.inlineCost .tinyIcon{flex:0 0 auto}
  .hireAbilityList{display:flex;flex-direction:column;gap:6px;margin-top:4px}
  .hireAbilityEntry{padding:6px 7px;background:#101317;border:1px solid #252b31;border-radius:3px;font-size:15px}
  .hireAbilityEntry .smallNote{display:block;margin-top:2px;font-size:14px}
  .hireSpriteWrap{
    display:flex;align-items:center;justify-content:center;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4750;border-radius:3px;min-height:110px;
  }
  .hireSpriteCanvas{width:98px;height:98px;image-rendering:pixelated}

  #buildPanel{
    width:min(1160px,98vw);height:min(860px,94vh);max-height:min(860px,94vh);padding:14px;
    display:flex;flex-direction:column;gap:12px;position:relative;
  }
  #buildResourceSummary{
    display:flex;flex-wrap:wrap;gap:10px;padding:8px 10px;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4750;border-radius:3px;
  }
  .buildResItem{display:flex;align-items:center;gap:6px;min-width:120px;font-size:14px}
  .buildResItem strong{font-size:17px}
  #buildTreeScroll{overflow:hidden;min-height:0;padding-right:0;padding-bottom:0;display:flex;justify-content:center;align-items:flex-start;flex:1 1 auto}
  #buildTreeCanvas{position:relative;display:inline-block;min-width:100%;width:max-content;padding:2px 0 0 0;transform-origin:top center}
  #buildCloseRow{position:absolute;right:14px;bottom:14px;display:flex;justify-content:flex-end;align-items:flex-end;z-index:3;pointer-events:auto}
  #buildLines{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
  #buildGrid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(5,minmax(152px,1fr));grid-auto-rows:minmax(126px,auto);column-gap:12px;row-gap:28px;
  }
  .buildNode{
    padding:11px;background:#14181c;border:2px solid #000;box-shadow: inset 0 0 0 2px #444d56;
    border-radius:4px;display:flex;flex-direction:column;gap:8px;min-height:126px;position:relative;
  }
  .buildNode.built{box-shadow: inset 0 0 0 2px #78a566;background:#182118}
  .buildNode.locked{box-shadow: inset 0 0 0 2px #5a5350;background:#17191c}
  .buildNode.comingsoon{box-shadow: inset 0 0 0 2px #6c5454;background:#201717}
  .buildNodeTitle{font-size:18px;font-weight:700;line-height:1.2}
  .buildNodeCost{font-size:15px;color:var(--sub);line-height:1.35;display:flex;flex-wrap:wrap;gap:7px}
  .costPill,.inlineCost{
    display:inline-flex;align-items:center;gap:5px;padding:3px 7px;background:#101317;border:1px solid #2a3138;border-radius:3px;
  }
  .buildNode button{margin-top:auto;width:100%;align-self:stretch}
  .buildTooltipTitle{font-size:17px;font-weight:700;margin-bottom:7px}
  .buildTooltipSection{margin-top:9px;font-size:15px;line-height:1.38}
  .buildTooltipUnits{display:flex;flex-wrap:wrap;gap:9px;margin-top:7px}
  .buildTooltipUnit{display:flex;align-items:center;gap:7px;background:#0e1114;border:1px solid #2c333a;border-radius:3px;padding:5px 8px;font-size:15px}
  .buildTooltipSprite{width:28px;height:28px;image-rendering:pixelated;background:#0b0d10;border:1px solid #1f252b}
  .buildTooltipUnit-icon{padding-left:4px}
  .buildTooltipReq.met{color:#78c67b;font-weight:700}

  .buildNode.alchemylocked{box-shadow: inset 0 0 0 2px #5f5a77;background:#171822}

  #alchemyTreeScroll{
    overflow:hidden;min-height:0;padding-right:0;padding-bottom:0;display:flex;justify-content:center;align-items:flex-start;flex:1;
  }
  #alchemyTreeCanvas{position:relative;display:inline-block;min-width:100%;width:max-content;padding:2px 0 0 0;transform-origin:top center}
  #alchemyLines{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
  #alchemyGrid{
    position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(204px,1fr));grid-auto-rows:minmax(118px,auto);column-gap:18px;row-gap:30px;
  }
  .alchemyNode{
    padding:13px 92px 13px 13px;background:#14181c;border:2px solid #000;box-shadow: inset 0 0 0 2px #444d56;
    border-radius:4px;display:flex;flex-direction:column;gap:11px;min-height:118px;position:relative;cursor:pointer;color:var(--text);text-align:left;
  }
  .alchemyNodeTop{display:flex;align-items:flex-start;gap:12px;min-height:0}
  .alchemyNodeTitle{flex:1 1 auto}
  .alchemyNodeArt{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
  .alchemyNodeArt .tinyIcon{width:64px;height:64px}
  .alchemyNode.researched{box-shadow: inset 0 0 0 2px #78a566;background:#182118}
  .alchemyNode.locked{box-shadow: inset 0 0 0 2px #5a5350;background:#17191c}
  .alchemyNode.prereqLocked:not(.researched){opacity:.52;filter:saturate(.7) brightness(.9)}
  .alchemyNode.unaffordable:not(.researched){box-shadow: inset 0 0 0 2px #7a6250;background:#1b1714}
  .alchemyNode.unavailable{cursor:not-allowed}
  .alchemyNodeTitle{font-size:18px;font-weight:700;line-height:1.2;min-width:0;flex:1}
  .alchemyNodeCost{display:flex;align-items:center;gap:7px;font-size:20px;color:var(--sub);margin-top:auto}
  .alchemyNodeCost > span:last-child{font-weight:700}
  .alchemyNodeCost .tinyIcon{width:20px;height:20px}


  #alchemyModal{
    position:absolute;inset:0;z-index:59;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.68);
  }
  #alchemyPanel{
    width:min(1120px,96vw);max-height:min(860px,94vh);padding:14px;
    display:flex;flex-direction:column;gap:12px;
  }
  #alchemyResourceSummary{
    display:flex;flex-wrap:wrap;gap:10px;padding:8px 10px;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4750;border-radius:3px;
  }
  .alchemyResItem{display:flex;align-items:center;gap:6px;min-width:120px;font-size:14px}
  .alchemyResItem strong{font-size:17px}
  .dimmed{
    pointer-events:none;opacity:.55;
  }
  #endTurnConfirmModal{
    position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:14px;
  }
  #endTurnConfirmCard{
    width:min(560px,92vw);padding:16px;display:flex;flex-direction:column;gap:12px;
  }
  #endTurnConfirmBody{font-size:22px;line-height:1.3}
  #endTurnConfirmList{margin:0;padding-left:28px;font-size:24px;line-height:1.35}
  #endTurnConfirmList li{margin:2px 0}
  #endTurnConfirmFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  #endTurnConfirmSkipRow{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--sub);user-select:none}
  #endTurnConfirmSkip{width:16px;height:16px}
  #endTurnConfirmButtons{display:flex;align-items:center;gap:10px;margin-left:auto}
  #endTurnConfirmButtons .miniBtn{min-width:86px}
  #combatModal{
    position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);
  }
  #combatCard{
    width:min(1100px,94vw);height:min(720px,92vh);padding:16px;display:grid;
    grid-template-columns:1fr 360px 1fr;gap:12px;
  }
  .combatSide{padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
  .combatSide.active-turn{outline:2px solid #f8fbff;outline-offset:-2px;box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1px rgba(255,255,255,.28), 0 0 14px rgba(255,255,255,.12)}
  .combatSide h3{margin:0;font-size:20px}
  .combatFigure{
    height:250px;background:#0b0d0f;border-radius:4px;border:2px solid #000;box-shadow: inset 0 0 0 2px #3f474f;
    display:flex;align-items:center;justify-content:center;
  }
  .combatStat{font-size:18px;color:var(--sub);display:flex;align-items:center;gap:8px}
  .combatBar{min-height:8px;height:auto}
  .stackBars{display:flex;flex-direction:column;gap:4px;align-items:stretch}
  .stackBarsRow{display:flex;gap:4px;align-items:stretch;min-height:8px}
  .stackBars .barWrap{flex:1;min-width:0;height:100%}
  .combatStat .tinyIcon{width:27px;height:27px}
  .combatAbilityChips{margin-top:0;gap:5px;align-items:center}
  .combatAbilityChips .abilityChip{padding:4px 8px;font-size:14px;line-height:1.2}
  .combatList{font-size:14px;line-height:1.45;background:none;border:none;border-radius:0;padding:0;min-height:0}
  .abilityEntry{margin-bottom:8px}
  .abilityEntry:last-child{margin-bottom:0}
  .abilityEntry .smallNote{display:block;margin-top:2px}
  #combatCenter{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0}
  #fightLog{
    flex:1;min-height:0;background:#0f1215;border-radius:4px;padding:11px 13px;overflow:auto;
    border:2px solid #000;box-shadow: inset 0 0 0 2px #3f4750;font-size:15px;line-height:1.54;
  }
  .combatLogAccent{font-weight:700;letter-spacing:.01em}
  .combatResultBanner{
    margin-top:10px;padding:16px 12px;border:2px solid #000;border-radius:4px;
    text-align:center;font-size:24px;font-weight:700;letter-spacing:.02em;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
  }
  .combatResultBannerTitle{font-size:inherit;line-height:1.02}
  .combatResultBannerBody{margin-top:7px;font-size:.67em;line-height:1.2;font-weight:600;letter-spacing:.01em}
  .combatResultBanner.victory{background:#1f3f28;color:#d8ffe3}
  .combatResultBanner.defeat{background:#4a2020;color:#ffdcdc}
  #combatCard.result-victory{box-shadow:0 0 0 3px #3d8a53, 0 10px 35px rgba(0,0,0,.42)}
  #combatCard.result-defeat{box-shadow:0 0 0 3px #9b4444, 0 10px 35px rgba(0,0,0,.42)}
  #combatCard.result-victory #combatCenter{background:#16261a}
  #combatCard.result-defeat #combatCenter{background:#2a1818}
  #combatButtons{display:flex;gap:10px;flex:0 0 auto}
  .combatBtn{flex:1;padding:12px}
  .combatBtn:disabled{opacity:.45;cursor:not-allowed}
  #spellModal{
    position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:14px;
  }
  #spellCard{width:min(560px,92vw);height:min(760px,88vh);max-height:min(760px,88vh);min-height:0;padding:14px;display:flex;flex-direction:column;overflow:hidden}
  #spellManaLabel{
    display:flex;align-items:center;gap:9px;padding:9px 11px;background:#0f1215;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4750;border-radius:3px;font-size:18px;margin-top:6px;
  }
  #spellManaLabel .tinyIconSummary{display:inline-flex;align-items:center;gap:9px}
  #spellList{overflow:auto;min-height:0;flex:1;padding-right:6px}
  .spellEntry{
    margin-top:8px;padding:12px 12px 10px;border-radius:4px;background:#111418;border:2px solid #000;
    box-shadow: inset 0 0 0 2px #3f4650;display:grid;grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"main side" "action side";gap:10px 12px;align-items:start;
  }
  .spellEntryMain{grid-area:main;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;align-self:start;min-height:0;padding-top:0}
  .spellEntry .top{display:flex;justify-content:flex-start;gap:8px;font-weight:700;align-items:flex-start;min-height:0;line-height:1.15;margin:0;padding:0}
  .spellEntry .desc{font-size:14px;color:var(--sub);margin:6px 0 0;line-height:1.35}
  .spellEntrySide{grid-area:side;display:flex;align-items:center;justify-content:center;align-self:stretch;justify-self:center;min-height:100%}
  .spellEntryIcon{
    display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;line-height:0;opacity:.99;overflow:visible;
    background:none;border:none;box-shadow:none;border-radius:0;padding:0;position:static;transform:none;flex:0 0 auto;
  }
  .spellEntryIcon canvas{display:block;image-rendering:pixelated;margin:0 !important;max-width:none;max-height:none;width:52px;height:52px}
  .spellEntryIconCanvas{width:52px;height:52px;display:block;image-rendering:pixelated;position:static}
  .spellEntry .spellBtn{min-width:96px;grid-area:action;grid-column:auto;justify-self:start;align-self:start;margin-top:2px}
  .spellEntry .spellBtn .inlineCost{background:none;border:none;padding:0;gap:8px}
  .sectionHead{font-family:"Press Start 2P","VT323",monospace;font-size:12px;letter-spacing:.08em;color:#d2d7b8;text-transform:uppercase}
  .smallNote{font-size:13px;color:var(--sub)}
  .buildFreeText{color:#9fd2ff;letter-spacing:.4px;text-transform:uppercase}.buildNodeCost .buildFreeText{display:inline-block;font-family:inherit;letter-spacing:inherit;text-transform:inherit}
    .kbd{background:#0f1114;border:1px solid #000;border-radius:4px;padding:1px 5px;color:#dce0cf}
  #dayCounter{
    position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:11;
    padding:9px 16px;border-radius:2px;background:rgba(18,20,24,.92);
    border:2px solid #000;box-shadow: inset 0 0 0 2px #48505a;pointer-events:none;
    text-align:center;white-space:nowrap;font-size:14px;
  }
#raidAlertBanner{
    position:absolute;left:50%;top:66px;transform:translateX(-50%);z-index:12;pointer-events:none;
    font-size:18px;line-height:1;
    color:#ff4d4d;text-shadow:0 2px 0 rgba(0,0,0,.9), 0 0 12px rgba(255,90,90,.28);
    white-space:nowrap;animation:raidAlertPulse 900ms ease-in-out infinite;
  }
  @keyframes raidAlertPulse{
    0%,100%{transform:translateX(-50%) scale(1)}
    50%{transform:translateX(-50%) scale(1.12)}
  }
  #dayCounter.enemyTurn{
    display:flex;align-items:center;gap:10px;justify-content:center;
    color:#dce9f7;
  }
  #dayCounter.mapSpellTargeting{
    max-width:min(70vw,760px);
    white-space:normal;
    line-height:1.35;
    color:#eef6ff;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    font:inherit;
  }
  #dayCounter .mapSpellGuide,
  #dayCounter .mapSpellCancelHint{font:inherit;letter-spacing:0;text-transform:none}
  .turnSpinner{
    width:14px;height:14px;border-radius:50%;display:inline-block;
    border:3px solid rgba(173,131,74,.25);border-top-color:#d6e8ff;border-right-color:#d6e8ff;
    animation:turnSpinnerSpin .8s linear infinite;flex:0 0 auto;
  }
  @keyframes turnSpinnerSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  #dayFlash{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:24;pointer-events:none;
    font-family:"Press Start 2P","VT323",monospace;font-size:56px;letter-spacing:.08em;text-transform:uppercase;
    color:#f2edd7;text-shadow:0 4px 0 rgba(0,0,0,.82), 0 0 22px rgba(255,245,210,.18);
    opacity:0;white-space:nowrap;
  }
  #dayFlash.show{
    animation:dayFlashFade 1400ms ease forwards;
  }
  @keyframes dayFlashFade{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.96)}
    8%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-53%) scale(1.02)}
  }




  .rosterBuildAvail{color:#9fd2ff;font-weight:800;font-size:14px;letter-spacing:.8px;margin-top:6px;text-align:left}

#mapMenuBtn,
#mapHelpBtn{
  position:absolute;top:14px;z-index:12;
  min-width:112px;
  font-family:"Press Start 2P","VT323",monospace;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#mapMenuBtn{left:14px}
#mapHelpBtn{left:138px}

#gameMenuModal,
#saveGameModal,
#victoryModal,
#changelogModal,
#settingsModal,
#hexopediaModal,
#deviceGateModal,
#telemetryConsentModal,
#dismissConfirmModal,
#feedbackModal{
  position:absolute;inset:0;z-index:42;
  background:rgba(0,0,0,.74);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}

#privacyPolicyModal{
  position:absolute;inset:0;z-index:43;
  background:rgba(0,0,0,.78);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}

#gameMenuCard,
#saveGameCard,
#victoryCard,
#changelogCard,
#deviceGateCard,
#telemetryConsentCard,
#dismissConfirmCard{
  width:min(560px,92vw);
}
#feedbackCard{
  width:min(1320px,98vw);
}
#dismissConfirmCard .settingsFooter{
  justify-content:center;
  gap:10px;
}
#dismissConfirmCard .settingsFooter .menuBtn{
  min-width:96px;
  text-align:center;
}

#feedbackBody{width:100%;}
#feedbackFrame{display:block;width:100%;height:min(72vh,720px);border:0;background:#fff;}
#feedbackLocalFallback{display:flex;flex-direction:column;gap:12px;min-height:min(44vh,360px);justify-content:center;align-items:flex-start;padding:18px 6px 6px;}
.feedbackFallbackLead{font-size:28px;line-height:1.15;color:var(--text);}
.feedbackFallbackText{font-size:22px;line-height:1.2;color:var(--sub);max-width:980px;}
.feedbackFallbackActions{padding-top:6px;}
#telemetryConsentCard{
  width:min(840px,94vw);
}
#telemetryConsentCard .menuOverlayTitle{
  font-size:30px;
}
#deviceGateCard .menuOverlayTitle{
  font-size:26px;
}

.deviceGateAcknowledge{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 4px 0;
  font:20px/1.15 "VT323","Trebuchet MS",Verdana,monospace;
  color:#e8e4d8;
}

.deviceGateAcknowledge input{
  margin-top:3px;
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.deviceGateFooter{
  min-height:52px;
}
#changelogCard{
  max-height:min(780px,88vh);
  display:flex;
  flex-direction:column;
}
#privacyPolicyCard{
  width:min(900px,96vw);
  max-height:min(860px,92vh);
  display:flex;
  flex-direction:column;
}

.legalDocBody{
  min-height:0;
}

.legalDocTextBox{
  width:100%;
  min-height:360px;
  max-height:60vh;
  overflow:auto;
  padding:14px 16px;
  border-radius:4px;
  background:#101410;
  color:#e8e4d8;
  border:2px solid #000;
  box-shadow:inset 0 0 0 2px #313b33;
  font:22px/1.24 "VT323","Trebuchet MS",Verdana,monospace;
  white-space:normal;
  user-select:text;
}
.legalDocTextBox h1,
.legalDocTextBox h2,
.legalDocTextBox h3,
.legalDocTextBox h4{
  margin:0 0 10px;
  font-weight:700;
  color:#f0ead7;
}
.legalDocTextBox h1{font-size:30px;}
.legalDocTextBox h2{font-size:27px;margin-top:14px;}
.legalDocTextBox h3{font-size:24px;margin-top:12px;}
.legalDocTextBox h4{font-size:22px;margin-top:10px;}
.legalDocTextBox p,
.legalDocTextBox ul{margin:0 0 10px;}
.legalDocTextBox ul{padding-left:22px;}
.legalDocTextBox li{margin:0 0 4px;}
.legalDocTextBox a{color:#cfe0ff;}
.legalDocTextBox a:focus-visible{outline:2px solid #f5efae;outline-offset:3px;border-radius:2px}

.changelogBody{
  min-height:0;
}

#changelogTextBox{
  width:100%;
  min-height:360px;
  max-height:56vh;
  resize:none;
  overflow:auto;
  padding:12px 14px;
  border-radius:4px;
  background:#101410;
  color:#e8e4d8;
  border:2px solid #000;
  box-shadow:inset 0 0 0 2px #313b33;
  font:20px/1.25 "VT323","Trebuchet MS",Verdana,monospace;
  white-space:pre-wrap;
}

.menuOverlayTitle{margin-bottom:14px}


#settingsCard{
  width:min(760px,94vw);
  padding:20px 22px 18px;
}

#creditsSupportModal{
  position:absolute;
  inset:0;
  z-index:67;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.68);
}

#creditsSupportCard{
  width:min(780px,94vw);
  max-height:min(860px,92vh);
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#creditsSupportBody{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}

.creditsSupportLead{
  margin:0;
  font-size:24px;
  line-height:1.22;
  color:#ebe5d6;
}

.creditsSupportSignoff{
  display:block;
  margin-top:10px;
  font-size:22px;
  color:#ddd4c1;
  text-align:right;
}

.creditsSupportActions{
  display:flex;
  justify-content:center;
}

.creditsSupportSectionHead{
  margin-top:2px;
}

.creditsSupportSection{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:20px;
  line-height:1.25;
  color:#e6e2d7;
}

.creditsSupportSection a{
  color:#bfe0ff;
  text-decoration:none;
}

.creditsSupportSection a:hover{
  text-decoration:underline;
}

.settingsGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.settingsRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:14px;
  align-items:center;
  padding:10px 12px;
  border:2px solid #000;
  box-shadow: inset 0 0 0 2px #31363b;
  border-radius:4px;
  background:#13171b;
}

.settingsRow > span{
  color:var(--text);
}

.settingsControl{
  display:flex;
  align-items:center;
  gap:12px;
}

.settingsControl input[type="range"]{
  flex:1;
}

.settingsValue{
  min-width:54px;
  text-align:right;
  color:#d9dfd4;
}

.checkboxRow{
  grid-template-columns:minmax(0,1fr) auto;
}

.checkboxRow input[type="checkbox"]{
  width:20px;
  height:20px;
}

.settingsFooter{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

@media (max-width: 720px){
  .settingsRow{grid-template-columns:1fr;}
  .checkboxRow{grid-template-columns:1fr auto;}
}


#hexopediaCard{
  width:min(1220px,96vw);
  height:min(860px,92vh);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}

#hexopediaHeader{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
}

#hexopediaTitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"Press Start 2P","VT323",monospace;font-size:30px;line-height:1.2;color:#eef3db;text-align:center;pointer-events:none;white-space:nowrap}

#hexopediaModeTabs{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;min-width:0;position:relative;z-index:1}

#closeHexopediaBtn{justify-self:end;position:relative;z-index:1}

#hexopediaModeTabs .hexopediaModeBtn.active{
  box-shadow: inset 0 0 0 2px #9cbce4, 0 0 0 2px rgba(156,188,228,.18);
  background:linear-gradient(180deg,#456b95,#2f4d71);
}


#hexopediaBody{
  display:grid;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:12px;
  min-height:0;
  flex:1;
}

#hexopediaSidebar,
#hexopediaProfile{
  min-height:0;
  padding:12px;
}

#hexopediaSidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#hexopediaSearchInput{
  width:100%;padding:10px 12px;border-radius:3px;background:#0f1113;color:var(--text);
  border:2px solid #000;box-shadow: inset 0 0 0 2px #31363b;
}

#hexopediaFilterTabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#hexopediaFilterTabs .hexopediaFilterBtn.active{
  box-shadow: inset 0 0 0 2px #9cbce4, 0 0 0 2px rgba(156,188,228,.18);
  background:linear-gradient(180deg,#456b95,#2f4d71);
}

#hexopediaList{
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:2px;
}

.hexopediaListItem{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;
  background:linear-gradient(180deg,#23282e,#171b20);
  color:var(--text);border:2px solid #000;box-shadow: inset 0 0 0 2px #48505a;
  border-radius:4px;cursor:pointer;text-align:left;
}

.hexopediaListItem:hover{filter:brightness(1.07)}
.hexopediaListItem.active{
  background:linear-gradient(180deg,#33475f,#233244);
  box-shadow: inset 0 0 0 2px #9cbce4;
}

.hexopediaListIcon{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}

.hexopediaListText{display:flex;flex-direction:column;gap:2px;min-width:0}
.hexopediaListName{font-size:24px;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hexopediaListMeta{font-size:13px;letter-spacing:.08em;color:var(--sub)}

#hexopediaProfile{
  overflow:auto;
}

.hexopediaProfileCard{display:flex;flex-direction:column;gap:14px;min-height:100%}
.hexopediaProfileHeader{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.hexopediaProfileArt{
  width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  background:#11161b;border:2px solid #000;box-shadow: inset 0 0 0 2px #3b434b;border-radius:4px;flex:0 0 auto;
}
.hexopediaProfileTitleWrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.hexopediaCategoryTag{
  align-self:flex-start;padding:4px 8px;border-radius:999px;background:rgba(92,127,164,.22);
  color:#d9ebff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.hexopediaProfileTitle{
  font-family:"Press Start 2P","VT323",monospace;
  font-size:22px;line-height:1.35;color:#eef3db;
}
.hexopediaProfileSubTitle{font-size:14px;letter-spacing:.08em;color:var(--sub);text-transform:uppercase}
.hexopediaSection{display:flex;flex-direction:column;gap:8px}
.hexopediaSectionBody{font-size:20px;line-height:1.3;color:#e5dfd1}

.hexopediaHelpBody{font-size:20px;line-height:1.35;color:#e5dfd1}
.hexopediaHelpBody h1,.hexopediaHelpBody h2,.hexopediaHelpBody h3{margin:0;color:#eef3db}
.hexopediaHelpBody h1{font-family:"Press Start 2P","VT323",monospace;font-size:24px;line-height:1.3}
.hexopediaHelpBody h2{font-family:"Press Start 2P","VT323",monospace;font-size:18px;line-height:1.35}
.hexopediaHelpBody h3{font-family:"Press Start 2P","VT323",monospace;font-size:15px;line-height:1.35}
.hexopediaHelpBody p{margin:0}
.hexopediaHelpBody ul{margin:0 0 0 22px;padding:0}
.hexopediaHelpBody li{margin:0 0 6px 0}
.hexopediaHelpBody .hexopediaBlankLine{height:1.35em}
.hexopediaHelpBody a{color:#9fd2ff;text-decoration:underline}

.hexopediaInfoGrid{display:flex;flex-direction:column;gap:8px}
.hexopediaInfoRow{
  display:grid;grid-template-columns:22px minmax(100px,170px) minmax(0,1fr);gap:10px;align-items:center;
  background:#13181d;border:1px solid #000;box-shadow: inset 0 0 0 1px #323941;border-radius:4px;padding:8px 10px;
}
.hexopediaInfoIcon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.hexopediaInfoIconSpacer{opacity:0}
.hexopediaInfoLabel{font-size:18px;color:#bfc8d2}
.hexopediaInfoValue{font-size:20px;color:var(--text);word-break:break-word}
.hexopediaChipList,.hexopediaCostList{display:flex;flex-wrap:wrap;gap:8px}
.hexopediaChip,
.hexopediaCostChip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:#151b20;border:1px solid #000;box-shadow: inset 0 0 0 1px #39414a;color:#edf1f5;font-size:18px;
}
.hexopediaChipLink{cursor:pointer;font:inherit}
.hexopediaChipLink:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hexopediaCostIcon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.hexopediaEmptyState{color:var(--sub);font-size:22px;line-height:1.3;padding:10px 6px}

@media (max-width: 980px){
  #hexopediaBody{grid-template-columns:1fr}
  #hexopediaSidebar{max-height:42vh}
}


.creditsSupportLeadBox{padding:10px 12px;background:#101317;border:1px solid #252b31;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);}
.saveGameBody{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.saveGameHelp{font-size:20px;line-height:1.28;color:#d8d1c0;}
.saveGameLabel{font-size:16px;color:#b7ac96;letter-spacing:.06em;text-transform:uppercase;}
#saveGameFilenameInput{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:4px;border:2px solid #000;box-shadow:inset 0 0 0 2px #4a534d;background:#171d16;color:#f3eedf;font:inherit;font-size:22px;}
#saveGameFilenameInput:focus{outline:none;box-shadow:inset 0 0 0 2px #7d9b70,0 0 0 2px rgba(125,155,112,.22);}
.saveGameFooter{display:flex;gap:10px;justify-content:flex-end;}

.sharePanel{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.shareLabel{font-size:18px;color:#c9bea8;letter-spacing:.06em;text-transform:uppercase;}
.shareControls{display:flex;align-items:stretch;gap:10px;}
.shareInput{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:12px 14px;border-radius:4px;border:2px solid #000;box-shadow:inset 0 0 0 2px #4a534d;background:#171d16;color:#f3eedf;font:20px/1.25 "VT323","Trebuchet MS",Verdana,monospace;}
.shareInput:focus{outline:none;box-shadow:inset 0 0 0 2px #7d9b70,0 0 0 2px rgba(125,155,112,.22);}
.shareCopyBtn{min-width:112px;}
.victorySharePanel{margin-top:6px;}
@media (max-width: 720px){
  .shareControls{flex-direction:column;}
  .shareCopyBtn{width:100%;}
}

#victoryCard{width:min(840px,94vw);max-height:min(520px,82vh);position:relative;overflow:hidden;}
.victoryBody{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
#victoryMessageBox{font-size:22px;line-height:1.25;}
.victoryConfettiCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:43;}
#victoryCard{z-index:44;}


.telemetryConsentMessageBox{margin-top:4px;}
.telemetryConsentFooter{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}