/* ============================================================
   Continuum - Main Stylesheet
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────── */
/* Loaded via chronicle-tokens.css */

/* ── Base Reset ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography Utilities ────────────────────────────── */
.prose-text {
  font-family: var(--font-prose);
  font-size: var(--prose-size);
  line-height: var(--prose-line-height);
  color: var(--text-prose);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ── Scrollbar Styling ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Legacy base styles (retained for compatibility) ─── */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

main {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-ui);
    color: var(--text-primary);
}

input, textarea {
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    outline: none;
}

input:focus, textarea:focus {
    border-color: var(--accent);
}

/* ============================================================
   PLAYER LAYOUT — Chronicle Reading Room
   ============================================================ */

.player-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-base);
}

.player-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 260;
}

.content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Room location header: always visible, shows current room name */
.room-location-header {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Cinematic header: shown on mobile/narrow (Phase 1.5 activates via media query) */
.cinematic-header {
    display: none; /* Hidden until Phase 1.5 responsive CSS activates */
    height: 180px;
    background: var(--bg-surface-1);
    flex-shrink: 0;
}

.content-split {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Side canvas: shown on wide screens with scene art (Phase 1.5 activates via media query) */
.side-canvas {
    display: none; /* Hidden until Phase 1.5 responsive CSS activates */
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
}

.narrative-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    background-color: var(--scene-tint, transparent);
}

/* ── Right Panel (XP / level-up sidebar) ──────────── */
/* z-index 300: above player-layout(260) so tab buttons are clickable,
   below overlay-panels(400) so overlays render on top. */
.right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    padding: var(--space-4, 1rem);
    z-index: 300;
    pointer-events: auto;
}

/* ── Action Bar ────────────────────────────────────── */
/* z-index 266: above player-layout(260) so toolbar is not covered by narrative-scroll on mobile,
   and above overlay-backdrop(265, rendered at root stacking-context level) so toolbar buttons
   remain clickable when a panel is open. The overlay-panel group (overlay-panels z-index:400)
   renders above the toolbar. */
.action-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
    position: sticky;
    bottom: 0;
    z-index: 266;
    padding-bottom: var(--safe-area-bottom);
}

.action-bar-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
}
.action-bar-toolbar::-webkit-scrollbar { display: none; }

.action-bar-exits {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 0;
}
.action-bar-exits:empty { display: none; }

/* TTS quality badge: informational label, must not intercept pointer events */
.tts-quality-badge { pointer-events: none; }
.action-bar-exits::-webkit-scrollbar { display: none; }

.action-bar-input {
    padding: var(--space-2) var(--space-3);
}

.toolbar-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.toolbar-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-surface-2);
}

.toolbar-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Action Input ──────────────────────────────────── */
.action-input {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.action-text-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    transition: border-color var(--transition-fast);
}

.action-text-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.action-text-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.action-submit-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--bg-base);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--ui-size);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.action-submit-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.action-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   CHRONICLE — Continuous Scroll Narrative
   ============================================================ */

.chronicle-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
}

.narrative-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
}

/* Center prose at comfortable reading width */
.narrative-scroll .prose {
    width: 100%;
    max-width: 42em;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.chronicle-entry-item {
    position: relative;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.chronicle-entry-item:last-child {
    border-bottom: none;
}

/* Prose text override for narrative entries */
.chronicle-entry-item .prose-text {
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    line-height: var(--prose-line-height);
    color: var(--text-prose);
    margin-bottom: 0;
}

.chronicle-cursor {
    animation: blink 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    50% { opacity: 0; }
}

.bookmark-btn {
    position: absolute;
    top: var(--space-3);
    right: 0;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    background: none;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.bookmark-btn:hover, .chronicle-entry-item.bookmarked .bookmark-btn {
    color: var(--accent);
}

/* Load earlier button */
.load-earlier-container {
    display: flex;
    justify-content: center;
    padding-bottom: var(--space-5);
}

.load-earlier-btn {
    padding: var(--space-2) var(--space-4);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.load-earlier-btn:hover:not(:disabled) {
    color: var(--text-secondary);
    border-color: var(--border-visible);
}

.load-earlier-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Whisper rejected notice */
.whisper-rejected-notice {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface-1);
    border: 1px solid var(--color-rose);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--color-rose);
    font-size: 0.9rem;
    z-index: 300;
    box-shadow: var(--shadow-md);
}

/* Chronicle narrative overlays */
.chronicle-narrative-overlay {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--border-visible);
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.skill-check-narrative { border-left-color: var(--color-ochre); color: var(--color-ochre); }
.fair-engine-warning   { border-left-color: var(--color-rose);  color: var(--color-rose); }
.echo-description      { border-left-color: var(--color-lavender); color: var(--color-lavender); }

/* Chronicle dialogue input */
.chronicle-dialogue-input {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    min-width: 320px;
}

.chronicle-dialogue-input input {
    flex: 1;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-prose);
}

.chronicle-dialogue-input button {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--ui-size);
    transition: background var(--transition-fast);
}

.chronicle-dialogue-input button:first-of-type {
    background: var(--accent);
    color: var(--bg-base);
}

.chronicle-dialogue-input button:first-of-type:hover {
    background: var(--accent-hover);
}

.chronicle-dialogue-input button:last-of-type {
    color: var(--text-secondary);
}

.chronicle-dialogue-input button:last-of-type:hover {
    background: var(--bg-surface-2);
}

/* ============================================================
   RESPONSIVE — Mobile-First Player Layout
   ============================================================ */

/* ── Mobile Base (< 640px) ─────────────────────────── */
/* Everything already in .player-layout is mobile-first */

/* Mobile action bar: stacked layout (< 640px exclusive) */
@media (max-width: 639px) {
  :root {
    --prose-size: 16px;
    --prose-line-height: 1.7;
    --ui-size: 13px;
  }

  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* Add bottom padding to narrative scroll so content isn't hidden behind fixed action bar */
  .narrative-scroll {
    padding-bottom: calc(var(--space-7) * 3);
  }

  .cinematic-header {
    display: block;
  }
}

/* ── Tablet (640px–1024px) ─────────────────────────── */
@media (min-width: 640px) {
  .narrative-scroll .prose {
    padding: 0 var(--space-5);
    max-width: 42em;
    margin: 0 auto;
  }
}

/* ── Desktop+ (> 1024px) ──────────────────────────── */
@media (min-width: 1024px) {
  .side-canvas {
    display: block;
  }

  .cinematic-header {
    display: none;
  }
}

/* ── Wide (> 1400px) ──────────────────────────────── */
@media (min-width: 1400px) {
  .side-canvas {
    width: 35%;
    max-width: 500px;
  }
}

/* ── Touch interactions ────────────────────────────── */
@media (hover: none) {
  /* On touch devices, context menu items need larger tap targets */
  .toolbar-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
}

/* ── Orientation: landscape phone ─────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .cinematic-header {
    display: none;
  }

  .narrative-scroll {
    padding-top: var(--space-2);
  }
}

/* ── Scroll behavior ───────────────────────────────── */
.narrative-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ── Prevent body scroll when drawer open ─────────── */
body.drawer-open {
  overflow: hidden;
}

/* --- CYOA Choice Cards --- */
.cyoa-choice-cards {
    margin-top: 1rem;
    max-width: 900px;
    width: 100%;
}

.cyoa-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.cyoa-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.cyoa-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.cyoa-card:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--bg-surface-2);
}

.cyoa-card.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg-base);
}

.cyoa-card:disabled {
    opacity: 0.5;
    cursor: default;
}

.cyoa-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.cyoa-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cyoa-card.selected .cyoa-card-desc {
    color: var(--bg-base);
    opacity: 0.8;
}

/* --- Chronicle Illustration --- */
.chronicle-illustration {
    margin: 1rem 0;
    text-align: center;
}

.illustration-img {
    max-width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.illustration-placeholder {
    font-size: 2rem;
    color: #a89060;
    padding: 1rem;
}

.illustration-caption {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: #6b5339;
    margin-top: 0.5rem;
}

/* ============================================================
   ZONE MAP — graph renderer
   ============================================================ */

/* Inner graph canvas — fixed size matching SVG viewBox */
.zone-map-graph {
    position: relative;
    width: 200px;
    height: 240px;
    flex-shrink: 0;
}

/* SVG edge overlay */
.map-edges {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 240px;
    pointer-events: none;
    overflow: visible;
}

.map-edge {
    stroke: var(--border-subtle);
    stroke-opacity: 0.6;
}

/* Room nodes — HTML divs, centred on their (X,Y) coordinate */
.map-node {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s ease;
    background: var(--bg-surface-2);
    border: 1.5px solid var(--border-subtle);
}

.map-node.current-room {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.map-node.visited {
    background: var(--bg-surface-2);
    border-color: var(--text-secondary);
}

.map-node.unvisited {
    background: var(--bg-surface-1);
    border-color: var(--border-subtle);
    opacity: 0.45;
}

.map-node.poi {
    border-color: var(--color-accent);
    border-width: 2px;
    border-style: dashed;
}

.map-node:hover:not(.unvisited) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 20%, transparent);
}

.map-node-label {
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.55rem;
    color: var(--text-secondary);
    pointer-events: none;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   PEOPLE PANEL
   ============================================================ */

.people-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

/* Non-blocking people panel drawer — positioned fixed on the right without
   intercepting pointer events in the exit/navigation area at the bottom.
   Uses pointer-events: none on the container; individual interactive children
   re-enable pointer-events as needed.
   z-index 310: above right-panel (300) so the panel is not obscured by the XP sidebar. */
.people-panel-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-height: 60dvh;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: -4px 4px 16px rgba(0,0,0,0.25);
    z-index: 310;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
}

.people-panel-drawer .overlay-panel-header,
.people-panel-drawer .overlay-panel-body {
    pointer-events: auto;
}

.people-section {
    margin-bottom: var(--space-3, 0.75rem);
}

.panel-title {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2, 0.5rem);
}

.empty-state {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

.occupant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.occupant-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.375rem);
    transition: background var(--transition-fast, 0.15s);
}

.occupant-item:hover {
    background: var(--bg-surface-2);
}

.occupant-name {
    color: var(--text-primary);
    font-size: var(--ui-size);
}

.occupant-item.is-npc .occupant-name {
    color: var(--text-secondary);
}

/* --- Character Portrait --- */
.character-portrait {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg-base);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.character-portrait.unknown {
    background: var(--bg-surface-2);
    color: var(--text-tertiary);
    border: 1px dashed var(--border-visible);
}

.character-portrait.is-player {
    box-shadow: 0 0 0 2px var(--accent);
}

/* ============================================================
   ITEMS IN ROOM
   ============================================================ */

.items-in-room-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.room-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.room-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s;
}

.room-item-row:hover {
    background: var(--bg-surface-2);
}

.item-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.item-name {
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════
   DRAWERS (replaces overlay panel)
   ══════════════════════════════════════════════════════ */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    cursor: default;
    pointer-events: auto;
    animation: backdrop-in var(--transition-base, 0.2s) ease;
}

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Backdrop rendered at root stacking-context level (outside overlay-panels z-index:400 group)
   so action-bar (z-index 266) remains above it and toolbar buttons stay clickable.
   z-index 265: above player-layout(260), below action-bar(266). */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 265;
    cursor: default;
    pointer-events: auto;
}

/* z-index 400: must be above player-layout(260). Chromium creates stacking contexts for
   positioned flex items, so without an explicit z-index the backdrop (position:fixed inside
   this container) would paint beneath player-layout. */
[data-testid="overlay-panels"] {
    position: relative;
    pointer-events: none;
    z-index: 400;
}

.overlay-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100dvh;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -8px 0 24px rgba(0,0,0,0.3);
    transform: translateX(100%);
    transition: transform var(--transition-base, 0.25s) ease-out;
    z-index: 270;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.overlay-panel.open {
    transform: translateX(0);
    pointer-events: auto;
}

.overlay-panel:not(.open) {
    pointer-events: none;
}

.overlay-panel.closed {
    transform: translateX(100%);
    pointer-events: none;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.drawer-title {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drawer-close,
.overlay-close-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2, 0.5rem);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast, 0.15s);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.drawer-close:hover,
.overlay-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.drawer-body,
.overlay-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 1rem);
}

/* Mobile: bottom sheets */
@media (max-width: 639px) {
    .overlay-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 85vh;
        max-height: 85dvh;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
        transform: translateY(100%);
        box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    }

    .overlay-panel.open { transform: translateY(0); }

    .drawer-drag-handle {
        width: 40px;
        height: 4px;
        background: var(--border-visible);
        border-radius: var(--radius-full, 9999px);
        margin: var(--space-3, 0.75rem) auto var(--space-1, 0.25rem);
    }
}

/* ── People panel ── */
.person-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.person-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-surface-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-avatar.unknown {
    border: 1px dashed var(--border-visible);
}

.person-name {
    color: var(--text-primary);
    font-size: var(--ui-size);
    flex: 1;
}

.person-actions {
    display: flex;
    gap: var(--space-2, 0.5rem);
}

/* ── Inventory panel ── */
.inventory-section-header {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-2, 0.5rem);
}

.item-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: var(--space-2, 0.5rem);
}

/* ── Journal panel ── */
.journal-entry {
    border-left: 3px solid var(--border-subtle);
    padding-left: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.journal-entry.quest { border-left-color: var(--color-ochre); }
.journal-entry.npc { border-left-color: var(--color-sage); }
.journal-entry.location { border-left-color: var(--color-slate); }
.journal-entry.combat { border-left-color: var(--color-rose); }
.journal-entry.lore { border-left-color: var(--color-lavender); }

.journal-entry-timestamp {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ── Quest panel (Chronicle tokens) ── */
.quest-card {
    padding: var(--space-4, 1rem);
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-3, 0.75rem);
}

.quest-card.active {
    border-left: 3px solid var(--color-ochre);
    background: var(--color-ochre-subtle);
}

.quest-card.completed {
    opacity: 0.5;
}

/* ── Character sheet (Chronicle tokens) ── */
.char-attribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3, 0.75rem);
}

.char-stat-card {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--space-3, 0.75rem);
    text-align: center;
}

.char-skill-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.char-condition-badge {
    padding: 2px var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    font-size: 11px;
    font-weight: 500;
}

/* ── Character sheet tab buttons ── */
.char-tab {
    background: none;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.char-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.char-tab:hover:not(.active) {
    color: var(--text-primary);
}

/* ── Quest Panel — inner content ── */
.quest-list-title,
.quest-history-title,
.quest-cyoa-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--color-subtext, #a6adc8);
}

.quest-entry {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.quest-entry.completed {
    opacity: 0.5;
}

.quest-empty {
    font-size: 0.875rem;
    color: var(--color-subtext, #a6adc8);
}

.quest-cyoa-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quest-cyoa-choice {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.quest-cyoa-choice:hover:not(:disabled) {
    border-color: var(--accent);
}

.quest-cyoa-choice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quest-choice-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.quest-choice-desc {
    font-size: 0.8rem;
    color: var(--color-subtext, #a6adc8);
    margin-top: 0.25rem;
}

.overlay-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* ============================================================
   CHARACTER SHEET
   ============================================================ */

.character-sheet-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Identity --- */
.character-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-initials {
    color: var(--bg-base);
    font-weight: 700;
    font-size: 1.2rem;
    font-family: var(--font-heading);
}

.character-info {
    display: flex;
    flex-direction: column;
}

.character-name {
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.character-level {
    font-size: 0.85rem;
    color: var(--accent);
}

.character-class {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* --- Attributes --- */
.character-attributes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attributes-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.attributes-grid th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.attributes-grid td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(74, 55, 40, 0.3);
}

.attributes-grid td:first-child {
    font-weight: 600;
    color: var(--accent);
    width: 60px;
}

.derived-stats {
    display: flex;
    gap: 1rem;
}

.hp-bar {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-success);
}

/* --- Skills --- */
.character-skills {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skills-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.skill-row {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}

.skill-row:hover {
    background: var(--bg-surface-2);
}

.skill-name {
    flex: 1;
}

.skill-attr {
    width: 40px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

.skill-rating {
    width: 30px;
    text-align: right;
    color: var(--accent);
}

/* ============================================================
   INVENTORY
   ============================================================ */

.inventory-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Equipped --- */
.equipped-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipped-title,
.carried-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.equipment-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.equipment-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    min-height: 44px;
}

.equipment-slot.empty {
    border-style: dashed;
}

.equipment-slot .slot-icon {
    font-size: 1.1rem;
}

.equipment-slot .slot-name {
    font-size: 0.85rem;
}

.slot-empty-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Carried Items --- */
.carried-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.inventory-item-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: center;
}

.inventory-item-cell:hover {
    border-color: var(--accent);
}

.inventory-item-cell .item-icon {
    font-size: 1.5rem;
}

.inventory-item-cell .item-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.weight-bar {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
}

/* ============================================================
   JOURNAL
   ============================================================ */

.journal-layout {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    height: 100%;
}

.journal-sidebar {
    border-right: 1px solid var(--border-subtle);
    padding-right: 0.75rem;
}

.journal-entries {
    overflow-y: auto;
}

/* --- Journal Filter --- */
.journal-filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-btn {
    padding: 0.4rem 0.75rem;
    text-align: left;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color 0.15s, background 0.15s;
}

.filter-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.filter-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}

/* --- Journal Entries --- */
.journal-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.journal-entry-row {
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s;
}

.journal-entry-row:hover {
    border-color: var(--accent);
}

.entry-row-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entry-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.entry-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}

.entry-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.entry-full-text {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.entry-summary {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Entry type accents (Chronicle tokens) */
.entry-type-quest { border-left-color: var(--color-ochre); }
.entry-type-npc { border-left-color: var(--color-sage); }
.entry-type-location { border-left-color: var(--color-slate); }
.entry-type-combat { border-left-color: var(--color-rose); }
.entry-type-lore { border-left-color: var(--color-lavender); }
.entry-type-choice { border-left-color: var(--color-ochre); }

/* ============================================================
   OOC CHAT PANEL
   ============================================================ */

.ooc-chat-panel {
    position: fixed;
    bottom: 60px;
    right: 1rem;
    width: 340px;
    max-height: 420px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s, transform 0.2s;
}

/* OOC-specific backdrop sits below the OOC panel but above everything else */
.ooc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.2);
    cursor: default;
    pointer-events: auto;
}

.ooc-chat-panel.closed {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.ooc-chat-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ooc-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.ooc-chat-header h3 {
    font-size: 0.85rem;
    font-family: var(--font-ui);
}

.ooc-close-btn {
    font-size: 1.1rem;
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.ooc-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.ooc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 300px;
}

.ooc-message {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    max-width: 80%;
}

.ooc-message.own {
    align-self: flex-end;
    align-items: flex-end;
}

.ooc-message.other {
    align-self: flex-start;
    align-items: flex-start;
}

.ooc-bubble {
    padding: 0.35rem 0.65rem;
    border-radius: 12px;
    word-break: break-word;
    color: var(--text-primary);
}

.ooc-message.own .ooc-bubble {
    background: var(--accent);
    color: var(--bg-base);
    border-bottom-right-radius: 3px;
}

.ooc-message.other .ooc-bubble {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-bottom-left-radius: 3px;
}

.ooc-sender {
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    font-size: 0.75rem;
}

.ooc-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: auto;
}

.ooc-input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.ooc-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.ooc-send-btn {
    padding: 0.35rem 0.75rem;
    background: var(--accent);
    color: var(--bg-base);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
}

.ooc-send-btn:hover {
    background: var(--accent-hover);
}

/* ============================================================
   TOASTER
   ============================================================ */

.toaster {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toast-in 0.25s ease;
    min-width: 280px;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-info { border-left: 3px solid var(--accent); }
.toast-success { border-left: 3px solid var(--color-sage); }
.toast-error { border-left: 3px solid var(--color-rose); }
.toast-warning { border-left: 3px solid var(--color-ochre); }

.toast-message {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.toast-dismiss {
    font-size: 1.1rem;
    color: var(--text-tertiary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.toast-dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

/* ============================================================
   WORLD MAP
   ============================================================ */

.world-map-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.world-map-svg {
    width: 100%;
    height: 100%;
}

.zone-connection {
    stroke: var(--border-subtle);
    stroke-opacity: 0.4;
}

.zone-connection.unknown {
    stroke-dasharray: 4 4;
}

/* Zone Nodes (SVG) */
.zone-node .zone-circle {
    fill: var(--bg-surface-2);
    stroke: var(--border-subtle);
    stroke-width: 1;
}

.zone-node.current .zone-circle {
    fill: var(--accent);
    stroke: var(--accent);
}

.zone-node.visited .zone-circle {
    fill: var(--bg-surface-2);
    stroke: var(--text-secondary);
}

.zone-node.known .zone-circle {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
}

.zone-node.unknown .zone-circle {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
    opacity: 0.3;
}

.zone-pulse-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    opacity: 0.5;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { r: 12; opacity: 0.5; }
    100% { r: 22; opacity: 0; }
}

.current-zone-dot {
    fill: var(--bg-base);
}

.zone-label {
    fill: var(--text-secondary);
    font-size: 9px;
    font-family: var(--font-ui);
    text-anchor: middle;
}

.zone-node.current .zone-label {
    fill: var(--text-primary);
}

.compass-rose {
    fill: var(--text-secondary);
    opacity: 0.3;
    font-size: 10px;
    font-family: var(--font-ui);
}

.world-map-legend {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.legend-item.current::before { background: var(--accent); }
.legend-item.visited::before { background: var(--text-secondary); }
.legend-item.known::before { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.legend-item.unknown::before { background: var(--bg-surface-1); opacity: 0.3; border: 1px solid var(--border-subtle); }

/* ============================================================
   PIE MENU
   ============================================================ */

.pie-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: transparent;
    cursor: default;
}

.pie-menu-wrapper {
    z-index: 150;
}

.pie-menu-svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.slice .slice-path {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
    stroke-width: 1;
    transition: fill 0.15s;
}

.slice.available .slice-path:hover {
    fill: var(--bg-surface-2);
}

.slice.unavailable .slice-path {
    opacity: 0.3;
}

.slice-label {
    fill: var(--text-primary);
    font-size: 10px;
    font-family: var(--font-ui);
    text-anchor: middle;
    pointer-events: none;
}

.slice.unavailable .slice-label {
    fill: var(--text-secondary);
}

.center-circle {
    fill: var(--accent);
}

.center-label {
    fill: var(--bg-base);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-ui);
    text-anchor: middle;
    pointer-events: none;
}

.pie-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================================
   RULEBOOK OVERLAY
   ============================================================ */

.rulebook-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rulebook-search {
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
}

.rulebook-entries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rulebook-entry {
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.rulebook-entry-title {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.rulebook-entry-title:hover {
    background: var(--bg-surface-2);
}

.rulebook-entry.expanded .rulebook-entry-title {
    border-bottom: 1px solid var(--border-subtle);
}

.rulebook-entry-text {
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ============================================================
   GM DASHBOARD
   ============================================================ */

.gm-dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-base);
}

.gm-dashboard__world-panel {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.gm-dashboard__body {
    display: grid;
    grid-template-columns: 240px 1fr 260px;
    flex: 1;
    min-height: 0;
}

.gm-dashboard__session-panel {
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.gm-dashboard__workspace {
    overflow: hidden;
}

.gm-dashboard__override-panel {
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.gm-dashboard__bottom {
    flex-shrink: 0;
}

/* --- Session Panel --- */
.gm-session-panel {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-4);
}

.gm-session-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gm-session-panel__campaign {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    color: var(--accent);
}

.gm-session-panel__number {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.gm-session-panel__roster {
    flex: 1;
}

.gm-session-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Session Timer --- */
.gm-session-timer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
}

.gm-session-timer__time {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.gm-session-timer__paused {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.gm-session-timer__paused-badge {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ochre);
    background: var(--color-ochre-subtle);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
}

/* --- Player Roster --- */
.gm-player-roster {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gm-player-roster__header {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-4);
}

.gm-player-roster__list {
    display: flex;
    flex-direction: column;
}

/* --- Player Card --- */
.gm-player-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.gm-player-card:hover {
    background: var(--bg-surface-2);
}

.gm-player-card--offline {
    opacity: 0.5;
}

.gm-player-card__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-player-card__indicator--online {
    background: var(--color-sage);
}

.gm-player-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.gm-player-card__character {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-primary);
}

.gm-player-card__player {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.gm-player-card__room {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* --- Tabbed Workspace --- */
.gm-tabbed-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gm-tabbed-workspace__tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
    flex-shrink: 0;
}

.gm-tab {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
}

.gm-tab:hover {
    color: var(--text-primary);
}

.gm-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.gm-tabbed-workspace__content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* --- World View Tab --- */
.world-view-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.world-view-tab__map {
    flex: 1;
}

.world-view-tab__hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 0.5rem;
}

/* --- NPC Control --- */
.npc-control-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.npc-control-tab__empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.npc-control-tab__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.npc-control-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.npc-control-card__portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.npc-control-card__info {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.npc-control-card__name {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ui-size);
    color: var(--text-primary);
}

.npc-control-card__room {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.npc-control-card__status {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.npc-control-card__status--active { color: var(--color-sage); }
.npc-control-card__status--idle { color: var(--text-tertiary); }
.npc-control-card__status--sleeping { color: var(--text-tertiary); opacity: 0.6; }
.npc-control-card__status--dead { color: var(--color-rose); }

.npc-control-card__controlled-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    background: var(--color-sage-subtle);
    color: var(--color-sage);
}

.npc-control-card__schedule-suspended {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    background: var(--color-slate-subtle);
    color: var(--color-slate);
}

.npc-control-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    width: 100%;
}

/* --- GM Log --- */
.gm-log-tab {
    display: flex;
    flex-direction: column;
}

.gm-log-tab__empty {
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.gm-log-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--ui-size);
    border-left: 2px solid transparent;
}

.gm-log-entry--move { border-left-color: var(--color-sage); }
.gm-log-entry--combat { border-left-color: var(--color-rose); }
.gm-log-entry--quest { border-left-color: var(--color-ochre); }
.gm-log-entry--chat { border-left-color: var(--text-tertiary); }

.gm-log-entry__icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-top: 2px;
}

.gm-log-entry__type {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-log-entry__message {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    color: var(--text-secondary);
}

.gm-log-entry__time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-log-entry__player {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--accent);
    flex-shrink: 0;
}

/* --- Override Panel --- */
.gm-override-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gm-roll-override,
.gm-scene-override,
.gm-temporal-controls,
.gm-quick-settings,
.gm-narrator-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.gm-roll-override__title,
.gm-scene-override__title,
.gm-temporal-controls__title,
.gm-quick-settings__title {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.gm-roll-override__input,
.gm-scene-override__input,
.gm-narrator-input__field {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--ui-size);
}

.gm-roll-override__error {
    font-size: 11px;
    color: var(--color-rose);
}

.gm-temporal-controls__info {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-tertiary);
}

/* --- Room Context Menu --- */
.gm-room-context-menu {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 160;
    overflow: hidden;
}

.gm-room-context-menu__list {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.gm-room-context-menu__list button {
    padding: 0.4rem 0.75rem;
    text-align: left;
    font-size: 0.85rem;
    border-radius: var(--border-radius);
    transition: background 0.15s;
}

.gm-room-context-menu__list button:hover {
    background: var(--bg-surface-2);
}

/* --- Bottom Bar --- */
.gm-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    flex-shrink: 0;
    padding: 0 var(--space-4);
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
}

.gm-bottom-bar__left,
.gm-bottom-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ============================================================
   GM PREP TOOL
   ============================================================ */

.gm-prep-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.gm-prep-layout__body {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    flex: 1;
    min-height: 0;
}

.gm-prep-layout__sidebar {
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.gm-prep-layout__editor {
    overflow-y: auto;
}

.gm-prep-layout__right {
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.gm-prep-layout__bottom {
    flex-shrink: 0;
}

/* --- Prep Sidebar --- */
.prep-tool-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.prep-tool-sidebar__tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.prep-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.prep-tab:hover {
    color: var(--text-primary);
}

.prep-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.prep-tool-sidebar__content {
    flex: 1;
    overflow-y: auto;
}

.prep-tool-sidebar__assets-stub {
    padding: var(--space-4);
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

/* --- Campaign Tree --- */
.campaign-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.campaign-tree__toolbar {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.campaign-tree__nodes {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.campaign-tree-node__row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem var(--space-2);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition-fast);
}

.campaign-tree-node__row:hover {
    background: var(--bg-surface-2);
}

.campaign-tree-node__row--selected {
    background: var(--accent-subtle);
}

.campaign-tree-node__chevron {
    width: 16px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-align: center;
    flex-shrink: 0;
}

.campaign-tree-node__icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.campaign-tree-node__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-tree-node__status {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* --- Content Editor --- */
.content-editor {
    padding: var(--space-6);
}

.content-editor__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-style: italic;
}

.content-editor__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.content-editor__node-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.content-editor__status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.content-editor__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- Prep Editors (shared) --- */
.room-editor,
.npc-editor,
.item-editor,
.quest-editor,
.zone-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.room-editor__field,
.npc-editor__field,
.item-editor__field,
.quest-editor__field,
.zone-editor__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.room-editor__field label,
.npc-editor__field label,
.item-editor__field label,
.quest-editor__field label,
.zone-editor__field label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.room-editor__field input,
.room-editor__field textarea,
.npc-editor__field input,
.npc-editor__field textarea,
.item-editor__field input,
.item-editor__field textarea,
.quest-editor__field input,
.quest-editor__field textarea,
.zone-editor__field input,
.zone-editor__field textarea {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.room-editor__field textarea,
.npc-editor__field textarea,
.item-editor__field textarea,
.quest-editor__field textarea,
.zone-editor__field textarea {
    min-height: 80px;
    resize: vertical;
}

.npc-editor__grid,
.item-editor__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.room-editor__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.quest-editor__objective {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.85rem;
}

/* --- Prep Right Panel --- */
.prep-right-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

.prep-right-panel__ai,
.prep-right-panel__theme {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Theme Panel --- */
.theme-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.theme-panel__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.theme-panel__select {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.theme-panel__swatches {
    display: flex;
    gap: var(--space-1);
}

.swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
}

/* --- Prep Bottom Bar --- */
.prep-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
}

.prep-bottom-bar__left,
.prep-bottom-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Save Status --- */
.prep-save-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prep-save-status--saved {
    color: var(--color-sage);
}

.prep-save-status--dirty {
    color: var(--accent);
}

/* --- AI Assist Panel --- */
.ai-assist-panel,
.ai-assistance-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ai-assist-panel__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.ai-assist-panel__buttons,
.ai-assistance-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.ai-assist-panel__generating {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.ai-assist-panel__result,
.ai-assistance-panel__result {
    padding: var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Illustration Manager --- */
.illustration-manager-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.illustration-manager-panel__upload,
.illustration-manager-panel__ai {
    display: flex;
    gap: var(--space-2);
}

.illustration-manager-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-2);
}

.illustration-manager-panel__asset {
    aspect-ratio: 1;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

/* --- Session Debrief --- */
.session-debrief-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.session-debrief-panel__summary,
.session-debrief-panel__notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.session-debrief-panel__share {
    display: flex;
    gap: var(--space-2);
}

/* --- Theme Editor --- */
.theme-editor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.theme-editor-panel__palette {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.theme-editor-panel__slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.theme-editor-panel__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ============================================================
   GM BUTTONS
   ============================================================ */

.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
}

.gm-btn--primary {
    background: var(--accent);
    color: var(--bg-base);
    border-color: var(--accent);
}

.gm-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.gm-btn--secondary {
    background: none;
    border-color: var(--border-visible);
    color: var(--text-secondary);
}

.gm-btn--secondary:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.gm-btn--accent {
    background: var(--accent);
    color: var(--bg-base);
}

.gm-btn--danger {
    background: none;
    border-color: var(--color-rose);
    color: var(--color-rose);
}

.gm-btn--warning {
    background: none;
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}

.gm-btn--sm {
    padding: var(--space-1) var(--space-2);
    font-size: 11px;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.tag,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-base);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-surface-2);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-primary:hover {
    background: var(--accent-subtle);
}

.btn-success {
    background: var(--color-success);
    color: #fff;
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.text-danger {
    color: var(--color-danger);
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-visible);
}

/* ============================================================
   WORLD SELECTION (DASHBOARD)
   ============================================================ */
.world-selection-page { min-height: 100vh; background: var(--bg-base); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 3rem 1rem; }
.world-selection-title { font-family: var(--font-ui); font-size: 2rem; font-weight: 600; color: var(--text-primary); text-align: center; margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.world-selection-subtitle { font-family: var(--font-ui); font-size: 1rem; color: var(--text-secondary); text-align: center; margin-bottom: 2.5rem; }
.world-list { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 1rem; }
.world-card { background: var(--bg-surface-1); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); padding: var(--space-5); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; transition: border-color var(--transition-fast); }
.world-card:hover { border-color: var(--border-visible); }
.world-card-left { flex: 1; }
.world-name { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.world-character-info { margin-bottom: 0.5rem; }
.world-character-name { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-primary); }
.world-character-level { background: var(--bg-surface-3); color: var(--text-secondary); font-size: 11px; padding: 1px var(--space-2); border-radius: var(--radius-sm); margin-left: var(--space-2); }
.world-no-character { font-style: italic; color: var(--text-tertiary); font-size: var(--ui-size); margin-bottom: 0.5rem; }
.world-campaign-info { border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); margin-top: var(--space-2); font-size: var(--ui-size); color: var(--text-secondary); }
.world-card-actions { display: flex; flex-direction: column; gap: var(--space-2); min-width: 140px; }
.btn-play { background: var(--accent); color: var(--bg-base); font-family: var(--font-ui); font-weight: 600; padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--ui-size); transition: background var(--transition-fast); }
.btn-play:hover { background: var(--accent-hover); }
.btn-campaign { background: var(--bg-surface-2); color: var(--text-secondary); border: 1px solid var(--border-visible); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--ui-size); font-family: var(--font-ui); transition: background var(--transition-fast); }
.btn-campaign:hover { background: var(--bg-surface-3); }
.btn-staff-review { background: var(--color-ochre-subtle); color: var(--color-ochre); border: 1px solid var(--color-ochre); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--ui-size); font-family: var(--font-ui); }
.world-inline-form { background: var(--bg-surface-2); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); padding: var(--space-4); margin-top: var(--space-3); }
.world-inline-form input, .world-inline-form select { background: var(--bg-surface-3); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); width: 100%; margin-bottom: var(--space-2); font-size: var(--ui-size); font-family: var(--font-ui); }
.create-world-btn { width: 100%; max-width: 860px; background: var(--bg-surface-1); border: 2px dashed var(--border-visible); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--text-secondary); cursor: pointer; font-size: var(--ui-size); font-family: var(--font-ui); margin-top: var(--space-4); transition: background var(--transition-fast); }
.create-world-btn:hover { background: var(--bg-surface-2); border-color: var(--accent); color: var(--accent); border-style: solid; }
.create-form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-top: var(--space-3); }
.create-form input, .create-form select { background: var(--bg-surface-3); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--ui-size); font-family: var(--font-ui); }
.empty-state { color: var(--text-secondary); font-style: italic; padding: 1rem 0; }

/* Settings Panel */
.settings-section { margin-bottom: 1.5rem; }
.settings-section h4 { font-weight: 600; margin-bottom: 0.5rem; color: var(--foreground, #2c1a0e); }
.settings-btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.settings-toggle-btn { padding: 0.4rem 1rem; border: 2px solid #8b6f3e; border-radius: 4px; background: #ece0cb; cursor: pointer; font-size: 0.875rem; transition: all 0.2s; }
.settings-toggle-btn.active { background: #c9a84c; color: #2c1a0e; font-weight: 600; }
.settings-slider { width: 100%; accent-color: #c9a84c; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0; }
.settings-toggle-switch input[type="checkbox"] { width: 2rem; height: 1rem; cursor: pointer; accent-color: #c9a84c; }
.settings-nav-buttons { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid #8b6f3e; padding-top: 1rem; margin-top: 0.5rem; }
.settings-nav-btn { padding: 0.5rem 1rem; border: 1px solid #8b6f3e; border-radius: 4px; background: transparent; color: var(--foreground, #2c1a0e); cursor: pointer; font-size: 0.875rem; text-align: left; transition: background 0.2s; }
.settings-nav-btn:hover { background: #c9a84c22; }

/* ============================================================
   P6-5: COMBAT RADIAL MENU
   ============================================================ */
.combat-radial-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
}
.combat-radial-svg { pointer-events: auto; }
.combat-slice-path {
    fill: var(--accent-gold, #c9a84c);
    stroke: var(--foreground, #2c1a0e);
    stroke-width: 2;
    cursor: pointer;
    transition: opacity 0.15s;
}
.combat-slice-path.on-cooldown {
    opacity: 0.5;
    fill: var(--border-ornate, #8b6f3e);
    cursor: default;
}
.combat-cooldown-overlay { fill: var(--muted, #d4c4a6); opacity: 0.7; }
.combat-center-circle {
    fill: var(--page-background, #f5e6c8);
    stroke: var(--border-ornate, #8b6f3e);
    stroke-width: 3;
}
.combat-center-text {
    font-family: var(--font-chronicle-heading, 'Palatino Linotype', serif);
    font-size: 16px;
    fill: var(--foreground, #2c1a0e);
    pointer-events: none;
}
.combat-slice-label {
    font-family: var(--font-ui, 'Segoe UI', sans-serif);
    font-size: 14px;
    pointer-events: none;
}
@keyframes combat-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.8 } }
.combat-slice-ready { animation: combat-pulse 2s ease-in-out infinite; }

/* ============================================================
   P6-4: CHARACTER SHEET TWO-COLUMN
   ============================================================ */
.char-sheet-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    color: var(--foreground, #2c1a0e);
}
.char-sheet-left { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.char-portrait-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--accent-gold, #c9a84c);
    background: var(--muted, #d4c4a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--border-ornate, #8b6f3e);
}
.char-name { font-family: var(--font-chronicle-heading, 'Palatino Linotype', serif); font-size: 1.4rem; font-weight: 700; }
.char-meta { font-size: 0.9rem; opacity: 0.8; }
.char-sheet-right { display: flex; flex-direction: column; gap: 0.5rem; }
.attr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.attr-box {
    border: 2px solid var(--border-ornate, #8b6f3e);
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    background: rgba(0,0,0,0.05);
}
.attr-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; opacity: 0.75; }
.attr-value { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.attr-mod { font-size: 0.8rem; color: var(--accent-gold, #c9a84c); }

/* ============================================================
   P6-6: ZONE MAP SEPIA / HUB NODES
   ============================================================ */
.fantasy .room-node.poi .room-circle,
.fantasy .room-node.hub .room-circle {
    filter: sepia(0.3);
}
.fantasy .room-circle { filter: sepia(0.15); }
.fantasy .map-connection { filter: sepia(0.3); }

/* P6-3 page turn arrows */
.chronicle-page-turn {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    margin-top: 0.25rem;
}
.chronicle-page-turn-btn {
    background: none;
    border: 1px solid var(--border-ornate, #8b6f3e);
    border-radius: 4px;
    color: var(--border-ornate, #8b6f3e);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
}
.chronicle-page-turn-btn:hover { background: rgba(139,111,62,0.1); }

/* Phase 2: Chronicle UI - PeoplePanel action buttons */
.person-actions {
    display: flex;
    gap: var(--space-1, 0.25rem);
    margin-top: var(--space-1, 0.25rem);
}
.person-action-btn {
    background: none;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
    border-radius: 3px;
    color: var(--text-secondary, #a89880);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.person-action-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e8dcc8);
}
.examine-room-card {
    margin-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    padding-top: var(--space-3, 0.75rem);
}

/* Phase 2: Chronicle UI - Inventory weight indicator */
.inventory-weight {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary, #6b5a47);
}

/* ══════════════════════════════════════════════════════
   PHASE 3: INTERACTIONS
   ══════════════════════════════════════════════════════ */

/* Context Menu */
/* z-index 500/501: above overlay-panels(400) so context menus render above People panel, Journal etc. */
.context-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
}
.context-menu {
  position: fixed;
  z-index: 501;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: var(--space-2) 0;
  animation: menu-in var(--transition-fast) ease;
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.context-menu-item:hover { background: var(--bg-surface-3); }
.context-menu-item.danger { color: var(--color-rose); }
.context-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.context-menu-hint { margin-left: auto; font-size: 11px; font-family: var(--font-mono); }
.context-menu-hint.confident { color: var(--color-sage); }
.context-menu-hint.uncertain { color: var(--color-ochre); }
.context-menu-hint.risky { color: var(--color-rose); }
.context-menu-divider { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
.context-menu-icon { width: 16px; text-align: center; }
.context-menu-label { flex: 1; }
.context-menu-nav-indicator { margin-left: auto; font-size: 11px; opacity: 0.6; }

/* Interactive Prose */
.interactive {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: opacity var(--transition-fast);
}
.interactive:hover { opacity: 0.8; }
.interactive-npc { color: var(--accent); }
.interactive-person { color: var(--color-sage); }
.interactive-object { color: var(--color-ochre); }
.interactive-exit { color: var(--color-slate); }

/* Map Drawer */
.map-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateY(-100%);
  transition: transform var(--transition-base) ease-out;
}
.map-drawer.open { transform: translateY(0); }
.map-trigger {
  height: 4px;
  background: var(--border-subtle);
  cursor: pointer;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
}
.map-drawer-content {
  padding: var(--space-4);
  max-height: 50vh;
  overflow: hidden;
}
.map-zoom-controls {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.map-zoom-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
.map-zoom-btn.active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }

/* Map Markers */
.map-container { position: relative; width: 100%; height: 300px; overflow: hidden; }
.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.map-marker-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-visible);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: border-color var(--transition-fast);
}
.map-marker.active .map-marker-icon { border-color: var(--accent); background: var(--accent-subtle); }
.map-marker.unknown .map-marker-icon { border-style: dashed; opacity: 0.5; }
.map-marker-label {
  font-size: 10px;
  font-family: var(--font-ui);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  white-space: nowrap;
}

/* Inspiration Popover */
.inspiration-popover {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--space-2);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: var(--space-2) 0;
  z-index: 50;
}
.inspiration-header {
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.inspiration-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.inspiration-item:hover { background: var(--bg-surface-3); }
.inspiration-text { flex: 1; font-family: var(--font-prose); font-size: 14px; color: var(--text-primary); }
.inspiration-confidence { font-size: 11px; font-family: var(--font-mono); }
.inspiration-confidence.confident { color: var(--color-sage); }
.inspiration-confidence.uncertain { color: var(--color-ochre); }
.inspiration-confidence.risky { color: var(--color-rose); }

/* Exit Chips */
.exit-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-slate-subtle);
  border: 1px solid var(--color-slate);
  border-radius: var(--radius-full);
  color: var(--color-slate);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.exit-chip:hover { background: var(--bg-surface-3); }

/* ══════════════════════════════════════════════════════
   GM DASHBOARD — Chronicle Mission Control
   ══════════════════════════════════════════════════════ */

.gm-layout { display: flex; height: 100vh; overflow: hidden; background: var(--bg-base); }
.gm-panel-left { width: 240px; flex-shrink: 0; background: var(--bg-surface-1); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; }
.gm-panel-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-base); }
.gm-panel-right { width: 260px; flex-shrink: 0; background: var(--bg-surface-1); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; }
.gm-bottom-bar-layout { height: 48px; flex-shrink: 0; background: var(--bg-surface-1); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 var(--space-4); gap: var(--space-2); }

/* Session Timer */
.gm-session-timer-pill { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-surface-2); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.gm-session-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sage); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Player Cards */
.gm-player-card-chronicle { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-left: 3px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast); }
.gm-player-card-chronicle:hover { background: var(--bg-surface-2); }
.gm-player-card-chronicle.selected { border-left-color: var(--accent); background: var(--accent-subtle); }
.gm-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gm-status-dot.online { background: var(--color-sage); }
.gm-status-dot.away { background: var(--color-ochre); }
.gm-status-dot.offline { background: var(--text-tertiary); }
.gm-player-name { font-family: var(--font-ui); font-size: var(--ui-size); font-weight: 500; color: var(--text-primary); }
.gm-player-location { font-family: var(--font-ui); font-size: 11px; color: var(--text-tertiary); }
.gm-hp-bar-track { height: 3px; background: var(--bg-surface-3); border-radius: var(--radius-full); margin-top: 2px; }
.gm-hp-bar-fill { height: 100%; background: var(--color-rose); border-radius: var(--radius-full); transition: width var(--transition-base); }

/* Tab Bar */
.gm-tab-bar { display: flex; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface-1); }
.gm-tab-alert { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; }
.gm-tab-alert.combat { background: var(--color-rose); }
.gm-tab-alert.quest { background: var(--color-ochre); }

/* Narrator Input */
.gm-narrator-textarea { width: 100%; font-family: var(--font-prose); font-size: var(--prose-size); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-prose); padding: var(--space-3); resize: vertical; min-height: 80px; transition: border-color var(--transition-fast); }
.gm-narrator-textarea:focus { outline: none; border-color: var(--accent); }
.gm-narrator-target { font-family: var(--font-ui); font-size: var(--ui-size); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); padding: var(--space-1) var(--space-2); }
.gm-btn-primary { background: var(--accent); color: var(--bg-base); font-family: var(--font-ui); font-size: var(--ui-size); font-weight: 600; border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background var(--transition-fast); }
.gm-btn-primary:hover { background: var(--accent-hover); }
.gm-btn-ghost { background: none; border: 1px solid var(--border-visible); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-3); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); }
.gm-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
.gm-btn-danger { background: none; border: 1px solid var(--color-rose); color: var(--color-rose); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }

/* Log Entries */
.gm-log-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.gm-log-dot.movement { background: var(--color-sage); }
.gm-log-dot.magic { background: var(--color-lavender); }
.gm-log-dot.quest { background: var(--color-ochre); }
.gm-log-dot.combat { background: var(--color-rose); }
.gm-log-dot.gm-action { background: var(--accent); }
.gm-log-timestamp { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.gm-log-text { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-secondary); }
.gm-log-text .npc-name, .gm-log-text .location-name { color: var(--accent); }

/* Control Sections */
.gm-control-section { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.gm-control-header { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-3); }
.gm-control-input { font-family: var(--font-mono); font-size: var(--ui-size); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); padding: var(--space-2) var(--space-3); width: 100%; }
.gm-npc-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-surface-2); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.gm-npc-status { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 500; }
.gm-npc-status.controlled { background: var(--color-sage-subtle); color: var(--color-sage); }
.gm-npc-status.ai { background: var(--color-slate-subtle); color: var(--color-slate); }
.gm-notification-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Player card semantic badges (quest=ochre, spell=lavender, combat=rose) */
.gm-player-badge { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 500; }
.gm-player-badge.quest { background: var(--color-ochre-subtle); color: var(--color-ochre); }
.gm-player-badge.spell { background: var(--color-lavender-subtle); color: var(--color-lavender); }
.gm-player-badge.combat { background: var(--color-rose-subtle); color: var(--color-rose); }

/* ══════════════════════════════════════════════════════
   GM PREP TOOL — Chronicle Design System
   ══════════════════════════════════════════════════════ */

/* Layout */
.prep-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg-base); }
.prep-toolbar { height: 44px; flex-shrink: 0; background: var(--bg-surface-1); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 var(--space-4); gap: var(--space-2); }
.prep-body { display: grid; grid-template-columns: 260px 1fr 320px; flex: 1; min-height: 0; }
.prep-sidebar { background: var(--bg-surface-1); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; }
.prep-canvas { background: var(--bg-base); flex: 1; overflow: auto; position: relative; }
.prep-canvas-dot-grid { background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; }
.prep-right-panel { width: 320px; background: var(--bg-surface-1); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; }
.prep-bottom-bar { height: 28px; flex-shrink: 0; background: var(--bg-surface-1); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 var(--space-4); gap: var(--space-3); font-family: var(--font-ui); font-size: 11px; color: var(--text-tertiary); }

/* Sidebar Tree */
.prep-tree-node { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 3px solid transparent; cursor: pointer; font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); transition: background var(--transition-fast), border-color var(--transition-fast); }
.prep-tree-node:hover { background: var(--bg-surface-2); }
.prep-tree-node.selected { border-left-color: var(--accent); background: var(--accent-subtle); color: var(--text-primary); }
.prep-source-badge { padding: 0px 4px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; font-family: var(--font-mono); }
.prep-source-badge.campaign { background: var(--accent-subtle); color: var(--accent); }
.prep-source-badge.world { background: var(--bg-surface-3); color: var(--text-tertiary); }
.prep-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.prep-status-dot.draft { background: var(--text-tertiary); }
.prep-status-dot.published { background: var(--color-sage); }
.prep-status-dot.changed { background: var(--accent); }
.prep-tree-group-header { padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); display: flex; align-items: center; justify-content: space-between; }

/* Canvas Cards */
.prep-card { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); transition: box-shadow var(--transition-fast); cursor: pointer; }
.prep-card.campaign-content { border-left-color: var(--accent); }
.prep-card.selected { box-shadow: 0 0 0 2px var(--accent); }
.prep-card-connection { border: 1px dashed var(--border-strong); }
.prep-fab { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent); color: var(--bg-base); font-size: 24px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: background var(--transition-fast); }
.prep-fab:hover { background: var(--accent-hover); }

/* Editor Forms */
.prep-form-group { margin-bottom: var(--space-4); }
.prep-form-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-2); display: block; }
.prep-input { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-3); transition: border-color var(--transition-fast); }
.prep-input:focus { outline: none; border-color: var(--accent); }
.prep-textarea { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-prose); font-family: var(--font-prose); font-size: var(--prose-size); padding: var(--space-3); line-height: var(--prose-line-height); resize: vertical; transition: border-color var(--transition-fast); }
.prep-textarea:focus { outline: none; border-color: var(--accent); }

/* AI Assist */
.prep-ai-section { border: 1px solid var(--color-lavender); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-lavender-subtle); }
.prep-ai-header { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-lavender); margin-bottom: var(--space-3); }
.prep-ai-btn { background: var(--color-lavender-subtle); border: 1px solid var(--color-lavender); border-radius: var(--radius-sm); color: var(--color-lavender); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-3); cursor: pointer; transition: background var(--transition-fast); }
.prep-ai-btn:hover { background: rgba(155,138,176,0.2); }

/* Save Footer */
.prep-save-footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); }
.prep-save-status { display: flex; align-items: center; gap: var(--space-2); }
.prep-save-status.published { color: var(--color-sage); }
.prep-save-status.draft { color: var(--text-tertiary); }

/* ══════════════════════════════════════════════════════
   PHASE 6: SUPPORTING VIEWS
   ══════════════════════════════════════════════════════ */

/* --- Login / Auth --- */
.login-card { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 400px; width: 100%; }
.login-title { font-family: var(--font-ui); font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-5); }
.login-input { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-3); transition: border-color var(--transition-fast); }
.login-input:focus { outline: none; border-color: var(--accent); }
.login-btn-primary { width: 100%; background: var(--accent); color: var(--bg-base); font-family: var(--font-ui); font-size: var(--ui-size); font-weight: 600; padding: var(--space-3); border: none; border-radius: var(--radius-sm); cursor: pointer; }

/* --- Dashboard / World Selection Semantic Tokens --- */
.world-card-title { font-family: var(--font-ui); font-weight: 600; color: var(--text-primary); }
.world-card-meta { font-family: var(--font-ui); font-size: 12px; color: var(--text-tertiary); }
.system-badge { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 500; }
.system-badge.dnd5e { background: var(--color-ochre-subtle); color: var(--color-ochre); }
.system-badge.aether { background: var(--color-lavender-subtle); color: var(--color-lavender); }
.world-system-badge { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: var(--bg-surface-3); color: var(--text-tertiary); }
.btn-signout { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-secondary); text-decoration: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); transition: border-color var(--transition-fast); }
.btn-signout:hover { border-color: var(--border-visible); color: var(--text-primary); }
.join-error-banner { background: var(--color-rose-subtle); border: 1px solid var(--color-rose); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: var(--color-rose); font-family: var(--font-ui); font-size: var(--ui-size); }
.combat-gcd-display { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.gm-campaign-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.gm-campaign-item { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-secondary); padding: var(--space-2) var(--space-3); background: var(--bg-surface-2); border-radius: var(--radius-sm); }
.no-campaigns-notice { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-tertiary); font-style: italic; padding: var(--space-3) 0; }

/* --- Staff Review --- */
.staff-status-badge { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 500; }
.staff-status-badge.draft { background: var(--bg-surface-3); color: var(--text-tertiary); }
.staff-status-badge.pending { background: var(--color-ochre-subtle); color: var(--color-ochre); }
.staff-status-badge.approved { background: var(--color-sage-subtle); color: var(--color-sage); }
.staff-status-badge.rejected { background: var(--color-rose-subtle); color: var(--color-rose); }
.staff-table { width: 100%; border-collapse: collapse; }
.staff-table th { font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 600; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-visible); }
.staff-table td { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-secondary); padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.staff-table tr:hover td { background: var(--bg-surface-2); }

/* --- Admin / Config --- */
.config-section-header { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-3); }
.config-input { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-3); }
.config-input:focus { outline: none; border-color: var(--accent); }

/* --- Social / Chat --- */
.chat-message { padding: var(--space-3) var(--space-4); }
.chat-message-bubble { background: var(--bg-surface-2); border-radius: var(--radius-md); padding: var(--space-3); max-width: 80%; }
.chat-message-bubble.own { background: var(--accent-subtle); border: 1px solid var(--accent); margin-left: auto; }
.chat-message-sender { font-family: var(--font-ui); font-size: 11px; color: var(--text-tertiary); margin-bottom: var(--space-1); }
.chat-message-text { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-primary); }
.chat-input-area { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); }
.chat-input { width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--ui-size); padding: var(--space-2) var(--space-4); }

/* --- Rulebook Drawer --- */
.rulebook-drawer { width: 400px; }
.rulebook-section { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.rulebook-section-title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rulebook-entry-body { font-family: var(--font-prose); font-size: var(--prose-size); color: var(--text-prose); line-height: var(--prose-line-height); }

/* --- User Profile & Session --- */
.user-profile-card { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.user-avatar { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--bg-surface-3); }
.session-timeout-modal { background: var(--bg-surface-1); border: 1px solid var(--border-visible); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-lg); max-width: 360px; }

/* --- Room Items & Exits Panels --- */
.room-items-panel { display: block; padding: var(--space-3) 0; }
.item-entry { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); gap: var(--space-3); }
.item-name { font-family: var(--font-ui); font-size: var(--ui-size); color: var(--text-primary); }
.room-exits-panel { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; }