/* Craftfiti BKK — customer site. Pixel spec = docs/design/*.dc.html at 390px width.
   Every value below is copied from the design's inline styles. Do not "improve" values:
   tests/ui/fidelity.spec.json checks them against getComputedStyle. */

:root {
  --ink: #15110D;
  --ink-2: #1E1812;
  --ink-3: #0E0B08;
  --paper: #EDE8DD;
  --cream: #F6F2EA;
  --bar: #EEECE7;
  --yellow: #F5D547;
  --gold: #C9A83A;
  --red: #A3232B;
  --hilite: #F1E2A0;
  --muted: #CFC6B6;
  --line: #3A3128;
  --green: #2F6B3A;
}

html { background: var(--ink-3); font-variant-numeric: lining-nums; } /* owner 11 Oct: digits sit on one line (Playfair's old-style numerals looked staggered) */
body { margin: 0; background: var(--ink-3); }
[hidden] { display: none !important; }

/* ---- page column: 390px design, centred max 480px on wider screens ---- */
.page {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font-family: 'Poppins', 'Prompt', sans-serif;
  overflow: hidden;
  position: relative;
}
.page--home { background: var(--ink); }
.page--event { background: #000; }
.page--book { background: var(--paper); color: var(--ink); }
.page--promo { background: var(--ink-2); }
.page--done { background: var(--paper); color: var(--ink); }

/* default link colours (design: a{color} + a:hover{color}); :where() keeps specificity 0
   so class colours win exactly like the design's inline styles did */
:where(.page--home a) { color: var(--yellow); }
:where(.page--home a:hover) { color: #FFE680; }
:where(.page--event a) { color: var(--yellow); }
:where(.page--event a:hover) { color: #FFE680; }
:where(.page--promo a) { color: var(--yellow); }
:where(.page--promo a:hover) { color: #FFE680; }
:where(.page--book a) { color: var(--ink); }
:where(.page--book a:hover) { color: var(--red); }
:where(.page--done a) { color: var(--ink); }
:where(.page--done a:hover) { color: var(--red); }

/* ---- keyframes: home (verbatim) ---- */
@keyframes cf-wobble { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(-3deg) translateY(-2px) } }
@keyframes cf-nudge { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(4px) } }
@keyframes cf-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes cf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 213, 71, 0.55) } 60% { box-shadow: 0 0 0 9px rgba(245, 213, 71, 0) } }
@keyframes cf-sway { 0%, 100% { transform: rotate(2deg) } 50% { transform: rotate(-2deg) } }
@keyframes cf-bob { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-3px) rotate(-6deg) } }
@keyframes cf-drift { 0%, 100% { transform: rotate(9deg) translateX(0) } 50% { transform: rotate(7deg) translateX(-8px) } }
@keyframes cf-zoom { from { transform: scale(1.08) } to { transform: scale(1) } }
@keyframes cf-draw { from { stroke-dashoffset: 220 } to { stroke-dashoffset: 0 } }
.page--home .cf-wobble { animation: cf-wobble 3.2s ease-in-out infinite }
.page--home .cf-nudge { animation: cf-nudge 1.6s ease-in-out infinite }
.page--home .cf-rise { animation: cf-rise .7s cubic-bezier(.2, .7, .2, 1) both }
.page--home .cf-rise-2 { animation: cf-rise .7s .15s cubic-bezier(.2, .7, .2, 1) both }
.page--home .cf-rise-3 { animation: cf-rise .7s .3s cubic-bezier(.2, .7, .2, 1) both }
.page--home .cf-pulse { animation: cf-pulse 2.4s ease-out infinite }
.page--home .cf-sway { animation: cf-sway 4s ease-in-out infinite }
.page--home .cf-bob { animation: cf-bob 2.6s ease-in-out infinite }
.page--home .cf-drift { animation: cf-drift 7s ease-in-out infinite }
.page--home .cf-zoom { animation: cf-zoom 2.4s cubic-bezier(.2, .7, .2, 1) both }
.page--home .cf-draw { stroke-dasharray: 220; animation: cf-draw 1.2s .4s ease-out both }
.page--home .cf-press, .page--event .cf-press, .page--promo .cf-press { transition: transform .12s ease }
.page--home .cf-press:active, .page--event .cf-press:active, .page--promo .cf-press:active { transform: scale(0.96) }

/* ---- keyframes: event page (design has different values under the same names) ---- */
@keyframes cfe-wobble { 0%, 100% { transform: rotate(6deg) } 50% { transform: rotate(2deg) translateY(-3px) } }
@keyframes cfe-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes cfe-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 58, 0.6) } 60% { box-shadow: 0 0 0 12px rgba(201, 168, 58, 0) } }
@keyframes cfe-zoom { from { transform: scale(1.1) } to { transform: scale(1) } }
@keyframes cfe-pop { 0% { opacity: 0; transform: scale(.85) } 70% { transform: scale(1.04) } 100% { opacity: 1; transform: none } }
.page--event .cf-wobble { animation: cfe-wobble 3s ease-in-out infinite }
.page--event .cf-rise { animation: cfe-rise .7s .1s cubic-bezier(.2, .7, .2, 1) both }
.page--event .cf-pulse { animation: cfe-pulse 2.2s ease-out infinite }
.page--event .cf-zoom { animation: cfe-zoom 2.4s cubic-bezier(.2, .7, .2, 1) both }
.page--event .cf-pop-1 { animation: cfe-pop .5s .35s both }
.page--event .cf-pop-2 { animation: cfe-pop .5s .5s both }
.page--event .cf-pop-3 { animation: cfe-pop .5s .65s both }

/* ---- keyframes: booking page ---- */
@keyframes cfb-wobble { 0%, 100% { transform: rotate(8deg) } 50% { transform: rotate(4deg) translateY(-2px) } }
@keyframes cfb-wiggle { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(1deg) } }
@keyframes cfb-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes cfb-pop { 0% { transform: scale(1) } 40% { transform: scale(1.08) } 100% { transform: scale(1) } }
.page--book .cf-wobble { animation: cfb-wobble 3s ease-in-out infinite }
.page--book .cf-wiggle { animation: cfb-wiggle 2.6s ease-in-out infinite }
.page--book .cf-rise-1 { animation: cfb-rise .6s .05s cubic-bezier(.2, .7, .2, 1) both }
.page--book .cf-rise-2 { animation: cfb-rise .6s .15s cubic-bezier(.2, .7, .2, 1) both }
.page--book .cf-rise-3 { animation: cfb-rise .6s .25s cubic-bezier(.2, .7, .2, 1) both }
.page--book .cf-rise-4 { animation: cfb-rise .6s .35s cubic-bezier(.2, .7, .2, 1) both }
.page--book .cf-pop { animation: cfb-pop .3s ease-out }
.page--book .cf-press { transition: transform .12s ease, background-color .15s ease, color .15s ease }
.page--book .cf-press:active { transform: scale(0.95) }
.page--book .cf-field { transition: border-color .15s ease, box-shadow .15s ease }
.page--book .cf-field:focus { outline: none; box-shadow: 0 0 0 3px var(--yellow) }
.page--book input::placeholder { color: #8A8173 }

/* ---- keyframes: promotion page (verbatim; names are unique so they are not scoped) ---- */
@keyframes cfp-rise { from { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)) } to { opacity: 1; transform: rotate(var(--r, 0deg)) } }
@keyframes cfp-wobble { 0%, 100% { transform: rotate(8deg) } 50% { transform: rotate(4deg) translateY(-2px) } }
@keyframes cfp-stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-12deg) } 70% { opacity: 1; transform: scale(.95) rotate(-12deg) } 100% { transform: scale(1) rotate(-12deg) } }
@keyframes cfp-sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
.cfp-rise-1 { animation: cfp-rise .6s .05s cubic-bezier(.2, .7, .2, 1) both }
.cfp-rise-2 { animation: cfp-rise .6s .15s cubic-bezier(.2, .7, .2, 1) both }
.cfp-rise-3 { animation: cfp-rise .6s .25s cubic-bezier(.2, .7, .2, 1) both }
.cfp-rise-4 { animation: cfp-rise .6s .35s cubic-bezier(.2, .7, .2, 1) both }
.cfp-rise-5 { animation: cfp-rise .6s .45s cubic-bezier(.2, .7, .2, 1) both }
.cfp-wobble { animation: cfp-wobble 3s ease-in-out infinite }
.cfp-stamp { animation: cfp-stamp .5s .6s cubic-bezier(.2, .7, .2, 1) both }
.cfp-sway { animation: cfp-sway 4s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
  .page .cf-wobble, .page .cf-nudge, .page .cf-rise, .page .cf-rise-1, .page .cf-rise-2, .page .cf-rise-3,
  .page .cf-rise-4, .page .cf-pulse, .page .cf-sway, .page .cf-bob, .page .cf-drift, .page .cf-zoom,
  .page .cf-draw, .page .cf-wiggle, .page .cf-pop, .page .cf-pop-1, .page .cf-pop-2, .page .cf-pop-3,
  .page .cfp-rise-1, .page .cfp-rise-2, .page .cfp-rise-3, .page .cfp-rise-4, .page .cfp-rise-5, .page .cfp-wobble,
  .page .cfp-stamp, .page .cfp-sway, .page .cfd-stamp, .page .cfd-rise-1, .page .cfd-rise-2, .page .cfd-wobble { animation: none }
}

/* =====================================================================
   HOME  (Main.dc.html)
   ===================================================================== */

/* top bar */
.top {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--bar); border-bottom: 1px solid #DCD6CB;
}
.top__logo { height: 30px; width: auto; display: block; }
.pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--yellow); font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-decoration: none;
}

/* 1 hero */
.hero { position: relative; flex-shrink: 0; background: var(--bar); }
.hero__stage { position: relative; }
.hero__img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.hero__img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero__sticker {
  position: absolute; left: 14px; top: 76.9231%; transform: rotate(-7deg); background: var(--yellow);
  color: var(--ink); font-family: 'Permanent Marker', cursive; font-size: 15px; padding: 4px 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hero__btns { display: flex; gap: 10px; padding: 4px 16px 22px; }
.btn-main, .btn-ghost {
  flex: 1; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  font-size: 14px; letter-spacing: 2px; text-decoration: none;
}
.btn-main { background: var(--ink); color: var(--yellow); font-weight: 700; }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); font-weight: 600; box-sizing: border-box; }

/* 2 upcoming */
.upc { position: relative; flex-shrink: 0; padding: 40px 16px 36px; background: var(--ink); }
.upc__cheers {
  position: absolute; right: -6px; top: 18px; transform: rotate(9deg); font-family: 'Permanent Marker', cursive;
  font-size: 44px; color: var(--cream); opacity: 0.07; letter-spacing: 2px;
}
.h2-yellow { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 2px; color: var(--yellow); }
.squiggle { display: block; margin: 4px 0 22px; }
.upc__list { display: flex; flex-direction: column; gap: 14px; }
.upc__empty { font-size: 14px; font-weight: 300; color: var(--muted); }
.ev-card {
  display: flex; align-items: stretch; min-height: 86px; border: 2px solid rgba(246, 242, 234, 0.85);
  border-radius: 22px; background: rgba(0, 0, 0, 0.35); text-decoration: none; color: var(--cream); overflow: hidden;
}
.ev-card__date {
  width: 92px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 2px solid rgba(246, 242, 234, 0.85); line-height: 1.05;
}
.ev-card__day { font-size: 30px; font-weight: 800; }
.ev-card__mon { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.ev-card__body {
  flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; gap: 4px; min-width: 0;
}
.ev-card__title { font-size: 17px; font-weight: 500; letter-spacing: 1.5px; line-height: 1.25; white-space: pre-line; }
.ev-card__when { font-size: 12px; font-weight: 300; color: var(--muted); }
.ev-card__chev { width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* 3 calendar */
.cal { position: relative; flex-shrink: 0; padding: 26px 16px 40px; background: var(--ink-2); }
.cal__head { text-align: center; }
.cal__join { font-size: 17px; letter-spacing: 3px; font-weight: 400; color: var(--cream); }
.cal__h2 { margin: 2px 0 0; font-size: 38px; font-weight: 500; letter-spacing: 3px; color: var(--cream); }
.cal__hint { font-size: 13px; color: var(--muted); margin-top: 6px; letter-spacing: 0.5px; }
.cal__wrap { position: relative; margin-top: 26px; transform: rotate(-0.8deg); }
.cal__tape {
  position: absolute; left: 50%; top: -12px; width: 110px; height: 26px; margin-left: -55px;
  background: rgba(241, 226, 160, 0.85); transform: rotate(2deg); z-index: 2;
}
.cal__paper {
  background: var(--paper); color: var(--ink); padding: 22px 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.cal__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cal__btn:disabled { opacity: 0.3; cursor: default; }
.cal__title {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between;
  font-family: 'Playfair Display', serif; font-weight: 900;
}
.cal__month { font-size: 24px; letter-spacing: 0.5px; }
.cal__year { font-size: 24px; }
.cal__dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px;
  font-family: 'Playfair Display', serif; font-size: 10px; font-weight: 800; text-align: center; letter-spacing: 0.5px;
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 8px;
  border-top: 1.5px solid var(--line); border-left: 1.5px solid var(--line);
}
.cell {
  -webkit-appearance: none; appearance: none; margin: 0; border: 0; font: inherit; text-align: left; /* a <button class="cell"> (book page) looks like the <a>/<div> cell */
  box-sizing: border-box; height: 62px; padding: 4px; border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line); position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink); overflow: hidden; background: var(--paper);
}
button.cell { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.cell--event { background: var(--hilite); }
.cell__num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 13px; line-height: 1; }
.cell--muted .cell__num { color: #B5AC9C; }
.cell__num--today {
  background: var(--ink); color: var(--yellow); border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; margin: -2px 0 0 -2px;
}
.cell__ev {
  font-family: 'Poppins', sans-serif; font-size: 7px; font-weight: 700; line-height: 1.15; color: var(--red);
  white-space: pre-line; margin-top: 2px;
}
.cell__img {
  position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 0;
}
.cell__closed {
  margin-top: auto; align-self: center; font-family: 'Poppins', sans-serif; font-size: 7px; font-weight: 800;
  letter-spacing: 0.5px; color: var(--red); border: 1.5px solid var(--red); padding: 1px 3px;
  transform: rotate(-9deg); margin-bottom: 6px;
}
.cell__full {
  margin-top: auto; align-self: center; font-family: 'Poppins', sans-serif; font-size: 8px; font-weight: 800;
  letter-spacing: 1px; color: var(--ink); border: 1.5px solid var(--ink); padding: 1px 4px;
  transform: rotate(-9deg); margin-bottom: 6px;
}
.cal__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11px; color: var(--line); }
.cal__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal__swatch { width: 12px; height: 12px; border: 1px solid var(--line); }
.cal__swatch--event { background: var(--hilite); }
.cal__swatch--open { background: var(--paper); }
.cal__swatch-closed {
  font-size: 8px; font-weight: 800; color: var(--red); border: 1.5px solid var(--red); padding: 0 3px;
}
.cal__swatch-full {
  font-size: 8px; font-weight: 800; letter-spacing: 1px; color: var(--ink); border: 1.5px solid var(--ink); padding: 0 4px;
}
.cal__hours { text-align: center; margin-top: 28px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.cal__open { font-size: 15px; letter-spacing: 2px; color: var(--yellow); font-weight: 500; }
.cal__hours-text { font-size: 18px; letter-spacing: 2px; font-weight: 500; }

/* 4 tiles */
.tiles { flex-shrink: 0; padding: 40px 16px; background: var(--ink); }
.tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; display: block; height: 172px; border: 2.5px solid var(--cream); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--cream); background: #2A221A;
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__shade { position: absolute; inset: 0; background: rgba(21, 17, 13, 0.62); }
.tile__shade--light { background: rgba(21, 17, 13, 0.42); }
.tile__shade:not(.tile__shade--light) + .tile__text { text-shadow: 0 1px 8px rgba(21, 17, 13, 0.85); }
.tile__text {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex;
  flex-direction: column; align-items: center; gap: 2px;
}
.tile__label { font-size: 19px; font-weight: 600; letter-spacing: 2.5px; }
.tile__sub { font-size: 12px; font-weight: 400; color: var(--yellow); }

/* 5 contact */
.contact {
  flex: 1; display: flex; flex-direction: column; padding: 46px 28px 30px; background: var(--ink-3);
  border-top: 1px solid #2A221A;
}
.contact__logo { width: 220px; height: auto; display: block; margin: 0 auto 36px; }
.contact__h2 { margin: 0 0 18px; font-size: 32px; font-weight: 500; letter-spacing: 3px; color: var(--yellow); }
.contact__name { font-size: 17px; letter-spacing: 1.5px; font-weight: 500; }
.contact__tel {
  margin-top: 14px; font-size: 22px; letter-spacing: 2px; font-weight: 500; color: var(--cream); text-decoration: none;
}
.contact__row { display: flex; gap: 14px; margin-top: 26px; }
.contact__icon {
  width: 56px; height: 56px; border-radius: 16px; border: 2px solid var(--cream); display: flex;
  align-items: center; justify-content: center; color: var(--cream);
}
.contact__dir {
  flex: 1; height: 56px; border-radius: 16px; background: var(--yellow); color: var(--ink); display: flex;
  align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; text-decoration: none;
}
.contact__slogan {
  margin-top: auto; padding-top: 40px; font-size: 11px; color: #8A8173; text-align: center;
}

/* =====================================================================
   EVENT  (Event.dc.html)
   ===================================================================== */
.ev-hero { position: relative; flex-shrink: 0; }
.ev-hero__img { width: 100%; aspect-ratio: 390 / 359; overflow: hidden; }
.ev-hero__img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ev-back {
  position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center;
}
.ev-free {
  position: absolute; right: 12px; bottom: -16px; transform: rotate(6deg); background: var(--yellow); color: #000;
  font-family: 'Permanent Marker', cursive; font-size: 16px; padding: 4px 12px; box-shadow: 3px 3px 0 var(--cream);
}
.ev-when { display: flex; align-items: center; justify-content: space-between; padding: 30px 20px 6px; }
.ev-when__item { display: flex; align-items: center; gap: 12px; }
.ev-when__txt { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.ev-when__div { width: 2px; height: 40px; background: var(--cream); }
.ev-main { padding: 24px 20px 0; }
.ev-main__h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.ev-main__p { margin: 6px 0 0; font-size: 17px; font-weight: 300; line-height: 1.55; white-space: pre-line; }
.ev-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 28px 20px 0; }
.ev-hl[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-hl[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.ev-hl__box {
  height: 108px; border: 2.5px solid var(--cream); border-radius: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.ev-hl__label { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--yellow); }
.ev-foot { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 30px; }
.ev-book {
  width: 240px; height: 64px; border-radius: 22px; background: var(--gold); border: 3px solid #E9E2CF; color: #000;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; letter-spacing: 3px;
  text-decoration: none; box-sizing: border-box;
}
.ev-book--sm { font-size: 18px; letter-spacing: 2px; }
.ev-more {
  margin-top: auto; min-height: 44px; display: flex; align-items: center; font-size: 13px; letter-spacing: 2px;
  color: var(--muted);
}
.ev-missing { padding: 40px 20px 0; }

/* =====================================================================
   BOOKING  (Booking.dc.html)
   ===================================================================== */
.top--book { padding: 0 12px; }
.top--book .top__logo { height: 28px; }
.top__back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.top__spacer { width: 44px; }
.book { flex: 1; display: flex; flex-direction: column; padding: 26px 18px 30px; gap: 22px; }
.book__head { position: relative; }
.book-top { padding: 26px 18px 0; } /* R2B: the page title now sits above the calendar, outside the form (.book keeps its own padding) */
.book__h1 {
  margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 34px; letter-spacing: 0.5px;
  line-height: 1.05;
}
.book__see {
  position: absolute; right: 4px; top: -6px; transform: rotate(8deg); font-family: 'Permanent Marker', cursive;
  font-size: 17px; color: var(--red);
}
.book__sub { font-size: 14px; margin-top: 6px; color: var(--line); }
.chip-ev {
  display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--ink); color: var(--cream);
  border-radius: 16px;
}
.chip-ev__img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.chip-ev__body { flex: 1; min-width: 0; }
.chip-ev__kicker { font-size: 11px; color: var(--yellow); letter-spacing: 1.5px; }
.chip-ev__title { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
.chip-ev__when { font-size: 12px; color: var(--muted); }
.book__grp { display: flex; flex-direction: column; gap: 22px; }
.book__grp--14 { gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.field__err { font-size: 12px; font-weight: 500; color: var(--red); font-family: 'Poppins', 'Prompt', sans-serif; }
.datebox {
  display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 6px 0 14px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--cream);
}
.datebox__text { font-size: 16px; font-weight: 500; }
.datebox__change { height: 40px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; }
.stepper {
  display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--cream);
}
.stepper__btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--ink); color: var(--yellow);
  font-size: 22px; font-weight: 700; cursor: pointer;
}
.stepper__val { font-size: 20px; font-weight: 700; }
.times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chip {
  height: 46px; border-radius: 12px; border: 2px solid var(--ink); font-family: Poppins, sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; background: var(--cream); color: var(--ink); padding: 0;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.input {
  height: 52px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--cream);
  font-family: 'Poppins', 'Prompt', sans-serif; font-size: 16px; color: var(--ink); box-sizing: border-box;
}
.sop {
  position: relative; padding: 24px 16px 18px; background: var(--hilite); border: 2px dashed var(--ink);
  border-radius: 4px; transform: rotate(-0.6deg);
}
.sop__sticker {
  position: absolute; left: 14px; top: -14px; background: var(--red); color: var(--cream);
  font-family: 'Permanent Marker', cursive; font-size: 15px; padding: 2px 10px; transform: rotate(-3deg);
}
.sop__h { font-family: 'Prompt', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.sop__list {
  margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-family: 'Prompt', sans-serif;
  font-size: 14px; line-height: 1.6;
}
.banner {
  padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--hilite);
  font-size: 14px; font-weight: 500; line-height: 1.5;
}
.submit {
  height: 60px; border-radius: 18px; border: none; background: var(--ink); color: var(--yellow);
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; cursor: pointer;
}
.submit:disabled { opacity: 0.6; cursor: default; }
.book__hold { font-size: 13px; font-weight: 500; color: var(--line); margin-top: 2px; }
.submit__hint { text-align: center; font-size: 12px; color: var(--line); margin-top: -10px; }

/* narrow phones (< 390px, below the design width): keep the "see you!" sticker clear of the h1 */
@media (max-width: 380px) {
  .book__see { top: -20px; }
}

/* =====================================================================
   PROMOTION  (Promotion.dc.html)
   ===================================================================== */
.promo-head { position: relative; padding: 30px 16px 8px; }
.promo-head__h1 {
  margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 38px; letter-spacing: 0.5px;
  line-height: 1; color: var(--cream);
}
.promo-head__cheers {
  position: absolute; right: 18px; top: 22px; transform: rotate(8deg); font-family: 'Permanent Marker', cursive;
  font-size: 19px; color: var(--yellow);
}
.promo-head__squiggle { display: block; margin-top: 8px; }
.promo-list { display: flex; flex-direction: column; gap: 22px; padding: 18px 16px 10px; }
.promo-empty { text-align: center; font-size: 14px; color: var(--muted); letter-spacing: 0.5px; padding: 20px 0; }
.promo {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px 22px;
  background: var(--paper); color: var(--ink); border-radius: 2px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r, 0deg));
}
.promo__tape {
  position: absolute; left: 50%; top: -10px; width: 74px; height: 20px; margin-left: -37px;
  background: rgba(241, 226, 160, 0.85);
}
.promo__img {
  width: 104px; height: 128px; flex-shrink: 0; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px;
}
.promo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.promo__no { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--red); }
.promo__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 1px; line-height: 1.15; color: var(--ink); }
.promo__detail {
  margin: 0; font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55;
  color: var(--line); white-space: pre-line;
}
.promo__when {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px;
  border-radius: 999px; background: var(--ink); color: var(--yellow);
}
.promo__stamp {
  position: absolute; right: -6px; bottom: -12px; transform: rotate(-12deg); background: var(--yellow);
  color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800;
  font-size: 17px; letter-spacing: 0.5px; padding: 3px 10px; white-space: nowrap;
}
.promo-foot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 16px 30px;
}
.promo-foot__note { font-size: 13px; color: var(--muted); letter-spacing: 0.5px; }
.promo-foot__book {
  width: 100%; height: 56px; border-radius: 16px; background: var(--yellow); color: var(--ink); display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: 2px;
  text-decoration: none;
}

/* =====================================================================
   BOOKING CONFIRMED  (BookingDone.dc.html)
   ===================================================================== */
@keyframes cfd-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-8deg) } 70% { opacity: 1; transform: scale(.94) rotate(-8deg) } 100% { transform: scale(1) rotate(-8deg) } }
@keyframes cfd-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
/* same as cfd-rise but ends on the tilt the design gives the note box (the design's own keyframe would drop the tilt) */
@keyframes cfd-rise-tilt { from { opacity: 0; transform: translateY(16px) rotate(-0.5deg) } to { opacity: 1; transform: rotate(-0.5deg) } }
@keyframes cfd-wobble { 0%, 100% { transform: rotate(6deg) } 50% { transform: rotate(2deg) translateY(-2px) } }
.page--done .cfd-stamp { animation: cfd-stamp .55s .1s cubic-bezier(.2, .7, .2, 1) both }
.page--done .cfd-rise-1 { animation: cfd-rise .6s .45s cubic-bezier(.2, .7, .2, 1) both }
.page--done .cfd-rise-2 { animation: cfd-rise-tilt .6s .6s cubic-bezier(.2, .7, .2, 1) both }
.page--done .cfd-wobble { animation: cfd-wobble 3s ease-in-out infinite }
.page--done .cf-press { transition: transform .12s ease }
.page--done .cf-press:active { transform: scale(0.96) }

.top--done { justify-content: center; padding: 0 12px; }
.top--done .top__logo { height: 28px; }
.done { flex: 1; display: flex; flex-direction: column; padding: 34px 18px 30px; gap: 22px; }
.done__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.done__stamp {
  display: inline-block; transform: rotate(-8deg); border: 4px solid var(--green); color: var(--green);
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 38px; letter-spacing: 1px; line-height: 1;
  padding: 10px 16px 8px;
}
.done__see {
  position: absolute; right: 6px; top: -18px; transform: rotate(6deg); font-family: 'Permanent Marker', cursive;
  font-size: 17px; color: var(--red);
}
.done__lead { font-size: 15px; line-height: 1.5; color: var(--line); max-width: 300px; }
.ticket {
  position: relative; padding: 22px 16px 16px; background: var(--cream); border: 2px solid var(--ink);
  border-radius: 16px; display: flex; flex-direction: column; gap: 12px;
}
.ticket__badge {
  position: absolute; left: 14px; top: -13px; background: var(--ink); color: var(--yellow); font-size: 11px;
  font-weight: 700; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 999px;
}
.ticket__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ticket__k { color: #5A5146; }
.ticket__v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ticket__dash { height: 0; border-top: 1.5px dashed var(--ink); margin: 2px 0; }
.ticket__hold { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.help {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--hilite); border-radius: 4px;
  transform: rotate(-0.5deg);
}
.help__h { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.help__t { font-size: 13px; line-height: 1.5; color: var(--line); }
.help__call {
  height: 50px; border-radius: 14px; background: var(--ink); color: var(--yellow); display: flex; align-items: center;
  justify-content: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none;
}
.done__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.done__home { min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 2px; }


/* =====================================================================
   PHASE 6A  (owner's first trial, 9 Oct) - additions only; nothing above this line was changed
   ===================================================================== */

/* ---- home: BOOK buttons scroll to the calendar; keep its title clear of the screen edge ---- */
#book-calendar { scroll-margin-top: 8px; }
#book-calendar-head:focus { outline: none; }

/* ---- home: UPCOMING EVENT card shows the event's artwork as a circle on the right ---- */
.ev-card__art {
  width: 52px; height: 52px; flex-shrink: 0; align-self: center; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(246, 242, 234, 0.85); margin-right: 2px;
}
.ev-card__title { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .ev-card__art { width: 44px; height: 44px; }
}

/* ---- home: event days of the calendar (long-press preview) ---- */
.cell--hasev {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cell--hasev img { pointer-events: none; -webkit-user-drag: none; }
.cell--pressed { outline: 2px solid var(--red); outline-offset: -2px; }
.cell--hasev:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.evpv {
  position: fixed; z-index: 90; box-sizing: border-box; display: flex; gap: 12px; align-items: center; padding: 12px;
  background: var(--ink); color: var(--cream); border: 2px solid var(--yellow); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); pointer-events: none; font-family: 'Poppins', 'Prompt', sans-serif;
}
.evpv__img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--cream); }
.evpv__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evpv__title { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.25; overflow-wrap: anywhere; }
.evpv__date { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--yellow); }
.evpv__when { font-size: 11px; font-weight: 300; color: var(--muted); letter-spacing: 0.3px; }
.evpv__desc { margin-top: 4px; font-family: 'Prompt', sans-serif; font-size: 12px; line-height: 1.45; color: var(--cream); overflow-wrap: anywhere; }

/* ---- event page: loader until the event is drawn ---- */
.ev-loading { padding: 40px 20px; font-size: 14px; letter-spacing: 1px; color: var(--muted); }

/* ---- bottom sheet (booking page: event details, review step) ---- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(14, 11, 8, 0.62); opacity: 0; transition: opacity 0.2s ease; }
.sheet__panel {
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; display: flex;
  flex-direction: column; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: 'Poppins', 'Prompt', sans-serif;
}
.sheet--in .sheet__backdrop { opacity: 1; }
.sheet--in .sheet__panel { transform: none; }
.sheet__panel:focus { outline: none; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet__close {
  position: absolute; top: 10px; right: 10px; z-index: 5; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sheet__close:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sheet--event .sheet__panel { background: #000; color: var(--cream); }
.sheet--event .ev-foot { padding: 30px 20px 34px; }
.sheet .ev-book--sm { width: auto; min-width: 240px; padding: 0 22px; cursor: pointer; font-family: 'Poppins', sans-serif; }
.sheet--menu .sheet__panel { height: 96vh; height: 96dvh; max-height: none; background: var(--ink); }
.sheet--menu .sheet__body { display: flex; overflow: hidden; }
.menu-sheet { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.menu-sheet__bar {
  flex-shrink: 0; height: 64px; display: flex; align-items: center; padding: 0 20px; color: var(--yellow); font-weight: 600;
  font-size: 16px; letter-spacing: 3px;
}
.menu-sheet__stage { position: relative; flex: 1; min-height: 0; background: var(--paper); }
.menu-sheet__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 14px; letter-spacing: 1px; }
.menu-sheet__frame { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .sheet__backdrop, .sheet__panel { transition: none; }
}

/* ---- booking page: the event chip opens the details ---- */
button.chip-ev { width: 100%; border: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.chip-ev:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.chip-ev__go { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--yellow); }

/* ---- booking page: house rules - emphasised lines are DATA (site.json sop: {text, strong}) ---- */
.sop__mark {
  font-weight: 700; padding: 0 2px; border-radius: 2px; background: linear-gradient(transparent 48%, rgba(245, 213, 71, 0.95) 48%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---- the "we'll hold your table until ..." flag (booking page, review step) ---- */
.hold-flag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--yellow); color: var(--ink);
  font-size: 14px; font-weight: 800; letter-spacing: 0.2px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink);
}
.hold-flag svg { flex-shrink: 0; }

/* ---- review step (bottom sheet before sending) ---- */
.rv { padding: 26px 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.rv__kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--red); }
.rv__h:focus { outline: none; }
.rv__h { margin: 2px 52px 0 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; line-height: 1.1; }
.rv__sub { margin: 0; font-size: 13px; color: var(--line); }
.rv__list { margin: 0; padding: 14px 14px 10px; background: var(--cream); border: 2px solid var(--ink); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.rv__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rv__row dt { margin: 0; color: #5A5146; flex-shrink: 0; }
.rv__row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.rv__hold { display: flex; }
.rv__confirm, .rv__edit {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 60px;
  border-radius: 18px; font-family: 'Poppins', 'Prompt', sans-serif; cursor: pointer; padding: 8px 12px; box-sizing: border-box;
}
.rv__confirm { border: none; background: var(--ink); color: var(--yellow); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.rv__confirm small { font-size: 11px; font-weight: 600; letter-spacing: 2px; opacity: 0.85; }
.rv__confirm:disabled { opacity: 0.6; cursor: default; }
.rv__edit { border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; min-height: 52px; }
.rv__edit small { font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.rv__edit:disabled { opacity: 0.5; cursor: default; }
.rv .banner { margin: 0; }

/* ---- booking ticket / confirmation ---- */
.done__loading { padding: 40px 18px; font-size: 14px; letter-spacing: 1px; color: var(--line); text-align: center; }
.codebox {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 16px; background: var(--ink); color: var(--cream);
  border-radius: 16px; text-align: center;
}
.codebox__k { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--yellow); }
.codebox__code {
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; line-height: 1.1; letter-spacing: 1px; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.codebox__copy {
  width: 100%; height: 48px; border: 2px solid var(--yellow); border-radius: 12px; background: var(--yellow); color: var(--ink);
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 2px; cursor: pointer;
}
.codebox__copy[data-state="copied"] { background: var(--green); border-color: var(--green); color: var(--cream); }
.codebox__copy:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.codebox__hint { font-size: 13px; line-height: 1.5; color: var(--cream); }
.codebox__url { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ticket__status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.stpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  background: var(--hilite); color: var(--ink);
}
.stpill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stpill--pending { background: var(--yellow); color: var(--ink); }
.stpill--approved { background: #DCEBDD; color: var(--green); }
.stpill--cancelled { background: #F1D9DA; color: var(--red); }
.ticket__refresh { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #5A5146; }
.ticket__refresh::before { content: ''; display: inline-block; vertical-align: middle; margin-right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: cfd-pulse 1.6s ease-in-out infinite; }
@keyframes cfd-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .ticket__refresh::before { animation: none; } }
.ticket__note { font-size: 12px; color: var(--red); }
.ticket__row--muted .ticket__v { color: #8A8173; font-weight: 500; }
.ticket__hold { padding: 8px 10px; margin: 0 -4px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px; }
.ticket__hold #d-hold { font-weight: 800; }
.help__btns { display: flex; flex-direction: column; gap: 10px; }
.help__call--alt { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-sizing: border-box; }
.done__missing { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.done__missing-h { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 28px; line-height: 1.15; }
.done__missing-t { font-size: 15px; line-height: 1.5; color: var(--line); max-width: 300px; }
.done__retry {
  height: 44px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink);
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer;
}

.chip-ev__body > span { display: block; }


/* =====================================================================
   PHASE 3 (content back office) - additions only; nothing above this line was changed
   ===================================================================== */

/* A cut-out (the admin uploaded a transparent PNG of a person): drawn whole (contain) on the tile colour instead of filling the circle.
   Photos (the default, and every picture today) keep object-fit: cover. */
/* cut-out (owner 10 Oct): the person stands free on the tile colour, no ring, no circle crop */
/* cut-out = a pasted PNG sticker (owner 10 Oct): no circle, no background, drawn whole; it may overlap the label, which stays on top */
.cell__img.is-cutout { object-fit: contain; border-radius: 0; background: transparent; width: auto; height: 60px; max-width: 55%; right: -2px; bottom: 0; }
.cell--event:has(.is-cutout) { overflow: visible; z-index: 2; } /* the person may pop out of the cell a little (owner's reference); pinned cells have no cut-out */
.cell__guest {
  font-family: 'Poppins', sans-serif; font-size: 6px; font-weight: 600; line-height: 1.2; color: var(--ink); text-transform: uppercase;
  white-space: pre-line; margin-top: auto; max-width: 62%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cell__ev:has(~ .is-cutout) { position: relative; z-index: 1; }
.ev-card__art.is-cutout { object-fit: contain; border: 0; border-radius: 0; background: transparent; width: auto; height: 56px; max-width: 80px; }

/* P3C: draft preview strip (only when the address has a valid ?preview= token) */
.pvbanner {
  position: sticky; top: 0; z-index: 90; padding: 3px 8px; text-align: center;
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  background: var(--yellow); color: var(--ink); pointer-events: none;
}

/* ---- R2B: selected night on the booking page calendar (inset ring, so the grid never shifts) ---- */
.cell--selected { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--yellow); }
.cell--selected .cell__num { color: var(--yellow); }
.cell--selected .cell__num--today { background: var(--yellow); color: var(--ink); }
.cell--selected .cell__ev { color: var(--yellow); }
.cell--selected .cell__guest { color: var(--cream); }
.cell--selected.cell--event { background: var(--ink); }

/* ---- R2B: calendar block on the booking page ---- */
.cal--book { margin-top: 8px; margin-bottom: 20px; }
.cal--book .cal__h2 { font-size: 30px; }

/* ---- R2B: LOCATION / PARKING sheets (the map) ---- */
.sheet--map .sheet__panel { background: var(--ink); color: var(--cream); }
.map { padding: 60px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.map__img { width: 100%; height: auto; display: block; border-radius: 8px; }
.map__name { font-size: 17px; font-weight: 500; letter-spacing: 1.5px; text-align: center; }
.map__box { padding: 16px; background: var(--ink-2); color: var(--cream); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
.map__h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 3px; color: var(--yellow); }
.map__rule { margin: 0; font-size: 14px; line-height: 1.5; padding-left: 12px; border-left: 4px solid transparent; }
.map__th { font-family: 'Prompt', sans-serif; font-size: 13px; color: var(--muted); }
.map__rule--strong { border-left-color: var(--yellow); font-weight: 700; }
.map__rule--strong .map__th { color: var(--cream); font-weight: 600; }
.map__dir {
  height: 56px; border-radius: 16px; background: var(--yellow); color: var(--ink); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-decoration: none;
}

/* ---- R2B: secondary phone numbers under the main one ---- */
.contact__alt { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.contact__alt-tel { font-size: 14px; letter-spacing: 1px; color: var(--muted); text-decoration: none; }

/* ---- R2B: booking page - empty date hint + gallery placeholder ---- */
.datebox--empty .datebox__text { color: #8A8173; font-size: 14px; font-weight: 400; }

/* ---- R2C: live music on the calendar (note + band + start time; a small note only on event nights) ---- */
.cell__live {
  display: inline-flex; align-items: flex-start; gap: 1px; align-self: flex-start; max-width: calc(100% + 2px); margin: 3px -1px 0; padding: 1px 1.5px;
  border-radius: 3px; background: var(--ink); color: var(--yellow);
  font-family: 'Poppins', 'Prompt', sans-serif; font-size: 7px; font-weight: 800; line-height: 1.1; letter-spacing: -0.1px;
}
.cell__live-icon { flex: none; width: 6px; height: 7px; display: inline-flex; align-items: center; }
.cell__live-icon svg { width: 6px; height: 6px; display: block; }
.cell__live-name { min-width: 0; overflow-wrap: break-word; }
.cell__live-time { margin-top: 1px; font-family: 'Poppins', sans-serif; font-size: 7px; font-weight: 600; line-height: 1; color: var(--ink); }
.cell__live--mini {
  position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); color: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center;
}
.cell__live--mini svg { width: 7px; height: 7px; display: block; }
.cell--selected .cell__live { background: var(--yellow); color: var(--ink); }
.cell--selected .cell__live-time { color: var(--cream); }
.cell--selected .cell__live--mini { background: var(--yellow); color: var(--ink); }
.cal__live { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: 2px; color: var(--yellow); }

/* ---- R2C: GALLERY page (albums -> album sheet -> full-screen viewer) ---- */
.gal-head { padding: 30px 16px 8px; }
.gal-head__h1 { margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 34px; letter-spacing: 0.5px; line-height: 1; color: var(--cream); }
.gal-head__sub { margin: 8px 0 0; font-size: 13px; letter-spacing: 0.5px; color: var(--muted); }
.gal-head__squiggle { display: block; margin-top: 8px; }
.gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 18px 16px 40px; }
.gal-card {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left;
  color: var(--cream); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; -webkit-tap-highlight-color: transparent;
}
.gal-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 10px; }
.gal-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--ink); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); margin-bottom: 6px; }
.gal-card__t { font-family: 'Poppins', 'Prompt', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
.gal-card__d { font-size: 11px; letter-spacing: 0.5px; color: var(--muted); }
.gal-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 0 24px; text-align: center; }
.gal-empty__art { width: 120px; height: auto; opacity: 0.9; }
.gal-empty__t { margin: 0; font-size: 15px; letter-spacing: 1px; color: var(--muted); }

.sheet--album .sheet__panel { height: 96vh; height: 96dvh; max-height: none; background: var(--ink); color: var(--cream); }
.alb { padding: 24px 12px 28px; }
.alb__title { margin: 0; padding: 0 44px 0 4px; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--cream); overflow-wrap: anywhere; }
.alb__sub { margin: 6px 4px 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.alb__meta { margin: 6px 4px 14px; font-size: 11px; letter-spacing: 1.5px; color: var(--yellow); }
.alb__grid { column-count: 3; column-gap: 4px; }
.alb__ph { -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0 0 4px; padding: 0; border: 0; background: var(--ink-2); border-radius: 4px; overflow: hidden; break-inside: avoid; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.alb__ph:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.alb__img { display: block; width: 100%; height: auto; min-height: 60px; }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.97); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.16s ease; color: var(--cream); font-family: 'Poppins', 'Prompt', sans-serif; }
.lb--in { opacity: 1; }
.lb-open { overflow: hidden; }
.lb__stage { position: absolute; inset: 0 0 76px 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; -webkit-user-drag: none; }
.lb__x, .lb__nav { position: absolute; z-index: 2; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb__x:focus-visible, .lb__nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lb__x { top: 10px; right: 10px; }
.lb__nav { top: 50%; margin-top: -24px; }
.lb__prev { left: 6px; }
.lb__next { right: 6px; }
.lb__foot { position: absolute; left: 0; right: 0; bottom: 0; min-height: 76px; box-sizing: border-box; padding: 10px 64px 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-align: center; pointer-events: none; }
.lb__cap { margin: 0; font-size: 14px; line-height: 1.35; color: var(--cream); overflow-wrap: anywhere; }
.lb__cap[hidden] { display: none; }
.lb__count { font-size: 12px; letter-spacing: 2px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .gal-card { animation: none !important; }
}

/* =====================================================================
   R3 · COMMUNITY: team chips on the booking form, team on the ticket, JOIN THE GANG on the home page, the MEMBER page
   ===================================================================== */

/* ---- booking form: "Which team do you support?" (optional): two rows of 72 px chips that scroll sideways ---- */
.field__opt { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; color: var(--line); text-transform: lowercase; }
.teams {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 72px; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 -18px; padding: 4px 18px 10px; scroll-padding-left: 18px;
}
.tchip {
  scroll-snap-align: start; width: 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 6px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink);
  font-family: 'Poppins', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tchip__img { display: block; width: 40px; height: 40px; object-fit: contain; }
.tchip__abbr, .ticket__team-abbr, .fanrow__abbr {
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--yellow);
  font-weight: 800; letter-spacing: 0; line-height: 1;
}
.tchip__abbr { width: 40px; height: 40px; font-size: 12px; }
.tchip__name { max-width: 100%; font-size: 9.5px; font-weight: 600; line-height: 1.15; text-align: center; min-height: 22px; overflow-wrap: break-word; }
.tchip--on { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 3px var(--yellow); }
.tchip--on .tchip__abbr { background: var(--yellow); color: var(--ink); }
.tchip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---- ticket: the club under the guests line ---- */
.ticket__team { display: flex; align-items: center; gap: 12px; padding: 8px 0 2px; }
.ticket__team-badge { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.ticket__team-img { width: 36px; height: 36px; object-fit: contain; display: block; }
.ticket__team-abbr { width: 36px; height: 36px; font-size: 11px; }
.ticket__team-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ticket__team-en { font-size: 14px; font-weight: 700; }
.ticket__team-th { font-family: 'Prompt', sans-serif; font-size: 12px; color: #5A5146; }
.ticket__team-link { font-size: 12px; font-weight: 600; text-decoration: underline; }

/* ---- home: JOIN THE GANG ---- */
.gang { position: relative; flex-shrink: 0; padding: 40px 16px 44px; background: var(--ink-3); border-top: 1px solid rgba(246, 242, 234, 0.14); }
.gang__head { text-align: center; }
.gang__kicker { display: inline-block; font-family: 'Permanent Marker', cursive; font-size: 19px; color: var(--yellow); transform: rotate(-3deg); }
.gang__h2 { margin-top: 2px; text-align: center; }
.gang__line { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--cream); }
.gang__line-th { display: block; font-family: 'Prompt', sans-serif; font-size: 13px; color: var(--muted); }
.gang__block { margin-top: 36px; }
.gang__h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--yellow); }
.fanwall { display: flex; flex-direction: column; gap: 8px; }
.fanrow { display: grid; grid-template-columns: 28px minmax(0, 104px) minmax(0, 1fr) 30px; align-items: center; gap: 10px; }
.fanrow__badge { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.fanrow__img { display: block; width: 28px; height: 28px; object-fit: contain; }
.fanrow__abbr { width: 28px; height: 28px; font-size: 9px; background: var(--cream); color: var(--ink); }
.fanrow__name { font-size: 13px; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fanrow__bar { display: block; height: 10px; border-radius: 999px; background: rgba(246, 242, 234, 0.12); overflow: hidden; }
.fanrow__bar i { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.fanrow--top .fanrow__bar i { background: var(--yellow); }
.fanrow--top .fanrow__name { color: var(--yellow); }
.fanrow__n { font-size: 13px; font-weight: 700; text-align: right; color: var(--cream); }
.fanwall__empty { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.fanwall__foot { margin: 12px 0 0; font-size: 12px; letter-spacing: 0.5px; color: var(--muted); }
.fanwall__book { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--cream); text-decoration: none; }
.fanwall__book strong { color: var(--yellow); letter-spacing: 1.5px; }
.ogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ogcard { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: var(--cream); }
.ogcard__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--ink); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
.ogcard__t { margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
.ogcard__d { font-size: 10px; letter-spacing: 0.5px; color: var(--muted); }
.ogcard:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 10px; }
.gang__quote { margin: 20px 0 0; text-align: center; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 800; font-size: 20px; line-height: 1.3; color: var(--cream); }

/* ---- the MEMBER page ---- */
.mem-head { padding: 30px 16px 8px; }
.mem-head__h1 { margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 34px; letter-spacing: 0.5px; line-height: 1; color: var(--cream); }
.mem-head__line { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--cream); }
.mem-head__th { display: block; font-family: 'Prompt', sans-serif; font-size: 13px; color: var(--muted); }
.mem-head__squiggle { display: block; margin-top: 10px; }
.mem-list { display: flex; flex-direction: column; gap: 26px; padding: 20px 16px 8px; }
.mem-empty { margin: 0; font-size: 14px; color: var(--muted); }
.mcard { --tier: var(--cream); display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; }
.mcard--blue { --tier: #4a90c8; }
.mcard--green { --tier: #6ba85a; }
.mcard--red { --tier: #c8564a; }
.mcard__img { grid-row: 1 / -1; display: block; width: 140px; height: auto; margin: 0; aspect-ratio: 895 / 1870; border-radius: 12px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6); background: var(--ink); }
.mcard__name { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--tier); }
.mcard__perk { margin: 4px 0 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--cream); }
.mcard__shared { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.mcard__shared-item { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mcard__shared-item::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--tier); font-weight: 800; }
.mem-how { margin: 14px 16px 0; padding: 18px 16px; border: 2px dashed rgba(246, 242, 234, 0.55); border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.mem-how__h { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: var(--yellow); }
.mem-how__t { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--cream); }
.mem-how__th { margin: 6px 0 0; font-family: 'Prompt', sans-serif; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mem-btns { display: flex; flex-direction: column; gap: 12px; padding: 22px 16px 36px; }
.mem-btns__book { height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px; box-sizing: border-box; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; }
.mem-btns__book { background: var(--yellow); color: var(--ink); }
:where(.page--promo a.mem-btns__book) { color: var(--ink); }
.top .pill { flex-shrink: 0; }

/* ---- JOIN THE GANG page (R4B): jump chips, Pokemon how-to, live TOP 3 ---- */
.mem-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px 0; }
.mem-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid rgba(246, 242, 234, 0.4); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--cream); text-decoration: none; }
:where(.page--promo a.mem-chip) { color: var(--cream); }
.mem-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
#member-list, #pokemon, #top3 { scroll-margin-top: 12px; }
.pk { margin: 34px 16px 0; }
.pk__h { margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--cream); }
.pk__line { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--cream); }
.pk__line-th { display: block; font-family: 'Prompt', sans-serif; font-size: 13px; color: var(--muted); }
.pk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.pk__card { padding: 14px 14px 14px 16px; border: 1px solid rgba(246, 242, 234, 0.18); border-left: 4px solid rgba(246, 242, 234, 0.3); border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.pk__card--hot { border-color: rgba(245, 213, 71, 0.55); border-left: 4px solid var(--yellow); background: rgba(245, 213, 71, 0.1); }
.pk__card--pic { padding-top: 0; overflow: hidden; }
.pk__pic { display: block; width: calc(100% + 30px); max-width: none; height: auto; margin: 0 -14px 12px -16px; border-radius: 11px 11px 0 0; background: var(--ink); }
.pk__pic--tall { height: auto; }
.pk__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream); }
.pk__card--hot .pk__title { color: var(--yellow); }
.pk__icon { font-size: 20px; line-height: 1; }
.pk__list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pk__item { position: relative; padding-left: 14px; font-family: 'Prompt', sans-serif; font-size: 13px; line-height: 1.5; color: var(--cream); }
.pk__item::before { content: ''; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.pk__card--hot .pk__item::before { background: var(--yellow); }
.pk__foot { margin: 12px 0 0; font-family: 'Prompt', sans-serif; font-size: 12px; line-height: 1.5; color: var(--muted); }
.t3 { margin: 38px 16px 0; padding: 18px 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(246, 242, 234, 0.18); }
.t3__h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--yellow); }
.t3__days { margin: 4px 0 0; font-family: 'Prompt', sans-serif; font-size: 13px; color: var(--cream); }
.t3__live { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-family: 'Prompt', sans-serif; font-size: 11px; color: var(--muted); }
.t3__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); animation: t3pulse 2s ease-out infinite; }
@keyframes t3pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.55); } 100% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); } }
.t3__body { margin-top: 14px; }
.t3__pod { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.t3__col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px 12px; border-radius: 12px; background: rgba(246, 242, 234, 0.06); text-align: center; }
.t3__col--1 { padding-top: 22px; padding-bottom: 18px; background: rgba(245, 213, 71, 0.14); border: 1px solid rgba(245, 213, 71, 0.5); }
.t3__medal { font-size: 24px; line-height: 1; }
.t3__img { display: block; width: 84px; height: 84px; max-width: 100%; object-fit: contain; }
.t3__col--1 .t3__img { width: 96px; height: 96px; }
.t3__ph { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(246, 242, 234, 0.14); color: var(--cream); font-size: 13px; font-weight: 700; }
.t3__name { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; }
.t3__pts { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--yellow); }
.t3__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); }
.t3__dot--blue { background: #4a90c8; }
.t3__dot--green { background: #6ba85a; }
.t3__dot--red { background: #c8564a; }
.t3__pod--skel .t3__ph { width: 64px; height: 64px; animation: t3skel 1.2s ease-in-out infinite alternate; }
.t3__pod--skel .t3__col { min-height: 120px; justify-content: center; }
.t3__pod--skel .t3__col--1 { min-height: 150px; }
@keyframes t3skel { from { opacity: 0.35; } to { opacity: 0.8; } }
.t3__msg { margin: 0; padding: 10px 0; font-family: 'Prompt', sans-serif; font-size: 14px; line-height: 1.5; color: var(--cream); }
.t3__msg--err { color: var(--muted); }
.t3__privacy { margin: 12px 0 0; font-family: 'Prompt', sans-serif; font-size: 11px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .t3__live-dot, .t3__pod--skel .t3__ph { animation: none; } }