/* =========================================================
   COOLLF.GAMES · 全站童话天空草地主题
   所有页面在各自内联样式 / css/style.css 之后加载本文件。
   只做换肤，不改 DOM 结构、不改任何页面功能。
   ========================================================= */

/* ---------- 1. 统一色板 ---------- */
:root {
    /* 主题私有变量（不污染各页自身的变量命名空间） */
    --f-ink: #24455F;
    --f-ink-soft: #4C6B7E;
    --f-paper: rgba(255, 253, 245, .88);
    --f-paper-solid: #FFFCF3;
    --f-line: rgba(96, 158, 178, .26);
    --f-sky: #A9DCF3;
    --f-grass: #7DBE78;
    --f-round: 'Poppins', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

    /* 覆盖 css/style.css 与首页 / 工具页 tailwind.config 的霓虹色板 */
    --neon-cyan: #2E86BE;
    --neon-purple: #8A6CC0;
    --neon-pink: #DD7397;
    --neon-green: #4FA36A;
    --neon-yellow: #D9A63C;
    --dark-900: #F2FAFF;
    --dark-800: #FFFCF3;
    --dark-700: #E4F2FA;

    /* 子工具页（business-canvas）变量换肤 */
    --bg: #F2FAFF;
    --surface: #FFFCF3;
    --surface2: #E9F4FA;
    --border: rgba(96, 158, 178, .30);
    --accent: #3E8CB8;
    --accent2: #8A6CC0;
    --text: #24455F;
    --text2: #4C6B7E;
    --text3: #6A8795;
    --green: #4FA36A;
    --yellow: #D9A63C;
    --red: #C65C54;
    --pink: #DD7397;
    --cyan: #2E86BE;
    --orange: #E29A51;
    --shadow: 0 12px 32px rgba(72, 132, 158, .16);

    /* 子工具页（qrcode-review）变量换肤 */
    --bg-primary: #F2FAFF;
    --bg-secondary: #FFFCF3;
    --bg-card: rgba(255, 253, 245, .88);
    --accent-glow: rgba(46, 134, 190, .20);
    --text-primary: #24455F;
    --text-secondary: #4C6B7E;
    --success: #4FA36A;
    --error: #C65C54;
}

/* ---------- 2. 天空与纸面 ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--f-round) !important;
    color: var(--f-ink) !important;
    /* 渐变只铺第一屏（100vh），随页面一起滚走；之下用同色底衔接，避免出现接缝 */
    background-color: #F1F8E9 !important;
    background-image:
        radial-gradient(ellipse at 80% 6%, rgba(255, 231, 164, .55) 0%, rgba(255, 231, 164, 0) 44%),
        radial-gradient(ellipse at 12% 30%, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, #A9DCF3 0%, #D3EDFA 26%, #EEF9F4 52%, #FFFCF0 76%, #F1F8E9 100%) !important;
    background-size: 100% 100vh !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
}

::selection { background: rgba(79, 163, 106, .28); color: var(--f-ink); }
::-webkit-scrollbar-track { background: #E9F4FB; }
::-webkit-scrollbar-thumb { background: #A8CDDF; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }
a:focus-visible, button:focus-visible { outline: 2px solid #2E86BE !important; outline-offset: 2px; }

/* ---------- 3. 风景层（作用域限定，避免影响 music.html 自带的 .scenery）
   随页面滚动：整层贴在文档顶部，高度由 js/fairy-scenery.js 写成实际文档高度 ——
   天空留在页面开头，草坡落在页面末尾，滚动时整层跟着内容一起走，
   不再是钉在屏幕上不动的壁纸，也不会有一条草坡横穿内容卡片。 */
.fairy-scenery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fairy-scenery .sky-art { position: absolute; top: 0; left: 0; width: 100%; height: 430px; opacity: .95; }
.fairy-scenery .ground-art { position: absolute; bottom: 0; left: 0; width: 100%; height: 235px; }
.fairy-scenery .cloud { animation: fairy-drift 20s ease-in-out infinite alternate; }
.fairy-scenery .cloud.c2 { animation-duration: 28s; animation-delay: -7s; }
.fairy-scenery .cloud.c3 { animation-duration: 24s; animation-delay: -12s; }
.fairy-scenery .sun .rays { transform-box: fill-box; transform-origin: center; animation: fairy-spin 52s linear infinite; }
.fairy-scenery .flower-sway { transform-origin: center bottom; animation: fairy-sway 5.5s ease-in-out infinite; }
.fairy-scenery .butterfly { animation: fairy-flutter 4.6s ease-in-out infinite; }

@keyframes fairy-drift { from { transform: translateX(0); } to { transform: translateX(46px); } }
@keyframes fairy-spin { to { transform: rotate(360deg); } }
@keyframes fairy-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes fairy-flutter { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -10px); } }

/* 粒子层原本 fixed，跟着风景层一起改为随页面滚动 */
#particle-canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    opacity: .3;
    mix-blend-mode: multiply;
}

/* 内容统一抬到风景层之上 */
#hero, #games, #features, #about, footer,
#topbar, #app, #sidebar, .container, .main-content, .main, .app {
    position: relative;
    z-index: 1;
}

/* ---------- 4. 深色主题遗留的浅色文字类全部转墨色 ---------- */
.text-white,
.hero-title .text-white { color: var(--f-ink) !important; }
.text-gray-300 { color: #3E6076 !important; }
.text-gray-400 { color: #4C6B7E !important; }
.text-gray-500 { color: #587687 !important; }
.text-gray-600 { color: #6A8795 !important; }
.text-gray-700 { color: #7995A2 !important; }
.text-dark-900 { color: #1E3C55 !important; }
.text-neon-cyan { color: #1C74AC !important; }
.text-neon-purple { color: #6B4C9E !important; }
.text-neon-pink { color: #B84F76 !important; }
.text-neon-green { color: #3D8A57 !important; }

h1, h2, h3 { letter-spacing: .01em; }

.hero-title .bg-clip-text {
    background-image: linear-gradient(90deg, #1C74AC 0%, #6B4C9E 48%, #B84F76 100%) !important;
    -webkit-text-fill-color: transparent;
}
.hero-title .text-white { color: #2A4E69 !important; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }

/* ---------- 5. 导航：奶油玻璃条 ---------- */
#navbar {
    background: rgba(255, 253, 245, .78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--f-line);
    box-shadow: 0 4px 22px rgba(72, 132, 158, .10);
}
#navbar.scrolled {
    background: rgba(255, 253, 245, .94) !important;
    border-bottom: 1px solid var(--f-line) !important;
    box-shadow: 0 6px 26px rgba(72, 132, 158, .14) !important;
}
#navbar .lang-btn { color: #456A7E !important; }
#navbar button[data-i18n="nav_play"] { color: #1C5F8C !important; border-color: rgba(46, 134, 190, .45) !important; }
#navbar .lang-btn:hover, #navbar .lang-btn.active { color: #1C74AC !important; }
#mobile-menu { background: rgba(255, 253, 245, .97) !important; border-bottom: 1px solid var(--f-line); }
#mobile-menu-btn { border-color: var(--f-line) !important; background: rgba(255, 255, 255, .55); }
#mobile-menu-btn span { background: #39708F !important; }
#mobile-menu-btn.active span:nth-child(1),
#mobile-menu-btn.active span:nth-child(3) { background: #2E86BE !important; }
#navbar .border-t { border-color: var(--f-line) !important; }
#navbar a > .w-10.h-10, footer .w-8.h-8 { color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(50, 90, 110, .25); }

/* ---------- 6. 卡片：奶油纸 + 柔和投影 ---------- */
#games [class*="bg-dark-800"],
#features [class*="bg-dark-800"],
#about [class*="bg-dark-800"] {
    border: 1px solid var(--f-line);
    box-shadow: 0 12px 34px rgba(72, 132, 158, .12);
}
.game-card > div, .feature-card {
    border: 1px solid var(--f-line) !important;
    box-shadow: 0 10px 30px rgba(72, 132, 158, .13);
    border-radius: 18px;
}
.feature-card { background: var(--f-paper) !important; }
.feature-card:hover { box-shadow: 0 16px 38px rgba(72, 132, 158, .22) !important; }
.game-card .aspect-video { border: 1px solid rgba(96, 158, 178, .28) !important; }
.game-card::before { background: linear-gradient(135deg, transparent 40%, rgba(46, 134, 190, .10) 50%, transparent 60%); }
.game-card:hover::before { background: linear-gradient(135deg, transparent, rgba(46, 134, 190, .28), rgba(138, 108, 192, .28), transparent); }
[class*="eaf7fd"] { border: 1px solid rgba(96, 158, 178, .3) !important; box-shadow: 0 8px 22px rgba(72, 132, 158, .16); }
.rounded-full.border { border-color: rgba(96, 158, 178, .32); }

/* ---------- 7. 按钮 ---------- */
#hero a[href="#games"], #about a[href="#games"] {
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 10px 26px rgba(72, 132, 158, .28);
}
#hero a[href="#games"]:hover, #about a[href="#games"]:hover { box-shadow: 0 14px 32px rgba(46, 134, 190, .35); }
#hero a[href="#about"] { border-color: rgba(96, 158, 178, .45) !important; background: rgba(255, 255, 255, .55); }
#hero a[href="#about"]:hover { background: rgba(255, 255, 255, .9) !important; }

#hero a[href="#games"],
#about a[href="#games"],
a[href="music.html"].bg-gradient-to-r,
a[href="tools.html"].bg-gradient-to-r,
#mobile-menu button[data-i18n="nav_play"] {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(28, 64, 90, .45);
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 8px 22px rgba(46, 134, 190, .22), 0 0 0 0 rgba(242, 200, 108, .25); }
    50% { box-shadow: 0 12px 30px rgba(46, 134, 190, .32), 0 0 0 8px rgba(242, 200, 108, .12); }
}

/* ---------- 8. 页脚 ---------- */
/* 半透明页脚：页面末尾的草坡从背后透出来，收尾落在草地上 */
footer {
    border-top: 1px solid rgba(96, 158, 178, .22) !important;
    background: rgba(255, 253, 245, .52);
}
footer a { color: #3E6076 !important; }
footer a:hover { color: #1C74AC !important; }

/* 首页草坡上的滚动提示 */
#hero .absolute.bottom-10 {
    background: rgba(255, 253, 245, .82);
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--f-line);
    box-shadow: 0 4px 16px rgba(60, 120, 90, .18);
}
#hero .absolute.bottom-10 span, #hero .absolute.bottom-10 svg { color: #2E6A88 !important; }

/* ---------- 9. tools.html ---------- */
.tool-card {
    background: var(--f-paper) !important;
    border: 1px solid var(--f-line) !important;
    box-shadow: 0 10px 28px rgba(72, 132, 158, .14);
    border-radius: 18px !important;
    /* 旧霓虹光晕是绝对定位的大色块，会在窄屏把页面撑出横向滚动 */
    overflow: hidden;
}
.tool-card:hover {
    border-color: rgba(46, 134, 190, .42) !important;
    box-shadow: 0 18px 38px rgba(72, 132, 158, .24) !important;
}
.tool-icon { -webkit-text-fill-color: transparent; }

/* ---------- 10. music.html：保留自身风景与功能布局，只统一纸面质感 ---------- */
.fairy-music {
    background-image:
        linear-gradient(180deg, #A9DCF3 0%, #D3EDFA 26%, #EEF9F4 58%, #E6F3D6 100%) !important;
    /* 播放器是一整屏工作台，渐变铺满整页，避免第一屏下方出现接缝 */
    background-size: 100% 100% !important;
}
.app { position: relative; z-index: 1; }
.page, .modal-card, .keyboard {
    border-radius: 12px !important;
    border-color: rgba(96, 158, 178, .34) !important;
    box-shadow: 0 14px 36px rgba(72, 132, 158, .16) !important;
}
.page { background: rgba(255, 253, 245, .94) !important; }
.page-head, .page-foot, .console section { border-color: rgba(96, 158, 178, .26) !important; }
.btn:hover { border-color: #2E86BE !important; color: #1C74AC !important; }
.inst.active { background: #3E8CB8 !important; border-color: #3E8CB8 !important; }
.progress { background: #DCEBF3 !important; }
.play-btn { background: #3E8CB8 !important; }
.topbar { border-bottom-color: rgba(96, 158, 178, .3) !important; }

/* ---------- 11. business-canvas ---------- */
#topbar, #sidebar, .btn, .title-input, .inspiration-textarea {
    background-color: var(--f-paper-solid);
    color: var(--f-ink);
}
#topbar { background-color: rgba(255, 253, 245, .9); backdrop-filter: blur(12px); }
#sidebar { background-color: rgba(255, 253, 245, .92); }
.canvas-grid { background-color: rgba(255, 253, 245, .35) !important; }
.canvas-section, .card, .inspiration-note {
    background: var(--f-paper) !important;
    border-color: var(--f-line) !important;
    box-shadow: 0 6px 18px rgba(72, 132, 158, .12);
}
.btn.primary { background: #3E8CB8 !important; border-color: #3E8CB8 !important; color: #fff !important; }
.btn.danger { color: #B3473F !important; border-color: rgba(179, 71, 63, .35) !important; }
.modal-overlay, .modal { background-color: rgba(36, 69, 95, .32) !important; }

/* ---------- 12. mermaid-editor ----------
   注意：这一节的通用选择器必须限定在 .fairy-mermaid 内。
   曾经写成全局 `textarea { background:#FFFEFB !important; color:… !important }`，
   结果把 music.html 的谱面编辑器也染成不透明底色，盖住了下面 #highlight 层的
   语法着色和「当前正在响的音符」高亮（播放时选中音符看起来完全失效）。 */
.fairy-mermaid header, .fairy-mermaid .panel, .fairy-mermaid .panel-header,
.fairy-mermaid .output-panel, .fairy-mermaid .zoom-bar, .fairy-mermaid .theme-select {
    background-color: rgba(255, 253, 245, .92) !important;
    border-color: var(--f-line) !important;
}
.fairy-mermaid header h1, .fairy-mermaid textarea,
.fairy-mermaid .panel, .fairy-mermaid .panel-header { color: var(--f-ink) !important; }
.fairy-mermaid .btn, .fairy-mermaid .zoom-bar button {
    background-color: #F0F8FC !important;
    border-color: var(--f-line) !important;
    color: var(--f-ink) !important;
}
.fairy-mermaid .btn-primary, .fairy-mermaid .btn-success {
    color: #FFFFFF !important;
    border-color: transparent !important;
}
.fairy-mermaid .btn-primary { background-color: #3E8CB8 !important; }
.fairy-mermaid .btn-success { background-color: #4FA36A !important; }
.fairy-mermaid textarea { background-color: #FFFEFB !important; }
.fairy-mermaid .diagram-wrapper, .fairy-mermaid #diagram-container { background-color: #FFFCF3 !important; }

/* ---------- 13. qrcode-review ----------
   同上：限定在 .fairy-qrcode，避免 .toast / header / .container 等通用类
   被其它页面（尤其 music.html）误伤。 */
body.fairy-qrcode::before { background: none !important; opacity: .35; }
.fairy-qrcode .container, .fairy-qrcode header, .fairy-qrcode .panel,
.fairy-qrcode .result-panel, .fairy-qrcode .upload-area,
.fairy-qrcode .result-field, .fairy-qrcode footer {
    background-color: transparent;
    border-color: var(--f-line);
    color: var(--f-ink);
}
.fairy-qrcode .panel, .fairy-qrcode .result-panel, .fairy-qrcode .upload-area {
    background: var(--f-paper) !important;
    border: 1px solid var(--f-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(72, 132, 158, .14) !important;
}
.fairy-qrcode .upload-area.drag-over { border-color: #2E86BE !important; background: rgba(233, 244, 250, .95) !important; }
.fairy-qrcode .btn-primary, .fairy-qrcode .btn-secondary {
    color: #FFFFFF !important;
    border-color: transparent !important;
}
.fairy-qrcode .btn-primary { background: #3E8CB8 !important; }
.fairy-qrcode .btn-secondary { background: #8A6CC0 !important; }
.fairy-qrcode .logo-icon, .fairy-qrcode .panel-icon { color: #2E86BE !important; }
.fairy-qrcode .toast { background: #FFFFFF !important; color: var(--f-ink) !important; }

/* ---------- 14. 子工具页精修（按页面特征精确定位，互不干扰） ---------- */

/* qrcode-review：标题原本是「白→浅紫」渐变文字，换到浅底后几乎看不见 */
.fairy-qrcode h1 {
    background: linear-gradient(90deg, #1C74AC 0%, #6B4C9E 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.fairy-qrcode .upload-text,
.fairy-qrcode .panel-title,
.fairy-qrcode .result-label { color: var(--f-ink) !important; }

/* business-canvas：画布容器原本是不透明底色，把底部草坡挡住了 */
.fairy-canvas #canvas-wrap { background: transparent !important; }
.fairy-canvas .section-subtitle,
.fairy-canvas .section-name { color: var(--f-ink) !important; }

/* mermaid-editor：两栏面板铺满视口，改成半透明纸让天空草地透出来 */
.fairy-mermaid header,
.fairy-mermaid .panel,
.fairy-mermaid .panel-header,
.fairy-mermaid .output-panel,
.fairy-mermaid textarea,
.fairy-mermaid .diagram-wrapper,
.fairy-mermaid #diagram-container {
    background-color: rgba(255, 253, 245, .68) !important;
}
.fairy-mermaid .panel-header { color: #3E6076 !important; }
.fairy-mermaid textarea::placeholder { color: #7E9BAD !important; }
.fairy-mermaid header .badge { background: #E4F2FA !important; color: #3E6076 !important; }
.fairy-mermaid .empty-state p { color: #4C6B7E !important; }
.fairy-mermaid .zoom-bar { background-color: rgba(255, 253, 245, .9) !important; }
/* 结果区留白大，进一步透出天空与草坡；左侧编辑区保持纸感便于阅读 */
.fairy-mermaid .diagram-wrapper,
.fairy-mermaid #diagram-container { background-color: rgba(255, 253, 245, .34) !important; }

/* ---------- 15. 小屏与动效偏好 ---------- */
@media (max-width: 640px) {
    .hero-title { font-size: clamp(1.8rem, 9vw, 2.5rem) !important; }
    #hero .hero-subtitle { font-size: .98rem !important; }
    #hero .grid.grid-cols-3 { gap: .5rem !important; }
    #hero .counter { font-size: 1.5rem !important; }
    .fairy-scenery .sky-art { height: 330px; }
    .fairy-scenery .ground-art { height: 190px; }
}

/* Mermaid 编辑器原本两栏强制并排，窄屏会横向溢出；改为上下堆叠 */
@media (max-width: 768px) {
    .fairy-mermaid .main {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-width: 0;
    }
    .fairy-mermaid .panel {
        min-width: 0;
        border-right: 0 !important;
        border-bottom: 1px solid var(--f-line);
    }
    .fairy-mermaid .panel-header,
    .fairy-mermaid .panel-actions { flex-wrap: wrap; gap: 6px; }
    .fairy-mermaid textarea { min-height: 320px; }
    .fairy-mermaid .diagram-wrapper { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .fairy-scenery *, .cloud, .sun .rays, .flower-sway, .butterfly,
    .animate-float, .animate-pulse-glow, .animate-bounce, .animate-gradient-flow {
        animation: none !important;
    }
    .scroll-animate { opacity: 1 !important; transform: none !important; }
    * { transition-duration: .01ms !important; }
}

/* ---------- 16. 功能性兜底：music.html 的谱面高亮层 ----------
   谱面编辑器是「双层结构」：#highlight（z-index:1）画语法着色与当前音符高亮，
   #editor（z-index:2）是透明 textarea，只负责光标与输入。
   任何把 #editor 变成不透明底色 / 有色文字的通用规则都会让整层高亮不可见，
   所以这里用高优先级把它钉死。放在文件末尾，确保优先级高于前面所有换肤规则。 */
.fairy-music #editor {
    background-color: transparent !important;
    color: transparent !important;
}
.fairy-music #highlight { z-index: 1; }
.fairy-music #highlight .playing {
    background: #FFE9A8 !important;
    color: #8A4B12 !important;
    box-shadow: 0 0 0 3px #FFE9A8 !important;
}