/* the page's own reset */
:root { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout: the 2009 game site. Wyrmrest Temple at night fills the top of the page; the logo hangs
   in its sky, an iron nav bar drips icicles, and every module sits in a gilded filigree frame. */
:root {
  color-scheme: dark;
  --night: #040a0e;
  --well: rgba(7, 14, 20, .93);
  --well-2: rgba(4, 9, 13, .96);
  --rule: #1f3340;
  --gilt: #c99d4e;
  --gilt-hi: #f6dd98;
  --gilt-lo: #5a3d14;
  --text: #cfd9e0;
  --dim: #8c9ba6;
  --title: #f6d47c;
  --link: #f3b33d;
  --ice: #8fd6ff;
  --sys: #ffff00;
  --blood: #e0566a;
  --scourge: #7fd14b;
  --q-epic: #b05cf0; --q-rare: #3d8fe8; --q-unc: #1eff00; --q-leg: #ff8000; --gold: #ffd100;
  --tt-bg: #070b1c; --tt-edge: #6b7894;
  --zone: linear-gradient(180deg, #fffbe0 0%, #ffe066 40%, #ffc21a 70%, #d78a00 100%);
  --zone-hi: linear-gradient(180deg, #fff 0%, #fff2a8 40%, #ffd84a 70%, #f0a000 100%);

  --g-gold: sepia(.9) saturate(1.7) hue-rotate(-12deg) brightness(.82) contrast(1.08);
  --g-story: sepia(1) saturate(3) hue-rotate(-34deg) brightness(.5) contrast(1.25);
  --g-scourge: sepia(1) saturate(1.9) hue-rotate(48deg) brightness(.7) contrast(1.12);
  --g-arcane: sepia(1) saturate(1.7) hue-rotate(215deg) brightness(.68) contrast(1.12);
  --g-steel: grayscale(.75) brightness(.8) contrast(1.15);
  --g-ice: hue-rotate(18deg) saturate(.9) brightness(.9);
  --g-none: brightness(.92);

  --logo: "Cinzel", "Trajan Pro", Georgia, serif;
  --friz: "Marcellus", "Friz Quadrata", Georgia, serif;
  --caps: "Marcellus SC", "Marcellus", Georgia, serif;
  --body: "Alegreya Sans", Verdana, "Segoe UI", system-ui, sans-serif;

  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe7aa'/%3E%3Cstop offset='.45' stop-color='%23c0913f'/%3E%3Cstop offset='1' stop-color='%234d3210'/%3E%3C/linearGradient%3E%3Cg id='c'%3E%3Cpath d='M4 26V13Q4 4 13 4H26' fill='none' stroke='%23000' stroke-width='5.5'/%3E%3Cpath d='M4 26V13Q4 4 13 4H26' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3Cpath d='M9.5 26V15Q9.5 9.5 15 9.5H26' fill='none' stroke='%23000' stroke-opacity='.7' stroke-width='1.3'/%3E%3Cpath d='M3 19C11 19 19 11 19 3' fill='none' stroke='%23000' stroke-width='3.5'/%3E%3Cpath d='M3 19C11 19 19 11 19 3' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M26 4H46M26 68H46M4 26V46M68 26V46' stroke='%23000' stroke-width='5.5'/%3E%3Cpath d='M26 4H46M26 68H46M4 26V46M68 26V46' stroke='%23b58a3e' stroke-width='3'/%3E%3Cpath d='M26 3.2H46M26 67.2H46M3.2 26V46M67.2 26V46' stroke='%23f6dd98' stroke-opacity='.55' stroke-width='.8'/%3E%3Cpath d='M26 9.5H46M26 62.5H46M9.5 26V46M62.5 26V46' stroke='%23000' stroke-opacity='.7' stroke-width='1.3'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 72 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 72)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 72 72)'/%3E%3C/svg%3E");
  --icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='26' viewBox='0 0 180 26'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4fcff'/%3E%3Cstop offset='.5' stop-color='%23a9e0ff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%236cc4f0' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H180V3H172L168 19L164 3H150L147.5 10L145 3H128L124 24L120 3H103L100.5 11L98 3H82L78 17L74 3H58L55.5 9L53 3H38L34 22L30 3H16L13.5 12L11 3H0Z' fill='url(%23i)'/%3E%3Cpath d='M0 0H180V1.5H0Z' fill='%23fff' opacity='.8'/%3E%3C/svg%3E");
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.45' stop-color='%23d9a640'/%3E%3Cstop offset='1' stop-color='%23643f0e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2L3 23L8.5 18L12.5 27.5L17 25.5L13 16.5L20.5 16.5Z' fill='url(%23a)' stroke='%23140a00' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M5 6.5L5 17.5L8 14.6' fill='none' stroke='%23fffbe6' stroke-opacity='.75' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M9.6 20.6L13.4 19' stroke='%233a2508' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6.2' cy='19.2' r='1' fill='%23fff3c4'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .8 0 0 0 0 .9 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body {
  background-color: var(--night);
  background-image:
    linear-gradient(180deg, rgba(4, 10, 14, .05) 0, rgba(4, 10, 14, .25) 300px, rgba(4, 10, 14, .82) 640px, var(--night) 980px),
    url("/img/wyrmrest-temple.jpg");
  background-repeat: no-repeat;
  background-position: center top, center -40px;
  background-size: 100% 2400px, max(1920px, 100vw) auto;
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 760px) {
  body { background-size: 100% 1600px, 1300px auto; background-position: center top, 47% -10px;
    background-image: linear-gradient(180deg, rgba(4,10,14,.05) 0, rgba(4,10,14,.3) 220px, rgba(4,10,14,.88) 480px, var(--night) 760px), url("/img/wyrmrest-temple.jpg"); }
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: #05080c; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #ffe08a; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
/* there for screen readers and search engines, not the eye */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }

.wrap {
  max-width: 1160px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) { .wrap { padding-left: max(26px, env(safe-area-inset-left, 0px)); padding-right: max(26px, env(safe-area-inset-right, 0px)); } }

/* ---------- header ---------- */
.masthead { position: relative; height: 330px; }
.masthead canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.masthead .wrap { position: relative; height: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-top: 22px; }
.logo { display: block; width: min(430px, 78vw); line-height: 0; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.logo svg { width: 100%; height: auto; display: block; }
.logo:hover { text-decoration: none; }
.logo-tag { margin: 2px 0 0 14%; font: 400 15px/1.2 var(--caps); letter-spacing: .3em; color: #d9eef9; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .9); }
.playbox { margin-top: 18px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.playbox small { font: 400 13px/1.2 var(--caps); letter-spacing: .14em; color: #d9eef9; text-shadow: 0 1px 2px #000, 0 0 8px #000; }
@media (max-width: 760px) {
  .masthead { height: 230px; }
  .masthead .wrap { justify-content: center; padding-top: 18px; }
  .playbox { display: none; }
  .logo { margin-inline: auto; }
  .logo-tag { margin: 2px 0 0; text-align: center; font-size: 12px; }
}

/* ---------- nav ---------- */
.navbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 45%),
    linear-gradient(180deg, #26313d 0%, #121a23 46%, #070b10 54%, #111923 100%);
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(246, 221, 152, .45), inset 0 -1px 0 rgba(201, 157, 78, .6), 0 8px 20px rgba(0, 0, 0, .55);
}
.navbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; background: var(--icicles) repeat-x 0 0 / 180px 26px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.navbar .wrap { display: flex; align-items: stretch; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.navbar .wrap::-webkit-scrollbar { display: none; }
@media (max-width: 760px) { .navbar .wrap { justify-content: flex-start; } }
.navbar a {
  position: relative; white-space: nowrap; padding: 17px 22px 16px;
  font: 400 18px/1 var(--friz); color: #eadcae; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .8);
}
.navbar a + a::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); box-shadow: 1px 0 0 rgba(255, 255, 255, .08); }
.navbar a:hover { color: #fff; text-decoration: none; text-shadow: 0 0 10px rgba(255, 220, 140, .6), 0 1px 0 #000; }
.navbar a.on { color: var(--gold); text-shadow: 0 0 12px rgba(255, 209, 0, .55), 0 1px 0 #000; }
.navbar a.on::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: radial-gradient(circle at 35% 35%, #fff6c8, var(--gold) 50%, #8a6208); box-shadow: 0 0 6px var(--gold), 0 0 0 1px #000; }

.sysline { margin-top: 34px; font: 400 15px/1.45 var(--body); color: var(--sys); text-shadow: 0 1px 0 #000; padding: 6px 12px; background: rgba(0, 0, 0, .55); border-left: 2px solid rgba(255, 255, 0, .35); }

/* ---------- frames ---------- */
.frame {
  position: relative; min-width: 0;
  border: 1px solid transparent;
  border-image: var(--frame) 26 / 26px / 10px stretch;
  background: var(--spot, none), var(--grain), linear-gradient(180deg, var(--well), var(--well-2));
  background-clip: padding-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}
.mh { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 18px 14px; }
.mh::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 9px; background:
  linear-gradient(90deg, transparent, var(--gilt) 12%, var(--gilt) 88%, transparent) center / 100% 1px no-repeat,
  radial-gradient(circle, var(--gilt-hi) 0 2.5px, transparent 3px) center / 9px 9px no-repeat; }
.mh h1, .mh h2, .mh h3 { font: 400 20px/1.2 var(--friz); color: var(--title); letter-spacing: .01em; text-shadow: 0 1px 1px #000, 0 0 14px rgba(246, 180, 60, .25); }
.mh a, .mh .dim { font: 400 14px/1 var(--friz); white-space: nowrap; }
.mb { padding: 18px 18px 20px; }

.wowbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 400 18px/1 var(--friz); color: var(--gold); text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .7);
  padding: 13px 26px 12px; border-radius: 5px; border: 1px solid #f0c75e;
  background: linear-gradient(180deg, #ef4a35 0%, #c7251a 30%, #8e0e08 62%, #6a0805 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px #3a0000, inset 0 -6px 10px rgba(0, 0, 0, .35), 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, .65);
}
.wowbtn:hover { color: #fff6c0; text-decoration: none; filter: brightness(1.12); }
.wowbtn:active { transform: translateY(1px); }
.wowbtn.big { font-size: 21px; padding: 16px 34px 15px; }
.wowbtn.wide { width: 100%; }
.wowbtn.dark { background: linear-gradient(180deg, #2c3a4a, #151e29 55%, #0b1118); border-color: var(--gilt); color: #eadcae; }

/* ---------- screenshot crops ---------- */
.shot { display: block; background-image: var(--img, url("/img/wyrmrest-temple.jpg")); background-repeat: no-repeat; background-size: var(--z, 300%) auto; background-position: var(--x, 50%) var(--y, 50%); filter: var(--f, none); }
.thumb { position: relative; flex: none; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7d5f2e, 0 0 0 3px #000, 0 4px 10px rgba(0, 0, 0, .6); }
.thumb .shot { position: absolute; inset: 0; }
.thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 16px rgba(0, 0, 0, .75); }

/* ---------- front page ---------- */
main { padding-block: 30px 70px; }
[data-view] { display: grid; gap: 30px; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
@media (max-width: 1000px) { .home { grid-template-columns: 1fr; } }
.home > div { display: grid; gap: 30px; min-width: 0; }

.feature .stage { position: relative; aspect-ratio: 16 / 8; min-height: 320px; overflow: hidden; max-width: 100%; }
@media (max-width: 620px) { .feature .stage { aspect-ratio: auto; height: 420px; } }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.slide .shot { position: absolute; inset: -2%; transform: scale(1.02); }
.slide.on .shot { animation: drift 14s ease-out forwards; }
@keyframes drift { to { transform: scale(1.09) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .slide.on .shot { animation: none; } }
.slide .over { position: absolute; inset: 0; pointer-events: none; }
.slide .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 26px 24px; display: grid; gap: 8px; justify-items: start;
  background: linear-gradient(180deg, transparent, rgba(2, 5, 8, .72) 42%, rgba(2, 5, 8, .95)); }
.slide .kind { font: 400 13px/1 var(--caps); letter-spacing: .18em; color: var(--gilt-hi); text-shadow: 0 1px 2px #000; }
.slide h2 { font: 400 clamp(28px, 3.8vw, 44px)/1.06 var(--friz); color: #fff; text-shadow: 0 2px 4px #000, 0 0 24px rgba(0, 0, 0, .8); max-width: 20ch; }
.slide p { max-width: 58ch; color: #d5e0e8; text-shadow: 0 1px 2px #000; }
.slide .wowbtn { margin-top: 6px; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(201, 157, 78, .4); }
.strip button { appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; background: transparent; color: var(--dim); font: 400 15px/1.25 var(--friz); position: relative; }
.strip button + button { box-shadow: inset 1px 0 0 #000, inset 2px 0 0 rgba(255, 255, 255, .04); }
.strip .thumb { width: 64px; height: 40px; }
.strip button[aria-current="true"] { color: #fff; background: linear-gradient(180deg, rgba(246, 212, 124, .12), transparent); }
.strip button[aria-current="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.strip button:hover { color: #fff; }
@media (max-width: 620px) { .strip button { grid-template-columns: 1fr; justify-items: center; text-align: center; font-size: 13px; padding: 10px 6px; } .strip .thumb { width: 100%; height: 36px; } }

.news { display: grid; }
.ni { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 18px; padding: 18px; color: inherit; position: relative; }
.ni + .ni::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 10%, var(--rule) 90%, transparent); }
.ni:hover { text-decoration: none; background: linear-gradient(90deg, rgba(246, 212, 124, .05), transparent 80%); }
.ni .thumb { grid-row: span 3; width: 132px; height: 84px; }
.ni .meta { font: 400 13px/1.2 var(--caps); letter-spacing: .12em; color: var(--dim); display: flex; gap: 10px; flex-wrap: wrap; }
.ni .meta .k { color: var(--gilt); }
.ni h3 { font: 400 22px/1.22 var(--friz); color: var(--title); text-shadow: 0 1px 1px #000; }
.ni p { font-size: 15.5px; color: var(--dim); line-height: 1.5; }
.ni .rm { color: var(--link); font-size: 14px; }
@media (max-width: 560px) { .ni { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 14px; padding: 14px; } .ni .thumb { width: 88px; height: 62px; grid-row: span 2; } .ni p { grid-column: 1 / -1; } }
.more { display: flex; justify-content: center; padding: 6px 18px 20px; }
.agrid .ni { grid-template-columns: 76px minmax(0, 1fr); gap: 3px 14px; padding: 14px 16px; }
.agrid .ni .thumb { width: 76px; height: 52px; grid-row: span 2; }
.agrid .ni h3 { font-size: 17px; }
.agrid .ni p { display: none; }

.home .mb { display: grid; gap: 12px; }
.play p { font-size: 15px; color: var(--dim); text-align: center; }
.sotw { cursor: zoom-in; display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; padding: 0; border: 0; background: none; }
.sotw .shot { width: 100%; height: 100%; }
.sotw-cap { font-size: 14px; color: var(--dim); }
.plist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.plist li:last-child { border-bottom: 0; }
.plist b { font: 400 21px/1 var(--friz); color: var(--title); text-align: center; text-shadow: 0 1px 1px #000; }
.plist span { font: 400 16px/1.2 var(--friz); color: var(--text); }
.plist small { font-size: 13px; color: var(--dim); }
.glinks a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; color: var(--text); font: 400 16px/1.2 var(--friz); }
.glinks a:hover { color: var(--gold); text-decoration: none; }
.glinks .thumb { width: 48px; height: 32px; }
.soon li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.soon li:last-child { border-bottom: 0; }
.soon b { font: 400 16px/1.3 var(--friz); color: var(--text); }
.soon span { color: var(--dim); }
.soon em { font-style: normal; font: 400 12px/1 var(--caps); letter-spacing: .14em; color: var(--gilt); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .88); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lightbox .pic { width: min(1280px, 100%); aspect-ratio: 16 / 9; max-width: 100%; background: url("/img/wyrmrest-temple.jpg") center / cover; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gilt), 0 0 0 4px #000, 0 20px 60px #000; }
.lightbox p { margin-top: 14px; color: var(--text); text-align: center; }
.lightbox .x { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }

/* ---------- article ---------- */
.crumbs { font: 400 15px/1.3 var(--friz); color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; text-shadow: 0 1px 2px #000; }
.crumbs a { color: #eadcae; }
.agrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
@media (max-width: 1000px) { .agrid { grid-template-columns: 1fr; } }
.article .hero { position: relative; aspect-ratio: 16 / 6; min-height: 190px; overflow: hidden; max-width: 100%; }
.article .hero .shot { position: absolute; inset: 0; }
.article .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4, 9, 13, .96)); }
.article .head { position: relative; margin-top: -86px; padding: 0 clamp(18px, 4vw, 40px); z-index: 1; display: grid; gap: 6px; }
.article .head .kind { font: 400 13px/1 var(--caps); letter-spacing: .18em; color: var(--gilt-hi); }
.article h1 { font: 400 clamp(30px, 4.4vw, 46px)/1.06 var(--friz); color: #fff; text-shadow: 0 2px 4px #000; }
.article .date { color: var(--dim); font-style: italic; }
.article .body { padding: 22px clamp(18px, 4vw, 40px) 30px; display: grid; gap: 16px; font-size: 17px; line-height: 1.68; max-width: 76ch; }
.article .body h3 { font: 400 23px/1.2 var(--friz); color: var(--title); margin-top: 10px; text-shadow: 0 1px 1px #000; }
.article .body ul { display: grid; gap: 8px; }
.article .body li { position: relative; padding-left: 24px; }
.article .body li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gilt); box-shadow: 0 0 0 1px #000; }
.article .body b { color: #fff; font-weight: 500; }
.article .sig { padding: 0 clamp(18px, 4vw, 40px) 30px; color: var(--dim); font-style: italic; }
.anav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* item links and tooltips */
.item { cursor: help; font-weight: 500; }
.item:hover { text-decoration: none; }
.item.epic { color: var(--q-epic); } .item.rare { color: var(--q-rare); } .item.common { color: #fff; }
.tt { width: max-content; max-width: 320px; background: var(--tt-bg); color: #fff; border: 1px solid var(--tt-edge); border-radius: 6px; padding: 9px 12px 11px; box-shadow: inset 0 0 0 2px #0b1430, 0 14px 40px rgba(0, 0, 0, .6); font: 400 15px/1.36 var(--body); display: grid; gap: 1px; }
.tt .name { font-size: 17px; font-weight: 500; }
.tt .epic { color: var(--q-epic); } .tt .rare { color: var(--q-rare); } .tt .leg { color: var(--q-leg); } .tt .unc { color: var(--q-unc); } .tt .gold { color: var(--gold); } .tt .common { color: #fff; }
.tt .row { display: flex; justify-content: space-between; gap: 14px; }
.tt .stamp { margin-top: 3px; transition: color .25s; }
#hover-tt { position: fixed; z-index: 70; pointer-events: none; }
.tt-cap { font-size: 14px; color: var(--dim); margin-top: 10px; max-width: 320px; }

/* ---------- inner pages ---------- */
.banner { position: relative; min-height: 210px; overflow: hidden; display: grid; align-items: end; }
.banner > .shot { position: absolute; inset: 0; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 7, 10, .92) 0%, rgba(3, 7, 10, .6) 45%, rgba(3, 7, 10, .1) 100%), linear-gradient(180deg, transparent 50%, rgba(3, 7, 10, .7)); }
.banner .in { position: relative; z-index: 1; padding: 26px clamp(18px, 3.5vw, 34px) 26px; display: grid; gap: 8px; max-width: 760px; }
.banner .crumbs { margin-bottom: 2px; }
.banner h1 { font: 400 clamp(32px, 4.6vw, 50px)/1.04 var(--friz); color: #fff; text-shadow: 0 2px 4px #000, 0 0 30px rgba(0, 0, 0, .8); }
.banner p { color: #c8d6e0; text-shadow: 0 1px 2px #000; font-size: 17px; max-width: 64ch; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.tile { display: grid; color: inherit; }
.tile:hover { text-decoration: none; }
.tile .thumb { width: 100%; aspect-ratio: 16 / 8; height: auto; box-shadow: none; border-radius: 0; }
.tile .tb { padding: 14px 16px 18px; display: grid; gap: 4px; }
.tile h3 { font: 400 21px/1.2 var(--friz); color: var(--title); text-shadow: 0 1px 1px #000; }
.tile p { font-size: 15px; color: var(--dim); line-height: 1.45; }
.grp { font: 400 24px/1.2 var(--friz); color: var(--title); text-shadow: 0 1px 2px #000; display: flex; align-items: center; gap: 16px; }
.grp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gilt), transparent); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.cols.l { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cols, .cols.l { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 30px; min-width: 0; }
.prose { display: grid; gap: 12px; max-width: 70ch; }
.prose p { color: var(--dim); }
.prose b { color: var(--text); font-weight: 500; }
.k { font: 400 13px/1.2 var(--caps); letter-spacing: .14em; color: var(--gilt); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 26px; margin: 0; }
.facts div { display: grid; gap: 3px; min-width: 0; }
.facts dt { font: 400 13px/1.2 var(--caps); letter-spacing: .14em; color: var(--gilt); }
.facts dd { margin: 0; }
.note { margin-top: 16px; color: var(--dim); font-size: 15.5px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablebox { overflow-x: auto; }
th { text-align: left; font: 400 13px/1.2 var(--caps); letter-spacing: .12em; color: var(--gilt); padding: 0 12px 10px 0; border-bottom: 1px solid var(--gilt-lo); }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.m { color: var(--dim); }
td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }

/* emblem icons (engraved gold on painted ground) */
.ico { flex: none; width: 46px; height: 46px; border-radius: 3px; display: grid; place-items: center; position: relative; overflow: hidden;
  background: var(--grain), radial-gradient(80% 80% at 32% 28%, var(--ic1, #3c6aa0), var(--ic2, #0b1626) 75%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #7d5f2e, 0 0 0 3px #000, inset 0 0 10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ico svg { width: 28px; height: 28px; fill: none; stroke: #f5d886; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.ic-gold { --ic1: #9a7030; --ic2: #1e1305; } .ic-story { --ic1: #a0283a; --ic2: #22050b; } .ic-scourge { --ic1: #4f8c2b; --ic2: #0b1a05; }
.ic-arcane { --ic1: #7a4fc8; --ic2: #150a2c; } .ic-ice { --ic1: #3f86b8; --ic2: #07182a; } .ic-steel { --ic1: #5d6a78; --ic2: #10151b; }

/* phases */
.phases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ph { appearance: none; text-align: left; cursor: pointer; font: inherit; color: var(--dim); background: linear-gradient(180deg, #17222e, #0a1118); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a4652, 0 3px 8px rgba(0, 0, 0, .5); border-radius: 4px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ph .n { font: 400 30px/1 var(--friz); color: var(--text); }
.ph .p { font: 400 12px/1 var(--caps); letter-spacing: .12em; color: var(--gilt); }
.ph .r { font: 400 15px/1.25 var(--friz); color: var(--text); }
.ph:hover { box-shadow: inset 0 0 0 1px var(--gilt), 0 3px 8px rgba(0, 0, 0, .5); }
.ph[aria-selected="true"] { background: linear-gradient(180deg, #3a2c12, #140e05); box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 18px rgba(255, 209, 0, .18); }
.ph[aria-selected="true"] .n { color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, .5); }
.ph.beyond { border-style: dashed; }
.ppanel h3 { font: 400 25px/1.2 var(--friz); color: var(--title); margin-bottom: 16px; }

/* saga */
.questlog { position: relative; color: #3a2812; padding: clamp(20px, 3.5vw, 34px);
  background-color: #e6d4a6;
  background-image: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120, 80, 30, .4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0 0.12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
  border: 1px solid transparent; border-image: var(--frame) 26 / 26px / 10px stretch; background-clip: padding-box; box-shadow: 0 16px 34px rgba(0, 0, 0, .55); }
.questlog .k2 { font: 400 13px/1 var(--caps); letter-spacing: .16em; color: #7a4f1c; }
.questlog h2 { font: 400 27px/1.15 var(--friz); color: #2a1908; margin-top: 8px; }
.questlog .qh { font: 400 19px/1.2 var(--friz); color: #2a1908; margin: 18px 0 6px; }
.questlog p { font: 400 17px/1.55 var(--friz); }
.questlog .reward { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.questlog .item.common { color: #2a1908; text-shadow: none; }
.chapter { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.chapter:last-child { border-bottom: 0; }
.chapter .roman { font: 400 27px/1 var(--friz); color: var(--blood); grid-row: span 2; text-align: center; }
.chapter.open .roman { text-shadow: 0 0 14px rgba(224, 86, 106, .85); }
.chapter h4 { font: 400 20px/1.25 var(--friz); color: var(--text); }
.chapter p { grid-column: 2 / 4; color: var(--dim); font-size: 15.5px; }
.tag { font: 400 12px/1 var(--caps); letter-spacing: .12em; color: var(--gilt); white-space: nowrap; }
.tag.ptr { color: var(--scourge); }
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 620px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } }
.act { padding-top: 12px; border-top: 2px solid #5a2430; display: grid; gap: 4px; }
.act:last-child { border-top-color: var(--blood); }
.act b { font: 400 13px/1 var(--caps); letter-spacing: .14em; color: #ee7686; }
.act span { font-size: 15px; color: var(--dim); line-height: 1.4; }
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 16px; font-size: 15px; }
.lines div { display: grid; min-width: 0; }
.lines b { font: 400 12px/1.3 var(--caps); letter-spacing: .14em; color: var(--gilt); }
.track { position: relative; margin: 30px 8px 0; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #1a0d12, #2c141b); box-shadow: inset 0 1px 2px #000, 0 0 0 1px #4a2430; }
.track .stop { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 14px; height: 14px; background: linear-gradient(135deg, #ff9aa6, var(--blood) 50%, #5a1420); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(224, 86, 106, .6); }
.track-labels { position: relative; height: 62px; margin: 14px 8px 0; font-size: 13px; line-height: 1.25; color: var(--dim); }
.track-labels span { position: absolute; transform: translateX(-50%); text-align: center; width: 96px; }
.track-labels span:last-child { transform: translateX(calc(-100% + 10px)); text-align: right; }
.track-labels b { display: block; color: var(--text); font: 400 18px/1.2 var(--friz); }
.camp-list { display: none; gap: 6px; margin-top: 10px; font-size: 15px; }
.camp-list b { color: var(--text); margin-right: 6px; }
@media (max-width: 560px) { .track, .track-labels { display: none; } .camp-list { display: grid; } }

/* ledger */
.ledger { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } }
.ledger-in { padding: 18px; display: grid; gap: 18px; align-content: start; }
.ledger-out { padding: 18px; background: rgba(0, 0, 0, .35); box-shadow: inset 1px 0 0 #000, inset 2px 0 0 rgba(201, 157, 78, .3); display: grid; gap: 18px; align-content: start; }
@media (max-width: 900px) { .ledger-out { box-shadow: inset 0 1px 0 #000, inset 0 2px 0 rgba(201, 157, 78, .3); } }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .tiers { grid-template-columns: 1fr; } }
.tiers label { cursor: pointer; display: block; position: relative; }
.tiers input { position: absolute; opacity: 0; pointer-events: none; }
.tiers .t { display: grid; gap: 3px; padding: 11px 12px 12px; border-radius: 4px; background: linear-gradient(180deg, #17222e, #0a1118); box-shadow: inset 0 0 0 1px #3a4652, 0 0 0 1px #000; height: 100%; }
.tiers .t b { font: 400 17px/1.15 var(--friz); color: var(--text); }
.tiers .t small { font-size: 14px; color: var(--dim); }
.tiers input:checked + .t { box-shadow: inset 0 0 0 1px var(--ice), 0 0 0 1px #000, 0 0 22px rgba(143, 214, 255, .25); background: linear-gradient(180deg, #16314a, #0a1622); }
.tiers input:checked + .t b { color: #fff; }
.tiers input:focus-visible + .t { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.burdens { display: grid; gap: 4px; }
.burden { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 9px 10px; border-radius: 4px; cursor: pointer; }
.burden:hover { background: rgba(255, 255, 255, .03); }
.burden input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #b3263a; cursor: pointer; }
.burden b { font: 400 17px/1.3 var(--friz); color: var(--text); }
.burden small { grid-column: 2; color: var(--dim); font-size: 15px; line-height: 1.4; }
.burden .pts { font: 400 19px/1.2 var(--friz); color: #ee7686; }
.burden:has(input:checked) { background: rgba(179, 38, 58, .12); box-shadow: inset 0 0 0 1px #5a2430; }
.judgment { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.judgment .big { font: 400 76px/.9 var(--friz); color: var(--text); font-variant-numeric: tabular-nums; transition: color .25s; text-shadow: 0 2px 3px #000; }
.judgment .big.g { color: var(--gold); text-shadow: 0 0 20px rgba(255, 209, 0, .35), 0 2px 3px #000; } .judgment .big.o { color: var(--q-leg); text-shadow: 0 0 20px rgba(255, 128, 0, .4), 0 2px 3px #000; }
.strength { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.strength div { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 4px; padding: 10px 12px; }
.strength b { display: block; font: 400 25px/1.1 var(--friz); color: var(--text); }
.strength span { font: 400 12px/1.2 var(--caps); letter-spacing: .1em; color: var(--dim); }
.pays { display: grid; gap: 8px; font-size: 15.5px; }
.pays li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--dim); }
.pays li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; transform: rotate(45deg); background: var(--rule); }
.pays li.on { color: var(--text); } .pays li.on::before { background: var(--gold); box-shadow: 0 0 6px rgba(255, 209, 0, .5); }
.runes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.rune { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.rune h4 { font: 400 18px/1.2 var(--friz); color: var(--text); }
.rune .where { font-size: 14px; color: var(--gilt); }
.rune p { font-size: 15px; color: var(--dim); line-height: 1.4; margin-top: 3px; }
.keepers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 960px) { .keepers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .keepers { grid-template-columns: 1fr; } }
.keeper .mh h3 { color: var(--k); }
.keeper ul { display: grid; gap: 4px; font-size: 15px; color: var(--dim); }
.keeper .asc { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 12px; font-size: 15px; color: var(--dim); }
.keeper .asc b { color: var(--text); font-weight: 500; }
.k-hodir { --k: #a8e0ff; } .k-thorim { --k: #c6b4ff; } .k-freya { --k: #98e08f; } .k-mimiron { --k: #ffa267; }

/* misc */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1000px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards4 { grid-template-columns: 1fr; } }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }
.inc .thumb { width: 100%; aspect-ratio: 16 / 7; height: auto; box-shadow: none; border-radius: 0; }
dl.dd { display: grid; gap: 8px; margin: 0; font-size: 15px; }
dl.dd dt { font: 400 12px/1.2 var(--caps); letter-spacing: .14em; color: var(--gilt); }
dl.dd dd { margin: 0; line-height: 1.4; }
.tiers8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.tiers8 div { border-radius: 3px; padding: 8px 0; text-align: center; font: 400 20px/1 var(--friz); color: var(--dim); background: linear-gradient(180deg, #17222e, #0a1118); box-shadow: inset 0 0 0 1px #3a4652, 0 0 0 1px #000; }
.tiers8 div.mod { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gilt), 0 0 0 1px #000; }
.mods { display: grid; gap: 8px; margin-top: 14px; font-size: 15.5px; color: var(--dim); }
.mods b { color: var(--gold); font-weight: 500; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }
.roles div { border-radius: 4px; padding: 12px; font-size: 15px; color: var(--dim); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--rule); }
.roles b { display: block; font: 400 13px/1.3 var(--caps); letter-spacing: .14em; color: var(--text); margin-bottom: 4px; }
.hud { background: rgba(0, 0, 0, .6); border-radius: 4px; padding: 26px 18px 18px; display: grid; justify-items: center; gap: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.hud .ws { font: 400 16px/1.2 var(--friz); color: var(--gold); text-shadow: 0 1px 0 #000; text-align: center; }
.cbar { width: min(320px, 100%); height: 18px; border-radius: 9px; padding: 3px; background: #1b1b1b; border: 1px solid #6d5a2c; box-shadow: inset 0 1px 2px #000; }
.cbar .fill { position: relative; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #c99a3e 0 45%, #3e8e2a 45% 100%); }
.cbar .spark { position: absolute; top: -5px; bottom: -5px; left: 45%; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px #fff; border-radius: 2px; }
.hud .legend { display: flex; justify-content: space-between; width: min(320px, 100%); font: 400 12px/1 var(--caps); letter-spacing: .12em; }
.hud .legend span:first-child { color: #e8c56a; } .hud .legend span:last-child { color: var(--scourge); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flow div { border-top: 2px solid #2f4a24; padding-top: 12px; display: grid; gap: 4px; }
.flow div:last-child { border-top-color: var(--scourge); }
.flow b { font: 400 13px/1 var(--caps); letter-spacing: .14em; color: var(--scourge); }
.flow span { font-size: 15px; color: var(--dim); line-height: 1.4; }
.runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 560px) { .runs { grid-template-columns: 1fr; } }
.runs li { padding: 10px 0; border-bottom: 1px solid var(--rule); display: grid; }
.runs b { font: 400 17px/1.3 var(--friz); font-weight: 400; color: var(--text); }
.runs span { font-size: 14px; color: var(--dim); }
.ladder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ladder span { font: 400 19px/1 var(--friz); padding: 9px 11px; border-radius: 3px; color: var(--dim); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }
.ladder span:first-child { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gilt); }
.ranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.ranks div { border-bottom: 2px solid var(--gilt-lo); padding-bottom: 8px; font-size: 14px; color: var(--dim); }
.ranks div:last-child { border-bottom-color: var(--gold); }
.ranks b { display: block; font: 400 22px/1 var(--friz); color: var(--text); }
.paths .tb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.paths h3 { font: 400 20px/1.2 var(--friz); color: var(--title); margin-bottom: 4px; }
.paths p { font-size: 15px; color: var(--dim); line-height: 1.45; }
.talent { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.talent:last-child { border-bottom: 0; }
.talent .ico { overflow: visible; }
.talent .ico i { position: absolute; right: -7px; bottom: -7px; font: 700 11px/1 var(--body); font-style: normal; color: #9be27a; background: #000; border-radius: 3px; padding: 2px 3px; border: 1px solid #3f6b2c; }
.talent b { display: block; color: var(--text); font: 400 16px/1.3 var(--friz); }
.talent span { color: var(--dim); line-height: 1.4; }
.qol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 960px) { .qol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qol { grid-template-columns: 1fr; } }
.qi { padding: 11px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.qi:last-child { border-bottom: 0; }
.qi .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.qi b { font: 400 16px/1.3 var(--friz); color: var(--text); }
.qi em { font-style: normal; font: 400 11px/1.2 var(--caps); letter-spacing: .1em; color: var(--gilt); white-space: nowrap; }
.qi span { font-size: 15px; color: var(--dim); line-height: 1.45; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }
.stat .mb { display: grid; gap: 6px; }
.stat b { font: 400 clamp(40px, 5vw, 54px)/1 var(--friz); color: var(--gold); text-shadow: 0 0 18px rgba(255, 209, 0, .25), 0 2px 3px #000; }
.stat span { color: var(--dim); font-size: 15.5px; }
.log pre { margin: 0; font: 400 14px/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--dim); overflow-x: auto; }
.log .pass { color: #9be27a; } .log .t { color: var(--text); }
.fixes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 700px) { .fixes { grid-template-columns: 1fr; } }
.fixes li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; font-size: 15px; }
.fixes b { font: 400 17px/1.3 var(--friz); color: var(--text); }
.fixes span { color: var(--dim); line-height: 1.45; }
.fixes small { color: var(--gilt); font: 400 12px/1.2 var(--caps); letter-spacing: .12em; }
.steps { display: grid; counter-reset: s; }
.step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: 0; }
.step::before { counter-increment: s; content: counter(s); grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; font: 400 22px/1 var(--friz); color: var(--gold); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2c12, #120c04); box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 0 1px #000, 0 0 0 3px var(--gilt-lo), 0 0 0 4px #000; }
.step h3 { font: 400 20px/1.25 var(--friz); color: var(--text); }
.step p { color: var(--dim); }
code { font: 400 15px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); background: rgba(0, 0, 0, .5); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 6px; overflow-wrap: anywhere; }
.windows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.windows span { font: 400 15px/1 var(--friz); padding: 9px 12px; border-radius: 3px; color: var(--text); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }

/* the gauntlet */
html { cursor: var(--cur) 3 2, auto; }
a, button, label, input, select, [data-item], [data-spell] { cursor: var(--cur) 3 2, pointer; }

/* Game Guide menu */
.navbar .wrap > * { position: relative; }
.navbar .wrap > * + *::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); box-shadow: 1px 0 0 rgba(255, 255, 255, .08); }
.navbar a + a::before { content: none; }

/* spell buttons and the spell tooltip */
.spells { display: flex; flex-wrap: wrap; gap: 10px; }
.spellbtn { appearance: none; border: 0; padding: 0; background: none; }
.spellbtn .ico { width: 44px; height: 44px; transition: transform .12s, box-shadow .12s; }
.spellbtn:hover .ico, .spellbtn:focus-visible .ico { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gilt-hi), 0 0 0 3px #000, 0 0 12px rgba(255, 209, 0, .5), inset 0 0 10px rgba(0, 0, 0, .8); }
.spellbtn:active .ico { transform: scale(.94); }
.asc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.asc-row .ico { width: 54px; height: 54px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--k), 0 0 0 3px #000, 0 0 16px var(--k), inset 0 0 10px rgba(0, 0, 0, .8); }
.asc-row .ico svg { width: 32px; height: 32px; }
.asc-row b { display: block; font: 400 16px/1.25 var(--friz); color: var(--text); }
.asc-row span { font-size: 13px; color: var(--dim); }
.tt .sub { color: #fff; opacity: .85; }
.tt .desc { color: var(--gold); margin-top: 2px; }

/* loading screen tip */
.tip { display: grid; gap: 12px; }
.tip p { font: 400 16px/1.45 var(--friz); color: #fff; text-align: center; text-shadow: 0 1px 2px #000; min-height: 4.4em; }
.tip p b { color: var(--gold); font-weight: 400; }
.loadbar { height: 22px; padding: 4px 6px; border-radius: 3px; background: linear-gradient(180deg, #2a2a2a, #0c0c0c); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6d5a2c, inset 0 0 0 2px #000; }
.loadbar span { display: block; height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(180deg, #ffb35c 0%, #d6531b 45%, #8e2508 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); animation: load 2.6s cubic-bezier(.3, .6, .4, 1) both; transform-origin: left; }
@keyframes load { from { transform: scaleX(.18); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .loadbar span { animation: none; } }
.tip .wowbtn { justify-self: center; font-size: 15px; padding: 9px 16px 8px; }

/* unit frame */
.unit { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; margin-bottom: 14px; max-width: 360px; }
.unit .port { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: radial-gradient(circle at 40% 35%, #3f86b8, #07182a 70%); box-shadow: 0 0 0 2px #000, 0 0 0 5px #b7b7b7, 0 0 0 6px #000, inset 0 0 14px #000; }
.unit .port svg { width: 38px; height: 38px; fill: none; stroke: #bfe6ff; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px #4ab8ff); }
.unit .lvl { position: absolute; left: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--body); color: var(--gold); background: #1a1306; box-shadow: 0 0 0 1px #000, 0 0 0 2px #b7b7b7, 0 0 0 3px #000; }
.unit .bars { margin-left: -10px; padding: 4px 6px 4px 16px; background: #000; border-radius: 0 6px 6px 0; box-shadow: 0 0 0 2px #b7b7b7, 0 0 0 3px #000; display: grid; gap: 2px; }
.unit .uname { font: 400 13px/1.5 var(--body); color: #fff; text-align: center; background: linear-gradient(180deg, #1a7a1a, #0a4a0a); text-shadow: 0 1px 0 #000; }
.unit .hp, .unit .rp { position: relative; height: 13px; }
.unit .hp { background: linear-gradient(180deg, #2ee82e, #0d8a0d); }
.unit .rp { background: linear-gradient(90deg, #00d1ff 0 62%, #0b2a33 62%); }
.unit .hp::after, .unit .rp::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/13px var(--body); color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.unit .hp::after { content: "Health"; } .unit .rp::after { content: "Runic Power"; }

/* money */
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: .78em; height: .78em; border-radius: 50%; margin: 0 .12em 0 .18em; vertical-align: -.05em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 1px rgba(255, 255, 255, .6); }
.coin.g { background: radial-gradient(circle at 35% 30%, #fff3b0, #f0b81c 50%, #8a5a06); }
.coin.s { background: radial-gradient(circle at 35% 30%, #ffffff, #c4c4c4 50%, #6a6a6a); }
.coin.c { background: radial-gradient(circle at 35% 30%, #ffd2a8, #c8742e 50%, #6a3208); }

/* the quest mark */
.qmark { display: inline-block; font: 700 34px/1 var(--friz); color: var(--gold); vertical-align: -4px; margin-right: 10px; text-shadow: 0 0 0 #000, -1px -1px 0 #3a2800, 1px -1px 0 #3a2800, -1px 1px 0 #3a2800, 1px 1px 0 #3a2800, 0 0 10px rgba(255, 209, 0, .7); }

/* class colours */
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 26px; }
.heroes li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 400 16px/1.3 var(--friz); }
.heroes li span { color: var(--dim); font-family: var(--body); font-size: 15px; text-align: right; }

footer { margin-top: 20px; background: linear-gradient(180deg, #0a1016, #030507); border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(201, 157, 78, .5); padding-block: 30px 46px; color: var(--dim); font-size: 14px; }
footer .wrap { display: grid; gap: 14px; justify-items: center; text-align: center; }
footer .logo { width: 180px; filter: none; opacity: .85; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
footer nav a { color: #eadcae; font-family: var(--friz); font-size: 15px; }
footer p { max-width: 72ch; }

/* ================= the game's own furniture ================= */
:root {
  --plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c3748'/%3E%3Cstop offset='.5' stop-color='%23131b27'/%3E%3Cstop offset='1' stop-color='%23070b12'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe7aa'/%3E%3Cstop offset='.5' stop-color='%23b8893a'/%3E%3Cstop offset='1' stop-color='%235a3d14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M18 5H102L116 20L102 35H18L4 20Z' fill='url(%23p)' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M18 5H102L116 20L102 35H18L4 20Z' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M21 9H99L109 20L99 31H21L11 20Z' fill='none' stroke='%23f6dd98' stroke-opacity='.3'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4.5 11.5L9.5 16.5L18 4.5' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 11.5L9.5 16.5L18 4.5' fill='none' stroke='%23ffd100' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='5' seed='8' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='5' diffuseConstant='1' lighting-color='%2390b2cc'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='.1 0 0 0 0 0 .13 0 0 0 0 0 .16 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23s)'/%3E%3C/svg%3E");
  --artH: max(1040px, calc(56.25vw - 40px));
}
/* frozen stone under everything; the art hangs above it in a still backdrop */
body { background: var(--night) var(--stone) repeat 0 0 / 420px 420px; }
#backdrop { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--artH) + 520px); z-index: -1; overflow: hidden; pointer-events: none; }
#backdrop .art {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(4, 10, 14, .05) 0, rgba(4, 10, 14, .25) 300px, rgba(4, 10, 14, .82) 640px, var(--night) 980px),
    var(--art, url("/img/wyrmrest-temple.jpg")),
    linear-gradient(180deg, var(--night) 0, var(--night) var(--artH), rgba(4, 10, 14, 0) calc(var(--artH) + 520px));
  background-repeat: no-repeat;
  background-position: center top, var(--artX, 50%) -40px, center top;
  background-size: 100% var(--artH), max(1920px, 100vw) auto, 100% 100%;
}
#aurora { position: absolute; left: 0; top: 0; width: 100%; height: 560px; display: block; mix-blend-mode: screen; opacity: .9; }
@media (max-width: 760px) {
  :root { --artH: 721px; }
  #backdrop .art {
    background-image:
      linear-gradient(180deg, rgba(4, 10, 14, .05) 0, rgba(4, 10, 14, .3) 200px, rgba(4, 10, 14, .88) 460px, var(--night) 680px),
      var(--art, url("/img/wyrmrest-temple.jpg")),
      linear-gradient(180deg, var(--night) 0, var(--night) var(--artH), rgba(4, 10, 14, 0) calc(var(--artH) + 520px));
    background-position: center top, var(--artXm, 47%) -10px, center top;
    background-size: 100% var(--artH), 1300px auto, 100% 100%;
  }
  #aurora { height: 380px; }
}
html { scrollbar-color: #8a6a34 #06090d; }
::-webkit-scrollbar { width: 14px; height: 10px; }
::-webkit-scrollbar-track { background: #06090d; box-shadow: inset 1px 0 0 #1c2733; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4d3410, #c99d4e 45%, #f2d68c 50%, #c99d4e 55%, #4d3410); border: 3px solid #06090d; border-radius: 7px; }

/* title plaques on the frames' top edge, as the game's own windows wear them */
.mh { justify-content: center; align-items: flex-start; height: 34px; padding: 0 16px; }
.mh::after { content: none; }
.mh h1, .mh h2, .mh h3 {
  margin-top: -20px; height: 40px; line-height: 40px; padding: 0 6px; white-space: nowrap;
  font: 400 17px/40px var(--friz); color: var(--gold); text-shadow: 0 1px 1px #000, 0 0 10px rgba(255, 209, 0, .25);
  border-style: solid; border-color: transparent; border-width: 0 34px;
  border-image: var(--plaque) 0 34 fill / 0 34px stretch;
}
.mh > :not(h2):not(h3) { position: absolute; right: 18px; top: 7px; }
.mh > .portrait { left: -20px; right: auto; top: -30px; z-index: 3; }
.cards4 .mh h3 { font-size: 15px; border-width: 0 28px; border-image-width: 0 28px; }
@media (max-width: 1100px) and (min-width: 1001px) { .keepers .mh h3 { font-size: 15px; } }

/* the game's checkboxes */
.burden { grid-template-columns: 24px minmax(0, 1fr) auto; }
.burden input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 3px;
  background: radial-gradient(circle at 40% 35%, #262626, #040404);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a7440, inset 0 0 0 2px #000, inset 0 3px 5px rgba(0, 0, 0, .9);
}
.burden input:checked { background: var(--check) center / 22px 22px no-repeat, radial-gradient(circle at 40% 35%, #262626, #040404); }
.burden input:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }

/* painted icons */
.wi { position: relative; display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 3px; vertical-align: middle; background: #000;
  box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #7a6232, 0 0 0 3.5px #000, 0 3px 8px rgba(0, 0, 0, .65); }
.wi svg { display: block; width: 100%; height: 100%; border-radius: 3px; }
.wi.s28 { width: 28px; height: 28px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a6232, 0 0 0 3px #000, 0 2px 5px rgba(0, 0, 0, .7); }
.wi.s36 { width: 36px; height: 36px; }
.wi.s56 { width: 56px; height: 56px; }
.wi.s64 { width: 64px; height: 64px; }
.wi.portrait { width: 66px; height: 66px; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 6px #c99d4e, 0 0 0 7px #000, 0 0 18px rgba(183, 124, 255, .5), 0 6px 14px rgba(0, 0, 0, .7); }
.wi.portrait svg { border-radius: 50%; }
.spellbtn .wi { transition: transform .12s, box-shadow .12s; }
.spellbtn:hover .wi, .spellbtn:focus-visible .wi { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px var(--gilt-hi), 0 0 0 3.5px #000, 0 0 14px rgba(255, 209, 0, .55); }
.spellbtn:active .wi { transform: scale(.94); }
.asc-row .wi { width: 54px; height: 54px; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px var(--k), 0 0 0 3.5px #000, 0 0 18px var(--k); }
.trank { position: relative; display: inline-block; line-height: 0; }
.trank i { position: absolute; right: -8px; bottom: -8px; z-index: 1; font: 700 11px/1 var(--body); font-style: normal; color: #9be27a; background: #000; border-radius: 3px; padding: 2px 3px; border: 1px solid #3f6b2c; }
.qi { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.qi .wi { width: 40px; height: 40px; margin-top: 2px; }
.qi .qt { display: grid; gap: 2px; font-size: inherit; color: inherit; }
.ph { position: relative; }
.ph .phi { position: absolute; right: 10px; top: 10px; }
.incb { position: absolute; left: 14px; top: 14px; z-index: 2; }
.flow > div { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.flow .fl { display: grid; gap: 4px; font-size: inherit; color: inherit; }
.tw { position: relative; grid-row: span 3; width: 132px; height: 84px; }
.ni .tw .thumb { width: 100%; height: 100%; grid-row: auto; }
.tw .thumb, .tw2 .thumb { display: block; }
.tw .nb { position: absolute; right: -9px; bottom: -9px; z-index: 1; }
@media (max-width: 560px) { .tw { width: 88px; height: 62px; grid-row: span 2; } .tw .nb { right: auto; left: -7px; bottom: -7px; } }
.agrid .ni .tw { width: 76px; height: 52px; grid-row: span 2; }
.agrid .tw .nb { display: none; }
.tile .tw2 { position: relative; display: block; }
.tile .tw2 > .wi { position: absolute; left: 16px; bottom: -20px; z-index: 1; }
.tile .tb { padding-top: 30px; }
.glinks a { grid-template-columns: 36px minmax(0, 1fr); padding: 8px 0; }

/* the minimap */
.minimap { position: relative; display: grid; justify-items: center; padding-top: 2px; }
.minimap .zone { position: relative; z-index: 2; font: 400 14px/1 var(--friz); color: var(--gold); text-shadow: 0 1px 1px #000; padding: 7px 16px 6px; border-radius: 3px;
  background: linear-gradient(180deg, #1c2532, #05080c); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6a7684, 0 3px 6px rgba(0, 0, 0, .7); margin-bottom: -12px; }
.minimap .mm { position: relative; width: 220px; height: 220px; max-width: 100%; padding: 0; border: 0; background: none; border-radius: 50%; }
.minimap .mm .shot { position: absolute; inset: 10px; border-radius: 50%; }
.minimap .mm::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; box-shadow: inset 0 0 24px rgba(0, 0, 0, .85); pointer-events: none; }
.minimap .mmring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.minimap .mm:hover .shot { filter: brightness(1.12); }
.sotw-cap { margin-top: 4px; }

/* achievements */
.ach { display: grid; gap: 10px; }
.achrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 50px; gap: 16px; align-items: center; padding: 10px 14px 10px 12px; border-radius: 4px;
  background: linear-gradient(180deg, #2c2721, #15120d); box-shadow: inset 0 0 0 1px #6b5a3a, 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .08); }
.achrow b { display: block; font: 400 18px/1.25 var(--friz); color: var(--gold); text-shadow: 0 1px 1px #000; }
.achrow > div > span { color: #d8cfb8; font-size: 15px; line-height: 1.4; }
.achrow .shieldpts { position: relative; width: 50px; height: 56px; display: grid; place-items: center; }
.achrow .shieldpts svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.achrow .shieldpts b { position: relative; font: 400 21px/1 var(--friz); color: #fff; margin-top: -4px; }
@media (max-width: 560px) { .achrow { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 12px; } .achrow .wi { width: 44px; height: 44px; } .achrow .shieldpts { width: 40px; height: 45px; } }

/* the micro menu */
footer nav.micro { gap: 20px; }
/* the CMS's mark: a frost rune, as a death knight's runeforge glows */
footer p.forged { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; font: 400 12px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
footer .forged b { font-weight: 400; letter-spacing: .2em; color: #cdeeff; text-shadow: 0 0 8px rgba(143, 214, 255, .6), 0 1px 1px #000; }
footer .forged svg { width: 20px; height: 20px; fill: none; stroke: #8fd6ff; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(143, 214, 255, .75)); }
footer .forged a { display: inline-flex; align-items: center; gap: 9px; color: inherit; transition: color .2s; }
footer .forged a:hover { color: #cdeeff; text-decoration: none; }
footer .forged a:hover b { color: #fff; text-shadow: 0 0 12px rgba(143, 214, 255, .9), 0 1px 1px #000; }
footer .forged a:hover svg { filter: drop-shadow(0 0 7px rgba(143, 214, 255, 1)); }
footer nav.micro a { display: grid; justify-items: center; gap: 8px; font-size: 13px; }
footer nav.micro a:hover { text-decoration: none; color: #fff; }
footer nav.micro a:hover .wi { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px var(--gilt-hi), 0 0 0 3.5px #000, 0 0 12px rgba(255, 209, 0, .5); }

/* the nav bar, slimmer: dark glass, a thin gold rule, no icicles */
.navbar {
  background: rgba(5, 9, 14, .84); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-top: 0; border-bottom: 1px solid rgba(201, 157, 78, .28);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 12px 30px rgba(0, 0, 0, .45);
}
.navbar::after { content: none; }
.navbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(246, 221, 152, .9) 30%, rgba(246, 221, 152, .9) 70%, transparent); }
.navbar .wrap { gap: 4px; }
.navbar .wrap > * + *::before { content: none; }
.navbar a { padding: 15px 16px 14px; font: 400 16px/1 var(--friz); letter-spacing: .04em; color: #d6cab0; text-shadow: none; transition: color .15s, text-shadow .15s; }
.navbar a:hover { color: #fff; text-decoration: none; text-shadow: 0 0 14px rgba(143, 214, 255, .7); }
.navbar a.on { color: var(--gold); text-shadow: 0 0 14px rgba(255, 209, 0, .35); }
.navbar a.on::after { left: 16px; right: 16px; bottom: 0; width: auto; height: 2px; transform: none; border-radius: 2px 2px 0 0; background: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 0, .7); }

/* the Game Guide menu: a gilded panel, each page with its icon and a line about it */
.ddwrap { display: flex; }
.ddmenu { display: none; }
.car { display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .65; transition: transform .2s ease; }
@media (max-width: 760px) { .car { display: none; } }
@media (min-width: 761px) {
  .navbar .wrap { overflow: visible; }
  .ddmenu {
    --dx: 0px;
    display: block; position: absolute; left: 50%; top: calc(100% + 12px); z-index: 5; width: 660px; max-width: calc(100vw - 32px); padding: 22px 18px 0;
    border: 1px solid transparent; border-image: var(--frame) 26 / 26px / 10px stretch;
    background: var(--grain) padding-box, linear-gradient(180deg, #091017, #04080c) padding-box;
    box-shadow: 0 26px 50px rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dx)), 8px);
    transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s;
  }
  /* a gem on the frame over the link, and a bridge so the cursor can cross the gap */
  .ddmenu::before { content: ""; position: absolute; left: calc(50% - var(--dx)); top: -15px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); z-index: 1;
    background: radial-gradient(circle at 35% 35%, #fff6c8, var(--gilt-hi) 30%, var(--gilt) 60%, var(--gilt-lo)); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 209, 0, .5); }
  .ddmenu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
  .ddwrap:hover .ddmenu, .ddwrap:focus-within .ddmenu { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx)), 0); transition-delay: 0s; }
  .ddwrap.shut .ddmenu { opacity: 0; visibility: hidden; transition: none; }
  .ddwrap:hover > a .car, .ddwrap:focus-within > a .car { transform: translateY(3px) rotate(225deg); opacity: 1; }
  .ddwrap.shut > a .car { transform: rotate(45deg); opacity: .65; }
  .ddcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-items: start; }
  .ddgrp:first-child { grid-row: span 2; }
  .ddh { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; font: 400 13px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); text-shadow: 0 1px 0 #000; }
  .ddh::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 157, 78, .55), transparent); }
  .navbar .ddmenu a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; padding: 9px 10px; border-radius: 4px; letter-spacing: 0; color: inherit; transition: background .15s, box-shadow .15s; }
  .navbar .ddmenu a::before, .navbar .ddmenu a::after { content: none; }
  .navbar .ddmenu a:hover, .navbar .ddmenu a:focus-visible { background: linear-gradient(90deg, rgba(255, 209, 0, .1), rgba(255, 209, 0, .015)); box-shadow: inset 0 0 0 1px rgba(201, 157, 78, .28); text-shadow: none; outline: none; }
  .navbar .ddmenu a.on { box-shadow: inset 2px 0 0 var(--gold); }
  .ddmenu b { display: block; font: 400 17px/1.15 var(--friz); color: var(--title); text-shadow: 0 1px 1px #000; }
  .ddmenu small { display: block; margin-top: 3px; font: 400 14px/1.3 var(--body); color: var(--dim); }
  .navbar .ddmenu a:hover b, .navbar .ddmenu a.on b { color: #ffe9a8; }
  .navbar .ddmenu a:hover small { color: var(--text); }
  .navbar .ddmenu .ddall { display: block; margin-top: 10px; padding: 14px 0 20px; text-align: center; font: 400 15px/1 var(--friz); letter-spacing: .04em; color: var(--link); border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 157, 78, .6) 20%, rgba(201, 157, 78, .6) 80%, transparent) top / 100% 1px no-repeat; }
  .navbar .ddmenu .ddall:hover, .navbar .ddmenu .ddall:focus-visible { color: #fff; box-shadow: none; text-shadow: 0 0 12px rgba(255, 209, 0, .5);
    background: linear-gradient(90deg, transparent, rgba(201, 157, 78, .6) 20%, rgba(201, 157, 78, .6) 80%, transparent) top / 100% 1px no-repeat; }
}
@media (prefers-reduced-motion: reduce) { .ddmenu, .car { transition: none; } }

/* the development notice, as a system alert */
.sysline {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 18px;
  border: 1px solid transparent; border-image: var(--frame) 26 / 26px / 10px stretch;
  background: radial-gradient(90% 180% at 0% 50%, rgba(255, 190, 40, .22), transparent 60%), linear-gradient(90deg, rgba(22, 15, 4, .96), rgba(6, 8, 12, .96) 70%) padding-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 36px rgba(255, 200, 40, .14);
  color: #ffe45c; font: 400 17px/1.45 var(--friz); text-shadow: 0 0 12px rgba(255, 210, 40, .5), 0 1px 1px #000;
  animation: sysin 1.2s ease-out both;
}
.sysline p { flex: 1 1 260px; min-width: 0; }
.sysline p b { font-weight: 400; color: #fff7a8; }
.sysline .wi { animation: syspulse 3s ease-in-out 1.2s infinite; }
.sysline .ptr { font: 400 12px/1 var(--caps); letter-spacing: .16em; color: #9be27a; padding: 7px 10px 6px; border-radius: 3px; background: rgba(111, 191, 63, .12); box-shadow: inset 0 0 0 1px #3f6b2c; text-shadow: none; white-space: nowrap; }
@keyframes sysin { from { opacity: .7; transform: translateY(-6px); text-shadow: 0 0 22px rgba(255, 240, 80, .95), 0 1px 1px #000; } to { opacity: 1; transform: none; } }
@keyframes syspulse { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #7a6232, 0 0 0 3.5px #000, 0 3px 8px rgba(0, 0, 0, .65); } 50% { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #f6dd98, 0 0 0 3.5px #000, 0 0 16px rgba(255, 209, 0, .7); } }
@media (prefers-reduced-motion: reduce) { .sysline, .sysline .wi { animation: none; } }

/* realm status, with the old site's up and down arrows */
.rlist { display: grid; }
.rlist li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
.rlist li:last-child { border-bottom: 0; }
.rlist i { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.rlist .up i { border-bottom: 11px solid #3ee03e; filter: drop-shadow(0 0 4px rgba(62, 224, 62, .75)); }
.rlist .down i { border-top: 11px solid #e0303a; filter: drop-shadow(0 0 4px rgba(224, 48, 58, .75)); }
.rlist .maint i { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #ffb020; box-shadow: 0 0 6px rgba(255, 176, 32, .75); }
.rlist .rn { display: grid; font: 400 16px/1.25 var(--friz); color: var(--text); }
.rlist .rn small { font: 400 12px/1.3 var(--caps); letter-spacing: .12em; color: var(--dim); }
.rlist b { font: 400 14px/1 var(--friz); }
.rlist .up b { color: #5ee85e; } .rlist .down b { color: #ff5a64; } .rlist .maint b { color: #ffb020; }
.rlist p { grid-column: 2 / -1; font-size: 13.5px; line-height: 1.4; color: var(--dim); }
.rchk { margin-top: 10px; font-size: 13px; color: var(--dim); }

/* this week */
.wk-now { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.wk-now b { display: block; font: 400 20px/1.2 var(--friz); color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, .3), 0 1px 1px #000; }
.wk-now span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.wk-facts { display: grid; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.wk-facts dt { font: 400 12px/1.2 var(--caps); letter-spacing: .14em; color: var(--gilt); }
.wk-facts dd { margin: 3px 0 0; font-size: 15px; }
.wk-also { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--dim); }

/* How to Play: the game's big red button, gilded, with the frames' gem studs at its corners */
.playbtn {
  position: relative; isolation: isolate; border-radius: 0; padding: 17px 36px 16px; font: 400 23px/1 var(--friz); letter-spacing: .02em; text-shadow: none;
  border: 1px solid transparent; border-image: var(--frame) 26 / 22px / 9px stretch;
  background:
    var(--grain) padding-box,
    radial-gradient(120% 90% at 50% 0%, rgba(255, 150, 100, .5), transparent 60%) padding-box,
    linear-gradient(180deg, #dc3520 0%, #ad180d 42%, #760a05 58%, #500603 100%) padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 225, 190, .55), inset 0 -9px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px #2a0000, 0 8px 18px rgba(0, 0, 0, .65);
  transition: box-shadow .2s, filter .2s, transform .08s;
}
.playbtn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 210, .5) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat;
  transition: background-position .9s ease;
}
.playbtn span {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fffbe2 0%, #ffe26a 45%, #f2a900 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 6px rgba(0, 0, 0, .6));
  transition: filter .2s;
}
.playbtn:hover { filter: brightness(1.1); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 225, 190, .6), inset 0 -9px 16px rgba(0, 0, 0, .4), inset 0 0 0 1px #2a0000, 0 8px 18px rgba(0, 0, 0, .65), 0 0 22px rgba(255, 160, 50, .55); }
.playbtn:hover::after { background-position: -60% 0; }
.playbtn:hover span { filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 9px rgba(255, 210, 80, .8)); }
.playbtn:active { transform: translateY(2px); filter: brightness(.92);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6), inset 0 0 0 1px #2a0000, 0 3px 8px rgba(0, 0, 0, .6); }
.playbtn:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 12px; }
@media (prefers-reduced-motion: reduce) { .playbtn::after { transition: none; } }

/* a little life: things answer the cursor */
.wi { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
a:hover .wi, .ni:hover .wi, .qi:hover .wi, .rune:hover .wi, .talent:hover .wi, .achrow:hover .wi, .paths .tb:hover .wi, .incb:hover {
  transform: translateY(-2px); filter: brightness(1.18) saturate(1.1);
}
.ni .thumb .shot, .tile .thumb .shot, .inc .thumb .shot { transition: transform .9s cubic-bezier(.2, .6, .2, 1); }
.ni:hover .thumb .shot, .tile:hover .thumb .shot, .inc:hover .thumb .shot { transform: scale(1.08); }
.tile { transition: transform .25s ease; }
.tile:hover { transform: translateY(-3px); }

/* news that knows how old it is */
.ni .meta .ago { color: var(--dim); }
.ni .meta .ago::before { content: "·"; margin-right: 10px; color: var(--rule); }
.newtag { font: 400 11px/1 var(--caps); letter-spacing: .14em; color: #1a0f00; padding: 4px 7px 3px; border-radius: 3px;
  background: linear-gradient(180deg, #fff0a0, #f0b020); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 200, 40, .55); }

/* a realm that is up breathes */
.rlist .up i { animation: rpulse 2.6s ease-in-out infinite; }
@keyframes rpulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(62, 224, 62, .55)); } 50% { filter: drop-shadow(0 0 9px rgba(62, 224, 62, 1)); transform: translateY(-1px); } }

@media (prefers-reduced-motion: reduce) {
  .rlist .up i { animation: none; }
  .tile:hover, a:hover .wi, .ni:hover .wi, .ni:hover .thumb .shot, .tile:hover .thumb .shot, .inc:hover .thumb .shot { transform: none; }
}

/* the slideshow's cast bar */
.castbar { position: relative; height: 18px; margin: 10px 14px 12px; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, #1a1a1a, #050505); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #5d6670, 0 0 0 2px #2a2f36, inset 0 2px 4px rgba(0, 0, 0, .8); }
.castbar .fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc(100% - 4px); transform-origin: left; transform: scaleX(0); border-radius: 2px;
  background: linear-gradient(180deg, #ffe27a 0%, #f5b31a 45%, #c27c08 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.castbar .spark { position: absolute; top: -2px; bottom: -2px; left: 2px; width: 12px; margin-left: -6px; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 235, .95), rgba(255, 220, 120, .5) 40%, transparent 70%); }
.castbar.casting .fill { animation: cast 8s linear forwards; }
.castbar.casting .spark { opacity: 1; animation: spark 8s linear forwards; }
.feature:hover .castbar .fill, .feature:hover .castbar .spark, .feature:focus-within .castbar .fill, .feature:focus-within .castbar .spark { animation-play-state: paused; }
@keyframes cast { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spark { from { left: 2px; } to { left: calc(100% - 2px); } }
.castbar .label { position: relative; z-index: 1; display: block; padding: 0 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 12px/18px var(--friz); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }

/* the quest mark bobs, as it does over a quest giver */
.qmark { animation: qbob 1.8s ease-in-out infinite alternate; }
@keyframes qbob { from { transform: translateY(1px); } to { transform: translateY(-4px); } }

/* over an item link, the gauntlet becomes the loot bag */
:root { --loot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.4' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23d9a35c'/%3E%3Cstop offset='.55' stop-color='%23935a22'/%3E%3Cstop offset='1' stop-color='%234a2a0c'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2b0'/%3E%3Cstop offset='1' stop-color='%23c08a20'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 3C10 1 18 1 18 3L16.5 8C22.5 10.5 26 15.5 26 20.5C26 26 21 28.5 14 28.5C7 28.5 2 26 2 20.5C2 15.5 5.5 10.5 11.5 8Z' fill='url(%23b)' stroke='%23140a00' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10.5 8.5C13 10 15 10 17.5 8.5' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M8 15C6.5 18 6.5 22 8.5 25' fill='none' stroke='%23ffe2a8' stroke-opacity='.45' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='19' r='2.2' fill='url(%23g)' stroke='%23140a00' stroke-width='.8'/%3E%3C/svg%3E"); }
a.item { cursor: var(--loot) 4 3, pointer; }

/* the sky keeps the server's hours */
[data-sky="day"] #backdrop .art { filter: saturate(.82) brightness(1.05) hue-rotate(6deg); }
[data-sky="night"] #backdrop .art { filter: brightness(.9) saturate(1.1); }

/* the last day before the weekly reset */
.wk-count.soon { color: #ffa040; text-shadow: 0 0 10px rgba(255, 140, 30, .65); animation: soon 2s ease-in-out infinite; }
@keyframes soon { 50% { text-shadow: 0 0 16px rgba(255, 140, 30, .95); } }

@media (prefers-reduced-motion: reduce) { .qmark, .wk-count.soon { animation: none; } }

/* holidays, worn by the site (holidays.js): the sky turns, weather of the holiday's own, a garland along the menu
   bar and the holiday's things at its corner. Each holiday also colours the logo's gem and the front page's banner. */
.holi { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.holi svg { overflow: visible; }
/* the sky: a colour laid over the art (::before), and a soft light that deepens it without flattening it (::after) */
#backdrop::before, #backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
#backdrop::before { z-index: 1; mix-blend-mode: color; }
#backdrop::after { z-index: 2; mix-blend-mode: soft-light; }

/* Hallow's End: a harvest moon, a web in the corner, pumpkins lit from inside */
.h-moon { position: absolute; top: 38px; right: 17%; width: 92px; height: 92px; border-radius: 50%; opacity: .95;
  background: radial-gradient(circle at 64% 70%, rgba(170, 70, 0, .28) 0 9%, transparent 10%), radial-gradient(circle at 34% 58%, rgba(170, 70, 0, .22) 0 6%, transparent 7%), radial-gradient(circle at 55% 30%, rgba(170, 70, 0, .2) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 38%, #fff6d6 0%, #ffe08a 38%, #ffb246 72%, #e47818 100%);
  box-shadow: 0 0 34px 8px rgba(255, 170, 70, .4), 0 0 110px 34px rgba(255, 120, 30, .2); }
.h-corner { position: absolute; top: 0; right: 0; width: 210px; height: 210px; }
.hw { display: block; width: 100%; height: 100%; }
.hw-spider { animation: hspider 7s ease-in-out infinite alternate; }
@keyframes hspider { from { transform: translateY(-16px); } to { transform: translateY(12px); } }
.h-props { position: absolute; right: 4%; bottom: 0; display: flex; align-items: flex-end; }
.h-left { right: auto; left: 2.5%; }
.hp { display: block; height: auto; margin: 0 -7px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .75)); }
.hp-face, .hp-light { animation: hflick 3.6s infinite; }
.hp-face { filter: drop-shadow(0 0 2px #ffcf4a) drop-shadow(0 0 7px rgba(255, 140, 0, .9)); }
.hp-light { mix-blend-mode: screen; }
.hp.p2 .hp-face, .hp.p2 .hp-light { animation-delay: -1.4s; }
.hp.p3 .hp-face, .hp.p3 .hp-light { animation-delay: -2.3s; }
.hp.p4 .hp-face, .hp.p4 .hp-light { animation-delay: -.7s; }
@keyframes hflick { 0%, 100% { opacity: 1; } 7% { opacity: .78; } 10% { opacity: .97; } 38% { opacity: .88; } 41% { opacity: 1; } 66% { opacity: .82; } 70% { opacity: .96; } 88% { opacity: .9; } }
.hc { display: block; width: 18px; height: 68px; margin: 0 1px; }
.hc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hflame 1.7s ease-in-out infinite alternate; }
.hc-halo { mix-blend-mode: screen; animation: hflick 2.8s infinite; }
.hc.c2 .hc-flame { animation-delay: -.6s; } .hc.c3 .hc-flame { animation-delay: -1.1s; } .hc.c4 .hc-flame { animation-delay: -.3s; }
@keyframes hflame { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.9, 1.1) skewX(4deg); } 100% { transform: scale(1.05, .92) skewX(-4deg); } }

/* garlands along the menu bar, and the things hung from the top */
.h-garland { position: absolute; left: 0; right: 0; bottom: 16px; height: 70px; }
.hg-garland { display: block; }
.h-garland.k-evergreen { bottom: -22px; }
/* candlelight and firelight spill around the things at the corner */
[data-holiday="hallows"] .h-props::before, [data-holiday="dead"] .h-props::before, [data-holiday="midsummer"] .h-props::before {
  content: ""; position: absolute; left: -50px; right: -40px; top: -30px; bottom: -14px; z-index: -1; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 140, 40, .38), transparent 75%); animation: hflick 4.4s infinite; }
.gw { transform-box: fill-box; transform-origin: 50% 0; animation: hsway 4.2s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes hsway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.gl { animation: htwinkle 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes htwinkle { from { opacity: .35; } to { opacity: 1; } }
.h-hang { position: absolute; top: 0; right: 5%; display: flex; align-items: flex-start; gap: 22px; }
.hl { display: grid; justify-items: center; transform-origin: 50% 0; animation: hlsway 5s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px rgba(255, 90, 60, .7)); }
.hl i { width: 1px; height: var(--cord); background: rgba(255, 220, 150, .6); }
.hl svg { width: var(--sz); height: auto; margin-top: -2px; }
.hl.l2 { animation-delay: -1.7s; } .hl.l3 { animation-delay: -3.1s; } .hl.l4 { animation-delay: -.9s; }
@keyframes hlsway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.hm { display: block; width: 120px; height: auto; margin: 0 -4px 0 -2px; }
.hg, .hk, .hh, .hb, .he { display: block; height: auto; }
.hg { width: 150px; } .hk { width: 104px; } .hh { width: 150px; } .hb { width: 120px; } .he { width: 140px; }
.hf { display: block; width: 116px; height: auto; }
.hf-flames { transform-box: fill-box; transform-origin: 50% 100%; animation: hflame 1.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px rgba(255, 140, 30, .9)); }
@media (max-width: 760px) {
  .h-props { right: 2%; transform: scale(.66); transform-origin: right bottom; }
  .h-left, .h-corner .hw-spider { display: none; }
  .h-corner { width: 130px; height: 130px; }
  .h-moon { width: 58px; height: 58px; top: 22px; right: 10%; }
  .h-hang { transform: scale(.7); transform-origin: right top; }
  .h-garland { bottom: 10px; }
  .h-garland.k-evergreen { bottom: -26px; }
}

/* each holiday's sky, over the art; and the light of its things on the menu bar */
[data-holiday="hallows"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(110, 40, 150, .35) 0, rgba(255, 110, 30, .25) 500px, transparent 900px); }
[data-holiday="hallows"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(30, 0, 60, .95) 0, rgba(90, 20, 110, .75) 220px, rgba(255, 120, 30, .55) 520px, transparent 900px); }
[data-holiday="dead"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(225, 60, 140, .32) 0, rgba(255, 160, 40, .36) 420px, transparent 900px); }
[data-holiday="dead"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(50, 0, 30, .8) 0, rgba(190, 50, 110, .55) 240px, rgba(255, 150, 60, .6) 500px, transparent 900px); }
[data-holiday="pilgrim"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(215, 105, 40, .55) 0, rgba(230, 140, 50, .45) 500px, transparent 900px); }
[data-holiday="pilgrim"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(70, 25, 0, .75) 0, rgba(255, 150, 60, .55) 420px, transparent 900px); }
[data-holiday="veil"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(230, 245, 255, .6) 0, rgba(255, 255, 255, .25) 500px, transparent 900px); }
[data-holiday="lunar"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(170, 20, 40, .35) 0, transparent 900px); }
[data-holiday="lunar"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(40, 0, 10, .8) 0, rgba(255, 120, 60, .5) 480px, transparent 900px); }
[data-holiday="love"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(230, 80, 160, .3) 0, transparent 900px); }
[data-holiday="love"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 180, 220, .5) 0, transparent 900px); }
[data-holiday="noble"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 230, 245, .55) 0, rgba(210, 255, 210, .35) 480px, transparent 900px); }
[data-holiday="children"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 245, 210, .55) 0, rgba(180, 230, 255, .35) 480px, transparent 900px); }
[data-holiday="midsummer"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(255, 140, 40, .5) 0, rgba(255, 110, 30, .4) 500px, transparent 900px); }
[data-holiday="midsummer"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(60, 10, 0, .6) 0, rgba(255, 180, 60, .6) 500px, transparent 900px); }
[data-holiday="brewfest"] #backdrop::before { opacity: 1; background: linear-gradient(180deg, rgba(225, 150, 50, .5) 0, rgba(225, 150, 50, .35) 500px, transparent 900px); }
[data-holiday="brewfest"] #backdrop::after { opacity: 1; background: linear-gradient(180deg, rgba(50, 20, 0, .6) 0, rgba(255, 200, 100, .45) 480px, transparent 900px); }
[data-holiday="hallows"] .navbar { box-shadow: 0 -1px 0 rgba(255, 150, 50, .45), 0 -16px 40px -12px rgba(255, 120, 20, .5); }
[data-holiday="dead"] .navbar { box-shadow: 0 -1px 0 rgba(255, 170, 60, .4), 0 -16px 40px -12px rgba(255, 140, 30, .45); }
[data-holiday="midsummer"] .navbar { box-shadow: 0 -1px 0 rgba(255, 150, 50, .45), 0 -18px 46px -12px rgba(255, 110, 20, .55); }

/* the logo's gem takes the holiday's colour */
#rgGem stop, #wpLogo > circle { transition: stop-color 1s, fill 1s; }
[data-holiday="hallows"] #rgGem stop:nth-child(2), [data-holiday="midsummer"] #rgGem stop:nth-child(2) { stop-color: #ffe08a; }
[data-holiday="hallows"] #rgGem stop:nth-child(3), [data-holiday="midsummer"] #rgGem stop:nth-child(3) { stop-color: #ff7a1a; }
[data-holiday="hallows"] #rgGem stop:nth-child(4), [data-holiday="midsummer"] #rgGem stop:nth-child(4) { stop-color: #4a1400; }
[data-holiday="hallows"] #wpLogo > circle, [data-holiday="midsummer"] #wpLogo > circle { fill: #ff9a3a; }
[data-holiday="dead"] #rgGem stop:nth-child(2) { stop-color: #ffd0f0; } [data-holiday="dead"] #rgGem stop:nth-child(3) { stop-color: #e0409a; } [data-holiday="dead"] #rgGem stop:nth-child(4) { stop-color: #4a0a3a; }
[data-holiday="dead"] #wpLogo > circle { fill: #ff6ac0; }
[data-holiday="veil"] #rgGem stop:nth-child(2), [data-holiday="lunar"] #rgGem stop:nth-child(2) { stop-color: #ffc4c4; }
[data-holiday="veil"] #rgGem stop:nth-child(3), [data-holiday="lunar"] #rgGem stop:nth-child(3) { stop-color: #e02a2a; }
[data-holiday="veil"] #rgGem stop:nth-child(4), [data-holiday="lunar"] #rgGem stop:nth-child(4) { stop-color: #4a0606; }
[data-holiday="veil"] #wpLogo > circle, [data-holiday="lunar"] #wpLogo > circle { fill: #ff5a5a; }
[data-holiday="love"] #rgGem stop:nth-child(3) { stop-color: #ff4f8b; } [data-holiday="love"] #rgGem stop:nth-child(4) { stop-color: #5a0a2a; } [data-holiday="love"] #wpLogo > circle { fill: #ff7ab0; }
[data-holiday="noble"] #rgGem stop:nth-child(3) { stop-color: #5ad16a; } [data-holiday="noble"] #rgGem stop:nth-child(4) { stop-color: #0e4a1a; } [data-holiday="noble"] #wpLogo > circle { fill: #9af0a0; }
[data-holiday="pilgrim"] #rgGem stop:nth-child(3), [data-holiday="brewfest"] #rgGem stop:nth-child(3) { stop-color: #e8a33a; }
[data-holiday="pilgrim"] #rgGem stop:nth-child(4), [data-holiday="brewfest"] #rgGem stop:nth-child(4) { stop-color: #4a2a06; }
[data-holiday="pilgrim"] #wpLogo > circle, [data-holiday="brewfest"] #wpLogo > circle { fill: #ffc24a; }

/* the front page's banner for the holiday now */
.holi-banner { --hb-glow: rgba(255, 140, 40, .3); --hb-a: #ffb14a; --hb-t: linear-gradient(180deg, #fff3d0 0%, #ffc85a 45%, #ff8a1a 75%, #c45000 100%); --hb-bg: #120c16;
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 26px; overflow: hidden;
  background: radial-gradient(ellipse 40% 140% at 0% 50%, var(--hb-glow), transparent 70%), radial-gradient(ellipse 30% 120% at 100% 50%, var(--hb-glow), transparent 70%), var(--hb-bg); }
.holi-banner .hb-icon { position: relative; width: 86px; height: 86px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 3px #b98a3a, 0 0 0 4px #000, 0 0 26px var(--hb-glow); }
.holi-banner .hb-icon img, .holi-banner .hb-icon .wi { display: block; width: 100%; height: 100%; }
.holi-banner .hb-k { font: 400 12px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--hb-a); }
.holi-banner h2 { margin: 6px 0 8px; font: 400 clamp(28px, 3.4vw, 40px)/1.05 var(--friz); background: var(--hb-t); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px #000); }
.holi-banner .hb-text p:not(.hb-k) { max-width: 62ch; color: #d8d0c4; font-size: 16px; line-height: 1.55; }
.holi-banner .hb-more { margin-top: 6px; color: var(--dim) !important; font-size: 15px !important; }
.holi-banner .hb-time { display: grid; justify-items: end; gap: 4px; text-align: right; }
.holi-banner .hb-time span { font: 400 12px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.holi-banner .hb-time b { font: 400 30px/1 var(--friz); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 18px var(--hb-glow), 0 2px 2px #000; }
.holi-banner .hb-time b i { font-style: normal; font-size: 16px; color: var(--hb-a); margin-left: 1px; }
.holi-banner .hb-time small { margin-top: 6px; font-size: 14px; color: var(--dim); }
[data-holiday="dead"] .holi-banner { --hb-glow: rgba(255, 90, 180, .28); --hb-a: #ffb84a; --hb-t: linear-gradient(180deg, #fff0fa 0%, #ffb0e0 40%, #ff6ab4 70%, #c0207a 100%); --hb-bg: #160a16; }
[data-holiday="pilgrim"] .holi-banner, [data-holiday="brewfest"] .holi-banner { --hb-glow: rgba(232, 163, 58, .28); --hb-a: #e8b84a; --hb-bg: #140e08; }
[data-holiday="veil"] .holi-banner { --hb-glow: rgba(255, 70, 70, .26); --hb-a: #8ae0a0; --hb-t: linear-gradient(180deg, #ffffff 0%, #ffd0d0 40%, #ff5a5a 72%, #a3121e 100%); --hb-bg: #0c1410; }
[data-holiday="lunar"] .holi-banner { --hb-glow: rgba(255, 80, 60, .3); --hb-a: #ffd65a; --hb-t: linear-gradient(180deg, #fff6d0 0%, #ffd65a 45%, #ff7a3a 75%, #b3121e 100%); --hb-bg: #160808; }
[data-holiday="love"] .holi-banner { --hb-glow: rgba(255, 80, 150, .3); --hb-a: #ffb0d0; --hb-t: linear-gradient(180deg, #fff0f6 0%, #ffb0d0 45%, #ff4f8b 75%, #a3124a 100%); --hb-bg: #160a10; }
[data-holiday="noble"] .holi-banner, [data-holiday="children"] .holi-banner { --hb-glow: rgba(120, 220, 140, .24); --hb-a: #b8f0a0; --hb-t: linear-gradient(180deg, #ffffff 0%, #fff0a0 45%, #8ae07a 80%, #2a8a3a 100%); --hb-bg: #0c140e; }
@media (max-width: 760px) {
  .holi-banner { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; }
  .holi-banner .hb-icon { width: 64px; height: 64px; }
  .holi-banner .hb-time { grid-column: 1 / -1; justify-items: start; text-align: left; grid-template-columns: auto auto; align-items: baseline; gap: 4px 12px; }
  .holi-banner .hb-time b { font-size: 24px; }
  .holi-banner .hb-time small { grid-column: 1 / -1; margin-top: 0; }
}
.wk-holi { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 150, 40, .12), transparent 80%); box-shadow: inset 0 0 0 1px rgba(255, 170, 60, .25); }
.wk-holi b { display: block; font: 400 17px/1.2 var(--friz); color: #ffb14a; text-shadow: 0 0 10px rgba(255, 150, 40, .35), 0 1px 1px #000; }
.wk-holi span { font-size: 14px; color: var(--text); }
.wk-next { margin-top: 10px; font-size: 14px; color: var(--dim); }
.wk-next b { color: var(--text); font-weight: 400; font-family: var(--friz); }

/* the first reading of a post unfolds like quest text */
.unfold { animation: unfold .7s ease-out both; }
@keyframes unfold { from { opacity: .06; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* coins catch the light */
.money .coin { transition: transform .2s; }
.money:hover .coin { animation: coinglint .75s ease; }
@keyframes coinglint { 40% { transform: scale(1.18) rotate(-12deg); filter: brightness(1.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 9px rgba(255, 220, 100, .95), inset 0 1px 1px rgba(255, 255, 255, .7); } }

@media (prefers-reduced-motion: reduce) { .h-props::before, .hp-face, .hp-light, .hc-flame, .hc-halo, .hw-spider, .gw, .gl, .hl, .hf-flames, .unfold, .money:hover .coin { animation: none; } }

/* what the CMS's editor can write: every item quality, pictures, quotes, numbered lists and links */
.item.poor { color: #9d9d9d; } .item.uncommon { color: var(--q-unc); } .item.legendary { color: var(--q-leg); } .item.heirloom { color: #e6cc80; }
a.item:not([data-item]) { cursor: inherit; }
.article .body a:not(.item) { color: var(--link); }
.article .body ol { display: grid; gap: 8px; counter-reset: step; }
.article .body ol li { padding-left: 32px; counter-increment: step; }
.article .body ol li::before { content: counter(step) "."; left: 0; top: 0; width: 24px; height: auto; margin: 0; transform: none; background: none; box-shadow: none; font: 400 17px/1.68 var(--friz); color: var(--gilt-hi); text-align: right; }
.article .body figure { margin: 6px 0; display: grid; gap: 8px; }
.article .body figure img, .article .body p img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #7a6232, 0 0 0 3.5px #000, 0 10px 24px rgba(0, 0, 0, .6); }
.article .body figcaption { font-size: 14px; color: var(--dim); text-align: center; font-style: italic; }
.article .body blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--gilt); color: #e8dcc0; font-style: italic; display: grid; gap: 10px; }
.news .none { padding: 18px; }

/* ---------- realm status: who's playing, and how long a realm has been up ---------- */
.rlist p.rline { color: #b9c8d2; }
.rlist .up p.rline { color: #9fe0a4; }

/* ---------- the play box's Discord link ---------- */
.wowbtn.discord { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.wowbtn.discord svg { width: 22px; height: 22px; color: #aab4ff; }

/* ---------- how to play: the realmlist and the downloads ---------- */
.howto-extra { display: grid; gap: 14px; padding: 6px 0 18px; }
.realmlist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-radius: 4px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px var(--rule); }
.realmlist .k2 { grid-column: 1 / -1; font: 400 12px/1 var(--caps); letter-spacing: .14em; color: var(--gilt-hi); }
.realmlist code { font: 16px/1.3 Consolas, "Courier New", monospace; color: #fff; overflow-wrap: anywhere; }
.dl { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- progression: the phase the realm is in, and the next ---------- */
.plist li.now { background: linear-gradient(90deg, rgba(255, 209, 0, .12), transparent 80%); box-shadow: inset 2px 0 0 var(--gold); }
.plist li.now b { color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, .55); }
.plist li.now span { color: #fff; }
.plist li.now .nowtag { color: #1a0f00; text-shadow: none; }
.plist li.done b, .plist li.done span { opacity: .55; }
.plist .nowtag { display: inline-block; font: 400 11px/1 var(--caps); letter-spacing: .12em; color: #1a0f00; background: linear-gradient(180deg, #fff0a0, #f0b020); padding: 3px 6px 2px; border-radius: 3px; margin-right: 4px; text-shadow: none; text-align: left; }
.plist small .num { color: var(--ice); }
.ph.now { box-shadow: inset 0 0 0 1px rgba(255, 209, 0, .55), 0 0 14px rgba(255, 209, 0, .15); }
.ph.next:not([aria-selected="true"]):not(:hover) { box-shadow: inset 0 0 0 1px rgba(143, 214, 255, .45), 0 0 14px rgba(143, 214, 255, .12), 0 3px 8px rgba(0, 0, 0, .5); }
/* the card's foot: the next phase's countdown, or the current phase's mark */
.ph .r { margin-bottom: 6px; }
.ph .when { display: grid; gap: 5px; margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(143, 214, 255, .25); }
.ph .wl { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.ph .wt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.ph .wt b { font: 400 21px/1 var(--friz); color: #eaf8ff; text-shadow: 0 0 9px rgba(143, 214, 255, .6), 0 1px 1px #000; }
.ph .wt i { font: 400 11px/1 var(--caps); font-style: normal; color: var(--ice); margin-left: 2px; }
.ph .wt .u-s b { display: inline-block; min-width: 1.1em; }
.ph .wt .go { font: 400 17px/1 var(--friz); color: #eaf8ff; text-shadow: 0 0 9px rgba(143, 214, 255, .6); }
.ph .wd { font: 400 12px/1.3 var(--body); color: var(--dim); }
.ph.now .when { border-top-color: rgba(255, 209, 0, .3); }
.ph.now .wl { color: var(--gold); }
.ph .wl .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); animation: phdot 2.2s ease-in-out infinite; }
@keyframes phdot { 50% { opacity: .3; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ph .wl .dot { animation: none; } }

/* ---------- the realm census ---------- */
.census-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.census-pick:empty { display: none; }
.census-pick button { appearance: none; cursor: pointer; display: grid; gap: 3px; text-align: left; padding: 10px 18px; border-radius: 4px; border: 1px solid #000; font: 400 17px/1.1 var(--friz); color: var(--text);
  background: linear-gradient(180deg, #17222e, #0a1118); box-shadow: inset 0 0 0 1px #2a3a48; }
.census-pick button small { font: 400 11px/1 var(--caps); letter-spacing: .14em; color: var(--dim); }
.census-pick button[aria-selected="true"] { color: var(--gold); background: linear-gradient(180deg, #3a2c12, #140e05); box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 14px rgba(255, 209, 0, .15); }
#census { display: grid; gap: 30px; margin-top: 24px; }
#census[aria-busy] { opacity: .6; transition: opacity .2s; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 4px; }
.kpi { display: grid; align-content: start; gap: 4px; padding: 16px 16px 18px; text-align: center; }
.kpi + .kpi { box-shadow: inset 1px 0 0 var(--rule); }
.kpi b { font: 400 34px/1 var(--friz); color: var(--title); text-shadow: 0 2px 3px #000, 0 0 18px rgba(246, 180, 60, .25); font-variant-numeric: tabular-nums; }
.kpi b .money { font: inherit; }
.kpi b .coin { width: .5em; height: .5em; }
.kpi span { font: 400 12px/1.3 var(--caps); letter-spacing: .12em; color: var(--gilt-hi); }
.kpi small { font-size: 13px; color: var(--dim); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi:nth-child(4) { box-shadow: none; } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(odd) { box-shadow: none; } .kpi b { font-size: 27px; } }
.census-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 30px; align-items: start; }
.census-grid .wide { grid-column: 1 / -1; }
.census-grid .mb { display: grid; gap: 12px; }
.dim.small, .census-grid .small { font-size: 13.5px; }
.cnote { text-align: center; }
.vbars { display: grid; gap: 7px; }
.vbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 70px; gap: 12px; align-items: center; }
.vbar .vl { font: 400 15px/1.2 var(--friz); color: var(--text); text-shadow: 0 1px 1px #000; }
.vbar .vt { height: 12px; border-radius: 2px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #1a2832; overflow: hidden; }
.vbar .vt i { display: block; height: 100%; min-width: 2px; background: var(--gilt); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 3px rgba(0, 0, 0, .35); border-radius: 2px; }
.vbar b { font: 500 15px/1 var(--body); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.vbar b small { margin-left: 6px; font-weight: 400; color: var(--dim); font-size: 12.5px; }
.ccols { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 6px; }
.ccol { flex: 1; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 18px; align-items: end; }
.ccol i { display: block; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #f6dd98, #b17a1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.ccol small { font-size: 11px; color: var(--dim); text-align: center; white-space: nowrap; overflow: visible; }
.cline { display: block; width: 100%; height: 150px; }
.clegend { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--dim); }
.faction { display: flex; height: 30px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a6232, 0 0 0 3px #000; font: 400 15px/30px var(--friz); color: #fff; text-shadow: 0 1px 2px #000; }
.faction .a { background: linear-gradient(180deg, #3f7fe0, #163f8a); padding-left: 10px; }
.faction .h { background: linear-gradient(180deg, #d0353d, #6e0f14); text-align: right; padding-right: 10px; }
.factions { display: flex; justify-content: space-between; font: 400 16px/1 var(--friz); }
.factions .a { color: #7fb0ff; } .factions .h { color: #ff7a82; }
.factions b { color: #fff; font-weight: 400; }
.fronts { display: grid; gap: 9px; }
.fr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; }
.fr .fh { display: grid; font: 400 15px/1.15 var(--friz); color: var(--text); }
.fr .fh small { font: 400 11px/1.3 var(--caps); letter-spacing: .1em; color: var(--dim); }
.fr .fg { height: 12px; border-radius: 2px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #1a2832; overflow: hidden; }
.fr .fg i { display: block; height: 100%; background: linear-gradient(90deg, #4c8a20, #b7d43a 60%, #e0303a); border-radius: 2px; }
.fr b { font: 500 15px/1 var(--body); color: #c8ff40; text-align: right; }
.fr.rallied b { color: var(--gold); }
.camp { display: grid; gap: 12px; }
.camp .cg { position: relative; height: 14px; margin: 6px 6px 4px; border-radius: 7px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #2a1a1a; }
.camp .cg i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, #7a0a18, #e0566a); box-shadow: 0 0 10px rgba(224, 86, 106, .45); }
.camp .cg em { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); background: #24171a; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a6232; }
.camp .cg em.got { background: radial-gradient(circle at 35% 35%, #fff6c8, var(--gold) 50%, #8a6208); }
.goals { display: grid; gap: 5px; font-size: 14px; color: var(--dim); }
.goals li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.goals li b { font: 400 15px/1.3 var(--friz); color: var(--dim); text-align: right; }
.goals li.got { color: var(--text); } .goals li.got b { color: var(--gold); }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.nums div { display: grid; gap: 4px; }
.nums b { font: 400 28px/1 var(--friz); color: var(--title); text-shadow: 0 2px 3px #000; font-variant-numeric: tabular-nums; }
.nums span { font-size: 13.5px; color: var(--dim); }
@media (max-width: 560px) { .vbar { grid-template-columns: 90px minmax(0, 1fr) 62px; } .fr { grid-template-columns: 110px minmax(0, 1fr) 54px; } }

/* ---------- item tooltips from the realm's database ---------- */
.tt .poor { color: #9d9d9d; } .tt .uncommon { color: var(--q-unc); } .tt .legendary { color: var(--q-leg); } .tt .heirloom { color: #e6cc80; }
.tt .gray { color: #9d9d9d; }
.tt .set { margin-top: 7px; }
.tt .setpiece { padding-left: 12px; color: #9d9d9d; }
.tt .setpiece.on { color: #fff3a8; }
.tt .socket, .tt .gem { display: flex; align-items: center; gap: 7px; }
.tt .socket::before, .tt .gem::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .25); background: #555; }
.tt .socket.s1::before, .tt .gem.meta::before { background: radial-gradient(circle at 35% 35%, #fff, #9aa3ad 60%, #3a414b); border-radius: 50%; }
.tt .socket.s2::before { background: #b02a2a; } .tt .socket.s4::before { background: #c9a227; } .tt .socket.s8::before { background: #2a5bb0; }
.tt .gem::before { background: radial-gradient(circle at 35% 35%, #fff, #c9a7ff 55%, #5a3a9a); }

/* ---------- the Armory ---------- */
.aframe .mb { display: grid; gap: 16px; }
.asearch { display: flex; gap: 10px; }
.asearch input, .rform input, .rform select, .rform textarea, .dv-lang select {
  flex: 1; min-width: 0; font: 400 16px/1.3 var(--body); color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid #000; border-radius: 3px; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px #3a4652, inset 0 2px 6px rgba(0, 0, 0, .6); }
.asearch input:focus, .rform input:focus, .rform select:focus, .rform textarea:focus, .dv-lang select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 10px rgba(255, 209, 0, .2); }
.asearch .wowbtn { padding-block: 9px; }
#armory-list[aria-busy] { opacity: .6; }
.acount { margin-bottom: 8px; }
.alist { display: grid; }
.arow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 64px; gap: 14px; align-items: center; padding: 9px 10px; color: var(--text); border-bottom: 1px solid var(--rule); }
.arow:hover { text-decoration: none; background: linear-gradient(90deg, rgba(246, 212, 124, .06), transparent 80%); }
.arow .an { display: grid; gap: 2px; min-width: 0; }
.arow .an b { font: 400 18px/1.15 var(--friz); color: var(--c); text-shadow: 0 1px 1px #000; }
.arow .an small { font-size: 13.5px; color: var(--dim); }
.arow .ag { font: 400 15px/1.2 var(--friz); color: #9fe0a4; text-align: right; }
.lvl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 400 15px/1 var(--friz); color: #ffe9a8; background: radial-gradient(circle at 40% 35%, #2b2410, #0b0904);
  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c, #c99d4e), 0 0 0 4px #000, 0 2px 6px rgba(0, 0, 0, .6); }
.lvl.a { --ring: #3f7fe0; } .lvl.h { --ring: #d0353d; }
.lvl.big { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--c, #c99d4e), 0 0 0 5px #000, 0 0 0 8px var(--ring, #7d5f2e), 0 0 0 9px #000, 0 0 22px var(--c); flex: none; }
.aon { justify-self: end; font: 400 11px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: #8dff6a; text-shadow: 0 0 8px rgba(141, 255, 106, .5); }
.aon::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #8dff6a; box-shadow: 0 0 6px #8dff6a; vertical-align: 1px; }
.aon.big { font-size: 13px; align-self: start; }
@media (max-width: 560px) { .arow { grid-template-columns: 40px minmax(0, 1fr) 60px; } .arow .ag { display: none; } }
.ccrumbs { margin-bottom: 14px; }
#character { display: grid; gap: 30px; }
.charhead .mb { display: grid; gap: 20px; }
.ch-top { display: flex; align-items: center; gap: 22px; }
.ch-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
.ch-name h1 { font: 400 clamp(26px, 3.6vw, 38px)/1.1 var(--friz); color: #f2e6c4; text-shadow: 0 2px 3px #000; }
.ch-name h1 b { font-weight: 400; color: var(--c); }
.ch-name p { font-size: 16px; color: var(--text); }
.ch-name .gname { color: #9fe0a4; }
.ch-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 700px) { .ch-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-top { gap: 16px; } .lvl.big { width: 52px; height: 52px; font-size: 22px; } }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ch-side { display: grid; gap: 30px; }
@media (max-width: 1000px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } }
.gearf .mb { display: grid; gap: 14px; }
.doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; }
.doll .dcol { display: grid; gap: 8px; align-content: start; }
.doll.weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .doll, .doll.weapons { grid-template-columns: minmax(0, 1fr); } }
.slot { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 3px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #1a2832; }
.slot[data-tip] { cursor: help; }
.slot[data-tip]:hover, .slot[data-tip]:focus-visible { outline: none; background: rgba(246, 212, 124, .07); box-shadow: inset 0 0 0 1px #6b5a3a; }
.slot .sq { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; font: 400 14px/1 var(--friz); color: #fff; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 40% 35%, var(--qc, #333) 0%, #0b0d10 85%); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px var(--qc, #333), 0 0 0 3.5px #000; }
.slot.empty .sq { --qc: #22282f; }
.slot .sn { display: grid; gap: 1px; min-width: 0; }
.slot .sn small { font: 400 10.5px/1.2 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.slot .sn b { font: 500 15px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.empty .sn b { color: #4c5862; font-weight: 400; }
.slot .sx { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12.5px; line-height: 1.3; }
.slot .sx em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.q-poor { --qc: #9d9d9d; } .q-common { --qc: #d8d8d8; } .q-uncommon { --qc: #1eff00; } .q-rare { --qc: #3d8fe8; } .q-epic { --qc: #b05cf0; } .q-legendary { --qc: #ff8000; } .q-heirloom { --qc: #e6cc80; }
.slot .poor, .sx .poor { color: #9d9d9d; } .slot .common, .sx .common { color: #fff; } .slot .uncommon, .sx .uncommon, .sx .unc { color: var(--q-unc); } .slot .rare, .sx .rare { color: var(--q-rare); }
.slot .epic, .sx .epic { color: var(--q-epic); } .slot .legendary, .sx .legendary { color: var(--q-leg); } .slot .heirloom, .sx .heirloom { color: #e6cc80; }
.spec { display: grid; gap: 7px; }
.spec + .spec { padding-top: 14px; border-top: 1px solid var(--rule); }
.spec:not(.on) { opacity: .7; }
.sp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sp-h b { font: 400 19px/1.2 var(--friz); color: var(--title); font-weight: 400; }
.sp-h small { font: 400 11px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cach { display: grid; gap: 18px; }
.ach-total { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.ach-total b { font: 400 34px/1 var(--friz); color: var(--title); }
.ach-total span:not(.vt) { color: var(--dim); }
.ach-total .vt { grid-column: 1 / -1; height: 14px; border-radius: 3px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #1a2832; overflow: hidden; }
.ach-total .vt i { display: block; height: 100%; background: linear-gradient(180deg, #f6dd98, #b17a1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.cach .vbar { grid-template-columns: 150px minmax(0, 1fr) 96px; }
.ach-recent { display: grid; gap: 8px; }
.ach-h { font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-hi); }
.achrow.arm { grid-template-columns: 50px minmax(0, 1fr) auto; }
.achrow.arm small { color: var(--dim); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) { .achrow.arm { grid-template-columns: 40px minmax(0, 1fr); } .achrow.arm small { grid-column: 2; } .cach .vbar { grid-template-columns: 110px minmax(0, 1fr) 80px; } }

/* ---------- report a bug ---------- */
.bugline { margin-top: 8px; font-size: 14px; }
.rform { display: grid; gap: 14px; }
.rform label { display: grid; gap: 6px; }
.rform label > span { font: 400 15px/1.2 var(--friz); color: var(--title); }
.rform label > span em { font: 400 13px/1.2 var(--body); font-style: normal; color: var(--dim); }
.rform textarea { resize: vertical; min-height: 4.5em; }
.rform select, .dv-lang select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gilt) 50%), linear-gradient(135deg, var(--gilt) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.rform select option, .dv-lang select option { background: #0b1118; }
.rform .r2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px) { .rform .r2 { grid-template-columns: minmax(0, 1fr); } }
.rform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rerr { color: #ff8a8a; }
.ract { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rdone { display: grid; gap: 16px; justify-items: start; }
.rok { font: 400 18px/1.45 var(--friz); color: var(--text); }
.rok b { color: var(--gold); font-weight: 400; }
.rtips { display: grid; gap: 12px; color: var(--text); }
.rtips b { display: block; font: 400 16px/1.3 var(--friz); color: var(--title); font-weight: 400; }

/* ---------- player accounts ---------- */
.navbar .navacct { margin-left: 10px; padding-inline: 14px; border-left: 1px solid rgba(201, 157, 78, .35); color: var(--gold); }
.navbar .navacct.in::before { content: ""; position: static; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #8dff6a; box-shadow: 0 0 6px #8dff6a; vertical-align: 2px; }
.play .wowbtn.dark { margin-top: 12px; }
.acctwrap { max-width: 720px; margin: 0 auto; }
.acctwrap.narrow { max-width: 480px; }
.acctlead { font: 400 17px/1.45 var(--friz); color: var(--text); margin-bottom: 18px; }
.ract a { font-size: 15px; }
.rok.small { font: 400 15px/1.4 var(--body); color: #9fe0a4; }
.acctcall { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 18px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 209, 0, .1), rgba(0, 0, 0, .3)); box-shadow: inset 0 0 0 1px rgba(201, 157, 78, .45); }
.acctcall b { display: block; font: 400 19px/1.2 var(--friz); color: var(--title); font-weight: 400; }
.acctcall span { color: var(--text); }
#account { display: grid; gap: 30px; }
.accthead .mb { display: grid; gap: 14px; }
.ah-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ah-k { font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-hi); margin-bottom: 6px; }
.accthead h1 { font: 400 clamp(30px, 4vw, 42px)/1.05 var(--friz); color: #f2e6c4; text-shadow: 0 2px 3px #000; letter-spacing: .02em; }
.acctwelcome { padding: 12px 16px; border-radius: 4px; font-size: 16px; color: #d9f7d4; background: rgba(71, 214, 90, .08); box-shadow: inset 0 0 0 1px rgba(71, 214, 90, .3); }
.acctwelcome b { color: #fff; }
.intogame { display: grid; gap: 10px; padding-left: 22px; list-style: decimal; color: var(--text); }
.intogame code { font: 14px/1 Consolas, monospace; color: #fff; background: rgba(0, 0, 0, .45); padding: 3px 6px; border-radius: 3px; }
/* the account's tabs, as the realm pickers look, and their panels */
.accttabs { margin: -14px 0 -10px; flex-wrap: nowrap; }
.accttabs button { flex: 1 1 0; min-width: 0; padding: 11px 16px; }
.accttabs button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .1em; }
.accttabs button:hover:not([aria-selected="true"]) { box-shadow: inset 0 0 0 1px var(--gilt), 0 3px 8px rgba(0, 0, 0, .5); }
.accttabs button:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
@media (max-width: 900px) {
  .accttabs { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px; scroll-snap-type: x proximity; }
  .accttabs::-webkit-scrollbar { display: none; }
  .accttabs button { flex: none; scroll-snap-align: start; }
}
.apanel { display: grid; gap: 30px; }
.apanel .mb { display: grid; gap: 12px; }
.acols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.acols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.astack { display: grid; gap: 30px; }
@media (max-width: 900px) { .acols, .acols.even { grid-template-columns: minmax(0, 1fr); } }
.svc-pick { max-width: 420px; }

/* ---------- blocks in posts and pages ---------- */
.b-h { font: 400 23px/1.2 var(--friz); color: var(--title); margin-top: 10px; }
.b-pic { margin: 6px 0; }
.b-pic img, .b-gallery img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a3a, 0 6px 18px rgba(0, 0, 0, .5); }
.b-pic.s-small { float: right; width: min(45%, 300px); margin: 4px 0 12px 20px; }
.b-pic.s-wide { margin-inline: auto; width: 82%; }
.b-pic figcaption, .b-gallery figcaption { margin-top: 8px; font-size: 14px; color: var(--dim); text-align: center; }
.b-pic a, .b-gallery a { display: block; cursor: zoom-in; }
.b-grid { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.b-grid.n1 { --n: 1; } .b-grid.n2 { --n: 2; } .b-grid.n3 { --n: 3; } .b-grid.n4 { --n: 4; }
.b-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 560px) { .b-grid { --n: 2 !important; } .b-pic.s-small { float: none; width: 100%; margin: 6px 0; } }
.b-video { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1d2a38, #05080c 75%); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a3a; }
.b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; border: 0; cursor: pointer; background: none; color: var(--text); }
.b-play i { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2c12, #120c04); box-shadow: inset 0 0 0 2px var(--gilt-hi), 0 0 0 1px #000, 0 0 22px rgba(255, 209, 0, .3); position: relative; }
.b-play i::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--gold); }
.b-play b { font: 400 20px/1.2 var(--friz); color: var(--title); font-weight: 400; }
.b-play small { font-size: 12.5px; color: var(--dim); }
.b-play:hover i { box-shadow: inset 0 0 0 2px #fff3c0, 0 0 0 1px #000, 0 0 30px rgba(255, 209, 0, .5); }
.b-call { padding: 14px 18px; border-radius: 4px; background: rgba(143, 214, 255, .06); box-shadow: inset 3px 0 0 var(--ice), inset 0 0 0 1px rgba(143, 214, 255, .2); }
.b-call .b-ct { display: block; font: 400 17px/1.2 var(--friz); color: var(--ice); margin-bottom: 6px; font-weight: 400; }
.b-call.c-tip { background: rgba(30, 255, 0, .04); box-shadow: inset 3px 0 0 #6fdc5a, inset 0 0 0 1px rgba(111, 220, 90, .2); } .b-call.c-tip .b-ct { color: #9fe0a4; }
.b-call.c-warn { background: rgba(224, 86, 106, .07); box-shadow: inset 3px 0 0 var(--blood), inset 0 0 0 1px rgba(224, 86, 106, .25); } .b-call.c-warn .b-ct { color: #ff9aa8; }
.b-call.c-lore { color: #3a2812; background: #e6d4a6; box-shadow: inset 0 0 0 1px #8a6a34, 0 4px 14px rgba(0, 0, 0, .4); font-family: var(--friz); }
.b-call.c-lore .b-ct { color: #2a1908; }
.b-call.c-lore a { color: #7a3a10; }
.b-items .b-it { font: 400 17px/1.2 var(--friz); color: var(--title); margin-bottom: 8px; }
.b-ilist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.b-item { display: grid; gap: 2px; padding: 9px 12px; border-radius: 3px; cursor: help; color: #fff; background: linear-gradient(180deg, #0b1430, #070b1c); box-shadow: inset 0 0 0 1px var(--tt-edge), inset 3px 0 0 var(--qc, #555); }
.b-item:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--qc, #888), inset 3px 0 0 var(--qc, #555); }
.b-item .b-in { font-weight: 500; color: var(--qc, #fff); }
.b-item .b-is { font-size: 12.5px; color: var(--dim); min-height: 1em; }
.b-table { overflow-x: auto; }
.b-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.b-table th { font: 400 12px/1.2 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt-hi); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gilt); }
.b-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.b-table tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.b-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 640px) { .b-cols { grid-template-columns: minmax(0, 1fr); } }
.b-spoiler { border-radius: 4px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--rule); }
.b-spoiler summary { cursor: pointer; padding: 10px 14px; font: 400 16px/1.3 var(--friz); color: var(--title); list-style: none; }
.b-spoiler summary::before { content: "▸ "; color: var(--gilt); }
.b-spoiler[open] summary::before { content: "▾ "; }
.b-spoiler > div { padding: 0 16px 12px; }
.b-quote { margin: 8px 0; padding: 8px 22px; border-left: 3px solid var(--gilt); }
.b-quote p { font: 400 21px/1.4 var(--friz); color: #f2e6c4; font-style: italic; }
.b-quote cite { display: block; margin-top: 6px; font-style: normal; color: var(--dim); }
.b-quote cite::before { content: "— "; }
.b-btn { text-align: center; }
.b-hr { border: 0; height: 1px; margin: 14px 0; background: linear-gradient(90deg, transparent, var(--gilt), transparent); }
.b-poll { padding: 14px 16px; border-radius: 4px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--rule); }
.q-poor { --qc: #9d9d9d; } .q-common { --qc: #fff; } .q-uncommon { --qc: #1eff00; } .q-rare { --qc: #3d8fe8; } .q-epic { --qc: #b05cf0; } .q-legendary { --qc: #ff8000; } .q-heirloom { --qc: #e6cc80; }

/* ---------- polls ---------- */
.poll .pq { font: 400 18px/1.3 var(--friz); color: var(--title); margin-bottom: 10px; }
.popts { display: grid; gap: 7px; }
.popt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 3px; cursor: pointer; text-align: left;
  font: 400 15px/1.25 var(--body); color: var(--text); background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #2a3a48; }
.popt:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gilt); color: #fff; }
.popt:disabled { cursor: default; }
.popt.mine { box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 10px rgba(255, 209, 0, .15); color: #fff; }
.popt.mine .pl::before { content: "✓ "; color: var(--gold); }
.popt .pbar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(201, 157, 78, .35), rgba(201, 157, 78, .18)); }
.popt.mine .pbar { background: linear-gradient(90deg, rgba(255, 209, 0, .4), rgba(255, 209, 0, .2)); }
.popt .pl, .popt .pv { position: relative; }
.popt .pv { font: 500 14px/1 var(--body); color: #fff; }
.pfoot { margin-top: 8px; }

/* ---------- a player's own bug reports ---------- */
#acct-reports { display: grid; gap: 12px; }
.myrep { display: grid; gap: 4px; padding: 10px 12px; border-radius: 3px; background: rgba(0, 0, 0, .3); box-shadow: inset 3px 0 0 var(--gilt); }
.myrep.st-fixed { box-shadow: inset 3px 0 0 #47d65a; } .myrep.st-confirmed { box-shadow: inset 3px 0 0 var(--ice); } .myrep.st-wontfix, .myrep.st-duplicate { box-shadow: inset 3px 0 0 #5a6670; }
.mr-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mr-h b { font: 400 16px/1.3 var(--friz); color: var(--text); font-weight: 400; }
.mr-st { font: 400 11px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt-hi); white-space: nowrap; }
.mr-reply { color: #cfeaff; }
.mr-reply b { color: var(--ice); font-weight: 500; }

/* ---------- the Hall of Fame ---------- */
#fame { display: grid; gap: 30px; margin-top: 24px; }
#fame[aria-busy] { opacity: .6; }
.fame { display: grid; counter-reset: none; }
.fame li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--rule); }
.fame li:last-child { border-bottom: 0; }
.fame .fr-n { font: 400 18px/1 var(--friz); color: var(--dim); text-align: center; }
.fame .top1 .fr-n { color: #ffd100; text-shadow: 0 0 8px rgba(255, 209, 0, .5); } .fame .top2 .fr-n { color: #d8dde3; } .fame .top3 .fr-n { color: #d9905a; }
.fame .fr-c { display: grid; min-width: 0; }
.fame .fr-c b { font: 400 17px/1.2 var(--friz); font-weight: 400; }
.fame .fr-c b, .fame .fr-c b a { color: var(--c); }
.fame .fr-c small { font-size: 12.5px; color: var(--dim); }
.fame .fr-v { font: 500 15px/1 var(--body); color: #fff; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fame .fr-v small { margin-left: 5px; font-weight: 400; color: var(--dim); font-size: 12px; }

/* ---------- the census over time ---------- */
.ccol { min-width: 0; }
.ccols.dense { gap: 1px; }
.ccols.dense .ccol i { border-radius: 1px 1px 0 0; }
.heat { display: grid; gap: 3px; }
.heat .hrow { display: grid; grid-template-columns: 36px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat .hrow > span { font: 400 12px/1 var(--caps); letter-spacing: .08em; color: var(--dim); }
.heat i { display: block; height: 20px; border-radius: 2px; background: rgba(246, 212, 124, var(--a)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.heat i.none { background: rgba(255, 255, 255, .03); }
.heat .axis b { font: 400 10.5px/1 var(--body); color: var(--dim); text-align: left; white-space: nowrap; }
.clegend .lk { display: inline-flex; align-items: center; gap: 6px; }
.clegend .lk i { width: 14px; height: 3px; border-radius: 2px; }
.ccols.stack .st { display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; align-self: end; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ccols.stack .st i { display: block; min-height: 1px; }
.clsl { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--text); }
.clsl span { display: inline-flex; align-items: center; gap: 6px; }
.clsl i { width: 10px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px #000; }
.clsl b { font-weight: 500; color: var(--dim); }

/* ---------- zone text: titles in the gold the game announces a zone in, and the headings and big numbers under them ---------- */
.banner h1, .slide h2, .article .head h1, .grp, .ppanel h3, .ni h3, .tile h3, .paths h3, .article .body h3,
.stat b, .kpi b, .nums b, .ph[aria-selected="true"] .n, .accthead h1 {
  background: var(--zone); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000);
}
.banner h1, .slide h2, .article .head h1 {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 2px 1px #000) drop-shadow(0 6px 14px rgba(0, 0, 0, .8));
  padding-bottom: 4px;
}
/* the smaller headings get the whole sweep on each line, so a title that wraps doesn't end in a darker line */
.grp, .ppanel h3, .ni h3, .tile h3, .paths h3, .article .body h3 { background-size: 100% 1lh; }
.ni:hover h3, .tile:hover h3 { background-image: var(--zone-hi); }

/* ---------- pages from Runeforge: blocks around a guide page's own content, and pages made there ---------- */
.guide-groups, .pg-own, .pg-blocks, .b-builtin { display: contents; }
.pgtext .body { max-width: none; }
.pgtext .body > * { max-width: 76ch; }
.pgtext .body > .b-table, .pgtext .body > .b-gallery, .pgtext .body > .b-cols, .pgtext .body > .b-items, .pgtext .body > .b-video, .pgtext .body > .b-pic.s-full { max-width: none; }

/* ---------- the character window: slots down both sides, the character in 3D between them (viewer.js) ---------- */
.ch-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .ch-grid.two { grid-template-columns: minmax(0, 1fr); } }
.paperdoll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.paperdoll .dcol { display: grid; gap: 8px; align-content: start; }
.paperdoll .dcol.r .slot { grid-template-columns: minmax(0, 1fr) 46px; padding: 5px 5px 5px 8px; text-align: right; }
.paperdoll .dcol.r .slot .sq { order: 2; }
.paperdoll .dcol.r .slot .sx { justify-content: flex-end; }
.paperdoll .slot, .doll.weapons .slot { grid-template-columns: 46px minmax(0, 1fr); }
.paperdoll .slot .sq, .doll.weapons .slot .sq { width: 46px; height: 46px; }
.slot .sq.ico { position: relative; overflow: hidden; background: #000; }
.slot .sq.ico img { display: block; width: 100%; height: 100%; }
.slot.empty .sq.ico img { opacity: .55; }
.slot .sq.ico i { position: absolute; right: 2px; bottom: 1px; font: 400 11px/1 var(--friz); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 2px #000; }

.mv { position: relative; min-height: 540px; border-radius: 4px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 14% at 50% 92%, rgba(0, 0, 0, .7), transparent 70%), radial-gradient(ellipse at 50% 38%, #142634 0%, #08121a 58%, #04080c 100%);
  box-shadow: inset 0 0 0 1px #1a2832, inset 0 0 70px rgba(0, 0, 0, .85); }
.mv::before { content: ""; position: absolute; inset: -12px; z-index: -1; background: url("/img/wyrmrest-temple.jpg") center 28% / cover; filter: blur(4px) brightness(.4) saturate(.75); opacity: .55; }
.mv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; z-index: -1; background: radial-gradient(ellipse 45% 40% at 50% 100%, rgba(143, 214, 255, .16), transparent 70%); }
.mv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; opacity: 0; transition: opacity .7s ease; }
.mv.ready .mv-canvas { opacity: 1; }
.mv.turning .mv-canvas { cursor: grabbing; }
.mv-canvas:focus-visible { box-shadow: inset 0 0 0 1px var(--gilt); }
.mv-msg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 24px; text-align: center; font: 400 17px/1.4 var(--friz); color: var(--dim); text-shadow: 0 1px 2px #000; }
.mv:not(.off) .mv-msg::after { content: ""; display: block; width: 26px; height: 26px; margin: 14px auto 0; border-radius: 50%; border: 2px solid rgba(246, 221, 152, .25); border-top-color: var(--gilt-hi); animation: mvspin 1s linear infinite; }
@keyframes mvspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mv-msg::after { animation: none; } .mv-canvas { transition: none; } }
.mv-ctl { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; }
.mv-ctl button { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font: 400 18px/1 var(--friz); color: var(--gilt-hi);
  background: radial-gradient(circle at 40% 35%, #26323e, #0a0f14); border: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a6232, 0 0 0 3px #000, 0 3px 8px rgba(0, 0, 0, .6); }
.mv-ctl button:hover { color: #fff; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gilt-hi), 0 0 0 3px #000, 0 0 12px rgba(246, 221, 152, .35); }
@media (max-width: 980px) {
  .paperdoll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .paperdoll .mv { grid-column: 1 / -1; order: -1; min-height: 440px; }
}
@media (max-width: 640px) {
  .paperdoll { grid-template-columns: minmax(0, 1fr); }
  .paperdoll .mv { min-height: 400px; }
  .paperdoll .dcol.r .slot { grid-template-columns: 46px minmax(0, 1fr); padding: 5px 8px 5px 5px; text-align: left; }
  .paperdoll .dcol.r .slot .sq { order: 0; }
  .paperdoll .dcol.r .slot .sx { justify-content: flex-start; }
}

/* ---------- the front page's boxes, wherever the admin puts them ---------- */
@media (min-width: 1001px) {
  .home.flip { grid-template-columns: 330px minmax(0, 1fr); }
  .home.flip > .side { order: -1; }
}
.frame.box .body { padding: 14px 18px 18px; gap: 12px; font-size: 15.5px; line-height: 1.6; max-width: none; }
.frame.box .body h3 { font-size: 19px; margin-top: 4px; }
.fame-what { font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fame.mini li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; padding: 6px 2px; }
.fame.mini .fr-n { font-size: 16px; }
.fame.mini .fr-c b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-now { font: 400 16px/1.35 var(--friz); color: #e8dcc0; text-align: center; }
.np-now b { display: block; font-size: 21px; font-weight: 400; color: var(--gold); margin-top: 2px; }
.np-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.np-clock span { display: grid; justify-items: center; gap: 4px; padding: 9px 0 7px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3)); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(201, 157, 78, .28); border-radius: 3px; }
.np-clock b { font: 400 24px/1 var(--friz); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(143, 214, 255, .45), 0 1px 0 #000; }
.np-clock small { font: 400 10px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.np-when, .np-open { text-align: center; font-size: 13.5px; }
.np-open { font: 400 18px/1.3 var(--friz); color: var(--gold); }

/* ---------- the Champion of the Week, turning slowly ---------- */
.champ-stage { position: relative; height: 330px; margin: 2px 10px 0; isolation: isolate;
  background: radial-gradient(ellipse 58% 50% at 50% 58%, rgba(120, 180, 255, .15), transparent 72%), radial-gradient(ellipse 34% 7% at 50% 90%, rgba(0, 0, 0, .65), transparent 70%); }
.champ-stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 7%; height: 2px; z-index: -1; background: radial-gradient(closest-side, rgba(246, 221, 152, .45), transparent); }
.champ-stage.ready .mv-canvas { opacity: 1; }
.champ-stage.turning .mv-canvas { cursor: grabbing; }
.champ-info { justify-items: center; text-align: center; padding-top: 2px; }
.champ-name { font: 400 26px/1.1 var(--friz); text-shadow: 0 0 16px rgba(0, 0, 0, .9), 0 1px 1px #000; }
.champ-name:hover { text-decoration: none; filter: brightness(1.2); }
.champ-who { font-size: 13.5px; color: var(--dim); margin-top: -6px; }
.champ-pts { font-size: 14px; color: #e8dcc0; }
.champ-pts b { font: 400 21px/1 var(--friz); color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, .45); }
.champ-recent { display: grid; gap: 7px; width: 100%; text-align: left; border-top: 1px solid var(--rule); padding-top: 12px; }
.champ-recent li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; line-height: 1.3; color: #e8dcc0; }
.champ-recent .cp { display: grid; place-items: center; width: 26px; height: 29px; font: 400 12.5px/1 var(--friz); color: #fff; text-shadow: 0 1px 1px #000;
  clip-path: polygon(50% 0, 100% 13%, 100% 52%, 50% 100%, 0 52%, 0 13%); background: linear-gradient(180deg, #e9c46a, #8a6208 70%, #5c4106); }

/* ---------- a page change cross-fades and rises (View Transitions); the header, menus and tab bar stay put ---------- */
main.wrap { view-transition-name: page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: vt-out .16s ease-in both; }
::view-transition-new(page) { animation: vt-in .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- depth in the header: the art, the video and the holiday's things move at their own pace ---------- */
#backdrop .art, #backdrop .art-video { will-change: transform; }
.holi .h-moon { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -9px); }
.holi .h-corner { translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 4px); }
.holi .h-props { translate: calc(var(--px, 0) * 20px) calc(var(--py, 0) * 6px); }

/* ---------- the header's video: on wide screens, faded into the night like the picture ---------- */
#backdrop .art-video { position: absolute; top: -40px; left: 50%; translate: -50% 0; width: max(1920px, 100vw); height: auto; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0, rgba(0, 0, 0, .74) 340px, rgba(0, 0, 0, .2) 680px, transparent 1000px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0, rgba(0, 0, 0, .74) 340px, rgba(0, 0, 0, .2) 680px, transparent 1000px); }
#backdrop.has-video .art-video { opacity: 1; }
#backdrop.video-on { --art: linear-gradient(transparent, transparent); }

/* ---------- living frames: a soft light follows the pointer, a little gilt warmth on hover, and frames rise into view ---------- */
@media (pointer: fine) {
  .frame { transition: box-shadow .35s ease; }
  .frame:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 196, 92, .07); }
}
.rv { opacity: 0; translate: 0 22px; transition: opacity .65s ease, translate .65s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; translate: none; }

/* ---------- loading: shimmering placeholders, and pictures that fade in as they arrive ---------- */
.skel { display: grid; gap: 11px; padding: 6px 0; }
.skel i { display: block; height: 13px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .035) 80%) 0 0 / 300% 100%; animation: shimmer 1.5s linear infinite; }
.skel i:nth-child(1) { width: 70%; } .skel i:nth-child(2) { width: 94%; } .skel i:nth-child(3) { width: 54%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
img.fadein { opacity: 0; transition: opacity .5s ease; }
img.fadein.ok { opacity: 1; }

/* ---------- the phone's tab bar, as an app has ---------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 7px 4px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(12, 18, 25, .9), rgba(3, 5, 7, .97)); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(201, 157, 78, .45), 0 -12px 30px rgba(0, 0, 0, .55); }
  .tabbar a[hidden] { display: none; }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 4px; padding: 3px 0 2px; color: #b4a684; font: 400 10.5px/1 var(--caps); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .tabbar a:active svg { transform: scale(.88); }
  .tabbar a.on { color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, .45); }
  .tabbar a.on svg { filter: drop-shadow(0 0 5px rgba(255, 209, 0, .55)); }
  .tabbar a.on::before { content: ""; position: absolute; top: -8px; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .skel i { animation: none; }
  .rv { opacity: 1; translate: none; transition: none; }
  img.fadein { opacity: 1; transition: none; }
  ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
}

/* ---------- the account page: the main character, the totals, and the account's other choices ---------- */
.ah-top { align-items: center; }
.ah-who { display: grid; gap: 6px; flex: 1; min-width: 240px; }
.ah-main { position: relative; width: 190px; height: 250px; flex-shrink: 0; margin: -10px 0 -14px -6px; isolation: isolate;
  background: radial-gradient(ellipse 60% 52% at 50% 56%, rgba(120, 180, 255, .17), transparent 72%), radial-gradient(ellipse 36% 6% at 50% 92%, rgba(0, 0, 0, .7), transparent 70%); }
.ah-main.ready .mv-canvas { opacity: 1; }
.ah-main.turning .mv-canvas { cursor: grabbing; }
.ah-mainis { font-size: 15px; color: #e8dcc0; }
.ah-mainis b { font: 400 18px/1 var(--friz); font-weight: 400; text-shadow: 0 1px 1px #000; }
.ah-mainis small { font-size: 13px; color: var(--dim); }
.ah-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 6px; }
.ah-stats div { display: grid; gap: 3px; }
.ah-stats dt { font: 400 11px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ah-stats dd { margin: 0; font: 400 22px/1 var(--friz); color: #fff; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; }
.gold::after { content: ""; display: inline-block; width: .62em; height: .62em; margin-left: .28em; border-radius: 50%; vertical-align: .02em;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd100 45%, #8a6208); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255, 209, 0, .45); }
.ah-acts { display: grid; gap: 12px; justify-items: end; align-self: stretch; align-content: space-between; }
.ah-pick { display: flex; align-items: center; gap: 10px; }
.ah-pick span { font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-hi); }
.ah-pick select { max-width: 230px; padding: 7px 30px 7px 10px; font: 400 15px/1.2 var(--body); color: #fff; border: 0; border-radius: 3px; appearance: none;
  background: linear-gradient(45deg, transparent 50%, var(--gilt) 50%) right 15px center / 6px 6px no-repeat, linear-gradient(135deg, var(--gilt) 50%, transparent 50%) right 10px center / 6px 6px no-repeat, rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px var(--rule); }
.ah-pick select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 10px rgba(255, 209, 0, .2); }
.ah-pick select option { background: #0b1118; }
@media (max-width: 700px) {
  .ah-main { width: 100%; height: 240px; margin: -6px 0 0; }
  .ah-acts { justify-items: start; width: 100%; grid-auto-flow: column; align-items: center; justify-content: space-between; }
}
.amain { display: inline-block; margin-left: 6px; padding: 2px 6px; font: 400 10px/1 var(--caps); font-style: normal; letter-spacing: .12em; text-transform: uppercase; vertical-align: 3px;
  color: #1a1204; background: linear-gradient(180deg, #ffe58a, #c99d4e); border-radius: 2px; text-shadow: none; }
.amx { display: grid; justify-items: end; gap: 3px; font-size: 13px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.amx .gold { color: #f2e6c4; }
@media (max-width: 560px) { .amx { display: none; } }
.svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.svc { display: grid; gap: 4px; align-content: start; padding: 11px 13px; text-align: left; cursor: pointer; color: var(--text); border: 0; border-radius: 4px;
  background: linear-gradient(180deg, rgba(30, 42, 54, .9), rgba(10, 16, 22, .95)); box-shadow: inset 0 0 0 1px var(--rule), 0 4px 10px rgba(0, 0, 0, .35); transition: box-shadow .2s, transform .15s; }
.svc b { font: 400 16px/1.15 var(--friz); color: var(--title); font-weight: 400; }
.svc small { font-size: 13px; line-height: 1.35; color: var(--dim); }
.svc:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gilt), 0 0 14px rgba(255, 209, 0, .12); }
.svc:active:not(:disabled) { transform: translateY(1px); }
.svc:disabled { opacity: .55; cursor: default; }
.tog { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.tog input { appearance: none; width: 40px; height: 22px; margin: 2px 0 0; border-radius: 11px; cursor: pointer; position: relative; background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px var(--rule); transition: background .2s; }
.tog input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8a8170; box-shadow: 0 1px 2px #000; transition: transform .2s, background .2s; }
.tog input:checked { background: linear-gradient(180deg, #6b5214, #3d2e0a); box-shadow: inset 0 0 0 1px var(--gilt); }
.tog input:checked::after { transform: translateX(18px); background: radial-gradient(circle at 35% 35%, #fff6c8, var(--gold) 55%, #8a6208); }
.tog input:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.tog input:disabled { opacity: .45; cursor: default; }
.tog span { display: grid; gap: 3px; }
.tog b { font: 400 16px/1.2 var(--friz); color: var(--title); font-weight: 400; }
.tog small { font-size: 13.5px; line-height: 1.4; color: var(--dim); }
/* the language, on the account page and at the foot of the page */
.dv-lang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dv-lang span { display: grid; gap: 3px; }
.dv-lang b { font: 400 16px/1.2 var(--friz); color: var(--title); }
.dv-lang small { font-size: 13.5px; line-height: 1.4; color: var(--dim); }
footer nav.langs { gap: 6px; }
footer nav.langs button { background: none; border: 1px solid transparent; border-radius: 3px; padding: 4px 10px; color: var(--dim); font: 400 13px/1 var(--friz); cursor: pointer; }
footer nav.langs button:hover { color: #eadcae; border-color: var(--rule); }
footer nav.langs button[aria-current] { color: var(--gold); border-color: rgba(201, 157, 78, .5); cursor: default; }
.devs { display: grid; }
.devs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--rule); }
.devs li:last-child { border-bottom: 0; }
.dv-i { width: 22px; height: 22px; fill: none; stroke: var(--gilt-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 209, 0, .25)); }
.dv-t { display: grid; gap: 2px; min-width: 0; }
.dv-t b { font-weight: 500; color: #fff; }
.dv-t b i { margin-left: 6px; font: 400 10px/1 var(--caps); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #8dff6a; }
.dv-t small { font-size: 13px; color: var(--dim); }
.linkbtn { border: 0; background: none; padding: 4px 2px; cursor: pointer; font: 400 14px/1 var(--body); color: var(--link, #ffd100); }
.linkbtn:hover { text-decoration: underline; }


/* ---------- the forums ---------- */
:root { --blue: #4ec9ff; }
#forum { display: grid; gap: 22px; }
#forum[aria-busy] { opacity: .65; transition: opacity .2s; }
.fhero .mb { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; padding: 22px 26px; }
.fhero h1 { font: 400 clamp(30px, 4vw, 42px)/1.05 var(--friz); color: #f2e6c4; text-shadow: 0 2px 3px #000; }
.fhero .dim { margin-top: 6px; max-width: 60ch; }
.fh-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fsearch { display: flex; gap: 8px; }
.fsearch input { width: min(260px, 60vw); padding: 9px 12px; font: 400 15px/1.2 var(--body); color: #fff; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px var(--rule); }
.fsearch input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gilt-hi), 0 0 10px rgba(255, 209, 0, .2); }
.bluedot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.bluetxt { color: var(--blue); }
.fn { font-weight: 500; }
.fn.blue { text-shadow: 0 0 8px rgba(78, 201, 255, .45); }
.fnew { display: inline-block; margin-left: 8px; padding: 2px 6px; font: 400 10px/1 var(--caps); font-style: normal; letter-spacing: .12em; text-transform: uppercase; vertical-align: 3px; color: #102000; background: linear-gradient(180deg, #c8ff7a, #6fc22a); border-radius: 2px; }
.ftag { display: inline-block; margin-right: 8px; padding: 3px 7px; font: 400 10.5px/1 var(--caps); font-style: normal; letter-spacing: .12em; text-transform: uppercase; vertical-align: 4px; color: #1a1204; background: linear-gradient(180deg, #ffe58a, #c99d4e); border-radius: 2px; }
.fnote { padding: 14px 18px; border-radius: 4px; color: var(--text); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }
.fmeta { display: flex; justify-content: flex-end; }
.linkbtn.danger { color: #ff8a8a; }

/* the boards, and a board's threads */
.fboards .mb, .fthreads .mb, .fresults .mb { display: grid; padding: 6px 16px; }
.fboard, .fthread { display: grid; grid-template-columns: 56px minmax(0, 1fr) 76px 76px minmax(0, 240px); gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--rule); }
.fthread { grid-template-columns: 28px minmax(0, 1fr) 70px 70px minmax(0, 170px); padding: 11px 4px; }
.fboard:last-child, .fthread:last-child { border-bottom: 0; }
.fb-icon .wi { display: block; }
.fb-what { min-width: 0; }
.fb-what a { color: inherit; }
.fb-what a:hover { text-decoration: none; }
.fb-what h2 { display: inline; font: 400 21px/1.2 var(--friz); color: var(--title); text-shadow: 0 1px 1px #000; }
.fb-what a:hover h2 { color: #fff; }
.fb-what p { margin-top: 3px; font-size: 14.5px; color: var(--dim); }
.fb-rule { display: block; margin-top: 4px; font: 400 11px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.fboard.unread .fb-icon .wi { box-shadow: 0 0 0 1px #000, 0 0 14px rgba(200, 255, 122, .35); }
.fb-n { display: grid; justify-items: center; gap: 2px; }
.fb-n b { font: 400 19px/1 var(--friz); color: #fff; font-variant-numeric: tabular-nums; }
.fb-n small { font: 400 10px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.fb-last { display: grid; gap: 3px; min-width: 0; color: var(--text); font-size: 14px; }
.fb-last span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eadcae; }
.fb-last small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--dim); }
a.fb-last:hover { text-decoration: none; }
a.fb-last:hover span { color: #fff; }
.ft-mark { display: grid; place-items: center; }
.ft-what { display: grid; gap: 4px; min-width: 0; }
.ft-title { font: 400 18px/1.25 var(--friz); color: #eadcae; }
.ft-title:hover { color: #fff; text-decoration: none; }
.fthread.unread .ft-title { color: #fff; text-shadow: 0 0 10px rgba(255, 230, 160, .3); }
.ft-what small { font-size: 13px; color: var(--dim); }
.fthread.pinned { background: linear-gradient(90deg, rgba(255, 209, 0, .05), transparent 70%); }
@media (max-width: 760px) {
  .fboard { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .fboard .fb-icon .wi { width: 44px; height: 44px; }
  .fboard .fb-n, .fthread .fb-n:last-of-type { display: none; }
  .fboard .fb-last { grid-column: 2; }
  .fthread { grid-template-columns: 22px minmax(0, 1fr) 54px; gap: 10px; }
  .fthread .fb-last { display: none; }
}

/* a thread */
.fcrumbs { margin-bottom: -8px; }
.fthead h1 { font: 400 clamp(26px, 3.4vw, 36px)/1.15 var(--friz); color: #f2e6c4; text-shadow: 0 2px 3px #000; }
.fthead .dim { margin-top: 6px; }
.fmodbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-radius: 4px; background: rgba(78, 201, 255, .06); box-shadow: inset 0 0 0 1px rgba(78, 201, 255, .3); }
.fmodbar > span { font: 400 11px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.fmodbar label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); }
.fmodbar select { padding: 4px 8px; font: inherit; color: #fff; background: #0b1118; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); }
.fpager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.fpager a, .fpager span { min-width: 36px; padding: 7px 11px; text-align: center; font: 400 15px/1 var(--friz); border-radius: 3px; color: #eadcae; background: linear-gradient(180deg, #17222e, #0a1118); box-shadow: inset 0 0 0 1px #2a3a48; }
.fpager a:hover { text-decoration: none; color: #fff; box-shadow: inset 0 0 0 1px var(--gilt); }
.fpager span[aria-current] { color: var(--gold); background: linear-gradient(180deg, #3a2c12, #140e05); box-shadow: inset 0 0 0 1px var(--gilt-hi); }
.fpager i { color: var(--dim); font-style: normal; }
.fposts { display: grid; gap: 18px; }
.fpost { display: grid; grid-template-columns: 200px minmax(0, 1fr); scroll-margin-top: 70px; }
.fpost.gone { grid-template-columns: 1fr; padding: 4px 0; }
.fpost.gone .fmain { padding: 12px 22px; font-style: italic; }
.fpost.blue { box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(78, 201, 255, .35), 0 0 22px rgba(78, 201, 255, .12); }
.fpost.blue .fmain { background: linear-gradient(180deg, rgba(78, 201, 255, .05), transparent 220px); }
.fpost.blue .fbody { color: #d6f1ff; }
.fpost.flash { animation: fflash 2.2s ease; }
@keyframes fflash { 0%, 30% { box-shadow: 0 0 0 2px var(--gilt-hi), 0 0 30px rgba(255, 209, 0, .35); } }
.fcard { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 20px 14px; text-align: center; border-right: 1px solid var(--rule); background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .08)); }
.fportrait { position: relative; display: block; width: 76px; height: 76px; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #6b5a3a, 0 0 0 4px #000, 0 8px 18px rgba(0, 0, 0, .6); }
.fportrait img, .fportrait .wi { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.fpost.blue .fportrait { box-shadow: 0 0 0 1px #000, 0 0 0 3px #2d7fa8, 0 0 0 4px #000, 0 0 16px rgba(78, 201, 255, .4); }
.flvl { position: absolute; right: -8px; bottom: -8px; min-width: 26px; padding: 4px 5px; font: 400 13px/1 var(--friz); font-style: normal; color: #fff; text-align: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2c12, #120c04); box-shadow: 0 0 0 1px #000, inset 0 0 0 1.5px var(--gilt); }
.fwho { display: grid; gap: 3px; justify-items: center; min-width: 0; max-width: 100%; }
.fname { font: 400 19px/1.15 var(--friz); text-shadow: 0 1px 1px #000; overflow-wrap: anywhere; }
a.fname:hover { text-decoration: none; filter: brightness(1.2); }
.fwho small { font-size: 12.5px; color: var(--dim); }
.fguild { color: #9fe0a4 !important; }
.fstats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.fshield { display: inline-block; width: 11px; height: 12px; margin-right: 4px; vertical-align: -1px; clip-path: polygon(50% 0, 100% 14%, 100% 52%, 50% 100%, 0 52%, 0 14%); background: linear-gradient(180deg, #e9c46a, #8a6208); }
.fbadges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.fb { padding: 3px 7px; font: 400 10px/1.1 var(--caps); font-style: normal; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; }
.fb.staff { color: #00121c; background: linear-gradient(180deg, #a6e6ff, var(--blue)); box-shadow: 0 0 10px rgba(78, 201, 255, .4); }
.fb.champion { color: #1a1204; background: linear-gradient(180deg, #ffe58a, #c99d4e); }
.fb.first80 { color: #fff; background: linear-gradient(180deg, #9a5fd0, #4b2380); }
.fmain { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px 24px 18px; }
.fhead { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--dim); }
.fnum { font: 400 14px/1 var(--friz); color: var(--gilt); }
.fedited { font-style: italic; }
.fbody { display: grid; gap: 12px; font-size: 16px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.fbody h3 { font: 400 21px/1.2 var(--friz); color: var(--title); margin-top: 4px; }
.fbody ul, .fbody ol { display: grid; gap: 6px; padding-left: 22px; }
.fbody ul { list-style: disc; } .fbody ol { list-style: decimal; }
.fbody a:not(.item):not(.mention) { color: var(--link); }
.fbody b { color: #fff; font-weight: 500; }
.fbody code { font: 14px/1 Consolas, monospace; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 5px; border-radius: 3px; }
.fbody blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--gilt); border-radius: 0 4px 4px 0; background: rgba(0, 0, 0, .3); color: #d9cfb6; font-size: 15px; display: grid; gap: 8px; }
.fbody blockquote b:first-child { color: var(--gilt-hi); }
.fbody .mention { color: #ffd98a; font-weight: 500; }
.fbody .achv { color: #ffd100; font-weight: 500; white-space: nowrap; }
.fbody .achv i, .fc-found .achv i { display: inline-block; margin-left: 5px; padding: 1px 4px; font: 400 11px/1.2 var(--friz); font-style: normal; color: #fff; background: linear-gradient(180deg, #8a6208, #4a3404); border-radius: 2px; vertical-align: 1px; }
.fbody img { max-width: 100%; }
details.spoil { border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }
details.spoil summary { cursor: pointer; padding: 9px 14px; font: 400 15px/1.2 var(--friz); color: var(--gilt-hi); list-style: none; }
details.spoil summary::-webkit-details-marker { display: none; }
details.spoil summary::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform .2s; }
details.spoil[open] summary::before { transform: rotate(90deg); }
details.spoil > div { display: grid; gap: 10px; padding: 0 14px 12px; }
.fpics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fpics figure { margin: 0; }
.fpics img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a3a; transition: filter .2s; }
.fpics a:hover img { filter: brightness(1.15); }
.ffoot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.flike { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 400 14px/1 var(--body); color: var(--dim); cursor: pointer; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }
.flike i { font-style: normal; color: #8a8170; transition: transform .2s; }
.flike b { font-weight: 500; color: #fff; }
.flike b:empty { display: none; }
.flike:hover:not(.ro) { color: #fff; box-shadow: inset 0 0 0 1px #c25a6a; }
.flike.on { color: #ffb3c0; box-shadow: inset 0 0 0 1px #c25a6a; background: rgba(194, 90, 106, .15); }
.flike.on i { color: #ff5a78; transform: scale(1.15); }
.flike.ro { cursor: default; }
.fextra:empty { display: none; }
.finline { padding: 12px 14px; border-radius: 4px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--rule); }
.fnewline { display: flex; align-items: center; gap: 12px; font: 400 11px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: #c8ff7a; }
.fnewline::before, .fnewline::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 255, 122, .6), transparent); }
@media (max-width: 760px) {
  .fpost { grid-template-columns: minmax(0, 1fr); }
  .fcard { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; text-align: left; gap: 12px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .fportrait { width: 52px; height: 52px; }
  .flvl { right: -6px; bottom: -6px; min-width: 22px; font-size: 11px; }
  .fwho { justify-items: start; }
  .fstats, .fbadges { justify-content: flex-start; }
  .fmain { padding: 14px 16px 16px; }
}

/* writing */
.fcompose .mb { gap: 12px; }
.fc-as { max-width: 420px; }
.fc-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-tools button, .fc-pic { padding: 6px 10px; font: 400 13.5px/1 var(--body); color: #eadcae; cursor: pointer; border: 0; border-radius: 3px; background: linear-gradient(180deg, #17222e, #0a1118); box-shadow: inset 0 0 0 1px #2a3a48; }
.fc-tools button:hover, .fc-pic:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gilt); }
.fc-find { display: grid; gap: 8px; padding: 10px; border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--rule); }
.fc-find input { padding: 8px 10px; font: 400 15px/1.2 var(--body); color: #fff; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px var(--rule); }
.fc-found { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-found button { padding: 5px 8px; font: 500 14px/1.2 var(--body); cursor: pointer; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px var(--rule); }
.fc-found button:hover { box-shadow: inset 0 0 0 1px var(--gilt); }
.fc-found button small { margin-left: 6px; color: var(--dim); font-weight: 400; }
.fcompose textarea { min-height: 9em; font: 400 16px/1.55 var(--body); }
.fc-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-pics:empty { display: none; }
.fc-p { position: relative; }
.fc-p img { display: block; width: 110px; height: 76px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a3a; }
.fc-p button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; font-size: 12px; color: #fff; cursor: pointer; border: 0; border-radius: 50%; background: #8a1a2a; box-shadow: 0 0 0 1px #000; }
.fc-preview { min-height: 9em; padding: 12px 14px; border-radius: 3px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--rule); }
.fcompose .ract small { flex-basis: 100%; font-size: 12.5px; }

/* search results and the Blue Tracker */
.fresult { display: grid; gap: 5px; padding: 14px 4px; color: var(--text); border-bottom: 1px solid var(--rule); }
.fresult:last-child { border-bottom: 0; }
.fresult:hover { text-decoration: none; background: linear-gradient(90deg, rgba(246, 212, 124, .05), transparent 80%); }
.fr-t { font: 400 18px/1.25 var(--friz); color: #eadcae; }
.fr-t small { margin-left: 10px; font: 400 11px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.fresult.blue .fr-x { color: #cdeeff; }
.fr-x { font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.fresult > small { font-size: 12.5px; color: var(--dim); }

/* the front page's box */
.flatest { display: grid; }
.flatest li { border-bottom: 1px solid var(--rule); }
.flatest li:last-child { border-bottom: 0; }
.flatest a { display: grid; gap: 3px; padding: 8px 2px; color: var(--text); }
.flatest a:hover { text-decoration: none; }
.flatest a:hover .fl-t { color: #fff; }
.fl-t { font: 400 15.5px/1.3 var(--friz); color: #eadcae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flatest small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flatest li.blue .fl-t { color: #cdeeff; }

/* under a news post */
.discuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 clamp(18px, 4vw, 40px) 26px; }

/* the bell, by the account in the menu bar */
.navbell { position: relative; display: grid; place-items: center; width: 44px; padding: 0; cursor: pointer; color: #eadcae; border: 0; background: none; }
.navbell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.navbell:hover { color: #fff; filter: drop-shadow(0 0 6px rgba(255, 220, 140, .6)); }
.navbell b { position: absolute; top: 8px; right: 4px; min-width: 17px; padding: 2px 4px; font: 600 10.5px/1.1 var(--body); color: #fff; text-align: center; border-radius: 9px; background: #c0283c; box-shadow: 0 0 0 1px #000, 0 0 8px rgba(255, 60, 80, .6); }
.bellpanel { position: fixed; top: 64px; right: max(16px, calc(50vw - 590px)); z-index: 70; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; padding: 12px 14px; border-radius: 6px;
  background: linear-gradient(180deg, #121c26, #070b10); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--gilt), 0 18px 40px rgba(0, 0, 0, .7); }
.bp-h { font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-hi); margin-bottom: 8px; }
.bellpanel ul { display: grid; }
.bellpanel li { border-bottom: 1px solid var(--rule); }
.bellpanel li:last-child { border-bottom: 0; }
.bellpanel li a { display: block; padding: 9px 4px; font-size: 14px; line-height: 1.4; color: var(--text); }
.bellpanel li a:hover { text-decoration: none; background: rgba(255, 209, 0, .05); }
.bellpanel li a span { color: #eadcae; }
.bellpanel li a small { display: block; font-size: 12px; color: var(--dim); }
.bellpanel li.new a { box-shadow: inset 3px 0 0 #c8ff7a; padding-left: 10px; }
.tabbar a .tdot { position: absolute; top: 2px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #c0283c; box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255, 60, 80, .7); }

/* ---------- Less motion, chosen on the account page for this device ---------- */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media print { .rv { opacity: 1; translate: none; } }

/* Forgot Password: the two steps side by side */
.forgotwrap { max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
@media (max-width: 860px) { .forgotwrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Feature Cards: a line, a title and cards side by side, each with a picture or icon, a link and details that unfold ---------- */
.b-feat { display: grid; gap: 12px; }
.b-fk { margin: 0; text-align: center; font: 400 13px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gilt-hi); }
.b-ft { margin: 0; text-align: center; font: 400 clamp(28px, 4vw, 40px)/1.1 var(--friz); color: #fff; text-shadow: 0 2px 4px #000, 0 0 24px rgba(0, 0, 0, .7); }
.b-fi { max-width: 68ch; margin: 0 auto; text-align: center; font-size: 17px; line-height: 1.6; }
.b-fi p { margin: 0; }
.b-fgrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 10px; }
.b-fgrid.n1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (min-width: 900px) { .b-fgrid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b-fgrid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-fc { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 3px; overflow: hidden;
  background: var(--grain), linear-gradient(180deg, rgba(12, 20, 28, .94), rgba(5, 9, 13, .96));
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(201, 157, 78, .4), 0 12px 26px rgba(0, 0, 0, .55); }
.b-fpic { position: relative; display: block; aspect-ratio: 16 / 8; }
.b-fpic .shot { position: absolute; inset: 0; }
.b-fpic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 9, 13, .9)); pointer-events: none; }
.b-fpic > .wi { position: absolute; left: 16px; bottom: -20px; z-index: 1; }
.b-ficon { display: block; padding: 18px 16px 0; }
.b-fb { padding: 14px 18px 20px; display: grid; gap: 8px; align-content: start; }
.b-fpic + .b-fb { padding-top: 30px; }
.b-fc h3 { margin: 0; font: 400 21px/1.2 var(--friz); color: var(--title); text-shadow: 0 1px 1px #000; }
.b-fc h3 a { color: inherit; }
.b-fc .b-fb > p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.b-fmore summary { cursor: pointer; width: max-content; font: 400 15px/1.3 var(--friz); color: var(--link); list-style: none; }
.b-fmore summary::-webkit-details-marker { display: none; }
.b-fmore summary::before { content: "▸ "; color: var(--gilt); }
.b-fmore[open] summary::before { content: "▾ "; }
.b-fmore > div { margin-top: 8px; padding: 10px 14px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; background: rgba(0, 0, 0, .35); box-shadow: inset 2px 0 0 var(--gilt); }
.b-fmore > div p { margin: 0; }
.b-flink { justify-self: start; font: 400 15px/1 var(--friz); }
.pg-own + .b-feat, .pgtext + .b-feat, .b-feat + .pgtext, .b-feat + .b-feat { margin-top: 18px; }

/* ---------- Before and After: one picture over the other, the handle slides between ---------- */
.b-cmp { margin: 6px 0; }
.b-cmpbox { position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(201, 157, 78, .35), 0 8px 20px rgba(0, 0, 0, .5); line-height: 0; user-select: none; }
.b-cmpbox > img { display: block; width: 100%; height: auto; }
.b-cmpb { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--at)) 0 0); }
.b-cmpbox .b-cmpb img, .article .body .b-cmpb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
.article .body .b-cmpbox > img { border-radius: 0; box-shadow: none; }
.b-cmph { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .8); pointer-events: none; }
.b-cmph::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font: 700 16px/1 var(--body); color: #1a1206; background: radial-gradient(circle at 35% 30%, #fff6d2, var(--gilt-hi) 45%, var(--gilt)); box-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.b-cmpl { position: absolute; top: 12px; padding: 6px 10px; border-radius: 3px; font: 400 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .65); pointer-events: none; }
.b-cmpl.l { left: 12px; } .b-cmpl.r { right: 12px; }
.b-cmpbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.b-cmpbox input:focus-visible + * , .b-cmpbox:focus-within { outline: 2px solid var(--gilt-hi); outline-offset: 3px; }
.b-cmp figcaption { margin-top: 8px; color: var(--dim); font-size: 14.5px; text-align: center; }

/* ---------- Play Now: three steps into the game ---------- */
.playstrip { margin-top: 30px; }
.pj { position: relative; padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 40px); border-radius: 3px; text-align: center;
  background: radial-gradient(90% 120% at 50% 0%, rgba(143, 214, 255, .1), transparent 60%), var(--grain), linear-gradient(180deg, rgba(12, 20, 28, .95), rgba(4, 8, 12, .97));
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(201, 157, 78, .45), 0 16px 34px rgba(0, 0, 0, .55); }
.pj-k { margin: 0 0 6px; font: 400 13px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gilt-hi); }
.pj-h h2 { margin: 0; font: 400 clamp(26px, 3.6vw, 36px)/1.1 var(--friz); color: #fff; text-shadow: 0 2px 4px #000; }
.pj-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: left; }
.pj-s { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.pj-n { position: relative; }
.pj-n b { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--body); color: #1a1206; background: radial-gradient(circle at 35% 30%, #fff6d2, var(--gilt-hi) 45%, var(--gilt)); box-shadow: 0 1px 3px #000; }
.pj-t { display: grid; gap: 6px; justify-items: start; }
.pj-t h3 { margin: 0; font: 400 19px/1.2 var(--friz); color: var(--title); }
.pj-t p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.pj-t .wowbtn { margin-top: 4px; font-size: 16px; padding: 10px 18px 9px; }

/* ---------- New Here?: the front page's welcome, for visitors who aren't signed in ---------- */
.newhere .mb { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 20px 24px; }
.nh-t { display: grid; gap: 6px; flex: 1 1 320px; }
.nh-k { margin: 0; font: 400 13px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-hi); }
.newhere h2 { margin: 0; font: 400 clamp(19px, 2.2vw, 23px)/1.3 var(--friz); color: #fff; text-shadow: 0 1px 2px #000; }
.nh-a { display: flex; gap: 10px; flex-wrap: wrap; }
.nh-a .wowbtn { font-size: 16px; padding: 11px 18px 10px; }
html.plain .b-fc, html.plain .pj, html.plain .b-cmpbox { border-radius: 10px; background: linear-gradient(180deg, var(--well), var(--well-2)); box-shadow: 0 0 0 1px var(--rule), 0 10px 28px rgba(0, 0, 0, .35); }
html.plain .b-fk, html.plain .pj-k, html.plain .nh-k { letter-spacing: .1em; color: var(--link); }

/* ---------- Runeforge's plain look, for a site without the Tales of Wrath pack: the site's name in type over a quiet dark
   page, plain panels and buttons, and the rune's blue where Tales of Wrath has gold. html.plain comes from the server ---------- */
html.plain {
  --night: #0b0f14;
  --well: rgba(18, 24, 31, .97);
  --well-2: rgba(13, 18, 24, .98);
  --rule: #243242;
  --gilt: #4f7d99;
  --gilt-hi: #a6dcf5;
  --gilt-lo: #22384a;
  --title: #eef3f6;
  --link: #8fd6ff;
  --logo: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --friz: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --caps: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --zone: linear-gradient(180deg, #ffffff, #cfe9f7);
  --zone-hi: linear-gradient(180deg, #ffffff, #e9f7ff);
  cursor: auto;
}
html.plain a, html.plain button, html.plain label, html.plain select, html.plain [data-item], html.plain [data-spell] { cursor: pointer; }
html.plain input { cursor: text; }
html.plain body { background: radial-gradient(1100px 520px at 50% -180px, #17344c 0, transparent 70%), var(--night); }
html.plain #backdrop, html.plain #snow { display: none; }
html.plain .masthead { height: auto; }
html.plain .masthead .wrap { padding: 44px 16px 30px; }
html.plain .logo.plainlogo { width: auto; filter: none; line-height: 1.05; font: 700 clamp(32px, 6vw, 52px)/1.05 var(--body); letter-spacing: -.015em; color: #fff; }
html.plain .logo.plainlogo:hover { color: #fff; text-decoration: none; }
html.plain .logo-tag { margin: 8px 0 0; font: 400 16px/1.35 var(--body); letter-spacing: 0; color: var(--dim); text-shadow: none; }
html.plain footer .logo.plainlogo { font-size: 22px; opacity: 1; }
html.plain .navbar { background: rgba(11, 15, 20, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; box-shadow: inset 0 -1px 0 var(--rule); }
html.plain .navbar::after, html.plain .navbar a + a::before { display: none; }
html.plain .navbar a { font: 500 15px/1 var(--body); color: #c6d2da; text-shadow: none; padding: 17px 16px 16px; }
html.plain .navbar a:hover { color: #fff; text-shadow: none; }
html.plain .navbar a.on { color: #fff; text-shadow: none; }
html.plain .navbar a.on::after { width: 18px; height: 2px; bottom: 7px; transform: translateX(-50%); border-radius: 2px; background: var(--link); box-shadow: none; }
html.plain .frame { border: 1px solid var(--rule); border-image: none; border-radius: 10px; background: linear-gradient(180deg, var(--well), var(--well-2)); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
html.plain .mh::after { left: 0; right: 0; height: 1px; background: var(--rule); }
html.plain .mh h1, html.plain .mh h2, html.plain .mh h3 { font: 600 16px/1.25 var(--body); letter-spacing: 0; color: var(--title); text-shadow: none; }
html.plain .wowbtn { font: 600 15px/1 var(--body); color: #06121b; text-shadow: none; border: 0; border-radius: 7px; background: var(--link); box-shadow: none; padding: 12px 20px; }
html.plain .wowbtn:hover { color: #06121b; filter: brightness(1.08); }
html.plain .wowbtn.big { font-size: 16px; padding: 14px 24px; }
html.plain .wowbtn.dark { background: #1b2632; color: #dfe8ee; box-shadow: inset 0 0 0 1px var(--rule); }
html.plain .sysline { color: #d7e4ec; border-left-color: var(--link); }
html.plain .thumb { border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); }
html.plain .banner h1, html.plain .slide h2, html.plain .article .head h1, html.plain .fhero h1 { font-weight: 700; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
html.plain .ah-k { letter-spacing: .08em; color: var(--link); }
html.plain .mh { align-items: center; }
html.plain .mh::after { content: ""; }
html.plain .mh h1, html.plain .mh h2, html.plain .mh h3 { margin: 0; height: auto; padding: 0; white-space: normal; border: 0; border-image: none; line-height: 1.25; }
html.plain .mh > :not(h2):not(h3) { position: static; }
html.plain .mh > .portrait { position: absolute; }
html.plain .playbtn { height: auto; border-image: none; }
html.plain .playbtn::after { display: none; }
html.plain .playbtn span, html.plain .playbtn:hover span { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: #06121b; filter: none; font: 600 16px/1 var(--body); letter-spacing: 0; text-transform: none; }

/* ---------- Frostforged, the modern look (Site › Look, html.ff from the server): the same art and gold, in glass panels with
   frost-blue edges; the featured news across the whole screen, the realms as the game's own frames, and a grid of boxes ---------- */
html.ff {
  --night: #070b10;
  --well: rgba(18, 27, 38, .9);
  --well-2: rgba(11, 17, 25, .93);
  --rule: #1f2d3b;
  --gilt: #5f86a0;
  --gilt-hi: var(--ice);
  --gilt-lo: #22384a;
  --title: #f2f6f9;
  --link: var(--ice);
  --dim: #a3b2bf;
  --friz: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --caps: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --body: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --zone: linear-gradient(180deg, #ffffff, #dfeaf2);
  --zone-hi: linear-gradient(180deg, #ffffff, var(--ice));
  --ffw: 1240px;
  --ffx: max(16px, calc(50vw - var(--ffw) / 2 + 24px));
  overflow-x: clip;
}
html.ff, html.ff a, html.ff button, html.ff label, html.ff select, html.ff [data-item], html.ff [data-spell] { cursor: auto; }
html.ff a, html.ff button, html.ff label, html.ff select, html.ff [data-item], html.ff [data-spell] { cursor: pointer; }
html.ff body { overflow-x: clip; background-image: none; }
html.ff .wrap { max-width: var(--ffw); }
html.ff a:hover { color: #d4f0ff; }

/* the big headings keep the game's lettering; everything else is clean */
html.ff .slide h2, html.ff .banner h1, html.ff .article h1, html.ff .article .head h1, html.ff .fhero h1, html.ff .fthead h1, html.ff .grp, html.ff .b-ft, html.ff .pj-h h2, html.ff .champ-name, html.ff .ch-name h1, html.ff .ffc-t-h {
  font-family: var(--logo); font-weight: 700; letter-spacing: -.005em;
}

/* the header's logo gives way to the brand in the menu bar; holiday things still hang at the top of the page */
html.ff .masthead { position: absolute; top: 0; left: 0; right: 0; height: 100px; z-index: 3; pointer-events: none; }
html.ff .masthead > .wrap { display: none; }

/* ---------- the floating glass menu bar ---------- */
html.ff .navbar { top: calc(env(safe-area-inset-top, 0px) + 10px); margin: 14px 0 -72px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 30; }
html.ff .navbar::before, html.ff .navbar::after { content: none; }
html.ff .navbar .wrap { width: calc(100% - 32px); max-width: calc(var(--ffw) - 48px); box-sizing: border-box; align-items: center; justify-content: flex-start; gap: 2px; padding: 8px 10px 8px 18px;
  border-radius: 16px; background: rgba(10, 16, 24, .58); border: 1px solid rgba(143, 214, 255, .16); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35); transition: background .25s; }
html.ff-scrolled .navbar .wrap { background: rgba(9, 14, 21, .92); }
html.ff .ff-brand { display: flex; align-items: center; gap: 9px; margin-right: 14px; padding: 6px 0; font: 900 21px/1 var(--logo); letter-spacing: .06em; white-space: nowrap; }
html.ff .navbar .ff-brand::after { content: none; }
html.ff .ff-brand svg { width: 24px; height: 24px; fill: none; stroke: var(--ice); stroke-width: 1.7; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(143, 214, 255, .7)); }
html.ff .ff-brand span { background: linear-gradient(180deg, #fff7da 0%, #f2cf7a 48%, #c48a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .navbar a:not(.ff-brand):not(.ff-play) { padding: 9px 13px; border-radius: 10px; font: 500 15px/1.2 var(--body); letter-spacing: 0; color: #c8d4dc; text-shadow: none; white-space: nowrap; }
html.ff .navbar a:not(.ff-brand):not(.ff-play):hover { color: #fff; background: rgba(255, 255, 255, .07); text-shadow: none; }
html.ff .navbar a.on { color: #fff !important; background: rgba(255, 255, 255, .09); text-shadow: none; }
html.ff .navbar a.on::after { content: none; }
html.ff .navbar .navacct { margin-left: 6px; }
html.ff .ff-lang { margin-left: auto; appearance: none; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: transparent; color: #c8d4dc; font: 600 13px/1 var(--body); }
html.ff .ff-lang option { background: #0b1118; }
html.ff .ff-lang + .navacct { margin-left: 6px; }
html.ff .navbar .wrap > .navacct:first-of-type { margin-left: auto; }
html.ff .ddmenu { border: 1px solid rgba(143, 214, 255, .18); border-image: none; border-radius: 16px; background: rgba(10, 16, 24, .96); }
html.ff main.wrap { padding-top: 88px; }
html.ff main.wrap > section { grid-template-columns: minmax(0, 1fr); }

/* ---------- the panels: glass and frost edges, gold only at the corners ---------- */
html.ff .frame { border: 1px solid rgba(143, 214, 255, .13); border-image: none; border-radius: 16px; background: var(--spot, none), linear-gradient(180deg, var(--well), var(--well-2)); background-clip: border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .38); }
html.ff .frame:not(.feature):not(.play)::before, html.ff .frame:not(.feature):not(.play)::after { content: ""; position: absolute; z-index: 2; width: 16px; height: 16px; border: solid rgba(242, 207, 122, .75); pointer-events: none; }
html.ff .frame:not(.feature):not(.play)::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 16px; }
html.ff .frame:not(.feature):not(.play)::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 16px; }
html.ff .mh { align-items: center; justify-content: space-between; padding: 16px 20px 12px; }
html.ff .mh::after { content: none; }
html.ff .mh h1, html.ff .mh h2, html.ff .mh h3 { margin: 0; height: auto; padding: 0; white-space: normal; border: 0; border-image: none; font: 700 17px/1.25 var(--body); letter-spacing: 0; color: var(--title); text-shadow: none; }
html.ff .mh > :not(h2):not(h3) { position: static; }
html.ff .mh > .portrait { position: absolute; }
html.ff .mh a, html.ff .mh .dim { font: 600 14px/1 var(--body); }
html.ff .wowbtn { font: 600 15px/1 var(--body); color: #061019; text-shadow: none; border: 0; border-image: none; border-radius: 10px; background: var(--ice); box-shadow: 0 0 22px rgba(143, 214, 255, .22); padding: 12px 20px; }
html.ff .wowbtn:hover { color: #061019; filter: brightness(1.08); }
html.ff .wowbtn.big { font-size: 16px; padding: 14px 24px; }
html.ff .wowbtn.dark { background: rgba(255, 255, 255, .08); color: #eef3f6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); }
html.ff .wowbtn.dark:hover { color: #fff; }
html.ff .thumb { border-radius: 10px; box-shadow: none; }

/* ---------- the grid: each box's width comes from ffBento ---------- */
html.ff .home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
html.ff .home > div { display: contents; }
html.ff .home > #home-off { display: none; }
html.ff [data-b="status"] { display: none; }
html.ff .home > div > .frame, html.ff .home > div > [data-b] { min-width: 0; }

/* the news: rows with big pictures and coloured kinds */
html.ff .news { gap: 2px; padding: 0 10px 8px; }
html.ff .ni { grid-template-columns: 136px minmax(0, 1fr); gap: 3px 18px; align-items: center; padding: 10px; border-radius: 14px; transition: background-color .2s; }
html.ff .ni + .ni::before { content: none; }
html.ff .ni:hover { background: rgba(255, 255, 255, .04); }
html.ff .tw { width: 136px; height: 78px; }
html.ff .tw .nb { display: none; }
html.ff .ni .meta { font: 400 13px/1.3 var(--body); letter-spacing: 0; gap: 8px; }
html.ff .ni .meta .k { font-weight: 600; color: var(--ice); }
html.ff .ni .meta .k-dev { color: #c398ff; }
html.ff .ni .meta .k-story { color: #f2cf7a; }
html.ff .ni .meta .k-news { color: #8fe06a; }
html.ff .ni .meta .k-feature { color: #ffb36b; }
html.ff .ni .meta .ago::before { margin-right: 8px; }
html.ff .ni h3 { font: 600 18px/1.3 var(--body); text-shadow: none; }
html.ff .ni p { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html.ff .ni .rm { display: none; }
html.ff .more { padding: 6px 20px 18px; }

/* the champion: the stage takes the height the news gives it */

/* progression, as a timeline when its box is wide */
html.ff .plist li { border-bottom-color: var(--rule); }
html.ff .plist li > b { font: 700 16px/1 var(--body); }
html.ff .plist .nowtag { font: 700 10.5px/1 var(--body); letter-spacing: .08em; }
html.ff .plist span { font: 600 15px/1.25 var(--body); }
html.ff [data-span="8"] .plist, html.ff [data-span="12"] .plist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 8px 0 12px; }
html.ff [data-span="8"] .plist li, html.ff [data-span="12"] .plist li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
html.ff [data-span="8"] .plist li::before, html.ff [data-span="12"] .plist li::before { content: ""; position: absolute; left: 0; right: -12px; top: 12px; height: 2px; background: rgba(255, 255, 255, .13); }
html.ff [data-span="8"] .plist li:last-child::before, html.ff [data-span="12"] .plist li:last-child::before { right: 0; }
html.ff [data-span="8"] .plist li.done::before, html.ff [data-span="12"] .plist li.done::before { background: #f2cf7a; }
html.ff [data-span="8"] .plist li > b, html.ff [data-span="12"] .plist li > b { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; color: var(--dim); background: #0f1823; border: 2px solid rgba(255, 255, 255, .2); text-shadow: none; opacity: 1; }
html.ff [data-span="8"] .plist li.done > b, html.ff [data-span="12"] .plist li.done > b { color: #1a1206; background: #c9a657; border-color: #c9a657; opacity: 1; }
html.ff [data-span="8"] .plist li.now > b, html.ff [data-span="12"] .plist li.now > b { color: #1a1206; border: 0; background: radial-gradient(circle at 35% 30%, #fff6d2, #f2cf7a 45%, #b07a22); box-shadow: 0 0 18px rgba(242, 207, 122, .75); }
html.ff [data-span="8"] .plist li:not(.now):not(.done):has(.num) > b, html.ff [data-span="12"] .plist li:not(.now):not(.done):has(.num) > b { border-color: var(--ice); color: var(--ice); }

/* Play Now: the last thing on the page, over the art */
html.ff [data-b="play"] { order: 99; grid-column: 1 / -1; padding: 0; border: 0; background: none; box-shadow: none; }
html.ff [data-b="play"] > :not(.b-join) { display: none; }
html.ff [data-b="play"] .pj { padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 48px); border-radius: 22px; border: 1px solid rgba(143, 214, 255, .2); box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  background: linear-gradient(90deg, rgba(7, 11, 16, .95), rgba(7, 11, 16, .72) 55%, rgba(7, 11, 16, .55)), url("/img/wyrmrest-temple.jpg") center 30% / cover no-repeat; }
html.ff [data-b="play"] .pj-t p { text-align: left; color: var(--text); }
html.ff [data-b="play"] .pj-k, html.ff [data-b="play"] .pj-h h2 { text-align: center; }
html.ff .pj { border-radius: 18px; box-shadow: 0 0 0 1px rgba(143, 214, 255, .16), 0 14px 34px rgba(0, 0, 0, .4); }
html.ff .pj-t h3 { font: 600 18px/1.25 var(--body); }
html.ff .pj-k, html.ff .b-fk, html.ff .nh-k { letter-spacing: .14em; font-weight: 700; color: var(--ice); }
html.ff .pj-t .wowbtn { font-size: 15px; padding: 10px 16px; }
html.ff .b-fc { border-radius: 16px; background: linear-gradient(180deg, var(--well), var(--well-2)); box-shadow: 0 0 0 1px rgba(143, 214, 255, .13), 0 12px 28px rgba(0, 0, 0, .38); }
html.ff .b-fc h3 { font: 600 19px/1.25 var(--body); }

/* ---------- the footer, quiet ---------- */
html.ff footer { margin-top: 48px; background: #05080c; border-top: 1px solid rgba(255, 255, 255, .07); box-shadow: none; }
html.ff footer nav.micro { gap: 6px 22px; }
html.ff footer nav.micro .wi { display: none; }
html.ff footer nav.micro a { font: 500 14px/1.4 var(--body); color: #c8d4dc; }
html.ff footer .logo { width: 130px; opacity: .8; }
html.ff footer p { font-size: 13px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 960px) {
  /* the rail becomes small bars to tap, over the bar that turns them */
  html.ff .ff-rl, html.ff .strip .thumb, html.ff .strip button span, html.ff .strip .h-props { display: none; }
  html.ff .home > div > [data-b], html.ff .home > div > .frame { grid-column: 1 / -1 !important; }
  html.ff [data-span] .plist { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 760px) {
  html.ff .navbar .wrap { padding: 6px 8px 6px 14px; }
  html.ff .navbar .wrap > a[data-nav], html.ff .navbar .ddwrap, html.ff .navbar .navacct, html.ff .ff-lang { display: none; }
  html.ff .ff-brand { font-size: 18px; margin-right: 0; }
  html.ff .ni { grid-template-columns: 96px minmax(0, 1fr); }
  html.ff .tw { width: 96px; height: 62px; }
  html.ff .ni p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
}
html.ff .banner::after { background: linear-gradient(90deg, rgba(7, 11, 16, .92) 0%, rgba(7, 11, 16, .68) 48%, rgba(7, 11, 16, .15) 100%), linear-gradient(180deg, transparent 50%, rgba(7, 11, 16, .6)); }
html.ff .banner .in p { color: #dfe9f0; text-shadow: 0 1px 3px #000; }

/* ---------- the front page: gates, and everything following them ---------- */
html.ff #holi-banner, html.ff [data-b="featured"], html.ff [data-b="progression"], html.ff #holi .h-props, html.ff .ff-sec[hidden], html.ff .ff-saga[hidden], html.ff .ff-mq[hidden], html.ff .ff-band[hidden] { display: none; }
html.ff section[data-view="news"] { position: relative; }
/* the room: snow in the air, and a cold light following the mouse */
html.ff .ff-dust { position: fixed; left: 0; right: 0; top: -420px; bottom: 0; z-index: 30; pointer-events: none; opacity: .4; background-image: radial-gradient(2px 2px at 40px 50px, #fff 50%, transparent 100%), radial-gradient(1.4px 1.4px at 180px 230px, rgba(255, 255, 255, .8) 50%, transparent 100%), radial-gradient(1px 1px at 300px 90px, rgba(255, 255, 255, .7) 50%, transparent 100%), radial-gradient(1.4px 1.4px at 370px 340px, rgba(255, 255, 255, .8) 50%, transparent 100%); background-size: 420px 420px; animation: ffdust 30s linear infinite; }
@keyframes ffdust { to { translate: 0 420px; } }
html.ff .ff-lamp { position: fixed; left: 0; top: 0; z-index: 31; width: 760px; height: 760px; margin: -380px 0 0 -380px; transform: translate(-999px, -999px); will-change: transform; background: radial-gradient(closest-side, rgba(143, 214, 255, .09), rgba(143, 214, 255, 0)); pointer-events: none; }
/* words */
html.ff .ff-eye { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 700 15px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
html.ff .ff-eye::before { content: ""; width: 46px; height: 2px; background: linear-gradient(90deg, rgba(143, 214, 255, 0), var(--ice)); box-shadow: 0 0 10px var(--ice); }
html.ff .ff-big { margin: 0; padding-bottom: .08em; font: 900 clamp(42px, 5.3vw, 76px)/1.03 var(--logo); letter-spacing: -.005em; background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .8)); }
html.ff .ff-sechead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 38px; }
html.ff .ff-morelink { font-weight: 700; color: #ffe9ad; white-space: nowrap; }
/* the page's main buttons */
html.ff .ff-btn, html.ff .ff-play { position: relative; display: inline-block; overflow: hidden; white-space: nowrap; transform: skewX(-7deg); padding: 17px 38px; font: 700 17px/1.2 var(--body); letter-spacing: .01em; text-shadow: none; transition: transform .2s ease, box-shadow .25s ease, color .2s ease; }
html.ff .ff-btn span, html.ff .ff-play span { position: relative; z-index: 1; display: block; transform: skewX(7deg); }
html.ff .ff-btn::before, html.ff .ff-play::before { content: ""; position: absolute; inset: 0; transform: translateX(-101%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-btn:hover, html.ff .ff-play:hover { transform: skewX(-7deg) translateY(-2px); }
html.ff .ff-btn:hover::before, html.ff .ff-play:hover::before { transform: none; }
html.ff .ff-btn:focus-visible, html.ff .ff-play:focus-visible, html.ff .hd-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html.ff .ff-btn.g, html.ff .ff-play { color: #fff; background: #d63a20; box-shadow: 0 10px 34px rgba(214, 58, 32, .55); }
html.ff .ff-btn.g::before, html.ff .ff-play::before { background: #fff; }
html.ff .ff-btn.g:hover, html.ff .ff-play:hover { color: #b3270f; box-shadow: 0 14px 50px rgba(214, 58, 32, .8); }
html.ff .ff-btn.o { color: #fff; background: rgba(24, 92, 138, .72); box-shadow: inset 0 0 0 1.5px rgba(191, 232, 255, .8); }
html.ff .ff-btn.o::before { background: #bfe8ff; }
html.ff .ff-btn.o:hover { color: #06202f; }
html.ff .ff-btns { display: flex; flex-wrap: wrap; gap: 14px; }
/* the buttons everywhere else, in the same colours; a slanted shape, so their letters stay upright */
html.ff .wowbtn { padding: 14px 28px; border-radius: 0; color: #fff; background: #d63a20; box-shadow: none; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); font: 700 15px/1.2 var(--body); transition: background-color .2s ease, color .2s ease; }
html.ff .wowbtn:hover { color: #b3270f; background: #fff; filter: none; }
html.ff .wowbtn.big { font-size: 16px; padding: 16px 30px; }
html.ff .wowbtn.dark { color: #fff; background: #1f6f9f; box-shadow: none; }
html.ff .wowbtn.dark:hover { color: #06202f; background: #bfe8ff; }
/* the menu: gold, in the middle, over the gates */
html.ff .navbar { top: 0; margin: 0 0 -74px; }
html.ff .navbar .wrap { width: 100%; max-width: none; padding: 12px 40px; gap: 2px; border-radius: 0; border: 0; border-bottom: 1px solid rgba(242, 207, 122, .28); background: linear-gradient(180deg, rgba(5, 8, 13, .72), rgba(5, 8, 13, 0)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ff-scrolled .navbar .wrap { background: rgba(5, 8, 13, .96); }
html.ff .ff-brand { flex: 1 1 0; margin: 0; font-size: 24px; }
html.ff .ff-brand svg { display: none; }
html.ff .ff-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
html.ff .ff-lang { margin-left: 0; }
html.ff .navbar a:not(.ff-brand):not(.ff-play), html.ff .navbar .ddwrap > a, html.ff .navbar .ddwrap > button { position: relative; padding: 8px 12px; border-radius: 0; background: none; font: 700 16px/1.2 var(--logo); letter-spacing: .04em; color: #f2cf7a; text-shadow: 0 1px 6px rgba(0, 0, 0, .95); white-space: nowrap; }
html.ff .navbar a:not(.ff-brand):not(.ff-play):hover, html.ff .navbar a.on:not(.ff-brand):not(.ff-play), html.ff .navbar .ddwrap > a:hover { color: #fff2c4; background: none; text-shadow: 0 0 14px rgba(242, 207, 122, .75), 0 1px 6px #000; }
html.ff .navbar a.on:not(.ff-brand):not(.ff-play) { box-shadow: 0 2px 0 -0px #f2cf7a; }
html.ff .navbar .ff-play { margin: 0; padding: 11px 22px; font-size: 15px; }
html.ff .navbar .ff-play:hover { color: #b3270f; }
html.ff .ddmenu { border-radius: 0; border-color: rgba(242, 207, 122, .3); }

/* ---------- the opening: the gates fill the first screen and the notice lands at its foot ---------- */
html.ff .ff-live { position: relative; z-index: 4; margin: -88px calc(50% - 50vw) 0; }
html.ff .ff-open { position: relative; overflow: hidden; height: max(640px, calc(min(980px, 100vh) - 118px)); background: #05080d; }
html.ff .ff-gates { display: flex; }
html.ff .ff-open .ff-gates { position: absolute; inset: 0 -80px; }
html.ff .ff-realms { display: contents; }
html.ff .ff-gate { position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; color: #fff; transform: skewX(-7deg); }
html.ff .ff-gates.ready .ff-gate { transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-gate[hidden] { display: none; }
html.ff a.ff-gate:hover, html.ff a.ff-gate:focus-visible { color: #fff; text-shadow: none; }
html.ff .ff-gates:hover .ff-gate { flex-grow: 1; }
html.ff .ff-gates .ff-gate:hover, html.ff .ff-gates a.ff-gate:focus-visible { flex-grow: 1.95; }
html.ff .ff-gate::after { content: ""; position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, rgba(242, 207, 122, .05), #f2cf7a 45%, rgba(242, 207, 122, .25)); box-shadow: 0 0 16px rgba(242, 207, 122, .8); }
html.ff .ff-gate::before { content: ""; position: absolute; z-index: 6; left: -1px; top: 0; width: 4px; height: 22%; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); box-shadow: 0 0 18px 4px rgba(255, 236, 180, .95); translate: 0 -110%; animation: ffseam 5.5s linear infinite; }
html.ff .ff-gate:nth-child(2n)::before { animation-delay: 1.7s; }
html.ff .ff-gate:nth-child(3n)::before { animation-delay: 3.1s; }
@keyframes ffseam { from { translate: 0 -110%; } to { translate: 0 470%; } }
html.ff .ff-realms > :first-child::after, html.ff .ff-realms > :first-child::before, html.ff .ff-realms:empty + .ff-gate::after, html.ff .ff-realms:empty + .ff-gate::before, html.ff #ff-newsgates > :first-child::after, html.ff #ff-newsgates > :first-child::before, html.ff #ff-road > :first-child::after, html.ff #ff-road > :first-child::before { display: none; }
@keyframes ffrisegate { from { transform: skewX(-7deg) translateY(90px); opacity: 0; } to { transform: skewX(-7deg); opacity: 1; } }
html.ff .ff-open .ff-gate { animation: ffrisegate 1.1s cubic-bezier(.2, .8, .2, 1) both; }
html.ff .ff-open .ff-realms > :nth-child(2) { animation-delay: .12s; }
html.ff .ff-open .ff-gate.reset { animation-delay: .24s; }
html.ff .ff-open .ff-gate.holi { animation-delay: .36s; }
html.ff .ffg-bg, html.ff .ffg-fx { position: absolute; inset: -3% -130px; transform: skewX(7deg); }
html.ff .ffg-bg { background: center 30% / cover no-repeat; transform: skewX(7deg) scale(1.02); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter .7s ease, background-position 1.1s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-gate:hover .ffg-bg { transform: skewX(7deg) scale(1.1); }
html.ff .ffg-fx { pointer-events: none; }
html.ff .ffg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, .02) 42%, rgba(5, 8, 13, .62) 72%, rgba(5, 8, 13, .98) 100%); }
html.ff .ffg-txt { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 22px 44px 84px; transform: skewX(7deg); transform-origin: bottom left; }
html.ff .ff-realms > :first-child .ffg-txt, html.ff .ff-realms:empty + .ff-gate .ffg-txt { padding-left: 186px; }
html.ff .ff-gates > .ff-gate:last-child .ffg-txt, html.ff .ff-gate.reset:has(+ [hidden]) .ffg-txt { padding-right: 90px; }
html.ff .ffg-tag { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px #000; }
html.ff .ffg-ttl { display: block; padding-bottom: .08em; font: 900 42px/1.08 var(--logo); overflow-wrap: anywhere; background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .95)); transition: font-size .6s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-gate:hover .ffg-ttl, html.ff a.ff-gate:focus-visible .ffg-ttl { font-size: 68px; }
html.ff .ff-gates:hover .ff-gate:not(:hover) .ffg-ttl { font-size: 28px; }
html.ff .ff-gates:has(.ff-realms > :nth-child(3)) .ff-gate:not(:hover) .ffg-ttl { font-size: 27px; }
html.ff .ffg-clk { display: block; margin-top: 6px; font-size: 30px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px #000; }
html.ff .ffg-more { display: grid; justify-items: start; gap: 2px; max-width: 460px; max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 1.45; color: #e4ecf1; text-shadow: 0 1px 4px #000; transform: translateY(10px); transition: max-height .5s ease, opacity .5s ease, transform .5s ease; }
html.ff .ff-gate:hover .ffg-more, html.ff a.ff-gate:focus-visible .ffg-more { max-height: 170px; opacity: 1; transform: none; }
html.ff .ffg-go { margin-top: 10px; padding: 11px 24px; font-size: 15px; font-weight: 700; color: #fff; text-shadow: none; background: #d63a20; box-shadow: 0 8px 26px rgba(214, 58, 32, .55); }
/* an open realm */
html.ff .ff-gate.up .ffg-tag { color: #9fe8a9; }
html.ff .ff-gate.up .ffg-bg { background-image: url(/img/wyrmrest-temple.jpg); background-position: 57% 30%; animation: ffdrift 24s ease-in-out infinite alternate; }
html.ff .ff-gate.up.alt .ffg-bg { filter: hue-rotate(-70deg) saturate(1.15); scale: -1 1; }
@keyframes ffdrift { from { translate: -3% 0; } to { translate: 3% 0; } }
html.ff .ffg-aurora { background: linear-gradient(100deg, transparent 28%, rgba(90, 255, 190, .24) 46%, rgba(120, 190, 255, .2) 56%, transparent 72%); animation: ffaurora 9s ease-in-out infinite alternate; }
html.ff .ffg-aurora.warm { background: linear-gradient(100deg, transparent 28%, rgba(255, 205, 120, .22) 46%, rgba(255, 150, 90, .17) 56%, transparent 72%); }
@keyframes ffaurora { 0% { transform: skewX(7deg) translateX(-30%); opacity: .35; } 50% { opacity: 1; } 100% { transform: skewX(7deg) translateX(30%); opacity: .4; } }
html.ff .ffg-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #47d65a; }
html.ff .ffg-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #47d65a; animation: ffping 1.8s ease-out infinite; }
@keyframes ffping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
/* a shut realm: the gate's own "This instance is closed" stays out of frame until the mouse pans to it */
html.ff .ff-gate.shut .ffg-bg { background-image: url(/img/icc-gate.jpg); background-size: auto 112%; background-position: 22% 0; filter: grayscale(.75) brightness(.95) contrast(1.1); }
html.ff .ff-gate.shut:hover .ffg-bg { background-position: 82% 0; filter: grayscale(.4) brightness(.92) contrast(1.1); }
html.ff .ff-gate.maint .ffg-tag { color: #ffc94a; }
html.ff .ff-gate.down .ffg-tag { color: #ff9aa8; }
html.ff .ffg-frost { box-shadow: inset 0 0 150px 30px rgba(150, 220, 255, .26); }
html.ff .ffg-snow { top: -216px; background-image: radial-gradient(2.4px 2.4px at 40px 50px, #fff 50%, transparent 100%), radial-gradient(1.8px 1.8px at 150px 130px, rgba(255, 255, 255, .85) 50%, transparent 100%), radial-gradient(1.2px 1.2px at 70px 170px, rgba(255, 255, 255, .7) 50%, transparent 100%), radial-gradient(1.4px 1.4px at 190px 30px, rgba(255, 255, 255, .75) 50%, transparent 100%); background-size: 210px 210px; animation: ffsnow 9s linear infinite; }
@keyframes ffsnow { to { translate: 0 210px; } }
/* the weekly reset */
html.ff .ff-gate.reset .ffg-tag { color: var(--ice); }
html.ff .ff-gate.reset .ffg-bg { background-image: url(/img/icc-jaw.jpg); filter: brightness(.55) saturate(1.3); }
html.ff .ff-gate.reset:hover .ffg-bg { filter: brightness(.92) saturate(1.3); }
html.ff .ffg-ring { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; overflow: visible; }
html.ff .ffg-r0 { stroke: rgba(143, 214, 255, .14); stroke-width: 7; }
html.ff .ffg-arc { stroke: #bfe8ff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 12px rgba(143, 214, 255, 1)); }
html.ff .ffg-spin1 { animation: ffspin 46s linear infinite; }
html.ff .ffg-spin2 { animation: ffspin 30s linear infinite reverse; }
html.ff .ffg-spin3 { animation: ffspin 46s linear infinite; }
html.ff .ffg-r1 { stroke: #8fd6ff; stroke-opacity: .6; stroke-width: 2; stroke-dasharray: 3 13; }
html.ff .ffg-r2 { stroke: #8fd6ff; stroke-opacity: .4; stroke-width: 1.5; stroke-dasharray: 44 12 4 12; }
@keyframes ffspin { to { rotate: 360deg; } }
/* the holiday */
html.ff .ff-gate.holi { --t: 255, 170, 70; }
html.ff .ff-gate.holi .ffg-more > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.ff .ff-gate.holi .ffg-tag { color: #ffb066; }
html.ff .ff-gate.holi .ffg-bg { background: radial-gradient(270px 270px at 42% 50%, #ffe6b8 0, rgba(var(--t), 1) 55%, rgba(var(--t), .28) 78%, transparent 90%), radial-gradient(120% 70% at 50% 110%, rgba(var(--t), .7), transparent 62%), linear-gradient(180deg, #120a1c, #1e1008 75%, #2a1206); }
html.ff .ffg-idol { position: absolute; left: 42%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; filter: drop-shadow(0 0 34px rgba(var(--t), .9)); animation: ffburn 2.6s ease-in-out infinite; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-gate:hover .ffg-idol { transform: scale(1.18) rotate(-3deg); }
html.ff .ffg-pic { display: grid; place-items: center; }
html.ff .ffg-pic img, html.ff .ffg-pic .wi { display: block; width: 130px; height: 130px; margin: 0; border-radius: 0; border: 2px solid #f2cf7a; box-shadow: 0 0 0 2px #000; }
@keyframes ffburn { 50% { scale: 1.035; } }
html.ff .ffg-ember { position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: #ffc36b; box-shadow: 0 0 10px 3px rgba(var(--t, 255, 130, 30), .9); opacity: 0; animation: ffrise 6s linear infinite; }
@keyframes ffrise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(34px, -640px) scale(.25); opacity: 0; } }
/* the opening's words */
html.ff .ff-topshade { position: absolute; inset: 0 0 auto 0; height: 440px; background: linear-gradient(180deg, rgba(5, 8, 13, .94) 0%, rgba(5, 8, 13, .58) 52%, rgba(5, 8, 13, 0) 100%); pointer-events: none; }
html.ff .ff-head { position: absolute; z-index: 6; inset: 92px 0 auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px; text-align: center; pointer-events: none; }
html.ff .ff-logow { filter: drop-shadow(0 6px 34px rgba(0, 0, 0, .85)) drop-shadow(0 0 44px rgba(242, 207, 122, .28)); }
html.ff .ff-logo { font: 900 clamp(64px, 9.4vw, 136px)/1 var(--logo); letter-spacing: .03em; background: linear-gradient(100deg, #c48a2a 0%, #f2cf7a 32%, #fffbe9 50%, #f2cf7a 68%, #c48a2a 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ffcomein 1.3s cubic-bezier(.2, .8, .2, 1) both, ffshim 2.6s ease-out .9s both; }
@keyframes ffcomein { from { opacity: 0; letter-spacing: .22em; filter: blur(10px); } to { opacity: 1; } }
@keyframes ffshim { from { background-position: 120% 0; } to { background-position: 50% 0; } }
html.ff .ff-tagline { display: flex; align-items: center; gap: 18px; margin: 0; font: 700 clamp(18px, 1.9vw, 27px)/1.3 var(--logo); color: #fff; text-shadow: 0 2px 14px #000; animation: fffadeup 1s .35s both; }
html.ff .ff-tagline::before, html.ff .ff-tagline::after { content: ""; flex: none; width: clamp(24px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, rgba(242, 207, 122, 0), #f2cf7a); }
html.ff .ff-tagline::after { transform: scaleX(-1); }
html.ff .ff-heads { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; pointer-events: auto; animation: fffadeup 1s .55s both; }
@keyframes fffadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- the notice: a gate on its side ---------- */
html.ff .ffnote { position: relative; z-index: 7; max-width: none; margin: 0 calc(50% - 50vw); padding: 0; }
html.ff .ffnote[hidden] { display: none; }
html.ff .sysline.herald { --glow: 138, 76, 255; --c1: #8f55ff; --c2: #3d17a8; --seam: #f2cf7a; --ink: #ffe9ad; --tone: hue-rotate(85deg) saturate(1.5) brightness(.62); display: block; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: 0 -14px 70px rgba(var(--glow), .6), 0 14px 60px rgba(var(--glow), .35); }
html.ff .sysline.herald::before, html.ff .sysline.herald::after { content: none; }
html.ff .sysline.herald.fix { --glow: 70, 175, 255; --c1: #2f9be0; --c2: #0c3f72; --seam: #bfe8ff; --ink: #d4f1ff; --tone: hue-rotate(15deg) saturate(1.3) brightness(.62); }
html.ff .sysline.herald.bad { --glow: 255, 62, 36; --c1: #ec3d22; --c2: #7c0f0c; --seam: #ffc36b; --ink: #ffe1b0; --tone: hue-rotate(170deg) saturate(1.7) brightness(.55); position: relative; }
html.ff .sysline.herald.bad::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 -20px 110px rgba(var(--glow), .95), 0 20px 90px rgba(var(--glow), .6); opacity: 0; animation: ffalarm 2.4s ease-in-out infinite; }
@keyframes ffalarm { 50% { opacity: 1; } }
html.ff .hd-in { position: relative; display: flex; align-items: stretch; min-height: 118px; overflow: hidden; background: #090613; }
html.ff .hd-art, html.ff .hd-tint, html.ff .hd-sweep, html.ff .hd-motes { position: absolute; inset: 0; pointer-events: none; }
html.ff .hd-art { inset: -40% -6%; background: url(/img/icc-jaw.jpg) 50% 40% / cover no-repeat; filter: var(--tone); }

html.ff .hd-tint { background: linear-gradient(90deg, rgba(9, 6, 19, .2) 0%, rgba(9, 6, 19, .68) 42%, rgba(9, 6, 19, .42) 100%); }
html.ff .hd-sweep { left: -40%; right: auto; width: 45%; background: linear-gradient(100deg, transparent, rgba(var(--glow), .42) 45%, rgba(255, 255, 255, .16) 52%, rgba(var(--glow), .42) 58%, transparent); animation: ffhdsweep 8s ease-in-out infinite; }
@keyframes ffhdsweep { from { translate: 0 0; } 70%, to { translate: 330% 0; } }
html.ff .hd-mote { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(var(--glow), 1); opacity: 0; animation: ffhdrise 5s linear infinite; }
@keyframes ffhdrise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -136px) scale(.3); opacity: 0; } }
html.ff .hd-seam { position: absolute; z-index: 3; left: 0; right: 0; height: 2px; overflow: hidden; background: var(--seam); box-shadow: 0 0 12px rgba(var(--glow), 1); }
html.ff .hd-seam.t { top: 0; }
html.ff .hd-seam.b { bottom: 0; }
html.ff .hd-seam.b::before { animation-direction: reverse; }
html.ff .hd-seam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); translate: -100% 0; animation: ffhdrun 6s linear infinite; }
@keyframes ffhdrun { from { translate: -100% 0; } to { translate: 340% 0; } }
html.ff .hd-seal { position: relative; z-index: 2; flex: none; display: flex; align-items: center; margin-left: -60px; padding: 0 74px 0 118px; overflow: hidden; transform: skewX(-7deg); background: linear-gradient(115deg, var(--c1), var(--c2)); box-shadow: 2px 0 0 var(--seam), 6px 0 18px rgba(var(--glow), .9), 30px 0 70px rgba(var(--glow), .8); transition: filter .3s ease; }
html.ff .herald:hover .hd-seal { filter: brightness(1.14); }
html.ff .hd-ring.a { animation: ffspin 26s linear infinite; }
html.ff .hd-ring.b { animation: ffspin 16s linear infinite reverse; }
html.ff .hd-ring { position: absolute; left: 42px; top: 50%; width: 190px; height: 190px; margin-top: -95px; transform: skewX(7deg); opacity: .55; }
html.ff .hd-r1 { stroke: #fff; stroke-width: 2; stroke-dasharray: 3 11; }
html.ff .hd-r2 { stroke: #fff; stroke-opacity: .7; stroke-width: 1.5; stroke-dasharray: 38 10 4 10; }
html.ff .hd-kind { position: relative; transform: skewX(7deg); font: 900 27px/1.05 var(--logo); letter-spacing: .02em; color: #fff; white-space: nowrap; text-shadow: 0 2px 2px rgba(0, 0, 0, .35), 0 0 26px rgba(255, 255, 255, .55); }
html.ff .hd-msg { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 16px 28px 16px 54px; }
html.ff .hd-msg strong { font: 800 27px/1.15 var(--logo); color: var(--ink); text-shadow: 0 2px 12px #000, 0 0 22px rgba(var(--glow), .8); }
html.ff .hd-msg > span { font-size: 17px; font-weight: 500; line-height: 1.35; color: #fff; text-shadow: 0 1px 6px #000; }
html.ff .hd-go { position: relative; z-index: 2; flex: none; align-self: center; overflow: hidden; margin-right: 54px; padding: 16px 36px; transform: skewX(-7deg); font: 700 17px/1.2 var(--body); white-space: nowrap; color: var(--c2); background: #fff; text-shadow: none; box-shadow: 0 0 36px rgba(var(--glow), .95); transition: transform .2s ease, color .2s ease, box-shadow .25s ease; }
html.ff .hd-go span { position: relative; z-index: 1; display: block; transform: skewX(7deg); }
html.ff .hd-go::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-101%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
html.ff .hd-go:hover { color: var(--c2); transform: skewX(-7deg) translateY(-2px); box-shadow: 0 0 56px rgba(var(--glow), 1); }
html.ff .hd-go:hover::before { transform: none; }
/* on other pages it's quieter */
html.ff .ffnote.mini { margin-bottom: 24px; }
html.ff .ffnote.mini .hd-in { min-height: 62px; }
html.ff .ffnote.mini .hd-seal { padding: 0 46px 0 96px; }
html.ff .ffnote.mini .hd-ring { display: none; }
html.ff .ffnote.mini .hd-kind { font-size: 18px; }
html.ff .ffnote.mini .hd-msg { padding: 10px 20px 10px 36px; }
html.ff .ffnote.mini .hd-msg strong { font-size: 17px; }
html.ff .ffnote.mini .hd-msg > span { font-size: 14.5px; }
html.ff .ffnote.mini .hd-go { padding: 9px 22px; font-size: 14px; margin-right: 40px; }

/* ---------- the running line ---------- */
/* the moving bar's own rules are in ticker.css, shared with the admin's preview */
html.ff .ff-mq { margin: 0 calc(50% - 50vw); }

/* ---------- full-width sections ---------- */
html.ff .ff-sec { --ffx: max(20px, calc(50vw - 660px)); position: relative; margin: 0 calc(50% - 50vw); padding: 92px var(--ffx) 0; background: #05080d; }
html.ff .ff-band { margin: 0 calc(-1 * var(--ffx)); overflow: hidden; }
html.ff .ff-band .ff-gates { margin: 0 -80px; }
html.ff .ff-news .ff-gates { height: 600px; }
html.ff .ff-news .lead { flex-grow: 1.5; }
html.ff .ff-news .ffg-ttl { font-size: 30px; }
html.ff .ff-news .ff-gate:hover .ffg-ttl { font-size: 42px; }
html.ff .ff-news .ff-gates:hover .ff-gate:not(:hover) .ffg-ttl { font-size: 26px; }
html.ff .ff-news .lead .ffg-ttl { font-size: 56px; }
html.ff .ff-news .lead:hover .ffg-ttl { font-size: 60px; }
html.ff .ff-news .ff-gates:hover .lead:not(:hover) .ffg-ttl { font-size: 30px; }
html.ff .ff-news .lead .ffg-more { max-height: 170px; opacity: 1; transform: none; font-size: 18px; max-width: 600px; }
html.ff .ff-news .ff-gates:hover .lead:not(:hover) .ffg-more { max-height: 0; opacity: 0; }
html.ff .ffn .ffg-txt { padding-left: 76px; }
html.ff .ffn.lead .ffg-txt { padding-left: 176px; }
html.ff .ffg-chip { display: inline-block; margin-bottom: 12px; padding: 6px 14px; transform: skewX(-7deg); white-space: nowrap; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: #8fd6ff; color: #06202f; }
html.ff .ffg-chip b { display: block; transform: skewX(7deg); font-weight: 800; }
html.ff .ffg-chip.k-story { background: #e0566a; color: #fff; }
html.ff .ffg-chip.k-dev { background: #b18cff; color: #1a0b3a; }
html.ff .ffg-chip.k-feature { background: #ffb36b; color: #2b1400; }
html.ff .ffg-chip.k-news { background: #8fe06a; color: #0c2300; }
html.ff .ff-rows { margin-top: 24px; }
html.ff .ff-rows [data-b="news"] { padding: 0; border: 0; background: none; box-shadow: none; }
html.ff .ff-rows [data-b="news"]::before, html.ff .ff-rows [data-b="news"]::after, html.ff .ff-rows .mh { display: none; }
html.ff .ff-rows .news { display: block; padding: 0; }
html.ff .ff-row { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 8px; overflow: hidden; color: #e8eef3; border-bottom: 1px solid rgba(242, 207, 122, .2); }
html.ff .ff-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242, 207, 122, .2), rgba(242, 207, 122, 0)); transform: translateX(-101%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-row:hover::before { transform: none; }
html.ff .ff-row > * { position: relative; }
html.ff .ff-row b { font: 700 23px/1.2 var(--logo); transition: color .2s ease; }
html.ff .ff-row:hover b { color: #ffe9ad; }
html.ff .ff-row:hover { color: #e8eef3; }
html.ff .ff-row em { font-style: normal; font-size: 24px; color: #f2cf7a; transition: transform .25s ease; }
html.ff .ff-row:hover em { transform: translateX(8px); }
html.ff .ffr-k { font-size: 14px; font-weight: 700; color: var(--ice); }
html.ff .ffr-k.k-story { color: #ff9aa8; }
html.ff .ffr-k.k-dev { color: #c398ff; }
html.ff .ffr-k.k-feature { color: #ffb36b; }
html.ff .ffr-k.k-news { color: #8fe06a; }
html.ff .ff-rows .more { padding: 24px 0 0; text-align: center; }

/* the saga */
html.ff .ff-saga { position: relative; z-index: 1; margin: 0 calc(50% - 50vw); padding-top: 96px; background: #05080d; }
html.ff .ff-saga { display: flex; align-items: center; min-height: 760px; overflow: hidden; padding: 0 var(--ffx); }
html.ff .ffs-bg { position: absolute; inset: -6%; background: url(/img/icc-jaw.jpg) 50% 35% / cover no-repeat; filter: hue-rotate(-190deg) saturate(1.35) brightness(.72); transform: scale(1.06); }

html.ff .ffs-tint { position: absolute; inset: 0; background: radial-gradient(60% 90% at 76% 50%, rgba(255, 60, 30, .35), transparent 70%), linear-gradient(90deg, rgba(5, 8, 13, .94) 0%, rgba(5, 8, 13, .66) 46%, rgba(5, 8, 13, .12) 100%), linear-gradient(180deg, #05080d 0%, rgba(5, 8, 13, 0) 18%, rgba(5, 8, 13, 0) 82%, #05080d 100%); }
html.ff .ffs-ring { position: absolute; right: -90px; top: 50%; width: 760px; height: 760px; margin-top: -380px; overflow: visible; filter: drop-shadow(0 0 22px rgba(255, 90, 50, .8)); }
html.ff .ffs-ring .ffg-r1 { stroke: #ffb08c; stroke-opacity: .7; stroke-width: 1.5; stroke-dasharray: 2 12; }
html.ff .ffs-ring .ffg-r2 { stroke: #ffb08c; stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 60 14 6 14; }
html.ff .ffg-r3 { stroke: #ffd9c2; stroke-opacity: .8; stroke-width: 3; stroke-dasharray: 150 36; stroke-linecap: round; }
html.ff .ffs-in { position: relative; width: 100%; }
html.ff .ff-saga .ff-eye { color: #ff9d7a; }
html.ff .ff-saga .ff-eye::before { background: linear-gradient(90deg, rgba(255, 157, 122, 0), #ff9d7a); box-shadow: 0 0 10px #ff9d7a; }
html.ff .ff-saga .ff-big { max-width: 900px; font-size: clamp(48px, 7.2vw, 104px); background: linear-gradient(180deg, #fff2d6, #ffb37a 55%, #d8442a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .ffs-t { margin: 22px 0 30px; max-width: 620px; font-size: 22px; line-height: 1.4; color: #fff; text-shadow: 0 2px 10px #000; }

/* the road */
html.ff .ff-road { padding-top: 40px; padding-bottom: 0; }
html.ff #ff-road { height: 500px; }
html.ff .ffr .ffg-txt { padding: 0 10px 32px 66px; }
html.ff #ff-road > :first-child .ffg-txt { padding-left: 136px; }
html.ff #ff-road > :last-child .ffg-txt { padding-right: 90px; }
html.ff .ffr .ffg-ttl { font-size: 26px; }
html.ff .ffr:hover .ffg-ttl { font-size: 40px; }
html.ff .ff-road .ff-gates:hover .ffr:not(:hover) .ffg-ttl { font-size: 21px; }
html.ff .ffr .ffg-clk { font-size: 22px; }
html.ff .ffg-num { position: absolute; z-index: 3; left: 66px; top: 26px; transform: skewX(7deg); font: 900 128px/1 var(--logo); color: rgba(255, 255, 255, .17); text-shadow: 0 2px 18px rgba(0, 0, 0, .5); pointer-events: none; transition: color .4s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.ff #ff-road > :first-child .ffg-num { left: 128px; }
html.ff .ffr:hover .ffg-num { color: rgba(255, 236, 180, .85); transform: skewX(7deg) scale(1.08); }
html.ff .ffr.op .ffg-bg { filter: hue-rotate(10deg) saturate(1.5); }
html.ff .ffr.op .ffg-tag { color: #9fe8a9; }
html.ff .ffr.nx .ffg-bg { filter: grayscale(.8) brightness(.62) contrast(1.1); }
html.ff .ffr.nx:hover .ffg-bg { filter: grayscale(.4) brightness(.92) contrast(1.1); }
html.ff .ffr.nx .ffg-tag { color: #ffc94a; }
html.ff .ffr.se .ffg-bg { filter: grayscale(1) brightness(.4); }
html.ff .ffr.se:hover .ffg-bg { filter: grayscale(.15) brightness(.85) saturate(1.2); }
html.ff .ffr.se .ffg-tag { color: #c4d0d8; }

/* new here, and the feature cards */
html.ff .ff-new { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
html.ff .ff-new #ff-newbox:not(:has(#newhere:not([hidden]))) { display: none; }
html.ff .ff-new:not(:has(#newhere:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
html.ff .ff-new:not(:has(#newhere:not([hidden]))) .ff-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.ff #newhere { padding: 0; border: 0; background: none; box-shadow: none; }
html.ff #newhere::before, html.ff #newhere::after { display: none; }
html.ff #newhere .mb { display: block; padding: 0; }
html.ff #newhere .nh-k { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 700 15px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
html.ff #newhere .nh-k::before { content: ""; width: 46px; height: 2px; background: linear-gradient(90deg, rgba(143, 214, 255, 0), var(--ice)); box-shadow: 0 0 10px var(--ice); }
html.ff #newhere h2 { margin: 0; text-shadow: none; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .8)); font: 900 clamp(30px, 3.7vw, 50px)/1.12 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff #newhere .nh-a { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 26px; }
html.ff .ff-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html.ff .ff-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 26px 34px; overflow: hidden; color: #dfe7ed; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-card:hover { color: #dfe7ed; transform: translateY(-6px); }
html.ff .ffk-bg { position: absolute; inset: 0; background-size: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
html.ff .ff-card:hover .ffk-bg { transform: scale(1.1); }
html.ff .ffk-sh { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, .05) 8%, rgba(5, 8, 13, .8) 62%, rgba(5, 8, 13, .97) 100%); }
html.ff .ff-card b { position: relative; margin-bottom: 6px; overflow-wrap: anywhere; font: 800 25px/1.15 var(--logo); color: #ffe9ad; }
html.ff .ffk-t { position: relative; font-size: 15px; line-height: 1.45; }

/* any other box: a dark room of its own */
html.ff .home { position: relative; margin: 0 calc(50% - 50vw); padding: 0 var(--ffx) 0; background: #05080d; }
html.ff .home:not(:has(.frame:not([hidden]):not([data-b="status"]):not([data-b="featured"]):not([data-b="progression"]))) { display: none; }
html.ff #ff-tail { position: relative; margin: 0 calc(50% - 50vw); background: #05080d; }

/* the champion */
html.ff [data-b="champion"]:not([hidden]) { position: relative; display: flex; align-items: center; min-height: 820px; margin: 60px 0 0; padding: 0 var(--ffx); overflow: hidden; border: 0; border-block: 1px solid rgba(242, 207, 122, .25); border-radius: 0; box-shadow: none; background: radial-gradient(46% 60% at 50% 46%, rgba(70, 160, 150, .3), transparent 74%), linear-gradient(180deg, #05080d, #0a1a1f 50%, #05080d); }
html.ff [data-b="champion"]::before, html.ff [data-b="champion"]::after { display: none; }
html.ff [data-b="champion"] .mh { display: none; }
html.ff .ffc-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font: 900 clamp(120px, 21vw, 310px)/1 var(--logo); white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(255, 125, 10, .44); pointer-events: none; }
html.ff .ffc-ring { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -300px 0 0 -280px; overflow: visible; opacity: .5; }
html.ff [data-b="champion"] .champ-stage { position: absolute; left: 50%; top: 50%; width: 640px; height: 760px; margin: -390px 0 0 -320px; min-height: 0; flex: none; background: none; }
html.ff .champ-info { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(300px, 34vw, 480px); align-items: center; padding: 0; text-align: left; pointer-events: none; }
html.ff .champ-info > * { pointer-events: auto; }
html.ff .champ-name { display: block; text-shadow: none; font: 900 clamp(46px, 6vw, 86px)/1.02 var(--logo); background: linear-gradient(180deg, #ffe3b8, #ff9a3d 55%, #d0610a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .9)); }
html.ff .champ-who { margin: 10px 0 18px; font-size: 20px; color: #fff; }
html.ff .champ-recent { display: block; margin: 0 0 24px; padding: 0; list-style: none; font-size: 16px; line-height: 1.7; color: #cdd9e1; }
html.ff .champ-recent li { display: block; padding: 0; border: 0; color: inherit; }
html.ff .ffc-s { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid rgba(242, 207, 122, .2); }
html.ff .ffc-s:last-child { border-bottom: 0; }
html.ff .ffc-s b { text-shadow: none; font: 900 52px/1.05 var(--logo); color: #fff; }
html.ff .ffc-s.lit b { color: #ffe9ad; }
html.ff .ffc-s.wp b { font-size: 24px; line-height: 1.2; color: #fff; }
html.ff .ffc-s.q-epic b { color: #c78cff; }
html.ff .ffc-s.q-rare b { color: #5aa7ff; }
html.ff .ffc-s.q-legendary b { color: #ff9a3d; }
html.ff .ffc-s span { font-size: 15px; color: #bcd0de; }

/* play */
html.ff [data-b="play"] { position: relative; margin: 0; padding: 0; overflow: hidden; border-radius: 0; background: #05080d; }
html.ff [data-b="play"] .pj { position: relative; padding: 130px var(--ffx) 110px; border: 0; border-radius: 0; box-shadow: none; text-align: center; background: radial-gradient(64% 66% at 50% 56%, rgba(5, 8, 13, .84), rgba(5, 8, 13, .3) 100%), url(/img/wyrmrest-temple.jpg) 50% 22% / cover no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ff [data-b="play"] .pj-k { display: none; }
html.ff [data-b="play"] .pj-h h2 { text-shadow: none; margin: 0 0 34px; padding-bottom: .08em; font: 900 clamp(56px, 8vw, 116px)/1.03 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .8)); }
html.ff [data-b="play"] .pj-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; max-width: 1040px; margin: 0 auto; padding: 0; text-align: left; counter-reset: none; }
html.ff [data-b="play"] .pj-s { position: relative; display: block; padding: 10px 0 10px 30px; }
html.ff [data-b="play"] .pj-s::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #fff2c4, #c48a2a); transform: skewX(-7deg); box-shadow: 0 0 14px rgba(242, 207, 122, .8); }
html.ff [data-b="play"] .pj-n { display: block; width: auto; height: auto; margin-bottom: 6px; }
html.ff [data-b="play"] .pj-n .wi { display: none; }
html.ff [data-b="play"] .pj-n b { position: static; display: block; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 900 54px/1 var(--logo); color: transparent; -webkit-text-stroke: 1.5px #f2cf7a; }
html.ff [data-b="play"] .pj-t h3 { margin: 0; font: 700 20px/1.3 var(--body); color: #fff; }
html.ff [data-b="play"] .pj-t p { margin: 2px 0 12px; font-size: 15.5px; color: #d7e1e8; }

html.ff .ff-mq, html.ff .ff-sec, html.ff .ff-saga, html.ff [data-b="champion"]:not([hidden]), html.ff [data-b="play"] { content-visibility: auto; contain-intrinsic-size: auto 760px; }

/* appear on scroll where the browser can */
@supports (animation-timeline: view()) {
  html.ff .ff-rv { animation: ffrv both cubic-bezier(.2, .8, .2, 1); animation-timeline: view(); animation-range: entry 0% entry 32%; }
  @keyframes ffrv { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
}
@media (hover: none) {
  html.ff .ff-lamp { display: none; }
  html.ff .ffg-more { max-height: 170px; opacity: 1; transform: none; }
}
@media (max-width: 1180px) {
  html.ff .navbar .wrap { padding-inline: 16px; }
  html.ff .navbar a:not(.ff-brand):not(.ff-play), html.ff .navbar .ddwrap > a, html.ff .navbar .ddwrap > button { padding: 8px 7px; font-size: 13.5px; letter-spacing: 0; }
  html.ff .ff-brand { font-size: 20px; }
  html.ff [data-b="champion"] .champ-stage { width: 480px; height: 580px; margin: -290px 0 0 -240px; }
}
@media (max-width: 980px) {
  html.ff .hd-in { flex-direction: column; }
  html.ff .hd-seal { margin: 0; padding: 14px 24px; justify-content: center; transform: none; box-shadow: 0 2px 0 var(--seam), 0 10px 40px rgba(var(--glow), .8); }
  html.ff .hd-ring { left: 50%; margin-left: -95px; transform: none; }
  html.ff .hd-kind { transform: none; font-size: 23px; }
  html.ff .hd-msg { padding: 18px 24px 14px; text-align: center; }
  html.ff .hd-msg strong { font-size: 23px; }
  html.ff .hd-msg > span { font-size: 16px; }
  html.ff .hd-go { align-self: center; margin: 0 0 22px; }
  html.ff .ffnote.mini .hd-seal { padding: 8px 16px; }
  html.ff .ffnote.mini .hd-msg { padding: 10px 16px; }
  html.ff .ffnote.mini .hd-go { margin: 0 0 12px; }
}
/* a tablet, before the phone's layout: the top bar's links close up (the language is at the foot of the page
   too), and the gates' clocks keep to one line in the narrower gates */
@media (min-width: 821px) and (max-width: 1000px) {
  html.ff .navbar a:not(.ff-brand):not(.ff-play), html.ff .navbar .ddwrap > a, html.ff .navbar .ddwrap > button { padding: 8px 5px; font-size: 12.5px; }
  html.ff .ff-lang { display: none; }
  html.ff .ffg-clk { font-size: 24px; white-space: nowrap; }
  html.ff .ff-realms > :first-child .ffg-txt, html.ff .ff-realms:empty + .ff-gate .ffg-txt { padding-left: 120px; }
  html.ff .ff-gates > .ff-gate:last-child .ffg-txt, html.ff .ff-gate.reset:has(+ [hidden]) .ffg-txt { padding-right: 60px; }
}
@media (max-width: 820px) {
  html.ff .navbar .wrap > a[data-nav], html.ff .navbar .ddwrap, html.ff .navbar .navacct, html.ff .ff-lang { display: none; }
  html.ff .ff-open { height: auto; display: flex; flex-direction: column; }
  html.ff .ff-head { order: -1; position: relative; inset: auto; padding: 84px 20px 34px; }
  html.ff .ff-topshade { display: none; }
  html.ff .ff-open .ff-gates { position: relative; inset: auto; }
  html.ff .ff-gates { flex-direction: column; margin: 0 !important; height: auto !important; }
  html.ff .ff-gate, html.ff .ff-open .ff-gate { flex: none; height: 300px; transform: none; animation: none; }
  html.ff .ffn, html.ff .ffr { height: 250px; }
  html.ff .ff-gate::after, html.ff .ff-gate::before { display: none; }
  html.ff .ffg-bg, html.ff .ffg-fx, html.ff .ff-gate:hover .ffg-bg { inset: 0; transform: none; }
  html.ff .ffg-snow { top: -216px; }
  html.ff .ff-gate.up .ffg-bg, html.ff .ff-gate.up:hover .ffg-bg { inset: 0 -6%; }
  html.ff .ffg-aurora { animation: none; }
  html.ff .ffg-txt, html.ff .ff-realms > :first-child .ffg-txt, html.ff .ff-realms:empty + .ff-gate .ffg-txt, html.ff .ff-gates > .ff-gate:last-child .ffg-txt, html.ff .ff-gate.reset:has(+ [hidden]) .ffg-txt, html.ff .ffn .ffg-txt, html.ff .ffn.lead .ffg-txt, html.ff .ffr .ffg-txt, html.ff #ff-road > :first-child .ffg-txt, html.ff #ff-road > :last-child .ffg-txt { padding: 0 24px 22px; transform: none; }
  html.ff .ffg-more, html.ff .ff-news .lead .ffg-more { max-height: none; opacity: 1; transform: none; font-size: 15px; }
  html.ff .ffg-ttl, html.ff .ff-gate:hover .ffg-ttl, html.ff .ff-gates:hover .ff-gate:not(:hover) .ffg-ttl, html.ff .ff-gates:has(.ff-realms > :nth-child(3)) .ff-gate:not(:hover) .ffg-ttl, html.ff .ff-news .lead .ffg-ttl, html.ff .ff-news .lead:hover .ffg-ttl, html.ff .ff-news .ff-gates:hover .lead:not(:hover) .ffg-ttl { font-size: 34px; }
  html.ff .ff-news .ffg-ttl, html.ff .ff-news .ff-gate:hover .ffg-ttl, html.ff .ff-news .ff-gates:hover .ff-gate:not(:hover) .ffg-ttl, html.ff .ffr .ffg-ttl, html.ff .ffr:hover .ffg-ttl, html.ff .ff-road .ff-gates:hover .ffr:not(:hover) .ffg-ttl { font-size: 26px; }
  html.ff .ffg-num, html.ff #ff-road > :first-child .ffg-num { left: auto; right: 18px; top: 14px; transform: none; font-size: 80px; }
  html.ff .ffr:hover .ffg-num { transform: none; }
  html.ff .ffg-ring { top: 32%; width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  html.ff .ffg-idol { left: 50%; top: 28%; width: 130px; height: 130px; margin: -65px 0 0 -65px; }
  html.ff .ff-gate.holi .ffg-bg { background-position: 6% -60px, 0 0, 0 0; }
  /* sized by the width, so the picture's own "This instance is closed" stays past the right edge on any phone */
  html.ff .ff-gate.shut .ffg-bg, html.ff .ff-gate.shut:hover .ffg-bg { background-size: 180% auto; background-position: 0% 30%; }
  html.ff .ff-sec { padding-top: 60px; }
  html.ff .ff-eye { font-size: 13px; }
  html.ff .ff-eye::before { width: 26px; }
  html.ff .ff-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html.ff .ff-row em { display: none; }
  html.ff .ff-row b { font-size: 20px; }
  html.ff .ff-saga { min-height: 620px; }
  html.ff .ffs-ring { right: -260px; width: 520px; height: 520px; margin-top: -260px; opacity: .6; }
  html.ff .ff-new, html.ff .ff-new:not(:has(#newhere:not([hidden]))) .ff-cards, html.ff .ff-cards { grid-template-columns: minmax(0, 1fr); }
  html.ff .ff-new { gap: 30px; padding-top: 64px; padding-bottom: 64px; }
  html.ff .ff-card { min-height: 230px; }
  html.ff [data-b="champion"]:not([hidden]) { display: block; min-height: 0; padding: 30px 16px 40px; }
  html.ff .ffc-ghost, html.ff .ffc-ring { display: none; }
  html.ff [data-b="champion"] .champ-stage { position: relative; left: auto; top: auto; width: 100%; height: 420px; margin: 0; }
  html.ff .champ-info { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html.ff [data-b="play"] .pj { padding: 90px 20px 70px; }
  html.ff [data-b="play"] .pj-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ff .ff-dust, html.ff .ff-logo, html.ff .ff-tagline, html.ff .ff-heads, html.ff .ff-open .ff-gate, html.ff .ff-gate.up .ffg-bg, html.ff .ffg-aurora, html.ff .ffg-dot::after, html.ff .ffg-snow, html.ff .ffg-spin1, html.ff .ffg-spin2, html.ff .ffg-spin3, html.ff .hd-ring, html.ff .ffg-idol, html.ff .ff-gate::before, html.ff .ff-mqt, html.ff .sysline.herald.bad::after, html.ff .hd-sweep, html.ff .hd-seam::before, html.ff .ff-rv { animation: none; }
  html.ff .ffg-ember, html.ff .hd-mote { animation: none; opacity: .8; bottom: 30%; }
  html.ff .ff-gate::before, html.ff .ff-lamp { display: none; }
  html.ff .ff-gate, html.ff .ffg-ttl, html.ff .ffg-more { transition: none; }
}


/* ---------- the other pages, dressed to match the front page ---------- */
/* a dark room: the art only just shows behind the panels */
html.ff body { background-color: #05080d; }
html.ff #backdrop { opacity: .13; }
/* the holiday's things hang under the menu, small; on the front page the holiday has a gate instead */
html.ff .masthead { top: 66px; height: 90px; }
html.ff .masthead .holi { transform: scale(.72); transform-origin: top center; }
html.ff:has(section[data-view="news"]:not([hidden])) .masthead { display: none; }
/* panels: square and solid, gold along the top */
html.ff .frame:not(.feature):not(.play)::before, html.ff .frame:not(.feature):not(.play)::after { display: none; }
html.ff .frame { border: 0; border-top: 2px solid rgba(242, 207, 122, .55); border-radius: 0; background: linear-gradient(180deg, #0e1620, #090e15); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
html.ff .mh { padding: 18px 22px 12px; }
html.ff .mh h1, html.ff .mh h2, html.ff .mh h3 { font: 800 20px/1.2 var(--logo); color: #ffe9ad; text-shadow: none; }
html.ff .crumbs { font: 700 13px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #bcd0de; text-shadow: 0 1px 4px #000; }
html.ff .crumbs a { color: #f2cf7a; }
html.ff .grp { margin: 18px 0 4px; font: 900 clamp(26px, 3vw, 38px)/1.1 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html.ff .grp::after { background: linear-gradient(90deg, rgba(242, 207, 122, .6), rgba(242, 207, 122, 0)); }
/* the big picture at the top of a page: edge to edge, with a slanted foot */
html.ff .frame.banner { margin: -88px calc(50% - 50vw) 20px; min-height: 430px; padding: 0 var(--ffx); overflow: hidden; border: 0; background: #05080d; box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
html.ff .banner::after { background: linear-gradient(90deg, rgba(5, 8, 13, .96) 0%, rgba(5, 8, 13, .82) 38%, rgba(5, 8, 13, .3) 72%, rgba(5, 8, 13, .1) 100%), linear-gradient(180deg, rgba(5, 8, 13, .72) 0%, rgba(5, 8, 13, 0) 34%, rgba(5, 8, 13, 0) 70%, rgba(5, 8, 13, .7) 100%); }
html.ff .banner .in { max-width: 860px; padding: 126px 0 84px; gap: 12px; }
html.ff .banner h1 { padding-bottom: .06em; font: 900 clamp(40px, 5.6vw, 80px)/1.04 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .85)); }
html.ff .banner p { font-size: 19px; line-height: 1.5; color: #e8eef3; max-width: 62ch; }
html.ff .ffnote.mini { margin-top: -22px; }
html.ff .ffnote.mini:not([hidden]) ~ section .frame.banner { margin-top: -24px; }
html.ff .ffnote.mini:not([hidden]) ~ section .banner .in { padding-top: 60px; }
/* the Game Guide's cards: slanted pictures, with their words on them */
html.ff .tiles { display: flex; flex-wrap: wrap; gap: 18px; }
html.ff .frame.tile { position: relative; flex: 1 1 270px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; overflow: hidden; border: 0; background: #090e15; box-shadow: none; clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
html.ff .tile .tw2 { position: absolute; inset: 0; }
html.ff .tile .thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
html.ff .tile .thumb .shot { background-size: cover; }
html.ff .tile .tw2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, .04) 12%, rgba(5, 8, 13, .78) 58%, rgba(5, 8, 13, .98) 100%); }
html.ff .tile .tw2 > .wi { left: 34px; top: 22px; bottom: auto; }
html.ff .tile .tb { position: relative; z-index: 1; gap: 6px; padding: 26px 34px; }
html.ff .tile h3 { font: 800 25px/1.15 var(--logo); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe9ad; text-shadow: 0 2px 8px #000; }
html.ff .tile:hover h3 { background-image: none; color: #fff2c4; }
html.ff .tile p { color: #dfe7ed; }
/* a news article */
html.ff section[data-view="article"] > .crumbs { margin-top: 44px; }
html.ff .agrid { margin-top: 14px; grid-template-columns: minmax(0, 1fr) 340px; }
html.ff .frame.article { overflow: hidden; background: #0c131c; }
html.ff .article .hero { aspect-ratio: 16 / 7.5; }
html.ff .article .hero::after { background: linear-gradient(180deg, rgba(12, 19, 28, 0) 22%, rgba(12, 19, 28, .78) 66%, #0c131c 100%); }
html.ff .article .head { margin-top: -170px; gap: 12px; }
html.ff .article .head .kind { justify-self: start; padding: 6px 14px; font: 800 13px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #06202f; background: #8fd6ff; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
html.ff .article .head h1 { padding-bottom: .06em; font: 900 clamp(34px, 4.6vw, 60px)/1.06 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .9)); }
html.ff .article .date { font-style: normal; color: #bcd0de; }
html.ff .article .body { font-size: 18px; max-width: none; }
html.ff .article .body h3 { font: 800 27px/1.2 var(--logo); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe9ad; text-shadow: none; }
html.ff .article .body li::before { background: #f2cf7a; }
/* its More News column: picture, then the words beside it */
html.ff .agrid .news { padding: 0 8px 10px; }
html.ff .agrid .ni { grid-template-columns: 78px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 10px; }
html.ff .agrid .ni .tw { width: 78px; height: 54px; grid-row: 1 / span 2; }
html.ff .agrid .ni .meta { gap: 4px 8px; }
html.ff .agrid .ni .meta .ago, html.ff .agrid .ni .meta .newtag { display: none; }
html.ff .agrid .ni h3 { font: 700 17px/1.25 var(--logo); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #e8eef3; text-shadow: none; }
html.ff .agrid .ni:hover h3 { background-image: none; color: #ffe9ad; }
html.ff .agrid .ni p { display: none; }
html.ff .anav { margin-top: 24px; }
@media (max-width: 820px) {
  html.ff .masthead { top: 58px; }
  html.ff .frame.banner { min-height: 320px; padding: 0 20px; }
  html.ff .banner .in { padding: 100px 0 64px; }
  html.ff .banner p { font-size: 17px; }
  html.ff .frame.tile { flex-basis: 100%; min-height: 260px; }
  html.ff .agrid { grid-template-columns: minmax(0, 1fr); }
  html.ff .article .head { margin-top: -110px; }
  html.ff .article .body { font-size: 17px; }
}
/* with a notice up, the holiday's things hang under it; on a phone it's too tall to share the space */
html.ff:has(.ffnote.mini:not([hidden])) .masthead { top: 124px; }
@media (max-width: 980px) {
  html.ff:has(.ffnote.mini:not([hidden])) .masthead { display: none; }
}

/* ---------- the guilds ---------- */
.asub { display: flex; gap: 6px; margin: 16px 0 10px; }
.asub a { padding: 8px 20px; font: 400 16px/1.2 var(--friz); color: var(--dim); border-bottom: 2px solid transparent; }
.asub a:hover { color: var(--text); text-decoration: none; }
.asub a[aria-current] { color: var(--title); border-bottom-color: currentColor; }
.gd-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 76px; gap: 14px; align-items: center; padding: 10px; color: var(--text); border-bottom: 1px solid var(--rule); }
.gd-row:hover { text-decoration: none; background: linear-gradient(90deg, rgba(246, 212, 124, .06), transparent 80%); }
.gd-crest { display: grid; place-items: center; width: 46px; height: 46px; font: 900 22px/1 var(--logo); color: #fff; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.gd-crest.a { background: linear-gradient(160deg, #2a6ab8, #123058); }
.gd-crest.h { background: linear-gradient(160deg, #b8302a, #581412); }
.gd-rn { display: grid; gap: 2px; min-width: 0; }
.gd-rn b { font: 400 19px/1.15 var(--friz); color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-rn small { font-size: 13.5px; color: var(--dim); }
.gd-pips { display: flex; gap: 4px; }
.gd-pips i { width: 14px; height: 18px; background: rgba(255, 255, 255, .1); transform: skewX(-9deg); }
.gd-pips i.on { background: linear-gradient(180deg, #fff1bd, #f2cf7a 55%, #c48a2a); box-shadow: 0 0 10px rgba(242, 207, 122, .5); }
.gd-side { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 15px !important; }
.gd-side.a { color: #8fc6ff !important; }
.gd-side.h { color: #ff9a8a !important; }
.gd-nums { margin-top: 18px; }
.gd-h { margin: 26px 0 12px; font: 400 24px/1.2 var(--friz); color: var(--title); }
.gd-road { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gd-raid { position: relative; min-height: 190px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: #080d14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gd-art { position: absolute; inset: 0; background: url(/img/icc-jaw.jpg) center / cover no-repeat; opacity: .16; filter: grayscale(1); }
.gd-raid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(5, 8, 13, .92) 88%); }
.gd-raid.on { box-shadow: inset 0 0 0 1px rgba(242, 207, 122, .55), 0 8px 26px rgba(242, 160, 60, .16); }
.gd-raid.on .gd-art { opacity: .85; filter: none; }
.gd-raid.op .gd-art { opacity: .34; filter: saturate(.5); }
.gd-rom { position: absolute; right: 12px; top: 2px; z-index: 1; font: 900 54px/1.1 var(--logo); color: rgba(255, 255, 255, .13); }
.gd-raid.on .gd-rom { color: rgba(255, 233, 173, .75); }
.gd-rw { position: relative; z-index: 1; display: grid; gap: 3px; padding: 14px; }
.gd-rw b { font: 400 18px/1.15 var(--friz); color: #fff; }
.gd-raid.se .gd-rw b { color: var(--dim); }
.gd-rw small { font-size: 13.5px; line-height: 1.25; color: #c8d3dc; }
.gd-raid.on .gd-rw small:first-of-type { color: #ffe9ad; }
.gd-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; margin-top: 20px; }
.gd-bar { display: flex; height: 12px; margin-bottom: 10px; overflow: hidden; }
.gd-bar i { flex: 1 1 0; min-width: 2px; }
.gd-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; font-size: 14px; color: var(--dim); }
.gd-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.gd-keys i { width: 9px; height: 9px; background: var(--c); }
.gd-rost .asearch { margin-bottom: 8px; }
.gd-deeds ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gd-deeds li { display: grid; gap: 3px; }
.gd-deeds b { font: 400 17px/1.2 var(--friz); color: var(--title); }
.gd-deeds small { font-size: 13.5px; color: var(--dim); }
.gd-deeds li > span { font-size: 14.5px; line-height: 1.35; color: var(--text); }
a.gname:hover { text-decoration: underline; }
html.ff .asub { margin-top: 0; }
.asub + .census-pick { margin-top: 8px; }
html.ff .asub a { font: 700 15px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #bcd0de; }
html.ff .asub a[aria-current] { color: #ffe9ad; }
html.ff .gd-rn b { font: 800 20px/1.15 var(--logo); color: #ffe9ad; }
html.ff .gd-h { margin-top: 34px; font: 900 clamp(26px, 3vw, 38px)/1.1 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html.ff .gd-raid { min-height: 240px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: none; }
html.ff .gd-raid.on { background: #15110a; }
html.ff .gd-rw { padding: 20px 26px; }
html.ff .gd-rw b { font: 800 19px/1.15 var(--logo); }
html.ff .gd-rom { right: 26px; }
html.ff .gd-deeds b { font: 700 17px/1.2 var(--logo); color: #ffe9ad; }
@media (max-width: 980px) { .gd-two { grid-template-columns: minmax(0, 1fr); } .gd-road { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
@media (max-width: 560px) { .gd-row { grid-template-columns: 46px minmax(0, 1fr) auto; } .gd-row .aon, .gd-row > span:last-child:empty { display: none; } }

/* ---------- the Saga's own page: the same art, gates and fire as the front page, with the quest letter as it always was ---------- */
html:not(.ff) .sg-fx { display: none; }
html:not(.ff) .sg-gates .ffg-txt { display: contents; }
html:not(.ff) .sg-open, html:not(.ff) .sg-band { margin-bottom: 30px; }
html:not(.ff) .sg-gates a { display: grid; color: inherit; }
html.ff section[data-view="saga"] { position: relative; }
html.ff section[data-view="saga"] .frame.banner { min-height: 760px; margin-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
html.ff section[data-view="saga"] .banner .in { max-width: 900px; padding: 130px 0 220px; align-self: center; }
html.ff section[data-view="saga"] .banner h1 { font-size: clamp(48px, 7.2vw, 104px); background: linear-gradient(180deg, #fff2d6, #ffb37a 55%, #d8442a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff section[data-view="saga"] .banner p { font-size: 22px; line-height: 1.4; color: #fff; text-shadow: 0 2px 10px #000; }
html.ff .banner .ffs-ring, html.ff .banner .ffg-ember { z-index: 1; }

/* the letter and the blade rise over the foot of the picture */
html.ff .sg-open { position: relative; z-index: 2; margin: -130px calc(50% - 50vw) 0; padding: 0 var(--ffx) 30px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; gap: 0 44px; background: radial-gradient(44% 44% at 76% 36%, rgba(214, 58, 32, .22), transparent 72%); }
html.ff .sg-open .questlog { grid-column: 1; grid-row: 1 / 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .75), 0 0 90px rgba(255, 90, 50, .16); }
html.ff .frame.sg-blade, html.ff .sg-blade .mb { display: contents; }
html.ff .sg-blade .mh { display: block; grid-column: 2; grid-row: 1; height: auto; padding: 72px 0 0; }
html.ff .sg-blade .mh h3 { font: 900 clamp(28px, 3vw, 40px)/1.08 var(--logo); background: linear-gradient(180deg, #fff2d6, #ffb37a 55%, #d8442a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9)); }
html.ff .sg-forge { position: relative; grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
html.ff .sg-forge .tt { position: relative; box-shadow: inset 0 0 0 2px #0b1430, 0 18px 50px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 90, 50, .4); }
html.ff .sg-ring { right: auto; left: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; }
html.ff .sg-blade .tt-cap { grid-column: 1 / -1; grid-row: 3; max-width: 72ch; margin: 44px 0 0; font-size: 20px; line-height: 1.45; color: #e4ecf1; }
html.ff .sg-blade .lines { position: relative; grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
html.ff .sg-blade .lines div { gap: 3px; padding: 11px 22px; font-size: 15px; line-height: 1.25; color: #fff; background: rgba(255, 255, 255, .055); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background-color .25s ease; }
html.ff .sg-blade .lines div:hover { background: rgba(214, 58, 32, .42); }
html.ff .sg-blade .lines b { font: 700 12px/1.2 var(--body); letter-spacing: .16em; color: #ff9d7a; }

/* every band below runs edge to edge */
html.ff .frame.sg-band { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); padding: 100px var(--ffx) 0; border: 0; background: #05080d; box-shadow: none; }
html.ff .sg-band .mh { position: relative; display: block; height: auto; padding: 0 0 36px; }
html.ff .sg-band .mh h3 { padding-bottom: .08em; font: 900 clamp(38px, 5vw, 72px)/1.04 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .sg-band .mb { position: relative; padding: 0; }
html.ff .sg-band .ff-eye { color: #ff9d7a; }
html.ff .sg-band .ff-eye::before { background: linear-gradient(90deg, rgba(255, 157, 122, 0), #ff9d7a); box-shadow: 0 0 10px #ff9d7a; }

/* the chapters: five gates, the first one burning */
html.ff .sg-gates { height: 640px; margin: 0 calc(-1 * var(--ffx) - 80px); }
html.ff .sg-gates .ff-gate { display: block; padding: 0; border: 0; transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1); }
html.ff .sg-gates .ff-gate.open { flex-grow: 1.45; }
html.ff .sg-gates .ff-gate:last-child { flex-grow: 1.35; }
html.ff .sg-gates:hover .ff-gate { flex-grow: 1; }
html.ff .sg-gates:hover .ff-gate.open, html.ff .sg-gates:hover .ff-gate:last-child { flex-grow: 1.32; }
html.ff .sg-gates .ff-gate:hover, html.ff .sg-gates a.ff-gate:focus-visible, html.ff .sg-gates:hover .ff-gate.open:hover, html.ff .sg-gates:hover .ff-gate:last-child:hover { flex-grow: 1.9; }
html.ff .sg-gates > :first-child::before, html.ff .sg-gates > :first-child::after { display: none; }
html.ff .sg-gates .ffg-txt { display: flex; flex-direction: column; padding: 0 26px 46px 72px; }
html.ff .sg-gates > :first-child .ffg-txt { padding-left: 150px; }
html.ff .sg-gates > :last-child .ffg-txt { padding-right: 110px; }
html.ff .sg-gates .ffg-shade { background: linear-gradient(180deg, rgba(5, 8, 13, .1) 30%, rgba(5, 8, 13, .72) 62%, rgba(5, 8, 13, .98) 100%); }
html.ff .sg-gates .ffg-num { left: 72px; font-size: 118px; color: rgba(255, 255, 255, .2); }
html.ff .sg-gates > :first-child .ffg-num { left: 150px; color: rgba(255, 214, 170, .75); text-shadow: 0 0 34px rgba(255, 90, 50, .95); }
html.ff .sg-gates .ff-gate:hover .ffg-num { color: rgba(255, 236, 180, .9); }
html.ff .sg-gates .ffg-ttl { order: 1; font-size: 27px; overflow-wrap: normal; }
html.ff .sg-gates .ff-gate:hover .ffg-ttl, html.ff .sg-gates a.ff-gate:focus-visible .ffg-ttl { font-size: 38px; }
html.ff .sg-gates:hover .ff-gate:not(:hover) .ffg-ttl { font-size: 24px; }
html.ff .sg-gates .open .ffg-ttl { font-size: 32px; background-image: linear-gradient(180deg, #fff2d6, #ffb37a 55%, #ff6a3d); }
html.ff .sg-gates .ffg-tag { order: 0; font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #c4d0d8; white-space: nowrap; }
html.ff .sg-gates .open .ffg-tag { color: #9fe8a9; }
html.ff .sg-gates .ffg-more { display: block; order: 2; max-width: 440px; max-height: none; margin: 8px 0 0; padding: 0; overflow: visible; opacity: 1; transform: none; font-size: 16px; line-height: 1.42; color: #e4ecf1; }
html.ff .sg-gates .ffg-bg { background-repeat: no-repeat; background-size: cover; }
html.ff .sg-c1 .ffg-bg { background-image: url(/img/icc-jaw.jpg); background-position: 62% 30%; filter: sepia(1) saturate(3.4) hue-rotate(-34deg) brightness(.85) contrast(1.2); }
html.ff .sg-c2 .ffg-bg { background-image: url(/img/wyrmrest-temple.jpg); background-position: 50% 28%; filter: hue-rotate(-120deg) saturate(.8) brightness(.62); }
html.ff .sg-c2:hover .ffg-bg { filter: hue-rotate(-120deg) saturate(1.1) brightness(.95); }
html.ff .sg-c3 .ffg-bg { background-image: url(/img/icc-jaw.jpg); background-position: 100% 30%; filter: hue-rotate(70deg) saturate(.85) brightness(.66); }
html.ff .sg-c3:hover .ffg-bg { filter: hue-rotate(70deg) saturate(1.3) brightness(.95); }
html.ff .sg-c4 .ffg-bg { background-image: url(/img/icc-jaw.jpg); background-position: 30% 30%; filter: saturate(.75) brightness(.7); }
html.ff .sg-c4:hover .ffg-bg { filter: saturate(1.15) brightness(1); }
html.ff .sg-c5 .ffg-bg { background-image: url(/img/wyrmrest-temple.jpg); background-position: 44% 28%; filter: hue-rotate(115deg) saturate(.85) brightness(.62); scale: -1 1; }
html.ff .sg-c5:hover .ffg-bg { filter: hue-rotate(115deg) saturate(1.2) brightness(.95); }

/* how a chapter plays: four steps climbing through one picture to the finale */
html.ff .sg-play .acts { align-items: end; gap: 0; margin: 0 22px; }
html.ff .sg-play .act { position: relative; isolation: isolate; align-content: end; gap: 8px; overflow: hidden; padding: 26px 34px 28px; border: 0; transform: skewX(-7deg); transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
html.ff .sg-play .act:hover { translate: 0 -10px; }
html.ff .sg-play .act:nth-child(1) { height: 230px; }
html.ff .sg-play .act:nth-child(2) { height: 290px; }
html.ff .sg-play .act:nth-child(3) { height: 350px; }
html.ff .sg-play .act:nth-child(4) { height: 430px; }
html.ff .sg-play .act::after { content: ""; position: absolute; z-index: -2; inset: 0 -40px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .8)) no-repeat, url(/img/wyrmrest-temple.jpg) no-repeat; background-size: 100% 100%, 400% auto; filter: sepia(1) saturate(3) hue-rotate(-34deg) brightness(var(--b)) contrast(1.25); transform: skewX(7deg); }
html.ff .sg-play .act:nth-child(1)::after { --b: .32; background-position: 0 0, 12% 86%; }
html.ff .sg-play .act:nth-child(2)::after { --b: .42; background-position: 0 0, 40% 86%; }
html.ff .sg-play .act:nth-child(3)::after { --b: .55; background-position: 0 0, 64% 86%; }
html.ff .sg-play .act:nth-child(4)::after { --b: .9; background-position: 0 0, 86% 86%; }
html.ff .sg-play .act::before { content: attr(data-n); position: absolute; z-index: -1; right: 26px; top: 12px; font: 900 110px/1 var(--logo); color: rgba(255, 255, 255, .13); transform: skewX(7deg); }
html.ff .sg-play .act > * { transform: skewX(7deg); }
html.ff .sg-play .act > b { font: 900 30px/1.1 var(--logo); letter-spacing: 0; color: #ffe9ad; text-shadow: 0 2px 10px #000; }
html.ff .sg-play .act > span { font-size: 16px; line-height: 1.42; color: #fff; text-shadow: 0 1px 6px #000; }
html.ff .sg-play .act:last-child > b { font-size: 46px; background: linear-gradient(180deg, #fff2d6, #ffb37a 55%, #ff6a3d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9)); }
html.ff .sg-play .note { max-width: 62ch; margin-top: 30px; font-size: 19px; line-height: 1.45; color: #e4ecf1; }

/* the camp: the frozen gate behind, snow, and a line of light with what it builds */
html.ff .frame.sg-camp { margin-top: 70px; padding: 110px var(--ffx) 96px; clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); }
html.ff .sg-campart { position: absolute; inset: 0; background: url(/img/icc-jaw.jpg) 50% 30% / cover no-repeat; filter: brightness(.62) saturate(1.1); }
html.ff .sg-campart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 13, .92) 0%, rgba(5, 8, 13, .6) 55%, rgba(5, 8, 13, .25) 100%), linear-gradient(180deg, rgba(5, 8, 13, .4), rgba(5, 8, 13, 0) 30%, rgba(5, 8, 13, 0) 50%, rgba(5, 8, 13, .85) 100%); }
html.ff .sg-camp .ffg-snow { transform: none; opacity: .6; animation: ffsnow 7s linear infinite; }
html.ff .sg-camp .ffg-snow::after { content: ""; position: absolute; inset: -340px 0 0; background-image: inherit; background-size: 337px 337px; animation: sgsnow 16s linear infinite; }
@keyframes sgsnow { to { translate: 73px 337px; } }
html.ff .sg-camp .ff-eye { color: var(--ice); }
html.ff .sg-camp .ff-eye::before { background: linear-gradient(90deg, rgba(143, 214, 255, 0), var(--ice)); box-shadow: 0 0 10px var(--ice); }
html.ff .sg-camp .dim { font-size: 19px; line-height: 1.45; color: #fff; text-shadow: 0 1px 6px #000; }
html.ff .sg-camp .track { height: 3px; margin: 56px 10px 0; border-radius: 0; background: linear-gradient(90deg, rgba(191, 232, 255, .9), rgba(191, 232, 255, .35)); box-shadow: 0 0 16px rgba(143, 214, 255, .9); }
html.ff .sg-camp .track::after { content: ""; position: absolute; top: -1px; left: 0; width: 18%; height: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); box-shadow: 0 0 18px 3px rgba(191, 232, 255, .95); animation: sgtrack 6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes sgtrack { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: 82%; opacity: 0; } }
html.ff .sg-camp .track .stop { width: 20px; height: 20px; background: #05101a; box-shadow: 0 0 0 2px #bfe8ff, 0 0 22px rgba(143, 214, 255, 1); }
html.ff .sg-camp .track .stop:last-child { background: #f2cf7a; box-shadow: 0 0 0 2px #fff7da, 0 0 30px rgba(242, 207, 122, 1); }
html.ff .sg-camp .track-labels { height: 100px; margin: 24px 10px 0; font-size: 15px; color: #fff; text-shadow: 0 1px 6px #000; }
html.ff .sg-camp .track-labels span { width: 150px; }
html.ff .sg-camp .track-labels b { font: 900 46px/1.1 var(--logo); color: #ffe9ad; }
html.ff .sg-camp .camp-list li { display: flex; align-items: baseline; gap: 12px; color: #fff; }
html.ff .sg-camp .camp-list b { min-width: 46px; font: 900 32px/1.1 var(--logo); color: #ffe9ad; }

/* the window: the command itself, large */
html.ff .frame.sg-window { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
html.ff .sg-slash { display: block; padding-bottom: .1em; font: 900 clamp(84px, 13vw, 190px)/1 var(--logo); background: linear-gradient(180deg, #fff2d6, #ffb37a 45%, #d8442a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(255, 90, 50, .55)); }
html.ff .sg-wtxt .mh { padding-bottom: 14px; }
html.ff .sg-wtxt .mh h3 { font-size: clamp(30px, 3.2vw, 46px); }
html.ff .sg-wtxt .prose p { font-size: 18px; line-height: 1.5; color: #e4ecf1; }

@media (max-width: 1240px) {
  html.ff .sg-gates { flex-direction: column; height: auto; margin: 0 calc(-1 * var(--ffx)); }
  html.ff .sg-gates .ff-gate { flex: none !important; display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 290px; transform: none; }
  html.ff .sg-gates .ff-gate::before, html.ff .sg-gates .ff-gate::after { display: none; }
  html.ff .sg-gates .ffg-bg, html.ff .sg-gates .ff-gate:hover .ffg-bg, html.ff .sg-gates .ffg-fx { inset: 0; transform: none; }
  html.ff .sg-gates .ffg-snow { top: -216px; }
  html.ff .sg-gates .ffg-txt, html.ff .sg-gates > :first-child .ffg-txt, html.ff .sg-gates > :last-child .ffg-txt { position: relative; padding: 110px var(--ffx) 26px; transform: none; }
  html.ff .sg-gates .ffg-ttl, html.ff .sg-gates .ff-gate:hover .ffg-ttl, html.ff .sg-gates a.ff-gate:focus-visible .ffg-ttl, html.ff .sg-gates:hover .ff-gate:not(:hover) .ffg-ttl, html.ff .sg-gates .open .ffg-ttl { font-size: 28px; }
  html.ff .sg-gates .ffg-num, html.ff .sg-gates > :first-child .ffg-num { left: auto; right: 18px; top: 14px; transform: none; font-size: 80px; }
  html.ff .sg-gates .ff-gate:hover .ffg-num { transform: none; }
  html.ff .sg-gates .ffg-more { max-width: 640px; font-size: 15px; }
}
@media (max-width: 1100px) {
  html.ff .sg-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  html.ff .sg-open .questlog, html.ff .sg-blade .mh, html.ff .sg-forge, html.ff .sg-blade .tt-cap, html.ff .sg-blade .lines { grid-column: 1; grid-row: auto; }
  html.ff .sg-blade .mh { padding-top: 44px; }
  html.ff .sg-forge { padding: 76px 0; }
  html.ff .frame.sg-window { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 820px) {
  html.ff section[data-view="saga"] .frame.banner { min-height: 620px; padding: 0 20px; }
  html.ff section[data-view="saga"] .banner .in { padding: 110px 0 150px; }
  html.ff section[data-view="saga"] .banner p { font-size: 18px; }
  html.ff section[data-view="saga"] .banner > .shot { background-size: cover; }
  html.ff .banner .ffs-ring { right: -260px; width: 520px; height: 520px; margin-top: -260px; opacity: .6; }
  html.ff .sg-open { margin-top: -70px; padding: 0 16px 10px; }
  html.ff .sg-ring { right: auto; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; }
  html.ff .sg-forge { padding: 44px 0; overflow: hidden; margin: 0 -16px; }
  html.ff .sg-forge .tt { max-width: calc(100vw - 32px); }
  html.ff .sg-blade .lines { grid-template-columns: minmax(0, 1fr); }
  html.ff .sg-blade .tt-cap { margin-top: 0; font-size: 17px; }
  html.ff .frame.sg-band { padding: 64px 16px 0; }
  html.ff .sg-play .acts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
  html.ff .sg-play .act, html.ff .sg-play .act:nth-child(n) { height: auto; min-height: 130px; transform: none; padding: 22px 20px; }
  html.ff .sg-play .act > *, html.ff .sg-play .act::before, html.ff .sg-play .act::after { transform: none; }
  html.ff .sg-play .act::before { font-size: 76px; right: 14px; top: 8px; }
  html.ff .sg-play .act::after { inset: 0; background-size: 100% 100%, 260% auto; }
  html.ff .sg-play .act:last-child > b { font-size: 36px; }
  html.ff .sg-play .note { font-size: 17px; }
  html.ff .frame.sg-camp { margin-top: 64px; padding: 70px 16px 70px; clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%); }
  html.ff .sg-camp .dim { font-size: 17px; }
  html.ff .sg-camp .track, html.ff .sg-camp .track-labels { display: none; }
  html.ff .sg-camp .camp-list { display: grid; margin-top: 24px; }
  html.ff .frame.sg-window { padding: 40px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ff .sg-camp .track::after, html.ff .sg-camp .ffg-snow, html.ff .sg-camp .ffg-snow::after { animation: none; }
  html.ff .sg-play .act, html.ff .sg-gates .ff-gate { transition: none; }
}

/* ---------- Progression's own page: a gate for each phase, opening the phase's own room below ---------- */
html:not(.ff) .phases .ffg-txt { display: contents; }
html:not(.ff) .phases, html:not(.ff) .ppanel { margin-bottom: 30px; }
html.ff .pg-p1 { --art: url(/img/icc-jaw.jpg); --pos: 62% 30%; --fl: hue-rotate(-48deg) saturate(1.35) brightness(1.02); --pc: #8fef9f; }
html.ff .pg-p2 { --art: url(/img/wyrmrest-temple.jpg); --pos: 50% 28%; --fl: hue-rotate(-120deg) saturate(1.1) brightness(.95); --pc: #ffc35a; }
html.ff .pg-p3 { --art: url(/img/wyrmrest-temple.jpg); --pos: 44% 30%; --fl: hue-rotate(45deg) saturate(1.25); --pc: #8fc4ff; }
html.ff .pg-p4 { --art: url(/img/icc-jaw.jpg); --pos: 30% 30%; --fl: saturate(1.15) brightness(1.05); --pc: #a6e4ff; }
html.ff .pg-p5 { --art: url(/img/wyrmrest-temple.jpg); --pos: 50% 28%; --fl: sepia(1) saturate(3) hue-rotate(-34deg) brightness(.72) contrast(1.25); --pc: #ff9d7a; }
html.ff .pg-p6 { --art: url(/img/icc-jaw.jpg); --pos: 100% 30%; --fl: hue-rotate(70deg) saturate(1.3) brightness(.95); --pc: #d7b0ff; }

/* the opening, in ice */
html.ff section[data-view="phases"] { row-gap: 0; }
html.ff section[data-view="phases"] .frame.banner { min-height: 600px; margin-bottom: 0; clip-path: none; }
html.ff section[data-view="phases"] .banner .in { max-width: 900px; padding: 120px 0 70px; align-self: center; }
html.ff section[data-view="phases"] .banner h1 { font-size: clamp(44px, 6.2vw, 90px); }
html.ff section[data-view="phases"] .banner p { font-size: 20px; line-height: 1.45; color: #fff; text-shadow: 0 2px 10px #000; }
html.ff .banner .ffg-fx { z-index: 1; transform: none; }
html.ff .banner .ffg-aurora { animation-name: pgaurora; }
html.ff .banner .ffg-snow { top: -216px; opacity: .4; animation: ffsnow 7s linear infinite; }
html.ff .banner .ffg-snow::after { content: ""; position: absolute; inset: -340px 0 0; background-image: inherit; background-size: 337px 337px; animation: sgsnow 16s linear infinite; }
@keyframes pgaurora { 0% { transform: translateX(-30%); opacity: .35; } 50% { opacity: 1; } 100% { transform: translateX(30%); opacity: .4; } }
html.ff .ffs-ring.pg-ice { filter: drop-shadow(0 0 22px rgba(143, 214, 255, .85)); }
html.ff .pg-ice .ffg-r1, html.ff .pg-ice .ffg-r2 { stroke: #bfe8ff; }
html.ff .pg-ice .ffg-r3 { stroke: #e8f7ff; }

/* the gates: each a tab, and the one picked stands open */
html.ff .phases { position: relative; z-index: 2; display: flex; height: 560px; gap: 0; margin: 0 calc(50% - 50vw - 80px) 0; }
html.ff .ph.ff-gate { appearance: none; flex: 1 1 0; height: auto; padding: 0; border: 0; border-radius: 0; background: #05080d; box-shadow: none; cursor: pointer; font: inherit; text-align: left; transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1); }
html.ff .ph.ff-gate:hover { box-shadow: none; }
html.ff .phases .ph[aria-selected="true"], html.ff .phases:hover .ph[aria-selected="true"] { flex-grow: 2.1; background: #05080d; box-shadow: none; }
html.ff .phases:hover .ph.ff-gate:hover:not([aria-selected="true"]) { flex-grow: 1.55; }
html.ff .ph:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
html.ff .phases .ph.ff-gate:first-child, html.ff .phases:hover .ph.ff-gate:first-child:not(:hover):not([aria-selected="true"]) { flex-grow: 1.7; }
html.ff .phases .ph.ff-gate:last-child, html.ff .phases:hover .ph.ff-gate:last-child:not(:hover):not([aria-selected="true"]) { flex-grow: 1.5; }
html.ff .phases .ph.ff-gate:first-child[aria-selected="true"], html.ff .phases .ph.ff-gate:last-child[aria-selected="true"] { flex-grow: 2.4; }
html.ff .phases > :first-child::before, html.ff .phases > :first-child::after { display: none; }
html.ff .ph .phi { display: none; }
html.ff .ph .ffg-bg { background-image: var(--art); background-position: var(--pos); background-repeat: no-repeat; background-size: cover; filter: var(--fl) saturate(.6) brightness(.55); }
html.ff .ph:hover .ffg-bg, html.ff .ph[aria-selected="true"] .ffg-bg { filter: var(--fl); }
html.ff .ph.now:not([aria-selected="true"]):not(:hover) .ffg-bg { filter: var(--fl) brightness(.82); }
html.ff .ph .ffg-shade { background: linear-gradient(180deg, rgba(5, 8, 13, .05) 34%, rgba(5, 8, 13, .72) 66%, rgba(5, 8, 13, .98) 100%); }
html.ff .ph .n, html.ff .ph[aria-selected="true"] .n { position: absolute; z-index: 3; left: 44px; top: 110px; transform: skewX(7deg); font-size: 0; line-height: 1; background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, .22); text-shadow: 0 2px 18px rgba(0, 0, 0, .5); pointer-events: none; transition: color .4s ease; }
html.ff .ph .n::before { content: attr(data-r); font: 900 104px/1 var(--logo); }
html.ff .ph[aria-selected="true"] .n, html.ff .ph:hover .n { color: var(--pc); text-shadow: 0 0 34px var(--pc); }
html.ff .phases > :first-child .n { left: 116px; }
html.ff .ph .ffg-txt { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 44px 36px; }
html.ff .phases > :first-child .ffg-txt { padding-left: 136px; }
html.ff .phases > :last-child .ffg-txt { padding-right: 100px; }
html.ff .ph .p { font: 700 13px/1.2 var(--body); letter-spacing: .16em; color: #c4d0d8; text-shadow: 0 1px 4px #000; }
html.ff .ph[aria-selected="true"] .p { color: var(--pc); }
html.ff .ph .r { margin: 0; padding-bottom: .08em; font: 900 clamp(16px, 1.4vw, 23px)/1.12 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .95)); transition: font-size .5s cubic-bezier(.2, .8, .2, 1); }
html.ff .ph[aria-selected="true"] .r { font-size: 40px; }
html.ff .phases > :last-child[aria-selected="true"] .r { font-size: 36px; }
html.ff .ph .when, html.ff .ph.now .when { margin: 8px 0 0; padding: 0; border: 0; gap: 4px; }
html.ff .ph .wl, html.ff .ph.now .wl { font: 700 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: #c4d0d8; text-shadow: 0 1px 4px #000; }
html.ff .ph.now .wl { color: #9fe8a9; }
html.ff .ph.next .wl { color: #ffc94a; }
html.ff .ph.past .wl { color: #9fe8a9; }
html.ff .ph .wl .dot { flex: none; width: 10px; height: 10px; background: #47d65a; box-shadow: 0 0 10px #47d65a; }
html.ff .ph .wt b { font: 600 24px/1.1 var(--body); color: #fff; text-shadow: 0 2px 10px #000; font-variant-numeric: tabular-nums; }
html.ff .ph .wt i { font: 600 13px/1 var(--body); color: #e4ecf1; }
html.ff .ph .wd { font: 400 13px/1.3 var(--body); color: #e4ecf1; text-shadow: 0 1px 4px #000; }

/* the room behind the gate: the phase's own picture, and what it brings */
html.ff .frame.ppanel.sg-band { z-index: 3; padding: 74px var(--ffx) 84px; border-top: 2px solid var(--pc); box-shadow: 0 -8px 34px -6px var(--pc); }
html.ff .pg-art { position: absolute; inset: 0; background: var(--art) var(--pos) / cover no-repeat; filter: var(--fl) brightness(.62); animation: pgart 1.2s cubic-bezier(.2, .8, .2, 1) both; }
html.ff .pg-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 13, .94) 0%, rgba(5, 8, 13, .76) 50%, rgba(5, 8, 13, .3) 100%), linear-gradient(180deg, rgba(5, 8, 13, .5), rgba(5, 8, 13, 0) 30%, rgba(5, 8, 13, 0) 60%, #05080d 100%); }
@keyframes pgart { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
html.ff .ppanel h3 { margin: 0 0 30px; padding-bottom: .08em; font: 900 clamp(34px, 4.4vw, 62px)/1.06 var(--logo); background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .8)); animation: pgrise .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pgrise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
html.ff .ppanel .facts { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
html.ff .ppanel .facts div { gap: 6px; padding: 18px 30px; background: rgba(5, 8, 13, .66); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); animation: pgrise .7s cubic-bezier(.2, .8, .2, 1) both; }
html.ff .ppanel .facts div:nth-child(2) { animation-delay: .07s; }
html.ff .ppanel .facts div:nth-child(3) { animation-delay: .14s; }
html.ff .ppanel .facts div:nth-child(4) { animation-delay: .21s; }
html.ff .ppanel .facts div:nth-child(5) { animation-delay: .28s; }
html.ff .ppanel .facts dt { font: 700 12px/1.2 var(--body); letter-spacing: .16em; color: var(--pc); }
html.ff .ppanel .facts dd { font-size: 18px; line-height: 1.35; color: #fff; }
html.ff .ppanel .note, html.ff .ppanel .dim { max-width: 68ch; margin-top: 30px; font-size: 19px; line-height: 1.5; color: #fff; text-shadow: 0 1px 6px #000; animation: pgrise .7s .3s cubic-bezier(.2, .8, .2, 1) both; }
html.ff .ppanel .dim { margin-top: 0; font-size: 22px; }

/* in the game: the shut gate, edge to edge */
html.ff .frame.pg-ingame { z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; min-height: 640px; padding: 0 var(--ffx) 70px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
html.ff .pg-ingame .mb { position: static; }
html.ff .pg-ingame .mh { z-index: 1; padding-bottom: 10px; }
html.ff .pg-ingame .thumb { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
html.ff .pg-ingame .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #05080d 0%, rgba(5, 8, 13, 0) 22%, rgba(5, 8, 13, 0) 44%, rgba(5, 8, 13, .96) 100%); }
html.ff .pg-ingame .thumb .shot { position: absolute; inset: 0; background-size: cover; background-position: 50% 42%; animation: pgdrift 22s ease-in-out infinite alternate; }
@keyframes pgdrift { from { transform: scale(1); } to { transform: scale(1.07); } }
html.ff .pg-ingame .tt-cap { position: relative; max-width: 62ch !important; margin-top: 0 !important; font-size: 19px; line-height: 1.45; color: #fff; text-shadow: 0 1px 6px #000; }
html.ff .pg-ingame .ff-eye { color: var(--ice); }
html.ff .pg-ingame .ff-eye::before { background: linear-gradient(90deg, rgba(143, 214, 255, 0), var(--ice)); box-shadow: 0 0 10px var(--ice); }

/* no room for six gates in a row: tiles, with the room right below */
@media (max-width: 1240px) {
  html.ff .phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto !important; gap: 6px; margin: -40px calc(50% - 50vw) 0 !important; }
  html.ff .ph.ff-gate { min-height: 230px; height: auto; display: flex; flex-direction: column; justify-content: flex-end; transform: none; animation: none; }
  html.ff .ph.ff-gate::before, html.ff .ph.ff-gate::after { display: none; }
  html.ff .ph .ffg-bg, html.ff .ph.ff-gate:hover .ffg-bg { inset: 0; transform: none; }
  html.ff .ph .ffg-txt, html.ff .phases > :first-child .ffg-txt, html.ff .phases > :last-child .ffg-txt { position: relative; padding: 70px 18px 20px; transform: none; }
  html.ff .ph .n, html.ff .ph[aria-selected="true"] .n, html.ff .phases > :first-child .n { left: auto; right: 14px; top: 10px; transform: none; }
  html.ff .ph .n::before { font-size: 64px; }
  html.ff .ph .r, html.ff .ph[aria-selected="true"] .r, html.ff .phases > :last-child .r, html.ff .phases > :last-child[aria-selected="true"] .r { font-size: 22px; }
  html.ff .ph[aria-selected="true"] { box-shadow: inset 0 -4px 0 var(--pc); }
  html.ff .ph .wt b { font-size: 20px; }
}
@media (max-width: 820px) {
  html.ff section[data-view="phases"] .frame.banner { min-height: 520px; padding: 0 20px; }
  html.ff section[data-view="phases"] .banner .in { padding: 110px 0 120px; }
  html.ff section[data-view="phases"] .banner p { font-size: 17px; }
  html.ff section[data-view="phases"] .banner > .shot { background-size: cover; }
  html.ff .frame.ppanel.sg-band { padding: 44px 16px 54px; }
  html.ff .ppanel .facts { grid-template-columns: minmax(0, 1fr); }
  html.ff .ppanel .facts div { padding: 14px 24px; }
  html.ff .ppanel .note { font-size: 17px; }
  html.ff .ppanel .dim { font-size: 18px; }
  html.ff .frame.pg-ingame { min-height: 520px; padding: 0 16px 56px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%); }
  html.ff .pg-ingame .thumb .shot { background-position: 80% 30%; }
  html.ff .pg-ingame .tt-cap { font-size: 17px; }
}
@media (max-width: 560px) {
  html.ff .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ff .ph.ff-gate { min-height: 190px; }
  html.ff .ph .ffg-txt, html.ff .phases > :first-child .ffg-txt, html.ff .phases > :last-child .ffg-txt { padding: 56px 12px 14px; }
  html.ff .ph .r, html.ff .ph[aria-selected="true"] .r, html.ff .phases > :last-child .r, html.ff .phases > :last-child[aria-selected="true"] .r { font-size: 18px; }
  html.ff .ph .n::before { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ff .pg-art, html.ff .ppanel h3, html.ff .ppanel .facts div, html.ff .ppanel .note, html.ff .ppanel .dim, html.ff .pg-ingame .thumb .shot, html.ff .banner .ffg-aurora, html.ff .banner .ffg-snow, html.ff .banner .ffg-snow::after { animation: none; }
  html.ff .ph.ff-gate, html.ff .ph .r { transition: none; }
}

/* ---------- the cookie notice, in a corner, over nothing that matters ---------- */
.ck { position: fixed; z-index: 65; left: 16px; bottom: 16px; width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; padding: 18px 22px 20px; color: #e4ecf1; background: #0c131c; border-top: 2px solid #f2cf7a; box-shadow: 0 18px 50px rgba(0, 0, 0, .75); animation: ckrise .6s .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ckrise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }
.ck-h { margin: 0 0 4px; font: 800 20px/1.2 var(--logo, var(--friz)); color: #ffe9ad; }
.ck-t { margin: 0; font-size: 15px; line-height: 1.45; }
.ck-more { display: grid; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ck-more[hidden] { display: none; }
.ck-more dt { font: 700 12px/1.3 var(--body); letter-spacing: .08em; color: #f2cf7a; }
.ck-more dd { margin: 0; font-size: 14px; line-height: 1.4; }
.ck-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.ck-why, .ck-again { appearance: none; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-why:hover, .ck-again:hover { color: #f2cf7a; }
.ck-why:focus-visible, .ck-again:focus-visible, .ck .wowbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ck-why[hidden], .ck-again[hidden] { display: none; }
@media (max-width: 760px) { .ck { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 190px); } }
@media (prefers-reduced-motion: reduce) { .ck { animation: none; } }

/* ---------- the Shop: the week's banner turning in 3D, the deals as gates, and each item's own window ---------- */
#shop { display: grid; gap: 22px; min-width: 0; }
.shop-eye { margin: 0 0 8px; font: 700 13px/1.3 var(--caps, inherit); letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.shop-hero { position: relative; display: flex; align-items: center; min-height: 460px; overflow: hidden; padding: 40px 34px; border: 1px solid var(--rule); background: #05080d; }
.shop-hero-art { position: absolute; inset: 0; background: url(/img/wyrmrest-temple.jpg) 50% 28% / cover no-repeat; filter: brightness(.55) saturate(1.1); }
.shop-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 13, .95) 0%, rgba(5, 8, 13, .7) 42%, rgba(5, 8, 13, .05) 75%), linear-gradient(0deg, #05080d 0%, rgba(5, 8, 13, 0) 30%); }
.shop-rings { position: absolute; top: 50%; right: 5%; width: 520px; height: 520px; margin-top: -260px; pointer-events: none; }
.shop-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(143, 214, 255, .55); box-shadow: 0 0 26px rgba(143, 214, 255, .4), inset 0 0 26px rgba(143, 214, 255, .22); animation: shopring 9s ease-in-out infinite; }
.shop-rings i:nth-child(2) { inset: 40px; border-color: rgba(143, 214, 255, .35); border-style: dashed; animation: shopspin 70s linear infinite; }
.shop-rings i:nth-child(3) { inset: 100px; border-color: rgba(255, 220, 150, .3); animation-delay: -4s; }
@keyframes shopring { 50% { transform: scale(1.04); opacity: .6; } }
@keyframes shopspin { to { transform: rotate(360deg); } }
.shop-hero-model { position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; width: 62%; display: grid; place-items: center; }
.shop-hero-model canvas, .shop-sheet-model canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; outline: 0; cursor: grab; touch-action: pan-y; }
.shop-hero-model canvas:active, .shop-sheet-model canvas:active { cursor: grabbing; }
.shop-hero-txt { position: relative; z-index: 3; max-width: 560px; pointer-events: none; }
.shop-hero-txt > * { pointer-events: auto; }
.shop-hero h1 { margin: 0 0 12px; font: 400 44px/1.08 var(--friz, inherit); color: var(--title); text-shadow: 0 2px 8px #000; }
.shop-blurb { margin: 0 0 18px; font-size: 18px; line-height: 1.4; color: #eef3f6; text-shadow: 0 1px 6px #000; }
.shop-hero-buy { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.shop-price { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; color: #fff; }
.shop-price b { font-weight: 700; }
.shop-price s { color: var(--dim); font-size: .82em; }
.shop-price small { color: var(--dim); font-size: 13px; }
.shop-price.huge b { font: 800 46px/1 var(--friz, inherit); color: #fff; text-shadow: 0 0 22px rgba(143, 214, 255, .55); }
.shop-price.huge s { font-size: 22px; }
.shop-seal { display: inline-block; padding: 7px 14px; font: 800 20px/1 var(--friz, inherit); color: #2a0606; background: linear-gradient(180deg, #ffb347, #ff6a2b); transform: skewX(-9deg); box-shadow: 0 0 24px rgba(255, 106, 43, .55); }
.shop-seal.small { padding: 3px 8px; font-size: 13px; box-shadow: none; }
.shop-ic { display: block; width: 56px; height: 56px; flex: none; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(255, 255, 255, .16); }
.shop-ic.none { background: #16222c; }
.shop-ic.big { width: 128px; height: 128px; border-radius: 12px; box-shadow: 0 0 0 2px #000, 0 0 60px rgba(143, 214, 255, .55); }
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; padding: 18px 26px; border: 1px solid var(--rule); background: var(--well-2); }
.shop-marks { display: grid; gap: 4px; }
.shop-marks small { font: 700 12px/1 var(--caps, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.shop-marks b { font: 800 38px/1 var(--friz, inherit); color: #fff; }
.shop-bar-mid { display: grid; gap: 3px; flex: 1 1 260px; }
.shop-bar-mid b { color: var(--title); font-size: 17px; }
.shop-bar-mid span { color: var(--dim); }
.shop-realms { margin: 0; }
.shop-down { margin: 0; padding: 12px 18px; color: #ffd9c2; background: rgba(120, 40, 20, .35); border: 1px solid rgba(255, 130, 80, .5); }
.shop-sec { margin-top: 26px; }
.shop-sec h2 { margin: 0; font: 400 30px/1.15 var(--friz, inherit); color: var(--title); }
.shop-deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.shop-deal { position: relative; appearance: none; cursor: pointer; padding: 14px; min-height: 180px; text-align: left; color: inherit; border: 1px solid var(--rule); background: var(--well); font: inherit; }
.shop-deal .shop-seal { position: absolute; z-index: 5; top: 12px; right: 12px; }
.shop-deal .ffg-txt { display: grid; gap: 8px; }
.shop-deal .ffg-ttl { font: 400 19px/1.15 var(--friz, inherit); color: var(--title); }
.shop-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.shop-tools .census-pick { margin: 0; }
.shop-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.shop-find input[type=search] { width: 220px; max-width: 100%; padding: 10px 12px; color: var(--text); background: #0a1219; border: 1px solid var(--rule); font: inherit; }
.shop-find .check { margin: 0; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.shop-card { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; text-align: left; color: inherit; font: inherit; border: 1px solid var(--rule); background: var(--well); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.shop-card:hover, .shop-card:focus-visible { transform: translateY(-2px); border-color: var(--ice); box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(143, 214, 255, .16); }
.shop-card.own { opacity: .62; }
.shop-card-txt { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.shop-card-txt b { font-weight: 600; color: #fff; }
.shop-card-txt small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--dim); font-size: 13px; line-height: 1.3; }
.shop-card-buy { display: grid; justify-items: end; gap: 5px; flex: none; }
.shop-card-buy em { font-style: normal; color: var(--scourge); }
.shop-earn { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.shop-earn > div { padding: 20px; border: 1px solid var(--rule); background: var(--well); }
.shop-earn b { display: block; font: 800 44px/1 var(--friz, inherit); color: var(--ice); }
.shop-earn h3 { margin: 8px 0 6px; font-size: 18px; color: #fff; }
.shop-earn p { margin: 0; color: var(--dim); line-height: 1.4; }
.shop-log summary { cursor: pointer; padding: 14px 20px; color: var(--title); font-size: 17px; }
.shop-log ul { margin: 0; padding: 0; list-style: none; }
.shop-log li { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0; border-top: 1px solid var(--rule); }
.shop-log li > :first-child { flex: 1 1 200px; color: #fff; }
.shop-log time { color: var(--dim); }

/* an item's own window */
html.shop-locked { overflow: hidden; }
.shop-sheet { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 8, .84); animation: shopfade .25s ease both; }
@keyframes shopfade { from { opacity: 0; } }
.shop-sheet-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); width: min(1120px, 100%); max-height: 100%; min-height: min(620px, 100%); overflow: auto; background: #070c12; border: 1px solid rgba(143, 214, 255, .35); box-shadow: 0 30px 90px #000, 0 0 60px rgba(143, 214, 255, .12); animation: shoprise .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes shoprise { from { transform: translateY(26px) scale(.98); } }
.shop-x { appearance: none; position: absolute; z-index: 6; top: 10px; right: 10px; width: 42px; height: 42px; cursor: pointer; color: #fff; font-size: 30px; line-height: 1; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .22); }
.shop-x:hover { background: rgba(143, 214, 255, .25); }
.shop-sheet-stage { position: relative; min-height: 420px; overflow: hidden; background: #05080d; }
.shop-sheet-stage .shop-hero-art::after { background: radial-gradient(ellipse at 50% 50%, rgba(5, 8, 13, 0) 30%, rgba(5, 8, 13, .9) 95%); }
.shop-sheet-stage .shop-rings { top: 50%; left: 50%; right: auto; width: 460px; height: 460px; margin: -230px 0 0 -230px; }
.shop-sheet-model { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; }
.shop-turn { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: rgba(255, 255, 255, .72); font-size: 14px; pointer-events: none; }
.shop-sheet-side { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 56px 34px 34px; min-width: 0; }
.shop-sheet-side h2 { margin: 0 0 10px; font: 400 32px/1.12 var(--friz, inherit); color: var(--title); }
.shop-scope, .shop-have { margin: 0 0 8px; color: var(--text); line-height: 1.4; }
.shop-have { color: var(--dim); }
.shop-no { margin: 10px 0; padding: 10px 14px; color: #ffd9c2; background: rgba(120, 40, 20, .35); border-left: 3px solid #ff8250; line-height: 1.4; }
.shop-owned { margin: 10px 0 0; font-size: 18px; color: var(--scourge); }
.shop-confirm { margin: 6px 0 10px; font-size: 24px; color: #fff; }
.shop-for { display: grid; gap: 6px; margin: 10px 0 14px; }
.shop-for select { padding: 11px; color: var(--text); background: #0a1219; border: 1px solid var(--rule); font: inherit; }
.shop-sheet-side .wowbtn { margin-top: 10px; }
.shop-sheet-side .wowbtn[disabled] { opacity: .45; cursor: not-allowed; }
.shop-wait { position: relative; display: grid; place-items: center; height: 190px; margin-top: 10px; }
.shop-wait i { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--ice); animation: shopspin 1.3s linear infinite; }
.shop-wait i:nth-child(2) { width: 88px; height: 88px; border-top-color: #ffb347; animation-direction: reverse; animation-duration: 1s; }
.shop-wait i:nth-child(3) { width: 150px; height: 150px; border-top-color: rgba(255, 255, 255, .3); animation-duration: 2.4s; }
.shop-wait p { position: absolute; bottom: -8px; margin: 0; color: var(--text); }
.shop-done { position: relative; }
.shop-burst { position: absolute; top: 50%; left: 50%; pointer-events: none; }
.shop-burst i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 12px #ffb347; opacity: 0; animation: shopburst 1.1s ease-out both; }
.shop-burst i:nth-child(3n) { background: var(--ice); box-shadow: 0 0 12px var(--ice); }
@keyframes shopburst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.4); } }

/* in Frostforged: the page's whole width, with the gates, the type and the light of the front page */
html.ff section[data-view="shop"] { row-gap: 0; }
html.ff #shop { --ffx: max(20px, calc(50vw - 660px)); gap: 0; margin: 0 calc(50% - 50vw); padding-bottom: 90px; background: #05080d; }
html.ff .shop-hero { min-height: min(820px, 92vh); padding: 120px var(--ffx) 80px; border: 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
html.ff .shop-hero-art { animation: shopdrift 26s ease-in-out infinite alternate; }
@keyframes shopdrift { from { transform: scale(1.04) translateX(-1.2%); } to { transform: scale(1.1) translateX(1.2%); } }
html.ff .shop-rings { right: calc(var(--ffx) + 2%); width: 720px; height: 720px; margin-top: -360px; }
html.ff .shop-hero-model { right: calc(var(--ffx) - 60px); width: 64%; }
html.ff .shop-sheet-stage .shop-rings { top: 50%; left: 50%; right: auto; width: 460px; height: 460px; margin: -230px 0 0 -230px; }
html.ff .shop-hero-txt { max-width: 720px; }
html.ff .shop-eye { display: flex; align-items: center; gap: 14px; font: 700 15px/1.3 var(--body); letter-spacing: .2em; }
html.ff .shop-eye::before { content: ""; width: 44px; height: 2px; flex: none; background: linear-gradient(90deg, rgba(143, 214, 255, 0), var(--ice)); box-shadow: 0 0 10px var(--ice); }
html.ff .shop-hero h1 { font: 900 clamp(42px, 5.8vw, 86px)/1.03 var(--logo); padding-bottom: .08em; background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .8)); }
html.ff .shop-hero .shop-blurb { font-size: 21px; }
html.ff .shop-price.huge b { font: 900 62px/1 var(--logo); }
html.ff .shop-seal { font: 900 26px/1 var(--logo); padding: 10px 18px; }
html.ff .shop-seal.small { font-size: 14px; padding: 4px 9px; }
html.ff .shop-bar { position: relative; z-index: 4; margin: -40px var(--ffx) 0; padding: 24px 34px; border: 0; transform: skewX(-7deg); background: linear-gradient(90deg, #0d2231, #0a141d 60%, #162d3e); box-shadow: 0 18px 50px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(143, 214, 255, .22); }
html.ff .shop-bar > * { transform: skewX(7deg); }
html.ff .shop-marks b { font: 900 54px/1 var(--logo); background: linear-gradient(180deg, #fff, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .shop-down { margin: 22px var(--ffx) 0; }
html.ff .shop-sec { margin: 84px var(--ffx) 30px; }
html.ff .shop-sec h2 { font: 900 clamp(36px, 4.4vw, 62px)/1.05 var(--logo); padding-bottom: .08em; background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .shop-deals { display: flex; height: 460px; gap: 0; margin: 0 var(--ffx); padding: 0 26px; }
html.ff .shop-deal { padding: 0; min-height: 0; border: 0; background: #05080d; }
html.ff .shop-deal .ffg-bg { background-image: url(/img/icc-jaw.jpg); filter: var(--fl, none) brightness(.72); }
html.ff .shop-deal.c-mounts { --fl: hue-rotate(-30deg) saturate(1.3); }
html.ff .shop-deal.c-pets { --fl: hue-rotate(-90deg) saturate(1.2); }
html.ff .shop-deal.c-looks { --fl: hue-rotate(60deg) saturate(1.3); }
html.ff .shop-deal.c-toys { --fl: sepia(1) saturate(3) hue-rotate(-30deg) brightness(.8); }
html.ff .shop-deal.c-services { --fl: hue-rotate(160deg) saturate(1.15); }
html.ff .shop-deal .shop-seal { top: 18px; right: 34px; transform: skewX(0); }
html.ff .shop-deal .ffg-txt { padding: 0 10px 28px 34px; gap: 10px; }
html.ff .shop-deal .shop-ic { width: 72px; height: 72px; box-shadow: 0 0 0 2px #000, 0 0 26px rgba(255, 255, 255, .35); }
html.ff .shop-deal .ffg-ttl { font-size: clamp(16px, 1.35vw, 24px); line-height: 1.12; overflow-wrap: break-word; }
html.ff .shop-deal .shop-price { font-size: 22px; }
html.ff .shop-tools, html.ff .shop-grid, html.ff .shop-earn, html.ff .shop-log { margin-left: var(--ffx); margin-right: var(--ffx); }
html.ff .shop-tools { margin-bottom: 22px; }
html.ff .shop-card { padding: 14px 16px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .045); }
html.ff .shop-card:hover, html.ff .shop-card:focus-visible { background: rgba(143, 214, 255, .12); box-shadow: inset 3px 0 0 var(--ice), 0 10px 30px rgba(0, 0, 0, .55); border: 0; }
html.ff .shop-earn > div { padding: 30px 28px; border: 0; transform: skewX(-7deg); background: linear-gradient(180deg, #0d1c28, #080f16); box-shadow: inset 0 0 0 1px rgba(143, 214, 255, .14); }
html.ff .shop-earn > div > * { transform: skewX(7deg); }
html.ff .shop-earn b { font: 900 64px/1 var(--logo); background: linear-gradient(180deg, #fff, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ff .shop-log { margin-top: 50px; }
html.ff .shop-sheet-in { border: 0; box-shadow: 0 30px 90px #000, inset 0 0 0 1px rgba(143, 214, 255, .3); }
html.ff .shop-sheet-side h2 { font: 900 clamp(30px, 3vw, 44px)/1.06 var(--logo); padding-bottom: .08em; background: linear-gradient(180deg, #fff7da, #f2cf7a 55%, #c48a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1000px) {
  html.ff .shop-deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 10px; padding: 0; }
  html.ff .shop-deal { height: 280px; transform: none; }
  html.ff .shop-deal .ffg-bg, html.ff .shop-deal .ffg-txt { transform: none; inset: 0; }
  html.ff .shop-deal .ffg-txt { inset: auto 0 0 0; padding: 0 14px 18px; }
  html.ff .shop-deal .shop-seal { right: 12px; }
}
@media (max-width: 760px) {
  .shop-hero, html.ff .shop-hero { display: block; min-height: 0; padding: 92px 16px 36px; clip-path: none; }
  .shop-hero-model, html.ff .shop-hero-model { position: relative; right: auto; width: 100%; height: 300px; }
  .shop-rings, html.ff .shop-rings { top: 200px; right: 50%; width: 320px; height: 320px; margin: -160px -160px 0 0; }
  .shop-hero h1 { font-size: 34px; }
  html.ff .shop-bar { margin: 18px 16px 0; padding: 18px 20px; transform: none; }
  html.ff .shop-bar > * { transform: none; }
  html.ff .shop-sec { margin: 54px 16px 20px; }
  html.ff .shop-tools, html.ff .shop-grid, html.ff .shop-earn, html.ff .shop-log, html.ff .shop-deals { margin-left: 16px; margin-right: 16px; }
  .shop-card-txt small { display: none; }
  .shop-find, .shop-find input[type=search] { width: 100%; }
  .shop-sheet { padding: 0; place-items: stretch; }
  .shop-sheet-in { display: block; width: 100%; height: 100%; max-height: none; }
  .shop-sheet-stage { height: 44vh; min-height: 260px; }
  .shop-sheet-stage .shop-rings, html.ff .shop-sheet-stage .shop-rings { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .shop-sheet-side { padding: 22px 16px 34px; }
  html.ff .shop-earn > div, html.ff .shop-earn > div > * { transform: none; }
}
html.calm .shop-rings i, html.calm .shop-hero-art, html.calm .shop-wait i, html.calm .shop-burst i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .shop-rings i, .shop-hero-art, html.ff .shop-hero-art, .shop-wait i, .shop-burst i, .shop-sheet, .shop-sheet-in { animation: none; }
  .shop-card { transition: none; }
}

/* on a phone, the small links and buttons are at least 32px tall, so a thumb finds them */
@media (max-width: 820px) {
  .crumbs a, .langs button, .ck-again, .ck-why, .ract > a, .ff-morelink { min-height: 32px; display: inline-flex; align-items: center; }
  nav.micro a { min-height: 32px; align-content: center; }
  .forged a { min-height: 32px; align-items: center; }
}

/* a link whose text looks like another address says where it really goes */
.lhost { opacity: .75; font-size: .9em; }