* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #15663b;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.sol-header {
    width: 100%;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}
.sol-header h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.sol-header h1 span { font-size: 0.55rem; color: #bfe3cc; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.sol-main { width: 100%; max-width: 640px; padding: 6px 10px 24px; }

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.toolbar .stat { font-weight: 700; font-variant-numeric: tabular-nums; }
.new-game-btn {
    margin-left: auto;
    background: #f1c40f; color: #1b3a2a; border: none;
    padding: 8px 14px; border-radius: 8px; font-weight: 800; cursor: pointer;
}
.new-game-btn:hover { filter: brightness(1.05); }

/* ----- Layout ----- */
:root { --cw: 11.5vw; --ch: calc(var(--cw) * 1.4); --maxcw: 80px; }
.board { display: flex; flex-direction: column; gap: 14px; }
.top-row, .tableau-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.2vw; }
@media (min-width: 600px) { .top-row, .tableau-row { gap: 10px; } :root { --cw: 80px; } }

.pile {
    width: 100%;
    max-width: var(--maxcw);
    aspect-ratio: 5 / 7;
    border-radius: 6px;
    position: relative;
}
.top-row .pile { border: 1.5px solid rgba(255, 255, 255, 0.28); }
.top-row .pile.spacer { border: none; }
.tableau { aspect-ratio: auto; min-height: var(--ch); border: 1.5px solid rgba(255, 255, 255, 0.14); }

.pile-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); font-size: 1.4rem; font-weight: 700; }
.recycle-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: rgba(255, 255, 255, 0.5); }
.stock { cursor: pointer; }

/* Remaining-cards counter on the stock pile */
.stock-count {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px; border-radius: 9px; pointer-events: none; line-height: 1.4;
}

/* When the stock is empty but the waste can recycle, pulse to draw the eye */
.pile.stock.recycle { animation: stock-pulse 1.15s ease-in-out infinite; }
.pile.stock.recycle .recycle-icon { color: #f1c40f; }
@keyframes stock-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); border-color: rgba(255,255,255,0.28); }
    50% { box-shadow: 0 0 0 5px rgba(241, 196, 15, 0.45); border-color: #f1c40f; }
}

/* ----- Cards ----- */
.card {
    width: 100%;
    max-width: var(--maxcw);
    aspect-ratio: 5 / 7;
    border-radius: 6px;
    background: #fff;
    color: #222;
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-weight: 700;
    user-select: none;
}
.card.red { color: #d4213d; }
.card.black { color: #222; }
.card.down {
    background: repeating-linear-gradient(45deg, #2b6cb0, #2b6cb0 6px, #2c5282 6px, #2c5282 12px);
    border: 2px solid #fff;
}
.card.sel { outline: 3px solid #f1c40f; outline-offset: -1px; z-index: 5; }

.card .c-tl, .card .c-br { position: absolute; font-size: clamp(0.7rem, 3.2vw, 1rem); line-height: 1; }
.card .c-tl { top: 4px; left: 5px; }
.card .c-br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.card .c-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.1rem, 5vw, 1.7rem); }

/* tableau cards stack with absolute offsets set in JS */
.tableau .card { position: absolute; left: 0; }

.stats-line { text-align: center; margin-top: 16px; font-size: 0.82rem; color: #bfe3cc; font-variant-numeric: tabular-nums; }

/* ----- Win modal ----- */
.win-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.win-modal.open { display: flex; }
.win-box { background: #fff; color: #1b3a2a; border-radius: 14px; padding: 28px 32px; text-align: center; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4); }
.win-box h2 { margin: 0 0 12px; }
.win-box .win-best { color: #7f8c8d; font-size: 0.9rem; }
.win-box .new-game-btn { margin-top: 16px; }

.version-info { position: fixed; bottom: 6px; right: 8px; font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); }