/* Size each screen to the actual browser / Telegram viewport; long content can scroll. */
:root, body { background: #fff; }
.app {
  --panel-height: var(--tg-viewport-stable-height, 100svh);
  height: var(--panel-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: calc(clamp(12px, 2svh, 20px) + var(--nyam-safe-top, 0px));
  padding-bottom: calc(14px + var(--nyam-safe-bottom, env(safe-area-inset-bottom, 0px)));
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.app::before, .app::after { display: none; }
.ambient { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient::before, .ambient::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(22px);
  width: 300px; height: 310px; animation: bubble-drift 18s ease-in-out infinite alternate;
}
.ambient::before { top: 18%; left: -160px; background: radial-gradient(circle, #ffb35360, transparent 70%); }
.ambient::after { top: 52%; right: -170px; background: radial-gradient(circle, #ffde6460, transparent 70%); animation-delay: -9s; }
header { flex-shrink: 0; gap: 7px; }
.header-controls { margin-top: 4px; }
.brand-mark { height: 40px; }
.lunch { padding: 6px 13px; }
.sound-toggle { min-height: 34px; }
.screen { flex: 1; min-height: 0; }
.screen:not([hidden]) { display: flex; flex-direction: column; }
.back-link { flex-shrink: 0; align-self: flex-start; min-height: 34px; margin-top: 5px; }

.welcome { justify-content: center; justify-content: safe center; padding-top: clamp(12px, 2svh, 20px); }
.welcome .eyebrow { margin-bottom: 10px; }
.welcome h1 { font-size: clamp(42px, 6svh, 52px); line-height: 1.1; margin-bottom: 10px; }
.welcome > .lead { font-size: 15px; line-height: 1.6; }
.live-presence { flex-shrink: 0; margin-top: 12px; padding: 7px 12px; }
.screen-presence { width: fit-content; margin: 0 auto 10px; padding: 5px 10px; font-size: 11px; }
.intro .region-heading { white-space: nowrap; text-align: center; font-size: clamp(30px, 8.5vw, 40px); }
.hero-art { flex: 1 1 150px; min-height: 125px; max-height: 220px; height: auto; margin: 12px 0; }
.hero-art::before { width: min(205px, 26svh); height: min(205px, 26svh); }
.hero-art svg { height: 100%; max-height: 200px; width: 95%; transform: none; }
.art-note { top: 0; padding: 9px 19px; font-size: 20px; }
.primary-link { flex-shrink: 0; min-height: 58px; padding: 12px 20px; }
.home-caption { flex-shrink: 0; margin-top: 12px; }

.intro { flex-shrink: 0; margin: 14px 0 20px; }
.intro h1 { font-size: clamp(37px, 5.5svh, 46px); line-height: 1.12; margin-bottom: 10px; }
.region-tile { flex-shrink: 0; min-height: 94px; padding-top: 18px; padding-bottom: 18px; margin-bottom: 20px; }
.region-coming { flex-shrink: 0; min-height: 94px; padding-top: 16px; padding-bottom: 16px; }
.region-character { font-size: 52px; margin: 22px 0 0; }

.menu-intro { margin: 7px 0 12px; }
.menu-intro h1 { font-size: 32px; margin-bottom: 6px; }
.menu-intro .eyebrow { margin-bottom: 5px; }
.menu-intro .lead { line-height: 1.6; }
#menu-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
/* A chubby playing card: smaller than the screen so there is room to toss it around. */
 #menu-body { --card-h: clamp(220px, calc(var(--panel-height, 100svh) * 0.385), 318px); }
.deck { flex: 0 0 auto; height: var(--card-h); min-height: 0; max-height: none; width: min(84%, calc(var(--card-h) * 0.78)); margin-left: auto; margin-right: auto; }
.card { height: 100%; min-height: 0; padding: 16px; }
/* The card owns every touch direction; nothing inside it scrolls. */
.card, .card * { touch-action: none; }
.card { transition: box-shadow .16s, filter .14s, scale .2s cubic-bezier(.2,.9,.3,1.35); }
.card.is-grabbed { scale: 1.03; box-shadow: inset 0 0 0 2px #fff7dfd9, 0 22px 34px #9b582c38; }
@media (prefers-reduced-motion: reduce) { .card.is-grabbed { scale: 1; } }
.card.is-armed { filter: grayscale(1) brightness(.95); box-shadow: inset 0 0 0 2px #ffffffb3, 0 18px 30px #4a4a4a33; }
.under-card { height: 100%; min-height: 0; transform: translateY(3.5px) rotate(-.7deg); }
.card-top, .availability, .card-bottom { flex-shrink: 0; }
.card-top > span:first-child { padding: 6px 9px; }
.menu-content { padding: 13px 0; min-height: 0; overflow: hidden; justify-content: safe center; }
.card h2 { font-size: clamp(25px, 3.2svh, 31px); margin: 8px 0; }
.card.has-translation h2 { font-size: clamp(20px, 2.8svh, 24px); line-height: 1.25; }
.menu-translation { font-size: clamp(21px, 3svh, 25px); line-height: 1.3; }
.restaurant { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.availability { margin-bottom: 8px; line-height: 1.6; color: #8b6b46; }
.card-bottom { padding-top: 9px; }
.card-bottom span { white-space: nowrap; }
.card-bottom span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.actions { flex-shrink: 0; padding-top: 16px; }
/* Confirm button: green to teal with a dark drop shadow and white text, as wide as the card. */
.actions a { width: min(100%, calc(var(--card-h) * 0.78 + 16px)); margin: 0 auto; min-height: 48px; gap: 10px; padding: 8px 16px; border: 2px solid #12332f; border-radius: 16px; background: linear-gradient(135deg, #3fd277, #17b59b 58%, #0f9d94); color: #fff; box-shadow: 0 4px 0 #12201e, inset 0 2px 0 #9ff0c4; text-shadow: 0 1px 0 #0b5a52; }
.actions a:active { transform: translateY(3px); box-shadow: 0 1px 0 #12201e, inset 0 2px 0 #9ff0c4; }
.actions a > span:first-child { display: flex; align-items: baseline; gap: 6px; font-size: 19px; line-height: 1.1; }
.actions a > span:last-child { font-size: 18px; }
.maps-caption { display: inline; margin: 0; line-height: 1.1; font-size: 11.5px; font-weight: 700; color: #e6fff6; }
#menu-body footer { flex-shrink: 0; margin-top: 10px; line-height: 1.5; }
.data-notice { color: #806953; font-size: 10px; }
#admin-entry { margin-left: 7px; color: #a85c28; }

.selection-screen { min-height: 0; }
.selection-content { flex: 1; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding: 12px 0; }
.selection-content .eyebrow { margin-bottom: 8px; }
.thinking-face { width: clamp(96px, 15svh, 125px); height: clamp(96px, 15svh, 125px); font-size: 65px; margin: 16px auto 12px; }
.selection-content h1 { font-size: clamp(26px, 4svh, 31px); margin: 14px 0 10px; }
.selection-content .lead { font-size: 13px; line-height: 1.85; }
.shuffle-animation { flex-shrink: 0; height: clamp(108px, 16svh, 135px); margin-top: 20px; }
.shuffle-animation span { width: 80px; height: 100px; left: 70px; top: 0; }
.round-finished { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding: 10px 0; }
.finished-face { flex-shrink: 0; width: 72px; height: 72px; font-size: 48px; margin: 0 auto 16px; }
.round-finished h2 { font-size: 30px; margin: 8px 0 12px; }
.round-finished .eyebrow { margin-bottom: 8px; }
.round-finished .lead { font-size: 13px; }
.round-finished .primary-link { margin-top: 22px; }
.finish-region-link { min-height: 32px; margin-top: 16px; }

@media (min-width: 600px) {
  body { padding: 16px; }
  .app { --panel-height: min(860px, calc(100svh - 32px)); }
}
@media (max-height: 720px) {
  .app { padding-top: calc(10px + var(--nyam-safe-top, 0px)); padding-bottom: calc(10px + var(--nyam-safe-bottom, env(safe-area-inset-bottom, 0px))); }
  .welcome { padding-top: 10px; }
  .hero-art { max-height: 180px; margin: 10px 0; }
  .region-character { margin-top: 18px; font-size: 46px; }
  .selection-content { padding: 8px 0; }
  .thinking-face { margin-top: 12px; margin-bottom: 8px; }
  .shuffle-animation { margin-top: 16px; }
  .menu-intro .lead { display: none; }
  .menu-intro { margin: 4px 0 9px; }
  .menu-intro h1 { font-size: 30px; margin-bottom: 0; }
  .menu-intro .eyebrow { margin-bottom: 4px; font-size: 10px; }
  .screen-presence { margin-bottom: 7px; padding: 4px 9px; }
  #menu-body footer { margin-top: 9px; }
  .card { padding: 16px; }
  .menu-content { padding: 11px 0; }
  .actions { padding-top: 10px; }
}
@media (max-height: 660px) {
  .header-controls { margin-top: 2px; }
  .brand-mark { height: 36px; }
  .brand-name { font-size: 22px; }
  .menu-intro { margin-bottom: 9px; }
  .menu-intro h1 { font-size: 29px; }
  .menu-intro .eyebrow, .menu-intro .lead { display: none; }
  .card { padding: 15px; min-height: 0; }
  .under-card { min-height: 0; }
  .menu-content { padding: 10px 0; }
  .menu-label { display: none; }
  .card.has-translation h2 { font-size: 19px; line-height: 1.2; }
  .menu-translation { line-height: 1.25; }
  .restaurant { margin-top: 9px; }
  .actions { padding-top: 11px; }
  .round-finished .primary-link { margin-top: 16px; }
}
.is-telegram body { padding: 0; }
.is-telegram .app { --panel-height: var(--tg-viewport-stable-height, 100svh); border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient::after { animation: none; }
}