/* css/main.css */

/* 背景图案生成 */
.bg-desktop-pattern {
    background-image: radial-gradient(circle at 1px 1px, #334155 1px, transparent 0);
    background-size: 24px 24px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 卡片基础样式 - 核心交互与视觉 */
.game-card, .stack-group {
    width: 170px;
    height: 240px;
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: visible; /* 允许进度条等元素溢出 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    background-color: #1e293b;
    color: #f8fafc;
    will-change: transform, left, top;
}

/* 正在被拖拽的状态 */
.game-card.dragging, .stack-group.dragging {
    cursor: grabbing;
    transform: scale(1.08) rotate(2deg) translateY(-5px);
    box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.5), 0 10px 15px -5px rgba(0, 0, 0, 0.3);
    z-index: 100 !important;
    transition: none; /* 拖拽时取消缓动动画，跟随鼠标更紧密 */
}

/* 悬停时的微动效 */
.game-card:hover:not(.dragging), .stack-group:hover:not(.dragging) {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

/* 卡牌内部结构 */
.card-header {
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px 14px 0 0;
    backdrop-filter: blur(4px);
}

.card-body {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
}

.card-footer {
    padding: 10px 12px;
    font-size: 11px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
    border-radius: 0 0 14px 14px;
}

.tag {
    background: rgba(255,255,255,0.1);
    padding: 3px 8px;
    border-radius: 6px;
    color: #cbd5e1;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ================= 职业卡系主题 ================= */

/* 实体角色 (Actor) */
.card-actor {
    background: linear-gradient(145deg, #1e3a8a, #1d4ed8);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 15px rgba(29, 78, 216, 0.2);
}

/* 资源卡 (Resource) */
.card-resource {
    background: linear-gradient(145deg, #064e3b, #047857);
    border-color: rgba(16, 185, 129, 0.4);
}

/* 负面卡 (Negative) */
.card-negative {
    background: linear-gradient(145deg, #4c1d95, #6d28d9);
    border-color: rgba(139, 92, 246, 0.4);
}

/* 目标模块卡 (Module) */
.card-module {
    background: linear-gradient(145deg, #78350f, #92400e);
    border-color: rgba(245, 158, 11, 0.5);
}

/* 危机预警卡 (Warning) */
.card-warning {
    background: linear-gradient(145deg, #450a0a, #7f1d1d);
    border-color: rgba(239, 68, 68, 0.6);
    animation: pulse-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 危机爆发卡 (Crisis) */
.card-crisis {
    background: linear-gradient(145deg, #2a0808, #5a1010);
    border-color: #f87171;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

@keyframes pulse-border {
    0%, 100% { 
        border-color: rgba(239, 68, 68, 0.3); 
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); 
    }
    50% { 
        border-color: rgba(239, 68, 68, 0.9); 
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); 
    }
}

/* ================= 组件 ================= */

/* 进度条 (Processing Bar) */
.progress-container {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 14px;
    background: #0f172a;
    border-radius: 8px;
    border: 2px solid #334155;
    overflow: hidden;
    z-index: 20;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3);
    transition: width 0.1s linear;
}

/* 危机槽位 (Slots) */
.crisis-slot {
    width: 44px;
    height: 44px;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0,0,0,0.3);
    transition: all 0.2s;
}

.crisis-slot:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
}

.crisis-slot.filled {
    border: 2px solid #10b981;
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

/* Loading 动画 (API Requesting) */
.loader {
    border: 4px solid rgba(255,255,255,0.05);
    border-top: 4px solid #f87171;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px rgba(248, 113, 113, 0.2);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 栈 (Stack Group) 调整，取消单独卡牌样式因为外层是一个容器 */
.stack-group {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Stack Group 内的卡牌取消自身悬停动效以防止冲突 */
.stack-group .game-card {
    position: absolute;
    transition: none;
}

.stack-group .game-card:hover {
    transform: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* 高亮可连接卡牌 (Highlight Connectable) */
.highlight-connectable {
    box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.6) !important;
    border-color: #60a5fa !important;
    transform: scale(1.05);
    z-index: 80;
}

/* 新卡牌生成弹现动效 */
@keyframes card-spawn {
    0% { transform: scale(0) translateY(-20px); opacity: 0; filter: blur(10px); }
    60% { transform: scale(1.05) translateY(5px); opacity: 1; filter: blur(0); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}

/* 正在被连线悬停 (Hovering Connection Target) */
@keyframes magnetic-fusion {
    0% { transform: scale(1.1) rotate(0deg); box-shadow: 0 0 60px 20px rgba(59,130,246,0.9), inset 0 0 20px rgba(59,130,246,0.8); border-color: #60a5fa; filter: brightness(1.2); }
    33% { transform: scale(0.9) rotate(-3deg); box-shadow: 0 0 80px 30px rgba(139,92,246,0.9), inset 0 0 30px rgba(139,92,246,0.8); border-color: #c084fc; filter: brightness(1.5); }
    66% { transform: scale(1.1) rotate(3deg); box-shadow: 0 0 80px 30px rgba(236,72,153,0.9), inset 0 0 30px rgba(236,72,153,0.8); border-color: #f472b6; filter: brightness(1.5); }
    100% { transform: scale(1.1) rotate(0deg); box-shadow: 0 0 60px 20px rgba(59,130,246,0.9), inset 0 0 20px rgba(59,130,246,0.8); border-color: #60a5fa; filter: brightness(1.2); }
}

.highlight-hover {
    animation: magnetic-fusion 0.6s infinite ease-in-out !important;
    border-width: 3px !important;
    z-index: 90 !important;
}

/* 危机卡悬停解救 (Hovering Crisis Resolution) */
@keyframes crisis-resolve-hover {
    0%, 100% { transform: scale(1.15); box-shadow: 0 0 100px 40px rgba(16, 185, 129, 0.8); border-color: #34d399; filter: brightness(2) saturate(2); }
    50% { transform: scale(1.05); box-shadow: 0 0 60px 20px rgba(16, 185, 129, 0.6); border-color: #10b981; filter: brightness(1.5) saturate(1.5); }
}

.highlight-crisis-hover {
    animation: crisis-resolve-hover 0.5s infinite ease-in-out !important;
    border-width: 4px !important;
    z-index: 95 !important;
}

/* 连线 SVG 画布 */
#svg-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}