/**
 * Tri-Peaks Solitaire Styles
 * Developed for solitaer-gross.de
 * © 2025 SolitairePlus
 */

/* ============================================
   TRI-PEAKS GAME BOARD
   ============================================ */

.tripeaks-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(15px, 2.5vh, 30px);
    padding: clamp(10px, 2vh, 20px) clamp(5px, 1vw, 15px) clamp(15px, 3vh, 30px);
    min-height: calc(100vh - var(--header-height, 60px));
    max-height: calc(100vh - var(--header-height, 60px));
    height: calc(100vh - var(--header-height, 60px));
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    /* 平滑过渡支持 */
    transition: padding 0.3s ease, gap 0.3s ease;
}

/* ============================================
   TRI-PEAKS CONTAINER (3 Pyramids)
   ============================================ */

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

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

/* Row positioning - overlapping cards for pyramid effect */
/* Each row overlaps 70% of card height for more compact pyramid */
.tripeaks-row {
    margin-top: calc(clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * -0.7);
}

.tripeaks-row.row-0 {
    margin-top: 0; /* First row doesn't overlap */
}

/* Row 0 - peaks as reference points for each pyramid */
.tripeaks-row.row-0 {
    gap: 0; /* Peaks have custom spacing via pyramid-spacer */
}

/* Spacer between pyramids - creates separation */
.pyramid-spacer {
    width: calc(clamp(var(--tripeaks-min-card-width), var(--tripeaks-card-width), var(--tripeaks-max-card-width)) * 0.1);
    flex-shrink: 0;
}

/* Peak container - wraps each peak card to create alignment space */
.peak-container {
    /* 减少min-width以防止溢出 */
    min-width: calc(clamp(var(--tripeaks-min-card-width), var(--tripeaks-card-width), var(--tripeaks-max-card-width)) * 2.8 + 2 * var(--tripeaks-spacing));
    max-width: calc(100vw - 4vw); /* 确保不超出视口 */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--tripeaks-spacing);
}

/* Pyramid groups - each pyramid's layer centered relative to its peak */
.pyramid-group {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--tripeaks-spacing);
    position: relative;
    /* 减少min-width以防止溢出 */
    min-width: calc(clamp(var(--tripeaks-min-card-width), var(--tripeaks-card-width), var(--tripeaks-max-card-width)) * 2.8 + 2 * var(--tripeaks-spacing));
    max-width: calc(100vw - 4vw); /* 确保不超出视口 */
}

/* Cards within pyramid - no horizontal overlap */
.pyramid-group .tripeaks-card {
    margin: 0;
}

/* Ensure row 1 and row 2 maintain pyramid structure */
.tripeaks-row.row-1,
.tripeaks-row.row-2 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Row 3 base - all cards centered */
.tripeaks-row.row-3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
}

/* ============================================
   TRI-PEAKS CARDS (统一尺寸)
   ============================================ */

/* Tri-Peaks card sizing - 基于宽高比的智能缩放 */
:root {
    /* Tri-Peaks间距系统 */
    --tripeaks-spacing: 0.3vw;
    
    /* 基于屏幕宽高比的智能计算 */
    --screen-aspect-ratio: calc(100vw / 100vh);
    
    /* 根据宽高比动态调整卡片尺寸 */
    --tripeaks-card-width-by-width: calc((100vw - 4vw - 9 * var(--tripeaks-spacing)) / 10);
    --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 20vh) / 3.8);
    
    /* 选择较小值确保适配 */
    --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);
    
    /* 最小和最大尺寸 - 参考Pyramid */
    --tripeaks-min-card-width: 77px;
    --tripeaks-min-card-height: 108px;
    --tripeaks-max-card-width: 155px;
    --tripeaks-max-card-height: 217px;
}

@media (min-width: 1920px) {
    :root {
        --tripeaks-max-card-width: 180px;
        --tripeaks-max-card-height: 252px;
    }
    
    .tripeaks-board {
        gap: clamp(20px, 3vh, 35px);
        padding: clamp(15px, 2.5vh, 25px) clamp(10px, 1.5vw, 20px) clamp(20px, 3.5vh, 35px);
    }
}

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

/* Row 3 cards already styled above */
.tripeaks-row.row-3 .tripeaks-card {
    margin: 0;
}

/* Card spacer (empty positions) */
.tripeaks-card-spacer {
    opacity: 0;
    pointer-events: none;
}

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

/* Face-down cards - no transparency */
.tripeaks-card.face-down {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 1; /* Full opacity */
    pointer-events: none; /* Cannot click face-down cards */
    z-index: 1;
}

/* Playable cards (can be matched with waste) - subtle default state */
.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;
}

/* Free cards (not playable but uncovered) */
.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;
}

/* Covered cards (blocked by cards above) */
.tripeaks-card.covered {
    opacity: 1; /* No transparency */
    filter: brightness(0.95); /* Slight darkening */
    pointer-events: none; /* Cannot click covered cards */
    z-index: 1;
}

/* Removed cards (invisible placeholder) */
.tripeaks-card.removed {
    opacity: 0;
    pointer-events: none;
}

/* Hint highlight animation - only shown when user clicks hint button */
.tripeaks-card.hint-highlight,
.waste-card.hint-highlight {
    animation: hintPulse 0.6s ease-in-out 3;
    z-index: 200;
}

@keyframes hintPulse {
    0%, 100% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transform: scale(1);
        border-color: transparent;
    }
    50% {
        box-shadow: 0 0 40px rgba(76, 175, 80, 0.9),
                    0 0 60px rgba(76, 175, 80, 0.6),
                    0 8px 20px rgba(0, 0, 0, 0.5);
        transform: scale(1.08) translateY(-4px);
        border: 3px solid rgba(76, 175, 80, 0.9);
    }
}

/* ============================================
   BOTTOM AREA (Stock, Waste, Info)
   ============================================ */

.bottom-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 800px;
    flex-wrap: wrap;
}

.stock-waste-area {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* ============================================
   STOCK PILE (统一卡片尺寸)
   ============================================ */

.stock-pile {
    width: clamp(var(--tripeaks-min-card-width), var(--tripeaks-card-width), var(--tripeaks-max-card-width));
    height: clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height));
    background-image: url('../images/cards/Back.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.stock-pile:hover:not(.empty) {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(33, 150, 243, 0.4);
    border-color: rgba(33, 150, 243, 0.5);
}

.stock-pile:active:not(.empty) {
    transform: translateY(-3px) scale(1.01);
}

.stock-pile.empty {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stock-pile.empty:hover {
    transform: none;
}

/* Stock count badge */
.stock-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 50%;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.stock-pile.empty .stock-count {
    display: none;
}

/* Hint flash animation for stock */
.stock-pile.hint-flash {
    animation: stockFlash 1s ease-in-out 2;
}

@keyframes stockFlash {
    0%, 100% {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(33, 150, 243, 0.8),
                    0 0 50px rgba(33, 150, 243, 0.5);
        border-color: rgba(33, 150, 243, 0.8);
    }
}

/* ============================================
   WASTE PILE (统一卡片尺寸)
   ============================================ */

.waste-pile {
    width: clamp(var(--tripeaks-min-card-width), var(--tripeaks-card-width), var(--tripeaks-max-card-width));
    height: clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height));
    border: 3px dashed rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
}

.waste-card {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    animation: cardFlipIn 0.3s ease-out;
}

@keyframes cardFlipIn {
    from {
        transform: rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    to {
        transform: rotateY(0) scale(1);
        opacity: 1;
    }
}

/* ============================================
   GAME INFO
   ============================================ */

.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);
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
    .tripeaks-board {
        padding: 15px 5px 20px;
        gap: 20px;
    }
    
    /* Vertical and horizontal overlaps are automatically adjusted via calc() */
    
    .bottom-area {
        gap: 20px;
        padding: 0 10px;
    }
    
    .stock-waste-area {
        gap: 15px;
    }
    
    .stock-count {
        font-size: 20px;
        min-width: 36px;
        min-height: 36px;
        padding: 5px 8px;
    }
    
    .game-info {
        padding: 10px 15px;
    }
    
    .game-info-label {
        font-size: 11px;
    }
    
    .game-info-value {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    :root {
        --tripeaks-card-width: 85px;
        --tripeaks-card-height: 119px;
        --tripeaks-min-card-width: 80px;
        --tripeaks-min-card-height: 112px;
    }
    
    /* Overlaps are automatically calculated based on card size (70%) */
    
    .stock-count {
        font-size: 18px;
        min-width: 32px;
        min-height: 32px;
    }
}

/* ============================================
   LANDSCAPE MODE ON MOBILE
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    :root {
        --tripeaks-card-width: 80px;
        --tripeaks-card-height: 112px;
        --tripeaks-min-card-width: 75px;
        --tripeaks-min-card-height: 105px;
    }
    
    .tripeaks-board {
        padding: 10px 5px 15px;
        gap: 15px;
    }
    
    /* Overlaps are automatically calculated based on card size (70%) */
    
    .bottom-area {
        gap: 15px;
    }
    
    .stock-waste-area {
        gap: 12px;
    }
    
    .stock-count {
        font-size: 16px;
        min-width: 28px;
        min-height: 28px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .tripeaks-board {
        background: white;
    }
    
    .bottom-area,
    .game-info {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus styles for keyboard navigation */
.tripeaks-card.playable:focus,
.stock-pile:focus {
    outline: 3px solid #ffd700;
    outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tripeaks-card,
    .stock-pile,
    .waste-card {
        transition: none;
        animation: none;
    }
    
    .tripeaks-card.playable:hover {
        transform: translateY(-4px) scale(1.02);
    }
    
    .stock-pile:hover:not(.empty) {
        transform: translateY(-3px);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .tripeaks-card {
        border: 2px solid white;
    }
    
    .tripeaks-card.playable {
        border: 3px solid yellow;
    }
    
    .stock-pile {
        border: 3px solid white;
    }
    
    .waste-pile {
        border: 3px dashed white;
    }
}

/* ============================================
   RESPONSIVE DESIGN - 弹性自适应系统
   ============================================ */

/* 平板横屏 */
@media (max-width: 1024px) and (orientation: landscape) {
    :root {
        --tripeaks-card-width-by-width: calc((100vw - 3vw) / 11);
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 18vh) / 4.5);
        --tripeaks-min-card-width: 65px;
        --tripeaks-min-card-height: 91px;
    }
    
    .tripeaks-board {
        gap: clamp(12px, 2vh, 20px);
        padding: clamp(8px, 1.5vh, 15px) clamp(5px, 1vw, 10px) clamp(10px, 2vh, 20px);
    }
    
    .controls-area {
        gap: clamp(15px, 2.5vw, 25px);
    }
    
    .stock-waste-container {
        gap: clamp(12px, 2vw, 20px);
    }
}

/* 手机横屏 - 基于宽高比的智能缩放 */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        --tripeaks-spacing: 0.15vw;
        --tripeaks-card-width-by-width: calc((100vw - 2vw - 9 * var(--tripeaks-spacing)) / 10.5);
        
        /* 根据屏幕高度动态调整 */
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 14vh) / 4.5);
        
        --tripeaks-min-card-width: 55px;
        --tripeaks-min-card-height: 77px;
    }
    
    .tripeaks-board {
        gap: 5px;
        padding: 4px 4px 2px 4px;
    }
    
    .tripeaks-container {
        margin-top: 2px;
        flex-shrink: 1;
    }
    
    .tripeaks-row {
        margin-top: calc(-1 * clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * 0.78);
    }
    
    .bottom-area {
        gap: 8px;
        margin-top: 3px;
        margin-bottom: 2px;
    }
    
    .stock-waste-container {
        gap: 6px;
    }
}

/* 平板竖屏 */
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --tripeaks-card-width-by-width: calc((100vw - 3vw) / 10);
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 25vh) / 4);
        --tripeaks-min-card-width: 70px;
        --tripeaks-min-card-height: 98px;
    }
    
    .tripeaks-board {
        gap: clamp(12px, 2.5vh, 25px);
        padding: clamp(8px, 1.8vh, 18px) clamp(5px, 1vw, 12px) clamp(12px, 2.5vh, 25px);
    }
    
    .controls-area {
        gap: clamp(15px, 2.5vw, 30px);
    }
}

/* 手机竖屏 - 基于宽高比的智能缩放 */
@media (max-width: 768px) and (orientation: portrait) {
    :root {
        --tripeaks-spacing: 0.15vw;
        
    /* 根据宽高比动态调整 - 更激进的宽度计算 */
    --tripeaks-card-width-by-width: calc((100vw - 2vw - 9 * var(--tripeaks-spacing)) / 11);
    
    /* 根据屏幕宽高比调整高度除数 - 更激进的缩放 */
    --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 30vh) / 4.5);
    
    /* 超长屏幕 (20:9+) 特殊处理 */
    --tripeaks-card-width-by-height-long: calc((100vh - var(--header-height, 60px) - 28vh) / 5.0);
    
    /* 选择合适的高度计算 */
    --tripeaks-card-width-by-height-final: var(--tripeaks-card-width-by-height);
    
    --tripeaks-min-card-width: 38px;
    --tripeaks-min-card-height: 53px;
    }
    
    /* 超长屏幕 (20:9及以上) */
    @supports (aspect-ratio: 9/20) {
        :root {
            --tripeaks-card-width-by-height-final: var(--tripeaks-card-width-by-height-long);
        }
    }
    
    .tripeaks-board {
        gap: 4px;
        padding: 4px 2px 2px 2px;
        max-height: calc(100vh - var(--header-height, 60px));
        justify-content: space-between;
    }
    
    .tripeaks-container {
        margin-top: 1px;
        flex-shrink: 1;
        min-height: 0;
        /* 竖屏弹性缩放 */
        transform: scale(0.95);
        transform-origin: center top;
    }
    
    .tripeaks-row {
        margin-top: calc(-1 * clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * 0.80);
    }
    
    .bottom-area {
        flex-direction: column;
        gap: 6px;
        margin-top: 3px;
        margin-bottom: 2px;
        flex-shrink: 0;
    }
    
    .stock-waste-container {
        gap: 8px;
    }
    
    .game-info-item {
        padding: clamp(4px, 1vw, 8px) clamp(8px, 1.5vw, 16px);
        font-size: clamp(9px, 2vw, 12px);
    }
    
    .game-info-value {
        font-size: clamp(14px, 3vw, 22px);
    }
}

/* 小屏手机 - 基于宽高比的智能缩放 */
@media (max-width: 480px) {
    :root {
        --tripeaks-spacing: 0.1vw;
        --tripeaks-card-width-by-width: calc((100vw - 1.5vw - 9 * var(--tripeaks-spacing)) / 11);
        
        /* 根据屏幕高度动态调整 - 更激进的缩放 */
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 32vh) / 4.5);
        
        --tripeaks-min-card-width: 35px;
        --tripeaks-min-card-height: 49px;
    }
    
    .tripeaks-board {
        gap: 3px;
        padding: 3px 1px 1px 1px;
        max-height: calc(100vh - var(--header-height, 60px));
    }
    
    .tripeaks-container {
        margin-top: 1px;
        flex-shrink: 1;
        min-height: 0;
        /* 竖屏弹性缩放 */
        transform: scale(0.95);
        transform-origin: center top;
    }
    
    .tripeaks-row {
        margin-top: calc(-1 * clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * 0.82);
    }
    
    .bottom-area {
        gap: 4px;
        margin-top: 2px;
        margin-bottom: 1px;
    }
    
    .stock-waste-container {
        gap: 6px;
    }
    
    .game-info-value {
        font-size: clamp(12px, 2.8vw, 18px);
    }
    
    .stock-count {
        font-size: clamp(12px, 2.8vw, 18px);
    }
}


/* 超小屏幕 - 基于宽高比的智能缩放 */
@media (max-width: 360px) {
    :root {
        --tripeaks-spacing: 0.08vw;
        --tripeaks-card-width-by-width: calc((100vw - 1vw - 9 * var(--tripeaks-spacing)) / 11);
        
        /* 根据屏幕高度动态调整 - 更激进的缩放 */
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 34vh) / 4.2);
        
        --tripeaks-min-card-width: 32px;
        --tripeaks-min-card-height: 45px;
    }
    
    .tripeaks-board {
        gap: 3px;
        padding: 3px 1px 1px 1px;
    }
    
    .tripeaks-container {
        margin-top: 1px;
        flex-shrink: 1;
        min-height: 0;
        /* 竖屏弹性缩放 */
        transform: scale(0.95);
        transform-origin: center top;
    }
    
    .tripeaks-row {
        margin-top: calc(-1 * clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * 0.84);
    }
    
    .bottom-area {
        gap: 4px;
        margin-top: 2px;
        margin-bottom: 1px;
    }
    
    .stock-waste-container {
        gap: 4px;
    }
    
    .game-info-value {
        font-size: clamp(10px, 2.5vw, 16px);
    }
    
    .stock-count {
        font-size: clamp(10px, 2.5vw, 16px);
    }
}

/* 超窄屏幕 - 基于宽高比的智能缩放 */
@media (max-width: 280px) {
    :root {
        --tripeaks-spacing: 0.05vw;
        --tripeaks-card-width-by-width: calc((100vw - 0.8vw - 9 * var(--tripeaks-spacing)) / 11);
        
        /* 根据屏幕高度动态调整 - 最激进的缩放 */
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 36vh) / 4.0);
        
        --tripeaks-min-card-width: 28px;
        --tripeaks-min-card-height: 39px;
    }
    
    .tripeaks-board {
        gap: 2px;
        padding: 2px 1px 1px 1px;
    }
    
    .tripeaks-container {
        margin-top: 0;
        flex-shrink: 1;
        min-height: 0;
    /* 超窄屏弹性缩放 - 更激进的缩放 */
    transform: scale(0.7);
        transform-origin: center top;
    }
    
    .tripeaks-row {
        margin-top: calc(-1 * clamp(var(--tripeaks-min-card-height), var(--tripeaks-card-height), var(--tripeaks-max-card-height)) * 0.85);
    }
    
    .bottom-area {
        gap: 3px;
        margin-top: 1px;
        margin-bottom: 1px;
    }
    
    .stock-waste-container {
        gap: 3px;
    }
    
    .game-info-value {
        font-size: clamp(8px, 2vw, 14px);
    }
    
    .stock-count {
        font-size: clamp(8px, 2vw, 14px);
    }
}

/* 横竖屏切换优化 */
@media (orientation: portrait) {
    .tripeaks-container {
        width: 100%;
        max-width: 100vw;
        overflow: visible;
        /* 竖屏时进一步缩放 - 更激进 */
        transform: scale(0.8);
        transform-origin: center top;
    }
    
    .tripeaks-board {
        /* 竖屏时确保所有内容可见 */
        justify-content: space-between;
    }
    
    .tripeaks-row {
        /* 确保行不溢出 */
        max-width: 100vw;
    }
    
    /* 不同屏幕尺寸的竖屏缩放 */
    @media (max-width: 480px) {
        .tripeaks-container {
            transform: scale(0.75);
        }
    }
    
    @media (max-width: 360px) {
        .tripeaks-container {
            transform: scale(0.7);
        }
    }
    
    @media (max-width: 280px) {
        .tripeaks-container {
            transform: scale(0.65);
        }
    }
}

@media (orientation: landscape) {
    .tripeaks-container {
        width: auto;
        max-width: 95vw;
        /* 横屏时恢复正常缩放 */
        transform: scale(1);
        transform-origin: center center;
    }
    
    .tripeaks-board {
        /* 横屏时居中显示 */
        justify-content: space-between;
    }
    
    .bottom-area {
        /* 横屏时压缩底部区域 */
        flex-shrink: 0;
    }
}

/* 移动端容器弹性适配 - 基于屏幕高度 */
@media (max-height: 600px) and (orientation: portrait) {
    .tripeaks-container {
        transform: scale(0.85);
        margin-top: 0;
    }
}

@media (max-height: 500px) and (orientation: portrait) {
    .tripeaks-container {
        transform: scale(0.8);
        margin-top: 0;
    }
}

@media (max-height: 400px) and (orientation: portrait) {
    .tripeaks-container {
        transform: scale(0.75);
        margin-top: 0;
    }
}

/* 超长屏幕竖屏特殊处理 */
@media (min-height: 800px) and (orientation: portrait) {
    .tripeaks-container {
        transform: scale(1);
        margin-top: 2px;
    }
}

/* 安卓设备额外优化 - 通过User Agent检测 */
@supports (-webkit-appearance: none) {
    @media (max-width: 768px) and (orientation: landscape) {
        /* 安卓横屏时进一步缩小以适应屏幕 */
        :root {
            --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 10vh) / 5.3);
        }
    }
}

/* 小屏设备性能优化 */
@media (max-width: 480px) and (max-height: 800px) {
    .tripeaks-card {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    
    .tripeaks-card.playable:hover,
    .tripeaks-card.free:hover {
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
}

/* 超宽屏优化 (21:9, 32:9) */
@media (min-aspect-ratio: 21/9) and (orientation: landscape) {
    :root {
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 12vh) / 3.5);
    }
    
    .tripeaks-board {
        justify-content: center;
    }
}

/* iPad 竖屏 (3:4) */
@media (aspect-ratio: 3/4) and (orientation: portrait) {
    :root {
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 24vh) / 4);
    }
}

/* iPad 横屏 (4:3) */
@media (aspect-ratio: 4/3) and (orientation: landscape) {
    :root {
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 17vh) / 4.5);
    }
}

/* 超长屏幕竖屏 (20:9 及以上，常见于现代安卓手机) */
@media (max-width: 768px) and (orientation: portrait) and (min-aspect-ratio: 9/20) {
    :root {
        --tripeaks-card-width-by-height: calc((100vh - var(--header-height, 60px) - 26vh) / 3.5);
    }
    
    .tripeaks-board {
        /* 超长屏幕优化间距 */
        gap: clamp(8px, 2vh, 20px);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .tripeaks-card.playable,
    .tripeaks-card.free,
    .stock-pile,
    .action-btn-compact {
        min-width: 44px;
        min-height: 44px;
    }
    
    .tripeaks-card.playable {
        box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.3),
            0 0 0 clamp(3px, 0.5vw, 5px) rgba(255, 215, 0, 0.7);
    }
}

/* iOS Safari 底部安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .tripeaks-board {
        padding-bottom: max(15px, calc(clamp(15px, 3vh, 30px) + env(safe-area-inset-bottom)));
    }
}

/* dvh单位支持 (新浏览器 - 解决移动端地址栏问题) */
@supports (height: 100dvh) {
    .tripeaks-board {
        min-height: calc(100dvh - var(--header-height, 60px));
        max-height: calc(100dvh - var(--header-height, 60px));
        height: calc(100dvh - var(--header-height, 60px));
    }
    
    @media (max-width: 768px) and (orientation: portrait) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 28vh) / 4.2);
        }
        
        .tripeaks-board {
            max-height: calc(100dvh - var(--header-height, 60px));
        }
    }
    
    @media (max-width: 768px) and (orientation: landscape) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 16vh) / 4.2);
        }
    }
    
    @media (max-width: 480px) and (orientation: portrait) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 30vh) / 4.0);
        }
    }
    
    @media (max-width: 360px) and (orientation: portrait) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 32vh) / 3.8);
        }
    }
    
    @media (max-width: 280px) and (orientation: portrait) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 34vh) / 3.5);
        }
    }
    
    /* 超长屏幕竖屏 - 基于宽高比优化 */
    @media (max-width: 768px) and (orientation: portrait) and (min-aspect-ratio: 9/20) {
        :root {
            --tripeaks-card-width-by-height: calc((100dvh - var(--header-height, 60px) - 25vh) / 4.5);
        }
    }
}