/* Set Card SVG Styles */
.set-card {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6;
    background: white;
    cursor: pointer;
    min-height: 140px;
    width: 100%;
    border-radius: 8px;
}

/* Set Card Grid Layouts */
.set-game-board {
    display: grid;
    gap: 15px;
    padding: 20px;
    justify-content: center;
}

/* 3x3 grid for 9 cards */
.set-game-board.grid-3x3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 600px;
}

/* 3x4 grid for 12 cards */
.set-game-board.grid-3x4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 800px;
}

/* 4x5 grid for 15+ cards */
.set-game-board.grid-4x5 {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1000px;
}

/* 5x3 grid for 15 cards alternative */
.set-game-board.grid-5x3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 600px;
}e Card SVG Styles */
.set-card {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6;
    background: white;
    cursor: pointer;
    min-height: 140px;
    width: 100%;
    border-radius: 8px;
}

.set-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.set-card.selected {
    border-color: #007bff;
    background: #e3f2fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.set-card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px;
}

.set-shapes-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.set-shape {
    width: 60px;
    height: 30px;
}

/* Set Card SVG Shapes */
.set-oval {
    rx: 15;
    ry: 8;
}

/* Diamond and squiggle shapes use SVG paths generated in JS */

/* Set Card Colors */
.set-red {
    fill: #dc3545;
    stroke: #dc3545;
}

.set-green {
    fill: #28a745;
    stroke: #28a745;
}

.set-purple {
    fill: #6f42c1;
    stroke: #6f42c1;
}

/* Set Card Shadings */
.set-solid {
    fill-opacity: 1;
    stroke-width: 1;
}

.set-striped {
    fill: url(#stripedPattern);
    stroke-width: 2;
}

.set-outline {
    fill: none;
    stroke-width: 2;
}

/* ───────────────────────────────────────────────────────────────────────────
   Real SVG card art (static/media/set_style_svg_deck). The SVG already draws a
   white rounded card, so the wrapper is transparent and just sizes/selects.
   These rules are appended last so they win over the procedural-shape styles. */
.set-card {
    border: 0;
    background: transparent;
    min-height: 0;
    aspect-ratio: 240 / 340;
    padding: 0;
    border-radius: 12px;
    overflow: visible;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.set-card img,
.set-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;       /* clicks land on the .set-card wrapper */
    border-radius: 10px;
}
.set-card:hover {
    transform: translateY(-2px);
}
.set-card.selected {
    background: transparent;
    border: 0;
    transform: translateY(-4px) scale(1.04);
    outline: 4px solid #2563eb;
    outline-offset: 2px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.set-display-card-img {
    transition: transform 0.2s ease;
}

/* Valid-set feedback: the 3 winning cards blink green on every screen (player +
   host display) before they're removed and replenished. */
@keyframes setValidBlink {
    0%, 100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
    50%      { box-shadow: 0 0 26px 7px rgba(34,197,94,0.95); }
}
.set-card.set-valid,
.set-display-card.set-valid,
.set-display-card-img.set-valid {
    outline: 5px solid #22c55e !important;
    outline-offset: 2px;
    border-radius: 12px;
    animation: setValidBlink 0.32s ease-in-out 3;
}

/* Live "someone else is picking" preview: the claimer's in-progress card choices,
   shown on every OTHER player's board and the big display (amber, distinct from the
   blue "my own selection" outline) so the table can see the called set forming. */
.set-card.peer-selected,
.set-display-card.peer-selected,
.set-display-card-img.peer-selected {
    outline: 4px dashed #f59e0b !important;
    outline-offset: 2px;
    border-radius: 12px;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.55);
}

/* Rejected trio: blink the 3 cards red on every screen so it's clear it was NOT a set. */
@keyframes setInvalidBlink {
    0%, 100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
    50%      { box-shadow: 0 0 26px 7px rgba(239,68,68,0.95); }
}
.set-card.set-invalid,
.set-display-card.set-invalid,
.set-display-card-img.set-invalid {
    outline: 5px solid #ef4444 !important;
    outline-offset: 2px;
    border-radius: 12px;
    animation: setInvalidBlink 0.32s ease-in-out 3;
}

/* Fit the WHOLE Set board on a phone without scrolling, with the SET button always
   visible below it. The board is a fixed grid (cols × rows set from JS via --set-cols
   / --set-rows) bounded to a slice of the viewport HEIGHT, so the cards shrink to fit
   the available space instead of overflowing. Each card fills its cell and the SVG art
   inside keeps its aspect (object-fit: contain). Overrides the Bootstrap col-* wrappers
   SetCardRenderer emits. */
#setCards {
    display: grid !important;
    grid-template-columns: repeat(var(--set-cols, 4), 1fr);
    /* Rows divide a FIXED height so the board can never grow past its budget and push the
       SET button off-screen / into the cards (the old aspect-ratio cards were width-driven
       and ignored the height cap, so the bottom row overflowed). */
    grid-template-rows: repeat(var(--set-rows, 3), 1fr);
    gap: 6px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    height: min(58vh, 58dvh);   /* leaves room for header + SET/Submit/Clear + scoreboard */
}
#setCards > div {              /* the col-* wrapper from the renderer */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Each card fills its grid cell; the SVG art inside keeps its aspect (object-fit: contain).
   With 4 columns the cells are portrait — matching the card art — so the art is as big as
   the shape allows while every row stays within the bounded height. */
#setCards .set-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}
#setCards .set-card img,
#setCards .set-card-img,
#setCards .set-card svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Keep the SET / Submit / Clear buttons compact + tight to the board so they stay on screen. */
#setGameInterface .card-body > .text-center { margin-top: 6px !important; }
@media (max-width: 576px) {
    #setGameInterface .btn-lg { padding: 0.42rem 1.1rem; font-size: 1.05rem; }
}

/* ── Landscape on a phone ─────────────────────────────────────────────────
   In landscape the viewport HEIGHT is the short dimension (≤500px on most
   phones). 58vh ≈ 200px leaves cells far too short, and the original board
   used 4 columns × 3 rows — which made each cell ~135×65px, a far-from-card-
   shaped landscape stripe. The JS now picks 6 cols × 2 rows in landscape so
   the cells stay roughly card-shaped; this rule gives the board a bigger
   share of the viewport (it isn't competing with as much vertical chrome)
   and lets it grow to ~95vw so the bigger column count actually has room. */
@media (orientation: landscape) and (max-height: 500px) {
    #setCards {
        height: min(78dvh, 78vh);
        max-width: 95vw;
        gap: 4px;
    }
    /* Compact header + buttons so the board can use the height. */
    #setGameInterface .card-header { padding: 2px 6px !important; }
    #setGameInterface .card-header > div { font-size: 0.7rem !important; }
    #setGameInterface .card-body { padding: 4px !important; }
    #setGameInterface .card-body > .text-center { margin-top: 4px !important; }
    #setGameInterface .btn-lg {
        padding: 0.3rem 0.9rem;
        font-size: 0.95rem;
    }
    #setScoreboard { margin-top: 2px !important; font-size: 0.72rem; }
}