/* ==========================================================================
   Katalin & Attila — 03.10.2026
   site.css — retro quest-log HUD. Original work, no external dependencies.
   Sections: 1 tokens · 2 reset · 3 pixel panels · 4 layout · 5 type
             8 nav · 9 forms · 10 gallery · 11 gate · 12 map · 13 a11y
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --sky:        #8ecbe8;
  --sky-deep:   #5ea7cd;
  --sea:        #1e5680;
  --parch:      #f7dfbe;
  --parch-warm: #eec294;
  --parch-deep: #d9a173;
  --ink:        #2b2140;
  --ink-soft:   #56466f;
  --indigo:     #4b3a63;
  --gold:       #e9b93f;
  --quest:      #bd4438;
  --rose:       #c2657e;
  --moss:       #7aa45c;
  --paper:      #fffaf1;

  --edge:  3px;                       /* pixel outline weight */
  --drop:  6px;                       /* hard shadow offset   */
  --step:  8px;                       /* spacing unit         */

  --font-ui: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
             Menlo, Consolas, "Liberation Mono", monospace;
  --font-body: "Segoe UI", Roboto, -apple-system, system-ui, "Helvetica Neue",
               Arial, sans-serif;

  --shadow-hard: var(--drop) var(--drop) 0 0 rgba(43, 33, 64, .32);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: calc(var(--step) * 2) var(--step) calc(var(--step) * 5);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--sky);
  background-image:
    linear-gradient(180deg, var(--sky) 0%, #a8dcf0 45%, var(--sky-deep) 100%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--quest); }

/* --- 3. Pixel panels ---------------------------------------------------- */
.panel {
  position: relative;
  background: var(--parch);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 var(--edge) var(--parch-warm), var(--shadow-hard);
  padding: calc(var(--step) * 2.5);
}

.panel--paper { background: var(--paper); box-shadow: inset 0 0 0 var(--edge) var(--parch); }

.success-panel {
  background: #dff3df;
  border-color: #287a3e;
  box-shadow: inset 0 0 0 var(--edge) #b9e5bd, var(--shadow-hard);
}
.success-panel .panel__title { color: #1d6531; border-bottom-color: #8bc995; }

.panel__title {
  margin: 0 0 var(--step);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: var(--edge) solid var(--parch-deep);
  padding-bottom: calc(var(--step) * .75);
}

.panel__subtitle {
  margin: calc(var(--step) * 1.5) 0 var(--step);
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--indigo);
}

.rundown { display: grid; gap: calc(var(--step) * .5); }
.rundown p { margin: 0; }
.rundown strong { display: inline-block; min-width: 3.8rem; font-family: var(--font-ui); color: var(--indigo); }
.venue-summary { font-size: 1.12rem; margin-bottom: var(--step); }
.venue-summary strong { font-family: var(--font-ui); color: var(--indigo); }
.guest-correction { margin-top: calc(var(--step) * 1.5); }
.guest-entry-panel .btn { margin-top: var(--step); }

.scroll-title {
  display: block;
  max-width: 46rem;
  margin: 0 auto calc(var(--step) * 2);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3);
  background: var(--parch-warm);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 var(--edge) var(--parch),
              inset 0 calc(var(--step) * -1) 0 0 var(--parch-deep),
              var(--shadow-hard);
  text-align: center;
}

/* --- 4. Layout ---------------------------------------------------------- */
.shell { max-width: 1240px; margin: 0 auto; }

.hud {
  display: grid;
  gap: calc(var(--step) * 2);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .hud { grid-template-columns: 15rem minmax(0, 1fr) 17rem; }
  .hud__main { grid-column: 2; }
  .hud--wide { grid-template-columns: 15rem minmax(0, 1fr); }
}

.stack > * + * { margin-top: calc(var(--step) * 2); }
.stack--tight > * + * { margin-top: var(--step); }

.hud__side { display: grid; gap: calc(var(--step) * 2); }

/* --- 5. Type ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--step);
}
h1 { font-size: clamp(1.35rem, 4.6vw, 2.1rem); letter-spacing: .04em; }
h2 { font-size: clamp(1.1rem, 3.2vw, 1.4rem); letter-spacing: .06em; }
h3 { font-size: 1.05rem; letter-spacing: .04em; }

p { margin: 0 0 var(--step); }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.06rem; }
.small { font-size: .9rem; color: var(--ink-soft); }

.datestamp {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  letter-spacing: .06em;
  line-height: 1.2;
  margin: 0;
}
.datestamp span { display: block; font-size: 1rem; letter-spacing: .12em; color: var(--ink-soft); }

/* bilingual pairs: data-lang comes from the server's `language` value, so
   exactly one language renders. With no data-lang at all, English wins. */
.en, .hu { display: inline; }
html:not([data-lang="hu"]) .hu { display: none; }
html[data-lang="hu"] .en { display: none; }

/* --- 6. Character cards ------------------------------------------------- */
.card-person { text-align: center; }
.card-person img,
.card-person .portrait {
  width: 100%;
  max-width: 190px;
  margin: 0 auto var(--step);
  border: var(--edge) solid var(--ink);
  background: var(--parch-warm);
  image-rendering: pixelated;
}
.card-person .portrait { aspect-ratio: 1 / 1; }
.card-person h2 { margin-bottom: 2px; }
.card-person .level {
  font-family: var(--font-ui);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

/* --- 7. Quest log (timeline) ------------------------------------------- */
.quest { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.quest > li {
  position: relative;
  padding: 0 0 calc(var(--step) * 2) calc(var(--step) * 5);
  counter-increment: q;
}
.quest > li::before {
  content: counter(q);
  position: absolute;
  left: 0; top: 2px;
  width: calc(var(--step) * 3.5); height: calc(var(--step) * 3.5);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 700;
  color: var(--paper);
  background: var(--quest);
  border: var(--edge) solid var(--ink);
}
.quest > li::after {
  content: "";
  position: absolute;
  left: calc(var(--step) * 1.75 - 1.5px);
  top: calc(var(--step) * 3.5 + 4px);
  bottom: var(--step);
  width: var(--edge);
  background: repeating-linear-gradient(180deg, var(--parch-deep) 0 6px, transparent 6px 12px);
}
.quest > li:last-child { padding-bottom: 0; }
.quest > li:last-child::after { display: none; }
.quest__time {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .08em;
}
.quest__where { margin: 2px 0 0; }

/* --- 8. Nav / buttons -------------------------------------------------- */
.nav { margin: calc(var(--step) * 3) 0 calc(var(--step) * 2); }
.nav form { display: inline-block; margin: 0; }
.nav ul {
  display: flex; flex-wrap: wrap; gap: var(--step);
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
}

.btn,
.nav a {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--parch);
  border: var(--edge) solid var(--ink);
  box-shadow: 4px 4px 0 0 rgba(43, 33, 64, .32);
  padding: calc(var(--step) * 1.25) calc(var(--step) * 2);
  cursor: pointer;
  min-height: 44px;
}
.nav a.nav__rsvp {
  background: var(--quest);
  color: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 4px 4px 0 0 rgba(43, 33, 64, .32);
}
/* the RPG menu cursor: two arrows pointing at the one button that matters */
@keyframes cursor-blink { 0%, 55% { opacity: 1; } 60%, 100% { opacity: .15; } }
.nav a.nav__rsvp::before { content: "\25B6\00a0"; }
.nav a.nav__rsvp::after { content: "\00a0\25C0"; }
.nav a.nav__rsvp::before,
.nav a.nav__rsvp::after {
  display: inline-block;
  color: var(--gold);
  animation: cursor-blink 1.2s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav a.nav__rsvp::before, .nav a.nav__rsvp::after { animation: none; }
}
.nav a.nav__rsvp:hover { background: var(--quest-bright, #d0523f); color: var(--paper); }
.nav a:hover, .btn:hover { background: var(--parch-warm); color: var(--ink); }
.nav a:active, .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 rgba(43, 33, 64, .32); }

.nav a.nav__rsvp[aria-current="page"] { background: var(--quest); color: var(--paper); }
.nav a[aria-current="page"] {
  background: var(--gold);
  box-shadow: inset 0 0 0 var(--edge) rgba(255, 255, 255, .5), 4px 4px 0 0 rgba(43, 33, 64, .32);
}

.btn--primary { background: var(--quest); color: var(--paper); }
.btn--primary:hover { background: #a93a30; color: var(--paper); }
.btn--go { background: var(--moss); color: var(--paper); }
.btn--go:hover { background: #688f4d; color: var(--paper); }
.btn--block { display: block; width: 100%; text-align: center; }

.upload-panel { border-color: var(--moss); }
.upload-success {
  margin-bottom: calc(var(--step) * 2);
  padding: calc(var(--step) * 1.5);
  background: #dff3df;
  border: var(--edge) solid #287a3e;
  box-shadow: inset 0 0 0 var(--edge) #b9e5bd;
}
.upload-success .panel__title { color: #1d6531; border-bottom-color: #8bc995; }
.upload-error {
  margin-bottom: calc(var(--step) * 2);
  padding: calc(var(--step) * 1.5);
  background: #f6ded9;
  border: var(--edge) solid var(--quest);
  color: #8c2a22;
}
.upload-error ul { margin: var(--step) 0 0; padding-left: 1.2rem; }
.upload-panel .btn--go {
  animation: upload-nudge 2.4s ease-in-out infinite;
  font-size: 1rem;
  padding-block: calc(var(--step) * 1.35);
}
@keyframes upload-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  76% { transform: translateY(-2px); }
  82% { transform: translateY(0); }
  88% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .upload-panel .btn--go { animation: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--step); align-items: center; }

/* language switch: a real POST form, works with JavaScript disabled */
.langswitch {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--step);
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 2);
}
.portraitpair--hero {
  max-width: 34rem;
  margin: calc(var(--step) * 2) auto 0;
}
.langswitch .btn { font-size: .8rem; padding: var(--step) calc(var(--step) * 1.5); }
/* the slim strip at the very top of every page */
.langswitch--top {
  justify-content: flex-end;
  margin: 0 0 calc(var(--step) * 1.5);
}
.langswitch--top .btn {
  font-size: .66rem;
  padding: 4px 10px;
  box-shadow: 2px 2px 0 0 rgba(43, 33, 64, .3);
}
.langswitch__label {
  font-family: var(--font-ui); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--indigo);
}
.langswitch .btn[aria-current="true"] {
  background: var(--gold);
  box-shadow: inset 0 0 0 var(--edge) rgba(255, 255, 255, .5), 4px 4px 0 0 rgba(43, 33, 64, .32);
}

/* --- 9. Forms ---------------------------------------------------------- */
.field { margin-bottom: calc(var(--step) * 2); }
.field > label,
.field .grouplabel,
.field legend {
  display: block;
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: calc(var(--step) * .75);
}
.field .helptext { display: block; font-size: .86rem; color: var(--ink-soft); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 2px 2px 0 0 rgba(43, 33, 64, .16);
  padding: calc(var(--step) * 1.25);
  min-height: 46px;
  border-radius: 0;
}
textarea { min-height: 8rem; line-height: 1.55; }

input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px;
  accent-color: var(--quest);
  margin: 0 var(--step) 0 0;
  flex: 0 0 auto;
}

.field ul { list-style: none; margin: 0; padding: 0; }
.field ul li { margin-bottom: calc(var(--step) * .75); }
.field ul li label { display: flex; align-items: center; gap: 2px; font-weight: 400; }
.field label > input[type="checkbox"],
.field label > input[type="radio"] { margin-right: 8px; vertical-align: -4px; }
.field > div { margin-bottom: calc(var(--step) * .75); }
.field > div > label { font-weight: 400; }

fieldset { margin: 0 0 calc(var(--step) * 2); padding: 0; border: 0; }

.guest-card { margin-bottom: calc(var(--step) * 2); }
.guest-card .panel__title { color: var(--indigo); }

.errorlist {
  list-style: none; margin: 0 0 var(--step); padding: var(--step) calc(var(--step) * 1.5);
  background: #f6ded9;
  border: var(--edge) solid var(--quest);
  color: #8c2a22;
  font-size: .92rem;
}

.messages { list-style: none; margin: 0 0 calc(var(--step) * 2); padding: 0; }
.messages li {
  padding: calc(var(--step) * 1.5);
  background: var(--paper);
  border: var(--edge) solid var(--moss);
  box-shadow: 4px 4px 0 0 rgba(43, 33, 64, .2);
  font-family: var(--font-ui);
  font-size: .92rem;
}
.messages li.error { border-color: var(--quest); }

/* --- 10. Gallery ------------------------------------------------------- */
.gallery {
  display: grid;
  gap: calc(var(--step) * 1.5);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.gallery li {
  border: var(--edge) solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 0 rgba(43, 33, 64, .25);
  overflow: hidden;
}
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery a:focus-visible img { outline: none; }

.empty {
  text-align: center;
  padding: calc(var(--step) * 4) calc(var(--step) * 2);
  border: var(--edge) dashed var(--parch-deep);
  background: var(--paper);
}

/* --- 11. Invitation gate ---------------------------------------------- */
.gate {
  min-height: 70vh;
  display: grid;
  place-items: center;
}
.gate__box { width: 100%; max-width: 24rem; text-align: center; }
.gate__box h1 { font-size: 1.3rem; margin-bottom: calc(var(--step) * 2); }
.gate__box .field > label { text-align: left; }

/* --- 12. Venues & map -------------------------------------------------- */
.venue { display: grid; gap: calc(var(--step) * 2); }
@media (min-width: 620px) { .venue { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.venue__art {
  width: 100%;
  border: var(--edge) solid var(--ink);
  background: var(--sky);
  image-rendering: pixelated;
}
.venue__addr { font-family: var(--font-ui); font-size: .92rem; line-height: 1.7; }

.map { border: var(--edge) solid var(--ink); background: var(--sea); }
.map img { width: 100%; }

.party { list-style: none; margin: 0; padding: 0; }
.party li {
  font-family: var(--font-ui); font-size: .92rem;
  padding: calc(var(--step) * .75) 0;
  border-bottom: 1px dashed var(--parch-deep);
}
.party li:last-child { border-bottom: 0; }

.map__note { margin-top: var(--step); }

.factlist { margin: 0; }
.factlist dt {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: var(--step);
}
.factlist dd { margin: 2px 0 0; }

.footer {
  max-width: 1240px;
  margin: calc(var(--step) * 4) auto 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--indigo);
}

.hearts { color: var(--rose); letter-spacing: .3em; }

/* --- 12b. Landing page: map plus calls to action ---------------------- */
.simple { max-width: 60rem; margin: 0 auto; }

.portraitpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--step) * 1.5);
}
.portraitpair .card-person img { max-width: 130px; }

.mapfigure { margin: 0; }
.mapfigure img {
  width: 100%;
  display: block;
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 var(--edge) var(--parch-warm), var(--shadow-hard);
}
.mapfigure figcaption { margin-top: calc(var(--step) * 1.5); }

/* the calls to action: big, obvious, one row on desktop */
.ctarow {
  display: grid;
  gap: calc(var(--step) * 1.5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ctarow { grid-template-columns: repeat(3, 1fr); } }

.cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--ink);
  background: var(--parch);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 var(--edge) var(--parch-warm), 5px 5px 0 0 rgba(43, 33, 64, .32);
  padding: calc(var(--step) * 2.5) var(--step);
  min-height: 64px;
}
.cta:hover { background: var(--parch-warm); color: var(--ink); }
.cta:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 var(--edge) var(--parch-warm), 3px 3px 0 0 rgba(43, 33, 64, .32); }
.cta--primary { background: var(--quest); color: var(--paper); box-shadow: inset 0 0 0 var(--edge) rgba(255,255,255,.22), 5px 5px 0 0 rgba(43, 33, 64, .32); }
.cta--primary:hover { background: #a93a30; color: var(--paper); }
.cta__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
}

/* the two stops, as plain readable text under the map */
.stops { display: grid; gap: calc(var(--step) * 2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .stops { grid-template-columns: 1fr 1fr; } }
.stop__when {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .04em; margin: 0;
}
.stop__what { font-family: var(--font-ui); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2px; }

.knowlist { list-style: none; margin: 0; padding: 0; }
.knowlist li {
  display: flex; gap: var(--step); align-items: flex-start;
  padding: var(--step) 0;
  border-bottom: 1px dashed var(--parch-deep);
}
.knowlist li:last-child { border-bottom: 0; }
.knowlist img { flex: 0 0 auto; image-rendering: pixelated; }
.knowlist p { margin: 0; font-size: .95rem; }
.knowlist strong { font-family: var(--font-ui); font-size: .88rem; letter-spacing: .06em; }

/* --- 12c. The story of the day, played on the map ---------------------- */
.scene { position: relative; }
.scene__view { position: relative; }
.scene__stage { position: relative; overflow: hidden;
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 var(--edge) var(--parch-warm), var(--shadow-hard);
}
.scene__stage > img.scene__map { width: 100%; display: block; border: 0; box-shadow: none; }

/* evening falls for the party: blue wash plus a warm glow on the pub */
.scene__dusk {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  background:
    radial-gradient(circle at 70.5% 84%, rgba(255, 208, 106, .55) 0%, rgba(255, 208, 106, 0) 16%),
    linear-gradient(rgba(38, 42, 92, .34), rgba(38, 42, 92, .34));
}

/* ---- the two venue callouts, drawn in code over the map ---- */
.callout {
  position: absolute; z-index: 4;
  width: clamp(11rem, 24%, 15rem);
  background: var(--quest);
  color: var(--paper);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 5px 5px 0 0 rgba(43, 33, 64, .4);
  padding: var(--step) calc(var(--step) * 1.5);
  display: none;
}
@media (min-width: 700px) { .callout { display: block; } }
.callout::before {           /* chunky pointer on the left side, low down */
  content: "";
  position: absolute;
  left: -9px; bottom: 16px;
  width: 16px; height: 16px;
  background: var(--quest);
  border-left: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  transform: rotate(45deg);
}
.callout--flip::before { left: auto; right: -9px; transform: rotate(225deg); }
.callout h3 {
  color: var(--paper);
  font-size: clamp(.72rem, 1.35vw, .95rem);
  letter-spacing: .14em;
  margin: 0 0 4px;
}
.callout p { margin: 0; font-size: clamp(.68rem, 1.25vw, .9rem); line-height: 1.45; }
.callout .pin__when {
  display: inline-block; margin-top: 6px; padding: 1px 8px;
  background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(.7rem, 1.25vw, .88rem);
}
.callout--ceremony { left: 47%; top: 3.5%; width: clamp(12rem, 30%, 19rem); }
.callout--party    { left: 76%; top: 63%; }

/* ---- actors: two-frame sprite sheets, anchored by their feet ---- */
.actor {
  position: absolute;
  width: clamp(24px, 4.2%, 46px);
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 6;               /* the cast always walks in front of the scenery */
}
.actor--wide { width: clamp(42px, 7.4%, 82px); }
.sp-cpl { z-index: 7; }        /* the newlyweds walk in front of everyone */
.actor--crowd { width: clamp(52px, 9.2%, 104px); }
.actor .sheet {
  display: block; width: 100%;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0;
  image-rendering: pixelated;
}
.sheet--att { aspect-ratio: 20 / 28; background-image: url("walk-attila.svg"); }
.sheet--kat { aspect-ratio: 20 / 28; background-image: url("walk-katalin.svg"); }
.sheet--cpl { aspect-ratio: 36 / 28; background-image: url("walk-couple.svg"); }
.sheet--gst { aspect-ratio: 46 / 28; background-image: url("party-guests.svg"); }
.actor--flip .sheet { transform: scaleX(-1); }

/* pausing freezes every animation on the stage, mid-stride */
.scene--paused .scene__stage *,
.scene--paused .scene__stage *::before,
.scene--paused .scene__stage *::after { animation-play-state: paused !important; }

/* two-frame cycle: frame 1, frame 2, repeat */
@keyframes cycle {
  0%, 49.99% { background-position-x: 0%; }
  50%, 100%  { background-position-x: 100%; }
}
.scene--js .actor .sheet { animation: cycle .55s infinite; }

/* ---- chapter positions ----
   0 waiting | 1 walk 09:45 | 2 kiss 10:00 | 3 photos 10:30
   4 route 12:00 | 5 feast and games | 6 band and dancing 20:00 */
.scene[data-ch="0"] .sp-att { left: 33%; top: 12%; }
.scene[data-ch="0"] .sp-kat { left: 54%; top: 45%; }
/* idle: a slower shuffle while they wait */
.scene--js[data-ch="0"] .actor .sheet { animation-duration: 1.6s; }

/* the wedding guests gather at 09:45 ... */
.scene[data-ch="1"] .sp-gst,
.scene[data-ch="2"] .sp-gst,
.scene[data-ch="3"] .sp-gst { display: block; left: 45.5%; top: 21%; }
.scene[data-ch="1"] .sp-gst { animation: pop-in .6s .4s ease-out backwards; }
.scene--js[data-ch="1"] .sp-gst .sheet { animation-duration: 1.4s; }
/* ... slip inside for the ceremony, leaving the two of them at the door ... */
@keyframes gst-out { from { opacity: 1; } to { opacity: 0; } }
.scene[data-ch="2"] .sp-gst { opacity: 0; }
.scene--js[data-ch="2"] .sp-gst { animation: gst-out .6s .2s ease-out both; }
/* ... and the second camera flash reveals them back in the picture */
@keyframes gst-in { from { opacity: 0; } to { opacity: 1; } }
.scene[data-ch="3"] .sp-gst .sheet { animation: none; background-position-x: 0%; }
.scene--js[data-ch="3"] .sp-gst { animation: gst-in .15s 1.55s linear both; }

@keyframes walk-att { from { left: 33%; top: 12%; } 55% { left: 36%; top: 16.5%; } to { left: 38.7%; top: 23%; } }
@keyframes walk-kat { from { left: 54%; top: 45%; } 55% { left: 46%; top: 33%; } to { left: 40.6%; top: 23%; } }
.scene[data-ch="1"] .sp-att { left: 38.7%; top: 23%; animation: walk-att 2.6s linear forwards; }
.scene[data-ch="1"] .sp-kat { left: 40.6%; top: 23%; animation: walk-kat 2.6s linear forwards; }

/* the ceremony, beat by beat: stand at the altar, rings, the lean, the kiss */
.scene[data-ch="2"] .sp-att { left: 39%; top: 23%; }
.scene[data-ch="2"] .sp-kat { left: 40.6%; top: 23%; }
.scene[data-ch="2"] .sp-att .sheet,
.scene[data-ch="2"] .sp-kat .sheet { animation: none; background-position-x: 0%; }
@keyframes lean-l { to { transform: translate(-50%, -100%) rotate(7deg); } }
@keyframes lean-r { to { transform: translate(-50%, -100%) rotate(-7deg); } }
.scene--js[data-ch="2"] .sp-att { animation: lean-l .5s 1.5s ease-in-out forwards; }
.scene--js[data-ch="2"] .sp-kat { animation: lean-r .5s 1.5s ease-in-out forwards; }
.ring-pop { position: absolute; z-index: 4; pointer-events: none;
  left: 39.8%; top: 19%;
  width: clamp(11px, 1.8%, 20px);
  opacity: 0; transform: translate(-50%, -40%) scale(.4);
  display: none; }
.ring-pop img { width: 100%; display: block; image-rendering: pixelated; }
@keyframes ring-rise {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.4); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translate(-50%, -150%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1.05); }
}
.scene--js[data-ch="2"] .ring-pop { display: block; animation: ring-rise 1.5s .2s ease-out forwards; }

/* 10:30, photos: pose for the camera */
.sp-photog, .sp-pol, .scene__flash { display: none; }
.scene[data-ch="3"] .sp-att { left: 38.9%; top: 23%; }
.scene[data-ch="3"] .sp-kat { left: 41%; top: 23%; }
.scene[data-ch="3"] .sp-att .sheet,
.scene[data-ch="3"] .sp-kat .sheet { animation: none; background-position-x: 0%; }
.scene[data-ch="3"] .sp-photog { display: block; left: 35%; top: 25.5%;
  animation: pop-in .4s ease-out backwards; }
@keyframes photog-snap {
  0%, 78% { transform: translate(-50%, -100%); }
  80%, 92% { transform: translate(-50%, -102%); }
  100% { transform: translate(-50%, -100%); }
}
.scene--js[data-ch="3"] .sp-photog { animation: pop-in .4s ease-out backwards, photog-snap 1.3s .6s infinite; }
.scene__flash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: #fff; opacity: 0;
}
@keyframes flash-3 {
  0%, 100% { opacity: 0; }
  10% { opacity: .5; } 15% { opacity: 0; }
  38% { opacity: .5; } 43% { opacity: 0; }
  68% { opacity: .45; } 74% { opacity: 0; }
}
.scene--js[data-ch="3"] .scene__flash { display: block; animation: flash-3 2.6s .6s ease-out forwards; }
.sp-pol { z-index: 4; width: clamp(20px, 3.4%, 38px); }
.sp-pol img { width: 100%; display: block; image-rendering: pixelated; }
@keyframes pol-pop {
  0% { opacity: 0; transform: translate(-50%, -60%) rotate(0) scale(.5); }
  100% { opacity: 1; transform: translate(-50%, -110%) rotate(-8deg) scale(1); }
}
.scene[data-ch="3"] .sp-pol { display: block; left: 35.2%; top: 16.5%;
  animation: pol-pop .5s 2.6s ease-out backwards; }

/* married: one sprite, walking the real route */
.sp-cpl, .sp-gst, .sp-cake, .sp-feast, .sp-die, .sp-cordon, .sp-public, .sp-band,
.sp-tipsy, .sp-pints, .bubble-hic, .scene .note { display: none; }
@keyframes route-walk {
  from { left: 39.6%; top: 24%; }
  15%  { left: 40%;   top: 33%; }
  30%  { left: 40.5%; top: 44%; }
  42%  { left: 43.5%; top: 50%; }
  52%  { left: 41%;   top: 55%; }
  66%  { left: 46%;   top: 63%; }
  78%  { left: 50%;   top: 71%; }
  90%  { left: 56.5%; top: 80%; }
  to   { left: 60%;   top: 89%; }
}
.scene[data-ch="4"] .sp-att, .scene[data-ch="4"] .sp-kat,
.scene[data-ch="5"] .sp-att, .scene[data-ch="5"] .sp-kat,
.scene[data-ch="6"] .sp-att, .scene[data-ch="6"] .sp-kat,
.scene[data-ch="7"] .sp-att, .scene[data-ch="7"] .sp-kat { display: none; }
.scene[data-ch="4"] .sp-cpl { display: block; left: 60%; top: 89%;
  animation: route-walk 7s linear forwards; }
.scene[data-ch="4"] .sp-cpl .sheet { animation-duration: .4s; }
@keyframes route-walk-gst {
  from { left: 39.6%; top: 24%; }
  15%  { left: 40%;   top: 33%; }
  30%  { left: 40.5%; top: 44%; }
  42%  { left: 43.5%; top: 50%; }
  52%  { left: 41%;   top: 55%; }
  66%  { left: 46%;   top: 63%; }
  78%  { left: 50%;   top: 71%; }
  90%  { left: 56%;   top: 79.5%; }
  to   { left: 55%;   top: 90%; }
}
.scene[data-ch="4"] .sp-gst { display: block; left: 55%; top: 90%;
  animation: route-walk-gst 7s .6s linear both; }
.scene--js[data-ch="4"] .sp-gst .sheet { animation-duration: .45s; }

/* hearts left behind along the way */
.heart--trail { opacity: 0; }
@keyframes trail-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  40% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
  100% { opacity: .85; transform: translate(-50%, -70%) scale(.8); }
}
.scene[data-ch="4"] .heart--trail { animation: trail-pop .6s ease-out forwards; }
.scene[data-ch="5"] .heart--trail,
.scene[data-ch="6"] .heart--trail,
.scene[data-ch="7"] .heart--trail { opacity: .85; transform: translate(-50%, -70%) scale(.8); }

/* 12:00 to 20:00 at the pub: lunch and games in daylight */
.scene[data-ch="5"] .sp-cpl { display: block; left: 60%; top: 89%; }
.scene--js[data-ch="5"] .sp-cpl .sheet { animation-duration: 1.2s; }
@keyframes sway {
  from { transform: translate(-50%, -100%) rotate(-2.5deg); }
  to   { transform: translate(-50%, -100%) rotate(2.5deg); }
}
.scene[data-ch="5"] .sp-gst { display: block; left: 54.5%; top: 89.5%;
  animation: pop-in .5s ease-out backwards; }
.scene--js[data-ch="5"] .sp-gst { animation: pop-in .5s ease-out backwards,
  sway 1.8s .6s infinite alternate ease-in-out; }
.scene--js[data-ch="5"] .sp-gst .sheet { animation-duration: 1s; animation-delay: .5s; }

/* one of us is having a wonderful time on the beach */
.sp-tipsy { z-index: 2; width: clamp(26px, 4.6%, 50px); }
.sp-tipsy img { width: 100%; display: block; image-rendering: pixelated;
  transform-origin: 50% 90%; }
@keyframes tipsy-wander {
  0% { left: 52.5%; } 22% { left: 56%; } 45% { left: 54%; }
  70% { left: 58%; } 100% { left: 52.5%; }
}
@keyframes tipsy-tilt {
  0% { transform: rotate(-8deg); } 30% { transform: rotate(9deg); }
  55% { transform: rotate(-11deg); } 80% { transform: rotate(7deg); }
  100% { transform: rotate(-8deg); }
}
.scene[data-ch="5"] .sp-tipsy { display: block; left: 54.5%; top: 94.5%;
  animation: pop-in .5s 1.4s ease-out backwards; }
.scene--js[data-ch="5"] .sp-tipsy { animation: pop-in .5s 1.4s ease-out backwards, tipsy-wander 5.5s 1.9s ease-in-out infinite; }
.scene--js[data-ch="5"] .sp-tipsy img { animation: tipsy-tilt 5.5s 1.9s ease-in-out infinite; }

/* pints clinking over the table */
.sp-pints { z-index: 3; width: clamp(16px, 2.6%, 30px); }
.sp-pints img { width: 100%; display: block; image-rendering: pixelated; }
@keyframes clink {
  0%, 100% { transform: translate(-50%, -100%) scale(1); }
  50% { transform: translate(-50%, -112%) scale(1.12); }
}
.scene[data-ch="5"] .sp-pints { display: block; left: 62.8%; top: 84%;
  animation: pop-in .5s .6s ease-out backwards; }
.scene--js[data-ch="5"] .sp-pints { animation: pop-in .5s .6s ease-out backwards,
  clink 1.1s 1.2s infinite ease-in-out; }

/* the occasional hic */
.bubble-hic {
  position: absolute; z-index: 4; pointer-events: none;
  left: 58.5%; top: 89.5%;
  transform: translate(-50%, -100%);
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  box-shadow: 2px 2px 0 0 rgba(43, 33, 64, .3);
  padding: 1px 7px;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.6rem, 1.2vw, .8rem);
  opacity: 0;
}
@keyframes hic-pop {
  0%, 58% { opacity: 0; }
  63%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.scene--js[data-ch="5"] .bubble-hic { display: block; animation: hic-pop 5.5s 1.9s infinite; }
.scene[data-ch="5"] .sp-cake { display: block; left: 57.5%; top: 84.5%;
  width: clamp(16px, 2.6%, 28px); animation: pop-in .5s .35s ease-out backwards; }
.sp-feast { z-index: 2; width: clamp(30px, 5.4%, 60px); }
.sp-feast img, .sp-die img { width: 100%; display: block; image-rendering: pixelated; }
.scene[data-ch="5"] .sp-feast, .scene[data-ch="6"] .sp-feast { display: block; left: 64.5%; top: 90%; }
.scene[data-ch="5"] .sp-feast { animation: pop-in .5s .55s ease-out backwards; }
.sp-die { z-index: 3; width: clamp(9px, 1.4%, 16px); }
@keyframes die-toss {
  0% { transform: translate(-50%, -100%) rotate(0); }
  50% { transform: translate(-50%, -260%) rotate(180deg); }
  100% { transform: translate(-50%, -100%) rotate(360deg); }
}
.scene[data-ch="5"] .sp-die { display: block; left: 52.5%; top: 83.5%; }
.scene--js[data-ch="5"] .sp-die { animation: die-toss 1.3s 1s ease-in-out infinite; }
.scene[data-ch="5"] .note--2 { display: block; animation: note-float 2.6s ease-out infinite; }

/* our own corner: the cordon stands from noon */
.sp-cordon { z-index: 2; width: clamp(18px, 3.2%, 36px); }
.sp-cordon img, .sp-public img, .sp-band img { width: 100%; display: block; image-rendering: pixelated; }
.scene[data-ch="5"] .sp-cordon, .scene[data-ch="6"] .sp-cordon { display: block; left: 50.5%; top: 88.5%; }
.scene[data-ch="5"] .sp-cordon { animation: pop-in .5s .15s ease-out backwards; }

/* 20:00: the pub's own band takes the stage, the public joins */
@keyframes dance {
  from { transform: translate(-50%, -100%); }
  to   { transform: translate(-50%, -100%) translateY(-6%) rotate(2deg); }
}
.scene[data-ch="6"] .sp-cpl { display: block; left: 60%; top: 89%; }
.scene--js[data-ch="6"] .sp-cpl { animation: dance .45s infinite alternate ease-in-out; }
.scene--js[data-ch="6"] .sp-cpl .sheet { animation-duration: .9s; }
.scene[data-ch="6"] .sp-gst { display: block; left: 57.5%; top: 88%; }
.scene--js[data-ch="6"] .sp-gst { animation: dance .45s .22s infinite alternate ease-in-out; }
.scene--js[data-ch="6"] .sp-gst .sheet { animation-duration: .9s; animation-delay: .45s; }
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -60%); } to { opacity: 1; transform: translate(-50%, -100%); } }
.scene[data-ch="6"] .sp-cake { display: block; left: 60.5%; top: 84%;
  width: clamp(16px, 2.6%, 28px); }
.sp-band { z-index: 2; width: clamp(34px, 6%, 68px); transform-origin: 50% 100%; }
@keyframes band-groove {
  from { transform: translate(-50%, -100%) rotate(-1.5deg); }
  to   { transform: translate(-50%, -100%) rotate(1.5deg); }
}
.scene[data-ch="6"] .sp-band { display: block; left: 67%; top: 91.5%;
  animation: pop-in .5s .7s ease-out backwards; }
.scene--js[data-ch="6"] .sp-band { animation: pop-in .5s .7s ease-out backwards,
  band-groove .6s 1.3s infinite alternate ease-in-out; }
.sp-public { z-index: 2; width: clamp(28px, 5%, 58px); }
.scene[data-ch="6"] .sp-public { display: block; left: 46.5%; top: 89.5%;
  animation: pop-in .5s 1.2s ease-out backwards; }
.scene--js[data-ch="6"] .sp-public { animation: pop-in .5s 1.2s ease-out backwards,
  dance .5s 1.8s infinite alternate ease-in-out; }
/* the wanderer sways along at the back through the concert */
.scene[data-ch="6"] .sp-tipsy { display: block; left: 44%; top: 94%; }
.scene--js[data-ch="6"] .sp-tipsy img { animation: tipsy-tilt 3.5s ease-in-out infinite; }
.sp-cake img { width: 100%; display: block; image-rendering: pixelated; }
.scene[data-ch="6"] .scene__dusk, .scene[data-ch="7"] .scene__dusk { opacity: 1; }
.scene__night {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  background: linear-gradient(rgba(18, 22, 58, .3), rgba(18, 22, 58, .3));
}
.scene[data-ch="7"] .scene__night { opacity: 1; }

/* The Jolly Sailor herself, a permanent landmark on the map */
.scene__pub {
  position: absolute; left: 71%; top: 89.5%; z-index: 0;
  width: clamp(60px, 9.5%, 122px);
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(43, 33, 64, .18));
}

/* 22:00: last song sung, everyone still (mostly) standing */
@keyframes drunk-sway {
  from { background-position-x: 0%; transform: rotate(-5deg); }
  49.99% { background-position-x: 0%; }
  50% { background-position-x: 100%; }
  to { background-position-x: 100%; transform: rotate(5deg); }
}
.scene[data-ch="7"] .sp-cpl { display: block; left: 61.5%; top: 90.5%; }
.scene--js[data-ch="7"] .sp-cpl .sheet { animation: drunk-sway 1.5s infinite alternate ease-in-out; }
.scene[data-ch="7"] .sp-gst { display: block; left: 53%; top: 90%; }
.scene--js[data-ch="7"] .sp-gst .sheet { animation: drunk-sway 1.7s .4s infinite alternate ease-in-out; }
.scene[data-ch="7"] .sp-cordon { display: block; left: 48.5%; top: 88%; }
.scene[data-ch="7"] .sp-cake { display: block; left: 56.5%; top: 83.5%;
  width: clamp(16px, 2.6%, 28px); }
.scene[data-ch="7"] .sp-feast { display: block; left: 66.5%; top: 91%; }
.scene[data-ch="7"] .sp-pints { display: block; left: 65%; top: 83%; }
/* our friend has found the horizontal */
.scene[data-ch="7"] .sp-tipsy { display: block; left: 43.5%; top: 94%; }
.scene[data-ch="7"] .sp-tipsy img { transform: rotate(90deg); }
.bubble-zzz {
  position: absolute; z-index: 4; pointer-events: none;
  left: 42.5%; top: 89%;
  transform: translate(-50%, -100%);
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  box-shadow: 2px 2px 0 0 rgba(43, 33, 64, .3);
  padding: 1px 7px;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.6rem, 1.2vw, .8rem);
  opacity: 0; display: none;
}
@keyframes zzz-drift { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } }
.scene--js[data-ch="7"] .bubble-zzz { display: block; animation: zzz-drift 3.2s 1s infinite; }
/* moon and stars over the harbour */
.sp-moon, .star { display: none; }
.sp-moon { position: absolute; z-index: 2; width: clamp(14px, 2.2%, 26px);
  transform: translate(-50%, -50%); pointer-events: none; }
.sp-moon img { width: 100%; display: block; image-rendering: pixelated; }
.scene[data-ch="7"] .sp-moon { display: block; left: 9%; top: 16%;
  animation: pop-in .8s ease-out backwards; }
.star { position: absolute; z-index: 2; width: 4px; height: 4px;
  background: var(--gold); pointer-events: none; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.scene[data-ch="7"] .star { display: block; }
.scene--js[data-ch="7"] .star { animation: twinkle 1.1s infinite alternate; }
.scene--js[data-ch="7"] .star--2 { animation-delay: .55s; }

/* the afterparty: the two of them walk clean off the map */
@keyframes walk-off {
  from { left: 61.5%; top: 90.5%; }
  30%  { left: 50%;   top: 70%; }
  60%  { left: 42%;   top: 45%; }
  85%  { left: 34%;   top: 20%; }
  to   { left: 29%;   top: -8%; }
}
.scene[data-ch="8"] .sp-cpl { display: block; left: 33%; top: 15%; }
.scene--js[data-ch="8"] .sp-cpl { animation: walk-off 5.2s linear forwards; }
.scene--js[data-ch="8"] .sp-cpl .sheet { animation: cycle .5s infinite; }
/* the common's newest resident stays */
.scene[data-ch="8"] .sp-tipsy { display: block; left: 43.5%; top: 94%; }
.scene[data-ch="8"] .sp-tipsy img { transform: rotate(90deg); }
.scene--js[data-ch="8"] .bubble-zzz { display: block; animation: zzz-drift 3.2s infinite; }
.scene[data-ch="8"] .sp-moon { display: block; left: 9%; top: 16%; }
.scene[data-ch="8"] .star { display: block; }
.scene--js[data-ch="8"] .star { animation: twinkle 1.1s infinite alternate; }
.scene--js[data-ch="8"] .star--2 { animation-delay: .55s; }
.scene[data-ch="8"] .scene__dusk, .scene[data-ch="8"] .scene__night { opacity: 1; }
.scene[data-ch="8"] .heart--trail { opacity: .85; transform: translate(-50%, -70%) scale(.8); }
.scene[data-ch="8"] .sp-att, .scene[data-ch="8"] .sp-kat { display: none; }

/* kiss hearts */
.heart { position: absolute; width: clamp(10px, 1.6%, 18px); transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; z-index: 3; }
.heart img { width: 100%; display: block; image-rendering: pixelated; }
@keyframes heart-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -270%) scale(1.15); }
}
.scene[data-ch="2"] .hearts--kiss .heart { animation: heart-pop 1.6s 2.2s ease-out infinite; }
.scene[data-ch="2"] .hearts--kiss .heart:nth-child(2) { animation-delay: 2.6s; }
.scene[data-ch="2"] .hearts--kiss .heart:nth-child(3) { animation-delay: 3s; }
.scene[data-ch="6"] .hearts--party .heart,
.scene[data-ch="7"] .hearts--party .heart { animation: heart-pop 2.4s 1.8s ease-out infinite; }
.scene[data-ch="6"] .hearts--party .heart:nth-child(2),
.scene[data-ch="7"] .hearts--party .heart:nth-child(2) { animation-delay: 1s; }

/* music notes at the pub */
.note { position: absolute; z-index: 3; font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(14px, 2.2vw, 22px); color: var(--paper); pointer-events: none;
  transform: translate(-50%, -100%); text-shadow: 1px 1px 0 var(--ink); }
@keyframes note-float {
  0% { opacity: 0; transform: translate(-50%, -80%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -240%); }
}
.scene[data-ch="6"] .note { display: block; animation: note-float 1.8s 1.5s ease-out infinite; }
.scene[data-ch="6"] .note--2 { animation-delay: 2.2s; }

/* on-map ticker: what is happening right now */
.scene__toast {
  position: absolute; left: 1.5%; top: 2%; z-index: 4;
  transition: top .9s ease, left .9s ease;
  display: none;
  background: var(--parch);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--parch-warm), 4px 4px 0 0 rgba(43, 33, 64, .35);
  padding: 6px 12px;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.7rem, 1.5vw, .95rem);
  letter-spacing: .06em;
  pointer-events: none;
  max-width: 42%;
}
.scene__toast .toast__msg { display: none; }
.scene--js .scene__toast .toast__msg { animation: cap-in .4s ease-out; }
.scene:not([data-ch="0"]) .scene__toast { display: block; }
.scene[data-ch="1"] .toast__msg--1 { display: block; }
.scene[data-ch="2"] .toast__msg--2 { display: block; }
.scene[data-ch="3"] .toast__msg--3 { display: block; }
.scene[data-ch="4"] .toast__msg--4 { display: block; }
.scene[data-ch="5"] .toast__msg--5 { display: block; }
.scene[data-ch="6"] .toast__msg--6 { display: block; }
.scene[data-ch="7"] .toast__msg--7 { display: block; }
.scene__toast .story__time { margin-right: 8px; }
.scene__toast .toast__flag {
  display: inline-block; width: 1.35em; height: auto;
  vertical-align: -0.18em; margin-left: 6px;
  image-rendering: pixelated;
  border: 1px solid var(--ink);
}
/* it follows the action southward */
.scene[data-ch="1"] .scene__toast { top: 26%; }
.scene[data-ch="2"] .scene__toast { top: 12%; }
.scene[data-ch="3"] .scene__toast { top: 17%; }
.scene[data-ch="4"] .scene__toast { top: 48%; }
.scene[data-ch="5"] .scene__toast { top: 50%; }
.scene[data-ch="6"] .scene__toast { top: 55%; }
.scene[data-ch="7"] .scene__toast { top: 60%; }
.scene[data-ch="8"] .scene__toast { top: 65%; }
.scene[data-ch="8"] .toast__msg--8 { display: block; }

/* "I do!" above the kiss */
.bubble-kiss {
  position: absolute; z-index: 4; pointer-events: none;
  left: 41.5%; top: 13%;
  transform: translate(-50%, -100%);
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  box-shadow: 3px 3px 0 0 rgba(43, 33, 64, .3);
  padding: 3px 10px;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.68rem, 1.4vw, .92rem);
  opacity: 0; display: none;
}
.bubble-kiss::after {
  content: "";
  position: absolute; left: 18%; bottom: -8px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-right: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  transform: rotate(45deg);
}
@keyframes bubble-in {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
.scene[data-ch="2"] .bubble-kiss { display: block; animation: bubble-in .45s 2s ease-out forwards; }

/* reduced motion: every chapter still reads as a still frame */
@media (prefers-reduced-motion: reduce) {
  .scene--js .actor .sheet { animation: none; }
  .scene__dusk { transition: none; }
  .scene--js[data-ch="3"] .scene__flash { display: none; animation: none; }
  .scene[data-ch="3"] .sp-pol { animation: none; opacity: 1; transform: translate(-50%, -110%) rotate(-8deg); }
  .scene--js[data-ch="5"] .sp-die { animation: none; }
  .scene[data-ch="2"] .hearts--kiss .heart,
  .scene[data-ch="6"] .hearts--party .heart {
    animation: none; opacity: 1; transform: translate(-50%, -160%);
  }
  .scene[data-ch="2"] .hearts--kiss .heart:nth-child(2),
  .scene[data-ch="2"] .hearts--kiss .heart:nth-child(3),
  .scene[data-ch="6"] .hearts--party .heart:nth-child(2) { display: none; }
  .scene[data-ch="5"] .note--2, .scene[data-ch="6"] .note { animation: none; opacity: 1; }
  .scene[data-ch="4"] .heart--trail { animation: none; opacity: .85; transform: translate(-50%, -70%) scale(.8); }
  .scene[data-ch="2"] .bubble-kiss { animation: none; opacity: 1; }
  .scene--js[data-ch="2"] .ring-pop { display: none; }
  .scene--js[data-ch="2"] .sp-att { animation: none; transform: translate(-50%, -100%) rotate(7deg); }
  .scene--js[data-ch="2"] .sp-kat { animation: none; transform: translate(-50%, -100%) rotate(-7deg); }
  .scene--js[data-ch="3"] .sp-photog { animation: none; }
  .scene--js[data-ch="6"] .sp-tipsy img { animation: none; }
  .scene--js[data-ch="6"] .sp-band, .scene--js[data-ch="6"] .sp-public { animation: none; }
  .scene--js[data-ch="5"] .sp-gst, .scene--js[data-ch="5"] .sp-tipsy,
  .scene--js[data-ch="5"] .sp-tipsy img, .scene--js[data-ch="5"] .sp-pints { animation: none; }
  .scene--js[data-ch="5"] .bubble-hic { animation: none; opacity: 1; }
  .scene--js[data-ch="7"] .sp-cpl .sheet, .scene--js[data-ch="7"] .sp-gst .sheet,
  .scene--js[data-ch="7"] .star { animation: none; }
  .scene--js[data-ch="7"] .bubble-zzz { animation: none; opacity: 1; }
  .scene--js[data-ch="8"] .sp-cpl { animation: none; }
  .scene--js[data-ch="8"] .sp-cpl .sheet { animation: none; }
  .scene--js[data-ch="8"] .bubble-zzz { animation: none; opacity: 1; }
  .scene--js[data-ch="8"] .star { animation: none; }
  .scene__toast { transition: none; }
  .scene--js .scene__toast .toast__msg { animation: none; }
}

/* ---- controls live on the map, over the harbour ---- */
.scene__controls {
  position: absolute; left: 1.2%; bottom: 2.5%; z-index: 8;
  display: flex; gap: 8px; align-items: center;
}
.scene__controls .btn {
  min-width: 44px; min-height: 44px;
  padding: 8px 12px;
  font-size: clamp(.68rem, 1.5vw, .9rem);
}

/* on small screens the map keeps only sprites: the ticker becomes a strip
   between map and controls, and the controls a bar beneath it */
@media (max-width: 699px) {
  .scene__toast {
    position: static;
    max-width: none;
    margin-top: calc(var(--step) * 1.5);
    min-height: 44px;
    transition: none;
  }
  .scene__controls {
    position: static;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: calc(var(--step) * 1.5);
    padding: 8px 6px;
    background: var(--parch);
    border: var(--edge) solid var(--ink);
    box-shadow: 4px 4px 0 0 rgba(43, 33, 64, .32);
  }
  .scene__start { bottom: 4%; max-width: 72%; }
}

/* the arcade invitation, chapter zero only */
.scene__start {
  position: absolute; left: 1.5%; bottom: 16%; z-index: 8;
  display: none;
  align-items: center; gap: 8px;
  background: var(--parch);
  border: var(--edge) solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--parch-warm), 4px 4px 0 0 rgba(43, 33, 64, .35);
  padding: 8px 12px;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.66rem, 1.5vw, .92rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  pointer-events: none;
  max-width: 60%;
}
.scene--js[data-ch="0"] .scene__start { display: flex; }
.scene__start img { width: 1.3em; height: auto; image-rendering: pixelated; }
@keyframes start-blink { 0%, 55% { opacity: 1; } 60%, 100% { opacity: .25; } }
.scene__start .start__line { animation: start-blink 1.4s steps(1) infinite; }
@keyframes arrow-hop { from { transform: translateY(0); } to { transform: translateY(4px); } }
.scene__start .start__arrow { animation: arrow-hop .5s infinite alternate ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .scene__start .start__line, .scene__start .start__arrow { animation: none; }
}

[data-play]::after { content: "\25B6  Play the day"; }
html[data-lang="hu"] [data-play]::after { content: "\25B6  Nap lejátszása"; }
[data-play][data-state="playing"]::after { content: "\275A\275A  Pause"; }
html[data-lang="hu"] [data-play][data-state="playing"]::after { content: "\275A\275A  Szünet"; }
[data-play][data-state="replay"]::after { content: "\21BB  Play it again"; }
html[data-lang="hu"] [data-play][data-state="replay"]::after { content: "\21BB  Újra"; }


.story { list-style: none; margin: calc(var(--step) * 1.5) 0 0; padding: 0; }
.story > li {
  position: relative;
  padding: calc(var(--step) * 1.25) var(--step) calc(var(--step) * 1.25) calc(var(--step) * 5.5);
  border-left: var(--edge) solid transparent;
}
.story > li + li { border-top: 2px dashed var(--parch-warm); }
.scene--js .story > li { cursor: pointer; }
.scene--js .story > li:hover { background: rgba(233, 185, 63, .12); }
.story__jump {
  position: absolute; left: 0; top: calc(var(--step) * 1.25);
  width: calc(var(--step) * 3.5); height: calc(var(--step) * 3.5);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
  color: var(--paper); background: var(--quest);
  border: var(--edge) solid var(--ink);
  box-shadow: 3px 3px 0 0 rgba(43, 33, 64, .3);
  padding: 0; cursor: pointer;
}
.story__jump:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 rgba(43, 33, 64, .3); }
.story__tick { display: none; }
.story > li.is-done .story__jump { background: var(--moss); }
.story > li.is-done .story__num { display: none; }
.story > li.is-done .story__tick { display: block; }
.story > li.is-active { border-left-color: var(--gold); background: rgba(233, 185, 63, .16); }
.story > li.is-active .story__jump { background: var(--gold); color: var(--ink); }
.story .story__time {
  display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px;
  background: var(--gold); border: 2px solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: .88rem;
}
.story p { margin: 0; }
.story .btn { margin-top: var(--step); position: relative; z-index: 1; }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- 12y. Select fields: a chunky pixel arrow instead of the OS one ----- */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: calc(var(--step) * 5);
  /* two stacked triangles drawn in the gradient, plus a gold well behind them */
  background-image:
    linear-gradient(45deg, transparent 47%, var(--ink) 47%, var(--ink) 62%, transparent 62%),
    linear-gradient(-45deg, transparent 47%, var(--ink) 47%, var(--ink) 62%, transparent 62%),
    linear-gradient(var(--gold), var(--gold));
  background-position:
    right calc(var(--step) * 2.1) center,
    right calc(var(--step) * 1.05) center,
    right 0 center;
  background-size: 9px 9px, 9px 9px, calc(var(--step) * 4) 100%;
  background-repeat: no-repeat;
  border-right: var(--edge) solid var(--ink);
}
select:hover { background-image:
    linear-gradient(45deg, transparent 47%, var(--ink) 47%, var(--ink) 62%, transparent 62%),
    linear-gradient(-45deg, transparent 47%, var(--ink) 47%, var(--ink) 62%, transparent 62%),
    linear-gradient(#f3d06a, #f3d06a); }
select::-ms-expand { display: none; }

/* --- 12z. Narrow-viewport safety (down to 320px) ------------------------ */
/* long addresses, postcodes and Hungarian compounds must never force a
   horizontal scrollbar */
body { overflow-x: hidden; }
h1, h2, h3, p, li, .callout, .panel, .story, .scene__toast { overflow-wrap: break-word; }
.panel, .card-person, .story > li { min-width: 0; }
@media (max-width: 380px) {
  .nav { gap: 6px; }
  .nav a, .nav .btn { font-size: .72rem; padding: 8px 10px; }
  .scene__controls .btn { font-size: .64rem; }
}

/* --- 13. Accessibility ------------------------------------------------- */
:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--sea);
  outline-offset: 2px;
  background: #fff;
}

.skip {
  position: absolute; left: -9999px;
  z-index: 10;
}
.skip:focus {
  left: var(--step); top: var(--step);
  padding: var(--step) calc(var(--step) * 2);
  background: var(--paper); border: var(--edge) solid var(--ink);
  font-family: var(--font-ui);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .nav a:active { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --parch: #fdf1de; --ink-soft: #3a2d4d; }
}

/* 320px safety */
@media (max-width: 380px) {
  body { padding-left: 6px; padding-right: 6px; font-size: 16px; }
  .panel { padding: calc(var(--step) * 1.75); }
  .scroll-title { padding: var(--step) calc(var(--step) * 1.5); }
  .nav form { display: inline-block; margin: 0; }
.nav ul { gap: 6px; }
  .nav a { font-size: .78rem; padding: 10px 12px; letter-spacing: .04em; }
  .quest > li { padding-left: calc(var(--step) * 4.5); }
}

@media print {
  body { background: #fff; }
  .nav, .langswitch, .btn { display: none; }
  .panel { box-shadow: none; }
}