:root{font-family:Inter,system-ui,sans-serif;color:#f7f2ff;background:#090711;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#24113e 0,#090711 38%);min-height:100vh}main{max-width:720px;margin:auto;padding:14px 14px 90px}.banner{width:100%;border-radius:22px;display:block;box-shadow:0 18px 60px #0008}#welcome{text-align:center;padding-top:8vh}#welcome p{color:#c9bfd6;font-size:18px;margin:24px}button{border:0;border-radius:14px;padding:14px 18px;background:#9d35ff;color:white;font-weight:800;font-size:15px;min-height:48px;cursor:pointer}#play{width:min(360px,90%);font-size:17px;box-shadow:0 0 28px #9d35ff55}.secondary{background:#211a2c;color:#ddd0eb;border:1px solid #3b3049}header{display:flex;justify-content:space-between;align-items:end;margin:6px 0 10px}header small{display:block;color:#9c90aa;font-size:10px;letter-spacing:2px}#level{font-size:27px}.stats{display:flex;gap:7px;flex-wrap:wrap;justify-content:end}.stats span{background:#17121f;border:1px solid #31263e;border-radius:99px;padding:8px 10px;font-size:13px}.bar{height:6px;background:#21192c;border-radius:99px;overflow:hidden;margin-bottom:18px}.bar i{display:block;height:100%;width:0;background:#a640ff;transition:width .3s}.stage{display:grid;grid-template-columns:82px 1fr;align-items:start;gap:8px}.mascot-wrap{position:sticky;top:10px;margin-top:30px}.mascot-wrap img{width:90px;max-width:100%;border-radius:50%;filter:drop-shadow(0 8px 18px #0008);transform-origin:50% 80%}.mascot-wrap.blink img{animation:blink .22s}.mascot-wrap.happy img{animation:happy .55s}.mascot-wrap.nope img{animation:nope .45s}.mascot-wrap.skipcat img{animation:sideeye .5s}.mascot-wrap.idle img{animation:idle 1.2s}.mascot-wrap span{display:none;position:absolute;left:0;top:78px;width:105px;background:#f7f2ff;color:#1b1222;border-radius:10px;padding:7px;font-size:10px;font-weight:800;text-align:center}.mascot-wrap span.show{display:block}.card{background:#120e19;border:1px solid #30243d;border-radius:22px;padding:20px;min-width:0;box-shadow:0 20px 50px #0005}.meta{display:flex;justify-content:space-between;align-items:center;color:#9c90aa;font-size:11px;letter-spacing:1px}.meta button{padding:6px 8px;min-height:0;background:transparent;color:#9c90aa;font-size:11px}h2{font-size:clamp(21px,5vw,29px);line-height:1.35;margin:26px 0}#answers{display:grid;gap:10px}.answer{text-align:left;background:#1b1524;border:1px solid #3b2e49;font-size:16px}.answer:hover{border-color:#6e4c8b}.answer.correct{background:#173524;border-color:#3fb76b}.answer.wrong{background:#421b28;border-color:#db4b70}.answer:disabled{opacity:1}.actions{display:flex;gap:10px;margin-top:16px}.actions button{flex:1}#feedback{min-height:0;color:#cbbfd6;line-height:1.45;margin-top:14px}#feedback strong{color:#fff}nav{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 28px));display:flex;padding:6px;background:#130f1bcc;border:1px solid #352942;border-radius:18px;backdrop-filter:blur(14px);z-index:5}nav button{flex:1;background:transparent;color:#9d91aa;font-size:12px}nav button.active{background:#251a31;color:#fff}#panel{padding-top:20px}#panelContent{margin-top:20px}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.statbox,.leader{background:#15101d;border:1px solid #30253c;border-radius:16px;padding:16px}.statbox b{display:block;font-size:26px;margin-top:4px}.leader{display:flex;justify-content:space-between;margin-bottom:8px}.modal{position:fixed;inset:0;background:#000b;z-index:20;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.modal>div{width:min(420px,100%);background:#15101d;border:1px solid #41314f;border-radius:22px;padding:20px}.modal button{width:100%;margin-top:8px;text-align:left}@keyframes blink{50%{transform:scaleY(.86)}}@keyframes happy{30%{transform:rotate(-5deg) translateY(-5px) scale(1.05)}70%{transform:rotate(4deg)}}@keyframes nope{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes sideeye{50%{transform:rotate(7deg)}}@keyframes idle{50%{transform:translateY(-2px) rotate(-1deg)}}@media(max-width:470px){main{padding-left:10px;padding-right:10px}.stage{grid-template-columns:52px 1fr;gap:5px}.mascot-wrap{margin-top:40px}.mascot-wrap img{width:62px}.mascot-wrap span{width:90px;top:58px;font-size:9px}.card{padding:16px}.stats span{padding:6px 8px}.stats{gap:4px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v0.2 sitting mascot */
.mascot-wrap{width:92px;height:170px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.mascot-wrap img{width:92px;height:165px;object-fit:contain;border-radius:0!important;filter:drop-shadow(0 10px 14px #0009);transition:opacity .12s ease;transform-origin:50% 88%}
.mascot-wrap span{top:138px;z-index:4}
@media(max-width:470px){.mascot-wrap{width:62px;height:125px;margin-top:28px}.mascot-wrap img{max-height:120px}.mascot-wrap span{top:102px;left:-8px}}
/* V3 high-resolution living mascot */
.mascot-wrap img{animation:catBreathing 3.8s ease-in-out infinite;will-change:transform}
@keyframes catBreathing{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* V4: every mascot state uses an identical canvas and fixed display box. No reaction scales the cat. */
.mascot-wrap img{min-width:92px;max-width:92px;min-height:165px;max-height:165px}
@media(max-width:470px){.mascot-wrap img{width:62px;min-width:62px;max-width:62px;height:120px;min-height:120px;max-height:120px}}

/* V6 — large fur-tight mascot that can overlap the quiz card without changing size between states */
.stage{position:relative;display:block;min-height:520px;padding-left:72px}
.mascot-wrap{position:absolute!important;left:-82px;top:18px;width:235px!important;height:315px!important;margin:0!important;z-index:3;overflow:visible!important;pointer-events:none;display:block!important}
.mascot-wrap img{position:absolute;inset:0;width:235px!important;height:312px!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center bottom;border-radius:0!important;animation:catBreathing 3.8s ease-in-out infinite!important;filter:drop-shadow(0 12px 22px #000b)}
.mascot-wrap span{left:40px!important;top:235px!important;width:125px!important;z-index:5!important}
.card{position:relative;z-index:2;background:rgba(18,14,25,.96);min-height:440px}
.share-score{width:100%;margin-top:16px;background:#9d35ff}
@keyframes catBreathing{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(max-width:470px){.stage{padding-left:46px}.mascot-wrap{left:-88px;top:12px;width:205px!important;height:275px!important}.mascot-wrap img{width:205px!important;height:272px!important}.mascot-wrap span{left:35px!important;top:205px!important}.card{padding:16px}}

/* Alpha v0.7 — slick glass card + mascot BEHIND the quiz */
body{background:radial-gradient(900px 560px at 48% -10%,rgba(121,42,202,.25),transparent 62%),linear-gradient(180deg,#0d0717 0%,#08070e 52%,#07070d 100%)}
.stage{position:relative;display:block;min-height:520px;padding-left:34px;isolation:isolate}
.mascot-wrap{position:absolute!important;left:-30px!important;top:42px!important;width:112px!important;height:158px!important;margin:0!important;z-index:1!important;pointer-events:none!important;overflow:visible!important}
.mascot-wrap img{position:absolute!important;inset:0!important;width:112px!important;height:158px!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;border-radius:0!important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))!important;animation:catBreathing 3.8s ease-in-out infinite!important}
.mascot-wrap span{left:8px!important;top:122px!important;width:100px!important;z-index:4!important}
.card{position:relative;z-index:3!important;background:linear-gradient(145deg,rgba(21,15,30,.88),rgba(13,10,20,.78))!important;border:1px solid rgba(169,112,218,.22)!important;box-shadow:0 24px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.035)!important;backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);min-height:440px}
.answer{background:rgba(35,26,47,.68)!important;border-color:rgba(167,117,204,.24)!important;backdrop-filter:blur(8px)}
.answer.correct{background:rgba(23,53,36,.88)!important}.answer.wrong{background:rgba(66,27,40,.88)!important}
.meta{gap:8px}.meta button{letter-spacing:0;font-size:10px;color:#aa9db8}.meta button:first-child{margin-right:auto}
.community{text-align:center;margin:14px 0 4px}.community a{font-size:11px;color:#9e8eaf;text-decoration:none;opacity:.78}.community a:hover{opacity:1;color:#d8c9e8}
.alpha{position:fixed;right:9px;bottom:3px;z-index:30;font:600 8px/1 Inter,system-ui,sans-serif;letter-spacing:.45px;color:rgba(215,202,228,.34);pointer-events:none}
.feedback-types{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.feedback-types button{font-size:12px;padding:9px;min-height:38px;text-align:center!important;background:#211a2c;border:1px solid #3b3049}.feedback-types button.active{background:#402259;border-color:#8f4cc1}textarea{width:100%;min-height:125px;resize:vertical;border-radius:14px;border:1px solid #3b3049;background:#0f0b16;color:#f7f2ff;padding:13px;font:inherit;outline:none}textarea:focus{border-color:#8e49c2;box-shadow:0 0 0 3px rgba(157,53,255,.09)}
.share-score{box-shadow:0 10px 28px rgba(157,53,255,.22)}
@media(max-width:470px){.stage{padding-left:28px}.mascot-wrap{left:-31px!important;top:44px!important;width:100px!important;height:142px!important}.mascot-wrap img{width:100px!important;height:142px!important}.mascot-wrap span{left:4px!important;top:108px!important;width:92px!important}.card{padding:16px!important}}

/* Alpha v0.7.1 — clearer question reporting + actually visible glass */
.card{
  background:linear-gradient(145deg,rgba(20,14,29,.64),rgba(10,8,16,.54))!important;
  border:1px solid rgba(195,151,232,.24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(15px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(15px) saturate(135%)!important;
}
.answer{
  background:linear-gradient(135deg,rgba(48,36,62,.48),rgba(28,21,38,.40))!important;
  border:1px solid rgba(190,145,224,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(9px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(120%)!important;
}
.answer:hover{background:rgba(55,40,72,.56)!important;border-color:rgba(190,130,238,.48)!important}
.answer.correct{background:rgba(23,53,36,.82)!important}.answer.wrong{background:rgba(66,27,40,.82)!important}
#report{font-size:12px!important;font-weight:750!important;letter-spacing:0!important;color:rgba(230,218,240,.70)!important;white-space:nowrap}
#report:hover{color:#fff!important;background:rgba(255,255,255,.045)!important}

/* Alpha v0.7.2 — mascot in FRONT of the glass, with a protected no-text gutter */
.mascot-wrap{z-index:5!important}
.card{z-index:3!important;padding-left:64px!important}
@media(max-width:470px){
  .card{padding-left:58px!important;padding-right:16px!important}
}

/* Alpha v0.7.3 — thumb-friendly modal close */
.feedback-dialog{position:relative!important;padding-top:22px!important}
.modal-x{position:absolute!important;top:10px!important;right:10px!important;width:46px!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0!important;border-radius:14px!important;text-align:center!important;font-size:31px!important;line-height:42px!important;font-weight:500!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.10)!important;color:#f5edff!important;z-index:3!important}
.modal-x:active{transform:scale(.96);background:rgba(255,255,255,.13)!important}
.feedback-dialog h3{padding-right:52px}
.feedback-types button{line-height:1.15}


/* Alpha v0.7.4 — restore natural card layout; mascot between glass and readable content */
.stage{
  padding-left:0!important;
  isolation:isolate!important;
}
.card{
  position:relative!important;
  z-index:auto!important;
  padding-left:20px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Glass surface lives behind the mascot. */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(20,14,29,.64),rgba(10,8,16,.54));
  border:1px solid rgba(195,151,232,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(15px) saturate(135%);
  -webkit-backdrop-filter:blur(15px) saturate(135%);
  pointer-events:none;
}
/* Cat is in front of the glass itself. */
.mascot-wrap{
  z-index:1!important;
  left:-20px!important;
  overflow:visible!important;
}
/* But ALL readable/interactive quiz content sits above the cat. */
.card > *{
  position:relative;
  z-index:2;
}
#sentence{
  text-shadow:0 2px 8px rgba(7,5,12,.92),0 0 18px rgba(7,5,12,.70);
}
#answers,.answer,.meta,.actions,#feedback{
  z-index:2!important;
}
.answer{
  position:relative!important;
}
@media(max-width:470px){
  .stage{padding-left:0!important}
  .card{padding:16px!important}
  .mascot-wrap{left:-23px!important}
}

/* Alpha v0.7.5 — single-screen Telegram layout + mascot perched on bottom bar */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden!important;overscroll-behavior:none}
body{min-height:0!important}
main{height:100dvh;max-height:100dvh;overflow:hidden!important;padding:10px 14px calc(82px + env(safe-area-inset-bottom))!important}
#game{height:100%;min-height:0;overflow:hidden!important;display:flex;flex-direction:column}
#game[hidden]{display:none!important}
header{flex:0 0 auto;margin:2px 0 6px!important}
.bar{flex:0 0 auto;margin-bottom:8px!important}
.stage{flex:1 1 auto;min-height:0!important;height:auto!important;position:relative!important;overflow:visible!important}
.card{height:100%;min-height:0!important;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px 20px!important;padding-bottom:14px!important}
.card::-webkit-scrollbar{display:none}
h2{font-size:clamp(18px,4.5vw,27px)!important;margin:16px 0!important;line-height:1.28!important}
#answers{gap:8px!important}.answer{min-height:44px!important;padding:11px 14px!important;font-size:15px!important}
.actions{margin-top:10px!important}.actions button{min-height:44px!important;padding:10px 14px!important}
#feedback{margin-top:8px!important;font-size:14px}
.community{position:fixed!important;left:50%!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;margin:0!important;z-index:8!important;white-space:nowrap!important}
.community a{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:7px 13px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;color:#f4eaff!important;opacity:1!important;background:rgba(121,48,177,.52)!important;border:1px solid rgba(208,157,245,.38)!important;box-shadow:0 7px 20px rgba(0,0,0,.26)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
nav{bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:6!important}
/* Sit the cat on the navigation bar: body/tail remain above the bar, paws meet its top edge. */
.mascot-wrap{position:fixed!important;left:max(12px,calc(50% - 250px))!important;top:auto!important;bottom:calc(55px + env(safe-area-inset-bottom))!important;width:100px!important;height:142px!important;z-index:7!important;overflow:visible!important;margin:0!important}
.mascot-wrap img{width:100px!important;height:142px!important;object-fit:contain!important;object-position:center bottom!important}
.mascot-wrap span{left:4px!important;top:108px!important;width:92px!important}
/* Version stays visible above the bottom bar. */
.alpha{right:12px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;z-index:9!important;color:rgba(215,202,228,.46)!important}
#panel{height:100%;overflow:auto;padding:10px 0 calc(76px + env(safe-area-inset-bottom))!important;scrollbar-width:none}
#panel::-webkit-scrollbar{display:none}
#welcome{height:100%;overflow:hidden;padding-top:min(8vh,54px)!important}
@media(max-width:470px){
 main{padding:7px 10px calc(80px + env(safe-area-inset-bottom))!important}
 .card{padding:13px 14px!important}
 .meta{gap:4px!important}.meta button{font-size:10px!important;padding:5px 4px!important}
 h2{font-size:clamp(17px,5.1vw,23px)!important;margin:13px 0!important}
 .answer{font-size:14px!important;min-height:41px!important;padding:9px 11px!important}
 .actions button{min-height:41px!important;padding:8px 10px!important}
 .mascot-wrap{left:8px!important;bottom:calc(54px + env(safe-area-inset-bottom))!important;width:88px!important;height:125px!important}
 .mascot-wrap img{width:88px!important;height:125px!important}
 .mascot-wrap span{left:0!important;top:94px!important;width:86px!important}
 .community{bottom:calc(70px + env(safe-area-inset-bottom))!important}
 .community a{font-size:11px!important;padding:6px 10px!important}
 .alpha{bottom:calc(70px + env(safe-area-inset-bottom))!important}
}

/* Alpha v0.7.6 — paws perch ON the top edge of the nav instead of sinking behind it */
.mascot-wrap{bottom:calc(70px + env(safe-area-inset-bottom))!important}
@media(max-width:470px){.mascot-wrap{bottom:calc(68px + env(safe-area-inset-bottom))!important}}


/* Alpha v0.7.7 — question-report close button + consistent dialog spacing */
.report-dialog{position:relative!important;padding-top:22px!important}
.report-dialog h3{padding-right:52px}


/* Alpha v0.7.8 — persistent game chrome + confirmation + bonus skips */
#appChrome[hidden]{display:none!important}
#appChrome nav{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;width:min(690px,calc(100% - 20px))!important;z-index:100!important}
#appChrome .mascot-wrap{z-index:101!important}
#appChrome .community{z-index:102!important}
#panel{position:absolute!important;inset:0!important;height:100dvh!important;overflow:auto!important;padding:14px 14px calc(98px + env(safe-area-inset-bottom))!important;z-index:20!important;background:radial-gradient(circle at 50% 0,#24113e 0,#090711 38%)!important}
#panel[hidden]{display:none!important}
#panelContent{max-width:692px;margin:0 auto;padding-bottom:40px}
#back{display:block;margin:0 auto 10px;max-width:692px}
.confirm-dialog{position:relative;width:min(390px,92vw);background:#17111f;border:1px solid #49375b;border-radius:20px;padding:22px;box-shadow:0 24px 80px #000b;text-align:center}
.confirm-dialog h3{margin:0 0 8px;font-size:21px}.confirm-dialog p{color:#cfc2da;margin:0 0 18px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions button{width:100%}
.skip-offer{display:grid;gap:8px;padding:10px 0}.skip-offer button{width:100%;background:#9d35ff;box-shadow:0 8px 24px rgba(157,53,255,.25)}.skip-offer small{color:#a99bb7;text-align:center}
#welcome .banner{max-height:min(62dvh,620px);object-fit:contain}
#welcome{padding-top:min(2.5vh,18px)!important}
#welcome p{margin:10px 0 12px!important}
.alpha{bottom:calc(78px + env(safe-area-inset-bottom))!important;z-index:103!important}

/* Alpha v0.7.9 — Audio & Settings */
.modal{z-index:200!important}.settings-dock{position:fixed;right:8px;bottom:calc(91px + env(safe-area-inset-bottom));z-index:104;width:50px;height:50px;display:grid;place-items:center}#settingsButton{width:50px;height:50px;min-height:50px;padding:6px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center}#settingsButton img{display:block;width:40px;height:40px;object-fit:contain;filter:none}#settingsButton:active{transform:none}.now-playing{position:fixed;left:50%;bottom:calc(106px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:102;max-width:min(390px,62vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:10px;font-weight:700;color:rgba(219,199,237,.62);pointer-events:none}.settings-dialog{position:relative!important;width:min(430px,94vw)!important;max-height:min(650px,82dvh);overflow:auto;overscroll-behavior:contain;padding:24px 22px 20px!important;background:linear-gradient(155deg,rgba(25,17,35,.98),rgba(12,9,18,.98))!important;box-shadow:0 28px 90px #000c!important}.settings-dialog h3{margin:2px 52px 18px 0;font-size:22px}.music-player{padding:15px;border:1px solid rgba(183,123,226,.24);background:rgba(80,38,111,.16);border-radius:18px;text-align:center}.settings-kicker{font-size:9px;letter-spacing:1.8px;color:#9f8cac;font-weight:800}.settings-track{margin-top:6px;font-weight:850;font-size:16px}.settings-artist{min-height:16px;margin-top:3px;font-size:11px;color:#a99bb7}.transport{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.transport button{width:46px;height:42px;min-height:42px;padding:9px;display:grid;place-items:center;border-radius:14px;background:rgba(157,53,255,.14);border:1px solid rgba(187,118,240,.24)}.transport button.transport-main{width:54px;height:48px;background:rgba(157,53,255,.42)}.transport svg{width:21px;height:21px;fill:#f8f1ff}.audio-row{position:relative;margin-top:15px;padding:13px 14px 11px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.audio-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:800}.audio-toggle{width:auto!important;min-width:48px!important;min-height:30px!important;margin:0!important;padding:5px 10px!important;border-radius:999px!important;text-align:center!important;font-size:10px!important;background:rgba(157,53,255,.36)!important;border:1px solid rgba(201,150,240,.25)!important}.audio-toggle.off{background:rgba(255,255,255,.055)!important;color:#8f8399!important}.audio-slider{display:block;width:calc(100% - 48px);height:30px;margin:8px 48px 0 0;accent-color:#a640ff;touch-action:none;overscroll-behavior:contain;cursor:pointer}.audio-row output{position:absolute;right:14px;bottom:16px;width:38px;text-align:right;font-size:10px;color:#aa9bb8}@media(max-width:470px){.settings-dock{right:4px;bottom:calc(88px + env(safe-area-inset-bottom))}#settingsButton img{width:38px;height:38px}.now-playing{bottom:calc(102px + env(safe-area-inset-bottom));max-width:58vw;font-size:9px}.settings-dialog{max-height:80dvh}}#bubble{transition:opacity .22s ease}
/* v0.7.9.2 settings/audio fixes */
.settings-dock{width:52px!important;height:52px!important;right:5px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important}
#settingsButton{width:52px!important;height:52px!important;min-height:52px!important;padding:3px!important}
#settingsButton img{width:43px!important;height:43px!important;object-fit:contain!important}
.audio-slider{width:calc(100% - 48px)!important;touch-action:auto!important;-webkit-user-select:auto;user-select:auto}
.audio-row input[type="range"]{pointer-events:auto!important}

/* Alpha v0.7.9.4 — Telegram WebView slider hard-fix.
   The slider owns horizontal gestures; the settings panel owns vertical scrolling. */
.audio-slider{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:calc(100% - 48px)!important;
  height:32px!important;
  margin:8px 48px 0 0!important;
  background:transparent!important;
  touch-action:none!important;
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.audio-slider::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.audio-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  margin-top:-8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:#a640ff;
  box-shadow:0 0 0 4px rgba(166,64,255,.18);
}
.audio-slider::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.audio-slider::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:#a640ff;
}
.settings-dialog{touch-action:pan-y!important;}

/* v0.7.9.6 — custom Telegram-safe volume controls (not native range inputs). */
.custom-volume{
  position:relative;
  width:calc(100% - 52px);
  height:34px;
  margin:6px 52px 2px 0;
  cursor:pointer;
  touch-action:none !important;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:auto !important;
  outline:none;
}
.custom-volume::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:7px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.custom-volume-fill{
  position:absolute;
  left:0;top:50%;
  width:0;
  height:7px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,#7448ff,#d747ff);
  pointer-events:none;
}
.custom-volume-knob{
  position:absolute;
  top:50%;left:0;
  width:24px;height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  background:#a640ff;
  box-shadow:0 0 0 5px rgba(166,64,255,.16),0 0 14px rgba(190,70,255,.5);
  pointer-events:none;
}
.custom-volume:focus-visible .custom-volume-knob{
  box-shadow:0 0 0 6px rgba(166,64,255,.28),0 0 16px rgba(190,70,255,.65);
}
.settings-dialog{overscroll-behavior:contain;touch-action:pan-y;}

/* Alpha v0.7.10.0 — streak energy, rare questions, celebrations, live leaderboard */
.card{position:relative;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.rare-badge{width:max-content;max-width:100%;margin:-4px 0 10px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,209,94,.48);background:rgba(255,190,54,.09);color:#ffe19a;font-size:10px;font-weight:900;letter-spacing:.8px;box-shadow:0 0 20px rgba(255,193,54,.10)}
.card.rare-question{border-color:rgba(255,203,75,.48);box-shadow:0 20px 50px #0005,0 0 28px rgba(255,190,54,.10)}
.card.rare-question .answer:not(.correct):not(.wrong){border-color:rgba(255,206,92,.22)}
.card.milestone-glow{animation:quizMilestone 1.85s ease-out}
.answer.milestone-answer-glow{animation:answerMilestone 1.85s ease-out}
@keyframes quizMilestone{0%{border-color:#fff;box-shadow:0 0 0 1px #fff,0 0 20px #b63cff,0 0 55px rgba(176,53,255,.9)}35%{border-color:#d879ff;box-shadow:0 0 0 1px #c95aff,0 0 28px #a640ff,0 0 75px rgba(166,64,255,.6)}100%{border-color:#30243d;box-shadow:0 20px 50px #0005}}
@keyframes answerMilestone{0%,30%{border-color:#d67bff;box-shadow:0 0 16px rgba(185,70,255,.8),inset 0 0 14px rgba(151,45,255,.12)}100%{box-shadow:none}}
.celebration{position:fixed;inset:0;z-index:190;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at center,rgba(133,36,207,.18),transparent 43%);opacity:0;transition:opacity .24s ease}
.celebration[hidden]{display:none}.celebration.show{opacity:1}
.celebration-inner{display:grid;gap:6px;text-align:center;padding:18px 25px;border:1px solid rgba(208,145,255,.45);border-radius:22px;background:rgba(13,8,20,.91);box-shadow:0 0 28px rgba(173,54,255,.55),0 18px 60px #000a;transform:scale(.72) translateY(10px);animation:celebrationPop 1.6s cubic-bezier(.18,.88,.3,1.12)}
.celebration-inner b{font-size:clamp(24px,7vw,40px);letter-spacing:.5px;text-shadow:0 0 18px rgba(196,98,255,.7)}.celebration-inner span{font-size:12px;font-weight:800;letter-spacing:1.2px;color:#d5c3e5}
.celebration.rare .celebration-inner{border-color:rgba(255,210,100,.55);box-shadow:0 0 32px rgba(255,190,54,.35),0 18px 60px #000a}.celebration.rare .celebration-inner b{color:#ffe19a;text-shadow:0 0 18px rgba(255,190,54,.5)}
@keyframes celebrationPop{0%{transform:scale(.72) translateY(12px);opacity:0}16%{transform:scale(1.06) translateY(0);opacity:1}28%{transform:scale(1)}82%{transform:scale(1);opacity:1}100%{transform:scale(.96);opacity:0}}
.leader-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.leader-title small{color:#9d78b8;font-size:9px;font-weight:900;letter-spacing:1px}.leader{transition:transform .35s ease,border-color .35s ease,background .35s ease}.leader.me{border-color:rgba(171,79,240,.55);background:rgba(111,42,159,.16)}.leader span{display:flex;align-items:center;gap:6px;min-width:0}.leader span>i{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:#21172b;color:#d8c7e6;font-style:normal;font-size:11px;font-weight:900}.leader em{font-size:9px;font-style:normal;font-weight:900}.rank-up{color:#70dda0}.rank-down{color:#f07998}
@media(max-width:470px){.rare-badge{font-size:9px;padding:5px 8px}.celebration-inner{max-width:82vw}.leader-title small{font-size:8px}.leader{padding:13px 12px}}
@media(prefers-reduced-motion:reduce){.card.milestone-glow,.answer.milestone-answer-glow,.celebration-inner{animation:none!important}}

/* Alpha v0.7.10.1 — anticipation + unobtrusive event rail + richer streak energy */
.event-rail{min-height:0;display:grid;gap:6px;margin-top:8px;pointer-events:none;position:relative;z-index:12}
.event-pop{justify-self:center;display:flex;align-items:center;gap:7px;max-width:100%;padding:7px 11px;border:1px solid rgba(190,112,245,.38);border-radius:999px;background:rgba(19,12,28,.94);box-shadow:0 6px 22px #0008,0 0 16px rgba(157,53,255,.18);opacity:0;transform:translateY(-5px) scale(.96);transition:opacity .2s ease,transform .2s ease;color:#fff;text-align:center}
.event-pop.show{opacity:1;transform:translateY(0) scale(1)}.event-pop b{font-size:11px;letter-spacing:.35px}.event-pop span{font-size:9px;color:#cdbddd;font-weight:800}.event-pop.rare{border-color:rgba(255,210,100,.55);box-shadow:0 0 18px rgba(255,190,54,.22)}.event-pop.xp{padding:5px 10px}.event-pop.quick{border-color:rgba(129,211,255,.45)}.event-pop.miss{border-color:rgba(240,90,130,.38)}
.card.pre-milestone{animation:preMilestoneCard 1.45s ease-in-out infinite;border-color:rgba(193,87,255,.78)!important}.card.pre-milestone .answer:not(.correct):not(.wrong){animation:preMilestoneAnswer 1.45s ease-in-out infinite;border-color:rgba(180,79,246,.56)!important}.card.pre-milestone::after{content:'🔥 MILESTONE NEXT';position:absolute;right:14px;bottom:12px;font-size:8px;font-weight:950;letter-spacing:1px;color:#dba5ff;opacity:.75;pointer-events:none}
@keyframes preMilestoneCard{0%,100%{box-shadow:0 20px 50px #0005,0 0 12px rgba(165,55,255,.24)}50%{box-shadow:0 20px 50px #0005,0 0 28px rgba(184,68,255,.62),inset 0 0 20px rgba(139,42,225,.08)}}
@keyframes preMilestoneAnswer{0%,100%{box-shadow:0 0 6px rgba(168,65,239,.12)}50%{box-shadow:0 0 15px rgba(182,77,250,.48),inset 0 0 10px rgba(157,53,255,.07)}}
.card.streak-warm:not(.pre-milestone){box-shadow:0 20px 50px #0005,0 0 12px rgba(157,53,255,.12)}.card.streak-hot:not(.pre-milestone){box-shadow:0 20px 50px #0005,0 0 18px rgba(157,53,255,.19)}.card.streak-inferno:not(.pre-milestone){box-shadow:0 20px 50px #0005,0 0 25px rgba(190,68,255,.27)}
.card.rare-question::before{content:'✦';position:absolute;right:18px;top:48px;color:#ffd66d;font-size:15px;animation:rareTwinkle 1.7s ease-in-out infinite;filter:drop-shadow(0 0 8px #ffc34e)}@keyframes rareTwinkle{0%,100%{opacity:.3;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
/* Speech belongs above the mascot's head, never across the quiz. */
#appChrome .mascot-wrap span{left:-12px!important;top:auto!important;bottom:132px!important;width:124px!important;padding:8px 9px!important;border-radius:12px!important;box-shadow:0 8px 24px #0008!important}
#appChrome .mascot-wrap span::after{content:'';position:absolute;left:45%;bottom:-6px;width:11px;height:11px;background:#f7f2ff;transform:rotate(45deg)}
.stats-kicker{margin:18px 2px 8px;color:#a889bd;font-size:9px;font-weight:950;letter-spacing:1.5px}.stats-kicker.lifetime{margin-top:22px}.session-grid .statbox{border-color:rgba(155,72,216,.38)}
.rank-proximity{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(159,77,219,.28);border-radius:13px;background:rgba(92,36,130,.11);color:#cdbddd;font-size:11px;text-align:center}.rank-proximity b{color:#fff}
@media(max-width:470px){#appChrome .mascot-wrap span{left:-13px!important;bottom:116px!important;width:112px!important}.event-pop{padding:6px 9px}.event-pop span{font-size:8px}.card.pre-milestone::after{right:10px;bottom:9px}}
@media(prefers-reduced-motion:reduce){.card.pre-milestone,.card.pre-milestone .answer,.card.rare-question::before{animation:none!important}}

/* v0.7.10.2 dual leaderboard */
.leader-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}.leader-tab{min-height:40px;padding:9px 12px;background:#17111f;border:1px solid #342640;color:#a99ab7;font-size:12px}.leader-tab.active{background:rgba(133,48,190,.22);border-color:rgba(177,82,244,.6);color:#fff;box-shadow:0 0 18px rgba(157,53,255,.12)}

/* v0.7.11.2 — unmistakable pre-milestone state */
.milestone-banner{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 14px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,205,86,.88);background:linear-gradient(90deg,rgba(126,39,190,.32),rgba(255,174,45,.17),rgba(126,39,190,.32));box-shadow:0 0 18px rgba(255,188,57,.22),0 0 34px rgba(174,62,255,.20);text-align:center;pointer-events:none}
.milestone-banner[hidden]{display:none!important}.milestone-banner b{font-size:12px;letter-spacing:.8px;color:#ffe28a;text-shadow:0 0 12px rgba(255,193,62,.85)}.milestone-banner span{font-size:10px;font-weight:950;letter-spacing:.7px;color:#f5eaff}
.card.pre-milestone{border-color:#d985ff!important;animation:preMilestoneCardV2 .82s ease-in-out infinite!important;outline:1px solid rgba(255,201,82,.46);outline-offset:3px}
.card.pre-milestone::after{content:'🔥 MILESTONE QUESTION'!important;right:14px!important;bottom:12px!important;font-size:9px!important;color:#ffe28a!important;opacity:1!important;text-shadow:0 0 10px rgba(255,188,58,.8)}
.card.pre-milestone .answer:not(.correct):not(.wrong){border-color:rgba(218,125,255,.78)!important;animation:preMilestoneAnswerV2 .82s ease-in-out infinite!important}
.stats span:first-child.milestone-next{border-color:rgba(255,205,82,.92)!important;color:#fff7d4!important;animation:milestoneStreakPill .72s ease-in-out infinite!important;box-shadow:0 0 18px rgba(255,190,55,.52),0 0 30px rgba(181,66,255,.38)!important}
.stats span:first-child.milestone-next b{color:#ffe273!important;text-shadow:0 0 11px rgba(255,194,57,.95)}
@keyframes preMilestoneCardV2{0%,100%{transform:translateY(0);box-shadow:0 20px 50px #0006,0 0 18px rgba(174,57,255,.55),0 0 34px rgba(255,184,54,.18),inset 0 0 16px rgba(158,48,238,.08)}50%{transform:translateY(-1px);box-shadow:0 20px 55px #0007,0 0 34px rgba(197,83,255,.95),0 0 64px rgba(255,190,58,.42),inset 0 0 30px rgba(170,58,255,.16)}}
@keyframes preMilestoneAnswerV2{0%,100%{box-shadow:0 0 8px rgba(182,70,250,.24)}50%{box-shadow:0 0 20px rgba(207,102,255,.72),0 0 30px rgba(255,188,55,.12),inset 0 0 12px rgba(170,57,255,.10)}}
@keyframes milestoneStreakPill{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@media(max-width:470px){.milestone-banner{gap:7px;padding:9px 8px}.milestone-banner b{font-size:11px}.milestone-banner span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.card.pre-milestone,.card.pre-milestone .answer,.stats span:first-child.milestone-next{animation:none!important}}

/* v0.7.11.3 — Infinite landing screen */
#welcome{padding-top:min(2.5vh,18px)!important}
#welcome .banner{max-height:min(50dvh,500px);object-fit:contain}
.welcome-copy{margin:12px auto 14px}
#welcome .welcome-copy p{margin:0 0 4px!important;color:#eee6f8;font-size:19px;font-weight:800}
.welcome-copy small{display:block;color:#8f839d;font-size:11px;letter-spacing:.25px}
.welcome-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:min(560px,96%);margin:0 auto 10px}
.welcome-stat{min-width:0;background:linear-gradient(180deg,#17111f,#100c17);border:1px solid #332640;border-radius:15px;padding:9px 5px 8px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.welcome-stat span{display:block;color:#8f829c;font-size:8px;font-weight:900;letter-spacing:.55px;white-space:nowrap}
.welcome-stat b{display:block;margin-top:4px;color:#f8f2ff;font-size:19px;line-height:1}
.welcome-stat.featured{border-color:#70408e;background:linear-gradient(180deg,rgba(117,46,158,.22),#110c18);box-shadow:0 0 18px rgba(164,64,255,.12)}
.welcome-stat.featured b{color:#f0caff}
.welcome-level{display:flex;justify-content:space-between;width:min(560px,96%);margin:0 auto 5px;color:#81768e;font-size:9px;font-weight:900;letter-spacing:.8px}
.welcome-progress{width:min(560px,96%);height:5px;margin:0 auto 12px;border-radius:99px;background:#1c1425;overflow:hidden}
.welcome-progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8e2cff,#c65cff);box-shadow:0 0 12px rgba(169,61,255,.65);transition:width .35s ease}
#play{width:min(560px,96%);font-size:16px;letter-spacing:.25px;box-shadow:0 0 28px rgba(157,53,255,.28)}
#play:disabled{opacity:.72;cursor:wait}
.welcome-foot{margin-top:8px;color:#665d70;font-size:9px;letter-spacing:.3px}
@media(max-width:470px){
  #welcome .banner{max-height:min(43dvh,430px)}
  .welcome-copy{margin:9px auto 10px}
  #welcome .welcome-copy p{font-size:17px}
  .welcome-copy small{font-size:9px}
  .welcome-stats{gap:5px;margin-bottom:8px}
  .welcome-stat{padding:8px 3px 7px;border-radius:12px}
  .welcome-stat span{font-size:7px;letter-spacing:.25px}
  .welcome-stat b{font-size:17px}
  .welcome-progress{margin-bottom:10px}
  #play{min-height:50px}
}

/* v0.7.12.0 — Main Menu Foundation */
.settings-dock{display:none!important}
nav button{padding:10px 6px!important;min-height:46px!important;font-size:11px!important}
#home{padding:18px 2px calc(86px + env(safe-area-inset-bottom));text-align:left}
.home-brand{display:flex;align-items:center;gap:13px;margin:10px 5px 18px}
.home-catmark{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:linear-gradient(145deg,#25172f,#120d19);border:1px solid #4b315d;font-size:30px;box-shadow:0 0 30px rgba(159,53,255,.16)}
.home-kicker{font-size:9px;font-weight:900;letter-spacing:2.2px;color:#8f819d}
.home-brand h1{margin:1px 0 0;font-size:30px;line-height:1;letter-spacing:1.5px}
.home-brand p{margin:5px 0 0;color:#a99db5;font-size:12px}
.mode-card{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:132px;margin:0 0 11px;padding:17px;text-align:left;border-radius:23px;border:1px solid #443054;background:linear-gradient(145deg,#171020,#0f0b15);overflow:hidden}
.mode-card::before{content:"";position:absolute;inset:auto -40px -70px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(164,54,255,.22),transparent 68%);pointer-events:none}
.mode-infinite{border-color:#75449a;background:linear-gradient(135deg,rgba(93,35,126,.42),#120c1a 58%);box-shadow:0 12px 35px rgba(0,0,0,.25),0 0 30px rgba(155,49,255,.10)}
.mode-minigames{border-color:#3a3046}
.mode-icon{font-size:32px;align-self:start;margin-top:3px}
.mode-copy{min-width:0}
.mode-title{font-size:17px;font-weight:950;letter-spacing:.45px}
.mode-title span{display:inline-block;margin-left:6px;padding:4px 6px;border-radius:99px;background:#2b1c36;color:#cda6eb;font-size:7px;vertical-align:3px;letter-spacing:.8px}
.mode-copy p{margin:6px 0 10px;color:#a99db5;font-size:11px;line-height:1.4}
.mode-mini-stats{display:flex;gap:6px;flex-wrap:wrap}
.mode-mini-stats b{padding:5px 7px;border-radius:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);font-size:10px;color:#e7dcec}
.mode-arrow{align-self:end;font-size:10px;font-weight:950;letter-spacing:.6px;color:#d6a8fa;white-space:nowrap}
.mode-preview{display:flex;align-items:center;gap:7px;color:#eee5f4;font-size:11px;font-weight:800}
.mode-preview em{font-style:normal;color:#776b82;font-size:7px;letter-spacing:.7px}
.coming-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:3px}
.coming-card{min-height:80px;padding:15px;border-radius:18px;background:#110d17;border:1px solid #2d2436;color:#7d7187}
.coming-card b{display:block;color:#b8adbf;font-size:12px;letter-spacing:.4px}
.coming-card span{display:block;margin-top:8px;font-size:9px}
.home-mode #nowPlaying,.home-mode .mascot-wrap,.home-mode .community,
.landing-mode #nowPlaying,.landing-mode .mascot-wrap,.landing-mode .community{display:none!important}
.home-mode main,.landing-mode main{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
#panel h2{margin-top:12px}
@media(max-width:470px){
  #home{padding-top:8px}
  .home-brand{margin-bottom:14px}
  .home-catmark{width:50px;height:50px;border-radius:16px;font-size:26px}
  .home-brand h1{font-size:27px}
  .mode-card{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;min-height:118px;padding:14px}
  .mode-icon{font-size:27px}
  .mode-title{font-size:15px}
  .mode-copy p{font-size:10px}
  .mode-arrow{font-size:9px}
  nav button{font-size:10px!important;padding-left:3px!important;padding-right:3px!important}
}

/* v0.7.12.2 — contextual center Play navigation */
nav{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:end!important;
  overflow:visible!important;
}
nav button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
  min-height:49px!important;
  padding:7px 2px 6px!important;
  font-size:9px!important;
  line-height:1!important;
}
.nav-icon{font-size:16px;line-height:17px;opacity:.78}
nav button.active .nav-icon{opacity:1}
nav .nav-play{
  position:relative!important;
  overflow:visible!important;
  padding-top:1px!important;
  font-weight:900!important;
}
.nav-play-orb{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-top:-24px;
  margin-bottom:2px;
  border-radius:50%;
  border:2px solid #4e3561;
  background:linear-gradient(145deg,#21162b,#100b16);
  box-shadow:0 5px 20px rgba(0,0,0,.45);
  font-size:20px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
nav .nav-play.active{color:#f0d8ff!important}
nav .nav-play.active .nav-play-orb{
  border-color:#bd67f5;
  background:linear-gradient(145deg,#8c2ed0,#4c176e);
  box-shadow:0 0 0 4px rgba(166,61,230,.10),0 0 24px rgba(177,65,246,.52),0 7px 22px rgba(0,0,0,.45);
  transform:translateY(-2px);
}
nav .nav-play:active .nav-play-orb{transform:scale(.94)}
@media(max-width:390px){
  nav button{font-size:8px!important}
  .nav-icon{font-size:15px}
  .nav-play-orb{width:44px;height:44px;margin-top:-21px;font-size:18px}
}

/* v0.7.12.3 — shell placement polish */
.home-community{
  display:flex;
  justify-content:center;
  margin:14px 0 4px;
}
.home-community a,
.leaderboard-community a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(182,91,244,.38);
  background:rgba(116,41,158,.14);
  color:#d9b6f2;
  font-size:10px;
  font-weight:850;
  text-decoration:none;
  letter-spacing:.2px;
}
#appChrome .leaderboard-community{display:none!important}
body:has(nav button[data-view="top"].active) #appChrome .leaderboard-community{
  display:flex!important;
}

/* During gameplay these labels sit on the top edge of the bottom shell. */
body:not(.home-mode):not(.landing-mode) #nowPlaying{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(66px + env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  z-index:42!important;
  width:auto!important;
  max-width:58vw!important;
  margin:0!important;
  padding:2px 8px!important;
  border-radius:8px 8px 0 0!important;
  background:#0d0912!important;
  color:#8d8196!important;
  font-size:8px!important;
  line-height:14px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
}

/* Existing alpha/version label, wherever the legacy selector places it,
   is anchored to the same shell edge on the right. */
body:not(.home-mode):not(.landing-mode) .alpha,
body:not(.home-mode):not(.landing-mode) #alpha,
body:not(.home-mode):not(.landing-mode) .version,
body:not(.home-mode):not(.landing-mode) #version{
  position:fixed!important;
  right:10px!important;
  bottom:calc(66px + env(safe-area-inset-bottom))!important;
  z-index:43!important;
  margin:0!important;
  padding:2px 6px!important;
  background:#0d0912!important;
  color:#665d70!important;
  font-size:7px!important;
  line-height:14px!important;
  border-radius:8px 8px 0 0!important;
  pointer-events:none!important;
}

/* Home has its own community link; no duplicate shell link. */
.home-mode #appChrome .leaderboard-community{display:none!important}

/* v0.7.12.4 — labels REST on the nav edge; no cut-outs */
#appChrome .leaderboard-community{display:none!important}

body:not(.home-mode):not(.landing-mode) #nowPlaying{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(70px + env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  z-index:106!important;
  width:auto!important;
  max-width:42vw!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(219,199,237,.62)!important;
  font-size:8px!important;
  line-height:11px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
}
/* Alpha sits on the same unbroken top line, at the far right. */
body:not(.home-mode):not(.landing-mode) .alpha{
  position:fixed!important;
  right:10px!important;
  bottom:calc(70px + env(safe-area-inset-bottom))!important;
  z-index:106!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(215,202,228,.40)!important;
  font-size:7px!important;
  line-height:11px!important;
  pointer-events:none!important;
}

/* Same bottom-of-content treatment as Home, but inside Leaderboard scrolling content. */
.leaderboard-community-bottom{
  display:flex;
  justify-content:center;
  margin:18px 0 8px;
  padding-top:4px;
}
.leaderboard-community-bottom a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(182,91,244,.38);
  background:rgba(116,41,158,.14);
  color:#d9b6f2;
  font-size:10px;
  font-weight:850;
  text-decoration:none;
  letter-spacing:.2px;
}
@media(max-width:390px){
  body:not(.home-mode):not(.landing-mode) #nowPlaying{max-width:38vw;font-size:7px}
  body:not(.home-mode):not(.landing-mode) .alpha{right:7px;font-size:6.5px}
}

/* v0.7.12.5 — move tiny status labels away from bottom UI entirely */
body:not(.home-mode):not(.landing-mode) #nowPlaying{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 8px)!important;
  bottom:auto!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  z-index:120!important;
  width:auto!important;
  max-width:52vw!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(219,199,237,.56)!important;
  font-size:8px!important;
  line-height:11px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
}
body:not(.home-mode):not(.landing-mode) .alpha{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 8px)!important;
  bottom:auto!important;
  right:10px!important;
  left:auto!important;
  z-index:120!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(215,202,228,.38)!important;
  font-size:7px!important;
  line-height:11px!important;
  pointer-events:none!important;
}

/* v0.7.13.0 — Mini Games + Word Rush */
#miniGames,#wordRush{padding:12px 2px calc(90px + env(safe-area-inset-bottom))}
.subpage-head{display:flex;align-items:center;gap:14px;margin:8px 2px 20px}
.subpage-head button,#rushExit{width:auto;padding:8px 10px;border-radius:12px;background:#17101f;border:1px solid #392846;color:#bcaec7;font-size:10px}
.subpage-head small{color:#8f819d;font-size:8px;letter-spacing:1.8px;font-weight:900}
.subpage-head h2{margin:2px 0 0;font-size:25px}
.arcade-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;width:100%;margin-bottom:10px;padding:16px;text-align:left;border-radius:20px;background:linear-gradient(135deg,rgba(111,39,151,.38),#110c18);border:1px solid #6f438a;color:#f4ebfa}
.arcade-card .arcade-icon{font-size:28px}.arcade-card b{font-size:15px}.arcade-card p{margin:4px 0 7px;color:#a89bb2;font-size:10px}.arcade-card span{font-size:8px;color:#8e8099}.arcade-card em{font-style:normal;font-size:9px;font-weight:900;color:#d6a8fa}
.arcade-card.locked{opacity:.48;border-color:#302638;background:#100c15}
.rush-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;margin:5px 2px 12px}.rush-score,.rush-best{padding:7px 9px;border-radius:11px;background:#15101b;border:1px solid #33273d;color:#887b92;font-size:8px;font-weight:900}.rush-score b,.rush-best b{display:block;color:#f4eafa;font-size:16px;text-align:center}
.rush-timer{position:relative;height:16px;margin:0 2px 18px;border-radius:99px;background:#1a1222;overflow:hidden;border:1px solid #342442}.rush-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8d2be0,#c95cff);transition:width .06s linear}.rush-timer i.danger{filter:saturate(1.6) brightness(1.25)}.rush-timer b{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:9px;text-shadow:0 1px 3px #000}
.rush-feedback{height:18px;text-align:center;font-size:10px;font-weight:950;letter-spacing:1px}.rush-feedback.good{color:#d6a5ff}.rush-feedback.bad{color:#ff8fba}
.rush-card{min-height:390px;padding:26px 20px;border-radius:25px;background:linear-gradient(160deg,#17101f,#0d0912);border:1px solid #4b345d;box-shadow:0 16px 45px rgba(0,0,0,.25)}.rush-card>small{display:block;text-align:center;color:#7f718a;font-size:8px;font-weight:900;letter-spacing:2px}.rush-card h2{text-align:center;margin:12px 0 26px;font-size:24px;letter-spacing:.5px}
.rush-choices{display:grid;grid-template-columns:1fr 1fr;gap:11px}.rush-choices>button{min-height:88px;border-radius:18px;border:1px solid #493758;background:#1a1222;color:#f4edf8;font-size:17px;font-weight:850}.rush-choices>button:active{transform:scale(.97)}.rush-choices>button.correct{border-color:#b65cff;box-shadow:0 0 20px rgba(177,70,255,.35)}.rush-choices>button.wrong{border-color:#a64770}
.rush-rule{text-align:center;margin-top:13px;color:#756a7d;font-size:9px}.rush-rule b{color:#ad9ab8}
.rush-over{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;padding:10px}.rush-over small{font-size:10px;letter-spacing:2px;color:#9d8ba8}.rush-over strong{font-size:70px;line-height:1.05;margin:8px 0;color:#f0d5ff;text-shadow:0 0 30px rgba(183,74,255,.35)}.rush-over span{margin-bottom:18px;color:#a895b3;font-size:10px;font-weight:900}.rush-over button{width:100%;min-height:50px;margin:5px 0;border-radius:15px;background:#862bd0;border:1px solid #bd65f3;color:white;font-weight:900}.rush-over button.ghost{background:#17101f;border-color:#392a45;color:#b9aabe}

/* v0.7.13.1 — What's New / patch notes */
.whats-new-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;margin:16px 0 2px;padding:14px 15px;text-align:left;border-radius:17px;background:linear-gradient(135deg,rgba(75,35,96,.26),#100c15);border:1px solid #382744;color:#eee5f4}
.whats-new-card small{display:block;color:#9e78ba;font-size:7px;font-weight:950;letter-spacing:1.25px}.whats-new-card b{display:block;margin-top:4px;font-size:12px}.whats-new-card span{display:block;margin-top:4px;color:#8f8299;font-size:9px}.whats-new-card em{font-style:normal;color:#c996ec;font-size:8px;font-weight:950;white-space:nowrap}
.patch-dialog{position:relative;width:min(560px,92vw);max-height:min(76dvh,680px);overflow:auto;padding:22px;border-radius:23px;background:#120d18;border:1px solid #4a3358;box-shadow:0 24px 80px rgba(0,0,0,.58)}.patch-dialog>h3{margin:3px 0 18px;font-size:25px}.patch-notes-content{display:grid;gap:11px}.patch-release{padding:15px;border-radius:17px;background:#0e0a13;border:1px solid #2e2336}.patch-release.latest{border-color:#70408e;background:linear-gradient(145deg,rgba(95,35,128,.24),#0e0a13)}.patch-release-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.patch-release-head small{color:#746a7c;font-size:7px;letter-spacing:.5px}.patch-release-head h4{margin:3px 0 0;font-size:14px}.patch-release-head>span{padding:4px 6px;border-radius:99px;background:#6d2993;color:#f0d8ff;font-size:7px;font-weight:950;letter-spacing:.7px}.patch-release ul{margin:12px 0 0;padding:0;list-style:none}.patch-release li{margin:7px 0;color:#a99db2;font-size:10px;line-height:1.45}

/* v0.7.13.2 — Word Rush categories + Help */
.subpage-head .mini-help-btn{margin-left:auto;white-space:nowrap;color:#d7a8f5;border-color:#58356e;background:#1b1024}
.rush-setup-copy{text-align:center;margin:-7px 0 17px;color:#887b91;font-size:10px}
.rush-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rush-modes button{min-height:118px;padding:14px 10px;border-radius:19px;background:linear-gradient(145deg,#18101f,#100b15);border:1px solid #443152;color:#f1e8f6;text-align:center}.rush-modes button:active{transform:scale(.97)}.rush-modes span{display:block;font-size:24px;margin-bottom:7px}.rush-modes b{display:block;font-size:12px;letter-spacing:.4px}.rush-modes small{display:block;margin-top:6px;color:#877a90;font-size:8px;line-height:1.35}.rush-modes .mixed{grid-column:1/-1;min-height:91px;border-color:#77469a;background:linear-gradient(135deg,rgba(107,38,148,.35),#110c17)}
.grammar-help{display:grid;gap:8px}.grammar-help article{padding:11px 12px;border-radius:14px;background:#0e0a13;border:1px solid #2d2235}.grammar-help b{font-size:10px;color:#e7c6fb}.grammar-help p{margin:4px 0;color:#b2a6ba;font-size:10px}.grammar-help small{color:#766c7d;font-size:8px}.rush-tip{display:flex;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:rgba(103,38,139,.18);border:1px solid #55336b}.rush-tip b{color:#d5a0f6;font-size:9px;white-space:nowrap}.rush-tip span{color:#a99bb2;font-size:9px;line-height:1.4}
@media(max-width:360px){.rush-modes{grid-template-columns:1fr}.rush-modes .mixed{grid-column:auto}}

/* v0.7.13.3 — 4-second Word Rush answer hint */
@keyframes rushHintGlow{0%,100%{box-shadow:0 0 10px rgba(190,112,255,.18);border-color:#72508b}50%{box-shadow:0 0 27px rgba(202,118,255,.72),inset 0 0 16px rgba(170,72,230,.13);border-color:#cf8cff}}
.rush-choices>button.hint{animation:rushHintGlow 1s ease-in-out infinite;color:#fff;background:linear-gradient(145deg,#281536,#1a1023)}
@media(prefers-reduced-motion:reduce){.rush-choices>button.hint{animation:none;box-shadow:0 0 22px rgba(202,118,255,.55);border-color:#cf8cff}}

/* v0.7.13.5 — timed + practice Word Rush */
.rush-style-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 10px}.rush-style-picker button{padding:13px 9px;border-radius:17px;border:1px solid #382944;background:#110c17;color:#a99bb2;text-align:center}.rush-style-picker button.active{border-color:#8b4caf;background:linear-gradient(145deg,rgba(111,39,151,.38),#130d1a);box-shadow:0 0 20px rgba(132,55,177,.14);color:#f2e7f8}.rush-style-picker span{display:block;font-size:20px}.rush-style-picker b{display:block;margin-top:5px;font-size:10px}.rush-style-picker small{display:block;margin-top:4px;font-size:7px;color:#83758c}.rush-mode-hint{text-align:center;min-height:27px;margin-bottom:13px;color:#8d8095;font-size:9px;line-height:1.4}
.rush-timer.practice i{width:100%!important;opacity:.3}.rush-timer.practice b{font-size:12px;color:#d7b6eb}.practice-stats{grid-column:2/4;display:flex;gap:5px}.practice-stats[hidden]{display:none}.practice-stats span{padding:6px 7px;border-radius:10px;background:#15101b;border:1px solid #33273d;color:#81758a;font-size:6px;text-align:center}.practice-stats b{display:block;margin-top:2px;color:#eee3f4;font-size:12px}

/* v0.7.13.8 — persistent Word Rush stats + leaderboard hierarchy */
.stats-section-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 18px}.stats-section-tabs button{min-height:43px;border-radius:14px;border:1px solid #35263f;background:#100b15;color:#887b92;font-size:9px;font-weight:900}.stats-section-tabs button.active{color:#f1e6f7;border-color:#754393;background:rgba(104,40,139,.28)}
.wr-stat-list,.wr-board-menu{display:grid;gap:7px;margin:13px 0}.wr-stat-row{display:grid;grid-template-columns:1fr auto 38px;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;background:#100b15;border:1px solid #30243a;color:#aaa0b1;font-size:10px}.wr-stat-row b{color:#f1e8f6;font-size:15px}.wr-stat-row button{min-height:34px;border-radius:10px;border:1px solid #493158;background:#1a1022;color:#d5a7ef}
.secondary-share{margin-top:7px!important;background:#17101f!important;border-color:#392a45!important;color:#b9aabe!important}
.board-category{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;gap:12px;margin:9px 0;padding:15px;border-radius:18px;border:1px solid #3d2b49;background:linear-gradient(145deg,#17101f,#0e0a13);color:#eee6f3;text-align:left}.board-category span{display:grid;grid-template-columns:auto 1fr;gap:0 7px;align-items:center}.board-category b{font-size:12px}.board-category small{grid-column:2;color:#81758a;font-size:8px;margin-top:3px}.board-category strong{font-size:17px;color:#d6a5f4}.board-category.locked{opacity:.42}
.board-back{width:auto!important;margin:0 0 10px;padding:8px 10px!important;border-radius:11px!important;background:#15101b!important;border:1px solid #33263d!important;color:#a99bb2!important;font-size:9px!important}
.wr-board-menu button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 10px;width:100%;padding:12px 14px;border-radius:15px;border:1px solid #34263e;background:#110c17;color:#eee5f3;text-align:left}.wr-board-menu button span{font-size:10px;font-weight:850}.wr-board-menu button strong{grid-row:1/3;grid-column:2;font-size:16px;color:#d5a2f3}.wr-board-menu button small{color:#786d81;font-size:8px}
.stats-loading{color:#83778c;font-size:10px}

/* v0.7.13.10 — richer leaderboard previews */
.board-category.richer b em{font-style:normal;font-size:7px;color:#776b81;margin-left:5px;font-weight:700}
.mini-podium{display:grid;gap:4px;margin:-4px 4px 11px;padding:7px 9px;border:1px solid #2b2033;border-top:0;border-radius:0 0 13px 13px;background:rgba(12,8,16,.62)}
.mini-podium>div{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:5px;min-height:21px;font-size:8px;color:#aaa0b1}
.mini-podium i{font-style:normal;text-align:center}.mini-podium b{font-size:8px;color:#d9cde0}.mini-podium em{font-style:normal;color:#6f6477}
.mini-podium.empty{display:block;color:#665c6e;font-size:8px;text-align:center;padding:9px}
.wr-board-menu.richer{gap:10px}.wr-board-card{border:1px solid #34263e;border-radius:15px;overflow:hidden;background:#110c17}
.wr-board-menu.richer .wr-board-card>button{border:0;border-radius:0;background:transparent}
.wr-board-menu.richer .mini-podium{margin:0 8px 8px;border:0;border-top:1px solid #2b2033;border-radius:0;padding:7px 2px 1px;background:transparent}
.wr-board-menu button span em{display:inline-flex;min-width:18px;height:16px;align-items:center;justify-content:center;margin-left:5px;padding:0 5px;border-radius:8px;background:#24172d;color:#a997b2;font-size:7px;font-style:normal}
.score-category{display:inline-block!important;margin-left:6px!important;color:#806f89!important;font-size:7px!important;font-weight:700!important;vertical-align:middle}

/* v0.7.14.0 — cat retired for now + Find the Mistake */
#appChrome .mascot-wrap,.mascot-wrap{display:none!important}
.mistake-card{min-height:390px;padding:25px 18px;border-radius:25px;background:linear-gradient(160deg,#17101f,#0d0912);border:1px solid #4b345d;box-shadow:0 16px 45px rgba(0,0,0,.25)}
.mistake-card>small{display:block;text-align:center;color:#7f718a;font-size:8px;font-weight:900;letter-spacing:2px}
.mistake-card>h2{text-align:center;margin:10px 0 25px;color:#a99bb2;font-size:11px}
.mistake-sentence{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px 6px;min-height:180px;padding:20px 4px}
.mistake-sentence>button{padding:10px 9px;border-radius:11px;border:1px solid #3b2d46;background:#17101f;color:#f5eef9;font-size:17px;font-weight:800;line-height:1.2;box-shadow:none}
.mistake-sentence>button:active{transform:scale(.96)}
.mistake-sentence>button.correct{border-color:#b65cff;background:rgba(142,54,190,.24);box-shadow:0 0 18px rgba(177,70,255,.3)}
.mistake-sentence>button.wrong{border-color:#a64770;background:rgba(142,48,91,.2)}
.mistake-explain{min-height:58px;margin-top:8px;padding:10px 12px;border-top:1px solid #2c2234;text-align:center}
.mistake-explain:empty{border:0}.mistake-explain b{display:block;color:#e7c6fb;font-size:10px}.mistake-explain span{display:block;margin-top:5px;color:#8e8296;font-size:9px;line-height:1.4}
.mistake-arcade{border-color:#4c355c!important}

/* v0.7.14.2 — simplified Find the Mistake + stronger success feedback */
.mistake-start-picker{display:grid;gap:12px;margin-top:18px}
.mistake-start-picker button{display:grid;grid-template-columns:46px 1fr auto;grid-template-rows:auto auto;align-items:center;text-align:left;gap:2px 10px;padding:17px 15px;border:1px solid #493457;border-radius:20px;background:linear-gradient(145deg,#1b1122,#100b15);color:#f5eef9}
.mistake-start-picker button>span{grid-row:1/3;font-size:25px;text-align:center}.mistake-start-picker button>b{font-size:11px;letter-spacing:.7px}.mistake-start-picker button>small{font-size:8px;color:#8f8298}.mistake-start-picker button>em{grid-column:3;grid-row:1/3;font-size:9px;color:#d6a9ef;font-style:normal;font-weight:900}
.answer-pop{animation:answerPop .38s cubic-bezier(.2,1.7,.4,1)!important}
.feedback-burst{animation:feedbackBurst .42s cubic-bezier(.2,1.5,.4,1)}
.success-hit{animation:successHit .42s ease-out}
@keyframes answerPop{0%{transform:scale(1)}42%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes feedbackBurst{0%{transform:scale(.75);opacity:.15}55%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes successHit{0%{filter:brightness(1)}35%{filter:brightness(1.22);box-shadow:0 0 34px rgba(190,95,255,.32)}100%{filter:brightness(1)}}

/* v0.7.14.4 — precise answer feedback, clean Mistake Hunt tokens, homepage logo */
.home-catmark{overflow:hidden;padding:0;background:#090711}
.home-catmark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mistake-sentence>button{white-space:nowrap;word-break:keep-all;overflow-wrap:normal;flex:0 0 auto}
.answer,.mistake-sentence>button{position:relative;overflow:hidden}
.answer-pop{animation:answerPopSoft .20s ease-out!important}
@keyframes answerPopSoft{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
/* Feedback text/explanations stay completely still. */
.feedback-burst,.success-hit{animation:none!important}
/* Color radiates from the actual finger/click point. */
.answer.tap-correct,.mistake-sentence>button.tap-correct{
 background:radial-gradient(circle at var(--tap-x,50%) var(--tap-y,50%),rgba(67,255,133,.78) 0,rgba(34,180,91,.46) 28%,rgba(23,53,36,.88) 72%)!important;
 border-color:#43e57b!important;
}
.answer.tap-wrong,.mistake-sentence>button.tap-wrong{
 background:radial-gradient(circle at var(--tap-x,50%) var(--tap-y,50%),rgba(255,70,105,.82) 0,rgba(203,50,84,.48) 28%,rgba(66,27,40,.88) 72%)!important;
 border-color:#ff496d!important;
}

/* v0.7.14.5 — Find the Mistake setup cleanup */
.mistake-simple-copy{text-align:center;margin:16px auto 18px;max-width:360px}
.mistake-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mistake-mode-card{min-height:184px;padding:18px 12px 15px!important;border:1px solid #493457!important;border-radius:22px!important;background:linear-gradient(155deg,#1d1226,#100b15)!important;color:#f5eef9!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:7px!important}
.mistake-mode-card .mistake-mode-icon{font-size:30px;line-height:1.1}
.mistake-mode-card>b{font-size:12px;letter-spacing:.75px}
.mistake-mode-card>small{font-size:10px;color:#c7b8cf}
.mistake-mode-card .mistake-mode-rules{font-size:8px;color:#8f8298;min-height:12px}
.mistake-mode-card>em{margin-top:7px;font-size:9px;color:#d6a9ef;font-style:normal;font-weight:900}
.mistake-mode-card:active{transform:scale(.98)}
@media(max-width:360px){.mistake-mode-grid{gap:9px}.mistake-mode-card{min-height:170px;padding-left:8px!important;padding-right:8px!important}}

/* v0.7.14.6 — answer feedback animation
   Correct: green grows from the exact tap point until the whole answer is filled.
   Wrong: three red flashes, then remains red. */
.answer.tap-correct,.mistake-sentence>button.tap-correct{
  background:radial-gradient(circle at var(--tap-x,50%) var(--tap-y,50%),
    rgba(42,210,103,.96) 0 100%, transparent 100%)!important;
  background-color:#17121d!important;
  background-size:0% 0%!important;
  background-repeat:no-repeat!important;
  border-color:#43e57b!important;
  animation:correctFillFromTap .42s cubic-bezier(.18,.72,.24,1) forwards!important;
}
@keyframes correctFillFromTap{
  0%{background-size:0% 0%;box-shadow:0 0 0 rgba(67,229,123,0);transform:scale(1)}
  55%{background-size:145% 300%;box-shadow:0 0 16px rgba(67,229,123,.28);transform:scale(1.012)}
  100%{background-size:300% 650%;background-color:#209452;box-shadow:0 0 9px rgba(67,229,123,.20);transform:scale(1)}
}
.answer.tap-wrong,.mistake-sentence>button.tap-wrong{
  background:#7f2036!important;
  border-color:#ff496d!important;
  animation:wrongFlashSettle .62s ease-out forwards!important;
}
@keyframes wrongFlashSettle{
  0%{background:#17121d;box-shadow:none;transform:translateX(0)}
  12%{background:#d52d50;box-shadow:0 0 18px rgba(255,73,109,.40);transform:translateX(-1px)}
  24%{background:#30151e;box-shadow:none;transform:translateX(1px)}
  38%{background:#d52d50;box-shadow:0 0 18px rgba(255,73,109,.38);transform:translateX(-1px)}
  50%{background:#30151e;box-shadow:none;transform:translateX(1px)}
  66%{background:#d52d50;box-shadow:0 0 18px rgba(255,73,109,.36);transform:translateX(0)}
  78%{background:#4d1928;box-shadow:none}
  100%{background:#7f2036;box-shadow:0 0 8px rgba(255,73,109,.18);transform:translateX(0)}
}

/* v0.7.14.7 — reliable tap feedback overlay */
.answer,.mistake-sentence>button{isolation:isolate;position:relative;overflow:hidden}
.answer::after,.mistake-sentence>button::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:var(--tap-x,50%);top:var(--tap-y,50%);
  width:12px;height:12px;border-radius:999px;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}
.answer.tap-correct,.mistake-sentence>button.tap-correct{
  background:#17121d!important;border-color:#43e57b!important;
  animation:none!important;
}
.answer.tap-correct::after,.mistake-sentence>button.tap-correct::after{
  background:#209452;
  opacity:1;
  animation:greenTapFlood .42s cubic-bezier(.16,.78,.22,1) forwards;
}
@keyframes greenTapFlood{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.95}
  100%{transform:translate(-50%,-50%) scale(42);opacity:1}
}
.answer.tap-wrong,.mistake-sentence>button.tap-wrong{
  border-color:#ff496d!important;
  background:#17121d!important;
  animation:redTripleFlash .66s linear forwards!important;
}
.answer.tap-wrong::after,.mistake-sentence>button.tap-wrong::after{display:none!important}
@keyframes redTripleFlash{
  0%{background:#17121d!important}
  10%{background:#d72e51!important;box-shadow:0 0 20px rgba(255,73,109,.42)}
  22%{background:#27131a!important;box-shadow:none}
  34%{background:#d72e51!important;box-shadow:0 0 20px rgba(255,73,109,.42)}
  46%{background:#27131a!important;box-shadow:none}
  58%{background:#d72e51!important;box-shadow:0 0 20px rgba(255,73,109,.42)}
  72%{background:#431725!important;box-shadow:none}
  100%{background:#7f2036!important;box-shadow:0 0 8px rgba(255,73,109,.18)}
}

.answer>* , .mistake-sentence>button>*{position:relative;z-index:2}
.answer::after,.mistake-sentence>button::after{z-index:0}
.answer,.mistake-sentence>button{z-index:0}

/* v0.7.14.8 — clean homepage brand mark */
.home-catmark{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.home-catmark::before,.home-catmark::after{display:none!important}
.home-catmark img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* v0.7.14.9 — restrained edge-glow answer feedback */
.answer.tap-correct,.mistake-sentence>button.tap-correct{
  background:rgba(29,112,61,.30)!important;
  border-color:#4df083!important;
  animation:correctEdgePulse .58s ease-out forwards!important;
}
.answer.tap-wrong,.mistake-sentence>button.tap-wrong{
  background:rgba(135,35,55,.32)!important;
  border-color:#ff526f!important;
  animation:wrongEdgePulse .58s ease-out forwards!important;
}
/* Disable the previous expanding fill overlay. */
.answer.tap-correct::after,.mistake-sentence>button.tap-correct::after,
.answer.tap-wrong::after,.mistake-sentence>button.tap-wrong::after{
  display:none!important;
  animation:none!important;
}
@keyframes correctEdgePulse{
  0%{
    box-shadow:0 0 0 0 rgba(77,240,131,.72),inset 0 0 8px rgba(77,240,131,.12);
  }
  38%{
    box-shadow:0 0 8px 2px rgba(77,240,131,.62),0 0 18px 5px rgba(77,240,131,.30),inset 0 0 12px rgba(77,240,131,.18);
  }
  72%{
    box-shadow:0 0 15px 5px rgba(77,240,131,.25),0 0 27px 9px rgba(77,240,131,.10),inset 0 0 10px rgba(77,240,131,.14);
  }
  100%{
    box-shadow:0 0 7px 1px rgba(77,240,131,.24),inset 0 0 8px rgba(77,240,131,.10);
  }
}
@keyframes wrongEdgePulse{
  0%{
    box-shadow:0 0 0 0 rgba(255,82,111,.72),inset 0 0 8px rgba(255,82,111,.12);
  }
  38%{
    box-shadow:0 0 8px 2px rgba(255,82,111,.64),0 0 18px 5px rgba(255,82,111,.31),inset 0 0 12px rgba(255,82,111,.18);
  }
  72%{
    box-shadow:0 0 15px 5px rgba(255,82,111,.26),0 0 27px 9px rgba(255,82,111,.10),inset 0 0 10px rgba(255,82,111,.14);
  }
  100%{
    box-shadow:0 0 7px 1px rgba(255,82,111,.24),inset 0 0 8px rgba(255,82,111,.10);
  }
}

/* v0.7.15.1 — Android touch cleanup + premium monochrome icon system */
html,body,#app,button,a,input,textarea,select,label,[role="button"]{
  -webkit-tap-highlight-color:transparent!important;
}
*{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
input,textarea{
  -webkit-user-select:text;
  user-select:text;
}
button,a,[role="button"]{
  outline:none;
}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){
  outline:none!important;
  box-shadow:inherit;
}
.ui-svg{display:block;width:1.35em;height:1.35em;object-fit:contain}
.inline-svg{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-right:.28em}
.mode-icon .ui-svg,.arcade-icon .ui-svg{width:32px;height:32px;margin:auto}
.mistake-mode-icon .ui-svg{width:30px;height:30px;margin:auto}
.rush-mode-row span .ui-svg,.rush-category-grid span .ui-svg{width:24px;height:24px;margin:auto}
.nav-icon .ui-svg{width:22px;height:22px;margin:auto;opacity:.72}
.nav-play-orb .ui-svg{width:28px;height:28px;margin:auto}
nav button.active .ui-svg,.nav-play.active .ui-svg{opacity:1;filter:brightness(1.35)}

/* v0.7.15.2 — monochrome What's New iconography */
.patch-note-icon{
  width:15px;height:15px;display:inline-block;vertical-align:-2px;
  margin-right:7px;opacity:.72;filter:grayscale(1);
}

/* v0.7.15.3 — rare question depth animation
   No rotation/tilt: the golden card only recedes and comes closer. */
.rare-card,.question-card.rare,.qcard.rare,.rare-question,.gold-card,.golden-card,
[data-rarity="rare"] .question-card,[data-rarity="rare"] #qcard,
#qcard.rare,#qcard.golden{
  transform-origin:center center!important;
  animation:rareDepthPulse 1.15s cubic-bezier(.22,.72,.22,1) both!important;
}
@keyframes rareDepthPulse{
  0%{transform:perspective(900px) translateZ(0) scale(1);filter:brightness(1)}
  28%{transform:perspective(900px) translateZ(-55px) scale(.955);filter:brightness(.94)}
  62%{transform:perspective(900px) translateZ(32px) scale(1.025);filter:brightness(1.08)}
  100%{transform:perspective(900px) translateZ(0) scale(1);filter:brightness(1)}
}
/* Explicitly neutralize rotation on rare/golden background layers too. */
.rare-card::before,.rare-card::after,.question-card.rare::before,.question-card.rare::after,
#qcard.rare::before,#qcard.rare::after,#qcard.golden::before,#qcard.golden::after{
  transform:rotate(0deg)!important;
}

/* v0.7.15.4 — app-wide monochrome icon sweep */
.inline-svg,.ui-svg,.patch-note-icon{filter:grayscale(1)!important}
button .inline-svg,a .inline-svg,.stat-card .inline-svg,.settings-card .inline-svg,.leaderboard-card .inline-svg,.report-card .inline-svg{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em}

/* v0.7.15.5 — complete monochrome UI icon pass */
.patch-note-icon{
  flex:0 0 auto;
  width:16px!important;height:16px!important;
  margin:1px 8px 0 0!important;
  display:inline-block!important;
  vertical-align:-3px!important;
  opacity:.78;
}
.patch-notes li,.patch-note,.whats-new-note{
  align-items:flex-start;
}
.patch-notes li .patch-note-icon,.patch-note .patch-note-icon,.whats-new-note .patch-note-icon{
  display:inline-block!important;
}

/* v0.7.15.6 — Stats tab icon sizing */
.stats-tabs .ui-svg,
.stats-tabs .inline-svg,
.stats-mode-tabs .ui-svg,
.stats-mode-tabs .inline-svg,
.stats-section-tabs .ui-svg,
.stats-section-tabs .inline-svg,
[data-stats-tab] .ui-svg,
[data-stats-tab] .inline-svg{
  width:24px!important;
  height:24px!important;
  margin-right:8px!important;
  vertical-align:-6px!important;
}

/* Each What's New line gets its own monochrome category SVG before the text. */
.patch-note-row{
  display:inline-flex!important;
  align-items:flex-start!important;
  gap:8px!important;
}
.patch-note-row>.patch-note-icon{
  display:block!important;
  flex:0 0 17px!important;
  width:17px!important;
  height:17px!important;
  margin:1px 0 0 0!important;
  opacity:.8!important;
  filter:grayscale(1)!important;
}

/* Stats tab: vertically center the icon with the INFINITE label. */
.stats-tabs button,
.stats-mode-tabs button,
.stats-section-tabs button,
[data-stats-tab]{
  display:flex;
  align-items:center;
  justify-content:center;
}
.stats-tabs .ui-svg,
.stats-tabs .inline-svg,
.stats-mode-tabs .ui-svg,
.stats-mode-tabs .inline-svg,
.stats-section-tabs .ui-svg,
.stats-section-tabs .inline-svg,
[data-stats-tab] .ui-svg,
[data-stats-tab] .inline-svg{
  vertical-align:middle!important;
  margin-top:0!important;
  margin-bottom:0!important;
  transform:none!important;
}


/* === BADTIME monochrome icon system + instant micro-interactions === */
.ui-svg,.inline-svg,.button-icon{
  object-fit:contain;
}
nav .nav-icon .ui-svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
  margin:auto!important;
}
#navPlayOrb .ui-svg,.nav-play-orb .ui-svg{
  width:31px!important;
  height:31px!important;
  display:block!important;
  margin:auto!important;
}
.button-icon{
  width:19px!important;
  height:19px!important;
  display:block!important;
  flex:0 0 19px!important;
}
.button-icon.icon-only{
  margin:0!important;
}
.share-score{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}

/* Navigation remains instant: no page fade/slide is introduced. */

/* Tactile press feedback for UI controls only.
   Gameplay answer buttons keep their existing green/red answer effects. */
button:not(.answer):not([data-mistake-part]),
[role="button"]:not(.answer):not([data-mistake-part]),
.game-card,
.mode-card{
  transition:
    transform 105ms ease-out,
    box-shadow 145ms ease-out,
    border-color 145ms ease-out,
    filter 145ms ease-out!important;
  transform-origin:center;
}
button:not(.answer):not([data-mistake-part]):active,
[role="button"]:not(.answer):not([data-mistake-part]):active,
.game-card:active,
.mode-card:active{
  transform:scale(.975)!important;
  border-color:rgba(235,225,255,.72)!important;
  box-shadow:
    0 0 0 1px rgba(244,238,255,.30),
    0 0 9px rgba(170,92,255,.38),
    0 0 18px rgba(139,63,235,.20)!important;
  filter:brightness(1.07);
}

/* Bottom nav gets an especially restrained glow so it never feels sluggish. */
#appChrome nav button:active{
  box-shadow:
    inset 0 0 0 1px rgba(245,240,255,.18),
    0 0 10px rgba(157,78,255,.26)!important;
}

/* Keyboard accessibility remains visible. */
button:focus-visible,[role="button"]:focus-visible{
  outline:2px solid rgba(224,203,255,.78)!important;
  outline-offset:2px!important;
}

@media (prefers-reduced-motion: reduce){
  button,[role="button"],.game-card,.mode-card{
    transition:none!important;
  }
}

/* Staging icon cleanup: balanced Infinite mark + real Your Stats icons */
.stat-svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
}
.stats-grid .inline-svg,
.stat-card .inline-svg,
.stats-card .inline-svg,
.stat-box .inline-svg{
  width:19px!important;
  height:19px!important;
  display:inline-block!important;
  vertical-align:-4px!important;
  margin-right:6px!important;
}

/* Stats mode tabs: explicit monochrome icons */
.stats-tab-icon{
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  display:block!important;
  object-fit:contain!important;
  margin:0 8px 0 0!important;
}
.stats-tabs button,
.stats-mode-tabs button,
.stats-section-tabs button,
[data-stats-tab],
[data-stats-mode]{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}


/* Stronger BADTIME press glow — still fast, but clearly visible */
button:not(.answer):not([data-mistake-part]):active,
[role="button"]:not(.answer):not([data-mistake-part]):active,
.game-card:active,
.mode-card:active{
  transform:scale(.972)!important;
  border-color:rgba(239,225,255,.95)!important;
  box-shadow:
    0 0 0 1px rgba(250,246,255,.58),
    0 0 7px rgba(221,190,255,.72),
    0 0 16px rgba(174,93,255,.68),
    0 0 30px rgba(135,54,236,.42)!important;
  filter:brightness(1.12)!important;
}

/* Bottom nav needs a little extra bloom because of its dark container. */
#appChrome nav button:active{
  box-shadow:
    inset 0 0 0 1px rgba(250,244,255,.38),
    0 0 8px rgba(220,186,255,.65),
    0 0 19px rgba(163,80,255,.55),
    0 0 31px rgba(126,45,226,.30)!important;
}


/* Explicit Stats mode icons */
.stats-mode-icon{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  display:block!important;
  object-fit:contain!important;
}
[data-stats-tab],
[data-stats-mode],
.stats-tabs button,
.stats-mode-tabs button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}

/* Fresh Home Infinite icon: slightly wider so ∞ reads naturally */
.home-mode-icon[src$="infinity.svg"],
img[src$="/assets/icons/infinity.svg"]{
  object-fit:contain!important;
}


/* Settings page — custom monochrome icon sweep */
.settings-icon{
  width:22px!important;
  height:22px!important;
  display:inline-block!important;
  vertical-align:-5px!important;
  margin-right:8px!important;
}
.settings-control-icon{
  width:23px!important;
  height:23px!important;
  display:block!important;
  margin:auto!important;
  object-fit:contain!important;
}
.settings-row button,
.audio-controls button,
.music-controls button{
  display:flex;
  align-items:center;
  justify-content:center;
}

.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.settings-actions button{display:flex;align-items:center;justify-content:center;gap:8px}
.settings-actions .settings-icon{width:20px!important;height:20px!important;margin:0!important}

/* Clean send/share icon: no box or upload tray */
.community-send-icon{
  width:17px!important;
  height:17px!important;
  display:inline-block!important;
  vertical-align:-4px!important;
  margin-left:6px!important;
}
.share-score .button-icon,
[data-share-wr] .button-icon{
  width:18px!important;
  height:18px!important;
}

.settings-actions:has(#settingsFeedbackBtn:only-child){grid-template-columns:1fr}