/* Refine layer (loaded last): "frosted arcade". One brand violet, a harmonised quiz palette, soft depth instead of hard offsets,
   a calm ambient backdrop, readable names, and motion tokens shared with js/motion.js. */

/* ---------- tokens ---------- */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entering / feedback: fast start, long settle */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* things that move across the screen */
  --t-press:140ms; --t-hover:180ms; --t-enter:420ms;
  --depth:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -24px rgba(48,28,150,.38),0 2px 6px -2px rgba(48,28,150,.10);
  --glass:rgba(255,255,255,.72);
  --edge:rgba(255,255,255,.55);
  --r-card:22px; --r-ctl:14px;
  /* quiz palette: same chroma and lightness family, violet stays the brand colour */
  --p0a:#6D50F5; --p0b:#A894FF; --p0i:#fff;
  --p1a:#F27E67; --p1b:#FFB9A4; --p1i:#3a1208;
  --p2a:#1FB59C; --p2b:#78DDC8; --p2i:#03261f;
  --p3a:#F5B83A; --p3b:#FFDD87; --p3i:#2b1d00;
  --p4a:#4C8FF0; --p4b:#94C2FA; --p4i:#04203f;
  --p5a:#E5629F; --p5b:#F7A9C9; --p5i:#3a0820;
  --p6a:#62B866; --p6b:#B2E19A; --p6i:#0f2a0a;
  --p7a:#8F6BEA; --p7b:#CEBBFA; --p7i:#1b0b3a;
}
:root[data-theme="dark"]{
  --depth:0 1px 0 rgba(255,255,255,.07) inset,0 18px 40px -22px rgba(0,0,0,.75);
  --glass:rgba(27,26,48,.72);
  --edge:rgba(255,255,255,.09);
}

/* ---------- ambient backdrop ---------- */
html{background:var(--bg)}
body{background:transparent;caret-color:var(--hl);accent-color:var(--hl)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 8% -4%,rgba(109,80,245,.22),transparent 70%),
    radial-gradient(46% 38% at 100% 14%,rgba(242,126,103,.14),transparent 70%),
    radial-gradient(60% 46% at 60% 104%,rgba(31,181,156,.13),transparent 70%)}
:root[data-theme="dark"] body::before{background:
    radial-gradient(60% 42% at 8% -4%,rgba(122,99,255,.30),transparent 70%),
    radial-gradient(46% 38% at 100% 14%,rgba(229,98,159,.12),transparent 70%),
    radial-gradient(60% 46% at 60% 104%,rgba(31,181,156,.10),transparent 70%)}

/* ---------- type ---------- */
h1,h2,h3,.hero p{text-wrap:balance}
h1,h2{letter-spacing:-.025em}
.label{font-weight:700;letter-spacing:.005em}
#status,.rk,.pts,.ex-clock,.pv-bar,.cnt{font-variant-numeric:tabular-nums}
.steph .stepn{display:none}
input::placeholder,textarea::placeholder{color:#6B7088}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#9A9DB8}
::selection{background:color-mix(in srgb,var(--hl) 85%,#fff);color:#fff}
*{scrollbar-color:var(--line2) transparent}
:focus-visible{outline:2px solid var(--hl);outline-offset:3px;border-radius:inherit}

/* ---------- surfaces: frosted panels, one elevation language (soft shadow, 1px edge) ---------- */
.panel{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--depth)}
.iconbtn,#status{border-width:1px;background:var(--glass);box-shadow:0 1px 0 var(--edge) inset;transition:transform var(--t-press) var(--ease-out),border-color var(--t-hover),background var(--t-hover)}
.iconbtn:active{transform:scale(.94)}
.chip{border-width:1px;transition:transform var(--t-press) var(--ease-out),background var(--t-hover),border-color var(--t-hover),color var(--t-hover)}
.chip:active{transform:scale(.96)}
input[type=text],textarea,.qsearch input{border-width:1px}

/* ---------- buttons: glossy violet, pressed = slight sink, no hard offset ---------- */
.btn{border-radius:var(--r-ctl);background:linear-gradient(180deg,color-mix(in srgb,var(--hl) 82%,#fff),var(--hl) 70%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -3px 0 rgba(0,0,0,.14) inset,0 12px 22px -12px var(--hl-glow);
  transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-hover),filter var(--t-hover)}
.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
.btn:active:not(:disabled){transform:scale(.97);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -1px 0 rgba(0,0,0,.14) inset,0 6px 12px -10px var(--hl-glow)}
.btn.dark{background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 22px -14px rgba(0,0,0,.6)}
.btn.dark:active:not(:disabled){box-shadow:0 6px 12px -10px rgba(0,0,0,.6)}
:root[data-theme="dark"] .btn.dark{background:#F1F0FA;box-shadow:0 12px 22px -14px rgba(0,0,0,.7)}
.btn.ghost{background:var(--glass);border:1px solid var(--line2);box-shadow:0 1px 0 var(--edge) inset}
.btn.ghost:active:not(:disabled){transform:scale(.97);box-shadow:none}

/* answer tiles keep their Kahoot colours; the hard block shadow becomes a soft coloured lift + a pressed edge */
.t0{box-shadow:0 -4px 0 rgba(0,0,0,.16) inset,0 14px 22px -14px var(--a0)}
.t1{box-shadow:0 -4px 0 rgba(0,0,0,.16) inset,0 14px 22px -14px var(--a1)}
.t2{box-shadow:0 -4px 0 rgba(0,0,0,.12) inset,0 14px 22px -14px var(--a2)}
.t3{box-shadow:0 -4px 0 rgba(0,0,0,.16) inset,0 14px 22px -14px var(--a3)}
.tile{transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-hover),opacity .25s,filter .15s}
.tile:active:not(:disabled){transform:scale(.97)}
.t0:active:not(:disabled),.t1:active:not(:disabled),.t2:active:not(:disabled),.t3:active:not(:disabled){box-shadow:0 -2px 0 rgba(0,0,0,.14) inset}

/* ---------- home hero: mesh gradient, no decorative circles ---------- */
.hero{background:
    radial-gradient(70% 90% at 100% 0%,rgba(255,111,168,.55),transparent 62%),
    radial-gradient(60% 80% at 0% 100%,rgba(31,181,156,.38),transparent 65%),
    linear-gradient(135deg,#4B2FE0,#7A5CFF);
  border-radius:28px;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 28px 50px -28px rgba(75,47,224,.7)}
.hero::before,.hero::after{display:none}
.hero h1{font-size:clamp(30px,8.4vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block;will-change:transform}
@media (max-width:560px){.hero{padding:18px 20px}.hero h1{font-size:clamp(28px,8.6vw,34px)}}
.tour-btn{background:linear-gradient(160deg,#3A25C4,#2A1A9E);border-radius:24px;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 30px -18px rgba(42,26,158,.8);transition:transform var(--t-press) var(--ease-out)}
.tour-btn:active{transform:scale(.96)}
.tour-play{box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.hero .streak{box-shadow:none}

/* ---------- quiz tiles: harmonised palette, soft depth, pointer spotlight ---------- */
.quizgrid .qcard{--c1:var(--p0a);--c2:var(--p0b);--ink:var(--p0i);border-radius:var(--r-card);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 20px 32px -18px color-mix(in srgb,var(--c1) 80%,#1a1050)}
.quizgrid .qcard:nth-child(8n+2){--c1:var(--p1a);--c2:var(--p1b);--ink:var(--p1i)}
.quizgrid .qcard:nth-child(8n+3){--c1:var(--p2a);--c2:var(--p2b);--ink:var(--p2i)}
.quizgrid .qcard:nth-child(8n+4){--c1:var(--p3a);--c2:var(--p3b);--ink:var(--p3i)}
.quizgrid .qcard:nth-child(8n+5){--c1:var(--p4a);--c2:var(--p4b);--ink:var(--p4i)}
.quizgrid .qcard:nth-child(8n+6){--c1:var(--p5a);--c2:var(--p5b);--ink:var(--p5i)}
.quizgrid .qcard:nth-child(8n+7){--c1:var(--p6a);--c2:var(--p6b);--ink:var(--p6i)}
.quizgrid .qcard:nth-child(8n+8){--c1:var(--p7a);--c2:var(--p7b);--ink:var(--p7i)}
.quizgrid .qcard:hover,.quizgrid .qcard:active{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 24px 36px -18px color-mix(in srgb,var(--c1) 85%,#1a1050)}
.quizgrid .qcard{transition:transform .45s var(--ease-out),opacity .35s,box-shadow .35s}
.quizgrid .qcard::before,.sctile::before,.sctile::after,#topic[data-mode=menu] .mcard::before{display:none}
.quizgrid .qico{box-shadow:0 8px 14px -8px rgba(0,0,0,.35)}
.quizgrid .qgo,.sc-ck{box-shadow:0 6px 12px -6px rgba(0,0,0,.35)}
.quizgrid .qtxt small{opacity:.78}

/* "all quizzes" list: full names (2 lines), one column on phones so nothing is cut */
.qlist{grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:560px){.qlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.qlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qchip{position:relative;overflow:hidden;isolation:isolate;min-height:60px;border-radius:var(--r-ctl);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 22px -16px color-mix(in srgb,var(--a) 85%,#1a1050);
  transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-hover);color:var(--ci,#17162B)}
.qchip:hover{transform:translateY(-2px)}
.qchip:active{transform:scale(.97);box-shadow:0 1px 0 rgba(255,255,255,.45) inset}
.qchip b{font-size:15px;line-height:1.18;-webkit-line-clamp:3}
.qchip-l{border-radius:11px;box-shadow:0 6px 10px -6px rgba(0,0,0,.35)}
.qchip[data-i="0"]{--a:var(--p0a);--b:var(--p0b);--ci:var(--p0i)}
.qchip[data-i="1"]{--a:var(--p1a);--b:var(--p1b);--ci:var(--p1i)}
.qchip[data-i="2"]{--a:var(--p2a);--b:var(--p2b);--ci:var(--p2i)}
.qchip[data-i="3"]{--a:var(--p3a);--b:var(--p3b);--ci:var(--p3i)}
.qchip[data-i="4"]{--a:var(--p4a);--b:var(--p4b);--ci:var(--p4i)}
.qchip[data-i="5"]{--a:var(--p5a);--b:var(--p5b);--ci:var(--p5i)}
.qchip[data-i="6"]{--a:var(--p6a);--b:var(--p6b);--ci:var(--p6i)}
.qchip[data-i="7"]{--a:var(--p7a);--b:var(--p7b);--ci:var(--p7i)}
.qchip[data-i]{color:var(--ci)}
.qall h3{font-size:14px;font-weight:800;letter-spacing:.01em}

/* spotlight (React Bits style): a soft light follows the pointer over tiles */
.qcard::after,.qchip::after,.sctile::after,.mcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.38),transparent 62%)}
@media (hover:hover) and (pointer:fine){.qcard:hover::after,.qchip:hover::after,.sctile:hover::after,.mcard:hover::after{opacity:1}}
.mcard,.sctile{transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover),background var(--t-hover)}

/* ---------- quiz page: frosted squares over a soft mesh ---------- */
#topic[data-mode=menu] .modecards{background:
    radial-gradient(60% 55% at 92% 4%,rgba(255,122,92,.9),transparent 62%),
    radial-gradient(55% 55% at 4% 100%,rgba(15,169,138,.85),transparent 62%),
    radial-gradient(50% 50% at 50% 50%,rgba(255,111,168,.45),transparent 70%),
    linear-gradient(140deg,#4B2FE0,#7A5CFF 60%,#9A6BFF);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 30px 50px -28px rgba(75,47,224,.7);border-radius:30px}
#topic[data-mode=menu] .modecards::before,#topic[data-mode=menu] .modecards::after{display:none}
#topic[data-mode=menu] .mcard{border:1px solid rgba(255,255,255,.5);border-radius:24px;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 24px 36px -22px rgba(20,10,80,.6)}
#topic[data-mode=menu] .mcard:hover{background:rgba(255,255,255,.28);transform:perspective(800px) translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
#topic[data-mode=menu] .mcard:active{transform:scale(.97)}
.bankpanel{overflow:hidden;border:0;background:
    radial-gradient(70% 120% at 100% 0%,rgba(255,111,168,.5),transparent 62%),
    radial-gradient(60% 100% at 0% 100%,rgba(31,181,156,.3),transparent 65%),
    linear-gradient(135deg,#4B2FE0,#7A5CFF);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 24px 40px -26px rgba(75,47,224,.7)}
.bankpanel::after{display:none}
#pickPanel{background:none;border:0;box-shadow:none;padding:0}
.qchip-l,.qchip .qgo{color:#17162B}
.sctile{border-radius:var(--r-card);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 28px -18px rgba(23,22,43,.45)}
.sctile:active{box-shadow:0 1px 0 rgba(255,255,255,.45) inset;transform:scale(.97)}

/* ---------- mode pages / exam / podium ---------- */
.pod .blk{border-radius:16px 16px 0 0}
.pod.p1 .blk{background:linear-gradient(180deg,#7A5CFF,var(--hl));box-shadow:0 -1px 0 rgba(255,255,255,.4) inset}
#topic[data-mode=play] #createPanel .actions,#examPanel .actions,#cardsPanel .actions{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid var(--edge)}
.jointoast{border-radius:16px;box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}

/* ---------- modal (tutorial video) ---------- */
.tour-modal{animation:fadeOnly .22s var(--ease-out) both;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tour-modal video{animation:modalIn .3s var(--ease-out) both}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* ---------- smooth scroll (Lenis, desktop only; the class is added by js/motion.js) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- reduced motion: soften, don't strip. No travel, no loops, no parallax, no tilt; state changes still fade quickly ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;
    transition-property:opacity,color,background-color,border-color,box-shadow,filter!important;transition-duration:.14s!important;transition-delay:0s!important}
  .tour-modal,.tour-modal video{animation:none!important}
  #topic[data-mode=menu] .mcard,#topic[data-mode=menu] .mcard:hover{transform:none!important}
  .quizgrid .qcard,.quizgrid .qcard:hover,.quizgrid .qcard:active{transition-property:opacity,box-shadow!important}
}

/* ---------- fixes found in review ---------- */
#pickPanel .qsearch{background:transparent}
.hero h1{margin-bottom:6px}
@media (min-width:700px){
  #topic[data-mode=menu] .modecards{grid-template-columns:repeat(auto-fit,minmax(160px,240px));justify-content:center}
}
@media (max-width:360px){.hero h1{font-size:26px}}

/* =====================================================================
   v2: bolder. Stronger aurora, expressive hero with the four-tile mark, real frosted glass, livelier tiles.
   ===================================================================== */
body::before{inset:-25%;
  background:
    radial-gradient(38% 34% at 18% 14%,rgba(109,80,245,.55),transparent 70%),
    radial-gradient(34% 30% at 86% 22%,rgba(242,98,140,.42),transparent 70%),
    radial-gradient(40% 34% at 70% 86%,rgba(31,181,156,.38),transparent 70%),
    radial-gradient(30% 28% at 12% 80%,rgba(76,143,240,.34),transparent 70%);
  animation:aurora 26s var(--ease-in-out) infinite alternate;will-change:transform}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(38% 34% at 18% 14%,rgba(122,99,255,.62),transparent 70%),
    radial-gradient(34% 30% at 86% 22%,rgba(229,98,159,.38),transparent 70%),
    radial-gradient(40% 34% at 70% 86%,rgba(31,181,156,.30),transparent 70%),
    radial-gradient(30% 28% at 12% 80%,rgba(76,143,240,.34),transparent 70%)}
@keyframes aurora{from{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}to{transform:translate3d(4%,3%,0) rotate(7deg) scale(1.1)}}

/* real frosted glass on panels (not on the three that hold position:fixed start bars) */
:root{--glass:rgba(255,255,255,.52)}
:root[data-theme="dark"]{--glass:rgba(30,28,56,.52)}
.panel:not(#createPanel):not(#examPanel):not(#cardsPanel),.iconbtn,#status,.btn.ghost{-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.panel{border:1px solid rgba(255,255,255,.65)}
:root[data-theme="dark"] .panel{border-color:rgba(255,255,255,.10)}

/* hero: bigger, with the four-tile mark floating on the right */
.hero{padding:clamp(22px,5vw,44px);min-height:clamp(180px,34vw,260px);justify-content:center;overflow:hidden}
.hero h1{font-size:clamp(38px,10.5vw,76px);line-height:.98;letter-spacing:-.04em;text-shadow:0 8px 30px rgba(20,10,80,.35)}
.hero::after{display:block;content:"";position:absolute;z-index:0;right:clamp(-30px,-2vw,0px);top:50%;margin-top:calc(clamp(110px,26vw,200px)/-2);width:clamp(110px,26vw,200px);height:clamp(110px,26vw,200px);
  background:url(../img/mark.svg) center/contain no-repeat;transform:rotate(12deg);filter:drop-shadow(0 24px 28px rgba(20,10,80,.5));animation:floaty 7s var(--ease-in-out) infinite;opacity:.95}
@keyframes floaty{0%,100%{transform:translateY(-6px) rotate(10deg)}50%{transform:translateY(8px) rotate(15deg)}}
.hero p{font-size:clamp(15px,2.2vw,19px)}
@media (max-width:560px){
  .hero>p:not(.streak){display:block;padding-right:0;opacity:.9;max-width:62%}
  .hero{padding:22px 20px;min-height:190px}
  .hero::after{opacity:.9}
  .hero h1{font-size:clamp(36px,11vw,46px);max-width:70%}
  /* tutorial: slim glass bar under the hero instead of a tall square beside it */
  #home .tour{grid-column:1/-1;grid-row:2}
  .tour-btn{width:100%;height:56px;min-height:0;flex-direction:row;gap:12px;border-radius:18px}
  .tour-cap{font-size:16px}
}
.steph h2{font-size:clamp(24px,5.5vw,32px);letter-spacing:-.03em}
.tour-btn{background:linear-gradient(160deg,rgba(58,37,196,.92),rgba(42,26,158,.92));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* carousel: the centred card glows in its own colour, side cards recede */
.quizgrid .qcard{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 calc(var(--s)*30px) calc(var(--s)*40px) -18px color-mix(in srgb,var(--c1) 90%,#1a1050)}
.quizgrid .qcard:hover,.quizgrid .qcard:active{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 34px 44px -18px color-mix(in srgb,var(--c1) 95%,#1a1050)}
.quizgrid .qico{width:64px;height:64px;border-radius:20px}
.quizgrid .qtxt b{font-size:clamp(22px,6vw,28px);letter-spacing:-.02em}
.qchip{min-height:64px}

/* buttons: a light sweep crosses the main button on hover (desktop) */
.btn:not(.ghost):not(.dark)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%)}
@media (hover:hover) and (pointer:fine){.btn:not(.ghost):not(.dark):hover:not(:disabled)::after{transform:translateX(120%);transition:transform .7s var(--ease-out)}}
.btn{overflow:hidden}

/* quiz page squares: bigger lift */
#topic[data-mode=menu] .mcard:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 36px 44px -22px rgba(20,10,80,.75)}
.bankpanel h2{font-size:clamp(22px,5.5vw,30px);letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){body::before,.hero::after{animation:none!important}}

/* =====================================================================
   v3: no sliding carousel. Every quiz is a tile in a grid (2 columns on phones, 3 then 4 wider), full names, no horizontal scroll.
   ===================================================================== */
.quizgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:4px 0 8px;margin:0;perspective:none;scroll-snap-type:none;touch-action:auto;--cw:auto;cursor:auto}
@media (min-width:700px){.quizgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:1100px){.quizgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.quizgrid .qcard,.quizgrid .qcard:hover,.quizgrid .qcard:active{--s:1;--o:1;flex:none;width:auto;min-height:176px;margin:0;transform:none;opacity:1;scroll-snap-align:none}
@media (hover:hover) and (pointer:fine){.quizgrid .qcard:hover{transform:translateY(-4px)}}
.quizgrid .qcard:active{transform:scale(.97)}
.quizgrid .qtxt b{-webkit-line-clamp:4;font-size:clamp(17px,4.6vw,22px)}
.quizgrid .qtxt small{-webkit-line-clamp:2}
.cdots,.qall{display:none!important}
.quizgrid.dragging{cursor:auto}
/* tile names: use the full tile width, break only when a word really does not fit, arrow only constrains the subtitle */
.quizgrid .qtxt{padding-right:0}
.quizgrid .qtxt b{font-size:clamp(16px,4.3vw,21px);overflow-wrap:break-word;word-break:normal;hyphens:manual}
.quizgrid .qtxt small{padding-right:40px}
.quizgrid .qcard{padding:14px 14px 16px}
.hero::after{right:clamp(14px,3.5vw,56px)}
@media (max-width:560px){.hero::after{right:8px}}

/* =====================================================================
   v4: review fixes
   1) hero: the four-tile mark has its own reserved column, it can never touch the title
   2) home tiles: translucent decorative circle back, original mint green for the green quiz
   3) quiz page: the four showcases always sit on ONE row, each preview fills its whole showcase
   ===================================================================== */
/* 1 */
.hero{--mk:clamp(84px,22vw,170px);padding-right:calc(var(--mk) + 34px)}
.hero::after{width:var(--mk);height:var(--mk);margin-top:calc(var(--mk)/-2);right:18px}
.hero h1{font-size:clamp(28px,8.4vw,76px);max-width:none}
.hero>p:not(.streak){max-width:none}
@media (max-width:560px){.hero{padding:22px 16px 22px 20px;padding-right:calc(var(--mk) + 26px)}.hero::after{right:12px}.hero h1{font-size:clamp(28px,8.6vw,40px);max-width:none}.hero>p:not(.streak){max-width:none;font-size:14px}}
@media (min-width:561px) and (max-width:900px){.hero h1{font-size:clamp(40px,8vw,64px)}}

/* 2 */
:root{--p2a:#18C29C;--p2b:#7DEBCB;--p2i:#04251d}
.quizgrid .qcard::before{display:block;content:"";position:absolute;z-index:-1;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.25);pointer-events:none}
.quizgrid .qcard::after{z-index:0}

/* 3 */
#topic[data-mode=menu] .modecards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;justify-content:stretch;gap:clamp(7px,1.8vw,18px);padding:clamp(9px,2.4vw,20px);
  background:
    radial-gradient(52% 46% at 96% 0%,rgba(255,122,92,.95),transparent 68%),
    radial-gradient(62% 56% at 2% 102%,#0FA98A,rgba(15,169,138,.55) 45%,transparent 74%),
    radial-gradient(46% 46% at 50% 55%,rgba(255,111,168,.4),transparent 70%),
    linear-gradient(140deg,#4B2FE0,#7A5CFF 60%,#9A6BFF)}
#topic[data-mode=menu] .mcard{aspect-ratio:auto;height:clamp(320px,84vw,400px);padding:clamp(6px,1.6vw,12px);gap:clamp(6px,1.4vw,10px);min-width:0;border-radius:clamp(16px,4vw,24px)}
#topic[data-mode=menu] .mcard>b{font-size:clamp(11.5px,3.3vw,22px);line-height:1.08;padding:0 2px 2px;overflow-wrap:anywhere;hyphens:manual}
@media (min-width:900px){#topic[data-mode=menu] .mcard{height:420px}}
@media (max-width:899px){#topic[data-mode=menu] .mcard>span:not(.mc-pv){display:none}}
#topic[data-mode=menu] .mcard .mc-pv{container-type:inline-size;display:flex;flex-direction:column;gap:clamp(4px,1.2cqi,8px);flex:1 1 0;min-height:0;height:auto;margin:0;overflow:hidden;border-radius:clamp(10px,3vw,16px)}
#topic[data-mode=menu] .mcard .mc-pv>*{min-height:0}
/* Quiz: question on top, answers share the rest of the height */
#topic[data-mode=menu] .mcard .mc-pv .pv-q{flex:1.25 1 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-line-clamp:9;overflow:hidden;
  font:800 clamp(9px,10.5cqi,15px)/1.2 var(--f-display);padding:clamp(5px,6cqi,10px);border-radius:clamp(8px,8cqi,14px)}
#topic[data-mode=menu] .mcard .mc-pv .pv-tiles{flex:1.7 1 0;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:clamp(3px,3cqi,6px)}
@container (min-width:140px){#topic[data-mode=menu] .mcard .mc-pv .pv-tiles{grid-template-columns:1fr 1fr}}
#topic[data-mode=menu] .mcard .mc-pv .pv-tiles i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-line-clamp:3;overflow:hidden;min-height:0;
  font:700 clamp(8.5px,9.5cqi,13px)/1.15 var(--f-body);padding:clamp(3px,4cqi,8px);border-radius:clamp(7px,7cqi,12px)}
/* Exam: clock, question, answer field */
#topic[data-mode=menu] .mcard .mc-pv .pv-bar{flex:none;font:800 clamp(10px,11cqi,18px) var(--f-display);padding:clamp(4px,5cqi,9px) clamp(5px,7cqi,12px);border-radius:clamp(8px,8cqi,14px)}
#topic[data-mode=menu] .mcard .mc-pv .pv-ans{flex:.9 1 0;height:auto;border-radius:clamp(8px,8cqi,14px);background:rgba(255,255,255,.55);border:2px solid rgba(255,255,255,.9);
  background-image:repeating-linear-gradient(rgba(23,22,43,.16) 0 2px,transparent 2px 14px);background-size:76% 100%;background-position:50% 0;background-repeat:no-repeat}
/* Flashcards: one card filling the showcase */
#topic[data-mode=menu] .mcard .mc-pv .pv-card.back{display:none}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front{flex:1 1 0;position:relative;margin:0;transform:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,3cqi,8px);
  padding:clamp(7px,9cqi,16px);border-radius:clamp(10px,9cqi,16px);box-shadow:0 14px 24px -14px rgba(20,10,80,.55);overflow:hidden}
#topic[data-mode=menu] .mcard .mc-pv .pv-card small{font:800 clamp(7px,7.5cqi,10px) var(--f-body)}
#topic[data-mode=menu] .mcard .mc-pv .pv-card b{font:800 clamp(13px,17cqi,24px)/1.05 var(--f-display);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
#topic[data-mode=menu] .mcard .mc-pv .pv-card span{font:700 clamp(8.5px,9cqi,12.5px)/1.25 var(--f-body);-webkit-line-clamp:8;opacity:.8}
/* Study sheet: a page whose cover, headings and text fill the height */
#topic[data-mode=menu] .mcard .mc-pv .pv-page{flex:1 1 0;margin:0;min-height:0;overflow:hidden;gap:clamp(3px,3.5cqi,8px);padding:clamp(7px,9cqi,14px);border-radius:clamp(8px,8cqi,14px) clamp(8px,8cqi,14px) 0 0;box-shadow:0 14px 24px -14px rgba(20,10,80,.55)}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover{margin:calc(clamp(7px,9cqi,14px)*-1) calc(clamp(7px,9cqi,14px)*-1) 2px;padding:clamp(7px,9cqi,14px);border-radius:inherit}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover small{display:block;font:800 clamp(6.5px,7cqi,9px) var(--f-body)}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover b{font:800 clamp(11px,13cqi,19px)/1.08 var(--f-display);-webkit-line-clamp:4;overflow-wrap:anywhere}
#topic[data-mode=menu] .mcard .mc-pv .pv-page em{font:800 clamp(7px,8cqi,10px) var(--f-body)}
#topic[data-mode=menu] .mcard .mc-pv .pv-line{font:600 clamp(8px,9cqi,12px)/1.3 var(--f-body);-webkit-line-clamp:4;opacity:.8;filter:none}
#topic[data-mode=menu] .mcard .mc-pv .pv-bars{flex:1 1 auto;min-height:10px;height:auto;background:repeating-linear-gradient(rgba(23,22,43,.14) 0 3px,transparent 3px 9px)}
/* v4b: finishing touches on the showcases */
#topic[data-mode=menu] .mcard .mc-pv,#topic[data-mode=menu] .mcard .mc-pv *{text-shadow:none}
#topic[data-mode=menu] .mcard>b{font-size:clamp(10px,3vw,22px);letter-spacing:-.02em;overflow-wrap:normal}
@media (max-width:350px){#topic[data-mode=menu] .mcard>b{font-size:9px;letter-spacing:-.03em}#topic[data-mode=menu] .modecards{padding:8px;gap:6px}}
#topic[data-mode=menu] .mcard .mc-pv .pv-bar b,#topic[data-mode=menu] .mcard .mc-pv .pv-bar em{font:inherit;text-shadow:none}
#topic[data-mode=menu] .mcard .mc-pv .pv-bar em{opacity:.75;font-size:.7em}
@container (max-width:110px){#topic[data-mode=menu] .mcard .mc-pv .pv-bar{justify-content:center}#topic[data-mode=menu] .mcard .mc-pv .pv-bar em{display:none}}
#topic[data-mode=menu] .mcard .mc-pv .pv-card b{font:800 clamp(9px,13cqi,24px)/1.05 var(--f-display)}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover b{font:800 clamp(9px,11cqi,19px)/1.08 var(--f-display)}
#topic[data-mode=menu] .mcard .mc-pv .pv-page em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v4c: text blocks are sized by fitPreviews() to fill their box, centred vertically */
#topic[data-mode=menu] .mcard .mc-pv .pv-q{display:flex;flex-direction:column;justify-content:center;-webkit-line-clamp:none;font-size:12px;overflow-wrap:normal}
#topic[data-mode=menu] .mcard .mc-pv .pv-tiles i{display:flex;flex-direction:column;justify-content:center;-webkit-line-clamp:none;font-size:10px;overflow-wrap:normal}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front{--fs:10px;justify-content:center}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front small{font-size:calc(var(--fs)*.75)}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front b{font-size:calc(var(--fs)*1.9);-webkit-line-clamp:none;display:block}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front span{font-size:var(--fs);-webkit-line-clamp:none;display:block}
#topic[data-mode=menu] .mcard .mc-pv .pv-page{--fs:10px}
#topic[data-mode=menu] .mcard .mc-pv .pv-page .pv-line{font-size:var(--fs);-webkit-line-clamp:none;display:block;overflow:hidden}
#topic[data-mode=menu] .mcard .mc-pv .pv-page em{font-size:calc(var(--fs)*.8)}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover b{font-size:calc(var(--fs)*1.6);-webkit-line-clamp:none}
#topic[data-mode=menu] .mcard .mc-pv .pv-cover small{font-size:calc(var(--fs)*.7)}
#topic[data-mode=menu] .mcard .mc-pv .pv-card b,#topic[data-mode=menu] .mcard .mc-pv .pv-cover b,#topic[data-mode=menu] .mcard .mc-pv .pv-card span,#topic[data-mode=menu] .mcard .mc-pv .pv-line{overflow-wrap:normal;word-break:normal;overflow:visible}
#topic[data-mode=menu] .mcard .mc-pv .pv-card.front{justify-content:center;gap:calc(var(--fs)*.5)}
#topic[data-mode=menu] .mcard .mc-pv .pv-q,#topic[data-mode=menu] .mcard .mc-pv .pv-tiles i,#topic[data-mode=menu] .mcard .mc-pv .pv-card b,#topic[data-mode=menu] .mcard .mc-pv .pv-card span,#topic[data-mode=menu] .mcard .mc-pv .pv-cover b,#topic[data-mode=menu] .mcard .mc-pv .pv-line{hyphens:auto;-webkit-hyphens:auto}
.hero h1{text-shadow:none}
.hero h1 .w>span{will-change:auto}
#topic[data-mode=menu] .mcard{container-type:inline-size}
#topic[data-mode=menu] .mcard>b{font-size:clamp(10px,14cqi,24px)}
@media (max-width:350px){#topic[data-mode=menu] .mcard>b{font-size:9px}}

/* =====================================================================
   Phones only (<= 700px): the showcases become real squares in a 2x2 grid. Desktop and tablets keep the four tall strips untouched.
   ===================================================================== */
@media (max-width:700px){
  #topic[data-mode=menu] .modecards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  #topic[data-mode=menu] .modecards[data-n="3"] #examJump{grid-column:1/-1}
  #topic[data-mode=menu] .modecards[data-n="2"],#topic[data-mode=menu] .modecards[data-n="1"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  #topic[data-mode=menu] .mcard{aspect-ratio:1;height:auto;padding:8px;gap:6px;border-radius:22px}
  #topic[data-mode=menu] .modecards[data-n="3"] #examJump{aspect-ratio:2/1}
  #topic[data-mode=menu] .mcard>b{font-size:clamp(13px,8.5cqi,18px);letter-spacing:-.01em;padding:0 3px 1px}
  @container (min-width:100px){#topic[data-mode=menu] .mcard .mc-pv .pv-tiles{grid-template-columns:1fr 1fr}}
  #topic[data-mode=menu] .mcard .mc-pv{border-radius:14px}
  #topic[data-mode=menu] .mcard .mc-pv .pv-q{padding:6px 7px}
}
@media (max-width:700px){#topic[data-mode=menu] .mcard .mc-pv .pv-page .pv-bars{display:none}}
@media (max-width:700px){
#topic[data-mode=menu] .mcard .mc-pv .pv-page>:not(.pv-bars),#topic[data-mode=menu] .mcard .mc-pv .pv-card.front>*{flex:none}
#topic[data-mode=menu] .mcard .mc-pv .pv-page .pv-line{overflow:visible}
}

/* connection lost banner (multiplayer) */
.netbar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;background:#E8492B;color:#fff;font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.netbar[hidden]{display:none}

/* report a question */
.reportbox{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.linkbtn{background:none;border:0;padding:6px 2px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer}
.linkbtn:disabled{text-decoration:none;opacity:.7;cursor:default}
.rptbtn{flex:none;margin-left:auto;margin-right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,rgba(0,0,0,.15));background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.rptbtn.on,.rptbtn:disabled{color:#E8492B;opacity:.9;cursor:default}
.pausebox{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:14px}
.pausebox[hidden]{display:none}
body.qpaused #qTiles,body.qpaused #qType{opacity:.35;pointer-events:none}
.reportpick{display:flex;flex-wrap:wrap;gap:8px}

/* "Today" panel on the quiz page */
.todaypanel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.todaypanel h2{margin:0}
.today-btns{display:flex;gap:8px;flex-wrap:wrap}
.todaypanel[hidden]{display:none}

/* text for screen readers only */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* resume an exam in progress */
.ex-resume{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:var(--hl-soft);font-weight:700;font-size:14.5px}
.ex-resume span{flex:1 1 180px}
.ex-resume[hidden]{display:none}

/* end of game: results by chapter */
.endchap{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin:6px 0}
.endchap .btn{align-self:flex-start;margin-top:4px}
.chap-row{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;gap:10px;align-items:center;font-weight:800;font-size:14px}
.chap-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.chap-bar i{display:block;height:100%;border-radius:99px;background:var(--hl)}
.chap-bar i.hi{background:#158A4A}.chap-bar i.mid{background:#FFC21A}.chap-bar i.lo{background:#E8492B}
.chap-sc{font-variant-numeric:tabular-nums;color:var(--muted)}

/* weekly league */
.leaguechip{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);color:var(--ink);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.leaguechip[hidden]{display:none}
.leaguechip:active{transform:scale(.97)}
.lggem{display:block;flex:none}
#league{display:flex;flex-direction:column;gap:14px}
#league[hidden]{display:none}
.lg-head{display:flex;align-items:center;gap:14px}
.lg-head h2{margin:0}
.lg-ladder{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:6px 2px}
.lg-step{opacity:.4;filter:grayscale(.5)}
.lg-step.done{opacity:.75;filter:none}
.lg-step.cur{opacity:1;filter:none}
.lg-sub{margin:0;font-weight:800;font-size:17px}
.lg-rule{margin:-6px 0 0;font-size:13px}
.lg-last{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--hl-soft)}
.lg-last.up{background:#DFF6E8;color:#0B5A31}
.lg-last.down{background:#FDE5E1;color:#8A2A16}
.lg-board{display:flex;flex-direction:column;gap:6px}
.lg-row{display:grid;grid-template-columns:28px 34px 1fr auto;gap:10px;align-items:center;padding:7px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:700}
.lg-row.me{border-color:var(--hl);background:var(--hl-soft)}
.lg-row.upz{box-shadow:inset 4px 0 0 #158A4A}
.lg-row.dnz{box-shadow:inset 4px 0 0 #E8492B}
.lg-rk{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.lg-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-xp{font-variant-numeric:tabular-nums;color:var(--muted)}
.lg-how{font-size:13px;margin:0}
.lg-row .av{width:34px;height:34px}

/* mode names: big, bright pills so every mode is readable at a glance */
#topic[data-mode=menu] .mcard>b{display:inline-block;align-self:center;max-width:100%;box-sizing:border-box;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#2B1A9E;text-shadow:none;background:linear-gradient(180deg,#FFF08A,#FFC933);border-radius:999px;padding:.28em .7em .3em;box-shadow:0 3px 0 rgba(43,26,158,.55),0 6px 14px rgba(20,10,80,.3);font-size:clamp(12px,1.45vw,20px);white-space:nowrap}
@media (max-width:899px){#topic[data-mode=menu] .mcard>b{font-size:clamp(12px,4.2vw,19px)}}
@media (max-width:350px){#topic[data-mode=menu] .mcard>b{font-size:11px}}
/* exam preview: hourglass + a time bar that drains */
#topic[data-mode=menu] .mc-pv .pv-bar{justify-content:flex-start;gap:8px;align-items:center}
#topic[data-mode=menu] .mcard .mc-pv .pv-bar svg{display:block;position:static;opacity:1;filter:none;flex:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#topic[data-mode=menu] .mc-pv .pv-bar svg .sand{fill:#FFD84D;stroke:none}
#topic[data-mode=menu] .mc-pv .pv-time{flex:1;height:8px;border-radius:9px;background:rgba(255,255,255,.28);overflow:hidden}
#topic[data-mode=menu] .mc-pv .pv-time i{display:block;height:100%;width:100%;border-radius:9px;background:linear-gradient(90deg,#FF5A5F,#FFD84D);transform-origin:left;animation:pvdrain 4s ease-in-out infinite alternate}
@keyframes pvdrain{from{transform:scaleX(.9)}to{transform:scaleX(.25)}}
@media (prefers-reduced-motion:reduce){#topic[data-mode=menu] .mc-pv .pv-time i{animation:none;transform:scaleX(.55)}}

/* offline mode: a thin bar while there's no network */
.off-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 14px calc(8px + env(safe-area-inset-bottom));background:#17162B;color:#fff;font:600 13px/1.3 Nunito,system-ui,sans-serif;text-align:center}
.off-bar[hidden]{display:none}
body.is-offline{padding-bottom:var(--offbar-h,0px)}
/* the pinned action bars (Play solo, Exam, Cards...) sit above the offline banner instead of under it */
body.is-offline .panel .actions,body.is-offline #examPanel .actions,body.is-offline #cardsPanel .actions,body.is-offline #topic[data-mode=play] #createPanel .actions{bottom:var(--offbar-h,0px)!important}
html[data-theme="dark"] .off-bar{background:#2B2A45}
/* pause button on solo question / answer screens, resume bar on flashcards */
.pausebtn{min-height:34px;padding:4px 12px;font-size:14px;flex:none}
.pausebtn[hidden]{display:none}
.fc-resume{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:var(--hl-soft);font-weight:700;font-size:14.5px;margin-bottom:12px}
.fc-resume span{flex:1 1 180px}
.fc-resume[hidden]{display:none}

/* ---------- quiz icons: an illustration per quiz instead of a letter (js/qicons.js) ---------- */
.qico,.qchip-l,.bankpanel .bk-ico{padding:0;line-height:0;overflow:hidden;background:linear-gradient(160deg,#fff 0%,#F1ECFF 100%)!important}
.qico .qsvg,.qchip-l .qsvg,.bk-ico .qsvg{display:block;width:78%;height:78%;margin:auto;filter:drop-shadow(0 2px 0 rgba(23,22,43,.12))}
.qico,.qchip-l,.bankpanel .bk-ico{display:grid;place-items:center}
.quizgrid .qico{box-shadow:0 8px 14px -8px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(255,255,255,.9)}
.bankpanel .bk-ico{width:52px;height:52px;border-radius:16px}