/* Régi Safari (iOS 10) miatt: nincs flex gap, nincs CSS-változó, csak egyszerű flexbox. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: #05080c;
  color: #eef1f4;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
#keret {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  padding: 2.6vw 3.2vw 1.6vw;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.szam { font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.halvany { color: #8b96a3; }
.eso { color: #6fb3ff; }
.ho { color: #bfe3ff; }

/* felső sáv: óra + Budapest most */
#felso { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
#ido { -webkit-flex: 1.4; flex: 1.4; }
#ora { font-size: 17vw; font-weight: 200; line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; }
#datum { font-size: 3.5vw; font-weight: 400; margin-top: 0.6vw; }
#het { font-size: 1.9vw; color: #8b96a3; margin-top: 0.3vw; }

#most { -webkit-flex: 1; flex: 1; text-align: right; }
.cimke { font-size: 1.8vw; color: #8b96a3; text-transform: uppercase; letter-spacing: 0.12em; }
#most-sor { white-space: nowrap; line-height: 1; margin-top: 0.4vw; }
#most-ikon { font-size: 7vw; vertical-align: middle; margin-right: 1vw; }
#most-t { font-size: 11vw; font-weight: 300; vertical-align: middle; }
#most-leiras { font-size: 2.8vw; margin-top: 0.5vw; }
#most-reszlet { font-size: 1.9vw; color: #8b96a3; margin-top: 0.4vw; }

/* óránkénti sáv */
#orak {
  display: -webkit-flex; display: flex;
  margin-top: 2vw; padding: 1.2vw 0;
  border-top: 1px solid #1c2530; border-bottom: 1px solid #1c2530;
}
.ora-cella { -webkit-flex: 1; flex: 1; text-align: center; }
.ora-cella .o { font-size: 1.8vw; color: #8b96a3; }
.ora-cella .i { font-size: 3.4vw; line-height: 1.25; }
.ora-cella .t { font-size: 2.8vw; font-weight: 300; }
.ora-cella .e { font-size: 1.6vw; height: 2vw; }

/* alsó sáv: 3 nap + Kreischberg */
#also { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; margin-top: 1.8vw; min-height: 0; }
#napok { display: -webkit-flex; display: flex; -webkit-flex: 3; flex: 3; }
.nap-kartya, #kreis {
  background: #0d141c; border-radius: 1.2vw; padding: 1.4vw 1.6vw;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: space-around; justify-content: space-around;
  -webkit-flex: 1; flex: 1; margin-right: 1.2vw; overflow: hidden;
}
#kreis { -webkit-flex: 1.35; flex: 1.35; margin-right: 0; background: #0c1620; }
.nap-kartya .n, #kreis .n { font-size: 2.3vw; color: #8b96a3; }
.nap-kartya .n { text-transform: capitalize; }
.nap-kartya .i { font-size: 5.4vw; line-height: 1.2; }
.nap-kartya .t { font-size: 3.6vw; font-weight: 300; }
.nap-kartya .t .min { color: #8b96a3; }
.nap-kartya .e { font-size: 1.9vw; }
#kreis .sor { white-space: nowrap; line-height: 1.2; margin-top: 0.3vw; }
#kreis .i { font-size: 5vw; vertical-align: middle; margin-right: 0.6vw; }
#kreis .t { font-size: 6vw; font-weight: 300; vertical-align: middle; }
#kreis .r { font-size: 2vw; color: #c4ccd5; }

#lab {
  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
  font-size: 1.5vw; color: #5d6875; margin-top: 1.2vw;
}
#allapot.rossz { color: #ff8a65; }

/* Kreischberg havazás-jelzés */
#kreis.riado { background: #123a5c; box-shadow: inset 0 0 0 2px #7cc8ff; }
#kreis.riado.eros { background: #1b5486; box-shadow: inset 0 0 0 3px #d4f0ff; }
#kreis.riado .n { color: #d4f0ff; font-weight: 600; }
.riado-mikor { font-size: 3.4vw; font-weight: 500; color: #fff; line-height: 1.15; }
.riado-cm { font-size: 2.6vw; color: #bfe9ff; }

/* álló helyzet */
@media (orientation: portrait) {
  #keret { padding: 2.6vw 3.2vw 1.6vw; }
  #felso { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; }
  #ido { text-align: center; -webkit-flex: none; flex: none; }
  #ora { font-size: 21vw; }
  #datum { font-size: 4.4vw; }
  #het { font-size: 2.4vw; }
  #most { text-align: center; margin-top: 2vw; -webkit-flex: none; flex: none; }
  .cimke { font-size: 2.2vw; }
  #most-ikon { font-size: 8.5vw; }
  #most-t { font-size: 13vw; }
  #most-leiras { font-size: 3.4vw; }
  #most-reszlet { font-size: 2.5vw; }
  #orak { margin-top: 2.5vw; }
  .ora-cella .o { font-size: 2.5vw; }
  .ora-cella .i { font-size: 4.5vw; }
  .ora-cella .t { font-size: 3.5vw; }
  .ora-cella .e { font-size: 2.2vw; height: 2.8vw; }
  #also { -webkit-flex-direction: column; flex-direction: column; -webkit-flex: none; flex: none; }
  #napok { -webkit-flex: none; flex: none; }
  .nap-kartya .n, #kreis .n { font-size: 2.7vw; }
  .nap-kartya .i { font-size: 5vw; }
  .nap-kartya .t { font-size: 3.4vw; }
  .nap-kartya .e { font-size: 2.3vw; }
  #kreis { margin-top: 1.6vw; -webkit-flex: none; flex: none; }
  #kreis .i { font-size: 5vw; }
  #kreis .t { font-size: 6vw; }
  #kreis .r { font-size: 2.5vw; }
  .riado-mikor { font-size: 4.6vw; }
  .riado-cm { font-size: 3.4vw; }
  #lab { font-size: 2.1vw; margin-top: auto; padding-top: 1.2vw; }
}

/* éjszaka: csak az óra és a kinti hőmérséklet, tompán */
body.ejjel { background: #000; }
body.ejjel #orak, body.ejjel #also, body.ejjel #lab, body.ejjel #het,
body.ejjel #most-reszlet, body.ejjel #most-leiras, body.ejjel .cimke { display: none; }
body.ejjel #keret { -webkit-justify-content: center; justify-content: center; }
body.ejjel #ora, body.ejjel #datum, body.ejjel #most-t { color: #4a4f55; }
body.ejjel #most-ikon { opacity: 0.35; }