:root{
  --pink:#d87885;
  --pink2:#c86a79;
  --teal:#50a1ba;
  --purple:#5e3f73;
  --yellow:#e6d24a;
  --goldLine:#d2b03a;

  /* JS overrides these */
  --topbar-h: 92px;
  --bottombar-h: 120px;
  --infoPadX: 52px;

  --infobar-h: clamp(82px, 12vh, 128px);
  --ticker-h: clamp(46px, 8vh, 84px);

  --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;
}

*{ 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); }

.frame{
  position:fixed; inset:0;
  display:flex;
  flex-direction:column;
  padding-top:var(--safeTop);
  padding-bottom:var(--safeBottom);
  background:#000;
}

/* Shared bar-image overlay */
.barImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
  pointer-events:none;
  user-select:none;
}

/* TOP BAR */
.topbar{
  height:calc(var(--topbar-h) + var(--safeTop));
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom: 3px solid var(--goldLine);
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,0.06) 0 10px, rgba(255,255,255,0) 10px 20px) 0 0/22px 22px,
    linear-gradient(180deg, var(--pink) 0%, var(--pink2) 100%);
}
.topbar-content{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 0 22px 10px 22px;
  color:#fff;
}

/* Hide fallback text when using your top-bar.png */
.topbar.useImage .topbar-content{ display:none; }

.topbar-left{ display:flex; gap:10px; align-items:baseline; white-space:nowrap; letter-spacing:0.4px; }
.disney{ font-weight:600; font-size:clamp(14px, 2.1vh, 18px); opacity:0.95; }
.pop{ font-weight:800; font-size:clamp(22px, 3.1vh, 28px); letter-spacing:1px; }
.century{ font-weight:600; font-size:clamp(14px, 2.1vh, 18px); opacity:0.95; }
.resort{ font-weight:700; font-size:clamp(12px, 1.9vh, 16px); letter-spacing:2.2px; opacity:0.9; }

.topbar-right{ display:flex; gap:10px; align-items:baseline; white-space:nowrap; letter-spacing:2px; font-weight:700; }
.roomLabel{ font-size:clamp(12px, 1.8vh, 16px); opacity:0.95; }
.roomNumber{ font-size:clamp(16px, 2.4vh, 20px); }

/* INFO BAR */
.infobar{
  height:var(--infobar-h);
  background: linear-gradient(180deg, #55a9c4 0%, var(--teal) 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px var(--infoPadX);
  color:#fff;
  border-bottom: 2px solid rgba(0,0,0,0.22);
}

.infobar-left{ 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);
}
.infobar-right{ 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 moon/sun icon */
.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, #55a9c4 0%, var(--teal) 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);
}

/* HERO (middle) — this is the key fix: no cropping/blur */
.hero{
  flex:1;
  position:relative;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.heroMedia{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain; /* switched from cover */
  display:none;
}
.heroYT{
  position:absolute;
  inset:0;
  display:none;
  background:#000;
}
.heroYT iframe{
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
}

/* TICKER */
.ticker{
  height:var(--ticker-h);
  background: linear-gradient(180deg, #65407a 0%, var(--purple) 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);
}
.ticker-inner{ display:flex; width:100%; }
.ticker-text{
  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; /* overridden by config */
}
.ticker-text::before{ content:"*** "; opacity:0.9; }
.ticker-text::after{ content:" ***"; opacity:0.9; }
@keyframes marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* BOTTOM BAR */
.bottombar{
  height:calc(var(--bottombar-h) + var(--safeBottom));
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: linear-gradient(180deg, #f0e06b 0%, var(--yellow) 50%, #d9c33d 100%);
}
.bottomBarMain{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:10px; /* leaves room visually above the purple line */
}
.bottombar-content{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  color:#6a3d7d;
  padding: 10px 10px 0 10px;
}

/* Purple line under the bottom bar */
.bottomPurpleLine{
  height:10px;
  background: linear-gradient(180deg, #7a4a92 0%, #5e3f73 100%);
}

/* Fallback icons (only if you don’t supply bottom-bar.png) */
.navItem{ display:flex; gap:10px; align-items:center; }
.navLabel{
  display:flex; flex-direction:column;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:800;
  font-size:clamp(10px, 1.55vh, 14px);
}
.navIcon{ width:clamp(26px, 4vh, 44px); height:clamp(26px, 4vh, 44px); border-radius:10px; position:relative; }
.navIcon.tv{ border:3px solid #d56b7b; border-radius:8px; }
.navIcon.tv::after{ content:""; position:absolute; left:25%; right:25%; bottom:-18%; height:3px; background:#d56b7b; border-radius:3px; }
.navIcon.mickey{ background:#6a3d7d; border-radius:50%; }
.navIcon.mickey::before, .navIcon.mickey::after{
  content:""; position:absolute; top:-35%; width:60%; height:60%;
  background:#6a3d7d; border-radius:50%;
}
.navIcon.mickey::before{ left:-10%; }
.navIcon.mickey::after{ right:-10%; }
.navIcon.wifi{ border:3px solid #6a3d7d; border-radius:10px; }
.navIcon.wifi::before{ content:""; position:absolute; left:18%; right:18%; top:22%; border-top:3px solid #6a3d7d; }
.navIcon.wifi::after{ content:""; position:absolute; left:35%; right:35%; bottom:20%; height:10%; background:#6a3d7d; border-radius:999px; }
.navIcon.bell{ background:#6a3d7d; border-radius:50% 50% 45% 45%; }
.navIcon.bell::after{ content:""; position:absolute; left:35%; right:35%; bottom:-15%; height:20%; background:#6a3d7d; border-radius:999px; }
.navIcon.castle{
  background:#6a3d7d;
  clip-path: polygon(10% 90%, 10% 55%, 22% 55%, 22% 35%, 35% 35%, 35% 55%, 45% 55%, 45% 25%, 55% 25%, 55% 55%, 65% 55%, 65% 35%, 78% 35%, 78% 55%, 90% 55%, 90% 90%, 10% 90%);
  border-radius:8px;
}

/* AUDIO GATE */
.audioGate{
  position:fixed;
  left:50%;
  bottom:calc(var(--bottombar-h) + var(--safeBottom) + 18px);
  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);
}

@media (max-width: 560px){
  .infobar{ padding: 8px var(--infoPadX); }
}

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