@import url('/style-guide.css');

/* ── Card-size tokens — all derived from viewport, no px ─────────────────── */
:root {
    --gap:  0.125rem;
    --cw:   clamp(2.125rem, (min(100vw, 56.25rem) - 2rem - var(--gap) * 7) / 8, 5.625rem);
    --ch:   calc(var(--cw) * 1.4);
    --step: calc(var(--ch) * 0.31);
    --cc:   max(0.375rem, calc(var(--cw) * 0.176));
    --pip:  max(0.375rem, calc(var(--cw) * 0.176));
    --let:  max(0.875rem, calc(var(--cw) * 0.4));
}

@media (max-width: 480px) {
    :root { --pip: max(0.32rem, calc(var(--cw) * 0.15)); }
}

/* ── Board layout ────────────────────────────────────────────────────────── */
#board-wrap { align-items: flex-start; }

button { font-family: inherit; }

#board {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.25rem;
}

#top-row,
#tableau {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(8, var(--cw));
}

#tableau {
    align-content: stretch;
    flex: 1;
}

/* ── Pile bases ──────────────────────────────────────────────────────────── */
.pile {
    border-radius: 0.25rem;
    height: var(--ch);
    position: relative;
    width: var(--cw);
}

.fc-pile,
.fn-pile {
    background: rgba(255,255,255,.07);
    border: 0.09375rem dashed rgba(130,180,225,.4);
    transition: background .12s, border-color .12s;
}

.fc-pile:empty:hover,
.fn-pile:empty:hover {
    background: rgba(130,180,225,.14);
    border-color: rgba(130,180,225,.75);
}

/* Suit placeholder in empty foundations — light tints for the dark backdrop */
.fn-pile::before {
    color: rgba(160,195,225,.38);
    content: attr(data-suit);
    font-size: 1.6em;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.fn-pile[data-suit="♥"]::before,
.fn-pile[data-suit="♦"]::before { color: rgba(235,130,120,.34); }

.fn-pile:not(:empty)::before { display: none; }

.col-pile { height: auto; min-height: var(--ch); }

/* Green glow on valid drop targets */
.pile--drop {
    box-shadow: inset 0 0 0.25rem #28a745;
    border-radius: 0.25rem;
}

/* ── Card face ───────────────────────────────────────────────────────────── */
.card {
    background: #fdfdfe;
    border: 0.0625rem solid #c0c0c0;
    border-bottom-color: #aaa;
    border-radius: 0.1875rem;
    box-sizing: border-box;
    cursor: pointer;
    height: var(--ch);
    overflow: hidden;
    position: absolute;
    touch-action: manipulation;
    user-select: none;
    width: var(--cw);
}

/* All cards in FreeCell are always face-up */
.card > .card-face {
    color: #111;
    display: block;
    height: 100%;
    position: relative;
    user-select: none;
    width: 100%;
}

.card > .card-face_red { color: #d62a20; }

.cc {
    align-items: center;
    display: flex;
    font-size: var(--cc);
    gap: .12em;
    left: 5%;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 3%;
}

.cc b,
.cc span {
    font-weight: 600;
}

.cc span { font-size: .9em; }

.cc--br {
    bottom: 3%;
    left: auto;
    right: 5%;
    top: auto;
    transform: rotate(180deg);
}

.pip {
    font-size: var(--pip);
    line-height: 1;
    position: absolute;
    transform: translate(-50%, -50%);
}

.pip--ace { left: 50%; top: 50%; }

.card-face-letter {
    font-size: var(--let);
    font-weight: 700;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ── Pip positions per card value (exact copy from solitaire.css) ────────── */
.card-value-2 .pip:nth-of-type(1) { left: 50%; top: 33% }
.card-value-2 .pip:nth-of-type(2) { left: 50%; top: 66% }

.card-value-3 .pip:nth-of-type(1) { left: 50%; top: 33% }
.card-value-3 .pip:nth-of-type(2) { left: 50%; top: 50% }
.card-value-3 .pip:nth-of-type(3) { left: 50%; top: 66% }

.card-value-4 .pip:nth-of-type(1) { left: 33%; top: 33% }
.card-value-4 .pip:nth-of-type(2) { left: 66%; top: 33% }
.card-value-4 .pip:nth-of-type(3) { left: 33%; top: 66% }
.card-value-4 .pip:nth-of-type(4) { left: 66%; top: 66% }

.card-value-5 .pip:nth-of-type(1) { left: 33%; top: 33% }
.card-value-5 .pip:nth-of-type(2) { left: 66%; top: 33% }
.card-value-5 .pip:nth-of-type(3) { left: 50%; top: 50% }
.card-value-5 .pip:nth-of-type(4) { left: 33%; top: 66% }
.card-value-5 .pip:nth-of-type(5) { left: 66%; top: 66% }

.card-value-6 .pip:nth-of-type(1) { left: 33%; top: 33% }
.card-value-6 .pip:nth-of-type(2) { left: 66%; top: 33% }
.card-value-6 .pip:nth-of-type(3) { left: 33%; top: 50% }
.card-value-6 .pip:nth-of-type(4) { left: 66%; top: 50% }
.card-value-6 .pip:nth-of-type(5) { left: 33%; top: 66% }
.card-value-6 .pip:nth-of-type(6) { left: 66%; top: 66% }

.card-value-7 .pip:nth-of-type(1) { left: 33%; top: 33% }
.card-value-7 .pip:nth-of-type(2) { left: 66%; top: 33% }
.card-value-7 .pip:nth-of-type(3) { left: 50%; top: 41% }
.card-value-7 .pip:nth-of-type(4) { left: 33%; top: 50% }
.card-value-7 .pip:nth-of-type(5) { left: 66%; top: 50% }
.card-value-7 .pip:nth-of-type(6) { left: 33%; top: 66% }
.card-value-7 .pip:nth-of-type(7) { left: 66%; top: 66% }

.card-value-8 .pip:nth-of-type(1) { left: 33%; top: 33% }
.card-value-8 .pip:nth-of-type(2) { left: 66%; top: 33% }
.card-value-8 .pip:nth-of-type(3) { left: 50%; top: 41% }
.card-value-8 .pip:nth-of-type(4) { left: 33%; top: 50% }
.card-value-8 .pip:nth-of-type(5) { left: 66%; top: 50% }
.card-value-8 .pip:nth-of-type(6) { left: 50%; top: 58% }
.card-value-8 .pip:nth-of-type(7) { left: 33%; top: 66% }
.card-value-8 .pip:nth-of-type(8) { left: 66%; top: 66% }

.card-value-9 .pip:nth-of-type(1) { left: 33%; top: 28% }
.card-value-9 .pip:nth-of-type(2) { left: 66%; top: 28% }
.card-value-9 .pip:nth-of-type(3) { left: 33%; top: 40% }
.card-value-9 .pip:nth-of-type(4) { left: 66%; top: 40% }
.card-value-9 .pip:nth-of-type(5) { left: 50%; top: 50% }
.card-value-9 .pip:nth-of-type(6) { left: 33%; top: 59% }
.card-value-9 .pip:nth-of-type(7) { left: 66%; top: 59% }
.card-value-9 .pip:nth-of-type(8) { left: 33%; top: 71% }
.card-value-9 .pip:nth-of-type(9) { left: 66%; top: 71% }

.card-value-10 .pip:nth-of-type(1)  { left: 33%; top: 28% }
.card-value-10 .pip:nth-of-type(2)  { left: 66%; top: 28% }
.card-value-10 .pip:nth-of-type(3)  { left: 50%; top: 38% }
.card-value-10 .pip:nth-of-type(4)  { left: 33%; top: 45% }
.card-value-10 .pip:nth-of-type(5)  { left: 66%; top: 45% }
.card-value-10 .pip:nth-of-type(6)  { left: 33%; top: 59% }
.card-value-10 .pip:nth-of-type(7)  { left: 66%; top: 59% }
.card-value-10 .pip:nth-of-type(8)  { left: 50%; top: 65% }
.card-value-10 .pip:nth-of-type(9)  { left: 33%; top: 71% }
.card-value-10 .pip:nth-of-type(10) { left: 66%; top: 71% }

/* ── Selection highlight ─────────────────────────────────────────────────── */

/* Lift the containing pile above neighbours; cards keep their natural DOM order within it */
.pile:has(.card--selected) { z-index: 5; }

/* Whole selected sequence lifts together; a lone selected card also scales */
.card--selected,
.card--in-seq { transform: translateY(-0.2rem); }

.card--selected {
    box-shadow: 0 0 0 0.15625rem #28a745, 0 0.4rem 0.75rem rgba(0,0,0,.35);
}

.card--selected:last-child { transform: translateY(-0.2rem) scale(1.04); }

.card--in-seq { box-shadow: 0 0 0 0.125rem rgba(40,167,69,.6); }

/* Staggered deal on new game — delay set inline per card */
.card--deal { animation: deal-in .28s ease backwards; }

/* Card in flight (FLIP animation) — above everything */
.card--flying {
    pointer-events: none;
    will-change: transform;
    z-index: 100;
}

/* ── Result panel visibility ─────────────────────────────────────────────── */
#result.visible { transform: none; }

/* ── Dialog ──────────────────────────────────────────────────────────────── */
.dlg-intro {
    color: #666;
    font-size: .88em;
    line-height: 1.55;
    margin-bottom: 1.25em;
    text-align: center;
}