/* Meowstone illustrated card skin. Text and live stats stay in the DOM. */
#screenGame .card.card-illustrated{overflow:visible!important}
.card.card-illustrated {
  --rarity-ink: #bba27b;
  background: #392519 !important;
  border: 0 !important;
  border-radius: 8% !important;
  color: #38200f;
  box-shadow: 0 7px 15px #0009, 0 0 0 1px #6d4a29 !important;
  isolation: isolate;
}
.card.card-illustrated::before {
  inset: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: url('assets/ui/card-frame.svg') center / 100% 100% no-repeat !important;
  z-index: 4 !important; opacity: 1 !important; animation: none !important;
  filter: none !important; transform: none !important;
}
.card.card-illustrated::after { display: none !important; }
.card.card-illustrated.rarity-rare { --rarity-ink: #3d9cf0; }
.card.card-illustrated.rarity-epic { --rarity-ink: #b263ee; }
.card.card-illustrated.rarity-legendary { --rarity-ink: #f7aa34; }
.card.card-illustrated.rarity-legendary::before { filter: sepia(.18) saturate(1.18) brightness(1.08) !important; }
.card.card-illustrated.rarity-divine { --rarity-ink: #ffebae; background: #392519 !important; box-shadow: 0 7px 18px #0009, 0 0 17px #f3ce8480 !important; }
.card.card-illustrated.rarity-divine::before { filter: brightness(1.12) saturate(.85) !important; }
.card.card-illustrated .card-art {
  position: absolute !important; inset: 7% 8% auto !important; width: 84% !important;
  height: 43% !important; margin: 0 !important; padding: 0 !important;
  border-radius: 15% 15% 3% 3% / 9% 9% 3% 3% !important;
  background: #251d1b !important; border: 0 !important; z-index: 2 !important;
  box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important;
}
.card.card-illustrated .card-art::before, .card.card-illustrated .card-art::after,
.card.card-illustrated .card-art-fx, .card.card-illustrated .card-art-emoji { display: none !important; }
.card-illustration { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; user-select: none; pointer-events: none; }
.card.card-illustrated .card-illustration { position: absolute; inset: 0; border-radius: inherit; transform: none !important; animation: none !important; filter: none !important; }
.card.card-illustrated .card-name, .card.card-illustrated.rarity-divine .card-name {
  position: absolute !important; left: 10% !important; right: 17% !important; top: 52% !important;
  height: 10% !important; margin: 0 !important; padding: 0 1px !important; z-index: 7 !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: clamp(10px, calc(var(--card-w) * .083), 18px) !important;
  line-height: 1.04 !important; color: #33200e !important; font-weight: 900 !important;
  text-shadow: 0 1px #ffe6ac !important; white-space: normal !important;
  overflow: hidden !important; overflow-wrap: anywhere; text-align: center;
  letter-spacing: -.025em !important;
  background: none !important;
}
.card.card-illustrated .card-desc, .card.card-illustrated .card-kw-line {
  position: absolute !important; top: 65% !important; left: 13% !important; right: 13% !important;
  height: 26% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important;
  color: #342315 !important; font-size: var(--description-font, clamp(9px, calc(var(--card-w) * .082), 15px)) !important;
  line-height: 1.12 !important; text-align: center; font-weight: 700 !important;
  display: block !important; -webkit-line-clamp: unset !important;
  overflow: hidden !important; background: none !important; border: 0 !important;
  text-shadow: none !important; white-space: normal !important; overflow-wrap: anywhere;
}
.card.card-illustrated .description-scrollable { overflow-y: auto !important; scrollbar-width: thin; overscroll-behavior: contain; }
.card.card-illustrated .card-cost {
  top: -3% !important; left: -3% !important; width: 25% !important; height: auto !important;
  aspect-ratio: 1; min-width: 25px; border: 2px solid #d5af69 !important;
  color: #fff !important; background: radial-gradient(circle at 32% 22%, #8bd8ff, #1761bd 53%, #123364 90%) !important;
  box-shadow: 0 2px 4px #0009, inset 0 0 0 2px #153566 !important;
  font-size: clamp(13px, calc(var(--card-w) * .14), 25px) !important;
  text-shadow: 1px 2px 2px #102c56; z-index: 9 !important;
}
.card.card-illustrated .card-stats { bottom: -1% !important; left: -1% !important; right: -1% !important; padding: 0 !important; z-index: 9 !important; height: auto !important; }
.card.card-illustrated .stat { width: 24% !important; min-width: 25px !important; height: auto !important; aspect-ratio: 1; border: 2px solid #d9ad60 !important; box-shadow: 0 2px 4px #0008, inset 0 0 0 2px #63451e !important; font-size: clamp(13px, calc(var(--card-w) * .13), 24px) !important; }
.card.card-illustrated .stat.attack { background: radial-gradient(circle at 32% 25%, #ffe9a0, #d18c15 55%, #74420b 90%) !important; }
.card.card-illustrated .stat.health { background: radial-gradient(circle at 32% 25%, #ffb4ae, #b82728 55%, #65121c 90%) !important; }
.card.card-illustrated .card-badges { position: absolute !important; inset: 9% 9% auto auto !important; display: flex !important; flex-direction: column; gap: 2px; z-index: 8 !important; max-height: 43%; overflow: hidden; }
.card.card-illustrated .kw-badge { width: 18px; height: 18px; min-width: 0; font-size: 11px !important; background: #20191be8; border: 1px solid #d6b570; box-shadow: 0 1px 3px #0007; animation: none !important; }
.card.card-illustrated .kw-theme { display: none; }
.card.card-illustrated .card-rarity-gem { position: absolute; top: 55%; right: 9%; width: 8px; height: 8px; background: var(--rarity-ink); border: 1px solid #70491e; box-shadow: 0 0 4px var(--rarity-ink); transform: rotate(45deg); z-index: 8; }
.card.card-illustrated .taunt-frame { display: none !important; }
.card.card-illustrated.has-taunt .taunt-banner { display: block !important; left: auto !important; right: 7% !important; top: 45% !important; width: auto !important; height: auto !important; font-size: 16px !important; line-height: 1 !important; opacity: 1 !important; transform: none !important; animation: none !important; z-index: 8 !important; filter: drop-shadow(0 1px 2px #000) !important; }
.card.card-illustrated.has-divine-shield .card-art { box-shadow: inset 0 0 0 2px #fff3af, 0 0 9px #f7e5a7 !important; }
.card.card-illustrated .card-spell-label { position: absolute; bottom: 5% !important; top: auto !important; left: 27%; right: 27%; z-index: 8; font-size: clamp(7px, calc(var(--card-w) * .06), 12px) !important; color: #563a1a !important; background: none !important; }
.card.card-illustrated .spell-amount-badge { position: absolute !important; bottom: -1% !important; right: -1% !important; top: auto !important; left: auto !important; width: 25% !important; height: auto !important; aspect-ratio: 1; z-index: 9; background: radial-gradient(circle at 30% 25%, #e4b8ff, #7835a8 60%, #35114e) !important; border: 2px solid #d9ad60 !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(13px, calc(var(--card-w) * .13), 24px) !important; color: white; }
.card.card-spell.card-illustrated .card-art { border-radius: 3% !important; }
.card.card-back { background: url('assets/ui/card-back.svg?v=1.14.0') center / 100% 100% no-repeat !important; border: 0 !important; }
.card.card-back::before, .card.card-back::after, .card-back .card-back-inner { display: none !important; }
.deck-row .deck-row-icon { width: 48px; height: 42px; min-width: 48px; display: block; border: 1px solid #ab8043; border-radius: 5px; overflow: hidden; background: #241c18; }
.deck-row .art-thumbnail { width: 100%; height: 100%; }
.shop-art { overflow: hidden; border: 2px solid #be975d; border-radius: 9px; aspect-ratio: 8/7; height: auto !important; width: 100%; padding: 0 !important; background: #241c18; }
.shop-art .card-illustration { position: static; width: 100%; height: 100%; object-fit: cover; }
.card.card-illustrated.can-play, .card.card-illustrated.can-attack { outline: 2px solid #9cdda0; outline-offset: 2px; }
.card.card-illustrated.selected { outline: 3px solid #65baff; outline-offset: 3px; box-shadow: 0 0 20px #439be8b3, 0 12px 24px #0008 !important; }
.card.card-illustrated.attacker { outline: 3px solid #ffc06d; outline-offset: 3px; box-shadow: 0 0 20px #e89050b3, 0 12px 24px #0008 !important; }
.card.card-illustrated.targetable { outline: 3px solid #ff7d7d; outline-offset: 3px; box-shadow: 0 0 18px #ff505099 !important; }
.card.card-illustrated.exhausted { filter: brightness(.72) saturate(.7) !important; }
@media (prefers-reduced-motion: reduce) { .card.card-illustrated { animation: none !important; } }

/* Painted hero portraits share the cards' bronze frame and feline fantasy style. */
.hero-avatar-image {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #cda56c;
  box-sizing: border-box;
  background: #291d18;
  box-shadow: 0 2px 7px #0008;
  user-select: none;
  pointer-events: none;
}

/* Persistent states occupy their own layers and leave names, rules and stats clear. */
#screenGame .card.card-illustrated>.status-shell,#screenGame .card.card-illustrated>.status-ice,#screenGame .hero-portrait>.status-ice{display:none;position:absolute;pointer-events:none;box-sizing:border-box}
#screenGame .card.card-illustrated.has-divine-shield>.status-shell{display:block;inset:-5px;z-index:5;border:3px solid #ffe7a2;border-radius:45% 45% 22% 22% / 24% 24% 16% 16%;background:radial-gradient(ellipse at 28% 12%,#fff6ca40,transparent 42%),linear-gradient(120deg,#ffe7a20f,transparent 45%,#ffd67e1f);box-shadow:0 0 0 1px #9c702e,0 0 19px #ffd78688,inset 0 0 15px #ffe7a244}
#screenGame .card.card-illustrated.has-divine-shield>.status-shell::before{content:"";position:absolute;inset:4px;border:1px solid #fff5cc99;border-radius:inherit;pointer-events:none}
#screenGame .card.card-illustrated.has-divine-shield>.status-shell::after{content:"";position:absolute;left:45%;top:36%;width:15%;height:14%;background:linear-gradient(145deg,#fff8d9,#e9ba62);clip-path:polygon(50% 0,96% 18%,90% 65%,50% 100%,10% 65%,4% 18%);box-shadow:0 0 10px #ffedb9}
#screenGame .card.card-illustrated.has-divine-shield .card-art{box-shadow:inset 0 0 0 2px #fff1ba,0 0 16px #efc76f80!important}
#screenGame .card.card-illustrated.is-frozen{filter:none!important;box-shadow:0 0 0 2px #c8f7ff,0 0 23px #80d7ff88!important}
#screenGame .card.card-illustrated.is-frozen .card-illustration{filter:saturate(.5) brightness(1.14)!important}
#screenGame .card.card-illustrated.is-frozen>.status-ice{display:block;inset:-5px;z-index:5;border:3px solid #c6f4ff;border-radius:13px;background:linear-gradient(135deg,#e7fcff70,transparent 22%,transparent 78%,#d1f7ff77),radial-gradient(ellipse at 0 50%,#bdeeff55,transparent 22%),radial-gradient(ellipse at 100% 50%,#bdeeff55,transparent 22%);box-shadow:0 0 0 1px #5fafd3,inset 0 0 17px #c2f2ff66,0 0 16px #81d5ff55}
#screenGame .card.card-illustrated.is-frozen>.status-ice::before{content:"";position:absolute;inset:-5px;background:linear-gradient(100deg,#b2eafa88,transparent 24%,transparent 76%,#b2eafa88);clip-path:polygon(0 0,11% 5%,17% 0,29% 8%,38% 0,52% 5%,65% 0,79% 7%,90% 0,100% 0,95% 15%,100% 28%,95% 45%,100% 65%,95% 80%,100% 100%,85% 94%,72% 100%,56% 94%,38% 100%,23% 94%,8% 100%,0 100%,5% 83%,0 65%,5% 45%,0 28%,5% 15%)}
#screenGame .card.card-illustrated.is-frozen>.status-ice::after,#screenGame .hero-portrait.is-frozen>.status-ice::after{content:"";position:absolute;left:50%;top:29%;width:26px;height:26px;transform:translate(-50%,-50%);border:1px solid #e6fdff;border-radius:50%;background:linear-gradient(90deg,transparent 46%,#e9fcff 46% 54%,transparent 54%),linear-gradient(30deg,transparent 46%,#e9fcff 46% 54%,transparent 54%),linear-gradient(150deg,transparent 46%,#e9fcff 46% 54%,transparent 54%),#174b6ae8;box-shadow:0 0 9px #b7efff}
#screenGame .hero-portrait.is-frozen{border-color:#ccf8ff!important;box-shadow:0 0 0 2px #8dd8ee88,0 0 23px #80d7ff77,inset 0 0 17px #abdfff33!important}
#screenGame .hero-portrait.is-frozen>.status-ice{display:block;inset:-3px;z-index:3;border:2px solid #d2f7ff;border-radius:inherit;box-shadow:inset 0 0 14px #bcf1ff55;background:linear-gradient(120deg,#dcfaff33,transparent 30%,transparent 75%,#dcfaff44)}
#screenGame .hero-portrait.is-frozen>.status-ice::after{left:26%;top:74%;width:22px;height:22px}
#screenGame .hero-portrait.is-frozen .hero-avatar-image{filter:saturate(.45) brightness(1.12);border-color:#d1f6ff}
#screenGame .card.card-illustrated.has-taunt{outline:2px solid #b3cce6;outline-offset:4px}
#screenGame .card.card-illustrated.has-taunt .taunt-frame{display:block!important;position:absolute!important;inset:-6px!important;z-index:3!important;border:3px solid #bed8ed!important;border-radius:10px 10px 17px 17px!important;background:linear-gradient(90deg,#506d8e40,transparent 14%,transparent 86%,#506d8e40)!important;box-shadow:0 0 0 1px #35516c,inset 0 0 0 2px #162944,0 0 14px #a6d2f133!important;animation:none!important;transform:none!important}
#screenGame .card.card-illustrated.has-taunt .taunt-frame::after{content:"";position:absolute;bottom:-12px;left:calc(50% - 17px);width:34px;height:15px;background:#bcd8ec;clip-path:polygon(0 0,100% 0,84% 55%,50% 100%,16% 55%);filter:drop-shadow(0 2px 2px #12253b)}
#screenGame .card.card-illustrated.has-taunt .taunt-banner{border:1px solid #d6eaff!important;border-radius:5px!important;background:linear-gradient(145deg,#385c7d,#142c47)!important;color:#f3faff!important;box-shadow:0 2px 6px #06142699;letter-spacing:.025em!important}