/* === module: _global === */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #0a0a0f;
        color: #e0e0e0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .top-bar {
        background: #111118;
        border-bottom: 1px solid #222;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
      }

      /* ── Battery Progress Bar ── */
      .battery-bar {
        display: none;
        background: #0c0c14;
        border-bottom: 1px solid #1a1a2a;
        padding: 8px 20px;
        flex-shrink: 0;
      }
      .battery-bar.visible { display: block; }
      .battery-cells {
        display: flex;
        align-items: center;
        gap: 3px;
        max-width: 600px;
        margin: 0 auto;
      }
      .battery-divider {
        width: 1px;
        height: 28px;
        background: #333;
        margin: 0 6px;
        flex-shrink: 0;
      }
      .battery-cell {
        flex: 1;
        height: 28px;
        border-radius: 4px;
        border: 1.5px solid #2a2a3a;
        background: #12121e;
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s;
      }
      .battery-cell .cell-fill {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 0%;
        background: #3a6ea5;
        border-radius: 2px;
        transition: width 0.4s ease-out;
      }
      .battery-cell.completed {
        border-color: #2a3a2a;
      }
      .battery-cell.completed .cell-fill {
        width: 100%;
        background: #4a5a4a;
      }
      .battery-cell.active {
        border-color: #5b9bd5;
        box-shadow: 0 0 8px #5b9bd520;
      }
      .battery-cell.active .cell-fill {
        background: linear-gradient(90deg, #3a6ea5, #5b9bd5);
      }
      .battery-cell .cell-label {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        pointer-events: none;
      }
      .battery-cell .cell-label .block-id {
        font-size: 9px;
        color: #555;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      .battery-cell.active .cell-label .block-id { color: #aaccee; }
      .battery-cell.completed .cell-label .block-id { color: #6a7a6a; }
      .battery-cell .cell-label .topic-name {
        font-size: 8px;
        color: #444;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .battery-cell.active .cell-label .topic-name { color: #8ab8dd; }
      .battery-cell.completed .cell-label .topic-name { color: #5a6a5a; }
      .battery-status {
        text-align: center;
        font-size: 10px;
        color: #555;
        margin-top: 4px;
      }

      .top-bar h1 {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
      }

      .stats {
        display: flex;
        gap: 20px;
        font-size: 13px;
      }
      .stat-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .stat-label {
        color: #888;
      }
      .stat-value {
        color: #fff;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .stat-value.viewership {
        color: #ff6b6b;
      }
      .stat-value.budget {
        color: #51cf66;
      }

      #status-msg {
        color: #888;
        font-size: 12px;
        max-width: 300px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* ── Playback Speed Control ── */
      .speed-control {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        background: #1a1a22;
        border: 1px solid #2a2a3a;
        border-radius: 6px;
      }
      .speed-control-label {
        font-size: 11px;
        color: #666;
        white-space: nowrap;
      }
      .speed-btn {
        padding: 3px 10px;
        font-size: 11px;
        border: 1px solid #333;
        background: #1a1a22;
        color: #888;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .speed-btn:hover {
        border-color: #555;
        color: #aaa;
      }
      .speed-btn.active {
        border-color: #4a6fa5;
        background: #1a2236;
        color: #5b9bd5;
        font-weight: 600;
      }

      .continue-btn {
        width: 100%;
        margin-top: 16px;
        padding: 12px 14px;
        border: 1px solid #51cf66;
        background: #51cf6618;
        color: #8ce99a;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s;
        display: none;
      }
      .continue-btn:hover {
        background: #51cf6630;
      }
      .continue-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .continue-btn.visible {
        display: block;
      }

      .intermission-banner {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: linear-gradient(90deg, #f0c04015, #f0c04008);
        border: 1px solid #f0c04040;
        border-radius: 8px;
        color: #f0c040;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
        animation: bannerPulse 2.5s ease infinite;
      }
      .intermission-banner.on {
        display: flex;
      }
      .intermission-banner .ep-num {
        font-size: 14px;
        font-weight: 800;
      }
      @keyframes bannerPulse {
        0%,
        100% {
          border-color: #f0c04040;
        }
        50% {
          border-color: #f0c04080;
          box-shadow: 0 0 12px #f0c04018;
        }
      }

/* === end module: _global === */

/* === module: _layout === */
      .main {
        display: flex;
        flex: 1;
        overflow: hidden;
      }

      /* ─── Left Panel ─── */
      .left-panel {
        width: 420px;
        flex-shrink: 0;
        border-right: 1px solid #222;
        display: none;
        flex-direction: column;
        overflow: hidden;
      }

      .character-list {
        display: none;
      }

      .char-panel {
        background: #151520;
        border: 1px solid #2a2a35;
        border-radius: 10px;
        overflow: hidden;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .char-panel:hover {
        border-color: #444;
      }
      .char-panel.speaking {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
      }

      .char-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        cursor: pointer;
        user-select: none;
      }

      .char-header .char-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
      }

      .char-info {
        flex: 1;
        min-width: 0;
      }
      .char-header .char-name {
        font-size: 13px;
        font-weight: 600;
      }
      .char-desire {
        font-size: 10px;
        color: #aaa;
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .char-facade-mini {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }
      .char-facade-mini .fm-bar {
        width: 48px;
        height: 5px;
        background: #222;
        border-radius: 3px;
        overflow: hidden;
      }
      .char-facade-mini .fm-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
      }
      .char-facade-mini .fm-val {
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        min-width: 24px;
        text-align: right;
      }

      .char-badges {
        display: flex;
        gap: 3px;
        flex-shrink: 0;
      }
      .badge {
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 3px;
        background: #2a2a35;
        color: #aaa;
      }
      .badge.revealed {
        background: #ff6b6b22;
        color: #ff6b6b;
      }
      .badge.danger {
        background: #ff6b6b15;
        color: #ff6b6b;
      }
      .badge.condition {
        background: #4dabf715;
        color: #74c0fc;
      }

      .char-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .char-panel.expanded .char-body {
        max-height: 600px;
      }

      .char-body-inner {
        padding: 0 12px 10px;
      }

      .char-section-title {
        font-size: 10px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 8px;
        margin-bottom: 4px;
      }

      .char-conditions {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        margin-bottom: 4px;
      }

      .char-debug {
        background: #0d0d14;
        border: 1px solid #1a1a2a;
        border-radius: 6px;
        padding: 8px;
        margin-top: 6px;
        max-height: 200px;
        overflow-y: auto;
      }

      .debug-label {
        font-size: 10px;
        color: #555;
        font-weight: 600;
        margin-bottom: 3px;
      }

      .debug-text {
        font-size: 10px;
        color: #888;
        font-family: "SF Mono", "Fira Code", monospace;
        white-space: pre-wrap;
        word-break: break-all;
        line-height: 1.4;
      }

      .debug-text.prompt {
        color: #7c8fa8;
      }
      .debug-text.response {
        color: #a89b7c;
      }

/* === end module: _layout === */

/* === module: _action_panel === */
      /* ─── Action Panel Overlay ─── */
      .action-panel-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        justify-content: center;
        align-items: center;
      }
      .action-panel-overlay.visible {
        display: flex;
      }
      /* Planner-only unified module shell (hidden from player-facing UI) */
      .module-shell {
        display: none;
      }
      .module-shell.active {
        display: none;
      }
      .action-panel {
        background: #16161e;
        border: 1px solid #333;
        border-radius: 16px;
        padding: 24px 32px;
        width: 480px;
        max-width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
        animation: panelSlideIn 0.25s ease-out;
      }
      @keyframes panelSlideIn {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      .action-panel.continue-only .action-panel-title,
      .action-panel.continue-only .action-tabs,
      .action-panel.continue-only .action-content,
      .action-panel.continue-only .action-error,
      .action-panel.continue-only .pending-indicator { display: none !important; }

      .action-panel-title {
        font-size: 18px;
        font-weight: 700;
        color: #e0e0e0;
        margin-bottom: 16px;
        text-align: center;
        letter-spacing: 0.5px;
      }
      .action-panel h3 {
        font-size: 12px;
        color: #888;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .action-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 10px;
      }
      .action-tab {
        flex: 1;
        padding: 6px 8px;
        border: 1px solid #333;
        background: transparent;
        color: #aaa;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
      }
      .action-tab:hover {
        border-color: #555;
        color: #fff;
      }
      .action-tab.active {
        background: #fff;
        color: #000;
        border-color: #fff;
      }
      .action-content {
        display: none;
      }
      .action-content.active {
        display: block;
      }
      .char-checkbox-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
      }
      .char-checkbox {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border: 1px solid #333;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        transition: all 0.2s;
        user-select: none;
      }
      .char-checkbox.selected {
        border-color: var(--char-color, #fff);
        background: color-mix(
          in srgb,
          var(--char-color, #fff) 15%,
          transparent
        );
        color: #fff;
      }
      .char-checkbox input {
        display: none;
      }
      .topic-select {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
      }
      .topic-btn {
        flex: 1;
        padding: 6px;
        border: 1px solid #333;
        background: transparent;
        color: #aaa;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
      }
      .topic-btn.selected {
        background: #333;
        color: #fff;
        border-color: #555;
      }
      .execute-btn {
        width: 100%;
        padding: 8px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
      }
      .execute-btn:hover {
        opacity: 0.9;
      }
      .execute-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .execute-btn.arrange {
        background: #339af0;
        color: #fff;
      }
      .execute-btn.reveal {
        background: #ff6b6b;
        color: #fff;
      }
      .reveal-select {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 10px;
      }
      .reveal-char-btn {
        padding: 4px 10px;
        border: 1px solid #333;
        background: transparent;
        color: #aaa;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        transition: all 0.2s;
      }
      .reveal-char-btn:hover {
        border-color: #ff6b6b;
        color: #ff6b6b;
      }
      .reveal-char-btn.selected {
        background: #ff6b6b22;
        border-color: #ff6b6b;
        color: #ff6b6b;
      }
      .reveal-char-btn.used {
        opacity: 0.3;
        cursor: not-allowed;
        text-decoration: line-through;
      }

/* === end module: _action_panel === */

/* === module: _debug === */
      /* ── Debug Bar ── */
      #debug-bar {
        position: fixed; top: 0; right: 0; z-index: 99999;
        background: #1a1a2e; border: 1px solid #444; border-radius: 0 0 0 8px;
        padding: 4px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; opacity: 0.7;
      }
      #debug-bar:hover { opacity: 1; }
      #debug-bar select {
        background: #111; color: #ccc; border: 1px solid #555;
        border-radius: 4px; padding: 2px 4px; font-size: 11px;
      }
      #debug-bar button {
        background: #333; color: #ccc; border: 1px solid #555;
        border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer;
      }

/* === end module: _debug === */

/* === module: _preset === */
      /* ── Preset Overlay ── */
      .preset-overlay {
        position: fixed; inset: 0; z-index: 1100;
        background: rgba(5,5,15,0.95); backdrop-filter: blur(10px);
        display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px;
      }
      .preset-overlay.active { display: flex; }
      .preset-title { color: #e0e0e0; font-size: 22px; margin-bottom: 8px; }
      .preset-subtitle { color: #888; font-size: 14px; margin-bottom: 24px; }
      .preset-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
      .preset-card {
        width: 260px; background: #111128; border: 2px solid #2a2a4a; border-radius: 12px;
        padding: 20px; cursor: pointer; transition: all 0.2s;
      }
      .preset-card:hover { border-color: #60c8e8; }
      .preset-card.selected { border-color: #e8a040; box-shadow: 0 0 16px rgba(232,160,64,0.2); }
      .preset-card h3 { color: #e0e0e0; font-size: 16px; margin: 0 0 8px; }
      .preset-card p { color: #888; font-size: 13px; margin: 0; line-height: 1.5; }
      .preset-confirm-btn {
        margin-top: 24px; padding: 10px 32px; background: #1a3a4a; border: 1px solid #60c8e8;
        color: #60c8e8; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s;
      }
      .preset-confirm-btn:hover { background: #2a4a5a; }
      .preset-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* === end module: _preset === */

/* === module: _cinema_effects === */
      .collect-thought-btn {
        margin-left: 12px;
        padding: 4px 10px;
        background: #2a2a3a;
        border: 1px solid #3a3a4a;
        border-radius: 6px;
        color: #e8a040;
        font-size: 11px;
        cursor: pointer;
        transition: all 0.2s;
        vertical-align: middle;
      }
      .collect-thought-btn:hover {
        background: #3a3a4a;
        border-color: #e8a040;
        box-shadow: 0 0 8px rgba(232, 160, 64, 0.2);
        transform: scale(1.05);
      }

      @keyframes subtitleFade {
        0% {
          opacity: 0;
          transform: translateY(8px);
          filter: blur(1px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      .cinema-vignette {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            circle at center,
            transparent 38%,
            rgba(0, 0, 0, 0.32) 100%
          ),
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.28),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.28)
          );
        z-index: 1;
      }
      .blackout-overlay {
        position: absolute;
        inset: 0;
        background: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
        z-index: 4;
      }
      .blackout-overlay.active {
        opacity: 0.5;
      }
      .cut-wipe {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 28%;
        left: -32%;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.12),
          rgba(255, 255, 255, 0)
        );
        pointer-events: none;
        z-index: 3;
      }
      .cut-wipe.active {
        animation: cutWipeMove 360ms ease-out;
      }
      @keyframes cutWipeMove {
        0% {
          left: -32%;
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          left: 104%;
          opacity: 0;
        }
      }

      .processing {
        pointer-events: none;
        opacity: 0.6;
      }

      .pending-indicator {
        display: none;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        margin-top: 8px;
        background: #1a1a2e;
        border: 1px solid #f0c04040;
        border-radius: 6px;
        font-size: 12px;
        color: #f0c040;
      }
      .pending-indicator.visible {
        display: flex;
      }
      .pending-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid #f0c04030;
        border-top-color: #f0c040;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .action-error {
        display: none;
        padding: 8px 12px;
        margin-top: 8px;
        background: #2a0a0a;
        border: 1px solid #ff6b6b55;
        border-radius: 6px;
        font-size: 12px;
        color: #ff8787;
      }
      .action-error.visible {
        display: block;
      }

      .stage-loading {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 5;
        background: rgba(10, 10, 15, 0.85);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
      .stage-loading.visible {
        display: flex;
      }
      .stage-loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid #ffffff20;
        border-top-color: #f0c040;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      .stage-loading-text {
        font-size: 14px;
        color: #f0c040;
        letter-spacing: 0.5px;
      }

      .rel-empty {
        font-size: 10px;
        color: #555;
        padding: 8px 0;
        text-align: center;
      }
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 3px;
      }

/* === end module: _cinema_effects === */

/* === module: _briefing === */
      /* ─── Character Briefing Screen ─── */
      .briefing-overlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: #08080d;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        padding: 40px 20px 60px;
        transition:
          opacity 0.4s,
          transform 0.4s;
      }
      .briefing-overlay.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
      }
      .briefing-title {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px;
        letter-spacing: 1px;
      }
      .briefing-subtitle {
        font-size: 13px;
        color: #888;
        margin-bottom: 32px;
      }
      .briefing-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        max-width: 960px;
        width: 100%;
        margin-bottom: 36px;
      }
      @media (max-width: 800px) {
        .briefing-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .brief-card {
        background: #111118;
        border: 2px solid #222;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition:
          border-color 0.2s,
          transform 0.2s,
          opacity 0.2s,
          box-shadow 0.2s;
        cursor: pointer;
        position: relative;
      }
      .brief-card:hover {
        border-color: #444;
        transform: translateY(-2px);
      }
      .brief-card.selected {
        border-color: #4dabf7;
        box-shadow: 0 0 16px #4dabf730;
      }
      .brief-card.selected::after {
        content: "✓";
        position: absolute;
        top: 8px;
        right: 10px;
        background: #4dabf7;
        color: #fff;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
      }
      .brief-card.dimmed {
        opacity: 0.4;
        pointer-events: none;
      }
      .brief-card-head {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .brief-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
      }
      .brief-name {
        font-size: 15px;
        font-weight: 700;
      }
      .brief-age {
        font-size: 10px;
        color: #666;
      }
      .brief-surface {
        font-size: 11px;
        color: #aaa;
        line-height: 1.5;
      }
      .brief-meta {
        font-size: 10px;
        color: #74c0fc;
        padding: 4px 8px;
        background: #74c0fc10;
        border-radius: 6px;
        line-height: 1.4;
      }
      .brief-tags {
        font-size: 10px;
        color: #bbb;
        line-height: 1.5;
      }
      .brief-secret {
        font-size: 11px;
        padding: 8px 10px;
        border-radius: 8px;
        line-height: 1.5;
        margin-top: auto;
      }
      .brief-secret.known {
        background: #ff6b6b12;
        border: 1px solid #ff6b6b30;
        color: #ffa8a8;
      }
      .brief-secret.unknown {
        background: #ffffff06;
        border: 1px dashed #333;
        color: #555;
        font-style: italic;
      }
      .brief-secret-label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 3px;
        display: block;
      }
      .brief-secret.known .brief-secret-label {
        color: #ff6b6b;
      }
      .brief-secret.unknown .brief-secret-label {
        color: #555;
      }
      .briefing-enter-btn {
        padding: 12px 40px;
        background: linear-gradient(135deg, #4dabf7, #3b5bdb);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        letter-spacing: 1px;
        transition:
          transform 0.15s,
          box-shadow 0.15s;
      }
      .briefing-enter-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 20px #4dabf730;
      }
      .briefing-hint {
        margin-top: 12px;
        font-size: 11px;
        color: #555;
      }

/* === end module: _briefing === */

/* === module: _reveal_modal === */
      /* ─── Reveal Modal ─── */
      .reveal-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 950;
        background: rgba(5, 5, 10, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      .reveal-modal-overlay.on {
        opacity: 1;
        pointer-events: auto;
      }
      .reveal-modal {
        background: #151520;
        border: 1px solid #333;
        border-radius: 16px;
        padding: 28px 32px;
        max-width: 420px;
        width: 90%;
        text-align: center;
      }
      .reveal-modal-name {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 6px;
      }
      .reveal-modal-label {
        font-size: 11px;
        color: #ff6b6b;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 12px;
      }
      .reveal-modal-secret {
        font-size: 15px;
        line-height: 1.6;
        color: #ffa8a8;
        background: #ff6b6b10;
        border: 1px solid #ff6b6b25;
        border-radius: 10px;
        padding: 14px 18px;
        margin-bottom: 20px;
      }
      .reveal-modal-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
      }
      .reveal-modal-actions button {
        padding: 8px 24px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid #333;
        font-family: inherit;
      }
      .reveal-confirm-btn {
        background: #ff6b6b20;
        color: #ffa8a8;
        border-color: #ff6b6b40 !important;
      }
      .reveal-confirm-btn:hover {
        background: #ff6b6b30;
      }
      .reveal-cancel-btn {
        background: transparent;
        color: #888;
      }
      .reveal-cancel-btn:hover {
        background: #ffffff08;
      }

/* === end module: _reveal_modal === */