/* =========================================================================
   Mizu Sushi & Hibachi Express — Digital Menu Board (Theme A: Modern
   Japanese Minimal). Menu-first 4-column grid, no poster hero, compact
   utility block. 16:9 TVs (1920x1080 primary; 1366x768 & 3840x2160 too).
   Grid columns per screen are set inline by script.js from menu.json.
   ========================================================================= */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #111318;
  --border: rgba(255, 255, 255, 0.08);
  --red: #e63946;
  --red-dark: #b91c1c;
  --gold: #f6c453;
  --text: #ffffff;
  --muted: #a8a8a8;
  --dim: #6b7280;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Force 1920x1080 canvas — JS overrides width/height for non-native viewports */
.menu-board {
  width: 100vw;
  height: 100vh;
  transform-origin: top left;
  transform: scale(var(--board-scale, 1));
  padding: 1.1vh 0.9vw;
  display: grid;
  grid-template-rows: 9vh 1fr 5vh;
  gap: 1.2vh;
  background:
    radial-gradient(circle at top left, rgba(230, 57, 70, 0.14), transparent 28%),
    linear-gradient(180deg, #0f1115 0%, #08090c 100%);
}

/* ------------------------------------------------------------ Header */
.top-header {
  min-height: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--red);
  border-radius: 14px;
  padding: 0.7vh 1.2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 1vw; }
.logo-box {
  width: clamp(88px, 7vw, 140px);
  height: clamp(44px, 5vh, 72px);
  border: 2px solid var(--red);
  border-radius: 8px;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
}
.logo-main { font-size: clamp(22px, 1.8vw, 38px); font-weight: 900; letter-spacing: 0.04em; }
.logo-sub { margin-top: 0.35em; color: var(--gold); font-size: clamp(7px, 0.55vw, 12px); font-weight: 800; }
.brand h1 { margin: 0; font-size: clamp(30px, 3vw, 62px); line-height: 0.95; }
.brand p { margin: 0.4vh 0 0; color: var(--muted); font-size: clamp(14px, 1.1vw, 24px); }
.screen-title { color: var(--red); font-size: clamp(24px, 2vw, 44px); font-weight: 900; letter-spacing: 0.05em; }

/* -------------------------------------------------------- Screen grid */
.screen-grid {
  min-height: 0;
  display: grid;
  gap: 0.8vw;
  /* grid-template-columns set inline per screen from menu.json */
}

/* Panels */
.panel, .qr-card, .info-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.panel {
  min-height: 0;
  padding: clamp(12px, 1vw, 22px);
  overflow: hidden;                 /* no spill; sizing tuned to fit */
  display: flex;
  flex-direction: column;
}
.panel-large { display: flex; flex-direction: column; }
.panel-fullscreen { display: flex; flex-direction: column; height: 100%; overflow: visible; }
.panel-fullscreen h2 { font-size: clamp(42px, 4.5vw, 86px) !important; }
.title-note {
  display: inline-block;
  margin-left: 0.6em;
  font-size: 0.55em;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0.15em 0.5em;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Accent image: fills remaining space at the bottom of a panel */
.panel-has-accent { display: flex; flex-direction: column; }
.panel-accent-image {
  flex: 1 1 0;
  min-height: 80px;
  max-height: 220px;
  margin-top: 0.6vw;
  border-radius: 6px;
  overflow: hidden;
}
.panel-accent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.stack {
  min-height: 0;
  display: grid;
  gap: 0.8vw;
  /* grid-template-rows set inline per region */
}

.panel h2, .qr-card h2, .info-card h2 {
  margin: 0;
  color: var(--red);
  font-size: clamp(21px, 1.45vw, 34px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.panel h2::after, .info-card h2::after {
  content: "";
  display: block;
  margin-top: 0.65vh;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(230, 57, 70, 0.15));
}
.section-note, .panel-header p {
  margin: 0.6vh 0 0;
  color: var(--muted);
  font-size: clamp(11px, 0.72vw, 16px);
  line-height: 1.25;
}

/* Hibachi header with a small useful image, not a giant hero */
.panel-header.with-mini-image {
  display: grid;
  grid-template-columns: 1fr clamp(110px, 9vw, 180px);
  gap: 1vw;
  align-items: stretch;
  margin-bottom: 1.2vh;
}
.mini-food-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(230, 57, 70, 0.35);
  min-height: 8vh;
}
.mini-food-image img { width: 100%; height: 100%; object-fit: cover; }

/* Menu list */
.menu-list {
  min-height: 0;
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.78vh, 13px);
  overflow: hidden;
}
.two-column-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.15vw;
  row-gap: clamp(8px, 0.8vh, 14px);
}
/* Full-screen single-column mode: items fill available height evenly */
.fullscreen-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-height: 0;
  gap: 0;
}
.fullscreen-items .menu-item {
  flex: 1 1 0;
  align-items: center;
  padding: 0 1vw;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fullscreen-items .menu-item:last-child { border-bottom: none; }
.fullscreen-items .menu-item h3 { font-size: clamp(40px, 4.2vw, 80px); font-weight: 800; }
.fullscreen-items .menu-item strong { font-size: clamp(38px, 4vw, 76px); }
.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65vw;
  padding-bottom: clamp(4px, 0.4vh, 8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.menu-item h3 { margin: 0; color: var(--text); font-size: clamp(16px, 1.05vw, 25px); line-height: 1.08; font-weight: 850; }
.menu-item p {
  margin: 0.25vh 0 0;
  color: var(--muted);
  font-size: clamp(10px, 0.68vw, 15px);
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-item strong { color: var(--gold); font-size: clamp(15px, 0.98vw, 24px); font-weight: 900; white-space: nowrap; line-height: 1.1; }
.menu-list.compact { gap: clamp(8px, 0.9vh, 15px); }
.menu-list.compact .menu-item h3 { font-size: clamp(17px, 1.08vw, 25px); }
.menu-list.compact .menu-item strong { font-size: clamp(16px, 1vw, 24px); }
.menu-item.highlight h3 { color: #fff; }
.menu-item.highlight strong { color: var(--gold); }
.spicy { font-size: 0.8em; margin-left: 0.35em; vertical-align: middle; }
.raw-fish { font-size: 0.8em; margin-left: 0.35em; vertical-align: middle; }

/* --------------------------------------------------------- Utility block */
.utility {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.8vw;
}
.qr-card {
  padding: clamp(12px, 0.9vw, 20px);
  text-align: center;
  border-color: rgba(230, 57, 70, 0.78);
}
.qr-card h2 { font-size: clamp(18px, 1.25vw, 28px); margin-bottom: 1vh; }
.qr-card img { width: min(72%, 190px); aspect-ratio: 1; object-fit: contain; background: white; padding: 8px; border-radius: 10px; }
.qr-card p { margin: 0.7vh 0 0; color: var(--gold); font-size: clamp(10px, 0.72vw, 15px); font-weight: 800; word-break: break-word; }

.info-card {
  padding: clamp(12px, 0.9vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 1.1vh;
  overflow: hidden;
}
.info-line span, .hours-compact span {
  display: block;
  color: var(--red);
  font-size: clamp(10px, 0.7vw, 14px);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.info-line strong { display: block; color: var(--text); font-size: clamp(17px, 1.15vw, 26px); line-height: 1.1; word-break: break-word; }
.hours-compact p { margin: 0.45vh 0; color: var(--muted); font-size: clamp(12px, 0.8vw, 17px); line-height: 1.18; }
.disclaimer { margin: 0.8vh 0 0; color: var(--dim); font-size: clamp(9px, 0.6vw, 12px); line-height: 1.2; }

/* DoorDash delivery badge */
.doordash-card {
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doordash-img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px;
}

/* Page rotation fade (multi-page screens like Sushi) */
.screen-grid.fade { opacity: 0; transition: opacity 0.4s ease; }
.page-indicator {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.1em 0.7em;
  border-radius: 6px;
  font-size: 0.9em;
}

/* --------------------------------------------------------- Bottom bar */
.bottom-bar {
  min-height: 0;
  background: var(--red-dark);
  color: white;
  border-radius: 12px;
  padding: 0 1.4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  font-size: clamp(13px, 0.95vw, 21px);
  font-weight: 800;
  white-space: nowrap;
}
.bottom-bar span { overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------- Error overlay */
.error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.error-overlay[hidden] { display: none; }   /* display:flex would override [hidden] */
.error-box { text-align: center; border: 3px solid var(--red); border-radius: 16px; padding: 3rem 4rem; background: var(--panel); }
.error-box h2 { color: var(--red); font-size: clamp(24px, 2vw, 44px); margin: 0 0 0.5em; }
.error-box p { color: var(--muted); font-size: clamp(16px, 1vw, 24px); margin: 0; }

/* Responsive fallback for 1366x768 */
@media (max-width: 1500px) {
  .menu-board { grid-template-rows: 8.5vh 1fr 5vh; padding: 1vh 0.8vw; gap: 1vh; }
  .screen-grid { gap: 0.65vw; }
  .panel { padding: 11px; }
  .two-column-items { column-gap: 0.8vw; row-gap: 7px; }
  .menu-item p { -webkit-line-clamp: 1; }
  .panel-header.with-mini-image { grid-template-columns: 1fr 110px; }
  .qr-card img { width: min(72%, 150px); }
}

/* 4K can breathe more */
@media (min-width: 2500px) {
  .menu-board { padding: 1.3vh 1vw; }
  .screen-grid { gap: 0.9vw; }
}