/* Compact layout: little vertical scrolling in menus and during games.
   Main actions stay pinned at the bottom of the screen; extras are small or tucked below. Loaded last. */

/* ---------- home ---------- */
#home{display:flex}
#home #resumeHome{order:0}#home .hero{order:1}#home #pickPanel{order:2}#home .tour{order:3}#home #joinPanel{order:4}#home #meHome{order:5}#home #multiNote{order:6}
.hero{padding:clamp(16px,4vw,28px);gap:6px;border-radius:24px}
.hero h1{font-size:clamp(26px,6.5vw,44px)}
.hero p{font-size:clamp(14px,2.2vw,17px)}
.hero::after{width:150px;height:150px;right:-50px;top:-60px}.hero::before{width:70px;height:70px;right:60px;bottom:-34px}
/* the tour is a small bar, the video only loads when pressed */
.tour-btn{aspect-ratio:auto;height:54px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 0 rgba(42,26,158,.35);border-radius:18px;background:var(--hl)}
.tour-btn img{display:none}
.tour-play{position:relative;left:auto;top:auto;margin:0;width:34px;height:34px;flex:none;box-shadow:0 3px 0 #c9a600}
.tour-play::after{left:13px;top:9px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
.tour-cap{position:static;padding:0;background:none;font-size:17px}
.tour video{aspect-ratio:16/9;height:auto}
#pickPanel{gap:12px}
.qcard{min-height:64px;padding:10px 14px}

/* ---------- quiz screen ---------- */
.bankpanel{padding:16px;gap:10px}
.bankpanel .bk-ico{width:44px;height:44px;font-size:21px;border-radius:14px}
.bankpanel .bk-foot{display:none}
.bankpanel .bk-main>.muted:first-child{font-size:13px!important}
#meTopic .me-panel{padding:12px 14px;gap:12px}
#meTopic .av.big{width:52px;height:52px}
#meTopic .sync-line{display:none}
/* settings: one swipeable line per setting instead of a tall wrapped block */
.setgrid{gap:12px}
.setgrid .label{margin-bottom:4px}
.setgrid .chips:not(.multi){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 4px;-webkit-overflow-scrolling:touch}
.setgrid .chips:not(.multi)::-webkit-scrollbar{display:none}
.setgrid .chips:not(.multi) .chip{flex:none}
.chip{min-width:44px;min-height:40px;padding:6px 13px;font-size:14.5px}
.steph h2{font-size:20px}.stepn{width:30px;height:30px}
.ex-intro,.fc-intro,.sp-intro{display:none}
.fc-intro#fcNext:not(:empty){display:block}
/* the start buttons stay in view */
.panel .actions{position:sticky;bottom:0;z-index:4;margin:0 -18px -18px;padding:12px 18px 14px;background:linear-gradient(transparent,var(--card) 28%);border-radius:0 0 22px 22px}
.panel .actions .btn{flex:1 1 140px;min-height:52px}

/* ---------- during a game ---------- */
#question,#reveal,#end,#lobby{gap:12px}
#reveal .row.end,#end>.row{position:sticky;bottom:0;z-index:4;margin:0 -18px -18px;padding:12px 18px 14px;background:linear-gradient(transparent,var(--card) 28%);border-radius:0 0 22px 22px}
#end>.row .btn,#reveal .row.end .btn{flex:1 1 140px}
#end h1{font-size:clamp(26px,7vw,40px)}
#endSess{display:none}
#end .podium:empty{display:none}
.verdict{font-size:20px}
@media (max-width:560px){
  .panel{padding:16px}
  .panel .actions,#reveal .row.end,#end>.row{margin:0 -16px -16px;padding:12px 16px 14px}
  .setgrid .chips:not(.multi){margin:0 -16px;padding:2px 16px 4px}
  .wrap{gap:12px}
  #home,#topic{gap:12px!important}
}
@media (max-width:420px){
  .panel .actions,#reveal .row.end,#end>.row{margin:0 -16px -16px}
  .setgrid .chips:not(.multi){margin:0 -16px}
}
@media (max-width:560px){
  .hero>p:not(.streak){display:none}
  .hero{padding:16px 18px}
  .bankpanel #bankSub{display:none}
  .bankpanel>.row{flex-wrap:nowrap}
  #meTopic .me-panel{padding:10px 12px}
  #meTopic .me-sub,#meTopic .me-hint,#meTopic .me-panel .linkbtn{display:none}
  #meTopic .me-main .label{font-size:12px;margin-bottom:2px}
  #meTopic .pfp{flex:none}
  #meTopic input#nick{min-height:44px;padding:8px 12px}
}
/* exam and flashcards: the start button is pinned to the bottom edge, whatever the settings above */
#examPanel .actions,#cardsPanel .actions{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:20;background:var(--card);border-top:2px solid var(--line);border-radius:0;padding:10px max(16px,calc((100vw - 920px)/2 + 16px)) calc(10px + env(safe-area-inset-bottom))}
#topic[data-mode=exam],#topic[data-mode=cards],#topic[data-mode=play]{padding-bottom:84px}
/* name + photo: one slim row on every screen size */
#meTopic .me-sub,#meTopic .me-hint{display:none}
#meTopic .me-panel{padding:10px 14px}
#meTopic .ticker,#topic .ticker{display:none}
@media (min-width:700px){
  .setgrid{display:grid!important;grid-template-columns:1fr 1fr;gap:14px 28px}
  .setgrid>div:first-child{grid-column:1/-1}
}

/* ---------- quiz screen: four big cards that explain the options ---------- */
.modecards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mcard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:5px;aspect-ratio:1;min-width:0;padding:14px;border:0;border-radius:26px;font:inherit;text-align:left;color:#17162B;cursor:pointer;box-shadow:0 7px 0 rgba(23,22,43,.22);transition:transform .12s,box-shadow .12s}
.mcard:hover{transform:translateY(-2px)}
.mcard:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(23,22,43,.22)}
.mcard:focus-visible{outline:3px solid var(--hl);outline-offset:3px}
.mcard svg{position:absolute;right:12px;top:12px;width:clamp(34px,10vw,56px);height:auto;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mcard::before{content:"";position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.28)}
.mcard b{position:relative;font-family:var(--f-display);font-size:clamp(20px,5.6vw,28px);line-height:1}
.mcard span{position:relative;font-size:clamp(12px,3.2vw,15px);font-weight:700;line-height:1.25;opacity:.88}
.c-quiz{background:var(--hl);color:#fff;box-shadow:0 7px 0 var(--hl-dk)}
.c-cards{background:#FFE36E}
.c-sheet{background:#8FE9D4}
.c-exam{background:#FF8F73}
.mcard[hidden]{display:none}
@media (min-width:700px){.modecards{grid-template-columns:repeat(4,1fr)}}
.modeback{align-self:flex-start}
/* the menu shows the four cards; a chosen mode shows its own settings */
#topic[data-mode=menu] #createPanel,#topic[data-mode=menu] #cardsPanel,#topic[data-mode=menu] #examPanel,#topic[data-mode=menu] #meTopic,#topic[data-mode=menu] .modeback,#topic[data-mode=menu] #modeBack{display:none!important}
#topic:not([data-mode=menu]) .modecards,#topic:not([data-mode=menu]) #missPanel,#topic:not([data-mode=menu]) #weakPanel,#topic:not([data-mode=menu]) #todayPanel,#topic:not([data-mode=menu]) #planPanel,#topic:not([data-mode=menu]) #srchPanel,#topic:not([data-mode=menu]) #resumeTopic{display:none!important}
#topic[data-mode=play] #cardsPanel,#topic[data-mode=play] #examPanel,#topic[data-mode=cards] #examPanel,#topic[data-mode=exam] #cardsPanel{display:none!important}
#topic[data-mode=cards] #createPanel .setgrid>div:nth-child(n+2),#topic[data-mode=exam] #createPanel .setgrid>div:nth-child(n+3),#topic:not([data-mode=play]) #createPanel .actions{display:none}
#sheetPanel,#sheetBtn{display:none!important}
.ticker{display:none!important}
/* tutorial: a small square tile next to the title instead of a big video */
#home:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}
#home:not([hidden])>*{grid-column:1/-1}
#home .hero{grid-column:1;grid-row:1}
#home .tour{grid-column:2;grid-row:1;order:1;width:auto;max-width:none;margin:0}
.tour-btn{width:92px;height:100%;min-height:92px;flex-direction:column;gap:6px;border-radius:24px;box-shadow:0 5px 0 rgba(42,26,158,.35);background:#2A1A9E}
.tour-play{position:relative;width:36px;height:36px}
.tour-cap{font-size:14px;line-height:1}
.tour-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,8,30,.82)}
.tour-modal video{width:min(100%,960px);max-height:80vh;border-radius:20px;background:#000}
.tour-modal button{position:absolute;right:14px;top:14px;width:46px;height:46px;border-radius:50%;border:0;font-size:26px;cursor:pointer;background:#fff;color:#17162B}

/* ---------- showcase: one big illustrated tile per part of the quiz ---------- */
.showcase{display:flex;flex-direction:column;gap:12px}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sc-head h2{font-size:clamp(20px,5vw,26px);margin:0}
.sc-ctl{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sctile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:176px;padding:14px;border:0;border-radius:26px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 7px 0 rgba(23,22,43,.2);transition:transform .15s,filter .2s,opacity .2s,box-shadow .15s}
.sctile::before{content:"";position:absolute;z-index:-1;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.25)}
.sctile::after{content:"";position:absolute;z-index:-1;left:-30px;bottom:-50px;width:110px;height:110px;border-radius:30px;background:rgba(255,255,255,.14);transform:rotate(20deg)}
.sctile:hover{transform:translateY(-3px)}
.sctile:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(23,22,43,.2)}
.sctile:focus-visible{outline:3px solid var(--hl);outline-offset:3px}
.sctile[aria-pressed=false]{filter:grayscale(.85) brightness(1.05);opacity:.55;box-shadow:0 4px 0 rgba(23,22,43,.12)}
.sc-n{position:absolute;left:14px;top:12px;min-width:30px;height:30px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#17162B;font-family:var(--f-display);font-weight:800;font-size:15px}
.sc-ico{position:absolute;right:14px;top:10px;font-size:clamp(40px,11vw,56px);line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.sc-ck{position:absolute;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#17162B;font-weight:800;font-size:15px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.sctile[aria-pressed=false] .sc-ck{visibility:hidden}
.sc-t{font-family:var(--f-display);font-size:clamp(16px,4.3vw,21px);line-height:1.08;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:manual;padding-right:14px}
.sc-m{font-size:12.5px;font-weight:800;opacity:.85}
.sc-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden;margin-right:34px}
.sc-bar i{display:block;height:100%;background:rgba(23,22,43,.7);border-radius:99px}

/* home: the quizzes are big colourful tiles, easy to spot and tap */
#pickPanel{background:none;border:0;box-shadow:none;padding:0;gap:12px}
#pickPanel .steph h2{font-size:clamp(22px,6vw,30px)}
#pickPanel .qsearch{background:var(--card)}
.quizgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.quizgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.quizgrid .qcard{--c1:#6C4DFF;--c2:#A58BFF;--ink:#fff;position:relative;overflow:hidden;isolation:isolate;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;min-height:176px;padding:14px;border:0;border-radius:26px;color:var(--ink);background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 7px 0 rgba(23,22,43,.2)}
.quizgrid .qcard:nth-child(8n+2){--c1:#FF8F73;--c2:#FFC1A8;--ink:#2a1208}
.quizgrid .qcard:nth-child(8n+3){--c1:#18C29C;--c2:#7DEBCB;--ink:#04251d}
.quizgrid .qcard:nth-child(8n+4){--c1:#FFC933;--c2:#FFE58A;--ink:#2b2200}
.quizgrid .qcard:nth-child(8n+5){--c1:#2F9BFF;--c2:#8FCBFF;--ink:#041a30}
.quizgrid .qcard:nth-child(8n+6){--c1:#FF5FA2;--c2:#FFA6CB;--ink:#32061a}
.quizgrid .qcard:nth-child(8n+7){--c1:#7AC943;--c2:#BDEE96;--ink:#12260a}
.quizgrid .qcard:nth-child(8n+8){--c1:#9B6BFF;--c2:#D3BCFF;--ink:#1b0b3a}
.quizgrid .qcard::before{content:"";position:absolute;z-index:-1;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.25)}
.quizgrid .qcard:hover{border:0;box-shadow:0 7px 0 rgba(23,22,43,.2);transform:translateY(-3px)}
.quizgrid .qcard:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(23,22,43,.2)}
.quizgrid .qico{position:static;margin-bottom:auto;align-self:flex-start;width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.88)!important;color:#17162B;font-size:28px}
.quizgrid .qtxt{padding-right:34px;width:100%}
.quizgrid .qtxt b{font-family:var(--f-display);font-size:clamp(17px,4.6vw,21px);line-height:1.1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.quizgrid .qtxt small{color:inherit;opacity:.85;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.quizgrid .qgo{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#17162B;font-size:22px;font-weight:800;line-height:1}
.quizgrid .qcard[hidden]{display:none}

/* quiz screen: same look as the home tiles (square badge, title, info line, round button) */
.sctile{min-height:176px;box-shadow:0 7px 0 rgba(23,22,43,.2)}
.sctile .sc-n{display:none}
.sctile .sc-ico{position:static;margin-bottom:auto;align-self:flex-start;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.88);font-size:28px;filter:none}
.sctile .sc-t{padding-right:34px}
.sctile .sc-ck{width:32px;height:32px;right:12px;bottom:12px;font-size:17px;visibility:visible!important;background:#fff}
.sctile[aria-pressed=false] .sc-ck{color:transparent;background:rgba(255,255,255,.55)}
.sc-bar{margin-right:44px}
/* the quiz header is a banner like the home one */
.bankpanel{background:linear-gradient(135deg,#4B2FE0,#7A63FF);border:0;color:#fff;position:relative;overflow:hidden;box-shadow:0 7px 0 #2B1A9E}
.bankpanel::after{content:"";position:absolute;right:-50px;top:-60px;width:170px;height:170px;border-radius:50%;background:var(--sun);opacity:.95;pointer-events:none}
.bankpanel>*{position:relative;z-index:1}
.bankpanel h2,.bankpanel .muted{color:#fff!important}
.bankpanel .muted{opacity:.85}
.bankpanel .bk-ico{background:rgba(255,255,255,.9)!important;color:#17162B}
.bankpanel .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}
.sctile .sc-t{padding-right:0;font-size:clamp(15px,4.1vw,20px);overflow-wrap:normal;word-break:normal}
.sctile .sc-m{padding-right:40px}
.sc-bar{margin-right:44px}
.bankpanel .btn.ghost{background:rgba(255,255,255,.92);color:#17162B;border-color:transparent}
.sctile .sc-t{font-size:clamp(14px,3.8vw,20px)}

/* ---------- glass menu: four big transparent squares over a colourful backdrop ---------- */
#topic[data-mode=menu] .modecards{position:relative;isolation:isolate;overflow:hidden;padding:16px;border-radius:30px;gap:14px;background:linear-gradient(140deg,#4B2FE0 0%,#8A5CFF 45%,#FF6FA8 100%);box-shadow:0 8px 0 #2B1A9E}
#topic[data-mode=menu] .modecards::before{content:"";position:absolute;z-index:-1;right:-50px;top:-50px;width:210px;height:210px;border-radius:50%;background:#FF7A5C}
#topic[data-mode=menu] .modecards::after{content:"";position:absolute;z-index:-1;left:-40px;bottom:-60px;width:190px;height:190px;border-radius:48px;background:#0FA98A;transform:rotate(18deg)}
#topic[data-mode=menu] .mcard{aspect-ratio:1;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:5px;padding:14px;border-radius:24px;color:#fff;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 8px 24px -10px rgba(20,10,80,.5),inset 0 1px 0 rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);text-align:left}
#topic[data-mode=menu] .mcard:active{transform:translateY(3px)}
#topic[data-mode=menu] .mcard:hover{background:rgba(255,255,255,.3)}
#topic[data-mode=menu] .mcard::before{display:block;background:rgba(255,255,255,.14)}
#topic[data-mode=menu] .mcard svg{position:absolute;right:12px;top:12px;width:clamp(36px,11vw,54px);stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 6px rgba(20,10,80,.35))}
#topic[data-mode=menu] .mcard b{font-size:clamp(20px,5.6vw,28px);color:#fff;text-shadow:0 1px 8px rgba(20,10,80,.35)}
#topic[data-mode=menu] .mcard span{display:block;color:#fff;opacity:.95;font-size:clamp(12px,3.2vw,15px);text-shadow:0 1px 6px rgba(20,10,80,.4)}
.c-quiz,.c-cards,.c-sheet,.c-exam{background:none}
#topic[data-mode=menu]{padding-bottom:0}
/* menu: the four squares; a mode: its tiles of notions, then its settings */
#topic[data-mode=menu] .showcase{display:none}
#topic[data-mode=sheet] .showcase{display:none}
#topic>*{order:5}
#topic>.bankpanel{order:1}#topic>.modebackrow{order:2}#topic>.showcase{order:3}#topic>.modecards{order:3}
#topic>:first-child{order:0}
#topic[data-mode=cards] #createPanel{display:none!important}
#topic #createPanel .setgrid>div:first-child{display:none}
.modebackrow .btn{align-self:flex-start}
@media (min-width:700px){#topic[data-mode=menu] .modecards{padding:20px;gap:18px}}
#topic[data-mode=play] #createPanel .actions{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:20;background:var(--card);border-top:2px solid var(--line);border-radius:0;padding:10px max(16px,calc((100vw - 920px)/2 + 16px)) calc(10px + env(safe-area-inset-bottom))}
#topic[data-mode=play]{padding-bottom:84px}

/* ---------- home carousel: swipe, the centred quiz grows ---------- */
.quizgrid{--cw:clamp(210px,66vw,270px);display:flex;grid-template-columns:none;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;padding:26px calc(50% - var(--cw)/2) 34px;margin:-10px -16px 0;perspective:900px;touch-action:pan-x pan-y}
.quizgrid::-webkit-scrollbar{display:none}
.quizgrid.dragging{scroll-snap-type:none;cursor:grabbing}
.quizgrid .qcard{--s:.86;--o:.6;flex:0 0 var(--cw);width:var(--cw);min-height:236px;margin:0 8px;scroll-snap-align:center;scroll-snap-stop:always;transform:scale(var(--s));opacity:var(--o);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .35s;box-shadow:0 calc(var(--s)*14px - 4px) 0 rgba(23,22,43,.2),0 24px 36px -18px rgba(23,22,43,calc((var(--s) - .84)*5))}
.quizgrid .qcard:hover{transform:scale(var(--s));box-shadow:0 calc(var(--s)*14px - 4px) 0 rgba(23,22,43,.2),0 24px 36px -18px rgba(23,22,43,.5)}
.quizgrid .qcard:active{transform:scale(calc(var(--s) - .03))}
.quizgrid .qico{width:60px;height:60px;font-size:32px;border-radius:20px}
.quizgrid .qtxt b{font-size:clamp(20px,5.4vw,24px)}
.quizgrid .qtxt small{-webkit-line-clamp:3}
@media (min-width:700px){.quizgrid{--cw:290px;margin:-10px 0 0}}
@media (prefers-reduced-motion:reduce){.quizgrid .qcard{transition:none}}

/* ---------- quiz page: big glass squares showing a real preview of the content ---------- */
#topic[data-mode=menu] .mcard{aspect-ratio:4/5;justify-content:flex-end;overflow:hidden}
#topic[data-mode=menu] .mcard svg{display:none}
#topic[data-mode=menu] .modecards{gap:14px}
@media (min-width:700px){#topic[data-mode=menu] .mcard{aspect-ratio:3/4}}
.mc-pv{position:absolute;left:10px;right:10px;top:10px;height:56%;display:flex;flex-direction:column;gap:6px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);color:#17162B;text-align:left}
.mcard>b,.mcard>span:not(.mc-pv){position:relative;z-index:1}
.mcard:has(.mc-pv:empty)>.mc-pv{display:none}
#topic[data-mode=menu] .mc-pv .pv-q{font:800 clamp(11px,3.1vw,14px)/1.2 var(--f-display);background:rgba(255,255,255,.82);border-radius:12px;padding:8px 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#topic[data-mode=menu] .mc-pv .pv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#topic[data-mode=menu] .mc-pv .pv-tiles i{font:700 clamp(9.5px,2.6vw,12px)/1.15 var(--f-body);font-style:normal;color:#fff;border-radius:10px;padding:7px 7px;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.92}
#topic[data-mode=menu] .mc-pv .pv-t0{background:#E5484D}.pv-t1{background:#2F7DE1}.pv-t2{background:#E0A100}.pv-t3{background:#22A06B}
#topic[data-mode=menu] .mc-pv .pv-bar{display:flex;align-items:baseline;justify-content:space-between;background:rgba(23,22,43,.55);color:#fff;border-radius:12px;padding:5px 10px;font:800 13px var(--f-display)}
#topic[data-mode=menu] .mc-pv .pv-bar em{font-style:normal;opacity:.85}
#topic[data-mode=menu] .mc-pv .pv-card{position:absolute;border-radius:14px}
#topic[data-mode=menu] .mc-pv .pv-card.back{left:14px;right:6px;top:14px;bottom:-30px;background:rgba(255,255,255,.4);transform:rotate(4deg)}
#topic[data-mode=menu] .mc-pv .pv-card.front{position:relative;margin:6px 8px 0 4px;background:rgba(255,255,255,.85);padding:10px;display:flex;flex-direction:column;gap:3px;transform:rotate(-3deg);box-shadow:0 8px 18px -8px rgba(20,10,80,.5)}
#topic[data-mode=menu] .mc-pv .pv-card small{font:800 9.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#6a5bd8}
#topic[data-mode=menu] .mc-pv .pv-card b{font:800 clamp(14px,4vw,18px)/1.1 var(--f-display)}
#topic[data-mode=menu] .mc-pv .pv-card span{font:700 clamp(9.5px,2.6vw,11.5px)/1.25 var(--f-body);opacity:.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#topic[data-mode=menu] .mc-pv .pv-page{background:rgba(255,255,255,.8);border-radius:6px 6px 0 0;padding:10px;display:flex;flex-direction:column;gap:5px;min-height:100%;margin:0 8px;box-shadow:0 8px 18px -8px rgba(20,10,80,.5)}
#topic[data-mode=menu] .mc-pv .pv-page b{font:800 clamp(12px,3.4vw,15px)/1.1 var(--f-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#topic[data-mode=menu] .mc-pv .pv-page em{font:800 9.5px var(--f-body);font-style:normal;color:#6a5bd8;text-transform:uppercase;letter-spacing:.06em}
#topic[data-mode=menu] .mc-pv .pv-line{font:600 clamp(9px,2.5vw,11px)/1.3 var(--f-body);opacity:.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;filter:blur(.35px)}
#topic[data-mode=menu] .mcard{aspect-ratio:3/4}
.mc-pv{height:62%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
@media (max-width:560px){#topic[data-mode=menu] .mcard>span:not(.mc-pv){display:none}#topic[data-mode=menu] .mcard{padding:12px}}
@media (min-width:700px){#topic[data-mode=menu] .mcard{aspect-ratio:3/4}.mc-pv{height:55%}}
#topic[data-mode=menu] .mc-pv *{text-shadow:none}
#topic[data-mode=menu] .mc-pv .pv-q,#topic[data-mode=menu] .mc-pv .pv-card b,#topic[data-mode=menu] .mc-pv .pv-card span,#topic[data-mode=menu] .mc-pv .pv-page b,#topic[data-mode=menu] .mc-pv .pv-line{color:#17162B}
#topic[data-mode=menu] .mc-pv .pv-card small,#topic[data-mode=menu] .mc-pv .pv-page em{color:#6a5bd8}
#topic[data-mode=menu] .mc-pv .pv-tiles i,#topic[data-mode=menu] .mc-pv .pv-bar,#topic[data-mode=menu] .mc-pv .pv-bar b,#topic[data-mode=menu] .mc-pv .pv-bar em{color:#fff}
#topic[data-mode=menu] .mc-pv .pv-card span,#topic[data-mode=menu] .mc-pv .pv-card b,#topic[data-mode=menu] .mc-pv .pv-card small{display:block}

/* v3: roomier squares, cleaner previews, carousel dots */
#topic[data-mode=menu] .mcard{aspect-ratio:2/3}
@media (min-width:700px){#topic[data-mode=menu] .mcard{aspect-ratio:3/4}}
#topic[data-mode=menu] .mc-pv{top:10px;height:66%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
#topic[data-mode=menu] .mcard>b{font-size:clamp(17px,5vw,26px)}
#topic[data-mode=menu] .mc-pv .pv-dots{display:flex;gap:4px;padding:0 2px}
#topic[data-mode=menu] .mc-pv .pv-dots u{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.45)}
#topic[data-mode=menu] .mc-pv .pv-dots u.on{background:#fff}
#topic[data-mode=menu] .mc-pv .pv-ans{display:block;height:20px;border-radius:9px;background:rgba(255,255,255,.7);border:2px solid rgba(255,255,255,.9)}
#topic[data-mode=menu] .mc-pv .pv-ans.s{background:rgba(255,255,255,.35)}
#topic[data-mode=menu] .mc-pv .pv-cover{display:flex;flex-direction:column;gap:3px;margin:-10px -10px 2px;padding:9px 10px;border-radius:6px 6px 0 0;background:linear-gradient(135deg,#4B2FE0,#7A63FF)}
#topic[data-mode=menu] .mc-pv .pv-cover small{font:800 8.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#FFE36E}
#topic[data-mode=menu] .mc-pv .pv-cover b{color:#fff;font:800 clamp(12px,3.4vw,15px)/1.1 var(--f-display);-webkit-line-clamp:2}
#topic[data-mode=menu] .mc-pv .pv-bars{display:block;height:34px;border-radius:5px;background:repeating-linear-gradient(#17162B22 0 4px,transparent 4px 9px)}
.cdots{display:flex;justify-content:center;gap:7px;margin-top:-12px;flex-wrap:wrap}
.cdot{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--line2);cursor:pointer;transition:width .25s,background .25s}
.cdot[aria-current=true]{width:24px;background:var(--hl)}
.quizgrid{--cw:clamp(190px,58vw,250px)}

/* v4: everything visible at once, previews never cut */
.qall{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.qall h3{margin:0;font-size:16px;color:var(--muted)}
.qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.qlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qchip{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px 8px 8px;border:0;border-radius:18px;font:inherit;text-align:left;color:#17162B;cursor:pointer;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 4px 0 rgba(23,22,43,.18);min-width:0}
.qchip:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(23,22,43,.18)}
.qchip[hidden]{display:none}
.qchip b{flex:1;min-width:0;font:800 14.5px/1.15 var(--f-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qchip-l{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.88);font:800 19px var(--f-display)}
.qchip .qgo{flex:none;font-size:20px;font-weight:800}
.qchip[data-i="0"]{--a:#8E78FF;--b:#BBA9FF;color:#1b0b3a}
.qchip[data-i="1"]{--a:#FF8F73;--b:#FFC1A8}
.qchip[data-i="2"]{--a:#18C29C;--b:#7DEBCB}
.qchip[data-i="3"]{--a:#FFC933;--b:#FFE58A}
.qchip[data-i="4"]{--a:#2F9BFF;--b:#8FCBFF}
.qchip[data-i="5"]{--a:#FF5FA2;--b:#FFA6CB}
.qchip[data-i="6"]{--a:#7AC943;--b:#BDEE96}
.qchip[data-i="7"]{--a:#9B6BFF;--b:#D3BCFF}
/* previews: no fade, they end cleanly inside the glass */
#topic[data-mode=menu] .mc-pv{-webkit-mask-image:none;mask-image:none;height:auto;bottom:62px;gap:5px}
#topic[data-mode=menu] .mc-pv .pv-q{-webkit-line-clamp:3}
#topic[data-mode=menu] .mc-pv .pv-ans{flex:none}
#topic[data-mode=menu] .mc-pv .pv-card.front{margin-top:8px}
#topic[data-mode=menu] .mc-pv .pv-bars{height:auto;min-height:12px;flex:1;overflow:hidden}

/* v5: the preview is a normal block between the top of the square and its title, so it can never overlap or run under it */
#topic[data-mode=menu] .mcard{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:10px}
#topic[data-mode=menu] .mc-pv{position:static;left:auto;right:auto;top:auto;bottom:auto;flex:1 1 0;min-height:0;height:auto;margin:0 0 8px;overflow:hidden;border-radius:14px;-webkit-mask-image:none;mask-image:none}
#topic[data-mode=menu] .mcard>b{flex:none;font-size:clamp(16px,4.6vw,24px);line-height:1.1;padding:0 2px}
#topic[data-mode=menu] .mc-pv .pv-q{-webkit-line-clamp:2}
#topic[data-mode=menu] .mc-pv .pv-tiles i{min-height:0;-webkit-line-clamp:1;padding:5px 6px}
#topic[data-mode=menu] .mc-pv .pv-card.front{margin:2px 4px 0 2px;padding:8px}
#topic[data-mode=menu] .mc-pv .pv-card span{-webkit-line-clamp:2}
#topic[data-mode=menu] .mc-pv .pv-card.back{display:none}
#topic[data-mode=menu] .mc-pv .pv-page{margin:0;min-height:0}
#topic[data-mode=menu] .mc-pv .pv-line{-webkit-line-clamp:1}
#topic[data-mode=menu] .mc-pv.tight .pv-bars,#topic[data-mode=menu] .mc-pv.tight .pv-ans,#topic[data-mode=menu] .mc-pv.tight .pv-card span{display:none}
#topic[data-mode=menu] .mc-pv.tight .pv-tiles i:nth-child(n+3){display:none}
#topic[data-mode=menu] .mc-pv.tighter .pv-line,#topic[data-mode=menu] .mc-pv.tighter .pv-page em,#topic[data-mode=menu] .mc-pv.tighter .pv-tiles{display:none}
#topic[data-mode=menu] .mc-pv.tighter .pv-q{-webkit-line-clamp:1}
#topic[data-mode=menu] .mc-pv.tight .pv-cover small{display:none}
#topic[data-mode=menu] .mc-pv.tighter .pv-cover b{-webkit-line-clamp:1}
#topic[data-mode=menu] .mc-pv.tighter .pv-cover{margin:0;border-radius:6px}
@media (min-width:700px) and (max-width:999px){#topic[data-mode=menu] .mcard{aspect-ratio:2/3}}
#topic[data-mode=menu] .mc-pv.tighter .pv-card small{display:none}
/* wide screens: every quiz is a tile in a grid, nothing to swipe */
@media (min-width:1000px){
  .quizgrid{flex-wrap:wrap;overflow:visible;padding:18px 4px 24px;margin:0;gap:18px;scroll-snap-type:none;perspective:none}
  .quizgrid .qcard{--s:1;--o:1;margin:0;flex:0 0 calc((100% - 36px)/3);width:auto;transform:none;opacity:1}
  .quizgrid .qcard:hover{transform:translateY(-4px) scale(1.02)}
  .cdots,.qall{display:none}
}
/* slogan: one line on desktop, one word per line on phones */
.hero h1.slogan span{white-space:nowrap}
@media (max-width:640px){.hero h1.slogan span{display:block}}
@media (min-width:641px){.hero h1.slogan{white-space:nowrap;font-size:clamp(30px,3.6vw,40px)}}