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); }

* { 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::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 6px 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 { padding: 30px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(14, 23, 28, .87); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.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); }
.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; }
}
.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-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; }
.house-item-row { min-width: 0; min-height: 57px; margin-bottom: 7px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,.27); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.house-item-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--game-warm) 45%, var(--line)); background: rgba(20,28,29,.68); }
.house-item-row .item-icon { width: 38px; height: 38px; flex: 0 0 auto; }
.house-item-row .item-icon > * { width: 100%; height: 100%; }
.house-item-copy { min-width: 0; flex: 1 1 auto; }
.house-item-copy b { display: block; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.house-item-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.house-qty { flex: 0 0 auto; }
.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; }
  .house-item-row { flex-wrap: wrap; }
  .house-item-copy { min-width: calc(100% - 60px); }
  .house-item-row .qty-custom-group { margin-left: 46px; }
}
@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: var(--game-warm); 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: 14px; }

/* 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: .7fr 1.3fr; 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); }
.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; }
.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; }
.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.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; }
.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; }
.scene-chat-feed { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-height: 0; transition: opacity .6s ease, max-height .6s ease; overflow: hidden; }
.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; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.35; animation: chatLineIn .35s ease-out; }
.scene-chat-line i { flex: 0 0 auto; }
.scene-chat-line b { flex: 0 0 auto; color: var(--game-warm); font-weight: 800; white-space: nowrap; }
.scene-chat-line span { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
.scene-chat-feed .scene-chat-line:nth-child(1) { opacity: .55; }
.scene-chat-feed .scene-chat-line:nth-child(2) { opacity: .68; }
.scene-chat-feed .scene-chat-line:nth-child(3) { opacity: .82; }
.scene-chat-feed .scene-chat-line:nth-child(4) { opacity: .93; }
.scene-chat-feed .scene-chat-line:nth-child(5) { opacity: 1; }
/* 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: 3px; }
.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: 32px; border-radius: 6px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); padding: 0 10px; font-size: 13px; }
.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); }
.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); }
.travel-status-panel .meter { height: 4px; }
.atlas-map-stage { margin-bottom: 18px; }
.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-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-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: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 13px var(--serif); line-height: 1.25; }
.action-title small { color: var(--game-accent); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.level-chip { border: 1px solid var(--line); border-radius: 4px; color: var(--muted); padding: 2px 5px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.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; margin: 10px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.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)); }
.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; }
.minimap-wrap.dense .minimap-scroll { overflow: auto; }
.world-map.mini { 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-wrap.dense .world-map.mini { width: 145%; max-width: none; height: 145%; }
.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; }
.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; 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: hidden; font: 600 14px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.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; }
.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); }
.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; }
.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(560px, 1fr) 270px; 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 { 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; }
.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(110px, 1fr) 36px minmax(125px, 1fr) 70px minmax(155px, .8fr); align-items: center; gap: 9px; min-height: 39px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.skill-name b { display: block; font: 600 14px var(--serif); }
.skill-name small { display: block; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.skill-level { color: var(--game-warm); font: 600 20px var(--serif); text-align: center; }
.skill-progress small { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.skill-xp { color: var(--muted); font-size: 13px; text-align: right; }
.skill-window { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.skill-window > span { min-width: 0; padding: 3px 4px; border-left: 1px solid var(--line); }
.skill-window small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.skill-window b { display: block; color: var(--game-accent); font-size: 13px; }
.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; }
.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-xp { color: var(--game-accent); font: 600 15px var(--serif); }

/* Modal windows (mail, clan, options, housing) */
.modal-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(5,3,2,.72); backdrop-filter: blur(3px); }
.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, 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; }
@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-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; }
.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, .house-item-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-member-row b { margin-right: 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-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; }
.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: 85; 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: 80; 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; }
  .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-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; 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); }
.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); }

/* The always-visible "who's here" strip under Quick Actions. */
.location-players-panel[hidden] { display: none; }
.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); }
.player-name-button { border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 13px var(--serif); padding: 2px 4px; border-radius: 4px; }
.player-name-button:hover { color: var(--game-warm-bright); background: rgba(255,255,255,.05); }
.clan-tag-chip { border: 1px solid var(--line); background: rgba(0,0,0,.2); border-radius: 4px; color: var(--game-accent); cursor: pointer; font-size: 10px; font-weight: 800; padding: 1px 5px; flex: 0 0 auto; }
.clan-tag-chip:hover { border-color: var(--game-accent); }
.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; }
@media (max-width: 640px) { .trade-columns { grid-template-columns: 1fr; } }
.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:26px minmax(0,1fr); column-gap:7px; align-items:center; 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 img { width:24px; height:24px; object-fit:contain; grid-row:1 / 3; }
.job-mastery-summary b,.job-mastery-summary small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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 { width:25px; height:25px; object-fit:contain; }
.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)); }
.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: hidden; 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; }
/* 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-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.sovereign { position: relative; isolation: isolate; overflow: visible; border-radius: 8px; background-position-y: 0; image-rendering: auto; filter: drop-shadow(0 0 3px #d8e6ff) drop-shadow(0 0 7px rgba(120,150,210,.75)) drop-shadow(0 0 10px rgba(20,22,32,.85)); }
.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 sovereignRadiance { 0%, 100% { filter: drop-shadow(0 0 2px #e4edff) drop-shadow(0 0 5px rgba(110,140,200,.7)) drop-shadow(0 0 7px rgba(15,17,26,.7)); } 35% { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px rgba(160,185,235,.9)) drop-shadow(0 0 12px rgba(8,9,15,.9)); } 62% { filter: drop-shadow(0 0 3px #d2ddf5) drop-shadow(0 0 7px rgba(90,115,175,.8)) drop-shadow(0 0 13px rgba(20,22,32,.8)); } }
@keyframes skullPulse { 0%, 100% { opacity: .76; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* Height scales with the Options -> Chat "feed lines" choice (see
   --chat-feed-lines, set in app.js) instead of a fixed row count -- it used
   to hard-code 5 (then a themed override hard-coded a shorter 4-ish), so
   picking a bigger number in Options had no visible effect at all. */
.quick-chat-log { height: calc(var(--chat-feed-lines, 8) * 27px + 10px); min-height: 0; max-height: 260px; margin: 6px 0 10px; overflow-y: auto; 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.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 24px; min-height: 24px; padding: 3px 7px; }
.scene-chat-line i { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 900; }
.quick-chat-empty { margin: 4px 2px; font-size: 12px; }

/* Channel identities stay visible in both the small feed and the full transcript. */
.channel-global { --channel-color: #eee8dc; }
.channel-trade { --channel-color: #e1b94f; }
.channel-clan { --channel-color: #62a9e8; }
.channel-party { --channel-color: #65c77a; }
.channel-raid { --channel-color: #b6ee46; }
.channel-divine { --channel-color: #ffd76a; }
.channel-star { --channel-color: #f0d878; }
.channel-hell { --channel-color: #d1382a; }
.channel-mod { --channel-color: #ed5b50; }
.channel-dev { --channel-color: #c183ff; }
.channel-whisper { --channel-color: #9fd6ff; }
.chat-channel-badge, .scene-chat-line.channel-global i, .scene-chat-line.channel-trade i, .scene-chat-line.channel-clan i, .scene-chat-line.channel-party i, .scene-chat-line.channel-raid i, .scene-chat-line.channel-divine i, .scene-chat-line.channel-star i, .scene-chat-line.channel-hell i, .scene-chat-line.channel-mod i, .scene-chat-line.channel-dev i, .scene-chat-line.channel-whisper i { color: var(--channel-color); }
.scene-chat-line.channel-global b, .scene-chat-line.channel-global span { color: #eee8dc; }
.scene-chat-line.channel-trade b, .scene-chat-line.channel-trade span { color: #e1b94f; }
.scene-chat-line.channel-clan b, .scene-chat-line.channel-clan span { color: #62a9e8; }
.scene-chat-line.channel-party b, .scene-chat-line.channel-party span { color: #65c77a; }
.scene-chat-line.channel-raid b, .scene-chat-line.channel-raid span { color: #b6ee46; }
.scene-chat-line.channel-whisper b, .scene-chat-line.channel-whisper span { color: #9fd6ff; }
.scene-chat-line.channel-divine b, .scene-chat-line.channel-divine span { color: #ffd76a; text-shadow: 0 0 8px rgba(255,215,106,.35); }
.scene-chat-line.channel-star b, .scene-chat-line.channel-star span { color: #f0d878; }
.scene-chat-line.channel-hell b, .scene-chat-line.channel-hell span { color: #d1382a; text-shadow: 0 0 8px rgba(209,56,42,.35); }
.scene-chat-line.channel-mod b, .scene-chat-line.channel-mod span { color: #ed5b50; }
.scene-chat-line.channel-dev b, .scene-chat-line.channel-dev span { color: #c183ff; }
.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; }

/* Inbox, notifications and loadouts are structured as compact selectable rows. */
.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 { max-height: 260px; overflow-y: auto; padding-right: 3px; }
.mail-detail { border: 1px solid var(--line); }
.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); }
.notification-list { display: grid; gap: 6px; }
.notification-row { width: 100%; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); color: var(--ink-soft); padding: 9px; cursor: pointer; text-align: left; }
.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-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; }
}

/* -------------------------------------------------------------------------
   ZAVRYN 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/zavryn-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 .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: 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:.62fr 1.38fr; 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. */
.split-columns {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
}

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 { max-height: 180px; }
  .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);
}
.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;
  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/zavryn-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; }
.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/zavryn-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); }
@keyframes forumPostArrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .forum-masthead { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .forum-masthead-art { width: 48px; height: 48px; }
  .forum-masthead-copy h2 { font-size: 25px; }
  .forum-masthead-note { grid-column: 2; justify-items: start; padding: 8px 0 0; border-top: 1px solid rgba(218,161,84,.28); border-left: 0; text-align: left; }
  .forum-masthead-note b { display: inline; margin-right: 5px; font-size: 22px; }
  .forum-masthead-note small { display: inline; }
  .forum-directory-bar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .forum-thread-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; min-height: 72px; padding: 9px; }
  .forum-thread-state { width: 42px; height: 42px; }
  .forum-thread-seal { width: 34px; height: 34px; border-radius: 9px 3px 9px 3px; }
  .forum-thread-row b { font-size: 16px; }
  .forum-thread-stats { display: none; }
  .forum-thread-status { grid-column: 2 / 4; justify-content: flex-start; margin-top: -4px; }
  .forum-thread-header { grid-template-columns: 58px minmax(0, 1fr); gap: 13px; padding: 14px; }
  .forum-thread-header-art { width: 52px; height: 52px; }
  .forum-status-pill { grid-column: 2; justify-self: start; }
  .forum-thread-rule { align-items: flex-start; flex-wrap: wrap; }
  .forum-thread-rule i { min-width: 60px; }
  .forum-post { grid-template-columns: 82px minmax(0, 1fr); }
  .forum-post-author { padding: 14px 7px; }
  .forum-author-seal { 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 { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  .forum-compose-mark { width: 38px; height: 38px; border-radius: 8px 3px 8px 3px; }
  .forum-compose input, .forum-compose textarea, .forum-compose > .action-button { grid-column: 1 / -1; }
  .forum-compose input { margin-top: 2px; }
}

@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 ---------------------------------------------------
   Zavryn 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; }

/* 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 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 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 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 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,
  .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; }

/* 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:not(.death-skull):not([data-job="Mistblade"]):not([data-job="Sovereign"])::before { content:""; display:block; position:absolute; z-index:0; inset:18% 12% 14%; border-radius:50%; background:radial-gradient(circle, var(--job-relic-glow, rgba(109,227,224,.55)) 0, transparent 68%); filter:blur(8px); opacity:.45; transform:scale(.94); pointer-events:none; animation: jobRelicGlow 2.8s ease-in-out infinite; }
.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); } }

.skill-start-copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.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); }
.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-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-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; color: #f4e4bc; font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.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-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 Zavryn'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) 31px auto; }
.chat-open-button { min-width: 48px; padding-inline: 9px; }
.modal-box.chat-modal { width: min(1120px, 94vw); max-height: min(88vh, 920px); 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); }
.chat-modal-shell { display: grid; gap: 12px; }
.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: min(62vh, 680px); min-height: 360px; overflow: auto; margin-top: 0; padding: 14px 16px; 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: 8px 6px; border-bottom: 1px solid rgba(126,163,179,.13); line-height: 1.45; }
.modal-box.chat-modal #chat .chat-log-line:last-child { border-bottom: 0; }
.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) 31px auto; }
  .modal-box.chat-modal { width: min(100%, 680px); 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 { height: min(64vh, 620px); min-height: 300px; padding-inline: 9px; }
}
@media (max-width: 560px) {
  .quick-chat-form { grid-template-columns: minmax(76px, 1fr) minmax(0, 1.35fr) 31px 43px; }
  .chat-modal-form { grid-template-columns: minmax(92px, 1fr) minmax(0, 1.6fr) 38px; }
  .modal-box.chat-modal #chat { min-height: 260px; }
}

/* Wayfarer rails can be dismissed independently so the world/combat canvas can
   become the entire desktop. The small edge tabs remain reachable while the
   rail itself is collapsed; mobile keeps the normal stacked layout. */
.rail { position: relative; }
.rail-collapse-toggle {
  position: absolute; top: 14px; z-index: 18; width: 24px; height: 54px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--game-accent) 42%, var(--line-strong));
  border-radius: 7px; background: linear-gradient(180deg, rgba(13,34,40,.98), rgba(4,12,16,.98));
  color: var(--game-accent-bright); font: 800 22px/1 system-ui; cursor: pointer;
  box-shadow: 0 7px 20px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.07);
}
.rail-collapse-toggle:hover { border-color: var(--game-accent); filter: brightness(1.12); }
.rail-collapse-toggle-left { right: -13px; }
.rail-collapse-toggle-right { left: -13px; }
/* The grid row (and so each rail's own box) stretches to match whichever
   column is tallest -- usually the center tab, which can run on for a long
   scroll while a rail's own content ends early. A single toggle anchored to
   the very top scrolls out of reach on a long page, so each rail repeats it
   a few more times down its height; being percentages of the rail's own
   (stretched) height, they stay sensibly spread regardless of how tall the
   current tab makes the page. */
.rail-collapse-toggle-2 { top: 34%; }
.rail-collapse-toggle-3 { top: 64%; }
.rail-collapse-toggle-right.rail-collapse-toggle-2 { top: 42%; }
.rail-collapse-toggle-right.rail-collapse-toggle-3 { top: 80%; }
#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: visible; }
#primary[data-left-rail="collapsed"] > .left-rail > :not(.rail-collapse-toggle),
#primary[data-right-rail="collapsed"] > .right-rail > :not(.rail-collapse-toggle) { display: none !important; }
#primary[data-left-rail="collapsed"] .rail-collapse-toggle-left { right: -25px; }
#primary[data-right-rail="collapsed"] .rail-collapse-toggle-right { left: -25px; }
@media (max-width: 1120px) {
  .rail-collapse-toggle { display: none; }
  #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"] { }
  #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 > :not(.rail-collapse-toggle),
  #primary[data-right-rail="collapsed"] > .right-rail > :not(.rail-collapse-toggle) { 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.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 > :not(.rail-collapse-toggle),
  #primary[data-right-rail="collapsed"] > .right-rail > :not(.rail-collapse-toggle) { 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);
}