/* WoW window chrome: tokens, Friz font, metal frame, title band, tabs, inset frames, portrait ring, money frame, dropdown.
   Technique copied from wowgoldfarms wgf-chrome.css (.wgf-window): metal corner PNGs + tiled edge slices over the Class Hall stone. Art in assets/ui. */
@font-face { font-family: "FrizQuadrata"; src: url(../assets/ui/frizqt.woff2) format("woff2"); font-display: swap; }

:root {
  --font-game: "FrizQuadrata", "Palatino Linotype", Georgia, serif;
  --gold: #ffd100;
  --gold-bright: #ffe375;
  --gold-dim: #b79b3d;
  --text: #e6dcc6;
  --muted: #9a9078;
  --plate: #120e0a;
  --ink: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd; --q4: #a335ee; --q5: #ff8000;
  --green: #1eff00; --bad: #ff2020;
  --window-bg: linear-gradient(rgba(0,0,0,.44), rgba(0,0,0,.44)), url(../assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat, var(--plate);
  --band: url(../assets/ui/ui-frame-metal-edgetop-2x.png) left top -26px / 51.2px 120px repeat-x;
}

/* ---- window frame */
.gr-window { position: relative; box-sizing: border-box; background: var(--window-bg); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.gr-window::before, .gr-window::after { content: ""; position: absolute; pointer-events: none; z-index: 2; }
.gr-window::before {
  inset: 0;
  background:
    url(../assets/ui/ui-frame-metal-cornertopleft-2x.png)      left  -19px top    -26px / 120px 120px no-repeat,
    url(../assets/ui/ui-frame-metal-cornertopright-2x.png)     right  -9px top    -26px / 120px 120px no-repeat,
    url(../assets/ui/ui-frame-metal-cornerbottomleft-2x.png)   left  -19px bottom  -7px / 51.2px 51.2px no-repeat,
    url(../assets/ui/ui-frame-metal-cornerbottomright-2x.png)  right  -9px bottom  -7px / 51.2px 51.2px no-repeat,
    url(../assets/ui/ui-frame-metal-edgeleft-2x.png)           left  -19px top 0 / 120px 25.6px repeat-y,
    url(../assets/ui/ui-frame-metal-edgeright-2x.png)          right  -9px top 0 / 120px 25.6px repeat-y;
  background-clip: border-box, border-box, border-box, border-box, padding-box, padding-box;
  background-origin: border-box;
  border: solid transparent; border-width: 30px 0;
}
.gr-window::after { left: 32px; right: 26px; bottom: 0; height: 51.2px; background: url(../assets/ui/ui-frame-metal-edgebottom-2x.png) left bottom -7px / 25.6px 51.2px repeat-x; }

.gr-title {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 42px; margin: 0; padding: 1px 8px 8px;
  border: 0 solid transparent; border-inline-width: 30px 24px;
  background: var(--band); background-clip: padding-box; background-origin: padding-box;
  color: var(--gold); font: 700 17px/1.25 var(--font-game); font-variant: small-caps; letter-spacing: .03em; text-shadow: var(--ink); text-align: center;
}
.gr-title--portrait { border-inline-start-width: 76px; }
.gr-body { position: relative; z-index: 3; padding: 12px 18px 30px; }
.gr-x { position: absolute; top: 19px; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; background: url(../assets/ui/128-redbutton-exit.png) center / contain no-repeat; cursor: default; z-index: 4; }
.gr-x:active { background-image: url(../assets/ui/128-redbutton-exit-pressed.png); }

/* portrait ring: round metal ring around an icon, hanging over the top-left corner */
.gr-portrait { position: absolute; left: 6px; top: -6px; width: 64px; height: 64px; z-index: 5; pointer-events: none; }
.gr-portrait img { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.gr-portrait::after { content: ""; position: absolute; inset: -14px 0 0 -12px; background: url(../assets/ui/ui-frame-portraitmetal-cornertopleftsmall-2x.png) left top / 90px 90px no-repeat; }

/* ---- tabs hanging below a frame: the pressed/unpressed red-button language (wgf .wgf-tab) */
.gr-tabs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px; margin-top: -2px; }
.gr-tab {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; border-radius: 0;
  background: url(../assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
              url(../assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
              url(../assets/ui/128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  color: var(--gold-dim); font: 700 13px/1 var(--font-game); letter-spacing: .02em; text-shadow: var(--ink); cursor: pointer; filter: brightness(.66) saturate(.9);
  transition: filter .12s, color .12s;
}
.gr-tab:hover { filter: brightness(.9); color: var(--gold-bright); }
.gr-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.gr-tab.is-active {
  background: url(../assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
              url(../assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
              url(../assets/ui/128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  color: var(--gold-bright); filter: none; transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--gold-bright);
}
.gr-badge { display: inline-block; min-width: 16px; padding: 1px 4px; border-radius: 8px; background: #c41e1e; color: #fff; font-size: 11px; line-height: 14px; text-align: center; text-shadow: none; }
.gr-badge[hidden] { display: none; }

/* ---- inset frame (9-slice) */
.gr-inset { box-sizing: border-box; border: 8px solid transparent; border-image: url(../assets/ui/insetframe-9slice.png) 8 fill / 8px stretch; background-color: rgba(0,0,0,.35); }
.gr-sheet { padding: 4px 0; }

/* ---- money frame + dropdown */
.gr-money { display: flex; justify-content: flex-end; margin-top: 8px; }
.gr-money__in { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; box-sizing: border-box; height: 19px; min-width: 150px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--font-game); text-shadow: var(--ink);
  background: url(../assets/ui/moneyframe-left.png) left center / auto 100% no-repeat, url(../assets/ui/moneyframe-right.png) right center / auto 100% no-repeat, url(../assets/ui/moneyframe-middle.png) center / 100% 100% no-repeat; }
.gr-select-wrap { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.gr-select {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; height: 34px; min-width: 150px; padding: 0 34px 0 18px; border: 0; border-radius: 0; color: var(--gold-bright); font: 700 14px/34px var(--font-game); text-shadow: var(--ink); cursor: pointer;
  background: url(../assets/ui/auctionhouse-ui-dropdown-arrow-down.png) right 4px center / 22px no-repeat,
              url(../assets/ui/auctionhouse-ui-dropdown-left.png) left center / auto 100% no-repeat,
              url(../assets/ui/auctionhouse-ui-dropdown-right.png) right center / auto 100% no-repeat,
              url(../assets/ui/auctionhouse-ui-dropdown-middle.png) center / 100% 100% no-repeat;
}
.gr-select option { background: #1a1410; color: var(--gold-bright); }
.gr-select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }

/* coin icons */
i.coin { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; background: center / contain no-repeat; }
i.coin-g { background-image: url(../assets/ui/auctionhouse-icon-coin-gold.png); }
i.coin-s { background-image: url(../assets/ui/auctionhouse-icon-coin-silver.png); }
i.coin-c { background-image: url(../assets/ui/auctionhouse-icon-coin-copper.png); }
.money { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.money b { font-weight: 700; }