/* ── Guide: two-column layout ──────────────────────────────── */
      .guide-layout {
        display: flex;
        min-height: calc(100vh - 52px);
        max-width: var(--max-w);
        margin: 0 auto;
      }

      /* ── Sidebar ───────────────────────────────────────────────── */
      .guide-sidebar {
        width: 260px;
        min-width: 260px;
        border-right: 1px solid var(--border);
        background: var(--surface);
        padding: 1.5rem 1rem 1rem;
        position: sticky;
        top: 52px;
        height: calc(100vh - 52px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }

      .guide-sidebar-brand {
        font-size: 1rem;
        font-weight: 700;
        color: var(--accent);
        margin-bottom: 1.25rem;
        text-decoration: none;
        letter-spacing: 0.02em;
      }

      .guide-sidebar-footer {
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
      }

      /* ── Hamburger toggle (mobile only) ────────────────────────── */
      .guide-hamburger {
        display: none;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 200;
        width: 36px;
        height: 36px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px;
      }

      .guide-hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--muted);
        border-radius: 1px;
        transition: background 0.15s;
      }

      .guide-hamburger:hover span { background: var(--text); }

      .guide-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 150;
      }

      .guide-sidebar-toggle-check { display: none; }

      /* ── Main content area ─────────────────────────────────────── */
      .guide-main {
        flex: 1;
        min-width: 0;
        padding: 2rem 1.5rem;
      }

      /* ── Breadcrumbs ───────────────────────────────────────────── */
      .guide-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.8rem;
        color: var(--muted);
        margin-bottom: 1.5rem;
        list-style: none;
        padding: 0;
      }

      .guide-breadcrumb-row {
        display: flex;
        align-items: center;
        gap: 0.35rem;
      }

      .guide-breadcrumb-link {
        color: var(--muted);
        text-decoration: none;
        transition: color 0.15s;
      }

      .guide-breadcrumb-link:hover { color: var(--accent); }

      .guide-breadcrumb-sep {
        color: var(--border);
        user-select: none;
      }

      .guide-breadcrumb-current {
        color: var(--text);
        font-weight: 600;
      }

      /* ── Nav tree ──────────────────────────────────────────────── */
      .guide-nav { flex: 1; }

      .guide-nav-empty {
        color: var(--muted);
        font-size: 0.8rem;
        padding: 0.5rem;
      }

      .guide-nav-list,
      .guide-nav-sublist {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .guide-nav-sublist {
        margin-left: 0.85rem;
        border-left: 1px solid var(--border);
        padding-left: 0.5rem;
      }

      .guide-nav-item { margin: 0; }

      .guide-nav-section { margin: 0; }

      .guide-nav-section > summary {
        cursor: pointer;
        list-style: none;
      }

      .guide-nav-section > summary::-webkit-details-marker { display: none; }

      .guide-nav-link {
        display: block;
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.15s, background 0.15s;
      }

      .guide-nav-link:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.03);
      }

      .guide-nav-link--active {
        color: var(--accent);
        background: rgba(212, 163, 58, 0.08);
        font-weight: 600;
      }

      .guide-nav-link--section {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text);
      }

      /* ── Todo placeholder ──────────────────────────────────────── */
      .todo-value {
        display: inline;
        padding: 0.05rem 0.35rem;
        border: 1px dashed var(--accent-dim);
        border-radius: 3px;
        color: var(--accent);
        font-size: 0.82rem;
        cursor: default;
      }

      /* ── Inventory source badge ────────────────────────────────── */
      .inventory-source {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.15rem 0.55rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.5;
      }

      .inventory-source--inferred {
        background: rgba(212, 163, 58, 0.12);
        color: var(--accent);
        border: 1px solid rgba(212, 163, 58, 0.25);
      }

      .inventory-source--authored {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
        border: 1px solid rgba(59, 130, 246, 0.25);
      }

      .inventory-source--live {
        background: rgba(34, 197, 94, 0.12);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.25);
      }

      .inventory-source-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
      }

      .inventory-source--live .inventory-source-dot {
        animation: guide-dot-pulse 2s ease-in-out infinite;
      }

      @keyframes guide-dot-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
      }

      /* ── Locale switcher ───────────────────────────────────────── */
      .locale-switcher {
        display: flex;
        gap: 0.35rem;
      }

      .locale-btn {
        flex: 1;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: transparent;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s, background 0.15s, border-color 0.15s;
      }

      .locale-btn:hover {
        color: var(--text);
        border-color: var(--accent-dim);
      }

      .locale-btn--active {
        color: var(--accent);
        border-color: var(--accent-dim);
        background: rgba(212, 163, 58, 0.1);
      }

      /* ── Responsive: mobile (< 768px) ──────────────────────────── */
      @media (max-width: 767px) {
        .guide-layout { display: block; }

        .guide-hamburger { display: flex; }

        .guide-sidebar {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          z-index: 160;
          transform: translateX(-100%);
          transition: transform 0.25s ease;
          width: 260px;
          min-width: 260px;
          height: 100vh;
        }

        .guide-sidebar-toggle-check:checked ~ .guide-sidebar {
          transform: translateX(0);
        }

        .guide-sidebar-toggle-check:checked ~ .guide-sidebar-overlay {
          display: block;
        }

        .guide-main {
          padding: 1.25rem 1rem;
        }
      }

      /* ── SVG asset ──────────────────────────────────────────── */
      .svg-asset {
        display: inline-block;
        vertical-align: middle;
      }

      .svg-asset--sm { width: 24px; height: 24px; }
      .svg-asset--md { width: 48px; height: 48px; }
      .svg-asset--lg { width: 96px; height: 96px; }
      .svg-asset--xl { width: 192px; height: 192px; }

      .svg-asset svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      .svg-asset-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .svg-asset-missing {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed var(--accent-dim);
        border-radius: 4px;
        color: var(--muted);
        font-size: 0.65rem;
        text-align: center;
        overflow: hidden;
      }

      .svg-asset-label {
        display: block;
        padding: 0.15rem 0.3rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }

      /* ── Guide section ─────────────────────────────────────────── */
      .guide-section {
        margin-bottom: 2rem;
      }

      .guide-section > h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
        margin: 0 0 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
      }

      /* ── Guide hero ───────────────────────────────────────────── */
      .guide-hero {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
      }

      .guide-hero h1 {
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--text);
        margin: 0 0 0.5rem;
      }

      .guide-hero-tagline {
        font-size: 0.95rem;
        color: var(--muted);
        margin: 0;
        line-height: 1.6;
      }

      /* ── Stat row ─────────────────────────────────────────────── */
      .guide-stat-row {
        display: flex;
        gap: 1.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
      }

      .guide-stat {
        display: flex;
        flex-direction: column;
        min-width: 100px;
      }

      .guide-stat-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--accent);
      }

      .guide-stat-label {
        font-size: 0.8rem;
        color: var(--muted);
        margin-top: 0.15rem;
      }

      .guide-muted {
        color: var(--muted);
        font-size: 0.875rem;
      }

      .guide-numeric {
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
      }

      /* ── Table wrap (responsive horizontal scroll) ────────────── */
      .guide-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 0.75rem;
      }

      .guide-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
      }

      .guide-table thead th {
        text-align: left;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }

      .guide-table tbody td {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        vertical-align: middle;
      }

      .guide-table-row:hover {
        background: rgba(255, 255, 255, 0.02);
      }

      .guide-table-name {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: var(--text);
      }

      /* ── Business card ────────────────────────────────────────── */
      .guide-business-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        transition: border-color 0.15s, background 0.15s;
      }

      .guide-business-card:hover {
        border-color: var(--accent-dim);
        background: rgba(212, 163, 58, 0.03);
      }

      .guide-business-card-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .guide-business-card-body {
        flex: 1;
        min-width: 0;
      }

      .guide-business-card-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
        margin: 0 0 0.35rem;
      }

      .guide-business-card-details {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .guide-business-card-stat {
        font-size: 0.8rem;
        color: var(--text);
      }

      .guide-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
      }

      /* ── Info / business card ─────────────────────────────────── */
      .guide-info-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
      }

      .guide-info-card-icon {
        flex-shrink: 0;
      }

      .guide-info-card-body {
        flex: 1;
        min-width: 0;
      }

      .guide-info-card-body h4 {
        margin: 0 0 0.25rem;
        font-size: 0.95rem;
        color: var(--text);
      }

      .guide-info-card-body p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--muted);
      }

      /* ── Numeric utility ──────────────────────────────────────── */
      .guide-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }

      /* ── Section body ─────────────────────────────────────────── */
      .guide-section-body {
        color: var(--muted);
        line-height: 1.65;
      }

      .guide-section-body p {
        margin: 0 0 0.75rem;
      }
      /* ── NPC card ─────────────────────────────────────────────────── */
      .npc-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        transition: border-color 0.15s, background 0.15s;
      }

      .npc-card:hover {
        border-color: var(--accent-dim);
        background: rgba(212, 163, 58, 0.03);
      }

      .npc-card-portrait {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
      }

      .npc-card-body {
        flex: 1;
        min-width: 0;
      }

      .npc-card-name {
        margin: 0 0 0.15rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
      }

      .npc-card-role {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--accent);
        background: rgba(212, 163, 58, 0.1);
        padding: 0.1rem 0.45rem;
        border-radius: 3px;
        margin-right: 0.5rem;
      }

      .npc-card-location {
        font-size: 0.8rem;
        color: var(--muted);
      }

      .npc-card-traits {
        margin: 0.35rem 0 0;
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.4;
        font-style: italic;
      }

      .npc-card-open {
        display: inline-block;
        margin-top: 0.35rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #4ade80;
      }

      /* ── Festival badges ───────────────────────────────────────────── */
      .festival-active-badge {
        display: inline-block;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.3);
        margin-left: 0.35rem;
        vertical-align: middle;
      }

      .festival-inactive-badge {
        display: inline-block;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        border: 1px solid var(--border);
        vertical-align: middle;
      }

      .festival-card--active {
        border-color: rgba(34, 197, 94, 0.3);
        background: rgba(34, 197, 94, 0.03);
      }

      /* ── Encounter tags ────────────────────────────────────────────── */
      .encounter-tag {
        display: inline-block;
        padding: 0.08rem 0.4rem;
        border-radius: 3px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0.1rem;
      }

      .encounter-tag--gain    { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
      .encounter-tag--loss    { background: rgba(239, 68, 68, 0.12); color: #f87171; }
      .encounter-tag--fame    { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
      .encounter-tag--shame   { background: rgba(239, 68, 68, 0.1); color: #f87171; }
      .encounter-tag--police  { background: rgba(139, 92, 246, 0.12); color: #a78bfa; }
      .encounter-tag--medical { background: rgba(236, 72, 153, 0.12); color: #f472b6; }
      .encounter-tag--time    { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
      .encounter-tag--risk    { background: rgba(239, 68, 68, 0.15); color: #f87171; }
      .encounter-tag--energy  { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
      .encounter-tag--none    { background: rgba(156, 163, 175, 0.12); color: #9ca3af; }

      /* ── Weather inline ────────────────────────────────────────────── */
      .weather-inline {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
      }

      .weather-label {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text);
      }

      /* ── Tips list ─────────────────────────────────────────────────── */
      .guide-tips-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .guide-tip-item {
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.55;
      }

      .guide-tip-item::before {
        content: "> ";
        color: var(--accent);
        font-weight: 700;
      }

      .guide-tip-item:last-child {
        border-bottom: none;
      }

      /* ── Festival countdown card ─────────────────────────────────── */
      .festival-countdown-card {
        display: flex;
        gap: 1.25rem;
        align-items: center;
        padding: 1.5rem;
        border: 2px solid var(--accent-dim);
        border-radius: 12px;
        background: rgba(212, 163, 58, 0.05);
      }

      .festival-countdown-card--today {
        border-color: #4ade80;
        background: rgba(34, 197, 94, 0.06);
      }

      .festival-countdown-icon {
        flex-shrink: 0;
      }

      .festival-countdown-body {
        flex: 1;
        min-width: 0;
      }

      .festival-countdown-name {
        margin: 0 0 0.35rem;
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text);
      }

      .festival-countdown-days {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--accent);
        margin: 0 0 0.5rem;
      }

      .festival-countdown-card--today .festival-countdown-days {
        color: #4ade80;
      }

      .festival-live-badge {
        display: inline-block;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.3);
        vertical-align: middle;
        animation: guide-dot-pulse 2s ease-in-out infinite;
      }

      /* ── Festival calendar grid ──────────────────────────────────── */
      .festival-calendar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
      }

      .festival-month-block {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        min-height: 120px;
      }

      .festival-month-name {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--accent);
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
      }

      .festival-month-empty {
        color: rgba(255, 255, 255, 0.15);
        font-size: 0.82rem;
        font-style: italic;
        margin: 0;
      }

      .festival-month-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .festival-month-item {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }

      .festival-month-item:last-child {
        border-bottom: none;
      }

      .festival-month-item-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .festival-month-item-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
      }

      .festival-month-item-name--active {
        color: #4ade80;
      }

      .festival-detail-date {
        font-size: 0.82rem;
        color: var(--accent);
        font-weight: 600;
        margin: 0.15rem 0 0.35rem;
      }

      /* ── Responsive: festival countdown on mobile ────────────────── */
      @media (max-width: 767px) {
        .festival-countdown-card {
          flex-direction: column;
          text-align: center;
        }

        .festival-calendar-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ── Filter bar ──────────────────────────────────────────────── */
      .guide-filter-bar {
        display: flex;
        gap: 0.35rem;
        flex-wrap: wrap;
        margin: 1rem 0 1.5rem;
      }

      .guide-filter-link {
        padding: 0.3rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.15s, background 0.15s, border-color 0.15s;
      }

      .guide-filter-link:hover {
        color: var(--text);
        border-color: var(--accent-dim);
      }

      .guide-filter-link--active {
        color: var(--accent);
        border-color: var(--accent-dim);
        background: rgba(212, 163, 58, 0.1);
      }

      /* ── Stat summary ────────────────────────────────────────────── */
      .guide-stat-summary {
        font-size: 0.9rem;
        color: var(--text);
        margin: 0 0 0.5rem;
        line-height: 1.5;
      }

      /* ── Category badge ──────────────────────────────────────────── */
      .guide-category-badge {
        display: inline-block;
        padding: 0.08rem 0.45rem;
        border-radius: 3px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .guide-category-badge--employer {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
      }

      .guide-category-badge--restaurant {
        background: rgba(236, 72, 153, 0.12);
        color: #f472b6;
      }

      .guide-category-badge--church {
        background: rgba(139, 92, 246, 0.12);
        color: #a78bfa;
      }

      .guide-category-badge--dive_site {
        background: rgba(34, 211, 238, 0.12);
        color: #22d3ee;
      }

      .guide-category-badge--hike {
        background: rgba(34, 197, 94, 0.12);
        color: #4ade80;
      }

      /* ── Difficulty badge ────────────────────────────────────────── */
      .guide-difficulty-badge {
        display: inline-block;
        padding: 0.08rem 0.45rem;
        border-radius: 3px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }

      .guide-difficulty--1 { background: rgba(34, 197, 94, 0.12);  color: #4ade80; }
      .guide-difficulty--2 { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
      .guide-difficulty--3 { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
      .guide-difficulty--4 { background: rgba(249, 115, 22, 0.12); color: #fb923c; }
      .guide-difficulty--5 { background: rgba(239, 68, 68, 0.12);  color: #f87171; }

      /* ── Tier stars ──────────────────────────────────────────────── */
      .guide-tier-stars {
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        color: var(--accent);
      }

      .guide-tier-stars-empty {
        color: var(--border);
      }

      /* ── Location icon ───────────────────────────────────────────── */
      .guide-location-icon {
        font-size: 0.75rem;
        margin-right: 0.1rem;
      }

      /* ── Meta / positive utilities ───────────────────────────────── */
      .guide-meta {
        color: var(--muted);
        font-style: italic;
      }

      .guide-positive {
        color: #4ade80;
      }

      .guide-hero-source {
        display: block;
        margin-top: 0.5rem;
      }
    </style>

/* ────────────────────────────────────────────────────────────────
   /guide-beta/now — "What's Happening Now" page
   ──────────────────────────────────────────────────────────────── */

      /* ══════════════════════════════════════════════════════════════
         NOW PAGE — flagship dashboard styles
         ══════════════════════════════════════════════════════════════ */

      /* ── HERO ─────────────────────────────────────────────────── */

      .guide-now-hero {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid var(--accent-dim);
      }

      .guide-now-hero-top {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        align-items: flex-start;
        margin-bottom: 1rem;
      }

      .guide-now-hero-time {
        flex: 0 0 auto;
        min-width: 200px;
      }

      .guide-now-hero-clock {
        margin-bottom: 0.15rem;
      }

      .guide-now-hero-hour {
        font-size: 3rem;
        font-weight: 800;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
        line-height: 1;
      }

      .guide-now-hero-date {
        color: var(--muted);
        font-size: 0.95rem;
        margin-top: 0.25rem;
      }

      .guide-now-hero-weekday {
        color: var(--accent);
        font-weight: 700;
      }

      .guide-now-hero-sep {
        margin: 0 0.4rem;
        color: var(--border);
      }

      .guide-now-hero-weather {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.25rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }

      .guide-now-hero-weather-info {
        display: flex;
        flex-direction: column;
      }

      .guide-now-hero-weather-label {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
      }

      .guide-now-hero-sun {
        font-size: 0.75rem;
        color: var(--muted);
        margin-top: 0.1rem;
      }

      .guide-now-hero-season {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .guide-now-season-badge {
        display: inline-block;
        padding: 0.2rem 0.75rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        width: fit-content;
      }

      .guide-now-season-badge--dry {
        background: rgba(251, 191, 36, 0.12);
        color: #fbbf24;
        border: 1px solid rgba(251, 191, 36, 0.25);
      }

      .guide-now-season-badge--wet {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
        border: 1px solid rgba(59, 130, 246, 0.25);
      }

      .guide-now-season-desc {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.45;
        max-width: 280px;
      }

      .guide-now-hero-tagline {
        font-size: 0.95rem;
        color: var(--muted);
        margin: 0.5rem 0 0.25rem;
        line-height: 1.6;
        font-style: italic;
      }

      /* ── Festival alert banner ────────────────────────────────── */

      .guide-now-festival-banner {
        margin-top: 1rem;
        padding: 0.85rem 1.25rem;
        border: 1px solid rgba(34, 197, 94, 0.3);
        border-radius: var(--radius);
        background: rgba(34, 197, 94, 0.05);
      }

      .guide-now-festival-banner-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #4ade80;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .guide-now-festival-banner-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4ade80;
        animation: guide-dot-pulse 2s ease-in-out infinite;
      }

      .guide-now-festival-banner-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }

      .guide-now-festival-banner-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.82rem;
        color: var(--text);
        padding: 0.2rem 0.55rem;
        background: rgba(34, 197, 94, 0.08);
        border-radius: 4px;
      }

      /* ── Status bar ───────────────────────────────────────────── */

      .guide-now-status-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
      }

      .guide-now-stat-card {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem 1.15rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        transition: border-color 0.2s, background 0.2s;
      }

      .guide-now-stat-card:hover {
        border-color: var(--accent-dim);
        background: rgba(212, 163, 58, 0.03);
      }

      .guide-now-stat-card-icon {
        flex-shrink: 0;
      }

      .guide-now-stat-card-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .guide-now-stat-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--accent);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
      }

      .guide-now-stat-label {
        font-size: 0.72rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-top: 0.15rem;
      }

      /* Accent colors per card type */
      .guide-now-stat-card--players  .guide-now-stat-value { color: #4ade80; }
      .guide-now-stat-card--time     .guide-now-stat-value { color: var(--accent); }
      .guide-now-stat-card--weather  .guide-now-stat-value { color: #60a5fa; }
      .guide-now-stat-card--festivals .guide-now-stat-value { color: #a78bfa; }

      @media (max-width: 767px) {
        .guide-now-status-bar {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 480px) {
        .guide-now-status-bar {
          grid-template-columns: 1fr;
        }
      }

      /* ── Headlines feed ───────────────────────────────────────── */

      .guide-now-headlines-feed {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }

      .guide-now-headline-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        transition: background 0.15s;
      }

      .guide-now-headline-item:last-child {
        border-bottom: none;
      }

      .guide-now-headline-item:hover {
        background: rgba(255, 255, 255, 0.02);
      }

      .guide-now-headline-item--empty {
        color: var(--muted);
        font-style: italic;
      }

      .guide-now-headline-topic {
        flex-shrink: 0;
        display: inline-block;
        padding: 0.1rem 0.5rem;
        border-radius: 3px;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.1rem;
      }

      .tag--radio      { background: rgba(96, 165, 250, 0.12);  color: #60a5fa;  }
      .tag--front_page { background: rgba(239, 68, 68, 0.12);   color: #f87171;  }
      .tag--filler     { background: rgba(156, 163, 175, 0.12); color: #9ca3af; }
      .tag--rumor      { background: rgba(251, 191, 36, 0.12);  color: #fbbf24; }

      .guide-now-headline-text {
        flex: 1;
        font-size: 0.88rem;
        color: var(--text);
        line-height: 1.5;
      }

      /* ── Quiet day ────────────────────────────────────────────── */

      .guide-now-quiet-day {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        border: 1px dashed var(--border);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .guide-now-quiet-day p {
        margin: 0;
        font-size: 0.92rem;
        color: var(--muted);
        font-style: italic;
        line-height: 1.5;
      }

      .guide-now-quiet-day-icon {
        flex-shrink: 0;
        opacity: 0.5;
      }

      /* ── Encounters list ──────────────────────────────────────── */

      .guide-now-encounters-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .guide-now-encounter-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .guide-now-encounter-item strong {
        display: block;
        font-size: 0.9rem;
        color: var(--text);
        margin-bottom: 0.15rem;
      }

      /* ── Price grid ───────────────────────────────────────────── */

      .guide-now-price-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.6rem;
        margin-bottom: 1.5rem;
      }

      .guide-now-price-card {
        display: flex;
        flex-direction: column;
        padding: 0.65rem 0.85rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
        transition: border-color 0.15s;
      }

      .guide-now-price-card:hover {
        border-color: var(--accent-dim);
      }

      .guide-now-price-label {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        margin-bottom: 0.2rem;
      }

      .guide-now-price-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text);
        font-variant-numeric: tabular-nums;
      }

      /* ── Market movers ────────────────────────────────────────── */

      .guide-now-market-movers {
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
      }

      .guide-now-subhead {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text);
        margin: 0 0 0.4rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      /* ── Player distribution ──────────────────────────────────── */

      .guide-now-distribution {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border: 1px dashed var(--border);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .guide-now-distribution p {
        margin: 0;
      }

      /* ═══════════════════════════════════════════════════════════
         END NOW PAGE STYLES
         ═══════════════════════════════════════════════════════════ */

/* ── Mini-map ──────────────────────────────────────────────────── */
.guide-mini-map { position: relative; aspect-ratio: 5 / 3; background: #f0e6d2; border-radius: 8px; overflow: hidden; }
.guide-mini-map--sm { width: 160px; }
.guide-mini-map--md { width: 280px; }
.guide-mini-map--lg { width: 480px; }
.guide-map-pin { position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.guide-map-pin--business  { background: #d97706; }
.guide-map-pin--npc       { background: #2563eb; }
.guide-map-pin--event     { background: #dc2626; }
.guide-map-pin--player    { background: #16a34a; }
.guide-map-pin--plot      { background: #65a30d; }
.guide-map-pin--highlight { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(255,255,255,0.7); z-index: 2; }

/* ── Tick clock ────────────────────────────────────────────────── */
.guide-tick-clock { display: flex; flex-direction: column; gap: 0.15rem; }
.guide-tick-time { font-size: 3rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.guide-tick-date { color: var(--muted); font-size: 0.95rem; }

/* ── Weather badge ─────────────────────────────────────────────── */
.guide-weather-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-weather-badge span { font-size: 1rem; font-weight: 700; color: var(--text); }

/* ── Event feed ────────────────────────────────────────────────── */
.guide-event-feed { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.guide-event { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.guide-event:last-child { border-bottom: none; }
.guide-event-time { flex-shrink: 0; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.guide-event-title { flex: 1; font-size: 0.88rem; color: var(--text); line-height: 1.4; }

/* ── Minigame preview card ─────────────────────────────────────── */
.guide-minigame-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color 0.15s; }
.guide-minigame-card:hover { border-color: var(--accent-dim); }
.guide-minigame-bg { flex-shrink: 0; }
.guide-minigame-meta h4 { margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--text); }
.guide-minigame-meta p { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* ── Info card extras ──────────────────────────────────────────── */
.guide-info-card-meta { color: var(--muted); font-size: 0.8rem; }
.guide-info-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(212, 163, 58, 0.1); color: var(--accent); }
.guide-info-card-traits { color: var(--muted); font-size: 0.82rem; line-height: 1.4; font-style: italic; margin-top: 0.35rem; }
.guide-info-card-open { display: inline-block; margin-top: 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4ade80; }