/* The test page: loaded after style.css, which gives it the tokens, fonts, topbar and footer. */
.quiz { --lv: var(--accent); --lv-soft: rgba(138, 42, 27, .1); max-width: 720px; margin: 0 auto; padding: 5.2rem 1rem 3rem; }
.lv-easy { --lv: #8b6a2f; --lv-soft: rgba(139, 106, 47, .12); }
.lv-mid { --lv: #2d5f63; --lv-soft: rgba(45, 95, 99, .12); }
.lv-hard { --lv: #8a2a1b; --lv-soft: rgba(138, 42, 27, .11); }
.lv-exam { --lv: #4b3a85; --lv-soft: rgba(75, 58, 133, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lv-easy { --lv: #e2c283; --lv-soft: rgba(226, 194, 131, .13); }
  :root:not([data-theme="light"]) .lv-mid { --lv: #93cdc8; --lv-soft: rgba(147, 205, 200, .12); }
  :root:not([data-theme="light"]) .lv-hard { --lv: #f0a58c; --lv-soft: rgba(240, 165, 140, .12); }
  :root:not([data-theme="light"]) .lv-exam { --lv: #c3b2ff; --lv-soft: rgba(195, 178, 255, .13); }
}
:root[data-theme="dark"] .lv-easy { --lv: #e2c283; --lv-soft: rgba(226, 194, 131, .13); }
:root[data-theme="dark"] .lv-mid { --lv: #93cdc8; --lv-soft: rgba(147, 205, 200, .12); }
:root[data-theme="dark"] .lv-hard { --lv: #f0a58c; --lv-soft: rgba(240, 165, 140, .12); }
:root[data-theme="dark"] .lv-exam { --lv: #c3b2ff; --lv-soft: rgba(195, 178, 255, .13); }

.quiz .kicker { font: 700 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.quiz h1 { font: 600 clamp(2.3rem, 7vw, 3.6rem)/1.02 var(--display); margin: 0 0 .9rem; letter-spacing: -.01em; }
.quiz .deck { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 2rem; max-width: 36em; }
.challenge { font: 600 1rem/1.4 var(--sans); background: var(--lv-soft); border-left: 4px solid var(--accent); padding: .8rem 1rem; border-radius: 6px; margin: 0 0 1.6rem; }

/* level cards: a radio group, one row on wide screens, two by two on phones */
.setlabel { font: 700 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0 0 1.1rem; padding: 0; }
.lv { position: relative; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid var(--card-edge); border-radius: 14px; padding: .9rem .85rem .85rem; cursor: pointer; min-height: 112px; display: flex; flex-direction: column; gap: .25rem; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lv:hover { border-color: var(--lv); }
.lv[aria-checked="true"] { border-color: var(--lv); box-shadow: 0 0 0 2px var(--lv) inset, var(--shadow); background: linear-gradient(var(--lv-soft), var(--lv-soft)), var(--card); }
.lv .nm { font: 700 1.02rem/1.2 var(--sans); color: var(--lv); }
.lv .hn { font: 400 .84rem/1.3 var(--sans); color: var(--ink-3); }
.lv .tt { margin-top: auto; font: italic 400 .95rem/1.2 var(--serif); color: var(--ink-2); }
.lv .got { position: absolute; top: .55rem; right: .55rem; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.lv.earned .got { opacity: 1; transform: none; }
.lenrow { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; font: 500 .95rem/1.2 var(--sans); color: var(--ink-2); margin: 0 0 1.6rem; }
.linkish { font: inherit; color: var(--link); background: none; border: 0; padding: .6rem .2rem; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; min-height: 44px; }
.len { display: inline-flex; border: 1px solid var(--card-edge); border-radius: 999px; padding: 3px; gap: 2px; }
.len[hidden] { display: none; }
.len button { font: 600 .92rem/1 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 999px; min-width: 52px; min-height: 40px; cursor: pointer; }
.len button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.go { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn.big { font-size: 1.12rem; padding: 1rem 2.4rem; min-height: 56px; box-shadow: var(--shadow); }
.btn.ghost { color: var(--ink); background: transparent; border: 1.5px solid var(--card-edge); }
.btn:hover { filter: brightness(1.08); }
.earned-box { margin: 2.6rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--card-edge); }
.earned { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font: 600 .95rem/1.2 var(--sans); }
.earned li { display: flex; align-items: center; gap: .5rem; }
.earned li small { font-weight: 400; color: var(--ink-3); }
.earned li.none { font-weight: 400; color: var(--ink-3); }
.best-streak { font: 400 .9rem/1.3 var(--sans); color: var(--ink-3); margin: .7rem 0 0; }

/* the seal */
.seal .s-wax { fill: var(--lv); }
.seal .s-ring { fill: none; stroke: var(--paper); stroke-width: 2.4; opacity: .85; }
.seal .s-ring.thin { stroke-width: 1; }
.seal .s-num { fill: var(--paper); font: 700 34px var(--display); }

/* playing */
.playing .topnav, .playing .chip, .playing .quizhide { visibility: hidden; }
/* site quiz: category chips on the setup screen */
.catchips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.catchips a { display: inline-block; font: 600 .88rem/1 var(--sans); color: var(--ink-2); background: var(--card); border: 1.5px solid var(--card-edge); border-radius: 999px; padding: .6rem .95rem; text-decoration: none; min-height: 44px; }
.catchips a:hover { border-color: var(--lv); }
.catchips a[aria-current="true"] { border-color: var(--lv); background: var(--lv-soft); color: var(--ink); }
.play { padding-top: .4rem; }
.playhead { display: flex; align-items: center; gap: .8rem; font: 600 .88rem/1 var(--sans); color: var(--ink-3); margin: 0 0 .7rem; }
.playhead .lvname { color: var(--lv); }
.playhead .spacer { flex: 1; }
.streak { font: 700 .88rem/1 var(--sans); color: var(--lv); background: var(--lv-soft); border-radius: 999px; padding: .4rem .7rem; }
.streak::before { content: "✦ "; }
.streak.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.bar { height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; margin: 0 0 2rem; }
.bar i { display: block; height: 100%; background: var(--lv); border-radius: 3px; transition: width .35s ease; width: 0; }
.q { font: 600 clamp(1.55rem, 4.6vw, 2.15rem)/1.18 var(--display); margin: 0 0 1.5rem; outline: none; }
.q.k-first { font-size: clamp(1.45rem, 4.2vw, 1.9rem); }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.opt { width: 100%; display: flex; align-items: center; gap: .85rem; text-align: left; font: 500 1.08rem/1.3 var(--sans); color: var(--ink); background: var(--card); border: 1.5px solid var(--card-edge); border-radius: 12px; padding: .85rem 1rem; min-height: 58px; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.opts.long .opt { font: 400 1.04rem/1.35 var(--serif); }
.opt:hover:not(:disabled) { border-color: var(--lv); }
.opt:active:not(:disabled) { transform: scale(.99); }
.opt kbd { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--card-edge); font: 700 .8rem/1 var(--sans); color: var(--ink-3); }
.opt:disabled { cursor: default; }
.opt.right { border-color: #2f7a4a; background: rgba(47, 122, 74, .12); }
.opt.right kbd { background: #2f7a4a; border-color: #2f7a4a; color: #fff; }
.opt.wrong { border-color: #b3261e; background: rgba(179, 38, 30, .1); }
.opt.wrong kbd { background: #b3261e; border-color: #b3261e; color: #fff; }
.opt.chosen { border-color: var(--lv); background: var(--lv-soft); }
.opt:disabled:not(.right):not(.wrong):not(.chosen) { opacity: .55; }
.feedback { margin: 1.2rem 0 0; padding: .9rem 1rem; border-radius: 10px; font: 400 1rem/1.5 var(--serif); background: var(--paper-2); animation: rise .25s ease-out; }
.feedback b { font-family: var(--sans); }
.feedback.is-right b { color: #2f7a4a; }
.feedback.is-wrong b { color: #b3261e; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.playfoot { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0 0; min-height: 56px; }
.playfoot .keys { font: 400 .82rem/1.3 var(--sans); color: var(--ink-3); flex: 1; }
@media (hover: none) { .playfoot .keys, .opt kbd { display: none; } }

/* the result */
.result { text-align: center; }
.result #r-seal { display: flex; justify-content: center; margin: 0 0 .6rem; }
.result #r-seal svg { animation: stamp .55s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); }
@keyframes stamp { from { transform: scale(1.8) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.r-kicker { font: 700 .82rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--lv); margin: 0 0 .4rem; }
.r-title { font: 700 clamp(2.6rem, 10vw, 4.4rem)/1 var(--display); margin: 0 0 .6rem; outline: none; }
.r-sub { font: 400 1.1rem/1.45 var(--serif); color: var(--ink-2); margin: 0 auto .4rem; max-width: 30em; }
.r-streak { font: 600 .92rem/1.3 var(--sans); color: var(--lv); margin: 0 0 1.6rem; min-height: 1.3em; }
.r-share { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.4rem; align-items: center; text-align: left; background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; padding: 1rem; margin: 0 0 1.4rem; }
.r-share img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); display: block; }
.r-share img[hidden] { display: none; }
.r-actions { display: flex; flex-direction: column; gap: .55rem; align-items: stretch; }
.r-actions .btn, .r-actions a.btn { text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.r-copied { font: 400 .85rem/1.3 var(--sans); color: var(--ink-3); min-height: 1.2em; margin: 0; }
.r-next { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 2.4rem; }
.r-review-h { font: 600 1.6rem/1.2 var(--display); text-align: left; margin: 0 0 .8rem; }
.r-review { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: .7rem; }
.r-review li { background: var(--card); border: 1px solid var(--card-edge); border-left: 4px solid #b3261e; border-radius: 10px; padding: .8rem 1rem; }
.r-review li.ok { border-left-color: #2f7a4a; }
.r-review p { margin: 0 0 .3rem; }
.r-review .rq { font: 600 1.05rem/1.3 var(--display); }
.r-review .ra { font: 400 .92rem/1.3 var(--sans); color: var(--ink-3); }
.r-review .rx { font: 400 .98rem/1.45 var(--serif); margin: 0; }
.back-atlas { margin: 2.4rem 0 0; font: 500 .95rem/1.3 var(--sans); }
@media (max-width: 640px) {
  .quiz { padding: 4.4rem 16px 2.4rem; }
  .levels { grid-template-columns: 1fr 1fr; }
  .lv { min-height: 100px; }
  .btn.big { width: 100%; }
  .r-share { grid-template-columns: 110px minmax(0, 1fr); gap: .9rem; padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .result #r-seal svg, .streak.pop, .feedback { animation: none; } }
.r-actions a[hidden] { display: none; }
.lv .pool { font: 600 .78rem/1.2 var(--sans); color: var(--lv); opacity: .85; }
.go .fresh { font: 400 .88rem/1.4 var(--sans); color: var(--ink-3); margin: 0; flex: 1 1 16em; }

.bar i.w0{width:0%}.bar i.w1{width:2.5%}.bar i.w2{width:5%}.bar i.w3{width:7.5%}.bar i.w4{width:10%}.bar i.w5{width:12.5%}.bar i.w6{width:15%}.bar i.w7{width:17.5%}.bar i.w8{width:20%}.bar i.w9{width:22.5%}.bar i.w10{width:25%}.bar i.w11{width:27.5%}.bar i.w12{width:30%}.bar i.w13{width:32.5%}.bar i.w14{width:35%}.bar i.w15{width:37.5%}.bar i.w16{width:40%}.bar i.w17{width:42.5%}.bar i.w18{width:45%}.bar i.w19{width:47.5%}.bar i.w20{width:50%}.bar i.w21{width:52.5%}.bar i.w22{width:55%}.bar i.w23{width:57.5%}.bar i.w24{width:60%}.bar i.w25{width:62.5%}.bar i.w26{width:65%}.bar i.w27{width:67.5%}.bar i.w28{width:70%}.bar i.w29{width:72.5%}.bar i.w30{width:75%}.bar i.w31{width:77.5%}.bar i.w32{width:80%}.bar i.w33{width:82.5%}.bar i.w34{width:85%}.bar i.w35{width:87.5%}.bar i.w36{width:90%}.bar i.w37{width:92.5%}.bar i.w38{width:95%}.bar i.w39{width:97.5%}.bar i.w40{width:100%}