/**
 * Tri-Peaks Solitaire Responsive Design
 * 双重约束动态计算法 (Double-Constraint Dynamic Sizing)
 * 适配所有设备：桌面、平板、手机（横屏/竖屏）
 * © 2025 SolitairePlus
 */

/* ============================================
   核心响应式变量 - CSS Variables
   ============================================ */

:root {
    /* Header高度 */
    --tripeaks-header-height: var(--header-height, 48px);
    --tripeaks-available-height: calc(100vh - var(--tripeaks-header-height));
    
    /* 间距系统 */
    --tripeaks-spacing: 0.5vw;
    
    /* 双重约束卡牌计算 */
    /* Tri-Peaks: 3个金字塔，底层10张卡片 (3+4+3) */
    --tripeaks-card-width-by-width: calc((100vw - 4vw - 9 * var(--tripeaks-spacing)) / 10);
    --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 8vh) / 3.6);
    
    /* 取较小值确保完全适配 */
    --tripeaks-card-width: min(
        var(--tripeaks-card-width-by-width),
        var(--tripeaks-card-width-by-height)
    );
    --tripeaks-card-height: calc(var(--tripeaks-card-width) * 1.4);
    --tripeaks-card-border-radius: calc(var(--tripeaks-card-width) * 0.08);
    
    /* 最小最大限制 */
    --tripeaks-min-card-width: 70px;
    --tripeaks-min-card-height: 98px;
    --tripeaks-max-card-width: 155px;
    --tripeaks-max-card-height: 217px;
    
    /* 应用clamp限制 */
    --card-width: clamp(
        var(--tripeaks-min-card-width),
        var(--tripeaks-card-width),
        var(--tripeaks-max-card-width)
    );
    --card-height: clamp(
        var(--tripeaks-min-card-height),
        var(--tripeaks-card-height),
        var(--tripeaks-max-card-height)
    );
}

/* ============================================
   游戏容器 - Game Board
   ============================================ */

.tripeaks-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--tripeaks-available-height);
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5vh 1vw 3vh;
    gap: 2vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ============================================
   Tri-Peaks容器 (3个金字塔)
   ============================================ */

.tripeaks-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    gap: 0;
    flex-shrink: 0;
}

.tripeaks-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 100%;
}

/* 金字塔重叠效果 - 70%重叠 */
.tripeaks-row {
    margin-top: calc(var(--card-height) * -0.7);
}

.tripeaks-row.row-0 {
    margin-top: 0; /* 顶层不重叠 */
}

/* 金字塔间隔 */
.pyramid-spacer {
    width: calc(var(--card-width) * 0.12);
    flex-shrink: 0;
}

/* Peak容器 - 每个金字塔顶部 */
.peak-container {
    min-width: calc(var(--card-width) * 3 + 2 * var(--tripeaks-spacing));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--tripeaks-spacing);
}

/* 金字塔组 */
.pyramid-group {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--tripeaks-spacing);
    position: relative;
    min-width: calc(var(--card-width) * 3 + 2 * var(--tripeaks-spacing));
}

/* 底层卡片行 */
.tripeaks-row.row-3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(var(--tripeaks-spacing) * 0.5);
}

/* ============================================
   Tri-Peaks卡片样式
   ============================================ */

.tripeaks-card,
.tripeaks-card-spacer {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--tripeaks-card-border-radius);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tripeaks-card.face-up {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.tripeaks-card.face-down {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

.tripeaks-card.playable {
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    pointer-events: auto !important;
    z-index: 20;
}

.tripeaks-card.playable:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4),
                0 0 15px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
    z-index: 100;
}

.tripeaks-card.free {
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    pointer-events: auto !important;
    z-index: 10;
}

.tripeaks-card.free:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    z-index: 50;
}

.tripeaks-card.covered {
    opacity: 1;
    filter: brightness(0.95);
    pointer-events: none;
    z-index: 1;
}

.tripeaks-card.removed {
    opacity: 0;
    pointer-events: none;
}

.tripeaks-card-spacer {
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   底部区域 - Stock/Waste
   ============================================ */

.bottom-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: max(3vw, 2rem);
    padding: 1.5vh 0;
    flex-shrink: 0;
}

.stock-waste-area {
    display: flex;
    align-items: center;
    gap: max(2vw, 1.5rem);
}

.stock-pile {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--tripeaks-card-border-radius);
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.stock-pile:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    transform: scale(1.02);
}

.stock-count {
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    border-radius: 50%;
    min-width: 3rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.waste-pile {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--tripeaks-card-border-radius);
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waste-card {
    width: 100%;
    height: 100%;
    border-radius: var(--tripeaks-card-border-radius);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.game-info-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.game-info-value {
    font-size: 32px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================
   提示动画
   ============================================ */

.tripeaks-card.hint-highlight,
.waste-card.hint-highlight {
    animation: hintPulse 0.6s ease-in-out 3;
    z-index: 200;
}

@keyframes hintPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8),
                    0 8px 16px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   响应式断点 - Breakpoints
   ============================================ */

/* 超大桌面 (≥1920px) */
@media (min-width: 1920px) {
    :root {
        --tripeaks-max-card-width: 180px;
        --tripeaks-max-card-height: 252px;
    }
    
    .tripeaks-board {
        padding: 2vh 1.5vw 4vh;
        gap: 2.5vh;
    }
    
    .bottom-area {
        gap: max(3.5vw, 2.5rem);
        padding: 2vh 0;
    }
}

/* 大桌面 (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --tripeaks-spacing: 0.6vw;
        --tripeaks-card-width-by-width: calc((100vw - 3.5vw - 9 * var(--tripeaks-spacing)) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 7vh) / 3.7);
    }
}

/* 标准桌面 (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --tripeaks-spacing: 0.6vw;
        --tripeaks-card-width-by-width: calc((100vw - 3vw - 9 * var(--tripeaks-spacing)) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 6vh) / 3.8);
        --tripeaks-max-card-width: 140px;
        --tripeaks-max-card-height: 196px;
    }
}

/* 平板横屏 (768px - 1023px, landscape) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    :root {
        --tripeaks-spacing: 0.5vw;
        --tripeaks-card-width-by-width: calc((100vw - 2.5vw - 9 * var(--tripeaks-spacing)) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 4vh) / 4.2);
        --tripeaks-min-card-width: 60px;
        --tripeaks-min-card-height: 84px;
        --tripeaks-max-card-width: 110px;
        --tripeaks-max-card-height: 154px;
    }
    
    .tripeaks-board {
        padding: 1vh 0.8vw 2vh;
        gap: 1.5vh;
    }
    
    .stock-count {
        font-size: 1.4rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        border-width: 2px;
    }
    
    .game-info {
        padding: 10px 15px;
    }
    
    .game-info-label {
        font-size: 11px;
    }
    
    .game-info-value {
        font-size: 24px;
    }
}

/* 平板竖屏 (768px - 1023px, portrait) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.4vw;
        --tripeaks-card-width-by-width: calc((100vw - 5vw) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 8vh) / 3.5);
        --tripeaks-min-card-width: 48px;
        --tripeaks-min-card-height: 67px;
        --tripeaks-max-card-width: 92px;
        --tripeaks-max-card-height: 129px;
    }
    
    .tripeaks-board {
        padding: 1vh 2vw 8vh;
    }
    
    .tripeaks-row.row-3 {
        gap: 0; /* 完全无间距 */
    }
    
    .bottom-area {
        gap: max(2.5vw, 1.5rem);
    }
}

/* 手机横屏 (≤767px, landscape) */
@media (max-width: 767px) and (orientation: landscape) {
    :root {
        --tripeaks-spacing: 0.4vw;
        --tripeaks-card-width-by-width: calc((100vw - 2vw - 9 * var(--tripeaks-spacing)) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 2.5vh) / 5);
        --tripeaks-min-card-width: 38px;
        --tripeaks-min-card-height: 53px;
        --tripeaks-max-card-width: 65px;
        --tripeaks-max-card-height: 91px;
    }
    
    .tripeaks-board {
        padding: 0.3vh 0.4vw 1vh;
        gap: 0.8vh;
    }
    
    .tripeaks-row {
        margin-top: calc(var(--card-height) * -0.72); /* 更紧密重叠 */
    }
    
    .tripeaks-row.row-0 {
        margin-top: 0;
    }
    
    .bottom-area {
        gap: max(1.5vw, 1rem);
        padding: 0.5vh 0;
    }
    
    .stock-waste-area {
        gap: max(1.2vw, 0.8rem);
    }
    
    .stock-count {
        font-size: 1rem;
        min-width: 2rem;
        min-height: 2rem;
        border-width: 2px;
        padding: 0.2rem 0.4rem;
    }
}

/* 超窄横屏手机 (≤667px landscape，如iPhone SE) */
@media (max-width: 667px) and (orientation: landscape) {
    :root {
        --tripeaks-spacing: 0.35vw;
        --tripeaks-card-width-by-width: calc((100vw - 1.8vw - 9 * var(--tripeaks-spacing)) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 2vh) / 5.3);
        --tripeaks-min-card-width: 36px;
        --tripeaks-min-card-height: 50px;
        --tripeaks-max-card-width: 60px;
        --tripeaks-max-card-height: 84px;
    }
    
    .tripeaks-board {
        padding: 0.2vh 0.3vw 0.8vh;
        gap: 0.5vh;
    }
    
    .tripeaks-row {
        margin-top: calc(var(--card-height) * -0.73);
    }
    
    .bottom-area {
        gap: max(1.2vw, 0.8rem);
        padding: 0.3vh 0;
    }
    
    .stock-waste-area {
        gap: max(1vw, 0.6rem);
    }
    
    .stock-count {
        font-size: 0.9rem;
        min-width: 1.8rem;
        min-height: 1.8rem;
        border-width: 2px;
        padding: 0.15rem 0.3rem;
    }
}

/* iPhone 14 Pro Max 竖屏 (430px) */
@media (min-width: 430px) and (max-width: 430px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.2vw;
        --tripeaks-card-width-by-width: calc((100vw - 14vw) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 10vh) / 3.3);
        --tripeaks-min-card-width: 26px;
        --tripeaks-min-card-height: 36px;
        --tripeaks-max-card-width: 58px;
        --tripeaks-max-card-height: 81px;
    }
    
    .tripeaks-board {
        padding: 1vh 4vw 10vh;
        gap: 1.5vh;
    }
    
    .tripeaks-row.row-3 {
        gap: 0; /* 完全无间距 */
    }
}

/* 手机竖屏 (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.2vw;
        --tripeaks-card-width-by-width: calc((100vw - 12vw) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 10vh) / 3.3);
        --tripeaks-min-card-width: 28px;
        --tripeaks-min-card-height: 39px;
        --tripeaks-max-card-width: 60px;
        --tripeaks-max-card-height: 84px;
    }
    
    .tripeaks-board {
        padding: 1vh 3vw 10vh;
        gap: 1.5vh;
    }
    
    .tripeaks-row.row-3 {
        gap: 0; /* 完全无间距 */
    }
    
    .bottom-area {
        gap: max(2vw, 1.2rem);
        padding: 1vh 0;
    }
    
    .stock-count {
        font-size: 1.3rem;
        min-width: 2.3rem;
        min-height: 2.3rem;
        border-width: 2px;
    }
    
    /* 滚动提示 */
    .tripeaks-board::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
        pointer-events: none;
        z-index: 10;
    }
}

/* 小手机竖屏 (≤480px) */
@media (max-width: 480px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.15vw;
        --tripeaks-card-width-by-width: calc((100vw - 13vw) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 12vh) / 3.2);
        --tripeaks-min-card-width: 26px;
        --tripeaks-min-card-height: 36px;
        --tripeaks-max-card-width: 55px;
        --tripeaks-max-card-height: 77px;
    }
    
    .tripeaks-board {
        padding: 0.8vh 3.5vw 12vh;
        gap: 1.2vh;
    }
    
    .tripeaks-row.row-3 {
        gap: 0; /* 完全无间距 */
    }
    
    .bottom-area {
        gap: max(1.8vw, 1rem);
        padding: 0.8vh 0;
    }
    
    .stock-waste-area {
        gap: max(1.5vw, 0.8rem);
    }
    
    .stock-count {
        font-size: 1.2rem;
        min-width: 2.2rem;
        min-height: 2.2rem;
        border-width: 2px;
        padding: 0.3rem 0.5rem;
    }
    
    /* 滚动提示 */
    .tripeaks-board::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 45px;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12));
        pointer-events: none;
        z-index: 10;
    }
}

/* 超小手机竖屏 (≤375px) */
@media (max-width: 375px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.1vw;
        --tripeaks-card-width-by-width: calc((100vw - 14vw) / 10);
        --tripeaks-card-width-by-height: calc((var(--tripeaks-available-height) - 14vh) / 3.1);
        --tripeaks-min-card-width: 24px;
        --tripeaks-min-card-height: 34px;
        --tripeaks-max-card-width: 50px;
        --tripeaks-max-card-height: 70px;
    }
    
    .tripeaks-board {
        padding: 0.6vh 4vw 14vh;
        gap: 1vh;
    }
    
    .pyramid-spacer {
        width: calc(var(--card-width) * 0.03); /* 极致紧密 */
    }
    
    .tripeaks-row.row-3 {
        gap: 0; /* 完全无间距 */
    }
    
    .bottom-area {
        gap: max(1.5vw, 0.8rem);
        padding: 0.6vh 0;
    }
    
    .stock-waste-area {
        gap: max(1.2vw, 0.6rem);
    }
    
    .stock-count {
        font-size: 1.1rem;
        min-width: 2rem;
        min-height: 2rem;
        border-width: 2px;
        padding: 0.25rem 0.4rem;
    }
}

/* ============================================
   Header响应式优化
   ============================================ */

/* 手机横屏header最小化 */
@media (max-width: 767px) and (orientation: landscape) {
    .unified-header {
        min-height: 50px;
        padding: 0.3rem 0.5rem;
    }
    
    .brand-section {
        font-size: 0.9rem;
    }
    
    .action-btn-compact {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .stat-compact {
        font-size: 0.8rem;
    }
}

/* ============================================
   触摸优化
   ============================================ */

@media (max-width: 767px) {
    .tripeaks-card.playable {
        /* 增大触摸区域 */
        touch-action: manipulation;
    }
    
    .tripeaks-card.playable::after {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        z-index: -1;
    }
    
    .stock-pile {
        touch-action: manipulation;
        min-height: 44px; /* iOS最小触摸目标 */
    }
}

/* ============================================
   性能优化
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .tripeaks-card,
    .stock-pile,
    .waste-card {
        transition: none;
        animation: none;
    }
}

/* 硬件加速 */
.tripeaks-card,
.waste-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}