/* Resans spelögonblick: biljett, fönstervy, ankomst, pass och stämpel. Alla klasser börjar med .tv- */

.tv-overlay {
  --tv-paper: var(--paper, #f6ecd6);
  --tv-paper2: var(--paper-2, #efe0bd);
  --tv-ink: var(--ink, #3a2e22);
  --tv-ink2: var(--ink-soft, #6b5a46);
  --tv-sea: var(--sea, #bfdad6);
  --tv-land: var(--land, #e9c98a);
  --tv-edge: var(--land-edge, #b68a4a);
  --tv-accent: var(--accent, #c8452b);
  --tv-accent2: var(--accent-2, #2f6f6a);
  --tv-card: #fffaf0;
  --tv-frame: #efe3c6;
  --tv-i0: #b23a2f; --tv-i1: #2d5d8a; --tv-i2: #2f6f4a; --tv-i3: #6a3d8f; --tv-i4: #3a2e22;
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--tv-ink);
  font-family: 'Fraunces', Georgia, serif; font-size: 16px; line-height: 1.35;
  animation: tv-fade .25s ease-out both;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .tv-overlay {
    --tv-paper: var(--paper, #2a2118);
    --tv-paper2: var(--paper-2, #35291d);
    --tv-ink: var(--ink, #f1e4c8);
    --tv-ink2: var(--ink-soft, #c2b08f);
    --tv-sea: var(--sea, #22403f);
    --tv-land: var(--land, #7a5a31);
    --tv-edge: var(--land-edge, #c9a05c);
    --tv-accent: var(--accent, #ee6a4e);
    --tv-accent2: var(--accent-2, #62b3ab);
    --tv-card: #3a2d20;
    --tv-frame: #4d3d2b;
    --tv-i0: #ee7a68; --tv-i1: #7db4e6; --tv-i2: #7fcf9d; --tv-i3: #c39be6; --tv-i4: #f1e4c8;
  }
}
.tv-overlay *, .tv-overlay *::before, .tv-overlay *::after { box-sizing: border-box; }
.tv-overlay:focus { outline: none; }
.tv-overlay.tv-out { animation: tv-fadeout .24s ease-in forwards; pointer-events: none; }
.tv-defs { position: absolute; width: 0; height: 0; }
.tv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tv-overlay button { font-family: inherit; }
.tv-overlay button:focus-visible { outline: 3px dashed var(--tv-accent); outline-offset: 3px; }

.tv-ink0 { color: var(--tv-i0); } .tv-ink1 { color: var(--tv-i1); } .tv-ink2 { color: var(--tv-i2); }
.tv-ink3 { color: var(--tv-i3); } .tv-ink4 { color: var(--tv-i4); }

/* papperet bakom allt */
.tv-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, var(--tv-paper) 0%, var(--tv-paper2) 100%); }
.tv-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(58, 46, 34, .09) 1px, transparent 1.2px); background-size: 22px 22px; }
.tv-bg::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(58, 46, 34, .25); z-index: 1; pointer-events: none; }

/* ---------- biljett ---------- */
.tv-ticket-wrap {
  position: absolute; left: 50%; top: 50%; width: min(560px, 92vw);
  transform: translate(-50%, -50%); transform-origin: top center;
  transition: top .75s cubic-bezier(.6, 0, .2, 1), transform .75s cubic-bezier(.6, 0, .2, 1), opacity .4s;
  z-index: 3;
}
.tv-scene .tv-ticket-wrap { top: 10px; transform: translate(-50%, 0) scale(.42); }
.tv-arrive .tv-ticket-wrap { opacity: 0; }
.tv-ticket-glide { animation: tv-glide .8s cubic-bezier(.2, .9, .25, 1) both; }
.tv-ticket {
  position: relative; width: 100%; aspect-ratio: 2.4 / 1; container-type: inline-size;
  filter: drop-shadow(0 3px 0 rgba(58, 46, 34, .28)) drop-shadow(0 14px 16px rgba(58, 46, 34, .3));
  animation: tv-shake .3s .84s both, tv-shake2 .3s 1.14s both;
}
.tv-tk-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-tk-paper { fill: var(--tv-card); stroke: var(--tv-ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tv-tk-perf { fill: none; stroke: var(--tv-ink2); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.tv-tk-main { position: absolute; left: 3.5%; top: 5%; width: 69.5%; height: 90%; display: flex; flex-direction: column; }
.tv-ticket small { display: block; font: 600 1.9cqw/1 'Fraunces', serif; letter-spacing: .18em; color: var(--tv-ink2); }
.tv-tk-band { height: 15%; display: flex; align-items: center; justify-content: space-between; padding: 0 2.6cqw; border-radius: 1.6cqw; background: var(--tv-accent); color: #fffaf0; }
.tv-tk-band b { font: 700 2.6cqw 'Fraunces', serif; letter-spacing: .28em; }
.tv-tk-band span { font: 700 3.4cqw 'Caveat', cursive; }
.tv-tk-route { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 1.4cqw; }
.tv-tk-city { min-width: 0; flex: 1; }
.tv-tk-city b { display: block; font: 700 clamp(3.6cqw, calc(54cqw / var(--len, 8)), 8.6cqw)/1 'Caveat', cursive; white-space: nowrap; margin: .9cqw 0 .5cqw; }
.tv-tk-city i { font: 500 2.2cqw 'Fraunces', serif; font-style: normal; color: var(--tv-ink2); }
.tv-tk-to { text-align: right; }
.tv-tk-mid { width: 12.5cqw; flex: none; display: flex; flex-direction: column; align-items: center; gap: .8cqw; color: var(--tv-accent); }
.tv-tk-glyph { width: 6.4cqw; height: 6.4cqw; }
.tv-k-flight .tv-tk-glyph { transform: rotate(90deg); }
.tv-tk-mid span { width: 100%; border-top: .45cqw dashed var(--tv-ink2); }
.tv-tk-meta { display: flex; gap: 3cqw; padding: 1.6cqw 1.4cqw 0; border-top: .3cqw dashed rgba(58, 46, 34, .35); }
.tv-tk-meta > div { flex: 1; position: relative; min-width: 0; }
.tv-tk-meta b { display: block; font: 700 4.6cqw/1.1 'Caveat', cursive; margin-top: .6cqw; white-space: nowrap; }
.tv-tk-ghost { opacity: .16; }
.tv-tk-stub { position: absolute; left: 76.5%; width: 20.5%; top: 8%; bottom: 8%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.tv-tk-code { font: 700 6.4cqw/1 'Caveat', cursive; white-space: nowrap; }
.tv-tk-iata { font: 700 2.4cqw 'Fraunces', serif; letter-spacing: .1em; }
.tv-tk-iata s { text-decoration: none; color: var(--tv-accent); margin: 0 .6cqw; }
.tv-barcode { width: 100%; height: 22%; fill: var(--tv-ink); }

.tv-stampbox { position: absolute; pointer-events: none; }
.tv-stampbox i { display: block; font-style: normal; opacity: 0; filter: url(#tv-rough); animation: tv-stampin .45s cubic-bezier(.3, 0, .3, 1) both; }
.tv-sb-price { left: -1cqw; top: 2.2cqw; }
.tv-sb-price i { color: var(--tv-i0); border: .7cqw solid currentColor; border-radius: 1cqw; padding: .5cqw 1.8cqw; font: 700 4cqw/1.1 'Fraunces', serif; transform: rotate(-7deg); white-space: nowrap; animation-delay: .6s; }
.tv-sb-days { left: .6cqw; top: -3.6cqw; }
.tv-sb-days i { color: var(--tv-i1); width: 12cqw; height: 12cqw; border: .7cqw solid currentColor; border-radius: 50%; display: grid; place-content: center; text-align: center; font: 700 6cqw/.85 'Caveat', cursive; transform: rotate(8deg); animation-delay: .9s; box-shadow: inset 0 0 0 .6cqw var(--tv-card), inset 0 0 0 .9cqw currentColor; }
.tv-sb-days em { font: 700 1.5cqw 'Fraunces', serif; font-style: normal; letter-spacing: .14em; margin-top: .5cqw; }
.tv-sb-days i.tv-small { font-size: 4cqw; }

/* rustika biljettvarianter */
.tv-k-train .tv-tk-band { background: var(--tv-ink); color: var(--tv-card); }
.tv-k-bus .tv-tk-band { background: #3b6ea5; }
.tv-k-ferry .tv-tk-band { background: var(--tv-accent2) repeating-linear-gradient(135deg, transparent 0 1.2cqw, rgba(255, 255, 255, .13) 1.2cqw 2.4cqw); color: #fffaf0; }
.tv-k-ferry .tv-tk-glyph, .tv-k-freighter .tv-tk-glyph { color: var(--tv-accent2); }
.tv-k-freighter .tv-ticket { --tv-ink: #3a2e22; --tv-ink2: #6b5a46; --tv-card: #dcc392; --tv-i0: #a02b22; color: #3a2e22; }
.tv-k-freighter .tv-tk-paper { fill: #dcc392; }
.tv-k-freighter .tv-tk-band { background: #5a4630; color: #f2e3c0; border-radius: .4cqw; }
.tv-k-freighter .tv-ticket small, .tv-k-freighter .tv-tk-band b, .tv-k-freighter .tv-tk-iata { font-family: 'Courier New', Courier, monospace; font-weight: 700; }
.tv-k-freighter .tv-tk-glyph { color: #5a4630; }

/* ---------- scenen ---------- */
.tv-stage {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center; justify-items: center; gap: 10px; padding: 112px 3vw 30px;
  opacity: 0; visibility: hidden; transition: opacity .45s .25s, filter .5s;
}
.tv-scene .tv-stage { opacity: 1; visibility: visible; }
.tv-arrive .tv-stage { filter: blur(2.5px) saturate(.8); opacity: .4; }
.tv-wincol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tv-win { position: relative; margin: 34px 38px 38px; filter: drop-shadow(0 8px 10px rgba(58, 46, 34, .35)); }
.tv-scene .tv-win { animation: tv-winin .7s .3s cubic-bezier(.2, 1.15, .4, 1) both; }
.tv-win-flight { width: min(360px, 40vh); aspect-ratio: 3 / 4; }
.tv-win-train, .tv-win-bus, .tv-win-ferry, .tv-win-freighter { width: min(700px, calc(100vw - 520px), 64vh * 1.5); aspect-ratio: 3 / 2; }
.tv-view { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #8fc0e4; }
.tv-win-flight .tv-view { border-radius: 41.7% / 27.1%; }
.tv-win-train .tv-view { border-radius: 2.7% / 4%; }
.tv-win-bus .tv-view { border-radius: 5.7% / 8.5%; }
.tv-win-ferry .tv-view, .tv-win-freighter .tv-view { border-radius: 2% / 3%; }
.tv-caption { margin: 0; font: 500 1.55rem/1.1 'Caveat', cursive; color: var(--tv-ink2); text-align: center; }
.tv-dots i { font-style: normal; animation: tv-dot 1.2s infinite; }
.tv-dots i:nth-child(2) { animation-delay: .2s; } .tv-dots i:nth-child(3) { animation-delay: .4s; }

/* himmel, sol, stjärnor */
.tv-sky { position: absolute; inset: 0; background: linear-gradient(#5aa4dc, #a9d3ec 55%, #f3ecd2); }
.tv-dusk { background: linear-gradient(#3b3f86, #c45f84 50%, #f6a864 90%); opacity: var(--tv-dusk, 0); }
.tv-night { background: linear-gradient(#0a0e2c, #202a64 70%, #3a3d78); opacity: var(--tv-night, 0); }
.tv-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--tv-night, 0); }
.tv-sun { position: absolute; left: var(--sx, 20%); top: var(--sy, 20%); width: 16%; aspect-ratio: 1; margin: -8%; border-radius: 50%; background: radial-gradient(circle, #fff7cf 0 38%, #ffd96e 55%, rgba(255, 217, 110, 0) 70%); }
.tv-sun::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #ffb27a 0 38%, #ff7b4a 55%, rgba(255, 123, 74, 0) 70%); opacity: var(--tv-warm, 0); }
.tv-tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; }
.tv-tint-d { background: #ffc79a; opacity: calc(var(--tv-dusk, 0) * .55); }
.tv-tint-n { background: #4651a0; opacity: calc(var(--tv-night, 0) * .85); }
.tv-flick { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.tv-flick.tv-on { animation: tv-flick .35s ease-out; }
.tv-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0 20%, transparent 20.5% 28%, rgba(255, 255, 255, .09) 28.5% 33%, transparent 33.5%); }

/* parallax-lager */
.tv-layer { position: absolute; left: 0; top: 0; height: 100%; width: 200%; display: flex; animation: tv-scroll linear infinite; will-change: transform; }
.tv-layer > svg { flex: 0 0 50%; width: 50%; height: 100%; overflow: visible; display: block; }
.tv-l-streak { opacity: .8; }
.tv-earth { position: absolute; width: 300%; aspect-ratio: 1; left: -100%; top: 57%; border-radius: 50%; overflow: hidden; background: #8fb56a; box-shadow: 0 -4px 14px 3px rgba(200, 230, 255, .9), inset 0 12px 22px -6px rgba(255, 255, 255, .7); }
.tv-earth::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(225, 238, 246, .8), transparent 12%); }
.tv-earth .tv-layer { height: 45%; }
.tv-wing { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 100% 80%; animation: tv-wobble 3s ease-in-out infinite alternate; }
.tv-blink { animation: tv-blink 1.1s steps(1) infinite; }
.tv-blind { position: absolute; inset: 0; z-index: 5; background: linear-gradient(#f1e8d4, #dccfb2); box-shadow: inset 0 -3px 0 rgba(58, 46, 34, .25); }
.tv-blind i { position: absolute; left: 36%; right: 36%; bottom: 8px; height: 10px; border-radius: 6px; background: rgba(58, 46, 34, .4); }
.tv-scene .tv-blind { animation: tv-blind .8s .3s cubic-bezier(.5, 0, .2, 1) both; }
.tv-rock { position: absolute; inset: -6%; animation: tv-rock 4.4s ease-in-out infinite alternate; }
.tv-slowrock { --amp: .8deg; animation-duration: 9s; }
.tv-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-gull { position: absolute; width: 5.5%; height: auto; animation: tv-gull 9s linear infinite, tv-flap2 .55s ease-in-out infinite alternate; }

/* fönsterramar */
.tv-deco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; z-index: 2; }
.tv-fr-o { fill: none; stroke: var(--tv-ink); }
.tv-fr-f { fill: none; stroke: var(--tv-frame); }
.tv-fr-i { fill: none; stroke: var(--tv-ink); stroke-opacity: .45; }
.tv-fr-bus { fill: none; stroke: #565b61; } .tv-fr-bus-f { fill: #565b61; }
.tv-fr-steel { fill: none; stroke: #7d8d96; }
.tv-fr-latch { fill: var(--tv-edge); stroke: var(--tv-ink); stroke-width: 2; }
.tv-rivet { fill: var(--tv-ink); opacity: .45; }
.tv-curtain { fill: var(--tv-accent); fill-opacity: .93; stroke: var(--tv-ink); stroke-width: 2.2; stroke-linejoin: round; }
.tv-fold { fill: none; stroke: var(--tv-ink); stroke-opacity: .3; stroke-width: 1.6; stroke-linecap: round; }
.tv-rod { stroke: var(--tv-ink); stroke-width: 5; stroke-linecap: round; }
.tv-knob { fill: var(--tv-edge); stroke: var(--tv-ink); stroke-width: 2; }
.tv-sill { fill: var(--tv-edge); stroke: var(--tv-ink); stroke-width: 2.5; }
.tv-cup { fill: var(--tv-card); stroke: var(--tv-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tv-steam { fill: none; stroke: var(--tv-ink2); stroke-width: 2.2; opacity: .6; animation: tv-steam 2.4s ease-out infinite; }
.tv-seat { fill: var(--tv-accent2); stroke: var(--tv-ink); stroke-width: 3; }
.tv-seat-line { stroke: var(--tv-ink); stroke-opacity: .35; stroke-width: 2; fill: none; }
.tv-pole { fill: #c9cdd0; stroke: var(--tv-ink); stroke-width: 2.5; }
.tv-bell { fill: var(--tv-accent); stroke: var(--tv-ink); stroke-width: 2.5; }
.tv-rail-o { fill: none; stroke: var(--tv-ink); stroke-linecap: round; }
.tv-rail-f { fill: none; stroke: #f4efe2; stroke-linecap: round; }
.tv-buoy-o { fill: none; stroke: var(--tv-ink); }
.tv-buoy { fill: none; stroke: var(--tv-accent); }
.tv-buoy-w { fill: none; stroke: #fffaf0; }

/* kalender och klocka */
.tv-cal-box { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-self: end; }
.tv-scene .tv-cal-box, .tv-scene .tv-map-box { animation: tv-winin .6s .5s cubic-bezier(.2, 1.15, .4, 1) both; }
.tv-cal { width: 92px; border: 2.5px solid var(--tv-ink); border-radius: 9px; background: var(--tv-card); overflow: hidden; position: relative; perspective: 300px; box-shadow: 0 3px 0 rgba(58, 46, 34, .3); transform: rotate(-3deg); }
.tv-cal-top { position: relative; height: 24px; background: var(--tv-accent); color: #fffaf0; display: flex; align-items: center; justify-content: center; font: 700 .6rem 'Fraunces', serif; letter-spacing: .24em; }
.tv-cal-top i { position: absolute; top: 2px; width: 6px; height: 9px; border-radius: 3px; background: var(--tv-card); border: 1.5px solid var(--tv-ink); }
.tv-cal-top i:nth-child(1) { left: 16px; } .tv-cal-top i:nth-child(2) { right: 16px; }
.tv-cal-top span { margin-top: 8px; font-size: .5rem; }
.tv-cal-body { position: relative; height: 66px; display: grid; place-items: center; }
.tv-cal-num { font: 700 3.3rem/1 'Caveat', cursive; }
.tv-cal-flap { position: absolute; inset: 0; background: var(--tv-card); display: grid; place-items: center; transform-origin: top center; animation: tv-flap .4s ease-in forwards; border-bottom: 1px solid rgba(58, 46, 34, .25); }
.tv-cal-cap { font: 500 1.35rem/1 'Caveat', cursive; color: var(--tv-ink2); text-align: center; }
.tv-cal-cap b { font-size: 1.6rem; color: var(--tv-ink); }
.tv-clock { width: 96px; filter: drop-shadow(0 3px 0 rgba(58, 46, 34, .3)); }
.tv-clock svg { width: 100%; display: block; overflow: visible; }
.tv-clock-face { fill: var(--tv-card); stroke: var(--tv-ink); stroke-width: 4; }
.tv-clock-tick { stroke: var(--tv-ink); stroke-width: 2.2; stroke-linecap: round; }
.tv-hh, .tv-mh { stroke: var(--tv-ink); stroke-width: 4.5; stroke-linecap: round; }
.tv-mh { stroke: var(--tv-accent); stroke-width: 3; }
.tv-clock-pin { fill: var(--tv-ink); }

/* minikarta */
.tv-map-box { width: 100%; max-width: 300px; justify-self: start; border: 2.5px solid var(--tv-ink); border-radius: 10px; background: var(--tv-sea); overflow: hidden; box-shadow: 0 3px 0 rgba(58, 46, 34, .3), 0 10px 18px rgba(58, 46, 34, .18); transform: rotate(1.4deg); }
.tv-map { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.tv-msea { fill: var(--tv-sea); }
.tv-mgrid { fill: none; stroke: var(--tv-ink); stroke-opacity: .13; }
.tv-mland { fill: var(--tv-land); stroke: var(--tv-edge); stroke-linejoin: round; }
.tv-mghost { fill: none; stroke: var(--tv-ink); stroke-opacity: .13; }
.tv-mdot { fill: var(--tv-ink); opacity: 0; }
.tv-mdot.tv-on { opacity: .85; }
.tv-mfrom { fill: var(--tv-accent2); stroke: var(--tv-ink); }
.tv-mto { fill: var(--tv-accent); stroke: var(--tv-ink); }
.tv-mto-ring { fill: none; stroke: var(--tv-accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tv-arrived .tv-mto-ring { animation: tv-ping 1.1s ease-out infinite; }
.tv-mlab { font-family: 'Caveat', cursive; font-weight: 700; fill: var(--tv-ink); stroke: var(--tv-sea); paint-order: stroke; stroke-linejoin: round; }
.tv-mico { fill: var(--tv-accent); stroke: var(--tv-ink); stroke-linejoin: round; }

/* hoppa över */
.tv-skip { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 6; background: transparent; border: 0; color: var(--tv-ink2); font: 500 1.3rem 'Caveat', cursive; padding: 6px 16px; border-radius: 99px; cursor: pointer; animation: tv-fade .5s .6s both; }
.tv-skip:hover { color: var(--tv-ink); }
.tv-arrive .tv-skip { opacity: 0; pointer-events: none; animation: none; }

/* ---------- ankomst ---------- */
.tv-arrival {
  position: absolute; left: 50%; top: 50%; width: min(780px, 94vw); max-height: 94vh; overflow: auto; z-index: 5;
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  padding: 32px 36px; background: var(--tv-card); border: 2.5px solid var(--tv-ink); border-radius: 14px;
  box-shadow: 0 4px 0 rgba(58, 46, 34, .3), 0 28px 50px rgba(30, 20, 10, .4);
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%);
}
.tv-arrive .tv-arrival { visibility: visible; animation: tv-arrive .6s cubic-bezier(.2, 1.15, .4, 1) both; }
.tv-ar-photo { position: relative; }
.tv-polaroid { width: 236px; padding: 10px 10px 12px; background: #fffdf6; border: 1.5px solid rgba(58, 46, 34, .5); box-shadow: 0 4px 10px rgba(0, 0, 0, .28); transform: rotate(-3deg); color: #3a2e22; }
.tv-polaroid svg { display: block; width: 100%; height: auto; border: 1.5px solid rgba(58, 46, 34, .5); }
.tv-polaroid p { margin: 8px 2px 0; font: 500 1.18rem/1.05 'Caveat', cursive; }
.tv-tape { position: absolute; top: -12px; left: 50%; width: 76px; height: 24px; background: rgba(226, 190, 110, .75); transform: translateX(-50%) rotate(4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.tv-ar-text small { font: 500 1.5rem/1 'Caveat', cursive; color: var(--tv-accent); }
.tv-ar-text h2 { margin: 2px 0 4px; font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1; font-weight: 700; }
.tv-hello { font-style: normal; font-weight: 700; margin-right: .2em; }
.tv-ar-country { margin: 0; color: var(--tv-ink2); }
.tv-ar-country span { display: inline-block; margin-left: 6px; padding: 0 9px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border: 1.5px dashed var(--tv-ink2); border-radius: 99px; vertical-align: 2px; }
.tv-ar-fact { margin: 14px 0 18px; padding: 10px 14px 12px; background: var(--tv-paper2); border-left: 4px solid var(--tv-accent2); border-radius: 4px 8px 8px 4px; }
.tv-ar-fact b { font: 700 1.35rem/1 'Caveat', cursive; color: var(--tv-accent2); }
.tv-ar-fact p { margin: 4px 0 0; font-size: .95rem; }
.tv-btn { font: 700 1.1rem 'Fraunces', serif; background: var(--tv-accent); color: #fffaf0; border: 2.5px solid var(--tv-ink); border-radius: 999px; padding: .6em 1.8em; box-shadow: 0 3px 0 var(--tv-ink); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.tv-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--tv-ink); }
.tv-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tv-ink); }
.tv-postmark { position: absolute; top: 12px; right: 14px; width: 86px; color: var(--tv-i0); opacity: 0; transform: rotate(12deg); filter: url(#tv-rough); pointer-events: none; }
.tv-postmark text { font-family: 'Fraunces', serif; }
.tv-postmark .tv-num { font-family: 'Caveat', cursive; }
.tv-arrive .tv-postmark { animation: tv-postmark .4s .7s cubic-bezier(.3, 0, .3, 1.2) both; }

/* ---------- stämplar ---------- */
.tv-stamp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tv-stamp-svg text { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
.tv-stamp-svg .tv-num { font-family: 'Caveat', cursive; }

/* stämpelögonblicket */
.tv-stampm .tv-bg { background: rgba(30, 22, 14, .62); backdrop-filter: blur(2px); }
.tv-stampm .tv-bg::after, .tv-stampm .tv-bg::before { display: none; }
.tv-sm-sheet { position: relative; width: min(320px, 80vw); padding: 26px 22px 22px; display: grid; justify-items: center; gap: 4px; text-align: center; background: var(--tv-card); border: 2.5px solid var(--tv-ink); border-radius: 12px; box-shadow: 0 5px 0 rgba(58, 46, 34, .3), 0 30px 50px rgba(0, 0, 0, .4); animation: tv-sheetin .25s ease-out both, tv-sheetshake .38s .46s linear both; }
.tv-sm-lines { position: absolute; inset: 8px; border-radius: 7px; background: repeating-radial-gradient(circle at 50% 130%, transparent 0 8px, rgba(47, 111, 106, .12) 8px 9px); pointer-events: none; }
.tv-sm-stamp { position: relative; width: 78%; aspect-ratio: 1; }
.tv-sm-stamp .tv-stamp-svg { animation: tv-bang .44s .2s cubic-bezier(.3, 0, .3, 1) both; }
.tv-sm-ring { position: absolute; inset: 4%; border-radius: 50%; border: 3px solid currentColor; opacity: 0; animation: tv-inkring .6s .46s ease-out both; }
.tv-sm-txt { margin: 4px 0 0; font: 700 2.1rem/1 'Caveat', cursive; color: var(--tv-accent); position: relative; }
.tv-sm-name { margin: 0; font-size: .95rem; color: var(--tv-ink2); position: relative; }

/* ---------- passet ---------- */
.tv-pass .tv-bg { background: rgba(28, 20, 13, .9); backdrop-filter: blur(3px); }
.tv-pass .tv-bg::after, .tv-pass .tv-bg::before { display: none; }
.tv-close { position: absolute; top: 12px; right: 14px; z-index: 6; background: var(--tv-card); color: var(--tv-ink); border: 2.5px solid var(--tv-ink); border-radius: 99px; font: 700 .95rem 'Fraunces', serif; padding: .4em 1em; cursor: pointer; box-shadow: 0 3px 0 var(--tv-ink); }
.tv-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tv-ink); }
.tv-pp { position: relative; width: 100%; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 12px 20px; color: #f6ecd6; }
.tv-book { width: min(880px, 94vw, calc((100vh - 240px) * 1.55)); min-width: min(94vw, 340px); perspective: 1800px; flex: none; }
.tv-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1.55 / 1; border: 11px solid var(--tv-accent2); border-radius: 18px; background: var(--tv-accent2); box-shadow: 0 6px 0 rgba(0, 0, 0, .3), 0 30px 60px rgba(0, 0, 0, .5); transform-style: preserve-3d; }
.tv-open .tv-spread { animation: tv-bookin .7s cubic-bezier(.2, .9, .3, 1) both; }
.tv-page { position: relative; display: flex; flex-direction: column; padding: 14px 18px 10px; overflow: hidden; color: var(--tv-ink); min-width: 0; background: var(--tv-card) repeating-radial-gradient(circle at 50% 135%, transparent 0 7px, rgba(47, 111, 106, .09) 7px 8px); }
.tv-left { border-radius: 8px 0 0 8px; } .tv-right { border-radius: 0 8px 8px 0; }
.tv-page-head { display: flex; justify-content: space-between; font: 700 .64rem 'Fraunces', serif; letter-spacing: .22em; color: var(--tv-accent2); border-bottom: 1px solid rgba(47, 111, 106, .4); padding-bottom: 6px; }
.tv-slots { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 0; }
.tv-slot { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.tv-stamp-wrap { width: min(100cqh, 100cqw, 150px); height: min(100cqh, 100cqw, 150px); transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)); }
.tv-pop .tv-stamp-wrap { animation: tv-slam .5s calc(.4s + var(--i, 0) * .15s) cubic-bezier(.3, 0, .3, 1.15) both; }
.tv-empty { margin: 5px 18%; border: 2px dotted rgba(47, 111, 106, .5); border-radius: 14px; }
.tv-empty span { font: 500 1.6rem 'Caveat', cursive; color: rgba(47, 111, 106, .55); }
.tv-here { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--tv-accent); color: #fffaf0; font: 500 1.05rem/1.25 'Caveat', cursive; padding: 0 .8em; border-radius: 99px; white-space: nowrap; }
.tv-page-foot { text-align: center; font: 500 1.05rem 'Caveat', cursive; color: var(--tv-ink2); opacity: .8; }
.tv-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; pointer-events: none; z-index: 3; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .16) 44%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .16) 56%, transparent); }
.tv-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 4; pointer-events: none; }
.tv-leaf-r { left: 50%; transform-origin: left center; animation: tv-turn-r .72s cubic-bezier(.5, 0, .3, 1) both; }
.tv-leaf-l { left: 0; transform-origin: right center; animation: tv-turn-l .72s cubic-bezier(.5, 0, .3, 1) both; }
.tv-leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tv-leaf-face > .tv-page { height: 100%; }
.tv-leaf-back { transform: rotateY(180deg); }
.tv-leaf-front::after, .tv-leaf-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 40%); pointer-events: none; }
.tv-pp-nav { display: flex; align-items: center; gap: 16px; }
.tv-pp-pos { font: 500 1.35rem 'Caveat', cursive; min-width: 9ch; text-align: center; }
.tv-arrow { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--tv-ink); background: var(--tv-card); color: var(--tv-ink); font: 700 1.7rem/1 'Fraunces', serif; cursor: pointer; box-shadow: 0 3px 0 var(--tv-ink); padding: 0 0 4px; }
.tv-arrow:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--tv-ink); }
.tv-arrow:disabled { opacity: .35; cursor: default; }
.tv-pp-stats { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tv-count { margin: 0; font: 500 2rem/1 'Caveat', cursive; }
.tv-count b { color: #ffd9a0; font-size: 2.4rem; }
.tv-conts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tv-cont { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 7px; border-radius: 99px; font-size: .86rem; border: 1.5px dashed rgba(246, 236, 214, .4); }
.tv-cont svg { width: 20px; height: 20px; }
.tv-cont:not(.tv-seen) { color: rgba(246, 236, 214, .55); }
.tv-cont.tv-seen { background: var(--tv-card); border: 2px solid currentColor; font-weight: 700; }
.tv-pp-hint { margin: 0; font: 500 1.05rem 'Caveat', cursive; opacity: .65; }
.tv-slide { animation: tv-slide .35s ease-out both; }

/* ---------- smal skärm ---------- */
@media (max-width: 860px) {
  .tv-stage { grid-template-columns: auto 1fr; grid-template-areas: "win win" "cal map"; align-content: center; padding: 88px 14px 14px; row-gap: 4px; }
  .tv-wincol { grid-area: win; }
  .tv-cal-box { grid-area: cal; justify-self: start; flex-direction: row; gap: 10px; }
  .tv-map-box { grid-area: map; justify-self: end; max-width: 250px; }
  .tv-win { margin: 30px 34px 32px; }
  .tv-win-train, .tv-win-bus, .tv-win-ferry, .tv-win-freighter { width: min(100vw - 76px, 520px, 44vh * 1.5); }
  .tv-win-flight { width: min(100vw - 76px, 300px, 33vh); }
  .tv-caption { font-size: 1.35rem; }
}
@media (max-width: 600px) {
  .tv-scene .tv-ticket-wrap { transform: translate(-50%, 0) scale(.5); }
  .tv-cal-box { flex-direction: column; gap: 4px; }
  .tv-cal { width: 76px; } .tv-cal-body { height: 54px; } .tv-cal-num { font-size: 2.6rem; }
  .tv-clock { width: 78px; }
  .tv-map-box { max-width: 52vw; }
  .tv-arrival { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px 22px; justify-items: stretch; }
  .tv-ar-photo { justify-self: center; margin-top: 4px; }
  .tv-polaroid { width: min(200px, 54vw); }
  .tv-ar-text { text-align: left; }
  .tv-postmark { width: 66px; top: 8px; right: 8px; }
}
@media (max-width: 719px) {
  .tv-book { width: 94vw; }
  .tv-spread { grid-template-columns: 1fr; aspect-ratio: auto; border-width: 9px; }
  .tv-left { border-radius: 8px 8px 0 0; border-bottom: 2px dashed rgba(47, 111, 106, .35); }
  .tv-right { border-radius: 0 0 8px 8px; }
  .tv-slots { flex-direction: row; gap: 4px; padding: 6px 0 4px; }
  .tv-slot { aspect-ratio: 1; flex: 1 1 0; min-width: 0; }
  .tv-spine { display: none; }
  .tv-empty { margin: 8%; }
  .tv-page-foot { display: none; }
  .tv-pp { padding-top: 54px; }
}
@media (max-height: 560px) and (min-width: 720px) { .tv-book { width: min(880px, 94vw, calc((100vh - 200px) * 1.55)); } }

/* ---------- animationer ---------- */
@keyframes tv-fade { from { opacity: 0; } }
@keyframes tv-fadeout { to { opacity: 0; } }
@keyframes tv-scroll { to { transform: translateX(-50%); } }
@keyframes tv-jiggle { 0% { margin-top: 0; } 100% { margin-top: 1px; } }
@keyframes tv-glide { from { transform: translateY(75vh) rotate(10deg); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0) rotate(-1.5deg); opacity: 1; } }
@keyframes tv-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-3px, 2px) rotate(-.4deg); } 40% { transform: translate(3px, -2px) rotate(.5deg); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, -1px); } }
@keyframes tv-shake2 { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, 3px) rotate(.4deg); } 50% { transform: translate(-3px, -1px) rotate(-.5deg); } 75% { transform: translate(1px, 1px); } }
@keyframes tv-stampin { 0% { opacity: 0; scale: 2.4; } 58% { opacity: 1; scale: .92; } 80% { opacity: 1; scale: 1.05; } 100% { opacity: .92; scale: 1; } }
@keyframes tv-winin { from { opacity: 0; transform: scale(.88) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tv-blind { to { transform: translateY(-104%); } }
@keyframes tv-wobble { from { transform: rotate(-.7deg) translateY(0); } to { transform: rotate(.7deg) translateY(3px); } }
@keyframes tv-blink { 50% { opacity: .15; } }
@keyframes tv-rock { from { transform: rotate(calc(var(--amp, 2.2deg) * -1)); } to { transform: rotate(var(--amp, 2.2deg)); } }
@keyframes tv-gull { 0% { transform: translate(0, 0); } 50% { transform: translate(450%, -90%); } 100% { transform: translate(900%, 30%); } }
@keyframes tv-flap2 { from { scale: 1 1; } to { scale: 1 .4; } }
@keyframes tv-steam { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .7; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes tv-flap { to { transform: rotateX(-100deg); opacity: 0; } }
@keyframes tv-flick { from { opacity: .4; } to { opacity: 0; } }
@keyframes tv-dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes tv-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@keyframes tv-arrive { from { opacity: 0; transform: translate(-50%, -40%) rotate(3deg) scale(.88); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-.5deg) scale(1); } }
@keyframes tv-postmark { 0% { opacity: 0; scale: 2.2; } 60% { opacity: .9; scale: .94; } 100% { opacity: .78; scale: 1; } }
@keyframes tv-slam { 0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(calc(var(--r, 0deg) - 12deg)) scale(2.3); } 60% { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(.93); } 100% { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(1); } }
@keyframes tv-turn-r { to { transform: rotateY(-180deg); } }
@keyframes tv-turn-l { to { transform: rotateY(180deg); } }
@keyframes tv-bookin { from { opacity: 0; transform: rotateX(28deg) translateY(50px) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes tv-slide { from { opacity: 0; transform: translateY(14px); } }
@keyframes tv-sheetin { from { opacity: 0; translate: 0 30px; scale: .92; } }
@keyframes tv-sheetshake { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-6px, 4px) rotate(-.8deg); } 35% { transform: translate(6px, -3px) rotate(.8deg); } 55% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -1px); } }
@keyframes tv-bang { 0% { opacity: 0; transform: scale(3.2) rotate(-16deg); } 62% { opacity: 1; transform: scale(.9) rotate(-6deg); } 80% { opacity: 1; transform: scale(1.05) rotate(-6deg); } 100% { opacity: .95; transform: scale(1) rotate(-6deg); } }
@keyframes tv-inkring { from { opacity: .6; transform: scale(.9); } to { opacity: 0; transform: scale(1.5); } }

/* mindre rörelse: förenklat förlopp */
@media (prefers-reduced-motion: reduce) {
  .tv-overlay *, .tv-overlay *::before, .tv-overlay *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .tv-layer, .tv-rock, .tv-gull, .tv-wing, .tv-steam, .tv-blink { animation: none !important; }
  .tv-blind { display: none; }
  .tv-stampbox i { opacity: .92; }
}
.tv-visa { font-family: "Caveat", cursive; font-size: 1.2rem; margin: .2rem 0; text-align: center; color: #3a2e22; }

/* ombordrader, återbesök och högtidsbanderoll på ankomstkortet (resa.js, calendar.js) */
.tv-line { margin: 4px 0 0; min-height: 2.6em; max-width: 34em; font: 500 1.15rem/1.25 'Caveat', cursive; color: var(--tv-ink2); text-align: center; text-wrap: balance; }
.tv-line-in { animation: tv-line-in .5s ease both; }
@keyframes tv-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tv-ar-since { margin: 2px 0 0; font: 500 1.2rem/1.1 'Caveat', cursive; color: var(--tv-accent); }
.tv-ar-fest { margin: 10px 0 0; padding: 8px 12px 10px; background: #fbe3a8; border: 2px dashed var(--tv-accent); border-radius: 8px; transform: rotate(-.6deg); }
.tv-ar-fest b { font: 700 1.3rem/1 'Caveat', cursive; color: var(--tv-accent); }
.tv-ar-fest p { margin: 3px 0 0; font-size: .92rem; }
.tv-ar-fest small { display: block; margin-top: 4px; font: inherit; font-size: .78rem; opacity: .75; }
.tv-ar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.tv-ar-chips span { padding: 1px 9px; font-size: .8rem; border: 1.5px solid var(--tv-ink2); border-radius: 99px; background: var(--tv-paper2); }
@media (max-width: 640px), (max-height: 520px) {
  .tv-line { font-size: 1rem; min-height: 2.5em; }
  .tv-ar-fest { margin-top: 6px; padding: 6px 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .tv-line-in { animation: none; } }