/* =======================================================
   GANESHA RIDDLE QUIZ — DISNEY-PIXAR INDIAN TEMPLE THEME
   Style by: Senior UI/UX + Frontend
   ======================================================= */

/* ===================== DESIGN TOKENS ===================== */
:root {
    /* ----- Stone Palette ----- */
    --stone-primary: #E8D2AE;
    /* Warm sandstone – main panel surface */
    --stone-light: #F8F1E5;
    /* Soft ivory – inner card surface      */
    --stone-dark: #C8A87A;
    /* Dark sandstone – shadows / locked    */
    --stone-deeper: #B8966A;
    /* Deeply-shadowed stone                */

    /* ----- Accent Colors ----- */
    --gold: #D4A017;
    /* Temple gold                          */
    --gold-light: #F0C84A;
    /* Bright gold – hover glows            */
    --gold-dark: #9E7510;
    /* Muted gold – borders                 */
    --terracotta: #C97B4A;
    /* Clay / wrong-answer                  */
    --warm-brown: #6E4D32;
    /* Carved wood – buttons                */
    --warm-brown-dark: #4A3525;
    /* Very dark brown – text               */
    --green-soft: #6DBF8A;
    /* Gentle correct-answer green          */
    --green-bg: #D6EFD8;
    /* Correct-answer tile background       */
    --red-bg: #F5DBCF;
    /* Wrong-answer tile background         */

    /* ----- Text ----- */
    --text-color: #4A3525;
    /* Warm dark brown – body text          */
    --text-muted: #8B6844;
    /* Muted brown – labels                 */
    --text-gold: #9E7510;
    /* Gold text                            */

    /* ----- Fonts ----- */
    --font-primary: 'Outfit', sans-serif;
    --font-display: 'Poppins', sans-serif;
    --font-gameplay: 'Cinzel', serif;

    /* ----- Shadows ----- */
    --shadow-panel: 0 8px 24px rgba(90, 60, 25, 0.14);
    --shadow-lift: 0 14px 32px rgba(90, 60, 25, 0.20);
    --shadow-inset: inset 0 3px 8px rgba(90, 60, 25, 0.15);
    --shadow-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 0 rgba(90, 60, 25, 0.18);

    /* ----- Transitions ----- */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy compatibility aliases */
    --color-orange: var(--terracotta);
    --color-gold: var(--gold);
    --color-purple-light: var(--gold-light);
    --color-purple-dark: var(--warm-brown-dark);
    --color-success: var(--green-soft);
    --color-danger: var(--terracotta);
    --color-text: var(--text-color);
    --color-text-muted: var(--text-muted);
    --glass-bg: var(--stone-primary);
    --glass-border: var(--gold-dark);
    --glass-shadow: var(--shadow-panel);
    --glass-glow: 0 0 20px rgba(212, 160, 23, 0.30);
}


/* ===================== RESET & BASE ===================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-primary);
    background: #A0724E;
    /* Warm terracotta fallback behind screen BGs  */
    color: var(--text-color);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ----- Heading defaults ----- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-color);
}


/* ===================== BACKGROUND LAYER ===================== */
/* Warm radial gradients – replace old purple glows */
.bg-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(212, 160, 23, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(201, 123, 74, 0.10) 0%, transparent 45%);
    z-index: 0;
    pointer-events: none;
}

/* Floating golden dust particles */
.bg-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: rgba(212, 160, 23, 0.45);
    border-radius: 50%;
    pointer-events: none;
    animation: floatUp 15s linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(105vh) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(-5vh) translateX(50px) scale(0.5);
        opacity: 0;
    }
}


/* ===================== GLASS OVERRIDES (Now = Stone Panel) ===================== */
/* The HTML uses class="card glass" & class="option-card glass" —
   we redirect .glass to the stone-panel material */
.glass {
    background: var(--stone-primary);
    border: 2px solid var(--gold-dark);
    outline: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    box-shadow: var(--shadow-panel), var(--shadow-bevel);
    transition: var(--transition-smooth);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Override hover for generic .glass */
.glass:hover {
    border-color: var(--gold);
}


/* ===================== BUTTONS ===================== */
/* Carved wooden temple button base */
.btn {
    font-family: var(--font-primary);
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
}

/* Primary – warm brown carved wood */
.btn-primary {
    background: linear-gradient(160deg, #8C6240 0%, var(--warm-brown) 50%, var(--warm-brown-dark) 100%);
    color: var(--stone-light);
    box-shadow:
        0 6px 18px rgba(90, 60, 25, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18);
    border: 2px solid var(--gold);
    padding: 1.8cqh 4.5cqw;
    font-size: 2cqmin;
}

.btn-primary:hover {
    transform: translateY(-0.3cqh) scale(1.02);
    box-shadow: 0 10px 26px rgba(90, 60, 25, 0.32), 0 0 0 2px var(--gold-light);
    background: linear-gradient(160deg, #9E7040 0%, #7E5838 100%);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Secondary – ivory stone button */
.btn-secondary {
    background: linear-gradient(160deg, var(--stone-light) 0%, var(--stone-primary) 100%);
    color: var(--warm-brown);
    border: 2px solid var(--gold-dark);
    box-shadow: var(--shadow-panel), var(--shadow-bevel);
    padding: 1.2cqh 2.5cqw;
    font-size: 1.5cqmin;
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--stone-primary) 0%, var(--stone-dark) 100%);
    border-color: var(--gold);
    box-shadow: var(--shadow-lift), 0 0 14px rgba(212, 160, 23, 0.25);
    transform: translateY(-0.2cqh);
    color: var(--warm-brown-dark);
}

.btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-sm {
    padding: 1cqh 2cqw;
    font-size: 1.5cqmin;
    border-radius: 10px;
}

.btn-pulse {
    animation: btnPulse 2s infinite;
}

/* Start-game image button */
#btn-start {
    margin-top: 54cqh;
    cursor: pointer;
    max-width: 28.8cqw;
    width: 100%;
    height: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 4px 12px rgba(90, 60, 25, 0.35));
}

#btn-start:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 18px rgba(212, 160, 23, 0.70));
}

#btn-start:active {
    transform: scale(0.95);
}

@keyframes btnPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.40));
    }

    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 14px rgba(212, 160, 23, 0.80));
    }
}


/* ===================== SCREEN STRUCTURE ===================== */
.screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
}


.screen.hidden {
    display: none !important;
}

#start-screen {
    background: url('./assets/start game bg.webp') no-repeat center center / cover;
}

#game-screen {
    background: url('./assets/gamescreen.webp') no-repeat center center / cover;
}

#congrats-screen {
    background: url('./assets/congratulation bg.webp') no-repeat center center / cover;
}

/* Responsive scaling container */
.start-content,
.game-wrapper,
.congrats-content {
    container-type: size;
    container-name: game-container;
    width: 95vw;
    height: 95vh;
    max-width: 168.89vh;
    max-height: 59.38vw;
    margin: auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.game-wrapper {
    justify-content: space-between;
    align-items: stretch;
}

/* Title banner */
.game-title-banner {
    position: absolute;
    top: -2cqh;
    left: 0;
    right: 0;
    margin: auto;
    width: 40cqw;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(90, 60, 25, 0.35));
    animation: bannerPulse 3s ease-in-out infinite;
}


.game-header {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.8cqh 0;
    position: absolute;
    top: 20cqh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.header-left {
    display: none !important;
}

.header-right {
    display: none !important;
}

.hud-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: var(--stone-light);
    border: 2px solid var(--gold-dark);
    border-radius: 10px;
    padding: 0.6cqh 1.4cqw;
    box-shadow: var(--shadow-inset);
}

.hud-label {
    font-size: 1.2cqmin;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.15cqh;
}

.hud-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2cqmin;
    color: var(--warm-brown-dark);
}

/* ===================== PROGRESS BAR — Custom WebP Assets ===================== */
.header-center {
    flex: 1.2;
    max-width: 52cqw;
    margin: 0 2.5cqw;
}

/*
  Frame: prgressbar.webp
  ─ height:9cqh makes the lotus-flower ornaments at each end fully visible.
  ─ padding:0 10% horizontally insets the fill so it sits inside the
    recessed trough (lotus ornaments occupy ~10% of width on each side).
  ─ display:flex + align-items:center keeps the fill vertically centred
    inside the groove.
  ─ overflow:visible lets the subtle fill glow bleed outward naturally.
*/
.progress-bar-container {
    display: none !important;
}

/* Static frame sitting on top of the fill */
.progress-bar-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('./assets/progress bar.webp') no-repeat center center / 110% 110%;
    pointer-events: none;
    z-index: 2;
}

.progress-bar-fill {
    height: 33%;
    border-radius: 50px;
    background: url('./assets/progressfill.webp') no-repeat left center / auto 100%;
    /* ── width is controlled by JavaScript – do not change ── */
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fillShimmer 2.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 160, 20, 0.5), 0 0 15px rgba(255, 140, 0, 0.20);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Shimmer: pulse brightness/saturation so the asset's sparkles glow */
@keyframes fillShimmer {

    0%,
    100% {
        filter: brightness(1) saturate(1);
    }

    50% {
        filter: brightness(1.22) saturate(1.25);
    }
}


/* ===================== GAME LAYOUT (Two-column) ===================== */
.game-layout {
    display: flex;
    flex-direction: row;
    gap: 3cqw;
    width: 100%;
    max-width: 95cqw;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: calc(100% - 48cqh);
    transform: translateX(-1%);
}

/* Quiz column */
.quiz-container {
    display: flex;
    flex-direction: column;
    gap: 2cqh;
    height: 100%;
    flex: 1;
    max-width: 85cqw;
}


/* ===================== RIDDLE CARD — Custom WebP Temple Plaque ===================== */
/*
  QUESTCONTAINER.webp is ~2.1:1 wide.  Inner cream field occupies roughly
  the centre 76 % of width and 48 % of height (top/bottom lotus medallions
  take ~26 % each; left/right jewelled borders ~11 % each).

  Strategy
  ─ background-size: 100% 100%  →  image stretches to fill the card.
    Slight distortion is negligible because the cream field is generous.
  ─ min-height: 14cqh  →  ensures the lotus ornaments at top and bottom
    are fully visible even when the question is only one line.
  ─ padding: 4cqh 8cqw  →  text stays well inside the cream inner panel
    on every question length.
  ─ All carved-stone CSS (border, outline, box-shadow, backdrop-filter)
    is removed; those visuals come from the asset.
*/
.riddle-card {
    width: 72vw;
    max-width: 1200px;
    aspect-ratio: 1.55 / 1;
    background: url('./assets/questioncn.webp') no-repeat center 53% / 72% 172% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    top: 3.5cqh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* The asset is self-evidently a question scroll — no sub-header needed */
.riddle-header {
    display: none;
}

/* Question text – centred in the cream parchment field */
#riddle-text {
    position: absolute;
    top: 24%;
    bottom: 24%;
    left: 24%;
    right: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.2cqmin;
    line-height: 1.5;
    font-weight: 700;
    color: var(--warm-brown-dark);
    font-family: var(--font-gameplay);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    margin: 0;
    z-index: 2;
}


/* ===================== HINT PANEL — Temple Tablet Row ===================== */
.hint-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline: none !important;
    max-width: 660px;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    transform: translate(2%, -13%);
    box-sizing: border-box;
}

.hint-header {
    display: none !important;
}

.hint-title-text {
    font-size: 1.9cqmin;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted);
    font-weight: 700;
}

.hints-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4cqw;
    margin-left: 2cqw;
}

/* Individual hint tablet */
.hint-box {
    width: 100%;
    aspect-ratio: 1 / 1.13;
    position: relative;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transform: scale(1.12);
    transform-origin: center center;
}

.hint-box.locked {
    background: url('./assets/hintlk.webp') no-repeat center 27% / 120% 120% !important;
    opacity: 1;
    filter: none;
    pointer-events: none;
}

.hint-box.unlocked {
    background: url('./assets/optionsulk.webp') no-repeat center 27% / 120% 120% !important;
    opacity: 1;
    filter: none;
    animation: unlockCard 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes unlockCard {
    0% {
        transform: scale(0.9) rotateY(30deg);
        filter: brightness(0.8);
    }

    50% {
        transform: scale(1.04) rotateY(-10deg);
        filter: brightness(1.15);
    }

    100% {
        transform: scale(1) rotateY(0deg);
        filter: brightness(1);
    }
}

@keyframes hintTextFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hint-content.animate-fade-in {
    animation: hintTextFade 0.4s ease-out 0.2s forwards !important;
}

.hint-box-header {
    display: none !important;
}

.hint-tag {
    font-size: 1.8cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--warm-brown-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hint-tag.free {
    color: var(--gold-dark);
}

.hint-cost {
    display: none;
}

.hint-content {
    position: absolute;
    top: 28%;
    bottom: 16%;
    left: 14%;
    right: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-gameplay);
    font-size: 1.9cqmin;
    font-weight: 700;
    line-height: 1.45;
    color: var(--warm-brown-dark);
    margin: 0;
    transform: translateY(-2%);
}

.hint-content.hidden {
    display: none;
}

/* Locked overlay – subtle container for lock icon */
.hint-overlay {
    position: absolute;
    top: 25%;
    bottom: 12%;
    left: 12%;
    right: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.lock-icon {
    display: none !important;
}

.hint-box.unlocked .hint-overlay {
    display: none;
    pointer-events: none;
}


.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.4cqw;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    justify-items: center;
    align-items: center;
    transform: translateX(3%);
}

.option-card {
    background: url('./assets/option.webp') no-repeat center center / 107% 224% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 18px !important;
    overflow: visible !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    aspect-ratio: 4.6 / 1;
    width: 100%;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.option-letter {
    display: none !important;
}

.option-text {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-gameplay);
    font-size: 2.7cqmin;
    font-weight: 700;
    color: var(--warm-brown-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    z-index: 2;
    transform: translateY(-3%);
}

/* Hover – lift + gold glow */
.option-card:hover:not(:disabled) {
    transform: translateY(-0.2cqh) scale(1.03);
    filter: drop-shadow(0 0 12px rgba(212, 160, 23, 0.6));
}

.option-card:hover:not(:disabled) .option-letter {
    transform: scale(1.08);
}

.option-card:active:not(:disabled) {
    transform: translateY(0);
}

.option-card:disabled {
    cursor: not-allowed;
}

/* Correct – warm green stone tile filter */
.option-card.correct {
    filter: drop-shadow(0 0 14px rgba(74, 158, 106, 0.85)) sepia(0.4) hue-rotate(85deg) saturate(2) !important;
}

.option-card.correct .option-letter {
    background: linear-gradient(135deg, #80D0A0, #4A9E6A) !important;
    color: #fff !important;
    border-color: #2E7A4E !important;
}

/* Wrong – soft terracotta overlay filter */
.option-card.wrong {
    filter: drop-shadow(0 0 14px rgba(184, 90, 48, 0.85)) sepia(0.4) hue-rotate(340deg) saturate(2) !important;
}

.option-card.wrong .option-letter {
    background: linear-gradient(135deg, var(--terracotta), #A05C30) !important;
    color: #fff !important;
    border-color: #7A2E10 !important;
}


/* ===================== GANESHA/KIKI COMPANION ===================== */
.ganesha-container {
    display: flex !important;
    position: absolute !important;
    left: -1cqw;
    bottom: 2cqh;
    width: 30.49cqw;
    height: auto;
    z-index: 5;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}

.ganesha-avatar {
    width: 100%;
    height: auto;
    max-height: 61.07cqh;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(90, 60, 25, 0.25));
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease-in-out;
    animation: none !important;
}

/* Map the image sources dynamically in CSS to display Kiki instead of Ganesha */
#ganesha-avatar[src*="IDLE GANESHA"] {
    content: url('./assets/idlekiki.webp') !important;
}

#ganesha-avatar[src*="HAPPY GANESHA"] {
    content: url('./assets/happykiki.webp') !important;
}

#ganesha-avatar[src*="thoughfulganesha"] {
    content: url('./assets/thoughtfulkiki.webp') !important;
}

/* Disable companion movement animations */
.float-anim,
.dance-anim,
.thoughtful-anim {
    animation: none !important;
    transform: none !important;
}

/* ===================== RAT COMPANION (MOOSHAK) ===================== */
.game-layout::after {
    content: '';
    display: block;
    position: absolute !important;
    right: -1.5cqw;
    bottom: 2cqh;
    width: 21.37cqw;
    height: 42.74cqh;
    z-index: 5;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    filter: drop-shadow(0 6px 14px rgba(90, 60, 25, 0.25));
    transition: background-image 0.3s ease-in-out;
}

/* Map the rat states dynamically in sync with Ganesha/Kiki */
.game-layout:has(#ganesha-avatar[src*="IDLE GANESHA"])::after {
    background-image: url('./assets/idleemooshak.webp') !important;
}

.game-layout:has(#ganesha-avatar[src*="HAPPY GANESHA"])::after {
    background-image: url('./assets/happy_mooshakk.webp') !important;
}

.game-layout:has(#ganesha-avatar[src*="thoughfulganesha"])::after {
    background-image: url('./assets/thoughtfulmooshak.webp') !important;
}


/* ===================== CONGRATULATIONS SCREEN ===================== */
.congrats-content {
    text-align: center;
}

.congrats-banner {
    position: absolute;
    top: 3cqh;
    left: 0;
    right: 0;
    margin: auto;
    width: 40cqw;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(90, 60, 25, 0.35));
    animation: bannerPulse 3s ease-in-out infinite;
}

/* Temple mandala score badge */
.score-badge-circle {
    width: 37.5cqmin;
    height: 37.5cqmin;
    background: url('./assets/scorebadge.webp') no-repeat center center / contain !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4cqw;
    margin: 20cqh auto 0;
    position: relative;
    padding-top: 2.2cqmin;
    box-sizing: border-box;
}

.score-badge-title {
    display: none !important;
}

.score-badge-number {
    font-family: var(--font-display);
    font-size: 4.8cqmin;
    font-weight: 800;
    color: var(--warm-brown-dark);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.score-badge-max {
    font-family: var(--font-display);
    font-size: 3.4cqmin;
    font-weight: 700;
    color: var(--gold-dark);
    line-height: 1;
}




.score-feedback {
    font-size: 1.6cqmin;
    font-weight: 600;
    color: var(--warm-brown);
}

/* Fireworks / confetti container */
.fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.confetti {
    position: absolute;
    width: 0.8cqw;
    height: 0.8cqw;
    background: var(--gold);
    border-radius: 50%;
    animation: confFall 3s ease-out forwards;
}

@keyframes confFall {
    0% {
        transform: translateY(-2cqh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(45cqh) rotate(720deg);
        opacity: 0;
    }
}


/* ===================== ANIMATIONS ===================== */

/* Idle – no animation, Ganesha stays still */
.float-anim {
    animation: none;
}

/* Happy dance */
.dance-anim {
    animation: ganeshaDance 1.2s ease-in-out infinite;
}

@keyframes ganeshaDance {

    0%,
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
    }

    25% {
        transform: scale(1.06) translateY(-10px) rotate(-2deg);
    }

    50% {
        transform: scale(1.02) translateY(0) rotate(2deg);
    }

    75% {
        transform: scale(1.06) translateY(-7px) rotate(-1deg);
    }
}


/* State switch pop */
.ganesha-pop {
    animation: ganeshaPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ganeshaPop {
    0% {
        opacity: 0.5;
        transform: scale(0.85);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Wrong-answer card shake */
.shake-anim {
    animation: cardShake 0.4s ease-in-out;
}

@keyframes cardShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Fade in entrance */
.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up entrance */
.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in entrance */
.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ===================== RESPONSIVE CONTAINER QUERIES ===================== */
@container game-container (max-width: 820px) {
    .game-layout {
        flex-direction: column;
        max-width: 90cqw;
        gap: 1.5cqh;
    }

    .quiz-container {
        max-width: 100%;
        width: 100%;
    }

    .riddle-card {
        width: 100%;
        max-width: 100%;
    }

    .ganesha-container {
        flex: none;
        width: 100%;
        height: 15cqh;
        order: -1;
        margin-bottom: 0.5cqh;
    }

    .ganesha-avatar {
        max-height: 12.5cqh;
        width: auto;
    }

    .hints-grid {
        grid-template-columns: 1fr;
        gap: 1.2cqh;
    }

    .hint-box {
        min-height: auto;
        padding: 1.2cqh 2cqw;
    }
}

@container game-container (max-width: 580px) {
    .game-header {
        padding: 1.2cqh 2cqw;
        flex-direction: column;
        gap: 1cqh;
        margin-bottom: 1.5cqh;
    }

    .header-center {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .ganesha-container {
        height: 12cqh;
    }

    .ganesha-avatar {
        max-height: 10cqh;
    }

    .options-grid {
        grid-template-columns: 1fr;
        gap: 1.2cqh;
    }

    .option-card {
        padding: 1.5cqh 2cqw;
        font-size: 1.6cqmin;
    }

    .option-letter {
        width: 4.5cqmin;
        height: 4.5cqmin;
        font-size: 1.6cqmin;
    }

    #btn-start {
        max-width: 50cqw;
        margin-top: 42cqh;
    }

    .game-title-banner {
        max-height: 48cqh;
        top: 2cqh;
    }
}

@keyframes bannerPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 14px rgba(90, 60, 25, 0.35));
    }

    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 8px 20px rgba(212, 160, 23, 0.55));
    }
}

/* ===================== HANDCRAFTED TEMPLE BADGES (SCORE & RIDDLE) ===================== */
.temple-score-badge,
.temple-riddle-badge {
    position: absolute;
    top: 3cqh;
    width: 14cqw;
    min-width: 120px;
    background: radial-gradient(circle at 50% 120%, rgba(212, 160, 23, 0.25) 0%, transparent 80%), linear-gradient(135deg, #FFF5DF 0%, #ECD5A7 50%, #E2CCA5 100%);
    border: 3px double var(--gold);
    outline: 1px dashed rgba(212, 160, 23, 0.5);
    outline-offset: -4px;
    border-radius: 16px;
    padding: 1.2cqh 1.8cqw;
    box-shadow:
        0 6px 20px rgba(90, 60, 25, 0.18),
        0 0 15px rgba(212, 160, 23, 0.35),
        inset 0 0 10px rgba(90, 60, 25, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.temple-score-badge {
    right: 2cqw;
}

.temple-riddle-badge {
    left: 4cqw;
}

/* Small red lotus emoji decoration */
.temple-score-badge::before,
.temple-riddle-badge::before {
    content: '🪷';
    position: absolute;
    top: -12px;
    font-size: 1.8cqmin;
    filter: drop-shadow(0 2px 4px rgba(90, 60, 25, 0.22)) sepia(1) saturate(5) hue-rotate(-50deg);
}

/* Small ruby and emerald gemstone accents */
.temple-score-badge::after,
.temple-riddle-badge::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 7px;
    left: 8px;
    background: radial-gradient(circle, #FF4B4B 0%, #990000 100%);
    box-shadow: 0 0 8px #FF4B4B, inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

/* Add second gemstone on the right */
.temple-score-gem-right {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 7px;
    right: 8px;
    background: radial-gradient(circle, #4BFF4B 0%, #006600 100%);
    box-shadow: 0 0 8px #4BFF4B, inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

.temple-score-label {
    font-family: var(--font-primary);
    font-size: 1.3cqmin;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    margin-bottom: 0.2cqh;
}

.temple-score-value {
    font-family: var(--font-gameplay);
    font-size: 2.8cqmin;
    font-weight: 800;
    color: var(--warm-brown-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    display: inline-block;
}

/* Score update pop animation */
.score-pop {
    animation: scorePopEffect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scorePopEffect {
    0% {
        transform: scale(1);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    50% {
        transform: scale(1.12);
        text-shadow: 0 0 8px rgba(212, 160, 23, 0.85), 0 0 15px rgba(255, 215, 0, 0.6);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    }
}