/* ТВ-меню v2 · спільний стиль трьох екранів 1920×1080.
   Кеглі під 43″ з 1 м (див. ПЛАН.html, розділ 5): мінімум 22px,
   назви 30, ціни 38. Дрібніше 22 не ставити. */
:root{
  --bg:#14100E; --bg2:#1B1512; --card:#211A16; --line:#342A23; --hex:#1E1814;
  --ink:#F3EBE3; --ink2:#BBAC9E; --ink3:#857668;
  --org:#FF5A00; --org2:#FF7B2E; --beige:#E0C098; --honey:#FFC83D;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased}

/* полотно 1920×1080, tv.js вписує його в будь-який екран */
.screen{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;
  transform-origin:0 0;color:var(--ink);background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%231E1814' stroke-width='2'/%3E%3C/svg%3E");
  font-feature-settings:'lnum' 1,'tnum' 1}
.state{position:absolute;inset:0;display:none}
.state.on{display:block;animation:stateIn .8s ease both}
@keyframes stateIn{from{opacity:0}to{opacity:1}}

/* шапка */
.hd{height:112px;display:flex;align-items:center;gap:22px;padding:0 52px}
.hd h1{margin:0;font-size:60px;font-weight:900;letter-spacing:9px;line-height:1}
.hd h1 em{font-style:normal;color:var(--org)}
.hd .sub{font-size:22px;font-weight:700;letter-spacing:3px;color:var(--ink2);text-transform:uppercase;margin-top:6px}
.hex{width:26px;height:30px;background:var(--org);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none}

/* низ: помаранчева смуга на всіх трьох ТВ — стіна читається як одне ціле */
.ft{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--org);color:#1A110C;
  display:flex;align-items:center;justify-content:space-between;padding:0 52px;
  font-size:28px;font-weight:800;line-height:1;white-space:nowrap}
.ft b{font-weight:900;color:#fff}
.ft .rt{font-size:24px;font-weight:800;letter-spacing:1px;opacity:.9}

/* плашки */
.tag{display:inline-block;background:var(--org);color:#fff;font-size:22px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px 5px;border-radius:8px;line-height:1;white-space:nowrap}
.tag.new{background:var(--honey);color:#1A110C}
.tag.ghost{background:var(--bg);border:2px solid var(--org);color:var(--org2);padding:4px 12px 3px}

/* ціни */
.p{font-weight:900;color:var(--org);letter-spacing:-1px;line-height:1;white-space:nowrap}
.w{font-size:22px;font-weight:600;color:var(--ink3);white-space:nowrap}
.desc{font-size:22px;font-weight:500;color:var(--ink2);line-height:1.25}

/* фото страв: вирізані, з тінню щоб відірвати від темного фону */
.ph{filter:drop-shadow(0 18px 26px rgba(0,0,0,.65))}
.glow{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,110,30,.22),rgba(255,110,30,0))}

/* повільне обертання піци-героя */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 120s linear infinite}
/* блиск на плашці «Хіт» раз на 9 с */
@keyframes shine{0%,80%{background-position:-120% 0}100%{background-position:220% 0}}
.shine{background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);
  background-size:60% 100%;background-repeat:no-repeat;animation:shine 9s ease-in-out infinite}

/* «прожектор»: рядки меню по черзі ледь підсвічуються — статичний борд оживає, але не мигтить */
@keyframes hl{0%,100%{background-color:rgba(255,90,0,0)}30%,70%{background-color:rgba(255,90,0,.13)}}
@keyframes hlp{0%,100%{transform:none}30%,70%{transform:scale(1.1)}}
.hl{animation:hl 3.2s ease-in-out;border-radius:10px}
.hl .p{animation:hlp 3.2s ease-in-out;transform-origin:right center}
/* картки мають свій фон — для них підсвічується рамка, а не заливка */
@keyframes hlc{0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(255,90,0,0)}30%,70%{border-color:var(--org);box-shadow:0 0 44px rgba(255,90,0,.35)}}
.cd.hl{animation:hlc 3.2s ease-in-out;border-radius:22px}
.set.hl{animation:hlc 3.2s ease-in-out;border-radius:20px}