/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Safe-area / TV overscan padding helpers */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Extra padding for TV/Chromecast overscan (no safe-area reported) */
  --tv-overscan: clamp(20px, 5vh, 90px);

  --primary: #ffd700;
  --background: #000000;
  --text: #f8fafc;
  --muted: #9ca3af;
  --header-text: #f8fafc;
  --highlight: #ffd700;


  /* Theme variables (overridden by Tier 2 app settings when available) */
  --primary-rgb: 255, 215, 0;
  --accent-from: var(--primary);
  --accent-to: var(--primary);
  --header-from: rgba(0, 0, 0, 0.9);
  --header-to: rgba(20, 20, 20, 0.9);
  --app-bg-from: #111;
  --app-bg-via: var(--background);
  --app-bg-to: #000;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--app-bg-via);
  color: var(--text);
  display: flex;
  flex-direction: column;

  /* Overscan-safe padding (Chromecast / TVs often crop edges) */
  padding-top: calc(24px + var(--safe-top));
  padding-right: calc(24px + var(--safe-right));
  padding-bottom: calc(36px + var(--safe-bottom));
  padding-left: calc(24px + var(--safe-left));

  /* Prefer modern viewport units where supported */
  min-height: 100vh;
  min-height: 100svh;

}


/* App shell */
.app{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Small build/version tag (helps confirm cached deployments) */
.version{
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-left: 0.75rem;
  color: var(--header-text);
}

/* TV safe scaling (overscan protection) */
:root{
  --tv-scale-base: 0.72;
  --tv-scale-mult: 1.09;
  --tv-scale: calc(var(--tv-scale-base) * var(--tv-scale-mult));
  --tv-shift: 0vh; /* (tuning) no vertical shift; keep header visible */ /* shrink whole UI slightly to stay inside overscan area */
}

html.tv-safe,
html.tv-safe body{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Scale the entire UI into a safe frame */
html.tv-safe .app{
  width: 100vw;
  height: 100vh;
  transform: scale(var(--tv-scale));
transform-origin: top center;
}

/* Keep existing padding, but slightly reduce so scaling doesn't over-shrink */
html.tv-safe body{
  padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(12px + var(--safe-left));
}


/* TV-safe layout tuning: give more room to Previous Numbers */
html.tv-safe .layout{
  grid-template-rows: minmax(0, 3.2fr) minmax(0, 1.4fr);
  gap: 0.9rem;
  padding: 0.8rem 1.0rem 0.9rem;
}
html.tv-safe .current-card,
html.tv-safe .history-card{ overflow: hidden; 
  padding: 0.75rem 1.05rem;
}

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.8rem;
  border-bottom: 2px solid rgba(var(--primary-rgb), 0.4);
  background: var(--header-from);
}

/* Welcome state: hide history card and let the current card breathe */
body.welcome-active .history-card {
  display: none !important;
}
body.welcome-active .layout {
  grid-template-rows: minmax(0, 1fr);
}

/* Brand area (logo + title + version) */
.brand-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand-group {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.brand-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
}
html.tv-safe .history-card{ margin-bottom: 6vh; }


.brand {
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 1rem;
  color: var(--header-text);
}

.org-name {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--highlight);
}

.session-id {
  font-size: 0.9rem;
  color: var(--header-text);
}

/* Layout */
.layout {
  flex: 1;
  display: grid;
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
  padding: 1.5rem 2rem 2rem;
}

.current-card,
.history-card {
  border-radius: 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.32);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  padding: 1.4rem 1.8rem;
}

/* Current number */
.current-label {
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}


/* Logo + number box row (logo sits OUTSIDE the number box) */
.current-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 42px);
  width: 100%;
  margin-top: 0.2rem;
  flex-wrap: wrap; /* helps small screens; TVs will stay side-by-side */
}

.current-logo-slot{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Give the logo its own column so it sits nicely in the left blank space */
  width: clamp(120px, 18vw, 240px);
}

.org-logo{
  height: min(16vh, 150px);
  width: auto;
  max-width: 20vw;
  object-fit: contain;
}


.current-content{
  display: flex;
  flex-direction: column;
  align-items: center; /* centers label/meta to the NUMBER BOX, not the whole card */
  justify-content: center;
}

.current-box {
  margin-top: 0.2rem;
  width: min(420px, 80vw);
  aspect-ratio: 4 / 3;
  border-radius: 1.4rem;
  border: 3px solid var(--primary);
  box-shadow:
    0 0 18px rgba(var(--primary-rgb), 0.6),
    0 0 40px rgba(var(--primary-rgb), 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Current number row: optional org logo + big number */
.current-row{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.2vw, 40px);
  padding: 0 clamp(10px, 2.2vw, 24px);
}

.current-number {
  font-size: clamp(4rem, 11vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(var(--primary-rgb), 0.5);
}

.current-meta {
  margin-top: 0.9rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
}

/* Flash animation when number changes */
.current-number.flash {
  animation: pop 0.5s ease-out;
}

@keyframes pop {
  0% {
    transform: scale(0.9);
    text-shadow: 0 0 0 rgba(255, 215, 0, 0.0);
  }
  40% {
    transform: scale(1.08);
    text-shadow: 0 0 30px rgba(var(--primary-rgb), 0.9);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 18px rgba(var(--primary-rgb), 0.4);
  }
}

/* History */
.history-header {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 8rem;
  overflow: hidden;
}

.chip {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.9rem;
  min-width: 38px;
  text-align: center;
  background: rgba(15, 23, 42, 0.8);
}

.chip--latest {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.4);
}

.history-empty {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Status bar */
.status-bar {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.4rem 1rem 0.7rem;
  color: var(--muted);

  /* Keep this away from TV overscan */
  margin-bottom: calc(var(--safe-bottom) + var(--tv-overscan));
  padding-bottom: calc(0.7rem + var(--safe-bottom));
}


/* Responsive tweaks */
@media (max-width: 768px) {
  .layout {
    padding-inline: 1rem;
    padding-top: 1rem;
    gap: 1rem;
  }

  .current-card,
  .history-card {
    padding-inline: 1.1rem;
  }
}

/* Large-screen / TV layout */
@media (min-width: 1400px) {
  .layout {
    padding-inline: 3rem;
    padding-top: 2.5rem;
    padding-bottom: 2.4rem;
    gap: 2.2rem;
    grid-template-rows: minmax(0, 3.5fr) minmax(0, 1.5fr);
  }

  .current-card,
  .history-card {
    padding: 2rem 2.6rem;
    border-radius: 1.6rem;
  }

  .current-box {
    margin-top: 0.4rem;
    width: min(720px, 70vw);
    aspect-ratio: 5 / 2;
    border-width: 4px;
    box-shadow:
      0 0 32px rgba(var(--primary-rgb), 0.6),
      0 30px 60px rgba(0, 0, 0, 0.9);
  }

  .current-number {
    font-size: clamp(6rem, 9vw, 8rem);
  }

  .current-meta {
    font-size: 1.8rem;
    margin-top: 1.1rem;
  }

  .chips-row {
    gap: 0.7rem;
  }

  .chip {
    padding: 0.3rem 0.85rem;
    font-size: 1.15rem;
    min-width: 70px;
  }

  .history-label {
    font-size: 1.1rem;
  }

  .status-bar {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.4rem 1rem 0.7rem;
  color: var(--muted);

  /* Keep this away from TV overscan */
  margin-bottom: calc(var(--safe-bottom) + var(--tv-overscan));
  padding-bottom: calc(0.7rem + var(--safe-bottom));
}

}


/* -------- Force landscape when casting environment reports portrait -------- */
html.force-landscape,
html.force-landscape body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.force-landscape .app {
  position: fixed;
  top: 0;
  left: 0;
  /* swap dimensions */
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}


/* TV-safe: shrink Previous Numbers section vertically */
html.tv-safe .history-title{ margin-bottom: 0.55rem; letter-spacing: 0.18em; font-size: 0.85rem; }
html.tv-safe .history-list{ gap: 0.5rem; }
html.tv-safe .history-pill{ padding: 0.55rem 0.7rem; font-size: 1.05rem; }
html.tv-safe .history-card{ border-radius: 18px; }


/* TV-safe: slightly smaller meta lines to avoid clipping */
html.tv-safe .current-meta{
  margin-top: 0.7rem;
  font-size: 1.02rem;
}


/* Hornets spin animation shown briefly before revealing a new draw */
.current-number.spin-hornets {
  /* Make sure this wins over .current-number.flash's animation */
  animation: hornetsSpinY 1.6s linear infinite;
  color: var(--primary);
  font-size: 5.00em;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@keyframes hornetsSpinY {
  from { transform: perspective(900px) rotateY(0deg); }
  to   { transform: perspective(900px) rotateY(360deg); }
}


/* --- Phone-friendly header/layout tweaks (avoid Cast/TV rules on small screens) --- */
@media (max-width: 560px) {
  .top-bar{
    padding: 0.55rem 1rem;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .brand-left{
    width: 100%;
    justify-content: center;
  }
  .brand-group{
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.1rem;
    column-gap: 0.5rem;
  }
  .brand{
    font-size: 0.9rem;
    text-align: center;
  }
  .version{
    font-size: 0.8rem;
    opacity: 0.85;
  }
  .org-name{
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 1.05rem;
  }
  .session-id{
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.8;
  }

  .current-wrap{
    gap: 14px;
  }
  /* Phone-optimised behaviour (matches your Phone Optimised build):
     keep the number box as the hero element and remove the big logo block */
  .current-logo-slot{
    display: none !important;
  }
  #orgLogo{display:none !important;}
  .current-wrap{
    justify-content: center;
  }
  .current-box{
    width: min(320px, 82vw);   /* was min(420px, 92vw) */
  }
}

.build-tag{font-size:0.85em;opacity:0.7;}