/* --------------------------------------------------------------------------
   Typefaces — bundled, never fetched. Fraunces (display) and Nunito (text),
   both under the SIL Open Font License (css/fonts/OFL-*.txt), as variable
   woff2 files split into latin and latin-extended so a name with an accent
   still sets correctly. font-display: swap keeps the first paint on the
   system stacks below rather than waiting.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/fraunces-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/fraunces-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   Aethermoor — the interface of an online world (3.0)

   The painted location art fills the screen and everything else sits on it
   as a game HUD: a player frame and target frame at the top left, a minimap
   and the quest tracker at the right, the chat log and the cast bar at the
   bottom, an action bar of slots under them and the XP bar along the foot.
   Every other screen opens as a framed window over the world. The look is
   dark iron and old gold on near-black, with parchment where something is
   written down, and item slots coloured by quality.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #07060a;
  --ink: #0f0d15;
  --ink-2: #16131e;
  --ink-3: #1f1b29;
  --panel: rgba(15, 13, 21, 0.9);
  --panel-2: rgba(22, 19, 30, 0.9);
  --line: #3d3324;
  --line-2: #5a4a2a;
  --gold: #d9b45a;
  --gold-2: #f3d68c;
  --gold-3: #8f7334;
  --gold-soft: rgba(217, 180, 90, 0.14);
  --text: #efe6d2;
  --text-2: #bbb09a;
  --text-3: #7f7560;
  --accent: #d9b45a;
  --accent-2: #b08f3c;
  --accent-soft: rgba(217, 180, 90, 0.14);
  --on-accent: #1d1608;
  --arcane: #a78bfa;
  --arcane-soft: rgba(167, 139, 250, 0.14);
  --good: #4ad66d;
  --good-soft: rgba(74, 214, 109, 0.14);
  --bad: #e5533d;
  --bad-soft: rgba(229, 83, 61, 0.14);
  --warn: #f0b429;
  --hp: #3fbf4f;
  --hp-2: #1f7a2c;
  --enemy: #d03c2f;
  --xp: #8a4ddb;
  --xp-2: #5b2fa3;
  --rested: #3a73d6;
  --cast: #e8a93c;
  --night: #8f9bff;
  --parch: #e6d7b0;
  --parch-2: #cdb98a;
  --ink-on-parch: #3a2c14;
  --q1: #d8d2c4;
  --q2: #3fd159;
  --q3: #3b8fe8;
  --q4: #b35ff5;
  --q5: #ff8a1f;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.45);
  --radius: 6px;
  --radius-sm: 4px;
  --speed: 0.18s;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hud-pad: 14px;
  --actionbar-h: 92px;
  /* Ornamental corners, drawn once as data URIs so a frame needs no markup. */
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 31V12Q3 3 12 3h19' fill='none' stroke='%23d9b45a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 31V15q0-8 8-8h16' fill='none' stroke='%238f7334' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3d68c'/%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%235a4418'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(90 16 16)'%3E%3Cpath d='M3 31V12Q3 3 12 3h19' fill='none' stroke='%23d9b45a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 31V15q0-8 8-8h16' fill='none' stroke='%238f7334' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3d68c'/%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%235a4418'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(180 16 16)'%3E%3Cpath d='M3 31V12Q3 3 12 3h19' fill='none' stroke='%23d9b45a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 31V15q0-8 8-8h16' fill='none' stroke='%238f7334' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3d68c'/%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%235a4418'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(270 16 16)'%3E%3Cpath d='M3 31V12Q3 3 12 3h19' fill='none' stroke='%23d9b45a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 31V15q0-8 8-8h16' fill='none' stroke='%238f7334' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='3' fill='%23f3d68c'/%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%235a4418'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --parch-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)' opacity='0.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
body.no-chrome { overflow: auto; }
input, textarea, select, .selectable, .selectable * { user-select: text; -webkit-user-select: text; }

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: 0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 0;
  color: var(--gold-2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 18px rgba(217, 180, 90, 0.12);
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

svg.ic { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: -0.28em; }
svg.ic-sm { width: 16px; height: 16px; }
svg.ic-lg { width: 26px; height: 26px; }
svg.ic-xl { width: 34px; height: 34px; }

/* Small caps labels: the voice the whole interface uses for a heading of a few words. */
.caps, .tiny-caps {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-3);
}

/* --------------------------------------------------------------------------
   Loading screen
   -------------------------------------------------------------------------- */
.loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 50% at 50% 40%, #1a1522, #07060a 70%);
  transition: opacity 0.35s ease;
}
.loading-screen.fade { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-logo { color: var(--gold); animation: pulse 1.6s ease-in-out infinite; margin: 0 auto 14px; filter: drop-shadow(0 0 12px rgba(217, 180, 90, 0.5)); }
.loading-name { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 18px; color: var(--gold-2); }
.loading-bar { width: 180px; height: 5px; border-radius: 3px; margin: 0 auto; background: #1d1a27; overflow: hidden; position: relative; border: 1px solid #000; }
.loading-bar span { position: absolute; inset: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); animation: slide 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } }
@keyframes slide { 0% { left: -40%; } 100% { left: 100%; } }

/* --------------------------------------------------------------------------
   The ornate frame
   One class for every surface that is a piece of the interface rather than a
   row in a list: the windows, the HUD panels, the modals. Iron ground, a
   bronze rule, a gold hairline inside it, and a flourish at each corner.
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 26, 38, 0.94), rgba(14, 12, 19, 0.96));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(243, 214, 140, 0.12),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.85),
    var(--shadow);
}
.frame::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none; z-index: 3;
  background:
    var(--corner-tl) left top / 26px 26px no-repeat,
    var(--corner-tr) right top / 26px 26px no-repeat,
    var(--corner-br) right bottom / 26px 26px no-repeat,
    var(--corner-bl) left bottom / 26px 26px no-repeat;
  opacity: 0.95;
}
.frame-plain::after { display: none; }

/* A rule with a gem in the middle, for dividing a frame's head from its body. */
.rule-gem { position: relative; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3) 20%, var(--gold) 50%, var(--gold-3) 80%, transparent); margin: 6px 0; }
.rule-gem::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--gold-2); box-shadow: 0 0 8px var(--gold); }

/* --------------------------------------------------------------------------
   App chrome
   -------------------------------------------------------------------------- */
/* iOS home-screen apps. Two things, both from iOS 26/27 and the translucent status bar index.php asks for:
   1. WebKit bug 301108 — the viewport comes up shorter than the screen by the status bar's height, so every fixed layer
      stops short and a dead band is left at the foot. A document at least that much taller makes WebKit size the viewport
      to the screen (capped at the screen so it never scrolls). The same floor the 3D game uses.
   2. The bar's glass blur reaches a little below the safe-area inset it reports, so anything set hard against the inset is
      caught in it. --safe-top is the inset plus a little clearance in a home-screen app; everything pinned to the top of
      the screen (the HUD frames, windows, toasts, the front door's bar) reads it instead of the raw inset. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
@media (display-mode: standalone) {
  :root { --safe-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}
#app { position: fixed; inset: 0; }
body.no-chrome #app { position: static; min-height: 100vh; min-height: 100dvh; }

/* The world ------------------------------------------------------------- */
.cover {
  position: fixed; inset: 0; z-index: 0;
  isolation: isolate; overflow: hidden;
  background: #07060a;
}
body.no-chrome .cover#stage { display: none; }
.cover-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  opacity: 0;
  transition: opacity 0.6s ease, filter 0.9s ease;
  animation: cover-drift 70s ease-in-out infinite alternate;
}
.cover-img.ready { opacity: 1; }
@keyframes cover-drift {
  from { transform: scale(1.04) translate3d(-0.6%, 0.4%, 0); }
  to   { transform: scale(1.1) translate3d(0.8%, -0.6%, 0); }
}
/* Day phase: the same art at 04:00 and 14:00 should not feel the same. */
.cover-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background 0.9s ease; }
[data-phase="day"]    > .cover-sky { background: linear-gradient(180deg, rgba(255, 248, 214, 0.08), rgba(126, 184, 255, 0.05)); }
[data-phase="dawn"]   > .cover-sky { background: linear-gradient(180deg, rgba(255, 148, 88, 0.28), rgba(255, 206, 142, 0.12) 46%, rgba(96, 114, 196, 0.18)); }
[data-phase="dusk"]   > .cover-sky { background: linear-gradient(180deg, rgba(255, 108, 58, 0.28), rgba(178, 78, 148, 0.2) 46%, rgba(38, 38, 112, 0.36)); }
[data-phase="night"]  > .cover-sky { background: linear-gradient(180deg, rgba(20, 30, 92, 0.42), rgba(8, 10, 42, 0.56)); }
[data-phase="indoor"] > .cover-sky { background: linear-gradient(180deg, rgba(64, 32, 10, 0.16), rgba(22, 11, 4, 0.3)); }
[data-phase="portrait"] > .cover-sky { background: none; }
[data-phase="dawn"]  > .cover-img { filter: brightness(0.93) saturate(0.95); }
[data-phase="dusk"]  > .cover-img { filter: brightness(0.83) saturate(1.06); }
[data-phase="night"] > .cover-img { filter: brightness(0.6) saturate(0.62) contrast(1.05); }

/* The living world (js/world.js): a canvas on the solid ground that fades in once its first frame is drawn.
   #stage[data-world] is loading (the graphic shows), live (the canvas shows) or off (the ground alone). */
.world-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.cover.live .world-canvas { opacity: 1; }
.cover.live .world-canvas.dim { opacity: 0; transition-duration: 0.3s; }
.stage-loading {
  position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
#stage[data-world="loading"] .stage-loading { opacity: 1; }
#stage[data-world="off"] .stage-loading { opacity: 1; }
#stage[data-world="off"] .stage-loading .loading-bar, #stage[data-world="off"] .loading-logo { display: none; }
.stage-loading-text { margin-top: 14px; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: rgba(239, 230, 210, 0.7); }
.cover.live .cover-veil {
  background:
    linear-gradient(180deg, rgba(5, 4, 10, 0.42) 0%, rgba(5, 4, 10, 0.02) 24%, rgba(5, 4, 10, 0.04) 62%, rgba(5, 4, 10, 0.7) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 4, 10, 0.4) 100%);
}

/* Readability scrim + vignette, above the weather so the HUD always wins. */
.cover-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 4, 10, 0.5) 0%, rgba(5, 4, 10, 0.05) 26%, rgba(5, 4, 10, 0.1) 60%, rgba(5, 4, 10, 0.78) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(5, 4, 10, 0.55) 100%);
}
body.win-open .cover-veil { background: linear-gradient(180deg, rgba(5, 4, 10, 0.5), rgba(5, 4, 10, 0.5)), radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(5, 4, 10, 0.55) 100%); }

/* The zone name, announced when the place changes — then it fades. */
.zone-text {
  position: absolute; left: 50%; top: 20%; z-index: 4; transform: translateX(-50%);
  text-align: center; pointer-events: none; opacity: 0;
}
.zone-text.show { animation: zone-in 5.5s ease forwards; }
.zone-text .zone-name {
  font-family: var(--font-display); font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-2);
  text-shadow: 0 2px 2px #000, 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(217, 180, 90, 0.35);
}
.zone-text .zone-sub { margin-top: 6px; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(239, 230, 210, 0.85); text-shadow: 0 1px 2px #000, 0 0 12px #000; }
@keyframes zone-in { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Floating combat text: yields and kills rising out of the world. */
.floaters { position: absolute; left: 50%; top: 52%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.floater {
  position: absolute; left: 0; top: 0; white-space: nowrap; transform: translate(-50%, 0);
  font: 800 18px/1 var(--font-body); color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 2px 8px rgba(0, 0, 0, 0.9);
  animation: float-up 2.2s ease-out forwards;
}
.floater.f-loot { color: #ffe9a8; }
.floater.f-xp { color: #d7b3ff; }
.floater.f-gold { color: var(--gold-2); }
.floater.f-kill { color: #ff9f8a; font-size: 20px; }
.floater.f-hit { color: #fff; }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1); } }

/* Weather -------------------------------------------------------------- */
/* Layer geometry note: the falling/drifting layers loop by translating exactly
   one background period, so the animation is seamless with no visible reset. */
.cover-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cover-fx i { position: absolute; display: block; }
.cover[data-weather="clear"] .cover-fx,
.cover[data-weather="none"] .cover-fx { display: none; }

.cover[data-weather="rain"] .cover-fx i:first-child,
.cover[data-weather="storm"] .cover-fx i:first-child {
  inset: -35% -35%;
  background: repeating-linear-gradient(104deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, 0.26) 10px 11px, rgba(255, 255, 255, 0) 11px 24px);
  animation: rain-near 0.58s linear infinite;
}
.cover[data-weather="rain"] .cover-fx i:last-child,
.cover[data-weather="storm"] .cover-fx i:last-child {
  inset: -35% -35%;
  background: repeating-linear-gradient(101deg, rgba(255, 255, 255, 0) 0 16px, rgba(255, 255, 255, 0.13) 16px 17px, rgba(255, 255, 255, 0) 17px 38px);
  animation: rain-far 1.55s linear infinite;
}
@keyframes rain-near { to { transform: translate3d(0, 99.2px, 0); } }
@keyframes rain-far  { to { transform: translate3d(0, 199.2px, 0); } }
.cover[data-weather="storm"] .cover-fx i:first-child { animation-duration: 0.42s; }
.cover[data-weather="storm"] .cover-fx i:last-child { animation-duration: 1.1s; }
.cover[data-weather="storm"] .cover-fx { animation: lightning 8s linear infinite; }
@keyframes lightning {
  0%, 90.5% { background-color: rgba(222, 234, 255, 0); }
  91%   { background-color: rgba(222, 234, 255, 0.34); }
  92%   { background-color: rgba(222, 234, 255, 0); }
  93.5% { background-color: rgba(222, 234, 255, 0.22); }
  94.5%, 100% { background-color: rgba(222, 234, 255, 0); }
}
.cover[data-weather="snow"] .cover-fx i:first-child,
.cover[data-weather="blizzard"] .cover-fx i:first-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1.6px, transparent 2.4px);
  background-size: 80px 80px;
  animation: snow-near 11s linear infinite;
}
.cover[data-weather="snow"] .cover-fx i:last-child,
.cover[data-weather="blizzard"] .cover-fx i:last-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 1.8px);
  background-size: 40px 40px;
  animation: snow-far 7.5s linear infinite;
}
@keyframes snow-near { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(16px, 80px, 0); } 100% { transform: translate3d(0, 160px, 0); } }
@keyframes snow-far { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-12px, 40px, 0); } 100% { transform: translate3d(0, 80px, 0); } }
.cover[data-weather="blizzard"] .cover-fx i:first-child { animation: blizzard-near 2.5s linear infinite; }
.cover[data-weather="blizzard"] .cover-fx i:last-child { animation: blizzard-far 1.8s linear infinite; }
@keyframes blizzard-near { to { transform: translate3d(-160px, 160px, 0); } }
@keyframes blizzard-far  { to { transform: translate3d(-80px, 80px, 0); } }
.cover[data-weather="blizzard"] .cover-fx { background: linear-gradient(180deg, rgba(226, 238, 255, 0.22), rgba(226, 238, 255, 0.07)); }
.cover[data-weather="fog"] .cover-fx i,
.cover[data-weather="manamist"] .cover-fx i { inset: -25%; background-repeat: repeat-x; filter: blur(14px); }
.cover[data-weather="fog"] .cover-fx i:first-child,
.cover[data-weather="manamist"] .cover-fx i:first-child {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
  background-size: 520px 100%;
  animation: mist-right 19s linear infinite;
}
.cover[data-weather="fog"] .cover-fx i:last-child,
.cover[data-weather="manamist"] .cover-fx i:last-child {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, transparent 100%);
  background-size: 340px 100%;
  animation: mist-left 27s linear infinite;
}
@keyframes mist-right { to { background-position: 520px 0; } }
@keyframes mist-left  { to { background-position: -340px 0; } }
.cover[data-weather="manamist"] .cover-fx i:first-child { background-image: linear-gradient(90deg, transparent 0%, rgba(186, 158, 255, 0.34) 30%, rgba(150, 210, 255, 0.4) 50%, rgba(186, 158, 255, 0.34) 70%, transparent 100%); }
.cover[data-weather="manamist"] .cover-fx i:last-child { background-image: linear-gradient(90deg, transparent 0%, rgba(206, 176, 255, 0.26) 45%, transparent 100%); }
.cover[data-weather="wind"] .cover-fx i { inset: -25% -20%; background-repeat: repeat-x; filter: blur(6px); }
.cover[data-weather="wind"] .cover-fx i:first-child {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 42%, transparent 66%);
  background-size: 300px 100%;
  animation: wind-gust 2.7s linear infinite;
}
.cover[data-weather="wind"] .cover-fx i:last-child {
  inset: 18% -20% 34%;
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 78%);
  background-size: 210px 100%;
  animation: wind-gust-fast 1.7s linear infinite;
}
@keyframes wind-gust { to { background-position: 300px 0; } }
@keyframes wind-gust-fast { to { background-position: 210px 0; } }
.cover[data-weather="ashfall"] .cover-fx i:first-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(38, 30, 26, 0.75) 0 1.5px, transparent 2.2px);
  background-size: 90px 90px;
  animation: ash-near 15s linear infinite;
}
.cover[data-weather="ashfall"] .cover-fx i:last-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 172, 92, 0.38) 0 1px, transparent 1.7px);
  background-size: 60px 60px;
  animation: ash-far 9.5s linear infinite;
}
@keyframes ash-near { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(18px, 90px, 0); } 100% { transform: translate3d(0, 180px, 0); } }
@keyframes ash-far { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14px, 60px, 0); } 100% { transform: translate3d(0, 120px, 0); } }
.cover[data-weather="ashfall"] .cover-fx { background: linear-gradient(180deg, rgba(92, 62, 42, 0.22), rgba(40, 26, 18, 0.3)); }
.cover[data-weather="emberwind"] .cover-fx i:first-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 170, 74, 0.9) 0 1.5px, transparent 2.3px);
  background-size: 70px 70px;
  animation: ember-near 6.5s linear infinite;
}
.cover[data-weather="emberwind"] .cover-fx i:last-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 112, 42, 0.6) 0 1px, transparent 1.6px);
  background-size: 44px 44px;
  animation: ember-far 4.4s linear infinite;
}
@keyframes ember-near { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22px, -70px, 0); } 100% { transform: translate3d(0, -140px, 0); } }
@keyframes ember-far { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-16px, -44px, 0); } 100% { transform: translate3d(0, -88px, 0); } }
.cover[data-weather="emberwind"] .cover-fx { background: radial-gradient(130% 85% at 50% 112%, rgba(255, 122, 42, 0.3), transparent 62%); }
.cover[data-weather="aurora"] .cover-fx i:first-child {
  inset: -12% -25% 42%;
  background-image: linear-gradient(90deg, transparent 0%, rgba(78, 255, 190, 0.34) 24%, transparent 44%, rgba(152, 122, 255, 0.3) 70%, transparent 100%);
  background-size: 620px 100%; background-repeat: repeat-x;
  filter: blur(17px);
  animation: aurora-drift 17s linear infinite;
}
.cover[data-weather="aurora"] .cover-fx i:last-child {
  inset: -12% -25% 54%;
  background-image: linear-gradient(90deg, transparent 0%, rgba(122, 220, 255, 0.26) 40%, transparent 82%);
  background-size: 430px 100%; background-repeat: repeat-x;
  filter: blur(22px);
  animation: aurora-drift-slow 26s linear infinite;
}
@keyframes aurora-drift { to { background-position: 620px 0; } }
@keyframes aurora-drift-slow { to { background-position: -430px 0; } }
.cover[data-weather="cloudy"] .cover-fx { background: linear-gradient(180deg, rgba(188, 194, 214, 0.2), rgba(118, 124, 150, 0.1)); }
.cover[data-weather="cloudy"] .cover-fx i { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cover-img, .cover-fx, .cover-fx i { animation: none !important; }
  .cover-img { transform: scale(1.02); }
}

/* --------------------------------------------------------------------------
   The HUD
   Fixed panels at the edges of the world. Each is its own frame and updates
   in place on every state tick; none of them is rebuilt by navigation.
   -------------------------------------------------------------------------- */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud > * { pointer-events: none; }
.hud .frame, .hud button, .hud .hud-chip, .hud .chat, .hud .cast, .hud .pf, .hud .tf, .hud .mm { pointer-events: auto; }
.hud-tl { position: absolute; left: var(--hud-pad); top: calc(var(--hud-pad) + var(--safe-top)); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hud-tr { position: absolute; right: var(--hud-pad); top: calc(var(--hud-pad) + var(--safe-top)); bottom: calc(var(--actionbar-h) + 12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.hud-bl { position: absolute; left: var(--hud-pad); bottom: calc(var(--actionbar-h) + 4px + env(safe-area-inset-bottom)); width: 330px; }
body:not(.log-open) .hud-bl { display: none; }
/* The log's button, under the player frame (3.7): the chat frame opens from it and is folded away otherwise. */
.log-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 4px; color: var(--text-2); font: 700 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.log-btn svg { width: 14px; height: 14px; color: var(--gold-3); }
.log-btn:hover, .log-btn.is-open { color: var(--gold-2); }
.log-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-accent); font-size: 10.5px; font-weight: 800; }
.log-btn.has-new svg { color: var(--gold); }
@media (max-width: 1480px) {
  .hud-bl { bottom: calc(var(--actionbar-h) + 92px + env(safe-area-inset-bottom)); width: 300px; }
  .chat { height: 150px; }
}
.hud-bc { position: absolute; left: 50%; bottom: calc(var(--actionbar-h) + 8px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
html.ipad-windowed .hud-tl, html.ipad-windowed .hud-tr { top: calc(var(--hud-pad) + 36px + var(--safe-top)); }

/* Player frame ---------------------------------------------------------- */
.pf { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px 10px 10px; width: 320px; cursor: pointer; }
.pf-portrait { position: relative; flex: 0 0 auto; }
.pf .pfp { --pfp-size: 68px; }
.pf-level {
  position: absolute; left: -6px; bottom: -4px;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #2a2433, #0d0b12);
  border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px #000, 0 2px 6px #000;
  font: 800 12px/1 var(--font-body); color: var(--gold-2); font-variant-numeric: tabular-nums;
}
.pf-body { flex: 1; min-width: 0; }
.pf-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pf-name .nm { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.pf-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-sub .title-badge { margin-left: 2px; }
.pf-bars { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.pf-bar-row { position: relative; }
.pf-bar-row .bar { height: 14px; }
.pf-bar-row .bar-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px;
  font: 800 10.5px/1 var(--font-body); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; letter-spacing: 0.02em; pointer-events: none;
  white-space: nowrap; overflow: hidden;
}
.pf-bar-row .bar-label > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-bar-row .bar-label > span:last-child { flex: 0 0 auto; }
.pf-bar-row .bar-label .num { font-variant-numeric: tabular-nums; }
.pf-gold { margin-top: 7px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-2); }
.pf-gold .gold-text { font-size: 12.5px; }
.pf-gold svg { color: var(--gold); }

/* Buffs under the player frame: potions, rested time, events here. */
.buffs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.buff {
  position: relative; width: 34px; height: 34px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #3a3246, #15131d);
  border: 1px solid var(--line-2); box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
  color: var(--gold-2); cursor: default; pointer-events: auto;
}
.buff svg { width: 18px; height: 18px; }
.buff .buff-t { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font: 800 9.5px/1 var(--font-body); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.buff.buff-rested { border-color: var(--rested); color: #b9ccff; }
.buff.buff-event { border-color: var(--arcane); color: #d7c8ff; }
.buffs:not(:empty) { margin-bottom: 12px; }

/* Target frame ---------------------------------------------------------- */
.tf { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; width: 300px; cursor: pointer; }
.tf.is-boss { width: 320px; }
.tf-portrait { flex: 0 0 auto; }
.tf-body { flex: 1; min-width: 0; }
.tf-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #ffd7cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.tf-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }
.tf .pf-bar-row { margin-top: 6px; }
.tf-beat { margin-top: 5px; height: 3px; border-radius: 2px; background: rgba(229, 83, 61, 0.22); overflow: hidden; }
.tf-beat i { display: block; height: 100%; width: 0; background: var(--enemy); animation: fx-beat 2.4s linear infinite; }
@keyframes fx-beat { from { width: 0; } to { width: 100%; } }

/* Minimap ----------------------------------------------------------------- */
.mm { position: relative; width: 170px; height: 170px; border-radius: 50%; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 2px #0a0806, 0 0 0 4px var(--gold-3), 0 0 0 5px var(--gold), 0 0 0 7px #0a0806, 0 10px 30px rgba(0, 0, 0, 0.7);
  background: #0c1118; overflow: hidden; }
.mm svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mm::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(243, 214, 140, 0.25); }
.mm-you { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 2px #000, 0 0 10px var(--gold); pointer-events: none; }
.mm-you::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--gold); animation: mm-pulse 2.4s ease-out infinite; }
@keyframes mm-pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.mm-n { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); font: 800 10px/1 var(--font-display); color: var(--gold-2); text-shadow: 0 1px 2px #000; pointer-events: none; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 11px; border-radius: 4px;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, 0.5);
  font-size: 12px; font-weight: 700; color: var(--text);
}
.hud-chip svg { color: var(--gold); width: 15px; height: 15px; }
.hud-chip .num { font-variant-numeric: tabular-nums; }
.hud-chip-zone { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--gold-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.hud-chip-boss { cursor: pointer; gap: 8px; }
.hud-chip-boss .countdown { font-size: 13px; font-weight: 800; color: #fff; }
.hud-chip-boss.is-open { border-color: var(--good); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(74, 214, 109, 0.35); animation: fx-pulse-good 2.4s ease-in-out infinite; }
.hud-chip-boss.is-queued { border-color: var(--bad); }
.hud-chip-boss .pfp-medal { --medal-size: 24px; }
@keyframes fx-pulse-good { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 0 0 0 rgba(74, 214, 109, 0.45); } 60% { box-shadow: 0 0 0 1px #000, 0 0 0 9px rgba(74, 214, 109, 0); } }

/* Quest tracker ----------------------------------------------------------- */
/* Bounties on the tracker: one line each, the claim button where the count was */
.trk-b { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--text-2); cursor: pointer; min-width: 0; line-height: 1.3; }
.trk-b .b-art { display: inline-flex; flex: 0 0 auto; }
.trk-b .b-art > svg { width: 14px; height: 14px; color: var(--gold-3); }
.trk-b .b-art .slot-inline, .trk-b .b-art .pfp-medal { --slot-size: 20px; --medal-size: 20px; }
.trk-b .b-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-b .obj-count { font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; font-weight: 700; flex: 0 0 auto; }
.trk-b.is-done { color: var(--good); }
.trk-b .trk-wk { flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px; line-height: 14px; }
.trk-claim.btn { min-height: 22px; padding: 0 8px; font-size: 11px; border-radius: 3px; flex: 0 0 auto; animation: fx-pulse-good 2.4s ease-in-out infinite; }

/* Chat / log ---------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; height: 182px; font-size: 12.5px; }
.chat-tabs { display: flex; align-items: center; gap: 2px; padding: 5px 8px 0; }
.chat-tab { padding: 4px 10px; border-radius: 4px 4px 0 0; font: 800 10.5px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); border: 1px solid transparent; border-bottom: 0; }
.chat-tab.active { color: var(--gold); background: rgba(217, 180, 90, 0.08); border-color: rgba(217, 180, 90, 0.25); }
.chat-tab-toggle { margin-left: auto; color: var(--text-3); width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; }
.chat-tab-toggle svg { width: 14px; height: 14px; transition: transform var(--speed) ease; }
.chat-body { flex: 1; overflow-y: auto; padding: 6px 10px 8px; border-top: 1px solid rgba(217, 180, 90, 0.18); scrollbar-width: thin; line-height: 1.4; }
.chat-line { padding: 1px 0; color: #e6ddc8; text-shadow: 0 1px 1px #000; }
.chat-line .when { color: var(--text-3); font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.chat-line.c-combat { color: #f3b7a4; }
.chat-line.c-quest, .chat-line.c-daily, .chat-line.c-bounty { color: #ffd766; }
.chat-line.c-craft, .chat-line.c-shop { color: #cfe2b9; }
.chat-line.c-achievement, .chat-line.c-title, .chat-line.c-mastery { color: var(--gold-2); }
.chat-line.c-travel, .chat-line.c-adventure { color: #b9d8ff; }
.chat-line.c-talent { color: #d7c8ff; }
.chat-line.c-info { color: var(--text-2); }
.chat-line.c-system { color: #ffc96b; font-style: italic; }

/* The cast bar: what the character is doing, above the action bar ---------- */
.cast { width: 100%; padding: 8px 10px 9px; display: flex; align-items: center; gap: 12px; }
.cast-art { flex: 0 0 auto; }
.cast-body { flex: 1; min-width: 0; }
.cast-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cast-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.cast-sub { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; font-variant-numeric: tabular-nums; }
.cast .pf-bar-row { margin-top: 6px; }
.cast .pf-bar-row .bar { height: 15px; }
.cast-eta { font-variant-numeric: tabular-nums; }
.cast-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cast-actions .btn { min-height: 34px; padding: 0 11px; font-size: 12.5px; }
.cast-actions .btn-icon { width: 34px; padding: 0; }
.cast-idle { justify-content: center; padding: 9px 14px; gap: 10px; cursor: pointer; }
.cast-idle .cast-title { font-size: 14px; }
.cast-idle .cast-sub { margin-left: 0; }
.cast-mastery { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cast-mastery .bar { flex: 1; height: 4px; }
.cast-mastery .mastery-pip { font-size: 10px; padding: 0 6px; }
.cast-mastery .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plan { width: 100%; padding: 8px 10px 10px; font-size: 12.5px; }
.plan-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; border-bottom: 1px solid rgba(217, 180, 90, 0.18); margin-bottom: 4px; }
.plan-head .caps { flex: 1; color: var(--gold); }
.plan-head .tiny { font-variant-numeric: tabular-nums; }
.plan-head .btn-icon { width: 26px; min-height: 26px; }
.plan .queue-row { padding: 5px 0; }
.plan .queue-row .btn-icon { width: 26px; min-height: 26px; border-radius: 4px; }
.plan .queue-row .btn-icon svg { width: 13px; height: 13px; }
.plan .queue-art { width: 26px; height: 26px; }
.plan .queue-name { font-size: 12.5px; }

/* Action bar --------------------------------------------------------------- */
.actionbar {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px 8px;
  max-width: calc(100vw - 20px);
}
.ab-group { display: flex; gap: 4px; align-items: flex-end; }
.ab-sep { width: 1px; height: 40px; margin: 0 4px 6px; background: linear-gradient(180deg, transparent, var(--gold-3), transparent); }
.ab-slot {
  position: relative; width: 50px; height: 50px; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 30%, #2d2838, #110f17 72%);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.08), inset 0 -8px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.6);
  color: #d8cdb2; transition: transform 0.12s ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
}
.ab-slot svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px #000); }
.ab-slot .ab-key { position: absolute; left: 4px; top: 2px; font: 800 9.5px/1 var(--font-body); color: var(--text-3); text-shadow: 0 1px 1px #000; }
.ab-slot .ab-label { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font: 700 9.5px/1 var(--font-body); color: var(--text-2); text-shadow: 0 1px 2px #000; white-space: nowrap; letter-spacing: 0.02em; opacity: 0; transition: opacity var(--speed) ease; }
.ab-slot:hover .ab-label, .ab-slot.active .ab-label { opacity: 1; }
.ab-slot:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.18), 0 0 0 1px #000, 0 0 16px rgba(217, 180, 90, 0.35); }
.ab-slot.active { border-color: var(--gold); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.3), inset 0 0 14px rgba(217, 180, 90, 0.25), 0 0 0 1px #000, 0 0 16px rgba(217, 180, 90, 0.4); }
.ab-slot.has-dot::after { content: ""; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 8px var(--gold); }
.ab-slot.ab-local { width: 44px; height: 44px; color: var(--gold); }
.ab-slot.ab-local svg { width: 22px; height: 22px; }
.ab-slot.ab-glow { border-color: var(--gold); color: var(--gold-2); animation: ab-glow 2s ease-in-out infinite; }
@keyframes ab-glow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.2), 0 0 0 1px #000, 0 0 10px rgba(217, 180, 90, 0.3); } 50% { box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.5), 0 0 0 1px #000, 0 0 24px rgba(217, 180, 90, 0.75); } }
.ab-slot.ab-boss { color: #ff9f8a; }
.ab-slot[disabled] { opacity: 0.4; pointer-events: none; }
.ab-slot .pfp-medal { --medal-size: 30px; }
.ab-menu { display: none; }

/* XP bar along the foot ----------------------------------------------------- */
.xpbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; height: 9px;
  background: #0a0810; border-top: 1px solid #2a2338; cursor: pointer;
}
.xpbar .xpb-rested { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(58, 115, 214, 0.45); }
.xpbar .xpb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #b58cf0, var(--xp) 50%, var(--xp-2)); box-shadow: 0 0 10px rgba(138, 77, 219, 0.6); transition: width 0.4s ease; }
.xpbar .xpb-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0, 0, 0, 0.6) calc(5% - 1px) 5%); pointer-events: none; }
.xpbar .xpb-label { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; padding: 3px 9px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line-2); font: 700 11px/1.3 var(--font-body); color: var(--text); white-space: nowrap; opacity: 0; transition: opacity var(--speed) ease; pointer-events: none; }
.xpbar:hover .xpb-label { opacity: 1; }
.xpbar.xpb-mastery .xpb-fill { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)); box-shadow: 0 0 10px rgba(217, 180, 90, 0.6); }

/* --------------------------------------------------------------------------
   Windows
   Every screen but Home is a framed window over the world. The body scrolls
   inside the frame; the world and the HUD stay where they are.
   -------------------------------------------------------------------------- */
.main { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
body.no-chrome .main { position: static; pointer-events: auto; }
.win {
  position: absolute; z-index: 7; pointer-events: auto;
  top: calc(16px + var(--safe-top));
  /* Clears the cast bar, which stays in view while a window is open. */
  bottom: calc(var(--actionbar-h) + 82px + env(safe-area-inset-bottom));
  left: clamp(360px, calc(50vw - 470px), 50vw);
  width: min(940px, calc(100vw - 376px));
  display: flex; flex-direction: column;
  animation: winin 0.22s ease;
}
.win[hidden] { display: none; }
@keyframes winin { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.win-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.win-head { position: relative; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 12px 22px; border-bottom: 1px solid var(--line-2); overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.win-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3) 25%, var(--gold) 50%, var(--gold-3) 75%, transparent); }
.win-banner { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 35%; opacity: 0; transition: opacity 0.4s ease; }
.win-banner.has-img { opacity: 1; }
.win-banner.live { background-position: center 50%; }
.win-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 12, 19, 0.96) 0%, rgba(14, 12, 19, 0.75) 45%, rgba(14, 12, 19, 0.35) 100%), linear-gradient(180deg, rgba(14, 12, 19, 0.1), rgba(14, 12, 19, 0.85)); }
.win-head.has-banner { min-height: 118px; align-items: flex-end; }
.win-titles { position: relative; z-index: 1; flex: 1; min-width: 0; }
.win-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
.win-title { font-size: 26px; line-height: 1.1; }
.win-sub { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--text-2); max-width: 70ch; text-shadow: 0 1px 2px #000; }
.win-close {
  position: relative; z-index: 2; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: -4px -6px 0 0;
  background: radial-gradient(circle at 40% 35%, #4a1f17, #1d0b08); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, 0 2px 6px #000;
  color: var(--gold-2);
}
.win-close:hover { border-color: var(--gold-2); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(217, 180, 90, 0.5); }
.win-close svg { width: 16px; height: 16px; }
.win-strip { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 22px; background: rgba(0, 0, 0, 0.28); border-bottom: 1px solid var(--line); }
.win-strip:empty { display: none; }
.win-strip .hud-name { font-weight: 800; font-size: 14px; color: var(--text); }
.win-strip .hud-sub { font-size: 11.5px; color: var(--text-2); }
.win-strip .hud-gold { color: var(--gold-2); font-weight: 800; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.win-strip .hud-gold svg { color: var(--gold); }
.win-strip .avatar { width: 38px; height: 38px; }
.win-strip .cover-chip { margin: 0; }
.win-body {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 18px 22px 26px; scrollbar-width: thin;
  --view-pad-x: 22px;
}
body.no-chrome .win { position: static; width: auto; left: auto; top: auto; bottom: auto; animation: none; display: block; }
body.no-chrome .win-frame { display: block; background: none; border: 0; box-shadow: none; }
body.no-chrome .win-frame::after { display: none; }
body.no-chrome .win-head, body.no-chrome .win-strip { display: none; }
body.no-chrome .win-body { overflow: visible; padding: 0; }
.view-inner { max-width: 1060px; margin: 0 auto; }

@media (max-width: 1640px) {
}
@media (max-width: 1480px) {
  body.win-open .hud-bl { display: none; }
}
body.win-open #hud-plan { display: none; }
body.win-open .zone-text { display: none; }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.page-title { font-size: 26px; margin-bottom: 4px; }
.page-sub { color: var(--text-2); font-size: 14px; margin-bottom: 22px; }
.section-title { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; margin: 24px 0 10px; display: flex; align-items: center; gap: 9px; color: var(--gold-2); padding-bottom: 5px; border-bottom: 1px solid rgba(217, 180, 90, 0.18); }
.section-title svg { color: var(--gold); width: 19px; height: 19px; }
.section-title .tiny { font-family: var(--font-body); }
.muted { color: var(--text-2); }
.tiny { font-size: 12px; color: var(--text-3); }
.muted-2 { color: var(--text-3); }

/* --------------------------------------------------------------------------
   Cards, rows, grids
   -------------------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(34, 29, 42, 0.72), rgba(18, 16, 24, 0.78));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease, transform var(--speed) ease;
}
.card.clickable { cursor: pointer; text-align: left; }
@media (hover: hover) {
  .card.clickable:hover { border-color: var(--gold-3); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.08), 0 0 14px rgba(217, 180, 90, 0.15); }
}
.card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-3), 0 0 14px rgba(217, 180, 90, 0.2); }
.card.locked { opacity: 0.55; }
.card.is-live, .card.is-active { border-color: var(--gold-3); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.08), 0 0 14px rgba(217, 180, 90, 0.12); }

/* Parchment: anything written down — quests, lore. Dark ink on cream. */
.parch {
  background: var(--parch-tex), linear-gradient(180deg, #ead9b4, #d9c597);
  color: var(--ink-on-parch);
  border: 1px solid #8a6f3d;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 230, 0.5), inset 0 0 40px rgba(120, 85, 30, 0.22), 0 4px 14px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 14px 18px;
}
.parch h1, .parch h2, .parch h3, .parch .font-display, .parch .q-name { color: #5a3a10; text-shadow: none; }
.parch .muted, .parch p { color: #4a3a1e; }
.parch .tiny { color: #6b5636; }
.parch .objective { color: #3a2c14; }
.parch .objective.done { color: #2c6e2f; }
.parch .objective .obj-count { color: #6b5636; }
.parch .badge { background: rgba(90, 58, 16, 0.12); color: #5a3a10; border-color: rgba(90, 58, 16, 0.3); }
.parch .badge-good { color: #2c6e2f; background: rgba(44, 110, 47, 0.12); border-color: rgba(44, 110, 47, 0.3); }
.parch .badge-season { color: #6b5636; }
.parch .faction-badge { background: color-mix(in srgb, var(--faction) 16%, transparent); }
.parch .bar { background: rgba(90, 58, 16, 0.22); border-color: rgba(90, 58, 16, 0.35); }
.parch .btn { color: #f5e8c8; }
.parch .gate-label { color: #3a2c14; }
.parch .reward-chip { background: rgba(90, 58, 16, 0.1); border-color: rgba(90, 58, 16, 0.25); color: #3a2c14; }
.parch .reward-chip svg { color: #8a6424; }
.parch .quest-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(90, 58, 16, 0.45), transparent); margin: 10px 0; }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid-fill-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3.stack-1, .grid-2.stack-1 { grid-template-columns: 1fr; }
}
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   Buttons — iron with a gold edge; the one that matters is red leather.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 16px; border-radius: 5px;
  background: linear-gradient(180deg, #3a3346, #1e1a27);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  font-weight: 700; font-size: 13.5px; color: var(--text); letter-spacing: 0.01em;
  text-shadow: 0 1px 1px #000;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow var(--speed) ease, border-color var(--speed) ease, opacity var(--speed);
}
.btn svg { color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
@media (hover: hover) { .btn:hover { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 12px rgba(217, 180, 90, 0.25); } }
.btn-primary {
  background: linear-gradient(180deg, #b63d25, #6e1d12);
  border-color: var(--gold); color: #ffe9bf;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.25), inset 0 0 0 1px rgba(60, 12, 6, 0.6), 0 0 14px rgba(217, 180, 90, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.btn-primary svg { color: #ffe9bf; }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.1); } }
.btn-danger { background: linear-gradient(180deg, #4a1a14, #26100b); color: #ff9d8c; border-color: #7a3a2a; }
.btn-danger svg { color: #ff9d8c; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 4px; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-confirmed { border-color: var(--good) !important; color: var(--good) !important; }
.btn-glass { background: rgba(10, 8, 14, 0.5); color: #fff; border: 1px solid rgba(243, 214, 140, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-icon { width: 30px; min-height: 30px; padding: 0; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:disabled { opacity: 0.3; }
@media (hover: hover) { .btn-icon-danger:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); } }
.btn-queue { width: 34px; padding: 0; flex: 0 0 auto; }
.btn-queue svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-2); letter-spacing: 0.02em; }
.field input, .field select, .field textarea, .input {
  font: inherit; color: var(--text);
  background: #0b0a10;
  border: 1px solid var(--line-2);
  border-radius: 4px; padding: 10px 12px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--gold-soft); }
.field input.invalid { border-color: var(--bad); }
.field .hint { font-size: 12px; color: var(--text-3); }
.field .error { font-size: 12.5px; color: var(--bad); font-weight: 600; }
select { background: #0b0a10; color: var(--text); border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 10px; font: inherit; }
.qty-row { display: flex; gap: 8px; align-items: center; }
.qty-row input[type="range"] { flex: 1; accent-color: var(--gold); }
.qty-row .qty-num { min-width: 64px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-2); }
.pref-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pref-switch input { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.pref-switch span { font-size: 13px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Bars, badges, chips
   -------------------------------------------------------------------------- */
.bar { height: 9px; border-radius: 3px; background: #0a0810; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; position: relative; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)); transition: width 0.25s linear; position: relative; }
.bar-fill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); }
.bar-hp .bar-fill { background: linear-gradient(180deg, #7ee889, var(--hp) 50%, var(--hp-2)); }
.bar-hp.is-low .bar-fill { background: linear-gradient(180deg, #f7a28f, var(--enemy) 50%, #7a1d14); }
.bar-enemy .bar-fill { background: linear-gradient(180deg, #ff8a7a, var(--enemy) 50%, #7a1d14); }
.bar-xp .bar-fill { background: linear-gradient(180deg, #c7a6ff, var(--xp) 50%, var(--xp-2)); }
.bar-cast .bar-fill { background: linear-gradient(180deg, #ffd98a, var(--cast) 50%, #a4651a); }
.bar-mastery .bar-fill { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)); }
.bar-rested .bar-fill { background: linear-gradient(180deg, #9cbcff, var(--rested) 50%, #1f4a9e); }
.bar-xp { height: 7px; }
.bar-lg { height: 13px; border-radius: 4px; }
.bar-anim .bar-fill { transition: none; }
.bar-anim { position: relative; overflow: hidden; }
.bar-anim::before { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); animation: fx-sheen 2.4s linear infinite; pointer-events: none; }
@keyframes fx-sheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }
@media (prefers-reduced-motion: reduce) { .bar-anim::before { display: none; } }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(217, 180, 90, 0.1); color: var(--gold); border: 1px solid rgba(217, 180, 90, 0.3);
  white-space: nowrap;
}
.badge-good { background: var(--good-soft); color: var(--good); border-color: rgba(74, 214, 109, 0.35); }
.badge-bad { background: var(--bad-soft); color: #ff8f7c; border-color: rgba(229, 83, 61, 0.4); }
.badge-gold { background: rgba(217, 180, 90, 0.16); color: var(--gold-2); border-color: rgba(217, 180, 90, 0.5); }
.badge-night { background: rgba(100, 110, 220, 0.16); color: var(--night); border-color: rgba(143, 155, 255, 0.35); }
.badge-plain { background: rgba(255, 255, 255, 0.05); color: var(--text-2); border-color: var(--line); }
.badge-npc { background: transparent; color: var(--text-3); border: 1px dashed var(--line-2); }
.badge-npc-sm { font-size: 9.5px; padding: 1px 6px; }
.badge-season { background: transparent; color: var(--text-3); border-color: var(--line); }
.badge svg { width: 12px; height: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 4px;
  background: linear-gradient(180deg, #2a2534, #17141e); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  transition: all var(--speed) ease; cursor: pointer;
}
.chip svg { color: var(--gold); width: 15px; height: 15px; }
.chip.active { border-color: var(--gold); color: var(--gold-2); background: linear-gradient(180deg, #3a3144, #221c2a); box-shadow: 0 0 10px rgba(217, 180, 90, 0.2); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-dim { opacity: 0.6; }
.chip .slot { --slot: 22px; margin: -3px 0; }
.reward-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text); }
.reward-chip svg { width: 13px; height: 13px; color: var(--gold); }

.lvl-pip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 7px; border-radius: 4px;
  background: linear-gradient(180deg, #2d2738, #15121c); border: 1px solid var(--line-2); color: var(--gold-2);
  font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000;
}
.lvl-pip.lvl-mastery { border-color: var(--gold); box-shadow: 0 0 8px rgba(217, 180, 90, 0.35); }

/* --------------------------------------------------------------------------
   Item slots and portraits
   A slot is a bevelled square coloured by what sits in it (the item's own
   palette) and rimmed by its quality. Portraits are round and ringed in gold.
   -------------------------------------------------------------------------- */
.slot {
  --slot: 44px;
  position: relative; flex: 0 0 auto;
  width: var(--slot); height: var(--slot); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 30%, var(--sl-b, #4a4458), var(--sl-c, #17151e) 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -8px 12px rgba(0, 0, 0, 0.5), inset 0 6px 10px rgba(255, 255, 255, 0.05), 0 0 0 1px #000, 0 0 0 2px var(--q, #4a3f2a), 0 2px 6px rgba(0, 0, 0, 0.6);
  color: var(--sl-a, #e8dcc2);
}
.slot > svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.slot .qty { position: absolute; right: 3px; bottom: 1px; font: 800 11px/1.2 var(--font-body); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 5px #000; font-variant-numeric: tabular-nums; }
.slot-sm { --slot: 30px; }
.slot-sm .qty { font-size: 9.5px; right: 2px; bottom: 0; }
.slot-lg { --slot: 60px; border-radius: 6px; }
.slot-xl { --slot: 78px; border-radius: 7px; }
.slot.q1 { --q: #5a5447; } .slot.q2 { --q: var(--q2); } .slot.q3 { --q: var(--q3); } .slot.q4 { --q: var(--q4); } .slot.q5 { --q: var(--q5); }
.slot.q4 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -8px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px #000, 0 0 0 2px var(--q), 0 0 12px rgba(179, 95, 245, 0.35); }
.slot.q5 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -8px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px #000, 0 0 0 2px var(--q), 0 0 16px rgba(255, 138, 31, 0.45); }
.slot.is-empty { background: radial-gradient(circle at 40% 35%, #221e2b, #0f0d14 78%); color: var(--text-3); border: 1px dashed var(--line-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.slot.is-empty > svg { opacity: 0.4; }
.qn { font-weight: 700; }
.qn.q1 { color: var(--q1); } .qn.q2 { color: var(--q2); } .qn.q3 { color: var(--q3); } .qn.q4 { color: var(--q4); } .qn.q5 { color: var(--q5); }
.parch .qn.q1 { color: #3a2c14; }

/* Legacy aliases: the old square icon box is a slot now. */
.item-icon { --slot: 44px; }
.item-icon-lg { --slot: 60px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a3246, #15131d); color: var(--gold-2); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3), 0 2px 8px rgba(0, 0, 0, 0.6); }
.avatar svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px #000); }

.item-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 6px 9px; border-radius: 5px;
  background: linear-gradient(180deg, rgba(34, 29, 42, 0.6), rgba(18, 16, 24, 0.7)); border: 1px solid var(--line);
  cursor: pointer; text-align: center; position: relative;
  transition: border-color var(--speed) ease, transform 0.15s ease, box-shadow var(--speed) ease;
}
.item-tile .iname { font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-tile .iname.qn.q1 { color: var(--text-2); }
@media (hover: hover) { .item-tile:hover { border-color: var(--gold-3); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); } }
.item-tile.locked { opacity: 0.4; }

/* Round creature / boss portrait: the icon in a dark medallion. */
.pfp-medal {
  --medal-size: 44px;
  position: relative; flex: 0 0 auto; width: var(--medal-size); height: var(--medal-size); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%, var(--sl-b, #4a4458), var(--sl-c, #17151e) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -6px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px #000, 0 0 0 2px var(--gold-3), 0 2px 8px rgba(0, 0, 0, 0.7);
  color: var(--sl-a, #e8dcc2);
}
.pfp-medal > svg { width: 56%; height: 56%; filter: drop-shadow(0 1px 1px #000); }
.pfp-medal.is-boss { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -6px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px #000, 0 0 0 2px var(--enemy), 0 0 14px rgba(229, 83, 61, 0.45); }
.pfp-medal.is-elite { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -6px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 12px rgba(217, 180, 90, 0.45); }
.pfp-medal-lg { --medal-size: 64px; }
.pfp-medal-xl { --medal-size: 84px; }
.pfp-medal-sm { --medal-size: 30px; }

/* --------------------------------------------------------------------------
   Toasts, the level-up fanfare
   -------------------------------------------------------------------------- */
.toasts { position: fixed; z-index: 300; top: calc(14px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 28px)); }
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: 0 0 0 1px #000, var(--shadow-soft);
  padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--text); text-shadow: 0 1px 1px #000;
  max-width: 100%;
  animation: toastin 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast svg { color: var(--gold); }
.toast.t-bad svg { color: var(--bad); }
.toast.t-good svg { color: var(--good); }
.toast.t-gold svg { color: var(--gold-2); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all 0.3s ease; }
@keyframes toastin { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: none; } }

.fanfare { position: fixed; left: 50%; top: 40%; z-index: 310; transform: translateX(-50%); text-align: center; pointer-events: none; animation: fanfare 3.8s ease forwards; }
.fanfare-k { font: 800 12px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000, 0 0 12px rgba(217, 180, 90, 0.8); }
.fanfare-t { margin-top: 6px; font-family: var(--font-display); font-size: clamp(30px, 5vw, 56px); font-weight: 600; color: var(--gold-2); text-shadow: 0 2px 2px #000, 0 0 30px rgba(217, 180, 90, 0.7), 0 0 60px rgba(217, 180, 90, 0.4); }
.fanfare-s { margin-top: 6px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000, 0 0 10px #000; }
.fanfare::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(217, 180, 90, 0.35), transparent); z-index: -1; animation: fanfare-glow 3.8s ease forwards; }
@keyframes fanfare { 0% { opacity: 0; transform: translateX(-50%) scale(0.7); } 10% { opacity: 1; transform: translateX(-50%) scale(1.08); } 16% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
@keyframes fanfare-glow { 0% { transform: translate(-50%, -50%) scale(0.4); } 15% { transform: translate(-50%, -50%) scale(1.3); } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

/* --------------------------------------------------------------------------
   Modals & sheets
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 4, 10, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: fadein 0.2s ease;
}
.modal {
  width: 100%; max-width: 480px; max-height: 86vh; max-height: 86dvh;
  overflow-y: auto; padding: 20px 22px 22px;
  animation: modalin 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  scrollbar-width: thin;
}
.modal-wide { max-width: 640px; }
.modal h2 { font-size: 21px; margin-bottom: 4px; }
.modal .modal-sub { color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { border-radius: 8px 8px 0 0; max-height: 88vh; max-height: 88dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); animation: sheetin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  .modal.frame::after { display: none; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalin { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetin { from { transform: translateY(40%); } to { transform: none; } }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; padding: 0; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1; padding: 9px 12px 8px; white-space: nowrap; font-weight: 800; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--speed) ease; border-radius: 3px 3px 0 0; }
.tab.active { color: var(--gold-2); border-bottom-color: var(--gold); background: linear-gradient(180deg, transparent, rgba(217, 180, 90, 0.1)); }
@media (hover: hover) { .tab:hover { color: var(--text); } }

/* --------------------------------------------------------------------------
   Lists / log
   -------------------------------------------------------------------------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.log-feed { display: flex; flex-direction: column; }
.log-row { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.log-row:last-child { border-bottom: 0; }
.log-row .when { color: var(--text-3); font-size: 11.5px; white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.log-row svg { color: var(--gold-3); margin-top: 1px; }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
.stat-tile { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
.stat-tile .k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.stat-tile .v { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--gold-2); }

/* --------------------------------------------------------------------------
   World map
   -------------------------------------------------------------------------- */
.worldmap-wrap { border-radius: 4px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), 0 0 0 1px #000, var(--shadow-soft); background: #071119; }
.worldmap-wrap svg { display: block; width: 100%; height: auto; }
.map-grid line { stroke: #7fd4e8; stroke-opacity: 0.045; stroke-width: 1; }
.map-river-bed { fill: none; stroke: #0a1a26; stroke-width: 7; stroke-linecap: round; }
.map-river { fill: none; stroke: #4fa8c8; stroke-opacity: 0.55; stroke-width: 3; stroke-linecap: round; }
.map-track { fill: none; stroke: #0c1410; stroke-opacity: 0.55; stroke-width: 6; stroke-linecap: round; }
.map-edge { fill: none; stroke: #cbb58a; stroke-opacity: 0.32; stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; transition: stroke-opacity var(--speed) ease; }
.map-edge.live { stroke: var(--gold); stroke-opacity: 0.9; stroke-dasharray: 2 7; }
/* On the world's own ground (svg.is-live, 3.9) the chart is bright, so the roads and the rings darken to read on it. */
svg.is-live .map-track { stroke: #2a1c10; stroke-opacity: 0.45; }
svg.is-live .map-edge { stroke: #fff8e8; stroke-opacity: 0.85; }
svg.is-live .map-node .ring { stroke: #fff4d8; stroke-opacity: 0.7; }
svg.is-live .map-node .disc { fill: #1a1612; fill-opacity: 0.94; }
svg.is-live .map-node text { stroke: #2a1c10; stroke-width: 4px; }
svg.is-live .map-grid { display: none; }
.map-terrain image { image-rendering: auto; }
.map-node { cursor: pointer; }
.map-node .pad { fill: transparent; }
.map-node .disc { fill: #141a16; fill-opacity: 0.92; }
.map-node .ring { fill: none; stroke: #cbb58a; stroke-opacity: 0.45; stroke-width: 1.6; transition: stroke-opacity var(--speed) ease, stroke var(--speed) ease; }
.map-node .ring-outer { stroke-opacity: 0.2; }
.map-node use { color: #d8cba8; opacity: 0.85; }
.map-node text { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; fill: #e4dcc4; fill-opacity: 0.86; paint-order: stroke; stroke: #06111a; stroke-width: 3.5px; stroke-linejoin: round; }
.map-node.town .disc { fill: #1a1a18; }
.map-node.town use { color: var(--gold); opacity: 1; }
.map-node.town text { fill: #f2e6c8; }
.map-node.reachable .ring { stroke-opacity: 0.75; }
.map-node.current .disc { fill: #2a2214; }
.map-node.current .ring { stroke: var(--gold-2); stroke-width: 2.5; stroke-opacity: 1; }
.map-node.current use { color: var(--gold-2); opacity: 1; }
.map-node.current text { fill: var(--gold-2); fill-opacity: 1; font-weight: 700; }
.map-node .pulse { fill: none; stroke: var(--gold); stroke-width: 2; }
.map-node.locked { opacity: 0.58; }
.map-node.locked .ring { stroke-dasharray: 3 4; }
@media (hover: hover) { .map-node:hover .ring { stroke: var(--gold); stroke-opacity: 1; } .map-node:hover use { opacity: 1; } }
.map-node:focus-visible { outline: none; }
.map-node:focus-visible .ring { stroke: var(--gold); stroke-opacity: 1; stroke-width: 3; }
@media (max-width: 767px) { .map-node text { font-size: 16px; stroke-width: 4px; } .map-node use { opacity: 0.95; } }
.map-compass .cp-ring { fill: none; stroke: #cbb58a; stroke-opacity: 0.22; stroke-width: 1.2; }
.map-compass .cp-ring-inner { stroke-opacity: 0.12; }
.map-compass .cp-point { fill: #cbb58a; fill-opacity: 0.3; }
.map-compass .cp-north { fill: var(--gold); fill-opacity: 0.75; }
.map-compass .cp-n { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: #cbb58a; fill-opacity: 0.6; }
.map-node.eventful .ring { stroke: var(--arcane); stroke-opacity: 0.9; }
.map-event-disc { fill: #241442; stroke: var(--arcane); stroke-width: 1.5; stroke-opacity: 0.85; }
.map-event-icon { color: var(--arcane); }
.map-event-label { fill: var(--arcane); fill-opacity: 0.95; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; paint-order: stroke; stroke: #0b0a12; stroke-width: 3px; }
.map-node.plan-end .ring { stroke: var(--gold); stroke-opacity: 0.85; stroke-width: 2; stroke-dasharray: 4 3; }
.map-node.plan-end text { fill: var(--gold); fill-opacity: 0.9; }
/* On the minimap the labels and chrome are too small to read; the map is a picture there. */
.mm .map-node text, .mm .map-compass, .mm .map-event-label, .mm .map-grid { display: none; }
.mm .map-node .pad { display: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.map-legend-item i { width: 9px; height: 9px; border-radius: 2px; background: var(--faction); }
@media (hover: hover) { .map-legend-item:hover { color: var(--text); border-color: var(--faction); } }
.loc-thumb { position: relative; height: 150px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: #140f2a; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 40px rgba(0, 0, 0, 0.6); }
.loc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6); pointer-events: none; }
@media (max-width: 767px) { .loc-thumb { height: 120px; } }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.empty { text-align: center; padding: 40px 20px; color: var(--text-2); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--gold-3); }
.empty .empty-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--gold-2); margin-bottom: 4px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.gold-text { color: var(--gold-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-text { color: var(--hp); font-weight: 700; }
.good-text { color: var(--good); font-weight: 600; }
.bad-text { color: #ff8f7c; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.spin { animation: rotate 1s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.levelup-burst { animation: burst 0.5s ease; }
@keyframes burst { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--warn); color: #1c1500; text-align: center; font-size: 13px; font-weight: 700; padding: 6px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); padding-top: calc(6px + var(--safe-top)); }
.offline-banner.banner-bad { background: var(--bad); color: #fff; }
.hitsplat { animation: splat 0.5s ease; display: inline-block; }
@keyframes splat { 0% { transform: scale(0.4); opacity: 0; } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
kbd, code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }
.countdown { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.countdown-soon { color: var(--warn); }
.countdown-done { color: var(--text-3); }
.boss-countdown-sm { font-size: 20px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Auth / onboarding (chrome-less)
   -------------------------------------------------------------------------- */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(70% 60% at 50% 30%, #1a1522, #07060a 70%); }
.auth-shell::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, rgba(74, 52, 128, 0.35), transparent 60%), linear-gradient(180deg, #0d0a18, #07060a); }
.auth-card {
  width: 100%; max-width: 420px; padding: 30px 30px 26px;
  background: linear-gradient(180deg, rgba(30, 26, 38, 0.96), rgba(14, 12, 19, 0.98));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.12), inset 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.85), var(--shadow);
}
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; text-align: center; }
.auth-logo svg { color: var(--gold); filter: drop-shadow(0 0 10px rgba(217, 180, 90, 0.5)); }
.auth-logo h1 { font-size: 28px; letter-spacing: 0.06em; }
.auth-logo .tag { color: var(--text-2); font-size: 13.5px; }
.pw-meter { display: flex; gap: 4px; margin-top: 6px; }
.pw-meter span { flex: 1; height: 4px; border-radius: 3px; background: var(--line); transition: background var(--speed); }
.pw-meter span.on-1 { background: var(--bad); }
.pw-meter span.on-2 { background: var(--warn); }
.pw-meter span.on-3 { background: var(--good); }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 600; background: rgba(0, 0, 0, 0.3); border: 1px dashed var(--line-2); border-radius: 4px; padding: 14px; text-align: center; }
.qr-box { background: #fff; border-radius: 6px; padding: 12px; width: fit-content; margin: 0 auto 12px; box-shadow: var(--shadow-soft); }
.qr-box canvas { display: block; }
.create-shell { max-width: 820px; margin: 0 auto; padding: 24px 18px 60px; }
.create-step { display: flex; align-items: center; gap: 11px; margin: 22px 0 10px; }
.create-step-n { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a3246, #15131d); border: 1px solid var(--gold-3); color: var(--gold-2); font-weight: 800; font-size: 12px; }
.class-card { text-align: left; cursor: pointer; }
.class-card .perks { margin: 10px 0 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; }
.class-card .perks li { margin-bottom: 3px; }
.class-card-art { display: block; width: calc(100% + 32px); margin: -14px -16px 12px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 5px 5px 0 0; border-bottom: 1px solid var(--line-2); }
body.no-chrome .class-card, body.no-chrome .faction-card { color: var(--text); }

/* --------------------------------------------------------------------------
   Equipment — the paper-doll with the character's portrait at its heart
   -------------------------------------------------------------------------- */
.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.equip-doll { display: grid; grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 20px; }
.equip-col { display: grid; gap: 8px; min-width: 0; }
.equip-figure { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(0, 0, 0, 0.7); }
.equip-figure .pfp { --pfp-size: 128px; position: relative; }
.equip-figure .equip-name { position: relative; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--gold-2); text-shadow: 0 1px 2px #000, 0 0 12px #000; }
.equip-figure .equip-class { position: relative; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 1px 2px #000; }
.equip-figure .equip-stats { position: relative; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.equip-slot { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.32); border: 1px dashed var(--line-2); cursor: pointer; text-align: left; min-height: 62px; }
.equip-slot.filled { border-style: solid; background: linear-gradient(180deg, rgba(34, 29, 42, 0.7), rgba(18, 16, 24, 0.8)); }
@media (hover: hover) { .equip-slot:hover { border-color: var(--gold); } }
.equip-slot .slot-name { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.equip-slot .iname { font-size: 12px; font-weight: 700; color: var(--text-2); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-text { min-width: 0; }
@media (max-width: 600px) {
  .equip-doll { grid-template-columns: 1fr 1fr; }
  .equip-figure { grid-column: 1 / -1; order: -1; min-height: 220px; }
  .equip-figure .pfp { --pfp-size: 96px; }
}

.objective { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.objective svg { flex: 0 0 auto; width: 15px; height: 15px; }
.objective.done { color: var(--good); }
.objective .obj-count { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); }
.enemy-hpbar { height: 10px; }
.talent-node { position: relative; }
.talent-node .rank { position: absolute; top: 10px; right: 12px; }

/* --------------------------------------------------------------------------
   The nav sheet (phones): the whole action bar as a list
   -------------------------------------------------------------------------- */
.nav-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nav-sheet .ab-slot { width: auto; height: auto; min-width: 0; min-height: 0; aspect-ratio: 1; flex-direction: column; justify-content: center; gap: 4px; padding-bottom: 14px; }
.nav-sheet .ab-slot .ab-label { position: static; transform: none; opacity: 1; font-size: 10px; }
.nav-sheet .ab-slot .ab-key { display: none; }
.nav-sheet-title { grid-column: 1 / -1; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Factions & presence
   -------------------------------------------------------------------------- */
.faction-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--faction, var(--gold)); background: color-mix(in srgb, var(--faction, var(--gold)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--faction, var(--gold)) 40%, transparent); }
.faction-badge-sm { padding: 2px 7px; font-size: 9.5px; }
.faction-badge svg { width: 13px; height: 13px; }
.faction-card { --faction: var(--gold); text-align: left; cursor: pointer; }
.faction-card.selected { border-color: var(--faction); box-shadow: 0 0 0 1px var(--faction), 0 0 16px color-mix(in srgb, var(--faction) 40%, transparent); }
.faction-card .avatar { flex: 0 0 auto; }
.faction-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 3px 10px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.05); color: var(--text-2); border: 1px solid var(--line); }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-active { background: var(--good-soft); color: var(--good); border-color: rgba(74, 214, 109, 0.35); }
.status-active i { animation: livepulse 2s ease-in-out infinite; }
.status-idle { background: rgba(240, 180, 41, 0.12); color: var(--warn); border-color: rgba(240, 180, 41, 0.35); }
.status-resting { color: var(--text-3); }
@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* --------------------------------------------------------------------------
   Mastery
   -------------------------------------------------------------------------- */
.mastery-pip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 3px; background: rgba(217, 180, 90, 0.1); color: var(--gold); font-weight: 800; font-size: 10.5px; font-variant-numeric: tabular-nums; border: 1px solid rgba(217, 180, 90, 0.25); }
.mastery-pip svg { width: 12px; height: 12px; }
.mastery-pip.mastery-capped { background: rgba(217, 180, 90, 0.22); color: var(--gold-2); border-color: rgba(217, 180, 90, 0.55); box-shadow: 0 0 8px rgba(217, 180, 90, 0.3); }
.bar-mastery-track { height: 4px; }
.bar-mastery-track .bar-fill { background: linear-gradient(180deg, rgba(243, 214, 140, 0.8), rgba(217, 180, 90, 0.7)); }
.bar-mastery-track .bar-fill::after { display: none; }
.bar-mastery-track.bar-mastery .bar-fill { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.mastery-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.mastery-row .bar { flex: 1 1 auto; min-width: 60px; max-width: 180px; }
.mastery-row .tiny { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.mastery-summary { border-color: rgba(217, 180, 90, 0.25); }
.mastery-box { padding: 12px; border-radius: 4px; background: rgba(217, 180, 90, 0.07); border: 1px solid rgba(217, 180, 90, 0.2); }

/* --------------------------------------------------------------------------
   Profiles, friends, gifts
   -------------------------------------------------------------------------- */
.rank-tile { display: flex; align-items: center; gap: 11px; padding: 10px 15px; border-radius: 4px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); }
.rank-tile svg { color: var(--gold); }
.rank-value { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.1; color: var(--gold-2); }
.rank-value .tiny { font-family: var(--font-body); font-weight: 500; }
.cover-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 11px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; color: var(--text); }
.cover-chip svg { color: var(--gold); width: 15px; height: 15px; }
.cover-chip-action { cursor: pointer; }
@media (hover: hover) { .cover-chip-action:hover { border-color: var(--gold); } }
.cover-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.friend-card .avatar { width: 42px; height: 42px; cursor: pointer; flex: 0 0 auto; }
.friend-name { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--gold-2); text-align: left; padding: 0; background: none; }
@media (hover: hover) { .friend-name:hover { text-decoration: underline; } }
.friend-doing { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); font-size: 13px; }
.friend-doing svg { color: var(--gold); }
.friend-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.friend-card .btn { white-space: nowrap; }
.gift-picker { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, 0.3); }
.gift-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.gift-option:last-child { border-bottom: 0; }
.gift-option .slot { --slot: 34px; }
.gift-option.selected { background: var(--gold-soft); }
@media (hover: hover) { .gift-option:hover { background: rgba(255, 255, 255, 0.04); } }
.gift-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--gold-soft), transparent 70%), rgba(0, 0, 0, 0.3); border: 1px solid var(--gold-3); }
.purse-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin-bottom: 12px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Seasons, next-up, the realm's own
   -------------------------------------------------------------------------- */
.season-banner { padding: 14px 17px; margin-bottom: 16px; }
.season-banner.is-complete { border-color: rgba(74, 214, 109, 0.4); }
.season-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-3); }
.season-banner.is-complete .season-eyebrow { color: var(--good); }
.season-done-pip { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.04em; color: var(--good); }
.season-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-top: 2px; color: var(--gold-2); }
.season-count { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-2); flex: 0 0 auto; }
.season-tagline { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 7px 0 11px; }
.season-banner .bar { margin-top: 2px; }
.season-next { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.season-next > svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.season-locked { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; margin-bottom: 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); border: 1px dashed var(--line-2); color: var(--text-2); }
.season-locked > svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-3); }
.season-group { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 6px; }
/* The bounty board (Quests → Bounties) */
.bounty-streak { text-align: right; flex: 0 0 auto; }
.bounty-streak-n { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #ffb257; line-height: 1; }
.bounty-streak-n svg { width: 20px; height: 20px; color: #ffb257; }
.bounty-clocks { margin-top: 10px; color: var(--text-2); }
.bounty-clocks .countdown { font-size: 12.5px; font-weight: 800; color: var(--text); }
.bounty-clocks svg { color: var(--gold-3); }
.bounty-card .bounty-art { display: inline-flex; flex: 0 0 auto; }
.bounty-card .bounty-art > svg { width: 26px; height: 26px; color: #5a3a10; }
.bounty-card .bounty-art .slot-inline, .bounty-card .bounty-art .pfp-medal { --slot-size: 34px; --medal-size: 34px; }
.bounty-card .bounty-progress { margin: 2px 0 2px; }
.bounty-card.is-claimed { opacity: 0.62; }
.bounty-card.is-claimed .q-name { text-decoration: line-through; text-decoration-color: rgba(90, 58, 16, 0.5); }
.quest-next { border-style: dashed; }
.gate-list { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.gate + .gate { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.gate-label { font-weight: 800; font-size: 13.5px; }
.gate .bar { margin-top: 9px; }
.gate .btn { flex: 0 0 auto; }
.npc-note { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; margin-bottom: 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.28); border: 1px dashed var(--line-2); }
.npc-note > svg { flex: 0 0 auto; margin-top: 1px; color: var(--text-3); }
.npc-note-title { font-weight: 800; margin-bottom: 3px; }
.npc-note p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.q-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--gold-2); }
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.q-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Leaderboard rows
   -------------------------------------------------------------------------- */
.lb-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); border-radius: 4px; }
.lb-row:last-child { border-bottom: 0; }
@media (hover: hover) { .lb-row:hover { background: var(--gold-soft); } }
.lb-row.is-me { background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(217, 180, 90, 0.3); }
.lb-rank { min-width: 40px; font-family: var(--font-display); font-weight: 600; color: var(--text-3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.lb-podium { color: var(--gold-2); }
.lb-podium-1 { font-size: 18px; }
.lb-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--line); color: var(--text-2); }
.lb-avatar svg { width: 18px; height: 18px; }
.lb-name { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.lb-online { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 7px var(--good); }
.lb-sub { display: block; }
.lb-faction { font-weight: 700; }
.chip[style*="--faction"].active { background: color-mix(in srgb, var(--faction) 16%, transparent); border-color: var(--faction); color: var(--faction); }

/* --------------------------------------------------------------------------
   Adventure hub, bosses
   -------------------------------------------------------------------------- */
.count-tile { text-align: center; padding: 10px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.count-tile .v { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--gold-2); }
.count-tile .k { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-top: 3px; }
.count-accent .v { color: var(--gold-2); }
.count-warn .v { color: var(--warn); }
.count-good .v { color: var(--good); }
.boss-card.boss-live { border-color: var(--bad); box-shadow: 0 0 0 1px rgba(229, 83, 61, 0.3), 0 0 18px rgba(229, 83, 61, 0.2); }
.boss-clock { margin-top: 14px; padding: 14px 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.boss-clock[data-tone="open"] { border-color: var(--good); background: linear-gradient(135deg, var(--good-soft), transparent 70%), rgba(0, 0, 0, 0.3); }
.boss-clock[data-tone="queued"] { border-color: var(--warn); }
.boss-clock[data-tone="live"] { border-color: var(--bad); }
.boss-clock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.boss-clock-when { text-align: right; line-height: 1.6; }
.boss-note { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); color: var(--text-2); font-size: 13px; border: 1px solid var(--line); }
.boss-note svg { flex: 0 0 auto; color: var(--gold-3); }
.boss-result { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 5px; border: 1px solid var(--line); }
.boss-result.is-win { background: linear-gradient(135deg, rgba(217, 180, 90, 0.18), transparent 70%), rgba(0, 0, 0, 0.3); border-color: var(--gold); }
.boss-result.is-loss { background: linear-gradient(135deg, var(--bad-soft), transparent 70%), rgba(0, 0, 0, 0.3); border-color: var(--bad); }
.admin-row.is-suspended { opacity: 0.6; }
.admin-row.is-suspended .pfp { filter: grayscale(1); }

/* --------------------------------------------------------------------------
   The Library (two columns) and rendered markdown
   -------------------------------------------------------------------------- */
.view-wide .view-inner, .view-inner.view-wide { max-width: 1240px; }
.lib { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .lib { grid-template-columns: 1fr; gap: 18px; } }
.lib-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 260px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) { .lib-side { position: static; max-height: none; } }
.lib-search { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 4px; background: #0b0a10; border: 1px solid var(--line-2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.lib-search svg { color: var(--text-3); flex: 0 0 auto; }
.lib-search-input { flex: 1; min-width: 0; background: none; border: 0; font: inherit; color: var(--text); }
.lib-search-input:focus { outline: none; }
.lib-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.lib-results { display: flex; flex-direction: column; gap: 2px; }
.lib-result { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 4px; border-bottom: 1px solid var(--line); }
.lib-result:last-child { border-bottom: 0; }
@media (hover: hover) { .lib-result:hover { background: var(--gold-soft); } }
.lib-result svg { color: var(--gold); }
.lib-tree { display: flex; flex-direction: column; gap: 4px; }
.lib-group-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-3); }
.lib-group-head svg { color: var(--gold-3); }
.lib-group-head .lib-chev { margin-left: auto; display: inline-flex; transition: transform var(--speed) ease; }
.lib-group-head.closed .lib-chev { transform: rotate(-90deg); }
@media (hover: hover) { .lib-group-head:hover { color: var(--gold); background: rgba(255, 255, 255, 0.03); } }
.lib-group-pages { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px; }
.lib-group-pages[hidden] { display: none; }
.lib-link { display: block; width: 100%; text-align: left; padding: 7px 12px 7px 16px; border-radius: 4px; font-size: 13.5px; color: var(--text-2); border-left: 2px solid transparent; transition: color var(--speed) ease, background var(--speed) ease, border-color var(--speed) ease; }
@media (hover: hover) { .lib-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); } }
.lib-link.active { color: var(--gold-2); font-weight: 700; border-left-color: var(--gold); background: var(--gold-soft); }
.lib-main { min-width: 0; }
.lib-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.lib-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-3); }
.lib-title { font-size: 30px; line-height: 1.15; }
@media (max-width: 640px) { .lib-title { font-size: 25px; } }
.lib-summary { color: var(--text-2); font-size: 14.5px; margin-top: 6px; max-width: 62ch; }
.lib-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); }
.md-body { font-size: 15px; line-height: 1.65; max-width: 74ch; }
.md-body > *:first-child { margin-top: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 { line-height: 1.25; margin: 34px 0 12px; scroll-margin-top: 20px; }
.md-body h1 { font-size: 26px; }
.md-body h2 { font-size: 21px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.md-body h3 { font-size: 17px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 15px; color: var(--text-2); }
.md-p { margin: 0 0 15px; }
.md-body ul.md-list, .md-body ol.md-list { margin: 0 0 15px; padding-left: 22px; }
.md-body li { margin-bottom: 5px; }
.md-body li::marker { color: var(--gold-3); }
.md-hr { height: 1px; background: var(--line); border: 0; margin: 28px 0; }
.md-quote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--gold-3); color: var(--text-2); font-style: italic; }
.md-quote > *:last-child { margin-bottom: 0; }
.md-code { margin: 0 0 16px; padding: 14px 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); overflow-x: auto; font-size: 13px; line-height: 1.55; }
.md-body code { background: rgba(0, 0, 0, 0.35); padding: 1.5px 5px; border-radius: 3px; color: var(--gold-2); }
.md-code code { background: none; padding: 0; color: var(--text); }
.md-callout { --callout: var(--gold); margin: 0 0 18px; padding: 14px 16px; border-radius: 4px; background: color-mix(in srgb, var(--callout) 9%, rgba(0, 0, 0, 0.3)); border: 1px solid color-mix(in srgb, var(--callout) 32%, transparent); border-left-width: 3px; }
.md-callout-note { --callout: var(--gold); }
.md-callout-tip { --callout: var(--good); }
.md-callout-warning { --callout: var(--warn); }
.md-callout-danger { --callout: var(--bad); }
.md-callout-title { font-weight: 800; color: var(--callout); margin-bottom: 5px; }
.md-callout-title:empty { display: none; }
.md-callout-body > *:last-child { margin-bottom: 0; }
.md-table-wrap { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.md-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.md-table th, .md-table td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.md-table th { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-3); background: rgba(0, 0, 0, 0.3); white-space: nowrap; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table td .num, .md-table td code { white-space: nowrap; }
.md-figure { margin: 0 0 20px; }
.md-body img { max-width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--line-2); }
.md-figure figcaption { margin-top: 7px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.wikilink { border-bottom: 1px dotted currentColor; text-decoration: none; }
.wikilink:hover { text-decoration: none; border-bottom-style: solid; }
.wikilink-missing { color: var(--bad); opacity: 0.75; cursor: help; }

/* The Library's editor */
.lib-editor { display: flex; flex-direction: column; gap: 16px; }
.lib-editor-meta .field { margin-bottom: 12px; }
.wys { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.3); }
.wys-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 7px 8px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.wys-bar-table { background: rgba(0, 0, 0, 0.25); gap: 4px; border-bottom: 1px solid var(--line); }
.wys-bar-table[hidden] { display: none; }
.wys-bar-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding: 0 6px; }
.wys-btn { min-width: 30px; height: 30px; padding: 0 7px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); transition: background var(--speed) ease, color var(--speed) ease; }
@media (hover: hover) { .wys-btn:hover { background: var(--gold-soft); color: var(--text); } }
.wys-btn.active { background: var(--gold); color: var(--on-accent); }
.wys-btn-text { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.wys-btn-danger { color: var(--bad); }
.wys-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
.wys-surface { padding: 20px 22px; min-height: 320px; max-height: 52vh; overflow-y: auto; background: var(--ink); outline: none; max-width: none; }
.wys-surface:focus { box-shadow: inset 0 0 0 2px var(--gold-soft); }
.wys-surface[hidden] { display: none; }
.wys-surface .md-table th, .wys-surface .md-table td { border: 1px solid var(--line-2); }
.wys-surface .md-callout-title:empty { display: block; min-height: 1.2em; }
.wys-surface .md-callout-title:empty::before { content: "Callout title"; color: var(--text-3); font-weight: 400; }
.wys-source { display: block; width: 100%; min-height: 320px; padding: 18px 20px; background: var(--ink); color: var(--text); border: 0; outline: none; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; }
.wys-source[hidden] { display: none; }
.modal-huge { max-width: 1000px; }
@media (min-width: 641px) { .modal-huge { max-height: 92vh; max-height: 92dvh; } }
.field-count { text-align: right; font-variant-numeric: tabular-nums; }
.field-count-low { color: var(--warn); }

/* --------------------------------------------------------------------------
   Profile pictures: round, ringed in gold; bought ones ringed brighter
   -------------------------------------------------------------------------- */
.pfp { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; position: relative; width: var(--pfp-size, 40px); height: var(--pfp-size, 40px); border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold-3), 0 0 0 4px #000, 0 3px 10px rgba(0, 0, 0, 0.6); }
.pfp-img { width: 100%; height: 100%; object-fit: cover; display: block; background: radial-gradient(circle at 50% 40%, #3e3850, #15131b 72%); }
.pfp-fallback { color: var(--text-2); background: var(--ink-3); }
.pfp-fallback svg { width: 55%; height: 55%; }
.pfp-button { position: relative; display: inline-flex; padding: 0; background: none; border: 0; }
.pfp-button .pfp { transition: transform 0.15s ease, box-shadow var(--speed) ease; }
@media (hover: hover) { .pfp-button:hover .pfp { transform: translateY(-1px); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold-2), 0 0 0 4px #000, 0 0 16px rgba(217, 180, 90, 0.6); } }
.pfp-edit { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--on-accent); box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, 0.45); }
.pfp-edit svg { width: 12px; height: 12px; }
.pfp-hero { --pfp-size: 88px; }
@media (max-width: 767px) { .pfp-hero { --pfp-size: 64px; } }
.pfp-button:has(.pfp-hero) .pfp-edit { width: 28px; height: 28px; right: -2px; bottom: -2px; }
.pfp-button:has(.pfp-hero) .pfp-edit svg { width: 14px; height: 14px; }
/* The looking-glass (js/looks.js): a turnable figure beside the choices. Swatches for colours, little portraits
   of this very face for hair, whiskers and details, tiles for the rest. */
.mirror { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px; align-items: start; }
.mirror-stage { position: relative; border-radius: 6px; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, #2a2340, #0d0b14 80%); border: 1px solid var(--line-2); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6); aspect-ratio: 9 / 11; }
.mirror-canvas { display: block; width: 100%; height: 100%; object-fit: contain; cursor: grab; touch-action: none; }
.mirror-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: var(--text-3); text-shadow: 0 1px 2px #000; pointer-events: none; }
.mirror-host { min-width: 0; }
.lk { border: 1px solid var(--line-2); border-radius: 6px; background: rgba(0, 0, 0, 0.3); padding: 10px 12px 4px; }
.lk-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.lk-tab { padding: 6px 12px; border-radius: 4px; border: 1px solid transparent; background: none; color: var(--text-2); font: 700 12.5px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.lk-tab.on { color: var(--gold-2); border-color: var(--line-2); background: rgba(0, 0, 0, 0.35); }
.lk-tabs .lk-rnd { margin-left: auto; }
.lk-row { padding: 9px 0 10px; border-bottom: 1px solid var(--line); }
.lk-row:last-child { border-bottom: 0; }
.lk-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.lk-h b { font-size: 13px; font-weight: 700; color: var(--gold); }
.lk-v { font-size: 12px; color: var(--text-3); }
.lk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-sw { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid #0d0c11; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--line-2), inset 0 -5px 0 rgba(0, 0, 0, 0.25), inset 0 4px 0 rgba(255, 255, 255, 0.22); transition: transform 0.08s ease, box-shadow 0.12s ease; }
.lk-sw:hover { transform: scale(1.1); }
.lk-sw.on { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(217, 180, 90, 0.55), inset 0 -5px 0 rgba(0, 0, 0, 0.25); transform: scale(1.08); }
.lk-sw.own::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.85); }
.lk-tile { padding: 5px 13px; border-radius: 4px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); color: var(--text-2); font: 700 12px var(--font-body); cursor: pointer; }
.lk-tile:hover { border-color: var(--gold-3); color: var(--text); }
.lk-tile.on { border-color: var(--gold); color: var(--gold-2); box-shadow: 0 0 8px rgba(217, 180, 90, 0.3); }
.lk-thumb { width: 66px; padding: 0 0 3px; border-radius: 4px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); overflow: hidden; cursor: pointer; transition: filter 0.08s, border-color 0.12s; }
.lk-thumb img { display: block; width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #3e3850, #15131b 72%); }
.lk-thumb span { display: block; font-size: 10px; font-weight: 700; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.lk-thumb:hover { filter: brightness(1.2); border-color: var(--gold-3); }
.lk-thumb.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(217, 180, 90, 0.45); }
.lk-thumb.on span { color: var(--gold-2); }
.equip-live { position: relative; width: 100%; display: flex; justify-content: center; }
.equip-live-canvas { display: block; width: 100%; max-width: 260px; aspect-ratio: 5 / 6; object-fit: contain; cursor: grab; touch-action: none; }
@media (max-width: 640px) {
  .mirror { grid-template-columns: 1fr; }
  .mirror-stage { max-width: 260px; margin: 0 auto; }
  .lk-thumb { width: 58px; }
}
.welcome-card { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 14px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Titles, streak shields, world events
   -------------------------------------------------------------------------- */
.title-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap; }
.title-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.title-badge-sm { font-size: 9.5px; padding: 1px 6px; }
.title-bought { background: rgba(255, 255, 255, 0.05); color: var(--text-2); border-color: var(--line-2); }
.title-earned { background: rgba(217, 180, 90, 0.14); color: var(--gold-2); border-color: rgba(217, 180, 90, 0.45); }
.shield-pip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); color: var(--text-3); border: 1px dashed var(--line-2); }
.shield-pip svg { width: 14px; height: 14px; }
.shield-pip.shield-held { background: var(--good-soft); color: var(--good); border: 1px solid rgba(74, 214, 109, 0.45); }
.event-panel { padding: 12px 14px; }
.event-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.event-panel .event-row:first-of-type { border-top: 0; padding-top: 2px; }
.event-row .countdown { font-size: 18px; }
.event-row > .grow .tiny { color: var(--text-2); }
.event-sigil { width: 40px; height: 40px; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #3a2560, #1b1030); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4b2f7a, 0 0 14px rgba(167, 139, 250, 0.3); color: #d7c8ff; }
.event-active .event-sigil { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--arcane), 0 0 18px rgba(167, 139, 250, 0.5); }
.card.event-row { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.card.event-row.event-active { border-color: var(--arcane); }

/* --------------------------------------------------------------------------
   The action queue rows (the plan)
   -------------------------------------------------------------------------- */
.queue-panel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.queue-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; transition: transform 0.16s ease; }
.queue-row + .queue-row { border-top: 1px solid var(--line); }
.queue-n { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 3px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: var(--text-3); border: 1px solid var(--line); font-size: 10.5px; font-weight: 800; }
.queue-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-row .tiny { color: var(--text-3); }
.queue-art { width: 28px; height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.queue-art .slot, .queue-art .pfp-medal { --slot: 28px; --medal-size: 28px; }
.queue-warn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 8px; border-radius: 4px; background: rgba(240, 180, 41, 0.1); border: 1px solid rgba(240, 180, 41, 0.3); }
.queue-warn svg { color: var(--warn); flex: 0 0 auto; }
.queue-warn .tiny { color: var(--text-2); }
.queue-row.queue-blocked .queue-name { color: var(--text-2); }
.queue-row.queue-blocked .tiny { color: var(--warn); }
.queue-row.queue-blocked .queue-n { background: rgba(240, 180, 41, 0.16); color: var(--warn); }
.drag-handle { width: 24px; height: 30px; flex: 0 0 auto; border: 0; background: transparent; color: var(--text-3); border-radius: 4px; cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; }
.drag-handle:hover { background: var(--gold-soft); color: var(--gold); }
.queue-row.is-dragging { position: relative; z-index: 2; transition: none; background: var(--ink-3); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); border-radius: 4px; }
.queue-row.is-dragging .drag-handle { cursor: grabbing; }

/* --------------------------------------------------------------------------
   Skills: the node list beside the panel; nodes as rows with their slot
   -------------------------------------------------------------------------- */
.skill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.skill-panel { position: sticky; top: 0; }
.node-row { cursor: pointer; transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.node-row.is-selected { border-color: var(--gold-3); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.08); }
.skill-panel input[type="number"] { width: 110px; min-height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line-2); background: #0b0a10; color: var(--text); font: inherit; font-weight: 700; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.skill-card { display: flex; align-items: center; gap: 12px; }
.skill-card .skill-ico { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a3246, #15131d); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3); color: var(--gold-2); }
.skill-card .skill-ico svg { width: 22px; height: 22px; }
.skill-card.is-mastered .skill-ico { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 12px rgba(217, 180, 90, 0.45); }
.unlock-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.unlock-note svg { width: 14px; height: 14px; color: var(--gold); flex: 0 0 auto; }
.unlock-note b { color: var(--gold-2); }
@media (max-width: 1100px) { .skill-layout { grid-template-columns: minmax(0, 1fr); } .skill-panel { position: static; order: -1; } }
@media (max-width: 640px) { .skill-panel .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skill-panel .stat-tile { padding: 10px; } .skill-panel .stat-tile .v { font-size: 18px; } }

/* --------------------------------------------------------------------------
   The combat roster and the fight
   -------------------------------------------------------------------------- */
.enemy-card { display: flex; flex-direction: column; gap: 8px; }
.enemy-card .enemy-head { display: flex; align-items: center; gap: 12px; }
.enemy-card .enemy-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); }
.enemy-card.is-boss .enemy-name { color: #ffd7cc; }
.enemy-card .enemy-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.fight-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fight-strip .btn-danger { margin-left: auto; }
.fight-panel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.fight-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fight-side.is-enemy { flex-direction: row-reverse; text-align: right; }
.fight-side .fs-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fight-side.is-enemy .fs-name { color: #ffd7cc; }
.fight-side .fs-sub { font-size: 11.5px; color: var(--text-2); }
.fight-side .pf-bar-row { margin-top: 6px; }
.fight-vs { font-family: var(--font-display); font-size: 22px; color: var(--gold-3); text-shadow: 0 0 12px rgba(217, 180, 90, 0.4); }
@media (max-width: 640px) { .fight-panel { grid-template-columns: 1fr; } .fight-vs { display: none; } .fight-side.is-enemy { flex-direction: row; text-align: left; } }

/* ==========================================================================
   Landing page — the front door for signed-out visitors at `/`.
   ========================================================================== */
.landing { --lp: 22px; }
@media (min-width: 768px) { .landing { --lp: 34px; } }
.landing-wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 var(--lp); }
.landing-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px var(--lp) 11px; padding-top: calc(11px + var(--safe-top)); background: rgba(7, 6, 10, 0.78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line-2); }
.landing-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0.05em; color: var(--gold-2); text-decoration: none; }
.landing-brand svg { color: var(--gold); }
.landing-bar-links { display: flex; align-items: center; gap: 14px; }
.landing-bar-links a { font-size: 14px; font-weight: 700; color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .landing-bar-links a:hover { color: var(--gold-2); } }
.landing-hero { position: relative; min-height: min(78vh, 680px); display: flex; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line-2); }
.landing-hero .cover-ground { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 70% at 50% 100%, rgba(74, 52, 128, 0.45), transparent 60%), linear-gradient(180deg, #16123a 0%, #0b0a18 55%, #07060a 100%); }
@media (max-width: 767px) { .landing-hero { min-height: min(82vh, 620px); } }
.landing-hero-inner { position: relative; z-index: 4; width: 100%; max-width: calc(1060px + var(--lp) * 2); margin: 0 auto; padding: 26px var(--lp) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.landing-hero-head { margin-top: auto; }
.landing-chips { margin-bottom: 8px; }
.landing-chip-live { border-color: rgba(243, 214, 140, 0.4); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); display: inline-block; animation: live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.cover-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
.landing-title { font-family: var(--font-display); font-size: clamp(48px, 9vw, 96px); line-height: 0.98; color: var(--gold-2); letter-spacing: 0.02em; margin-bottom: 14px; text-shadow: 0 3px 2px #000, 0 4px 34px rgba(0, 0, 0, 0.7), 0 0 50px rgba(217, 180, 90, 0.3); }
.landing-lede { max-width: 60ch; font-size: clamp(14.5px, 1.6vw, 17.5px); line-height: 1.55; color: rgba(239, 230, 210, 0.95); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.landing-cta { display: flex; flex-wrap: wrap; gap: 11px; }
.landing-cta-hero { margin-top: 22px; }
.landing-hero-foot { margin-top: 14px; color: rgba(239, 230, 210, 0.7); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.landing-section { padding: clamp(52px, 8vw, 92px) 0; }
.landing-section.is-alt { background: rgba(15, 13, 21, 0.6); border-block: 1px solid var(--line); }
.landing-head { margin-bottom: 34px; }
.landing-head.is-centre { text-align: center; margin-inline: auto; max-width: 760px; }
.landing-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.landing-h2 { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 42px); line-height: 1.12; letter-spacing: 0.01em; }
.landing-sub { margin-top: 12px; font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.6; color: var(--text-2); }
.landing-note { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--text-3); max-width: 76ch; margin-inline: auto; text-align: center; }
.landing-steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.landing-step { position: relative; padding: 22px 20px 20px; }
.landing-step-n { position: absolute; top: 14px; right: 18px; font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 600; color: var(--gold); opacity: 0.18; }
.landing-step-icon { color: var(--gold); margin-bottom: 12px; }
.landing-step-icon svg { width: 26px; height: 26px; }
.landing-step-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-bottom: 6px; color: var(--gold-2); }
.landing-step-body { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.landing-demo { margin-top: 22px; padding: 18px 20px 16px; text-align: left; }
.landing-demo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.landing-demo-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--good); letter-spacing: 0.08em; text-transform: uppercase; }
.landing-demo-row { display: flex; align-items: center; gap: 14px; }
.landing-demo .bar-fill { transition: none; }
.landing-demo-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.landing-demo-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.landing-demo-foot svg { color: var(--gold); }
.landing-demo-since { margin-left: auto; font-weight: 500; color: var(--text-3); }
.landing-demo-note { margin-top: 12px; color: var(--text-3); line-height: 1.55; }
.landing-realm-line { text-align: center; max-width: 60ch; margin-inline: auto; }
.landing-weather { display: grid; gap: 10px; margin-top: 26px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.landing-wx { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-left: 3px solid var(--faction, var(--line-2)); }
.landing-wx-icon { color: var(--faction, var(--gold)); flex: 0 0 auto; display: flex; }
.landing-wx-icon svg { width: 20px; height: 20px; }
.landing-wx-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-events { display: grid; gap: 10px; margin-top: 12px; }
.landing-event { display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 12px 14px; border-left: 3px solid var(--arcane); }
.landing-event .landing-wx-icon { color: var(--arcane); margin-top: 1px; }
.landing-event .landing-wx-name { white-space: normal; }
.landing-event .tiny { color: var(--text-2); }
.landing-stats { display: grid; gap: 12px; margin-bottom: 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .landing-stats { grid-template-columns: repeat(4, 1fr); } }
.landing-stat { padding: 18px 14px; text-align: center; }
.landing-stat-n { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; line-height: 1; color: var(--gold-2); }
.landing-stat-k { margin-top: 7px; font-size: 12.5px; color: var(--text-2); }
.landing-features { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .landing-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .landing-features.is-three { grid-template-columns: repeat(3, 1fr); } }
.landing-feature { display: flex; gap: 14px; padding: 17px 18px; }
.landing-feature-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a3246, #15131d); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3); color: var(--gold-2); }
.landing-feature-icon svg { width: 19px; height: 19px; }
.landing-feature-title { font-weight: 800; font-size: 14.5px; margin-bottom: 5px; color: var(--text); }
.landing-feature-body { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.landing-places { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.landing-place { overflow: hidden; transition: transform var(--speed) ease, border-color var(--speed) ease; }
@media (hover: hover) { .landing-place:hover { transform: translateY(-3px); border-color: var(--faction, var(--gold-3)); } }
.landing-place-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.landing-place-body { padding: 14px 16px 17px; }
.landing-place-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; }
.landing-place-region { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faction, var(--gold)); }
.landing-place-region svg { width: 13px; height: 13px; }
.landing-place-name { font-size: 19px; margin-bottom: 6px; }
.landing-place-desc { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.landing-factions { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.landing-faction { padding: 22px 22px 24px; border-color: color-mix(in srgb, var(--faction) 40%, var(--line-2)); background: linear-gradient(155deg, color-mix(in srgb, var(--faction) 12%, transparent), transparent 66%), linear-gradient(180deg, rgba(30, 26, 38, 0.94), rgba(14, 12, 19, 0.96)); }
.landing-faction-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.landing-faction-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--faction) 18%, #15131d); color: var(--faction); box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--faction) 60%, transparent); }
.landing-faction-icon svg { width: 24px; height: 24px; }
.landing-faction-name { font-size: 22px; }
.landing-faction-creed { margin-top: 3px; font-size: 13px; font-style: italic; color: var(--faction); }
.landing-faction-desc { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.landing-minor-head { margin: 30px 0 14px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-3); }
.landing-minor { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.landing-minor-card { padding: 16px 18px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); border: 1px dashed color-mix(in srgb, var(--faction) 45%, transparent); }
.landing-minor-card svg { color: var(--faction); }
.landing-minor-name { font-weight: 800; font-size: 15px; }
.landing-minor-desc { margin-top: 10px; line-height: 1.55; color: var(--text-2); }
.landing-rip { display: flex; gap: 18px; align-items: flex-start; padding: 24px 24px 22px; margin-bottom: 16px; background: radial-gradient(120% 130% at 84% -10%, rgba(167, 139, 250, 0.2), transparent 58%), linear-gradient(180deg, rgba(30, 26, 38, 0.94), rgba(14, 12, 19, 0.96)); border-color: rgba(167, 139, 250, 0.4); }
.landing-rip-glyph { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(167, 139, 250, 0.16); color: var(--arcane); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--arcane), 0 0 30px rgba(167, 139, 250, 0.35); }
.landing-rip-glyph svg { width: 28px; height: 28px; }
.landing-rip-title { font-size: 22px; margin-bottom: 10px; }
.landing-rip-body { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin-bottom: 10px; }
.landing-rip-body:last-child { margin-bottom: 0; }
.landing-season { padding: 20px 22px 22px; margin-bottom: 16px; }
.landing-season-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.landing-season-name { font-size: 24px; margin: 6px 0 0; }
.landing-season-tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.landing-season-body { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.landing-classes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.landing-class { overflow: hidden; }
.landing-class-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.landing-class-body { padding: 16px 18px 20px; }
.landing-class-body svg { color: var(--gold); }
.landing-class-name { font-size: 21px; }
.landing-class-desc { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.landing-class-perks { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 6px; }
.landing-class-perks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); }
.landing-class-perks svg { flex: 0 0 auto; margin-top: 2px; color: var(--good); }
.landing-final { background: radial-gradient(90% 130% at 50% 0%, var(--gold-soft), transparent 62%), var(--bg); border-top: 1px solid var(--line); }
.landing-final-wrap { text-align: center; max-width: 720px; }
.landing-cta-final { justify-content: center; margin-top: 26px; }
.landing-footer { padding: 26px 0 calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ink); }
.landing-footer-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.landing-footer .landing-brand { font-size: 15px; }
.landing-footer a { color: var(--text-2); }
.landing-step, .landing-demo, .landing-wx, .landing-event, .landing-stat, .landing-feature, .landing-place, .landing-class, .landing-faction, .landing-season, .landing-rip { background: linear-gradient(180deg, rgba(30, 26, 38, 0.94), rgba(14, 12, 19, 0.96)); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(243, 214, 140, 0.06), 0 6px 20px rgba(0, 0, 0, 0.4); }
.landing-demo, .landing-event { background: linear-gradient(135deg, rgba(217, 180, 90, 0.1), transparent 60%), linear-gradient(180deg, rgba(30, 26, 38, 0.94), rgba(14, 12, 19, 0.96)); }
.landing-demo-icon { flex: 0 0 auto; }
@media (max-width: 560px) { .landing-cta { flex-direction: column; align-items: stretch; } .landing-cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ==========================================================================
   Phones and narrow screens: the HUD folds down, windows go full screen,
   the action bar becomes a five-slot bar with a sheet behind it.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --hud-pad: 10px; --actionbar-h: 84px; }
  .hud-bl { display: none; }
  .hud-tl { gap: 6px; max-width: calc(100vw - 150px); }
  .hud-tl > #hud-player { max-width: none; }
  /* The frame is as wide as the room beside the chips on the right allows (3.8.1): sized to its content it squeezed
     the two bars to a few letters. The right column's chips measure about 150px (the location name is the widest);
     the frame stops a dozen pixels short of them, and never grows past 240px. */
  .pf { width: min(240px, calc(100vw - 166px)); max-width: 100%; padding: 6px 10px 6px 6px; gap: 9px; }
  .pf .pfp { --pfp-size: 46px; }
  .pf-level { min-width: 20px; height: 20px; font-size: 10px; left: -4px; bottom: -3px; }
  .pf-name .nm { font-size: 14px; }
  .pf-sub { display: none; }
  .pf-bars { margin-top: 4px; gap: 3px; }
  .pf-bar-row .bar { height: 10px; }
  .pf-bar-row .bar-label { font-size: 9px; padding: 0 4px; }
  .pf-bars .pf-bar-row:nth-child(2) .bar-label > span:last-child { display: none; }
  .pf-gold { display: none; }
  .buffs { max-width: none; gap: 5px; }
  .buff { width: 26px; height: 26px; }
  .buff svg { width: 14px; height: 14px; }
  .buff .buff-t { display: none; }
  .tf { width: auto; max-width: calc(100vw - 20px); padding: 6px 10px 6px 6px; }
  .tf .pfp-medal { --medal-size: 36px; }
  .tf-name { font-size: 13.5px; }
  .tf-beat { display: none; }
  .hud-tr { gap: 5px; max-width: 140px; }
  .mm { display: none; }
  .hud-chip { padding: 4px 8px; font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  .hud-chip-zone { font-size: 12px; max-width: 140px; }
  .hud-chip-boss .countdown { font-size: 12px; }
  .hud-bc { width: calc(100vw - 20px); bottom: calc(var(--actionbar-h) + 6px + env(safe-area-inset-bottom)); }
  .cast { padding: 6px 8px 7px; gap: 8px; }
  .cast .slot { --slot: 36px; }
  .cast .pfp-medal { --medal-size: 36px; }
  .cast-title { font-size: 13.5px; }
  .cast .pf-bar-row .bar { height: 12px; }
  .cast-actions .btn { min-height: 30px; padding: 0 8px; font-size: 12px; }
  .cast-actions .btn .btn-txt { display: none; }
  .cast-mastery { display: none; }
  .plan { max-height: 40vh; overflow-y: auto; }
  /* The bar sits just above the XP bar, and each slot carries its own label
     inside it rather than hanging one beneath — a label below the slot ended up
     printed across the XP bar on a phone. */
  .actionbar { left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; max-width: none; border-radius: 0; padding: 6px 6px 7px; justify-content: space-around; gap: 0; border-left: 0; border-right: 0; }
  .actionbar.frame::after { display: none; }
  .ab-group.ab-desktop { display: none; }
  .ab-group.ab-mobile { display: flex; flex: 1; justify-content: space-around; gap: 4px; }
  .ab-group.ab-mobile .ab-slot { width: auto; flex: 1 1 0; min-width: 0; max-width: 64px; height: 58px; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px 3px; }
  .ab-slot svg { width: 22px; height: 22px; }
  .ab-slot .ab-key { display: none; }
  .ab-slot .ab-label { position: static; transform: none; opacity: 1; font-size: 9.5px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ab-sep { display: none; }
  /* The XP bar on a phone (3.7.2): its fill sits ABOVE the home indicator, not in it. The bar's dark ground runs down
     through the safe-area inset to the screen's edge — under the rounded corners, where nothing can be read anyway — and
     the 10px fill is drawn along its top edge, in the clear. The action bar steps up to leave it a hairline. */
  .xpbar { height: calc(10px + env(safe-area-inset-bottom, 0px)); border-top-color: #3a3150; }
  .xpbar .xpb-fill, .xpbar .xpb-rested, .xpbar .xpb-ticks { bottom: auto; height: 10px; }
  .actionbar { bottom: calc(13px + env(safe-area-inset-bottom)); }
  .win { top: calc(6px + var(--safe-top)); bottom: calc(var(--actionbar-h) + 70px + env(safe-area-inset-bottom)); left: 6px; width: calc(100vw - 12px); }
  body.win-open .hud-tl, body.win-open .hud-tr { display: none; }
  .win-frame.frame::after { display: none; }
  .win-head { padding: 12px 12px 10px 14px; }
  .win-head.has-banner { min-height: 96px; }
  .win-title { font-size: 21px; }
  .win-sub { font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .win-strip { padding: 8px 14px; gap: 8px 10px; }
  .win-body { padding: 14px 14px 22px; --view-pad-x: 14px; }
  .zone-text { top: 28%; }
  .zone-text .zone-name { font-size: 30px; }
  .toasts { top: auto; bottom: calc(var(--actionbar-h) + 70px + env(safe-area-inset-bottom)); }
  body.win-open .toasts { top: calc(10px + var(--safe-top)); bottom: auto; }
  .fanfare { top: 24%; }
  .lib-side { max-height: none; }
}
@media (min-width: 901px) { .ab-group.ab-mobile { display: none; } }
@media (max-width: 1240px) and (min-width: 901px) {
  .win { left: 332px; width: calc(100vw - 348px); }
  .hud-r { width: 250px; }
}

/* Chrome-less screens (auth, onboarding, the installer, the front door) hide the HUD entirely. */
body.no-chrome .hud, body.no-chrome .actionbar, body.no-chrome .xpbar { display: none; }
/* Objective rows inside the tracker are smaller and quieter than in the log. */

/* Legacy square icon boxes still used by a few lists: the same iron well as a slot. */
.item-icon { width: 44px; height: 44px; border-radius: 5px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a3246, #15131d 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #000, 0 0 0 2px var(--line-2); color: var(--gold-2); }
.item-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px #000); }
.item-icon.t4, .item-icon.t5 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 12px rgba(217, 180, 90, 0.35); }
.slot-inline { vertical-align: middle; }
/* A quest ready to hand in glows green on its parchment. */
.parch.is-claimable { border-color: #3f8f4a; box-shadow: inset 0 0 0 1px rgba(255, 250, 230, 0.5), 0 0 0 1px rgba(74, 214, 109, 0.5), 0 0 18px rgba(74, 214, 109, 0.3); }
.season-banner.frame { border-radius: var(--radius); }
.season-banner.frame::after { display: none; }

/* ---------------------------------------------------------------------------
   Festivals (data/festivals.php).
   One attribute on <html>, set by ui.setFestival() from the state and from the
   realm feed on the front door, redresses the chrome through the tokens:
   pumpkin gold and a deeper violet for the Autumn Fair, candle-gold, frost and
   holly for Midwinter. Nothing else in the stylesheet knows a festival exists.
   The stage's festival layer is the one new thing drawn: a static lamplight
   for the Fair, a cheap drifting snow for Midwinter — off on a phone and under
   prefers-reduced-motion, and never while the world is still loading.
   --------------------------------------------------------------------------- */
html[data-festival="autumn_fair"] {
  --gold: #e8923e; --gold-2: #ffbe72; --gold-3: #9a5a22; --gold-soft: rgba(232, 146, 62, 0.16);
  --accent: #e8923e; --accent-2: #b86a2a; --accent-soft: rgba(232, 146, 62, 0.16);
  --arcane: #b48cff; --arcane-soft: rgba(180, 140, 255, 0.16);
  --line-2: #5c3d26; --cast: #ff9a3c;
}
html[data-festival="midwinter"] {
  --gold: #ead9a6; --gold-2: #fff4d2; --gold-3: #a38c54; --gold-soft: rgba(234, 217, 166, 0.14);
  --accent: #d9534a; --accent-2: #a73a32; --accent-soft: rgba(217, 83, 74, 0.14);
  --arcane: #9fd3ff; --arcane-soft: rgba(159, 211, 255, 0.16);
  --line-2: #3f5c48; --good: #5fd68a;
}
html[data-festival] .loading-logo { filter: drop-shadow(0 0 14px var(--gold-soft)) drop-shadow(0 0 6px var(--gold)); }

/* The festival's own chip under the player frame: lit in the festival's gold, a count of days on it. */
.buff.buff-festival { border-color: var(--gold); color: var(--gold-2); box-shadow: 0 0 0 1px #000, 0 0 10px var(--gold-soft), 0 2px 6px rgba(0, 0, 0, 0.6); }

/* The layer over the world. */
.festival-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; display: none; }
.festival-fx i { position: absolute; inset: 0; display: block; }
html[data-festival] #stage[data-world="live"] .festival-fx { display: block; }
html[data-festival="autumn_fair"] .festival-fx i:first-child {
  background: radial-gradient(ellipse at 50% 104%, rgba(232, 146, 62, 0.26), transparent 58%),
              radial-gradient(ellipse at 50% -10%, rgba(92, 40, 128, 0.42), transparent 55%);
  mix-blend-mode: screen;
}
html[data-festival="autumn_fair"] .festival-fx i:last-child {
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(26, 8, 32, 0.55) 100%);
}
html[data-festival="midwinter"] .festival-fx i:first-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.8px, transparent 2.6px);
  background-size: 88px 88px; opacity: 0.65;
  animation: snow-near 14s linear infinite;
}
html[data-festival="midwinter"] .festival-fx i:last-child {
  inset: -25%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.7px);
  background-size: 48px 48px; opacity: 0.5;
  animation: snow-far 9.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .festival-fx i { animation: none !important; } }
@media (max-width: 900px) { html[data-festival="midwinter"] .festival-fx { display: none !important; } }

/* The board (Quests → the festival's tab). */
.festival-banner .season-name svg { width: 22px; height: 22px; vertical-align: -4px; color: var(--gold); margin-right: 4px; }
.festival-keep { margin-bottom: 16px; border-color: var(--gold-3); background: linear-gradient(180deg, var(--gold-soft), transparent 70%), var(--panel); }
.festival-keep.is-kept { border-color: rgba(74, 214, 109, 0.5); }
.festival-keep-art { display: inline-flex; flex: 0 0 auto; }
.festival-keep-art > svg { width: 36px; height: 36px; color: var(--gold); }
.festival-card .q-blurb { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: #4a3a1c; font-style: italic; }
.cover-chip-festival { border-color: var(--gold); color: var(--gold-2); }