:root {
  color-scheme: light;
  --page-cream: #f3f0df;
  --paper-cream: #f8f6e8;
  --olive-ink: #273326;
  --moss: #38532f;
  --dark-moss: #34412f;
  --sun-gold: #e1b749;
  --lawn: #9caf69;
  --night-lawn: #58674d;
  --roof-tile: #b98569;
  --water: #5c9da3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body {
  background: #d9d5c4;
  color: var(--olive-ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--sun-gold); outline-offset: 2px; }
.unit-sprite { display: block; object-fit: fill; pointer-events: none; user-select: none; }

.native-shell {
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--page-cream);
  box-shadow: 0 0 30px rgba(48, 53, 41, .16);
}

.battle-header,
.almanac-header { background: var(--paper-cream); }
.header-main {
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.round-command {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.round-command:hover { background: rgba(56, 83, 47, .08); }
.round-command svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--moss);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.title-copy { padding-left: 2px; }
.level-line { display: flex; align-items: flex-end; gap: 7px; }
.level-line strong {
  color: var(--moss);
  font-family: Georgia, "Songti SC", serif;
  font-size: 24px;
  font-weight: 900;
}
.level-line span {
  padding-bottom: 3px;
  color: #687160;
  font-size: 11px;
  font-weight: 700;
}
.title-copy small {
  display: block;
  color: var(--olive-ink);
  font-size: 11px;
  font-weight: 600;
}
.header-spacer { flex: 1; }
.header-stats {
  display: flex;
  gap: 18px;
  padding: 0 16px 11px 54px;
}
.header-stats span { display: flex; align-items: center; gap: 4px; }
.header-stats b { color: #6f805f; font-size: 11px; font-weight: 900; }
.header-stats b.sun-ink { color: var(--sun-gold); }
.header-stats strong { color: #4a5545; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.setting-toggle {
  margin-left: auto;
  padding: 2px 9px;
  border: 1px solid rgba(89, 102, 77, .3);
  border-radius: 999px;
  background: #f8f5e7;
  color: #6f805f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.setting-toggle strong { color: var(--sun-gold); }
.setting-toggle[aria-pressed="false"] strong { color: #8a8f82; }
.setting-toggle:disabled { opacity: .5; cursor: wait; }

.wave-band { padding: 10px 16px; background: var(--dark-moss); }
.wave-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wave-copy strong { color: #e9ead8; font-size: 12px; font-weight: 800; }
.wave-copy span { color: #c5ccb7; font-size: 10px; text-align: right; }
.wave-track { height: 3px; margin-top: 8px; background: #5b6854; }
.wave-track i { display: block; width: 0; height: 100%; background: var(--sun-gold); transition: width 180ms ease; }

.error-band { padding: 9px 16px; background: #f3d6c7; color: #7c3229; font-size: 12px; font-weight: 700; }
.battle-empty {
  height: 286px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #d8d09f;
}
.battle-empty strong { color: #3f5135; font-size: 17px; font-weight: 900; }
.battle-empty span { margin-top: 8px; color: #536149; font-size: 11px; }

.board-wrap { position: relative; padding-top: 7px; background: #d8d09f; }
.battle-board { width: 100%; }
.board-lane { display: grid; grid-template-columns: 29px minmax(0, 1fr); min-height: 54px; }
.mower-cell {
  display: grid;
  place-items: center;
  border: .5px solid rgba(66, 83, 47, .18);
  background: #cfb873;
}
.mower-cell svg { width: 26px; height: 23px; }
.mower-used { color: rgba(79, 69, 46, .35); font-size: 18px; }
.lane-lawn { position: relative; min-width: 0; }
.lane-grid { height: 100%; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.board-cell {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  border: .5px solid rgba(48, 80, 37, .2);
  background: rgba(229, 223, 145, .18);
}
.board-cell.alt { background: rgba(214, 206, 129, .28); }
.board-cell.water { background: rgba(92, 157, 163, .66); }
.board-cell.water.alt { background: rgba(92, 157, 163, .78); }
.battle-board.night .board-cell { background: rgba(229, 223, 145, .08); }
.battle-board.night .board-cell.alt { background: rgba(214, 206, 129, .15); }
.battle-board.roof .board-cell { background: rgba(185, 133, 105, .7); }
.battle-board.roof .board-cell.alt { background: rgba(198, 147, 116, .76); }
.fog-cell::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  background: rgba(91, 102, 78, .27);
  pointer-events: none;
}
.board-unit,
.zombie-unit,
.airdrop-unit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.board-unit { position: relative; width: 100%; height: 100%; }
.board-unit svg { width: 35px; height: 42px; }
.board-unit .plant-sprite { width: 35px; height: 42px; }
.zombie-layer { position: absolute; inset: 0; pointer-events: none; }
.zombie-unit {
  position: absolute;
  z-index: 20;
  top: var(--y);
  left: var(--x);
  width: 40px;
  height: calc(100% - 2px);
  transform: translateX(-19px);
  pointer-events: auto;
}
.zombie-unit .zombie-sprite { width: 38px; height: 44px; align-self: start; }
.health-bar {
  position: absolute;
  right: 5px;
  bottom: 2px;
  left: 5px;
  height: 2px;
  background: rgba(22, 31, 24, .35);
}
.health-bar i { display: block; width: var(--hp); height: 100%; background: #d7e66c; }
.zombie-unit .health-bar i { background: #da765d; }
.imitator-count {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 45;
  min-width: 17px;
  padding: 2px 4px;
  border-radius: 999px;
  background: #f0cc60;
  color: #513d22;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}
.airdrop-unit { width: 34px; height: 39px; }
.airdrop-unit svg { width: 100%; height: 100%; }
.boss-ribbon {
  position: absolute;
  z-index: 70;
  top: 13px;
  right: 9px;
  padding: 5px 7px;
  background: #63342f;
  color: #f2e2cf;
  font-size: 9px;
  font-weight: 800;
}

.sync-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #d8d09f;
}
.sync-line i { width: 6px; height: 6px; border-radius: 50%; background: #4f7b3f; }
.sync-line i.error { background: #a84f3f; }
.sync-line span { color: #5d674e; font-size: 10px; font-weight: 700; }

.section-band { padding: 17px 16px; }
.cards-section { background: #ece8d2; }
.events-section { background: #f7f4e6; }
.rounds-section { background: #ebe6cf; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.section-heading strong { color: var(--olive-ink); font-family: Georgia, "Songti SC", serif; font-size: 14px; font-weight: 900; }
.section-heading span { color: #78806e; font-size: 10px; font-weight: 700; }
.section-heading.dark strong { color: #eef0da; }
.section-heading.dark span { color: #bdc5ae; }
.card-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.card-slot {
  position: relative;
  width: 58px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #aaa38a;
  border-radius: 4px;
  background: #f4efd7;
  cursor: pointer;
}
.card-slot .plant-sprite { width: 31px; height: 35px; }
.card-slot.cooldown { background: #c8c3ad; }
.cooldown-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(45, 47, 40, .64);
  color: #f2ead2;
  font-size: 13px;
  font-weight: 900;
}
.empty-copy { margin: 0; color: #777d6d; font-size: 11px; }
.event-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.event-row time { color: #9a783d; font-family: Georgia, serif; font-size: 10px; font-weight: 700; }
.event-row p { margin: 0; color: #4b5145; font-size: 12px; font-weight: 600; line-height: 18px; }
.event-row.strong p { color: #7a382f; }
.round-row { padding: 12px 0 4px; }
.round-row:first-child { padding-top: 0; }
.round-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.round-head strong { color: var(--olive-ink); font-size: 12px; font-weight: 800; }
.round-head span { color: #7a806f; font-family: Georgia, serif; font-size: 10px; font-weight: 700; }
.round-row p { margin: 5px 0 0; color: #5b6054; font-size: 11px; line-height: 17px; }

.progress-section { padding: 18px 16px; background: #354330; }
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #566250; }
.record-grid > div { min-width: 0; padding: 13px 6px; background: #354330; text-align: center; }
.record-grid strong { display: block; overflow: hidden; color: #e7c767; font-family: Georgia, serif; font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.record-grid span { display: block; margin-top: 5px; color: #c6ccba; font-size: 9px; font-weight: 700; }

.almanac-header { height: 62px; display: flex; align-items: center; padding: 0 6px; }
.almanac-header > div { display: flex; flex-direction: column; }
.almanac-header strong { color: var(--olive-ink); font-size: 18px; font-weight: 900; }
.almanac-header span { color: #687160; font-size: 10px; font-weight: 700; }
.almanac-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; background: var(--dark-moss); }
.almanac-tabs button {
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: #4a5744;
  color: #cdd3c0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.almanac-tabs button.active { background: #e8e2c2; color: var(--moss); }
.almanac-list { padding: 0 12px 18px; }
.almanac-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(89, 102, 77, .16);
  border-radius: 7px;
  background: #f8f5e7;
}
.almanac-art { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 6px; background: #dde2b4; }
.almanac-art.zombie { background: #d8d2be; }
.almanac-art .plant-sprite { width: 47px; height: 55px; }
.almanac-art .zombie-sprite { width: 47px; height: 57px; }
.almanac-row strong { color: var(--olive-ink); font-size: 14px; font-weight: 900; }
.almanac-row p { margin: 4px 0 0; color: #596052; font-size: 11px; line-height: 17px; }

.unit-inspector {
  position: fixed;
  z-index: 100;
  right: 50%;
  bottom: 10px;
  width: min(592px, calc(100vw - 20px));
  min-height: 62px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  transform: translateX(50%);
  border: 1px solid rgba(39, 51, 38, .18);
  border-radius: 7px;
  background: rgba(248, 246, 232, .97);
  box-shadow: 0 7px 24px rgba(39, 51, 38, .22);
}
.unit-inspector > div:first-child { width: 46px; height: 50px; }
.unit-inspector svg,
.unit-inspector .unit-sprite { width: 100%; height: 100%; }
.unit-inspector > div:nth-child(2) { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 9px; }
.unit-inspector strong { color: var(--olive-ink); font-size: 13px; font-weight: 900; }
.unit-inspector span { overflow: hidden; color: #687160; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.unit-inspector small { grid-column: 1 / -1; overflow: hidden; color: #596052; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.unit-inspector button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--moss); font-size: 20px; cursor: pointer; }
.connection-note { position: fixed; z-index: 110; right: 12px; bottom: 12px; padding: 8px 10px; border-radius: 4px; background: #7c3229; color: #f8f0df; font-size: 11px; }

@media (max-width: 420px) {
  .native-shell { width: 100%; box-shadow: none; }
  .unit-inspector small { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}