/* Rod's Pizza Cellar app: the 1975 Parlor look, turned up for a phone.
   Rod's red + charcoal on cream (sampled from their chef badge), with the booth green and
   lantern gold the witty ads use. Righteous for signs, Fraunces Soft for dish names, Nunito Sans to read. */

@font-face { font-family: 'Righteous'; src: url(fonts/Righteous.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Fraunces Soft'; src: url(fonts/Fraunces-SoftBlack.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url(fonts/NunitoSans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url(fonts/NunitoSans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --red: #BC1D2C;
  --red-d: #9A1622;
  --ink: #262425;
  --cream: #FBF1DC;
  --paper: #FFF9EC;
  --gold: #E8AE45;
  --green: #1F4A3A;
  --green-d: #173B2E;
  --soft: #5E5557;
  --sign: 'Righteous', 'Arial Black', sans-serif;
  --dish: 'Fraunces Soft', Georgia, serif;
  --body: 'Nunito Sans', system-ui, sans-serif;
  --top: env(safe-area-inset-top, 0px);
  --bot: env(safe-area-inset-bottom, 0px);
  --tabs: 70px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.45 var(--body);
  color: var(--ink);
  background: var(--ink);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
/* Wide screens: the phone column sits on a red-check tablecloth. */
@media (min-width: 520px) {
  body {
    background-color: #E9DCC0;
    background-image:
      linear-gradient(90deg, rgba(188, 29, 44, .55) 50%, transparent 50%),
      linear-gradient(rgba(188, 29, 44, .55) 50%, transparent 50%);
    background-size: 56px 56px;
  }
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }

.app {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--cream);
  overflow-x: clip;
  box-shadow: 0 0 60px rgba(0, 0, 0, .35);
}
main { padding-bottom: calc(var(--tabs) + var(--bot) + 18px); }

/* The status bar strip stays red over everything (the app draws under it on iPhone). */
.statusfill {
  position: fixed; z-index: 30; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 480px); height: var(--top); background: var(--red);
}

.view { display: none; }
body[data-view="home"] #home,
body[data-view="menu"] #menu,
body[data-view="spin"] #spin,
body[data-view="card"] #card { display: block; animation: viewIn .35s ease backwards; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

.kick { margin: 0; font: 700 13px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- HOME: hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--top) + 14px) 20px 46px;
  text-align: center;
  color: var(--cream);
  background: var(--red);
}
.hero::after { /* cream scallops, like a pizza-box doily */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px;
  background: radial-gradient(circle at 13px 16px, var(--cream) 12px, transparent 12.6px) repeat-x;
  background-size: 26px 16px;
}
.hero-top { position: relative; z-index: 3; display: flex; justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1.5px solid rgba(251, 241, 220, .45);
  border-radius: 99px;
  background: rgba(38, 36, 37, .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 13.5px/1 var(--body); letter-spacing: .02em;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(251, 241, 220, .55); flex: none; }
.pill.open .dot { background: #5BE08A; box-shadow: 0 0 0 0 rgba(91, 224, 138, .7); animation: ping 1.8s infinite; }
.pill.soon .dot { background: var(--gold); box-shadow: 0 0 0 0 rgba(232, 174, 69, .7); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(91, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 224, 138, 0); } }

.preview-tag {
  position: absolute; z-index: 4; top: calc(var(--top) + 24px); right: -41px;
  width: 150px; padding: 5px 0; transform: rotate(45deg);
  border: 0; background: var(--gold); color: var(--ink);
  font: 400 12px/1 var(--sign); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.badge-wrap { position: relative; width: min(64vw, 262px); margin: 16px auto 6px; aspect-ratio: 468 / 482; }
.rays {
  position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  background: repeating-conic-gradient(from 0deg, rgba(251, 241, 220, 0) 0deg 6deg, rgba(251, 241, 220, .14) 6deg 12deg);
  animation: turn 80s linear infinite;
  pointer-events: none;
}
.glow {
  position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 140, .55) 0%, rgba(255, 210, 140, 0) 62%);
  animation: breathe 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.badge {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  filter: drop-shadow(0 10px 12px rgba(38, 36, 37, .4)); /* soft: a hard offset doubles the badge's small print */
  animation: drop .9s cubic-bezier(.2, 1.4, .4, 1) both .1s;
}
.badge img { width: 100%; height: 100%; display: block; }
.badge.toss { animation: toss 1s cubic-bezier(.3, .1, .3, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(-10deg); } }
@keyframes toss {
  0% { transform: none; }
  15% { transform: translateY(8px) scaleY(.92); }
  55% { transform: translateY(-120px) rotate(300deg) scale(.92); }
  85% { transform: translateY(0) rotate(360deg) scaleY(.94); }
  100% { transform: rotate(360deg); }
}
.tag {
  position: relative; z-index: 2; margin: 10px 0 4px;
  font: 400 clamp(28px, 8.4vw, 36px)/1.02 var(--sign); text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--ink);
}
.where { position: relative; z-index: 2; margin: 8px 0 0; font: 700 14px/1.3 var(--body); letter-spacing: .06em; opacity: .92; }

/* ---------- HOME: the three buttons ---------- */
.actions { padding: 8px 18px 0; }
.btn-order {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px 15px 22px;
  border: 3px solid var(--ink); border-radius: 18px;
  background: var(--red); color: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
  font: 400 27px/1 var(--sign); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn-order::after { /* a glint that runs across every few seconds */
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); animation: glint 4.5s ease-in-out infinite 1.2s;
}
@keyframes glint { 0% { left: -40%; } 22%, 100% { left: 130%; } }
.btn-order .arrow {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--cream); color: var(--red);
}
.btn-order .arrow svg, .order-float svg, .t-arrow { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-order:active, .btn:active, .tile:active, .btn-spin:active, .btn-staff:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px;
  border: 3px solid var(--ink); border-radius: 16px;
  background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
  font: 700 17px/1 var(--body); text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn svg { width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- HOME: buffet ticket ---------- */
.buffet {
  position: relative; margin: 24px 18px 0; padding: 16px 20px 15px;
  border: 3px solid var(--ink); border-radius: 18px;
  background: var(--gold); box-shadow: 5px 5px 0 var(--ink);
}
.buffet::before, .buffet::after { /* ticket notches */
  content: ''; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--cream);
}
.buffet::before { left: -13px; clip-path: inset(0 0 0 50%); }
.buffet::after { right: -13px; clip-path: inset(0 50% 0 0); }
.b-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.buffet h2 { margin: 0; font: 400 25px/1 var(--sign); text-transform: uppercase; }
.b-live {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 7px;
  border-radius: 99px; background: var(--red); color: var(--cream);
  font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  animation: pulse 1.4s ease-in-out infinite;
}
.b-live svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.b-line { margin: 6px 0 12px; font: 700 15px/1.3 var(--body); }
.b-prices { display: flex; border-top: 2px dashed rgba(38, 36, 37, .45); border-bottom: 2px dashed rgba(38, 36, 37, .45); }
.b-price { flex: 1; padding: 10px 0 9px; text-align: center; }
.b-price + .b-price { border-left: 2px dashed rgba(38, 36, 37, .45); }
.b-price small { display: block; font: 700 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.b-price b { display: block; margin: 3px 0 2px; font: 900 36px/1 var(--dish); color: var(--ink); }
.b-price span { display: block; font: 700 12.5px/1.2 var(--body); color: #4B3A1C; }
.b-note { margin: 10px 0 0; font: 400 13.5px/1.4 var(--body); color: #3B3328; }

/* ---------- HOME: marquee ---------- */
.marquee {
  margin: 30px -12px 8px; padding: 11px 0;
  background: var(--ink); color: var(--cream);
  transform: rotate(-2.2deg);
  overflow: hidden; white-space: nowrap;
  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
}
.track { display: inline-block; font: 400 17px/1 var(--sign); letter-spacing: .08em; text-transform: uppercase; animation: slide 28s linear infinite; }
.track i { font-style: normal; color: var(--gold); margin: 0 14px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- HOME: tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px 18px 0; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 152px; padding: 16px;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none; transition: transform .08s, box-shadow .08s;
}
.tile .kick { font-size: 11.5px; }
.tile .big { margin-top: 4px; font: 400 23px/1.02 var(--sign); text-transform: uppercase; }
.tile-menu {
  grid-column: 1 / -1; min-height: 118px; padding-right: 70px;
  background: var(--red) repeating-conic-gradient(from 0deg at 88% 50%, rgba(251, 241, 220, 0) 0 7deg, rgba(251, 241, 220, .13) 7deg 14deg);
  color: var(--cream);
}
.tile-menu .big { font-size: 32px; text-shadow: 2px 2px 0 var(--ink); }
.t-arrow { position: absolute; right: 18px; top: 50%; width: 42px; height: 42px; margin-top: -21px; padding: 8px; border-radius: 50%; background: var(--cream); color: var(--red); }
.tile-spin { background: var(--gold); }
.tile-card { background: var(--green); color: var(--cream); }
.t-ico { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.tile-spin .t-ico { animation: turn 14s linear infinite; transform-origin: 50% 54%; }
.t-ico .fill { fill: currentColor; }

/* ---------- HOME: story, hours, install, footer ---------- */
.story { margin: 28px 18px 0; padding: 18px 20px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); text-align: center; }
.story h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 400 22px/1 var(--sign); color: var(--red); text-transform: uppercase; }
.story h2::before, .story h2::after { content: ''; flex: 1; height: 3px; background: var(--red); border-radius: 2px; }
.story p { margin: 0; font: 400 16.5px/1.5 var(--body); }

.hours { margin: 16px 18px 0; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); overflow: hidden; }
.hours summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font: 400 20px/1 var(--sign); text-transform: uppercase; }
.hours summary::-webkit-details-marker { display: none; }
.hours summary::after { content: '+'; font: 400 26px/1 var(--sign); color: var(--red); }
.hours[open] summary::after { content: '\2013'; }
.h-today { margin-left: auto; font: 700 14px/1.2 var(--body); text-transform: none; color: var(--soft); }
.hours ul { margin: 0; padding: 0 18px 14px; list-style: none; }
.hours li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1.5px dashed rgba(38, 36, 37, .22); font: 400 15.5px/1.3 var(--body); }
.hours li.today { font-weight: 700; color: var(--red); }

.install { position: relative; margin: 16px 18px 0; padding: 18px 20px; border-radius: 18px; background: var(--ink); color: var(--cream); }
.install h2 { margin: 0 34px 6px 0; font: 400 21px/1.1 var(--sign); text-transform: uppercase; color: var(--gold); }
.install p { margin: 0; font-size: 15px; }
.install .x { color: var(--cream); }
.btn-install { margin-top: 12px; padding: 11px 18px; border: 0; border-radius: 12px; background: var(--gold); color: var(--ink); font: 400 18px/1 var(--sign); text-transform: uppercase; }
.ios-steps { margin: 12px 0 0; padding-left: 20px; font-size: 15px; }
.ios-steps li { margin: 4px 0; }
.ios-steps svg { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.foot { display: grid; gap: 6px; padding: 26px 18px 6px; text-align: center; font: 700 14.5px/1.3 var(--body); }
.foot a { text-decoration: none; }
.foot a:first-child { color: var(--red); }

/* ---------- shared close button ---------- */
.x {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: transparent;
  font: 400 30px/1 var(--body); color: var(--ink);
}

/* ---------- MENU ---------- */
.mhead {
  position: relative; overflow: hidden;
  padding: calc(var(--top) + 22px) 18px 22px;
  background: var(--red) repeating-conic-gradient(from 0deg at 85% 0%, rgba(251, 241, 220, 0) 0 6deg, rgba(251, 241, 220, .12) 6deg 12deg);
  color: var(--cream);
}
.mhead h2 { margin: 0 0 14px; font: 400 44px/1 var(--sign); text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }
.search {
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
}
.search svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; font: 700 17px/1.2 var(--body); color: var(--ink); }
.search input::placeholder { color: #8C8285; font-weight: 400; }
.chips {
  position: sticky; z-index: 10; top: var(--top);
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px 18px 12px; background: var(--cream);
  border-bottom: 3px solid var(--ink);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 14px;
  border: 2.5px solid var(--ink); border-radius: 99px; background: var(--paper);
  font: 700 14.5px/1 var(--body); white-space: nowrap; text-decoration: none;
}
.chip.on { background: var(--ink); color: var(--cream); }
.msec { padding: 22px 18px 4px; scroll-margin-top: calc(var(--top) + 66px); }
.msec h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 27px/1.05 var(--sign); text-transform: uppercase; color: var(--red); }
.msec h3::after { content: ''; flex: 1; min-width: 20px; height: 3px; border-radius: 2px; background: var(--red); }
.snote { margin: 8px 0 0; padding: 9px 12px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(232, 174, 69, .18); font: 400 14px/1.45 var(--body); font-style: italic; color: #4A3F33; }
.dish {
  margin: 12px 0 0; padding: 14px 15px 13px;
  border: 2.5px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
}
.d-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dish h4 { margin: 0; font: 900 19.5px/1.15 var(--dish); }
.d-price { flex: none; font: 900 20px/1 var(--dish); color: var(--red); }
.dish p { margin: 5px 0 0; font: 400 14.5px/1.45 var(--body); color: var(--soft); }
.prices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.pp { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--cream); }
.pp small { font: 700 12.5px/1 var(--body); color: var(--soft); }
.pp b { font: 900 17px/1 var(--dish); color: var(--red); }
.rows { margin-top: 9px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1.5px dashed rgba(38, 36, 37, .22); font: 400 14.5px/1.35 var(--body); }
.row b { flex: none; font: 900 17px/1.2 var(--dish); color: var(--red); }
.add { margin: 9px 0 0; font: 700 13px/1.4 var(--body); color: var(--red-d); }
mark { background: rgba(232, 174, 69, .55); color: inherit; border-radius: 3px; padding: 0 1px; }
.loading, .nomatch { margin: 30px 18px; text-align: center; font: 700 16px/1.4 var(--body); color: var(--soft); }
.disclaimer { margin: 26px 18px 0; font: 400 12.5px/1.45 var(--body); color: var(--soft); text-align: center; }
.order-float {
  position: fixed; z-index: 15; right: max(14px, calc(50% - 240px + 14px)); bottom: calc(var(--tabs) + var(--bot) + 14px);
  display: none; align-items: center; gap: 8px; padding: 12px 16px 12px 18px;
  border: 3px solid var(--ink); border-radius: 99px; background: var(--red); color: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 18px/1 var(--sign); text-transform: uppercase; text-decoration: none;
}
body[data-view="menu"] .order-float { display: inline-flex; animation: viewIn .4s ease backwards .2s; }

/* ---------- SPIN ---------- */
#spin { position: relative; overflow: hidden; min-height: calc(100dvh - var(--tabs) - var(--bot)); background: var(--red); color: var(--cream); text-align: center; padding: calc(var(--top) + 22px) 18px 10px; }
body[data-view="spin"] .app { background: var(--red); }
.spin-rays {
  position: absolute; left: 50%; top: 58%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px;
  background: repeating-conic-gradient(from 0deg, rgba(251, 241, 220, 0) 0deg 5deg, rgba(251, 241, 220, .1) 5deg 10deg);
  animation: turn 60s linear infinite reverse; pointer-events: none;
}
.shead { position: relative; }
.shead h2 { margin: 4px 0 6px; font: 400 46px/1 var(--sign); text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }
.shead p:last-child { margin: 0 auto; max-width: 300px; font: 700 15.5px/1.35 var(--body); }
.sound { position: absolute; z-index: 3; top: calc(var(--top) + 14px); right: 14px; width: 44px; height: 44px; border: 2.5px solid var(--cream); border-radius: 50%; background: rgba(38, 36, 37, .3); color: var(--cream); padding: 8px; }
.sound svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound .mute { display: none; }
.sound[aria-pressed="false"] .wave { display: none; }
.sound[aria-pressed="false"] .mute { display: inline; }
.wheel-wrap { position: relative; width: min(88vw, 370px); margin: 22px auto 0; aspect-ratio: 1; touch-action: none; }
.wheel { width: 100%; height: 100%; filter: drop-shadow(5px 7px 0 rgba(38, 36, 37, .55)); will-change: transform; }
.wheel text { font-family: var(--sign); text-transform: uppercase; }
.pointer { position: absolute; z-index: 2; left: 50%; top: -14px; width: 40px; height: 52px; margin-left: -20px; transform-origin: 50% 20%; filter: drop-shadow(2px 3px 0 rgba(38, 36, 37, .5)); }
.pointer path { fill: var(--ink); stroke: var(--cream); stroke-width: 3; }
.pointer circle { fill: var(--gold); }
.pointer.tick { animation: tick .12s ease-out; }
@keyframes tick { 50% { transform: rotate(-16deg); } }
.btn-spin {
  position: relative; margin: 26px auto 8px; padding: 16px 44px;
  border: 3px solid var(--ink); border-radius: 99px; background: var(--gold); color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font: 400 30px/1 var(--sign); text-transform: uppercase;
  transition: transform .08s, box-shadow .08s;
  animation: nudge 2.4s ease-in-out infinite 1s;
}
.btn-spin[disabled] { animation: none; opacity: .6; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-4deg) scale(1.04); } 86% { transform: rotate(4deg) scale(1.04); } }

/* ---------- PUNCH CARD ---------- */
#card { min-height: calc(100dvh - var(--tabs) - var(--bot)); padding: calc(var(--top) + 22px) 18px 12px; background: var(--green); color: var(--cream); text-align: center; }
body[data-view="card"] .app { background: var(--green); }
.chead h2 { margin: 4px 0 6px; font: 400 44px/1 var(--sign); text-transform: uppercase; text-shadow: 3px 3px 0 var(--green-d); color: var(--cream); }
.chead .kick { color: var(--gold); }
.chead p:last-child { margin: 0; font: 700 15.5px/1.35 var(--body); }
.ticket {
  position: relative; margin: 22px auto 0; max-width: 400px; padding: 16px 18px 18px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--cream); color: var(--ink);
  box-shadow: 6px 6px 0 var(--green-d);
  outline: 2px dashed rgba(188, 29, 44, .55); outline-offset: -11px;
}
.ticket.thud { animation: thud .32s ease-out; }
@keyframes thud { 30% { transform: translateY(4px) rotate(-.6deg); } }
.t-top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; text-align: left; }
.t-top img { width: 58px; height: auto; }
.t-top b { display: block; font: 400 22px/1.05 var(--sign); text-transform: uppercase; color: var(--red); }
.t-top span { font: 700 13px/1.2 var(--body); color: var(--soft); letter-spacing: .06em; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 4px 6px; }
.slot {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0;
  border: 2.5px dashed rgba(38, 36, 37, .5); border-radius: 50%; background: var(--paper);
  font: 400 17px/1 var(--sign); color: rgba(38, 36, 37, .35);
}
.slot.stamped { border: 0; background: none; color: var(--cream); }
.slot .ink {
  position: absolute; inset: -3px; display: grid; place-items: center;
  border-radius: 50%; background: var(--red);
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px var(--cream);
}
.slot .ink svg { width: 64%; height: 64%; }
.slot.fresh .ink { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } }
body.staff .slot:not(.stamped) { border-color: var(--red); color: var(--red); animation: pulse 1.2s ease-in-out infinite; }
.t-reward { margin: 14px 6px 0; font: 700 14.5px/1.4 var(--body); }
.full-stamp {
  position: absolute; left: 50%; top: 52%; display: none;
  padding: 6px 18px; border: 5px solid var(--red); border-radius: 12px;
  font: 400 46px/1 var(--sign); text-transform: uppercase; color: var(--red);
  transform: translate(-50%, -50%) rotate(-14deg); background: rgba(251, 241, 220, .82);
  pointer-events: none;
}
.ticket.full .full-stamp { display: block; animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.progress { margin: 20px 0 0; font: 400 22px/1.15 var(--sign); text-transform: uppercase; color: var(--gold); }
.staffbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 400px; margin: 16px auto 0; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--gold); color: var(--ink); font: 700 14.5px/1.3 var(--body); text-align: left; }
.staffbar button { padding: 8px 14px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper); font: 700 14px/1 var(--body); }
.staff-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.staff-tools button { padding: 10px 14px; border: 2px solid var(--cream); border-radius: 12px; background: transparent; color: var(--cream); font: 700 14px/1 var(--body); }
.btn-staff { margin: 22px auto 0; padding: 12px 20px; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--green-d); font: 700 16px/1 var(--body); transition: transform .08s, box-shadow .08s; }
.fine { max-width: 330px; margin: 16px auto 0; font: 400 13.5px/1.45 var(--body); opacity: .85; }

/* ---------- TABS ---------- */
.tabs {
  position: fixed; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 480px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 10px calc(8px + var(--bot));
  background: var(--ink);
  border-top: 3px solid var(--gold);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 6px; border-radius: 14px;
  color: rgba(251, 241, 220, .72); text-decoration: none;
  font: 700 11.5px/1 var(--body); letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.tabs svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.on { background: var(--red); color: var(--cream); }
.tabs a.on svg { animation: hop .4s ease; }
@keyframes hop { 40% { transform: translateY(-4px); } }

/* ---------- SHEETS ---------- */
.sheet { position: fixed; z-index: 40; inset: 0; display: none; }
.sheet.open { display: block; }
.sheet-back { position: absolute; inset: 0; background: rgba(20, 18, 19, .55); animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } }
.sheet-card {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 480px); max-height: 88vh; overflow-y: auto;
  padding: 24px 22px calc(22px + var(--bot));
  border: 3px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: var(--paper); color: var(--ink); text-align: left;
  animation: up .38s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes up { from { transform: translate(-50%, 100%); } }
.sheet-card .kick { color: var(--red); }
.sheet-card h2 { margin: 6px 40px 8px 0; font: 400 34px/1.02 var(--sign); text-transform: uppercase; color: var(--red); }
.sheet-card > p { margin: 0; font: 400 15.5px/1.5 var(--body); color: var(--soft); }
.btn-order.small { margin-top: 18px; font-size: 22px; padding: 11px 12px 11px 20px; }
.btn-order.small .arrow { width: 38px; height: 38px; }
.btn-ghost { display: block; width: 100%; margin-top: 12px; padding: 13px; border: 3px solid var(--ink); border-radius: 16px; background: transparent; font: 400 19px/1 var(--sign); text-transform: uppercase; }
.pin-card { text-align: center; }
.pin-card h2 { margin-right: 0; }
.pin-msg { min-height: 2.9em; }
.pin-msg.bad { color: var(--red) !important; font-weight: 700 !important; }
.dots { display: flex; justify-content: center; gap: 16px; margin: 14px 0 18px; }
.dots i { width: 16px; height: 16px; border: 2.5px solid var(--ink); border-radius: 50%; }
.dots i.on { background: var(--ink); }
.dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.keypad button { height: 62px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--cream); font: 400 26px/1 var(--sign); }
.keypad button:active { background: var(--gold); }
.keypad .blank { visibility: hidden; }
.checklist { margin: 8px 0 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding: 10px 0 10px 30px; border-top: 1.5px dashed rgba(38, 36, 37, .25); font: 400 15px/1.45 var(--body); }
.checklist li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 16px; height: 16px; border: 2.5px solid var(--red); border-radius: 4px; }

.confetti { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}