/* =========================================================
   Prism Studio — Editorial Theme (v1.2.0)
   覆盖 main.css 的设计令牌与组件外观，去除“AI 模板感”。
   实现方式：重载 CSS 变量实现整体换肤 + 少量组件外观覆盖。
   不修改 main.css 本体 —— 本文件随升级包下发，不会覆盖
   用户既有的主题与自定义样式。
   设计要点：
     1. 弃用 Inter，改用 Space Grotesk（含中文回退）
     2. 原 紫/粉/青 三色循环 → 冷→暖“棱镜光谱”双色调
     3. 移除漂浮光球，改为克制的顶部光谱渐隐
     4. 方形描边图标 → 圆形描边，去除方块底色
   ========================================================= */

:root,
[data-theme="dark"] {
    /* 字体：更具设计感，远离 Inter 的“模板味” */
    --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

    /* 中性底色：近黑、带一点冷意，不纯黑 */
    --bg: #0B0B0F;
    --bg-elevated: #141419;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --hairline: rgba(255, 255, 255, 0.09);
    --hairline-strong: rgba(255, 255, 255, 0.16);
    --text: #F4F4F5;
    --text-secondary: #B4B4BE;
    --text-muted: #8A8A95;

    /* 棱镜光谱：冷→暖，取代原三色循环 */
    --violet: #6D8BFF;            /* 主强调（天青蓝） */
    --violet-soft: rgba(109, 139, 255, 0.12);
    --pink: #FF8FA3;              /* 暖珊瑚（与蓝形成色散） */
    --pink-soft: rgba(255, 143, 163, 0.12);
    --cyan: #4FD1C5;              /* 薄荷点缀 */
    --cyan-soft: rgba(79, 209, 197, 0.12);

    --error: #F4556B;
    --success: #34C98A;
    --warning: #F5B544;

    /* 光谱渐变：只用于 Logo 与关键强调，克制使用 */
    --spectrum: linear-gradient(120deg, #6D8BFF 0%, #B58CFF 50%, #4FD1C5 100%);

    /* 更克制的编辑感圆角 */
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
    --bg: #FBFBFD;
    --bg-elevated: #FFFFFF;
    --surface: rgba(17, 17, 26, 0.035);
    --surface-hover: rgba(17, 17, 26, 0.06);
    --hairline: rgba(17, 17, 26, 0.09);
    --hairline-strong: rgba(17, 17, 26, 0.16);
    --text: #14141A;
    --text-secondary: #4A4A55;
    --text-muted: #74747F;
    --violet-soft: rgba(109, 139, 255, 0.10);
    --pink-soft: rgba(255, 143, 163, 0.10);
    --cyan-soft: rgba(79, 209, 197, 0.10);
    --card: rgba(17, 17, 26, 0.03);
    --border: rgba(17, 17, 26, 0.09);
    --muted: #74747F;
    --bg-2: #FFFFFF;
}

/* ---------- 背景：移除漂浮光球，改为顶部克制光谱渐隐 ---------- */
.page-bg .orb { display: none; }

.page-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(109, 139, 255, 0.10), transparent 60%),
        radial-gradient(90% 50% at 86% 0%, rgba(255, 143, 163, 0.06), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- 标题：更紧的排版，编辑感 ---------- */
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
.hero-title, h1 { letter-spacing: -0.03em; }

/* ---------- 图标：方形底色 → 圆形描边 ---------- */
.feature-icon {
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--violet);
}

.feature-icon-violet,
.feature-icon-pink,
.feature-icon-cyan {
    background: transparent;
    color: var(--violet);
    border-color: rgba(109, 139, 255, 0.28);
}

.feature-icon:hover {
    border-color: var(--violet);
    box-shadow: 0 8px 24px -10px rgba(109, 139, 255, 0.5);
}

.logo-mark {
    border-radius: 50%;
    background: var(--spectrum);
    box-shadow: 0 6px 18px -6px rgba(109, 139, 255, 0.45);
}

.game-logo {
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hairline-strong);
}

.contact-icon {
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon.feature-icon-violet,
.contact-icon.feature-icon-pink,
.contact-icon.feature-icon-cyan {
    background: transparent;
    color: var(--violet);
    border-color: rgba(109, 139, 255, 0.28);
}

/* ---------- 主按钮：渐变改为克制的棱镜双色调 ---------- */
.btn-primary {
    background: var(--spectrum);
    letter-spacing: 0.01em;
}
.btn-primary:hover { filter: brightness(1.06); }

/* ---------- 选区 / 焦点环 / 链接 ---------- */
::selection { background: var(--violet-soft); }
:focus-visible { outline-color: var(--violet); }
a { color: var(--violet); }

/* ---------- 纯文字 Logo 特效（v1.2.0） ---------- */
.logo-wordmark {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1;
    background-clip: text;
    -webkit-background-clip: text;
}
.logo-effect-none { color: var(--text); -webkit-text-fill-color: currentColor; }
.logo-effect-gradient {
    background-image: var(--spectrum);
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.logo-effect-glow {
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 0 18px rgba(109, 139, 255, 0.55);
}
.logo-effect-shine {
    background-image: linear-gradient(100deg, var(--text) 30%, #FFFFFF 50%, var(--text) 70%);
    background-size: 200% auto;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: logoShine 3.2s linear infinite;
}
.logo-effect-outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.2px var(--violet);
    text-shadow: none;
}

@keyframes logoShine {
    to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-effect-shine { animation: none; background-position: 0 center; }
}

/* ---------- 首页区块排版字段（v1.2.0） ---------- */
/* 布局 */
.block-layout-wide > .container { max-width: 1320px; }
.block-layout-narrow > .container { max-width: 760px; }
.block-layout-centered > .container { text-align: center; }
.block-layout-centered .section-header .section-subtitle { margin-left: auto; margin-right: auto; }
.block-layout-centered .section-badge { margin-left: auto; margin-right: auto; }

/* 列数（网格类区块：features / games / columns） */
@media (min-width: 720px) {
    .block-cols-2 .features-grid,
    .block-cols-2 .games-grid,
    .block-cols-2 .columns-grid { grid-template-columns: repeat(2, 1fr); }
    .block-cols-3 .features-grid,
    .block-cols-3 .games-grid,
    .block-cols-3 .columns-grid { grid-template-columns: repeat(3, 1fr); }
    .block-cols-4 .features-grid,
    .block-cols-4 .games-grid,
    .block-cols-4 .columns-grid { grid-template-columns: repeat(4, 1fr); }
}
.block-cols-1 .features-grid,
.block-cols-1 .games-grid,
.block-cols-1 .columns-grid { grid-template-columns: 1fr; }

/* 强调色：小标签 + 顶部装饰线 */
.block-accent-azure .section-badge { background: var(--violet-soft); color: var(--violet); }
.block-accent-coral .section-badge { background: var(--pink-soft); color: var(--pink); }
.block-accent-mint .section-badge { background: var(--cyan-soft); color: var(--cyan); }
.block-accent-spectrum .section-badge { background: var(--spectrum); color: #fff; border-color: transparent; }

.block-accent-azure .section-header::before,
.block-accent-coral .section-header::before,
.block-accent-mint .section-header::before,
.block-accent-spectrum .section-header::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.block-accent-azure .section-header::before { background: var(--violet); }
.block-accent-coral .section-header::before { background: var(--pink); }
.block-accent-mint .section-header::before { background: var(--cyan); }
.block-accent-spectrum .section-header::before { background: var(--spectrum); }
.block-layout-centered .section-header::before { margin-left: auto; margin-right: auto; }

/* 强调色：CTA / Banner 卡片描边 */
.block-accent-azure .cta-card,
.block-accent-azure .banner-card { border-color: rgba(109, 139, 255, 0.4); }
.block-accent-coral .cta-card,
.block-accent-coral .banner-card { border-color: rgba(255, 143, 163, 0.4); }
.block-accent-mint .cta-card,
.block-accent-mint .banner-card { border-color: rgba(79, 209, 197, 0.4); }
.block-accent-spectrum .cta-card,
.block-accent-spectrum .banner-card {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(109, 139, 255, 0.16), rgba(181, 140, 255, 0.12) 50%, rgba(79, 209, 197, 0.12));
}

/* ---------- 更新日志前台提示卡片（v1.3.0） ---------- */
.notice-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    max-width: 760px;
    margin: 0 auto;
}
.notice-icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--violet-soft);
    color: var(--violet);
}
.notice-body h2 { margin: 0 0 8px; font-size: 20px; }
.notice-body p { margin: 0 0 10px; color: var(--text-secondary); line-height: 1.7; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-hint a { color: var(--violet); font-weight: 600; }

/* ---------- 主题切换按钮（v1.3.0，支持四主题 + 文字标签） ---------- */
/* 用中性纯白/纯黑文字，避免 AI 主题下 --text 偏蓝被当成「主题色」看不清 */
.theme-toggle {
    width: auto;
    height: 38px;
    padding: 0 14px;
    gap: 7px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated) !important;
    border: 1px solid var(--hairline-strong) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.theme-toggle:hover {
    background: var(--surface-hover) !important;
    border-color: var(--violet) !important;
}
.theme-toggle .theme-label,
.theme-toggle svg,
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}
.theme-label {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* 亮色主题：按钮用深色文字 */
[data-theme="light"] .theme-toggle,
[data-theme="light-ai"] .theme-toggle {
    color: #1A1A2E !important;
}
[data-theme="light"] .theme-toggle .theme-label,
[data-theme="light"] .theme-toggle svg,
[data-theme="light"] .theme-toggle .theme-icon-light,
[data-theme="light"] .theme-toggle .theme-icon-dark,
[data-theme="light-ai"] .theme-toggle .theme-label,
[data-theme="light-ai"] .theme-toggle svg,
[data-theme="light-ai"] .theme-toggle .theme-icon-light,
[data-theme="light-ai"] .theme-toggle .theme-icon-dark {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
    stroke: #1A1A2E !important;
}
[data-theme="light"] .theme-label,
[data-theme="light-ai"] .theme-label {
    color: #1A1A2E !important;
}
/* 亮色主题（含未来感·亮色）显示太阳图标，暗色主题显示月亮图标 */
[data-theme="light-ai"] .theme-icon-dark { display: none; }
[data-theme="light-ai"] .theme-icon-light { display: block; }
@media (max-width: 600px) {
    .theme-toggle { padding: 0 10px; }
    .theme-label { display: none; }
}

/* ---------- 主题切换下拉菜单（v1.3.2，四主题快速选择） ---------- */
.theme-switcher { position: relative; }
.theme-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 210px;
    padding: 8px;
    background: var(--bg-elevated, var(--card));
    border: 1px solid var(--hairline-strong, var(--border));
    border-radius: 12px;
    box-shadow: 0 18px 44px -16px rgba(0,0,0,.5);
    display: none;
}
.theme-switcher.open .theme-switcher-menu { display: block; }
.theme-switcher-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: 9px;
    background: none; color: #FFFFFF;
    font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: left;
    transition: background .15s;
}
.theme-switcher-option:hover { background: var(--surface-hover, rgba(255,255,255,.08)); }
.theme-switcher-option.is-current { background: var(--violet-soft); }
[data-theme="light"] .theme-switcher-option,
[data-theme="light-ai"] .theme-switcher-option { color: #1A1A2E; }
.theme-swatch {
    width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid rgba(128,128,160,.25);
}
.theme-switcher-option .theme-swatch-label { flex: 1; }
@media (max-width: 600px) {
    .theme-switcher-menu { right: -40px; }
}

/* ---------- 前台主导航（fail-open：默认显示，仅窄屏隐藏） ---------- */
/* main.css 原本 display:none 默认 + @media(min-width:768px) 显示，
   属 fail-closed：一旦媒体查询未生效导航就消失。这里反转为 fail-open，
   默认 flex 显示，仅 <768px 隐藏（交给移动端汉堡菜单），并防被挤压。 */
.main-nav {
    display: flex !important;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .main-nav { display: none !important; }
}