:root {
  color-scheme: dark;
  font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
  background: #15120f;
  color: #f7e6b5;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 15%, rgba(104, 72, 37, 0.34), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 7px),
    #15120f;
}
button { font: inherit; }
.page-shell { width: min(100%, 1200px); }
.game-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid #a77a3e;
  border-radius: 12px;
  background: #6f4d25;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,225,151,.25);
}
.game-shell::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(255,235,178,.2);
  border-radius: 8px;
  box-shadow: inset 0 0 55px rgba(35,20,8,.36);
  pointer-events: none;
  content: "";
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.opening-cover {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  background: #090706;
  animation: opening-cover-in 420ms ease-out both;
}
.gate-half {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 50.15%;
  background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.25)), url("./assets/intro-gate-bg.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  filter: saturate(.9) contrast(1.04);
  transition: transform 1.08s cubic-bezier(.7,.02,.22,1);
  will-change: transform;
}
.gate-left {
  left: 0;
  background-position: left center;
  box-shadow: inset -8px 0 20px rgba(0,0,0,.72);
  transform-origin: left center;
}
.gate-right {
  right: 0;
  background-position: right center;
  box-shadow: inset 8px 0 20px rgba(0,0,0,.72);
  transform-origin: right center;
}
.opening-light {
  position: absolute;
  z-index: 1;
  inset: -15%;
  background: radial-gradient(ellipse at center, #fff7c9 0, #ffcc68 18%, rgba(217,101,31,.78) 40%, rgba(25,13,7,.2) 67%, transparent 75%);
  opacity: .18;
  transform: scaleX(.03);
  transition: opacity 650ms ease, transform 950ms ease;
}
.opening-stage {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding-top: 1.5%;
  text-align: center;
}
.opening-emblem {
  position: relative;
  width: clamp(230px, 31vw, 390px);
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 13px rgba(0,0,0,.72));
  animation: emblem-drop 1.02s cubic-bezier(.18,.82,.28,1.2) 180ms both;
}
.opening-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.opening-title {
  position: absolute;
  top: 28%;
  left: 50%;
  display: grid;
  width: 76%;
  transform: translateX(-50%) rotate(-1deg);
  line-height: .88;
  pointer-events: none;
}
.opening-title span,
.opening-title strong {
  font-family: "STKaiti", "Kaiti SC", "Songti SC", serif;
  font-weight: 900;
  letter-spacing: .035em;
}
.opening-title span {
  color: #d8d7d2;
  font-size: clamp(39px, 5.1vw, 67px);
  -webkit-text-stroke: 2px #393734;
  text-shadow: 0 4px 0 #1d1d1c, 0 7px 0 #776e61, 0 10px 12px rgba(0,0,0,.65), 2px -2px 0 #fff0c7;
}
.opening-title strong {
  margin-top: 9px;
  color: #e45620;
  font-size: clamp(36px, 4.65vw, 61px);
  -webkit-text-stroke: 2px #6f2112;
  text-shadow: 0 4px 0 #7b210f, 0 7px 0 #32150d, 0 10px 12px rgba(0,0,0,.65), 1px -2px 0 #ffb15d;
}
.emblem-shine {
  position: absolute;
  inset: 20% 16% 22%;
  overflow: hidden;
  border-radius: 28%;
  mix-blend-mode: screen;
}
.emblem-shine::after {
  position: absolute;
  top: -30%;
  bottom: -30%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,244,198,.62), transparent);
  content: "";
  transform: skewX(-18deg) translateX(-260%);
  animation: emblem-shine 2.8s ease-in-out 1.1s infinite;
}
.opening-subtitle {
  margin-top: clamp(-32px, -2.4vw, -18px);
  color: #ead6a6;
  font-family: system-ui, sans-serif;
  font-size: clamp(11px, 1.3vw, 17px);
  font-weight: 800;
  letter-spacing: .34em;
  text-shadow: 0 2px 4px #000;
  opacity: 0;
  animation: cover-controls-in 420ms ease-out 1.05s forwards;
}
.cover-start-button {
  display: grid;
  min-width: clamp(180px, 20vw, 245px);
  margin-top: clamp(15px, 2vw, 25px);
  padding: 10px 24px 12px;
  border: 2px solid #f2c36a;
  border-radius: 8px;
  color: #3c2513;
  background: linear-gradient(#fff0ad, #dfa348 72%, #c98435);
  box-shadow: 0 5px 0 #5c3517, 0 12px 28px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.8);
  opacity: 0;
  cursor: pointer;
  animation: cover-controls-in 430ms ease-out 1.22s forwards, cover-button-pulse 2.2s ease-in-out 2s infinite;
}
.cover-start-button small {
  margin-bottom: 2px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: .7;
}
.cover-start-button strong { font-size: clamp(17px, 1.9vw, 23px); }
.cover-start-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #5c3517, 0 8px 18px rgba(0,0,0,.45); }
.opening-cover.is-opening { background: transparent; pointer-events: none; animation: opening-cover-out 380ms ease-in 920ms forwards; }
.opening-cover.is-opening .gate-left { transform: translateX(-102%); }
.opening-cover.is-opening .gate-right { transform: translateX(102%); }
.opening-cover.is-opening .opening-light { opacity: 1; transform: scaleX(1); }
.opening-cover.is-opening .opening-stage { animation: emblem-exit 410ms cubic-bezier(.55,0,1,.45) forwards; }

@keyframes opening-cover-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-cover-out { to { opacity: 0; } }
@keyframes emblem-drop {
  0% { opacity: 0; transform: translateY(-70px) scale(1.22) rotate(-2deg); }
  62% { opacity: 1; transform: translateY(8px) scale(.97) rotate(1deg); }
  82% { transform: translateY(-4px) scale(1.015) rotate(-.4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes emblem-shine { 0%, 52% { transform: skewX(-18deg) translateX(-260%); } 72%, 100% { transform: skewX(-18deg) translateX(620%); } }
@keyframes cover-controls-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cover-button-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes emblem-exit { to { opacity: 0; transform: translateY(-28px) scale(.78); } }

.hud {
  position: absolute;
  z-index: 5;
  top: 2.2%;
  left: 1.8%;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.hud-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  min-width: 100px;
  padding: 7px 13px 8px;
  border: 2px solid #b98b4d;
  border-radius: 8px;
  background: linear-gradient(#3e3227, #201b17);
  box-shadow: 0 4px 0 #100d0b, inset 0 1px rgba(255,241,188,.25);
}
.hud-label {
  margin-right: 10px;
  color: #cdbb91;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.hud-card strong {
  color: #fff1c5;
  font-family: system-ui, sans-serif;
  font-size: clamp(15px, 1.7vw, 22px);
  text-shadow: 0 2px #1a1109;
}
.life-card strong { color: #ff8068; }
.gold-card strong { color: #ffd468; }

.sound-button {
  position: absolute;
  z-index: 6;
  top: 2.2%;
  right: 1.8%;
  padding: 8px 12px;
  border: 1px solid #b98b4d;
  border-radius: 7px;
  color: #ead9aa;
  background: rgba(35,29,23,.88);
  box-shadow: 0 3px 0 #110e0b;
  cursor: pointer;
}
.wave-button {
  position: absolute;
  z-index: 6;
  right: 2.2%;
  bottom: 4.2%;
  display: grid;
  min-width: 166px;
  padding: 10px 18px 12px;
  border: 2px solid #f0c46a;
  border-radius: 9px;
  color: #382416;
  background: linear-gradient(#ffe8a0, #dda94e);
  box-shadow: 0 5px 0 #5a381a, 0 8px 18px rgba(32,17,6,.34), inset 0 1px rgba(255,255,255,.75);
  cursor: pointer;
}
.wave-button[disabled] {
  border-color: #7d725d;
  color: #afa386;
  background: linear-gradient(#524b41, #312d28);
  box-shadow: 0 4px 0 #191613;
  cursor: default;
  filter: saturate(.35);
}
.wave-kicker {
  margin-bottom: 2px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .78;
}
.wave-button strong { font-size: clamp(16px, 1.75vw, 23px); }

.context-menu {
  position: absolute;
  z-index: 8;
  width: min(310px, 34%);
  padding: 12px;
  border: 2px solid #d9ae65;
  border-radius: 11px;
  color: #f6e9c2;
  background: linear-gradient(155deg, rgba(57,45,33,.98), rgba(28,23,19,.99));
  box-shadow: 0 7px 0 rgba(16,12,9,.9), 0 16px 30px rgba(0,0,0,.42), inset 0 1px rgba(255,244,200,.25);
  transform: translate(14%, -12%);
}
.context-menu.is-left { transform: translate(-108%, -12%); }
.context-menu.is-low { transform: translate(14%, -100%); }
.context-menu.is-left.is-low { transform: translate(-108%, -100%); }
.menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #e7bd67;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.menu-close {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(227,189,112,.45);
  border-radius: 50%;
  color: #eadbb9;
  background: #2c241d;
  font-family: system-ui, sans-serif;
  line-height: 20px;
  cursor: pointer;
}
.tower-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tower-option {
  display: grid;
  min-width: 0;
  padding: 5px 4px 7px;
  border: 1px solid #947347;
  border-radius: 8px;
  color: #f4e4b8;
  background: linear-gradient(#4b3b2d, #2a231c);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
}
.tower-option img {
  display: block;
  width: 100%;
  height: 67px;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.42));
}
.tower-option span { display: grid; gap: 2px; }
.tower-option strong { font-family: system-ui, sans-serif; font-size: 12px; }
.tower-option small { color: #c8b891; font-family: system-ui, sans-serif; font-size: 9px; white-space: nowrap; }
.tower-option:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .48; }
.archer-option:not(:disabled):hover { border-color: #e7bd61; }
.mage-option:not(:disabled):hover { border-color: #65dff6; }
.artillery-option:not(:disabled):hover { border-color: #ef9952; }

.tower-menu { width: min(260px, 31%); }
.tower-menu p {
  margin: 3px 0 11px;
  color: #cbbd9d;
  font-family: system-ui, sans-serif;
  font-size: 12px;
}
.tower-actions { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8px; }
.tower-actions button {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #f4cd78;
  border-radius: 6px;
  color: #3b2818;
  background: linear-gradient(#ffe7a1, #dda24c);
  box-shadow: 0 3px 0 #6a411f;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  cursor: pointer;
}
.tower-actions .sell-button { border-color: #b48565; color: #eadcc1; background: linear-gradient(#665044, #3b3029); box-shadow: 0 3px 0 #1e1815; }
.tower-actions button:disabled { cursor: default; filter: grayscale(.75); opacity: .55; }

.sound-button:active, .wave-button:active, .tower-option:active, .tower-actions button:active,
.parchment-panel button:active, .result-panel button:active { transform: translateY(2px); box-shadow: 0 1px 0 #15100b; }
.toast {
  position: absolute;
  z-index: 10;
  top: 14%;
  left: 50%;
  max-width: 80%;
  padding: 8px 14px;
  border: 1px solid rgba(255,230,165,.42);
  border-radius: 8px;
  color: #fff1c7;
  background: rgba(31,25,20,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  font-family: system-ui, sans-serif;
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.modal-backdrop {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6%;
  background: rgba(20,15,10,.66);
  backdrop-filter: blur(2px);
}
[hidden] { display: none !important; }
.parchment-panel, .result-panel {
  width: min(530px, 76%);
  padding: clamp(20px, 3.4vw, 42px);
  border: 4px double #8e5a2b;
  border-radius: 7px 16px 6px 14px;
  color: #382718;
  background: linear-gradient(rgba(255,240,188,.76), rgba(235,201,130,.76)), repeating-linear-gradient(10deg, #d7ac62 0 2px, #e7c77e 2px 8px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 0 38px rgba(125,69,24,.24);
  text-align: center;
}
.panel-kicker {
  margin-bottom: 4px;
  color: #a76929;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.parchment-panel h1, .result-panel h2 {
  margin: 5px 0 10px;
  color: #3a2517;
  font-size: clamp(24px, 4vw, 44px);
  letter-spacing: .05em;
  text-shadow: 0 1px rgba(255,255,255,.45);
}
.parchment-panel p, .result-panel p {
  margin: 0 auto 16px;
  font-family: system-ui, sans-serif;
  font-size: clamp(12px, 1.45vw, 16px);
  line-height: 1.7;
}
.objective-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 20px;
  padding: 10px;
  border-top: 1px solid rgba(90,53,24,.32);
  border-bottom: 1px solid rgba(90,53,24,.32);
  font-family: system-ui, sans-serif;
  font-size: clamp(11px, 1.25vw, 14px);
}
.objective-row span { color: #8d5c27; font-weight: 900; }
.parchment-panel button, .result-panel button {
  display: block;
  width: min(230px, 80%);
  margin: 0 auto;
  padding: 9px 12px;
  border: 1px solid #f4cd78;
  border-radius: 6px;
  color: #3b2818;
  background: linear-gradient(#ffe7a1, #dda24c);
  box-shadow: 0 3px 0 #6a411f;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 22px; }
.result-stats div { display: grid; gap: 3px; padding: 10px 4px; border: 1px solid rgba(82,49,23,.28); border-radius: 6px; background: rgba(255,241,198,.25); }
.result-stats span { font-family: system-ui, sans-serif; font-size: clamp(9px, 1vw, 12px); }
.result-stats strong { font-family: system-ui, sans-serif; font-size: clamp(18px, 2.6vw, 30px); }
.game-note { display: flex; justify-content: space-between; gap: 20px; padding: 10px 3px 0; color: #87765e; font-family: system-ui, sans-serif; font-size: 12px; }

@media (max-width: 720px) {
  body { padding: 0; background: #0e0c0a; }
  .game-shell { border-width: 0; border-radius: 0; }
  .game-note { display: none; }
  .hud { gap: 4px; }
  .hud-card { min-width: 0; padding: 5px 8px; border-width: 1px; }
  .hud-label { display: none; }
  .sound-button { padding: 5px 8px; font-size: 10px; }
  .wave-button { min-width: 112px; padding: 6px 10px 7px; }
  .context-menu { width: 42%; padding: 7px; }
  .tower-options { gap: 3px; }
  .tower-option { padding: 2px; }
  .tower-option img { height: 40px; }
  .tower-option strong { font-size: 8px; }
  .tower-option small { font-size: 6px; }
  .menu-heading { margin-bottom: 4px; font-size: 8px; }
  .menu-close { width: 18px; height: 18px; font-size: 11px; line-height: 14px; }
  .tower-menu p { margin: 2px 0 5px; font-size: 8px; }
  .tower-actions button { padding: 4px 5px; font-size: 8px; }
  .parchment-panel, .result-panel { width: 80%; padding: 16px; }
}