:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --gold: #f1db25;
  --paper: #eee4ce;
  --ink: #171817;
  --panel: #22272a;
  --panel-line: #7f7154;
  --red: #ec271e;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(95, 112, 120, .28), transparent 42%),
    linear-gradient(150deg, #161c20, #07090b 70%);
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

button { font: inherit; }

.app-shell {
  width: min(100vw - 16px, calc((100vh - 44px) * 16 / 9), 1280px);
}

.game-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: clamp(2px, .35vw, 5px) solid #0b0c0d;
  box-shadow: 0 22px 90px #000, inset 0 0 0 2px #756544;
  background: #789ca8;
  user-select: none;
  touch-action: manipulation;
}

#battlefield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.top-ribbon {
  position: absolute;
  top: 1.4%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .55rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.era-name {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 9rem;
  padding: .35rem .85rem;
  border: 1px solid rgba(243, 221, 145, .65);
  border-radius: 999px;
  background: rgba(16, 19, 20, .82);
  color: #f5e6a2;
  box-shadow: 0 5px 14px #0007;
  font-size: clamp(10px, 1.18vw, 15px);
  justify-content: center;
}

.era-name span { color: #fff; opacity: .7; }

.icon-button {
  pointer-events: auto;
  width: clamp(28px, 3vw, 38px);
  aspect-ratio: 1;
  border: 1px solid #bca66d;
  border-radius: 50%;
  color: #f2df9c;
  background: rgba(16, 19, 20, .82);
  cursor: pointer;
  font-weight: 800;
}

.icon-button:active { transform: translateY(1px); }

.base-health {
  position: absolute;
  top: 2.7%;
  display: flex;
  gap: .35rem;
  align-items: flex-start;
  color: #d82922;
  font: 700 clamp(10px, 1.2vw, 16px) Georgia, serif;
  text-shadow: 0 1px #f6c5b5;
}

.player-health { left: 1.1%; }
.enemy-health { right: 1.1%; flex-direction: row-reverse; }

.vertical-track {
  width: clamp(10px, 1.35vw, 18px);
  height: clamp(94px, 19vw, 245px);
  border: 2px solid #171717;
  background: #2e3234;
  box-shadow: inset 0 0 0 2px #7b7b76, 0 2px 5px #0008;
  padding: 2px;
  display: flex;
  align-items: flex-end;
}

.vertical-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #b50808 0 22%, #ff281a 35% 72%, #8f0000 100%);
  box-shadow: 0 0 5px #ff3b2d;
  transition: height .2s ease;
}

.hud {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25.5%;
  display: grid;
  grid-template-columns: 30% 48% 22%;
  border-top: clamp(3px, .5vw, 7px) solid #191b1b;
  background:
    linear-gradient(90deg, transparent 29.8%, #0d0f10 29.8% 30.2%, transparent 30.2% 77.8%, #0d0f10 77.8% 78.2%, transparent 78.2%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.025) 2px 4px),
    linear-gradient(#34393b, #1d2123 60%, #16191a);
  box-shadow: inset 0 4px #6d6047, inset 0 7px #101214;
}

.hud::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0002, transparent 8%, transparent 92%, #0003);
}

.queue-strip {
  position: absolute;
  top: -1.35rem;
  left: 31%;
  width: 46%;
  height: clamp(12px, 1.55vw, 20px);
  border: 3px solid #141516;
  background: #1a1c1d;
  box-shadow: inset 0 0 0 1px #8d8062;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.queue-progress {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: 0;
  background: linear-gradient(90deg, #e52219, #f8941d 55%, #f2ef26);
  transition: width .08s linear;
}

.queue-slots {
  position: absolute;
  right: 2px;
  display: flex;
  gap: 2px;
}

.queue-slots i {
  width: clamp(10px, 1.2vw, 16px);
  aspect-ratio: 1;
  border: 1px solid #050606;
  background: #5e6667;
}

.message-panel,
.command-panel,
.resource-panel {
  position: relative;
  z-index: 1;
  padding: clamp(12px, 1.5vw, 20px);
}

.message-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--gold);
  text-align: left;
  overflow: hidden;
}

.panel-caption {
  position: absolute;
  top: .5rem;
  left: .8rem;
  color: #aaa37d;
  font-size: clamp(8px, .9vw, 12px);
  letter-spacing: .25em;
}

.message-panel strong {
  font-size: clamp(11px, 1.35vw, 18px);
  line-height: 1.35;
  color: #e54b32;
}

.message-panel small {
  color: var(--gold);
  font-size: clamp(9px, 1.12vw, 15px);
  margin-top: .35rem;
}

.command-panel { padding: clamp(6px, .75vw, 10px) clamp(8px, 1vw, 14px); }

.command-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 18%;
  color: var(--gold);
  font-size: clamp(9px, 1.05vw, 14px);
}

.command-title em { color: #b4aa81; font-style: normal; font-size: .85em; }

.menu-tabs {
  height: 36%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3px, .55vw, 8px);
}

.menu-tabs button {
  position: relative;
  min-width: 0;
  border: 2px solid #131515;
  background: linear-gradient(#b9b7a5, #77766e);
  box-shadow: inset 0 0 0 2px #d8c95c, inset 0 0 0 4px #3e4443;
  color: #161a1b;
  cursor: pointer;
  overflow: hidden;
}

.menu-tabs button::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #a81f1b;
  pointer-events: none;
}

.menu-tabs button b {
  position: absolute;
  right: 3px;
  bottom: 2px;
  padding: 0 2px;
  font-size: clamp(6px, .65vw, 9px);
  background: #dad5b6cc;
}

.menu-tabs button.active,
.menu-tabs button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.menu-tabs button:active { transform: translateY(1px); }

.tab-mark { position: absolute; inset: 20% 25% 28%; display: block; }
.unit-mark { border-bottom: .3rem solid #383b38; transform: skew(-12deg); }
.unit-mark::before { content: ""; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%; background: #303431; top: -45%; left: 35%; }
.tower-mark { border: .25rem solid #454840; border-bottom-width: .45rem; clip-path: polygon(0 20%, 20% 20%, 20% 0, 38% 0, 38% 20%, 62% 20%, 62% 0, 80% 0, 80% 20%, 100% 20%, 90% 100%, 10% 100%); }
.sell-mark { color: #08ab43; font-size: clamp(18px, 2.4vw, 32px); font-weight: 900; line-height: .8; }
.wall-mark { border: .25rem solid #4a4b45; border-top-width: .5rem; }
.wall-mark::after { content: "+"; position: absolute; right: -55%; top: -75%; color: #08ad43; font-size: 1.5em; font-weight: 900; }
.star-mark { color: #fff52b; -webkit-text-stroke: 1px #222; font-size: clamp(20px, 2.8vw, 38px); line-height: .9; }

.card-tray {
  height: 46%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, .7vw, 9px);
  padding-top: clamp(4px, .45vw, 7px);
}

.unit-card {
  position: relative;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  min-width: 0;
  padding: 2px 4px;
  border: 2px solid #181919;
  background: linear-gradient(135deg, #9b9785, #555a58);
  box-shadow: inset 0 0 0 2px #a18c43;
  color: #f9eeaa;
  cursor: pointer;
  overflow: hidden;
}

.unit-card:disabled { filter: grayscale(.85) brightness(.52); cursor: not-allowed; }
.unit-card:not(:disabled):hover { filter: brightness(1.18); }
.unit-card:not(:disabled):active { transform: translateY(1px); }

.card-sprite {
  width: 100%;
  height: 100%;
  background-image: url("./output/imagegen/game-assets/unit-atlas-transparent.png");
  background-repeat: no-repeat;
  background-size: 300% 500%;
  filter: drop-shadow(0 2px 1px #0008);
}

.tower-card .card-sprite {
  background-image: url("./output/imagegen/game-assets/turret-atlas-transparent.png");
  background-size: 500% 100%;
}

.card-copy { min-width: 0; text-align: left; }
.card-copy strong, .card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-copy strong { font-size: clamp(8px, .9vw, 13px); }
.card-copy small { color: #fff34d; font-size: clamp(7px, .78vw, 11px); }

.resource-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .35rem;
  padding: clamp(8px, 1vw, 14px);
}

.resource-readout {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .25rem .8rem .35rem 1rem;
  background: linear-gradient(135deg, transparent 10%, #282d2e 10% 90%, transparent 90%);
  border-block: 1px solid #817459;
}

.resource-readout strong { color: #fff128; font-size: clamp(13px, 1.7vw, 23px); text-shadow: 1px 2px #111; }
.resource-readout small { color: #d2c8a6; font-size: clamp(9px, 1vw, 14px); }

.special-button {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  min-height: 0;
  border: 2px solid #131515;
  background: linear-gradient(135deg, #877f68, #363b3c);
  box-shadow: inset 0 0 0 2px #a99652;
  color: var(--gold);
  cursor: pointer;
  overflow: hidden;
}

.special-button:disabled { filter: grayscale(.5) brightness(.55); cursor: not-allowed; }
.special-button > span { position: relative; z-index: 2; }
.special-button b, .special-button small { display: block; }
.special-button b { font-size: clamp(9px, 1.1vw, 15px); }
.special-button small { color: #ece4b6; font-size: clamp(7px, .82vw, 11px); }

.special-art {
  justify-self: center;
  width: 75%;
  height: 78%;
  border: 2px solid #191a1a;
  background:
    radial-gradient(circle at 70% 32%, #fff36a 0 5%, transparent 6%),
    linear-gradient(145deg, transparent 45%, #f0521f 46% 56%, transparent 57%),
    linear-gradient(160deg, #252d2d, #121515);
  box-shadow: inset 0 0 0 2px #8e7c50;
}

.special-button i {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(9, 13, 14, .72);
  pointer-events: none;
}

.float-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.float-text { position: absolute; color: #fff425; font-weight: 900; font-size: clamp(12px, 1.45vw, 20px); text-shadow: 0 2px 2px #251b02, 1px 0 #251b02; animation: float-up 1.15s ease-out forwards; }
@keyframes float-up { to { transform: translateY(-45px); opacity: 0; } }

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4%;
  background: rgba(10, 13, 14, .46);
  backdrop-filter: blur(3px);
}

.overlay.hidden { display: none; }

.paper-panel {
  width: min(78%, 680px);
  padding: clamp(18px, 3.5vw, 46px);
  text-align: center;
  color: var(--ink);
  border: clamp(5px, .7vw, 9px) solid #3c2b19;
  outline: 2px solid #d6a12d;
  background:
    linear-gradient(135deg, rgba(255,255,255,.4), transparent 26%),
    repeating-linear-gradient(0deg, rgba(90,55,17,.025) 0 2px, transparent 2px 5px),
    var(--paper);
  box-shadow: 0 22px 60px #000b, inset 0 0 0 4px #b88723;
  clip-path: polygon(2% 0, 98% 0, 100% 5%, 100% 95%, 98% 100%, 2% 100%, 0 95%, 0 5%);
}

.paper-panel h1,
.paper-panel h2 { margin: .1em 0; font-family: Georgia, "STKaiti", serif; letter-spacing: .08em; }
.paper-panel h1 { font-size: clamp(34px, 6vw, 76px); }
.paper-panel h2 { font-size: clamp(28px, 5vw, 62px); }
.paper-panel > p:not(.eyebrow) { margin: .45rem auto 1rem; max-width: 34rem; font-size: clamp(11px, 1.35vw, 18px); }
.eyebrow { margin: 0; color: #875318; font-size: clamp(9px, 1vw, 13px); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }

.difficulty-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(7px, 1.4vw, 16px); margin: 1.4rem 0 1rem; }
.difficulty-list button,
.wide-button {
  border: 2px solid #49341d;
  color: #251b11;
  background: linear-gradient(#f5d574, #c89129);
  box-shadow: inset 0 0 0 2px #fff0a1, 0 3px 0 #4f351b;
  cursor: pointer;
  padding: clamp(8px, 1.25vw, 15px);
  transition: transform .12s ease, filter .12s ease;
}
.difficulty-list button:hover,
.wide-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.difficulty-list button:active,
.wide-button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #fff0a1; }
.difficulty-list button b, .difficulty-list button small { display: block; }
.difficulty-list button b { font-size: clamp(12px, 1.55vw, 20px); }
.difficulty-list button small { margin-top: .2rem; font-size: clamp(7px, .8vw, 11px); }
.difficulty-list .recommended { transform: translateY(-4px); outline: 3px solid #9c5b19; }
.control-tip { display: block; font-size: clamp(7px, .85vw, 11px); opacity: .7; }

.compact-overlay { background: rgba(8, 10, 11, .7); }
.compact-panel { width: min(52%, 470px); }
.wide-button { display: block; width: min(100%, 320px); margin: .8rem auto 0; font-weight: 800; }
.wide-button.ghost { background: #d3cbb9; box-shadow: inset 0 0 0 2px #fff8e3, 0 3px 0 #4f351b; }

.mobile-hint { margin: .35rem 0 0; text-align: center; color: #879399; font-size: 11px; }

@media (max-aspect-ratio: 1/1) {
  .mobile-hint { display: block; }
  .paper-panel { width: 94%; }
}

@media (max-height: 520px) {
  .mobile-hint { display: none; }
  body { padding: max(2px, env(safe-area-inset-top)) max(2px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)); }
  .app-shell { width: min(100vw - 4px, calc((100vh - 4px) * 16 / 9), 1280px); }
}