/* wow.andistone.uk: the stream overlay's look on a page. The game's dialog frame for panels, its tooltip
   for tooltips, its status bars, unit frames and chat tabs (the same textures the overlay uses). Marcellus
   stands in for the game's Friz Quadrata, as it does on stream. Flat colours only: no soft gradients. */
@font-face { font-family: 'Marcellus'; src: url('img/Marcellus-Regular.ttf') format('truetype'); font-display: swap; }
:root { --gold: #ffd100; --text: #f1ece0; --muted: #a59d8c; --line: #3a3226; --bg: #0c0a08; --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd; --q4: #a335ee; --q5: #ff8000;
  --horde: #b8231b; --alliance: #2456c9; --xp: #8a2be2; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 'Marcellus', Georgia, serif; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.sh { text-shadow: 1px 1px 0 #000, 2px 2px 1px rgba(0,0,0,.7); }
.ol { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px #000; }

/* the window: the overlay's stone frame, title in the band */
.window { max-width: 1240px; margin: 18px auto 40px; padding: 0 18px; }
.titlebar { display: flex; align-items: center; gap: 14px; padding: 10px 6px 14px; border-bottom: 2px solid var(--line); }
.titlebar .logo { width: 56px; height: 56px; }
.titlebar h1 { margin: 0; flex: 1; color: var(--gold); font-weight: 400; font-size: 30px; text-shadow: 2px 2px 0 #000; }
.titlebar h1 span { color: var(--text); font-size: .62em; }
.live { color: #fff; text-decoration: none; padding: 7px 18px 9px; border: solid transparent; border-width: 0 16px; border-image: url('img/ui/button-up.png') 0 18 fill / 0 16px stretch; color: var(--gold); white-space: nowrap; }
.live:hover { border-image-source: url('img/ui/button-down.png'); }

/* the tabs: the chat window's tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 0; padding-left: 8px; }
.tabs a { position: relative; display: block; padding: 4px 6px 7px; color: #c9c2a8; text-decoration: none; font-size: 16px; border: solid transparent; border-width: 0 14px;
  border-image: url('img/ui/chattab-bg.png') 0 16 fill / 0 14px stretch; text-shadow: 1px 1px 0 #000; }
.tabs a.on { color: var(--gold); border-image-source: url('img/ui/chattab-sel.png'); }
.tabs a:hover { color: #fff; }
main { min-height: 60vh; padding-top: 12px; }

/* panels: the game's dialog frame, darkened inside its frame line */
.panel { position: relative; border: 28px solid transparent; border-image: url('img/ui/dialog.png') 32 fill / 28px round; padding: 0 6px 6px; margin: 0 0 18px;
  background: rgba(0,0,0,.35) padding-box; }
.panel > h2, .panel > h3 { margin: -6px 0 10px; color: var(--gold); font-weight: 400; text-shadow: 2px 2px 0 #000; }
.panel > h2 { font-size: 24px; } .panel > h3 { font-size: 20px; }
h2.page { color: var(--gold); font-weight: 400; font-size: 28px; margin: 6px 0 4px; text-shadow: 2px 2px 0 #000; }
p.lede { color: var(--muted); max-width: 72ch; margin: 0 0 18px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }

/* icons, as the overlay's slots */
.wi { width: 40px; height: 40px; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 3px #8a8a8a; vertical-align: middle; flex: none; object-fit: cover; background: #111; }
.wi.s { width: 26px; height: 26px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a8a8a; }
.wi.l { width: 56px; height: 56px; }
.wi.gold { box-shadow: 0 0 0 2px #000, 0 0 0 3px #b8932f; }
.wi.off { filter: grayscale(1) brightness(.4); }

/* status bars */
.bar { position: relative; height: 24px; margin: 8px 0; background: rgba(0,0,0,.65); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a2e; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: url('img/ui/statusbar.png') 0 0 / 100% 100%; background-color: var(--c); background-blend-mode: multiply; }
.bar span { position: relative; display: block; text-align: center; line-height: 24px; font-size: 15px; color: #fff; }

/* Andi's unit frame (texture 256x128: portrait 42-106 x 12-76, bars 106-225, level ring centre 52,66) */
.unit { position: relative; width: 512px; height: 200px; margin: -8px auto 0; --k: 2; }
.unit > * { position: absolute; }
.unit .pt { left: calc(42px * var(--k)); top: calc(12px * var(--k)); width: calc(64px * var(--k)); height: calc(64px * var(--k)); border-radius: 50%; background: #111 center / cover; }
.unit .back { left: calc(104px * var(--k)); top: calc(21px * var(--k)); width: calc(123px * var(--k)); height: calc(45px * var(--k)); background: rgba(0,0,0,.6); border-radius: 8px; }
.unit .ub { left: calc(106px * var(--k)); width: calc(119px * var(--k)); height: calc(12px * var(--k)); background: url('img/ui/statusbar.png') 0 0 / 100% 100%; background-blend-mode: multiply; }
.unit .ut { left: calc(106px * var(--k)); width: calc(119px * var(--k)); text-align: center; color: #fff; font-size: 15px; }
.unit img.frame { left: 0; top: 0; width: calc(256px * var(--k)); height: calc(128px * var(--k)); }
.unit .lv { left: calc(41.5px * var(--k)); top: calc(58.5px * var(--k)); width: calc(21px * var(--k)); height: calc(15px * var(--k)); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 18px; }
.unit .nm { left: calc(106px * var(--k)); top: calc(23px * var(--k)); width: calc(119px * var(--k)); height: calc(16px * var(--k)); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 19px; white-space: nowrap; }

dl.stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
dl.stats dt { display: flex; align-items: center; gap: 10px; }
dl.stats dd { margin: 0; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; align-self: center; }

/* tables */
.find { font: inherit; color: var(--text); background: #120f0b; border: 1px solid #5a4628; border-radius: 4px; padding: 7px 12px; width: 100%; max-width: 360px; margin: 0 0 10px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; color: var(--gold); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid #5a4628; cursor: pointer; white-space: nowrap; user-select: none; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 5px 8px; border-bottom: 1px solid #241e16; vertical-align: middle; }
tbody tr { cursor: pointer; } tbody tr:hover td { background: rgba(255,209,0,.06); }
td .wi.s { margin-right: 3px; }

/* the Hall of Legends boards */
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.boards ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.boards li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #241e16; counter-increment: r; }
.boards li::before { content: counter(r) '.'; color: var(--muted); width: 1.7em; flex: none; }
.boards li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.boards li span { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* census */
.faction { display: flex; height: 20px; margin: 6px 0 16px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a2e; }
.tiles { display: flex; flex-wrap: wrap; gap: 12px 10px; margin: 6px 0 14px; }
.tile { width: 76px; text-align: center; font-size: 14px; color: var(--muted); }
.tile .wi { width: 48px; height: 48px; display: block; margin: 0 auto 4px; }
.tile b { display: block; color: var(--gold); font-size: 18px; font-weight: 400; }

/* the inspect window (a profile) */
.charrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.ach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.ach > div { display: flex; gap: 10px; align-items: center; }
.ach .an { color: var(--gold); } .ach .ad { color: var(--muted); font-size: 14px; }
.ach .no .an { color: #777; }
.bag { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 6px; }
.bag .it { position: relative; width: 46px; height: 46px; }
.bag .it span { position: absolute; right: 2px; bottom: 0; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

/* the dungeon run */
.dun { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.bosses { display: flex; flex-wrap: wrap; gap: 10px; }
.boss { width: 92px; text-align: center; font-size: 13px; line-height: 1.2; }
.boss img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 3px #6b5a2e; display: block; margin: 0 auto 4px; background: #111; }
.boss.dead img { filter: grayscale(1) brightness(.45); } .boss.dead { color: #777; text-decoration: line-through; }
.boss.next img { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff8000, 0 0 14px 2px rgba(255,128,0,.6); } .boss.next { color: #ff8000; }
.tag { display: inline-block; font-size: 12px; color: #1eff00; border: 1px solid #1eff0066; border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }

/* the talent frame */
.tframe { width: 400px; margin: 0 auto; }
.tgrid { position: relative; display: grid; grid-template-columns: repeat(4, 64px); grid-auto-rows: 64px; gap: 14px 22px; justify-content: center; }
.t { position: relative; width: 44px; height: 44px; margin: 10px; border-radius: 4px; background-size: 100% 100%; box-shadow: 0 0 0 2px #000, 0 0 0 3px #555; }
.t.off { filter: grayscale(1) brightness(.45); } .t.open { box-shadow: 0 0 0 2px #000, 0 0 0 3px #1eff00; } .t.max { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold); }
.t .r { position: absolute; right: -10px; bottom: -8px; background: #000; border-radius: 5px; padding: 0 4px; font-size: 13px; color: #1eff00; box-shadow: 0 0 0 1px #777; }
.t.max .r { color: var(--gold); } .t.off .r { color: #888; }
.t.unlock::after { content: ''; position: absolute; inset: -6px; border-radius: 8px; box-shadow: 0 0 10px 2px rgba(255,209,0,.35); pointer-events: none; }
.tgrid svg { position: absolute; inset: 0; pointer-events: none; }

/* the guide */
.guide h3 { margin-top: 0; }
.guide p, .guide li { color: #e2dccd; }
.guide b { color: #fff; font-weight: 400; }
.guide code, .cmd { color: var(--gold); font-family: inherit; }
.guide table td, .guide table th { cursor: default; }
.guide tbody tr { cursor: default; } .guide tbody tr:hover td { background: none; }
.cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cmdrow { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.cmdrow .c { color: #fff; font-size: 19px; } .cmdrow p { margin: 2px 0 0; color: #ffd100d9; font-size: 15px; } .cmdrow p b { color: #1eff00; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; }

/* the game's tooltip */
.tip { position: fixed; z-index: 20; max-width: 320px; padding: 6px 10px 8px; border: 16px solid transparent; border-image: url('img/ui/tooltip.png') 16 fill / 16px stretch; font-size: 15px; line-height: 1.35; display: none; pointer-events: none; }
.tip .n { font-size: 17px; color: #fff; } .tip .k { color: var(--gold); } .tip .g { color: #1eff00; } .tip .x { color: #ff2020; }

footer { color: var(--muted); font-size: 14px; border-top: 2px solid var(--line); padding: 12px 6px; margin-top: 8px; }

@media (max-width: 900px) {
  .cols, .cols3, .boards, .dun, .cmds, .ach, .grid2 { grid-template-columns: 1fr; }
  .unit { --k: 1.4; width: 358px; height: 140px; } .unit .nm { font-size: 15px; } .unit .ut { font-size: 12px; }
  .hide-s { display: none; } .titlebar h1 span { display: block; }
}
[data-d] { cursor: help; } a[data-d], th[data-d] { cursor: pointer; }
/* the rows not worked out yet: blurred under a plate */
.t.hid { filter: grayscale(1) brightness(.4) blur(3px); } .t.hid .r { display: none; }
.tlock { position: relative; z-index: 2; margin: -6px -10px; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.tlock span { color: var(--gold); font-size: 18px; text-shadow: 1px 1px 0 #000; padding: 6px 14px; background: rgba(0,0,0,.6); border-radius: 4px; box-shadow: 0 0 0 1px #555; }
/* the Guild Legacy: sideways, tiers left to right */
.tframe.side { width: auto; overflow-x: auto; padding-bottom: 4px; }
.tgrid.side { grid-template-columns: none; grid-template-rows: repeat(4, 64px); grid-auto-flow: column; grid-auto-columns: 64px; gap: 10px 46px; justify-content: start; }
.tgrid.side .tlock { margin: -10px -6px; }
/* a profession talent before the Legacy has the profession */
.t.asleep { box-shadow: 0 0 0 2px #000, 0 0 0 3px #b02020; }

/* watch live: one WoW window, stream and chat side by side; docked on Andi's page, a mini player elsewhere while live */
.live-slot { margin: 0 0 6px; min-height: 200px; }
.live-note { font-size: 15px; margin: 0 0 18px; }
.livewin { position: absolute; z-index: 15; border: 28px solid transparent; border-image: url('img/ui/dialog.png') 32 fill / 28px round;
  background: rgba(0,0,0,.92) padding-box; }
.livewin[hidden] { display: none; }
.lw-bar { display: flex; align-items: center; gap: 8px; margin: -8px 0 8px; }
.lw-gap { flex: 1; }
.lw-t { color: var(--gold); font-size: 22px; text-shadow: 2px 2px 0 #000; }
.lw-on { color: #fff; background: #b8231b; font-size: 13px; padding: 0 7px; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.lw-on[hidden] { display: none; }
.lw-b { font: inherit; font-size: 15px; color: var(--gold); background: none; cursor: pointer; padding: 2px 10px 4px; text-decoration: none; white-space: nowrap;
  border: solid transparent; border-width: 0 12px; border-image: url('img/ui/button-up.png') 0 18 fill / 0 12px stretch; text-shadow: 1px 1px 0 #000; }
.lw-b:hover { border-image-source: url('img/ui/button-down.png'); color: #fff; }
.lw-x { font-size: 18px; line-height: 1; padding: 2px 6px 5px; }
.livewin.docked .mini-only { display: none; }
.lw-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a5a5a; }
.lw-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lw-chat { position: relative; background: #18181b; border-left: 2px solid #5a5a5a; }
.lw-video iframe, .lw-chat iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.livewin.mini { position: fixed; right: 16px; bottom: 16px; width: 440px; border-width: 22px; border-image-width: 22px; box-shadow: 0 6px 24px #000; }
.livewin.mini .lw-bar { margin: -6px 0 6px; }
.livewin.mini .lw-t { font-size: 18px; }
.livewin.mini .lw-body { grid-template-columns: 1fr; }
.livewin.mini .lw-chat { display: none; }
.livewin.mini.chat-on .lw-chat { display: block; height: 340px; border-left: 0; border-top: 2px solid #5a5a5a; }
@media (max-width: 900px) {
  .livewin.docked .lw-body { grid-template-columns: 1fr; }
  .livewin.docked .lw-chat { height: 440px; border-left: 0; border-top: 2px solid #5a5a5a; }
  .livewin.mini { width: min(320px, 70vw); right: 8px; bottom: 8px; }
  .livewin.mini.chat-on .lw-chat { height: 260px; }
}

/* achievements in tiers: the pips (one per tier) and the bar to the next */
.ach .steps { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.ach .steps i { width: 7px; height: 7px; border-radius: 50%; background: #333; box-shadow: 0 0 0 1px #000; }
.ach .steps i.on { background: var(--gold); }
.ach .ap { height: 5px; margin-top: 4px; background: #1a1a1a; box-shadow: 0 0 0 1px #000; border-radius: 3px; overflow: hidden; }
.ach .ap i { display: block; height: 100%; background: #1eff00; }
.life { margin: 0 0 3px; }