:root{
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);

  --font: Avenir, "Avenir Next", "Avenir Next LT Pro", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Overlay vars (JS sets from config/localStorage) */
  --infoTopPct: 10.5;
  --infoHeightPct: 14.0;
  --tickerBottomPct: 12.0;
  --tickerHeightPct: 10.0;
  --infoPadX: 56px;

  /* YouTube scale (kept for fine-tuning if needed) */
  --ytScale: 1.0;

  --teal1:#55a9c4;
  --teal2:#50a1ba;
  --purple1:#65407a;
  --purple2:#5e3f73;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  padding:0;
  background:#000;
  font-family:var(--font);
  overflow:hidden;
}
button{ font-family:var(--font); }

.app{
  position:fixed;
  inset:0;
  display:flex;
  background:#000;
  padding:0;
}

/* Centering shell */
.hero{
  position:relative;
  flex:1;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;       /* center the 16:9 frame vertically (black bars split) */
  justify-content:center;   /* center horizontally */

  /* Fullscreen-stable viewport sizing */
  height: 100vh;
  height: 100dvh; /* modern browsers */
  height: 100svh; /* Safari stable viewport */
}

/* 16:9 "video frame" */
.videoBox{
  position:relative;
  background:#000;
  overflow:hidden;
  aspect-ratio: 16 / 9;

  /* Fit the 16:9 box inside whatever screen you have (no cropping) */
  width: min(100vw, calc(100vh * (16 / 9)));
  height: min(100vh, calc(100vw * (9 / 16)));

  /* Make sure Safari's dynamic viewport doesn’t break the math */
  width: min(100vw, calc(100dvh * (16 / 9)));
  height: min(100dvh, calc(100vw * (9 / 16)));

  width: min(100vw, calc(100svh * (16 / 9)));
  height: min(100svh, calc(100vw * (9 / 16)));
}

/* YouTube stage */
.ytStage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
}

/* YouTube iframe fills the 16:9 box exactly */
.ytStage iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;

  /* Prevent pausing / showing controls by click */
  pointer-events:none;

  /* Optional nudge scale if YouTube shows tiny edges */
  transform: scale(var(--ytScale));
  transform-origin:center;
}

/* Overlay layer on top of video (relative to SAME 16:9 box) */
.overlayLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Teal info overlay positioned by % of the videoBox */
.infoBar{
  position:absolute;
  left:0;
  right:0;

  /* IMPORTANT: anchored to VIDEOBOX, not screen */
  top: calc(var(--infoTopPct) * 1%);

  height: calc(var(--infoHeightPct) * 1%);
  padding: 10px var(--infoPadX);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  background: linear-gradient(180deg, var(--teal1) 0%, var(--teal2) 100%);
  border-bottom: 2px solid rgba(0,0,0,0.22);
}

/* Typography */
.infoLeft{ min-width:45%; }
.welcomeLine{
  font-size:clamp(18px, 2.4vh, 24px);
  font-weight:700;
  letter-spacing:1.2px;
  opacity:0.95;
}
.familyName{
  margin-top:4px;
  font-size:clamp(44px, 6.1vh, 70px);
  font-weight:500;
  letter-spacing:0.4px;
  line-height:1.02;
  text-shadow: 0 1px 0 rgba(0,0,0,0.20);
}

.infoRight{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:40%;
}
.weatherTimeRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}
.weatherGroup{ display:flex; align-items:center; gap:8px; }
.temp{
  font-size:clamp(24px, 3.6vh, 40px);
  font-weight:700;
  letter-spacing:1px;
}
.time{
  font-size:clamp(26px, 3.9vh, 44px);
  font-weight:700;
  letter-spacing:1.5px;
}
.date{
  font-size:clamp(16px, 2.2vh, 22px);
  font-weight:700;
  letter-spacing:2.4px;
  opacity:0.95;
}

/* Simple sun/moon */
.weatherIcon{
  width:clamp(22px, 3.2vh, 34px);
  height:clamp(22px, 3.2vh, 34px);
  border-radius:50%;
  position:relative;
  background: rgba(255,255,255,0.92);
  overflow:hidden;
}
.weatherIcon.moon::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  transform: translateX(28%);
  background: linear-gradient(180deg, var(--teal1) 0%, var(--teal2) 100%);
}
.weatherIcon.sun::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.30);
}

/* Ticker overlay positioned by % of the videoBox */
.ticker{
  position:absolute;
  left:0;
  right:0;

  /* IMPORTANT: anchored to VIDEOBOX, not screen */
  bottom: calc(var(--tickerBottomPct) * 1%);

  height: calc(var(--tickerHeightPct) * 1%);
  background: linear-gradient(180deg, var(--purple1) 0%, var(--purple2) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top: 2px solid rgba(0,0,0,0.18);
  border-bottom: 2px solid rgba(0,0,0,0.18);
}

.tickerInner{ display:flex; width:100%; }

.tickerText{
  white-space:nowrap;
  padding-left:100%;
  font-size:clamp(18px, 2.6vh, 26px);
  font-weight:500;
  letter-spacing:0.3px;
  animation: marquee 70s linear infinite;
}
.tickerText::before{ content:"*** "; opacity:0.9; }
.tickerText::after{ content:" ***"; opacity:0.9; }

@keyframes marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Audio gate */
.audioGate{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:5;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  background: rgba(0,0,0,0.68);
  color:#fff;
  font-weight:700;
  letter-spacing:0.6px;
  cursor:pointer;
  display:none;
  backdrop-filter: blur(6px);
}

/* Calibration overlay */
.calHud{
  position:absolute;
  top:18px;
  left:18px;
  z-index:10;
  padding:12px 14px;
  border-radius:12px;
  background: rgba(0,0,0,0.65);
  color:#fff;
  font-size:14px;
  display:none;
}
.calHud.on{ display:block; }
.calTitle{ font-weight:800; letter-spacing:0.4px; margin-bottom:6px; }
.calValues{ font-family: ui-monospace, Menlo, Consolas, monospace; opacity:0.95; margin-bottom:6px; }
.calHelp{ opacity:0.9; line-height:1.35; }

/* Optional: show outlines while calibrating */
body.calibrating .infoBar{ outline: 3px solid rgba(255,255,255,0.85); }
body.calibrating .ticker{ outline: 3px solid rgba(255,255,255,0.85); }

@media (prefers-reduced-motion: reduce){
  .tickerText{ animation:none; padding-left:0; }
}