:root {
  --cream: #f6f1e6;
  --cream-deep: #efe7d8;
  --paper: #fffdf6;
  --ink: #2b2a28;
  --muted: #6c6558;
  --blue: #2fabd4;
  --blue-strong: #0ea0d6;
  --navy: #3e6e9d;
  --sun: #ffd23f;
  --cat-meal: #f2514a;
  --cat-cafe: #a78c23;
  --cat-sweets: #456298;
  --sand: #eae0c9;
  --sand-print: #b49b6c;
  --sand-wet: #d3c6ab;
  --sand-mark-1: #c7b798;
  --line: rgba(43, 42, 40, 0.16);
  --radius: 16px;
  --bottom-bar-height: 86px;
  --font-heading: "Tsukushi A Round Gothic", "TsukushiAMaruGothic", "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --sand-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='m' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.06'/%3E%3Crect width='200' height='200' filter='url(%23m)' opacity='0.2'/%3E%3C/svg%3E");
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.01em;
}

body.is-locked {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

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

/* ---------- layout shell ---------- */

.site-shell {
  width: 100%;
  max-width: 640px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
  background-color: var(--cream);
  border-left: 1px solid rgba(62, 110, 157, 0.08);
  border-right: 1px solid rgba(62, 110, 157, 0.08);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding: 8px 16px;
  background: rgba(246, 241, 230, 0.94);
  border-bottom: 1px solid rgba(62, 110, 157, 0.2);
  backdrop-filter: blur(10px);
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.topbar__logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 2px 0;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(62, 110, 157, 0.5);
  text-underline-offset: 4px;
  white-space: nowrap;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.topbar__nav a:hover,
.topbar__nav a:active {
  color: var(--blue-strong);
  text-decoration-color: var(--blue-strong);
}

.topbar__nav a:focus-visible,
.button:focus-visible,
.tab:focus-visible,
.spot-card:focus-visible,
.floating-cta a:focus-visible,
.floating-cta button:focus-visible,
.chat-drawer__close:focus-visible,
.spot-modal__close:focus-visible,
.accordion summary:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* ---------- typography / section base ---------- */

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--ink);
}

h1 {
  margin-bottom: 12px;
  font-size: 1.7rem;
  line-height: 1.3;
  font-weight: 600;
}

h2 {
  margin-bottom: 10px;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 600;
}

h3 {
  margin-bottom: 6px;
  font-size: 1.04rem;
  line-height: 1.4;
}

p {
  color: var(--muted);
  line-height: 1.8;
}

/* section boundaries are articulated by alternating background tones
   (cream / cream-deep / sand) and the wave dividers — no border lines */
.section-band {
  position: relative;
  padding: 40px 18px;
}

.section-heading {
  margin-bottom: 18px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blue-strong);
  border-radius: 999px;
}

/* wavy hand-drawn divider */
.wave-edge {
  height: 20px;
  background-color: var(--wave-color, var(--cream));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 V20 H0 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 V20 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 60px 20px;
  mask-size: 60px 20px;
}

/* layered wave divider — used at select section boundaries
   .wave-divider sits directly in <main>/.site-shell, which have no
   horizontal padding, so it needs no bleed margin to reach full width.
   Its own background fills the gaps the wave masks cut away, so it
   should match the section above (override via --wave-bg when that
   section isn't --cream). */
.wave-divider {
  position: relative;
  height: 20px;
  background: var(--wave-bg, var(--cream));
}

.wave-divider .wave-edge {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* All layers share the same 60px tile width (the wave path's native
   period) so they stay phase-locked across the whole divider; only the
   mask-position offset (a clean fraction of 60px) varies per layer.
   Colors are solid (no alpha) so no layer or the background shows through. */
.wave-divider .wave-edge--back {
  top: 0;
  height: 20px;
  --wave-color: #c6e2ea;
  -webkit-mask-size: 60px 20px;
  mask-size: 60px 20px;
}

.wave-divider .wave-edge--front {
  top: 0;
  height: 20px;
  --wave-color: #96ccdf;
  -webkit-mask-position: 30px 0;
  mask-position: 30px 0;
  -webkit-mask-size: 60px 20px;
  mask-size: 60px 20px;
}

/* FAQ→CONTACT divider: the sand layer uses the SAME sine and phase as
   the front wave (mask-position 30px), just lower and slightly taller,
   so the blue reads as a constant-thickness ribbon whose bottom edge
   undulates in parallel with its top — no steps, no straight cut.
   --sand-wet matches .contact's gradient start color so the strip and
   the beach read as one continuous surface. */
/* Below y=12 every pixel is covered by the blue fills or the sand layer,
   so switching the strip's own background to wet sand there is invisible
   in normal rendering — it only ensures that subpixel gaps at the sand
   mask's bottom edge show sand, not a pale cream seam line. */
.wave-divider--shore {
  height: 32px;
  background: linear-gradient(to bottom, var(--wave-bg, var(--cream)) 12px, var(--sand-wet) 12px);
}

.wave-divider--shore .wave-edge--sand {
  top: 8px;
  height: 24px;
  --wave-color: var(--sand-wet);
  /* Same noise tile as .contact below. This span is 24px tall and its
     bottom edge sits exactly on .contact's top edge, so shifting the
     tile origin down 24px phase-aligns the pattern across the boundary
     (24 - 24 ≡ 0 mod the 200px tile) and the texture runs continuously
     up to the wavy waterline instead of starting with a visible cut. */
  background-image: var(--sand-noise);
  background-repeat: repeat;
  background-position: 0 24px;
  -webkit-mask-position: 30px 0;
  mask-position: 30px 0;
  -webkit-mask-size: 60px 24px;
  mask-size: 60px 24px;
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}

.button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-strong), var(--navy));
  border-color: var(--navy);
}

.button--wide {
  width: 100%;
}

[data-entry-link][data-entry-state="pending"] {
  color: #79736a;
  background: #e7e0d0;
  border-color: #d5cbb4;
}

[data-entry-link][aria-disabled="true"] {
  cursor: not-allowed;
}

[data-entry-link][aria-disabled="true"]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 0;
  border-bottom: 0;
  background-color: var(--cream);
}

.hero-image {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.hero-image__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ufo-float {
  animation: ufo-hover 3.6s ease-in-out infinite;
}

@keyframes ufo-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

.hero__actions {
  padding: 18px 18px 26px;
}

/* ---------- intro ---------- */

.intro {
  background-color: var(--cream);
}

.info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.info-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px dashed rgba(62, 110, 157, 0.4);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
}

.info-chip__label {
  padding: 2px 8px;
  color: #fff;
  background: var(--blue-strong);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* ---------- benefits ---------- */

.benefits {
  background-color: var(--cream-deep);
}

.benefit-cards {
  display: grid;
  gap: 16px;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 2px solid var(--line);
}

.benefit-card--1 {
  border-radius: 26px 10px 26px 10px;
}

.benefit-card--2 {
  border-radius: 10px 26px 10px 26px;
}

.benefit-card--3 {
  border-radius: 22px 22px 10px 22px;
  border-color: var(--sun);
}

.benefit-card__media {
  position: relative;
}

.benefit-card__image {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 8px;
  color: #9c9585;
  background: #e3dfd6;
  border: 1px dashed #c9c3b4;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.benefit-card__stamps {
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue-strong), var(--navy));
  border-radius: 50%;
  border: 3px solid #fff;
  line-height: 1;
}

.benefit-card--3 .benefit-card__stamps {
  background: linear-gradient(145deg, var(--sun), #f0a41f);
}

.benefit-card__stamps-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.benefit-card__stamps-count {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.benefit-card__stamps-count strong {
  font-family: var(--font-heading);
  font-size: 1.3rem;
}

.benefit-card__stamps-count small {
  font-size: 0.55rem;
  font-weight: 700;
}

.benefit-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 10px;
}

.benefit-card h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 2px;
  font-size: 1rem;
}

.benefit-card h3 small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.benefit-card__tag {
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.benefit-card__tag--first {
  color: #0a5c2e;
  background: #dff2e4;
}

.benefit-card__tag--lottery {
  color: #8a4b00;
  background: #ffedcf;
}

/* ---------- how / steps ---------- */

.how {
  background-color: var(--cream);
}

.how__ufo {
  position: absolute;
  top: 6px;
  right: 18px;
  width: 15%;
  min-width: 46px;
  max-width: 76px;
}

.steps {
  position: relative;
  display: grid;
  gap: 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 1px;
  background-image: linear-gradient(var(--navy) 60%, transparent 0%);
  background-size: 1px 10px;
  background-repeat: repeat-y;
  opacity: 0.4;
}

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
}

.step-index {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--blue-strong);
  border: 3px solid #fff;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
}

.steps p {
  margin: 0;
  font-size: 0.92rem;
}

.how-entry {
  display: grid;
  gap: 10px;
}

.how-entry small {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

/* ---------- spots ---------- */

.spots {
  background-color: var(--cream-deep);
}

.spots-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.spots-count strong {
  color: var(--navy);
  font-size: 1.15rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  color: var(--muted);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.tab.is-active {
  color: #fff;
  border-color: var(--tab-color, var(--blue-strong));
  background: var(--tab-color, var(--blue-strong));
}

.tab[data-category-tab="all"].is-active {
  --tab-color: var(--blue-strong);
}

.tab[data-category-tab="meal"].is-active {
  --tab-color: var(--cat-meal);
}

.tab[data-category-tab="cafe"].is-active {
  --tab-color: var(--cat-cafe);
}

.tab[data-category-tab="sweets"].is-active {
  --tab-color: var(--cat-sweets);
}

.spot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.spot-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 18px 18px 6px 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity 180ms ease, transform 180ms ease;
}

.spot-card:nth-child(3n + 2) {
  border-radius: 6px 18px 18px 18px;
}

.spot-card:nth-child(3n + 3) {
  border-radius: 18px 6px 18px 18px;
}

.spot-card:active {
  transform: scale(0.98);
}

.spot-card.is-hidden {
  display: none;
}

.spot-card__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e3dfd6;
}

.spot-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-card__category {
  justify-self: start;
  margin: 8px 0 0 8px;
  padding: 2px 9px;
  background: #fff;
  border: 2px solid var(--muted);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}

.spot-card__category[data-category="meal"] {
  color: var(--cat-meal);
  border-color: var(--cat-meal);
}

.spot-card__category[data-category="cafe"] {
  color: var(--cat-cafe);
  border-color: var(--cat-cafe);
}

.spot-card__category[data-category="sweets"] {
  color: var(--cat-sweets);
  border-color: var(--cat-sweets);
}

.spot-card__name {
  padding: 6px 10px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.spot-map {
  margin-top: 22px;
  padding: 16px;
  background: var(--paper);
  border: 1px dashed rgba(62, 110, 157, 0.4);
  border-radius: 18px;
}

.spot-map__embed iframe {
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.spot-map__pdf {
  display: inline-flex;
  margin-top: 12px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- faq ---------- */

.faq {
  background-color: var(--cream);
}

.accordion {
  margin-top: 12px;
  overflow: clip;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.accordion summary {
  position: relative;
  min-height: 52px;
  padding: 14px 42px 14px 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 3px solid var(--blue-strong);
  border-bottom: 3px solid var(--blue-strong);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 180ms ease;
}

.accordion[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.accordion__content {
  overflow: hidden;
}

.accordion p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 0.9rem;
}

/* ---------- contact / footer ---------- */

.contact {
  background-color: var(--sand);
  /* sand-noise stays on top so the texture reads through the wet->dry
     fade beneath it; the gradient softens the wave-divider's hard edge
     into the dry --sand tone over ~70px. */
  background-image: var(--sand-noise), linear-gradient(to bottom, var(--sand-wet), var(--sand) 70px);
  /* tuck 1px under the wave divider above: device-pixel rounding at the
     element boundary can otherwise leave a hairline seam; the overlap is
     invisible because both sides are the same wet-sand tone and the noise
     mottle is far coarser than 1px */
  margin-top: -1px;
}

/* thin wavy sand line separating contact from the sponsor credit —
   replaces the straight section border with a beach-toned contour */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--sand-mark-1);
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M0 3 Q15 0.6 30 3 T60 3' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M0 3 Q15 0.6 30 3 T60 3' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 60px 6px;
  mask-size: 60px 6px;
}

.contact-info {
  margin: 0 0 18px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.9;
}

.contact-info::first-line {
  color: var(--navy);
  font-size: 1.08em;
}

.contact-info a {
  color: var(--navy);
  text-decoration: none;
}

.contact-info small {
  color: var(--muted);
  font-weight: 500;
}

.chat-placeholder {
  padding: 0;
}

.chat-placeholder p {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.7;
}

.footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  background-color: var(--sand);
  background-image: var(--sand-noise);
  background-repeat: repeat;
  overflow: hidden;
}

.sand-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sand-decor__tracks {
  position: absolute;
  left: 14px;
  bottom: 6px;
  width: 46px;
  height: auto;
  color: var(--sand-print);
}

.sand-decor__bird {
  position: absolute;
  right: 18px;
  top: 12px;
  width: 32px;
  height: auto;
  color: rgba(47, 171, 212, 0.45);
}

.footer__sponsor {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.footer__sponsor-name {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- floating cta ---------- */

.floating-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 10px;
  width: min(100%, 640px);
  min-height: var(--bottom-bar-height);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 241, 230, 0.97);
  border-top: 1px solid rgba(62, 110, 157, 0.2);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.floating-cta a,
.floating-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.floating-cta__primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-strong), var(--navy));
  border: 2px solid var(--navy);
  text-align: center;
  line-height: 1.25;
}

.floating-cta button.floating-cta__secondary {
  width: 62px;
  height: 62px;
  min-height: 62px;
  padding: 8px;
  background: #fff;
  border: 3px solid var(--navy);
  border-radius: 50%;
}

.floating-cta__secondary img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- chat drawer ---------- */

.chat-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: end;
  justify-content: center;
  background: rgba(43, 42, 40, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.chat-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.chat-drawer__panel {
  position: relative;
  width: min(100%, 640px);
  max-height: min(78vh, 620px);
  padding: 26px 18px calc(24px + env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--cream);
  border: 4px solid #fff;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-drawer.is-open .chat-drawer__panel {
  transform: translateY(0);
}

.chat-drawer__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.chat-note {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ---------- spot detail modal ---------- */

.spot-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: end;
  justify-content: center;
  background: rgba(43, 42, 40, 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.spot-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.spot-modal__panel {
  position: relative;
  width: min(100%, 640px);
  max-height: min(84vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--paper);
  border: 4px solid #fff;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.spot-modal.is-open .spot-modal__panel {
  transform: translateY(var(--spot-modal-drag-y, 0));
}

.spot-modal__panel.is-dragging {
  transition: none;
  cursor: grabbing;
}

.spot-modal__handle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 28px;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
}

.spot-modal__handle::before {
  content: "";
  width: 52px;
  height: 5px;
  background: rgba(43, 42, 40, 0.24);
  border-radius: 999px;
}

.spot-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(43, 42, 40, 0.68);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.spot-modal__panel h2 {
  padding-right: 42px;
}

.spot-detail-visual {
  height: min(38vh, 240px);
  overflow: hidden;
  background: #e3dfd6;
}

.spot-detail-visual[hidden] {
  display: none;
}

.spot-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-modal__content {
  padding: 54px 18px calc(24px + env(safe-area-inset-bottom));
}

.spot-detail-visual:not([hidden]) ~ .spot-modal__content {
  padding-top: 22px;
}

.spot-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.spot-detail-meta__category {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  background: #fff;
  border: 2px solid var(--muted);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.spot-detail-meta__category[data-category="meal"] {
  color: var(--cat-meal);
  border-color: var(--cat-meal);
}

.spot-detail-meta__category[data-category="cafe"] {
  color: var(--cat-cafe);
  border-color: var(--cat-cafe);
}

.spot-detail-meta__category[data-category="sweets"] {
  color: var(--cat-sweets);
  border-color: var(--cat-sweets);
}

#spotDetailLead {
  white-space: pre-line;
}

.spot-detail-extra {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px dashed var(--line);
}

.spot-detail-info {
  display: grid;
  gap: 11px;
  margin: 0;
}

.spot-detail-info div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.spot-detail-info dt {
  color: var(--muted);
  font-weight: 700;
}

.spot-detail-info dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.spot-detail-info a {
  color: var(--navy);
  text-decoration: none;
}

.spot-detail-social-link {
  color: var(--navy);
  font-weight: 700;
}

.spot-detail-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-strong), var(--navy));
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-bar-height) + 14px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(calc(100% - 28px), 480px);
  padding: 12px 16px;
  color: #fff;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- responsive ---------- */

@media (max-width: 370px) {
  h2 {
    font-size: 1.4rem;
  }

  .spot-grid {
    gap: 10px;
  }
}

@media (min-width: 640px) {
  .spot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .ufo-float {
    animation: none;
  }
}