/* ==================== 游戏界面样式 (连连看模式) ==================== */

/* 游戏屏幕背景（仿木纹） */
#game-screen {
    --screen-pad-top: calc(14px + env(safe-area-inset-top, 0px));
    --screen-pad-right: calc(12px + env(safe-area-inset-right, 0px));
    --screen-pad-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    --screen-pad-left: calc(12px + env(safe-area-inset-left, 0px));
    background: #ffffff;
    padding: var(--screen-pad-top) var(--screen-pad-right) var(--screen-pad-bottom) var(--screen-pad-left);
    gap: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.game-stage {
    width: 100%;
    height: 100%;
    flex: 1;
    max-width: 560px;
    max-height: 100%;
    overflow: hidden;
    --topbar-h: clamp(40px, 6.5vh, 54px);
    --dock-circle: clamp(56px, 10vh, 78px);
    --dock-label: clamp(14px, 2.4vh, 18px);
    --board-frame-pad: clamp(8px, 1.6vh, 12px);
    --board-inner-pad: clamp(6px, 1.4vh, 10px);
    --stage-gap: 12px;
    --dock-gap: 8px;
    --dock-pad-top: 14px;
    --dock-pad-bottom: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "topbar"
        "board"
        "dock";
    gap: var(--stage-gap);
    min-height: 0;
}

.game-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-btn {
    border: none;
    background: rgba(0,0,0,0.35);
    width: var(--topbar-h);
    height: var(--topbar-h);
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.25);
    cursor: pointer;
}

.topbar-btn:active {
    transform: translateY(1px);
}

.topbar-btn-icon {
    font-size: 26px;
    color: #f5e7cf;
    line-height: 1;
}

.topbar-pill {
    background: rgba(0,0,0,0.35);
    border-radius: 18px;
    height: var(--topbar-h);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.18);
}

.topbar-pill-level {
    width: 96px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.topbar-pill-title {
    font-size: 12px;
    color: #4e342e;
    font-weight: 700;
    letter-spacing: 1px;
}

.topbar-pill-value {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.topbar-pill-time {
    flex: 1;
    justify-content: center;
}

.topbar-pill-icon {
    font-size: 20px;
    opacity: 0.9;
}

.board-shell {
    grid-area: board;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.board-frame {
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    padding: var(--board-frame-pad);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18)),
        linear-gradient(90deg, #c79a63, #b9854e);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.25);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-inner {
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    padding: var(--board-inner-pad);
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(0,0,0,0.10), transparent 55%),
        linear-gradient(180deg, #0a6a68, #095653);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15), inset 0 10px 20px rgba(0,0,0,0.15);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 游戏区域 */
.game-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    aspect-ratio: 8 / 15;
    gap: 3px;
    width: 85vw; /* 稍微调窄一点，更像手机 */
    max-width: 400px;
    height: auto;
    max-height: 75vh; /* 竖屏可以稍微高一点 */
    background: transparent;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    overflow: visible;
    align-self: center;
    justify-self: center;
    touch-action: none;
    box-shadow: none;
    box-sizing: border-box;
}

/* 空的背景格子，用于展示网格线 */
.grid-cell-bg {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-sizing: border-box;
    z-index: 1;
    grid-area: var(--row) / var(--col);
}

/* 游戏卡片 */
.game-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff;
    overflow: visible;
    z-index: 2;
    grid-area: var(--row) / var(--col);
}

/* 消除动画：向中间靠拢并缩放消失 */
.game-tile.eliminating {
    z-index: 100;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

/* 烟花特效容器 */
.firework-container {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 999;
    pointer-events: none;
}

/* 烟花粒子基础样式 */
.firework-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: fireworkFly 0.8s ease-out forwards;
}

@keyframes fireworkFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* 酷炫效果 1: 魔法连线 (Magic Beam) */
.magic-beam {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fff, #4ECDC4, #fff, transparent);
    background-size: 200% 100%;
    border-radius: 2px;
    pointer-events: none;
    z-index: 900;
    box-shadow: 0 0 15px #4ECDC4, 0 0 5px #fff;
    transform-origin: left center;
    animation: beamGlow 0.4s ease-out forwards;
}

@keyframes beamGlow {
    0% { transform: scaleX(0); opacity: 0; filter: brightness(2); }
    50% { transform: scaleX(1); opacity: 1; filter: brightness(1.5); }
    100% { transform: scaleX(1); opacity: 0; filter: brightness(1); }
}

/* 酷炫效果 2: 屏幕震动 (Screen Shake) */
.shake-screen {
    animation: screenShake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screenShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 酷炫效果 3: 冲击波 (Shockwave) */
.shockwave {
    position: absolute;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 950;
    animation: shockwaveExpand 0.5s ease-out forwards;
}

@keyframes shockwaveExpand {
    0% { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%) scale(0); }
    100% { width: 300px; height: 300px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.game-tile.moving {
    z-index: 10;
}

.game-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.game-tile.empty {
    background: transparent !important;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.game-tile.selected {
    box-shadow: 0 0 0 4px #4ECDC4, 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
    animation: selectedPulse 0.5s ease-in-out infinite alternate;
}

@keyframes selectedPulse {
    from {
        box-shadow: 0 0 0 4px #4ECDC4, 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    to {
        box-shadow: 0 0 0 6px #4ECDC4, 0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

.game-tile.hint {
    animation: hintPulse 1s ease-in-out 2;
}

@keyframes hintPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }
}

.game-tile.highlight-target {
    box-shadow: 0 0 0 4px #FFD700, 0 4px 15px rgba(255, 215, 0, 0.5);
    animation: highlightPulse 0.8s ease-in-out infinite alternate;
}

@keyframes highlightPulse {
    from {
        box-shadow: 0 0 0 4px #FFD700, 0 4px 15px rgba(255, 215, 0, 0.5);
        transform: scale(1.05);
    }
    to {
        box-shadow: 0 0 0 6px #FFD700, 0 6px 20px rgba(255, 215, 0, 0.7);
        transform: scale(1.1);
    }
}

.tile-emoji {
    /* 字体大小使用相对单位，根据格子大小自适应 */
    font-size: clamp(16px, 4vw, 24px);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    user-select: none;
    pointer-events: none;
}

/* 路径引导长柱形遮罩与箭头样式 */
.game-tile.move-guide {
    position: relative;
    /* 给整个格子加一个明亮的半透明遮罩背景 */
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.8);
    z-index: 5;
    border-radius: 10px;
}

.game-tile.move-guide::after {
    /* 箭头字符 */
    content: '➔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10;
    /* 默认方向向右，后面根据不同类名旋转 */
    animation: guideArrowMove 1s infinite ease-in-out;
}

/* 各个方向的箭头旋转 */
.game-tile.move-guide-right::after {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: guideArrowRight 1s infinite ease-in-out;
}
.game-tile.move-guide-left::after {
    transform: translate(-50%, -50%) rotate(180deg);
    animation: guideArrowLeft 1s infinite ease-in-out;
}
.game-tile.move-guide-down::after {
    transform: translate(-50%, -50%) rotate(90deg);
    animation: guideArrowDown 1s infinite ease-in-out;
}
.game-tile.move-guide-up::after {
    transform: translate(-50%, -50%) rotate(-90deg);
    animation: guideArrowUp 1s infinite ease-in-out;
}

/* 箭头顺着方向微微移动的动画 */
@keyframes guideArrowRight {
    0%, 100% { transform: translate(-70%, -50%) rotate(0deg); opacity: 0.5; }
    50% { transform: translate(-30%, -50%) rotate(0deg); opacity: 1; }
}
@keyframes guideArrowLeft {
    0%, 100% { transform: translate(-30%, -50%) rotate(180deg); opacity: 0.5; }
    50% { transform: translate(-70%, -50%) rotate(180deg); opacity: 1; }
}
@keyframes guideArrowDown {
    0%, 100% { transform: translate(-50%, -70%) rotate(90deg); opacity: 0.5; }
    50% { transform: translate(-50%, -30%) rotate(90deg); opacity: 1; }
}
@keyframes guideArrowUp {
    0%, 100% { transform: translate(-50%, -30%) rotate(-90deg); opacity: 0.5; }
    50% { transform: translate(-50%, -70%) rotate(-90deg); opacity: 1; }
}

/* 道具栏 */
.powerup-dock {
    grid-area: dock;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: var(--dock-pad-top) 22px var(--dock-pad-bottom);
    gap: 12px;
}

.dock-btn {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4e342e;
}

.dock-btn:active {
    transform: translateY(1px);
}

.dock-btn-circle {
    position: relative;
    width: var(--dock-circle);
    height: var(--dock-circle);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), transparent 45%),
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)),
        linear-gradient(90deg, #b98652, #a87445);
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.18), 0 10px 18px rgba(0,0,0,0.30);
}

.dock-btn-icon {
    font-size: clamp(26px, 4.6vh, 34px);
    line-height: 1;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18));
}

.dock-btn-label {
    font-size: var(--dock-label);
    font-weight: 900;
    letter-spacing: 1px;
}

.dock-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 10px rgba(0,0,0,0.25);
    box-sizing: border-box;
}

.powerup-name {
    font-size: 12px;
    font-weight: bold;
}

/* 进度条 */
.progress-container {
    display: none;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.progress-bar-bg {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ECDC4, #44A08D);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* 游戏头部 */
.game-header {
    display: none;
}

.game-info {
    display: flex;
    gap: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.info-label {
    font-size: 12px;
    color: #999;
}

.info-value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-btn:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

/* 分数弹出动画 */
.score-popup {
    position: absolute;
    color: #FF6B6B;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    animation: scoreFloat 1s ease-out forwards;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes scoreFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-50px);
    }
}

/* 响应式适配 */
@media (max-width: 600px) {
    .game-board {
        gap: 3px;
    }
    
    .tile-emoji {
        font-size: 20px;
    }
    
    .game-tile {
        min-width: 0;
        min-height: 0;
    }

    .topbar-pill-value {
        font-size: 26px;
    }
    
    .dock-btn-circle {
        width: 70px;
        height: 70px;
    }
    
    .dock-btn-icon {
        font-size: 32px;
    }
    
    .dock-btn-label {
        font-size: 16px;
    }
}