/* fufu_gnosaria.css
 * 卢恩 / 魔法材料卡片 · 液态玻璃浅色版
 * 同时适配私人版（深紫蓝底）+ 投影版（浅薄荷底）
 *
 * 配色策略（暗金羊皮纸 · 与 Gnosaria 主站同源美学）：
 *   容器 = 半透明白玻璃 + backdrop-filter blur（液态玻璃质感）
 *   主色 = 暗金 #c9a55c
 *   深色 = #b08838（深金棕，标题/边线）
 *   点缀 = 薄荷绿粒子（占 20%，呼应浮浮主体调）
 *   文字 = 深褐 #2c1810（温润不刺眼）
 */

#soul-card.rune-mode,
#soul-card.materia-mode,
#mineral-card.rune-mode,
#mineral-card.materia-mode {
    width: min(380px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    border-radius: 18px;
    background:
        linear-gradient(165deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(245, 248, 247, 0.62) 50%,
            rgba(232, 240, 238, 0.58) 100%);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    border: 1px solid rgba(201, 165, 92, 0.35);
    box-shadow:
        0 18px 56px rgba(20, 30, 40, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    color: #1f2a36;
    font-family: 'Noto Serif SC', 'Cormorant Garamond', serif;
    line-height: 1.7;
    -webkit-overflow-scrolling: touch;
    /* ⚡ 修字体重影：抗锯齿 + 关掉非必要的 text-shadow 叠加 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}
/* 卡片所有元素一律不带阴影 + 粗体降一档（防玻璃 backdrop-filter 叠加产生重影） */
#soul-card.rune-mode *,
#soul-card.materia-mode *,
#mineral-card.rune-mode *,
#mineral-card.materia-mode * {
    text-shadow: none !important;
}
/* 标题降到 500（之前 600/700 在玻璃上 macOS subpixel 渲染会双线）*/
#soul-card.rune-mode .rune-name,
#mineral-card.rune-mode .rune-name {
    font-weight: 500 !important;
    font-style: normal !important;
}
#soul-card.rune-mode .rune-h,
#soul-card.rune-mode .rune-poem-h,
#soul-card.materia-mode .materia-h,
#soul-card.materia-mode .materia-eyebrow,
#mineral-card.rune-mode .rune-h,
#mineral-card.rune-mode .rune-poem-h,
#mineral-card.materia-mode .materia-h,
#mineral-card.materia-mode .materia-eyebrow {
    font-weight: 600 !important;
}
#soul-card.materia-mode .materia-name-zh,
#mineral-card.materia-mode .materia-name-zh {
    font-weight: 500 !important;
}
/* 卢恩符号本身保留发光（这是装饰性大字符，不算文字重影）*/
#soul-card.rune-mode .rune-symbol,
#mineral-card.rune-mode .rune-symbol {
    text-shadow:
        0 0 24px rgba(201, 165, 92, 0.45),
        0 1px 4px rgba(255, 240, 200, 0.4) !important;
}

/* 隐形滚动条（仅滑动时显示金色细线，跟其他卡片一致） */
#soul-card.rune-mode::-webkit-scrollbar,
#soul-card.materia-mode::-webkit-scrollbar,
#mineral-card.rune-mode::-webkit-scrollbar,
#mineral-card.materia-mode::-webkit-scrollbar { width: 4px; }
#soul-card.rune-mode::-webkit-scrollbar-thumb,
#soul-card.materia-mode::-webkit-scrollbar-thumb,
#mineral-card.rune-mode::-webkit-scrollbar-thumb,
#mineral-card.materia-mode::-webkit-scrollbar-thumb {
    background: rgba(201, 165, 92, 0.3);
    border-radius: 2px;
}

/* Mac 桌面端 #mineral-card 适配（参照星符卡 sigil-mode 的尺寸 240px / left:60px / top:8%） */
#mineral-card.rune-mode,
#mineral-card.materia-mode {
    /* ⚡ 完全复位 #mineral-card 默认的开盘动画状态 */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) rotateY(0) !important;   /* 复位默认 -40px / 0.9 / 10deg */
    display: block !important;                                  /* 复位默认 flex */
    gap: 0 !important;
    z-index: 1000;
    width: 240px !important;
    max-height: 86vh;
    top: 8% !important;
    left: 60px !important;
    padding: 14px 16px 16px !important;
    /* 缩小子元素以适配窄卡片 */
}
#mineral-card.rune-mode .rune-symbol {
    font-size: 64px;
    margin: 4px 0 2px;
}
#mineral-card.rune-mode .rune-name {
    font-size: 20px;
}
#mineral-card.rune-mode .rune-meta {
    font-size: 11px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}
#mineral-card.rune-mode .rune-h,
#mineral-card.materia-mode .materia-h {
    font-size: 10px;
}
#mineral-card.rune-mode .rune-p,
#mineral-card.materia-mode .materia-p,
#mineral-card.materia-mode .materia-list {
    font-size: 12.5px;
    line-height: 1.65;
}
#mineral-card.rune-mode .rune-poem-body {
    font-size: 11.5px;
    line-height: 1.7;
}
#mineral-card.rune-mode .rune-poem {
    padding: 8px 11px;
}
#mineral-card.rune-mode .rune-kw,
#mineral-card.materia-mode .materia-pill,
#mineral-card.materia-mode .materia-pet {
    font-size: 10.5px;
    padding: 3px 8px;
}
#mineral-card.materia-mode .materia-name-zh {
    font-size: 19px;
}
#mineral-card.materia-mode .materia-name-en {
    font-size: 11px;
}
/* Mac 端卢恩抽签：3 卢恩横排时压一压字号 */
#mineral-card.rune-cast-mode .rune-cast-cell .rune-cast-symbol {
    font-size: 24px;
}
#mineral-card.rune-cast-mode .rune-cast-cell .rune-cast-name {
    font-size: 11px;
}
#mineral-card.rune-cast-mode .rune-cast-cell .rune-cast-pos {
    font-size: 9px;
}

/* 关闭按钮 */
#soul-card .rune-close,
#mineral-card .rune-close {
    position: absolute;
    top: 10px; right: 14px;
    width: 32px; height: 32px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(201, 165, 92, 0.35);
    border-radius: 50%;
    color: #b08838;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 999;
    pointer-events: auto;
}
#soul-card .rune-close:hover {
    background: rgba(201, 165, 92, 0.18);
    color: #b08838;
}

/* ━━━━━━━━━━━━ 卢恩单卡 ━━━━━━━━━━━━ */
.rune-mode .rune-symbol {
    font-size: 96px;
    line-height: 1;
    text-align: center;
    color: #c9a55c;
    text-shadow:
        0 0 28px rgba(201, 165, 92, 0.45),
        0 2px 6px rgba(255, 240, 200, 0.5);
    margin: 6px 0 4px;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', serif;
}
.rune-mode .rune-name {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #2c1810;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
    font-style: italic;
}
.rune-mode .rune-meta {
    text-align: center;
    font-size: 12px;
    color: #b08838;
    font-style: italic;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(201, 165, 92, 0.4);
}

.rune-mode .rune-section { margin: 14px 0; }
.rune-mode .rune-h {
    font-size: 11px;
    font-weight: 700;
    color: #b08838;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid #c9a55c;
}
.rune-mode .rune-p {
    font-size: 14px;
    color: #2a3340;
    padding: 0 4px;
    white-space: pre-wrap;
    line-height: 1.75;
}

.rune-mode .rune-kws {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rune-mode .rune-kw {
    padding: 4px 12px;
    background: rgba(201, 165, 92, 0.12);
    border: 1px solid rgba(201, 165, 92, 0.35);
    border-radius: 14px;
    font-size: 12px;
    color: #6d5520;
    font-weight: 500;
}

.rune-mode .rune-poem {
    margin: 10px 0;
    padding: 12px 14px;
    background:
        linear-gradient(180deg,
            rgba(255, 252, 245, 0.8) 0%,
            rgba(248, 242, 230, 0.7) 100%);
    border-left: 3px solid #c9a55c;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rune-mode .rune-poem-h {
    font-size: 11px;
    font-weight: 700;
    color: #b08838;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}
.rune-mode .rune-poem-body {
    font-size: 13px;
    color: #3a3024;
    font-style: italic;
    line-height: 1.85;
    font-family: 'Noto Serif SC', serif;
}

.rune-mode .rune-loading,
.rune-mode .rune-error,
.rune-mode .rune-not-found,
.materia-mode .materia-loading,
.materia-mode .materia-error,
.materia-mode .materia-not-found {
    text-align: center;
    padding: 50px 20px;
    color: #b08838;
    font-style: italic;
    font-size: 14px;
}

/* ━━━━━━━━━━━━ 卢恩抽签 ━━━━━━━━━━━━ */
.rune-cast-mode .rune-cast-h {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #2c1810;
    letter-spacing: 0.08em;
    margin: 6px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(201, 165, 92, 0.4);
    font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
}
.rune-cast-grid {
    display: grid;
    gap: 10px;
}
.rune-cast-grid.rune-cast-1 { grid-template-columns: 1fr; }
.rune-cast-grid.rune-cast-3 { grid-template-columns: repeat(3, 1fr); }
.rune-cast-grid.rune-cast-9 { grid-template-columns: repeat(3, 1fr); }

.rune-cast-cell {
    padding: 12px 8px;
    background:
        linear-gradient(180deg,
            rgba(255, 252, 245, 0.78) 0%,
            rgba(248, 242, 230, 0.7) 100%);
    border: 1px solid rgba(201, 165, 92, 0.3);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow:
        0 2px 8px rgba(20, 30, 40, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rune-cast-cell:hover {
    background:
        linear-gradient(180deg,
            rgba(255, 245, 220, 0.85) 0%,
            rgba(248, 232, 200, 0.78) 100%);
    border-color: #c9a55c;
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(201, 165, 92, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.rune-cast-cell .rune-cast-pos {
    font-size: 10px;
    color: #b08838;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
    font-weight: 600;
}
.rune-cast-cell .rune-cast-symbol {
    font-size: 36px;
    color: #c9a55c;
    line-height: 1;
    margin: 6px 0;
    text-shadow: 0 0 14px rgba(201, 165, 92, 0.4);
}
.rune-cast-cell .rune-cast-name {
    font-size: 12px;
    color: #2c1810;
    font-weight: 600;
    font-style: italic;
}
.rune-cast-cell .rune-cast-tap {
    font-size: 10px;
    color: rgba(138, 106, 37, 0.7);
    margin-top: 4px;
}

/* ━━━━━━━━━━━━ 魔法材料 ━━━━━━━━━━━━ */
.materia-mode .materia-header {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(201, 165, 92, 0.4);
}
.materia-mode .materia-eyebrow {
    font-size: 11px;
    color: #b08838;
    letter-spacing: 0.22em;
    margin-bottom: 4px;
    font-weight: 600;
}
.materia-mode .materia-name-zh {
    font-size: 24px;
    font-weight: 600;
    color: #2c1810;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.materia-mode .materia-name-en {
    font-size: 13px;
    color: #6d5520;
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
}

.materia-mode .materia-corresps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
}
.materia-mode .materia-pill {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.materia-mode .materia-planet {
    background: rgba(201, 165, 92, 0.18);
    color: #b08838;
    border: 1px solid rgba(201, 165, 92, 0.4);
}
.materia-mode .materia-element {
    background: rgba(201, 165, 92, 0.18);
    color: #2a7a6a;
    border: 1px solid rgba(201, 165, 92, 0.4);
}
.materia-mode .materia-gender {
    background: rgba(180, 100, 140, 0.15);
    color: #8a3a5a;
    border: 1px solid rgba(180, 100, 140, 0.35);
}

.materia-mode .materia-section { margin: 12px 0; }
.materia-mode .materia-h {
    font-size: 11px;
    font-weight: 700;
    color: #b08838;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid #c9a55c;
}
.materia-mode .materia-p {
    font-size: 14px;
    color: #2a3340;
    padding: 0 4px;
    line-height: 1.75;
}
.materia-mode .materia-list {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    color: #2a3340;
    line-height: 1.75;
}
.materia-mode .materia-list li {
    margin: 3px 0;
}

.materia-mode .materia-pets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.materia-mode .materia-pet {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    letter-spacing: 0.03em;
}
.materia-mode .pet-ok {
    background: rgba(95, 168, 120, 0.15);
    color: #2a6a3a;
    border: 1px solid rgba(95, 168, 120, 0.4);
}
.materia-mode .pet-danger {
    background: rgba(200, 80, 80, 0.15);
    color: #a04040;
    border: 1px solid rgba(200, 80, 80, 0.4);
}

/* 移动窄屏适配 */
@media (max-width: 360px) {
    .rune-cast-grid.rune-cast-9 { gap: 6px; }
    .rune-cast-cell .rune-cast-symbol { font-size: 28px; }
}

/* ━━━━━━━━━━━━ 魔法背景特效（thinking 阶段触发）━━━━━━━━━━━━
   触发：body.magic-bg-active
   设计：极轻量 CSS-only — 整体星空呼吸辉光 + 4 颗流星划过
   性能：纯 transform / opacity 动画，GPU 友好，不影响响应速度
*/

/* 整体星空呼吸辉光（柔和的金色光晕从中心扩散） */
body.magic-bg-active::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%,
            rgba(201, 165, 92, 0.10) 0%,
            rgba(201, 165, 92, 0.04) 40%,
            transparent 75%);
    animation:
        magic-fade-in 0.8s ease-out forwards,
        magic-pulse 4s ease-in-out infinite;
}

/* 流动的混沌粒子（14 颗独立 mp-dot，由 fufu_gnosaria.js 注入） */
#magic-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}
body.magic-bg-active #magic-particles { opacity: 1; }

.mp-dot {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    filter: blur(0.5px);
    animation-name: mp-drift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/* 三色粒子：主暗金 60% / 奶油白 20% / 薄荷绿点缀 20% */
.mp-dot[data-hue="gold"]  { background: radial-gradient(circle, rgba(201,165,92,0.85) 0%, transparent 70%); box-shadow: 0 0 8px rgba(201,165,92,0.4); }
.mp-dot[data-hue="cream"] { background: radial-gradient(circle, rgba(255,240,200,0.85) 0%, transparent 70%); box-shadow: 0 0 8px rgba(255,240,200,0.35); }
.mp-dot[data-hue="mint"]  { background: radial-gradient(circle, rgba(95,184,168,0.7)  0%, transparent 70%); box-shadow: 0 0 8px rgba(95,184,168,0.3); }

@keyframes magic-fade-in { to { opacity: 1; } }
@keyframes magic-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.85; }
}
@keyframes mp-drift {
    /* 漂浮 + 缩放 + 透明度变化 = 混沌粒子感 */
    0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
    20%  { opacity: 0.9; }
    50%  { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 1; }
    80%  { opacity: 0.7; }
    100% { transform: translate(calc(var(--dx) * -0.6), calc(var(--dy) * 1.4)) scale(0.6); opacity: 0; }
}