:root {
  --bg: #121826;
  --panel: #2d241c;
  --panel-2: #49361f;
  --gold: #f3b33d;
  --gold-2: #ffd36a;
  --blue: #1d63b7;
  --blue-2: #52a2ff;
  --green: #63bb2d;
  --red: #c84238;
  --purple: #9f42df;
  --dark: #1b1b23;
  --paper: #f5e6c8;
  --ink: #2f2418;
  --muted: #866b45;
  --cell: min(4.6vw, 42px);
  font-family: Tahoma, Vazirmatn, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(75, 133, 220, .22), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(255, 204, 86, .14), transparent 24rem),
    linear-gradient(145deg, #111827, #1b2335 45%, #111827);
  color: #f6ead3;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .8rem;
  background: linear-gradient(180deg, #273246, #151b27);
  border-bottom: 3px solid rgba(255, 205, 105, .65);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 12rem;
}
.logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #2475dc, #0b2d65);
  border: 3px solid var(--gold);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 12px rgba(0,0,0,.35);
  font-size: 1.45rem;
}
.brand h1 { margin: 0; font-size: 1.15rem; line-height: 1.1; }
.brand small { color: #cdb98e; font-size: .72rem; }

.resource-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
}
.res-pill, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  padding: .3rem .58rem;
  background: linear-gradient(180deg, #3b3f48, #11151f);
  border: 2px solid #89704a;
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.25);
  white-space: nowrap;
  font-weight: 800;
}
.res-icon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.4);
}
.res-gold { background: linear-gradient(145deg, #fff070, #e39d18); color: #5d3200; }
.res-elixir { background: linear-gradient(145deg, #f59bff, #8528c6); color: #fff; }
.res-dark { background: linear-gradient(145deg, #67547c, #17101f); color: #fff; }
.res-gem { background: linear-gradient(145deg, #9dff55, #21a542); color: #053808; }
.res-trophy { background: linear-gradient(145deg, #ffe28b, #d78014); color: #5d3200; }
.top-actions { display: flex; gap: .4rem; justify-content: end; }

.game-btn {
  border: 0;
  color: white;
  border-radius: 12px;
  padding: .62rem .85rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, #3b92f6, #12478b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.3);
  border: 2px solid rgba(255, 221, 136, .65);
}
.game-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.game-btn:active { transform: translateY(1px); }
.game-btn.green { background: linear-gradient(180deg, #8edc43, #2b811f); }
.game-btn.gold { background: linear-gradient(180deg, #ffd76d, #c77712); }
.game-btn.red { background: linear-gradient(180deg, #ef6b59, #9e2a23); }
.game-btn.purple { background: linear-gradient(180deg, #bd77ff, #6630ac); }
.game-btn.gray { background: linear-gradient(180deg, #77808b, #30333a); }
.game-btn.small { padding: .35rem .55rem; border-radius: 9px; font-size: .8rem; }
.game-btn.full { width: 100%; }
.game-btn[disabled] { filter: grayscale(.8); opacity: .55; cursor: not-allowed; transform: none; }

.main-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: .85rem;
  padding: .85rem;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.left-zone { min-width: 0; }
.right-zone {
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 84px);
  overflow: auto;
  padding-left: .2rem;
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .75rem;
}
.nav-tab {
  border: 2px solid rgba(255, 217, 130, .45);
  background: linear-gradient(180deg, #3b3f48, #171b22);
  color: #eee1c9;
  border-radius: 12px 12px 6px 6px;
  padding: .65rem .8rem;
  font-weight: 900;
  box-shadow: inset 0 2px rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.22);
}
.nav-tab.active {
  background: linear-gradient(180deg, #2f83e8, #12498e);
  color: white;
  border-color: var(--gold-2);
}

.card {
  background: linear-gradient(180deg, rgba(79, 62, 39, .92), rgba(41, 31, 24, .94));
  border: 2px solid rgba(255, 218, 143, .45);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12);
  overflow: hidden;
}
.card.pad { padding: .9rem; }
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  background: linear-gradient(180deg, #1d63b7, #133a6e);
  border-bottom: 2px solid rgba(255, 215, 125, .65);
  font-weight: 900;
  text-shadow: 0 2px rgba(0,0,0,.4);
}
.card-title h2, .card-title h3 { margin: 0; font-size: 1.05rem; }
.card-body { padding: .85rem; }
.muted { color: #d6c198; }
.tiny { font-size: .76rem; }

.base-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1rem;
  min-height: 690px;
  overflow: auto;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 30%, rgba(120, 216, 91, .22), transparent 35rem),
    linear-gradient(160deg, #243a25, #142118 55%, #102018);
  border: 3px solid rgba(255, 216, 126, .35);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}

.base-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(18, var(--cell));
  grid-template-rows: repeat(18, var(--cell));
  transform: rotateX(55deg) rotateZ(45deg);
  transform-style: preserve-3d;
  margin: 8rem 0;
}
.grid-cell {
  grid-column: span 1;
  grid-row: span 1;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, #6ab84b, #397b30);
  box-shadow: inset 0 0 12px rgba(0,0,0,.12);
  transition: .12s ease;
  z-index: 1;
}
.grid-cell:nth-child(4n) { background: linear-gradient(145deg, #74c24e, #438337); }
.grid-cell:hover { filter: brightness(1.2); outline: 2px solid rgba(255,245,154,.8); z-index: 2; }
.grid-cell.occupied { background: linear-gradient(145deg, #64834c, #2e5b2b); }
.grid-cell.buildable { outline: 2px dashed rgba(255, 240, 110, .9); filter: brightness(1.18); }

.building {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 5;
  isolation: isolate;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: .15s ease;
  pointer-events: auto;
}
.building:hover { filter: brightness(1.13); transform: translateZ(8px); z-index: 10; }
.building.selected { filter: drop-shadow(0 0 12px #fff06e) brightness(1.1); z-index: 20; }
.sprite {
  --accent: #2c75d6;
  position: absolute;
  inset: 2px;
  display: grid;
  place-items: center;
  transform: rotateZ(-45deg) rotateX(-55deg) translateY(-8px);
  transform-origin: center;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(145deg, #7a7c83, #2a2c31 55%, #1c1d20);
  border: 3px solid #a37d38;
  box-shadow:
    inset 0 2px rgba(255,255,255,.25),
    inset 0 -8px rgba(0,0,0,.22),
    0 18px 16px rgba(0,0,0,.28);
  color: #fff;
  font-size: calc(var(--cell) * .64);
  text-shadow: 0 3px 2px rgba(0,0,0,.45);
}
.sprite::before {
  content: "";
  position: absolute;
  inset: 12% 22% auto;
  height: 18%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
.sprite::after {
  content: attr(data-level);
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), #a96715);
  color: #3a2200;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.55);
}
.sprite.producer { --accent: #a87518; background: linear-gradient(145deg, var(--accent), #423027 50%, #201915); }
.sprite.storage { --accent: #7254a8; background: linear-gradient(145deg, #275899, #413333 50%, #211f24); }
.sprite.defense { --accent: #af7022; background: linear-gradient(145deg, #6f7179, #29272e 50%, #171719); }
.sprite.army { --accent: #205aa3; background: linear-gradient(145deg, #235fa9, #3b342b 50%, #201914); }
.sprite.wall { background: linear-gradient(145deg, #a49075, #4b4b4e 55%, #1d1d22); border-radius: 10px; }
.sprite.decor { background: linear-gradient(145deg, #447f3b, #5b4321 55%, #2a1f18); }
.badge-status {
  position: absolute;
  top: -16px;
  right: -18px;
  transform: rotateZ(-45deg) rotateX(-55deg);
  transform-origin: center;
  z-index: 25;
  background: #171b23;
  border: 2px solid var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: .18rem .38rem;
  font-size: .7rem;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.selection-hint {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 15;
  padding: .65rem .85rem;
  border-radius: 16px;
  background: rgba(18, 23, 32, .82);
  border: 2px solid rgba(255, 221, 132, .55);
  backdrop-filter: blur(5px);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}

.shop-grid, .unit-grid, .hero-grid, .quest-grid, .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
}
.shop-item, .unit-card, .hero-card, .quest-card {
  position: relative;
  padding: .8rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8e7c8, #c9a973);
  color: var(--ink);
  border: 3px solid #8f6c31;
  box-shadow: inset 0 2px rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.25);
}
.shop-item h3, .unit-card h3, .hero-card h3, .quest-card h3 { margin: 0 0 .35rem; }
.item-head { display: flex; align-items: center; gap: .65rem; }
.item-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #3d82df, #122c58);
  border: 3px solid #b38322;
  color: white;
  font-size: 1.7rem;
  flex: none;
  box-shadow: inset 0 2px rgba(255,255,255,.25), 0 4px 8px rgba(0,0,0,.2);
}
.cost-line, .stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: .35rem 0;
}
.cost-chip, .tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .42rem;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.18);
  font-weight: 800;
  font-size: .8rem;
}
.section { display: none; }
.section.active { display: block; }

.panel-list { display: grid; gap: .6rem; }
.info-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px dashed rgba(255,255,255,.15);
  padding: .4rem 0;
}
.progress {
  height: 15px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
  background: #171b23;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6ecb32, #e5dd39);
  width: 0;
  border-radius: inherit;
}

.toast-stack {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: .45rem;
}
.toast {
  padding: .65rem .8rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #263245, #151b26);
  border: 2px solid rgba(255, 220, 125, .7);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  max-width: 340px;
  animation: pop .2s ease;
}
.toast.good { border-color: #85df47; }
.toast.bad { border-color: #e45a50; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.log-list {
  display: grid;
  gap: .5rem;
  max-height: 300px;
  overflow: auto;
}
.log-item {
  padding: .55rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.1);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 9, .72);
  padding: 1rem;
}
.modal {
  width: min(980px, 100%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 22px;
  background: linear-gradient(180deg, #f5e6c8, #c49d63);
  color: var(--ink);
  border: 4px solid #85612e;
  box-shadow: 0 26px 70px rgba(0,0,0,.6), inset 0 2px rgba(255,255,255,.45);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  color: white;
  background: linear-gradient(180deg, #1f6bc4, #113e78);
  border-bottom: 3px solid #e3b952;
}
.modal-head h2 { margin: 0; font-size: 1.08rem; }
.modal-body { padding: 1rem; }
.close-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.6);
  background: linear-gradient(180deg, #f46051, #94241f);
  color: white;
  font-weight: 900;
}

.gallery-card {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255, 214, 129, .28);
  border-radius: 16px;
  overflow: hidden;
}
.gallery-card img { display: block; width: 100%; height: auto; }
.gallery-card div { padding: .55rem; font-size: .8rem; color: #e6d2a7; direction: ltr; text-align: left; }

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 .25em;
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  font-family: monospace;
}

@media (max-width: 1100px) {
  .main-layout { grid-template-columns: 1fr; }
  .right-zone { position: static; max-height: none; }
  .topbar { grid-template-columns: 1fr; }
  .brand { min-width: 0; }
  .top-actions { justify-content: center; }
  :root { --cell: min(5.2vw, 39px); }
  .base-wrap { min-height: 560px; }
}
@media (max-width: 680px) {
  :root { --cell: min(7.8vw, 33px); }
  .resource-bar { justify-content: start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .main-layout { padding: .45rem; }
  .base-wrap { padding: .4rem; min-height: 520px; }
  .base-grid { margin: 7rem 0; }
  .shop-grid, .unit-grid, .hero-grid, .quest-grid, .gallery-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: .98rem; }
}

/* --- گرافیک نسخه 2: استفاده واقعی از تصاویر طراحی‌شده --- */
.base-wrap {
  background:
    radial-gradient(circle at 50% 28%, rgba(163, 227, 82, .36), transparent 32rem),
    radial-gradient(circle at 18% 85%, rgba(55, 137, 64, .32), transparent 24rem),
    linear-gradient(160deg, #416f32, #1e3d24 52%, #14241a);
}
.base-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url('../assets/atlases/a_clean_game_asset_reference_sheet_white_light_be_9_batch_8.png');
  background-size: 900px auto;
  background-position: center;
  mix-blend-mode: soft-light;
}
.base-grid { z-index: 2; }
.grid-cell {
  background:
    linear-gradient(145deg, rgba(139, 210, 83, .98), rgba(62, 126, 50, .98)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.06) 8px 10px);
  border-color: rgba(255, 247, 196, .08);
}
.grid-cell:nth-child(4n) { background: linear-gradient(145deg, #86cf58, #4a8d38); }
.grid-cell.buildable { outline: 3px dashed rgba(255, 238, 102, .95); box-shadow: 0 0 16px rgba(255, 227, 77, .7), inset 0 0 14px rgba(255,255,255,.2); }

.sprite {
  inset: -45% -45%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  border-radius: 0;
  color: #fff;
}
.sprite::before { display: none; }
.sprite.wall { inset: -25% -75%; }
.sprite-img {
  display: block;
  width: 160%;
  height: 160%;
  object-fit: contain;
  transform: translateY(-5%);
  filter: drop-shadow(0 18px 10px rgba(0,0,0,.35));
  pointer-events: none;
  user-select: none;
}
.sprite.wall .sprite-img { width: 210%; height: 150%; }
.emoji-sprite {
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  border-radius: 18px;
  background: linear-gradient(145deg, #7a7c83, #2a2c31 55%, #1c1d20);
  border: 3px solid #a37d38;
  box-shadow: 0 16px 12px rgba(0,0,0,.28);
}
.building:hover .sprite-img { transform: translateY(-11%) scale(1.05); }
.building.selected .sprite-img { filter: drop-shadow(0 0 14px #fff06e) drop-shadow(0 18px 10px rgba(0,0,0,.35)); }

.rich-item {
  padding-top: .45rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 238, 200, .98), rgba(205, 168, 101, .98));
}
.item-art {
  min-height: 134px;
  margin: -.15rem -.15rem .65rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 75%, rgba(83, 141, 50, .36), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(91, 67, 31, .10));
  border: 1px solid rgba(124, 86, 32, .35);
  position: relative;
}
.item-art::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 12%;
  height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  filter: blur(5px);
}
.card-art-img {
  position: relative;
  z-index: 1;
  max-width: 128%;
  max-height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 14px 10px rgba(0,0,0,.28));
}
.building-card-art { min-height: 148px; }
.troop-card-art { min-height: 156px; }
.spell-card-art { min-height: 160px; background: linear-gradient(180deg, #32263d, #161822); }
.spell-art-img { max-height: 170px; }
.hero-card-art { min-height: 185px; }
.hero-art-img { max-height: 205px; }
.item-icon.mini {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.2rem;
}
.item-icon.huge {
  width: 92px;
  height: 92px;
  font-size: 3rem;
}
.queue-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.queue-art {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 8px 5px rgba(0,0,0,.3));
}
.selected-art-wrap {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 85%, rgba(96, 158, 61, .45), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  border: 1px solid rgba(255, 216, 126, .35);
}
.selected-building-art {
  max-width: 115%;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 14px 9px rgba(0,0,0,.32));
}

.battle-scene {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: .8rem;
  align-items: end;
  min-height: 260px;
  margin: .5rem 0 .9rem;
  padding: 1rem;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 68%, rgba(126, 204, 75, .45), transparent 22rem),
    radial-gradient(circle at 76% 36%, rgba(246, 184, 77, .22), transparent 18rem),
    linear-gradient(150deg, #31582c, #18251c);
  border: 3px solid rgba(255, 216, 126, .35);
  position: relative;
}
.enemy-base, .army-line {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
}
.enemy-base { transform: translateY(6px); }
.battle-building {
  width: min(28%, 160px);
  object-fit: contain;
  filter: drop-shadow(0 14px 8px rgba(0,0,0,.36));
}
.battle-building.main { width: min(38%, 220px); }
.battle-wall { width: 150px; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(0,0,0,.3)); }
.army-line {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: end;
  direction: ltr;
}
.battle-unit {
  position: relative;
  width: 82px;
  height: 92px;
  display: grid;
  place-items: center;
}
.battle-unit-img {
  max-width: 115%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,.34));
}
.battle-unit b {
  position: absolute;
  left: 2px;
  bottom: 2px;
  background: rgba(20,20,25,.86);
  border: 1px solid rgba(255,220,130,.7);
  border-radius: 999px;
  padding: .05rem .28rem;
  font-size: .75rem;
  color: #fff;
}
.pet-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.pet-card {
  display: grid;
  place-items: center;
  gap: .25rem;
  padding: .65rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7e7c8, #c8a46b);
  color: var(--ink);
  border: 3px solid #8f6c31;
  font-weight: 900;
}
.pet-img {
  max-width: 135px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 10px 7px rgba(0,0,0,.25));
}

@media (max-width: 760px) {
  .sprite { inset: -35%; }
  .sprite-img { width: 145%; height: 145%; }
  .battle-scene { grid-template-columns: 1fr; }
  .battle-unit { width: 68px; height: 78px; }
}