/* Oh la la! Da Nang. Palette sampled from the real venue:
   bordeaux awning #701818 fading to sunlit pink #F87098, gold script #F8C000,
   ceramic off-white, concrete grey, rattan foliage green. */

:root {
  --bordeaux: #701818;
  --bordeaux-deep: #4A0E12;
  --bordeaux-soft: #8C2430;
  --pink: #F87098;
  --pink-soft: #FBAABF;
  --gold: #F8C000;
  --gold-deep: #C79A10;
  --cream: #FAF6EE;
  --ceramic: #F0EEE8;
  --concrete: #C8C8C0;
  --leaf: #3C6B35;
  --ink: #33161A;
  --shadow: 0 10px 30px rgba(74, 14, 18, 0.18);
  --script: 'Pacifico', cursive;
  --sans: 'Quicksand', -apple-system, sans-serif;
  --vh: 1vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 600px at 50% -200px, #fff 0%, var(--cream) 55%, var(--ceramic) 100%);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---------- awning ---------- */
.awning { height: 26px; flex: none; }
.awning svg { display: block; width: 100%; height: 26px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 0;
}
.brand {
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--bordeaux);
  text-shadow: 0 1px 0 #fff;
}
.topbar-right { display: flex; gap: 8px; }
.lang-btn, .icon-btn {
  font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--bordeaux); border-radius: 999px;
  background: transparent; color: var(--bordeaux);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.lang-btn:hover, .icon-btn:hover { background: var(--bordeaux); color: var(--cream); }
.icon-btn .snd-off { display: none; }
.icon-btn.muted .snd-on { display: none; }
.icon-btn.muted .snd-off { display: inline; }

/* ---------- screens ---------- */
#app { flex: 1; display: flex; flex-direction: column; }
.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 24px 40px;
  gap: 14px;
  position: relative;
  animation: screenIn 0.45s ease both;
}
.screen.active { display: flex; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.kicker {
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.9rem; color: var(--bordeaux-soft);
}
.kicker.celebrate {
  font-family: var(--script); text-transform: none; letter-spacing: 0;
  font-size: clamp(2rem, 7vw, 3rem); color: var(--gold-deep);
  text-shadow: 0 2px 0 #fff;
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.display {
  font-weight: 700;
  font-size: clamp(1.8rem, 6.5vw, 2.8rem);
  line-height: 1.15;
  max-width: 22ch;
}
.display em {
  font-family: var(--script); font-style: normal; font-weight: 400;
  color: var(--bordeaux);
  font-size: 1.15em;
}
.display.sm { font-size: clamp(1.4rem, 5vw, 2rem); }

.sub { font-size: 1.1rem; font-weight: 500; max-width: 34ch; color: #5C3A40; }
.sub.soft { color: #8A6A6E; }
.fineprint { font-size: 0.8rem; color: #96777C; max-width: 40ch; }

/* ---------- buttons ---------- */
.cta {
  font-family: var(--sans); font-weight: 700; font-size: 1.1rem;
  color: var(--cream);
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-soft) 60%, #A03048 100%);
  border: none; border-radius: 999px;
  padding: 16px 34px; min-height: 52px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none; display: inline-block;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(74,14,18,0.26); }
.cta:active { transform: translateY(0) scale(0.98); }
.cta.sm { padding: 10px 22px; font-size: 0.95rem; min-height: 44px; }
.ghost {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  background: none; border: none; color: var(--bordeaux-soft);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; min-height: 44px; padding: 8px 16px;
}
.ghost.tiny { font-size: 0.82rem; color: #96777C; }

/* ---------- teaser ---------- */
.steam-cup { width: 110px; }
.cup-svg .cup-body { fill: var(--bordeaux); }
.cup-svg .cup-handle { stroke: var(--bordeaux); stroke-width: 5; }
.cup-svg .saucer { fill: var(--concrete); }
.cup-svg .steam {
  fill: none; stroke: var(--pink); stroke-width: 3.5; stroke-linecap: round;
  opacity: 0; animation: steam 2.8s ease-in-out infinite;
}
.cup-svg .s2 { animation-delay: 0.5s; stroke: var(--pink-soft); }
.cup-svg .s3 { animation-delay: 1.1s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(6px); }
  35%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---------- wheel ---------- */
.wheel-stage { position: relative; width: min(78vw, 420px); margin: 6px auto; }
.wheel-wrap { position: relative; width: 100%; aspect-ratio: 1; }
#wheel {
  width: 100%; height: 100%;
  filter: drop-shadow(0 12px 28px rgba(74, 14, 18, 0.28));
  touch-action: manipulation;
  cursor: pointer;
}
.pointer {
  position: absolute; top: -14px; left: 50%;
  width: 36px; margin-left: -18px; z-index: 3;
  transform-origin: 50% 20%;
  transition: transform 0.07s ease-out;
}
.pointer.tick { transform: rotate(-14deg); }
.pointer svg path {
  fill: var(--gold);
  stroke: var(--gold-deep); stroke-width: 2;
}
.hub {
  position: absolute; top: 50%; left: 50%;
  width: 27%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--cream) 55%, var(--ceramic) 100%);
  color: var(--bordeaux);
  font-family: var(--script); font-size: clamp(1.2rem, 5vw, 1.9rem);
  cursor: pointer; z-index: 2;
  box-shadow: 0 4px 14px rgba(74,14,18,0.3), inset 0 -3px 8px rgba(74,14,18,0.08);
  transition: transform 0.15s;
}
.hub:hover { transform: translate(-50%, -50%) scale(1.05); }
.hub:active { transform: translate(-50%, -50%) scale(0.96); }
.wheel-spinning .hub { pointer-events: none; }
.wheel-spinning #wheel { cursor: default; }
.hub-oh { display: inline-block; }
.hub-oh.hub-pop { animation: hubPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hubPop {
  0%   { transform: scale(0.45) rotate(-8deg); opacity: 0.3; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* prize code letters flip in one by one */
.code-ch {
  display: inline-block;
  animation: codeFlip 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes codeFlip {
  from { transform: rotateX(85deg) translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* wheel text */
#wheel text {
  font-family: var(--sans); font-weight: 700;
  fill: var(--cream);
}
#wheel .seg-cream text { fill: var(--bordeaux); }

/* ---------- prize card ---------- */
.prize-card {
  background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 22px 30px 16px;
  box-shadow: var(--shadow);
  min-width: min(78vw, 320px);
  position: relative;
}
.prize-card::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px dashed rgba(199, 154, 16, 0.5); border-radius: 14px;
  pointer-events: none;
}
.prize-icon { line-height: 1; margin-bottom: 6px; }
.prize-icon img { width: 64px; height: 64px; }
.prize-code-label {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #96777C; font-weight: 600;
}
.prize-code {
  font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 700;
  letter-spacing: 0.06em; color: var(--bordeaux);
}
.prize-meta { font-size: 0.9rem; color: #5C3A40; font-weight: 600; margin-top: 4px; }
.prize-meta .dot { margin: 0 6px; color: var(--gold-deep); }
.live-strip {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(112, 24, 24, 0.12);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem; color: #96777C; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- confetti ---------- */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -14px;
  width: 8px; height: 12px; border-radius: 2px;
  animation: fall linear both;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.7; }
}

/* ---------- review ---------- */
.qr-block {
  display: none;
  flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border-radius: 20px; padding: 20px 26px 12px;
  box-shadow: var(--shadow); border: 2px solid var(--ceramic);
}
.qr-block img { display: block; width: 200px; height: 200px; }
@media (min-width: 768px) and (min-height: 500px) {
  .qr-block { display: flex; }
}
.feedback-form { width: min(86vw, 420px); display: flex; flex-direction: column; gap: 10px; }
.feedback-form textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  border: 2px solid var(--concrete); border-radius: 14px;
  padding: 12px 14px; resize: vertical; background: #fff;
}
.feedback-form textarea:focus { outline: none; border-color: var(--bordeaux-soft); }
.feedback-actions { display: flex; justify-content: flex-end; }

/* ---------- goodbye ---------- */
.bye-art { animation: floaty 4.5s ease-in-out infinite; }
.bye-art img {
  display: block; width: min(72vw, 320px);
  border-radius: 18px; border: 3px solid var(--gold);
  box-shadow: var(--shadow);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-7px) rotate(0.6deg); }
}
.brand-foot {
  font-size: 0.85rem; color: #96777C; font-weight: 600; margin-top: 6px;
}

/* ---------- staff lock ---------- */
.lock-art { animation: lockBob 3.2s ease-in-out infinite; }
.lock-art .shackle { transform-origin: 40px 34px; }
@keyframes lockBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.lock-form { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lock-form input {
  font-family: var(--sans); font-weight: 600; font-size: 1.15rem;
  text-align: center; letter-spacing: 0.08em;
  width: min(78vw, 300px); padding: 13px 16px;
  border: 2px solid var(--concrete); border-radius: 999px;
  background: #fff; color: var(--ink);
}
.lock-form input:focus { outline: none; border-color: var(--bordeaux-soft); }
.lock-form.shake { animation: lockShake 0.45s; }
@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
.warn-note { color: var(--bordeaux-soft); font-weight: 600; }

/* ---------- theater curtains ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 50;
  display: none; overflow: hidden;
}
.curtain-panel {
  position: absolute; top: 0; bottom: 0; width: 53%;
  background:
    linear-gradient(180deg, rgba(40, 4, 8, 0.38), rgba(40, 4, 8, 0) 30%),
    repeating-linear-gradient(90deg,
      #4A0E12 0px 16px, #701818 16px 40px, #8C2430 40px 54px, #701818 54px 72px);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.35, 1);
  will-change: transform;
}
.curtain-panel.left  { left: 0;  transform: translateX(-106%); }
.curtain-panel.right { right: 0; transform: translateX(106%); }
.curtain-panel.left::after, .curtain-panel.right::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(180deg, #F8C000, #C79A10 60%, #F8C000);
}
.curtain-panel.left::after  { right: 0; box-shadow: -10px 0 22px rgba(30, 3, 6, 0.45); }
.curtain-panel.right::after { left: 0;  box-shadow: 10px 0 22px rgba(30, 3, 6, 0.45); }
.curtain.closed .curtain-panel { transform: translateX(0); }
.curtain.open .curtain-panel {
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.25, 1);
}
.screen.curtain-reveal { animation: curtainReveal 0.9s cubic-bezier(0.25, 0.8, 0.35, 1) both; }
@keyframes curtainReveal {
  from { opacity: 0.4; transform: scale(0.93); }
  to   { opacity: 1; transform: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .cup-svg .steam { opacity: 0.4; }
}

/* small phones */
@media (max-height: 640px) {
  .steam-cup { width: 80px; }
  .screen { gap: 10px; padding-bottom: 24px; }
}

/* Coupon QR: guests photograph this and staff scan the photo at /ohlala/scan.
   White quiet zone is deliberate, a cream background hurts scan reliability
   when read off a phone screen at an angle. */
.coupon-qr {
  margin: 12px auto 4px;
  width: max-content;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(199, 154, 16, 0.35);
}
.coupon-qr img { display: block; width: 150px; height: 150px; }
.snap-note { font-weight: 600; color: var(--bordeaux-soft); }
@media (max-height: 720px) {
  .coupon-qr img { width: 116px; height: 116px; }
}

/* The win screen grew by a QR block. On short viewports (landscape tablets,
   small laptops) that pushed "what's next" below the fold, and that button is
   the step that leads to the Google review, so it must stay visible. Tighten
   the surrounding chrome rather than the code or the QR, which both have to
   stay readable and scannable. */
@media (max-height: 800px) {
  #screen-win { gap: 6px; padding-top: 8px; padding-bottom: 4px; }
  #screen-win .kicker.celebrate { font-size: 1.9rem; }
  #screen-win .display { font-size: 1.7rem; }
  #screen-win .sub { font-size: 0.9rem; }
  #screen-win .prize-icon { width: 52px; height: 52px; }
  #screen-win .prize-card { padding: 14px 16px; }
  .coupon-qr { margin: 8px auto 2px; padding: 6px; }
  .coupon-qr img { width: 104px; height: 104px; }
  .snap-note { font-size: 0.76rem; }
}

/* ---------- how-to + wait (mobile first) ---------- */
.howto-list {
  list-style: none;
  text-align: left;
  width: min(92vw, 360px);
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.howto-list li {
  position: relative;
  padding: 12px 14px 12px 44px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(112, 24, 24, 0.1);
  font-size: 0.95rem;
  font-weight: 600;
  color: #5C3A40;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(74, 14, 18, 0.05);
}
.howto-list li::before {
  counter-increment: how;
  content: counter(how);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 24px;
  text-align: center;
}
.howto-list { counter-reset: how; }
.howto-list.left li { font-size: 0.9rem; }

.howto-box {
  width: min(92vw, 380px);
  text-align: left;
  margin-top: 8px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(112, 24, 24, 0.1);
  padding: 4px 12px 8px;
}
.howto-box summary {
  font-weight: 700;
  color: var(--bordeaux);
  cursor: pointer;
  padding: 10px 4px;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.howto-box summary::-webkit-details-marker { display: none; }
.howto-box summary::after {
  content: '›';
  margin-left: auto;
  font-size: 1.3rem;
  transition: transform 0.15s;
  color: var(--gold-deep);
}
.howto-box[open] summary::after { transform: rotate(90deg); }
.howto-box .howto-list { width: 100%; margin-top: 0; }
.howto-box a { color: var(--bordeaux); font-weight: 700; }

/* ---------- staff desk QR ---------- */
.ticket-qr-wrap {
  background: #fff;
  border: 3px solid var(--gold);
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.ticket-qr-wrap img {
  display: block;
  width: min(62vw, 240px);
  height: min(62vw, 240px);
}
.ticket-countdown {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  font-weight: 700;
  color: var(--bordeaux);
  letter-spacing: 0.04em;
}
.ticket-countdown.urgent {
  color: var(--pink);
  animation: pulse 0.7s ease-in-out infinite;
}
.desk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#deskIdle, #deskLive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#deskIdle[hidden], #deskLive[hidden] { display: none !important; }

/* ---------- Café Catch (SVG brunch game, mobile-first) ---------- */
.display-font { font-family: var(--script); }

#screen-wait {
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#screen-wait .wait-sub { font-size: 0.95rem; max-width: 36ch; }
#screen-desk {
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Staff tools: Scan coupon is a primary job, not a buried link */
.desk-tools {
  width: min(92vw, 360px);
  margin: 8px 0 4px;
  padding: 14px 14px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 4px 4px 0 var(--ink);
}
.desk-scan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  border: 2px solid var(--ink) !important;
  /* Gold so it reads as “redeem” vs bordeaux “mint QR” */
  background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 55%, #F0C84A 100%) !important;
  color: var(--ink) !important;
}
.desk-scan-cta:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.desk-tools .fineprint {
  margin: 0;
  text-align: center;
  max-width: 28ch;
}
.desk-tools-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 2px;
}
.desk-tools-secondary a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;
}
.desk-tools-secondary span { color: #c4a8ac; }
#screen-ticket-bad {
  justify-content: flex-start;
  padding-top: 20px;
  overflow-y: auto;
}

.catch-card {
  width: min(96vw, 420px);
  margin: 0 auto;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 4px 4px 16px 16px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  text-align: center;
}
.catch-awning {
  height: 18px;
  border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--bordeaux) 0 28px, var(--cream) 28px 56px);
}
.catch-banner { padding: 10px 14px 6px; border-bottom: 2px solid rgba(51,22,26,.12); }
.catch-brand-label {
  font-size: 0.95rem; font-style: italic; color: var(--bordeaux-soft); margin: 0;
}
.catch-title {
  font-size: clamp(1.55rem, 6.5vw, 2rem); font-weight: 400; color: var(--bordeaux);
  margin: 2px 0 0; line-height: 1.05;
}
.catch-sub { font-size: 0.82rem; font-weight: 600; color: #5C3A40; margin: 4px 0 0; }

.catch-hud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 10px; padding: 10px 12px 8px; font-variant-numeric: tabular-nums;
}
.catch-hud-label {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A6A6E;
}
.catch-score, .catch-combo {
  font-family: var(--script); font-size: 1.65rem; color: var(--bordeaux); line-height: 1;
}
.catch-combo.is-hot { color: var(--pink); animation: comboHot 0.45s ease-in-out infinite alternate; }
@keyframes comboHot { to { transform: scale(1.08) rotate(-2deg); } }
.catch-best-wrap { display: block; font-size: 0.72rem; font-weight: 700; color: #8A6A6E; }
.catch-best-wrap b { color: var(--bordeaux); }
.catch-mult {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--pink-soft); font-size: 0.7rem; font-weight: 800;
}
.catch-mult.is-hidden { display: none; }
.catch-hud-right { display: flex; align-items: center; gap: 8px; }
.catch-hearts { display: flex; gap: 2px; }
.heart-dot {
  width: 26px; height: 26px; display: inline-flex; transition: opacity 0.2s, filter 0.2s, transform 0.2s;
}
.heart-dot svg { width: 24px; height: 24px; fill: var(--bordeaux); stroke: var(--ink); stroke-width: 1.6; }
.heart-dot.lost { opacity: 0.22; filter: grayscale(1); transform: scale(0.86); }
.catch-timer {
  border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  padding: 4px 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
}
.catch-timer strong { font-size: 1rem; margin-left: 3px; color: var(--bordeaux); }

.catch-stage {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: min(52vh, 380px);
  min-height: 300px;
  max-height: 420px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 16px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), rgba(250,246,238,.5) 48%, rgba(248,192,0,.18)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(112,24,24,.07) 39px 40px);
}
.catch-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.28;
  background-image: linear-gradient(90deg, transparent 49.5%, rgba(112,24,24,.2) 50%, transparent 50.5%);
  background-size: 25% 100%;
}
.catch-stage.is-playing { cursor: grabbing; }
.catch-stage.is-shaking { animation: stageShake 0.28s linear; }
@keyframes stageShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.catch-lane-chip {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 5px 9px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bordeaux);
}
.catch-heat {
  position: absolute; right: 10px; top: 10px; width: 36px; height: 64px; z-index: 3;
  border: 2px solid var(--ink); background: rgba(255,255,255,.85); border-radius: 18px;
  overflow: hidden; padding: 3px;
}
.catch-heat-fill {
  position: absolute; bottom: 3px; left: 3px; right: 3px; height: 18%;
  border-radius: 12px; background: linear-gradient(180deg, var(--pink), var(--bordeaux));
  transition: height 0.3s ease;
}

/* Plate: ~22% of stage width, catch radius tuned in JS to match */
.catch-plate {
  position: absolute; z-index: 4; bottom: 12px; left: 50%;
  width: min(34%, 128px); height: auto; aspect-ratio: 132 / 68;
  transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(1px 4px 0 rgba(51,22,26,.16));
  will-change: left;
}
.catch-plate svg { width: 100%; height: 100%; overflow: visible; display: block; }
.catch-plate.is-bumping { animation: plateBump 0.18s ease-out; }
@keyframes plateBump {
  50% { transform: translateX(-50%) scale(1.1) rotate(-2deg); }
}

/* Dropped a treat: the streak is gone but nothing else is. Deliberately gentler
   than the heart-loss shake, because a miss is no longer a punishment. */
.catch-plate.is-combo-break { animation: plateSlip 0.42s ease-out; }
@keyframes plateSlip {
  30% { transform: translateX(-50%) rotate(4deg); opacity: .75; }
  60% { transform: translateX(-50%) rotate(-3deg); opacity: .9; }
}

.falling-item {
  position: absolute; z-index: 2; width: 58px; height: 58px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(1px 3px 1px rgba(51,22,26,.14));
  animation: itemFloat 0.7s ease-in-out infinite alternate;
}
.falling-item svg { width: 100%; height: 100%; overflow: visible; display: block; }
.falling-item.hazard { animation-duration: 0.4s; }
@keyframes itemFloat { to { rotate: 6deg; translate: 0 -3px; } }

.catch-particle {
  position: absolute; z-index: 6; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; background: var(--gold);
  animation: particlePop 0.55s cubic-bezier(.16,.76,.2,1) forwards;
}
@keyframes particlePop {
  to { transform: translate(var(--dx), var(--dy)) scale(0.1); opacity: 0; }
}
.score-pop {
  position: absolute; z-index: 7; font-family: var(--script); font-weight: 400;
  font-size: 1.35rem; color: var(--bordeaux); pointer-events: none;
  text-shadow: 1px 1px 0 var(--cream);
  animation: scoreRise 0.65s ease-out forwards;
}
@keyframes scoreRise {
  to { transform: translateY(-48px) scale(1.12); opacity: 0; }
}

.catch-actions {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 14px 6px;
}
.game-play-btn {
  width: min(100%, 260px); min-height: 50px; font-size: 1.08rem;
  box-shadow: 4px 4px 0 var(--ink); border: 2px solid var(--ink) !important;
}
.game-play-btn:hover:not(:disabled) { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.game-play-btn:disabled, .game-play-btn.is-playing {
  opacity: 0.55; pointer-events: none; box-shadow: none;
}
.game-status {
  font-size: 0.86rem; font-weight: 600; color: #5C3A40;
  text-align: center; max-width: 34ch; line-height: 1.35; margin: 0; min-height: 2.4em;
}
.catch-howto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 6px 12px 8px; padding: 10px;
  border: 2px solid rgba(51,22,26,.14); border-radius: 12px; text-align: left;
  background: #fff;
}
.catch-howto h4 {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bordeaux); margin: 0 0 4px;
}
.catch-howto p {
  font-size: 0.78rem; font-weight: 600; color: #5C3A40; margin: 0; line-height: 1.35;
}
.game-tease {
  font-size: 0.78rem; font-weight: 700; color: var(--bordeaux-soft);
  text-align: center; max-width: 36ch; margin: 0 auto 12px; padding: 0 12px;
}

/* ----- high score save + leaderboard ----- */
.catch-save {
  margin: 4px 12px 10px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.catch-save[hidden] { display: none !important; }
.catch-save-title {
  font-family: var(--script); font-size: 1.25rem; color: var(--bordeaux);
  margin: 0 0 2px; text-align: center; font-weight: 400;
}
.catch-save-score {
  text-align: center; font-family: var(--script); font-size: 2rem;
  color: var(--gold-deep); margin: 0 0 10px; line-height: 1;
}
.catch-save-form { display: flex; flex-direction: column; gap: 10px; }
.catch-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 700; color: #5C3A40; }
.catch-field em { font-weight: 600; color: #96777C; font-style: normal; }
.catch-field input {
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 11px 12px; border: 2px solid var(--concrete); border-radius: 10px;
  background: var(--cream); color: var(--ink); min-height: 46px;
}
.catch-field input:focus { outline: none; border-color: var(--bordeaux-soft); background: #fff; }
.catch-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.82rem; font-weight: 600; color: #5C3A40; line-height: 1.35;
  cursor: pointer;
}
.catch-check input {
  width: 20px; height: 20px; margin-top: 1px; flex: none;
  accent-color: var(--bordeaux);
}
.catch-save-err { color: var(--bordeaux-soft); font-size: 0.8rem; font-weight: 700; margin: 0; }
.catch-save-ok { color: var(--leaf); font-size: 0.85rem; font-weight: 700; margin: 0; text-align: center; }
#scoreSubmit { width: 100%; margin-top: 2px; }

.catch-board {
  margin: 0 12px 10px;
  padding: 10px 10px 8px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  text-align: left;
}
.catch-board-head { margin-bottom: 8px; }
.catch-board-title {
  font-family: var(--script); font-size: 1.2rem; color: var(--bordeaux);
  margin: 0 0 8px; text-align: center; font-weight: 400;
}
.catch-board-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.lb-tab {
  font-family: var(--sans); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); padding: 7px 11px; min-height: 36px;
  cursor: pointer;
}
.lb-tab.is-active {
  background: var(--bordeaux); color: var(--cream); border-color: var(--bordeaux);
}
.catch-board-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.catch-board-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(51,22,26,.08);
  font-size: 0.9rem; font-weight: 700;
}
.catch-board-list li.is-you {
  border-color: var(--gold); background: #fff8e8;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.catch-board-list .lb-rank {
  font-variant-numeric: tabular-nums; color: var(--bordeaux);
  font-weight: 800; text-align: center;
}
.catch-board-list .lb-rank.is-top { color: var(--gold-deep); font-size: 1.05rem; }
.catch-board-list .lb-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink);
}
.catch-board-list .lb-score {
  font-variant-numeric: tabular-nums; color: var(--bordeaux); font-weight: 800;
}
.catch-board-empty {
  text-align: center; font-size: 0.82rem; font-weight: 600; color: #8A6A6E;
  margin: 8px 0 4px; padding: 0 8px;
}
.catch-board-empty[hidden] { display: none !important; }

@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .screen {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}
@media (max-width: 400px) {
  .display { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
  .catch-card { box-shadow: 4px 4px 0 var(--ink); }
  .catch-stage { min-height: 280px; height: min(48vh, 340px); }
  .falling-item { width: 52px; height: 52px; }
  .catch-plate { width: min(38%, 118px); }
  .catch-howto { grid-template-columns: 1fr; }
}
@media (max-height: 700px) {
  .catch-stage { min-height: 260px; height: min(42vh, 300px); }
  .catch-banner { padding: 8px 12px 4px; }
  .ticket-qr-wrap img { width: min(48vw, 180px); height: min(48vw, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .falling-item, .catch-combo.is-hot, .catch-plate.is-bumping,
  .catch-plate.is-combo-break { animation: none !important; }
}

.menu-ru-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(51,22,26,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.menu-ru-overlay[hidden] { display: none !important; }
.menu-ru-sheet {
  background: #FAF6EE;
  border-radius: 18px;
  padding: 22px 20px 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(74,14,18,.28);
}
.menu-ru-sheet .ticket-qr-wrap { margin: 12px auto; }
.menu-ru-sheet .ghost { margin-top: 8px; }