/* TV menu display. Everything is sized in vh/vw so it looks the same on 720p, 1080p and 4K sticks. */
:root {
  --bg: #15100c;
  --bg-2: #211810;
  --ink: #f6ecdc;
  --muted: #b8a68c;
  --rule: rgba(246, 236, 220, 0.14);
  --accent: #d9a441;
  /* accent tints (display.js recalculates these from the restaurant's accent colour) */
  --a06: rgba(217, 164, 65, 0.06); --a14: rgba(217, 164, 65, 0.14); --a16: rgba(217, 164, 65, 0.16);
  --a20: rgba(217, 164, 65, 0.20); --a22: rgba(217, 164, 65, 0.22); --a30: rgba(217, 164, 65, 0.30);
  --a45: rgba(217, 164, 65, 0.45);
  --veg: #3fa34d;
  --chili: #e0452b;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; cursor: none; }

.screen {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  padding: 3.2vh 3vw 2.6vh;          /* TV overscan safe area */
  background:
    radial-gradient(ellipse 70% 55% at 85% -10%, var(--a16), transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 110%, rgba(150, 60, 20, 0.18), transparent 70%),
    var(--bg);
}

/* ── Background logo (faint gold, behind everything on the menu) ── */
.bg-logo {
  position: absolute; top: 14vh; right: 14vw; bottom: 10vh; left: 14vw;
  background: center / contain no-repeat; pointer-events: none;
}
.menu > .top, .menu > .board, .menu > .specials { position: relative; z-index: 1; }

/* ── Header ── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.6vh; margin-bottom: 2vh;
  border-bottom: 0.15vh solid var(--rule);
}
.brand { display: flex; align-items: center;  min-width: 0; }
.brand img { height: 7vh; width: auto; object-fit: contain; }
.brand h1 { font-family: var(--serif); font-weight: 600; font-size: 4.6vh; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.brand p { margin-top: 0.7vh; font-size: 1.7vh; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.meta { display: flex; align-items: center;  flex-shrink: 0; }
.period {
  font-size: 1.9vh; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  padding: 0.8vh 1.4vw; border: 0.15vh solid var(--accent); border-radius: 99px; color: var(--accent);
}
.period small { color: var(--muted); letter-spacing: 0.08em; text-transform: none; font-weight: 400; margin-left: 0.6vw; }
.clock { font-size: 2.6vh; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ── Menu board ── */
.board { flex: 1; min-height: 0; overflow: hidden; font-size: var(--fs, 2.2vh); }
.cols {
  height: 100%;
  column-count: var(--cols, 3);
  column-gap: 3.2vw;
  column-fill: auto;
  column-rule: 0.12vh solid var(--rule);
}
.cat { margin-bottom: 1.6em; }
.cat h2 {
  display: flex; align-items: center; 
  font-family: var(--serif); font-weight: 600; font-size: 1.45em; color: var(--accent);
  margin-bottom: 0.5em; line-height: 1.15;
  break-after: avoid; break-inside: avoid;
}
.cat h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.55; }

.item { break-inside: avoid; padding: 0.32em 0; position: relative; }
.item.with-img { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.7em; align-items: center; }
.thumb { width: 3.2em; height: 3.2em; border-radius: 0.5em; object-fit: cover; background: var(--bg-2); }
.row { display: flex; align-items: baseline;  }
.name { font-weight: 500; line-height: 1.2; }
.dots { flex: 1; border-bottom: 0.12em dotted var(--rule); transform: translateY(-0.28em); min-width: 1em; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desc { color: var(--muted); font-size: 0.74em; line-height: 1.3; margin-top: 0.12em; max-width: 92%; }

.veg {
  display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.4em; vertical-align: 0.06em;
  border: 0.09em solid var(--veg); border-radius: 0.1em; position: relative;
}
.veg::after { content: ''; position: absolute; top: 0.12em; right: 0.12em; bottom: 0.12em; left: 0.12em; border-radius: 50%; background: var(--veg); }
.chili { display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.18em; border-radius: 50%; background: var(--chili); vertical-align: 0.12em; }
.veg + .chili { margin-left: 0.35em; }

/* Special (discounted) item */
.item.special {
  margin: 0.2em -0.6em; padding: 0.42em 0.6em;
  border-radius: 0.45em;
  background: linear-gradient(90deg, var(--a20), var(--a06));
  box-shadow: inset 0.22em 0 0 var(--accent);
}
.item.special .price { color: var(--accent); font-size: 1.12em; }
.was { color: var(--muted); font-weight: 400; text-decoration: line-through; font-size: 0.82em; margin-right: 0.35em; }
.tag {
  display: inline-block; margin-top: 0.25em;
  font-size: 0.62em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 0.18em 0.6em; border-radius: 99px;
}

/* ── Specials footer ── */
.specials {
  margin-top: 1.6vh; padding: 1.2vh 1.4vw;
  display: flex; align-items: center;  overflow: hidden;
  border-radius: 1vh;
  background: var(--a14);
  border: 0.12vh solid var(--a45);
  font-size: 2.1vh;
}
.specials .label { font-family: var(--serif); font-weight: 700; color: var(--accent); white-space: nowrap; font-size: 2.4vh; }
.specials .list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specials b { font-weight: 600; }
.specials .sep { color: var(--accent); margin: 0 0.8vw; }

/* ── Slideshow ── */
.slideshow { padding: 0; }
.slide {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0; transition: opacity 1.1s ease;
  background: var(--bg) center / cover no-repeat;
}
.slide.on { opacity: 1; }
.slide.photo::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(15, 10, 7, 0.92) 0%, rgba(15, 10, 7, 0.6) 42%, rgba(15, 10, 7, 0) 70%),
              linear-gradient(0deg, rgba(15, 10, 7, 0.6) 0%, transparent 35%);
}
.slide.plain {
  background:
    radial-gradient(circle at 78% 50%, var(--a22) 0, transparent 38%),
    repeating-radial-gradient(circle at 78% 50%, transparent 0 3.2vh, rgba(246, 236, 220, 0.035) 3.2vh 3.4vh),
    var(--bg);
}
.slide .initial {
  position: absolute; right: 13vw; top: 50%; transform: translate(50%, -50%);
  font-family: var(--serif); font-size: 46vh; line-height: 1; color: var(--a30);
}
.slide-logo {
  position: absolute; right: 5vw; top: 18vh; bottom: 14vh; width: 38vw;
  background: center / contain no-repeat;
}
.caption {
  position: absolute; left: 6vw; bottom: 13vh; max-width: 52vw;
}
.caption .kicker { font-size: 2.2vh; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); margin-bottom: 2vh; }
.caption h2 { font-family: var(--serif); font-weight: 600; font-size: 9vh; line-height: 1.02; margin-bottom: 2.2vh; }
.caption .desc { font-size: 2.8vh; max-width: 40vw; margin-bottom: 3.4vh; color: #e5d8c3; }
.caption .bigprice { display: flex; align-items: baseline;  font-size: 7vh; font-weight: 600; color: var(--accent); }
.caption .bigprice .was { font-size: 3.6vh; }
.caption .tag { font-size: 2vh; margin-top: 2.4vh; padding: 0.6vh 1.4vw; }
.slide-brand {
  position: absolute; left: 6vw; top: 6vh; z-index: 2;
  display: flex; align-items: center; 
}
.slide-brand h1 { font-family: var(--serif); font-size: 3.6vh; font-weight: 600; }
.slide-brand p { font-size: 1.5vh; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-top: 0.5vh; }
.slide-brand img { height: 6vh; }
.slide-meta { position: absolute; right: 4vw; top: 6vh; z-index: 2; }
.progress { position: absolute; left: 0; bottom: 0; height: 0.5vh; background: var(--accent); z-index: 2; width: 0; }
.progress.run { width: 100%; transition: width linear; }

/* ── Status / messages ── */
.message {
  width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6vh 8vw; font-size: 3vh; color: var(--muted);
}
.message h1 { font-family: var(--serif); color: var(--ink); font-size: 5vh; }
.message code { color: var(--accent); }
.offline {
  position: fixed; right: 1.2vw; bottom: 1.2vh; z-index: 10;
  width: 1.4vh; height: 1.4vh; border-radius: 50%; background: #e0452b; box-shadow: 0 0 0 0.4vh rgba(224, 69, 43, 0.25);
}
.sim {
  position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 10;
  background: #e0452b; color: #fff; font-size: 1.6vh; padding: 0.4vh 1.2vw; border-radius: 0 0 0.8vh 0.8vh;
}

/* Screen picker (opened without ?screen=) */
.picker { height: 100vh; overflow: auto; padding: 5vh 5vw; cursor: auto; font-size: 16px; }
.picker h1 { font-family: var(--serif); font-size: 40px; margin-bottom: 8px; }
.picker > p { color: var(--muted); margin-bottom: 28px; }
.picker .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.picker .card { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; }
.picker .card h2 { font-family: var(--serif); font-size: 20px; }
.picker .card p { color: var(--accent); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 4px 0 12px; }
.picker a { display: block; color: var(--ink); text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.picker a:hover { background: rgba(246, 236, 220, 0.08); }
.picker a code { color: var(--accent); float: right; }

.brand > * + * { margin-left: 1.4vw; }
.meta > * + * { margin-left: 1.6vw; }
.row > * + * { margin-left: 0.5em; }
.specials > * + * { margin-left: 1.2vw; }
.slide-brand > * + * { margin-left: 1.4vw; }
.caption .bigprice > * + * { margin-left: 1.4vw; }
.cat h2 > * + * { margin-left: 0.6em; }
.message > * + * { margin-top: 2vh; }
.cat h2::after { margin-left: 0.6em; }