/* Shop skin v2: real WoW UI art (assets/ui from wowgoldfarms/assets/ui + coins). Overrides shop-scene.css; module: shop screen only. */
:root { --wow-gold: #ffd100; --wow-trim: #8a6a2c; }

/* money: white digits + real gold coin, Friz Quadrata like the in-game money frame */
.scene .coin, .tag .coin { width: 15px; height: 15px; border-radius: 0; background: url(../assets/ui/gold-hd.png) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.tag .coin { width: 17px; height: 17px; }

/* price plate: the Auction House dark-metal plate instead of the yellow tent */
.tag { padding: 5px 13px 5px 15px; min-width: 54px; justify-content: center; font-family: var(--font-body); font-size: 17px; font-weight: bold; color: #fff;
  background: url(../assets/ui/auctionhouse-nav-button.png) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.65)); transition: transform .14s, filter .14s; }
.tag::before, .tag::after { content: none; }
.tag b { -webkit-text-stroke: 0; paint-order: normal; text-shadow: 0 1px 1px #000, 0 0 3px #000; letter-spacing: .02em; }
.tag:disabled { filter: drop-shadow(0 3px 3px rgba(0,0,0,.65)) saturate(.3) brightness(.7); }
.tag:disabled b { color: #c0392b; }
.tag.empty { opacity: .45; }

/* shelf plank: real dark-wood board tile */
.shelf::after { height: 19px; border-radius: 1px; background: url(../assets/ui/wood-edge-top.png) repeat-x left top / auto 100%;
  box-shadow: 0 1px 0 #000, 0 9px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,225,170,.28); }
.shelf::before { background: linear-gradient(90deg, #1c1108 0 10px, transparent 10px calc(100% - 10px), #1c1108 calc(100% - 10px)); }

/* wooden signs: dark wood + gold lettering + thin gold trim */
.scene .sign { color: #f2d089; font-size: 19px; padding: 6px 22px; border-radius: 3px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.7);
  background: url(../assets/ui/wood-edge-top.png) left top / auto 100% repeat;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--wow-trim), inset 0 0 12px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.65); }
button.sign { cursor: pointer; border: 0; }

/* parchment cards: the quest-log paper with an aged edge and a wood frame */
.stats-card { width: 206px; padding: 6px 8px; border: 24px solid transparent; border-image: url(../assets/ui/frame-wood.png) 64 / 24px stretch; border-radius: 0; background: none; box-shadow: none; position: relative; }
.stats-card::before { content: ""; position: absolute; inset: -4px; z-index: -1; background: url(../assets/ui/questbg-parchment.png) center / 100% 100%;
  box-shadow: inset 0 0 22px rgba(90,50,10,.55), 0 6px 12px rgba(0,0,0,.6); }
.reroll-tag { border-radius: 2px; color: #3a2410; background: url(../assets/ui/questbg-parchment.png) center / 100% 100%;
  box-shadow: inset 0 0 12px rgba(100,60,15,.55), 0 0 0 1px #3a2410, 0 4px 8px rgba(0,0,0,.65); }
.reroll-tag::before { background: #b08a3a; width: 1px; box-shadow: 1px 0 0 rgba(0,0,0,.5); }
.reroll-tag .coin { width: 15px; height: 15px; }
.reroll-tag b { font-family: var(--font-body); font-size: 16px; }
.reroll-tag b { color: #2a1608; }

/* FIGHT button: WoW 128-redbutton art pre-composited and pre-scaled to exact 1:1 (88x64, 28px caps) so border-image never resamples the bevel */
.scene .fight-sign { position: relative; box-sizing: border-box; height: 64px; min-height: 64px; padding: 0 14px; border-style: solid; border-width: 0 28px; border-color: transparent; border-radius: 0; box-shadow: none; gap: 2px; justify-content: center; background: none;
  border-image: url(../assets/ui/fightbtn-n.png) 0 28 fill / 0 28px / 0 stretch;
  color: #ffd100; font-size: 28px; line-height: 1; letter-spacing: .02em; text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 12px rgba(255,60,20,.55);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)); transition: filter .15s, transform .08s; transform: none; animation: fight-pulse 3.2s ease-in-out infinite; }
.scene .fight-sign::after { content: ""; position: absolute; inset: 0 -20px; background: url(../assets/ui/128-redbutton-highlight.png) center / 100% 100% no-repeat; opacity: 0; pointer-events: none; transition: opacity .15s; mix-blend-mode: screen; }
.scene .fight-sign small { font-family: var(--font-body); font-size: 11px; letter-spacing: .18em; color: #e8c872; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,235,170,.25); }
.scene .fight-sign:active { transform: translateY(2px); filter: brightness(.88) drop-shadow(0 2px 2px rgba(0,0,0,.7)); border-image-source: url(../assets/ui/fightbtn-p.png); }
.scene .fight-sign:focus-visible { outline: 2px solid #ffd100; outline-offset: 3px; }
.scene .fight-sign:disabled { cursor: default; animation: none; filter: grayscale(.4) brightness(.8); color: #9a8a60; border-image-source: url(../assets/ui/fightbtn-d.png); }
@keyframes fight-pulse { 0%,100% { filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)); } 50% { filter: drop-shadow(0 0 8px rgba(255,190,60,.5)) drop-shadow(0 4px 3px rgba(0,0,0,.7)); } }
@media (prefers-reduced-motion: reduce) { .scene .fight-sign { animation: none; transition: none; } }
@media (max-width: 640px) { .scene .fight-sign { font-size: 24px; } }

/* shoploop: hover-only rules gated to real hover devices; touch gets :active */
@media (hover: hover) {
  .tag:hover:not(:disabled) { transform: translateY(-1px); filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)) brightness(1.25); }
  button.sign:hover { filter: brightness(1.25); }
  .scene .fight-sign:hover { transform: none; filter: brightness(1.18) drop-shadow(0 0 9px rgba(255,200,70,.55)) drop-shadow(0 4px 3px rgba(0,0,0,.7)); animation: none; }
  .scene .fight-sign:hover::after { opacity: .6; }
}
.tag:active:not(:disabled), .reroll-tag:active:not(:disabled), button.sign:active, .ware-art:active { transform: scale(.96); filter: brightness(1.15); }