:root {
  color-scheme: dark;
  --void: #03050a;
  --ink: #070b14;
  --panel: rgba(7, 11, 20, .91);
  --line: rgba(156, 181, 211, .22);
  --text: #eef4fb;
  --muted: #93a4b8;
  --faint: #65768b;
  --cyan: #57ddff;
  --violet: #a77aff;
  --gold: #f4bc57;
  --danger: #ff7a7a;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--void); }
body {
  min-height: 100dvh;
  color: var(--text);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 4px;
}
[hidden] { display: none !important; }

.build-flags { display: inline-flex; gap: 7px; color: var(--muted); font: 9px/1.4 ui-monospace, monospace; opacity: .65; }
.build-flags span { border: 1px solid var(--line); padding: 2px 5px; border-radius: 2px; }
.control-mode-notice {
  position: fixed;
  z-index: 120;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(3, 5, 10, 0.92);
  border: 1px solid var(--gold);
  border-radius: 20px;
  color: #fff;
  font: 700 12px/1.2 ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(244, 188, 87, 0.4), 0 4px 16px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: notice-slide-down .25s ease-out;
}

.control-mode-notice .notice-key {
  display: inline-block;
  padding: 2px 7px;
  background: var(--gold);
  color: #05070d;
  border-radius: 3px;
  font-weight: 850;
  font-size: 11px;
}
@keyframes notice-slide-down {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.topbar {
  position: fixed; z-index: 50; inset: 0 0 auto; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) clamp(18px, 4vw, 64px) 10px;
  background: linear-gradient(#03050ae6, transparent);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.wordmark { color: var(--text); text-decoration: none; font-weight: 850; letter-spacing: .24em; font-size: 14px; }
.wordmark span { color: var(--gold); }
.wordmark-group { display: flex; align-items: baseline; gap: 7px; pointer-events: auto; }
.wordmark-stack { display: flex; flex-direction: column; gap: 3px; }
.alpha-test-badge {
  display: inline-block; align-self: flex-start;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(255, 122, 122, 0.12); border: 1px solid rgba(255, 122, 122, 0.4);
  color: var(--danger); font: 700 8.5px/1.3 ui-monospace, monospace;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.build-version { font: 500 9px/1 ui-monospace, monospace; color: var(--muted); letter-spacing: .10em; opacity: 0.5; }
.session-bar { display: flex; align-items: center; gap: 12px; }
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(4, 9, 18, 0.9);
  border: 1px solid rgba(87, 221, 255, 0.45);
  border-radius: 20px;
  box-shadow: 0 0 16px rgba(87, 221, 255, 0.22), inset 0 0 10px rgba(87, 221, 255, 0.08);
  font: 600 12px/1 ui-monospace, monospace;
  color: #e0f2fe;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.wallet-chip-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  flex-shrink: 0;
}
.wallet-chip-address {
  letter-spacing: 0.04em;
  color: #fcebc7;
}
.wallet-disconnect-button {
  margin-left: 4px;
  padding: 3px 8px;
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid rgba(255, 120, 120, 0.4);
  border-radius: 12px;
  color: #ff9999;
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wallet-disconnect-button:hover, .wallet-disconnect-button:focus-visible {
  background: rgba(255, 80, 80, 0.35);
  border-color: #ff7777;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.4);
}
/* Landing page & pre-world states: hide Settings button in the header topbar */
body[data-state="disconnected"] #settings-button,
body[data-state="signing"] #settings-button,
body[data-state="locked"] #settings-button,
body[data-state="avatar-choice"] #settings-button {
  display: none !important;
}
.text-button { color: var(--muted); border: 0; background: none; cursor: pointer; }

.eyebrow { margin: 0 0 9px; color: var(--gold); font: 700 11px/1.3 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .025em; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 70px); line-height: .98; font-weight: 500; }
h2 { margin: 0; font-size: clamp(27px, 3vw, 44px); line-height: 1.05; font-weight: 500; }
.error { min-height: 1.4em; color: var(--danger); }

.gate {
  min-height: 100dvh; display: grid; grid-template-columns: minmax(300px, 48vw) minmax(300px, 540px);
  align-items: center; gap: clamp(30px, 6vw, 100px); padding: 90px clamp(24px, 8vw, 130px) 50px;
  background:
    radial-gradient(circle at 26% 45%, rgba(77, 149, 204, .13), transparent 30%),
    linear-gradient(120deg, #050914, #020307 68%);
}
.gate-mirror {
  position: relative; justify-self: center; width: min(38vw, 440px); aspect-ratio: .68;
  border: 2px solid rgba(160, 184, 214, .28); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 43%, #1c2935, #080d15 58%, #010205 80%);
  box-shadow: inset 0 0 90px #000, 0 0 100px rgba(76, 162, 221, .08);
  cursor: pointer;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.gate-mirror::before, .gate-mirror::after {
  content: ""; position: absolute; inset: -8px; border: 1px solid rgba(244,188,87,.25); border-radius: 50%;
  transition: inset 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.gate-mirror::after { inset: 12px; border-color: rgba(87,221,255,.12); }
.gate-depth {
  position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(167,122,255,.18), transparent 60%);
  animation: breathe 5s ease-in-out infinite;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), background 0.8s var(--ease);
}
.gate-portal-light {
  position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(87, 221, 255, 0.35), rgba(167, 122, 255, 0.25) 45%, transparent 75%);
  opacity: 0;
  transform: scale(0.7);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.8s var(--ease);
}
.gate-sigil {
  position: absolute; width: 1px; height: 38%; left: 50%; top: 31%;
  background: linear-gradient(transparent, var(--gold), transparent); opacity: .45;
  transition: height 0.6s var(--ease), top 0.6s var(--ease), opacity 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.gate-compass-option {
  margin-top: 14px;
}
.gate-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font: 500 13px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--muted);
  transition: color 0.2s ease;
}
.gate-checkbox-label:hover {
  color: var(--text);
}
.gate-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.gate-checkbox-custom {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: rgba(8, 14, 26, 0.85);
  border: 1.5px solid rgba(244, 188, 87, 0.5);
  border-radius: 4px;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.gate-checkbox:focus-visible + .gate-checkbox-custom {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.gate-checkbox:checked + .gate-checkbox-custom {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(244, 188, 87, 0.45);
}
.gate-checkbox:checked + .gate-checkbox-custom::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #05070d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gate-checkbox:checked ~ .gate-checkbox-text {
  color: #fcebc7;
}
.gate-copy { max-width: 520px; }
.gate-copy > p:not(.eyebrow):not(.error) { margin: 24px 0 30px; max-width: 46ch; color: var(--muted); font-size: 17px; }
.primary-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px;
  border: 1px solid var(--gold); border-radius: 2px; cursor: pointer; text-decoration: none;
  text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 750;
}
.primary-button { background: var(--gold); color: #1b1307; }
.secondary-button { background: transparent; color: var(--text); border-color: var(--line); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.notice { border-left: 2px solid var(--gold); padding-left: 14px; font-size: 13px !important; }

body[data-state="signing"] .gate-mirror { border-color: rgba(87,221,255,.58); box-shadow: inset 0 0 90px #000, 0 0 100px rgba(87,221,255,.18); }
body[data-state="locked"] .gate-mirror { filter: grayscale(.65) contrast(.88); }

.avatar-ritual {
  min-height: 100dvh; padding: 100px clamp(20px, 5vw, 80px) 50px;
  background: radial-gradient(circle at 50% 34%, #17243a, #05070d 60%);
}
.ritual-copy { max-width: 850px; margin: 0 auto 38px; text-align: center; }
.ritual-copy p:last-child { max-width: 65ch; margin: 22px auto 0; color: var(--muted); }
.avatar-choices { display: grid; grid-template-columns: repeat(2, minmax(240px, 430px)); justify-content: center; gap: clamp(14px, 4vw, 54px); }
.avatar-choice { border: 1px solid var(--line); background: rgba(7,11,20,.6); color: inherit; padding: 0 0 20px; cursor: pointer; text-align: left; transition: transform .35s var(--ease), border-color .35s, background .35s; }
.avatar-choice:hover { transform: translateY(-7px); border-color: rgba(87,221,255,.62); background: rgba(10,17,31,.88); }
.avatar-frame { display: block; height: min(54vh, 520px); overflow: hidden; background: linear-gradient(#0d1525, #05070d); }
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(1.12) contrast(1.05); }
.choice-name, .choice-meta { display: block; margin-inline: 20px; }
.choice-name { margin-top: 17px; font-family: Georgia, serif; font-size: 22px; }
.choice-meta { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.avatar-ritual > .error { text-align: center; }

.world { position: relative; min-height: 100dvh; overflow: hidden; background: #03050a; }
.scene { position: absolute; inset: -7px; background-position: center; background-size: cover; isolation: isolate; transform: translate(var(--look-x, 0), var(--look-y, 0)) scale(1.015); transition: transform .45s var(--ease); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 48%, transparent 30%, rgba(1,2,5,.6) 100%), linear-gradient(transparent 65%, rgba(1,2,5,.68)); }
.scene-main { background-image: url('/assets/room-main.webp'); }
.scene-portals { background-image: url('/assets/room-portals.webp'); }
.scene-title { position: absolute; z-index: 4; top: 11%; left: 50%; transform: translateX(-50%); width: min(90vw, 680px); text-align: center; text-shadow: 0 2px 14px #000; }
.scene-title > p:last-child { color: #bdcad7; }

.character-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; touch-action: manipulation; }

.scene { transition: transform .7s var(--ease); will-change: transform; }
.cast-trail-layer { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hand-presence.walking { animation: hand-walk .35s ease-in-out 2; }
@keyframes hand-walk { 50% { transform: translateY(5px); } }
.hand-idle img { transform: translateY(1px); }
.hand-presence { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transform: translate(calc(var(--look-x, 0px) * .28), calc(var(--look-y, 0px) * .2)); transition: opacity .32s ease, transform .48s var(--ease); }
body[data-state="world"] .hand-presence { opacity: 1; }
.hand-mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body[data-hand-mesh="true"] .hand-idle { opacity: 0 !important; }
.hand-idle { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .2s ease; }
.hand-idle img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 10px rgba(87,221,255,.12)); animation: hand-aura-breathe 6s ease-in-out infinite; }
body[data-hand-form="feminine"] .hand-idle-feminine,
body[data-hand-form="masculine"] .hand-idle-masculine { opacity: 1; }
[data-hand-active="true"] .hand-presence { opacity: .16; transition: opacity .14s ease, transform .48s var(--ease); }
.hand-layer { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none; opacity: 0; transform: translate(calc(var(--look-x, 0px) * .28), calc(var(--look-y, 0px) * .2)); transition: opacity .3s ease, transform .35s var(--ease); }
[data-hand-active="true"] .hand-layer { opacity: 1; transition: opacity .14s ease, transform .35s var(--ease); }
.world::after { content: ""; position: absolute; z-index: 7; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 88%, rgba(87,221,255,.22), transparent 42%); transition: opacity .18s ease; }
.hand-fallback-flash .world::after { opacity: 1; animation: hand-fallback-flash .36s ease-out both; }

/* Real 3D chamber (2026-08-01). Sits inside .scene-main and, when it boots,
   covers the pre-rendered backdrop entirely -- the .webp stays underneath as
   the automatic fallback when WebGL is unavailable, so nothing regresses on
   a device that can't run it. The hotspots above keep working because their
   screen positions are projected from the 3D anchors each frame. */
.chamber-3d-mount { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.chamber-3d-mount.is-live { opacity: 1; pointer-events: auto; cursor: crosshair; touch-action: none; }
.chamber-3d { display: block; width: 100%; height: 100%; }
/* With the 3D room live the flat backdrop must not show through anywhere. */
.scene-main[data-chamber3d="live"] { background-image: none; }
.scene-main[data-chamber3d="live"] .hotspot { pointer-events: none; }
/* Broken-triangle reticle (owner's reference art): three tapered blades
   around three outward chevrons. Hollow blades with a bright outline, so the
   shape survives over the lit mirror as well as over the near-black stone.
   On a target the whole triangle contracts onto the aim point and goes gold. */
.chamber-reticle {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 62px; height: 62px;
  transform: translate(-50%,-50%); pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.95));
  transition: filter .16s ease;
}
.chamber-reticle svg { width: 100%; height: 100%; overflow: visible; }
.reticle-blades path {
  fill: rgba(4,8,14,.42); stroke: rgba(222,242,255,.92); stroke-width: 2.2;
  stroke-linejoin: round;
  transition: stroke .16s ease, fill .16s ease;
}
.reticle-core path {
  fill: none; stroke: rgba(222,242,255,.92); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .16s ease;
}
.reticle-blades, .reticle-core {
  transform-origin: 0 0;
  transition: transform .18s cubic-bezier(.2,.9,.25,1);
}
.chamber-reticle[data-active="true"] { filter: drop-shadow(0 0 8px rgba(244,188,87,.9)) drop-shadow(0 0 3px rgba(0,0,0,.95)); }
.chamber-reticle[data-active="true"] .reticle-blades { transform: scale(.78); }
.chamber-reticle[data-active="true"] .reticle-core { transform: scale(1.28); }
.chamber-reticle[data-active="true"] .reticle-blades path { stroke: var(--gold); fill: rgba(40,24,4,.5); }
.chamber-reticle[data-active="true"] .reticle-core path { stroke: #ffe6a8; }
@media (prefers-reduced-motion: reduce) {
  .reticle-blades, .reticle-core, .reticle-blades path, .reticle-core path { transition: none; }
}
.chamber-target-label {
  position: absolute; z-index: 5; left: 50%; top: calc(50% + 22px); transform: translateX(-50%);
  min-height: 1em; color: var(--text); font: 600 11px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; text-shadow: 0 2px 8px #000; pointer-events: none;
}

.hotspot { position: absolute; z-index: 3; border: 1px solid transparent; background: transparent; color: transparent; cursor: pointer; }
.hotspot span { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 5px); white-space: nowrap; padding: 7px 10px; color: var(--text); background: rgba(3,5,10,.9); border: 1px solid rgba(244,188,87,.35); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; font-size: 12px; }
/* Living auras: CSS-only, no extra DOM, opacity baked into every keyframe so
   it never depends on a separate transition tick (see commit 40386f7).
   No linear-gradient "shimmer" anywhere: a straight diagonal band inside a
   rectangular pseudo-element reads as a hard geometric edge (the "squaring"
   the user flagged), never organic. Both auras are now real stardust: a
   soft ambient glow underneath (::before, breathing only, no rotation --
   a symmetric glow gains nothing from spinning) plus a dense field of
   small stars (::after) that actually orbits. IMPORTANT: a single element
   can only run ONE animation that touches `transform` at a time -- if two
   listed animations both declare `transform`, the later one wins outright,
   it does not compose. That bug silently froze the mirror ring's rotation
   for two iterations (mirror-swirl lost to aura-breathe); fixed by giving
   each pseudo-element only one transform-animation each. */
.hotspot::before, .hotspot::after {
  content: ""; position: absolute; inset: -20%; border-radius: inherit;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
}
.hotspot::before {
  background: radial-gradient(ellipse at 50% 46%, rgba(244,188,87,.5), rgba(244,188,87,.15) 46%, transparent 72%);
  filter: blur(7px);
}
.hotspot::after {
  background:
    radial-gradient(circle 2.6px at 58.3% 48.1%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.7px at 71.2% 57.3%, rgba(255,230,165,0.83), transparent 62%),
    radial-gradient(circle 1.3px at 76.9% 71.9%, rgba(255,230,165,0.78), transparent 62%),
    radial-gradient(circle 1.2px at 60.5% 73.1%, rgba(255,230,165,0.9), transparent 62%),
    radial-gradient(circle 1.4px at 57.6% 74.7%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.2px at 47.9% 88.6%, rgba(255,230,165,0.76), transparent 62%),
    radial-gradient(circle 1.8px at 43.8% 65.5%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.8px at 23.2% 81.4%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 2.0px at 5.9% 60.8%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.2px at 42.5% 48.9%, rgba(255,230,165,0.89), transparent 62%),
    radial-gradient(circle 1.0px at 43.5% 48.1%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.7px at 31.1% 37.2%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.5px at 35.9% 21.3%, rgba(255,230,165,0.89), transparent 62%),
    radial-gradient(circle 2.5px at 46.1% 40.1%, rgba(255,230,165,0.88), transparent 62%),
    radial-gradient(circle 1.5px at 50.7% 20.6%, rgba(255,230,165,0.71), transparent 62%),
    radial-gradient(circle 1.8px at 75.2% 17.1%, rgba(255,230,165,1.0), transparent 62%),
    radial-gradient(circle 1.1px at 85.5% 26.6%, rgba(255,230,165,0.99), transparent 62%),
    radial-gradient(circle 2.5px at 90.9% 39.3%, rgba(255,230,165,1.0), transparent 62%);
}
/* Books only: the hotspot box is tiny, so the same -20% inset is only a few
   px in absolute terms -- boost it here without touching the mirror. */
.book-hotspot::before, .book-hotspot::after { inset: -60%; }
.book-hotspot::before { filter: blur(9px); }
.hotspot:hover::before, .hotspot:focus-visible::before {
  opacity: 1 !important;
  animation: aura-breathe 2.6s ease-in-out infinite;
}
.hotspot:hover::after, .hotspot:focus-visible::after {
  opacity: 1 !important;
  animation: ember-orbit 9s linear infinite;
}
.book-hotspot-b::after { animation-delay: -3s; }
.book-hotspot-c::after { animation-delay: -6s; }

.mirror-hotspot::before {
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(87,221,255,.55), rgba(167,122,255,.45) 30%, rgba(87,221,255,.12) 50%,
    rgba(167,122,255,.5) 75%, rgba(87,221,255,.55));
  filter: blur(9px);
}
.mirror-hotspot::after {
  border-radius: 50%;
  background:
    radial-gradient(circle 2.5px at 57.9% 49.0%, rgba(214,247,255,0.89), transparent 62%),
    radial-gradient(circle 1.4px at 20.4% 55.1%, rgba(196,158,255,0.88), transparent 62%),
    radial-gradient(circle 1.4px at 81.2% 50.8%, rgba(214,247,255,0.96), transparent 62%),
    radial-gradient(circle 1.3px at 70.6% 37.9%, rgba(196,158,255,0.84), transparent 62%),
    radial-gradient(circle 0.9px at 65.4% 61.6%, rgba(214,247,255,0.83), transparent 62%),
    radial-gradient(circle 2.0px at 78.7% 18.0%, rgba(196,158,255,0.69), transparent 62%),
    radial-gradient(circle 1.3px at 28.5% 18.8%, rgba(214,247,255,0.93), transparent 62%),
    radial-gradient(circle 1.2px at 51.7% 16.1%, rgba(196,158,255,0.95), transparent 62%),
    radial-gradient(circle 1.5px at 47.9% 77.1%, rgba(214,247,255,0.82), transparent 62%),
    radial-gradient(circle 2.0px at 8.3% 18.0%, rgba(196,158,255,0.87), transparent 62%),
    radial-gradient(circle 1.3px at 26.6% 64.4%, rgba(214,247,255,0.78), transparent 62%),
    radial-gradient(circle 1.9px at 70.0% 81.0%, rgba(196,158,255,0.75), transparent 62%),
    radial-gradient(circle 1.0px at 30.0% 36.9%, rgba(214,247,255,0.89), transparent 62%),
    radial-gradient(circle 2.7px at 64.9% 68.1%, rgba(196,158,255,0.71), transparent 62%),
    radial-gradient(circle 2.7px at 88.0% 47.6%, rgba(214,247,255,0.72), transparent 62%),
    radial-gradient(circle 1.6px at 14.8% 15.2%, rgba(196,158,255,0.83), transparent 62%),
    radial-gradient(circle 1.0px at 58.8% 84.2%, rgba(214,247,255,0.91), transparent 62%),
    radial-gradient(circle 2.2px at 87.3% 35.7%, rgba(196,158,255,0.74), transparent 62%),
    radial-gradient(circle 1.1px at 50.8% 78.1%, rgba(214,247,255,1.00), transparent 62%),
    radial-gradient(circle 1.7px at 54.5% 85.5%, rgba(196,158,255,0.87), transparent 62%),
    radial-gradient(circle 1.5px at 34.7% 60.5%, rgba(214,247,255,0.91), transparent 62%),
    radial-gradient(circle 2.5px at 31.0% 49.1%, rgba(196,158,255,0.90), transparent 62%),
    radial-gradient(circle 1.7px at 92.5% 83.4%, rgba(214,247,255,0.85), transparent 62%),
    radial-gradient(circle 2.2px at 31.0% 21.9%, rgba(196,158,255,0.78), transparent 62%),
    radial-gradient(circle 1.1px at 74.2% 84.6%, rgba(214,247,255,0.83), transparent 62%),
    radial-gradient(circle 2.7px at 77.3% 24.1%, rgba(196,158,255,0.74), transparent 62%),
    radial-gradient(circle 1.3px at 67.4% 68.6%, rgba(214,247,255,0.81), transparent 62%),
    radial-gradient(circle 1.5px at 19.4% 65.1%, rgba(196,158,255,0.75), transparent 62%),
    radial-gradient(circle 1.5px at 60.3% 83.2%, rgba(214,247,255,0.93), transparent 62%),
    radial-gradient(circle 2.5px at 39.6% 24.2%, rgba(196,158,255,0.80), transparent 62%),
    radial-gradient(circle 2.1px at 5.8% 71.5%, rgba(214,247,255,0.96), transparent 62%),
    radial-gradient(circle 2.0px at 84.9% 30.3%, rgba(196,158,255,0.84), transparent 62%),
    radial-gradient(circle 2.2px at 21.2% 17.7%, rgba(214,247,255,0.91), transparent 62%),
    radial-gradient(circle 1.5px at 30.7% 35.5%, rgba(196,158,255,0.69), transparent 62%);
}
.mirror-hotspot:hover::before, .mirror-hotspot:focus-visible::before {
  opacity: 1 !important;
  /* Tried making this conic ring itself rotate: the gradient's seam sweeps
     into view at certain angles and reads as a harsh diagonal streak, worse
     than the calm liked version. Keeping the ring static (breathe only) --
     the "swirl" identity lives entirely in the star field below, which
     genuinely rotates and now carries 20 stars instead of 6. */
  animation: aura-breathe 2.6s ease-in-out infinite, mirror-kawoosh 4.6s ease-in-out infinite;
}
.mirror-hotspot:hover::after, .mirror-hotspot:focus-visible::after {
  opacity: 1 !important;
  animation: mirror-swirl-reverse 7s linear infinite;
}

@keyframes aura-breathe { 0%, 100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.08); opacity: 1; } }
/* Opacity lives inside the keyframes themselves (not a separate transition):
   an animation's 0% state applies the instant it attaches, so the aura never
   depends on a transition tick to become visible. */
@keyframes ember-orbit { from { opacity: 1; transform: rotate(0deg) scale(.95); } to { opacity: 1; transform: rotate(360deg) scale(.95); } }
@keyframes mirror-swirl-reverse { from { opacity: 1; transform: rotate(360deg) scale(.92); } to { opacity: 1; transform: rotate(0deg) scale(.92); } }
/* Mostly calm, one brief bright/saturated spike per cycle -- an occasional
   pulse of energy rather than a constant glow, so it reads as an event. */
@keyframes mirror-kawoosh {
  0%, 78%, 100% { filter: blur(9px) brightness(1) saturate(1); }
  88% { filter: blur(9px) brightness(1.55) saturate(1.5); }
  94% { filter: blur(9px) brightness(1.05) saturate(1.05); }
}
.hotspot:hover span, .hotspot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }

/* Hand-cast magic trail: a swarm of stardust departs from the caster's hand
   toward the object being invoked instead of the camera zooming there (see
   cast-trail.js). Each particle rides its own slightly perturbed arc via
   offset-path, staggered, so the group reads as flying dust, not a beam. */
.cast-group circle { will-change: offset-distance, opacity; }
@keyframes cast-dust {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cast-dust-head {
  0%   { offset-distance: 0%; opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cast-dust-twinkle {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: .9; }
  40%  { opacity: .3; }
  55%  { opacity: 1; }
  78%  { opacity: .8; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cast-fallback-dot { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cast-burst-halo { 0% { r: 3; opacity: .8; } 100% { r: 34; opacity: 0; } }
@keyframes cast-burst-core { 0% { r: 2; opacity: 1; } 60% { r: 10; opacity: .9; } 100% { r: 3; opacity: 0; } }
@keyframes cast-burst-spark {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@keyframes cast-burst-glyph { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }

.book-hotspot { top: 53%; width: 10%; height: 15%; border-radius: 10%; }
.book-hotspot-a { left: 28.5%; }
.book-hotspot-b { left: 60%; }
.book-hotspot-c { left: 77%; }

.mana-hud {
  position: absolute;
  z-index: 12;
  left: clamp(18px, 3vw, 50px);
  top: 86px;
  width: min(300px, 40vw);
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(3,5,10,.94), rgba(3,5,10,.65));
  border-left: 2px solid var(--gold);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  text-shadow: 0 2px 8px #000;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mana-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mana-hud span, .mana-hud strong { display: block; }
.mana-label { color: var(--faint); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; }
.mana-hud > strong { margin: 2px 0 0; color: var(--gold); font: 600 17px ui-monospace, monospace; }
#circle-label { color: var(--text); font-family: Georgia, serif; font-size: 13px; }

.mana-tokens-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.mana-token-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.token-glyph { font-size: 12px; }
.token-name { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex: 1; }
.token-val { font: 600 12px ui-monospace, monospace; }
.mana-token-solar .token-val { color: #ffe6a0; text-shadow: 0 0 6px rgba(244,188,87,0.5); }
.mana-token-lunar .token-val { color: #8de4ff; text-shadow: 0 0 6px rgba(100,210,255,0.5); }

.mana-track { height: 2px; margin-top: 4px; background: rgba(255,255,255,.12); border-radius: 1px; }
#mana-fill { width: 0; height: 100%; background: linear-gradient(90deg, #6fd2ff, var(--gold)); box-shadow: 0 0 10px var(--gold); }

.mana-lunar-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10px;
  color: #a8d5e5;
  background: rgba(14, 32, 48, 0.45);
  border: 1px solid rgba(100, 200, 255, 0.18);
  padding: 3px 6px;
  border-radius: 3px;
}
.lunar-countdown-label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.lunar-countdown-timer { font-family: ui-monospace, monospace; font-weight: bold; color: #fff; }

/* Minimal HUD badges (2026-08-01), Doom Eternal style: no connecting bar --
   that read as a retro solid status strip and covered the hands weirdly.
   Each identity badge floats independently in its own corner, drawn IN
   FRONT of the hands (z-index above hand-presence/hand-layer, back to how
   this worked before the bar experiment) so nothing about hand anchoring
   depends on it. Round face-plate crop kept from that experiment -- that
   part read well. */
.player-avatar {
  position: absolute; z-index: 10; left: clamp(16px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 30px);
  width: clamp(56px, 6vw, 76px); margin: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.85));
}
.player-avatar img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 22%;
  border: 2px solid var(--gold); border-radius: 50%; filter: saturate(1.1);
  box-shadow: 0 0 0 4px rgba(4,3,2,.72), 0 0 16px rgba(244,188,87,.3);
  /* The figure is decorative (pointer-events: none above); only the portrait
     itself is the "bollino" that opens the Public Profile / VIP settings. */
  pointer-events: auto;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.player-avatar img:hover {
  box-shadow: 0 0 0 4px rgba(4,3,2,.8), 0 0 22px rgba(244,188,87,.55);
  transform: scale(1.04);
}
.player-avatar figcaption { margin: 0; font: 8px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,244,251,.7); text-align: center; white-space: nowrap; }

.compass-button { position: absolute; z-index: 15; right: clamp(18px, 3vw, 48px); top: 82px; width: 54px; height: 54px; padding: 8px; color: var(--gold); background: rgba(3,5,10,.75); border: 1px solid rgba(244,188,87,.4); border-radius: 50%; cursor: pointer; }
.compass-button > svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; }
.compass-button > svg path { fill: rgba(244,188,87,.2); }
.compass-menu {
  position: fixed; inset: 0; z-index: 999;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: rgba(4, 7, 14, 0.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; box-sizing: border-box;
}
.compass-header {
  width: 100%; max-width: 1280px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(244, 188, 87, 0.25); padding-bottom: 16px; margin-bottom: 24px;
}
.compass-title-group h3 {
  font-family: Georgia, serif; font-size: clamp(22px, 3.5vw, 32px); color: #fcebc7; margin: 0 0 4px;
  letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(244, 188, 87, 0.4);
}
.compass-title-group p {
  color: #92a4ba; font-size: 13px; margin: 0;
}
.compass-close-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(244, 188, 87, 0.35);
  color: #fcebc7; font-size: 20px; cursor: pointer; transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center;
}
.compass-close-btn:hover {
  background: var(--gold); color: #05070d; font-weight: bold; transform: scale(1.08);
}
.compass-body {
  width: 100%; max-width: 1280px; display: flex; flex-direction: column;
  gap: 20px; align-items: stretch; margin: 0 auto;
}
.compass-section {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.compass-section-single {
  width: 100%;
}
.compass-waypoints, .compass-other-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  width: 100%;
}
.compass-waypoint-thumb {
  width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1.5px solid rgba(244, 188, 87, 0.45);
  flex-shrink: 0; filter: saturate(1.15); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.compass-menu .master-nera {
  position: static; display: flex; flex-direction: row; width: 100%; gap: 16px; text-align: left; cursor: pointer;
  padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(244, 188, 87, 0.25); filter: none; box-sizing: border-box;
}
.compass-menu .master-nera:hover {
  background: rgba(244, 188, 87, 0.12); border-color: rgba(244, 188, 87, 0.65);
}
.compass-waypoint-fun {
  border-color: rgba(244, 188, 87, 0.5) !important;
  background: linear-gradient(135deg, rgba(244, 188, 87, 0.12), rgba(216, 68, 63, 0.12)) !important;
}
.compass-waypoint-fun:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 16px rgba(244, 188, 87, 0.3) !important;
}
.compass-waypoint-world {
  border-color: rgba(87, 221, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(87, 221, 255, 0.1), rgba(6, 12, 24, 0.85)) !important;
}
.compass-waypoint-world:hover {
  border-color: #57ddff !important;
  box-shadow: 0 0 18px rgba(87, 221, 255, 0.35) !important;
}
.compass-waypoint-world .compass-waypoint-thumb {
  border-color: rgba(87, 221, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(87, 221, 255, 0.35);
}
.compass-waypoint-world:hover .compass-waypoint-thumb {
  border-color: #57ddff;
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7), 0 0 22px rgba(87, 221, 255, 0.55);
}
.compass-waypoint.compass-waypoint-home {
  border-color: rgba(255, 120, 120, 0.45) !important;
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.14), rgba(20, 8, 12, 0.75)) !important;
}
.compass-waypoint.compass-waypoint-home:hover {
  border-color: #ff9999 !important;
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.22), rgba(30, 10, 16, 0.85)) !important;
  box-shadow: 0 0 20px rgba(255, 100, 100, 0.35) !important;
}
.compass-waypoint.compass-waypoint-home .compass-waypoint-text strong {
  color: #ffb8b8;
}
.compass-waypoint.compass-waypoint-home:hover .compass-waypoint-text strong {
  color: #fff;
}
.compass-waypoint.compass-waypoint-home .compass-waypoint-text small {
  color: #e2a8a8;
}
.compass-home-icon-glyph {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.6));
}
.graphics-rites { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(87,221,255,.18); }
.graphics-rites span { grid-column: 1/-1; padding: 9px 15px 4px; color: var(--faint); font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.graphics-rites button { padding: 10px 6px; border-bottom: 0; border-right: 1px solid var(--line); text-align: center; font-size: 10px; }
.graphics-rites button:last-child { border-right: 0; }
.graphics-rites button[aria-pressed="true"] { color: var(--gold); background: rgba(244,188,87,.1); box-shadow: inset 0 -2px var(--gold); }

.master-nera {
  position: absolute; z-index: 14; right: clamp(16px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 30px);
  width: clamp(56px, 6vw, 76px); text-align: center; cursor: help; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.85));
}
/* Canonical Master [N]era art (assets/master/thxmaster.png): the meditating neon sensei.
   Round face-plate to match the player avatar -- see .player-avatar comment above. */
.nera-figure {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 18%;
  border: 2px solid rgba(87,221,255,.55); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(4,3,2,.72), 0 0 16px rgba(87,221,255,.35);
  transition: box-shadow .3s var(--ease), filter .3s var(--ease);
}
.master-nera:hover .nera-figure, .master-nera.is-speaking .nera-figure { box-shadow: 0 0 0 3px rgba(4,3,2,.9), 0 0 26px rgba(87,221,255,.7); filter: brightness(1.15); }
.nera-name { display: block; margin: 0; color: var(--muted); font: 8px ui-monospace, monospace; letter-spacing: .09em; white-space: nowrap; }
.nera-bubble { position: absolute; right: 90%; bottom: 58%; width: min(300px, 70vw); padding: 13px 15px; background: var(--panel); border: 1px solid rgba(167,122,255,.42); text-align: left; opacity: 0; transform: translate(8px, 5px); pointer-events: none; transition: opacity .22s, transform .22s; }
.nera-bubble p { margin: 0; color: #d9e0eb; font-family: Georgia, serif; }
.master-nera:hover .nera-bubble, .master-nera:focus .nera-bubble, .master-nera.is-speaking .nera-bubble { opacity: 1; transform: translate(0); }
.nera-orbit { position: absolute; left: 50%; top: 48%; width: 85px; height: 25px; transform: translate(-50%,-50%); border: 1px solid rgba(87,221,255,.38); border-radius: 50%; animation: orbit 7s linear infinite; }
.nera-orbit span { position: absolute; width: 3px; height: 3px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 8px var(--cyan); }
.nera-orbit span:nth-child(1) { left: 7px; top: 7px; }.nera-orbit span:nth-child(2) { right: 11px; bottom: 3px; }.nera-orbit span:nth-child(3) { left: 46px; top: -2px; }

/* Portal Hall: three naves (left = Bronze/Red/Gold + unbound grey contacts,
   centre = open-a-portal + pending requests, right = Silver and up), laid
   out as CSS columns -- there is no literal 3D architecture here, this scene
   is still the pre-rendered backdrop image. */
/* This screen does not drift with the mouse. Everywhere else the background
   sliding under the camera reads as depth; here the cards are pinned and the
   room slipping behind them just makes people queasy. */
.scene-portals { transform: none; }

/* The title sits on the top bar's line, level with the MIRRORWORLD wordmark,
   rather than floating over the middle of the hall. */
.portal-hall-title {
  position: absolute; z-index: 6; left: 50%; top: 28px; transform: translateX(-50%);
  margin: 0; font: 400 26px/1 Georgia, serif; letter-spacing: .04em;
  color: #e8ecf5; text-shadow: 0 2px 14px #000; white-space: nowrap;
}

.portal-info-button { position: absolute; z-index: 12; left: clamp(16px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 30px); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(244,188,87,.5); border-radius: 50%; color: var(--gold); background: rgba(3,5,10,.72); font: italic 600 17px Georgia, serif; cursor: pointer; }
.portal-info-button:hover { color: #ffe6a8; border-color: var(--gold); box-shadow: 0 0 14px rgba(244,188,87,.35); }
.portal-info-motto { margin: 0 0 16px; color: var(--gold); font: italic 15px/1.6 Georgia, serif; }

/* Who the font opened onto, shown the way a portal card shows them so the
   two screens read as the same object. */
.bonding-partner { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 14px 16px; border: 1px solid rgba(87,221,255,.32); background: rgba(6,14,24,.6); }
.bonding-partner strong { display: block; font: 14px ui-monospace, monospace; color: var(--text); }
.bonding-partner span { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.bonding-partner.online { border-color: rgba(107,255,176,.45); }
.bonding-partner.online .portal-light { background: #6bffb0; box-shadow: 0 0 8px #6bffb0, 0 0 16px #6bffb0; }
.portal-info-list { margin: 6px 0 14px; padding-left: 20px; }
.portal-info-list li { margin: 3px 0; }

.portal-controls {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 66px auto 0;
  width: min(96vw, 1380px);
  font-size: 12px;
}
.portal-control { display: flex; align-items: center; gap: 6px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.portal-control select { background: rgba(3,5,10,.8); color: var(--text); border: 1px solid var(--line); padding: 5px 8px; font-size: 11px; border-radius: 4px; }
.portal-fav-toggle { padding: 5px 12px; background: rgba(3,5,10,.7); border: 1px solid var(--line); color: var(--faint); font-size: 11px; cursor: pointer; border-radius: 4px; transition: all 0.18s ease; }
.portal-fav-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(244,188,87,.12); box-shadow: 0 0 10px rgba(244,188,87,0.25); }

/* Aligned Sanctuary actions inside the controls bar to save space */
.portal-hud-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}
.portal-world-btn-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(244,244,244,0.12) 0%, rgba(16,16,20,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.portal-world-btn-bar:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(20,20,28,0.95) 100%);
  border-color: #fff;
  box-shadow: 0 4px 16px rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.portal-world-btn-bar .world-taiji {
  width: 18px;
  height: 18px;
}
.portal-world-btn-bar .world-name {
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #f0f4f8;
  text-shadow: 0 1px 4px #000;
}

.portal-info-btn-bar {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
  background: rgba(244,188,87,0.12) !important;
  border: 1px solid rgba(244,188,87,0.4) !important;
  color: var(--gold) !important;
  cursor: pointer !important;
  font-style: normal !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.portal-info-btn-bar:hover {
  background: rgba(244,188,87,0.24) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(244,188,87,0.35);
  transform: translateY(-1px);
}
.portal-info-btn-bar .portal-info-icon {
  font-size: 14px;
  line-height: 1;
}
.portal-info-btn-bar .portal-info-label {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.04em;
}

/* 4 Generous Naves Layout */
.portal-naves {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(210px, 1fr) minmax(240px, 1.15fr) minmax(210px, 1fr);
  gap: 16px;
  align-items: stretch;
  width: min(96vw, 1380px);
  margin: 78px auto 0;
  max-height: 64vh;
  height: calc(100vh - 270px);
}
.portal-nave { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.nave-label { margin: 0; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.nave-label-row { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.nave-expand-btn {
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(244, 188, 87, 0.12);
  border: 1px solid rgba(244, 188, 87, 0.35);
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nave-expand-btn:hover { background: rgba(244, 188, 87, 0.28); border-color: var(--gold); }
.bonded-expanded-dialog {
  max-width: 720px;
  width: min(720px, calc(100vw - 32px));
  padding: clamp(20px, 4vw, 32px);
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(244,188,87,.08), transparent 45%),
    linear-gradient(150deg, #11151f, #05070d);
  border: 1px solid rgba(244,188,87,.35);
  border-radius: 6px;
  box-shadow: 0 30px 100px rgba(0,0,0,.75), inset 0 0 46px rgba(0,0,0,.4);
}
.bonded-expanded-dialog::backdrop { background: rgba(1,2,5,.78); backdrop-filter: blur(8px); }
.bonded-expanded-dialog .settings-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 6px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,188,87,.22);
}
.bonded-expanded-dialog #bonded-expanded-title {
  margin: 0; font: 700 26px Georgia, serif; letter-spacing: .03em;
  color: var(--gold); text-shadow: 0 0 18px rgba(244,188,87,.25);
}
.bonded-expanded-dialog .settings-close {
  flex: none; color: var(--muted); background: rgba(244,188,87,.08);
  border: 1px solid rgba(244,188,87,.25); border-radius: 4px; padding: 6px 10px;
  cursor: pointer; transition: all .15s ease;
}
.bonded-expanded-dialog .settings-close:hover { color: var(--gold); border-color: var(--gold); background: rgba(244,188,87,.18); }
.bonded-expanded-dialog .portal-search-input { margin-top: 16px; width: 100%; box-sizing: border-box; }
.bonded-expanded-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  max-height: 65vh; overflow-y: auto; overflow-x: hidden; padding-right: 4px;
}
.portal-nave-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: calc(100% - 28px); flex: 1; padding: 2px; }

/* Nave 1: World Noticeboard — Stacco Grafico Etereo & Massima Altezza */
.portal-nave-world {
  background: radial-gradient(circle at 50% 0%, rgba(16, 32, 56, 0.85) 0%, rgba(5, 10, 20, 0.95) 100%);
  border: 1px solid rgba(87, 221, 255, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), 0 6px 28px rgba(0, 0, 0, 0.65), 0 0 24px rgba(87, 221, 255, 0.16);
  position: relative;
  height: 100%;
}
.portal-nave-world::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(87, 221, 255, 0.95), rgba(244, 188, 87, 0.9), transparent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(87, 221, 255, 0.8);
}
.portal-world-board-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(87, 221, 255, 0.18);
}
.portal-world-enter-btn {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  min-height: 40px;
  margin: 0 0 4px;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(244,244,244,.96) 0%, rgba(244,244,244,.96) 48%, rgba(16,16,20,.98) 52%, rgba(16,16,20,.98) 100%);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 2px 12px rgba(0,0,0,.7), 0 0 14px rgba(255,255,255,.2);
  color: #fff;
  font: 800 18px/1.05 ui-monospace, monospace;
  letter-spacing: .08em;
  -webkit-text-stroke: .55px #05070d;
  text-shadow: 0 1px 0 #05070d, 0 0 3px #05070d, 0 0 9px rgba(87,221,255,.95);
}
.portal-world-enter-btn .world-taiji { width: 14px; height: 14px; }
.portal-world-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.portal-world-full-link { margin-left: auto; padding: 3px 7px; font-size: 9px; }
.portal-world-icon {
  font-size: 14px;
  line-height: 1;
}
.portal-nave-world .nave-label {
  color: #b7e8ff;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(87, 221, 255, 0.4);
}
.portal-world-board-btn {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  color: #ffe6a8;
  border: 1px solid rgba(244, 188, 87, 0.5);
  border-radius: 4px;
  background: rgba(244, 188, 87, 0.15);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.portal-world-board-btn:hover {
  background: rgba(244, 188, 87, 0.3);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(244, 188, 87, 0.4);
}
/* The generic board-link rule comes after the CTA block; keep the primary
   button's larger, ceremonial label explicit and readable on both halves. */
.portal-world-board-btn.portal-world-enter-btn {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffe6a8 !important;
  letter-spacing: .08em;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px #05070d, 0 0 8px rgba(244,188,87,.42);
  background: linear-gradient(110deg, rgba(10,24,39,.96), rgba(20,18,34,.96)) !important;
  border: 1px solid rgba(87,221,255,.72);
  box-shadow: inset 0 0 0 1px rgba(244,188,87,.32), inset 0 -8px 20px rgba(3,5,10,.3), 0 0 16px rgba(87,221,255,.18);
}
.portal-world-board-btn.portal-world-enter-btn:hover {
  color: #fff3c4 !important;
  background: linear-gradient(110deg, rgba(14,37,57,.98), rgba(30,22,49,.98)) !important;
  border-color: #f4bc57;
  box-shadow: inset 0 0 0 1px rgba(244,188,87,.58), 0 0 20px rgba(87,221,255,.28), 0 0 12px rgba(244,188,87,.2);
}
.portal-world-board-list {
  max-height: 100%;
  flex: 1;
  gap: 8px;
}
.portal-world-board-list,
.portal-world-board-list::-webkit-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(87,221,255,.85) rgba(9,18,31,.75); }
.portal-world-board-list::-webkit-scrollbar { width: 9px; }
.portal-world-board-list::-webkit-scrollbar-track { background: rgba(9,18,31,.78); border: 1px solid rgba(87,221,255,.16); border-radius: 9px; }
.portal-world-board-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #57ddff, #a77aff 55%, #f4bc57); border: 2px solid rgba(9,18,31,.8); border-radius: 9px; }
.portal-world-board-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #bfefff, #c49bff 55%, #ffe6a8); }
.portal-world-board-empty {
  padding: 24px 14px;
  font-size: 11px;
  color: #7d96b0;
  text-align: center;
  border: 1px dashed rgba(87, 221, 255, 0.2);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.4);
}
.portal-world-board-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
  background: rgba(10, 18, 32, 0.85);
  border: 1px solid rgba(87, 221, 255, 0.22);
  border-left: 3px solid rgba(87, 221, 255, 0.6);
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.portal-world-board-item:hover {
  border-color: rgba(244, 188, 87, 0.6);
  border-left-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(244, 188, 87, 0.15);
}
.portal-world-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(87, 221, 255, 0.12);
  border: 1px solid rgba(87, 221, 255, 0.35);
  color: #8de4ff;
  letter-spacing: 0.02em;
}
.portal-world-badge.badge-social { background: rgba(86, 145, 255, 0.14); border-color: rgba(86, 145, 255, 0.4); color: #9bc4ff; }
.portal-world-badge.badge-code { background: rgba(188, 120, 255, 0.14); border-color: rgba(188, 120, 255, 0.4); color: #d69eff; }
.portal-world-badge.badge-media { background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.4); color: #ffa3a3; }
.portal-world-badge.badge-community { background: rgba(88, 101, 242, 0.15); border-color: rgba(88, 101, 242, 0.45); color: #a4b7ff; }

.portal-world-item-title {
  font-size: 12px;
  font-weight: 600;
  color: #fcebc7;
  line-height: 1.3;
}
.portal-world-item-link {
  font-size: 10.5px;
  color: #8de4ff;
  text-decoration: none;
  word-break: break-all;
}
.portal-world-item-link:hover {
  text-decoration: underline;
  color: #fff;
}
.portal-world-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--faint);
  min-height: 18px;
  font-family: ui-monospace, monospace;
}
.portal-world-item-meta .portal-world-badge { margin: 0; }
.portal-world-item-meta .nb-score { color: #fff3c4; font-weight: 700; }

.portal-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #aa7847; border-radius: 8px; background: linear-gradient(120deg, rgba(70,113,153,.14), rgba(2,3,7,.92)); color: var(--text); box-shadow: inset 0 0 20px rgba(0,0,0,.6); min-width: 0; }
.portal-card.portal-card-clickable { cursor: pointer; }
/* The row that used to be the whole card: icon buttons + name/bond type.
   Mana moved below it in its own row so this row never has to fight three
   chips for width and overflow the card. */
.portal-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-status-dots { flex: none; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.portal-card.unbound { border-color: #555f6c; filter: grayscale(.55); }
.portal-card.dormant { justify-content: center; text-align: center; cursor: default; filter: grayscale(.8); }
.portal-card.material-red { border-color: #c65a5a; }
.portal-card.material-gold { border-color: var(--gold); }
.portal-card.material-silver { border-color: #b9c6d6; box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 0 14px rgba(185,198,214,.18); }
.portal-card.material-silver_gold {
  border-color: #00f0ff;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(0, 240, 255, 0.45),
    0 4px 18px rgba(244, 188, 87, 0.35);
  position: relative;
}
.portal-card.material-silver_gold::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.35) 0%, rgba(168, 85, 247, 0.2) 40%, rgba(244, 188, 87, 0.45) 100%);
  pointer-events: none;
  z-index: 0;
}
.portal-card.pending { opacity: .85; border-style: dashed; }

/* Active portal glowing halo and frame — High-visibility Neon Aura directly styled after Screenshots 2 & 3 */
.portal-card.is-active-portal {
  border-width: 2px;
  border-color: #00f0ff !important;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 14px #00f0ff,
    0 0 28px rgba(0, 240, 255, 0.65),
    0 4px 22px rgba(244, 188, 87, 0.6),
    inset 0 0 16px rgba(0, 240, 255, 0.3) !important;
  transform: translateY(-2px);
}
.portal-card.is-active-portal::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 10%, rgba(0, 240, 255, 0.25) 0%, transparent 60%),
              radial-gradient(circle at 50% 90%, rgba(244, 188, 87, 0.35) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: portal-aura-breathe 2.8s ease-in-out infinite alternate;
}
.portal-card.is-active-portal::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 11px;
  border: 2px solid #00f0ff;
  border-bottom: 2.5px solid #f4bc57;
  box-shadow:
    0 0 18px #00f0ff,
    0 0 36px rgba(0, 240, 255, 0.75),
    0 6px 28px rgba(244, 188, 87, 0.85),
    inset 0 0 12px rgba(0, 240, 255, 0.45);
  pointer-events: none;
  animation: portal-active-glow 2s ease-in-out infinite alternate;
  z-index: 1;
}

/* Screenshot 2 Signature Style: Marriage (Silver+Gold) + Active & Online */
.portal-card.material-silver_gold.is-active-portal,
.portal-card.material-silver_gold.online {
  border-color: #00f0ff !important;
  box-shadow:
    0 0 16px #00f0ff,
    0 0 34px rgba(0, 240, 255, 0.75),
    0 8px 30px rgba(244, 188, 87, 0.9),
    inset 0 0 20px rgba(0, 240, 255, 0.35) !important;
}
.portal-card.material-silver_gold.is-active-portal::after,
.portal-card.material-silver_gold.online::after {
  border-color: #00f0ff;
  border-bottom: 3px solid #ffcc00;
  box-shadow:
    0 0 22px #00f0ff,
    0 0 45px rgba(0, 240, 255, 0.85),
    0 10px 38px rgba(244, 188, 87, 1),
    inset 0 0 14px rgba(0, 240, 255, 0.5);
  animation-name: portal-active-glow-marriage;
}

/* Screenshot 3 Style: Red / Friendship Dual Neon Glow (Magenta + Cyan) */
.portal-card.material-red.is-active-portal::after {
  border-color: #ff3399;
  border-bottom-color: #00f0ff;
  box-shadow: 0 0 20px #ff3399, 0 0 38px rgba(255, 51, 153, 0.7), 0 6px 24px rgba(0, 240, 255, 0.6), inset 0 0 12px rgba(255, 51, 153, 0.35);
  animation-name: portal-active-glow-red;
}

/* Silver / Family Neon Frame */
.portal-card.material-silver.is-active-portal::after {
  border-color: #8be0ff;
  box-shadow: 0 0 18px #8be0ff, 0 0 38px rgba(139, 224, 255, 0.75), inset 0 0 12px rgba(139, 224, 255, 0.35);
  animation-name: portal-active-glow-silver;
}

@keyframes portal-aura-breathe {
  0% { opacity: 0.5; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1.02); }
}
@keyframes portal-active-glow {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 12px #00f0ff, 0 0 24px rgba(0, 240, 255, 0.5), 0 4px 18px rgba(244, 188, 87, 0.5), inset 0 0 8px rgba(0, 240, 255, 0.3);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 26px #00f0ff, 0 0 52px rgba(0, 240, 255, 0.9), 0 8px 32px rgba(244, 188, 87, 0.95), inset 0 0 18px rgba(0, 240, 255, 0.6);
  }
}
@keyframes portal-active-glow-marriage {
  0% {
    opacity: 0.85;
    box-shadow: 0 0 14px #00f0ff, 0 0 28px rgba(0, 240, 255, 0.6), 0 6px 22px rgba(244, 188, 87, 0.7), inset 0 0 10px rgba(0, 240, 255, 0.35);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 30px #00f0ff, 0 0 60px rgba(0, 240, 255, 1), 0 12px 42px rgba(255, 204, 0, 1), inset 0 0 22px rgba(0, 240, 255, 0.7);
  }
}
@keyframes portal-active-glow-silver {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 12px rgba(185, 198, 214, 0.7), 0 0 24px rgba(140, 190, 255, 0.4), inset 0 0 8px rgba(185, 198, 214, 0.3);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 24px rgba(220, 240, 255, 1), 0 0 48px rgba(185, 215, 255, 0.85), inset 0 0 18px rgba(185, 198, 214, 0.6);
  }
}
@keyframes portal-active-glow-red {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 12px #ff3399, 0 0 24px rgba(255, 51, 153, 0.5), 0 4px 14px rgba(0, 240, 255, 0.4);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 28px #ff3399, 0 0 54px rgba(255, 51, 153, 0.9), 0 8px 30px rgba(0, 240, 255, 0.8), inset 0 0 18px rgba(255, 51, 153, 0.6);
  }
}
.portal-active-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  font: 700 8.5px/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #05070d;
  background: var(--gold);
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 3px 8px;
  box-shadow: 0 0 14px rgba(244, 188, 87, 0.9), 0 0 24px rgba(87, 221, 255, 0.5);
  z-index: 3;
  pointer-events: none;
}
/* A quiet purple dot under the online dot instead of a floating badge that
   pushed against the edge of the card. Same size and treatment as
   .portal-light, just a second dot and a different color. */
.portal-coitus-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 6px #a855f7, 0 0 12px rgba(168, 85, 247, 0.7);
  animation: coitus-dot-pulse 2s infinite alternate ease-in-out;
  cursor: help;
}
@keyframes coitus-dot-pulse {
  0% { box-shadow: 0 0 4px rgba(168, 85, 247, 0.5); }
  100% { box-shadow: 0 0 10px rgba(192, 132, 252, 0.95), 0 0 16px rgba(168, 85, 247, 0.6); }
}
.portal-mourning-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  font: 700 8.5px/1 ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2e8f0;
  background: #1e1b4b;
  border: 1px solid #818cf8;
  border-radius: 3px;
  padding: 3px 8px;
  box-shadow: 0 0 14px rgba(129, 140, 248, 0.7), inset 0 0 6px rgba(0, 0, 0, 0.8);
  z-index: 3;
  pointer-events: none;
  animation: mourning-fade 3s infinite ease-in-out;
}
@keyframes mourning-fade {
  0% { opacity: 0.8; box-shadow: 0 0 8px rgba(129, 140, 248, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 18px rgba(165, 180, 252, 0.9), 0 0 26px rgba(99, 102, 241, 0.6); }
  100% { opacity: 0.8; box-shadow: 0 0 8px rgba(129, 140, 248, 0.4); }
}
.portal-card.in-mourning {
  border-color: #6366f1 !important;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.35), inset 0 0 14px rgba(30, 27, 75, 0.6) !important;
  filter: saturate(0.85);
}
.portal-card.material-silver.is-active-portal .portal-active-badge {
  color: #05070d;
  background: #c4d7ed;
  border-color: #fff;
  box-shadow: 0 0 14px rgba(196, 215, 237, 0.9), 0 0 24px rgba(155, 192, 232, 0.5);
}
.portal-card.mana-received-pulse {
  animation: card-mana-struck 1.6s ease-out;
}
@keyframes card-mana-struck {
  0% {
    filter: brightness(1.7) drop-shadow(0 0 24px rgba(244, 188, 87, 0.95));
    transform: scale(1.025);
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 14px rgba(244, 188, 87, 0.6));
    transform: scale(1.01);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}
.portal-enter { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.portal-enter strong { display: block; font: 12px ui-monospace, monospace; }
.portal-enter span { display: block; color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.portal-body { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-body strong { display: block; font: 12px ui-monospace, monospace; }
.portal-body span { display: block; color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.portal-light { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3a4048; box-shadow: inset 0 0 3px #000; }
.portal-card.online {
  box-shadow: 0 0 14px rgba(107, 255, 176, 0.28), inset 0 0 16px rgba(107, 255, 176, 0.08);
}
.portal-card.online .portal-light {
  background: #6bffb0;
  box-shadow: 0 0 8px #6bffb0, 0 0 16px #6bffb0;
  animation: portal-online-pulse 2s infinite alternate ease-in-out;
}
@keyframes portal-online-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 12px #6bffb0, 0 0 24px #6bffb0; }
}
.portal-msg-card-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 9px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: .06em;
  background: rgba(87, 221, 255, 0.2);
  border: 1px solid rgba(87, 221, 255, 0.6);
  border-radius: 4px;
  color: #c7f2ff;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}
.portal-msg-card-btn:hover {
  background: rgba(87, 221, 255, 0.4);
  border-color: #8de4ff;
  color: #fff;
  box-shadow: 0 0 12px rgba(87, 221, 255, 0.5);
  transform: translateY(-1px);
}
.compass-waypoint-active-portal {
  border-color: var(--gold) !important;
  background: linear-gradient(135deg, rgba(244, 188, 87, 0.2), rgba(87, 221, 255, 0.15)) !important;
  box-shadow: 0 0 18px rgba(244, 188, 87, 0.45), inset 0 0 12px rgba(244, 188, 87, 0.2) !important;
  animation: portal-active-glow 2s infinite alternate ease-in-out;
}
.portal-fav, .portal-nick-edit { flex: none; background: transparent; border: 0; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px; }
.portal-nick-edit { font-size: 11px; }
.portal-card.favourite .portal-fav, .portal-fav[aria-pressed="true"] { color: var(--gold); }
.portal-card .button-row { flex: none; display: flex; gap: 6px; }
.portal-card .button-row button { padding: 5px 8px; font-size: 10px; }

.portal-add-button { padding: 12px; background: rgba(3,5,10,.7); border: 2px dashed var(--gold); color: var(--gold); font: 600 12px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.portal-add-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); background: rgba(3,5,10,.85); font-size: 11px; }
.portal-add-form label { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.portal-add-form input, .portal-add-form select { background: rgba(0,0,0,.6); color: var(--text); border: 1px solid var(--line); padding: 6px 8px; }
.portal-add-status { min-height: 14px; margin: 0; color: var(--faint); font-size: 10px; text-align: center; }
.portal-request-list { display: flex; flex-direction: column; gap: 8px; }

/* Portal Hall only: no hands/incarnation badge/spell icon here (this is a
   contacts screen, not the embodied 3D chamber), and the Mana Pool shrinks
   into a small corner panel instead of the main chamber's full HUD. Scoped
   to data-scene="portals" so the main chamber keeps its usual layout. */
body[data-scene="portals"] .hand-presence,
body[data-scene="portals"] .hand-layer,
body[data-scene="portals"] .player-avatar,
body[data-scene="portals"] .spell-selector,
body[data-scene="laboratory"] .hand-presence,
body[data-scene="laboratory"] .hand-layer,
body[data-scene="laboratory"] .player-avatar,
body[data-scene="laboratory"] .spell-selector { display: none; }
body[data-scene="portals"] .mana-hud,
body[data-scene="laboratory"] .mana-hud {
  left: auto; top: auto; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vh, 24px);
  width: 220px; padding: 8px 11px; border-left-width: 2px;
}
body[data-scene="portals"] .mana-hud > strong,
body[data-scene="laboratory"] .mana-hud > strong { font-size: 13px; }
body[data-scene="portals"] .mana-tokens-grid,
body[data-scene="laboratory"] .mana-tokens-grid { padding: 4px 6px; }
body[data-scene="portals"] .token-val,
body[data-scene="laboratory"] .token-val { font-size: 10px; }
body[data-scene="portals"] .mana-lunar-countdown,
body[data-scene="laboratory"] .mana-lunar-countdown { font-size: 9px; padding: 2px 4px; }

.book-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: clamp(24px, 5vw, 54px); color: var(--text); background: linear-gradient(145deg, #0d111c, #05070d); border: 1px solid rgba(244,188,87,.35); border-radius: 0; box-shadow: 0 30px 100px #000; }
.book-dialog::backdrop { background: rgba(1,2,5,.78); backdrop-filter: blur(8px); }
.book-dialog > p:not(.eyebrow) { color: var(--muted); }
.dialog-close { float: right; color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 7px 10px; cursor: pointer; }
.glyph-forge {
  --glyph-light: #fff1ae;
  --glyph-metal: #d6a84f;
  --glyph-deep: #5d421b;
  --glyph-aura: rgba(244,188,87,.46);
  display: grid;
  grid-template-columns: minmax(190px, .82fr) 1.18fr;
  align-items: center;
  gap: clamp(20px, 5vw, 48px);
  margin: 30px 0 34px;
  padding: clamp(18px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(244,188,87,.28);
  background:
    radial-gradient(circle at 25% 50%, var(--glyph-aura), transparent 31%),
    linear-gradient(125deg, rgba(255,255,255,.035), transparent 32%),
    #050810;
  box-shadow: inset 0 0 70px rgba(0,0,0,.78), 0 18px 50px rgba(0,0,0,.34);
  transition: border-color .45s, background .45s, filter .45s;
}
.glyph-forge[data-alignment="evil"] {
  --glyph-light: #b9a2b1;
  --glyph-metal: #75616f;
  --glyph-deep: #281d29;
  --glyph-aura: rgba(105,63,101,.34);
  border-color: rgba(132,94,123,.32);
  background:
    radial-gradient(ellipse at 23% 53%, rgba(92,50,83,.31), transparent 32%),
    repeating-linear-gradient(104deg, transparent 0 20px, rgba(122,92,110,.025) 21px 22px),
    #07070c;
}
.glyph-stage { position: relative; min-height: 292px; display: grid; place-items: center; }
.glyph-stage::before, .glyph-stage::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.glyph-stage::before { width: 76%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--glyph-metal) 34%, transparent); box-shadow: inset 0 0 34px rgba(0,0,0,.8), 0 0 38px var(--glyph-aura); transform: rotate(17deg) scaleY(.76); }
.glyph-stage::after { width: 9px; height: 9px; background: var(--glyph-light); box-shadow: 0 0 18px 5px var(--glyph-aura); }
.guardian-glyph { position: relative; z-index: 1; width: min(100%, 235px); height: 292px; overflow: visible; color: var(--glyph-metal); filter: drop-shadow(0 0 7px var(--glyph-aura)); animation: glyph-breathe 6.3s ease-in-out infinite; }
.beast-cut { vector-effect: non-scaling-stroke; transition: stroke .45s, opacity .45s, stroke-dasharray .45s; }
.beast-cut-deep { stroke: var(--glyph-deep); stroke-width: 6; opacity: .92; }
.beast-cut-light { stroke: url(#glyph-metal); stroke-width: 1.5; filter: url(#glyph-glow); }
.beast-eye { stroke: var(--glyph-light); stroke-width: 2.3; opacity: .76; filter: url(#glyph-glow); }
.core-shadow { stroke: #05060b; stroke-width: 10; opacity: .96; }
.core-cut { stroke: var(--glyph-light); stroke-width: 3.4; filter: url(#glyph-glow); }
.core-barb { stroke: var(--glyph-metal); stroke-width: 2; opacity: .82; }
.glyph-scars { fill: none; stroke: color-mix(in srgb, var(--glyph-light) 55%, transparent); stroke-width: 1.2; opacity: .6; }
.glyph-forge[data-alignment="evil"] .guardian-glyph { filter: saturate(.58) contrast(1.14) drop-shadow(0 0 5px var(--glyph-aura)); }
.glyph-forge[data-alignment="evil"] .beast-cut-light { stroke-dasharray: 74 3 19 7 42 2; opacity: .72; }
.glyph-forge[data-alignment="evil"] .core-cut { stroke-dasharray: 59 3 31 5; opacity: .8; }
.glyph-forge[data-alignment="evil"] .glyph-scars { opacity: .95; stroke-dasharray: 3 4; }
.glyph-copy h3 { margin: 5px 0 10px; font: clamp(22px, 4vw, 36px) Georgia, serif; letter-spacing: .035em; }
.glyph-copy > p:not(.eyebrow) { max-width: 39ch; color: var(--muted); font-size: 13px; line-height: 1.65; }
.glyph-alignment { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 17px; padding: 1px; background: var(--line); }
.glyph-alignment button { min-width: 86px; padding: 10px 18px; color: var(--muted); background: #080b12; border: 0; font: 10px ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.glyph-alignment button:hover, .glyph-alignment button:focus-visible { color: var(--glyph-light); outline: 1px solid var(--glyph-metal); outline-offset: -3px; }
.glyph-alignment button[aria-pressed="true"] { color: #07080b; background: var(--glyph-metal); box-shadow: 0 0 18px var(--glyph-aura); }
/* minmax(0, 1fr), not plain 1fr: a flex child inside with long unbroken
   text (the access badge) has an intrinsic min-width that plain 1fr tracks
   refuse to shrink below, which was forcing the whole dialog to overflow
   sideways with a horizontal scrollbar. */
.color-schools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 28px; background: var(--line); }
.school { min-height: 110px; padding: 15px; background: #090d16; border-top: 2px solid var(--school-color); min-width: 0; }
.school strong, .school span { display: block; }
.school span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.school em { color: var(--faint); font-style: normal; }
@media (max-width: 640px) {
  .color-schools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ledger-list { margin-top: 25px; border-top: 1px solid var(--line); }
.ledger-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.ledger-row strong { display: block; font: 12px ui-monospace, monospace; }
.ledger-row span { color: var(--muted); font-size: 12px; }
.ledger-row button { color: var(--cyan); background: transparent; border: 1px solid var(--line); cursor: pointer; }



.compass-settings-button {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  text-align: left;
  color: var(--text);
  background: rgba(13,17,28,.65);
  border: 1px solid var(--line);
  font: 12px/1.2 var(--mono);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.compass-settings-button:hover, .compass-settings-button:focus-visible {
  color: var(--gold);
  border-color: rgba(244,188,87,.4);
  background: rgba(244,188,87,.06);
}

.settings-dialog {
  max-width: 620px;
}
.settings-tabs-bar {
  display: flex;
  gap: 6px;
  margin: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  overflow-x: auto;
}
.settings-tab-btn {
  background: rgba(14, 20, 32, 0.6);
  border: 1px solid rgba(156, 181, 211, 0.2);
  border-radius: 4px;
  color: var(--muted);
  font: 700 11px/1.3 ui-monospace, monospace;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.settings-tab-btn:hover {
  border-color: rgba(244, 188, 87, 0.4);
  color: var(--text);
  background: rgba(24, 32, 50, 0.8);
}
.settings-tab-btn.is-active {
  background: rgba(244, 188, 87, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(244, 188, 87, 0.25);
}
.settings-tab-pane {
  display: block;
  animation: fadeInPane 0.2s ease-out;
}
.settings-tab-pane[hidden] {
  display: none !important;
}
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-audio-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}
.audio-volume-slider-box {
  background: rgba(3, 5, 10, 0.6);
  border: 1px solid rgba(156, 181, 211, 0.15);
  border-radius: 4px;
  padding: 12px 14px;
}
.audio-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font: 700 11px/1.2 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.audio-volume-slider {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
  height: 6px;
  background: #080d16;
  border-radius: 3px;
}
.audio-features-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.audio-feature-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(8, 13, 22, 0.85);
  border: 1px solid rgba(244, 188, 87, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
}
.audio-badge-icon {
  font-size: 20px;
  line-height: 1;
}
.audio-badge-text strong {
  display: block;
  font: 700 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  margin-bottom: 2px;
}
.audio-badge-text small {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
}
.audio-actions-row {
  display: flex;
  gap: 10px;
}
.audio-actions-row button {
  flex: 1;
}

.settings-section {
  margin: 14px 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(5,8,16,.6);
}
.settings-subtitle {
  margin: 0 0 6px;
  font: 700 13px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.settings-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.controls-preset-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.preset-button {
  flex: 1;
  padding: 9px 12px;
  color: var(--muted);
  background: #080b12;
  border: 1px solid var(--line);
  font: 11px/1.2 ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
}
.preset-button:hover, .preset-button:focus-visible {
  color: var(--text);
  border-color: rgba(244,188,87,.3);
}
.preset-button.active, .preset-button[aria-pressed="true"] {
  color: #05070d;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(244,188,87,.35);
}

.settings-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background: rgba(3, 5, 10, 0.85);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font: 700 11px/1.2 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(244, 188, 87, 0.25);
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.settings-button:hover, .settings-button:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #05070d;
  box-shadow: 0 0 20px rgba(244, 188, 87, 0.5);
}

.hud-settings-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(244,188,87,.08);
  border: 1px solid rgba(244,188,87,.28);
  color: var(--gold);
  font: 11px ui-monospace, monospace;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
}
.hud-settings-button:hover {
  background: rgba(244,188,87,.2);
  border-color: var(--gold);
  color: #fff;
}
.hud-settings-icon { font-size: 13px; }

.axis-selector-box {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(3,5,10,.6);
  border: 1px solid rgba(156,181,211,.15);
  border-radius: 4px;
}
.axis-box-title {
  margin: 0 0 10px;
  font: 700 11px/1.2 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.axis-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.axis-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: #080d16;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  transition: all .2s var(--ease);
}
.axis-card:hover {
  border-color: rgba(244,188,87,.4);
  background: #0d1424;
  color: var(--text);
}
.axis-card.is-active {
  border-color: var(--gold);
  background: rgba(244,188,87,.14);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(244,188,87,.2);
}
.axis-card-icon {
  font-size: 16px;
  margin-bottom: 4px;
}
.axis-card-label {
  font: 700 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
}
.axis-card.is-active .axis-card-label {
  color: var(--gold);
}
.axis-card-desc {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}
.axis-card.is-active .axis-card-desc {
  color: #cfdbec;
}
.settings-toggle-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(3,5,10,.5);
  border: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.settings-toggle-label:hover {
  border-color: rgba(244,188,87,.25);
  background: rgba(244,188,87,.03);
}
.settings-toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-custom {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin-top: 2px;
  background: #101622;
  border: 1px solid var(--line);
  border-radius: 11px;
  transition: all .25s ease;
}
.toggle-custom::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--muted);
  border-radius: 50%;
  transition: all .25s ease;
}
.settings-toggle-label input[type="checkbox"]:checked + .toggle-custom {
  background: rgba(244,188,87,.22);
  border-color: var(--gold);
}
.settings-toggle-label input[type="checkbox"]:checked + .toggle-custom::after {
  transform: translateX(18px);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(244,188,87,.7);
}
.toggle-text strong {
  display: block;
  font: 13px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
}
.toggle-text small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.bindings-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.binding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(3, 5, 10, 0.6);
  border: 1px solid rgba(156, 181, 211, 0.15);
  border-radius: 4px;
}
.binding-label {
  font: 700 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
}
.binding-key-btn {
  padding: 6px 14px;
  background: #080d16;
  border: 1px solid var(--line);
  color: var(--gold);
  font: 700 11px/1.2 ui-monospace, monospace;
  letter-spacing: .06em;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.binding-key-btn:hover, .binding-key-btn:focus-visible {
  border-color: rgba(244, 188, 87, 0.5);
  background: #0d1424;
  color: #fff;
}
.binding-key-btn.is-listening {
  border-color: var(--gold);
  background: rgba(244, 188, 87, 0.2);
  color: #fff;
  box-shadow: 0 0 12px rgba(244, 188, 87, 0.4);
}
.bindings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.binding-hint {
  font-size: 11px;
  color: var(--gold);
  font-style: italic;
}

@keyframes breathe { 50% { opacity: .35; transform: scale(.94); } }
@keyframes orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes hand-fallback-flash { from { filter: brightness(1.45); } to { filter: brightness(1); } }
@keyframes hand-aura-breathe { 0%, 100% { filter: drop-shadow(0 0 8px rgba(87,221,255,.1)) brightness(.99); } 48% { filter: drop-shadow(0 0 13px rgba(167,122,255,.19)) brightness(1.025); } }
@keyframes glyph-breathe { 0%, 100% { transform: translateY(0) scale(.985); opacity: .86; } 50% { transform: translateY(-3px) scale(1.012); opacity: 1; } }

@media (max-width: 780px) {
  .topbar { height: 58px; }
  .gate { grid-template-columns: 1fr; align-content: center; text-align: center; padding: 80px 20px 35px; }
  .gate-mirror { width: min(52vw, 260px); max-height: 40vh; }
  .gate-copy { margin-inline: auto; }
  .gate-copy > p:not(.eyebrow):not(.error) { margin-inline: auto; }
  .button-row { justify-content: center; }
  .avatar-ritual { padding: 82px 14px 30px; }
  .avatar-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .avatar-frame { height: 43vh; }
  .choice-name, .choice-meta { margin-inline: 10px; }
  .choice-name { font-size: 16px; }.choice-meta { font-size: 9px; }
  .scene { background-position: center; }
  .mana-hud { top: 64px; width: 210px; }
  .mana-hud strong { font-size: 13px; }
  .player-avatar { width: 50px; left: 10px; bottom: 12px; }
  .master-nera { width: 50px; right: 10px; bottom: 12px; }
  .compass-button { top: 65px; width: 48px; height: 48px; }
  .compass-menu { top: 120px; }
  .nera-bubble { right: 60%; bottom: 82%; }
  .book-hotspot-a { left: 10%; }.book-hotspot-b { left: 47%; }.book-hotspot-c { left: 80%; }
  .portal-controls { margin-top: 84px; }
  .portal-naves { grid-template-columns: 1fr; max-height: none; }
  .portal-nave-list { max-height: none; overflow: visible; }
  body[data-scene="portals"] .mana-hud { width: 130px; font-size: 10px; }
  .scene-title { top: 21%; }
  .color-schools { grid-template-columns: repeat(2, 1fr); }
  .glyph-forge { grid-template-columns: 1fr; text-align: center; }
  .glyph-stage { min-height: 230px; }
  .guardian-glyph { height: 235px; }
  .glyph-copy > p:not(.eyebrow) { margin-inline: auto; }
}

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

}

/* Controls & Vision dialog (2026-09-08). The look scheme used to be fixed in
   code, which meant a player who wanted the flight-style inverted pitch -- or
   who had it and wanted it gone -- had no way to say so. */
.compass-settings {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  text-align: left;
  color: var(--text);
  background: rgba(13,17,28,.65);
  border: 1px solid var(--line);
  font: 12px/1.2 ui-monospace, monospace;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.compass-settings:hover, .compass-settings:focus-visible {
  color: var(--gold);
  border-color: rgba(244,188,87,.4);
  background: rgba(244,188,87,.06);
}
.compass-settings strong { color: var(--gold); }

.settings-dialog {
  width: min(96vw, 1400px);
  max-width: 1400px;
  max-height: min(92vh, 920px);
  padding: clamp(24px, 3.5vw, 48px);
}
.settings-tabs-bar {
  display: flex;
  gap: 6px;
  margin: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  overflow-x: auto;
}
.settings-tab-btn {
  background: rgba(14, 20, 32, 0.6);
  border: 1px solid rgba(156, 181, 211, 0.2);
  border-radius: 4px;
  color: var(--muted);
  font: 700 11px/1.3 ui-monospace, monospace;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.settings-tab-btn:hover {
  border-color: rgba(244, 188, 87, 0.4);
  color: var(--text);
  background: rgba(24, 32, 50, 0.8);
}
.settings-tab-btn.is-active {
  background: rgba(244, 188, 87, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(244, 188, 87, 0.25);
}
.settings-tab-btn.settings-tab-btn-home {
  margin-left: auto;
  border-color: rgba(244, 188, 87, 0.4);
  color: var(--gold);
  background: rgba(244, 188, 87, 0.08);
}
.settings-tab-btn.settings-tab-btn-home:hover {
  background: rgba(244, 188, 87, 0.2);
  border-color: var(--gold);
  color: #fff;
}
.controls-axes-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}
.settings-bottom-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.settings-close-bottom-btn {
  padding: 10px 22px;
  font: 700 12px/1.3 ui-monospace, monospace;
  letter-spacing: 0.04em;
  background: rgba(14, 20, 32, 0.7);
  border: 1px solid rgba(156, 181, 211, 0.3);
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s var(--ease);
}
.settings-close-bottom-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(244, 188, 87, 0.1);
}
.settings-section {
  margin: 22px 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(5,8,16,.6);
}
.settings-subtitle {
  margin: 0 0 12px;
  font: 700 13px/1.3 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.settings-note {
  margin: 4px 0 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}
.settings-note strong { color: var(--text); }

.axis-selector-box {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(3,5,10,.6);
  border: 1px solid rgba(156,181,211,.15);
}
.axis-box-title {
  margin: 0 0 10px;
  font: 700 11px/1.2 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.axis-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.axis-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: #080d16;
  border: 1px solid var(--line);
  color: var(--faint);
  cursor: pointer;
  text-align: left;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.axis-card:hover { border-color: rgba(244,188,87,.4); background: #0d1424; color: var(--text); }
.axis-card.is-active {
  border-color: var(--gold);
  background: rgba(244,188,87,.14);
  box-shadow: 0 0 12px rgba(244,188,87,.2);
}
.axis-card-icon { font-size: 16px; margin-bottom: 4px; }
.axis-card-label { font: 700 12px/1.3 Georgia, serif; color: var(--text); }
.axis-card.is-active .axis-card-label { color: var(--gold); }
.axis-card-desc { margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--faint); }
.axis-card.is-active .axis-card-desc { color: #cfdbec; }

@media (max-width: 560px) {
  .axis-cards-row { grid-template-columns: 1fr; }
}

/* Settings owns application controls; the compass only contains destinations. */
.settings-home-button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 14px; cursor: pointer;
  border: 1px solid rgba(244,188,87,.42); background: rgba(244,188,87,.07);
  color: var(--gold); font: 600 14px/1.4 var(--mono);
}
.settings-home-button:hover, .settings-home-button:focus-visible {
  background: rgba(244,188,87,.16); outline: 1px solid var(--gold);
}
.settings-home p { margin: 10px 0 16px; font-size: 12px; color: var(--muted); }
.settings-home .text-button { font-size: 12px; }

/* Compass adviser and engraved spell seal: independent of world pointer input. */
.compass-menu .master-nera { position: static; display: flex; flex-direction: row; width: 100%; gap: 13px; text-align: left; cursor: pointer; }
.compass-menu .nera-figure { width: 42px; height: 42px; flex: 0 0 42px; }
.master-nera small { display: block; font-size: 10px; color: var(--muted); }
.spell-selector { position: absolute; z-index: 14; right: clamp(16px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 30px); width: 70px; padding: 5px; border: 0; background: transparent; color: #b9aa87; cursor: pointer; }
.spell-selector svg { width: 58px; fill: none; stroke: currentColor; stroke-width: 1; filter: drop-shadow(0 1px 1px #000); }
.spell-selector svg path { stroke-width: 1.7; }
.spell-selector span { display: block; font: 9px ui-monospace, monospace; letter-spacing: .15em; }
.spell-selector:hover { color: #f0dbad; }
/* Lights up once a portal has finished its activation animation, meaning
   spells/messages can now be sent through it -- see setPortalActive /
   castReady in mirrorworld.js and "Cast" key ("C") to open the panel. */
@keyframes cast-ready-pulse { 0%, 100% { filter: drop-shadow(0 0 4px var(--cyan)); } 50% { filter: drop-shadow(0 0 12px var(--cyan)); } }
.spell-selector.cast-ready { color: var(--cyan); animation: cast-ready-pulse 1.6s ease-in-out infinite; }

.graphics-rites-pair { grid-template-columns: repeat(2, 1fr); }
/* One-shot bloom over the whole room the instant a portal opens: a bright
   core at the mirror washing out to the edges, then gone. Purely additive
   light -- it never intercepts a click, and reduced motion skips it. */
.portal-flash { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, rgba(226,244,255,.95), rgba(90,190,255,.5) 22%, rgba(60,120,255,.18) 42%, transparent 68%); mix-blend-mode: screen; }
.portal-flash.is-firing { animation: portal-flash 900ms cubic-bezier(.1,.75,.25,1) forwards; }
@keyframes portal-flash {
  0% { opacity: 0; transform: scale(.35); }
  12% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) { .portal-flash.is-firing { animation: none; } }

.info-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, 0.85);
  border: 1px solid var(--line);
  color: var(--gold);
  font: bold 14px/1 serif;
  cursor: pointer;
  transition: all 0.15s ease;
}
.info-button:hover {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(244, 188, 87, 0.3);
  transform: scale(1.05);
}

.portal-connection-panel { position: absolute; z-index: 13; left: 50%; top: 14%; transform: translate(-50%, 0); width: min(320px, 70vw); padding: 10px 16px; text-align: center; background: linear-gradient(180deg, rgba(3,5,10,.85), rgba(3,5,10,.35)); border: 1px solid rgba(244,188,87,.4); text-shadow: 0 2px 8px #000; pointer-events: none; }
.portal-connection-panel strong { display: block; font: 14px Georgia, serif; color: var(--gold); }
.portal-connection-panel span { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.portal-cast-panel {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 28px));
  max-height: min(920px, calc(100dvh - 32px));
  overflow-y: auto;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #e6ded1;
  background: linear-gradient(145deg, rgba(14,19,26,.98), rgba(4,8,15,.99));
  border: 1px solid rgba(205,179,123,.48);
  box-shadow: 0 24px 90px #000d, inset 0 1px #fff2, 0 0 0 100vmax rgba(2,4,8,.75);
  border-radius: 10px;
}
.portal-cast-panel[hidden], .portal-cast-feedback[hidden] { display: none; }

/* 3D background freeze when messaging is active */
body.portal-chat-frozen #chamber-3d-mount,
body.portal-chat-frozen .scene {
  filter: blur(4px) brightness(0.4);
  pointer-events: none;
  transform: translate(0, 0) scale(1.015) !important;
  transition: filter 0.25s ease;
}
body.portal-chat-frozen #hand-presence,
body.portal-chat-frozen #hand-layer {
  opacity: 0.15;
  filter: blur(4px);
  pointer-events: none;
  transition: all 0.25s ease;
}

.portal-cast-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.portal-peer-header { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.portal-peer-header:hover h2 { color: var(--gold); }
.portal-peer-avatar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(214, 183, 114, 0.4);
}
.portal-peer-avatar { width: 100%; height: 100%; object-fit: cover; }
.portal-peer-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ef096;
  border: 2px solid #000;
}
.portal-peer-meta { display: flex; flex-direction: column; }
.portal-peer-name-row { display: flex; align-items: center; gap: 8px; }
.portal-peer-name-row h2 { margin: 0; font: 22px/1.2 Georgia, serif; font-weight: normal; color: #f7eacc; transition: color 0.15s; }
.portal-peer-edit-wrap { display: inline-flex; align-items: center; gap: 4px; }
.portal-peer-nickname-input {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--gold);
  color: #fff;
  padding: 4px 8px;
  font: 14px Georgia, serif;
  border-radius: 4px;
  max-width: 140px;
}
.portal-peer-save-btn, .portal-peer-cancel-btn {
  background: rgba(214, 183, 114, 0.2);
  border: 1px solid var(--gold);
  color: #fff;
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
.portal-peer-save-btn:hover { background: rgba(78, 240, 150, 0.4); border-color: #4ef096; }
.portal-peer-cancel-btn:hover { background: rgba(255, 77, 77, 0.4); border-color: #ff4d4d; }
.portal-peer-edit-btn {
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0.75;
  transition: all 0.15s;
}
.portal-peer-edit-btn:hover { opacity: 1; background: rgba(214,183,114,0.2); }
.portal-cast-address { font: 10px ui-monospace, monospace; color: var(--muted); }
.portal-cast-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-chat-coitus-btn {
  background: rgba(167, 122, 255, 0.14);
  border: 1px solid rgba(167, 122, 255, 0.45);
  color: #d8c2ff;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portal-chat-coitus-btn:hover {
  background: rgba(167, 122, 255, 0.3);
  border-color: #a77aff;
  color: #fff;
  box-shadow: 0 0 14px rgba(167, 122, 255, 0.5);
}
.portal-chat-coitus-btn.is-active {
  background: #a77aff;
  border-color: #fff;
  color: #05070d;
  box-shadow: 0 0 16px rgba(167, 122, 255, 0.8);
  font-weight: bold;
}
.portal-chat-spam-btn {
  background: rgba(147, 164, 184, 0.12);
  border: 1px solid rgba(147, 164, 184, 0.35);
  color: var(--muted);
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portal-chat-spam-btn:hover {
  background: rgba(147, 164, 184, 0.25);
  border-color: #fff;
  color: #fff;
}
.portal-chat-sever-btn {
  background: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #ff9e9e;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portal-chat-sever-btn:hover {
  background: rgba(255, 77, 77, 0.25);
  border-color: #ff4d4d;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 77, 77, 0.4);
}
#portal-cast-close { padding: 6px 12px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 22px; cursor: pointer; border-radius: 4px; }
#portal-cast-close:hover { color: var(--text); border-color: var(--gold); }

/* Sever / Deactivate Confirmation Dialog */
.confirm-deactivate-dialog {
  max-width: 480px;
}
.confirm-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.confirm-dialog-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #e6ded1;
}
.confirm-dialog-warning {
  color: #ffb8b8 !important;
  font-size: 12.5px !important;
  background: rgba(255, 77, 77, 0.08);
  border-left: 3px solid #ff4d4d;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.danger-button {
  background: #991b1b;
  border: 1px solid #ef4444;
  color: #fff;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.danger-button:hover {
  background: #dc2626;
  border-color: #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.portal-sever-card-btn {
  position: absolute;
  top: -9px;
  left: 12px;
  background: rgba(15, 6, 8, 0.95);
  border: 1px solid rgba(255, 77, 77, 0.6);
  color: #ff9999;
  font: 700 8.5px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.35);
  transition: all 0.15s ease;
}
.portal-sever-card-btn:hover {
  background: #dc2626;
  border-color: #ff8888;
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 77, 77, 0.7);
  transform: scale(1.04);
}

/* Forum Topics Bar */
.portal-topics-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow-x: auto;
}
.portal-topic-tab {
  padding: 6px 13px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font: 11px ui-monospace, monospace;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.portal-topic-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.portal-topic-tab.is-active {
  color: var(--gold);
  background: rgba(214, 183, 114, 0.14);
  border-color: rgba(214, 183, 114, 0.45);
  font-weight: 600;
}
.portal-topics-list { display: flex; gap: 6px; }
.portal-new-topic-btn {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(214, 183, 114, 0.15);
  border: 1px dashed rgba(214, 183, 114, 0.5);
  color: var(--gold);
  font: bold 10px ui-monospace, monospace;
  cursor: pointer;
  transition: all 0.15s;
}
.portal-new-topic-btn:hover { background: rgba(214,183,114,0.28); }
.portal-topic-creator {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.portal-topic-creator input {
  flex: 1;
  padding: 7px 11px;
  background: rgba(10, 14, 20, 0.9);
  border: 1px solid var(--line);
  color: var(--text);
  font: 12px inherit;
}

/* Pinned message banner */
.portal-topic-pinned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 12px;
  background: rgba(214, 183, 114, 0.12);
  border: 1px solid rgba(214, 183, 114, 0.38);
  border-radius: 6px;
  font-size: 11px;
  color: #f7e8c8;
}
.portal-topic-pinned-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.portal-topic-pinned .pinned-icon { font-size: 13px; }
.portal-topic-pinned .pinned-text { line-height: 1.4; overflow-wrap: anywhere; }
.portal-pinned-edit-btn {
  background: rgba(214, 183, 114, 0.15);
  border: 1px solid rgba(214, 183, 114, 0.4);
  color: var(--gold);
  font: 10px ui-monospace, monospace;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.portal-pinned-edit-btn:hover { background: rgba(214, 183, 114, 0.3); color: #fff; }
.portal-pinned-editor {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(14, 19, 26, 0.95);
  border: 1px solid var(--gold);
  border-radius: 6px;
}
.portal-pinned-editor input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  color: #fff;
  font: 12px inherit;
  border-radius: 4px;
}

.portal-cast-empty { padding: 22px 12px; border: 1px solid #ffffff0b; text-align: center; color: var(--muted); }
.portal-cast-empty svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1; }
.portal-cast-empty strong { display: block; font: 16px Georgia, serif; }
.portal-cast-empty p { margin: 8px 0 0; font-size: 11px; }

/* WhatsApp / Telegram Chat Bubbles */
.portal-cast-log {
  min-height: 320px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.portal-cast-log:empty { display: none; }
.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  position: relative;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 2px 7px rgba(0,0,0,0.35);
  overflow-wrap: anywhere;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.chat-bubble.bubble-you {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(62, 49, 27, 0.9), rgba(42, 33, 18, 0.95));
  border: 1px solid rgba(214, 183, 114, 0.48);
  color: #fff4dd;
  border-bottom-right-radius: 2px;
}
.chat-bubble.bubble-peer {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(16, 44, 58, 0.9), rgba(11, 29, 39, 0.95));
  border: 1px solid rgba(126, 207, 255, 0.48);
  color: #e3f5ff;
  border-bottom-left-radius: 2px;
}
.bubble-author {
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 3px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.chat-bubble.bubble-you .bubble-author { color: var(--gold); }
.bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 9px;
  opacity: .7;
}
.bubble-status-tick { color: #4ef096; font-weight: bold; }
.bubble-ephemeral-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #ffb4b4;
  background: rgba(255, 90, 90, 0.16);
  border: 1px solid rgba(255, 100, 100, 0.38);
  padding: 1px 7px;
  border-radius: 9px;
  margin-top: 4px;
}
.bubble-ephemeral-tag .countdown { font-family: ui-monospace, monospace; font-weight: bold; }
.chat-bubble.bubble-destroyed {
  opacity: 0;
  transform: scale(0.88) translateY(6px);
  pointer-events: none;
}
.bubble-glyph-text {
  font-family: 'Segoe UI Historic', 'Enochian', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: #ffe6aa;
  text-shadow: 0 0 8px rgba(214, 183, 114, 0.6);
  padding: 2px 0;
  display: inline-block;
}

.portal-cast-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.portal-composer-options {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--gold);
  font: 11px ui-monospace, monospace;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.portal-tool-btn:hover {
  background: rgba(214, 183, 114, 0.18);
  border-color: var(--gold);
}
.portal-tool-btn.is-active {
  background: rgba(214, 183, 114, 0.28);
  border-color: var(--gold);
  color: #fff;
}
.portal-glyph-drawer {
  background: rgba(8, 12, 18, 0.96);
  border: 1px solid rgba(214, 183, 114, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.glyph-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.glyph-drawer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.glyph-drawer-title { font: 600 12px Georgia, serif; color: var(--gold); }
.glyph-align-group {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glyph-align-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font: 600 9px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.glyph-align-btn.is-active[data-align="good"] {
  background: rgba(214, 183, 114, 0.28);
  color: #fff0bf;
  box-shadow: 0 0 8px rgba(214, 183, 114, 0.4);
}
.glyph-align-btn.is-active[data-align="evil"] {
  background: rgba(224, 75, 75, 0.28);
  color: #ff9b9b;
  box-shadow: 0 0 8px rgba(224, 75, 75, 0.45);
}
.glyph-school-bar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.school-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.15s;
}
.school-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.school-tab.is-active {
  background: rgba(214, 183, 114, 0.22);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 8px rgba(214, 183, 114, 0.3);
}
.school-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.glyph-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}
.glyph-chip {
  height: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 183, 114, 0.2);
  color: #f7e2b6;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  transition: all 0.15s;
}
.glyph-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(214, 183, 114, 0.4));
  pointer-events: none;
}
.glyph-chip span {
  font: 600 7.5px/1 ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--muted);
  pointer-events: none;
}
.glyph-chip:hover {
  background: rgba(214, 183, 114, 0.24);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(214, 183, 114, 0.45);
}
.glyph-chip.is-evil {
  border-color: rgba(224, 75, 75, 0.35);
  background: rgba(30, 8, 8, 0.5);
}
.glyph-chip.is-evil img {
  filter: drop-shadow(0 0 4px rgba(255, 75, 75, 0.55));
}
.glyph-chip.is-evil:hover {
  background: rgba(224, 75, 75, 0.25);
  border-color: #ff6b6b;
  box-shadow: 0 0 12px rgba(255, 75, 75, 0.5);
}

/* Magical Emoticons & Incantation Sequences Drawer */
.portal-emoji-drawer {
  background: rgba(8, 12, 18, 0.97);
  border: 1px solid rgba(214, 183, 114, 0.38);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}
.emoji-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.emoji-drawer-title { font: 600 12px Georgia, serif; color: var(--gold); }
.emoji-drawer-subtitle { font-size: 10px; color: var(--muted); }
.emoji-drawer-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
}
.emoji-category-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.emoji-cat-title {
  font: 600 9px ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c5b493;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 5px;
}
.emoji-btn {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.emoji-btn:hover {
  background: rgba(214, 183, 114, 0.25);
  border-color: var(--gold);
  transform: scale(1.15);
}
.spell-sequences-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spell-seq-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(214, 183, 114, 0.25);
  color: #f7e8c8;
  font: 11.5px Georgia, serif;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.spell-seq-btn:hover {
  background: rgba(214, 183, 114, 0.22);
  border-color: var(--gold);
  color: #fff;
  transform: translateX(3px);
  box-shadow: 0 0 10px rgba(214, 183, 114, 0.3);
}

.portal-cast-label { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.portal-cast-spell-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
#portal-cast-selection { font: 14px Georgia, serif; }

.portal-cast-spell-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 18px;
}
.portal-cast-spell-btn .key-hint { font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.portal-cast-spell-btn .key-hint .key-code { color: var(--gold); font-weight: bold; }

.portal-cast-compose-row { display: flex; gap: 8px; }
.portal-cast-message-form input { flex: 1; min-width: 0; background: #0005; color: var(--text); border: 1px solid #cbb38055; padding: 12px; font: 13px inherit; border-radius: 6px; }
.portal-cast-panel button { cursor: pointer; }
.portal-cast-panel button:disabled { cursor: wait; opacity: .45; }
.portal-cast-image-tools { display: flex; align-items: center; gap: 12px; }
.portal-cast-file { position: relative; flex-shrink: 0; display: flex; gap: 6px; align-items: center; padding: 9px; border: 1px solid var(--line); font-size: 11px; cursor: pointer; }
.portal-cast-file svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; }
.portal-cast-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.portal-cast-file:focus-within { outline: 1px solid var(--gold); outline-offset: 3px; }
#portal-cast-image-help { font-size: 10px; line-height: 1.6; color: var(--muted); }
.portal-cast-image-preview { min-width: 0; border: 1px solid var(--line); padding: 12px; }
.portal-cast-preview-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; overflow-wrap: anywhere; }
.portal-cast-preview-heading button { color: var(--muted); background: transparent; border: 0; }
.portal-cast-panel pre { max-width: 100%; overflow: auto; max-height: 180px; margin: 12px 0; font: 8px/1 monospace; color: #e4dccd; }
.portal-cast-status { min-height: 14px; margin: 0; font-size: 11px; color: #d5c092; line-height: 1.5; }
.portal-cast-lock-hint { padding: 9px; margin: 0; color: #e4d2ac; border: 1px solid #d6b77244; font-size: 11px; }

/* Tutorial Dialog */
.tutorial-dialog { max-width: 640px; }
.tutorial-content { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.tutorial-section h3 { margin: 0 0 8px; font: 16px Georgia, serif; color: var(--gold); }
.tutorial-section p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: #e0d8c7; }
.tutorial-section ul { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.tutorial-section li strong { color: #f0e6d2; }
.tutorial-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.portal-cast-feedback { position: absolute; z-index: 17; left: 50%; bottom: 110px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); padding: 12px 20px; border: 1px solid #d6b77266; background: #0b101aee; color: #d5c092; font-size: 12px; text-align: center; pointer-events: none; }

/* Composer Mana Drawer */
.portal-mana-drawer {
  background: rgba(8, 14, 22, 0.96);
  border: 1px solid rgba(214, 183, 114, 0.4);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mana-drawer-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mana-drawer-title { font: 12px Georgia, serif; color: var(--gold); }
.mana-drawer-subtitle { font-size: 10px; color: var(--muted); }
.mana-drawer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mana-type-selector { display: inline-flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; }
.mana-type-btn {
  background: rgba(0,0,0,0.5);
  border: 0;
  color: var(--muted);
  font: 11px ui-monospace, monospace;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.mana-type-btn.is-active {
  background: rgba(214,183,114,0.3);
  color: #fff;
  font-weight: bold;
}
.mana-amount-input-wrap input {
  width: 130px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--line);
  color: #fff;
  font: 12px ui-monospace, monospace;
  border-radius: 4px;
}
.mana-amount-presets { display: flex; align-items: center; gap: 4px; }
.mana-preset-btn, .mana-preset-clear {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--gold);
  font: 10px ui-monospace, monospace;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.mana-preset-btn:hover { background: rgba(214,183,114,0.2); }
.mana-preset-clear { color: #ff8888; }
.mana-drawer-feedback { margin-top: 6px; font-size: 10px; color: #a4c2d4; }

/* Gift Mana Dialog */
.gift-mana-dialog { max-width: 520px; }
.gift-mana-content { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.gift-choice-dialog, .gift-item-dialog { max-width: 460px; }
.gift-choice-content { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.gift-choice-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 188, 87, 0.3);
  border-radius: 8px;
  background: rgba(16, 20, 30, 0.6);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.gift-choice-option:hover {
  border-color: var(--gold);
  background: rgba(244, 188, 87, 0.1);
  transform: translateY(-1px);
}
.gift-choice-icon { font-size: 26px; flex: none; }
.gift-choice-text { display: flex; flex-direction: column; gap: 2px; }
.gift-choice-text small { color: var(--faint); font-size: 11px; }
.gift-item-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.gift-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(156, 181, 211, 0.22);
  border-radius: 7px;
  background: rgba(16, 20, 30, 0.5);
}
.gift-item-row strong { flex: 1; font-size: 13px; }
.gift-mana-intro { margin: 0; font-size: 13px; color: #e6ded1; line-height: 1.5; }
.gift-mana-intro strong { color: var(--gold); }
.mana-choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mana-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(10,15,24,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.mana-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.mana-card.is-active {
  border-color: var(--gold);
  background: rgba(214,183,114,0.12);
  box-shadow: 0 0 14px rgba(214,183,114,0.25);
}
.mana-card-title { font: 600 13px Georgia, serif; color: #fff; }
.mana-card-sub { font-size: 10px; color: var(--muted); }
.mana-card-avail { font-size: 11px; margin-top: 4px; color: #bedee8; }
.mana-card-avail strong { color: #fff; }

.gift-mana-amount-row label, .gift-mana-dedica-row label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px;
}
.gift-amount-input-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gift-amount-input-group input, .gift-mana-dedica-row input {
  flex: 1; min-width: 140px; padding: 10px 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--line); color: #fff; font: 13px inherit; border-radius: 4px;
}
.mana-modal-presets { display: flex; gap: 4px; }
.preset-pill {
  padding: 6px 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--gold); font: 11px ui-monospace, monospace; border-radius: 4px; cursor: pointer;
}
.preset-pill:hover { background: rgba(214,183,114,0.2); }
.gift-mana-error { color: #ff7b7b; font-size: 12px; margin: 0; }
.gift-mana-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

/* A deliberately loud "i" badge — the point is that it's easy to notice
   and hit, not blend in with the other quiet icon buttons on the card. */
.portal-detail-btn {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(87, 221, 255, 0.16);
  border: 1.5px solid rgba(87, 221, 255, 0.65);
  color: #bdf2ff;
  font: 700 12px/1 Georgia, serif;
  font-style: italic;
  cursor: pointer;
  transition: all 0.15s ease;
}
.portal-detail-btn:hover {
  background: rgba(87, 221, 255, 0.32);
  border-color: #57ddff;
  color: #fff;
  box-shadow: 0 0 10px rgba(87, 221, 255, 0.45);
  transform: translateY(-1px);
}

.portal-detail-dialog { max-width: 560px; }
/* Restyled to match the rest of the app's boxed panels (VIP profile, school
   access) instead of a raw two-column monospace dt/dd table. */
.portal-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}
.portal-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  background: rgba(16, 20, 30, 0.55);
  border: 1px solid rgba(156, 181, 211, 0.2);
  border-radius: 7px;
}
.portal-detail-label {
  color: var(--faint);
  font: 700 9.5px ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.portal-detail-value {
  color: var(--text);
  font: 500 13px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  word-break: break-word;
}

.portal-mana-btn {
  padding: 4px 8px;
  background: rgba(214, 183, 114, 0.12);
  border: 1px solid rgba(214, 183, 114, 0.35);
  color: var(--gold);
  border-radius: 4px;
  font: 11px ui-monospace, monospace;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}
.portal-mana-btn:hover {
  background: rgba(214, 183, 114, 0.28);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.bubble-mana-gift {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}
.bubble-mana-gift.lunar {
  background: rgba(100, 210, 255, 0.15);
  border: 1px solid rgba(100, 210, 255, 0.4);
  color: #a7ebff;
}
.bubble-mana-gift.solar {
  background: rgba(244, 188, 87, 0.18);
  border: 1px solid rgba(244, 188, 87, 0.45);
  color: #ffe6a0;
}
@media (max-height: 650px) { .portal-cast-panel { max-height: calc(100dvh - 32px); gap: 10px; } .portal-cast-empty { padding: 10px; } }
#spells-dialog select { display: block; width: 100%; margin: 7px 0 14px; padding: 10px; color: var(--text); background: #0c1018; border: 1px solid var(--line); font: inherit; }
#spells-dialog label { color: var(--muted); font-size: 12px; }
#spells-dialog .glyph-forge { margin-top: 20px; }
.sealed-note { border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); }
.guidance-dialog { max-width: 560px; }
.guidance-dialog #nera-quote { margin: 28px 0 16px; font: 22px/1.7 Georgia, serif; color: #e1d8c2; }
@media (max-width: 600px) { .build-flags { gap: 3px; font-size: 8px; } .spell-selector { width: 54px; right: 10px; bottom: 12px; } .spell-selector svg { width: 44px; } }

/* Scene Magic Laboratory - Subterranean Crypt */
.scene-laboratory {
  background-color: #050810;
  background-image: radial-gradient(circle at 50% 25%, rgba(14, 20, 36, 0.72) 0%, rgba(4, 6, 12, 0.92) 85%), url('/assets/room-laboratory.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 50px) 20px 80px;
  overflow-y: auto;
  box-sizing: border-box;
  min-height: 100dvh;
  transform: none !important;
  transition: none !important;
  inset: 0 !important;
}
body[data-scene="laboratory"] .scene-laboratory {
  transform: none !important;
  transition: none !important;
  inset: 0 !important;
}
.laboratory-header {
  text-align: center;
  max-width: 900px;
  width: 100%;
  margin-bottom: clamp(20px, 3vh, 32px);
  position: relative;
}
.laboratory-top-nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.lab-ascend-btn {
  background: linear-gradient(135deg, rgba(244, 188, 87, 0.22), rgba(244, 188, 87, 0.08));
  border: 1px solid var(--gold);
  color: #fcebc7;
  font-family: Georgia, serif;
  font-size: 14px;
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 16px rgba(244, 188, 87, 0.25);
}
.lab-ascend-btn:hover {
  background: var(--gold);
  color: #05070d;
  font-weight: bold;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(244, 188, 87, 0.6);
}
.laboratory-title {
  font-family: Georgia, serif;
  font-size: clamp(26px, 4.5vw, 40px);
  color: #fcebc7;
  letter-spacing: 0.04em;
  margin: 6px 0 8px;
  text-shadow: 0 0 24px rgba(244, 188, 87, 0.45);
}
.laboratory-subtitle {
  color: #92a4ba;
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.5;
  margin: 0;
}
.laboratory-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1040px;
  width: 100%;
  align-items: center;
}
.lab-compact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}
.lab-card {
  background: linear-gradient(160deg, rgba(18, 25, 42, 0.88), rgba(7, 10, 18, 0.94));
  border: 1px solid rgba(244, 188, 87, 0.25);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
  box-sizing: border-box;
}
.lab-card:hover {
  border-color: rgba(244, 188, 87, 0.55);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 20px rgba(244, 188, 87, 0.15);
}
.lab-card-compact {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.lab-card-compact .lab-card-icon {
  font-size: 28px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.lab-card-compact .lab-card-text {
  flex: 1 1 auto;
}
.lab-card-compact h3 {
  font-family: Georgia, serif;
  font-size: 15px;
  color: #fff;
  margin: 0 0 3px;
}
.lab-card-compact p {
  color: #8c9eb2;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}
.lab-card-compact .lab-button-row {
  flex-shrink: 0;
}
.lab-card-compact .lab-button-row button {
  padding: 7px 14px;
  font-size: 12px;
}
.lab-card-hero {
  width: 100%;
}
.lab-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid rgba(244, 188, 87, 0.2);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.lab-hero-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lab-hero-title-group .lab-card-icon {
  font-size: 32px;
  margin-bottom: 0;
}
.lab-hero-title-group h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  color: #fcebc7;
  margin: 0 0 4px;
}
.lab-hero-title-group p {
  color: #8c9eb2;
  font-size: 13px;
  margin: 0;
}
.lab-card-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(244, 188, 87, 0.5));
}

/* Grimoire of Colors & Sigils enhancement */
.grimoire-actions-bar {
  display: flex;
  gap: 12px;
  margin: 18px 0 10px;
  flex-wrap: wrap;
}
.grimoire-actions-bar button {
  flex: 1 1 200px;
}
.school-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.school-sigil-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--school-color));
}
.school strong {
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Schools of Magic access: up to one school per Circle, sealed until the
   next full moon. Panel sits above the 9 school cards in the Grimoire. */
.school-access-panel {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 188, 87, 0.3);
  border-radius: 8px;
  background: rgba(16, 20, 30, 0.5);
}
.school-access-summary {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.school-access-picker {
  margin-top: 12px;
}
.school-access-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.school-access-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.school-access-check input { cursor: pointer; }
.school-access-counter {
  margin: 10px 0 0;
  font: 700 11px ui-monospace, monospace;
  color: var(--gold);
}
.school-access-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--faint);
}
.school-access-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font: 700 9px ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.school.is-unlocked { box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.4); }
.school.is-unlocked .school-access-badge { color: #7fe3a0; }
.school.is-locked { opacity: 0.55; }
.school.is-locked .school-access-badge { color: var(--faint); }

/* Glyph Reference Library Dialog */
.glyph-library-dialog {
  max-width: 960px;
  width: 95vw;
  max-height: 90vh;
}
.glyph-library-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(85vh - 70px);
  overflow-y: auto;
  padding-right: 4px;
}
.glyph-library-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(14, 20, 32, 0.7);
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glyph-library-align-toggle {
  display: flex;
  gap: 8px;
}
.glyph-library-align-toggle .glyph-align-btn {
  flex: 1;
  padding: 8px 14px;
  font: 11px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(25, 33, 50, 0.8);
  color: #92a4ba;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.glyph-library-align-toggle .glyph-align-btn.is-active {
  background: var(--gold);
  color: #05070d;
  font-weight: bold;
  box-shadow: 0 0 14px rgba(244, 188, 87, 0.4);
}
.glyph-library-align-toggle .glyph-align-btn[data-lib-align="evil"].is-active {
  background: #ff5263;
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 82, 99, 0.4);
}
.glyph-library-schools {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.lib-school-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(10, 14, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #9ab0c8;
  font: 12px/1.2 var(--mono);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.lib-school-tab img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.lib-school-tab:hover {
  border-color: rgba(244, 188, 87, 0.4);
  color: #fff;
}
.lib-school-tab.is-active {
  border-color: var(--gold);
  background: rgba(244, 188, 87, 0.15);
  color: #fff;
  font-weight: bold;
}
.glyph-library-overview {
  background: linear-gradient(135deg, rgba(20, 28, 45, 0.8), rgba(9, 13, 22, 0.9));
  border: 1px solid rgba(244, 188, 87, 0.25);
  border-radius: 6px;
  padding: 14px 18px;
}
.lib-school-badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lib-school-sigil {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(244, 188, 87, 0.5));
}
.lib-school-badge-row h3 {
  margin: 0 0 4px;
  font-family: Georgia, serif;
  font-size: 18px;
  color: #f7e0b5;
}
.lib-school-desc {
  margin: 0;
  font-size: 13px;
  color: #8fa0b5;
  line-height: 1.4;
}
.glyph-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.lib-glyph-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: rgba(13, 18, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.lib-glyph-card:hover, .lib-glyph-card.is-selected {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(244, 188, 87, 0.3);
  background: rgba(24, 34, 56, 0.95);
}
.lib-glyph-card.is-evil:hover, .lib-glyph-card.is-evil.is-selected {
  border-color: #ff5263;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 82, 99, 0.3);
}
.lib-glyph-img-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.lib-glyph-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(244, 188, 87, 0.3));
}
.lib-glyph-card.is-evil .lib-glyph-img-wrap img {
  filter: drop-shadow(0 0 4px rgba(255, 82, 99, 0.35));
}
.lib-glyph-card strong {
  display: block;
  font-size: 12px;
  color: #fcebc7;
  font-family: Georgia, serif;
}
.lib-glyph-card small {
  display: block;
  font: 10px var(--mono);
  color: #798b9e;
  margin-top: 2px;
}
.glyph-library-detail {
  background: rgba(12, 16, 26, 0.95);
  border: 1px solid rgba(244, 188, 87, 0.3);
  border-radius: 6px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.lib-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.lib-detail-header strong {
  font-family: Georgia, serif;
  font-size: 18px;
  color: #f7e0b5;
}
.lib-detail-header span {
  font: 11px var(--mono);
  color: #92a4ba;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.glyph-library-detail p {
  margin: 6px 0;
  font-size: 13px;
  color: #d1dde8;
  line-height: 1.5;
}
.lib-detail-def {
  font-style: italic;
  color: #8c9eb2 !important;
}

/* Task 10 — School Progression Full Moon Gating */
.school-fullmoon-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(30, 22, 50, 0.9), rgba(18, 12, 30, 0.95));
  border: 1px solid rgba(170, 120, 255, 0.4);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(170, 120, 255, 0.15);
  font-size: 13px;
  color: #c8b0f8;
  line-height: 1.4;
}
.school-fullmoon-lock .lock-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(170, 120, 255, 0.6));
}
.school-fullmoon-lock strong {
  color: #e0d0ff;
}
.school-fullmoon-lock.is-unlocked {
  background: linear-gradient(135deg, rgba(22, 50, 30, 0.9), rgba(12, 30, 18, 0.95));
  border-color: rgba(93, 232, 151, 0.45);
  box-shadow: 0 0 16px rgba(93, 232, 151, 0.15);
  color: #a0e8c0;
}
.school-fullmoon-lock.is-unlocked .lock-icon::before {
  content: '🌕';
}
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Task 1 — Karma Gauge HUD (positioned cleanly below Mana Pool)
   Same width and left edge as the Mana Pool box above it, but flat: the
   label and badge sit on the left, the gauge on the right, so the box uses
   its long side instead of stacking into a tall little card. */
.karma-hud {
  position: absolute;
  top: 310px;
  left: clamp(18px, 3vw, 50px);
  width: min(300px, 40vw);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(90deg, rgba(3, 5, 10, 0.92), rgba(6, 10, 20, 0.82));
  border: 1px solid rgba(244, 188, 87, 0.35);
  border-left: 2px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 8px 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 12;
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.karma-hud:hover {
  transform: translateX(2px);
  border-color: var(--gold);
  box-shadow: 0 4px 22px rgba(244, 188, 87, 0.25);
}
.karma-hud-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
@media (max-width: 520px) {
  .karma-hud { gap: 6px; padding: 6px 10px; }
  .karma-hud-label, .karma-alignment-badge { font-size: 8.5px; }
}
.karma-hud-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--faint);
}
.karma-alignment-badge {
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: #d1dde8;
}
.karma-alignment-badge.is-harmony { color: #5de897; background: rgba(93, 232, 151, 0.15); }
.karma-alignment-badge.is-ego { color: #f4bc57; background: rgba(244, 188, 87, 0.15); }
.karma-alignment-badge.is-corruption { color: #ff7878; background: rgba(255, 120, 120, 0.15); }

.karma-gauge {
  display: flex;
  /* Shrinks with the box instead of pushing out of it on a narrow screen. */
  flex: 0 1 128px;
  min-width: 70px;
  justify-content: center;
  align-items: center;
}
/* The needle must stay inside the box. It used to escape because the SVG
   rotate(a, 50, 48) attribute and a CSS transform-origin of 50px 48px were
   both applied, so the pivot was offset twice and the needle flew out to the
   right. Now the rotation is CSS only, around the hub, and nothing overflows. */
.karma-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.karma-gauge-text {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
#karma-needle {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-box: view-box;
  transform-origin: 50px 48px;
}

/* Character Settings tab detailed karma cards */
.character-karma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.char-karma-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.char-karma-card.char-karma-harmony { border-color: rgba(93, 232, 151, 0.3); background: rgba(93, 232, 151, 0.04); }
.char-karma-card.char-karma-corruption { border-color: rgba(255, 120, 120, 0.3); background: rgba(255, 120, 120, 0.04); }

.char-karma-icon { font-size: 20px; flex-shrink: 0; }
.char-karma-info { flex: 1; min-width: 0; }
.char-karma-info strong { display: block; font-size: 12px; color: #e9f0f6; }
.char-karma-info small { display: block; font-size: 10px; color: #8c9eb2; margin-top: 2px; }
.char-karma-score { font: 700 16px ui-monospace, monospace; color: var(--gold); }
.char-karma-harmony .char-karma-score { color: #5de897; }
.char-karma-corruption .char-karma-score { color: #ff7878; }


/* Task 13 - the other side's standing, on the card itself. Three tight chips
   rather than a table: a portal card is a trading card, not a statement. */
.portal-standing { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.standing-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  font: 500 10px/1.4 ui-monospace, monospace; letter-spacing: .04em;
}
.standing-chip strong { font-weight: 700; color: #e9f0f6; }
.standing-label { opacity: .65; }
.standing-pr3d { border-color: rgba(244, 188, 87, .32); }
.standing-pr3d strong { color: #f4bc57; }
.standing-solar strong { color: #ffd98a; }
.standing-lunar strong { color: #9fd8ff; }
/* Task 14 - the price of a cast, stated where the cast happens. */
.portal-cast-cost {
  display: block; margin-top: 3px;
  font: 500 10px/1.4 ui-monospace, monospace;
  color: #9fd8ff; opacity: .75; letter-spacing: .03em;
}
/* Task 17 - Book of Treasures: offerings sections above the old ledger. */
.treasures-section { margin: 14px 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.treasures-note { margin: 4px 0 6px; font-size: 12px; line-height: 1.55; opacity: .85; }
.treasures-sealed { margin: 0; font: 500 11px/1.4 ui-monospace, monospace;
  color: #f4bc57; opacity: .7; letter-spacing: .04em; }
.treasures-dialog { width: min(880px, calc(100vw - 32px)); }
/* The Market: a fantasy-bazaar sign at the top of the Book of Treasures,
   not just another settings-subtitle among the rest. */
.market-section {
  background: radial-gradient(circle at 50% 0%, rgba(244, 188, 87, 0.1), rgba(6, 10, 18, 0.4));
  border: 1px solid rgba(244, 188, 87, 0.35);
}
.market-heading {
  margin: 0 0 6px;
  text-align: center;
  font: 700 22px Georgia, serif;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(244, 188, 87, 0.45);
}
.market-heading span { opacity: 0.7; font-size: 0.8em; }
.treasures-price-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12px;
}
.treasures-price-table th, .treasures-price-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}
.treasures-price-table th {
  font: 700 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.treasures-price-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.treasures-price-table td:nth-child(2) { color: var(--gold); font: 700 12px var(--mono); white-space: nowrap; }
.treasures-price-table td:last-child { color: var(--faint); }
@media (max-width: 620px) {
  .treasures-price-table, .treasures-price-table tbody, .treasures-price-table tr, .treasures-price-table td { display: block; }
  .treasures-price-table thead { display: none; }
  .treasures-price-table tr { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .treasures-price-table td { padding: 2px 0; white-space: normal !important; }
}
/* Task 16 - WORLD. Black and white, taijitu: it belongs to nobody. */
.portal-world-btn-corner {
  position: absolute;
  z-index: 12;
  left: clamp(16px, 2.4vw, 40px);
  bottom: clamp(60px, 9vh, 74px);
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  cursor: pointer;
  background: linear-gradient(135deg, #f4f4f4 0%, #f4f4f4 49%, #101014 51%, #101014 100%);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.7), 0 0 16px rgba(255,255,255,.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portal-world-btn-corner:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 24px rgba(0,0,0,.85), 0 0 28px rgba(255,255,255,.45);
  border-color: #fff;
}
.portal-world-btn-corner .world-taiji {
  width: 22px;
  height: 22px;
}
.portal-world-btn-corner .world-name {
  font: 700 8.5px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 1px 4px #000;
}

/* Specific styling when attached inside the Mana Pool navata (#mana-hud) */
.portal-world-btn-mana {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 6px !important;
  padding: 6px 10px !important;
  flex-direction: row !important;
  gap: 8px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #f4f4f4 0%, #f4f4f4 48%, #101014 52%, #101014 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 14px rgba(255, 255, 255, 0.2) !important;
}
.portal-world-btn-mana:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 255, 255, 0.45) !important;
  border-color: #fff !important;
}
.portal-world-btn-mana .world-taiji {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}
.portal-world-btn-mana .world-name {
  font: 700 10px/1 ui-monospace, monospace !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  text-shadow: 0 1px 4px #000 !important;
}
.portal-world-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; margin: 0 0 14px; padding: 14px 16px; cursor: pointer;
  background: linear-gradient(135deg, #f4f4f4 0%, #f4f4f4 49%, #101014 51%, #101014 100%);
  border: 1px solid rgba(255,255,255,.28); border-radius: 12px;
  box-shadow: 0 0 22px rgba(255,255,255,.10);
}
.portal-world-card:hover { box-shadow: 0 0 34px rgba(255,255,255,.22); }
.world-taiji {
  width: 30px; height: 30px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 26%, #101014 5px, transparent 5px),
    radial-gradient(circle at 50% 74%, #f4f4f4 5px, transparent 5px),
    linear-gradient(90deg, #f4f4f4 50%, #101014 50%);
  border: 1px solid rgba(128,128,128,.6);
}
.world-name { font: 700 15px/1 ui-monospace, monospace; letter-spacing: .22em; color: #b9c6d2;
  text-shadow: 0 0 8px rgba(0,0,0,.9), 0 0 8px rgba(255,255,255,.5); }
.world-meta { font-size: 10px; letter-spacing: .06em; color: #97a6b5; }

.world-dialog { max-width: 760px; }
.world-intro { font-size: 12.5px; line-height: 1.6; opacity: .88; }
.world-costs { margin: 10px 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  font: 500 11px/1.6 ui-monospace, monospace; color: #b7c6d4; }
.world-submit-form { display: grid; gap: 5px; margin: 12px 0 18px; }
.world-submit-form label { font-size: 11px; letter-spacing: .05em; opacity: .78; }
.world-submit-form .optional { opacity: .55; }
.world-submit-form input { padding: 7px 9px; border-radius: 7px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.14); color: inherit; }

.world-list { display: grid; gap: 8px; }
.world-empty { opacity: .6; font-size: 12px; font-style: italic; }
.world-entry {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.world-entry.is-highlighted { border-color: rgba(244,188,87,.42); background: rgba(244,188,87,.06); }
.world-rank { font: 700 12px/1 ui-monospace, monospace; opacity: .5; }
.world-entry-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.world-link { color: #9fd8ff; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.world-host { font: 500 10px/1.3 ui-monospace, monospace; opacity: .55; }
.world-author { font: 500 10px/1.3 ui-monospace, monospace; color: #f4bc57; opacity: .8; }
.world-score { font: 500 10px/1.3 ui-monospace, monospace; opacity: .65; }
.world-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.world-action { padding: 4px 8px; border-radius: 999px; cursor: pointer; font-size: 11px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: inherit; }
.world-action:hover { background: rgba(255,255,255,.12); }
.world-highlight { border-color: rgba(244,188,87,.4); color: #f4bc57; }
.world-withdraw { border-color: rgba(255,120,120,.35); color: #ff9b9b; }
.world-voted { font-size: 11px; opacity: .6; align-self: center; }
/* Task 15 - the Laboratory bench. */
.lab-alphabet-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.lab-alphabet-controls select { padding: 6px 10px; border-radius: 6px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(244, 188, 87, 0.35); color: #fcebc7; font-weight: 500; }
.lab-count { font: 500 11px var(--mono); color: #a0b4cc; }
.lab-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(156, 181, 211, 0.25);
}
.lab-mode-btn {
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font: 700 11px var(--mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lab-mode-btn:hover { color: var(--text); }
.lab-mode-btn.is-active {
  background: rgba(244, 188, 87, 0.18);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(244, 188, 87, 0.5);
}
#lab-spell-school-wrap { font-size: 10px; color: var(--faint); }
.lab-glyph-card-pickable {
  font: inherit;
  cursor: pointer;
  width: 100%;
}
.lab-glyph-card-pickable.has-value .lab-glyph-id { color: #7fe3a0; }

/* Tome shelf inside Alphabet card */
.lab-tome-shelf {
  background: rgba(8, 12, 22, 0.7);
  border: 1px solid rgba(244, 188, 87, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-tome-forge-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lab-shelf-label {
  font: 500 11px var(--mono);
  color: #8fa0b5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.lab-tome-box-icon {
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(244, 188, 87, 0.5));
}
.lab-tome-list-wrap {
  display: flex;
  flex-direction: column;
}
.lab-tome-box {
  padding: 12px 14px;
  border: 1px solid rgba(244, 188, 87, 0.25);
  border-radius: 8px;
  background: radial-gradient(circle at 0% 0%, rgba(244, 188, 87, 0.08), rgba(6, 10, 18, 0.6));
}
.lab-tome-forge-inline {
  padding-top: 10px;
  border-top: 1px dashed rgba(244, 188, 87, 0.2);
}
.lab-tome-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(18, 25, 42, 0.9);
  border: 1px solid rgba(244, 188, 87, 0.28);
  font-size: 12px;
  color: #e5edf5;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lab-tome-chip:hover {
  border-color: var(--gold);
  background: rgba(244, 188, 87, 0.15);
  color: #fff;
  transform: translateY(-1px);
}
.lab-tome-chip.is-common {
  border-color: rgba(150, 200, 255, 0.4);
  background: rgba(14, 28, 48, 0.9);
}
.lab-tome-chip.is-common:hover {
  border-color: rgba(150, 200, 255, 0.8);
}
/* Whichever tome's bindings are currently loaded into the alphabet grid,
   including the Standard one -- previously there was no way to tell. */
.lab-tome-chip.is-active {
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(244, 188, 87, 0.4);
}
.lab-tome-chip.is-common.is-active {
  box-shadow: 0 0 0 2px #9cd4ff, 0 0 12px rgba(156, 212, 255, 0.4);
}
.lab-tome-chip-icon {
  font-size: 14px;
}
.lab-tome-badge-common {
  font: 700 9px var(--mono);
  background: rgba(150, 200, 255, 0.2);
  color: #9cd4ff;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.lab-tome-chip-meta {
  font: 10px var(--mono);
  color: #798b9e;
}
.lab-tome-del-btn {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff9b9b;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.lab-tome-del-btn:hover {
  background: #ff5263;
  color: #fff;
}

/* 27 Glyphs Full Overview Grid */
.lab-alphabet-grid-27 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  width: 100%;
}
@media (min-width: 960px) {
  .lab-alphabet-grid-27 {
    grid-template-columns: repeat(9, 1fr);
  }
}
.lab-glyph-card-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 6px;
  background: rgba(11, 16, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  gap: 5px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.lab-glyph-card-cell:hover, .lab-glyph-card-cell.has-value {
  border-color: rgba(244, 188, 87, 0.5);
  background: rgba(18, 28, 48, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(244, 188, 87, 0.12);
}
.lab-glyph-thumb-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab-glyph-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(244, 188, 87, 0.3));
}
.lab-glyph-info-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.lab-glyph-name {
  font-family: Georgia, serif;
  font-size: 13px;
  color: #fcebc7;
}
.lab-glyph-id {
  font: 500 8.5px var(--mono);
  color: #798b9e;
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.lab-glyph-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfe4f5;
  transition: all 0.2s ease;
}
.lab-glyph-input:focus, .lab-glyph-card-cell.has-value .lab-glyph-input {
  border-color: rgba(244, 188, 87, 0.65);
  color: #f4bc57;
  font-weight: bold;
}

/* Card 4 - Prepared Formulas Dual Pane */
.lab-card-formulas {
  width: 100%;
}
.lab-formulas-header, .lab-observatory-header {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(244, 188, 87, 0.2);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.lab-formulas-header h3, .lab-observatory-header h3 {
  font-family: Georgia, serif;
  font-size: 19px;
  color: #fcebc7;
  margin: 0 0 4px;
}
.lab-formulas-header p, .lab-observatory-header p {
  color: #8c9eb2;
  font-size: 13px;
  margin: 0;
}
.lab-formulas-dual-pane {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: with many glyphs in a sequence, the
     right pane's row of fixed-width cards has a large intrinsic min-width
     that a plain 1fr track refuses to shrink below, pushing the whole
     panel wider than the page (same bug as the Grimoire's school grid). */
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .lab-formulas-dual-pane {
    grid-template-columns: 1fr;
  }
}
.lab-pane-title {
  display: block;
  font: 700 11px var(--mono);
  color: #8fa0b5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.lab-formula {
  cursor: pointer;
  transition: all 0.2s ease;
}
.lab-formula:hover {
  background: rgba(244, 188, 87, 0.08);
  border-color: rgba(244, 188, 87, 0.35);
}
.lab-formula.is-selected {
  border-color: var(--gold);
  background: rgba(244, 188, 87, 0.15);
  box-shadow: inset 3px 0 0 var(--gold);
}
.lab-formula.is-selected strong {
  color: #f4bc57;
}
.lab-sequence-inspector {
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(244, 188, 87, 0.25);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  min-width: 0;
}
.lab-sequence-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}
.lab-sequence-header strong {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #fcebc7;
}
.lab-sequence-meta {
  font: 10px var(--mono);
  color: #798b9e;
}
.lab-sequence-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}
.lab-sequence-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 12px;
  background: rgba(16, 24, 40, 0.95);
  border: 1px solid rgba(244, 188, 87, 0.3);
  border-radius: 8px;
  min-width: 84px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.lab-seq-thumb-wrap {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.lab-seq-thumb-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(244, 188, 87, 0.4));
}
.lab-seq-glyph-id {
  font: 9px var(--mono);
  color: #798b9e;
}
.lab-seq-meaning {
  font-family: Georgia, serif;
  font-size: 13px;
  color: #f4bc57;
  margin-top: 3px;
}
.lab-sequence-translation {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #cfe4f5;
  border-left: 3px solid var(--gold);
}
.lab-sequence-translation em {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #fcebc7;
  font-style: normal;
}

/* Card 5 - Plenilunium Observatory */
.lab-card-astronomy {
  width: 100%;
}
.lab-countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  background: radial-gradient(circle at 50% 50%, rgba(170, 120, 255, 0.18) 0%, rgba(10, 14, 26, 0.9) 80%);
  border: 1px solid rgba(170, 120, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(170, 120, 255, 0.15);
  margin-bottom: 16px;
  text-align: center;
}
.lab-countdown-label {
  font: 700 10px var(--mono);
  letter-spacing: 0.14em;
  color: #bfa0f8;
  text-transform: uppercase;
}
.lab-moon-countdown {
  font-family: Georgia, serif;
  font-size: clamp(24px, 4.5vw, 36px);
  color: #f0e6ff;
  text-shadow: 0 0 16px rgba(170, 120, 255, 0.7);
  letter-spacing: 0.04em;
  margin: 6px 0;
}
.lab-moon-exact-time {
  font: 11px var(--mono);
  color: #a892d8;
}
.lab-lunar-forecast {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lab-forecast-header strong {
  font: 700 11px var(--mono);
  color: #8fa0b5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lab-lunar-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.lab-lunar-cycle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(12, 16, 28, 0.88);
  border: 1px solid rgba(170, 120, 255, 0.25);
  border-radius: 6px;
  transition: all 0.2s ease;
}
.lab-lunar-cycle-card:hover {
  border-color: rgba(170, 120, 255, 0.6);
  background: rgba(20, 26, 44, 0.95);
  box-shadow: 0 0 14px rgba(170, 120, 255, 0.2);
}
.lab-cycle-badge {
  font: 700 10px var(--mono);
  background: rgba(170, 120, 255, 0.2);
  color: #d8c2ff;
  padding: 3px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.lab-cycle-moon-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 235, 160, 0.6));
  flex-shrink: 0;
}
.lab-cycle-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lab-cycle-details strong {
  font-family: Georgia, serif;
  font-size: 13px;
  color: #f7e0b5;
}
.lab-cycle-details small {
  font: 10px var(--mono);
  color: #92a4ba;
  margin-top: 2px;
}

/* Click-to-compose glyph sequence, replacing "type gold-01 gold-13" by hand. */
.lab-formula-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(244, 188, 87, 0.2);
  border-radius: 8px;
  background: rgba(8, 12, 22, 0.6);
}
.lab-formula-seq-count { color: var(--gold); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lab-formula-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  align-items: center;
}
.lab-formula-seq-empty { margin: 0; }
.lab-formula-seq-chip {
  width: 34px;
  height: 34px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(244, 188, 87, 0.12);
  border: 1px solid rgba(244, 188, 87, 0.45);
  cursor: pointer;
  transition: all 0.15s ease;
}
.lab-formula-seq-chip:hover {
  background: rgba(255, 100, 100, 0.18);
  border-color: rgba(255, 120, 120, 0.6);
}
.lab-formula-seq-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lab-formula-form, .lab-forge-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lab-formula-form input, .lab-forge-form input { flex: 1 1 130px; padding: 6px 8px; border-radius: 6px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.13); color: inherit; font-size: 12px; }
.lab-formula-list, .lab-tome-list { display: grid; gap: 5px; margin-top: 6px; }
.lab-empty { font-size: 11px; font-style: italic; opacity: .55; margin: 4px 0; }
.lab-formula, .lab-tome { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.lab-formula-glyphs, .lab-tome-meta { font: 500 10px/1.3 ui-monospace, monospace; opacity: .62; }
.lab-formula strong, .lab-tome strong { flex: 0 0 auto; }
.lab-formula-glyphs { flex: 1 1 auto; overflow-wrap: anywhere; }
.lab-tome-meta { margin-left: auto; }
.lab-remove { margin-left: auto; padding: 2px 7px; border-radius: 999px; cursor: pointer;
  background: rgba(255,120,120,.10); border: 1px solid rgba(255,120,120,.30); color: #ff9b9b; }
/* A tome is a snapshot, so an edited alphabet leaves sent copies behind.
   That divergence is silent by nature - it decodes to the wrong word, not to
   an error - so it is shouted rather than whispered. */
.lab-stale { margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: rgba(255,140,90,.09); border: 1px solid rgba(255,140,90,.38); }
.lab-stale strong { display: block; font-size: 12px; color: #ffb083; }
.lab-stale p { margin: 4px 0 6px; font-size: 11px; line-height: 1.55; opacity: .85; }
.lab-stale-row { font: 500 10px/1.6 ui-monospace, monospace; opacity: .8; }
/* Which tomes each side is showing. Their row matters more than yours. */
.portal-tomes-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tomes-label { display: block; font: 500 9px/1.6 ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.tome-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; min-height: 20px; }
.tome-chip-empty { font-size: 10px; font-style: italic; opacity: .55; }
.portal-tomes-theirs .tome-chip-empty { color: #ffb083; opacity: .8; font-style: normal; }
.tome-chip { --tome-tint: #9fb0c0;
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--tome-tint) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tome-tint) 45%, transparent);
  color: inherit; font-size: 11px; cursor: default; }
button.tome-chip { cursor: pointer; }
button.tome-chip:hover { background: color-mix(in srgb, var(--tome-tint) 26%, transparent); }
.tome-chip strong { color: var(--tome-tint); font-weight: 600; }
.tome-chip.is-multi { --tome-tint: #cfd6de;
  background: linear-gradient(100deg, rgba(214,183,114,.14), rgba(180,150,208,.14), rgba(128,174,217,.14)); }
.tome-chip.is-hidden-tome { opacity: .38; border-style: dashed; }
.tome-chip.is-single-use { border-color: rgba(255,160,90,.6); }
.tome-chip-kind { font: 500 9px/1.4 ui-monospace, monospace; opacity: .62; }
.tome-chip-burn { font: 500 9px/1.4 ui-monospace, monospace; color: #ffb083; }
@media (max-width: 620px) { .portal-tomes-bar { grid-template-columns: 1fr; } }
/* Character ledger: three records read as one timeline. */
.ledger-intro { font-size: 12px; line-height: 1.55; opacity: .82; margin: 2px 0 10px; }
.ledger-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.ledger-filters label { display: flex; flex-direction: column; gap: 2px;
  font: 500 9px/1.4 ui-monospace, monospace; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72; }
.ledger-filters select, .ledger-filters input { padding: 5px 7px; border-radius: 6px; font-size: 12px;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.14); color: inherit; text-transform: none; }
.ledger-totals { margin-bottom: 8px; font: 500 11px/1.5 ui-monospace, monospace; color: #b7c6d4; }
.ledger-list { display: grid; gap: 4px; max-height: 330px; overflow-y: auto; }
.ledger-empty { font-size: 12px; font-style: italic; opacity: .55; }
.ledger-row { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 5px 9px; border-radius: 7px; font-size: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ledger-row.is-sent { border-left: 2px solid rgba(244,188,87,.55); }
.ledger-row.is-received { border-left: 2px solid rgba(128,174,217,.55); }
.ledger-arrow { font: 700 12px/1 ui-monospace, monospace; opacity: .7; }
.ledger-row.is-sent .ledger-arrow { color: #f4bc57; }
.ledger-row.is-received .ledger-arrow { color: #80aed9; }
.ledger-peer { font: 500 11px/1.4 ui-monospace, monospace; opacity: .85; overflow-wrap: anywhere; }
.ledger-amount { white-space: nowrap; }
.ledger-when { font: 500 10px/1.4 ui-monospace, monospace; opacity: .5; white-space: nowrap; }
.ledger-note { grid-column: 3 / -1; font-size: 11px; font-style: italic; opacity: .6; }
.portal-chat-gifts-btn { padding: 4px 9px; border-radius: 999px; cursor: pointer; font-size: 11px;
  background: rgba(244,188,87,.10); border: 1px solid rgba(244,188,87,.34); color: #f4bc57; }
/* Floating movement stick: born under the thumb, gone when it lifts.
   Pointer-events none throughout - it is a drawing of the control, never the
   control itself, which lives on the canvas listeners. */
.chamber-touch-stick {
  position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; pointer-events: none; z-index: 6;
  border: 1px solid rgba(159, 216, 255, .30);
  background: radial-gradient(circle, rgba(159,216,255,.10), rgba(159,216,255,.02) 70%, transparent 71%);
}
.chamber-touch-knob {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  border-radius: 50%; pointer-events: none;
  background: rgba(159, 216, 255, .30);
  border: 1px solid rgba(159, 216, 255, .55);
  box-shadow: 0 0 12px rgba(159, 216, 255, .35);
}
/* Shown once, on touch devices only: an invisible control with no instructions
   is the same as no control at all. */
.chamber-touch-hint {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  max-width: 82vw; padding: 8px 14px; border-radius: 999px; z-index: 7;
  background: rgba(6, 10, 18, .82); border: 1px solid rgba(159, 216, 255, .28);
  color: #cfe4f5; font-size: 12px; line-height: 1.5; text-align: center;
  pointer-events: none;
}
@media (hover: hover) { .chamber-touch-hint { display: none; } }
/* Astral Compass as fast travel: the movement system for anyone who would
   rather not walk - and, on a phone, for anyone who cannot. */
.compass-group-label { margin: 8px 4px 6px; font: 600 11px/1.4 ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: .75; }
.compass-waypoint { display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 14px 18px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(244,188,87,.22); color: inherit;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); min-height: 80px; box-sizing: border-box; }
.compass-waypoint:hover { background: rgba(244,188,87,.12); border-color: rgba(244,188,87,.6); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.compass-waypoint:hover .compass-waypoint-thumb { transform: scale(1.05); border-color: var(--gold); }
.compass-waypoint-icon { font-size: 32px; line-height: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; }
.compass-waypoint-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.compass-waypoint-text strong { font-size: 15px; font-weight: 600; color: #fcebc7; letter-spacing: 0.02em; }
.compass-waypoint-text small { font: 500 11.5px/1.4 ui-monospace, monospace; color: #a2b4c8; opacity: .85; }
.compass-waypoint.is-here { border-color: rgba(244,188,87,.7); background: rgba(244,188,87,.12); box-shadow: 0 0 16px rgba(244,188,87,.2); }
.compass-waypoint.is-here .compass-waypoint-text strong { color: #f4bc57; }
.compass-waypoint.is-here .compass-waypoint-text small { color: #f4bc57; opacity: .95; font-weight: 600; }

@media (max-width: 640px) {
  .compass-waypoints { grid-template-columns: 1fr; gap: 10px; }
  .compass-waypoint { padding: 10px 14px; gap: 12px; min-height: 64px; }
  .compass-waypoint-thumb { width: 56px; height: 56px; border-radius: 10px; }
  .compass-waypoint-icon { font-size: 26px; width: 56px; height: 56px; }
  .compass-waypoint-text strong { font-size: 14px; }
  .compass-waypoint-text small { font-size: 10.5px; }
}

/* Half a second of dark over a jump: without it the player cannot tell
   whether they moved or the room did. */
.chamber-travel-veil { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: #02040a; opacity: 0; transition: opacity .2s ease; }
.chamber-travel-veil.is-veiled { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .chamber-travel-veil { transition: none; } }
/* Said on the message it affects: a stale tome decodes to the wrong word
   rather than to an error, so nothing else would ever surface it. */
.bubble-stale-tome { margin-top: 5px; padding: 5px 8px; border-radius: 6px;
  background: rgba(255,140,90,.10); border: 1px solid rgba(255,140,90,.35);
  color: #ffb083; font-size: 10.5px; line-height: 1.5; }

/* ---- Phone hardening (item 46) --------------------------------------- */

/* Pull-to-refresh and rubber-banding fight a full-screen 3D room: a downward
   drag meant to look up would reload the page instead. */
html, body { overscroll-behavior: none; }

/* Hover states stick after a tap on touch, leaving buttons lit for no reason.
   Rather than guard 48 rules one by one, neutralise the residue where there
   is no hover to begin with - the states that matter on touch are :active
   and aria-pressed, which are unaffected. */
@media (hover: none) {
  .compass-waypoint:hover, .world-action:hover, .tome-chip:hover,
  button.tome-chip:hover, .admin-tab:hover, .portal-card:hover {
    background: inherit; border-color: inherit;
  }
}

/* The notch and the home indicator eat the edges once viewport-fit=cover is
   on, which it already is. Only the elements that actually touch an edge. */
.topbar { padding-left: max(12px, env(safe-area-inset-left));
          padding-right: max(12px, env(safe-area-inset-right));
          padding-top: max(6px, env(safe-area-inset-top)); }
@supports (padding: max(0px)) {
  .mana-hud { margin-left: max(0px, env(safe-area-inset-left)); }
  .compass-button { margin-right: max(0px, env(safe-area-inset-right)); }
}

/* Touch targets. 44px is Apple's floor and most of these chips were built for
   a mouse; only raised where a finger is the pointer, so the desktop layout
   keeps its density. */
@media (pointer: coarse) {
  .world-action, .portal-tool-btn, .portal-chat-gifts-btn,
  .admin-tab, .compass-waypoint, .lab-remove { min-height: 44px; }
  .dialog-close, .settings-close { min-width: 44px; min-height: 44px; }
}
/* The Market. Buy and Gift sit side by side on every card: things are bought
   here to be given away, so hiding the gift behind a second step would bury
   the larger half of the idea. */
.market-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 8px 0 14px; }
.market-empty { font-size: 11px; font-style: italic; opacity: .55; }
.market-card { padding: 10px 12px; border-radius: 9px; position: relative;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.market-card-head { display: flex; align-items: center; gap: 7px; }
.market-glyph { font-size: 17px; line-height: 1; }
.market-desc { margin: 5px 0 7px; font-size: 11px; line-height: 1.5; opacity: .78; }
.market-paired-note { margin: 0 0 7px; font: 700 10px ui-monospace, monospace; color: #f0a8e0; }
.market-prices { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.market-price { padding: 2px 7px; border-radius: 999px; font: 500 10px/1.5 ui-monospace, monospace;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.market-price.is-solar { color: #ffd98a; border-color: rgba(255,217,138,.32); }
.market-price.is-lunar { color: #9fd8ff; border-color: rgba(159,216,255,.32); }
.market-price.is-pr3d  { color: #f4bc57; border-color: rgba(244,188,87,.32); }
.market-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.market-buy { padding: 4px 8px; border-radius: 7px; cursor: pointer; font-size: 10.5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: inherit; }
.market-buy:hover:not(:disabled) { background: rgba(255,255,255,.13); }
.market-buy:disabled { opacity: .4; cursor: not-allowed; }
.market-buy.is-gift { border-style: dashed; }
.market-buy.is-combined {
  font-weight: 700;
  background: linear-gradient(90deg, rgba(255,217,138,.16), rgba(159,216,255,.16));
  border-color: rgba(244,188,87,.4);
}
.market-buy.is-combined:hover:not(:disabled) { background: linear-gradient(90deg, rgba(255,217,138,.26), rgba(159,216,255,.26)); }
.market-stock { position: absolute; top: 8px; right: 10px; font: 500 9px/1 ui-monospace, monospace; opacity: .55; }

.market-owned { display: grid; gap: 5px; }
.market-owned-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: 8px;
  background: rgba(244,188,87,.05); border: 1px solid rgba(244,188,87,.20); }
.market-owned-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.market-owned-from, .market-owned-pending { font: 500 10px/1.4 ui-monospace, monospace; opacity: .6; }
.market-owned-pending { color: #ffb083; opacity: .85; }
.market-owned-link { font-size: 11px; color: #9fd8ff; overflow-wrap: anywhere; }
.market-owned-message { font-size: 11px; font-style: italic; opacity: .82; }
.market-pass { align-self: center; padding: 4px 9px; border-radius: 999px; cursor: pointer; font-size: 10.5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: inherit; }

/* ── The mirror channel is its own page ──────────────────────────────────────
   Opening a conversation no longer drops a small card over a greyed-out
   chamber. The chamber goes away and the page becomes the mirror you are
   speaking through: a 2D portal glowing behind the conversation, which takes
   the whole width to the right of the Mana Pool and Karma Balance. The avatar
   badge and the spell button belong to the chamber and are hidden here. */
body.portal-chat-frozen #chamber-3d-mount,
body.portal-chat-frozen .scene {
  opacity: 0;
  filter: none;
}
body.portal-chat-frozen #world::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  /* Painted 2D portal (generated by design/art/portal_chat_backdrop.py). The
     portal sits at 55% across, which is under the conversation column. */
  background: #03060b url('/assets/portal-chat-backdrop.webp?v=1') 55% 45% / cover no-repeat;
  animation: mirror-portal-breathe 7s ease-in-out infinite;
}
@keyframes mirror-portal-breathe {
  50% { filter: brightness(1.18) saturate(1.15); }
}
body.portal-chat-frozen .player-avatar,
body.portal-chat-frozen .spell-selector { display: none !important; }
/* The compass stays reachable from a conversation, low in the left column
   under the Mana Pool and Karma Balance. */
body.portal-chat-frozen .compass-button {
  z-index: 31;
  top: auto;
  right: auto;
  left: clamp(18px, 3vw, 50px);
  bottom: 22px;
}
body.portal-chat-frozen .mana-hud,
body.portal-chat-frozen .karma-hud { z-index: 31; }

body.portal-chat-frozen .portal-cast-panel {
  left: calc(clamp(18px, 3vw, 50px) + min(300px, 40vw) + 24px);
  right: clamp(14px, 2vw, 32px);
  top: 70px;
  bottom: 16px;
  transform: none;
  width: auto;
  max-height: none;
  background: linear-gradient(145deg, rgba(10, 16, 26, .72), rgba(3, 7, 14, .80));
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 90px #0009, inset 0 1px #fff1;
}
body.portal-chat-frozen .portal-cast-log {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: none;
  background: rgba(0, 0, 0, .22);
}
@media (max-width: 900px) {
  body.portal-chat-frozen .portal-cast-panel { left: 8px; right: 8px; top: 60px; bottom: 8px; }
  body.portal-chat-frozen .mana-hud,
  body.portal-chat-frozen .karma-hud { display: none; }
}

/* Glyphs in messages are the glyphs, drawn large enough to read. */
.bubble-glyph-run {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.bubble-glyph {
  /* 64px, not less: every glyph shares the same frame and differs only by the
     small rune inside it, which is unreadable below this size. */
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(244, 188, 87, .45));
}
.bubble-glyph.is-evil { filter: drop-shadow(0 0 6px rgba(224, 99, 99, .5)); }
.portal-glyph-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px dashed rgba(214, 183, 114, .35);
  border-radius: 6px;
  background: rgba(0, 0, 0, .3);
}
.portal-glyph-queue[hidden] { display: none; }
.glyph-queue-item {
  padding: 3px;
  border: 1px solid rgba(214, 183, 114, .25);
  border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  line-height: 0;
}
.glyph-queue-item:hover { border-color: #e06363; }
.glyph-queue-item .bubble-glyph { width: 46px; height: 46px; }
.glyph-chip { height: auto; min-height: 60px; }
.glyph-chip img { width: 38px; height: 38px; }

/* Spending Mana shows: the bar shrinks and the amount flashes off the pool. */
#mana-fill { transition: width .6s ease; }
.mana-hud { position: absolute; }
.mana-hud.is-spending::after {
  content: attr(data-spent);
  position: absolute;
  right: 16px;
  top: 12px;
  color: #ffb4b4;
  font: 700 15px ui-monospace, monospace;
  text-shadow: 0 0 10px rgba(255, 90, 90, .7);
  pointer-events: none;
  animation: mana-spent-float 1.4s ease-out forwards;
}
@keyframes mana-spent-float {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-18px); }
}

/* ── The World button and Karma Balance belong to specific rooms ─────────────
   The World lives only in Portals and Bonds, at the top of the Mana Pool
   column. Karma Balance is about your chamber and your conversations, so it
   has no place in Portals and Bonds or in the Laboratory. */
.portal-world-btn-mana { display: none !important; }
body[data-scene="portals"]:not(.portal-chat-frozen) .portal-world-btn-mana {
  display: flex !important;
  order: -1;
  margin: 0 0 6px !important;
}
body[data-scene="portals"] .karma-hud,
body[data-scene="laboratory"] .karma-hud { display: none !important; }

/* Change spell, inside the conversation. */
.portal-cast-spell-change { margin-top: 6px; }

/* Tomes drawer */
.portal-tome-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.portal-tome-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid rgba(214, 183, 114, .22); border-radius: 6px;
  background: rgba(255, 255, 255, .03);
}
.portal-tome-row strong { display: block; color: #f7e2b6; font-size: 13px; }
.portal-tome-row small { color: var(--muted); font-size: 11px; text-transform: capitalize; }

/* Image trace: an icon beside the message, like attaching a photo. */
.portal-trace-open {
  flex: 0 0 auto; width: 44px; align-self: stretch;
  display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 6px;
  color: var(--gold); cursor: pointer;
}
.portal-trace-open:hover { border-color: var(--gold); background: rgba(244, 188, 87, .1); }
.portal-trace-open svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.trace-dialog { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.trace-dialog > .dialog-close { align-self: flex-end; }
.trace-dialog > h2, .trace-dialog .portal-cast-image-preview, .trace-dialog .trace-history { align-self: stretch; }
.trace-dialog:not([open]) { display: none; }
.trace-dialog pre { max-width: 100%; overflow: auto; max-height: 280px; margin: 12px 0; font: 8px/1 monospace; color: #e4dccd; }
.trace-history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.trace-history-item {
  height: 110px; overflow: hidden; padding: 4px; cursor: pointer;
  background: rgba(0, 0, 0, .4); border: 1px solid var(--line); border-radius: 4px;
}
.trace-history-item:hover { border-color: var(--gold); }
.trace-history-item pre { margin: 0; font: 3px/1 monospace; color: #e4dccd; pointer-events: none; }
.trace-history[hidden] { display: none; }

/* Glyphs: bigger still, now that the rune inside is drawn to be read. */
.bubble-glyph { width: 72px; height: 72px; }

/* ── One compact toolbar: spell and tools on a single line ───────────────── */
.portal-cast-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--line);
}
.portal-cast-spell-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.portal-cast-spell-group strong { color: #f7e2b6; font-size: 13px; white-space: nowrap; text-transform: capitalize; }
.portal-cast-spell-group .portal-cast-label { margin: 0; }
.portal-cast-spell-btn { border-color: rgba(244, 188, 87, .55) !important; color: var(--gold) !important; }
.portal-cast-spell-btn { display: inline-flex !important; align-items: center; gap: 6px; }
.portal-cast-spell-btn .key-hint { opacity: .7; }
.portal-cast-spell-change { margin-top: 0; }
.bubble-spell { display: flex; flex-direction: column; gap: 4px; }

/* Gift Mana and Send a tome as their own windows */
.chat-side-dialog { width: min(520px, calc(100vw - 32px)); padding: 26px; }
.chat-side-dialog:not([open]) { display: none; }
.chat-side-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.chat-side-dialog > .dialog-close { align-self: flex-end; }
.chat-side-dialog .mana-drawer-row { flex-wrap: wrap; }

/* ── Karma Balance hangs from the Mana Pool, same glass ──────────────────── */
.mana-hud { background: linear-gradient(90deg, rgba(3,5,10,.80), rgba(3,5,10,.45)); }
.mana-hud .karma-hud {
  position: static; width: auto; margin: 6px -16px -14px -18px; padding: 8px 16px;
  background: transparent; border: 0; border-top: 1px solid rgba(244, 188, 87, .22);
  border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.mana-hud .karma-hud:hover { transform: none; background: rgba(244, 188, 87, .05); }

/* ── The World: on its own, halfway up the Portals and Bonds nave ────────── */

/* ── Conversation layout: me and the channel on the left, content on the right ─
   The panel itself becomes an invisible frame across the page. Its left
   column holds who you are talking to, the tomes and the topics, with the
   Mana Pool and Karma Balance at the bottom of that same column; the right
   column is the conversation box. */
body.portal-chat-frozen .portal-cast-panel {
  left: clamp(18px, 3vw, 50px);
  right: clamp(14px, 2vw, 32px);
  top: 70px;
  bottom: 16px;
  display: grid;
  grid-template-columns: min(300px, 32vw) minmax(0, 1fr);
  gap: 24px;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.portal-cast-side, .portal-cast-main { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
body.portal-chat-frozen .portal-cast-side {
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 250px;          /* room for the Mana Pool below */
  background: linear-gradient(180deg, rgba(3, 5, 10, .80), rgba(3, 5, 10, .35));
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
body.portal-chat-frozen .portal-cast-main {
  padding: clamp(16px, 2vw, 24px);
  background: linear-gradient(145deg, rgba(10, 16, 26, .72), rgba(3, 7, 14, .80));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(205, 179, 123, .48);
  border-radius: 10px;
  box-shadow: 0 24px 90px #0009, inset 0 1px #fff1;
}
body.portal-chat-frozen .portal-cast-side .portal-cast-header { flex-direction: column; align-items: stretch; }
body.portal-chat-frozen .portal-cast-side .portal-cast-header-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body.portal-chat-frozen .portal-cast-side .portal-tomes-bar { display: flex; flex-direction: column; gap: 10px; }


/* An empty conversation stays open: the log keeps its space. */
body.portal-chat-frozen .portal-cast-empty { flex: 0 0 auto; }
body.portal-chat-frozen .portal-cast-log { flex: 1 1 auto; }
body.portal-chat-frozen .portal-cast-log:empty { display: flex; }

/* Mana Pool and Karma Balance: bottom of the left column, 20% smaller. */
body.portal-chat-frozen .mana-hud .karma-hud { margin-bottom: 0; }
body.portal-chat-frozen .mana-hud {
  top: auto;
  bottom: 22px;
  width: calc(min(300px, 32vw) / .8);
  transform: scale(.8);
  transform-origin: bottom left;
}

/* ── The astral compass lives in the top-right corner, after Settings ────── */
.compass-button,
body.portal-chat-frozen .compass-button {
  position: fixed;
  z-index: 60;
  top: 14px;
  right: 10px;
  left: auto;
  bottom: auto;
  width: 40px;
  height: 40px;
  padding: 6px;
}
.topbar { padding-right: calc(clamp(18px, 4vw, 64px) + 190px); }

/* Spell picker */
.portal-cast-selection-glyphs { display: inline-flex; gap: 2px; }
.portal-cast-selection-glyphs .bubble-glyph { width: 26px; height: 26px; filter: none; }
.chat-spell-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.chat-spell-note { margin: 0; font-size: 12px; }
.chat-spell-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; text-align: left; cursor: pointer; color: inherit;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(214, 183, 114, .22); border-radius: 6px;
}
.chat-spell-row:hover, .chat-spell-row.is-selected { border-color: var(--gold); background: rgba(244, 188, 87, .08); }
.chat-spell-label strong { display: block; color: #f7e2b6; }
.chat-spell-label small { color: var(--muted); text-transform: capitalize; }
.chat-spell-row .bubble-glyph { width: 40px; height: 40px; }



/* Sidebar header: avatar opens the companion's actions; Exit is a plain row. */
.portal-peer-avatar-wrap[role="button"] { cursor: pointer; border-radius: 50%; }
.portal-peer-avatar-wrap[role="button"]:hover { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(244, 188, 87, .5); }
.portal-cast-exit {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 12px; font: 600 11px ui-monospace, monospace; letter-spacing: .06em;
  color: var(--muted); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
}
.portal-cast-exit:hover { color: var(--text); border-color: var(--gold); }
.peer-actions-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.peer-actions-list button { padding: 10px; }

/* Topics: one per row, in order. */
body.portal-chat-frozen .portal-topics-bar {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 6px; overflow: visible; flex-wrap: nowrap;
}
body.portal-chat-frozen .portal-topics-list { display: flex; flex-direction: column; gap: 2px; }
body.portal-chat-frozen .portal-topic-tab { width: 100%; text-align: left; justify-content: flex-start; }
body.portal-chat-frozen .portal-new-topic-btn { align-self: flex-start; }

/* Pinned message at the top of the conversation */
.portal-cast-main .portal-topic-pinned { flex: 0 0 auto; }
.portal-topic-pinned .bubble-glyph { width: 34px; height: 34px; }
#pinned-dialog input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 8px;
  color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 4px; }
#pinned-dialog .portal-pinned-editor, #topic-dialog .portal-topic-creator { display: flex; flex-wrap: wrap; gap: 8px; }
#topic-dialog input { flex: 1 1 100%; box-sizing: border-box; }

/* Pin on any message */
.chat-bubble { position: relative; }
.bubble-pin {
  position: absolute; top: 6px; right: 8px; padding: 2px 5px; font-size: 12px; line-height: 1;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.chat-bubble:hover .bubble-pin, .bubble-pin:focus-visible { opacity: 1; }

/* Tomes: which of yours are in use, and theirs, clearly. */
body.portal-chat-frozen .tome-chip-row { display: flex; flex-direction: column; gap: 6px; }
.tome-chip { position: relative; }
button.tome-chip { text-align: left; cursor: pointer; opacity: .6; }
button.tome-chip.is-in-use { opacity: 1; border-color: var(--tome-tint, var(--gold)); box-shadow: 0 0 0 1px var(--tome-tint, var(--gold)), 0 0 14px rgba(244, 188, 87, .25); }
.tome-chip-state { display: block; margin-top: 2px; font: 600 10px ui-monospace, monospace; letter-spacing: .06em; color: var(--muted); }
.tome-chip.is-in-use .tome-chip-state { color: #5de897; }

/* Exit and tome chips: override the older, larger rules for these ids. */
#portal-cast-close.portal-cast-exit { font-size: 11px; width: auto; padding: 6px 12px; }
body.portal-chat-frozen button.tome-chip { opacity: .75; padding: 8px 10px; font-size: 12px; border-style: solid; }
body.portal-chat-frozen button.tome-chip.is-in-use { opacity: 1; }
body.portal-chat-frozen .tome-chip strong { font-size: 13px; }

/* ── Astral Compass: named, and drawn as an instrument ───────────────────── */
.compass-button,
body.portal-chat-frozen .compass-button {
  position: fixed; z-index: 60; top: 12px; right: 12px; left: auto; bottom: auto;
  width: auto; height: 44px; padding: 3px 14px 3px 3px;
  display: inline-flex; align-items: center; gap: 8px;
  color: #f7e2b6; background: linear-gradient(90deg, rgba(7, 11, 20, .92), rgba(7, 11, 20, .75));
  border: 1px solid rgba(244, 188, 87, .45); border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.compass-button:hover, .compass-button[aria-expanded="true"] {
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .7), 0 0 18px rgba(127, 227, 255, .25);
}
.compass-rose { display: block; width: 38px; height: 38px; flex: 0 0 38px; }
.compass-rose svg { width: 100%; height: 100%; display: block; }
.compass-star { transform-origin: 32px 32px; animation: compass-drift 9s ease-in-out infinite; }
.compass-button:hover .compass-star { animation-duration: 1.6s; }
@keyframes compass-drift { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .compass-star { animation: none; } }
.compass-label { font: 700 11px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) {
  .compass-button { padding-right: 3px; }
  .compass-label { display: none; }
  .topbar { padding-right: calc(clamp(18px, 4vw, 64px) + 50px); }
}

/* ── Compass menu: bigger cards, Nera round ───────────────────────────────── */
.compass-waypoints { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 18px; }
.compass-waypoint { min-height: 116px; padding: 18px 22px; gap: 20px; }
.compass-waypoint-thumb { width: 92px; height: 92px; }
.compass-waypoint-icon { width: 92px; height: 92px; font-size: 42px; }
.compass-waypoint-text strong { font-size: 18px; }
.compass-waypoint-text small { font-size: 12.5px; }
.compass-waypoint-thumb.is-round {
  border-radius: 50%; object-position: center 18%;
  border: 2px solid rgba(87, 221, 255, .6);
  box-shadow: 0 0 0 4px rgba(4, 3, 2, .72), 0 0 18px rgba(87, 221, 255, .4);
}
.compass-waypoint.is-nera:hover .compass-waypoint-thumb.is-round { border-color: rgba(87, 221, 255, .95); box-shadow: 0 0 0 3px rgba(4, 3, 2, .9), 0 0 26px rgba(87, 221, 255, .7); }
@media (max-width: 640px) {
  .compass-waypoints { grid-template-columns: 1fr; }
  .compass-waypoint { min-height: 84px; padding: 12px 14px; gap: 14px; }
  .compass-waypoint-thumb, .compass-waypoint-icon { width: 64px; height: 64px; }
  .compass-waypoint-text strong { font-size: 15px; }
}

/* ── Portals and Bonds: one right-hand column, the rest for portals ─────────
   Right column, top to bottom: the World noticeboard, the World button right
   under it, the Mana Pool right under that. Everything else -- contacts,
   new portal and requests, bonded portals -- takes the full remaining width.
   --portal-mana-h is measured by mirrorworld.js, so the stack stays attached
   whatever the Mana Pool's real height is. */
@media (min-width: 901px) {
  body[data-scene="portals"] {
    --portal-side-w: 320px;
    --portal-side-gap: 10px;
    --portal-edge: clamp(12px, 1.6vw, 24px);
  }
  /* will-change: transform on the scene would make it the reference box for
     the fixed right column, pulling the noticeboard 7px out of line. */
  body[data-scene="portals"] #scene-portals { will-change: auto; }
  body[data-scene="portals"] .portal-controls,
  body[data-scene="portals"] .portal-naves {
    width: auto;
    margin-left: var(--portal-edge);
    margin-right: calc(var(--portal-side-w) + var(--portal-edge) * 2);
  }
  body[data-scene="portals"] .portal-naves {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    height: calc(100vh - 150px);
    max-height: none;
  }
  body[data-scene="portals"] .portal-nave-world {
    position: fixed;
    z-index: 12;
    right: var(--portal-edge);
    top: 70px;
    width: var(--portal-side-w);
    height: auto;
    bottom: calc(var(--portal-edge) + var(--portal-mana-h, 160px) + var(--portal-side-gap) * 2 + 2px);
    box-sizing: border-box;
  }
  body[data-scene="portals"]:not(.portal-chat-frozen) .portal-world-btn-mana {
    position: fixed !important;
    z-index: 13;
    right: var(--portal-edge);
    left: auto;
    top: auto;
    bottom: calc(var(--portal-edge) + var(--portal-mana-h, 160px) + var(--portal-side-gap));
    width: var(--portal-side-w) !important;
    height: 44px !important;
    margin: 0 !important;
    transform: none;
    box-sizing: border-box;
  }
  body[data-scene="portals"] .mana-hud {
    right: var(--portal-edge);
    bottom: var(--portal-edge);
    width: var(--portal-side-w);
    box-sizing: border-box;
  }
}

/* Noticeboard cards: like, dislike, highlight on the card */
.portal-world-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nb-action {
  padding: 4px 8px; font: 600 11px ui-monospace, monospace; cursor: pointer;
  color: #e6ded1; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(214, 183, 114, .3); border-radius: 4px;
}
.nb-action:hover { border-color: var(--gold); background: rgba(244, 188, 87, .12); }
.nb-action.nb-highlight { color: #bfe2ff; border-color: rgba(127, 227, 255, .35); }
.nb-action.nb-highlight:hover { border-color: #7fe3ff; background: rgba(127, 227, 255, .12); }
.nb-voted { font: 600 11px ui-monospace, monospace; color: var(--muted); padding: 4px 0; }

/* ── WORLD, full screen ──────────────────────────────────────────────────── */
.world-fullscreen {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; color: var(--text);
  background: #03060c url('/assets/world-skies-backdrop.webp') center / cover no-repeat;
}
.world-fullscreen::backdrop { background: #000c; }
.world-fullscreen[open] { display: flex; flex-direction: column; }
.world-fullscreen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 6, 12, .72), rgba(3, 6, 12, .9));
}
.world-top, .world-layout { position: relative; }
.world-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 2.4vw, 36px); border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(3, 6, 12, .6); backdrop-filter: blur(10px);
}
.world-top-title { display: flex; align-items: center; gap: 14px; }
.world-top-title .world-taiji { width: 40px; height: 40px; }
.world-top-title .eyebrow { margin: 0; }
.world-top-title h2 { margin: 0; font: 700 28px Georgia, serif; letter-spacing: .18em; }
.world-top-actions { display: flex; align-items: center; gap: 10px; }
.world-board-link {
  padding: 10px 16px; border-radius: 6px; text-decoration: none; font: 700 12px ui-monospace, monospace; letter-spacing: .08em;
  color: #101014; background: linear-gradient(135deg, #f4f4f4 0 49%, #cfd3da 51% 100%); border: 1px solid #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, .25);
}
.world-board-link:hover { box-shadow: 0 0 26px rgba(255, 255, 255, .5); }
.world-fullscreen .world-close { float: none; }

.world-layout {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px; padding: 18px clamp(16px, 2.4vw, 36px);
}
.world-side { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.world-panel {
  padding: 14px 16px; border-radius: 10px;
  background: rgba(6, 12, 24, .78); border: 1px solid rgba(156, 181, 211, .22); backdrop-filter: blur(10px);
}
.world-panel h3 { margin: 0 0 10px; font: 700 12px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
/* Shared Mana Pool treatment inside the World management panel. */
.world-mana-panel { padding: 14px 16px !important; border-left: 2px solid var(--gold) !important; background: linear-gradient(90deg, rgba(3,5,10,.88), rgba(3,5,10,.52)) !important; }
.world-mana-panel .mana-hud-header { display: flex; justify-content: space-between; align-items: baseline; }
.world-mana-panel .mana-label { color: var(--gold); font: 700 11px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
#world-circle-label { color: var(--text); font-family: Georgia, serif; font-size: 13px; }
.world-mana-balance { display: block; margin: 5px 0 8px; color: var(--gold); font: 700 17px ui-monospace, monospace; }
.world-mana-token-row { display: flex; gap: 7px; padding: 5px 0; border-top: 1px solid rgba(156, 181, 211, .16); color: #d5dcea; font: 600 11px ui-monospace, monospace; }
.world-mana-token-row strong { margin-left: auto; color: #75ddff; }
.world-mana-token-row.is-solar strong { color: #ffe6a0; }
.world-mana-track { display: block; height: 2px; margin: 7px 0; background: rgba(255, 255, 255, .12); border-radius: 1px; }
#world-mana-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f4bc57, #75ddff); box-shadow: 0 0 8px rgba(117, 221, 255, .45); }
.world-mana-countdown { color: #aab8c9; font: 600 10px ui-monospace, monospace; }
.world-rules { width: 100%; border-collapse: collapse; font-size: 12px; }
.world-rules th { text-align: left; font: 600 10px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.world-rules td { padding: 7px 6px; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .06); line-height: 1.4; }
.world-rules td:first-child { color: #fcebc7; font-weight: 600; white-space: nowrap; }
.world-rules td.cost { font: 700 12px ui-monospace, monospace; color: var(--gold); white-space: nowrap; }
.world-rules-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.world-fullscreen .world-submit-form { display: flex; flex-direction: column; gap: 6px; }
.world-fullscreen .world-submit-form input { padding: 8px; }

.world-main { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.world-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(6, 12, 24, .78); border: 1px solid rgba(156, 181, 211, .22);
}
#world-filter-query { flex: 1 1 220px; padding: 8px 10px; color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 6px; }
.world-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.world-chip { padding: 6px 10px; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.world-chip.is-active, .world-chip:hover { color: #101014; background: #f4f4f4; border-color: #fff; }
.world-sort, .world-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.world-sort select { padding: 6px; color: var(--text); background: #0b1220; border: 1px solid var(--line); border-radius: 6px; }
.world-count { margin-left: auto; font: 600 11px ui-monospace, monospace; color: var(--muted); }
.world-card-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-content: start; padding: 2px 4px 20px 2px; }

/* Shared WORLD card (world-card.js) */
.world-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 10px;
  background: rgba(6, 12, 24, .82); border: 1px solid rgba(156, 181, 211, .22); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.world-card:hover { transform: translateY(-2px); border-color: rgba(244, 188, 87, .6); box-shadow: 0 12px 30px rgba(0, 0, 0, .7), 0 0 18px rgba(244, 188, 87, .18); }
.world-card.is-highlighted { border-color: rgba(244, 188, 87, .7); background: linear-gradient(135deg, rgba(244, 188, 87, .12), rgba(6, 12, 24, .9)); }
.world-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.world-card-badge { font: 600 10.5px system-ui, sans-serif; padding: 3px 8px; border-radius: 4px; background: rgba(87, 221, 255, .12); border: 1px solid rgba(87, 221, 255, .35); color: #79dbff; }
.world-card-badge.badge-social { background: rgba(86, 145, 255, .14); border-color: rgba(86, 145, 255, .4); color: #8ec3ff; }
.world-card-badge.badge-code { background: rgba(188, 120, 255, .14); border-color: rgba(188, 120, 255, .4); color: #d69eff; }
.world-card-badge.badge-media { background: rgba(255, 107, 107, .14); border-color: rgba(255, 107, 107, .4); color: #ffa3a3; }
.world-card-badge.badge-community { background: rgba(88, 101, 242, .15); border-color: rgba(88, 101, 242, .45); color: #9bb4ff; }
.world-card-rank { font: 700 12px ui-monospace, monospace; color: var(--gold); }
.world-card-title { color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1.35; text-decoration: none; }
.world-card-title:hover { text-decoration: underline; color: #8de4ff; }
.world-card-host { font-size: 12px; color: #8de4ff; }
.world-card-author { font-size: 11px; color: #8292a4; }
.world-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.world-card-stat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; background: rgba(255, 255, 255, .05); font: 600 11.5px ui-monospace, monospace; color: #d1d9e2; }
.world-card-stat b { font-weight: 400; }
.world-card-stat i { font-style: normal; }
.world-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.world-card-actions .world-action { padding: 6px 10px; font: 600 11.5px ui-monospace, monospace; border-radius: 5px; cursor: pointer; color: #e6ded1; background: rgba(255, 255, 255, .05); border: 1px solid rgba(214, 183, 114, .3); }
.world-card-actions .world-action:hover { border-color: var(--gold); background: rgba(244, 188, 87, .12); }
.world-card-actions .world-highlight { color: #bfe2ff; border-color: rgba(127, 227, 255, .35); }
.world-card-actions .world-withdraw { color: #ffb4b4; border-color: rgba(255, 120, 120, .35); }

@media (max-width: 900px) {
  .world-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .world-side { overflow: visible; }
  .world-card-grid { overflow: visible; }
}

/* WORLD card: karma apart, stardust aura, and tooltips that say what each is */
.world-card-stat { position: relative; cursor: help; }
.world-card-stat.is-good { color: #9ff0bf; background: rgba(93, 232, 151, .1); }
.world-card-stat.is-bad { color: #ffb0b0; background: rgba(255, 99, 109, .12); }
.world-card-stat.is-aura { color: #fff3c4; background: linear-gradient(90deg, rgba(244, 188, 87, .22), rgba(170, 120, 255, .22)); }
.world-card-stat[data-tip]:hover::after,
.world-card-stat[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 6px 9px; border-radius: 5px;
  font: 500 11.5px/1.35 system-ui, sans-serif; color: #f7e2b6; white-space: pre-line; text-align: left;
  background: rgba(3, 5, 10, .96); border: 1px solid rgba(244, 188, 87, .45); box-shadow: 0 6px 18px #000a;
  pointer-events: none;
}
.world-card-stat.is-stats[data-tip]:hover::after,
.world-card-stat.is-stats[data-tip]:focus-visible::after {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  min-width: 175px;
  max-width: none;
  padding: 8px 12px;
  border-color: rgba(244, 188, 87, .6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .8), 0 0 12px rgba(244, 188, 87, .15);
}
.world-card.has-aura::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 88%, #d9c2ff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 40%, #fff9 50%, transparent 51%);
  box-shadow: 0 0 22px rgba(244, 188, 87, .28), inset 0 0 18px rgba(170, 120, 255, .12);
  animation: world-aura 4s ease-in-out infinite;
}
@keyframes world-aura { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .world-card.has-aura::after { animation: none; } }

/* Energy Ray leads the card; stats is an icon whose numbers live in its tooltip */
.world-card-stat.is-energy { color: #fff3c4; background: linear-gradient(90deg, rgba(127, 227, 255, .22), rgba(244, 188, 87, .22)); border: 1px solid rgba(244, 188, 87, .4); }
.world-card-stat.is-energy i { font-size: 13px; }
.world-card-stat.is-stats i:empty { display: none; }

/* Stat chips: one height, icon and number centred, so the icon-only stats
   chip lines up with the others instead of sitting lower and narrower. */
.world-card-stats { align-items: center; }
.world-card-stat { box-sizing: border-box; height: 26px; min-width: 30px; justify-content: center; line-height: 1; vertical-align: middle; }
.world-card-stat b { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 13px; line-height: 1; }
.world-card-stat.is-stats { padding: 3px 6px; }

/* Glyph library, full screen over the game */
.glyph-library-overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #090c11; }
.glyph-library-overlay::backdrop { background: #000; }
.glyph-library-overlay iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Shared WORLD filter bar (world-filters.js): hall and board look the same */
.world-fullscreen .world-filters { gap: 6px 8px; }
.world-fullscreen .bf-search { flex: 1 1 200px; min-width: 150px; padding: 7px 10px; font-size: 13px; color: #e8edf5; background: rgba(0, 0, 0, .4); border: 1px solid rgba(156, 181, 211, .3); border-radius: 6px; }
.world-fullscreen .bf-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(156, 181, 211, .18); }
.world-fullscreen .bf-btn { padding: 5px 9px; font: 600 11.5px ui-monospace, monospace; color: #9fb0c4; background: transparent; border: 0; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.world-fullscreen .bf-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.world-fullscreen .bf-btn.is-active { color: #101014; background: #f4f4f4; }
.world-fullscreen .bf-toggle[data-toggle="loved"].is-active { color: #eafff2; background: linear-gradient(90deg, rgba(93, 232, 151, .35), rgba(244, 188, 87, .3)); }
.world-fullscreen .bf-toggle.is-active { color: #fff3c4; background: linear-gradient(90deg, rgba(244, 188, 87, .35), rgba(170, 120, 255, .35)); }
.world-fullscreen .bf-select { padding: 5px 8px; font: 600 11.5px ui-monospace, monospace; color: #e8edf5; background: #0b1220; border: 1px solid rgba(156, 181, 211, .3); border-radius: 6px; }
.world-fullscreen .bf-count { margin-left: auto; font: 600 11px ui-monospace, monospace; color: #8292a4; white-space: nowrap; }
.world-fullscreen .bf-reset { padding: 5px 9px; font: 600 11px ui-monospace, monospace; color: #ffb4b4; background: transparent; border: 1px solid rgba(255, 120, 120, .35); border-radius: 5px; cursor: pointer; }
.world-fullscreen .bf-reset[hidden] { display: none; }

/* Offer a link first and loud; the rules fold away */
.world-fullscreen .world-submit-form { border-color: rgba(244, 188, 87, .7); background: linear-gradient(160deg, rgba(244, 188, 87, .16), rgba(6, 12, 24, .88)); box-shadow: 0 0 26px rgba(244, 188, 87, .18); }
.world-fullscreen .world-submit-form h3 { font-size: 15px; letter-spacing: .1em; }
.world-fullscreen .world-submit-form input { font-size: 14px; padding: 10px; }
.world-fullscreen .world-submit-form .primary-button { padding: 12px; font-size: 14px; }
.world-rules-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 12px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.world-rules-panel > summary::-webkit-details-marker { display: none; }
.world-rules-panel > summary::after { content: 'Show ▾'; font-size: 11px; letter-spacing: .06em; padding: 4px 8px; border: 1px solid rgba(244, 188, 87, .4); border-radius: 4px; }
.world-rules-panel[open] > summary::after { content: 'Hide ▴'; }
.world-rules-panel[open] > summary { margin-bottom: 10px; }

.compass-waypoint-world .compass-waypoint-icon { width: 92px; height: 92px; border-radius: 12px; font-size: 48px;
  background: linear-gradient(135deg, #f4f4f4 0 49%, #101014 51% 100%); border: 1.5px solid rgba(255, 255, 255, .6); }

/* Left column reorganization: filters + contact boxes */
.portal-nave-left-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
.portal-controls-left {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  width: 100% !important;
  gap: 8px !important;
  padding: 8px !important;
  flex: 0 0 auto;
}
.portal-nave-bonded {
  min-height: 0;
}

/* The grey box: used for the VIP Board and "Without a bond" boxes stacked
   in the left column, and standalone for the "Bonded" box that has its own
   nave. flex:1 alone fills whatever space is left, whether it's the only
   box (bonded-column, a grid child stretched by align-items:stretch) or
   one of several stacked in a flex column -- no fixed height needed. */
.portal-nave-contacts-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  background: rgba(16, 20, 30, 0.5);
  border: 1px solid rgba(156, 181, 211, 0.22);
  border-radius: 6px;
  padding: 10px;
}
/* VIP Board sits above Without a bond in the left column. Without a bond is
   the least time-critical list here, so it gets a third of the space and
   VIP Board gets the rest. */
.portal-vip-board-box {
  flex: 2 1 0;
}
.portal-nave-left-column > .portal-nave-contacts-box:not(.portal-vip-board-box) {
  flex: 1 1 0;
}
.portal-nave-contacts-box .portal-nave {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
}
.portal-nave-contacts-box .portal-nave-list {
  flex: 1 1 auto;
  max-height: none;
}

/* Themed scrollbar for the nave lists: a thin bar that matches the dark
   glass background instead of the browser's default chrome. */
.portal-nave-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 181, 211, 0.45) rgba(6, 10, 18, 0.4);
}
.portal-nave-list::-webkit-scrollbar {
  width: 7px;
}
.portal-nave-list::-webkit-scrollbar-track {
  background: rgba(6, 10, 18, 0.4);
  border-radius: 4px;
}
.portal-nave-list::-webkit-scrollbar-thumb {
  background: rgba(156, 181, 211, 0.45);
  border-radius: 4px;
}
.portal-nave-list::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 188, 87, 0.55);
}

/* VIP Board rows, in Portals & Bonds' left column. */
.portal-vip-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(244, 188, 87, 0.35);
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(244, 188, 87, 0.1), rgba(2, 3, 7, 0.9));
  cursor: pointer;
  transition: all 0.15s ease;
}
.portal-vip-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(244, 188, 87, 0.25);
}
.portal-vip-card-name {
  font: 700 12px ui-monospace, monospace;
  color: var(--gold);
}
.portal-vip-card-address {
  font: 10px ui-monospace, monospace;
  color: var(--faint);
}
.portal-vip-card-bio {
  font: 11px/1.35 ui-monospace, monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portal-vip-card-link {
  font: 700 10px ui-monospace, monospace;
  color: #7fe3ff;
  text-decoration: none;
}
.portal-vip-card-link:hover { text-decoration: underline; }

/* Settings tab: Public Profile / VIP */
.vip-status-box {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 188, 87, 0.3);
  border-radius: 8px;
  background: rgba(16, 20, 30, 0.5);
}
.vip-status-line {
  margin: 0 0 10px;
  font: 700 13px ui-monospace, monospace;
  color: var(--text);
}
.vip-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font: 12px ui-monospace, monospace;
  color: var(--faint);
  cursor: pointer;
}
.vip-toggle-row input { cursor: pointer; }

/* Third nave: New portal (always open now) + the two request boxes below
   it, stacked and sharing the remaining height evenly. */
.portal-nave-center {
  height: 100%;
}
.portal-nave-center .portal-add-form {
  flex: 0 0 auto;
}
.portal-request-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-height: 0;
  background: rgba(16, 20, 30, 0.5);
  border: 1px solid rgba(156, 181, 211, 0.22);
  border-radius: 6px;
  padding: 10px;
}
.portal-request-box .eyebrow {
  margin: 0;
}
.portal-request-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 181, 211, 0.45) rgba(6, 10, 18, 0.4);
}
.portal-request-list::-webkit-scrollbar {
  width: 7px;
}
.portal-request-list::-webkit-scrollbar-track {
  background: rgba(6, 10, 18, 0.4);
  border-radius: 4px;
}
.portal-request-list::-webkit-scrollbar-thumb {
  background: rgba(156, 181, 211, 0.45);
  border-radius: 4px;
}
.portal-request-list::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 188, 87, 0.55);
}

/* Portal UI improvements: visibility + spacing + card width */
.portal-controls-left {
  padding: 12px !important;
  gap: 12px !important;
  margin-bottom: 10px;
  background: rgba(16, 20, 30, 0.6);
  border: 1px solid rgba(156, 181, 211, 0.25);
  border-radius: 6px;
}
.portal-search-input {
  flex: 1 1 100%;
  order: -1;
  padding: 8px 10px !important;
  font-size: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(156, 181, 211, .3);
  border-radius: 5px;
}
.portal-search-input::placeholder {
  color: var(--faint);
}
.portal-controls-left .portal-control {
  font-size: 12px !important;
  flex: 1 1 auto;
  min-width: 140px;
}
.portal-controls-left .portal-control select {
  font-size: 12px !important;
  padding: 8px !important;
  min-width: 120px;
}
.portal-controls-left .portal-fav-toggle,
.portal-controls-left .portal-info-button {
  padding: 8px 12px !important;
  font-size: 11px !important;
}

/* Widen portal naves and card sections */
.portal-nave {
  min-width: 0;
}
.portal-nave-left,
.portal-nave-right,
.portal-nave-center {
  flex: 1.2 !important;
  min-width: 300px;
}

/* Show bond type selector immediately */
#portal-add-material-row {
  display: block !important;
}

/* Increase bottom padding for portals section */
.scene-portals {
  padding-bottom: 40px;
}

/* Exit to Home: permanent red background for visibility */
#compass-exit-home {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(180, 40, 55, 0.15) 100%) !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
  box-shadow: 0 0 16px rgba(220, 53, 69, 0.15) !important;
}

#compass-exit-home:hover {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.35) 0%, rgba(180, 40, 55, 0.28) 100%) !important;
  border-color: rgba(220, 53, 69, 0.8) !important;
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.25) !important;
}

#compass-exit-home .compass-waypoint-text strong {
  color: #ff8a8a !important;
}

#compass-exit-home .compass-waypoint-text small {
  color: #ffb4b4 !important;
}

/* Performance meter (Settings → Graphics, or ?fps). Never intercepts input. */
.fps-meter {
  position: fixed; z-index: 998;
  top: calc(max(12px, env(safe-area-inset-top)) + 64px);
  left: max(12px, env(safe-area-inset-left));
  width: 236px; padding: 10px 12px 9px;
  pointer-events: none; user-select: none;
  color: var(--text); font: 10px/1.3 var(--mono);
  background: rgba(7, 11, 20, .78);
  border: 1px solid rgba(87, 221, 255, .22); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fps-meter-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 7px; }
.fps-meter-value {
  min-width: 2.2ch; font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--cyan); text-shadow: 0 0 14px currentColor;
}
.fps-meter[data-tone="warn"] .fps-meter-value { color: var(--gold); }
.fps-meter[data-tone="bad"] .fps-meter-value { color: #ff5f7a; }
.fps-meter-unit { color: var(--faint); letter-spacing: .14em; }
.fps-meter-tier {
  margin-left: auto; padding: 2px 6px; border-radius: 99px;
  color: var(--faint); border: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: .12em; font-size: 9px;
}
.fps-meter-tier:empty { display: none; }
.fps-meter-graph {
  display: block; width: 100%; height: 44px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .025); border-radius: 4px;
}
.fps-meter-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; }
.fps-meter-stats div { display: flex; justify-content: space-between; gap: 6px; }
.fps-meter-stats dt { color: var(--faint); }
.fps-meter-stats dt, .fps-meter-stats dd { white-space: nowrap; }
.fps-meter-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.fps-meter-stats dd[data-tone="bad"] { color: #ff5f7a; }
.fps-meter-gpu {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  color: var(--faint); overflow: hidden;
}
.fps-meter-gpu-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); opacity: .8; }
.fps-meter-gpu-flag:empty { display: none; }
.fps-meter[data-gpu="integrated"] .fps-meter-gpu-flag { color: var(--gold); }
.fps-meter[data-gpu="software"] .fps-meter-gpu-flag { color: #ff5f7a; }
@media (max-width: 620px) {
  .fps-meter { top: calc(max(12px, env(safe-area-inset-top)) + 52px); width: 212px; padding: 8px 10px; }
  .fps-meter-value { font-size: 22px; }
}

/* Landing hint: the browser is drawing without the GPU, or with the iGPU. */
.gpu-notice {
  max-width: 460px; margin-top: 18px; padding: 12px 14px;
  border: 1px solid rgba(244, 188, 87, .35); border-radius: 10px;
  background: rgba(244, 188, 87, .06);
  font-size: 13px; line-height: 1.45;
}
.gpu-notice[data-kind="software"] { border-color: rgba(255, 95, 122, .5); background: rgba(255, 95, 122, .07); }
.gpu-notice-title { margin: 0 0 4px; color: var(--gold); font: 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.gpu-notice[data-kind="software"] .gpu-notice-title { color: #ff5f7a; }
.gpu-notice-body { margin: 0; color: var(--text); opacity: .85; }
.gpu-notice-how { margin-top: 8px; }
.gpu-notice-how summary { cursor: pointer; color: var(--cyan); font-size: 12px; }
.gpu-notice-steps { margin: 8px 0 0; padding-left: 18px; color: var(--text); opacity: .85; }
.gpu-notice-steps li + li { margin-top: 4px; }
.gpu-notice-dismiss {
  margin-top: 10px; padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--line); background: transparent; color: var(--faint);
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer;
}
.gpu-notice-dismiss:hover { color: var(--text); border-color: rgba(238, 244, 251, .4); }