/* ============================================
   星际前线 - 科技风格响应式样式
   ============================================ */

:root {
    --primary: #4a90e2;
    --primary-dark: #357abd;
    --secondary: #9b59b6;
    --accent: #ffd700;
    --danger: #e74c3c;
    --success: #27ae60;
    --warning: #f39c12;
    --dark: #0a0a1a;
    --darker: #050510;
    --card-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --glass: rgba(255,255,255,0.05);
    --glow-primary: 0 0 20px rgba(74,144,226,0.5);
    --glow-accent: 0 0 20px rgba(255,215,0,0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--darker);
    color: #fff;
    touch-action: manipulation;
}

/* ============================================
   首页样式
   ============================================ */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(74,144,226,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(155,89,182,0.15) 0%, transparent 50%),
        linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 2000;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.star-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.star-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent);
    background-size: 200px 200px;
    animation: twinkle 8s linear infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 流星效果 */
.meteor {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-45deg);
    animation: meteor-fall 4s linear infinite;
    opacity: 0;
    z-index: 1;
}

@keyframes meteor-fall {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-300px) translateY(300px) rotate(-45deg);
        opacity: 0;
    }
}

/* 战场星星 */
.battle-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: battle-twinkle 2s infinite;
    pointer-events: none;
}

@keyframes battle-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}

/* Logo 区域 */
.logo-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;
    margin-bottom: 30px;
    z-index: 1;
}

.logo-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(74,144,226,0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.logo-icon {
    font-size: 64px;
    margin-bottom: 10px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(74,144,226,0.8));
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.game-title {
    display: flex;
    gap: 4px;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.title-char {
    background: linear-gradient(180deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255,215,0,0.3);
    animation: char-glow 2s ease-in-out infinite;
}

.title-char:nth-child(2) { animation-delay: 0.2s; }
.title-char:nth-child(3) { animation-delay: 0.4s; }
.title-char:nth-child(4) { animation-delay: 0.6s; }

@keyframes char-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.subtitle {
    font-size: 14px;
    letter-spacing: 6px;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 300;
}

.tagline {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
}

/* 特性面板 */
.features-panel {
    width: 100%;
    max-width: 500px;
    background: var(--glass);
    border: 1px solid rgba(74,144,226,0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.panel-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.panel-title {
    font-size: 14px;
    color: var(--primary);
    letter-spacing: 3px;
    font-weight: 600;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.feature-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.3s;
    opacity: 0;
    animation: fade-in-up 0.6s ease forwards;
}

.feature-card[data-delay="1"] { animation-delay: 0.1s; }
.feature-card[data-delay="2"] { animation-delay: 0.2s; }
.feature-card[data-delay="3"] { animation-delay: 0.3s; }

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(74,144,226,0.2);
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.feature-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.feature-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

/* 开始按钮区域 */
.start-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 1;
}

.start-btn {
    position: relative;
    padding: 16px 50px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 20px rgba(74,144,226,0.4);
}

.btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    animation: btn-shine 3s infinite;
}

@keyframes btn-shine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    font-size: 14px;
    transition: transform 0.3s;
}

.start-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(74,144,226,0.6);
}

.start-btn:hover .btn-icon {
    transform: translateX(5px);
}

.version {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

/* ============================================
   阵营选择界面
   ============================================ */
#faction-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(74,144,226,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(155,89,182,0.15) 0%, transparent 50%),
        linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.faction-header {
    text-align: center;
    margin-bottom: 30px;
    z-index: 1;
}

.faction-header h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(255,215,0,0.3);
    margin-bottom: 8px;
}

.faction-header p {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}

.faction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 900px;
    width: 100%;
    z-index: 1;
}

.faction-card {
    background: rgba(0,0,0,0.4);
    border: 2px solid;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.faction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.1) 0%,
        transparent 50%,
        rgba(0,0,0,0.2) 100%
    );
    pointer-events: none;
}

.faction-card.terran {
    border-color: rgba(52,152,219,0.5);
    box-shadow: 0 0 20px rgba(52,152,219,0.2);
}

.faction-card.alien {
    border-color: rgba(231,76,60,0.5);
    box-shadow: 0 0 20px rgba(231,76,60,0.2);
}

.faction-card.machine {
    border-color: rgba(155,89,182,0.5);
    box-shadow: 0 0 20px rgba(155,89,182,0.2);
}

.faction-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.faction-card.terran:hover {
    border-color: rgba(52,152,219,0.8);
    box-shadow: 0 15px 40px rgba(52,152,219,0.4);
}

.faction-card.alien:hover {
    border-color: rgba(231,76,60,0.8);
    box-shadow: 0 15px 40px rgba(231,76,60,0.4);
}

.faction-card.machine:hover {
    border-color: rgba(155,89,182,0.8);
    box-shadow: 0 15px 40px rgba(155,89,182,0.4);
}

.faction-icon {
    font-size: 56px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.faction-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.faction-type {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 10px;
}

.faction-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
    line-height: 1.4;
}

.faction-bonus {
    font-size: 12px;
    color: #2ecc71;
    background: rgba(46,204,113,0.15);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 600;
}

.faction-units {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.faction-tip {
    margin-top: 30px;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    z-index: 1;
}

/* ============================================
   游戏界面
   ============================================ */
#game-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 游戏背景星星 */
#stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(74,144,226,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(155,89,182,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(10,10,26,1) 0%, rgba(5,5,16,1) 100%);
}

/* 星星元素 */
#stars .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(74,144,226,0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(155,89,182,0.1) 0%, transparent 40%);
}

#game-board {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(5,5,16,0.85);
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow: hidden;
}

/* ============================================
   状态栏
   ============================================ */
#status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    margin-bottom: 6px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.hq-display {
    flex: 1;
    max-width: 110px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    border: 1px solid;
    text-align: center;
}

.enemy-hq {
    border-color: rgba(231,76,60,0.5);
    box-shadow: inset 0 0 20px rgba(231,76,60,0.1);
}

.player-hq {
    border-color: rgba(39,174,96,0.5);
    box-shadow: inset 0 0 20px rgba(39,174,96,0.1);
}

.hq-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.enemy-hq .hq-label { color: var(--danger); }
.player-hq .hq-label { color: var(--success); }

.hp-bar {
    position: relative;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.hp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s, background 0.3s;
}

.enemy-hp-fill {
    background: linear-gradient(90deg, #c0392b, var(--danger));
}

.player-hp-fill {
    background: linear-gradient(90deg, #229954, var(--success));
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9);
    z-index: 2;
}

.shield-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary);
}

.shield-icon {
    font-size: 10px;
}

/* 回合信息 */
.turn-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.turn-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    padding: 6px 14px;
}

.turn-label {
    font-size: 9px;
    color: rgba(255,215,0,0.8);
    letter-spacing: 2px;
}

.turn-num {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}

.energy-display {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.4);
    border-radius: 20px;
    padding: 4px 12px;
}

.energy-icon {
    font-size: 12px;
}

.energy-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary);
}

.deck-info {
    display: flex;
    gap: 12px;
}

.deck-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.deck-icon {
    font-size: 10px;
}

/* ============================================
   战场区域
   ============================================ */
#battlefield {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
}

.field-section {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 4px 6px;
}

.enemy-section {
    border: 1px solid rgba(39,174,96,0.15);
}

.player-section {
    border: 1px solid rgba(39,174,96,0.15);
}

.front-section {
    background: rgba(231,76,60,0.08);
}

.line-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.line-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.supply-dot { background: var(--warning); }
.support-dot { background: var(--primary); }
.front-dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

.line-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.8);
}

.line-hint {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    margin-left: auto;
}

.shield-indicator {
    font-size: 9px;
    color: var(--primary);
    background: rgba(52,152,219,0.2);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.front-control {
    font-size: 10px;
    font-weight: bold;
    color: var(--accent);
    background: rgba(255,215,0,0.15);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.3);
    margin-left: auto;
}

.front-control.dominant {
    background: rgba(39,174,96,0.3);
    border-color: rgba(39,174,96,0.5);
    color: #2ecc71;
}

.front-control.weak {
    background: rgba(231,76,60,0.3);
    border-color: rgba(231,76,60,0.5);
    color: #e74c3c;
}

/* 交战区分隔 */
.battle-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(231,76,60,0.5), transparent);
}

.front-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.divider-text {
    font-size: 11px;
    color: rgba(231,76,60,0.8);
    letter-spacing: 2px;
    white-space: nowrap;
}

.front-domination {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    transition: all 0.3s;
}

.front-domination.advantage {
    color: #2ecc71;
    background: rgba(46,204,113,0.2);
    border: 1px solid rgba(46,204,113,0.4);
    animation: pulse-advantage 2s infinite;
}

.front-domination.disadvantage {
    color: #e74c3c;
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.4);
    animation: pulse-danger 1.5s infinite;
}

.front-domination.equal {
    color: #f39c12;
    background: rgba(243,156,18,0.2);
    border: 1px solid rgba(243,156,18,0.4);
}

@keyframes pulse-advantage {
    0%, 100% { box-shadow: 0 0 5px rgba(46,204,113,0.3); }
    50% { box-shadow: 0 0 15px rgba(46,204,113,0.6); }
}

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 5px rgba(231,76,60,0.3); }
    50% { box-shadow: 0 0 15px rgba(231,76,60,0.6); }
}

/* 格子 */
.slots-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.slot {
    width: 70px;
    height: 90px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
}

.slot.active {
    border-style: solid;
    border-color: rgba(39,174,96,0.4);
    background: rgba(39,174,96,0.05);
}

.slot.targetable {
    border-color: var(--danger);
    background: rgba(231,76,60,0.15);
    animation: target-pulse 1.5s infinite;
    cursor: pointer;
}

@keyframes target-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(231,76,60,0.3); }
    50% { box-shadow: 0 0 15px rgba(231,76,60,0.6); }
}

.slot.shielded {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(52,152,219,0.4);
}

.slot.supply-line {
    border-color: rgba(243,156,18,0.4);
}

.slot.front-line {
    border-color: rgba(231,76,60,0.4);
}

/* ============================================
   视觉特效系统
   ============================================ */

/* 飞行卡牌 */
.flying-card {
    position: fixed;
    background: linear-gradient(145deg, #5a2d7a 0%, #3d1b52 100%);
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 10px;
    box-shadow: 
        0 10px 40px rgba(155,89,182,0.6),
        0 0 60px rgba(155,89,182,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    will-change: transform, left, top;
}

.flying-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    border-radius: 12px;
    z-index: -1;
    opacity: 0.5;
    animation: card-glow 0.5s infinite alternate;
}

@keyframes card-glow {
    from { opacity: 0.3; filter: blur(2px); }
    to { opacity: 0.7; filter: blur(4px); }
}

/* 传送门特效 */
.portal-effect {
    position: fixed;
    pointer-events: none;
}

.portal-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(155,89,182,0) 0%,
        rgba(155,89,182,0.8) 30%,
        rgba(74,144,226,0.6) 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: portal-expand 0.6s ease-out forwards;
}

.portal-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    animation: portal-ring 0.6s ease-out forwards;
}

@keyframes portal-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes portal-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 5px;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        border-width: 0;
    }
}

/* ============================================
   卡牌样式 - KARDS风格专业设计
   ============================================ */

/* 卡牌3D容器 */
.slot {
    perspective: 1000px;
}

.card {
    width: 64px;
    height: 82px;
    background: 
        linear-gradient(145deg, rgba(30,58,95,0.95) 0%, rgba(15,31,53,0.95) 100%);
    border: 2px solid;
    border-color: #5a6c7d #3a4a5d #3a4a5d #5a6c7d;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    position: relative;
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* 卡牌金属边框效果 */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0,0,0,0.2) 100%
    );
    pointer-events: none;
}

/* 3D悬停效果 */
.card:hover {
    transform: translateY(-8px) rotateX(10deg) rotateY(-5deg) scale(1.05);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.5),
        0 0 30px rgba(74,144,226,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    z-index: 100;
}

.card.exhausted {
    opacity: 0.6;
    filter: grayscale(0.8);
    transform: none;
}

.card.exhausted:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* 护盾状态 */
.card.shielded {
    border-color: var(--primary);
    box-shadow: 
        0 0 15px rgba(52,152,219,0.6),
        inset 0 0 10px rgba(52,152,219,0.2);
}

.card.shielded::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background: linear-gradient(45deg, var(--primary), transparent, var(--primary));
    z-index: -1;
    animation: shield-pulse 2s infinite;
}

@keyframes shield-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* 费用/攻击/防御 - 金属徽章风格 */
.card-cost, .card-atk, .card-def {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    border: 2px solid;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(255,255,255,0.3),
        inset 0 -1px 2px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.card-cost {
    top: -8px;
    left: -8px;
    background: linear-gradient(145deg, #3498db, #2980b9, #1f5f8b);
    border-color: #5dade2 #2874a6 #2874a6 #5dade2;
}

.card-atk {
    bottom: -8px;
    left: -8px;
    background: linear-gradient(145deg, #e74c3c, #c0392b, #922b21);
    border-color: #ec7063 #a93226 #a93226 #ec7063;
}

.card-def {
    bottom: -8px;
    right: -8px;
    background: linear-gradient(145deg, #27ae60, #229954, #196f3d);
    border-color: #58d68d #1e8449 #1e8449 #58d68d;
}

/* 卡牌插画区域 */
.card-icon {
    font-size: 28px;
    margin-top: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.3s;
}

.card:hover .card-icon {
    transform: scale(1.1);
}

/* 卡牌名称 - 金属质感文字 */
.card-name {
    font-size: 8px;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 
        0 1px 2px rgba(0,0,0,0.8),
        0 0 10px rgba(255,255,255,0.1);
    letter-spacing: 0.5px;
    padding: 0 2px;
}

/* 关键词标签 */
.card-keyword {
    font-size: 7px;
    color: #ffd700;
    background: linear-gradient(90deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,215,0,0.3);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 权限提示 */
.permission-hint {
    font-size: 7px;
    color: var(--warning);
    background: rgba(243,156,18,0.2);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid rgba(243,156,18,0.3);
}

/* ============================================
   底部区域 - 重写确保手牌区域有足够空间
   ============================================ */
#bottom-area {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    height: 150px;
    flex-shrink: 0;
    min-height: 0;
}

/* 手牌区域 - 占据剩余空间 */
#hand-area {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100% - 168px);
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(155,89,182,0.3);
    border-radius: 10px;
    padding: 6px 8px;
    position: relative;
    overflow: hidden;
}

.hand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
    flex-shrink: 0;
    padding: 0 2px;
}

.hand-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
}

.hand-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

/* 滚动提示箭头 */
.scroll-hint {
    position: absolute;
    right: 2px;
    top: 55%;
    transform: translateY(-50%);
    width: 20px;
    height: 45px;
    background: linear-gradient(90deg, transparent, rgba(155,89,182,0.6));
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--secondary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    animation: scroll-pulse 1.5s infinite;
    z-index: 5;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

#hand-area:hover .scroll-hint,
#hand-area:focus-within .scroll-hint {
    opacity: 1;
}

/* 手牌容器 - 关键：确保可以横向滚动和拖动 */
.hand-cards {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    align-items: center;
    padding: 6px 20px 6px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) rgba(155,89,182,0.2);
    min-width: 0;
    cursor: grab;
    touch-action: pan-x;  /* 只允许横向触摸滚动 */
}

.hand-cards.grabbing {
    cursor: grabbing;
}

.hand-cards .hand-card {
    touch-action: manipulation; /* 卡片响应点击 */
}

/* 强制显示滚动条 */
.hand-cards::-webkit-scrollbar {
    height: 10px;
    display: block !important;
}

.hand-cards::-webkit-scrollbar-track {
    background: rgba(155,89,182,0.2);
    border-radius: 5px;
    margin: 0 4px;
}

.hand-cards::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--secondary), #7d3c98);
    border-radius: 5px;
    border: 2px solid rgba(0,0,0,0.3);
    min-width: 30px;
}

.hand-cards::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a569bd, var(--secondary));
}

/* 手牌卡片 */
/* 手牌卡牌 - KARDS风格 */
.hand-card {
    width: 62px;
    height: 98px;
    background: 
        linear-gradient(145deg, rgba(90,45,122,0.95) 0%, rgba(61,27,82,0.95) 100%);
    border: 2px solid;
    border-color: #7a5a8d #4a305d #4a305d #7a5a8d;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
    scroll-snap-align: start;
    transform-style: preserve-3d;
}

.hand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(0,0,0,0.2) 100%
    );
    pointer-events: none;
}

.hand-card:hover {
    transform: translateY(-8px) scale(1.05) rotateY(-5deg);
    box-shadow: 
        0 15px 30px rgba(155,89,182,0.5),
        0 0 20px rgba(155,89,182,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    border-color: #9b59b6;
    z-index: 50;
}

.hand-card.selected {
    border-color: var(--accent);
    box-shadow: 
        0 0 30px rgba(255,215,0,0.6),
        0 10px 20px rgba(0,0,0,0.4);
    transform: translateY(-10px) scale(1.08);
    z-index: 100;
}

/* 部署提示 */
.deploy-hint {
    position: absolute;
    left: 50%;
    bottom: 140px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255,215,0,0.95) 0%, rgba(255,165,0,0.95) 100%);
    color: #000;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,215,0,0.3);
    z-index: 150;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.deploy-hint.show {
    opacity: 1;
    animation: deploy-hint-bounce 0.5s ease;
}

.deploy-hint b {
    color: #c0392b;
}

@keyframes deploy-hint-bounce {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

/* 部署位置高亮动画 */
.slot.deploy-highlight {
    animation: deploy-pulse 1s infinite;
}

@keyframes deploy-pulse {
    0%, 100% { 
        border-color: #ffd700;
        box-shadow: 0 0 10px rgba(255,215,0,0.5);
    }
    50% { 
        border-color: #fff;
        box-shadow: 0 0 25px rgba(255,215,0,0.8);
    }
}

.hand-card.unplayable {
    opacity: 0.4;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.hand-card.unplayable:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* 手牌卡牌内部元素 */
.card-cost-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    border: 2px solid;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(255,255,255,0.3);
    z-index: 2;
}

.hand-card-icon {
    font-size: 30px;
    margin-top: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.3s;
}

.hand-card:hover .hand-card-icon {
    transform: scale(1.15);
}

.hand-card-name {
    font-size: 9px;
    text-align: center;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 0.3px;
}

.hand-card-stats {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    font-size: 11px;
    padding: 0 6px;
}

.stat-atk {
    color: #ff8585;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.stat-def {
    color: #5ee7d6;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hand-card-type {
    position: absolute;
    bottom: 6px;
    font-size: 9px;
    color: #f5b041;
    background: rgba(243,156,18,0.25);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(243,156,18,0.4);
    font-weight: 600;
}

/* 游戏日志 - 固定宽度不被挤压 */
#game-log {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(74,144,226,0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    overflow: hidden;
}

#game-log-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(74,144,226,0.2);
}

#log-content {
    flex: 1;
    overflow-y: auto;
    font-size: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

#log-content::-webkit-scrollbar {
    width: 3px;
}

#log-content::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
}

.log-entry {
    display: flex;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.log-turn {
    color: var(--accent);
    font-size: 9px;
    font-weight: bold;
    min-width: 28px;
}

.log-damage { color: var(--danger); }
.log-heal { color: var(--success); }
.log-shield { color: var(--primary); }
.log-enemy { color: #e74c3c; }
.log-system { color: rgba(255,255,255,0.5); }
.log-line { color: var(--warning); }
.log-error { color: var(--danger); }

/* ============================================
   控制按钮
   ============================================ */
#controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    flex-shrink: 0;
}

.btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-icon {
    font-size: 12px;
}

.btn-label {
    position: relative;
    z-index: 1;
}

.btn-end {
    background: linear-gradient(135deg, var(--danger), #c0392b);
    color: white;
    box-shadow: 0 3px 10px rgba(231,76,60,0.3);
}

.btn-end:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231,76,60,0.5);
}

.btn-surrender {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-surrender:hover {
    background: rgba(255,255,255,0.2);
}

.btn-shield {
    background: linear-gradient(135deg, var(--primary), #2980b9);
    color: white;
    box-shadow: 0 3px 10px rgba(52,152,219,0.3);
}

.btn-shield:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-audio {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    box-shadow: 0 3px 10px rgba(155,89,182,0.3);
}

.btn-audio.muted {
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    opacity: 0.7;
}

.btn-audio:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155,89,182,0.5);
}

.shield-count {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
}

/* ============================================
   游戏结束界面
   ============================================ */
#game-over {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(10px);
}

.result-container {
    text-align: center;
    padding: 30px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    animation: result-in 0.5s ease;
}

@keyframes result-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.result-icon {
    font-size: 64px;
    margin-bottom: 15px;
}

#result-text {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 10px;
}

#result-text.victory {
    color: var(--success);
    text-shadow: 0 0 20px rgba(39,174,96,0.5);
}

#result-text.defeat {
    color: var(--danger);
    text-shadow: 0 0 20px rgba(231,76,60,0.5);
}

#result-stats {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    margin-bottom: 25px;
}

.restart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 20px rgba(74,144,226,0.4);
}

.restart-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(74,144,226,0.6);
}

.restart-icon {
    font-size: 18px;
    transition: transform 0.3s;
}

.restart-btn:hover .restart-icon {
    transform: rotate(180deg);
}

/* ============================================
   动画效果
   ============================================ */
.turn-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 30px rgba(255,215,0,0.8);
    pointer-events: none;
    opacity: 0;
    z-index: 1500;
    transition: opacity 0.3s;
}

/* 敌方回合遮罩 */
.enemy-turn-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    animation: fade-in 0.3s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.enemy-turn-content {
    text-align: center;
    animation: pulse-thinking 1.5s infinite;
}

@keyframes pulse-thinking {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.enemy-turn-icon {
    font-size: 64px;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px rgba(231,76,60,0.6));
    animation: enemy-icon-bounce 0.6s infinite alternate;
}

@keyframes enemy-icon-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

.enemy-turn-text {
    font-size: 28px;
    font-weight: 900;
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(231,76,60,0.8);
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.enemy-turn-thinking {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
}

.enemy-turn-thinking::after {
    content: '';
    animation: thinking-dots 1.5s infinite;
}

@keyframes thinking-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

.skip-animation-btn {
    position: absolute;
    bottom: 30px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 25px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.skip-animation-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.05);
}

/* 伤害数字样式 */
.damage-popup, .heal-popup, .shield-popup {
    position: fixed;
    font-weight: 900;
    pointer-events: none;
    animation: popup-float 1s ease-out forwards;
    z-index: 1000;
    white-space: nowrap;
}

.damage-popup {
    font-size: 24px;
    color: #ff6b6b;
    text-shadow: 
        0 0 10px rgba(231,76,60,0.8), 
        0 0 20px rgba(231,76,60,0.6),
        0 0 30px rgba(231,76,60,0.4),
        2px 2px 4px rgba(0,0,0,0.8);
}

.damage-popup.critical {
    font-size: 32px;
    color: #ff0000;
    text-shadow: 
        0 0 10px rgba(255,0,0,1), 
        0 0 30px rgba(255,0,0,0.8),
        0 0 50px rgba(255,0,0,0.6),
        0 0 70px rgba(255,0,0,0.4),
        3px 3px 6px rgba(0,0,0,1);
    animation: popup-float-critical 1.2s ease-out forwards;
}

.heal-popup {
    font-size: 24px;
    color: #5ee7d6;
    text-shadow: 
        0 0 10px rgba(39,174,96,0.8), 
        0 0 20px rgba(39,174,96,0.6),
        0 0 30px rgba(39,174,96,0.4),
        2px 2px 4px rgba(0,0,0,0.8);
}

.heal-popup.big-heal {
    font-size: 28px;
    color: #00ff88;
    text-shadow: 
        0 0 10px rgba(0,255,100,1), 
        0 0 30px rgba(0,255,100,0.8),
        0 0 50px rgba(0,255,100,0.6),
        3px 3px 6px rgba(0,0,0,1);
}

.shield-popup {
    font-size: 18px;
    color: #74b9ff;
    text-shadow: 
        0 0 10px rgba(52,152,219,0.8), 
        0 0 20px rgba(52,152,219,0.6),
        0 0 30px rgba(52,152,219,0.4),
        2px 2px 4px rgba(0,0,0,0.8);
}

@keyframes popup-float {
    0% { 
        transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); 
        opacity: 0; 
    }
    15% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg); 
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.1) rotate(0deg); 
    }
    100% { 
        transform: translate(-50%, calc(-50% - 50px)) scale(1); 
        opacity: 0; 
    }
}

@keyframes popup-float-critical {
    0% { 
        transform: translate(-50%, -50%) scale(0.3); 
        opacity: 0;
        filter: blur(5px);
    }
    20% {
        transform: translate(-50%, -50%) scale(1.5); 
        opacity: 1;
        filter: blur(0);
    }
    40% {
        transform: translate(-50%, -50%) scale(1.3); 
    }
    100% { 
        transform: translate(-50%, calc(-50% - 60px)) scale(1); 
        opacity: 0; 
    }
}

/* 伤害爆发特效 */
.damage-burst {
    pointer-events: none;
}

@keyframes particle-fly {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
        opacity: 0;
    }
}

@keyframes flash-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 卡牌提示框 */
.card-tooltip {
    position: absolute;
    background: rgba(10,10,26,0.98);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 10px;
    width: 160px;
    z-index: 2000;
    pointer-events: none;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.card-tooltip h4 {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 6px;
}

.card-tooltip .stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.card-tooltip .desc {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}

/* ============================================
   响应式适配
   ============================================ */

/* 平板 */
@media (min-width: 768px) {
    .game-title {
        font-size: 56px;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .slot {
        width: 80px;
        height: 105px;
    }
    
    .card {
        width: 72px;
        height: 92px;
    }
    
    /* 平板手牌区域 */
    #bottom-area {
        height: 155px;
    }
    
    #hand-area {
        width: calc(100% - 210px);
    }
    
    #game-log {
        flex: 0 0 190px;
        width: 190px;
        min-width: 190px;
        max-width: 190px;
    }
    
    .hand-card {
        width: 65px;
        height: 100px;
    }
    
    .hq-display {
        max-width: 130px;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .game-title {
        font-size: 64px;
        letter-spacing: 12px;
    }
    
    .slot {
        width: 90px;
        height: 115px;
    }
    
    .card {
        width: 80px;
        height: 100px;
    }
    
    /* 桌面端手牌区域 */
    #bottom-area {
        height: 160px;
    }
    
    #hand-area {
        width: calc(100% - 260px);
    }
    
    #game-log {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }
    
    .hand-card {
        width: 72px;
        height: 108px;
    }
}

/* 小屏手机 */
@media (max-width: 380px) {
    .logo-container {
        margin-top: 5vh;
        margin-bottom: 20px;
    }
    
    .logo-icon {
        font-size: 48px;
    }
    
    .game-title {
        font-size: 28px;
        letter-spacing: 2px;
        gap: 2px;
    }
    
    .subtitle {
        font-size: 10px;
        letter-spacing: 3px;
    }
    
    .tagline {
        font-size: 12px;
    }
    
    .features-panel {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    .feature-card {
        padding: 10px 8px;
    }
    
    .feature-icon {
        font-size: 22px;
    }
    
    .feature-name {
        font-size: 11px;
    }
    
    .feature-desc {
        font-size: 9px;
    }
    
    .start-btn {
        padding: 14px 35px;
        font-size: 16px;
    }
    
    /* 阵营选择界面适配 */
    .faction-header h2 {
        font-size: 22px;
    }
    
    .faction-header p {
        font-size: 12px;
    }
    
    .faction-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .faction-card {
        padding: 16px 14px;
    }
    
    .faction-icon {
        font-size: 40px;
    }
    
    .faction-name {
        font-size: 18px;
    }
    
    .faction-tip {
        font-size: 12px;
        margin-top: 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card {
        padding: 12px;
    }
    
    .slot {
        width: 52px;
        height: 68px;
    }
    
    .card {
        width: 48px;
        height: 62px;
    }
    
    .card-icon {
        font-size: 16px;
    }
    
    .card-name {
        font-size: 7px;
    }
    
    /* 小屏手牌优化 */
    #bottom-area {
        height: 125px;
    }
    
    #hand-area {
        width: calc(100% - 100px);
        padding: 4px 6px;
    }
    
    #game-log {
        flex: 0 0 90px;
        width: 90px;
        min-width: 90px;
        max-width: 90px;
        padding: 4px;
    }
    
    .hand-card {
        width: 54px;
        height: 88px;
        padding: 4px;
    }
    
    .hand-card-icon {
        font-size: 22px;
        margin-top: 6px;
    }
    
    .hand-card-name {
        font-size: 7px;
        margin-top: 4px;
    }
    
    .card-cost-badge {
        width: 18px;
        height: 18px;
        font-size: 9px;
        top: -6px;
        left: -6px;
    }
    
    .hand-cards::-webkit-scrollbar {
        height: 6px;
    }
    
    .hq-display {
        padding: 6px 8px;
    }
    
    .hq-label {
        font-size: 10px;
    }
    
    .turn-num {
        font-size: 16px;
    }
    
    .btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* 横屏 */
@media (max-height: 500px) and (orientation: landscape) {
    #start-screen {
        justify-content: center;
        padding: 10px;
    }
    
    .logo-container {
        margin-top: 0;
        margin-bottom: 15px;
    }
    
    .logo-icon {
        font-size: 40px;
    }
    
    .game-title {
        font-size: 28px;
    }
    
    .features-panel {
        display: none;
    }
    
    #game-board {
        flex-direction: row;
        padding: 6px;
    }
    
    #status-bar {
        flex-direction: column;
        width: 90px;
        margin-right: 6px;
        margin-bottom: 0;
        gap: 6px;
    }
    
    .hq-display {
        max-width: none;
        width: 100%;
    }
    
    .turn-info {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #battlefield {
        max-height: none;
    }
    
    #bottom-area {
        width: 130px;
        height: auto;
        flex-direction: column;
        margin-left: 6px;
        margin-top: 0;
    }
    
    #game-log {
        width: 100%;
        height: 40%;
    }
    
    #hand-area {
        width: calc(100% - 140px);
        height: 100%;
    }
    
    #game-log {
        flex: 0 0 130px;
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
    
    .hand-cards {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .hand-cards::-webkit-scrollbar {
        height: 6px;
    }
    
    .scroll-hint {
        display: none;
    }
    
    #controls {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        padding: 8px;
        border-radius: 10px;
        backdrop-filter: blur(10px);
    }
}

/* 移动端隐藏 */
.mobile-hide {
    display: inline;
}

@media (max-width: 767px) {
    .mobile-hide {
        display: none;
    }
}

/* 触摸反馈 */
@media (hover: none) and (pointer: coarse) {
    .hand-card:active {
        transform: scale(0.95);
    }
    
    .slot:active {
        background: rgba(255,255,255,0.1);
    }
    
    .btn:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    .card:hover {
        transform: none;
    }
    
    /* 移动端显示滚动提示 */
    .hand-hint {
        display: inline !important;
        font-size: 10px;
        color: var(--secondary);
    }
    
    .hand-cards {
        /* 确保触摸滚动流畅 */
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .hand-card {
        scroll-snap-align: center;
    }
}

/* iOS 修复 */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available;
    }
    
    #game-wrapper {
        min-height: -webkit-fill-available;
    }
    
    .hand-cards, #battlefield, #log-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android 修复 */
@supports (height: 100dvh) {
    html, body {
        height: 100dvh;
    }
}

/* 禁用选择 */
.card, .hand-card, .btn, .slot, .feature-card {
    user-select: none;
    -webkit-user-select: none;
}

/* 敌方攻击高亮 */
.slot[style*="border: 3px solid rgb(255, 0, 0)"],
.slot[style*="border: 3px solid #ff6600"] {
    z-index: 100;
}

/* 禁用长按菜单 */
body {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}
/* 卡牌飞行动画 */
.card-fly {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* 卡牌部署位置闪烁效果 */
@keyframes slot-deploy-flash {
    0%, 100% { 
        background: rgba(255,215,0,0.2);
        box-shadow: 0 0 15px rgba(255,215,0,0.3);
    }
    50% { 
        background: rgba(255,215,0,0.5);
        box-shadow: 0 0 30px rgba(255,215,0,0.6);
    }
}

.slot.deploying {
    animation: slot-deploy-flash 0.5s ease;
}