/* ── TOKENS ─────────────────────────────────── */
:root{
  --lav:       #7B6EF6;
  --lav-2:     #9B8EFA;
  --lav-pale:  #EDEAFD;
  --lav-ultra: #F5F3FF;
  --mint:      #3DBFA8;
  --mint-pale: #E2F5F1;
  --rose:      #F0707A;
  --rose-pale: #FDE8EA;
  --amber:     #F5A623;
  --amber-pale:#FEF3DC;
  --sky:       #4AADEE;
  --sky-pale:  #E4F3FD;
  --violet:    #9B6EF0;
  --sage:      #5BBF8A;
  --sage-pale: #E5F5ED;
  --white:     #FFFFFF;
  --g50:       #F8F7FF;
  --g100:      #F0EFFE;
  --g200:      #E4E1F7;
  --g300:      #CCC8EE;
  --g400:      #9D99C0;
  --g500:      #6B6891;
  --g700:      #3B3860;
  --g900:      #1C1A38;
  --f-ui:  'Nunito',  sans-serif;
  --f-num: 'Poppins', sans-serif;
  --rx:  8px;  --rs: 12px; --rm: 16px;
  --rl:  22px; --rxl:28px; --r2xl:36px; --rp:999px;
  --sh0: 0 1px 3px rgba(100,90,200,.07),0 1px 2px rgba(0,0,0,.04);
  --sh1: 0 2px 8px rgba(100,90,200,.09),0 1px 3px rgba(0,0,0,.05);
  --sh2: 0 4px 16px rgba(100,90,200,.13),0 2px 6px rgba(0,0,0,.06);
  --sh3: 0 8px 32px rgba(100,90,200,.16),0 3px 8px rgba(0,0,0,.08);
  --sh4: 0 16px 48px rgba(100,90,200,.20),0 6px 16px rgba(0,0,0,.10);
  --ease: all .2s cubic-bezier(.4,0,.2,1);
  --spring: all .3s cubic-bezier(.34,1.56,.64,1);
  /* Card / surface colors - overridden in dark mode */
  --card-bg: var(--white);
  --app-bg: var(--g100);
  --body-text: var(--g900);
  --sub-text: var(--g500);
  --border: var(--g200);
  --input-bg: var(--g50);
}

/* ── DARK MODE ─────────────────────────────── */
body.dark{
  --white:     #1E1C3A;
  --g50:       #252343;
  --g100:      #1A182F;
  --g200:      #2E2B50;
  --g300:      #3D3A60;
  --g400:      #7A77A0;
  --g500:      #A09DC8;
  --g700:      #C8C5E8;
  --g900:      #EEEDF8;
  --lav-pale:  #2A2650;
  --lav-ultra: #221F45;
  --mint-pale: #1A3030;
  --rose-pale: #38181E;
  --amber-pale:#382C10;
  --sky-pale:  #182838;
  --sage-pale: #1A2E26;
  --card-bg:   #23214A;
  --app-bg:    #1A182F;
  --body-text: #EEEDF8;
  --sub-text:  #A09DC8;
  --border:    #2E2B50;
  --input-bg:  #252343;
}
body.dark .hdr{
  background:linear-gradient(135deg,#3D3A6E 0%,#4A457A 40%,#5A548A 75%,#655E92 100%);
}
body.dark .hero{
  background:linear-gradient(135deg,#3D3A6E 0%,#4A457A 40%,#5A548A 78%,#655E92 100%);
}
body.dark .modal-hero{
  background:linear-gradient(135deg,#3D3A6E,#4A457A,#5A548A);
}
body.dark .play-cta{
  background:linear-gradient(135deg,#4A4590 0%,#5A558A 40%,#6A6098 100%);
  box-shadow:0 8px 28px rgba(74,69,144,.48),0 2px 6px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.08) inset;
padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));}
body.dark .play-cta:hover{box-shadow:0 14px 36px rgba(74,69,144,.56);}
body.dark .modal-primary{background:linear-gradient(135deg,#4A4590,#5A558A);}
body.dark .lvlup-card{background:#23214A;}
body.dark .xp-badge{background:linear-gradient(135deg,#5A558A,#6A60A0);}
body.dark .sw-score{background:linear-gradient(160deg,#252345,#1E1C3A);}
body.dark .sw-best{background:linear-gradient(160deg,#2A2015,#1E1C3A);}
body.dark .sw-lives{background:linear-gradient(160deg,#2A1520,#1E1C3A);}
body.dark .sw-time{background:linear-gradient(160deg,#151E2A,#1E1C3A);}
body.dark .sw-streak{background:linear-gradient(160deg,#15251E,#1E1C3A);}
body.dark .sw-rank{background:linear-gradient(160deg,#22152A,#1E1C3A);}
body.dark .ans-btn{
  background:#252343;border-color:#2E2B50;color:#EEEDF8;
}
body.dark .ans-btn:hover:not(:disabled){
  border-color:var(--lav);background:linear-gradient(160deg,#2A2650,#221F45);color:#B8B0F8;
}
body.dark .mstat{background:linear-gradient(160deg,#252345,#1E1C3A);}
body.dark .stat-tile{background:#252343;}
body.dark .ach-item{background:#252343;}
body.dark .ach-item.unlocked{background:linear-gradient(135deg,#2A2650,#1E1C3A);}
body.dark .daily-card{border-color:#352B10;background:#23214A;}
body.dark .chip{background:#252343;}
body.dark .ctrl-panel{background:#23214A;}
body.dark .xp-hero{background:#23214A;}
body.dark .xp-inline{background:#23214A;}
body.dark .q-card{background:#23214A;}
body.dark .toast{background:#23214A;border-color:#2E2B50;}
body.dark .modal-card{background:#1E1C3A;}
body.dark .modal-body{background:#1E1C3A;}
body.dark .modal-ghost{border-color:#2E2B50;color:#A09DC8;}
body.dark .modal-ghost:hover{background:#2A2650;border-color:var(--lav);color:#B8B0F8;}
body.dark .menu-icon-btn{background:#23214A;border-color:#2E2B50;color:#A09DC8;}
body.dark .menu-icon-btn:hover{border-color:#3D3A60;}
body.dark .restart-cta{background:#252343;border-color:#2E2B50;color:#A09DC8;}
body.dark .restart-cta:hover{background:var(--rose-pale);border-color:var(--rose);}
body.dark .gmode-card{background:#23214A;border-color:#2E2B50;}
body.dark .diff-card{background:#23214A;border-color:#2E2B50;}
body.dark .time-chip{background:#23214A;border-color:#2E2B50;}
body.dark .diff-card.selected.easy{background:var(--mint-pale);}
body.dark .diff-card.selected.medium{background:var(--amber-pale);}
body.dark .diff-card.selected.hard{background:var(--rose-pale);}
body.dark .gmode-card.selected{background:var(--lav-pale);}
body.dark .time-chip.selected{background:var(--sky-pale);}
body.dark .lang-btn{background:#23214A;border-color:#2E2B50;color:#A09DC8;}
body.dark .lang-btn.active{background:var(--lav-pale);border-color:var(--lav);color:#B8B0F8;}
body.dark body{
  background:radial-gradient(ellipse 900px 600px at 15% 5%,#1A1840 0%,transparent 62%),
    radial-gradient(ellipse 700px 500px at 85% 90%,#141830 0%,transparent 60%),
    linear-gradient(160deg,#121025 0%,#1A182F 100%);
}
/* Power-up dark mode */
body.dark .powerup-panel{background:#23214A;border-color:#2E2B50;min-width:0;overflow:hidden;}
body.dark .pu-btn{background:#252343;border-color:#2E2B50;min-width:0;overflow:hidden;}
body.dark .pu-btn:hover:not(:disabled){border-color:var(--lav);}
/* Time Attack dark */
body.dark .ta-bar-bg{background:#252343;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;-webkit-font-smoothing:antialiased;}
body{
  min-height:100%; font-family:var(--f-ui); color:var(--g900);
  background:
    radial-gradient(ellipse 900px 600px at 15% 5%,  #D5CEFF 0%,transparent 62%),
    radial-gradient(ellipse 700px 500px at 85% 90%,  #BEF0E4 0%,transparent 60%),
    radial-gradient(ellipse 500px 400px at 80% 10%,  #E0D8FF 0%,transparent 55%),
    linear-gradient(160deg,#EBE8FF 0%,#F5F3FF 45%,#ECF8F4 100%);
  background-attachment:fixed;
  display:flex; justify-content:center; align-items:flex-start;
  padding:24px 12px 64px;
  transition:background .4s ease;
}
.app{
  width:100%; max-width:420px; min-height:min(870px,100dvh); min-height:min(870px,100vh);
  background:var(--app-bg);
  border-radius:var(--r2xl);
  box-shadow:0 0 0 1px rgba(123,110,246,.1),0 2px 4px rgba(123,110,246,.06),0 20px 60px rgba(100,90,200,.18),0 40px 80px rgba(0,0,0,.08);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:background .3s ease;
isolation:isolate;}
.page{display:none;flex-direction:column;flex:1;}
.page.active{display:flex;}
.page-enter{animation:pgIn .32s cubic-bezier(.22,1,.36,1) both;}
@keyframes pgIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* ── HEADER ─────────────────────────────────── */
.hdr{
  height:70px;
  background:linear-gradient(135deg,#6B5EE8 0%,#7B6EF6 40%,#9580F8 75%,#A08BF9 100%);
  padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 4px 24px rgba(107,94,232,.38),0 1px 0 rgba(255,255,255,.18) inset;
  position:relative; z-index:10; flex-shrink:0;
  transition:background .3s ease;
}
.hdr::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 100%);pointer-events:none;}
.hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 30%,rgba(255,255,255,.25) 70%,transparent);pointer-events:none;}
.hdr-btn{
  width:40px;height:40px;border-radius:var(--rs);
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:white;font-size:1.1rem;font-weight:700;
  transition:var(--ease);flex-shrink:0;backdrop-filter:blur(6px);
}
.hdr-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.07);}
.hdr-btn:active{transform:scale(.93);}
.hdr-btn.ghost{visibility:hidden;pointer-events:none;}
.hdr-mid{flex:1;display:flex;flex-direction:column;align-items:center;}
.hdr-title{font-family:var(--f-num);font-size:1.22rem;font-weight:800;color:white;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.18);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.hdr-sub{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.68);letter-spacing:.11em;text-transform:uppercase;margin-top:1px;}
.hdr-right{display:flex;align-items:center;gap:6px;}
/* Dark mode toggle in header */
.dark-toggle{
  width:36px;height:36px;border-radius:var(--rs);
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;
  transition:var(--ease);flex-shrink:0;backdrop-filter:blur(6px);
}
.dark-toggle:hover{background:rgba(255,255,255,.32);transform:scale(1.07);}
.dark-toggle:active{transform:scale(.93);}
.hdr-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.14));
  border:2px solid rgba(255,255,255,.42);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:.9rem;font-weight:800;color:white;
  cursor:pointer;transition:var(--ease);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.hdr-avatar:hover{transform:scale(1.09);}

/* ── MENU PAGE ─────────────────────────────── */
.menu-scroll{flex:1;overflow-y:auto;padding:16px 14px 28px;display:flex;flex-direction:column;gap:16px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;}
.menu-scroll::-webkit-scrollbar{width:0;}

/* XP / Level bar on menu */
.xp-hero{
  background:var(--white);border-radius:var(--rxl);padding:16px 18px;
  box-shadow:var(--sh2);border:1px solid rgba(255,255,255,.95);
  display:flex;flex-direction:column;gap:10px;
  transition:background .3s;
}
.xp-row{display:flex;align-items:center;justify-content:space-between;}
.xp-level{display:flex;align-items:center;gap:8px;}
.xp-badge{
  width:42px;height:42px;border-radius:var(--rs);
  background:linear-gradient(135deg,var(--lav),var(--lav-2));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:1.1rem;font-weight:900;color:white;
  box-shadow:0 4px 12px rgba(123,110,246,.35);
  transition:background .3s;
}
.xp-level-info{display:flex;flex-direction:column;}
.xp-level-lbl{font-size:.6rem;font-weight:700;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;}
.xp-level-num{font-family:var(--f-num);font-size:1.1rem;font-weight:800;color:var(--g900);line-height:1;}
.xp-pts{font-family:var(--f-num);font-size:.78rem;font-weight:700;color:var(--g500);}
.xp-bar-wrap{display:flex;flex-direction:column;gap:4px;}
.xp-bar-labels{display:flex;justify-content:space-between;}
.xp-bar-lbl{font-size:.59rem;font-weight:700;color:var(--g400);}
.xp-bar-bg{height:8px;background:var(--g200);border-radius:var(--rp);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);}
.xp-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--lav),var(--lav-2));
  border-radius:var(--rp);transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(123,110,246,.4);
will-change:width;transform:translateZ(0);}

/* Coin display */
.coin-display{
  display:flex;align-items:center;gap:6px;
  background:var(--amber-pale);border-radius:var(--rp);
  padding:5px 12px;font-family:var(--f-num);
  font-size:.82rem;font-weight:800;color:var(--amber);
  border:1.5px solid rgba(245,166,35,.2);
}

/* Hero banner */
.hero{
  background:linear-gradient(135deg,#6B5EE8 0%,#7B6EF6 40%,#9580F8 78%,#A794FA 100%);
  border-radius:var(--rxl);padding:22px 20px 20px;
  color:white;position:relative;overflow:hidden;
  box-shadow:0 10px 32px rgba(107,94,232,.45),0 3px 8px rgba(0,0,0,.08);
  transition:background .3s;
}
.hero::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);top:-70px;right:-50px;pointer-events:none;}
.hero::after{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-30px;right:50px;pointer-events:none;}
.hero-inner{position:relative;z-index:1;}
.hero-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);border-radius:var(--rp);padding:4px 12px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;backdrop-filter:blur(4px);}
.hero-title{font-family:var(--f-num);font-size:1.7rem;font-weight:800;line-height:1.14;margin-bottom:6px;text-shadow:0 2px 10px rgba(0,0,0,.12);}
.hero-sub{font-size:.79rem;opacity:.78;font-weight:600;line-height:1.4;}
.hero-chips{display:flex;gap:10px;margin-top:18px;}
.hero-chip{flex:1;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.26);border-radius:var(--rm);padding:11px 12px;backdrop-filter:blur(8px);transition:background .2s;}
.hero-chip:hover{background:rgba(255,255,255,.24);}
.hc-val{font-family:var(--f-num);font-size:1.5rem;font-weight:900;line-height:1;}
.hc-lbl{font-size:.59rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:4px;}

/* Daily Challenge card */
.daily-card{
  background:var(--white);border-radius:var(--rxl);padding:16px 18px;
  box-shadow:var(--sh2);border:1.5px solid var(--amber-pale);
  display:flex;flex-direction:column;gap:10px;
  transition:background .3s;
}
.daily-head{display:flex;align-items:center;justify-content:space-between;}
.daily-title{display:flex;align-items:center;gap:7px;font-family:var(--f-num);font-size:.82rem;font-weight:800;color:var(--g900);}
.daily-badge{font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--amber-pale);color:var(--amber);border-radius:var(--rp);padding:3px 10px;}
.daily-badge.done{background:var(--mint-pale);color:var(--mint);}
.daily-desc{font-size:.79rem;color:var(--g500);font-weight:600;}
.daily-prog{display:flex;flex-direction:column;gap:5px;}
.daily-prog-row{display:flex;justify-content:space-between;align-items:center;}
.daily-prog-lbl{font-size:.6rem;font-weight:700;color:var(--g400);}
.daily-prog-val{font-family:var(--f-num);font-size:.6rem;font-weight:800;color:var(--amber);}
.daily-bar-bg{height:5px;background:var(--g200);border-radius:var(--rp);overflow:hidden;}
.daily-bar-fill{height:100%;background:linear-gradient(90deg,var(--amber),#F7C26A);border-radius:var(--rp);transition:width .5s cubic-bezier(.4,0,.2,1);will-change:width;transform:translateZ(0);}
.daily-reward{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:var(--g400);}
.daily-reward span{color:var(--lav);font-weight:800;}

/* Section header */
.sec{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.sec-dot{width:29px;height:29px;border-radius:var(--rx);display:flex;align-items:center;justify-content:center;font-size:.92rem;flex-shrink:0;box-shadow:var(--sh0);}
.sec-lbl{font-family:var(--f-num);font-size:.69rem;font-weight:800;color:var(--g500);letter-spacing:.08em;text-transform:uppercase;}

.lang-row{display:flex;gap:8px;}
.lang-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:var(--rm);background:var(--white);border:2px solid var(--g200);font-family:var(--f-ui);font-size:.83rem;font-weight:700;cursor:pointer;transition:var(--spring);color:var(--g500);box-shadow:var(--sh0);}
.lang-btn:hover{transform:translateY(-2px);box-shadow:var(--sh2);}
.lang-btn.active{border-color:var(--lav);background:var(--lav-pale);color:var(--lav);box-shadow:0 4px 16px rgba(123,110,246,.2);transform:translateY(-1px);}

.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,10px);}
.diff-card{background:var(--white);border:2px solid var(--g200);border-radius:var(--rl);padding:15px 10px 13px;text-align:center;cursor:pointer;box-shadow:var(--sh0);transition:var(--spring);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;}
.diff-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--rl) var(--rl);opacity:0;transition:opacity .25s;}
.diff-card.easy::after{background:linear-gradient(90deg,#3DBFA8,#5DCFB8);}
.diff-card.medium::after{background:linear-gradient(90deg,#F5A623,#F7BC5A);}
.diff-card.hard::after{background:linear-gradient(90deg,#F0707A,#F49098);}
.diff-card.selected::after{opacity:1;}
.diff-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);}
.diff-card.selected.easy{border-color:var(--mint);background:var(--mint-pale);box-shadow:0 6px 20px rgba(61,191,168,.22);}
.diff-card.selected.medium{border-color:var(--amber);background:var(--amber-pale);box-shadow:0 6px 20px rgba(245,166,35,.22);}
.diff-card.selected.hard{border-color:var(--rose);background:var(--rose-pale);box-shadow:0 6px 20px rgba(240,112,122,.22);}
.dc-icon{font-size:1.7rem;line-height:1;}
.dc-name{font-family:var(--f-num);font-size:.83rem;font-weight:800;color:var(--g900);}
.diff-card.selected.easy .dc-name{color:var(--mint);}
.diff-card.selected.medium .dc-name{color:var(--amber);}
.diff-card.selected.hard .dc-name{color:var(--rose);}
.dc-ops{font-size:.61rem;color:var(--g400);font-weight:600;}
.dc-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:white;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.diff-card.selected.easy .dc-check{background:var(--mint);transform:scale(1);}
.diff-card.selected.medium .dc-check{background:var(--amber);transform:scale(1);}
.diff-card.selected.hard .dc-check{background:var(--rose);transform:scale(1);}

/* Game Mode cards — now 4 options with Time Attack */
.gmode-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,2vw,10px);}
.gmode-card{background:var(--white);border:2px solid var(--g200);border-radius:var(--rl);padding:14px 12px;cursor:pointer;box-shadow:var(--sh0);transition:var(--spring);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.gmode-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);}
.gmode-card.selected{border-color:var(--lav);background:var(--lav-pale);box-shadow:0 6px 20px rgba(123,110,246,.2);}
.gmode-card.ta-card.selected{border-color:var(--rose);background:var(--rose-pale);box-shadow:0 6px 20px rgba(240,112,122,.22);}
.gmc-emoji{font-size:1.45rem;}
.gmc-title{font-family:var(--f-num);font-size:.82rem;font-weight:800;color:var(--g900);}
.gmode-card.selected .gmc-title{color:var(--lav);}
.gmode-card.ta-card.selected .gmc-title{color:var(--rose);}
.gmc-sub{font-size:.6rem;color:var(--g400);font-weight:600;}
.gmc-tag{font-size:.52rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--rose-pale);color:var(--rose);border-radius:var(--rp);padding:2px 8px;margin-top:2px;}

.time-row{display:flex;gap:8px;}
.time-chip{flex:1;background:var(--white);border:2px solid var(--g200);border-radius:var(--rm);padding:11px 6px;cursor:pointer;text-align:center;box-shadow:var(--sh0);transition:var(--spring);}
.time-chip:hover{transform:translateY(-2px);box-shadow:var(--sh1);}
.time-chip.selected{border-color:var(--sky);background:var(--sky-pale);box-shadow:0 4px 16px rgba(74,173,238,.22);}
/* Hide time per question when Time Attack selected */
.ta-mode-hidden{display:none!important;}
.tc-num{font-family:var(--f-num);font-size:1.07rem;font-weight:800;color:var(--g700);}
.time-chip.selected .tc-num{color:var(--sky);}
.tc-lbl{font-size:.59rem;font-weight:700;color:var(--g400);letter-spacing:.05em;text-transform:uppercase;}

.play-cta{
  width:100%;padding:17px;border-radius:var(--rl);
  background:linear-gradient(135deg,#6B5EE8 0%,#7B6EF6 40%,#9580F8 100%);
  border:none;color:white;font-family:var(--f-num);font-size:1rem;font-weight:800;
  cursor:pointer;letter-spacing:.01em;
  box-shadow:0 8px 28px rgba(107,94,232,.48),0 2px 6px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.14) inset;
  transition:var(--ease);display:flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;
}
.play-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 60%);pointer-events:none;}
.play-cta:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(107,94,232,.56);}
.play-cta:active{transform:scale(.97);}
.play-cta{touch-action:manipulation;}
/* v14: safe-area bottom for iOS home indicator */
.app-footer,.play-cta{padding-bottom:max(0px,env(safe-area-inset-bottom,0px));}

/* menu stats-btn row */
.menu-btns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(120px,calc(50% - 4px)),1fr));gap:7px;}
.menu-icon-btn{
  padding:12px 8px;border-radius:var(--rl);
  background:var(--white);border:1.5px solid var(--g200);
  font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--g500);
  cursor:pointer;transition:var(--ease);display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:var(--sh0);touch-action:manipulation;min-height:44px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.menu-icon-btn:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--g300);}

/* ── GAME PAGE ─────────────────────────────── */
.game-body{flex:1;overflow-y:auto;padding:12px 12px 20px;display:flex;flex-direction:column;gap:10px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;}
.game-body::-webkit-scrollbar{width:0;}

/* Time Attack big countdown */
.ta-countdown{
  background:linear-gradient(135deg,#F0707A,#F5A623);
  border-radius:var(--rxl);padding:14px 20px;
  display:none;align-items:center;justify-content:space-between;
  box-shadow:0 6px 24px rgba(240,112,122,.35);
  border:1.5px solid rgba(240,112,122,.2);
  position:relative;overflow:hidden;
}
.ta-countdown.active{display:flex;}
.ta-countdown::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 60%);pointer-events:none;}
.ta-left{position:relative;z-index:1;}
.ta-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.ta-time{font-family:var(--f-num);font-size:2.8rem;font-weight:900;color:white;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.2);}
.ta-time.warn{animation:taPulse .5s ease infinite alternate;}
@keyframes taPulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.ta-right{position:relative;z-index:1;text-align:right;}
.ta-score-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.ta-score-val{font-family:var(--f-num);font-size:2rem;font-weight:900;color:white;line-height:1;}
.ta-bar-bg{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.2);}
.ta-bar{height:100%;background:white;border-radius:0;transition:width 1s linear;box-shadow:0 0 8px rgba(255,255,255,.6);will-change:width;transform:translateZ(0);}

/* XP bar inline game */
.xp-inline{
  background:var(--white);border-radius:var(--rm);padding:9px clamp(8px,2vw,12px);
  display:flex;align-items:center;gap:clamp(6px,2vw,10px);box-shadow:var(--sh0);border:1px solid rgba(255,255,255,.9);
  transition:background .3s;overflow:hidden;
}
.xp-inline-badge{font-family:var(--f-num);font-size:.75rem;font-weight:900;color:white;background:linear-gradient(135deg,var(--lav),var(--lav-2));border-radius:var(--rx);padding:3px 8px;flex-shrink:0;}
.xp-inline-bar-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.xp-inline-lbl{display:flex;justify-content:space-between;}
.xp-inline-name{font-size:.58rem;font-weight:700;color:var(--g400);}
.xp-inline-pts{font-size:.58rem;font-weight:800;color:var(--lav);}
.xp-inline-bg{height:5px;background:var(--g200);border-radius:var(--rp);overflow:hidden;}
.xp-inline-fill{height:100%;background:linear-gradient(90deg,var(--lav),var(--lav-2));border-radius:var(--rp);transition:width .5s cubic-bezier(.4,0,.2,1);will-change:width;transform:translateZ(0);}
.combo-tag{font-family:var(--f-num);font-size:clamp(.6rem,2.5vw,.72rem);font-weight:900;flex-shrink:0;padding:3px clamp(5px,2vw,9px);border-radius:var(--rp);background:var(--amber-pale);color:var(--amber);display:none;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.combo-tag.show{display:block;animation:comboPop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes comboPop{0%{transform:scale(0)}100%{transform:scale(1)}}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,1.5vw,7px);}
.sw{background:var(--white);border-radius:var(--rm);padding:11px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--sh1);border:1px solid rgba(255,255,255,.9);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,background .3s;min-width:0;contain:layout style;}
.sw:hover{transform:translateY(-2px);box-shadow:var(--sh2);}
.sw::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--rm) var(--rm) 0 0;}
.sw-score::before{background:linear-gradient(90deg,#7B6EF6,#9B8EFA);}
.sw-best::before{background:linear-gradient(90deg,#F5A623,#F7C26A);}
.sw-lives::before{background:linear-gradient(90deg,#F0707A,#F79EA4);}
.sw-time::before{background:linear-gradient(90deg,#4AADEE,#7DCDF5);}
.sw-streak::before{background:linear-gradient(90deg,#5BBF8A,#8DD9B0);}
.sw-rank::before{background:linear-gradient(90deg,#9B6EF0,#B89CF5);}
.sw-score{background:linear-gradient(160deg,#F5F3FF,white);}
.sw-best{background:linear-gradient(160deg,#FFFBF3,white);}
.sw-lives{background:linear-gradient(160deg,#FFF7F8,white);}
.sw-time{background:linear-gradient(160deg,#F5FBFF,white);}
.sw-streak{background:linear-gradient(160deg,#F4FEF8,white);}
.sw-rank{background:linear-gradient(160deg,#F8F5FF,white);}
.sw-icon{font-size:1.05rem;line-height:1;margin-top:3px;}
.sw-val{font-family:var(--f-num);font-size:clamp(.82rem,3.2vw,1.15rem);font-weight:900;color:var(--g900);line-height:1;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.sw-val.sm{font-size:.58rem!important;line-height:1.3!important;font-weight:800!important;}
.sw-lbl{font-size:.52rem;font-weight:700;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;margin-top:1px;}

/* ── POWER-UPS PANEL ──────────────────────── */
.powerup-panel{
  background:var(--white);border-radius:var(--rxl);padding:12px 14px;
  box-shadow:var(--sh1);border:1px solid rgba(255,255,255,.9);
  display:flex;flex-direction:column;gap:8px;
  transition:background .3s;
}
.pu-header{display:flex;align-items:center;justify-content:space-between;}
.pu-title{font-family:var(--f-num);font-size:.72rem;font-weight:800;color:var(--g500);letter-spacing:.07em;text-transform:uppercase;}
.pu-coins{display:flex;align-items:center;gap:5px;font-family:var(--f-num);font-size:.8rem;font-weight:800;color:var(--amber);}
.pu-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,1.5vw,8px);}
.pu-btn{
  padding:10px 4px;border-radius:var(--rm);
  background:var(--g50);border:1.5px solid var(--g200);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;transition:var(--spring);position:relative;overflow:hidden;
  min-width:0;touch-action:manipulation;
}
.pu-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh2);}
.pu-btn:active:not(:disabled){transform:scale(.95);}
.pu-btn:disabled{opacity:.45;cursor:not-allowed;}
.pu-btn.used{opacity:.5;pointer-events:none;}
.pu-icon{font-size:clamp(1rem,3.5vw,1.3rem);line-height:1;}
.pu-name{font-size:clamp(.52rem,.1rem + 1.5vw,.6rem);font-weight:800;color:var(--g700);letter-spacing:.03em;white-space:nowrap;}
.pu-cost{display:flex;align-items:center;gap:2px;font-size:.58rem;font-weight:800;color:var(--amber);}
.pu-cost-used{font-size:.58rem;font-weight:800;color:var(--g300);}
.pu-badge{position:absolute;top:4px;right:4px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:900;color:white;}
/* Per power-up color themes */
.pu-btn.freeze:hover:not(:disabled){border-color:var(--sky);background:var(--sky-pale);}
.pu-btn.freeze:hover:not(:disabled) .pu-name{color:var(--sky);}
.pu-btn.elim:hover:not(:disabled){border-color:var(--rose);background:var(--rose-pale);}
.pu-btn.elim:hover:not(:disabled) .pu-name{color:var(--rose);}
.pu-btn.dblxp:hover:not(:disabled){border-color:var(--violet);background:var(--lav-pale);}
.pu-btn.dblxp:hover:not(:disabled) .pu-name{color:var(--violet);}
.pu-btn.extra:hover:not(:disabled){border-color:var(--mint);background:var(--mint-pale);}
.pu-btn.extra:hover:not(:disabled) .pu-name{color:var(--mint);}
/* active glow states */
.pu-btn.active-pu.freeze{border-color:var(--sky);background:var(--sky-pale);animation:puActive .8s ease infinite alternate;}
.pu-btn.active-pu.dblxp{border-color:var(--violet);background:var(--lav-pale);animation:puActive .8s ease infinite alternate;}
@keyframes puActive{from{box-shadow:0 0 0 0 transparent}to{box-shadow:0 0 0 4px rgba(74,173,238,.3)}}
/* freeze timer visual overlay */
.timer-frozen .timer-fill{background:linear-gradient(90deg,var(--sky),#7DCDF5)!important;box-shadow:0 0 10px rgba(74,173,238,.6)!important;transition:none!important;will-change:width;transform:translateZ(0);}
.timer-frozen .timer-num{color:var(--sky)!important;}

.q-card{background:var(--white);border-radius:var(--rxl);box-shadow:var(--sh3);border:1px solid rgba(255,255,255,.95);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:background .3s;contain:layout style;}
.q-stripe{height:4px;background:linear-gradient(90deg,#6B5EE8,#7B6EF6,#4AADEE,#3DBFA8);background-size:200% 100%;animation:stripeFlow 3s linear infinite;}
@keyframes stripeFlow{0%{background-position:0% 0%}100%{background-position:200% 0%}}
.q-inner{padding:clamp(12px,3vw,16px) clamp(12px,3vw,16px) clamp(14px,3vw,18px);display:flex;flex-direction:column;gap:clamp(8px,2vw,12px);}
.timer-row{display:flex;align-items:center;gap:10px;}
.timer-bg{flex:1;height:7px;background:var(--g200);border-radius:var(--rp);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06);contain:layout;}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#7B6EF6,#4AADEE);border-radius:var(--rp);transition:width 1s linear,background .5s;box-shadow:0 0 6px rgba(123,110,246,.4);}
.timer-fill.warn{background:linear-gradient(90deg,#F0707A,#F5A623);box-shadow:0 0 8px rgba(240,112,122,.5);}
.timer-fill.glow{box-shadow:0 0 10px rgba(61,191,168,.6),0 0 20px rgba(61,191,168,.3);}
.timer-num{font-family:var(--f-num);font-size:.84rem;font-weight:800;color:var(--g500);min-width:24px;text-align:right;transition:color .3s;}
.timer-num.warn{color:var(--rose);}
.q-meta{display:flex;align-items:center;gap:6px;}
.q-tag{font-size:.59rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:var(--rp);}
.qt-easy{background:var(--mint-pale);color:var(--mint);}
.qt-medium{background:var(--amber-pale);color:var(--amber);}
.qt-hard{background:var(--rose-pale);color:var(--rose);}
.qt-practice{background:var(--sky-pale);color:var(--sky);}
.qt-challenge{background:var(--lav-pale);color:var(--lav);}
.qt-endless{background:#EDE9FD;color:#7B6EF6;}
.qt-timeattack{background:var(--rose-pale);color:var(--rose);}
.prog-wrap{display:flex;flex-direction:column;gap:5px;}
.prog-head{display:flex;justify-content:space-between;align-items:center;}
.prog-title{font-size:.62rem;font-weight:700;color:var(--g400);}
.prog-count{font-family:var(--f-num);font-size:.62rem;font-weight:800;color:var(--g500);}
.prog-bg{height:6px;background:var(--g200);border-radius:var(--rp);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.05);}
.prog-bar{height:100%;background:linear-gradient(90deg,#3DBFA8,#7B6EF6);border-radius:var(--rp);transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 5px rgba(123,110,246,.3);will-change:width;transform:translateZ(0);}
.prog-bar.full{box-shadow:0 0 12px rgba(61,191,168,.5),0 0 24px rgba(61,191,168,.25);animation:progGlow .8s ease;}
@keyframes progGlow{0%,100%{opacity:1}50%{opacity:.7}}
.q-area{text-align:center;padding:10px 0 2px;display:flex;flex-direction:column;align-items:center;gap:7px;}
.q-eyebrow{font-size:.59rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--g400);display:flex;align-items:center;gap:6px;}
.q-dot{width:4px;height:4px;border-radius:50%;background:#C5C0F0;}
.q-eq{font-family:var(--f-num);font-size:clamp(1.4rem,7vw,2.8rem);font-weight:900;color:var(--g900);letter-spacing:-.04em;line-height:1.1;animation:qPop .3s cubic-bezier(.22,1,.36,1);word-break:break-word;}
@keyframes qPop{from{opacity:0;transform:scale(.86) translateY(-8px)}to{opacity:1;transform:none}}
.ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,2vw,10px);}
.ans-btn{padding:20px 10px;border-radius:var(--rl);border:2.5px solid var(--g200);background:var(--white);font-family:var(--f-num);font-size:clamp(1.45rem,5.5vw,1.85rem);font-weight:900;color:var(--g900);cursor:pointer;transition:var(--spring);position:relative;overflow:hidden;box-shadow:var(--sh1);animation:qPop .3s cubic-bezier(.22,1,.36,1);touch-action:manipulation;-webkit-user-select:none;user-select:none;}
.ans-btn:hover:not(:disabled){border-color:var(--lav);background:linear-gradient(160deg,var(--lav-ultra),var(--lav-pale));color:var(--lav);transform:translateY(-5px) scale(1.02);box-shadow:0 10px 28px rgba(123,110,246,.22),var(--sh2);}
.ans-btn:active:not(:disabled){transform:scale(.95);}
/* eliminated wrong answer in 50/50 mode */
.ans-btn.eliminated{opacity:.22!important;pointer-events:none;transform:scale(.95)!important;border-style:dashed!important;}
.ans-btn.fc{border-color:var(--mint)!important;background:linear-gradient(160deg,var(--mint-pale),#D8F5EF)!important;color:var(--mint)!important;animation:aPop .38s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(61,191,168,.3)!important;}
.ans-btn.fw{border-color:var(--rose)!important;background:linear-gradient(160deg,var(--rose-pale),#FDDDE0)!important;color:var(--rose)!important;animation:aShk .38s ease;box-shadow:0 6px 20px rgba(240,112,122,.22)!important;}
@keyframes aPop{0%{transform:scale(1)}40%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes aShk{0%,100%{transform:none}22%{transform:translateX(-8px)}44%{transform:translateX(8px)}66%{transform:translateX(-4px)}88%{transform:translateX(4px)}}
.ans-btn .ripple{position:absolute;border-radius:50%;background:rgba(123,110,246,.14);transform:scale(0);animation:ink .5s linear;pointer-events:none;}
@keyframes ink{to{transform:scale(5);opacity:0}}
.fb-zone{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;}
.fb-msg{font-family:var(--f-num);font-size:1rem;font-weight:800;animation:qPop .2s ease;}
.fb-msg.correct{color:var(--mint);}
.fb-msg.wrong{color:var(--rose);}
.fb-msg.timeout{color:var(--amber);}
.fb-expl{display:none;font-size:.78rem;font-weight:600;color:var(--g500);background:linear-gradient(135deg,var(--lav-ultra),var(--sky-pale));border-radius:var(--rs);padding:7px 14px;border:1px solid var(--g200);animation:qPop .2s ease;}
.fb-expl.show{display:block;}
/* Double XP active badge */
.dblxp-active-badge{
  display:none;align-items:center;gap:4px;
  background:linear-gradient(90deg,var(--violet),var(--lav));
  color:white;font-size:.6rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--rp);
}
.dblxp-active-badge.show{display:flex;animation:comboPop .3s cubic-bezier(.34,1.56,.64,1);}

/* Controls */
.ctrl-panel{background:var(--white);border-radius:var(--rxl);padding:14px 14px 12px;box-shadow:var(--sh1);border:1px solid rgba(255,255,255,.9);display:flex;flex-direction:column;gap:11px;transition:background .3s;}
.ctrl-row{display:flex;align-items:center;gap:10px;}
.ctrl-lbl{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--g400);flex:0 0 42px;}
.ctrl-chips{display:flex;gap:6px;flex:1;flex-wrap:wrap;}
.chip{padding:7px 13px;border-radius:var(--rp);background:var(--g50);border:1.5px solid var(--g200);font-size:.72rem;font-weight:700;color:var(--g500);cursor:pointer;transition:var(--ease);white-space:nowrap;}
.chip:hover{border-color:#C5C0F0;color:var(--lav);background:var(--lav-ultra);transform:translateY(-1px);}
.chip.on{border-color:var(--lav);background:var(--lav-pale);color:var(--lav);}
.chip.on-mint{border-color:var(--mint);background:var(--mint-pale);color:var(--mint);}
.chip.on-rose{border-color:var(--rose);background:var(--rose-pale);color:var(--rose);}
.chip.on-sky{border-color:var(--sky);background:var(--sky-pale);color:var(--sky);}
.ctrl-div{height:1px;background:var(--g200);margin:0 -1px;}
.snd-row{display:flex;align-items:center;gap:8px;flex:1;}
.snd-lbl{font-size:.72rem;font-weight:600;color:var(--g500);}
.toggle{width:46px;height:26px;border-radius:var(--rp);background:var(--g300);position:relative;cursor:pointer;transition:background .25s;border:none;outline:none;flex-shrink:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.1);}
.toggle.on{background:var(--lav);}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:left .25s cubic-bezier(.4,0,.2,1);}
.toggle.on::after{left:23px;}
.restart-cta{width:100%;padding:12px;border-radius:var(--rl);background:var(--g50);border:1.5px solid var(--g200);font-family:var(--f-ui);font-size:.88rem;font-weight:800;color:var(--g500);cursor:pointer;transition:var(--ease);display:flex;align-items:center;justify-content:center;gap:7px;}
.restart-cta:hover{background:var(--rose-pale);border-color:var(--rose);color:var(--rose);transform:translateY(-1px);}

/* Card animations */
@keyframes cShk{0%,100%{transform:none}18%{transform:translateX(-9px)}36%{transform:translateX(9px)}54%{transform:translateX(-5px)}72%{transform:translateX(5px)}90%{transform:translateX(-2px)}}
@keyframes cBnc{0%,100%{transform:scale(1)}35%{transform:scale(1.025)}65%{transform:scale(.982)}}
.q-card.shk{animation:cShk .4s ease;}
.q-card.bnc{animation:cBnc .36s ease;}
@keyframes sBurst{0%{transform:scale(1)}25%{transform:scale(1.35)}60%{transform:scale(.92)}100%{transform:scale(1)}}
.streak-burst{animation:sBurst .55s cubic-bezier(.34,1.56,.64,1);}
@keyframes vFlash{0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
.vf{animation:vFlash .35s cubic-bezier(.34,1.56,.64,1);}
.score-pop{position:fixed;font-family:var(--f-num);font-size:clamp(1.4rem,5vw,1.8rem);font-weight:900;color:var(--lav);pointer-events:none;animation:sPop .9s ease forwards;z-index:999;text-shadow:0 2px 8px rgba(123,110,246,.3);will-change:transform,opacity;}
@keyframes sPop{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.5)}}

/* ── MODAL BASE ─────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(28,26,56,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,20px)) max(20px,env(safe-area-inset-right,20px)) max(20px,env(safe-area-inset-bottom,20px)) max(20px,env(safe-area-inset-left,20px));opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-card{width:100%;max-width:355px;background:var(--white);border-radius:var(--rxl);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100dvh - 40px);max-height:calc(100vh - 40px);box-shadow:0 28px 80px rgba(28,26,56,.30),0 8px 24px rgba(0,0,0,.1);transform:scale(.88) translateY(24px);transition:transform .38s cubic-bezier(.22,1,.36,1),background .3s;isolation:isolate;}
.modal-overlay.open .modal-card{transform:none;}
.modal-hero{background:linear-gradient(135deg,#6B5EE8,#7B6EF6,#9580F8);padding:30px 24px 26px;text-align:center;position:relative;overflow:hidden;transition:background .3s;}
.modal-hero::before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1);top:-55px;right:-35px;pointer-events:none;}
.modal-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 50%);pointer-events:none;}
.modal-emoji{font-size:3.4rem;display:block;margin-bottom:8px;animation:ePop .55s .1s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes ePop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.modal-title{font-family:var(--f-num);font-size:1.6rem;font-weight:900;color:white;text-shadow:0 2px 10px rgba(0,0,0,.14);}
.modal-subtitle{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.78);margin-top:5px;line-height:1.4;}
.modal-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:12px;background:var(--white);transition:background .3s;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mstat{background:linear-gradient(160deg,var(--lav-ultra),white);border-radius:var(--rm);padding:15px 12px;text-align:center;border:1.5px solid var(--g200);box-shadow:var(--sh0);}
.ms-val{font-family:var(--f-num);font-size:1.75rem;font-weight:900;color:var(--lav);line-height:1;}
.ms-lbl{font-size:.59rem;font-weight:700;color:var(--g400);letter-spacing:.08em;text-transform:uppercase;margin-top:5px;}
/* Time Attack result extra stat */
.ta-result-stat{background:linear-gradient(160deg,var(--rose-pale),white);border-color:var(--rose);}
.ta-result-stat .ms-val{color:var(--rose);}
.modal-rank{background:linear-gradient(135deg,var(--lav-pale),var(--sky-pale));border:1.5px solid var(--g200);border-radius:var(--rm);padding:12px 16px;text-align:center;font-family:var(--f-num);font-size:.9rem;font-weight:800;color:var(--lav);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--sh0);}
.modal-primary{width:100%;padding:16px;border-radius:var(--rl);background:linear-gradient(135deg,#6B5EE8,#7B6EF6);border:none;color:white;font-family:var(--f-num);font-size:.96rem;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(107,94,232,.42),0 1px 0 rgba(255,255,255,.14) inset;transition:var(--ease);position:relative;overflow:hidden;}
.modal-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 60%);pointer-events:none;}
.modal-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(107,94,232,.52);}
.modal-primary:active{transform:scale(.97);}
.modal-ghost{width:100%;padding:13px;border-radius:var(--rl);background:transparent;border:1.5px solid var(--g200);color:var(--g500);font-family:var(--f-num);font-size:.88rem;font-weight:700;cursor:pointer;transition:var(--ease);}
.modal-ghost:hover{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);}

/* ── TOAST / ACHIEVEMENT POPUP ──────────────── */
.toast-container{position:fixed;top:max(88px,calc(70px + env(safe-area-inset-top,0px)));left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:340px;max-width:calc(100vw - 24px);}
.toast{background:var(--white);border-radius:var(--rl);padding:12px 16px;box-shadow:0 8px 32px rgba(28,26,56,.18),0 2px 8px rgba(0,0,0,.08);border:1.5px solid var(--g200);display:flex;align-items:center;gap:12px;animation:toastIn .4s cubic-bezier(.34,1.56,.64,1) both;pointer-events:all;transition:background .3s;}
.toast.out{animation:toastOut .35s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-16px) scale(.88)}}
.toast-icon{font-size:1.5rem;flex-shrink:0;}
.toast-body{flex:1;}
.toast-head{font-family:var(--f-num);font-size:.75rem;font-weight:800;color:var(--g900);}
.toast-sub{font-size:.68rem;font-weight:600;color:var(--g500);margin-top:1px;}
.toast-close{font-size:.9rem;color:var(--g400);cursor:pointer;flex-shrink:0;padding:2px 6px;}
.toast-close:hover{color:var(--g700);}
.combo-popup{position:fixed;bottom:clamp(80px,18dvh,160px);left:50%;transform:translateX(-50%);z-index:400;pointer-events:none;font-family:var(--f-num);font-size:1.4rem;font-weight:900;color:var(--amber);text-shadow:0 2px 8px rgba(245,166,35,.4);animation:comboBig .6s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes comboBig{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(20px)}60%{opacity:1;transform:translateX(-50%) scale(1.15) translateY(-5px)}100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}
.combo-popup.fade{animation:comboFade .5s ease forwards;}
@keyframes comboFade{to{opacity:0;transform:translateX(-50%) scale(.8) translateY(-20px)}}

/* Power-up activation flash */
.pu-flash{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;
}
.pu-flash.freeze-flash{background:radial-gradient(ellipse at center,rgba(74,173,238,.25) 0%,transparent 70%);animation:puFlash .6s ease forwards;}
.pu-flash.elim-flash{background:radial-gradient(ellipse at center,rgba(240,112,122,.2) 0%,transparent 70%);animation:puFlash .6s ease forwards;}
.pu-flash.dblxp-flash{background:radial-gradient(ellipse at center,rgba(155,110,240,.2) 0%,transparent 70%);animation:puFlash .6s ease forwards;}
.pu-flash.extra-flash{background:radial-gradient(ellipse at center,rgba(61,191,168,.2) 0%,transparent 70%);animation:puFlash .6s ease forwards;}
@keyframes puFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* ── STATS MODAL ─────────────────────────────── */
.stats-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-tile{background:var(--g50);border-radius:var(--rm);padding:14px 12px;text-align:center;border:1px solid var(--g200);}
.stat-tile-val{font-family:var(--f-num);font-size:1.5rem;font-weight:900;color:var(--lav);line-height:1;}
.stat-tile-lbl{font-size:.59rem;font-weight:700;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;margin-top:4px;}
.stat-tile.accent-mint .stat-tile-val{color:var(--mint);}
.stat-tile.accent-rose .stat-tile-val{color:var(--rose);}
.stat-tile.accent-amber .stat-tile-val{color:var(--amber);}
.stat-tile.accent-sky .stat-tile-val{color:var(--sky);}

/* ── ACHIEVEMENTS MODAL ──────────────────────── */
.ach-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
.ach-list::-webkit-scrollbar{width:0;}
.ach-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--rm);border:1.5px solid var(--g200);background:var(--g50);}
.ach-item.unlocked{background:linear-gradient(135deg,var(--lav-ultra),white);border-color:var(--lav);}
.ach-icon{font-size:1.6rem;flex-shrink:0;}
.ach-body{flex:1;}
.ach-name{font-family:var(--f-num);font-size:.8rem;font-weight:800;color:var(--g900);}
.ach-item.unlocked .ach-name{color:var(--lav);}
.ach-desc{font-size:.66rem;font-weight:600;color:var(--g400);margin-top:2px;}
.ach-status{font-size:.65rem;font-weight:800;color:var(--g300);flex-shrink:0;}
.ach-item.unlocked .ach-status{color:var(--mint);}

/* Endless difficulty indicator */
.endless-diff{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:var(--rp);background:var(--rose-pale);color:var(--rose);}

/* Level up splash */
.lvlup-splash{position:fixed;inset:0;z-index:600;background:rgba(123,110,246,.15);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
.lvlup-splash.show{animation:lvlupIn .5s ease forwards;}
.lvlup-splash.hide{animation:lvlupOut .4s ease forwards;}
@keyframes lvlupIn{to{opacity:1}}
@keyframes lvlupOut{from{opacity:1}to{opacity:0}}
.lvlup-card{background:white;border-radius:var(--rxl);padding:36px 28px;text-align:center;box-shadow:var(--sh4);transform:scale(.7);animation:lvlupCard .6s .1s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes lvlupCard{to{transform:scale(1)}}
.lvlup-emoji{font-size:4rem;display:block;margin-bottom:10px;}
.lvlup-title{font-family:var(--f-num);font-size:1.6rem;font-weight:900;color:var(--lav);}
.lvlup-sub{font-size:.85rem;color:var(--g400);font-weight:600;margin-top:5px;}

/* Time Attack end screen extra stat */
.ta-extra-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ta-extra-stats .mstat{padding:11px 8px;}
.ta-extra-stats .ms-val{font-size:1.3rem;}

/* ── BOSS ROUND ──────────────────────────────── */
.boss-banner{
  background:linear-gradient(135deg,#1C1A38 0%,#3B1A4A 40%,#4A1A3A 100%);
  border-radius:var(--rxl);padding:14px 18px;
  display:none;align-items:center;gap:14px;
  border:2px solid rgba(240,112,122,.5);
  box-shadow:0 0 0 4px rgba(240,112,122,.1),0 8px 28px rgba(28,10,40,.5);
  position:relative;overflow:hidden;
}
.boss-banner.active{display:flex;}
.boss-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(240,112,122,.08),transparent);animation:bossGlow 2s ease infinite;}
@keyframes bossGlow{0%,100%{opacity:.3}50%{opacity:1}}
.boss-icon{font-size:2.2rem;animation:bossPulse 1.2s ease infinite alternate;flex-shrink:0;}
@keyframes bossPulse{from{transform:scale(1)}to{transform:scale(1.15)}}
.boss-info{flex:1;}
.boss-label{font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,112,122,.9);}
.boss-title{font-family:var(--f-num);font-size:1rem;font-weight:900;color:white;line-height:1.2;margin-top:2px;}
.boss-reward{display:flex;align-items:center;gap:6px;margin-top:5px;}
.boss-reward-chip{font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:var(--rp);background:rgba(245,166,35,.2);color:var(--amber);border:1px solid rgba(245,166,35,.3);}
/* Boss card stripe overrides */
.boss-mode .q-stripe{background:linear-gradient(90deg,#F0707A,#F5A623,#F0707A);background-size:200% 100%;animation:bossStripe 1.5s linear infinite;}
@keyframes bossStripe{0%{background-position:0%}100%{background-position:200%}}
.boss-mode .q-card{border-color:rgba(240,112,122,.4);box-shadow:0 8px 32px rgba(240,112,122,.2),var(--sh3);}
body.dark .boss-banner{background:linear-gradient(135deg,#2A0A18 0%,#3B1A2A 100%);}

/* ── LOGIN STREAK ────────────────────────────── */
.streak-card{
  background:linear-gradient(135deg,#F5A623 0%,#F0707A 100%);
  border-radius:var(--rxl);padding:16px 18px;color:white;
  position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(245,166,35,.35);
}
.streak-card::before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1);top:-40px;right:-30px;}
.streak-card-inner{position:relative;z-index:1;}
.streak-top{display:flex;align-items:center;justify-content:space-between;}
.streak-lbl{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75;}
.streak-badge{font-size:.6rem;font-weight:800;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);border-radius:var(--rp);padding:3px 10px;}
.streak-val{font-family:var(--f-num);font-size:3rem;font-weight:900;line-height:1;margin:6px 0 2px;}
.streak-sub{font-size:.75rem;opacity:.82;font-weight:600;}
.streak-dots{display:flex;gap:6px;margin-top:12px;}
.streak-dot{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.streak-dot.done{background:rgba(255,255,255,.9);border-color:white;}
.streak-dot.today{background:rgba(255,255,255,.4);border-color:white;animation:todayPulse .8s ease infinite alternate;}
@keyframes todayPulse{from{box-shadow:0 0 0 0 rgba(255,255,255,.4)}to{box-shadow:0 0 0 6px rgba(255,255,255,.1)}}

/* ── PRESTIGE / SEASON ───────────────────────── */
.prestige-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--rp);
  background:linear-gradient(90deg,#F5A623,#F0707A);color:white;
  box-shadow:0 2px 8px rgba(245,166,35,.3);
}
/* Prestige confirm modal */
.prestige-info{background:var(--lav-pale);border:1.5px solid var(--lav);border-radius:var(--rm);padding:14px 16px;font-size:.8rem;font-weight:600;color:var(--g700);line-height:1.5;}
body.dark .prestige-info{background:var(--lav-ultra);color:var(--g700);}

/* ── AVATAR CUSTOMIZATION ────────────────────── */
.avatar-modal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.av-opt{
  width:100%;aspect-ratio:1;border-radius:var(--rm);border:2.5px solid var(--g200);
  background:var(--g50);cursor:pointer;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
  transition:var(--spring);
}
.av-opt:hover{transform:scale(1.1);border-color:var(--lav);}
.av-opt.selected{border-color:var(--lav);background:var(--lav-pale);box-shadow:0 4px 12px rgba(123,110,246,.25);}
body.dark .av-opt{background:#252343;border-color:#2E2B50;}
body.dark .av-opt.selected{background:var(--lav-pale);}
.color-swatch-row{display:flex;gap:8px;flex-wrap:wrap;}
.color-swatch{
  width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid transparent;
  transition:var(--spring);flex-shrink:0;
}
.color-swatch:hover{transform:scale(1.15);}
.color-swatch.selected{border-color:white;box-shadow:0 0 0 3px var(--lav),0 4px 10px rgba(0,0,0,.2);}
.avatar-preview{
  width:70px;height:70px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;border:3px solid rgba(255,255,255,.5);
  box-shadow:var(--sh2);
}

/* ── HINT SYSTEM ─────────────────────────────── */
.hint-btn{
  width:100%;padding:10px;border-radius:var(--rm);
  background:var(--g50);border:1.5px dashed var(--g300);
  font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--g500);
  cursor:pointer;transition:var(--ease);display:flex;align-items:center;justify-content:center;gap:7px;
}
.hint-btn:hover{background:var(--amber-pale);border-color:var(--amber);color:var(--amber);}
.hint-btn:disabled{opacity:.45;cursor:not-allowed;}
body.dark .hint-btn{background:#252343;border-color:#3D3A60;color:var(--g400);}
.hint-reveal{
  display:none;background:linear-gradient(135deg,var(--amber-pale),var(--sky-pale));
  border:1.5px solid var(--g200);border-radius:var(--rm);
  padding:10px 14px;font-size:.8rem;font-weight:700;color:var(--g700);
  text-align:center;animation:qPop .25s ease;
}
.hint-reveal.show{display:block;}

/* ── KIDS MODE ───────────────────────────────── */
body.kids .q-eq{font-size:clamp(3.5rem,13vw,4.5rem);color:var(--lav);}
body.kids .ans-btn{
  padding:24px 10px;font-size:clamp(1.7rem,6.5vw,2.2rem);
  border-radius:var(--r2xl);border-width:3px;
}
body.kids .q-stripe{height:6px;background:linear-gradient(90deg,#F0707A,#F5A623,#3DBFA8,#4AADEE,#9B6EF0);background-size:300% 100%;animation:kidsStripe 2s linear infinite;}
@keyframes kidsStripe{0%{background-position:0%}100%{background-position:300%}}
body.kids .hdr{background:linear-gradient(135deg,#F0707A,#F5A623,#3DBFA8);}
body.kids .play-cta{background:linear-gradient(135deg,#F0707A,#F5A623);}
.kids-balloon{position:fixed;pointer-events:none;font-size:2rem;z-index:50;animation:balloonFloat 3s ease-in forwards;}
@keyframes balloonFloat{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(-200px) rotate(20deg)}}

/* ── LEADERBOARD ─────────────────────────────── */
.lb-list{display:flex;flex-direction:column;gap:8px;}
.lb-row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-radius:var(--rm);background:var(--g50);border:1.5px solid var(--g200);
  transition:var(--ease);
}
.lb-row:hover{transform:translateX(2px);}
.lb-row.gold{background:linear-gradient(135deg,#FEF3DC,white);border-color:var(--amber);}
.lb-row.silver{background:linear-gradient(135deg,#F5F4F8,white);border-color:#B0B0C8;}
.lb-row.bronze{background:linear-gradient(135deg,#FDF0EA,white);border-color:#D4875A;}
.lb-row.me{border-color:var(--lav);background:var(--lav-pale);}
.lb-rank{font-family:var(--f-num);font-size:1rem;font-weight:900;min-width:24px;text-align:center;}
.lb-medal{font-size:1.2rem;flex-shrink:0;}
.lb-body{flex:1;}
.lb-name{font-family:var(--f-num);font-size:.82rem;font-weight:800;color:var(--g900);}
.lb-detail{font-size:.62rem;font-weight:600;color:var(--g400);margin-top:1px;}
.lb-score{font-family:var(--f-num);font-size:1.1rem;font-weight:900;color:var(--lav);}
.lb-row.gold .lb-score{color:var(--amber);}
body.dark .lb-row{background:#252343;border-color:#2E2B50;}
body.dark .lb-row.gold{background:linear-gradient(135deg,#2A2010,#23214A);border-color:var(--amber);}
body.dark .lb-row.silver{background:linear-gradient(135deg,#22203A,#23214A);}
body.dark .lb-row.bronze{background:linear-gradient(135deg,#2A1808,#23214A);}
body.dark .lb-row.me{background:var(--lav-pale);}

/* ── SHARE RESULT ────────────────────────────── */
.share-canvas-wrap{border-radius:var(--rm);overflow:hidden;border:2px solid var(--g200);margin-bottom:4px;}
#shareCanvas{display:block;width:100%;}
.share-btn-row{display:flex;gap:8px;}
.share-btn{flex:1;padding:12px;border-radius:var(--rl);border:1.5px solid var(--g200);background:var(--g50);font-family:var(--f-ui);font-size:.82rem;font-weight:700;color:var(--g500);cursor:pointer;transition:var(--ease);display:flex;align-items:center;justify-content:center;gap:6px;}
.share-btn:hover{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);transform:translateY(-1px);}
body.dark .share-btn{background:#252343;border-color:#2E2B50;color:var(--g400);}

/* ── ADAPTIVE DIFFICULTY indicator ──────────── */
.adaptive-badge{
  display:none;align-items:center;gap:4px;
  font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--rp);
}
.adaptive-badge.show{display:inline-flex;}
.adaptive-up{background:var(--rose-pale);color:var(--rose);}

/* ── ONBOARDING TUTORIAL ──────────────────── */
.onboard-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(28,26,56,.72);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:0;
  animation:obIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes obIn{from{opacity:0}to{opacity:1}}
.onboard-overlay.ob-out{animation:obOut .3s ease forwards;}
@keyframes obOut{to{opacity:0;transform:scale(.97)}}
.onboard-card{
  width:100%;max-width:420px;
  background:var(--white);border-radius:var(--r2xl) var(--r2xl) 0 0;
  padding:0 0 32px;overflow:hidden;
  box-shadow:0 -8px 40px rgba(100,90,200,.25);
  animation:obCardIn .42s .06s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes obCardIn{from{transform:translateY(100%)}to{transform:none}}
.ob-progress{display:flex;gap:6px;padding:18px 24px 0;}
.ob-dot{flex:1;height:4px;border-radius:4px;background:var(--g200);transition:background .3s;}
.ob-dot.done{background:var(--lav);}
.ob-dot.active{background:linear-gradient(90deg,var(--lav),var(--lav-2));box-shadow:0 0 8px rgba(123,110,246,.4);}
.ob-hero{
  background:linear-gradient(135deg,#6B5EE8,#7B6EF6,#9580F8);
  margin:16px 20px 0;border-radius:var(--rxl);
  padding:28px 24px 24px;text-align:center;color:white;
  position:relative;overflow:hidden;
}
.ob-hero::before{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);top:-50px;right:-40px;}
.ob-hero-inner{position:relative;z-index:1;}
.ob-emoji{font-size:3.2rem;display:block;margin-bottom:10px;animation:ePop .5s .15s cubic-bezier(.34,1.56,.64,1) both;}
.ob-title{font-family:var(--f-num);font-size:1.3rem;font-weight:900;margin-bottom:6px;}
.ob-desc{font-size:.82rem;font-weight:600;opacity:.85;line-height:1.5;}
.ob-body{padding:16px 20px 0;}
.ob-tips{display:flex;flex-direction:column;gap:8px;}
.ob-tip{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--rm);
  background:var(--g50);border:1.5px solid var(--g200);
  animation:obTip .35s both;
}
.ob-tip:nth-child(1){animation-delay:.1s}
.ob-tip:nth-child(2){animation-delay:.18s}
.ob-tip:nth-child(3){animation-delay:.26s}
@keyframes obTip{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.ob-tip-icon{font-size:1.4rem;flex-shrink:0;}
.ob-tip-text{font-size:.8rem;font-weight:600;color:var(--g700);line-height:1.4;}
.ob-actions{display:flex;gap:10px;padding:18px 20px 0;}
.ob-skip{flex:0 0 auto;padding:14px 18px;border-radius:var(--rl);border:1.5px solid var(--g200);background:transparent;font-family:var(--f-num);font-size:.82rem;font-weight:700;color:var(--g400);cursor:pointer;transition:var(--ease);}
.ob-skip:hover{background:var(--g100);border-color:var(--g300);}
.ob-next{flex:1;padding:14px;border-radius:var(--rl);background:linear-gradient(135deg,#6B5EE8,#7B6EF6);border:none;color:white;font-family:var(--f-num);font-size:.92rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(107,94,232,.4),0 1px 0 rgba(255,255,255,.14) inset;transition:var(--ease);position:relative;overflow:hidden;}
.ob-next::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 60%);pointer-events:none;}
.ob-next:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(107,94,232,.5);}
.ob-next:active{transform:scale(.97);}
body.dark .onboard-card{background:#1E1C3A;}
body.dark .ob-tip{background:#252343;border-color:#2E2B50;}
body.dark .ob-tip-text{color:var(--g700);}
body.dark .ob-skip{border-color:#2E2B50;color:#A09DC8;}

/* ── PARTICLE / CONFETTI ──────────────────── */
.particle-canvas{
  position:fixed;inset:0;z-index:800;pointer-events:none;
}

/* ── SOUND PACK SELECTOR ──────────────────── */
.sound-pack-row{display:flex;gap:7px;flex-wrap:wrap;}
.sp-btn{
  flex:1;min-width:80px;
  padding:9px 8px;border-radius:var(--rm);
  border:1.5px solid var(--g200);background:var(--g50);
  font-family:var(--f-ui);font-size:.72rem;font-weight:700;
  color:var(--g500);cursor:pointer;transition:var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.sp-btn:hover{border-color:var(--lav);background:var(--lav-pale);}
.sp-btn.selected{border-color:var(--lav);background:var(--lav-pale);color:var(--lav);}
.sp-btn-icon{font-size:1.2rem;}
.sp-btn-lbl{font-size:.64rem;text-align:center;line-height:1.2;}
body.dark .sp-btn{background:#252343;border-color:#2E2B50;color:#A09DC8;}
body.dark .sp-btn.selected{background:var(--lav-pale);border-color:var(--lav);color:#B8B0F8;}

/* ══════════════════════════════════════════════
   QUEST SYSTEM
══════════════════════════════════════════════ */
.quest-card{
  background:var(--white);border-radius:var(--rxl);padding:16px 18px;
  box-shadow:var(--sh2);border:1px solid rgba(255,255,255,.95);
  display:flex;flex-direction:column;gap:12px;
  transition:background .3s;
}
.quest-head{display:flex;align-items:center;justify-content:space-between;}
.quest-title-row{display:flex;align-items:center;gap:7px;font-family:var(--f-num);font-size:.82rem;font-weight:800;color:var(--g900);}
.quest-refresh-btn{
  font-size:.68rem;font-weight:700;color:var(--g400);
  background:var(--g100);border:1px solid var(--g200);
  border-radius:var(--rp);padding:3px 10px;cursor:pointer;
  transition:var(--ease);
}
.quest-refresh-btn:hover{background:var(--lav-pale);color:var(--lav);border-color:var(--lav);}
.quest-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--rm);
  border:1.5px solid var(--g200);background:var(--g50);
  transition:var(--ease);position:relative;overflow:hidden;
}
.quest-item.done{border-color:var(--mint);background:var(--mint-pale);}
.quest-item.expired{opacity:.5;border-style:dashed;}
.quest-icon{font-size:1.3rem;flex-shrink:0;}
.quest-body{flex:1;min-width:0;}
.quest-desc{font-size:.76rem;font-weight:700;color:var(--g700);line-height:1.3;}
.quest-meta{display:flex;align-items:center;gap:6px;margin-top:4px;}
.quest-timer{font-size:.6rem;font-weight:700;color:var(--rose);display:flex;align-items:center;gap:3px;}
.quest-reward-chip{font-size:.58rem;font-weight:800;background:var(--amber-pale);color:var(--amber);border-radius:var(--rp);padding:2px 7px;}
.quest-prog-wrap{display:flex;flex-direction:column;gap:3px;margin-top:5px;}
.quest-prog-row{display:flex;justify-content:space-between;}
.quest-prog-lbl{font-size:.58rem;font-weight:700;color:var(--g400);}
.quest-prog-val{font-size:.58rem;font-weight:800;color:var(--g700);}
.quest-bar-bg{height:5px;background:var(--g200);border-radius:var(--rp);overflow:hidden;}
.quest-bar-fill{height:100%;background:linear-gradient(90deg,var(--lav),var(--lav-2));border-radius:var(--rp);transition:width .4s ease;}
.quest-item.done .quest-bar-fill{background:linear-gradient(90deg,var(--mint),#5BBF8A);}
.quest-check{font-size:1.2rem;flex-shrink:0;}
body.dark .quest-card{background:#23214A;}
body.dark .quest-item{background:#252343;border-color:#2E2B50;}
body.dark .quest-item.done{background:var(--mint-pale);border-color:var(--mint);}

/* ══════════════════════════════════════════════
   SKILL TREE
══════════════════════════════════════════════ */
.skill-tree-modal .modal-body{max-height:70vh;overflow-y:auto;}
.skill-tree-modal .modal-body::-webkit-scrollbar{width:0;}
.skill-branch{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.skill-branch-title{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);padding:0 2px;}
.skill-node{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:var(--rm);
  border:1.5px solid var(--g200);background:var(--g50);
  transition:var(--spring);cursor:default;
}
.skill-node.unlocked{
  border-color:var(--lav);
  background:linear-gradient(135deg,var(--lav-ultra),var(--lav-pale));
  box-shadow:0 3px 12px rgba(123,110,246,.18);
}
.skill-node.available{
  border-color:var(--amber);background:var(--amber-pale);
  cursor:pointer;animation:skillPulse 2s ease infinite;
}
@keyframes skillPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.3)}50%{box-shadow:0 0 0 6px rgba(245,166,35,.0)}}
.skill-node.available:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(245,166,35,.3);}
.skill-node.locked{opacity:.45;}
.skill-node-icon{font-size:1.6rem;flex-shrink:0;}
.skill-node-body{flex:1;}
.skill-node-name{font-family:var(--f-num);font-size:.82rem;font-weight:800;color:var(--g900);}
.skill-node.unlocked .skill-node-name{color:var(--lav);}
.skill-node.available .skill-node-name{color:#c07a00;}
.skill-node-desc{font-size:.67rem;font-weight:600;color:var(--g500);margin-top:2px;line-height:1.4;}
.skill-node-req{font-size:.6rem;font-weight:700;color:var(--g400);margin-top:4px;}
.skill-node-req.met{color:var(--mint);}
.skill-node-status{font-size:1.1rem;flex-shrink:0;}
.skill-connector{width:2px;height:16px;background:var(--g200);margin:0 auto;position:relative;left:23px;}
.skill-connector.active{background:var(--lav);}
body.dark .skill-node{background:#252343;border-color:#2E2B50;}
body.dark .skill-node.unlocked{background:linear-gradient(135deg,var(--lav-ultra),#2A2650);}
body.dark .skill-node.available{background:var(--amber-pale);}

/* ══════════════════════════════════════════════
   WEEKLY REPORT CARD
══════════════════════════════════════════════ */
.weekly-report-modal .modal-body{max-height:72vh;overflow-y:auto;}
.weekly-report-modal .modal-body::-webkit-scrollbar{width:0;}
.wr-section{margin-bottom:14px;}
.wr-section-title{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:8px;}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.wr-tile{
  background:var(--g50);border-radius:var(--rm);padding:13px 12px;
  text-align:center;border:1px solid var(--g200);
}
.wr-tile-val{font-family:var(--f-num);font-size:1.4rem;font-weight:900;color:var(--lav);line-height:1;}
.wr-tile-lbl{font-size:.57rem;font-weight:700;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;margin-top:4px;}
.wr-tile.mint .wr-tile-val{color:var(--mint);}
.wr-tile.rose .wr-tile-val{color:var(--rose);}
.wr-tile.amber .wr-tile-val{color:var(--amber);}
.wr-chart-wrap{background:var(--g50);border-radius:var(--rm);padding:14px;border:1px solid var(--g200);}
.wr-chart-title{font-size:.65rem;font-weight:800;color:var(--g500);margin-bottom:10px;}
.wr-bars{display:flex;align-items:flex-end;gap:5px;height:64px;}
.wr-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.wr-bar-outer{width:100%;background:var(--g200);border-radius:4px 4px 0 0;overflow:hidden;display:flex;align-items:flex-end;}
.wr-bar-inner{width:100%;background:linear-gradient(180deg,var(--lav),var(--lav-2));border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.4,0,.2,1);}
.wr-bar-day{font-size:.52rem;font-weight:700;color:var(--g400);}
.wr-insight{
  background:linear-gradient(135deg,var(--sky-pale),var(--lav-pale));
  border:1.5px solid var(--g200);border-radius:var(--rm);
  padding:12px 14px;font-size:.78rem;font-weight:600;color:var(--g700);
  line-height:1.5;display:flex;gap:10px;align-items:flex-start;
}
.wr-insight-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px;}
.wr-mistake-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--g50);border-radius:var(--rm);border:1px solid var(--g200);}
.wr-mistake-op{font-family:var(--f-num);font-size:1rem;font-weight:900;color:var(--rose);min-width:28px;text-align:center;}
.wr-mistake-lbl{font-size:.72rem;font-weight:600;color:var(--g700);flex:1;}
.wr-mistake-count{font-family:var(--f-num);font-size:.75rem;font-weight:800;color:var(--g400);}
body.dark .wr-tile{background:#252343;border-color:#2E2B50;}
body.dark .wr-chart-wrap{background:#252343;border-color:#2E2B50;}
body.dark .wr-insight{background:linear-gradient(135deg,#182838,#2A2650);}
body.dark .wr-mistake-row{background:#252343;border-color:#2E2B50;}

/* ══════════════════════════════════════════════
   QR CHALLENGE
══════════════════════════════════════════════ */
.qr-modal .modal-body{text-align:center;}
.qr-canvas-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  background:white;border-radius:var(--rm);padding:14px;
  border:2px solid var(--g200);margin:0 auto 12px;
}
#qrCanvas{display:block;}
.qr-seed-box{
  background:var(--g50);border:1.5px solid var(--g200);
  border-radius:var(--rm);padding:10px 14px;
  font-family:var(--f-num);font-size:.9rem;font-weight:800;
  color:var(--lav);letter-spacing:.08em;text-align:center;
  margin-bottom:4px;
}
.qr-desc{font-size:.75rem;color:var(--g400);font-weight:600;line-height:1.5;margin-bottom:12px;}
.qr-btn-row{display:flex;gap:8px;}
.qr-btn{
  flex:1;padding:12px;border-radius:var(--rl);border:1.5px solid var(--g200);
  background:var(--g50);font-family:var(--f-ui);font-size:.82rem;font-weight:700;
  color:var(--g500);cursor:pointer;transition:var(--ease);
}
.qr-btn:hover{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);transform:translateY(-1px);}
body.dark .qr-canvas-wrap{background:#fff;}
body.dark .qr-seed-box{background:#252343;border-color:#2E2B50;}
body.dark .qr-btn{background:#252343;border-color:#2E2B50;color:var(--g400);}

/* ══════════════════════════════════════════════
   MULTIPLAYER ASYNC
══════════════════════════════════════════════ */
.mp-modal .modal-body{max-height:70vh;overflow-y:auto;}
.mp-modal .modal-body::-webkit-scrollbar{width:0;}
.mp-tabs{display:flex;gap:6px;margin-bottom:14px;}
.mp-tab{flex:1;padding:10px 8px;border-radius:var(--rm);border:1.5px solid var(--g200);background:var(--g50);font-family:var(--f-num);font-size:.76rem;font-weight:800;color:var(--g500);cursor:pointer;transition:var(--ease);text-align:center;}
.mp-tab.active{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);}
.mp-tab:hover:not(.active){background:var(--g100);}
.mp-panel{display:none;}
.mp-panel.active{display:block;}
.mp-code-box{
  background:linear-gradient(135deg,var(--lav-pale),var(--sky-pale));
  border:2px solid var(--lav);border-radius:var(--rxl);padding:20px;text-align:center;
  margin-bottom:12px;
}
.mp-code-label{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:6px;}
.mp-code{font-family:var(--f-num);font-size:2.2rem;font-weight:900;color:var(--lav);letter-spacing:.15em;line-height:1;}
.mp-code-sub{font-size:.68rem;font-weight:600;color:var(--g500);margin-top:6px;}
.mp-btn{width:100%;padding:13px;border-radius:var(--rl);background:linear-gradient(135deg,var(--lav),var(--lav-2));border:none;color:white;font-family:var(--f-num);font-size:.9rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(107,94,232,.38);transition:var(--ease);margin-bottom:8px;}
.mp-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(107,94,232,.48);}
.mp-btn.ghost{background:transparent;border:1.5px solid var(--g200);color:var(--g500);box-shadow:none;}
.mp-btn.ghost:hover{background:var(--g100);border-color:var(--g300);}
.mp-input{width:100%;padding:13px 16px;border-radius:var(--rl);border:1.5px solid var(--g200);background:var(--input-bg);font-family:var(--f-num);font-size:1.1rem;font-weight:800;color:var(--g900);letter-spacing:.12em;text-align:center;text-transform:uppercase;outline:none;transition:var(--ease);margin-bottom:10px;}
.mp-input:focus{border-color:var(--lav);background:var(--lav-ultra);}
.mp-result-card{border-radius:var(--rxl);overflow:hidden;margin-bottom:10px;}
.mp-result-hero{padding:18px 20px;text-align:center;color:white;}
.mp-result-row{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.mp-result-col{padding:16px 12px;text-align:center;border-top:1px solid var(--g200);}
.mp-result-col:first-child{border-right:1px solid var(--g200);}
.mp-result-name{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--g400);margin-bottom:4px;}
.mp-result-score{font-family:var(--f-num);font-size:2rem;font-weight:900;color:var(--lav);}
.mp-result-meta{font-size:.65rem;font-weight:600;color:var(--g500);margin-top:3px;}
.mp-result-winner{font-size:.7rem;font-weight:800;color:var(--amber);margin-top:6px;}
.mp-pending{text-align:center;padding:20px;color:var(--g400);font-size:.8rem;font-weight:600;}
.mp-pending-anim{font-size:2rem;animation:pendingPulse 1.2s ease infinite alternate;}
@keyframes pendingPulse{from{transform:scale(1)}to{transform:scale(1.15)}}
body.dark .mp-tab{background:#252343;border-color:#2E2B50;}
body.dark .mp-tab.active{background:var(--lav-pale);}
body.dark .mp-code-box{background:linear-gradient(135deg,var(--lav-ultra),#182838);}
body.dark .mp-input{background:#252343;border-color:#2E2B50;color:#EEEDF8;}
body.dark .mp-input:focus{background:var(--lav-ultra);}
body.dark .mp-btn.ghost{border-color:#2E2B50;color:#A09DC8;}
body.dark .mp-result-col{border-color:#2E2B50;}

/* ══════════════════════════════════════════════
   TOURNAMENT MODE
══════════════════════════════════════════════ */
.tourn-banner{
  background:linear-gradient(135deg,#1C1A38,#2D1A4A,#3A1A38);
  border:2px solid rgba(245,166,35,.5);border-radius:var(--rxl);
  padding:14px 18px;display:none;align-items:center;gap:14px;
  box-shadow:0 0 0 4px rgba(245,166,35,.1),0 8px 28px rgba(28,10,40,.5);
  position:relative;overflow:hidden;
}
.tourn-banner.active{display:flex;}
.tourn-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(245,166,35,.07),transparent);animation:tournGlow 2.5s ease infinite;}
@keyframes tournGlow{0%,100%{opacity:.4}50%{opacity:1}}
.tourn-trophy{font-size:2rem;animation:trophyBob 1.5s ease infinite alternate;flex-shrink:0;}
@keyframes trophyBob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.tourn-info{flex:1;}
.tourn-label{font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,166,35,.9);}
.tourn-title{font-family:var(--f-num);font-size:1rem;font-weight:900;color:white;line-height:1.2;margin-top:2px;}
.tourn-progress{display:flex;gap:5px;margin-top:7px;}
.tourn-dot{width:20px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);transition:background .4s;}
.tourn-dot.done{background:var(--mint);}
.tourn-dot.current{background:var(--amber);}
.tourn-dot.locked{background:rgba(255,255,255,.08);}
.tourn-lives{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.tourn-lives-lbl{font-size:.52rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase;}
.tourn-lives-val{font-size:1.1rem;font-weight:900;color:white;font-family:var(--f-num);}
/* Tournament result overlay */
.tourn-result-overlay{
  position:fixed;inset:0;z-index:700;
  background:rgba(28,26,56,.85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.tourn-result-card{
  width:100%;max-width:360px;background:var(--white);border-radius:var(--r2xl);
  overflow:hidden;box-shadow:var(--sh4);
  animation:lvlupCard .5s .05s cubic-bezier(.34,1.56,.64,1) both;
}
.tourn-result-hero{
  padding:32px 24px 24px;text-align:center;color:white;position:relative;overflow:hidden;
}
.tourn-result-hero::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);top:-60px;right:-50px;}
.tourn-result-emoji{font-size:4rem;display:block;margin-bottom:10px;animation:ePop .5s .15s cubic-bezier(.34,1.56,.64,1) both;}
.tourn-result-title{font-family:var(--f-num);font-size:1.6rem;font-weight:900;}
.tourn-result-sub{font-size:.82rem;font-weight:600;opacity:.85;margin-top:5px;}
.tourn-result-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px;background:var(--white);}
.tourn-round-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.tourn-round-tile{border-radius:var(--rs);padding:8px 4px;text-align:center;border:1.5px solid var(--g200);}
.tourn-round-tile.won{background:var(--mint-pale);border-color:var(--mint);}
.tourn-round-tile.lost{background:var(--rose-pale);border-color:var(--rose);}
.tourn-round-num{font-size:.6rem;font-weight:800;color:var(--g400);letter-spacing:.06em;}
.tourn-round-score{font-family:var(--f-num);font-size:1rem;font-weight:900;color:var(--g900);margin-top:2px;}
.tourn-round-tile.won .tourn-round-score{color:var(--mint);}
.tourn-round-tile.lost .tourn-round-score{color:var(--rose);}
body.dark .tourn-banner{background:linear-gradient(135deg,#1A0A28,#2D1A4A);}
body.dark .tourn-result-card{background:#1E1C3A;}
body.dark .tourn-result-body{background:#1E1C3A;}
body.dark .tourn-round-tile{background:#252343;border-color:#2E2B50;}

/* ══════════════════════════════════════════════
   VISUAL QUESTION (Picture Math)
══════════════════════════════════════════════ */
.visual-q-area{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:8px 0 4px;
}
.visual-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.visual-group{display:flex;flex-wrap:wrap;gap:3px;max-width:120px;justify-content:center;}
.visual-obj{font-size:1.4rem;line-height:1;animation:objPop .3s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes objPop{from{transform:scale(0) rotate(-15deg)}to{transform:scale(1) rotate(0)}}
.visual-op{font-family:var(--f-num);font-size:2rem;font-weight:900;color:var(--lav);padding:0 4px;}
.visual-eq{font-family:var(--f-num);font-size:2rem;font-weight:900;color:var(--g400);}

/* ══════════════════════════════════════════════
   EQUATION BUILDER (Reverse Mode)
══════════════════════════════════════════════ */
.eq-builder-area{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:4px 0;
}
.eq-target{
  background:linear-gradient(135deg,var(--amber-pale),var(--lav-pale));
  border:2px solid var(--amber);border-radius:var(--rxl);
  padding:14px 28px;text-align:center;
}
.eq-target-lbl{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:4px;}
.eq-target-val{font-family:var(--f-num);font-size:3rem;font-weight:900;color:var(--g900);line-height:1;}
.eq-slots{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.eq-slot{
  min-width:44px;height:44px;border-radius:var(--rm);
  border:2px dashed var(--g300);background:var(--g50);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:1.1rem;font-weight:800;color:var(--g900);
  cursor:pointer;transition:var(--spring);
}
.eq-slot.filled{border-style:solid;border-color:var(--lav);background:var(--lav-pale);}
.eq-slot.op-slot{border-color:var(--mint);font-size:1.4rem;}
.eq-slot.op-slot.filled{background:var(--mint-pale);border-color:var(--mint);}
.eq-slot:hover{transform:scale(1.07);border-color:var(--lav);}
.eq-result-preview{
  font-family:var(--f-num);font-size:.85rem;font-weight:800;
  color:var(--g400);display:flex;align-items:center;gap:6px;
}
.eq-result-preview.correct{color:var(--mint);}
.eq-result-preview.wrong{color:var(--rose);}
.eq-tiles{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.eq-tile{
  width:42px;height:42px;border-radius:var(--rm);
  border:1.5px solid var(--g200);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:1rem;font-weight:800;color:var(--g900);
  cursor:pointer;transition:var(--spring);box-shadow:var(--sh1);
}
.eq-tile:hover{transform:translateY(-3px) scale(1.08);border-color:var(--lav);box-shadow:var(--sh2);}
.eq-tile:active{transform:scale(.95);}
.eq-tile.used{opacity:.3;pointer-events:none;}
.eq-tile.op{background:var(--mint-pale);border-color:var(--mint);color:var(--mint);}
.eq-submit{
  width:100%;padding:12px;border-radius:var(--rl);
  background:linear-gradient(135deg,var(--mint),#5BBF8A);
  border:none;color:white;font-family:var(--f-num);font-size:.9rem;font-weight:800;
  cursor:pointer;box-shadow:0 6px 18px rgba(61,191,168,.38);transition:var(--ease);
}
.eq-submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(61,191,168,.48);}
.eq-submit:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.eq-clear{
  padding:8px 16px;border-radius:var(--rp);border:1.5px solid var(--g200);
  background:transparent;font-family:var(--f-ui);font-size:.75rem;font-weight:700;
  color:var(--g400);cursor:pointer;transition:var(--ease);
}
.eq-clear:hover{background:var(--rose-pale);border-color:var(--rose);color:var(--rose);}
body.dark .eq-slot{background:#252343;border-color:#3D3A60;}
body.dark .eq-slot.filled{background:var(--lav-pale);}
body.dark .eq-tile{background:#252343;border-color:#2E2B50;color:#EEEDF8;}
body.dark .eq-tile.op{background:var(--mint-pale);}
body.dark .eq-target{background:linear-gradient(135deg,var(--amber-pale),var(--lav-ultra));}

/* ══════════════════════════════════════════════
   V9 — CLOUD PROFILE & AUTH
══════════════════════════════════════════════ */
.cloud-status-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--rp);
  font-size:.72rem;font-weight:700;
  transition:var(--ease);cursor:pointer;
  border:1.5px solid transparent;
}
.cloud-status-bar.signed-out{background:var(--g100);border-color:var(--g200);color:var(--g500);}
.cloud-status-bar.signed-in{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);}
.cloud-status-bar.syncing{background:var(--sky-pale);border-color:var(--sky);color:var(--sky);}
.cloud-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.cloud-dot.off{background:var(--g300);}
.cloud-dot.on{background:var(--mint);box-shadow:0 0 0 3px rgba(61,191,168,.2);}
.cloud-dot.pulse{background:var(--amber);animation:cloudPulse .8s ease infinite alternate;}
@keyframes cloudPulse{from{opacity:1}to{opacity:.4}}

/* Auth modal */
.auth-modal .modal-body{display:flex;flex-direction:column;gap:12px;}
.auth-input{
  width:100%;padding:13px 16px;border-radius:var(--rl);
  border:1.5px solid var(--g200);background:var(--input-bg);
  font-family:var(--f-ui);font-size:.9rem;color:var(--g900);
  outline:none;transition:var(--ease);
}
.auth-input:focus{border-color:var(--lav);background:var(--lav-ultra);}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--g400);font-size:.72rem;font-weight:700;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--g200);}
.auth-google-btn{
  width:100%;padding:13px;border-radius:var(--rl);
  background:white;border:1.5px solid var(--g200);
  font-family:var(--f-num);font-size:.88rem;font-weight:700;
  color:var(--g700);cursor:pointer;transition:var(--ease);
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--sh1);
}
.auth-google-btn:hover{box-shadow:var(--sh2);transform:translateY(-1px);}
.auth-profile-view{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0;}
.auth-profile-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--lav),var(--lav-2));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;border:3px solid rgba(123,110,246,.3);
  box-shadow:0 4px 16px rgba(123,110,246,.25);
}
.auth-profile-name{font-family:var(--f-num);font-size:1rem;font-weight:800;color:var(--g900);}
.auth-profile-sub{font-size:.72rem;font-weight:600;color:var(--g400);}
.auth-profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;}
.auth-stat-tile{background:var(--g50);border:1px solid var(--g200);border-radius:var(--rm);padding:10px 8px;text-align:center;}
.auth-stat-val{font-family:var(--f-num);font-size:1.1rem;font-weight:900;color:var(--lav);}
.auth-stat-lbl{font-size:.55rem;font-weight:700;color:var(--g400);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
body.dark .auth-input{background:#252343;border-color:#2E2B50;color:#EEEDF8;}
body.dark .auth-google-btn{background:#252343;border-color:#2E2B50;color:#EEEDF8;}
body.dark .auth-stat-tile{background:#252343;border-color:#2E2B50;}

/* ══════════════════════════════════════════════
   V9 — GLOBAL LEADERBOARD
══════════════════════════════════════════════ */
.glb-tabs{display:flex;gap:5px;margin-bottom:12px;}
.glb-tab{flex:1;padding:8px 6px;border-radius:var(--rm);border:1.5px solid var(--g200);background:var(--g50);font-family:var(--f-num);font-size:.72rem;font-weight:800;color:var(--g500);cursor:pointer;transition:var(--ease);text-align:center;}
.glb-tab.active{background:var(--lav-pale);border-color:var(--lav);color:var(--lav);}
.glb-loading{text-align:center;padding:28px 0;color:var(--g400);font-size:.82rem;font-weight:600;}
.glb-loading-spin{font-size:1.8rem;display:block;animation:spin .9s linear infinite;margin-bottom:8px;}
@keyframes spin{to{transform:rotate(360deg)}}
.glb-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-radius:var(--rm);background:var(--g50);border:1.5px solid var(--g200);
  transition:var(--ease);margin-bottom:6px;
}
.glb-row.me{border-color:var(--lav);background:var(--lav-pale);}
.glb-row.gold{background:linear-gradient(135deg,#FEF3DC,white);border-color:var(--amber);}
.glb-row.silver{background:linear-gradient(135deg,#F5F4F8,white);border-color:#B0B0C8;}
.glb-row.bronze{background:linear-gradient(135deg,#FDF0EA,white);border-color:#D4875A;}
.glb-pos{font-family:var(--f-num);font-size:1rem;font-weight:900;min-width:26px;text-align:center;color:var(--g400);}
.glb-avi{font-size:1.3rem;flex-shrink:0;}
.glb-body{flex:1;min-width:0;}
.glb-name{font-family:var(--f-num);font-size:.8rem;font-weight:800;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.glb-sub{font-size:.6rem;font-weight:600;color:var(--g400);margin-top:1px;}
.glb-score{font-family:var(--f-num);font-size:1.05rem;font-weight:900;color:var(--lav);}
.glb-row.gold .glb-score{color:var(--amber);}
body.dark .glb-row{background:#252343;border-color:#2E2B50;}
body.dark .glb-row.me{background:var(--lav-pale);}

/* ══════════════════════════════════════════════
   V9 — LIVE DUEL
══════════════════════════════════════════════ */
.duel-banner{
  background:linear-gradient(135deg,#1C1A38,#2A154A,#351A50);
  border:2px solid rgba(155,110,240,.5);border-radius:var(--rxl);
  padding:12px 16px;display:none;
  align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 0 0 3px rgba(155,110,240,.1),0 6px 24px rgba(28,10,50,.5);
  position:relative;overflow:hidden;
}
.duel-banner.active{display:flex;}
.duel-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(155,110,240,.08),transparent);animation:duelGlow 2s ease infinite;}
@keyframes duelGlow{0%,100%{opacity:.3}50%{opacity:1}}
.duel-player{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.duel-player-name{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.7;color:white;}
.duel-player-score{font-family:var(--f-num);font-size:1.6rem;font-weight:900;color:white;line-height:1;}
.duel-player-avatar{font-size:1.2rem;}
.duel-vs{font-family:var(--f-num);font-size:.9rem;font-weight:900;color:rgba(155,110,240,.8);flex-shrink:0;}
.duel-timer{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.1);
}
.duel-timer-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--lav));transition:width .5s linear;}

/* ══════════════════════════════════════════════
   V9 — SHARE TO SOCMED
══════════════════════════════════════════════ */
.share-socmed-row{display:flex;gap:8px;margin-top:4px;}
.socmed-btn{
  flex:1;padding:12px 8px;border-radius:var(--rm);border:none;
  font-family:var(--f-num);font-size:.78rem;font-weight:800;
  color:white;cursor:pointer;transition:var(--spring);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.socmed-btn:hover{transform:translateY(-3px) scale(1.05);}
.socmed-btn:active{transform:scale(.95);}
.socmed-btn.wa{background:linear-gradient(135deg,#25D366,#128C7E);}
.socmed-btn.tw{background:linear-gradient(135deg,#1DA1F2,#0d8fd8);}
.socmed-btn.cp{background:linear-gradient(135deg,var(--lav),var(--lav-2));}
.socmed-btn.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.socmed-icon{font-size:1.3rem;}
.socmed-lbl{font-size:.62rem;opacity:.9;}

/* ══════════════════════════════════════════════
   V9 — PWA INSTALL BANNER
══════════════════════════════════════════════ */
.pwa-banner{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:420px;z-index:800;
  background:var(--white);border-top:2px solid var(--lav);
  padding:14px 18px;display:none;align-items:center;gap:12px;
  box-shadow:0 -8px 32px rgba(123,110,246,.2);
  animation:pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1) both;
}
.pwa-banner.show{display:flex;}
@keyframes pwaSlideUp{from{transform:translateX(-50%) translateY(100%)}to{transform:translateX(-50%) translateY(0)}}
.pwa-icon{font-size:2rem;flex-shrink:0;}
.pwa-body{flex:1;}
.pwa-title{font-family:var(--f-num);font-size:.85rem;font-weight:800;color:var(--g900);}
.pwa-sub{font-size:.68rem;font-weight:600;color:var(--g500);margin-top:2px;}
.pwa-install-btn{
  padding:9px 16px;border-radius:var(--rl);
  background:linear-gradient(135deg,var(--lav),var(--lav-2));
  border:none;color:white;font-family:var(--f-num);font-size:.78rem;font-weight:800;
  cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px rgba(123,110,246,.35);
  transition:var(--ease);
}
.pwa-install-btn:hover{transform:scale(1.04);}
.pwa-dismiss{font-size:1.1rem;color:var(--g400);cursor:pointer;padding:4px;flex-shrink:0;}
body.dark .pwa-banner{background:#1E1C3A;border-color:var(--lav);}

/* ── FOOTER / CREDIT ──────────────────────── */
.app-footer{
  margin:4px 0 0;
  padding:18px 16px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.footer-quote{
  font-size:.72rem;font-weight:600;color:var(--g400);
  text-align:center;line-height:1.55;font-style:italic;
  padding:0 8px;
}
.footer-quote::before{content:'"';margin-right:1px;}
.footer-quote::after{content:'"';margin-left:1px;}
.footer-credit{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:var(--rp);
  background:var(--lav-pale);border:1.5px solid rgba(123,110,246,.18);
  text-decoration:none;transition:var(--spring);
  box-shadow:var(--sh0);
}
.footer-credit:hover{
  background:var(--lav);
  border-color:var(--lav);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 18px rgba(123,110,246,.32);
}
.footer-credit:hover .fc-name,.footer-credit:hover .fc-lbl{color:white;}
.footer-credit:hover .fc-avatar{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);}
.footer-credit:active{transform:scale(.97);}
.fc-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--lav),var(--lav-2));
  border:2px solid rgba(123,110,246,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;color:white;
  flex-shrink:0;transition:var(--ease);
}
.fc-info{display:flex;flex-direction:column;}
.fc-lbl{font-size:.54rem;font-weight:700;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;line-height:1;transition:color .2s;}
.fc-name{font-family:var(--f-num);font-size:.78rem;font-weight:800;color:var(--lav);line-height:1.3;transition:color .2s;}
.fc-github{font-size:.6rem;color:var(--g400);display:flex;align-items:center;gap:3px;transition:color .2s;}
body.dark .footer-credit{background:var(--lav-ultra);border-color:rgba(123,110,246,.22);}
body.dark .footer-credit:hover{background:var(--lav);border-color:var(--lav);}
body.dark .fc-lbl{color:var(--g500);}
body.dark .fc-github{color:var(--g500);}
.adaptive-down{background:var(--mint-pale);color:var(--mint);}

/* ── QUESTION ANIMATIONS per type ───────────── */
@keyframes qBounce{0%{transform:translateY(-20px) scale(.9);opacity:0}60%{transform:translateY(4px) scale(1.02)}100%{transform:none;opacity:1}}
@keyframes qSpin{0%{transform:rotate(-15deg) scale(.85);opacity:0}100%{transform:none;opacity:1}}
@keyframes qSlide{0%{transform:translateX(-30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes qZoom{0%{transform:scale(1.3);opacity:0}100%{transform:scale(1);opacity:1}}
.q-anim-bounce .q-eq{animation:qBounce .4s cubic-bezier(.22,1,.36,1) both;}
.q-anim-spin .q-eq{animation:qSpin .35s cubic-bezier(.22,1,.36,1) both;}
.q-anim-slide .q-eq{animation:qSlide .3s cubic-bezier(.22,1,.36,1) both;}
.q-anim-zoom .q-eq{animation:qZoom .35s cubic-bezier(.22,1,.36,1) both;}

/* ═══════════════════════════════════════════════
   V14 — RESPONSIVE SYSTEM
   Breakpoints:
     xs  : 0–374px      (small Android, iPhone SE)
     sm  : 375–430px    (iPhone 14 Pro, standard Android)
     md  : 431–767px    (large phones, small tablets portrait)
     lg  : 768–1023px   (iPad, tablet landscape)
     xl  : 1024px+      (laptop / desktop)
═══════════════════════════════════════════════ */

/* ── BASE RESET & PERF ── */
*,*::before,*::after{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  /* GPU-composite only transforms/opacity in animations */
}
html{
  /* Smooth scroll without jank */
  scroll-behavior:smooth;
  /* Prevent iOS text-size-adjust on rotation */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* iOS safe-area */
  height:100%;
}
body{
  /* Prevent elastic overscroll on desktop */
  overscroll-behavior:none;
  /* Touch scroll momentum on iOS */
  -webkit-overflow-scrolling:touch;
}
/* Scrollable containers: momentum scroll + hide bars */
.menu-scroll,
.game-body,
.modal-body,
.ach-list,
.skill-tree-modal .modal-body,
.weekly-report-modal .modal-body,
.mp-modal .modal-body,
.lp-stages,
.story-chapters{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.menu-scroll::-webkit-scrollbar,
.game-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.ach-list::-webkit-scrollbar{width:0;height:0;}

/* ── TOUCH TARGET MINIMUMS (WCAG 2.5.5) ── */
.ans-btn,
.modal-primary,
.modal-ghost,
.play-cta,
.menu-icon-btn,
.lang-btn,
.diff-card,
.gmode-card,
.time-chip,
.hdr-btn,
.dark-toggle,
.hdr-avatar,
.pu-btn{min-height:44px;}

/* ── ANIMATION PERF: compositor-only properties ── */
.modal-card,
.modal-overlay,
.toast,
.lvlup-splash,
.lvlup-card,
.q-card,
.ans-btn,
.play-cta,
.boss-banner,
.story-battle-overlay{
  will-change:transform,opacity;
}
/* Remove will-change after animation completes (prevent layer memory waste) */
.modal-overlay:not(.open) .modal-card,
.toast.out{will-change:auto;}

/* ── REDUCE MOTION: respect user preference ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .modal-card{transform:none!important;}
}

/* ══ XS: 0–374px (iPhone SE, small Androids) ══ */
@media(max-width:374px){
  body{padding:0;}
  .app{border-radius:0;min-height:100dvh;min-height:100vh;box-shadow:none;}
  /* Smaller font scales */
  .hdr-title{font-size:1.05rem;}
  .hdr-sub{display:none;}
  .q-eq{font-size:clamp(1.5rem,8vw,2.2rem);}
  .ans-btn{font-size:clamp(1.3rem,6.5vw,1.6rem);padding:16px 8px;}
  /* Single column stats on tiny screens */
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  .diff-grid{grid-template-columns:repeat(3,1fr);}
  .gmode-grid{grid-template-columns:1fr 1fr;}
  .lang-grid{grid-template-columns:repeat(2,1fr);}
  .menu-btns{gap:6px;}
  .menu-icon-btn{font-size:.72rem;padding:8px 6px;}
  /* Compact power-ups */
  .pu-btn{padding:7px 4px;}
  .pu-icon{font-size:.95rem;}
  .pu-name{font-size:.58rem;}
  .pu-cost{font-size:.52rem;}
  /* Tighter modal */
  .modal-hero{padding:20px 16px 18px;}
  .modal-body{padding:14px 14px 18px;}
  .modal-title{font-size:1.3rem;}
  /* Safe area bottom */
  .play-cta{margin-bottom:env(safe-area-inset-bottom,0px);}
}

/* ══ SM: 375–430px (standard phones) ══ */
@media(min-width:375px) and (max-width:430px){
  body{padding:0;}
  .app{border-radius:0;min-height:100dvh;min-height:100vh;box-shadow:none;}
  .ans-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  /* iOS safe area padding */
  .menu-scroll{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));}
  .game-body{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .play-cta{margin-bottom:env(safe-area-inset-bottom,0px);}
}

/* ══ MD: 431–767px (large phones / small tablet portrait) ══ */
@media(min-width:431px) and (max-width:767px){
  body{padding:10px 8px 30px;}
  .app{border-radius:var(--rxl);min-height:auto;}
  .modal-card{max-width:400px;}
  .ans-btn{font-size:clamp(1.5rem,4vw,1.85rem);}
}

/* ══ LG: 768–1023px (iPad, tablet) ══ */
@media(min-width:768px) and (max-width:1023px){
  body{
    padding:24px 20px 48px;
    align-items:center;
  }
  .app{
    max-width:520px;
    min-height:auto;
    /* Tablet gets card floating style */
    border-radius:var(--r2xl);
    box-shadow:0 0 0 1px rgba(123,110,246,.1),0 4px 8px rgba(123,110,246,.08),0 24px 72px rgba(100,90,200,.20);
  }
  /* Bigger touch targets on tablet */
  .ans-btn{padding:24px 14px;font-size:1.9rem;}
  .hdr{height:76px;}
  .hdr-title{font-size:1.35rem;}
  .diff-grid{grid-template-columns:repeat(3,1fr);}
  .gmode-grid{grid-template-columns:repeat(3,1fr);}
  .lang-grid{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(6,1fr);}
  .modal-card{max-width:440px;}
  /* Slightly larger modal body max-heights */
  .ach-list{max-height:440px;}
  .skill-tree-modal .modal-body,
  .weekly-report-modal .modal-body,
  .mp-modal .modal-body{max-height:76vh;}
  /* Toast center */
  .toast-container{width:400px;}
}

/* ══ XL: 1024px+ (laptop / desktop) ══ */
@media(min-width:1024px){
  body{
    padding:40px 24px 64px;
    align-items:flex-start;
    justify-content:center;
  }
  .app{
    max-width:440px;
    /* Subtle lift on desktop */
    box-shadow:
      0 0 0 1px rgba(123,110,246,.08),
      0 2px 4px rgba(123,110,246,.06),
      0 24px 64px rgba(100,90,200,.16),
      0 48px 96px rgba(0,0,0,.07);
  }
  /* Hover states are meaningful on desktop */
  .ans-btn:hover:not(:disabled){
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 8px 28px rgba(123,110,246,.25);
  }
  .diff-card:hover:not(.selected){transform:translateY(-2px);box-shadow:var(--sh2);}
  .gmode-card:hover:not(.selected){transform:translateY(-2px);box-shadow:var(--sh2);}
  .menu-icon-btn:hover{transform:translateY(-1px);}
  .play-cta:hover{transform:translateY(-3px);letter-spacing:.04em;}
  /* Desktop cursor feedback */
  .ans-btn:not(:disabled){cursor:pointer;}
  .modal-card{max-width:400px;}
  .toast-container{width:360px;}
}

/* ── LANDSCAPE PHONE FIX ── */
@media(max-width:767px) and (orientation:landscape){
  body{padding:0;}
  .app{
    border-radius:0;
    min-height:100dvh;
    min-height:100vh;
    /* In landscape, game-body scrolls; header stays */
    flex-direction:row;
    max-width:100%;
  }
  /* Stack pages normally but allow scroll */
  .page.active{
    flex-direction:column;
    flex:1;
    overflow:hidden;
  }
  .hdr{height:56px;}
  .hdr-title{font-size:1rem;}
  .hdr-sub{display:none;}
  /* Landscape: smaller q-card to fit screen */
  .q-eq{font-size:clamp(1.4rem,5vw,1.9rem);}
  .ans-btn{padding:14px 8px;font-size:clamp(1.2rem,4vw,1.6rem);}
  .stats-grid{grid-template-columns:repeat(6,1fr);}
  .powerup-panel{padding:8px 12px;}
  .pu-row{gap:6px;}
  /* Compact menu in landscape */
  .menu-scroll{padding:10px 12px 20px;}
  .xp-hero{padding:12px 14px;}
  .hero{display:none;}/* hide hero banner in landscape to save space */
  .modal-overlay{padding:8px;}
  .modal-card{max-height:96dvh;overflow-y:auto;}
  .modal-hero{padding:16px 16px 14px;}
  .modal-emoji{font-size:2.2rem;}
  .modal-title{font-size:1.2rem;}
}

/* ── TABLET LANDSCAPE ── */
@media(min-width:768px) and (orientation:landscape){
  .app{max-width:560px;}
  .stats-grid{grid-template-columns:repeat(6,1fr);}
  .gmode-grid{grid-template-columns:repeat(4,1fr);}
}

/* ── GAME BODY HEIGHT FIX (prevent overflow on small screens) ── */
@media(max-width:430px){
  /* Use dvh (dynamic viewport height) for mobile browsers
     that show/hide browser chrome on scroll */
  .app{min-height:100dvh;}
  .page.active{min-height:calc(100dvh - 70px);}/* subtract header */
  /* Modal must fit in screen */
  .modal-overlay{padding:12px 10px;}
  .modal-card{
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
  }
  .modal-body{
    max-height:calc(100dvh - 200px);
    overflow-y:auto;
  }
}

/* ── MODAL BODY OVERFLOW FIX (prevent clipping on all screens) ── */
.modal-card{overflow:visible;/* allow shadow */}
.modal-card > .modal-hero,
.modal-card > .modal-body{overflow:hidden;}
/* Re-apply border-radius clipping per section */
.modal-card > .modal-hero:first-child{
  border-radius:var(--rxl) var(--rxl) 0 0;
  overflow:hidden;
}
.modal-card > :last-child:not(.modal-hero){
  border-radius:0 0 var(--rxl) var(--rxl);
  overflow:hidden;
}

/* ── KEYBOARD SAFE AREA (prevents layout shift on input focus) ── */
@supports(height:100dvh){
  .menu-scroll{height:calc(100dvh - 70px);max-height:none;}
  .game-body{height:calc(100dvh - 70px);max-height:none;}
}

/* ── WORLD MAP RESPONSIVE ── */
@media(min-width:768px){.world-map-container{height:400px;}}
@media(max-width:374px){.world-map-container{height:260px;}.wm-city-label{display:none;}}

/* ── STORY BATTLE OVERLAY RESPONSIVE ── */
@media(min-width:768px){.story-battle-overlay{padding:10px 20px 0;}}
@media(max-width:374px){
  .story-villain-sprite{font-size:1.6rem;}
  .story-villain-area{padding:8px 12px 10px;}
}

/* ═══════════════════════════════════════
   V11 — AI-POWERED LEARNING STYLES
═══════════════════════════════════════ */

/* AI Predict Badge */
.ai-predict-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:700;background:linear-gradient(135deg,#FFF8E8,#EDE9FD);border:1px solid #F5A623;color:#c07000;animation:aiPulse 2s ease infinite;}
@keyframes aiPulse{0%,100%{opacity:1}50%{opacity:.7}}
.ai-predict-easy{background:linear-gradient(135deg,#E4F5F1,#EDF9F5);border-color:var(--mint);color:var(--mint);}
.ai-predict-medium{background:linear-gradient(135deg,#FFF8E8,#FFFBF0);border-color:var(--amber);color:#c07000;}
.ai-predict-hard{background:linear-gradient(135deg,#FFEEED,#FFF0EF);border-color:var(--rose);color:var(--rose);}

/* AI Hint Steps */
.ai-hint-btn{background:linear-gradient(135deg,#7B6EF6,#4AADEE)!important;color:#fff!important;border:none!important;}
.ai-hint-steps{margin-top:10px;padding:12px 14px;background:linear-gradient(135deg,#EDE9FD,#E3F1FE);border-radius:12px;border-left:3px solid #7B6EF6;}
.ai-hint-step{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:.82rem;color:var(--g800);line-height:1.5;}
.ai-hint-step:last-child{margin-bottom:0;}
.ai-step-num{min-width:22px;height:22px;border-radius:50%;background:#7B6EF6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;}
.ai-hint-loading{text-align:center;padding:10px 0;color:#7B6EF6;font-size:.82rem;}
.ai-hint-loading-spinner{font-size:1.4rem;animation:spin 1s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg)}}

/* AI Insights Modal */
.ai-loading{text-align:center;padding:24px 0;}
.ai-spinner{font-size:2.5rem;animation:spin 1.2s linear infinite;display:inline-block;}
.ai-loading-text{margin-top:10px;font-size:.85rem;color:var(--g500);font-weight:600;}
.ai-result{padding:4px 0;}
.ai-insight-section{margin-bottom:16px;padding:14px;border-radius:14px;background:var(--lav-ultra);}
.ai-insight-title{font-size:.78rem;font-weight:800;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.ai-insight-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;font-size:.83rem;color:var(--g800);line-height:1.5;}
.ai-insight-item:last-child{margin-bottom:0;}
.ai-insight-icon{font-size:1rem;flex-shrink:0;}
.weakness-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:.75rem;font-weight:700;background:var(--rose-pale);color:var(--rose);margin:3px 3px 0 0;}
.strength-chip{background:var(--mint-pale);color:var(--mint);}
.ai-practice-btn{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#7B6EF6,#4AADEE);color:#fff;font-size:.82rem;font-weight:700;margin-bottom:8px;cursor:pointer;border:none;width:100%;text-align:left;transition:transform .15s;}
.ai-practice-btn:active{transform:scale(.97);}

/* Learning Path Modal */
.lp-stages{padding:4px 0 8px;}
.lp-stage{margin-bottom:12px;border-radius:16px;overflow:hidden;border:2px solid var(--g200);background:var(--card);}
.lp-stage.active{border-color:#7B6EF6;box-shadow:0 0 0 3px rgba(123,110,246,.12);}
.lp-stage.completed{border-color:var(--mint);background:var(--mint-pale);}
.lp-stage.locked{opacity:.5;}
.lp-stage-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;}
.lp-stage-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.lp-stage-info{flex:1;}
.lp-stage-name{font-size:.95rem;font-weight:800;color:var(--g900);}
.lp-stage-desc{font-size:.75rem;color:var(--g500);margin-top:2px;}
.lp-stage-status{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:99px;}
.lp-status-active{background:linear-gradient(135deg,#7B6EF6,#4AADEE);color:#fff;}
.lp-status-done{background:var(--mint-pale);color:var(--mint);}
.lp-status-locked{background:var(--g100);color:var(--g400);}
.lp-stage-topics{padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.lp-topic{padding:8px 10px;border-radius:10px;background:var(--bg);font-size:.78rem;font-weight:600;color:var(--g700);display:flex;align-items:center;gap:6px;}
.lp-topic.done{background:var(--mint-pale);color:var(--mint);}
.lp-topic.weak{background:var(--rose-pale);color:var(--rose);}
.lp-progress-bar{height:4px;background:var(--g100);margin:0 16px 12px;border-radius:99px;overflow:hidden;}
.lp-progress-fill{height:100%;background:linear-gradient(90deg,#7B6EF6,#4AADEE);border-radius:99px;transition:width .6s cubic-bezier(.22,1,.36,1);will-change:width;}
.lp-ai-rec{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,#FFF8E8,#EDE9FD);font-size:.78rem;font-weight:600;color:#7B4F00;margin:0 16px 12px;}

/* AI menu buttons pulse */
.ai-btn{position:relative;overflow:hidden;}
.ai-btn::after{content:'AI';position:absolute;top:4px;right:6px;font-size:.55rem;font-weight:900;letter-spacing:.04em;padding:1px 4px;border-radius:99px;background:linear-gradient(135deg,#7B6EF6,#4AADEE);color:#fff;}

/* Difficulty prediction counter */
.diff-pred-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px;}
.diff-pred-item{flex:1;min-width:0;padding:8px 10px;border-radius:10px;text-align:center;font-size:.72rem;font-weight:700;}
.diff-pred-easy{background:var(--mint-pale);color:var(--mint);}
.diff-pred-medium{background:var(--amber-pale);color:#c07000;}
.diff-pred-hard{background:var(--rose-pale);color:var(--rose);}
.diff-pred-val{font-size:1.2rem;font-weight:900;display:block;}

/* ═══════════════════════════════════════
   V13 — PWA + MULTILANG + NOTIFICATIONS
═══════════════════════════════════════ */

/* 6-column language grid */
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.lang-btn{padding:9px 6px;border-radius:12px;border:2px solid var(--g200);background:var(--card);font-size:.8rem;font-weight:700;color:var(--g600);cursor:pointer;transition:all .18s;text-align:center;}
.lang-btn.active,.lang-btn:active{border-color:#7B6EF6;background:var(--lav-pale);color:#7B6EF6;}
body.dark .lang-btn{background:var(--surface);border-color:rgba(255,255,255,.08);color:var(--g400);}
body.dark .lang-btn.active{border-color:#7B6EF6;background:rgba(123,110,246,.18);color:#B8B0FA;}

/* Notification preview card */
.notif-preview-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--g100);margin-bottom:16px;border:1px solid var(--g200);}
.notif-preview-icon{font-size:1.8rem;flex-shrink:0;}
.notif-preview-title{font-size:.75rem;font-weight:800;color:var(--g900);}
.notif-preview-msg{font-size:.8rem;color:var(--g600);margin-top:2px;line-height:1.4;}
.notif-benefits{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.notif-benefit{display:flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;color:var(--g700);padding:8px 12px;border-radius:10px;background:var(--bg);}

/* RTL support for Arabic */
[dir="rtl"] .hdr{flex-direction:row-reverse;}
[dir="rtl"] .hdr-right{flex-direction:row-reverse;}
[dir="rtl"] .menu-scroll{text-align:right;}
[dir="rtl"] .stats-grid{direction:rtl;}
[dir="rtl"] .q-inner{text-align:right;}
[dir="rtl"] .ctrl-row{flex-direction:row-reverse;}
[dir="rtl"] .xp-row{flex-direction:row-reverse;}
[dir="rtl"] .streak-card-inner{text-align:right;}
[dir="rtl"] .daily-head{flex-direction:row-reverse;}
[dir="rtl"] .ai-hint-step{flex-direction:row-reverse;}
[dir="rtl"] .lp-stage-head{flex-direction:row-reverse;}
[dir="rtl"] .sec{flex-direction:row-reverse;}
[dir="rtl"] .hero-chips{flex-direction:row-reverse;}

/* v13 version badge */
.version-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.04em;background:linear-gradient(135deg,#7B6EF6,#4AADEE);color:#fff;margin-left:6px;vertical-align:middle;}

/* Notification toggle button pulse when off */
#notifToggleBtn.needs-attention{animation:notifPulse 2s ease infinite;}
@keyframes notifPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px rgba(61,191,168,.25)}}

/* PWA install badge glow */
.pwa-install-btn{animation:glowPulse 2.5s ease infinite;}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(123,110,246,0)}50%{box-shadow:0 0 0 6px rgba(123,110,246,.2)}}

/* Widget data section on menu — subtle info strip */
.widget-info-strip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(61,191,168,.08),rgba(74,173,238,.08));border:1px dashed rgba(61,191,168,.3);font-size:.75rem;color:var(--g500);margin-top:4px;}
.widget-info-strip strong{color:var(--mint);}

/* ═══════════════════════════════════════
   V13 — DEEP GAMIFICATION STYLES
═══════════════════════════════════════ */

/* ── SEASONAL BANNER ── */
.seasonal-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;margin:0 0 12px;cursor:pointer;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);transition:transform .15s;}
.seasonal-banner:active{transform:scale(.98);}
.seasonal-icon{font-size:2rem;flex-shrink:0;}
.seasonal-body{flex:1;}
.seasonal-title{font-size:.95rem;font-weight:800;}
.seasonal-sub{font-size:.75rem;opacity:.88;margin-top:2px;}
.seasonal-cta{font-size:.8rem;font-weight:800;opacity:.9;white-space:nowrap;}

/* ── WORLD MAP STRIP ── */
.worldmap-strip{display:none;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(61,191,168,.1),rgba(74,173,238,.1));border:1px solid rgba(61,191,168,.25);cursor:pointer;margin-bottom:12px;}
.wms-label{font-size:.75rem;font-weight:800;color:var(--mint);white-space:nowrap;}
.wms-cities{display:flex;gap:4px;flex:1;}
.wms-city{width:28px;height:28px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:.9rem;opacity:.35;}
.wms-city.wms-unlocked{opacity:1;background:var(--mint-pale);}
.wms-arrow{font-size:1.2rem;color:var(--mint);font-weight:900;}

/* ── WORLD MAP MODAL ── */
.world-map-container{position:relative;width:100%;height:340px;background:linear-gradient(160deg,#0d1b2a 0%,#1a3a4a 40%,#0d2a1a 100%);overflow:hidden;border-radius:0 0 8px 8px;}
.world-map-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.wm-path-line{stroke:rgba(255,255,255,.12);stroke-width:.8;stroke-dasharray:2 2;}
.wm-path-line.unlocked{stroke:rgba(61,191,168,.5);stroke-dasharray:none;}
.wm-city{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:default;transition:transform .2s;}
.wm-city.unlocked{cursor:pointer;}
.wm-city.unlocked:hover{transform:translate(-50%,-50%) scale(1.15);}
.wm-city-pin{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 auto 3px;transition:all .2s;}
.wm-city.unlocked .wm-city-pin{background:rgba(61,191,168,.25);border-color:var(--mint);}
.wm-city.active .wm-city-pin{background:rgba(123,110,246,.4);border-color:#9B6EF0;box-shadow:0 0 16px rgba(123,110,246,.5);animation:cityPulse 2s ease infinite;}
@keyframes cityPulse{0%,100%{box-shadow:0 0 16px rgba(123,110,246,.5)}50%{box-shadow:0 0 28px rgba(123,110,246,.8)}}
.wm-city.locked .wm-city-pin{opacity:.4;}
.wm-city-label{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.7);white-space:nowrap;line-height:1.2;}
.wm-city.active .wm-city-label{color:#B8B0FA;font-weight:800;}
.wm-city-badge{font-size:.5rem;font-weight:900;background:#9B6EF0;color:#fff;padding:1px 5px;border-radius:99px;margin-top:2px;white-space:nowrap;}
.wm-city-req{font-size:.5rem;color:rgba(255,255,255,.4);margin-top:1px;}

/* ── STORY CHAPTER SELECT ── */
.story-chapters{display:flex;flex-direction:column;gap:8px;}
.story-chapter{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:2px solid var(--g200);background:var(--card);cursor:default;opacity:.5;}
.story-chapter.unlocked{cursor:pointer;opacity:1;}
.story-chapter.unlocked:active{transform:scale(.98);}
.story-chapter.done{border-color:var(--mint);background:var(--mint-pale);}
.sc-num{font-size:.65rem;font-weight:900;color:var(--g400);min-width:24px;}
.sc-emoji{font-size:1.5rem;flex-shrink:0;}
.sc-info{flex:1;}
.sc-name{font-size:.88rem;font-weight:800;color:var(--g900);}
.sc-villain{font-size:.73rem;color:var(--g500);margin-top:1px;}
.sc-reward{font-size:.68rem;color:var(--amber);font-weight:700;margin-top:2px;}
.sc-status{font-size:.9rem;font-weight:800;color:var(--g400);}
.story-chapter.unlocked .sc-status{color:var(--lav);}
.story-chapter.done .sc-status{color:var(--mint);}

/* ── STORY HERO ── */
.story-hero{background:linear-gradient(135deg,#F5A623,#F0707A,#9B6EF0)!important;}

/* ── STORY BATTLE OVERLAY ── */
.story-battle-overlay{position:fixed;top:0;left:0;right:0;z-index:95;pointer-events:none;pointer-events:none;display:flex;align-items:flex-start;justify-content:center;padding:8px 12px 0;}
.story-villain-area{background:linear-gradient(135deg,rgba(20,10,40,.92),rgba(40,10,50,.95));border-radius:0 0 20px 20px;padding:10px 16px 14px;width:100%;max-width:420px;border:2px solid rgba(155,110,240,.3);box-shadow:0 8px 32px rgba(0,0,0,.4);}
.story-villain-hp-bar-wrap{margin-bottom:8px;}
.story-villain-hp-label{font-size:.68rem;font-weight:800;color:#B8B0FA;margin-bottom:4px;}
.story-villain-hp-bg{height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;}
.story-villain-hp-fill{height:100%;background:#F0707A;border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1);will-change:width;transform:translateZ(0);}
.story-villain-hp-val{font-size:.62rem;color:rgba(255,255,255,.5);text-align:right;margin-top:2px;}
.story-villain-sprite{font-size:2.2rem;text-align:center;margin:4px 0;transition:transform .2s;}
.villain-hurt{animation:villainHurt .3s ease;}
@keyframes villainHurt{0%,100%{transform:none}50%{transform:translateX(8px) scale(.9);filter:brightness(3) saturate(0);}}
.villain-attack{animation:villainAttack .4s ease;}
@keyframes villainAttack{0%,100%{transform:none}30%{transform:scale(1.3)}60%{transform:translateX(-5px)}}
.story-villain-msg{font-size:.72rem;color:rgba(255,255,255,.7);text-align:center;font-style:italic;min-height:18px;}
.taunt-pop{animation:tauntPop .3s ease;}
@keyframes tauntPop{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}

/* ── SEASONAL MODAL ── */
.seasonal-info-card{border-radius:14px;overflow:hidden;margin-bottom:16px;}
.seasonal-reward-box{padding:12px 14px;background:linear-gradient(135deg,#FFF8E8,#EDE9FD);font-size:.83rem;font-weight:700;color:#7B4F00;text-align:center;}
.seasonal-bonus-row{display:flex;gap:1px;}
.seasonal-bonus{flex:1;padding:10px;background:var(--bg);text-align:center;}
.sb-val{display:block;font-size:1.4rem;font-weight:900;color:var(--g900);}
.sb-lbl{font-size:.7rem;color:var(--g500);font-weight:600;}
.seasonal-challenges{margin-bottom:16px;}
.seasonal-ch-title{font-size:.78rem;font-weight:800;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.seasonal-challenge{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:10px;background:var(--bg);margin-bottom:6px;font-size:.82rem;font-weight:600;color:var(--g700);gap:8px;}
.seasonal-challenge.done{background:var(--mint-pale);color:var(--mint);}
.sch-pts{font-size:.7rem;color:var(--amber);font-weight:800;white-space:nowrap;}

/* ── GUILD MODAL ── */
.guild-input{width:100%;padding:11px 14px;border-radius:12px;border:2px solid var(--g200);background:var(--bg);font-size:.88rem;font-weight:600;color:var(--g900);outline:none;margin-bottom:8px;box-sizing:border-box;}
.guild-input:focus{border-color:#7B6EF6;}
.guild-badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.guild-badge-btn{width:36px;height:36px;border-radius:10px;border:2px solid var(--g200);background:var(--bg);font-size:1.2rem;cursor:pointer;transition:all .15s;}
.guild-badge-btn.selected{border-color:#F5A623;background:#FFF8E8;transform:scale(1.15);}
.guild-divider{text-align:center;font-size:.73rem;color:var(--g400);font-weight:700;margin:14px 0;letter-spacing:.04em;}
.guild-card{border-radius:14px;background:linear-gradient(135deg,#FFF8E8,#EDE9FD);border:2px solid #F5A623;padding:14px;margin-bottom:14px;}
.guild-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.guild-badge-big{font-size:2rem;width:46px;height:46px;border-radius:12px;background:rgba(245,166,35,.15);display:flex;align-items:center;justify-content:center;}
.guild-card-name{font-size:.98rem;font-weight:800;color:var(--g900);}
.guild-card-code{font-size:.72rem;color:var(--g500);}
.guild-card-stats{display:flex;gap:8px;}
.guild-stat{flex:1;text-align:center;padding:8px;background:rgba(255,255,255,.6);border-radius:10px;}
.gs-val{display:block;font-size:1.1rem;font-weight:900;color:var(--g900);}
.gs-lbl{font-size:.65rem;color:var(--g500);font-weight:600;}
.guild-weekly-title{font-size:.78rem;font-weight:800;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.guild-leaderboard{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.guild-lb-title{font-size:.73rem;font-weight:700;color:var(--g400);margin-bottom:4px;}
.guild-lb-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--bg);font-size:.82rem;}
.guild-lb-row.me{background:var(--lav-pale);border:1px solid rgba(123,110,246,.2);}
.guild-lb-rank{font-size:.9rem;width:20px;flex-shrink:0;}
.guild-lb-badge{font-size:.9rem;flex-shrink:0;}
.guild-lb-name{flex:1;font-weight:700;color:var(--g800);}
.guild-lb-score{font-weight:800;color:var(--amber);}

/* Dark mode for new elements */
body.dark .guild-card{background:linear-gradient(135deg,rgba(245,166,35,.08),rgba(123,110,246,.08));}
body.dark .guild-input{background:var(--surface);border-color:rgba(255,255,255,.1);color:var(--g200);}
body.dark .story-chapter{background:var(--surface);border-color:rgba(255,255,255,.1);}
body.dark .wm-city-label{color:rgba(255,255,255,.8);}

/* ═══════════════════════════════════════
   V14 — PERF & INTERACTION PATCHES
═══════════════════════════════════════ */

/* Eliminate 300ms tap delay on all interactive elements */
a,button,input,select,textarea,[onclick],[role="button"]{
  touch-action:manipulation;
}

/* Prevent iOS from zooming on input focus (font-size >= 16px trick) */
input,select,textarea{
  font-size:max(16px, 1em);
  -webkit-appearance:none;
  appearance:none;
}

/* Prevent text selection on tap on game buttons */
.ans-btn,.play-cta,.hdr-btn,.pu-btn,.menu-icon-btn,
.gmode-card,.diff-card,.time-chip,.lang-btn{
  -webkit-user-select:none;
  user-select:none;
}

/* Compositor-only animated bars */
.timer-fill,.xp-bar-fill,.xp-inline-fill,.daily-bar-fill,
.prog-bar,.ta-bar,.lp-progress-fill,.story-villain-hp-fill{
  will-change:width;
  transform:translateZ(0);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}

/* XP bar: smooth expand (previously no transition in some states) */
.xp-bar-fill{transition:width .6s cubic-bezier(.4,0,.2,1);}

/* Reduce animation load when many particles active */
.particle-canvas{contain:strict;pointer-events:none;}

/* Ensure fixed elements don't cause scroll jump on mobile */
.toast-container,.lvlup-splash,.score-pop,.combo-popup,
.story-battle-overlay{
  transform:translateZ(0);
}

/* Fix gmode-grid overflow on xs: use auto-fill instead of fixed 1fr 1fr */
.gmode-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
@media(max-width:374px){.gmode-grid{grid-template-columns:repeat(2,1fr);}}

/* v14: lang-grid handled by responsive breakpoints above */
@media(max-width:374px){.lang-grid{grid-template-columns:repeat(2,1fr);}}

/* World map: correct height with dvh */
.world-map-container{height:min(340px,55dvh);}

/* Story battle overlay: use dvh so it doesn't overflow on small screens */
.story-battle-overlay{max-height:35dvh;overflow:hidden;}

/* Seasonal banner safe width */
.seasonal-banner{width:100%;box-sizing:border-box;}

/* Fix guild-input zoom on iOS (font-size >= 16px) */
.guild-input,.mp-input{font-size:16px;}

/* Ensure modal-body doesn't clip rounded corners */
.modal-body:first-child{border-radius:var(--rxl) var(--rxl) 0 0;}
.modal-body:last-child{border-radius:0 0 var(--rxl) var(--rxl);}

/* Fix ans-btn active state flash on iOS (was using :hover which fires on tap) */
@media(hover:none){
  .ans-btn:hover:not(:disabled){transform:none;box-shadow:var(--sh1);}
  .diff-card:hover,.gmode-card:hover,.menu-icon-btn:hover{transform:none;}
}
/* Only apply hover effects on devices that support true hover */
@media(hover:hover) and (pointer:fine){
  .ans-btn:hover:not(:disabled){
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 8px 28px rgba(123,110,246,.22);
    border-color:var(--lav);
  }
}

/* Active (press) feedback for all devices */
.ans-btn:active:not(:disabled){transform:scale(.96);box-shadow:var(--sh0);}
.play-cta:active{transform:scale(.97)!important;}
.menu-icon-btn:active{transform:scale(.95)!important;}
.hdr-btn:active,.dark-toggle:active{transform:scale(.92)!important;}

/* Safe area: bottom nav clearance */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .game-body{padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .menu-scroll{padding-bottom:calc(28px + env(safe-area-inset-bottom));}
  .play-cta{margin-bottom:env(safe-area-inset-bottom);}
}

/* Fix absolute/fixed-positioned elements on rotated devices */
@media(orientation:landscape) and (max-height:500px){
  .lvlup-splash{align-items:flex-start;padding-top:8px;}
  .lvlup-card{padding:16px 20px;}
  .modal-emoji{font-size:2rem;margin-bottom:4px;}
  .modal-title{font-size:1.2rem;}
  .modal-hero{padding:16px 20px 14px;}
}

/* ═══════════════════════════════════════
   V14 — FINAL PERFORMANCE POLISH
═══════════════════════════════════════ */

/* Prevent text selection on interactive elements (eliminates long-press glitch on mobile) */
.ans-btn,.play-cta,.menu-icon-btn,.pu-btn,
.lang-btn,.diff-card,.gmode-card,.time-chip,
.hdr-btn,.dark-toggle,.hdr-avatar,.modal-primary,.modal-ghost{
  -webkit-user-select:none;
  user-select:none;
}

/* Input elements still selectable */
input,textarea{-webkit-user-select:text;user-select:text;}

/* Font rendering optimization */
.q-eq,.ans-btn,.hdr-title,.ms-val,.sw-val,.xp-badge{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Contain repaint on frequently-updated elements */
.timer-row{contain:layout style;}
.xp-inline{contain:layout;}
.stats-grid .sw{contain:layout style;}

/* Smooth momentum scrolling + no rubber band on modal body */
.modal-body,.ach-list{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Fix hero banner text wrapping on very narrow screens */
.hero-title{
  word-break:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}
.hero-sub{
  white-space:normal;
  word-break:break-word;
}

/* Tablet: widen modal slightly */
@media(min-width:600px){
  .modal-card{max-width:400px;}
  .modal-hero{padding:32px 28px 28px;}
}

/* Desktop: ensure modal doesn't exceed screen height */
@media(min-width:1024px){
  .modal-card{
    max-height:min(calc(100vh - 80px),720px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .modal-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
}

/* Fix world map on tablet */
@media(min-width:600px) and (max-width:767px){
  .world-map-container{height:320px;}
  .wm-city-pin{width:40px;height:40px;font-size:1.4rem;}
}

/* Story battle overlay: prevent overlap with modal */
.story-battle-overlay{
  pointer-events:none;
  transition:opacity .3s ease;
}
/* When a modal is open, hide story overlay */
.modal-overlay.open ~ .story-battle-overlay{opacity:0;}

/* ── ANIMATION EFFICIENCY: use opacity+transform only ── */
/* These are already compositor-only — just make sure no `filter` in loops */
.ans-btn.fc,.ans-btn.fw{
  /* correct / wrong flash: use border-color change not background recalc */
  transition:border-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1);
}

/* Fix modal ghost button active state latency on touch */
.modal-ghost:active,.modal-primary:active{
  opacity:.85;
  transform:scale(.98);
  transition:opacity .05s,transform .05s;
}

/* Fix z-index stacking context for story overlay, duel banner, boss banner */
.boss-banner{z-index:20;}
.duel-banner{z-index:21;}
.tourn-banner{z-index:22;}
.story-battle-overlay{z-index:30;}
/* Powerup panel above banners */
.powerup-panel{z-index:15;position:relative;}

/* Adaptive badge — prevent overflow */
.adaptive-badge{
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Version badge in header */
.version-pill{
  font-size:.55rem;
  padding:2px 6px;
  vertical-align:middle;
  flex-shrink:0;
}

/* Fix daily-card layout on small screens */
.daily-head{flex-wrap:wrap;gap:6px;}
.daily-reward{font-size:clamp(.7rem,2.5vw,.78rem);}

/* Fix quest-card list items on narrow screens */
.quest-item{word-break:break-word;overflow-wrap:break-word;}

/* Seasonal banner text truncation on XS */
@media(max-width:374px){
  .seasonal-title{font-size:.85rem;}
  .seasonal-sub{display:none;}
  .seasonal-cta{font-size:.7rem;}
}