/* An original, hotel-inspired family identity: warm stone, rose, plum and brass. */
:root {
  font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  color: #3b2832;
  background: #faf4ee;
  --plum: #542b3d;
  --plum-dark: #3b1d2d;
  --rose: #ead4d3;
  --paper: #fffaf5;
  --gold: #b58a50;
  --gold-text: #986b40;
  --font-title: 'Playfair Display', 'Iowan Old Style', Baskerville, Georgia, serif;
}

@font-face { font-family: 'Playfair Display'; src: url('/fonts/PlayfairDisplay-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/PlayfairDisplay-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/PlayfairDisplay-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body { background: linear-gradient(180deg, #f8eee9, #faf6f0 500px); }
h1, h2, h3, .stat strong, .bingo-tile strong, .map-label {
  font-family: var(--font-title);
  letter-spacing: -.01em;
}
h2, h3 { font-weight: 600; }
h1 { font-weight: 500; }
h2, h3 { color: var(--plum-dark); }

.hero {
  min-height: 250px;
  background: linear-gradient(115deg, #472438 0%, #68384d 60%, #956677 100%);
  color: var(--paper);
  border-bottom: 4px solid #c6a36b;
  box-shadow: inset 0 -1px #f4dbad80;
}
.hero::before {
  width: 300px;
  height: 370px;
  top: 27px;
  right: 8%;
  border: 1px solid #ebcda480;
  border-radius: 150px 150px 0 0;
  box-shadow: 0 0 0 18px #68384d20, 0 0 0 19px #ebcda450,
              0 0 0 38px #68384d20, 0 0 0 39px #ebcda42b;
  opacity: .9;
}
.hero::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  right: calc(8% + 148px);
  top: 14px;
  border-radius: 50%;
  background: #e7c899;
  box-shadow: 0 0 0 5px #e7c89935;
}
.hero h1 { color: #fff8ed; text-shadow: 0 2px 14px #32182a35; }
.hero p { color: #f1e0dd; }
.hero .eyebrow { color: #f3d49e !important; }
.topline { color: #f2e3d9; }
.brand { gap: 12px; letter-spacing: .12em; }
.brandmark {
  width: 36px;
  height: 36px;
  border: 1px solid #e7c899;
  border-radius: 50% 50% 45% 45%;
  background: #fffaee15;
  color: #f5d9a8;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}
.datepill, .ghost-light {
  border-color: #ddbc8c;
  background: #fff6e714;
  color: #fff5e6;
  box-shadow: inset 0 1px #fff9ef20;
}
.ghost-light:hover { background: #fff6e72b; }

.nav {
  background: #fffbf7;
  border: 1px solid #e4ccaa;
  box-shadow: 0 14px 32px #5a31451b;
}
.nav button { color: #704b5a; }
.nav button:hover { background: #f7ebe5; }
.nav button.active { background: var(--plum); color: #fff9ef; }
.panel { color: #3b2832; }
.section-head h2 { color: var(--plum-dark); }
.eyebrow { color: #986b40; }
.muted, .subtle { color: #76676c; }
.card, .login-form, .modal {
  background: var(--paper);
  border: 1px solid #e9d8c7;
  box-shadow: 0 8px 26px #6b3e4c12;
}
.mini-card { background: #fcf3ee; border-color: #ead9cc; }
.line, .ride { border-color: #eee0d5; }
.footer { border-color: #decfc5; color: #796d70; }

.btn { background: var(--plum); color: #fffaf3; box-shadow: 0 2px 0 #321b2a20; }
.btn:hover { background: #68384d; }
.btn.secondary { background: #efdfdc; color: #542b3d; }
.btn.secondary:hover { background: #e7cecb; }
.btn.tertiary { background: #f1e4cc; color: #674c2f; }
.btn.danger { background: #f3dedc; color: #943f45; }
.input, select, textarea {
  background: #fffdfa;
  border-color: #d9c8bf;
  color: #3b2832;
}
.input:focus, select:focus, textarea:focus {
  border-color: #9d647b;
  box-shadow: 0 0 0 3px #e9d0d8;
}
.time-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.time-choice span { color: var(--plum); font-weight: 700; }
.time-choice select { min-width: 0; font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #b58a50;
  outline-offset: 2px;
}
.badge { background: #f2e8dd; color: #64524a; }
.badge.blue { background: #e4e8ed; color: #38576c; }
.badge.gray { background: #e9e6e2; color: #55545a; }
.notice { background: #fff2e3; border-color: #e7c9a0; color: #6e4b2d; }
.empty { border-color: #d5bda9; color: #75656a; }
.stat { background: #f4e8e6; border: 1px solid #e8d6d0; }
.stat strong { color: var(--plum); }
.stat span { color: #795d67; }
.timeline { border-color: #cfac79; }
.event::before { background: #b58a50; border-color: #faf4ee; }
.event time { color: #8b6134; }
.bingo-tile { background: #faeee9; border-color: #e7d4c9; }
.bingo-tile.done { background: #e4eee4; border-color: #a9c7a9; }
.map { border-color: #d7bfa9; }
.map-pin { border-color: #fffaf5; box-shadow: 0 3px 12px #4c29394f; }
.map-pin.plan { background: #714a72; }
.map-pin.person { background: var(--person-color, var(--plum)); }
.toast { background: var(--plum-dark); color: #fffaf3; }
.overlay { background: #2d1a2bcc; }
.modal .close { background: #f0e3de; color: var(--plum); }

.login { background: #542b3d; }
.login-visual {
  background: radial-gradient(circle at 80% 80%, #a1707f 0%, transparent 46%),
              linear-gradient(145deg, #4c263a, #764257);
  color: #fff8ef;
}
.login-visual::before {
  content: '';
  position: absolute;
  width: min(46vw, 550px);
  height: min(58vw, 700px);
  right: -14%;
  bottom: -22%;
  border: 1px solid #e8c69180;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 0 23px #b78c7714, 0 0 0 24px #e8c69152,
              0 0 0 48px #b78c7710, 0 0 0 49px #e8c6912e;
}
.login-visual::after {
  content: '';
  width: 12px;
  height: 12px;
  right: 9%;
  bottom: 21%;
  border-radius: 50%;
  background: #e8c691;
  box-shadow: 0 0 0 8px #e8c6912c;
  font-size: 0;
  line-height: 1;
}
.login-visual h1 { color: #fff7ec; text-shadow: 0 2px 15px #361b2a4d; }
.login-visual p { color: #f3e2df; }
.login-visual .eyebrow { color: #f2d39c; }
.login-form-wrap { background: linear-gradient(135deg, #f6e8e6, #fcf7ee); }
.login-form { border-radius: 24px; box-shadow: 0 20px 48px #6b3e4c20; }

@media (max-width: 850px) {
  .login-visual::before { width: 300px; height: 380px; right: -60px; bottom: -230px; }
  .login-visual::after { right: 82px; bottom: 110px; }
}
@media (max-width: 600px) {
  .hero::before { width: 180px; height: 240px; right: -45px; top: 50px; border-radius: 90px 90px 0 0; }
  .hero::after { display: none; }
  .brand { letter-spacing: .08em; }
  .brandmark { width: 31px; height: 31px; font-size: 1.15rem; }
  .nav { border-radius: 13px; }
}

@font-face {
  font-family: 'Skoltiez Swash';
  src: url('/fonts/BerkshireSwash-Regular.ttf') format('truetype');
  font-display: swap;
}
.brand { white-space: nowrap; }
.brand-spark { color: #f3d49e; font-size: 1.45rem; line-height: 1; }
.brand-wordmark {
  color: #fff7e9;
  font-family: 'Skoltiez Swash', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 0 1px #311522, 0 2px 10px #36172855;
}
.brand-subtitle {
  color: #e8c995;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  align-self: end;
  padding-bottom: 3px;
}
.login-visual .brand-wordmark { font-size: 3.1rem; }
.nav-icon { display: inline-block; margin-right: 6px; font-size: 1.05rem; line-height: 1; }

.grid, .grid > *, .map-grid, .map-grid > *, .map-side, .card, .attraction-list { min-width: 0; }
.map-grid { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .85fr); }
.map-card { overflow: hidden; }
.map-card .card-head { flex-wrap: wrap; }
.map-card-head { gap: 8px; }
.map-card-head h3 { flex: 1; }
.map-expand-btn { white-space: nowrap; }
#park-map { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.map-pin.cluster { border-color: #fff8ed; font-size: .88rem; box-shadow: 0 0 0 3px #542b3d, 0 3px 12px #4c29394f; }
.map-view-switch { display: none; }
.map-controls { display: grid; gap: 8px; margin: 0 0 14px; }
.map-controls > .input { width: 100%; }
.map-control-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.map-control-row select { width: 100%; min-width: 0; }
.filter-details { border: 1px solid #e5d3c5; border-radius: 10px; background: #fffaf5; }
.filter-details summary { padding: 10px 13px; min-height: 42px; color: var(--plum); font-weight: 700; cursor: pointer; }
.filter-details[open] summary { border-bottom: 1px solid #e5d3c5; }
.filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px; }
.filter-options label { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.filter-options label:first-child { flex-basis: 100%; }
.filter-options input[type=range] { flex: 1; min-width: 100px; }
.map-layers { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; }
.map-layers .toggle { background: #f6ebe5; border-radius: 9px; padding: 7px 9px; }
.map-legend { line-height: 1.4; }
.attraction-list { overscroll-behavior: contain; }
.ride {
  width: 100%;
  min-height: 65px;
  padding: 10px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eee0d5;
  color: inherit;
}
.ride:hover { background: #fbf2ec; }
.ride .badge { flex: 0 0 77px; justify-content: center; text-align: center; font-variant-numeric: tabular-nums; }
.ride-main strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ride-main .small { display: block; }
.ride-chevron { color: #9b7581; font-size: 1.6rem; line-height: 1; }
.more-rides { width: 100%; margin-top: 12px; }
.day-tabs { scroll-snap-type: x proximity; scrollbar-width: none; }
.day-tabs button { scroll-snap-align: start; }

@media (max-width: 850px) {
  .map-grid { grid-template-columns: minmax(0, 1fr); }
  .map-side { min-width: 0; }
}
@media (max-width: 600px) {
  html, body, #app, .shell, .content, .panel { max-width: 100%; }
  body { min-width: 320px; }
  .hero { min-height: 0; padding: 12px 16px 14px; }
  .hero::before { height: 150px; top: 22px; opacity: .45; }
  .topline { gap: 10px; }
  .brand { gap: 5px; letter-spacing: 0; min-width: 0; }
  .brand-spark { font-size: 1.1rem; }
  .brand-wordmark { font-size: 1.6rem; }
  .brand-subtitle { font-size: .5rem; letter-spacing: .06em; padding-bottom: 1px; }
  .ghost-light { min-width: 0; padding: 7px 9px; font-size: .72rem; }
  .hero-row { margin-top: 10px; gap: 5px; }
  .hero .eyebrow, .hero p { display: none; }
  .hero h1 { font-size: 1.65rem; line-height: 1.05; margin-bottom: 0; }
  .datepill { padding: 0; border: 0; background: transparent; box-shadow: none; font-size: .75rem; }
  .content { padding: 15px 14px calc(84px + env(safe-area-inset-bottom)); }
  .panel { margin-top: 0; }
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(var(--nav-count), minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    box-shadow: 0 -7px 24px #4b283b22;
    overflow: visible;
  }
  .nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 50px; padding: 3px 1px; font-size: .63rem; line-height: 1.1; }
  .nav button.active { background: #f3e5df; color: var(--plum); }
  .nav-icon { font-size: 1.2rem; margin: 0; }
  .section-head { align-items: start; gap: 8px; }
  .section-head h2 { line-height: 1.1; }
  .section-head > .btn { flex: 0 0 auto; }
  .card { padding: 15px; }
  .map-controls { margin-bottom: 10px; }
  .map-view-switch { display: grid; position: sticky; top: 0; z-index: 8; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 12px; background: #fffaf5; border: 1px solid #e4ccaa; border-radius: 12px; box-shadow: 0 4px 14px #5a314515; }
  .map-view-switch button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--plum); font-weight: 700; }
  .map-view-switch button[aria-pressed=true] { background: var(--plum); color: #fff9ef; }
  .map-grid[data-view=list] .map-card, .map-grid[data-view=map] .map-side { display: none; }
  .map-card { padding: 11px; }
  .map-card .card-head { padding: 0 3px; margin-bottom: 9px; }
  .map-card .card-head h3 { margin: 0; }
  .map-card #map-provider { flex-basis: 100%; }
  .map { height: min(55dvh, 520px); min-height: 340px; }
  .map-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 8px; font-size: .7rem; }
  .map-layers { gap: 5px; }
  .map-layers .toggle { font-size: .78rem; padding: 6px 7px; }
  .attraction-list { max-height: none; padding-right: 0; }
  .ride { min-height: 70px; }
  .bingo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .bingo-tile { min-height: 165px; padding: 12px; }
  .bingo-tile strong { font-size: 1rem; }
  .bingo-tile .badge { white-space: normal; }
  .login-visual { min-height: 245px; padding: 22px; }
  .login-visual h1 { font-size: 2.45rem; }
  .login-visual .brand-wordmark { font-size: 2.25rem; }
  .login-form-wrap { padding: 16px; }
  .login-form { padding: 24px; }
  .overlay { z-index: 100; padding: 0; }
  .modal { width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
  .modal .btn.tiny, .btn.tiny { min-height: 40px; }
  .toast { z-index: 120; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .input, select, textarea { font-size: 16px; }
}
@media (max-width: 360px) {
  .nav button { font-size: .6rem; }
  .nav-icon { font-size: 1.12rem; }
  .brand-subtitle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .map-view-switch, .nav { scroll-behavior: auto; }
}

/* Compact navigation keeps the map and page content in view. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  color: #fff8ed;
  background: linear-gradient(110deg, #472438, #68384d 72%, #765063);
  border-bottom: 2px solid #c6a36b;
  box-shadow: 0 3px 14px #3b1d2d21;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1280px;
  min-height: 62px;
  margin: 0 auto;
  padding: 8px 22px;
}
.header-inner .brand { min-width: 0; }
.content { padding-top: 18px; }
.panel { margin-top: 0; }

@media (max-width: 600px) {
  .login { grid-template-rows: auto minmax(0, 1fr); }
  .header-inner { min-height: calc(56px + env(safe-area-inset-top)); padding: calc(7px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 7px calc(14px + env(safe-area-inset-left)); }
  .header-inner .brand { gap: 5px; }
  .header-inner .brand-wordmark { font-size: 1.65rem; }
  .content { padding: 12px calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  .map-view-switch { top: calc(58px + env(safe-area-inset-top)); }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .login-visual { min-height: 160px; padding: calc(19px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 19px calc(22px + env(safe-area-inset-left)); }
  .login-visual h1 { margin: 0; font-size: 1.9rem; }
  .login-visual { align-items: center; justify-content: center; text-align: center; }
  .login-visual h1 { font-size: 1.6rem; }
  .login-visual .brand-wordmark { font-size: 2rem; }
  .login-form-wrap { align-items: start; }
  .login-form { padding: 20px; }
}
@media (max-width: 360px) {
  .header-inner .brand-subtitle { display: none; }
}

.photo-fab {
  position: fixed;
  right: max(22px, calc((100vw - 1280px)/2 + 22px));
  bottom: 22px;
  z-index: 1900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 18px;
  border: 2px solid #f7dfb7;
  border-radius: 100px;
  background: var(--plum);
  color: #fffaf3;
  box-shadow: 0 7px 24px #321b2a55;
  font-weight: 750;
  font-size: .95rem;
  line-height: 1.1;
}
.photo-fab:hover { background: #68384d; }
.photo-fab:focus-visible,
.photo-option:focus-visible,
.photo-existing-item:focus-visible,
.action-details summary:focus-visible { outline: 3px solid #b58a50; outline-offset: 3px; }
.photo-options { display: grid; gap: 10px; }
.photo-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 12px 15px;
  border: 1px solid #dfc8b6;
  border-radius: 14px;
  background: #fffaf5;
  color: var(--plum-dark);
  text-align: left;
}
.photo-option:hover { background: #f6eae3; }
.photo-option-icon { flex: 0 0 34px; text-align: center; font-size: 1.5rem; }
.photo-option strong,
.photo-option small { display: block; }
.photo-option strong { font-size: 1rem; }
.photo-option small { margin-top: 3px; color: #76676c; font-size: .81rem; }
.photo-hint { margin: 13px 0 0; }
.photo-existing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-existing-item {
  min-width: 0;
  padding: 5px;
  border: 1px solid #dfc8b6;
  border-radius: 12px;
  background: #fffaf5;
  color: var(--plum-dark);
  text-align: left;
}
.photo-existing-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #eaded7; }
.photo-existing-item span { display: block; padding: 7px 3px 3px; font-size: .75rem; }
.photo-back { width: 100%; margin-top: 15px; }
.action-details { border: 1px solid #e5d3c5; border-radius: 10px; background: #fffaf5; }
.action-details summary { min-height: 45px; padding: 11px 13px; color: var(--plum); font-weight: 700; cursor: pointer; }
.action-details[open] summary { border-bottom: 1px solid #e5d3c5; }
.action-details > .stack { padding: 12px; }

@media (max-width: 600px) {
  .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .photo-fab { right: calc(14px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .map-card.is-expanded { z-index: 1800; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
.app-header { z-index: 1600; }
.overlay { z-index: 2000; }
.toast { z-index: 2100; }
body:has(.overlay) .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
@media (min-width: 601px) { .toast { bottom: 90px; } }

/* Skoltiez castle logo, recoloured in the hotel's brass and cream. */
.brand-castle { width: auto; height: 30px; align-self: center; filter: drop-shadow(0 1px 0 #311522); }
/* A family copy with an official logo (BRAND with brand/wordmark.svg): the logo takes the wordmark colour. */
.brand-logo { display: inline-block; height: 1.05em; aspect-ratio: 330.8 / 94.49; vertical-align: middle; background: currentColor; -webkit-mask: url('/brand/wordmark.svg') center / contain no-repeat; mask: url('/brand/wordmark.svg') center / contain no-repeat; filter: drop-shadow(0 1px 0 #311522); }
.login-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(300px, 72vw);
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 4px 18px #2a101d66);
}
@media (max-width: 600px) {
  .login-logo { width: min(190px, 56vw); margin: 0 auto 8px; }
}

/* Scorelist: one row per attraction with a large counter. */
.score-summary { margin: 10px 2px 0; }
.score-list { display: grid; }
.score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #eee0d5; }
.score-row:first-child { border-top: 0; }
.score-main { min-width: 0; display: grid; gap: 3px; }
.score-main strong { overflow-wrap: anywhere; }
.score-count { min-width: 2.6em; text-align: right; color: var(--plum); font-family: var(--font-title); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.score-buttons { display: flex; gap: 6px; }
.score-btn { min-width: 48px; min-height: 48px; padding: 0 10px; font-size: 1.15rem; font-weight: 700; }
.rank-table { display: grid; }
.rank-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 5.6em; gap: 8px; align-items: center; padding: 10px 6px; border-top: 1px solid #eee0d5; font-variant-numeric: tabular-nums; }
.rank-row > span + span { text-align: right; }
.rank-row.rank-head { border-top: 0; padding-top: 0; color: #795d67; font-size: .8rem; font-weight: 700; }
.rank-row.is-me { background: #f4e8e6; border-radius: 10px; font-weight: 700; }
.rank-medal { display: inline-block; min-width: 1.6em; }
@media (max-width: 380px) {
  .score-row { grid-template-columns: minmax(0, 1fr) auto; }
  .score-buttons { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Calm map screen: one toolbar, filters in a sheet, map without chrome. */
.map-controls, .map-layers, .map-card-head { display: none; }
.map-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.map-toolbar .map-view-switch { flex: 1; margin: 0; }
.filter-button { min-height: 50px; gap: 8px; white-space: nowrap; }
.filter-count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 5px; border-radius: 99px; background: var(--plum); color: #fff9ef; font-size: .8rem; }
.map-frame { position: relative; }
.map-frame .map-expand-btn { position: absolute; top: 10px; right: 10px; z-index: 900; box-shadow: 0 2px 8px #3b1d2d33; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .8rem; }
.map-legend #map-provider:empty { display: none; }
#map-plan-snippet { margin-top: 6px; }
.map-search { width: 100%; }
.filter-sheet { display: grid; gap: 8px; margin: 6px 0 18px; }
.filter-sheet > label { font-weight: 700; margin-top: 6px; }
.filter-sheet select, .filter-sheet input[type=range] { width: 100%; }
.filter-sheet fieldset { border: 1px solid #e5d3c5; border-radius: 12px; margin: 8px 0 0; padding: 6px 12px 10px; display: grid; }
.filter-sheet legend { padding: 0 6px; font-weight: 700; }
.filter-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.filter-check input { width: 22px; height: 22px; accent-color: var(--plum); }
.filter-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.filter-actions .btn { min-height: 50px; }
@media (max-width: 850px) {
  .map-toolbar { position: sticky; top: 0; z-index: 8; }
  .map-toolbar .map-view-switch { position: static; box-shadow: none; }
  .map-legend { display: flex; font-size: .78rem; }
}
@media (max-width: 600px) {
  .map-toolbar { top: calc(58px + env(safe-area-inset-top)); }
  .map { height: min(64dvh, 560px); }
  .map-card { padding: 8px; }
}
.dot-group { background: #dc9b43; box-shadow: 0 0 0 2px #542b3d; }
.filter-sheet input[type=range] { accent-color: var(--plum); min-height: 32px; }
.map-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.map-card { align-self: start; }
@media (min-width: 851px) { .map-toolbar { display: none; } }
@media (max-width: 850px) { .filter-button-wide { display: none; } }

/* First-login onboarding: one full-screen question at a time. */
body.onboarding-open { overflow: hidden; }
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
  background: radial-gradient(circle at 80% 85%, #a1707f 0%, transparent 50%), linear-gradient(160deg, #4c263a, #764257);
  color: #fff8ef;
  text-align: center;
}
.onboarding-inner { width: 100%; max-width: 420px; margin: auto 0; }
.onboarding h1 { margin: 10px 0 12px; color: #fff7ec; font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.15; }
.onboarding p { margin: 0 0 14px; color: #f3e2df; font-size: 1.06rem; line-height: 1.5; }
.onboarding strong { color: #f5d9a8; }
.onboarding-logo { display: block; width: min(210px, 58vw); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 4px 18px #2a101d66); }
.onboarding-icon { font-size: 3.2rem; line-height: 1; margin-bottom: 4px; color: #f3d49e; }
.onboarding-progress { color: #e8c995 !important; font-size: .8rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.onboarding-status { padding: 10px 14px; border-radius: 12px; background: #ffffff1a; }
.onboarding-status.granted, .onboarding-status.already { background: #3e906566; color: #fff !important; font-weight: 700; }
.onboarding-actions { display: grid; gap: 10px; margin-top: 22px; }
.onboarding-actions .btn { min-height: 54px; font-size: 1.05rem; width: 100%; }
.onboarding-actions .btn:not(.secondary) { background: #f3d49e; color: #3b1d2d; }
.onboarding-actions .btn.secondary { background: transparent; color: #fff3e6; border: 1px solid #f3d49e80; }
.onboarding-skip-all { margin-top: 18px; padding: 10px 14px; border: 0; background: none; color: #ead4d3; font: inherit; text-decoration: underline; cursor: pointer; }
.onboarding-summary { list-style: none; padding: 0; margin: 8px 0 18px; text-align: left; }
.onboarding-summary li { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid #ffffff26; font-size: 1.05rem; }
.onboarding-summary strong { color: #ead4d3; }
.onboarding-summary strong.ok { color: #b7e4c7; }

/* Short guided tour after the first login. */
body.tour-open { overflow: hidden; }
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 3200;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.tour-shade { position: absolute; background: #211822c4; pointer-events: none; }
.tour-focus {
  position: absolute;
  border: 3px solid #f3d49e;
  border-radius: 15px;
  box-shadow: 0 0 0 4px #fff8ea66;
  pointer-events: none;
}
.tour-card {
  position: absolute;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 18px;
  border: 2px solid #d9b982;
  border-radius: 18px;
  background: #fffaf5;
  color: var(--plum-dark);
  box-shadow: 0 14px 40px #20111dc4;
}
.tour-card h2 { margin: 0 0 10px; font-size: 1.65rem; line-height: 1.1; }
.tour-card > p:not(.tour-progress) { margin: 0 0 18px; font-size: 1.06rem; line-height: 1.45; }
.tour-progress { margin: 0 0 8px; color: #986b40; font-size: .82rem; font-weight: 800; letter-spacing: .06em; }
.tour-actions { display: flex; gap: 9px; }
.tour-actions .btn { flex: 1; min-height: 50px; padding: 10px; }
.tour-actions .tour-primary { background: var(--plum); color: #fffaf3; }
.tour-skip { display: block; min-height: 44px; margin: 6px auto 0; padding: 8px 14px; border: 0; background: transparent; color: #704b5a; text-decoration: underline; }
.tour-card button:focus-visible { outline: 3px solid #b58a50; outline-offset: 2px; }
.tour-card strong { color: var(--plum-dark); }
/* Trying it yourself: taps inside the gold frame reach the app, the rest stays dark. */
.tour-root.is-try { pointer-events: none; }
.tour-root.is-waiting .tour-card, .tour-root.is-waiting .tour-focus { visibility: hidden; }
.tour-root.is-try .tour-shade, .tour-root.is-try .tour-card { pointer-events: auto; }
.tour-root.is-try .tour-focus { animation: tour-pulse 1.6s ease-in-out infinite; }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 9px #fff8ea44; } }
@media (prefers-reduced-motion: reduce) { .tour-root.is-try .tour-focus { animation: none; } }
.tour-chapter-list { margin: -6px 0 18px; padding-left: 1.4em; font-size: 1.02rem; line-height: 1.6; }
.tour-chapters { display: grid; gap: 8px; margin: -4px 0 16px; }
.tour-chapter { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid #e3cfb4; border-radius: 14px; background: #fff; color: var(--plum-dark); font: inherit; font-size: 1.04rem; font-weight: 700; text-align: left; cursor: pointer; }
.tour-chapter span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f3e4cf; color: #7a5232; font-size: .9rem; }
.tour-chapter small { margin-left: auto; color: #3e7a52; font-size: .82rem; font-weight: 700; }

/* Full-screen map at every width. */
body.map-fullscreen { overflow: hidden; }
.map-card.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: #fffaf5;
}
.map-card.is-expanded .map-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.map-card.is-expanded .map { flex: 1; height: auto; min-height: 0; }
.map-card.is-expanded #map-plan-snippet { display: none; }
.map-card.is-expanded { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Navigation: logo goes home, photos open large */
button.brand { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.photo-open { display: block; width: 100%; border: 0; padding: 0; color: inherit; cursor: zoom-in; }
.modal.modal-photo { width: min(960px, 100%); }
.photo-viewer { margin: 0 0 14px; }
.photo-viewer img { display: block; width: 100%; max-height: 72dvh; object-fit: contain; border-radius: 12px; background: #1d1018; }
.photo-viewer figcaption { margin-top: 8px; font-size: .9rem; opacity: .75; }

/* Mickey and Minnie touches: family pins, bingo stamp, onboarding. */
.map-pin.person {
  position: relative;
  width: 38px;
  min-width: 38px;
  padding: 0;
  margin-top: 6px;
  border-radius: 50%;
  transform: none;
  background: var(--person-color, var(--plum));
}
.map-pin.person::before, .map-pin.person::after {
  content: '';
  position: absolute;
  top: -10px;
  z-index: -1;
  width: 19px;
  height: 19px;
  border: 2px solid #fffaf5;
  border-radius: 50%;
  background: var(--person-color, var(--plum));
}
.map-pin.person::before { left: -7px; }
.map-pin.person::after { right: -7px; }
.bingo-tile { position: relative; }
.bingo-tile.done::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 24px;
  background: #3e9065;
  -webkit-mask: url('/brand/mickey.svg') center / contain no-repeat;
  mask: url('/brand/mickey.svg') center / contain no-repeat;
  opacity: .85;
}
.bingo-tile.done strong { padding-right: 30px; display: block; }
.onboarding-pair { display: flex; justify-content: center; gap: 14px; margin-bottom: 6px; }
.onboarding-pair svg { filter: drop-shadow(0 3px 10px #2a101d66); }

/* Map popups in the app style, not the Leaflet default */
.leaflet-popup-content-wrapper { background: var(--paper); color: var(--plum-dark); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 6px 20px #3b1d2d33; }
.leaflet-popup-tip { background: var(--paper); border: 1px solid var(--gold); box-shadow: none; }
.leaflet-popup-content { margin: 12px 16px; font: inherit; line-height: 1.35; }
.map-popup { display: grid; gap: 2px; }
.map-popup strong { font-family: var(--font-title); font-size: 1.1rem; color: var(--plum); }
.map-popup span { font-size: .9rem; color: #6b5560; }

/* Hotel signage: small labels in spaced capitals, brass coloured */
.eyebrow, .rank-row.rank-head, .card-head .subtle, .tour-progress {
  color: var(--gold-text);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Place previews keep map taps short and predictable. */
.map-search-row { display:flex; gap:8px; align-items:center; margin:0 0 12px; }
.map-search-row .map-search { flex:1; min-width:0; }
.map-search-row .btn { white-space:nowrap; }
.map-active-filters { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px; }
.map-active-filters:empty { display:none; }
.map-active-filters button { border:1px solid #d6bca5; border-radius:99px; background:#fff7ee; color:var(--plum); min-height:34px; padding:5px 12px; }
.map-legend { display:block; margin:12px 0 5px; font-size:.78rem; }
.map-legend summary { cursor:pointer; font-weight:700; color:#6d5556; }
.map-legend > div { display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:8px; }
.maptiler-logo { position:absolute; left:12px; bottom:24px; z-index:500; padding:3px 6px; border-radius:4px; color:#334; background:#fffc; font-size:.68rem; text-decoration:none; }
.map-fallback .maptiler-logo { display:none; }
.map-pin.store { background:#a56f53; }
.map-pin.restaurant { background:#885d8b; }
.map-pin.person img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.place-peek { position:relative; display:grid; grid-template-columns:90px minmax(0,1fr); gap:14px; margin-top:10px; padding:10px; border:1px solid #ddc8b0; border-radius:16px; background:#fff8ef; box-shadow:0 8px 20px #4c293920; }
.place-peek-photo { min-height:100px; overflow:hidden; border-radius:11px; background:#f0dcca; }
.place-peek-photo img { width:100%; height:100%; object-fit:cover; }
.place-peek-body h3 { margin:3px 28px 2px 0; }
.place-peek-body p { margin:0 0 8px; font-size:.86rem; }
.place-peek-close { position:absolute; top:6px; right:6px; width:34px; height:34px; border:0; border-radius:50%; background:#eadbd3; color:var(--plum); font-size:1.35rem; }
.place-peek-actions,.place-main-actions,.place-more { display:flex; flex-wrap:wrap; gap:8px; }
.place-peek-actions .btn { min-height:38px; padding:8px 11px; font-size:.8rem; }
.place-photo-missing { height:100%; min-height:100px; display:grid; align-content:center; justify-items:center; gap:3px; padding:8px; background:radial-gradient(circle at 50% 20%,#fff7dc,#e7c9bf); color:#6a4b5a; text-align:center; }
.place-photo-missing span { font-family:var(--font-title); font-size:2.8rem; line-height:1; }
.place-photo-missing small { font-size:.75rem; }
.place-page { max-width:860px; margin:auto; }
.place-page > .btn { margin-bottom:12px; }
.place-hero { height:clamp(220px,38vw,420px); overflow:hidden; border-radius:20px 20px 0 0; background:#e8d2c6; }
.place-hero img { width:100%; height:100%; object-fit:cover; }
.place-hero .place-photo-missing { min-height:100%; }
.place-page-main { padding:clamp(18px,4vw,36px); background:var(--paper); border:1px solid #e9d8c7; border-radius:0 0 20px 20px; }
.place-page-main h1 { margin:0 0 12px; font-size:clamp(2rem,5vw,3.1rem); }
.place-status { display:inline-block; margin:0 0 18px; padding:6px 12px; border-radius:30px; background:#e6d9d1; font-weight:700; }
.place-status.green { background:#d7ead6; }.place-status.orange { background:#f4e1bf; }.place-status.red { background:#efd4cf; }
.place-main-actions { margin:22px 0 12px; }.place-more { margin:12px 0; }.place-more .btn { text-decoration:none; }

/* Family profiles and invitation cards. */
.avatar-chip,.profile-avatar { position:relative; display:inline-grid; place-items:center; flex:none; width:42px; height:42px; border:3px solid #fffaf5; border-radius:50%; background:var(--person-color,#70465a); color:white; font-weight:800; text-align:center; box-shadow:0 2px 8px #2a152833; }
.avatar-chip img,.profile-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.frame-mickey::before,.frame-mickey::after,.frame-minnie::before,.frame-minnie::after { content:''; position:absolute; top:-13px; width:20px; height:20px; border:2px solid #fffaf5; border-radius:50%; background:#29252b; z-index:-1; }
.frame-mickey::before,.frame-minnie::before { left:-8px; }.frame-mickey::after,.frame-minnie::after { right:-8px; }
.frame-minnie { box-shadow:0 0 0 3px #cb4f70,0 2px 8px #2a152833; }
.frame-minnie img,.frame-minnie span { position:relative; z-index:1; }
.frame-donald { border-color:#4181ba; box-shadow:0 0 0 3px #e6bd68; }.frame-stitch { border-color:#468bbf; box-shadow:0 0 0 3px #84c4cf; }
.profile-grid { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:16px; align-items:start; }
.profile-preview { display:grid; justify-items:center; gap:10px; text-align:center; }
.profile-avatar { width:130px; height:130px; margin:24px 0 9px; font-size:3rem; }
.profile-avatar.frame-mickey::before,.profile-avatar.frame-mickey::after,.profile-avatar.frame-minnie::before,.profile-avatar.frame-minnie::after { width:58px; height:58px; top:-30px; }
.profile-avatar.frame-mickey::before,.profile-avatar.frame-minnie::before { left:-19px; }.profile-avatar.frame-mickey::after,.profile-avatar.frame-minnie::after { right:-19px; }
.profile-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin:10px 0 20px; }
.profile-choice { display:grid; justify-items:center; gap:4px; padding:10px 5px; border:1px solid #e4d1c1; border-radius:12px; background:#fff; text-align:center; cursor:pointer; }
.profile-choice:has(input:checked) { outline:3px solid #c69f69; background:#fff7e9; }
.profile-choice input { position:absolute; opacity:0; }.profile-choice > span { font-size:1.6rem; }.profile-choice small { font-size:.73rem; }
.frame-sample { display:grid; place-items:center; width:36px; height:36px; border:3px solid #f6e8db; border-radius:50%; background:#70465a; color:white; }
.invite-card { padding:15px 0; border-bottom:1px solid #e9d8c7; }.invite-card:last-child { border-bottom:0; }
.invite-top { display:flex; gap:10px; align-items:center; }.invite-top > div { display:grid; }.invite-card h4 { margin:10px 0 5px; font-size:1.05rem; }.invite-card p { margin:0 0 10px; }
.notice-row { display:grid; gap:3px; width:100%; padding:12px; border:0; border-bottom:1px solid #eadbd3; background:transparent; color:inherit; text-align:left; }
.notice-row.unread { background:#fff2df; }.notice-row span { font-size:.84rem; }.notice-row small { color:#7e6d70; }
.invite-recipients { display:grid; gap:6px; padding:10px; border:1px solid #e9d8c7; border-radius:10px; }.invite-recipients[hidden] { display:none; }

/* Large controls and small groups make the hunt readable on phones. */
.game-switch { display:flex; gap:7px; overflow:auto; margin:0 0 16px; }.game-switch .btn { flex:1; white-space:nowrap; }
.game-intro { margin-bottom:15px; background:linear-gradient(120deg,#fff6e9,#f4e4e7); }.game-intro p { margin:5px 0 0; }
.challenge-section { margin:20px 0; }.challenge-section h3 { margin:0 0 10px; }
.challenge-list { display:grid; gap:9px; }.challenge-card { border:1px solid #e2cfc1; border-radius:13px; background:#fffaf5; }
.challenge-card summary { display:flex; justify-content:space-between; gap:8px; min-height:58px; align-items:center; padding:12px 16px; cursor:pointer; font-weight:700; }
.challenge-card summary small { color:#806e70; font-weight:400; text-align:right; }.challenge-card[open] summary { border-bottom:1px solid #eee0d5; }
.challenge-body { display:grid; gap:10px; justify-items:start; padding:14px 16px; }.challenge-body p { margin:0; }.challenge-body .btn { min-height:46px; }
.day-activity form { display:grid; gap:10px; }.day-activity label { font-weight:700; }.day-activity .btn { margin-top:8px; }
.activity-row { display:grid; grid-template-columns:minmax(88px,.8fr) 1fr 1fr; gap:8px; align-items:end; padding:8px 0; border-bottom:1px solid #eadfd4; }
.activity-who { display:grid; gap:2px; align-self:center; }
.activity-state { font-size:.72rem; font-weight:700; color:#8a736c; }
.activity-row.is-filled .activity-state { color:#2f7a52; }
.activity-row label { display:grid; gap:4px; font-size:.75rem; }
.my-steps-form { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; }
.my-steps-form label { display:grid; gap:4px; font-size:.75rem; }
.my-steps-form .btn { min-height:48px; }
.book-blend-hint { margin:0 0 8px; }
.album-tile-wrap { position:relative; }.star-btn { position:absolute; top:6px; right:6px; z-index:1; width:36px; height:36px; border:0; border-radius:50%; background:#fffaf5ee; color:#986b40; font-size:1.15rem; }
.book-switch { margin-bottom:12px; }.book-people { flex-wrap:wrap; gap:8px; margin:0 0 14px; align-items:center; }.book-people .btn { white-space:nowrap; }
.score-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #e9d8c7; }
.score-main { display:grid; }.score-buttons { display:flex; gap:6px; }.score-count { font-weight:800; }.game-more { margin-top:15px; }.game-more summary { cursor:pointer; font-weight:700; }
.evening-review .card-head { margin-bottom:8px; }
.review-overlay { align-items:stretch; justify-content:center; padding:0; background:#24131f; }
.modal.modal-review { position:relative; display:block; width:min(100%,1050px); height:100dvh; max-height:none; min-height:0; overflow:hidden; padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); border-radius:0; background:#fffaf5; }
.modal-review .close { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:18px; z-index:1; width:44px; height:44px; }
.review-flow { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; }
.review-top { padding-right:46px; }
.review-top .eyebrow { display:block; margin:0 0 4px; }
.review-top h2 { margin:0; font-size:clamp(1.4rem,4vw,2rem); }
.review-stage { flex:1; min-height:140px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:#211620; }
.review-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.review-info { display:grid; align-content:start; gap:8px; max-height:26dvh; overflow:auto; }
.review-person { display:flex; align-items:center; gap:10px; }
.review-person .av { margin:5px 0 0; }
.review-person > div { display:grid; }
.review-description strong { display:block; color:var(--plum); font-size:.78rem; }
.review-description p { margin:2px 0 0; line-height:1.4; }
.review-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.review-actions .btn { min-height:52px; }
.review-next { margin:0; text-align:center; }
.review-finished { display:grid; place-content:center; justify-items:center; gap:14px; height:100%; text-align:center; }
.review-finished h2,.review-finished p { margin:0; }
@media (min-width:700px) { .review-flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.55fr); grid-template-rows:auto minmax(0,1fr) auto auto; gap:16px; } .review-top { grid-column:1 / -1; } .review-stage { grid-column:1; grid-row:2 / 5; min-height:0; } .review-info { grid-column:2; grid-row:2; max-height:none; } .review-actions { grid-column:2; grid-row:3; } .review-next { grid-column:2; grid-row:4; } }
.admin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }.admin-grid .line { display:flex; justify-content:space-between; gap:8px; }.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Album pages and a restrained page turn. */
.album-day { margin:18px 0 26px; }.album-day h3 { padding-bottom:8px; border-bottom:1px solid #d9c7ba; }
.album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.album-tile { position:relative; display:block; overflow:hidden; min-height:170px; aspect-ratio:1; padding:0; border:4px solid #fffaf5; border-radius:11px; background:#e6d4c8; box-shadow:0 3px 12px #3b1d2d25; color:white; }
.album-tile img,.album-tile video { width:100%; height:100%; object-fit:cover; }.album-tile-caption { position:absolute; inset:auto 0 0; padding:18px 8px 8px; background:linear-gradient(transparent,#2e182ecf); text-align:left; font-size:.8rem; }
.album-play { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-size:2rem; text-shadow:0 2px 10px #000; }
.photo-viewer { display:grid; gap:10px; }.photo-viewer video { width:100%; max-height:70dvh; border-radius:12px; background:#1d1018; }.photo-credit { margin:0; color:#76676c; font-size:.8rem; }.photo-caption { margin:0; font-family:var(--font-title); font-size:1.2rem; }
.share-preview { height:220px; margin:12px 0; overflow:hidden; border-radius:12px; background:#e7d5c8; }.share-preview img,.share-preview video { width:100%; height:100%; object-fit:contain; }
.storybook { max-width:780px; margin:0 auto 28px; perspective:1200px; }.storybook-page { position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:430px; overflow:hidden; border:12px solid #eedfc8; border-radius:8px 20px 20px 8px; background:#fff7e9; box-shadow:inset 8px 0 15px #8d6a5a22,12px 14px 26px #3b1d2d33; animation:page-turn .55s ease both; transform-origin:left center; }
.storybook-page::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; background:#d9c7ac; box-shadow:0 0 12px #7a60504d; }.storybook-image { min-width:0; background:#e2cbbb; }.storybook-image img,.storybook-image video { width:100%; height:100%; object-fit:cover; }
.storybook-copy { display:flex; flex-direction:column; align-items:start; justify-content:center; gap:12px; padding:32px; }.storybook-copy h3 { font-size:clamp(1.6rem,3vw,2.5rem); }.storybook-copy p { color:#765c61; }
.storybook-cover { grid-column:1 / -1; display:grid; place-content:center; justify-items:center; gap:12px; background:radial-gradient(circle,#75465c,#3b1d2d); color:#fff8e9; text-align:center; }.storybook-cover h3 { color:#fff8e9; font-size:2.3rem; margin:0; }.storybook-cover p { margin:0; }.storybook-stars { color:#f2d59f; letter-spacing:20px; }
.storybook-controls { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; padding:16px; }.storybook-controls span { color:#705e61; font-size:.82rem; }
.recap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; }.recap-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #e9d8c7; }.recap-row span { text-align:right; font-size:.84rem; }
.album-archive summary { cursor:pointer; font-weight:700; }
@keyframes page-turn { from { opacity:.72; transform:rotateY(-10deg) translateX(12px) } to { opacity:1; transform:rotateY(0) translateX(0) } }
@media (prefers-reduced-motion:reduce) { .storybook-page { animation:none; } }
@media (max-width:700px) { .profile-grid,.admin-grid,.recap-grid,.my-steps-form { grid-template-columns:1fr; } .my-steps-form { grid-template-columns:1fr 1fr; } .my-steps-form .btn { grid-column:1 / -1; } .activity-row { grid-template-columns:1fr 1fr; } .activity-who { grid-column:1 / -1; }.storybook-page { min-height:450px; grid-template-columns:1fr; grid-template-rows:minmax(230px,1fr) auto; }.storybook-page::after { display:none; }.storybook-copy { padding:18px; }.storybook-copy h3 { margin:0; font-size:1.45rem; }.storybook-cover { grid-row:1 / -1; }.place-peek { grid-template-columns:72px minmax(0,1fr); gap:9px; }.place-peek-photo { min-height:90px; }.place-peek-actions .btn { padding:7px 9px; }.map-card.is-expanded #place-peek { position:absolute; bottom:calc(50px + env(safe-area-inset-bottom)); left:10px; right:10px; z-index:900; }.map-card.is-expanded .place-peek { max-height:45dvh; overflow:auto; }.map-card.is-expanded .map-legend { display:none; } }
@media (max-width:400px) { .map-search-row { flex-wrap:wrap; }.map-search-row .map-search { flex-basis:100%; }.game-switch .btn { padding:8px; font-size:.78rem; }.profile-choices { grid-template-columns:repeat(3,1fr); }.score-row { grid-template-columns:1fr auto; }.score-buttons { grid-column:1 / -1; } }
.place-photo { position:relative; width:100%; height:100%; min-height:100%; }.place-photo .place-photo-missing { min-height:100%; }.place-photo > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.map-pin.village { min-width:58px; height:38px; border-radius:13px; background:#70445c; color:#fffaf5; font-family:var(--font-title); font-size:.7rem; }
.map-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }.map-shortcuts .btn { min-height:38px; }
@media (max-width:700px) { .map-card { position:relative; }.map-card #place-peek:not(:empty) { position:absolute; z-index:900; left:9px; right:9px; bottom:53px; }.map-card #place-peek:empty { display:none; } }
.share-preview { position:relative; width:min(220px,100%); height:auto; aspect-ratio:1; margin:12px auto; transition:aspect-ratio .2s; }.share-preview[data-format=portrait] { aspect-ratio:4/5; }.share-preview[data-format=story] { aspect-ratio:9/16; }.share-preview[data-style=frame] { border:8px double #b58a50; padding:10px; background:#fff7e9; }.share-preview span { display:none; }.share-preview[data-style=frame] span { display:block; position:absolute; bottom:5px; left:12px; right:12px; padding:4px; background:#fffaf5e8; color:#542b3d; font-family:var(--font-title); text-align:center; font-size:.75rem; }

/* Map screen, round 3: few rows above the map, controls on the map, info card as a bottom sheet. */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.map-bar { display:flex; gap:8px; margin:0 0 10px; }
.map-bar .map-view-switch { flex:1; margin:0; position:static; box-shadow:none; }
.map-bar .filter-button { min-height:50px; }
.map-search-wrap { display:flex; align-items:center; gap:8px; min-height:50px; margin:0 0 10px; padding:0 14px; border:1px solid #dcc3ad; border-radius:999px; background:#fffdf9; box-shadow:0 1px 0 #3b1d2d0d; }
.map-search-wrap:focus-within { outline:3px solid #b58a5066; }
.map-search-wrap > span { color:var(--gold-text); font-size:1.4rem; line-height:1; }
.map-search-wrap .map-search { flex:1; min-width:0; min-height:46px; border:0; background:transparent; font:inherit; font-size:1rem; color:var(--plum-dark); outline:none; }
.quick-chips { display:flex; gap:8px; overflow-x:auto; margin:0 -14px 12px; padding:2px 14px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.quick-chips::-webkit-scrollbar { display:none; }
.quick-chip { flex:none; min-height:42px; padding:8px 14px; border:1px solid #dcc3ad; border-radius:999px; background:#fffaf5; color:var(--plum); font:inherit; font-size:.88rem; font-weight:700; white-space:nowrap; }
.quick-chip[aria-pressed=true] { background:var(--plum); border-color:var(--plum); color:#fff9ef; }
.map-frame { position:relative; }
.map-status { position:absolute; top:10px; left:10px; z-index:800; padding:5px 10px; border-radius:999px; background:#fffaf5e6; color:#2f6b4b; font-size:.74rem; font-weight:700; box-shadow:0 1px 6px #3b1d2d22; pointer-events:none; }
.map-status.is-stale { color:#97611f; }
.map-ctrl { position:absolute; z-index:800; display:flex; gap:8px; }
.map-ctrl-right { top:10px; right:10px; flex-direction:column; align-items:flex-end; }
.map-ctrl-left { left:10px; bottom:26px; flex-direction:column; align-items:flex-start; }
.map-ctrl-btn { display:grid; place-items:center; width:48px; height:48px; border:0; background:#fffaf5; color:var(--plum); font-size:1.5rem; font-weight:700; line-height:1; box-shadow:0 2px 8px #3b1d2d33; border-radius:14px; }
.map-frame .map-expand-btn { position:static; }
.map-zoom { display:grid; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px #3b1d2d33; }
.map-zoom .map-ctrl-btn { box-shadow:none; border-radius:0; }
.map-zoom .map-ctrl-btn + .map-ctrl-btn { border-top:1px solid #ead9cc; }
.map-ctrl-pill { min-height:44px; padding:8px 14px; border:0; border-radius:999px; background:#fffaf5; color:var(--plum); font:inherit; font-weight:700; box-shadow:0 2px 8px #3b1d2d33; }
.map-ctrl-pill span { color:#2b77c4; font-size:1.1rem; }
.map-ctrl .map-legend { margin:0; padding:0; max-width:260px; border-radius:14px; background:#fffaf5f2; box-shadow:0 2px 8px #3b1d2d33; font-size:.78rem; }
.map-ctrl .map-legend summary { min-height:36px; padding:8px 12px; list-style:none; color:var(--plum); }
.map-ctrl .map-legend summary::-webkit-details-marker { display:none; }
.map-ctrl .map-legend > div { display:grid; gap:4px; padding:0 12px 10px; }
.leaflet-control-attribution { font-size:.6rem; background:#fffaf5b3 !important; }
.map { height:calc(100dvh - 250px - var(--tabbar-h)); min-height:280px; max-height:760px; }
@media (min-width:851px) { .map { height:min(70dvh,680px); } }

/* Pins. */
.map-pin { display:grid; place-items:center; width:40px; height:40px; border:3px solid #fffaf5; border-radius:50%; color:#fff; font-weight:800; font-size:.86rem; box-shadow:0 3px 10px #3b1d2d55; }
.map-pin.green { background:#3e9065; }.map-pin.orange { background:#d38d2f; }.map-pin.red { background:#c4594a; }.map-pin.gray { background:#7c8884; }
/* Shut for days: paler than a ride that is only closed for now. */
.map-pin.gray.long { background:#aab2af; }
.dot-sign { display:inline-grid; place-items:center; width:16px; height:16px; background:#7c8884; color:#fff; font-size:.62rem; font-style:normal; font-weight:800; vertical-align:-3px; }
.map-pin.show { background:#8a5a9b; font-size:1rem; }
.map-pin.meet { background:#c45f82; font-size:1rem; }
.map-pin.store { background:#a56f53; font-size:1rem; }
.map-pin.restaurant { background:#b0794a; font-size:1rem; }
.map-pin.hotel { background:#5c3d66; }
.map-pin.spot { background:#3d7a6a; }
.map-pin.plan { width:46px; height:30px; border-radius:10px; background:#542b3d; font-size:.74rem; }
.map-plan-badge { display:flex; align-items:center; justify-content:center; gap:4px; width:120px; height:44px; padding:4px 7px; border:2px solid #fffaf5; border-radius:12px; background:var(--plum-dark); color:#fff; box-shadow:0 3px 10px #3b1d2d55; white-space:nowrap; font-size:.66rem; font-weight:700; }
.map-plan-badge strong { font-size:.82rem; }
.map-plan-badge small { font-size:.6rem; }
.map-pin.cluster { width:44px; height:44px; gap:0; align-content:center; background:#fffaf5; color:var(--plum-dark); border:3px solid #7c8884; box-shadow:0 3px 10px #3b1d2d55; font-size:.95rem; line-height:1; }
.map-pin.cluster.green { border-color:#3e9065; }.map-pin.cluster.orange { border-color:#d38d2f; }.map-pin.cluster.red { border-color:#c4594a; }.map-pin.cluster.neutral { border-color:#b58a50; }
.map-pin.cluster small { font-size:.62rem; font-weight:700; color:#5f6c66; }
.map-pin.mini { width:28px; height:28px; border-width:2px; font-size:.7rem; box-shadow:none; }
.map-group-popup .leaflet-popup-content { margin:10px; }
.map-group-list { display:grid; gap:2px; max-height:260px; overflow:auto; }
.map-group-list strong { padding:2px 4px 6px; font-family:var(--font-title); }
.map-group-row { display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 4px; border:0; border-top:1px solid #eadbd3; background:none; color:var(--plum-dark); font:inherit; text-align:left; }
.map-chooser { position:absolute; z-index:960; overflow:auto; width:min(280px,calc(100% - 16px)); padding:8px 10px; border:1px solid var(--gold); border-radius:14px; background:var(--paper); color:var(--plum-dark); box-shadow:0 8px 24px #3b1d2d44; }
.map-chooser-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.map-chooser-close { width:32px; height:32px; border:0; border-radius:50%; background:#f3e6dc; color:var(--plum); font-size:1.2rem; line-height:1; }
.map-chooser .map-pin.mini { width:28px; height:28px; min-width:28px; max-width:28px; overflow:hidden; flex:none; }
.map-chooser .ico { width:14px; height:14px; position:static; }
.map-chooser .map-group-row { width:100%; }
.map-chooser .map-group-row span:last-child { min-width:0; }
.person-pin { display:grid; grid-template-columns:56px; justify-items:center; align-content:start; width:56px; gap:1px; }
.person-pin b { padding:0 6px; border-radius:99px; background:#fffaf5; color:var(--plum-dark); font-size:.68rem; line-height:1.5; box-shadow:0 1px 4px #3b1d2d44; white-space:nowrap; }
.person-pin.is-old { opacity:.6; }

/* Info card: fixed above the bottom edge, so it works on the map, the large map and the list. */
#place-peek:empty { display:none; }
#place-peek .place-peek { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:2000; max-width:560px; margin:0 auto; display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-areas:'photo body' 'actions actions'; gap:10px 14px; padding:12px; border:1px solid #d9bfa6; border-radius:20px; background:#fffaf5; box-shadow:0 12px 40px #3b1d2d55; animation:peek-in .22s ease-out both; }
@keyframes peek-in { from { transform:translateY(24px); opacity:0 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce) { #place-peek .place-peek { animation:none; } }
.place-peek-photo { grid-area:photo; height:96px; min-height:0; padding:0; border:0; border-radius:14px; overflow:hidden; background:#f0dcca; }
.place-peek-body { grid-area:body; min-width:0; align-self:center; }
.place-peek-body .eyebrow { display:block; margin-right:38px; overflow:hidden; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.place-peek-body h3 { margin:2px 34px 4px 0; font-size:1.2rem; line-height:1.15; }
.place-peek-title { padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; }
.place-peek-status { display:inline-block; margin:0; padding:3px 10px; border-radius:12px; background:#eee3dc; font-size:.86rem; font-weight:700; }
.place-peek-status.is-green { background:#d7ead6; }.place-peek-status.is-orange { background:#f4e1bf; }.place-peek-status.is-red { background:#efd4cf; }
.place-plans { display:grid; gap:5px; margin:10px 0; padding:10px 12px; border:1px solid var(--gold); border-radius:12px; background:var(--theme-soft,#fff5df); font-size:.84rem; }
.place-plans > strong { color:var(--plum-dark); }
.place-plan { display:grid; gap:2px; }
.place-plan + .place-plan { padding-top:8px; border-top:1px solid var(--theme-border,#e9d8c7); }
.place-plan span { color:var(--theme-muted,#6b5560); }
.place-plan b { color:var(--theme-ink,#3b1d2d); }
.place-peek-actions { grid-area:actions; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.place-peek-actions .btn { min-height:48px; padding:10px; font-size:.95rem; }
.place-peek-close { top:8px; right:8px; width:40px; height:40px; }
body.peek-open .photo-fab { display:none; }
.place-photo-missing { background:radial-gradient(circle at 50% 30%,#7a4a64,#3b1d2d); color:#f3d9a8; }
.place-photo-missing span { color:#f0cf8f; }
.place-hero:has(.place-photo-missing:only-child) { height:150px; }

/* Avatars with frames. */
.av { position:relative; display:inline-block; flex:none; width:var(--av); height:var(--av); margin:calc(var(--av)*.28) calc(var(--av)*.2) 0; vertical-align:middle; }
.av-face { position:absolute; inset:0; z-index:1; overflow:hidden; border:calc(var(--av)*.06 + 1px) solid #fffaf5; border-radius:50%; background:var(--person-color); box-shadow:0 2px 8px #2a152840; }
.av-face img,.av-face svg { display:block; width:100%; height:100%; object-fit:cover; }
.av-letters { display:grid; place-items:center; width:100%; height:100%; color:#fff; font-weight:800; font-size:calc(var(--av)*.38); }
.av-back,.av-front { position:absolute; left:-40%; top:-52%; display:block; width:180%; max-width:none; height:180%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.av-back { z-index:0; }.av-front { z-index:2; }
.av-frame-plain .av-face { border-color:#c99a3e; }
.map-pin.person { display:none; }
.leaflet-marker-icon .av { margin:0; }

/* Invitations. */
.invite-card { padding:16px 0; }
.invite-top { align-items:flex-start; gap:12px; }
.invite-top .eyebrow { font-size:.66rem; }
.invite-card h4 { margin:2px 0; font-family:var(--font-title); font-size:1.25rem; color:var(--plum-dark); }
.invite-time { color:#7a6468; font-size:.86rem; }
.invite-msg { margin:10px 0 0 !important; padding:10px 14px; border-radius:4px 16px 16px 16px; background:#f6ebe3; font-style:italic; }
.invite-going { display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; margin:12px 0; color:#6c575c; font-size:.88rem; }
.invite-going .av { margin-top:6px; margin-bottom:0; }
.invite-going > span:last-child { margin-left:6px; }
.invite-answers { display:grid; grid-template-columns:1.3fr 1fr; gap:8px; }
.invite-answers .btn { min-height:50px; }
.btn.is-chosen { background:#2f7a52; color:#fff; }
.btn.is-chosen-no { background:#e9ddd6; color:#5d4a50; box-shadow:inset 0 0 0 2px #b9a59c; }
.invite-audience { display:flex; flex-wrap:wrap; gap:8px; }
.invite-recipients { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.recipient { display:flex; align-items:center; gap:4px; min-height:48px; padding:4px 8px; border:1px solid #e4d1c1; border-radius:12px; cursor:pointer; }
.recipient:has(input:checked) { background:#fff2df; outline:2px solid #c69f69; }
.recipient input { width:20px; height:20px; accent-color:var(--plum); }
.recipient .av { margin-top:8px; }

/* Profile choices show the real avatar. */
.profile-preview .av { margin-top:46px; }
.profile-pin-preview { display:flex; align-items:center; gap:12px; }
.profile-pin-preview .av { margin-top:10px; }
.profile-choices { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
.profile-choice { position:relative; min-height:118px; align-content:end; padding-top:26px; font:inherit; color:var(--plum-dark); }
.profile-choice[aria-pressed=true] { outline:3px solid #c69f69; background:#fff7e9; }
.profile-choice[aria-pressed=true]::after { content:'✓'; position:absolute; top:6px; right:8px; color:#2f7a52; font-weight:800; }
.profile-choice small { font-size:.78rem; }
.nearby-line { display:flex; align-items:center; gap:10px; }
.place-peek-status.is-text { padding:0; border-radius:0; background:none; font-weight:400; color:#6c575c; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Storybook look-back: the page is the paper. A leaf turns all the way over, back side included. */
.storybook { max-width:560px; margin:0 auto 28px; overflow:visible; perspective:none; }
.storybook-stage { position:relative; min-height:clamp(470px,62dvh,640px); perspective:1800px; perspective-origin:0 50%; transform-style:preserve-3d; overflow:visible; }
.storybook-page { position:relative; display:block; height:clamp(470px,62dvh,640px); min-height:0; padding:20px 22px 20px 26px; overflow:hidden; border:0; border-radius:2px 16px 16px 2px; background:#fff6ea; box-shadow:inset 16px 0 18px -18px #3b1d2d88, 0 16px 28px -16px #3b1d2d55; animation:none; }
.storybook-page::before,.storybook-page::after { content:none; }
.book-leaf { transform-style:preserve-3d; transform-origin:left center; }
.book-leaf.leaf-out,.book-leaf.leaf-in { position:absolute; inset:0; z-index:3; }
.book-leaf.leaf-under { position:relative; z-index:1; }
.book-leaf.leaf-out .storybook-page,.book-leaf.leaf-in .storybook-page { position:absolute; inset:0; height:100%; backface-visibility:hidden; }
.book-leaf.leaf-out::after,.book-leaf.leaf-in::after { content:''; position:absolute; inset:0; border-radius:2px 16px 16px 2px; background:linear-gradient(90deg,#cbb59a 0%,#f3e4d0 14%,#efe0cc 100%); transform:rotateY(180deg); backface-visibility:hidden; box-shadow:inset -18px 0 22px -14px #3b1d2d55; }
.leaf-out { animation:leaf-out .8s ease-in-out forwards; }
.leaf-in { animation:leaf-in .8s ease-in-out both; }
@keyframes leaf-out { 0% { transform:rotateY(0deg) } 100% { transform:rotateY(-180deg) } }
@keyframes leaf-in { 0% { transform:rotateY(-180deg) } 100% { transform:rotateY(0deg) } }
@media (prefers-reduced-motion:reduce) { .leaf-out,.leaf-in { animation:none; } }
.book-cover { display:grid; place-content:center; justify-items:center; gap:10px; height:100%; min-height:100%; margin:0; padding:28px 24px; border-radius:inherit; background:radial-gradient(circle at 50% 35%,#7a4a64,#3b1d2d); color:#fff8e9; text-align:center; box-shadow:0 16px 28px -16px #3b1d2d55; }
.storybook-page.book-kind-cover,.storybook-page.book-kind-end { padding:0; background:#3b1d2d; box-shadow:none; }
.book-cover h3 { margin:0; max-width:100%; color:#fff8e9; font-size:clamp(1.7rem,7vw,2.6rem); overflow-wrap:normal; hyphens:none; }
.book-cover p { margin:0; color:#f3e2c7; }
.book-once { font-family:var(--font-title); font-style:italic; font-size:1.2rem; }
.book-stars { color:#f2d59f; letter-spacing:18px; }
.book-end .btn { margin-top:14px; background:#f3d49e; color:#3b1d2d; }
.book-chapter { display:grid; justify-items:center; gap:12px; text-align:center; padding-top:18px; }
.book-chapter h3 { margin:0; font-size:clamp(1.7rem,7vw,2.3rem); text-transform:capitalize; }
.book-chapter p { color:#7b6266; font-style:italic; }
.book-polaroids { position:relative; width:100%; height:260px; margin:10px 0; }
.book-polaroids figure { position:absolute; left:50%; top:10px; width:58%; aspect-ratio:1; margin:0; padding:8px 8px 26px; background:#fff; box-shadow:0 6px 16px #3b1d2d40; transform:translateX(-50%) rotate(-6deg); }
.book-polaroids figure:nth-child(2) { transform:translateX(-30%) rotate(5deg); top:24px; }
.book-polaroids figure:nth-child(3) { transform:translateX(-70%) rotate(-1deg); top:40px; }
.book-polaroids img,.book-polaroids video { width:100%; height:100%; object-fit:cover; background:#e8d6c8; }
.book-photo { display:grid; gap:12px; justify-items:center; margin:0; }
.book-photo-frame { position:relative; width:100%; aspect-ratio:4/5; max-height:52dvh; padding:0; overflow:hidden; border-radius:4px; background:#e7d3c0; box-shadow:0 8px 18px #3b1d2d28; transform:none; }
.book-photo-frame img,.book-photo-frame video { width:100%; height:100%; object-fit:cover; background:#e8d6c8; }
.book-photo figcaption { display:grid; gap:4px; text-align:center; }
.book-photo figcaption strong { font-family:var(--font-title); font-size:1.35rem; line-height:1.2; color:var(--plum-dark); }
.book-photo figcaption span { display:inline-flex; align-items:center; justify-content:center; gap:4px; color:#7b6266; font-size:.85rem; }
.book-photo figcaption .av { margin-top:4px; }
.book-stat { display:grid; gap:8px; padding-top:18px; text-align:center; }
.book-stat h3 { margin:0 0 10px; font-size:clamp(1.6rem,6.5vw,2.1rem); }
.book-numbers { display:grid; gap:12px; }
.book-numbers div { display:grid; padding:14px; border:1px solid #e6cfae; border-radius:16px; background:#fffdf8; }
.book-numbers strong { font-family:var(--font-title); font-size:2.6rem; line-height:1; color:var(--plum); }
.book-numbers span { color:#7b6266; }
.book-rank { display:grid; gap:8px; margin:0; padding:0; list-style:none; text-align:left; }
.book-rank li { display:flex; align-items:center; gap:8px; min-height:54px; padding:6px 12px; border-radius:14px; background:#fffdf8; border:1px solid #eedcc4; }
.book-rank li.is-first { background:linear-gradient(120deg,#fff4d6,#fde9c4); border-color:#e2bd78; }
.book-rank strong { flex:1; min-width:0; line-height:1.25; overflow-wrap:break-word; }
.book-rank li:has(.av) { display:grid; grid-template-columns:1.6em auto minmax(0,1fr) auto; }
/* The photo column grows with the photo; in full screen it is wider than the letters. The steps page has no medal. */
.book-rank li:has(.av):not(:has(.book-medal)) { grid-template-columns:auto minmax(0,1fr) auto; }
.book-rank li > span:last-child { font-weight:700; color:var(--plum); white-space:nowrap; }
.book-rank .av { margin-top:8px; margin-bottom:0; }
.book-medal { width:1.8em; text-align:center; font-size:1.2rem; }
.book-note { margin-top:10px; color:#7b6266; font-style:italic; }
.storybook-controls .btn { min-width:120px; min-height:50px; }
.storybook-hint { text-align:center; margin:0; }
.book-photo { height:100%; grid-template-rows:minmax(0,1fr) auto auto; }
.book-photo-frame { aspect-ratio:auto; max-height:none; min-height:0; height:100%; }
.book-polaroids { height:min(240px,32dvh); }
.content { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

/* Share window: real preview of the picture, two simple choices. */
.share-preview { width:auto; height:min(42dvh,380px); aspect-ratio:9/16; margin:10px auto 14px; padding:0; border:0; border-radius:10px; background:#2e1522; box-shadow:0 8px 24px #3b1d2d55; overflow:hidden; }
.share-preview[data-format=portrait] { aspect-ratio:4/5; height:min(34dvh,320px); }
.share-preview[data-format=post] { aspect-ratio:1; height:min(30dvh,280px); }
.share-preview img,.share-preview video { width:100%; height:100%; object-fit:cover; }
.share-choice { display:grid; gap:6px; margin:0 0 12px; padding:0; border:0; }
.share-choice legend { margin-bottom:6px; font-weight:700; }
.share-option { display:flex; align-items:center; gap:10px; min-height:50px; padding:8px 12px; border:1px solid #e4d1c1; border-radius:12px; cursor:pointer; }
.share-option:has(input:checked) { background:#fff2df; outline:2px solid #c69f69; }
.share-option input { width:20px; height:20px; accent-color:var(--plum); }
.share-option small { display:block; color:#7b6266; font-size:.78rem; }
.share-go { width:100%; min-height:54px; }

/* Time picker: a gold clock face and tap-once grids. */
.field-label { display:block; margin:14px 0 6px; font-weight:700; color:var(--plum-dark); }
.time-picker { display:grid; gap:8px; padding:14px; border:1px solid #e4cfb3; border-radius:20px; background:linear-gradient(160deg,#fffaf2,#f8ecdf); }
.time-face { position:relative; display:grid; place-items:center; width:132px; height:132px; margin:4px auto 6px; border-radius:50%; background:radial-gradient(circle at 50% 35%,#7a4a64,#3b1d2d); box-shadow:inset 0 0 0 4px #d9b26a,inset 0 0 0 8px #3b1d2d,inset 0 0 0 9px #d9b26a88,0 8px 20px #3b1d2d44; }
.time-ring { position:absolute; inset:14px; border-radius:50%; background:repeating-conic-gradient(from -1deg,#f3d49e 0 2deg,transparent 2deg 30deg); -webkit-mask:radial-gradient(circle,transparent 53px,#000 54px); mask:radial-gradient(circle,transparent 53px,#000 54px); opacity:.9; }
.time-display { position:relative; font-family:var(--font-title); font-size:2.3rem; font-weight:700; color:#fff3dc; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.time-pop .time-display { animation:time-pop .35s ease-out; }
@keyframes time-pop { 0% { transform:scale(.85); text-shadow:0 0 0 #f3d49e } 50% { transform:scale(1.08); text-shadow:0 0 18px #f3d49e } 100% { transform:none } }
@media (prefers-reduced-motion:reduce) { .time-pop .time-display { animation:none; } }
.time-quick { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.time-quick button { min-height:42px; padding:6px 12px; border:1px solid #d9b26a; border-radius:999px; background:#fffaf2; color:var(--plum); font:inherit; font-weight:700; font-size:.88rem; }
.time-label { margin-top:4px; color:var(--gold-text); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.time-grid { display:grid; gap:6px; }
.time-hours { grid-template-columns:repeat(4,1fr); }
.time-minutes { grid-template-columns:repeat(6,1fr); }
.time-grid button { min-height:46px; padding:0; border:1px solid #e4cfb3; border-radius:12px; background:#fff; color:var(--plum-dark); font:inherit; font-weight:700; font-size:1.02rem; font-variant-numeric:tabular-nums; }
.time-grid button[aria-pressed=true] { background:var(--plum); border-color:var(--plum); color:#fff3dc; box-shadow:0 0 0 3px #d9b26a66; }
.score-row.is-zero { opacity:.5; }
.score-btn { min-width:54px; min-height:48px; touch-action:manipulation; font-size:1.15rem; }
.place-loops { margin:-8px 0 14px; font-weight:700; color:var(--plum); }
@media (max-width:850px) { .attraction-list { overflow:visible; overscroll-behavior:auto; max-height:none; } }
.onboarding-avatar { display:grid; place-items:center; margin:8px 0 4px; }
.onboarding-avatar .av { margin-top:30px; }
.onboarding-photo { justify-content:center; }
.profile-choices.compact { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; margin:4px 0 10px; width:100%; }
.profile-choices.compact .profile-choice { min-height:86px; padding:18px 2px 6px; }
.profile-choices.compact small { font-size:.68rem; }
.onboarding { overflow-y:auto; }

/* Picture pins: a recognisable picture per place, with the wait time as a small label. */
.pic-pin { position:relative; display:grid; justify-items:center; width:46px; }
.pic-tile { display:grid; place-items:center; width:42px; height:42px; border:3px solid #fffaf5; border-radius:50%; background:radial-gradient(circle at 50% 35%,#fffdf8,#f3e3cf); font-size:1.35rem; line-height:1; box-shadow:0 3px 10px #3b1d2d55; }
.pic-pin.gray .pic-tile { filter:grayscale(.85); opacity:.75; }
.pic-pin.show .pic-tile { background:radial-gradient(circle at 50% 35%,#f8ecff,#d8bfe8); }
.pic-pin.restaurant .pic-tile,.pic-pin.store .pic-tile { width:34px; height:34px; margin-top:4px; font-size:1.05rem; background:radial-gradient(circle at 50% 35%,#fff7ef,#ead2bd); }
.pic-wait { position:absolute; top:-6px; right:-10px; min-width:26px; height:22px; padding:0 6px; border:2px solid #fffaf5; border-radius:99px; color:#fff; font-style:normal; font-weight:800; font-size:.72rem; line-height:18px; text-align:center; box-shadow:0 2px 6px #3b1d2d44; }
.pic-wait.green { background:#2f8a5a; }.pic-wait.orange { background:#d0841f; }.pic-wait.red { background:#c4483a; }.pic-wait.gray { background:#7c8884; }
.pic-name { position:absolute; top:46px; left:50%; transform:translateX(-50%); max-width:120px; padding:1px 7px; border-radius:99px; background:#fffaf5ee; color:var(--plum-dark); font-size:.68rem; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 4px #3b1d2d33; }
.pic-mini { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f6ebe3; font-size:1rem; }
.ride-pic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#f6ebe3; font-size:1.25rem; }
.place-photo-missing span { font-size:3rem; }
.pic-cluster { position:relative; display:inline-flex; align-items:center; height:44px; padding:0 10px; border:3px solid #b58a50; border-radius:99px; background:#fffaf5; box-shadow:0 3px 10px #3b1d2d55; white-space:nowrap; }
.pic-cluster.green { border-color:#2f8a5a; }.pic-cluster.orange { border-color:#d0841f; }.pic-cluster.red { border-color:#c4483a; }.pic-cluster.gray { border-color:#7c8884; }
.pic-cluster-faces { font-size:1.1rem; letter-spacing:-.2em; }
.pic-cluster i { position:absolute; top:-9px; right:-9px; min-width:24px; height:24px; padding:0 6px; border:2px solid #fffaf5; border-radius:99px; background:var(--plum); color:#fff3dc; font-style:normal; font-weight:800; font-size:.75rem; line-height:20px; text-align:center; }
.pic-cluster { height:40px; padding:0 8px; }
.pic-cluster-faces { font-size:1.05rem; letter-spacing:-.15em; }
.pin-name { position:absolute; top:42px; left:50%; transform:translateX(-50%); max-width:120px; padding:1px 7px; border-radius:99px; background:#fffaf5ee; color:var(--plum-dark); font-size:.68rem; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 4px #3b1d2d33; }

/* Map choice: one row with short names, so no button drops below the others. */
.map-style { position:absolute; top:10px; left:10px; z-index:801; display:flex; max-width:calc(100% - 68px); padding:3px; border-radius:18px; background:#fffaf5f2; box-shadow:0 2px 8px #3b1d2d33; }
.map-style button { min-height:38px; padding:4px 11px; border:0; border-radius:999px; background:transparent; color:var(--plum); font:inherit; font-size:.8rem; font-weight:700; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.map-style button[aria-pressed=true] { background:var(--plum); color:#fff9ef; }
.map-status { top:60px; }
.map-frame.map-style-wide .map-style { max-width:calc(100% - 20px); }
.map-frame.map-style-wide .map-ctrl-right { top:60px; }
.park-plan-image { image-rendering:auto; }
@media (max-width:420px) { .map-style button { padding:4px 8px; font-size:.74rem; } }
.map-on-plan .map-pin:not(.cluster) { width:32px; height:32px; border-width:2px; font-size:.78rem; }
.map-on-plan .map-pin.cluster { width:38px; height:38px; font-size:.85rem; }
.map-on-plan .pin-name { top:36px; }

/* Storybook full screen: the book fills the screen on a dark night sky. */
body.book-full { overflow:hidden; }
body.book-full .photo-fab { display:none; }
body.book-full .overlay { z-index:2700; }
body.book-full .toast { z-index:2800; }
.storybook.is-full { position:fixed; inset:0; z-index:2600; display:flex; flex-direction:column; justify-content:center; max-width:none; margin:0; padding:calc(14px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 30%,#4a2a46,#1a0d1a 75%); }
.storybook.is-full .storybook-stage { width:100%; max-width:min(560px,calc((100dvh - 120px) * .72)); margin:0 auto; }
.storybook.is-full .storybook-page { height:calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.storybook.is-full .storybook-controls { padding:10px 0 0; }
.storybook.is-full .storybook-controls span,.storybook.is-full .storybook-hint { color:#e9d6c3; }
.storybook.is-full .storybook-hint { display:none; }
.book-full-close { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:2; width:46px; height:46px; border:0; border-radius:50%; background:#fffaf5e6; color:var(--plum); font-size:1.6rem; box-shadow:0 2px 10px #0006; }
.book-small { font-size:1.35rem !important; line-height:1.2 !important; }
.book-side .book-small { font-size:1.15em !important; overflow-wrap:anywhere; }
.book-faces { display:flex; gap:0; }
.book-faces .av { margin:6px -4px 0 0; }

/* Round 4: a bottom bar like any phone app, calmer buttons, and screens that explain themselves. */
:root { --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
.content { padding-bottom: calc(var(--tabbar-h) + 92px); }

/* Buttons: one filled colour for the main action, an outline for the rest. Choices look like a switch. */
.btn.secondary { background: #fffaf5; color: var(--plum); box-shadow: inset 0 0 0 1.5px #cfb2bd; }
.btn.secondary:hover { background: #f7ece8; }
.btn.secondary:disabled { box-shadow: inset 0 0 0 1.5px #e4d6db; }
.segmented, .map-view-switch, .game-switch, .day-chips {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 14px;
  border-radius: 14px; background: #f1e5e0; box-shadow: inset 0 1px 2px #3b1d2d14;
}
.segmented button, .map-view-switch button, .game-switch button, .day-chips button {
  flex: 1; min-height: 42px; padding: 6px 12px; border: 0; border-radius: 10px;
  background: transparent; color: #6d4b5a; font: inherit; font-weight: 700; white-space: nowrap;
}
.segmented button[aria-pressed=true], .map-view-switch button[aria-pressed=true], .game-switch button[aria-pressed=true], .day-chips button[aria-pressed=true] {
  background: #fffaf5; color: var(--plum-dark); box-shadow: 0 1px 4px #3b1d2d2e;
}
.day-chips { overflow-x: auto; scrollbar-width: none; }
.day-chips::-webkit-scrollbar { display: none; }
.day-chips button { flex: 1 0 auto; }
.map-bar .map-view-switch { display: flex; margin: 0; padding: 4px; border: 0; background: #f1e5e0; box-shadow: inset 0 1px 2px #3b1d2d14; }
@media (min-width: 851px) { .map-bar .map-view-switch { display: none; } }
.link-btn { padding: 4px 0; border: 0; background: none; color: var(--gold-text); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.row-link { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 10px 2px; border: 0; border-top: 1px solid #eadbd3; background: none; color: var(--plum-dark); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.row-link span { color: #a88893; font-size: 1.3rem; line-height: 1; }
.row-link.is-quiet { color: #8a6b75; font-weight: 500; }

/* Header: the logo goes home, your own avatar opens your profile. */
.header-me { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 12px 2px 6px; border: 1px solid #dabb8a; border-radius: 999px; background: #fff6e714; color: #fff9ee; font: inherit; font-weight: 700; cursor: pointer; }
.header-me .av { margin: 6px 0 0; }
.header-me[aria-current=page] { background: #fff6e733; }
.header-me:focus-visible { outline: 3px solid #f3d49e; outline-offset: 2px; }
@media (max-width: 360px) { .header-me > span:not(.av) { display: none; } .header-me { padding-right: 6px; } }

/* Bottom bar. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--tabbar-h); padding: 6px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
  background: #fffaf5f7; border-top: 1px solid #e4ccaa; box-shadow: 0 -6px 22px #4b283b1c;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; padding: 0 2px; border: 0; border-radius: 12px; background: none; color: #7d6470; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.tabbar-icon { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
.tabbar button[aria-current=page] { color: var(--plum-dark); }
.tabbar button[aria-current=page] .tabbar-icon { background: #f3e2d0; color: var(--plum); }
.tabbar-badge { position: absolute; top: -4px; right: 4px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fffaf5; border-radius: 99px; background: #c4483a; color: #fff; font-size: .66rem; line-height: 15px; text-align: center; }
.tabbar button:focus-visible { outline: 3px solid #b58a50; outline-offset: -2px; }
@media (min-width: 851px) {
  .tabbar { left: 50%; right: auto; bottom: 14px; width: 560px; height: 66px; padding: 6px; transform: translateX(-50%); border: 1px solid #e4ccaa; border-radius: 20px; }
  :root { --tabbar-h: 80px; }
}

/* The photo button floats just above the bar, in the thumb zone. */
.photo-fab { right: calc(14px + env(safe-area-inset-right)); bottom: calc(var(--tabbar-h) + 12px); min-height: 52px; padding: 10px 18px 10px 15px; z-index: 1450; }
@media (min-width: 851px) { .photo-fab { right: max(22px, calc((100vw - 1280px)/2 + 22px)); } }
.toast { bottom: calc(var(--tabbar-h) + 76px); }
#place-peek .place-peek { bottom: calc(var(--tabbar-h) + 8px); }
body.peek-open .toast { top: calc(70px + env(safe-area-inset-top)); bottom: auto; }
body.map-fullscreen #place-peek .place-peek { bottom: calc(12px + env(safe-area-inset-bottom)); }
.map-card.is-expanded { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body.onboarding-open .tabbar, body.book-full .tabbar { display: none; }

/* A party for a ride or a stamp. */
.toast-party { display: grid; justify-items: center; gap: 2px; min-width: min(300px, 86vw); padding: 14px 20px; border: 2px solid #e2bd78; border-radius: 18px; background: linear-gradient(140deg, #4a2438, #6e3c52); text-align: center; overflow: visible; animation: party-in .45s cubic-bezier(.2,1.4,.4,1) both; }
.toast-party strong { font-family: var(--font-title); font-size: 1.3rem; color: #fff3dc; }
.toast-party > span:not(.party-stars) { color: #f3d9a8; font-size: .92rem; }
.party-stars { position: absolute; inset: 0; pointer-events: none; }
.party-stars i { position: absolute; left: 50%; top: 50%; color: #f3d49e; font-style: normal; font-size: 1rem; opacity: 0; animation: party-star 1.1s ease-out forwards; }
.party-stars i:nth-child(1) { --x: -140px; --y: -46px; } .party-stars i:nth-child(2) { --x: 140px; --y: -40px; animation-delay: .05s; }
.party-stars i:nth-child(3) { --x: -110px; --y: 38px; animation-delay: .1s; } .party-stars i:nth-child(4) { --x: 118px; --y: 42px; animation-delay: .08s; }
.party-stars i:nth-child(5) { --x: -40px; --y: -62px; animation-delay: .12s; } .party-stars i:nth-child(6) { --x: 48px; --y: -66px; animation-delay: .03s; }
.party-stars i:nth-child(7) { --x: -170px; --y: 0; animation-delay: .15s; } .party-stars i:nth-child(8) { --x: 172px; --y: 4px; animation-delay: .1s; }
@keyframes party-in { from { transform: translateX(-50%) scale(.7); opacity: 0 } to { transform: translateX(-50%) scale(1); opacity: 1 } }
@keyframes party-star { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) } 70% { opacity: 1 } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2) rotate(90deg) } }
@media (prefers-reduced-motion: reduce) { .toast-party, .party-stars i { animation: none; } .party-stars { display: none; } }
/* Welcome quote: the party card in the colours of your own theme. */
.toast-welcome { max-width: min(92vw, 420px); border-color: var(--gold); background: linear-gradient(140deg, var(--plum-dark), var(--plum)); }
.toast-welcome q { color: #fffaf3; font-size: 1.05rem; font-style: italic; line-height: 1.35; }
.toast-welcome > span:not(.party-stars) { font-size: .82rem; }

/* Map screen. */
.map-bar { align-items: stretch; }
.map-search-btn { display: grid; place-items: center; flex: none; width: 50px; border: 0; border-radius: 14px; background: #fffaf5; color: var(--plum); box-shadow: inset 0 0 0 1.5px #cfb2bd; cursor: pointer; }
.map-search-wrap { color: var(--gold-text); }
.map-search-wrap[hidden] { display: none; }
@media (min-width: 851px) { .map-search-btn { display: none; } .map-search-wrap[hidden] { display: flex; } }
.map-zoom { display: none; }
@media (min-width: 851px) { .map-zoom { display: grid; } }
.map-pin b { font-size: .95rem; line-height: 1; }
.map-pin small { display: block; margin-top: -1px; font-size: .5rem; font-weight: 700; line-height: 1; opacity: .9; }
.map-pin:has(b) { align-content: center; gap: 0; }
.map-on-plan .map-pin:not(.cluster) { width: 34px; height: 34px; }
.map-on-plan .map-pin b { font-size: .84rem; }
.map-on-plan .map-pin small { font-size: .46rem; }
.map-pin.walk { background: #6f8f7c; font-size: .95rem; }
.map-pin.toilet { background: #3f7fa8; font-size: .66rem; letter-spacing: .02em; }
.map-pin.mini b { font-size: .7rem; }
.map-pin.cluster, .map-on-plan .map-pin.cluster { width: 38px; height: 38px; border: 2.5px solid var(--plum); background: #fffaf5; color: var(--plum-dark); box-shadow: 4px -4px 0 -2px #fffaf5, 4px -4px 0 0 var(--plum), 0 3px 10px #3b1d2d55; }
.map-pin.cluster b { font-size: .9rem; }
.dot-stack { background: #fffaf5 !important; box-shadow: 0 0 0 2px var(--plum), 3px -3px 0 0 #fffaf5, 3px -3px 0 2px var(--plum); }

/* Lists. */
.badge.walk { background: #e2ece4; color: #3f6650; }
#attraction-results .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#attraction-results .card-head h3 { margin: 0; }
.level-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: #f4ebe4; color: #6b4d58; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.level-chip.level-wild { background: #f6dfd8; color: #93392b; }
.level-chip.level-spannend { background: #f6e8cf; color: #835521; }
.level-chip.level-rustig { background: #e3eee2; color: #36603f; }
.level-chip.is-done { background: #e2efe5; color: #2f7a52; }

/* Info card on the map. */
.place-peek-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px !important; }
.place-peek-body .link-btn { margin-top: 2px; }
#place-peek .place-peek.no-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'body' 'actions'; }
.place-peek-actions { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* Info page. */
.place-page > .btn { margin-bottom: 12px; }
.place-page-main.no-photo { border-radius: 20px; }
.place-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.place-facts .place-status { margin: 0; }
.place-closure { padding: 10px 14px; border-left: 3px solid #7c8884; border-radius: 0 12px 12px 0; background: #eef0ee; color: #3f4c4a; font-weight: 600; }
.place-tip { padding: 10px 14px; border-left: 3px solid #d9b26a; border-radius: 0 12px 12px 0; background: #fff4e3; color: #5d4450; font-weight: 600; }
.place-main-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0 14px; }
.place-main-actions .btn { min-height: 52px; font-size: 1rem; }
.place-links { margin: 6px 0 14px; border-bottom: 1px solid #eadbd3; }

/* Today: one timeline with our plans, parades, shows and the evening show. */
.park-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 16px; }
.park-hours > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #e9d8c7; border-radius: 14px; background: var(--paper); }
.park-hours strong { color: var(--plum-dark); font-size: .9rem; }
.park-hours span { font-family: var(--font-title); font-size: 1.25rem; color: var(--plum); font-variant-numeric: tabular-nums; }
.park-hours small { color: #7b6266; font-size: .76rem; }
.day-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.day-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid #e9d8c7; border-radius: 16px; background: var(--paper); box-shadow: 0 4px 14px #6b3e4c0d; }
.day-item time { padding-top: 16px; color: var(--plum); font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.day-item-body { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.day-kind { color: var(--gold-text); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.day-item-title { padding: 0; border: 0; background: none; color: var(--plum-dark); font: inherit; font-family: var(--font-title); font-size: 1.12rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; }
button.day-item-title::after { content: ' ›'; color: #a88893; }
.day-item.is-plan { border-color: #e2bd78; background: linear-gradient(120deg, #fff8ea, #fffaf5); }
.day-item.is-parade, .day-item.is-night { border-color: #cdb3e0; background: linear-gradient(120deg, #f7effc, #fffaf5); }
.day-item.is-past { opacity: .55; }
.day-times { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.day-times span { padding: 2px 8px; border-radius: 99px; background: #f1e5e0; color: var(--plum-dark); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.day-times span.is-past { opacity: .45; text-decoration: line-through; }
.day-times span.is-more { background: none; color: #8a6b75; }
.day-admin { display: flex; gap: 6px; margin-top: 8px; }
.hunt-admin { margin-top: 12px; }
.hunt-admin summary { min-height: 44px; padding: 10px 2px; color: #6d4b5a; font-weight: 700; cursor: pointer; }
.admin-grid .hunt-admin-row { align-items: center; }
.hunt-admin-row .day-admin { flex: none; margin-top: 0; }
.day-now { display: flex; align-items: center; gap: 10px; color: #c4483a; font-size: .8rem; font-weight: 800; }
.day-now::before, .day-now::after { content: ''; flex: 1; height: 2px; background: #e8b4ac; }
.day-past, .day-meets { margin: 0 0 16px; }
.day-past summary, .day-meets summary { min-height: 44px; padding: 10px 2px; color: #6d4b5a; font-weight: 700; cursor: pointer; }
.day-meets summary .ico { margin-right:5px; vertical-align:middle; }
.day-meets ul { display: grid; margin: 0; padding: 0; list-style: none; }
.day-meets li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid #eadbd3; }
.day-meets li button { padding: 6px 0; border: 0; background: none; color: var(--plum-dark); font: inherit; font-weight: 600; text-align: left; }

/* Together. */
.share-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.share-faces { display: flex; }
.share-faces:empty { display: none; }
.share-faces .av { margin: 8px -6px 0 0; }
.share-text { display: grid; flex: 1; min-width: 0; }
.share-strip .btn { flex: none; }
.push-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 420px) { .share-strip { flex-wrap: wrap; } .share-strip .btn { width: 100%; } }

/* Profile settings. */
.settings-card { margin-top: 16px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 0; border-top: 1px solid #eadbd3; }
.setting-row > div { display: grid; gap: 2px; }
.setting-row .btn { flex: none; min-width: 110px; }
.push-test { border-top: 1px solid #eadbd3; padding: 14px 0 18px; }
.push-test p { margin: 0 0 10px; line-height: 1.45; }
.push-test #push-test-result { margin: 8px 0 0; }
.setting-links { margin-top: 6px; }
.about { margin: 16px 4px 0; line-height: 1.6; }

/* Game: ranking first, the hunt as a stamp card. */
.leaderboard .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.leaderboard h3 { margin: 0 0 6px; }
.rank-list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.rank-list li { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 4px 12px; border-radius: 14px; background: #fbf4ef; }
.rank-list li:first-child { background: linear-gradient(120deg, #fff4d6, #fde9c4); }
.rank-list li.is-me { box-shadow: inset 0 0 0 2px #c69f69; }
.rank-list .av { margin-top: 8px; margin-bottom: 0; }
.rank-list strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-pos { width: 1.8em; text-align: center; font-size: 1.15rem; }
.rank-score { color: var(--plum); font-family: var(--font-title); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.leaderboard { margin-bottom: 16px; }
.hunt-progress { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #e9d8c7; border-radius: 16px; background: linear-gradient(120deg, #fff6e9, #f4e4e7); }
.hunt-progress > div:first-child { display: grid; gap: 2px; }
.hunt-progress > div > strong { font-family: var(--font-title); font-size: 1.2rem; color: var(--plum-dark); }
.progress { height: 10px; overflow: hidden; border-radius: 99px; background: #ead7cf; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9b26a, #b58a50); transition: width .4s; }
.stamp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .stamp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stamp { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 132px; padding: 14px 6px 10px; border: 2px dashed #dcc3ad; border-radius: 18px; background: #fffaf5; color: var(--plum-dark); font: inherit; text-align: center; cursor: pointer; }
.stamp-icon { font-size: 2.1rem; line-height: 1; }
.stamp strong { font-size: .84rem; line-height: 1.25; }
.stamp small { padding: 2px 8px; border-radius: 99px; background: #f1e5e0; color: #6d4b5a; font-size: .7rem; font-weight: 700; }
.stamp.is-pending small { background: #f6e8cf; color: #835521; }
.stamp.is-retry small { background: #f6dfd8; color: #93392b; }
.stamp.is-done { border-style: solid; border-color: #d9b26a; background: radial-gradient(circle at 50% 30%, #fffdf6, #fbefd6); }
.stamp.is-done small { background: #e2efe5; color: #2f7a52; }
.stamp-mark { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #b0453a; border-radius: 50%; color: #b0453a; font-weight: 900; transform: rotate(-14deg); box-shadow: inset 0 0 0 2px #fffaf5, inset 0 0 0 3px #b0453a66; }
.stamp:focus-visible { outline: 3px solid #b58a50; outline-offset: 2px; }
.challenge-sheet { display: grid; justify-items: center; gap: 10px; text-align: center; }
.challenge-icon { font-size: 3.4rem; line-height: 1; }
.challenge-sheet h2 { margin: 0; }
.challenge-sheet p { margin: 0; }
.challenge-sheet .chips { justify-content: center; }

/* Invitations: quick times first, the full grid on request. */
.time-picker.is-compact { gap: 10px; }
.time-chosen { margin: 0; text-align: center; color: var(--plum-dark); font-weight: 700; }
.time-chosen .time-display { display: inline; color: var(--plum); font-size: 1.5rem; }
.time-quick button[aria-pressed=true] { background: var(--plum); border-color: var(--plum); color: #fff3dc; }
.time-more summary { min-height: 42px; padding: 8px 2px; color: var(--gold-text); font-weight: 700; cursor: pointer; text-align: center; }
.time-more[open] { display: grid; gap: 8px; }

/* First steps and login. */
.onboarding { justify-content: flex-start; }
.ios-hint { width: min(440px, 100%); margin: 0 auto 14px; padding: 14px 16px; border: 1px solid #e2bd78; border-radius: 16px; background: #fff6e4; color: #5d4450; }
.ios-hint strong:first-child { display: block; margin-bottom: 4px; color: var(--plum-dark); }
.ios-hint p { margin: 0; font-size: .92rem; line-height: 1.45; }

/* Playfair draws old-style figures by default; numbers should look like numbers. */
h1, h2, h3, .rank-score, .day-item time, .park-hours span, .time-display, .stat strong, .score-count, .book-numbers strong, .hunt-progress strong { font-variant-numeric: lining-nums tabular-nums; }
.invite-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invite-audience .toggle { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 12px; border: 1px solid #e4d1c1; border-radius: 12px; background: #fffaf5; font-weight: 600; line-height: 1.2; cursor: pointer; }
.invite-audience .toggle:has(input:checked) { background: #fff2df; outline: 2px solid #c69f69; }
.invite-audience input { width: 20px; height: 20px; flex: none; accent-color: var(--plum); }

/* Accessibility: green when you can stay seated, amber for a transfer, red when you need to walk. */
.level-chip.access-2 { background: #e2efe5; color: #2f6b45; }
.level-chip.access-1 { background: #f6e8cf; color: #835521; }
.level-chip.access-0 { background: #f6dfd8; color: #93392b; }
.access-box { margin: 16px 0; padding: 14px 16px; border: 1px solid #d8c7e6; border-radius: 16px; background: #f8f3fc; }
.access-box h2 { margin: 0 0 8px; font-size: 1.15rem; }
.access-box p { margin: 0 0 6px; line-height: 1.45; }
.access-box p.small { margin: 8px 0 0; }
.map-pin.is-dim { opacity: .38; filter: grayscale(.7); }
.ride.is-not-for-me { opacity: .5; }
.setting-mobility { flex-wrap: wrap; }
.setting-mobility .segmented { display: flex; flex: 1 1 100%; margin: 4px 0 0; }

/* Round 5: Skoltiezland. Camera in the middle of the bar, a bell for news, an open storybook. */
.photo-fab { display: none !important; }
.content { padding-bottom: calc(var(--tabbar-h) + 36px); }
.toast { bottom: calc(var(--tabbar-h) + 22px); }

/* Header: bell and your own avatar. */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-bell, .header-ticket { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dabb8a; border-radius: 999px; background: #fff6e714; color: #fff9ee; cursor: pointer; }
.header-bell .tabbar-badge { top: -3px; right: -3px; }
.header-bell:focus-visible, .header-ticket:focus-visible { outline: 3px solid #f3d49e; outline-offset: 2px; }

/* Bottom bar: four screens and the camera, raised in the middle. */
.tabbar { grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: stretch; }
.tabbar .tabbar-camera { align-self: start; justify-self: center; display: grid; place-items: center; width: 68px; height: 68px; margin-top: -24px; padding: 0; border: 4px solid #fffaf5; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8b5470, #542b3d 70%); color: #fbe3a1; box-shadow: 0 6px 18px #3b1d2d66, 0 0 0 1px #e2bd78 inset; cursor: pointer; }
.tabbar .tabbar-camera span { display: grid; place-items: center; }
.tabbar .tabbar-camera:active { transform: scale(.95); }
.tabbar-camera:focus-visible { outline: 3px solid #b58a50; outline-offset: 3px; }
@media (min-width: 851px) { .tabbar { width: 600px; } }

/* Login: a starry gate. */
.login-visual { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, #7a4a64, #3b1d2d 75%); }
.login-stars { position: absolute; inset: 0; pointer-events: none; }
.login-stars i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #fff3d4; box-shadow: 0 0 6px #fbe3a1; animation: twinkle 3s ease-in-out var(--d) infinite; }
.login-stars i:nth-child(3n) { width: 2px; height: 2px; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.2) } }
.login-logo { filter: drop-shadow(0 0 22px #f3d49e66) drop-shadow(0 4px 18px #2a101d66); }
.login-visual h1 { font-family: var(--font-title); }
.login-form h2 { margin-bottom: 14px; }
.login-help { margin: 4px 0 10px; }
.login-go { width: 100%; min-height: 54px; margin-top: 8px; background: linear-gradient(120deg, #6b3a52, #542b3d); font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .login-stars i { animation: none; opacity: .7; } }

/* Install steps, on the login screen and in the welcome. */
.install-steps { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; text-align: left; }
.install-steps li { display: flex; align-items: center; gap: 10px; }
.install-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fffaf5; color: #2b77c4; box-shadow: 0 1px 4px #3b1d2d22; }
.install-icon.install-app img { border-radius: 8px; }
.onboarding .install-steps { color: #f3e2df; }
.onboarding .install-icon { background: #fff8ee; }
.onboarding-app-icon { display: grid; place-items: center; margin: 4px 0 10px; }
.onboarding-app-icon img { border-radius: 22px; box-shadow: 0 8px 28px #00000055, 0 0 0 2px #f3d49e55; }
.selfie-buttons { justify-content: center; margin: 4px 0 6px; }
.onboarding .selfie-buttons .btn.secondary { background: transparent; color: #fff3e6; box-shadow: inset 0 0 0 1.5px #f3d49e80; }
.onboarding .selfie-buttons .btn:not(.secondary) { background: #f3d49e; color: #3b1d2d; }

/* Avatar choices speak for themselves. */
.profile-choice { min-height: 86px; padding: 22px 6px 8px; align-content: center; }
.profile-choices.compact .profile-choice { min-height: 70px; padding: 16px 2px 6px; }
.profile-choice small { display: none; }

/* Vandaag: our day, then shows and parades. */
.day-section { margin: 4px 0 18px; }
.day-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.day-section-head h3 { margin: 0; }
.day-item.is-optional { border-style: dashed; border-color: #d9b26a; background: #fffaf2; }
.day-item.is-invite { background: linear-gradient(120deg, #fff4fa, #fffaf5); border-color: #e5c4d6; }
.day-item .invite-card { padding: 0; border: 0; }
.day-item .invite-top { gap: 10px; }
.day-item .invite-top .av { margin-top: 10px; }
.day-item .invite-card h4 { margin: 2px 0 0; font-size: 1.12rem; }
.invite-card.is-highlight { animation: invite-glow 1.6s ease-in-out 2; border-radius: 12px; }
@keyframes invite-glow { 0%, 100% { box-shadow: 0 0 0 0 #f3d49e00 } 50% { box-shadow: 0 0 0 6px #f3d49e99 } }
.invite-going { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: #6c575c; font-size: .9rem; }
.invite-faces { display: flex; align-items: center; }
.invite-going .av, .invite-faces .av { flex: none; width: var(--av); height: var(--av); margin: 0 -4px 0 0; }
.invite-going > span:last-child { margin-left: 4px; }
.invite-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.invite-answers .btn { min-height: 48px; }
.invite-answers .answer-yes, .invite-answers .answer-no { background: #fffaf5; color: var(--plum); box-shadow: inset 0 0 0 1.5px #cfb2bd; }
.invite-answers .answer-yes.is-chosen { background: #2f7a52; color: #fff; box-shadow: none; }
.invite-answers .answer-no.is-chosen-no { background: #5d4a50; color: #fff; box-shadow: none; }
.notice-list { display: grid; margin: 4px -4px 0; }

/* Hunt: frames that fill with your own photos. */
.stamp { min-height: 0; padding: 6px 6px 10px; gap: 6px; }
.stamp-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f6ece6; }
.stamp-photo img { width: 100%; height: 100%; object-fit: cover; }
.stamp-empty { display: grid; place-content: center; justify-items: center; gap: 4px; height: 100%; border: 2px dashed #dcc3ad; border-radius: 12px; color: #b09aa3; }
.stamp-empty em { font-style: normal; font-size: .7rem; font-weight: 700; }
.stamp .stamp-mark { top: 6px; right: 6px; background: #fffaf5e6; }
.stamp.is-done { border-style: solid; }
.challenge-sheet { padding-top: 6px; }

/* Places: the official introduction reads like a little story. */
.place-intro { font-size: 1.05rem; line-height: 1.55; color: #4a3540; white-space: pre-line; }
.place-peek-status { line-height: 1.4; }
.place-peek-status.is-walk { background: #e2ece4; color: #3f6650; }
.place-peek-photo .place-photo img, .place-hero .place-photo img { object-fit: cover; }

/* Profile and game details. */
.game-more { margin: 16px 0; }
.caption-form { display: grid; gap: 4px; margin: 10px 0; }
.caption-state { min-height: 1.2em; }

/* Map: white around the plans. A person's face sits right on their spot. */
.leaflet-container:has(.park-plan-image), .map.map-on-plan { background: #fff; }
.person-pin { transform-origin: 28px 16px; }

/* The storybook: an open book with a leaf that turns over. */
.storybook { max-width: 780px; }
.book-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 1.42; margin: 6px auto 0; perspective: 2200px; filter: drop-shadow(0 16px 22px #3b1d2d45); }
.book-spread::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(#c9b089, #e9d9bf, #c9b089); z-index: 2; }
.book-spread.is-closed::after, .book-spread.is-closed .book-side.left { visibility: hidden; }
/* A closed book lies in the middle; it slides over while the cover opens. */
.book-spread { transition: transform .9s cubic-bezier(.45,.05,.35,1); }
.book-spread.is-closed { transform: translateX(-25%); }
@media (prefers-reduced-motion: reduce) { .book-spread { transition: none; } }
.book-side { position: relative; overflow: hidden; background: #fff6ea; container-type: inline-size; }
.book-side.left { border-radius: 10px 2px 2px 10px; box-shadow: inset -16px 0 20px -16px #3b1d2d70; }
.book-side.right { border-radius: 2px 10px 10px 2px; box-shadow: inset 16px 0 20px -16px #3b1d2d70; }
.book-page-inner { position: absolute; inset: 0; padding: 7cqw; overflow: hidden; font-size: clamp(8px, 5.4cqw, 17px); }
.book-side .book-cover, .book-side .book-endpaper { position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none; }
.book-side.book-kind-cover .book-page-inner, .book-side.book-kind-end .book-page-inner, .book-side.book-kind-endpaper .book-page-inner { padding: 0; }
.book-side .book-cover { padding: 8cqw; gap: 3cqw; }
/* --title-glyph: average letter width of the theme title font, in em. */
.book-side .book-cover h3 { font-size: min(2em, calc(80cqw / (var(--word, 8) * var(--title-glyph, .5)))); }
.book-side .book-cover img { width: 45cqw; height: auto; }
.book-side .book-cover p { font-size: .9em; }
.book-side .book-once { font-size: 1.1em; }
.book-side .book-stars { letter-spacing: .6em; font-size: .9em; }
.book-stars .ico { width:1em; height:1em; }
.book-endpaper { display: grid; place-items: center; height: 100%; background: radial-gradient(circle at 25% 25%, #f3d49e22 0 3%, transparent 4%) 0 0/22cqw 22cqw, radial-gradient(circle at 75% 75%, #f3d49e22 0 3%, transparent 4%) 0 0/22cqw 22cqw, linear-gradient(160deg, #5b3046, #3b1d2d); color: #f3d49e; }
.book-endpaper span { font-size: 18cqw; opacity: .5; }
.book-endpaper .ico { width:1em; height:1em; }
.book-side .book-stat, .book-side .book-chapter { gap: 2.5cqw; padding-top: 0; }
.book-side .book-stat h3, .book-side .book-chapter h3 { margin: 0 0 1.5cqw; font-size: 1.45em; line-height: 1.15; }
.book-side .eyebrow { font-size: .7em; }
.book-side .book-numbers { gap: 2.5cqw; }
.book-side .book-numbers div { padding: 3cqw; border-radius: 4cqw; }
.book-side .book-numbers strong { font-size: 2.1em; }
.book-side .book-numbers:has(> div:nth-child(3)) { grid-template-columns: 1fr 1fr; }
.book-side .book-numbers:has(> div:nth-child(3)) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.book-side .book-numbers:has(> div:nth-child(3)) > div { padding: 2cqw; }
.book-side .book-numbers:has(> div:nth-child(3)) strong { font-size: 1.6em; overflow-wrap: anywhere; }
.book-side .book-numbers span, .book-side .book-note, .book-side p { font-size: .85em; }
.book-side .book-rank { gap: 1.8cqw; }
.book-side .book-rank li { min-height: 0; gap: 2cqw; padding: 1.6cqw 3cqw; border-radius: 3.5cqw; font-size: .9em; }
.book-side .book-rank .av { --av: 8cqw !important; margin-top: 2.5cqw; }
.book-side .book-medal { font-size: 1.1em; }
.book-side .book-polaroids { height: 50cqw; margin: 2cqw 0; }
.book-side .book-polaroids figure { padding: 2cqw 2cqw 6cqw; }
.book-side .book-photo { height: 100%; gap: 2cqw; }
.book-side .book-photo figcaption strong { font-size: 1.15em; }
.book-side .book-photo figcaption span { font-size: .8em; }
.book-side .book-photo .av { --av: 6cqw !important; }
.book-side .book-photo .btn { min-height: 0; padding: 1.5cqw 3cqw; font-size: .75em; }
.book-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; transform-style: preserve-3d; }
.book-leaf.turn-forward { left: 50%; transform-origin: left center; animation: leaf-forward .9s cubic-bezier(.45,.05,.35,1) forwards; }
.book-leaf.turn-back { left: 0; transform-origin: right center; animation: leaf-back .9s cubic-bezier(.45,.05,.35,1) forwards; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-face .book-side { position: absolute; inset: 0; }
.leaf-back { transform: rotateY(180deg); }
.leaf-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #3b1d2d00, #3b1d2d26); animation: leaf-shade .9s ease-in-out forwards; }
@keyframes leaf-forward { from { transform: rotateY(0) } to { transform: rotateY(-180deg) } }
@keyframes leaf-back { from { transform: rotateY(0) } to { transform: rotateY(180deg) } }
@keyframes leaf-shade { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }
.storybook.is-full .book-spread { width: min(100%, calc((100dvh - 120px) * 1.42)); }
@media (prefers-reduced-motion: reduce) { .book-leaf { animation: none; } }
.book-key-hint { display: none; }
@media (min-width: 851px) {
  .book-swipe-hint { display: none; }
  .book-key-hint { display: inline; }
}
.login-visual::before, .login-visual::after { display: none; }

.brand-wordmark .brand-land { font-size: .82em; color: #f3d49e; }
@media (max-width: 420px) { .header-me > span:not(.av) { display: none; } .header-me { padding: 2px 6px; } .header-inner .brand-wordmark { font-size: 1.5rem; } }
.header-actions { flex: none; }
.header-inner .brand { min-width: 0; overflow: hidden; }
.header-me .av { flex: none; }
.level-chip.rain-chip { background: #e3eefb; color: #2d5a8c; }
/* Frame choice when sharing: a row of small samples, each with a little polaroid. */
.share-themes .theme-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -4px; padding: 6px 4px 8px; scroll-snap-type: x proximity; }
.theme-swatch { position: relative; display: grid; justify-items: center; gap: 5px; flex: none; width: 64px; cursor: pointer; scroll-snap-align: start; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-sample { position: relative; width: 50px; height: 64px; border-radius: 10px; box-shadow: 0 2px 6px #3b1d2d33; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .15s; }
.theme-sample::after { content: ''; position: absolute; inset: 17px 9px 15px; border-radius: 2px; background: #fffaf2; box-shadow: 0 1px 3px #0004; }
.theme-sample.theme-plain::after { display: none; }
.theme-swatch:has(input:checked) .theme-sample { outline-color: #c69f69; transform: translateY(-2px); }
.theme-swatch input:focus-visible + .theme-sample { outline-color: #542b3d; }
.theme-name { color: #6b4d58; font-size: .75rem; font-weight: 700; line-height: 1.15; text-align: center; }
.theme-swatch:has(input:checked) .theme-name { color: #3b1d2d; }
.theme-kasteel { background: radial-gradient(circle at 50% 35%, #7a4a64, #2e1522); box-shadow: inset 0 0 0 3px #2e1522, inset 0 0 0 5px #d9b26a, 0 2px 6px #3b1d2d33; }
.theme-vuurwerk { background: radial-gradient(circle at 22% 14%, #ffd27a 0 3px, transparent 4px), radial-gradient(circle at 78% 12%, #ff8fc4 0 3px, transparent 4px), radial-gradient(circle at 20% 90%, #8fd3ff 0 2px, transparent 3px), linear-gradient(#081233, #24124a 60%, #4b1b4d); }
.theme-mickey { background: radial-gradient(circle, #fff 0 2.5px, transparent 3.5px) 0 0 / 12px 12px, #d42a32; box-shadow: inset 0 0 0 4px #141414, 0 2px 6px #3b1d2d33; }
.theme-prinses { background: radial-gradient(circle at 25% 15%, #e8b766 0 2px, transparent 3px), linear-gradient(135deg, #fde3f0, #e6dafc); box-shadow: inset 0 0 0 3px #d7a2c3, 0 2px 6px #3b1d2d33; }
.theme-winter { background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 3px 3px / 13px 13px, linear-gradient(#0d2c4f, #1f5f86); }
.theme-kaartje { background: #f7ecd4; box-shadow: inset 0 0 0 4px #f7ecd4, inset 0 0 0 6px #b8862e, 0 2px 6px #3b1d2d33; }
.theme-plain { background: linear-gradient(135deg, #9cc6ea, #f2c9b8); }
/* A toast is as wide as its words, not half the screen. */
.toast { width: max-content; max-width: min(92vw, 460px); text-align: center; }
/* The photo starts below the close button instead of being pushed aside. */
.photo-viewer { clear: both; }
.theme-kerst { background: radial-gradient(circle at 20% 18%, #2a8a4b 0 4px, transparent 5px), radial-gradient(circle at 80% 18%, #2a8a4b 0 4px, transparent 5px), radial-gradient(circle, #fff6 0 1.5px, transparent 2.5px) 2px 2px / 11px 11px, radial-gradient(circle at 50% 40%, #b5172f, #560919); box-shadow: inset 0 0 0 3px #560919, inset 0 0 0 5px #e7c06a, 0 2px 6px #3b1d2d33; }
.theme-marvel { background: radial-gradient(circle at 30% 20%, #ffe08a 0 2px, transparent 3px), linear-gradient(128deg, #121c33 0 46%, #c62834 46%); box-shadow: inset 0 0 0 3px #e8b84a, 0 2px 6px #3b1d2d33; }
.theme-frozen { background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 2px 3px / 12px 12px, linear-gradient(160deg, #f4fdff, #7ec4de); box-shadow: inset 0 0 0 3px #fff, 0 2px 6px #3b1d2d33; }
.theme-starwars { background: radial-gradient(circle, #fff 0 1px, transparent 2px) 3px 4px / 11px 9px, radial-gradient(circle at 50% 78%, #e2c56a55, transparent 18%), linear-gradient(#2a3d62, #070b16); box-shadow: inset 0 0 0 2px #e2c56a, 0 2px 6px #3b1d2d33; }
.mark-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mark-chip { position: relative; }
.mark-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mark-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid #e4d1c1; border-radius: 999px; background: #fffaf5; color: var(--plum); font-weight: 700; font-size: .86rem; }
.mark-chip:has(input:checked) span { background: var(--plum); border-color: var(--plum); color: #fff9ef; }
.mark-chip input:focus-visible + span { outline: 3px solid #c69f69; outline-offset: 2px; }
/* Our own icons sit on the text line like a letter would. */
.ico { flex: none; vertical-align: -.2em; }
.quick-chip, .day-kind, .access-box h2, .star-btn, .photo-fav, .selfie-buttons .btn { display: inline-flex; align-items: center; gap: 6px; }
.quick-chip .ico { color: #a07a4f; }
.quick-chip[aria-pressed="true"] .ico { color: currentColor; }
.day-kind { gap: 5px; }
.day-kind .ico { stroke-width: 2.2; }
.access-box h2 .ico { color: #6b5aa6; }
.star-btn { justify-content: center; }
.photo-option-icon { display: grid; place-items: center; color: var(--plum); }
.onboarding-icon { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 8px; border: 2px solid #e2bd78; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a4a64, #3b1d2d); color: #f3d49e; }
.onboarding-icon .ico { stroke-width: 1.6; }
.ico-magic { color: #f3d49e; vertical-align: -.25em; }
.btn.secondary .ico-magic, .answer-yes .ico-magic { color: #c69f69; }
.party-stars i .ico { display: block; }
.map-pin .ico { display: block; }
.map-legend .ico { color: var(--plum); }
/* Gold, silver and bronze, drawn rather than borrowed from an emoji set. */
.medal { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; color: #fff; font-size: .82em; font-weight: 800; line-height: 1; box-shadow: inset 0 -2px 0 #0002, 0 1px 2px #0003; }
.medal-1 { background: radial-gradient(circle at 35% 30%, #ffe9a6, #d8a73b 60%, #a8781c); color: #6b4708; }
.medal-2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c4c8cf 60%, #8d939c); color: #4b5058; }
.medal-3 { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c98a52 60%, #8f5a2c); color: #5b3214; }
/* Asking before something is gone for good. */
.photo-done { display: block; width: 100%; margin-top: 14px; }
.photo-delete-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #9b3a3a; font-weight: 700; }
.confirm-sheet { display: grid; justify-items: center; gap: 10px; padding: 6px 4px 2px; text-align: center; }
.confirm-sheet h2 { margin: 6px 0 0; }
.confirm-sheet p { margin: 0; color: #6b4d58; }
.confirm-photo { width: 120px; height: 120px; overflow: hidden; border: 4px solid #fffaf2; border-radius: 14px; background: #eadbd3; box-shadow: 0 6px 16px #3b1d2d33; transform: rotate(-2deg); }
.confirm-photo img { width: 100%; height: 100%; object-fit: cover; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.confirm-sheet .reset-word { width: 100%; text-align: center; letter-spacing: .14em; font-weight: 800; }

/* App appearance: the current castle design remains the default. */
.app-theme-settings { margin-top: 16px; }
.app-theme-settings > h3 { margin-top: 0; }
.app-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.app-theme-choice { display: grid; grid-template-rows: 86px auto auto; align-content: start; gap: 4px; min-width: 0; padding: 7px 7px 12px; border: 2px solid #d9c9c5; border-radius: 15px; background: #fffdfb; color: #3b2832; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.app-theme-choice:hover { transform: translateY(-2px); }
.app-theme-choice[aria-pressed="true"] { border-color: var(--plum); box-shadow: 0 0 0 2px color-mix(in srgb, var(--plum) 20%, transparent); }
.app-theme-choice:focus-visible { outline: 3px solid #b58a50; outline-offset: 3px; }
.app-theme-choice strong { padding: 3px 3px 0; color: #302731; font-size: .94rem; line-height: 1.2; }
.app-theme-choice small { padding: 0 3px; color: #625b62; font-size: .76rem; line-height: 1.25; }
.app-theme-art { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; height: 86px; border-radius: 10px; color: #fff; box-shadow: inset 0 0 0 1px #0000001f; }
.app-theme-art img { position: relative; z-index: 1; width: 82%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 2px 5px #000a); }
.theme-art-classic { background: linear-gradient(0deg, #12081dcc, transparent 55%), url('/themes/kasteel.webp') center 38% / cover, #12081d; }
.theme-art-marvel { background: radial-gradient(circle, #0000002e 1.3px, transparent 1.8px) 0 0 / 8px 8px, repeating-conic-gradient(from 0deg at 50% 50%, #ffd31d 0 8deg, #ffb21d 8deg 16deg); }
.theme-art-marvel img { width: 74%; filter: drop-shadow(3px 3px 0 #111); }
.theme-art-princess { background: var(--sparkles), radial-gradient(circle at 50% 120%, #ffd6ea, transparent 60%), linear-gradient(135deg, #7a2f78, #c4589c 60%, #f0a3c8); }
.theme-art-frozen { background: linear-gradient(0deg, #0b2a4ad0, #12507a70), url('/themes/arendelle.webp') center 40% / cover, #12507a; }
.theme-art-starwars { background: var(--stars), radial-gradient(ellipse at 50% 140%, #1f3b6e, transparent 65%), #03050b; }
.theme-art-starwars::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 9px; height: 3px; border-radius: 3px; background: #e9faff; box-shadow: 0 0 4px #7fdcff, 0 0 10px #2a9dff, 0 0 16px #2a9dff; }
.theme-art-lionking { background: linear-gradient(0deg, #3a1406b0, transparent 60%), url('/themes/savanne.webp') center 45% / cover, #c2541e; }
.onboarding[data-step="theme"] .onboarding-inner { max-width: 570px; }
.onboarding[data-step="theme"] .app-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.onboarding[data-step="theme"] .app-theme-choice strong { color: #302731; }
.onboarding[data-step="theme"] .app-theme-choice small { color: #625b62; }
@media (max-width: 520px) {
  .onboarding[data-step="theme"] .app-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding[data-step="theme"] .app-theme-choice { grid-template-rows: 64px auto auto; padding: 5px 5px 8px; }
  .onboarding[data-step="theme"] .app-theme-art { height: 64px; }
  .onboarding[data-step="theme"] .app-theme-choice small { font-size: .78rem; }
}

/* Themes. Each world dresses the header, the page title, the cards, the buttons and the camera button.
   Kasteel is the base look below; the other themes override it. Pictures and logos live in /themes. */
@font-face { font-family: 'Bangers'; src: url('/fonts/Bangers-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fonts/Cinzel-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'News Cycle'; src: url('/fonts/NewsCycle-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  /* One large tile of randomly spread stars (scripts/make-stars.py), so no rows show up in the header. */
  --stars: url('/themes/sterren.svg?v=2') 0 0 / 960px 560px;
  --sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='120'%3E%3Cg fill='%23f6d98b'%3E%3Cpath d='M30 14c1 6 2 7 8 8-6 1-7 2-8 8-1-6-2-7-8-8 6-1 7-2 8-8z'/%3E%3Cpath d='M104 70c.7 4 1.3 4.6 5 5.3-3.7.7-4.3 1.3-5 5.3-.7-4-1.3-4.6-5-5.3 3.7-.7 4.3-1.3 5-5.3z' opacity='.8'/%3E%3Ccircle cx='76' cy='24' r='1.6' opacity='.8'/%3E%3Ccircle cx='18' cy='92' r='1.3' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 120px;
  --snowflakes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='150'%3E%3Cg fill='none' stroke='%23a3cfe2' stroke-width='1.5' stroke-linecap='round'%3E%3Cg transform='translate(36 38)'%3E%3Cpath d='M0-14V14M-12-7 12 7M-12 7 12-7M0-14-4-18M0-14 4-18M0 14-4 18M0 14 4 18M-12-7-17-6M-12-7-11-12M12 7 17 6M12 7 11 12M-12 7-17 6M-12 7-11 12M12-7 17-6M12-7 11-12'/%3E%3C/g%3E%3Cg transform='translate(118 108) scale(.6)' opacity='.8'%3E%3Cpath d='M0-14V14M-12-7 12 7M-12 7 12-7M0-14-4-18M0-14 4-18M0 14-4 18M0 14 4 18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 150px;
  --theme-banner: linear-gradient(90deg, #170b24 0, #170b24e6 42%, #170b2400 78%), url('/themes/kasteel.webp') right 0 top 22% / auto 210% no-repeat, #170b24;
  --theme-banner-ink: #fff3d6;
  --theme-banner-muted: #e8dccb;
  --theme-banner-border: 1px solid #c6a36b88;
  --theme-banner-radius: 18px;
  --theme-banner-btn: #f3d49e;
  --theme-banner-btn-ink: #2b1424;
}

/* Kasteel: the castle at night above every page. */
.app-header { background: var(--stars), radial-gradient(ellipse at 85% 140%, #7a3d6a, transparent 60%), linear-gradient(110deg, #1c0f2c, #3a1d45 62%, #55284f); }
.section-head { position: relative; overflow: hidden; min-height: 96px; margin: 0 0 16px; padding: 16px 16px 15px; border: var(--theme-banner-border); border-radius: var(--theme-banner-radius); background: var(--theme-banner); box-shadow: 0 8px 22px #1b0c2633; }
.section-head h2 { color: var(--theme-banner-ink); font-size: 1.85rem; text-shadow: 0 2px 10px #000a; }
.section-head .muted { color: var(--theme-banner-muted); text-shadow: 0 1px 6px #000a; }
.section-head > .btn:not(.secondary) { background: var(--theme-banner-btn); color: var(--theme-banner-btn-ink); }
.section-head > .btn.secondary { background: #ffffffe6; color: #2b1424; }
/* The Lion King book: warm paper, the savanna on the cover and the sun in the end paper. */
:root[data-theme="lionking"] .book-side { background: radial-gradient(ellipse at 50% 120%, #f6c88a55, transparent 60%), #fff8ec; }
:root[data-theme="lionking"] .book-side.left { box-shadow: inset -16px 0 20px -16px #7a3a1466; }
:root[data-theme="lionking"] .book-side.right { box-shadow: inset 16px 0 20px -16px #7a3a1466; }
:root[data-theme="lionking"] .book-spread::after { background: linear-gradient(#c2541e, #f2b544, #c2541e); }
:root[data-theme="lionking"] .book-cover { background: linear-gradient(180deg, #3a1406b3, #5a241033 45%, #3a1406e6), url('/themes/savanne.webp') center / cover, #a8431a; }
:root[data-theme="lionking"] .book-cover h3 { color: #ffd77a; letter-spacing: .05em; text-shadow: 0 2px 0 #3a1406, 0 0 16px #ff9a3caa; }
:root[data-theme="lionking"] .book-cover p { color: #ffe9cf; }
:root[data-theme="lionking"] .book-stars { color: #ffd77a; }
:root[data-theme="lionking"] .book-endpaper { background: radial-gradient(circle at 50% 62%, #fff3c0 0 9%, #ffc35a 14%, #ff8a2a55 26%, transparent 45%), linear-gradient(180deg, #f0a040, #c2541e 60%, #5a2410); color: #fff3c0; }
:root[data-theme="lionking"] .book-side :is(.book-stat, .book-chapter) h3 { color: #a8431a; }
:root[data-theme="lionking"] :is(.book-numbers div, .book-rank li) { border-color: #e8cfa6; background: #fffdf8; }
:root[data-theme="lionking"] .book-rank li.is-first { background: linear-gradient(120deg, #fff1cf, #fbd9a4); border-color: #f2b544; }
:root[data-theme="lionking"] :is(.book-polaroids figure, .book-photo-frame) { box-shadow: 0 0 0 1.5px #f2b544, 0 8px 18px #7a3a1440; }
:root[data-theme="lionking"] .book-end .btn { background: #ffd77a; color: #5a2410; }
:root[data-theme="lionking"] .storybook.is-full { background: radial-gradient(circle at 50% 100%, #ff9a3c, #a8431a 45%, #2a0e04 85%); }

.tabbar .tabbar-camera { background: var(--stars), radial-gradient(circle at 50% 120%, #8d4c7b, #2a1338 70%); border-color: #fffaf5; color: #f6d98b; box-shadow: 0 6px 18px #1c0f2c77, 0 0 0 2px #e2bd78 inset; }

:root[data-theme]:not([data-theme="classic"]) { color: var(--theme-ink); background: var(--theme-bg); }
:root[data-theme]:not([data-theme="classic"]) body { background: var(--theme-body); color: var(--theme-ink); }
:root[data-theme]:not([data-theme="classic"]) .app-header { background: var(--theme-header); border-bottom: var(--theme-header-line); }
:root[data-theme]:not([data-theme="classic"]) h1, :root[data-theme]:not([data-theme="classic"]) h2, :root[data-theme]:not([data-theme="classic"]) h3 { font-family: var(--font-title); }
:root[data-theme]:not([data-theme="classic"]) .panel { color: var(--theme-ink); }
:root[data-theme]:not([data-theme="classic"]) .card, :root[data-theme]:not([data-theme="classic"]) .modal, :root[data-theme]:not([data-theme="classic"]) .login-form { background: var(--paper); border-color: var(--theme-border); border-radius: var(--theme-radius); box-shadow: var(--theme-card-shadow); }
:root[data-theme]:not([data-theme="classic"]) .mini-card, :root[data-theme]:not([data-theme="classic"]) .park-hours > div, :root[data-theme]:not([data-theme="classic"]) .hunt-progress { background: var(--theme-soft); border-color: var(--theme-border); border-radius: var(--theme-radius); }
:root[data-theme]:not([data-theme="classic"]) .muted, :root[data-theme]:not([data-theme="classic"]) .subtle { color: var(--theme-muted); }
:root[data-theme]:not([data-theme="classic"]) .section-head .muted { color: var(--theme-banner-muted); }
:root[data-theme]:not([data-theme="classic"]) .section-head { align-items: flex-end; padding-right: 112px; }
:root[data-theme]:not([data-theme="classic"]) .section-head:has(> .btn) { min-height: 126px; padding-right: 16px; }
:root[data-theme]:not([data-theme="classic"]) .eyebrow { color: var(--gold-text); }
:root[data-theme]:not([data-theme="classic"]) .notice { background: var(--theme-soft); border-color: var(--theme-border); color: var(--theme-ink); }
:root[data-theme]:not([data-theme="classic"]) .btn:where(:not(.secondary,.tertiary,.danger,.is-chosen,.is-chosen-no)) { background: var(--theme-btn); color: var(--theme-btn-ink); }
:root[data-theme]:not([data-theme="classic"]) .btn:hover { filter: brightness(1.08); }
:root[data-theme]:not([data-theme="classic"]) .btn.secondary { background: var(--paper); color: var(--plum-dark); box-shadow: inset 0 0 0 1.5px var(--theme-border); }
:root[data-theme]:not([data-theme="classic"]) .btn.tertiary { background: var(--theme-soft); color: var(--plum-dark); }
:root[data-theme]:not([data-theme="classic"]) .btn.danger { background: #f4e0df; color: #873a3d; }
:root[data-theme]:not([data-theme="classic"]) .nav, :root[data-theme]:not([data-theme="classic"]) .tabbar { background: var(--theme-bar); border-color: var(--theme-border); }
:root[data-theme]:not([data-theme="classic"]) .nav button, :root[data-theme]:not([data-theme="classic"]) .tabbar button { color: var(--theme-bar-ink); }
:root[data-theme]:not([data-theme="classic"]) .nav button.active { background: var(--plum); color: #fff; }
:root[data-theme]:not([data-theme="classic"]) .tabbar button[aria-current="page"] { color: var(--theme-bar-active); }
:root[data-theme]:not([data-theme="classic"]) .tabbar button[aria-current="page"] .tabbar-icon { background: var(--theme-bar-pill); color: var(--theme-bar-pill-ink); }
:root[data-theme]:not([data-theme="classic"]) .tabbar .tabbar-camera { background: var(--theme-camera); border-color: var(--theme-camera-ring); color: var(--theme-camera-ink); box-shadow: var(--theme-camera-glow); }
:root[data-theme]:not([data-theme="classic"]) .photo-fab { border-color: var(--gold); background: var(--plum); color: #fff; }
:root[data-theme]:not([data-theme="classic"]) .quick-chip, :root[data-theme]:not([data-theme="classic"]) .stamp { background: var(--paper); border-color: var(--theme-border); color: var(--plum-dark); }
:root[data-theme]:not([data-theme="classic"]) .quick-chip[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }
:root[data-theme]:not([data-theme="classic"]) .stamp.is-done { background: var(--theme-soft); border-color: var(--gold); }
:root[data-theme]:not([data-theme="classic"]) .stamp small { background: var(--theme-soft); color: var(--theme-muted); }
:root[data-theme]:not([data-theme="classic"]) .segmented, :root[data-theme]:not([data-theme="classic"]) .map-view-switch, :root[data-theme]:not([data-theme="classic"]) .game-switch, :root[data-theme]:not([data-theme="classic"]) .day-chips { background: var(--theme-soft); }
:root[data-theme]:not([data-theme="classic"]) .segmented button, :root[data-theme]:not([data-theme="classic"]) .map-view-switch button, :root[data-theme]:not([data-theme="classic"]) .game-switch button, :root[data-theme]:not([data-theme="classic"]) .day-chips button { color: var(--theme-muted); }
:root[data-theme]:not([data-theme="classic"]) .segmented button[aria-pressed="true"], :root[data-theme]:not([data-theme="classic"]) .map-view-switch button[aria-pressed="true"], :root[data-theme]:not([data-theme="classic"]) .game-switch button[aria-pressed="true"], :root[data-theme]:not([data-theme="classic"]) .day-chips button[aria-pressed="true"] { background: var(--paper); color: var(--plum-dark); }
:root[data-theme]:not([data-theme="classic"]) .rank-row.is-me { background: var(--theme-soft); }
:root[data-theme]:not([data-theme="classic"]) .photo-option { background: var(--paper); border-color: var(--theme-border); }
:root[data-theme]:not([data-theme="classic"]) .onboarding { background: var(--theme-onboarding); }
:root[data-theme]:not([data-theme="classic"]) .onboarding h1, :root[data-theme]:not([data-theme="classic"]) .onboarding p { color: #fff; }
:root[data-theme]:not([data-theme="classic"]) .onboarding .onboarding-progress { color: #ffe3a0 !important; }
:root[data-theme]:not([data-theme="classic"]) .onboarding .app-theme-choice strong { color: #302731; }
:root[data-theme]:not([data-theme="classic"]) .onboarding .app-theme-choice small { color: #625b62; }
:root[data-theme]:not([data-theme="classic"]) .onboarding-actions .btn:not(.secondary) { background: #f6d785; color: #17253f; }
:root[data-theme]:not([data-theme="classic"]) .onboarding-actions .btn.secondary { background: transparent; color: #fff; border-color: #ffffff80; }
/* Each small sample carries one piece of its frame's decoration, like the shared picture. */
.theme-sample::before { content: ''; position: absolute; z-index: 1; pointer-events: none; }
.theme-kasteel { background: radial-gradient(circle at 18% 70%, #fff3c4 0 1.5px, transparent 2.5px), radial-gradient(circle at 84% 30%, #fff3c4 0 1.5px, transparent 2.5px), repeating-conic-gradient(from 0deg at 50% -10%, #f3d49e22 0 6deg, transparent 6deg 14deg), radial-gradient(circle at 50% 35%, #8a5272, #2a1220); }
.theme-kasteel::before { inset: 3px; border-radius: 8px; background: radial-gradient(circle at 0 0, #e9c27a 0 3px, transparent 4px), radial-gradient(circle at 100% 0, #e9c27a 0 3px, transparent 4px), radial-gradient(circle at 0 100%, #e9c27a 0 3px, transparent 4px), radial-gradient(circle at 100% 100%, #e9c27a 0 3px, transparent 4px); }
.theme-marvel { background: repeating-conic-gradient(from 0deg at 50% 50%, #ffffff12 0 5deg, transparent 5deg 10deg), radial-gradient(circle at 8% 8%, #ffd23f 0 7px, transparent 8px), linear-gradient(128deg, #24386b 0 46%, #c62834 46%); box-shadow: inset 0 0 0 2px #0b0b0b, inset 0 0 0 4px #ffd23f, 0 2px 6px #3b1d2d33; }
.theme-marvel::before { width: 14px; height: 14px; top: 11px; right: 3px; border-radius: 50%; background: radial-gradient(circle, #fff 0 1.5px, #1d3f8f 2px 3px, #c8202f 3.5px 4.5px, #f4f4f4 5px 5.5px, #c8202f 6px); box-shadow: 0 1px 2px #0006; }
.theme-prinses::before { width: 13px; height: 13px; top: 11px; left: 4px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff5f9 0 2px, #f28fb8 2.5px 4px, #c2477f 4.5px); box-shadow: 6px 32px 0 -2px #f7b2cf; }
.theme-frozen { background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 2px 3px / 12px 12px, linear-gradient(transparent 82%, #ffffffcc 82%), linear-gradient(160deg, #f4fdff, #6fb8d8); }
.theme-frozen::before { content: '❄'; top: 9px; left: 2px; color: #fff; font-size: 15px; line-height: 1; text-shadow: 0 0 3px #5fc3ea; }
.theme-starwars { background: radial-gradient(circle at 86% 14%, #f0c28a 0 4px, transparent 5px), radial-gradient(circle, #fff 0 1px, transparent 2px) 3px 4px / 11px 9px, radial-gradient(circle at 15% 25%, #6a3fb555, transparent 45%), linear-gradient(#1c2b4a, #04060d); }
.theme-starwars::before { inset: 16px 3px 12px; background: linear-gradient(90deg, #3fa9ff 0 2px, transparent 2px calc(100% - 2px), #ff3b3b calc(100% - 2px)); filter: drop-shadow(0 0 2px #fff); }
.theme-kerst::before { top: 3px; left: 3px; right: 3px; height: 6px; border-radius: 3px; background: radial-gradient(circle, #ffd27a 0 1.4px, transparent 2px) 0 2px / 6px 6px, radial-gradient(circle, #ff6b8a 0 1.4px, transparent 2px) 3px 3px / 6px 6px, #1f6d3b; }
.theme-vuurwerk::before { left: 4px; right: 4px; bottom: 3px; height: 8px; background: linear-gradient(90deg, transparent 10%, #1a0f30 10% 22%, transparent 22% 30%, #1a0f30 30% 45%, transparent 45% 47%, #1a0f30 47% 53%, transparent 53% 55%, #1a0f30 55% 70%, transparent 70% 78%, #1a0f30 78% 90%, transparent 90%); }
.theme-mickey { background: radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.5px) 0 0 / 12px 12px, #d42a32; }
.theme-mickey::before { top: 5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #141414; box-shadow: -5px -4px 0 -2px #141414, 5px -4px 0 -2px #141414, -16px 40px 0 -2px #ffd23f, 16px 40px 0 -2px #ffd23f; }
.theme-winter { background: radial-gradient(ellipse at 50% 18%, #7dffc455, transparent 40%), radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 3px 3px / 13px 13px, linear-gradient(#081d38, #1f5f86); }
.theme-winter::before { left: 0; right: 0; bottom: 0; height: 9px; border-radius: 0 0 10px 10px; background: radial-gradient(circle at 25% 100%, #fff 0 8px, transparent 8.5px), radial-gradient(circle at 75% 100%, #fff 0 7px, transparent 7.5px), linear-gradient(transparent 55%, #fff 55%); }
.theme-kaartje::before { width: 12px; height: 12px; top: 10px; right: 4px; border-radius: 50%; border: 1.5px solid #b3262ecc; box-shadow: inset 0 0 0 2px #fbf2dc, inset 0 0 0 2.5px #b3262e99; transform: rotate(18deg); }

/* Marvel: a comic book. Red masthead, ink lines, halftone dots and an action burst behind each title. */
:root[data-theme="marvel"] {
  --plum: #c8102e; --plum-dark: #151515; --paper: #fff; --gold: #f0b323; --gold-text: #8a5a00; --font-title: 'Bangers', Impact, 'Arial Narrow', sans-serif;
  --theme-bg: #f7f4ec; --theme-ink: #181818; --theme-muted: #4d4d4d; --theme-border: #151515; --theme-soft: #fff4d6; --theme-radius: 6px;
  --theme-header: radial-gradient(circle, #00000026 1.3px, transparent 1.8px) 0 0 / 7px 7px, linear-gradient(180deg, #ec1d24, #c8102e);
  --theme-header-line: 4px solid #151515;
  --theme-body: radial-gradient(circle, #0000000f 1.3px, transparent 1.8px) 0 0 / 9px 9px, #f7f4ec;
  --theme-card-shadow: 5px 5px 0 #151515;
  --theme-btn: #e0101f; --theme-btn-ink: #fff;
  --theme-bar: #fff; --theme-bar-ink: #3a3a3a; --theme-bar-active: #151515; --theme-bar-pill: #e0101f; --theme-bar-pill-ink: #fff;
  --theme-camera: radial-gradient(circle closest-side, #1d3f94 0 49%, #d61f2c 50% 64%, #fff 65% 79%, #d61f2c 80%);
  --theme-camera-ring: #151515; --theme-camera-ink: #fff; --theme-camera-glow: 4px 4px 0 #151515;
  --theme-banner: url('/themes/marvel-logo.svg') right 12px top 12px / 84px auto no-repeat, radial-gradient(circle, #00000024 1.3px, transparent 1.8px) 0 0 / 8px 8px, repeating-conic-gradient(from 0deg at 82% 60%, #ffd31d 0 8deg, #ffbe1d 8deg 16deg);
  --theme-banner-ink: #151515; --theme-banner-muted: #2a2a2a; --theme-banner-border: 3px solid #151515; --theme-banner-radius: 6px;
  --theme-onboarding: radial-gradient(circle, #00000030 1.3px, transparent 1.8px) 0 0 / 8px 8px, repeating-conic-gradient(from 0deg at 50% 30%, #d4111f 0 8deg, #b80d1a 8deg 16deg);
}
:root[data-theme="marvel"] .card, :root[data-theme="marvel"] .modal { border-width: 2.5px; }
:root[data-theme="marvel"] .section-head { box-shadow: 6px 6px 0 #151515; }
:root[data-theme="marvel"] .section-head h2 { font-size: 2.3rem; letter-spacing: .03em; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #fff; }
:root[data-theme="marvel"] .section-head .muted { text-shadow: none; font-weight: 700; }
:root[data-theme="marvel"] h2, :root[data-theme="marvel"] h3 { font-weight: 400; letter-spacing: .03em; }
:root[data-theme="marvel"] .card h3 { font-size: 1.45rem; }
:root[data-theme="marvel"] .day-section-head h3 { display: inline-block; padding: 2px 10px; border: 2.5px solid #151515; background: #ffd31d; font-size: 1.5rem; box-shadow: 3px 3px 0 #151515; transform: rotate(-1.5deg); }
:root[data-theme="marvel"] .btn:where(:not(.tiny)) { border: 2px solid #151515; box-shadow: 3px 3px 0 #151515; font-weight: 800; }
:root[data-theme="marvel"] .btn.secondary { box-shadow: 3px 3px 0 #151515; }
:root[data-theme="marvel"] .brand-wordmark, :root[data-theme="marvel"] .brand-wordmark .brand-land { color: #fff; text-shadow: 2px 2px 0 #151515; }
/* Same wordmark in every theme; only its colour and glow follow the theme. */
:root[data-theme="princess"] .brand-wordmark { color: #fff3f8; text-shadow: 0 1px #4d1846, 0 0 12px #f7b7d8aa; }
:root[data-theme="princess"] .brand-wordmark .brand-land { color: #f6c9a8; }
:root[data-theme="frozen"] .brand-wordmark { color: #f4fcff; text-shadow: 0 1px #0b2a4a, 0 0 14px #9fe6ffcc; }
:root[data-theme="frozen"] .brand-wordmark .brand-land { color: #a8e6f7; }
:root[data-theme="marvel"] .header-bell, :root[data-theme="marvel"] .header-ticket, :root[data-theme="marvel"] .header-me { border: 2px solid #fff; background: #0000002e; }
:root[data-theme="marvel"] .tabbar { border-top: 3px solid #151515; }
:root[data-theme="marvel"] .tabbar .tabbar-camera { border-width: 3px; }
:root[data-theme="marvel"] :is(time, .park-hours span, .time-display, .score-count, .rank-score, .book-numbers strong, .stat strong) { font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; font-weight: 800; }
:root[data-theme="marvel"] .day-item { border: 2.5px solid #151515; border-radius: 6px; box-shadow: 4px 4px 0 #151515; }

/* Prinsessen: a royal fairy tale in rose and gold. */
:root[data-theme="princess"] {
  --plum: #8a3f86; --plum-dark: #57204f; --paper: #fffafd; --gold: #c9a043; --gold-text: #8b6418; --font-title: 'Playfair Display', Georgia, serif;
  --theme-bg: #fbeef5; --theme-ink: #45263f; --theme-muted: #74586c; --theme-border: #edc9dc; --theme-soft: #fbeaf3; --theme-radius: 24px;
  --theme-header: var(--sparkles), linear-gradient(110deg, #5f2259, #93408a 60%, #c9679f);
  --theme-header-line: 3px double #e7c675;
  --theme-body: var(--sparkles), linear-gradient(180deg, #f9e3ef, #fff7fb 460px);
  --theme-card-shadow: 0 0 0 1px #f6e2b0 inset, 0 10px 28px #a2457a1f;
  --theme-btn: linear-gradient(180deg, #a24d97, #7d3478); --theme-btn-ink: #fff;
  --theme-bar: #fffafdf5; --theme-bar-ink: #7a5a72; --theme-bar-active: #57204f; --theme-bar-pill: #f8dceb; --theme-bar-pill-ink: #8a3f86;
  --theme-camera: var(--sparkles), radial-gradient(circle at 40% 30%, #e48bbd, #8a3f86 75%);
  --theme-camera-ring: #fffafd; --theme-camera-ink: #fff3c9; --theme-camera-glow: 0 0 0 3px #d7b25a inset, 0 6px 18px #8a3f8666;
  --theme-banner: url('/themes/princess-logo.svg') right 12px top 10px / 96px auto no-repeat, var(--sparkles), radial-gradient(circle at 85% 50%, #ffffff40, transparent 45%), linear-gradient(115deg, #6a2563, #a5478f 55%, #e08ab5);
  --theme-banner-ink: #fff; --theme-banner-muted: #fde9f3; --theme-banner-border: 2px solid #e7c675; --theme-banner-radius: 26px;
  --theme-onboarding: var(--sparkles), radial-gradient(circle at 80% 20%, #ffffff38, transparent 33%), linear-gradient(145deg, #5f2259, #a5478f 70%, #e08ab5);
}
:root[data-theme="princess"] .section-head h2 { font-family: 'Skoltiez Swash', Georgia, serif; font-size: 2.1rem; font-weight: 400; text-shadow: 0 2px 0 #8b6418, 0 3px 12px #4d1846aa; }
:root[data-theme="princess"] .card, :root[data-theme="princess"] .modal { border-top: 2px solid #e7c675; }
:root[data-theme="princess"] .btn { border-radius: 999px; }
:root[data-theme="princess"] .day-section-head h3::before, :root[data-theme="princess"] .card > h3:first-child::before { content: '♛ '; color: #c9a043; }
:root[data-theme="princess"] .header-bell, :root[data-theme="princess"] .header-ticket, :root[data-theme="princess"] .header-me { border-color: #e7c675; }

/* Frozen: Arendelle in the snow, ice-blue light and the northern lights. */
:root[data-theme="frozen"] {
  --plum: #155e86; --plum-dark: #0d3550; --paper: #fbfeff; --gold: #7cc6e0; --gold-text: #1f6f93; --font-title: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --theme-bg: #e6f4fb; --theme-ink: #163848; --theme-muted: #4b6d7c; --theme-border: #b9dcec; --theme-soft: #e4f4fb; --theme-radius: 18px;
  --theme-header: radial-gradient(ellipse at 75% -40%, #7ff3e066, transparent 60%), radial-gradient(ellipse at 20% -60%, #9fb8ff55, transparent 55%), linear-gradient(105deg, #0b2a4a, #12507a 55%, #2a8db0);
  --theme-header-line: 2px solid #c9f1ff;
  --theme-body: var(--snowflakes), linear-gradient(180deg, #dcf0fa, #f3fafd 460px);
  --theme-card-shadow: inset 0 1px #fff, 0 0 0 1px #ffffffaa inset, 0 10px 26px #2a7fa624;
  --theme-btn: linear-gradient(180deg, #2b88b8, #155e86); --theme-btn-ink: #fff;
  --theme-bar: #f8fdfff2; --theme-bar-ink: #4b6d7c; --theme-bar-active: #0d3550; --theme-bar-pill: #d4eef9; --theme-bar-pill-ink: #155e86;
  --theme-camera: radial-gradient(circle at 35% 28%, #ffffff, #b6ecfb 30%, #4fb1d8 65%, #155e86);
  --theme-camera-ring: #fff; --theme-camera-ink: #0d3550; --theme-camera-glow: 0 0 0 1px #9fdcf1 inset, 0 0 16px #6fd0f0aa, 0 6px 16px #0d355055;
  --theme-banner: url('/themes/frozen-logo.svg') right 12px top 12px / 92px auto no-repeat, linear-gradient(90deg, #0b2a4af2 0, #0f3d63c4 52%, #0f3d6326), url('/themes/arendelle.webp') center 58% / cover, #12507a;
  --theme-banner-ink: #fff; --theme-banner-muted: #dff5ff; --theme-banner-border: 1px solid #c9f1ff; --theme-banner-radius: 18px;
  --theme-onboarding: linear-gradient(160deg, #0b2a4ae8, #12507ab8 65%, #2a8db0a0), url('/themes/arendelle.webp') center / cover, #12507a;
}
:root[data-theme="frozen"] .section-head h2 { letter-spacing: .04em; text-shadow: 0 0 14px #7fdcff, 0 2px 8px #000a; }
:root[data-theme="frozen"] h2, :root[data-theme="frozen"] h3 { font-weight: 700; letter-spacing: .02em; }
:root[data-theme="frozen"] .section-head { box-shadow: 0 0 0 4px #ffffff99, 0 10px 24px #0d355033; }
:root[data-theme="frozen"] .card, :root[data-theme="frozen"] .modal { background: linear-gradient(180deg, #ffffff, #f4fbfe); }

/* Star Wars: deep space, a blue lightsaber under the header, and yellow letters like the opening text. */
:root[data-theme="starwars"] {
  --plum: #1d3f7a; --plum-dark: #0b1a33; --paper: #f7f8fb; --gold: #ffe81f; --gold-text: #7a6500; --font-title: 'News Cycle', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
  --theme-bg: #03050b; --theme-ink: #121a2a; --theme-muted: #4c586c; --theme-border: #2b3954; --theme-soft: #e8ecf3; --theme-radius: 8px;
  --theme-header: var(--stars), #03050b;
  --theme-header-line: 3px solid #dff7ff;
  --theme-body: var(--stars), radial-gradient(ellipse at 50% 0, #11234a, transparent 70%) 0 0 / 100% 600px no-repeat, #03050b;
  --theme-card-shadow: 0 0 0 1px #000 , 0 12px 30px #000c;
  --theme-btn: #ffe81f; --theme-btn-ink: #000;
  --theme-bar: #070b16f2; --theme-bar-ink: #b9c3d6; --theme-bar-active: #ffe81f; --theme-bar-pill: #1b2a48; --theme-bar-pill-ink: #ffe81f;
  --theme-camera: var(--stars), radial-gradient(circle at 50% 35%, #1b2a48, #03050b 75%);
  --theme-camera-ring: #e9faff; --theme-camera-ink: #ffe81f; --theme-camera-glow: 0 0 0 2px #2a9dff, 0 0 10px #4fc3ff, 0 0 22px #2a9dffcc;
  --theme-banner: url('/themes/starwars-logo.svg') right 14px top 10px / 80px auto no-repeat, var(--stars), radial-gradient(ellipse at 85% 50%, #1f3b6e, transparent 60%), #03050b;
  --theme-banner-ink: #ffe81f; --theme-banner-muted: #d4dbe8; --theme-banner-border: 1px solid #2b3954; --theme-banner-radius: 8px;
  --theme-onboarding: var(--stars), radial-gradient(ellipse at 50% 120%, #1f3b6e, transparent 60%), #03050b;
}
:root[data-theme="starwars"] .app-header { box-shadow: 0 1px 4px #7fdcff, 0 2px 14px #2a9dff, 0 6px 26px #2a9dff66; }
:root[data-theme="starwars"] .section-head { box-shadow: inset 0 -3px 0 #e9faff, 0 3px 12px #2a9dffaa; }
:root[data-theme="starwars"] .section-head h2 { text-transform: uppercase; letter-spacing: .08em; font-size: 1.75rem; }
:root[data-theme="starwars"] .card h3, :root[data-theme="starwars"] .modal h2 { letter-spacing: .03em; }
:root[data-theme="starwars"] .day-section-head h3 { color: #ffe81f; text-transform: uppercase; letter-spacing: .08em; }
:root[data-theme="starwars"] .panel :is(.day-section > p, .day-past > summary, .empty, .about, .section-head + p), :root[data-theme="starwars"] .panel > p { color: #d4dbe8; }
:root[data-theme="starwars"] .empty { border-color: #4c586c; }
:root[data-theme="starwars"] .brand-wordmark, :root[data-theme="starwars"] .brand-wordmark .brand-land { color: #ffe81f; text-shadow: none; }
:root[data-theme="starwars"] .header-bell, :root[data-theme="starwars"] .header-ticket, :root[data-theme="starwars"] .header-me { border-color: #4fc3ff; background: #0d1830; }
:root[data-theme="starwars"] .tabbar { border-top: 2px solid #dff7ff; box-shadow: 0 -2px 12px #2a9dff99; }
:root[data-theme="starwars"] .btn:where(:not(.secondary,.tertiary,.danger,.is-chosen,.is-chosen-no)) { text-transform: uppercase; letter-spacing: .05em; }
:root[data-theme="starwars"] .notice { background: #0d1830; border-color: #2b3954; color: #e6ecf6; }

/* The Lion King: the Pride Lands at sunrise. A warm sky over the savanna, gold letters like the film title and the sun as camera button. */
:root[data-theme="lionking"] {
  --plum: #a8431a; --plum-dark: #5a2410; --paper: #fffaf1; --gold: #f2b544; --gold-text: #9a5a0c; --font-title: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --theme-bg: #f8ead2; --theme-ink: #3d2416; --theme-muted: #77543c; --theme-border: #e8cfa6; --theme-soft: #fbefd9; --theme-radius: 16px;
  --theme-header: radial-gradient(circle at 82% 130%, #ffe08a 0 22px, #ffb04a55 34px, transparent 70px), linear-gradient(180deg, #5a2410, #a8431a 70%, #e07a2e);
  --theme-header-line: 3px solid #f2b544;
  --theme-body: radial-gradient(ellipse at 50% 0, #ffd9a0, transparent 70%) 0 0 / 100% 520px no-repeat, linear-gradient(180deg, #f6dfb8, #faf0de 520px);
  --theme-card-shadow: inset 0 3px #f2b544, 0 10px 26px #7a3a1424;
  --theme-btn: linear-gradient(180deg, #d0611f, #a8431a); --theme-btn-ink: #fff;
  --theme-bar: #fffaf1f5; --theme-bar-ink: #77543c; --theme-bar-active: #5a2410; --theme-bar-pill: #fbe1b4; --theme-bar-pill-ink: #a8431a;
  --theme-camera: radial-gradient(circle at 50% 42%, #fff6c8, #ffd25a 32%, #ff8a2a 62%, #c2401a);
  --theme-camera-ring: #fffaf1; --theme-camera-ink: #5a2410; --theme-camera-glow: 0 0 0 2px #f2b544 inset, 0 0 18px #ff9a3caa, 0 6px 16px #5a241055;
  --theme-banner: url('/themes/lionking-logo.svg') right 12px top 14px / 100px auto no-repeat, linear-gradient(90deg, #3a1406e6 0, #5a2410a8 50%, #5a241000), url('/themes/savanne.webp') center 45% / cover, #a8431a;
  --theme-banner-ink: #ffe9b8; --theme-banner-muted: #ffe2c2; --theme-banner-border: 2px solid #f2b544; --theme-banner-radius: 16px;
  --theme-onboarding: linear-gradient(180deg, #3a1406d9, #a8431a99 60%, #3a1406e6), url('/themes/savanne.webp') center / cover, #a8431a;
}
:root[data-theme="lionking"] .section-head h2 { color: #ffd77a; letter-spacing: .05em; text-shadow: 0 2px 0 #5a2410, 0 0 16px #ff9a3c99; }
:root[data-theme="lionking"] h2, :root[data-theme="lionking"] h3 { font-weight: 700; letter-spacing: .02em; }
:root[data-theme="lionking"] .day-section-head h3 { color: #a8431a; }
:root[data-theme="lionking"] .brand-wordmark { color: #ffe9b8; text-shadow: 0 1px #3a1406, 0 0 12px #ff9a3c99; }
:root[data-theme="lionking"] .brand-wordmark .brand-land { color: #ffc65a; }
:root[data-theme="lionking"] .header-bell, :root[data-theme="lionking"] .header-ticket, :root[data-theme="lionking"] .header-me { border-color: #f2b544; }
:root[data-theme="lionking"] .btn { border-radius: 999px; }

/* The look-back book follows the theme: paper, cover, end paper and the boxes on each page. */
:root[data-theme]:not([data-theme="classic"]) .book-side .book-cover img.book-theme-logo { width: 62cqw; max-height: 26cqw; object-fit: contain; filter: drop-shadow(0 2px 4px #0008); }
:root[data-theme]:not([data-theme="classic"]) .book-photo figcaption span, :root[data-theme]:not([data-theme="classic"]) .book-numbers span, :root[data-theme]:not([data-theme="classic"]) :is(.book-note, .book-chapter p) { color: var(--theme-muted); }

:root[data-theme="marvel"] .book-side { background: radial-gradient(circle, #0000000d 1.2px, transparent 1.7px) 0 0 / 7px 7px, #fffdf6; }
:root[data-theme="marvel"] .book-side.left { box-shadow: inset 0 0 0 2.5px #151515, inset -16px 0 20px -16px #1515156e; }
:root[data-theme="marvel"] .book-side.right { box-shadow: inset 0 0 0 2.5px #151515, inset 16px 0 20px -16px #1515156e; }
:root[data-theme="marvel"] .book-spread::after { background: #151515; }
:root[data-theme="marvel"] .book-cover { background: radial-gradient(circle, #00000030 1.3px, transparent 1.8px) 0 0 / 8px 8px, repeating-conic-gradient(from 0deg at 50% 40%, #e0101f 0 8deg, #b80d1a 8deg 16deg); }
:root[data-theme="marvel"] .book-cover h3 { --title-glyph: .46; color: #ffd31d; font-weight: 400; letter-spacing: .03em; text-shadow: 2px 2px 0 #151515, -1px -1px 0 #151515, 1px -1px 0 #151515, -1px 1px 0 #151515, 4px 4px 0 #151515; }
:root[data-theme="marvel"] .book-cover p { color: #fff; font-weight: 700; }
:root[data-theme="marvel"] .book-stars { color: #ffd31d; }
:root[data-theme="marvel"] .book-endpaper { background: radial-gradient(circle, #00000024 1.3px, transparent 1.8px) 0 0 / 8px 8px, repeating-conic-gradient(from 0deg at 50% 50%, #ffd31d 0 8deg, #ffbe1d 8deg 16deg); color: #151515; }
:root[data-theme="marvel"] .book-side .eyebrow { justify-self: center; padding: .3em .7em; border: 2px solid #151515; background: #ffd31d; color: #151515; box-shadow: 2px 2px 0 #151515; transform: rotate(-2deg); }
:root[data-theme="marvel"] .book-side :is(.book-stat, .book-chapter) h3 { font-weight: 400; letter-spacing: .03em; }
:root[data-theme="marvel"] :is(.book-numbers div, .book-rank li) { border: 2.5px solid #151515; border-radius: 4px; background: #fff; box-shadow: 3px 3px 0 #151515; }
:root[data-theme="marvel"] .book-rank li.is-first { background: #ffd31d; border-color: #151515; }
:root[data-theme="marvel"] :is(.book-polaroids figure, .book-photo-frame) { border: 2.5px solid #151515; border-radius: 3px; box-shadow: 4px 4px 0 #151515; }
:root[data-theme="marvel"] .book-end .btn { background: #ffd31d; color: #151515; }
:root[data-theme="marvel"] .storybook.is-full { background: radial-gradient(circle, #00000030 1.3px, transparent 1.8px) 0 0 / 8px 8px, #8f0b16; }

:root[data-theme="princess"] .book-side { background: linear-gradient(#fffafde6, #fffafde6), var(--sparkles), #fbeef5; }
:root[data-theme="princess"] .book-side:not(.book-kind-endpaper)::before { content: ''; position: absolute; inset: 3cqw; z-index: 1; border: 1px solid #e7c675; border-radius: 3cqw; box-shadow: inset 0 0 0 .8cqw #fffafd, inset 0 0 0 calc(.8cqw + 1px) #edc9dc; pointer-events: none; }
:root[data-theme="princess"] .book-side:is(.book-kind-cover, .book-kind-end)::before { box-shadow: none; }
:root[data-theme="princess"] .book-spread::after { background: linear-gradient(#c9a043, #f6e2b0, #c9a043); }
:root[data-theme="princess"] .book-cover { background: var(--sparkles), radial-gradient(circle at 50% 35%, #ffffff40, transparent 50%), linear-gradient(150deg, #6a2563, #a5478f 60%, #e08ab5) }
:root[data-theme="princess"] .book-cover h3 { --title-glyph: .45; color: #fff3c9; font-family: 'Skoltiez Swash', Georgia, serif; font-weight: 400; text-shadow: 0 2px 0 #8b6418, 0 3px 12px #4d1846aa; }
:root[data-theme="princess"] .book-cover p { color: #fde9f3; }
:root[data-theme="princess"] .book-stars { color: #f6d98b; }
:root[data-theme="princess"] .book-endpaper { background: var(--sparkles), linear-gradient(160deg, #93408a, #57204f); color: #f6d98b; }
:root[data-theme="princess"] .book-side :is(.book-stat, .book-chapter) h3::before { content: '♛ '; color: #c9a043; }
:root[data-theme="princess"] :is(.book-numbers div, .book-rank li) { border-color: #edc9dc; background: #fff; }
:root[data-theme="princess"] .book-rank li.is-first { background: linear-gradient(120deg, #fbe3ef, #fdf1d3); border-color: #e7c675; }
:root[data-theme="princess"] :is(.book-polaroids figure, .book-photo-frame) { box-shadow: 0 0 0 1.5px #e7c675, 0 8px 18px #8a3f8640; }
:root[data-theme="princess"] .book-end .btn { background: #f6d98b; color: #57204f; }
:root[data-theme="princess"] .storybook.is-full { background: var(--sparkles), radial-gradient(circle at 50% 30%, #93408a, #3a1236 75%); }

:root[data-theme="frozen"] .book-side { background: linear-gradient(#fbfeffd9, #fbfeffd9), var(--snowflakes), #e6f4fb; }
:root[data-theme="frozen"] .book-side.left { box-shadow: inset -16px 0 20px -16px #0d355066; }
:root[data-theme="frozen"] .book-side.right { box-shadow: inset 16px 0 20px -16px #0d355066; }
:root[data-theme="frozen"] .book-spread { filter: drop-shadow(0 16px 22px #0d355045); }
:root[data-theme="frozen"] .book-spread::after { background: linear-gradient(#7cc6e0, #e9faff, #7cc6e0); }
:root[data-theme="frozen"] .book-cover { background: linear-gradient(180deg, #0b2a4ad9, #12507a99 55%, #0b2a4ae6), url('/themes/arendelle.webp') center / cover, #12507a; }
:root[data-theme="frozen"] .book-cover h3 { --title-glyph: .68; color: #fff; letter-spacing: .04em; text-shadow: 0 0 14px #7fdcff, 0 2px 8px #000a; }
:root[data-theme="frozen"] .book-cover p { color: #dff5ff; }
:root[data-theme="frozen"] .book-stars { color: #c9f1ff; }
:root[data-theme="frozen"] .book-endpaper { background: var(--snowflakes), radial-gradient(ellipse at 70% -20%, #7ff3e055, transparent 60%), linear-gradient(160deg, #12507a, #0b2a4a); color: #c9f1ff; }
:root[data-theme="frozen"] :is(.book-numbers div, .book-rank li) { border-color: #b9dcec; background: linear-gradient(180deg, #fff, #f4fbfe); }
:root[data-theme="frozen"] .book-rank li.is-first { background: linear-gradient(120deg, #e9f8ff, #cdeefb); border-color: #7cc6e0; }
:root[data-theme="frozen"] :is(.book-polaroids figure, .book-photo-frame) { box-shadow: 0 0 0 1.5px #c9f1ff, 0 8px 18px #0d355040; }
:root[data-theme="frozen"] .book-end .btn { background: #fff; color: #0d3550; }
:root[data-theme="frozen"] .storybook.is-full { background: var(--snowflakes), radial-gradient(circle at 50% 30%, #12507a, #061a2e 75%); }

:root[data-theme="starwars"] .book-side { background: var(--stars), radial-gradient(ellipse at 50% 0, #11234a, transparent 75%), #03050b; color: #e6ecf6; }
:root[data-theme="starwars"] .book-side.left { box-shadow: inset -16px 0 20px -16px #000; }
:root[data-theme="starwars"] .book-side.right { box-shadow: inset 16px 0 20px -16px #000; }
:root[data-theme="starwars"] .book-spread { filter: drop-shadow(0 0 10px #2a9dff66) drop-shadow(0 16px 22px #000); }
:root[data-theme="starwars"] .book-spread::after { width: 3px; background: #e9faff; box-shadow: 0 0 4px #7fdcff, 0 0 12px #2a9dff; }
:root[data-theme="starwars"] .book-cover { background: var(--stars), radial-gradient(ellipse at 50% 110%, #1f3b6e, transparent 60%), #03050b; }
:root[data-theme="starwars"] .book-cover h3 { --title-glyph: .62; color: #ffe81f; text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme="starwars"] .book-cover p { color: #d4dbe8; }
:root[data-theme="starwars"] .book-stars { color: #ffe81f; }
:root[data-theme="starwars"] .book-endpaper { background: var(--stars), #03050b; color: #4fc3ff; }
:root[data-theme="starwars"] .book-side :is(.book-stat, .book-chapter) h3, :root[data-theme="starwars"] .book-photo figcaption strong { color: #ffe81f; text-transform: uppercase; letter-spacing: .05em; }
:root[data-theme="starwars"] .book-side .eyebrow { color: #4fc3ff; }
:root[data-theme="starwars"] .book-side :is(.book-numbers span, .book-note, .book-chapter p, .book-photo figcaption span, p) { color: #b9c3d6; }
:root[data-theme="starwars"] :is(.book-numbers div, .book-rank li) { border-color: #2b3954; background: #0d1830d9; color: #e6ecf6; }
:root[data-theme="starwars"] .book-numbers strong, :root[data-theme="starwars"] .book-rank li > span:last-child { color: #ffe81f; }
:root[data-theme="starwars"] .book-rank li.is-first { background: #0d1830; border-color: #e9faff; box-shadow: 0 0 0 1px #4fc3ff, 0 0 10px #2a9dffaa; }
:root[data-theme="starwars"] :is(.book-polaroids figure, .book-photo-frame) { box-shadow: 0 0 0 1px #4fc3ff, 0 0 12px #2a9dff88; }
:root[data-theme="starwars"] .book-end .btn { background: #ffe81f; color: #000; }
:root[data-theme="starwars"] .storybook.is-full { background: var(--stars), #03050b; }

/* The park drawings have white edges; keep the surrounding card seamless. */
:root[data-theme] .map-card:has(.map-on-plan),
:root[data-theme] .map-card:has(.map-on-plan) .map-frame { background: #fff; }
:root[data-theme] .map-card:has(.map-on-plan) { border-color: #fff; box-shadow: none; }
.map.map-on-plan { border-color: #fff; }

/* Login: the family code can be shown while you type it. */
.code-field { position: relative; }
.code-field .input { width: 100%; padding-right: 86px; }
.code-show, .login-form .code-show { position: absolute; width: auto; margin: 0; top: 50%; right: 6px; transform: translateY(-50%); min-height: 40px; min-width: 72px; padding: 6px 10px; border: 1px solid #e0cdbd; border-radius: 10px; background: #fff8ef; color: var(--plum-dark); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.code-show[aria-pressed="true"] { background: #f3e4cf; }

/* Windows make text fields full width. Checkboxes and radio buttons keep their own size, next to their words. */
.modal input[type=checkbox], .modal input[type=radio] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--plum); }
.modal form > .toggle { min-height: 44px; gap: 10px; font-size: 1rem; }

/* Traccar Client: our link and your own code, each with a copy button. */
.gps-help { border-top: 1px solid #eadbd3; padding: 6px 0 12px; }
.gps-help summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; cursor: pointer; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 8px 0; padding: 10px 12px; border: 1px solid #eadbd3; border-radius: 12px; background: #fffdfa; color: #3b2832; }
.copy-row span { display: grid; grid-column: 1 / -1; }
.copy-row small { color: #7d6670; font-size: .78rem; }
.copy-row code { min-width: 0; font-size: .95rem; overflow-wrap: anywhere; }
.copy-row .btn { min-height: 40px; }
.gps-status { font-weight: 700; }

/* Beheer: a QR code per person for Traccar Client, big and on white so another phone can scan it. */
.gps-admin-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid #eadbd3; }
.gps-admin-row span { display: grid; min-width: 0; }
.gps-admin-row small { color: #7d6670; }
.family-admin-row { width: 100%; padding: 0; border: 0; border-top: 1px solid #eadbd3; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.family-admin > .btn { margin-top: 12px; }
.family-admin-more { color: #8a6b75; font-size: 1.4rem; line-height: 1; }
.member-admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.member-admin-head h2 { margin: 0; }
.member-admin-part { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid #eadbd3; }
.member-admin-part h3, .member-admin-part p { margin: 0; }
.qr-box { width: min(300px, 78vw); aspect-ratio: 1; margin: 12px auto; border-radius: 12px; background: #fff; overflow: hidden; }
.qr-box svg { display: block; width: 100%; height: 100%; }
/* Logging in: one big button for face or finger, the password below it, a login code from Joris as the way in. */
.login-go .ico { vertical-align: -4px; margin-right: 4px; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: #8a6b75; font-size: .85rem; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid #eadbd3; }
.login-form .login-password { min-height: 50px; margin-top: 16px; }
.login-form .link-btn { min-height: 44px; margin-top: 4px; }
.setup-code-input { font-size: 1.2rem; letter-spacing: .12em; text-transform: uppercase; }
.passkey-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid #eadbd3; color: var(--plum-dark); }
.passkey-row span { display: grid; min-width: 0; }
.passkey-row small { color: #7d6670; }
.setup-code { margin: 4px 0 8px; text-align: center; font: 700 1.5rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--plum-dark); }
/* Entrance tickets: the QR code large and on white, so the scanner at the gate reads it. */
.ticket-settings h3, .ticket-view h2 { display: flex; align-items: center; gap: 8px; }
.ticket-settings .row-link { margin-top: 12px; }
.ticket-image { margin: 12px 0; padding: 8px; border-radius: 12px; background: #fff; }
.ticket-image img { display: block; width: 100%; max-height: 66dvh; object-fit: contain; }
.ticket-missing { display: none; margin: 0; padding: 24px 12px; text-align: center; color: #76676c; }
.ticket-image.is-missing img { display: none; }
.ticket-image.is-missing .ticket-missing { display: block; }
.ticket-nav { justify-content: space-between; }
.ticket-view .link-btn { display: inline-block; margin-bottom: 8px; }
.scan-view { position: relative; margin: 12px 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #1d1018; }
.scan-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 16%; border: 3px solid #f3d49e; border-radius: 16px; box-shadow: 0 0 0 999px #0000004d; }
/* With the ticket next to the bell, the smallest phones need a little room for the whole word Skoltiezland. */
@media (max-width: 360px) { .header-inner { gap: 8px; } .header-actions { gap: 6px; } .header-inner .brand-wordmark { font-size: 1.2rem; } }