@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root {
    --bg-color: #050505;
    --board-bg: #111111;
    --cell-empty: #1a1a1a;
    --text-main: #e0e0e0;
    
    /* 霓虹色谱 */
    --tile-2: #00ffff;
    --tile-4: #00ff99;
    --tile-8: #bfff00;
    --tile-16: #ffff00;
    --tile-32: #ff9900;
    --tile-64: #ff0055;
    --tile-128: #ff00ff;
    --tile-256: #9900ff;
    --tile-512: #0099ff;
    --tile-1024: #ffffff;
    --tile-2048: #ffd700;
}

body {
    font-family: 'Orbitron', sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%);
    color: var(--text-main);
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    perspective: 1200px;
}

/* HUD */
.hud-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 360px;
    margin-bottom: 30px;
    z-index: 10;
}

h1 {
    font-size: 60px;
    margin: 0;
    line-height: 1;
    background: linear-gradient(to bottom, #fff, #777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.score-box {
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #333;
    padding: 5px 15px;
    border-radius: 4px;
    text-align: right;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

.score-label {
    font-size: 10px;
    color: #888;
    letter-spacing: 2px;
}

.score-val {
    font-size: 24px;
    color: #00ff99;
    text-shadow: 0 0 10px rgba(0, 255, 153, 0.6);
}

/* 3D Stage */
.stage {
    position: relative;
    transform-style: preserve-3d;
}

/* Board */
.game-board {
    position: relative;
    width: 360px;
    height: 360px;
    background: var(--board-bg);
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.8),
        inset 0 0 0 1px #333,
        inset 0 0 30px rgba(0,0,0,1);
    transform-style: preserve-3d;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tilt-up { transform: rotateX(8deg); }
.tilt-down { transform: rotateX(-8deg); }
.tilt-left { transform: rotateY(-8deg); }
.tilt-right { transform: rotateY(8deg); }

/* Grid Layer */
.grid-layer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    height: 100%;
}

.grid-cell {
    background: var(--cell-empty);
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    border: 1px solid #222;
}

/* Tile Layer */
.tile-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: none;
}

.tile {
    position: absolute;
    width: 71.25px;
    height: 71.25px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #111;
    z-index: 2;
    transform: translateZ(10px); 
    transition: left 0.15s ease-in-out, top 0.15s ease-in-out, transform 0.15s ease-out;
    box-shadow: 0 0 15px currentColor;
    border: 1px solid rgba(255,255,255,0.2);
}

.tile-new { animation: spawn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.tile-merged { animation: pulse 0.15s ease-in-out forwards; z-index: 3; }

@keyframes spawn {
    0% { transform: scale(0) translateZ(0); opacity: 0; }
    100% { transform: scale(1) translateZ(10px); opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1) translateZ(10px); }
    50% { transform: scale(1.15) translateZ(20px); box-shadow: 0 0 30px currentColor; }
    100% { transform: scale(1) translateZ(10px); }
}

/* Tile Colors */
.t-2 { background: transparent; color: var(--tile-2); box-shadow: inset 0 0 15px var(--tile-2), 0 0 5px var(--tile-2); border: 1px solid var(--tile-2); }
.t-4 { background: transparent; color: var(--tile-4); box-shadow: inset 0 0 15px var(--tile-4), 0 0 5px var(--tile-4); border: 1px solid var(--tile-4); }
.t-8 { background: var(--tile-8); color: #000; box-shadow: 0 0 15px var(--tile-8); }
.t-16 { background: var(--tile-16); color: #000; box-shadow: 0 0 15px var(--tile-16); }
.t-32 { background: var(--tile-32); color: #fff; box-shadow: 0 0 20px var(--tile-32); }
.t-64 { background: var(--tile-64); color: #fff; box-shadow: 0 0 25px var(--tile-64); }
.t-128 { background: var(--tile-128); color: #fff; font-size: 24px; box-shadow: 0 0 30px var(--tile-128); }
.t-256 { background: var(--tile-256); color: #fff; font-size: 24px; box-shadow: 0 0 35px var(--tile-256); }
.t-512 { background: var(--tile-512); color: #fff; font-size: 24px; box-shadow: 0 0 40px var(--tile-512); }
.t-1024 { background: var(--tile-1024); color: #000; font-size: 20px; box-shadow: 0 0 45px var(--tile-1024); }
.t-2048 { background: var(--tile-2048); color: #000; font-size: 20px; box-shadow: 0 0 50px var(--tile-2048); }

/* Overlay */
.overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}
.overlay.active { opacity: 1; pointer-events: auto; }
.game-over-text { font-size: 40px; font-weight: 700; color: #ff0055; text-shadow: 0 0 20px #ff0055; margin-bottom: 20px; }
button {
    background: transparent; color: #00ff99; border: 2px solid #00ff99; padding: 10px 30px;
    font-size: 18px; font-family: 'Orbitron', sans-serif; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 0 10px rgba(0,255,153,0.2);
}
button:hover { background: #00ff99; color: #000; box-shadow: 0 0 30px #00ff99; }
.controls-hint { margin-top: 40px; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* 保持之前的 style.css 内容不变，在最后追加以下内容 */

/* 头部布局调整 */
.hud-container { align-items: center; }
.header-left { display: flex; flex-direction: column; }
.subtitle { font-size: 12px; color: #ff0055; letter-spacing: 2px; font-weight: bold; }
.stats { display: flex; gap: 10px; }

/* 能量条样式 */
.energy-box { border-color: #0099ff; min-width: 80px; }
.energy-box .val { color: #0099ff; text-shadow: 0 0 10px rgba(0, 153, 255, 0.6); }
.energy-bar-bg { width: 100%; height: 4px; background: #333; margin-top: 5px; border-radius: 2px; overflow: hidden; }
.energy-bar-fill { height: 100%; width: 0%; background: #0099ff; transition: width 0.3s; box-shadow: 0 0 5px #0099ff; }

/* 技能栏 */
.skills-container {
    display: flex; gap: 20px; margin-top: 30px; margin-bottom: 20px;
}

.skill-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100px; height: 80px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #444; color: #888;
    border-radius: 8px; cursor: not-allowed;
    transition: all 0.2s;
    box-shadow: none; padding: 0;
}

.skill-btn .icon { font-size: 24px; margin-bottom: 5px; }
.skill-btn .name { font-size: 12px; font-weight: bold; }
.skill-btn .cost { font-size: 10px; margin-top: 2px; opacity: 0.7; }

/* 技能激活状态 */
.skill-btn.active {
    border-color: #0099ff; color: #0099ff; cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.2);
}
.skill-btn.active:hover { background: rgba(0, 153, 255, 0.1); box-shadow: 0 0 20px rgba(0, 153, 255, 0.4); }
.skill-btn.active:active { transform: scale(0.95); }

/* Purge 技能特殊色 */
.skill-btn#btn-purge.active { border-color: #ff0055; color: #ff0055; }
.skill-btn#btn-purge.active:hover { background: rgba(255, 0, 85, 0.1); box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); }

/* 瞄准模式 */
.game-board.targeting { border: 2px solid #ff0055; cursor: crosshair; }
.targeting-layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 0, 85, 0.1);
    display: flex; align-items: center; justify-content: center;
    color: #ff0055; font-size: 24px; font-weight: bold;
    text-shadow: 0 0 10px #000;
    pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 50;
}
.game-board.targeting .targeting-layer { opacity: 1; }

/* 瞄准时，Tile 的悬停效果 */
.game-board.targeting .tile { pointer-events: auto; cursor: pointer; }
.game-board.targeting .tile:hover { filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); transform: scale(1.1) translateZ(20px) !important; z-index: 100; }

/* --- 在原有 CSS 基础上追加 --- */

/* DLC 开关 */
.dlc-control {
    position: absolute; top: 20px; right: 20px;
    z-index: 50;
}
.switch-container {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 20px; border: 1px solid #333;
}
.switch-label { font-size: 10px; color: #555; font-weight: bold; transition: color 0.3s; }
.switch-label.active-label { color: #ff0055; text-shadow: 0 0 5px #ff0055; }
.switch-container input { display: none; }
.slider {
    width: 40px; height: 20px; background-color: #333; border-radius: 20px; position: relative; transition: .4s;
}
.slider:before {
    content: ""; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px;
    background-color: #888; border-radius: 50%; transition: .4s;
}
input:checked + .slider { background-color: #ff0055; }
input:checked + .slider:before { transform: translateX(20px); background-color: #fff; }

/* 战斗 HUD */
.battle-hud { flex-direction: column; width: 220px; align-items: stretch; gap: 5px; }
.battle-info { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.level-indicator { color: #00ff99; }
.enemy-name { color: #ff0055; font-weight: bold; }

.hp-box { margin-bottom: 4px; }
.hp-label { font-size: 8px; color: #aaa; margin-bottom: 1px; display: flex; justify-content: space-between; }
.hp-text { font-size: 9px; text-align: right; color: #fff; margin-top: -12px; margin-right: 2px; position: relative; z-index: 2; text-shadow: 0 0 2px #000; }

.hp-bar-bg { width: 100%; height: 10px; background: #222; border-radius: 2px; overflow: hidden; border: 1px solid #444; }
.hp-bar-fill { height: 100%; transition: width 0.3s ease-out; }

/* 敌人血条 (红色) */
.enemy-hp .hp-bar-fill { background: linear-gradient(90deg, #ff0055, #ff5500); box-shadow: 0 0 5px #ff0055; }
/* 玩家血条 (绿色) */
.player-hp .hp-bar-fill { background: linear-gradient(90deg, #0099ff, #00ff99); box-shadow: 0 0 5px #00ff99; }

/* 伤害数字浮动动画 */
.damage-number {
    position: absolute; color: #ff0055; font-weight: bold; font-size: 24px;
    text-shadow: 0 0 5px #fff; pointer-events: none; z-index: 20;
    animation: floatUp 0.8s ease-out forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}

/* 受到攻击时的屏幕震动 */
.shake { animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 游戏结束文字 */
.game-over-sub { font-size: 14px; color: #888; margin-bottom: 15px; }


/* --- Monster Avatar Styles --- */

.monster-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; /* 给怪物留出空间 */
    margin-bottom: 10px;
    position: relative;
}

/* 怪物主体：一个菱形核心 */
.monster-avatar {
    width: 60px;
    height: 60px;
    background: #111;
    border: 2px solid #ff0055;
    transform: rotate(45deg); /* 菱形 */
    box-shadow: 0 0 15px #ff0055, inset 0 0 10px #ff0055;
    position: relative;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 怪物眼睛 */
.monster-eye {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%; /* 圆形瞳孔 */
    box-shadow: 0 0 10px #fff, 0 0 20px #ff0055;
    transform: rotate(-45deg); /* 抵消父容器旋转，保持眼睛正向（如果是猫眼形状的话） */
    animation: idle-breathe 2s infinite ease-in-out;
}

/* --- 动画关键帧 --- */

/* 1. 待机呼吸 */
@keyframes idle-breathe {
    0%, 100% { transform: rotate(-45deg) scale(0.8); opacity: 0.8; }
    50% { transform: rotate(-45deg) scale(1.1); opacity: 1; }
}

/* 2. 受击效果 (Hurt) - 剧烈故障 */
.monster-avatar.hurt {
    animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    border-color: #fff;
    background: #ff0055;
}

.monster-avatar.hurt .monster-eye {
    background: #000; /* 反色 */
    transform: scale(0.5);
}

@keyframes glitch-anim {
    0% { transform: translate(0) rotate(45deg); }
    20% { transform: translate(-5px, 5px) rotate(45deg); clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); }
    40% { transform: translate(5px, -5px) rotate(45deg); clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%); }
    60% { transform: translate(-5px, 0) rotate(45deg); clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
    80% { transform: translate(5px, 0) rotate(45deg); }
    100% { transform: translate(0) rotate(45deg); }
}

/* 3. 攻击效果 (Attack) - 蓄力冲刺 */
.monster-avatar.attack {
    animation: attack-lunge 0.4s ease-out forwards;
}

@keyframes attack-lunge {
    0% { transform: rotate(45deg) scale(1); box-shadow: 0 0 10px #ff0055; }
    50% { transform: rotate(45deg) scale(0.8) translateY(-10px); box-shadow: 0 0 50px #ff0055; } /* 蓄力 */
    100% { transform: rotate(45deg) scale(1.4) translateY(20px); box-shadow: 0 0 20px #ff0000; } /* 撞击 */
}

/* 4. 死亡效果 (Dead) */
.monster-avatar.dead {
    transition: all 1s;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    filter: blur(10px);
}

.icon-btn {
    background: rgba(0,0,0,0.6);
    border: 1px solid #333;
    color: #00ff99;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.icon-btn:hover { background: #333; }
.icon-btn.muted { color: #555; text-decoration: line-through; }

/* --- 顶部控制面板容器 --- */
.dlc-control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
    
    /* 核心布局：让它们排成一行 */
    display: flex;
    align-items: center;
    gap: 15px; /* 按钮和开关之间的间距 */
    
    /* 统一背景（可选：让它们看起来像在一块玻璃板上） */
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(5px);
    padding: 8px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* --- 赛博音效按钮 --- */
.cyber-icon-btn {
    background: transparent;
    border: none;
    color: #00ff99; /* 默认亮色 */
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    /* 微微的发光效果 */
    text-shadow: 0 0 10px rgba(0, 255, 153, 0.5);
}

.cyber-icon-btn:hover {
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(0, 255, 153, 1);
}

/* 静音状态 */
.cyber-icon-btn.muted {
    color: #555; /* 暗灰色 */
    text-shadow: none;
    opacity: 0.7;
}

/* --- 装饰性分割线 --- */
.panel-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
}

/* --- 微调原有的开关样式以适应新布局 --- */
/* 如果之前的 switch-container 有背景色或边框，建议去掉，或者让它透明 */
.switch-container {
    background: transparent; /* 去掉原有背景，融入大面板 */
    border: none;
    padding: 0;
    margin: 0;
}