/* ==============================================
   Streaktár V2 — "borítós" kártya-változat
   ==============================================

   v1.39.0 óta ez az ALAPÉRTELMEZETT kártya: a feltöltött előnézeti kép
   (borító) a kártya TELJES háttere, az információ fölötte, sötét
   színátmenetes fátyolon ül. A régi kártya: `?cards=classic`, vissza:
   `?cards=cover` (a head.ejs megjegyzi localStorage-ben). A head.ejs a <html data-streaks-cards>
   attribútumot MÉG a kártyák kirajzolása előtt állítja, így nincs villanás.

   Csak CSS: a streakViewer DOM-ja változatlan. A trükk, hogy a .content-main
   `position: static` lesz, így a benne ülő <img> abszolút pozíciója a
   KÁRTYÁHOZ igazodik (inset: 0), a fejléc/név/lábléc pedig a rács saját
   sorában marad, a kép fölött.

   A kép-arány 16:9 — a borító pontosan így tárolódik (480×270, lásd
   uploader.js imageSettings.streak), ezért semmi nem vágódik le belőle. */

html[data-streaks-cards="cover"] .streaks-v2 {
  --cover-text: #ffffff;
  --cover-text-muted: rgba(255, 255, 255, 0.82);
  --cover-chip-bg: rgba(255, 255, 255, 0.18);
  --cover-chip-border: rgba(255, 255, 255, 0.22);
  /* A fátyol két végén sötét: felül a készítő + menü, alul a cím + lábléc
     kap kontrasztot; a kép közepe szabadon látszik. A 0.92-es alsó érték
     világos (fehér hátterű) borítón is legalább 7:1 kontrasztot ad a fehér
     címnek. */
  --cover-scrim: linear-gradient(
    180deg,
    rgba(12, 10, 24, 0.7) 0%,
    rgba(12, 10, 24, 0) 30%,
    rgba(12, 10, 24, 0) 40%,
    rgba(12, 10, 24, 0.62) 66%,
    rgba(12, 10, 24, 0.92) 100%
  );
}

/* ---------- Kártya-keret ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection {
  aspect-ratio: 16 / 9;
  height: auto;
  grid-template-rows: auto 1fr auto;
  background: var(--cover-card-bg, #1f1b33);
  color: var(--cover-text);
  border-radius: 14px;
  /* Saját rétegkontextus: a kép és a fátyol negatív z-indexe a kártyán
     BELÜL marad, nem csúszik a lap háttere mögé. */
  isolation: isolate;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content::before,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-scrim);
  pointer-events: none;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

/* Kép nélküli kártya: színátmenetes alap. A borító nélküli tartalom gyakori
   (a Felfedezés soraiban néha az összes), és egyetlen szín mellett a sor
   egyforma lila téglák sorává vált — ezért a pozíció szerint öt paletta
   váltakozik. A képes kártyán ebből semmi nem látszik, a kép eltakarja. */
html[data-streaks-cards="cover"] .streaks-v2 .content-container > :nth-child(5n + 1) {
  --cover-card-bg: linear-gradient(135deg, #5b2a86 0%, #c0507f 100%);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container > :nth-child(5n + 2) {
  --cover-card-bg: linear-gradient(135deg, #1e4f8a 0%, #2a9d8f 100%);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container > :nth-child(5n + 3) {
  --cover-card-bg: linear-gradient(135deg, #8a3a17 0%, #d9962f 100%);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container > :nth-child(5n + 4) {
  --cover-card-bg: linear-gradient(135deg, #1f5f4a 0%, #72b04f 100%);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container > :nth-child(5n + 5) {
  --cover-card-bg: linear-gradient(135deg, #2d2a6e 0%, #6a5acd 100%);
}
/* Kép nélkül nincs mit "megvédeni": a fátyol csak az alsó szövegsávot
   sötétíti, hogy a színátmenet élénk maradjon. */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:not(:has(.with-image))::before {
  background: linear-gradient(180deg, rgba(12, 10, 24, 0) 45%, rgba(12, 10, 24, 0.55) 100%);
}

/* ---------- Kép: teljes háttér ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection-main {
  position: static;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 2px;
  min-height: 0;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main .content-image,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection-main .collection-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.5s ease;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:hover .content-image,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection:hover .collection-image {
  transform: scale(1.05);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main.no-image .content-image {
  display: none;
}

/* ---------- Fejléc: készítő + menü ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-header,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-header {
  background: transparent;
  border: 0;
  padding: 8px 8px 0 12px;
  min-height: 0;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-header .content-title {
  color: var(--cover-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-title {
  color: var(--cover-text);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-menu-button,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection-menu-button {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  fill: #ffffff;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- Cím + leírás a kép alján ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection-main-data {
  width: 100%;
  min-width: 0;
  justify-items: start;
  align-content: end;
  gap: 2px;
  color: var(--cover-text);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data .content-name {
  color: var(--cover-text);
  text-align: left;
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data .content-description,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection-main-data .collection-description {
  color: var(--cover-text-muted);
  text-align: left;
  margin: 0;
  line-height: 1.3;
  -webkit-line-clamp: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Lábléc: típus-chip, értékelés, jelvények ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-footer {
  background: transparent;
  border: 0;
  padding: 4px 12px 9px;
  color: var(--cover-text);
  justify-items: start;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .game-type {
  justify-self: start;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--cover-text);
  background: var(--cover-chip-bg);
  border: 1px solid var(--cover-chip-border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: 500;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .visibility-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .visibility-public {
  fill: #7ee08a;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .visibility-private,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .visibility-premium {
  fill: #ff8a8a;
}
html[data-streaks-cards="cover"] .streaks-v2 .compact-rating-value,
html[data-streaks-cards="cover"] .streaks-v2 .compact-percent {
  color: var(--cover-text);
}
html[data-streaks-cards="cover"] .streaks-v2 .trophy-streak.seven-icon {
  opacity: 0.5;
}
html[data-streaks-cards="cover"] .streaks-v2 .trophy-streak.seven-icon.done {
  opacity: 1;
}
/* Sötét fátyolon a kitöltés maga is olvasható — a világos kártyára szánt
   sötétzöld kontúr itt csak tömzsivé tenné (ugyanaz, mint sötét témán). */
html[data-streaks-cards="cover"] .streaks-v2 .mastered-brain {
  filter: none;
}

/* Haladás-sáv: látszó sín, mert sötét alapon a sima zöld csík elveszne. */
html[data-streaks-cards="cover"] .streaks-v2 .card-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}

/* Határidő-jelvény: a lábléc helyett a kép bal felső sarkába, a készítő alá. */
html[data-streaks-cards="cover"] .streaks-v2 .v2-due-badge {
  top: 34px;
  bottom: auto;
  left: 10px;
}

/* ---------- Sáv-nézet: kicsit szélesebb kártya ---------- */
/* 16:9-ben a 260 px-es kártya csak 146 px magas — ebbe a fejléc, két sor
   cím és a lábléc még belefér, de a kép alig látszana. 300 px-nél már
   a kép a főszereplő, és a következő kártya széle továbbra is kilóg. */
html[data-streaks-cards="cover"] .v2-modules:not(.single) .v2-module:not(.v2-browse-grid) .content-container > * {
  flex-basis: min(84%, 300px);
}

/* Mobilon (1 oszlop) a v2 fix sormagasságot ad — itt a képarány dönt. */
@media screen and (max-width: 599px) {
  html[data-streaks-cards="cover"] .streaks-v2 .content-container .content,
  html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection {
    grid-template-rows: auto 1fr auto;
  }
  html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data .content-name {
    font-size: var(--font-size-large, 17px);
  }
}

/* ==============================================
   Nyugalmi kártya (v1.43.0)
   ==============================================

   A user döntése: a kártyán nyugalomban az marad, ami a VÁLASZTÁSHOZ
   kell — a cím, a láthatóság, a típus és (ha egyszer már 100%-ra
   megtanulta) az agy; fölötte az "Új" és a "TOP 10" címke, alul a haladás
   sávja, ha elkezdte, de még nem fejezte be. A készítő, a menü, a leírás,
   az értékelés, a százalék és a 7-es a rámutatásra kinyíló részletkártyán
   (.cover-popup, cover_fx.js) van. Egér és érintés ugyanígy néz ki. */

html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-header {
  display: none;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content {
  /* A fejléc display: none — a főrész és a lábléc a két sor. */
  grid-template-rows: 1fr auto;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data .content-description,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .compact-rating,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .compact-percent,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .trophy-streak {
  display: none;
}
/* A lábléc: láthatóság · típus · (agy). A rács-oszlopok a rejtett
   értékelés nélkül is kiférjenek. */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer.has-rating,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer.has-visibility,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer.has-visibility.has-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 12px;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content .content-footer .game-results {
  margin-left: auto;
}
/* Ha van haladás-sáv, a lábléc feljebb húzódik, hogy ne üljön rá. */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:has(.card-progress:not(.mastered)) .content-footer {
  padding-bottom: 16px;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main {
  padding-bottom: 0;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content-main-data .content-name {
  -webkit-line-clamp: 2;
}
/* Gyűjtemény-kártya ugyanígy: cím alul, alatta láthatóság + "Gyűjtemény";
   a leírás és a menü a részletkártyán. (A gyűjtemény címe a fejlécben
   ül — a fejléc a kép aljára, a lábléc fölé kerül.) */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection {
  grid-template-rows: 1fr auto auto;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-main {
  grid-row: 1;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-header {
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 12px 4px;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-footer {
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 12px;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-title {
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-menu-button,
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection .collection-main-data {
  display: none;
}
html[data-streaks-cards="cover"] .streaks-v2 .content-container .collection:has(.with-image)::before {
  background: linear-gradient(180deg, rgba(12, 10, 24, 0) 38%, rgba(12, 10, 24, 0.55) 62%, rgba(12, 10, 24, 0.9) 100%);
}

/* Sötétítés csak alul, a szöveg alatt: a kép felső kétharmada saját
   színeiben látszik. */
html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:has(.with-image)::before {
  background: linear-gradient(180deg, rgba(12, 10, 24, 0) 38%, rgba(12, 10, 24, 0.55) 62%, rgba(12, 10, 24, 0.9) 100%);
}
@media (hover: hover) and (pointer: fine) {
  html[data-streaks-cards="cover"] .streaks-v2 .content-container .content:hover {
    transform: none;
    filter: brightness(1.08);
  }
}

/* ---------- Elsajátítás-sáv (Netflix "hol tartok" csík) ---------- */
html[data-streaks-cards="cover"] .streaks-v2 .card-progress {
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-streaks-cards="cover"] .streaks-v2 .card-progress-fill {
  border-radius: 2px;
  background: linear-gradient(90deg, #f9ed32, #8dc63f);
}
/* Megtanult tartalomnál nincs sáv — azt az agy jelzi a láblécben. (A
   részletkártya a "mastered" jelzőből tudja, hogy "Megtanultad".) */
html[data-streaks-cards="cover"] .streaks-v2 .card-progress.mastered {
  display: none;
}

/* ---------- Címkék: TOP 10 és Új ---------- */
.streaks-v2 .card-badge-top10,
.streaks-v2 .card-badge-new {
  display: none;
}
html[data-streaks-cards="cover"] .streaks-v2 .card-badge-top10 {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 30px;
  padding: 3px 0 4px;
  border-radius: 0 0 6px 0;
  background: #e50914;
  color: #fff;
  font-family: var(--main-font);
  line-height: 1;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
html[data-streaks-cards="cover"] .streaks-v2 .card-badge-top10 small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
html[data-streaks-cards="cover"] .streaks-v2 .card-badge-top10 b {
  font-size: 15px;
  font-weight: 900;
}
html[data-streaks-cards="cover"] .streaks-v2 .card-badge-new {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 3px;
  background: #e50914;
  color: #fff;
  font-family: var(--main-font);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* ==============================================
   Részletkártya (rámutatásra) — .cover-popup
   ==============================================

   A body-ba kerül, position: fixed — a vízszintes sáv overflow-ja így nem
   vágja le. A cover_fx.js a kártya elemeiből KLÓNOZZA a tartalmát, tehát
   ugyanazt mutatja, amit a kártya rejt. */
@property --cover-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes cover-ring-spin {
  to { --cover-ring-angle: 360deg; }
}

.cover-popup {
  position: fixed;
  z-index: 900;
  width: 340px;
  border-radius: 12px;
  background: #181622;
  color: #fff;
  font-family: var(--main-font);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transform-origin: center 30%;
  opacity: 0;
  transform: scale(var(--from-scale, 0.7));
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1.05), opacity 0.2s ease;
  isolation: isolate;
}
.cover-popup.open {
  opacity: 1;
  transform: scale(1);
}
.cover-popup.closing {
  opacity: 0;
  transform: scale(var(--from-scale, 0.7));
  transition-duration: 0.18s;
  pointer-events: none;
}
/* Körbefutó keret a logó színeivel. */
.cover-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--cover-ring-angle), #f9ed32, #8dc63f, #2ec4b6, #8b5cf6, #ff5fa2, #f9ed32);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: cover-ring-spin 3.5s linear infinite;
}

.cover-popup-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: var(--cover-card-bg, #2d2a55);
}
.cover-popup-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cover-popup-kenburns 6s ease-out forwards;
}
@keyframes cover-popup-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.1) translate(-1.5%, -1%); }
}
.cover-popup-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 22, 34, 0) 45%, rgba(24, 22, 34, 0.95) 100%);
}
.cover-popup-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cover-popup-body {
  display: grid;
  gap: 9px;
  padding: 10px 14px 14px;
}
.cover-popup-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cover-popup-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cover-popup-btn:hover {
  transform: scale(1.1);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.cover-popup-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.cover-popup-btn.play {
  border-color: #fff;
  background: #fff;
  color: #181622;
}
.cover-popup-btn.play svg {
  margin-left: 2px;
}
.cover-popup-actions .cover-popup-rating {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.cover-popup-rating svg {
  width: 14px;
  height: 14px;
  fill: gold;
  stroke: goldenrod;
}

.cover-popup-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
}
.cover-popup-tag {
  padding: 1px 7px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
  background: #e50914;
  color: #fff;
}
.cover-popup-type {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
}
.cover-popup-meta .visibility-icon {
  width: 16px;
  height: 14px;
  display: flex;
}
.cover-popup-meta .visibility-icon svg {
  width: 100%;
  height: 100%;
}
.cover-popup-meta .visibility-public { fill: #7ee08a; }
.cover-popup-meta .visibility-private,
.cover-popup-meta .visibility-premium { fill: #ff8a8a; }
.cover-popup-meta .visibility-group { fill: #b9a4ff; }
.cover-popup-meta .game-results {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.cover-popup-meta .trophy-streak.seven-icon {
  width: 16px;
  height: 16px;
  opacity: 0.45;
}
.cover-popup-meta .trophy-streak.seven-icon.done {
  opacity: 1;
}
.cover-popup-meta .trophy-streak img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cover-popup-meta .mastered-brain {
  width: 18px;
  height: 18px;
  background-image: linear-gradient(180deg, #f9ed32 0%, #8dc63f 100%);
  -webkit-mask: url("/pages/_common/streakViewer/images/brain.svg") center / contain no-repeat;
  mask: url("/pages/_common/streakViewer/images/brain.svg") center / contain no-repeat;
}
.cover-popup-meta .mastered-brain svg {
  display: none;
}

.cover-popup-creator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* Admin-kapcsoló a készítő mellett: "7streak-ként" */
.cover-popup-official {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cover-popup-official:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.cover-popup-official-dot {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease;
}
.cover-popup-official-dot::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.cover-popup-official.on {
  border-color: rgba(141, 198, 63, 0.7);
  color: #fff;
}
.cover-popup-official.on .cover-popup-official-dot {
  background: #8dc63f;
}
.cover-popup-official.on .cover-popup-official-dot::after {
  transform: translateX(10px);
}
.cover-popup-official:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* "⋯" műveletlista a részletkártyán belül */
.cover-popup-btn.more[aria-expanded="true"] {
  border-color: #fff;
  background: #fff;
  color: #181622;
}
.cover-popup-menu {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: default;
  animation: cover-menu-in 0.18s ease both;
}
@keyframes cover-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.cover-popup-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cover-popup-menu-item:hover,
.cover-popup-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.cover-popup-menu-item.danger {
  color: #ff9a9a;
}
.cover-popup-menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: center / contain no-repeat;
}
.cover-popup-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cover-popup-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.cover-popup-progress-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.cover-popup-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #f9ed32, #8dc63f);
  transform-origin: left;
  animation: cover-progress-grow 0.6s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cover-progress-grow {
  from { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-popup,
  .cover-popup.closing {
    transform: none;
    transition: opacity 0.15s ease;
  }
  .cover-popup::after,
  .cover-popup-media img,
  .cover-popup-progress-fill {
    animation: none;
  }
}