/* ============================================================
   Egyptian Theatre — Signage styles
   Shared by signage/player.html (the displays), the Signage
   Manager's preview iframe, and (later) signage/preshow.html.
   Brand palette matches css/site.css; type is sized for a TV
   read from across a lobby, not a laptop.

   SIZING: everything inside the stage is sized in container-query
   units (cqh/cqw) relative to .sig-stage, NOT viewport units. That
   is what makes auto-rotation work: when a portrait display is cast
   to a normally-mounted (landscape) TV, the stage is rotated 90°
   and sized to the swapped viewport; because the stage is a size
   container, cq* units resolve to that portrait canvas and the whole
   layout stays correct — no vh/vw pointing at the un-rotated frame.
   ============================================================ */

:root{
  --black:#0d0a06;
  --ink:#181209;
  --panel:#1f180d;
  --red:#bf2a1d;
  --red-bright:#e8402f;
  --gold:#e3a82b;
  --gold-dark:#b68a28;
  --gold-pale:#e8ce81;
  --cream:#f6edd8;
  --display:"Copperplate","Copperplate Gothic Bold","Cinzel",serif;
  /* Condensed heavy face for big titles — more visual weight, narrower so a
     long title fits. Oswald (webfont) with condensed system fallbacks,
     including Android's built-in sans-serif-condensed for offline devices. */
  --display-narrow:"Oswald","Arial Narrow","Roboto Condensed",sans-serif-condensed,var(--display);
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --logo-band:12cqh; /* bottom strip the logo owns — cards END above it (inset), so overlap is impossible */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  cursor:none; /* it's a sign */
}
img{max-width:100%;display:block}

/* ---------- layers ---------- */
.sig-stage{position:fixed;inset:0;background:var(--black);overflow:hidden;container-type:size;container-name:sig}
/* Per-display "safe area": content + chrome are pulled in from each edge by
   the display's inset (percent, set as --safe-* on the stage by the player)
   so a display-case frame that covers the screen edges doesn't clip anything.
   The units are cq* against the STAGE (the query container), so they resolve
   to the displayed canvas even after an auto-rotate. Default 0 = full bleed.
   The dead zone outside the safe area stays black (the stage background). */
.sig-content, .sig-chrome{
  inset: calc(var(--safe-top,0)*1cqh) calc(var(--safe-right,0)*1cqw) calc(var(--safe-bottom,0)*1cqh) calc(var(--safe-left,0)*1cqw);
}
/* Frames scroll in from below and out through the top. */
.sig-content{position:absolute;transition:transform .7s cubic-bezier(.4,0,.2,1);will-change:transform}
.sig-content.enter{transform:translateY(100%)}
.sig-content.exit{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.sig-content{transition:none}}

/* Calibration overlay (?calibrate=1): a dashed box at the safe-area edge with
   the dead zone dimmed, so staff can dial the inset until content clears the
   frame. */
.sig-calibrate{display:none}
/* The overlay lives INSIDE .sig-chrome, which is already inset by the safe
   area — so it fills that box (inset:0) to mark exactly the content edge.
   (Insetting it again by the safe vars would double-apply the margins and
   draw the guide smaller than the real content area.) */
body.calibrate .sig-calibrate{
  display:block;position:absolute;inset:0;z-index:40;pointer-events:none;
  border:0.4cqh dashed #6dff8f;box-shadow:0 0 0 100vmax rgba(0,0,0,.55);
}
.sig-calibrate b{
  position:absolute;left:50%;top:1.5cqh;transform:translateX(-50%);
  background:#000;color:#6dff8f;font:2.4cqh/1.3 monospace;font-weight:400;
  padding:.6cqh 1.4cqw;border-radius:.6cqh;white-space:nowrap;text-align:center;
}

/* Auto-rotate. The stage is sized to the SWAPPED viewport (width = viewport
   height, height = viewport width) and rotated 90° about its centre, so a
   portrait canvas exactly fills a landscape TV. The TV is then simply hung
   physically portrait — no TV-side rotation setting needed. width/height here
   are the ONLY viewport units in the file (they must track the real screen);
   everything inside sizes off this rotated canvas via cq* units. */
body.rotate-cw .sig-stage,
body.rotate-ccw .sig-stage{inset:auto;top:50%;left:50%;width:100vh;height:100vw}
body.rotate-cw .sig-stage{transform:translate(-50%,-50%) rotate(90deg)}
body.rotate-ccw .sig-stage{transform:translate(-50%,-50%) rotate(-90deg)}

.sig-chrome{position:absolute;pointer-events:none;z-index:20} /* inset comes from the safe-area rule above */

/* The always-on Egyptian logo (every screen, every frame). Bare mark,
   centered — no box, border, or background per the logo use guidelines;
   a soft shadow keeps it legible over light slides. Content layouts
   reserve the bottom band (see --logo-band) so text never runs into it. */
.sig-logo{
  position:absolute;left:50%;transform:translateX(-50%);bottom:1.7cqh;
  /* height-driven so the logo can NEVER extend above the reserved band,
     whatever the canvas aspect (width-driven sizing could) */
  height:calc(var(--logo-band) - 3.4cqh);
  z-index:22;
  transition:opacity .5s ease;
}
.sig-logo img{height:100%;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.75))}
/* Manual slides run truly full screen with the logo hidden — the artwork
   carries its own baked-in logo per the brand guidelines. */
.sig-stage.logo-off .sig-logo{opacity:0}

/* ---------- emergency / announcement message ---------- */
.sig-message{display:none;z-index:24}
.sig-message.on.banner{
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  min-height:14cqh;padding:2.5cqh 8cqw;
  font-family:var(--display);
  font-size:3.4cqh;line-height:1.4;letter-spacing:.04em;
  background:rgba(13,10,6,.94);
  border-top:3px solid var(--gold-dark);
  border-bottom:3px solid var(--gold-dark);
}
.sig-message.on.takeover{
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:absolute;inset:0;
  padding:8cqh 10cqw;
  font-family:var(--display);
  font-size:6cqh;line-height:1.35;letter-spacing:.04em;
  background:rgba(13,10,6,.97);
}
.sig-message.alert{color:#fff}
.sig-message.alert.banner{background:var(--red);border-top-color:#7a1a10;border-bottom-color:#7a1a10}
.sig-message.alert.takeover{background:linear-gradient(180deg,#8e1f15,#5c130c)}
.sig-message.info{color:var(--gold-pale)}

/* Staleness dot — staff-recognizable, invisible to patrons. */
.sig-stale{display:none}
.sig-stale.on{
  display:block;position:absolute;left:1cqw;bottom:1.5cqh;
  width:10px;height:10px;border-radius:50%;
  background:var(--gold-dark);opacity:.5;
}

/* ---------- full-bleed slide ---------- */
.sig-slide{position:absolute;inset:0;background:#000}
.sig-slide img{width:100%;height:100%;object-fit:contain}

/* ---------- event poster card ---------- */
.sig-event{
  position:absolute;inset:0 0 var(--logo-band);
  overflow:hidden;
  display:grid;grid-template-columns:44% 1fr;
  align-items:center;gap:3cqw;
  padding:4cqh 5cqw 2cqh 4cqw;
  background:
    radial-gradient(120% 90% at 20% 0%, #241a0c 0%, var(--black) 60%);
}
.sig-event-art{height:78cqh;display:flex;align-items:center;justify-content:center}
.sig-event-art img{
  max-height:100%;max-width:100%;
  border:3px solid var(--gold-dark);
  box-shadow:0 18px 60px rgba(0,0,0,.7);
}
.sig-event-art.noart{
  border:3px solid var(--gold-dark);height:70cqh;width:100%;
  background:var(--panel);
}
.sig-event-noart{
  font-family:var(--display);font-size:5cqh;text-align:center;
  color:var(--gold-pale);padding:4cqh 2cqw;align-self:center;margin:auto;
}
.sig-event.landscape{grid-template-columns:1fr;grid-template-rows:58% 1fr;padding:4cqh 5cqw}
.sig-event.landscape .sig-event-art{height:auto;min-height:0}
.sig-event.landscape .sig-event-art img{max-height:54cqh}

/* Poster-only mode (no event text) — artwork fills the whole frame, as big
   as the frame allows, above the logo band. */
.sig-event.no-details{grid-template-columns:1fr;grid-template-rows:1fr;gap:0;padding:1.5cqh 1.5cqw}
.sig-event.no-details .sig-event-art{height:100%;width:100%}
.sig-event.no-details .sig-event-art img{max-height:100%;max-width:100%}

.sig-event-info{display:flex;flex-direction:column;gap:2.4cqh;max-width:46cqw}
.sig-event.landscape .sig-event-info{max-width:none;align-items:center;text-align:center}
.sig-event-series{
  font-family:var(--display);font-size:2.6cqh;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-bright);
}
.sig-event-title{
  font-family:var(--display);font-size:7.2cqh;line-height:1.08;
  letter-spacing:.03em;color:var(--gold-pale);
  text-wrap:balance;
}
.sig-event-when{display:flex;gap:1.6cqw;align-items:baseline;flex-wrap:wrap}
.sig-event.landscape .sig-event-when{justify-content:center}
.sig-event-date{font-family:var(--display);font-size:3.6cqh;color:var(--cream)}
.sig-event-time{
  font-family:var(--display);font-size:3.6cqh;color:var(--gold);
  border:2px solid var(--gold-dark);border-radius:.6cqh;padding:.4cqh 1.2cqw;
}
.sig-event-price{font-size:3cqh;color:var(--cream);opacity:.95;line-height:1.5}
.sig-event-meta{display:flex;gap:1cqw;align-items:center}
.sig-event-rating{
  font-size:2.2cqh;font-weight:700;color:var(--cream);
  border:2px solid var(--gray,#8b8b8c);border-radius:.5cqh;padding:.2cqh .8cqw;opacity:.85;
}
.sig-event-type{
  font-family:var(--display);font-size:2.2cqh;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal,#5c9e96);
}

/* ---------- text-only high-contrast "Next Event" card ----------
   One element, two looks: black + gold at night, white + blue by day (the
   player flips the .day/.night class by local hour). Full-bleed theme colour
   (the background fills behind the logo band too), big type for lobby range. */
.sig-nextevent{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5cqh;text-align:center;padding:3cqh 4cqw calc(var(--logo-band) + 1.5cqh);
  text-wrap:balance;overflow:hidden;
}
.sig-nextevent.night{background:#000;color:#ffd21e}
.sig-nextevent.day{background:#fff;color:#161a9c}
.sig-ne-top{font-family:var(--display);font-size:4cqh;letter-spacing:.03em;line-height:1.1;max-width:92cqw}
/* The title is auto-sized by JS to fill the frame; this is just the pre-fit
   starting size so there's no flash of tiny text. */
.sig-ne-title{font-family:var(--display-narrow);font-weight:700;font-size:16cqh;line-height:.95;letter-spacing:0;max-width:98cqw}
.sig-ne-when{display:flex;flex-direction:column;gap:.6cqh}
.sig-ne-day{font-family:var(--display);font-size:7cqh;line-height:1.02}
.sig-ne-time{font-family:var(--display);font-size:5cqh;line-height:1.02;opacity:.95}
/* landscape screens have less height — a bit smaller so the day/time still fit */
body.orient-landscape .sig-ne-day{font-size:6cqh}
body.orient-landscape .sig-ne-time{font-size:4.4cqh}
body.orient-landscape .sig-ne-top{font-size:3.4cqh}

/* ---------- "Tonight at the Egyptian" board ---------- */
.sig-board{
  position:absolute;inset:0 0 var(--logo-band);
  display:flex;flex-direction:column;gap:3cqh;
  padding:6cqh 8cqw 2cqh;
  overflow:hidden;
  background:radial-gradient(100% 80% at 50% 0%, #241a0c 0%, var(--black) 65%);
}
.sig-board-title{
  font-family:var(--display);font-size:6.4cqh;letter-spacing:.06em;
  color:var(--gold-pale);text-align:center;
  border-bottom:3px solid var(--gold-dark);padding-bottom:2.6cqh;
}
.sig-board-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;
  padding:2cqh 0;border-bottom:1px solid rgba(182,138,40,.35);
}
.sig-board-name{font-family:var(--display);font-size:4.4cqh;color:var(--cream)}
.sig-board-price{font-size:2.4cqh;color:var(--gold-pale);opacity:.9;margin-top:.6cqh}
.sig-board-time{font-family:var(--display);font-size:4cqh;color:var(--gold);white-space:nowrap}
.sig-board-empty{font-size:3.4cqh;text-align:center;opacity:.9;padding-top:4cqh}
.sig-board-sub{
  font-family:var(--display);font-size:3cqh;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red-bright);margin-top:2cqh;
}

/* ---------- branded never-blank fallback ---------- */
.sig-fallback{
  position:absolute;inset:0 0 var(--logo-band);
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqh;
  background:radial-gradient(90% 70% at 50% 30%, #241a0c 0%, var(--black) 70%);
}
.sig-fallback>img{width:34cqw;max-width:560px}
.sig-fallback-rows{display:flex;flex-direction:column;gap:1.6cqh;text-align:center}
.sig-fallback-row{font-family:var(--display);font-size:3.4cqh;color:var(--gold-pale)}

/* ---------- portrait layout (the poster displays are 9:16) ----------
   Driven by a body class, not a media query: each display's orientation is
   set in the Signage Manager (Displays tab) and the player applies
   .orient-portrait / .orient-landscape — with the actual viewport as the
   fallback when a display has no explicit setting. The poster owns the
   frame: art fills ~2/3 of the height, the facts sit in a compact centered
   block beneath it, and the bottom band stays clear for the logo. */
body.orient-portrait .sig-event,
body.orient-portrait .sig-event.landscape{
  grid-template-columns:1fr;
  /* info row takes its natural height, the poster gets ALL the rest —
     maximized art, and neither row can ever run into the other */
  grid-template-rows:minmax(0,1fr) auto;
  padding:2cqh 3cqw;gap:1.6cqh;
}
/* The art is sized by its GRID ROW (100%), never by the canvas — if the
   row shrinks to make room for the info block, the image shrinks with it,
   so art and text can never overlap. */
body.orient-portrait .sig-event-art{height:100%;min-height:0;max-height:none}
body.orient-portrait .sig-event-art img{max-height:100%}
body.orient-portrait .sig-event.landscape .sig-event-art img{max-height:100%}
body.orient-portrait .sig-event-art.noart{height:100%;width:100%}
body.orient-portrait .sig-event-info{max-width:none;align-items:center;text-align:center;gap:1.6cqh}
body.orient-portrait .sig-event-when{justify-content:center}
body.orient-portrait .sig-event-title{font-size:4.6cqh}
body.orient-portrait .sig-event-series{font-size:2.2cqh}
body.orient-portrait .sig-event-date,
body.orient-portrait .sig-event-time{font-size:2.8cqh}
body.orient-portrait .sig-event-price{font-size:2.4cqh}
body.orient-portrait .sig-event-meta{justify-content:center}

body.orient-portrait .sig-board{padding:5cqh 6cqw 2cqh}
body.orient-portrait .sig-ident-name{font-size:7cqh}
body.orient-portrait .sig-board-title{font-size:4.6cqh}
body.orient-portrait .sig-board-name{font-size:3.4cqh}
body.orient-portrait .sig-board-time{font-size:3cqh}
body.orient-portrait .sig-board-row{flex-direction:column;align-items:flex-start;gap:.6cqh}

body.orient-portrait .sig-fallback>img{width:66cqw;max-width:none}
body.orient-portrait .sig-message.on.banner{font-size:2.8cqh;padding:2.5cqh 6cqw}
body.orient-portrait .sig-message.on.takeover{font-size:4.2cqh;padding:8cqh 8cqw}

/* ---------- screen-identification test card ---------- */
.sig-ident{
  position:absolute;inset:0 0 var(--logo-band);
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqh;
  text-align:center;padding:4cqh 6cqw;
  background:
    repeating-linear-gradient(45deg, transparent 0 4cqh, rgba(227,168,43,.05) 4cqh 8cqh),
    radial-gradient(90% 70% at 50% 30%, #241a0c 0%, var(--black) 70%);
}
.sig-ident-label{font-family:var(--display);font-size:2.6cqh;letter-spacing:.2em;text-transform:uppercase;color:var(--red-bright)}
.sig-ident-name{font-family:var(--display);font-size:9cqh;line-height:1.1;letter-spacing:.04em;color:var(--gold-pale);text-wrap:balance}
.sig-ident-note{font-size:2.8cqh;color:var(--cream);opacity:.9}
.sig-ident-sub{display:flex;gap:2cqw;flex-wrap:wrap;justify-content:center;font:2cqh/1.6 monospace;color:var(--gold)}
.sig-ident-time{font-family:var(--display);font-size:3.2cqh;color:var(--cream);opacity:.8}

/* ---------- first-run setup (no display identity yet) ---------- */
.sig-setup{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqh;
  text-align:center;padding:6cqh 8cqw;cursor:default;
}
.sig-setup h1{font-family:var(--display);font-size:5cqh;color:var(--gold-pale)}
.sig-setup p{font-size:2.6cqh;max-width:60cqw;opacity:.9}
.sig-setup code{color:var(--gold);font-size:2.4cqh}
.sig-setup-list{display:flex;flex-direction:column;gap:1.6cqh;min-width:40cqw}
.sig-setup-list button{
  font-family:var(--display);font-size:3cqh;letter-spacing:.05em;
  color:var(--cream);background:var(--panel);
  border:2px solid var(--gold-dark);border-radius:1cqh;
  padding:1.6cqh 2cqw;cursor:pointer;
}
.sig-setup-list button:hover,.sig-setup-list button:focus{background:#2a2012;border-color:var(--gold)}

/* ---------- debug overlay (?debug=1) ---------- */
.sig-debug{
  position:absolute;left:1cqw;top:1.5cqh;z-index:30;
  font:14px/1.5 monospace;color:#9f9;
  background:rgba(0,0,0,.7);padding:8px 12px;border-radius:6px;
  white-space:pre;
}