/* Shared style for the pizzashed menu boards (TV1, TV2, TV3).
 *
 * Each board is drawn on a fixed 1920×1080 stage which the page scales to fit
 * the screen, so every position below is in pixels of a 1080p TV.
 *
 * The photos, leaves and grey brush strokes are the background image
 * (assets/bgN.jpg). Everything else — banners, item names, prices,
 * descriptions — is text in the page and can be edited there.
 */

@font-face { font-family: "Menu Title"; src: url("fonts/urbanist.woff2") format("woff2"); font-weight: 600 800; font-display: block; }
@font-face { font-family: "Menu Body"; src: url("fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Menu Body"; src: url("fonts/poppins-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: block; }

:root {
  --yellow: #f6c201;
  --yellow-dark: #8f6f00;
  --white: #dbdbdb;
  --black: #0b0b0b;
}

body { background: var(--black); }

.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--fit, 1));
  background: var(--black) center / 100% 100% no-repeat;
  overflow: hidden;
  font-family: "Menu Body", system-ui, sans-serif;

  /* Sizes and spacing, the same on every board so items are evenly spaced.
     Change them here, not per section. */
  --name-size: 30px;   /* item name and price */
  --name-lh: 35px;     /* line spacing of a two-line name */
  --desc-size: 21px;
  --desc-w: auto;      /* where descriptions wrap (auto: the section's width) */
  --desc-lh: 28px;
  --first-gap: 12px;   /* banner → first item */
  --gap: 8px;          /* name → description */
  --item-gap: 14px;    /* one item → the next */
  --section-gap: 28px; /* a section → the banner of the next one below */
}

/* ---- A section: a red banner and the items under it --------------------
   Position with style="left:…; top:…; width:…" — top is the banner's top. */
.menu { position: absolute; z-index: 2; }   /* above any steam */
/* A column of sections stacked one under the other. */
.col { position: absolute; z-index: 2; }
.col > .menu { position: relative; }
.col > .menu + .menu { margin-top: var(--section-gap); }

.banner {
  position: relative;
  width: 452px; height: 82px;
  margin: 0 0 0 calc(var(--banner-x, -8px));
  display: grid; place-items: center;
  font: 800 37px/1 "Menu Title", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.banner::before {           /* the brush stroke */
  content: ""; position: absolute;
  left: -1px; top: -1px; width: 454px; height: 85px;
  background: url("banner.png") center / 100% 100% no-repeat;
  z-index: 0;
}
.banner span { position: relative; z-index: 1; }

/* Banner titles, item names and prices: solid Urbanist ExtraBold. (The
   original's engraved texture was dropped: its hairlines blurred on TVs.) */
.banner span { color: #fff; }
.name, .price { color: var(--yellow); }

/* ---- An item ------------------------------------------------------------ */
.item { margin-top: var(--item-gap); }
.banner + .item { margin-top: var(--first-gap); }

.head {
  /* The name takes what is left of the line, so a long name can never push
     its price out of the price column. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  font: 800 var(--name-size)/var(--name-lh) "Menu Title", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* Price beside the first / last line of a two-line name, in the corner, so a
   long first line can run under it (as "Mediterranean / Veggie" does). */
.head.top, .head.bottom { position: relative; }
.head.top .price, .head.bottom .price { position: absolute; right: 0; }
.head.top .price { top: 0; }
.head.bottom .price { bottom: 0; }
.name { margin: 0; font: inherit; white-space: nowrap; }
/* Prices: a column at the right of each section. assets/menu.js lines them
   up: every price in a column starts at the same place, and the parts of a
   price (M$ L$ F$) sit under each other from row to row. */
.price { text-align: left; white-space: nowrap; }
.price-line { display: block; }
.price-part { display: inline-block; }
.price-part + .price-part { margin-left: 0.3em; }

.desc {
  margin: var(--gap) 0 0;
  width: var(--desc-w);
  color: var(--white);
  letter-spacing: 0.01em;
  font: 500 var(--desc-size)/var(--desc-lh) "Menu Body", sans-serif;
}
.desc em { font-style: italic; }

/* The chilli: <span class="chilli" title="Hot"></span>, a drawing rather
   than the 🌶️ emoji, which a TV without an emoji font shows as a blank. */
.chilli {
  display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.1em;
  background: url("chilli.svg") center / contain no-repeat;
  -webkit-text-stroke: 0;
}

/* ---- Steam ----------------------------------------------------------------
   Wisps that rise from a dish, drift and fade, on a loop. Place one over the
   food with its bottom edge on the food's top:
     <div class="steam" style="left:…; top:…; width:…; height:…">
       <i></i><i></i><i></i><i></i><i></i><i></i>
     </div>
   Only transform and opacity animate (soft gradients, no live blur), so it
   stays smooth on TV hardware. */
.steam { position: absolute; pointer-events: none; z-index: 1; }
.steam i {
  position: absolute; bottom: 0;
  width: 34%; height: 55%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: steam-rise 7s ease-out infinite;
  will-change: transform, opacity;
}
.steam i:nth-child(1) { left: 6%;  animation-delay: 0s;   --sway: 18px; }
.steam i:nth-child(2) { left: 30%; animation-delay: 1.2s; --sway: -22px; animation-duration: 8s; }
.steam i:nth-child(3) { left: 54%; animation-delay: 2.5s; --sway: 14px; }
.steam i:nth-child(4) { left: 18%; animation-delay: 3.6s; --sway: -16px; animation-duration: 7.5s; }
.steam i:nth-child(5) { left: 44%; animation-delay: 4.8s; --sway: 24px; animation-duration: 8.5s; }
.steam i:nth-child(6) { left: 64%; animation-delay: 5.9s; --sway: -12px; }
@keyframes steam-rise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5, .55) rotate(0deg); }
  18%  { opacity: .85; }
  50%  { transform: translate(var(--sway), -45%) scale(.85, 1) rotate(6deg); }
  75%  { opacity: .45; }
  100% { opacity: 0;   transform: translate(calc(var(--sway) * -0.6), -95%) scale(1.25, 1.4) rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) { .steam { display: none; } }