/* ==============================================
   Játékoldal nyitólapja — Netflix-szerű hero (v1.41.0)
   ==============================================

   DOM: openingHero.js. A `[game-page="opening"].has-hero` alatt minden
   szabály — a hero nélküli (hibás betöltés) nyitólap a régi marad.

   Asztalon: balra nagy borító, jobbra a részletek; a háttér a borító
   elmosva. Mobilon: felül a borító teljes szélességben, alatta minden.

   A pop-art bőr (Szódolgozat) a nyitólap kártyáját és gombjait is festi
   (`html[data-skin="popart"] [game-page="opening"] …`); ez a fájl utána
   töltődik, és ahol kell, `html` előtaggal legalább olyan erős. A játékon
   belüli pop-art (Füzi, buborékok) érintetlen. */

[game-page="opening"].has-hero {
  --hero-text: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.72);
  --hero-line: rgba(255, 255, 255, 0.18);
  --hero-accent: #e50914;
  position: relative;
}

/* A hero szélesebb, mint a 800 px-es játékdoboz — filmes arány kell neki. */
.game-content:has([game-page="opening"].has-hero:not(.hide)) {
  width: min(1120px, 100%) !important;
  max-width: 100% !important;
}

/* A régi kártya és a pop-art Füzi-színpad a nyitólapon már nem kell —
   ugyanazt a hero mondja el. (A kártya a DOM-ban marad: a streakViewer
   eseményei és a menü adatai rajta ülnek.) */
[game-page="opening"].has-hero .content-container,
html [game-page="opening"].has-hero .fuzi-stage {
  display: none !important;
}

[game-page="opening"].has-hero > .grid {
  width: 100%;
}

.opening-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 24px 8px 12px;
  color: var(--hero-text);
  font-family: var(--main-font);
  animation: opening-hero-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes opening-hero-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- Háttér: elmosott borító a teljes képernyőn ---------- */
/* Amíg a hero-nyitólap látszik, a lap háttere is sötét — a bőrök (pl. a
   pop-art sárga pöttyös `body`-háttere) különben a fix rétegek mellett,
   a görgető tartalom szélén kilátszanának. Játék közben a bőr visszajön. */
html:has([game-page="opening"].has-hero:not(.hide)),
html:has([game-page="opening"].has-hero:not(.hide)) body {
  background: #120f1f;
}

/* A blur a széleken átlátszóvá fakítja a réteget — ott a lap saját háttere
   (pl. a pop-art sárga pöttyös) kilátszana. Ezért túlnyúlik a képernyőn,
   és alatta egy sötét alap ül (box-shadow nem kell, a ::before adja). */
[game-page="opening"].has-hero .opening-hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #120f1f;
  pointer-events: none;
}
.opening-backdrop {
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 22, 0.35) 0%, rgba(10, 8, 22, 0.75) 60%, rgba(10, 8, 22, 0.92) 100%),
    var(--hero-image, linear-gradient(135deg, #5b2a86, #1e4f8a)) center / cover no-repeat;
  filter: blur(38px) saturate(1.25);
  transform: scale(1.15);
  animation: opening-backdrop-in 1s ease both;
}
@keyframes opening-backdrop-in {
  from { opacity: 0; }
}

/* ---------- Borító ---------- */
.opening-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #5b2a86 0%, #c0507f 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.opening-hero-media-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}
.opening-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: opening-kenburns 14s ease-out both;
}
@keyframes opening-kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12) translate(-1.5%, -1%); }
}
.opening-hero-top10 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  padding: 4px 0 6px;
  border-radius: 0 0 8px 0;
  background: var(--hero-accent);
  color: #fff;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.opening-hero-top10 small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.opening-hero-top10 b {
  font-size: 20px;
  font-weight: 900;
}

/* ---------- Részletek ---------- */
.opening-hero-details {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
}
.opening-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.opening-hero-tag {
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--hero-accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.opening-hero-type {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--hero-text);
  font-weight: 500;
}
.opening-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.opening-hero-rating svg {
  width: 15px;
  height: 15px;
  fill: gold;
  stroke: goldenrod;
}
html .opening-hero .opening-hero-title {
  margin: 0;
  /* !important: a globális címsor-méretek (arculatonként) erősebbek lennének. */
  font-size: clamp(28px, 3.6vw, 46px) !important;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--hero-text);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}
.opening-hero-creator {
  margin: -6px 0 0;
  font-size: 14px;
  color: var(--hero-muted);
}
.opening-hero-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Haladás ---------- */
.opening-hero-progress {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hero-muted);
}
.opening-hero-progress-track {
  flex: 0 1 240px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.opening-hero-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #f9ed32, #8dc63f);
  transform-origin: left;
  animation: opening-progress 0.9s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.opening-hero-progress-fill.mastered {
  background: linear-gradient(90deg, #f9c532, #ffe27a);
}
@keyframes opening-progress {
  from { transform: scaleX(0); }
}

/* ---------- Mód-gombok: nagy, Netflix-szerű "Lejátszás" gombok ---------- */
/* A 7streak stílusa `width: min-content`-et és középre igazítást ad — itt
   a sor a részletek-oszlop teljes szélességét kapja, balra zárva. */
html [game-page="opening"].has-hero .content-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  justify-content: flex-start;
  justify-self: stretch;
  width: auto;
  margin: 4px 0 0;
}
html [game-page="opening"].has-hero .opening-hero-details > * {
  justify-self: stretch;
}
html [game-page="opening"].has-hero .content-buttons > .grid {
  justify-items: start;
  align-content: start;
  max-width: 240px;
}
html [game-page="opening"].has-hero .content-buttons .button.white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  height: auto;
  margin: 0 !important;
  padding: 10px 22px 10px 18px;
  border-radius: 8px;
  border: 0;
  background: rgba(109, 109, 110, 0.55);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, background 0.15s ease;
}
html [game-page="opening"].has-hero .content-buttons .button.white h5 {
  color: #fff !important;
  font-size: 18px;
  font-weight: 800 !important;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-transform: none;
}
/* Az ELSŐ mód a fő művelet: fehér gomb lejátszás-ikonnal (mint a Netflix
   "Lejátszás"-a); a többi áttetsző szürke. */
html [game-page="opening"].has-hero .content-buttons > :first-child .button.white,
html [game-page="opening"].has-hero .content-buttons > .button.white:first-child {
  background: #ffffff;
  color: #141414;
}
html [game-page="opening"].has-hero .content-buttons > :first-child .button.white h5,
html [game-page="opening"].has-hero .content-buttons > .button.white:first-child h5 {
  color: #141414 !important;
}
/* A ▶ a feliraton ül: a .button ::before/::after-jét az arculatok maguk
   használják (hover-réteg), azt nem vesszük el. */
html [game-page="opening"].has-hero .content-buttons .button.white h5 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  flex: 0 0 auto;
}
html [game-page="opening"].has-hero .content-buttons .button.white h5::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent currentColor;
  flex: 0 0 auto;
}
html [game-page="opening"].has-hero .content-buttons .button.white:hover {
  transform: scale(1.04);
  background: rgba(130, 130, 132, 0.7);
}
html [game-page="opening"].has-hero .content-buttons > :first-child .button.white:hover,
html [game-page="opening"].has-hero .content-buttons > .button.white:first-child:hover {
  background: rgba(255, 255, 255, 0.85);
}
/* A közös stílus `margin-right: auto`-t ad neki (a régi gombon jobbra
   tolta) — a teljes szélességű mobil-gombon ez balra lökné a feliratot. */
html [game-page="opening"].has-hero .content-buttons .play-cost-tag {
  margin: 0 0 0 2px;
}
html [game-page="opening"].has-hero .content-buttons h6 {
  color: var(--hero-muted) !important;
  font-size: 13px;
  font-weight: 400 !important;
  text-align: left !important;
  opacity: 1;
}

/* ---------- Ár/energia és kapcsolat-info: halk, egy sorban ---------- */
html [game-page="opening"].has-hero .content-info h6,
html [game-page="opening"].has-hero .connection-info {
  margin: 0;
  color: var(--hero-muted) !important;
  font-size: 12px;
  font-weight: 400 !important;
  text-align: left !important;
}
html [game-page="opening"].has-hero .content-info .premium-play-info {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
html [game-page="opening"].has-hero .content-info .premium-play-info-grid {
  justify-items: start;
  gap: 2px;
}
html [game-page="opening"].has-hero .connection-info:empty,
html [game-page="opening"].has-hero .content-info:empty {
  display: none;
}

/* ---------- Ritka műveletek: szerény szöveg-gombok + "⋯" ---------- */
.opening-hero-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--hero-line);
}
html [game-page="opening"].has-hero .content-main-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 !important;
}
html [game-page="opening"].has-hero .content-main-buttons .button.white {
  min-height: 0;
  height: auto;
  margin: 0 !important;
  padding: 4px 0;
  background: none;
  border: 0;
  box-shadow: none;
}
html [page="game"] [game-page="opening"].has-hero .content-main-buttons .button.white h5 {
  color: var(--hero-muted) !important;
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 600 !important;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.15s ease;
}
html [page="game"] [game-page="opening"].has-hero .content-main-buttons .button.white:hover h5 {
  color: #fff !important;
}
.opening-hero-more {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.opening-hero-more:hover {
  transform: scale(1.08);
  border-color: #fff;
}
.opening-hero-more svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Tedd ki nyomtatható anyagok: a hero alatt, világos szöveggel. */
[game-page="opening"].has-hero .teddki-materials {
  color: var(--hero-text);
}

/* ---------- Mobil: egymás alatt, a borító teljes szélességben ---------- */
@media screen and (max-width: 760px) {
  .opening-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 8px 0 12px;
  }
  .opening-hero-media {
    margin: 0 -16px;
    border-radius: 0 0 18px 18px;
  }
  .opening-hero-details {
    gap: 12px;
  }
  .opening-hero-description {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }
  /* Mobilon a gombok teljes szélességűek — hüvelykujjal könnyű eltalálni. */
  html [game-page="opening"].has-hero .content-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html [game-page="opening"].has-hero .content-buttons > .grid {
    max-width: none;
    justify-items: stretch;
  }
  html [game-page="opening"].has-hero .content-buttons .button.white {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }
  /* A bezáró X mobilon a bal felső sarokban lebeg — a TOP 10 jobbra kerül. */
  .opening-hero-top10 {
    left: auto;
    right: 0;
    border-radius: 0 0 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-hero,
  .opening-backdrop,
  .opening-hero-media img,
  .opening-hero-progress-fill {
    animation: none;
  }
}