/* ==========================================================================
   青梧叙事 · 深色主题
   ==========================================================================

   为什么不用 Bootstrap 自带的暗色模式：模板带的是 5.1.0，
   而 `data-bs-theme="dark"` 是 5.3 才加的。所以这里用 CSS 变量覆盖它的默认样式 ——
   好处是**只改这一个文件**，玩家端和录入后台一起变色，标记一行都不用动。

   配色思路：近黑的冷蓝做底（宿舍楼夜里的感觉），
   暖琥珀色只用在「线索 / 关键信息」上 —— 整个界面就这一处亮色，
   玩家的注意力自然被引到该看的地方。
   ========================================================================== */

:root {
    /* 底色：不用纯黑。纯黑在手机上对比过强、看久了眼睛累，而且没有"空间感" */
    --wy-bg: #0e1116;
    --wy-bg-glow: #161c25;

    /* 面：卡片比底色亮一档，靠亮度差而不是边框来分层 */
    --wy-surface: #171b21;
    --wy-surface-2: #1e242c;
    --wy-surface-3: #252c35;

    --wy-border: #2b333d;
    --wy-border-soft: #222932;

    /* 正文色特意调得比"看起来刚好"更亮一档：
       深色底上人眼对暗部不敏感，屏幕上觉得够了，换个光线或换台显示器就发灰。
       宁可比目标亮一点 —— 觉得刺眼比看不清好调。 */
    --wy-text: #e8edf2;
    --wy-text-strong: #f7fafc;

    /* 辅助文字也跟着提亮，但保持明显低于正文 ——
       层级不能丢，否则说明文字会和正文抢注意力 */
    --wy-muted: #9aa5b3;

    /* 唯一的强调色：线索、关键标记 */
    --wy-accent: #c9a227;
    --wy-accent-soft: rgba(201, 162, 39, 0.12);
    --wy-accent-line: rgba(201, 162, 39, 0.45);

    --wy-primary: #4a7ea6;
    --wy-primary-hover: #5a8fb8;
    --wy-danger: #a8493f;
    --wy-success: #4a7c59;
    --wy-info: #3d6b7a;
}

/* ── 基础 ─────────────────────────────────────────────────── */

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    /* 文字游戏是"读"的，桌面上给到 17px 才不费眼 */
    html { font-size: 17px; }
}

body {
    margin-bottom: 60px;
    background-color: var(--wy-bg);
    background-image: radial-gradient(circle at 50% -20%, var(--wy-bg-glow) 0%, transparent 60%);
    background-repeat: no-repeat;
    color: var(--wy-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--wy-text-strong); }

a { color: var(--wy-primary-hover); text-decoration: none; }
a:hover { color: #7fb0d4; text-decoration: underline; }

hr { border-color: var(--wy-border); opacity: 1; }

.text-muted { color: var(--wy-muted) !important; }

/* 焦点环：默认的白色阴影在深色底上很刺眼 */
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(74, 126, 166, 0.45);
    border-color: var(--wy-primary);
}

/* ── 导航栏 ───────────────────────────────────────────────── */

.navbar {
    background-color: rgba(14, 17, 22, 0.94) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--wy-border-soft);
}

.navbar-dark .navbar-nav .nav-link { color: var(--wy-muted); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: var(--wy-text-strong); }

.navbar-text { color: var(--wy-muted) !important; }

/* ── 卡片 ─────────────────────────────────────────────────── */

.card {
    background-color: var(--wy-surface);
    border: 1px solid var(--wy-border);
    border-radius: 10px;
    color: var(--wy-text);
}

.card-body { color: var(--wy-text); }

.card-header, .card-footer {
    background-color: var(--wy-surface-2);
    border-color: var(--wy-border);
}

/* ── 按钮 ─────────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--wy-primary);
    border-color: var(--wy-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--wy-primary-hover);
    border-color: var(--wy-primary-hover);
}
.btn-primary:disabled { background-color: #35505f; border-color: #35505f; }

.btn-outline-primary { color: var(--wy-primary-hover); border-color: var(--wy-primary); }
.btn-outline-primary:hover { background-color: var(--wy-primary); color: #fff; }

.btn-outline-secondary { color: var(--wy-muted); border-color: var(--wy-border); }
.btn-outline-secondary:hover {
    background-color: var(--wy-surface-3);
    color: var(--wy-text-strong);
    border-color: var(--wy-border);
}

.btn-outline-danger { color: #d4796e; border-color: var(--wy-danger); }
.btn-outline-danger:hover { background-color: var(--wy-danger); color: #fff; }

.btn-outline-warning { color: var(--wy-accent); border-color: var(--wy-accent-line); }
.btn-outline-warning:hover { background-color: var(--wy-accent); color: #1a1f26; }

.btn-success { background-color: var(--wy-success); border-color: var(--wy-success); }

/* 「已看过的调查点」用灰底而不是描边——一眼能区分 */
.btn-outline-secondary:disabled, .btn.disabled {
    opacity: 0.55;
    color: var(--wy-muted);
}

/* ── 表单（录入后台用得多）─────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--wy-surface-2);
    border: 1px solid var(--wy-border);
    color: var(--wy-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--wy-surface-2);
    color: var(--wy-text);
}
.form-control::placeholder { color: #5a6472; }
.form-control:disabled, .form-select:disabled { background-color: #12161b; color: var(--wy-muted); }

.form-select {
    /* 深色底上要用浅色箭头，否则看不见 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a94a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-text { color: var(--wy-muted); }
.form-label { color: var(--wy-text); }

.form-check-input {
    background-color: var(--wy-surface-2);
    border-color: var(--wy-border);
}
.form-check-input:checked {
    background-color: var(--wy-primary);
    border-color: var(--wy-primary);
}
.form-check-label { color: var(--wy-text); }

.input-group-text {
    background-color: var(--wy-surface-3);
    border-color: var(--wy-border);
    color: var(--wy-muted);
}

/* ── 表格（录入后台）───────────────────────────────────────── */

.table { color: var(--wy-text); border-color: var(--wy-border); }
.table > :not(caption) > * > * { border-color: var(--wy-border-soft); }
.table-hover > tbody > tr:hover > * { background-color: var(--wy-surface-2); color: var(--wy-text); }
.table-light, .table > thead.table-light > tr > th {
    background-color: var(--wy-surface-2);
    color: var(--wy-muted);
    border-color: var(--wy-border);
}

/* ── 徽章：保持浅底深字，在暗界面上是必要的"亮点" ─────────── */

.badge.bg-light {
    background-color: var(--wy-surface-3) !important;
    color: var(--wy-muted) !important;
    border-color: var(--wy-border) !important;
}
.badge.bg-secondary { background-color: #3a444f !important; }
.badge.bg-warning { background-color: var(--wy-accent) !important; color: #1a1f26 !important; }
.badge.bg-info { background-color: #3d6b7a !important; color: #dff0f5 !important; }
.badge.bg-success { background-color: var(--wy-success) !important; }
.badge.bg-primary { background-color: var(--wy-primary) !important; }

/* ── 提示条 ───────────────────────────────────────────────── */

.alert { border-radius: 10px; border: 1px solid var(--wy-border); }
.alert-info {
    background-color: rgba(61, 107, 122, 0.18);
    border-color: rgba(61, 107, 122, 0.5);
    color: #b8d8e2;
}
.alert-warning {
    background-color: var(--wy-accent-soft);
    border-color: var(--wy-accent-line);
    color: #e8d9a8;
}
.alert-success {
    background-color: rgba(74, 124, 89, 0.18);
    border-color: rgba(74, 124, 89, 0.5);
    color: #b6d9c2;
}
.alert-danger {
    background-color: rgba(168, 73, 63, 0.18);
    border-color: rgba(168, 73, 63, 0.5);
    color: #e8b5ae;
}
.alert-secondary {
    background-color: var(--wy-surface-2);
    border-color: var(--wy-border);
    color: var(--wy-muted);
}
.alert-link { color: inherit; font-weight: 600; }

/* ── 页签 / 面包屑 / 进度条 ───────────────────────────────── */

.nav-pills .nav-link { color: var(--wy-muted); }
.nav-pills .nav-link:hover { color: var(--wy-text); background-color: var(--wy-surface-2); }
.nav-pills .nav-link.active {
    background-color: var(--wy-primary);
    color: #fff;
}

.breadcrumb { --bs-breadcrumb-divider-color: var(--wy-muted); }
.breadcrumb-item a { color: var(--wy-muted); }
.breadcrumb-item.active { color: var(--wy-text); }

.progress { background-color: var(--wy-surface-3); }
.progress-bar.bg-warning { background-color: var(--wy-accent) !important; }

/* ── 实用类覆盖 ───────────────────────────────────────────────
   页面里用了不少 bg-light / bg-white 做分区。逐个改标记太啰嗦，
   这里直接把它们映射到深色面 —— 但**排除徽章**，徽章要保持浅底。
   ─────────────────────────────────────────────────────────── */

.bg-light:not(.badge), .bg-white:not(.badge) {
    background-color: var(--wy-surface) !important;
}

/* ⚠️ Bootstrap 的 .text-body / .text-dark 是给**浅色背景**设计的
   （#212529，而且带 !important），在深色主题下会造成「深底深字」——画面全黑。
   这类工具类不会报错、也不会在 HTML 里显形，只有肉眼才能发现，
   所以这里直接夺回控制权。

   注意 .badge 要排除：徽章是浅底深字，那是故意的。 */
.text-body, .text-black { color: var(--wy-text) !important; }
.text-dark:not(.badge):not(.btn) { color: var(--wy-text) !important; }

.border { border-color: var(--wy-border) !important; }
.border-top { border-color: var(--wy-border) !important; }
.border-bottom { border-color: var(--wy-border) !important; }
.border-start.border-warning { border-color: var(--wy-accent) !important; }
.border-start.border-success { border-color: var(--wy-success) !important; }
.border-start.border-secondary { border-color: var(--wy-border) !important; }

.border-danger { border-color: var(--wy-danger) !important; }
.border-warning { border-color: var(--wy-accent-line) !important; }

/* ── 正文：整个游戏最该打磨的地方 ─────────────────────────── */

.story-body {
    /* 行高 1.9：中文长段落靠行距呼吸，太挤读不下去 */
    line-height: 1.95;
    font-size: 1.06rem;
    color: var(--wy-text);
    letter-spacing: 0.02em;
}

/* 页脚 */
footer {
    background-color: transparent !important;
    border-color: var(--wy-border-soft) !important;
}

/* ── 弹窗（系统说明用）─────────────────────────────────────── */

.modal-content {
    background-color: var(--wy-surface);
    border: 1px solid var(--wy-border);
    border-radius: 12px;
    color: var(--wy-text);
}

.modal-header, .modal-footer { border-color: var(--wy-border); }

/* Bootstrap 的 .btn-close 是个白色 X 的图片，
   在深色底上用 filter 反相成浅色，否则完全看不见 */
.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.6;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-backdrop.show { opacity: 0.72; }

/* ── 系统说明：分步翻页，不是一长条滚动 ─────────────────────
   全堆在一个框里读起来像产品说明书。拆成几步，一步一屏，
   字放大、行距拉开 —— 让人"读进去"，而不是"扫过去"。
   ─────────────────────────────────────────────────────────── */

.notice-steps {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.notice-steps .step {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.45rem 0.25rem;
    border-radius: 8px;
    background: var(--wy-surface-2);
    color: var(--wy-muted);
    border: 1px solid transparent;
    transition: all 0.15s;
}

.notice-steps .step.active {
    background: var(--wy-accent-soft);
    color: var(--wy-accent);
    border-color: var(--wy-accent-line);
    font-weight: 600;
}

.notice-steps .step.done { color: var(--wy-text); }

/* 一次只显示一屏 */
.notice-pane { display: none; }
.notice-pane.active { display: block; }

/* 正文：比普通正文再大一档，行距也更松 —— 这段是要人读的 */
.notice-body {
    white-space: pre-wrap;
    font-size: 1.12rem;
    line-height: 2.05;
    color: var(--wy-text);
    letter-spacing: 0.02em;
}

/* 准则那几行是「条目」不是「段落」，行距可以紧一点、字号再大一点 */
.notice-body.is-list {
    font-size: 1.15rem;
    line-height: 1.75;
}

.notice-lead {
    font-size: 0.85rem;
    color: var(--wy-muted);
    margin-bottom: 1.25rem;
}

/* 滚动条：默认的浅色滚动条在暗界面上非常突兀 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wy-bg); }
::-webkit-scrollbar-thumb {
    background: var(--wy-surface-3);
    border-radius: 5px;
    border: 2px solid var(--wy-bg);
}
::-webkit-scrollbar-thumb:hover { background: #333c47; }

/* 选中文字：用强调色，和"线索"呼应 */
::selection { background: var(--wy-accent-soft); color: var(--wy-text-strong); }