/* quiz.css — Daily Quiz + Info of the Day (educational dashboard features) */

/* --- Dashboard entry buttons (row of two, under the Community button) --- */
.dash-edu-row{display:flex;gap:12px;margin:0 16px 16px}
.dash-edu-btn{
  position:relative;flex:1;display:flex;flex-direction:row;align-items:center;gap:14px;
  min-height:68px;box-sizing:border-box;padding:10px 14px;
  background:#fdf8f0;color:#5e0c23;border:2px solid #c9a550;border-radius:12px;
  font-family:var(--font-display);cursor:pointer;text-align:left;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)   /* candy (2026-08-27) */
}
.dash-edu-btn:active{transform:scale(0.95);box-shadow:0 4px 14px rgba(0,0,0,0.3)}
/* Sized by HEIGHT so tall art (grape) hugs its own width — no square-box air, text sits closer. */
.dash-edu-icon{height:44px;width:auto;max-width:34%;object-fit:contain;flex-shrink:0}
.dash-edu-icon.star{height:35px}   /* quiz star 20% smaller */
.dash-edu-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dash-edu-label{font-size:16px;letter-spacing:0.8px;text-transform:uppercase;line-height:1.15}
.dash-edu-sub{font-size:10.5px;letter-spacing:.5px;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;text-transform:uppercase;line-height:1.2}

/* --- Maroon page with a centered white card + logo (mirrors the WINE ME CASINO entry screen) --- */
.quiz-overlay{
  position:fixed;inset:0;background:#5e0c23;z-index:322;
  display:none;flex-direction:column;align-items:center;
  overflow-y:auto;padding:24px 0
}
.quiz-overlay.open{display:flex}
/* Keep the logo+card group vertically centered when it fits, scrollable to the top when taller.
   Two zero-height pseudo spacers carry the auto margins instead of :first-child/:last-child: on
   #quizOverlay the first two children (the done-screen logo, the grape row) are display:none on
   most screens, yet the selector still matched them, so the TOP auto margin landed on a box that
   was not in the flex flow. Only the bottom one survived and the card was pinned to the top of the
   screen — visibly higher than the Academie card, which is its own :first-child and centred fine.
   Pseudo-elements are always flex items here, so both ends keep their auto margin whatever is
   hidden. (justify-content:center is not an option: screens.css forces flex-start so an
   overflowing card scrolls from its top instead of being clipped — auto margins collapse to 0
   exactly in that case, which is the behaviour we want.) */
.quiz-overlay::before,.quiz-overlay::after{content:"";flex:0 0 auto;height:0}
.quiz-overlay::before{margin-top:auto}
.quiz-overlay::after{margin-bottom:auto}
/* ...and the shared logo-overlay rules in screens.css (html .wm-screen-logo-wrap + * / ~ :last-child)
   are switched off here, for the same reason: they hand a THIRD auto margin to the card, so the
   free space was being split three ways instead of two and the card floated a third of the way up.
   The quiz overlay centres its whole visible group — logo (done screen), grape row, card — as one
   block; the other logo overlays keep the pinned-logo behaviour those rules were written for. */
.quiz-overlay > .wm-screen-logo-wrap + *{margin-top:0}
.quiz-overlay > .wm-screen-logo-wrap ~ .quiz-modal{margin-bottom:16px}   /* restates .quiz-modal own gap — a plain 0 here would also eat it */
/* WITH the brand logo showing (quiz-logo-mode: the already-played screen), the overlay mimics the
   hub screens instead (requested 2026-08-26, matched against WINE ME COMMUNITY): logo pinned near
   the top — its shared 16px margin-top — and the CARD alone centred in the remaining space. The
   group-centring spacers are switched off for this mode only. */
/* Academy: the title level must not drift with the card height (requested 2026-08-28) — the
   title+card group pins to the top like the tallest tab, spare space stays below the card. */
#infoDayOverlay::before{margin-top:0}
/* …and the card no longer clings to that pinned title: a card shorter than the screen centres in
   the space below it, so short pages (the AOC search, the Savoir menu) sit at eye level instead of
   stranded at the top. A full-height card is unaffected — it has no free space to share.
   Requested 2026-08-29. */
#infoDayOverlay::after{margin-bottom:0}
#infoDayOverlay > .quiz-modal{margin-top:auto;margin-bottom:auto}
/* Done screen: the free space splits 1:2 — the score card rides a third of the way up instead
   of dead centre (requested 2026-08-30). */
/* Same treatment for the INTRO and the LEADERBOARD (requested 2026-08-30): card pinned to the top
   and stretched into the whole screen instead of floating in the middle. The intro centres its
   short content inside; the leaderboard list flows from the top and simply gets more room. */
.quiz-overlay.quiz-intro-mode::before,.quiz-overlay.quiz-rating-mode::before{margin-top:0;flex:0 0 0}
.quiz-overlay.quiz-intro-mode::after,.quiz-overlay.quiz-rating-mode::after{margin-bottom:0;flex:0 0 0}
.quiz-overlay.quiz-intro-mode > .quiz-modal,.quiz-overlay.quiz-rating-mode > .quiz-modal{flex:1 1 auto;margin-bottom:6px}
.quiz-overlay.quiz-intro-mode .quiz-body{min-height:100%;display:flex;flex-direction:column;justify-content:center}
/* …and that centred block rides a little ABOVE dead centre, so the title and its tagline sit
   higher in the white card (requested 2026-08-30). A bottom padding on the centring box is what
   does it: the free space is then split around a shorter box, lifting the content by half of it. */
.quiz-overlay.quiz-intro-mode .quiz-body{padding-bottom:16px}
/* Done screen: title pinned at the top and the card stretched into whatever is left, so the
   score sheet fills the screen instead of floating in the middle (requested 2026-08-30). */
.quiz-overlay.quiz-done-mode::before{margin-top:0;flex:0 0 0}
.quiz-overlay.quiz-done-mode::after{margin-bottom:0;flex:0 0 0}
.quiz-overlay.quiz-done-mode > .quiz-modal{flex:1 1 auto;margin-bottom:6px}
/* …and the score sheet sits centred in that stretched card: min-height + flex centring grows
   instead of clipping when the content is taller than the card. */
.quiz-overlay.quiz-done-mode .quiz-body{min-height:100%;display:flex;flex-direction:column;justify-content:center}
/* …and it rides a little ABOVE dead centre, so «Score 7/10» sits higher in the card
   (requested 2026-08-30) — same bottom-padding trick as the intro. */
.quiz-overlay.quiz-done-mode .quiz-body{padding-bottom:22px}
.quiz-overlay.quiz-logo-mode::before{margin-top:0}
.quiz-overlay.quiz-logo-mode::after{margin-bottom:0}
/* …but the card is NOT centred in the space under the logo any more (requested 2026-08-30): that
   space is what is left after the mark and the screen title, so the card ended up a long way
   below the middle of the SCREEN — 122px of empty burgundy under the title, and the card centre
   96px low. A fixed gap under the title instead puts the card centre on the screen middle, and
   the spare space now falls below it. */
.quiz-overlay.quiz-logo-mode > .quiz-modal{margin-top:28px;margin-bottom:auto}
.quiz-modal{
  position:relative;background:#fff;border-radius:24px;
  width:90%;max-width:420px;margin:0 auto 16px;
  border:2px solid #c9a550;box-shadow:0 8px 32px rgba(0,0,0,0.3);
  animation:quizPop .28s cubic-bezier(.2,.8,.2,1)
}
/* Screen title on the burgundy, above the card (2026-08-28) — the quiz first, the Academy since
   later the same day; both cards lost their in-card maroon header. */
.quiz-screen-title{font-family:var(--font-display);font-size:24px;letter-spacing:3.5px;color:#e8d5a0;text-align:center;text-transform:uppercase;margin:0 0 14px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.quiz-overlay.quiz-review-mode .quiz-screen-title,
.quiz-overlay.quiz-rating-mode .quiz-screen-title,
.quiz-overlay.quiz-intro-mode .quiz-screen-title{display:none}   /* those cards carry their own title (2026-08-28) */
#quizOverlay .quiz-modal-inner{border-radius:22px}
/* The intro must fit an iPhone without inner scroll (2026-08-29): VOIR LE CLASSEMENT was falling
   below the fold. The card gets more height — slimmer overlay paddings — and sits higher. */
html #quizOverlay{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}   /* 74 just clears the 64px nav pill; every px goes to the card (tightened again 2026-08-30) */   /* top inset: the overlay is fixed, so the notch must be counted here, not via body padding */
/* The INTRO card stops the same distance above the nav pill as the Academy card does (requested
   2026-08-30): #infoDayOverlay clears 90px, so the intro takes 82 here plus the card own 8px
   margin below. Scoped to the intro — the question and done screens keep the tighter 74. */
html #quizOverlay.quiz-intro-mode{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
/* The DONE card is laid out on exactly the Academy geometry (requested 2026-08-30): the same
   24px above the screen title — so QUIZ DU JOUR and ACADEMIE DU VIN sit at one height — and the
   same 90px of clearance below (82 here + the card own 8px margin), which makes the two white
   cards the same length on the phone. */
html #quizOverlay.quiz-done-mode{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
/* The leaderboard ends on the same line as its two siblings (requested 2026-08-30) — same 90px
   above the nav pill: 82 here plus the card own 8px margin. Its list simply scrolls 8px more. */
html #quizOverlay.quiz-rating-mode{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
#quizOverlay .quiz-modal{margin-bottom:8px}
#quizOverlay .quiz-modal-inner{padding-bottom:14px}   /* no header above it any more; 22 = card 24 − its 2px border */
/* Question progress: ten grape bunches ABOVE the card, dim until their question is behind you
   (requested 2026-08-25). The row mirrors the card's own width/centring so its ends line up with
   the card's edges, and space-between spreads the ten across that full span. The icon is used as a
   MASK, not an image — the source art is a coloured vector, and a mask takes only its silhouette,
   so one file yields any colour and opacity we want. :empty collapses the row on every
   non-question screen, so nothing shifts anywhere else. */
.quiz-overlay .quiz-grapes{   /* two-class selector on purpose: it must out-rank the .wm-screen-logo-wrap + * {margin-top:0} neutraliser above, which would otherwise zero the 32px bias */
  display:flex;justify-content:space-between;align-items:flex-end;
  /* width/max-width come from the shared card rule in screens.css — one source, so the two can
     never drift apart. Bottom margin lifts the row clear of the card (requested). The TOP margin
     biases the centred grapes+card group ~16px DOWN on question screens (requested 2026-08-26):
     the overlay centres via auto margins on its ::before/::after spacers, so a fixed 32px here is
     taken out of the shared free space and the group lands 32/2 lower than dead centre. Scoped to
     question screens for free — this row is display:none everywhere else. */
  margin:32px auto 28px;
  padding:0 3px;box-sizing:border-box;   /* the end bunches sit just inside the card's rounded corners; trimmed from 6px to buy gap room at the larger size */
}
.quiz-grapes:empty{display:none}
.quiz-grape{
  width:31px;height:42px;background-color:#fff;opacity:.2;flex:0 0 auto;   /* +20% again (requested) */
  -webkit-mask:url(../assets/icon-btn-grape.svg) center/contain no-repeat;
          mask:url(../assets/icon-btn-grape.svg) center/contain no-repeat;
  transition:opacity .45s ease,filter .45s ease,transform .45s ease;
}
.quiz-grape.done{opacity:1;background-color:#f0dca2}   /* answered: golden cream (warmed up on request), so plain white is left to mean "you are here" */
/* Verdict colours: a bunch answered RIGHT turns green, a wrong or timed-out one red — the SAME
   pair as the review screen's verdict dots below (.quiz-rv-num), matched on request 2026-08-26
   (first cut was bright green / pink). Cream survives only as the no-verdict fallback. */
.quiz-grape.done.good{background-color:#3ba342}   /* a notch brighter than the verdict-dot green (requested 2026-08-26) — the dark #2e7d32 sank into the burgundy backdrop */
.quiz-grape.done.bad{background-color:#ae182b}
/* The bunch you are on glows AND grows. drop-shadow follows the masked silhouette, not the box,
   so the halo is grape-shaped. The halo itself is fixed — the animation moves the element opacity
   instead (see below), which multiplies the drop-shadows along with the bunch. */
.quiz-grape.now{
  opacity:1;   /* the steady value: prefers-reduced-motion kills the animation and lands here */
  /* +26% over the row size (20%, then the extra 5% asked for after seeing it on the phone).
     transform, not width/height: a scaled flex item keeps its layout box, so the other nine
     bunches stay exactly where they are. Growing from the bottom edge keeps all ten sitting on
     the same baseline (the row is align-items:flex-end). */
  transform:scale(1.26);transform-origin:center bottom;
  filter:drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 13px rgba(255,255,255,.85)) drop-shadow(0 0 24px rgba(255,255,255,.6));
  animation:quizGrapeGlow 1.9s ease-in-out infinite;
}
/* The WHOLE bunch breathes from 20% up to 100% and back (requested): animating element opacity
   rather than the shadow colours means the grape and its halo rise and fade together, instead of
   a fixed-brightness bunch wearing a flickering rim. At the low point it briefly reads as faint as
   the questions still ahead — that is the trade: what marks "you are here" is the one bunch that
   moves, plus its glow and its size. */
@keyframes quizGrapeGlow{
  0%,100%{opacity:.2}
  50%    {opacity:1}
}
@media (prefers-reduced-motion:reduce){ .quiz-grape.now{animation:none} }
/* Ten bunches need 10x their width plus gaps, and the row is 90% of the screen. Measured at the
   full 31px: 375px screens leave 2.4px between bunches (tight but clear), 390px leave 3.9px, and a
   430px phone 7.9px. Below 370px it stops working, so the size steps down instead of touching. */
@media (max-width:370px){ .quiz-grape{width:27px;height:36px} }
@media (max-width:330px){ .quiz-grape{width:23px;height:31px} }
.quiz-modal-inner{padding:10px 20px 20px}
/* The Academy card reads as an article, so its text gets more air above the first line and below
   the last than the quiz card needs (requested 2026-08-28). The first-child margin reset keeps
   that air identical on every tab — otherwise a leading heading (Savoir PRATIQUE) adds its own. */
#infoDayOverlay .quiz-modal-inner{padding-top:26px;padding-bottom:30px}
/* Starts at top:0 in the native shell (main.css) — so the notch is counted here. */
html #infoDayOverlay{padding-top:calc(24px + env(safe-area-inset-top,0px))}
#infoDayOverlay .quiz-body > *:first-child:not(.info-grape-art){margin-top:0}   /* :not — the floated art keeps its own -2px nudge, it must stay level with the name */
/* Keyboard up (html.wm-kb, set by appnav.js): the nav pill is hidden, so its bottom clearance is
   dead space — reclaim it, and let the card FILL what is left instead of shrinking to a two-row
   stub when the search narrows the list. The card then ends right where the keyboard starts. */
html.wm-kb #infoDayOverlay{padding-bottom:12px}
html.wm-kb #infoDayOverlay .quiz-modal{height:100%}
/* The card is CAPPED to the space above the bottom nav bar and its content scrolls INSIDE the
   card (maroon header + tab bar stay pinned) instead of the whole overlay scrolling. The bar can
   no longer sit on the last lines, and reading never depends on the overlay itself being
   scrollable (iOS WKWebView build 3: the Academy card could not be scrolled to the end and the bar
   covered its bottom — and the quiz leaderboard, a long list in the same kind of card, had exactly
   the same dead scroll). max-height:100% = the overlay's content box, i.e. the viewport minus the
   top padding and the nav-bar clearance (which includes the home-indicator inset); when siblings
   share that box (the quiz grape row, the done-screen logo) the card shrinks below the cap instead
   — min-height:0 is what lets a flex item shrink past its content. */
html #infoDayOverlay{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.quiz-overlay .quiz-modal{display:flex;flex-direction:column;max-height:100%;min-height:0}
.quiz-overlay .info-tabs{flex:0 0 auto}
.quiz-overlay .quiz-modal-inner{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:0 0 22px 22px}
/* Wine Academy tab bar (Daily grape / Daily fact) — sits under the header on the white card. */
.info-tabs{display:flex;align-items:stretch;background:#fff;border-bottom:1.5px solid #ecdcc0;padding:0 10px;border-radius:22px 22px 0 0}   /* now the top of the card (2026-08-28): 22 = card 24 − its 2px border */
/* Two lines per tab, but «DU JOUR» (the localized tail) NEVER splits (requested 2026-08-27):
   the label carries a <br> after the first word and the tail rides an .info-tab-l2 nowrap span.
   Column-flex centres the one-word SAVOIR against its two-line siblings. */
.info-tab{
  flex:1;min-width:0;padding:9px 5px;background:none;border:none;border-bottom:2.5px solid transparent;
  display:flex;flex-direction:column;justify-content:center;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;line-height:1.25;
  text-transform:uppercase;letter-spacing:1.2px;color:#b29c74;text-align:center;
  cursor:pointer;transition:color .15s,border-color .15s
}
.info-tab-l2{white-space:nowrap;display:block}
.info-tab.on{color:#5e0c23;border-bottom-color:#c9a550;font-weight:700}
.info-tab:active{transform:scale(0.98)}
/* Daily Fact content */
.fact-cat{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a1538;font-weight:700;margin-bottom:6px;font-family:'Helvetica Neue',Arial,sans-serif}
.fact-title{font-family:var(--font-display);font-size:19px;color:#5e0c23;line-height:1.25;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.fact-body{font-size:14px;line-height:1.6;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
.fact-p{margin:0 0 11px}
.fact-p:last-child{margin-bottom:0}
@keyframes quizPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.quiz-body{position:relative;overflow:visible}
/* Big star that flies from the centre into its streak slot when a day is awarded */
.quiz-star-fly{position:absolute;left:0;top:0;object-fit:contain;pointer-events:none;z-index:6;transform-origin:center;filter:saturate(1.8) brightness(.97) drop-shadow(0 0 12px rgba(201,165,80,.95))}

/* --- Centered panels (intro / done / already-played) --- */
.quiz-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:4px 6px}
.quiz-big-emoji{font-size:44px;line-height:1}
.quiz-grape-img{width:52px;height:auto;display:block}
.quiz-done-title{font-family:var(--font-display);font-size:22px;color:#5e0c23;letter-spacing:1px;text-transform:uppercase}
.quiz-tagline{font-family:var(--font-display);font-size:17px;line-height:1.35;color:#5e0c23;max-width:330px;letter-spacing:.3px}
.quiz-rules{font-size:12.5px;line-height:1.5;color:#6b4e1a;max-width:340px}
.quiz-intro-sub{font-size:11px;line-height:normal;letter-spacing:1.5px;text-transform:uppercase;color:#888;max-width:300px;margin:-12px auto 0}   /* line-height:normal = the exact leading of .community-sub; -12px cancels the .quiz-center 12px gap so only the title own 6px margin is left — the exact spacing of the Community card (2026-08-28) */
.quiz-intro-sub strong{font-weight:700;color:#666}   /* bold alone barely reads at 11px on #888, so it darkens too */
.quiz-sub-l2{display:block;margin-top:5px}   /* 2nd line as its own block: the gap is set here, not by line-height */
.quiz-done-note{font-size:14.5px}
/* Challenge intro */
.quiz-intro-title{font-family:var(--font-display);font-size:21px;line-height:1.25;color:#5e0c23;letter-spacing:1px;text-transform:uppercase}
/* Today's quiz attempts — three grape marks over the streak stars (2026-08-28). Full colour
   while the run is still available, grey once it has been played (inverted 2026-08-30). */
.quiz-plays-row{display:flex;justify-content:center;gap:0;margin:2px 0 -6px}   /* tighter cluster; the negative bottom eats the grape art's own bottom padding so the stars sit close (requested 2026-08-28) */
.quiz-plays-left{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:13px;color:#b0851c;letter-spacing:.5px;text-align:center;margin:5px 0 0}   /* air under the grapes (widened 2026-08-30) */
.quiz-plays-left + .quiz-streak{margin-top:3px}   /* air between the caption and the streak stars (widened 2026-08-30) */
/* The done card packs its rows tighter than the intro (.quiz-center gap 8 vs 11), so the grape
   block buys those 3px back on both sides — the air around the caption then reads the same on
   the two screens: 10px under the grapes, 14px above the stars (requested 2026-08-30). */
.quiz-overlay.quiz-done-mode .quiz-plays-left{margin-top:10px}
.quiz-overlay.quiz-done-mode .quiz-plays-left + .quiz-streak{margin-top:12px}   /* the stars stand clear of the grape block (requested 2026-08-30) */
.quiz-play-grape{width:50px;height:50px;object-fit:contain;filter:grayscale(1);opacity:.38;transition:filter .35s,opacity .35s,transform .35s}
.quiz-play-grape.on{filter:none;opacity:1;transform:scale(1.06)}
.quiz-benefit-ic.grape{width:34px;height:34px;object-fit:contain}
.quiz-benefits{display:flex;flex-direction:column;align-items:center;margin:10px auto 4px;   /* a touch more air above the box (requested 2026-08-28) */padding:10px 12px 20px;border:1.5px solid #e0c878;border-radius:12px;background:#fffdf7;width:264px;box-sizing:border-box;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}
.quiz-benefits-inner{display:flex;flex-direction:column;align-items:flex-start;gap:13px}   /* 15→13 (2026-08-30): short viewports must fit VOIR LE CLASSEMENT above the fold */
.quiz-benefits-inner .quiz-benefit:nth-child(2){margin-top:-5px}   /* the GB row sits a touch closer to the streak row (requested 2026-08-30) */
.quiz-benefit{display:flex;align-items:center;gap:18px;font-size:14.5px;line-height:1.35;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
.quiz-benefit-ic{width:48px;height:45px;object-fit:contain;flex:0 0 48px}
/* Idle icon motion: banknote + glass pulse slowly, the star rotates. */
.quiz-benefit-ic:not(.star){animation:quizIcPulse 2.6s ease-in-out infinite}
@keyframes quizIcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes quizIcSpin{from{transform:scale(1.15) rotate(0)}to{transform:scale(1.15) rotate(360deg)}}
/* Cross-fading frames: banknote cycles 10↔20 (4s), glass cycles red→white→rosé (6s), 2s each. */
.quiz-swap{position:relative;display:inline-block}
.quiz-swap .swap-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.money .swap-frame{animation:quizSwap2 4s ease-in-out infinite}
.money .swap-frame:nth-child(2){animation-delay:-2s}
.glass .swap-frame{animation:quizSwap3 6s ease-in-out infinite}
.glass .swap-frame:nth-child(2){animation-delay:-4s}   /* white shows 2–4s */
.glass .swap-frame:nth-child(3){animation-delay:-2s}   /* rosé shows 4–6s */
@keyframes quizSwap2{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes quizSwap3{0%,28%{opacity:1}34%,94%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.quiz-benefit-ic{animation:none!important}.swap-frame{animation:none!important}.money .swap-frame:not(:first-child),.glass .swap-frame:not(:first-child){opacity:0}}
.quiz-benefit-txt{text-align:left}
.quiz-benefit strong{font-weight:700;color:#3d2b10}
/* long labels (streak / questions) break onto a second line, left-aligned */
.quiz-benefit strong.up{display:block;text-transform:uppercase}
.quiz-benefit-ic.star{transform:scale(1.15);animation:quizIcSpin 6s linear infinite}
/* Intro action buttons — CTA + Leaderboard, equal width, stacked */
.quiz-intro-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:264px;margin-top:2px}
.quiz-intro-actions .quiz-cta{width:100%;margin-top:0;padding:17px 26px;font-size:16px;border:2px solid #c9a550}
/* The quiet secondary button, deliberately unlike a CTA (requested): the plain UI face instead of
   the display one, smaller type, thinner rule and a much narrower box. Used on the intro and on
   the already-played screen, so it is a modifier class rather than a container-scoped rule —
   both parents are flex columns, which is what align-self:center needs. */
.quiz-btn-gold.quiz-btn-quiet,.quiz-btn-outline.quiz-btn-quiet,.quiz-btn-bordeaux.quiz-btn-quiet{   /* two classes each, so it outranks the single-class base rules wherever they sit in the file */
  width:74%;align-self:center;margin-top:0;padding:9px 16px;   /* 74%: the longest label (EN "See the leaderboard") needs 70% to stay on one line */
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:1.1px;
  border-width:1.5px;
}
/* Pale gold ground with GOLD lettering (requested). The label is a deep antique gold, not the
   brand's bright #c9a550: on this pale a ground the bright one measures 2:1 and is unreadable,
   while this reads as gold and clears 4.9:1. */
.quiz-btn-gold{width:100%;padding:13px 26px;background:#faeecd;border:2px solid #c9a550;border-radius:10px;color:#82631c;font-family:var(--font-display);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s}
.quiz-btn-gold:active{transform:scale(0.96);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.quiz-done-streak{font-size:13px;font-weight:700;color:#b8651b}
/* Daily-streak stars — a week of 7 that fill gold, + "+N days" total */
.quiz-streak{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:4px 0 0;width:100%}
.quiz-streak-stars{display:flex;gap:6px;justify-content:center;flex:1 1 100%;max-width:396px;margin:0 auto}
/* Fixed size (NOT flex-grow) so the size is directly controllable — with flex:1 the stars
   just filled the row width and max-width never bound on narrow screens. */
.quiz-star{flex:0 0 auto;width:31px;height:31px;object-fit:contain}
.quiz-star.on{filter:drop-shadow(0 1px 2px rgba(157,126,26,.35))}
.quiz-star.off{opacity:1}
.quiz-streak-days{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:15px;color:#b0851c;letter-spacing:.5px}
/* .award is now only a locator for the fly-in animation (see _quizAnimateStreakAward); the star's
   pop is done in JS on landing so the CSS animation no longer fights the JS opacity control. */
.quiz-final-score{font-family:var(--font-display);font-size:22px;color:#b0851c}
/* Correction screen: the score belongs to the title above it, so the two close up. Three things
   fed that gap — .quiz-center's 12px, the title's own 6px bottom margin from the shared title rule
   in screens.css, and nothing else; dropping the margin and pulling 6px back leaves 6px total.
   Scoped to .quiz-review: the done screen stacks the same two elements but keeps its own rhythm. */
.quiz-review .quiz-done-title{margin-bottom:0}
.quiz-review .quiz-final-score{margin-top:-6px}
/* Done screen 2026-08-25: the score is the headline — a big rich-gold number over a smaller /10,
   an emotional verdict line under it, and a cream separator before the streak block. */
.quiz-final-num{font-size:44px;color:#c9a550;line-height:1}
.quiz-final-total{font-size:20px;color:#b0851c;margin-left:2px}
.quiz-final-label{font-size:20px;color:#b0851c;margin-right:7px}   /* the word "Score" beside the number */
/* Verdict: the UI face in italic and light, so the one editorial line on the screen stays a
   caption under the score rather than a second heading (requested 2026-08-25). */
/* A full sentence now, not a two-word title, so it sets smaller and wraps as a caption. max-width
   keeps the measure readable instead of running the full card width. */
.quiz-verdict{font-family:'Helvetica Neue',Arial,sans-serif;font-style:italic;font-size:12.5px;font-weight:400;color:#8a6a20;letter-spacing:0.1px;line-height:1.45;max-width:300px;margin-top:-4px}
.quiz-done-sep{width:78%;height:1.5px;background:#e8d5a0;border-radius:1px;margin:2px auto 0}
.quiz-btn-full{width:100%}
/* The cream brand mark above the card. Off on the done screen (requested), on for the
   already-played one, which lost the bordeaux mark that used to sit inside its card. */
.quiz-done-logo{display:none;text-align:center}
.quiz-overlay.quiz-logo-mode .quiz-done-logo{display:block}
/* No size override here on purpose: the mark takes the app-wide 80px from img.wm-screen-logo
   (screens.css), so it matches the logo on every other screen (requested 2026-08-25). */
/* The done screen packs score + verdict + cells + streak + 4 actions — a tighter rhythm
   keeps it on one phone screen (or close) without touching the other quiz screens. */
.quiz-overlay.quiz-done-mode .quiz-center{gap:8px}
/* The done title keeps the shared 14px gap: with the Academy geometry above, that is what makes
   the two white cards exactly the same length (2026-08-30 — was a tighter 8px when the card had
   to stretch for height). */
.quiz-overlay.quiz-done-mode .quiz-net-cell{padding:8px 14px}
/* The score is the headline now that the title is gone: one even size across "Score 9/10" — the
   outsized digit is dropped, the phrase as a whole grows (requested 2026-08-25). Scoped to the
   done screen; the correction screen renders the same class as a plain sentence. */
.quiz-overlay.quiz-done-mode .quiz-final-score{font-size:29px;line-height:1.15}
.quiz-overlay.quiz-done-mode .quiz-final-num,
.quiz-overlay.quiz-done-mode .quiz-final-total,
.quiz-overlay.quiz-done-mode .quiz-final-label{font-size:inherit;line-height:inherit;color:inherit}   /* one colour across "Score 9/10" (requested) */
.quiz-overlay.quiz-done-mode .quiz-final-label{margin-right:9px}
/* NOUVEAU QUIZ leads the stack and is the only full-size action (requested). */
.quiz-btn-full.quiz-btn-bordeaux{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:12px 20px;font-size:15.5px;letter-spacing:1.8px;border-width:2px;
  box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117);   /* floating (2026-08-27) */
}
.quiz-already-score{font-size:17px;color:#8a6a20;font-weight:700}   /* the day's runs are the point of this screen — 13px buried them (requested) */
.quiz-cta{
  margin-top:6px;padding:13px 26px;background:linear-gradient(135deg,#5e0c23,#8a1538);
  color:#e8d5a0;border:2px solid #e8d5a0;border-radius:10px;
  font-family:var(--font-display);font-size:14px;letter-spacing:1.5px;cursor:pointer;transition:transform .15s;
  text-transform:uppercase
}
.quiz-cta:active{transform:scale(0.96)}
/* Tighten the air above the FERMER/close button on the done + already-played screens
   (direct child of .quiz-center) — pulls it up against the 12px flex gap. */
.quiz-center > .quiz-cta{margin-top:-4px}
.quiz-link{background:none;border:none;padding:4px;color:#999;font-size:12px;letter-spacing:1.5px;font-weight:400;text-transform:uppercase;cursor:pointer;font-family:'Helvetica Neue',Arial,sans-serif}   /* quiet grey, unbolded — RETOUR / FERMER are exits, not actions */
/* Secondary action buttons (Review / Leaderboard) under the primary CTA */
.quiz-btn-row{display:flex;gap:10px;width:100%;margin-top:2px}
.quiz-btn-row .quiz-btn-outline,.quiz-btn-row .quiz-btn-gold,.quiz-btn-row .quiz-btn-bordeaux,.quiz-btn-row .quiz-btn-grey{flex:1;width:auto;min-width:0;padding-left:8px;padding-right:8px}
/* One type size across a paired row (CORRECTION 13px vs CLASSEMENT 14px read uneven). Scoped to
   the row — the intro screen's full-width gold button keeps its own scale. */
.quiz-btn-row .quiz-btn-gold{font-size:13px}
.quiz-btn-row .quiz-btn-grey{margin-top:0}
/* Done screen (2026-08-24, revised): CORRECTION white in a bordeaux frame (.quiz-btn-outline)
   beside the gold CLASSEMENT; underneath, the grey FERMER pairs with a bordeaux NOUVEAU QUIZ
   (.quiz-btn-bordeaux). Every button on the screen carries a soft resting shadow. */
.quiz-btn-bordeaux{padding:11px 26px;background:linear-gradient(135deg,#5e0c23,#8a1538);border:2px solid #c9a550;border-radius:10px;color:#e8d5a0;font-family:var(--font-display);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s}
.quiz-btn-bordeaux:active{transform:scale(0.96)}
/* Day spent: NOUVEAU QUIZ greys out instead of inviting a run the cap will refuse
   (2026-08-30). !important outguns the global button shadow and the bordeaux gradient,
   the same way the lobby greys its disabled COMMENCER. */
.quiz-btn-bordeaux:disabled{background:#d8d3cc!important;border-color:#c9c3ba!important;color:#8d867c!important;box-shadow:none!important;transform:none!important;cursor:default}
/* FERMER is a text button and nothing else (requested): no fill, no frame, and opted out of the
   global button shadow — a shadow under a bare word reads as dirt. */
.quiz-btn-grey{
  margin-top:6px;padding:13px 26px;background:transparent;border:none;box-shadow:none;
  color:#6f6a62;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:transform .15s;
}
.quiz-btn-grey:active{transform:scale(0.96)}
.quiz-center > .quiz-btn-grey{margin-top:8px}   /* a little lower than the block above it (was -4px) */
/* Soft resting shadow on the done-screen buttons; it deepens on press like the rest of the app. */
.quiz-btn-bordeaux,.quiz-btn-row .quiz-btn-gold,.quiz-btn-row .quiz-btn-outline{box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}   /* floating (2026-08-27); .quiz-btn-grey stays a bare text button */
.quiz-btn-bordeaux:active,.quiz-btn-grey:active,.quiz-btn-row .quiz-btn-gold:active,.quiz-btn-row .quiz-btn-outline:active{box-shadow:0 1px 3px rgba(94,12,35,0.24)}
.quiz-btn-outline{padding:11px 26px;background:#fff;border:2px solid #8a1538;border-radius:10px;color:#5e0c23;font-family:var(--font-display);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s,background .15s}
.quiz-btn-outline.solo{flex:0 0 auto}
@media (hover: hover){.quiz-btn-outline:hover{background:#fdf6e3}}
.quiz-btn-outline:active{transform:scale(0.96)}
/* Post-quiz review */
.quiz-rv-list{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.quiz-rv-item{padding:11px 13px;border:1.5px solid #eee3cf;border-radius:10px;background:#fffdf7}
.quiz-rv-q{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.4;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
/* Verdict dot: a filled green/red circle instead of the old ✓/✗ glyph (user request 2026-08-25).
   align-self + margin-top pin it to the optical centre of the question's first line. */
.quiz-rv-num{flex:0 0 auto;width:12px;height:12px;border-radius:50%;align-self:flex-start;margin-top:3px}
.quiz-rv-num.good{background:#2e7d32}
.quiz-rv-num.bad{background:#ae182b}
.quiz-rv-prompt{flex:1}
.quiz-rv-your,.quiz-rv-correct{font-size:12.5px;margin-top:6px;padding-left:22px;font-family:'Helvetica Neue',Arial,sans-serif}
.quiz-rv-your{color:#ae182b}
.quiz-rv-strike{text-decoration:line-through}
.quiz-rv-correct{color:#2e7d32;font-weight:700}
.quiz-rv-tag{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;font-weight:700;opacity:.75;margin-right:4px}

/* --- Player leaderboard --- */
.quiz-rate-note{font-size:13px;color:#999;margin-top:-6px;line-height:1.45}
.quiz-rate-list{width:100%;display:flex;flex-direction:column;gap:6px}
/* EVERY row is the same size (user request 2026-08-25). Two things would otherwise break that, so
   both are neutralised here: the workplace line exists on some rows only (a 3-line info column
   against 2), and border widths differ per state. A fixed min-height on the border box settles
   both — rows without a workplace just centre their two lines in the same cell — and the padding
   still mirrors each border width so the inner rhythm matches too. The rank numeral is one size
   everywhere. Nothing below may change a row's box. */
.quiz-rate-row{display:flex;align-items:center;gap:8px;min-height:62px;padding:9px 12px;border:1.5px solid #eee3cf;border-radius:10px;background:#fffdf7;font-family:'Helvetica Neue',Arial,sans-serif}
/* Podium: the whole 1st/2nd/3rd cell wears gold / silver / bronze — deeper metal tones with a
   four-stop sheen (light catch, then shadow, then a lit edge) so they read as polished metal
   rather than a pastel tint. Placed before .me so a medalist's own row still turns green. */
/* The frame shimmers too (requested 2026-08-25). A border cannot take a gradient directly, and
   border-image would square off the rounded corners — so each row paints TWO layers: the fill
   clipped to the padding box, and the rim gradient clipped to the border box, showing through a
   transparent border. The rim runs dark→bright→dark→bright→dark, a tighter and more contrasty
   sweep than the fill, which is what makes an edge read as polished metal rather than a tint. */
.quiz-rate-row.gold{
  background:linear-gradient(135deg,#dcb84c 0%,#f9ebb2 34%,#cb9f34 68%,#edd68d 100%) padding-box,
             linear-gradient(135deg,#8a6614 0%,#f6e3a0 22%,#a87f1c 52%,#fdf3cd 74%,#8a6614 100%) border-box;
  border-color:transparent;
}
.quiz-rate-row.silver{
  background:linear-gradient(135deg,#bcc2cd 0%,#f0f2f6 34%,#a2aab8 68%,#d3d9e1 100%) padding-box,
             linear-gradient(135deg,#5f6672 0%,#f2f5f9 22%,#7e8797 52%,#ffffff 74%,#5f6672 100%) border-box;
  border-color:transparent;
}
.quiz-rate-row.bronze{
  background:linear-gradient(135deg,#d49a6a 0%,#f4dcbd 34%,#c98e5f 68%,#e5b98d 100%) padding-box,
             linear-gradient(135deg,#7a4a22 0%,#f3cda4 22%,#9a6435 52%,#ffe7cc 74%,#7a4a22 100%) border-box;
  border-color:transparent;
}
.quiz-rate-row.gold,.quiz-rate-row.silver,.quiz-rate-row.bronze{border-width:3px;padding:7.5px 10.5px}
/* Metallic glint: a lit band sweeps diagonally across the whole podium cell, then the row rests
   until the next pass — one sweep every 3s (requested 2026-08-31). The cell clips to its OWN
   border box (clip-path, not overflow:hidden, which would stop at the padding box and cut the
   shimmering rim off the effect). isolation:isolate makes the row its own stacking context so the
   z-index:-1 band paints above the metal gradient but under the name, avatar and score — a glare
   that passes BEHIND the text never costs a frame of readability. The three medals are staggered
   slightly so the podium catches the light as a cascade rather than three rows blinking at once. */
.quiz-rate-row.gold,.quiz-rate-row.silver,.quiz-rate-row.bronze{position:relative;isolation:isolate;clip-path:inset(0 round 10px)}
.quiz-rate-row.gold::after,.quiz-rate-row.silver::after,.quiz-rate-row.bronze::after{
  content:'';position:absolute;top:-50%;bottom:-50%;left:-70%;width:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 32%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.28) 68%,rgba(255,255,255,0) 100%);
  animation:wmMedalSheen 3s linear infinite;
}
.quiz-rate-row.silver::after{animation-delay:.18s}
.quiz-rate-row.bronze::after{animation-delay:.36s}
/* 0 -> 30% of the cycle is the ~0.9s sweep; the rest of the 3s the band waits parked off the right edge. */
@keyframes wmMedalSheen{
  0%{transform:translateX(0) skewX(-22deg)}
  30%{transform:translateX(400%) skewX(-22deg)}
  100%{transform:translateX(400%) skewX(-22deg)}
}
@media (prefers-reduced-motion:reduce){
  .quiz-rate-row.gold::after,.quiz-rate-row.silver::after,.quiz-rate-row.bronze::after{animation:none;opacity:0}
}
/* Rank numerals go near-black in their metal's hue: the deeper gradients leave too little contrast
   for the old mid-tone golds (measured 1.9–2.8:1 on the darkest stop). */
.quiz-rate-row.gold .quiz-rate-rank{color:#3d2c06}
.quiz-rate-row.silver .quiz-rate-rank{color:#232830}
.quiz-rate-row.bronze .quiz-rate-rank{color:#3f2009}
/* The metals are mid-tone now, so the quiet secondary line needs real contrast on them. */
.quiz-rate-row.gold .quiz-rate-sub,.quiz-rate-row.silver .quiz-rate-sub,.quiz-rate-row.bronze .quiz-rate-sub{color:rgba(0,0,0,.5)}
/* The viewer's own row is GREEN — but a medal outranks it (requested 2026-08-25): standing on the
   podium must look like gold/silver/bronze, and "(VOUS)" is what marks the row as theirs. Hence
   the :not() — without it .me would win on specificity and paint a medalist's row green. */
.quiz-rate-row.me:not(.gold):not(.silver):not(.bronze){border-color:#2e7d32;border-width:2px;background:#e5f3e6;padding:8.5px 11.5px}
.quiz-rate-you{font-weight:700;font-size:10px;color:#2e7d32;letter-spacing:0.5px;text-transform:uppercase}
/* "(VOUS)" keeps its green on the podium too (requested): the medal restyles the ROW, but the
   marker that says which row is yours must read the same everywhere. An earlier pass turned it
   near-black on the metals — deliberately not reinstated. */
/* Job + workplace: black italic, and explicitly light — the name above it is bold now and the
   weight would otherwise cascade down the info column. */
.quiz-rate-work{display:block;font-size:10px;font-weight:400;font-style:italic;color:#1a1a1a;letter-spacing:0.4px;margin-top:1px}
.quiz-rate-hint{font-size:12px;font-style:italic;color:#8a6a20;margin-top:2px}
.quiz-rate-rank{font-family:var(--font-display);font-size:19px;color:#8a6a20;min-width:20px;text-align:center}   /* narrow: avatar + info hug the rank number */
.quiz-rate-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}   /* 20% larger (requested) — still clears the 62px row */
.quiz-rate-name{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;font-size:13px;font-weight:700;color:#3d2b10;text-align:left}
.quiz-rate-name,.quiz-rate-name *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.quiz-rate-sub{font-size:10.5px;font-weight:400;color:#a99}   /* explicit: the bold name must not cascade into it */
.quiz-rate-pct{font-family:var(--font-display);font-size:16px;color:#5e0c23;white-space:nowrap}
.quiz-rate-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}   /* score with "(vous)" tucked under it */
.quiz-rate-move{font-size:11px;margin-right:5px;vertical-align:middle}
.quiz-rate-move.up{color:#2e7d32}
.quiz-rate-move.down{color:#ae182b}
.quiz-rate-gap{text-align:center;color:#c9a550;line-height:.6;font-size:14px}

/* --- Net GB summary at the end --- */
.quiz-net-row{display:flex;gap:14px;margin:4px 0}
/* The two cells are one visual pair, so the amount and its label must sit on the SAME baseline in
   both: a stretched grid (amount row / label row) makes each row as tall as its taller side, so
   "+16" and "−2" line up even when one is a digit wider, and the two captions do too. */
.quiz-net-cell{display:grid;grid-template-rows:auto auto;justify-items:center;align-content:start;min-width:96px;padding:10px 14px;border-radius:12px;border:1.5px solid #e0c878;background:#fffdf7;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}
.quiz-net-row{align-items:stretch}
.quiz-net-cell.pos .quiz-net-amt{color:#2e7d32}
.quiz-net-cell.neg .quiz-net-amt{color:#ae182b}
.quiz-net-amt{font-family:var(--font-display);font-size:22px;line-height:1.1;display:flex;align-items:center;min-height:26px}
.quiz-net-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:#8a6a20;margin-top:2px;line-height:1.2;text-align:center}

/* --- Question screen --- */
.quiz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
/* Both ends of the top line were set at caption size; enlarged (requested) so the question
   counter and the running GB total read at a glance. */
.quiz-progress{font-size:13.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8a6a20;font-weight:700}
/* Running GB total: GREEN while the run is non-negative (requested 2026-08-26), verdict-red when
   it dips below zero — the .neg class is toggled by the JS alongside each score update. */
.quiz-net{font-family:var(--font-display);font-size:17px;color:#2e7d32}
.quiz-net.neg{color:#ae182b}
.quiz-timerbar{height:6px;border-radius:6px;background:#ecdfbf;overflow:hidden;margin-bottom:16px}
.quiz-timerfill{height:100%;width:100%;background:linear-gradient(90deg,#c9a550,#8a1538);transition:width .1s linear}
.quiz-question{font-size:15.5px;line-height:1.45;color:#3d2b10;font-weight:600;margin-bottom:16px;min-height:44px}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-opt{
  width:100%;padding:13px 15px;text-align:left;
  background:#fffdf7;border:1.5px solid #e0c878;border-radius:10px;
  font-size:14px;color:#3d2b10;cursor:pointer;font-family:'Helvetica Neue',Arial,sans-serif;
  transition:background .12s,border-color .12s,transform .12s
}
.quiz-opt:active{transform:scale(0.98)}
.quiz-opt.locked{cursor:default;pointer-events:none}
.quiz-opt.correct{background:#e5f3e6;border-color:#2e7d32;color:#1f5f24;font-weight:700}
.quiz-opt.wrong{background:#fbe6e6;border-color:#ae182b;color:#8a1220;font-weight:700}
.quiz-feedback{min-height:20px;margin-top:24px;   /* dropped further below the options (requested 2026-08-28) */text-align:center;font-family:var(--font-display);font-size:15px;letter-spacing:1px;text-transform:uppercase}
.quiz-feedback.good{color:#2e7d32}
.quiz-feedback.bad{color:#ae182b}

/* --- Info of the Day --- */
.info-grape{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--font-display);font-size:23px;color:#5e0c23;margin-bottom:12px}   /* 20→23px (requested 2026-08-30): the grape name is the card headline */
/* Decorative grape illustration, top-right of the card (colour-matched to the grape).
   float:right so the appearance/nose text wraps to its left instead of running underneath. */
.info-grape-art{float:right;width:118px;height:auto;margin:-14px 0 4px 14px;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 12px rgba(94,12,35,0.22))}   /* soft shadow hugging the artwork (2026-08-28); top margin -2→-14px so the art rides higher than the name line (requested 2026-08-30) */
/* …and it settles like a bunch resting on its base: the pivot sits at the BOTTOM centre of the
   artwork (requested 2026-08-30 — it used to swing from the stem at the top), so the top of the
   bunch travels while the foot stays planted. It rises the last few pixels into place and rocks
   side to side, each swing smaller than the last. Replayed by _infoGrapeArtPlay on every visit. */
.info-grape-art-sway{transform-origin:50% 97%;animation:infoGrapeSway 1.4s cubic-bezier(.25,.8,.35,1) both}
@keyframes infoGrapeSway{
  0%{opacity:0;transform:translateY(7px) rotate(-8deg)}
  28%{opacity:1;transform:translateY(0) rotate(5.5deg)}
  48%{transform:rotate(-3.5deg)}
  66%{transform:rotate(2.2deg)}
  83%{transform:rotate(-1deg)}
  100%{opacity:1;transform:rotate(0)}
}
@media (prefers-reduced-motion:reduce){ .info-grape-art-sway{animation:none} }
.info-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
/* RU: Cyrillic transliteration under the Latin grape name (academy-bi-ru.js / CEPAGE_NAME_RU) —
   same pairing as the casino card header (.sb-name-ru). Other languages render the name alone. */
.info-grape-name{display:inline-block;line-height:1.15}
.info-grape-ru{display:block;font-size:13px;letter-spacing:1px;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:400;margin-top:3px}
.info-color{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700}
.info-block{margin-bottom:18px}
.info-lbl{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a1538;font-weight:700;margin-bottom:3px}
.info-val{font-size:13px;line-height:1.5;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
/* Young / aged stage lines (robe + nose) */
.info-stage{font-size:13px;line-height:1.45;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
.info-stage + .info-stage{margin-top:2px}
.info-stage-lbl{font-weight:700;color:#7a5a18}
/* Palate bars — same visual language as the Cépage ID panel */
.info-attr{margin-bottom:7px}
.info-attr-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.info-attr-lbl{font-size:11px;font-weight:700;color:#5e0c23;font-family:'Helvetica Neue',Arial,sans-serif}
.info-attr-val{font-size:11px;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif}
.info-bar{position:relative;height:6px;border-radius:3px;background:#eee3cf;overflow:hidden}
/* Two-tone fill (like the casino panel): solid up to the low stop, faded extension up to high. */
.info-bar-fill,.info-bar-fill-light{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:linear-gradient(90deg,#c9a550,#8a1538)}
.info-bar-fill-light{opacity:.38}
/* White grapes: reversed gradient (bordeaux → gold) weighted so gold dominates. */
.info-bar.blanc .info-bar-fill,.info-bar.blanc .info-bar-fill-light{background:linear-gradient(90deg,#8a1538,#c9a550 42%)}
/* Palate chips — international grapes (no numeric stats) */
.info-chips{display:flex;flex-wrap:wrap;gap:6px}
.info-chip{font-size:11.5px;line-height:1;padding:6px 9px;border-radius:12px;background:#f6efdd;border:1px solid #e2d3ae;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
.info-chip-lbl{font-weight:700;color:#8a1538;margin-right:5px}
/* Signature regions / countries */
.info-geo-row{margin-bottom:4px}
.info-geo-row strong{color:#5e0c23}
.info-close-btn{align-self:center;margin-top:8px;display:block;width:100%}

/* Wine Academy → Knowledge tab: every grape as a pill (red / white, A→Z); tapping one swaps the
   list for the same profile card the Daily Grape uses, with a way back. */
.know-intro{font-size:12px;color:#8a7a5a;font-style:italic;text-align:center;margin:-2px 0 14px}
.know-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}   /* legacy shape, kept for safety */
/* Red/white sub-tabs over the list (2026-08-26) — joined pill pair, same voice as the version toggles. */
.know-tabs{display:flex;gap:0;border:1.5px solid #c9a550;border-radius:999px;overflow:hidden;margin-bottom:4px}
.know-tab{flex:1;padding:10px 6px;background:#fdf8f0;border:none;cursor:pointer;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:0.6px;color:#8a6a20;transition:background .15s,color .15s;line-height:1.2}   /* 11.5→13.5 + bold (requested 2026-08-27) */
.know-tab.rouge.on{background:#5e0c23;color:#fff}
.know-tab.blanc.on{background:#c9a550;color:#fff}
/* Letter separator: the initial with a hairline running off to the right. */
/* Grape search field (2026-08-27): a capsule input over the A→Z list. */
.know-search{position:relative;margin:10px 0 4px}
.know-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;color:#b29c74;pointer-events:none}
.know-search-inp{width:100%;box-sizing:border-box;padding:9px 14px 9px 38px;border:1.5px solid #e3cf9c;border-radius:999px;background:#fff;color:#5e0c23;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;outline:none}
.know-search-inp::placeholder{color:#b29c74;font-style:italic}
.know-search-inp:focus{border-color:#c9a550}
.know-nomatch{padding:22px 8px;text-align:center;color:#8a7a5a;font-style:italic;font-size:13px}
.know-letter{display:flex;align-items:center;gap:10px;margin:16px 2px 8px;font-family:var(--font-display);font-size:16px;letter-spacing:2px;color:#8a6a20}
.know-letter::after{content:'';flex:1;height:1px;background:#e8dcbb}
/* Two even columns; each pill fills its cell so the columns read as clean rails. */
.know-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}   /* a one-line pill keeps its slim height next to a two-line neighbour — no row stretch (requested 2026-08-27) */
.know-grid2 .know-btn{width:100%;min-width:0}
/* Names always show in FULL — they wrap inside the pill instead of ellipsising (requested
   2026-08-27; «Cabernet Sauvign…» was the offender). */
.know-grid2 .know-txt{white-space:normal;overflow-wrap:break-word;min-width:0}
/* ===== Knowledge landing: Pratique / Théorie (2026-08-27) ===== */
.know-home{display:flex;flex-direction:column;gap:0}
.know-section-title{font-family:var(--font-display);font-size:16px;letter-spacing:2px;word-spacing:2px;line-height:1.5;color:#8a6a20;text-transform:uppercase;margin:14px 2px 2px;display:flex;align-items:center;gap:10px}
.know-section-title::after{content:"";flex:1;height:1px;background:#e8dcbb}
/* PRATIQUE sits right under the tab bar, so it does not need the 14px that separates one
   section from the next — the card's own 26px of top padding is the air (requested 2026-08-30).
   The shared first-child reset cannot reach it: the title is nested inside .know-home. */
.know-home > .know-section-title:first-child{margin-top:0}
/* …and the menu as a whole starts higher than an article does: the card's 26px of top padding
   is right for a page of prose, too much above a row of tiles (requested twice, 2026-08-30). */
#infoDayOverlay .quiz-body > .know-home:first-child{margin-top:-11px}   /* :first-child to out-rank the shared first-child reset above, which zeroed a plain .know-home rule */
/* Savoir home tiles (2026-08-30): two icon cards per row, label beneath the picture. The JPG
   icons sit on a near-white ground — multiply blends it into the cream card. know-nav-dot
   survives below: the region cards' sub-headers still wear it. */
.know-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.know-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px 11px;background:#fdf8f0;border:1.5px solid #e3cf9c;border-radius:14px;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,0.12), 0 2px 5px rgba(0,0,0,0.07);-webkit-tap-highlight-color:transparent}
.know-tile:active{transform:scale(.97);background:#f7eed9;border-color:#c9a550}
.know-tile-img{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
/* One wobble of every tile icon when the Savoir menu appears (requested 2026-08-31). The delay is
   set per icon in _knowRenderHome, so the row reads as a wave settling rather than a single
   twitch; nothing keeps moving once it lands. */
.know-tile-img.know-shake{animation:knowIconShake .7s cubic-bezier(.36,.07,.19,.97) both}
@keyframes knowIconShake{
  0%  {transform:rotate(0) scale(1)}
  20% {transform:rotate(-7deg) scale(1.06)}
  45% {transform:rotate(6deg) scale(1.04)}
  65% {transform:rotate(-3.5deg) scale(1.01)}
  82% {transform:rotate(2deg) scale(1)}
  100%{transform:rotate(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){ .know-tile-img.know-shake{animation:none} }
.know-tile-txt{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#5e0c23;text-align:center;line-height:1.4;min-width:0}
.know-tile-wide{grid-column:1/-1}
/* THÉORIE alone reads bordeaux — the two other section titles keep the gold (requested
   2026-08-30). Its rule line stays gold like the others. */
.know-section-title.know-section-theorie{color:#5e0c23}
/* The two LIVE-SEARCH tiles (AOC lookup, AI accord finder) wear a bordeaux frame, a touch
   thicker than the gold one: they answer a question you type, the others open a text to read. */
.know-tile.know-tile-search{border:2px solid #8a1538}
/* Tasting-guide figures (2026-08-30): centred under their phase header, white ground blended
   into the card via multiply like the home tiles. */
.know-taste-art{display:block;width:132px;height:auto;margin:6px auto 4px;mix-blend-mode:multiply;pointer-events:none}
/* Quiet reset pill under the AOC search input (requested 2026-08-30); shown only while a
   query is typed. */
.know-reset{display:block;margin:8px 2px 0 auto;padding:5px 13px;border-radius:999px;border:1.5px solid #e3cf9c;background:#fff;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:700;cursor:pointer;box-shadow:none!important}
.know-reset:active{background:#f7eed9;border-color:#c9a550}
.know-nav-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#c9a550}
/* content pages (tasting / temperature / region notes) */
.know-content-title{font-family:var(--font-display);font-size:18px;letter-spacing:1.5px;color:#5e0c23;text-transform:uppercase;text-align:center;margin:4px 0 14px}
.know-content{font-size:13.5px;line-height:1.6;color:#3a2a12}
.know-content p{margin:0 0 11px}
.know-content strong{color:#5e0c23}
/* ===== Long-form content page (tasting guide, 2026-08-28) ===== */
/* The gold lead-ins of the Savoir articles now stand apart from the display-serif titles: the
   body sans in bold gold (requested 2026-08-31), the same family/weight as .know-sub-aoc below.
   14px because the sans reads smaller than the display face at equal size. */
.know-lead{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:14px;letter-spacing:.7px;word-spacing:normal;color:#8a6a20;text-transform:uppercase;margin:16px 0 10px;line-height:1.45}
.know-sub{font-family:var(--font-display);font-size:16.5px;letter-spacing:2px;color:#5e0c23;text-transform:uppercase;margin:22px 0 4px;display:flex;align-items:center;gap:10px}
.know-sub::after{content:"";flex:1;height:1px;background:#e8dcbb}
.know-term{font-weight:700;font-size:13px;color:#5e0c23;margin:10px 0 2px}
.know-list{margin:0 0 10px;padding-left:18px}
.know-list li{font-size:13.5px;line-height:1.55;color:#3a2a12;margin-bottom:3px}
.know-tip{margin:12px 0 2px;padding:10px 12px;border-radius:12px;background:#fdf8f0;border:1.5px solid #e3cf9c;font-size:12.5px;line-height:1.65;color:#8a6a20;font-style:italic}
.know-recap{margin:6px 0 10px;padding:12px 14px;border-radius:12px;background:#fdf8f0;border:1.5px solid #e3cf9c;font-size:13.5px;line-height:1.8;color:#3a2a12}
/* Folded detail block: the button IS the toggle, its body is the next sibling. */
.know-acc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:10px 0 0;padding:9px 14px;background:#fdf8f0;border:1.5px solid #c9a550;border-radius:12px;color:#5e0c23;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;text-align:left;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06)!important}   /* smaller, lighter type, softer shadow (requested 2026-08-28) */
.know-acc:active{background:#f3e6c5;border-color:#8a6a20}
.know-acc-chev{color:#c9a550;font-size:14px;flex:none;transition:transform .2s}
.know-acc.open .know-acc-chev{transform:rotate(180deg)}
.know-acc-body{display:none;padding:4px 4px 6px 14px;cursor:pointer;border-left:2px solid #e3cf9c}   /* a tap anywhere in the text folds it back; the cream rule on the LEFT marks the revealed block (2026-08-28) */
.know-acc.open + .know-acc-body{display:block}
/* Temperature table (2026-08-28): a gold column header over the style/degrees rows. */
.know-temp-head{display:flex;justify-content:space-between;gap:12px;padding:2px 4px 6px;border-bottom:1.5px solid #e3cf9c;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a6a20;font-weight:700}
.know-temp-row{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid #ecdcc0}
/* «~ 15-20 min» under a chilling method — tied to the paragraph above it, not floating between. */
.know-dur{margin:-5px 0 12px;font-weight:700;font-size:12.5px;letter-spacing:.3px;color:#8a6a20}
.know-temp-t{color:#3a2a12;font-size:13.5px}
.know-temp-v{color:#8a6a20;font-weight:700;white-space:nowrap;font-size:13.5px}
.know-temp-note{margin-top:12px;font-size:12.5px;color:#8a7a5a}
/* Appellations and grapes on a region card: PLAIN TEXT in the two-column grid — the pill/chip
   frames are gone (requested 2026-08-28). The AOC/IGP tag rides each name; a grape carries a
   dot in its true colour. */
/* Cream rule down the LEFT of every AOC/IGP list on a region card (requested 2026-08-28) —
   same mark as an unfolded .know-acc-body. The grapes grid stays bare. */
.know-aoc-block{border-left:2px solid #e8dcbb;padding-left:12px;margin:4px 0 6px 2px}
.know-aoc{display:block;min-width:0;padding:3px 0;color:#5e0c23;font-weight:400;font-size:13px;line-height:1.35;overflow-wrap:break-word;font-family:'Helvetica Neue',Arial,sans-serif}
.know-cep{display:flex;align-items:center;gap:8px;min-width:0;padding:3px 0;color:#5e0c23;font-weight:400;font-size:13px;line-height:1.35;font-family:'Helvetica Neue',Arial,sans-serif}
.know-dot.blanc{background:#c9a550}
.know-aoc-tag{font-size:10px;font-weight:700;letter-spacing:.8px;color:#8a6a20;white-space:nowrap}
/* Quick-search page as a small form (2026-08-28): the intro hint plain and near-black, then
   three labelled rows — the AOC input, the region it belongs to (auto-filled, tappable through
   to the region card), and that region's possible grapes. */
.know-hint{font-size:12.5px;line-height:1.55;color:#3a3a3a;text-align:center;margin:0 0 6px}
.know-field-lbl{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a1538;font-weight:700;font-family:'Helvetica Neue',Arial,sans-serif;margin:16px 2px 2px}
.know-field-val{min-height:26px;padding:2px}
.know-field-empty{color:#b0a894;font-size:13.5px}
/* Sub-region header on a grouped region card (2026-08-28): gold bullet + bold caps, its
   appellation list open below — the fold-behind-a-button accordions are gone. */
.know-sub-aoc{display:flex;align-items:center;gap:8px;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:12.5px;letter-spacing:.6px;color:#5e0c23;margin:14px 0 2px}
.know-field-region{background:none;border:0;box-shadow:none;padding:0;font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:700;color:#5e0c23;cursor:pointer;text-align:left}
.know-field-region:active{opacity:.6}
.know-field-match{display:block;font-size:11px;letter-spacing:.5px;color:#8a6a20;margin-top:2px}
.know-aoc-none{font-size:12.5px;color:#8a7a5a;font-style:italic;margin:4px 0 2px}
.know-region-style{text-align:center;font-style:italic;color:#8a6a20;font-size:13px;margin:-6px 0 6px}
/* a non-clickable grape (no card in the base) still reads as a pill, just inert */
.know-btn-static{cursor:default;opacity:0.75}
.know-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;background:#fdf8f0;border:1.5px solid #e3cf9c;color:#5e0c23;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2px;line-height:1.25;text-align:left;cursor:pointer}   /* sans instead of the display face (requested 2026-08-27) — narrower fit, and long names read better */
.know-btn{box-shadow:0 5px 14px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.08)}   /* lighter float than the big buttons (2026-08-27) */
.know-btn:active{transform:scale(.97);background:#f7eed9;border-color:#c9a550}
.know-dot{width:9px;height:9px;border-radius:50%;background:#7a1226;flex:none}
.know-txt{display:block;min-width:0}
/* RU pills: Cyrillic name on a second, smaller line */
.know-ru{display:block;font-size:10.5px;letter-spacing:.3px;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;margin-top:2px}
.know-btn.blanc .know-dot{background:#c9a550}
.know-back{display:inline-block;clear:both;margin:18px 0 2px;padding:6px 12px;border-radius:10px;border:1.5px solid #c9a550;background:#fff;color:#5e0c23;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;cursor:pointer}
.know-back:active{background:#f7eed9}
/* AI pairing finder (2026-08-30): the CTA under the two fields, and the answer box. */
/* The allowance, one glass per accord (2026-08-31). A spent glass is the SAME asset drained of
   colour rather than a second file — so the row cannot drift out of step with the wine glass used
   everywhere else, and a redrawn glass updates both states at once. */
.know-pair-quota{display:flex;justify-content:center;align-items:flex-end;gap:clamp(3px,1.6vw,8px);margin:6px 0 14px}
.know-pair-quota:empty{display:none;margin:0}
/* Sized by HEIGHT, width auto: the glass is a tall 31x56 drawing, and the old 20x20 box squashed
   it out of shape. ~5x taller than that box (requested 2026-08-31), but clamped against the
   viewport because five of them must sit on ONE row inside the card — at the 100px ceiling each
   glass is 55px wide, so the row needs ~291px and a 320px phone does not have it. The clamp lets
   the row fill whatever width there is instead of overflowing the card. */
/* Width-driven and SHRINKABLE, so five glasses can never overflow the card: they share the row
   and cap at 56px each. The card is .quiz-modal 90%/max 420 minus its 2px border minus the 20px
   inner padding — 293px at a 375px phone, which is 22px LESS than a naive harness suggests, and a
   fixed 54px glass overflowed it by a hair. aspect-ratio is declared so the height is right from
   the first paint, before the SVG has loaded, and the form below does not jump. */
.know-pair-glass{flex:0 1 56px;min-width:0;width:auto;height:auto;aspect-ratio:31.18/56.4;display:block}
.know-pair-glass.spent{filter:grayscale(1) opacity(.34)}
.know-pair-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}   /* wraps as a row before it squeezes the CTA (narrow phones) */
.know-pair-go{padding:11px 18px;white-space:nowrap;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #c9a550;font-family:var(--font-display);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.know-pair-clear{margin:0;white-space:nowrap}   /* the shared .know-reset floats itself right; in this row the flex box places it */
.know-pair-go:active{transform:scale(0.96)}
.know-pair-go:disabled{opacity:.55}
.know-pair-res{margin-top:14px;padding:12px 14px;border:1.5px solid #e3cf9c;border-radius:12px;background:#fdf8f0;font-size:13.5px;line-height:1.55;color:#3d2b10;font-family:'Helvetica Neue',Arial,sans-serif}
.know-pair-res:empty{display:none}
.know-pair-res strong{color:#5e0c23}
/* One suggestion per block, so the spacing is the same whether the model separated its lines
   with one newline or two (2026-08-30). */
.know-pair-line{margin:0 0 9px}
.know-pair-line:last-child{margin-bottom:0}
.know-pair-err{color:#ae182b}

/* Short viewports (web Safari with its chrome, small phones): the intro must fit VOIR LE
   CLASSEMENT above the fold, so everything tightens a notch (2026-08-30). */
@media (max-height:720px){
  .quiz-screen-title{font-size:19px;margin-bottom:6px}
  .quiz-center{gap:8px;padding:2px 6px}
  .quiz-intro-title{font-size:18px}
  .quiz-play-grape{width:38px;height:38px}
  .quiz-star{width:26px;height:26px}
  .quiz-plays-left,.quiz-streak-days{font-size:12px}
  .quiz-benefits{padding:8px 12px 12px;margin:6px auto 2px}
  .quiz-benefits-inner{gap:8px}
  .quiz-benefit{font-size:13px}
  .quiz-benefit-ic{width:38px;height:36px;flex:0 0 38px}
  .quiz-intro-actions .quiz-cta{padding:12px 24px;font-size:15px}
  .quiz-intro-actions{gap:6px}
  .quiz-intro-actions .quiz-btn-quiet{padding:9px 18px;font-size:12px}
  html #quizOverlay{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  /* Short viewports keep the tighter clearance and a smaller top bias — fitting VOIR LE
     CLASSEMENT above the fold outranks matching the Academy card exactly. */
  html #quizOverlay.quiz-intro-mode{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  html #quizOverlay.quiz-done-mode{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  html #quizOverlay.quiz-rating-mode{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  /* The air around the grape caption is a comfort, not a rule: short viewports hand it back so
     the done card still fits without an inner scroll. */
  .quiz-plays-left{margin-top:1px}
  .quiz-overlay.quiz-done-mode .quiz-plays-left{margin-top:3px}
  .quiz-overlay.quiz-done-mode .quiz-plays-left + .quiz-streak{margin-top:0}
  .quiz-overlay.quiz-intro-mode .quiz-body{padding-bottom:8px}
}