/* ============================================================
   Word Wings (单词之翼) — Stylesheet
   ============================================================ */

/* Google Fonts & Tailwind variables */
body {
    background-color: #04040c;
    font-family: 'Quicksand', 'Chakra Petch', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* 科技感网格背景 */
.cyber-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.07) 1px, transparent 1px);
}

/* 霓虹发光文字 */
.text-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.4);
}
.text-glow-yellow {
    text-shadow: 0 0 10px rgba(255, 240, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.3);
}

/* 霓虹发光按钮/边框 */
.box-glow-blue {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}
.box-glow-purple {
    box-shadow: 0 0 15px rgba(189, 0, 255, 0.4);
}
.box-glow-green {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

/* 按钮扫光动画 */
@keyframes shine {
    100% {
        transform: skewX(-12deg) translateX(250%);
    }
}
.animate-shine {
    animation: shine 1.6s ease-in-out infinite;
}

/* 缓慢旋转 */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* 缓慢呼吸缩放 (用于终极 Boss 小花完整图的灵动呈现) */
@keyframes pulse-slow {
    0%, 100% { transform: scale(1.05); filter: brightness(1) saturate(1.05); }
    50% { transform: scale(1.1); filter: brightness(1.12) saturate(1.25); }
}
.animate-pulse-slow {
    animation: pulse-slow 6s ease-in-out infinite;
}

/* 终极 Boss「小花」解锁登场演出：从虚化高光中由小放大、揭幕浮现 */
@keyframes boss-reveal {
    0%   { transform: scale(0.35); opacity: 0; filter: blur(24px) brightness(2.6) saturate(1.4); }
    45%  { opacity: 1; filter: blur(4px) brightness(1.7) saturate(1.3); }
    100% { transform: scale(1.05); opacity: 1; filter: blur(0) brightness(1) saturate(1.05); }
}
.boss-reveal {
    animation: boss-reveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 解锁白光闪屏 */
@keyframes boss-flash {
    0%   { opacity: 0; }
    8%   { opacity: 0.95; }
    100% { opacity: 0; }
}
.boss-flash {
    animation: boss-flash 1.3s ease-out both;
}

/* 解锁爆发光环（自中心向外扩散消散） */
@keyframes boss-ring {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.boss-ring {
    animation: boss-ring 1.5s ease-out both;
}

/* 滚动条美化 */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(10, 10, 26, 0.4);
    border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(189, 0, 255, 0.3);
    border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(189, 0, 255, 0.6);
}

/* ============================================================
   屏幕层级 (Z-Index) 显式定义
   Tailwind 默认仅支持 z-0/10/20/30/40/50，z-15/z-35/z-45 等非标准类会
   静默失效为 auto，导致弹窗被 z-10 的游戏画布盖住（如小花唤醒卡死）。
   这里用 ID 选择器显式锁定层级，确保任何情况下层叠顺序都正确。
   ============================================================ */
#game-screen        { z-index: 10; }
#map-screen         { z-index: 15; }
#home-screen        { z-index: 20; }
#briefing-screen    { z-index: 30; }
#pause-screen       { z-index: 35; }
#victory-screen,
#gameover-screen    { z-index: 40; }
#boss-awakened-screen,
#parent-screen,
#settings-screen    { z-index: 45; }
#loading-screen     { z-index: 50; }

/* 隐藏 DOM 节点时的渐变效果 */
.hidden-screen {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.98);
}

.visible-screen {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1);
}

div, button, img {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* 地图关卡按钮样式 */
.map-level-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.map-level-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #00f0ff, #bd00ff);
    z-index: -1;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.map-level-btn.locked {
    background: rgba(15, 15, 30, 0.9) !important;
    border: 2px solid #334155 !important;
    box-shadow: none !important;
}

.map-level-btn.locked::before {
    display: none;
}

.map-level-btn:hover:not(.locked) {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.8);
}

/* 星星背景粒子 */
.star-particle {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    opacity: var(--opacity);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1.0; }
}

/* 拼词提示和发光 */
.word-card-active {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
    border-color: #00f0ff !important;
}

/* 战机火焰粒子 */
.thruster-spark {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ff5e00 0%, #ffbb00 60%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Canvas 的游戏面板拉伸适应 */
#gameCanvas {
    background-color: #020208;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* 打击震屏动画 */
@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-4px, -2px); }
    20%, 40%, 60%, 80% { transform: translate(4px, 2px); }
}
.shake-screen {
    animation: shake 0.3s ease-out;
}