/* =========================================================
 * aliceADV engine — base stylesheet (框架层)
 * 设计参考：Ren'Py GUI ("The Question" 默认皮肤)
 * 关键设计：纸感撕裂边 / 深蓝强调色 / 16:9 舞台 / 居中溢出
 *
 * 本文件只放「跨页面共享」的基础与组件样式。
 * 每个页面自己的样式放在 style/pages/<page>.css，便于后续构建打包。
 * ========================================================= */

/* ---------- 1. 基础变量 & 重置 ---------- */
:root {
    --aspect: 16 / 9;
    /* 设计分辨率：所有内部尺寸/字号的基准。
     * 使用 px 单位，配合 #stage 的 CSS transform 整体缩放，
     * 保证任意窗口大小下都是严格的 16:9 等比缩放。 */
    --design-w: 1920px;
    --design-h: 1080px;
    --overflow-color: #0d0d10;

    --font-text: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --font-interface: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --font-title: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --font-system: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;

    --color-accent: #3B5998;
    --color-accent-deep: #1F3A78;
    --color-idle: #5C5757;
    --color-idle-small: #7A7575;
    --color-hover: #3284D6;
    --color-selected: #3B5998;
    --color-insensitive: #888888;
    --color-text: #402000;
    --color-interface: #404040;
    --color-paper: #FAF8F0;
    --color-paper-deep: #E8E2D0;
    --color-muted: #6080D0;
    --color-hover-muted: #8080F0;

    /* 字号：以设计宽度 1920 为基准的比例（整体随画布缩放）。
     * 例如 22px → calc(1920px * 22 / 1920) = 22px。 */
    --size-text: calc(var(--design-w) * 22 / 1920);
    --size-name: calc(var(--design-w) * 28 / 1920);
    --size-interface: calc(var(--design-w) * 22 / 1920);
    --size-label: calc(var(--design-w) * 28 / 1920);
    --size-notify: calc(var(--design-w) * 18 / 1920);
    --size-title: calc(var(--design-w) * 56 / 1920);
    --size-choice: calc(var(--design-w) * 24 / 1920);
    --size-slot: calc(var(--design-w) * 18 / 1920);
    --size-page-heading: calc(var(--design-w) * 56 / 1920);
    --size-section-heading: calc(var(--design-w) * 28 / 1920);

    /* 撕裂边 SVG mask (顶部 + 底部 各一段) */
    --torn-top: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'><path d='M0,4 L0,1.6 L1,1.2 L2,1.8 L3,1 L4,2 L5,1.4 L6,1.8 L7,0.8 L8,1.6 L9,1.2 L10,2 L11,1 L12,1.6 L13,1.4 L14,1.8 L15,1 L16,1.6 L17,1.2 L18,2 L19,1.4 L20,1.8 L21,1 L22,1.6 L23,1.2 L24,2 L25,1.4 L26,1.8 L27,0.8 L28,1.6 L29,1.2 L30,2 L31,1 L32,1.6 L33,1.4 L34,1.8 L35,1 L36,1.6 L37,1.2 L38,2 L39,1.4 L40,1.8 L41,1 L42,1.6 L43,1.2 L44,2 L45,1.4 L46,1.8 L47,0.8 L48,1.6 L49,1.2 L50,2 L51,1 L52,1.6 L53,1.4 L54,1.8 L55,1 L56,1.6 L57,1.2 L58,2 L59,1.4 L60,1.8 L61,1 L62,1.6 L63,1.2 L64,2 L65,1.4 L66,1.8 L67,0.8 L68,1.6 L69,1.2 L70,2 L71,1 L72,1.6 L73,1.4 L74,1.8 L75,1 L76,1.6 L77,1.2 L78,2 L79,1.4 L80,1.8 L81,1 L82,1.6 L83,1.2 L84,2 L85,1.4 L86,1.8 L87,0.8 L88,1.6 L89,1.2 L90,2 L91,1 L92,1.6 L93,1.4 L94,1.8 L95,1 L96,1.6 L97,1.2 L98,2 L99,1.4 L100,1.8 L100,4 Z' fill='%23FAF8F0'/></svg>");
    --torn-bottom: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'><path d='M0,0 L100,0 L100,2.4 L99,2.8 L98,2.2 L97,3 L96,2 L95,2.6 L94,2.2 L93,3.2 L92,2.4 L93,2.8 L92,2 L91,3 L90,2.4 L89,2.6 L88,2.2 L87,3 L86,2.4 L87,2.8 L86,2 L85,2.6 L84,2.2 L83,3 L82,2.4 L83,2.8 L82,2 L81,2.6 L80,2.2 L79,3 L78,2.4 L77,2.8 L76,2 L75,2.6 L74,2.2 L73,3.2 L72,2.4 L71,2.8 L70,2 L69,2.6 L68,2.2 L67,3 L66,2.4 L67,2.8 L66,2 L65,2.6 L64,2.2 L63,3 L62,2.4 L61,2.8 L60,2 L59,2.6 L58,2.2 L57,3 L56,2.4 L57,2.8 L56,2 L55,2.6 L54,2.2 L53,3.2 L52,2.4 L51,2.8 L50,2 L49,2.6 L48,2.2 L47,3 L46,2.4 L47,2.8 L46,2 L45,2.6 L44,2.2 L43,3 L42,2.4 L41,2.8 L40,2 L39,2.6 L38,2.2 L37,3 L36,2.4 L37,2.8 L36,2 L35,2.6 L34,2.2 L33,3.2 L32,2.4 L31,2.8 L30,2 L29,2.6 L28,2.2 L27,3 L26,2.4 L27,2.8 L26,2 L25,2.6 L24,2.2 L23,3 L22,2.4 L21,2.8 L20,2 L19,2.6 L18,2.2 L17,3 L16,2.4 L17,2.8 L16,2 L15,2.6 L14,2.2 L13,3.2 L12,2.4 L11,2.8 L10,2 L9,2.6 L8,2.2 L7,3 L6,2.4 L7,2.8 L6,2 L5,2.6 L4,2.2 L3,3 L2,2.4 L1,2.8 L0,2 Z' fill='%23FAF8F0'/></svg>");

    /* 撕纸纹理 - 噪声叠加 */
    --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--overflow-color);
    font-family: var(--font-system);
    color: var(--color-text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

/* ---------- 2. 游戏外框 & 舞台 (game viewport) ----------
 * #game-frame：占满浏览器窗口，负责居中与裁剪黑边。
 * #stage：固定 1920×1080 设计分辨率，由 JS 计算 scale() 整体等比例缩放。
 * 所有 page_* 都在 #stage 内部以 1920×1080 的绝对坐标渲染，
 * 因此任意窗口大小下，UI、文字、间距都保持严格等比，不会在小窗口下过曝。
 */
#game-frame {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overflow-color);
    overflow: hidden;
}

#stage {
    position: absolute;
    width: var(--design-w);
    height: var(--design-h);
    left: 50%;
    top: 50%;
    transform-origin: center center;
    background: #000;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.6);
    /* 禁用鼠标事件的缩放补偿由 JS 处理，这里不需要 pointer-events 调整 */
}

/* 所有 page_* 容器：覆盖整个舞台 */
.page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    z-index: 1;
}
.page.is-active { display: block; z-index: 10; }

/* ---------- 3. 通用：纸感撕裂边 ---------- */
.paper {
    position: relative;
    background-color: var(--color-paper);
    background-image:
        var(--paper-noise),
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.04) 100%);
    color: var(--color-text);
    font-family: var(--font-interface);
    isolation: isolate;
}

.paper::before,
.paper::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    height: 6px;
    background-color: var(--color-paper);
    z-index: -1;
}
.paper::before {
    top: -4px;
    -webkit-mask-image: var(--torn-top);
    mask-image: var(--torn-top);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.paper::after {
    bottom: -4px;
    -webkit-mask-image: var(--torn-bottom);
    mask-image: var(--torn-bottom);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ---------- 4. 按钮基础 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-interface);
    color: var(--color-text);
    padding: 0;
    transition: transform 0.12s ease, color 0.12s ease;
}
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px dashed var(--color-hover); outline-offset: 2px; }

/* 纸感按钮 (idle/hover/selected 三态)
 * 外观由 gui/button/ 下的 Ren'Py 风格背景图负责（与 renpy 图片目录兼容）。 */
.paper-btn {
    height: calc(var(--design-h) * 64 / 1080);
    min-width: calc(var(--design-w) * 280 / 1920);
    padding: 0 calc(var(--design-w) * 40 / 1920);
    font-size: var(--size-interface);
    color: var(--color-idle);
    text-align: left;
    justify-content: flex-start;
    padding-left: calc(var(--design-w) * 40 / 1920);
    border: none;
    background-color: transparent;
    background-image: url("../gui/button/idle_background.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.paper-btn:hover {
    color: var(--color-hover);
    background-image: url("../gui/button/hover_background.png");
}
.paper-btn.is-selected { color: var(--color-accent); }
.paper-btn.is-current { color: var(--color-accent); font-weight: 600; }
/* 按钮不保留纸感撕裂边（由按钮背景图负责外观） */
.paper-btn::before, .paper-btn::after { display: none; }

/* 横向居中按钮变体 (设置界面里的"窗口/全屏") */
.paper-btn--center {
    text-align: center;
    justify-content: center;
    padding-left: 0;
}

/* ---------- 5. 页面通用：背景图层 / overlay ---------- */
.page__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.page__bg--solid {
    background: linear-gradient(180deg, #f3ecd9 0%, #e7dfc6 100%);
}
.page__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
}
.page__overlay--dim { background: rgba(0, 0, 0, 0.35); }

/* ---------- 6. 共享组件：存档槽 (save / load 通用) ---------- */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(var(--slot-cols, 3), 1fr);
    grid-auto-rows: 1fr;
    gap: calc(var(--design-w) * 24 / 1920);
    flex: 1;
    align-content: start;
    padding: calc(var(--design-h) * 20 / 1080) 0;
}

.slot {
    position: relative;
    background-color: var(--color-paper);
    background-image:
        var(--paper-noise),
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.04) 100%);
    min-height: 0;
    aspect-ratio: var(--slot-aspect, 414 / 309);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.slot::before,
.slot::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px; height: 6px;
    background-color: var(--color-paper);
    z-index: 0;
}
.slot::before {
    top: -4px;
    -webkit-mask-image: var(--torn-top);
    mask-image: var(--torn-top);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.slot::after {
    bottom: -4px;
    -webkit-mask-image: var(--torn-bottom);
    mask-image: var(--torn-bottom);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.slot:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }

/* 蓝色角标记 - slot_idle_background.png 的特征 */
.slot__corner {
    position: absolute;
    width: 30%;
    height: 30%;
    border-color: var(--color-accent);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}
.slot__corner--tl { top: 10%; left: 10%; border-top-width: 2px; border-left-width: 2px; }
.slot__corner--tr { top: 10%; right: 10%; border-top-width: 2px; border-right-width: 2px; }
.slot__corner--bl { bottom: 10%; left: 10%; border-bottom-width: 2px; border-left-width: 2px; }
.slot__corner--br { bottom: 10%; right: 10%; border-bottom-width: 2px; border-right-width: 2px; }

.slot__thumb {
    position: absolute;
    top: 12%; left: 12%; right: 12%; bottom: 30%;
    background: #d4cdb8 center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: calc(var(--design-w) * 14 / 1920);
    font-family: var(--font-interface);
    opacity: 0.6;
}
.slot__meta {
    position: absolute;
    bottom: 6%;
    left: 8%; right: 8%;
    text-align: left;
    color: var(--color-text);
    font-size: var(--size-slot);
    font-family: var(--font-interface);
    opacity: 0.85;
}
.slot__name {
    font-family: var(--font-interface);
    color: var(--color-accent);
    font-size: calc(var(--design-w) * 16 / 1920);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: calc(var(--design-h) * 4 / 1080);
}
.slot__text {
    font-family: var(--font-text);
    color: var(--color-text);
    font-size: calc(var(--design-w) * 14 / 1920);
    line-height: 1.32;
    max-height: calc(var(--design-h) * 56 / 1080);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: calc(var(--design-h) * 4 / 1080);
}
.slot__time {
    font-family: var(--font-interface);
    color: var(--color-idle);
    font-size: calc(var(--design-w) * 13 / 1920);
    opacity: 0.85;
}
.slot.is-empty .slot__thumb {
    background: transparent;
    color: var(--color-accent);
    font-size: calc(var(--design-w) * 16 / 1920);
    opacity: 0.5;
}

/* 翻页器 */
.page-jumper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--design-w) * 6 / 1920);
    padding: calc(var(--design-h) * 14 / 1080) 0 0 0;
    color: var(--color-accent);
    font-family: var(--font-interface);
}
.page-jumper .pj-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--design-w) * 28 / 1920); height: calc(var(--design-w) * 28 / 1920);
    cursor: pointer;
    font-size: calc(var(--design-w) * 18 / 1920);
}
.page-jumper .pj-num.is-current { color: var(--color-accent-deep); font-weight: 600; }
.page-jumper .pj-num:hover { color: var(--color-hover); }

/* ---------- 7. 共享组件：复选框 ---------- */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--design-w) * 8 / 1920);
    font-size: var(--size-interface);
    color: var(--color-idle);
    cursor: pointer;
    font-family: var(--font-interface);
}
.checkbox__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--design-w) * 28 / 1920); height: calc(var(--design-w) * 28 / 1920);
    border: calc(var(--design-w) * 2 / 1920) solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
    font-size: calc(var(--design-w) * 18 / 1920);
    line-height: 1;
}
.checkbox.is-checked .checkbox__box { color: var(--color-accent); }
.checkbox.is-checked .checkbox__box::after { content: "✔"; }
.checkbox:hover { color: var(--color-hover); }

/* ---------- 8. 共享组件：滑块 ---------- */
.slider {
    position: relative;
    width: 100%;
    height: calc(var(--design-h) * 60 / 1080);
    display: flex;
    align-items: center;
    cursor: pointer;
}
.slider__track {
    position: relative;
    width: 100%;
    height: calc(var(--design-w) * 6 / 1920);
    background: var(--color-accent);
    border-radius: 0;
}
.slider__thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--design-w) * 26 / 1920); height: calc(var(--design-w) * 26 / 1920);
    background: var(--color-paper);
    border: calc(var(--design-w) * 1 / 1920) solid var(--color-accent);
    box-shadow: 0 calc(var(--design-h) * 2 / 1080) calc(var(--design-h) * 4 / 1080) rgba(0, 0, 0, 0.2);
    cursor: grab;
}
.slider__thumb:active { cursor: grabbing; }

/* ---------- 9. 共享组件：滚动条 ---------- */
.scroll-area { overflow-y: auto; }
.scroll-area::-webkit-scrollbar { width: calc(var(--design-w) * 18 / 1920); }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    opacity: 0.4;
    border-radius: 0;
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-hover); }

/* ---------- 10. 工具类 ---------- */
.text-center { text-align: center; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.opacity-60 { opacity: 0.6; } .opacity-80 { opacity: 0.8; }

/* ---------- 11. 字体兜底（系统无 ArchitectsDaughter / Ma Shan Zheng 时） ---------- */
@font-face {
    font-family: "ArchitectsDaughter";
    src: local("ArchitectsDaughter");
    font-display: swap;
}

/* ---------- 12. 未加载到 theme.json 时的使用说明（非默认内容，仅提示） ---------- */
.no-theme-note {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--design-w) * 40 / 1920);
}
.no-theme-note__box {
    max-width: calc(var(--design-w) * 560 / 1920);
    padding: calc(var(--design-h) * 28 / 1080) calc(var(--design-w) * 36 / 1920);
    color: var(--color-text);
    font-family: var(--font-interface);
    font-size: calc(var(--design-w) * 18 / 1920);
    line-height: 1.7;
    text-align: center;
}
.no-theme-note__box p { margin: calc(var(--design-h) * 6 / 1080) 0; }
.no-theme-note__box .small { font-size: calc(var(--design-w) * 15 / 1920); opacity: 0.8; text-align: left; }