/* ==============================
   星月小窝 —— 公共样式
   （导航栏 / 关于页 / 页脚）
   ============================== */

/* ---------- 颜色变量 ---------- */

:root {
    --main-color: #66ccff;
    --background-color: #ffffff;
    --text-color: #333333;
    --surface-color: #ffffff;
}

/* ---------- 基础 ---------- */

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-size: 18px;

    background-color: var(--background-color);
}

/* ---------- 隐藏子页面右侧滚动条（内容超出时仍可滚动）----------
   首页（含 .home-screen）不受影响 */

html:not(:has(.home-screen)),
html:not(:has(.home-screen)) body {
    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none; /* 旧版 Edge / IE */
}

html:not(:has(.home-screen))::-webkit-scrollbar,
html:not(:has(.home-screen)) body::-webkit-scrollbar {
    display: none; /* Chrome / Edge / Safari */
}

/* ==============================
   顶部导航栏（主页风格：圆角、hover 主色）

   ⚠️ 这里用的是**裸元素选择器 `nav`**，它会漏到全站所有 `<nav>`：
     · `common.js` 给子页面注入的 `#site-header > nav`（本来只想管它）
     · `index.html` 左栏菜单 `<nav class="sidebar-menu">`
     · `user.html` 个人中心左栏 `<nav class="settings-nav">`
   后两个只声明了 display / flex-direction / gap，没声明 height、padding、align-items、border，
   于是把这里的 `height:44px`、`padding`、`align-items:center`、`border-bottom` 整套继承了。

   👉 其中那条 `border-bottom` 就是「左栏第二个按钮下面莫名多一条横线」的来源 ——
      已在紧跟着的规则里单独取消。**其余继承效果（居中、内边距）是刻意保留的**：
      它们决定了左栏按钮的实际观感（内容宽度 + 居中），一旦一起撤掉按钮就会变成撑满整条的宽条。
      ⛔ 所以别图省事把这条规则直接收窄成 `#site-header nav`（试过，按钮样子全变了）。
      想彻底治本得同时给左栏补回等价的 align-items / padding，那属于改外观，等站长说了再做。
      详见 docs/08 #09。
   ============================== */

nav {
    display: flex;

    padding: 0 20px;
    height: 44px;

    align-items: center;

    background-color: var(--surface-color);

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 左栏的两个 <nav> 不要那条分隔线（只取消这一个属性，其余保持原样） */
.sidebar-menu,
.settings-nav {
    border-bottom: none;
}

.nav-menu {
    display: flex;
    list-style: none;

    gap: 6px;

    margin: 0;
    padding: 0;

    flex: 1;
    justify-content: center;
}

/* 右侧占位：与左侧 logo 等宽，让菜单按钮真正居中 */
.nav-side {
    width: 100px;
}

.logo {
    display: flex;
    align-items: center;

    height: 100%;
    width: 100px;

    text-decoration: none;
    font-size: 20px;
    font-weight: bold;

    color: var(--main-color);
}

.nav-link {
    display: inline-flex;
    align-items: center;

    padding: 5px 12px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;

    color: var(--text-color);

    white-space: nowrap;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
    background-color: rgba(102, 204, 255, 0.12);

    color: var(--main-color);
}

/* ---------- "关于"下拉菜单 ---------- */

.nav-item,
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: flex;
    flex-direction: column;

    list-style: none;

    margin: 0;
    padding: 10px;

    min-width: 96px;

    position: absolute;
    top: 100%;
    left: 0;

    background-color: var(--surface-color);

    border-radius: 10px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition:
        opacity 0.3s,
        transform 0.3s;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu a {
    display: block;

    padding: 8px;

    white-space: nowrap;

    text-decoration: none;
    color: var(--text-color);
}

.dropdown-menu a:hover {
    color: var(--main-color);
}

/* 当前所在的角色页高亮 */
.dropdown-menu a.active {
    color: var(--main-color);
    font-weight: bold;
}

/* ==============================
   关于页主体
   ============================== */

.content {
    flex: 1;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;
    padding: 60px 20px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card {
    display: flex;
    gap: 40px;
    align-items: center;

    background-color: var(--surface-color);

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.about-portrait {
    width: 260px;
    height: 260px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #eaf9ff, #f7f2ff);

    border-radius: 20px;

    overflow: hidden;

    /* 头像不参与拖选：星瑶 / 月瓷是立绘图片，小喵这里是大号 emoji 文字 */
    user-select: none;
}

.about-portrait img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    /* 立绘也不允许被拖出去 */
    -webkit-user-drag: none;
}

/* 没有立绘的角色（小喵）用大表情代替 */
.about-portrait-emoji {
    font-size: 112px;

    background: linear-gradient(135deg, #fff6e8, #ffe8f0);
}

.about-text h2 {
    margin: 0 0 10px;

    font-size: 34px;

    color: var(--main-color);
}

.about-text p {
    margin: 8px 0;

    line-height: 1.8;

    color: var(--text-color);
}

.about-note {
    margin-top: 16px;

    font-size: 16px;

    color: #888888;
}

@media (max-width: 700px) {
    .about-card {
        flex-direction: column;
        text-align: center;
    }

    .about-portrait {
        width: 200px;
        height: 200px;
    }
}

/* ==============================
   底部页脚
   ============================== */

footer {
    background-color: var(--surface-color);

    padding: 20px;

    text-align: center;
    font-size: 17px;

    color: var(--text-color);

    border-top: 1px solid #eeeeee;
}

.footer-content {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 20px;
}

.footer-menu {
    display: flex;
    list-style: none;

    gap: 30px;

    margin: 0;
    padding: 0;

    justify-content: center;
}

.footer-link {
    text-decoration: none;
    color: var(--text-color);

    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--main-color);
}

.footer-bottom {
    font-size: 14px;

    color: var(--text-color);
}

/* ==============================
   备用样式（暂未使用，留给以后的页面）
   —— hero / news / character
   ============================== */

.hero {
    width: 100%;
    min-height: calc(100vh - 50px);

    overflow: hidden;
}

.hero h1 {
    font-size: 38px;
    color: var(--main-color);
}

.hero p {
    font-size: 20px;
    color: var(--text-color);
    margin-top: 10px;
}

.hero-button {
    margin-top: 20px;
    padding: 10px 20px;

    font-size: 18px;

    color: var(--surface-color);
    background-color: var(--main-color);

    border: none;
    border-radius: 5px;

    cursor: pointer;
}

.hero-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.news {
    padding: 100px 0;
}

.news-container {
    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}

.news-title {
    margin: 0;

    font-size: 42px;

    color: var(--text-color);
}

.news-subtitle {
    margin-top: 10px;

    color: #888888;
}

.news-list {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 30px;
}

.news-card {
    flex: 1;

    background-color: var(--surface-color);

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.news-date {
    color: #999999;
    font-size: 16px;
}

.news-card h3 {
    margin: 15px 0;
}

.news-card p {
    color: #666666;
    line-height: 1.6;
}

.character {
    padding: 100px 0;
}

.character-container {
    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}

.character-title {
    font-size: 42px;
    margin: 0;
}

.character-subtitle {
    color: #888888;
    margin-top: 10px;
}

.character-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    margin-top: 50px;
}

.character-card {
    display: block;

    background-color: var(--surface-color);

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    text-decoration: none;
    color: inherit;

    cursor: pointer;

    transition: 0.3s;
}

.character-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.character-image-box {
    height: 500px;

    overflow: hidden;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.character-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transition: transform 0.3s;
}

.character-card h3 {
    margin: 20px 0;

    text-align: center;
    font-size: 26px;

    color: var(--text-color);
}

/* ==============================
   装修中占位页（插画 / 周边 / 动态）
   ============================== */

.wip-page {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 40px 20px;

    text-align: center;
}

.wip-icon {
    font-size: 56px;
}

.wip-page h2 {
    margin: 0;

    font-size: 28px;

    color: var(--text-color);
}

.wip-page p {
    margin: 0;

    font-size: 16px;

    color: #888888;
}

/* ==============================
   "还在装修"徽章（关于页）
   ============================== */

.about-card {
    position: relative;
}

.about-wip {
    position: absolute;

    top: -12px;
    right: 24px;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: bold;

    color: #b26a00;

    background-color: #ffe8cc;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==============================
   手机端适配（所有子页面）
   ============================== */

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

    /* ---------- 导航栏：更紧凑，菜单可横向滑动 ---------- */

    nav {
        height: 42px;

        padding: 0 12px;
    }

    .logo {
        width: auto;

        padding-right: 10px;

        font-size: 18px;
    }

    /* 手机上取消居中占位（菜单直接横向排列） */
    .nav-side {
        display: none;
    }

    .nav-menu {
        gap: 2px;

        justify-content: flex-start;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        padding: 5px 10px;

        font-size: 14px;
    }

    .dropdown-menu {
        min-width: 84px;

        padding: 8px;
    }

    .dropdown-menu a {
        padding: 7px 8px;

        font-size: 14px;
    }

    /* ---------- 页脚 ---------- */

    footer {
        padding: 16px;

        font-size: 14px;
    }

    .footer-menu {
        gap: 16px;
    }

    /* ---------- 下载页 ---------- */

    .download-page {
        min-height: calc(100vh - 42px);

        padding: 32px 20px;
    }

    .download-icon {
        width: 88px;
        height: 88px;

        border-radius: 20px;
    }

    .download-name {
        font-size: 24px;
    }

    .download-desc {
        font-size: 14px;
    }

    .download-btn {
        padding: 13px 40px;

        font-size: 16px;
    }

    /* ---------- 装修中占位页 ---------- */

    .wip-icon {
        font-size: 44px;
    }

    .wip-page h2 {
        font-size: 22px;
    }

    /* ---------- 关于页 ---------- */

    .content {
        padding: 32px 16px;
    }

    .about-card {
        flex-direction: column;

        gap: 22px;

        width: 100%;

        padding: 26px 20px;
    }

    .about-portrait {
        width: 180px;
        height: 180px;

        border-radius: 16px;
    }

    .about-portrait-emoji {
        font-size: 80px;
    }

    .about-text h2 {
        font-size: 26px;
    }

    .about-text p {
        font-size: 15px;
    }

    .about-note {
        font-size: 14px;
    }

    .about-wip {
        right: 16px;
    }
}

@media (max-width: 480px) {

    nav {
        padding: 0 10px;
    }

    .nav-link {
        padding: 4px 8px;

        font-size: 13px;
    }

    .footer-menu {
        flex-direction: column;

        gap: 10px;
    }
}