/* =============================================================
   Kids Shape Games — kids-shape-games.css
   Self-contained IIFE page — ksg- prefix throughout
   ============================================================= */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --ksg-purple:    #6c2bd9;
    --ksg-purple-d:  #4a1d96;
    --ksg-purple-l:  #f5f0ff;
    --ksg-purple-m:  #ede9ff;
    --ksg-blue:      #3b82f6;
    --ksg-teal:      #0ea5e9;
    --ksg-green:     #22c55e;
    --ksg-green-l:   #dcfce7;
    --ksg-red:       #ef4444;
    --ksg-red-l:     #fee2e2;
    --ksg-orange:    #f97316;
    --ksg-yellow:    #fbbf24;
    --ksg-yellow-l:  #fef9c3;
    --ksg-pink:      #ec4899;
    --ksg-white:     #ffffff;
    --ksg-g50:       #fafafa;
    --ksg-g100:      #f4f4f5;
    --ksg-g200:      #e4e4e7;
    --ksg-g300:      #d4d4d8;
    --ksg-g400:      #a1a1aa;
    --ksg-g500:      #71717a;
    --ksg-g700:      #3f3f46;
    --ksg-g800:      #27272a;
    --ksg-shadow:    0 2px 12px rgba(108,43,217,.12);
    --ksg-shadow-lg: 0 6px 28px rgba(108,43,217,.18);
    --ksg-radius:    16px;
    --ksg-font:      'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ksg-font);
    background: var(--ksg-purple-l);
    color: var(--ksg-g800);
    min-height: 100vh;
}

/* ── PAGE HEADER ──────────────────────────────────────────── */
.ksg-header {
    background: linear-gradient(135deg, var(--ksg-purple-d) 0%, var(--ksg-purple) 60%, #8b5cf6 100%);
    color: #fff;
    text-align: center;
    padding: 1.5rem 1rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.ksg-header::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Crect x='10' y='10' width='14' height='14' rx='2'/%3E%3Cpolygon points='50,10 58,26 42,26'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.ksg-header-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    background: rgba(0,0,0,.2);
    border-radius: 20px;
    padding: .3rem .85rem;
    margin-bottom: .85rem;
    transition: background .15s;
    position: relative;
}
.ksg-header-back:hover { background: rgba(0,0,0,.35); color: #fff; }

.ksg-header h1 {
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
    position: relative;
}

.ksg-header-sub {
    font-size: .9rem;
    opacity: .88;
    position: relative;
}

/* ── BREADCRUMB ────────────────────────────────────────────── */
.ksg-breadcrumb {
    font-size: .78rem;
    color: var(--ksg-g500);
    padding: .55rem 1.25rem;
    border-bottom: 1px solid var(--ksg-g200);
    background: var(--ksg-white);
}
.ksg-breadcrumb a { color: var(--ksg-purple); text-decoration: none; font-weight: 600; }
.ksg-breadcrumb a:hover { text-decoration: underline; }

/* ── MAIN CONTAINER ───────────────────────────────────────── */
.ksg-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ── SCORE / CONTROLS BAR ─────────────────────────────────── */
.ksg-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
    background: var(--ksg-white);
    border-radius: var(--ksg-radius);
    padding: .75rem 1rem;
    box-shadow: var(--ksg-shadow);
    border: 1.5px solid var(--ksg-purple-m);
}

.ksg-score {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--ksg-purple);
}
.ksg-score-num { font-size: 1.25rem; }

.ksg-ctrl-right { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.ksg-sound-btn, .ksg-share-btn, .ksg-home-btn, .ksg-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--ksg-purple-m);
    border: 1.5px solid var(--ksg-purple);
    border-radius: 30px;
    padding: .45rem .9rem;
    font-size: .8rem;
    font-weight: 800;
    color: var(--ksg-purple);
    cursor: pointer;
    font-family: var(--ksg-font);
    transition: background .15s, color .15s;
}
.ksg-sound-btn:hover, .ksg-share-btn:hover, .ksg-home-btn:hover, .ksg-fs-btn:hover {
    background: var(--ksg-purple);
    color: #fff;
}

/* Fullscreen active state */
.ksg-fs-btn[aria-pressed="true"] {
    background: var(--ksg-purple);
    color: #fff;
    border-color: var(--ksg-purple-d);
}

/* Fullscreen — only #ksg-main fills the viewport */
#ksg-main:fullscreen,
#ksg-main:-webkit-full-screen,
#ksg-main:-moz-full-screen {
    background: var(--ksg-purple-l);
    max-width: 100%;
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    box-sizing: border-box;
}
#ksg-main:fullscreen .ksg-game,
#ksg-main:-webkit-full-screen .ksg-game,
#ksg-main:-moz-full-screen .ksg-game {
    min-height: 55vh;
}
#ksg-main:fullscreen .ksg-controls,
#ksg-main:-webkit-full-screen .ksg-controls,
#ksg-main:-moz-full-screen .ksg-controls {
    margin-top: .25rem;
}

/* ── GAME TABS ────────────────────────────────────────────── */
.ksg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.ksg-tab {
    flex: 1;
    min-width: 100px;
    padding: .6rem .5rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 800;
    border: 1.5px solid var(--ksg-g200);
    background: var(--ksg-white);
    color: var(--ksg-g500);
    cursor: pointer;
    font-family: var(--ksg-font);
    text-align: center;
    transition: all .15s;
}
.ksg-tab:hover { border-color: var(--ksg-purple); color: var(--ksg-purple); }
.ksg-tab.active {
    background: var(--ksg-purple);
    color: #fff;
    border-color: var(--ksg-purple);
    box-shadow: 0 3px 12px rgba(108,43,217,.3);
}

/* ── GAME AREA ────────────────────────────────────────────── */
.ksg-game {
    background: var(--ksg-white);
    border-radius: 20px;
    box-shadow: var(--ksg-shadow-lg);
    border: 1.5px solid var(--ksg-purple-m);
    padding: 1.75rem 1.5rem;
    min-height: 380px;
    position: relative;
}

/* ─────────────────────────────────────────────────────────
   HUB — Game card grid
───────────────────────────────────────────────────────── */
.ksg-hub-intro {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ksg-hub-intro h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ksg-purple-d);
    margin-bottom: .35rem;
}
.ksg-hub-intro p {
    font-size: .9rem;
    color: var(--ksg-g500);
}

.ksg-hub-spin {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, var(--ksg-orange), #fb923c);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: .8rem 1.75rem;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    font-family: var(--ksg-font);
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 16px rgba(249,115,22,.35);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
}
.ksg-hub-spin:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(249,115,22,.5); }

.ksg-game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.ksg-game-card {
    background: var(--ksg-g50);
    border: 1.5px solid var(--ksg-g200);
    border-radius: 16px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ksg-game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ksg-shadow-lg);
    border-color: var(--ksg-purple);
}
.ksg-game-card:active { transform: scale(.97); }

.ksg-gc-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .6rem;
    line-height: 1;
}
.ksg-gc-title {
    font-size: .95rem;
    font-weight: 900;
    color: var(--ksg-g800);
    margin-bottom: .3rem;
}
.ksg-gc-desc {
    font-size: .78rem;
    color: var(--ksg-g500);
    line-height: 1.4;
    margin-bottom: .75rem;
}
.ksg-gc-play {
    display: inline-block;
    background: var(--ksg-purple);
    color: #fff;
    border-radius: 20px;
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 800;
    transition: background .15s;
}
.ksg-game-card:hover .ksg-gc-play { background: var(--ksg-purple-d); }

/* ─────────────────────────────────────────────────────────
   SHARED SHAPE SVG DISPLAY
───────────────────────────────────────────────────────── */
.ksg-shape-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ksg-shape-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.15));
    border-radius: 20px;
    cursor: pointer;
    transition: transform .2s;
    line-height: 0; /* prevent inline gap around SVG */
}
.ksg-shape-svg:hover { transform: scale(1.04); }
.ksg-shape-svg svg   { display: block; }

.ksg-shape-name {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ksg-purple-d);
    text-align: center;
    letter-spacing: -.01em;
}

.ksg-shape-desc {
    font-size: .95rem;
    color: var(--ksg-g700);
    text-align: center;
    line-height: 1.6;
    max-width: 380px;
}

.ksg-shape-fact {
    background: var(--ksg-yellow-l);
    border-left: 4px solid var(--ksg-yellow);
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .85rem;
    color: var(--ksg-g700);
    line-height: 1.55;
    max-width: 420px;
    width: 100%;
    text-align: left;
}
.ksg-shape-fact strong { color: var(--ksg-g800); }

.ksg-shape-props {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}
.ksg-prop-pill {
    background: var(--ksg-purple-m);
    color: var(--ksg-purple);
    border-radius: 20px;
    padding: .25rem .75rem;
    font-size: .78rem;
    font-weight: 800;
}

.ksg-examples {
    font-size: .82rem;
    color: var(--ksg-g500);
    text-align: center;
}
.ksg-examples strong { color: var(--ksg-g700); font-weight: 800; }

/* ─────────────────────────────────────────────────────────
   LEARN MODE
───────────────────────────────────────────────────────── */
.ksg-learn-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.ksg-hear-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--ksg-teal);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: .6rem 1.25rem;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    font-family: var(--ksg-font);
    transition: background .15s, transform .1s;
    box-shadow: 0 3px 10px rgba(14,165,233,.35);
}
.ksg-hear-btn:hover { background: #0284c7; transform: scale(1.04); }
.ksg-hear-btn:active { transform: scale(.97); }

.ksg-nav-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ksg-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--ksg-white);
    border: 2px solid var(--ksg-purple);
    border-radius: 30px;
    padding: .7rem 1.4rem;
    font-size: .9rem;
    font-weight: 900;
    color: var(--ksg-purple);
    cursor: pointer;
    font-family: var(--ksg-font);
    transition: all .15s;
}
.ksg-nav-btn:hover { background: var(--ksg-purple); color: #fff; }
.ksg-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

.ksg-learn-dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.ksg-ldot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ksg-g300);
    cursor: pointer;
    transition: all .15s;
    background: var(--ksg-g200);
}
.ksg-ldot.active {
    transform: scale(1.3);
    border-color: var(--ksg-purple);
    background: var(--ksg-purple);
}

/* ─────────────────────────────────────────────────────────
   GUESS THE SHAPE / SHAPES AROUND US
───────────────────────────────────────────────────────── */
.ksg-q-header {
    text-align: center;
    margin-bottom: 1.25rem;
}
.ksg-q-prompt {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ksg-g800);
    margin-bottom: .25rem;
}
.ksg-q-sub {
    font-size: .82rem;
    color: var(--ksg-g500);
}

.ksg-q-progress {
    background: var(--ksg-g200);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.ksg-q-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ksg-purple), var(--ksg-pink));
    border-radius: 10px;
    transition: width .4s ease;
}

.ksg-choices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    max-width: 520px;
    margin: 0 auto;
}

.ksg-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem .75rem;
    background: var(--ksg-g50);
    border: 2.5px solid var(--ksg-g200);
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--ksg-font);
    font-size: .9rem;
    font-weight: 800;
    color: var(--ksg-g800);
    transition: all .15s;
    min-height: 90px;
    text-align: center;
}
.ksg-choice:hover:not(:disabled) {
    border-color: var(--ksg-purple);
    background: var(--ksg-purple-l);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(108,43,217,.18);
}
.ksg-choice:active:not(:disabled) { transform: scale(.97); }
.ksg-choice.correct {
    border-color: var(--ksg-green);
    background: var(--ksg-green-l);
    color: #166534;
}
.ksg-choice.wrong {
    border-color: var(--ksg-red);
    background: var(--ksg-red-l);
    color: #991b1b;
}
.ksg-choice:disabled { cursor: not-allowed; }

/* Around Us — object display */
.ksg-object-display {
    text-align: center;
    margin-bottom: 1.25rem;
}
.ksg-object-emoji {
    font-size: 5rem;
    display: block;
    margin-bottom: .5rem;
    line-height: 1;
    animation: ksg-bounce .6s ease;
}
.ksg-object-name {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ksg-g800);
    margin-bottom: .25rem;
}
.ksg-object-hint {
    font-size: .82rem;
    color: var(--ksg-g500);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────
   FIND THE SHAPE
───────────────────────────────────────────────────────── */
.ksg-find-header {
    text-align: center;
    margin-bottom: 1.25rem;
}
.ksg-find-target {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ksg-purple-d);
    background: var(--ksg-purple-m);
    border-radius: 12px;
    padding: .6rem 1.25rem;
    display: inline-block;
    margin-bottom: .5rem;
}
.ksg-find-target span { font-size: 1.4rem; }

.ksg-find-diff {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.ksg-diff-btn {
    padding: .35rem .85rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 800;
    border: 1.5px solid var(--ksg-g200);
    background: var(--ksg-g100);
    color: var(--ksg-g500);
    cursor: pointer;
    font-family: var(--ksg-font);
    transition: all .15s;
}
.ksg-diff-btn.active { background: var(--ksg-purple); color: #fff; border-color: var(--ksg-purple); }

.ksg-find-arena {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
}

.ksg-find-shape {
    cursor: pointer;
    border-radius: 14px;
    padding: .5rem;
    border: 3px solid transparent;
    transition: all .2s;
    background: var(--ksg-g50);
}
.ksg-find-shape:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.ksg-find-shape.correct-pick { border-color: var(--ksg-green); background: var(--ksg-green-l); }
.ksg-find-shape.wrong-pick   { border-color: var(--ksg-red);   background: var(--ksg-red-l); animation: ksg-shake .35s ease; }

/* ─────────────────────────────────────────────────────────
   SHAPE MATCHING (shape ↔ name pairing)
───────────────────────────────────────────────────────── */
.ksg-match-instructions {
    text-align: center;
    font-size: .85rem;
    color: var(--ksg-g500);
    margin-bottom: 1.25rem;
}

.ksg-match-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 560px;
    margin: 0 auto;
}

.ksg-match-col-head {
    font-size: .78rem;
    font-weight: 900;
    color: var(--ksg-g500);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    margin-bottom: .6rem;
}

.ksg-match-col { display: flex; flex-direction: column; gap: .6rem; }

.ksg-match-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem;
    background: var(--ksg-g50);
    border: 2.5px solid var(--ksg-g200);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--ksg-font);
    font-weight: 800;
    font-size: .88rem;
    color: var(--ksg-g800);
    transition: all .18s;
    min-height: 56px;
    text-align: center;
}
.ksg-match-item:hover:not(.matched):not(.selected) {
    border-color: var(--ksg-purple);
    background: var(--ksg-purple-l);
}
.ksg-match-item.selected {
    border-color: var(--ksg-purple);
    background: var(--ksg-purple-m);
    box-shadow: 0 0 0 3px rgba(108,43,217,.2);
}
.ksg-match-item.matched {
    border-color: var(--ksg-green);
    background: var(--ksg-green-l);
    color: #166534;
    cursor: default;
}
.ksg-match-item.wrong-match {
    animation: ksg-shake .35s ease;
    border-color: var(--ksg-red);
    background: var(--ksg-red-l);
}

/* ─────────────────────────────────────────────────────────
   MEMORY GAME
───────────────────────────────────────────────────────── */
.ksg-mem-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.ksg-mem-stats {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.ksg-mem-stat {
    background: var(--ksg-purple-m);
    border-radius: 20px;
    padding: .3rem .75rem;
    font-size: .78rem;
    font-weight: 800;
    color: var(--ksg-purple);
}

.ksg-memory-grid {
    display: grid;
    gap: .65rem;
    justify-content: center;
}
.ksg-memory-grid.easy   { grid-template-columns: repeat(3, 1fr); max-width: 320px; margin: 0 auto; }
.ksg-memory-grid.medium { grid-template-columns: repeat(4, 1fr); max-width: 400px; margin: 0 auto; }
.ksg-memory-grid.hard   { grid-template-columns: repeat(4, 1fr); max-width: 440px; margin: 0 auto; }

.ksg-mem-card {
    aspect-ratio: 1;
    perspective: 600px;
    cursor: pointer;
}
.ksg-mem-card-inner {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    border-radius: 12px;
}
.ksg-mem-card.flipped .ksg-mem-card-inner,
.ksg-mem-card.matched .ksg-mem-card-inner {
    transform: rotateY(180deg);
}

.ksg-mem-front, .ksg-mem-back {
    position: absolute; inset: 0;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ksg-mem-front {
    background: linear-gradient(135deg, var(--ksg-purple-d), var(--ksg-purple));
    font-size: 2rem;
    color: rgba(255,255,255,.6);
    border: 2px solid var(--ksg-purple-d);
    box-shadow: 0 3px 12px rgba(108,43,217,.25);
}
.ksg-mem-front:hover { box-shadow: 0 5px 18px rgba(108,43,217,.4); }
.ksg-mem-back {
    transform: rotateY(180deg);
    background: var(--ksg-white);
    border: 2px solid var(--ksg-g200);
    padding: .4rem;
}
.ksg-mem-card.matched .ksg-mem-back {
    border-color: var(--ksg-green);
    background: var(--ksg-green-l);
}

/* ─────────────────────────────────────────────────────────
   QUIZ
───────────────────────────────────────────────────────── */
.ksg-quiz-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ksg-g500);
}

.ksg-quiz-q {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--ksg-g800);
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   RESULT / COMPLETION OVERLAY
───────────────────────────────────────────────────────── */
.ksg-result {
    text-align: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.ksg-result-emoji { font-size: 4rem; animation: ksg-bounce .8s ease; }
.ksg-result-title { font-size: 1.75rem; font-weight: 900; color: var(--ksg-purple-d); }
.ksg-result-sub   { font-size: .95rem; color: var(--ksg-g500); }
.ksg-result-score { font-size: 1.5rem; font-weight: 900; color: var(--ksg-g800); }
.ksg-result-stars { font-size: 1.75rem; letter-spacing: .1em; }
.ksg-result-badge {
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: .6rem 1.25rem;
    font-size: .88rem;
    font-weight: 900;
    color: #92400e;
}
.ksg-result-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* ─────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────── */
.ksg-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.5rem;
    border-radius: 30px;
    font-size: .9rem;
    font-weight: 900;
    cursor: pointer;
    font-family: var(--ksg-font);
    border: none;
    transition: all .15s;
    text-decoration: none;
}
.ksg-btn-primary {
    background: linear-gradient(135deg, var(--ksg-purple), #7c3aed);
    color: #fff;
    box-shadow: 0 4px 14px rgba(108,43,217,.35);
}
.ksg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,43,217,.5); }

.ksg-btn-secondary {
    background: var(--ksg-purple-m);
    color: var(--ksg-purple);
    border: 1.5px solid var(--ksg-purple);
}
.ksg-btn-secondary:hover { background: var(--ksg-purple); color: #fff; }

.ksg-btn-ghost {
    background: var(--ksg-g100);
    color: var(--ksg-g700);
    border: 1.5px solid var(--ksg-g200);
}
.ksg-btn-ghost:hover { background: var(--ksg-g200); }

.ksg-btn-green {
    background: linear-gradient(135deg, var(--ksg-green), #16a34a);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34,197,94,.35);
}
.ksg-btn-green:hover { transform: translateY(-2px); }

.ksg-center { text-align: center; margin-top: 1.25rem; }

/* ─────────────────────────────────────────────────────────
   FEEDBACK TOAST
───────────────────────────────────────────────────────── */
.ksg-feedback {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: .7rem 1.5rem;
    border-radius: 30px;
    font-size: .95rem;
    font-weight: 900;
    z-index: 9999;
    pointer-events: none;
    animation: ksg-toast-in .3s ease, ksg-toast-out .3s ease 1.1s forwards;
    white-space: nowrap;
}
.ksg-feedback.good { background: var(--ksg-green); color: #fff; }
.ksg-feedback.bad  { background: var(--ksg-red);   color: #fff; }
.ksg-feedback.info { background: var(--ksg-purple); color: #fff; }

/* ─────────────────────────────────────────────────────────
   STREAK BADGE
───────────────────────────────────────────────────────── */
.ksg-streak {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(135deg, #fff7e0, #fde68a);
    border: 1.5px solid #fbbf24;
    border-radius: 20px;
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 900;
    color: #92400e;
}

/* ─────────────────────────────────────────────────────────
   DIFFICULTY BUTTONS (memory, find)
───────────────────────────────────────────────────────── */
.ksg-diff-row {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ─────────────────────────────────────────────────────────
   SEO / EDUCATIONAL CONTENT SECTIONS
───────────────────────────────────────────────────────── */
.ksg-section {
    max-width: 980px;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
}

.ksg-section-head {
    margin-bottom: 1.5rem;
}
.ksg-section-tag {
    display: inline-block;
    background: var(--ksg-purple-m);
    color: var(--ksg-purple);
    border-radius: 20px;
    padding: .25rem .85rem;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .05em;
    margin-bottom: .6rem;
    text-transform: uppercase;
}
.ksg-section h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ksg-g800);
    margin-bottom: .5rem;
}
.ksg-section p {
    font-size: .9rem;
    color: var(--ksg-g500);
    line-height: 1.7;
}

.ksg-divider {
    border: none;
    border-top: 1.5px solid var(--ksg-g200);
    margin: 2.5rem auto;
    max-width: 980px;
    padding: 0 1rem;
}

/* Shape reference cards */
.ksg-shape-refs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}
.ksg-shape-ref-card {
    background: var(--ksg-white);
    border: 1.5px solid var(--ksg-g200);
    border-radius: 14px;
    padding: 1rem .75rem;
    text-align: center;
    transition: all .2s;
}
.ksg-shape-ref-card:hover { transform: translateY(-3px); box-shadow: var(--ksg-shadow); border-color: var(--ksg-purple-m); }
.ksg-ref-svg { display: block; margin: 0 auto .6rem; }
.ksg-ref-name { font-size: .88rem; font-weight: 900; color: var(--ksg-g800); margin-bottom: .2rem; }
.ksg-ref-sides { font-size: .75rem; color: var(--ksg-g500); }

/* FAQ */
.ksg-faq { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.ksg-faq-item {
    background: var(--ksg-white);
    border: 1.5px solid var(--ksg-g200);
    border-radius: 12px;
    overflow: hidden;
    transition: border .2s;
}
.ksg-faq-item.open { border-color: var(--ksg-purple-m); }
.ksg-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 1.1rem;
    cursor: pointer;
    font-weight: 800;
    font-size: .88rem;
    color: var(--ksg-g800);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--ksg-font);
    gap: .5rem;
}
.ksg-faq-q svg { flex-shrink: 0; color: var(--ksg-g400); transition: transform .25s; }
.ksg-faq-item.open .ksg-faq-q svg { transform: rotate(180deg); color: var(--ksg-purple); }
.ksg-faq-a {
    display: none;
    padding: 0 1.1rem .9rem;
    font-size: .83rem;
    color: var(--ksg-g500);
    line-height: 1.7;
}
.ksg-faq-item.open .ksg-faq-a { display: block; }

/* Related games */
.ksg-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}
.ksg-related-card {
    background: var(--ksg-white);
    border: 1.5px solid var(--ksg-g200);
    border-radius: 14px;
    padding: 1rem .75rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    display: block;
}
.ksg-related-card:hover { transform: translateY(-3px); box-shadow: var(--ksg-shadow); border-color: var(--ksg-purple-m); }
.ksg-related-icon { font-size: 2rem; display: block; margin-bottom: .4rem; }
.ksg-related-name { font-size: .82rem; font-weight: 800; color: var(--ksg-g800); }

/* Footer */
.ksg-footer {
    max-width: 980px;
    margin: 3rem auto 0;
    padding: 1.5rem 1rem;
    border-top: 1.5px solid var(--ksg-g200);
    text-align: center;
    font-size: .8rem;
    color: var(--ksg-g400);
}
.ksg-footer a { color: var(--ksg-purple); text-decoration: none; font-weight: 700; }
.ksg-footer a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────── */
@keyframes ksg-bounce {
    0%,100% { transform: translateY(0); }
    40%      { transform: translateY(-10px); }
}

@keyframes ksg-pop {
    0%   { transform: scale(.85); opacity: 0; }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes ksg-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-6px); }
    75%     { transform: translateX(6px); }
}

@keyframes ksg-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ksg-toast-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes ksg-star-pop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.ksg-animate-pop  { animation: ksg-pop .35s cubic-bezier(.18,.89,.32,1.28); }
.ksg-animate-in   { animation: ksg-pop .28s ease; }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ksg-game { padding: 1.25rem 1rem; }
    .ksg-tabs  { gap: .3rem; }
    .ksg-tab   { font-size: .72rem; padding: .5rem .35rem; min-width: 80px; }
    .ksg-choices { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .ksg-choice { min-height: 80px; font-size: .82rem; }
    .ksg-match-area { gap: .75rem; }
    .ksg-memory-grid.medium { grid-template-columns: repeat(3, 1fr); }
    .ksg-shape-refs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ksg-game-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
    .ksg-header h1 { font-size: 1.35rem; }
    .ksg-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
    .ksg-tab  { min-width: auto; font-size: .68rem; padding: .45rem .25rem; }
    .ksg-choices { grid-template-columns: 1fr 1fr; }
    .ksg-match-area { grid-template-columns: 1fr 1fr; }
    .ksg-memory-grid.hard   { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
    .ksg-memory-grid.medium { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
    .ksg-game-cards { grid-template-columns: repeat(2, 1fr); }
    .ksg-find-arena { gap: .75rem; }
    .ksg-object-emoji { font-size: 3.5rem; }
}

/* ─────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .ksg-mem-card-inner { transition: none; }
}