:root {
  color-scheme: only light;
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #18272c;
  --cream: #f4ead5;
  --cream-dark: #b49a70;
  --board: #31483d;
  --cyan: #22e4ee;
  --gold: #ffbd25;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #15252b; overflow: hidden; }
button { font: inherit; }
img { user-select: none; -webkit-user-drag: none; }

#game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  min-height: 540px;
  margin: 0 auto;
  overflow: hidden;
  background: #f1dfbd;
  box-shadow: 0 0 48px #071014aa;
  touch-action: manipulation;
}

.game-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  transition: transform .48s cubic-bezier(.2, .75, .2, 1);
  will-change: transform;
}
.game-stage.build-phase { transform: translateY(-14%); }

#battle {
  position: relative;
  height: 38.5%;
  overflow: hidden;
  border-bottom: clamp(2px, .28vw, 4px) solid #27363b;
  background: #62b9e9;
}

.far-bg, .road, .near-props, .battle-units, .battle-vfx { position: absolute; inset: 0; }
.far-bg {
  background: url('/assets/backgrounds/battlefield_far_v1.png') center bottom / cover no-repeat;
  transform: scale(1.02);
  transition: transform 1.2s ease-out;
}
.far-bg.travel { transform: translateX(-3%) scale(1.06); }
.road {
  top: 48%;
  bottom: 0;
  height: auto;
  background: url('/assets/backgrounds/battlefield_road_v1.png') center / cover repeat-x;
  border-top: clamp(2px, .2vw, 3px) solid #5d6650;
  border-bottom: clamp(2px, .2vw, 3px) solid #667552;
}
.road.travel { animation: road-scroll .7s linear infinite; }
@keyframes road-scroll { to { background-position-x: -28%; } }

.near-props { top: 30%; height: 23%; pointer-events: none; }
.prop { position: absolute; bottom: 0; object-fit: contain; filter: saturate(.9) brightness(.92); }
.prop.travel { animation: prop-travel 1s linear both; }
@keyframes prop-travel { to { transform: translateX(-38vw); } }

.hud {
  position: absolute;
  z-index: 20;
  top: 1.2%; left: 2%; right: 2%;
  display: grid;
  grid-template-columns: 1.45fr .72fr 1fr;
  gap: 2%;
  align-items: start;
}
.hud-chip {
  min-height: clamp(31px, 4.8vh, 56px);
  padding: 5% 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  color: #2b241d;
  background: #f7eddd;
  border: clamp(2px, .28vw, 4px) solid #6d5638;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #fff8e9, 0 2px 0 #725a3c55;
  font-size: clamp(12px, 2.7vw, 26px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.hp-chip { justify-content: flex-start; padding-inline: 5%; }
.hud-label { font-size: .9em; }
.hud-value { font-size: .62em; min-width: 2.8em; text-align: right; }
.hp-track { flex: 1; height: .72em; overflow: hidden; border: 2px solid #3d331f; border-radius: 99px; background: #5d493a; }
.hp-fill { width: 100%; height: 100%; background: linear-gradient(#8fe74f 0 50%, #58bd31 50%); transition: width .2s ease; }
.coin-chip img { width: 1.25em; height: 1.25em; object-fit: contain; }
.wave-track {
  position: absolute; z-index: 20; top: 8.6%; left: 27%; right: 27%; height: .9%; min-height: 5px;
  border: 2px solid #55442f; border-radius: 999px; overflow: hidden; background: #463a31;
}
.wave-track > div { height: 100%; width: 0; background: #f05a50; transition: width .3s ease; }

.battle-units, .battle-vfx { z-index: 10; pointer-events: none; }
.unit {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  transform: translate(-50%, -100%);
  transition: filter .1s;
}
.unit.hero { width: 19%; z-index: 8; }
.unit.enemy { width: 15.2%; z-index: 7; }
.unit > img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.9) saturate(.9); }
.unit.hit > .unit-body { filter: brightness(1.55) saturate(.55); }
.unit > img.unit-damage { position: absolute; z-index: 9; inset: -4%; width: 108%; height: 108%; filter: none; pointer-events: none; }
.unit > img.unit-damage[hidden] { display: none; }
.unit.dead { opacity: 0; transition: opacity .5s .25s; }
.unit-hp { position: absolute; left: 18%; right: 18%; top: 7%; height: 5px; border: 1px solid #1b1d1b; border-radius: 8px; overflow: hidden; background: #493b37; }
.unit-hp > i { display: block; height: 100%; background: #eb5a50; }

.battle-toast {
  position: absolute; z-index: 30; left: 50%; bottom: 3.2%; transform: translateX(-50%);
  max-width: 78%; padding: .48em .9em; color: #fff7e8; background: #18272cdd;
  border: 2px solid #f0d3a7; border-radius: 999px; font-size: clamp(10px, 2.4vw, 22px); font-weight: 800; text-align: center;
  transition: opacity .25s, transform .25s;
}
.battle-toast.hide { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.battle-toast.intermission { bottom: 4%; max-width: 92%; color: #fff5ce; border-color: #ffc94d; background: #243b36f2; box-shadow: 0 3px 0 #15231f, 0 0 14px #ffc94d44; }

.projectile { position: absolute; z-index: 18; width: 6%; aspect-ratio: 1; object-fit: contain; transform: translate(-50%, -50%); }
.projectile.beam { width: 8%; }
.projectile.missile { width: 7%; }
.projectile.enemy-shot { filter: hue-rotate(120deg) saturate(.75); }
.muzzle-flash, .melee-flash { position: absolute; z-index: 21; width: 13%; aspect-ratio: 1; object-fit: contain; transform: translate(-50%, -50%) scale(1.55); pointer-events: none; }
.muzzle-flash.flipped { transform: translate(-50%, -50%) scale(-1.55, 1.55); }
.melee-flash { width: 20%; transform: translate(-50%, -50%) scale(1.35); }
.javelin-projectile { position: absolute; z-index: 19; width: 12%; height: 5%; object-fit: contain; transform-origin: center; filter: drop-shadow(0 0 5px #f27bff); }
.laser-beam { position: absolute; z-index: 16; height: 2.2%; transform-origin: left center; background: #dff; border: 2px solid #26dce7; border-radius: 999px; box-shadow: 0 0 10px #23edf1; opacity: 0; animation: laser-flash .38s ease-out; }
@keyframes laser-flash { 15% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; } }
.impact { position: absolute; z-index: 22; width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); object-fit: contain; }
.damage-number { position: absolute; z-index: 25; color: #fff; font-weight: 1000; font-size: clamp(12px, 3.2vw, 28px); text-shadow: 0 2px 0 #522, 0 0 5px #000; animation: damage-rise .75s ease-out forwards; }
.damage-number.block { color: #8ef9ff; text-shadow: 0 2px 0 #075b64, 0 0 6px #fff; }
@keyframes damage-rise { to { transform: translateY(-38px) scale(1.08); opacity: 0; } }

#core-panel {
  position: relative;
  height: 61.5%;
  padding: 2.2% 2.7% 2.7%;
  background: #eadcc6;
  border: clamp(3px, .55vw, 7px) solid #5d6260;
  border-left-color: #ded4c2;
  border-right-color: #ded4c2;
  box-shadow: inset 0 0 0 clamp(3px, .6vw, 7px) #fff6e7, inset 0 0 0 clamp(7px, 1.2vw, 13px) #9d8e77;
  clip-path: polygon(0 0, 100% 0, 100% 39%, 98.8% 41.5%, 98.8% 58.5%, 100% 61%, 100% 100%, 0 100%, 0 61%, 1.2% 58.5%, 1.2% 41.5%, 0 39%);
}
.panel-screw { position: absolute; z-index: 4; width: 3.2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9e5db 0 20%, #7c7d78 23% 66%, #30383a 70%); }
.screw-a { left: 1.2%; top: 1.3%; }.screw-b { right: 1.2%; top: 1.3%; }
.board-frame {
  position: relative;
  z-index: 2;
  width: 95.5%;
  aspect-ratio: 1;
  margin: 1.2% auto 0;
  overflow: hidden;
  background: #30483d;
  border: clamp(2px, .45vw, 5px) solid #2b3836;
  border-radius: 2.5%;
  box-shadow: inset 0 0 18px #081712aa, 0 0 0 clamp(3px, .65vw, 8px) #756b5b;
}
.network-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.network-channel {
  fill: none;
  stroke: #102e32;
  stroke-width: var(--channel-width, 8);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px #b48b39);
}
.network-energy {
  fill: none;
  stroke: var(--energy-color, #43e34c);
  stroke-width: var(--energy-width, 3.2);
  stroke-linecap: round;
  stroke-dasharray: 9 12;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--energy-color, #43e34c));
  animation: network-flow .62s linear infinite;
}
@keyframes network-flow { to { stroke-dashoffset: -21; } }
.board-cells {
  position: absolute;
  z-index: auto;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.cell {
  position: relative;
  min-width: 0; min-height: 0;
  padding: 0;
  appearance: none;
  border-right: 1px dashed #c0c9b28c;
  border-bottom: 1px dashed #c0c9b28c;
  background: transparent;
  overflow: hidden;
}
.cell:nth-child(6n) { border-right: 0; }
.cell:nth-last-child(-n + 6) { border-bottom: 0; }
.cell.locked { border-style: solid; border-color: #273432; background: #59666a; }
.cell.locked::after {
  content: ""; position: absolute; inset: 3%; z-index: 6;
  background: url('/assets/ui/locked_plate_v1.png') center / contain no-repeat;
  filter: saturate(.72) brightness(.98);
  transition: transform .28s ease, opacity .28s ease;
}
.cell.unlocking::after { transform: translateY(-12%) scale(.94) rotate(-3deg); opacity: 0; }
.cell.valid { box-shadow: inset 0 0 0 clamp(2px, .45vw, 5px) #65dc6a; }
.cell.invalid { animation: invalid .28s ease; }
@keyframes invalid { 50% { box-shadow: inset 0 0 0 6px #ef554e; } }
.cell.selected-module { box-shadow: inset 0 0 0 3px #ffe354, inset 0 0 16px #ffe35477; }

.module { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: auto; }
.module > img { width: 82%; height: 82%; object-fit: contain; }
.module.core > img { width: 88%; height: 88%; filter: hue-rotate(-72deg) saturate(1.1); animation: core-pulse 1.6s ease-in-out infinite; }
@keyframes core-pulse {
  0%, 100% { filter: hue-rotate(-72deg) saturate(1.1) brightness(1); }
  50% { filter: hue-rotate(-72deg) saturate(1.15) brightness(1.15) drop-shadow(0 0 6px #43e34c); transform: scale(1.025); }
}
.module.connector { transform: rotate(var(--rotation)); transform-origin: center; touch-action: none; }
.module.connector > img {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--connector-width, 88%); height: auto;
  transform: translate(-50%, -50%);
}
.module.connector.holding::after {
  content: ""; position: absolute; z-index: 10; inset: 7%; border: 3px solid transparent; border-top-color: #ffe25d; border-right-color: #ffe25d;
  border-radius: 50%; filter: drop-shadow(0 0 4px #f2b71e); animation: hold-rotate .46s linear both;
}
@keyframes hold-rotate { from { transform: rotate(0); opacity: .35; } to { transform: rotate(360deg); opacity: 1; } }
.module.connector:not(.powered) > img { filter: grayscale(.72) brightness(.58); }
.energy-leak { position: absolute; z-index: 4; width: calc(4% * var(--energy-scale, 1)); aspect-ratio: 1; border-radius: 50%; background: #f8f08b; box-shadow: 0 0 4px var(--energy-color, #43e34c), 0 0 8px var(--energy-color, #43e34c); animation: leak-spark .7s ease-out infinite; pointer-events: none; }
.energy-leak::before, .energy-leak::after { content: ""; position: absolute; left: 50%; top: 50%; width: 210%; height: 1px; background: var(--energy-color, #43e34c); transform: translate(-50%, -50%) rotate(35deg); }
.energy-leak::after { transform: translate(-50%, -50%) rotate(-35deg); }
.leak-left { left: 8%; top: 50%; transform: translateY(-50%); }
.leak-right { right: 8%; top: 50%; transform: translateY(-50%); }
.leak-up { top: 8%; left: 50%; transform: translateX(-50%); }
.leak-down { bottom: 8%; left: 50%; transform: translateX(-50%); }
@keyframes leak-spark { 0%, 100% { opacity: .25; scale: .55; } 45% { opacity: 1; scale: 1; } }
.module.weapon > img { width: 80%; height: 80%; transform: scale(var(--weapon-scale, 1)); transform-origin: center; }
.weapon-dim { filter: brightness(.23) saturate(.5); }
.weapon-bright { position: absolute; inset: 10%; width: 80% !important; height: 80% !important; clip-path: inset(var(--cooldown-mask) 0 0 0); }
.cooldown-label {
  position: absolute; z-index: 9; left: 50%; bottom: 4%; transform: translateX(-50%);
  padding: .12em .42em; border-radius: 999px; color: white; background: #111d;
  font-size: clamp(8px, 2.05vw, 18px); font-weight: 1000; white-space: nowrap; opacity: var(--cooldown-alpha);
}
.shield-ready { filter: drop-shadow(0 0 6px #54ecff) brightness(1.1); }

.selection-hint {
  position: absolute; z-index: 10; left: 50%; bottom: 1.1%; transform: translateX(-50%);
  max-width: 84%; padding: .3em .85em; border-radius: 999px; background: #20322de8; color: #f8f0dc;
  font-size: clamp(9px, 2.2vw, 19px); font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.continue-button {
  position: absolute;
  z-index: 12;
  right: 2.5%;
  bottom: .8%;
  width: 27%;
  min-height: 5.2%;
  padding: .45em .55em;
  border: clamp(2px, .4vw, 4px) solid #234d28;
  border-radius: 999px;
  color: #fffdf0;
  background: #62b63b;
  box-shadow: inset 0 0 0 2px #aee676, 0 3px 0 #315e30;
  font-size: clamp(10px, 2.35vw, 20px);
  font-weight: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(35%);
  transition: opacity .25s, transform .25s, filter .2s;
}
.game-stage.build-phase .continue-button { opacity: 1; pointer-events: auto; transform: translateY(0); }
.game-stage.build-phase .selection-hint { left: 2.5%; right: 31%; max-width: none; transform: none; }
.continue-button:disabled { filter: grayscale(.7) brightness(.78); }

#shop-panel {
  position: relative;
  height: 14%;
  padding: 1.4% 2.4% 2%;
  background: #eadcc6;
  border-top: clamp(2px, .42vw, 5px) solid #7c6f5d;
  box-shadow: inset 0 5px 0 #fff2dd;
}
.shop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1%; height: 100%; padding-right: 10.5%; }
.shop-card {
  position: relative; min-width: 0; overflow: hidden; padding: 3% 4%; border: 2px solid #8d744d; border-radius: 12%; background: #fff1d8;
  box-shadow: inset 0 0 0 2px #fffaf0, 0 2px 0 #6e5b43; color: #30251a; cursor: pointer;
}
.shop-card.selected { border-color: #59a92e; box-shadow: inset 0 0 0 3px #a8e84d, 0 2px 0 #456b2f; transform: translateY(-2%); }
.shop-card.sold { filter: grayscale(.75) brightness(.85); opacity: .58; pointer-events: none; }
.shop-card .item-pic { position: absolute; left: 50%; top: 1%; display: block; width: 78%; height: 64%; object-fit: contain; transform: translateX(-50%); transform-origin: center; }
.shop-card.item-weapon .item-pic { top: -1%; width: 90%; height: 69%; transform: translateX(-50%) scale(var(--shop-weapon-scale, 2)); }
.shop-card.item-corner .item-pic { top: 5%; width: 50%; height: 54%; }
.shop-card.item-tool .item-pic { width: 78%; height: 62%; }
.shop-card .item-name { position: absolute; z-index: 5; left: 4%; right: 4%; top: 59%; font-size: clamp(6px, 1.45vw, 13px); font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { position: absolute; z-index: 5; left: 5%; right: 5%; bottom: 4%; height: 23%; display: flex; align-items: center; justify-content: center; gap: 5%; border: 1px solid #39741d; border-radius: 999px; background: #66b833; color: white; font-size: clamp(8px, 2.1vw, 19px); font-weight: 1000; text-shadow: 0 1px 0 #284914; }
.price.free { background: #f0a925; border-color: #9e6718; }
.price img { width: 1em; height: 1em; object-fit: contain; }
.quantity-badge, .video-badge { position: absolute; z-index: 8; top: 4%; display: grid; place-items: center; color: white; font-weight: 1000; box-shadow: 0 2px 0 #4a3529; }
.quantity-badge { left: 5%; min-width: 28%; padding: .16em .3em; border: 1px solid #523d2a; border-radius: 999px; background: #293d43; font-size: clamp(7px, 1.7vw, 15px); }
.video-badge { right: 5%; width: 24%; aspect-ratio: 1.25; border: 1px solid #8a274c; border-radius: 28%; background: #ff4f8e; }
.video-badge::after { content: ""; width: 0; height: 0; margin-left: 7%; border-top: .32em solid transparent; border-bottom: .32em solid transparent; border-left: .5em solid white; filter: drop-shadow(0 1px 0 #8f224e); }
.refresh-button {
  position: absolute; right: 1.7%; top: 8%; bottom: 7%; width: 10%; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.refresh-button > img { display: block; width: 84%; margin: 0 auto; }
.refresh-button > span { display: flex; align-items: center; justify-content: center; gap: 3%; margin-top: -4%; color: #30251a; font-weight: 1000; font-size: clamp(8px, 2vw, 18px); }
.refresh-button span img { width: 1.05em; height: 1.05em; }
.refresh-button:active { transform: scale(.94); }

.modal { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; background: #102027c7; backdrop-filter: blur(5px); }
.modal.hidden { display: none; }
.modal-card { width: 76%; padding: 8%; text-align: center; color: #2c261f; background: #f8ead2; border: 5px solid #69563b; border-radius: 8%; box-shadow: inset 0 0 0 4px #fff8e9, 0 18px 50px #0008; }
.modal-kicker { color: #c86528; font-weight: 1000; letter-spacing: .12em; }
.modal h1 { margin: .4em 0; font-size: clamp(24px, 7vw, 56px); }
.modal p { line-height: 1.6; }
.modal button { margin-top: 1em; padding: .72em 1.5em; border: 3px solid #254c28; border-radius: 999px; background: #65b737; color: white; font-weight: 1000; }

.debug-panel {
  position: absolute; z-index: 90; top: 8%; left: 3%; right: 3%; max-height: 32%; overflow: auto;
  display: grid; gap: .28em; padding: .7em .9em; border: 2px solid #6be8ee; border-radius: 12px;
  color: #dff; background: #102126ee; box-shadow: 0 8px 24px #0008;
  font: 700 clamp(8px, 1.75vw, 15px)/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.debug-panel.hidden { display: none; }
.debug-panel b { color: #7ff7ff; }.debug-panel span { display: block; }

@media (max-height: 620px) {
  .hud-chip { min-height: 28px; }
  .selection-hint { bottom: .5%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}