/* Builds Verse visual system: appearance only; layout.css owns screen geometry. */ :root {
  color-scheme:dark;
  --ink:#112238;
  --panel:#102237ed;
  --gold:#e5bf70;
  --cream:#f7ecd5;
  --muted:#b6c5ce;
  --blue:#2676ba;
  --line:#a28c605c
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
body {
  margin:0;
  min-height:100dvh;
  color:var(--cream);
  font:14px/1.4 system-ui,sans-serif;
  background:#17293c
}
body:before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(#15223422,#11243b55),url('hall-original.webp') center/cover;
  pointer-events:none
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 22px;
  min-height:58px;
  background:#102137e8;
  border-bottom:1px solid var(--line)
}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center
}
.brandLogo {
  width:145px;
  height:46px;
  object-fit:contain
}
.headerTools {
  display:flex;
  align-items:center;
  gap:7px
}
.gamename {
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted)
}
h1,h2,h3 {
  font-family:Georgia,serif;
  font-weight:600
}
h1 {
  font-size:36px
}
h2 {
  font-size:20px;
  margin:0
}
h3 {
  font-size:16px;
  margin:0 0 7px
}
button,input,select,summary {
  font:inherit
}
button {
  border:1px solid #8ba3b16e;
  border-radius:7px;
  background:linear-gradient(#28415b,#182e47);
  color:var(--cream);
  padding:8px 12px;
  cursor:pointer;
  transition:filter .15s,transform .15s
}
button:hover:not(:disabled) {
  filter:brightness(1.15);
  transform:translateY(-1px)
}
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #a5dbfa;
  outline-offset:2px
}
button:disabled {
  background:#283746;
  color:#a3b1ba;
  border-color:#5e6a76;
  opacity:.75;
  cursor:not-allowed
}
.gold,.actionBuy,.actionExpand {
  background:linear-gradient(150deg,#f9dda0,#dba84e);
  color:#172637;
  border-color:#f1cc7e;
  font-weight:750
}
.actionDeploy,.actionMove {
  background:linear-gradient(#225570,#133953);
  border-color:#6aabc4
}
.actionSell,.adminRemove {
  background:#56372e;
  border-color:#be8c71
}
.actionControl {
  min-height:40px;
  font-weight:650
}
#freeze[aria-pressed=true] {
  background:#174d70;
  border-color:#84d9f2
}
#launch {
  background:linear-gradient(#2b87cc,#184d84);
  border-color:#8abff2;
  color:white;
  box-shadow:0 0 12px #348ad72d;
  min-height:44px;
  font-weight:750
}
.adminAccess {
  color:var(--gold);
  text-decoration:none;
  padding:6px
}
.headerTools button,#languagePicker {
  font-size:11px;
  padding:6px 8px
}
.motionToggle {
  max-width:130px
}
input,select {
  background:#11273c;
  color:var(--cream);
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px;
  max-width:100%
}
.wrap {
  max-width:1780px;
  margin:auto;
  padding:14px 20px
}
.intro {
  max-width:760px;
  margin:35px auto;
  padding:35px;
  text-align:center;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:15px;
  box-shadow:0 14px 60px #05142244
}
.introLogo {
  width:260px;
  max-width:80%;
  display:block;
  margin:0 auto
}
.intro h1 {
  margin:12px 0
}
.muted {
  color:var(--muted)
}
.intro p {
  color:var(--muted);
  line-height:1.6
}
#joinForm {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
#joinForm label {
  width:100%
}
.lobbyMember {
  display:flex;
  justify-content:space-between;
  padding:12px;
  background:#192f45;
  margin:6px 0;
  border-radius:7px
}
.lobbyMember span {
  font-size:12px;
  color:var(--muted)
}
#lobbyCode {
  color:var(--gold)
}
.actions {
  display:flex;
  gap:7px;
  justify-content:center;
  flex-wrap:wrap
}
.bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  min-width:0;
  position:relative;
  box-shadow:0 6px 22px #07152720
}
.shopPanel {
  background:linear-gradient(#142c43ed,#172b3bed)
}
.armyPanel {
  background:linear-gradient(#1b3545bc,#162d3bdf)
}
.card {
  position:relative;
  min-width:0;
  padding:6px;
  text-align:center;
  background:linear-gradient(150deg,#2f4257,#112438);
  border:1px solid #bd9d63;
  border-radius:8px;
  box-shadow:0 5px 10px #0004,inset 0 1px #ffe5ae25;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .16s,box-shadow .16s
}
.card:hover {
  transform:perspective(700px) translateY(-3px) rotateX(4deg) rotateY(-4deg);
  box-shadow:0 8px 18px #0005
}
.card .art {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:none;
  width:100%;
  background:radial-gradient(ellipse,#e9c17a24,transparent 75%);
  border-radius:5px;
  line-height:1
}
.fighter {
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 5px 3px #0005);
  overflow:visible
}
.card strong {
  display:block;
  position:relative;
  font:600 12px/1.15 Georgia;
  color:#fff0d1;
  width:100%;
  min-width:0;
  overflow-wrap:anywhere
}
.card small {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin:1px 0
}
.stats {
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  margin:3px 0
}
.card .ability {
  font-size:11px;
  line-height:1.4;
  margin:5px 0
}
.card button {
  font-size:10px;
  padding:4px 6px;
  min-height:26px
}
.card .actions {
  gap:3px;
  width:100%
}
.card.empty {
  border-style:dashed;
  background:#17344755;
  color:var(--muted);
  justify-content:center
}
.card.fusion {
  border:2px solid #edc971;
  background:linear-gradient(150deg,#584627,#162c47)
}
.card.selected {
  outline:3px solid #8ac8e7
}
.infoButton {
  position:absolute;
  top:4px;
  right:4px;
  z-index:3;
  width:24px;
  height:24px;
  min-height:24px!important;
  border-radius:50%;
  padding:0!important;
  background:#10293ede;
  font-size:11px!important
}
.offerBadge {
  font-size:8px;
  background:#284b5f;
  border-radius:4px;
  padding:2px 4px;
  width:100%
}
.fusionOffer .offerBadge {
  background:#dfbd70;
  color:#182939
}
.ownedOffer {
  border-color:#86bad0
}
.fusionOffer {
  outline:2px solid #ecca78;
  animation:triplePulse 2s ease-in-out infinite
}
.fusionOffer:after {
  content:'✦';
  position:absolute;
  top:-6px;
  left:-5px;
  color:var(--gold)
}
@keyframes triplePulse {
  50% {
    box-shadow:0 0 16px #eec16577
  }
}
.players {
  display:flex;
  flex-direction:column;
  gap:7px
}
.player {
  background:#10263ded;
  border:1px solid #71849340;
  border-radius:7px;
  padding:9px;
  position:relative;
  min-width:0
}
.player strong {
  display:block;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.player div {
  font-size:11px;
  margin:3px 0
}
.player small {
  font-size:10px;
  color:var(--muted)
}
.player.me {
  border-color:var(--gold);
  background:#233d51ed
}
.player.ready {
  border-left:3px solid #94cfae
}
.player.dead {
  opacity:.55
}
.scoutButton {
  font-size:10px;
  padding:3px 6px;
  display:block;
  margin-top:4px
}
.notice {
  color:#f3dba6;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.encounters {
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--muted)
}
.opponentChip {
  color:#eed7a7;
  padding:2px 6px;
  background:#112b40bf;
  border-radius:5px
}
.countdown {
  color:#f5dba2;
  font-size:12px
}
summary {
  cursor:pointer;
  color:var(--cream);
  font-size:12px;
  font-weight:650
}
details {
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px;
  background:#122a3edc
}
.civilizations {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:10px
}
.civChip {
  padding:7px;
  font-size:11px;
  border:1px solid #7a8c9933;
  border-radius:5px
}
.civChip.present {
  color:#f0dba3;
  background:#28433c
}
.civChip.absent {
  color:#92a4af;
  border-style:dashed
}
.shopDetails {
  position:relative;
  padding:5px 8px
}
.shopDetails[open] {
  z-index:10
}
.shopDetails>div,.shopDetails>section,.shopDetails>p {
  background:#11273bf7
}
.shopDetails[open] {
  position:absolute;
  right:10px;
  top:10px;
  max-width:420px;
  max-height:60vh;
  overflow:auto;
  background:#11273bf7;
  box-shadow:0 8px 28px #0007
}
.shopChances {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  font-size:10px;
  margin-top:8px
}
.shopChances span {
  background:#284155;
  padding:3px;
  border-radius:4px
}
.shopChances button {
  font-size:10px;
  padding:3px
}
.tavernProgress {
  margin-top:7px;
  font-size:11px
}
.tierTrack {
  display:flex;
  gap:5px
}
.tierStep {
  padding:5px;
  border:1px solid var(--line);
  border-radius:4px
}
.tierStep.current {
  color:var(--gold)
}
.progressTitle,.progressText {
  font-size:11px
}
.armyHeader {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.armyHeader h2 {
  font-size:17px
}
.armyHeader h2 span {
  font:11px system-ui
}
.expansionPanel h3 {
  display:none
}
.expandIcon {
  font-size:17px
}
.actionExpand {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px!important
}
.actionPrice {
  font-weight:800;
  white-space:nowrap
}
.expansionMax {
  color:var(--muted);
  font-size:11px
}
.armyhint {
  font-size:10px;
  margin:5px 0;
  color:var(--muted)
}
.lineTitle {
  color:#ded2b8;
  font-size:10px;
  margin:5px 0 3px;
  letter-spacing:.3px
}
.formationSlot {
  position:relative;
  min-width:0
}
.positionLabel {
  display:none
}
.wallet {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0
}
.wallet strong {
  font:700 24px Georgia;
  color:#ffdf91;
  white-space:nowrap
}
.wallet span {
  font-size:11px;
  color:var(--muted);
  text-align:right
}
.wallet small {
  display:block;
  font-size:10px
}
.economyStrip {
  position:relative;
  background:#10293ceb;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:7px 14px
}
.wallet {
  flex:1
}
#workerDetails {
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  background:#10283bed;
  min-width:0
}
#workerDetails summary {
  cursor:pointer;
  font-size:12px;
  color:var(--gold)
}
#workerZone {
  position:static;
  padding-top:8px
}
.workerCards {
  display:flex;
  flex-direction:column;
  gap:6px
}
.workerToken {
  min-width:0;
  overflow-wrap:anywhere
}
.workerToken button {
  display:block;
  width:100%;
  margin-top:4px
}
.workerZone {
  min-height:32px
}
.workerCards {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.workerToken {
  font-size:11px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:6px;
  background:#243d40
}
.workerToken button {
  font-size:10px;
  padding:4px
}
.handZone h3 {
  font-size:13px;
  margin:0 0 6px
}
.handZone h3 span {
  font:10px system-ui;
  color:var(--muted)
}
.sellZone {
  font-size:11px;
  border:1px dashed #b8987a;
  border-radius:7px;
  background:#4e332a70;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px;
  color:#f2d4b6
}
.sellZone small {
  font-size:9px
}
.handEmpty {
  font-size:11px;
  color:var(--muted);
  grid-column:1/-1
}
.launchbar {
  display:flex;
  flex-direction:column;
  gap:7px
}
.launchbar span {
  font-size:11px;
  text-align:center;
  color:var(--muted)
}
.error,#joinError,#lobbyError {
  color:#f7b5a5
}
.result {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
  text-align:center;
  overflow:auto
}
.result h2 {
  font-size:34px;
  color:var(--gold)
}
.result p {
  margin:7px
}
.result button {
  margin:8px
}
.fight {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  border:1px solid #bea46d88;
  border-radius:12px;
  background:linear-gradient(#0b2138d9,#183444b8,#0b2138d9);
  padding:12px;
  overflow:hidden
}
.fieldTeam {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:3px
}
.battleFormation {
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-top:12px
}
.battleFormation>.lineTitle {
  position:absolute;
  top:0;
  left:0;
  margin:0;
  line-height:12px
}
.battleFormation.isEmpty {
  flex:0;
  min-height:28px
}
.battleFormation.isEmpty .battleLine {
  min-height:12px
}
.battleLine {
  display:grid;
  grid-template-columns:repeat(var(--fighters,3),minmax(0,1fr));
  align-items:end;
  justify-items:center;
  gap:10px;
  padding:2px 0 4px;
  min-height:115px;
  flex:1;
  border-bottom:1px solid #d7c6a027
}
.battleUnit {
  position:relative;
  width:100%;
  max-width:180px;
  min-width:0;
  text-align:center;
  overflow:visible;
  border-radius:10px;
  background:radial-gradient(ellipse at 50% 65%,#e9c17a28,transparent 70%)
}
.battleUnit.attacking {
  z-index:20
}
.spriteMover {
  height:110px;
  position:relative;
  z-index:2;
  transform-origin:center bottom
}
.spriteMover .fighter {
  overflow:hidden
}
.ownTeam {
  border-top:1px solid #e0c7896b;
  padding-top:5px
}
.enemyTeam {
  padding-bottom:5px
}
.spriteFacing {
  height:100%
}
.enemyTeam .spriteFacing {
  transform:scaleX(-1)
}
.battleUnit strong {
  min-height:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:600 12px/1.1 Georgia;
  display:block;
  color:#fff0d1;
  text-shadow:0 1px 3px #000;
  padding:2px 3px;
  background:#102b3ec9;
  border-radius:5px
}
.battleUnit>span {
  font-size:13px;
  font-weight:700;
  text-shadow:0 1px 3px #000;
  white-space:nowrap;
  line-height:1.2
}
.unitHealth {
  height:4px;
  background:#16283b;
  border-radius:4px;
  overflow:hidden;
  width:65%;
  margin:2px auto
}
.unitHealth i {
  height:100%;
  display:block;
  background:#95c9a2
}
.enemyTeam .unitHealth i {
  background:#db9977
}
.battleEffect {
  position:absolute;
  pointer-events:none;
  z-index:30
}
.flyingArrow {
  width:64px;
  height:16px;
  filter:drop-shadow(0 0 3px #dcbe7a)
}
.flyingArrow svg {
  width:100%;
  height:100%
}
.strikeDamage {
  left:45%;
  top:4px;
  font-size:22px;
  font-weight:800;
  color:#ffb7a0;
  text-shadow:0 2px 4px #000
}
.statGain {
  left:0;
  right:0;
  top:26px;
  font-size:11px;
  font-weight:750;
  color:#c3e9cb;
  background:#163d32da;
  border-radius:4px;
  white-space:nowrap
}
.impactSpark {
  left:45%;
  top:35%;
  font-size:26px;
  color:#f7dba7
}
#battleCaption {
  font-size:12px;
  color:#e4d6b5;
  margin:7px 0
}
#battleControls {
  margin:6px 0;
  font-size:11px
}
.combatCommands {
  padding:10px;
  background:#112a3ee8;
  border:1px solid var(--line);
  border-radius:9px
}
.combatCommands h2 {
  font-size:17px;
  margin-bottom:8px
}
.combatCommands #battleControls {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px
}
.combatCommands .actions {
  display:flex;
  flex-direction:column
}
.combatCommands #battleCaption {
  font-size:12px;
  line-height:1.5;
  margin:10px 0 0
}
.damageSummary {
  margin:10px 0;
  padding:10px;
  background:#112a3c;
  border-radius:8px
}
.damageSummary h3 {
  font-size:15px
}
.damageFormula {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:12px
}
.damageFormula strong {
  color:var(--gold);
  font-size:21px
}
#battleLog {
  font-size:12px
}
#next {
  margin-top:8px
}
.catalog {
  width:min(1050px,94vw);
  max-height:88dvh;
  overflow:auto;
  color:var(--cream);
  background:#11283ef7;
  border:1px solid var(--gold);
  border-radius:12px;
  padding:22px;
  box-shadow:0 20px 60px #0008
}
.catalog::backdrop {
  background:#07162770
}
.catalogHeader {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px
}
.catalogHeader h2 {
  font-size:23px
}
.catalogFilters {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:14px 0
}
.catalogFilters label {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  flex:1;
  min-width:140px
}
.catalogGrid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.catalogGrid .card .art {
  height:110px
}
.catalogGrid .card strong {
  font-size:15px
}
.catalogGrid .card .ability {
  display:block
}
.ruleSection h3 {
  color:var(--gold);
  margin:20px 0 5px
}
.ruleSection p {
  line-height:1.7;
  color:#d7e0df
}
.ruleTable {
  border-collapse:collapse;
  width:100%
}
.ruleTable th,.ruleTable td {
  padding:8px;
  border:1px solid var(--line)
}
.cardPopup {
  position:fixed;
  z-index:1000;
  width:300px;
  max-width:calc(100vw - 16px);
  padding:15px;
  background:#10273ef7;
  border:1px solid var(--gold);
  border-radius:9px;
  box-shadow:0 10px 35px #0007;
  pointer-events:none;
  font-size:12px
}
.cardPopup h3 {
  font-size:20px
}
.cardPopup strong {
  display:block;
  color:var(--gold);
  font-size:17px;
  margin:7px 0
}
.cardPopup p {
  line-height:1.5
}
.cardPopup small {
  color:var(--muted)
}
.popupArt {
  float:right;
  width:90px;
  height:105px
}
.cardDetail {
  width:min(450px,95vw)
}
.detailArt {
  height:190px
}
.targetGrid {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.targetGrid button {
  display:flex;
  flex-direction:column;
  gap:8px;
  width:150px
}
.targetArt {
  height:95px;
  width:100%
}
.historyGame {
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.historyGame ol {
  padding-left:20px
}
.historyGame h3 {
  color:var(--gold)
}
.historyArmy {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.historyCard {
  width:110px;
  background:#243b50;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px;
  text-align:center;
  font-size:10px
}
.historyCard>div {
  height:75px
}
.historyCard strong,.historyCard span {
  display:block
}
.compositionDetails {
  margin:6px 0
}
.historyGame li {
  margin:8px 0
}
.combatReport {
  width:min(700px,95vw)
}
.reportSummary {
  padding:12px 0;
  text-align:center
}
.reportSummary h3 {
  font-size:27px;
  color:var(--gold)
}
.reportSummary p {
  margin:7px;
  color:#d1dde1
}
.combatReport details {
  margin:8px 0
}
.reportParticipants {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px
}
.reportUnits {
  width:100%;
  border-collapse:collapse;
  font-size:11px
}
.reportUnits th,.reportUnits td {
  text-align:left;
  padding:7px;
  border-bottom:1px solid var(--line)
}
.reportJournal {
  padding-left:23px;
  line-height:1.8;
  font-size:12px
}
.reportBonuses {
  font-size:11px;
  line-height:1.7
}
.adminLobby {
  background:#18334b;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  margin:12px 0
}
.adminLobby h3 {
  color:var(--gold)
}
.adminLobby h3 small {
  font:12px system-ui
}
.adminMember {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:8px;
  border-top:1px solid var(--line)
}
footer {
  text-align:center;
  font-size:10px;
  color:var(--muted);
  padding:10px
}
#phaseTransition {
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  z-index:40;
  pointer-events:none;
  background:#12304ad9;
  padding:12px 30px;
  border:1px solid var(--gold);
  border-radius:8px;
  color:#ffe1a0;
  font:700 24px Georgia;
  animation:phaseArrival 1.1s both
}
@keyframes phaseArrival {
  0%,100% {
    opacity:0;
    transform:translate(-50%,-45%)
  }
  20%,70% {
    opacity:1;
    transform:translate(-50%,-50%)
  }
}
.tavernArrival {
  animation-duration:1.5s!important
}
.reducedMotion *, .reducedMotion *:before,.reducedMotion *:after {
  animation:none!important;
  transition:none!important
}
.reducedMotion .card:hover {
  transform:none
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .card:hover {
    transform:none
  }
}
@media(max-width:650px) {
  .catalogGrid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .catalog {
    padding:14px
  }
  .reportParticipants {
    grid-template-columns:1fr
  }
  .gamename {
    display:none
  }
  .catalogHeader h2 {
    font-size:18px
  }
  .headerTools {
    gap:4px
  }
  .intro {
    padding:20px;
    margin:15px auto
  }
  .intro h1 {
    font-size:28px
  }
  .damageFormula {
    flex-wrap:wrap
  }
}
/* 2.5D stage: artwork, projected shadows and independent movement layers. */ .battleUnit {
  perspective:700px
}
.spriteMover {
  transform-style:preserve-3d
}
.spriteFacing {
  transform-style:preserve-3d
}
.spriteFacing:before {
  content:'';
  position:absolute;
  left:17%;
  right:17%;
  bottom:0;
  height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse,#0009,transparent 72%);
  transform:scaleY(.55);
  pointer-events:none
}
.spriteFacing .fighter {
  position:relative;
  transform-origin:50% 85%;
  filter:drop-shadow(0 5px 3px #0006)
}
.spriteMover .spriteFacing .fighter {
  position:absolute
}
.battleUnit.attacking .spriteFacing:before {
  background:radial-gradient(ellipse,#f3cc6b55,#0005 50%,transparent 72%)
}
.deploymentCard {
  inset:0 12%;
  border:2px solid #ebc782;
  border-radius:8px;
  background:linear-gradient(145deg,#35506c,#11283e);
  box-shadow:0 6px 8px #0005,inset 0 0 0 3px #192a3b;
  transform-origin:center bottom;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}
.deploymentCard .fighter {
  width:100%;
  height:100%;
  filter:drop-shadow(0 3px 2px #0006)
}
.deploying .deploymentCard {
  animation:cardMaterialize 1000ms ease-in-out both
}
.deploying .spriteFacing {
  animation:unitMaterialize 1000ms ease-out both
}
.enemyTeam .spriteFacing {
  --unit-facing:-1
}
.ownTeam .spriteFacing {
  --unit-facing:1
}
@keyframes cardMaterialize {
  0% {
    opacity:1;
    transform:translateY(10px) rotateX(52deg) scale(.82)
  }
  28% {
    opacity:1;
    transform:translateY(-3px) rotateX(8deg) scale(.94)
  }
  55% {
    opacity:.65;
    transform:translateY(4px) rotateX(65deg) scale(.86)
  }
  80%,100% {
    opacity:0;
    transform:translateY(10px) rotateX(82deg) scale(.72)
  }
}
@keyframes unitMaterialize {
  0%,25% {
    opacity:0;
    transform:scaleX(var(--unit-facing,1)) translateY(16px) scale(.65)
  }
  65% {
    opacity:1;
    transform:scaleX(var(--unit-facing,1)) translateY(-4px) scale(1.03)
  }
  100% {
    opacity:1;
    transform:scaleX(var(--unit-facing,1)) translateY(0) scale(1)
  }
}
.reducedMotion .deploymentCard {
  display:none
}
.reducedMotion .deploying .spriteFacing {
  opacity:1
}
@media(prefers-reduced-motion:reduce) {
  .deploymentCard {
    display:none
  }
  .deploying .spriteFacing {
    opacity:1
  }
}
/* Action identity: icons supplement readable labels and prices. */ button {
  box-shadow:inset 0 1px 0 #ffffff20,0 2px 5px #0003;
  transition:filter .16s,box-shadow .16s
}
button:not(:disabled):hover {
  filter:brightness(1.15);
  box-shadow:inset 0 1px 0 #ffffff30,0 3px 10px #0004
}
button:focus-visible {
  outline:3px solid #fff1b5;
  outline-offset:3px
}
button:disabled {
  filter:saturate(.35);
  opacity:.55;
  box-shadow:none;
  cursor:not-allowed
}
#freeze {
  background:linear-gradient(135deg,#b9edff,#75b6dd);
  color:#133850;
  border:1px solid #d6f8ff;
  font-weight:750
}
#freeze:before {
  content:'❄';
  font-size:20px;
  margin-right:5px
}
#freeze[aria-pressed=true] {
  background:linear-gradient(135deg,#e2fbff,#9ce6ff);
  border:2px solid #fff;
  box-shadow:0 0 12px #76dfff66,inset 0 0 9px #ffffff80
}
#refresh {
  background:linear-gradient(135deg,#275b67,#153e50);
  color:#d3ffef;
  border-color:#64c5b4;
  font-weight:700
}
#refresh:before {
  content:'↻';
  font-size:20px;
  margin-right:5px
}
#upgradeControl {
  background:linear-gradient(135deg,#f5d790,#c39341);
  color:#32240e;
  border-color:#ffe3a7;
  font-weight:800
}
#upgradeControl:before {
  content:'⬆';
  font-size:18px
}
#launch {
  background:linear-gradient(135deg,#a9e6b1,#4b9c77);
  border-color:#c4f7cd;
  color:#122f24;
  font-weight:800
}
#launch:before {
  content:'⚔';
  margin-right:6px;
  font-size:18px
}
.actionExpand {
  background:linear-gradient(135deg,#2f536f,#1c354e);
  color:#e0f2ff;
  border-color:#91b6d3;
  font-weight:750
}
.actionExpand:nth-child(2) {
  background:linear-gradient(135deg,#584972,#302d4f);
  border-color:#b8a7db;
  color:#f1eaff
}
.actionBuy {
  background:linear-gradient(135deg,#edd18c,#ba913e);
  color:#30220b;
  border-color:#f8df9e;
  font-weight:800
}
.actionBuy:before {
  content:'＋';
  margin-right:4px
}
.actionDeploy {
  background:linear-gradient(135deg,#2f6657,#21463f);
  border-color:#8bd3ad;
  color:#e4ffeb
}
.actionDeploy:before {
  content:'↓';
  margin-right:4px
}
.actionMove {
  background:#254c69;
  border-color:#83b7dc;
  color:#e3f5ff
}
.actionMove:before {
  content:'↔';
  margin-right:4px
}
.actionSell {
  background:linear-gradient(135deg,#654035,#432b2b);
  border-color:#d99975;
  color:#ffe3c7
}
.actionSell:before {
  content:'🪙';
  margin-right:3px
}
#lastCombatButton {
  background:linear-gradient(135deg,#45436c,#292f50);
  border-color:#a59ed6;
  color:#f1eaff
}
#lastCombatButton:before {
  content:'▤';
  margin-right:6px
}
#speed {
  background:#214859;
  border-color:#85c9d7;
  color:#e0faff
}
#speed:before {
  content:'»';
  margin-right:5px
}
.infoButton {
  background:#214768;
  border-color:#9bc8e2;
  color:#fff
}
/* The ice encloses artwork only, keeping names and statistics clear. */ .battleUnit.isFrozen .spriteMover:after {
  content:'';
  position:absolute;
  inset:1% 9% 0;
  z-index:6;
  pointer-events:none;
  clip-path:polygon(13% 0,86% 4%,100% 21%,96% 92%,76% 100%,8% 94%,0 68%,3% 13%);
  background:linear-gradient(135deg,#d2f8ff70 0%,#73bfff40 35%,#e5ffff99 37%,#a4dbff33 40%,#76cfff66 70%,#e4ffff99 72%,#9ddbff44 75%);
  border:2px solid #c4f4ff;
  box-shadow:inset 0 0 14px #dcffffaa;
  filter:drop-shadow(0 0 5px #a7e4ff)
}
.battleUnit.isFrozen .spriteFacing {
  filter:saturate(.65) hue-rotate(12deg) drop-shadow(0 0 5px #80dfff)
}
.battleUnit.isFrozen .spriteMover:before {
  content:'❄';
  position:absolute;
  right:10%;
  top:4%;
  z-index:7;
  font-size:18px;
  color:#edffff;
  text-shadow:0 0 4px #2375ad;
  pointer-events:none
}
/* Stable identity colors; subgroup labels stay visible alongside the hue. */ [data-family=empires] {
  --family-color:#e7b960
}
[data-family=legends] {
  --family-color:#b2a0eb
}
[data-family=hs] {
  --family-color:#75c8a0
}
.familyGroup {
  border:1px solid var(--family-color);
  border-radius:7px;
  padding:6px;
  background:#11273bd9;
  display:flex;
  flex-direction:column;
  gap:5px
}
.familyGroup h3 {
  font:750 13px/1.25 system-ui;
  margin:0;
  padding:5px 7px;
  color:#13263a;
  background:var(--family-color);
  border-radius:4px
}
.familyGroup .civChip {
  margin:0;
  display:block
}
[data-group="0"],[data-synergy="0"] {
  --group-color:#f2d69a;
  --group-bg:#51432d
}
[data-group="1"],[data-synergy="1"] {
  --group-color:#e6b166;
  --group-bg:#4b3624
}
[data-group="2"],[data-synergy="2"] {
  --group-color:#df9769;
  --group-bg:#492d25
}
[data-group="3"],[data-synergy="3"] {
  --group-color:#b4dfa0;
  --group-bg:#304635
}
[data-group="4"],[data-synergy="4"] {
  --group-color:#7bd6b4;
  --group-bg:#24483f
}
[data-group="5"],[data-synergy="5"] {
  --group-color:#56b78b;
  --group-bg:#1b3d32
}
[data-group="6"],[data-synergy="6"] {
  --group-color:#d0bafa;
  --group-bg:#443b5a
}
[data-group="7"],[data-synergy="7"] {
  --group-color:#a997ef;
  --group-bg:#342e50
}
[data-group="8"],[data-synergy="8"] {
  --group-color:#ce94db;
  --group-bg:#482e50
}
[data-group="-1"] {
  --group-color:#bac7ce;
  --group-bg:#36424b
}
.card[data-group] {
  border-left:4px solid var(--group-color,#bac7ce);
  background:linear-gradient(135deg,var(--group-bg,#223949),#152a3e 78%)
}
.card[data-group]>small:first-of-type {
  color:var(--group-color,#cfdae0);
  font-weight:700
}
.card[data-group].fusion {
  border-top-color:var(--gold);
  border-right-color:var(--gold);
  border-bottom-color:var(--gold)
}
.civChip[data-synergy] {
  border-left:4px solid var(--group-color);
  border-color:var(--group-color);
  background:var(--group-bg);
  color:#f3f4ed
}
.civChip.absent[data-synergy] {
  background:#122638;
  color:var(--group-color);
  border-style:dashed;
  border-left-style:solid
}
.workerToken[data-group] {
  border-left:4px solid var(--group-color);
  background:var(--group-bg)
}
.battleUnit[data-group]>strong {
  border-left:3px solid var(--group-color,#bccbd3);
  background:var(--group-bg,#102b3e)
}
/* Frozen offers keep their text and purchase controls unobscured. */ .shop.frozen {
  border:1px solid #b7edff;
  border-radius:9px;
  box-shadow:inset 0 0 15px #8ad9ff55,0 0 8px #7dc7ee44;
  padding:4px;
  background:linear-gradient(135deg,#bceeff22,#6094bb22)
}
.shop.frozen .card {
  border-top-color:#cff6ff;
  box-shadow:inset 0 0 10px #92dbff44
}
.shop.frozen .card .art {
  position:relative;
  filter:saturate(.6) drop-shadow(0 0 4px #b9edff)
}
.shop.frozen .card .art:after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:6px;
  pointer-events:none;
  background:linear-gradient(130deg,#c2f4ff44,#edffff55 18%,transparent 20%,transparent 67%,#c5efff77 69%,#71bfe833);
  border:1px solid #b2ebff77
}
.shop.frozen .card.empty {
  background:linear-gradient(135deg,#28526d,#18394c);
  border-color:#a3dcec
}
.shopPanel:has(.shop.frozen) h2:after {
  content:' ❄';
  color:#b6eeff;
  text-shadow:0 0 5px #5db5eb
}