/* thewowdb.com/games/ hub. One static page, no JS. Built from the client's own UI art (assets/ui), same
   technique as wowgoldfarms/assets/wgf-chrome.css: 56px red-button caps + tiled centre, inset-frame 9-slice,
   metal frame corners, quality item rings, FrizQT headings. No green chrome (Blizzard palette). */
@font-face { font-family: "FrizQT"; src: url("assets/fonts/frizqt.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Morpheus"; src: url("assets/fonts/morpheus.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #0b0a08; --panel: #14110c; --panel-2: #1b160e; --line: #3a2f1a; --text: #f4ecd8; --dim: #bfb399;
  --gold: #ffd100; --gold-bright: #ffe375; --gold-dim: #c9a227; --ink: #2a1c08; --ink-soft: #4a3512;
  --q-white: #ffffff; --q-blue: #0070dd; --q-purple: #a335ee; --q-orange: #ff8000;
  --ink-outline: 0 1px 2px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.6);
  --game: "FrizQT", "Palatino Linotype", Palatino, Georgia, serif;
  --lore: "Morpheus", "FrizQT", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --btn-h: 46px; --btn-cap: 20px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 17px/1.55 var(--ui); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(120% 60% at 50% 0, #1d160b 0, var(--bg) 60%) no-repeat, var(--bg); overflow-x: hidden; }
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }

/* in-game window: dark dialog texture, bevelled tooltip-border frame, bronze title band */
.frame, .game {
  background: url("assets/ui/dialogbox-background-dark.png") 0 0 / 64px 64px repeat, #0f0c09;
  border: 12px solid transparent;
  border-image: url("assets/ui/tooltip-border-9slice.png") 16 fill / 12px stretch;
  box-shadow: 0 0 0 1px #000, 0 8px 22px rgba(0,0,0,.65);
}
.bar { display: flex; align-items: center; gap: 6px 24px; padding: 8px 20px; background: #0f0c07; border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 #000; }
.bar .home { flex: none; font: 400 20px/1 var(--game); color: var(--gold); text-decoration: none; text-shadow: var(--ink-outline); letter-spacing: .02em; }
.bar nav { display: flex; gap: 4px 6px; font: 400 14px/1 var(--game); overflow-x: auto; white-space: nowrap; min-width: 0; scrollbar-width: thin; }
.bar nav a { color: var(--dim); text-decoration: none; padding: 12px 12px; border-radius: 2px; }
.bar nav a:hover { color: var(--gold-bright); background: rgba(255,209,0,.08); }

main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 56px; }

.intro { position: relative; padding: 18px 22px 30px; margin-bottom: 28px; }
.kicker { margin: -18px -22px 18px; padding: 10px 22px; color: var(--gold-bright); font: 400 14px/1 var(--game); letter-spacing: .18em; text-transform: uppercase; text-shadow: var(--ink-outline); background: linear-gradient(#6a4513, #3a2509 55%, #24160a); border-bottom: 2px solid #000; box-shadow: inset 0 1px 0 #e0b54a, inset 0 -1px 0 rgba(255,209,0,.3); }
h1 { margin: 0 0 14px; font: 400 clamp(28px, 5vw, 46px)/1.1 var(--game); color: var(--gold); text-shadow: var(--ink-outline); text-wrap: balance; }
.lede { margin: 0; max-width: 46rem; color: var(--text); font-size: 18px; text-wrap: pretty; }

/* Group Finder style list: art | icon + title + text + tooltip + button */
.games { display: grid; gap: 22px; }
.game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; }
.game:nth-child(even) .art { order: 2; }
.game .head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 10px; margin: 0; background: linear-gradient(#6a4513, #3a2509 55%, #24160a); border-bottom: 2px solid #000; box-shadow: inset 0 1px 0 #e0b54a, inset 0 -1px 0 rgba(255,209,0,.3); }
.game:nth-child(even) .head { order: -1; }
.art { position: relative; display: block; aspect-ratio: 1200 / 630; align-self: center; background: #14100a; border: 2px solid #000; outline: 2px solid #8a6a22; outline-offset: -4px; margin: 14px 0 14px 14px; }
.game:nth-child(even) .art { margin: 14px 14px 14px 0; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.body { padding: 16px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.body p { margin: 0; }
h2 { margin: 0; font: 400 clamp(24px, 2.8vw, 32px)/1.1 var(--game); color: var(--gold-bright); text-shadow: var(--ink-outline); }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { color: #fff; text-decoration: underline; }
.genre { margin: 4px 0 0; color: #ffd100; font: 400 13px/1.2 var(--game); letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--ink-outline); }

/* item icon with a real quality ring */
.ico { position: relative; flex: none; width: 72px; height: 72px; }
.ico img { position: absolute; inset: 15px; width: 42px; height: 42px; border-radius: 50%; }
.ico::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.q-white::after { background-image: url("assets/ui/auctionhouse-itemicon-border-white.png"); }
.q-blue::after { background-image: url("assets/ui/auctionhouse-itemicon-border-blue.png"); }
.q-purple::after { background-image: url("assets/ui/auctionhouse-itemicon-border-purple.png"); }
.q-orange::after { background-image: url("assets/ui/auctionhouse-itemicon-border-orange.png"); }

/* item-tooltip box for the facts */
.facts { list-style: none; margin: 0; padding: 9px 12px; width: 100%; background: rgba(8,6,12,.92); border: 1px solid #5c5a66; border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.04); font-size: 15px; line-height: 1.5; color: var(--gold); }
.facts li { padding: 1px 0; }
.facts b { color: var(--q-white); font-weight: 700; }
.fit { color: var(--dim); font-style: italic; }

/* the real red button: 56px caps + tiled centre, clipped to the content box (wgf-chrome.css) */
.play {
  display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); min-width: 96px; max-width: 100%;
  padding: 0 var(--btn-cap); border: 0; border-radius: 0; margin-top: auto;
  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;
  background-color: transparent; color: var(--gold-bright);
  font: 400 16px/1 var(--game); letter-spacing: .02em; text-align: center; text-decoration: none; text-shadow: var(--ink-outline); white-space: nowrap;
  transition: filter .12s ease;
}
.play:hover { filter: brightness(1.12); }
.play:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.play: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;
  transform: translateY(1px); filter: brightness(.92);
}

/* comparison table as a dark list window */
.pick { margin-top: 28px; padding: 18px 22px 18px; }
.pick h2 { margin: -18px -22px 14px; padding: 10px 22px; font-size: clamp(22px, 3vw, 28px); background: linear-gradient(#6a4513, #3a2509 55%, #24160a); border-bottom: 2px solid #000; box-shadow: inset 0 1px 0 #e0b54a, inset 0 -1px 0 rgba(255,209,0,.3); }
.faq h2 { margin: 0 0 14px; font-size: clamp(22px, 3vw, 30px); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 11px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { font: 400 13px/1.2 var(--game); color: var(--gold-dim); letter-spacing: .1em; text-transform: uppercase; background: rgba(255,209,0,.06); border-bottom: 2px solid var(--line); }
tbody th { font-weight: 700; white-space: nowrap; }
tbody tr:hover td, tbody tr:hover th { background: rgba(255,209,0,.05); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* FAQ on a quest-log parchment */
.faq { margin-top: 28px; padding: 28px 30px 26px; color: var(--ink);
  background: url("assets/ui/questbg-parchment.png") center / 100% 100% no-repeat, #d9c391;
  border: 8px solid transparent; border-image: url("assets/ui/insetframe-9slice.png") 8 / 8px stretch; }
.faq h2 { color: #5a1a08; text-shadow: none; }
dl { margin: 0; }
dt { margin-top: 16px; font: 400 19px/1.3 var(--lore); color: #4a1304; }
dt:first-child { margin-top: 0; }
dd { margin: 4px 0 0; font: 400 17px/1.55 var(--ui); color: #2b1a0e; max-width: 46rem; }
.faq a { color: #7a1c08; }
.faq a:focus-visible { outline-color: #7a1c08; }

footer { max-width: 1080px; margin: 0 auto; padding: 22px 20px 44px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
footer p { margin: 0; max-width: 52rem; }

@media (max-width: 800px) {
  .game { grid-template-columns: 1fr; }
  .game:nth-child(even) .art { order: 0; margin: 14px 14px 0; }
  .art, .game:nth-child(even) .art { margin: 14px 14px 0; min-height: 0; aspect-ratio: 1200 / 630; }
  .game:nth-child(even) .head { order: 0; }
  .intro { padding: 18px 16px 24px; }
  .pick, .faq { padding: 20px 16px; }
}
@media (max-width: 480px) {
  html { font-size: 16px; }
  main { padding: 18px 12px 40px; }
  .bar { padding: 4px 12px; gap: 12px; }
  .body { padding: 16px 14px 18px; }
  .play { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .play { transition: none; } }