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

:root {
    --gap:  0.125rem;
    --cw:   clamp(1.75rem, (min(100vw, 56.25rem) - 2rem - var(--gap) * 9) / 10, 5rem);
    --ch:   calc(var(--cw) * 1.4);
    --step: calc(var(--ch) * 0.22);
    --cc:   max(0.34rem, calc(var(--cw) * 0.165));
    --pip:  0.45rem;
    --let:  max(0.75rem, calc(var(--cw) * 0.38));
}

@media (max-width: 480px) {
    :root { --pip: 0.375rem; }
}

#board-wrap { align-items: flex-start; }

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

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

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

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

.col-pile:empty {
    background: rgba(59,136,195,.07);
    border: 0.09375rem dashed rgba(130,180,225,.5);
}

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

.stock-pile {
    background:
        repeating-linear-gradient(45deg,  rgba(255,255,255,.13) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 18px),
        linear-gradient(160deg, #3b88c3 0%, #3272a3 100%);
    border: 0.0625rem solid rgba(255,255,255,.4);
    cursor: pointer;
}

.stock-pile::after {
    background: rgba(0,0,0,.4);
    border-radius: 0.2rem;
    bottom: 6%;
    color: #fff;
    content: attr(data-count);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1em 0.3em;
    position: absolute;
    right: 6%;
}

.stock-pile[data-count=""] {
    background: rgba(255,255,255,.07);
    border: 0.09375rem dashed rgba(130,180,225,.4);
    cursor: default;
}

.stock-pile[data-count=""]::after { display: none; }

.pile--drop {
    box-shadow: inset 0 0 0 0.125rem #28a745;
    border-radius: 0.25rem;
}

.card {
    background:
        repeating-linear-gradient(45deg,  rgba(255,255,255,.13) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 18px),
        linear-gradient(160deg, #3b88c3 0%, #3272a3 100%);
    border: 0.0625rem solid rgba(255,255,255,.4);
    border-radius: 0.1875rem;
    box-sizing: border-box;
    cursor: default;
    height: var(--ch);
    overflow: hidden;
    position: absolute;
    touch-action: manipulation;
    user-select: none;
    width: var(--cw);
}

.card.card-up {
    background: #fdfdfe;
    border: 0.0625rem solid #c0c0c0;
    border-bottom-color: #aaa;
    cursor: pointer;
}

.card > .card-face {
    color: #111;
    display: none;
    height: 100%;
    position: relative;
    user-select: none;
    width: 100%;
}

.card.card-up > .card-face { display: block; }

.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%);
}

.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% }

.pile:has(.card--selected) { z-index: 5; }
.card--selected { box-shadow: 0 0 0 0.15625rem #28a745; }
.card--in-seq   { box-shadow: 0 0 0 0.125rem rgba(40,167,69,.6); }
.card--flying   { pointer-events: none; will-change: transform; z-index: 100; }

#result.visible { transform: none; }

/* Sweeping pulse across a completed K→A run, staggered per card via inline delay */
@keyframes seq-pulse {
    0%   { transform: scale(1); }
    45%  { box-shadow: 0 0 0 0.1875rem var(--color-win), 0 0.25rem 0.875rem rgba(40,167,69,.55);
           transform: scale(1.08); }
    100% { transform: scale(1); }
}

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