:root {
  color-scheme: dark;
  /* The Loom's interface (DESIGN.md → The interface): night cloth edged with
     gold thread and lit by the realms' light. Ink is warm, like lamplight on
     paper. Text over the world wears a dark halo instead of a box. */
  --ink: #f4eedf;
  --ink-dim: #d9d0bc;
  --ink-faint: #ada592;
  --gold: #ecc978;
  --gold-deep: #b98c44;
  --gold-soft: rgba(236, 201, 120, 0.16);
  --thread: rgba(236, 201, 120, 0.5);
  --thread-faint: rgba(236, 201, 120, 0.2);
  --panel: rgba(13, 12, 30, 0.92);
  --panel-strong: rgba(9, 8, 22, 0.96);
  --edge: rgba(236, 201, 120, 0.4);
  --edge-soft: rgba(236, 201, 120, 0.16);
  --bad: #ff9c8c;
  --good: #a8f2c4;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-lore: 'Alegreya', Georgia, serif;
  --font-ui: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --blur: blur(10px) saturate(1.1);
  /* a dark halo, tight then soft, that only shows where the world behind is bright */
  --halo: 0 0 1px rgba(5, 4, 14, 0.9), 0 1px 2px rgba(5, 4, 14, 0.85), 0 0 8px rgba(5, 4, 14, 0.65), 0 0 18px rgba(5, 4, 14, 0.4);
  --halo-strong: 0 0 1px rgb(5, 4, 14), 0 1px 3px rgba(5, 4, 14, 0.95), 0 0 10px rgba(5, 4, 14, 0.8), 0 0 26px rgba(5, 4, 14, 0.55);
  /* night cloth, lit faintly from above */
  --cloth: radial-gradient(140% 60% at 50% -12%, rgba(124, 104, 196, 0.15), transparent 60%), linear-gradient(180deg, rgba(20, 18, 42, 0.96), rgba(9, 8, 22, 0.97));
  /* a thread with a knot in the middle: ─◆─ */
  --rule: var(--diamond) center / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(236, 201, 120, 0.8) 44%, transparent 44%, transparent 56%, rgba(236, 201, 120, 0.8) 56%, transparent) center / 100% 1px no-repeat;
  --corner-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M1.5 28.5V11.5C1.5 6 6 1.5 11.5 1.5H28.5' fill='none' stroke='%23ecc978' stroke-opacity='.85'/><path d='M5.5 21V12.5C5.5 8.6 8.6 5.5 12.5 5.5H21' fill='none' stroke='%23ecc978' stroke-opacity='.35'/><path d='M11.5 8L15 11.5L11.5 15L8 11.5Z' fill='%23ecc978'/></svg>");
  --corner-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><g transform='translate(30 0) scale(-1 1)'><path d='M1.5 28.5V11.5C1.5 6 6 1.5 11.5 1.5H28.5' fill='none' stroke='%23ecc978' stroke-opacity='.85'/><path d='M5.5 21V12.5C5.5 8.6 8.6 5.5 12.5 5.5H21' fill='none' stroke='%23ecc978' stroke-opacity='.35'/><path d='M11.5 8L15 11.5L11.5 15L8 11.5Z' fill='%23ecc978'/></g></svg>");
  --corner-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><g transform='translate(0 30) scale(1 -1)'><path d='M1.5 28.5V11.5C1.5 6 6 1.5 11.5 1.5H28.5' fill='none' stroke='%23ecc978' stroke-opacity='.85'/><path d='M5.5 21V12.5C5.5 8.6 8.6 5.5 12.5 5.5H21' fill='none' stroke='%23ecc978' stroke-opacity='.35'/><path d='M11.5 8L15 11.5L11.5 15L8 11.5Z' fill='%23ecc978'/></g></svg>");
  --corner-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><g transform='translate(30 30) scale(-1 -1)'><path d='M1.5 28.5V11.5C1.5 6 6 1.5 11.5 1.5H28.5' fill='none' stroke='%23ecc978' stroke-opacity='.85'/><path d='M5.5 21V12.5C5.5 8.6 8.6 5.5 12.5 5.5H21' fill='none' stroke='%23ecc978' stroke-opacity='.35'/><path d='M11.5 8L15 11.5L11.5 15L8 11.5Z' fill='%23ecc978'/></g></svg>");
  --diamond: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 .5L9.5 5L5 9.5L.5 5Z' fill='%23ecc978'/></svg>");
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #03040b; color: var(--ink);
  font-family: var(--font-ui); font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
button { font-family: inherit; color: inherit; }
#game { position: fixed; inset: 0; }
#view { display: block; width: 100%; height: 100%; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: none; }
#ui .hud > *:not(.pe-none), #ui .panel-wrap, #ui .title-screen, #ui .finale, #ui .confirm-wrap { pointer-events: auto; }
.hidden { display: none !important; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }

/* --------------------------------------------------------------- boot */
#boot {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #141a3a 0%, #05060f 70%);
  transition: opacity 1.4s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #cfe9ff 18%, rgba(140, 190, 255, 0.35) 38%, rgba(120, 90, 255, 0) 70%); animation: bootPulse 2.2s ease-in-out infinite; }
.boot-text { font-family: var(--font-lore); font-style: italic; font-size: 18px; color: var(--ink-dim); letter-spacing: 0.04em; }
@keyframes bootPulse { 0%, 100% { transform: scale(0.85); opacity: 0.75; } 50% { transform: scale(1.1); opacity: 1; } }

/* --------------------------------------------------------------- the Loom's cloth */
/* panels, cards and tooltips: night cloth inside a gold thread, knotted at the corners */
.glass, .plate { background: var(--cloth); border: 1px solid var(--edge-soft); box-shadow: 0 10px 34px rgba(0, 0, 10, 0.45); }
.panel, .confirm, .tooltip {
  position: relative; background: var(--cloth); border: none; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 24px 70px rgba(0, 0, 8, 0.6);
}
.panel::before, .confirm::before, .tooltip::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid var(--thread-faint); border-radius: 2px; pointer-events: none;
}
.panel::after, .confirm::after, .tooltip::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background: var(--corner-tl) left top / 28px 28px no-repeat, var(--corner-tr) right top / 28px 28px no-repeat, var(--corner-bl) left bottom / 28px 28px no-repeat, var(--corner-br) right bottom / 28px 28px no-repeat;
}
.tooltip::before { inset: 4px; }
.tooltip::after { inset: 1px; background-size: 18px 18px; }

/* keys, as little stone tiles inlaid with gold */
kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px 2px; border-radius: 3px; text-align: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #f6e6bd; line-height: 1.35; text-shadow: none;
  background: linear-gradient(180deg, #2c2646, #15122a); box-shadow: inset 0 0 0 1px rgba(236, 201, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------- buttons */
/* a lozenge of night edged in gold (primary: gold, with dark ink) */
.btn {
  --edge-c: rgba(236, 201, 120, 0.6); --fill: linear-gradient(180deg, rgba(34, 30, 64, 0.95), rgba(14, 12, 32, 0.97));
  position: relative; isolation: isolate; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 34px; border: 0; border-radius: 0; background: var(--edge-c); color: var(--ink);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: var(--fill);
  clip-path: polygon(12.5px 0, calc(100% - 12.5px) 0, 100% 50%, calc(100% - 12.5px) 100%, 12.5px 100%, 0 50%);
}
.btn:hover { --edge-c: #f6dc9c; transform: translateY(-1px); filter: brightness(1.12); }
.btn.primary { --edge-c: #fff1c8; --fill: linear-gradient(180deg, #f2d590, #c79a54); color: #1e1608; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { --edge-c: rgba(236, 201, 120, 0.34); --fill: rgba(10, 9, 24, 0.8); }
.btn.danger { --edge-c: rgba(255, 150, 130, 0.55); color: var(--bad); }
.btn[disabled] { cursor: default; filter: saturate(0.4) brightness(0.8); transform: none; }
.btn .ico { font-size: 1.05em; }
.btn:has(small) { flex-direction: column; gap: 1px; }

/* --------------------------------------------------------------- title */
.title-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 1.3s ease, transform 1.3s ease; }
.title-screen.leaving { opacity: 0; transform: scale(1.04); pointer-events: none !important; }
/* night gathered behind the words, and at the edges of the world */
.title-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 42% at 50% 47%, rgba(4, 3, 14, 0.66), rgba(4, 3, 14, 0.4) 55%, rgba(4, 3, 14, 0) 100%), radial-gradient(ellipse at 50% 50%, rgba(4, 3, 14, 0) 50%, rgba(2, 2, 8, 0.74) 100%); }
.title-block { position: relative; text-align: center; padding: 40px; max-width: 880px; }
.title-kicker { font-family: var(--font-lore); font-style: italic; font-size: 19px; color: #ecdeb8; letter-spacing: 0.05em; text-shadow: var(--halo); opacity: 0; animation: rise 1.6s 0.4s ease forwards; }
.title-logo {
  margin: 10px 0 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(42px, 7.4vw, 112px); letter-spacing: 0.12em; white-space: nowrap; display: inline-block; line-height: 1;
  background: linear-gradient(180deg, #fffdf4 10%, #f3d38a 55%, #b88a42 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(4, 3, 14, 0.9)) drop-shadow(0 0 26px rgba(255, 220, 150, 0.38)) drop-shadow(0 0 70px rgba(160, 180, 255, 0.26));
  opacity: 0; animation: rise 2s 0.9s ease forwards;
}
.title-logo span { font-size: 1.12em; }
.title-logo span:last-child { letter-spacing: 0; }
.title-logo { padding: 0 0.12em 0 0.24em; }
.title-rule { width: min(460px, 72%); height: 11px; margin: 2px auto 18px; background: var(--rule); opacity: 0; animation: rise 1.6s 1.3s ease forwards; }
.title-sub { font-family: var(--font-lore); font-size: 20.5px; line-height: 1.42; color: var(--ink); max-width: 31em; margin: 0 auto; text-wrap: balance; text-shadow: var(--halo-strong); opacity: 0; animation: rise 1.6s 1.6s ease forwards; }
.title-actions { display: flex; gap: 16px; justify-content: center; margin-top: 36px; opacity: 0; animation: rise 1.4s 2.2s ease forwards; }
.title-foot { margin-top: 30px; font-family: var(--font-ui); font-size: 14.5px; letter-spacing: 0.03em; color: #dccfb3; text-shadow: var(--halo); opacity: 0; animation: rise 1.4s 2.8s ease forwards; }
.title-foot kbd { font-size: 11px; min-width: 0; margin: 0 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- HUD: the crest, and where you are */
.hud { position: absolute; inset: 0; }
.hud::before { content: ''; position: absolute; left: 0; top: 0; width: 560px; height: 210px; pointer-events: none; background: radial-gradient(ellipse at 0% 0%, rgba(4, 3, 14, 0.55), rgba(4, 3, 14, 0) 70%); }
.hud::after { content: ''; position: absolute; right: 0; top: 0; width: 680px; height: 130px; pointer-events: none; background: radial-gradient(ellipse at 100% 0%, rgba(4, 3, 14, 0.5), rgba(4, 3, 14, 0) 70%); }
.crest { position: absolute; left: 26px; top: 22px; width: 84px; height: 84px; cursor: pointer; transition: transform 0.2s; }
.crest:hover { transform: scale(1.05); }
.crest-ring { position: absolute; inset: 0; transform: rotate(-90deg); filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.4)); }
.crest-ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: rgba(236, 201, 120, 0.16); }
.ring-fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dasharray 0.35s ease, stroke 0.6s ease; }
.crest::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, rgba(64, 56, 112, 0.96), rgba(12, 10, 28, 0.97) 72%); border: 1px solid rgba(236, 201, 120, 0.45); box-shadow: inset 0 0 18px rgba(160, 180, 255, 0.2); }
.crest-lv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lv-label { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #cdbf9c; margin-top: 2px; }
.lv-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; color: #fff6dc; text-shadow: 0 0 14px rgba(255, 220, 150, 0.55); }
.where { position: absolute; left: 124px; top: 28px; }
.where-realm { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.07em; color: var(--ink); text-shadow: var(--halo-strong); }
.where-isle { font-family: var(--font-lore); font-style: italic; font-size: 16.5px; color: #e6dcc4; text-shadow: var(--halo-strong); margin-top: 1px; }
.where-weather { font-family: var(--font-lore); font-style: italic; font-size: 15px; color: var(--c, #ffe8b0); text-shadow: var(--halo-strong), 0 0 12px color-mix(in srgb, var(--c, #ffe8b0) 45%, transparent); margin-top: 1px; opacity: 0; transition: opacity 3s; }
.where-weather.on { opacity: 1; }
.xp-text { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); margin-top: 5px; font-variant-numeric: lining-nums tabular-nums; text-shadow: var(--halo); }

/* --------------------------------------------------------------- HUD: the essences you hold */
.essences { position: absolute; right: 26px; top: 20px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; max-width: 62vw; }
.ess { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; text-shadow: var(--halo-strong); }
.ess.bump { animation: bump 0.45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ess-ico { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); font-size: 15px; filter: drop-shadow(0 0 5px var(--c)); }
.essences .ess-ico { width: 26px; height: 26px; font-size: 17px; }

/* --------------------------------------------------------------- HUD: the medallions (under the crest) */
.hud-buttons { position: absolute; left: 47px; top: 122px; display: flex; flex-direction: column; gap: 9px; }
.hb {
  position: relative; cursor: pointer; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(58, 51, 102, 0.96), rgba(12, 10, 28, 0.97) 72%);
  border: 1px solid rgba(236, 201, 120, 0.5); color: #ecd9a8;
  box-shadow: 0 0 0 3px rgba(8, 7, 20, 0.5), 0 4px 14px rgba(0, 0, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.hb .ico { font-size: 19px; }
.hb:hover { border-color: var(--gold); color: #fff3cf; box-shadow: 0 0 0 3px rgba(8, 7, 20, 0.5), 0 4px 14px rgba(0, 0, 8, 0.5), 0 0 18px rgba(236, 201, 120, 0.35); }
/* its name unfurls beside it, with its key */
.hb > span {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; padding: 5px 30px 6px 12px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em; color: var(--ink); text-shadow: var(--halo);
  background: linear-gradient(90deg, rgba(10, 9, 24, 0.92), rgba(10, 9, 24, 0.7) 70%, transparent);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hb > span kbd { font-size: 10.5px; min-width: 0; }
.hb:hover > span, .hb:focus-visible > span { opacity: 1; transform: translate(0, -50%); }
.hb.dim { opacity: 0.5; }

/* --------------------------------------------------------------- HUD: the Loom's whisper */
/* no box: its words hang from a gold thread at the edge of the screen */
.whisper { position: absolute; right: 24px; top: 64px; width: 340px; padding: 12px 18px 12px 24px; text-align: right; background: radial-gradient(ellipse 88% 78% at 70% 46%, rgba(5, 4, 15, 0.6), rgba(5, 4, 15, 0.32) 55%, transparent 78%); }
.whisper::before { content: ''; position: absolute; right: 0; top: 4px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 12%, rgba(236, 201, 120, 0.45) 72%, transparent); transform-origin: top; }
.whisper::after { content: ''; position: absolute; right: -4px; top: 31px; width: 9px; height: 9px; background: var(--diamond) center / contain no-repeat; filter: drop-shadow(0 0 6px var(--gold)); }
.whisper.new { animation: whisperIn 1.1s ease; }
.whisper.new::before { animation: threadIn 1.1s ease; }
@keyframes whisperIn { 0% { opacity: 0; transform: translateX(14px); } 100% { opacity: 1; transform: none; } }
@keyframes threadIn { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.w-head { display: flex; flex-direction: column; gap: 1px; }
.w-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); text-shadow: var(--halo); }
.w-title { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.04em; color: var(--ink); text-shadow: var(--halo-strong); }
.w-text { margin-top: 5px; font-family: var(--font-lore); font-size: 16px; line-height: 1.38; color: #eee6d2; text-shadow: var(--halo-strong); text-wrap: balance; }
.w-hint { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: #d4c8ad; text-shadow: var(--halo); text-wrap: balance; }
.w-hint::before { content: ''; display: block; width: 72%; height: 1px; margin: 0 0 8px auto; background: linear-gradient(270deg, rgba(236, 201, 120, 0.6), transparent); }
.w-hint kbd { font-size: 11px; min-width: 0; margin: 0 1px; }
.w-bar { position: relative; margin: 10px 0 2px auto; width: 72%; height: 2px; background: rgba(236, 201, 120, 0.2); }
.w-bar i { position: relative; display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(185, 140, 68, 0.6), #fff1c8); transition: width 0.4s ease; }
.w-bar i::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 8px var(--gold), 0 0 14px var(--gold); }

/* --------------------------------------------------------------- HUD: abilities */
.abilities { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 16px; }
.ab {
  position: relative; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff1d0;
  background: radial-gradient(circle at 50% 32%, rgba(58, 51, 102, 0.96), rgba(12, 10, 28, 0.97) 72%);
  border: 1px solid rgba(236, 201, 120, 0.55);
  box-shadow: 0 0 0 4px rgba(8, 7, 20, 0.55), 0 0 0 5px rgba(236, 201, 120, 0.2), 0 6px 18px rgba(0, 0, 8, 0.55);
  transition: transform 0.15s, border-color 0.2s;
}
.ab:hover { transform: translateY(-2px); border-color: var(--gold); }
.ab-ico { font-size: 25px; display: flex; filter: drop-shadow(0 0 6px rgba(255, 220, 150, 0.55)); }
.ab-key { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 0 6px 1px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #f6e6bd; white-space: nowrap; background: linear-gradient(180deg, #2c2646, #15122a); box-shadow: inset 0 0 0 1px rgba(236, 201, 120, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6); }
.ab-cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ab-lock { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 50%; background: rgba(5, 5, 16, 0.72); color: var(--ink-faint); font-size: 14px; }
.ab-lock b { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.ab.locked .ab-lock { display: flex; }
.ab.locked .ab-ico { opacity: 0.25; filter: none; }
.ab.cooling .ab-ico { opacity: 0.5; }
.ab.fresh { animation: fresh 2.4s ease 3; }
@keyframes fresh { 0%, 100% { box-shadow: 0 0 0 4px rgba(8, 7, 20, 0.55), 0 0 0 5px rgba(236, 201, 120, 0.2); } 50% { box-shadow: 0 0 0 4px rgba(8, 7, 20, 0.55), 0 0 0 5px rgba(236, 201, 120, 0.7), 0 0 26px rgba(255, 220, 150, 0.7); border-color: var(--gold); } }
.surge-meter { position: absolute; left: 50%; bottom: 102px; transform: translateX(-50%); width: 240px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #fff4c8; text-shadow: var(--halo); }
.surge-meter i { display: block; height: 2px; margin-bottom: 6px; border-radius: 2px; background: linear-gradient(90deg, #ffd060, #fff); box-shadow: 0 0 12px #ffd060; }

/* --------------------------------------------------------------- tooltip */
.tooltip { position: absolute; z-index: 30; min-width: 200px; max-width: 300px; padding: 12px 16px 13px; font-family: var(--font-lore); font-size: 14.5px; line-height: 1.38; }
.tooltip.above { transform: translate(-50%, -100%); }
.tt-kind { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.tt-name { font-family: var(--font-display); font-size: 16.5px; color: var(--ink); margin: 2px 0 5px; }
.tt-desc { color: var(--ink-dim); margin-bottom: 5px; }
.tt-yield { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; }
.tt-yield .ess-ico { width: 18px; height: 18px; font-size: 13px; }
.tt-xp { color: var(--ink-dim); font-weight: 500; }
.tt-per { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.tt-charge { height: 2px; border-radius: 2px; background: rgba(236, 201, 120, 0.15); margin: 8px 0 2px; overflow: hidden; }
.tt-charge i { display: block; height: 100%; }
.tt-hint { margin-top: 7px; font-family: var(--font-ui); color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.tt-req { margin-top: 6px; font-family: var(--font-ui); color: var(--ink-dim); font-size: 12.5px; }
.tt-req.bad { color: var(--bad); }

/* --------------------------------------------------------------- world labels, plates, floaters */
.labels, .floaters, .targets { position: absolute; inset: 0; overflow: hidden; }
/* nameplates: a little caption over a name, and a thread beneath it */
.wlabel {
  position: absolute; left: 0; top: 0; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.05em; color: var(--ink); text-shadow: var(--halo-strong);
  translate: -50% -100%; opacity: 0; will-change: transform;
}
.wlabel::after { content: ''; display: block; width: 76%; height: 1px; margin-top: 3px; background: linear-gradient(90deg, transparent, rgba(236, 201, 120, 0.8), transparent); }
.wlabel .k { display: flex; align-items: center; gap: 4px; margin-bottom: 1px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.wlabel .k .ico { font-size: 11px; }
.wlabel em { font-family: var(--font-lore); font-style: italic; font-size: 13.5px; letter-spacing: 0; color: var(--ink-dim); margin-top: 1px; }
.wlabel.locked { color: var(--ink-dim); }
.wlabel.locked .k { color: #c9bda2; }
.wlabel.locked::after { background: linear-gradient(90deg, transparent, rgba(200, 190, 165, 0.5), transparent); }
.wlabel.cold { color: #ffe3c4; }
.wlabel.cold .k { color: #ffa25e; }
.wlabel.cold::after { background: linear-gradient(90deg, transparent, rgba(255, 162, 94, 0.85), transparent); }
.wlabel.gate .g-name, .wlabel .g-name { font-size: 16px; letter-spacing: 0.06em; }
.wlabel.plot em { font-style: normal; font-family: var(--font-ui); font-size: 12px; color: var(--gold); letter-spacing: 0.12em; }
.wlabel.plot.unbuilt { opacity: 0.85; }
.wlabel.plot.unbuilt em { color: var(--ink-dim); letter-spacing: 0.02em; }
.plate { position: absolute; left: 0; top: 0; translate: -50% -100%; padding: 5px 11px 7px; border-radius: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; text-align: center; }
.pl-bar { width: 110px; height: 2px; margin-top: 5px; border-radius: 2px; background: rgba(236, 201, 120, 0.16); overflow: hidden; }
.pl-bar i { display: block; height: 100%; transition: width 0.25s; box-shadow: 0 0 8px currentColor; }
.floater { position: absolute; left: 0; top: 0; display: none; translate: -50% -50%; text-align: center; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }
.floater.show { display: flex; flex-direction: column; align-items: center; }
.fv { display: flex; align-items: center; gap: 3px; font-weight: 800; font-size: 20px; text-shadow: 0 0 1px rgba(5, 4, 14, 0.95), 0 1px 3px rgba(5, 4, 14, 0.9), 0 0 10px currentColor; }
.fv .ico { font-size: 15px; }
.fx { font-size: 13px; font-weight: 800; color: #fff4d0; letter-spacing: 0.03em; text-shadow: var(--halo-strong); }
.fr { font-family: var(--font-display); font-size: 12.5px; color: #fff; letter-spacing: 0.12em; text-shadow: 0 0 1px rgba(5, 4, 14, 0.9), 0 0 10px #fff, 0 0 20px #ffd8a0; }
.floater.resonant .fv { font-size: 24px; }
.ft { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 0 1px rgb(5, 4, 14), 0 1px 3px rgba(5, 4, 14, 0.9), 0 0 10px currentColor; margin-bottom: 1px; }
.fs { font-family: var(--font-lore); font-style: italic; font-size: 15px; color: var(--ink); text-shadow: var(--halo-strong); }
.floater.big .fv { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: 0.04em; }
.ping { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid rgba(255, 245, 210, 0.8); box-shadow: 0 0 14px rgba(255, 235, 180, 0.6); opacity: 0; transform-origin: center; }

/* --------------------------------------------------------------- toasts, banners, cards */
/* toasts are ribbons: a band of night between two gold threads, fading at the ends */
.toasts { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 25; }
.toast {
  --tc: rgba(236, 201, 120, 0.6);
  position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 64px 9px; max-width: min(620px, 60vw); text-align: center;
  font-family: var(--font-lore); font-size: 16px; color: var(--ink); text-shadow: 0 1px 2px rgba(5, 4, 14, 0.8);
  background: linear-gradient(90deg, transparent, rgba(8, 7, 20, 0.86) 20%, rgba(8, 7, 20, 0.86) 80%, transparent);
  animation: toastIn 0.5s ease; transition: opacity 0.6s, transform 0.6s;
}
.toast::before, .toast::after { content: ''; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--tc), transparent); }
.toast::before { top: 0; }
.toast::after { bottom: 0; }
.toast b { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; }
.toast.out { opacity: 0; transform: translateY(-8px); }
.toast.t-warn { --tc: rgba(255, 150, 120, 0.75); }
.toast.t-quest, .toast.t-craft { --tc: var(--gold); }
.toast.t-codex { --tc: rgba(170, 205, 255, 0.75); }
.toast.t-surge { --tc: #ffd060; color: #fff4c8; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px; }
.toast .ess-ico { width: 18px; height: 18px; font-size: 12px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: none; } }

.banner { position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 0.9s ease; min-width: 400px; }
.banner.show { opacity: 1; }
.banner.show .b-title { animation: bannerIn 1.2s cubic-bezier(.2, .8, .2, 1); }
.b-kicker { font-family: var(--font-lore); font-style: italic; font-size: 18px; color: #e6dcc4; text-shadow: var(--halo); }
.b-title { font-family: var(--font-display); font-weight: 600; font-size: 58px; letter-spacing: 0.1em; color: #fff; text-shadow: 0 2px 4px rgba(5, 4, 14, 0.8), 0 0 30px var(--c), 0 0 70px var(--c); }
.b-title::after { content: ''; display: block; width: min(420px, 80%); height: 9px; margin: 8px auto 4px; background: var(--rule); }
.b-sub { font-family: var(--font-lore); font-size: 19px; color: var(--ink); text-shadow: var(--halo-strong); }
.b-extra { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.unlock { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 3px; background: var(--cloth); border: 1px solid var(--edge); font-size: 14px; max-width: 520px; text-align: left; box-shadow: 0 8px 26px rgba(0, 0, 8, 0.5); }
.unlock .ico { font-size: 22px; color: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.unlock b { color: var(--ink); white-space: nowrap; font-family: var(--font-display); font-weight: 600; }
.unlock span { color: var(--ink-dim); font-family: var(--font-lore); }
.banner.elder .b-title { font-size: 40px; }
@keyframes bannerIn { from { letter-spacing: 0.5em; opacity: 0; filter: blur(8px); } to { letter-spacing: 0.1em; opacity: 1; filter: none; } }

.realm-card { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 1.4s ease; }
.realm-card.show { opacity: 1; }
.rc-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); text-shadow: var(--halo); }
.rc-title { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 500; letter-spacing: 0.12em; color: #fff; text-shadow: 0 2px 4px rgba(5, 4, 14, 0.85), 0 0 40px rgba(180, 200, 255, 0.55), 0 4px 22px rgba(0, 0, 20, 0.7); margin-top: 6px; }
.realm-card.show .rc-title { animation: bannerIn 2.2s cubic-bezier(.2, .8, .2, 1); }
.rc-rule { width: 260px; height: 11px; margin: 12px auto; background: var(--rule); }
.rc-sub { font-family: var(--font-lore); font-style: italic; font-size: 20px; color: #ece2cb; text-shadow: var(--halo-strong); }
.isle-card { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); opacity: 0; font-family: var(--font-display); font-size: 26px; letter-spacing: 0.14em; color: #fff; text-shadow: 0 2px 4px rgba(5, 4, 14, 0.85), 0 0 20px rgba(200, 220, 255, 0.6), 0 2px 14px rgba(0, 0, 0, 0.7); }
.isle-card.show { animation: isle 3.4s ease; }
@keyframes isle { 0% { opacity: 0; transform: translate(-50%, 8px); } 20%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* the Loom's voice, low on the screen, in a pool of night */
.whisper-line { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); max-width: 760px; padding: 16px 60px; text-align: center; font-family: var(--font-lore); font-style: italic; font-size: 21px; line-height: 1.38; color: #f6efdc; text-wrap: balance; text-shadow: var(--halo-strong), 0 0 22px rgba(200, 180, 255, 0.35); background: radial-gradient(ellipse at center, rgba(5, 4, 15, 0.55), rgba(5, 4, 15, 0) 70%); opacity: 0; transition: opacity 1.2s ease; }
.whisper-line.show { opacity: 1; }
.channel { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: #efe6ff; text-shadow: var(--halo); }
.ch-bar { width: 240px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); margin-bottom: 8px; overflow: hidden; }
.ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8a0ff, #fff); box-shadow: 0 0 12px #d0b8ff; }

.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at center, rgba(3, 3, 12, 0.4), rgba(3, 3, 12, 0.78)); opacity: 0; transition: opacity 1.4s ease; }
.intro.show { opacity: 1; }
.intro.out { opacity: 0; }
.intro p { margin: 0; max-width: 760px; text-align: center; font-family: var(--font-lore); font-size: 25px; line-height: 1.4; color: #f6efdc; text-wrap: balance; text-shadow: var(--halo-strong); opacity: 0; animation: rise 2s var(--d) ease forwards; }

.finale { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(255, 250, 240, 0.12), rgba(4, 4, 14, 0.8)); opacity: 0; transition: opacity 2.5s ease; }
.finale.show { opacity: 1; }
.fin-inner { max-width: 700px; text-align: center; }
.fin-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.finale h1 { font-family: var(--font-display); font-size: 84px; letter-spacing: 0.14em; margin: 10px 0 18px; background: linear-gradient(90deg, #ffb8e8, #fff4c8, #9fe8ff, #d8b8ff, #ffb8e8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: prism 6s linear infinite; filter: drop-shadow(0 2px 3px rgba(4, 3, 14, 0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.45)); }
@keyframes prism { to { background-position: 200% 0; } }
.finale p { font-family: var(--font-lore); font-size: 20px; line-height: 1.5; color: #f6efdc; text-shadow: var(--halo); }
.fin-thanks { color: var(--gold) !important; font-style: italic; }
.finale .btn { margin-top: 20px; }

/* --------------------------------------------------------------- panels */
.panel-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(4, 4, 16, 0.45), rgba(2, 2, 10, 0.78)); z-index: 40; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.panel { width: min(1040px, 94vw); max-height: 86vh; display: flex; flex-direction: column; animation: panelIn 0.4s cubic-bezier(.2, .8, .2, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.p-head { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 30px 14px; }
.p-head::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(236, 201, 120, 0.6), rgba(236, 201, 120, 0.2) 55%, transparent); }
.p-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 25px; letter-spacing: 0.08em; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); text-shadow: 0 0 18px rgba(236, 201, 120, 0.18); }
.p-title .ico { color: var(--gold); font-size: 25px; }
.p-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.p-tabs button { position: relative; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 0; border: none; background: none; font-size: 14.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-faint); white-space: nowrap; transition: color 0.2s; }
.p-tabs button:hover { color: var(--ink); }
.p-tabs button.on { color: var(--ink); }
.p-tabs button.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.p-tabs button .ico { font-size: 15px; color: var(--gold); opacity: 0.85; }
.p-close { cursor: pointer; margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(236, 201, 120, 0.45); background: radial-gradient(circle at 50% 32%, rgba(58, 51, 102, 0.9), rgba(12, 10, 28, 0.95) 72%); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #ecd9a8; }
.p-close:hover { color: #fff3cf; border-color: var(--gold); box-shadow: 0 0 14px rgba(236, 201, 120, 0.3); }
.p-body { overflow-y: auto; padding: 18px 30px 30px; }
.p-body::-webkit-scrollbar { width: 8px; }
.p-body::-webkit-scrollbar-thumb { background: rgba(236, 201, 120, 0.22); border-radius: 4px; }
.p-intro { font-family: var(--font-lore); font-style: italic; font-size: 16.5px; color: var(--ink-dim); margin-bottom: 14px; }
.dim { color: var(--ink-faint); font-size: 13.5px; }

.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; }
.rcp { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 5px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 236, 200, 0.08); transition: border-color 0.25s, background 0.25s; }
.rcp.ready { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }
.rcp.done { opacity: 0.62; }
.rcp.focus { box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(236, 201, 120, 0.25); }
.rcp.woven { animation: woven 1.2s ease; }
@keyframes woven { 0% { box-shadow: 0 0 0 0 rgba(255, 240, 200, 0.9); } 100% { box-shadow: 0 0 0 18px rgba(255, 240, 200, 0); } }
.rcp-ico { width: 48px; height: 48px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 75%); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 40%, transparent)); }
.swatch { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0%, var(--a) 40%, var(--b) 75%, transparent 76%); box-shadow: 0 0 16px var(--a); }
.rcp-main { flex: 1; min-width: 0; }
.rcp-name { font-family: var(--font-display); font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rcp-desc { font-size: 13.5px; color: var(--ink-dim); margin: 4px 0 7px; line-height: 1.4; }
.rcp-desc .now { color: var(--ink-faint); display: block; }
.rcp-desc .need { color: var(--bad); }
.rcp-desc .okmark { color: var(--good); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); opacity: 0.6; }
.pips i.on { background: var(--gold); opacity: 1; box-shadow: 0 0 6px var(--gold); }
.lvl { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(255, 236, 200, 0.08); color: var(--ink-dim); letter-spacing: 0.04em; }
.lvl.bad { color: var(--bad); background: rgba(255, 120, 120, 0.1); }
.rcp-cost { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 3px; font-size: 12px; background: rgba(255, 236, 200, 0.05); border: 1px solid rgba(236, 201, 120, 0.16); }
.chip .ess-ico { width: 18px; height: 18px; font-size: 12px; }
.chip b { font-weight: 700; }
.chip i { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.chip i::before { content: '/ '; }
.chip.short b { color: var(--bad); }
.chip.ok b { color: var(--ink); }
.rcp-act { flex: none; }
.weave {
  --wc: var(--c, #ecc978); position: relative; isolation: isolate; cursor: pointer; min-width: 104px; padding: 10px 22px; border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--wc) 75%, transparent); color: var(--ink);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: filter 0.2s, transform 0.2s;
}
.weave::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 32%, rgb(20, 18, 42)), rgb(13, 11, 30)); clip-path: polygon(9.5px 0, calc(100% - 9.5px) 0, 100% 50%, calc(100% - 9.5px) 100%, 9.5px 100%, 0 50%); }
.weave:hover:not([disabled]) { filter: brightness(1.18); transform: translateY(-1px); }
.weave[disabled] { cursor: default; background: rgba(236, 201, 120, 0.2); color: var(--ink-faint); text-transform: none; letter-spacing: 0.02em; font-family: var(--font-ui); font-weight: 700; font-size: 13px; }
.weave[disabled]::before { background: rgb(15, 13, 32); }
.state.done { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--good); letter-spacing: 0.06em; text-transform: uppercase; }

.transmute { display: flex; gap: 18px; align-items: stretch; }
.tm-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tm-lab { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tm-e { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); font-size: 14px; font-weight: 600; text-align: left; }
.tm-e i { margin-left: auto; font-style: normal; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tm-e.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.tm-mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: center; }
.tm-rate { font-family: var(--font-display); font-size: 28px; color: var(--gold); margin-bottom: 6px; }

.codex { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; min-height: 420px; }
.cx-count { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cx-group { margin-bottom: 14px; }
.cx-group.sealed { opacity: 0.4; }
.cx-realm { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; color: var(--c); margin-bottom: 6px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cx { cursor: pointer; text-align: left; padding: 8px 10px; border-radius: 4px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 1px; }
.cx b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cx i { font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.cx.seen:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.cx.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.cx:not(.seen) { cursor: default; }
.cx:not(.seen) b { color: var(--ink-faint); letter-spacing: 0.2em; }
.cx.elder.seen b { color: var(--gold); }
.cx-empty { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-lore); font-style: italic; font-size: 17.5px; color: var(--ink-faint); padding: 30px; border-radius: 5px; border: 1px dashed rgba(255, 255, 255, 0.1); }
.cx-detail { padding: 22px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); align-self: start; position: sticky; top: 0; }
.cx-kind { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c); }
.cx-detail h3 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 26px; }
.lore { font-family: var(--font-lore); font-style: italic; font-size: 17.5px; line-height: 1.45; color: var(--ink); }
.cx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cx-stats div, .j-stats div { padding: 9px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 2px; }
.cx-stats span, .j-stats span { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cx-stats b, .j-stats b { font-size: 16px; display: flex; align-items: center; gap: 5px; }
.cx-stats .ess-ico { width: 18px; height: 18px; font-size: 13px; }
.cx-elder { margin-top: 12px; font-size: 14px; color: var(--gold); }
/* weather: a line in a tooltip, the Sanctum's list of realms, and the Codex's Skies */
.tt-wx { margin-top: 5px; font-size: 13px; color: var(--c); display: flex; align-items: center; gap: 5px; }
.tt-wx .ico { width: 14px; height: 14px; }
.rl-wx { color: var(--c) !important; display: flex; align-items: center; gap: 4px; }
.rl-wx .ico { width: 13px; height: 13px; }
.wx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.wx { padding: 14px 16px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--c) 11%, transparent), transparent 70%); }
.wx.unseen { border-style: dashed; background: none; opacity: 0.6; }
.wx-head { display: flex; align-items: center; gap: 10px; }
.wx-head b { font-family: var(--font-display); font-size: 17px; display: block; color: var(--ink); }
.wx.unseen .wx-head b { letter-spacing: 0.2em; color: var(--ink-faint); }
.wx-head em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.wx-now { color: var(--c); font-weight: 600; }
.wx .lore { font-size: 15px; margin: 8px 0 0; }
.wx-rules { font-size: 13.5px; color: var(--ink-dim); margin: 8px 0 0; }
.wx-gift { font-size: 13.5px; color: var(--c); margin: 6px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.wx-gift .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
/* the Codex's courses: each wind's lamps and best lap, and Flit's scarves */
.cc-winds { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.cc-wind { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); font-size: 14px; }
.cc-wind span:first-child { display: flex; flex-direction: column; font-weight: 600; }
.cc-wind em { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-faint); }
.cc-wind b { text-align: right; font-weight: 600; }
.cc-wind.locked { opacity: 0.45; }
.cc-wind.cc-head { background: none; padding: 0 12px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cc-wind.cc-head span:first-child, .cc-wind.cc-head b { font-weight: 400; }
.cc-lamps { display: flex; gap: 9px; }
.cc-lamps i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.cc-lamps i.lit { background: radial-gradient(circle, #fff 0%, var(--c) 55%, color-mix(in srgb, var(--c) 40%, transparent) 100%); box-shadow: 0 0 10px var(--c); }
.cc-scarf { display: flex; align-items: center; color: var(--ink-dim); }
.scarves { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 12px 0 4px; }
.scarf { cursor: pointer; text-align: left; padding: 9px 10px; border-radius: 4px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 3px; }
.scarf:hover:not(:disabled) { border-color: rgba(216, 200, 255, 0.5); }
.scarf.on { border-color: #d8c8ff; background: rgba(216, 200, 255, 0.1); }
.scarf b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.scarf i { font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.scarf .scarf-swatch { margin: 0 0 3px; width: 100%; }
.scarf.missing { cursor: default; opacity: 0.55; }
.scarf.missing .scarf-swatch { filter: grayscale(0.85) brightness(0.7); box-shadow: none; }
.scarf-swatch.own { background: linear-gradient(90deg, #cfe6ff, #6a8cff); }
.scarf-swatch.sky { background: linear-gradient(90deg, #ff6a6a, #ffd36a, #6affa0, #6ad8ff, #b06aff); }

.map { position: relative; }
.map canvas { width: 100%; height: auto; border-radius: 5px; background: radial-gradient(ellipse at center, rgba(40, 50, 100, 0.35), rgba(5, 6, 18, 0.6)); border: 1px solid rgba(255, 255, 255, 0.06); }
.map-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.map-legend i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 3px; }
.map-legend i.me { width: 10px; height: 10px; border-radius: 50%; background: #fff8e0; box-shadow: 0 0 8px #fff; }
.map-legend i.ley { background: var(--gold); }
.map-legend i.ley.off { background: repeating-linear-gradient(90deg, #aaa 0 4px, transparent 4px 8px); }
.map-legend i.gate { width: 10px; height: 10px; border-radius: 50%; background: #d0a8ff; }
.realm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 5px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.03); opacity: 0.6; }
.rl.open { opacity: 1; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.rl .ess-ico { width: 34px; height: 34px; font-size: 22px; }
.rl b { font-family: var(--font-display); font-size: 16px; display: block; }
.rl span { font-size: 13px; color: var(--ink-faint); }

.journal { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
.j-sec { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 6px 0 8px; }
.j-q { padding: 14px 16px; border-radius: 5px; border: 1px solid rgba(236, 201, 120, 0.25); background: rgba(236, 201, 120, 0.05); margin-bottom: 14px; }
.j-q b { font-family: var(--font-display); font-size: 17px; }
.j-q p { margin: 6px 0 0; font-size: 14px; color: var(--ink-dim); }
.j-q .lore { font-size: 16px; color: var(--ink); }
.j-q.j-miss { padding: 10px 14px; margin-bottom: 8px; border-style: dashed; background: none; }
.j-q.j-miss b { font-size: 16px; }
/* Tansy's garden: what to plant */
.plant-card { max-width: 560px; }
.pc-list { display: flex; flex-direction: column; gap: 5px; max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.pc-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 4px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.03); cursor: pointer; color: inherit; font: inherit; }
.pc-row:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.pc-row .pc-ico { color: var(--c); display: flex; }
.pc-row .pc-ico .ico { width: 20px; height: 20px; }
.pc-row b { font-size: 14.5px; color: var(--ink); display: block; }
.pc-row i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.pc-row .pc-cost { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 210px; }
.pc-row.short { opacity: 0.6; cursor: default; }
.pc-row.locked { opacity: 0.4; cursor: default; grid-template-columns: 26px 1fr; }
/* Flit's scarves */
.scarf-swatch { display: inline-block; width: 42px; height: 11px; border-radius: 6px; margin-right: 10px; vertical-align: 3px; background: linear-gradient(90deg, var(--a), var(--b)); box-shadow: 0 0 12px color-mix(in srgb, var(--a) 60%, transparent); }
/* Drifting's side whispers, beside the chain */
.j-q.j-side { padding: 11px 14px; margin-bottom: 9px; border-color: rgba(216, 200, 255, 0.3); background: rgba(216, 200, 255, 0.05); }
.j-q.j-side b { font-size: 16px; }
.j-q.j-side b .ico { color: #d8c8ff; }
.j-q.j-side .lore { font-size: 14.5px; }
.j-done .ico.i-feather { color: #d8c8ff; }
.j-done { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink-dim); max-height: 280px; overflow-y: auto; }
.j-done .ico { color: var(--good); }
.j-abil { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.jab { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); opacity: 0.5; }
.jab.on { opacity: 1; }
.jab > .ico { font-size: 22px; color: var(--gold); }
.jab div { flex: 1; display: flex; flex-direction: column; }
.jab b { font-size: 14px; }
.jab span { font-size: 12.5px; color: var(--ink-faint); }
.jab em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.j-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.menu .m-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-sec.wide { grid-column: 1 / -1; }
.qrow { display: flex; gap: 6px; margin-bottom: 8px; }
.q { cursor: pointer; padding: 8px 16px; border-radius: 3px; border: 1px solid rgba(236, 201, 120, 0.2); background: rgba(255, 236, 200, 0.03); font-size: 12.5px; font-weight: 700; }
.q.on { border-color: var(--gold); background: rgba(236, 201, 120, 0.14); color: var(--ink); }
.sl { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 14px; }
.sl span { width: 70px; color: var(--ink-dim); }
.sl input { flex: 1; accent-color: var(--gold); }
.sl em { width: 34px; font-style: normal; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tg { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-dim); margin-top: 10px; }
.tg input { accent-color: var(--gold); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.keys div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-dim); }
.keys kbd { min-width: 64px; padding: 3px 8px 4px; }
.m-danger { margin-top: 22px; }

@media (max-width: 900px) {
  .whisper { width: 240px; }
  .recipes { grid-template-columns: 1fr; }
  .codex, .journal, .m-grid { grid-template-columns: 1fr; }
  .banner { min-width: 0; width: 90vw; }
  .b-title { font-size: 40px; }
}

/* --------------------------------------------------------------- realm loading */
.weaving { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transition: opacity 0.5s ease; z-index: 70; }
.weaving.show { opacity: 1; }
.wv-ring { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(236, 201, 120, 0.15); border-top-color: var(--gold); animation: spin 1.1s linear infinite; box-shadow: 0 0 24px rgba(236, 201, 120, 0.25); }
.weaving span { font-family: var(--font-lore); font-style: italic; font-size: 17.5px; color: var(--ink-dim); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- confirm */
.confirm-wrap { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(2, 2, 10, 0.6); pointer-events: auto; animation: fadeIn 0.25s ease; padding: 16px; }
.confirm { max-width: 440px; padding: 30px 32px 28px; text-align: center; }
.confirm h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 23px; letter-spacing: 0.04em; color: var(--ink); }
.confirm p { margin: 0 0 20px; font-family: var(--font-lore); color: var(--ink-dim); font-size: 16px; line-height: 1.45; }
.c-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn:focus-visible, .weave:focus-visible, .leave:focus-visible { filter: brightness(1.25); outline: none; }
.hb:focus-visible, .ab:focus-visible, .p-close:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------- narrow screens */
@media (max-width: 640px) {
  .crest { left: 12px; top: 12px; width: 64px; height: 64px; }
  .lv-num { font-size: 22px; }
  .where { left: 86px; top: 14px; }
  .where-realm { font-size: 16px; }
  .essences { right: 12px; top: 12px; gap: 3px; flex-direction: column; align-items: flex-end; max-width: none; }
  .ess { font-size: 14px; }
  .essences .ess-ico { width: 20px; height: 20px; font-size: 14px; }
  .where { max-width: calc(100vw - 180px); }
  .hud-buttons { left: 25px; top: 88px; gap: 7px; }
  .hb { width: 38px; height: 38px; }
  .whisper { left: 70px; right: 12px; top: auto; bottom: 100px; width: auto; padding: 8px 16px 8px 12px; }
  .w-hint { display: none; }
  .toasts { top: 100px; }
  .abilities { bottom: 18px; gap: 10px; }
  .ab { width: 46px; height: 46px; }
  .title-actions { flex-wrap: wrap; }
  .title-sub { font-size: 18px; }
  .intro p { font-size: 21px; padding: 0 16px; }
  .p-head { flex-wrap: wrap; padding: 16px; }
  .p-body { padding: 14px 16px 20px; }
  .recipes { grid-template-columns: 1fr; }
  .rcp { flex-wrap: wrap; }
  .banner { min-width: 0; width: calc(100vw - 32px); }
  .b-title { font-size: 34px; }
}

/* --------------------------------------------------------------- beacons */
.beacon { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 5; }
.beacon i { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid var(--c); filter: drop-shadow(0 0 8px var(--c)); animation: beaconPulse 1.4s ease-in-out infinite; }
.beacon span { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; text-shadow: var(--halo-strong); }
@keyframes beaconPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* --------------------------------------------------------------- skills suite: HUD ribbon */
.ribbon { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; letter-spacing: 0.03em; color: var(--ink-dim); text-shadow: var(--halo-strong); font-variant-numeric: lining-nums tabular-nums; }
.rb-ico { display: inline-flex; font-size: 15px; color: var(--c); filter: drop-shadow(0 0 5px var(--c)); }
.rb-name { font-weight: 800; color: var(--ink); letter-spacing: 0.05em; }
.rb-lv { font-family: var(--font-display); font-size: 16px; color: var(--c); text-shadow: var(--halo-strong), 0 0 10px var(--c); }
.rb-bar { width: 100px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(5, 4, 14, 0.35); }
.rb-bar i { position: relative; display: block; height: 100%; width: 0; background: var(--c); box-shadow: 0 0 8px var(--c); transition: width 0.4s ease; }
.rb-bar i::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--c); }
.rb-pct { color: var(--ink-dim); }
.ribbon.gain .rb-bar { animation: rbGain 0.7s ease; }
.ribbon.gain .rb-ico { animation: rbIco 0.7s ease; }
@keyframes rbGain { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 30% { box-shadow: 0 0 14px var(--c); } 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes rbIco { 30% { transform: scale(1.35); } }
.banner.levelup .b-kicker { color: var(--c); letter-spacing: 0.3em; text-transform: uppercase; font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 700; }
.fx .ico { font-size: 13px; vertical-align: -0.12em; margin-right: 2px; }

/* --------------------------------------------------------------- skills suite: requirements */
.lvl { display: inline-flex; align-items: center; gap: 4px; }
.lvl .ico { font-size: 12px; color: var(--c, var(--gold)); }
.tt-reqs { margin-top: 6px; font-size: 12.5px; color: var(--ink-dim); display: flex; gap: 6px; flex-wrap: wrap; }
.tt-reqs .ok { color: var(--good); }
.tt-reqs .bad { color: var(--bad); }
.wlabel.cold { color: #ffcf9a; border-color: rgba(255, 179, 90, 0.35); }
.wlabel.cold .ico { color: #ffb35a; }
.wlabel.cold b { color: #ffb35a; }
.rl-req { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.p-skill { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; color: var(--c); padding: 3px 10px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.p-skill i { width: 50px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--c) calc(var(--f) * 100%), rgba(255, 255, 255, 0.12) 0); }
.batch { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.weave.sm { min-width: 0; padding: 7px 11px; font-size: 11.5px; letter-spacing: 0.04em; }

/* --------------------------------------------------------------- skills panel */
.skills { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; min-height: 460px; }
.sk-left { display: flex; flex-direction: column; gap: 4px; }
.sk-rad { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 5px; background: radial-gradient(ellipse at left, rgba(236, 201, 120, 0.14), transparent 70%); border: 1px solid rgba(236, 201, 120, 0.28); margin-bottom: 6px; }
.sk-rad-n { font-family: var(--font-display); font-size: 44px; line-height: 1; color: #fff6dc; text-shadow: 0 0 20px rgba(255, 220, 150, 0.7); min-width: 64px; text-align: center; }
.sk-rad b { font-family: var(--font-display); font-size: 17px; display: block; }
.sk-rad span { display: block; font-size: 13px; color: var(--ink-dim); }
.sk-rad em { display: block; font-style: normal; font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.sk-fam .j-sec { margin: 10px 0 6px; }
.sk { width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 6px; border-radius: 5px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.03); text-align: left; transition: all 0.2s; }
.sk:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.sk.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 18%, transparent); }
.sk-ico { width: 40px; height: 40px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--c, #aaa); background: radial-gradient(circle, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent 75%); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, #888) 40%, transparent)); }
.sk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sk-main b { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: 0.04em; }
.sk-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sk-bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sk-next { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lv { font-family: var(--font-display); font-size: 28px; color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); min-width: 42px; text-align: right; }
.sk.sealed { cursor: default; opacity: 0.42; }
.sk.sealed .sk-ico { filter: grayscale(1); }
.sk-seal { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; }
.sk-guide { border-radius: 5px; border: 1px solid rgba(255, 236, 200, 0.08); background: rgba(255, 255, 255, 0.02); padding: 18px; max-height: 64vh; overflow-y: auto; }
.sg-head { display: flex; gap: 14px; align-items: flex-start; }
.sg-ico { width: 52px; height: 52px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 25%, transparent), transparent 75%); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 50%, transparent)); }
.sg-head h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.sg-head h3 em { font-style: normal; color: var(--c); margin-left: 6px; }
.sg-head p { margin: 4px 0 0; font-family: var(--font-lore); font-style: italic; font-size: 15.5px; color: var(--ink-dim); line-height: 1.35; }
.sg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.sg-stats div { padding: 8px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 2px; }
.sg-stats span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.sg-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sg-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sg-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.025); opacity: 0.5; }
.sg-row.got { opacity: 1; }
.sg-row.got .sg-lv { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.sg-lv { width: 34px; flex: none; text-align: center; font-weight: 800; font-size: 13px; padding: 3px 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sg-ri { font-size: 17px; color: var(--c); display: flex; }
.sg-row div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-row b { font-size: 13.5px; }
.sg-row div span { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-row em { font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
.sg-row.done em { color: var(--good); }

/* --------------------------------------------------------------- satchel */
.satchel .j-sec { margin-top: 14px; }
.satchel .j-sec .dim { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 12%, transparent), rgba(255, 255, 255, 0.02) 70%); text-align: center; }
.it-ico { font-size: 28px; color: var(--c); filter: drop-shadow(0 0 7px var(--c)); display: flex; }
.it b { font-size: 16px; font-variant-numeric: tabular-nums; }
.it-name { font-size: 12px; color: var(--ink-dim); line-height: 1.25; }
.sat-foot { margin-top: 18px; font-size: 13.5px; color: var(--gold); display: flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------- lumens codex */
.lm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 10px; }
.lm { display: flex; gap: 14px; padding: 14px 16px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: radial-gradient(ellipse at left, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); }
.lm.unmet { opacity: 0.4; filter: grayscale(0.7); }
.lm-dot { width: 18px; height: 18px; margin-top: 4px; flex: none; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--c) 45%, transparent 72%); box-shadow: 0 0 14px var(--c); }
.lm b { font-family: var(--font-display); font-size: 17px; display: block; }
.lm em { font-style: normal; font-size: 12.5px; color: var(--c); letter-spacing: 0.06em; }
.lm .lore { font-size: 15px; margin: 6px 0 0; }
.map-legend i.eddy { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8ff0ff; background: none; }
.map-legend i.hollow { width: 10px; height: 10px; border-radius: 50%; background: #7a5aa8; box-shadow: 0 0 6px #b89aff; }
.map-legend i.current { height: 6px; background: none; border-top: 2px solid #bff4ff; border-bottom: 2px solid #bff4ff; border-radius: 0; box-shadow: 0 0 6px rgba(191, 244, 255, 0.6); }
.map-legend i.course { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ffe08a; background: none; }

/* --------------------------------------------------------------- save code */
.m-save { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.m-save .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 13px; }
.m-code textarea, .c-input { width: 100%; margin-top: 10px; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(236, 201, 120, 0.28); background: rgba(4, 4, 14, 0.6); color: #fff4d8; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: text; -webkit-user-select: text; }
.confirm .c-input { margin: 0 0 16px; }
.menu .dim b { color: var(--gold); }

@media (max-width: 900px) {
  .skills { grid-template-columns: 1fr; }
  .sk-guide { max-height: none; }
}
@media (max-width: 640px) {
  .ribbon .rb-pct { display: none; }
  .rb-bar { width: 60px; }
}

/* --------------------------------------------------------------- lumenfishing, kindling */
/* both happen in the world; the screen keeps only a quiet way to step away */
.fishing, .kindle, .drift { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 6; }
.fishing .leave, .kindle .leave, .drift .leave { opacity: 0.7; }
.fishing .leave:hover, .kindle .leave:hover, .drift .leave:hover { opacity: 1; }
/* while you fish, the world has the screen to itself; while you kindle, the whisper stays to guide you */
.hud.fishing-on .abilities, .hud.fishing-on .whisper, .hud.kindle-on .abilities, .hud.drift-on .abilities, .hud.drift-on .whisper { opacity: 0; pointer-events: none; transition: opacity 0.6s; }

/* --------------------------------------------------------------- speech */
.speech { position: absolute; left: 0; top: 0; translate: -50% -100%; margin-top: -8px; max-width: 330px; padding: 9px 15px 10px; border-radius: 4px; background: linear-gradient(180deg, rgba(22, 20, 46, 0.95), rgba(10, 9, 24, 0.96)); border: 1px solid color-mix(in srgb, var(--c) 40%, rgba(236, 201, 120, 0.3)); box-shadow: 0 8px 24px rgba(0, 0, 8, 0.5), 0 0 18px color-mix(in srgb, var(--c) 14%, transparent); animation: toastIn 0.4s ease; }
.speech::after { content: ''; position: absolute; left: calc(50% - 6px); bottom: -6px; width: 11px; height: 11px; transform: rotate(45deg); background: rgb(11, 10, 25); border-right: 1px solid color-mix(in srgb, var(--c) 40%, rgba(236, 201, 120, 0.3)); border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, rgba(236, 201, 120, 0.3)); }
.speech b { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--c); letter-spacing: 0.05em; }
.speech b em { font-style: italic; font-family: var(--font-lore); font-weight: 400; color: var(--ink-faint); font-size: 14px; letter-spacing: 0; }
.speech span { display: block; margin-top: 3px; font-family: var(--font-lore); font-size: 16px; line-height: 1.34; color: var(--ink); }

/* --------------------------------------------------------------- offerings */
.offering { max-width: 480px; text-align: left; }
.offering h3, .offering p { text-align: left; }
.of-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: #ffb35a; margin-bottom: 4px; }
.of-sec { font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 14px 0 7px; }
.of-reqs, .of-cost { display: flex; gap: 6px; flex-wrap: wrap; }
.of-reqs span { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; padding: 4px 10px; border-radius: 3px; background: rgba(255, 236, 200, 0.05); border: 1px solid rgba(236, 201, 120, 0.14); }
.of-reqs .ok { color: var(--good); } .of-reqs .bad { color: var(--bad); }
.offering .c-actions { justify-content: flex-end; margin-top: 20px; }
.offering .btn[disabled] { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.offering .btn .ico { margin-right: 6px; }
.whats-new { max-width: 560px; text-align: left; }
.whats-new h3, .whats-new p { text-align: left; }
.wn-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; margin: 6px 0; border-radius: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.wn-ico { font-size: 22px; color: var(--c); filter: drop-shadow(0 0 6px var(--c)); display: flex; margin-top: 2px; }
.wn-row b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink); }
.wn-row span { display: block; font-size: 14px; color: var(--ink-dim); line-height: 1.45; }
.wn-row kbd { min-width: 0; padding: 1px 6px; font-size: 11.5px; }
.whats-new .wn-save { margin: 14px 0 0; font-size: 13.5px; color: var(--gold); }
.whats-new .c-actions { justify-content: flex-end; margin-top: 16px; }
.title-actions .btn small { display: block; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.2em; opacity: 0.75; font-weight: 800; }

/* --------------------------------------------------------------- review fixes */
#ui .fishing .leave, #ui .kindle .leave, #ui .drift .leave { pointer-events: auto; }
.leave { position: relative; isolation: isolate; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 24px; border: 0; background: rgba(236, 201, 120, 0.4); color: var(--ink-dim); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); transition: color 0.2s, background 0.2s; }
.leave::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: rgba(10, 9, 24, 0.88); clip-path: polygon(9.5px 0, calc(100% - 9.5px) 0, 100% 50%, calc(100% - 9.5px) 100%, 9.5px 100%, 0 50%); }
.leave:hover { color: var(--ink); background: var(--gold); }
.leave .ico { font-size: 14px; }
/* long tab strips wrap instead of hiding tabs off the edge */
.p-head { flex-wrap: wrap; row-gap: 10px; }
.p-tabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
.p-tabs button { padding: 7px 11px; }
/* tall dialogs scroll on short screens */
.confirm-wrap { overflow-y: auto; align-items: safe center; }
.confirm { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 640px) {
  .ribbon { display: none; }
  .menu .m-actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- alchemy (DESIGN.md → Alchemy) */
/* the tonics working on you, under the realm's name */
.where-tonic { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; opacity: 0; transition: opacity 1.2s; }
.where-tonic.on { opacity: 1; }
.where-tonic span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-lore); font-style: italic; font-size: 14.5px; color: var(--c); text-shadow: var(--halo-strong), 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.where-tonic i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* Cinna's still: the tonics, the wheel, the flask */
.still-card { max-width: 980px; width: 100%; padding: 20px 22px; text-align: left; }
.still-card .of-kicker { color: #ffb8e0; }
.sc-body { display: grid; grid-template-columns: 250px 1fr; gap: 16px; margin-top: 8px; }
.sc-list { display: flex; flex-direction: column; gap: 4px; max-height: 64vh; overflow-y: auto; padding-right: 4px; }
.sc-tonic { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; text-align: left; padding: 7px 9px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.025); cursor: pointer; color: inherit; font: inherit; }
.sc-tonic:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.sc-tonic.on { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent); }
.sc-tonic.locked { opacity: 0.38; cursor: default; grid-template-columns: 14px 1fr; }
.sc-tonic b { display: block; font-size: 13.5px; color: var(--ink); }
.sc-tonic div span { display: block; font-size: 11.5px; color: var(--ink-faint); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.sc-dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--c) 55%); box-shadow: 0 0 8px var(--c); display: inline-block; flex: none; }
.sc-str { display: flex; gap: 2px; align-items: center; }
.sc-str em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 3px; border-radius: 4px; color: var(--ink-faint); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-str em.on { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.sc-held { font-style: normal; font-size: 11px; font-weight: 800; margin-left: 3px; min-width: 16px; text-align: center; padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, var(--c) 30%, transparent); color: var(--ink); }
.sc-brew { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-top { display: grid; grid-template-columns: 264px 1fr; gap: 16px; align-items: start; }
.sc-wheel canvas { width: 264px; height: 264px; display: block; cursor: crosshair; border-radius: 50%; }
.sc-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-side h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--ink); }
.sc-side h3 .sc-dot { width: 14px; height: 14px; }
.sc-hint { margin: 0 !important; font-family: var(--font-lore); font-style: italic; font-size: 14.5px !important; color: var(--ink-dim); }
.sc-meter { position: relative; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 12px; }
.sc-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: width 0.35s ease; }
.sc-meter b { position: absolute; top: -15px; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: var(--ink-faint); }
.sc-meter b::after { content: ''; position: absolute; left: 50%; top: 13px; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.4); }
.sc-meter b.hit { color: var(--ink); text-shadow: 0 0 8px #fff; }
.sc-meter b.shut { opacity: 0.35; }
.sc-counts { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sc-state { font-size: 14px; line-height: 1.45; color: var(--ink-dim); min-height: 38px; }
.sc-state b { font-weight: 800; }
.sc-state .q-clear { color: #e8f0ff; } .sc-state .q-bright { color: #fff4c8; text-shadow: 0 0 8px rgba(255, 240, 180, 0.6); } .sc-state .q-radiant { color: var(--ink); text-shadow: 0 0 10px #fff, 0 0 20px #ffd8f4; }
.sc-poured { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 22px; }
.sc-pour { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.sc-pour i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sc-pour:hover { border-color: var(--ink); }
.sc-pour:hover i { opacity: 0.4; }
.sc-cost { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sc-lab { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.sc-note { font-size: 14px; line-height: 1.45; color: #ffe8f4; padding: 7px 10px; border-radius: 4px; background: rgba(255, 184, 224, 0.08); border: 1px solid rgba(255, 184, 224, 0.2); }
.sc-note i { font-style: normal; color: #ffb8e0; font-weight: 700; }
.sc-palette { max-height: 22vh; overflow-y: auto; padding-right: 4px; }
.sc-sec { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 4px 0 5px; }
.sc-pigs { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-pig { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 3px; font: inherit; font-size: 12.5px; color: var(--ink-dim); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; }
.sc-pig i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); }
.sc-pig b { font-weight: 600; color: var(--ink); }
.sc-pig em { font-style: normal; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sc-pig:hover:not(:disabled), .sc-pig.hov { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sc-pig:disabled { opacity: 0.4; cursor: default; }
.sc-none { padding: 10px 0; }
.still-card .c-actions { justify-content: flex-end; margin-top: 4px; }
@media (max-width: 900px) {
  .sc-body { grid-template-columns: 1fr; }
  .sc-list { max-height: 26vh; }
  .sc-top { grid-template-columns: 1fr; justify-items: center; }
  .sc-side { width: 100%; }
}

/* the satchel: what you carry, and what each thing is for */
.satchel-wrap { display: grid; grid-template-columns: 1fr 290px; gap: 18px; align-items: start; }
.satchel-wrap .satchel { min-width: 0; }
button.it { cursor: pointer; font: inherit; color: inherit; }
button.it:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
button.it.on { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.sat-active { display: flex; flex-wrap: wrap; gap: 6px; }
.sat-on { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); font-size: 13.5px; }
.sat-on i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sat-on em { font-style: normal; color: var(--ink-faint); font-size: 12.5px; }
.sat-detail { position: sticky; top: 0; padding: 14px 16px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c, #f3d38a) 30%, transparent); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--c, #f3d38a) 10%, transparent), rgba(255, 255, 255, 0.02) 70%); }
.sat-detail.empty { border-color: rgba(255, 255, 255, 0.08); }
.sd-head { display: flex; align-items: center; gap: 10px; }
.sd-head b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); }
.sd-head em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.sat-detail .lore { font-size: 14px; margin: 10px 0; color: var(--ink-dim); }
.sat-detail .btn { width: 100%; justify-content: center; margin-bottom: 6px; }
.sd-how { font-size: 13px; color: var(--ink-faint); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.sd-sec { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 10px 0 4px; }
.sat-detail ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.sat-detail li.once { color: var(--ink-faint); }
.sat-detail li.once::after { content: ' · once'; font-size: 11.5px; }
.sat-detail li.more { list-style: none; margin-left: -16px; color: var(--ink-faint); font-style: italic; }
@media (max-width: 760px) { .satchel-wrap { grid-template-columns: 1fr; } .sat-detail { position: static; } }
.still-card .btn[disabled], .sat-detail .btn[disabled] { opacity: 0.4; cursor: default; transform: none; box-shadow: none; filter: saturate(0.5); }
.sc-short { display: block; margin-top: 3px; color: #ffc8a0; }
.sc-appr { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); padding: 7px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 236, 200, 0.08); }
.sc-appr .ico { flex: none; margin-top: 2px; color: #ffe8b8; }
.sc-appr .btn.sm { padding: 3px 10px; font-size: 12.5px; margin-left: 4px; }

/* --------------------------------------------------------------- the village (DESIGN.md → Townsfolk services) */
.role-card, .stall-card { max-width: 600px; text-align: left; }
.role-card h3, .stall-card h3 { text-align: left; }
.pc-row.on { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); cursor: default; opacity: 1; }
.st-row { cursor: default; grid-template-columns: 26px 1fr auto; }
.st-row .pc-cost { align-items: center; max-width: none; }
.st-row i { display: block; max-width: 280px; }
.st-note { margin: 0 0 8px !important; font-size: 13.5px !important; }
.st-sells { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-sell { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); font: inherit; font-size: 13px; color: var(--ink-dim); cursor: pointer; }
.st-sell i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); }
.st-sell b { color: var(--ink); font-weight: 600; }
.st-sell em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.st-sell:hover { border-color: var(--c); }
.stall-card .c-actions, .role-card .c-actions { justify-content: flex-end; margin-top: 12px; }
.vl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-bottom: 12px; }
.vl-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); background: radial-gradient(ellipse at left, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%); }
.vl-row.empty { opacity: 0.45; filter: grayscale(0.6); }
.vl-ico { font-size: 20px; color: var(--c); filter: drop-shadow(0 0 6px var(--c)); display: flex; margin-top: 1px; }
.vl-row div { flex: 1; min-width: 0; }
.vl-row b { display: block; font-size: 14px; color: var(--ink); }
.vl-row span { display: block; font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.vl-row em { font-style: normal; font-size: 11.5px; color: var(--c); white-space: nowrap; margin-top: 2px; }

/* the title's footnote: diamonds for dots */
.title-foot i { display: inline-block; width: 5px; height: 5px; margin: 0 11px; vertical-align: 2px; transform: rotate(45deg); background: var(--gold); opacity: 0.8; }

/* skills not yet learned: their hint, and a look down the road */
.sk.sealed { cursor: pointer; opacity: 0.72; }
.sk.sealed:hover, .sk.sealed.on { opacity: 1; }
.sk.sealed .sk-ico { filter: grayscale(0.6); }
.sk-seal { display: flex; gap: 6px; align-items: baseline; white-space: normal; font-family: var(--font-lore); font-style: italic; font-size: 14px; line-height: 1.3; color: var(--ink-dim); }
.sk-seal .ico { flex: none; font-size: 12px; color: var(--gold); }
.sg-head.sealed .sg-ico { filter: grayscale(0.5); }
.sg-head h3 em .ico { font-size: 18px; color: var(--gold); vertical-align: -0.05em; }
.sg-seal { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; padding: 12px 14px; border-radius: 4px; background: rgba(236, 201, 120, 0.06); border: 1px solid rgba(236, 201, 120, 0.22); font-family: var(--font-lore); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--ink); }
.sg-seal .ico { flex: none; margin-top: 3px; color: var(--gold); }
.sg-more { padding: 6px 10px; font-family: var(--font-lore); font-style: italic; font-size: 14px; color: var(--ink-faint); }

/* the crest and the Skills medallion call to a new player, until they've looked */
.hud.call-skills .crest-ring { animation: crestCall 2.6s ease-in-out infinite; }
.hud.call-skills .hb[data-open="skills"] { animation: medalCall 2.6s ease-in-out infinite; }
.hud.call-skills .hb[data-open="skills"] > span { opacity: 1; transform: translate(0, -50%); }
@keyframes crestCall { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.4)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 225, 160, 0.95)); } }
@keyframes medalCall { 0%, 100% { box-shadow: 0 0 0 3px rgba(8, 7, 20, 0.5), 0 4px 14px rgba(0, 0, 8, 0.5); border-color: rgba(236, 201, 120, 0.5); } 50% { box-shadow: 0 0 0 3px rgba(8, 7, 20, 0.5), 0 0 22px rgba(236, 201, 120, 0.75); border-color: var(--gold); } }