/* ==========================================================================
   Anglers of Azeroth's look (the `skin-wow` class), worked round the guild's logo
   An ornate fantasy MMO interface in an original take of its own, in the colours
   and motifs of the guild's emblem (a glowing teal kraken holding a bronze hook on
   a compass rose, in a bronze ring set with teal gems): deep-sea navy going to
   black for the grounds, glowing teal for the accents and the glow, bronze and
   gold metal for the frames, rules and headings, parchment for the things you
   read. Every window is framed in bronze with a teal gem in each corner, like the
   gems round the logo's ring; a band of Celtic knotwork runs under the top bar;
   the compass rose from the emblem's heart marks the labels and dividers; buttons
   are teal enamel in bronze. Behind it all, a stormy night over the sea: rain
   falling (none for anyone whose computer asks for less motion), a teal glow on
   the water, a lighthouse on the headland (anglers.css hangs the guild's
   constellation, the Leaping Fish, in a break in the cloud).
   Titles in Cinzel Decorative, labels in Marcellus, reading text in Inter. The
   emblem is the guild's own (wwwroot/brand, from tools/logo_assets.py); every
   other texture and ornament is original, drawn here with gradients and in the
   SVGs of wwwroot/ornaments. No game art or fonts.
   Everything sits inside :where(), so a rule weighs what the base.css rule it
   replaces weighs and wins by coming later.
   ========================================================================== */

html:has(.app.skin-wow), html:has(.app.skin-wow) body { background: #02080b; }

/* The page's own scrollbar wears the bronze too (Chromium styles it with the pseudo-elements). */
html:has(.app.skin-wow) { scrollbar-width: auto; scrollbar-color: auto; }
html:has(.app.skin-wow)::-webkit-scrollbar { width: 12px; height: 12px; background: #030c10; }
html:has(.app.skin-wow)::-webkit-scrollbar-track { background: linear-gradient(90deg, #020709, #0a1c22 50%, #020709); box-shadow: inset 1px 0 0 rgba(201, 149, 79, .25); }
html:has(.app.skin-wow)::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #f7e2ab, #d3a160 40%, #94622c 75%, #4a2d0f) padding-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }

:where(.app.skin-wow) {
  /* ---- the logo's colours, by name ---- */
  --aoa-abyss: #02080b;
  --aoa-deep: #061419;
  --aoa-sea: #0c242c;
  --aoa-teal: #45d6d6;
  --aoa-teal-bright: #8af5f0;
  --aoa-teal-deep: #0e5a63;
  --aoa-bronze-light: #f1d79c;
  --aoa-bronze: #b9844a;
  --aoa-bronze-dark: #4a2c10;
  --aoa-gold: #f2cc6c;

  /* the dark palette, kept under its own names so anything set inside a parchment page can ask for it back */
  --wow-d-text: #efe7d3;
  --wow-d-text-2: #d3c8ac;
  --wow-d-muted: #93a6a2;
  --wow-d-line: rgba(201, 149, 79, .22);
  --wow-d-line-2: rgba(201, 149, 79, .46);
  --wow-d-panel: rgba(9, 28, 35, .95);
  --wow-d-panel-2: rgba(13, 38, 46, .95);
  --wow-d-hover: rgba(69, 214, 214, .09);
  --bg: var(--aoa-abyss);
  --bg-2: var(--aoa-deep);
  --panel: var(--wow-d-panel);
  --panel-solid: #0a1e25;
  --panel-2: var(--wow-d-panel-2);
  --panel-hover: var(--wow-d-hover);
  --line: var(--wow-d-line);
  --line-2: var(--wow-d-line-2);
  --text: var(--wow-d-text);
  --text-2: var(--wow-d-text-2);
  --muted: var(--wow-d-muted);
  --accent: var(--aoa-teal);
  --accent-2: var(--aoa-gold);
  --accent-ink: #02181b;
  --gold: var(--aoa-gold);
  --danger: #ff5f4a;
  --success: #52e08c;
  --warning: #ffa03a;
  --live: #ff4a36;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 5px;
  --display: "Marcellus", "Cinzel", Georgia, "Times New Roman", serif;
  --title: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --numerals: "Cinzel", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --glow: 0 0 0 1px rgba(69, 214, 214, .5), 0 0 22px -4px rgba(69, 214, 214, .6);
  /* type that changes with the surface it sits on (parchment swaps these) */
  --wow-heading: var(--aoa-gold);
  --wow-label: #d6b36d;
  --wow-ink-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85);
  /* item quality: the exact colours for edges and glows, lifted a little where they carry small text */
  --q-poor: #9d9d9d;
  --q-uncommon: #1eff00;
  --q-rare: #0070dd;
  --q-rare-text: #3d96ff;
  --q-epic: #a335ee;
  --q-epic-text: #bf6bff;
  --q-legendary: #ff8000;
  --q-artifact: #e6cc80;

  /* ---- metal: bronze, lit from above, so a frame's top edge shines and its foot sits in shadow (the gold names stay) ---- */
  --wow-gold: conic-gradient(from 0deg at 50% 50%, #f7e2ab 0deg, #d3a160 50deg, #94622c 95deg, #5c3914 140deg, #3d250d 180deg, #5c3914 220deg, #94622c 265deg, #d3a160 310deg, #f7e2ab 360deg);
  --wow-gold-flat: linear-gradient(180deg, #fbe6ae 0%, #d9a65c 30%, #93612b 62%, #4a2d0f 100%);
  /* the logo's lettering: pale gold at the top, bronze at the foot */
  --wow-gold-text: linear-gradient(180deg, #fff8dc 0%, #f8dc92 30%, #e8b85f 55%, #b37b33 80%, #7a4c1a 100%);

  /* ---- ornaments (wwwroot/ornaments): a teal gem in a bronze bezel at each corner, with a knotted strand along each
     edge; the clasp; a rule with the compass rose; the knotwork band; the compass rose; a gem on its own ---- */
  --wow-corners: url("../ornaments/corner.svg");
  --wow-frame: var(--wow-corners) 48 / 34px / 6px stretch;
  /* dialogs: the same gems, set bigger */
  --wow-frame-blue: var(--wow-corners) 48 / 40px / 7px stretch;
  --wow-clasp: url("../ornaments/clasp.svg");
  --wow-divider: url("../ornaments/divider.svg");
  --aoa-knot: url("../ornaments/knot.svg");
  --aoa-compass: url("../ornaments/compass.svg");
  --aoa-gem: url("../ornaments/gem.svg");
  --aoa-sea-art: url("../ornaments/sea.svg");

  /* ---- materials ---- */
  --wow-stone-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.032' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .86 0 0 0 0 .86 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 0 0 0 1.9 -.9'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)' opacity='0.3'/%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.08'/%3E%3C/svg%3E");
  --wow-parch-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.013' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .27 0 0 0 0 .09 0 0 0 1.1 -.46'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .05' numOctaves='2' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .25 0 0 0 0 .08 0 0 0 1 -.62'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
  /* a window: the deep sea, a little teal light from above, darker round the edge */
  --wow-slate: linear-gradient(180deg, #0c242c 0%, #08191f 55%, #051116 100%);
  --wow-sheen: radial-gradient(120% 70% at 50% 0%, rgba(90, 225, 220, .075), transparent 62%);
  --wow-vignette: radial-gradient(150% 120% at 50% 30%, transparent 55%, rgba(0, 0, 0, .45) 100%);
  /* bars and a dialog's head: sea-iron, darker at the foot (the wood names stay) */
  --wow-wood: linear-gradient(180deg, #133640 0%, #0c252d 52%, #07171c 100%);
  --wow-wood-tex: linear-gradient(180deg, rgba(140, 240, 235, .05), transparent 40%);
  --wow-tooltip: linear-gradient(180deg, rgba(9, 32, 40, .98) 0%, rgba(3, 14, 18, .98) 100%);
  --wow-parch: radial-gradient(130% 115% at 50% 45%, transparent 58%, rgba(112, 64, 16, .38) 100%), var(--wow-parch-tex) 0 0 / 320px 320px, linear-gradient(172deg, #f4e7c4 0%, #e9d5a6 48%, #dcc28c 100%);
  /* teal enamel, for the buttons (cooler and deeper at the foot), and lit, for the one pressed or on */
  --wow-teal: linear-gradient(180deg, #145963 0%, #0e434b 40%, #0a3239 68%, #062227 100%);
  --wow-teal-hot: linear-gradient(180deg, #1b7680 0%, #135d66 40%, #0d474f 68%, #08323a 100%);
  --wow-lit: radial-gradient(120% 150% at 50% 120%, rgba(70, 225, 220, .42), rgba(70, 225, 220, .08) 55%, transparent 76%), linear-gradient(180deg, #123842, #0a2129);
  --wow-stud: #fff1c0 0 1.1px, #d3a160 1.8px, #6b4518 2.8px, #120a02 3.4px, transparent 3.9px;
  --wow-studs: radial-gradient(circle at 8px 8px, var(--wow-stud)), radial-gradient(circle at calc(100% - 8px) 8px, var(--wow-stud)), radial-gradient(circle at 8px calc(100% - 8px), var(--wow-stud)), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--wow-stud));
  --wow-frame-shadow: 0 0 0 1px #020607, inset 0 0 0 1px rgba(0, 0, 0, .72), inset 0 0 0 2px rgba(255, 222, 150, .08), inset 0 2px 18px rgba(0, 0, 0, .35), 0 18px 38px -18px #000;
  --wow-tip-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(140, 240, 235, .08), 0 14px 32px -12px rgba(0, 0, 0, .95);
  /* a bronze arrow with a teal gem, for the pointer */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe6ae'/%3E%3Cstop offset='.45' stop-color='%23d39e58'/%3E%3Cstop offset='1' stop-color='%236e4518'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2v17.4l4.7-4.3 3.2 6.9 3.2-1.5-3.1-6.6h6.4z' fill='url(%23g)' stroke='%23140b03' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4.8 6v9.4l2.4-2.2' fill='none' stroke='%23fff6dc' stroke-opacity='.8' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='7.4' cy='10.6' r='1.7' fill='%2345d6d6' stroke='%23062a2e' stroke-width='.7'/%3E%3C/svg%3E") 3 2, auto;

  /* ---------- the sky: a stormy night over the sea ---------- */

  & .space-bg {
    background:
      radial-gradient(ellipse 80% 34% at 50% 100%, rgba(40, 200, 205, .17), transparent 70%),
      radial-gradient(ellipse 45% 30% at 88% 0%, rgba(40, 150, 160, .1), transparent 70%),
      var(--grain),
      linear-gradient(180deg, #010406 0%, #02090c 30%, #041419 58%, #062129 82%, #082c35 100%);
  }
  /* the sea at the foot of the screen: the headlands, the lighthouse, the ripples (wwwroot/ornaments/sea.svg) */
  & .space-bg::after { left: 0; right: 0; bottom: 0; height: 200px; background: var(--aoa-sea-art) 50% 100% / 1600px 200px repeat-x; }
  /* storm clouds: slow banks of grey-teal, lit from below by the sea's glow */
  & .space-bg .nebula {
    inset: -12% -12% 30% -12%;
    filter: blur(26px);
    background:
      radial-gradient(42% 14% at 24% 22%, rgba(120, 170, 175, .14), transparent 70%),
      radial-gradient(34% 12% at 60% 14%, rgba(90, 150, 160, .12), transparent 70%),
      radial-gradient(40% 16% at 86% 30%, rgba(110, 165, 170, .1), transparent 70%),
      radial-gradient(30% 10% at 42% 40%, rgba(60, 200, 200, .07), transparent 70%);
    transform-origin: 30% 30%;
    animation: wow-clouds 60s ease-in-out infinite alternate;
  }
  /* ...and the far-off squalls hanging from them: sheets of rain over the water */
  & .space-bg .grid-floor {
    inset: 8% -12% auto -12%;
    height: 62%;
    background-image: repeating-linear-gradient(90deg, transparent 0 26px, rgba(150, 225, 225, .045) 26px 30px, transparent 30px 47px, rgba(150, 225, 225, .03) 47px 49px);
    background-size: auto;
    transform: skewX(-10deg);
    transform-origin: 50% 0;
    -webkit-mask-image: radial-gradient(40% 40% at 72% 52%, #000, transparent 75%), radial-gradient(30% 34% at 18% 60%, #000, transparent 75%);
    mask-image: radial-gradient(40% 40% at 72% 52%, #000, transparent 75%), radial-gradient(30% 34% at 18% 60%, #000, transparent 75%);
    filter: blur(2px);
    opacity: .9;
  }
  /* a few stars in the breaks of the cloud */
  & .space-bg .stars-1 { background-image: radial-gradient(1.1px 1.1px at 20px 30px, #e8ffff, transparent), radial-gradient(1px 1px at 300px 40px, #d6fbff, transparent), radial-gradient(1.2px 1.2px at 380px 220px, #cff4f4, transparent); opacity: .4; animation: drift 240s linear infinite, wow-twinkle 4.5s ease-in-out infinite alternate; }
  & .space-bg .stars-2 { background-image: radial-gradient(1.4px 1.4px at 60px 120px, #f2fffe, transparent), radial-gradient(1.3px 1.3px at 420px 300px, #e0ffff, transparent); opacity: .32; animation: drift 180s linear infinite, wow-twinkle 6.5s ease-in-out -2s infinite alternate; }
  & .space-bg .stars-3 { background-image: radial-gradient(2px 2px at 140px 200px, #fff, transparent), radial-gradient(6px 6px at 140px 200px, rgba(120, 240, 235, .22), transparent); opacity: .3; animation: drift 120s linear infinite, wow-twinkle 8s ease-in-out -4s infinite alternate; }
  /* the rain (anglers.css makes it fall): light behind the pages, so it never gets in the way of reading */
  & .space-bg .rain-far { opacity: .26; }
  & .space-bg .rain-near { opacity: .2; }

  /* ---------- top bar: sea-iron over a band of bronze knotwork, a teal gem in a clasp at its heart ---------- */

  & .topbar {
    background:
      linear-gradient(180deg, rgba(160, 245, 240, .1) 0, rgba(160, 245, 240, 0) 38%),
      linear-gradient(180deg, transparent 0 5px, rgba(0, 0, 0, .4) 5px 6px, rgba(150, 240, 235, .07) 6px 7px, transparent 7px),
      var(--grain),
      var(--wow-stone-soft) 0 0 / 260px 260px,
      linear-gradient(180deg, #14353e 0%, #0d252d 50%, #081a20 100%);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(170, 250, 245, .16), inset 0 -2px 0 rgba(0, 0, 0, .55), 0 16px 32px -14px #000;
    backdrop-filter: none;
  }
  & .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 2px);
    height: 26px;
    pointer-events: none;
    background:
      var(--wow-clasp) 50% 0 / 132px 23px no-repeat,
      var(--aoa-knot) 0 4px / 24px 10px repeat-x,
      linear-gradient(180deg, #120a02 0 1px, #f6dfa4 1px, #d3a160 2px, #8d5c28 3px, #120a02 4px, transparent 4px 14px, #120a02 14px, #b9844a 15px, #120a02 16px, transparent 16px) 0 0 / 100% 16px no-repeat,
      linear-gradient(180deg, transparent 4px, #04100f 4px 14px, transparent 14px) 0 0 / 100% 16px no-repeat;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .75));
  }
  & .brand-word { font-family: var(--title); font-weight: 700; font-size: 1.24rem; letter-spacing: .05em; text-transform: none; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 1px #000); }
  & .topnav-link { border-radius: 6px; font-family: var(--display); font-weight: 400; font-size: .96rem; letter-spacing: .03em; color: #e9dfc4; text-shadow: var(--wow-ink-shadow); }
  & .topnav-link:hover { background: radial-gradient(closest-side, rgba(69, 214, 214, .2), transparent); color: #ffe6a0; }
  & .topnav-link.active { background: var(--wow-lit); color: #ffdc7a; text-shadow: 0 0 10px rgba(255, 200, 80, .55), 0 1px 0 #000; box-shadow: inset 0 0 0 1px #c99555, inset 0 0 0 2px rgba(0, 0, 0, .55), 0 0 16px -5px rgba(69, 214, 214, .85); }
  & .user-chip:hover { background: var(--wow-tooltip); border-color: rgba(201, 149, 79, .55); }
  & .user-name { font-family: var(--display); font-weight: 400; font-size: .96rem; text-shadow: var(--wow-ink-shadow); }

  /* ---------- surfaces ---------- */

  /* windows: the deep sea in a bronze frame, a teal gem set in every corner */
  & .panel {
    border: 3px solid transparent;
    border-radius: 9px;
    border-image: var(--wow-frame);
    background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-stone-soft) 0 0 / 260px 260px padding-box, var(--wow-vignette) padding-box, var(--wow-slate) padding-box, var(--wow-gold) border-box;
    box-shadow: var(--wow-frame-shadow);
    backdrop-filter: none;
  }
  /* tooltips: deep sea-blue, a thin bronze edge */
  & :is(.menu, .palette, .toast) { border-color: #9a7140; background: var(--grain), var(--wow-tooltip); box-shadow: var(--wow-tip-shadow); backdrop-filter: none; }
  & .menu { border-radius: 6px; }
  & .palette { border-radius: 8px; box-shadow: var(--wow-tip-shadow), 0 0 44px -12px rgba(69, 214, 214, .4); }
  & .toast { border-radius: 7px; }

  /* parchment: the things you read are quest scrolls, inked in brown (the About page's quests, the DKP rules) */
  & :is(.recap, .quest-text) {
    --text: #2c1c0b;
    --text-2: #4b3620;
    --muted: #58402a;
    --line: rgba(92, 58, 20, .24);
    --line-2: rgba(92, 58, 20, .44);
    --panel: rgba(120, 78, 28, .07);
    --panel-2: rgba(120, 78, 28, .1);
    --panel-hover: rgba(120, 78, 28, .13);
    --accent: #0b5f68;
    --accent-2: #7a4c12;
    --accent-ink: #fff4dc;
    --gold: #7a5000;
    --success: #155a2b;
    --danger: #a3170a;
    --warning: #994a00;
    --live: #b81d0e;
    --wow-heading: #5a2a08;
    --wow-label: #6b471c;
    --wow-ink-shadow: 0 1px 0 rgba(255, 246, 222, .55);
    color: var(--text);
  }
  & :is(.recap, .quest-text) { border-radius: 6px; background: var(--wow-parch); box-shadow: inset 0 0 0 1px rgba(255, 246, 220, .4), inset 0 0 30px rgba(110, 64, 16, .25), 0 0 0 1px #2a1806, 0 0 0 3px rgba(201, 149, 79, .5), 0 0 0 4px #120a02, 0 18px 36px -18px #000; }
  & :is(.recap, .quest-text) :is(h2, h3) { color: var(--wow-heading); text-shadow: var(--wow-ink-shadow); }
  & :is(.recap, .quest-text) .chip { color: var(--text-2); background: rgba(92, 58, 20, .09); border-color: rgba(92, 58, 20, .34); }
  & :is(.recap, .quest-text) code { background: rgba(92, 58, 20, .12); color: #3a2410; }
  /* dark things set on a page keep the dark palette */
  & :is(.seg, .menu, .modal, .palette, .toast) {
    --text: var(--wow-d-text);
    --text-2: var(--wow-d-text-2);
    --muted: var(--wow-d-muted);
    --line: var(--wow-d-line);
    --line-2: var(--wow-d-line-2);
    --panel: var(--wow-d-panel);
    --panel-2: var(--wow-d-panel-2);
    --panel-hover: var(--wow-d-hover);
    --accent: var(--aoa-teal);
    --accent-2: var(--aoa-gold);
    --accent-ink: #02181b;
    --gold: var(--aoa-gold);
    --success: #52e08c;
    --danger: #ff5f4a;
    --warning: #ffa03a;
    --live: #ff4a36;
    --wow-heading: var(--aoa-gold);
    --wow-label: #d6b36d;
    --wow-ink-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85);
  }
  & :is(.seg, .menu, .modal, .palette, .toast) { color: var(--text); }

  /* ---------- windows that open: a frame set with bigger gems, a head of sea-iron over a knotwork band ---------- */

  & .modal {
    border: 3px solid transparent;
    border-radius: 10px;
    border-image: var(--wow-frame-blue);
    background: var(--grain) padding-box, var(--wow-sheen) padding-box, var(--wow-stone-soft) 0 0 / 260px 260px padding-box, var(--wow-vignette) padding-box, linear-gradient(180deg, #0e2a32, #07161b) padding-box, var(--wow-gold) border-box;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 60px -20px rgba(69, 214, 214, .35), var(--shadow-lg);
  }
  & .modal { animation: wow-open .34s cubic-bezier(.2, .8, .2, 1); }
  & .modal-head { position: relative; padding-top: 1.15rem; background: var(--wow-wood-tex), var(--wow-wood); border-bottom: 0; border-radius: 7px 7px 0 0; }
  & .modal-head::before { content: ""; position: absolute; left: 50%; top: -15px; width: 140px; height: 25px; transform: translateX(-50%); background: var(--wow-clasp) center / contain no-repeat; pointer-events: none; }
  & .modal-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; background: var(--wow-divider) center / 260px 12px no-repeat, linear-gradient(90deg, transparent, rgba(201, 149, 79, .5) 20%, rgba(201, 149, 79, .5) 80%, transparent) 0 50% / 100% 1px no-repeat; pointer-events: none; }
  & .modal-head h2 { font-family: var(--title); font-weight: 700; font-size: 1.16rem; letter-spacing: .02em; color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
  & .modal-body { padding-top: 1.2rem; }
  & .modal-foot { border-top-color: rgba(201, 149, 79, .22); background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .1)); border-radius: 0 0 7px 7px; }

  /* ---------- buttons: teal enamel in a bronze rim, gold lettering ---------- */

  & .btn { border: 1.5px solid transparent; border-radius: 8px; background: linear-gradient(180deg, rgba(190, 255, 250, .15), rgba(190, 255, 250, 0) 48%) padding-box, var(--wow-teal) padding-box, var(--wow-gold) border-box; color: #f8de9a; font-family: var(--display); font-weight: 400; letter-spacing: .03em; text-shadow: 0 1px 0 #000, 0 0 2px #000; box-shadow: inset 0 1px 0 rgba(200, 255, 250, .2), inset 0 -2px 3px rgba(0, 0, 0, .45), 0 0 0 1px #02090b, 0 2px 4px rgba(0, 0, 0, .6); }
  & .btn:hover { background: linear-gradient(180deg, rgba(200, 255, 250, .22), rgba(200, 255, 250, 0) 48%) padding-box, var(--wow-teal-hot) padding-box, linear-gradient(180deg, #fff6d0, #e3b467 45%, #a8742e) border-box; border-color: transparent; color: #fff3c8; box-shadow: inset 0 1px 0 rgba(210, 255, 250, .3), inset 0 -2px 3px rgba(0, 0, 0, .4), 0 0 0 1px #02090b, 0 0 16px -4px rgba(69, 214, 214, .75); }
  & .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 0 0 1px #02090b; }
  & .btn:focus-visible { outline: 2px solid var(--aoa-teal-bright); outline-offset: 2px; }
  /* the main thing to do: brighter enamel, a brighter rim, and it glows */
  & .btn-primary { background: linear-gradient(180deg, rgba(210, 255, 250, .26), rgba(210, 255, 250, 0) 50%) padding-box, linear-gradient(180deg, #1b8a93 0%, #12666e 42%, #0c4a52 72%, #08363c 100%) padding-box, linear-gradient(180deg, #fff6d0, #f0c565 40%, #b0782c 75%, #fbe6ae) border-box; color: #fff2c6; box-shadow: inset 0 1px 0 rgba(220, 255, 250, .38), inset 0 -2px 3px rgba(0, 0, 0, .4), 0 0 0 1px #02090b, 0 0 18px -5px rgba(69, 214, 214, .85); }
  & .btn-primary:hover { filter: brightness(1.1); background: linear-gradient(180deg, rgba(220, 255, 250, .3), rgba(220, 255, 250, 0) 50%) padding-box, linear-gradient(180deg, #22a0aa 0%, #16767f 42%, #0e5860 72%, #0a4048 100%) padding-box, linear-gradient(180deg, #fffbe6, #ffd76a 40%, #c48d3a 75%, #fff4c8) border-box; color: #fff8dc; }
  & .btn-success { background: linear-gradient(180deg, rgba(220, 255, 220, .18), transparent 48%) padding-box, linear-gradient(180deg, #2a7a3c 0%, #185a28 45%, #0c3a17 100%) padding-box, var(--wow-gold) border-box; color: #d8ffd8; }
  & .btn-success:hover { background: linear-gradient(180deg, rgba(220, 255, 220, .24), transparent 48%) padding-box, linear-gradient(180deg, #379a4c 0%, #1e6a30 45%, #0f4a1d 100%) padding-box, var(--wow-gold) border-box; color: #f2fff2; box-shadow: inset 0 1px 0 rgba(220, 255, 220, .3), 0 0 0 1px #02090b, 0 0 16px -4px rgba(82, 224, 140, .6); }
  & .btn-danger { background: linear-gradient(180deg, rgba(255, 120, 90, .14), transparent 50%) padding-box, linear-gradient(180deg, #2c0705, #160302) padding-box, linear-gradient(180deg, #ff7a5c, #c0200f 50%, #6e0a04) border-box; color: #ff8a6e; text-shadow: 0 0 8px rgba(255, 60, 30, .6), 0 1px 0 #000; box-shadow: inset 0 0 12px rgba(255, 50, 20, .25), 0 0 0 1px #120703, 0 2px 4px rgba(0, 0, 0, .6); }
  & .btn-danger:hover { background: linear-gradient(180deg, rgba(255, 120, 90, .2), transparent 50%) padding-box, linear-gradient(180deg, #4a0b07, #220403) padding-box, linear-gradient(180deg, #ffa58c, #e0301a 50%, #8a0e06) border-box; color: #ffd0c4; box-shadow: inset 0 0 14px rgba(255, 50, 20, .35), 0 0 0 1px #120703, 0 0 18px -4px rgba(255, 60, 30, .8); }
  & :is(.btn-ghost, .btn-danger-ghost) { background: transparent; border-color: transparent; box-shadow: none; }
  & .btn-ghost { color: var(--text-2); text-shadow: var(--wow-ink-shadow); }
  & .btn-danger-ghost { color: var(--danger); text-shadow: var(--wow-ink-shadow); }
  & .btn-ghost:hover { background: radial-gradient(closest-side, rgba(69, 214, 214, .17), rgba(69, 214, 214, .04)); border-color: transparent; color: #ffe6a0; box-shadow: none; }
  & .btn-danger-ghost:hover { background: radial-gradient(closest-side, rgba(255, 60, 30, .18), rgba(255, 60, 30, .04)); border-color: transparent; color: #ff8a6e; box-shadow: none; }
  & .btn-icon:hover { background: radial-gradient(closest-side, rgba(69, 214, 214, .2), transparent); color: #ffe6a0; }

  /* ---------- fields: dark wells set in the bronze ---------- */

  & .input { border: 1px solid #5f4727; border-radius: 5px; background-color: #030f13; color: #efe7d3; caret-color: var(--aoa-teal); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(140, 240, 235, .06); }
  & .input:focus { border-color: var(--aoa-teal); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), 0 0 0 1px rgba(69, 214, 214, .45), 0 0 14px -3px rgba(69, 214, 214, .65); }
  & .input::placeholder { color: #6f817e; }
  & .textarea { font-family: var(--font); }
  & select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%23120a02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%23e0b26a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right .7rem center; background-size: 12px 8px; background-repeat: no-repeat; }
  & select.input-xs { background-position: right .45rem center; }
  & select.input option { background: #0a1e25; color: #efe7d3; }
  & .check input { accent-color: var(--aoa-teal); }
  & .seg { border-radius: 8px; border-color: rgba(201, 149, 79, .38); background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3)); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 1px 0 rgba(140, 240, 235, .05); }
  & .seg button { border-radius: 5px; font-family: var(--display); font-weight: 400; color: #d3c8ac; }
  & .seg button:hover { color: #ffe6a0; background: rgba(69, 214, 214, .09); }
  & .seg button.is-on { background: var(--wow-lit); color: #ffdc7a; text-shadow: 0 0 8px rgba(255, 200, 80, .55), 0 1px 0 #000; box-shadow: inset 0 0 0 1px #c99555, inset 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px -4px rgba(69, 214, 214, .8); }
  & .toggle-track { background: linear-gradient(180deg, #020709, #0c1d22); border-color: rgba(201, 149, 79, .5); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }
  & .toggle-track span { background: radial-gradient(circle at 35% 30%, #fff6d8, #d3a160 55%, #6b4518); box-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
  & .toggle input:checked + .toggle-track { background: linear-gradient(180deg, #0e5a63, #06343a); border-color: var(--aoa-teal); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 10px -2px rgba(69, 214, 214, .7); }
  & .toggle input:checked + .toggle-track span { background: radial-gradient(circle at 35% 30%, #fffbe8, #f2cc6c 50%, #a8742e); }

  /* ---------- type ---------- */

  & :is(h2, h3, h4) { font-weight: 400; }
  & h1 { font-family: var(--title); font-weight: 700; letter-spacing: .01em; }
  & :is(.page-head h1, .hall-head h1) { color: transparent; background: var(--wow-gold-text); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 18px rgba(69, 214, 214, .2)); }
  & .section-title { font-weight: 400; color: var(--wow-heading); text-shadow: var(--wow-ink-shadow); letter-spacing: .02em; }
  & .eyebrow { font-family: var(--display); letter-spacing: .2em; text-shadow: var(--wow-ink-shadow); }
  /* the compass rose from the emblem's heart, before every part's name */
  & .eyebrow::before { content: ""; display: inline-block; width: 1.6em; height: 1.6em; margin: 0 .45em 0 -.1em; vertical-align: -.52em; background: var(--aoa-compass) center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(69, 214, 214, .45)); }
  & .section-label { font-family: var(--display); color: var(--wow-label); letter-spacing: .16em; text-shadow: var(--wow-ink-shadow); }
  & .section-label::before { content: ""; flex: none; width: .9em; height: .9em; background: var(--aoa-gem) center / contain no-repeat; }
  & .tabs { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(201, 149, 79, .6) 12%, rgba(201, 149, 79, .6) 88%, transparent) 1; }
  & .tab { font-family: var(--display); font-weight: 400; font-size: .96rem; letter-spacing: .02em; text-shadow: var(--wow-ink-shadow); }
  & .tab:hover { color: #ffe6a0; }
  & .tab small { font-family: var(--font); letter-spacing: 0; }
  & .tab.is-on { color: #ffe6a0; text-shadow: 0 0 10px rgba(69, 214, 214, .55), 0 1px 0 #000; box-shadow: 0 6px 12px -8px rgba(69, 214, 214, .9); }
  & :is(.pi-group, .menu-label, .table th) { font-family: var(--display); }
  & .table th { font-weight: 400; color: var(--wow-label); }
  & kbd { border-color: rgba(201, 149, 79, .45); background: linear-gradient(180deg, #14303a, #0a1c22); color: #d8cba8; box-shadow: 0 1px 0 #000; }
  & code { background: rgba(0, 0, 0, .32); }
  & a:focus-visible { outline: 2px solid var(--aoa-teal-bright); outline-offset: 2px; border-radius: 3px; }

  /* chips: the item-quality colours, and a member's standing */
  & :is(.chip, .chip-btn) { border-radius: 4px; }
  & .chip { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22)); }
  & :is(.chip-open, .chip-friendly) { color: #5cf08f; border-color: rgba(82, 224, 140, .5); background-color: rgba(82, 224, 140, .09); }
  & :is(.chip-closed, .chip-hostile, .chip-dead) { color: #ff7a66; border-color: rgba(255, 95, 74, .55); background-color: rgba(255, 60, 40, .11); }
  & .chip-wary { color: #ffa03a; border-color: rgba(255, 150, 50, .55); background-color: rgba(255, 140, 40, .11); }
  & .chip-pending { color: #f2cc6c; border-color: rgba(242, 204, 108, .5); background-color: rgba(242, 204, 108, .09); }
  & .chip-draft { color: #a9bcb8; border-color: rgba(150, 175, 170, .45); border-style: dashed; background-color: rgba(150, 175, 170, .06); }
  & .chip-class { color: var(--q-rare-text); border-color: rgba(0, 112, 221, .75); background-color: rgba(0, 112, 221, .13); }
  & .chip-tag { color: var(--q-poor); }
  & :is(.chip-gold, .chip-custom) { color: #ffd66e; border-color: rgba(242, 204, 108, .55); background-color: rgba(242, 204, 108, .09); }
  & .chip-new { color: var(--accent-ink); background-color: var(--aoa-teal); border-color: transparent; }
  & .chip-btn { background: linear-gradient(180deg, rgba(16, 44, 52, .92), rgba(6, 20, 25, .92)); border-color: rgba(201, 149, 79, .32); }
  & .chip-btn.is-on { background: color-mix(in oklab, var(--kind, var(--accent)) 22%, #061419); }
  & .chip-toggle.is-on { color: var(--accent-ink); background: var(--aoa-teal); }

  /* portraits sit in bronze rings, like on a unit frame */
  & .avatar { font-weight: 400; box-shadow: 0 0 0 2px color-mix(in oklab, var(--who) 80%, #000), 0 0 0 3px #120a02, 0 0 0 4.5px #b9844a, 0 4px 12px -4px rgba(0, 0, 0, .85); }
  & .empty-state .empty-icon { border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 50% 40%, rgba(69, 214, 214, .32), transparent 65%) padding-box, linear-gradient(180deg, #0e2a32, #051116) padding-box, var(--wow-gold) border-box; color: var(--aoa-teal-bright); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(69, 214, 214, .6); }

  /* ---------- menus, toasts ---------- */

  & :is(.menu a, .menu button) { border-radius: 4px; }
  & :is(.menu a, .menu button):hover { background: linear-gradient(90deg, rgba(69, 214, 214, .2), rgba(69, 214, 214, .03)); color: #ffe6a0; }
  & .menu-label { color: var(--wow-label); }
  & .toast { box-shadow: var(--wow-tip-shadow), 0 0 26px -12px rgba(69, 214, 214, .5); }
  & .toast-card { border-color: var(--q-legendary); box-shadow: var(--wow-tip-shadow), 0 0 30px -10px rgba(255, 128, 0, .75); }
  & .toast-live { border-color: var(--live); }
  & .toast-icon { border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--tone, var(--accent)) 35%, transparent), transparent 70%) padding-box, linear-gradient(180deg, #0e2a32, #051116) padding-box, var(--wow-gold) border-box; box-shadow: 0 0 0 1px #000, 0 0 14px -4px var(--tone, var(--accent)); }
  & .toast-body b { font-weight: 400; color: #ffe6a0; }

  /* ---------- scrollbars: a bronze bar in a dark groove ---------- */

  & * { scrollbar-width: auto; scrollbar-color: auto; }
  & ::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
  & ::-webkit-scrollbar-track { border-radius: 6px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(201, 149, 79, .12); }
  & ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #f7e2ab, #d3a160 40%, #94622c 75%, #4a2d0f) padding-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
  & ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #f7e2ab, #d3a160 40%, #94622c 75%, #4a2d0f) padding-box; }
  & ::-webkit-scrollbar-corner { background: transparent; }
  @supports not selector(::-webkit-scrollbar) {
    & * { scrollbar-width: thin; scrollbar-color: #b9844a rgba(0, 0, 0, .3); }
  }
  & ::selection { background: rgba(69, 214, 214, .32); }
}

/* ---------- motion ---------- */

@keyframes wow-clouds {
  0% { transform: translateX(-3%) scale(1); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: translateX(4%) scale(1.08); opacity: .85; }
}
@keyframes wow-twinkle { from { opacity: .2; } to { opacity: .55; } }
@keyframes wow-open {
  0% { opacity: 0; transform: translateY(12px) scale(.95); filter: brightness(1.6); }
  55% { opacity: 1; filter: brightness(1.1); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.app.skin-wow) {
    & :is(.space-bg .nebula, .space-bg .stars, .modal) { animation: none; }
  }
}