/* ============================================================
   MYESHA'S MATH KINGDOM — Full Princess Quest Styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --pink:      #ff69b4;
    --pink-d:    #e91e8c;
    --pink-l:    #ffe4f0;
    --pink-s:    #ffc0d9;
    --lavender:  #c39bd3;
    --lav-l:     #f0e6f6;
    --gold:      #ffd700;
    --gold-d:    #ffb300;
    --mint:      #b8f5d8;
    --mint-d:    #2ecc71;
    --purple:    #9b59b6;
    --purple-d:  #6c3483;
    --card:      rgba(255,255,255,0.94);
    --sh:        0 8px 32px rgba(233,30,140,0.18);
    --sh-sm:     0 4px 16px rgba(233,30,140,0.11);
    --r:         22px;
    --r-sm:      14px;
    --font:      'Nunito','Comic Sans MS',cursive;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
    width:100%; height:100%; overflow:hidden;
    font-family:var(--font);
    background: linear-gradient(135deg,#fce4ec 0%,#f3e5f5 50%,#e3f2fd 100%);
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
}
#app {
    width:100vw; height:100vh;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column;
}

/* ─── TITLE BAR (every screen) ─────────────────────────────── */
.mk-titlebar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px 8px;
    background:linear-gradient(135deg,#fff0f7,#f3e5f5);
    border-bottom:3px solid var(--pink-s);
    position:sticky; top:0; z-index:50;
    flex-shrink:0;
    backdrop-filter:blur(12px);
    box-shadow:0 2px 16px rgba(233,30,140,0.12);
}
.mk-title-wrap {
    display:flex; align-items:center; gap:7px; flex:1; justify-content:center;
}
.mk-title-bow {
    font-size:22px;
    animation: bow-spin 3s ease-in-out infinite alternate;
}
@keyframes bow-spin {
    0%  { transform:rotate(-12deg) scale(1); }
    100%{ transform:rotate(12deg)  scale(1.1); }
}
.mk-title-text {
    display:flex; flex-direction:column; align-items:center; line-height:1.15;
}
.mk-title-main {
    font-size:clamp(16px,3.5vw,22px);
    font-weight:900;
    background:linear-gradient(135deg,#e91e8c,#9b59b6);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-0.3px;
}
.mk-title-sub {
    font-size:clamp(11px,2.5vw,15px);
    font-weight:800;
    background:linear-gradient(135deg,var(--gold-d),#ff8c00);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:0.5px;
}
.mk-title-gems {
    font-size:15px; font-weight:800; color:var(--gold-d);
    background:rgba(255,215,0,0.15);
    border:2px solid var(--gold);
    border-radius:30px; padding:4px 10px;
    min-width:56px; text-align:center;
}
.mk-back-btn {
    font-size:22px; background:none; border:none; cursor:pointer;
    padding:4px 8px; border-radius:12px; transition:transform .2s;
    flex-shrink:0;
}
.mk-back-btn:active { transform:scale(0.82); }
.mk-back-spacer { width:44px; flex-shrink:0; }

/* ─── HOME ─────────────────────────────────────────────────── */
.home-bg {
    position:fixed; inset:0; z-index:0;
    background:linear-gradient(160deg,#fce4ec 0%,#f3e5f5 40%,#e3f2fd 100%);
    display:flex; align-items:flex-end; justify-content:center;
    pointer-events:none;
    overflow:hidden;
}
.home-castle-svg { width:100%; max-width:340px; margin-bottom:-4px; }
.sparkle-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.home-content {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    padding:16px 20px 32px;
    gap:16px;
}
.avatar-badge {
    display:flex; align-items:center; gap:12px;
    background:var(--card);
    border:3px solid var(--pink-s);
    border-radius:50px;
    padding:10px 22px;
    box-shadow:var(--sh-sm);
    width:100%; max-width:420px;
}
.avatar-emoji { font-size:40px; }
.avatar-title { font-size:17px; font-weight:900; color:var(--pink-d); }
.avatar-progress { font-size:13px; font-weight:700; color:var(--purple); }
.home-btns { display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; }
.big-quest-btn {
    padding:20px 28px;
    font-size:24px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--pink),var(--pink-d));
    color:#fff; border:none; border-radius:var(--r); cursor:pointer;
    box-shadow:0 6px 28px rgba(233,30,140,0.38);
    transition:transform .2s,box-shadow .2s;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    text-align:center;
}
.big-quest-btn:active { transform:scale(0.95); }
.btn-sub { font-size:14px; font-weight:600; opacity:.85; }
.home-row { display:flex; gap:10px; }
.sm-home-btn {
    flex:1; padding:14px 8px;
    font-size:16px; font-weight:800; font-family:var(--font);
    background:var(--card); border:3px solid var(--pink-s); border-radius:var(--r-sm);
    cursor:pointer; color:var(--purple); box-shadow:var(--sh-sm);
    transition:transform .2s;
}
.sm-home-btn:active { transform:scale(0.92); }
.admin-cog {
    position:fixed; bottom:22px; right:20px; width:52px; height:52px;
    border-radius:50%; background:var(--lav-l); border:3px solid var(--lavender);
    font-size:22px; cursor:pointer; box-shadow:var(--sh-sm); z-index:100;
    transition:transform .2s;
}
.admin-cog:active { transform:scale(0.88); }

/* ─── MAP ──────────────────────────────────────────────────── */
.map-wrap { padding:0 16px 32px; }
.map-header { text-align:center; padding:16px 0 10px; }
.map-title { font-size:24px; font-weight:900; color:var(--purple); }
.map-progress { font-size:15px; font-weight:700; color:var(--lavender); margin-top:4px; }
.boss-alert-btn {
    width:100%; padding:14px; margin-bottom:14px;
    font-size:18px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,#e74c3c,#c0392b);
    color:#fff; border:none; border-radius:var(--r-sm); cursor:pointer;
    box-shadow:0 4px 20px rgba(231,76,60,0.35);
    animation:boss-pulse 1s ease infinite alternate;
}
@keyframes boss-pulse { from{box-shadow:0 4px 20px rgba(231,76,60,0.35)} to{box-shadow:0 4px 40px rgba(231,76,60,0.7)} }
.map-path { display:flex; flex-direction:column; gap:0; }
.map-loc {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px;
    position:relative; cursor:pointer;
    transition:transform .2s;
}
.map-loc:active { transform:scale(0.97); }
.map-loc.locked { cursor:default; opacity:.55; }
.loc-path-line {
    position:absolute; left:36px; top:-14px; width:3px; height:18px;
    background:linear-gradient(180deg,var(--pink-s),transparent);
    z-index:0;
}
.loc-path-line.hidden { display:none; }
.loc-bubble {
    width:64px; height:64px; border-radius:50%;
    background:var(--loc-color,#ffc0d9);
    border:3px solid rgba(255,255,255,0.8);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:var(--sh-sm); flex-shrink:0; position:relative; z-index:1;
    transition:transform .2s;
}
.map-loc.available .loc-bubble { animation:loc-bounce 2s ease-in-out infinite alternate; }
@keyframes loc-bounce { from{transform:scale(1)} to{transform:scale(1.07)} }
.map-loc.done .loc-bubble { background:linear-gradient(135deg,#b8f5d8,#d4fce8); border-color:var(--mint-d); }
.loc-emoji { font-size:26px; }
.loc-num { font-size:11px; font-weight:900; color:var(--purple-d); }
.loc-name { font-size:17px; font-weight:800; color:var(--pink-d); flex:1; }
.loc-crown { font-size:18px; }

/* ─── QUEST INTRO OVERLAY ──────────────────────────────────── */
.quest-intro-overlay {
    position:fixed; inset:0; z-index:500;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}
.quest-intro-card {
    background:var(--card);
    border-radius:var(--r);
    padding:36px 28px;
    text-align:center; max-width:420px; width:100%;
    box-shadow:0 16px 60px rgba(233,30,140,0.3);
    animation:qi-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qi-pop { from{transform:scale(.5) rotate(-8deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.qi-emoji { font-size:68px; margin-bottom:8px; }
.qi-location { font-size:22px; font-weight:900; color:var(--purple); }
.qi-table { font-size:32px; font-weight:900; color:var(--pink-d); margin:6px 0; }
.qi-desc { font-size:16px; color:var(--lavender); font-weight:700; margin-bottom:10px; font-style:italic; }
.qi-crystal { font-size:20px; font-weight:800; color:var(--gold-d); margin-bottom:20px; }
.qi-btn {
    padding:16px 36px; font-size:22px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--pink),var(--pink-d));
    color:#fff; border:none; border-radius:50px; cursor:pointer;
    box-shadow:0 6px 24px rgba(233,30,140,0.35);
    transition:transform .2s;
}
.qi-btn:active { transform:scale(0.94); }
.qi-sparkles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* ─── PHASE BANNER (learn/quiz) ────────────────────────────── */
.learn-phase-bg, .quiz-bg {
    flex:1; display:flex; flex-direction:column;
    background:var(--loc-bg,#fff0f7);
}
.phase-banner {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    background:var(--card); border-bottom:3px solid var(--pink-s);
    backdrop-filter:blur(10px);
}
.phase-banner-icon { font-size:34px; flex-shrink:0; }
.phase-banner-name { font-size:16px; font-weight:900; color:var(--purple); line-height:1.2; }
.phase-banner-phase { font-size:15px; font-weight:800; color:var(--pink-d); }
.phase-banner-hint { font-size:12px; font-weight:700; color:var(--lavender); }
.phase-crystal { font-size:30px; margin-left:auto; flex-shrink:0; }

/* ─── LEARN ─────────────────────────────────────────────────── */
.learn-progress-strip {
    height:10px; background:var(--pink-l);
}
.learn-progress-fill {
    height:100%; background:linear-gradient(90deg,var(--pink),var(--gold));
    transition:width .5s cubic-bezier(.34,1.56,.64,1);
    border-radius:0 6px 6px 0;
}
.facts-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px;
    flex:1; overflow-y:auto;
}
.fact-card {
    background:var(--card); border:3px solid var(--pink-s);
    border-radius:var(--r-sm); padding:14px 8px;
    text-align:center; cursor:pointer;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:var(--sh-sm); position:relative;
}
.fact-card.locked { opacity:0; transform:scale(.75); pointer-events:none; }
.fact-card.ready  { opacity:1; transform:scale(1); animation:card-in .45s cubic-bezier(.34,1.56,.64,1); }
.fact-card.collected { background:linear-gradient(135deg,var(--mint),#d4fce8); border-color:var(--mint-d); cursor:default; }
.fact-card.collected::after { content:'✅'; position:absolute; top:4px; right:6px; font-size:14px; }
.fact-card.ready:hover { transform:scale(1.06); border-color:var(--pink); box-shadow:var(--sh); }
.fact-card.ready:active { transform:scale(.93); }
@keyframes card-in { from{opacity:0;transform:scale(.5) rotate(-6deg)} to{opacity:1;transform:scale(1) rotate(0)} }
.fc-q { font-size:17px; font-weight:800; color:var(--pink-d); }
.fc-eq { font-size:14px; color:var(--lavender); margin:2px 0; }
.fc-a { font-size:26px; font-weight:900; color:var(--purple); }
.learn-footer {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:14px 16px; background:rgba(255,255,255,.92);
    border-top:3px solid var(--pink-s); backdrop-filter:blur(10px);
    position:sticky; bottom:0;
}
.collected-txt { font-size:17px; font-weight:700; color:var(--purple); }
.start-quiz-btn {
    padding:16px 36px; font-size:21px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--pink),var(--pink-d));
    color:#fff; border:none; border-radius:50px; cursor:pointer;
    box-shadow:0 6px 24px rgba(233,30,140,0.35);
    transition:all .2s; width:100%; max-width:380px;
}
.start-quiz-btn:disabled { background:#ddd; box-shadow:none; color:#aaa; cursor:not-allowed; }
.start-quiz-btn:not(:disabled):active { transform:scale(.96); }
.pulse-btn { animation:pulse-glow 1s ease-in-out infinite; }
@keyframes pulse-glow {
    0%,100%{ box-shadow:0 6px 24px rgba(233,30,140,.35); }
    50%    { box-shadow:0 6px 44px rgba(233,30,140,.72), 0 0 22px rgba(233,30,140,.4); }
}

/* ─── QUIZ ──────────────────────────────────────────────────── */
.quiz-prog-bar { height:10px; background:var(--pink-l); margin:8px 14px; border-radius:5px; }
.quiz-prog-fill { height:100%; background:linear-gradient(90deg,var(--pink),var(--purple)); border-radius:5px; transition:width .4s ease; }
.streak-dots { display:flex; justify-content:center; gap:8px; padding:6px 0; }
.sdot { width:18px; height:18px; border-radius:50%; background:var(--pink-l); border:2px solid var(--pink-s); transition:all .3s cubic-bezier(.34,1.56,.64,1); }
.sdot.sdot-on { background:linear-gradient(135deg,var(--gold),var(--pink)); border-color:var(--gold-d); transform:scale(1.22); box-shadow:0 0 10px rgba(255,215,0,.5); }
.quiz-area { padding:10px 14px; }
.q-card {
    background:var(--card); border:3px solid var(--pink-s);
    border-radius:var(--r); padding:22px 18px; box-shadow:var(--sh);
}
.q-text { font-size:clamp(34px,8vw,54px); font-weight:900; text-align:center; color:var(--pink-d); letter-spacing:-1px; margin:6px 0; }
.q-deco { text-align:center; font-size:20px; margin:4px 0 14px; animation:spin-deco 4s linear infinite; }
@keyframes spin-deco { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.choices-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice-btn {
    padding:20px 10px; font-size:clamp(24px,6vw,36px); font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--lav-l),var(--pink-l));
    border:3px solid var(--lavender); border-radius:var(--r-sm);
    cursor:pointer; color:var(--purple);
    box-shadow:0 4px 12px rgba(155,89,182,.14);
    transition:all .14s cubic-bezier(.34,1.56,.64,1);
}
.choice-btn:not(:disabled):hover { transform:scale(1.05); border-color:var(--pink); box-shadow:var(--sh); }
.choice-btn:not(:disabled):active { transform:scale(.93); }
.choice-btn:disabled { cursor:default; }
.choice-correct {
    background:linear-gradient(135deg,var(--mint),#a8e6cf) !important;
    border-color:var(--mint-d) !important; color:#155724 !important;
    transform:scale(1.07) !important;
    box-shadow:0 0 24px rgba(46,204,113,.4) !important;
    animation:correct-pop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes correct-pop { 0%{transform:scale(1)} 55%{transform:scale(1.18)} 100%{transform:scale(1.07)} }
.choice-wrong {
    background:linear-gradient(135deg,#ffe0e0,#ffb3b3) !important;
    border-color:#e74c3c !important; color:#7b0000 !important;
    animation:wrong-shake .38s ease;
}
@keyframes wrong-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }
.streak-flame { text-align:center; font-size:17px; font-weight:800; color:var(--gold-d); padding:4px 0; animation:flame-pulse .6s ease infinite alternate; }
@keyframes flame-pulse { from{transform:scale(1)} to{transform:scale(1.09)} }
.replay-fact {
    margin-top:10px; text-align:center; font-size:17px; color:var(--pink-d); font-weight:700;
    padding:10px 16px; background:var(--pink-l);
    border-radius:var(--r-sm); border:2px dashed var(--pink);
    animation:replay-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes replay-in { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
.lives-row { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.heart-icon { font-size:22px; }
.heart-icon.empty { opacity:.4; }

/* ─── HINT PANEL ─────────────────────────────────────────────── */
.hint-panel {
    margin:0 14px 12px; padding:10px 14px;
    background:rgba(255,255,255,.86); border:2px dashed var(--pink-s);
    border-radius:var(--r-sm); transition:opacity 1s ease;
}
.hint-lbl { font-size:12px; font-weight:700; color:var(--lavender); margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.hint-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.hint-cell {
    font-size:11px; padding:4px 5px; border-radius:7px;
    color:var(--purple); font-weight:600; text-align:center; transition:all .3s;
}
.hint-active  { background:var(--gold); color:#333; font-weight:900; transform:scale(1.07); }
.hint-mastered { background:var(--mint); color:var(--mint-d); text-decoration:line-through; }

/* ─── BOSS BATTLE ───────────────────────────────────────────── */
.boss-bg {
    flex:1; display:flex; flex-direction:column;
    background:linear-gradient(160deg,#1a0a2e,#3d1052,#6a1b9a);
    color:#fff;
}
.boss-header { text-align:center; padding:14px; }
.boss-title { font-size:22px; font-weight:900; color:#ffd700; letter-spacing:1px; }
.boss-name { font-size:28px; font-weight:900; margin-top:4px; }
.boss-arena { display:flex; flex-direction:column; align-items:center; padding:16px; gap:10px; }
.boss-sprite { font-size:80px; animation:boss-idle 1.5s ease-in-out infinite alternate; }
@keyframes boss-idle { from{transform:translateY(0) scale(1)} to{transform:translateY(-10px) scale(1.05)} }
.boss-hp-wrap { width:100%; max-width:360px; }
.boss-hp-bar { height:18px; background:rgba(255,255,255,.2); border-radius:9px; overflow:hidden; margin-bottom:6px; }
.boss-hp-fill { height:100%; background:#2ecc71; border-radius:9px; transition:width .4s ease,background .4s ease; }
.boss-hp-txt { text-align:center; font-size:15px; font-weight:800; }
.boss-lives { display:flex; justify-content:center; gap:8px; padding:8px 0; }
.boss-streak { display:flex; justify-content:center; gap:6px; padding:4px 0; }
.boss-quiz { padding:10px 14px; flex:1; }
.boss-q-card {
    background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.25);
    border-radius:var(--r); padding:20px 16px; backdrop-filter:blur(8px);
}
.bq-text { font-size:clamp(30px,7vw,48px); font-weight:900; text-align:center; color:#fff; letter-spacing:-1px; margin-bottom:14px; }
.boss-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.boss-choice {
    padding:18px 10px; font-size:clamp(22px,5.5vw,32px); font-weight:900; font-family:var(--font);
    background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3);
    border-radius:var(--r-sm); cursor:pointer; color:#fff;
    transition:all .14s cubic-bezier(.34,1.56,.64,1);
}
.boss-choice:not(:disabled):hover { background:rgba(255,255,255,.28); transform:scale(1.04); }
.boss-choice:not(:disabled):active { transform:scale(.93); }

/* ─── BOSS VICTORY ──────────────────────────────────────────── */
.boss-victory-overlay {
    position:fixed; inset:0; z-index:600;
    background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; padding:24px;
}
.bv-card {
    background:var(--card); border-radius:var(--r); padding:36px 28px;
    text-align:center; max-width:420px; width:100%;
    box-shadow:0 16px 60px rgba(233,30,140,.35);
    animation:qi-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.bv-emoji { font-size:60px; margin-bottom:8px; }
.bv-title { font-size:30px; font-weight:900; color:var(--pink-d); }
.bv-boss  { font-size:18px; font-weight:700; color:var(--purple); margin:6px 0; }
.bv-avatar { padding:16px 0; }
.bv-av-title { font-size:20px; font-weight:900; color:var(--pink-d); margin-top:6px; }
.bv-av-desc  { font-size:15px; color:var(--purple); font-weight:700; }
.bv-gems { font-size:24px; font-weight:900; color:var(--gold-d); margin:10px 0; }
.bv-btn {
    padding:16px 32px; font-size:20px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--purple),var(--purple-d));
    color:#fff; border:none; border-radius:50px; cursor:pointer;
    box-shadow:0 6px 24px rgba(155,89,182,.35); transition:transform .2s;
}
.bv-btn:active { transform:scale(.95); }

/* ─── COMPLETE ──────────────────────────────────────────────── */
.complete-screen {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:28px 18px; position:relative; overflow:hidden;
    background:linear-gradient(160deg,#fce4ec,#f3e5f5,#e3f2fd);
}
.comp-crystal { font-size:80px; animation:crystal-bounce 1s cubic-bezier(.34,1.56,.64,1) infinite alternate; filter:drop-shadow(0 8px 24px rgba(255,215,0,.55)); }
@keyframes crystal-bounce { from{transform:translateY(0) rotate(-5deg)} to{transform:translateY(-14px) rotate(5deg)} }
.comp-title { font-size:clamp(26px,6.5vw,42px); font-weight:900; color:var(--pink-d); text-align:center; margin:10px 0 6px; }
.comp-location { font-size:18px; font-weight:700; color:var(--purple); text-align:center; margin-bottom:16px; }
.comp-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:100%; max-width:480px; margin-bottom:16px; }
.comp-fact {
    background:var(--card); border:2px solid var(--pink-s); border-radius:10px;
    padding:7px 4px; text-align:center; font-size:12px; font-weight:700; color:var(--purple);
    animation:fact-appear .4s ease both;
}
@keyframes fact-appear { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }
.comp-avatar { text-align:center; margin-bottom:12px; }
.comp-av-title { font-size:18px; font-weight:900; color:var(--pink-d); margin-top:6px; }
.comp-castle-pct {
    font-size:15px; font-weight:800; color:var(--purple);
    width:100%; max-width:400px; margin-bottom:16px; text-align:center;
}
.comp-castle-bar { height:10px; background:var(--pink-l); border-radius:6px; margin-top:6px; overflow:hidden; }
.comp-btns { display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:420px; justify-content:center; }
.comp-btn {
    flex:1; min-width:120px; padding:14px 18px; font-size:18px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--lavender),var(--purple));
    color:#fff; border:none; border-radius:50px; cursor:pointer;
    box-shadow:0 4px 18px rgba(155,89,182,.3); transition:transform .2s;
}
.comp-btn:active { transform:scale(.95); }
.comp-btn2 { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#333; box-shadow:0 4px 18px rgba(255,215,0,.3); }

/* ─── GAME OVER ──────────────────────────────────────────────── */
.gameover-screen {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:36px 20px; gap:14px;
    background:linear-gradient(135deg,#fff0f5,#f8e8ff);
}
.go-icon  { font-size:70px; animation:go-bounce .5s ease; }
@keyframes go-bounce { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.go-title { font-size:30px; font-weight:900; color:var(--pink-d); text-align:center; }
.go-sub   { font-size:19px; color:var(--purple); text-align:center; }
.go-loc   { font-size:17px; color:var(--lavender); font-weight:700; text-align:center; }
.go-btns  { display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; margin-top:6px; }
.go-btn   {
    padding:16px; font-size:19px; font-weight:900; font-family:var(--font);
    background:linear-gradient(135deg,var(--pink),var(--pink-d));
    color:#fff; border:none; border-radius:50px; cursor:pointer;
    box-shadow:0 5px 20px rgba(233,30,140,.3); transition:transform .2s;
}
.go-btn:active { transform:scale(.95); }
.go-btn2 { background:linear-gradient(135deg,var(--purple),var(--purple-d)); }

/* ─── SPEED ROUND ────────────────────────────────────────────── */
.speed-bg { flex:1; display:flex; flex-direction:column; background:linear-gradient(135deg,#fffde7,#fff9c4); }
.speed-header-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; background:rgba(255,255,255,.7); border-bottom:3px solid var(--gold);
}
.speed-title { font-size:22px; font-weight:900; color:var(--gold-d); }
.speed-timer { font-size:34px; font-weight:900; color:var(--purple); }
.timer-red   { color:#e74c3c !important; animation:timer-pulse .5s ease infinite alternate; }
@keyframes timer-pulse { from{transform:scale(1)} to{transform:scale(1.18)} }
.speed-score { text-align:center; font-size:22px; font-weight:800; color:var(--gold-d); padding:8px; }

/* ─── JOURNAL ────────────────────────────────────────────────── */
.journal-bg { flex:1; display:flex; flex-direction:column; padding:0; background:#fffdf5; }
.journal-title { font-size:26px; font-weight:900; color:var(--purple); text-align:center; padding:18px 0 4px; }
.journal-subtitle { font-size:14px; font-weight:700; color:var(--lavender); text-align:center; margin-bottom:12px; }
.journal-entries { flex:1; overflow-y:auto; padding:0 16px 24px; }
.journal-entry {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px; margin-bottom:12px;
    background:var(--card); border:2px solid var(--pink-s);
    border-radius:var(--r-sm); box-shadow:var(--sh-sm);
    animation:je-in .4s ease both;
}
@keyframes je-in { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.je-dot  { font-size:22px; flex-shrink:0; }
.je-text { flex:1; font-size:15px; font-weight:700; color:var(--purple); line-height:1.55; }
.je-date { font-size:11px; color:var(--lavender); font-weight:600; white-space:nowrap; }

/* ─── AVATAR ROOM ────────────────────────────────────────────── */
.avatar-room {
    flex:1; display:flex; flex-direction:column; align-items:center;
    padding:20px 18px 32px; background:linear-gradient(135deg,#fce4ec,#f3e5f5); overflow-y:auto;
}
.ar-title { font-size:26px; font-weight:900; color:var(--pink-d); margin-bottom:16px; }
.ar-stage {
    background:var(--card); border:3px solid var(--pink-s);
    border-radius:var(--r); padding:28px 24px; text-align:center;
    width:100%; max-width:380px; box-shadow:var(--sh); margin-bottom:20px;
}
.ar-emoji  { font-size:72px; animation:ar-float 2.5s ease-in-out infinite alternate; }
@keyframes ar-float { from{transform:translateY(0)} to{transform:translateY(-12px)} }
.ar-outfit { font-size:32px; margin:8px 0; }
.ar-title-lbl { font-size:22px; font-weight:900; color:var(--pink-d); margin-top:6px; }
.ar-desc { font-size:15px; color:var(--purple); font-weight:700; margin-top:4px; font-style:italic; }
.ar-progress-title { font-size:18px; font-weight:800; color:var(--purple); margin-bottom:12px; }
.ar-stages { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:16px; }
.ar-stage-item {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:12px 14px; border-radius:var(--r-sm);
    min-width:80px;
}
.ar-stage-item.unlocked { background:linear-gradient(135deg,var(--mint),#d4fce8); border:2px solid var(--mint-d); }
.ar-stage-item.locked-stage { background:var(--pink-l); border:2px solid var(--pink-s); opacity:.6; }
.ar-si-emoji { font-size:28px; }
.ar-si-name  { font-size:12px; font-weight:800; color:var(--purple); text-align:center; }
.ar-si-req   { font-size:10px; font-weight:700; color:var(--lavender); }
.ar-gems { font-size:22px; font-weight:900; color:var(--gold-d); }

/* ─── CASTLE ROOM ────────────────────────────────────────────── */
.castle-room {
    flex:1; display:flex; flex-direction:column; align-items:center;
    padding:18px 16px 32px; background:linear-gradient(135deg,#e3f2fd,#fce4ec); overflow-y:auto;
}
.cr-title    { font-size:24px; font-weight:900; color:var(--pink-d); text-align:center; }
.cr-subtitle { font-size:15px; font-weight:700; color:var(--purple); margin:6px 0 14px; }
.cr-castle   { width:100%; max-width:460px; margin-bottom:18px; }
.cr-parts    { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:460px; }
.cr-part {
    padding:10px; text-align:center; border-radius:var(--r-sm);
    font-size:13px; font-weight:700;
}
.cr-part.done    { background:linear-gradient(135deg,var(--mint),#d4fce8); color:var(--mint-d); border:2px solid var(--mint-d); }
.cr-part.pending { background:var(--pink-l); color:var(--lavender); border:2px dashed var(--pink-s); }

/* ─── TRANSITION ─────────────────────────────────────────────── */
.trans-overlay {
    position:fixed; inset:0; background:rgba(255,255,255,.95);
    display:flex; align-items:center; justify-content:center; z-index:700;
}
.trans-msg {
    font-size:clamp(20px,5vw,30px); font-weight:900; color:var(--pink-d);
    text-align:center; padding:24px;
    animation:tm-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tm-pop { from{transform:scale(.5) rotate(-10deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

/* ─── FLOATING GEMS / BURSTS ─────────────────────────────────── */
.gem-pop {
    position:fixed; font-size:21px; font-weight:900; color:var(--gold-d);
    pointer-events:none; z-index:800;
    text-shadow:0 2px 8px rgba(0,0,0,.2);
}
.burst {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:linear-gradient(135deg,var(--gold),var(--pink));
    color:#fff; font-size:24px; font-weight:900;
    padding:18px 36px; border-radius:var(--r);
    text-align:center; z-index:800;
    box-shadow:0 12px 40px rgba(233,30,140,.4);
    pointer-events:none;
}

/* ─── SPARKLES / CONFETTI ────────────────────────────────────── */
.sparkle-float {
    position:absolute;
    animation:sf-anim linear infinite; opacity:0;
}
@keyframes sf-anim {
    0%  { opacity:0; transform:translateY(0)   scale(.5); }
    20% { opacity:1; transform:translateY(-18px) scale(1);  }
    80% { opacity:.5;transform:translateY(-55px) scale(.8); }
    100%{ opacity:0; transform:translateY(-90px) scale(.3); }
}
.confetti {
    position:fixed; top:-10px;
    animation:cf-fall ease-in forwards; z-index:790; pointer-events:none;
}
@keyframes cf-fall {
    0%  { top:-10px; transform:rotate(0deg)   translateX(0); }
    100%{ top:110vh;  transform:rotate(700deg) translateX(30px); }
}

/* ─── TABLET / DESKTOP ───────────────────────────────────────── */
@media (min-width:768px) {
    .facts-grid       { grid-template-columns:repeat(4,1fr); }
    .hint-grid        { grid-template-columns:repeat(6,1fr); }
    .choices-grid     { gap:16px; }
    .choice-btn       { padding:24px; }
    .comp-facts-grid  { grid-template-columns:repeat(6,1fr); }
    .cr-parts         { grid-template-columns:repeat(4,1fr); }
    .ar-stages        { max-width:500px; }
    .map-loc          { padding:14px 20px; }
    .loc-bubble       { width:72px; height:72px; }
    .loc-emoji        { font-size:30px; }
}
@media (min-width:1024px) {
    #app { max-width:900px; margin:0 auto; box-shadow:0 0 80px rgba(233,30,140,.1); }
}