.view-results-btn {
    background: #1B3D7A;
    color: #FFFFFF;
    border: none;
}

.view-summary-btn {
    background: linear-gradient(135deg, #1B3D7A 0%, #2563EB 100%);
    color: #FFFFFF !important;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(37,99,255,0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.view-summary-btn:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37,99,255,0.38);
}

.view-summary-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================================
   LESSON SUMMARY MODAL (YOUTUBE EMBED)
============================================================ */
.summary-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.summary-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.summary-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4);
    animation: popupSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.summary-modal-header {
    padding: 18px 22px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.summary-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2563EB;
    background: #EFF6FF;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 4px;
}

.summary-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #14213D;
    line-height: 1.25;
}

.summary-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    border: none;
    border-radius: 50%;
    color: #64748B;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.summary-modal-close:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.summary-modal-close svg {
    width: 18px;
    height: 18px;
}

.summary-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FFFFFF;
}

.summary-video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #0F172A;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}

.summary-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.summary-no-video {
    padding: 36px 20px;
    text-align: center;
    background: #F8FAFC;
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    color: #64748B;
}

.summary-no-video .no-video-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    stroke: #94A3B8;
}

.summary-no-video h3 {
    margin: 0 0 6px;
    color: #1E293B;
    font-size: 16px;
    font-weight: 800;
}

.summary-no-video p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
}

.summary-notes-wrap {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 14px;
}

.summary-notes-wrap h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: #1E293B;
}

.summary-notes-wrap p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

.summary-modal-footer {
    padding: 12px 22px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.summary-modal-ok-btn {
    padding: 10px 22px;
    border-radius: 999px;
    background: #2563EB;
    color: #FFFFFF;
    font-weight: 800;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(37,99,255,0.25);
    transition: background 0.15s, transform 0.15s;
}

.summary-modal-ok-btn:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}
/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Nunito", sans-serif;
    background: #F3F8FF;
    color: #14213D;
}


/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes popupFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupSlideUp  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@keyframes stackPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,255,0.5); }
    50%  { box-shadow: 0 0 0 12px rgba(37,99,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,255,0); }
}

@keyframes cardShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-6px); }
    80%     { transform: translateX(6px); }
}

@keyframes dealIn {
    from { opacity: 0; transform: translateY(24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

@keyframes progressGrow {
    from { width: 0%; }
}


/* ==========================================
   GAMEPLAY SIDEBAR
========================================== */

body {
    overflow: hidden;
}

/* Turn top bar into left sidebar */
.gameplay-top-bar {
    position: fixed;
    top: 0;
    left: 0;

    width: 230px;
    height: 100vh;
    min-height: 100vh;

    border-right: 1px solid #E8EEF6;
    border-bottom: none;

    background: #FFFFFF;

    z-index: 100;
}

.gameplay-top-inner {
    width: 100%;
    height: 100%;

    padding: 24px 18px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 24px;
}


/* LEVEL / DECK */

.gameplay-level-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;
}

.gameplay-level-text {
    width: 100%;
}

.level-label {
    font-size: 10px;
}

.level-title {
    margin-top: 4px;

    font-size: 15px;
    line-height: 1.3;
}


/* PROGRESS */

.gameplay-progress-container {
    width: 100%;
    min-width: 0;

    flex: none;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 8px;
}

.gameplay-progress-track {
    width: 100%;
}

.gameplay-progress-text {
    text-align: right;

    font-size: 11px;
}


/* SCORE / MOVES / CARDS / STARS */

.gameplay-stats-actions {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 18px;
}

.gameplay-stats {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
}

.stat-item {
    min-width: 0;

    padding: 12px 8px;

    border: 1px solid #EDF1F7;
    border-radius: 10px;

    background: #F8FAFC;

    text-align: center;
}

.stat-value {
    font-size: 18px;
}

.stat-label {
    margin-top: 3px;

    font-size: 8px;
}


/* SIDEBAR BUTTONS */

.gameplay-actions {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 9px;
}

.btn-action {
    width: 100%;
    min-height: 38px;
}


/* ==========================================
   MAIN GAME AREA BESIDE SIDEBAR
========================================== */

.gameplay-main {
    width: calc(100% - 230px);
    height: 100vh;
    min-height: 100vh;

    margin-left: 230px;

    overflow: hidden;
}

.gameplay-board {
    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;

    padding: 20px 28px;

    overflow: hidden;
}

/* ============================================================
   MOLECULE BG
============================================================ */

.game-molecule {
    position: absolute;
    z-index: 0;
    opacity: 0.18;
    pointer-events: none;
}
.game-molecule.top    { width: 300px; top: 0; left: -60px; }
.game-molecule.bottom { width: 320px; right: -55px; bottom: -40px; }
.game-molecule svg    { width: 100%; height: auto; }


/* ============================================================
   INFO BANNER
============================================================ */

.game-info-banner {
    width: 100%;
    min-height: 58px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
    border-radius: 14px;
    background: linear-gradient(90deg, #FFD261, #FFD66B);
    color: #14213D;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(250,190,45,0.13);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.info-icon-wrap {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.35);
}
.info-icon { width: 17px; height: 17px; }


/* ============================================================
   MIDDLE — MOVES BADGE & SHUFFLE PANELS
============================================================ */

.game-middle-actions {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.moves-badge {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100px; height: 76px;
    background: #F5A81C;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px 12px 0 0;
    color: white;
    box-shadow: 0 4px 16px rgba(245,168,28,0.35);
    flex-shrink: 0;
}

.moves-label {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
    color: rgba(255,255,255,0.8);
}

.moves-value {
    font-size: 32px; font-weight: 900;
    line-height: 1;
    letter-spacing: -0.6px;
    transition: transform 0.2s;
}

.moves-value.bump {
    animation: pointsBump 0.3s ease;
}

@keyframes pointsBump {
    0%,100% { transform: scale(1); }
    40%     { transform: scale(1.3); }
}

/* — Shuffle panels — */

.shuffle-panels {
    display: flex;
    gap: 18px;
}

.shuffle-panel-heading {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}

.shuffle-panel-heading .heading-accent {
    width: 3px;
}

.shuffle-panel-heading h3 {
    margin: 0;
    color: #1A3160;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.shuffle-panel-heading p {
    margin: 2px 0 0;
    color: #14213D;
    font-size: 8px;
    font-weight: 600;
}

/* Reveal pile — a real stack (top card playable, the rest sit
   face-down beneath it, populated by drawing from the shuffle deck
   on the right) rendered as: the top card shown full-size, and up
   to 2 of the cards just beneath it previewed as thin fanned-out
   strips to its right. */

.shuffle-reveal-pile {
    position: relative;
    width: 190px;
    height: 131px;
}

/* Every card here (including the hidden face-down ones stacked
   beneath the top card) shares this compact footprint, so a hidden
   card can never overflow the pile's bounds. */
#shuffleRevealPile .game-card {
    position: absolute;
    left: 0; top: 0;
    width: 105px; height: 145px;
    min-height: 145px; /* Overrides .game-card min-height: 160px */
}

#shuffleRevealPile .game-card.reveal-main-card {
    border: 2px solid #F5A81C;
    border-radius: 11px;
    background: #F5EDD7;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    font-size: 13px;
    font-weight: 900;
    color: #1A3160;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    gap: 0;
}

#shuffleRevealPile .game-card.reveal-main-card .card-crown {
    position: absolute;
    top: 8px; left: 10px;
    font-size: 12px;
    color: #F5A81C;
}

#shuffleRevealPile .game-card.reveal-main-card .card-name {
    font-size: 12px;
    padding: 0 2px;
}

#shuffleRevealPile .game-card.reveal-main-card .card-category-count {
    top: 8px; right: 10px;
    font-size: 10px;
    color: #8C8A84;
}

.reveal-peek-card {
    position: absolute;
    top: 0;
    width: 55px; height: 145px;
    border: 2px solid #F5A81C;
    border-left: none;
    border-radius: 0 11px 11px 0;
    background: #F5EDD7;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reveal-peek-card span {
    display: inline-block;
    transform: rotate(-90deg);
    font-size: 14px;
    font-weight: 900;
    color: #1A3160;
    white-space: nowrap;
}

/* Shuffle deck — the remaining logical deck, pattern back + count badge */

.shuffle-deck-pile {
    position: relative;
    width: 110px; height: 145px;
    background-color: #56BEF4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='0' cy='0' r='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4'/%3E%3Ccircle cx='32' cy='0' r='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4'/%3E%3Ccircle cx='0' cy='32' r='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4'/%3E%3Ccircle cx='32' cy='32' r='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4'/%3E%3Ccircle cx='16' cy='16' r='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4'/%3E%3C/svg%3E");
    background-size: 28px 28px;
    border: 2.85px solid #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.shuffle-deck-pile:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.18); }
.shuffle-deck-pile.deck-empty { cursor: default; opacity: 0.5; }

.shuffle-deck-count {
    position: absolute;
    top: -10px; right: -10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF;
    color: #2563FF;
    font-size: 14px; font-weight: 900;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/* ============================================================
   SECTION HEADINGS
============================================================ */

.figma-section-heading {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 30px;
}

.heading-accent {
    width: 5px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #F5B82E;
}

.heading-copy h2 {
    margin: 0;
    color: #14213D;
    font-size: 28px; line-height: 1;
    font-weight: 900; letter-spacing: -0.5px;
}

.heading-copy p {
    margin: 6px 0 0;
    color: #5F6F88;
    font-size: 13px; font-weight: 600;
}


/* ============================================================
   CATEGORY / FOUNDATION SECTION
============================================================ */

.category-section {
    max-width: 1040px;
    margin: 0 auto;
    padding-top: 6px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

#stacksGrid { display: contents; }
#lockedCategorySlots { display: contents; }


/* Foundation stack card */
.foundation-stack {
    position: relative;

    min-height: 155px;

    padding: 12px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;

    border: 2px solid #F1C345;
    border-radius: 14px;

    background: #FAF0D5;

    cursor: pointer;

    box-shadow:
        0 6px 14px rgba(20,33,61,0.07);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

/* Category name "tab" — a full-width gold header cap at the top of
   the card, not a small floating badge. */
.category-tab {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 7px 10px;
    border-radius: 13px 13px 0 0;
    background: #FBBF24;
    font-size: 12px;
    font-weight: 900;
    color: #1A3160;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
}

.foundation-stack:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(20,33,61,0.13);
    border-color: #F3B51D;
}

.foundation-stack.stack-drag-over {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,255,0.25), 0 14px 28px rgba(20,33,61,0.13);
    transform: translateY(-4px);
}

.foundation-stack.stack-pulse {
    animation: stackPulse 0.5s ease;
}

.foundation-stack.stack-hint {
    border-color: #16A34A;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.3);
}

/* Card top strip */
.category-card-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-crown { font-size: 17px; color: #F5A81C; }

/* Crown icon sizing — the SVG scales with each context's own
   font-size (1em) so every existing crown context keeps its size
   without individual overrides. */
.category-crown svg,
.card-crown svg,
.locked-category-card span svg {
    display: block;
    width: 1em;
    height: 0.75em;
}

.category-progress {
    font-size: 12px; font-weight: 700;
    color: #A09880;
}

.category-icon-circle {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    margin: 14px auto 10px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.foundation-stack:hover .category-icon-circle { transform: scale(1.08); }

.category-icon-circle svg { width: 20px; height: 20px; }

.stack-title {
    width: 100%;
    padding: 0 4px;
    text-align: center;
    font-size: 13px; font-weight: 800;
    color: #1A3160;
    line-height: 1.3;
}

@keyframes stackCompleteHide {
    0%   { transform: scale(1);    opacity: 1; }
    40%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(0.5);  opacity: 0; }
}

.foundation-stack.stack-complete-hide {
    animation: stackCompleteHide 0.7s ease forwards;
    pointer-events: none;
}

/* Locked slot — a category not yet unlocked. Also a drop/click
   target for the "category base card" that unlocks it. */
.locked-category-card {
    position: relative;
    min-height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #D7DEE8;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #F2F4F7,
            #E8ECF1
        );
    box-shadow:
        inset 0 4px 9px rgba(20,33,61,0.05),
        0 5px 12px rgba(20,33,61,0.06);
}

.locked-category-card span {
    color: #CBD5E1;
    font-size: 48px;
    transition: color 0.18s ease;
}

.locked-category-card.stack-drag-over {
    border-color: #2563EB;
    background: #EFF5FF;
    transform: translateY(-4px);
}

.locked-category-card.stack-drag-over span {
    color: #2563EB;
}

/* Category base card — a special playable card that unlocks a
   hidden category when placed on an empty slot. Tinted blue so it
   reads as distinct from the regular cream game cards. */
.game-card.category-base-card {
    background: linear-gradient(180deg, #EFF5FF 0%, #DCE8FF 100%);
    border-color: #2563EB;
}

.game-card.category-base-card .card-crown {
    color: #2563EB;
}

.game-card.category-base-card .card-name {
    color: #1D4ED8;
    font-size: 15px;
}

.card-category-count {
    position: absolute;
    top: 12px; right: 14px;
    font-size: 11px;
    font-weight: 800;
    color: #2563EB;
}


/* ============================================================
   DIVIDER
============================================================ */

.game-section-divider {
    width: 88%;
    height: 1px;
    margin: 52px auto 44px;
    background: #DCE8F5;
}


/* ============================================================
   GAME CARDS (HAND)
============================================================ */

.game-cards-section {
    max-width: 1040px;
    margin: 0 auto;
    padding-top: 6px;
}

/* 
   The hand is a scrollable wrapping grid of cards.
   4 columns max; scrolls horizontally on narrow screens.
*/

/* ============================================================
   CARDS GRID — piles + stock/shuffle
============================================================ */

#cardsGrid {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
}

/* Each of the 4 playable piles */
.card-pile {
    position: relative;
    /* portrait: narrower width, tall enough for offset stack */
    width: 118px;
    flex-shrink: 0;
    /* height grows with stack offset; at least 2 visible card heights */
    min-height: 205px;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
    border-radius: 16px;
    transition: box-shadow 0.18s ease;
}

/* Skeleton placeholder when a card pile is empty */
.card-pile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.55));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none'%3E%3Cpath d='M2 6.2L6.6 9.3L12 2L17.4 9.3L22 6.2L19.6 15.4H4.4L2 6.2Z' fill='%2394A3B8' fill-opacity='0.35'/%3E%3Crect x='4' y='15.4' width='16' height='2' rx='1' fill='%2394A3B8' fill-opacity='0.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 24px;
    box-shadow: inset 0 2px 6px rgba(20, 33, 61, 0.04);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.card-pile.pile-empty::before {
    opacity: 1;
}

.card-pile.pile-empty {
    cursor: pointer;
}

.card-pile.pile-empty:hover::before {
    border-color: #93C5FD;
    background-color: rgba(239, 246, 255, 0.65);
}

.card-pile.stack-drag-over {
    box-shadow: 0 0 0 3px rgba(37,99,255,0.35);
}

.card-pile.stack-drag-over::before {
    opacity: 1 !important;
    border-color: #2563EB !important;
    border-style: solid !important;
    background-color: #EFF6FF !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.2) !important;
}

/* The stock/shuffle pile column */
.stock-pile {
    position: relative;
    width: 148px;
    flex-shrink: 0;
    min-height: 264px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.stock-pile-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748B;
    margin-bottom: 6px;
}

/* The generic game card — portrait rectangle */
.game-card {
    position: absolute;
    width: 100%;

    /* Portrait aspect: ~160 × 220 px */
    height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 22px 14px 16px;

    /* Neutral cream — NO category colour here */
    border: 2px solid #F5A81C;
    border-radius: 16px;
    background: #F5EDD7;
    color: #1A3160;

    font-family: "Nunito", sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 1.3;

    cursor: pointer;
    user-select: none;

    box-shadow: 0 3px 3px rgba(0,0,0,0.1);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        top 0.25s ease;
}

.game-card:not(.card-face-down):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(20,33,61,0.22);
}

.game-card.card-selected {
    border-color: #2563EB;
    box-shadow:
        0 0 0 4px rgba(37,99,255,0.28),
        0 10px 22px rgba(20,33,61,0.18);
    transform: translateY(-5px);
}

.game-card.card-shake {
    animation: cardShake 0.55s ease;
}

.game-card.card-hint {
    border-color: #16A34A;
    box-shadow:
        0 0 0 4px rgba(22,163,74,0.3),
        0 10px 22px rgba(20,33,61,0.18);
}

/* Face-down card — flat blue back, matching the shuffle deck */
.card-face-down {
    background: #56BEF4 !important;
    border: 2px solid #FFFFFF !important;
    cursor: default !important;
    pointer-events: none;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1) !important;
}
.card-face-down * { display: none !important; }

/* Crown icon top-left */
.card-crown {
    position: absolute;
    top: 12px; left: 15px;
    font-size: 16px;
    color: #F5A81C;
    line-height: 1;
}

/* Card text */
.card-name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
    color: #1A3160;
    padding: 0 4px;
}

/* NO category tag on the card — remove hint */
.card-category-tag { display: none !important; }


/* ============================================================
   BOTTOM CONTROLS
============================================================ */

.game-bottom-actions {
    margin-top: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.bottom-game-btn {
    min-width: 160px;
    height: 54px;
    display: flex; align-items: center; justify-content: center;
    gap: 9px;
    border: 0; border-radius: 999px;
    font-family: "Nunito", sans-serif;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(20,33,61,0.14);
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.bottom-game-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20,33,61,0.18); }

.restart-btn   { background: #1B3D7A; color: #FFF; box-shadow: 0 4px 18px rgba(27,61,122,0.38); }
.next-level-btn { background: #DDE5F1; color: #94A3B8; box-shadow: none; }
.next-level-btn:not([disabled]) {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: white;
    box-shadow: 0 4px 18px rgba(42,98,190,0.38);
}
.next-level-btn[disabled]       { cursor: not-allowed; }
.bottom-game-btn svg { width: 19px; height: 19px; }
#finishLevelBtn { display: none; }

/* ============================================================
   FINAL RESPONSIVE GAMEPLAY LAYOUT
   Desktop + Mobile — NO PAGE SCROLL
============================================================ */








/* ============================================================
   DESKTOP / TABLET LANDSCAPE
============================================================ */
/* ============================================================
   DESKTOP GAMEPLAY — FIXED ONE-SCREEN VIEW
============================================================ */
/* ============================================================
   DESKTOP GAMEPLAY — FIXED ONE-SCREEN VIEW
============================================================ */

@media (min-width: 769px) {

    :root {
        --desktop-card-width: 96px;
        --desktop-card-height: 116px;
        --desktop-card-radius: 5px;
    }


    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden !important;
    }


    /* =========================
       SIDEBAR
    ========================= */

    .gameplay-top-bar {
        width: 180px;
        height: 100vh;
        min-height: 100vh;
    }

    .gameplay-top-inner {
        height: 100%;

        padding: 16px 12px;

        gap: 14px;

        overflow: hidden;
    }

    .level-title {
        font-size: 13px;
    }

    .gameplay-stats {
        gap: 6px;
    }

    .stat-item {
        padding: 9px 5px;
    }

    .stat-value {
        font-size: 16px;
    }

    .gameplay-actions {
        gap: 7px;
    }

    .btn-action {
        min-height: 34px;
    }


    /* =========================
       MAIN SCREEN
    ========================= */

    .gameplay-main {
        position: fixed;

        top: 0;
        left: 180px;

        width: calc(100% - 180px);
        height: 100vh;
        min-height: 0;

        margin: 0;

        overflow: hidden;
    }

    .gameplay-board {
    width: 100%;
    height: 100%;

    max-width: none;

    padding: 10px 18px 12px;

    display: grid;

    grid-template-rows:
        auto
        120px
        116px
        1px
        auto;

    gap: 7px;

    align-content: start;

    overflow: hidden;
}


    /* =========================
       INFO BANNER
    ========================= */

    .game-info-banner {
        min-height: 38px;

        margin: 0;

        padding: 7px 12px;

        border-radius: 8px;

        font-size: 11px;
    }

    .info-icon-wrap {
        width: 26px;
        height: 26px;
    }

    .info-icon {
        width: 14px;
        height: 14px;
    }


    /* =========================
       REMOVE LARGE MOVES BLOCK
    ========================= */

    .moves-badge {
        display: none !important;
    }


    /* =========================
       SHUFFLE AREA
       SAME CARD SIZE
    ========================= */

    .game-middle-actions {
        width: 100%;
        max-width: none;
        height: 120px;

        margin: 0;

        display: flex;
        align-items: flex-start;
        justify-content: flex-end;

        overflow: visible;
    }

    .shuffle-panels {
        height: 120px;

        display: flex;
        align-items: flex-start;

        gap: 10px;
    }

    .shuffle-reveal-pile {
        position: relative;

        width: 205px;
        height: var(--desktop-card-height);

        overflow: visible;
    }

    #shuffleRevealPile .game-card {
        width: var(--desktop-card-width) !important;
        min-width: var(--desktop-card-width) !important;
        max-width: var(--desktop-card-width) !important;

        height: var(--desktop-card-height) !important;
        min-height: var(--desktop-card-height) !important;

        padding: 12px 6px 8px;

        border-radius: var(--desktop-card-radius) !important;
    }

    #shuffleRevealPile .game-card.reveal-main-card {
        border-radius: var(--desktop-card-radius) !important;
    }

    #shuffleRevealPile .game-card.reveal-main-card .card-name {
        font-size: 11px;
        line-height: 1.1;
    }

    #shuffleRevealPile .game-card.reveal-main-card .card-crown {
        top: 6px;
        left: 7px;

        font-size: 10px;
    }

    .reveal-peek-card {
        width: 34px;
        height: var(--desktop-card-height);

        border-radius:
            0 var(--desktop-card-radius)
            var(--desktop-card-radius) 0;
    }

    .reveal-peek-card span {
        font-size: 9px;
    }

    .shuffle-deck-pile {
        width: var(--desktop-card-width);
        height: var(--desktop-card-height);

        border-radius: var(--desktop-card-radius);

        background-size: 19px 19px;
    }

    .shuffle-deck-count {
        width: 24px;
        height: 24px;

        top: -6px;
        right: -6px;

        font-size: 10px;
    }


    /* =========================
       CATEGORY CARDS
       SAME EXACT SIZE
    ========================= */

    .category-section {
        width: 100%;
        max-width: none;

        height: var(--desktop-card-height);

        margin: 0 auto;
        padding: 0;
    }

    .category-grid {
        width: 100%;
        height: var(--desktop-card-height);

        display: flex;
        align-items: flex-start;
        justify-content: center;

        gap: 12px;
    }

    #stacksGrid,
    #lockedCategorySlots {
        display: contents;
    }

    .foundation-stack,
    .locked-category-card {
        width: var(--desktop-card-width) !important;
        min-width: var(--desktop-card-width) !important;
        max-width: var(--desktop-card-width) !important;

        height: var(--desktop-card-height) !important;
        min-height: var(--desktop-card-height) !important;

        flex: 0 0 var(--desktop-card-width);

        border-radius: var(--desktop-card-radius) !important;
    }

    .foundation-stack {
        padding: 24px 6px 6px;
    }

    .category-tab {
        padding: 4px 3px;

        border-radius:
            var(--desktop-card-radius)
            var(--desktop-card-radius)
            0 0 !important;

        font-size: 8px;
    }

    .category-crown {
        font-size: 11px;
    }

    .category-progress {
        font-size: 8px;
    }

    .category-icon-circle {
        width: 28px;
        height: 28px;

        margin: 4px auto 3px;
    }

    .category-icon-circle svg {
        width: 14px;
        height: 14px;
    }

    .stack-title {
        width: 100%;

        padding: 0 2px;

        font-size: 9px;
        line-height: 1.1;
    }

    .locked-category-card span {
        font-size: 28px;
    }


    /* =========================
       DIVIDER
    ========================= */

    .game-section-divider {
        width: 90%;
        height: 1px;

        margin: 0 auto;
    }


    /* =========================
       GAME CARDS
       SAME EXACT SIZE
    ========================= */
    .game-cards-section {
    width: 100%;
    max-width: 760px;
    height: 185px;
    min-height: 185px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

    #cardsGrid {
        width: 100%;

        height: 140px;
        min-height: 140px;

        flex: 0 0 140px;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        gap: 12px;

        overflow: visible;
    }

    .card-pile {
        width: var(--desktop-card-width) !important;
        min-width: var(--desktop-card-width) !important;
        max-width: var(--desktop-card-width) !important;

        height: 140px;
        min-height: 140px;

        flex: 0 0 var(--desktop-card-width);
    }

    .card-pile::before {
        height: var(--desktop-card-height) !important;
        border-radius: var(--desktop-card-radius) !important;
        background-size: 26px 20px;
    }

    .game-card {
        width: var(--desktop-card-width) !important;
        min-width: var(--desktop-card-width) !important;
        max-width: var(--desktop-card-width) !important;

        height: var(--desktop-card-height) !important;
        min-height: var(--desktop-card-height) !important;

        padding: 14px 6px 8px;

        gap: 4px;

        border-radius: var(--desktop-card-radius) !important;

        font-size: 11px;
        line-height: 1.1;
    }

    .card-name {
        width: 100%;

        padding: 0 2px;

        font-size: 11px;
        line-height: 1.1;

        word-break: normal;
        overflow-wrap: break-word;
    }

    .card-crown {
        top: 6px;
        left: 7px;

        font-size: 10px;
    }


    /* =========================
       LESS OBVIOUS ROUNDING
    ========================= */

    .foundation-stack,
    .locked-category-card,
    .game-card,
    .shuffle-deck-pile,
    #shuffleRevealPile .game-card {
        border-radius: var(--desktop-card-radius) !important;
    }


    /* =========================
       RESTART / NEXT LEVEL
    ========================= */
    .game-bottom-actions {
    position: fixed;

    left: 180px;
    bottom: 14px;

    width: calc(100% - 180px);

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    z-index: 200;
}

.game-cards-section {
    overflow: visible !important;
}

.gameplay-main {
    padding-bottom: 55px;
}

    .bottom-game-btn {
        min-width: 125px;
        height: 36px;

        font-size: 10px;
    }

    .bottom-game-btn svg {
        width: 14px;
        height: 14px;
    }

}