/* 90s Weather Channel — retro "Local on the 8s" look. Plain CSS, no build. */

@font-face {
  font-family: "StarJR";
  src: url("assets/fonts/StarJR/StarJR.ttf") format("truetype");
}
@font-face {
  font-family: "Star4000";
  src: url("assets/fonts/Star4000/Star4000.ttf") format("truetype");
}
@font-face {
  font-family: "Star4000_Large";
  src: url("assets/fonts/Star4000/Star4000_Large.ttf") format("truetype");
}
@font-face {
  font-family: "Star4000Small";
  src: url("assets/fonts/Star4000/Star4000_Small.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0f172a; /* slate, fills letterbox around the 4:3 stage */
  font-family: "StarJR", system-ui, sans-serif;
  color: #fff;
  cursor: none; /* couch/TV: no pointer */
}

/* CRT scanlines, drawn at screen resolution over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Fixed retro resolution; scaled to fit by app.js (transform set inline).
   Centered both axes so portrait phones letterbox top+bottom, not just bottom. */
#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 480px;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  font-size: 24pt;
  /* soften the crisp vector text into a CRT/480p broadcast look */
  filter: blur(0.6px) contrast(1.06) saturate(1.12);
  /* black outline on all text, the TWC hallmark */
  --o: 1.5px;
  text-shadow: var(--o) var(--o) 0 #000, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000,
    0 calc(-1 * var(--o)) 0 #000, var(--o) calc(-1 * var(--o)) 0 #000, var(--o) 0 0 #000,
    var(--o) var(--o) 0 #000, 0 var(--o) 0 #000, calc(-1 * var(--o)) var(--o) 0 #000,
    calc(-1 * var(--o)) 0 0 #000;
}

#top-bar {
  height: 20px;
  background: #2e2370;
}

#header {
  height: 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(to bottom, #ce6518, #4c2e6e);
}

/* Retro glossy-plaque logo, built in CSS (no trademarked artwork). The thick
   light rounded border + inset highlights mimic the beveled 90s broadcast bug;
   the stage-wide blur/scanlines do the rest of the 480p softening. */
#logo {
  height: 58px;
  margin-left: 40px;
  padding: 4px 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.88;
  border: 3px solid #d7ddff;
  border-radius: 12px;
  background: linear-gradient(to bottom, #3a40d0 0%, #1a1aa6 50%, #0c0c70 100%);
  /* top sheen + bottom shade = lozenge curvature; outer drop = lift off header */
  box-shadow: inset 0 3px 2px rgba(255, 255, 255, 0.55),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.6);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.logo-sm {
  font-family: "Star4000Small", system-ui, sans-serif;
  font-size: 11px;
  color: #ffd414;
}
.logo-lg {
  font-family: "Star4000", system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0.5px;
}

#title {
  color: #ffd414;
  text-align: left;
  line-height: 0.92; /* two-line title was colliding at 0.7 */
  white-space: pre-line; /* title text uses \n for two lines */
  padding-left: 20px;
}

#time-spacer {
  flex-grow: 1;
}

#time-block {
  position: relative;
  height: 70px;
  background: #2e2370;
  padding-right: 24px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  font-family: "Star4000Small";
  line-height: 0.95;
  /* slanted left edge, matching the original clip-path wedge */
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
}

#main {
  height: 310px;
  background: linear-gradient(to bottom, #4c2e6e, #ce6518);
  position: relative;
}

/* red wash behind the header/body while a severe-weather alert is on screen */
body.alerting #header {
  background: linear-gradient(to bottom, #b30000, #4c2e6e);
}
body.alerting #main {
  background: linear-gradient(to bottom, #7a0000, #b30000);
}

#screen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the inset blue panel most screens render inside */
.panel {
  width: 529px;
  height: 309px;
  background-image: url("assets/images/blueBackground.png");
  background-size: cover;
  padding: 12px;
  overflow: hidden;
  white-space: nowrap;
}

#footer {
  height: 80px;
  display: flex;
  flex-direction: column;
}

#footer-line {
  height: 4px;
  background: #8c96be;
}

#footer-bar {
  flex-grow: 1;
  background: #253968;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#marquee {
  white-space: nowrap;
  padding-left: 100%;
  /* duration set in JS (--marquee-dur) so pixel speed stays constant regardless
     of crawl length — a fixed duration makes long text fly by. */
  animation: marquee var(--marquee-dur, 22s) linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* -100% = element width (parent + text), the exact distance for the text to
       clear the left edge; pairs with the JS duration calc. */
    transform: translateX(-100%);
  }
}

/* ---- Current Conditions ---- */
.cc {
  display: flex;
  padding: 8px;
  height: 100%;
}
.cc-left,
.cc-right {
  width: 50%;
}
.cc-temp {
  font-family: "Star4000_Large";
  font-size: 52pt;
  line-height: 1;
}
.cc-desc {
  overflow: hidden;
}
.cc-icon {
  display: block;
  margin: 4px auto;
  max-height: 90px;
}
.cc-wind {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.cc-right {
  font-size: 0.9em;
  line-height: 1.25;
  text-align: left;
}
.cc-city {
  color: #c2a319;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-row {
  display: flex;
  justify-content: space-between;
}

/* ---- Latest Observations table ---- */
.obs {
  font-family: "Star4000Small";
  font-size: 0.9em;
  text-align: left;
}
.obs-row {
  display: flex;
  gap: 8px;
  line-height: 1.05;
}
/* flex-shrink:0 so long city names clip instead of squeezing the other columns */
.obs-city {
  flex: 0 0 280px;
  overflow: hidden;
}
.obs-temp {
  flex: 0 0 36px;
  text-align: right;
}
.obs-wx {
  flex: 0 0 110px;
  overflow: hidden;
}
.obs-wind {
  flex: 0 0 64px;
  display: flex;
  justify-content: space-between;
}
.obs-head {
  text-transform: uppercase;
  color: #ffd414;
}

/* ---- Extended Forecast ---- */
.ef {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  justify-content: space-around;
  padding: 10px 6px;
}
.ef-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: 0.8em;
}
.ef-name {
  color: #ffd414;
}
.ef-icon {
  max-height: 70px;
  margin: 6px 0;
}
.ef-short {
  font-size: 0.65em;
  white-space: normal;
  line-height: 1;
  min-height: 2.2em;
}
.ef-hi {
  color: #ffd414;
}
.ef-lo {
  color: #7fd0ff;
}

/* ---- Almanac ---- */
.alm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
}
.alm-row {
  display: flex;
  gap: 16px;
  font-size: 0.9em;
}
.alm-label {
  color: #ffd414;
}
.alm-moon {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8em;
}
.alm-moon img {
  max-height: 90px;
}

.loading {
  font-size: 0.8em;
  color: #ffd414;
}

/* ---- Radar ---- */
.radar {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-box {
  position: relative;
  width: 580px;
  height: 300px;
  /* own stacking context so frame mix-blend-mode composites against the basemap,
     not the filtered/transformed #stage ancestor (iOS WebKit ignores it otherwise) */
  isolation: isolate;
}
.radar-base {
  position: absolute;
  inset: 0;
}
.radar-frames {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.radar-frame {
  position: absolute;
  image-rendering: pixelated;
  transition: opacity 0.15s linear;
  /* the reflectivity PNGs have an opaque dark background; "lighten" drops it
     so the basemap shows through and only the bright echoes composite over */
  mix-blend-mode: lighten;
}
.radar-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  background: #ffd414;
  border: 1px solid #000;
  border-radius: 50%;
}
.radar-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ffd414;
  font-size: 0.7em;
}

/* ---- Regional Forecast (national temp map) ---- */
.natmap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.natmap-box {
  position: relative;
  width: 580px;
  height: 300px;
}
.natmap-base {
  position: absolute;
  inset: 0;
}
.natmap-pts {
  position: absolute;
  inset: 0;
}
/* each city: icon, big temp, tiny name — centered on its map coordinate */
.natmap-city {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
}
.natmap-icon {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.natmap-temp {
  color: #ffd414;
  font-family: "Star4000Small";
  font-size: 0.6em;
}
.natmap-name {
  font-size: 0.32em;
  color: #cfd6ff;
}

/* ---- Hourly Forecast table ---- */
.hourly {
  font-family: "Star4000Small";
  font-size: 0.82em;
  padding: 4px 12px;
}
.hr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.0;
}
.hr-time {
  flex: 0 0 120px;
}
.hr-icon {
  flex: 0 0 28px;
  height: 24px;
  image-rendering: pixelated;
}
.hr-temp {
  flex: 0 0 90px;
  text-align: right;
}
.hr-precip {
  flex: 1;
  text-align: right;
  color: #7fd0ff;
}
.hr-head {
  color: #ffd414;
}
.hr-head .hr-precip {
  color: #ffd414;
}

/* ---- Hourly Graph ---- */
.hgraph {
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* ---- Travel Forecast ---- */
.trav {
  font-family: "Star4000Small";
  font-size: 0.82em;
  padding: 4px 16px;
}
.trav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.0;
}
.trav-city {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trav-icon {
  flex: 0 0 26px;
  height: 22px;
  image-rendering: pixelated;
}
.trav-hi {
  flex: 0 0 56px;
  text-align: right;
  color: #ffd414;
}
.trav-lo {
  flex: 0 0 56px;
  text-align: right;
  color: #7fd0ff;
}
.trav-head {
  color: #ffd414;
}
.trav-head .trav-lo {
  color: #ffd414;
}

/* ---- Local Forecast (narrative) ---- */
.locfc {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 28px;
}
.locfc-name {
  color: #ffd414;
  text-align: center;
}
.locfc-text {
  font-size: 0.7em;
  line-height: 1.35;
  white-space: normal;
}

/* ---- Severe weather alert screen ---- */
.alertscreen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  text-align: center;
}
.alert-event {
  color: #ffd414;
  font-size: 1.1em;
  animation: alertblink 1s step-start infinite;
}
.alert-body {
  font-size: 0.7em;
  line-height: 1.2;
  white-space: normal;
}
.alert-more {
  font-size: 0.6em;
  color: #ffd0d0;
}
@keyframes alertblink {
  50% {
    opacity: 0.4;
  }
}

/* ---- City picker overlay ---- */
#menu {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 60, 0.92);
  overflow-y: auto;
  padding: 10px 0;
  font-family: "Star4000Small";
  font-size: 0.8em;
  z-index: 100;
}
#menu.open {
  display: block;
}
.menu-item {
  padding: 4px 24px;
  text-align: left;
  color: #fff;
  cursor: pointer;
}
.menu-item.sel {
  background: #ce6518;
  color: #ffd414;
}

/* ---- on-screen controls (prev / city / sound / next) ---- */
/* Layout is always defined; visibility is gated below. Phones (coarse pointer)
   show it permanently; desktop reveals it with the cursor on mouse movement;
   a true TV/remote (no pointer, no mouse) keeps the clean broadcast look. */
#touchbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0); /* clear the iOS home-bar inset */
  z-index: 10000; /* above the scanline overlay (9999) */
  justify-content: space-around;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.85);
}
#touchbar button {
  flex: 1;
  min-height: 52px; /* comfortable tap target */
  border: 1px solid #8c96be;
  border-radius: 6px;
  background: #253968;
  color: #ffd414;
  font-family: "Star4000Small", system-ui, sans-serif;
  font-size: 18px;
  cursor: pointer;
}
#touchbar button:active {
  background: #ce6518;
}
/* dim the sound button when muted so its state reads at a glance */
#tb-sound.muted {
  color: #8c96be;
}

body.show-controls #touchbar {
  display: flex;
}

@media (pointer: coarse) {
  /* phones have no key to reveal it, so restore the pointer the TV build hides */
  html,
  body {
    cursor: auto;
  }
  #touchbar {
    display: flex;
  }
  /* roomier city list rows for fingers */
  #menu {
    font-size: 1em;
  }
  .menu-item {
    padding: 12px 24px;
  }
}