/* ============================================================================
   Kansai Adventure Passport — the game layer

   bright.css sets the book's colour and typography. This file adds everything
   that can be caught, ticked, answered, scratched open or counted. All of it
   prints as plain ink: on paper a checkbox is a box to tick with a pencil and
   a covered fact is simply printed.
   ========================================================================= */

/* ------------------------------------------------------------- day header */
.day-band {
  background: var(--accent); color: #fff; border-radius: 4mm;
  padding: 3.4mm 5mm; flex: 0 0 auto;
}
.day-band .db-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 800 2.4mm/1 var(--font-ui); letter-spacing: .26em; opacity: .88;
}
.day-band .db-cn { font-family: var(--font-cn); font-size: 5.4mm; font-weight: 800;
                   margin-top: 1.4mm; line-height: 1.15; }
.day-band .db-row { display: flex; gap: 4mm; align-items: baseline; margin-top: .8mm; }
.day-band .db-jp { font-family: var(--font-jp); font-size: 2.7mm; font-weight: 700; opacity: .9; }
.day-band .db-en { font: 800 3mm/1 var(--font-disp); color: #FFE07A; }

/* a compact place header for the second and third page of a place */
.mini-head {
  display: flex; justify-content: space-between; align-items: center;
  flex: 0 0 auto; gap: 3mm;
}
.mini-head .mh-name { font-family: var(--font-cn); font-size: 3.4mm; font-weight: 800; }
.mini-head .mh-en   { font: 700 2.5mm/1.2 var(--font-en); color: var(--muted); font-style: italic; }
.mini-head .mh-no {
  background: var(--accent); color: #fff; border-radius: 99mm; flex: 0 0 auto;
  padding: 1mm 3mm; font: 800 2.4mm/1.4 var(--font-ui); letter-spacing: .16em;
}

/* ------------------------------------------------------------------ facts
   Three short true things. Numbered, so they read as a list of catches
   rather than a paragraph of description. */
.facts { display: flex; flex-direction: column; gap: 2.2mm; flex: 0 0 auto; }
.fact {
  display: flex; gap: 2.6mm; align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  border-radius: 3mm; padding: 2.6mm 3.2mm;
}
.fact .fn {
  flex: 0 0 auto; width: 5.6mm; height: 5.6mm; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 800 2.7mm/1 var(--font-ui);
}
.fact .fx { min-width: 0; }
.fact .fcn { font-family: var(--font-cn); font-size: 3mm; font-weight: 600; line-height: 1.5; }
.fact .fen { font: 400 2.6mm/1.4 var(--font-en); color: var(--ink-2);
             font-style: italic; margin-top: .6mm; }

/* --------------------------------------------------------- find-it hunt ---
   Five things to catch. A tick is a small victory, so it gets a real one:
   the box fills, the text strikes through and the meter moves. */
.hunt {
  position: relative; border-radius: 4mm; padding: 3.4mm 4mm;
  background: color-mix(in srgb, var(--arashi) 9%, #fff);
  display: flex; flex-direction: column; gap: 2mm;
  transition: background .5s;
}
.hunt-head { display: flex; align-items: center; gap: 2.6mm; }
.hunt-head .roundel { width: 7.6mm; height: 7.6mm; font-size: 3.6mm; background: var(--arashi); }
.hunt-head .hh-cn { font-family: var(--font-cn); font-size: 3.4mm; font-weight: 800; color: var(--arashi); }
.hunt-head .hh-en { font: 800 2.2mm/1.3 var(--font-ui); letter-spacing: .2em;
                    text-transform: uppercase; color: var(--arashi); opacity: .8; }
.hunt-head .hunt-done { margin-left: auto; font: 800 2.8mm/1 var(--font-ui); color: var(--arashi); }

.hunt-meter { height: 1.8mm; border-radius: 99mm; background: #fff; overflow: hidden; }
.hunt-meter i { display: block; height: 100%; width: 0; border-radius: 99mm;
                background: var(--arashi); transition: width .5s cubic-bezier(.34,1.4,.64,1); }

.check { display: flex; gap: 2.4mm; align-items: flex-start; }
.check .box {
  position: relative; flex: 0 0 auto; width: 4.6mm; height: 4.6mm; margin-top: .5mm;
  border: 1.5px solid color-mix(in srgb, var(--arashi) 55%, #fff);
  border-radius: 1.4mm; background: #fff;
  transition: background .3s, border-color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.check .box::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font: 800 3mm/1 var(--font-ui); opacity: 0; transform: scale(.4);
  transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.check .ct { min-width: 0; transition: opacity .3s; }
.check .ccn { font-family: var(--font-cn); font-size: 2.95mm; font-weight: 600; line-height: 1.4; }
.check .cen { font: 400 2.5mm/1.3 var(--font-en); color: var(--muted); font-style: italic; }
body.live .check { cursor: pointer; }
body.live .check:hover .box { transform: scale(1.12); }

.check.on .box { background: var(--arashi); border-color: var(--arashi); }
.check.on .box::after { opacity: 1; transform: scale(1); }
.check.on .ct { opacity: .55; }
.check.on .ccn { text-decoration: line-through; text-decoration-thickness: 1.2px; }

.hunt.allfound { background: color-mix(in srgb, var(--arashi) 20%, #fff); }

/* ----------------------------------------------------------------- quiz ---
   A wrong answer shakes and stays open. Nothing is lost by guessing. */
.quiz {
  border-radius: 4mm; padding: 3.4mm 4mm; flex: 0 0 auto;
  background: color-mix(in srgb, var(--wonder) 9%, #fff);
  display: flex; flex-direction: column; gap: 2mm;
}
.quiz-head { display: flex; align-items: center; gap: 2.6mm; }
.quiz-head .roundel { width: 7.6mm; height: 7.6mm; font-size: 3.6mm; background: var(--wonder); }
.quiz-head .qh-cn { font-family: var(--font-cn); font-size: 3.4mm; font-weight: 800; color: var(--wonder); }
.quiz-head .qh-en { font: 800 2.2mm/1.3 var(--font-ui); letter-spacing: .2em;
                    text-transform: uppercase; color: var(--wonder); opacity: .8; }
.qq-cn { font-family: var(--font-cn); font-size: 3.2mm; font-weight: 700; line-height: 1.45; }
.qq-en { font: 400 2.6mm/1.35 var(--font-en); color: var(--ink-2); font-style: italic; }
.opts { display: flex; flex-direction: column; gap: 1.6mm; margin-top: .6mm; }
.opt {
  display: flex; gap: 2.4mm; align-items: center;
  background: #fff; border-radius: 2.6mm; padding: 2mm 2.8mm;
  border: 1.4px solid color-mix(in srgb, var(--wonder) 22%, #fff);
  position: relative; transition: background .3s, border-color .3s, transform .2s;
}
.opt .ol {
  flex: 0 0 auto; width: 5mm; height: 5mm; border-radius: 50%;
  background: color-mix(in srgb, var(--wonder) 16%, #fff); color: var(--wonder);
  display: grid; place-items: center; font: 800 2.7mm/1 var(--font-ui);
  transition: background .3s, color .3s;
}
.opt .ocn { font-family: var(--font-cn); font-size: 2.9mm; font-weight: 700; }
.opt .oen { font: 400 2.45mm/1.2 var(--font-en); color: var(--muted); font-style: italic; }
body.live .quiz:not(.answered) .opt { cursor: pointer; }
body.live .quiz:not(.answered) .opt:hover { transform: translateX(1mm); border-color: var(--wonder); }

.opt.right { background: color-mix(in srgb, var(--arashi) 16%, #fff); border-color: var(--arashi); }
.opt.right .ol { background: var(--arashi); color: #fff; }
.opt.right::after { content: "✓"; margin-left: auto; color: var(--arashi); font: 800 3.2mm/1 var(--font-ui); }
.opt.wrong { animation: shake .5s; border-color: #D6266E; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-1.6mm); } 40% { transform: translateX(1.6mm); }
  60% { transform: translateX(-1mm); }   80% { transform: translateX(1mm); }
}

.why {
  background: color-mix(in srgb, var(--arashi) 10%, #fff);
  border-left: 1.6mm solid var(--arashi); border-radius: 0 2.6mm 2.6mm 0;
  padding: 2.2mm 3mm;
}
.why .wcn { font-family: var(--font-cn); font-size: 2.9mm; font-weight: 700; color: var(--arashi); }
.why .wen { font: 400 2.5mm/1.35 var(--font-en); color: var(--ink-2); font-style: italic; margin-top: .4mm; }

/* ------------------------------------------------------------- word card */
.wordcard {
  display: flex; align-items: center; gap: 3.5mm; flex: 0 0 auto;
  background: color-mix(in srgb, var(--nara) 13%, #fff);
  border-radius: 4mm; padding: 3mm 4mm;
}
.wordcard .wjp {
  font-family: var(--font-jp); font-size: 8mm; font-weight: 800;
  color: color-mix(in srgb, var(--nara) 78%, #000); line-height: 1; flex: 0 0 auto;
}
.wordcard .wbody { min-width: 0; }
.wordcard .wro { font: 800 2.9mm/1 var(--font-ui); letter-spacing: .14em;
                 color: color-mix(in srgb, var(--nara) 70%, #000); text-transform: uppercase; }
.wordcard .wmean { font-family: var(--font-cn); font-size: 3.1mm; font-weight: 700; margin-top: 1mm; }
.wordcard .wen { font: 400 2.6mm/1.3 var(--font-en); color: var(--ink-2); font-style: italic; }
.wordcard .wtag { margin-left: auto; flex: 0 0 auto; font: 800 2.1mm/1.3 var(--font-ui);
                  letter-spacing: .2em; text-transform: uppercase;
                  color: color-mix(in srgb, var(--nara) 70%, #000); opacity: .75; }

/* ---------------------------------------------------------- ask questions
   Two questions, answered separately by mother and daughter. The point is the
   comparison afterwards, so the two columns are visually equal. */
.ask { display: flex; flex-direction: column; gap: 2.4mm; }
.ask-q { font-family: var(--font-cn); font-size: 3.1mm; font-weight: 700; }
.ask-qen { font: 400 2.55mm/1.3 var(--font-en); color: var(--muted); font-style: italic; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.two .col { background: #fff; border-radius: 3mm; padding: 2.4mm 3mm;
            box-shadow: 0 .5mm 2mm rgba(60,50,35,.1); display: flex; flex-direction: column; }
.two .who { font: 800 2.2mm/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
            color: var(--accent); margin-bottom: 1.4mm; }
.two .who.b { color: var(--wonder); }

/* --------------------------------------------------------- covered facts
   On the Hidden Kansai pages a fact starts under a cover, so reading becomes
   finding. Print shows the fact and never the cover. */
.reveal { position: relative; }
.reveal .cover {
  position: absolute; inset: 0; border-radius: 3mm; z-index: 2;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--wonder) 70%, #fff) 0 3mm,
    color-mix(in srgb, var(--wonder) 55%, #fff) 3mm 6mm);
  display: grid; place-items: center; color: #fff;
  font: 800 2.5mm/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase;
  transition: opacity .45s, transform .45s;
}
body.live .reveal { cursor: pointer; }
.reveal.open .cover { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* --------------------------------------------------------------- photo ---- */
.photo { position: relative; overflow: hidden; }
.photo.has { padding: 0 !important; border-style: solid !important; }
.photo.has img { width: 100%; height: 100%; object-fit: cover; border-radius: 4mm; }

/* --------------------------------------------------------------- stamp ---- */
.stamped {
  font-family: var(--font-cn); font-weight: 800; font-size: 4.4mm;
  color: var(--kyoto); border: 2px solid var(--kyoto); border-radius: 2mm;
  padding: 2mm 3mm; transform: rotate(-7deg); text-align: center; line-height: 1.25;
  animation: stampin .35s cubic-bezier(.2,1.6,.4,1);
}
.stamped span { display: block; font-size: 2.2mm; letter-spacing: .1em; }
@keyframes stampin { 0% { transform: rotate(-7deg) scale(2.4); opacity: 0; }
                     100% { transform: rotate(-7deg) scale(1); opacity: 1; } }

/* ------------------------------------------------------- sound recorder --- */
.recbar { display: flex; align-items: center; gap: 1.5mm; margin-top: 1.6mm; }
.rec { border: 0; border-radius: 99mm; width: 6.4mm; height: 6.4mm; padding: 0;
       cursor: pointer; color: #fff; font-size: 2.6mm; display: grid; place-items: center;
       background: #E4572E; flex: 0 0 auto; }
.rec.play { background: #2E9E5B; }
.rec.done { background: #8A8378; }
.rec.recording { background: #D6266E; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.reclab { font: 700 2.2mm/1 var(--font-ui); color: var(--muted); }

/* ------------------------------------------------------------- contents --- */
.toc { display: flex; flex-direction: column; gap: 1.6mm; flex: 1 1 auto; }
.toc-row { display: flex; align-items: baseline; gap: 2mm; }
.toc-row .tno { flex: 0 0 auto; width: 6.4mm; height: 6.4mm; border-radius: 50%;
                background: var(--c, var(--kyoto)); color: #fff; display: grid;
                place-items: center; font: 800 2.6mm/1 var(--font-ui); }
.toc-row .tcn { font-family: var(--font-cn); font-size: 3.2mm; font-weight: 800; }
.toc-row .ten { font: 700 2.4mm/1.2 var(--font-en); color: var(--muted); font-style: italic; }
.toc-row .dots { flex: 1 1 auto; border-bottom: 1.2px dotted var(--rule); margin: 0 1mm 1mm; }
.toc-row .tpg { font: 800 2.6mm/1 var(--font-ui); color: var(--muted); }

/* --------------------------------------------------------------- the HUD ---
   A quiet tally in the corner of the screen. It never prints. */
#tally {
  position: fixed; right: 18px; bottom: 54px; z-index: 70;
  background: #1b1a18; color: #fff; border-radius: 16px;
  padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); box-shadow: 0 6px 24px rgba(0,0,0,.42);
}
#tally .tring {
  --p: 0; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(#F0A202 calc(var(--p) * 1%), #3a3632 0);
  display: grid; place-items: center;
  transition: --p .6s;
}
#tally .tring::after {
  content: ""; width: 25px; height: 25px; border-radius: 50%; background: #1b1a18;
}
#tally .tx { line-height: 1.15; }
#tally .tn { font-size: 15px; font-weight: 900; }
#tally .tt { font-size: 10px; font-weight: 700; opacity: .55; margin-left: 2px; }
#tally .tl { font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
             text-transform: uppercase; opacity: .5; }
#tally.full { background: linear-gradient(90deg, #E4572E, #F0A202); }

/* jump menu in the toolbar */
#jump { background: #332f2b; color: #f4efe4; border: 1px solid #4b4741;
        border-radius: 20px; padding: 7px 12px; font: 600 13px var(--font-ui); }

/* ------------------------------------------------------------------ print */
@media print {
  #tally, .recbar, #jump { display: none !important; }
  /* on paper a covered fact is simply a printed fact */
  .reveal .cover { display: none !important; }
  .check .box { background: #fff !important; border-color: #8A8378 !important; }
  .check .box::after { display: none !important; }
  .check.on .ct { opacity: 1 !important; }
  .check.on .ccn { text-decoration: none !important; }
  .hunt.allfound { background: color-mix(in srgb, var(--arashi) 9%, #fff) !important; }
  /* every quiz answer stays hidden on paper, so the question is worth asking */
  .why { display: none !important; }
  .opt.right { background: #fff !important; border-color: color-mix(in srgb, var(--wonder) 22%, #fff) !important; }
  .opt.right .ol { background: color-mix(in srgb, var(--wonder) 16%, #fff) !important; color: var(--wonder) !important; }
  .opt.right::after { display: none !important; }
}

/* ---- insight theme ribbon under each story ---- */
.theme{margin-top:3mm;display:flex;align-items:center;gap:2.2mm;
  font-family:var(--font-cn);font-size:2.7mm;font-weight:700;color:var(--ink-2)}
.theme span{background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent);
  border-radius:1.4mm;padding:.7mm 1.8mm;font-size:2.2mm;font-weight:800;
  letter-spacing:.1em;flex:0 0 auto}
/* ---- badge tracker cells ---- */
.badge-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.badge-cell img{transition:filter .35s,transform .35s}

/* ---- did-you-know header ---- */
.facts-head{display:flex;align-items:center;gap:2.6mm}
.facts-head .roundel{width:7.6mm;height:7.6mm;font-size:3.6mm;background:var(--accent)}
.facts-head .mark-cn{font-family:var(--font-cn);font-size:3.4mm;font-weight:800;color:var(--accent)}
.facts-head .mark-en{font:800 2.2mm/1.3 var(--font-ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);opacity:.8}
/* ---- one talk-about-it question ---- */
.aq{display:flex;flex-direction:column;gap:1.2mm;
  background:color-mix(in srgb,var(--accent) 6%,#fff);border-radius:3.4mm;padding:2.8mm 3.2mm}
.aq .two{margin-top:.6mm}
/* ---- sound recorder slot in the Sound Museum ---- */
.sound{min-width:16mm}
.sound .recbar{margin-top:0}

/* ---- talk-about-it header ---- */
.ask-head{display:flex;align-items:center;gap:2.6mm;margin-bottom:.6mm}
.ask-head .roundel{width:7.6mm;height:7.6mm;font-size:3.6mm;background:var(--kobe)}
.ask-head .mark-cn{font-family:var(--font-cn);font-size:3.4mm;font-weight:800;color:var(--kobe)}
.ask-head .mark-en{font:800 2.2mm/1.3 var(--font-ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--kobe);opacity:.8}

/* ============================================================ 2026-09-11 pass
   theme box (bilingual + writable) · sound library · matched postcard
   ========================================================================= */

/* ---- story theme: Chinese, English, and room for her own words ---- */
.theme-box{margin-top:3mm;padding:2.8mm 3.2mm;border-radius:2.4mm;
  background:color-mix(in srgb,var(--accent) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 22%,#fff)}
.theme-box .theme{margin-top:0}
.theme-en{font:400 2.5mm/1.45 Nunito;color:var(--ink-2);font-style:italic;
  margin-top:1.2mm;padding-left:.2mm}
.theme-ask{font-family:var(--font-cn);font-size:2.4mm;font-weight:700;
  color:var(--muted);margin-top:2.2mm}
.theme-ask i{font-family:Nunito;font-weight:400;font-size:2.3mm}

/* ---- sound library ---- */
.lib{display:flex;flex-direction:column;gap:2.2mm}
.lib-row{display:flex;align-items:center;gap:2.6mm;padding:2.4mm 3mm;
  border-radius:2.4mm;background:#fff;border:1px solid var(--rule);flex:1}
.lib-n{flex:0 0 6mm;height:6mm;border-radius:99mm;display:grid;place-items:center;
  font:800 2.6mm/1 Nunito;color:#fff;background:var(--accent)}
.lib-row[data-city=kyoto] .lib-n{background:var(--kyoto)}
.lib-row[data-city=arashi] .lib-n{background:var(--arashi)}
.lib-row[data-city=uji]   .lib-n{background:var(--uji)}
.lib-row[data-city=nara]  .lib-n{background:var(--nara)}
.lib-row[data-city=osaka] .lib-n{background:var(--osaka)}
.lib-row[data-city=kobe]  .lib-n{background:var(--kobe)}
.lib-t{flex:0 0 30mm;min-width:0}
.lib-t .lcn{font-family:var(--font-cn);font-size:2.8mm;font-weight:800}
.lib-t .len{font:400 2.2mm/1.3 Nunito;color:var(--muted);font-style:italic}
.lib-sound{flex:0 0 auto;min-width:20mm}
.lib-where{flex:1;min-width:0}
.lib-where .lw-lab{display:block;font:700 2mm/1 Nunito;letter-spacing:.1em;
  color:var(--muted);margin-bottom:.6mm}

/* ---- postcard: front and back share one footprint ---- */
.pcard{position:relative;border-radius:2.4mm;background:#fff;
  border:1.4px dashed color-mix(in srgb,var(--accent) 46%,#fff);
  box-shadow:0 .6mm 2mm rgba(0,0,0,.05)}
.pc-tag{position:absolute;top:-2.2mm;left:4mm;z-index:2;
  background:var(--accent);color:#fff;border-radius:99mm;
  padding:.5mm 2.2mm;font:800 1.9mm/1.5 Nunito;letter-spacing:.14em}
.pcard .draw-area{background:transparent}
.pc-note{font-family:var(--font-cn);font-size:2.3mm;font-weight:700;
  color:var(--muted);text-align:center;margin-top:.6mm}
.pc-note i{font-family:Nunito;font-weight:400}

@media print{
  /* the library's record buttons are screen-only; the writing line stays */
  .lib-sound{display:none !important}
  .theme-box{background:#FBF7F0 !important}
}

/* ---- print a range only: pages outside it are never laid out ---- */
@media print{
  .page.noprt{display:none !important}
  /* a blank book to write in by hand */
  body.print-blank .fill{color:transparent !important}
  body.print-blank .draw-area canvas,
  body.print-blank .photo img{display:none !important}
}

/* ---- two voices: her words beside her mother's ---- */
.two-voice{display:flex;gap:3mm;flex:1;min-height:0}
.voice{flex:1;display:flex;flex-direction:column;min-width:0;
  padding:3mm 3.2mm;border-radius:2.6mm;border:1px solid var(--rule)}
.v-girl{background:color-mix(in srgb,#E86A9A 8%,#fff);
  border-color:color-mix(in srgb,#E86A9A 26%,#fff)}
.v-mum{background:color-mix(in srgb,#3D8FB0 8%,#fff);
  border-color:color-mix(in srgb,#3D8FB0 26%,#fff)}
.v-head{display:flex;align-items:center;gap:2.2mm}
.v-dot{flex:0 0 6.4mm;height:6.4mm;border-radius:99mm;display:grid;
  place-items:center;color:#fff;font-family:var(--font-cn);
  font-size:3mm;font-weight:800}
.v-girl .v-dot{background:#E86A9A}
.v-mum  .v-dot{background:#3D8FB0}
.v-head b{display:block;font-family:var(--font-cn);font-size:3mm;font-weight:800}
.v-head i{display:block;font:400 2.2mm/1.3 Nunito;color:var(--muted)}
.v-q{font-family:var(--font-cn);font-size:2.5mm;font-weight:700;
  color:var(--ink-2);margin-top:2.2mm;line-height:1.5}
.v-q i{font-family:Nunito;font-weight:400;font-size:2.3mm;color:var(--muted)}

/* ==================================================== secrets, on paper
   On screen a secret is covered and you tap it. Paper cannot do that — so
   the secret is printed upside down instead. Still a secret, still a game,
   and completely readable the moment you turn the book. */
.prt-hint{display:none}
@media print{
  body.plain-secrets .prt-hint{display:none !important}
  .secrets .prt-hint{display:block;margin-left:auto;text-align:right;
    font-family:var(--font-cn);font-size:2.2mm;font-weight:700;
    color:var(--muted);line-height:1.4}
  .secrets .prt-hint i{font-family:Nunito;font-weight:400;font-size:2.1mm}
  /* the secret itself, turned over */
  body:not(.plain-secrets) .secrets .reveal .fact{
    transform:rotate(180deg);
    /* rotating in place keeps the box the same height, so nothing reflows */
  }
  body:not(.plain-secrets) .secrets .reveal{
    background:repeating-linear-gradient(45deg,
      #FBF7F0 0 2.4mm, #F4EEE4 2.4mm 4.8mm) !important;
    border:1px dashed #C9BFAF;border-radius:3mm}
}

/* the date line belongs at the foot of the badge card, not floating under it */
.badge-cell .bdate{margin-top:auto !important}

/* the badge date line sits at the foot of the card and says what it is */
.badge-cell .bdate{margin-top:auto !important}
.bdate-lab{font-family:var(--font-cn);font-size:2.1mm;font-weight:700;
  color:var(--muted);opacity:.8;margin-top:.8mm}

/* Nothing that floats over the book may ever reach paper.
   Named explicitly as well as by .no-print, because a stray className
   assignment in JS can drop the class — which is exactly what happened. */
@media print{
  .savebar, .saved, .bar, .sheet, #tally, #jump, #printsheet, #syncsheet,
  .recbar, .toast{display:none !important}
  body{padding-bottom:0 !important}
}

/* ---------------------------------------------------------------- no crush
   A .block that is itself a flex child (flex:1) becomes a flex column whose
   text rows inherit flex-shrink:1. When the canvas below them asks for its
   min-height, the browser shrinks the TEXT below its own content height and
   the English line lands on top of the Chinese one. Text never shrinks. */
.block > .mark,
.block > .prompt-cn,
.block > .prompt-en,
.block > .body-cn,
.block > .body-en,
.block > .rule       { flex: 0 0 auto; }