/* Northrend realm theme: World of Warcraft, Wrath of the Lich King.
   The authentic pieces (fonts, frames, buttons, paintings, icons) come from the owner's own game client and are
   served at /art/ (built on the server by tools/build-site-art.sh, never committed). */
@import url("fonts.css");
@font-face{font-family:"Friz Quadrata";src:url("/art/fonts/frizqt__.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Morpheus";src:url("/art/fonts/morpheus.ttf") format("truetype");font-display:swap}

:root{
  --night:#03050a; --abyss:#070b14; --steel:#0e1522; --frame:#141c2b; --line:#2e3b52; --line-soft:rgba(160,180,210,.14);
  --wow-gold:#ffd100; --gold:#f2c35a; --gold-bright:#ffe08a; --gold-dim:#8a6a2a; --gold-deep:#4a3612;
  --ice:#c6ecff; --rune:#62d3ff; --frost:#9fdcff;
  --bone:#f2f0e8; --mist:#bdb7a5; --mist-2:#918b7b;
  --ok:#1eff00; --warn:#ffb000; --bad:#ff3a2a; --info:#62d3ff;
  --q-poor:#9d9d9d; --q-common:#ffffff; --q-uncommon:#1eff00; --q-rare:#0070dd; --q-epic:#a335ee; --q-legendary:#ff8000; --q-artifact:#e6cc80;
  --title:"Morpheus","Cinzel","Trajan Pro",Georgia,serif;
  --display:"Friz Quadrata","Cinzel",Georgia,serif;
  --body:"Friz Quadrata","Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --read:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --label:"Friz Quadrata","Alegreya Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --radius:3px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--night);color:var(--bone);font-family:var(--body);font-size:16px;line-height:1.5;min-height:100vh}
a{color:var(--gold-bright);text-decoration:none}
a:hover{color:#fff;text-shadow:0 0 10px rgba(255,209,0,.45)}
:focus-visible{outline:2px solid var(--rune);outline-offset:3px}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-wrap:balance;margin:0 0 .45em;line-height:1.15;color:var(--wow-gold);text-shadow:0 2px 0 #000,0 0 18px rgba(0,0,0,.8)}
h1{font-family:var(--title);font-size:clamp(40px,6.4vw,84px);letter-spacing:.02em}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:clamp(18px,2vw,21px)}
p{margin:0 0 1em}
.read,.lede,.feature p{font-family:var(--read)}
.eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;color:var(--frost);font-size:12.5px;margin:0 0 8px;text-shadow:0 1px 0 #000}
.muted{color:var(--mist)}
.small{font-size:14px}
.mono{font-family:var(--mono);font-size:.92em}
.gold{color:var(--wow-gold)}
.frost-text{color:var(--wow-gold);text-shadow:0 3px 0 #000,0 0 24px rgba(0,0,0,.9),0 0 60px rgba(98,211,255,.25)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:20px}
.ico{width:1.15em;height:1.15em;vertical-align:-.2em}
.mt{margin-top:22px}.mt-s{margin-top:12px}.push{margin-left:auto}

/* ---------- scene backgrounds (Northrend paintings) ---------- */
.scene{position:relative;isolation:isolate;overflow:hidden;background:#05080e center/cover no-repeat}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,10,.35) 0%,rgba(3,5,10,.12) 35%,rgba(3,5,10,.7) 80%,var(--night) 100%),radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.7) 100%)}
.scene canvas.nr-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.scene > .wrap,.scene > .scene-body{position:relative;z-index:1}
.bg-lichking{background-image:url("/art/scenes/lichking.jpg");background-position:center top}
.bg-icecrown{background-image:url("/art/scenes/icecrowncitadel.jpg")}
.bg-reflection{background-image:url("/art/scenes/hallsofreflection.jpg")}
.bg-saron{background-image:url("/art/scenes/pitofsaron.jpg")}
.bg-naxx{background-image:url("/art/scenes/naxxramas.jpg")}
.bg-ulduar{background-image:url("/art/scenes/ulduarraid.jpg")}
.bg-utgarde{background-image:url("/art/scenes/utgardepinnecle.jpg")}
.bg-wintergrasp{background-image:url("/art/scenes/wintergrasp.jpg")}
.bg-malygos{background-image:url("/art/scenes/malygos.jpg")}
.bg-northrend{background-image:url("/art/scenes/northrend.jpg")}
.bg-dk{background-image:url("/art/scenes/deathknight.jpg")}
.frost-edge{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(140% 100% at 50% 50%,transparent 62%,rgba(170,220,255,.10) 80%,rgba(200,235,255,.22) 100%)}

/* ---------- top bar ---------- */
.nr-topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(5,8,14,.84));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,209,0,.25);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.nr-topbar .wrap{display:flex;align-items:center;gap:22px;min-height:66px}
.nr-brand{display:flex;align-items:center;gap:12px;color:var(--bone)}
.nr-brand .logo{height:48px;width:auto;filter:drop-shadow(0 2px 6px #000)}
.nr-brand b{font-family:var(--display);font-weight:400;letter-spacing:.12em;font-size:16px;color:var(--wow-gold);text-shadow:0 1px 0 #000}
.nr-brand small{display:block;font-family:var(--label);letter-spacing:.16em;color:var(--mist);font-size:10.5px;text-transform:uppercase}
.nr-nav{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nr-nav a,.nr-nav button{font-family:var(--label);letter-spacing:.04em;font-size:14.5px;color:var(--bone);padding:9px 12px;background:none;border:0;cursor:pointer}
.nr-nav a:hover,.nr-nav button:hover,.nr-nav a[aria-current="page"]{color:var(--wow-gold)}
.nr-nav form{display:inline}
.nr-nav a.btn{padding:0 18px;color:var(--wow-gold);border:8px solid transparent;border-image:url("/art/ui/glue-button-up.png") 11 fill stretch}
.nr-nav a.btn:hover{color:#fff}
@media (max-width:640px){.nr-brand small,.nr-brand b{display:none}.nr-brand .logo{height:38px}.nr-topbar .wrap{gap:8px}.nr-nav a,.nr-nav button{padding:8px 6px;font-size:13.5px}}

/* ---------- buttons: the game's own red menu buttons ---------- */
.btn{--h:46px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;font-family:var(--display);font-size:15px;letter-spacing:.03em;color:var(--wow-gold);text-shadow:0 1px 0 #000,0 0 6px #000;cursor:pointer;white-space:nowrap;
  border:11px solid transparent;border-image:url("/art/ui/glue-button-up.png") 11 fill stretch;background:none;transition:filter .15s,transform .08s}
.btn:hover{filter:brightness(1.3) saturate(1.1);color:#fff}
.btn:active{border-image-source:url("/art/ui/glue-button-down.png");transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-play,.btn-gold{--h:54px;font-size:17px}
.btn-ghost{border-image-source:url("/art/ui/glue-button-up-blue.png");color:#eef8ff}
.btn-ghost:active{border-image-source:url("/art/ui/glue-button-down-blue.png")}
.btn-danger{border-image-source:url("/art/ui/red-button-up.png");color:#fff}
.btn-sm{--h:36px;padding:0 14px;font-size:13px;border-width:8px}
.btn-lg{--h:62px;padding:0 40px;font-size:19px}
.btn-block{width:100%}
.btn[disabled]{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- framed panels: the game's gold dialog frame ---------- */
.panel{position:relative;padding:22px 24px;border:20px solid transparent;border-image:url("/art/ui/frame-gold.png") 32 stretch;
  background:linear-gradient(180deg,rgba(20,16,10,.25),rgba(0,0,0,.45)),url("/art/ui/bg-dark.png") repeat,#0b0e14;background-clip:padding-box;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.panel.frost{border-image-source:url("/art/ui/frame-silver.png")}
.panel.dragon::before{content:"";position:absolute;top:-46px;left:-46px;width:104px;height:104px;background:url("/art/ui/dragon.png") 0 0/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 2px 4px #000)}
.panel-title{font-family:var(--display);color:var(--wow-gold);letter-spacing:.03em;font-size:18px;margin:-4px 0 16px;display:flex;align-items:center;gap:10px;text-shadow:0 1px 0 #000}
.panel-title svg{width:22px;height:22px}
.panel-title .wicon{width:28px;height:28px}
.plaque{display:inline-flex;align-items:center;gap:12px;padding:12px 34px;font-family:var(--display);color:var(--wow-gold);background:url("/art/ui/header-gold.png") center/100% 100% no-repeat;text-shadow:0 1px 0 #000;min-height:46px}
.grid{display:grid;gap:30px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stack{display:grid;gap:16px}
.section{padding-block:clamp(40px,7vw,80px)}
.divider{height:2px;border:0;margin:20px 0;background:linear-gradient(90deg,transparent,var(--gold-dim) 20%,var(--wow-gold) 50%,var(--gold-dim) 80%,transparent)}

/* ---------- forms: steel edit boxes ---------- */
.field{display:grid;gap:4px;margin-bottom:14px}
.field label,.label{font-family:var(--label);font-size:14.5px;color:var(--wow-gold);text-shadow:0 1px 0 #000}
.input,textarea.input{width:100%;min-height:50px;padding:4px 12px;font:inherit;font-family:var(--body);font-size:17px;color:#fff;
  border:10px solid transparent;border-image:url("/art/ui/editbox.png") 14 fill stretch;background:none;caret-color:var(--wow-gold)}
select.input{width:100%;min-height:46px;padding:8px 12px;font:inherit;font-size:16px;color:#fff;background:#05070c;border:2px solid #4b5262;border-radius:2px}
select.input option{background:#05070c}
textarea.input{min-height:110px;resize:vertical}
.input:focus{outline:none;filter:brightness(1.35) drop-shadow(0 0 6px rgba(98,211,255,.5))}
.input::placeholder{color:#6f7686}
.hint{color:var(--mist-2);font-size:13.5px;font-family:var(--read)}
.code-input{font-family:var(--display);font-size:28px;letter-spacing:.3em;text-align:center}
.check{display:flex;gap:10px;align-items:center;color:var(--bone);cursor:pointer}
.check input{accent-color:var(--wow-gold);width:18px;height:18px}

/* ---------- notices ---------- */
.notice{padding:12px 16px;margin:0 0 16px;background:rgba(0,0,0,.6);border:1px solid;border-radius:2px;font-family:var(--read)}
.notice p{margin:0}.notice p+p{margin-top:4px}
.notice.ok{border-color:rgba(30,255,0,.4);color:#c8ffb8}
.notice.bad{border-color:rgba(255,58,42,.55);color:#ffc2b8}
.notice.warn{border-color:rgba(255,176,0,.5);color:#ffe1a0}
.notice.info{border-color:rgba(98,211,255,.45);color:#d2f1ff}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-size:12.5px;letter-spacing:.03em;padding:3px 10px;border-radius:2px;border:1px solid;white-space:nowrap;line-height:1.4;background:rgba(0,0,0,.6);text-shadow:0 1px 0 #000}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.chip.ok{color:var(--ok);border-color:rgba(30,255,0,.35)}
.chip.bad{color:#ff5a4a;border-color:rgba(255,58,42,.45)}
.chip.warn{color:var(--warn);border-color:rgba(255,176,0,.45)}
.chip.info{color:var(--rune);border-color:rgba(98,211,255,.4)}
.chip.idle{color:var(--mist);border-color:var(--line)}
.chip.gold{color:var(--wow-gold);border-color:rgba(255,209,0,.45)}
.chip.plain::before{display:none}

/* ---------- WoW tooltip ---------- */
.tip{position:relative;display:inline-flex}
.tip > .tip-body{position:absolute;z-index:60;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(340px,80vw);padding:8px 10px;
  border:8px solid transparent;border-image:url("/art/ui/frame-tooltip.png") 16 stretch;background:rgba(4,6,22,.95);background-clip:padding-box;
  color:#fff;font-family:var(--body);font-size:13.5px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .12s;text-align:left}
.tip:hover > .tip-body,.tip:focus-within > .tip-body{opacity:1}
.tip-body b{color:#fff;font-size:15px}
.tip-body .y{color:var(--wow-gold)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid rgba(255,209,0,.2);border-radius:2px;background:rgba(0,0,0,.55)}
table.table{border-collapse:collapse;width:100%;font-size:14.5px}
.table th{position:sticky;top:0;text-align:left;font-family:var(--label);font-weight:400;color:var(--wow-gold);background:linear-gradient(180deg,#1f1708,#0c0904);padding:10px 14px;border-bottom:1px solid var(--gold-dim);white-space:nowrap;text-shadow:0 1px 0 #000}
.table td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:linear-gradient(90deg,rgba(255,209,0,.09),transparent)}
.table tbody tr.clickable{cursor:pointer}
.num{font-variant-numeric:tabular-nums}

/* ---------- icons from the game ---------- */
.wicon{display:inline-block;width:36px;height:36px;border-radius:4px;flex:none;vertical-align:middle;box-shadow:0 0 0 1px #000,0 0 0 2px #5a5a5a,0 2px 6px rgba(0,0,0,.6);background:#000 center/cover no-repeat}
.wicon.sm{width:24px;height:24px}.wicon.lg{width:56px;height:56px}.wicon.xl{width:84px;height:84px}
.wicon.q2{box-shadow:0 0 0 1px #000,0 0 0 2px var(--q-uncommon)}.wicon.q3{box-shadow:0 0 0 1px #000,0 0 0 2px var(--q-rare)}
.wicon.q4{box-shadow:0 0 0 1px #000,0 0 0 2px var(--q-epic)}.wicon.q5{box-shadow:0 0 0 1px #000,0 0 0 2px var(--q-legendary)}
.q0{color:var(--q-poor)}.q1{color:var(--q-common)}.q2{color:var(--q-uncommon)}.q3{color:var(--q-rare)}.q4{color:var(--q-epic)}.q5{color:var(--q-legendary)}.q6,.q7{color:var(--q-artifact)}
.c1{color:#C69B6D}.c2{color:#F48CBA}.c3{color:#AAD372}.c4{color:#FFF468}.c5{color:#FFFFFF}.c6{color:#C41E3A}.c7{color:#0070DD}.c8{color:#3FC7EB}.c9{color:#8788EE}.c11{color:#FF7C0A}
.alliance{color:#4f8fe6}.horde{color:#d8463a}

/* ---------- footer ---------- */
.nr-footer{border-top:1px solid rgba(255,209,0,.2);background:#000;color:var(--mist-2);font-size:12.5px;padding-block:22px 34px;font-family:var(--read)}
.nr-footer .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}

/* ---------- the game's login screen ---------- */
.glue{position:relative;min-height:calc(100vh - 66px);display:grid;place-items:center;padding:40px 18px 100px}
.glue .glue-logo{position:absolute;top:18px;left:22px;width:min(340px,40vw);z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.85))}
.glue-box{position:relative;z-index:2;width:min(380px,100%);display:grid;gap:2px;justify-items:center;text-align:center}
.glue-box .field{width:100%}
.glue-box .field label{font-size:17px;text-align:center}
.glue-box .input{text-align:center}
.glue-box .btn-play,.glue-box .btn-gold{margin-top:8px;min-width:250px}
.glue-box .notice{width:100%}
.glue-corner{position:absolute;right:22px;bottom:30px;z-index:2;display:grid;gap:6px;width:230px}
.glue-corner .btn{--h:40px;font-size:13.5px;width:100%;padding:0 10px}
.glue-version{position:absolute;left:22px;bottom:30px;z-index:2;font-size:12.5px;color:#e6dfc8;text-shadow:0 1px 0 #000,0 0 6px #000}
.glue-legal{position:absolute;left:0;right:0;bottom:8px;z-index:2;text-align:center;font-size:11.5px;color:#b7b09a;text-shadow:0 1px 0 #000;font-family:var(--read)}
.glue-panel{width:100%;padding:18px 22px;border:16px solid transparent;border-image:url("/art/ui/frame-tooltip.png") 16 stretch;background:rgba(3,5,14,.84);background-clip:padding-box;text-align:left}
.glue-title{font-family:var(--title);font-size:clamp(30px,4vw,44px);margin:0 0 6px}
@media (max-width:820px){.glue{padding-top:150px;align-content:start}.glue .glue-logo{left:50%;transform:translateX(-50%);width:250px}
  .glue-corner{position:static;width:100%;max-width:380px;margin:22px auto 0}.glue-version,.glue-legal{position:static;text-align:center;margin-top:12px}}

/* ---------- misc ---------- */
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fade-in{animation:fadeIn .7s ease both}
@keyframes fadeIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
[hidden]{display:none!important}
@media (max-width:640px){.btn{white-space:normal;text-align:center;line-height:1.2;padding-inline:16px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}