/* =========================================================
   styles.css — az ablak KINÉZETE (három harmad)
   ========================================================= */

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

body {
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

/* A fő elrendezés: három oszlop egymás mellett, mindegyik flex:1 =
   egyenlő, azaz pontosan egy-egy harmad. */
.app {
  display: flex;
  height: 100vh;
  position: relative; /* hogy a jobb felső logó ehhez képest helyezkedjen el */
}

/* Logó a jobb felső sarokban (a teljes ablakhoz képest). */
.app-logo {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 52px;
  height: 52px;
  opacity: 0.9;
  z-index: 10;
  pointer-events: none; /* ne fogja el a kattintást a mögötte lévő tartalomtól */
}

.panel {
  flex: 1; /* mindhárom panel egyenlő szélességű -> 1/3 – 1/3 – 1/3 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* ha kevés a hely, csak az adott panel görgethető */
  min-width: 0; /* enged a szövegnek tördelni, ne feszítse szét az oszlopot */
}

/* Vékony elválasztó vonalak az oszlopok között. */
.idojaras-panel,
.vb-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.panel__cim {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.panel__labjegyzet {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.9;
}

.halvany {
  opacity: 0.7;
}

/* =======================================================
   1. HARMAD — VIHARJELZÉS
   ======================================================= */
.vihar {
  background: #37474f;
  transition: background 0.4s ease;
}
.vihar--alapfok {
  background: #1b7a3d; /* zöld — nincs élő viharjelzés */
}
.vihar--elsofok {
  background: #d68a00; /* sárga/borostyán — elsőfok */
}
.vihar--masodfok {
  background: #b3261e; /* piros — másodfok */
}

.vihar__osszesitett {
  text-align: center;
  padding: 4px 0 16px;
}
.vihar__kep {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.vihar__fokozat {
  font-size: 30px;
  font-weight: 800;
  margin-top: 6px;
}
.vihar__leiras {
  font-size: 14px;
  opacity: 0.95;
  margin-top: 4px;
}

.medencek {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.medence {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 11px;
}
.medence__kep {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.medence__nev {
  font-weight: 600;
  font-size: 14px;
}
.medence__szoveg {
  margin-left: auto;
  text-align: right;
}
.medence__fok {
  font-size: 12px;
  opacity: 0.9;
}

/* Élő webkamera a viharjelzés alatt. */
.cam {
  margin-top: 14px;
}
.cam__kep {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25); /* háttér, amíg az első kocka betölt */
  min-height: 120px;
}
.cam__felirat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.95;
}

/* =======================================================
   2. HARMAD — IDŐJÁRÁS / SZÉL
   ======================================================= */
.idojaras-panel {
  background: linear-gradient(160deg, #1f2b3a 0%, #16202c 100%);
}

/* Kompakt óra-sáv a tetején. */
.ora-sav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  opacity: 0.95;
}
.ora-sav__ido {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums; /* a számok ne "ugráljanak" */
}
.ora-sav__datum {
  font-size: 13px;
  opacity: 0.8;
  text-align: right;
}

/* A SZÉL kiemelt "hero" doboza. */
.szel {
  background: rgba(90, 170, 255, 0.14);
  border: 1px solid rgba(120, 190, 255, 0.35);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: center;
}
.szel__cimke {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.szel__fo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 2px 0;
}
.szel__ertek {
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.szel__egyseg {
  font-size: 20px;
  opacity: 0.85;
}
.szel__irany {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
}
/* A nyíl abba az irányba mutat, AMERRE a szél fúj. */
.szel__nyil {
  display: inline-block;
  font-size: 24px;
  transition: transform 0.4s ease;
}
.szel__extra {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 6px;
}
.szel__loket {
  font-size: 14px;
  margin-top: 4px;
  color: #ffd27a; /* a széllökés legyen figyelemfelkeltő */
}

/* Másodlagos időjárás: kis ikon + hőmérséklet + leírás. */
.ido-mas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
}
.ido-mas__ikon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.ido-mas__hom {
  font-size: 30px;
  font-weight: 800;
}
.ido-mas__leiras {
  font-size: 14px;
  text-transform: capitalize;
  opacity: 0.9;
}

/* Részletek: 2 oszlopos rács. */
.reszletek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.reszlet {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.reszlet__cimke {
  font-size: 11px;
  opacity: 0.7;
}
.reszlet__ertek {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}

/* Szél-térkép: elnyeli a maradék helyet a középső oszlop alján. */
.szelterkep {
  flex: 1; /* kitölti az üres területet a részletek és a lábjegyzet közt */
  display: flex;
  flex-direction: column;
  justify-content: center; /* függőlegesen középre */
  min-height: 0;
  margin-top: 14px;
}
/* A kivágó doboz: a Balaton-kivágás arányát adja, és levágja a többit.
   A videó eredetileg 970×692 (arány 1.402); a kivágás az EGÉSZ tóra:
   L=0.15, T=0.46, R=0.39, B=0.65 (szélesség 0.24, magasság 0.19 ->
   arány 232/132). */
.szelterkep__box {
  position: relative;
  width: 100%;
  aspect-ratio: 232 / 132;
  overflow: hidden; /* a kivágáson kívüli rész eltűnik */
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}
.szelterkep__media {
  position: absolute;
  top: 0;
  left: 0;
  /* A videót akkorára méretezzük, hogy a kivágott rész töltse ki a
     dobozt: szélesség = 100%/0.24, magasság = 100%/0.19. Az arányok
     úgy jönnek ki, hogy a videó NEM torzul. */
  width: 416.67%; /* 100 / 0.24 */
  height: 526.32%; /* 100 / 0.19 */
  /* Eltoljuk, hogy a kivágás bal-felső sarka (L,T) a doboz sarkába
     kerüljön: translateX = -L*100%, translateY = -T*100%. */
  transform: translate(-15%, -46%);
}
.szelterkep__felirat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.95;
}

/* Hibaüzenet (pl. ha az OpenWeather kulcs még nem aktív). */
.hiba {
  background: rgba(255, 80, 80, 0.18);
  border: 1px solid rgba(255, 120, 120, 0.5);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  grid-column: 1 / -1; /* a rácsban végig érjen */
}

/* =======================================================
   3. HARMAD — FOCI VB
   ======================================================= */
.vb-panel {
  background: linear-gradient(160deg, #23303a 0%, #1a2530 100%);
}
.vb__alcim {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 10px 0 8px;
}
.vb-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vb-meccs {
  display: grid;
  /* három oszlop: hazai csapat | eredmény/idő | vendég csapat */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  padding: 8px 10px;
}
.vb-meccs__hazai {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
}
.vb-meccs__vendeg {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}
.vb-zaszlo {
  font-size: 18px; /* a zászló-emoji legyen kicsit nagyobb, mint a szöveg */
  vertical-align: -1px;
}
.vb-meccs__kozep {
  text-align: center;
  min-width: 52px;
}
.vb-meccs__eredmeny {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.vb-meccs__ido {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
}
.vb-meccs__meta {
  font-size: 10px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Élő (épp játszott) meccs kiemelése. */
.vb-meccs--elo {
  border: 1px solid rgba(120, 255, 150, 0.5);
}
.vb-meccs--elo .vb-meccs__eredmeny {
  color: #7cf39a;
}

/* =======================================================
   3. HARMAD — FORECAST
   ======================================================= */
   
#sliderContainer {
    margin-top: 10px;
    margin-bottom: 10px;
}

#terkepSlider {
    width: 100%;
    cursor: pointer;
}

#sliderIdoJelzes {
    text-align: center;
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    font-weight: 500;
}


/* =======================================================
   MOBIL RESPONSIVE NÉZET (< 900px)
   ======================================================= */
@media (max-width: 900px) {
  body {
    height: auto;
    overflow-y: auto; /* Engedélyezi az egész oldal görgetését mobilon */
  }

  .app {
    flex-direction: column;
    height: auto;
  }

  .panel {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 24px 16px; /* Kényelmesebb belső margók */
    overflow-y: visible; /* A görgetést a body kezeli */
  }

  /* Szegélyek áthelyezése oldalról a panelek tetejére */
  .idojaras-panel,
  .vb-panel {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Óra sáv igazítása */
  .ora-sav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .ora-sav__datum {
    text-align: right;
  }

  /* Részletek rács mobil optimalizálása */
  .reszletek {
    grid-template-columns: 1fr 1fr; /* Megtartja a 2 oszlopot, hogy ne nyúljon túl hosszúra */
    gap: 8px;
  }

  /* FOCI VB MECCS — Javított kompakt elrendezés mobilon */
  .vb-meccs {
    grid-template-columns: 1fr auto 1fr; /* Megtartja a szép egymás melletti struktúrát */
    gap: 4px;
    padding: 10px 8px;
  }
  
  .vb-meccs__hazai {
    text-align: right;
    font-size: 13px;
  }
  
  .vb-meccs__vendeg {
    text-align: left;
    font-size: 13px;
  }

  .vb-meccs__kozep {
    min-width: 44px;
  }

  .vb-meccs__eredmeny {
    font-size: 15px;
  }
  
  .vb-meccs__ido {
    font-size: 11px;
  }
}

/* Extra kis kijelzők optimalizálása (pl. régebbi okostelefonok) */
@media (max-width: 380px) {
  .ora-sav {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ora-sav__datum {
    text-align: left;
  }
  .reszletek {
    grid-template-columns: 1fr; /* Nagyon kicsi kijelzőn már egymás alá rakja a részleteket */
  }
}