:root {
  color-scheme: light;
  --ink: #26314a;
  --muted: #69758a;
  --paper: #fffdf7;
  --line: #d9cfaa;
  --sun: #f8c95c;
  --orange: #ef7b48;
  --pink: #ed7b93;
  --teal: #28a9a6;
  --grass: #a7d86e;
  --blue: #78c7f1;
  --violet: #9b7ae8;
  --gold: #f4c542;
  --shadow: 0 10px 26px rgba(39, 48, 69, .16);
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(120, 199, 241, .36), transparent 260px),
    radial-gradient(circle at 12% 8%, rgba(248, 201, 92, .38) 0 80px, transparent 82px),
    #eef6e7;
  color: var(--ink);
}
button, select { font: inherit; }
.page-shell { width: min(1540px, calc(100% - 26px)); margin: 0 auto; padding-bottom: 34px; }

.topbar { min-height: 70px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(91, 132, 128, .22); }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--sun); box-shadow: 3px 4px 0 #cf9636; font-size: 25px; transform: rotate(-4deg); }
.brand strong { display: block; font-size: 15px; letter-spacing: .08em; }
.brand small { display: block; margin-top: 1px; color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.topbar-copy { flex: 1; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; gap: 8px; }

.button { border: 0; border-radius: 8px; padding: 10px 13px; cursor: pointer; color: var(--ink); font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-quiet { background: #fffdf7; box-shadow: 0 3px 0 #d7c79b; font-size: 13px; }
.button-primary { width: 100%; color: #fff; background: linear-gradient(135deg, #ef7b48, #e84f68); box-shadow: 0 5px 0 #bb3c51; }
.button-pause { margin-left: auto; padding: 8px 10px; background: #e7f4f2; color: #316b6b; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(55, 126, 122, .18); }
.button-home { padding: 8px 10px; background: #fff7de; color: #805c2c; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(128, 92, 44, .18); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); align-items: center; min-height: 218px; overflow: hidden; padding: 26px 5% 8px; }
.eyebrow { margin: 0 0 8px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.hero h1 { margin: 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.06; letter-spacing: 0; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-purpose { display: inline-flex; align-items: center; gap: 8px; margin: 13px 0 0; padding: 6px 10px; border: 1px solid #e7b65d; border-radius: 999px; background: #fff8df; color: #80552b; font-size: 11px; }
.hero-purpose strong { color: #d65f40; font-size: 12px; }
.hero-purpose span { padding-left: 8px; border-left: 1px solid #e7c987; }
.hero-copy { max-width: 620px; margin: 15px 0 0; color: #536176; line-height: 1.75; font-size: 14px; }
.hero-alpacas { position: relative; align-self: stretch; min-height: 178px; overflow: hidden; }
.hero-cloud { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .74); }
.cloud-one { width: 150px; height: 38px; top: 30px; right: 4%; }
.cloud-two { width: 102px; height: 24px; bottom: 32px; left: 4%; }
.hero-alpaca { position: absolute; z-index: 1; display: block; width: clamp(82px, 10vw, 132px); height: auto; filter: drop-shadow(0 13px 2px rgba(65, 73, 59, .16)); transform-origin: 48% 100%; animation: hero-bob 2.6s ease-in-out infinite; }
.hero-alpaca-one { right: 18%; bottom: 10px; transform: rotate(-5deg); }
.hero-alpaca-two { right: 48%; bottom: 22px; width: clamp(58px, 7vw, 94px); animation-delay: -1s; transform: rotate(6deg) scaleX(-1); }
.hero-spark { position: absolute; color: var(--sun); font-size: 27px; font-weight: bold; animation: twinkle 1.8s ease-in-out infinite; }
.spark-one { top: 33px; right: 6%; }.spark-two { right: 62%; bottom: 24px; animation-delay: -.8s; }
@keyframes hero-bob { 50% { translate: 0 -9px; rotate: 2deg; } }
@keyframes twinkle { 50% { scale: 1.35; opacity: .45; } }

.game-layout { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(560px, 2.15fr) minmax(230px, .78fr); gap: 14px; align-items: start; }
.side-panel, .battle-panel { border: 1px solid rgba(76, 117, 107, .22); border-radius: 8px; background: rgba(255, 253, 247, .92); box-shadow: var(--shadow); }
.side-panel { padding: 13px; }
.roster-panel { display: flex; height: var(--stage-panel-height, auto); min-height: 0; box-sizing: border-box; flex-direction: column; }
.panel-heading { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px dashed #c8bf9c; }
.panel-heading span { font-size: 16px; font-weight: 900; }
.panel-heading small { color: var(--muted); font-size: 11px; }
.roster-scroll-hint { display: none; }

.roster { display: grid; flex: 1 1 auto; gap: 8px; min-height: 0; margin: 12px 0; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.alpaca-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 8px; width: 100%; min-height: 72px; padding: 8px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #fffaf0; text-align: left; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.alpaca-card:hover { transform: translateX(3px); }
.alpaca-card.selected { border-color: var(--orange); background: #fff0d8; }
.alpaca-card h3 { margin: 1px 0 1px; font-size: 12px; }
.alpaca-card p { margin: 0 32px 0 0; color: var(--muted); font-size: 10px; line-height: 1.32; }
.alpaca-card .cost { position: absolute; right: 7px; bottom: 5px; color: #a26b25; font-size: 10px; font-weight: 900; }
.type-pill { display: inline-block; margin-bottom: 2px; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.type-pill.moving { color: var(--teal); }.type-pill.stationary { color: var(--orange); }
.legend { margin-top: 13px; padding-top: 9px; border-top: 1px dashed #c8bf9c; color: #667184; font-size: 10px; line-height: 1.55; }
.legend p { margin: 7px 0; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 99px; }
.legend-dot.stationary { background: var(--orange); }.legend-dot.moving { background: var(--teal); }

.battle-panel { position: relative; min-width: 0; padding: 10px; }
.hud { display: flex; align-items: center; gap: 6px; padding: 0 2px 9px; flex-wrap: wrap; }
.hud-item { display: grid; gap: 1px; min-width: 70px; }
.hud-item span { color: #707c83; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.hud-item strong { color: var(--ink); font-size: 13px; min-height: 18px; }
.hud-item.stage strong { color: #277b7b; }
.hud-item.core { min-width: 112px; }
.hud-item.core strong { display: flex; gap: 1px; white-space: nowrap; }
.hud-item.core .empty { filter: grayscale(1); opacity: .28; }
.hud-item.hay strong { color: #a97018; }
.hud-item.fluff strong { color: #9d55b7; }
.battle-caption { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; padding: 8px 10px; border-radius: 8px 8px 0 0; background: #2f5262; color: #eff8ea; font-size: 11px; }
.battle-caption span:last-child { color: #bde2ad; white-space: nowrap; }

.board-wrap { position: relative; overflow: hidden; aspect-ratio: 17 / 13; min-height: 405px; border: 5px solid #2f5262; border-top: 0; border-radius: 0 0 8px 8px; background: #cfe8b4; }
.board { --cols: 17; --rows: 13; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); width: 100%; height: 100%; }
.cell { position: relative; min-width: 0; border: 0; border-right: 1px solid rgba(50, 100, 73, .14); border-bottom: 1px solid rgba(50, 100, 73, .14); background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 54%); cursor: crosshair; }
.theme-meadow .cell { background-color: #bfe38e; }
.theme-forest .cell { background-color: #a9dc8f; }
.theme-beach .cell { background-color: #efd89c; }
.theme-mountain .cell { background-color: #b9d4b5; }
.theme-town .cell { background-color: #d9d6ba; }
.cell:nth-child(4n) { filter: saturate(1.04); }
.cell:hover { outline: 2px solid rgba(239, 123, 72, .82); outline-offset: -2px; z-index: 1; }
.cell.core-cell { background-color: rgba(246, 194, 89, .55); cursor: not-allowed; }
.cell.spawn-cell { background-color: rgba(117, 187, 149, .48); font-size: 8px; font-weight: 900; color: #2e6d68; }
.cell.obstacle { cursor: not-allowed; color: #384d3d; font-weight: 900; }
.cell.tree { background-color: rgba(76, 151, 80, .38); }
.cell.rock { background-color: rgba(111, 118, 105, .34); }
.cell.fence { background-color: rgba(174, 119, 68, .28); }
.cell.shell { background-color: rgba(255, 255, 255, .32); }
.cell.crate { background-color: rgba(180, 139, 87, .32); }
.cell .terrain { position: absolute; inset: 0; display: grid; place-items: center; opacity: .72; font-size: clamp(8px, 1.1vw, 14px); pointer-events: none; }

.entity-layer, .battle-effects { position: absolute; inset: 0; pointer-events: none; }
.placement-actions { position: absolute; z-index: 14; right: 8px; bottom: 8px; display: flex; gap: 5px; padding: 5px; border: 1px solid rgba(47, 82, 98, .24); border-radius: 8px; background: rgba(255, 253, 247, .92); box-shadow: 0 4px 14px rgba(39, 52, 69, .2); }
.placement-actions.hidden { display: none; }
.placement-actions .button { min-width: 54px; padding: 6px 9px; font-size: 11px; }
.path-pip { position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.64); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(62, 113, 75, .12); }
.range-circle { position: absolute; z-index: 1; border: 2px solid color-mix(in srgb, var(--range, #ef7b48), white 18%); border-radius: 50%; background: color-mix(in srgb, var(--range, #ef7b48), transparent 86%); transform: translate(-50%, -50%); opacity: .48; }

.warehouse { position: absolute; z-index: 4; width: 7.8%; aspect-ratio: 1.05; transform: translate(-50%, -58%); }
.warehouse-roof { position: absolute; left: 10%; top: 2%; width: 80%; height: 30%; background: #d95143; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 2px 0 rgba(84, 44, 38, .18)); }
.warehouse-body { position: absolute; left: 15%; top: 29%; width: 70%; height: 48%; border: 3px solid #78492e; border-radius: 5px; background: #f6c779; box-shadow: inset 4px 0 0 rgba(255,255,255,.28); }
.warehouse-door { position: absolute; left: 43%; top: 48%; width: 16%; height: 28%; border-radius: 4px 4px 0 0; background: #865434; }
.warehouse-carrots { position: absolute; left: 50%; bottom: -12%; display: flex; gap: 0; padding: 1px 3px; border-radius: 999px; background: rgba(255,255,255,.88); transform: translateX(-50%); font-size: clamp(8px, 1vw, 13px); white-space: nowrap; }
.warehouse-carrots .empty { filter: grayscale(1); opacity: .24; }

.unit { position: absolute; z-index: 5; display: grid; place-items: center; width: calc(100% / var(--cols, 17) * 1.18); height: calc(100% / var(--rows, 13) * 1.5); transform: translate(-50%, -50%); will-change: left, top; }
.unit .unit-shadow { position: absolute; z-index: -1; bottom: 10%; width: 62%; height: 14%; border-radius: 50%; background: rgba(39, 69, 46, .24); filter: blur(1px); }
.alpaca-sprite { position: relative; width: 88%; height: 88%; filter: drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); transform-origin: 50% 78%; animation: idle-bob 1.65s ease-in-out infinite; }
.alpaca-body { position: absolute; left: 18%; bottom: 15%; width: 62%; height: 42%; border: 3px solid var(--outline); border-radius: 48% 44% 42% 46%; background: var(--fur); box-shadow: inset 4px 3px 0 rgba(255,255,255,.55); }
.alpaca-tail { position: absolute; left: 8%; bottom: 36%; width: 18%; height: 18%; border: 3px solid var(--outline); border-radius: 50%; background: var(--fur); }
.alpaca-neck { position: absolute; left: 52%; bottom: 43%; width: 20%; height: 36%; border: 3px solid var(--outline); border-bottom: 0; border-radius: 42% 42% 20% 20%; background: var(--fur); transform: rotate(-4deg); }
.alpaca-head { position: absolute; left: 48%; top: 5%; width: 42%; height: 36%; border: 3px solid var(--outline); border-radius: 45% 48% 42% 46%; background: var(--fur); box-shadow: inset 3px 2px 0 rgba(255,255,255,.55); }
.alpaca-ear { position: absolute; top: -29%; width: 22%; height: 32%; border: 3px solid var(--outline); border-bottom: 0; border-radius: 70% 70% 20% 20%; background: var(--fur); }
.alpaca-ear.left { left: 10%; transform: rotate(-15deg); }
.alpaca-ear.right { right: 9%; transform: rotate(14deg); }
.alpaca-eyes::before, .alpaca-eyes::after { position: absolute; top: 39%; width: 4px; height: 4px; border-radius: 50%; background: #2e2e36; content: ""; }
.alpaca-eyes::before { left: 31%; }.alpaca-eyes::after { right: 30%; }
.alpaca-mouth { position: absolute; left: 50%; top: 58%; width: 16%; height: 5px; border-bottom: 2px solid #4a3b35; border-radius: 0 0 99px 99px; transform: translateX(-50%); transition: height .12s, background .12s; }
.mouth-open .alpaca-mouth { height: 13px; border: 2px solid #4a3b35; border-top: 0; background: #5e3540; }
.alpaca-leg { position: absolute; bottom: 2%; width: 9%; height: 23%; border: 3px solid var(--outline); border-top: 0; border-radius: 0 0 8px 8px; background: var(--fur); }
.alpaca-leg.front { left: 54%; }.alpaca-leg.back { left: 30%; }
.badge { position: absolute; z-index: 3; top: -10%; right: -4%; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #6f5047; border-radius: 50%; background: #fff9d4; color: #58433b; font-size: 10px; font-weight: 900; }
.level-tag { position: absolute; bottom: -7%; left: 50%; translate: -50%; padding: 1px 4px; border-radius: 6px; background: #314965; color: #fff; font-size: 7px; font-weight: 900; white-space: nowrap; }
.unit.moving .alpaca-sprite { animation: walk-bob .46s ease-in-out infinite alternate; }
.unit.selected .alpaca-sprite { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 7px var(--accent)); }
.unit.attacking.attack-spit .alpaca-head { animation: mouth-pop .32s ease-out 1; }
.unit.attacking.attack-charge .alpaca-sprite { animation: charge-pop .32s ease-out 1; }
.unit.attacking.attack-paw .alpaca-leg.front { animation: paw-slap .32s ease-out 1; }
.unit.attacking.attack-kick .alpaca-leg.back { animation: kick-up .34s ease-out 1; }
.unit.level-2 .alpaca-body, .unit.level-2 .alpaca-head, .unit.level-2 .alpaca-neck, .unit.level-2 .alpaca-tail, .unit.level-2 .alpaca-leg { border-width: 4px; }
.unit.level-3 .alpaca-body { background: linear-gradient(135deg, #fff8cf, var(--fur)); }
.unit.level-3 .badge { background: #fff0a6; }
@keyframes idle-bob { 50% { translate: 0 -2px; } }
@keyframes walk-bob { 100% { translate: 0 -4px; rotate: 3deg; } }
@keyframes mouth-pop { 50% { translate: 2px 1px; scale: 1.08 .9; } }
@keyframes charge-pop { 50% { translate: 6px 0; scale: 1.16 .92; } }
@keyframes paw-slap { 50% { rotate: -35deg; translate: 8px -4px; } }
@keyframes kick-up { 50% { rotate: 42deg; translate: -5px -7px; } }

.mini-alpaca { position: relative; display: block; width: 42px; height: 42px; }
.mini-body { position: absolute; left: 4px; bottom: 7px; width: 27px; height: 19px; border: 2px solid var(--outline); border-radius: 13px; background: var(--fur); }
.mini-neck { position: absolute; left: 24px; bottom: 22px; width: 9px; height: 14px; border: 2px solid var(--outline); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--fur); }
.mini-head { position: absolute; right: 2px; top: 3px; width: 18px; height: 17px; border: 2px solid var(--outline); border-radius: 8px; background: var(--fur); }
.mini-head span::before, .mini-head span::after { position: absolute; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: #303038; content: ""; }
.mini-head span::before { left: 5px; }.mini-head span::after { right: 5px; }

.unit.enemy { z-index: 4; width: calc(100% / var(--cols, 17) * 1.05); height: calc(100% / var(--rows, 13) * 1.25); }
.enemy.boss { width: calc(100% / var(--cols, 17) * 1.55); height: calc(100% / var(--rows, 13) * 1.8); }
.enemy-sprite { display: grid; place-items: center; width: 76%; aspect-ratio: 1; border: 3px solid #554551; border-radius: 45% 55% 45% 50%; background: var(--enemy); box-shadow: inset 4px 4px 0 rgba(255,255,255,.25), 2px 3px 0 rgba(69,52,68,.2); transform: rotate(-6deg); }
.enemy.dash .enemy-sprite { border-radius: 60% 45% 60% 45%; }
.enemy.stone .enemy-sprite { border-radius: 38% 48% 42% 46%; }
.enemy.boss .enemy-sprite { border-width: 4px; border-radius: 42% 50% 45% 50%; }
.enemy-face { color: rgba(255,255,255,.92); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.enemy-hp { position: absolute; top: 3%; width: 64%; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(78, 44, 64, .35); }
.enemy-hp > span { display: block; height: 100%; background: #f6e175; }

.projectile { position: absolute; z-index: 9; width: 10px; height: 10px; border: 2px solid #62a8a8; border-radius: 50%; background: #dff8ff; box-shadow: 0 1px 0 rgba(68,46,41,.23); transition: left .28s linear, top .28s linear; transform: translate(-50%, -50%); }
.projectile.spit::after { position: absolute; right: -6px; top: 2px; width: 7px; height: 4px; border-radius: 50%; background: rgba(223, 248, 255, .65); content: ""; }
.hit-flash { position: absolute; z-index: 10; transform: translate(-50%, -50%); pointer-events: none; }
.hit-flash { color: #fff8bc; font-size: 20px; font-weight: 900; animation: pop-fade .48s ease-out forwards; }
@keyframes pop-fade { to { translate: 0 -18px; opacity: 0; scale: 1.25; } }

.battle-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.selected-card, .event-log { min-height: 66px; padding: 9px 10px; border-radius: 8px; background: #edf4e2; }
.selected-card { display: flex; align-items: center; gap: 9px; }
.selected-card h3 { margin: 0 0 3px; font-size: 12px; }
.selected-card p, .event-log { margin: 0; color: #647084; font-size: 10px; line-height: 1.42; }
.event-log { overflow: auto; max-height: 82px; background: #fffaf0; }

.learning-card { margin: 12px 0; padding: 12px; border-radius: 8px; background: linear-gradient(160deg, #e6f4d1, #fff6d7); }
.learning-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #427a78; color: #fff; font-weight: 900; }
.learning-card h2 { margin: 9px 0 5px; font-size: 16px; line-height: 1.22; }
.learning-card p { margin: 0; color: #506676; font-size: 11px; line-height: 1.65; }
.learning-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.learning-controls label { display: grid; gap: 4px; color: #667184; font-size: 10px; font-weight: 900; }
.learning-controls select { width: 100%; border: 1px solid #d8c99e; border-radius: 8px; background: #fffdf7; color: var(--ink); padding: 7px 8px; font-size: 12px; }
.smart-mode-notice { display: grid; gap: 3px; margin: -3px 0 12px; padding: 9px 10px; border: 1px solid #a9cdb5; border-radius: 9px; background: #edf8e9; color: #456c62; font-size: 10px; line-height: 1.45; }
.smart-mode-notice strong { font-size: 11px; }
.smart-mode-notice span { display: block; }
.smart-mode-notice.is-random { border-color: #d8c99e; background: #fffaf0; color: #6f7480; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; border: 1px solid #d8c99e; border-radius: 8px; overflow: hidden; }
.mini-stats div { display: grid; place-items: center; gap: 3px; padding: 9px 3px; border-right: 1px solid #d8c99e; background: #fffdf4; }
.mini-stats div:last-child { border: 0; }
.mini-stats span { color: #89919b; font-size: 9px; }
.mini-stats strong { color: #e06951; font-size: 18px; }
.hint { margin: 12px 3px 0; color: #778291; font-size: 10px; line-height: 1.45; }

.identity-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 0; padding: 12px 16px; border-radius: 8px; color: #56657a; background: rgba(255,255,255,.52); font-size: 12px; }
.identity-strip p { margin: 0; font-weight: 800; }
.identity-strip div { display: flex; flex-wrap: wrap; gap: 7px; }
.identity-strip span { padding: 4px 7px; border: 1px solid #cfd6ae; border-radius: 999px; color: #39766f; background: #f8fff1; font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(39, 52, 69, .54); backdrop-filter: blur(4px); }
.modal-backdrop.hidden { display: none; }
.modal { width: min(650px, 100%); max-height: min(760px, 93vh); overflow: auto; padding: 24px; border: 2px solid #f8de94; border-radius: 8px; background: #fffdf7; box-shadow: 0 22px 70px rgba(25,33,46,.35); }
.modal .modal-kicker { margin: 0 0 6px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.modal h2 { margin: 0; font-size: clamp(22px, 4.5vw, 34px); line-height: 1.22; letter-spacing: 0; }
.modal .question-note { margin: 13px 0 17px; color: #667386; font-size: 13px; line-height: 1.65; }
.answers { display: grid; gap: 9px; }
.answer-button { width: 100%; padding: 12px 13px; border: 2px solid #e1d4ad; border-radius: 8px; background: #fffaf0; color: #35425a; text-align: left; cursor: pointer; font-size: 14px; font-weight: 700; transition: border-color .14s, transform .14s, background .14s; }
.answer-button:hover { border-color: #ef9e65; transform: translateX(3px); }
.answer-button.correct { border-color: #4ba68c; background: #e4f6d9; }
.answer-button.wrong { border-color: #e6766e; background: #ffe8df; }
.answer-result { margin-top: 15px; padding: 12px; border-radius: 8px; background: #edf7e2; color: #426050; font-size: 13px; line-height: 1.62; }
.answer-result.wrong { background: #fff0e8; color: #8d5248; }
.answer-result div { margin-top: 8px; }
.answer-result span { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(66, 96, 80, .11); color: #2c655f; font-size: 10px; font-weight: 900; }
.answer-result details { margin-top: 8px; }
.answer-result summary { cursor: pointer; font-weight: 900; }
.answer-result ul { margin: 7px 0 0; padding-left: 18px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal .button { padding: 10px 15px; }
.modal.study-record-modal { width: min(780px, 100%); }
.study-record-copy { margin: 9px 0 15px; color: #637286; font-size: 13px; line-height: 1.55; }
.study-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d9c993; border-radius: 12px; background: #fffaf0; }
.study-summary-grid div { display: grid; gap: 2px; min-height: 88px; padding: 11px 8px; border-right: 1px solid #e7dab4; background: linear-gradient(160deg, rgba(232, 246, 215, .85), rgba(255, 250, 240, .9)); text-align: center; }
.study-summary-grid div:last-child { border-right: 0; }
.study-summary-grid span, .study-summary-grid small { color: #778493; font-size: 10px; font-weight: 800; }
.study-summary-grid strong { color: #dc7653; font-size: 23px; line-height: 1.15; }
.study-record-section { margin-top: 14px; padding: 13px; border: 1px solid #e2d5ae; border-radius: 12px; background: linear-gradient(155deg, #fffdf5, #f2f8e8); }
.study-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.study-section-heading h3 { margin: 0; color: #385d58; font-size: 14px; }
.study-section-heading strong { color: #cf6f4e; font-size: 13px; }
.study-section-heading small, .study-record-section p { color: #728092; font-size: 10px; }
.study-record-section p { margin: 7px 0 0; line-height: 1.5; }
.study-meter { height: 9px; overflow: hidden; margin-top: 8px; border-radius: 999px; background: #e5ebd8; box-shadow: inset 0 1px 2px rgba(62, 86, 59, .14); }
.study-meter > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #87c965, #f1b960); box-shadow: inset 0 -1px 0 rgba(126, 82, 29, .18); }
.study-meter-main { height: 12px; }
.study-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.study-category-row { padding: 9px; border: 1px solid color-mix(in srgb, var(--study-color) 42%, #d5c79e); border-radius: 9px; background: #fffdf7; }
.study-category-heading { display: flex; justify-content: space-between; gap: 6px; color: #486271; font-size: 11px; font-weight: 900; }
.study-category-heading strong { color: #5b6d7b; font-size: 10px; white-space: nowrap; }
.study-category-row .study-meter { height: 6px; margin-top: 6px; }
.study-category-row .study-meter > span { background: var(--study-color); }
.study-category-row small { display: block; margin-top: 5px; color: #87919a; font-size: 9px; }
.study-subtype-details { margin-top: 9px; padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--study-color) 42%, #d7c99e); }
.study-subtype-details summary { cursor: pointer; color: #506f70; font-size: 10px; font-weight: 900; }
.study-subtype-list { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.study-subtype-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 7px; padding: 5px 6px; border-radius: 6px; background: color-mix(in srgb, var(--study-color) 7%, #fffdf7); color: #60707f; font-size: 9px; }
.study-subtype-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-subtype-list li b { display: inline-block; min-width: 26px; margin-right: 4px; color: var(--study-color); font-size: 9px; }
.study-subtype-list li strong { color: #667687; font-size: 9px; white-space: nowrap; }
.study-subtype-list li small { grid-column: 1 / -1; margin: 0; color: #8d959c; font-size: 8px; }
.study-review-list { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.study-review-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 9px; align-items: baseline; padding: 8px 9px; border-radius: 8px; background: rgba(255, 244, 218, .72); color: #526979; font-size: 11px; }
.study-review-list strong { color: #d26d55; font-size: 10px; }
.study-review-list small { grid-column: 1 / -1; color: #8a9299; font-size: 9px; }
.study-review-list .study-review-empty { display: block; color: #728392; line-height: 1.5; }
.how-list { padding-left: 22px; color: #59677a; line-height: 1.75; font-size: 13px; }
.how-list strong { color: #304b61; }
.modal.tutorial-modal { width: min(850px, 100%); }
.tutorial-lead { margin: 9px 0 15px; color: #637286; font-size: 13px; line-height: 1.55; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tutorial-card { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; border: 1px solid #ded2ad; border-radius: 11px; background: linear-gradient(150deg, #fffdf5, #f3f8e9); }
.tutorial-card > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #4f8580; color: #fff; font-size: 13px; font-weight: 900; }
.tutorial-card h3 { margin: 1px 0 5px; color: #385d58; font-size: 13px; }
.tutorial-card p { margin: 0; color: #637286; font-size: 10px; line-height: 1.55; }
.tutorial-card strong { color: #385d58; }
.tutorial-card.tutorial-smart { border-color: #9fc9ae; background: linear-gradient(150deg, #eaf7e4, #fff9df); }
.tutorial-card.tutorial-smart > span { background: #e68555; }
.tutorial-card.tutorial-toeic { grid-column: 1 / -1; border-color: #e7b65d; background: linear-gradient(150deg, #fff5cf, #f0f8e8); }
.tutorial-card.tutorial-toeic > span { background: #d96547; }
.tutorial-card.tutorial-wide { grid-column: 1 / -1; border-color: #edc976; background: #fff8df; }
.tutorial-modal .modal-footer { position: sticky; bottom: -24px; margin: 16px -24px -24px; padding: 12px 24px 18px; background: linear-gradient(transparent, #fffdf7 28%); }
.modal.feedback-modal { width: min(620px, 100%); } /* playtest feedback v1 */
.feedback-copy { margin: 10px 0 16px; color: #637286; font-size: 12px; line-height: 1.55; }
.feedback-ratings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feedback-ratings label, .feedback-reason { display: grid; gap: 6px; color: #48666b; font-size: 11px; font-weight: 900; }
.feedback-ratings label { padding: 10px; border: 1px solid #d9cda8; border-radius: 10px; background: #f6faed; }
.feedback-ratings select, .feedback-reason select { width: 100%; padding: 9px; border: 1px solid #cfc39d; border-radius: 8px; background: #fffdf7; color: #405968; }
.feedback-reason { margin-top: 12px; }
.feedback-error { margin: 9px 0 0; color: #c35f51; font-size: 11px; font-weight: 900; }
.modal.support-modal { width: min(620px, 100%); }
.support-form { display: grid; gap: 12px; }
.support-form label { display: grid; gap: 6px; color: #48666b; font-size: 11px; font-weight: 900; }
.support-form select, .support-form textarea, .support-form input { width: 100%; padding: 10px; border: 1px solid #cfc39d; border-radius: 8px; background: #fffdf7; color: #405968; font: inherit; font-weight: 500; }
.support-form textarea { min-height: 124px; resize: vertical; line-height: 1.55; }
.support-form label small { justify-self: end; color: #87919a; font-weight: 500; }
.support-privacy { margin: 0; color: #6f7b87; font-size: 10px; line-height: 1.55; }
.support-privacy a { color: #277b7b; }
.study-question-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; margin: 10px 0 0; padding: 0; list-style: none; }
.study-question-list li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: #fffaf0; color: #526979; font-size: 11px; line-height: 1.45; }
.study-question-list small { color: #87919a; font-size: 9px; }
.study-empty { grid-column: 1 / -1; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; max-width: min(430px, calc(100% - 30px)); padding: 11px 15px; border-radius: 8px; background: #304a63; color: #fff; box-shadow: 0 9px 23px rgba(36, 47, 61,.26); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-footer { display: flex; justify-content: center; gap: 18px; align-items: center; margin-top: 24px; color: #687888; font-size: 10px; }
.site-footer a, .site-footer button { border: 0; padding: 0; background: none; color: #3d7775; font: inherit; text-decoration: underline; cursor: pointer; }
.legal-page { min-height: 100vh; padding: 28px 14px; }
.legal-card { width: min(760px, 100%); margin: 0 auto; padding: clamp(22px, 5vw, 48px); border: 1px solid rgba(76, 117, 107, .22); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.legal-card h1 { margin: 0 0 18px; font-size: clamp(28px, 5vw, 42px); }
.legal-card h2 { margin: 28px 0 8px; color: #385d58; font-size: 17px; }
.legal-card p, .legal-card li { color: #59677a; font-size: 13px; line-height: 1.75; }
.legal-card .button { display: inline-block; margin-top: 14px; text-decoration: none; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(40, 169, 166, .55); outline-offset: 3px; }

.stage-gate { position: absolute; z-index: 14; left: 50%; top: 50%; width: min(690px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; transform: translate(-50%, -50%); pointer-events: auto; }
.stage-gate.hidden { display: none; }
.stage-gate-card { padding: 16px; border: 3px solid #f6c95d; border-radius: 14px; background: rgba(255, 253, 247, .97); box-shadow: 0 18px 50px rgba(36, 55, 57, .28); }
.stage-gate-kicker { margin: 0 0 5px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.stage-gate h2 { margin: 0 0 6px; font-size: 22px; }
.stage-gate p { margin: 0 0 12px; color: #657289; font-size: 12px; line-height: 1.55; }
.stage-gate .home-toeic-copy { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 8px 0 0; padding: 6px 9px; border: 1px solid #e7bd6b; border-radius: 8px; background: #fff8df; }
.home-toeic-copy strong { flex: 0 0 auto; color: #d65f40; }
.home-toeic-copy span { color: #6b685c; font-size: 10px; }
.stage-picker { display: grid; grid-template-columns: 100px minmax(240px, 1fr) 100px; gap: 16px; align-items: center; max-width: 570px; margin: 24px auto 0; }
.stage-button { display: grid; gap: 2px; padding: 8px 5px; border: 2px solid #d7c894; border-radius: 10px; background: linear-gradient(160deg, #fff7d7, #eef7df); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 #c8b676; }
.stage-button:hover:not(:disabled) { transform: translateY(-2px); }
.stage-button strong { font-size: 18px; line-height: 1; color: #cf7041; }
.stage-button span { font-size: 9px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-button small { color: #667184; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.stage-button.locked { filter: grayscale(1); opacity: .42; cursor: not-allowed; box-shadow: none; }
.stage-button-featured { place-items: center; min-height: 210px; padding: 28px 20px; border-width: 3px; border-radius: 22px; box-shadow: 0 10px 0 #c8b676, 0 18px 36px rgba(67, 91, 73, .2); }
.stage-button-featured small { color: #438074; font-size: 11px; letter-spacing: .08em; }
.stage-button-featured strong { font-size: clamp(32px, 6vw, 50px); }
.stage-button-featured span { overflow: visible; font-size: 17px; }
.stage-button-featured b { margin-top: 12px; padding: 8px 24px; border-radius: 999px; background: #e8784f; color: #fff; font-size: 13px; }
.stage-arrow { border: 0; background: transparent; color: #476c70; cursor: pointer; font: inherit; font-size: 34px; font-weight: 900; }
.stage-arrow span { display: block; margin-top: 5px; font-size: 10px; }
.stage-arrow:disabled { visibility: hidden; }
.resume-stage-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: min(520px, 100%); margin: 0 auto 18px; padding: 15px 17px; border: 2px solid #58a58e; border-radius: 15px; background: linear-gradient(135deg, #e1f7e7, #fff9df); color: #285e59; text-align: left; cursor: pointer; box-shadow: 0 5px 0 #8dbca2; }
.resume-stage-card:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8dbca2; }
.resume-stage-card small, .resume-stage-card strong { display: block; }
.resume-stage-card small { color: #5d8178; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.resume-stage-card strong { margin-top: 3px; font-size: 16px; }
.resume-stage-card b { color: #e8784f; font-size: 24px; }
.home-collection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(520px, 100%); margin: 34px auto 0; }
.home-smart-review { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: min(520px, 100%); margin: 22px auto -20px; padding: 11px 13px; border: 1px solid #9dc7ad; border-radius: 12px; background: #edf8e9; color: #3f6760; text-align: left; }
.home-smart-review > span:first-child { font-size: 22px; }
.home-smart-review strong, .home-smart-review small { display: block; }
.home-smart-review strong { font-size: 12px; }
.home-smart-review small { margin-top: 2px; color: #647d78; font-size: 9px; line-height: 1.35; }
.home-smart-review b { color: #db704f; font-size: 10px; text-align: right; }
.home-study-record, .home-alpaca-book { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; border: 2px solid #8ab9a7; border-radius: 14px; background: linear-gradient(135deg, #eaf8e4, #fff9df); color: #355f60; text-align: left; cursor: pointer; box-shadow: 0 5px 0 #a9c7a5; transition: transform .16s, box-shadow .16s; }
.home-alpaca-book { border-color: #c3a6d5; background: linear-gradient(135deg, #f4eaff, #fff9df); box-shadow: 0 5px 0 #c7add8; }
.home-study-record:hover, .home-alpaca-book:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #a9c7a5; }
.home-alpaca-book:hover { box-shadow: 0 7px 0 #c7add8; }
.home-study-record-icon { font-size: 27px; }
.home-study-record strong, .home-study-record small { display: block; }
.home-study-record strong { font-size: 14px; }
.home-study-record small { margin-top: 2px; color: #6d7d7e; font-size: 10px; }
.home-study-record b { color: #e8784f; font-size: 22px; }
.home-alpaca-book b { color: #9363b6; font-size: 22px; }
.modal.alpaca-book-modal { width: min(850px, 100%); }
.alpaca-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.alpaca-book-card { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; padding: 9px; border: 1px solid color-mix(in srgb, var(--ear) 40%, #d9c993); border-radius: 10px; background: #fffdf7; }
.alpaca-book-card h3 { margin: 1px 0 3px; color: #385d58; font-size: 13px; }
.alpaca-book-card h3 small { color: #788490; font-size: 10px; }
.alpaca-book-card p { margin: 0; color: #667386; font-size: 10px; line-height: 1.4; }
.alpaca-book-card > div > small { display: block; margin-top: 5px; color: #74828c; font-size: 9px; line-height: 1.45; }
.patrol-diagram { display: grid; grid-template-columns: repeat(3, 18px); gap: 2px; width: max-content; margin-top: 7px; }
.patrol-diagram > span { display: grid; place-items: center; min-height: 18px; border: 1px dashed #c4d2c8; border-radius: 4px; color: #789089; font-size: 7px; line-height: 1; }
.patrol-diagram > .patrol-origin { border-style: solid; border-color: var(--ear); background: color-mix(in srgb, var(--ear) 24%, #fffdf7); color: #435d57; font-weight: 900; }
.patrol-diagram > .patrol-stop { border-color: #5c9b9a; background: #e8faf7; color: #287876; font-weight: 900; }
.patrol-diagram > .patrol-origin.patrol-stop { background: color-mix(in srgb, var(--ear) 25%, #e8faf7); }
.patrol-diagram-note { margin-top: 3px !important; color: #789089 !important; font-size: 8px !important; }

.cell .terrain { opacity: 1; }
.spawn-icon { position: relative; width: 72%; height: 56%; border-radius: 999px; background: #6fc48f; box-shadow: inset 0 -4px 0 rgba(31, 106, 80, .22), 0 2px 0 rgba(43, 89, 72, .18); }
.spawn-icon::before { position: absolute; left: 22%; top: 29%; width: 52%; height: 42%; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #fffbe4; content: ""; }
.terrain-icon { position: relative; display: block; width: 82%; height: 82%; filter: drop-shadow(0 2px 0 rgba(51, 68, 51, .18)); }
.terrain-tree::before { position: absolute; left: 43%; bottom: 8%; width: 16%; height: 40%; border-radius: 4px; background: #8f5f35; content: ""; }
.terrain-tree::after { position: absolute; left: 14%; top: 2%; width: 72%; height: 66%; border-radius: 50% 50% 46% 52%; background: radial-gradient(circle at 34% 30%, #80d46d 0 24%, transparent 25%), #3f9f5b; box-shadow: -8px 7px 0 #58b766, 7px 8px 0 #57ad5d; content: ""; }
.terrain-rock::before { position: absolute; inset: 18% 10% 14%; border-radius: 46% 54% 42% 50%; background: linear-gradient(145deg, #b8bebc, #778178); box-shadow: inset 8px 7px 0 rgba(255,255,255,.22); content: ""; }
.terrain-fence::before { position: absolute; left: 9%; right: 9%; top: 31%; height: 15%; border-radius: 3px; background: #a96d39; box-shadow: 0 16px 0 #a96d39; content: ""; }
.terrain-fence::after { position: absolute; inset: 14% 20%; background: repeating-linear-gradient(90deg, #7b4a28 0 8px, transparent 8px 18px); content: ""; }
.terrain-shell::before { position: absolute; inset: 14% 13% 10%; border: 3px solid #de9aa4; border-radius: 70% 70% 42% 42%; background: repeating-radial-gradient(circle at 50% 100%, #fff 0 8px, #ffd8dd 9px 12px); content: ""; }
.terrain-crate::before { position: absolute; inset: 15%; border: 3px solid #8a5b32; border-radius: 5px; background: linear-gradient(45deg, transparent 44%, #8a5b32 45% 54%, transparent 55%), linear-gradient(-45deg, transparent 44%, #8a5b32 45% 54%, transparent 55%), #c88b49; content: ""; }

.range-circle { opacity: .34; }
.range-circle.selected-guide { opacity: .3; }
.range-circle.placement-preview { border-style: dashed; opacity: .48; }
.range-circle.invalid { --range: #e45858 !important; background: rgba(228, 88, 88, .13); }

.warehouse { width: calc(100% / var(--cols, 17) * 2.35); height: calc(100% / var(--rows, 13) * 2.15); aspect-ratio: auto; transform: translate(-50%, -50%); }
.warehouse-roof { left: 4%; top: 0; width: 92%; height: 34%; }
.warehouse-body { left: 8%; top: 29%; width: 84%; height: 63%; border-width: 4px; border-radius: 8px; }
.warehouse-door { left: 39%; top: 55%; width: 22%; height: 34%; }
.warehouse-carrots { left: 50%; top: 42%; bottom: auto; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; gap: 0; width: 68%; padding: 1px 2px; border-radius: 7px; background: rgba(255, 251, 230, .78); font-size: clamp(7px, .72vw, 10px); line-height: 1; white-space: normal; }
.warehouse-carrots span { display: inline-block; transform: rotate(-8deg); }
.hud-item.core strong { gap: 0; font-size: 12px; }

/* Map clicks resolve through the board cell below the artwork.  This keeps the
 * entire placed cell selectable while never stealing clicks from a neighbour. */
.alpaca-unit { pointer-events: none; cursor: default; }
.unit .unit-shadow { bottom: 4%; width: 54%; height: 11%; }
.alpaca-sprite, .mini-alpaca {
  --wool: #fff;
  --skin: #ffd9bd;
  --cheek: #ff96aa;
  --inner-ear: #ffc9cf;
  --nose: #b0844b;
  --eye: #7a4a1c;
  --line: #cfcfcf;
}
.alpaca-sprite.alpaca-level-1, .mini-alpaca.alpaca-level-1 {
  --wool: #f7f7f7;
  --skin: #e6e6e6;
  --cheek: #bfbfbf;
  --inner-ear: #dddddd;
  --nose: #7d7d7d;
  --eye: #3d3d3d;
  --line: #bdbdbd;
  filter: grayscale(1) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13));
}
.alpaca-sprite.alpaca-level-2, .mini-alpaca.alpaca-level-2 {
  filter: drop-shadow(1px 3px 0 rgba(56, 65, 47, .13));
}
.alpaca-sprite.alpaca-level-3, .mini-alpaca.alpaca-level-3 {
  filter: drop-shadow(0 0 0 #f4c542) drop-shadow(0 0 7px rgba(244, 197, 66, .95)) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13));
}
.alpaca-sprite .alpaca-body, .mini-alpaca .alpaca-body {
  left: 31%; bottom: 16%; width: 55%; height: 42%; border: 4px solid var(--line); border-radius: 48% 45% 42% 50%; background: var(--wool);
  box-shadow: -8px -2px 0 var(--wool), -13px 5px 0 var(--wool), -8px 14px 0 var(--wool), inset 5px 5px 0 rgba(255,255,255,.56);
}
.alpaca-sprite .alpaca-tail, .mini-alpaca .alpaca-tail { left: 80%; bottom: 27%; width: 18%; height: 20%; border: 4px solid var(--line); border-radius: 50%; background: var(--wool); }
.alpaca-sprite .alpaca-neck, .mini-alpaca .alpaca-neck { left: 22%; bottom: 36%; width: 24%; height: 40%; border: 4px solid var(--line); border-bottom: 0; border-radius: 45% 45% 18% 18%; background: var(--wool); transform: rotate(-8deg); }
.alpaca-sprite .alpaca-head, .mini-alpaca .alpaca-head { left: 7%; top: 1%; width: 55%; height: 49%; border: 4px solid var(--line); border-radius: 48% 49% 46% 50%; background: var(--wool); box-shadow: -7px 3px 0 var(--wool), 7px 8px 0 var(--wool), 0 12px 0 var(--wool), inset 5px 5px 0 rgba(255,255,255,.62); }
.alpaca-sprite .alpaca-ear, .mini-alpaca .alpaca-ear { top: -31%; width: 19%; height: 38%; border: 4px solid var(--line); border-bottom: 0; border-radius: 70% 70% 22% 22%; background: var(--wool); }
.alpaca-sprite .alpaca-ear.left, .mini-alpaca .alpaca-ear.left { left: 13%; transform: rotate(-24deg); }
.alpaca-sprite .alpaca-ear.right, .mini-alpaca .alpaca-ear.right { right: 13%; transform: rotate(24deg); }
.alpaca-sprite .alpaca-ear::after, .mini-alpaca .alpaca-ear::after { position: absolute; left: 27%; top: 22%; width: 48%; height: 58%; border-radius: 70% 70% 28% 28%; background: var(--inner-ear); content: ""; }
.alpaca-face { position: absolute; left: 17%; top: 31%; width: 66%; height: 54%; border-radius: 44% 44% 50% 50%; background: var(--skin); }
.alpaca-eyes::before, .alpaca-eyes::after { top: 48%; width: 10%; height: 13%; background: var(--eye); }
.alpaca-eyes::before { left: 30%; }
.alpaca-eyes::after { right: 30%; }
.alpaca-nose { position: absolute; left: 45%; top: 59%; width: 15%; height: 14%; border-radius: 50%; background: var(--nose); }
.alpaca-cheek { position: absolute; top: 61%; width: 18%; height: 18%; border-radius: 50%; background: var(--cheek); opacity: .92; }
.alpaca-cheek.left { left: 20%; }
.alpaca-cheek.right { right: 20%; }
.alpaca-sprite .alpaca-mouth, .mini-alpaca .alpaca-mouth { left: 50%; top: 72%; width: 23%; height: 10%; border: 0; border-bottom: 4px solid #6a3e18; border-radius: 0 0 999px 999px; background: transparent; transform: translateX(-50%); }
.mouth-open .alpaca-mouth { top: 68%; width: 20%; height: 20%; border: 3px solid #6a3e18; border-radius: 50%; background: #5e3540; }
.alpaca-sprite .alpaca-leg, .mini-alpaca .alpaca-leg { bottom: 3%; width: 12%; height: 25%; border: 4px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; background: var(--wool); transform-origin: 50% 8%; }
.alpaca-sprite .alpaca-leg.front, .mini-alpaca .alpaca-leg.front { left: 62%; }
.alpaca-sprite .alpaca-leg.back, .mini-alpaca .alpaca-leg.back { left: 37%; }
.alpaca-sprite .alpaca-leg::after, .mini-alpaca .alpaca-leg::after { position: absolute; left: 12%; right: 12%; bottom: 0; height: 14%; border-radius: 999px; background: var(--inner-ear); content: ""; }
.unit.moving .alpaca-leg.front { animation: walk-front .36s ease-in-out infinite alternate; }
.unit.moving .alpaca-leg.back { animation: walk-back .36s ease-in-out infinite alternate; }
.unit.attacking.attack-paw .alpaca-leg.front { animation: paw-slap .34s ease-out 1; }
.unit.attacking.attack-kick .alpaca-leg.back { animation: kick-up .36s ease-out 1; }
.unit.selected .alpaca-sprite { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 7px var(--accent)); }
.unit.selected .alpaca-sprite.alpaca-level-3 { filter: drop-shadow(0 0 0 #f4c542) drop-shadow(0 0 8px rgba(244, 197, 66, .95)) drop-shadow(0 0 8px var(--accent)); }
.unit.level-2 .alpaca-body, .unit.level-2 .alpaca-head, .unit.level-2 .alpaca-neck, .unit.level-2 .alpaca-tail, .unit.level-2 .alpaca-leg { border-width: 4px; }
.unit.level-3 .alpaca-body { background: var(--wool); }
.unit.level-3 .alpaca-sprite::before, .mini-alpaca.alpaca-level-3::before { position: absolute; inset: -5%; border: 4px solid #f4c542; border-radius: 45% 42% 40% 46%; content: ""; pointer-events: none; filter: drop-shadow(0 0 3px rgba(244, 197, 66, .86)); }
.mini-alpaca { width: 42px; height: 42px; transform: scale(.92); transform-origin: center; }
.mini-alpaca .badge, .mini-alpaca .level-tag { display: none; }
.mini-alpaca .alpaca-head, .mini-alpaca .alpaca-body, .mini-alpaca .alpaca-tail, .mini-alpaca .alpaca-neck, .mini-alpaca .alpaca-leg, .mini-alpaca .alpaca-ear { border-width: 2.4px; }
.mini-alpaca .alpaca-mouth { border-bottom-width: 2px; }

.projectile { width: 22px; height: 14px; border: 2px solid #4ca7b5; border-radius: 65% 48% 48% 65% / 58% 52% 52% 58%; background: linear-gradient(90deg, #e9fbff, #9fe8f2); clip-path: polygon(0 50%, 38% 0, 100% 50%, 38% 100%); transition: left .56s linear, top .56s linear; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); transform-origin: 50% 50%; }
.projectile.spit::after { right: -7px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(159, 232, 242, .7); }

.option-rationales { margin: -7px 0 14px; padding: 9px 11px; border: 1px dashed #d9c996; border-radius: 8px; background: #fffaf0; color: #59677a; font-size: 12px; line-height: 1.55; }
.option-rationales summary { cursor: pointer; font-weight: 900; color: #416973; }
.option-rationales ul { margin: 7px 0 0; padding-left: 18px; }

@keyframes walk-front { 100% { rotate: -12deg; translate: 2px -2px; } }
@keyframes walk-back { 100% { rotate: 12deg; translate: -2px 1px; } }
@keyframes paw-slap { 45% { rotate: -58deg; translate: 13px -7px; scale: 1.45 1.7; } }
@keyframes kick-up { 45% { rotate: 58deg; translate: -10px -9px; scale: 1.55 1.75; } }

/* Stage select is its own screen; the battlefield only mounts visually after a stage is chosen. */
.game-layout.stage-selecting { display: block; max-width: 760px; margin: 0 auto; }
.game-layout.stage-selecting > .side-panel { display: none; }
.battle-panel.is-stage-select { min-height: 420px; padding: 14px; }
.battle-panel.is-stage-select .hud,
.battle-panel.is-stage-select .battle-caption,
.battle-panel.is-stage-select .board-wrap,
.battle-panel.is-stage-select .battle-bottom { display: none; }
.battle-panel.is-stage-select .stage-gate { position: static; width: 100%; max-height: none; transform: none; }
.battle-panel.is-stage-select .stage-gate-card { min-height: 390px; padding: 24px; }

/* User-supplied alpaca artwork.  Keep the art isolated from the old CSS drawing primitives. */
.alpaca-art { position: relative; z-index: 2; width: 100%; height: 100%; transform-origin: 50% 82%; }
.alpaca-art-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.alpaca-open-mouth-image { opacity: 0; transition: opacity .08s linear; }
.mouth-open .stationary-art .alpaca-idle-image { opacity: 0; }
.mouth-open .stationary-art .alpaca-open-mouth-image { opacity: 1; }
.alpaca-art .badge { display: none; }
.alpaca-art .level-tag { z-index: 6; bottom: -13%; padding: 0; border-radius: 0; background: transparent; color: #26314a; font-size: 8px; text-shadow: 0 1px 0 #fffdf7, 0 0 3px #fffdf7; }
.alpaca-art.level-art-1 { filter: contrast(.93) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }
.alpaca-art.level-art-2 { filter: drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }
.alpaca-art.level-art-3 { filter: drop-shadow(0 0 5px rgba(244, 197, 66, .98)) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }
.alpaca-art.level-art-3::after { position: absolute; inset: 3%; border: 3px solid #f4c542; border-radius: 46%; content: ''; pointer-events: none; filter: drop-shadow(0 0 3px rgba(244, 197, 66, .9)); }
.unit.selected .alpaca-art { filter: drop-shadow(0 0 7px var(--accent)) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }
.unit.selected .alpaca-art.level-art-1 { filter: drop-shadow(0 0 7px var(--accent)) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }
.unit.selected .alpaca-art.level-art-3 { filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 6px #f4c542) drop-shadow(1px 3px 0 rgba(56, 65, 47, .13)); }

/* Every map alpaca has the same placement frame; walkers swap full-body frames instead of overlaying legs. */
.unit.alpaca-unit, .unit.moving.alpaca-unit { width: calc(100% / var(--cols, 17) * 1.24); height: calc(100% / var(--rows, 13) * 1.58); }
.placement-ghost { z-index: 8; opacity: .46; pointer-events: none; filter: none; transform: translate3d(-50%, -50%, 0); will-change: transform, opacity; }
.placement-ghost.invalid { opacity: .24; filter: grayscale(.6); }
.patrol-preview-cell { position: absolute; z-index: 7; display: block; width: calc(100% / var(--cols, 17) * .7); aspect-ratio: 1; border: 2px dashed #477d86; border-radius: 7px; background: rgba(195, 237, 234, .7); transform: translate(-50%, -50%); pointer-events: none; }
.patrol-preview-cell.invalid { border-color: #bd5b55; background: rgba(255, 209, 198, .62); color: #9d3f3a; }
.patrol-preview-cell.selected-guide { border-style: solid; border-color: #4b82b0; background: rgba(188, 224, 242, .52); }
.stationary-art .alpaca-idle-image { z-index: 2; }
.stationary-art .alpaca-open-mouth-image { z-index: 3; }
.moving-art { will-change: transform; }
.walking-frame { z-index: 2; }
.walking-frame-rest { opacity: 1; }
.walking-frame-lift { opacity: 0; object-fit: cover; object-position: 54% 45%; transform: scale(1.11, 1.25); }
.unit.walking .moving-art { animation: asset-walk-bob .46s ease-in-out infinite alternate; }
.unit.walking.walk-step-lift .walking-frame-rest { opacity: 0; }
.unit.walking.walk-step-lift .walking-frame-lift { opacity: 1; }
.unit.attacking.attack-charge .moving-art { animation: asset-charge .3s ease-out 1; }
@keyframes asset-walk-bob { from { transform: translateY(1px) rotate(-.8deg); } to { transform: translateY(-5px) rotate(1.1deg); } }
@keyframes asset-charge { 55% { transform: translateX(14%) scale(1.08, .9); } }

.asset-mini { display: grid; place-items: center; overflow: visible; }
.asset-mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-mini.level-3 img { filter: drop-shadow(0 0 3px #f4c542); }

/* A sideways water-drop spit leads the target and travels more quickly than the old slow frame. */
.projectile.spit { width: 20px; height: 12px; border: 2px solid #4ca7b5; border-radius: 72% 48% 48% 72% / 58% 52% 52% 58%; background: linear-gradient(90deg, #ecfcff, #8fdde8); clip-path: polygon(0 50%, 38% 0, 100% 50%, 38% 100%); transition: left .44s linear, top .44s linear; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); }
.projectile.spit::after { right: -7px; top: 4px; width: 5px; height: 5px; background: rgba(143, 221, 232, .72); }

@media (max-width: 1120px) {
  .game-layout { grid-template-columns: minmax(190px, .82fr) minmax(500px, 1.8fr); }
  .learning-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: center; }
  .learning-panel .panel-heading { grid-column: 1 / -1; }
  .learning-card { margin: 0; }
  .learning-panel .hint { display: none; }
}
@media (max-width: 760px) {
  .page-shell { width: min(100% - 18px, 660px); }
  .topbar { min-height: 64px; gap: 9px; }
  .topbar-copy { display: none; }
  .topbar-actions { margin-left: auto; }
  .brand strong { max-width: 104px; font-size: 10px; line-height: 1.2; }
  .brand small { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .button { padding: 7px 6px; font-size: 9px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 22px 8px 8px; }
  .hero-copy { margin-top: 11px; }
  .hero-alpacas { min-height: 120px; }
  .hero-alpaca-one { right: 14%; }
  .game-layout { grid-template-columns: 1fr; gap: 12px; }
  .roster-panel { max-height: min(520px, 72svh); }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alpaca-card { grid-template-columns: 36px 1fr; }
  .mini-alpaca { width: 36px; height: 36px; }
  .battle-panel { order: -1; }
  .board-wrap { min-height: 300px; }
  .hud { gap: 5px; }
  .hud-item { min-width: 58px; }
  .hud-item.core { min-width: 96px; }
  .hud-item strong { font-size: 11px; }
  .battle-caption { font-size: 10px; }
  .battle-caption span:last-child { display: none; }
  .battle-bottom { grid-template-columns: 1fr; }
  .learning-panel { display: block; }
  .learning-card { margin: 12px 0; }
  .identity-strip { display: block; }
  .identity-strip div { margin-top: 9px; }
  .modal { padding: 20px 16px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-card.tutorial-wide { grid-column: auto; }
  .tutorial-modal .modal-footer { bottom: -20px; margin: 14px -16px -20px; padding: 12px 16px 16px; }
  .feedback-ratings { grid-template-columns: 1fr; }
  .study-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-summary-grid div:nth-child(2) { border-right: 0; }
  .study-summary-grid div:nth-child(-n + 2) { border-bottom: 1px solid #e7dab4; }
  .study-category-list { grid-template-columns: 1fr; }
  .home-collection-actions, .alpaca-book-grid { grid-template-columns: 1fr; }
  .stage-picker { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
  .stage-button-featured { min-height: 180px; padding: 22px 10px; }
  .stage-arrow { font-size: 25px; }
  .stage-arrow span { display: none; }
}

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