:root {
    --primary: #7c3aed;
    --secondary: #ec4899;
    --soft: #f7f2ff;
    --dark: #201138;
}

body {
    background: linear-gradient(180deg, #fff7fd 0%, #f3f0ff 100%);
    min-height: 100vh;
    color: var(--dark);
}

.app-navbar {
    background: linear-gradient(90deg, #7c3aed, #ec4899);
    box-shadow: 0 8px 24px rgba(124, 58, 237, .25);
}

.hero-card, .game-card {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(57, 24, 98, .12);
    overflow: hidden;
}

.hero-gradient {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: white;
}

.big-button {
    border-radius: 18px;
    padding: 14px 18px;
    font-weight: 800;
    font-size: 1.05rem;
}

.mission-card {
    border-radius: 22px;
    border: 0;
    min-height: 190px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.mission-card:hover, .tap-card:active {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(57, 24, 98, .16);
}

.reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
    margin: 4px;
    font-weight: 700;
}

.option-btn {
    width: 100%;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 800;
}

.progress {
    height: 16px;
    border-radius: 999px;
}

.build-part {
    border-radius: 18px;
    background: white;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

.locked {
    opacity: .55;
    filter: grayscale(.3);
}

.child-title {
    font-size: clamp(1.8rem, 8vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
}

.small-safe-text {
    font-size: .9rem;
    color: #6b5d7d;
}

@media (max-width: 576px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .card-body { padding: 18px; }
    .big-button { width: 100%; }
}


.team-message {
    background: #ffffff;
    border-radius: 14px;
    padding: 9px 12px;
    margin-bottom: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.message-box {
    max-height: 210px;
    overflow-y: auto;
    background: rgba(255,255,255,.55);
    border-radius: 18px;
    padding: 10px;
}

.preset-chip {
    border-radius: 999px;
    margin: 4px;
    font-weight: 700;
}


.creation-stage {
    min-height: 210px;
    border-radius: 26px;
    background: radial-gradient(circle at top, rgba(255,255,255,.95), rgba(255,255,255,.55));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(124,58,237,.12);
}

.creation-emoji {
    font-size: clamp(4rem, 18vw, 8rem);
    animation: floaty 2.7s ease-in-out infinite;
}

.sparkle-dot {
    position: absolute;
    animation: twinkle 1.8s ease-in-out infinite;
    opacity: .85;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-9px) scale(1.03); }
}

@keyframes twinkle {
    0%, 100% { transform: scale(.7); opacity: .35; }
    50% { transform: scale(1.25); opacity: 1; }
}

.hint-box {
    background: #fff7d6;
    border: 2px dashed #f59e0b;
    border-radius: 18px;
    padding: 12px;
    margin-top: 12px;
}

.streak-card {
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .16);
}

.player-score-row {
    border-radius: 14px;
    background: white;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.install-banner {
    display: none;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(57,24,98,.14);
    padding: 14px;
    margin-bottom: 16px;
}


.journey-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.journey-step {
    background: #f8fafc;
    border-radius: 18px;
    padding: 12px;
    text-align: center;
    min-height: 110px;
}

.journey-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e9d5ff;
    color: #581c87;
    font-weight: 900;
    margin-bottom: 8px;
}

.journey-step.active {
    background: linear-gradient(135deg, #f3e8ff, #fce7f3);
    box-shadow: 0 8px 24px rgba(124,58,237,.12);
}

.journey-step strong,
.journey-step small {
    display: block;
}

.journey-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 12px;
    background: white;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.journey-card.unlocked {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0;
}

.journey-card.pending {
    opacity: .8;
}

.journey-number {
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-visual-card {
    min-height: 150px;
    border-radius: 24px;
    background: white;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    gap: 14px;
}

.build-visual-card.unlocked {
    background: linear-gradient(135deg, #fff, #ecfdf5);
    border: 2px solid #86efac;
}

.build-visual-card.locked {
    opacity: .55;
    filter: grayscale(.35);
}

.build-visual-icon {
    font-size: 2.8rem;
}

@media (max-width: 576px) {
    .journey-line {
        grid-template-columns: 1fr 1fr;
    }
}


.player-manage-row {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.admin-stat-card {
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    height: 100%;
}


.true-false-btn {
    min-height: 90px;
    border-radius: 22px;
    font-size: 1.25rem;
    font-weight: 900;
}

.image-choice-card {
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    padding: 18px 10px;
    min-height: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.image-choice-card:active,
.image-choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(124,58,237,.18);
}

.image-choice-icon {
    display: block;
    font-size: 3.2rem;
    margin-bottom: 8px;
}

.typing-answer-box input {
    border-radius: 18px;
    padding: 16px;
    font-weight: 700;
}


.puzzle-board-wrap {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    align-items: start;
}

.puzzle-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.puzzle-slot {
    min-height: 140px;
    border: 3px dashed #c4b5fd;
    border-radius: 24px;
    background: linear-gradient(135deg, #faf5ff, #fdf2f8);
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.puzzle-slot.over {
    border-color: #7c3aed;
    transform: scale(1.01);
}

.puzzle-slot-label {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: .8rem;
    font-weight: 700;
    color: #6b21a8;
    opacity: .8;
}

.puzzle-pieces {
    background: rgba(255,255,255,.7);
    border-radius: 24px;
    padding: 12px;
    min-height: 240px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.puzzle-piece {
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 14px;
    cursor: grab;
    user-select: none;
    text-align: center;
}

.puzzle-piece.selected {
    outline: 3px solid #7c3aed;
}

.puzzle-piece-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .puzzle-board-wrap {
        grid-template-columns: 1fr;
    }
    .puzzle-slot {
        min-height: 120px;
    }
}




































@media (max-width: 991px) {
    
}

@media (max-width: 767px) {
    

    

    
}


.puzzle-top-note {
    background: #fff7ed;
    color: #9a3412;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 14px;
    font-weight: 600;
}

.reference-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.puzzle-reference-wrap {
    background: #ffffff;
    border-radius: 22px;
    padding: 12px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    display: inline-block;
}

.puzzle-reference-image {
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
    display: block;
    border: 1px solid #e5e7eb;
}

.true-jigsaw-stage {
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: 18px;
    align-items: start;
}

.true-jigsaw-board-shell,
.true-jigsaw-tray-shell {
    background: #ffffff;
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.board-title {
    font-weight: 800;
    margin-bottom: 10px;
    color: #4c1d95;
}

.true-jigsaw-board {
    display: grid;
    gap: 2px;
    background-image: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)), var(--puzzle-image);
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    padding: 10px;
    min-height: 330px;
    aspect-ratio: 1 / 1;
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.08);
}

.true-jigsaw-slot {
    position: relative;
    border-radius: 16px;
    background: rgba(255,255,255,.20);
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.18);
    overflow: visible;
    aspect-ratio: 1 / 1;
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.true-jigsaw-slot.over {
    transform: scale(1.015);
    box-shadow: inset 0 0 0 2px rgba(124,58,237,.45);
}

.true-jigsaw-slot-number {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    color: #6b21a8;
}

.true-jigsaw-tray {
    min-height: 330px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    align-content: start;
}

.true-jigsaw-piece {
    width: 82px;
    height: 82px;
    cursor: grab;
    position: relative;
    transition: transform .18s ease, filter .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    user-select: none;
}

.true-jigsaw-piece:hover {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.12));
}

.true-jigsaw-piece.selected {
    transform: scale(1.08);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 3px rgba(124,58,237,.22));
}

.true-jigsaw-piece.in-board {
    width: 118%;
    height: 118%;
    z-index: 5;
}

.jigsaw-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.10));
}

.piece-mini-label {
    display: none;
}

@media (max-width: 991px) {
    .true-jigsaw-stage {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .true-jigsaw-board {
        min-height: 260px;
    }

    .true-jigsaw-tray {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        min-height: auto;
    }

    .true-jigsaw-piece {
        width: 74px;
        height: 74px;
    }

    .puzzle-reference-image {
        max-width: 100%;
    }
}


/* v1.9.1 Puzzle stability and clean board fix */
.true-jigsaw-board {
    gap: 0 !important;
    padding: 8px !important;
    background: #ffffff !important;
    border-radius: 22px;
    overflow: visible;
    align-items: stretch;
}

.true-jigsaw-slot {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
    min-width: 0;
    min-height: 0;
}

.true-jigsaw-slot.over {
    box-shadow: inset 0 0 0 2px rgba(124,58,237,.22) !important;
    background: rgba(124,58,237,.04) !important;
    transform: none !important;
}

.true-jigsaw-slot-number {
    display: none !important;
}

.true-jigsaw-piece.in-board {
    position: absolute !important;
    width: 122% !important;
    height: 122% !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
    margin: 0 !important;
    pointer-events: auto;
}

.true-jigsaw-piece.in-board:hover {
    transform: translate(-50%, -50%) scale(1.015) !important;
}

.true-jigsaw-piece.in-board.selected {
    transform: translate(-50%, -50%) scale(1.025) !important;
}

.true-jigsaw-tray .true-jigsaw-piece {
    position: relative !important;
    width: 78px;
    height: 78px;
}

.true-jigsaw-tray {
    align-content: start !important;
}

.true-jigsaw-board-shell {
    overflow: visible;
}

.jigsaw-svg {
    overflow: visible !important;
}

@media (max-width: 767px) {
    .true-jigsaw-piece.in-board {
        width: 123% !important;
        height: 123% !important;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: 70px;
        height: 70px;
    }
}


/* v1.10 puzzle upload + variable board sizing */
.true-jigsaw-board {
    aspect-ratio: var(--board-aspect, 1 / 1) !important;
}

.true-jigsaw-piece.in-board {
    width: calc(var(--board-piece-scale, 1.18) * 100%) !important;
    height: calc(var(--board-piece-scale, 1.18) * 100%) !important;
}

.true-jigsaw-tray .true-jigsaw-piece {
    width: var(--tray-piece-size, 78px) !important;
    height: var(--tray-piece-size, 78px) !important;
}

@media (max-width: 767px) {
    .true-jigsaw-piece.in-board {
        width: calc(var(--board-piece-scale, 1.18) * 100%) !important;
        height: calc(var(--board-piece-scale, 1.18) * 100%) !important;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: calc(var(--tray-piece-size, 78px) - 6px) !important;
        height: calc(var(--tray-piece-size, 78px) - 6px) !important;
    }
}


/* v1.11 collaborative jigsaw */
.collab-turn-card {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 18px rgba(245,158,11,.12);
}

.collab-turn-card.my-turn {
    background: linear-gradient(135deg, #ecfdf5, #dcfce7);
    box-shadow: 0 8px 24px rgba(34,197,94,.14);
}

.collab-player-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.collab-player-pill {
    background: #ffffff;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    border: 2px solid transparent;
}

.collab-player-pill.active-turn {
    border-color: #22c55e;
    background: #ecfdf5;
}

.true-jigsaw-piece[data-state="board"] {
    cursor: grab;
}

@media (max-width: 576px) {
    .collab-turn-card {
        align-items: stretch;
        flex-direction: column;
    }

    .collab-turn-card .btn {
        width: 100%;
    }
}


/* v1.12 complex puzzle support */
.true-jigsaw-board {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.true-jigsaw-tray {
    grid-template-columns: repeat(var(--tray-columns, 3), minmax(0, 1fr)) !important;
}

.true-jigsaw-tray .true-jigsaw-piece {
    width: var(--tray-piece-size, 78px) !important;
    height: var(--tray-piece-size, 78px) !important;
}

.true-jigsaw-piece.in-board {
    width: calc(var(--board-piece-scale, 1.12) * 100%) !important;
    height: calc(var(--board-piece-scale, 1.12) * 100%) !important;
}

@media (max-width: 767px) {
    .true-jigsaw-tray {
        grid-template-columns: repeat(min(var(--tray-columns, 3), 4), minmax(0, 1fr)) !important;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: max(44px, calc(var(--tray-piece-size, 78px) - 8px)) !important;
        height: max(44px, calc(var(--tray-piece-size, 78px) - 8px)) !important;
    }
}


/* v1.13 family challenge puzzles up to 200 pieces */
.true-jigsaw-board {
    max-width: var(--board-max-width, 760px) !important;
    width: 100%;
}

.true-jigsaw-board-shell {
    overflow-x: auto;
}

.true-jigsaw-tray {
    grid-template-columns: repeat(var(--tray-columns, 6), minmax(0, 1fr)) !important;
    max-height: 680px;
    overflow-y: auto;
}

.true-jigsaw-tray .true-jigsaw-piece {
    width: var(--tray-piece-size, 52px) !important;
    height: var(--tray-piece-size, 52px) !important;
}

@media (max-width: 767px) {
    .true-jigsaw-tray {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        max-height: 420px;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: max(32px, calc(var(--tray-piece-size, 52px) - 6px)) !important;
        height: max(32px, calc(var(--tray-piece-size, 52px) - 6px)) !important;
    }
}


/* v1.14 solo/multiplayer mode and Game Master turn control */
.solo-puzzle-card {
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(59,130,246,.12);
}

.game-master-control {
    background: #ffffff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    border: 2px solid #fde68a;
}


/* v1.14.1 seamless jigsaw joining fix */
.true-jigsaw-board {
    gap: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.true-jigsaw-board-shell {
    overflow: visible !important;
}

.true-jigsaw-slot {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

.true-jigsaw-slot.over {
    background: rgba(124,58,237,.045) !important;
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.18) !important;
    transform: none !important;
}

.true-jigsaw-slot-number {
    display: none !important;
}

/*
The SVG jigsaw shape uses a 120x120 viewBox with the normal square area
from 10 to 110. Placing the piece at -10% with 120% size aligns that
normal square exactly to the slot, so adjacent pieces touch seamlessly.
*/
.true-jigsaw-piece.in-board {
    position: absolute !important;
    width: 120% !important;
    height: 120% !important;
    left: -10% !important;
    top: -10% !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5;
}

.true-jigsaw-piece.in-board:hover,
.true-jigsaw-piece.in-board.selected {
    transform: none !important;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.10));
}

.true-jigsaw-piece.in-board .jigsaw-svg {
    filter: none !important;
}

/* Keep tray pieces outlined, but make board pieces visually join. */
.true-jigsaw-piece.in-board .jigsaw-svg path {
    stroke: rgba(255,255,255,.12) !important;
    stroke-width: .45 !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg path:last-child {
    stroke: rgba(60,40,100,.08) !important;
    stroke-width: .35 !important;
}

.true-jigsaw-tray .true-jigsaw-piece .jigsaw-svg {
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.12));
}


/* v1.14.2 hold-to-view guide + darker shuffled tray */
.true-jigsaw-board {
    position: relative !important;
    background: #ffffff !important;
}

.true-jigsaw-board::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background-image: var(--puzzle-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
    z-index: 0;
}

.true-jigsaw-board.show-guide::before {
    opacity: .28;
}

.true-jigsaw-slot {
    z-index: 2;
}

.true-jigsaw-tray-shell {
    background: #eef2f7 !important;
}

.true-jigsaw-tray {
    background: #dbe3ee !important;
    border-radius: 18px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(71,85,105,.18);
}

.true-jigsaw-tray .true-jigsaw-piece {
    background-color: #cbd5e1;
}

.true-jigsaw-tray .true-jigsaw-piece .jigsaw-svg {
    filter: drop-shadow(0 6px 9px rgba(15,23,42,.22)) !important;
}


/* v1.14.3 hold-guide reliability + equal pieces panel */
.true-jigsaw-stage {
    align-items: stretch !important;
}

.true-jigsaw-board-shell,
.true-jigsaw-tray-shell {
    height: 100%;
}

.true-jigsaw-board::before {
    background-image: var(--guide-image, var(--puzzle-image)) !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

.true-jigsaw-board.show-guide::before {
    opacity: .42 !important;
}

.true-jigsaw-board.show-guide {
    background-color: #f8fafc !important;
}

.true-jigsaw-slot {
    z-index: 3 !important;
}

.true-jigsaw-piece.in-board {
    z-index: 6 !important;
}

#holdGuideBtn {
    touch-action: none;
    user-select: none;
}

/* Make shuffled pieces section similar in height to the workbench and scroll inside. */
.true-jigsaw-tray-shell {
    display: flex;
    flex-direction: column;
}

.true-jigsaw-tray {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

.true-jigsaw-board-shell .true-jigsaw-board,
.true-jigsaw-tray-shell .true-jigsaw-tray {
    min-height: 520px;
}

@media (max-width: 991px) {
    .true-jigsaw-board-shell .true-jigsaw-board,
    .true-jigsaw-tray-shell .true-jigsaw-tray {
        min-height: 360px;
    }
}

@media (max-width: 767px) {
    .true-jigsaw-board-shell .true-jigsaw-board,
    .true-jigsaw-tray-shell .true-jigsaw-tray {
        min-height: 300px;
    }
}


/* v1.14.4 real guide overlay + 3-piece tray pager */
.true-jigsaw-board {
    position: relative !important;
}

.puzzle-guide-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 12px;
    transition: opacity .12s ease;
}

.puzzle-guide-overlay.active {
    opacity: .36;
}

.true-jigsaw-board.show-guide {
    background: #f8fafc !important;
}

.true-jigsaw-slot {
    z-index: 3 !important;
}

.true-jigsaw-piece.in-board {
    z-index: 6 !important;
}

.puzzle-tray-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

#puzzleTrayPageInfo {
    text-align: center;
    font-weight: 800;
}

.true-jigsaw-tray {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center;
    justify-items: center;
    min-height: 180px !important;
    max-height: 230px !important;
    overflow: hidden !important;
}

.true-jigsaw-tray .true-jigsaw-piece {
    width: min(110px, var(--tray-piece-size, 78px) + 34px) !important;
    height: min(110px, var(--tray-piece-size, 78px) + 34px) !important;
}

.true-jigsaw-piece.tray-hidden {
    display: none !important;
}

.true-jigsaw-tray-shell {
    min-height: 0 !important;
}

@media (max-width: 767px) {
    .true-jigsaw-tray {
        min-height: 150px !important;
        max-height: 190px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: min(88px, var(--tray-piece-size, 78px) + 22px) !important;
        height: min(88px, var(--tray-piece-size, 78px) + 22px) !important;
    }
}


/* v1.14.5 one-column pieces tray fix */
.puzzle-tray-controls {
    display: none !important;
}

.true-jigsaw-tray-shell {
    background: #eef2f7 !important;
    display: flex !important;
    flex-direction: column !important;
}

.true-jigsaw-tray {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    justify-items: center !important;
    align-items: start !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 520px !important;
    max-height: 520px !important;
    padding: 16px !important;
    background: #dbe3ee !important;
    border-radius: 18px !important;
    box-shadow: inset 0 0 0 1px rgba(71,85,105,.18);
}

.true-jigsaw-tray .true-jigsaw-piece {
    display: flex !important;
    width: min(150px, max(95px, var(--tray-piece-size, 78px) + 56px)) !important;
    height: min(150px, max(95px, var(--tray-piece-size, 78px) + 56px)) !important;
    margin: 0 auto !important;
}

.true-jigsaw-piece.tray-hidden {
    display: flex !important;
}

.true-jigsaw-piece.in-board {
    display: flex !important;
}

@media (max-width: 991px) {
    .true-jigsaw-tray {
        min-height: 360px !important;
        max-height: 360px !important;
    }
}

@media (max-width: 767px) {
    .true-jigsaw-tray {
        min-height: 300px !important;
        max-height: 300px !important;
        grid-template-columns: 1fr !important;
    }

    .true-jigsaw-tray .true-jigsaw-piece {
        width: min(120px, max(82px, var(--tray-piece-size, 78px) + 38px)) !important;
        height: min(120px, max(82px, var(--tray-piece-size, 78px) + 38px)) !important;
    }
}


/* v1.14.6 board fit fix: prevent placed pieces from overlapping badly */
.true-jigsaw-board {
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.true-jigsaw-slot {
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.true-jigsaw-piece.in-board {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 4 !important;
}

.true-jigsaw-piece.in-board:hover,
.true-jigsaw-piece.in-board.selected {
    transform: none !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg {
    width: 100% !important;
    height: 100% !important;
    filter: none !important;
}

/* Keep board pieces clean; keep tray pieces visibly shaped. */
.true-jigsaw-piece.in-board .jigsaw-svg path {
    stroke: rgba(255,255,255,.18) !important;
    stroke-width: .35 !important;
}

.true-jigsaw-tray .true-jigsaw-piece {
    overflow: visible !important;
}

.true-jigsaw-tray .true-jigsaw-piece .jigsaw-svg {
    overflow: visible !important;
    filter: drop-shadow(0 6px 9px rgba(15,23,42,.22)) !important;
}


/* v1.14.7 board gap fix: fill each slot cleanly without large gaps */
.true-jigsaw-board {
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.true-jigsaw-slot {
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/*
The shaped SVG uses a 120x120 viewBox and the real square image area is
from 10 to 110. Making board pieces 120% and shifting them by -10%
maps the real square image area exactly onto the board slot.
This removes the big gaps while clipping excess tabs safely.
*/
.true-jigsaw-piece.in-board {
    position: absolute !important;
    width: 120% !important;
    height: 120% !important;
    left: -10% !important;
    top: -10% !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 4 !important;
}

.true-jigsaw-piece.in-board:hover,
.true-jigsaw-piece.in-board.selected {
    transform: none !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg {
    width: 100% !important;
    height: 100% !important;
    filter: none !important;
    overflow: visible !important;
}

/* Reduce board outlines so the joined picture looks cleaner. */
.true-jigsaw-piece.in-board .jigsaw-svg path {
    stroke: rgba(255,255,255,.12) !important;
    stroke-width: .25 !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg path:last-child {
    stroke: rgba(60,40,100,.05) !important;
    stroke-width: .2 !important;
}

/* Keep tray pieces large and visibly shaped. */
.true-jigsaw-tray .true-jigsaw-piece {
    overflow: visible !important;
}

.true-jigsaw-tray .true-jigsaw-piece .jigsaw-svg {
    overflow: visible !important;
    filter: drop-shadow(0 6px 9px rgba(15,23,42,.22)) !important;
}


/* v1.14.8 remove white socket/cut-out gaps on board */
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg image {
    opacity: 1 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path {
    stroke: rgba(255,255,255,.16) !important;
    stroke-width: .25 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path:last-child {
    stroke: rgba(55,65,81,.05) !important;
    stroke-width: .2 !important;
}

/* Keep tray pieces clipped/shaped. The fill-mode is only for pieces placed on the board. */
.true-jigsaw-tray .true-jigsaw-piece .jigsaw-svg g[data-original-clip-path] {
    clip-path: attr(data-original-clip-path);
}


/* v1.14.9 true jigsaw on board with no white cut-outs */
.true-jigsaw-slot {
    background-color: transparent !important;
}

.true-jigsaw-slot.occupied {
    background-color: #ffffff !important;
}

.true-jigsaw-piece.in-board.board-fill-mode {
    position: absolute !important;
    width: 120% !important;
    height: 120% !important;
    left: -10% !important;
    top: -10% !important;
    margin: 0 !important;
    z-index: 4 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    filter: none !important;
}

/* Keep the true jigsaw clip-path on the board.
   The occupied slot background now fills any socket/cut-out areas. */
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg g[clip-path],
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg g[data-original-clip-path] {
    opacity: 1 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path {
    stroke: rgba(255,255,255,.14) !important;
    stroke-width: .24 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path:last-child {
    stroke: rgba(31,41,55,.06) !important;
    stroke-width: .18 !important;
}

/* Keep hover gentle on the board and more visible in tray */
.true-jigsaw-piece.in-board.board-fill-mode:hover,
.true-jigsaw-piece.in-board.board-fill-mode.selected {
    transform: none !important;
    filter: none !important;
}


/* v1.14.10 correct fill behind board-piece cut-outs */
.true-jigsaw-slot {
    position: relative !important;
}

.true-jigsaw-slot.occupied {
    background-image: var(--slot-bg-image) !important;
    background-size: var(--slot-bg-size) !important;
    background-position: var(--slot-bg-position) !important;
    background-repeat: no-repeat !important;
}

.true-jigsaw-slot.occupied::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--slot-bg-image);
    background-size: var(--slot-bg-size);
    background-position: var(--slot-bg-position);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* keep the piece above the aligned image fill */
.true-jigsaw-piece.in-board,
.true-jigsaw-piece.in-board.board-fill-mode {
    z-index: 4 !important;
}

/* keep empty slots plain */
.true-jigsaw-slot:not(.occupied)::before {
    content: none !important;
}


/* v1.14.11 board underlay fix for true jigsaw cut-outs */
.true-jigsaw-board {
    position: relative !important;
    isolation: isolate;
    background: #ffffff !important;
}

.puzzle-board-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: inherit;
    pointer-events: none;
}

.true-jigsaw-slot {
    position: relative !important;
    z-index: 2 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.true-jigsaw-slot.occupied {
    background: transparent !important;
}

.true-jigsaw-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 1;
    pointer-events: none;
}

.true-jigsaw-slot.occupied::before {
    opacity: 0 !important;
}

.true-jigsaw-piece.in-board,
.true-jigsaw-piece.in-board.board-fill-mode {
    position: absolute !important;
    width: 120% !important;
    height: 120% !important;
    left: -10% !important;
    top: -10% !important;
    z-index: 4 !important;
    margin: 0 !important;
    transform: none !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg,
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    filter: none !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg path,
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path {
    stroke: rgba(255,255,255,.14) !important;
    stroke-width: .24 !important;
}

.true-jigsaw-piece.in-board .jigsaw-svg path:last-child,
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg path:last-child {
    stroke: rgba(31,41,55,.06) !important;
    stroke-width: .18 !important;
}

/* Keep guide overlay above underlay but below pieces when holding. */
.puzzle-guide-overlay {
    z-index: 1 !important;
}
.true-jigsaw-board.show-guide .puzzle-guide-overlay.active {
    opacity: .36;
}

/* Keep board slots over underlay, and pieces over slots. */
.true-jigsaw-slot > * {
    position: relative;
    z-index: 3;
}


/* v1.15 kids-friendly challenge picker */
.kids-hero-card .card-body {
    padding: 24px;
}

.hero-subtitle {
    font-size: 1.05rem;
    max-width: 680px;
}

.hero-mascots {
    display: flex;
    gap: 10px;
    font-size: 2rem;
}
.hero-mascots span {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 18px;
}

.challenge-group {
    background: rgba(255,255,255,.6);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(57,24,98,.08);
}
.challenge-group-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.challenge-group-header h3 {
    font-size: 1.5rem;
    font-weight: 900;
}
.challenge-group-header p {
    color: #6b5d7d;
}
.challenge-group-badge {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    box-shadow: 0 10px 24px rgba(245,158,11,.18);
}
.group-puzzle .challenge-group-badge {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    box-shadow: 0 10px 24px rgba(124,58,237,.16);
}
.group-special .challenge-group-badge {
    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
    box-shadow: 0 10px 24px rgba(59,130,246,.16);
}

.kid-challenge-card {
    border-radius: 26px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kid-challenge-card:hover,
.kid-challenge-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(57,24,98,.16);
}
.kid-card-top {
    display: flex;
    gap: 14px;
    align-items: center;
}
.kid-illustration {
    width: 90px;
    min-width: 90px;
    height: 90px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 22px rgba(0,0,0,.08);
}
.bubble-answer {
    background: linear-gradient(135deg, #fef3c7, #fdba74);
}
.bubble-puzzle {
    background: linear-gradient(135deg, #ddd6fe, #a78bfa);
}
.bubble-special {
    background: linear-gradient(135deg, #bfdbfe, #60a5fa);
}
.kid-card-labels {
    min-width: 0;
}
.family-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: .82rem;
    margin-bottom: 8px;
}
.chip-answer { background: #fff7d6; color: #92400e; }
.chip-puzzle { background: #ede9fe; color: #5b21b6; }
.chip-special { background: #dbeafe; color: #1d4ed8; }
.mode-title {
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.1;
}
.kid-mini-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: #f8fafc;
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
}
.kid-question {
    font-size: 1.15rem;
    line-height: 1.3;
    min-height: 3.2em;
}
.kid-reward-pill {
    font-size: .95rem;
}
.kid-play-btn {
    font-size: 1.08rem;
    border-radius: 20px;
}
.kid-card-answer { border-top: 6px solid #f59e0b; }
.kid-card-puzzle { border-top: 6px solid #8b5cf6; }
.kid-card-special { border-top: 6px solid #3b82f6; }

@media (max-width: 767px) {
    .challenge-group { padding: 14px; }
    .challenge-group-header { align-items: flex-start; }
    .challenge-group-badge {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 1.6rem;
    }
    .kid-card-top {
        align-items: flex-start;
    }
    .kid-illustration {
        width: 76px;
        min-width: 76px;
        height: 76px;
        border-radius: 20px;
        font-size: 1.8rem;
    }
    .kid-question {
        min-height: 0;
        font-size: 1.08rem;
    }
    .hero-mascots span {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}


/* v1.15.1 modular puzzle thumbnails */
.kid-card-top-modular {
    align-items: flex-start;
}
.kid-card-top-modular.has-thumb {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.kid-visual-thumb {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.08);
}
.puzzle-thumb-wrap {
    aspect-ratio: 4 / 3;
}
.puzzle-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.puzzle-thumb-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(32,17,56,0) 0%, rgba(32,17,56,.72) 100%);
    color: #fff;
}
.puzzle-thumb-badge,
.puzzle-piece-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 900;
    backdrop-filter: blur(3px);
}
.puzzle-thumb-badge {
    background: rgba(255,255,255,.18);
}
.puzzle-piece-count {
    background: rgba(124,58,237,.35);
}
.kid-card-top-modular.has-thumb .kid-card-labels {
    width: 100%;
}

@media (max-width: 767px) {
    .puzzle-thumb-wrap {
        aspect-ratio: 16 / 10;
    }
}


/* v1.15.2 keep true jigsaw clipping on board */
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg {
    overflow: visible !important;
}

/* The board underlay fills socket gaps, but the piece image itself must remain clipped to the jigsaw shape. */
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg g[clip-path],
.true-jigsaw-piece.in-board.board-fill-mode .jigsaw-svg g[data-original-clip-path] {
    opacity: 1 !important;
}

.true-jigsaw-piece.in-board.board-fill-mode {
    background: transparent !important;
}


/* v1.26 Game Lobby */
.lobby-section {
    background: rgba(255,255,255,.62);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(57,24,98,.08);
}

.lobby-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.lobby-game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lobby-game-card {
    text-decoration: none;
    color: #13072d;
    background: #ffffff;
    border-radius: 24px;
    padding: 16px;
    display: grid;
    gap: 8px;
    min-height: 165px;
    box-shadow: 0 10px 24px rgba(57,24,98,.10);
    border: 2px solid rgba(124,58,237,.08);
    position: relative;
    overflow: hidden;
}

.lobby-game-card:hover,
.lobby-game-card:focus {
    transform: translateY(-2px);
    color: #13072d;
    border-color: #7c3aed;
}

.lobby-game-card.solo {
    background: linear-gradient(180deg, #ffffff, #f5f3ff);
}

.lobby-game-card.multi {
    background: linear-gradient(180deg, #ffffff, #ecfeff);
}

.lobby-game-card.featured {
    border-color: #f59e0b;
    box-shadow: 0 12px 28px rgba(245,158,11,.18);
}

.lobby-game-emoji {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 8px 18px rgba(124,58,237,.20);
}

.lobby-game-card strong {
    font-size: 1.08rem;
}

.lobby-game-card small {
    color: #625474;
    line-height: 1.2;
}

.lobby-game-card em {
    font-style: normal;
    font-weight: 900;
    color: #2563eb;
    margin-top: auto;
}

.lobby-room-list {
    display: grid;
    gap: 10px;
}

.lobby-room-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 22px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(57,24,98,.08);
}

.lobby-room-card.compact {
    margin-bottom: 8px;
}

.lobby-room-icon {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    font-size: 1.5rem;
}

.lobby-room-main {
    min-width: 0;
}

.lobby-room-action {
    display: flex;
    justify-content: flex-end;
}

.lobby-game-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lobby-picker-card {
    cursor: pointer;
    border-radius: 18px;
    background: #fff;
    border: 2px solid #e5e7eb;
    padding: 12px;
    display: grid;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(57,24,98,.06);
}

.lobby-picker-card input {
    display: none;
}

.lobby-picker-card:has(input:checked) {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.lobby-picker-card span {
    font-size: 1.6rem;
}

@media (max-width: 900px) {
    .lobby-game-grid,
    .lobby-game-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .lobby-section {
        padding: 12px;
        border-radius: 22px;
    }

    .lobby-section-head {
        display: grid;
        align-items: start;
    }

    .lobby-game-grid,
    .lobby-game-picker {
        grid-template-columns: 1fr;
    }

    .lobby-game-card {
        min-height: 135px;
        border-radius: 20px;
    }

    .lobby-room-card {
        grid-template-columns: auto 1fr;
    }

    .lobby-room-action {
        grid-column: 1 / -1;
    }

    .lobby-room-action .btn,
    .lobby-room-card > .btn {
        width: 100%;
    }
}


/* v1.26.1 landing mode and solo flow */
.home-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-mode-card {
    text-decoration: none;
    color: #13072d;
    background: #fff;
    border-radius: 28px;
    padding: 22px;
    min-height: 210px;
    display: grid;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(57,24,98,.12);
    border: 2px solid rgba(124,58,237,.08);
}

.home-mode-card:hover,
.home-mode-card:focus {
    color: #13072d;
    transform: translateY(-2px);
    border-color: #7c3aed;
}

.home-mode-card span {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.home-mode-card strong {
    font-size: 1.35rem;
}

.home-mode-card small {
    color: #625474;
    line-height: 1.25;
}

.home-mode-card em {
    margin-top: auto;
    font-style: normal;
    font-weight: 900;
    color: #2563eb;
}

.home-mode-card.single {
    background: linear-gradient(180deg, #ffffff, #f5f3ff);
}

.home-mode-card.multi {
    background: linear-gradient(180deg, #ffffff, #ecfeff);
}

.home-mode-card.rooms {
    background: linear-gradient(180deg, #ffffff, #fff7ed);
}

.solo-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.solo-level-card {
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 22px;
    padding: 16px;
    background: #fff;
    display: grid;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(57,24,98,.08);
}

.solo-level-card input {
    display: none;
}

.solo-level-card:has(input:checked) {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.solo-level-card span {
    font-size: 2rem;
}

.solo-level-card strong {
    font-size: 1.1rem;
}

.solo-level-card small {
    color: #6b7280;
}

.solo-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-radius: 18px;
    background: #fff;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(57,24,98,.07);
    margin-bottom: 10px;
}

.solo-history-row.finished {
    opacity: .78;
}

@media (max-width: 900px) {
    .home-mode-grid {
        grid-template-columns: 1fr;
    }

    .home-mode-card {
        min-height: 160px;
    }

    .solo-level-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .solo-history-row {
        grid-template-columns: 1fr;
    }

    .solo-history-row .btn {
        width: 100%;
    }
}


/* v1.26.5 direct multiplayer flow */
.competitor-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(255,255,255,.6);
    border-radius: 18px;
    padding: 10px;
}

.competitor-card {
    cursor: pointer;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    box-shadow: 0 6px 16px rgba(57,24,98,.06);
}

.competitor-card input {
    display: none;
}

.competitor-card:has(input:checked) {
    background: #f5f3ff;
    border-color: #7c3aed;
}

.competitor-card span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competitor-card strong,
.competitor-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competitor-card small {
    color: #6b7280;
}

.multiplayer-game-row,
.multiplayer-invite-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 7px 20px rgba(57,24,98,.07);
    margin-bottom: 10px;
}

.multiplayer-game-row.finished {
    opacity: .78;
}

@media (max-width: 900px) {
    .competitor-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .competitor-picker {
        grid-template-columns: 1fr;
        max-height: 420px;
    }

    .multiplayer-game-row,
    .multiplayer-invite-row {
        grid-template-columns: 1fr;
    }

    .multiplayer-game-row .btn,
    .multiplayer-invite-row .btn {
        width: 100%;
    }
}


/* v1.26.6 simplified multiplayer flow */
.quick-games-section {
    border: 2px solid rgba(37,99,235,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(239,246,255,.72));
}

.quick-game-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: #13072d;
    background: #ffffff;
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 7px 20px rgba(57,24,98,.07);
    margin-bottom: 10px;
    border: 2px solid rgba(37,99,235,.06);
}

.quick-game-row:hover,
.quick-game-row:focus {
    color: #13072d;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.quick-game-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
}

.quick-game-main {
    min-width: 0;
}

.quick-game-main strong,
.quick-game-main small {
    display: block;
}

.quick-game-main small {
    color: #625474;
    line-height: 1.25;
}

.quick-game-row em {
    font-style: normal;
    font-weight: 900;
    color: #2563eb;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .quick-game-row {
        grid-template-columns: auto 1fr;
    }

    .quick-game-row em {
        grid-column: 1 / -1;
        background: #eff6ff;
        color: #1d4ed8;
        padding: 8px;
        border-radius: 12px;
        text-align: center;
    }
}


/* v1.26.9 direct app modes: Single Player + Multiplayer only */
.home-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.home-mode-card.rooms {
    display: none !important;
}

@media (max-width: 900px) {
    .home-mode-grid {
        grid-template-columns: 1fr !important;
    }
}


/* v1.26.10 unified landing multiplayer section */
.unified-room-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.room-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.room-status-pill.active {
    background: #e8f7ee;
    color: #138a4b;
}

.room-status-pill.waiting {
    background: #fff4db;
    color: #b37400;
}

.quick-games-section .alert {
    border-radius: 18px;
}

@media (max-width: 640px) {
    .unified-room-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .unified-room-card .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* v1.27 Hidden Objects game */
.compact-game-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.compact-game-header {
    border-radius: 26px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px rgba(57,24,98,.12);
}

.hidden-object-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.hidden-scene-card,
.hidden-object-panel {
    background: #fff;
    border-radius: 26px;
    padding: 16px;
    box-shadow: 0 12px 32px rgba(57,24,98,.12);
}

.hidden-object-panel {
    position: sticky;
    top: 82px;
}

.hidden-scene {
    position: relative;
    min-height: min(68vh, 650px);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(#bce8ff 0 45%, #9fe6a6 45% 70%, #c28b50 70% 100%);
    border: 4px solid #7c3aed;
}

.hidden-scene-dino {
    background: linear-gradient(#bce8ff 0 42%, #84d883 42% 68%, #b38751 68% 100%);
}

.hidden-scene-jungle {
    background: linear-gradient(#a7f3d0 0 38%, #22c55e 38% 70%, #7c4a25 70% 100%);
}

.hidden-scene-park {
    background: linear-gradient(#dbeafe 0 45%, #bbf7d0 45% 72%, #fde68a 72% 100%);
}

.scene-layer {
    position: absolute;
    pointer-events: none;
}

.scene-layer.sky::before {
    content: "☀️";
    position: absolute;
    right: 8%;
    top: 8%;
    font-size: clamp(42px, 7vw, 82px);
}

.scene-layer.hills::before,
.scene-layer.hills::after {
    content: "";
    position: absolute;
    bottom: 28%;
    width: 45vw;
    height: 22vw;
    max-width: 520px;
    max-height: 230px;
    background: rgba(22, 101, 52, .35);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scene-layer.hills::before { left: 3%; }
.scene-layer.hills::after { right: 0; background: rgba(21, 128, 61, .42); }

.scene-layer.ground::before {
    content: "🌳   🪨     🌿        🌳      🌱";
    position: absolute;
    left: 4%;
    bottom: 7%;
    width: 92%;
    font-size: clamp(28px, 4vw, 54px);
    letter-spacing: 18px;
    opacity: .85;
}

.scene-label {
    position: absolute;
    left: 18px;
    top: 18px;
    background: rgba(255,255,255,.88);
    border-radius: 16px;
    padding: 8px 12px;
    font-weight: 900;
    color: #3b0764;
}

.hidden-object {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 0;
    background: rgba(255,255,255,.20);
    border-radius: 999px;
    width: clamp(38px, 5vw, 58px);
    height: clamp(38px, 5vw, 58px);
    font-size: clamp(22px, 3.5vw, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: saturate(.95);
    transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

.hidden-object:hover,
.hidden-object:focus {
    transform: translate(-50%, -50%) scale(1.25);
    background: rgba(255,255,255,.72);
    outline: 3px solid rgba(124,58,237,.25);
}

.hidden-object.found {
    opacity: .35;
    filter: grayscale(.9);
    pointer-events: none;
}

.hidden-object.found::after {
    content: "✓";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
}

.hidden-progress-box {
    background: #f8fafc;
    border-radius: 20px;
    padding: 14px;
}

.ho-list-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(57,24,98,.06);
    margin-bottom: 8px;
}

.ho-list-item span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ho-list-item.found {
    opacity: .55;
    text-decoration: line-through;
    background: #ecfdf5;
}

@media (max-width: 900px) {
    .hidden-object-layout {
        grid-template-columns: 1fr;
    }

    .hidden-object-panel {
        position: static;
    }

    .hidden-scene {
        min-height: 520px;
    }
}

@media (max-width: 640px) {
    .compact-game-header {
        flex-direction: column;
        align-items: stretch;
    }

    .hidden-scene {
        min-height: 460px;
    }
}


/* v1.27.1 Hidden Objects smart scene generator */
.hidden-scene.smart-scene {
    min-height: min(72vh, 690px);
    background:
        radial-gradient(circle at 45% 20%, rgba(255,230,140,.24), transparent 28%),
        linear-gradient(180deg, #132516 0%, #19341e 46%, #452716 100%);
    border: 4px solid #7c3aed;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.scene-backdrop,
.scene-backdrop > div,
.foreground-foliage,
.foreground-vines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sun-glow {
    background: radial-gradient(circle at 48% 18%, rgba(255,225,129,.36), transparent 20%);
}

.far-trees {
    background:
      radial-gradient(ellipse at 12% 25%, rgba(26,83,43,.9) 0 13%, transparent 14%),
      radial-gradient(ellipse at 22% 22%, rgba(20,75,40,.9) 0 11%, transparent 12%),
      radial-gradient(ellipse at 74% 24%, rgba(21,82,43,.9) 0 14%, transparent 15%),
      radial-gradient(ellipse at 88% 25%, rgba(18,66,37,.92) 0 16%, transparent 17%),
      linear-gradient(90deg, rgba(12,45,27,.7), rgba(28,82,42,.45), rgba(12,45,27,.7));
}

.scene-tent {
    left: 28%;
    top: 24%;
    width: 27%;
    height: 35%;
    clip-path: polygon(50% 2%, 100% 100%, 0 100%);
    background:
      linear-gradient(110deg, rgba(255,255,255,.10), transparent 35%),
      linear-gradient(135deg, #596d36, #2f4327);
    border-left: 5px solid rgba(12,30,17,.45);
    border-right: 5px solid rgba(12,30,17,.45);
    border-radius: 16px;
    transform: rotate(-1deg);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.scene-tent::after {
    content: "";
    position: absolute;
    left: 43%;
    top: 38%;
    width: 18%;
    height: 62%;
    background: rgba(11,27,16,.42);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scene-trunk.left {
    left: 0;
    top: -2%;
    width: 22%;
    height: 102%;
    background:
      linear-gradient(90deg, #331b0e, #6b3b1d 44%, #2c170c);
    clip-path: polygon(0 0, 75% 0, 52% 100%, 0 100%);
}

.scene-trunk.right {
    right: 0;
    top: -2%;
    width: 18%;
    height: 102%;
    background:
      linear-gradient(90deg, #2d170c, #75411f 55%, #2b160b);
    clip-path: polygon(46% 0, 100% 0, 100% 100%, 22% 100%);
}

.scene-rocks {
    left: 48%;
    top: 49%;
    width: 34%;
    height: 24%;
    background:
      radial-gradient(ellipse at 24% 62%, #6b6a5d 0 19%, transparent 20%),
      radial-gradient(ellipse at 45% 48%, #8a8777 0 25%, transparent 26%),
      radial-gradient(ellipse at 70% 62%, #747061 0 22%, transparent 23%);
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.20));
}

.scene-water {
    left: 35%;
    top: 66%;
    width: 35%;
    height: 14%;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 45% 50%, rgba(133,204,220,.62), rgba(34,96,113,.50) 70%, transparent 72%);
    transform: rotate(-4deg);
}

.scene-crate {
    right: 10%;
    bottom: 7%;
    width: 15%;
    height: 16%;
    border-radius: 8px;
    background:
      linear-gradient(90deg, transparent 0 45%, rgba(0,0,0,.16) 46% 50%, transparent 51%),
      linear-gradient(#8b5a2b, #6f3f1e);
    box-shadow: 0 16px 28px rgba(0,0,0,.22);
}

.scene-path {
    left: 16%;
    bottom: 0;
    width: 62%;
    height: 36%;
    background: radial-gradient(ellipse at 45% 100%, rgba(183,137,75,.82), rgba(120,76,38,.70) 55%, transparent 56%);
}

.foreground-foliage.fg-left {
    background:
      radial-gradient(ellipse at 7% 89%, #1f6b35 0 10%, transparent 11%),
      radial-gradient(ellipse at 15% 94%, #2f8a42 0 12%, transparent 13%),
      radial-gradient(ellipse at 25% 91%, #1f7a37 0 9%, transparent 10%);
}

.foreground-foliage.fg-right {
    background:
      radial-gradient(ellipse at 92% 88%, #1f6b35 0 13%, transparent 14%),
      radial-gradient(ellipse at 83% 93%, #2f8a42 0 10%, transparent 11%),
      radial-gradient(ellipse at 72% 88%, #166534 0 8%, transparent 9%);
}

.foreground-vines {
    background:
      linear-gradient(103deg, transparent 0 24%, rgba(61,117,50,.64) 24.2% 25%, transparent 25.2%),
      linear-gradient(80deg, transparent 0 68%, rgba(61,117,50,.58) 68.2% 69%, transparent 69.2%);
}

.scene-decoy {
    position: absolute;
    width: calc(34px * var(--s));
    height: calc(34px * var(--s));
    transform: translate(-50%, -50%) rotate(var(--r));
    pointer-events: none;
}

.scene-decoy-leaf1,
.scene-decoy-leaf2,
.scene-decoy-leaf3 {
    background: linear-gradient(135deg, #2c7a3f, #76b852);
    border-radius: 100% 0 100% 0;
    filter: blur(.1px);
}

.scene-decoy-rock1,
.scene-decoy-rock2 {
    background: #726b5b;
    border-radius: 45% 55% 48% 52%;
}

.scene-decoy-vine {
    width: calc(10px * var(--s));
    height: calc(72px * var(--s));
    border-radius: 999px;
    background: #2f6b38;
}

.scene-decoy-mushroom {
    background: radial-gradient(ellipse at 50% 28%, #bd6b5f 0 35%, transparent 36%), linear-gradient(#e9d1b0,#b08968);
    border-radius: 50% 50% 35% 35%;
}

.scene-decoy-twig {
    width: calc(55px * var(--s));
    height: calc(8px * var(--s));
    background: #5a341d;
    border-radius: 999px;
}

.scene-decoy-spark {
    background: rgba(255,220,120,.6);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.scene-decoy-shadow {
    background: rgba(0,0,0,.24);
    border-radius: 50%;
}

.scene-decoy-flower_decoy {
    background: radial-gradient(circle, #fef08a 0 18%, #d946ef 19% 48%, transparent 49%);
    border-radius: 50%;
}

.hidden-object.smart-object {
    width: clamp(28px, 3.1vw, 44px);
    height: clamp(28px, 3.1vw, 44px);
    background: transparent;
    opacity: var(--o);
    transform: translate(-50%, -50%) scale(var(--s)) rotate(var(--r));
    filter: saturate(.72) contrast(.88) drop-shadow(0 2px 1px rgba(0,0,0,.24));
    mix-blend-mode: normal;
}

.hidden-object.smart-object.blend {
    filter: saturate(.48) contrast(.72) brightness(.88) drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

.object-glyph {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 2.8vw, 36px);
}

.object-cover {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12%;
    height: var(--occ);
    min-height: 0;
    background:
      radial-gradient(ellipse at 38% 100%, rgba(31,107,53,.96) 0 48%, transparent 49%),
      radial-gradient(ellipse at 70% 100%, rgba(47,138,66,.94) 0 42%, transparent 43%);
    border-radius: 50% 50% 0 0;
}

.hidden-object.smart-object:hover,
.hidden-object.smart-object:focus {
    opacity: 1;
    transform: translate(-50%, -50%) scale(calc(var(--s) * 1.35)) rotate(var(--r));
    background: rgba(255,255,255,.12);
    outline: 2px solid rgba(255,255,255,.25);
}

.hidden-scene.hint-on .hidden-object.smart-object:not(.found) {
    outline: 2px dashed rgba(255,255,255,.38);
    background: rgba(255,255,255,.10);
}

.ho-list-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.ho-list-item em {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-style: normal;
    font-weight: 900;
}

.ho-list-item.found em {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.hidden-object.smart-object.found {
    opacity: .98;
    filter: none;
}

.hidden-object.smart-object.found::after {
    right: -10px;
    top: -10px;
}

@media (max-width: 900px) {
    .hidden-scene.smart-scene {
        min-height: 560px;
    }
}

@media (max-width: 640px) {
    .hidden-scene.smart-scene {
        min-height: 460px;
    }
}

/* v1.27.2 Hidden Objects AI scene image mode */
.ai-hidden-shell .hidden-object-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.ai-scene-card {
    padding: 18px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .08);
}

.ai-scene-wrap {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 4px solid #7c3aed;
    background: #0f172a;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}

.ai-scene-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ai-hotspot-layer {
    position: absolute;
    inset: 0;
}

.ho-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    outline: none;
}

.ho-hotspot:hover,
.ho-hotspot:focus-visible {
    background: rgba(255,255,255,.10);
}

.ai-scene-wrap.hint-on .ho-hotspot:not(.found) {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 3px rgba(124,58,237,.55);
    background: rgba(255,255,255,.12);
}

.ho-hotspot.found {
    box-shadow: inset 0 0 0 2px rgba(34,197,94,.95), 0 0 0 3px rgba(34,197,94,.20);
    background: rgba(34,197,94,.22);
}

.ho-hotspot.found::after {
    content: '✓';
    position: absolute;
    right: -9px;
    top: -10px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(22,163,74,.35);
}

.ai-hidden-shell .hidden-object-panel {
    position: sticky;
    top: 16px;
}

.ai-hidden-shell .hidden-progress-box,
.ai-hidden-shell .hidden-object-list {
    background: #fff;
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .08);
}

.ai-hidden-shell .ho-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: #f8fafc;
    margin-bottom: 10px;
}

.ai-hidden-shell .ho-list-item span:first-child {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef2ff;
    font-size: 22px;
}

.ai-hidden-shell .ho-list-item em {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-style: normal;
    font-weight: 800;
}

.ai-hidden-shell .ho-list-item.found {
    background: #ecfdf5;
}

.ai-hidden-shell .ho-list-item.found em {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

@media (max-width: 992px) {
    .ai-hidden-shell .hidden-object-layout {
        grid-template-columns: 1fr;
    }

    .ai-hidden-shell .hidden-object-panel {
        position: static;
    }
}


/* v1.28 Hidden Objects proper module */
.ai-hidden-shell .ho-game-topbar {
    align-items: center;
}

.ho-top-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ho-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ho-hud-item {
    background: rgba(255,255,255,.86);
    border-radius: 20px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon value"
      "icon label";
    column-gap: 10px;
    align-items: center;
    box-shadow: 0 12px 28px rgba(57,24,98,.08);
}

.ho-hud-item span {
    grid-area: icon;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ho-hud-item strong {
    grid-area: value;
    font-size: 1.25rem;
    line-height: 1;
}

.ho-hud-item small {
    grid-area: label;
    color: #6b5d7d;
    font-weight: 700;
}

.ai-hidden-shell .hidden-object-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.ai-scene-card {
    padding: 18px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .08);
}

.ai-scene-wrap {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 4px solid #7c3aed;
    background: #0f172a;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}

.ai-scene-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.ai-hotspot-layer {
    position: absolute;
    inset: 0;
}

.ho-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.ho-hotspot:hover,
.ho-hotspot:focus-visible {
    background: rgba(255,255,255,.08);
}

.ho-hotspot.hint-reveal {
    animation: hoPulseHint 1s ease-in-out infinite;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.96), 0 0 0 5px rgba(245,158,11,.55), 0 0 28px rgba(245,158,11,.72);
    background: rgba(255,255,255,.16);
}

.ho-hotspot.found {
    box-shadow: inset 0 0 0 2px rgba(34,197,94,.95), 0 0 0 3px rgba(34,197,94,.20);
    background: rgba(34,197,94,.22);
}

.ho-hotspot.found::after {
    content: '✓';
    position: absolute;
    right: -9px;
    top: -10px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(22,163,74,.35);
}

@keyframes hoPulseHint {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.ai-hidden-shell .hidden-object-panel {
    position: sticky;
    top: 16px;
}

.ai-hidden-shell .hidden-progress-box,
.ai-hidden-shell .hidden-object-list {
    background: #fff;
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .08);
}

.ai-hidden-shell .ho-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: #f8fafc;
    margin-bottom: 10px;
}

.ai-hidden-shell .ho-list-item span:first-child {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef2ff;
    font-size: 22px;
}

.ai-hidden-shell .ho-list-item em {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-style: normal;
    font-weight: 800;
}

.ai-hidden-shell .ho-list-item.found {
    background: #ecfdf5;
}

.ai-hidden-shell .ho-list-item.found em {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

@media (max-width: 992px) {
    .ai-hidden-shell .hidden-object-layout {
        grid-template-columns: 1fr;
    }

    .ai-hidden-shell .hidden-object-panel {
        position: static;
    }

    .ho-hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ho-hud {
        grid-template-columns: 1fr;
    }

    .ho-top-actions {
        justify-content: stretch;
    }

    .ho-top-actions .btn {
        flex: 1 1 auto;
    }
}


/* v1.29 Memory Match game */
.memory-shell {
    max-width: 1080px;
    margin: 0 auto;
}

.memory-topbar,
.compact-game-header {
    border-radius: 26px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px rgba(57,24,98,.12);
}

.memory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.memory-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.memory-hud > div {
    background: rgba(255,255,255,.90);
    border-radius: 20px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon value"
      "icon label";
    column-gap: 10px;
    align-items: center;
    box-shadow: 0 12px 28px rgba(57,24,98,.08);
}

.memory-hud span {
    grid-area: icon;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.memory-hud strong {
    grid-area: value;
    font-size: 1.25rem;
    line-height: 1;
}

.memory-hud small {
    grid-area: label;
    color: #6b5d7d;
    font-weight: 700;
}

.memory-board-card {
    background: #fff;
    border-radius: 30px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .10);
}

.memory-board {
    display: grid;
    gap: 12px;
    margin: 0 auto;
}

.memory-board.easy {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    max-width: 620px;
}

.memory-board.medium {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    max-width: 680px;
}

.memory-board.hard {
    grid-template-columns: repeat(6, minmax(62px, 1fr));
    max-width: 820px;
}

.memory-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 22px;
    background: transparent;
    perspective: 800px;
    cursor: pointer;
    padding: 0;
}

.memory-face {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    backface-visibility: hidden;
    transition: transform .35s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow: 0 10px 22px rgba(57,24,98,.16);
}

.memory-face.front {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-size: clamp(26px, 4vw, 46px);
}

.memory-face.back {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 3px solid #facc15;
    color: #1f1435;
    transform: rotateY(180deg);
    font-size: clamp(30px, 5vw, 54px);
}

.memory-card.flipped .front {
    transform: rotateY(180deg);
}

.memory-card.flipped .back {
    transform: rotateY(360deg);
}

.memory-card.matched .back {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #22c55e;
    box-shadow: 0 10px 26px rgba(34,197,94,.24);
}

.memory-card.matched {
    cursor: default;
}

@media (max-width: 900px) {
    .memory-hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .memory-board.hard {
        grid-template-columns: repeat(4, minmax(60px, 1fr));
    }
}

@media (max-width: 560px) {
    .memory-topbar,
    .compact-game-header {
        flex-direction: column;
        align-items: stretch;
    }

    .memory-actions .btn {
        flex: 1 1 auto;
    }

    .memory-hud {
        grid-template-columns: 1fr 1fr;
    }

    .memory-board.easy,
    .memory-board.medium,
    .memory-board.hard {
        grid-template-columns: repeat(3, minmax(58px, 1fr));
        gap: 9px;
    }

    .memory-board-card {
        padding: 12px;
    }

    .memory-card,
    .memory-face {
        border-radius: 16px;
    }
}


/* v1.29.1 Memory Family Extreme level */
.solo-level-card.family {
    background: linear-gradient(135deg, #fff7ed, #fee2e2);
    border-color: rgba(249, 115, 22, .30);
}

.solo-level-card.family span {
    background: linear-gradient(135deg, #f97316, #db2777);
}

.memory-board.family {
    grid-template-columns: repeat(6, minmax(54px, 1fr));
    max-width: 860px;
    gap: 10px;
}

.memory-board.family .memory-face.back {
    font-size: clamp(24px, 3.4vw, 44px);
}

.memory-board.family .memory-face.front {
    font-size: clamp(22px, 3vw, 38px);
}

@media (max-width: 900px) {
    .memory-board.family {
        grid-template-columns: repeat(6, minmax(46px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .memory-board.family {
        grid-template-columns: repeat(4, minmax(54px, 1fr));
        gap: 8px;
    }
}


/* v1.30 Pattern Memory game */
.pattern-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.pattern-topbar,
.compact-game-header {
    border-radius: 26px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px rgba(57,24,98,.12);
}

.pattern-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.pattern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.pattern-main-card,
.pattern-side-card {
    background: #fff;
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(27, 15, 72, .10);
}

.pattern-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pattern-status-row > div {
    background: #f8fafc;
    border-radius: 18px;
    padding: 12px;
}

.pattern-status-row strong {
    display: block;
    color: #6b5d7d;
    font-size: .85rem;
}

.pattern-status-row span {
    font-weight: 900;
    font-size: 1.15rem;
}

.pattern-controls {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
}

.pattern-answer {
    background: #f5f3ff;
    border-radius: 18px;
    padding: 12px;
    font-weight: 800;
    min-height: 54px;
    margin-bottom: 14px;
}

.pattern-answer span {
    font-size: 1.35rem;
    letter-spacing: 8px;
}

.pattern-pads {
    display: grid;
    gap: 12px;
    margin: 0 auto;
}

.pattern-pads.pads-4 {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    max-width: 520px;
}

.pattern-pads.pads-6 {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    max-width: 680px;
}

.pattern-pads.pads-8,
.pattern-pads.pads-9 {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    max-width: 720px;
}

.pattern-pad {
    border: 0;
    border-radius: 26px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    gap: 4px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 14px 28px rgba(15,23,42,.18);
    cursor: pointer;
    transform: scale(1);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.pattern-pad span {
    font-size: clamp(34px, 5vw, 64px);
}

.pattern-pad strong {
    font-size: clamp(.78rem, 1.4vw, 1rem);
}

.pattern-pad:hover {
    transform: translateY(-2px);
}

.pattern-pad.active {
    transform: scale(1.08);
    filter: brightness(1.35) saturate(1.25);
    box-shadow: 0 0 0 8px rgba(255,255,255,.75), 0 18px 38px rgba(15,23,42,.28);
}

.pad-red { background: linear-gradient(135deg,#ef4444,#be123c); }
.pad-blue { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.pad-green { background: linear-gradient(135deg,#22c55e,#15803d); }
.pad-yellow { background: linear-gradient(135deg,#facc15,#f97316); }
.pad-purple { background: linear-gradient(135deg,#a855f7,#6d28d9); }
.pad-orange { background: linear-gradient(135deg,#fb923c,#ea580c); }
.pad-star { background: linear-gradient(135deg,#fef08a,#eab308); color:#3f2f00; }
.pad-heart { background: linear-gradient(135deg,#fb7185,#db2777); }
.pad-diamond { background: linear-gradient(135deg,#67e8f9,#0891b2); }

.pattern-player {
    background: #f8fafc;
    border-radius: 18px;
    padding: 12px;
    margin-bottom: 10px;
    border: 2px solid transparent;
}

.pattern-player.active {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.pattern-player strong {
    display: block;
}

.pattern-player span {
    color: #6b5d7d;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .pattern-layout {
        grid-template-columns: 1fr;
    }

    .pattern-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .pattern-topbar,
    .compact-game-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pattern-status-row {
        grid-template-columns: 1fr;
    }

    .pattern-pads.pads-4,
    .pattern-pads.pads-6,
    .pattern-pads.pads-8,
    .pattern-pads.pads-9 {
        grid-template-columns: repeat(2, minmax(92px, 1fr));
    }
}


/* v1.30.1 compact Pattern Memory layout */
.pattern-shell-compact {
    max-width: 980px;
    margin: 0 auto;
}

.pattern-compact-bar {
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.pattern-title-mini {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.pattern-title-mini strong {
    font-size: 1.12rem;
    line-height: 1.1;
}

.pattern-title-mini span {
    font-size: .82rem;
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pattern-icon-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.btn-icon-action {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(255,255,255,.95);
    color: #1f1435;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

.btn-icon-action.play {
    background: #facc15;
}

.btn-icon-action.submit {
    background: #1677ff;
    color: #fff;
}

.btn-icon-action.clear {
    background: #fff;
}

.btn-icon-action.new {
    background: #f5f3ff;
}

.btn-icon-action.home {
    background: #ffffff;
}

.btn-icon-action:disabled {
    opacity: .45;
    filter: grayscale(1);
}

.pattern-main-compact {
    padding: 12px;
}

.pattern-main-card.pattern-main-compact {
    border-radius: 24px;
}

.pattern-status-compact {
    background: #dff7ff;
    border: 1px solid #7dd3fc;
    color: #0f3f54;
    border-radius: 14px;
    padding: 8px 11px;
    font-weight: 700;
    margin-bottom: 8px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.pattern-answer-compact {
    padding: 8px 10px;
    min-height: 38px;
    margin-bottom: 10px;
    border-radius: 14px;
}

.pattern-answer-compact::before {
    content: "Answer: ";
    color: #6b5d7d;
}

.pattern-answer-compact span {
    font-size: 1.05rem;
    letter-spacing: 4px;
}

.pattern-pads-compact {
    gap: 8px;
}

.pattern-pads-compact .pattern-pad {
    border-radius: 20px;
    min-height: 94px;
}

.pattern-pads-compact .pattern-pad span {
    font-size: clamp(26px, 4vw, 46px);
}

.pattern-pads-compact .pattern-pad strong {
    font-size: .78rem;
}

.pattern-side-card {
    padding: 12px;
}

.pattern-side-card h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.pattern-player {
    padding: 9px 10px;
    border-radius: 14px;
    margin-bottom: 7px;
}

.pattern-player span {
    font-size: .8rem;
}

@media (min-width: 901px) {
    .pattern-shell-compact .pattern-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 12px;
    }
}

@media (max-width: 700px) {
    .pattern-compact-bar {
        grid-template-columns: 1fr;
        padding: 9px;
    }

    .pattern-icon-actions {
        justify-content: space-between;
    }

    .btn-icon-action {
        width: 40px;
        height: 38px;
        border-radius: 12px;
    }

    .pattern-title-mini span {
        white-space: normal;
    }

    .pattern-pads-compact.pads-9,
    .pattern-pads-compact.pads-8,
    .pattern-pads-compact.pads-6,
    .pattern-pads-compact.pads-4 {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        gap: 7px;
    }

    .pattern-pads-compact .pattern-pad {
        min-height: 82px;
    }
}

@media (max-width: 420px) {
    .pattern-pads-compact.pads-9,
    .pattern-pads-compact.pads-8,
    .pattern-pads-compact.pads-6,
    .pattern-pads-compact.pads-4 {
        grid-template-columns: repeat(3, minmax(70px, 1fr));
    }

    .pattern-pads-compact .pattern-pad {
        min-height: 74px;
    }
}

.pattern-status-compact.status-success { background:#dcfce7; border-color:#86efac; color:#14532d; }
.pattern-status-compact.status-warning { background:#fef3c7; border-color:#facc15; color:#713f12; }
.pattern-status-compact.status-danger { background:#fee2e2; border-color:#fca5a5; color:#7f1d1d; }
.pattern-status-compact.status-secondary { background:#f1f5f9; border-color:#cbd5e1; color:#334155; }
.pattern-status-compact.status-info { background:#dff7ff; border-color:#7dd3fc; color:#0f3f54; }


/* v1.31 Sort It game */
.sortit-shell {
    max-width: 1080px;
    margin: 0 auto;
}

.sortit-bar {
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.sortit-title {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.sortit-title strong {
    font-size: 1.16rem;
    line-height: 1.1;
}

.sortit-title span {
    font-size: .84rem;
    opacity: .96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sortit-actions {
    display: flex;
    gap: 7px;
}

.sortit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.sortit-main,
.sortit-side {
    background: #fff;
    border-radius: 28px;
    padding: 16px;
    box-shadow: 0 18px 42px rgba(27,15,72,.10);
}

.sort-status {
    border-radius: 16px;
    padding: 10px 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.sort-status.status-info { background:#dff7ff; border:1px solid #7dd3fc; color:#0f3f54; }
.sort-status.status-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.sort-status.status-danger { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.sort-status.status-warning { background:#fef3c7; border:1px solid #facc15; color:#713f12; }
.sort-status.status-secondary { background:#f1f5f9; border:1px solid #cbd5e1; color:#334155; }

.sort-item-card {
    background: linear-gradient(135deg,#fff7ed,#fef3c7);
    border: 4px solid #facc15;
    border-radius: 28px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}

.sort-emoji {
    font-size: clamp(76px, 14vw, 150px);
    line-height: 1;
    margin-bottom: 8px;
}

.sort-label {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #1f1435;
}

.sort-baskets {
    display: grid;
    gap: 12px;
}

.sort-baskets.count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sort-baskets.count-4,
.sort-baskets.count-5 {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.sort-basket {
    border: 0;
    border-radius: 24px;
    padding: 18px 12px;
    min-height: 130px;
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,.18);
    display: grid;
    place-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.sort-basket span {
    font-size: clamp(34px, 6vw, 64px);
}

.sort-basket strong {
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.sort-basket:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

.sort-basket:disabled {
    opacity: .55;
    filter: grayscale(.3);
}

.sort-player {
    background: #f8fafc;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 8px;
    border: 2px solid transparent;
}

.sort-player.active {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.sort-player strong {
    display: block;
}

.sort-player span {
    color: #6b5d7d;
    font-size: .84rem;
}

@media (max-width: 900px) {
    .sortit-layout {
        grid-template-columns: 1fr;
    }

    .sortit-side {
        order: 2;
    }
}

@media (max-width: 620px) {
    .sortit-bar {
        grid-template-columns: 1fr;
    }

    .sortit-title span {
        white-space: normal;
    }

    .sort-baskets.count-3,
    .sort-baskets.count-4,
    .sort-baskets.count-5 {
        grid-template-columns: 1fr;
    }

    .sort-basket {
        min-height: 92px;
        grid-template-columns: auto 1fr;
        justify-items: start;
        text-align: left;
        padding: 14px 18px;
    }
}


/* v1.32 Color Me coloring game */
.coloring-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.coloring-bar {
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.coloring-title {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.coloring-title strong {
    font-size: 1.18rem;
    line-height: 1.1;
}

.coloring-title span {
    font-size: .84rem;
    opacity: .96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coloring-actions {
    display: flex;
    gap: 7px;
}

.color-status {
    border-radius: 16px;
    padding: 10px 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.color-status.status-info { background:#dff7ff; border:1px solid #7dd3fc; color:#0f3f54; }
.color-status.status-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.color-status.status-danger { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.color-status.status-warning { background:#fef3c7; border:1px solid #facc15; color:#713f12; }

.coloring-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.coloring-card,
.coloring-side {
    background: #fff;
    border-radius: 28px;
    padding: 16px;
    box-shadow: 0 18px 42px rgba(27,15,72,.10);
}

.coloring-svg-wrap {
    background:
        linear-gradient(45deg, rgba(124,58,237,.07) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(124,58,237,.07) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(124,58,237,.07) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(124,58,237,.07) 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
    border-radius: 24px;
    padding: 10px;
    border: 4px solid #7c3aed;
}

.coloring-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #ffffff;
    border-radius: 18px;
}

.color-part {
    cursor: pointer;
    transition: filter .12s ease, stroke-width .12s ease;
}

.color-part:hover {
    filter: brightness(1.08);
    stroke-width: 7;
}

.color-palette {
    display: grid;
    gap: 9px;
}

.color-choice {
    border: 2px solid #e5e7eb;
    background: #fff;
    border-radius: 18px;
    padding: 9px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
}

.color-choice span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--c);
    border: 2px solid rgba(17,24,39,.25);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

.color-choice.selected {
    border-color: #7c3aed;
    background: #f5f3ff;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.coloring-help {
    background: #f8fafc;
    border-radius: 18px;
    padding: 12px;
    color: #4b5563;
}

.coloring-help p {
    margin-bottom: 0;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .coloring-layout {
        grid-template-columns: 1fr;
    }

    .coloring-side {
        order: -1;
    }

    .color-palette {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .color-choice {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        font-size: .75rem;
    }
}

@media (max-width: 620px) {
    .coloring-bar {
        grid-template-columns: 1fr;
    }

    .coloring-title span {
        white-space: normal;
    }

    .color-palette {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .coloring-card,
    .coloring-side {
        padding: 10px;
        border-radius: 22px;
    }

    .coloring-svg-wrap {
        padding: 6px;
    }
}


/* v1.33 active game cleanup + end game actions */
.room-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.room-card-actions form {
    margin: 0;
}

.quick-game-row-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.quick-game-row-actions .quick-game-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.quick-game-row-actions form {
    margin: 0;
}

@media (max-width: 640px) {
    .room-card-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .room-card-actions .btn,
    .room-card-actions form {
        flex: 1 1 auto;
    }

    .room-card-actions form .btn {
        width: 100%;
    }

    .quick-game-row-actions {
        grid-template-columns: 1fr;
    }

    .quick-game-row-actions .quick-game-link {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .quick-game-row-actions .quick-game-link em {
        grid-column: 1 / -1;
    }

    .quick-game-row-actions form .btn {
        width: 100%;
    }
}


/* v1.34 Odd One Out game */
.odd-shell {
    max-width: 1080px;
    margin: 0 auto;
}

.odd-bar {
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.odd-title {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.odd-title strong {
    font-size: 1.18rem;
    line-height: 1.1;
}

.odd-title span {
    font-size: .84rem;
    opacity: .96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odd-actions {
    display: flex;
    gap: 7px;
}

.odd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.odd-main,
.odd-side {
    background: #fff;
    border-radius: 28px;
    padding: 16px;
    box-shadow: 0 18px 42px rgba(27,15,72,.10);
}

.odd-status {
    border-radius: 16px;
    padding: 10px 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.odd-status.status-info { background:#dff7ff; border:1px solid #7dd3fc; color:#0f3f54; }
.odd-status.status-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.odd-status.status-danger { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.odd-status.status-warning { background:#fef3c7; border:1px solid #facc15; color:#713f12; }
.odd-status.status-secondary { background:#f1f5f9; border:1px solid #cbd5e1; color:#334155; }

.odd-question-card {
    background: linear-gradient(135deg,#fff7ed,#fef3c7);
    border: 4px solid #facc15;
    border-radius: 28px;
    padding: 18px;
}

.odd-prompt {
    text-align: center;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    color: #1f1435;
    margin-bottom: 16px;
}

.odd-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.odd-choice {
    min-height: 150px;
    border: 0;
    border-radius: 26px;
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color: #fff;
    display: grid;
    place-items: center;
    gap: 4px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,.18);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.odd-choice span {
    font-size: clamp(48px, 8vw, 96px);
    line-height: 1;
}

.odd-choice strong {
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.odd-choice:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

.odd-choice:disabled {
    opacity: .7;
}

.odd-choice.correct {
    background: linear-gradient(135deg,#22c55e,#15803d);
    box-shadow: 0 0 0 6px rgba(34,197,94,.20), 0 14px 28px rgba(15,23,42,.18);
}

.odd-choice.wrong {
    background: linear-gradient(135deg,#ef4444,#be123c);
    box-shadow: 0 0 0 6px rgba(239,68,68,.20), 0 14px 28px rgba(15,23,42,.18);
}

.odd-player {
    background: #f8fafc;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 8px;
    border: 2px solid transparent;
}

.odd-player.active {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.odd-player strong {
    display: block;
}

.odd-player span {
    color: #6b5d7d;
    font-size: .84rem;
}

@media (max-width: 900px) {
    .odd-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .odd-bar {
        grid-template-columns: 1fr;
    }

    .odd-title span {
        white-space: normal;
    }

    .odd-choices {
        gap: 10px;
    }

    .odd-choice {
        min-height: 120px;
        border-radius: 20px;
    }

    .odd-question-card {
        padding: 12px;
        border-radius: 22px;
    }
}



/* v1.35.1 Road Racer refined game */
.racer-shell {
    max-width: 1160px;
    margin: 0 auto;
}

.racer-bar {
    border-radius: 22px;
    padding: 9px 14px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.racer-title {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.racer-title strong {
    font-size: 1.08rem;
    line-height: 1.05;
}

.racer-title span {
    font-size: .80rem;
    opacity: .96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.racer-actions {
    display: flex;
    gap: 7px;
}

.racer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 12px;
    align-items: start;
}

.racer-main,
.racer-side {
    background: #fff;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 18px 42px rgba(27,15,72,.10);
}

.race-top-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.race-status {
    border-radius: 14px;
    padding: 8px 11px;
    font-weight: 800;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.race-status.status-info { background:#dff7ff; border:1px solid #7dd3fc; color:#0f3f54; }
.race-status.status-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.race-status.status-danger { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.race-status.status-warning { background:#fef3c7; border:1px solid #facc15; color:#713f12; }
.race-status.status-secondary { background:#f1f5f9; border:1px solid #cbd5e1; color:#334155; }

.race-mini-hud {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 6px;
    align-items: center;
}

.race-mini-hud span {
    background: #f8fafc;
    border-radius: 14px;
    padding: 8px 10px;
    font-weight: 900;
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.race-canvas {
    position: relative;
    height: clamp(360px, 50vh, 480px);
    border-radius: 26px;
    overflow: hidden;
    background:
      radial-gradient(circle at 8% 15%, rgba(255,255,255,.12) 0 6%, transparent 7%),
      radial-gradient(circle at 92% 34%, rgba(255,255,255,.10) 0 7%, transparent 8%),
      linear-gradient(90deg, #16a34a 0 11%, #111827 11% 13%, #2f3038 13% 87%, #111827 87% 89%, #16a34a 89% 100%);
    border: 5px solid #111827;
    touch-action: manipulation;
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}

.road-shoulder {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 11%;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 24px, transparent 24px 52px);
    opacity: .65;
    pointer-events: none;
}
.road-shoulder.left { left: 0; }
.road-shoulder.right { right: 0; }

.road-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.road-lines::before,
.road-lines::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    width: 5px;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, #fff 0 34px, transparent 34px 78px);
    opacity: .86;
    animation: roadMove .72s linear infinite;
}

.road-lines::before { left: 37%; }
.road-lines::after { left: 63%; }

@keyframes roadMove {
    from { transform: translateY(-78px); }
    to { transform: translateY(0); }
}

.race-car {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    z-index: 12;
    transition: left .15s ease;
    filter: drop-shadow(0 12px 16px rgba(0,0,0,.38));
}

.race-car span {
    font-size: 54px;
    transform: rotate(-90deg);
    display: block;
}

.race-obstacle {
    position: absolute;
    transform: translateX(-50%);
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 44px;
    z-index: 8;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.30));
}

.race-banner {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) scale(.85);
    z-index: 20;
    background: rgba(255,255,255,.93);
    border: 4px solid #facc15;
    color: #1f1435;
    border-radius: 24px;
    padding: 14px 26px;
    font-size: clamp(1.8rem, 6vw, 4rem);
    font-weight: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 20px 44px rgba(0,0,0,.25);
}

.race-banner.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.race-controls.overlay-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 25;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 10px;
    pointer-events: none;
}

.race-btn {
    border: 0;
    border-radius: 18px;
    padding: 11px 12px;
    background: rgba(255,255,255,.92);
    color: #1f1435;
    font-weight: 1000;
    font-size: 1.25rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    pointer-events: auto;
    min-height: 48px;
}

.race-btn.left,
.race-btn.right {
    background: rgba(245,243,255,.92);
}

.race-btn.start {
    background: linear-gradient(135deg,#facc15,#f97316);
}

.race-btn:disabled {
    opacity: .5;
    filter: grayscale(.8);
}

.racer-side h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.race-player {
    background: #f8fafc;
    border-radius: 16px;
    padding: 9px 10px;
    margin-bottom: 8px;
    border: 2px solid transparent;
}

.race-player.active {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.race-player strong {
    display: block;
}

.race-player span {
    color: #6b5d7d;
    font-size: .82rem;
}

@media (max-width: 1050px) {
    .race-top-strip {
        grid-template-columns: 1fr;
    }
    .race-mini-hud {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .race-mini-hud span {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .racer-layout {
        grid-template-columns: 1fr;
    }

    .race-canvas {
        height: clamp(350px, 54vh, 500px);
    }
}

@media (max-width: 620px) {
    .racer-bar {
        grid-template-columns: 1fr;
        padding: 8px 10px;
    }

    .racer-title span {
        white-space: normal;
    }

    .race-mini-hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .race-canvas {
        min-height: 330px;
        height: 52vh;
        border-radius: 22px;
        border-width: 4px;
    }

    .race-car,
    .race-obstacle {
        width: 56px;
        height: 56px;
    }

    .race-car span,
    .race-obstacle {
        font-size: 40px;
    }

    .race-controls.overlay-controls {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 7px;
    }

    .race-btn {
        min-height: 44px;
        border-radius: 14px;
        padding: 8px;
    }
}


/* v1.35.2 Road Racer balance + car alignment fix */
.race-canvas {
    background:
      radial-gradient(circle at 8% 15%, rgba(255,255,255,.12) 0 6%, transparent 7%),
      radial-gradient(circle at 92% 34%, rgba(255,255,255,.10) 0 7%, transparent 8%),
      linear-gradient(90deg, #16a34a 0 12%, #111827 12% 14%, #3a3b44 14% 86%, #111827 86% 88%, #16a34a 88% 100%);
}

.race-canvas::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    bottom: 0;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.06) 0 32.8%,
        transparent 32.8% 34.2%,
        rgba(255,255,255,.06) 34.2% 65.8%,
        transparent 65.8% 67.2%,
        rgba(255,255,255,.06) 67.2% 100%);
    pointer-events: none;
    z-index: 1;
}

.road-lines {
    z-index: 2;
}

.race-car {
    bottom: 82px;
    width: 64px;
    height: 80px;
    z-index: 15;
    border-radius: 20px 20px 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
    box-shadow: 0 10px 18px rgba(0,0,0,.28);
}

.race-car::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -8px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    filter: blur(3px);
    z-index: -1;
}

.race-car span {
    font-size: 48px;
    transform: rotate(-90deg) translateY(1px);
}

.race-obstacle {
    width: 56px;
    height: 56px;
    font-size: 40px;
    z-index: 12;
}

.race-controls.overlay-controls {
    bottom: 10px;
    z-index: 30;
}

@media (max-width: 620px) {
    .race-car {
        bottom: 76px;
        width: 54px;
        height: 68px;
    }

    .race-car span {
        font-size: 40px;
    }

    .race-obstacle {
        width: 50px;
        height: 50px;
        font-size: 36px;
    }
}


/* v1.35.3 Road Racer larger screen, 2D car, 3-hit gameplay */
.racer-shell {
    max-width: 1360px;
}

.racer-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 10px;
}

.racer-main {
    padding: 10px;
}

.race-status {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    max-width: min(460px, calc(100% - 24px));
    z-index: 40;
    margin: 0;
    font-size: .9rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.16);
}

.race-canvas {
    height: calc(100vh - 205px);
    min-height: 520px;
    border-radius: 26px;
}

.race-hud {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 8px;
}

.race-hud > div {
    padding: 7px 8px;
}

.race-hud strong {
    font-size: 1.08rem;
}

.race-main, .racer-main {
    position: relative;
}

.race-car {
    display: none !important;
}

.race-car-2d {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    width: 54px;
    height: 92px;
    z-index: 18;
    border-radius: 18px 18px 12px 12px;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 52%, #991b1b 100%);
    border: 4px solid #111827;
    box-shadow: 0 12px 22px rgba(0,0,0,.35);
    transition: left .15s ease, transform .12s ease;
}

.race-car-2d::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 18px;
    border-radius: 50% 50% 42% 42%;
    background: #93c5fd;
    border: 3px solid #1e3a8a;
}

.race-car-2d .car-window {
    position: absolute;
    top: 32px;
    left: 10px;
    right: 10px;
    height: 26px;
    border-radius: 10px;
    background: linear-gradient(180deg, #dbeafe, #60a5fa);
    border: 3px solid #1e3a8a;
}

.race-car-2d .car-nose {
    position: absolute;
    left: 14px;
    right: 14px;
    top: -12px;
    height: 24px;
    border-radius: 18px 18px 4px 4px;
    background: #f87171;
    border: 3px solid #111827;
    border-bottom: 0;
}

.race-car-2d .car-wheel {
    position: absolute;
    width: 12px;
    height: 22px;
    border-radius: 999px;
    background: #020617;
    bottom: 12px;
}

.race-car-2d .wheel-left {
    left: -8px;
}

.race-car-2d .wheel-right {
    right: -8px;
}

.race-car-2d.car-hit {
    animation: carHitShake .35s linear 1;
    filter: brightness(1.25);
}

@keyframes carHitShake {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    20% { transform: translateX(calc(-50% - 8px)) translateY(-2px); }
    40% { transform: translateX(calc(-50% + 8px)) translateY(2px); }
    60% { transform: translateX(calc(-50% - 6px)) translateY(0); }
    80% { transform: translateX(calc(-50% + 6px)) translateY(-2px); }
}

.race-obstacle.hit {
    transform: translateX(-50%) scale(1.2);
    opacity: .25;
}

.race-banner {
    display: none !important;
}

.race-controls.overlay-controls {
    bottom: 12px;
}

@media (max-width: 1050px) {
    .racer-layout {
        grid-template-columns: 1fr;
    }

    .race-canvas {
        height: calc(100vh - 245px);
        min-height: 480px;
    }
}

@media (max-width: 620px) {
    .race-canvas {
        height: calc(100vh - 275px);
        min-height: 430px;
    }

    .race-hud {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .race-status {
        font-size: .78rem;
        padding: 7px 9px;
    }

    .race-car-2d {
        width: 46px;
        height: 76px;
        bottom: 74px;
    }

    .race-car-2d .car-window {
        top: 28px;
        height: 20px;
    }

    .race-car-2d .car-nose {
        top: -10px;
        height: 20px;
    }
}


/* v1.35.4 Road Racer play button fix */
.race-btn.start:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .28);
}


/* v1.35.5 Road Racer HUD null/missing element fix */
.race-hud {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 620px) {
    .race-hud {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* v1.36 Maze Runner */
.maze-shell {
    max-width: 1240px;
    margin: 0 auto;
}

.maze-bar {
    border-radius: 22px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(57,24,98,.12);
}

.maze-title {
    color: #fff;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.maze-title strong {
    font-size: 1.18rem;
    line-height: 1.1;
}

.maze-title span {
    font-size: .84rem;
    opacity: .96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maze-actions {
    display: flex;
    gap: 7px;
}

.maze-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.maze-main,
.maze-side {
    background: #fff;
    border-radius: 28px;
    padding: 14px;
    box-shadow: 0 18px 42px rgba(27,15,72,.10);
}

.maze-status {
    border-radius: 16px;
    padding: 9px 12px;
    font-weight: 800;
    margin-bottom: 10px;
}

.maze-status.status-info { background:#dff7ff; border:1px solid #7dd3fc; color:#0f3f54; }
.maze-status.status-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.maze-status.status-danger { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.maze-status.status-warning { background:#fef3c7; border:1px solid #facc15; color:#713f12; }

.maze-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.maze-hud > div {
    background: #f8fafc;
    border-radius: 16px;
    padding: 8px 10px;
    text-align: center;
}

.maze-hud strong {
    display: block;
    font-size: 1.15rem;
}

.maze-hud span {
    display: block;
    font-size: .75rem;
    color: #6b5d7d;
    font-weight: 800;
}

.maze-board-wrap {
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
    border: 4px solid #7c3aed;
    border-radius: 24px;
    padding: 10px;
    overflow: auto;
}

.maze-board {
    display: grid;
    grid-template-columns: repeat(var(--maze-size), minmax(0, 1fr));
    width: min(72vh, 760px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #fff;
    border: 3px solid #111827;
    touch-action: none;
}

.maze-cell {
    position: relative;
    border-style: solid;
    border-color: #111827;
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.maze-cell.start {
    background: #dcfce7;
}

.maze-cell.finish {
    background: #fef3c7;
}

.maze-cell small {
    position: absolute;
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(5px, 1vw, 11px);
    font-weight: 900;
    color: rgba(15,23,42,.55);
    pointer-events: none;
}

.maze-player-token {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(13px, 2vw, 28px);
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 8px 18px rgba(124,58,237,.35);
    z-index: 3;
}

.maze-controls {
    margin: 12px auto 0;
    max-width: 260px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.maze-btn {
    border: 0;
    border-radius: 16px;
    min-height: 54px;
    background: #f5f3ff;
    color: #1f1435;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 10px 22px rgba(57,24,98,.10);
}

.maze-btn.center {
    background: linear-gradient(135deg,#7c3aed,#ec4899);
    color: #fff;
}

.maze-btn.ghost {
    visibility: hidden;
}

.maze-player-card {
    background: #f8fafc;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 8px;
    border: 2px solid transparent;
}

.maze-player-card.finished {
    border-color: #22c55e;
    background: #ecfdf5;
}

.maze-player-card strong {
    display: block;
}

.maze-player-card span {
    color: #6b5d7d;
    font-size: .84rem;
}

@media (max-width: 900px) {
    .maze-layout {
        grid-template-columns: 1fr;
    }

    .maze-board {
        width: min(88vw, 760px);
    }
}

@media (max-width: 620px) {
    .maze-bar {
        grid-template-columns: 1fr;
    }

    .maze-title span {
        white-space: normal;
    }

    .maze-main,
    .maze-side {
        padding: 10px;
        border-radius: 22px;
    }

    .maze-board-wrap {
        padding: 6px;
    }

    .maze-controls {
        max-width: 230px;
    }

    .maze-btn {
        min-height: 48px;
    }
}


/* v1.36.1 Maze Runner visual/touch refinement */
.maze-board {
    background: #f8fafc;
    border: 5px solid #111827;
    gap: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

.maze-cell {
    box-sizing: border-box;
    border-color: transparent;
    background: #fefefe;
}

.maze-cell:nth-child(odd) {
    background: #fcfcff;
}

.maze-cell.start {
    background: #dcfce7;
}

.maze-cell.finish {
    background: #fef3c7;
}

.maze-player-token {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.maze-board:active .maze-player-token {
    cursor: grabbing;
}

.maze-controls,
.maze-btn {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.maze-btn {
    -webkit-tap-highlight-color: transparent;
}

.maze-btn:focus {
    outline: 3px solid rgba(124,58,237,.28);
    outline-offset: 2px;
}