/* Экран меню. Строгие прямоугольники (без скруглений), тонкие линии. */
:root{
  --surface:#F7F2EA; --surface-2:#FFFFFF; --letterbox:#DED6C7;
  --ink:#211E1A; --muted:#837A6C; --hair:rgba(33,30,26,.12);
  --accent:#C6511B; --accent-ink:#fff; --photo-shadow:rgba(60,40,20,.30);
  --new:#5E8C3A; --halo:rgba(255,255,255,.9);
  /* Перчик остроты: свой красный, НЕ фирменный акцент — иначе на «синем» бренде
     перчик станет синим и перестанет читаться как «остро». */
  --spice:#D6371F; --spice-stem:#4E8B36;
  --script:'Caveat','Segoe Script',cursive;
  --display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --body:'Montserrat','Segoe UI',system-ui,sans-serif;
  /* Три места, где заведение выбирает шрифт само (Оформление → Шрифты).
     По умолчанию — ровно то, что было, поэтому у готовых меню ничего не съедет. */
  --f-name:var(--display);
  --f-price:var(--display);
  --f-sect:var(--script);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{ --surface:#15120E; --surface-2:#1E1912; --letterbox:#080706; --ink:#F4EEE3; --muted:#A99E8D; --hair:rgba(244,238,227,.14); --accent:#F0A23C; --accent-ink:#1a1207; --photo-shadow:rgba(0,0,0,.55); --new:#8FBF6B; --halo:rgba(0,0,0,.9); --spice:#F0503A; --spice-stem:#6FB050; color-scheme:dark; }
}
:root[data-theme="light"]{ --surface:#F7F2EA; --surface-2:#FFFFFF; --letterbox:#DED6C7; --ink:#211E1A; --muted:#837A6C; --hair:rgba(33,30,26,.12); --accent:#C6511B; --accent-ink:#fff; --photo-shadow:rgba(60,40,20,.30); --new:#5E8C3A; --halo:rgba(255,255,255,.9); --spice:#D6371F; --spice-stem:#4E8B36; color-scheme:light; }
:root[data-theme="dark"]{ --surface:#15120E; --surface-2:#1E1912; --letterbox:#080706; --ink:#F4EEE3; --muted:#A99E8D; --hair:rgba(244,238,227,.14); --accent:#F0A23C; --accent-ink:#1a1207; --photo-shadow:rgba(0,0,0,.55); --new:#8FBF6B; --halo:rgba(0,0,0,.9); --spice:#F0503A; --spice-stem:#6FB050; color-scheme:dark; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--letterbox);color:var(--ink);font-family:var(--body);display:grid;place-items:center;overflow:hidden;-webkit-font-smoothing:antialiased}

.stage{width:100vw;height:100vh;display:grid;place-items:center}
.board{position:relative;background:var(--surface);display:flex;overflow:hidden;width:100%;height:100%;--fscale:1}
.stage[data-frame="landscape"] .board{aspect-ratio:16/9;width:auto;height:auto;max-width:100vw;max-height:100vh;box-shadow:0 0 0 1px var(--hair),0 30px 80px rgba(0,0,0,.5)}
.stage[data-frame="portrait"] .board{aspect-ratio:9/16;width:auto;height:auto;max-width:100vw;max-height:100vh;box-shadow:0 0 0 1px var(--hair),0 30px 80px rgba(0,0,0,.5)}
.board.has-bg::after{content:"";position:absolute;inset:0;background:rgba(10,8,6,.34);z-index:0;pointer-events:none}
:root[data-theme="light"] .board.has-bg::after{background:rgba(255,255,255,.22)}
.area,.closed,.brandmark{position:relative;z-index:1}

.brandmark{position:absolute;right:clamp(1rem,2.4vmin,2rem);bottom:clamp(.8rem,2vmin,1.6rem);z-index:4;font-family:var(--script);font-size:clamp(1.2rem,3vmin,2.3rem);color:var(--accent);opacity:.9;pointer-events:none;line-height:1}
.board.no-brand .brandmark{display:none}

/* Плашка активного периода меню: «Завтрак», «Бизнес-ланч» */
.slottag{position:absolute;left:clamp(1rem,2.4vmin,2rem);top:clamp(.8rem,2vmin,1.6rem);z-index:4;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.65rem,1.5vmin,1rem);background:var(--accent);color:var(--accent-ink);
  padding:.4em .9em;pointer-events:none;line-height:1.2}
.board--closed .slottag{display:none !important}

/* Защита от выгорания матрицы: раз в сутки контент чуть сдвигается, чтобы статичные
   элементы (цены, рамки) не выжигались в одном и том же месте. Отключается в кабинете. */
.area{flex:1 1 auto;min-height:0;min-width:0;width:100%;display:flex;
  transform:translate(var(--burnx,0px), var(--burny,0px))}

/* Фото: flex (НЕ grid) — иначе img с height:100% не подчиняется высоте контейнера. */
.ph{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.ph img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px var(--photo-shadow))}
.ph--emoji{line-height:1;filter:drop-shadow(0 10px 16px var(--photo-shadow))}

.badges{display:flex;gap:.4em;justify-content:center}
.badge{font-family:var(--display);font-weight:700;font-size:clamp(.5rem,1.15vmin,.74rem);letter-spacing:.12em;text-transform:uppercase;padding:.26em .7em;border-radius:0;background:var(--accent);color:var(--accent-ink)}
.badge--new{background:var(--new)}
.price{font-family:var(--f-price);font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent)}
.name{font-family:var(--f-name);font-weight:700;line-height:1.04;text-wrap:balance}
.desc{font-family:var(--body);font-weight:400;color:var(--muted);line-height:1.28}
/* Острота: SVG-перчики ВПЛОТНУЮ за названием, мелкие (доля от кегля названия).
   Размер задан в em — перчик всегда пропорционален названию, на любой раскладке. */
.spicy{display:inline-flex;align-items:center;gap:.05em;margin-left:.3em;line-height:1;
  vertical-align:baseline;white-space:nowrap}
.spicy .chili{width:.58em;height:.58em;display:block;flex:0 0 auto}
.spicy .chili__body{fill:var(--spice)}
.spicy .chili__stem{fill:var(--spice-stem)}

/* Сетки 2/3/4/6/8. Отступы намеренно небольшие — иначе на 6/8 блюдам не остаётся места.
   ВАЖНО: плитка — flex-колонка, а НЕ grid с фиксированной строкой под фото.
   Раньше было grid-template-rows: <phpct> 1fr — фото забирало свою долю ЖЁСТКО, тексту
   доставался остаток, и при длинном названии/составе текст обрезался снизу (overflow:hidden).
   Отсюда жалоба «картинка съедает текст». Теперь наоборот: текст (flex:0 0 auto) забирает
   ровно столько, сколько ему нужно, и НИКОГДА не ужимается; фото (flex:1, max-height:phpct)
   отдаёт остаток. Ползунок размера фото продолжает работать — он задаёт ПОТОЛОК фото. */
.area.is-grid{display:grid;gap:clamp(.5rem,1.6vmin,1.4rem);
  padding:clamp(.5rem,1.4vmin,1.1rem) clamp(.7rem,1.8vmin,1.4rem) clamp(.7rem,2vmin,1.6rem)}
/* Цена прижата вправо, а в правом нижнем углу сидит фирменный знак заведения —
   без этой полосы они наезжают друг на друга. Нет знака — нет и полосы. */
.area.is-grid,.area.is-list{padding-bottom:clamp(2.1rem,5.8vmin,3.7rem)}
.board.no-brand .area.is-grid{padding-bottom:clamp(.7rem,2vmin,1.6rem)}
.board.no-brand .area.is-list{padding-bottom:clamp(1.2rem,3.6vmin,3rem)}
.cell{display:flex;flex-direction:column;justify-content:center;text-align:center;
  min-width:0;min-height:0;gap:clamp(.2rem,.7vmin,.5rem);overflow:hidden;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.cell__ph{flex:1 1 auto;width:100%;min-height:0;max-height:var(--phpct,56%)}
.cell__txt{flex:0 0 auto;width:100%;min-width:0;max-width:100%}
.area.align-left .cell{text-align:left}
.area.align-left .cell .badges{justify-content:flex-start}
/* Текст перед фото — тот же flex, только развёрнутый */
.area.txt-first .cell{flex-direction:column-reverse}
.area.txt-first .hero{flex-direction:column-reverse}
.area.txt-first .hero__txt{margin-top:0;margin-bottom:clamp(.4rem,1.4vmin,1.1rem)}
.cell .badges{margin-bottom:.1em}
/* Название — блоком сразу под фото, под ним состав, цена — отдельно, с отбивкой. */
.cell .name{font-size:calc(clamp(.9rem,2.5vmin,2rem) * var(--fscale));overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cell .desc{font-size:calc(clamp(.7rem,1.5vmin,1.05rem) * var(--fscale));max-width:30ch;margin:.15em auto 0;display:none}
.area.align-left .cell .desc{margin-left:0;margin-right:0}
/* Цена — всегда по правому краю плитки (ценник читается «столбиком», как в меню). */
.cell .price{display:block;width:100%;text-align:right;
  font-size:calc(clamp(1.1rem,3.1vmin,2.6rem) * var(--fscale) * var(--pscale,1));margin-top:.25em}
.area.is-grid[data-show-desc="1"] .cell .desc{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.area.is-grid[data-dense="1"] .cell .name{font-size:calc(clamp(.75rem,1.9vmin,1.4rem) * var(--fscale))}
.area.is-grid[data-dense="1"] .cell .price{font-size:calc(clamp(.9rem,2.3vmin,1.8rem) * var(--fscale) * var(--pscale,1))}

/* Блюдо дня: половина под блюдо, половина — строки */
.area.is-split{display:grid;gap:clamp(1rem,3vmin,2.4rem);padding:clamp(1.1rem,3.4vmin,2.8rem)}
.stage[data-frame="portrait"] .area.is-split, .area.is-split.portrait{grid-template-columns:1fr;grid-template-rows:1.05fr 1fr}
.hero{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.hero__ph{flex:1 1 auto;width:100%;min-height:0;overflow:hidden}
.hero__txt{flex:0 0 auto;margin-top:clamp(.4rem,1.4vmin,1.1rem)}
.area.align-left .hero__txt{text-align:left}
.eyebrow{font-family:var(--script);color:var(--accent);font-size:calc(clamp(1.4rem,3.6vmin,2.8rem) * var(--fscale));line-height:1;display:block}
.hero__name{font-family:var(--f-name);font-weight:900;font-size:calc(clamp(1.5rem,4.4vmin,3.4rem) * var(--fscale));line-height:1.02;margin-top:.05em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero__desc{font-family:var(--body);color:var(--muted);font-size:calc(clamp(.85rem,1.9vmin,1.35rem) * var(--fscale));line-height:1.3;margin-top:.35em;max-width:40ch;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hero__price{font-size:calc(clamp(1.8rem,5vmin,4rem) * var(--fscale) * var(--pscale,1));margin-top:.25em;display:block}
.rows{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
.rows .scroller{display:flex;flex-direction:column;width:100%}

/* «Блюдо дня со списком»: справа — ВСЕ блюда экрана сразу, без прокрутки и без картинок.
   Шрифт ужимается коэффициентом --lscale, пока список не поместится целиком. */
.rows.compact .row__ph{display:none}
.rows.compact .row{padding:calc(clamp(.3rem,.9vmin,.6rem) * var(--lscale,1)) 0;gap:.6em}
.rows.compact .row__desc{display:none}
.rows.compact .row__name{font-size:calc(clamp(.95rem,2.1vmin,1.6rem) * var(--fscale) * var(--lscale,1));-webkit-line-clamp:1}
.rows.compact .row__price{font-size:calc(clamp(1rem,2.4vmin,1.9rem) * var(--fscale) * var(--pscale,1) * var(--lscale,1))}
.rows.compact.of-scroll .scroller{animation:none}

/* Список по разделам: БЕЗ картинок — название, состав, острота, цена.
   Горизонтально — 2 колонки, вертикально — 1. Всё влезает сразу: шрифт ужимается (--lscale). */
.area.is-list{display:block;padding:clamp(1.2rem,3.6vmin,3rem);overflow:hidden}
.area.is-list .scroller{column-count:2;column-gap:clamp(2.5rem,6vmin,5rem)}
.stage[data-frame="portrait"] .area.is-list .scroller, .area.is-list.portrait .scroller{column-count:1}

/* «Список» (компактный): без картинок, всё влезает сразу.
   «Список карусель» — без класса .compact: остаётся как был (картинки + прокрутка). */
.area.is-list.compact .row__ph{display:none}
/* Фото в «Списке» — по настройке (.with-ph). Размер обязан множиться на --lscale:
   компактный список сам подбирает масштаб под высоту экрана (fitList), и картинка
   фиксированного размера в этот подбор не входила бы — список просто не сошёлся бы
   и уехал за нижний край. */
.area.is-list.compact.with-ph .row__ph{display:flex;
  width:calc(clamp(40px,6.6vmin,96px) * var(--lscale,1));
  height:calc(clamp(40px,6.6vmin,96px) * var(--lscale,1))}
.area.is-list.compact.with-ph .row__ph.ph--emoji{font-size:calc(clamp(1.4rem,4vmin,3rem) * var(--lscale,1))}
/* С фото строке нужен воздух, иначе картинки слипаются в сплошную полосу. */
.area.is-list.compact.with-ph .row{padding:calc(clamp(.35rem,1.2vmin,.9rem) * var(--lscale,1)) 0}
.area.is-list.compact .row{padding:calc(clamp(.3rem,1vmin,.7rem) * var(--lscale,1)) 0;gap:.7em}
.area.is-list.compact .row__name{font-size:calc(clamp(.95rem,2.1vmin,1.6rem) * var(--fscale) * var(--lscale,1))}
.area.is-list.compact .row__desc{font-size:calc(clamp(.72rem,1.4vmin,1rem) * var(--fscale) * var(--lscale,1))}
.area.is-list.compact .row__price{font-size:calc(clamp(1rem,2.4vmin,1.9rem) * var(--fscale) * var(--pscale,1) * var(--lscale,1))}
.area.is-list.compact .cat__title{font-size:calc(clamp(1.7rem,4vmin,3rem) * var(--fscale) * var(--lscale,1))}
.area.is-list.compact .cat{margin-bottom:calc(clamp(1rem,2.6vmin,2rem) * var(--lscale,1))}
.cat{break-inside:avoid;margin-bottom:clamp(1rem,2.6vmin,2rem)}
.cat__title{font-family:var(--f-sect);color:var(--accent);font-size:calc(clamp(1.7rem,4vmin,3rem) * var(--fscale));line-height:1;margin-bottom:.15em}
.cat__rule{height:2px;background:var(--accent);opacity:.55;margin-bottom:.5em}

/* Строка блюда (используется в "блюде дня" и в списке) */
.row{display:flex;align-items:center;gap:clamp(.6rem,1.6vmin,1.2rem);padding:clamp(.4rem,1.2vmin,.85rem) 0;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:none}
.board.no-div .row{border-bottom:none}
.row__ph{flex:0 0 auto;width:clamp(46px,9vmin,120px);height:clamp(46px,9vmin,120px)}
.row__ph.ph--emoji{font-size:clamp(1.6rem,5vmin,3.6rem)}
.row__main{flex:1 1 auto;min-width:0}
.row__name{font-family:var(--f-name);font-weight:700;font-size:calc(clamp(.95rem,2.1vmin,1.6rem) * var(--fscale));line-height:1.08;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row__desc{font-family:var(--body);font-weight:400;color:var(--muted);font-size:calc(clamp(.72rem,1.4vmin,1rem) * var(--fscale));line-height:1.22;margin-top:.1em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row__price{flex:0 0 auto;font-family:var(--f-price);font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent);font-size:calc(clamp(1rem,2.4vmin,1.9rem) * var(--fscale) * var(--pscale,1));white-space:nowrap}
.row .badge{font-size:clamp(.46rem,1vmin,.66rem);padding:.2em .55em}

/* ---- Переполнение: что делать, если блюда не влезли ----
   clip   — просто обрезать (по умолчанию)
   scroll — плавная непрерывная прокрутка (вверх и обратно)
   rotate — постранично, анимированная смена «страниц» */
.rows.of-scroll,.area.is-list.of-scroll{overflow:hidden}
.rows.of-scroll .scroller,.area.is-list.of-scroll .scroller{will-change:transform;animation:vscroll var(--scroll-dur,30s) linear infinite alternate}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--scroll-dist,0px)))}}
.rows.of-rotate .page,.area.is-list.of-rotate .page{animation:pagefade .5s ease both}
@keyframes pagefade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rows.of-scroll .scroller,.area.is-list.of-scroll .scroller{animation:none}
  .rows.of-rotate .page,.area.is-list.of-rotate .page{animation:none}
}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Смена страниц плитки: лёгкий каскад появления ячеек */
.area.is-grid .cell:nth-child(2){animation-delay:.05s}
.area.is-grid .cell:nth-child(3){animation-delay:.1s}
.area.is-grid .cell:nth-child(4){animation-delay:.15s}
.area.is-grid .cell:nth-child(5){animation-delay:.2s}
.area.is-grid .cell:nth-child(6){animation-delay:.25s}
.area.is-grid .cell:nth-child(7){animation-delay:.3s}
.area.is-grid .cell:nth-child(8){animation-delay:.35s}
@media (prefers-reduced-motion:reduce){ .cell{animation:none} }

/* Заставка «Закрыто» */
.closed{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:2rem;z-index:3}
.board--closed .area,.board--closed .brandmark{display:none}
.board--closed .closed{display:grid}
.closed__brand{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1;font-size:clamp(3rem,15vmin,12rem);text-wrap:balance}
.closed__sub{margin-top:.4em;font-family:var(--script);color:var(--accent);font-size:clamp(1.4rem,4vmin,3rem);line-height:1}
.closed__hours{margin-top:1.2em;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-family:var(--display);font-weight:600;font-size:clamp(.8rem,1.8vmin,1.2rem)}

/* Панель управления (демо) */
.panel{position:fixed;left:50%;bottom:clamp(.6rem,2vh,1.6rem);transform:translateX(-50%);z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem;background:var(--surface-2);border:1px solid var(--hair);border-radius:0;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:opacity .25s,transform .25s;font-family:var(--display);max-width:calc(100vw - 1rem)}
.panel.hidden{opacity:0;transform:translate(-50%,140%);pointer-events:none}
.panel__group{display:flex;gap:.3rem;align-items:center}
.panel__sep{width:1px;align-self:stretch;background:var(--hair);margin:.1rem .25rem}
.btn{font-family:var(--display);font-weight:700;letter-spacing:.02em;color:var(--ink);background:transparent;border:1px solid var(--hair);border-radius:0;padding:.5rem .7rem;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--ghost{color:var(--muted)}
.hint{position:fixed;left:50%;top:.9rem;transform:translateX(-50%);z-index:40;color:var(--ink);font-family:var(--display);font-size:.8rem;background:var(--surface-2);border:1px solid var(--hair);padding:.4rem .8rem;border-radius:0;transition:opacity .5s}
.hint.gone{opacity:0;pointer-events:none}

/* Окантовка текста для контраста на пёстром фоне */
.board.txt-halo :is(.name,.price,.desc,.spicy,.eyebrow,.hero__name,.hero__desc,.hero__price,.row__name,.row__desc,.row__price,.cat__title,.brandmark){
  text-shadow:0 0 2px var(--halo),0 1px 3px var(--halo),0 0 10px var(--halo),0 0 18px var(--halo);
}
.board.txt-plate .cell__txt{background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:0;padding:.45em .8em;backdrop-filter:blur(3px)}
.board.txt-plate .hero__txt{background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:0;padding:.6em .9em;backdrop-filter:blur(3px)}
.board.txt-plate .rows .row{background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:0;padding-left:.6em;padding-right:.6em;margin-bottom:.3em;border-bottom:none}

/* Полноэкранный слой: картинка / видео */
.medialayer{position:absolute;inset:0;z-index:2;display:none;background:#000;align-items:center;justify-content:center}
.board--media .medialayer{display:flex}
.board--media .area,.board--media .brandmark{visibility:hidden}
.board--closed .medialayer{display:none}
.medialayer img,.medialayer video{width:100%;height:100%;object-fit:contain;background:#000}
.medialayer .media-fallback{color:#888;font-family:var(--display);font-weight:600;font-size:1rem;text-align:center;padding:2rem}