/*
  Hearth + Grove + Spellbook UI synthesis
  The board is the loudest object; the trail camp supports it from the edges.
*/

:root {
  --ui-ink: #160f18;
  --ui-wood: #3d261f;
  --ui-wood-dark: #1b1217;
  --ui-brass: #e6bd70;
  --ui-cream: #ffeac0;
  --ui-moss: #76c998;
  --ui-magic: #a98aff;
  --ui-rival: #c96270;
}

html { background: #0b0810; }

body {
  min-width: 980px;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(120, 70, 83, .52), transparent 46%),
    radial-gradient(ellipse at 16% 38%, rgba(39, 101, 81, .14), transparent 32%),
    repeating-linear-gradient(106deg, transparent 0 68px, rgba(255, 194, 109, .024) 69px 71px, transparent 72px 142px),
    #0d0910;
  color: #f8e8c8;
}

body::before {
  opacity: .8;
  background:
    radial-gradient(circle at 14% 22%, rgba(251, 213, 128, .06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 66%, rgba(117, 232, 181, .045) 0 1px, transparent 1.5px),
    repeating-linear-gradient(115deg, transparent 0 78px, rgba(125, 67, 78, .08) 79px 81px, transparent 82px 158px);
  background-size: 113px 113px, 157px 157px, auto;
}

button,
.shop-critter,
.boss-relic,
.inventory-item,
.loot-item { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
.shop-critter:focus-visible,
.critter-card:focus-visible,
.boss-relic:focus-visible,
.inventory-item:focus-visible,
.loot-item:focus-visible {
  outline: 3px solid #ffde79;
  outline-offset: 3px;
}

.game-shell {
  width: min(1535px, calc(100vw - 24px));
  padding-bottom: 42px;
}

/* Header: a low, carved tavern sign rather than a floating utility row. */
.topbar {
  position: relative;
  height: 56px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid rgba(235, 194, 119, .48);
  border-radius: 15px 15px 9px 9px;
  background:
    linear-gradient(90deg, rgba(23, 13, 18, .95), rgba(82, 45, 35, .92) 34%, rgba(45, 27, 31, .96) 68%, rgba(19, 13, 20, .96)),
    repeating-linear-gradient(0deg, rgba(255, 219, 155, .035) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 1px 0 rgba(255, 235, 185, .2), inset 0 -2px 0 rgba(8, 5, 10, .62), 0 7px 18px rgba(0, 0, 0, .36);
}

.topbar::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255, 224, 160, .12);
  border-radius: 11px 11px 6px 6px;
}

.topbar > * { position: relative; z-index: 1; }
.logo b,
.round-readout strong {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
}
.logo b { font-size: 18px; letter-spacing: 2.1px; }
.logo small { color: #8ce0c5; font-size: 9px; letter-spacing: 6.5px; }
.logo-crown { font-size: 30px; }
.round-readout span { color: #c6a985; font-size: 8px; letter-spacing: 1.8px; }
.round-readout strong { color: #ffe8b1; font-size: 16px; letter-spacing: .8px; }
.settings-button {
  border-color: rgba(231, 188, 110, .48);
  border-radius: 9px;
  background: linear-gradient(#51372f, #241923);
  color: #ffe0a1;
  box-shadow: inset 0 1px 0 rgba(255, 239, 191, .16), 0 3px 0 #120b10;
}
.settings-button:hover { filter: brightness(1.14); transform: translateY(-1px); }

/* Trainer portraits read like opposing fantasy commanders. */
.adventure-bar {
  min-height: 84px;
  margin: 0 7%;
  isolation: isolate;
}

.hero-card {
  position: relative;
  height: 80px;
  border-color: #9e784d;
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(124, 74, 48, .54), transparent 35%),
    linear-gradient(150deg, #57392d, #221920 70%);
  box-shadow: inset 0 0 0 2px rgba(32, 19, 18, .86), inset 0 1px 0 rgba(255, 226, 172, .18), 0 7px 16px rgba(0, 0, 0, .52);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255, 226, 171, .13);
  border-radius: 12px;
}

.enemy-hero {
  border-color: #b46a68;
  background:
    linear-gradient(115deg, rgba(192, 80, 84, .28), transparent 38%),
    linear-gradient(150deg, #553038, #201720 70%);
}

.player-hero {
  border-color: #6faf83;
  background:
    linear-gradient(245deg, rgba(88, 199, 152, .24), transparent 37%),
    linear-gradient(150deg, #304b3d, #1d1b21 70%);
}

.portrait {
  height: 80px;
  width: 84px;
  flex-basis: 84px;
  border-color: rgba(255, 219, 149, .34);
  box-shadow: inset -3px 0 10px rgba(0, 0, 0, .24);
}
.portrait-moss { box-shadow: inset 3px 0 10px rgba(0, 0, 0, .24); }
.portrait span { filter: drop-shadow(0 5px 0 rgba(15, 8, 11, .5)); }
.hero-details strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  letter-spacing: .15px;
}
.hero-details small { color: #dac2a0; }
.hero-details .eyebrow { color: #dcb77d; font-size: 8px; }
.rival-power { border-color: rgba(225, 126, 123, .52); background: rgba(56, 22, 34, .88); color: #ffc08e; }
.npc-readout { border-color: rgba(226, 172, 104, .36); color: #edca89; }
.health-orb { border-color: #f1cf8c; box-shadow: inset 0 0 0 3px rgba(26, 14, 20, .45), 0 3px 0 rgba(5, 4, 8, .74), 0 0 12px rgba(244, 190, 95, .1); }
.versus { position: relative; z-index: 2; }
.versus span { width: 34px; background: linear-gradient(90deg, transparent, #d1a66d, transparent); }
.versus b {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid #dcb56d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe8a7, #bd8344 48%, #3b1d27 75%);
  box-shadow: inset 0 0 0 3px rgba(58, 27, 29, .55), 0 3px 0 #160c12, 0 0 14px rgba(255, 190, 88, .26);
  color: #432022;
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px;
  text-shadow: 0 1px rgba(255, 240, 190, .56);
}

/* The arena remains illustrated; the new treatment only adds table lanes and a clear duel seam. */
.arena-wrap:not(.boss-encounter) {
  height: clamp(450px, 35vw, 525px);
  border: 2px solid rgba(235, 189, 106, .72);
  border-radius: 25px;
  box-shadow: 0 12px 0 rgba(32, 16, 15, .92), 0 19px 39px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(255, 230, 170, .22);
}

.arena-wrap:not(.boss-encounter)::before { box-shadow: inset 0 0 72px rgba(4, 1, 8, .35); }
.arena { isolation: isolate; }
.arena::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10%;
  left: 10%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(249, 208, 125, .72) 15%, rgba(255, 244, 202, .9) 50%, rgba(249, 208, 125, .72) 85%, transparent);
  box-shadow: 0 0 10px rgba(255, 195, 102, .44), 0 8px 24px rgba(15, 5, 11, .35);
}

.board { position: relative; z-index: 2; }
.enemy-board {
  border-top: 1px solid rgba(230, 128, 143, .22);
  border-radius: 32px 32px 11px 11px;
  background: radial-gradient(ellipse at 50% 100%, rgba(139, 36, 61, .18), transparent 70%);
}
.player-board {
  border-bottom: 1px solid rgba(141, 246, 194, .24);
  border-radius: 11px 11px 32px 32px;
  background: radial-gradient(ellipse at 50% 0%, rgba(53, 193, 139, .16), transparent 70%);
}

.side-label {
  z-index: 5;
  display: flex;
  padding: 3px 7px;
  border: 1px solid rgba(255, 232, 178, .2);
  border-radius: 6px;
  background: rgba(21, 10, 15, .52);
  color: rgba(255, 231, 184, .76);
  font-size: 7px;
  letter-spacing: 1.1px;
}
.enemy-side-label { top: 7%; left: 13%; color: #f1a9ad; }
.player-side-label { right: 13%; bottom: 6%; color: #a5efd0; }
.side-label i { width: 22px; opacity: .58; }

.battle-banner {
  top: 8%;
  border-color: #e1b666;
  background: linear-gradient(180deg, #765234, #2c1d23);
  box-shadow: inset 0 1px 0 rgba(255, 235, 177, .23), 0 3px 0 #140b10, 0 7px 14px rgba(0, 0, 0, .52);
  color: #ffe6ad;
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
}

.combat-feed {
  z-index: 6;
  right: auto;
  bottom: 5.5%;
  left: 50%;
  min-width: 300px;
  transform: translateX(-50%);
  border-color: rgba(226, 185, 111, .58);
  border-radius: 8px;
  background: rgba(24, 14, 19, .82);
  box-shadow: 0 2px 0 #100a0d, 0 4px 12px rgba(0, 0, 0, .44);
  text-align: center;
}
.combat-feed b { color: #ffe2a2; font-family: "Cinzel", Georgia, serif; font-size: 8px; }
.combat-feed small { color: #d7c3a1; }

.rival-rail {
  border-color: #8f6347;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(71, 37, 34, .96), rgba(18, 16, 25, .97));
  box-shadow: inset 0 0 0 2px rgba(13, 7, 10, .75), 0 5px 13px rgba(0, 0, 0, .64);
}
.rival-rail::after {
  content: "☠";
  position: absolute;
  bottom: -24px;
  left: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid #cc765d;
  border-radius: 50%;
  background: #2d1725;
  box-shadow: 0 2px 0 #120a10, 0 0 10px rgba(234, 96, 95, .32);
  color: #ffc0a8;
  font-size: 13px;
}
.rail-cap { color: #edc783; }
.rail-rival { border-color: #906046; background: linear-gradient(#bb7058, #3c2730); }
.rail-rival.active { border-color: #89e9c9; box-shadow: 0 0 0 2px #286f67, 0 0 15px rgba(91, 238, 201, .72), 0 2px 0 #180e14; }

/* One deliberate command bar: farm camp, spell, pouch, then the primary action. */
.controls-row {
  z-index: 10;
  gap: 10px;
  margin: 14px 10% 11px;
  padding: 8px;
  border: 1px solid rgba(229, 183, 110, .42);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(45, 29, 26, .96), rgba(74, 42, 32, .94) 49%, rgba(38, 25, 31, .96)),
    repeating-linear-gradient(0deg, rgba(255, 224, 160, .03) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 1px 0 rgba(255, 235, 180, .18), inset 0 -3px 0 rgba(11, 7, 10, .6), 0 7px 18px rgba(0, 0, 0, .36);
}

.controls-row > * { min-height: 64px; }
.camp-card {
  border-color: #8b6d48;
  background: linear-gradient(135deg, rgba(100, 116, 55, .24), transparent 44%), linear-gradient(145deg, #4a352a, #21191c);
  box-shadow: inset 0 0 0 2px rgba(35, 22, 20, .84), 0 3px 0 #140d10;
}
.camp-icon { border: 1px solid rgba(236, 207, 126, .46); background: radial-gradient(circle at 35% 28%, #d6db83, #798b48 57%, #37422e); box-shadow: inset 0 1px 0 rgba(255, 255, 216, .36), 0 2px 0 #1a2218; }
.camp-card .eyebrow { color: #b7d18b; }
.camp-card strong { font-family: "Cinzel", Georgia, serif; font-size: 13px; line-height: 1.1; white-space: nowrap; }
.upgrade-button { border: 1px solid rgba(211, 183, 255, .45); background: linear-gradient(#8064b8, #39265e); box-shadow: inset 0 1px 0 rgba(240, 221, 255, .2), 0 3px 0 #1e1435; }

.hero-power-card {
  border-color: rgba(183, 148, 241, .68);
  background: linear-gradient(115deg, #42335d, #2a213a 64%, #284451);
  box-shadow: inset 0 0 0 2px rgba(26, 16, 38, .8), 0 3px 0 #140d20, 0 0 14px rgba(154, 117, 246, .16);
}
.hero-power-card::before { background: radial-gradient(circle, rgba(208, 181, 255, .18), transparent 65%); }
.hero-power-card:hover:enabled { box-shadow: inset 0 0 0 2px rgba(37, 22, 55, .82), 0 4px 0 #140d20, 0 0 20px rgba(164, 121, 252, .38); }
.power-copy .eyebrow { color: #ceb9ff; }
.power-copy strong { font-family: "Cinzel", Georgia, serif; font-size: 13px; }
.power-cost { border-color: #f6d36a; box-shadow: inset 0 0 0 2px rgba(255, 240, 170, .72), 0 3px 0 #6e391f, 0 0 10px rgba(255, 198, 75, .18); }

.gold-bank {
  position: relative;
  gap: 5px;
  border: 1px solid rgba(239, 196, 100, .53);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 10%, rgba(255, 230, 133, .18), transparent 48%), linear-gradient(145deg, #4d3524, #20171a);
  box-shadow: inset 0 0 0 2px rgba(38, 23, 17, .88), 0 3px 0 #120b0d;
}
.gold-bank .coin { font-size: 25px; color: #ffe071; text-shadow: 0 2px #7c461f, 0 0 8px rgba(255, 216, 92, .54); }
.gold-bank b { color: #fff0a6; font-family: "Cinzel", Georgia, serif; font-size: 26px; }
.gold-bank small { color: #d5b57a; letter-spacing: .7px; }

.battle-button {
  min-height: 70px;
  border-color: #f0c775;
  background: linear-gradient(180deg, #bd6a3e, #682b2e 72%);
  box-shadow: inset 0 1px 0 rgba(255, 231, 158, .32), inset 0 0 0 2px rgba(78, 28, 29, .32), 0 5px 0 #351419, 0 0 18px rgba(227, 90, 60, .2);
}
.battle-button b { font-family: "Cinzel", Georgia, serif; font-size: 15px; letter-spacing: .85px; }
.battle-button:hover:not(:disabled) { filter: brightness(1.14) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255, 231, 158, .42), inset 0 0 0 2px rgba(78, 28, 29, .32), 0 6px 0 #351419, 0 0 25px rgba(244, 129, 72, .42); }

/* Long-term systems become a compact leather trail journal under the action dock. */
.progress-row {
  gap: 7px;
  margin: 0 10% 12px;
  padding: 6px 10px;
  border: 1px solid rgba(179, 140, 85, .28);
  border-radius: 12px;
  background: rgba(23, 15, 20, .72);
  box-shadow: inset 0 1px 0 rgba(255, 229, 177, .06);
}
.difficulty-chip,
.paragon-chip,
.garden-chip,
.adventure-wins-chip,
.boss-progress-chip {
  min-height: 29px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 233, 189, .08), 0 2px 0 rgba(8, 5, 8, .48);
}
.difficulty-chip,
.paragon-chip,
.garden-chip { opacity: .86; }
.difficulty-chip:hover,
.paragon-chip:hover,
.garden-chip:hover { opacity: 1; filter: brightness(1.12); }
.adventure-wins-chip,
.boss-progress-chip { order: -1; }
.adventure-wins-chip { margin-right: -7px; border-radius: 8px 0 0 8px; }
.boss-progress-chip { border-radius: 0 8px 8px 0; }
.adventure-wins-chip strong,
.boss-progress-chip strong { font-family: "Cinzel", Georgia, serif; font-size: 10px; }
.save-status { opacity: .67; font-size: 7px; }

.boss-notice { margin-top: -2px; border-radius: 11px; }

/* Trail Market stays art-first; its frame now matches the tabletop and the hover is large without eclipsing the row. */
.market-section {
  position: relative;
  border-color: #76523a;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(122, 80, 45, .09), transparent 17% 83%, rgba(122, 80, 45, .09)),
    repeating-linear-gradient(0deg, rgba(255, 220, 170, .026) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #382829, #18151c);
  box-shadow: inset 0 0 0 2px #20171a, inset 0 1px 0 rgba(255, 234, 190, .14), 0 7px 0 #0f0b10, 0 14px 25px rgba(0, 0, 0, .33);
}
.market-heading { padding-bottom: 9px; border-bottom: 1px solid rgba(237, 195, 121, .17); }
.market-heading h1,
.bench-heading strong,
.boss-inventory-heading strong { font-family: "Cinzel", Georgia, serif; }
.market-heading h1 { font-size: 17px; letter-spacing: .2px; }
.market-heading .eyebrow { color: #a9d187; }
.reroll-button { border-color: #ae8957; background: linear-gradient(#795535, #39251f); }
.market-grid { gap: 14px; padding-bottom: 20px; }
.market-grid .shop-critter {
  outline: 1px solid rgba(255, 226, 158, .16);
  outline-offset: 3px;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 220, 151, .3) !important;
}
.market-grid .shop-critter::before { box-shadow: inset 0 0 0 1px rgba(255, 237, 190, .15); }
.market-grid .shop-critter .critter-name { font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: .15px; }
.market-grid .shop-critter .rarity-ribbon { border-color: rgba(255, 232, 174, .68); box-shadow: 0 2px 0 rgba(15, 10, 24, .65), 0 0 8px rgba(164, 127, 255, .18); }
.market-grid .shop-critter:hover {
  transform: translateY(-22px) scale(1.24) !important;
  filter: brightness(1.15) saturate(1.16);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .76), 0 0 0 1px rgba(255, 229, 165, .7), 0 0 28px rgba(255, 178, 50, .36) !important;
}
.market-grid .shop-critter:hover .hover-lore { border: 1px solid rgba(255, 224, 159, .24); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.hover-lore b { font-family: "Cinzel", Georgia, serif; letter-spacing: .25px; }
.hint { color: #bdcda6; }

/* The pack is a garden crate: quieter than the market but intentionally usable. */
.bench-section { margin-top: 13px; }
.bench-heading .eyebrow { color: #a9d187; }
.bench {
  border-color: #6e6241;
  background:
    repeating-linear-gradient(90deg, rgba(129, 166, 86, .16) 0 14px, rgba(40, 51, 34, .16) 14px 28px),
    linear-gradient(145deg, #323627, #17151a);
  box-shadow: inset 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(193, 216, 127, .1), 0 5px 0 #0d0b10;
}
.bench .critter-card:hover { z-index: 25; filter: brightness(1.12) saturate(1.05); }
.bench .critter-card:hover .critter-name {
  z-index: 35;
  right: -5px;
  bottom: -17px;
  left: -5px;
  padding: 3px;
  border: 1px solid rgba(255, 222, 152, .54);
  background: rgba(28, 18, 24, .95);
  color: #ffe9b4;
  font-size: 9px;
  white-space: normal;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .48);
}
.sell-zone { border-color: rgba(237, 188, 91, .58); background: radial-gradient(circle at 50% 19%, rgba(243, 202, 96, .22), transparent 32%), linear-gradient(145deg, #513020, #1a1418); }
.sell-zone b { color: #ffe0a1; font-family: "Cinzel", Georgia, serif; }
.drag-active .sell-zone em { transform: scale(1.18); box-shadow: 0 0 12px rgba(255, 210, 82, .62), 0 2px 0 #865020; }

/* Empty boss loot should be an invitation, not a large empty shelf. */
.boss-inventory { border-color: #906e44; }
.boss-inventory:has(.boss-inventory-empty) { width: min(990px, 76%); margin-top: 12px; padding: 8px 12px; }
.boss-inventory:has(.boss-inventory-empty) .boss-inventory-heading { align-items: center; padding-bottom: 0; border-bottom: 0; }
.boss-inventory:has(.boss-inventory-empty) .boss-inventory-items { min-height: 0; margin-top: 6px; }
.boss-inventory:has(.boss-inventory-empty) .boss-inventory-empty { padding: 7px 10px; font-size: 9px; }

/* A spellbook display face ties setup, rewards, and the farming progression together. */
.modal h2,
.setup-modal h2,
.boss-warning b,
.trait-button b,
.seed-card b { font-family: "Cinzel", Georgia, serif; }
.modal { box-shadow: inset 0 0 0 1px rgba(255, 234, 186, .12), 0 17px 0 rgba(35, 53, 88, .27), 0 25px 55px rgba(20, 38, 70, .34); }
.setup-modal { border-color: #ba8d5e; }
.draft-choice { border-color: #80604e; }
.draft-choice b { font-family: "Cinzel", Georgia, serif; font-size: 10px; }
.trait-grid { position: relative; gap: 9px; padding: 4px 2px; }
.trait-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 12%;
  left: 12%;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(128, 187, 95, .68), rgba(185, 127, 224, .62), transparent);
  box-shadow: 0 0 7px rgba(124, 213, 120, .28);
}
.trait-button { z-index: 1; border-radius: 13px; background: linear-gradient(145deg, #fff7d9, #d8e2bf); }
.trait-button:nth-child(2n) { background: linear-gradient(145deg, #f5e6ff, #d8c8e5); }

@media (max-width: 1180px) {
  .game-shell { width: calc(100vw - 16px); }
  .adventure-bar { margin-right: 6%; margin-left: 6%; }
  .arena-wrap:not(.boss-encounter) { height: 455px; }
  .controls-row { grid-template-columns: minmax(190px, 1fr) minmax(205px, 1.15fr) 118px 215px; margin-right: 7%; margin-left: 7%; gap: 8px; }
  .progress-row { margin-right: 7%; margin-left: 7%; }
  .combat-feed { min-width: 260px; }
  .market-grid { gap: 11px; }
}

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

/* Formation readability: each team gets a complete, quiet lane with no divider through it. */
.arena-wrap:not(.boss-encounter) { height: clamp(540px, 42vw, 620px); }
.arena-wrap:not(.boss-encounter) .arena {
  padding: clamp(72px, 6vw, 94px) 13.5% clamp(54px, 4vw, 70px);
  grid-template-rows: minmax(145px, 1fr) 48px minmax(145px, 1fr);
}
.arena-wrap:not(.boss-encounter) .arena::before,
.arena-wrap:not(.boss-encounter) .duel-ribbon::before { content: none; display: none; }
.arena-wrap:not(.boss-encounter) .enemy-board,
.arena-wrap:not(.boss-encounter) .player-board { transform: none; }

.arena-wrap:not(.boss-encounter) .enemy-board {
  padding: 7px 8px;
  border: 1px solid rgba(238, 109, 132, .42);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 100%, rgba(143, 27, 54, .3), rgba(37, 12, 23, .08) 68%);
  box-shadow: inset 0 0 28px rgba(104, 14, 38, .16);
}

.arena-wrap:not(.boss-encounter) .player-board {
  padding: 7px 8px;
  border: 1px solid rgba(94, 235, 181, .56);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(41, 177, 125, .34), rgba(11, 40, 31, .1) 70%);
  box-shadow: inset 0 0 30px rgba(40, 208, 150, .17), 0 0 18px rgba(64, 235, 178, .1);
}

.arena-wrap:not(.boss-encounter) .player-board .critter-card {
  border-color: #6ee3ba;
  outline: 1px solid rgba(153, 255, 218, .42);
  outline-offset: 3px;
  box-shadow: 0 5px 0 #11231e, 0 12px 20px rgba(0, 0, 0, .52), 0 0 20px rgba(73, 244, 190, .38);
}

.arena-wrap:not(.boss-encounter) .enemy-board .board-slot.empty {
  border: 1px solid rgba(238, 113, 137, .16);
  background: radial-gradient(ellipse, rgba(155, 38, 65, .09), transparent 72%);
  box-shadow: none;
}

.arena-wrap:not(.boss-encounter) .player-board .board-slot.empty {
  border: 1px solid rgba(111, 240, 193, .28);
  background: radial-gradient(ellipse, rgba(68, 211, 157, .15), rgba(12, 40, 30, .06) 72%);
  box-shadow: none;
}

.arena-wrap:not(.boss-encounter) .player-board .board-slot.empty span {
  display: grid;
  width: 29px;
  height: 29px;
  margin: 0 auto;
  place-items: center;
  border: 1px solid rgba(170, 255, 221, .52);
  border-radius: 50%;
  background: rgba(23, 86, 66, .5);
  color: #d4ffeb;
  font-size: 17px;
  text-shadow: 0 0 8px rgba(105, 255, 205, .72);
}

.arena-wrap:not(.boss-encounter).drag-active .player-board .board-slot.empty,
body.drag-active .arena-wrap:not(.boss-encounter) .player-board .board-slot.empty {
  border-color: rgba(139, 255, 213, .88) !important;
  background: radial-gradient(ellipse, rgba(88, 255, 195, .36), rgba(12, 40, 30, .12) 72%) !important;
  box-shadow: 0 0 18px rgba(85, 255, 200, .46) !important;
}

.arena-wrap:not(.boss-encounter) .player-board .board-slot.drop-ready {
  border-color: #fff1a2 !important;
  background: radial-gradient(ellipse, rgba(255, 239, 143, .68), rgba(62, 220, 168, .28) 58%, transparent 76%) !important;
  box-shadow: 0 0 25px rgba(255, 226, 113, .86), inset 0 0 20px rgba(255, 255, 225, .4) !important;
}

.arena-wrap:not(.boss-encounter) .combat-feed {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  min-width: 300px;
  transform: translate(-50%, -50%);
}

.arena-wrap:not(.boss-encounter) .enemy-side-label { top: 2.8%; left: 13%; }
.arena-wrap:not(.boss-encounter) .player-side-label { right: 13%; bottom: 2.8%; }
.enemy-side-label span::before { content: "RIVAL FORMATION · "; color: #ffb2be; }
.player-side-label span::before { content: "YOUR PALS · "; color: #aaffe0; }

/* Action-only motion: spells travel, choices deal, and combat calls its target. */
.critter-card.recruit-pop { animation: recruitPop .58s cubic-bezier(.16, .88, .22, 1.18) both; z-index: 24; }
.critter-card.bench-return { animation: benchReturn .46s cubic-bezier(.18, .86, .28, 1.08) both; z-index: 24; }
.critter-card.hero-blessing { animation: heroBlessing .74s ease both; z-index: 24; }

@keyframes recruitPop {
  0% { opacity: .15; transform: translateY(20px) scale(.62) rotate(-5deg); filter: brightness(1.7) saturate(1.3); }
  58% { opacity: 1; transform: translateY(-8px) scale(1.1) rotate(1deg); filter: brightness(1.22) drop-shadow(0 0 16px rgba(126, 255, 203, .82)); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes benchReturn {
  0% { opacity: .25; transform: translateY(-18px) scale(.78); filter: brightness(1.55); }
  68% { opacity: 1; transform: translateY(4px) scale(1.07); filter: brightness(1.16) drop-shadow(0 0 12px rgba(255, 217, 121, .55)); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes heroBlessing {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.42) saturate(1.18) drop-shadow(0 0 17px rgba(249, 218, 109, .88)); }
}

.market-reroll .shop-critter { animation: marketDeal .46s cubic-bezier(.18, .88, .22, 1.12) both; }
.market-reroll .shop-critter:nth-child(2) { animation-delay: .05s; }
.market-reroll .shop-critter:nth-child(3) { animation-delay: .1s; }
.market-reroll .shop-critter:nth-child(4) { animation-delay: .15s; }
.market-reroll .shop-critter:nth-child(5) { animation-delay: .2s; }
@keyframes marketDeal {
  0% { opacity: 0; transform: translateY(28px) rotate(-3deg) scale(.82); }
  65% { opacity: 1; transform: translateY(-5px) rotate(.6deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

.spell-trail {
  position: absolute;
  z-index: 60;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor, 0 0 21px currentColor;
  color: #8dffe0;
  mix-blend-mode: screen;
  animation: spellFlight .52s cubic-bezier(.18, .78, .22, 1) both;
}
.spell-trail::before,
.spell-trail::after { content: ""; position: absolute; border-radius: inherit; inset: 3px; background: currentColor; box-shadow: 0 0 9px currentColor; }
.spell-trail::after { inset: -8px; opacity: .3; filter: blur(3px); }
.spell-trail--rival { color: #ff7588; }
.spell-trail--boon { color: #ffd26f; }
.spell-trail--self { animation-name: spellBloom; }
@keyframes spellFlight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(50deg); }
  78% { opacity: 1; transform: translate(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y))) scale(.82) rotate(210deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y))) scale(1.65) rotate(270deg); }
}
@keyframes spellBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.65); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

.critter-card.combat-attacking { outline: 2px solid #a6ffe0; outline-offset: 4px; filter: brightness(1.12) saturate(1.14); }
.enemy-board .critter-card.combat-attacking { outline-color: #ffbd9b; }
.critter-card.combat-targeted { outline: 2px solid #ffdd7c; outline-offset: 4px; filter: brightness(1.16) saturate(1.2); }
.enemy-board .critter-card.combat-targeted { outline-color: #ff8797; }

.heal-number {
  position: absolute;
  z-index: 72;
  top: 29%;
  left: 50%;
  padding: 2px 6px;
  border: 1px solid #ddffd3;
  border-radius: 8px;
  background: linear-gradient(#5ccf91, #236450);
  color: #f2ffe4;
  font-family: "Baloo 2", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px #173d32;
  box-shadow: 0 0 15px rgba(103, 255, 185, .76);
  animation: healFloat .88s cubic-bezier(.16, .8, .27, 1) forwards;
}
@keyframes healFloat {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.62); }
  30% { opacity: 1; transform: translate(-50%, -5px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -43px) scale(.9); }
}

/* Keep the tabletop clean: empty slots are quiet touch targets, not card-shaped cages. */
.arena-wrap:not(.boss-encounter) .enemy-board,
.arena-wrap:not(.boss-encounter) .player-board { border-color: transparent; }
.arena-wrap:not(.boss-encounter) .enemy-board .board-slot.empty {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.arena-wrap:not(.boss-encounter) .player-board .board-slot.empty {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.arena-wrap:not(.boss-encounter) .player-board .board-slot.empty span {
  opacity: .48;
  transform: translateY(7px) scale(.82);
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}
.arena-wrap:not(.boss-encounter) .player-board .board-slot.empty:hover span {
  opacity: 1;
  transform: translateY(3px) scale(1);
  filter: brightness(1.22);
}
body.drag-active .arena-wrap:not(.boss-encounter) .player-board .board-slot.empty {
  border: 1px solid rgba(139, 255, 213, .82) !important;
  background: radial-gradient(ellipse, rgba(88, 255, 195, .28), rgba(12, 40, 30, .08) 72%) !important;
  box-shadow: 0 0 18px rgba(85, 255, 200, .46) !important;
}