html {
  /* The shipped view is the native 100% presentation. Options can enlarge or
     compact it without forcing the player to alter browser-wide zoom. */
  zoom: var(--ui-scale, 1);
}

:root {
  color-scheme: dark;
  --game-accent: #7ea3b3;
  --game-warm: #c9a15a;
  --game-warm-bright: #e6c37e;
  --game-bg: #0a0705;
  --game-panel: #171009;
  --ink: #ece4d3;
  --ink-soft: #c7bba0;
  --muted: #8a7d63;
  --line: rgba(201, 161, 90, .16);
  --line-strong: rgba(201, 161, 90, .34);
  --panel-2: #120d08;
  --danger: #cf5142;
  --success: #7fae6c;
  --weakness: #b06fd6;
  --resisted: #d6b23e;
  /* Sets get one dedicated color, used nowhere else in the game, so "this
     is a set bonus" reads as its own category on sight instead of blending
     into whatever accent color the rest of that panel already uses. */
  --set-color: #b878e8;
  --set-color-dim: #6d5480;
  --shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-scale: 1;
  --left-rail-width: clamp(300px, 18vw, 340px);
  --right-rail-width: minmax(380px, 1fr);
  --center-min-width: minmax(520px, 1.2fr);
}
.gold-value { display: inline-flex; align-items: baseline; gap: 4px; color: #f0c96a; text-shadow: 0 0 8px rgba(240,201,106,.22); }
.gold-value b { color: #ffe39a; font-variant-numeric: tabular-nums; }
.gold-value small { color: #d6a943; font-size: .82em; letter-spacing: .03em; }

html[data-layout="balanced"] { --left-rail-width: minmax(380px, 1fr); --right-rail-width: minmax(380px, 1fr); --center-min-width: minmax(420px, 640px); }
/* Loadout Focus: the opposite priority from World Focus - your character
   sheet becomes a slim reference strip, the map shrinks to a glance, and
   Travel/Equipment/Inventory (what you're actually clicking on) get the
   lion's share of the screen. Distinct on purpose, not just "wider." */
html[data-layout="wide"] { --left-rail-width: minmax(220px, 260px); --center-min-width: minmax(400px, 1fr); --right-rail-width: minmax(540px, 1.5fr); }

/* Compact (Mobile mode): a single manually-selected column layout, applied
   regardless of the actual browser window width - unlike every other layout
   rule in this file, which only stacks the rails once the real viewport
   narrows past a breakpoint. Mirrors the values those narrow-viewport rules
   already use (they're proven), just gated on the attribute instead of a
   media query so a player can pick it on any screen size. See
   getInterfaceLayout()/getMobileMode() in app.js. */
html[data-layout="compact"] .game-grid { grid-template-columns: 1fr; min-height: auto; }
/* Explicit stacking order, not just left-to-DOM-order luck: character sheet
   first, the world/scene/chat column second (so chat sits above Travel),
   Travel + Equipment/Inventory (the right rail) last. */
html[data-layout="compact"] .left-rail { order: 1; }
html[data-layout="compact"] .play-space { order: 2; }
html[data-layout="compact"] .right-rail { order: 3; }
html[data-layout="compact"] .left-rail { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
html[data-layout="compact"] .left-rail .panel { margin: 0; }
html[data-layout="compact"] .left-rail .panel:has(#equipment) { grid-column: 1 / 3; }
html[data-layout="compact"] .right-rail { grid-column: 1; display: block; border-left: 0; border-top: 1px solid var(--line); }
html[data-layout="compact"] .right-rail .panel { margin-bottom: 9px; }
html[data-layout="compact"] .topbar { flex-wrap: wrap; gap: 8px; padding: 9px 11px 0; min-height: auto; }
html[data-layout="compact"] .brand-lockup { flex: 1; min-width: 190px; }
html[data-layout="compact"] .brand-lockup small { display: none; }
html[data-layout="compact"] .phase-pill { order: 2; min-width: 0; max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="compact"] .account-menu { order: 3; min-width: auto; }
html[data-layout="compact"] .account-menu > span { display: none; }
html[data-layout="compact"] .tabs { order: 4; flex-basis: 100%; height: 39px; overflow-x: auto; justify-content: flex-start; border-top: 1px solid var(--line); }
html[data-layout="compact"] .tab { min-width: 72px; }
html[data-layout="compact"] .skill-row { grid-template-columns: 1fr 34px; }
html[data-layout="compact"] .skill-xp { display: none; }
html[data-layout="compact"] .skill-progress,
html[data-layout="compact"] .skill-window { grid-column: 1 / 3; }
html[data-layout="compact"] .dossier-grid { grid-template-columns: 1fr; }
html[data-layout="compact"] .inventory-workspace,
html[data-layout="compact"] .equipment-workspace { grid-template-columns: 1fr; }
html[data-layout="compact"] .item-detail { position: static; }
html[data-layout="compact"] .combatants { grid-template-columns: 1fr; }
html[data-layout="compact"] .versus { display: none; }
html[data-layout="compact"] .combatant.foe { grid-template-columns: auto 1fr; text-align: left; }
html[data-layout="compact"] .combatant.foe > div:first-child { order: 2; }
html[data-layout="compact"] .combatant.foe .combatant-portrait { order: 1; }
html[data-layout="compact"] .combat-prep { grid-template-columns: 1fr; }
html[data-layout="compact"] .inventory-toolbar { grid-template-columns: 1fr; }
html[data-layout="compact"] .inventory-icon-grid { grid-template-columns: repeat(2, 1fr); }
html[data-layout="compact"] .card-grid { grid-template-columns: 1fr 1fr; }
html[data-layout="compact"] .card-grid.dungeon-grid,
html[data-layout="compact"] .chat-option-grid,
html[data-layout="compact"] .option-grid,
html[data-layout="compact"] .skills-summary,
html[data-layout="compact"] .xp-window-summary { grid-template-columns: 1fr; }
html[data-layout="compact"] #chat { height: 280px; }
html[data-layout="compact"] .quick-chat-form,
html[data-layout="compact"] #chatForm { grid-template-columns: 104px minmax(0, 1fr) 31px; }
/* Bigger tap targets on the controls a player actually navigates with -
   the desktop sizing assumes a mouse pointer, not a fingertip. */
html[data-layout="compact"] .mini-button,
html[data-layout="compact"] .ghost-button,
html[data-layout="compact"] .action-button,
html[data-layout="compact"] .tab { min-height: 40px; }

/* Compact cards: every action/monster/shop/dungeon/auction card shares the
   .action-card base, so shrinking it once shrinks all of them consistently.
   Its own option, but forced on with Mobile mode too - getCompactCards()
   returns 'on' whenever getMobileMode() does, which is what sets
   data-cards, so this selector alone covers both. A single ~150px-min
   column left most of a phone's width empty; two much denser cards fit
   side by side instead, cutting scroll length a lot. */
html[data-cards="on"] .card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
html[data-cards="on"] .action-card { min-height: auto; padding: 8px; }
html[data-cards="on"] .action-top { gap: 6px; }
html[data-cards="on"] .action-icon { width: 30px; height: 30px; font-size: 16px; }
html[data-cards="on"] .action-title b { font-size: 12px; }
html[data-cards="on"] .action-title small { font-size: 10.5px; }
html[data-cards="on"] .level-chip { padding: 1px 4px; font-size: 11px; }
html[data-cards="on"] .action-detail { margin: 6px 0; font-size: 12px; line-height: 1.35; }

* { box-sizing: border-box; }
/* Automatic render restoration must be truly immediate. Intentional tab
   navigation opts into smooth scrolling at the call site; applying smooth
   globally made a stale poll restoration visibly drag the player away from
   the section they had just opened. */
html { background: var(--game-bg); scroll-behavior: auto; }
body {
  margin: 0; min-width: 320px; color: var(--ink); font: 17px/1.45 var(--sans);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 161, 90, .05), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 5px),
    var(--game-bg);
}
button, input, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--game-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -120px; z-index: 100; border-radius: 6px; padding: 8px 12px; background: var(--ink); color: var(--game-bg); font-weight: 800; transition: top .16s ease; }
/* This is keyboard accessibility only. A startup/mouse focus must never
   turn it into a visible UI panel over the game. */
.skip-link:focus { top: -120px; }
.skip-link:focus-visible { top: 12px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 10px; color: var(--game-warm); font-size: 14px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.primary { border: 1px solid color-mix(in srgb, var(--game-warm) 66%, white); background: linear-gradient(135deg, color-mix(in srgb, var(--game-warm) 87%, #8c4f27), var(--game-warm)); box-shadow: 0 8px 24px color-mix(in srgb, var(--game-warm) 22%, transparent); }

/* Account gateway */
.auth-shell { position: relative; min-height: 100svh; overflow: hidden; background:
  radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--game-accent) 11%, transparent), transparent 28%),
  radial-gradient(circle at 19% 68%, color-mix(in srgb, var(--game-warm) 10%, transparent), transparent 31%),
  linear-gradient(145deg, #071016 0%, #0d1519 48%, #080d11 100%); }
.auth-shell { isolation: isolate; }
.auth-shell::before { mix-blend-mode: screen; }
.auth-shell::before { content: ""; position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.auth-shell::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -33vh; height: 65vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(12, 37, 45, .92), rgba(2, 7, 9, .96) 62%); box-shadow: 0 -1px 0 rgba(109, 217, 227, .16), 0 -18px 80px rgba(50, 134, 145, .09); }
.auth-atmosphere i { position: absolute; z-index: 0; display: block; border-radius: 50%; filter: blur(2px); opacity: .45; animation: drift 12s ease-in-out infinite; }
.auth-atmosphere i:nth-child(1) { width: 240px; height: 240px; top: -70px; left: 9%; border: 1px solid rgba(109,217,227,.12); }
.auth-atmosphere i:nth-child(2) { width: 7px; height: 7px; top: 18%; right: 18%; background: var(--game-accent); box-shadow: 0 0 44px 16px color-mix(in srgb, var(--game-accent) 22%, transparent); animation-delay: -4s; }
.auth-atmosphere i:nth-child(3) { width: 4px; height: 4px; top: 62%; left: 13%; background: var(--game-warm); box-shadow: 0 0 38px 13px color-mix(in srgb, var(--game-warm) 20%, transparent); animation-delay: -7s; }
.auth-layout { position: relative; z-index: 2; width: min(1160px, calc(100% - 40px)); min-height: 100svh; margin: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); align-items: center; gap: clamp(48px, 9vw, 130px); padding: 60px 0; }
.auth-story { max-width: 670px; }
.auth-sigil { width: 96px; height: 96px; display: grid; place-items: center; margin: 18px 0 28px; border: 1px solid color-mix(in srgb, var(--game-warm) 62%, var(--game-accent)); border-radius: 22px; background: radial-gradient(circle, rgba(79,184,255,.16), rgba(7,15,19,.72) 68%); box-shadow: inset 0 0 0 5px rgba(4,11,14,.68), inset 0 0 28px rgba(79,184,255,.26), 0 0 50px rgba(79,184,255,.15); transform: rotate(-4deg); overflow: hidden; }
.auth-sigil img { width: 100%; height: 100%; display: block; object-fit: contain; transform: rotate(4deg) scale(1.08); filter: drop-shadow(0 0 5px rgba(79,184,255,.9)) drop-shadow(0 0 18px rgba(79,184,255,.5)) drop-shadow(0 8px 10px rgba(0,0,0,.7)); }
.auth-story h1 { max-width: 620px; margin: 0; font: 500 clamp(44px, 7vw, 88px)/.94 var(--serif); letter-spacing: .065em; text-wrap: balance; text-shadow: 0 12px 44px rgba(0,0,0,.48); }
.auth-tagline { margin: 20px 0 0; color: var(--game-accent); font: italic 21px/1.3 var(--serif); letter-spacing: .03em; }
.auth-copy { max-width: 560px; margin: 24px 0 34px; color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.feature-list { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--muted); font-size: 15px; }
.feature-list span { display: flex; align-items: baseline; gap: 7px; }
.feature-list b { color: var(--ink); font: 22px var(--serif); }
.auth-card { position: relative; padding: 30px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(145deg, rgba(20,34,42,.92), rgba(7,14,19,.91)); box-shadow: var(--shadow), 0 0 45px rgba(54,170,211,.08); backdrop-filter: blur(18px); }
.auth-card::after { content:""; position:absolute; inset:1px; border:1px solid rgba(111,215,242,.08); border-radius:inherit; pointer-events:none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: -12px -12px 26px; padding: 4px; border-radius: 9px; background: rgba(3, 8, 11, .6); }
.auth-tab { border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 10px; cursor: pointer; font-size: 15px; font-weight: 750; }
.auth-tab.active { background: #19252b; color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.auth-card h2 { margin: 0 0 7px; font: 500 29px/1.15 var(--serif); }
.auth-card form { margin-top: 24px; }
.auth-card label { display: block; margin: 14px 0 6px; color: var(--ink-soft); font-size: 15px; font-weight: 750; letter-spacing: .05em; }
.auth-card input { width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(5, 11, 14, .7); color: var(--ink); padding: 0 13px; transition: border-color .18s, box-shadow .18s; }
.auth-card input:focus { border-color: color-mix(in srgb, var(--game-accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 10%, transparent); }
.gender-field { margin: 14px 0 6px; padding: 0; border: 0; }
.gender-field legend { display: block; margin: 0 0 6px; padding: 0; color: var(--ink-soft); font-size: 15px; font-weight: 750; letter-spacing: .05em; }
.gender-field .gender-option { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; margin: 0 18px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.gender-field .gender-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--game-accent); }
.action-group-heading { grid-column: 1 / -1; margin: 18px 0 2px; color: var(--ink-soft); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.quick-action-group { display: contents; }
.quick-action-group-label { flex: 0 0 100%; margin: 3px 0 0; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.character-identity-card .wayfarer-location-art { color: var(--game-accent); font-size: 20px; }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.input-action { position: absolute; top: 7px; right: 7px; height: 32px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; font-weight: 800; }
.auth-submit { width: 100%; min-height: 47px; margin-top: 20px; border-radius: 7px; color: #16100b; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 850; }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.form-message { min-height: 21px; margin-top: 12px; font-size: 15px; }
.error { color: #ff938a; }
.auth-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; text-align: center; }
.auth-note span { color: var(--game-warm); margin-right: 5px; }

/* Game shell */
.game-shell { min-height: 100vh; background: linear-gradient(180deg, color-mix(in srgb, var(--game-accent) 2%, var(--game-bg)), var(--game-bg) 180px); }
.topbar { position: sticky; z-index: 30; top: 0; min-height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 15px; background: linear-gradient(180deg, #171009, #0e0a06); box-shadow: inset 0 -1px 0 var(--line-strong), inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(16px); }
.brand-lockup { min-width: 234px; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--game-warm) 62%, var(--game-accent)); border-radius: 12px; background: radial-gradient(circle, rgba(79,184,255,.18), rgba(7,15,19,.72) 70%); box-shadow: inset 0 0 0 3px rgba(4,11,14,.7), inset 0 0 15px rgba(79,184,255,.22), 0 0 16px rgba(79,184,255,.14); overflow: hidden; transform: rotate(-4deg); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; transform: rotate(4deg) scale(1.08); filter: drop-shadow(0 4px 7px rgba(0,0,0,.72)); }
.brand-lockup b { display: block; font: 700 16px var(--serif); letter-spacing: .17em; white-space: nowrap; }
.brand-lockup small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.phase-pill { min-width: 132px; border: 1px solid color-mix(in srgb, var(--game-accent) 22%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--game-accent) 6%, transparent); color: var(--game-accent); padding: 7px 11px; cursor: help; font-size: 13px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
/* The Toll only ever shows once it's left QUIET/RESTLESS (see render() in
   app.js) - each tier gets a progressively more alarming accent, cheap to
   read at a glance without a raw number. */
.toll-pill { min-width: 0; }
.toll-pill.toll-strained { border-color: color-mix(in srgb, var(--game-warm) 40%, var(--line)); background: color-mix(in srgb, var(--game-warm) 8%, transparent); color: var(--game-warm); }
.toll-pill.toll-fractured { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
.toll-pill.toll-dire, .toll-pill.toll-black_gloam { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); animation: tollPulse 2.4s ease-in-out infinite; }
@keyframes tollPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.tabs { flex: 1; display: flex; align-self: stretch; justify-content: center; }
.world-home-button { width: 31px; height: 31px; align-self: center; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-accent) 46%, var(--line)); border-radius: 8px; background: radial-gradient(circle, rgba(79,184,255,.15), rgba(5,11,14,.7)); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.world-home-button img { width: 18px; height: 18px; object-fit: contain; filter: saturate(.85) drop-shadow(0 0 4px rgba(79,184,255,.4)); }
.world-home-button:hover, .world-home-button:focus-visible { transform: translateY(-1px) scale(1.06); border-color: var(--game-warm-bright); box-shadow: 0 0 13px rgba(79,184,255,.36); }
.section-home-control { display:grid; place-items:center; margin:22px 0 10px; padding:14px; border-top:1px solid rgba(133,184,210,.18); }
.section-home-button { position:relative; display:grid; grid-template-columns:44px auto; grid-template-rows:auto auto; align-items:center; gap:0 11px; min-width:min(100%, 330px); padding:11px 17px; border:1px solid color-mix(in srgb, var(--game-accent) 64%, var(--line)); border-radius:13px; background:linear-gradient(125deg, rgba(25,71,93,.75), rgba(7,18,26,.96)); color:var(--text); cursor:pointer; box-shadow:0 0 0 1px rgba(94,207,255,.08) inset, 0 8px 28px rgba(0,0,0,.28); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.section-home-button::before { content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(100deg, transparent 15%, rgba(119,227,255,.35), transparent 85%); opacity:0; pointer-events:none; }
.section-home-button:hover, .section-home-button:focus-visible { transform:translateY(-2px); border-color:var(--game-warm-bright); box-shadow:0 0 23px rgba(74,192,238,.28), 0 10px 30px rgba(0,0,0,.34); }
.section-home-button:hover::before, .section-home-button:focus-visible::before { animation:homeSheen .8s ease both; }
.section-home-button img { grid-row:1 / span 2; width:39px; height:39px; object-fit:contain; filter:saturate(1.25) drop-shadow(0 0 9px rgba(104,218,255,.55)); }
.section-home-button span { text-align:left; font-weight:800; letter-spacing:.02em; }
.section-home-button small { text-align:left; color:var(--muted); margin-top:2px; }
@keyframes homeSheen { from { opacity:0; transform:translateX(-18%); } 40% { opacity:1; } to { opacity:0; transform:translateX(18%); } }
.combatant h2.hp-warning, .combatant h2.hp-critical { transition:color .25s ease, text-shadow .25s ease; }
.combatant h2.hp-warning { color:#f2ca57; text-shadow:0 0 10px rgba(242,202,87,.35); }
.combatant h2.hp-critical { color:#ff5964; text-shadow:0 0 12px rgba(255,52,73,.52); }
.combat-arena:has(.combat-log-row.foe_hit.log-row-fresh) .combatant-art-foe,
.combat-arena:has(.combat-log-row.player_hit.log-row-fresh) .combatant-art-foe { animation:combatImpact .46s ease; }
@keyframes combatImpact { 0% { transform:scale(1); filter:brightness(1); } 35% { transform:scale(1.035) rotate(-1deg); filter:brightness(1.45) drop-shadow(0 0 16px rgba(122,214,255,.65)); } 100% { transform:scale(1); filter:brightness(1); } }
.party-support-console { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:12px 0; padding:14px; border:1px solid rgba(177,224,239,.22); border-radius:12px; background:linear-gradient(120deg, rgba(29,70,80,.48), rgba(10,20,27,.76)); box-shadow:inset 0 0 24px rgba(120,232,255,.05); }
.party-support-console > div { flex:1 1 240px; }
.party-support-console label { display:grid; gap:4px; color:var(--muted); font-size:.78rem; }
.party-support-console select { min-width:170px; }
.subterranean-map { min-height:clamp(420px, 58vw, 760px); }
.subterranean-map.mini { min-width:0; min-height:0; aspect-ratio:auto; }
.erifinary-map-stage, .chamber-map-stage { border-color:rgba(122,207,239,.5); box-shadow:0 0 0 1px rgba(97,177,220,.14) inset, 0 12px 38px rgba(0,0,0,.34); }
.erifinary-node circle:first-child { fill:rgba(122,51,93,.72); stroke:#c981bd; }
.erifinary-node .map-node-core { fill:#f0c6ef; }
.chamber-node circle:first-child { fill:rgba(87,155,163,.7); stroke:#c4f2e8; }
.chamber-node .map-node-core { fill:#fff5c6; }
.subterranean-map .map-node text { font-size:14px; font-weight:700; paint-order:stroke; stroke:rgba(3,8,13,.9); stroke-width:5px; }

/* Erifinary's route chart is a navigational instrument, not a flat list of
   dots. The master painting stays underneath it, while the ink-like route
   treatment makes the next step and the current position immediately legible
   at both full-map and zoomed mini-map scale. */
.erifinary-map-stage { position:relative; isolation:isolate; background:radial-gradient(circle at 50% 42%, rgba(83,35,102,.18), transparent 57%), #03070d; }
.erifinary-map-stage::before { content:""; position:absolute; inset:10px; border:1px solid rgba(190,142,235,.17); border-radius:8px; box-shadow:inset 0 0 42px rgba(7,3,17,.7), 0 0 26px rgba(65,24,95,.14); pointer-events:none; z-index:2; }
.erifinary-route-map { display:block; position:relative; z-index:1; filter:saturate(1.08) contrast(1.06); }
.erifinary-route-map .dark-letik-map-art { opacity:.96; filter:saturate(1.04) brightness(.68) contrast(1.13); }
.erifinary-route-map .map-road-halo { stroke:rgba(1,4,10,.96); stroke-width:15px; opacity:.92; filter:drop-shadow(0 0 5px rgba(106,54,153,.35)); }
.erifinary-route-map .map-road { stroke:#a8d9dc; stroke-width:3.8px; stroke-linecap:round; stroke-dasharray:3 10; opacity:.88; filter:drop-shadow(0 0 3px rgba(118,220,224,.36)); animation:erifinaryRouteFlow 4.8s linear infinite; }
.erifinary-route-map .map-road.active { stroke:#ffe0a2; stroke-width:7px; stroke-dasharray:16 9; opacity:1; filter:drop-shadow(0 0 6px rgba(255,177,83,.86)) drop-shadow(0 0 13px rgba(177,98,255,.34)); animation:routeFlow 1.15s linear infinite; }
.erifinary-route-map .erifinary-node circle:first-child { stroke-width:2.8px; filter:drop-shadow(0 0 6px rgba(218,127,225,.48)); animation:erifinaryNodeBreath 3.2s ease-in-out infinite; }
.erifinary-route-map .erifinary-node.current circle:first-child { stroke:#fff1bd; stroke-width:4.5px; filter:drop-shadow(0 0 7px rgba(255,225,150,.92)) drop-shadow(0 0 16px rgba(190,102,255,.58)); }
.erifinary-route-map .erifinary-node.browsing circle:first-child { stroke:#d7c4ff; stroke-width:4px; filter:drop-shadow(0 0 8px rgba(207,154,255,.95)); }
.erifinary-route-map .erifinary-node.ultimate circle:first-child { fill:rgba(91,21,43,.9); stroke:#ff9b89; filter:drop-shadow(0 0 8px rgba(255,105,76,.78)) drop-shadow(0 0 16px rgba(255,40,96,.34)); }
.erifinary-route-map .erifinary-node text { font-size:15px; letter-spacing:.035em; fill:#f4e8ff; stroke:rgba(3,5,13,.96); stroke-width:5.5px; }
@keyframes erifinaryRouteFlow { to { stroke-dashoffset:-52px; } }
@keyframes erifinaryNodeBreath { 0%,100% { opacity:.82; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .erifinary-route-map .map-road, .erifinary-route-map .map-road.active, .erifinary-route-map .erifinary-node circle:first-child { animation:none; }
}

/* Final motion-mode contract. This intentionally comes after the visual
   feedback passes above so the selected mode wins the cascade. */
html[data-motion="fade"] .tabpage:not([hidden]),
html[data-motion="fade"] .tabpage:not([hidden]) > .section-heading,
html[data-motion="fade"] .tab.active .button-emblem,
html[data-motion="fade"] .tab.active::after,
html[data-motion="fade"] .scene-location-masthead,
html[data-motion="fade"] .map-node.current circle,
html[data-motion="fade"] .map-node.browsing circle,
html[data-motion="fade"] .player-marker.travelling,
html[data-motion="fade"] .route.active,
html[data-motion="fade"] .training-status-dock,
html[data-motion="fade"] .skill-row.is-training,
html[data-motion="fade"] .skill-row.is-training .skill-ledger-art,
html[data-motion="fade"] #inventory .inventory-tile-icon,
html[data-motion="fade"] #tab-inventory .inventory-tile-icon,
html[data-motion="fade"] #equipment .equipment-icon-well,
html[data-motion="fade"] #tab-equipment .equipment-icon-well { animation: gentleFade 4.8s ease-in-out infinite !important; }
html[data-motion="fade"] .map-skill-icon-btn,
html[data-motion="fade"] .map-skill-icon-btn-img,
html[data-motion="fade"] .minimap-skill-icon-img,
html[data-motion="fade"] .minimap-skill-icon-glyph { animation: gentleFade 4.8s ease-in-out infinite !important; }

/* Standard is calm. The live action card retains its useful motion, while
   decorative movement in the atlas, map, inventory, equipment, and status
   surfaces is fully still. */
html[data-motion="full"][data-shimmer="standard"] .tab.active .button-emblem,
html[data-motion="full"][data-shimmer="standard"] .tab.active::after,
html[data-motion="full"][data-shimmer="standard"] .scene-location-masthead,
html[data-motion="full"][data-shimmer="standard"] .map-node.current circle,
html[data-motion="full"][data-shimmer="standard"] .map-node.browsing circle,
html[data-motion="full"][data-shimmer="standard"] .player-marker.travelling,
html[data-motion="full"][data-shimmer="standard"] .route.active,
html[data-motion="full"][data-shimmer="standard"] .training-status-dock,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training .skill-ledger-art,
html[data-motion="full"][data-shimmer="standard"] #inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #tab-inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] #tab-equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn-img,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-img,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-glyph { animation: none !important; }

/* Compact right-rail kit --------------------------------------------------
   Keep Equipment and Inventory together on desktop. Older zoom-safety rules
   intentionally stacked these sections below 1400px, which made the right
   rail grow downward and pushed the inventory out of view. The equipment
   side is deliberately narrow, while the inventory side gets the remaining
   width and a fixed five-row viewport. */
@media (min-width: 841px) {
  .right-rail .equip-inventory-panel {
    min-width: 0;
    width: 100%;
    overflow: visible;
  }

  .right-rail .equip-inventory-panel .split-columns {
    grid-template-columns: minmax(154px, .52fr) minmax(0, 1.48fr) !important;
    gap: 8px;
    align-items: start;
  }

  .right-rail .equip-inventory-panel .split-half,
  .right-rail .equip-inventory-panel #equipment,
  .right-rail .equip-inventory-panel #inventory {
    min-width: 0;
    max-width: 100%;
  }

  .right-rail .equip-inventory-panel .split-half + .split-half {
    padding-top: 0;
    padding-left: 8px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .right-rail .equip-inventory-panel .paperdoll-compact {
    grid-template-columns: repeat(5, minmax(22px, 1fr));
    grid-template-rows: repeat(6, minmax(36px, 40px));
    gap: 3px;
    padding: 6px;
  }

  .right-rail .equip-inventory-panel .paperdoll-compact .equipment-drop > .equipment-icon-well {
    font-size: 18px;
  }

  .right-rail .equip-inventory-panel .paperdoll-compact .equipment-drop > .equipment-icon-well > .item-art-icon {
    width: 1.4em;
    height: 1.4em;
  }

  .right-rail .equip-inventory-panel #inventory {
    --sidebar-inventory-row: 58px;
    --sidebar-inventory-gap: 5px;
    --sidebar-inventory-grid-height: calc((var(--sidebar-inventory-row) * 5) + (var(--sidebar-inventory-gap) * 4));
    height: calc(var(--sidebar-inventory-grid-height) + 16px);
    max-height: calc(var(--sidebar-inventory-grid-height) + 16px);
    overflow: hidden;
  }

  .right-rail .equip-inventory-panel #inventory.preview-mode {
    height: auto;
    min-height: calc(var(--sidebar-inventory-grid-height) + 16px);
    max-height: calc(var(--sidebar-inventory-grid-height) + 70px);
  }

  .right-rail .equip-inventory-panel #inventory.view-icons.scroll-mode {
    overflow: hidden;
  }

  .right-rail .equip-inventory-panel #inventory.view-list.scroll-mode {
    overflow-y: auto;
  }

  .right-rail .equip-inventory-panel #inventory .sidebar-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    grid-template-rows: repeat(5, var(--sidebar-inventory-row));
    grid-auto-rows: var(--sidebar-inventory-row);
    gap: var(--sidebar-inventory-gap);
    max-height: var(--sidebar-inventory-grid-height);
    overflow: hidden;
    align-content: start;
  }

  .right-rail .equip-inventory-panel #inventory.view-icons.scroll-mode .sidebar-icon-grid {
    overflow-y: auto;
  }

  .right-rail .equip-inventory-panel #inventory .compact-tile {
    min-width: 0;
    min-height: var(--sidebar-inventory-row);
    padding: 4px 3px;
  }

  .right-rail .equip-inventory-panel #inventory .compact-tile .inventory-tile-icon {
    font-size: 32px;
    line-height: 1;
  }
}

/* At genuinely small widths the two panels should still become a readable
   vertical stack instead of squeezing the paperdoll and item tiles. */
@media (max-width: 840px) {
  .right-rail .equip-inventory-panel .split-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .right-rail .equip-inventory-panel .split-half + .split-half {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Native and compact presentations keep Travel, Equipment, and Inventory in
   one reliable vertical rail. Intrinsic paperdoll or item widths must never
   push the inventory panel sideways or outside the viewport. */
.equip-inventory-panel,
.equip-inventory-panel .split-columns,
.equip-inventory-panel .split-half,
.equip-inventory-panel #equipment,
.equip-inventory-panel #inventory { min-width: 0; max-width: 100%; }

@media (max-width: 1400px) {
  .right-rail .equip-inventory-panel { width: 100%; overflow: visible; }
  .equip-inventory-panel .split-columns { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
  .equip-inventory-panel .split-half { width: 100%; }
}

@media (max-width: 900px) {
  .right-rail { min-width: 0; }
  .right-rail .travel-panel,
  .right-rail .equip-inventory-panel { width: 100%; }
  .equip-inventory-panel .split-half + .split-half { margin-top: 9px; }
  #inventory .sidebar-icon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  #inventory .sidebar-icon-grid .compact-tile { min-width: 0; min-height: 62px; padding: 4px 3px; }
}

/* Standard and Reduced must be independent of the operating system motion
   preference. Standard keeps only the live activity card moving. */
html[data-motion="full"][data-shimmer="standard"] *,
html[data-motion="full"][data-shimmer="standard"] *::before,
html[data-motion="full"][data-shimmer="standard"] *::after { animation: none !important; }
html[data-motion="full"][data-shimmer="standard"] .activity-card { animation: liveActivityBreath 2.6s ease-in-out infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .activity-card::before { animation: liveActivityRail 2.1s linear infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .activity-card .activity-icon { animation: liveActivityIcon 1.8s ease-in-out infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .activity-card .meter i { animation: liveProgressRail 1.55s linear infinite !important; }

/* Fade is deliberately unmistakable, but gentle. No other profile animation
   can leak through because the reset also covers generated pseudo-elements. */
html[data-motion="fade"] *,
html[data-motion="fade"] *::before,
html[data-motion="fade"] *::after,
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after { animation: none !important; transition-duration: .001ms !important; }
html[data-motion="fade"] .activity-card,
html[data-motion="fade"] .activity-card::before,
html[data-motion="fade"] .activity-card .activity-icon,
html[data-motion="fade"] .activity-card .meter i,
html[data-motion="fade"] .action-card .action-icon { animation: gentleFade 4.8s ease-in-out infinite !important; }
.tab { position: relative; min-width: 64px; border: 0; background: transparent; color: var(--muted); padding: 0 12px; cursor: pointer; font-size: 15px; font-weight: 750; }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--game-warm); transform: scaleX(0); transition: transform .18s; }
.dungeon-status-badge { position: absolute; top: 100%; left: 50%; margin-top: 4px; padding: 1px 6px; border-radius: 4px; transform: translateX(-50%); white-space: nowrap; font: 900 9px var(--sans); letter-spacing: .03em; text-transform: uppercase; pointer-events: none; }
.dungeon-status-badge.hell { background: rgba(207,20,20,.2); color: #ff5c4d; box-shadow: 0 0 6px rgba(255,60,40,.65), inset 0 0 0 1px rgba(255,92,77,.4); animation: hellBadgePulse 1.4s ease-in-out infinite; }
.dungeon-status-badge.dungeon { background: rgba(230,190,60,.18); color: #f0d878; box-shadow: 0 0 5px rgba(240,216,120,.5), inset 0 0 0 1px rgba(240,216,120,.35); }
.dungeon-status-badge.superRaid { background: rgba(160,80,220,.22); color: #cd9fff; box-shadow: 0 0 6px rgba(190,120,255,.6), inset 0 0 0 1px rgba(205,159,255,.4); }
.dungeon-status-badge.raid { background: rgba(101,199,122,.2); color: #9be8ab; box-shadow: 0 0 5px rgba(155,232,171,.5), inset 0 0 0 1px rgba(155,232,171,.35); }

/* Replaces Party + Dungeons & Raids in the top nav the instant an encounter
   goes live - clicking off Party used to leave no trace you were still
   mid-run. The flashing glow is the point: it should be impossible to miss
   even out of the corner of your eye. */
.tab-raid-indicator { font-weight: 900; letter-spacing: .04em; border-radius: 5px; animation: raidIndicatorFlash 1.6s ease-in-out infinite; }
.tab-raid-indicator.dungeon { color: #f0d878; text-shadow: 0 0 8px rgba(240,216,120,.7); }
.tab-raid-indicator.raid { color: #9be8ab; text-shadow: 0 0 8px rgba(155,232,171,.7); }
.tab-raid-indicator.superRaid { color: #cd9fff; text-shadow: 0 0 8px rgba(205,159,255,.7); }
.tab-raid-indicator.active::after { background: currentColor; }
@keyframes raidIndicatorFlash {
  0%, 100% { opacity: .65; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-raid-indicator { animation: none; opacity: 1; }
}

/* House storage is a collection-management surface, not a tiny confirmation
   dialog.  Give it room for two readable inventories and let the controls
   breathe on desktop while naturally collapsing on small screens. */
.modal-box.house-modal { width: min(1220px, 96vw); max-height: min(92vh, 980px); padding: 28px; background: radial-gradient(circle at 8% 0, rgba(230,195,126,.12), transparent 25%), radial-gradient(circle at 92% 20%, rgba(79,184,255,.09), transparent 28%), linear-gradient(145deg, #1a130b, #090807 72%); }
.house-modal-shell { display: grid; gap: 18px; }
.house-modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 3px; }
.house-modal-heading .modal-title { margin-bottom: 5px; font-size: 30px; }
.house-modal-heading p:last-child { max-width: 680px; margin: 0; line-height: 1.55; }
.house-tier-seal { width: 76px; height: 76px; display: grid; align-content: center; justify-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--game-warm) 65%, var(--line)); border-radius: 50%; background: radial-gradient(circle, rgba(230,195,126,.24), rgba(5,10,13,.9) 68%); box-shadow: 0 0 22px rgba(230,195,126,.16), inset 0 0 0 4px rgba(7,12,14,.68); }
.house-tier-seal span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.house-tier-seal b { color: var(--game-warm-bright); font: 600 29px var(--serif); }
.house-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.house-capacity-card, .house-upgrade-card { min-height: 102px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--game-accent) 25%, var(--line)); border-radius: 10px; background: linear-gradient(145deg, rgba(24,44,51,.65), rgba(5,10,13,.62)); }
.house-capacity-card strong { color: var(--ink); font: 600 25px var(--serif); }
.house-capacity-card strong small { color: var(--muted); font: 600 13px var(--sans); }
.house-capacity-card > span, .house-upgrade-card span { color: var(--muted); font-size: 11px; }
.house-card-label { color: var(--game-warm); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.house-capacity-meter { height: 7px; margin: 5px 0 1px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px var(--line); }
.house-capacity-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fb8ff, var(--game-warm)); box-shadow: 0 0 12px rgba(79,184,255,.5); transition: width .45s ease; }
.house-upgrade-card { flex-direction: row; align-items: center; justify-content: space-between; border-color: color-mix(in srgb, var(--game-warm) 35%, var(--line)); }
.house-upgrade-card b, .house-upgrade-card span { display: block; }
.house-upgrade-card b { margin: 4px 0 2px; color: var(--ink); font: 600 17px var(--serif); }
.house-tools { padding: 15px; border: 1px solid color-mix(in srgb, var(--game-warm) 32%, var(--line)); border-radius: 11px; background: rgba(3,8,10,.45); }
.house-filter-heading, .house-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.house-filter-heading h3, .house-section-heading h3 { margin: 0; color: var(--ink); font: 600 20px var(--serif); }
.house-filter-heading .eyebrow, .house-section-heading .eyebrow { margin: 0 0 3px; }
.house-bulk-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 190px; }
.house-filter-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.house-filter-grid label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.house-filter-grid input, .house-filter-grid select { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,.32); color: var(--ink); padding: 0 9px; font: 13px var(--sans); text-transform: none; letter-spacing: normal; }
.house-filter-note { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.hs-text-ready { color: #79d79a; }
.hs-text-raw { color: #ff766d; }
.house-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.house-vault-column { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(180deg, rgba(16,28,32,.72), rgba(4,9,11,.58)); }
.house-pack-column { border-color: color-mix(in srgb, var(--game-accent) 27%, var(--line)); }
.house-section-heading { margin-bottom: 10px; }
.hs-badge { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 19px; padding: 2px 5px; border-radius: 4px; font: 900 9px var(--sans); letter-spacing: .04em; white-space: nowrap; }
.hs-ready { border: 1px solid rgba(102,215,143,.6); background: rgba(45,151,85,.2); color: #84e6a2; box-shadow: 0 0 8px rgba(77,205,125,.18); }
.hs-needs-cooking { border: 1px solid rgba(255,105,96,.6); background: rgba(172,42,36,.2); color: #ff8b81; box-shadow: 0 0 8px rgba(255,77,67,.16); }
.house-empty { padding: 22px 8px; text-align: center; }
@media (max-width: 780px) {
  .modal-box.house-modal { width: min(100%, 680px); padding: 18px; }
  .house-dashboard, .house-columns, .house-filter-grid { grid-template-columns: 1fr; }
  .house-modal-heading { gap: 10px; }
  .house-tier-seal { width: 58px; height: 58px; }
  .house-tier-seal b { font-size: 22px; }
}
@keyframes hellBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (max-width: 720px) {
  .dungeon-status-badge { top: auto; bottom: -2px; font-size: 8px; }
}
.tab:hover { color: var(--ink-soft); }
.tab.active { color: var(--ink); }
.tab.active::after { transform: scaleX(1); }
.account-menu { min-width: 145px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 15px; }
.queue-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; box-shadow: 0 0 6px currentColor; }
.queue-status-blue { background: #5ea8e6; color: #5ea8e6; }
.queue-status-green { background: #6fce7a; color: #6fce7a; }
.queue-status-grey { background: #6b7680; color: #6b7680; }
.clan-tag { color: #65c77a; font-weight: 800; }
.badge-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; background: var(--danger); color: #2a0f0c; font-size: 11px; font-weight: 900; }
.ghost-button, .text-button { border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink-soft); padding: 6px 9px; cursor: pointer; font-size: 14px; font-weight: 750; }
.ui-icon { width: 15px; height: 15px; vertical-align: -3px; display: inline-block; object-fit: contain; filter: saturate(1.08) drop-shadow(0 1px 2px rgba(0,0,0,.72)); }
.ghost-button:hover, .text-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.03); color: var(--ink); }
.ghost-button.immortal-on { border-color: color-mix(in srgb, var(--success) 55%, var(--line)); background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.ghost-button.speed-selector { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; }
.ghost-button.speed-selector select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.game-grid { display: grid; grid-template-columns: var(--left-rail-width) var(--center-min-width) var(--right-rail-width); min-height: calc(100vh - 62px); }
.rail { min-width: 0; padding: 12px; background: rgba(8, 14, 18, .55); }
/* A fixed height + overflow:auto here traps the character/stats/skill rail
   in its own tiny inner scrollbar the instant its content (character info +
   combat stats + all 19 skills) is taller than the viewport -- which OS
   display scaling (e.g. 125% on a 1440p monitor) triggers well outside the
   width-based @media(max-width:1400px) compact-layout threshold below,
   since it shrinks available height without necessarily narrowing the
   viewport past that width. Auto height + static positioning (the same
   fallback that query already used) is the default everywhere now, so the
   whole page scrolls normally instead of nesting a nested scrollbox. */
.left-rail { position: static; top: auto; height: auto; overflow: visible; border-right: 1px solid var(--line); }
.right-rail { border-left: 1px solid var(--line); }
.panel {
  position: relative; margin-bottom: 10px; padding: 15px; border-radius: 7px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--game-panel) 94%, white), var(--game-panel));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.24);
  border: 1px solid rgba(0,0,0,.6);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--game-warm); opacity: .5; box-shadow: 0 0 5px color-mix(in srgb, var(--game-warm) 70%, transparent); pointer-events: none; }
.panel::before { top: 6px; left: 6px; }
.panel::after { bottom: 6px; right: 6px; }
.character-panel::after { top: -35px; right: -35px; bottom: auto; left: auto; width: 90px; height: 90px; border: 1px solid rgba(217,147,82,.1); border-radius: 50%; background: none; box-shadow: none; opacity: 1; }
.panel-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel h2, .panel h3, .section-heading h2 { margin: 0; font: 600 17px var(--serif); letter-spacing: .04em; }
.micro-badge { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inventory-hp-totals { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 8px; }
.inventory-hp-totals .micro-badge { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; font-size: 11px; letter-spacing: .02em; text-transform: none; }
.inventory-hp-totals .heal-total { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); color: var(--success); }
.inventory-hp-totals .raw-total { border-color: color-mix(in srgb, var(--game-warm) 45%, var(--line)); color: var(--game-warm); }
.character-panel { position: relative; overflow: hidden; padding: 15px; }
.character-panel::after { content: ""; position: absolute; top: -35px; right: -35px; width: 90px; height: 90px; border: 1px solid rgba(217,147,82,.1); border-radius: 50%; }
.character-name { margin: 0 0 2px; font: 600 22px var(--serif); }
.character-class { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--game-warm) 14%, rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line)); color: var(--game-warm-bright); padding: 3px 11px; font: 700 13px var(--sans); letter-spacing: .03em; cursor: pointer; }
.character-class i { font-size: 10px; opacity: .8; }
.class-shape-grid span i { font-weight: 400; color: var(--muted); }
.class-roadmap-list { display: flex; flex-direction: column; gap: 6px; }
.class-summary { margin: 2px 2px 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--game-warm) 35%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--game-warm) 8%, rgba(0,0,0,.15)); }
.class-summary b { display: block; margin-bottom: 3px; font: 600 14px var(--serif); color: var(--game-warm-bright); }
.class-summary p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.class-roadmap-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.16); }
.class-roadmap-row b { color: var(--game-warm-bright); font-size: 13px; }
.class-roadmap-row span { font-size: 12.5px; color: var(--ink-soft); }
.class-roadmap-row span i { font-style: normal; color: var(--muted); }
.character-title { color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: help; }
.active-buffs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.buff-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; background: color-mix(in srgb, var(--success) 8%, rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, var(--line)); color: var(--ink-soft); padding: 3px 8px; font-size: 12px; font-weight: 700; cursor: help; }
.buff-chip i { font-style: normal; }
.buff-chip b { color: var(--success); font-weight: 800; }
.vitals { margin-top: 15px; display: grid; gap: 10px; }
.vital-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.vital-row span { color: var(--muted); font-size: 14px; font-weight: 700; }
.vital-row b { font-size: 15px; }
.meter { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9e4d49, var(--danger)); }
.meter.xp i { background: linear-gradient(90deg, #5b9da5, var(--game-accent)); }
.meter.viran i { background: linear-gradient(90deg, #5b3a8a, #a179e0); }
.character-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.meta-tile { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.12); }
.meta-tile span { display: block; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.meta-tile b { display: block; margin-top: 2px; color: var(--ink); font: 600 16px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Only Location lives here now - Wallet moved under Equipment, where big
   numbers have room. One narrower, single-column tile frees up vertical
   space in the left rail so the full skill dock fits without scrolling. */
.character-meta-compact { grid-template-columns: 1fr; margin-top: 9px; }
.meta-tile-compact { padding: 5px 8px; }
.meta-tile-compact span { font-size: 11px; }
.meta-tile-compact b { margin-top: 0; font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.character-activity-label { display: block; margin-top: 2px; color: var(--game-accent); font-size: 11px; }

/* Wallet, relocated: underneath the Equipment column, beside Inventory.
   Each currency gets its own row so a gold total up to the hundreds of
   trillions (999,999,999,999,999) never truncates or crowds the other two. */
.equipment-wallet { margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.12); }
.equipment-wallet > span { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.equipment-wallet-row { display: flex; flex-direction: column; gap: 3px; }
.equipment-wallet-row b, .equipment-wallet-row .wallet-currency { display: flex; align-items: baseline; gap: 5px; color: var(--ink); font: 600 14px var(--serif); white-space: normal; word-break: break-word; }
.equipment-wallet-row b small, .equipment-wallet-row .wallet-currency small { color: var(--muted); font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.equipment-wallet-row .wallet-currency { width: 100%; border: 0; border-radius: 5px; background: transparent; padding: 3px 4px; cursor: pointer; text-align: left; transition: background .16s ease, color .16s ease, transform .16s ease; }
.equipment-wallet-row .wallet-currency:hover, .equipment-wallet-row .wallet-currency:focus-visible { background: rgba(79,184,255,.11); color: var(--game-warm-bright); transform: translateX(2px); }
.currency-balance-hero { display: flex; align-items: center; gap: 11px; margin: 10px 0 16px; padding: 15px; border: 1px solid color-mix(in srgb, var(--game-warm) 45%, var(--line)); border-radius: 9px; background: radial-gradient(circle at 15% 35%, rgba(230,195,126,.2), transparent 33%), rgba(4,10,13,.55); }
.currency-balance-hero .ui-icon { width: 38px; height: 38px; }
.currency-balance-hero strong { color: var(--game-warm-bright); font: 600 29px var(--serif); }
.currency-balance-hero span { margin-left: auto; color: var(--muted); font-size: 11px; }
.currency-source-list { display: grid; gap: 6px; }
.currency-source-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.2); }
.currency-source-row > span { color: var(--game-warm); font: 600 16px var(--serif); text-align: center; }
.currency-source-row b, .currency-source-row small { grid-column: 2; }
.currency-source-row small { color: var(--muted); font-size: 11px; }
.currency-balance-link { border: 1px solid var(--line); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.currency-balance-link:hover, .currency-balance-link:focus-visible { border-color: var(--game-accent); color: var(--game-accent); background: rgba(79,184,255,.09); }
.combat-stat-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.combat-stat { min-width: 0; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.14); }
.stats-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.stats-modal-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.14); cursor: help; }
.stats-modal-row .stat-icon { width: 28px; height: 28px; border-radius: 5px; font-size: 15px; }
.stats-modal-row b { font: 600 15px var(--serif); }
/* Icon-less rows (admin player inspect: label + value only, no per-row
   icon) -- without this the 3-column layout above shoves the label text
   into the 28px icon column meant for something else entirely. */
.stats-modal-row.compact { grid-template-columns: 1fr auto; }
.stats-modal-row.compact span { overflow-wrap: anywhere; }
.split-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; align-items: stretch; }
.split-half { min-width: 0; }
.split-half + .split-half { padding-left: 12px; border-left: 1px solid var(--line); }
.stat-icon, .dock-icon { display: grid; place-items: center; box-shadow: inset 0 2px 4px rgba(0,0,0,.65), inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 30%, var(--line)); background: color-mix(in srgb, var(--game-warm) 6%, rgba(0,0,0,.2)); color: var(--game-warm); }
.stat-icon { width: 36px; height: 36px; border-radius: 6px; font-size: 19px; }
.stat-icon-art { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.stat-icon > img, .dock-icon > img, .level-up-icon > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.stat-icon.defense { color: var(--game-accent); box-shadow: inset 0 2px 4px rgba(0,0,0,.65), inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 30%, var(--line)); background: color-mix(in srgb, var(--game-accent) 6%, rgba(0,0,0,.2)); }
.stat-icon.vitality { color: var(--danger); }
.combat-stat small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Big numbers (HP/MP can now run well past 5 figures) need to actually fit,
   not truncate into an unreadable ellipsis or spill past the stat box  - 
   overflow-wrap lets a long "99999/99999" value break and wrap onto a second
   line inside its own cell instead, and min-width:0 on the wrapping span (a
   flex/grid item otherwise refuses to shrink below its content's natural
   width) is what actually lets that wrapping happen rather than overflowing. */
.combat-stat b { display: block; overflow-wrap: anywhere; font: 600 15px var(--serif); line-height: 1.25; }
.combat-stat > span { min-width: 0; }
.combat-stat-summary { margin-bottom: 7px; }
.stat-icon.combat-level { color: var(--game-warm-bright); }
.combat-more-toggle { width: 100%; min-height: 29px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.14); color: var(--ink-soft); padding: 4px 8px; cursor: pointer; font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.combat-more-toggle:hover, .combat-more-toggle[aria-expanded="true"] { border-color: var(--line-strong); color: var(--game-warm-bright); }
.combat-more-toggle i { font-style: normal; transition: transform .22s ease; }
.combat-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.combat-more-drawer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s ease, opacity .18s ease; }
.combat-more-drawer.open { grid-template-rows: 1fr; opacity: 1; }
.combat-more-inner { min-height: 0; overflow: hidden; }
.combat-more-inner > p { margin: 8px 2px 4px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.combat-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.combat-more-grid span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.12); padding: 5px 6px; }
.combat-more-grid small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; }
.combat-more-grid b { flex: 0 0 auto; color: var(--ink); font: 600 13px var(--serif); }
.equipment-contributions b { color: var(--game-accent); }
.resist-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.resist-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); padding: 3px 6px; font-size: 12px; font-weight: 800; }
.resist-chip i { font-style: normal; display: inline-flex; }
.resist-chip i img { width: 14px; height: 14px; border-radius: 3px; display: block; }
.combat-log-element { font-style: normal; display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.combat-log-element img { width: 15px; height: 15px; border-radius: 3px; display: block; }
.combat-log-element span { font-size: 13px; line-height: 1; }
.resist-chip.immune { color: var(--success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, var(--line)); }
.hone-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.hone-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px color-mix(in srgb, #a179e0 40%, var(--line)); color: #c3a6ef; padding: 3px 6px; font-size: 12px; font-weight: 800; }
.skills-dock-heading { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
#skillDock { display: grid; gap: 7px; margin-top: 7px; }
.skill-dock-modal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 6px; }
.skill-bonus { color: var(--success); font-weight: 800; }
.dock-skill-group { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.12); padding: 5px; }
.dock-skill-group > h3 { margin: 0 3px 4px; color: var(--muted); font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.dock-skill-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.dock-skill { min-width: 0; min-height: 24px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px; color: var(--ink-soft); padding: 1px 2px; font-size: 11px; }
.dock-skill > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-icon { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.dock-skill .dock-icon { width: 20px; height: 20px; border-radius: 5px; font-size: 12px; }
.dock-skill b { color: var(--game-warm); font: 600 13px var(--serif); }
/* Full motion: every Wayfarer Record skill icon gets a small idle pulse
   (Cooking included - there was never a reason to leave any one skill's
   icon static here), each at its own established --training-speed so the
   whole panel doesn't visibly breathe in perfect unison. */
html[data-motion="full"] .dock-icon img { animation: dockIconPulse var(--training-speed, 3.2s) ease-in-out infinite; }
@keyframes dockIconPulse { 0%, 100% { transform: scale(1); filter: saturate(1) brightness(1); } 50% { transform: scale(1.1) rotate(-2deg); filter: saturate(1.25) brightness(1.12); } }
.dock-skill-group.skill-combat { border-color: color-mix(in srgb, var(--danger) 62%, var(--line)); background: color-mix(in srgb, var(--danger) 6%, rgba(0,0,0,.12)); }
.dock-skill-group.skill-combat > h3, .dock-skill-group.skill-combat .dock-icon { color: #e16d61; }
.dock-skill-group.skill-gathering { border-color: color-mix(in srgb, var(--success) 58%, var(--line)); background: color-mix(in srgb, var(--success) 5%, rgba(0,0,0,.12)); }
.dock-skill-group.skill-gathering > h3, .dock-skill-group.skill-gathering .dock-icon { color: var(--success); }
.dock-skill-group.skill-production { border-color: color-mix(in srgb, #559bd1 60%, var(--line)); background: color-mix(in srgb, #559bd1 6%, rgba(0,0,0,.12)); }
.dock-skill-group.skill-production > h3, .dock-skill-group.skill-production .dock-icon { color: #72b3e5; }
.dock-skill-group.skill-other { border-color: color-mix(in srgb, #d8bc57 62%, var(--line)); background: color-mix(in srgb, #d8bc57 5%, rgba(0,0,0,.12)); }
.dock-skill-group.skill-other > h3, .dock-skill-group.skill-other .dock-icon { color: #dbc566; }
.unequip-mini { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(5,10,13,.92); box-shadow: 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 2; }
.equipment-drop:hover .unequip-mini, .equipment-drop:focus-within .unequip-mini { opacity: 1; }
.unequip-mini:hover { background: rgba(5,10,13,1); color: var(--danger); }
.equip-low-durability { position: absolute; bottom: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--game-panel); z-index: 2; }
/* A honed tool otherwise looks identical to an un-honed one - this is the
   only always-visible sign it has Hone effects, in both the compact rail and
   the full Equipment tab, without needing to inspect the slot first. */
.hone-badge { position: absolute; top: -4px; left: -4px; z-index: 2; min-width: 15px; border-radius: 99px; background: rgba(20,8,32,.92); box-shadow: 0 0 0 1px color-mix(in srgb, #a179e0 55%, var(--line)), 0 0 6px rgba(161,121,224,.4); color: #c3a6ef; padding: 1px 4px; font: 900 10px/1.3 var(--sans); text-align: center; }
.paperdoll-compact .hone-badge { top: -3px; left: -3px; font-size: 8px; padding: 0 3px; }
.quick-hone-button { margin-top: 4px; width: 100%; color: #c3a6ef; border-color: color-mix(in srgb, #a179e0 40%, var(--line)); }
.quick-hone-button:hover { border-color: color-mix(in srgb, #a179e0 70%, var(--line)); background: color-mix(in srgb, #a179e0 12%, transparent); }
.search-field { position: relative; display: block; margin: 10px 0 6px; }
.search-field input { width: 100%; height: 31px; border: 1px solid color-mix(in srgb, var(--game-warm) 14%, var(--line)); border-radius: 6px; background: linear-gradient(180deg, rgba(2,8,11,.46), rgba(10,19,23,.62)); box-shadow: inset 0 1px 4px rgba(0,0,0,.36); color: var(--ink-soft); padding: 0 28px 0 9px; font-size: 14px; }
.search-field > span:last-child { position: absolute; top: 5px; right: 9px; color: var(--muted); }
#inventory { position: relative; min-height: 62px; padding: 7px; border: 1px solid color-mix(in srgb, var(--game-warm) 38%, var(--line)); border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 56px, rgba(218,165,92,.13) 56px 58px, rgba(0,0,0,.32) 58px 64px), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 58px), radial-gradient(ellipse at 50% 0, rgba(178,124,58,.16), transparent 58%), linear-gradient(145deg, #17242a, #080e12); box-shadow: inset 0 0 0 1px rgba(0,0,0,.68), inset 0 0 28px rgba(0,0,0,.28), 0 5px 13px rgba(0,0,0,.2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#inventory.preview-mode { max-height: none; overflow: visible; }
#inventory.scroll-mode { max-height: min(48vh, 620px); overflow: auto; }
.item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 7px; min-height: 46px; margin-bottom: 4px; padding: 6px; border: 1px solid rgba(84,106,111,.27); border-radius: 6px; background: linear-gradient(90deg, rgba(26,40,45,.72), rgba(8,15,18,.62)); box-shadow: inset 0 1px rgba(255,255,255,.018); }
.item:hover { border-color: color-mix(in srgb, var(--game-warm) 27%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--game-warm) 5%, #1a282d), #091114); }
.new-item-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 7px; min-height: 46px; margin-bottom: 4px; padding: 6px; border: 1px solid color-mix(in srgb, var(--game-warm) 45%, var(--line)); border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--game-warm) 10%, #1a282d), #091114); box-shadow: inset 0 1px rgba(255,255,255,.018); cursor: default; }
.new-item-row.read { opacity: .55; border-color: rgba(84,106,111,.27); background: linear-gradient(90deg, rgba(26,40,45,.72), rgba(8,15,18,.62)); }
.new-item-row.ultra-rare { border-width: 2px; border-image: conic-gradient(from 0deg, #6de3e0 0deg 90deg, #8be89a 90deg 180deg, #6de3e0 180deg 270deg, #8be89a 270deg 360deg) 1; }
.new-items-toggle:not(.primary-mini) { opacity: .7; }
.item-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm) 14%, var(--line)); border-radius: 6px; background: radial-gradient(circle at 50% 36%, rgba(170,131,75,.07), transparent 60%), rgba(0,0,0,.34); box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.22); font-size: 18px; }

/* Hand-authored vector item icons: default to 1em (matches font-sized inline
   contexts), but a fixed-size icon well should size relative to its own box
   instead - those wells were tuned for how much smaller emoji render than 1em. */
.item-svg-icon, .item-icon-glyph, .item-art-icon { display: inline-block; vertical-align: middle; }
.item-svg-icon { width: 1em; height: 1em; color: var(--ink-soft); flex-shrink: 0; }
.item-art-icon {
  width: 1em; height: 1em; flex: 0 0 auto;
  background-image: var(--item-art); background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--item-x) var(--item-y);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.72));
}

.item-art-icon.item-direct-art {
  background-size: cover;
  background-position: center;
}
.element-guide-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 14px; }
.element-guide-card { padding: 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1a20; }
.element-guide-card h4 { margin: 0 0 12px; color: var(--game-warm); font-size: 20px; }
.element-guide-chip { display: inline-flex; align-items: center; gap: 5px; }
.element-guide-chip img { width: 24px; height: 24px; object-fit: contain; }
.element-guide-card .element-guide-chip { font-size: 12px; line-height: 1.1; }
.element-guide-card .element-guide-chip > img { width: 18px; height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 18px; object-fit: contain; }
.element-guide-card h4 .element-guide-chip > img { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex-basis: 20px; }
.item-icon > .item-svg-icon, .action-icon > .item-svg-icon, .route-icon > .item-svg-icon, .item-detail-icon > .item-svg-icon { width: 62%; height: 62%; }
.item-icon > .item-art-icon, .action-icon > .item-art-icon, .route-icon > .item-art-icon, .item-detail-icon > .item-art-icon { width: 88%; height: 88%; }
.inventory-tile-icon > .item-art-icon { width: 1.7em; height: 1.7em; }
.equipment-drop > span > .item-art-icon { width: 1.75em; height: 1.75em; }
/* One hue per rarity tier, no two adjacent tiers sharing a color family, so
   the border/glow alone identifies the tier at a glance without reading the
   label -- previously mythic/ascendant/divine/unique all collapsed to the
   same gold and mythic's purple nearly matched epic's. */
.item-art-icon.rarity-uncommon { filter: drop-shadow(0 0 4px rgba(95,191,95,.75)); }
.item-art-icon.rarity-rare { filter: drop-shadow(0 0 5px rgba(79,158,234,.8)); }
.item-art-icon.rarity-epic { filter: drop-shadow(0 0 6px rgba(168,85,224,.8)); }
.item-art-icon.rarity-legendary { filter: drop-shadow(0 0 6px rgba(224,118,61,.85)); }
.item-art-icon.rarity-mythic { filter: drop-shadow(0 0 7px rgba(224,69,158,.82)); }
.item-art-icon.rarity-ascendant { filter: drop-shadow(0 0 8px rgba(61,217,201,.88)); }
.item-art-icon.rarity-divine { filter: drop-shadow(0 0 9px rgba(255,217,61,.95)) drop-shadow(0 0 5px rgba(156,216,255,.6)); }
.item-art-icon.rarity-founders { filter: drop-shadow(0 0 7px rgba(255,77,77,.85)); }
/* Convergence of the Verge -- the game's only world-drop set, deliberately
   distinct from every level-authored rarity above it: a diagonal two-color
   split (light green / cyan on opposite corners) instead of a single glow
   color, at or above rarity-divine's glow intensity. */
.item-art-icon.rarity-worldset { filter: drop-shadow(0 0 6px rgba(139,232,154,.85)) drop-shadow(0 0 6px rgba(109,227,224,.85)) drop-shadow(0 0 10px rgba(139,232,154,.4)); }
/* Resplendent -- the tier above Divine. Luminous ivory-gold, not the warm
   amber-gold Divine already owns, plus a thin prismatic (many-hue) edge so
   it never reads as "just a brighter Divine" at a glance. */
.item-art-icon.rarity-resplendent { filter: drop-shadow(0 0 10px rgba(244,236,216,.95)) drop-shadow(0 0 6px rgba(255,225,160,.7)) drop-shadow(0 0 4px rgba(200,170,255,.5)); }
.item-svg-icon.rarity-uncommon { color: #5fbf5f; filter: drop-shadow(0 0 3px rgba(95,191,95,.5)); }
.item-svg-icon.rarity-rare { color: #4f9eea; filter: drop-shadow(0 0 3px rgba(79,158,234,.5)); }
.item-svg-icon.rarity-epic { color: #a855e0; filter: drop-shadow(0 0 4px rgba(168,85,224,.5)); }
.item-svg-icon.rarity-legendary { color: #e0763d; filter: drop-shadow(0 0 4px rgba(224,118,61,.55)); }
.item-svg-icon.rarity-mythic { color: #e0459e; filter: drop-shadow(0 0 4px rgba(224,69,158,.5)); }
.item-svg-icon.rarity-ascendant { color: #3dd9c9; filter: drop-shadow(0 0 6px rgba(61,217,201,.6)); }
.item-svg-icon.rarity-divine { color: #ffd93d; filter: drop-shadow(0 0 6px rgba(255,217,61,.8)) drop-shadow(0 0 3px rgba(125,204,255,.7)); }
.item-svg-icon.rarity-founders { color: #ff4d4d; filter: drop-shadow(0 0 4px rgba(255,77,77,.55)); }
.item-svg-icon.rarity-worldset { color: #8be89a; filter: drop-shadow(0 0 5px rgba(139,232,154,.75)) drop-shadow(0 0 5px rgba(109,227,224,.75)); }
.item-svg-icon.rarity-resplendent { color: #f4ecd8; filter: drop-shadow(0 0 7px rgba(244,236,216,.9)) drop-shadow(0 0 4px rgba(255,225,160,.7)) drop-shadow(0 0 3px rgba(200,170,255,.55)); }
.slot-empty-icon { color: var(--muted); opacity: .35; }
.inventory-tile:hover .item-svg-icon, .inventory-tile.selected .item-svg-icon { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--game-warm) 35%, transparent)); }
.item-name { min-width: 0; }
.item-name b { display: block; overflow: hidden; color: var(--ink-soft); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.item-name small { color: var(--muted); font-size: 13px; text-transform: capitalize; }
.item-qty { color: var(--ink); font: 600 15px var(--serif); }
.item-actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 3px; }
.mini-button { border-radius: 4px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); padding: 4px 7px; cursor: pointer; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.mini-button:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.mini-button.primary-mini { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 40%, var(--line)); color: var(--game-warm-bright); }
.mini-button.vault-store-all { box-shadow: inset 0 0 0 1px rgba(255,145,55,.62); color: #ff9d3d; }
.mini-button.vault-store-all:hover { background: rgba(255,145,55,.12); }
.mini-button.protected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 42%, var(--line)); color: var(--success); }
.spell-picker-row { flex-wrap: wrap; }
.spell-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.spell-option { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; border-radius: 8px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: #fff; padding: 8px 10px; cursor: pointer; font-size: 12px; font-weight: 700; }
.spell-option:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.spell-option.selected { box-shadow: inset 0 0 0 2px var(--game-accent); color: #fff; }
.queue-row { flex-direction: column; align-items: stretch; }
.queue-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.queue-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); padding: 5px 6px; font-size: 12px; font-weight: 700; }
.queue-chip small { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10px; margin-right: 2px; }
.queue-chip-move, .queue-chip-remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.queue-chip-move:hover, .queue-chip-remove:hover { color: var(--ink); }
.queue-chip-move:disabled { opacity: .3; cursor: default; }
.queue-chip-remove { color: var(--danger); }
.queue-chip-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; }
.queue-chip-icon img { width: 22px; height: 22px; border-radius: 4px; display: block; }
.queue-chip-index { position: absolute; right: -3px; bottom: -3px; font-style: normal; background: var(--game-accent); color: #1a1206; border-radius: 50%; width: 13px; height: 13px; font-size: 9px; line-height: 13px; text-align: center; font-weight: 800; }
.queue-add-row { display: flex; flex-wrap: wrap; gap: 10px; }
.live-queue-row { gap: 4px; }
.queue-slot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; }
.queue-slot.filled { border: 0; padding: 0; cursor: pointer; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .12s ease; }
.queue-slot.filled:hover { box-shadow: inset 0 0 0 1px var(--danger); }
.queue-slot.filled img { width: 100%; height: 100%; border-radius: 5px; display: block; }
.queue-slot.empty { border: 1px dashed var(--line); background: rgba(0,0,0,.12); }
.queue-slot-add { border: 0; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px var(--line); border-radius: 5px; color: var(--game-warm-bright); font: 700 12px var(--sans); padding: 3px 4px; max-width: 92px; }
.queue-palette { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.queue-palette-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; border: 0; padding: 0; border-radius: 5px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; overflow: hidden; }
.queue-palette-btn:hover { box-shadow: inset 0 0 0 1px var(--game-accent); }
.queue-palette-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.queue-palette-btn span { font-size: 14px; }
.item-related-skills { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.item-related-skill-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.item-related-skill-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-queue-row small { color: var(--muted); font-weight: 800; margin-left: 2px; font-size: 11px; }
.spell-option.locked { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
.spell-option.locked:hover { box-shadow: inset 0 0 0 1px var(--line); }
.viran-cost-badge { color: #c3a6ef; font-weight: 800; font-size: 11px; }
.spell-option .viran-cost-badge { margin-top: 1px; }
.atlas-skill-detail-copy .viran-cost-badge { margin-left: 6px; }
.viran-potion-button { margin: 8px 0; box-shadow: inset 0 0 0 1px var(--weakness); color: var(--weakness); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.viran-potion-button.locked { opacity: .5; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.viran-potion-icon { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.viran-potion-stat { appearance: none; width: 100%; min-height: 52px; grid-template-columns: 1fr; justify-items: center; cursor: pointer; }
.viran-potion-stat .viran-potion-icon { width: 34px; height: 34px; filter: drop-shadow(0 2px 5px rgba(91,58,138,.65)); }
.viran-potion-stat:hover:not(:disabled), .viran-potion-stat:focus-visible { border-color: #a179e0; background: rgba(91,58,138,.2); box-shadow: 0 0 12px rgba(161,121,224,.22); }
.viran-potion-stat.locked { opacity: .5; cursor: not-allowed; }
.tutorial-modal { max-width: 560px; padding: 8px 4px 2px; text-align: center; }
.tutorial-art { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 14px; border: 1px solid color-mix(in srgb, var(--game-accent) 45%, var(--line)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--game-accent) 18%, transparent), rgba(0,0,0,.22)); box-shadow: 0 0 24px color-mix(in srgb, var(--game-accent) 15%, transparent); }
.tutorial-art img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.tutorial-modal .modal-title { margin-bottom: 10px; }
.tutorial-body { min-height: 92px; margin: 0 auto; color: var(--ink-soft); line-height: 1.65; }
.tutorial-progress { display: flex; justify-content: center; gap: 7px; margin: 18px 0; }
.tutorial-progress i { width: 8px; height: 8px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; }
.tutorial-progress i.active { border-color: var(--game-accent); background: var(--game-accent); }
.tutorial-progress i.complete { border-color: var(--game-warm); background: var(--game-warm); }
.tutorial-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 7px; align-items: center; }
html[data-display="classic"] .tutorial-art { border-radius: 4px; box-shadow: none; background: var(--classic-inset); }
html[data-display="classic"] .tutorial-progress i { border-radius: 2px; }
@media (max-width: 520px) { .tutorial-actions { grid-template-columns: 1fr 1fr; } .tutorial-actions span { display: none; } .tutorial-actions button:first-child { grid-column: 1 / -1; } }
.spell-icon { font-size: 22px; position: relative; display: inline-flex; }
.spell-icon img { width: 28px; height: 28px; border-radius: 5px; display: block; }
.spell-icon-count { position: absolute; right: -5px; bottom: -5px; font-style: normal; background: var(--game-accent); color: #1a1206; border-radius: 50%; width: 15px; height: 15px; font-size: 10px; line-height: 15px; text-align: center; font-weight: 800; }
.mini-button.danger-mini { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, var(--line)); color: var(--danger); }
.mini-button.danger-mini:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.sidebar-more-items { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; border: 1px solid color-mix(in srgb, var(--game-accent) 35%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--game-accent) 6%, rgba(0,0,0,.2)); color: var(--ink-soft); padding: 7px 9px; cursor: pointer; font-size: 13px; font-weight: 800; }
.sidebar-more-items:hover { border-color: color-mix(in srgb, var(--game-accent) 62%, var(--line)); background: color-mix(in srgb, var(--game-accent) 11%, rgba(0,0,0,.2)); }
.sidebar-more-items b { color: var(--game-accent); font-size: 12px; }

/* Admin tools */
.tab-admin { color: var(--danger); }
.tab-admin::after { background: var(--danger); }
.tab-admin.active { color: #ff8b7d; }
.tab-judgment-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; vertical-align: middle; animation: judgmentPulse 1.6s ease-in-out infinite; }
@keyframes judgmentPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.admin-banner h2 { color: var(--danger); }
.admin-banner { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 8px; background: linear-gradient(120deg, rgba(207,81,66,.1), var(--panel-2)); }
.admin-offense-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-divine-quests { display: grid; gap: 8px; margin-bottom: 18px; }
.admin-divine-quest-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, #ffd76a 55%, var(--line)); border-radius: 7px; background: color-mix(in srgb, #ffd76a 10%, var(--panel-2)); box-shadow: 0 0 14px rgba(255,215,106,.12); }
.admin-divine-quest-row b { color: #ffd76a; font: 600 15px var(--serif); }
.admin-divine-quest-row > span { color: #ffd76a; font-weight: 800; }
.admin-divine-quest-row small { grid-column: 1 / -1; color: var(--muted); }
.admin-rescue-list { display: grid; gap: 6px; margin-bottom: 18px; max-height: 320px; overflow-y: auto; }
.admin-rescue-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.16); }
.admin-rescue-row.critical { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, rgba(0,0,0,.16)); }
.admin-rescue-hp { font-weight: 800; color: var(--muted); }
.admin-rescue-row.critical .admin-rescue-hp { color: var(--danger); }
.admin-rescue-row small { flex: 1 1 auto; min-width: 120px; color: var(--muted); }
.admin-offense-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid color-mix(in srgb, #ffd76a 45%, var(--line)); border-radius: 7px; background: color-mix(in srgb, #ffd76a 8%, var(--panel-2)); }
.admin-offense-row b { font-size: 14px; color: var(--ink); }
.admin-offense-row small { color: var(--muted); }
.admin-offense-actions { display: flex; gap: 6px; margin-left: auto; }
.admin-player-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-player-row { padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; }
.admin-player-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admin-player-head b { font-size: 15px; color: var(--ink); }
.admin-status-line { color: var(--danger); font-size: 12.5px; font-weight: 700; }
.admin-player-actions, .admin-reward-row, .admin-xp-transfer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 13px; }
.automation-watch-row .admin-status-line { color: var(--muted); font-weight: 600; }
.automation-risk-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font: 700 12px var(--sans); border: 1px solid transparent; }
.automation-risk-normal { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.automation-risk-watch { background: color-mix(in srgb, #d9b64a 18%, transparent); color: #d9b64a; border-color: color-mix(in srgb, #d9b64a 40%, transparent); }
.automation-risk-elevated { background: color-mix(in srgb, #e08a3c 18%, transparent); color: #e08a3c; border-color: color-mix(in srgb, #e08a3c 40%, transparent); }
.automation-risk-high { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.automation-risk-critical { background: var(--danger); color: #fff; border-color: var(--danger); }
.automation-under-review { color: var(--danger); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.automation-event-row { align-items: flex-start; }
.automation-delta-up { color: var(--danger); }
.automation-delta-down { color: var(--success); }
.admin-duration, .admin-reward-gold, .admin-reward-xp, .admin-reward-qty { width: 64px; }
.admin-reward-item { width: 130px; }
.admin-duration, .admin-reward-gold, .admin-reward-xp, .admin-reward-qty, .admin-reward-item, .admin-reward-skill {
  border-radius: 4px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); padding: 4px 6px; font-size: 13px;
}
.admin-reward-row, .admin-xp-transfer-row { padding-top: 4px; border-top: 1px dashed var(--line); }

/* Main world */
.play-space { min-width: 0; padding: 13px 15px 36px; }
.scene-stage { position: relative; }
.dungeon-scene-replacement { min-width: 0; }
.dungeon-scene-replacement .party-arena { min-height: 520px; }
.dungeon-scene-replacement .party-expedition-log { max-height: min(360px, 42vh); }
.scene-chat-feed { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; min-height: 0; transition: opacity .6s ease, max-height .6s ease; overflow: visible; }
.scene-chat-feed:empty, .scene-chat-feed.stale { opacity: 0; max-height: 0; margin-bottom: 0; pointer-events: none; }
.scene-chat-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 7px; min-width: 0; height: auto; padding: 1px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 13px; line-height: 1.35; animation: chatLineIn .35s ease-out; }
.scene-chat-line i { flex: 0 0 auto; }
.scene-chat-line .chat-sender { display: inline-flex; align-items: baseline; flex: 0 0 auto; min-width: 0; gap: 4px; }
.scene-chat-line .chat-sender b { margin: 0; }
.scene-chat-line .chat-sender .chat-clan-tag { flex: 0 0 auto; margin-right: 0; overflow: visible; white-space: nowrap; }
.scene-chat-line .chat-sender .chat-role-tag { flex: 0 0 auto; color: #65c77a; font-size: 10px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.scene-chat-line b { flex: 0 0 auto; color: var(--game-warm); font-weight: 800; white-space: nowrap; }
.scene-chat-line .chat-message-body { display: block; flex: 1 1 auto; min-width: 0; color: var(--ink-soft); overflow: visible; text-overflow: clip; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.scene-chat-line .job-badge, .scene-chat-line .chat-job-tag { flex: 0 0 auto; }
.chat-job-tag { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; white-space: nowrap; }
.shared-log-chip { flex: 0 0 auto; border: none; background: none; padding: 0; color: var(--success); font-weight: 800; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.shared-log-chip:hover { color: color-mix(in srgb, var(--success) 80%, white); }
.party-join-chip { flex: 0 0 auto; border: none; background: none; padding: 0; color: #f0d878; font-weight: 800; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.party-join-chip:hover { color: color-mix(in srgb, #f0d878 80%, white); }
/* Shift-click on any item icon in the game drops one of these inline into
   chat (see linkItemToChat) -- full stats live in the same cursor-following
   hover tooltip every other item icon already uses ([data-tooltip]). */
.chat-item-chip { --chip-accent: var(--line-strong); display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 1px 7px 1px 3px; border-radius: 99px; background: color-mix(in srgb, var(--chip-accent) 16%, rgba(0,0,0,.28)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-accent) 55%, var(--line)); cursor: default; }
.chat-item-chip .item-art-icon, .chat-item-chip .item-svg-icon, .chat-item-chip .item-icon-glyph { width: 16px; height: 16px; font-size: 14px; }
.chat-item-chip b { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--chip-accent) 75%, var(--ink)); }
.chat-item-chip.rarity-uncommon { --chip-accent: #5fbf5f; }
.chat-item-chip.rarity-rare { --chip-accent: #4f9eea; }
.chat-item-chip.rarity-epic { --chip-accent: #a855e0; }
.chat-item-chip.rarity-legendary { --chip-accent: #e0763d; }
.chat-item-chip.rarity-mythic { --chip-accent: #e0459e; }
.chat-item-chip.rarity-ascendant { --chip-accent: #3dd9c9; }
.chat-item-chip.rarity-divine { --chip-accent: #ffd93d; }
.chat-item-chip.rarity-founders { --chip-accent: #ff4d4d; }
.chat-item-chip.rarity-worldset { --chip-accent: #8be89a; }
.chat-item-chip.rarity-resplendent { --chip-accent: #f4ecd8; }
.chat-item-chip-missing { color: var(--muted); font-style: italic; }
.chat-item-chip-bid { border: none; font: inherit; cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.chat-item-chip-bid:hover, .chat-item-chip-bid:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-accent) 55%, var(--line)), 0 0 0 2px color-mix(in srgb, var(--chip-accent) 45%, transparent); transform: translateY(-1px); }
.chat-bid-chip { display: inline-flex; align-items: center; gap: 5px; }
.chat-bid-label { color: var(--game-warm-bright); font: 900 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.chat-bid-accept { margin-left: 3px; padding: 2px 7px; color: #bff7cf; border-color: rgba(101,199,122,.7); }
/* The full "All Active Chats" log reuses the same compact one-line-per-
   message look as the compact scene feed, just without truncation and without the
   fade - there's no fixed 5-message window here, it's meant to be
   scrolled through at length. */
.chat-log-line { margin-bottom: 2px; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; }
.chat-log-line span { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
@keyframes chatLineIn { from { opacity: 0; transform: translateY(-4px); } }
.quick-label { margin: 10px 0 3px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.quick-label[hidden] { display: none; }
.quick-chat-form { display: grid; grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) 34px; gap: 6px; margin: 9px 0 0; }
.quick-chat-form input { min-width: 0; height: 44px; border-radius: 6px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); padding: 0 12px; font-size: 14px; line-height: 1.35; }
.quick-chat-form input:focus-visible { box-shadow: inset 0 0 0 1px var(--game-accent); }
.chat-channel-select { min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.24); color: var(--ink-soft); padding: 0 8px; font-size: 12px; font-weight: 750; }
.scene-card { position: relative; min-height: 250px; overflow: hidden; border-radius: 6px; background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--line-strong), 0 14px 34px rgba(0,0,0,.4); }
.scene-card::before { content: ""; position: absolute; z-index: 3; top: 7px; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--game-warm); opacity: .6; box-shadow: 0 0 6px color-mix(in srgb, var(--game-warm) 70%, transparent); }
.scene-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(3,8,11,.97) 0%, rgba(3,8,11,.48) 38%, transparent 72%); }
.scene-card > img { display: block; width: 100%; min-height: 250px; aspect-ratio: 20/8.5; object-fit: cover; filter: saturate(.88) contrast(1.04); }
.scene-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px; }
.scene-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; min-height: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(5,11,14,.45); color: #c8d0cf; padding: 2px 7px; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.scene-copy h1 { margin: 9px 0 4px; font: 600 clamp(25px, 3.2vw, 37px)/1 var(--serif); letter-spacing: .025em; text-shadow: 0 3px 18px #000; }
.scene-copy p { max-width: 740px; margin: 0; color: #b9c4c3; font-size: 15px; line-height: 1.55; }
.map-stage { position: relative; min-height: 330px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-accent) 18%, var(--line-strong)); border-radius: 11px; background: #091218; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 42px rgba(0,0,0,.22), 0 14px 34px rgba(0,0,0,.2); }
.world-map { display: block; width: 100%; height: 100%; color: var(--game-accent); }
.world-map.full { min-height: 330px; aspect-ratio: 341 / 126; }
.map-ground, .map-world-art, .map-region-art, .map-terrain, .map-grid, .map-vignette { pointer-events: none; }
.map-world-art { opacity: .52; filter: saturate(.82) brightness(.68) contrast(1.08); }
.map-region-art { opacity: .76; filter: saturate(.84) brightness(.64) contrast(1.1); }
.map-region-material { opacity: .14; mix-blend-mode: soft-light; filter: saturate(.72) brightness(.72) contrast(1.06); pointer-events: none; }
.world-map.region .map-region-material, .world-map.mini .map-region-material { opacity: .1; }
.world-map.region .map-world-art, .world-map.mini .map-world-art { opacity: .3; }
.world-map.region .map-region-art, .world-map.mini .map-region-art { opacity: .88; filter: saturate(.9) brightness(.7) contrast(1.08); }
.map-terrain { opacity: .13; }
.map-grid { color: #b5d1d1; opacity: .17; }
.map-vignette { opacity: .9; }
.map-region rect { fill: color-mix(in srgb, var(--region) 4%, rgba(3,10,14,.16)); stroke: color-mix(in srgb, var(--region) 48%, #42565c); stroke-width: 1.7; filter: drop-shadow(0 6px 11px rgba(0,0,0,.28)); }
.map-region text { fill: #ffffff; font-size: 16px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; paint-order: stroke; stroke: #071116; stroke-width: 3px; }
.map-region-fog { fill:#071015 !important; fill-opacity:.9 !important; stroke:rgba(112,133,139,.28) !important; }
.map-region.concealed text { fill:#718187; letter-spacing:.28em; }
.map-road-halo { stroke: rgba(2,8,11,.86); stroke-width: 7px; stroke-linecap: round; opacity: .82; pointer-events: none; }
.map-road-halo.active { stroke: color-mix(in srgb, var(--game-warm) 24%, rgba(2,8,11,.88)); stroke-width: 10px; opacity: .9; }
.map-road { stroke: #71878d; stroke-width: 2.8; stroke-linecap: round; opacity: .84; }
.map-road.special-route { stroke: var(--game-accent); stroke-dasharray: 8 7; }
.map-road.locked-route { stroke: var(--game-warm); opacity: .46; }
.map-road.active { stroke: var(--game-warm); stroke-width: 6; opacity: .92; stroke-dasharray: 13 8; animation: routeFlow 1s linear infinite; }
.map-road.one-way { stroke: var(--game-warm); opacity: .7; }
.map-road-arrow { fill: #b1c1c3; stroke: rgba(3,10,13,.74); stroke-width: .8px; }
.map-node circle { fill: #132830; stroke: #83999e; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.58)); }
.map-node.visited circle { fill: #193039; stroke: #90a9ad; }
.map-node.unvisited circle { opacity: .64; }
.map-node.current circle { stroke: var(--game-accent); stroke-width: 4; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--game-accent) 70%, transparent)); }
.map-node.hub-adjacent circle { stroke: #4ade80; filter: drop-shadow(0 0 6px rgba(74,222,128,.75)); }
.map-node.hub-adjacent.current circle { stroke: var(--game-accent); filter: drop-shadow(0 0 6px rgba(74,222,128,.75)) drop-shadow(0 0 7px color-mix(in srgb, var(--game-accent) 70%, transparent)); }
.map-node-gateway-arrow { fill: #4ade80; filter: drop-shadow(0 0 3px rgba(74,222,128,.8)); }
.map-node.is-market circle { stroke: #f87171; filter: drop-shadow(0 0 6px rgba(248,113,113,.75)); }
.map-node.is-market.current circle { stroke: var(--game-accent); filter: drop-shadow(0 0 6px rgba(248,113,113,.75)) drop-shadow(0 0 7px color-mix(in srgb, var(--game-accent) 70%, transparent)); }
.map-node.destination circle { stroke: var(--game-warm); stroke-width: 4; }
.map-node.is-dungeon circle { stroke: #b98cf0; filter: drop-shadow(0 0 6px rgba(185,140,240,.75)); }
.map-node.is-dungeon.current circle { stroke: var(--game-accent); filter: drop-shadow(0 0 6px rgba(185,140,240,.75)) drop-shadow(0 0 7px color-mix(in srgb, var(--game-accent) 70%, transparent)); }
.map-node.is-raid circle { stroke: #f0a03c; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(240,160,60,.85)); }
.map-node.is-raid.current circle { stroke: var(--game-accent); filter: drop-shadow(0 0 8px rgba(240,160,60,.85)) drop-shadow(0 0 7px color-mix(in srgb, var(--game-accent) 70%, transparent)); }
.map-node.is-worldgate circle { fill: #1c1a22; stroke: #f1dfad; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(242,222,173,.78)) drop-shadow(0 0 11px rgba(139,111,208,.75)); }
.map-node.is-worldgate.current circle { stroke: var(--game-accent); filter: drop-shadow(0 0 6px rgba(242,222,173,.82)) drop-shadow(0 0 12px rgba(139,111,208,.8)); }
.map-worldgate-badge { fill: #fff1bd; font-size: 13px; font-weight: 900; paint-order: stroke; stroke: #18101f; stroke-width: 3px; filter: drop-shadow(0 0 5px rgba(255,235,173,.85)); }
.map-dungeon-badge { font-size: 13px; text-anchor: middle; paint-order: stroke; stroke: #071116; stroke-width: 3px; }
.map-death-badge { fill:#ff8b80; font-size:18px; text-anchor:middle; paint-order:stroke; stroke:#130507; stroke-width:4px; filter:drop-shadow(0 0 6px rgba(255,72,72,.9)); }
.map-node.death-site circle { filter:drop-shadow(0 0 8px rgba(255,72,72,.75)); }
.map-node .map-node-core { fill: #dfeceb; stroke: none; }
.map-node text { fill: #ffffff; font-size: 15px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #071116; stroke-width: 4.5px; stroke-linejoin: round; }
.map-node .map-skill-icons { fill: var(--game-warm); font-size: 15px; letter-spacing: 3px; }
/* Each icon is its own tspan (region map only) so it can be hovered/clicked
   independently - a yellow glow on top of whatever glow the icon already
   has, and a pointer cursor since clicking opens everything trainable for
   that skill here (see atlasSkillDetail). */
.map-skill-icon-btn { cursor: pointer; transition: filter .12s ease; }
.map-skill-icon-btn:hover, .map-skill-icon-btn:focus { fill: #ffe08a; filter: drop-shadow(0 0 7px #ffd76a) drop-shadow(0 0 3px #ffd76a); }
/* Painted-art version of the same clickable icon (images ignore `fill`, so
   the hover glow has to be a filter/brightness combo instead). */
.map-skill-icon-btn-img { cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: filter .12s ease; }
.map-skill-icon-btn-img:hover, .map-skill-icon-btn-img:focus { filter: drop-shadow(0 0 6px #ffd76a) drop-shadow(0 0 3px #ffd76a) brightness(1.15); }
.map-node .map-level-range { fill: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-anchor: middle; paint-order: stroke; stroke: #071116; stroke-width: 3px; stroke-linejoin: round; }
.map-subterranean-entrance circle { fill: #071116; stroke: #8b76cf; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(121, 96, 202, .75)); }
.map-subterranean-entrance image { filter: drop-shadow(0 1px 2px rgba(0,0,0,.88)); }
.map-subterranean-entrance:hover circle { stroke: #d5c3ff; filter: drop-shadow(0 0 8px rgba(137, 106, 235, .95)); }
.dark-letik-map-stage { overflow: auto; border: 1px solid color-mix(in srgb, #8b76cf 42%, var(--line-strong)); border-radius: 10px; background: #020608; box-shadow: inset 0 0 42px rgba(0,0,0,.52); }
.dark-letik-map-stage .dark-letik-map { display: block; width: 100%; min-width: 980px; height: auto; aspect-ratio: 3 / 2; }
.dark-letik-map-art { opacity: .92; filter: saturate(.94) brightness(.76) contrast(1.07); }
.dark-letik-map-vignette { fill: transparent; stroke: rgba(4,8,10,.92); stroke-width: 46px; pointer-events: none; }
.dark-letik-node circle { fill: #101a20; stroke: #b9cdd1; stroke-width: 2.3; }
.dark-letik-node.current circle { stroke: var(--game-warm-bright); stroke-width: 4; }
.dark-letik-node.browsing circle { stroke: #d7c4ff; filter: drop-shadow(0 0 9px rgba(173,139,255,.95)); }
.dark-letik-node text { font-size: 14px; stroke-width: 4px; }
.dark-letik-map .map-road { stroke: #a8bec2; stroke-width: 2.2; opacity: .7; }
.dark-letik-map .map-road-halo { stroke-width: 6px; opacity: .7; }
.dark-letik-map.mini { min-width: 0; aspect-ratio: auto; }
.dark-letik-map.mini .dark-letik-node text { font-size: 15px; }
.dark-letik-arch-callout { margin: 14px 0; padding: 16px; border: 1px solid color-mix(in srgb, #8b76cf 42%, var(--line-strong)); border-radius: 9px; background-size: cover; background-position: center; }
.dark-letik-arch-callout h3 { margin: 2px 0 6px; font: 600 20px var(--serif); }
.dark-letik-arch-callout p { margin: 0; color: var(--ink-soft); }
.player-marker circle { fill: #071015; stroke: var(--game-warm); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--game-warm) 75%, transparent)); }
.player-marker path { fill: var(--game-warm); }
.player-marker.travelling { filter: drop-shadow(0 0 5px var(--game-warm)); }
.map-stage-copy { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 14px; max-width: 690px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(5,11,14,.88); box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
.map-stage-copy .eyebrow { margin-bottom: 4px; font-size: 13px; }
.map-stage-copy h1 { margin: 0; font: 600 clamp(18px, 2.3vw, 27px) var(--serif); }
.map-stage-copy h1 span { color: var(--game-warm); }
.map-stage-copy p:last-child { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.travel-scene-route { margin: 7px 0 10px; overflow: hidden; color: var(--ink-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.travel-scene-route span { color: var(--game-warm); }
.travel-scene-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.travel-scene-meta b { color: var(--game-accent); font-size: 13px; }
.travel-scene-xp { color: var(--game-warm); font-size: 12px; white-space: nowrap; }
.travel-scene-meta .cancel-button { padding: 3px 0; }
.travel-panel-overlay {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(5,11,14,.96), rgba(5,11,14,.88));
  backdrop-filter: blur(6px);
}
.travel-panel-overlay[hidden] { display: none; }
.travel-panel-overlay .meter { height: 6px; }
.travel-status-panel { padding: 9px 12px; }
.travel-status-panel .panel-heading { gap: 8px; }
.travel-status-panel .panel-heading h2 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.travel-status-panel .mini-button { flex: 0 0 auto; }
.travel-status-route { margin: 5px 0; color: var(--muted); font-size: 12px; }
.travel-status-route span { color: var(--game-warm); }
.navigation-calculator { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.navigation-calculator label { display: block; margin-bottom: 4px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.navigation-calculator > div { display: flex; align-items: center; gap: 7px; }
.navigation-calculator input { width: 76px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0,0,0,.24); color: var(--ink); padding: 4px 6px; font: 700 12px var(--sans); }
.navigation-calculator span { color: var(--game-accent); font-weight: 700; }
.travel-status-panel .meter { height: 4px; }
.atlas-map-stage { margin-bottom: 18px; }
.atlas-legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin:-8px 0 16px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.16); color:var(--muted); font-size:11px; }
.atlas-legend b { color:var(--ink-soft); font:600 12px var(--serif); }
.atlas-legend-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.atlas-legend-mark { display:inline-grid; place-items:center; width:14px; height:14px; border:2px solid #90a9ad; border-radius:50%; background:#193039; color:#fff; font-size:9px; font-weight:900; }
.atlas-legend-mark.current { border-color:var(--game-accent); box-shadow:0 0 5px var(--game-accent); }
.atlas-legend-mark.dungeon { border-color:#b98cf0; }
.atlas-legend-mark.raid { border-color:#f0a03c; }
.atlas-legend-mark.lextro { border-color:#ffd36b; background:#4b1610; color:#fff0b0; }
.atlas-legend-mark.shiny { border-color:#4ade80; color:#f8e58b; }
.atlas-legend-mark.market { border-color:#f87171; }
.atlas-legend-mark.worldgate { border-color:#f1dfad; color:#fff1bd; }
.atlas-legend-mark.death { border-color:#ff8b80; color:#ff8b80; }
.combat-arena {
  position: relative; min-height: 430px; overflow: hidden; border-radius: 6px;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(201,161,90,.09), transparent 36%),
    linear-gradient(rgba(22,17,10,.55), rgba(10,7,5,.7)),
    url('/art/system/combat-arena-bg-v1.webp');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 40%, var(--line)), inset 0 0 30px rgba(0,0,0,.5), 0 16px 42px rgba(0,0,0,.45);
}
.combat-arena::before, .combat-arena::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--game-warm); opacity: .55; box-shadow: 0 0 6px color-mix(in srgb, var(--game-warm) 70%, transparent); }
.combat-arena::before { top: 8px; left: 8px; }
.combat-arena::after { bottom: 8px; right: 8px; }
.combat-header { padding: 15px 18px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.combat-header .eyebrow { margin-bottom: 4px; font-size: 13px; }
.combat-header h1 { margin: 0; font: 600 clamp(17px, 2vw, 25px) var(--serif); }
.combat-header h1 span { color: var(--game-warm); font-size: .7em; }
.combat-header h1 span.level-gap-trivial { color: var(--muted); opacity: .7; }
.combat-header h1 span.level-gap-mismatch { color: var(--game-warm-bright); }
.combat-header h1 span.level-gap-severe { color: var(--danger); }
.combat-header > p:last-child { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.combat-info-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 10px 18px 0; }
.combat-info-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); padding: 5px 11px; font-size: 13px; font-weight: 700; }
.combat-focus-picker select { border: 0; background: transparent; color: var(--game-warm-bright); font: 700 13px var(--sans); }
.combat-info-chip.countdown { padding-left: 5px; }
.countdown-ring { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--game-warm) calc(var(--pct, 0%)), rgba(255,255,255,.1) 0); box-shadow: inset 0 0 0 2px var(--panel-2); color: var(--ink); font: 800 11px var(--sans); font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.combat-food-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 18px 0; }
.combat-food-bar:empty { display: none; }
.combat-food-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 30%, var(--line)); color: var(--ink-soft); padding: 5px 8px; cursor: pointer; font: 700 13px var(--sans); }
.combat-food-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 55%, var(--line)); background: color-mix(in srgb, var(--success) 6%, rgba(0,0,0,.2)); }
.combat-food-chip span { font-size: 17px; }
.combat-food-chip b { color: var(--success); font-weight: 800; }

.combatants { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 10px; padding: 15px 18px; }
.combatant { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; }
.combatant.foe { grid-template-columns: 1fr auto; text-align: right; }
.combatant-portrait { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--game-accent) 5%, #0a1217); color: var(--game-accent); font-size: 22px; box-shadow: inset 0 0 22px rgba(109,217,227,.07); }
.combatant.foe .combatant-portrait { border-color: color-mix(in srgb, var(--game-warm) 35%, var(--line)); color: var(--game-warm); box-shadow: inset 0 0 22px rgba(217,147,82,.08); }
.combatant-art { position:relative; width:118px; aspect-ratio:1; flex:0 0 auto; overflow:hidden; border:1px solid rgba(206,156,74,.58); background:radial-gradient(circle,#16222d,#02070b 72%); box-shadow:inset 0 0 0 2px #02070b,0 8px 24px rgba(0,0,0,.5); }
.combatant-art img { width:100%; height:100%; object-fit:cover; display:block; }
.combatant-art-foe img { object-fit: contain; object-position: center bottom; background: radial-gradient(circle at 50% 62%, rgba(52,70,86,.48), rgba(2,7,11,.92) 72%); }
.combatant-art-player { display:grid; place-items:center; }
.combatant-art-player .job-sprite { width:96px; height:96px; }
.combatant-art-foe:hover { box-shadow: inset 0 0 0 2px #02070b, 0 8px 24px rgba(0,0,0,.5), 0 0 0 2px rgba(221,172,89,.6); }
.foe-element-badge { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(221,172,89,.55); background: rgba(2,7,11,.88); color: #f2d59b; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; overflow: hidden; }
.foe-element-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.monster-profile-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.monster-profile-header .modal-title { margin: 0; }
/* A big hero banner rather than a thumbnail -- bleeds to the modal's own
   edges (negative-margins the .modal-box's 22px padding) so the art reads
   as a full reveal, with the name/level overlaid on a scrim at the bottom
   instead of stealing width from the portrait next to it. */
.monster-profile-hero { position: relative; width: calc(100% + 44px); margin: -22px -22px 16px; overflow: hidden; background: #000; }
.monster-profile-art { display: block; width: 100%; height: 300px; object-fit: contain; }
.monster-profile-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 22px 14px; background: linear-gradient(180deg, transparent, rgba(6,4,2,.94) 78%); }
.monster-profile-hero-caption .modal-title { margin: 0; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.monster-profile-hero-caption .muted { color: #e8dfcf; }
.monster-profile-abilities { margin: 8px 0 16px; padding-left: 20px; color: var(--text); }
.monster-profile-abilities li { margin: 5px 0; }
.combat-review-art { height:min(340px,32vh); overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse,rgba(78,42,111,.22),#02070b 72%); border-block:1px solid rgba(206,156,74,.35); }
.combat-review-art img { width:min(520px,92%); height:100%; object-fit:contain; filter:drop-shadow(0 10px 20px #000); }
.combat-review-arena .combat-log { min-height:190px; max-height:340px; }
.expedition-foe-art { min-height:220px; max-height:340px; }
.max-hit-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.1; cursor: help; }
.max-hit-circle small { font-size: 7px; font-weight: 850; letter-spacing: .03em; color: inherit; opacity: .8; text-transform: uppercase; }
.max-hit-circle b { font-size: 16px; font-weight: 800; color: inherit; }
.combatant small { color: var(--muted); font-size: 13px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.combatant h2 { margin: 1px 0 5px; font: 600 20px var(--serif); }
.combatant p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.combat-hp { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.combat-hp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #923f45, var(--danger)); transition: width .25s; }
.combat-hp.foe i { margin-left: auto; background: linear-gradient(90deg, var(--game-warm), #b85e45); }
.combat-hp.viran { margin-top: 5px; }
.combat-hp.viran i { background: linear-gradient(90deg, #5b3a8a, #a179e0); }
.combat-viran-label { margin: 7px 0 3px; font: 600 13px var(--serif); color: #c3a6ef; }
.versus { color: var(--game-warm); font: 700 15px var(--serif); text-align: center; }
.combat-log-head { display: flex; justify-content: space-between; margin: 0 18px; padding: 8px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: rgba(0,0,0,.16); }
.combat-log-head b { font: 600 15px var(--serif); }
.combat-log-head span { color: var(--muted); font-size: 13px; }
.combat-history-button { font-size: 11px; padding: 3px 8px; }
.combat-history-list { display: flex; flex-direction: column; gap: 8px; }
.combat-history-entry { border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.16); overflow: hidden; }
.combat-history-entry summary { cursor: pointer; padding: 9px 11px; display: flex; align-items: center; gap: 8px; list-style: none; }
.combat-history-entry summary::-webkit-details-marker { display: none; }
.combat-history-entry summary small { margin-left: auto; color: var(--muted); }
.combat-history-entry-actions { display: flex; gap: 6px; flex-shrink: 0; }
.combat-history-entry .micro-badge.victory { color: var(--success); }
.combat-history-entry .micro-badge.defeat { color: var(--danger); }
.combat-history-log { height: 220px; margin: 0 0 10px; }
.combat-log { height: 287px; overflow-y: auto; margin: 0 18px; border: 1px solid var(--line); border-radius: 0 0 7px 7px; background: rgba(2,7,9,.34); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.combat-log-row { min-height: 34px; display: grid; grid-template-columns: 82px 1fr 82px; align-items: center; gap: 9px; padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; text-align: center; }
/* The expedition/encounter log (party.js's #partyLog) only ever renders a
   single <span> per row - no player/foe HP columns - so the solo-combat
   3-column grid above left it squeezed into an 82px slot with the rest of
   the row empty. This gives it its own full-width, left-aligned layout and
   more vertical room (~3 extra rows) to actually read while scrolling. */
#partyLog.combat-log { height: 300px; }
#partyLog .combat-log-row { grid-template-columns: 1fr; text-align: left; }
.combat-log-row b { color: var(--muted); font: 600 14px var(--serif); }
/* Current and max HP stack on their own lines (see hpStack() in app.js)
   instead of sharing one "current/max" line -- a raid boss can sit at
   millions of HP, and with no space to wrap on, that string just ran off
   the edge of this column and made the max half unreadable. Each line only
   ever has to fit one number now; word-break is a safety net for anything
   still too wide for the column at extreme values. */
.combat-log-row .log-player-hp, .combat-log-row .log-foe-hp { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; word-break: break-all; }
.combat-log-row .log-player-hp small, .combat-log-row .log-foe-hp small { color: var(--muted); font-size: 10px; font-weight: 600; }
.combat-log-row .log-player-hp { text-align: left; align-items: flex-start; }
.combat-log-row .log-foe-hp { text-align: right; align-items: flex-end; }
/* Only the shared-log ("send to chat") and fight-history views show a
   timestamp column - the live in-progress panel renders its rows inline
   elsewhere and doesn't get one, so this is scoped to .combat-history-log. */
.combat-history-log .combat-log-row { grid-template-columns: 66px 82px 1fr 82px; }
.combat-history-log .combat-log-row .log-time { text-align: left; font: 600 11px var(--sans); color: var(--muted); opacity: .8; letter-spacing: .01em; }
.combat-log-row.player_hit span, .combat-log-row.victory span { color: var(--game-warm); }
.combat-log-row.foe_hit span, .combat-log-row.defeat span { color: var(--danger); }
/* A fresh XP/AP line, hit-taken line, or hit-dealt line wipes in left to
   right rather than just popping in whole -- kill-to-kill repetition reads
   less like the exact same static text reappearing. Only ever applied to a
   genuinely new row (see lastAnimatedCombatSeq in app.js), never replayed on
   rows the player has already seen. The .log-row-fresh class here is just a
   marker app.js queries for -- the actual reveal runs via the Web Animations
   API (el.animate()) right after this HTML is inserted, not a CSS
   transition, so there's no starting visual state to declare here at all. */
.combat-log-row.victory { background: rgba(110,196,148,.05); }
.combat-log-row.oneshot { background: color-mix(in srgb, var(--success) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent); }
.combat-log-row.oneshot span { color: var(--success); font-weight: 800; }
.combat-log-row.steal_hit span { color: var(--game-accent); }
.combat-log-row.item_break { background: rgba(207,81,66,.08); }
.combat-log-row.item_break span { color: var(--danger); font-weight: 700; }
.combat-log-row.encounter { opacity: .55; }
.combat-log-row.encounter span { font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Elemental type feedback (see ELEMENT_ADVANTAGE/ELEMENT_RESISTS in
   server.mjs): a super-effective hit tints purple, a resisted hit tints
   yellow - layered onto whatever kind class (player_hit, foe_hit, gem...)
   the row already carries. */
.combat-log-row.type-weakness span { color: var(--weakness); font-weight: 700; }
.combat-log-row.type-resisted span { color: var(--resisted); }
.skill-xp-tracker { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.skill-xp-tracker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.skill-xp-tracker-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.skill-xp-tracker-head b { font: 600 13px var(--serif); }
.skill-xp-tracker-head small { color: var(--muted); font-size: 12px; }
.skill-xp-tracker-detail { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.live-wood-catalyst-select { max-width: 40%; font-size: 11px; padding: 2px 4px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
.activity-eta-to-level { display: block; margin-top: 4px; color: var(--game-accent); font-size: 11px; font-weight: 700; }
.combat-controls-xp { flex: 1; min-width: 180px; margin-top: 0; }
/* 320px is today's comfortable size for the progress/queue/completed box --
   not a hard ceiling. As level and XP numbers grow long past what fits at
   320px (a future concern once levels climb toward 800), this lets the box
   widen to fit them exactly, capped at whatever room the activity card
   actually has, instead of wrapping or overflowing. */
.activity-card-xp { width: clamp(320px, max-content, 100%); max-width: 100%; }
.combat-log-row.steal_miss span { color: var(--muted); }
.combat-controls { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 18px; }
.combat-controls .action-button { width: auto; min-width: 190px; padding-inline: 13px; }
.retreat-button { margin: 0; padding: 7px; }
.stop-notice { color: var(--success); font-size: 13px; font-weight: 800; }
.activity-card { margin: 10px 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 30%, var(--line)); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--game-warm) 6%, var(--panel-2)), var(--panel-2)); }
.activity-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm) 26%, var(--line)); border-radius: 50%; color: var(--game-warm); }
.activity-card b { display: block; font: 600 16px var(--serif); }
.activity-card small { color: var(--muted); font-size: 13px; }
.activity-card .meter { margin-top: 7px; }
.queue-ledger { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.queue-ledger span { border: 1px solid var(--line); border-radius: 4px; background: rgba(0,0,0,.15); color: var(--muted); padding: 3px 6px; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.queue-ledger span b { display: inline; margin-right: 2px; color: var(--game-warm); font: 700 13px var(--sans); }
.activity-card-yield { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.activity-card-yield-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.15); padding: 5px 10px; max-width: 100%; }
.activity-card-yield-row img, .activity-card-yield-row i { width: 20px; height: 20px; flex-shrink: 0; }
.activity-card-yield-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-card-yield-row b { display: block; font: 700 13px var(--sans); color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.activity-card-yield-row small { display: block; color: var(--muted); font-size: 11px; white-space: normal; overflow-wrap: break-word; }
.activity-meta { text-align: right; }
.activity-meta strong { display: block; color: var(--game-warm); font: 600 16px var(--serif); }
.activity-meta small { display: block; }
.cancel-button { margin-top: 4px; border: 0; background: transparent; color: var(--muted); padding: 2px; cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.tabpage { padding-top: 12px; }
.section-heading { margin: 17px 1px 9px; }
.section-heading:first-child { margin-top: 4px; }
.section-heading h2 { font-size: 19px; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.queue-control { display: flex; align-items: center; gap: 5px; }
.queue-control label { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.queue-control select { height: 28px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--ink-soft); padding: 0 24px 0 8px; font-size: 13px; }
.duration-presets { display: flex; gap: 5px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 8px; }
.action-card {
  position: relative; min-height: 151px; display: flex; flex-direction: column; padding: 13px; border-radius: 6px;
  background: linear-gradient(145deg, var(--panel-2), color-mix(in srgb, var(--game-panel) 96%, black));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.02);
  border: 1px solid rgba(0,0,0,.55);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.action-card::before, .action-card::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--game-warm); opacity: .4; pointer-events: none; }
.action-card::before { top: 5px; left: 5px; }
.action-card::after { bottom: 5px; right: 5px; }
.action-card:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 6px 16px rgba(0,0,0,.3); background: color-mix(in srgb, var(--panel-2) 96%, white); }
.action-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.action-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.28); box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 0 0 1px var(--line); font-size: 22px; overflow: hidden; }
.action-icon > img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.ability-art-icon { width: 100%; height: 100%; display: block; background-image: var(--ability-art); background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--ability-x) var(--ability-y); filter: saturate(1.12) drop-shadow(0 3px 5px rgba(0,0,0,.72)); }
.action-title { flex: 1; min-width: 0; }
.action-title b { display: block; min-width: 0; overflow: visible; overflow-wrap: anywhere; word-break: normal; font: 600 13px var(--serif); line-height: 1.25; }
.action-title small { display: block; min-width: 0; color: var(--game-accent); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.level-chip { border: 1px solid var(--line); border-radius: 4px; color: var(--muted); padding: 2px 5px; font-size: 12px; font-weight: 800; white-space: normal; overflow-wrap: anywhere; text-align: right; }
.level-chip.locked { border-color: rgba(241,120,109,.26); color: var(--danger); }
.foe-level { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: none; letter-spacing: normal; vertical-align: middle; }
/* Colored by level gap to your own combat level - see levelGapClass() in
   app.js. Trivial (15+ below you) fades to grey, a 6-14 level mismatch
   either direction reads as a caution orange, and 15+ above you (real
   danger) reads as red. Within 5 levels either way keeps the plain default
   color above. */
.foe-level.level-gap-trivial { color: var(--muted); opacity: .6; }
.foe-level.level-gap-mismatch { color: var(--game-warm-bright); }
.foe-level.level-gap-severe { color: var(--danger); font-weight: 800; }
.action-detail { flex: 1; min-width: 0; margin: 10px 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.action-detail span { color: var(--ink-soft); }
.action-detail b { color: var(--danger); font-size: 13px; }
.combat-action-card { border-color: color-mix(in srgb, var(--game-warm) 24%, var(--line)); }
.lextro-card-grid { margin-bottom: 9px; }
.lextro-combat-card { min-width: 0; }
.lextro-card-art { display: block; width: 100%; height: 104px; object-fit: cover; object-position: center; margin: -2px 0 9px; border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line)); border-radius: 4px; background: radial-gradient(circle, rgba(255,84,31,.24), rgba(13,8,7,.9)); }
.combat-prep { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(310px, 1.3fr); gap: 15px; margin-bottom: 9px; padding: 13px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: 8px; background: linear-gradient(120deg, rgba(241,120,109,.055), var(--panel-2)); }
.combat-prep .eyebrow { margin-bottom: 3px; font-size: 12px; }
.combat-prep h3 { margin: 0; font: 600 16px var(--serif); }
.combat-prep p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.combat-prep-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; }
.combat-prep-controls label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.combat-prep-controls select { height: 30px; max-width: 260px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.18); color: var(--ink-soft); padding: 0 7px; font-size: 13px; }
.combat-prep-controls .prep-check { grid-template-columns: auto 1fr; align-items: center; max-width: 210px; min-height: 30px; letter-spacing: 0; text-transform: none; }
.combat-prep-controls .prep-check input { margin: 0; accent-color: var(--game-warm); }
.eyebrow-inline { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.combat-preset-row { align-items: center; }
.combat-preset-slot { display: inline-flex; gap: 4px; }
.combat-preset-save-button { padding: 0 8px; }
.ground-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 7px; }
.ground-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--success) 3%, var(--panel-2)); }
.ground-item > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 5px; background: rgba(0,0,0,.28); box-shadow: inset 0 2px 4px rgba(0,0,0,.65), inset 0 0 0 1px var(--line); font-size: 19px; }
.ground-item b { display: block; font: 600 14px var(--serif); }
.ground-item small { color: var(--muted); font-size: 13px; }
.ground-item-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.ground-item-actions .mini-button { white-space: nowrap; }
.ground-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ground-indicator { font-size: 13px; font-weight: 600; }
.ground-indicator.alert { color: var(--game-warm); }
.ground-indicator.empty { color: var(--muted); font-weight: 400; }
.ground-controls-buttons { display: flex; gap: 8px; }
.ground-drop-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.ground-drop-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.16); cursor: pointer; }
.ground-drop-row:hover { border-color: var(--line-strong); }
.ground-drop-icon { display: flex; }
.ground-drop-name { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; color: var(--ink); }
.ground-drop-name small { font-weight: 400; color: var(--muted); }
.ground-drop-qty { width: 70px; height: 30px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.24); color: var(--ink); padding: 0 8px; font-size: 13px; }
.sell-qty-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.sell-qty-row input[type="number"] { width: 80px; }
.sell-qty-row .mini-button { flex: 1; }
.action-button { width: 100%; min-height: 33px; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--game-warm) 16%, var(--panel-2)), color-mix(in srgb, var(--game-warm) 6%, #0a0705)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 40%, var(--line)), 0 2px 6px rgba(0,0,0,.3); color: var(--game-warm-bright); cursor: pointer; font-size: 13px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; transition: transform .1s, box-shadow .1s; }
.action-button:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--game-warm) 24%, var(--panel-2)), color-mix(in srgb, var(--game-warm) 10%, #0a0705)); }
.action-button:active { transform: translateY(1px); }
.action-button:disabled { background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--line); color: #5a5346; cursor: not-allowed; transform: none; }
.empty-state { min-height: 130px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.empty-state b { display: block; margin-bottom: 3px; color: var(--ink-soft); font: 600 16px var(--serif); }

/* Travel, chat, chronicle */
.minimap-wrap { position: relative; height: 190px; overflow: hidden; margin: 9px 0 12px; border: 1px solid color-mix(in srgb, var(--game-accent) 18%, var(--line)); border-radius: 8px; background: #091319; box-shadow: inset 0 0 22px rgba(0,0,0,.24), 0 6px 15px rgba(0,0,0,.13); }
.minimap-scroll { width: 100%; height: 100%; overflow: hidden; background: #091319; scrollbar-width: thin; scrollbar-color: var(--line-strong) #091319; }
.world-map.mini { width: 100%; height: 100%; }
.world-map.mini .map-node text { font-size: 15px; }
.world-map.mini .map-node .map-skill-icons { fill: var(--game-warm); font-size: 12px; letter-spacing: 2px; }
.world-map.mini .map-road-halo { stroke-width: 8px; }
.world-map.mini .map-road { stroke-width: 3.5px; }
.minimap-key { position: absolute; left: 7px; bottom: 6px; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.055); border-radius: 99px; background: rgba(4,9,12,.88); box-shadow: 0 3px 9px rgba(0,0,0,.25); color: var(--ink-soft); padding: 3px 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.minimap-skill-row { display: flex; flex-wrap: wrap; gap: 5px; margin: -6px 0 12px; }
.minimap-skill-icon-img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.minimap-skill-icon-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--game-accent) 12%, #0a1217); font-size: 13px; }
.minimap-key i { width: 6px; height: 6px; border-radius: 50%; background: var(--game-warm); box-shadow: 0 0 7px var(--game-warm); }
.route { position: relative; width: 100%; min-height: 64px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 8px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(105deg, rgba(16,31,38,.96), rgba(5,13,17,.96)); color: var(--ink-soft); padding: 7px; cursor: pointer; text-align: left; animation: routeCardArrive .34s ease both; }
.route::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.08) 43%, transparent 57%); background-size: 230% 100%; opacity: .18; pointer-events: none; animation: routeSheen 7.5s ease-in-out infinite; }
.route:hover { border-color: color-mix(in srgb, var(--game-accent) 48%, var(--line)); background: linear-gradient(105deg, rgba(22,53,62,.98), rgba(5,15,19,.98)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--game-accent) 17%, transparent), 0 7px 18px rgba(0,0,0,.22); }
.route:disabled { opacity: .48; cursor: not-allowed; }
.route-art { position: relative; width: 50px; height: 50px; display: block; overflow: visible; border: 1px solid color-mix(in srgb, var(--game-warm) 44%, var(--line)); border-radius: 9px; background: #071116; box-shadow: inset 0 0 0 2px rgba(0,0,0,.64), 0 0 13px rgba(79,184,255,.12); }
.route-art > img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 8px; filter: saturate(1.12) contrast(1.08) brightness(.86); transform: scale(1.08); animation: routeSceneDrift 8s ease-in-out infinite; }
.route-art::after { content: ""; position: absolute; inset: 1px; border-radius: 8px; background: linear-gradient(125deg, rgba(255,255,255,.2), transparent 28%, transparent 70%, rgba(201,161,90,.16)); pointer-events: none; mix-blend-mode: screen; }
.route-requirement-art { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--game-warm-bright); border-radius: 6px; background: #071116; box-shadow: 0 0 0 2px rgba(3,9,12,.9), 0 0 9px rgba(201,161,90,.35); animation: routeBadgeBreathe 2.6s ease-in-out infinite; }
.route-requirement-art .ui-icon, .route-requirement-art .item-art-icon, .route-requirement-art .item-svg-icon { width: 100%; height: 100%; }
.route-requirement-art .ui-icon { object-fit: contain; padding: 2px; }
.route-requirement-art .item-art-icon { display: block; background-size: cover; }
.route-requirement-art .item-icon-glyph { display: none; }
.route-copy { min-width: 0; }
.route b { display: block; font: 600 14px var(--serif); }
.route small { display: block; color: var(--muted); font-size: 13px; }
.route-time { color: var(--game-accent); font-size: 13px; font-weight: 800; }
.route-time small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.route-training { display: flex; align-items: center; min-height: 18px; margin-top: 5px; }
.route-skills { display: inline-flex; align-items: center; gap: 3px; color: var(--game-accent); }
.route-skills { flex-wrap: wrap; }
.route-training-range { flex-basis: 100%; color: var(--muted); font-size: 10px; line-height: 1.1; white-space: nowrap; }
.route-skills img, .route-skills i { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(201,161,90,.35); border-radius: 4px; background: #071116; object-fit: cover; font-style: normal; font-size: 11px; }
.route-skills-multi { gap: 4px; color: var(--game-warm-bright); font-size: 18px; text-shadow: 0 0 8px rgba(201,161,90,.65); }
.route-skills-multi small { font-size: 10px; color: var(--muted); }
.route-skills.undiscovered { color: var(--muted); font-size: 14px; }
.pvp-route-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 2px 6px 2px 5px; border: 1px solid rgba(255, 147, 67, .82); border-radius: 999px; background: linear-gradient(135deg, #6f171d 0%, #a82b1b 52%, #ed7835 100%); color: #fff3d5; box-shadow: 0 0 0 1px rgba(104, 11, 22, .38), 0 0 12px rgba(234, 73, 35, .48), inset 0 1px 0 rgba(255, 228, 166, .38); font: 900 9px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; animation: pvp-route-flare 2.4s ease-in-out infinite; }
.pvp-route-badge i { width: 12px; height: 12px; display: inline-block; background: url('/art/ui/icons/explosion-burst.png') center / contain no-repeat; filter: saturate(1.35) drop-shadow(0 0 5px rgba(255,93,42,.9)); animation: pvpBadgeSpark 1.35s ease-in-out infinite; }
.crownless-route-chip .pvp-route-badge { margin-left: 5px; padding-inline: 5px; font-size: 8px; vertical-align: 1px; }
@keyframes pvp-route-flare { 0%, 100% { filter: saturate(.92) brightness(.96); box-shadow: 0 0 0 1px rgba(104, 11, 22, .38), 0 0 9px rgba(234, 73, 35, .36), inset 0 1px 0 rgba(255, 228, 166, .3); } 50% { filter: saturate(1.18) brightness(1.12); box-shadow: 0 0 0 1px rgba(255, 113, 51, .54), 0 0 17px rgba(255, 79, 33, .72), inset 0 1px 0 rgba(255, 239, 187, .58); } }
@media (prefers-reduced-motion: reduce) { .pvp-route-badge { animation: none; } }
@keyframes routeCardArrive { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes routeSheen { 0%, 58% { background-position: 150% 0; opacity: 0; } 68% { opacity: .22; } 82%, 100% { background-position: -40% 0; opacity: 0; } }
@keyframes routeSceneDrift { 0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); filter: saturate(1.08) contrast(1.06) brightness(.84); } 50% { transform: scale(1.16) translate3d(2px, -1px, 0); filter: saturate(1.22) contrast(1.1) brightness(1); } }
@keyframes routeBadgeBreathe { 0%, 100% { transform: translate(0, 0) scale(.92); } 50% { transform: translate(0, -2px) scale(1.06); } }
@keyframes pvpBadgeSpark { 0%, 100% { transform: rotate(-4deg) scale(.88); } 50% { transform: rotate(4deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .route, .route::before, .route-art > img, .route-requirement-art, .pvp-route-badge i { animation: none; } }
.item-fallback-art { width: 100%; height: 100%; display: grid; place-items: center; }
.item-fallback-art .ui-icon { width: 72%; height: 72%; object-fit: contain; filter: saturate(1.18) drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.chronicle-list { max-height: 60vh; overflow-y: auto; }
.chronicle-entry { position: relative; padding: 8px 3px 8px 17px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.chronicle-entry::before { content: ""; position: absolute; left: 3px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--game-warm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-warm) 8%, transparent); }
.chronicle-entry small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.chat-panel { margin-bottom: 0; }
.world-chat-panel { margin-top: 20px; padding: 15px; }
.online-dot { color: var(--success); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.online-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; vertical-align: 1px; }
.chat-heading-actions { display: flex; align-items: center; gap: 10px; }
.chat-history-top { display: flex; justify-content: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
#chat { height: 640px; overflow: auto; margin-top: 9px; padding-right: 5px; padding-bottom: 24px; scroll-padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#chatForm { display: grid; grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) 31px; gap: 5px; margin-top: 8px; }
#chatForm input { min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.16); color: var(--ink); padding: 0 9px; font-size: 13px; }
.icon-button { width: 31px; height: 31px; border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--game-warm) 9%, transparent); color: var(--game-warm); cursor: pointer; font-weight: 900; }

/* Atlas, skills, quests, ranks */
.inventory-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 170px 150px; gap: 7px; margin-bottom: 10px; padding: 11px; border: 1px solid color-mix(in srgb, var(--game-warm) 20%, var(--line)); border-radius: 8px; background: radial-gradient(circle at 0 0, rgba(157,113,61,.09), transparent 28%), linear-gradient(145deg, #121d21, #0b1317); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.13); }
.inventory-toolbar label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inventory-toolbar input, .inventory-toolbar select { width: 100%; height: 32px; border: 1px solid color-mix(in srgb, var(--game-accent) 10%, var(--line)); border-radius: 5px; background: linear-gradient(180deg, rgba(2,8,11,.46), rgba(10,19,23,.62)); color: var(--ink-soft); padding: 0 8px; font-size: 13px; }
.inventory-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 11px; padding: 11px; border: 2px solid color-mix(in srgb, var(--game-warm) 46%, var(--line-strong)); border-radius: 11px; background: radial-gradient(ellipse at 34% 0, rgba(180,123,57,.17), transparent 46%), repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px), linear-gradient(145deg, #17252a, #080e12); box-shadow: inset 0 0 0 1px rgba(0,0,0,.72), inset 0 0 46px rgba(0,0,0,.3), 0 16px 34px rgba(0,0,0,.26); }
.inventory-icon-grid { max-height: 680px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; gap: 9px; padding: 11px; border: 1px solid color-mix(in srgb, var(--game-warm) 25%, #53656a); border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 145px, rgba(218,165,92,.13) 145px 147px, rgba(0,0,0,.34) 147px 156px), repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 132px), linear-gradient(145deg, rgba(26,43,49,.94), rgba(5,11,14,.92)); box-shadow: inset 0 0 30px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.inventory-tile { --inventory-accent: #819ba1; position: relative; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--inventory-accent) 58%, #26373d); border-radius: 7px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--inventory-accent) 15%, transparent), transparent 52%), linear-gradient(145deg, #1c2d33, #0a1115 72%); box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -15px 22px rgba(0,0,0,.28), 0 5px 12px rgba(0,0,0,.25); color: var(--ink-soft); padding: 11px 8px; cursor: pointer; text-align: center; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.inventory-tile::before { content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: var(--inventory-accent); opacity: .48; box-shadow: 0 0 8px var(--inventory-accent); }
.inventory-tile:hover, .inventory-tile.selected { border-color: color-mix(in srgb, var(--inventory-accent) 72%, var(--line)); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--inventory-accent) 13%, transparent), transparent 52%), linear-gradient(145deg, #17262b, #0a1115 72%); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 6px 14px rgba(0,0,0,.24), 0 0 13px color-mix(in srgb, var(--inventory-accent) 10%, transparent); transform: translateY(-1px); }
.inventory-tile.is-equipped { border-color: color-mix(in srgb, var(--game-accent) 62%, var(--inventory-accent)); }
.inventory-tile.rarity-uncommon { --inventory-accent: #5fbf5f; }
.inventory-tile.rarity-rare { --inventory-accent: #4f9eea; }
.inventory-tile.rarity-epic { --inventory-accent: #a855e0; }
.inventory-tile.rarity-legendary { --inventory-accent: #e0763d; }
.inventory-tile.rarity-mythic { --inventory-accent: #e0459e; }
.inventory-tile.rarity-ascendant { --inventory-accent: #3dd9c9; }
.inventory-tile.rarity-divine { --inventory-accent: #ffd93d; }
/* Convergence of the Verge: the diagonal split can't be expressed with the
   single-color --inventory-accent variable every other rarity uses, so this
   is a genuinely different technique -- a conic-gradient border-image sliced
   into four quadrants. Quadrant math: a conic-gradient's [0,90] arc sweeps
   through the box's actual top-right corner, [90,180] through bottom-right,
   [180,270] through bottom-left, [270,360] through top-left -- so opposite
   arcs land on opposite corners, matching "light green top-left/bottom-right,
   cyan top-right/bottom-left" exactly. */
.inventory-tile.rarity-worldset { --inventory-accent: #8be89a; border-width: 2px; border-image: conic-gradient(from 0deg, #6de3e0 0deg 90deg, #8be89a 90deg 180deg, #6de3e0 180deg 270deg, #8be89a 270deg 360deg) 1; box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -15px 22px rgba(0,0,0,.28), 0 5px 12px rgba(0,0,0,.25), 0 0 14px rgba(139,232,154,.4), 0 0 14px rgba(109,227,224,.3); }
.inventory-tile.rarity-resplendent { --inventory-accent: #f4ecd8; border-width: 2px; border-image: conic-gradient(from 0deg, #f4ecd8 0deg 60deg, #ffe1a0 60deg 120deg, #c8aaff 120deg 180deg, #f4ecd8 180deg 240deg, #a8d8ff 240deg 300deg, #ffe1a0 300deg 360deg) 1; box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -15px 22px rgba(0,0,0,.28), 0 5px 12px rgba(0,0,0,.25), 0 0 16px rgba(244,236,216,.5), 0 0 16px rgba(200,170,255,.3); }
.inventory-tile.rarity-founders { --inventory-accent: #ff4d4d; }
/* ultraRare is independent of the item's own rarity tier -- it's a "roughly
   1-in-10,000-or-worse drop odds" flag that can land on any rarity, so it
   layers a cyan/green ring on top rather than replacing the rarity color.
   This is a baseline marker only; a snazzy hover-glow pass is planned
   separately (see the ultra-rare-hover-glow brief). */
.inventory-tile.ultra-rare { border-width: 2px; border-image: conic-gradient(from 0deg, #6de3e0 0deg 90deg, #8be89a 90deg 180deg, #6de3e0 180deg 270deg, #8be89a 270deg 360deg) 1; }
.inventory-tile-icon { position: relative; z-index: 1; font-size: 42px; filter: drop-shadow(0 4px 7px rgba(0,0,0,.52)); }
.inventory-tile b { max-width: 100%; overflow: visible; font: 600 14px var(--serif); overflow-wrap: anywhere; white-space: normal; }
.inventory-tile strong { position: absolute; z-index: 2; left: 6px; right: auto; top: auto; bottom: 6px; min-width: 6ch; border: 1px solid rgba(255,255,255,.055); border-radius: 99px; background: rgba(2,8,11,.86); box-shadow: 0 2px 6px rgba(0,0,0,.34); color: color-mix(in srgb, var(--inventory-accent) 70%, var(--game-warm-bright)); padding: 2px 6px; font-size: 13px; line-height: 1.2; text-align: center; white-space: nowrap; }
.inventory-equipped-badge { position: absolute; z-index: 3; top: 6px; right: 6px; min-width: 18px; border: 1px solid color-mix(in srgb, var(--game-accent) 70%, var(--line)); border-radius: 99px; background: rgba(6,30,35,.92); box-shadow: 0 0 8px color-mix(in srgb, var(--game-accent) 22%, transparent); color: var(--game-accent); padding: 2px 5px; font: 900 10px/1 var(--sans); text-align: center; }
.inventory-tile small { color: var(--muted); font-size: 12px; text-transform: capitalize; }
/* The full vault is an icon-first surface. Item names and types are available
   through the tile tooltip on hover and the inspection panel after selection,
   so they should not consume the narrow tile height or collide with the qty
   badge. Keep the elements in the DOM for accessibility and responsive
   fallbacks, but visually suppress them in this grid. */
.inventory-workspace > .inventory-icon-grid > .inventory-tile > b,
.inventory-workspace > .inventory-icon-grid > .inventory-tile > small { display: none; }
.sidebar-icon-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.compact-tile { min-height: 64px; padding: 5px; border-radius: 6px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inventory-accent) 18%, transparent), transparent 58%), linear-gradient(145deg, rgba(33,51,58,.98), rgba(7,13,16,.98)); }
.compact-tile .inventory-tile-icon { font-size: 27px; }
.compact-tile strong { left: 3px; right: auto; top: auto; bottom: 3px; min-width: 6ch; padding: 1px 3px; font-size: 10px; }
.compact-tile.is-equipped { border-color: color-mix(in srgb, var(--game-accent) 58%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 15%, transparent), 0 0 9px color-mix(in srgb, var(--game-accent) 8%, transparent); }
.inventory-sidebar-detail { margin-top: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--game-warm) 19%, var(--line-strong)); border-radius: 7px; background: linear-gradient(145deg, #121d21, #0a1216); }
.inventory-sidebar-detail b { display: block; font: 600 15px var(--serif); }
.inventory-sidebar-detail small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; text-transform: capitalize; }
.inventory-sidebar-detail .item-actions { margin-top: 8px; }
/* overflow was `hidden` with no scroll mechanism and no max-height cap --
   harmless for a short item, but an item with a long stat list (many bonus
   fields, lore text) had nowhere to go: the panel just clipped it with no
   way to reach the rest. Capping height to the viewport and scrolling
   internally means everything stays reachable no matter how long it gets. */
.item-detail { min-height: 310px; max-height: calc(100vh - 97px); align-self: start; position: sticky; top: 77px; overflow-y: auto; overflow-x: hidden; padding: 17px; border: 1px solid color-mix(in srgb, var(--game-warm) 26%, var(--line-strong)); border-radius: 8px; background: radial-gradient(circle at 100% 0, rgba(155,112,59,.1), transparent 31%), linear-gradient(145deg, #121e22, #0a1216); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 20px rgba(0,0,0,.18); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.item-detail::before { content: ""; position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-top: 1px solid rgba(207,164,100,.17); border-right: 1px solid rgba(207,164,100,.17); border-radius: 0 6px 0 0; pointer-events: none; }
.item-detail-icon { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line)); border-radius: 10px; background: radial-gradient(circle at 50% 36%, rgba(181,137,76,.1), transparent 58%), rgba(0,0,0,.28); box-shadow: inset 0 0 16px rgba(0,0,0,.2), 0 5px 12px rgba(0,0,0,.24); font-size: 32px; }
.item-detail .eyebrow { margin: 0 0 3px; font-size: 12px; }
.item-detail h3 { margin: 0; font: 600 21px var(--serif); overflow-wrap: anywhere; }
.item-detail > p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.item-lore { margin: 8px 0 !important; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.2); border-left: 2px solid var(--game-warm); color: var(--ink-soft) !important; font: italic 13px/1.5 var(--serif) !important; }
.item-detail.unique-item { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line-strong)), 0 0 24px color-mix(in srgb, var(--game-warm) 12%, transparent); }
.item-detail.unique-item h3 { color: var(--game-warm-bright); }
.item-property-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 12px 0; }
.item-property-list span, .equipment-total-grid span { padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.12); }
.item-property-list small, .equipment-total-grid small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.item-property-list b, .equipment-total-grid b { font: 600 16px var(--serif); }
/* Diablo-style set bonuses: every threshold a set defines, met tiers marked
   with a check, so it's obvious both what's active now and what finishing
   the set would add. See setBonusPanelHTML / setBonusTierRows. */
.set-bonus-card { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--set-color) 45%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--set-color) 8%, rgba(0,0,0,.16)); }
.set-bonus-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.set-bonus-header b { font: 700 14px var(--serif); color: var(--set-color); }
.set-bonus-header span { color: var(--muted); font-size: 12px; font-weight: 700; }
.set-bonus-lore { margin: 4px 0 8px; color: var(--muted); font-size: 12px; font-style: italic; }
.set-bonus-tier { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--set-color-dim); }
.set-bonus-tier:first-of-type { border-top: none; }
.set-bonus-tier.active { color: var(--set-color); font-weight: 700; }
.set-bonus-threshold { flex: 0 0 auto; min-width: 34px; font-weight: 800; color: var(--set-color-dim); }
.set-bonus-tier.active .set-bonus-threshold { color: var(--set-color); }
.set-bonus-effect { flex: 1 1 auto; }
.item-detail-actions { display: grid; gap: 6px; }
.shop-buy-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 7px; border: 1px solid color-mix(in srgb, var(--game-warm) 22%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--game-warm) 5%, #090d10); }
.shop-quantity-stepper { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-accent) 26%, var(--line)); border-radius: 5px; background: #091116; }
.shop-quantity-stepper .mini-button { min-width: 28px; padding: 1px 7px; border: 0; border-radius: 0; background: transparent; color: var(--game-warm-bright); font-size: 17px; line-height: 1; }
.shop-quantity-stepper .mini-button:hover { background: color-mix(in srgb, var(--game-accent) 14%, transparent); }
.shop-quantity-input { width: 48px; border: 0; border-inline: 1px solid color-mix(in srgb, var(--game-accent) 20%, var(--line)); background: transparent; color: var(--ink); text-align: center; font-weight: 800; appearance: textfield; }
.shop-quantity-input::-webkit-outer-spin-button, .shop-quantity-input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.shop-buy-total { color: var(--game-warm-bright); font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.auction-card.auction-winning { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 55%, var(--line-strong)), 0 6px 16px rgba(0,0,0,.3); }
.level-chip.winning { border-color: color-mix(in srgb, var(--game-accent) 55%, var(--line)); color: var(--game-accent); }
.auction-bid-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.auction-bid-input { min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.22); color: var(--ink); font: 600 13px var(--sans); }
.trophy-row { margin: 10px 0; }
.trophy-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.trophy-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 800 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.trophy-badge.trophy-none { background: rgba(255,255,255,.06); color: var(--muted); }
.trophy-badge.trophy-bronze { background: rgba(205,127,50,.22); color: #cd7f32; }
.trophy-badge.trophy-silver { background: rgba(192,192,192,.22); color: #c9c9c9; }
.trophy-badge.trophy-gold { background: rgba(230,195,126,.25); color: var(--game-warm-bright); }
.trophy-progress-track { height: 8px; border-radius: 5px; background: rgba(0,0,0,.28); overflow: hidden; }
.trophy-progress-fill { height: 100%; border-radius: 5px; background: var(--muted); }
.trophy-progress-fill.trophy-fill-bronze { background: #cd7f32; }
.trophy-progress-fill.trophy-fill-silver { background: #c9c9c9; }
.trophy-progress-fill.trophy-fill-gold { background: var(--game-warm-bright); }
.trophy-raid-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.trophy-raid-row:last-child { border-bottom: none; }
.trophy-raid-row.cleared b { color: var(--game-warm-bright); }

/* The Lawless Hold -- full-loot open-world PvP region. */
.crownless-region-panel, .crownless-combat-panel { border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 8px; }
.crownless-warning-list { text-align: left; margin: 10px 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.crownless-warning-list li::marker { color: var(--danger); }
.crownless-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.crownless-route-chip { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; color: var(--ink); cursor: pointer; }
.crownless-route-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.crownless-route-chip b { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.crownless-route-chip.crownless-route-controlled { box-shadow: inset 0 0 0 1px var(--danger); }
.crownless-route-chip.crownless-route-controlled small { color: var(--danger); font-weight: 800; }
.crownless-route-chip.crownless-route-none { opacity: .4; cursor: default; box-shadow: none; }
.pvp-attack-actions { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; }
.chase-mini { color: #f3d788; border-color: color-mix(in srgb, #f3d788 55%, var(--line)); background: linear-gradient(135deg, rgba(82,57,22,.65), rgba(24,18,10,.72)); }
.chase-mini:hover { box-shadow: 0 0 16px rgba(243,215,136,.22), inset 0 0 0 1px #f3d788; }
.crownless-fallen-packs, .crownless-tracking { margin: 10px 0; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.15); }
.crownless-fallen-pack-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.crownless-logout-channel { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(207,81,66,.15); color: var(--danger); font-weight: 700; font-size: 13px; }
.crownless-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
.crownless-occupancy { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 32%, var(--line)); border-radius: 8px; background: linear-gradient(135deg, rgba(19,28,29,.78), rgba(0,0,0,.24)); }
.crownless-occupancy .section-heading { margin: 0 0 8px; }
.crownless-occupancy-row { display: grid; grid-template-columns: 10px minmax(90px, .55fr) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 28px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.crownless-occupancy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--game-warm); box-shadow: 0 0 8px rgba(224,184,90,.8); }
.crownless-occupancy-dot.moving { background: #d96c55; box-shadow: 0 0 8px rgba(217,108,85,.9); animation: crownlessOccupancyPulse 1s ease-in-out infinite; }
.crownless-occupancy-row small { color: var(--muted); overflow-wrap: anywhere; }
.crownless-occupant circle { fill: #d96c55; stroke: #f0d878; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(217,108,85,.85)); }
.crownless-occupant text { fill: var(--ink); font-size: 13px; font-weight: 800; paint-order: stroke; stroke: rgba(7,10,12,.9); stroke-width: 4px; stroke-linejoin: round; }
.crownless-occupant.travelling circle { animation: crownlessOccupancyPulse 1s ease-in-out infinite; }
@keyframes crownlessOccupancyPulse { 50% { transform: scale(1.3); opacity: .65; } }
.crownless-side h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.crownless-combatant { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 8px; }
.crownless-combatant-name { font-size: 13px; font-weight: 700; }
.crownless-hp-track { height: 10px; border-radius: 5px; background: rgba(0,0,0,.3); overflow: hidden; }
.crownless-hp-fill { height: 100%; background: linear-gradient(90deg, var(--danger), var(--game-warm-bright)); }
.crownless-combatant-dead { opacity: .45; }
.crownless-combatant-dead .crownless-hp-fill { background: var(--muted); }
.crownless-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.crownless-combat-log { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.25); max-height: 220px; overflow-y: auto; font-size: 13px; line-height: 1.5; }
.crownless-combat-log p { margin: 2px 0; }
.equipment-workspace { display: grid; grid-template-columns: minmax(620px, 1.15fr) 285px; align-items: start; gap: 14px; }
.equipment-loadout { min-width: 0; overflow: visible; border: 2px solid color-mix(in srgb, var(--game-warm) 58%, var(--line-strong)); border-radius: 11px; background: #091116; box-shadow: 0 18px 38px rgba(0,0,0,.32), inset 0 0 0 1px rgba(0,0,0,.72), 0 0 20px color-mix(in srgb, var(--game-warm) 7%, transparent); }
.equipment-loadout-bar { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 10px 15px; border-bottom: 1px solid color-mix(in srgb, var(--game-warm) 42%, var(--line-strong)); background: radial-gradient(circle at 0 50%, rgba(205,139,64,.18), transparent 30%), linear-gradient(90deg, #26302e, #111d21 48%, #0a1115); box-shadow: inset 0 1px rgba(255,255,255,.045), inset 0 -8px 18px rgba(0,0,0,.2); border-radius: 9px 9px 0 0; }
.equipment-loadout-bar > div:first-child { display: grid; }
.equipment-loadout-bar .eyebrow { margin: 0; font-size: 10px; }
.equipment-loadout-bar > div:first-child b { color: var(--ink); font: 600 16px var(--serif); }
.equipment-loadout-bar > span { justify-self: center; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.equipment-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 8px; }
.equipment-legend i { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.equipment-legend i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #81939c; box-shadow: 0 0 7px currentColor; }
.equipment-legend .armament::before { background: #d3844d; }
.equipment-legend .armor::before { background: #65a6ba; }
.equipment-legend .relic::before { background: #b79a62; }
.equipment-legend .socket::before { background: #70c9c2; }
.equipment-paperdoll {
  position: relative; min-height: 634px; display: grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); grid-template-rows: repeat(6, 88px); gap: 10px; padding: 24px;
  border-radius: 9px;
  /* The two ChatGPT-generated backdrops (--equip-bg, set inline per-render in
     renderEquipmentWorkspace) sit under everything else here -- this is the
     element that's actually visible behind the slot grid; the outer
     .equipment-loadout card is almost entirely covered by this one, so
     setting the image there (an earlier attempt) painted something nobody
     could ever see. The trailing solid gradient is the pre-photo fallback,
     still visible through var(--equip-bg, none) on any render where JS
     hasn't set it yet. */
  background-image:
    linear-gradient(90deg, transparent 49.65%, rgba(126,203,215,.22) 50%, transparent 50.35%),
    radial-gradient(ellipse at 50% 43%, rgba(65,158,177,.28), transparent 31%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    linear-gradient(rgba(9,17,22,.5), rgba(9,17,22,.62)),
    var(--equip-bg, none),
    linear-gradient(145deg, #172a31, #070d11 74%);
  background-size: 100% 100%, 100% 100%, auto, 100% 100%, cover, 100% 100%;
  background-position: center, center, 0 0, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.86), inset 0 0 70px rgba(0,0,0,.5);
}
.equipment-paperdoll::before { content: ""; position: absolute; z-index: 0; inset: 9px; border: 1px solid rgba(149,204,214,.28); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(79,158,173,.08); pointer-events: none; }
.equipment-paperdoll::after { content: ""; position: absolute; z-index: 0; top: 22px; bottom: 22px; left: 50%; width: 190px; border: 1px solid rgba(106,167,180,.08); border-top: 0; border-bottom: 0; transform: translateX(-50%); pointer-events: none; }
.compact-loadout-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 1px 6px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.compact-loadout-meta span { display: inline-flex; align-items: center; gap: 5px; }
.compact-loadout-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--game-accent); box-shadow: 0 0 7px color-mix(in srgb, var(--game-accent) 68%, transparent); }
.compact-loadout-meta b { color: var(--ink-soft); font-size: 10px; }
/* Dense quick-glance loadout beside inventory. It keeps the full anatomical
   layout without letting the equipment half overtake inventory. */
.paperdoll-compact { min-height: auto; width: 100%; max-width: 100%; grid-template-columns: repeat(5, minmax(28px, 1fr)); grid-template-rows: repeat(6, minmax(39px, 44px)); gap: 4px; padding: 9px; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--game-accent) 42%, var(--line)); border-radius: 8px; background: linear-gradient(90deg, transparent 49.4%, rgba(105,197,210,.18) 50%, transparent 50.6%), radial-gradient(ellipse at 50% 42%, rgba(66,157,175,.28), transparent 42%), linear-gradient(145deg, #192c33, #080e12); box-shadow: inset 0 0 24px rgba(0,0,0,.34), 0 5px 13px rgba(0,0,0,.2); }
.paperdoll-compact::before { inset: 4px; border-radius: 6px; }
.paperdoll-compact::after { top: 9px; bottom: 9px; width: 37%; }
.paperdoll-compact .equipment-drop { cursor: help; border-radius: 6px; }
.paperdoll-compact .equipment-drop > .equipment-icon-well { margin: 0; font-size: 21px; }
.paperdoll-compact .equipment-drop > .equipment-icon-well > .item-art-icon { width: 1.65em; height: 1.65em; }
.paperdoll-compact .equipment-drop.empty > .equipment-icon-well { opacity: .42; transform: scale(.82); }
.paperdoll-compact .unequip-mini { top: -4px; right: -4px; width: 14px; height: 14px; font-size: 10px; }
.paperdoll-compact .equip-low-durability { width: 6px; height: 6px; bottom: 2px; right: 2px; }
.equipment-tool-dock { margin-top: 7px; padding: 6px 7px 7px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(67,112,120,.045), rgba(0,0,0,.18)); }
.equipment-tool-dock > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tool-slot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(34px, 43px)); justify-content: start; gap: 4px; width: 100%; max-width: 100%; }
.tool-slot-row .equipment-drop { width: 100%; height: 43px; border-radius: 6px; }
.tool-slot-row .equipment-drop > .equipment-icon-well { font-size: 20px; }
.equipment-drop { --slot-accent: #81999f; --rarity-accent: var(--slot-accent); position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; border: 1px solid color-mix(in srgb, var(--rarity-accent) 72%, #1a252a); border-radius: 7px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--slot-accent) 16%, transparent), transparent 55%), linear-gradient(155deg, #203138, #070c0f 74%); box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -12px 20px rgba(0,0,0,.3), 0 4px 11px rgba(0,0,0,.24); color: var(--muted); text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.equipment-drop::before { content: ""; position: absolute; top: -1px; left: 19%; right: 19%; height: 1px; background: var(--rarity-accent); opacity: .42; box-shadow: 0 0 7px var(--rarity-accent); pointer-events: none; }
.equipment-drop:hover { border-color: color-mix(in srgb, var(--rarity-accent) 72%, #24343b); transform: translateY(-1px); }
.equipment-drop.empty { border-style: dashed; opacity: .92; }
.equipment-drop.filled { background: radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--rarity-accent) 13%, transparent), transparent 48%), linear-gradient(155deg, color-mix(in srgb, var(--slot-accent) 9%, #0c1519), #070c0f 76%); box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -12px 20px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.2), 0 0 12px color-mix(in srgb, var(--rarity-accent) 9%, transparent); }
.equipment-drop.filled.inspected { border-color: var(--rarity-accent); box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -12px 20px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.2), 0 0 16px color-mix(in srgb, var(--rarity-accent) 55%, transparent); }
.equipment-summary.inspecting .equipment-summary-title h3 { color: var(--game-warm-bright); }
.equipment-weapon, .equipment-offhand { --slot-accent: #c77a48; }
.equipment-helmet, .equipment-body, .equipment-gloves, .equipment-belt, .equipment-boots { --slot-accent: #5f9eb0; }
.equipment-amulet, .equipment-ring1, .equipment-ring2, .equipment-accessory1, .equipment-accessory2 { --slot-accent: #aa8b58; }
.equipment-gem1, .equipment-gem2, .equipment-gem3 { --slot-accent: #61bdb7; }
.equipment-drop.rarity-uncommon { --rarity-accent: #5fbf5f; }
.equipment-drop.rarity-rare { --rarity-accent: #4f9eea; }
.equipment-drop.rarity-epic { --rarity-accent: #a855e0; }
.equipment-drop.rarity-legendary { --rarity-accent: #e0763d; }
.equipment-drop.rarity-mythic { --rarity-accent: #e0459e; }
.equipment-drop.rarity-ascendant { --rarity-accent: #3dd9c9; }
.equipment-drop.rarity-divine { --rarity-accent: #ffd93d; }
.equipment-drop.rarity-founders { --rarity-accent: #ff4d4d; }
.equipment-drop.rarity-worldset { --rarity-accent: #8be89a; border-width: 2px; border-image: conic-gradient(from 0deg, #6de3e0 0deg 90deg, #8be89a 90deg 180deg, #6de3e0 180deg 270deg, #8be89a 270deg 360deg) 1; box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -12px 20px rgba(0,0,0,.3), 0 4px 11px rgba(0,0,0,.24), 0 0 12px rgba(139,232,154,.4), 0 0 12px rgba(109,227,224,.3); }
.equipment-drop.rarity-resplendent { --rarity-accent: #f4ecd8; border-width: 2px; border-image: conic-gradient(from 0deg, #f4ecd8 0deg 60deg, #ffe1a0 60deg 120deg, #c8aaff 120deg 180deg, #f4ecd8 180deg 240deg, #a8d8ff 240deg 300deg, #ffe1a0 300deg 360deg) 1; box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -12px 20px rgba(0,0,0,.3), 0 4px 11px rgba(0,0,0,.24), 0 0 14px rgba(244,236,216,.5), 0 0 14px rgba(200,170,255,.3); }
.equipment-drop.ultra-rare { border-width: 2px; border-image: conic-gradient(from 0deg, #6de3e0 0deg 90deg, #8be89a 90deg 180deg, #6de3e0 180deg 270deg, #8be89a 270deg 360deg) 1; }
.equipment-drop.filled[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 230px; transform: translate(-50%, 4px); border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(7,12,15,.98); box-shadow: 0 10px 25px rgba(0,0,0,.55); color: var(--ink-soft); padding: 8px 9px; opacity: 0; visibility: hidden; pointer-events: none; white-space: pre-line; text-align: left; font: 700 12px/1.45 var(--sans); transition: opacity .12s ease, transform .12s ease, visibility .12s; }
.equipment-drop.filled[data-tooltip]:hover, .equipment-drop.filled[data-tooltip]:focus-visible { z-index: 30; outline: none; }
.equipment-drop.filled[data-tooltip]:hover::after, .equipment-drop.filled[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.equipment-drop.filled[data-tooltip]:focus-visible { box-shadow: inset 0 0 0 1px var(--game-warm), 0 0 0 2px color-mix(in srgb, var(--game-warm) 25%, transparent); }
.equipment-drop .equipment-slot-label { color: color-mix(in srgb, var(--slot-accent) 78%, var(--ink-soft)); font-size: 10px; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.equipment-drop > .equipment-icon-well { position: relative; min-width: 0; display: grid; place-items: center; margin: 4px 0 3px; font-size: 27px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.equipment-drop.empty > .equipment-icon-well { opacity: .4; filter: none; }

/* Durability warning badge: orange under 50%, red under 10%. No emoji/text
   glyph on purpose -- swap the background-image here for real art later. */
.durability-warning { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel-bg, #10161a); box-shadow: 0 0 4px rgba(0,0,0,.5); pointer-events: none; }
.durability-warning-low { background: #e0a030; }
.durability-warning-critical { background: #e0402f; box-shadow: 0 0 6px rgba(224,64,47,.7); }
.durability-track { position: relative; width: 100%; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.durability-track > i { display: block; height: 100%; background: #6fbf5e; border-radius: 3px; transition: width .3s ease; }
.durability-track-low > i { background: #e0a030; }
.durability-track-critical > i { background: #e0402f; }
.durability-label { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.equipment-drop > .equipment-item-name { max-width: 92%; overflow: hidden; color: var(--ink-soft); font: 600 12px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.equipment-drop > button:not(.unequip-mini) { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border: 0; border-radius: 4px; background: rgba(0,0,0,.35); color: var(--muted); cursor: pointer; }
.equipment-helmet { grid-column: 3; grid-row: 1; }
.equipment-amulet { grid-column: 2; grid-row: 2; }
.equipment-accessory1 { grid-column: 4; grid-row: 2; }
.equipment-weapon { grid-column: 1; grid-row: 3; }
.equipment-body { grid-column: 3; grid-row: 3; }
.equipment-offhand { grid-column: 5; grid-row: 3; }
.equipment-ring1 { grid-column: 2; grid-row: 4; }
.equipment-belt { grid-column: 3; grid-row: 4; }
.equipment-ring2 { grid-column: 4; grid-row: 4; }
.equipment-gloves { grid-column: 2; grid-row: 5; }
.equipment-boots { grid-column: 3; grid-row: 5; }
.equipment-accessory2 { grid-column: 4; grid-row: 5; }
.equipment-gem1 { grid-column: 2; grid-row: 6; }
.equipment-gem2 { grid-column: 3; grid-row: 6; }
.equipment-gem3 { grid-column: 4; grid-row: 6; }
.equipment-drop[data-slot^="gem"].filled { box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 -12px 20px rgba(0,0,0,.25), 0 0 15px color-mix(in srgb, var(--rarity-accent) 18%, transparent); }
.paperdoll-character { grid-column: 2 / 5; grid-row: 2 / 6; z-index: 1; align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; color: var(--muted); text-align: center; }
.paperdoll-silhouette { position: relative; width: 150px; height: 205px; opacity: .88; filter: drop-shadow(0 0 24px rgba(77,179,198,.28)); }
.paperdoll-silhouette i { position: absolute; display: block; border: 1px solid rgba(137,213,225,.7); background: linear-gradient(145deg, rgba(85,173,191,.32), rgba(22,55,65,.18)); box-shadow: inset 0 0 20px rgba(111,213,229,.12), 0 0 11px rgba(73,171,189,.08); }
.paperdoll-silhouette .silhouette-head { top: 4px; left: 58px; width: 34px; height: 38px; border-radius: 45% 45% 48% 48%; }
.paperdoll-silhouette .silhouette-shoulders { top: 48px; left: 14px; width: 122px; height: 47px; border-bottom: 0; border-radius: 58% 58% 8% 8%; clip-path: polygon(0 58%, 26% 8%, 42% 0, 58% 0, 74% 8%, 100% 58%, 90% 100%, 10% 100%); }
.paperdoll-silhouette .silhouette-torso { top: 69px; left: 39px; width: 72px; height: 104px; clip-path: polygon(0 0, 100% 0, 83% 100%, 17% 100%); }
.paperdoll-silhouette .silhouette-waist { top: 176px; left: 46px; width: 58px; height: 17px; border-radius: 4px 4px 11px 11px; }
.paperdoll-character b { margin-top: -2px; color: var(--ink-soft); font: 600 16px var(--serif); letter-spacing: .02em; }
.paperdoll-character small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* overflow: visible (not hidden) - an equipped item's stat tooltip is an
   absolutely-positioned child that needs to escape this panel's bounds, or
   it gets clipped instead of floating above the surrounding UI. */
.equipment-summary { align-self: start; overflow: visible; padding: 14px; border: 1px solid color-mix(in srgb, var(--game-accent) 18%, var(--line-strong)); border-radius: 10px; background: radial-gradient(circle at 100% 0, rgba(78,139,151,.08), transparent 27%), linear-gradient(145deg, #111c21, #0b1317); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025); }
.equipment-summary-title { margin: -14px -14px 12px; padding: 11px 13px 10px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.13); }
.equipment-summary-title .eyebrow { margin: 0 0 2px; font-size: 10px; }
.equipment-summary h3 { margin: 14px 0 8px; color: var(--game-warm); font: 600 15px var(--serif); }
.equipment-summary-title h3 { margin: 0; color: var(--ink); font-size: 17px; }
.equipment-summary > p { color: var(--muted); font-size: 13px; }
.equipment-summary .tool-drop { min-height: 98px; margin-bottom: 7px; }
.equipment-total-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.equipment-total-grid span { border-color: color-mix(in srgb, var(--game-accent) 12%, var(--line)); background: linear-gradient(145deg, rgba(0,0,0,.18), rgba(73,123,133,.035)); }
.equipment-total-grid b { color: var(--ink); }
.equip-inventory-panel .split-half:first-child > .panel-heading { display: grid; grid-template-columns: 1fr; align-items: start; gap: 4px; }
.equip-inventory-panel .equipment-heading-actions { min-width: 0; justify-content: flex-start; gap: 5px; }
.equip-inventory-panel .equipment-heading-actions .mini-button { padding: 3px 6px; font-size: 11px; }
.equip-inventory-panel .equipment-heading-actions .micro-badge { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.atlas-region-stage { min-height: 560px; }
.atlas-navigator { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.atlas-navigator select { flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.18); color: var(--ink-soft); padding: 0 8px; font-size: 14px; }
.map-node.browsing circle { stroke: var(--game-accent); stroke-dasharray: 3 3; }
.atlas-dossier { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 9px; background-size: cover; background-position: center; }
.dossier-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dossier-title .eyebrow { margin-bottom: 4px; font-size: 12px; }
.dossier-title h2 { margin: 0; font: 600 22px var(--serif); }
.dossier-title p:last-child { max-width: 680px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.dossier-title-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.danger-badge { border: 1px solid var(--line); border-radius: 99px; color: var(--muted); padding: 5px 8px; font-size: 12px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
/* The average-creature-level badge uses the same grey/orange/red scale as
   a foe's own level readout in combat (see levelGapClass in app.js) - one
   consistent signal for "how does this compare to me" everywhere it shows
   up, instead of a separate Low/Moderate/High/Extreme word scale. */
.danger-badge.level-gap-trivial { color: var(--muted); opacity: .7; }
.danger-badge.level-gap-mismatch { color: var(--game-warm-bright); }
.danger-badge.level-gap-severe { color: var(--danger); }
.dossier-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.atlas-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.12); color: var(--ink-soft); padding: 5px 7px; font-size: 13px; font-weight: 750; }
.atlas-chip i { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--game-warm); font-style: normal; }
.atlas-chip i img, .level-up-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.dossier-grid section { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.13); }
.dossier-grid h3 { margin: 0 0 6px; color: var(--game-warm); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.dossier-grid p { display: flex; justify-content: space-between; gap: 6px; margin: 4px 0; color: var(--ink-soft); font-size: 13px; }
.dossier-grid p span { color: var(--muted); white-space: nowrap; }
.unknown-dossier { background: linear-gradient(135deg, #10181d, #091014); }
.skills-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.summary-card { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.summary-card span { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.summary-card b { display: block; margin-top: 2px; font: 600 19px var(--serif); }
.xp-window-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.xp-period-card { border-color: color-mix(in srgb, var(--game-accent) 22%, var(--line)); }
.xp-period-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.skill-group { margin-top: 14px; }
.skill-group h3 { margin: 0 0 5px; color: var(--game-warm); font-size: 13px; letter-spacing: .11em; text-transform: uppercase; }
.skill-row { display: grid; grid-template-columns: minmax(120px, 1.05fr) 32px minmax(140px, 1.3fr) 64px minmax(165px, 1fr); align-items: center; gap: 7px; min-height: 36px; padding: 5px 7px; border-bottom: 1px solid var(--line); font-size: 12px; }
.skill-name b { display: block; font: 600 13px var(--serif); }
.skill-name small { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.skill-level { color: var(--game-warm); font: 600 18px var(--serif); text-align: center; }
.skill-progress small { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.skill-xp { color: var(--muted); font-size: 12px; text-align: right; }
.skill-window { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.skill-window > span { min-width: 0; padding: 2px 3px; border-left: 1px solid var(--line); }
.skill-window small { display: block; overflow: visible; color: var(--muted); font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.skill-window b { display: block; color: var(--game-accent); font-size: 12px; }
.quest-card { margin-bottom: 9px; padding: 15px; border: 1px solid var(--line); border-left: 3px solid #70553c; border-radius: 7px; background: var(--panel-2); }
.quest-card.complete { border-left-color: var(--success); }
.quest-tabs { display: flex; gap: 6px; margin-bottom: 11px; }
.quest-tabs button { min-width: 105px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.quest-tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; border-radius: 99px; background: rgba(255,255,255,.05); }
.quest-tabs button.active { border-color: color-mix(in srgb, var(--game-warm) 38%, var(--line)); background: color-mix(in srgb, var(--game-warm) 7%, var(--panel-2)); color: var(--game-warm); }
.unknown-quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.quest-card.unknown { min-height: 150px; border-left-color: #53636a; background: linear-gradient(145deg, #10181d, #0b1216); }
.quest-card.unknown h3 { color: var(--muted); font-size: 23px; letter-spacing: .28em; }
.quest-card.unknown > p { max-width: 470px; color: #697a7f; }
.quest-kicker { display: flex; align-items: center; justify-content: space-between; color: var(--game-warm); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quest-card h3 { margin: 5px 0 4px; font: 600 18px var(--serif); }
.quest-card > p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.objective { padding: 5px 7px; border-radius: 4px; color: var(--muted); font-size: 13px; }
.objective.done { background: rgba(110,196,148,.05); color: var(--success); }
.quest-reward { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.reward-chip { border: 1px solid var(--line); border-radius: 99px; color: var(--muted); padding: 3px 7px; font-size: 12px; }
.claim-button { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--success) 7%, transparent); color: var(--success); padding: 7px 10px; cursor: pointer; font-size: 13px; font-weight: 800; }
.goals-hero { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 4px 0 13px; padding: 22px 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-accent) 35%, var(--game-warm)); border-radius: 12px; background: radial-gradient(circle at 9% 50%, rgba(79,184,255,.18), transparent 25%), radial-gradient(circle at 82% 0, rgba(201,161,90,.12), transparent 30%), linear-gradient(125deg, rgba(19,46,55,.94), rgba(7,15,19,.98) 70%); box-shadow: inset 0 0 0 2px rgba(2,9,12,.56), 0 14px 28px rgba(0,0,0,.18); }
.goals-hero::after { content: ""; position: absolute; inset: auto -10% -42px 20%; height: 80px; border-radius: 50%; background: rgba(109,227,224,.12); filter: blur(24px); pointer-events: none; }
.goals-hero > * { position: relative; z-index: 1; }
.goals-hero h2 { margin: 2px 0 4px; color: #f7e6bc; font: 600 clamp(25px, 4vw, 36px)/1.05 var(--serif); letter-spacing: .02em; }
.goals-hero p:not(.eyebrow) { max-width: 700px; margin: 0; color: #bbced0; font-size: 14px; line-height: 1.55; }
.goals-hero-sigil { position: relative; width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(109,227,224,.62); border-radius: 50%; background: radial-gradient(circle, rgba(109,227,224,.22), rgba(6,19,25,.8) 62%); color: #e9f7d2; font-size: 29px; box-shadow: 0 0 0 5px rgba(109,227,224,.05), 0 0 25px rgba(109,227,224,.26), inset 0 0 18px rgba(230,195,126,.12); animation: goalSigilPulse 3.6s ease-in-out infinite; }
.goals-hero-sigil i { position: absolute; inset: 9px; border: 1px solid rgba(230,195,126,.42); border-radius: 50%; transform: rotate(45deg); }
.goals-hero-sigil.small { width: 48px; height: 48px; flex: 0 0 auto; font-size: 21px; }
.goals-hero-sigil.small i { inset: 7px; }
.goal-new-button { white-space: nowrap; }
.goal-overview-strip { display: grid; grid-template-columns: repeat(3, minmax(100px, .55fr)) minmax(220px, 1.6fr); gap: 8px; margin-bottom: 14px; }
.goal-overview-strip > div { min-width: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--game-accent) 22%, var(--line)); border-radius: 8px; background: linear-gradient(145deg, rgba(21,51,59,.58), rgba(6,13,17,.55)); }
.goal-overview-strip span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.goal-overview-strip b { display: block; margin-top: 3px; color: var(--game-warm-bright); font: 600 22px var(--serif); }
.goal-overview-strip b small { display: inline; color: var(--muted); font: 600 12px var(--sans); letter-spacing: 0; text-transform: none; }
.goal-overview-note p { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.goal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.goal-tabs button { min-width: 105px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.goal-tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; border-radius: 99px; background: rgba(255,255,255,.05); }
.goal-tabs button.active { border-color: color-mix(in srgb, var(--game-accent) 55%, var(--game-warm)); background: color-mix(in srgb, var(--game-accent) 10%, var(--panel-2)); color: var(--game-accent); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 10px; }
.calculator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.calculator-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-left: 3px solid var(--game-accent); border-radius: 9px; background: linear-gradient(145deg, rgba(19,43,50,.75), rgba(9,15,18,.94)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.16); }
.calculator-card .panel-heading { margin: 0 0 4px; }
.calculator-card .panel-heading h2 { font-size: 15px; }
.calculator-card > .muted { margin: 0 0 10px; font-size: 12px; }
.calculator-card .navigation-calculator { margin-top: 0; padding-top: 0; border-top: 0; }
.calculator-card .activity-eta-to-level, .calculator-card .combat-eta-chip { display: inline-block; }
.goal-card { min-width: 0; padding: 15px; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--line)); border-left: 3px solid var(--game-accent); border-radius: 9px; background: linear-gradient(145deg, rgba(19,43,50,.75), rgba(9,15,18,.94)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.16); animation: goalCardEnter .28s ease both; }
.goal-card.goal-completed { border-left-color: var(--success); background: linear-gradient(145deg, rgba(18,55,47,.62), rgba(8,17,17,.94)); }
.goal-card.goal-paused { border-left-color: var(--game-warm); filter: saturate(.78); }
.goal-card.goal-archived { border-left-color: var(--muted); opacity: .78; }
.goal-card.goal-pinned { box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(230,195,126,.18), 0 10px 24px rgba(0,0,0,.2); }
.goal-card-top { display: flex; align-items: flex-start; gap: 9px; }
.goal-mark { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--game-warm) 50%, var(--line)); border-radius: 7px; background: rgba(201,161,90,.1); color: var(--game-warm-bright); box-shadow: 0 0 10px rgba(201,161,90,.12); }
.goal-title-wrap { min-width: 0; flex: 1; }
.goal-title-wrap .eyebrow { margin: 0; font-size: 9px; }
.goal-card h3 { margin: 3px 0 0; color: #f1e3c4; font: 600 19px var(--serif); }
.goal-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.goal-completed .goal-status { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); color: var(--success); }
.goal-description { margin: 11px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.goal-progress-head { display: flex; justify-content: space-between; gap: 9px; margin-top: 13px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.goal-progress-head strong { color: var(--game-accent); }
.goal-progress { height: 7px; margin: 5px 0 11px; overflow: hidden; border: 1px solid rgba(109,227,224,.18); border-radius: 99px; background: rgba(0,0,0,.38); }
.goal-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--game-accent), #d9e9b5 65%, var(--game-warm-bright)); box-shadow: 0 0 12px rgba(109,227,224,.46); transition: width .55s ease; }
.goal-condition-list { display: grid; gap: 5px; }
.goal-condition { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid rgba(126,163,179,.12); border-radius: 6px; background: rgba(0,0,0,.16); }
.goal-condition.done { border-color: rgba(110,196,148,.28); background: rgba(110,196,148,.06); }
.goal-condition-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: rgba(109,227,224,.09); color: var(--game-accent); }
.goal-condition-icon svg { width: 16px; height: 16px; }
.goal-condition-copy { min-width: 0; }
.goal-condition-copy b, .goal-condition-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-condition-copy b { color: var(--ink-soft); font-size: 12px; }
.goal-condition-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.goal-condition > strong { color: var(--game-warm); font-size: 11px; white-space: nowrap; }
.goal-condition.done > strong { color: var(--success); }
.goal-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.goal-actions .mini-button { font-size: 11px; }
.goal-empty { grid-column: 1 / -1; min-height: 190px; }
.goal-composer-modal { width: min(900px, 95vw); max-height: min(92vh, 900px); background: radial-gradient(circle at 90% 0, rgba(79,184,255,.13), transparent 30%), linear-gradient(145deg, #12232a, #080e12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 58%, var(--line)), 0 0 36px rgba(79,184,255,.18), 0 30px 80px rgba(0,0,0,.7); }
.goal-composer-head { display: flex; align-items: center; gap: 12px; margin: -3px 35px 14px 0; }
.goal-composer-head .modal-title { margin: 0; }
.goal-composer-head .muted { margin: 3px 0 0; }
.goal-form { gap: 12px; }
.goal-form > label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.goal-form > label small { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.goal-form-divider { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--game-warm); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.goal-form-divider small { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.goal-condition-rows { display: grid; gap: 7px; }
.goal-condition-row { display: grid; grid-template-columns: minmax(170px, 1.25fr) repeat(2, minmax(140px, 1fr)) minmax(120px, .72fr); gap: 7px; padding: 9px; border: 1px solid rgba(126,163,179,.16); border-radius: 8px; background: rgba(0,0,0,.16); }
.goal-condition-row > label { display: grid; gap: 4px; min-width: 0; }
.goal-condition-row > label > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.goal-condition-row select, .goal-condition-row input { min-width: 0; height: 34px; padding: 6px 8px; font-size: 12px; }
.goal-condition-row .goal-condition-kind { grid-column: 1 / 3; }
.goal-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.goal-form-foot .muted { max-width: 520px; font-size: 11px; line-height: 1.35; }
@keyframes goalSigilPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.2); } }
@keyframes goalCardEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.rank-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.leaderboard { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.leader { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; min-height: 45px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.leader:last-child { border-bottom: 0; }
.leader:nth-child(-n+3) .rank { color: var(--game-warm); }
.rank { color: var(--muted); font: 600 18px var(--serif); }
.leader-name b { display: block; font-size: 14px; }
.leader-name small { color: var(--muted); font-size: 13px; }
.leader-name .leader-player-name { display: block; width: max-content; max-width: 100%; }
.leader-name > small { display: block; margin-top: 3px; }
.leader-xp { color: var(--game-accent); font: 600 15px var(--serif); }
.leader-result { display: grid; justify-items: end; gap: 2px; min-width: 92px; }
.leader-result strong { color: var(--game-accent); font: 700 15px var(--serif); white-space: nowrap; }
.leader-result small, .leader-skill-label { color: var(--muted); font-size: 12px; }

/* Modal windows (mail, clan, options, housing) */
.modal-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow: auto; background: rgba(5,3,2,.72); backdrop-filter: blur(3px); overscroll-behavior: contain; touch-action: none; }
.modal-overlay .modal-box { touch-action: auto; overscroll-behavior: contain; }
body.modal-open { overflow: hidden; }
.modal-overlay[hidden] { display: none; }
.death-screen { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at center, rgba(130,10,10,.55), rgba(40,2,2,.82)); backdrop-filter: blur(9px); animation: deathScreenIn .5s ease-out; }
.death-screen[hidden] { display: none; }
.death-screen-card { max-width: 420px; padding: 36px 32px; border: 1px solid rgba(255,80,80,.45); border-radius: 12px; background: rgba(10,2,2,.78); box-shadow: 0 0 60px rgba(200,0,0,.35), 0 20px 50px rgba(0,0,0,.6); text-align: center; }
.death-screen-eyebrow { margin: 0 0 6px; color: rgba(255,140,140,.85); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.death-screen-card h1 { margin: 0 0 16px; color: #ff5555; font: 800 44px var(--serif); text-shadow: 0 0 24px rgba(255,0,0,.6); letter-spacing: 2px; }
.death-screen-detail { margin: 0 0 10px; color: rgba(255,220,220,.85); font-size: 14px; line-height: 1.5; }
.death-screen-card .action-button { margin-top: 18px; }
@keyframes deathScreenIn { from { opacity: 0; } to { opacity: 1; } }
.loot-popup-stack { position: fixed; top: 90px; right: 20px; z-index: 130; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: flex-end; }
.loot-popup { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--success) 45%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--success) 12%, #0b120e); box-shadow: 0 10px 26px rgba(0,0,0,.45); animation: lootPopupIn .25s ease-out, lootPopupOut .5s ease-in 2.1s forwards; }
.loot-popup-row { display: flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.loot-popup-row b { color: var(--success); font-weight: 700; }
.loot-popup-row small { color: var(--muted); }
.deity-manifest-popup { border-color: color-mix(in srgb, #ffd76a 55%, var(--line)); background: color-mix(in srgb, #ffd76a 16%, #14100b); }
.deity-manifest-popup .loot-popup-row b { color: #ffd76a; text-shadow: 0 0 8px rgba(255,215,106,.5); }
.causeway-spared-popup { border-color: color-mix(in srgb, #b98cf0 55%, var(--line)); background: color-mix(in srgb, #b98cf0 16%, #120b16); animation: lootPopupIn .25s ease-out, lootPopupOut .5s ease-in 3.7s forwards; }
.causeway-spared-popup .loot-popup-row b { color: #d8b8ff; text-shadow: 0 0 8px rgba(185,140,240,.5); }
.causeway-spared-popup .item-break-note { color: var(--muted); }
.contribution-popup { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--line)); background: color-mix(in srgb, var(--game-accent) 12%, #0b1216); animation: lootPopupIn .25s ease-out, lootPopupOut .5s ease-in 4.5s forwards; }
.contribution-popup .loot-popup-row b { color: var(--ink); }
.item-break-popup { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); background: color-mix(in srgb, var(--danger) 16%, #160b0a); animation: lootPopupIn .25s ease-out, lootPopupOut .5s ease-in 3.7s forwards; }
.item-break-popup .loot-popup-row b { color: var(--danger); }
.item-break-popup .item-break-note { font-size: 12px; color: var(--muted); }
@keyframes lootPopupIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lootPopupOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
.modal-box { position: relative; width: min(560px, 100%); max-height: min(80vh, calc(100dvh - 32px), 720px); overflow-y: auto; padding: 22px; border-radius: 8px; background: linear-gradient(160deg, #1a130b, #0c0906); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 35%, var(--line)), 0 30px 80px rgba(0,0,0,.6); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* Narrower than the default modal, with a soft blue glow border instead of
   the usual warm-gold one - a deliberately different accent so a skill's
   "what's here" popup doesn't get mistaken for the wide, gold-bordered map
   modals it sits alongside. */
.modal-box.atlas-skill-modal { width: min(1060px, 94vw); max-height: min(90vh, 900px); padding: 18px; background: radial-gradient(circle at 92% 0, rgba(83,176,204,.13), transparent 28%), linear-gradient(145deg, #121e23, #080e12); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4fb8ff 58%, var(--line)), 0 0 36px rgba(79,184,255,.28), 0 30px 80px rgba(0,0,0,.7); }

/* A soft blue glow on hover for the left-rail character/stats panels and
   the Inventory/Equipment tabs - a light "this area is alive" affordance,
   layered on top of whatever shadow the element already has rather than
   replacing it. */
#character, #combatStats, #skillDock, #tab-inventory, #tab-equipment { border-radius: 7px; transition: box-shadow .15s ease; }
#combatStats:hover, #skillDock:hover, #tab-inventory:hover, #tab-equipment:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, #4fb8ff 55%, var(--line)), 0 0 20px rgba(79,184,255,.25);
}
/* The right-rail workspaces are the actual hovered surfaces inside the
   inventory/equipment panels. Give them the same cool affordance as the
   surrounding panels while retaining their existing depth shadows. */
#inventory:hover, .equipment-loadout:hover {
  box-shadow: inset 0 0 0 1px rgba(79,184,255,.18), 0 0 0 1px color-mix(in srgb, #4fb8ff 55%, var(--line)), 0 0 20px rgba(79,184,255,.25), 0 8px 22px rgba(0,0,0,.24);
}
/* #character is already a .panel with its own inset depth shadow - layer
   the glow on top of that instead of replacing it, or hovering it would
   flatten out compared to every other panel. */
#character:hover {
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.24), 0 0 0 1px color-mix(in srgb, #4fb8ff 55%, var(--line)), 0 0 20px rgba(79,184,255,.25);
}
/* The full-map modal shows every region at once (the same wide grid the
   travel screen renders) - the default 560px modal would clip it, and
   .map-stage's own overflow:hidden (fine for a single anchored minimap)
   would hide the rest rather than let it scroll. Wide + scrollable here
   only, everywhere else map-stage keeps its normal clipped behavior. */
.modal-box.wide-map-modal { width: min(2600px, 98vw); max-height: min(96vh, 1500px); }
.modal-box.wide-map-modal .map-stage { overflow: auto; }
/* Wide enough for skills/equipment/inventory to reflow into multi-column
   grids instead of one long cramped vertical list at the default 560px. */
.modal-box.admin-inspect-modal { width: min(760px, 96vw); max-height: min(88vh, 900px); }
.modal-box.ability-manage-modal { width: min(920px, 94vw); max-height: min(90vh, 920px); }
.ability-manage-modal details { margin: 9px 0; border: 1px solid color-mix(in srgb, var(--game-accent) 24%, var(--line)); border-radius: 10px; background: rgba(4,11,14,.32); overflow: hidden; }
.ability-manage-modal details summary { padding: 12px 14px; background: linear-gradient(90deg, rgba(34,66,77,.46), rgba(5,13,17,.35)); color: #f1dba9; cursor: pointer; font: 600 18px var(--serif); list-style-position: inside; }
.ability-manage-modal details[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--game-accent) 25%, var(--line)); color: #fff2c9; }
.ability-manage-modal .atlas-skill-detail-list { gap: 7px; margin: 8px; }
.ability-manage-modal .atlas-skill-detail-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; min-height: 76px; padding: 9px; border-radius: 10px; background: linear-gradient(110deg, rgba(24,47,55,.7), rgba(5,13,17,.58)); }
.ability-manage-modal .action-icon { width: 60px; height: 60px; border: 1px solid color-mix(in srgb, var(--game-warm) 48%, var(--game-accent)); border-radius: 14px; background: radial-gradient(circle, rgba(79,184,255,.2), rgba(2,8,11,.8) 70%); box-shadow: inset 0 0 0 3px rgba(5,11,14,.72), 0 0 15px rgba(79,184,255,.14); }
.ability-manage-modal .atlas-skill-detail-copy b { font-size: 17px; }
.ability-manage-modal .atlas-skill-detail-copy small { display: block; margin-top: 3px; line-height: 1.45; }
/* Ability Loadout -- the cross-Job equip/unequip view living above the
   per-Job "learn new abilities" accordion in the same modal. Deliberately
   richer than the plain list rows below it: this is the screen the player
   actually builds a build in, so it gets the gold/accent treatment a
   character sheet deserves rather than a plain settings list. */
.loadout-slots-meter { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line)); border-radius: 10px; background: linear-gradient(120deg, rgba(201,161,90,.1), rgba(6,13,17,.4)); }
.loadout-slots-meter span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.loadout-slots-meter b { color: var(--game-warm-bright); font: 800 16px var(--serif); white-space: nowrap; }
.loadout-slots-meter .meter { flex: 1; min-width: 60px; }
.loadout-section { margin: 0 0 18px; }
.loadout-section h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; color: var(--game-warm-bright); font: 700 15px var(--serif); letter-spacing: .03em; text-transform: uppercase; }
.loadout-section h3 small { color: var(--muted); font: 700 11px var(--sans); letter-spacing: .04em; text-transform: none; }
.loadout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.loadout-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 11px; padding: 12px; border: 1px solid color-mix(in srgb, var(--game-accent) 22%, var(--line)); border-radius: 12px; background: linear-gradient(150deg, rgba(20,38,44,.9), rgba(5,11,14,.94)); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.22); overflow: hidden; }
.loadout-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.loadout-card:hover::before { opacity: 1; }
.loadout-card.equipped { border-color: color-mix(in srgb, var(--game-warm) 62%, var(--game-accent)); background: linear-gradient(150deg, rgba(58,44,17,.42), rgba(9,14,17,.94)); box-shadow: inset 0 0 0 1px rgba(230,195,126,.12), inset 0 1px rgba(255,255,255,.04), 0 0 18px rgba(218,163,75,.14), 0 6px 16px rgba(0,0,0,.24); }
.loadout-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 44%, var(--game-accent)); background: radial-gradient(circle, rgba(79,184,255,.18), rgba(2,8,11,.8) 70%); box-shadow: inset 0 0 0 3px rgba(5,11,14,.72), 0 4px 12px rgba(0,0,0,.26); }
.loadout-card-copy { min-width: 0; grid-column: 1 / -1; }
.loadout-card-copy b { display: block; margin-bottom: 4px; color: #f2e4ca; font: 700 15px var(--serif); }
.loadout-card-copy p { margin: 6px 0 10px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.loadout-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.loadout-job-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--game-accent) 45%, var(--line)); background: color-mix(in srgb, var(--game-accent) 10%, transparent); color: var(--game-accent-bright, var(--ink-soft)); font: 800 9px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.loadout-equipped-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(230,195,126,.55); background: rgba(230,195,126,.14); color: var(--game-warm-bright); font: 900 9px var(--sans); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 8px rgba(230,195,126,.35); }
.loadout-card .mini-button { grid-column: 1 / -1; justify-self: start; }
.loadout-card .loadout-unequip { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); color: #f3b5ab; }
.loadout-learn-heading { margin: 22px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--game-warm); font: 700 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) { .loadout-grid { grid-template-columns: 1fr; } .loadout-slots-meter { flex-wrap: wrap; } }
.admin-inspect-skill-grid { grid-template-columns: repeat(3, 1fr); }
.admin-inspect-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 10px; }
.admin-inspect-item-grid .item { margin-bottom: 0; }
.modal-box::before, .modal-box::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--game-warm); opacity: .55; box-shadow: 0 0 6px color-mix(in srgb, var(--game-warm) 70%, transparent); }
.modal-box::before { top: 9px; left: 9px; }
.modal-box::after { bottom: 9px; right: 9px; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm-bright) 70%, var(--game-accent)); border-radius: 50%; background-image: linear-gradient(45deg, transparent 43%, rgba(255,242,198,.96) 45% 55%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(255,242,198,.96) 45% 55%, transparent 57%), radial-gradient(circle at 35% 28%, rgba(255,255,255,.2), transparent 20%), linear-gradient(145deg, #233841, #0b161b 70%); box-shadow: inset 0 0 0 3px rgba(8,15,18,.76), inset 0 0 0 4px rgba(201,161,90,.3), 0 0 0 1px rgba(0,0,0,.7), 0 0 18px rgba(79,184,255,.22); color: var(--game-warm-bright); cursor: pointer; font-size: 0; transition: transform .18s ease, color .18s ease, box-shadow .18s ease; }
.modal-close img { width: 25px; height: 25px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(230,195,126,.42)); transition: filter .18s ease; }
.modal-close::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(126,163,179,.45); border-radius: 50%; pointer-events: none; }
.modal-close:hover, .modal-close:focus-visible { transform: rotate(90deg) scale(1.08); color: #fff5d7; box-shadow: inset 0 0 0 3px rgba(8,15,18,.76), inset 0 0 0 4px rgba(230,195,126,.48), 0 0 0 1px rgba(0,0,0,.7), 0 0 24px rgba(79,184,255,.5); }
.modal-title { margin: 0 56px 14px 0; font: 600 22px var(--serif); color: var(--game-warm-bright); }
.leader-player-name { border: 0; padding: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-weight: 800; text-align: left; }
.leader-player-name:hover, .leader-player-name:focus-visible { color: var(--game-warm-bright); text-decoration: underline; text-decoration-color: var(--game-accent); text-underline-offset: 3px; }
.map-region-pvp-badge rect { fill: rgba(188,43,23,.88); stroke: #ff9a48; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(255,93,48,.75)); }
.map-region-pvp-badge text { fill: #fff1c9; font: 900 10px var(--sans); letter-spacing: .08em; }
.inspect-skill-rank { display: block; margin-top: 2px; color: var(--game-accent); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.item-history-tab { margin-top: 8px; border-color: color-mix(in srgb, var(--game-accent) 45%, var(--line)); color: var(--game-accent); }
.item-history-list { display: grid; gap: 6px; max-height: 52vh; overflow: auto; padding-right: 3px; }
.item-history-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(110deg, rgba(23,45,53,.58), rgba(4,10,13,.55)); }
.item-history-index { color: var(--game-warm); font: 600 16px var(--serif); text-align: center; }
.item-history-owner b, .item-history-owner small { display: block; }
.item-history-owner small, .item-history-row time { color: var(--muted); font-size: 11px; }
.realm-eater-card { margin-top: 16px; padding: 18px; border: 1px solid rgba(102,168,209,.55); border-radius: 12px; background: radial-gradient(circle at 12% 15%, rgba(72,130,175,.2), transparent 28%), linear-gradient(145deg, rgba(12,31,43,.95), rgba(5,10,14,.93)); box-shadow: inset 0 0 22px rgba(49,130,188,.12), 0 15px 32px rgba(0,0,0,.26); }
.realm-eater-card > header { display: flex; align-items: center; gap: 14px; }
.realm-eater-art { width: 72px; height: 72px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(135,211,255,.64); border-radius: 50%; background: #08141b; box-shadow: 0 0 20px rgba(79,184,255,.27); animation: realmEaterPulse 2.8s ease-in-out infinite; }
.realm-eater-art img { width: 100%; height: 100%; object-fit: cover; }
.realm-eater-card h2 { margin: 0 0 3px; color: #d9efff; font: 600 25px var(--serif); }
.realm-eater-card header p:last-child { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.realm-eater-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0 12px; }
.realm-eater-odds span { padding: 8px; border: 1px solid rgba(115,173,207,.25); border-radius: 7px; color: var(--muted); font-size: 11px; text-align: center; }
.realm-eater-odds b { display: block; color: #b9e3ff; font: 600 17px var(--serif); }
.realm-eater-form { display: flex; align-items: end; gap: 9px; }
.realm-eater-form label { display: grid; flex: 1; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.realm-eater-form select { width: 100%; height: 38px; border: 1px solid rgba(115,173,207,.45); border-radius: 6px; background: rgba(0,0,0,.35); color: var(--ink); padding: 0 8px; }
.realm-eater-note { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }
@keyframes realmEaterPulse { 0%, 100% { box-shadow: 0 0 16px rgba(79,184,255,.2); } 50% { box-shadow: 0 0 27px rgba(79,184,255,.48); } }
@media (max-width: 640px) { .realm-eater-card > header { align-items: flex-start; } .realm-eater-form { align-items: stretch; flex-direction: column; } .realm-eater-odds { grid-template-columns: 1fr; } }

.fight-arena-card { position: relative; overflow: hidden; margin-top: 18px; padding: 22px; border: 1px solid rgba(207,119,79,.7); border-radius: 14px; background: radial-gradient(circle at 86% 8%, rgba(189,61,39,.2), transparent 30%), linear-gradient(145deg, rgba(35,18,20,.98), rgba(7,10,13,.98)); box-shadow: inset 0 0 34px rgba(201,83,54,.12), 0 18px 42px rgba(0,0,0,.34); }
.fight-arena-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background: url('/art/ui/fight-arena-warden.webp') no-repeat 98% 4% / 230px; filter: saturate(1.3); }
.fight-arena-card > * { position: relative; z-index: 1; }
.fight-arena-card > header { display: flex; align-items: center; gap: 16px; }
.fight-arena-warden { display: grid; flex: 0 0 auto; width: 86px; height: 86px; place-items: center; overflow: hidden; border: 1px solid rgba(246,157,105,.8); border-radius: 12px; background: #120b0c; box-shadow: 0 0 22px rgba(228,96,53,.3); animation: arenaWardenPulse 3.2s ease-in-out infinite; }
.fight-arena-warden img { width: 100%; height: 100%; object-fit: cover; }
.fight-arena-card h2 { margin: 0 0 4px; color: #ffe1bb; font: 600 28px var(--serif); }
.fight-arena-card header p:last-child { max-width: 720px; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.fight-arena-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 14px; }
.fight-arena-intro span { padding: 10px; border: 1px solid rgba(229,133,91,.3); border-radius: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.fight-arena-intro b { display: block; color: #ffd4a9; font: 600 19px var(--serif); }
.fight-arena-shop { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(229,133,91,.22); }
.fight-arena-shop-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fight-arena-shop-head h3 { margin: 0; color: #ffe1bb; font: 600 20px var(--serif); }
.fight-arena-shop-head b, .fight-arena-shop-head > span { color: #f4b27d; font-size: 12px; }
.fight-arena-reward { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(229,133,91,.12); }
.fight-arena-reward-art { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid rgba(238,178,132,.35); border-radius: 8px; background: #0d0b0c; color: #ffd5b2; font-size: 24px; }
.fight-arena-reward-art img { width: 100%; height: 100%; object-fit: cover; }
.fight-arena-reward b, .fight-arena-burden b { display: block; color: var(--ink); }
.fight-arena-reward small, .fight-arena-burden small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; }
.fight-arena-points { margin-left: auto; color: #ffce9d; font: 600 23px var(--serif); text-align: right; }
.fight-arena-points small { display: block; color: var(--muted); font: 700 9px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.fight-arena-enemy { margin: 18px 0; padding: 14px; border: 1px solid rgba(229,133,91,.35); border-radius: 9px; background: rgba(0,0,0,.22); }
.fight-arena-enemy-line { display: flex; justify-content: space-between; gap: 10px; color: #ffe5c9; font-size: 12px; }
.fight-arena-enemy-line span { color: #e4a276; }
.fight-arena-health { height: 9px; margin-top: 9px; overflow: hidden; border-radius: 9px; background: #281414; }
.fight-arena-health i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c44136, #ffad66); box-shadow: 0 0 12px rgba(255,116,66,.55); transition: width .45s ease; }
.fight-arena-burdens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fight-arena-burdens .fight-arena-shop-head { grid-column: 1 / -1; }
.fight-arena-burden { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; padding: 9px; border: 1px solid rgba(160,160,160,.15); border-radius: 7px; background: rgba(255,255,255,.025); opacity: .48; }
.fight-arena-burden.active { border-color: rgba(234,116,72,.52); background: rgba(118,42,31,.22); opacity: 1; animation: arenaBurdenIn .45s ease both; }
.fight-arena-burden > span { grid-row: span 2; color: #e89069; font: 600 12px var(--serif); }
.fight-arena-log { max-height: 170px; margin: 16px 0 0; padding: 12px 15px 12px 29px; overflow: auto; border-left: 2px solid rgba(229,133,91,.45); background: rgba(0,0,0,.16); color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.fight-arena-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.admin-log-viewer { grid-column: 1 / -1; }
.admin-log-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.admin-log-output { max-height: 420px; margin: 0; padding: 12px 15px; overflow: auto; border-left: 2px solid rgba(229,133,91,.45); background: rgba(0,0,0,.16); color: var(--ink-soft); font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
@keyframes arenaWardenPulse { 0%,100% { transform: translateY(0); box-shadow: 0 0 22px rgba(228,96,53,.26); } 50% { transform: translateY(-3px); box-shadow: 0 0 32px rgba(242,135,74,.5); } }
@keyframes arenaBurdenIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 640px) { .fight-arena-card > header { align-items: flex-start; } .fight-arena-intro, .fight-arena-burdens { grid-template-columns: 1fr; } .fight-arena-burdens .fight-arena-shop-head { grid-column: auto; } .fight-arena-reward { grid-template-columns: 42px minmax(0,1fr); } .fight-arena-reward button { grid-column: 2; justify-self: start; } }
.house-withdraw-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
@media (max-width: 720px) { .house-withdraw-tools { justify-content: flex-start; margin-top: 8px; } }

/* Themed confirm dialog - replaces native window.confirm() popups */
.themed-confirm-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(5,3,2,.72); backdrop-filter: blur(3px); animation: deathScreenIn .18s ease-out; }
.themed-confirm-overlay[hidden] { display: none; }
.themed-confirm-box { position: relative; width: min(420px, 100%); padding: 22px; border-radius: 8px; background: linear-gradient(160deg, #1a130b, #0c0906); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 40%, var(--line)), 0 30px 80px rgba(0,0,0,.6); text-align: center; }
.themed-confirm-box::before, .themed-confirm-box::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--game-warm); opacity: .55; box-shadow: 0 0 6px color-mix(in srgb, var(--game-warm) 70%, transparent); }
.themed-confirm-box::before { top: 9px; left: 9px; }
.themed-confirm-box::after { bottom: 9px; right: 9px; }
.themed-confirm-icon { display: grid; place-items: center; min-height: 34px; margin-bottom: 6px; color: var(--game-warm-bright); }
.themed-confirm-icon .ui-icon { width: 32px; height: 32px; vertical-align: 0; filter: saturate(1.2) drop-shadow(0 0 8px color-mix(in srgb, var(--game-warm) 55%, transparent)); }
.themed-confirm-title { margin: 0 0 10px; font: 600 19px var(--serif); color: var(--game-warm-bright); }
.themed-confirm-body { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.themed-confirm-threat { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--line)); background: color-mix(in srgb, var(--danger) 14%, #160b0a); color: #f3b5ab; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.themed-confirm-input { display: block; width: 100%; margin: 0 0 14px; padding: 9px 12px; border-radius: 6px; text-align: center; font: 700 15px var(--sans); }
.themed-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.themed-confirm-actions .action-button { width: auto; min-width: 120px; padding-inline: 16px; }
.themed-confirm-actions .mini-button { min-width: 100px; }
.combat-stop-alert { width: min(500px, 100%); padding: 30px; border: 3px solid #e33; border-radius: 8px; background: #050505; color: #fff; box-shadow: 0 0 0 2px #180000, 0 0 45px rgba(220,25,25,.65), 0 30px 80px rgba(0,0,0,.9); text-align: center; }
.combat-stop-alert-icon { color: #ff3030; font-size: 42px; line-height: 1; }
.combat-stop-alert h2 { margin: 12px 0; color: #ff4545; font: 800 22px var(--serif); letter-spacing: .04em; }
.combat-stop-alert p { margin: 10px 0; color: #fff; font-size: 15px; line-height: 1.5; }
.combat-stop-alert-hint { color: #ffb0b0 !important; }
.combat-stop-alert-button { margin-top: 18px; min-width: 190px; padding: 11px 18px; border: 2px solid #ff4545; border-radius: 5px; background: #a40000; color: #fff; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.combat-stop-alert-button:hover, .combat-stop-alert-button:focus-visible { background: #df1717; outline: 2px solid #fff; outline-offset: 3px; }
.modal-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.atlas-skill-detail-list { display: grid; gap: 8px; margin-top: 12px; }
.modal-box.atlas-skill-menu-modal { width: min(620px, 94vw); max-height: min(82vh, 760px); padding: 18px; background: linear-gradient(145deg, #121e23, #080e12); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4fb8ff 48%, var(--line)), 0 0 28px rgba(79,184,255,.2), 0 30px 80px rgba(0,0,0,.7); }
.atlas-skill-menu header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.atlas-skill-menu header .modal-title { margin: 2px 0 5px; }
.atlas-skill-menu-list { display: grid; gap: 8px; margin-top: 14px; }
.atlas-skill-menu-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(110deg, rgba(24,47,55,.72), rgba(5,13,17,.62)); color: var(--ink); text-align: left; cursor: pointer; }
.atlas-skill-menu-row:hover, .atlas-skill-menu-row:focus-visible { border-color: var(--game-accent); background: linear-gradient(110deg, rgba(38,75,84,.8), rgba(7,18,23,.72)); }
.atlas-skill-menu-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--game-warm) 48%, var(--line)); border-radius: 8px; background: rgba(0,0,0,.25); color: var(--game-warm-bright); font-size: 20px; }
.atlas-skill-menu-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.atlas-skill-menu-row b, .atlas-skill-menu-row small { display: block; }
.atlas-skill-menu-row b { font: 600 16px var(--serif); }
.atlas-skill-menu-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.atlas-skill-menu-row > span:last-child { color: var(--game-accent); font-size: 23px; }
.atlas-skill-detail-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.atlas-skill-detail-copy { flex: 1; min-width: 0; }
.atlas-skill-detail-copy b { display: block; font: 600 15px var(--serif); color: #fff; }
.atlas-skill-detail-copy small { color: var(--muted); }
.atlas-skill-detail-yield { display: flex; gap: 4px; font-size: 20px; flex-shrink: 0; }
.atlas-skill-detail-yield.monster-profile-drops { font-size: 38px; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Atlas skill detail is an actual location dossier: the skill artwork and
   location painting establish the visual identity, while the activity cards
   expose the useful details that were previously compressed into one line. */
.atlas-skill-modal-content { min-width: 0; }
.atlas-skill-hero { min-height: 228px; display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 24px; margin: -18px -18px 0; padding: 30px 82px 26px 28px; border-bottom: 1px solid color-mix(in srgb, var(--game-accent) 42%, var(--line)); background-color: #0a1419; background-size: cover; background-position: center; }
.atlas-skill-hero-art { width: 172px; height: 172px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm-bright) 60%, var(--game-accent)); border-radius: 22px; background: radial-gradient(circle, rgba(126,163,179,.2), rgba(7,14,18,.92) 70%); box-shadow: inset 0 0 0 6px rgba(5,11,14,.72), inset 0 0 28px rgba(79,184,255,.3), 0 0 28px rgba(79,184,255,.2); overflow: hidden; transform: rotate(-2deg); }
.atlas-skill-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: rotate(2deg) scale(1.06); filter: drop-shadow(0 8px 12px rgba(0,0,0,.7)); }
.atlas-skill-hero-copy { min-width: 0; }
.atlas-skill-hero-copy .eyebrow { margin-bottom: 6px; font-size: 11px; }
.atlas-skill-hero h2 { margin: 0; color: #f5e3b4; font: 600 clamp(28px, 4vw, 43px)/1.05 var(--serif); letter-spacing: .01em; text-shadow: 0 3px 18px rgba(0,0,0,.72); }
.atlas-skill-hero strong { display: block; margin-top: 7px; color: var(--game-accent); font: 600 18px var(--serif); letter-spacing: .05em; }
.atlas-skill-hero p:last-child { max-width: 700px; margin: 12px 0 0; color: #c2d0d1; font-size: 14px; line-height: 1.6; }
.atlas-skill-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 13px 0 16px; }
.atlas-skill-stat-strip > div { min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--game-accent) 24%, var(--line)); border-radius: 9px; background: linear-gradient(145deg, rgba(42,72,80,.3), rgba(5,12,15,.34)); }
.atlas-skill-stat-strip span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.atlas-skill-stat-strip b { display: block; margin-top: 3px; color: var(--game-warm-bright); font: 600 19px var(--serif); }
.atlas-skill-modal-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .75fr); gap: 18px; }
.atlas-skill-activities, .atlas-skill-sidebar { min-width: 0; }
.atlas-skill-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.atlas-skill-section-heading .eyebrow { margin-bottom: 3px; font-size: 10px; }
.atlas-skill-section-heading h3 { margin: 0; color: #fff1c9; font: 600 21px var(--serif); }
.atlas-skill-section-heading > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.atlas-skill-activity-card { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 13px; padding: 13px; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--line)); border-radius: 10px; background: linear-gradient(115deg, rgba(24,47,55,.78), rgba(5,13,17,.6)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.14); }
.atlas-skill-activity-card + .atlas-skill-activity-card { margin-top: 8px; }
.atlas-skill-activity-art { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm) 42%, var(--line)); border-radius: 14px; background: radial-gradient(circle, rgba(201,161,90,.18), rgba(3,9,12,.82) 68%); box-shadow: inset 0 0 0 3px rgba(5,11,14,.7), 0 0 12px rgba(201,161,90,.12); overflow: hidden; }
.atlas-skill-activity-art > img, .atlas-skill-activity-art > .item-art-icon, .atlas-skill-activity-art > .item-svg-icon { width: 82%; height: 82%; object-fit: contain; display: block; }
.atlas-skill-activity-copy { min-width: 0; }
.atlas-skill-activity-kicker { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.atlas-skill-activity-kicker b { color: var(--game-accent); white-space: nowrap; }
.atlas-skill-activity-copy h3 { margin: 4px 0 2px; color: #fff; font: 600 18px var(--serif); }
.atlas-skill-activity-copy > p { margin: 0; color: var(--muted); font-size: 13px; }
.atlas-skill-requirements { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.09); }
.atlas-skill-requirements-label { flex-basis: 100%; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.atlas-requirement-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 7px; border: 1px solid rgba(224,185,111,.3); border-radius: 7px; background: rgba(0,0,0,.24); }
.atlas-requirement-chip.short { border-color: rgba(213,93,75,.55); background: rgba(112,37,29,.16); }
.atlas-requirement-chip.owned { border-color: rgba(107,189,133,.42); }
.atlas-requirement-chip > img, .atlas-requirement-chip > .item-art-icon, .atlas-requirement-chip > .item-svg-icon { width: 24px; height: 24px; object-fit: contain; }
.atlas-requirement-chip b { color: var(--ink-soft); font-size: 11px; }
.atlas-requirement-chip small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.atlas-requirement-chip.short small { color: #f09a87; }
.atlas-skill-requirements-empty { color: var(--muted); font-size: 11px; }
.atlas-skill-service { display: block; margin-top: 6px; color: var(--game-accent); font-size: 11px; }
.atlas-skill-yields { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.atlas-skill-yields > span:first-child { margin-right: 2px; color: var(--game-warm); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.atlas-yield-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.22); color: var(--ink-soft); font-size: 11px; }
.atlas-yield-chip > img, .atlas-yield-chip > .item-art-icon, .atlas-yield-chip > .item-svg-icon { width: 19px; height: 19px; object-fit: contain; }
.atlas-skill-sidebar { display: grid; align-content: start; gap: 9px; }
.atlas-skill-sidebar section { padding: 13px; border: 1px solid color-mix(in srgb, var(--game-warm) 22%, var(--line)); border-radius: 10px; background: rgba(4,11,14,.44); }
.atlas-skill-sidebar .eyebrow { margin-bottom: 4px; font-size: 10px; }
.atlas-skill-sidebar h3 { margin: 0 0 8px; color: #f2dca9; font: 600 17px var(--serif); }
.atlas-skill-sidebar ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.atlas-skill-sidebar li { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 12px; }
.atlas-skill-sidebar li > span:first-child { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; background: rgba(0,0,0,.3); overflow: hidden; }
.atlas-skill-sidebar li > span > img, .atlas-skill-sidebar li > span > .item-art-icon, .atlas-skill-sidebar li > span > .item-svg-icon { width: 100%; height: 100%; object-fit: contain; }
.atlas-skill-sidebar li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-sidebar-service-art { color: var(--game-warm); font-size: 16px; }
.atlas-sidebar-empty { color: var(--muted) !important; font-style: italic; }
.atlas-skill-empty { display: grid; gap: 4px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); }
.atlas-skill-empty b { color: var(--ink-soft); }
.mail-row, .clan-member-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.trade-log-row { padding: 9px 10px; margin-bottom: 6px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.trade-log-row.cancelled { opacity: .6; }
.trade-log-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.trade-log-row p { margin: 3px 0; font-size: 13px; }
/* Item Source modal rows: the location name and its region/method/activity
   line had no CSS at all, so the two adjacent inline elements (<b> and
   <span>) ran together with no space or line break between them. */
.source-location-list { display: flex; flex-direction: column; gap: 6px; }
.source-location-row { padding: 9px 10px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.source-location-row b { display: block; color: var(--ink-soft); font-size: 14px; }
.source-location-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.mail-row.unread { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line)); }
.clan-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.clan-online-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.clan-online-dot.idle { background: #e1b94f; box-shadow: 0 0 6px rgba(225,185,79,.45); }
.clan-online-dot.away { background: #d94f4f; box-shadow: 0 0 6px rgba(217,79,79,.45); }
.clan-online-dot.dnd { background: #d94f4f; box-shadow: 0 0 6px rgba(217,79,79,.45); }
.clan-member-row b { margin-right: auto; }
.clan-member-row { flex-wrap: wrap; align-items: center; }
.clan-member-row > b { flex: 1 1 180px; min-width: 120px; margin-right: 0; }
.clan-member-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: 28px; }
.clan-member-activity { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.clan-member-activity .animated-skill-art { width: 18px; height: 18px; }
.clan-member-activity.clan-member-idle { font-style: italic; opacity: .7; }
.clan-area-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); }
.clan-area-tabs .location-menu-link { padding: 7px 11px; font-size: 12px; }
.clan-storage-context-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); }
.clan-storage-context-links .location-menu-link { padding: 6px 9px; font-size: 11px; }
.regional-find-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 55%, var(--line)); border-radius: 8px; background: linear-gradient(100deg, rgba(119,88,26,.22), rgba(0,0,0,.2)); box-shadow: 0 0 14px rgba(217,177,70,.08); }
.regional-find-card > div { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.regional-find-card .eyebrow { margin: 0; color: var(--game-warm); font-size: 10px; }
.regional-find-card b { color: var(--ink); }
.regional-find-card span { color: var(--muted); font-size: 12px; }
.regional-shiny-search { margin: 10px 0 14px; }
.regional-shiny-search strong { color: var(--game-warm-bright); }
.regional-shiny-search .action-button { width: auto; min-width: 190px; flex: 0 0 auto; white-space: nowrap; }
.regional-shiny-search .action-button:disabled { cursor: not-allowed; opacity: .58; }
@media (max-width: 680px) {
  .regional-shiny-search { align-items: stretch; flex-direction: column; }
  .regional-shiny-search .action-button { width: 100%; }
}
.travel-sickness-chip { color: #d4b46c; }
.chat-clan-tag { display: inline-block; margin-right: 4px; color: #65c77a; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.chat-admin-tag, .chat-dev-tag, .chat-mod-tag { display: inline-block; margin-right: 4px; padding: 1px 3px; border-radius: 3px; font-size: 9px; font-weight: 950; letter-spacing: .04em; white-space: nowrap; }
.chat-admin-tag { color: #ff7272; border: 1px solid rgba(255,90,90,.72); background: rgba(150,24,24,.22); text-shadow: 0 0 6px rgba(255,80,80,.45); }
.chat-dev-tag { color: #d5a7ff; border: 1px solid rgba(182,106,255,.68); background: rgba(107,48,151,.22); }
.chat-mod-tag { color: #74cfff; border: 1px solid rgba(80,190,255,.72); background: rgba(25,95,155,.22); text-shadow: 0 0 6px rgba(80,190,255,.4); }
.abyss-fire-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #ff734f; filter: drop-shadow(0 0 5px rgba(255,83,44,.72)); }
.abyss-fire-mark svg, .abyss-fire-mark img { width: 18px; height: 18px; }
.faction-leader-badge { color: #65c77a; border-color: color-mix(in srgb, #65c77a 55%, var(--line)); }
.faction-history-list { display: grid; gap: 5px; max-height: 260px; overflow-y: auto; }
.faction-history-row { display: grid; grid-template-columns: minmax(100px, .4fr) minmax(110px, .65fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 11px; }
.faction-history-row b { color: #65c77a; text-transform: capitalize; }
.faction-history-row small { color: var(--muted); }
.faction-history-row-expanded { grid-template-columns: minmax(135px, .45fr) minmax(180px, .65fr) minmax(0, 1.2fr); }
.faction-history-list-full { max-height: min(68vh, 760px); overflow-y: auto; }
.clan-member-lastseen { color: var(--muted); }
.mail-row-body { flex: 1; min-width: 0; }
.mail-row-body b { display: block; font: 600 14px var(--serif); }
.mail-row-body small { display: block; color: var(--muted); font-size: 12px; }
.mail-row-attachments { color: var(--game-warm-bright) !important; }
.mail-detail { margin-top: 10px; padding: 12px; border-radius: 6px; background: rgba(0,0,0,.18); white-space: pre-wrap; color: var(--ink-soft); font-size: 14px; }
.mail-attachments { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.mail-claim-status { margin: 8px 0; color: var(--game-warm-bright); font-size: 12px; }
.mail-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mail-attach-staged { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.mail-attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.mail-attach-chip button { line-height: 1; padding: 1px 6px; }
.modal-form { display: grid; gap: 8px; margin-top: 10px; }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,.24); color: var(--ink); padding: 8px 10px; font: inherit; }
.modal-form textarea { min-height: 90px; resize: vertical; }
.house-storage-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.house-storage-bar .meter { flex: 1; }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.option-grid label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.option-grid select { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,.24); color: var(--ink); padding: 0 8px; }

.level-up-notice { position: fixed; z-index: 100; top: 82px; left: 50%; width: min(310px, calc(100vw - 30px)); min-height: 76px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 11px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--game-warm) 70%, var(--line-strong)); border-radius: 8px; background: linear-gradient(145deg, rgba(34,24,13,.98), rgba(12,9,6,.98)); box-shadow: inset 0 0 22px color-mix(in srgb, var(--game-warm) 8%, transparent), 0 16px 44px rgba(0,0,0,.58); color: var(--ink); padding: 12px 38px 12px 13px; }
.level-up-notice.notice-fresh { animation: levelUpIn .2s ease-out; }
.level-up-notice[hidden] { display: none; }
.level-up-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm) 52%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--game-warm) 9%, rgba(0,0,0,.22)); color: var(--game-warm-bright); font-size: 23px; box-shadow: 0 0 18px color-mix(in srgb, var(--game-warm) 14%, transparent); }
.level-up-copy { min-width: 0; }
.level-up-copy small { display: block; color: var(--game-warm); font-size: 11px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.level-up-copy strong { display: block; overflow: hidden; margin-top: 2px; font: 600 18px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.level-up-copy strong b { color: var(--game-warm-bright); font-size: 23px; }
.level-up-close { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 4px; background: rgba(0,0,0,.24); color: var(--muted); cursor: pointer; font-size: 0; line-height: 1; }
.level-up-close img { width: 17px; height: 17px; object-fit: contain; filter: saturate(.75) drop-shadow(0 0 4px rgba(230,195,126,.28)); transition: transform .18s ease, filter .18s ease; }
.level-up-close:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.level-up-close:hover img { transform: rotate(90deg) scale(1.12); filter: saturate(1.15) drop-shadow(0 0 7px rgba(230,195,126,.65)); }

/* Same look as the level-up toast, but living in normal document flow inside
   the scene/combat card instead of a fixed, JS-positioned overlay - see
   combatNoticeHTML() in app.js for why. */
.combat-drop-notice { position: relative; z-index: auto; top: auto; left: auto; transform: none; width: 100%; margin-bottom: 14px; animation: levelUpIn .2s ease-out; }
.combat-drop-notice .level-up-copy strong { white-space: normal; overflow: visible; text-overflow: clip; }
.combat-drop-notice .item-icon, .combat-drop-notice .item-svg-icon { width: 26px; height: 26px; }

/* Ultra Rare items are chase objects, so their cyan/green border should feel
   alive when the player discovers or inspects them. The aura is built from
   masked pseudo-elements so it works on both compact inventory tiles and the
   much smaller paperdoll slots without changing their layout. */
.inventory-tile.ultra-rare,
.equipment-drop.ultra-rare {
  --ultra-cyan: #6de3e0;
  --ultra-green: #8be89a;
  isolation: isolate;
  border-color: transparent;
  border-image: none;
  box-shadow: inset 0 1px rgba(255,255,255,.055),
    inset 0 -15px 22px rgba(0,0,0,.28),
    0 0 10px color-mix(in srgb, var(--ultra-cyan) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--ultra-green) 16%, transparent);
}
.equipment-drop.ultra-rare { box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -12px 20px rgba(0,0,0,.3), 0 0 10px color-mix(in srgb, var(--ultra-cyan) 18%, transparent), 0 0 16px color-mix(in srgb, var(--ultra-green) 16%, transparent); }
.inventory-tile.ultra-rare::before,
.equipment-drop.ultra-rare::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 25deg, var(--ultra-cyan), var(--ultra-green), var(--ultra-cyan), var(--ultra-green), var(--ultra-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .72;
  pointer-events: none;
  animation: ultraRareAura 4.8s ease-in-out infinite;
}
.inventory-tile.ultra-rare::after,
.equipment-drop.ultra-rare::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9%;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--ultra-cyan) 16%, transparent), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.inventory-tile.ultra-rare > *,
.equipment-drop.ultra-rare > * { position: relative; z-index: 1; }
.inventory-tile.ultra-rare:hover,
.inventory-tile.ultra-rare:focus-visible,
.equipment-drop.ultra-rare:hover,
.equipment-drop.ultra-rare:focus-visible {
  border-color: transparent;
  box-shadow: inset 0 1px rgba(255,255,255,.09),
    0 0 12px color-mix(in srgb, var(--ultra-cyan) 42%, transparent),
    0 0 25px color-mix(in srgb, var(--ultra-green) 32%, transparent),
    0 0 42px color-mix(in srgb, var(--ultra-cyan) 18%, transparent);
}
.inventory-tile.ultra-rare:hover::before,
.inventory-tile.ultra-rare:focus-visible::before,
.equipment-drop.ultra-rare:hover::before,
.equipment-drop.ultra-rare:focus-visible::before { opacity: 1; animation-duration: 2.1s; }
.inventory-tile.ultra-rare:hover::after,
.inventory-tile.ultra-rare:focus-visible::after,
.equipment-drop.ultra-rare:hover::after,
.equipment-drop.ultra-rare:focus-visible::after { opacity: .9; }

@keyframes ultraRareAura {
  0%, 100% { opacity: .56; transform: scale(.985); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ultra-cyan) 46%, transparent)); }
  50% { opacity: .94; transform: scale(1.012); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ultra-green) 62%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-tile.ultra-rare::before,
  .equipment-drop.ultra-rare::before { animation: none; opacity: .78; }
}

#toast { position: fixed; z-index: 280; left: 50%; bottom: 24px; max-width: min(430px, calc(100vw - 30px)); transform: translate(-50%, 18px); border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(18,29,35,.96); box-shadow: var(--shadow); color: var(--ink); padding: 10px 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 15px; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.success { border-color: color-mix(in srgb, var(--success) 55%, var(--line-strong)); background: color-mix(in srgb, var(--success) 16%, rgba(18,29,35,.96)); color: var(--success); font-weight: 800; }
.hover-tooltip {
  position: fixed; z-index: 10000; width: min(370px, calc(100vw - 18px)); max-height: min(58vh, calc(100vh - 18px)); padding: 13px 15px;
  box-sizing: border-box; overflow-y: auto;
  border: 1px solid var(--game-warm); border-radius: 10px;
  background: linear-gradient(145deg, #172a30, #080f13 65%); box-shadow: inset 0 0 0 3px #a67d3430, 0 18px 46px #000b;
  color: var(--ink-soft); font: 13px/1.45 var(--sans); white-space: normal;
  pointer-events: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.hover-tooltip::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--game-warm) 16%, transparent); border-radius: 7px; pointer-events: none; }
.hover-tooltip-title-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.hover-tooltip-art { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-warm) 48%, var(--line-strong)); border-radius: 9px; background: radial-gradient(circle at 50% 35%, rgba(201,161,90,.13), transparent 60%), rgba(0,0,0,.3); box-shadow: inset 0 0 13px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.35); }
.hover-tooltip-art > .item-art-icon, .hover-tooltip-art > .item-svg-icon, .hover-tooltip-art > .item-fallback-art { width: 88%; height: 88%; }
.hover-tooltip-title-row .hover-tooltip-heading { padding: 0; margin: 0; border: 0; }
.hover-tooltip-heading { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-strong); color: var(--game-warm); font: bold 18px/1.2 Georgia, serif; }
.hover-tooltip-element { display: inline-block; margin: 0 0 6px !important; border: 1px solid color-mix(in srgb, var(--game-accent) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--game-accent) 9%, transparent); color: var(--game-accent-bright, var(--ink-soft)); padding: 3px 9px; font-size: 12px; font-weight: 800; }
.hover-tooltip-details p { margin: 5px 0; overflow-wrap: anywhere; }
.hover-tooltip-equipment-meta {
  display: inline-block;
  margin: 0 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--game-warm) 58%, var(--line-strong));
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--game-warm) 16%, transparent), color-mix(in srgb, var(--ultra-cyan) 8%, transparent));
  color: var(--game-warm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hover-tooltip-equipment-meta.rarity-uncommon { --tooltip-rarity: #7fda86; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-rare { --tooltip-rarity: #72b9ff; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-epic { --tooltip-rarity: #c58af0; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-legendary { --tooltip-rarity: #f09b63; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-mythic { --tooltip-rarity: #ef75ba; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-ascendant { --tooltip-rarity: #61e4d7; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 62%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 12%, transparent); }
.hover-tooltip-equipment-meta.rarity-divine { --tooltip-rarity: #ffe16a; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 68%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 14%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--tooltip-rarity) 38%, transparent); }
.hover-tooltip-equipment-meta.rarity-founders { --tooltip-rarity: #ff7b78; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 66%, var(--line-strong)); background: color-mix(in srgb, var(--tooltip-rarity) 13%, transparent); }
.hover-tooltip-equipment-meta.rarity-worldset { --tooltip-rarity: #8be89a; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 66%, var(--line-strong)); background: linear-gradient(90deg, rgba(109,227,224,.12), rgba(139,232,154,.12)); text-shadow: 0 0 8px rgba(109,227,224,.35); }
.hover-tooltip-equipment-meta.rarity-resplendent { --tooltip-rarity: #f4ecd8; color: var(--tooltip-rarity); border-color: color-mix(in srgb, var(--tooltip-rarity) 70%, var(--line-strong)); background: linear-gradient(90deg, rgba(244,236,216,.12), rgba(200,170,255,.1)); text-shadow: 0 0 8px rgba(244,236,216,.4); }
.hover-tooltip-set { display: inline-block; padding: 4px 10px; border: 1px solid var(--set-color); border-radius: 6px; background: color-mix(in srgb, var(--set-color) 16%, transparent); color: var(--set-color); font-weight: 800; }
.hover-tooltip-set-tier { padding-left: 4px; color: var(--set-color-dim); font-weight: 600; }
.hover-tooltip-set-tier.active { color: var(--set-color); font-weight: 800; }
/* Cyan-to-green, matching the worldset rarity's existing color language --
   reserved for the ultraRare flag (roughly 1-in-10,000-or-worse chase
   drops), independent of the item's own rarity tier. */
.hover-tooltip-ultra-rare { display: inline-block; padding: 4px 10px; border: 1px solid #6de3e0; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, #6de3e0 22%, transparent), color-mix(in srgb, #8be89a 22%, transparent)); background-clip: padding-box; color: #8be89a; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 8px color-mix(in srgb, #6de3e0 60%, transparent); }
.equipment-drop.filled[data-tooltip]::after { display: none; }
.equipment-drop.filled.ultra-rare[data-tooltip]::after { display: block; }
.equipment-drop.filled.ultra-rare[data-tooltip]::after {
  content: "";
  inset: 9%;
  bottom: auto;
  left: auto;
  width: auto;
  max-width: none;
  transform: none;
  border: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--ultra-cyan) 16%, transparent), transparent 68%);
  box-shadow: none;
  color: transparent;
  padding: 0;
  opacity: 0;
  visibility: visible;
  white-space: normal;
  font: inherit;
}
.equipment-drop.filled.ultra-rare[data-tooltip]:hover::after,
.equipment-drop.filled.ultra-rare[data-tooltip]:focus-visible::after { opacity: .9; visibility: visible; transform: none; }
.hover-tooltip[hidden] { display: none; }

@keyframes drift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,12px,0); } }
@keyframes routeFlow { to { stroke-dashoffset: -21; } }
@keyframes levelUpIn { from { opacity: 0; transform: translate(-50%, -10px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (max-width: 1500px) {
  .equipment-workspace, .inventory-workspace { grid-template-columns: 1fr; }
  .equipment-loadout-bar { grid-template-columns: auto 1fr; }
  .equipment-loadout-bar > span { justify-self: end; }
  .equipment-legend { grid-column: 1 / -1; justify-content: flex-start; padding-top: 7px; border-top: 1px solid var(--line); }
  .equipment-summary .tool-slot-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .item-detail { position: static; min-height: 0; }
}

@media (max-width: 1180px) {
  .game-grid { grid-template-columns: 260px 1fr; }
  .right-rail { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-left: 0; border-top: 1px solid var(--line); }
  .right-rail .panel { margin: 0; }
  .brand-lockup { min-width: 195px; }
  .brand-lockup b { font-size: 15px; }
  .phase-pill { min-width: 110px; }
  .card-grid.dungeon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .auth-layout { width: min(620px, calc(100% - 30px)); grid-template-columns: 1fr; gap: 35px; padding: 44px 0; }
  .auth-story { text-align: center; }
  .auth-sigil { margin-inline: auto; }
  .auth-copy { margin-inline: auto; }
  .feature-list { justify-content: center; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 9px 11px 0; }
  .brand-lockup { flex: 1; min-width: 190px; }
  .phase-pill { order: 2; min-width: 0; }
  .account-menu { order: 3; min-width: auto; }
  .tabs { order: 4; flex-basis: calc(100% + 22px); height: 39px; margin-inline: -11px; overflow-x: auto; justify-content: flex-start; border-top: 1px solid var(--line); }
  .tab { min-width: 72px; }
  .game-grid { grid-template-columns: 1fr; }
  .left-rail { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .left-rail .panel { margin: 0; }
  .left-rail .panel:has(#equipment) { grid-column: 1 / 3; }
  #inventory.view-list.scroll-mode { max-height: 210px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .right-rail { grid-column: 1; }
  .skill-row { grid-template-columns: minmax(90px, 1fr) 32px minmax(100px, 1fr); }
  .skill-xp { display: none; }
  .skill-window { grid-column: 1 / 4; }
  .dossier-grid { grid-template-columns: 1fr 1fr; }
  .inventory-workspace { grid-template-columns: 1fr; }
  .item-detail { position: static; }
  .equipment-workspace { grid-template-columns: 1fr; }
  .paperdoll-full { min-width: 520px; }
  #tab-equipment { overflow-x: auto; }
}

@media (max-width: 560px) {
  .auth-layout { width: min(100% - 22px, 430px); padding: 28px 0; }
  .auth-story h1 { font-size: clamp(38px, 14vw, 59px); overflow-wrap: anywhere; }
  .auth-copy { font-size: 17px; }
  .feature-list { gap: 8px 16px; }
  .feature-list span:last-child { display: none; }
  .auth-card { padding: 24px 20px; }
  .brand-lockup small { display: none; }
  .phase-pill { max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
  .account-menu > span { display: none; }
  .left-rail { grid-template-columns: 1fr; }
  #inventory { display: block; }
  .play-space { padding: 8px 8px 28px; }
  .scene-card, .scene-card > img { min-height: 225px; }
  .scene-copy { padding: 15px; }
  .scene-copy p { font-size: 14px; }
  .activity-card { grid-template-columns: 34px 1fr; }
  .activity-meta { grid-column: 2; text-align: left; }
  .combatants { grid-template-columns: 1fr; }
  .versus { display: none; }
  .combatant.foe { grid-template-columns: auto 1fr; text-align: left; }
  .combatant.foe > div:first-child { order: 2; }
  .combatant.foe .combatant-portrait { order: 1; }
  .combat-log-row { grid-template-columns: 58px 1fr 58px; gap: 5px; padding-inline: 6px; }
  .combat-history-log .combat-log-row { grid-template-columns: 46px 58px 1fr 58px; }
  .combat-prep { grid-template-columns: 1fr; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .dossier-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .action-card { min-height: 166px; padding: 10px; }
  .skill-start-row { grid-template-columns: 1fr; }
  .skill-outcome-summary { border-top: 1px solid color-mix(in srgb, var(--game-warm) 28%, var(--line)); border-left: 0; }
  .action-top { flex-wrap: wrap; }
  .level-chip { order: 3; }
  .right-rail { display: block; }
  .right-rail .panel { margin-bottom: 9px; }
  .world-chat-panel { margin-top: 14px; }
  #chat { height: 280px; }
  .skills-summary { grid-template-columns: 1fr; }
  .xp-window-summary { grid-template-columns: 1fr; }
  .summary-card { display: flex; align-items: center; justify-content: space-between; }
  .summary-card b { margin: 0; }
  .option-grid { grid-template-columns: 1fr; }
  .quick-chat-form, #chatForm { grid-template-columns: 104px minmax(0, 1fr) 31px; }
  .chat-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .chat-option-grid, .card-grid.dungeon-grid { grid-template-columns: 1fr; }
  .gear-set-row { grid-template-columns: 1fr auto; }
  .gear-set-row > div { grid-column: 1 / -1; }
  .forum-thread-row { grid-template-columns: 26px minmax(0,1fr); }
  .forum-thread-row em { grid-column: 2; }
  .skill-row { grid-template-columns: 1fr 34px; }
  .skill-progress { grid-column: 1 / 3; }
  .skill-window { grid-column: 1 / 3; }
  .section-heading { align-items: flex-end; }
}

@media (max-width: 390px) {
  .card-grid { grid-template-columns: 1fr; }
  .feature-list { display: none; }
  .auth-story { padding-top: 10px; }
}

/* Quick actions */
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.quick-actions:empty, .quick-actions[hidden] { display: none; }
.quick-action-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--game-warm) 45%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--game-warm) 12%, var(--panel-2)); color: var(--ink); padding: 10px 16px; font: 700 15px var(--sans); cursor: pointer; transition: transform .12s, background .12s; }
.quick-action-button:hover { background: color-mix(in srgb, var(--game-warm) 22%, var(--panel-2)); transform: translateY(-1px); }
.quick-action-button span { font-size: 18px; }
.quick-action-xp { font: 600 11px var(--sans); color: var(--muted); opacity: .85; }
.xp-bonus { color: #8ff0b4; font-weight: 900; text-shadow: 0 0 8px rgba(94,235,160,.24); white-space: nowrap; }
.quick-action-xp .xp-bonus, .activity-card-xp-inline .xp-bonus { font-size: .9em; }
.quick-action-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quick-action-item.has-open-panel { flex: 1 0 100%; }
.quick-action-button.expanded { outline: 2px solid var(--game-warm); outline-offset: 1px; }
.quick-material-group { flex: 1 0 100%; min-width: 0; }
.quick-material-dropdown { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--game-warm) 52%, var(--line)); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--game-warm) 17%, var(--panel-2)), color-mix(in srgb, var(--game-warm) 6%, var(--panel))); color: var(--game-warm-bright); padding: 12px 15px; cursor: pointer; font: 800 14px var(--serif); letter-spacing: .04em; text-align: left; }
.quick-material-dropdown:hover { border-color: var(--game-warm-bright); background: linear-gradient(135deg, color-mix(in srgb, var(--game-warm) 25%, var(--panel-2)), color-mix(in srgb, var(--game-warm) 10%, var(--panel))); }
.quick-material-count { color: var(--muted); font: 700 11px var(--sans); letter-spacing: .02em; }
.quick-material-chevron { color: var(--game-warm); font-size: 11px; }
.quick-material-dropdown-content { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; padding: 10px; border: 1px solid color-mix(in srgb, var(--game-warm) 25%, var(--line)); border-radius: 7px; background: rgba(0,0,0,.14); }
.quick-material-dropdown-content .quick-action-item { min-width: 0; }
.world-materials-group { margin-top: 12px; }
.world-materials-content { margin-top: 10px; }
.quick-continue-button { white-space: nowrap; }
.quick-config-panel { flex: 1 0 100%; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.quick-config-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.activity-card-xp-inline { font: 600 11px var(--sans); color: var(--muted); opacity: .85; margin-left: 4px; }

/* Durability */
.durability-bar { position: relative; height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
.durability-bar i { display: block; height: 100%; background: var(--success); transition: width .2s; }
.durability-bar.low i { background: var(--danger); }

/* Tool slots */
.tool-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }

/* Status ailments */
.ailment-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ailment-badge { border: 1px solid var(--line-strong); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ailment-badge.poison { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.ailment-badge.blind { color: var(--muted); border-color: var(--line-strong); }
.ailment-badge.weaken { color: var(--game-warm); border-color: color-mix(in srgb, var(--game-warm) 45%, var(--line)); }

/* Location menu - a compact, click-through index of what's here, instead of
   stacking every section (work/creatures/merchant/ground) on one long page. */
.location-menu { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 2px 0 14px; padding: 9px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.location-menu-link { position: relative; display: inline-flex; align-items: center; gap: 7px; border-radius: 4px; background: transparent; color: var(--ink-soft); padding: 7px 12px; cursor: pointer; font: 700 13px var(--serif); letter-spacing: .03em; }
.location-menu-link .count { color: var(--muted); font: 700 12px var(--sans); }
.location-menu-link:hover { background: rgba(255,255,255,.03); color: var(--ink); }
.location-menu-link.active { background: linear-gradient(180deg, color-mix(in srgb, var(--game-warm) 20%, transparent), color-mix(in srgb, var(--game-warm) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line)); color: var(--game-warm-bright); }
.location-menu-link.active .count { color: var(--game-warm); }

@media (max-width: 720px) {
  .location-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .location-menu-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
.location-section { animation: sectionIn .15s ease-out; }

.world-event-card {
  display:grid; grid-template-columns:minmax(210px, 31%) 1fr; gap:16px; overflow:hidden;
  margin:0 0 14px; padding:12px; border:1px solid rgba(137,98,255,.58); border-radius:8px;
  background:linear-gradient(115deg,rgba(8,12,23,.98),rgba(29,13,42,.93) 62%,rgba(9,21,31,.97));
  box-shadow:inset 0 0 36px rgba(92,57,174,.16),0 10px 28px rgba(0,0,0,.32);
}
.world-event-card.cleared {grid-template-columns:1fr;border-color:rgba(80,203,153,.42);background:linear-gradient(110deg,rgba(7,23,25,.96),rgba(10,38,33,.88));}
.world-event-card>img {width:100%;height:170px;object-fit:contain;filter:drop-shadow(0 8px 14px #000) drop-shadow(0 0 12px rgba(76,135,255,.28));}
.world-event-copy {display:flex;flex-direction:column;justify-content:center;min-width:0;}
.world-event-copy h2 {margin:2px 0 5px;font-size:clamp(1.25rem,2vw,1.8rem);}
.world-event-copy p {margin:0 0 8px;}
.world-event-status,.world-event-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.world-event-status {margin:3px 0 10px;color:var(--muted);font-size:.82rem;}
.world-event-status span {padding:4px 7px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.28);}
@media (max-width:720px){.world-event-card{grid-template-columns:1fr}.world-event-card>img{height:135px}}
.location-player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.location-player-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.location-player-card .clan-tag-chip { position: absolute; top: 6px; right: 6px; }
.location-player-card-name { display: flex; flex-direction: column; gap: 2px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; padding: 0; }
.location-player-card-name:hover b { color: var(--game-warm-bright); }
.location-player-card-name b { font: 600 15px var(--serif); }
.location-player-card-name small { color: var(--muted); font-size: 12px; }
.location-player-card.is-admin .location-player-card-name b { color: var(--danger); }
.location-player-card.is-mod .location-player-card-name b { color: #74cfff; }

/* The always-visible "who's here" strip under Quick Actions. */
.location-players-panel[hidden] { display: none; }
.location-special-panel[hidden] { display: none; }
.location-items-panel[hidden] { display: none; }
.location-special-panel { margin-top: 8px; }
.location-items-panel { margin-top: 8px; }
.quick-special-card { margin: 0; }
.quick-special-card em { color: var(--game-warm); font-style: normal; white-space: nowrap; }
.special-empty { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--line)); border-radius: 7px; color: var(--muted); background: rgba(0,0,0,.16); font-size: 12px; }
.special-empty-icon { color: #77808a; font-size: 11px; }
.quick-menu-tab-special.has-special-event { color: #ffb14e; border-color: rgba(255,126,35,.72); box-shadow: inset 0 0 0 1px rgba(255,126,35,.35), 0 0 12px rgba(255,93,22,.28); animation: specialTabFire 1.45s ease-in-out infinite; }
.quick-menu-tab-special:not(.has-special-event) { color: #7c8790; border-color: rgba(124,135,144,.28); }
.quick-menu-tab-items:not(.has-items-event) { color: #7c8790; border-color: rgba(124,135,144,.28); }
.quick-menu-tab-items.has-items-event { color: #ffe16a; border-color: rgba(255,211,57,.76); box-shadow: inset 0 0 0 1px rgba(255,211,57,.38), 0 0 12px rgba(255,184,26,.3); animation: itemsTabFire 1.45s ease-in-out infinite; }
.quick-menu-tab-items.has-items-event .items-fire { display: inline-block; filter: sepia(1) saturate(2.4) hue-rotate(350deg) drop-shadow(0 0 5px rgba(255,191,31,.95)); animation: specialFireFlicker .72s ease-in-out infinite alternate; }
.items-empty { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--line)); border-radius: 7px; color: var(--muted); background: rgba(0,0,0,.16); font-size: 12px; }
.items-empty-icon { color: #77808a; font-size: 11px; }
.quick-items-card { padding: 10px 12px; border: 1px solid rgba(255,211,57,.34); border-radius: 7px; background: linear-gradient(100deg, rgba(93,66,9,.2), rgba(0,0,0,.18)); }
.quick-items-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.quick-items-heading b { color: #ffe16a; }
.quick-items-heading span, .quick-ground-item small { color: var(--muted); font-size: 11px; }
.quick-items-list { display: grid; gap: 5px; }
.quick-ground-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; border-top: 1px solid rgba(255,211,57,.15); }
.quick-ground-icon { flex: 0 0 30px; }
.quick-ground-icon .item-icon { width: 30px; height: 30px; }
.quick-ground-name { display: grid; gap: 1px; min-width: 0; flex: 1; }
.quick-ground-name b { overflow-wrap: anywhere; }
.quick-ground-actions { flex: 0 0 auto; }
@keyframes itemsTabFire { 0%,100% { box-shadow: inset 0 0 0 1px rgba(255,211,57,.35), 0 0 8px rgba(255,184,26,.2); } 50% { box-shadow: inset 0 0 0 1px rgba(255,239,122,.82), 0 0 18px rgba(255,184,26,.62); } }
.quick-menu-tab-special.has-special-event .special-fire { display: inline-block; filter: drop-shadow(0 0 5px rgba(255,93,22,.9)); animation: specialFireFlicker .72s ease-in-out infinite alternate; }
@keyframes specialTabFire { 0%,100% { box-shadow: inset 0 0 0 1px rgba(255,126,35,.35), 0 0 8px rgba(255,93,22,.2); } 50% { box-shadow: inset 0 0 0 1px rgba(255,177,76,.8), 0 0 18px rgba(255,93,22,.62); } }
@keyframes specialFireFlicker { from { transform: translateY(1px) scale(.94) rotate(-4deg); } to { transform: translateY(-1px) scale(1.08) rotate(4deg); } }
.location-players-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 3px 14px; overflow-x: auto; padding-bottom: 2px; }
.location-players-grid.full { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow-x: visible; }
.location-player-row { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.location-player-row.is-admin .player-name-button { color: var(--danger); }
.location-player-row.is-mod .player-name-button { color: #74cfff; }
.player-name-button { border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 13px var(--serif); padding: 2px 4px; border-radius: 4px; }
/* Staff identity is deliberately exclusive: Admin is red, Moderator is blue. */
.forum-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font: 800 11px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.forum-role-admin {
  background: rgba(170, 30, 30, .16);
  color: #ff7777;
  border: 1px solid rgba(255, 90, 90, .72);
  text-shadow: 0 0 6px rgba(255, 80, 80, .45);
}
.forum-role-mod {
  background: rgba(0, 120, 190, .16);
  color: #74cfff;
  border: 1px solid rgba(80, 190, 255, .72);
  text-shadow: 0 0 6px rgba(80, 190, 255, .4);
}
.staff-badge-admin { color: #ff7777; border-color: rgba(255,90,90,.72); }
.staff-badge-mod { color: #74cfff; border-color: rgba(80,190,255,.72); }
.moderation-ticket-panel { display: grid; gap: 14px; }
.moderation-ticket-create, .moderation-ticket-card { border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.2); padding: 12px; }
.moderation-ticket-create { display: grid; gap: 10px; }
.moderation-ticket-create h3 { margin: 0; }
.moderation-ticket-create textarea { min-height: 90px; }
.moderation-ticket-list { display: grid; gap: 12px; }
.moderation-ticket-card { display: grid; gap: 10px; }
.moderation-ticket-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.moderation-ticket-card h3 { margin: 2px 0; }
.moderation-ticket-card header p { margin: 3px 0 0; }
.moderation-ticket-status { display: inline-flex; flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.moderation-ticket-status-unsolved { color: #ffd37a; border: 1px solid rgba(255,190,70,.7); background: rgba(120,70,12,.2); }
.moderation-ticket-status-pending_m { color: #ff9999; border: 1px solid rgba(255,100,100,.65); background: rgba(120,20,20,.2); }
.moderation-ticket-status-pending_p { color: #8dd8ff; border: 1px solid rgba(70,180,255,.65); background: rgba(20,80,130,.2); }
.moderation-ticket-status-solved { color: #8ee6a0; border: 1px solid rgba(90,210,120,.65); background: rgba(20,100,45,.2); }
.moderation-ticket-messages { display: grid; gap: 7px; }
.moderation-ticket-message { padding: 8px 10px; border-left: 3px solid var(--line-strong); background: rgba(0,0,0,.18); }
.moderation-ticket-message.from-staff { border-left-color: #74cfff; }
.moderation-ticket-message.from-player { border-left-color: #d4b46c; }
.moderation-ticket-message b { margin-right: 8px; }
.moderation-ticket-message small { color: var(--muted); }
.moderation-ticket-message p { margin: 5px 0 0; white-space: pre-wrap; }
.moderation-ticket-reply { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 8px; align-items: end; }
.moderation-ticket-reply textarea { min-height: 62px; }
@media (max-width: 720px) { .moderation-ticket-reply { grid-template-columns: 1fr; } .moderation-ticket-card > header { display: grid; } }
.forum-admin-star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(170, 30, 30, .16);
  color: #ff7777;
  border: 1px solid rgba(255, 90, 90, .72);
}
.player-name-button:hover { color: var(--game-warm-bright); background: rgba(255,255,255,.05); }
.clan-tag-chip { border: 1px solid color-mix(in srgb, #65c77a 48%, var(--line)); background: rgba(0,0,0,.2); border-radius: 4px; color: #65c77a; cursor: pointer; font-size: 10px; font-weight: 800; padding: 1px 5px; flex: 0 0 auto; }
.clan-tag-chip:hover { border-color: #65c77a; }
#who .clan-tag-chip { color: var(--game-accent); border-color: var(--line); }
#who .clan-tag-chip:hover { border-color: var(--game-accent); }
.faction-name, .faction-tag { color: #65c77a; }
.forum-index-row.faction-board .forum-index-board b, .forum-index-row.faction-board .forum-index-board small { color: #65c77a; }
.trade-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.trade-side { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.trade-side h3 { margin: 0 0 8px; font: 600 15px var(--serif); display: flex; align-items: center; gap: 8px; }
.trade-confirmed { color: var(--success, #6bc17a); font-size: 12px; }
.trade-item-list { display: flex; flex-direction: column; gap: 6px; min-height: 30px; margin-bottom: 8px; }
.trade-item-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.trade-item-row b { flex: 1; font-size: 13px; }
.trade-item-row small { color: var(--muted); }
.trade-add-row { display: flex; gap: 6px; margin: 8px 0; }
.trade-warning { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--game-warm) 55%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--game-warm) 12%, transparent); color: var(--game-warm-bright); font-size: 13px; font-weight: 700; }
.trade-pick-panel { margin: 10px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.14); }
.trade-pick-all { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.trade-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.trade-pick-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }
.trade-pick-row:hover { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--line)); }
.trade-pick-name { font-size: 13px; }
.trade-pick-name small { display: block; color: var(--muted); font-weight: 500; }
.trade-pick-qty { width: 56px; }
.trade-add-row select { flex: 1; min-width: 0; }
.trade-add-row input[type="number"] { width: 72px; }
.forum-scope-notice { margin: 8px 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.faction-forum-notice { color: #65c77a; }
@media (max-width: 640px) { .trade-columns { grid-template-columns: 1fr; } }

/* Trade is an item-facing workspace, not a narrow form. Use the same
   picture-first vocabulary as the vault and faction storage so a player can
   scan a large collection without reading a wall of clipped names. */
.trade-panel { width: 100%; max-width: none; }
.trade-panel .trade-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.trade-side { min-width: 0; min-height: 360px; }
.trade-item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.trade-item-tile { position: relative; min-width: 0; min-height: 112px; display: grid; grid-template-rows: 52px minmax(0, 1fr) auto; justify-items: center; gap: 4px; padding: 8px 5px; text-align: center; }
.trade-item-tile .trade-item-icon { display: grid; place-items: center; width: 52px; height: 52px; font-size: 42px; }
.trade-item-tile .trade-item-icon > img, .trade-item-tile .trade-item-icon > .item-art-icon, .trade-item-tile .trade-item-icon > .item-svg-icon { width: 100%; height: 100%; object-fit: contain; }
.trade-item-tile b { min-width: 0; max-width: 100%; color: var(--ink-soft); font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
.trade-item-tile small { color: var(--muted); font-size: 11px; }
.trade-item-tile .mini-button { position: absolute; right: 3px; top: 3px; padding: 2px 4px; font-size: 9px; }
.trade-pick-panel { padding: 12px; }
.trade-pick-panel .storage-filter-grid { margin: 0 0 10px; }
.trade-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: min(52vh, 560px); padding: 2px; overflow-y: auto; }
.trade-pick-tile { position: relative; min-width: 0; min-height: 142px; display: grid; grid-template-columns: 1fr; grid-template-rows: 18px 68px minmax(0, 1fr) 27px; justify-items: center; gap: 4px; padding: 7px 6px; border-radius: 8px; text-align: center; }
.trade-pick-tile input.trade-pick-check { justify-self: start; }
.trade-pick-icon { display: grid; place-items: center; width: 68px; height: 68px; font-size: 52px; }
.trade-pick-icon > img, .trade-pick-icon > .item-art-icon, .trade-pick-icon > .item-svg-icon { width: 100%; height: 100%; object-fit: contain; }
.trade-pick-name { min-width: 0; width: 100%; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
.trade-pick-name small { margin-top: 2px; font-size: 10px; }
.trade-pick-qty { width: 64px; }
/* Mail uses the same visual language as vault and faction storage: the
   picture is the primary choice, while the owned quantity stays visible. */
.mail-attach-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:8px; max-height:min(52vh, 560px); padding:2px; overflow-y:auto; }
.mail-attach-tile { position:relative; min-width:0; min-height:132px; display:grid; grid-template-rows:74px auto auto; justify-items:center; gap:4px; padding:7px 6px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); cursor:pointer; text-align:center; }
.mail-attach-tile:hover, .mail-attach-tile.selected { border-color:var(--game-accent); box-shadow:0 0 12px color-mix(in srgb, var(--game-accent) 24%, transparent); }
.mail-attach-tile input { position:absolute; inset:7px auto auto 7px; accent-color:var(--game-accent); }
.mail-attach-art { display:grid; place-items:center; width:72px; height:72px; }
.mail-attach-art > img, .mail-attach-art > .item-art-icon, .mail-attach-art > .item-svg-icon { width:100%; height:100%; object-fit:contain; }
.mail-attach-name { min-width:0; width:100%; overflow-wrap:anywhere; font-size:11px; line-height:1.15; }
.mail-attach-owned { color:var(--muted); font-size:10px; }
.mail-attach-qty { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--game-warm); }
.mail-attach-qty input { position:static; width:58px; padding:2px 4px; }

.manual-topic { max-width: 760px; padding: 16px 18px; border-radius: 8px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px var(--line); }
.manual-topic h3 { margin: 0 0 10px; font: 600 20px var(--serif); color: var(--game-warm-bright); }
.manual-topic p { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.manual-topic p:last-child { margin-bottom: 0; }
.manual-topic b { color: var(--ink); }
.manual-topic:has(.manual-class-grid), .manual-topic:has(.manual-resource-directory) { max-width:none; }
.manual-class-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:14px; }
.manual-class-card { position:relative; min-width:0; padding:13px; border:1px solid rgba(122,155,164,.25); border-radius:10px; background:linear-gradient(145deg,rgba(15,28,34,.96),rgba(8,16,21,.94)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.manual-class-card.current { border-color:#d3a35f; box-shadow:0 0 18px rgba(211,163,95,.12),inset 0 0 18px rgba(211,163,95,.05); }
.manual-class-card h4 { margin:7px 0 5px; color:#eee2cd; font:700 1.05rem var(--serif); }
.manual-class-card p { margin:0 0 9px; color:#aab8ba; font-size:.84rem; }
.manual-class-card strong,.manual-class-card small { display:block; }
.manual-class-card strong { color:#75d2df; font-size:.8rem; }
.manual-class-card small { margin-top:3px; color:#89999c; line-height:1.45; }

/* Job codex --------------------------------------------------------------- */
.jobs-heading { align-items: center; }
.jobs-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.jobs-overview > div { min-width:0; padding:11px 12px; border:1px solid rgba(103,182,193,.24); border-radius:9px; background:linear-gradient(145deg,rgba(14,29,35,.92),rgba(5,13,17,.9)); }
.jobs-overview span,.jobs-overview b { display:block; }
.jobs-overview span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.jobs-overview b { margin-top:4px; overflow:hidden; color:var(--game-warm-bright); font:700 17px var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.job-codex-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:12px; align-items:start; }
.job-codex-card { min-width:0; padding:13px; border:1px solid rgba(104,157,168,.28); border-radius:11px; background:linear-gradient(145deg,rgba(15,29,35,.98),rgba(5,12,16,.96)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.13); }
.job-codex-card.current { border-color:rgba(224,176,94,.78); box-shadow:inset 0 0 20px rgba(218,163,75,.07),0 0 19px rgba(218,163,75,.12); }
.job-codex-card > header { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:11px; }
.job-codex-badge { display:grid; place-items:center; width:56px; height:56px; border:1px solid rgba(109,218,224,.42); border-radius:12px; background:radial-gradient(circle,rgba(67,139,153,.3),rgba(4,11,14,.76)); box-shadow:inset 0 0 14px rgba(92,196,208,.12),0 4px 12px rgba(0,0,0,.26); }
.job-codex-badge .job-badge { width:46px; height:46px; border-radius:9px; box-shadow:0 0 13px rgba(91,205,218,.22); }
.job-codex-card .eyebrow { margin:0 0 2px; color:var(--game-accent); }
.job-codex-card h3 { margin:0; color:#f2e4ca; font:700 19px var(--serif); }
.job-codex-card h3 span { margin-left:5px; color:var(--game-warm-bright); font:800 9px var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.job-codex-card > header > strong { align-self:start; color:var(--game-accent); font-size:12px; white-space:nowrap; }
.job-codex-summary { min-height:42px; margin:11px 0; color:var(--ink-soft); font-size:13px; line-height:1.45; }
.job-codex-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:0 0 10px; }
.job-codex-meta span { min-width:0; padding:7px 8px; border-left:2px solid rgba(109,218,224,.45); background:rgba(0,0,0,.18); }
.job-codex-meta small,.job-codex-meta b { display:block; }
.job-codex-meta small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.job-codex-meta b { margin-top:3px; overflow:hidden; color:#d7e3df; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.job-mastery-summary { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:7px; align-items:start; margin:10px 0; padding:8px; border:1px solid rgba(219,192,111,.34); border-radius:8px; background:linear-gradient(100deg,rgba(197,158,69,.14),rgba(29,49,52,.18)); }
.job-mastery-summary .job-mastery-art { display:grid; place-items:center; width:30px; height:30px; grid-row:1 / 3; overflow:hidden; border:1px solid rgba(219,192,111,.34); border-radius:7px; background:rgba(3,10,13,.56); }
.job-mastery-summary .job-mastery-art img { display:block; width:27px; height:27px; object-fit:contain; object-position:center; }
.job-mastery-summary b,.job-mastery-summary small { min-width:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.job-mastery-summary b { color:#f4d98d; font-size:12px; }
.job-mastery-summary small { color:#c9d8d4; font-size:10px; }
.job-party-ability { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; margin:10px 0; padding:8px; border:1px solid rgba(101,172,195,.22); border-radius:8px; background:rgba(21,48,58,.24); }
.job-party-ability > span { display:grid; place-items:center; color:var(--game-accent); }
.job-party-ability small,.job-party-ability b,.job-party-ability p { display:block; margin:0; }
.job-party-ability small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.job-party-ability b { margin:2px 0 3px; color:#d9eef0; font-size:12px; }
.job-party-ability p { color:var(--ink-soft); font-size:11px; line-height:1.35; }
.job-ability-list { margin-top:12px; border-top:1px solid var(--line); padding-top:9px; }
.job-ability-list h4 { margin:0 0 7px; color:var(--game-warm-bright); font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.job-ability-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 0; border-top:1px solid rgba(119,153,160,.15); }
.job-ability-row:first-of-type { border-top:0; }
.job-ability-row.job-mastery-row { margin:0 -4px; padding:8px 4px; border-radius:7px; background:linear-gradient(90deg,rgba(211,169,76,.13),transparent); }
.job-ability-art { display:grid; place-items:center; width:30px; height:30px; overflow:hidden; border:1px solid rgba(109,218,224,.22); border-radius:7px; background:rgba(3,10,13,.56); }
.job-ability-art img,.job-ability-art .ability-art-icon { display:block; width:25px; height:25px; object-fit:contain; object-position:center; }
.job-ability-row b,.job-ability-row small,.job-ability-row p { display:block; margin:0; }
.job-ability-row b { color:#dfe9e4; font-size:12px; }
.job-ability-row small { margin-top:1px; color:var(--game-accent); font-size:10px; }
.job-ability-row small.mastery-stat-line { color:#9cf1b4; font-size:12px; font-weight:900; letter-spacing:.01em; text-shadow:0 0 9px rgba(92,222,137,.32); }

/* Interface polish stays on the chrome, never on item artwork. */
.section-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 11px 13px;
  border: 1px solid rgba(108,177,187,.2);
  border-radius: 10px;
  background: linear-gradient(112deg, rgba(29,61,68,.28), rgba(9,18,22,.18) 58%, rgba(117,82,38,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 7px 18px rgba(0,0,0,.1);
}
.section-heading::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 28%, rgba(207,244,235,.22) 49%, rgba(237,194,106,.16) 55%, transparent 72%);
  background-size:260% 100%;
  animation: interfaceFrameShimmer 12s cubic-bezier(.37,0,.63,1) infinite;
}
.section-heading > * { position:relative; z-index:1; }
.summary-card, .inventory-toolbar, .combat-prep, .shop-view-tabs, .auction-view-tabs {
  border-color: rgba(112,187,194,.25);
  background: linear-gradient(135deg, rgba(23,48,55,.32), rgba(7,15,19,.42) 62%, rgba(103,73,35,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 5px 15px rgba(0,0,0,.12);
}
.summary-card:hover, .inventory-toolbar:hover, .combat-prep:hover {
  border-color: rgba(231,190,104,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 19px rgba(89,192,205,.12);
}
@keyframes interfaceFrameShimmer { 0%,72%,100% { background-position:150% 0; opacity:0; } 80% { opacity:.08; } 89% { background-position:-52% 0; opacity:.65; } 96% { background-position:-125% 0; opacity:0; } }
.job-ability-row p { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.35; }
.job-ability-row .mini-button { min-width:80px; font-size:10px; }
.job-ability-action { display:flex; align-items:flex-end; flex-direction:column; gap:4px; }
.ability-access { display:inline-flex; align-items:center; min-height:15px; padding:2px 5px; border-radius:999px; font:900 8px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.ability-access.any-job { color:#b9ffd0; border:1px solid rgba(89,227,132,.55); background:rgba(45,168,86,.16); box-shadow:0 0 9px rgba(74,221,123,.22); }
.ability-access.source-job-only { color:#c9e9ff; border:1px solid rgba(92,178,255,.62); background:rgba(45,112,191,.2); box-shadow:0 0 9px rgba(87,181,255,.2); }
.shop-view-tabs, .auction-view-tabs { display:flex; gap:7px; margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.shop-sell-panel, .auction-sell-panel { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr); gap:18px; padding:15px; border:1px solid color-mix(in srgb, var(--game-accent) 25%, var(--line-strong)); border-radius:10px; background:linear-gradient(135deg,rgba(61,126,138,.12),rgba(5,13,17,.58)); }
.shop-sell-panel h3, .auction-sell-panel h3 { margin:0 0 5px; color:var(--ink); font:600 20px var(--serif); }
.shop-sell-panel p, .auction-sell-panel p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.shop-sell-list { display:grid; gap:6px; max-height:440px; overflow:auto; padding-right:3px; }
.shop-sell-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px; border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.2); }
.shop-sell-row .item-icon { width:34px; height:34px; display:grid; place-items:center; }
.shop-sell-row .item-icon img { width:30px; height:30px; object-fit:contain; }
.shop-sell-row b, .shop-sell-row small { display:block; }
.shop-sell-row b { color:var(--ink-soft); font-size:12px; }
.shop-sell-row small { color:var(--muted); font-size:10px; }
.auction-own-listings { margin-top:14px; }
.auction-own-listings h4 { margin:0 0 7px; color:var(--game-warm-bright); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.auction-own-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; align-items:center; gap:7px; margin-top:5px; padding:6px; border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.2); }
.auction-own-row > span { display:grid; place-items:center; width:28px; height:28px; }
.auction-own-row img { max-width:26px; max-height:26px; object-fit:contain; }
.auction-own-row b { min-width:0; overflow:hidden; color:var(--ink-soft); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.auction-own-row strong { color:var(--game-warm-bright); font-size:11px; white-space:nowrap; }
@media (max-width:620px) { .shop-sell-panel, .auction-sell-panel { grid-template-columns:1fr; } }

/* Wayfarer market: distinct from the weekly NPC lots. The counter has its
   own textile-and-brass treatment, while live offers read like tagged crates
   rather than generic action cards. */
.auction-sell-panel { position:relative; overflow:hidden; isolation:isolate; border-color:rgba(213,173,99,.48); background:linear-gradient(128deg,rgba(61,39,19,.72),rgba(11,25,30,.92) 58%,rgba(19,53,59,.72)); box-shadow:inset 0 0 0 1px rgba(246,212,138,.08),0 11px 24px rgba(0,0,0,.22); }
.auction-sell-panel::before { content:""; position:absolute; inset:0; z-index:0; opacity:.46; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(235,194,113,.055) 23px 24px),linear-gradient(105deg,transparent 0 38%,rgba(98,208,220,.13) 50%,transparent 64%); }
.auction-sell-panel > * { position:relative; z-index:1; }
.auction-sell-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.42fr); gap:10px; align-content:start; padding:12px; border:1px solid rgba(119,210,219,.28); border-radius:10px; background:rgba(3,11,15,.46); }
.auction-sell-form label { display:grid; gap:5px; color:var(--ink-soft); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.auction-sell-form label:first-child,.auction-sell-form label:nth-of-type(3),.auction-sell-form > button,.auction-shop-baseline { grid-column:1 / -1; }
.auction-sell-form select,.auction-sell-form input { min-height:36px; border:1px solid rgba(129,211,220,.32); border-radius:7px; background:rgba(2,9,12,.72); color:var(--ink); padding:7px 9px; font:600 13px var(--sans); }
.auction-shop-baseline { display:flex; align-items:center; min-height:35px; padding:7px 10px; border-left:3px solid var(--game-warm); border-radius:5px; background:linear-gradient(90deg,rgba(214,166,78,.16),rgba(10,26,31,.32)); color:#f0d795; font:700 12px var(--sans); }
.wayfarer-auction-card { position:relative; overflow:hidden; border-color:rgba(102,202,214,.42); background:linear-gradient(135deg,rgba(12,35,42,.97),rgba(8,14,18,.98)); box-shadow:inset 0 0 0 1px rgba(95,213,225,.07),0 8px 18px rgba(0,0,0,.2); }
.wayfarer-auction-card::before { content:""; position:absolute; z-index:1; left:-35%; top:0; width:30%; height:2px; pointer-events:none; background:linear-gradient(90deg,transparent,#8ee8ed,#f1ce80,transparent); box-shadow:0 0 10px #76d9e1; animation:wayfarerMarketSweep 5.4s cubic-bezier(.37,0,.63,1) infinite; }
.wayfarer-auction-card > * { position:relative; z-index:2; }
.wayfarer-auction-card .action-icon { width:46px; height:46px; border:1px solid rgba(238,198,114,.45); border-radius:9px; background:radial-gradient(circle,rgba(238,198,114,.13),rgba(4,12,15,.75)); }
.wayfarer-auction-card .level-chip { color:#f6dc97; border-color:rgba(238,198,114,.5); background:rgba(75,48,18,.52); }
@keyframes wayfarerMarketSweep { 0%,100% { transform:translateX(-15%); opacity:0; } 14% { opacity:0; } 35% { opacity:1; } 61% { transform:translateX(470%); opacity:0; } }
@media (max-width:760px) { .jobs-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .job-codex-grid { grid-template-columns:1fr; } }
@media (max-width:420px) { .jobs-heading { align-items:flex-start; } .job-codex-card > header { grid-template-columns:34px minmax(0,1fr); } .job-codex-card > header > strong { grid-column:2; justify-self:start; } .job-ability-row { grid-template-columns:30px minmax(0,1fr); } .job-ability-row .mini-button { grid-column:2; justify-self:start; } }
.manual-known-regions { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.manual-known-regions span { border:1px solid rgba(82,170,205,.42); background:rgba(40,126,161,.1); color:#82c9e5; padding:4px 8px; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.manual-resource-group { margin-top:17px; }
.manual-resource-group > h4 { display:flex; align-items:center; gap:8px; margin:0 0 7px; border-bottom:1px solid var(--line); color:var(--game-warm-bright); padding-bottom:6px; font:600 16px var(--serif); text-transform:uppercase; letter-spacing:.06em; }
.manual-resource-group > h4 span { color:var(--muted); font:800 10px var(--sans); }
.manual-resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:6px; }
.manual-resource-card { min-width:0; border:1px solid var(--line); background:rgba(2,8,12,.52); }
.manual-resource-card[open] { border-color:var(--line-strong); }
.manual-resource-card summary { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:7px; list-style:none; padding:6px 8px; cursor:pointer; }
.manual-resource-card summary::-webkit-details-marker { display:none; }
.manual-resource-card summary .item-icon { width:32px; height:32px; }
.manual-resource-card summary b { min-width:0; overflow:hidden; color:var(--ink-soft); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.manual-resource-card summary small { color:var(--muted); font-size:9px; }
.manual-resource-card > div { max-height:220px; overflow-y:auto; border-top:1px solid var(--line); padding:4px 8px; }
.manual-resource-card > div p { display:grid; grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr); gap:7px; margin:0; border-bottom:1px solid rgba(195,145,67,.08); padding:5px 0; font-size:10px; line-height:1.35; }
.manual-resource-card > div p:last-child { border-bottom:0; }
.manual-resource-card > div strong { color:#d9ccb1; }
.manual-resource-card > div span { min-width:0; color:var(--muted); }
.class-focus,.current-class-tag { display:inline-block; margin-right:5px; padding:2px 6px; border:1px solid rgba(211,163,95,.28); border-radius:999px; color:#bca477; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.current-class-tag { border-color:rgba(102,210,220,.35); color:#76d7df; }
.account-name-change { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.account-name-change small { grid-column:1/-1; color:var(--muted); }
.pact-list { display:grid; gap:12px; }
.pact-card { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:12px; border:1px solid rgba(117,210,223,.25); border-radius:10px; background:linear-gradient(135deg,rgba(12,28,34,.96),rgba(8,15,20,.96)); }
.pact-portrait { overflow:hidden; min-height:145px; border:1px solid var(--line); border-radius:8px; background:#05090c; }
.pact-portrait img { width:100%; height:100%; object-fit:cover; }
.pact-portrait span { display:grid; place-items:center; height:100%; color:#75d2df; font-size:48px; }
.pact-copy h3 { margin:3px 0 9px; color:var(--ink); font:700 1.2rem var(--serif); }
.pact-copy h3 small { color:var(--game-warm); }
.pact-abilities,.pact-controls { display:flex; flex-wrap:wrap; gap:6px; }
.pact-abilities span { padding:3px 7px; border:1px solid rgba(129,104,197,.35); border-radius:999px; color:#cbb9ed; font-size:.72rem; }
.pact-controls { margin-top:9px; }
.combat-card-actions { display:grid; gap:6px; }
.pact-offer-button { width:100%; }
@media (max-width:640px) { .pact-card { grid-template-columns:1fr; } .pact-portrait { max-height:220px; } }
@keyframes sectionIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Party */
.party-roster { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.party-member-row, .party-combatant { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.party-combatant { grid-template-columns: auto 1fr auto; row-gap: 6px; }
.party-combatant .combat-hp { grid-column: 1 / -1; }
.party-combatant.downed { opacity: .5; }
.party-role-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.2); font-size: 17px; }
.party-role-icon .ui-icon { width: 20px; height: 20px; vertical-align: 0; }
.party-hp { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.party-invite-form { display: flex; gap: 8px; margin: 10px 0 18px; flex-wrap: wrap; }
.party-invite-form input { flex: 1; height: 42px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(5,11,14,.7); color: var(--ink); padding: 0 12px; }
.lfg-post-form select { height: 42px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(5,11,14,.7); color: var(--ink); padding: 0 10px; }
.lfg-post-form input { min-width: 160px; }
.lfg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lfg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.lfg-row b { display: block; }
.lfg-row small { color: var(--muted); }
.lfg-note { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.lfg-row-self { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line)); }
.party-invite-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.party-invite-row button { margin-left: auto; }
.party-result-banner { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel-2); }
.party-result-banner.victory { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.party-result-banner.wipe, .party-result-banner.retreated { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.party-boss { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-2); }
.next-hit-timer { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.party-boss b { display: block; font: 600 18px var(--serif); }
.party-boss span { color: var(--muted); font-size: 13px; }
.party-camp { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 8px; background: rgba(217,147,82,.06); }
.party-camp > div { flex: 1; }
.party-camp small { display: block; color: var(--muted); margin-top: 2px; }
.party-controls { flex-wrap: wrap; }
.dungeon-card .action-icon { font-size: 24px; }

/* Dungeon crawl */
.crawl-progress { display: flex; align-items: center; gap: 6px; margin: 14px 18px 0; }
.crawl-pip { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); }
.crawl-pip.done { background: var(--success); }
.crawl-pip.current { background: var(--game-warm); box-shadow: 0 0 6px color-mix(in srgb, var(--game-warm) 70%, transparent); }
.crawl-pip.final { flex: 1.4; }
.crawl-stage-card { display: flex; align-items: center; gap: 14px; margin: 14px 18px 0; padding: 14px; border-radius: 8px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.crawl-stage-icon { display: grid; place-items: center; min-width: 34px; min-height: 34px; font-size: 30px; }
.crawl-stage-icon .ui-icon { width: 30px; height: 30px; vertical-align: 0; filter: saturate(1.18) drop-shadow(0 0 7px rgba(79,184,255,.25)); }
.crawl-stage-card b { display: block; font: 600 17px var(--serif); color: var(--game-warm-bright); }
.crawl-stage-card p { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; }
.crawl-stage-card.camp { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, var(--line)); }
.crawl-stage-card.hazard { box-shadow: inset 0 0 0 1px color-mix(in srgb, #f0d878 40%, var(--line)); }
.crawl-stage-card.elite { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, var(--line)); }
.crawl-stage-card.elite b { color: #ff8b7d; }
.crawl-stage-card.shrine { box-shadow: inset 0 0 0 1px color-mix(in srgb, #cd9fff 45%, var(--line)); }
.crawl-stage-card.shrine b { color: #cd9fff; }
.shrine-choice-buttons { display: flex; gap: 8px; margin-top: 10px; }
.active-modifier-chip { color: #cd9fff; font-weight: 800; cursor: help; }
.active-objective-chip { color: var(--game-warm); font-weight: 700; cursor: help; }
.crawl-stage-card.descend { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 55%, var(--line)); }
.crawl-stage-card.descend b { color: var(--game-warm-bright); }
.crawl-stage-card.treasure, .crawl-stage-card.rareTreasure, .crawl-stage-card.superTreasure { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 40%, var(--line)); }
.crawl-stage-card.rareTreasure b, .crawl-stage-card.superTreasure b { color: var(--game-warm-bright); text-shadow: 0 0 12px color-mix(in srgb, var(--game-warm) 55%, transparent); }
.incredible-drop { margin: 6px 0 0; color: #ffd76a; font-weight: 800; text-shadow: 0 0 8px rgba(255,215,106,.5); }

.crawl-stage-card.choice { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 40%, var(--line)); }
.party-direction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 18px 0; }
.party-direction-button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); cursor: pointer; font: 600 16px var(--serif); }
.party-direction-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--game-accent) 50%, var(--line)); background: color-mix(in srgb, var(--game-accent) 8%, var(--panel-2)); }
.party-direction-button:disabled { cursor: default; opacity: .7; }
.party-direction-button.my-vote { border-color: color-mix(in srgb, var(--game-accent) 65%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 45%, transparent); }
.party-direction-button small { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.direction-votes { font: 700 11px var(--sans); color: var(--muted); }
.direction-hint.hint-danger { color: var(--danger); }
.direction-hint.hint-reward { color: var(--game-warm); }
.direction-hint.hint-hazard { color: #f0d878; }
.direction-hint.hint-nothing { color: var(--muted); }

.crawl-stage-card.travel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 30%, var(--line)); }
.travel-icon { animation: travelBob 1.1s ease-in-out infinite; }
@keyframes travelBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.travel-meter { margin: 0 18px; }

.crawl-stage-card.ready-check { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, var(--line)); }
.party-loot-screen { padding-bottom:18px; }
.party-loot-finish-top, .party-loot-finish-bottom { display:flex; justify-content:flex-end; margin:12px 18px; }
.party-loot-section { margin-top:14px; }
.party-loot-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin:0 18px; }
.party-loot-item { display:grid; grid-template-columns:72px minmax(0, 1fr); gap:10px; align-items:center; min-width:0; padding:10px; border:1px solid color-mix(in srgb, var(--game-warm) 28%, var(--line)); border-radius:8px; background:rgba(0,0,0,.2); }
.party-loot-item.settled { opacity:.8; }
.party-loot-art { display:grid; place-items:center; width:68px; height:68px; }
.party-loot-art > img, .party-loot-art > .item-art-icon, .party-loot-art > .item-svg-icon { width:100%; height:100%; object-fit:contain; }
.party-loot-copy { min-width:0; }
.party-loot-copy b, .party-loot-copy > span, .party-loot-copy small { display:block; overflow-wrap:anywhere; }
.party-loot-copy b { color:var(--game-warm-bright); font:600 15px var(--serif); }
.party-loot-copy > span { color:var(--ink-soft); font-size:12px; }
.party-loot-copy small { margin-top:3px; color:var(--muted); font-size:10px; }
.party-loot-votes { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.party-loot-votes .mini-button { padding:4px 7px; font-size:11px; }
.party-loot-result { margin-top:8px; color:var(--game-accent); }
.party-loot-enemies { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; margin:0 18px; }
.party-loot-enemy { display:flex; align-items:center; gap:8px; min-width:0; padding:7px; border:1px solid var(--line); border-radius:6px; background:rgba(0,0,0,.16); }
.party-loot-enemy-art { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; }
.party-loot-enemy-art img { width:100%; height:100%; object-fit:contain; }
.party-loot-enemy b, .party-loot-enemy small { display:block; overflow-wrap:anywhere; }
.party-loot-enemy b { font-size:12px; }
.party-loot-enemy small { color:var(--muted); font-size:10px; }
.party-expedition-log { height:360px !important; }
.ready-check-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 18px 0; }
.ready-chip { padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; background: rgba(0,0,0,.2); color: var(--muted); font-size: 12px; font-weight: 700; }
.ready-chip.ready { border-color: color-mix(in srgb, var(--success) 50%, var(--line)); color: var(--success); }
.ready-button { margin: 12px 18px 0; width: calc(100% - 36px); background: linear-gradient(180deg, color-mix(in srgb, var(--success) 30%, var(--panel-2)), color-mix(in srgb, var(--success) 14%, #0a0705)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px color-mix(in srgb, var(--success) 55%, var(--line)); color: #eafff0; }

/* Character alerts and the header row share one compact layout; the job
   portrait now gets its own large, centered block below the eyebrow. */
.character-record-heading, .equipment-heading-actions, .modal-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.character-record-heading .eyebrow { margin: 0; }
.character-portrait { display: flex; justify-content: center; padding: 6px 0 10px; }
.character-portrait .job-sprite { width: 140px; height: 140px; border-radius: 10px; }
.character-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-icon-button { position: relative; min-width: 33px; height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.2); color: var(--ink-soft); padding: 0 6px; cursor: pointer; font-size: 15px; flex: 0 0 auto; }
.record-icon-button:hover { border-color: var(--line-strong); color: var(--game-warm-bright); }
.record-icon-button b { color: var(--danger); font-size: 10px; }
/* Level-up notices used to inflate the same bell/badge as everything else,
   burying "you leveled up" under mail/clan/party noise. Its own icon (with
   its own count) sits between the training dock and the bell instead. */
.level-up-icon-button { border-color: color-mix(in srgb, var(--game-warm) 42%, var(--line)); color: var(--game-warm-bright); }
.level-up-icon-button:hover { border-color: var(--game-warm-bright); }
.level-up-icon-button b { color: var(--game-warm-bright); }
.job-sprite { position:relative; display: inline-block; width: 44px; height: 44px; overflow: visible; border-radius: 5px; background-image: var(--job-art); background-repeat: no-repeat; background-size: var(--job-bg-size, 100% 100%); background-position: center; image-rendering: auto; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); animation: spriteIdle 5.2s ease-in-out infinite; }
.job-sprite.gendered-art, .job-badge.gendered-art { background-size: contain !important; background-position: center !important; background-repeat: no-repeat; }
/* New job art is transparent, painterly standing artwork rather than
   pixel-art or a multi-frame walk strip. */
.job-sprite.frames-generic { image-rendering: auto; }
.job-badge { position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle; width: 18px; height: 18px; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); background-image: var(--job-art); background-size: var(--job-bg-size, 400% 600%); background-position: 0 var(--job-y); image-rendering: auto; }
.job-badge.job-icon { background-color: #061018; background-image: var(--job-icon); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(225,190,112,.42), 0 0 8px rgba(76,185,202,.16); }
.trade-review-panel { margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%); }
.trade-review-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
.trade-review-column { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.trade-review-column h4 { margin: 0 0 8px; }
.trade-review-line { display: flex; align-items: center; gap: 7px; min-height: 28px; }
.trade-review-line .item-icon { width: 24px; height: 24px; }
.trade-review-line small { margin-left: auto; }
.trade-review-gold { margin-top: 8px; color: var(--gold, #e8c76a); font-weight: 800; }
.modal-box.clan-storage-modal { width: min(1440px, 98vw); max-height: min(94vh, 1100px); }
.clan-quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.clan-quick-links .action-button { width: auto; margin: 0; }
.storage-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 2px; }
.storage-tabs .location-menu-link { min-width: 150px; }
.storage-filter-grid { grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(110px, 1fr)); }
.clan-storage-icon-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clan-storage-icon-columns > section { min-width: 0; }
.storage-icon-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr)); align-content: start; max-height: min(56vh, 700px); gap: 9px; }
.storage-tile-wrap { min-width: 0; display: grid; gap: 4px; align-content: start; }
.storage-tile { min-height: 0; aspect-ratio: 1; padding: 9px 7px; }
.storage-tile .inventory-tile-icon { font-size: 46px; }
.storage-tile .inventory-tile-icon > .item-art-icon { width: 1.85em; height: 1.85em; }
.storage-tile:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.55); transform: none; }
.storage-tile-quantity { min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.storage-qty-button { min-width: 23px; min-height: 22px; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--game-warm) 38%, var(--line)); border-radius: 4px; background: rgba(8,14,17,.82); color: var(--game-warm-bright); cursor: pointer; font: 800 10px var(--sans); line-height: 1.1; }
.storage-qty-button:hover, .storage-qty-button:focus-visible { border-color: var(--game-warm-bright); background: color-mix(in srgb, var(--game-warm) 16%, var(--panel-2)); }
.storage-qty-all { color: var(--success); }
.storage-qty-custom { display: inline-flex; gap: 3px; align-items: center; }
.storage-qty-custom input { width: 42px; min-height: 22px; padding: 2px 3px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0,0,0,.35); color: var(--ink); font: 700 10px var(--sans); text-align: center; }
.faction-audit-panel { margin-top: 14px; padding: 13px; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--line)); border-radius: 9px; background: rgba(0,0,0,.16); }
.faction-audit-list { max-height: 260px; overflow-y: auto; }
.faction-audit-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.faction-audit-row:last-child { border-bottom: 0; }
.faction-audit-kind { color: var(--success, #6bc17a); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.faction-audit-row time { color: var(--muted); white-space: nowrap; }
@media (max-width: 780px) {
  .modal-box.clan-storage-modal { width: min(100%, 760px); padding: 18px; }
  .clan-storage-icon-columns { grid-template-columns: 1fr; }
  .storage-filter-grid { grid-template-columns: 1fr 1fr; }
  .storage-icon-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr)); max-height: 420px; gap: 7px; padding: 7px; }
  .storage-tile { min-height: 0; }
  .storage-tile .inventory-tile-icon { font-size: 38px; }
  .faction-audit-row { grid-template-columns: 1fr; gap: 2px; }
  .faction-audit-row time { white-space: normal; }
}
.job-sprite:not(.death-skull)::after { content:""; position:absolute; z-index:4; right:5px; bottom:5px; width:10px; height:10px; border:2px solid #0a1115; border-radius:50%; box-shadow:0 0 7px currentColor; }
.job-sprite.action-state-active::after { color:#54bfff; background:#54bfff; }
.job-sprite.action-state-completed::after { color:#50d58a; background:#50d58a; }
.job-sprite.action-state-idle::after { color:#77858a; background:#77858a; }
.job-sprite[data-job="Adventurer"], .job-sprite[data-job="Guardian"], .job-sprite[data-job="Protector"] { --weapon-aura:#d7e8ff; }
.job-sprite[data-job="Duelist"], .job-sprite[data-job="Spellbreaker"], .job-sprite[data-job="Thief"] { --weapon-aura:#7ee8ff; }
.job-sprite[data-job="Brute"], .job-sprite[data-job="Berserker"], .job-sprite[data-job="Brawler"] { --weapon-aura:#ff704d; }
.job-sprite[data-job="Juggernaut"], .job-sprite[data-job="Bulwark"], .job-sprite[data-job="Warden"] { --weapon-aura:#e2a45c; }
.job-sprite[data-job="Archmage"], .job-sprite[data-job="Lifeweaver"], .job-sprite[data-job="Savior"] { --weapon-aura:#c48cff; }
.job-sprite[data-job="Vanguard"], .job-sprite[data-job="Sentinel"], .job-sprite[data-job="Warrior"] { --weapon-aura:#ffd35e; }
.job-sprite[data-job="Skirmisher"], .job-sprite[data-job="Ninja"], .job-sprite[data-job="Mistblade"] { --weapon-aura:#65f0c0; }
.job-sprite[data-job="Spellblade"], .job-sprite[data-job="Runewarden"], .job-sprite[data-job="Wardmage"] { --weapon-aura:#75a7ff; }
.job-sprite[data-job="Battlecaster"], .job-sprite[data-job="Stalwart"], .job-sprite[data-job="Battleward"] { --weapon-aura:#ff91d6; }
.job-sprite[data-job="Miracleguide"], .job-sprite[data-job="Phase Walker"] { --weapon-aura:#f3f0c1; }
@keyframes weaponAuraPulse { 0%,100% { opacity:.48; transform:scale(.9); } 50% { opacity:.82; transform:scale(1.08); } }
.job-sprite.death-skull { background-image: url('/sprites/death-skull.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; animation: skullPulse 1.3s ease-in-out infinite; }
@keyframes spriteIdle { 0%, 100% { transform: translateY(0) scale(1); } 32% { transform: translateY(-1px) scale(1.008); } 50% { transform: translateY(-5px) scale(1.025); } 68% { transform: translateY(-1px) scale(1.008); } }
@keyframes skullPulse { 0%, 100% { opacity: .76; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* The standard feed uses a real viewport height rather than pretending every
   message occupies one fixed line. Wrapped text and explicit line breaks are
   therefore measured by the browser. Wheel, trackpad and touch input scroll
   the reader directly when its contents exceed the viewport. */
.quick-chat-log { height: 294px; min-height: 294px; max-height: 294px; margin: 6px 0 10px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.13); padding: 5px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.quick-chat-log.chat-scroll-locked { overflow: hidden; }
/* Belt-and-suspenders against a real, screenshotted regression: the reader
   was seen growing far past its intended box and pushing the rest of the
   page down instead of scrolling its own content. Whatever combination of
   states let that happen, the reader must never be allowed to affect layout
   outside its own box - pin the height and clip on the id itself, which
   nothing else in this stylesheet outweighs. */
#sceneChatFeed.quick-chat-log { height: 294px !important; max-height: 294px !important; overflow-y: auto !important; }
#sceneChatFeed.quick-chat-log.chat-scroll-locked { overflow-y: hidden !important; overflow-x: hidden !important; }
.quick-chat-buttons { display: inline-flex; min-width: 0; align-items: stretch; gap: 5px; }
.chat-scroll-toggle.is-unlocked { border-color: var(--game-accent); color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 12%, transparent); }
.quick-chat-log.scene-chat-feed:empty, .quick-chat-log.scene-chat-feed.stale { min-height: 0; margin: 6px 0 10px; opacity: 1; pointer-events: auto; }
.quick-chat-log .scene-chat-line { flex: 0 0 auto; min-height: 0; padding: 1px 2px; }
.scene-chat-line i { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 900; }
.chat-timestamp { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.quick-chat-empty { margin: 4px 2px; font-size: 12px; }
.quick-action-button.unavailable { opacity: .62; cursor: not-allowed; filter: saturate(.65); }
.quick-action-missing { display: block; margin-left: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }

/* Channel identities stay visible in both the small feed and the full transcript. */
.channel-global { --channel-color: #eee8dc; }
.channel-regional { --channel-color: #e0763d; }
.channel-trade { --channel-color: #f2a65a; }
.channel-clan { --channel-color: #73e88f; }
.channel-party { --channel-color: #56d6c3; }
.channel-raid { --channel-color: #c8f05a; }
.channel-divine { --channel-color: #fff4b0; }
.channel-star { --channel-color: #8fd7ff; }
.channel-hell { --channel-color: #ed625d; }
.channel-mod { --channel-color: #ff9a6b; }
.channel-dev { --channel-color: #d09aff; }
.channel-throne { --channel-color: #ffcc8a; }
.channel-whisper { --channel-color: #a9bfff; }
.channel-friend { --channel-color: #86e0bf; }
.chat-channel-badge, .scene-chat-line[class*="channel-"] i { color: var(--channel-color); }
.scene-chat-line.channel-global b, .scene-chat-line.channel-global span { color: #eee8dc; }
.scene-chat-line.channel-regional b, .scene-chat-line.channel-regional span { color: #e0763d; }
.scene-chat-line.channel-trade b, .scene-chat-line.channel-trade span { color: #f2a65a; }
.scene-chat-line.channel-clan b, .scene-chat-line.channel-clan span { color: #73e88f; }
.scene-chat-line.channel-party b, .scene-chat-line.channel-party span { color: #56d6c3; }
.scene-chat-line.channel-raid b, .scene-chat-line.channel-raid span { color: #c8f05a; }
.scene-chat-line.channel-divine b, .scene-chat-line.channel-divine span { color: #fff4b0; text-shadow: 0 0 8px rgba(255,244,176,.35); }
.scene-chat-line.channel-star b, .scene-chat-line.channel-star span { color: #8fd7ff; }
.scene-chat-line.channel-hell b, .scene-chat-line.channel-hell span { color: #ed625d; text-shadow: 0 0 8px rgba(237,98,93,.35); }
.scene-chat-line.channel-mod b, .scene-chat-line.channel-mod span { color: #ff9a6b; }
.scene-chat-line.channel-dev b, .scene-chat-line.channel-dev span { color: #d09aff; }
.scene-chat-line.channel-throne b, .scene-chat-line.channel-throne span { color: #ffcc8a; }
.scene-chat-line.channel-whisper b, .scene-chat-line.channel-whisper span { color: #a9bfff; }
.scene-chat-line.channel-friend b, .scene-chat-line.channel-friend span { color: #86e0bf; }
/* Faction tags keep their identity color even when the channel assigns a
   different color to the message's ordinary spans. */
.scene-chat-line .chat-sender .chat-clan-tag { color: #65c77a !important; }
.moderator-speaking b, .moderator-speaking p, .moderator-speaking span { animation: modSpeechFade 8s ease-out forwards; }
@keyframes modSpeechFade { 0%, 35% { color: #ed5b50; text-shadow: 0 0 8px rgba(237,91,80,.42); } 100% { color: var(--channel-color); text-shadow: none; } }
.chat-view-label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }

/* Mail is a stateful workspace. Keep the list as its own stable scroll
   surface so mailbox refreshes do not make the modal itself oscillate. */
.mail-tabs { display: inline-flex; gap: 4px; margin: 0 0 8px; padding: 3px; border-radius: 7px; background: rgba(0,0,0,.24); }
.mail-tabs button { border: 0; border-radius: 5px; background: transparent; color: var(--muted); padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 850; }
.mail-tabs button.active { background: color-mix(in srgb, var(--game-warm) 15%, var(--panel-2)); color: var(--game-warm-bright); }
.mail-list { min-height: 90px; max-height: min(34vh, 360px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: auto; padding-right: 5px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mail-detail { margin-top: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--game-warm) 26%, var(--line)); border-radius: 7px; background: rgba(0,0,0,.14); }
.mail-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.mail-detail-head small { color: var(--muted); }
.mail-detail p { white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-form-actions .action-button { flex: 0 0 auto; }
.notification-list { display: grid; gap: 6px; }
.notification-view { min-width: 0; }
.notification-view .notification-list { max-height: min(58vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.notification-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); color: var(--ink-soft); padding: 0; cursor: default; text-align: left; }
.notification-row-main { min-width: 0; width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 9px; cursor: pointer; text-align: left; }
.notification-row-main > span:last-child { min-width: 0; }
.notification-row-destination { color: var(--game-accent); font-size: 11px; font-weight: 800; white-space: nowrap; }
.notification-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 9px; }
.notification-row.unread { border-color: color-mix(in srgb, var(--game-warm) 48%, var(--line)); background: color-mix(in srgb, var(--game-warm) 6%, rgba(0,0,0,.18)); }
.notification-type { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--game-warm); }
.notification-row b, .notification-row small, .gear-set-row b, .gear-set-row small { display: block; }
.notification-row b, .gear-set-row b { font: 600 14px var(--serif); }
.notification-row small, .gear-set-row small { color: var(--muted); font-size: 12px; }
.gear-set-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 9px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); }

/* Public forums use full-width rows and preserve every title/body without ellipses. */
.forum-thread-list, .forum-post-list { display: grid; gap: 7px; margin: 13px 0 18px; }
.forum-thread-row { width: 100%; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink-soft); padding: 11px 12px; cursor: pointer; text-align: left; }
.forum-thread-row:hover, .forum-thread-row.pinned { border-color: color-mix(in srgb, var(--game-warm) 45%, var(--line)); }
.forum-announcements { display: grid; gap: 8px; margin: 0 0 15px; padding: 13px; border: 1px solid color-mix(in srgb, #e4b95f 52%, var(--line)); border-radius: 9px; background: linear-gradient(145deg, rgba(71,48,18,.34), rgba(12,17,20,.72)); }
.forum-announcements-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.forum-announcements-heading h2 { margin: 0; color: var(--game-warm-bright); font: 600 19px var(--serif); }
.forum-announcement { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); }
.forum-announcement h3 { margin: 0; color: var(--ink); font: 600 16px var(--serif); overflow-wrap: anywhere; }
.forum-announcement p:not(.eyebrow) { margin: 4px 0; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-announcement small { color: var(--muted); font-size: 11px; }
.forum-announcement-compose { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.forum-announcement-compose input, .forum-announcement-compose textarea { min-width: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,.24); color: var(--ink); padding: 8px 9px; font: inherit; }
.forum-announcement-compose textarea { min-height: 38px; resize: vertical; }
.forum-post-moderation { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.forum-post-moderation .mini-button { padding: 3px 6px; font-size: 10px; }
.forum-thread-row.archived { opacity: .7; }
.forum-thread-state { color: var(--game-warm); font-size: 18px; text-align: center; }
.forum-thread-row b, .forum-thread-row small { display: block; overflow-wrap: anywhere; }
.forum-thread-row b { color: var(--ink); font: 600 16px var(--serif); }
.forum-thread-row small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.forum-thread-row em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.forum-thread-toolbar, .forum-mod-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.forum-post { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 12px; }
.forum-post-head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.forum-post-head b { color: var(--game-warm-bright); }
.forum-post-head span { color: var(--muted); font-size: 12px; }
.forum-post p { margin: 10px 0 0; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-compose { display: grid; gap: 8px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.forum-compose h3 { margin: 0; font: 600 17px var(--serif); }
.forum-compose input, .forum-compose textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(0,0,0,.24); color: var(--ink); padding: 9px 10px; }
.forum-compose textarea { min-height: 100px; resize: vertical; }
.forum-closed { padding: 11px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); text-align: center; }

/* Dungeon and raid summaries are capped at three columns and never truncate copy. */
.card-grid.dungeon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dungeon-card { min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow: visible; }
.dungeon-card-markers { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dungeon-card-copy { min-width: 0; }
.dungeon-card-copy b, .dungeon-card-copy small { display: block; white-space: normal; overflow-wrap: anywhere; }
.dungeon-card-copy b { color: var(--ink); font: 600 17px var(--serif); }
.dungeon-card-copy small { margin-top: 2px; color: var(--game-accent); font-size: 12px; font-weight: 800; }
.dungeon-card-copy p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.dungeon-card .action-button { margin-top: auto; }
.card-grid.dungeon-detail-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.dungeon-detail-card { gap: 0; overflow: visible; }
.dungeon-detail-card h3 { margin: 4px 0 2px; font: 600 17px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.dungeon-detail-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.dungeon-detail-card p.muted { color: var(--muted); }
.dungeon-detail-card .action-button, .dungeon-detail-card .mini-button { margin-top: 12px; }
.fate-action-sigil { color: #fff0a8; font: 700 27px var(--serif); text-shadow: 0 0 9px rgba(132,201,255,.62), 0 0 15px rgba(255,226,122,.38); }
.fate-unknown-card { border-color: color-mix(in srgb, #8d70b5 48%, var(--line)); background: linear-gradient(145deg, rgba(61,43,79,.18), var(--panel-2)); }
.fate-unknown-card .action-icon { color: #bfa4df; text-shadow: 0 0 10px rgba(173,124,225,.45); }

.chat-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.chat-option { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 7px; border: 1px solid color-mix(in srgb, var(--channel-color, var(--line)) 35%, var(--line)); border-radius: 7px; background: rgba(0,0,0,.16); padding: 8px; color: var(--channel-color, var(--ink-soft)); }
.chat-option input { grid-row: 1 / 3; accent-color: var(--channel-color, var(--game-warm)); }
.chat-option span { font-size: 13px; font-weight: 850; }
.chat-option small { color: var(--muted); font-size: 11px; }
.chat-option.unavailable { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .job-sprite { animation: none !important; }
}

/* -------------------------------------------------------------------------
   ZAVFRYN HD-2D VISUAL SYSTEM

   The illustrated world remains the focal layer. UI is treated as physical
   dark metal and blue enamel laid over it: thin gilt edges, carved corners,
   bright item wells and controlled cyan light. The ornament sheet is original
   project art generated for this interface; CSS crops its four reusable
   corners so panels keep crisp detail without dozens of one-off images.
   ---------------------------------------------------------------------- */
:root {
  --hd2d-ornament: url('/art/ui/zavfryn-hd2d-ornaments-v1.png');
  --game-accent: #4fadd7;
  --game-warm: #c79a4d;
  --game-warm-bright: #f0cb7b;
  --game-bg: #02070b;
  --game-panel: #08131b;
  --panel-2: #061018;
  --ink: #f2ead9;
  --ink-soft: #d1c5ab;
  --muted: #94866e;
  --line: rgba(195, 145, 67, .22);
  --line-strong: rgba(225, 176, 91, .48);
  --left-rail-width: clamp(260px, 19vw, 330px);
  --center-min-width: minmax(458px, 1.55fr);
  --right-rail-width: minmax(344px, 1.05fr);
}

html, body { overflow-x: hidden; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(29, 91, 120, .18), transparent 42%),
    radial-gradient(ellipse at 50% 115%, rgba(166, 101, 28, .1), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    #02070b;
  font-family: Georgia, "Times New Roman", serif;
}

.game-shell {
  background:
    linear-gradient(rgba(1,5,8,.78), rgba(1,5,8,.9)),
    url('/art/atlas-world-master-v3.webp') center top / cover fixed;
}

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 11px;
  padding: 0 11px;
  border-bottom: 1px solid #765728;
  background:
    linear-gradient(180deg, rgba(11,22,30,.98), rgba(3,9,14,.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.9), inset 0 1px rgba(255,228,167,.08), 0 9px 28px rgba(0,0,0,.66);
}
.brand-lockup { min-width: 164px; }
.brand-lockup b { color: #f1e7d0; font-size: 18px; letter-spacing: .2em; text-shadow: 0 2px 8px #000; }
.brand-lockup small { color: #4db4da; font: 800 10px var(--sans); letter-spacing: .28em; }
.brand-mark { border-radius: 12px; transform: rotate(-4deg); background: radial-gradient(circle, rgba(49,158,208,.23), transparent 65%); box-shadow: inset 0 0 0 3px rgba(4,11,14,.7), inset 0 0 15px rgba(79,184,255,.22), 0 0 16px rgba(79,155,207,.18); }
.phase-pill { min-width: 106px; border-radius: 4px; padding: 6px 9px; font-size: 10px; }
.tabs { grid-column: 1 / -1; min-width: 0; min-height: 31px; justify-content: center; overflow-x: auto; border-top: 1px solid rgba(195,145,67,.11); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* The top phase control is an information surface, not a passive badge. */
.phase-pill { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.phase-pill:hover, .phase-pill:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--game-accent) 72%, var(--game-warm)); box-shadow: 0 0 18px color-mix(in srgb, var(--game-accent) 24%, transparent); }
.phase-info-modal { min-width: min(520px, 100%); }
.phase-info-description { max-width: 680px; margin: 0 0 18px; color: var(--ink-soft); font: italic 18px/1.55 var(--serif); }
.phase-effect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.phase-effect-grid > div { min-height: 70px; padding: 11px; border: 1px solid color-mix(in srgb, var(--game-accent) 27%, var(--line)); border-radius: 9px; background: linear-gradient(145deg, rgba(28,63,74,.58), rgba(5,13,17,.72)); }
.phase-effect-grid span, .phase-effect-grid b { display: block; }
.phase-effect-grid span { color: var(--muted); font-size: 11px; }
.phase-effect-grid b { margin-top: 7px; color: var(--game-accent); font: 600 18px var(--serif); }
.phase-forecast { margin-top: 16px; padding: 15px; border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line)); border-radius: 10px; background: radial-gradient(circle at 90% 0, rgba(201,161,90,.13), transparent 38%), rgba(11,17,19,.7); }
.phase-forecast .eyebrow { margin-bottom: 7px; }
.phase-forecast b, .phase-forecast small { display: block; }
.phase-forecast b { color: var(--game-warm-bright); font: 600 20px var(--serif); }
.phase-forecast small { margin-top: 4px; color: var(--muted); }

/* Infinite's bridge ledger is a shared, persistent construction project. It
   uses the same material art as inventory so the contribution choice is
   legible even when a player is carrying a very large pack. */
.felena-bridge-card { position: relative; margin-top: 16px; padding: 20px; overflow: hidden; border: 1px solid rgba(103,212,208,.48); border-radius: 14px; background: radial-gradient(circle at 95% 0, rgba(103,212,208,.16), transparent 34%), linear-gradient(145deg, rgba(11,43,49,.96), rgba(5,13,17,.96)); box-shadow: inset 0 0 28px rgba(103,212,208,.08), 0 16px 36px rgba(0,0,0,.28); }
.felena-bridge-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(112deg, transparent 0 37px, rgba(158,240,232,.045) 38px 39px, transparent 40px 76px); mask-image: linear-gradient(90deg, transparent, #000 45%, transparent); animation: felenaWaterDrift 12s linear infinite; }
.felena-bridge-card > * { position: relative; }
.felena-bridge-card > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.felena-bridge-card h2 { margin: 0; color: #d8fffa; font: 600 26px var(--serif); }
.felena-bridge-card header p:last-child { max-width: 760px; margin: 7px 0 0; color: var(--ink-soft); }
.felena-bridge-glyph { width: 64px; height: 64px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(145,246,235,.7); border-radius: 50%; color: #b9fff5; font: 52px/1 var(--serif); box-shadow: 0 0 0 5px rgba(90,214,209,.08), 0 0 30px rgba(90,214,209,.25); animation: felenaBridgePulse 4s ease-in-out infinite; }
.felena-bridge-glyph img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(1.15) contrast(1.05); }
.felena-bridge-progress { margin-top: 18px; }
.felena-bridge-progress > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.felena-bridge-progress > div b { color: #e8ffef; font-size: 16px; }
.felena-bridge-progress > div span { align-self: end; }
.felena-bridge-progress > i { display: block; height: 10px; margin-top: 8px; overflow: hidden; border: 1px solid rgba(132,237,222,.36); border-radius: 99px; background: rgba(2,10,13,.72); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.felena-bridge-progress > i b { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #397a81, #8be8cf 52%, #f1e3a1); box-shadow: 0 0 18px rgba(125,239,210,.55); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.felena-bridge-actions { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.felena-bridge-actions small { color: var(--muted); }
.felena-bridge-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.felena-bridge-material { display: grid; grid-template-columns: 42px minmax(0, 1fr) 78px auto; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgba(124,196,201,.2); border-radius: 9px; background: rgba(3,13,17,.58); }
.felena-bridge-material.complete { border-color: rgba(139,232,154,.4); background: rgba(22,68,50,.28); }
.felena-bridge-art { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(139,232,224,.32); border-radius: 8px; background: #061116; }
.felena-bridge-art .item-art-icon, .felena-bridge-art .item-svg-icon { width: 100%; height: 100%; }
.felena-bridge-material-copy { min-width: 0; }
.felena-bridge-material-copy b, .felena-bridge-material-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.felena-bridge-material-copy b { color: var(--ink); font: 600 13px var(--serif); }
.felena-bridge-material-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.felena-bridge-qty { width: 78px; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(2,8,11,.8); color: var(--ink); }
.felena-bridge-complete { margin: 18px 0 0; color: #bdf4cb; font: italic 18px var(--serif); }
@keyframes felenaWaterDrift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
@keyframes felenaBridgePulse { 0%, 100% { transform: rotate(-4deg) scale(.96); filter: brightness(.94); } 50% { transform: rotate(4deg) scale(1.04); filter: brightness(1.2); } }

/* The Lawless Hold's route marker is explicit text: the orange/red signal
   stays readable beside a region name without adding a second icon beside
   compact A1/G7-style location labels. */
.pvp-route-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 5px; vertical-align: 2px; border: 1px solid rgba(255,139,61,.74); border-radius: 5px; background: rgba(105,18,24,.72); background-image: linear-gradient(110deg, #ffb04e, #f05a32 58%, #c9282e); background-clip: text; -webkit-background-clip: text; color: transparent; box-shadow: 0 0 0 1px rgba(100,16,21,.38), 0 0 10px rgba(239,65,38,.46); font: 900 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; animation: pvp-route-flare 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pvp-route-badge { animation: none; } }

/* Reserve the close-control lane on the body as a whole -- not just on
   whichever heading class a given modal happens to use -- so nothing at the
   top of any modal (a title, a badge, a house header, anything) can end up
   underneath the circular close button in the corner. The old version of
   this only protected elements specifically classed .modal-title/
   .modal-title-row (or, before that, whatever the modal's first child
   happened to be, via a selector that stopped matching once .modal-close
   became the literal first child in the markup) -- any other heading shape
   had no protection at all. */
.modal-box > #modalBody { padding-top: 8px; padding-right: 52px; }
.modal-box.house-modal { width: min(1100px, calc(100vw - 32px)); max-height: min(90vh, 960px); }
.modal-box.house-modal.clan-storage-modal { width: min(1440px, 98vw); max-height: min(94vh, 1100px); }
.modal-box.clan-modal { width: min(1120px, 94vw); max-height: min(90vh, 920px); }
.modal-box.house-modal .house-modal-heading { padding-right: 52px; }
.modal-box.wide-map-modal { width: min(1280px, calc(100vw - 28px)); }
.character-ap-link { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 2px 6px; border: 1px solid rgba(201,161,90,.28); border-radius: 6px; background: rgba(201,161,90,.07); color: var(--game-warm); cursor: pointer; font: inherit; font-size: 11px; vertical-align: 1px; }
.character-ap-link:hover, .character-ap-link:focus-visible { border-color: var(--game-warm-bright); color: var(--game-warm-bright); }
.chat-item-set-label { color: var(--game-accent); font: 900 9px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.felena-bridge-card, .phase-info-modal, .modal-box { scrollbar-gutter: stable; }
#travel, .travel-panel, .minimap-scroll, #manual, #chat, #tab-manual { scrollbar-gutter: stable; }
@media (max-width: 780px) { .modal-box.house-modal.clan-storage-modal { width: min(100%, 760px); } .modal-box.clan-modal { width: min(100%, 760px); } }

@media (max-width: 760px) {
  .phase-effect-grid, .felena-bridge-materials { grid-template-columns: 1fr 1fr; }
  .felena-bridge-material { grid-template-columns: 38px minmax(0, 1fr); }
  .felena-bridge-art { width: 36px; height: 36px; }
  .felena-bridge-qty, .felena-bridge-material > .mini-button { grid-row: 2; }
  .felena-bridge-qty { grid-column: 2; }
  .felena-bridge-material > .mini-button { grid-column: 2; justify-self: start; }
}
.tab { min-width: max-content; padding: 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 12px; letter-spacing: .025em; text-shadow: 0 1px 3px #000; }
.tab::after { left: 8px; right: 8px; background: linear-gradient(90deg, transparent, #f0bd60, transparent); box-shadow: 0 0 7px rgba(240,189,96,.65); }
.account-menu { min-width: max-content; justify-self: end; gap: 4px; font-family: var(--sans); font-size: 11px; }
.account-menu .ghost-button { padding: 5px 6px; font-size: 10px; }

.game-grid { grid-template-columns: var(--left-rail-width) var(--center-min-width) var(--right-rail-width); }
.rail { padding: 7px; background: rgba(2,8,12,.8); }
.left-rail { top: auto; height: auto; }
.play-space { padding: 7px 8px 34px; background: rgba(2,7,10,.38); }

.panel, .action-card, .quest-card, .dungeon-detail-card, .modal-box {
  border: 1px solid rgba(190,137,55,.48);
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 0, rgba(45,112,139,.1), transparent 46%),
    linear-gradient(145deg, rgba(10,25,34,.98), rgba(3,10,15,.98));
  box-shadow:
    inset 0 0 0 2px rgba(1,5,8,.92),
    inset 0 0 0 3px rgba(199,154,77,.08),
    inset 0 1px rgba(255,233,188,.07),
    0 8px 22px rgba(0,0,0,.38);
}
.panel { padding: 12px; margin-bottom: 7px; }
.panel::before, .panel::after {
  z-index: 5;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 0;
  opacity: .62;
  background-image: var(--hd2d-ornament);
  background-size: 170px 170px;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: saturate(.76) brightness(.78);
}
.panel::before { top: -2px; left: -2px; background-position: left top; }
.panel::after { top: auto; right: -2px; bottom: -2px; background-position: right bottom; }
.panel-heading { min-height: 25px; border-bottom: 1px solid rgba(203,157,83,.16); padding-bottom: 6px; }
.panel h2, .panel h3, .section-heading h2 { color: #eadfc8; font-weight: 500; text-transform: uppercase; letter-spacing: .075em; text-shadow: 0 2px 6px #000; }
.micro-badge { color: #aa8e5b; font: 800 9px var(--sans); letter-spacing: .14em; }

.character-panel {
  background-image:
    radial-gradient(ellipse at 50% 26%, rgba(43,129,169,.25), transparent 43%),
    linear-gradient(160deg, rgba(10,29,40,.72), rgba(3,10,15,.82)),
    url('/art/system/character-panel-bg-v1.webp');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}
.character-panel::after { top: auto; right: -2px; bottom: -2px; width: 54px; height: 54px; border: 0; background-image: var(--hd2d-ornament); background-size: 170px 170px; background-position: right bottom; opacity: .62; }
.character-portrait { position: relative; margin: 4px 0; padding: 3px 0 5px; }
.character-portrait::before { content:""; position:absolute; left:50%; bottom:5px; width:150px; height:48px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse, rgba(44,169,217,.24), transparent 67%); filter:blur(4px); }
.character-portrait .job-sprite { position: relative; width: 116px; height: 116px; border: 0; filter: drop-shadow(0 7px 5px rgba(0,0,0,.85)) drop-shadow(0 0 7px rgba(51,153,196,.2)); }
.character-name { font-size: 18px; }
.character-class { border-radius: 3px; padding: 2px 8px; font-size: 10px; }
.character-title { font: 800 10px var(--sans); }
.vitals { margin-top: 9px; gap: 6px; }
.vital-row span, .vital-row b { font-size: 11px; }
.meter { height: 6px; border: 1px solid rgba(0,0,0,.76); background: #02070a; box-shadow: inset 0 1px 4px #000; }
.meter i { box-shadow: 0 0 8px currentColor; }
.meta-tile { border-radius: 2px; }

.stats-panel {
  padding-top: 10px;
  background-image:
    radial-gradient(circle at 50% 0, rgba(45,112,139,.1), transparent 46%),
    linear-gradient(rgba(10,25,34,.72), rgba(3,10,15,.82)),
    url('/art/system/stats-panel-bg-v1.webp');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}
.combat-stat-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
.combat-stat { grid-template-columns: 27px minmax(0,1fr); padding: 5px; border-radius: 2px; }
.stat-icon { width: 27px; height: 27px; border-radius: 2px; font-size: 14px; }
.combat-stat small { font-size: 8px; letter-spacing: .05em; }
.combat-stat b { font-size: 12px; }
.combat-more-toggle { min-height: 25px; border-radius: 2px; font-size: 9px; }
.skills-dock-heading { margin-top: 8px; padding-top: 8px; }
#skillDock { gap: 4px; margin-top: 5px; }
.dock-skill-group { border-radius: 2px; padding: 4px; }
.dock-skill-group > h3 { font-size: 10px; }
.dock-skill-rows { gap: 2px 4px; }
.dock-skill { min-height: 22px; grid-template-columns: 18px minmax(0,1fr) auto; gap: 4px; font-size: 12px; }
.dock-skill .dock-icon { width: 18px; height: 18px; border-radius: 2px; font-size: 11px; }
.dock-skill b { font-size: 13px; }

.scene-card {
  min-height: clamp(330px, 43vh, 560px);
  border: 1px solid rgba(224,173,87,.56);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #010508, inset 0 0 0 3px rgba(232,180,92,.14), 0 14px 34px rgba(0,0,0,.64);
}
.scene-card::before { width: 70px; height: 70px; top: -2px; left: -2px; border:0; border-radius:0; background: var(--hd2d-ornament) left top / 220px 220px no-repeat; opacity:.75; filter:saturate(.8) brightness(.85); box-shadow:none; }
.scene-card::after { z-index:1; background: linear-gradient(to top, rgba(1,5,9,.98) 0%, rgba(2,8,12,.58) 34%, transparent 68%), linear-gradient(90deg, rgba(1,5,9,.26), transparent 22%, transparent 78%, rgba(1,5,9,.26)); }
.scene-card > img { min-height: clamp(330px, 43vh, 560px); aspect-ratio: 16/9; filter: saturate(1.08) contrast(1.08) brightness(.92); transform: scale(1.008); }
.scene-location-masthead { position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%); min-width:230px; text-align:center; text-shadow:0 2px 8px #000; }
.scene-location-masthead span { display:block; color:#d9a956; font:800 9px var(--sans); letter-spacing:.24em; text-transform:uppercase; }
.scene-location-masthead b { display:block; color:#f2e5ca; font:500 20px/1.2 var(--serif); letter-spacing:.11em; text-transform:uppercase; }
.scene-copy { z-index:3; padding:18px 20px; }
.scene-copy h1 { margin:7px 0 3px; color:#fff2d7; font-size:clamp(26px,3vw,40px); text-shadow:0 3px 16px #000; }
.scene-copy p { max-width:72%; color:#c9c4b7; font-family:var(--sans); font-size:12px; }
.scene-tags .tag { border-radius:2px; background:rgba(2,8,12,.68); font:800 8px var(--sans); letter-spacing:.12em; }

.quick-label { color:#b59459; font:800 8px var(--sans); letter-spacing:.15em; }
.quick-chat-log { border-radius:2px; background:rgba(2,8,12,.82); }
.quick-chat-form input, .quick-chat-form select, .chat-channel-select { border-radius:2px; background:#040b10; }

.minimap-wrap { height:178px; border-radius:2px; border-color:rgba(204,153,72,.46); background:#020a0f; box-shadow:inset 0 0 30px rgba(0,0,0,.65),0 5px 13px rgba(0,0,0,.35); }
.route { border-radius:2px; background:linear-gradient(90deg,rgba(15,34,45,.95),rgba(5,14,20,.95)); }
.route-icon { border-radius:2px; }
.route-icon .ui-icon { width: 18px; height: 18px; vertical-align: 0; }
.route b { color:#ddd0b6; }

.equip-inventory-panel { background:linear-gradient(145deg,rgba(8,23,31,.99),rgba(2,8,12,.99)); }
.split-columns { grid-template-columns:.8fr 1.2fr; gap:8px; }
.split-half + .split-half { padding-left:8px; }
.paperdoll-compact, #inventory {
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 0 25px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.3);
}
#inventory {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(45,128,163,.18), transparent 48%),
    linear-gradient(145deg,#0c202a,#030a0f 75%);
}
.paperdoll-compact {
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(45,128,163,.18), transparent 48%),
    linear-gradient(rgba(8,14,18,.55), rgba(8,14,18,.68)),
    url('/art/system/equipment-bg-compact-stonewall-v1.webp'),
    linear-gradient(145deg,#0c202a,#030a0f 75%);
  background-size: 100% 100%, 100% 100%, cover, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.equipment-drop, .compact-tile, .inventory-tile, .item-icon { border-radius:2px; }
.equipment-drop, .compact-tile { box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -10px 17px rgba(0,0,0,.4),0 0 8px color-mix(in srgb,var(--rarity-accent,#4da8d0) 15%,transparent); }
.item-art-icon { filter:drop-shadow(0 3px 4px rgba(0,0,0,.82)) saturate(1.15) contrast(1.06); }
.sidebar-icon-grid { grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:5px; }
.compact-tile { min-height:60px; }
.sidebar-more-items, .action-button, .mini-button, .icon-button, .ghost-button { border-radius:2px; }

.section-heading { margin-bottom:10px; padding:9px 11px; border:1px solid rgba(193,143,62,.4); background:linear-gradient(90deg,rgba(13,31,41,.92),rgba(4,12,18,.92)); box-shadow:inset 0 0 0 2px rgba(0,0,0,.6); }
.section-heading h2 { color:#f0e2c5; }
.card-grid { gap:8px; }
.action-card { padding:10px; }
.action-icon { border-radius:2px; background:radial-gradient(circle,rgba(54,145,182,.18),rgba(1,6,9,.85)); }
.level-chip { border-radius:2px; }

.auth-shell {
  background:
    linear-gradient(90deg,rgba(2,7,11,.76),rgba(2,7,11,.9)),
    url('/art/lunahaven-v2.webp') center / cover no-repeat;
}
.auth-shell::after { background:linear-gradient(to top,rgba(1,5,8,.97),transparent); }
.auth-card { position:relative; border-radius:2px; border-color:rgba(208,157,75,.54); background:rgba(4,14,20,.91); box-shadow:inset 0 0 0 2px #010508,inset 0 0 0 3px rgba(220,170,87,.12),0 22px 60px rgba(0,0,0,.72); }
.auth-card::before { content:""; position:absolute; top:-2px; left:-2px; width:86px; height:86px; background:var(--hd2d-ornament) left top / 270px 270px no-repeat; opacity:.72; pointer-events:none; }
.auth-story h1 { color:#f4e7cf; text-shadow:0 4px 18px #000; }
.auth-tagline { color:#56b9dd; }
.auth-sigil { border-radius:22px; }
.auth-card input, .auth-tabs, .auth-tab, .auth-submit { border-radius:2px; }

/* The landing page should feel like a threshold into Brinsilder, not a
   feature sheet. Keep its motion small and atmospheric: one slow backdrop
   drift and a nearly imperceptible sigil breath. The game UI is unaffected. */
.auth-shell::before { animation: authGridDrift 24s ease-in-out infinite alternate; }
.auth-shell::after { animation: authHorizonBreath 10s ease-in-out infinite; }
.auth-sigil { animation: authSigilBreath 6.5s ease-in-out infinite; }
.auth-sigil img { animation: authSigilTurn 18s linear infinite; }
@keyframes authGridDrift { from { transform: translate3d(-1%, -1%, 0); opacity: .12; } to { transform: translate3d(1%, 1%, 0); opacity: .22; } }
@keyframes authHorizonBreath { 0%, 100% { opacity: .82; transform: scaleY(.98); } 50% { opacity: 1; transform: scaleY(1.02); } }
@keyframes authSigilBreath { 0%, 100% { box-shadow: inset 0 0 0 5px rgba(4,11,14,.68), inset 0 0 28px rgba(79,184,255,.22), 0 0 34px rgba(79,184,255,.10); } 50% { box-shadow: inset 0 0 0 5px rgba(4,11,14,.68), inset 0 0 34px rgba(79,184,255,.34), 0 0 52px rgba(79,184,255,.19); } }
@keyframes authSigilTurn { from { transform: rotate(4deg) scale(1.08); } to { transform: rotate(364deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .auth-shell::before, .auth-shell::after, .auth-sigil, .auth-sigil img { animation: none !important; }
}

@media (max-width: 1180px) {
  :root { --left-rail-width: 238px; --center-min-width: minmax(430px,1.45fr); --right-rail-width: minmax(324px,1fr); }
  .character-portrait .job-sprite { width:98px; height:98px; }
  .scene-copy p { max-width:100%; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns:auto auto minmax(0,1fr); }
  .account-menu { justify-content:flex-end; overflow-x:auto; }
  .game-grid { grid-template-columns:230px minmax(430px,1fr); }
  .right-rail { grid-column:1 / -1; display:grid; grid-template-columns:minmax(320px,.85fr) minmax(480px,1.4fr); gap:7px; border-left:0; border-top:1px solid var(--line-strong); }
  .right-rail .panel { min-width:0; }
}

/* The generated corner crop sat translucently on top of content and never
   belonged to the actual frame. Keep the HD-2D materials, borders and depth,
   but remove every floating ornament layer. The scene's ::after gradient is
   intentionally untouched because it makes location copy readable. */
.panel::before,
.panel::after,
.character-panel::after,
.scene-card::before,
.auth-card::before {
  content: none !important;
  display: none !important;
}

/* Scale-aware layout. At 100% the three-column World Focus presentation is
   retained whenever it fits. As the viewport narrows (or interface zoom makes
   its effective width narrower), rails reflow beneath the world rather than
   forcing clipped fixed-width columns. */
.game-grid > *, .right-rail > *, .split-columns > *, .topbar > * { min-width: 0; }

@media (max-width: 1120px) {
  .game-grid {
    grid-template-columns: minmax(218px, 244px) minmax(0, 1fr);
    grid-template-areas:
      "left world"
      "right right";
  }
  .left-rail { grid-area: left; }
  .play-space { grid-area: world; }
  .right-rail {
    grid-area: right;
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 7px;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
  .right-rail .panel { min-width: 0; margin-bottom: 0; }
  .scene-card, .scene-card > img { min-height: clamp(280px, 40vh, 470px); }
}

/* Browser zoom reduces the effective CSS viewport without changing the
   game's preferred wide breakpoint in every browser. Treat the range below
   as compact too, so the long character rail can never become a clipped
   mini-viewport at roughly 140% zoom on a 1080p/1440p display. */
@media (max-width: 1400px) {
  .left-rail {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    align-self: start;
  }

  .equip-inventory-panel .split-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .equip-inventory-panel .split-half + .split-half {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Fractional tracks otherwise use their contents' min-content width. That
   turns long item names and paper-doll labels into overflow at zoom. A 0
   floor on the equipment track let Chrome (which reserves a hair less
   width here than Firefox) shrink it thinner than the paperdoll actually
   needs, squashing the equipment art -- give it a firm px floor instead
   and take the difference out of inventory's share. */
.split-columns {
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
}

html[data-ui-scale="1.12"] .equip-inventory-panel .split-columns,
html[data-ui-scale="1.15"] .equip-inventory-panel .split-columns {
  grid-template-columns: minmax(0, 1fr);
}

html[data-ui-scale="1.12"] .equip-inventory-panel .split-half + .split-half,
html[data-ui-scale="1.15"] .equip-inventory-panel .split-half + .split-half {
  padding-top: 9px;
  padding-left: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

@media (max-width: 840px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 7px 8px 0;
  }
  .brand-lockup { flex: 1 1 180px; min-width: 0; }
  .phase-pill { flex: 0 1 auto; min-width: 0; }
  .account-menu { order: 3; flex: 1 1 100%; min-width: 0; justify-content: flex-start; overflow-x: auto; }
  .tabs { order: 4; flex: 1 1 calc(100% + 16px); margin-inline: -8px; justify-content: flex-start; }
  .game-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "world" "left" "right";
  }
  .left-rail {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 7px;
    border: 0;
    border-top: 1px solid var(--line-strong);
  }
  .left-rail .panel { min-width: 0; margin-bottom: 0; }
  .right-rail { grid-template-columns: minmax(0, 1fr); }
  .right-rail .panel { margin-bottom: 0; }
  .split-columns { grid-template-columns: minmax(180px, .62fr) minmax(0, 1.38fr); }
  .scene-card, .scene-card > img { min-height: clamp(240px, 42vh, 410px); }
  .scene-copy p { max-width: 100%; }
  .chat-heading-actions { max-width: 100%; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .brand-lockup b { font-size: 15px; letter-spacing: .12em; }
  .left-rail { grid-template-columns: minmax(0, 1fr); }
  .split-columns { grid-template-columns: minmax(0, 1fr); }
  .split-half + .split-half { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .quick-chat-form, #chatForm { grid-template-columns: minmax(82px, 105px) minmax(0, 1fr) 31px; }
  .quick-chat-log { height: min(43vh, 384px); max-height: min(43vh, 384px); }
  .world-chat-panel .panel-heading { align-items: flex-start; flex-direction: column; }
  #chat { height: min(420px, 58vh); }
}

/* Ultimate Letik challenge: keep the creature art readable against the same
   gilt-and-enamel treatment as the rest of the HD-2D interface. */
.dark-letik-node.ultimate > circle:first-of-type {
  fill: rgba(229, 159, 42, .18);
  stroke: #f2c267;
  stroke-width: 3px;
  filter: drop-shadow(0 0 8px rgba(238, 154, 42, .92)) drop-shadow(0 0 15px rgba(133, 55, 255, .62));
  animation: ultimateNodePulse 1.8s ease-in-out infinite;
}
.dark-letik-node.ultimate .map-node-core { fill:#fff1bc; }
.dark-letik-node.ultimate text { fill:#f1cc7f; font-weight:900; letter-spacing:.03em; }
@keyframes ultimateNodePulse {
  0%, 100% { opacity:.72; stroke-width:2px; }
  50% { opacity:1; stroke-width:4px; }
}
.dungeon-boss-art {
  width:100%;
  max-height:230px;
  object-fit:contain;
  display:block;
  margin:0 0 9px;
  border:1px solid rgba(214,163,74,.42);
  background:radial-gradient(circle at 50% 48%,rgba(87,38,155,.24),rgba(2,7,11,.94) 68%);
  box-shadow:inset 0 0 25px #000,0 0 18px rgba(112,48,184,.16);
}
.dungeon-card-art { max-height: 150px; margin: -2px 0 2px; }
.crawl-stage-art { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-warm) 42%, var(--line)); border-radius: 6px; background: radial-gradient(circle, rgba(85,38,155,.26), rgba(2,7,11,.88)); }
.crawl-stage-art img { width: 100%; height: 100%; object-fit: contain; }
.crawl-stage-art .item-icon { width: 46px; height: 46px; }
.ultimate-requirement { color:#edcc89 !important; border-left:2px solid #c78d37; padding-left:8px; }

/* Lawless Hold gate tiles: a calm, safe-reading highlight -- these are
   exits, not a threat, so no pulse and no danger color. */
.dark-letik-node.gate > circle:first-of-type { fill: rgba(79, 173, 215, .18); stroke: #7ec8e3; stroke-width: 2.6px; }
.dark-letik-node.gate .map-node-core { fill: #d6f0fb; }
.dark-letik-node.gate text { fill: #bfe6f5; font-weight: 800; }
.world-boss-arena {
  background:radial-gradient(ellipse at 50% 10%,rgba(91,39,161,.16),transparent 44%),linear-gradient(180deg,#091722,#02070b);
  border-color:rgba(232,177,82,.66);
}
.party-boss-art {
  position:relative;
  min-height:260px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-block:1px solid rgba(218,165,75,.34);
  background:radial-gradient(ellipse at 50% 50%,rgba(130,52,213,.28),rgba(2,7,11,.96) 68%);
}
.party-boss-art::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 45px 18px #02070b; pointer-events:none; }
.party-boss-art img { width:min(760px,92%); max-height:360px; object-fit:contain; filter:drop-shadow(0 10px 18px #000) drop-shadow(0 0 18px rgba(157,67,255,.35)); }

@media (prefers-reduced-motion: reduce) {
  .dark-letik-node.ultimate > circle:first-of-type { animation:none; }
}

/* Final cascade guard: these rules intentionally come after the legacy
   breakpoint blocks above, which otherwise restore a two-column split below
   840px. */
@media (max-width: 1400px) {
  .left-rail {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .equip-inventory-panel .split-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .equip-inventory-panel .split-half + .split-half {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

html[data-ui-scale="1.12"] .equip-inventory-panel .split-columns,
html[data-ui-scale="1.15"] .equip-inventory-panel .split-columns {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Small-screen and zoom-safe layout pass. Keep the 1080p/1440p composition
   above the breakpoints, but remove the last intrinsic-width traps so a
   800px viewport (or browser/UI zoom that produces the same effective width)
   can reflow instead of clipping the equipment, inventory, and stat art. */
@media (max-width: 900px) {
  .game-grid,
  .play-space,
  .rail,
  .right-rail,
  .panel,
  .tabpage,
  .inventory-workspace,
  .equipment-workspace,
  .equipment-loadout,
  .equipment-summary,
  .split-columns,
  .split-half {
    min-width: 0;
    max-width: 100%;
  }

  .equipment-workspace,
  .inventory-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipment-paperdoll,
  .paperdoll-full {
    width: 100%;
    min-width: 0;
  }

  .equipment-paperdoll {
    min-height: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(56px, 1fr));
    gap: clamp(4px, 1.2vw, 8px);
    padding: clamp(10px, 2.5vw, 18px);
  }

  .equipment-drop > .equipment-item-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.1;
  }

  #tab-equipment,
  #tab-inventory,
  #tab-skills,
  #tab-atlas,
  #tab-manual,
  #tab-party,
  #tab-dungeons,
  #tab-quests,
  #tab-forums,
  #tab-leaders,
  #tab-chronicle {
    overflow-x: hidden;
  }

  .inventory-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(76px, 18vw, 105px), 1fr));
  }

  .inventory-tile {
    min-height: clamp(96px, 16vw, 122px);
  }

  .stats-modal-grid,
  .combat-more-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  }

  .modal-overlay {
    align-items: start;
    overflow-y: auto;
    padding: 10px;
  }

  .modal-box {
    width: min(100%, 560px);
    max-height: calc(100svh - 20px);
    padding: clamp(14px, 3vw, 22px);
  }
}

/* Once the viewport is compact, or the player has enlarged the in-game UI,
   the left rail must be part of the document flow. A fixed-height nested
   scroller makes the lower skill groups look cut off and is especially easy
   to trigger at 125%/150% zoom. The page itself is the reliable scroll
   surface; the wide native presentation keeps its sticky rail. */
@media (max-width: 1120px) {
  .left-rail {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    align-self: start;
  }
}

html[data-ui-scale="1.12"] .left-rail,
html[data-ui-scale="1.15"] .left-rail {
  position: static;
  top: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  align-self: start;
}

@media (max-width: 600px), (max-height: 620px) and (max-width: 900px) {
  body { font-size: 15px; }
  .panel { padding: 9px; }
  .scene-card,
  .scene-card > img { min-height: clamp(190px, 42vw, 280px); }
  .equipment-paperdoll {
    grid-template-rows: repeat(6, minmax(44px, 1fr));
    padding: 8px;
  }
  .equipment-drop > .equipment-icon-well { font-size: clamp(17px, 4vw, 24px); }
  .equipment-drop .equipment-slot-label { font-size: clamp(7px, 1.8vw, 10px); }
  .equipment-drop > .equipment-item-name { font-size: clamp(9px, 2.2vw, 12px); }
  .inventory-icon-grid { padding: 6px; gap: 5px; }
  .inventory-tile { min-height: 88px; padding: 6px 4px; }
  .inventory-tile-icon { font-size: 23px; }
  .inventory-tile b { font-size: 12px; }
  .inventory-tile small { font-size: 10px; }
}

/* Selects are part of the game's visual language too. Keep the native
   keyboard and screen-reader behavior, but give every closed dropdown the
   same carved, warm-metal treatment as the rest of the interface. */
select:not([multiple]) {
  min-height: 34px;
  /* A closed select sizes itself to its widest <option> text with no cap of
     its own. The Hone picker's options ("Fisher's Fortune (Angling 50+,
     500)"-length strings) could run wider than the Equipment tab's summary
     column and spill out over whatever sits to its right - the persistent
     right rail's Equipment/Inventory panel, which paints after it in the DOM
     and covered the overflow. Every select in the game gets the same cap. */
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, var(--game-warm) 34%, var(--line-strong));
  border-radius: 7px;
  background-color: rgba(8, 14, 17, .9);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--game-warm-bright) 50%),
    linear-gradient(135deg, var(--game-warm-bright) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.16);
  color: var(--ink);
  padding: 0 31px 0 10px;
  font: 700 13px var(--sans);
  letter-spacing: .012em;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, box-shadow .18s, color .18s;
}
select:not([multiple]):hover {
  border-color: color-mix(in srgb, var(--game-warm-bright) 62%, var(--line-strong));
  background-color: rgba(24, 22, 16, .96);
  color: var(--game-warm-bright);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 0 14px color-mix(in srgb, var(--game-warm) 12%, transparent);
}
select:not([multiple]):focus {
  border-color: color-mix(in srgb, var(--game-accent) 72%, var(--game-warm));
  background-color: rgba(12, 21, 24, .97);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px color-mix(in srgb, var(--game-accent) 14%, transparent), 0 0 18px color-mix(in srgb, var(--game-accent) 13%, transparent);
}
select:not([multiple]):disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.65);
}
select:not([multiple]) option,
select:not([multiple]) optgroup {
  background: #15100b;
  color: var(--ink);
}
select[multiple] {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(8, 14, 17, .9);
  color: var(--ink);
  padding: 7px 9px;
}

/* Compact selectors sit inside chips and toolbar buttons, so they keep the
   same ornament at their smaller scale without growing the surrounding UI. */
.ghost-button.speed-selector select,
.combat-focus-picker select {
  min-height: 0;
  border-color: color-mix(in srgb, var(--game-warm) 25%, transparent);
  border-radius: 4px;
  background-color: rgba(0,0,0,.16);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  padding: 2px 23px 2px 5px;
}
.ghost-button.speed-selector select:hover,
.combat-focus-picker select:hover {
  border-color: color-mix(in srgb, var(--game-warm-bright) 55%, transparent);
  background-color: rgba(201,161,90,.08);
}

/* Interaction language for the active controls: light catches the edge on
   approach, emblems answer the pointer, and the press has a distinct weight.
   The reduced-motion override below keeps this purely decorative. */
.button-emblem { width: 27px; height: 27px; display: inline-block; flex: 0 0 auto; background-image: url('/art/ui/zavfryn-button-emblems-v1.png'); background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--button-emblem-x) var(--button-emblem-y); filter: saturate(1.15) drop-shadow(0 3px 4px rgba(0,0,0,.78)); transition: transform .2s ease, filter .2s ease; }
.button-emblem-target { display: grid; place-items: center; background: radial-gradient(circle, rgba(109,227,224,.24), rgba(5,14,18,.72) 70%); border: 1px solid rgba(109,227,224,.48); border-radius: 8px; }
.button-emblem-target img { width: 78%; height: 78%; object-fit: contain; }
.action-icon .button-emblem { width: 34px; height: 34px; }
.location-menu-link .button-emblem { width: 29px; height: 29px; }
.quick-action-button .button-emblem { width: 28px; height: 28px; }
.location-menu-link:not(:disabled):hover .button-emblem,
.quick-action-button:not(:disabled):hover .button-emblem,
.action-card:hover .button-emblem { transform: translateY(-2px) scale(1.12) rotate(-3deg); filter: saturate(1.35) drop-shadow(0 0 8px rgba(79,184,255,.5)); }
.location-menu-link.active .button-emblem { filter: saturate(1.3) drop-shadow(0 0 7px rgba(230,195,126,.55)); }

button:not(:disabled), [role="button"] { transition: transform .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .2s ease, filter .2s ease; }
.action-button, .mini-button, .ghost-button, .quick-action-button, .location-menu-link, .tab, .icon-button, .record-icon-button, .party-direction-button, .claim-button, .ready-button, .combat-stop-alert-button { position: relative; }
.action-button::after, .mini-button::after, .ghost-button::after, .quick-action-button::after, .location-menu-link::after, .tab::before, .icon-button::after, .record-icon-button::after, .party-direction-button::after, .claim-button::after, .ready-button::after, .combat-stop-alert-button::after, .modal-close::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.14) 46%, transparent 67%); background-size: 240% 100%; opacity: 0; pointer-events: none; }
.action-button:not(:disabled):hover::after, .mini-button:not(:disabled):hover::after, .ghost-button:not(:disabled):hover::after, .quick-action-button:not(:disabled):hover::after, .location-menu-link:not(:disabled):hover::after, .tab:not(:disabled):hover::before, .icon-button:not(:disabled):hover::after, .record-icon-button:not(:disabled):hover::after, .party-direction-button:not(:disabled):hover::after, .claim-button:not(:disabled):hover::after, .ready-button:not(:disabled):hover::after, .combat-stop-alert-button:not(:disabled):hover::after, .modal-close:hover::after { opacity: 1; animation: buttonSheen .7s ease-out; }
.action-button:not(:disabled):hover, .mini-button:not(:disabled):hover, .ghost-button:not(:disabled):hover, .quick-action-button:not(:disabled):hover, .location-menu-link:not(:disabled):hover, .icon-button:not(:disabled):hover, .record-icon-button:not(:disabled):hover, .party-direction-button:not(:disabled):hover, .claim-button:not(:disabled):hover, .ready-button:not(:disabled):hover { transform: translateY(-2px); }
.action-button:not(:disabled):active, .mini-button:not(:disabled):active, .ghost-button:not(:disabled):active, .quick-action-button:not(:disabled):active, .location-menu-link:not(:disabled):active, .icon-button:not(:disabled):active, .record-icon-button:not(:disabled):active, .party-direction-button:not(:disabled):active, .claim-button:not(:disabled):active, .ready-button:not(:disabled):active { transform: translateY(1px) scale(.985); filter: brightness(.94); }
.quick-action-button { border-color: color-mix(in srgb, var(--game-accent) 42%, var(--game-warm)); background: linear-gradient(135deg, rgba(33,72,82,.76), rgba(7,18,23,.84)); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(79,184,255,.12), 0 8px 18px rgba(0,0,0,.22); }
.quick-action-button:hover { background: linear-gradient(135deg, rgba(45,98,108,.88), rgba(8,22,28,.9)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(79,184,255,.28), 0 10px 24px rgba(0,0,0,.3); }
.location-menu-link { border: 1px solid transparent; }
.location-menu-link.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 48%, var(--line)), 0 0 12px rgba(201,161,90,.1); }
.action-card { animation: actionCardEnter .3s ease both; }
.card-grid .action-card:nth-child(2) { animation-delay: .035s; }
.card-grid .action-card:nth-child(3) { animation-delay: .07s; }
.card-grid .action-card:nth-child(4) { animation-delay: .105s; }
.card-grid .action-card:nth-child(5) { animation-delay: .14s; }
.location-section, .tabpage.workspace-arrive { animation: workspaceArrive .3s ease both; }
@keyframes buttonSheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes actionCardEnter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes workspaceArrive { from { opacity: .55; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* The upper navigation is part of the game's visual language too: every
   destination gets a painted emblem and the active tab has a living signal
   instead of a flat text-only state. */
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tab .button-emblem { width: 20px; height: 20px; }
.tab.active .button-emblem { filter: saturate(1.3) drop-shadow(0 0 7px rgba(230,195,126,.48)); }
.tab-label { position: relative; z-index: 1; }
.tab::after { transition: transform .24s ease, box-shadow .24s ease; }
.tab.active::after { box-shadow: 0 0 10px rgba(230,195,126,.6); }
.button-emblem { position: relative; }
.button-emblem::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(109,227,224,0); transition: box-shadow .2s ease; pointer-events: none; }
.button-emblem:hover::after { box-shadow: 0 0 12px 2px rgba(109,227,224,.3); }

/* State motion: entering a workspace, opening a quick configuration, and
   receiving a live queue update each get a distinct but restrained cue. */
.quick-config-panel { animation: quickConfigOpen .22s ease-out both; transform-origin: top center; }
.activity-card { animation: activityCardIn .25s ease-out both; }
.activity-card:nth-child(2) { animation-delay: .04s; }
.activity-card:nth-child(3) { animation-delay: .08s; }
.queue-status-blue { animation: queueStatusPulse 1.8s ease-in-out infinite; }
.queue-status-green { animation: queueStatusComplete 1.1s ease-out 2; }
.busy-indicator, #busy > * { animation: busyGlow 1.2s ease-in-out infinite; }
@keyframes quickConfigOpen { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } to { opacity: 1; transform: none; } }
@keyframes activityCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes queueStatusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,184,255,.22); } 50% { box-shadow: 0 0 0 5px rgba(79,184,255,0); } }
@keyframes queueStatusComplete { 0% { transform: scale(.8); filter: brightness(1); } 45% { transform: scale(1.3); filter: brightness(1.8); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes busyGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* The Wayfarer location is a navigational identity card, not a leftover
   one-line metadata label. */
.character-panel .wayfarer-location-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 57px; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--game-accent) 38%, var(--game-warm)); border-radius: 10px; background: radial-gradient(circle at 8% 50%, rgba(79,184,255,.19), transparent 26%), linear-gradient(110deg, rgba(24,50,58,.75), rgba(5,13,17,.68)); box-shadow: inset 0 0 0 2px rgba(5,11,14,.72), inset 0 1px rgba(255,255,255,.04), 0 0 14px rgba(79,184,255,.09); }
.wayfarer-location-art { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm-bright) 55%, var(--game-accent)); border-radius: 10px; background: rgba(3,10,14,.72); box-shadow: 0 0 12px rgba(201,161,90,.16); }
.wayfarer-location-art img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.75)); }
.wayfarer-location-card > div { min-width: 0; }
.character-panel .wayfarer-location-card .wayfarer-location-kicker { display: block; margin: 0; color: var(--game-warm); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.character-panel .wayfarer-location-card b { display: block; margin-top: 2px; color: #f5e3b4; font: 600 16px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-panel .wayfarer-location-card small { display: block; margin-top: 2px; color: var(--game-accent); font-size: 10px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .goals-hero { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; padding: 15px; }
  .goals-hero-sigil { width: 48px; height: 48px; font-size: 22px; }
  .goal-new-button { grid-column: 1 / -1; width: 100%; }
  .goal-overview-strip { grid-template-columns: repeat(3, 1fr); }
  .goal-overview-note { grid-column: 1 / -1; }
  .goal-condition-row { grid-template-columns: 1fr 1fr; }
  .goal-condition-row .goal-condition-kind { grid-column: 1 / -1; }
  .goal-form-foot { align-items: stretch; flex-direction: column; }
  .modal-box.atlas-skill-modal { width: min(100%, 620px); padding: 12px; }
  .atlas-skill-hero { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; min-height: 150px; margin: -12px -12px 0; padding: 24px 54px 18px 16px; }
  .atlas-skill-hero-art { width: 96px; height: 96px; border-radius: 14px; }
  .atlas-skill-hero h2 { font-size: 28px; }
  .atlas-skill-hero strong { font-size: 15px; }
  .atlas-skill-hero p:last-child { font-size: 12px; line-height: 1.45; }
  .atlas-skill-modal-grid { grid-template-columns: 1fr; }
  .atlas-skill-sidebar { grid-template-columns: 1fr 1fr; }
  .atlas-skill-sidebar section:first-child { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .goal-overview-strip { grid-template-columns: 1fr 1fr; }
  .goal-overview-strip > div:nth-child(3) { grid-column: 1 / -1; }
  .goal-condition-row { grid-template-columns: 1fr; }
  .goal-condition-row .goal-condition-kind { grid-column: auto; }
}

@media (max-width: 460px) {
  .atlas-skill-hero { grid-template-columns: 1fr; text-align: center; padding-right: 16px; }
  .atlas-skill-hero-art { margin: 0 auto; }
  .atlas-skill-hero-copy .eyebrow, .atlas-skill-hero p:last-child { margin-inline: auto; }
  .atlas-skill-stat-strip { grid-template-columns: 1fr; }
  .atlas-skill-sidebar { grid-template-columns: 1fr; }
  .atlas-skill-sidebar section:first-child { grid-column: auto; }
  .atlas-skill-activity-card { grid-template-columns: 52px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .atlas-skill-activity-art { width: 52px; height: 52px; }
  .atlas-skill-activity-kicker { font-size: 9px; }
}

/* The activity signal belongs beside the notification bell, where it reads
   as a live character status, rather than being buried on the portrait. */
.job-sprite:not(.death-skull)::after { display: none !important; }
.character-name-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; flex: 0 0 auto; }
.training-status-dock { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 34px; height: 32px; padding: 2px 5px 2px 2px; border: 1px solid color-mix(in srgb, var(--training-tint, var(--game-accent)) 60%, var(--line)); border-radius: 8px; background: linear-gradient(145deg, rgba(13,28,34,.95), rgba(3,9,12,.9)); box-shadow: inset 0 0 0 2px rgba(4,10,13,.8), 0 0 12px color-mix(in srgb, var(--training-tint, var(--game-accent)) 22%, transparent); color: var(--training-tint, var(--game-accent)); overflow: visible; }
.training-status-dock small { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 9px var(--sans); letter-spacing: .04em; }
.animated-skill-art { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border: 1px solid color-mix(in srgb, var(--training-tint, var(--game-accent)) 65%, var(--line)); border-radius: 7px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--training-tint, var(--game-accent)) 28%, transparent), rgba(2,7,10,.92) 72%); box-shadow: inset 0 0 0 2px rgba(1,6,8,.72), 0 0 10px color-mix(in srgb, var(--training-tint, var(--game-accent)) 28%, transparent); isolation: isolate; }
.animated-skill-art::before { content: ""; position: absolute; inset: -5px; z-index: -1; padding: 1px; border: 0; border-radius: 12px; background: conic-gradient(from 0deg, transparent 0deg 205deg, color-mix(in srgb, var(--training-tint, var(--game-accent)) 22%, transparent) 226deg, color-mix(in srgb, var(--training-tint, var(--game-accent)) 92%, white) 255deg 284deg, color-mix(in srgb, var(--game-accent) 45%, transparent) 306deg, transparent 330deg 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .82; animation: trainingRingOrbit var(--training-speed, 5.4s) linear infinite; transform-origin: center; will-change: transform; }
.animated-skill-art::after { content: ""; position: absolute; inset: 1px; z-index: 2; border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.2), transparent 30%, transparent 72%, rgba(255,255,255,.08)); pointer-events: none; mix-blend-mode: screen; }
.animated-skill-art::after { background-size: 230% 100%; animation: trainingShimmer 1.65s linear infinite; }
.animated-skill-art img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; filter: saturate(1.18) contrast(1.05) drop-shadow(0 2px 4px rgba(0,0,0,.8)); animation: trainingArtBreathe var(--training-speed, 3.2s) ease-in-out infinite; transform-origin: 50% 72%; }
.animated-skill-art i { position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: var(--training-tint, var(--game-accent)); box-shadow: 0 0 8px 2px var(--training-tint, var(--game-accent)); animation: trainingSpark 1.4s ease-in-out infinite; }
.training-skill-badge { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 150px; color: var(--training-tint, var(--game-accent)); font: 800 10px var(--sans); letter-spacing: .035em; white-space: nowrap; }
.training-skill-badge .animated-skill-art { width: 25px; height: 25px; border-radius: 6px; }
.training-skill-badge.compact { gap: 3px; max-width: 100px; }
.training-skill-badge.compact > span:last-child { max-width: 66px; overflow: hidden; text-overflow: ellipsis; }
.player-name-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.location-player-card-name .player-name-line, .location-player-card > .player-name-line { width: 100%; }
.location-player-card-name .training-skill-badge { margin-top: 2px; }
.location-player-row .player-name-button { display: inline-flex; align-items: center; gap: 6px; }
.location-player-row .training-skill-badge span:last-child { display: none; }
.location-player-row .training-skill-badge .animated-skill-art { width: 22px; height: 22px; }
.player-inspect-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.player-inspect-title > span:first-child { min-width: 0; margin-right: auto; }

/* Every training art keeps the same painted source square, but its signal
   has a distinct hue and rhythm so the player can read a live activity at a
   glance. */
.skill-mining { --training-tint: #d7a55d; --training-speed: 2.7s; }
.skill-angling { --training-tint: #59d7e8; --training-speed: 4.2s; }
.skill-woodcraft { --training-tint: #8dc86a; --training-speed: 3.8s; }
.skill-foraging { --training-tint: #b7df73; --training-speed: 3.4s; }
.skill-smithing { --training-tint: #ff9a5b; --training-speed: 2.4s; }
.skill-cooking { --training-tint: #ffcf75; --training-speed: 2.9s; }
.skill-alchemy { --training-tint: #cd8cff; --training-speed: 3.1s; }
.skill-navigation { --training-tint: #62c8ff; --training-speed: 4.8s; }
.skill-arcana { --training-tint: #bca3ff; --training-speed: 2.8s; }
.skill-combat { --training-tint: #ff756d; --training-speed: 1.9s; }
.skill-crafting { --training-tint: #e3b56e; --training-speed: 3.2s; }
.skill-construction { --training-tint: #df9a68; --training-speed: 3.6s; }
.skill-fate { --training-tint: #f2d16e; --training-speed: 4.6s; }
.skill-trade { --training-tint: #6de3c2; --training-speed: 3.7s; }
.skill-subterfuge { --training-tint: #9e91e8; --training-speed: 2.2s; }
.skill-phasereading { --training-tint: #e7a8ff; --training-speed: 3.9s; }
.skill-attack { --training-tint: #ff796c; --training-speed: 1.8s; }
.skill-strength { --training-tint: #ffae63; --training-speed: 2.1s; }
.skill-defense { --training-tint: #73c6ff; --training-speed: 2.6s; }
.skill-vitality { --training-tint: #ef7e9a; --training-speed: 3.3s; }
.skill-warding { --training-tint: #a99dff; --training-speed: 3.5s; }
@keyframes trainingRingOrbit { 0% { transform: rotate(0turn); } 100% { transform: rotate(1turn); } }
@keyframes trainingArtBreathe { 0%, 100% { transform: translateY(3px) scale(.88) rotate(-5deg); filter: saturate(1.05) brightness(.9) drop-shadow(0 2px 4px rgba(0,0,0,.8)); } 38% { transform: translateY(-4px) scale(1.1) rotate(5deg); filter: saturate(1.42) brightness(1.18) drop-shadow(0 0 8px color-mix(in srgb, var(--training-tint, var(--game-accent)) 58%, transparent)); } 68% { transform: translateY(1px) scale(1) rotate(-1deg); filter: saturate(1.22) brightness(1.03) drop-shadow(0 2px 4px rgba(0,0,0,.8)); } }
/* Closed cycle: the sheen returns to its hidden starting state instead of
   snapping from the far edge back to the beginning on the final frame. */
@keyframes trainingShimmer {
  0% { background-position: 160% 0; opacity: .08; }
  20%, 62% { opacity: .5; }
  82% { background-position: -110% 0; opacity: .1; }
  100% { background-position: 160% 0; opacity: .08; }
}
@keyframes trainingSpark { 0%, 100% { opacity: .12; transform: translate(-8px, 4px) scale(.45); } 35% { opacity: .9; transform: translate(0, -5px) scale(1.35); } 70% { opacity: .25; transform: translate(8px, -10px) scale(.7); } }

/* Premium loot is a short-lived stage performance: it arrives at center,
   burns in place long enough to be read, then flies to the compact New tab. */
.rare-loot-stage { position: fixed; inset: 0; z-index: 190; pointer-events: none; overflow: hidden; }
.social-popup-stage { position: fixed; inset: 0; z-index: 300; pointer-events: none; isolation: isolate; }
.social-popup-stack { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 18px; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 11px; scrollbar-width: thin; }
.trade-request-popup { pointer-events: auto; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 13px; align-items: start; min-height: 132px; padding: 17px 18px; border: 1px solid #5ad5a0; border-radius: 12px; background: linear-gradient(145deg, rgba(9,45,43,.99), rgba(7,20,27,.99)); box-shadow: inset 0 0 0 1px rgba(116,235,190,.22), 0 0 0 1px rgba(42,169,143,.36), 0 16px 44px rgba(0,0,0,.66), 0 0 24px rgba(54,207,161,.24); color: var(--ink); opacity: 0; transform: translateY(-12px) scale(.97); transition: opacity .22s ease, transform .22s ease; }
.trade-request-popup.is-visible { opacity: 1; transform: none; }
.social-popup-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(110,229,184,.6); border-radius: 9px; background: rgba(33,179,144,.13); color: #78f0bf; font-size: 26px; box-shadow: 0 0 15px rgba(54,207,161,.2); }
.social-popup-copy { min-width: 0; }
.social-popup-kicker { margin: 0 0 3px; color: #79e9bb; font: 900 10px var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.social-popup-copy h2 { margin: 0; color: #effff8; font: 600 20px/1.2 var(--serif); overflow-wrap: anywhere; }
.social-popup-copy small { display: block; margin-top: 5px; color: rgba(220,249,238,.74); font-size: 12px; line-height: 1.35; }
.social-popup-actions { grid-column: 2; display: flex; gap: 6px; justify-content: flex-start; }
@media (max-width: 600px) { .social-popup-stack { top: max(12px, env(safe-area-inset-top)); right: 10px; width: calc(100vw - 20px); } .trade-request-popup { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .trade-request-popup { transition: none; } }
/* The green notification is the common, viewport-fixed message surface for
   ordinary events. It stays above the current scroll position and contains
   its own scrollable stack so a busy player never loses the message. */
.green-notification-stage { position: fixed; inset: 0; z-index: 10000; pointer-events: none; isolation: isolate; }
.green-notification-stack { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 11px; padding: 1px; scrollbar-width: thin; box-sizing: border-box; }
.green-notification { box-sizing: border-box; width: 100%; min-width: 0; pointer-events: auto; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 13px; align-items: start; min-height: 132px; padding: 17px 18px; border: 1px solid #5ad5a0; border-radius: 12px; background: linear-gradient(145deg, rgba(9,45,43,.99), rgba(7,20,27,.99)); box-shadow: inset 0 0 0 1px rgba(116,235,190,.22), 0 0 0 1px rgba(42,169,143,.36), 0 16px 44px rgba(0,0,0,.66), 0 0 24px rgba(54,207,161,.24); color: var(--ink); opacity: 0; transform: translateY(-12px) scale(.97); transition: opacity .22s ease, transform .22s ease; }
.green-notification.is-visible { opacity: 1; transform: none; }
.green-notification.is-leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.green-notification-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(110,229,184,.6); border-radius: 9px; background: rgba(33,179,144,.13); color: #78f0bf; font-size: 26px; box-shadow: 0 0 15px rgba(54,207,161,.2); }
.green-notification-copy { min-width: 0; padding-right: 22px; }
.green-notification-kicker { margin: 0 0 3px; color: #79e9bb; font: 900 10px var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.green-notification-copy h2 { min-width: 0; margin: 0; color: #effff8; font: 600 20px/1.2 var(--serif); overflow-wrap: anywhere; word-break: break-word; }
.green-notification-copy small { display: block; margin-top: 5px; color: rgba(220,249,238,.74); font-size: 12px; line-height: 1.35; }
.green-notification-close { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border: 0; background: transparent; color: rgba(220,249,238,.72); font: 24px/1 var(--sans); cursor: pointer; }
.green-notification-close:hover { color: #effff8; }
.green-notification-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.green-notification.red-notification { border-color: #ff6d62; background: linear-gradient(145deg, rgba(74,18,22,.99), rgba(25,9,15,.99)); box-shadow: inset 0 0 0 1px rgba(255,152,139,.2), 0 0 0 1px rgba(235,66,75,.38), 0 16px 44px rgba(0,0,0,.7), 0 0 28px rgba(235,66,75,.28); }
.green-notification.red-notification .green-notification-icon { border-color: rgba(255,137,124,.72); background: rgba(216,49,49,.2); color: #ffaaa0; box-shadow: 0 0 17px rgba(237,70,70,.26); }
.green-notification.red-notification .green-notification-kicker { color: #ff9b91; }
.green-notification.red-notification .green-notification-copy small { color: rgba(255,225,221,.78); }
.green-notification.red-notification .green-notification-close { color: rgba(255,225,221,.78); }
.green-notification.orange-notification { border-color: #ffad45; background: linear-gradient(145deg, rgba(84,39,8,.99), rgba(27,15,8,.99)); box-shadow: inset 0 0 0 1px rgba(255,210,122,.24), 0 0 0 1px rgba(255,137,36,.42), 0 16px 44px rgba(0,0,0,.7), 0 0 30px rgba(255,137,36,.34); }
.green-notification.orange-notification .green-notification-icon { border-color: rgba(255,190,76,.84); background: rgba(240,126,20,.22); color: #ffd36d; box-shadow: 0 0 18px rgba(255,139,35,.38); }
.green-notification.orange-notification .green-notification-kicker { color: #ffc45b; }
.green-notification.orange-notification .green-notification-copy small { color: rgba(255,236,198,.82); }
.green-notification.orange-notification .green-notification-close { color: rgba(255,236,198,.82); }
@media (max-width: 600px) { .green-notification-stack { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: calc(100vw - 16px); } .green-notification { grid-template-columns: 38px minmax(0, 1fr); gap: 8px 10px; min-height: 0; padding: 12px; } .green-notification-icon { width: 38px; height: 38px; font-size: 21px; } .green-notification-copy h2 { font-size: 17px; } .green-notification-actions { grid-column: 1 / -1; } }
@media (max-width: 700px) { .forum-announcement-compose { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .green-notification { transition: none; } }
.rare-loot-popup { position: absolute; left: 50%; top: 43%; width: min(430px, calc(100vw - 30px)); min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 28px 24px 22px; transform: translate(-50%, -50%) scale(.72); opacity: 0; border: 1px solid #ffd76a; border-radius: 17px; background: radial-gradient(circle at 50% 28%, rgba(255,208,91,.2), transparent 36%), linear-gradient(145deg, rgba(44,20,8,.98), rgba(11,12,15,.99) 66%); box-shadow: inset 0 0 0 2px rgba(8,8,9,.76), inset 0 0 30px rgba(255,116,34,.18), 0 0 0 1px rgba(255,126,42,.5), 0 0 36px rgba(255,107,31,.6), 0 25px 75px rgba(0,0,0,.72); color: #fff3cb; text-align: center; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease, filter .9s ease; }
.rare-loot-popup.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: rareLootGlow 1.25s ease-in-out infinite alternate; }
.rare-loot-popup.settling { opacity: 0; filter: brightness(1.7) saturate(1.4); transform: translate(calc(-50% + var(--loot-target-x, 0px)), calc(-50% + var(--loot-target-y, 0px))) scale(.16) rotate(12deg); animation: none; }
.rare-loot-popup::before, .rare-loot-popup::after { content: ""; position: absolute; z-index: -1; width: 140%; height: 140%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,126,42,.8) 12%, transparent 20% 33%, rgba(255,215,106,.72) 38%, transparent 48% 67%, rgba(255,71,28,.7) 74%, transparent 82%); filter: blur(9px); animation: rareLootFire 1.8s linear infinite; }
.rare-loot-popup::after { width: 112%; height: 112%; opacity: .7; animation-direction: reverse; animation-duration: 1.1s; }
.merchant-acquisition-popup { min-height: 150px; border-color: #e8cfa1; background: radial-gradient(circle at 50% 18%, rgba(255,247,218,.25), transparent 42%), linear-gradient(145deg, #3a3024, #171411 72%); box-shadow: inset 0 0 0 2px rgba(38,29,18,.72), inset 0 0 24px rgba(255,236,192,.18), 0 0 0 1px rgba(234,207,160,.55), 0 15px 46px rgba(0,0,0,.65); }
.merchant-acquisition-popup::before, .merchant-acquisition-popup::after, .merchant-acquisition-popup .rare-loot-fire { display: none; }
.merchant-acquisition-popup .rare-loot-kicker, .merchant-acquisition-popup .rare-loot-item small { color: #ead6ae; text-shadow: none; }
.merchant-acquisition-popup h2 { color: #fff4d9; text-shadow: 0 0 12px rgba(255,236,192,.3); }
.merchant-acquisition-popup.is-visible { animation: none; }
.rare-loot-fire { position: absolute; inset: -16px; border-radius: 22px; background: radial-gradient(ellipse at 16% 72%, rgba(255,77,22,.55), transparent 18%), radial-gradient(ellipse at 83% 31%, rgba(255,194,63,.56), transparent 18%), radial-gradient(ellipse at 64% 105%, rgba(255,105,28,.44), transparent 22%); filter: blur(10px); opacity: .8; animation: rareLootFire 1.4s ease-in-out infinite alternate; pointer-events: none; }
.rare-loot-kicker { position: relative; margin: 0; color: #ffd76a; font: 900 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 13px rgba(255,129,34,.85); }
.rare-loot-popup h2 { position: relative; margin: 0; color: #fff8de; font: 600 clamp(22px, 4vw, 31px) var(--serif); text-shadow: 0 0 18px rgba(255,150,47,.55); }
.rare-loot-items { position: relative; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin: 7px 0 3px; }
.rare-loot-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid rgba(255,190,83,.38); border-radius: 9px; background: rgba(17,11,8,.7); text-align: left; }
.rare-loot-art { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle, rgba(255,160,61,.23), rgba(4,8,10,.8)); box-shadow: 0 0 14px rgba(255,111,31,.35); }
.rare-loot-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px #000); }
.rare-loot-item > span:last-child { min-width: 0; }
.rare-loot-item b, .rare-loot-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rare-loot-item b { color: #fff0bf; font: 700 13px var(--serif); }
.rare-loot-item small { margin-top: 2px; color: #ffbd66; font: 800 11px var(--sans); }
.rare-loot-source { position: relative; margin: 2px 0 0; color: rgba(255,235,194,.7); font-size: 11px; }
@keyframes rareLootGlow { from { box-shadow: inset 0 0 0 2px rgba(8,8,9,.76), inset 0 0 30px rgba(255,116,34,.18), 0 0 0 1px rgba(255,126,42,.5), 0 0 26px rgba(255,107,31,.45), 0 25px 75px rgba(0,0,0,.72); } to { box-shadow: inset 0 0 0 2px rgba(8,8,9,.76), inset 0 0 34px rgba(255,196,75,.27), 0 0 0 1px rgba(255,215,106,.85), 0 0 54px rgba(255,140,35,.82), 0 25px 75px rgba(0,0,0,.72); } }
@keyframes rareLootFire { from { transform: rotate(0deg) scale(.92); opacity: .55; } to { transform: rotate(18deg) scale(1.08); opacity: 1; } }

@media (max-width: 600px) {
  .character-name-tools { gap: 3px; }
  .training-status-dock { padding-right: 2px; }
  .training-status-dock small { display: none; }
  .rare-loot-popup { top: 39%; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-skill-art::before, .animated-skill-art img, .animated-skill-art i, .rare-loot-popup, .rare-loot-popup::before, .rare-loot-popup::after, .rare-loot-fire { animation: none !important; }
}

/* The account status beside the top-right name is a crystal now: green
   signal inside, faceted silhouette, and the requested red perimeter glow. */
.queue-status-dot { position: relative; width: 14px; height: 18px; margin: 0 4px 0 1px; border: 1px solid rgba(255,104,91,.92); border-radius: 3px; clip-path: polygon(50% 0, 88% 25%, 78% 78%, 50% 100%, 22% 78%, 12% 25%); box-shadow: 0 0 5px rgba(255,53,43,.96), 0 0 13px rgba(224,37,30,.82), 0 0 23px rgba(178,24,23,.5); filter: drop-shadow(0 0 4px rgba(255,52,43,.95)) drop-shadow(0 0 10px rgba(194,27,25,.72)); animation: statusCrystalPulse 1.55s ease-in-out infinite; vertical-align: -4px; }
.queue-status-dot::before { content: ""; position: absolute; inset: 1px; clip-path: inherit; background: linear-gradient(135deg, rgba(230,255,226,.96) 0 12%, #93ef9d 24%, #38b96f 55%, #0d6b53 100%); opacity: .95; }
.queue-status-dot::after { content: ""; position: absolute; top: 2px; left: 4px; width: 3px; height: 8px; border-radius: 50%; background: rgba(246,255,226,.9); filter: blur(.4px); opacity: .82; animation: statusCrystalGlint 1.55s ease-in-out infinite; }
.queue-status-blue, .queue-status-green, .queue-status-grey { background: transparent; color: #72dc8c; }
.queue-status-grey::before { filter: saturate(.55) brightness(.72); }
.queue-status-green::before { background: linear-gradient(135deg, #efffc0, #8df26e 38%, #2aa95d 72%, #0c644d); }
@keyframes statusCrystalPulse { 0%, 100% { transform: translateY(0) scale(.92); } 45% { transform: translateY(-2px) scale(1.1); } 70% { transform: translateY(0) scale(1); } }
@keyframes statusCrystalGlint { 0%, 100% { transform: translateY(3px); opacity: .18; } 45% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: .1; } }

/* Buttons answer even before the pointer arrives. Hover still accelerates
   the sheen, but the interface no longer looks frozen at rest. */
.action-button:not(:disabled)::after, .mini-button:not(:disabled)::after, .ghost-button:not(:disabled)::after, .quick-action-button:not(:disabled)::after, .location-menu-link:not(:disabled)::after, .tab:not(:disabled)::before, .icon-button:not(:disabled)::after, .record-icon-button:not(:disabled)::after, .party-direction-button:not(:disabled)::after, .claim-button:not(:disabled)::after, .ready-button:not(:disabled)::after, .combat-stop-alert-button:not(:disabled)::after, .modal-close::after { animation: buttonIdleSheen 6.8s ease-in-out infinite; opacity: 0; }
.quick-action-button .button-emblem, .location-menu-link .button-emblem, .action-icon .button-emblem, .tab .button-emblem { animation: emblemIdleFloat 3.9s ease-in-out infinite; }
.quick-action-button .quick-action-skill-art { width: 30px; height: 30px; border-radius: 7px; --training-speed: 2.8s; }
.quick-action-button .quick-action-skill-art img { object-fit: cover; }
@keyframes buttonIdleSheen { 0%, 67% { opacity: 0; background-position: 150% 0; } 74% { opacity: .22; background-position: 45% 0; } 82% { opacity: .05; background-position: -50% 0; } 100% { opacity: 0; background-position: -50% 0; } }
@keyframes emblemIdleFloat { 0%, 100% { transform: translateY(0) rotate(0); } 42% { transform: translateY(-2px) rotate(-2deg); } 68% { transform: translateY(1px) rotate(1deg); } }

/* Full motion is the default requested by this game. If a browser advertises
   reduced motion, the player can still choose Full motion in Options; these
   explicit declarations restore the visible game signals for that choice. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="full"] .animated-skill-art::before { animation: trainingRingOrbit var(--training-speed, 5.4s) linear infinite !important; }
  html[data-motion="full"] .animated-skill-art::after { animation: trainingShimmer 1.65s linear infinite !important; }
  html[data-motion="full"] .animated-skill-art img { animation: trainingArtBreathe var(--training-speed, 3.2s) ease-in-out infinite !important; }
  html[data-motion="full"] .animated-skill-art i { animation: trainingSpark 1.4s ease-in-out infinite !important; }
  html[data-motion="full"] .rare-loot-popup.is-visible { animation: rareLootGlow 1.25s ease-in-out infinite alternate !important; }
  html[data-motion="full"] .rare-loot-popup::before, html[data-motion="full"] .rare-loot-popup::after { animation: rareLootFire 1.8s linear infinite !important; }
  html[data-motion="full"] .rare-loot-popup::after { animation-direction: reverse !important; animation-duration: 1.1s !important; }
  html[data-motion="full"] .rare-loot-fire { animation: rareLootFire 1.4s ease-in-out infinite alternate !important; }
}

/* Ambient motion layer: the interface should feel inhabited between clicks.
   Each motion is slow, low-amplitude, and tied to a visual material so the
   page gains presence without turning every panel into a distraction. */
.scene-card > img { animation: sceneLivingLight 18s ease-in-out infinite; transform-origin: 50% 52%; }
.minimap-wrap::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(121,218,232,.12) 47%, transparent 59%); background-size: 220% 100%; animation: minimapSweep 11s ease-in-out infinite; mix-blend-mode: screen; }
.minimap-wrap::after { content: ""; position: absolute; z-index: 2; width: 8px; height: 8px; top: 13px; right: 13px; border: 1px solid rgba(230,195,126,.75); border-radius: 50%; box-shadow: 0 0 0 4px rgba(230,195,126,.07), 0 0 14px rgba(230,195,126,.6); animation: mapBeacon 2.8s ease-in-out infinite; pointer-events: none; }
.travel-panel > .panel-heading::after { content: ""; width: 34px; height: 2px; margin-left: auto; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--game-accent), var(--game-warm)); box-shadow: 0 0 10px color-mix(in srgb, var(--game-accent) 40%, transparent); animation: routeHeadingPulse 3.8s ease-in-out infinite; }
.route:nth-of-type(2) { animation-delay: .04s; }
.route:nth-of-type(3) { animation-delay: .08s; }
.route:nth-of-type(4) { animation-delay: .12s; }
.route:nth-of-type(5) { animation-delay: .16s; }
.route:nth-of-type(6) { animation-delay: .2s; }
.activity-card .activity-icon { animation: activityIconHover 3.6s ease-in-out infinite; transform-origin: 50% 70%; }
.meter.xp i, .meter.viran i { position: relative; overflow: hidden; }
.meter.xp i::after, .meter.viran i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 74%); background-size: 220% 100%; animation: meterGlint 4.8s ease-in-out infinite; }
@keyframes sceneLivingLight { 0%, 100% { transform: scale(1.008) translate3d(0, 0, 0); filter: saturate(1.06) contrast(1.07) brightness(.9); } 50% { transform: scale(1.024) translate3d(-.35%, -.2%, 0); filter: saturate(1.12) contrast(1.08) brightness(.98); } }
@keyframes minimapSweep { 0%, 62% { background-position: 150% 0; opacity: 0; } 72% { opacity: 1; } 88%, 100% { background-position: -45% 0; opacity: 0; } }
@keyframes mapBeacon { 0%, 100% { transform: scale(.75); opacity: .45; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes routeHeadingPulse { 0%, 100% { transform: scaleX(.65); opacity: .42; } 50% { transform: scaleX(1); opacity: .95; } }
@keyframes activityIconHover { 0%, 100% { transform: translateY(0) rotate(0); } 42% { transform: translateY(-3px) rotate(-2deg); } 68% { transform: translateY(1px) rotate(2deg); } }
@keyframes meterGlint { 0%, 62% { background-position: 150% 0; opacity: 0; } 75% { opacity: .8; } 92%, 100% { background-position: -50% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene-card > img, .minimap-wrap::before, .minimap-wrap::after, .travel-panel > .panel-heading::after, .route, .activity-card .activity-icon, .meter.xp i::after, .meter.viran i::after { animation: none; }
}

/* Forums are an archive of authored posts, not a live chat stream. Keep the
   panel's scroll anchoring quiet while a thread replaces the directory, then
   give the directory and each post a distinct editorial frame. */
#primary, .tabpage, #tab-forums { overflow-anchor: none; }
.forum-shell { position: relative; isolation: isolate; }
.forum-shell::before { content: ""; position: absolute; z-index: -1; top: -22px; right: 2%; width: 250px; height: 250px; background: url('/art/ui/zavfryn-sigil-v1.png') center / contain no-repeat; opacity: .035; filter: sepia(1) saturate(1.8); pointer-events: none; }
.forum-masthead { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) 142px; align-items: center; gap: 17px; min-height: 148px; margin: 0 0 15px; padding: 19px 21px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-warm) 42%, var(--line)); border-radius: 13px; background: radial-gradient(circle at 8% 50%, rgba(218,161,84,.15), transparent 23%), radial-gradient(circle at 93% 12%, rgba(109,217,227,.1), transparent 31%), linear-gradient(125deg, rgba(30,28,24,.98), rgba(10,19,23,.96) 56%, rgba(8,12,16,.98)); box-shadow: inset 0 0 0 2px rgba(4,9,12,.72), inset 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.2); }
.forum-masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--game-warm), var(--game-accent), transparent); opacity: .7; }
.forum-masthead-art, .forum-thread-header-art { display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--game-warm-bright) 68%, var(--line)); background: radial-gradient(circle, rgba(221,162,84,.23), rgba(4,10,13,.74) 69%); box-shadow: 0 0 0 4px rgba(7,14,17,.7), 0 0 22px rgba(218,161,84,.18); transform: rotate(45deg); }
.forum-masthead-art { width: 64px; height: 64px; }
.forum-masthead-art img, .forum-thread-header-art img, .forum-compose-mark img { width: 75%; height: 75%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,214,127,.55)); transform: rotate(-45deg); }
.forum-masthead-copy, .forum-thread-header-copy { min-width: 0; }
.forum-masthead-copy h2, .forum-thread-header-copy h2 { margin: 2px 0 5px; color: #f7e6bd; font: 600 clamp(25px, 4vw, 34px) var(--serif); letter-spacing: .01em; }
.forum-masthead-copy > p:last-child { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.55; }
.forum-masthead-note { display: grid; align-content: center; justify-items: end; gap: 2px; padding-left: 15px; border-left: 1px solid rgba(218,161,84,.28); text-align: right; }
.forum-masthead-note span, .forum-masthead-note small { color: var(--muted); font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.forum-masthead-note b { color: var(--game-warm-bright); font: 600 32px var(--serif); text-shadow: 0 0 14px rgba(218,161,84,.38); }
.forum-directory-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 8px 3px 8px 1px; border-bottom: 1px solid var(--line); }
.forum-directory-bar > span { display: inline-flex; align-items: center; gap: 8px; color: var(--game-warm-bright); font: 900 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.forum-directory-bar > span i, .forum-thread-status i, .forum-status-pill i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--game-accent); box-shadow: 0 0 9px var(--game-accent); }
.forum-directory-bar small { color: var(--muted); font-size: 11px; }
.forum-thread-list, .forum-post-list { gap: 9px; margin: 10px 0 20px; }
.forum-thread-row { position: relative; grid-template-columns: 58px minmax(0, 1fr) 70px 140px; min-height: 78px; align-items: center; gap: 13px; padding: 11px 14px 11px 11px; overflow: hidden; border-color: rgba(116,157,164,.27); border-radius: 10px; background: linear-gradient(100deg, rgba(22,34,39,.95), rgba(9,16,20,.98)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.12); transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease; }
.forum-thread-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--game-warm), var(--game-accent)); opacity: 0; transition: opacity .22s ease; }
.forum-thread-row:hover, .forum-thread-row:focus-visible { border-color: color-mix(in srgb, var(--game-accent) 60%, var(--game-warm)); background: linear-gradient(100deg, rgba(29,48,53,.98), rgba(10,19,23,.98)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 7px 21px rgba(0,0,0,.22), 0 0 18px rgba(109,217,227,.08); transform: translateX(2px); }
.forum-thread-row:hover::before, .forum-thread-row:focus-visible::before, .forum-thread-row.pinned::before { opacity: 1; }
.forum-thread-row.pinned { border-color: rgba(218,161,84,.48); background: linear-gradient(100deg, rgba(45,35,25,.92), rgba(11,19,23,.98)); }
.forum-thread-row.archived { opacity: .68; }
.forum-thread-state { display: grid; place-items: center; width: 54px; height: 54px; }
.forum-thread-seal { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(218,161,84,.65); border-radius: 12px 4px 12px 4px; background: radial-gradient(circle, rgba(218,161,84,.24), rgba(5,11,14,.9) 70%); box-shadow: inset 0 0 0 2px rgba(4,9,12,.7), 0 0 14px rgba(218,161,84,.15); transform: rotate(45deg); transition: transform .3s ease, box-shadow .3s ease; }
.forum-thread-seal img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,210,124,.5)); transform: rotate(-45deg); }
.forum-thread-row:hover .forum-thread-seal, .forum-thread-row:focus-visible .forum-thread-seal { transform: rotate(135deg) scale(1.07); box-shadow: inset 0 0 0 2px rgba(4,9,12,.7), 0 0 19px rgba(109,217,227,.25); }
.forum-thread-main { min-width: 0; }
.forum-thread-kicker { display: block; margin-bottom: 3px; color: var(--game-accent); font: 900 9px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.forum-thread-row.pinned .forum-thread-kicker { color: var(--game-warm-bright); }
.forum-thread-row b { color: var(--ink); font: 600 18px var(--serif); line-height: 1.15; }
.forum-thread-row small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.forum-thread-stats { display: grid; justify-items: center; gap: 1px; padding: 6px 9px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.forum-thread-stats strong { color: var(--game-warm-bright); font: 600 21px var(--serif); }
.forum-thread-stats small, .forum-thread-status { color: var(--muted); font: 800 9px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.forum-thread-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; text-align: right; }
.forum-thread-status.closed i, .forum-status-pill.closed i { background: var(--game-warm); box-shadow: 0 0 8px var(--game-warm); }
.forum-thread-toolbar { align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.forum-thread-header { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 134px; padding: 18px 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-accent) 38%, var(--line)); border-radius: 12px; background: radial-gradient(circle at 8% 50%, rgba(109,217,227,.13), transparent 24%), linear-gradient(120deg, rgba(17,35,40,.98), rgba(8,15,19,.98)); box-shadow: inset 0 0 0 2px rgba(3,8,11,.75), 0 9px 24px rgba(0,0,0,.18); }
.forum-thread-header-art { width: 68px; height: 68px; border-color: rgba(109,217,227,.66); }
.forum-thread-header-copy h2 { font-size: clamp(24px, 4vw, 36px); }
.forum-thread-header-copy > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.forum-thread-header-copy strong { color: var(--game-warm-bright); }
.forum-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(109,217,227,.35); border-radius: 999px; color: var(--game-accent); font: 900 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.forum-status-pill.closed { border-color: rgba(218,161,84,.4); color: var(--game-warm-bright); }
.forum-thread-rule { display: flex; align-items: center; gap: 10px; margin: 18px 2px 10px; color: var(--game-warm-bright); font: 900 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.forum-thread-rule i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(218,161,84,.55), transparent); }
.forum-thread-rule small { color: var(--muted); font: 700 10px var(--sans); letter-spacing: .06em; text-transform: none; }
.forum-post { display: grid; grid-template-columns: 144px minmax(0, 1fr); min-height: 158px; padding: 0; overflow: hidden; border-color: rgba(116,157,164,.3); border-radius: 10px; background: linear-gradient(105deg, rgba(20,31,36,.98), rgba(9,16,20,.98)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 6px 16px rgba(0,0,0,.13); animation: forumPostArrive .38s ease both; }
.forum-post:nth-child(2) { animation-delay: .05s; }
.forum-post:nth-child(3) { animation-delay: .1s; }
.forum-post-author { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border-right: 1px solid rgba(109,217,227,.16); background: linear-gradient(180deg, rgba(10,23,28,.82), rgba(17,27,30,.45)); text-align: center; }
.forum-author-seal { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 3px; border: 1px solid rgba(218,161,84,.5); border-radius: 50%; background: radial-gradient(circle, rgba(218,161,84,.2), rgba(4,10,13,.9) 68%); box-shadow: 0 0 15px rgba(218,161,84,.13); }
.forum-author-seal img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,210,124,.5)); }
.forum-author-seal i { position: absolute; right: -5px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--game-accent); border-radius: 50%; background: #0a171b; color: var(--game-accent); font: 900 10px var(--sans); font-style: normal; }
.forum-post-author b { max-width: 100%; overflow-wrap: anywhere; color: var(--game-warm-bright); font: 600 15px var(--serif); }
.forum-post-author small, .forum-post-number { color: var(--muted); font: 800 9px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.forum-post-number { margin-top: auto; color: var(--game-accent); }
.forum-post-body { min-width: 0; padding: 17px 20px 20px; }
.forum-post-head { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 10px; border-bottom-color: rgba(116,157,164,.22); color: var(--muted); font-size: 11px; }
.forum-post-kind { color: var(--game-accent); font: 900 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.forum-post p { margin: 16px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-post.original-post { border-color: rgba(218,161,84,.42); box-shadow: inset 3px 0 var(--game-warm), inset 0 1px rgba(255,255,255,.04), 0 7px 18px rgba(0,0,0,.16); }
.forum-post.original-post .forum-post-kind { color: var(--game-warm-bright); }
.forum-compose { position: relative; grid-template-columns: 58px minmax(0, 1fr); column-gap: 13px; padding: 17px 18px 18px; overflow: hidden; border-color: rgba(218,161,84,.37); border-radius: 11px; background: linear-gradient(120deg, rgba(35,30,23,.92), rgba(10,18,22,.98)); }
.forum-compose::before { content: ""; position: absolute; inset: auto -5% -55px; height: 100px; background: radial-gradient(ellipse, rgba(218,161,84,.15), transparent 68%); pointer-events: none; }
.forum-compose-mark { grid-row: span 2; display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid rgba(218,161,84,.55); border-radius: 11px 4px 11px 4px; background: rgba(4,10,13,.68); transform: rotate(45deg); }
.forum-compose-mark img { width: 72%; height: 72%; transform: rotate(-45deg); }
.forum-compose h3 { position: relative; margin: 0; color: #f5e2b7; font-size: 20px; }
.forum-compose .eyebrow { position: relative; margin: 0 0 2px; }
.forum-compose-help { position: relative; margin: 5px 0 10px; color: var(--muted); font-size: 12px; }
.forum-compose input, .forum-compose textarea { position: relative; grid-column: 2; border-color: rgba(116,157,164,.38); border-radius: 7px; background: rgba(2,8,11,.54); }
.forum-compose textarea { min-height: 124px; line-height: 1.55; }
.forum-compose > .action-button { grid-column: 2; justify-self: start; }
.forum-new-thread { margin-top: 19px; }
.forum-reply-compose { margin-top: 19px; }
.forum-closed { border-color: rgba(218,161,84,.35); background: rgba(35,28,20,.35); }

/* d2jsp-style board index and a real thread-list table (Topic / Replies /
   Views / Last Post) instead of one flat list - see forumThreadRowHTML(),
   forumBoardBarHTML() and renderForums() in app.js. Reuses the thread-row
   and post-card visuals already defined above; these rules only add the
   new board tabs, table header, extra thread-row columns, avatars,
   prefixes, and trade-feedback/signature bits. */
.forum-board-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.forum-board-tab { display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink-soft); text-align: left; cursor: pointer; }
.forum-board-tab b { color: var(--ink); font: 600 13px var(--serif); }
.forum-board-tab small { color: var(--muted); font-size: 11px; }
.forum-board-tab.active { border-color: color-mix(in srgb, var(--game-warm) 55%, var(--line)); background: linear-gradient(120deg, rgba(45,35,25,.65), rgba(11,19,23,.85)); }
.forum-board-tab.active b { color: var(--game-warm-bright); }
.forum-board-tab.faction { border-style: dashed; }
.forum-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.forum-toolbar h2 { margin: 0; font: 600 22px var(--serif); color: var(--ink); }
.forum-toolbar > span { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.forum-board-table { display: grid; gap: 7px; }
.forum-board-table-head { display: grid; grid-template-columns: 40px minmax(0,1fr) 64px 64px 160px; gap: 10px; padding: 0 14px; color: var(--muted); font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.forum-board-table-head span:nth-child(3), .forum-board-table-head span:nth-child(4) { text-align: center; }
.forum-thread-row { grid-template-columns: 40px minmax(0,1fr) 64px 64px 160px; }
.forum-thread-icon { display: grid; place-items: center; font-size: 20px; }
.forum-thread-replies, .forum-thread-views { display: grid; justify-items: center; gap: 1px; }
.forum-thread-replies strong, .forum-thread-views strong { color: var(--game-warm-bright); font: 600 16px var(--serif); }
.forum-thread-replies small, .forum-thread-views small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.forum-thread-lastpost { display: flex; align-items: center; gap: 8px; text-align: left; overflow: hidden; }
.forum-thread-lastpost-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font: 600 12px var(--serif); }
.forum-thread-lastpost-copy small { color: var(--muted); font-size: 10px; }
.forum-prefix { display: inline-block; padding: 1px 6px; margin-right: 4px; border-radius: 4px; font: 800 11px var(--sans); letter-spacing: .04em; vertical-align: middle; }
.forum-prefix-wts { background: rgba(127,174,108,.22); color: var(--success); }
.forum-prefix-wtb { background: rgba(79,184,255,.2); color: #7fc4ff; }
.forum-prefix-wtt { background: rgba(184,120,232,.22); color: var(--set-color); }
.forum-thread-header { grid-template-columns: minmax(0,1fr) auto; }

/* Avatars: a curated skill-icon set (FORUM_AVATARS, server.mjs), never an
   arbitrary upload, so there is no moderation/abuse surface. */
.forum-avatar { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line); background: rgba(0,0,0,.3); flex: 0 0 auto; }
.forum-avatar-fallback { display: grid; place-items: center; }
.forum-avatar-fallback img { width: 65%; height: 65%; object-fit: contain; opacity: .6; }
.forum-avatar-mini { width: 26px; height: 26px; border-radius: 6px; }
.forum-avatar-tiny { width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-right: 3px; }
.forum-post-avatar { width: 60px; height: 60px; margin-bottom: 3px; border-radius: 50%; }

.forum-rating { display: block; margin-top: 3px; font: 800 11px var(--sans); }
.forum-rating.neutral { color: var(--muted); font-weight: 600; }
.forum-rating-positive { color: var(--success); margin-right: 5px; }
.forum-rating-negative { color: var(--danger); }
.forum-post-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.forum-post-meta small { color: var(--muted); font-size: 10px; }
.forum-signature { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; font-style: italic; overflow-wrap: anywhere; }
.forum-signature i { display: block; width: 26px; height: 1px; margin-bottom: 6px; background: var(--game-warm); }

/* Leaner reply/new-thread forms - no decorative mark column, so every
   child spans the full width instead of leaving its old 58px reserved. */
.forum-compose { grid-template-columns: minmax(0, 1fr); }
.forum-compose input, .forum-compose textarea, .forum-compose > .action-button { grid-column: 1; }
.forum-compose-row { display: flex; gap: 10px; flex-wrap: wrap; }
.forum-compose-row label { flex: 1; min-width: 140px; }
.forum-compose-actions { display: flex; gap: 8px; }

.forum-avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.forum-avatar-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.forum-avatar-pick small { color: var(--muted); font-size: 10px; text-align: center; overflow-wrap: anywhere; }
.forum-avatar-pick.active { border-color: color-mix(in srgb, var(--game-accent) 55%, var(--line)); background: linear-gradient(120deg, rgba(20,40,45,.7), rgba(10,18,22,.85)); }

.trade-feedback-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* d2jsp reference pass: a real board directory (screenshot 1) in front of a
   dense per-board thread table (screenshot 2), with breadcrumbs and
   trading-only filter tabs/compose buttons. Density over decoration - this
   overrides the earlier, taller thread-row spacing above to match. */
.forum-breadcrumb { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.forum-breadcrumb button { border: 0; background: none; padding: 0; color: var(--game-accent); font: inherit; cursor: pointer; }
.forum-breadcrumb button:hover { text-decoration: underline; }
.forum-breadcrumb i { font-style: normal; opacity: .6; }
.forum-breadcrumb > span:last-child { color: var(--ink-soft); font-weight: 700; }

.forum-index-category { margin: 14px 0 0; padding: 6px 10px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(45,20,16,.9), rgba(22,10,9,.9)); box-shadow: inset 0 0 0 1px rgba(218,120,90,.25); }
.forum-index-category:first-of-type { margin-top: 0; }
.forum-index-category span { color: var(--game-warm-bright); font: 800 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.forum-index-table { display: flex; flex-direction: column; }
.forum-index-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 90px 220px; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft); text-align: left; cursor: pointer; }
.forum-index-table .forum-index-row:last-child { border-radius: 0 0 6px 6px; }
.forum-index-row:hover { background: color-mix(in srgb, var(--game-accent) 8%, var(--panel-2)); }
.forum-index-board b { display: block; color: var(--ink); font: 600 15px var(--serif); }
.forum-index-board small { color: var(--muted); font-size: 12px; }
.forum-index-stat { display: grid; justify-items: center; gap: 1px; }
.forum-index-stat strong { color: var(--game-warm-bright); font: 600 16px var(--serif); }
.forum-index-stat small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.forum-index-lastpost { min-width: 0; overflow: hidden; }
.forum-index-lastpost b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font: 600 12px var(--serif); }
.forum-index-lastpost small { color: var(--muted); font-size: 11px; }

.forum-filter-tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.forum-filter-tabs button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink-soft); padding: 5px 12px; font: 700 12px var(--sans); cursor: pointer; }
.forum-filter-tabs button.active { border-color: color-mix(in srgb, var(--game-warm) 55%, var(--line)); background: color-mix(in srgb, var(--game-warm) 16%, var(--panel-2)); color: var(--game-warm-bright); }

.forum-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; color: var(--muted); font-size: 12px; }

/* Tighter rows than the original card-style pass - a real forum table reads
   dozens of rows on one screen, not a handful of tall cards. */
.forum-thread-row { min-height: 0; padding: 8px 12px; border-radius: 4px; gap: 10px; }
.forum-thread-row b { font: 600 14px var(--serif); }
.forum-thread-row small { margin-top: 2px; font-size: 11px; }
.forum-board-table-head { padding: 0 12px 4px; }
.forum-toolbar > span { flex-wrap: nowrap; }

@media (max-width: 720px) {
  .forum-index-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "board board" "stats lastpost"; row-gap: 6px; }
  .forum-index-board { grid-area: board; }
  .forum-index-stat { grid-area: stats; display: inline-flex; gap: 4px; justify-self: start; }
  .forum-index-lastpost { grid-area: lastpost; justify-self: end; text-align: right; }
  .forum-board-table-head { display: none; }
  .forum-thread-row { grid-template-columns: 34px minmax(0,1fr); grid-template-areas: "icon main" "icon stats"; }
  .forum-thread-icon { grid-area: icon; }
  .forum-thread-main { grid-area: main; }
  .forum-thread-replies, .forum-thread-views, .forum-thread-lastpost { grid-area: stats; display: inline-flex; }
  .forum-thread-replies, .forum-thread-views { flex-direction: row; gap: 4px; }
}
@keyframes forumPostArrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .forum-post { grid-template-columns: 82px minmax(0, 1fr); }
  .forum-post-author { padding: 14px 7px; }
  .forum-post-avatar { width: 48px; height: 48px; }
  .forum-post-body { padding: 14px 12px 16px; }
  .forum-post-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .forum-compose input, .forum-compose textarea, .forum-compose > .action-button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .forum-thread-row, .forum-thread-seal, .forum-post { transition: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="full"] .forum-thread-row { transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease; }
  html[data-motion="full"] .forum-thread-seal { transition: transform .3s ease, box-shadow .3s ease; }
  html[data-motion="full"] .forum-post { animation: forumPostArrive .38s ease both; }
}

/* Lawless Hold support art: these are real illustrated assets at every
   consumer, with the badge/auction/pack surfaces kept distinct from generic
   emoji or text-only markers. */
.trophy-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; }
.trophy-badge img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)); }
.trophy-badge.trophy-bronze { color: #e09a54; background: rgba(205,127,50,.12); }
.trophy-badge.trophy-silver { color: #e5ecf2; background: rgba(192,205,218,.12); }
.trophy-badge.trophy-gold { color: #ffe08a; background: rgba(230,195,126,.14); box-shadow: 0 0 11px rgba(230,195,126,.13); }
.auction-house-banner { position: relative; min-height: 174px; display: flex; align-items: flex-end; margin: 0 0 15px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--game-warm) 52%, var(--line)); border-radius: 12px; background: #080d11; box-shadow: inset 0 0 0 2px rgba(3,8,10,.78), 0 10px 22px rgba(0,0,0,.2); }
.auction-house-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,11,.9) 0, rgba(5,9,11,.58) 42%, rgba(5,9,11,.08) 78%), linear-gradient(0deg, rgba(3,7,9,.8), transparent 58%); pointer-events: none; }
.auction-house-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .9; }
.auction-house-banner > div { position: relative; z-index: 1; max-width: 560px; padding: 22px 24px; }
.auction-house-banner h2 { margin: 2px 0 4px; color: #f7e0ae; font: 600 29px var(--serif); text-shadow: 0 2px 9px #000; }
.auction-house-banner p:last-child { margin: 0; color: rgba(245,235,211,.78); font-size: 12px; line-height: 1.45; text-shadow: 0 1px 4px #000; }
.crownless-fallen-packs { border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line)); background: linear-gradient(115deg, rgba(57,22,20,.28), rgba(0,0,0,.15)); }
.crownless-fallen-pack-row { min-height: 53px; }
.crownless-fallen-pack-copy { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crownless-fallen-pack-art { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle, rgba(207,81,66,.2), rgba(0,0,0,.3)); }
.crownless-fallen-pack-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)); animation: fallenPackPulse 2.2s ease-in-out infinite; }
.crownless-fallen-pack-copy > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@keyframes fallenPackPulse { 0%, 100% { transform: translateY(0) rotate(-2deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)); } 50% { transform: translateY(-2px) rotate(2deg); filter: drop-shadow(0 0 8px rgba(207,81,66,.45)); } }
@media (prefers-reduced-motion: reduce) {
  .crownless-fallen-pack-art img { animation: none; }
}
@media (max-width: 600px) {
  .auction-house-banner { min-height: 190px; }
  .auction-house-banner > div { padding: 18px 15px; }
}

/* Secret Passage - a deliberately different, storybook-like surface from
   ordinary work/combat cards. The discovery callout is blue with red type as
   requested; the room itself gets the richer dark-blue treatment so the rare
   event feels like a destination, not another generic modal. */
.secret-passage-discovery { position: relative; display: grid; grid-template-columns: minmax(210px, .85fr) minmax(0, 1.35fr); align-items: stretch; min-height: 350px; margin: 4px 0 20px; overflow: hidden; border: 1px solid rgba(111,191,255,.78); border-radius: 18px; background: linear-gradient(115deg, #0a3768 0%, #123f75 46%, #17213f 100%); box-shadow: 0 0 0 2px rgba(9,22,43,.85), 0 0 45px rgba(53,137,255,.22), inset 0 0 35px rgba(120,204,255,.12); animation: secretPassageFade .68s cubic-bezier(.16,1,.3,1) both; }
.secret-passage-discovery::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(163,219,255,.12), transparent); transform: translateX(-100%); animation: secretPassageSweep 2.8s ease 0.5s both; }
.secret-passage-discovery-art { position: relative; min-height: 350px; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(91,190,255,.35), transparent 49%), #07182f; }
.secret-passage-discovery-art::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(132,217,255,.5); border-radius: 50%; box-shadow: 0 0 25px rgba(78,173,255,.5), inset 0 0 22px rgba(78,173,255,.26); animation: secretPortalPulse 2.4s ease-in-out infinite; pointer-events: none; }
.secret-passage-discovery-art img { width: 100%; height: 100%; min-height: 350px; object-fit: cover; object-position: center; mix-blend-mode: screen; opacity: .9; animation: secretPassageFloat 4s ease-in-out infinite; }
.secret-passage-discovery-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px clamp(22px, 5vw, 64px); }
.secret-passage-discovery-copy .eyebrow { color: #b8dcff; }
.secret-passage-discovery-copy h2 { max-width: 660px; margin: 5px 0 14px; color: #ff5757; font: 600 clamp(29px, 5vw, 52px) var(--serif); line-height: .99; text-shadow: 0 2px 0 #5b141c, 0 0 18px rgba(255,73,73,.28); }
.secret-passage-discovery-copy > p:not(.eyebrow) { max-width: 620px; margin: 0; color: #e7f3ff; font-size: 15px; line-height: 1.7; }
.secret-passage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.secret-enter-button { border-color: #b5e1ff; background: linear-gradient(135deg, #e13c46, #942a42); color: #fff4ef; box-shadow: 0 0 18px rgba(255,69,83,.28); }
.secret-enter-button:hover { background: linear-gradient(135deg, #ff5961, #b6314d); box-shadow: 0 0 28px rgba(255,80,93,.5); transform: translateY(-2px); }
.secret-leave-button { border-color: rgba(183,222,255,.74); background: rgba(8,26,55,.54); color: #dceeff; }
.secret-dungeon-shell { position: relative; margin: 4px 0 20px; padding: clamp(18px, 3vw, 32px); overflow: hidden; border: 1px solid rgba(120,190,255,.4); border-radius: 18px; background: radial-gradient(circle at 80% 0%, rgba(62,132,207,.15), transparent 32%), linear-gradient(145deg, rgba(10,26,48,.99), rgba(6,12,23,.99)); box-shadow: inset 0 0 0 1px rgba(191,227,255,.06), 0 14px 35px rgba(0,0,0,.28); animation: secretPassageFade .5s ease both; }
.secret-dungeon-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(119,193,255,.025) 91px 92px); }
.secret-dungeon-header, .secret-direction-grid, .secret-enemy-card, .secret-dungeon-log, .secret-exit-button { position: relative; z-index: 1; }
.secret-dungeon-header { margin-bottom: 22px; }
.secret-dungeon-header h2 { margin: 3px 0 7px; color: #eaf5ff; font: 600 clamp(27px, 4vw, 43px) var(--serif); }
.secret-dungeon-header p:not(.eyebrow) { max-width: 760px; margin: 0; color: #aebfd2; line-height: 1.6; }
.secret-room-progress, .secret-enemy-hp { display: block; height: 7px; margin-top: 16px; overflow: hidden; border: 1px solid rgba(132,207,255,.32); border-radius: 99px; background: rgba(2,8,17,.8); }
.secret-room-progress i, .secret-enemy-hp i { display: block; height: 100%; background: linear-gradient(90deg, #6fd9ff, #bd7bff); box-shadow: 0 0 13px rgba(111,217,255,.75); }
.secret-direction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.secret-direction-card { display: flex; min-height: 285px; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid rgba(138,195,239,.25); border-radius: 12px; background: linear-gradient(160deg, rgba(19,43,70,.9), rgba(8,18,32,.96)); color: #dbeaff; text-align: left; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.secret-direction-card:hover { transform: translateY(-5px); border-color: rgba(171,224,255,.8); background: linear-gradient(160deg, rgba(28,65,101,.96), rgba(10,22,40,.98)); box-shadow: 0 12px 26px rgba(0,0,0,.26), 0 0 22px rgba(78,170,255,.16); }
.secret-direction-label { align-self: flex-end; color: #91cfff; font: 900 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.secret-option-art { display: grid; place-items: center; align-self: center; width: 142px; height: 142px; margin: 1px auto 11px; overflow: hidden; border: 1px solid rgba(151,215,255,.32); border-radius: 10px; background: radial-gradient(circle, rgba(73,159,238,.18), rgba(2,8,16,.75)); box-shadow: inset 0 0 18px rgba(105,198,255,.14), 0 0 13px rgba(105,198,255,.12); }
.secret-option-art img { width: 100%; height: 100%; object-fit: cover; animation: secretChestFloat 3.3s ease-in-out infinite; }
.secret-option-art .animated-skill-art { width: 100px; height: 100px; }
.secret-direction-card .micro-badge { margin-bottom: 7px; color: #a4d9ff; }
.secret-direction-card b { color: #f4f8ff; font: 600 20px var(--serif); }
.secret-direction-card small { margin-top: 7px; color: #a8b9ca; line-height: 1.45; }
.secret-direction-card em { margin-top: auto; padding-top: 13px; color: #f0c67b; font-size: 10px; font-style: normal; }
.secret-direction-enemy { border-color: rgba(234,108,111,.38); }
.secret-direction-chest { border-color: rgba(232,192,111,.34); }
.secret-direction-training { border-color: rgba(130,223,204,.34); }
.secret-enemy-card { display: grid; grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px; border: 1px solid rgba(228,112,111,.44); border-radius: 14px; background: linear-gradient(110deg, rgba(45,20,34,.74), rgba(10,25,44,.9)); box-shadow: 0 0 26px rgba(210,51,80,.11); }
.secret-enemy-art { min-height: 250px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle, rgba(255,94,84,.22), transparent 64%), #100d18; }
.secret-enemy-art img { width: 100%; height: 250px; object-fit: cover; animation: secretEnemyPulse 2.2s ease-in-out infinite; }
.secret-enemy-copy h3 { margin: 9px 0 14px; color: #fff0ed; font: 600 clamp(25px, 4vw, 42px) var(--serif); }
.secret-enemy-copy strong { display: block; margin-top: 7px; color: #ffb6a9; font-size: 12px; }
.secret-enemy-copy p { color: #cdb8bd; line-height: 1.65; }
.secret-turn-count { display: inline-block; margin-top: 8px; color: #f1ca83; font: 900 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.secret-dungeon-log { margin-top: 23px; padding-top: 15px; border-top: 1px solid rgba(133,190,232,.18); }
.secret-log-heading { display: flex; justify-content: space-between; color: #90c8ee; font: 900 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.secret-log-heading span { color: #66839d; }
.secret-dungeon-log p { margin: 8px 0 0; color: #a4b6c9; font-size: 12px; line-height: 1.45; }
.secret-exit-button { margin-top: 22px; }
.secret-dungeon-complete .secret-dungeon-header h2 { color: #b9f4df; }
@keyframes secretPassageFade { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes secretPassageSweep { to { transform: translateX(100%); } }
@keyframes secretPortalPulse { 0%, 100% { transform: scale(.96); opacity: .55; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes secretPassageFloat { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-4px); } }
@keyframes secretChestFloat { 0%, 100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-4px) rotate(.7deg); } }
@keyframes secretEnemyPulse { 0%, 100% { transform: scale(1); filter: saturate(.95) drop-shadow(0 0 0 rgba(255,83,75,0)); } 50% { transform: scale(1.018); filter: saturate(1.15) drop-shadow(0 0 15px rgba(255,83,75,.35)); } }
@media (max-width: 760px) {
  .secret-passage-discovery { grid-template-columns: 1fr; }
  .secret-passage-discovery-art, .secret-passage-discovery-art img { min-height: 220px; height: 220px; }
  .secret-direction-grid { grid-template-columns: 1fr; }
  .secret-direction-card { min-height: 0; }
  .secret-option-art { width: 124px; height: 124px; }
  .secret-enemy-card { grid-template-columns: 1fr; }
  .secret-enemy-art { min-height: 220px; }
  .secret-enemy-art img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .secret-passage-discovery, .secret-passage-discovery::after, .secret-passage-discovery-art::after, .secret-passage-discovery-art img, .secret-dungeon-shell, .secret-option-art img, .secret-enemy-art img { animation: none; }
}

/* Interface motion pass ---------------------------------------------------
   Zavfryn is a live record of a journey, not a stack of static forms. These
   cues are intentionally material-led: paper settles, map ink travels, metal
   catches light, and active systems breathe. Nothing here changes gameplay or
   scroll position, and the reduced-motion contract remains explicit below. */

/* Workspace changes and the upper navigation */
.tabpage:not([hidden]) { animation: uiPageReveal .34s cubic-bezier(.2,.8,.2,1) both; }
.tabpage:not([hidden]) > .section-heading { animation: uiHeadingReveal .42s cubic-bezier(.2,.8,.2,1) both; }
.tabpage:not([hidden]) > .panel:nth-of-type(2) { animation-delay: .035s; }
.tabpage:not([hidden]) > .panel:nth-of-type(3) { animation-delay: .07s; }
.tab:not(:disabled) .button-emblem { transform-origin: 50% 60%; }
.tab.active .button-emblem { animation: uiActiveTabEmblem 2.5s ease-in-out infinite; }
.tab.active::after { animation: uiActiveTabLine 2.8s ease-in-out infinite; }

/* Painted locations and navigational surfaces */
.scene-card.hd2d-scene-card > img { animation: uiSceneBreath 19s ease-in-out infinite; }
.scene-location-masthead { animation: uiMastheadLight 4.8s ease-in-out infinite; }
.map-node.current circle { animation: uiCurrentNodePulse 2.15s ease-in-out infinite; }
.map-node.browsing circle { animation: uiBrowsingNode 2.6s ease-in-out infinite; }
.map-skill-icon-btn, .map-skill-icon-btn-img { animation: uiMapSkillHover 3.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.map-skill-icon-btn:hover, .map-skill-icon-btn:focus,
.map-skill-icon-btn-img:hover, .map-skill-icon-btn-img:focus { animation-play-state: paused; }
.player-marker.travelling { animation: uiTravellingMarker 1.15s ease-in-out infinite; }
.world-map .map-road.active { animation-duration: 1.45s; }
.minimap-skill-icon-img, .minimap-skill-icon-glyph { animation: uiMiniSkillSignal 3.1s ease-in-out infinite; }
.minimap-skill-row > :nth-child(2n) { animation-delay: .4s; }

/* Enhanced shimmer, dialed back. The base animations above are individually
   mild, but Enhanced runs every one of them on every matching instance at
   once with no stagger - every map/minimap skill icon on screen, every
   filled inventory tile and equipment slot - which reads as the whole
   screen breathing together rather than a few nice touches. Gentler
   amplitude and a slower pace here, on the always-on/many-instance ones
   specifically, not a switch-off like Standard uses (see the
   data-shimmer="standard" animation:none rules elsewhere): Enhanced should
   still read as livelier than Standard, just not overwhelming. */
html[data-shimmer="enhanced"] .minimap-skill-icon-img,
html[data-shimmer="enhanced"] .minimap-skill-icon-glyph { animation: uiMiniSkillSignalSoft 4.6s ease-in-out infinite; }
html[data-shimmer="enhanced"] .map-skill-icon-btn,
html[data-shimmer="enhanced"] .map-skill-icon-btn-img { animation: uiMapSkillHoverSoft 5.4s ease-in-out infinite; }
html[data-shimmer="enhanced"] .inventory-tile:not(.empty) .inventory-tile-icon { animation: uiInventoryTileBreatheSoft 6s ease-in-out infinite; }
html[data-shimmer="enhanced"] .equipment-drop.filled > .equipment-icon-well { animation: uiEquipmentWellSoft 6.4s ease-in-out infinite; }

/* Live activity and travel progress */
.travel-panel-overlay .travel-scene-route span { display: inline-block; animation: uiRouteArrow 1.35s ease-in-out infinite; }
.activity-card .activity-icon { animation: uiActivityIcon 2.9s ease-in-out infinite; }
.activity-card .queue-ledger b { animation: uiCountHeartbeat 2.2s ease-in-out infinite; }
.activity-card .meter i, .travel-panel-overlay .meter i, .travel-status-panel .meter i { animation: uiProgressSweep 2.2s linear infinite; }
.travel-scene-meta b { animation: uiRemainingTick 1.2s ease-in-out infinite; }
.queue-status-blue { animation: queueStatusPulse 1.8s ease-in-out infinite, uiQueueBreath 2.8s ease-in-out infinite; }

/* Meters are not just colored rectangles: a slow highlight makes progress
   readable at a glance while preserving the actual inline width value. */
.meter i, .combat-hp i, .goal-progress i, .durability-bar i, .secret-room-progress i, .secret-enemy-hp i {
  background-size: 220% 100%;
  animation: uiMeterFlow 5.4s linear infinite;
}
.meter.xp i, .meter.viran i { animation: uiMeterFlow 4.1s linear infinite, meterGlint 4.8s ease-in-out infinite; }

/* Inventory, New items, and the paperdoll */
.inventory-tile:not(.empty) .inventory-tile-icon { animation: uiInventoryTileBreathe 4.4s ease-in-out infinite; }
.inventory-tile:nth-child(2n) .inventory-tile-icon { animation-delay: .35s; }
.new-item-row:not(.read) { animation: uiNewItemSignal 2.25s ease-in-out infinite; }
.new-item-row:not(.read) .item-icon { animation: uiNewItemIcon 2.1s ease-in-out infinite; }
.equipment-drop.filled > .equipment-icon-well { animation: uiEquipmentWell 4.8s ease-in-out infinite; }
.equipment-drop.filled:nth-child(2n) > .equipment-icon-well { animation-delay: .45s; }
.equipment-drop.empty > .equipment-icon-well { transition: opacity .25s ease, transform .25s ease, filter .25s ease; }
.equipment-drop:hover > .equipment-icon-well { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--game-accent) 45%, transparent)); }
.item-art-icon, .item-svg-icon { transition: filter .25s ease, transform .25s ease; }
.action-icon:hover .item-art-icon, .item-icon:hover .item-art-icon, .inventory-tile:hover .item-art-icon { transform: scale(1.08) rotate(-2deg); }

/* Skills, goals, and objective cards */
.skill-group h3 { position: relative; }
.skill-group h3::after { content: ""; display: inline-block; width: 32px; height: 1px; margin: 0 0 3px 8px; background: linear-gradient(90deg, var(--game-warm), transparent); animation: uiRuleBreath 3.2s ease-in-out infinite; }
.skill-row { transition: background-color .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease; }
.skill-row:hover { border-color: color-mix(in srgb, var(--game-accent) 42%, var(--line)); background: linear-gradient(90deg, rgba(75,150,162,.08), transparent 72%); transform: translateX(3px); box-shadow: inset 3px 0 var(--game-accent); }
.skill-row:hover .skill-level { animation: uiLevelNudge .55s ease both; }
.skill-row .skill-progress .meter i { animation-duration: 3.8s; }
.goal-card:not(.goal-archived) { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.goal-card:not(.goal-archived):hover { transform: translateY(-4px); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 14px 28px rgba(0,0,0,.28), 0 0 18px rgba(79,184,255,.08); }
.goal-card.goal-pinned .goal-mark { animation: uiPinnedGoal 2.3s ease-in-out infinite; }
.quest-card:not(.unknown) { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.quest-card:not(.unknown):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--game-warm) 42%, var(--line)); box-shadow: 0 10px 22px rgba(0,0,0,.2); }

/* Player lists, party surfaces, mail, and notifications */
.location-player-card, .party-member-row, .party-combatant, .leader { transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease; }
.location-player-card:hover, .party-member-row:hover, .party-combatant:hover, .leader:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--game-accent) 44%, var(--line)); box-shadow: 0 7px 16px rgba(0,0,0,.18), inset 3px 0 var(--game-accent); }
.location-player-card .training-skill-badge .animated-skill-art { animation-duration: 2.6s; }
.mail-row.unread { animation: uiUnreadRow 2.7s ease-in-out infinite; }
.notification-row.unread .notification-type { animation: uiNotificationBell 1.9s ease-in-out infinite; }
.notification-row, .mail-row { transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.notification-row:hover, .mail-row:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--game-accent) 44%, var(--line)); box-shadow: 0 7px 17px rgba(0,0,0,.18); }

/* Combat and dungeon presentation */
.combatant-art-foe img, .combat-review-art img { animation: uiFoeBreath 3.8s ease-in-out infinite; transform-origin: 50% 72%; }
.combatant-art-foe .foe-element-badge { animation: uiElementBadge 2.4s ease-in-out infinite; }
.versus { animation: uiVersusPulse 2.4s ease-in-out infinite; }
.combat-hp i { animation-duration: 2.8s; }
.combat-log-row.log-row-fresh { animation: uiCombatLogStrike .46s cubic-bezier(.2,.8,.2,1) both; }
.combat-log-row.log-row-boss-kill { animation: uiBossLogFlash .85s ease both; }
.dungeon-card, .dungeon-detail-card, .world-event-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.dungeon-card:hover, .dungeon-detail-card:hover, .world-event-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--game-accent) 45%, var(--game-warm)); box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 0 18px rgba(79,184,255,.08); }
.dungeon-card .action-icon, .world-event-card > img { animation: uiDungeonArt 4.2s ease-in-out infinite; }

/* Modals, toast feedback, and high-value buttons */
.modal-overlay:not([hidden]) { animation: uiOverlayIn .24s ease-out both; }
.modal-overlay:not([hidden]) .modal-box { animation: uiModalIn .36s cubic-bezier(.2,.8,.2,1) both; }
.modal-box > .modal-title-row, .modal-box > .modal-heading { animation: uiModalHeading .4s ease-out both; }
#toast.show { animation: uiToastPop .34s cubic-bezier(.2,.8,.2,1) both; }
.action-button:not(:disabled), .ready-button:not(:disabled), .claim-button:not(:disabled) { background-size: 180% 100%; animation: uiButtonBreath 4.8s ease-in-out infinite; }
.action-button:not(:disabled):active, .ready-button:not(:disabled):active, .claim-button:not(:disabled):active { animation: none; }
.modal-close:hover { animation: uiCloseButton .55s cubic-bezier(.2,.8,.2,1) both; }

/* Keyframes */
@keyframes uiPageReveal { from { opacity: .78; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes uiHeadingReveal { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes uiActiveTabEmblem { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1.25) drop-shadow(0 0 6px rgba(230,195,126,.38)); } 50% { transform: translateY(-2px) scale(1.1); filter: saturate(1.5) drop-shadow(0 0 11px rgba(230,195,126,.74)); } }
@keyframes uiActiveTabLine { 0%, 100% { opacity: .58; box-shadow: 0 0 6px rgba(230,195,126,.3); } 50% { opacity: 1; box-shadow: 0 0 14px rgba(230,195,126,.75); } }
@keyframes uiSceneBreath { 0%, 100% { transform: scale(1.008) translate3d(0,0,0); filter: saturate(1.05) contrast(1.06) brightness(.92); } 50% { transform: scale(1.026) translate3d(-.35%,-.2%,0); filter: saturate(1.14) contrast(1.08) brightness(1); } }
@keyframes uiMastheadLight { 0%, 100% { opacity: .88; text-shadow: 0 2px 8px #000; } 50% { opacity: 1; text-shadow: 0 2px 10px #000, 0 0 12px rgba(230,195,126,.28); } }
@keyframes uiCurrentNodePulse { 0%, 100% { opacity: .82; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--game-accent) 50%, transparent)); } 50% { opacity: 1; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--game-accent) 90%, transparent)); } }
@keyframes uiBrowsingNode { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes uiMapSkillHover { 0%, 100% { opacity: .84; } 50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,215,106,.55)); } }
@keyframes uiMapSkillHoverSoft { 0%, 100% { opacity: .92; } 50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,215,106,.3)); } }
@keyframes uiTravellingMarker { 0%, 100% { filter: drop-shadow(0 0 4px var(--game-warm)); opacity: .8; } 50% { filter: drop-shadow(0 0 12px var(--game-warm)) drop-shadow(0 0 4px var(--game-accent)); opacity: 1; } }
@keyframes uiMiniSkillSignal { 0%, 100% { transform: translateY(0); filter: saturate(.95); } 50% { transform: translateY(-2px); filter: saturate(1.3) drop-shadow(0 0 5px rgba(109,227,224,.42)); } }
@keyframes uiMiniSkillSignalSoft { 0%, 100% { transform: translateY(0); filter: saturate(.98); } 50% { transform: translateY(-1px); filter: saturate(1.1) drop-shadow(0 0 2px rgba(109,227,224,.22)); } }
@keyframes uiRouteArrow { 0%, 100% { transform: translateX(0); opacity: .65; } 50% { transform: translateX(5px); opacity: 1; } }
@keyframes uiActivityIcon { 0%, 100% { transform: translateY(0) rotate(0); filter: drop-shadow(0 0 3px rgba(109,227,224,.2)); } 45% { transform: translateY(-3px) rotate(-3deg); filter: drop-shadow(0 0 9px rgba(109,227,224,.7)); } 70% { transform: translateY(1px) rotate(2deg); } }
@keyframes uiCountHeartbeat { 0%, 74%, 100% { transform: scale(1); } 80% { transform: scale(1.14); color: var(--game-warm-bright); } 86% { transform: scale(1); } }
@keyframes uiProgressSweep { from { background-position: 140% 0; } to { background-position: -60% 0; } }
@keyframes uiRemainingTick { 0%, 100% { opacity: .72; } 50% { opacity: 1; color: var(--game-accent); } }
@keyframes uiQueueBreath { 0%, 100% { filter: brightness(.94); } 50% { filter: brightness(1.16); } }
@keyframes uiMeterFlow { from { background-position: 140% 0; } to { background-position: -80% 0; } }
@keyframes uiInventoryTileBreathe { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); } 50% { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 0 7px rgba(109,227,224,.32)); } }
@keyframes uiInventoryTileBreatheSoft { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); } 50% { transform: translateY(-1px) scale(1.015); filter: drop-shadow(0 0 4px rgba(109,227,224,.18)); } }
@keyframes uiNewItemSignal { 0%, 100% { box-shadow: inset 2px 0 rgba(230,195,126,.3); } 50% { box-shadow: inset 3px 0 var(--game-warm), 0 0 12px rgba(230,195,126,.11); } }
@keyframes uiNewItemIcon { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08) rotate(-3deg); } 72% { transform: scale(1); } }
@keyframes uiEquipmentWell { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes uiEquipmentWellSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes uiRuleBreath { 0%, 100% { opacity: .45; transform: scaleX(.65); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes uiLevelNudge { 0% { transform: scale(.9); } 60% { transform: scale(1.13); color: var(--game-accent); } 100% { transform: scale(1); } }
@keyframes uiPinnedGoal { 0%, 100% { transform: rotate(0) scale(1); text-shadow: none; } 50% { transform: rotate(8deg) scale(1.14); text-shadow: 0 0 10px var(--game-warm); } }
@keyframes uiUnreadRow { 0%, 72%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 45%, var(--line)); } 82% { box-shadow: inset 0 0 0 1px var(--game-warm), 0 0 15px rgba(230,195,126,.14); } }
@keyframes uiNotificationBell { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-3deg); } }
@keyframes uiFoeBreath { 0%, 100% { transform: scale(1) translateY(0); filter: saturate(.96) drop-shadow(0 4px 7px rgba(0,0,0,.7)); } 50% { transform: scale(1.035) translateY(-2px); filter: saturate(1.12) drop-shadow(0 0 11px rgba(255,86,76,.32)); } }
@keyframes uiElementBadge { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.08); filter: brightness(1.3); } }
@keyframes uiVersusPulse { 0%, 100% { opacity: .55; transform: scale(.96); text-shadow: none; } 50% { opacity: 1; transform: scale(1.08); text-shadow: 0 0 13px rgba(230,195,126,.62); } }
@keyframes uiCombatLogStrike { from { opacity: 0; transform: translateX(-12px); } 65% { opacity: 1; transform: translateX(2px); } to { transform: none; } }
@keyframes uiBossLogFlash { 0% { background-color: rgba(230,195,126,.28); } 100% { background-color: transparent; } }
@keyframes uiDungeonArt { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes uiOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiModalIn { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes uiModalHeading { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes uiToastPop { from { opacity: 0; transform: translate(-50%, 12px) scale(.95); } 65% { transform: translate(-50%, -2px) scale(1.02); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes uiButtonBreath { 0%, 82%, 100% { background-position: 140% 0; } 90% { background-position: 0 0; } }
@keyframes uiCloseButton { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(90deg) scale(1.08); } 100% { transform: rotate(90deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tabpage:not([hidden]), .tabpage:not([hidden]) > .section-heading,
  .tab.active .button-emblem, .tab.active::after, .scene-card.hd2d-scene-card > img,
  .scene-location-masthead, .map-node.current circle, .map-node.browsing circle,
  .map-skill-icon-btn, .map-skill-icon-btn-img, .player-marker.travelling,
  .minimap-skill-icon-img, .minimap-skill-icon-glyph, .travel-panel-overlay:not([hidden]),
  .travel-panel-overlay .travel-scene-route span,
  .activity-card .activity-icon, .activity-card .queue-ledger b, .activity-card .meter i,
  .travel-panel-overlay .meter i, .travel-status-panel .meter i, .travel-scene-meta b,
  .queue-status-blue, .meter i, .combat-hp i, .goal-progress i, .durability-bar i,
  .secret-room-progress i, .secret-enemy-hp i, .inventory-tile:not(.empty) .inventory-tile-icon, .dock-icon img,
  .new-item-row:not(.read), .new-item-row:not(.read) .item-icon, .equipment-drop.filled > .equipment-icon-well,
  .skill-group h3::after, .skill-row:hover .skill-level, .goal-card.goal-pinned .goal-mark,
  .mail-row.unread, .notification-row.unread .notification-type,
  .combatant-art-foe img, .combat-review-art img, .combatant-art-foe .foe-element-badge,
  .versus, .combat-log-row.log-row-fresh, .combat-log-row.log-row-boss-kill,
  .dungeon-card .action-icon, .world-event-card > img, .modal-overlay:not([hidden]),
  .modal-overlay:not([hidden]) .modal-box, .modal-box > .modal-title-row,
  .modal-box > .modal-heading, #toast.show, .action-button:not(:disabled),
  .ready-button:not(:disabled), .claim-button:not(:disabled), .modal-close:hover { animation: none !important; }
}

/* -------------------------------------------------------------------------
   VISIBLE FEEDBACK PASS

   The first motion layer gives the interface atmosphere. This layer makes
   state changes legible at normal viewing distance: a running activity has a
   living rail, the active skill is unmistakable, controls answer a press,
   and combat/map feedback has a short readable beat. These effects are
   intentionally finite or slow enough to remain useful rather than noisy.
   ------------------------------------------------------------------------- */

/* A live activity is the most important status on the page. The moving line
   and brighter edge keep it readable even when the progress percentage is
   only changing by a fraction. */
.job-sprite:not(.death-skull) { animation: spriteIdleVisible 4.25s ease-in-out infinite; }
.activity-card { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--game-accent) 46%, var(--game-warm)); box-shadow: inset 0 0 0 1px rgba(79,184,255,.08), 0 0 18px rgba(79,184,255,.08); animation: liveActivityBreath 2.6s ease-in-out infinite; }
.activity-card::before { content: ""; position: absolute; z-index: 0; top: 0; left: -28%; width: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--game-accent), var(--game-warm), transparent); box-shadow: 0 0 13px var(--game-accent); animation: liveActivityRail 2.1s linear infinite; pointer-events: none; }
.activity-card > * { position: relative; z-index: 1; }
.activity-card .activity-icon { animation: liveActivityIcon 1.8s ease-in-out infinite; }
.activity-card .meter i, .travel-panel-overlay .meter i, .travel-status-panel .meter i { background-image: linear-gradient(90deg, color-mix(in srgb, var(--game-accent) 62%, #081116), var(--game-accent), #eff8df, var(--game-warm), color-mix(in srgb, var(--game-accent) 62%, #081116)); background-size: 260% 100%; animation: liveProgressRail 1.55s linear infinite; }
.travel-panel-overlay:not([hidden]) { box-shadow: inset 0 0 30px rgba(79,184,255,.08); animation: travelOverlayBreath 2.8s ease-in-out infinite; }

/* The training badge and ledger row are deliberately more assertive than
   ordinary skill art. A player should know at a glance what is running. */
.training-status-dock { animation: trainingDockSignal 1.9s ease-in-out infinite; }
.training-status-dock .animated-skill-art { animation: trainingBadgeLift 2.15s ease-in-out infinite; }
.training-status-dock .animated-skill-art::before { animation-duration: 2.6s; }
.training-status-dock .animated-skill-art img { animation: trainingArtVisible var(--training-speed, 3.2s) ease-in-out infinite; }
.training-status-dock .animated-skill-art i { animation: trainingSparkVisible 1.05s ease-in-out infinite; }
.skill-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.skill-ledger-icon { width: 33px; height: 33px; flex: 0 0 auto; display: grid; place-items: center; }
.skill-ledger-art { width: 31px; height: 31px; border-radius: 8px; }
.skill-ledger-copy { min-width: 0; }
.skill-ledger-copy b, .skill-ledger-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.skill-row.is-training { position: relative; border-color: color-mix(in srgb, var(--training-tint, var(--game-accent)) 58%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--training-tint, var(--game-accent)) 10%, transparent), transparent 72%); box-shadow: inset 4px 0 var(--training-tint, var(--game-accent)), 0 0 16px color-mix(in srgb, var(--training-tint, var(--game-accent)) 11%, transparent); animation: liveSkillRow 2.35s ease-in-out infinite; }
.skill-row.is-training .skill-level { color: var(--training-tint, var(--game-accent)); text-shadow: 0 0 9px color-mix(in srgb, var(--training-tint, var(--game-accent)) 52%, transparent); }
.skill-row.is-training .skill-ledger-art { animation: trainingLedgerLive 1.75s ease-in-out infinite; }
.skill-row.is-training .skill-progress .meter i { animation-duration: 1.4s; }

/* Icons in action cards are a visual part of the action, not decoration
   frozen beside the text. The staggered delay keeps a grid from pulsing as a
   single block. */
.action-card .action-icon { animation: actionIconSignal 3.1s ease-in-out infinite; }
.action-card:nth-child(2n) .action-icon { animation-delay: .4s; }
.action-card:nth-child(3n) .action-icon { animation-delay: .8s; }
.quick-action-button:not(:disabled) { animation: quickActionSignal 3.6s ease-in-out infinite; }
.location-menu-link.active { animation: activeLocationSignal 2.4s ease-in-out infinite; }
.location-menu-link.active .button-emblem { animation: activeLocationEmblem 1.9s ease-in-out infinite; }

/* Manual topics are tabs, not a second location grid. Keep them in one
   horizontal, wrapping strip so long topic names do not become tall columns. */
.manual-topic-menu { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 12px; padding:4px; border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.18); }
.manual-topic-menu .location-menu-link { flex:0 1 auto; min-height:30px; width:auto; padding:5px 9px; white-space:nowrap; }

/* The main inventory is fluid. At narrower widths it drops columns instead of
   squeezing the native square tile into a tall rectangle. */
.inventory-workspace > .inventory-icon-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 88px), 1fr)); }

/* A Lextro marker is intentionally hot and unmistakable without covering the
   location label. */
.map-lextro-badge circle { fill:#4b1610; stroke:#ffd36b; stroke-width:1.5; filter:drop-shadow(0 0 5px rgba(255,84,31,.85)); }
.map-lextro-badge text { fill:#fff0b0; font:900 8px var(--sans); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.map-regional-find-badge circle { fill:#7a5d18; stroke:#fff0a0; stroke-width:1.5; filter:drop-shadow(0 0 6px rgba(255,222,93,.9)); }
.map-regional-find-badge text { fill:#fff6b0; font:900 11px var(--sans); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.lextro-card-icon { display:grid; place-items:center; border:1px solid #ffd36b; background:radial-gradient(circle, rgba(255,84,31,.5), rgba(74,18,12,.95)); color:#fff0b0; font:900 24px/1 var(--serif); text-shadow:0 0 9px rgba(255,211,107,.8); cursor:pointer; }
.lextro-card-icon:hover, .lextro-detail-icon { color:#fff4c5; filter:drop-shadow(0 0 7px rgba(255,84,31,.8)); }
.lextro-hero-art, .lextro-detail-icon { color:#fff0b0; background:radial-gradient(circle, rgba(255,84,31,.58), rgba(41,10,7,.95) 70%); font:900 70px/1 var(--serif); text-shadow:0 0 18px rgba(255,211,107,.85); }
.lextro-detail-icon { font-size:34px; }
.lextro-stat-strip { grid-template-columns:repeat(6, minmax(0, 1fr)); }
.lextro-detail-modal .action-button { margin-top:12px; }

/* Notifications occupy a stable rail surface instead of appearing over the
   game as a temporary viewport popup. */
.notification-dock { padding:9px 10px; }
.notification-dock.green-notification-stage { position:static; inset:auto; z-index:auto; pointer-events:auto; isolation:auto; }
.notification-dock .panel-heading { margin-bottom:6px; }
.notification-dock .green-notification-stack { position:static; width:auto; max-height:260px; overflow-y:auto; display:grid; gap:6px; padding:0; }
.notification-dock .green-notification { min-height:0; grid-template-columns:28px minmax(0,1fr); gap:6px 8px; padding:8px; border-radius:7px; box-shadow:none; opacity:1; transform:none; transition:none; }
.notification-dock .green-notification-icon { width:28px; height:28px; font-size:15px; border-radius:6px; }
.notification-dock .green-notification-copy { padding-right:14px; }
.notification-dock .green-notification-copy h2 { font-size:13px; line-height:1.2; }
.notification-dock .green-notification-copy small { font-size:10px; }
.notification-dock .green-notification-kicker { font-size:8px; }
.notification-dock .green-notification-actions { grid-column:2; gap:4px; }
.notification-dock .green-notification-close { top:3px; right:4px; width:18px; height:18px; font-size:18px; }
.notification-dock-empty { display:flex; align-items:center; gap:7px; min-height:34px; color:var(--muted); font-size:12px; }
.notification-dock-empty .ui-icon { color:var(--game-accent); }

/* Standard keeps the useful action card motion, while quieting decorative
   shimmer elsewhere. Enhanced shimmer is the opt-in mode for these effects. */
html[data-motion="full"][data-shimmer="standard"] .training-status-dock,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-img,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-glyph,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn-img,
html[data-motion="full"][data-shimmer="standard"] .map-node.current circle,
html[data-motion="full"][data-shimmer="standard"] .map-node.browsing circle,
html[data-motion="full"][data-shimmer="standard"] .atlas-skill-hero-art,
html[data-motion="full"][data-shimmer="standard"] .atlas-skill-activity-art,
html[data-motion="full"][data-shimmer="standard"] #inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #tab-inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] #tab-equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training .skill-ledger-art { animation: none !important; }

html[data-motion="fade"] .training-status-dock,
html[data-motion="fade"] .map-skill-icon-btn,
html[data-motion="fade"] .map-skill-icon-btn-img,
html[data-motion="fade"] .map-node.current circle,
html[data-motion="fade"] .map-node.browsing circle,
html[data-motion="fade"] .atlas-skill-hero-art,
html[data-motion="fade"] .atlas-skill-activity-art,
html[data-motion="fade"] #inventory .inventory-tile-icon,
html[data-motion="fade"] #tab-inventory .inventory-tile-icon,
html[data-motion="fade"] #equipment .equipment-icon-well,
html[data-motion="fade"] #tab-equipment .equipment-icon-well,
html[data-motion="fade"] .skill-row.is-training,
html[data-motion="fade"] .skill-row.is-training .skill-ledger-art { animation: gentleFade 4.8s ease-in-out infinite !important; }
@keyframes gentleFade { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }

/* Combat receives a reaction on the actor that was hit, plus a small pulse
   on elemental log art so spells read as events rather than plain text. */
.combat-arena { animation: combatRoomBreath 4.8s ease-in-out infinite; }
.combat-arena:has(.combat-log-row.foe_hit.log-row-fresh) .combatant-art-player { animation: playerCombatImpact .48s ease-out; }
.combat-arena:has(.combat-log-row.player_hit.log-row-fresh) .combatant-art-foe { animation: foeCombatImpact .48s ease-out; }
.combat-log-row.log-row-fresh .combat-log-element { animation: combatElementBurst .7s ease-out; }
.combat-log-element img, .combat-log-element span { filter: drop-shadow(0 0 4px currentColor); }
.combat-log-row.type-weakness .combat-log-element { animation-name: combatElementSuperBurst; }
.combatant-art-player .job-sprite:not(.death-skull) { animation: spriteIdleVisible 4.25s ease-in-out infinite; }

/* Map and navigation state should be visible without zooming in. */
.map-node.current circle:first-child { animation: mapCurrentHalo 1.65s ease-in-out infinite; }
.map-node.current .map-node-core { animation: mapCurrentCore 1.2s ease-in-out infinite; }
.player-marker.travelling { animation: travellingMarkerVisible .82s ease-in-out infinite; }
.route.active { animation: activeRouteGlow 1.25s ease-in-out infinite; }

/* Unread loot and notifications get a brief visual lift as well as their
   existing border pulse. */
.new-item-row:not(.read) .item-icon { animation: newItemIconVisible 1.45s ease-in-out infinite; }
.notification-row.unread .notification-type { animation-duration: 1.25s; }
.mail-row.unread { animation-duration: 1.8s; }

/* Every interactive control answers the pointer immediately. The JS adds
   this class on pointerdown; it is intentionally separate from hover styles
   so keyboard and touch users get the same feedback. */
.ui-press-flash { animation: uiPressFlash .48s cubic-bezier(.2,.8,.2,1) !important; }

@keyframes liveActivityBreath { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(79,184,255,.08), 0 0 12px rgba(79,184,255,.06); } 50% { box-shadow: inset 0 0 0 1px rgba(79,184,255,.28), 0 0 25px rgba(79,184,255,.2); } }
@keyframes liveActivityRail { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(465%); opacity: 0; } }
@keyframes liveActivityIcon { 0%, 100% { transform: translateY(0) rotate(0) scale(1); filter: drop-shadow(0 0 3px rgba(109,227,224,.25)); } 35% { transform: translateY(-5px) rotate(-5deg) scale(1.1); filter: drop-shadow(0 0 13px rgba(109,227,224,.9)); } 65% { transform: translateY(1px) rotate(3deg) scale(1.02); } }
/* The return leg keeps the progress rail continuous at the loop boundary. */
@keyframes liveProgressRail { 0%, 100% { background-position: 150% 0; } 46% { background-position: -110% 0; } }
@keyframes travelOverlayBreath { 0%, 100% { background-color: rgba(5,11,14,.9); } 50% { background-color: rgba(7,18,25,.93); } }
@keyframes trainingDockSignal { 0%, 100% { border-color: color-mix(in srgb, var(--training-tint, var(--game-accent)) 44%, var(--line)); box-shadow: inset 0 0 0 2px rgba(4,10,13,.8), 0 0 8px color-mix(in srgb, var(--training-tint, var(--game-accent)) 15%, transparent); } 50% { border-color: color-mix(in srgb, var(--training-tint, var(--game-accent)) 90%, white); box-shadow: inset 0 0 0 2px rgba(4,10,13,.8), 0 0 23px color-mix(in srgb, var(--training-tint, var(--game-accent)) 52%, transparent); } }
@keyframes trainingBadgeLift { 0%, 100% { transform: translateY(0) rotate(0); } 42% { transform: translateY(-3px) rotate(-3deg); } 70% { transform: translateY(1px) rotate(2deg); } }
@keyframes trainingArtVisible { 0%, 100% { transform: translateY(3px) scale(.9) rotate(-5deg); filter: saturate(1.05) brightness(.9) drop-shadow(0 2px 4px rgba(0,0,0,.8)); } 38% { transform: translateY(-6px) scale(1.12) rotate(6deg); filter: saturate(1.5) brightness(1.22) drop-shadow(0 0 12px color-mix(in srgb, var(--training-tint, var(--game-accent)) 78%, transparent)); } 68% { transform: translateY(1px) scale(1) rotate(-1deg); filter: saturate(1.24) brightness(1.04) drop-shadow(0 2px 4px rgba(0,0,0,.8)); } }
@keyframes trainingSparkVisible { 0%, 100% { opacity: .15; transform: translate(-9px, 4px) scale(.4); } 35% { opacity: 1; transform: translate(0, -7px) scale(1.55); } 70% { opacity: .25; transform: translate(9px, -13px) scale(.65); } }
@keyframes liveSkillRow { 0%, 100% { background-position: 0 0; } 50% { background-position: 18px 0; } }
@keyframes trainingLedgerLive { 0%, 100% { transform: scale(.94) rotate(-4deg); filter: saturate(1.05) drop-shadow(0 0 3px color-mix(in srgb, var(--training-tint, var(--game-accent)) 25%, transparent)); } 45% { transform: scale(1.08) rotate(4deg); filter: saturate(1.42) drop-shadow(0 0 11px color-mix(in srgb, var(--training-tint, var(--game-accent)) 72%, transparent)); } }
@keyframes actionIconSignal { 0%, 72%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); } 80% { transform: translateY(-3px) scale(1.07) rotate(-3deg); filter: brightness(1.2) drop-shadow(0 0 11px rgba(79,184,255,.55)); } 88% { transform: translateY(0) scale(1); } }
@keyframes quickActionSignal { 0%, 78%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(79,184,255,.12), 0 8px 18px rgba(0,0,0,.22); } 86% { box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 0 0 1px rgba(79,184,255,.4), 0 0 22px rgba(79,184,255,.2), 0 10px 24px rgba(0,0,0,.3); } }
@keyframes activeLocationSignal { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm) 48%, var(--line)), 0 0 8px rgba(201,161,90,.08); } 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-warm-bright) 82%, var(--line)), 0 0 20px rgba(201,161,90,.24); } }
@keyframes activeLocationEmblem { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-4deg); } }
@keyframes combatRoomBreath { 0%, 100% { background-position: 50% 0, 0 0, 50% 50%; } 50% { background-position: 50% 2%, 0 0, 50% 48%; } }
@keyframes playerCombatImpact { 0% { transform: translateX(0); filter: brightness(1); } 30% { transform: translateX(-7px) rotate(-2deg); filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,86,76,.8)); } 60% { transform: translateX(4px) rotate(1deg); } 100% { transform: none; filter: brightness(1); } }
@keyframes foeCombatImpact { 0% { transform: translateX(0); filter: brightness(1); } 30% { transform: translateX(7px) rotate(2deg); filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,86,76,.8)); } 60% { transform: translateX(-4px) rotate(-1deg); } 100% { transform: none; filter: brightness(1); } }
@keyframes combatElementBurst { 0% { transform: scale(.65) rotate(-10deg); opacity: .3; } 45% { transform: scale(1.35) rotate(7deg); opacity: 1; filter: brightness(1.6) drop-shadow(0 0 10px currentColor); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes combatElementSuperBurst { 0% { transform: scale(.6); } 40% { transform: scale(1.6) rotate(12deg); filter: brightness(2) drop-shadow(0 0 15px currentColor); } 100% { transform: scale(1); } }
@keyframes spriteIdleVisible { 0%, 100% { transform: translateY(0) scale(1); } 32% { transform: translateY(-2px) scale(1.012); } 50% { transform: translateY(-8px) scale(1.04); } 68% { transform: translateY(-2px) scale(1.012); } }
@keyframes mapCurrentHalo { 0%, 100% { opacity: .68; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--game-accent) 50%, transparent)); } 50% { opacity: 1; filter: drop-shadow(0 0 17px color-mix(in srgb, var(--game-accent) 100%, transparent)); } }
@keyframes mapCurrentCore { 0%, 100% { transform: scale(.85); transform-origin: center; } 50% { transform: scale(1.35); transform-origin: center; } }
@keyframes travellingMarkerVisible { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--game-warm)); opacity: .82; } 50% { transform: scale(1.28); filter: drop-shadow(0 0 16px var(--game-warm)) drop-shadow(0 0 7px var(--game-accent)); opacity: 1; } }
@keyframes activeRouteGlow { 0%, 100% { opacity: .72; filter: drop-shadow(0 0 2px var(--game-accent)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px var(--game-accent)); } }
@keyframes newItemIconVisible { 0%, 72%, 100% { transform: scale(1) rotate(0); } 82% { transform: scale(1.16) rotate(-5deg); filter: brightness(1.35) drop-shadow(0 0 9px var(--game-warm)); } 90% { transform: scale(1) rotate(0); } }
@keyframes uiPressFlash { 0% { filter: brightness(1); } 28% { filter: brightness(1.58) saturate(1.28) drop-shadow(0 0 10px rgba(109,227,224,.5)); } 100% { filter: brightness(1); } }

@media (prefers-reduced-motion: reduce) {
  .activity-card, .activity-card::before, .activity-card .activity-icon,
  .activity-card .meter i, .travel-panel-overlay:not([hidden]),
  .travel-panel-overlay .meter i, .travel-status-panel .meter i,
  .training-status-dock, .training-status-dock .animated-skill-art,
  .training-status-dock .animated-skill-art::before, .training-status-dock .animated-skill-art img,
  .training-status-dock .animated-skill-art i, .skill-row.is-training,
  .skill-row.is-training .skill-ledger-art, .skill-row.is-training .skill-progress .meter i,
  .action-card .action-icon, .quick-action-button:not(:disabled), .location-menu-link.active,
  .location-menu-link.active .button-emblem, .combat-arena,
  .combat-arena:has(.combat-log-row.foe_hit.log-row-fresh) .combatant-art-player,
  .combat-arena:has(.combat-log-row.player_hit.log-row-fresh) .combatant-art-foe,
  .combat-log-row.log-row-fresh .combat-log-element, .combatant-art-player .job-sprite:not(.death-skull),
  .map-node.current circle:first-child, .map-node.current .map-node-core,
  .player-marker.travelling, .route.active, .new-item-row:not(.read) .item-icon,
  .ui-press-flash { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="reduced"] .job-sprite:not(.death-skull),
  html[data-motion="reduced"] .activity-card, html[data-motion="reduced"] .activity-card::before,
  html[data-motion="reduced"] .activity-card .activity-icon, html[data-motion="reduced"] .activity-card .meter i,
  html[data-motion="reduced"] .travel-panel-overlay:not([hidden]), html[data-motion="reduced"] .travel-panel-overlay .meter i,
  html[data-motion="reduced"] .travel-status-panel .meter i, html[data-motion="reduced"] .training-status-dock,
  html[data-motion="reduced"] .training-status-dock .animated-skill-art,
  html[data-motion="reduced"] .training-status-dock .animated-skill-art::before,
  html[data-motion="reduced"] .training-status-dock .animated-skill-art img,
  html[data-motion="reduced"] .training-status-dock .animated-skill-art i,
  html[data-motion="reduced"] .skill-row.is-training, html[data-motion="reduced"] .skill-row.is-training .skill-ledger-art,
  html[data-motion="reduced"] .action-card .action-icon, html[data-motion="reduced"] .quick-action-button:not(:disabled),
  html[data-motion="reduced"] .location-menu-link.active, html[data-motion="reduced"] .location-menu-link.active .button-emblem,
  html[data-motion="reduced"] .combat-arena, html[data-motion="reduced"] .combat-log-row.log-row-fresh .combat-log-element,
  html[data-motion="reduced"] .map-node.current circle:first-child, html[data-motion="reduced"] .map-node.current .map-node-core,
  html[data-motion="reduced"] .player-marker.travelling, html[data-motion="reduced"] .route.active,
  html[data-motion="reduced"] .new-item-row:not(.read) .item-icon, html[data-motion="reduced"] .ui-press-flash { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="full"] .activity-card { animation: liveActivityBreath 2.6s ease-in-out infinite !important; }
  html[data-motion="full"] .activity-card::before { animation: liveActivityRail 2.1s linear infinite !important; }
  html[data-motion="full"] .activity-card .activity-icon { animation: liveActivityIcon 1.8s ease-in-out infinite !important; }
  html[data-motion="full"] .activity-card .meter i, html[data-motion="full"] .travel-panel-overlay .meter i, html[data-motion="full"] .travel-status-panel .meter i { animation: liveProgressRail 1.55s linear infinite !important; }
  html[data-motion="full"] .training-status-dock { animation: trainingDockSignal 1.9s ease-in-out infinite !important; }
  html[data-motion="full"] .training-status-dock .animated-skill-art { animation: trainingBadgeLift 2.15s ease-in-out infinite !important; }
  html[data-motion="full"] .training-status-dock .animated-skill-art img { animation: trainingArtVisible var(--training-speed, 3.2s) ease-in-out infinite !important; }
  html[data-motion="full"] .training-status-dock .animated-skill-art i { animation: trainingSparkVisible 1.05s ease-in-out infinite !important; }
  html[data-motion="full"] .skill-row.is-training .skill-ledger-art { animation: trainingLedgerLive 1.75s ease-in-out infinite !important; }
/* Combat keeps its own spriteIdleVisible treatment. The Wayfarer Record
   portrait is a stable identity marker, so only this context is frozen. */
.character-portrait .job-sprite:not(.death-skull):not([data-job="Mistblade"]):not([data-job="Sovereign"]) { animation: none !important; }
.character-portrait .job-sprite[data-job="Adventurer"],.character-portrait .job-sprite[data-job="Hero"] { --job-relic-glow:rgba(109,227,224,.75); }
.character-portrait .job-sprite[data-job="Duelist"],.character-portrait .job-sprite[data-job="Vanguard"],.character-portrait .job-sprite[data-job="Warrior"],.character-portrait .job-sprite[data-job="Skirmisher"] { --job-relic-glow:rgba(235,72,78,.9); }
.character-portrait .job-sprite[data-job="Berserker"],.character-portrait .job-sprite[data-job="Brawler"] { --job-relic-glow:rgba(239,133,48,.9); }
.character-portrait .job-sprite[data-job="Guardian"],.character-portrait .job-sprite[data-job="Sentinel"],.character-portrait .job-sprite[data-job="Protector"],.character-portrait .job-sprite[data-job="Bulwark"] { --job-relic-glow:rgba(105,166,215,.9); }
.character-portrait .job-sprite[data-job="Juggernaut"],.character-portrait .job-sprite[data-job="Stalwart"] { --job-relic-glow:rgba(83,207,122,.88); }
.character-portrait .job-sprite[data-job="Warden"],.character-portrait .job-sprite[data-job="Spellblade"],.character-portrait .job-sprite[data-job="Battleward"] { --job-relic-glow:rgba(239,202,83,.9); }
.character-portrait .job-sprite[data-job="Archmage"],.character-portrait .job-sprite[data-job="Battlecaster"],.character-portrait .job-sprite[data-job="Runewarden"],.character-portrait .job-sprite[data-job="Lifeweaver"],.character-portrait .job-sprite[data-job="Wardmage"],.character-portrait .job-sprite[data-job="Savior"],.character-portrait .job-sprite[data-job="Miracleguide"],.character-portrait .job-sprite[data-job="Spellbreaker"] { --job-relic-glow:rgba(174,106,235,.9); }
.character-portrait .job-sprite[data-job="Thief"],.character-portrait .job-sprite[data-job="Ninja"] { --job-relic-glow:rgba(171,83,230,.9); }
.character-portrait .job-sprite[data-job="Phase Walker"] { --job-relic-glow:rgba(78,215,230,.9); }
@keyframes jobRelicGlow { 0%,100% { opacity:.42; transform:scale(.94); } 50% { opacity:1; transform:scale(1.04); } }

.unknown-creature-profile { min-height:310px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; }
.unknown-creature-silhouette { width:138px; height:166px; display:grid; place-items:center; color:#e3edf0; font:900 56px var(--serif); background:radial-gradient(ellipse at 50% 35%, #28343b 0 20%, transparent 21%), radial-gradient(ellipse at 50% 70%, #11191d 0 51%, transparent 52%); filter:drop-shadow(0 8px 8px rgba(0,0,0,.7)); text-shadow:0 2px 0 #070b0d; }
@media (prefers-reduced-motion: reduce) { .job-sprite:not(.death-skull)::before { animation:none; } }
  html[data-motion="full"] .ui-press-flash { animation: uiPressFlash .48s cubic-bezier(.2,.8,.2,1) !important; }
}

/* Skill actions are the decision point of this screen. Give Start a clear
   visual hierarchy, a recognizable skill signal, and a slow, continuous
   presence instead of making it look like another generic card button. */
.skill-start-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; margin-top: 8px; }
.skill-start-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; margin-top: 8px; overflow: hidden; border-color: color-mix(in srgb, var(--training-tint, var(--game-accent)) 72%, var(--game-warm)); background: linear-gradient(115deg, color-mix(in srgb, var(--training-tint, var(--game-accent)) 24%, #0b151a), color-mix(in srgb, var(--game-accent) 13%, #0a0e11) 52%, color-mix(in srgb, var(--game-warm) 15%, #0a0e11)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--training-tint, var(--game-accent)) 18%, transparent), 0 5px 16px rgba(0,0,0,.32), 0 0 14px color-mix(in srgb, var(--training-tint, var(--game-accent)) 12%, transparent); letter-spacing: .055em; }
.skill-start-row .skill-start-button { width: auto; min-width: 0; margin-top: 0; padding-inline: 8px; }
.skill-start-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 16%, color-mix(in srgb, var(--training-tint, var(--game-accent)) 28%, white) 47%, transparent 70%); background-size: 230% 100%; opacity: .16; pointer-events: none; animation: skillStartSweep 8.5s cubic-bezier(.37,0,.63,1) infinite; }
.skill-start-button:not(:disabled) { animation: skillStartBreath 7.5s cubic-bezier(.37,0,.63,1) infinite; }
.skill-start-button:not(:disabled):hover, .skill-start-button:not(:disabled):focus-visible { border-color: color-mix(in srgb, var(--training-tint, var(--game-accent)) 92%, white); background: linear-gradient(115deg, color-mix(in srgb, var(--training-tint, var(--game-accent)) 34%, #0c171b), color-mix(in srgb, var(--game-accent) 20%, #0b1115) 52%, color-mix(in srgb, var(--game-warm) 24%, #0b1013)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--training-tint, var(--game-accent)) 34%, transparent), 0 8px 23px rgba(0,0,0,.38), 0 0 24px color-mix(in srgb, var(--training-tint, var(--game-accent)) 28%, transparent); }
.skill-start-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--training-tint, var(--game-accent)) 74%, white); outline-offset: 3px; }
.skill-start-art-wrap { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; }
.skill-start-art-wrap .animated-skill-art { width: 29px; height: 29px; border-radius: 7px; --training-speed: 6.5s; }
.skill-start-art-wrap .animated-skill-art img { animation-duration: 6.5s; }
.skill-start-art-wrap .animated-skill-art::before { animation-duration: 10s; }
.skill-start-art-wrap .animated-skill-art::after { animation-duration: 5.5s; }
.skill-start-art-wrap .animated-skill-art i { animation-duration: 3.8s; }
.skill-start-art-wrap .skill-start-fallback { width: 27px; height: 27px; }
.skill-start-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; color: #f4e4bc; font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.skill-start-eta { margin-top: 3px; color: #dff8bb; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 0 8px rgba(185,238,112,.4); }
.skill-start-arrow { position: relative; z-index: 1; color: var(--game-warm-bright); font-size: 18px; line-height: 1; transition: transform .25s ease; }
.skill-start-button:not(:disabled):hover .skill-start-arrow, .skill-start-button:not(:disabled):focus-visible .skill-start-arrow { transform: translateX(4px); }
.skill-start-button:disabled { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); opacity: .72; }
.skill-start-button:disabled .skill-start-art-wrap { filter: grayscale(.55) saturate(.55); }
.skill-outcome-summary { min-width: 0; align-self: stretch; display: grid; align-content: center; gap: 5px; padding: 7px 8px; border-top: 1px solid color-mix(in srgb, var(--game-warm) 28%, var(--line)); background: rgba(0,0,0,.12); color: var(--muted); overflow: hidden; }
.skill-outcome-line { min-width: 0; display: grid; gap: 1px; }
.skill-outcome-line span { color: var(--game-accent); font-size: 9px; font-weight: 900; letter-spacing: .1em; line-height: 1.1; }
.skill-outcome-line b { min-width: 0; color: var(--ink-soft); font-size: 10px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; word-break: normal; }
.skill-outcome-line i { color: var(--game-warm); font-style: normal; padding-inline: 2px; }
.skill-row.is-training { animation: skillRowSignalSmooth 12s cubic-bezier(.37,0,.63,1) infinite; transition: border-color 1.6s ease, background-color 1.6s ease, box-shadow 1.6s ease; }
.skill-row.is-training .skill-ledger-art { animation: trainingLedgerLiveSmooth 8.4s cubic-bezier(.37,0,.63,1) infinite; }
.skill-row.is-training .skill-progress .meter i { animation-duration: 6.2s; animation-timing-function: cubic-bezier(.37,0,.63,1); }
@keyframes skillStartSweep {
  0%, 20% { background-position: 150% 0; opacity: .04; }
  48% { background-position: 48% 0; opacity: .24; }
  76% { background-position: -55% 0; opacity: .04; }
  100% { background-position: 150% 0; opacity: .04; }
}
@keyframes skillStartBreath { 0%, 100% { filter: saturate(.96) brightness(.96); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--training-tint, var(--game-accent)) 18%, transparent), 0 5px 16px rgba(0,0,0,.32), 0 0 12px color-mix(in srgb, var(--training-tint, var(--game-accent)) 10%, transparent); } 50% { filter: saturate(1.13) brightness(1.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--training-tint, var(--game-accent)) 35%, transparent), 0 7px 20px rgba(0,0,0,.34), 0 0 22px color-mix(in srgb, var(--training-tint, var(--game-accent)) 22%, transparent); } }
@keyframes skillRowSignalSmooth { 0%, 100% { background-position: 0 0; filter: saturate(.97) brightness(.98); } 22% { background-position: 7px 0; filter: saturate(1) brightness(1); } 50% { background-position: 18px 0; filter: saturate(1.06) brightness(1.025); } 78% { background-position: 7px 0; filter: saturate(1) brightness(1); } }
@keyframes trainingLedgerLiveSmooth { 0%, 100% { transform: scale(.97) rotate(-1deg); filter: saturate(1.06) drop-shadow(0 0 4px color-mix(in srgb, var(--training-tint, var(--game-accent)) 28%, transparent)); } 20% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(3deg); filter: saturate(1.28) drop-shadow(0 0 10px color-mix(in srgb, var(--training-tint, var(--game-accent)) 60%, transparent)); } 78% { transform: scale(1) rotate(1deg); filter: saturate(1.12) drop-shadow(0 0 5px color-mix(in srgb, var(--training-tint, var(--game-accent)) 34%, transparent)); } }

@media (prefers-reduced-motion: reduce) {
  .skill-start-button:not(:disabled), .skill-start-button::before, .skill-start-art-wrap .animated-skill-art,
  .skill-start-art-wrap .animated-skill-art::before, .skill-start-art-wrap .animated-skill-art::after,
  .skill-start-art-wrap .animated-skill-art img, .skill-start-art-wrap .animated-skill-art i,
  .skill-row.is-training, .skill-row.is-training .skill-ledger-art,
  .skill-row.is-training .skill-progress .meter i { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion="full"] .skill-start-button:not(:disabled) { animation: skillStartBreath 7.5s cubic-bezier(.37,0,.63,1) infinite !important; }
  html[data-motion="full"] .skill-start-button::before { animation: skillStartSweep 8.5s cubic-bezier(.37,0,.63,1) infinite !important; }
  html[data-motion="full"] .skill-start-art-wrap .animated-skill-art img { animation: trainingArtVisible 6.5s ease-in-out infinite !important; }
  html[data-motion="full"] .skill-row.is-training { animation: skillRowSignalSmooth 12s cubic-bezier(.37,0,.63,1) infinite !important; }
  html[data-motion="full"] .skill-row.is-training .skill-ledger-art { animation: trainingLedgerLiveSmooth 8.4s cubic-bezier(.37,0,.63,1) infinite !important; }
}

/* Custom drawn scroll rails: the same dark metal, warm edge-light, and blue
   inset jewel used by the rest of Zavfryn's interface. This replaces the
   browser-default strips on every scrollable panel while preserving the
   intentionally hidden tab rail. */
*, *::before, *::after { scrollbar-color: #9a7541 rgba(3, 9, 12, .72); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: linear-gradient(90deg, rgba(3, 9, 12, .96), rgba(22, 34, 38, .72), rgba(3, 9, 12, .96)); border-left: 1px solid rgba(199, 151, 75, .16); border-radius: 999px; }
*::-webkit-scrollbar-thumb { min-height: 38px; background: linear-gradient(90deg, #332315 0%, #9a7541 24%, #d5ad63 48%, #6c9ba1 67%, #30251b 100%); border: 2px solid #071014; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(239, 211, 145, .48), inset 0 0 6px rgba(4, 13, 17, .86), 0 0 8px rgba(99, 181, 193, .28); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #5b3822 0%, #d6aa58 27%, #f0d18c 50%, #8ed0d0 72%, #503522 100%); box-shadow: inset 0 0 0 1px rgba(255, 235, 181, .75), 0 0 12px rgba(111, 209, 220, .52); }
*::-webkit-scrollbar-corner { background: #050c10; }
.tabs::-webkit-scrollbar { display: none; }

/* Seamless live meter sheen ------------------------------------------------
   The old progress animation moved the fill's entire gradient from 150% to
   -110%. Those are different rendered frames, so the infinite animation had
   a visible snap at the repeat boundary. Keep the value bar itself static and
   animate a transparent-ended highlight over it instead. The highlight is
   invisible while it resets, and its first/last keyframes are identical. */
.meter.xp i, .meter.viran i,
.activity-card .meter i, .travel-panel-overlay .meter i,
.travel-status-panel .meter i,
.skill-row.is-training .skill-progress .meter i {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--game-accent) 62%, #081116),
    var(--game-accent) 52%,
    color-mix(in srgb, var(--game-warm) 78%, var(--game-accent)),
    color-mix(in srgb, var(--game-accent) 62%, #081116));
  background-size: 100% 100%;
  animation: none !important;
}
.meter.viran i {
  background-image: linear-gradient(90deg, #5b3a8a, #a179e0 52%, #d9c8ff, #5b3a8a);
}
.meter.xp i::after, .meter.viran i::after,
.activity-card .meter i::after, .travel-panel-overlay .meter i::after,
.travel-status-panel .meter i::after,
.skill-row.is-training .skill-progress .meter i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 58%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 27%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 73%, transparent 100%);
  transform: translate3d(-135%, 0, 0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: meterShineSeamless 3.6s linear infinite;
}
@keyframes meterShineSeamless {
  0%, 100% { transform: translate3d(-135%, 0, 0); opacity: 0; }
  10% { opacity: .08; }
  24% { opacity: .42; }
  50% { transform: translate3d(74%, 0, 0); opacity: .86; }
  76% { opacity: .42; }
  90%, 97% { transform: translate3d(185%, 0, 0); opacity: 0; }
}

/* The activity ledger borrows the start-action sweep: it makes a live queue
   readable without flashing the whole card. Each counter gets its own calm
   color so progress, remaining work, and completed work stay distinct. */
.activity-card .queue-ledger span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5px 9px;
  border-color: color-mix(in srgb, var(--game-accent) 55%, var(--line));
  background: linear-gradient(105deg, rgba(24,52,61,.45), rgba(6,13,17,.52));
  box-shadow: inset 0 0 0 1px rgba(129,225,236,.07), 0 2px 7px rgba(0,0,0,.18);
}
.activity-card .queue-ledger span::after,
.skill-row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(105deg, transparent 0%, rgba(132,221,244,0) 26%, rgba(211,246,255,.74) 50%, rgba(232,191,107,0) 74%, transparent 100%);
  transform: translate3d(-135%, 0, 0);
  opacity: 0;
}
.activity-card .queue-ledger span::after {
  inset: 0;
  z-index: 0;
  animation: queueLedgerSweep 3.9s cubic-bezier(.37,0,.63,1) infinite;
}
.activity-card .queue-ledger span > * { position: relative; z-index: 1; }
.activity-card .queue-ledger span:nth-child(2)::after { animation-delay: .55s; background: linear-gradient(105deg, transparent 0%, rgba(115,225,181,0) 26%, rgba(184,255,224,.7) 50%, rgba(115,225,181,0) 74%, transparent 100%); }
.activity-card .queue-ledger span:nth-child(3)::after { animation-delay: 1.1s; background: linear-gradient(105deg, transparent 0%, rgba(240,195,111,0) 26%, rgba(255,239,183,.74) 50%, rgba(240,195,111,0) 74%, transparent 100%); }
@keyframes queueLedgerSweep {
  0%, 15%, 100% { transform: translate3d(-135%, 0, 0); opacity: 0; }
  23% { opacity: .35; }
  48% { transform: translate3d(135%, 0, 0); opacity: 1; }
  58% { opacity: 0; }
}

/* A skill row has to be intentionally inspected before it answers. The
   delayed, once-only sweep avoids triggering across the entire ledger while
   someone is simply moving the mouse to another control. */
.skill-row { position: relative; overflow: hidden; isolation: isolate; }
.skill-row::after { inset: 0; z-index: 0; }
.skill-row > * { position: relative; z-index: 1; }
.skill-row:hover::after { animation: skillRowHoverSweep .82s cubic-bezier(.22,.75,.25,1) 1.15s both; }
@keyframes skillRowHoverSweep {
  0% { transform: translate3d(-135%, 0, 0); opacity: 0; }
  18% { opacity: .08; }
  54% { opacity: .9; }
  100% { transform: translate3d(135%, 0, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meter.xp i::after, .meter.viran i::after,
  .activity-card .meter i::after, .travel-panel-overlay .meter i::after,
  .travel-status-panel .meter i::after,
  .skill-row.is-training .skill-progress .meter i::after,
  .activity-card .queue-ledger span::after, .skill-row::after {
    animation: none !important;
  }
}

/* Visible surface shimmer -------------------------------------------------
   The older idle sheen was technically running, but its opacity was so low
   that it disappeared against the dark panels. These are restrained,
   transparent-ended sweeps: the surface stays readable, while the moving
   highlight is unmistakable. */
.action-button:not(:disabled)::after,
.mini-button:not(:disabled)::after,
.quick-action-button:not(:disabled)::after,
.location-menu-link:not(:disabled)::after,
.tab:not(:disabled)::before,
.record-icon-button:not(:disabled)::after,
.claim-button:not(:disabled)::after,
.ready-button:not(:disabled)::after {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 34%, rgba(255,241,190,.64) 50%, rgba(137,231,239,.24) 57%, transparent 72%);
  background-size: 290% 100%;
  animation: visibleControlShimmer 7.4s cubic-bezier(.37,0,.63,1) infinite;
  opacity: 0;
}
.skill-start-button:not(:disabled)::before { opacity: .3; animation-duration: 6.8s; }
.action-card:not(.activity-card),
.job-codex-card,
.location-player-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.action-card:not(.activity-card)::after,
.job-codex-card::after,
.location-player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 37%, rgba(255,232,162,.22) 49%, rgba(104,213,224,.13) 55%, transparent 69%);
  background-size: 265% 100%;
  animation: visiblePanelShimmer 10.5s cubic-bezier(.37,0,.63,1) infinite;
}
.action-card:not(.activity-card) > *, .job-codex-card > *, .location-player-card > * { position: relative; z-index: 1; }
.action-card:not(.activity-card):hover::after,
.job-codex-card:hover::after,
.location-player-card:hover::after { animation-delay: .35s; }
@keyframes visibleControlShimmer { 0%, 67%, 100% { background-position: 150% 0; opacity: 0; } 73% { background-position: 78% 0; opacity: .2; } 82% { background-position: -45% 0; opacity: .72; } 89% { background-position: -110% 0; opacity: 0; } }
@keyframes visiblePanelShimmer { 0%, 72%, 100% { background-position: 150% 0; opacity: 0; } 78% { background-position: 72% 0; opacity: .08; } 87% { background-position: -52% 0; opacity: .78; } 94% { background-position: -120% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .action-button:not(:disabled)::after, .mini-button:not(:disabled)::after,
  .quick-action-button:not(:disabled)::after, .location-menu-link:not(:disabled)::after,
  .tab:not(:disabled)::before, .record-icon-button:not(:disabled)::after,
  .claim-button:not(:disabled)::after, .ready-button:not(:disabled)::after,
  .skill-start-button:not(:disabled)::before, .action-card:not(.activity-card)::after,
  .job-codex-card::after, .location-player-card::after { animation: none !important; }
}

/* A running gathering/creation action becomes the scene's focal status. It
   sits immediately above the location copy while the existing quick actions
   remain below the illustration. The scene gets breathing room only while
   this status is promoted, so idle locations keep their established height. */
.scene-card.has-promoted-activity { min-height: clamp(470px, 56vh, 680px); }
.scene-card.has-promoted-activity > img { min-height: clamp(470px, 56vh, 680px); }
.scene-card.has-promoted-activity .scene-copy { padding-top: 164px; }
.scene-activity-slot {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 154px;
  left: 18px;
  max-width: 780px;
  pointer-events: auto;
}
.scene-activity-slot .activity-card {
  margin: 0;
  border-color: color-mix(in srgb, var(--game-accent) 58%, var(--game-warm));
  background: linear-gradient(108deg, rgba(4,17,23,.96), rgba(12,35,42,.95) 48%, rgba(15,23,25,.96));
  box-shadow: inset 0 0 0 1px rgba(166,237,235,.12), 0 12px 28px rgba(0,0,0,.52), 0 0 24px color-mix(in srgb, var(--game-accent) 22%, transparent);
}
.scene-activity-slot .activity-card-promoting {
  animation: promotedActivityIn .68s cubic-bezier(.16,1,.3,1) both;
}
.scene-activity-slot .activity-card:not(.activity-card-promoting) { animation: none; }
@keyframes promotedActivityIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.activity-card.returning-to-default { pointer-events: none; }
@media (max-width: 700px) {
  .scene-card.has-promoted-activity { min-height: 555px; }
  .scene-card.has-promoted-activity > img { min-height: 555px; }
  .scene-card.has-promoted-activity .scene-copy { padding-top: 205px; }
  .scene-activity-slot { bottom: 194px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-activity-slot .activity-card-promoting { animation: none; }
}

/* Modal close buttons are viewport-side controls, never content-flow controls.
   A later generic button rule used to reset .modal-close to position:relative,
   which put the circular X back into #modalBody and over the first title. */
.modal-box > .modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  margin: 0 !important;
  float: none !important;
}
.modal-box > #modalBody { min-width: 0; }

/* Compact composer + full chat reader. The scene keeps only a quiet,
   one-line feed and its composer; the old world-only chat panel is now a
   deliberate reader opened on demand. */
.quick-chat-form { grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) 44px auto; }
.quick-chat-form .icon-button { width: 44px; height: 44px; }
.quick-chat-form.party-chat-form { grid-template-columns: minmax(240px, 1fr) 44px max-content; }
.quick-chat-form.party-chat-form #quickChatInput { width: 100%; }
.quick-chat-buttons { flex-wrap: nowrap; }
.quick-chat-buttons .mini-button { min-height: 44px; white-space: nowrap; }
.chat-open-button { min-width: 92px; padding-inline: 12px; }
.modal-box.chat-modal { width: min(1120px, 94vw); height: min(calc(100dvh - 40px), 920px); max-height: calc(100dvh - 40px); overflow: hidden; display: flex; flex-direction: column; padding: 22px; background: radial-gradient(circle at 8% 0, rgba(109,227,224,.1), transparent 28%), radial-gradient(circle at 94% 16%, rgba(230,195,126,.09), transparent 26%), linear-gradient(145deg, #101d22, #070d11 76%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-accent) 38%, var(--line)), 0 30px 90px rgba(0,0,0,.72), 0 0 34px rgba(79,184,255,.14); }
.modal-box.chat-modal > #modalBody { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.chat-modal-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; min-height: 0; flex: 1 1 auto; }
.chat-modal-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 2px 50px 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--game-accent) 32%, var(--line)); }
.chat-modal-heading .modal-title { margin: 3px 0 0; font-size: clamp(24px, 3vw, 34px); }
.chat-modal-heading .muted { margin: 5px 0 0; }
.chat-modal-heading .chat-heading-actions { align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.modal-box.chat-modal #chat { height: auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: auto; margin-top: 0; padding: 14px 16px 30px; scroll-padding-bottom: 30px; border: 1px solid color-mix(in srgb, var(--game-accent) 30%, var(--line)); border-radius: 9px; background: linear-gradient(180deg, rgba(2,9,12,.84), rgba(9,22,27,.68)); box-shadow: inset 0 0 32px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.modal-box.chat-modal #chat .chat-log-line { padding: 2px 0; border: 0; line-height: 1.45; }
.dungeon-condition-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.dungeon-condition-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--game-warm) 38%, var(--line)); border-radius: 999px; background: rgba(13,24,25,.72); color: var(--game-warm-bright); font-size: 11px; }
.dungeon-condition-chip small { color: var(--muted); font-size: 10px; }
.chat-modal-form { display: grid; grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) 31px; gap: 6px; margin-top: 0; }
#chatForm.chat-modal-form input { min-width: 0; height: 38px; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--line)); border-radius: 6px; background: rgba(0,0,0,.2); color: var(--ink); padding: 0 11px; font-size: 14px; }
#chatForm.chat-modal-form .icon-button { width: 38px; height: 38px; }
.activity-card .activity-skill-icon { width: 40px; height: 40px; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; overflow: visible; }
.activity-card .activity-skill-icon .training-status-dock { width: 40px; height: 40px; min-width: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; overflow: visible; }
.activity-card .activity-skill-icon .animated-skill-art { width: 36px; height: 36px; border-radius: 9px; }

@media (max-width: 700px) {
  .quick-chat-form { grid-template-columns: minmax(92px, 1fr) minmax(0, 1.7fr) 44px auto; }
  .quick-chat-form.party-chat-form { grid-template-columns: minmax(0, 1fr) 44px; }
  .quick-chat-form.party-chat-form .quick-chat-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-box.chat-modal { width: min(100%, 680px); height: min(calc(100dvh - 20px), 920px); max-height: calc(100dvh - 20px); padding: 15px; }
  .chat-modal-heading { align-items: start; flex-direction: column; gap: 10px; padding-right: 46px; }
  .chat-modal-heading .chat-heading-actions { width: 100%; justify-content: flex-start; }
  .modal-box.chat-modal #chat { padding-inline: 9px; }
}
@media (max-width: 560px) {
  .quick-chat-form { grid-template-columns: minmax(76px, 1fr) minmax(0, 1.35fr) 44px 43px; }
  .quick-chat-form.party-chat-form { grid-template-columns: minmax(0, 1fr) 44px; }
  .chat-modal-form { grid-template-columns: minmax(92px, 1fr) minmax(0, 1.6fr) 38px; }
  .modal-box.chat-modal #chat { min-height: 0; }
}

/* Wayfarer rails can be dismissed together (see the single "Panels" toggle
   in the account menu, next to Stats/Options - #who in index.html, wired to
   toggleBothRails in app.js) so the world/combat canvas can become the
   entire desktop. Per-rail floating arrow buttons used to live inside each
   rail for this, in up to four repeated copies per side to stay reachable
   on a long scrolling page; every positioning scheme tried for them
   (percentage-of-stretched-rail-height, JS-measured position:fixed, plain
   position:absolute) either scrolled out of reach or, confirmed by a real
   screenshot, ended up floating detached from both rails entirely. One
   button in the always-visible topbar sidesteps the whole class of bug -
   mobile keeps the normal stacked layout regardless. */
.rail { position: relative; }
#primary[data-left-rail="collapsed"] { grid-template-columns: 0 minmax(0, 1fr) var(--right-rail-width); }
#primary[data-right-rail="collapsed"] { grid-template-columns: var(--left-rail-width) minmax(0, 1fr) 0; }
#primary[data-left-rail="collapsed"][data-right-rail="collapsed"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
#primary[data-left-rail="collapsed"] > .left-rail,
#primary[data-right-rail="collapsed"] > .right-rail { width: 0; min-width: 0; padding: 0; border: 0; overflow: hidden; }
#primary[data-left-rail="collapsed"] > .left-rail > *,
#primary[data-right-rail="collapsed"] > .right-rail > * { display: none !important; }
@media (max-width: 1120px) {
  #primary[data-left-rail="collapsed"] > .left-rail, #primary[data-right-rail="collapsed"] > .right-rail { width:auto; padding:initial; overflow:visible; }
  #primary[data-left-rail="collapsed"] > .left-rail > *, #primary[data-right-rail="collapsed"] > .right-rail > * { display: revert !important; }
}

/* The Action Box owns a nested animated skill badge; never animate or size its outer icon as a generic activity glyph. */
.activity-card .activity-icon.activity-skill-icon { animation: none !important; transform: none !important; }
.activity-card .activity-icon.activity-skill-icon > .animated-skill-art > img { width:100%; height:100%; min-height:0; aspect-ratio:1; object-fit:cover; }

/* Fleeting opportunities --------------------------------------------------
   A small world-mystery surface that never pauses ordinary training. The
   player can notice and interact; if they walk away it resolves on its own. */
.ambient-opportunity {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start;
  margin-top:10px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--game-warm) 48%, var(--line));
  border-radius:9px; background:radial-gradient(circle at 0 0, rgba(217,147,82,.13), transparent 44%), rgba(4,12,16,.72);
  box-shadow:inset 0 0 20px rgba(255,210,128,.035);
}
.ambient-opportunity-icon { width:38px; height:38px; display:grid; place-items:center; }
.ambient-opportunity-icon .animated-skill-art { width:36px; height:36px; }
.ambient-opportunity-copy { min-width:0; display:grid; gap:3px; }
.ambient-opportunity-copy > small { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.ambient-opportunity-copy > b { color:var(--warm-bright, #f0cc8d); font-size:14px; }
.ambient-opportunity-copy > p { margin:1px 0 4px; color:var(--ink-soft, var(--ink)); font-size:12px; line-height:1.4; }
.ambient-opportunity-actions { display:flex; flex-wrap:wrap; gap:6px; }
.ambient-opportunity-actions .mini-button { padding:5px 9px; }
.ambient-opportunity-actions .ambient-bold { border-color:color-mix(in srgb, var(--game-warm) 66%, var(--line)); }
.ambient-opportunity-actions .ambient-share { margin-left:auto; opacity:.75; }
.ambient-opportunity-actions .ambient-share:hover { opacity:1; }
.ambient-opportunity.compact { margin-top:8px; padding:8px 10px; }
.ambient-opportunity.compact .ambient-opportunity-icon { width:32px; height:32px; }
.ambient-opportunity.compact .ambient-opportunity-icon .animated-skill-art { width:30px; height:30px; }
@media (prefers-reduced-motion: reduce) { .ambient-opportunity .animated-skill-art, .ambient-opportunity .animated-skill-art::before, .ambient-opportunity .animated-skill-art::after { animation:none!important; } }

/* Collapsed rails are a desktop affordance. Responsive layouts always restore
   the ordinary stacked rails regardless of a desktop preference saved in localStorage. */
@media (max-width:1120px) and (min-width:841px) {
  #primary[data-left-rail], #primary[data-right-rail],
  #primary[data-left-rail="collapsed"], #primary[data-right-rail="collapsed"],
  #primary[data-left-rail="collapsed"][data-right-rail="collapsed"] {
    grid-template-columns:minmax(218px,244px) minmax(0,1fr) !important;
    grid-template-areas:"left world" "right right" !important;
  }
  #primary[data-left-rail="collapsed"] > .left-rail,
  #primary[data-right-rail="collapsed"] > .right-rail { width:auto!important; min-width:0!important; padding:initial!important; border:initial!important; overflow:visible!important; }
}
@media (max-width:840px) {
  #primary[data-left-rail], #primary[data-right-rail],
  #primary[data-left-rail="collapsed"], #primary[data-right-rail="collapsed"],
  #primary[data-left-rail="collapsed"][data-right-rail="collapsed"] {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"world" "left" "right" !important;
  }
  #primary[data-left-rail="collapsed"] > .left-rail,
  #primary[data-right-rail="collapsed"] > .right-rail { width:auto!important; min-width:0!important; padding:initial!important; border:initial!important; overflow:visible!important; }
  #primary[data-left-rail="collapsed"] > .left-rail > *,
  #primary[data-right-rail="collapsed"] > .right-rail > * { display:revert!important; }
}

/* Magical wood is an optional creation catalyst, never a recipe requirement.
   Stacked (label above, select below, full width) instead of a side-by-side
   grid -- the select was narrow enough in the two-column layout that its
   dropdown visually clipped against the card's own border. Letting the
   select take the full card width and simply pushing the card taller avoids
   the whole class of clipping instead of fighting it with stacking tricks. */
.wood-catalyst-picker { display:block; margin:8px 0 10px; padding:8px 10px; border:1px solid rgba(217,147,82,.22); border-radius:7px; background:rgba(217,147,82,.045); }
.wood-catalyst-picker > span { display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--warm-bright,#e8c27f); }
.wood-catalyst-picker small { display:block; color:var(--muted); font-size:10px; font-weight:500; }
.wood-catalyst-picker select { min-width:0; width:100%; }
.active-wood-catalyst { display:block; margin-top:6px; color:var(--warm-bright,#e8c27f); font-size:11px; }

/* Construction becomes a real party support role without adding a new class. */
.construction-wall-console { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin:12px 0; padding:12px 14px; border:1px solid color-mix(in srgb, #b89162 58%, var(--line)); border-radius:9px; background:linear-gradient(110deg,rgba(88,60,35,.18),rgba(7,17,20,.82)); }
.construction-wall-console p { margin:3px 0; }
.construction-wall-console .wall-hp { max-width:520px; margin-top:7px; }
.construction-wall-console .wall-hp i { background:linear-gradient(90deg,#8b6947,#d8bb7d); }
.build-wall-button { min-width:132px; }
@media(max-width:650px){.construction-wall-console{grid-template-columns:1fr}.build-wall-button{width:100%}}

/* Fight Arena uses the same live combat choices as normal combat, but keeps
   the Warden's large dedicated presentation instead of dropping back to the
   ordinary encounter card. */
.fight-arena-plan{margin:16px 0;padding:14px;border:1px solid color-mix(in srgb,var(--game-accent) 34%,transparent);border-radius:14px;background:color-mix(in srgb,var(--game-panel) 88%,#000 12%)}
.fight-arena-plan-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}.fight-arena-plan-head h3{margin:0}.fight-arena-plan-head>span{font-size:.88rem;color:var(--muted)}
.fight-arena-plan-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:end}.fight-arena-plan-controls label{display:grid;gap:4px;min-width:170px;font-size:.78rem;color:var(--muted)}.fight-arena-plan-controls select{min-height:36px}
.fight-arena-food{display:grid;gap:8px;margin-top:12px}.fight-arena-food>span{font-size:.78rem;color:var(--muted)}.arena-plan-empty{align-self:center;max-width:320px;font-size:.78rem;color:var(--muted)}


/* Action Box skill art hardening ------------------------------------------------
   The Action Box is promoted into the location scene. Its skill badge therefore
   intentionally does NOT contain an <img>: scene/HD-art image selectors cannot
   resize, crop, or stretch this square artwork into a strip. */
.activity-card .activity-icon.activity-skill-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
}
.activity-card .action-box-skill-art {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible;
}
.activity-card .action-box-skill-art-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  max-width: 38px;
  max-height: 38px;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  filter: saturate(1.18) contrast(1.05) drop-shadow(0 2px 4px rgba(0,0,0,.8));
  animation: trainingArtBreathe var(--training-speed, 3.2s) ease-in-out infinite;
  transform-origin: 50% 72%;
  pointer-events: none;
}
.activity-card .action-box-skill-art i { z-index: 3; }
html[data-motion="reduced"] .activity-card .action-box-skill-art-image { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .activity-card .action-box-skill-art-image { animation: none !important; }
}
html[data-motion="full"] .activity-card .action-box-skill-art-image {
  animation: trainingArtBreathe var(--training-speed, 3.2s) ease-in-out infinite !important;
}


/* V5 resolution resilience -------------------------------------------------
   1080p/1440p remain the authored target. Larger display presets scale the
   same interface rather than spawning a parallel layout, while small screens
   reflow into document flow. */
html[data-ui-scale="1.3"] .left-rail,
html[data-ui-scale="1.5"] .left-rail,
html[data-ui-scale="2"] .left-rail,
html[data-ui-scale="2.5"] .left-rail { max-height:none; }
html[data-ui-scale="1.5"] .equip-inventory-panel .split-columns,
html[data-ui-scale="2"] .equip-inventory-panel .split-columns,
html[data-ui-scale="2.5"] .equip-inventory-panel .split-columns { grid-template-columns:minmax(0,1fr); }
html[data-ui-scale="1.5"] .equip-inventory-panel .split-half + .split-half,
html[data-ui-scale="2"] .equip-inventory-panel .split-half + .split-half,
html[data-ui-scale="2.5"] .equip-inventory-panel .split-half + .split-half { padding-top:9px; padding-left:0; border-top:1px solid var(--line); border-left:0; }
@media (min-width: 3000px) { body { max-width: none; } .game-grid { min-height: calc(100vh - 62px); } }
@media (min-width: 7000px) { :root { --left-rail-width: clamp(330px,16vw,430px); --right-rail-width:minmax(430px,1fr); --center-min-width:minmax(720px,1.6fr); } }
@media (max-width: 800px) { html { zoom:min(var(--ui-scale,1),1); } }
@media (max-width: 560px) { .left-rail,.right-rail { grid-template-columns:minmax(0,1fr)!important; } .map-stage { min-height:260px; } }

@media (max-width: 420px), (max-height: 600px) and (max-width: 800px) { body { font-size:14px; } .modal-box { padding:10px; } .topbar { gap:4px; } }

/* Selected Atlas nodes should look deliberately selected, not merely have a
   dashed outline. The aura is SVG-safe and remains visible at any map zoom. */
.map-node.browsing > circle:first-of-type {
  stroke: #77e9ff !important;
  stroke-width: 4px !important;
  stroke-dasharray: 5 4;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(119,233,255,.95)) drop-shadow(0 0 14px rgba(105,146,255,.82));
  animation: atlasSelectionAura 1.55s ease-in-out infinite !important;
}
@keyframes atlasSelectionAura { 0%,100% { stroke-opacity:.72; transform:scale(1); } 50% { stroke-opacity:1; transform:scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .map-node.browsing > circle:first-of-type { animation:none!important; transform:scale(1.08); } }

/* Vivid mode -- a purely cosmetic global color boost, "just for fun." No
   gameplay meaning, off by default, and never combined with Classic Mode
   (see applyInterfacePreferences, which forces vivid off there). Applied to
   #game/#modalOverlay/#toast individually rather than <html> or <body> so it
   never creates a new containing block for any position:fixed descendant
   (a filter on an ancestor of a fixed element re-anchors it to that
   ancestor instead of the viewport -- these three are the actual fixed/
   top-level surfaces, so each gets the filter directly on itself instead).
*/
html[data-vivid="on"] #game,
html[data-vivid="on"] #modalOverlay,
html[data-vivid="on"] #toast {
  filter: saturate(1.35) contrast(1.08) brightness(1.03);
}

/* Accessibility palette. Statuses remain readable in monochrome because
   their labels and shapes stay intact, while their hues no longer rely on a
   red versus green distinction. */
html[data-colorblind="on"] {
  --game-accent: #55b9e8;
  --game-warm: #f2be4f;
  --game-warm-bright: #ffe093;
  --danger: #e88745;
  --success: #54bfa0;
  --weakness: #a98ae8;
  --resisted: #e6c85c;
  --set-color: #a98ae8;
  --set-color-dim: #695e9d;
}
html[data-colorblind="on"] :is(.success, .danger, .weakness, .resisted, .combat-log .heal, .combat-log .damage) {
  font-weight: 800;
}

/* The moving blue decoration was visually mistaken for map activity. The
   minimap now reserves motion for actual travel markers only. */
.minimap-wrap::before,
.minimap-wrap::after {
  content: none !important;
  animation: none !important;
}

/* Last word in the cascade for the three user-selectable motion profiles. */
html[data-motion="fade"] .tabpage:not([hidden]),
html[data-motion="fade"] .tabpage:not([hidden]) > .section-heading,
html[data-motion="fade"] .tab.active .button-emblem,
html[data-motion="fade"] .tab.active::after,
html[data-motion="fade"] .scene-location-masthead,
html[data-motion="fade"] .map-node.current circle,
html[data-motion="fade"] .map-node.browsing circle,
html[data-motion="fade"] .player-marker.travelling,
html[data-motion="fade"] .route.active,
html[data-motion="fade"] .training-status-dock,
html[data-motion="fade"] .skill-row.is-training,
html[data-motion="fade"] .skill-row.is-training .skill-ledger-art,
html[data-motion="fade"] #inventory .inventory-tile-icon,
html[data-motion="fade"] #tab-inventory .inventory-tile-icon,
html[data-motion="fade"] #equipment .equipment-icon-well,
html[data-motion="fade"] #tab-equipment .equipment-icon-well,
html[data-motion="fade"] .map-skill-icon-btn,
html[data-motion="fade"] .map-skill-icon-btn-img,
html[data-motion="fade"] .minimap-skill-icon-img,
html[data-motion="fade"] .minimap-skill-icon-glyph { animation: gentleFade 4.8s ease-in-out infinite !important; }

html[data-motion="full"][data-shimmer="standard"] .tab.active .button-emblem,
html[data-motion="full"][data-shimmer="standard"] .tab.active::after,
html[data-motion="full"][data-shimmer="standard"] .scene-location-masthead,
html[data-motion="full"][data-shimmer="standard"] .map-node.current circle,
html[data-motion="full"][data-shimmer="standard"] .map-node.browsing circle,
html[data-motion="full"][data-shimmer="standard"] .player-marker.travelling,
html[data-motion="full"][data-shimmer="standard"] .route.active,
html[data-motion="full"][data-shimmer="standard"] .training-status-dock,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training,
html[data-motion="full"][data-shimmer="standard"] .skill-row.is-training .skill-ledger-art,
html[data-motion="full"][data-shimmer="standard"] #inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #tab-inventory .inventory-tile-icon,
html[data-motion="full"][data-shimmer="standard"] #equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] #tab-equipment .equipment-icon-well,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn,
html[data-motion="full"][data-shimmer="standard"] .map-skill-icon-btn-img,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-img,
html[data-motion="full"][data-shimmer="standard"] .minimap-skill-icon-glyph { animation: none !important; }

/* Full keeps the Wayfarer Record's active-skill signal alive. This is the
   useful working icon, not the broad shimmer applied to maps, inventory, or
   equipment. Enhanced uses the same signal, so Full should not make the
   current activity look static. */
html[data-motion="full"][data-shimmer="standard"] .training-status-dock { animation: trainingDockSignal 1.9s ease-in-out infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .training-status-dock .animated-skill-art { animation: trainingBadgeLift 2.15s ease-in-out infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .training-status-dock .animated-skill-art::before { animation: trainingRingOrbit 2.6s linear infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .training-status-dock .animated-skill-art img { animation: trainingArtVisible var(--training-speed, 3.2s) ease-in-out infinite !important; }
html[data-motion="full"][data-shimmer="standard"] .training-status-dock .animated-skill-art i { animation: trainingSparkVisible 1.05s ease-in-out infinite !important; }

/* Keep the compact rail split authoritative even when a larger UI-scale
   preference adds a later one-column safety rule. */
@media (min-width: 841px) {
  html[data-ui-scale] .right-rail .equip-inventory-panel .split-columns,
  html:not([data-ui-scale]) .right-rail .equip-inventory-panel .split-columns {
    grid-template-columns: minmax(154px, .52fr) minmax(0, 1.48fr) !important;
  }

  html[data-ui-scale] .right-rail .equip-inventory-panel .split-half + .split-half,
html:not([data-ui-scale]) .right-rail .equip-inventory-panel .split-half + .split-half {
    padding-top: 0;
    padding-left: 8px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* The chat reader restores one message anchor itself. */
.quick-chat-log, .chat-modal-log { overflow-anchor: none; }
.admin-chat-clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.admin-chat-list {
  display: grid;
  gap: 8px;
  max-height: 62vh;
  overflow: auto;
  padding-right: 4px;
}

.admin-chat-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, #09121e);
}

.admin-chat-row header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-chat-row time {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.admin-chat-row p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nine-sigil-tracker {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, #10202b 92%, transparent), color-mix(in srgb, #060b12 96%, transparent));
}

.nine-sigil-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.nine-sigil-heading h3,
.nine-sigil-heading p {
  margin: 2px 0;
}

.nine-sigil-list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.nine-sigil-chip {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 5px;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 6px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.nine-sigil-chip span {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-size: 17px;
}

.nine-sigil-chip b {
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 500;
}

.nine-sigil-chip.owned {
  border-color: color-mix(in srgb, var(--gold) 65%, var(--line));
  color: var(--text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 18%, transparent);
}

.nine-sigil-chip.owned span {
  color: var(--gold);
}

.nine-wish-reveal {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}

.nine-wish-reveal h3,
.nine-wish-reveal p {
  margin: 3px 0;
}

.nine-wish-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.nine-wish-button {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 88%, #21170b);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.nine-wish-button:hover,
.nine-wish-button:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 20%, transparent);
}

.nine-wish-button small {
  color: var(--muted);
  line-height: 1.3;
}

@media (max-width: 800px) {
  .nine-sigil-list,
  .nine-wish-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mail is an inventory-like workspace, not a narrow confirmation dialog.
   Give its attachment picker the same visual room as Vault/Faction storage
   so item art and owned quantities remain readable. */
.modal-box.mail-modal {
  width: min(1120px, 96vw);
  max-height: min(92vh, 940px);
}
.mail-modal #modalBody {
  min-width: 0;
}
.mail-modal .mail-attach-grid {
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
.mail-attach-tile {
  grid-template-rows: 74px auto auto auto;
}
.mail-attach-tile-qty {
  position: static !important;
  justify-self: center;
  min-width: 6ch;
  margin-top: 1px;
}
.mail-attach-name {
  display: grid;
  gap: 2px;
}
.mail-attach-name b {
  max-width: 100%;
  overflow-wrap: anywhere;
  font: 600 12px var(--serif);
}
.mail-form-error {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #ff766d 62%, var(--line));
  border-radius: 6px;
  background: rgba(150, 36, 30, .18);
  color: #ff9b91;
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 780px) {
  .modal-box.mail-modal {
    width: min(100%, 760px);
  }
}

/* Forum directory pass: keep the authored forum structure close to a real
   board index. Announcements are a quiet, permanent public section rather
   than a repeated alert on every board and thread. */
.forum-announcements {
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(45,33,19,.52), rgba(8,15,18,.72));
}
.forum-announcements-heading { align-items: flex-start; }
.forum-announcements-heading > div { min-width: 0; }
.forum-announcements-heading .eyebrow { margin: 0 0 2px; }
.forum-announcements-heading h2 { font-size: 20px; }
.forum-announcements-heading .muted { margin: 3px 0 0; font-size: 11px; }
.forum-announcement-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(218,161,84,.22); border-radius: 5px; background: rgba(0,0,0,.18); }
.forum-announcement-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: start; gap: 9px; padding: 8px 10px; background: rgba(8,15,18,.44); }
.forum-announcement-row + .forum-announcement-row { border-top: 1px solid rgba(218,161,84,.14); }
.forum-announcement-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--game-warm); border-radius: 50%; color: var(--game-warm-bright); font: 900 12px var(--sans); }
.forum-announcement-copy { min-width: 0; }
.forum-announcement-copy > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.forum-announcement-copy b { color: var(--ink); font: 600 14px var(--serif); overflow-wrap: anywhere; }
.forum-announcement-copy small { color: var(--muted); font-size: 10px; }
.forum-announcement-copy p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-index-section + .forum-index-section { margin-top: 14px; }
.forum-index-category { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 0; padding: 7px 10px; border-radius: 5px 5px 0 0; }
.forum-index-category small { color: var(--muted); font-size: 10px; }
.forum-index-table { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 5px 5px; overflow: hidden; }
.forum-index-table-head { display: grid; grid-template-columns: minmax(0,1fr) 90px 90px 220px; gap: 12px; padding: 5px 12px; background: rgba(0,0,0,.22); color: var(--muted); font: 800 10px var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.forum-index-table-head span:nth-child(2), .forum-index-table-head span:nth-child(3) { text-align: center; }
.forum-index-row { border: 0; border-top: 1px solid rgba(116,157,164,.16); border-radius: 0 !important; background: rgba(8,15,18,.58); }
.forum-index-row:first-of-type { border-top: 0; }
.forum-index-row:hover { background: rgba(30,54,58,.56); }
.forum-index-board b { font-size: 15px; }
.forum-index-board small { font-size: 11px; }
.forum-member-link, .forum-member-profile { border: 0; background: transparent; color: inherit; cursor: pointer; }
.forum-member-link { padding: 0; color: var(--game-accent); font: inherit; text-align: left; }
.forum-member-link:hover, .forum-member-link:focus-visible { color: var(--game-warm-bright); text-decoration: underline; }
.forum-member-profile { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 0; }
.forum-member-profile.plain { cursor: default; }
.forum-member-profile-art { display: grid; place-items: center; min-height: 60px; }
.forum-member-profile b { max-width: 100%; color: var(--game-warm-bright); font: 600 15px var(--serif); overflow-wrap: anywhere; }
.forum-member-profile small { color: var(--game-accent); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.forum-member-profile:hover b, .forum-member-profile:focus-visible b { color: var(--ink); text-decoration: underline; }
.forum-member-profile .forum-post-avatar { margin-bottom: 0; }
.forum-member-modal { min-width: min(100%, 520px); }
.forum-member-hero { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.forum-member-avatar { display: grid; place-items: center; width: 74px; height: 74px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--game-warm) 60%, var(--line)); border-radius: 10px; background: radial-gradient(circle, rgba(218,161,84,.18), rgba(0,0,0,.25)); }
.forum-member-avatar .forum-post-avatar { width: 62px; height: 62px; }
.forum-member-hero h2 { margin: 2px 0 7px; }
.forum-member-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.forum-member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0; }
.forum-member-stats > div { display: grid; gap: 2px; min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.16); text-align: center; }
.forum-member-stats b { color: var(--game-warm-bright); font: 600 16px var(--serif); overflow-wrap: anywhere; }
.forum-member-stats small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.forum-member-signature { margin: 0 0 13px; padding: 10px 12px; border-left: 2px solid var(--game-warm); background: rgba(0,0,0,.14); color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.forum-member-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.forum-member-archived { color: var(--muted); }
.forum-new-thread input, .forum-new-thread textarea { font-size: 13px; }
.forum-new-thread textarea { min-height: 150px; }
.forum-list .forum-toolbar h2 { font-size: 21px; }
.forum-thread-header-copy h2 { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .forum-index-table-head { display: none; }
  .forum-index-category { align-items: flex-start; flex-direction: column; gap: 2px; }
  .forum-index-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "board board" "stats lastpost"; row-gap: 6px; }
  .forum-index-board { grid-area: board; }
  .forum-index-stat { grid-area: stats; display: inline-flex; gap: 4px; justify-self: start; }
  .forum-index-lastpost { grid-area: lastpost; justify-self: end; text-align: right; }
  .forum-announcement-row { grid-template-columns: 22px minmax(0,1fr); }
  .forum-announcement-row > .mini-button { grid-column: 2; justify-self: start; }
  .forum-member-stats { grid-template-columns: 1fr; }
}