@font-face {
  font-family: "Threshold Dosis";
  src: url("/assets/Dosis.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Infini Mono NF";
  src: url("/assets/JetBrainsMonoNerdFont-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #e6dfcc;
  --muted: #8f998f;
  --night: #090d0d;
  --night-2: #0d1313;
  --night-3: #121a19;
  --line: #30403b;
  --line-soft: #1e2a27;
  --acid: #c8ff45;
  --cyan: #55b8b1;
  --rust: #fa6436;
  --pink: #ff4f9a;
  --gold: #e1b66c;
  --danger: #ff7767;
  --terminal-text: #e8eee5;
  --terminal-muted: #b3beb6;
  --terminal-meta: #94a39a;
  --entity-location: #f8fafc;
  --entity-exit: #67e8f9;
  --entity-player: #c4b5fd;
  --entity-npc: #fbbf7a;
  --entity-feature: #f6c177;
  --entity-item: #c8ff45;
  --entity-shop: #f9a8d4;
  --entity-quest: #ff78b4;
  --entity-skill: #7dd3fc;
  --display: "Threshold Dosis", "Arial Narrow", sans-serif;
  --reading: C059, "Century Schoolbook", Rockwell, Georgia, serif;
  --mono: "Infini Mono NF", "JetBrainsMono Nerd Font", "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
html[data-text-scale="compact"] { font-size: 14px; }
html[data-text-scale="comfortable"] { font-size: 16px; }
html[data-text-scale="large"] { font-size: 18px; }
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(74, 157, 150, .15), transparent 28rem),
    radial-gradient(circle at 89% 72%, rgba(250, 100, 54, .08), transparent 29rem),
    var(--night-2);
  font-family: var(--reading);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 50; padding: .55rem .9rem; background: var(--acid); color: #080b0a; font: .72rem var(--mono); }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
[hidden] { display: none !important; }

.masthead, footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 3rem);
  background: rgba(9, 13, 13, .82);
  backdrop-filter: blur(14px);
}
.masthead { min-height: 3.5rem; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: .7rem; }
.brand-sigil {
  position: relative;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--acid);
  border-radius: 50%;
  box-shadow: inset 0 0 0 .28rem var(--night), inset 0 0 0 .34rem rgba(200,255,69,.5);
}
.brand-sigil::before, .brand-sigil::after, .brand-sigil i { content: ""; position: absolute; background: var(--acid); }
.brand-sigil::before { width: .2rem; height: 2.1rem; transform: rotate(32deg); }
.brand-sigil::after { width: 2.1rem; height: 1px; transform: rotate(-32deg); }
.brand-sigil i { width: .32rem; height: .32rem; border-radius: 50%; }
.masthead h1 { margin: 0; font: 600 1.18rem/.9 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow, .folio, .rail-title { margin: 0 0 .2rem; color: var(--cyan); font: .62rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.connection-block { display: flex; align-items: center; gap: .5rem; color: var(--muted); font: .66rem var(--mono); }
.connection-mark { width: .48rem; height: .48rem; border: 1px solid var(--muted); border-radius: 50%; }
.connection-mark.online { border-color: var(--acid); background: var(--acid); box-shadow: 0 0 .8rem rgba(200, 255, 69, .65); }
.text-button { border: 0; border-left: 1px solid var(--line); padding: 0 0 0 .65rem; color: var(--muted); background: none; white-space: nowrap; }
.text-button:hover { color: var(--acid); }
.reader-controls { display: none; align-items: center; gap: .15rem; margin-left: .15rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.reader-controls button { min-width: 1.65rem; border: 1px solid transparent; padding: .18rem .25rem; color: #727d76; background: transparent; font: .6rem var(--mono); }
.reader-controls button:hover { color: var(--ink); border-color: var(--line); }
.reader-controls button[aria-pressed="true"] { color: var(--night); border-color: var(--acid); background: var(--acid); }
body[data-view="codex"] .reader-controls { display: flex; }
.sound-toggle, .tell-unread {
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--line);
  padding: .2rem .38rem;
  color: var(--muted);
  background: rgba(4, 8, 8, .65);
  font: 600 .56rem var(--mono);
  letter-spacing: .06em;
}
.sound-toggle { display: none; }
body[data-view="codex"] .sound-toggle, body[data-view="admin"] .sound-toggle { display: inline-flex; }
.sound-toggle:hover { border-color: var(--cyan); color: var(--ink); }
.sound-toggle[aria-pressed="true"] { border-color: rgba(255, 119, 103, .55); color: var(--danger); }
.tell-unread {
  display: inline-flex;
  border-color: rgba(196, 181, 253, .72);
  color: #f5f1ff;
  background: rgba(107, 82, 173, .34);
  box-shadow: inset .14rem 0 0 var(--entity-player), 0 0 .8rem rgba(196, 181, 253, .12);
  animation: tell-badge-arrival .28s ease-out;
}
.tell-unread:hover { border-color: var(--entity-player); background: rgba(107, 82, 173, .5); }
.tell-unread span:first-child { color: var(--entity-player); font-size: .68rem; }

main { min-width: 0; min-height: 0; }

/* Threshold */
.entry-layout {
  position: relative;
  isolation: isolate;
  width: min(94rem, calc(100% - 3rem));
  min-height: calc(100svh - 5.25rem);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(25rem, 1.05fr) minmax(17rem, .68fr) minmax(18rem, .62fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3.4rem);
  padding-block: clamp(2rem, 5vh, 4rem);
}
.entry-copy { position: relative; z-index: 2; }
.entry-copy::before {
  content: "ENTRY / POINT";
  position: absolute;
  left: -1.7rem;
  top: 5rem;
  color: rgba(230,223,204,.3);
  font: .48rem var(--mono);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.entry-copy h2 {
  margin: .7rem 0 1.35rem;
  font: 300 clamp(4.1rem, 7.2vw, 8.2rem)/.77 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.entry-copy h2 span { display: block; }
.entry-copy h2 span:nth-child(2) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.entry-copy h2 span:nth-child(3) { font-size: .72em; letter-spacing: .01em; }
.entry-lead { max-width: 34rem; margin: 0; color: #c8c4b5; font-size: clamp(.96rem, 1.3vw, 1.13rem); line-height: 1.58; }
.genre-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .72rem;
  max-width: 38rem;
  margin: 1.45rem 0 1.2rem;
  color: var(--acid);
  font: .61rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.genre-strip i { color: var(--pink); font-style: normal; }
.content-note { max-width: 31rem; margin: 0; border-left: 1px solid var(--pink); padding: .1rem 0 .1rem .85rem; color: #929b93; font: .7rem/1.55 var(--mono); }
.threshold-art {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 30rem;
  margin: -1.5rem -2.7rem;
  overflow: hidden;
}
.threshold-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7% 9%;
  border: 1px solid rgba(200,255,69,.25);
  border-block-color: transparent;
  transform: skewY(-3deg);
  pointer-events: none;
}
.threshold-art img {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  display: block;
  object-fit: cover;
  filter: saturate(.86) contrast(1.1);
  mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent), linear-gradient(to bottom, transparent, black 9%, black 90%, transparent);
  mask-composite: intersect;
}
.threshold-art figcaption {
  position: absolute;
  z-index: 3;
  right: .2rem;
  bottom: 2rem;
  display: grid;
  padding: .4rem .55rem;
  border-right: 2px solid var(--pink);
  color: var(--muted);
  background: rgba(8,12,12,.78);
  font: .52rem var(--mono);
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
}
.threshold-art figcaption strong { margin-top: .15rem; color: var(--ink); font-size: .72rem; font-weight: 400; }
.auth-panel {
  position: relative;
  z-index: 4;
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid #40504a;
  background: rgba(10, 16, 15, .9);
  box-shadow: 1rem 1rem 0 rgba(200,255,69,.035), -1px 0 0 rgba(200,255,69,.4);
  backdrop-filter: blur(16px);
}
.auth-panel::before, .auth-panel::after { content: ""; position: absolute; width: .55rem; height: .55rem; pointer-events: none; }
.auth-panel::before { top: -.25rem; right: -.25rem; border-top: 1px solid var(--acid); border-right: 1px solid var(--acid); }
.auth-panel::after { bottom: -.25rem; left: -.25rem; border-bottom: 1px solid var(--pink); border-left: 1px solid var(--pink); }
.panel-heading { display: flex; justify-content: space-between; margin-bottom: .5rem; color: var(--muted); font: .56rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.panel-heading span:last-child { color: var(--pink); }
.tab-list { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); }
.tab-list button { border: 0; border-bottom: 2px solid transparent; padding: .65rem 0 .55rem; color: var(--muted); background: none; font: .65rem var(--mono); text-transform: uppercase; }
.tab-list button[aria-selected="true"] { border-color: var(--acid); color: var(--ink); }
.auth-form, .character-form { display: grid; gap: .8rem; margin-top: 1rem; }
label { display: grid; gap: .35rem; color: var(--muted); font: .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
input { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: .66rem .72rem; color: var(--ink); background: rgba(4, 8, 8, .68); }
input:hover { border-color: #53665f; }
.auth-form button, .character-form button, .character-card, .admin-heading button {
  border: 1px solid var(--acid);
  padding: .68rem .85rem;
  color: #0a0e0d;
  background: var(--acid);
  font: 600 .65rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.auth-form button:hover, .character-form button:hover, .character-card:hover { color: var(--ink); background: transparent; }
.acknowledgement { grid-template-columns: auto 1fr; align-items: start; line-height: 1.42; letter-spacing: 0; text-transform: none; }
.acknowledgement input { width: 1rem; margin-top: .05rem; accent-color: var(--acid); }
.form-message { min-height: 1rem; margin-bottom: 0; color: var(--danger); font: .66rem var(--mono); }

/* Character registry */
.character-view { width: min(72rem, calc(100% - 2rem)); margin: clamp(2rem, 7vh, 6rem) auto; }
.character-view { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem; }
.character-view > div:first-child { grid-column: 1 / -1; }
.character-view h2, .admin-heading h2 { margin: .35rem 0 1rem; font: 300 clamp(2.8rem, 6vw, 6rem)/.9 var(--display); text-transform: uppercase; }
.character-list { display: grid; gap: .6rem; }
.character-card { display: flex; justify-content: space-between; text-align: left; }
.character-card small { color: #27302c; }
.character-card:hover small { color: var(--muted); }

/* Exact-height game receiver */
body[data-view="codex"] {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 3.5rem minmax(0, 1fr) 1.75rem;
  font-family: var(--mono);
  text-rendering: optimizeLegibility;
}
body[data-view="codex"]::before { opacity: .1; }
.codex {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(12.5rem, 16vw, 15.5rem) minmax(24rem, 1fr) clamp(14rem, 19vw, 18rem);
  overflow: hidden;
  background: #090e0e;
}
.codex-rail {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  color: #b8c0b6;
  background-color: #0b1110;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}
.status-rail {
  border-right: 1px solid var(--line);
  background-image:
    radial-gradient(circle at 40% 5%, rgba(200,255,69,.09), transparent 12rem),
    repeating-radial-gradient(ellipse at 0 100%, transparent 0 1.2rem, rgba(200,255,69,.04) 1.25rem 1.3rem);
}
.context-rail {
  border-left: 1px solid var(--line);
  background-image:
    linear-gradient(145deg, transparent 0 64%, rgba(250,100,54,.04) 64% 65%, transparent 65%),
    radial-gradient(circle at 100% 80%, rgba(85,184,177,.09), transparent 14rem);
}
.codex-rail section, .codex-rail details { position: relative; z-index: 1; margin-bottom: 1.25rem; }
.rail-signal { height: 4.1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; margin: -.15rem 0 1rem; overflow: hidden; color: var(--acid); }
.rail-signal span { font: 600 2.6rem/.8 var(--mono); letter-spacing: -.15em; }
.rail-signal i { height: 1px; background: repeating-linear-gradient(90deg, var(--acid) 0 4px, transparent 4px 7px); }
.rail-signal small { color: var(--muted); font: .48rem/1.35 var(--mono); letter-spacing: .08em; }
.rail-coordinate { display: flex; justify-content: space-between; margin: .1rem 0 1.35rem; padding-bottom: .65rem; border-bottom: 1px solid var(--pink); color: #89938c; font: .58rem var(--mono); letter-spacing: .08em; }
.rail-coordinate span { color: var(--pink); }
.rail-title { color: var(--cyan); font-size: .65rem; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0; }
.status-grid div { position: relative; border-top: 1px solid var(--line-soft); padding-top: .35rem; }
.status-grid dt { color: #929d95; font: .62rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.status-grid dd { min-width: 0; margin: .22rem 0 0; color: var(--ink); font: .86rem var(--mono); font-variant-numeric: tabular-nums; }
.resource-stat progress { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; overflow: hidden; border: 0; border-radius: 0; background: transparent; color: var(--meter-color); appearance: none; }
.resource-stat progress::-webkit-progress-bar { background: var(--line-soft); }
.resource-stat progress::-webkit-progress-value { background: var(--meter-color); }
.resource-stat progress::-moz-progress-bar { background: var(--meter-color); }
.resource-experience { --meter-color: var(--pink); }
.resource-health { --meter-color: var(--danger); }
.resource-focus { --meter-color: #5b9dff; }
.empty-note { color: #929c94; font: .8rem/1.5 var(--mono); }
.chip-list { display: flex; flex-wrap: wrap; gap: .38rem; }
.chip {
  border: 1px solid var(--line);
  padding: .28rem .42rem;
  color: #cbd0c5;
  background: rgba(16,24,22,.65);
  font: .72rem var(--mono);
}
.chip::before { content: "↗ "; color: currentColor; }
.chip:hover { border-color: var(--acid); color: var(--acid); }
.list-row { margin: 0 0 .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-soft); font: .79rem/1.5 var(--mono); }
.list-row small { display: block; margin-top: .15rem; color: var(--muted); font-size: .68rem; }
#exit-panel .chip { color: var(--entity-exit); }
#exit-panel .chip::before { content: "⇢ "; }
#occupant-panel .list-row { color: var(--entity-player); }
#npc-panel strong { color: var(--entity-npc); font-weight: 600; }
#feature-panel .chip { color: var(--entity-feature); }
#feature-panel .chip::before { content: "◇ "; }
#room-item-panel .chip { color: var(--entity-item); }
#room-item-panel .chip::before { content: "◆ "; }
#room-shop-panel .chip { color: var(--entity-shop); }
#room-shop-panel .chip::before { content: "¤ "; }
#inventory-panel .list-row, #equipment-panel .list-row { color: var(--entity-item); }
#quest-panel strong { color: var(--pink); font-weight: 400; }
#quest-panel .quest-reward { color: var(--entity-item); }
.npc-interaction { text-decoration: underline; text-decoration-color: var(--entity-quest); text-underline-offset: .2em; }
summary { color: var(--cyan); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.codex-leaf {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(200,255,69,.025), transparent 12%, transparent 88%, rgba(85,184,177,.025)),
    #0e1414;
  box-shadow: 0 0 2.5rem rgba(0,0,0,.5);
}
.location-heading { padding: .72rem clamp(1rem, 3vw, 2.6rem) .68rem; border-bottom: 1px solid var(--line); background: rgba(12,18,18,.9); }
.location-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.location-meta span { color: #59645e; font: .48rem var(--mono); letter-spacing: .08em; }
.location-heading h2 { margin: .24rem 0 .3rem; font: 600 clamp(1.2rem, 2vw, 1.7rem)/1.08 var(--mono); letter-spacing: -.04em; }
.location-heading p:last-child { max-width: 78ch; margin: 0; color: #cbd3c9; font: 500 .9rem/1.55 var(--mono); }
.transcript {
  min-height: 0;
  overflow-y: auto;
  padding: .85rem clamp(1rem, 3vw, 2.6rem);
  scroll-behavior: smooth;
  scrollbar-color: #3c4c46 transparent;
  scrollbar-width: thin;
}
.event {
  position: relative;
  max-width: 88ch;
  min-height: 1.35rem;
  margin: 0 0 .65rem;
  padding: .1rem 0 .1rem 4.65rem;
  color: var(--terminal-text);
  font: 500 1rem/1.65 var(--mono);
  letter-spacing: .006em;
  white-space: pre-wrap;
}
.event::before { content: ""; position: absolute; left: 3.85rem; top: .15rem; bottom: .15rem; border-left: 1px solid var(--line-soft); }
.event-speech { color: #fff5dc; }
.event-combat::before, .event-error::before { border-color: var(--danger); }
.event-world::before { border-color: var(--rust); }
.event-quest::before { border-color: var(--pink); }
.event-level {
  margin-block: .35rem 1rem;
  border: 1px solid rgba(200, 255, 69, .72);
  padding-block: .65rem;
  padding-right: .85rem;
  color: #f5ffe1;
  background: linear-gradient(90deg, rgba(200,255,69,.13), rgba(85,184,177,.045));
  box-shadow: 0 0 1.4rem rgba(200,255,69,.09), inset .2rem 0 0 var(--acid);
  font-weight: 700;
  animation: level-arrival .65s ease-out;
}
.event-level::before { border-color: var(--acid); }
.event-tell, .event-tell-sent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .65rem;
  border: 1px solid rgba(196, 181, 253, .42);
  padding-block: .42rem;
  padding-right: .8rem;
}
.event-tell {
  margin-block: .25rem .9rem;
  color: #f7f4ff;
  background: linear-gradient(90deg, rgba(107,82,173,.24), rgba(85,184,177,.055));
  box-shadow: inset .2rem 0 0 var(--entity-player), 0 0 1.2rem rgba(196,181,253,.07);
  font-weight: 650;
  animation: tell-arrival .38s ease-out;
}
.event-tell::before, .event-tell-sent::before { border-color: var(--entity-player); }
.event-tell-sent {
  border-color: rgba(196, 181, 253, .2);
  color: #ddd7e9;
  background: rgba(107, 82, 173, .055);
}
.event-channel {
  align-self: start;
  margin-top: .27rem;
  border: 1px solid currentColor;
  padding: .05rem .24rem;
  color: var(--entity-player);
  font: 700 .54rem/1.3 var(--mono);
  letter-spacing: .1em;
}
.event-tell-sent .event-channel { color: #8d84ac; }
.event-tell-revisited { animation: tell-revisited .8s ease-out; }
.event-system { color: var(--terminal-muted); }
.event time { position: absolute; left: 0; top: .22rem; color: var(--terminal-meta); font: 500 .67rem var(--mono); }
.semantic-location { color: var(--entity-location); font-weight: 800; }
.semantic-exit { color: var(--entity-exit); font-weight: 650; }
.semantic-player { color: var(--entity-player); font-weight: 650; }
.semantic-npc { color: var(--entity-npc); font-weight: 700; }
.semantic-feature { color: var(--entity-feature); font-weight: 650; }
.semantic-item { color: var(--entity-item); font-weight: 650; }
.semantic-shop { color: var(--entity-shop); font-weight: 650; }
.semantic-quest { color: var(--entity-quest); font-weight: 700; }
.semantic-skill { color: var(--entity-skill); font-weight: 650; }
.tell-toast-region {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 4.15rem;
  width: min(38rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.tell-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(196, 181, 253, .78);
  color: #f7f4ff;
  background: rgba(19, 19, 30, .96);
  box-shadow: inset .22rem 0 0 var(--entity-player), 0 .75rem 2rem rgba(0,0,0,.46), 0 0 1.1rem rgba(196,181,253,.1);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  animation: tell-toast-arrival .32s ease-out;
}
.tell-toast button { border: 0; color: inherit; background: transparent; font-family: var(--mono); }
.tell-toast-open { min-width: 0; padding: .62rem .75rem .62rem .9rem; text-align: left; }
.tell-toast-open:hover { background: rgba(196,181,253,.075); }
.tell-toast-heading, .tell-toast-message { display: block; }
.tell-toast-heading { margin-bottom: .18rem; color: var(--entity-player); font: 700 .58rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tell-toast-message {
  display: -webkit-box;
  overflow: hidden;
  font: 600 .8rem/1.45 var(--mono);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tell-toast-action { border-left: 1px solid rgba(196,181,253,.22) !important; padding: .45rem .62rem; color: #d9d1ee !important; font-size: .6rem; text-transform: uppercase; }
.tell-toast-action:hover { color: #fff !important; background: rgba(196,181,253,.1); }
.tell-toast-action:disabled { color: #696374 !important; background: transparent; cursor: not-allowed; }
.tell-toast-dismiss { padding-inline: .52rem; font-size: 1rem; }
.command-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  min-height: 2.65rem;
  margin: 0 clamp(1rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.command-line:focus-within { border-top-color: var(--acid); box-shadow: 0 -1px 0 rgba(200, 255, 69, .14); }
.command-line label { color: var(--acid); font: .95rem var(--mono); }
.command-line input { border: 0; padding: .7rem 0; background: transparent; font: 500 1rem/1.5 var(--mono); }
.command-line input:focus, .command-line input:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.command-line input::placeholder { color: #59645e; }
.command-line button { border: 0; padding: .4rem 0 .4rem .5rem; color: var(--muted); background: none; font: .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.command-line button:hover { color: var(--acid); }
.command-hint { min-height: 1.15rem; margin: -.05rem clamp(1rem, 3vw, 2.6rem) .35rem; color: #6d7972; font: .6rem var(--mono); }
kbd { border: 1px solid #34423d; padding: .02rem .18rem; font: inherit; }

@keyframes level-arrival {
  from { opacity: 0; transform: translateY(.35rem); filter: brightness(1.8); }
  to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes tell-arrival {
  from { opacity: .35; transform: translateX(.4rem); filter: brightness(1.35); }
  to { opacity: 1; transform: translateX(0); filter: brightness(1); }
}

@keyframes tell-revisited {
  0%, 100% { border-color: rgba(196, 181, 253, .42); }
  35% { border-color: var(--entity-player); box-shadow: inset .2rem 0 0 var(--entity-player), 0 0 1.5rem rgba(196,181,253,.3); }
}

@keyframes tell-toast-arrival {
  from { opacity: 0; transform: translateY(.45rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tell-badge-arrival {
  from { opacity: .25; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Operations */
.admin-view { width: min(86rem, calc(100% - 2rem)); margin: 2rem auto; }
.admin-heading { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line); }
.admin-heading h2 { font-size: clamp(2rem, 4vw, 4rem); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.metric-card { border-top: 1px solid var(--acid); padding: .75rem 0; }
.metric-card strong { display: block; margin-top: .35rem; font: 2rem var(--display); }
.admin-table { width: 100%; border-collapse: collapse; font: .68rem var(--mono); }
.admin-table th, .admin-table td { padding: .6rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
.admin-table button { border: 1px solid var(--line); padding: .28rem .45rem; color: var(--ink); background: transparent; font: inherit; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.admin-view > section { margin: 2rem 0; overflow-x: auto; }
.admin-view h3 { font-weight: 400; }

footer { min-height: 1.75rem; border-top: 1px solid var(--line); color: #66716a; font: .54rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .entry-layout { grid-template-columns: minmax(25rem, 1fr) minmax(17rem, .55fr); }
  .threshold-art { position: absolute; z-index: -1; inset: 0 25% 0 35%; margin: 0; opacity: .55; }
  .auth-panel { grid-column: 2; }
  .codex { grid-template-columns: 11rem minmax(22rem, 1fr) 12.5rem; }
  .codex-rail { padding: .75rem; }
}

@media (max-width: 840px) {
  .entry-layout { width: min(42rem, calc(100% - 2rem)); grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; }
  .entry-copy h2 { font-size: clamp(4rem, 15vw, 6.5rem); }
  .threshold-art { position: relative; inset: auto; z-index: 0; grid-row: 2; height: 20rem; min-height: 0; margin: -3rem 0; opacity: .8; }
  .threshold-art img { min-height: 20rem; }
  .auth-panel { grid-column: 1; grid-row: 3; width: min(24rem, 100%); justify-self: end; }

  body[data-view="codex"] { grid-template-rows: 3rem minmax(0, 1fr) 1.5rem; }
  body[data-view="codex"] .masthead { min-height: 3rem; }
  .codex { grid-template-columns: 1fr; grid-template-rows: 4.2rem minmax(0, 1fr) 3.8rem; }
  .codex-rail { overflow: hidden; padding: .45rem .75rem; }
  .status-rail { grid-row: 1; display: flex; align-items: center; border: 0; border-bottom: 1px solid var(--line); }
  .status-rail section:not(:first-of-type), .rail-signal { display: none; }
  .status-rail section:first-of-type { width: 100%; margin: 0; display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: .5rem; }
  .status-rail .rail-title { margin: 0; }
  .status-grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .context-rail { grid-row: 3; border: 0; border-top: 1px solid var(--line); }
  .context-rail section:not(:first-of-type), .context-rail details, .rail-coordinate { display: none; }
  .context-rail section:first-of-type { height: 100%; margin: 0; display: flex; align-items: center; gap: .7rem; }
  .context-rail section:first-of-type .rail-title { flex: 0 0 auto; margin: 0; }
  .context-rail .chip-list { flex-wrap: nowrap; overflow-x: auto; }
  .codex-leaf { grid-row: 2; }
}

@media (max-width: 600px) {
  .masthead { padding-inline: .75rem; }
  .masthead .eyebrow, footer span:first-child { display: none; }
  .brand-sigil { width: 1.4rem; height: 1.4rem; }
  .brand-sigil::before { height: 1.8rem; }
  .brand-sigil::after { width: 1.8rem; }
  .masthead h1 { font-size: .95rem; }
  .connection-block { gap: .28rem; font-size: .55rem; }
  body[data-view="codex"] #connection-state, body[data-view="admin"] #connection-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .reader-controls { margin-left: 0; padding-left: .28rem; }
  .reader-controls button { min-width: 1.35rem; padding-inline: .15rem; }
  .sound-toggle, .tell-unread { padding-inline: .3rem; }
  .sound-toggle span:last-child { display: none; }
  .entry-copy::before { display: none; }
  .entry-layout { width: min(100% - 1.3rem, 40rem); }
  .entry-copy h2 { font-size: clamp(3.55rem, 18vw, 5rem); }
  .entry-lead { font-size: .92rem; }
  .character-view { grid-template-columns: 1fr; }
  .character-view > div:first-child { grid-column: auto; }
  .status-rail section:first-of-type { grid-template-columns: 3.8rem 1fr; }
  .status-grid dt { font-size: .52rem; }
  .status-grid dd { font-size: .72rem; }
  .location-heading { padding: .58rem .75rem; }
  .location-heading h2 { font-size: 1rem; }
  .location-heading p:last-child { max-height: 2.55rem; overflow: hidden; font-size: .76rem; }
  .location-meta span { display: none; }
  .transcript { padding: .65rem .75rem; }
  .event { padding-left: 3.7rem; font-size: .9rem; line-height: 1.58; }
  .event::before { left: 3.05rem; }
  .event time { font-size: .55rem; }
  .tell-toast-region { bottom: 3.7rem; width: calc(100% - 1rem); }
  .tell-toast-open { padding-inline: .7rem; }
  .tell-toast-action { padding-inline: .48rem; }
  .command-line { min-height: 2.35rem; margin-inline: .75rem; }
  .command-hint { margin-inline: .75rem; white-space: nowrap; overflow: hidden; }
  footer { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .event-level, .event-tell, .event-tell-revisited, .tell-toast, .tell-unread { animation: none; }
}