/* ============================================================================
   Kansai Adventure Passport — BRIGHT edition
   Artwork is shown at full strength. Colour comes from the artwork itself and
   from a vivid chrome of coloured panels, ribbons and roundels. Nothing is
   faded, scrimmed or washed out.
   ========================================================================= */

:root {
  /* the six journey colours, taken from the places themselves */
  --kyoto:    #E4572E;   /* torii vermilion   */
  --arashi:   #2E9E5B;   /* bamboo green      */
  --uji:      #1B8A8F;   /* matcha teal       */
  --nara:     #F0A202;   /* deer-biscuit gold */
  --osaka:    #D6266E;   /* neon pink         */
  --kobe:     #2D6CDF;   /* harbour blue      */

  --quest:    #E4572E;
  --wonder:   #7A3FBE;
  --draw:     #F0A202;
  --remember: #1B8A8F;
  --story:    #2D6CDF;

  --paper:    #FFFDF7;
  --paper-2:  #FFF6E4;
  --ink:      #22201E;
  --ink-2:    #55504A;
  --muted:    #8A8378;
  --rule:     #E4DCCB;

  --font-en:   "Nunito", "Segoe UI", "Trebuchet MS", sans-serif;
  --font-disp: "Baloo 2", "Nunito", "Segoe UI", sans-serif;
  --font-cn:   "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-jp:   "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-ui:   "Nunito", "Segoe UI", system-ui, sans-serif;

  --accent: var(--kyoto);
}

/* each chapter recolours the whole page in one line */
.page[data-city="kyoto"]  { --accent: var(--kyoto); }
.page[data-city="arashi"] { --accent: var(--arashi); }
.page[data-city="uji"]    { --accent: var(--uji); }
.page[data-city="nara"]   { --accent: var(--nara); }
.page[data-city="osaka"]  { --accent: var(--osaka); }
.page[data-city="kobe"]   { --accent: var(--kobe); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #2f2c29;
  font-family: var(--font-en);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding: 62px 0 20mm;
}

/* -------------------------------------------------------------------- page */
.page {
  position: relative;
  width: 148mm; height: 210mm;
  margin: 0 auto 10mm;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 5mm 16mm rgba(0,0,0,.45);
}
.pad { position: absolute; inset: 11mm 12mm 15mm 12mm; display: flex;
       flex-direction: column; overflow: hidden; }
/* flex children default to min-height:auto and refuse to shrink — this is the
   single most common cause of a page overrunning its trim. */
.pad > *, .pad .block > * { min-height: 0; }
.block { display: flex; flex-direction: column; }
.page[data-side="recto"] .pad { left: 15mm; }
.page[data-side="verso"] .pad { right: 15mm; }

/* a bright colour ribbon down the outer edge — the book's thumb index */
.page::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5mm;
  background: var(--accent);
}
.page[data-side="verso"]::before { left: 0; }
.page[data-side="recto"]::before { right: 0; }
.page.full::before { display: none; }

/* --------------------------------------------------------------- artwork */
/* Full strength. No opacity, no overlay, no tint. */
.art { display: block; width: 100%; object-fit: cover; border-radius: 4mm;
       box-shadow: 0 1.5mm 5mm rgba(0,0,0,.22); }
.art.bleed { border-radius: 0; box-shadow: none; }

.art-plate { position: relative; border-radius: 4mm; overflow: hidden;
             box-shadow: 0 1.5mm 6mm rgba(0,0,0,.25);
             outline: 1.6mm solid var(--paper); outline-offset: -1.6mm; }
.art-plate .art { border-radius: 0; box-shadow: none; }
.art-plate .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8mm 4mm 3mm;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color: #fff; font-family: var(--font-ui); font-size: 2.6mm;
  letter-spacing: .1em; text-shadow: 0 .3mm 1mm rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- header */
.city-tab {
  display: inline-flex; align-items: baseline; gap: 2.5mm;
  background: var(--accent); color: #fff;
  padding: 1.6mm 4mm; border-radius: 99mm;
  font-family: var(--font-ui); font-size: 2.5mm; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}
.place-cn { font-family: var(--font-cn); font-size: 8mm; font-weight: 800;
            letter-spacing: .04em; line-height: 1.1; color: var(--ink); }
.place-row { display: flex; gap: 4mm; align-items: baseline; margin-top: 1.2mm; }
.place-jp { font-family: var(--font-jp); font-size: 3.3mm; color: var(--accent);
            font-weight: 700; }
.place-en { font-family: var(--font-en); font-size: 3.4mm; color: var(--muted);
            font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--paper); border-radius: 4mm; padding: 4.5mm 5mm;
        box-shadow: 0 .8mm 3mm rgba(60,50,35,.13); }
.card.warm  { background: var(--paper-2); }
.card.tinted { background: color-mix(in srgb, var(--accent) 9%, #fff); }

/* the story card wears its chapter colour openly */
.story-card {
  position: relative; border-radius: 4mm; padding: 5mm 5.5mm 5.5mm;
  background: color-mix(in srgb, var(--story) 7%, #fff);
  border-left: 2.2mm solid var(--story);
  box-shadow: 0 1mm 4mm rgba(45,108,223,.14);
}
.story-title-cn { font-family: var(--font-cn); font-size: 5mm; font-weight: 800;
                  color: var(--story); line-height: 1.2; }
.story-title-en { font-family: var(--font-en); font-size: 3.1mm; font-weight: 700;
                  color: color-mix(in srgb, var(--story) 70%, #fff);
                  margin-top: 1mm; }

.body-cn { font-family: var(--font-cn); font-size: 3.4mm; line-height: 1.85;
           color: var(--ink); text-align: justify; }
.body-en { font-family: var(--font-en); font-size: 3.1mm; line-height: 1.62;
           color: var(--ink-2); }

/* ------------------------------------------------------------------ marks */
.block { border-radius: 4mm; padding: 4mm 4.5mm; flex: 0 0 auto; }
.block[data-mark="quest"]    { background: color-mix(in srgb, var(--quest) 10%, #fff); }
.block[data-mark="wonder"]   { background: color-mix(in srgb, var(--wonder) 10%, #fff); }
.block[data-mark="draw"]     { background: color-mix(in srgb, var(--draw) 13%, #fff); }
.block[data-mark="remember"] { background: color-mix(in srgb, var(--remember) 10%, #fff); }

.mark { display: flex; align-items: center; gap: 2.6mm; margin-bottom: 2.4mm; }
.roundel { width: 9mm; height: 9mm; border-radius: 50%; flex: 0 0 auto;
           display: grid; place-items: center; color: #fff;
           font-family: var(--font-cn); font-size: 4.2mm; font-weight: 800;
           box-shadow: 0 .6mm 2mm rgba(0,0,0,.22); }
.mark-cn { font-family: var(--font-cn); font-size: 3.6mm; font-weight: 800; line-height: 1.1; }
.mark-en { font-family: var(--font-ui); font-size: 2.35mm; font-weight: 800;
           letter-spacing: .2em; text-transform: uppercase; opacity: .8; }

[data-mark="quest"]    .roundel { background: var(--quest); }
[data-mark="wonder"]   .roundel { background: var(--wonder); }
[data-mark="draw"]     .roundel { background: var(--draw); }
[data-mark="remember"] .roundel { background: var(--remember); }
[data-mark="story"]    .roundel { background: var(--story); }
[data-mark="quest"]    .mark-cn, [data-mark="quest"]    .mark-en { color: var(--quest); }
[data-mark="wonder"]   .mark-cn, [data-mark="wonder"]   .mark-en { color: var(--wonder); }
[data-mark="draw"]     .mark-cn, [data-mark="draw"]     .mark-en { color: var(--draw); }
[data-mark="remember"] .mark-cn, [data-mark="remember"] .mark-en { color: var(--remember); }

.prompt-cn { font-family: var(--font-cn); font-size: 3.35mm; line-height: 1.55;
             font-weight: 600; }
.prompt-en { font-family: var(--font-en); font-size: 2.95mm; line-height: 1.45;
             color: var(--ink-2); margin-top: 1mm; }

/* --------------------------------------------------- writable / drawable */
.draw-area { border: 1.6px dashed color-mix(in srgb, var(--draw) 62%, #fff);
             border-radius: 3.5mm; background: #fff; position: relative; }
.draw-area .hint { position: absolute; left: 3mm; bottom: 2mm;
                   font-family: var(--font-ui); font-size: 2.3mm; font-weight: 700;
                   color: color-mix(in srgb, var(--draw) 70%, #fff); }
.write-lines { --pitch: 8.6mm; }
.write-lines .line { height: var(--pitch);
  border-bottom: 1.4px solid color-mix(in srgb, var(--accent) 26%, #fff); }

.stamp-well { border: 1.6px dashed color-mix(in srgb, var(--accent) 55%, #fff);
              border-radius: 3mm; display: grid; place-items: center;
              background: #fff; font-family: var(--font-jp); font-size: 2.4mm;
              font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, #fff); }

/* ------------------------------------------------------------------ misc */
.rule { height: 1.4px; background: var(--rule); border: 0; margin: 3mm 0;
        border-radius: 2px; }
.rule.accent { background: var(--accent); height: 1.8px; }
.rule.short { width: 30mm; }

.folio { position: absolute; left: 12mm; right: 12mm; bottom: 7mm;
         display: flex; justify-content: space-between; align-items: center;
         font-family: var(--font-ui); font-size: 2.5mm; font-weight: 700;
         color: var(--muted); }
.folio .n { background: var(--accent); color: #fff; border-radius: 99mm;
            min-width: 7mm; height: 5mm; display: grid; place-items: center;
            padding: 0 2mm; font-size: 2.5mm; }
.folio .sect { font-family: var(--font-cn); font-weight: 700; }
.page[data-side="recto"] .folio { flex-direction: row-reverse; }

@page { size: 148mm 210mm; margin: 0; }

/* ==========================================================================
   BADGE TRACKER
   A badge she has not won yet is grey, dim and slightly shrunk. Earning one
   lights it: full colour, a coloured glow behind the disc, an expanding ring
   and a burst of sparks. The whole page cheers when all sixteen are in.
   Print is unaffected - on paper every badge shows in full colour.
   ======================================================================== */
.badge-head {
  background: var(--nara); color: #fff; border-radius: 4mm;
  padding: 3mm 4mm; text-align: center; flex: 0 0 auto;
}
.bh-cn { font-family: var(--font-cn); font-size: 6mm; font-weight: 800;
         letter-spacing: .2em; text-indent: .2em; line-height: 1.1; }
.bh-sub { display: flex; gap: 4mm; justify-content: center; margin-top: 1.2mm; }
.bh-jp { font-family: var(--font-jp); font-size: 2.7mm; font-weight: 700; opacity: .92; }
.bh-en { font: 800 2.9mm/1 "Baloo 2", Nunito; }

/* ---- progress ---- */
.badge-progress { position: relative; flex: 0 0 auto; height: 8mm;
                  display: flex; align-items: center; gap: 3mm; }
.bp-track { flex: 1 1 auto; height: 2.6mm; border-radius: 99mm;
            background: var(--rule); overflow: hidden; transition: opacity .4s; }
.bp-fill {
  width: 0; height: 100%; border-radius: 99mm;
  background: linear-gradient(90deg, var(--kyoto), var(--nara), var(--arashi), var(--kobe));
  background-size: 300% 100%;
  transition: width .6s cubic-bezier(.34, 1.4, .64, 1);
  animation: bpflow 6s linear infinite;
}
@keyframes bpflow { to { background-position: 300% 0; } }
.bp-count { font: 800 2.9mm/1 Nunito; letter-spacing: .1em; color: var(--ink-2);
            min-width: 15mm; text-align: right; transition: opacity .4s; }

/* ---- the grid ---- */
.badge-grid {
  flex: 1 1 auto; display: grid; align-content: start;
  grid-template-columns: repeat(4, 1fr); gap: 2.4mm 2mm;
}
.badge-cell {
  position: relative; text-align: center; border-radius: 3mm;
  padding: 2mm 1mm 2.2mm;
  background: color-mix(in srgb, var(--bc) 6%, #fff);
  box-shadow: 0 .5mm 1.6mm rgba(60, 50, 35, .12);
  transition: background .45s, box-shadow .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.badge-disc { position: relative; display: block; width: 17mm; height: 17mm; margin: 0 auto; }

/* the glow that only exists once the badge is won */
.badge-disc::before {
  content: ""; position: absolute; inset: -1.5mm; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bc) 55%, #fff) 0%, transparent 68%);
  opacity: 0; transition: opacity .55s; pointer-events: none;
}
.badge {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(.85); opacity: .3; transform: scale(.9);
  transition: filter .55s, opacity .55s, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
body.live .badge { cursor: pointer; }
body.live .badge-cell:hover { transform: translateY(-.7mm); box-shadow: 0 1.6mm 4mm rgba(60, 50, 35, .2); }
body.live .badge-cell:hover .badge { transform: scale(1.06); opacity: .55; }

.badge-cell.got { background: color-mix(in srgb, var(--bc) 15%, #fff); }
.badge-cell.got .badge { filter: none; opacity: 1; transform: scale(1); }
/* a badge shown on its own chapter page lights up from the same state */
.badge.got { filter: none; opacity: 1; transform: scale(1); }
.badge-cell.got .badge-disc::before { opacity: .85; }
.badge-cell.got .bname-cn { color: var(--bc); }
body.live .badge-cell.got:hover .badge { transform: scale(1.1); opacity: 1; }

.bname-cn { font-family: var(--font-cn); font-size: 2.75mm; font-weight: 800;
            line-height: 1.15; margin-top: .9mm; transition: color .45s; }
.bname-en { font: 700 2.15mm/1.15 Nunito; color: var(--muted); font-style: italic; }
.bhint { display: block; height: 3mm; margin-top: .5mm; overflow: hidden; }
.bhint span { display: block; font: 700 1.95mm/1.5 Nunito; color: color-mix(in srgb, var(--bc) 60%, #fff); }
.bhint .hcn { font-family: var(--font-cn); }
.badge-cell.got .bhint .hen { display: none; }
.badge-cell.got .bhint .hcn { display: none; }
.bdate { height: 4.4mm; border-bottom: 1.2px solid var(--rule); margin-top: .8mm;
         font: 700 2.1mm/4.4mm Nunito; color: var(--ink-2); }

/* ---- the moment of earning ---- */
.badge-cell.pop { transform: translateY(-1mm) scale(1.04); }
.badge-cell.pop .badge { transform: scale(1.2) rotate(-6deg); }
.badge-cell.pop .badge-disc::after {
  content: ""; position: absolute; inset: -1mm; border-radius: 50%;
  border: .7mm solid var(--bc); animation: badgering .75s ease-out forwards;
}
@keyframes badgering {
  0%   { transform: scale(.55); opacity: .95; }
  100% { transform: scale(1.75); opacity: 0; }
}
.spark {
  position: absolute; left: 50%; top: 34%; width: 1.5mm; height: 1.5mm;
  border-radius: 50%; pointer-events: none; z-index: 3;
  animation: sparkfly .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes sparkfly {
  0%   { transform: translate(-50%, -50%) scale(.35); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; }
}

/* ---- all sixteen: the progress row becomes the celebration ---- */
.badge-cheer {
  position: absolute; inset: 0; border-radius: 99mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(90deg, var(--kyoto), var(--osaka), var(--wonder), var(--kobe));
  background-size: 300% 100%; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .55s;
}
#badgePage.allgot .badge-cheer { opacity: 1; animation: bpflow 5s linear infinite; }
#badgePage.allgot .bp-track,
#badgePage.allgot .bp-count { opacity: 0; }
.cheer-cn { font-family: var(--font-cn); font-size: 3.1mm; font-weight: 800; line-height: 1.2; }
.cheer-en { font: 800 2.2mm/1.3 Nunito; opacity: .95; }

@media (prefers-reduced-motion: reduce) {
  .badge, .badge-cell, .bp-fill, .badge-disc::before { transition: none; }
  .spark, .badge-cell.pop .badge-disc::after, .bp-fill, #badgePage.allgot .badge-cheer { animation: none; }
}

@media print {
  body { background: #fff; padding: 0; }
  .page { margin: 0; box-shadow: none; break-after: page; }
  .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* the paper passport prints every badge in full colour, ready to be ticked */
  .badge { filter: none !important; opacity: 1 !important; transform: none !important; }
  .badge-disc::before { opacity: 0 !important; }
  .badge-cell { background: color-mix(in srgb, var(--bc) 6%, #fff) !important; }
  .bhint span { display: block !important; }
}