/* FreeCell Viewer - Card & Layout Styles
 * All classes prefixed with fcv- to avoid collisions with site CSS.
 * Self-contained — no external dependencies.
 */

/* Scoped box-sizing reset — the in-game CSS uses `* { box-sizing: border-box; }`
 * globally. Without this, getBoundingClientRect() values used for drag positioning
 * would include border+padding, causing cards to grow when explicit width/height is set. */
.fcv-board,
.fcv-board * {
    box-sizing: border-box;
}

/* ===== Board Layout ===== */

.fcv-board {
    --fcv-card-width: 9.75cqw;
    --fcv-card-height: 23.5cqh;
    --fcv-card-gap: 1.2cqw;
    --fcv-card-font-base: 1.9cqw;
    --fcv-danger: #e74c3c;

    container-type: size;
    background: #2d5a2d;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    user-select: none;
    overflow: hidden;
    position: relative;
}

/* ===== Toolbar ===== */

.fcv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1cqh 2cqw;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.fcv-toolbar-left {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
}

.fcv-toolbar-title {
    font-size: 1.8cqw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}

.fcv-toolbar-deal {
    font-size: 1.4cqw;
    color: rgba(255, 255, 255, 0.5);
}

.fcv-toolbar-right {
    display: flex;
    gap: 2cqw;
    align-items: center;
}

.fcv-stat {
    font-size: 1.5cqw;
    color: rgba(255, 255, 255, 0.7);
}

.fcv-stat-label {
    color: rgba(255, 255, 255, 0.5);
}

.fcv-stat-value {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ===== Section Labels ===== */

.fcv-section-label {
    font-size: 1.2cqw;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5cqh;
    padding-left: 0.3cqw;
}

/* ===== Top Area (Free Cells + Foundations) ===== */

.fcv-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5cqh 1.5cqw 0;
}

.fcv-freecells, .fcv-foundations {
    display: flex;
    flex-direction: column;
}

.fcv-slots {
    display: flex;
    gap: var(--fcv-card-gap, 1.2%);
}

.fcv-slot {
    width: var(--fcv-card-width, 100px);
    height: var(--fcv-card-height, 140px);
    aspect-ratio: 5 / 7;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
}

.fcv-slot.fcv-foundation {
    border-color: rgba(255, 215, 0, 0.5);
}

/* ===== Tableau ===== */

.fcv-tableau {
    display: flex;
    gap: var(--fcv-card-gap, 1.2%);
    flex: 1;
    min-height: 200px;
    padding: 2cqh 1.5cqw 1.5cqh;
}

.fcv-column {
    flex: 1;
    min-height: 140px;
    position: relative;
    border-radius: 8px;
    --fcv-overlap: calc(var(--fcv-card-height) * 0.22);
}

.fcv-column .fcv-card {
    position: absolute;
    left: 0;
}

/* ===== Card Styles ===== */

.fcv-card {
    width: var(--fcv-card-width, 100px);
    height: var(--fcv-card-height, 140px);
    aspect-ratio: 5 / 7;
    position: absolute;
    background: white;
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 28px;
    font-weight: bold;
    user-select: none;
    display: flex;
    flex-direction: column;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-align: left;
}

/* ===== Rank & Suit ===== */

.fcv-rank {
    font-size: calc(var(--fcv-card-font-base) * 1.0);
    line-height: 0.9;
    margin: 0;
    margin-left: 0.1em;
    margin-top: 0.1em;
    pointer-events: none;
}

.fcv-card.fcv-rank-10 .fcv-rank {
    letter-spacing: -0.15em;
    margin-left: 0.05em;
}

.fcv-card.fcv-rank-10 .fcv-corner-bottom {
    bottom: calc(var(--fcv-card-height) * 0.01);
    right: calc(var(--fcv-card-width) * 0.015);
}

.fcv-card.fcv-rank-10 .fcv-corner-bottom .fcv-rank {
    margin-left: 0.02em;
}

.fcv-suit {
    font-size: calc(var(--fcv-card-font-base) * 0.85);
    line-height: 0.9;
    margin-top: -0.1em;
    margin-left: 0.1em;
    pointer-events: none;
}

.fcv-corner-bottom {
    position: absolute;
    bottom: calc(var(--fcv-card-height) * 0.01);
    right: calc(var(--fcv-card-width) * 0.015);
    transform: rotate(180deg);
    font-size: calc(var(--fcv-card-font-base) * 0.4);
}

/* ===== Colors ===== */

.fcv-rank.red, .fcv-suit.red, .fcv-center-ace.red,
.fcv-symbol-top.red, .fcv-symbol-middle.red, .fcv-symbol-bottom.red,
.fcv-symbol-top-left.red, .fcv-symbol-top-right.red,
.fcv-symbol-bottom-left.red, .fcv-symbol-bottom-right.red,
.fcv-symbol-middle-left.red, .fcv-symbol-middle-right.red,
.fcv-symbol-top-middle.red,
.fcv-symbol-upper-left.red, .fcv-symbol-upper-right.red,
.fcv-symbol-lower-left.red, .fcv-symbol-lower-right.red,
.fcv-symbol-nine-center.red, .fcv-symbol-ten-center.red {
    color: var(--fcv-danger);
}

.fcv-rank.black, .fcv-suit.black, .fcv-center-ace.black,
.fcv-symbol-top.black, .fcv-symbol-middle.black, .fcv-symbol-bottom.black,
.fcv-symbol-top-left.black, .fcv-symbol-top-right.black,
.fcv-symbol-bottom-left.black, .fcv-symbol-bottom-right.black,
.fcv-symbol-middle-left.black, .fcv-symbol-middle-right.black,
.fcv-symbol-top-middle.black,
.fcv-symbol-upper-left.black, .fcv-symbol-upper-right.black,
.fcv-symbol-lower-left.black, .fcv-symbol-lower-right.black,
.fcv-symbol-nine-center.black, .fcv-symbol-ten-center.black {
    color: #2c3e50;
}

/* ===== Center Content ===== */

.fcv-card-center {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcv-center-ace {
    font-size: calc(var(--fcv-card-font-base) * 1.4);
    font-weight: bold;
    line-height: 1;
}

/* ===== Number Card Symbols ===== */

.fcv-number-symbols {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Common symbol styling */
.fcv-symbol-top, .fcv-symbol-middle, .fcv-symbol-bottom,
.fcv-symbol-top-left, .fcv-symbol-top-right,
.fcv-symbol-bottom-left, .fcv-symbol-bottom-right,
.fcv-symbol-middle-left, .fcv-symbol-middle-right,
.fcv-symbol-top-middle,
.fcv-symbol-upper-left, .fcv-symbol-upper-right,
.fcv-symbol-lower-left, .fcv-symbol-lower-right,
.fcv-symbol-nine-center, .fcv-symbol-ten-center {
    position: absolute;
    font-size: calc(var(--fcv-card-font-base) * 1.4);
    font-weight: bold;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.fcv-symbol-top { top: 20%; left: 50%; }
.fcv-symbol-middle { top: 47%; left: 50%; }
.fcv-symbol-bottom { top: 80%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); }

.fcv-symbol-top-left { top: 20%; left: 30%; }
.fcv-symbol-top-right { top: 20%; left: 70%; }
.fcv-symbol-bottom-left { top: 80%; left: 30%; transform: translate(-50%, -50%) rotate(180deg); }
.fcv-symbol-bottom-right { top: 80%; left: 70%; transform: translate(-50%, -50%) rotate(180deg); }

.fcv-symbol-middle-left { top: 47%; left: 30%; }
.fcv-symbol-middle-right { top: 47%; left: 70%; }

.fcv-symbol-top-middle { top: 32%; left: 50%; }

.fcv-symbol-upper-left { top: 37%; left: 30%; }
.fcv-symbol-upper-right { top: 37%; left: 70%; }
.fcv-symbol-lower-left { top: 63%; left: 30%; transform: translate(-50%, -50%) rotate(180deg); }
.fcv-symbol-lower-right { top: 63%; left: 70%; transform: translate(-50%, -50%) rotate(180deg); }

.fcv-symbol-nine-center { top: 28%; left: 50%; }
.fcv-symbol-ten-center { top: 72%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); }

/* ===== Face Cards ===== */

.fcv-face-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.fcv-face-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-user-drag: none;
}

/* ===== Replay Cursor ===== */
/* clip-path polygon — adjust any vertex to reshape the arrow.
   Coordinates are % of the element's width (14px) and height (20px). */

.fcv-cursor {
    position: absolute;
    width: 14px;
    height: 20px;
    background: #ff6b6b;
    clip-path: polygon(
        0% 0%,       /* tip */
        0% 75%,      /* left edge bottom */
        29% 55%,     /* inner elbow */
        46% 95%,     /* tail bottom-left */
        61% 88%,     /* tail bottom-right */
        43% 50%,     /* outer elbow */
        75% 50%      /* arrow head right */
    );
    pointer-events: none;
    z-index: 20000;
    opacity: 0;
}