/* Daddyo's Pizza TV menu board, v1.3.0
   Fixed 1920x1080 (landscape) or 1080x1920 (portrait) stage, scaled to fit any screen by board.js.
   Motion uses transform + opacity only, so it stays smooth on modest TV hardware. */

@font-face { font-family: "Bowlby One SC"; src: url(fonts/bowlby-one-sc-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Caveat Brush"; src: url(fonts/caveat-brush-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Work Sans"; src: url(fonts/work-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Work Sans"; src: url(fonts/work-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }

:root {
  --chalk: #f3efe6; --chalk-y: #f6cf4a; --chalk-r: #ee6c64;
  --red: #c8262b; --red-dk: #a11d21; --yellow: #f2b705; --green: #2f7d3a; --paper: #f6efe2;
  --sign: "Bowlby One SC", "Arial Black", Impact, sans-serif;
  --hand: "Caveat Brush", "Comic Sans MS", cursive;
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1);
  --back: cubic-bezier(.34, 1.56, .64, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
body { font-family: var(--body); color: var(--chalk); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; background: #1e2422; contain: strict; }
#stage.is-portrait { width: 1080px; height: 1920px; }

/* ---------- Chalkboard background (shared, never static: drifts very slowly) ---------- */
#chalk { position: absolute; inset: 0; overflow: hidden; background: #1e2422; }
.chalk__img { position: absolute; left: -60px; top: -60px; right: -60px; bottom: -60px; background: #1e2422 url(assets/chalkboard.jpg) center / cover no-repeat; will-change: transform; animation: chalkDrift 240s ease-in-out infinite alternate; }
@keyframes chalkDrift { from { transform: translate3d(-18px, -10px, 0); } to { transform: translate3d(18px, 10px, 0); } }

#scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; visibility: hidden; overflow: hidden; contain: layout paint; }
.scene.on, .scene.leaving { visibility: visible; }
.scene.leaving { opacity: 0; transition: opacity .55s linear; }
.scene.warm { visibility: visible; opacity: .001; }
.scene.warm * { animation-play-state: paused !important; }

/* ====================================================================
   MENU SCREENS (chalkboard)
   ==================================================================== */
.screen { padding: 74px 110px 96px; display: flex; flex-direction: column; }
.frame { position: absolute; left: 30px; top: 30px; right: 30px; bottom: 30px; border: 4px solid rgba(243, 239, 230, .34); border-radius: 12px 18px 14px 20px / 18px 12px 20px 14px; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.screen.on .frame { animation: wipe 1.2s var(--out) .05s forwards; }
.ft { position: absolute; left: 0; right: 0; bottom: 48px; text-align: center; font: 700 20px/1 var(--body); letter-spacing: .34em; text-transform: uppercase; color: rgba(243, 239, 230, .42); opacity: 0; }
.screen.on .ft { animation: fadeIn .8s linear .9s forwards; }

.hd { display: grid; gap: 70px; align-items: end; margin-bottom: 18px; min-height: 150px; }
.hd--1 { grid-template-columns: 1fr; }
.hd--2 { grid-template-columns: 1fr 1fr; }
.title { position: relative; display: inline-block; justify-self: start; margin: 0; font: 400 128px/1 var(--hand); color: var(--chalk); text-shadow: 0 0 2px rgba(255, 255, 255, .35), 0 0 22px rgba(255, 255, 255, .10); -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); padding: 0 .2em .12em 0; }
.screen.on .title { animation: wipe .9s var(--out) .15s forwards; }
.hd--2 .title { font-size: 112px; }
.ul { display: block; height: 9px; width: 0; margin-top: -2px; border-radius: 6px; background: var(--chalk-y); opacity: .92; box-shadow: 0 0 10px rgba(246, 207, 74, .25); }
.screen.on .ul { animation: grow 1s var(--out) .75s forwards; }
.hd__c { display: flex; flex-direction: column; align-items: flex-start; }

.body { flex: 1; min-height: 0; display: grid; }
.body--duo { grid-template-columns: 1fr 1fr; column-gap: 70px; }
.block { display: flex; flex-direction: column; min-height: 0; }

.rows { flex: 1; min-height: 0; display: grid; grid-auto-rows: 1fr; }
.rows--cols { grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); column-gap: 90px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 0 4px; border-bottom: 3px dashed rgba(243, 239, 230, .16); opacity: 0; min-height: 0; }
.rows > .row:last-child, .rows--cols > .row:nth-child(4n) { border-bottom: 0; }
.screen.on .row { animation: chalkIn .75s var(--out) forwards; animation-delay: calc(.5s + var(--i, 0) * .09s); }
.row__main { flex: 1; min-width: 0; }
.row__name { margin: 0; font: 400 64px/1.04 var(--hand); color: var(--chalk); text-shadow: 0 0 2px rgba(255, 255, 255, .3), 0 0 18px rgba(255, 255, 255, .08); }
.row__desc { margin: 7px 0 0; font: 600 28px/1.22 var(--body); color: rgba(243, 239, 230, .74); }
.badge { display: inline-block; vertical-align: middle; margin-left: 16px; padding: 4px 13px 3px; font: 700 21px/1.1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: #1e2422; background: var(--chalk-r); border-radius: 6px; transform: rotate(-2deg) translateY(-4px); }
.row__prices { display: flex; gap: 34px; align-items: flex-end; flex: none; }
.pr { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.pr i { font: 700 24px/1 var(--body); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: rgba(243, 239, 230, .66); margin-bottom: 4px; }
.pr b { font: 400 80px/.95 var(--hand); color: var(--chalk-y); text-shadow: 0 0 2px rgba(246, 207, 74, .4), 0 0 20px rgba(246, 207, 74, .14); }
.pr--solo { min-width: 0; }

/* two-column and compact variants */
.body--duo .row__name, .rows--cols .row__name { font-size: 54px; }
.body--duo .row__prices { gap: 26px; }
.body--duo .pr { min-width: 0; }
.body--duo .pr b, .rows--cols .pr b { font-size: 68px; }
.body--duo .pr i { font-size: 21px; }
.rows--cols .pr { min-width: 0; }
.rows--cols .row__desc, .body--duo .row__desc { font-size: 25px; }

/* Build Your Own */
.body--byo { grid-template-columns: 1fr 1fr; column-gap: 80px; }
.byo__l, .byo__r { display: flex; flex-direction: column; min-height: 0; }
.sub { margin: 0 0 6px; font: 400 62px/1 var(--hand); color: var(--chalk-y); opacity: 0; text-shadow: 0 0 18px rgba(246, 207, 74, .16); }
.screen.on .sub { animation: chalkIn .7s var(--out) .45s forwards; }
.sub small { font: 700 26px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: rgba(243, 239, 230, .7); margin-left: 12px; }
.byo__h, .byo__row { display: grid; grid-template-columns: 1.15fr .9fr .9fr; align-items: center; column-gap: 14px; }
.byo__h { font: 700 22px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 239, 230, .62); padding: 6px 4px 8px; opacity: 0; }
.screen.on .byo__h { animation: fadeIn .6s linear .6s forwards; }
.byo__h span:nth-child(n+2), .byo__row span:nth-child(n+2) { text-align: right; }
.byo__sizes { display: grid; grid-auto-rows: 1fr; }
.byo__row { padding: 0 4px; height: 112px; border-bottom: 3px dashed rgba(243, 239, 230, .16); }
.byo__sizes .byo__row:last-child { border-bottom: 0; }
.byo__sz { font: 400 58px/1 var(--hand); color: var(--chalk); }
.byo__pz { font: 400 76px/1 var(--hand); color: var(--chalk-y); }
.byo__tp { font: 400 54px/1 var(--hand); color: var(--chalk); opacity: .92; }
.lunch { margin-top: 26px; padding: 20px 28px 22px; border: 4px dashed rgba(246, 207, 74, .65); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: 0; }
.screen.on .lunch { animation: chalkIn .8s var(--out) 1.1s forwards; }
.lunch__k { font: 700 22px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-r); margin-bottom: 8px; }
.lunch__d { font: 400 52px/1.02 var(--hand); color: var(--chalk); }
.lunch__p { font: 400 100px/.9 var(--hand); color: var(--chalk-y); flex: none; text-shadow: 0 0 20px rgba(246, 207, 74, .2); }
.tops { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 36px; row-gap: 4px; margin: 6px 0 24px; font: 400 42px/1.12 var(--hand); color: var(--chalk); }
.tops--2 { grid-template-columns: repeat(2, auto); }
.tops span { opacity: 0; white-space: nowrap; }
.screen.on .tops span { animation: chalkIn .6s var(--out) forwards; animation-delay: calc(.7s + var(--i, 0) * .04s); }

/* ====================================================================
   PROMO SCENES (animated breaks)
   ==================================================================== */
.promo { background: #111; }
.promo > * { position: absolute; }
.promo .bg, .promo .vig { inset: 0; }
.promo .vig { z-index: 8; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .46) 100%); }
.promo .kick { z-index: 7; left: 96px; top: 66px; font: 700 27px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .92); opacity: 0; white-space: nowrap; }
.promo.on .kick { animation: kickIn .9s var(--out) .55s forwards; }
.promo .rays { z-index: 1; width: 2600px; height: 2600px; left: 50%; top: 50%; margin: -1300px 0 0 -1300px; opacity: 0; will-change: transform; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .10) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 16deg); }
.promo.on .rays { animation: raysIn 1.2s linear .1s forwards, spin 140s linear infinite; }
.promo .shadow { z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); opacity: 0; }
.promo.on .shadow { animation: fadeIn 1.2s linear .5s forwards; }

.food { z-index: 3; will-change: transform, opacity; }
.food, .food__z, .food__f { transform-origin: 50% 55%; }
.food img { display: block; width: 100%; height: auto; }
.food__f { animation: float 4.2s ease-in-out infinite alternate; }
@keyframes float { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, -16px, 0) rotate(.9deg); } }

.txt { z-index: 5; }
.hl { margin: 0; font: 400 150px/.96 var(--sign); color: #fff7e8; text-transform: uppercase; }
.hl .w { display: block; white-space: nowrap; will-change: transform; text-shadow: 0 7px 0 rgba(60, 8, 10, .5), 0 20px 44px rgba(0, 0, 0, .38); }

.chip, .burst, .coin, .banner, .ribbon { will-change: transform, opacity; }

/* ---- 1. PEPPERONI PIZZA ---- */
.promo--pep .bg { background: radial-gradient(circle at 70% 52%, #e83f44 0%, #c8262b 36%, #8a171b 100%); }
.promo--pep .rays { margin-left: -1300px; left: 70%; top: 52%; }
.promo--pep .shadow { left: 830px; top: 880px; width: 1000px; height: 180px; }
.promo--pep .food { left: 800px; top: -26px; width: 1180px; opacity: 0; }
.promo--pep.on .food { animation: pepIn 1.3s var(--out) .12s forwards; }
.promo--pep .food__z { animation: zoomSlow 7.6s cubic-bezier(.25, .6, .4, 1) .3s both; }
.promo--pep .txt { left: 96px; top: 128px; width: 1000px; }
.promo--pep .w { transform: translate3d(-1400px, 0, 0); }
.promo--pep.on .w { animation: slideL 1.05s var(--out) both; animation-delay: calc(.28s + var(--k) * .16s); }
.promo--pep .w--big { font-size: 262px; line-height: .98; color: #ffd23f; margin-top: -6px; }
.promo--pep .ribbon { display: inline-block; margin: 22px 0 0 6px; padding: 12px 34px 10px; background: #f2b705; color: #2b1a00; font: 400 38px/1.1 var(--sign); text-transform: uppercase; transform: skewX(-9deg) scaleX(0); transform-origin: 0 50%; box-shadow: 0 8px 0 rgba(60, 8, 10, .4); }
.promo--pep.on .ribbon { animation: ribbonIn .8s var(--out) 1.05s forwards; }
.promo--pep .ribbon span { display: inline-block; transform: skewX(9deg); }
.chips { display: grid; grid-template-columns: 472px 472px; gap: 16px; margin: 26px 0 0 6px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 12px 26px; background: rgba(40, 6, 8, .78); border: 3px solid rgba(255, 255, 255, .22); border-radius: 18px; opacity: 0; transform: scale(.2); }
.promo.on .chip { animation: pop .7s var(--back) forwards; animation-delay: calc(1.5s + var(--c) * .15s); }
.chip__l { display: flex; flex-direction: column; gap: 6px; }
.chip__sz { font: 700 27px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.chip__tp { font: 600 21px/1 var(--body); color: rgba(255, 255, 255, .72); white-space: nowrap; }
.chip__p { font: 400 54px/1 var(--sign); white-space: nowrap; color: #ffd23f; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }

/* ---- 2. HOT WINGS ---- */
.promo--wings .bg { background: radial-gradient(ellipse at 30% 105%, #ff7a00 0%, #e2310f 30%, #6e0f0a 62%, #170c0a 100%); }
.promo--wings .rays { left: 30%; top: 70%; opacity: 0; }
.promo--wings .glow { z-index: 1; left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(ellipse at 32% 100%, rgba(255, 190, 40, .55), rgba(255, 190, 40, 0) 62%); opacity: 0; }
.promo--wings.on .glow { animation: fadeIn 1.2s linear .3s forwards, flicker 2.4s ease-in-out 1.5s infinite alternate; }
.promo--wings .shadow { left: 60px; top: 900px; width: 1000px; height: 150px; }
.promo--wings .food { left: -40px; top: 60px; width: 1020px; opacity: 0; }
.promo--wings.on .food { animation: wingsIn 1.25s var(--out) .12s forwards; }
.promo--wings .food__z { animation: zoomSlow 7.6s cubic-bezier(.25, .6, .4, 1) .3s both; transform-origin: 40% 60%; }
.promo--wings .txt { right: 96px; top: 92px; width: 940px; text-align: right; }
.promo--wings .hot { display: block; font: 400 330px/.9 var(--sign); color: #ffd23f; text-shadow: 0 10px 0 rgba(90, 16, 6, .6), 0 26px 50px rgba(0, 0, 0, .45); transform: scale(4); opacity: 0; transform-origin: 100% 60%; }
.promo--wings.on .hot { animation: slam .7s cubic-bezier(.2, .9, .25, 1.15) .3s forwards; }
.promo--wings .wings { display: block; overflow: hidden; padding: .06em .04em .12em; margin-top: -4px; font: 400 232px/.95 var(--sign); color: #fff7e8; text-shadow: 0 9px 0 rgba(90, 16, 6, .6); white-space: nowrap; }
.promo--wings .wings i { display: inline-block; font-style: normal; transform: translate3d(0, 120%, 0); }
.promo.on.promo--wings .wings i { animation: rise .6s var(--back) both; animation-delay: calc(.85s + var(--k) * .08s); }
.promo--wings .burst { z-index: 6; right: 130px; bottom: 36px; width: 440px; height: 440px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0) rotate(-20deg); }
.promo--wings.on .burst { animation: pop2 .9s var(--back) 1.75s forwards; }
.burst__bg { position: absolute; inset: 0; background: linear-gradient(160deg, #ffe05a, #f2b705 55%, #e69b00); filter: drop-shadow(0 12px 0 rgba(90, 16, 6, .55)); }
.burst b { position: relative; font: 400 98px/1 var(--sign); color: #7a1208; letter-spacing: -.01em; }
.embers { z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: -40px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #ffd36b, #ff7a00 55%, rgba(255, 122, 0, 0)); opacity: 0; will-change: transform, opacity; }
.promo--wings.on .embers i { animation: ember var(--t) linear infinite; animation-delay: var(--d); }

/* ---- 3. MEATBALL CALZONE ---- */
.promo--calz .bg { background: radial-gradient(circle at 32% 56%, #3f9a4c 0%, #2f7d3a 38%, #164a20 100%); }
.promo--calz .rays { left: 32%; top: 54%; }
.promo--calz .shadow { left: -40px; top: 880px; width: 1000px; height: 170px; }
.promo--calz .food { left: -90px; top: 6px; width: 1120px; opacity: 0; }
.promo--calz .food img { transform: scaleX(-1); }
.promo--calz.on .food { animation: calzIn 1.35s var(--out) .12s forwards; }
.promo--calz .food__z { animation: zoomSlow 7.6s cubic-bezier(.25, .6, .4, 1) .3s both; }
.promo--calz .kick { left: auto; right: 96px; }
.promo--calz .txt { right: 96px; top: 150px; width: 1060px; text-align: right; }
.promo--calz .w { transform: translate3d(1500px, 0, 0); }
.promo--calz.on .w { animation: slideR 1.05s var(--out) both; animation-delay: calc(.3s + var(--k) * .16s); }
.promo--calz .hl { font-size: 156px; }
.promo--calz .w--big { font-size: 200px; color: #ffd23f; margin-top: -4px; }
.promo--calz .coin { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 430px; height: 430px; margin: 26px 20px 0 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe672, #f2b705 62%, #d99a00); box-shadow: 0 14px 0 rgba(8, 40, 14, .55); opacity: 0; transform: scale(.4); }
.promo--calz .coin::before { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 5px dashed rgba(122, 18, 8, .55); }
.promo--calz .coin b { position: relative; font: 400 92px/1 var(--sign); color: #7a1208; }
.promo--calz.on .coin { animation: coinIn .9s var(--back) 1.8s forwards; }

/* ---- 4. SPAGHETTI & MEATBALLS ---- */
.promo--spag .bg { background: #f6efe2; overflow: hidden; }
.promo--spag .gingham { position: absolute; left: -240px; top: -240px; right: 0; bottom: 0; background-color: #fbf5ea; background-image: linear-gradient(90deg, rgba(200, 38, 43, .17) 50%, transparent 50%), linear-gradient(rgba(200, 38, 43, .17) 50%, transparent 50%); background-size: 120px 120px; will-change: transform; animation: gingham 20s linear infinite; }
.promo--spag .vig { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(60, 10, 10, .34) 100%); }
.promo--spag .kick { color: #7a1208; }
.promo--spag .shadow { left: 880px; top: 880px; width: 940px; height: 150px; }
.promo--spag .food { left: 840px; top: 40px; width: 1010px; opacity: 0; }
.promo--spag.on .food { animation: spagIn 1.6s cubic-bezier(.22, .8, .25, 1) .25s forwards; }
.promo--spag .food__z { animation: zoomSlow 7.6s cubic-bezier(.25, .6, .4, 1) .3s both; }
.promo--spag .txt { left: 96px; top: 150px; width: 1000px; }
.promo--spag .hl { color: #a11d21; font-size: 150px; }
.promo--spag .hl .w { text-shadow: 0 8px 0 rgba(255, 255, 255, .95), 0 18px 34px rgba(90, 20, 20, .25); }
.promo--spag .hl .w--amp { font-size: 120px; color: #2f7d3a; line-height: 1; margin: 4px 0 6px 6px; }
.promo--spag .spw { opacity: 0; transform: translate3d(0, 54px, 0) scale(.9); transform-origin: 0 60%; }
.promo--spag.on .spw { animation: stagger .8s var(--out) both; animation-delay: calc(.55s + var(--k) * .34s); }
.promo--spag .banner { position: relative; display: inline-block; margin: 36px 0 0 6px; padding: 16px 76px 14px 52px; background: #a11d21; color: #fff7e8; font: 400 116px/1 var(--sign); -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 50%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 50%, 100% 100%, 0 100%); box-shadow: none; opacity: 0; transform: translate3d(-60px, 0, 0); }
.promo--spag.on .banner { animation: bannerIn .9s var(--out) 1.95s forwards; }

/* ====================================================================
   TRANSITION SWOOSH (menu <-> promo, promo <-> promo)
   ==================================================================== */
#swoosh { position: absolute; inset: 0; z-index: 50; pointer-events: none; visibility: hidden; overflow: hidden; }
#swoosh.go { visibility: visible; }
#swoosh.rev { transform: scaleX(-1); }
.sw { position: absolute; top: -12%; height: 124%; left: 50%; width: 2800px; margin-left: -1400px; transform: translate3d(-3000px, 0, 0) skewX(-16deg); will-change: transform; }
.sw--y { background: linear-gradient(90deg, #f2b705 0 92%, #fff0a6 100%); }
.sw--r { background: linear-gradient(90deg, #c8262b 0 96%, #7a1015 100%); }
#swoosh.go .sw { animation: swoosh .9s var(--inout) forwards; }
#swoosh.go .sw--r { animation-delay: .09s; }

/* ---------- loader / debug ---------- */
#loader { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #1e2422; transition: opacity .6s linear; }
#loader.done { opacity: 0; pointer-events: none; }
.loader__t { font: 400 150px/1 var(--hand); color: var(--chalk); }
.loader__s { font: 700 24px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 239, 230, .5); }
#debug { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 200; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .72); color: #9dffb0; font: 600 22px/1.3 ui-monospace, Menlo, Consolas, monospace; white-space: pre; }

/* ---------- keyframes ---------- */
@keyframes wipe { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 -2% 0 0); clip-path: inset(0 -2% 0 0); } }
@keyframes grow { from { width: 0; } to { width: 100%; } }
@keyframes chalkIn { from { opacity: 0; transform: translate3d(-34px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kickIn { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes raysIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomSlow { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes slideL { from { transform: translate3d(-1400px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes slideR { from { transform: translate3d(1500px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pop2 { 0% { opacity: 0; transform: scale(0) rotate(-24deg); } 62% { opacity: 1; transform: scale(1.14) rotate(5deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes coinIn { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes ribbonIn { to { transform: skewX(-9deg) scaleX(1); } }
@keyframes pepIn { 0% { opacity: 0; transform: translate3d(1100px, 140px, 0) rotate(14deg) scale(.82); } 12% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); } }
@keyframes wingsIn { 0% { opacity: 0; transform: translate3d(-380px, 900px, 0) rotate(-14deg) scale(.88); } 14% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); } }
@keyframes calzIn { 0% { opacity: 0; transform: translate3d(-1100px, 40px, 0) rotate(-8deg) scale(.7); } 12% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); } }
@keyframes spagIn { 0% { opacity: 0; transform: translate3d(0, 30px, 0) scale(.88); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes slam { 0% { opacity: 0; transform: scale(4); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { transform: translate3d(0, 120%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes stagger { from { opacity: 0; transform: translate3d(0, 54px, 0) scale(.9); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes bannerIn { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes flicker { from { opacity: .75; } to { opacity: 1; } }
@keyframes ember { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--x), -1180px, 0) scale(.2); } }
@keyframes gingham { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(240px, 240px, 0); } }
@keyframes swoosh { from { transform: translate3d(-3000px, 0, 0) skewX(-16deg); } to { transform: translate3d(3000px, 0, 0) skewX(-16deg); } }

.block__hd { display: none; }

/* ====================================================================
   PORTRAIT (1080 x 1920) layout adjustments
   ==================================================================== */
.is-portrait .screen { padding: 96px 70px 120px; }
.is-portrait .frame { left: 24px; top: 24px; right: 24px; bottom: 24px; }
.is-portrait .title { font-size: 110px; }
.is-portrait .hd { min-height: 130px; }
.is-portrait .hd--duo { display: none; }
.is-portrait .block__hd { display: flex; margin: 0 0 6px; }
.is-portrait .body--duo .title { font-size: 96px; }
.is-portrait .row--3 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.is-portrait .row--3 .row__main { flex: none; width: 100%; }
.is-portrait .row--3 .row__prices { gap: 56px; }
.is-portrait .row--3 .pr b { font-size: 72px; }
.is-portrait .body--duo { grid-template-columns: 1fr; row-gap: 40px; }
.is-portrait .row__name { font-size: 56px; }
.is-portrait .row__desc { font-size: 26px; }
.is-portrait .pr { min-width: 128px; }
.is-portrait .pr b { font-size: 64px; }
.is-portrait .pr i { font-size: 20px; }
.is-portrait .row__prices { gap: 14px; }
.is-portrait .rows--cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.is-portrait .rows--cols > .row:nth-child(4n) { border-bottom: 3px dashed rgba(243, 239, 230, .16); }
.is-portrait .rows--cols > .row:last-child { border-bottom: 0; }
.is-portrait .body--duo .row__name, .is-portrait .rows--cols .row__name { font-size: 54px; }
.is-portrait .body--byo { grid-template-columns: 1fr; row-gap: 30px; }
.is-portrait .byo__row { height: 92px; }
.is-portrait .byo__sz { font-size: 52px; } .is-portrait .byo__pz { font-size: 68px; } .is-portrait .byo__tp { font-size: 48px; }
.is-portrait .lunch { margin-top: 18px; padding: 16px 22px; }
.is-portrait .lunch__d { font-size: 46px; } .is-portrait .lunch__p { font-size: 88px; }
.is-portrait .tops { font-size: 48px; column-gap: 28px; row-gap: 8px; }
.is-portrait .sub { font-size: 70px; }
.is-portrait .ft { bottom: 56px; font-size: 18px; }

.is-portrait .promo .kick { left: 64px; top: 70px; font-size: 24px; }
.is-portrait .promo--calz .kick { right: 64px; left: auto; }
.is-portrait .hl { font-size: 118px; }
.is-portrait .promo .food { left: 50%; margin-left: -520px; width: 1040px; top: 700px; }
.is-portrait .promo .shadow { left: 120px; top: 1620px; width: 840px; height: 140px; }
.is-portrait .promo .txt { left: 64px; right: 64px; top: 150px; width: auto; }
.is-portrait .promo--pep .w--big { font-size: 210px; }
.is-portrait .chips { grid-template-columns: 1fr 1fr; width: 100%; gap: 14px; margin-left: 0; }
.is-portrait .chip { padding: 12px 18px; }
.is-portrait .chip__p { font-size: 54px; }
.is-portrait .chip__sz { font-size: 26px; } .is-portrait .chip__tp { font-size: 20px; }
.is-portrait .promo--pep .ribbon { font-size: 32px; margin-left: 0; }
.is-portrait .promo--wings .hot { font-size: 260px; } .is-portrait .promo--wings .wings { font-size: 176px; }
.is-portrait .promo--wings .txt { text-align: left; }
.is-portrait .promo--wings .hot { transform-origin: 0 60%; }
.is-portrait .promo--wings .burst { right: 70px; bottom: 90px; width: 400px; height: 400px; }
.is-portrait .promo--wings .burst b { font-size: 88px; }
.is-portrait .promo--calz .txt { text-align: left; }
.is-portrait .promo--calz .hl { font-size: 124px; } .is-portrait .promo--calz .w--big { font-size: 150px; }
.is-portrait .promo--calz .w { transform: translate3d(1300px, 0, 0); }
.is-portrait .promo--calz .coin { width: 340px; height: 340px; margin: 14px 0 0 0; }
.is-portrait .promo--calz .coin b { font-size: 74px; }
.is-portrait .promo--spag .hl { font-size: 118px; } .is-portrait .promo--spag .hl .w--amp { font-size: 96px; }
.is-portrait .promo--spag .banner { font-size: 100px; }
.is-portrait .promo--pep .food, .is-portrait .promo--wings .food, .is-portrait .promo--calz .food, .is-portrait .promo--spag .food { left: 50%; }


/* ====================================================================
   LITE MODE (iPhone / iPad / small screens, or ?lite=1)
   Same look and timing; the heaviest always-running effects are removed to keep memory low.
   ==================================================================== */
.lite * { will-change: auto !important; }
.lite .chalk__img { animation: none; }
.lite .promo .rays, .lite .embers, .lite .promo--wings .glow { display: none; }
.lite .promo .vig { display: none; }
.lite .food__z, .lite .food__f { animation: none !important; }
.lite .promo--spag .gingham { animation: none; }
.lite .burst__bg { filter: none; }
.lite .hl .w, .lite .promo--wings .hot, .lite .promo--wings .wings { text-shadow: 0 6px 0 rgba(60, 8, 10, .5) !important; }
.lite .title, .lite .row__name, .lite .pr b, .lite .sub, .lite .lunch__p { text-shadow: none; }
.lite .sw--y { display: none; }
.lite .sw { width: 2400px; margin-left: -1200px; }