/* 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); }
.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; }

/* 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-minnie > span::before { content:'🎀'; position:absolute; top:-28px; left:50%; transform:translateX(-50%); font-size:17px; }
.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 { margin:0 0 14px; }
.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; }
.review-card { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:10px; padding:14px 0; border-bottom:1px solid #e9d8c7; }.review-card > div:first-child { display:grid; }.review-card small { color:#746368; }
.review-card .chips { grid-column:1 / -1; }.review-photo { grid-column:2; grid-row:1; width:90px; height:90px; padding:0; overflow:hidden; border:0; border-radius:10px; }.review-photo img { width:100%; height:100%; object-fit:cover; }
.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 -16px 12px; padding:2px 16px 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 - 300px); min-height:380px; 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; }
.map-pin.show { background:#8a5a9b; font-size:1rem; }
.map-pin.store { background:#a56f53; font-size:1rem; }
.map-pin.restaurant { background:#b0794a; font-size:1rem; }
.map-pin.plan { width:46px; height:30px; border-radius:10px; background:#542b3d; font-size:.74rem; }
.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; }
.person-pin { display:grid; justify-items:center; 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 { font-size:.66rem; }
.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:99px; 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-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%; width:180%; height:180%; pointer-events:none; overflow:visible; }
.av-back { z-index:0; }.av-front { z-index:2; }
.av-frame-plain .av-face { border-color:#e2bd78; }
.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; 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:anywhere; }
.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; }
.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: park plan or streets. */
.map-style { position:absolute; top:10px; left:10px; z-index:801; display:flex; padding:3px; border-radius:999px; 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; }
.map-style button[aria-pressed=true] { background:var(--plum); color:#fff9ef; }
.map-status { top:60px; }
.leaflet-container:has(.park-plan-image) { background:#cfe6ef; }
.park-plan-image { image-rendering:auto; }
@media (max-width:420px) { .map-style button { padding:4px 9px; font-size:.74rem; } .map-ctrl-right { top:60px; } }
.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; }
.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-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 { 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; } }

/* 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; } }
@media (pointer: coarse) { .map-zoom { display: none; } }
.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-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; }
.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 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; }
.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; }