/*
 * 植物守卫战的视觉系统与静态布局。
 * 本文件只负责复古卡通外观、响应式舞台和可访问状态，不处理游戏规则。
 * 关键约束：1280×720 完整可见、1024×720 可操作、焦点不依赖颜色。
 */

:root {
  --ink: #21341f;
  --ink-soft: #44613a;
  --cream: #fff4c8;
  --sun: #f5c544;
  --sun-deep: #d99522;
  --grass-a: #72b93f;
  --grass-b: #84c94d;
  --grass-dark: #3f792f;
  --wood: #744222;
  --wood-light: #a56b35;
  --wood-dark: #3b2418;
  --danger: #b4452d;
  --sky: #97daf4;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-raised: 0 5px 0 rgba(48, 33, 20, 0.65), 0 12px 24px rgba(31, 52, 31, 0.18);
  --shadow-frame: 0 20px 60px rgba(30, 55, 31, 0.28);
  --duration-fast: 140ms;
  --duration-playful: 280ms;
  --ease-bounce: cubic-bezier(0.2, 0.9, 0.3, 1.25);
  font-family: "Avenir Next Rounded", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #d9efbd;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.75) 0 3%, transparent 3.2%),
    linear-gradient(180deg, var(--sky) 0 34%, #dceab2 34% 100%);
}

button { font: inherit; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #24482b; }

.page-shell { width: min(1180px, calc(100vw - 36px)); margin: 0 auto; padding: 12px 0 18px; }
.home-scene { min-height: calc(100vh - 30px); padding: 24px 8px 30px; }
.home-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.home-header h1 { font-size:clamp(3.4rem,7vw,6.2rem); max-width:720px; }
.record-plaque { min-width:150px; display:grid; justify-items:center; padding:12px 18px; border:4px solid var(--wood-dark); border-radius:18px; color:var(--cream); background:linear-gradient(#7f5029,#4c301c); box-shadow:var(--shadow-raised); }
.record-plaque span { font-size:.78rem; font-weight:900; }
.record-plaque strong { color:var(--sun); font-size:2rem; }
.storage-notice { margin:0 0 14px; padding:10px 14px; border:2px solid #8f5d26; border-radius:12px; background:#fff0b0; font-weight:900; }
.mode-map { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mode-card { min-height:170px; display:grid; grid-template-columns:82px 1fr; grid-template-rows:1fr auto; align-items:center; gap:10px 14px; padding:22px; border:5px solid var(--wood-dark); border-radius:24px; color:#fffbe2; text-align:left; cursor:pointer; box-shadow:var(--shadow-raised); transition:transform var(--duration-playful) var(--ease-bounce),filter var(--duration-fast); }
.mode-card:hover:not(:disabled) { transform:translateY(-6px) rotate(-.5deg); filter:brightness(1.08); }
.mode-card:disabled { cursor:not-allowed; filter:grayscale(.75) brightness(.65); }
.mode-card--day { background:linear-gradient(145deg,#5ca945,#2f7437); }
.mode-card--night { background:linear-gradient(145deg,#314678,#1c2850); }
.mode-card--bowling { background:linear-gradient(145deg,#b86e35,#68391f); }
.mode-card--challenge { min-height:150px; background:linear-gradient(120deg,#6f3c88,#283c7a 58%,#1f6f66); }
.mode-card--saving { min-height:150px; background:linear-gradient(145deg,#62b94d,#167659 58%,#155344); }
.mode-card--boss { min-height:150px; background:linear-gradient(120deg,#56385f,#802b38 55%,#292536); }
.mode-card--dinosaur { min-height:150px; background:linear-gradient(145deg,#9d6830,#52652c 55%,#243c35); }
.new-challenge-button { grid-column:1/-1; justify-self:center; margin-top:-6px; border:2px solid #483023; border-radius:99px; padding:8px 16px; color:#fff4c8; background:#71431f; box-shadow:0 3px 0 #352115; font-weight:900; cursor:pointer; }
.mode-art { grid-row:1/3; display:grid; place-items:center; width:76px; height:76px; border:3px solid rgba(255,255,255,.6); border-radius:22px; background:rgba(255,255,255,.14); font-size:2.8rem; }
.mode-card b { display:block; font-size:1.55rem; }
.mode-card small { display:block; margin-top:5px; color:#e8efc8; font-weight:800; }
.mode-card em { justify-self:start; padding:5px 11px; border-radius:99px; color:#273822; background:#f4d76b; font-style:normal; font-weight:1000; }
.home-encyclopedia { margin-top:26px; padding:22px; border:4px solid var(--wood-dark); border-radius:24px; background:linear-gradient(145deg,#fff6d5,#e3efbd); box-shadow:var(--shadow-raised); }
.encyclopedia-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.encyclopedia-header h2 { margin:2px 0 0; color:#365e2f; font-size:clamp(1.65rem,3vw,2.3rem); line-height:1; letter-spacing:-.05em; }
.encyclopedia-hint { margin:7px 0 0; color:var(--ink-soft); font-size:.9rem; font-weight:750; }
.encyclopedia-switch { display:flex; flex:0 0 auto; gap:8px; padding:5px; border:2px solid #6a4624; border-radius:16px; background:#ead8a2; }
.encyclopedia-choice { min-height:44px; padding:8px 14px; border:2px solid transparent; border-radius:11px; color:#3f3321; background:transparent; font-weight:950; cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast); }
.encyclopedia-choice:hover { transform:translateY(-1px); }
.encyclopedia-choice.is-active { border-color:#4b7336; color:#fffbe2; background:linear-gradient(145deg,#68a948,#34713b); box-shadow:0 2px 0 #2c4c2a; }
.encyclopedia-choice:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.encyclopedia-choice span { display:inline-grid; min-width:22px; height:22px; place-items:center; margin-left:3px; border-radius:99px; color:#342b1d; background:#f5d776; font-size:.75rem; }
.encyclopedia-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.encyclopedia-card { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-areas:"icon title" "description description"; align-content:start; gap:7px 10px; min-width:0; min-height:146px; padding:13px; border:2px solid #71502f; border-radius:17px; color:var(--ink); background:rgba(255,255,255,.72); box-shadow:0 3px 0 rgba(75,55,34,.2); }
.encyclopedia-icon { grid-area:icon; display:grid; width:46px; height:46px; place-items:center; border:2px solid #c7d998; border-radius:14px; background:linear-gradient(145deg,#f4f8ce,#d9edab); font-size:1.65rem; }
.encyclopedia-title-group { grid-area:title; align-self:center; min-width:0; }
.encyclopedia-title-group h3 { margin:0; color:#385b31; font-size:1rem; line-height:1.15; overflow-wrap:anywhere; }
.encyclopedia-stat { display:block; margin-top:5px; color:#674623; font-size:.77rem; font-weight:950; }
.encyclopedia-description { grid-area:description; margin:0; color:#4c543c; font-size:.82rem; font-weight:700; line-height:1.45; }
.game-scene { padding-bottom:8px; }
.game-scene .masthead { margin-bottom:6px; }
.game-scene .masthead h1 { font-size:2.45rem; line-height:.9; }
.masthead { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; padding: 0 8px; }
.eyebrow { margin: 0 0 2px; color: var(--ink-soft); font-weight: 900; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 0; color: #365e2f; font-size: clamp(2rem, 4vw, 3.35rem); line-height: .92; letter-spacing: -.07em; text-shadow: 0 3px 0 rgba(255,255,255,.72); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { width: 46px; height: 46px; border: 3px solid var(--wood-dark); border-radius: 50%; color: var(--cream); background: var(--wood); box-shadow: 0 4px 0 var(--wood-dark); font-weight: 1000; cursor: pointer; }
.wood-button { border: 3px solid var(--wood-dark); border-radius: 13px; padding: 12px 22px; color: #fff5c8; background: linear-gradient(#9b6232, #724120); box-shadow: var(--shadow-raised); font-weight: 1000; letter-spacing: .04em; cursor: pointer; transition: transform var(--duration-fast) var(--ease-bounce), filter var(--duration-fast); }
.wood-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.wood-button--small { padding: 8px 14px; font-size: .9rem; }

.game-frame { overflow: hidden; border: 6px solid var(--wood-dark); border-radius: var(--radius-lg); background: var(--wood); box-shadow: var(--shadow-frame); }
.seed-bank { min-height: 92px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 5px solid var(--wood-dark); background: linear-gradient(180deg, #8f572b, #65401f); }
.card-scroller { min-width:0; flex:1; display:flex; gap:8px; overflow-x:auto; padding:4px 3px 8px; scrollbar-color:#e3bd60 #412a19; }
.sun-bank { min-width: 95px; height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 3px solid #8d5b23; border-radius: 14px; background: linear-gradient(#fff7b8, #f1c95c); box-shadow: 0 4px 0 rgba(53,32,16,.6); color: #674615; font-size: 1.35rem; }
.sun-icon { font-size: 1.7rem; }
.seed-card { position: relative; overflow: hidden; flex:0 0 126px; width:126px; height: 66px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 3px solid #5f3d1f; border-radius: 12px; background: linear-gradient(#f5e4a8, #d7bb6e); box-shadow: 0 4px 0 rgba(53,32,16,.58); color: #453019; cursor: pointer; transition: transform var(--duration-fast) var(--ease-bounce), filter var(--duration-fast); }
.seed-card:hover { transform: translateY(-3px); }
.seed-card:disabled,.icon-button:disabled { cursor: not-allowed; opacity: .68; transform: none; }
.seed-card.is-selected { border-color: #fff2a8; box-shadow: 0 0 0 3px #397931, 0 5px 0 #2f511f; transform: translateY(-2px); }
.seed-card.is-locked { filter: grayscale(.45) brightness(.72); cursor: not-allowed; }
.seed-portrait { flex: 0 0 46px; width: 46px; height: 54px; }
.seed-glyph { flex:0 0 46px; display:grid; place-items:center; width:46px; height:54px; font-size:2rem; }
.seed-copy { min-width: 0; display: grid; text-align: left; }
.seed-copy strong { overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
.seed-copy small { margin-top: 4px; font-weight: 900; }
.wave-meter { min-width: 170px; margin-left: auto; color: #fff3be; }
.nut-belt { min-width:0; flex:1; display:flex; gap:10px; align-items:center; padding:7px 12px; border:3px dashed #e7c36d; border-radius:14px; background:#4a2d1c; }
.nut-card { width:56px; height:56px; border:3px solid #2f1c12; border-radius:50%; background:#d4944b; box-shadow:0 4px 0 #2f1c12; font-size:1.8rem; cursor:pointer; }
.nut-card.is-selected { outline:4px solid #fff0a1; }
.wave-meta { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .78rem; font-weight: 900; }
.wave-track { height: 15px; padding: 3px; border-radius: 99px; background: #2d2217; box-shadow: inset 0 2px 2px #140f0a; }
.wave-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sun), #e2612f); }

.cooldown-mask { position: absolute; inset: auto 0 0; height: var(--cooldown, 0%); pointer-events: none; background: rgba(27,34,25,.58); transition: height 80ms linear; }
.shovel-button { flex:0 0 62px; height:58px; display:grid; place-items:center; align-content:center; border:3px solid #5b351d; border-radius:12px; background:#e3bd67; box-shadow:0 4px 0 #3a2216; font-size:1.45rem; cursor:pointer; }
.shovel-button small { display:block; font-size:.65rem; font-weight:1000; }
.shovel-button.is-selected { outline:4px solid #fff0a1; background:#f2d77d; transform:translateY(2px); box-shadow:0 2px 0 #3a2216; }
.water-drop-button { flex-basis:52px; background:#bdeef7; }
.water-drop-button:disabled { opacity:.53; cursor:not-allowed; }
.water-drop-button.is-selected { background:#5ce0f5; }
.hybrid-help { font-size:.72rem; font-weight:850; color:#fff3be; }
.battlefield-wrap { min-height: 380px; display: grid; grid-template-columns: 62px 1fr; background: var(--grass-dark); }
.lane-tools { display: grid; grid-template-rows: repeat(5, 1fr); place-items: center; border-right: 3px solid rgba(35,70,31,.55); background: linear-gradient(90deg, #446f2f, #5c8e3a); }
.mower { position: relative; width: 46px; height: 44px; display: grid; place-items: center; font-size: 2rem; filter: drop-shadow(0 3px 1px rgba(32,45,24,.45)); transition: opacity var(--duration-fast); }
.mower.is-spent { opacity: .15; filter: grayscale(1); }
.mower.is-active { animation: mower-rattle .18s linear infinite; }
.lawn { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); isolation: isolate; overflow: hidden; background-color: var(--grass-a); background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,170,.11) 50%), linear-gradient(rgba(52,112,42,.22) 2px, transparent 2px), linear-gradient(90deg, rgba(52,112,42,.18) 2px, transparent 2px); background-size: 22.222% 40%, 100% 20%, 11.111% 100%; }
.game-frame.is-night { border-color:#171c35; background:#26213e; }
.game-frame.is-night .seed-bank { border-color:#171c35; background:linear-gradient(#3e345f,#24213e); }
.game-frame.is-night .lawn { background-color:#365646; filter:saturate(.86); }
.river-layer { position:absolute; z-index:1; left:0; right:0; top:40%; height:20%; display:none; background:linear-gradient(180deg,#3696b9,#176888 55%,#2e8bad); box-shadow:inset 0 5px 0 rgba(255,255,255,.28),inset 0 -5px 0 rgba(15,72,89,.45); }
.lawn.has-river .river-layer { display:block; }
.river-layer::after { content:"≈  ≈  ≈  ≈  ≈  ≈"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(220,252,255,.45); font-size:2rem; letter-spacing:1.2rem; }
.red-line { position:absolute; z-index:9; top:0; bottom:0; left:22.222%; width:5px; background:#e83c35; box-shadow:0 0 0 3px rgba(255,237,158,.7),0 0 18px #e83c35; }
.red-line span { position:absolute; top:8px; left:8px; padding:3px 6px; border-radius:5px; color:#fff; background:#a52122; font-size:.72rem; font-weight:1000; white-space:nowrap; }
.lawn::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(36,81,35,.22)); }
.porch-shadow { position: absolute; inset: 0 auto 0 0; width: 3%; z-index: 1; background: linear-gradient(90deg, rgba(39,43,25,.38), transparent); }
.grid-layer { position: absolute; z-index: 3; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); }
.lawn-cell { border: 0; border-radius: 8px; background: transparent; cursor: crosshair; }
.lawn-cell:hover { background: rgba(255,255,190,.18); box-shadow: inset 0 0 0 3px rgba(255,250,190,.45); }
.lawn-cell.is-targetable { background: rgba(255,239,118,.12); }
.lawn-cell.is-mecha-target { background:rgba(123,241,255,.2); box-shadow:inset 0 0 0 2px rgba(167,249,255,.75); }
.lawn-cell:focus-visible { z-index: 8; outline: 4px solid #fff5a3; outline-offset: -5px; box-shadow: inset 0 0 0 8px #306c35; }
.entity-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.plant-unit,.glyph-unit { pointer-events:auto; cursor:pointer; }
.water-standalone-unit { filter:drop-shadow(0 0 6px rgba(74,210,255,.75)); }
.lawn.is-cannon-aiming .lawn-cell { cursor:crosshair; }
.lawn.is-cannon-aiming .lawn-cell:hover { box-shadow:inset 0 0 0 4px #ffe66d,0 0 14px #ff8a2a; }
.lawn.is-cannon-aiming [role="button"][data-entity-id] { cursor:crosshair; pointer-events:auto; }
.cannon-shot { position:absolute; z-index:11; transform:translate(-50%,-50%); font-size:2rem; filter:drop-shadow(0 0 8px #fff); animation:bob .45s ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.zombie-glyph.is-armored-crusher { font-size:clamp(2.5rem,4.8vw,4rem); filter:drop-shadow(0 0 7px #c9d5e8); }
.zombie-glyph.is-special-elite { animation-duration:.22s; filter:drop-shadow(8px 0 3px rgba(255,228,80,.65)); }
.zombie-glyph.is-special-elite::before,.zombie-glyph.is-special-elite::after { content:"⚡"; position:absolute; right:70%; opacity:.45; animation:elite-trail .22s linear infinite; animation-play-state:var(--motion-state); }
.zombie-glyph.is-special-elite::after { right:95%; opacity:.22; animation-delay:-.11s; }
.elite-badge { position:absolute; top:1px; right:0; padding:1px 4px; border-radius:5px; color:#271b05; background:#ffe15a; font-size:.55rem; }
.dinosaur-helper { position:absolute; z-index:10; left:95%; display:grid; justify-items:center; transform:translate(-50%,-55%); pointer-events:none; filter:drop-shadow(0 3px 3px rgba(24,35,17,.65)); }
.dinosaur-helper > span { font-size:clamp(2rem,3.7vw,3.25rem); animation:dinosaur-bob 1.2s ease-in-out infinite; animation-play-state:var(--motion-state); }
.dinosaur-helper.is-kicking > span { animation:dinosaur-kick .65s cubic-bezier(.2,.7,.25,1) both; animation-delay:calc(-1 * var(--dino-elapsed)); }
.dinosaur-helper small { margin-top:-4px; padding:2px 6px; border:1px solid rgba(255,255,255,.8); border-radius:99px; color:#fff8d4; background:rgba(37,55,29,.86); font-size:.64rem; font-weight:1000; white-space:nowrap; }
.is-turned { transform:scaleX(-1); }
.fire-layer { z-index: 2; }
.row-fire { position:absolute; left:0; width:100%; height:20%; display:grid; grid-template-columns:repeat(9,1fr); align-items:end; overflow:hidden; background:linear-gradient(0deg,rgba(255,72,22,.55),rgba(255,174,35,.18) 55%,transparent 82%); animation:fire-pulse .22s ease-in-out infinite alternate; }
.row-fire i { display:grid; place-items:center; font-style:normal; font-size:clamp(1.7rem,3vw,2.7rem); filter:drop-shadow(0 0 8px #ffdd55); }
.mine-blast { position:absolute; z-index:9; width:11.111%; height:20%; display:grid; place-items:center; pointer-events:none; animation:mine-blast .45s ease-out both; animation-play-state:var(--motion-state); }
.mine-blast i { font-style:normal; font-size:clamp(2.6rem,5vw,4.2rem); filter:drop-shadow(0 0 12px #ffe36a); }
.mine-blast b { position:absolute; color:#fff6a1; font-size:2rem; text-shadow:0 0 8px #ff6b22; }
.sun-layer { z-index: 7; }
.sprite { display: block; background-image: url("./assets/garden-defense-sprite-atlas.png"); background-repeat: no-repeat; background-size: 400% 200%; }
.sprite--sunflower { background-position: 0 0; }
.sprite--peashooter { background-position: 33.333% 0; }
.sprite--wallnut { background-position: 66.667% 0; }
.sprite--snowpea { background-position: 100% 0; }
.sprite--normal { background-position: 0 100%; }
.sprite--bucket { background-position: 33.333% 100%; }
.sprite--runner { background-position: 66.667% 100%; }
.sprite--pea { background-position: 100% 100%; }
.unit { position: absolute; width: 11.111%; height: 20%; transform: translateZ(0); }
.plant-unit { animation:bob 2.8s ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.glyph-unit { position:absolute; width:11.111%; height:20%; display:grid; place-items:center; font-size:clamp(2rem,4vw,3.4rem); filter:drop-shadow(0 4px 1px rgba(31,48,25,.35)); animation:bob 2.8s ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.support-unit { transform:scale(.9); opacity:.95; }
.glyph-unit .health-bar { width:66%; left:17%; right:auto; }
.hybrid-badge { position:absolute; z-index:8; top:0; right:3%; width:25%; aspect-ratio:1; display:grid; place-items:center; border:2px solid #fff2a8; border-radius:50%; background:#38582c; font-size:.8rem; font-style:normal; box-shadow:0 2px 0 #20341c; }
.hybrid-badge + .hybrid-badge { top:27%; }
.mimic-badge,.water-badge { position:absolute; left:0; top:0; z-index:9; padding:1px 4px; border-radius:8px; background:#e5d4fc; color:#372459; font-size:.58rem; font-style:normal; font-weight:950; }
.water-badge { top:auto; bottom:3px; background:#c9f6ff; color:#164f65; }
.plant-unit.is-water-powered,.glyph-unit.is-water-powered { filter:drop-shadow(0 0 8px #89e9ff); }
.plant-unit.is-hybrid,.glyph-unit.is-hybrid { outline:2px solid rgba(255,234,123,.8); outline-offset:-5px; border-radius:25%; }
.corpse-count { position:absolute; z-index:8; left:7%; top:3%; min-width:1.5em; padding:1px 4px; border-radius:99px; color:#fff; background:#5f315f; font-size:.7rem; text-align:center; }
.is-boss-frozen { filter:drop-shadow(0 0 9px #9ff7ff) saturate(.45) brightness(1.18)!important; }
.glyph-unit.growth-small > span:first-child { transform:scale(.72); }
.glyph-unit.growth-medium > span:first-child { transform:scale(.9); }
.glyph-unit.growth-large > span:first-child { transform:scale(1.14); filter:drop-shadow(0 0 8px #ffe869); }
.glyph-unit.is-potatoMine.is-arming { animation-name:mine-arming; animation-duration:1.2s; }
.glyph-unit.is-potatoMine.is-armed { animation-name:mine-ready; animation-duration:.65s; }
.glyph-unit.is-chomper.is-biting { animation-name:chomper-bite; animation-duration:.45s; animation-iteration-count:1; animation-fill-mode:both; }
.glyph-unit.is-chomper.is-chewing { animation-name:chomper-chew; animation-duration:.5s; }
.glyph-unit.is-cabbageBoxer.is-punching { animation-name:boxer-punch; animation-duration:.5s; }
.glyph-unit.is-squash.is-windup { animation-name:squash-windup; animation-duration:var(--squash-duration,.15s); animation-iteration-count:1; animation-fill-mode:both; }
.glyph-unit.is-squash.is-airborne { animation-name:squash-airborne; animation-duration:var(--squash-duration,.2s); animation-iteration-count:1; animation-fill-mode:both; }
.glyph-unit.is-gatlingShooter.is-bursting,.glyph-unit.is-pomegranate.is-bursting { animation-name:rapid-recoil; animation-duration:.12s; }
.glyph-unit.is-manhole.is-digesting { animation-name:manhole-digest; animation-duration:.35s; }
.plant-unit.is-frosted,.glyph-unit.is-frosted { filter:drop-shadow(0 0 8px #c8ffff) saturate(.62) brightness(1.13); }
.state-ring { position:absolute; width:58%; aspect-ratio:1; border-radius:50%; background:conic-gradient(#ffe768 calc(var(--state-progress) * 1turn),rgba(40,52,27,.32) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0); }
.grave-unit { position:absolute; width:11.111%; height:20%; display:grid; place-items:center; font-size:2.8rem; filter:drop-shadow(0 4px 1px rgba(20,25,35,.5)); }
.nut-unit { position:absolute; width:8%; aspect-ratio:1; display:grid; place-items:center; font-size:2.8rem; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 1px rgba(31,28,22,.45)); }
.zombie-unit { width:10%; animation:zombie-shuffle var(--zombie-duration,.9s) ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.zombie-glyph { position:absolute; width:10%; height:20%; display:grid; place-items:center; font-size:clamp(2rem,4vw,3.3rem); filter:drop-shadow(0 4px 1px rgba(20,25,18,.5)); animation:zombie-shuffle var(--zombie-duration,.9s) ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.zombie-glyph.is-giant { width:13%; margin-left:-1.5%; font-size:clamp(3rem,5.5vw,4.7rem); }
.zombie-glyph.is-giant i { position:absolute; margin:-.7em 0 0 -.25em; font-size:.42em; font-style:normal; }
.zombie-unit.is-giant { animation-name:zombie-stomp; }
.zombie-glyph.is-imp { width:7%; margin-left:1.5%; font-size:clamp(1.5rem,2.7vw,2.3rem); animation-name:zombie-scuttle; }
.zombie-glyph.is-imp.is-landing { animation:imp-land .35s var(--ease-bounce) both; animation-delay:calc(-1 * var(--imp-elapsed)); animation-play-state:var(--motion-state); }
.zombie-unit.is-attacking { animation-name:zombie-bite; animation-direction:alternate; }
.zombie-unit.is-slowed { filter: drop-shadow(0 0 8px #d8ffff) saturate(.75); }
.zombie-unit.is-mutated,.zombie-glyph.is-mutated,.plant-zombie-unit.is-mutated { filter:drop-shadow(0 0 9px #d46cff) drop-shadow(0 0 3px #fff); outline:2px solid #a632d4; border-radius:40%; }
.zombie-unit.is-mutated::after,.zombie-glyph.is-mutated::after,.plant-zombie-unit.is-mutated::after { content:"变异"; position:absolute; top:-8px; right:-4px; padding:1px 3px; border-radius:4px; color:#fff; background:#7b259f; font-size:.55rem; font-weight:1000; }
.zombie-unit.is-charmed,.zombie-glyph.is-charmed,.plant-zombie-unit.is-charmed { filter:drop-shadow(0 0 9px #ff73d5); transform:scaleX(-1); }
.hover-zombie { position:absolute; z-index:9; width:11.111%; height:20%; display:grid; place-items:center; font-size:2.25rem; color:#272126; text-shadow:0 0 8px #fff; }
.hover-zombie.is-warning span { opacity:.55; transform:scale(1.3,.45); }
.hover-zombie.is-retreat { opacity:.45; transform:translateY(-25px); }
.corpse-unit,.corpse-shot,.boss-element { position:absolute; z-index:7; transform:translate(-50%,-50%); font-size:1.5rem; filter:drop-shadow(0 2px 2px #252018); }
.boss-element { font-size:2.3rem; }
.boss-unit { position:absolute; z-index:5; right:-1%; top:6%; width:17%; height:88%; display:grid; place-items:center; align-content:center; pointer-events:none; }
.boss-unit > span { font-size:clamp(4rem,8vw,7rem); filter:drop-shadow(0 7px 2px rgba(20,18,25,.55)); }
.boss-unit > b { padding:3px 7px; border-radius:7px; color:#fff; background:#3d273c; font-size:.72rem; }
.boss-unit > i { width:86%; height:9px; margin-top:5px; overflow:hidden; border:2px solid #251928; border-radius:99px; background:#281d2b; }
.boss-unit > i u { display:block; width:var(--boss-health); height:100%; background:linear-gradient(90deg,#9ee15e,#ee5d45); }
.boss-unit.is-exposed > span { transform:translateY(14px) rotate(-4deg); filter:drop-shadow(0 0 12px #ffdf67); }
.plant-zombie-unit { position:absolute; width:10%; height:20%; display:grid; place-items:center; isolation:isolate; filter:drop-shadow(0 4px 1px rgba(20,25,18,.5)); }
.plant-zombie-body { position:absolute; inset:7% 0 0; display:grid; place-items:center; font-size:clamp(2.5rem,4.6vw,3.75rem); z-index:0; }
.plant-zombie-head { position:absolute; z-index:2; top:-4%; left:16%; width:68%; height:58%; display:grid; place-items:center; border-radius:48% 48% 42% 42%; background:radial-gradient(circle at 48% 54%,#71854f 0 40%,#3f5636 41% 56%,transparent 58%); font-size:clamp(1.75rem,3.2vw,2.65rem); line-height:1; text-shadow:0 2px 0 rgba(29,51,26,.45); transform-origin:45% 80%; }
.plant-zombie-unit .state-ring { z-index:3; top:0; width:58%; }
.plant-zombie-unit .health-bar { z-index:4; }
.plant-zombie-unit[data-state="firing"] .plant-zombie-head { animation:plant-zombie-fire .32s ease-out both; animation-delay:calc(-1 * var(--head-action-elapsed)); animation-play-state:var(--motion-state); }
.plant-zombie-unit[data-state="biting"] .plant-zombie-head { animation:plant-zombie-chomp var(--head-action-duration,.45s) ease-in-out both; animation-delay:calc(-1 * var(--head-action-elapsed)); animation-play-state:var(--motion-state); }
.plant-zombie-unit[data-state="chewing"] .plant-zombie-head { animation:plant-zombie-chew .55s ease-in-out infinite; animation-play-state:var(--motion-state); }
.plant-zombie-unit[data-state="punching"] .plant-zombie-head { animation:plant-zombie-punch .28s ease-out both; animation-delay:calc(-1 * var(--head-action-elapsed)); animation-play-state:var(--motion-state); }
.plant-zombie-unit[data-state="healing"] .plant-zombie-head { animation:plant-zombie-heal .4s ease-out both; animation-delay:calc(-1 * var(--head-action-elapsed)); animation-play-state:var(--motion-state); }
.plant-zombie-unit[data-state="arming"] .plant-zombie-head { filter:saturate(.55); opacity:.72; }
.plant-zombie-unit[data-state="armed"] .plant-zombie-head { animation:plant-zombie-mine-ready .65s ease-in-out infinite; animation-delay:var(--motion-delay); animation-play-state:var(--motion-state); }
.plant-zombie-unit.is-cracked .plant-zombie-head { background:radial-gradient(circle at 48% 54%,#887044 0 38%,#4f3f2b 39% 56%,transparent 58%); filter:saturate(.68); }
.plant-zombie-unit.is-cracked .plant-zombie-head::after { content:"⚡"; position:absolute; color:#3b281c; font-size:.72em; transform:rotate(12deg); }
.health-bar { position: absolute; left: 17%; right: 17%; bottom: 3px; height: 6px; overflow: hidden; border: 1px solid rgba(23,39,20,.8); border-radius: 99px; background: rgba(34,37,24,.6); }
.health-bar span { display:block; height:100%; background:#aee65b; }
.zombie-unit .health-bar span { background:#f0b949; }
.projectile { position: absolute; z-index: 6; width: 2.35%; aspect-ratio: 1; transform: translate(-50%,-50%); }
.projectile-glyph { position:absolute; z-index:6; transform:translate(-50%,-50%); color:#f6e56d; font-size:1.1rem; text-shadow:0 0 7px #fff39a; }
.projectile.is-ice { filter: hue-rotate(120deg) saturate(.65) brightness(1.45) drop-shadow(0 0 6px #a9ffff); }
.projectile.is-mecha-pea { transform:translate(-50%,-50%) scale(1.35); filter:drop-shadow(0 0 7px #8cff54); }
.projectile-glyph.is-enemy { color:#9cda63; text-shadow:0 0 7px #254d21; }
.projectile-glyph.is-enemy.is-ice { color:#bffaff; text-shadow:0 0 8px #14749a; }
.zombie-heal { position:absolute; z-index:10; width:8%; aspect-ratio:1; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#f1ffd1; background:rgba(89,181,78,.72); box-shadow:0 0 16px #baff76; font-size:2rem; font-weight:1000; animation:zombie-heal .4s ease-out both; animation-play-state:var(--motion-state); pointer-events:none; }
.bark-wave,.charm-effect { position:absolute; z-index:10; transform:translate(-50%,-50%); color:#fff7a8; font-size:2rem; font-weight:1000; text-shadow:0 0 8px #6f431f; animation:zombie-heal .4s ease-out both; animation-play-state:var(--motion-state); pointer-events:none; }
.combat-effect { position:absolute; z-index:12; transform:translate(-50%,-50%); font-size:clamp(2rem,4vw,3.4rem); pointer-events:none; animation:combat-pop .5s ease-out both; animation-delay:calc(-1 * var(--effect-elapsed)); animation-play-state:var(--motion-state); filter:drop-shadow(0 0 10px #ffe36a); }
.combat-effect.is-route-shift { color:#fff7a8; font-size:3rem; font-weight:1000; text-shadow:0 0 8px #285f2f; }
.combat-effect.is-fire-punch { filter:drop-shadow(0 0 12px #ff5a1f); }
.combat-effect.is-bind { filter:drop-shadow(0 0 10px #f6d76e); }
.combat-effect.is-portal { filter:drop-shadow(0 0 12px #8a63ff); }
.combat-effect.is-boomerang-hit { font-size:1.5rem; color:#fff3a0; font-weight:1000; }
.combat-effect.is-dinosaur-kick { color:#fff7bd; font-size:1.8rem; }
.combat-effect.is-boomerang-return { left:var(--from-left); top:var(--from-top); animation-name:boomerang-return; animation-duration:.55s; }
.glyph-unit.is-superMechaPea { cursor:grab; border-color:#345d6e; background:radial-gradient(circle at 45% 38%,#d9f7ff 0 22%,#5e8997 23% 58%,#263e49 59%); }
.glyph-unit.is-superMechaPea.is-wallnut { box-shadow:inset 0 0 0 4px #ffd35b,0 0 18px #fff1a0; }
.glyph-unit.is-superMechaPea.is-dragging { cursor:grabbing; opacity:.82; filter:drop-shadow(0 0 12px #fff6a0); }
.glyph-unit.is-morningGlory { background:radial-gradient(circle,#f7cdfb 0 34%,#75469a 35% 60%,transparent 62%); }
.glyph-unit.is-timeGrass { background:radial-gradient(circle,#241347 0 35%,#7b5ed8 36% 55%,transparent 58%); animation:portal-spin 2s linear infinite; animation-play-state:var(--motion-state); }
.glyph-unit.is-boomerangTree { background:radial-gradient(circle,#f0d777 0 26%,#497936 27% 58%,transparent 60%); }
.volley-count { position:absolute; right:-5px; top:calc(-5px + var(--volley-index,0) * 18px); min-width:30px; padding:2px 5px; border:2px solid #402514; border-radius:99px; color:#fff7bd; background:#7a3f21; font-size:.64rem; text-align:center; }
.zombie-unit.is-bound,.plant-zombie-unit.is-bound,.zombie-glyph.is-bound { filter:drop-shadow(0 0 9px #ffe888) saturate(.75); }
.bound-count { position:absolute; left:38%; top:34%; z-index:5; min-width:28px; padding:1px 3px; border-radius:99px; color:#57350f; background:#ffe989; box-shadow:0 0 8px #fff1a4; font-size:.62rem; text-align:center; }
.mecha-panel { position:absolute; z-index:16; width:230px; padding:9px; transform:translate(-35%,-100%); border:3px solid var(--wood-dark); border-radius:14px; color:#fff4c8; background:linear-gradient(#415f68,#233d48); box-shadow:0 6px 0 rgba(33,25,18,.55),0 12px 24px rgba(20,35,42,.35); }
.mecha-panel strong { display:block; margin-bottom:6px; text-align:center; font-size:.8rem; }
.mecha-panel div { display:flex; gap:5px; margin-top:5px; }
.mecha-panel button { flex:1; min-height:31px; border:2px solid #271e18; border-radius:8px; color:#2f291b; background:#f4d875; font-size:.7rem; font-weight:1000; cursor:pointer; }
.mecha-panel button[aria-pressed="true"] { outline:3px solid #8cf2ff; background:#fff4b4; }
.mecha-panel button:disabled { opacity:.45; cursor:not-allowed; }
.charm-effect { color:#ff9ddd; text-shadow:0 0 8px #8c2664; }
.sun-token { position: absolute; z-index: 8; width: 48px; height: 48px; transform: translate(-50%,-50%); border: 3px solid #ce8623; border-radius: 50%; color:#815112; background: radial-gradient(circle at 35% 30%,#fff9b0 0 16%,#f6d24b 17% 58%,#e8a528 59%); box-shadow: 0 0 0 5px rgba(255,226,94,.35),0 5px 0 rgba(84,70,32,.3); font-size:1.3rem; font-weight:1000; cursor:pointer; animation: sun-float 1.8s ease-in-out infinite; pointer-events:auto; }
.sun-token small { display:block; margin-top:-6px; font-size:.62rem; }
.game-overlay { position: absolute; z-index: 20; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(28,52,29,.48); backdrop-filter: blur(2px); }
.game-overlay.is-visible { display: grid; }
.start-panel,.pause-panel,.result-panel,.panel { width: min(480px, 78%); padding: 24px 28px 22px; border: 4px solid var(--wood-dark); border-radius: 22px; background: rgba(255, 244, 200, .97); box-shadow: 0 10px 0 rgba(59,36,24,.55), 0 24px 50px rgba(31,49,25,.32); text-align: center; }
.start-kicker { display: inline-block; padding: 5px 10px; border-radius: 99px; color: #fff; background: var(--danger); font-size: .75rem; font-weight: 1000; letter-spacing: .1em; }
.start-kicker--warning { background: #a13d2d; }
.start-panel h2,.pause-panel h2,.result-panel h2,.panel h2 { margin: 10px 0 8px; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.start-panel p,.pause-panel p,.result-panel p,.panel p { max-width: 390px; margin: 0 auto 16px; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
.reward-card { margin:12px auto 18px; padding:12px; border:3px solid #a1682f; border-radius:15px; background:#fff0a6; font-weight:1000; }
.start-panel small { display: block; margin-top: 15px; color: #6a7254; font-weight: 800; }
.dialog-actions { display:flex; justify-content:center; gap:12px; }
.wood-button--ghost { color: var(--ink); background: #e4d394; }
.game-footer { min-height: 44px; display: flex; align-items: center; gap: 18px; padding: 7px 14px; color: #f4f1c5; background: #284b2a; font-size: .82rem; font-weight: 800; }
kbd { padding: 2px 6px; border: 1px solid #d8e9b4; border-radius: 5px; background: #172d19; box-shadow: 0 2px 0 #0d1d0e; font: inherit; }
.status-pill { margin-left: auto; padding: 5px 10px; border-radius: 99px; color: #18391b; background: #bce57c; }
.status-pill.is-error { color:#fff; background:#ad3f2c; }
.status-pill.is-warning { color:#4b2b15; background:#f1ba3f; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes mine-arming { 0%,100% { transform:translateY(7px) rotate(-2deg) scale(.82); } 50% { transform:translateY(5px) rotate(2deg) scale(.88); } }
@keyframes mine-ready { 0%,100% { transform:translateY(1px) rotate(-3deg); } 50% { transform:translateY(-3px) rotate(3deg); } }
@keyframes chomper-bite { 0%,100% { transform:translateX(0) rotate(-3deg) scale(1); } 50% { transform:translateX(12px) rotate(7deg) scale(1.12); } }
@keyframes chomper-chew { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(3px) scale(.92,1.08); } }
@keyframes boxer-punch { 0%,100% { transform:translateX(0) rotate(-4deg); } 45% { transform:translateX(13px) rotate(8deg) scale(1.08); } 55% { transform:translateX(-3px) rotate(-8deg); } }
@keyframes zombie-shuffle { 0%,100% { transform:translate(0,0) rotate(-4deg); } 25% { transform:translate(-3px,-3px) rotate(2deg); } 50% { transform:translate(-6px,1px) rotate(5deg); } 75% { transform:translate(-3px,-2px) rotate(-1deg); } }
@keyframes zombie-stomp { 0%,100% { transform:translate(0,0) rotate(-3deg); } 45% { transform:translate(-8px,-4px) rotate(2deg); } 55% { transform:translate(-8px,3px) rotate(4deg); } }
@keyframes zombie-scuttle { 0%,100% { transform:translate(0,0) rotate(-7deg); } 35% { transform:translate(-6px,-4px) rotate(7deg); } 70% { transform:translate(-10px,1px) rotate(-2deg); } }
@keyframes zombie-bite { from { transform:translateX(0) rotate(-2deg); } to { transform:translateX(-9px) rotate(-7deg) scale(1.04); } }
@keyframes plant-zombie-fire { 0%,100% { transform:translateX(0) scale(1); } 45% { transform:translateX(-7px) scale(1.12,.91); } }
@keyframes plant-zombie-chomp { 0%,100% { transform:translateX(0) rotate(0); } 50% { transform:translateX(-12px) rotate(-12deg) scale(1.14); } }
@keyframes plant-zombie-chew { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(2px) scale(.9,1.08); } }
@keyframes plant-zombie-punch { 0%,100% { transform:translateX(0) rotate(0); } 55% { transform:translateX(-10px) rotate(-9deg) scale(1.1); } }
@keyframes plant-zombie-heal { from { filter:brightness(1); transform:scale(.9); } 50% { filter:brightness(1.65) drop-shadow(0 0 10px #caff80); transform:scale(1.15); } to { filter:brightness(1); transform:scale(1); } }
@keyframes plant-zombie-mine-ready { 0%,100% { transform:translateY(1px) rotate(-4deg); } 50% { transform:translateY(-2px) rotate(4deg) scale(1.05); } }
@keyframes zombie-heal { from { opacity:.9; transform:translate(-50%,-30%) scale(.55); } to { opacity:0; transform:translate(-50%,-110%) scale(1.35); } }
@keyframes sun-float { 0%,100% { margin-top:0; } 50% { margin-top:-8px; } }
@keyframes mower-rattle { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-2px) rotate(2deg); } }
@keyframes fire-pulse { from { filter:brightness(.92); } to { filter:brightness(1.25); } }
@keyframes imp-land { from { transform:translate(120px,-55px) rotate(-25deg); } to { transform:translate(0,0) rotate(0); } }
@keyframes mine-blast { from { transform:scale(.35) rotate(-12deg); opacity:.2; } 45% { transform:scale(1.65) rotate(8deg); opacity:1; } to { transform:scale(2.05) rotate(18deg); opacity:0; } }
@keyframes squash-windup { from { transform:scale(1); } to { transform:scale(1.16,.68) translateY(16%); } }
@keyframes squash-airborne { from { transform:translateY(8%) scale(1.1,.75); } 55% { transform:translateY(-62%) scale(.92,1.14); } to { transform:translateY(-20%) scale(1.08,.9); } }
@keyframes rapid-recoil { from { transform:translateX(0) rotate(0); } 45% { transform:translateX(-8%) rotate(-4deg); } to { transform:translateX(0) rotate(0); } }
@keyframes manhole-digest { 50% { transform:scale(.78,1.12); filter:drop-shadow(0 0 10px #57d6ff); } }
@keyframes combat-pop { from { transform:translate(-50%,-50%) scale(.35); opacity:.25; } 55% { transform:translate(-50%,-75%) scale(1.35); opacity:1; } to { transform:translate(-50%,-110%) scale(.8); opacity:0; } }
@keyframes elite-trail { from { transform:translateX(0); opacity:.55; } to { transform:translateX(-75%); opacity:0; } }
@keyframes dinosaur-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }
@keyframes dinosaur-kick { 0%,100% { transform:translateX(0) rotate(0); } 40% { transform:translateX(-12px) rotate(-10deg); } 75% { transform:translateX(9px) rotate(6deg); } }
@keyframes portal-spin { to { transform:rotate(360deg); } }
@keyframes boomerang-return { from { left:var(--from-left); top:var(--from-top); transform:translate(-50%,-50%) rotate(0); opacity:1; } to { left:var(--to-left); top:var(--to-top); transform:translate(-50%,-50%) rotate(-720deg); opacity:0; } }

@media (max-width: 1120px) {
  .page-shell { width: min(1000px, calc(100vw - 24px)); }
  .seed-card { flex-basis:116px; }
  .battlefield-wrap { min-height: 365px; }
  .game-footer { gap: 12px; }
  .home-scene { padding-top:14px; padding-bottom:16px; }
  .home-header { margin-bottom:12px; }
  .mode-map { gap:12px; }
  .mode-card { min-height:118px; padding:14px; }
  .mode-card--boss,.mode-card--dinosaur { min-height:96px; }
  .encyclopedia-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .encyclopedia-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  body { min-width:320px; }
  .page-shell { width:calc(100vw - 16px); margin:0 auto; padding:calc(8px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom)); }
  .home-scene { min-height:100svh; padding:10px 2px 18px; }
  .home-header { align-items:center; gap:8px; margin-bottom:12px; }
  .home-header h1 { max-width:none; font-size:clamp(2rem,9vw,3rem); line-height:1; }
  .record-plaque { min-width:78px; padding:6px 9px; border-width:3px; border-radius:13px; }
  .record-plaque span { font-size:.62rem; }
  .record-plaque strong { font-size:1.35rem; }
  .storage-notice { padding:8px 10px; font-size:.82rem; }
  .mode-map { grid-template-columns:1fr; gap:9px; }
  .mode-card,.mode-card--challenge,.mode-card--saving,.mode-card--boss,.mode-card--dinosaur { min-height:94px; grid-template-columns:58px minmax(0,1fr); gap:5px 10px; padding:10px 12px; border-width:3px; border-radius:17px; }
  .mode-art { width:52px; height:52px; border-radius:15px; font-size:2rem; }
  .mode-card b { font-size:1.16rem; }
  .mode-card small { margin-top:3px; font-size:.72rem; }
  .mode-card em { padding:3px 9px; font-size:.78rem; }
  .new-challenge-button { margin-top:0; min-height:44px; }
  .home-encyclopedia { margin-top:18px; padding:14px 11px; border-width:3px; border-radius:18px; }
  .encyclopedia-header { align-items:stretch; flex-direction:column; gap:12px; margin-bottom:12px; }
  .encyclopedia-header h2 { font-size:1.7rem; }
  .encyclopedia-hint { font-size:.8rem; }
  .encyclopedia-switch { width:100%; gap:5px; padding:4px; border-radius:13px; }
  .encyclopedia-choice { flex:1 1 0; min-width:0; min-height:44px; padding:7px 6px; font-size:.86rem; }
  .encyclopedia-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .encyclopedia-card { grid-template-columns:37px minmax(0,1fr); gap:6px 7px; min-height:158px; padding:9px 8px; border-radius:13px; }
  .encyclopedia-icon { width:36px; height:36px; border-radius:11px; font-size:1.3rem; }
  .encyclopedia-title-group h3 { font-size:.89rem; line-height:1.18; }
  .encyclopedia-stat { margin-top:4px; font-size:.7rem; }
  .encyclopedia-description { font-size:.75rem; line-height:1.4; }
  .game-scene { padding-bottom:4px; }
  .masthead { align-items:center; gap:8px; margin-bottom:8px; padding:0 2px; }
  .game-scene .masthead h1 { font-size:clamp(1.25rem,6vw,1.7rem); letter-spacing:-.05em; }
  .eyebrow { font-size:.62rem; letter-spacing:.1em; }
  .header-actions { flex:0 0 auto; gap:7px; }
  .icon-button { width:44px; height:44px; }
  .wood-button--small { min-height:44px; padding:7px 9px; font-size:.76rem; }
  .game-frame { border-width:3px; border-radius:16px; }
  .seed-bank { display:grid; grid-template-columns:minmax(54px,auto) 44px 44px minmax(68px,1fr); grid-template-areas:"sun shovel drop wave" "cards cards cards cards" "nut nut nut nut"; gap:6px; min-height:0; padding:8px; border-bottom-width:3px; }
  .sun-bank { grid-area:sun; min-width:0; width:100%; height:48px; gap:3px; border-width:2px; border-radius:10px; font-size:1rem; }
  .sun-icon { font-size:1.2rem; }
  .sun-bank strong { font-size:1.05rem; }
  .shovel-button { grid-area:shovel; width:44px; min-width:44px; height:48px; padding:3px; border-width:2px; border-radius:9px; font-size:1.16rem; }
  .shovel-button small { font-size:.54rem; }
  .water-drop-button { grid-area:drop; width:44px; min-width:44px; }
  .card-scroller { grid-area:cards; width:100%; min-width:0; gap:6px; padding:4px 3px 8px; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
  .seed-card { flex-basis:108px; width:108px; min-height:60px; height:64px; scroll-snap-align:start; }
  .wave-meter { grid-area:wave; display:flex; min-width:0; margin:0; padding:2px; align-self:center; flex-direction:column; justify-content:center; }
  .wave-meta { gap:4px; margin-bottom:4px; font-size:.61rem; }
  .wave-meta span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wave-track { height:12px; }
  .nut-belt { grid-area:nut; overflow-x:auto; gap:7px; padding:6px 8px; touch-action:pan-x; }
  .nut-card { flex:0 0 48px; width:48px; height:48px; }
  .battlefield-wrap { grid-template-columns:38px minmax(0,1fr); min-height:clamp(260px,56svh,380px); }
  .lane-tools { border-right-width:2px; }
  .mower { width:34px; height:40px; font-size:1.55rem; }
  .lawn { min-width:0; touch-action:manipulation; }
  .glyph-unit { font-size:clamp(1.35rem,6vw,2.15rem); }
  .glyph-unit.is-superMechaPea { touch-action:none; }
  .zombie-glyph { font-size:clamp(1.35rem,6vw,2.1rem); }
  .zombie-glyph.is-giant { font-size:clamp(1.9rem,8vw,3rem); }
  .plant-zombie-body { font-size:clamp(1.65rem,7vw,2.55rem); }
  .mecha-panel { left:50% !important; top:50% !important; width:min(250px,calc(100vw - 40px)); transform:translate(-50%,-50%); padding:8px; }
  .mecha-panel button { min-height:44px; font-size:.72rem; }
  .game-overlay { padding:10px; }
  .panel,.start-panel,.pause-panel,.result-panel { width:min(480px,calc(100% - 8px)); padding:18px 14px 16px; border-width:3px; border-radius:18px; }
  .panel h2,.start-panel h2,.pause-panel h2,.result-panel h2 { font-size:1.55rem; }
  .panel p,.start-panel p,.pause-panel p,.result-panel p { margin-bottom:12px; font-size:.86rem; }
  .dialog-actions { flex-wrap:wrap; gap:8px; }
  .wood-button { min-height:44px; padding:9px 13px; }
  .game-footer { flex-wrap:wrap; gap:7px 12px; padding:8px 10px; font-size:.7rem; }
  .status-pill { margin-left:0; }
}

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