/* solitaire.css — Fruggia Klondike Solitaire */

/* ── Responsive card sizing via CSS custom property ──────────────────────── */
.sl-area {
    --sl-cw: min(72px, calc((100vw - 72px) / 7));
    --sl-ch: calc(var(--sl-cw) * 1.4);
    --sl-gap: 5px;
    max-width: calc(7 * var(--sl-cw) + 6 * var(--sl-gap) + 2rem);
    margin: 0 auto;
    user-select: none;
}

/* Override fc-card fixed dimensions inside solitaire */
.sl-area .fc-card {
    width: var(--sl-cw);
    height: var(--sl-ch);
    animation: none; /* disable deal-in on each render tick */
    flex-shrink: 0;
}
.sl-area .fc-rank   { font-size: calc(var(--sl-cw) * 0.165); }
.sl-area .fc-suit   { font-size: calc(var(--sl-cw) * 0.13); }
.sl-area .fc-center { font-size: calc(var(--sl-cw) * 0.33); }
.sl-area .fc-tl { top: calc(var(--sl-cw) * 0.054); left: calc(var(--sl-cw) * 0.082); }
.sl-area .fc-br { bottom: calc(var(--sl-cw) * 0.054); right: calc(var(--sl-cw) * 0.082); }

/* ── Green felt table ────────────────────────────────────────────────────── */
.sl-table {
    background: #14532d;
    border-radius: 16px;
    padding: 0.9rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

/* ── Top row: stock, waste, gap, foundations ─────────────────────────────── */
.sl-top-row {
    display: flex;
    gap: var(--sl-gap);
    align-items: flex-start;
    margin-bottom: var(--sl-gap);
}
.sl-top-spacer { flex: 1; min-width: var(--sl-gap); }

/* ── Empty slot placeholder ──────────────────────────────────────────────── */
.sl-empty {
    width: var(--sl-cw);
    height: var(--sl-ch);
    border: 2px dashed rgba(255,255,255,.22);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    font-family: Georgia, serif;
    font-size: calc(var(--sl-cw) * 0.28);
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Stock reset ─────────────────────────────────────────────────────────── */
.sl-reset {
    width: var(--sl-cw);
    height: var(--sl-ch);
    border: 2px dashed rgba(255,255,255,.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
    font-size: calc(var(--sl-cw) * 0.5);
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.sl-reset:hover { border-color: rgba(255,255,255,.7); color: #fff; }

/* ── Tableau ─────────────────────────────────────────────────────────────── */
.sl-tableau {
    display: flex;
    gap: var(--sl-gap);
    align-items: flex-start;
}
.sl-col {
    flex: 0 0 var(--sl-cw);
    position: relative;
}
.sl-col-inner {
    position: relative;
}

/* ── Card selection highlight ────────────────────────────────────────────── */
.sl-area .fc-card.sl-sel {
    box-shadow: 0 0 0 3px #fbbf24, 0 4px 14px rgba(0,0,0,.35);
    transform: translateY(-4px);
    z-index: 10;
}

/* ── Controls row below table ────────────────────────────────────────────── */
.sl-controls {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.sl-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sl-btn-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Draw-mode toggle */
.sl-draw-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    white-space: nowrap;
}
.sl-draw-label input { cursor: pointer; }

/* ── Win overlay ─────────────────────────────────────────────────────────── */
.sl-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(15,23,42,.88);
    color: #f1f5f9;
    text-align: center;
    padding: 1.5rem;
    z-index: 100;
}
.sl-overlay.hidden { display: none; }
.sl-overlay h2 { font-size: 1.6rem; }
.sl-overlay p  { font-size: 0.9rem; color: #94a3b8; }

/* ── Dark theme stat boxes ───────────────────────────────────────────────── */
[data-theme="dark"] .stat-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .stat-box .value { color: #f1f5f9; }
[data-theme="dark"] .sl-draw-label { color: #cbd5e1; }

/* -- Waste zone (position:relative needed for Draw-3 fan absolute children) -- */
#sl-waste {
    position: relative;
    flex-shrink: 0;
    transition: width 0.12s ease;
}

/* -- Drag ghost --------------------------------------------------------------- */
.sl-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}
.sl-drag-ghost .fc-card {
    animation: none !important;
}