/**
 * Noos TriPeaks Solitaire — game styles
 * assets/css/games/tripeaks.css (card faces live in assets/css/cards.css)
 */
:root { 
    /* Starting size only — tripeaks.js fits the card size to the real space available
       (the board is 10 card-widths wide, so a fixed 82px minimum shrank it via transform on phones). */
    --card-w: clamp(30px, min(9.0vh, 9.5vw), 105px);
    --card-h: calc(var(--card-w) * 1.4); 
    --header-h: 70px;
    
    --row-offset-v: calc(var(--card-h) * 0.60);
    --col-offset-h: calc(var(--card-w) * 1.00);
}
body, html { 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    background: #f1f5f9; 
    font-family: 'Quicksand', sans-serif;
    height: 100dvh;
}

.game-layout-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-h));
    box-sizing: border-box;
    justify-content: space-between;
    padding: 10px 14px;
}

.game-meta { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 920px; 
    margin: 0 auto; 
    box-sizing: border-box; 
}
.tier-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.diff-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; text-decoration: none; color: #64748b; font-size: 0.8rem; font-weight: 600; cursor:pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.diff-btn:hover { border-color: #b45309; color: #b45309; transform: translateY(-1px); }
.diff-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #e2e8f0; color: #cbd5e1; }

.stats-group { display: flex; gap: 12px; background: white; padding: 6px 12px; border-radius: 15px; border: 1px solid #e2e8f0; }
.stat-counter { font-weight: 800; color: #334155; font-size: 0.85rem; }

.game-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between;
    flex: 1;
    margin: 5px 0 0 0;
    overflow: hidden;
    width: 100%;
}

/* FIXED: Content wrapper isolates scaling transformations to prevent clipping */
.board-viewport-guard {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.tripeaks-layout {
    position: absolute;
    width: calc(var(--card-w) + (var(--col-offset-h) * 9.0));
    height: calc(var(--card-h) + (var(--row-offset-v) * 3.0));
}

.tripeaks-layout .noos-card {
    position: absolute;
    width: var(--card-w);
    height: var(--card-h);
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease;
    margin: 0 !important;
}

.tripeaks-layout .noos-card:not(.playable) {
    cursor: not-allowed;
}
.tripeaks-layout .noos-card.playable {
    cursor: pointer;
}
.tripeaks-layout .noos-card.playable:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    z-index: 100 !important;
}

.deck-interaction-zone { 
    display: flex; 
    gap: 50px; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    padding: 12px 0;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    background: #f1f5f9;
    z-index: 10;
}
.deck-pile-wrapper { display: flex; flex-direction: column; align-items: center; }
.panel-label { color: #64748b; margin: 0 0 4px 0; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.card-container-fixed { width: var(--card-w); height: var(--card-h); position: relative; }
.card-container-fixed .noos-card { position: absolute; top: 0; left: 0; width: var(--card-w); height: var(--card-h); margin: 0 !important; }
.card-placeholder { width: var(--card-w); height: var(--card-h); border: 2px dashed #cbd5e1; border-radius: var(--radius-card, 10px); box-sizing: border-box; }

@media (max-width: 768px) {
    .deck-interaction-zone { gap: 30px; }
}