/* TriPeaks Solitaire Styles */
.tripeaks-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 6px;
}

.tripeaks-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: -28px;
}

.tripeaks-row:first-child { margin-top: 0; }

.tripeaks-spacer,
.tripeaks-card-space {
    width: var(--syv-card-w, 70px);
    height: var(--syv-card-h, 100px);
    visibility: hidden;
}

.tripeaks-card-space {
    visibility: hidden;
}

.tripeaks-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px;
    position: relative;
}

.tripeaks-streak {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    animation: tp-streak-pop 0.3s ease-out;
}

@keyframes tp-streak-pop {
    0% { transform: translateY(-50%) scale(0.5); }
    70% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

#tripeaks-game {
    --syv-card-w: 64px;
    --syv-card-h: 92px;
}

#tripeaks-game .syvkabale-card,
#tripeaks-game .syvkabale-slot {
    width: var(--syv-card-w);
    height: var(--syv-card-h);
}

#tripeaks-game .syvkabale-card-center { font-size: 20px; }
#tripeaks-game .syvkabale-card-rank { font-size: 12px; }

@media (max-width: 600px) {
    #tripeaks-game { --syv-card-w: 40px; --syv-card-h: 60px; }
    .tripeaks-row { gap: 2px; margin-top: -18px; }
    #tripeaks-game .syvkabale-card-center { font-size: 14px; }
    #tripeaks-game .syvkabale-card-rank { font-size: 9px; }
    #tripeaks-game .syvkabale-card-suit-small { font-size: 7px; }
    .tripeaks-streak { font-size: 12px; padding: 4px 10px; right: 8px; }
}