/* ==============================================
   7streak — "Letisztult" bőr (v1.42.0)
   ==============================================

   A tartalom `settings.design = "clean"` beállításával kapcsol be
   (views/page/game/games/7streak/head.ejs → html[data-skin="clean"]).
   A nyitólap (openingHero) sötét, filmes világa folytatódik a játékban:
   mély sötét felület, fehér tipográfia, kevés, de erős kiemelés — a helyes
   válasz zöld, a hiba piros, a fő gomb fehér.

   A 7streak játékoldal szinte mindent TÉMA-VÁLTOZÓBÓL fest, ezért a bőr
   gerince egy saját sötét paletta a <html>-en. `html[data-skin]` erősebb,
   mint a `[theme="light"]` / `[theme="dark"]`, így a felhasználó
   témaválasztásától függetlenül ugyanúgy néz ki (a nyitólap is mindig
   sötét). Ahol egy komponens beégetett színt használ, ott célzott
   felülírás van alább. */

html[data-skin="clean"] {
  --cl-bg: #0e0c14;
  --cl-surface: #17151f;
  --cl-surface-2: #201d2b;
  --cl-surface-3: #2b2839;
  --cl-line: rgba(255, 255, 255, 0.08);
  --cl-line-strong: rgba(255, 255, 255, 0.16);
  --cl-text: #ffffff;
  --cl-muted: rgba(255, 255, 255, 0.62);
  --cl-faint: rgba(255, 255, 255, 0.38);
  --cl-good: #46d369;
  --cl-bad: #ff4d57;
  --cl-accent: #e50914;
  --cl-gold: #ffd54a;

  /* --- a közös téma-változók felülírása --- */
  --main-gradient: var(--cl-bg);
  --inside-gradient:
    radial-gradient(1200px 500px at 50% -10%, rgba(120, 90, 255, 0.16), transparent 70%),
    var(--cl-bg);
  --streak-background: var(--cl-surface);
  --background-white: var(--cl-surface);
  --border-color: var(--cl-line);
  --border-white-all: var(--cl-surface-2);
  --overlay-soft: rgba(255, 255, 255, 0.05);
  --overlay-medium: rgba(255, 255, 255, 0.09);
  --overlay-border: var(--cl-line);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);

  --color-white: var(--cl-surface);
  --color-lightest: var(--cl-surface-2);
  --color-lighter: var(--cl-surface-3);
  --color-light: #3b3749;
  --color-medium: #8b879a;
  --color-dark: #b7b3c4;
  --color-darker: #e2dfeb;
  --color-darkest: var(--cl-text);
  --color-black: var(--cl-text);
  --text-muted: var(--cl-muted);

  --color-green: var(--cl-good);
  --color-lightgreen: var(--cl-good);
  --color-red: var(--cl-bad);
  --color-yellow: var(--cl-gold);

  --button-background: rgba(255, 255, 255, 0.08);
  --button-hover: rgba(255, 255, 255, 0.14);
  --button-primary-bg: #ffffff;
  --button-primary-text: #141218;
  --button-color-text: #141218;
  --color-on-primary: #141218;

  --menu-background-color: rgba(23, 21, 31, 0.98);
  --menu-element-color: var(--cl-text);
  --menu-hover-background: rgba(255, 255, 255, 0.08);
  --menu-hover-color: #ffffff;

  --star-empty-color: rgba(255, 255, 255, 0.14);
  --star-done-color: var(--cl-gold);
}

html[data-skin="clean"],
html[data-skin="clean"] body {
  background: var(--inside-gradient);
  background-attachment: fixed;
  color: var(--cl-text);
}

/* ---------- Fejléc: sötét, áttetsző, vékony elválasztó ---------- */
html[data-skin="clean"] .header,
html[data-skin="clean"] .header.game {
  background: rgba(14, 12, 20, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cl-line);
  box-shadow: none;
}

/* ---------- Kártyák (kérdés, HUD, eredmények) ---------- */
html[data-skin="clean"] [game-page="game"] .question-container,
html[data-skin="clean"] [game-page="game"] .hud .instruction {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
html[data-skin="clean"] [game-page="game"] .question-container {
  position: relative;
  overflow: hidden;
}
/* Finom felső fény a kártyán — "üveg" helyett mélység. */
html[data-skin="clean"] [game-page="game"] .question-container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}
html[data-skin="clean"] [game-page="game"] .mobile-card-title {
  color: var(--cl-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
html[data-skin="clean"] [page="game"] [game-page="game"] .question-text {
  color: var(--cl-text);
  font-weight: 800;
  letter-spacing: -0.3px;
}
html[data-skin="clean"] [page="game"] [game-page="game"] .streak-face {
  color: #ffffff;
  opacity: 0.55;
}

/* ---------- Válaszmező ---------- */
html[data-skin="clean"] [game-page="game"] .answer [answer="answer"] {
  background-color: var(--cl-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--cl-line-strong);
  caret-color: #ffffff;
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}
html[data-skin="clean"] [game-page="game"] .answer [answer="answer"]:focus {
  background-color: #262233;
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.06);
}
html[data-skin="clean"] [game-page="game"] .answer [answer="answer"]:empty::before {
  color: var(--cl-faint);
}
/* A válaszmező két egymásra tett rétegből áll: a felsőbe (answer) gépel a
   játékos, de a betűi átlátszók — a szöveget az alatta álló `feedback`
   réteg rajzolja ki. Az átlátszatlan mezőháttér ezt letakarná (a beírás
   nem látszott), ezért a kirajzoló réteg a mező FÖLÉ kerül. Kattintani
   rajta át lehet (pointer-events: none a közös stílusban). */
html[data-skin="clean"] [game-page="game"] .answer [answer="feedback"] {
  position: relative;
  z-index: 1;
  color: var(--cl-text);
  font-weight: 600;
  /* A közös `.input` (a betűhelyes mintánál is) 80%-os fehér hátteret ad —
     sötét mezőn fehér betűvel láthatatlan lett a beírás. A háttér a mezőé. */
  background: transparent !important;
}
html[data-skin="clean"] [game-page="game"][data-answer="correct"] .answer [answer="answer"] {
  background-color: rgba(70, 211, 105, 0.14);
  box-shadow: inset 0 0 0 2px var(--cl-good);
}
html[data-skin="clean"] [game-page="game"][data-answer="correct"] .answer [answer="feedback"] {
  color: var(--cl-good);
}
html[data-skin="clean"] [game-page="game"][data-answer="wrong"] .answer [answer="answer"] {
  background-color: rgba(255, 77, 87, 0.1);
  box-shadow: inset 0 0 0 2px var(--cl-bad);
}
html[data-skin="clean"] [game-page="game"][data-answer="wrong"] .answer [answer="feedback"] {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through 2px var(--cl-bad);
}
/* Tollbamondás: betűnkénti mező */
html[data-skin="clean"] .pattern-input .pattern-character {
  border-bottom-color: var(--cl-line-strong);
}
html[data-skin="clean"] .pattern-input .pattern-character:not(:empty) {
  border-bottom-color: #ffffff;
}
html[data-skin="clean"] .pattern-input .pattern-character.pattern-current {
  border-bottom-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Visszajelzés: zöld = jó, piros = hiba ---------- */
html[data-skin="clean"] [game-page="game"] .feedback,
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .feedback {
  color: var(--cl-text);
}
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .feedback {
  background: var(--cl-surface-2);
  border-radius: 12px;
}

/* ---------- Gombok: fehér fő gomb, áttetsző másodlagos ---------- */
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .button:not(.color),
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .button:not(.color):is(:hover, :active, :focus-visible) {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: none;
}
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .button:not(.color):hover {
  background: rgba(255, 255, 255, 0.86);
}
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .button h5 {
  color: #141218 !important;
  font-weight: 800 !important;
}
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .hint {
  background-color: var(--cl-surface-2);
  border: 1px solid var(--cl-line-strong);
  border-radius: 10px;
  --hint-icon-color: #ffffff;
}
html[data-skin="clean"] [game-page="game"] .mobile-controls-row .timer {
  color: var(--cl-text);
}

/* ---------- HUD: utasítás + csillagsor ---------- */
html[data-skin="clean"] [game-page="game"] .hud {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-skin="clean"] [game-page="game"] .hud .instruction {
  color: var(--cl-muted);
  font-weight: 500;
}
html[data-skin="clean"] [game-page="game"] .star-container .streak-star.done {
  filter: drop-shadow(0 0 10px rgba(255, 213, 74, 0.45));
}

/* ---------- Tanulandók lista ---------- */
html[data-skin="clean"] [game-page="task-list"] {
  color: var(--cl-text);
}
html[data-skin="clean"] [game-page="task-list"] h5,
html[data-skin="clean"] [game-page="task-list"] h6 {
  color: var(--cl-text);
}
html[data-skin="clean"] [game-page="task-list"] .task-list,
html[data-skin="clean"] [game-page="task-list"] table,
html[data-skin="clean"] [game-page="task-list"] [panel="white"] {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* ---------- Zárólap ---------- */
html[data-skin="clean"] [game-page="end"] [panel="white"],
html[data-skin="clean"] [game-page="end"] .panel {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: 18px;
}
html[data-skin="clean"] [game-page="end"] h1,
html[data-skin="clean"] [game-page="end"] h2,
html[data-skin="clean"] [game-page="end"] h3,
html[data-skin="clean"] [game-page="end"] h4,
html[data-skin="clean"] [game-page="end"] h5,
html[data-skin="clean"] [game-page="end"] h6 {
  color: var(--cl-text);
}

/* ---------- Felugró ablakok (a body-n élnek) ---------- */
html[data-skin="clean"] .popup > .content {
  background: var(--cl-surface) !important;
  color: var(--cl-text);
  border: 1px solid var(--cl-line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
html[data-skin="clean"] .popup > .content h1,
html[data-skin="clean"] .popup > .content h2,
html[data-skin="clean"] .popup > .content h3,
html[data-skin="clean"] .popup > .content h4,
html[data-skin="clean"] .popup > .content h5,
html[data-skin="clean"] .popup > .content h6,
html[data-skin="clean"] .popup > .content p {
  color: var(--cl-text);
}
html[data-skin="clean"] .popup .button.white {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
html[data-skin="clean"] .popup .button.white h5 {
  color: #ffffff !important;
}
html[data-skin="clean"] .popup .button.white:last-child {
  background: #ffffff;
}
html[data-skin="clean"] .popup .button.white:last-child h5 {
  color: #141218 !important;
}

/* ---------- Az oldal alsó gombjai (Vissza, Tovább) ----------
   A toplista-váltó (.subpage-button) nem tartozik ide: ott az "utolsó
   gomb" szabály a kiválasztatlan "Saját eredmények" feliratát is sötétre
   festette — sötét alapon eltűnt. A váltónak saját stílusa van alább. */
html[data-skin="clean"] [page="game"] :is([game-page="task-list"], [game-page="end"]) .button.white:not(.color):not(.subpage-button) {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-skin="clean"] [page="game"] :is([game-page="task-list"], [game-page="end"]) .button.white:not(.color):not(.subpage-button) h5 {
  color: #ffffff !important;
}
html[data-skin="clean"] [page="game"] :is([game-page="task-list"], [game-page="end"]) .button.white:not(.color):not(.subpage-button):last-child {
  background: #ffffff;
}
html[data-skin="clean"] [page="game"] :is([game-page="task-list"], [game-page="end"]) .button.white:not(.color):not(.subpage-button):last-child h5 {
  color: #141218 !important;
}

/* ---------- Logó: a sötét téma fehér változata ---------- */
html[data-skin="clean"] .header .streak_logo {
  background-image: url(/pages/_common/header/images/7streakLogoRounded_white.svg);
}
@media screen and (max-width: 430px) {
  html[data-skin="clean"] .header .streak_logo {
    background-image: url(/pages/_common/header/images/7streakLogo7.svg);
    filter: brightness(0) invert(1);
  }
}

/* ---------- Tanulandók: sötét fejléc, halk sorok ---------- */
html[data-skin="clean"] [game-page="task-list"] .task-list .row {
  border-bottom-color: var(--cl-line);
}
html[data-skin="clean"] [game-page="task-list"] .task-list .row:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.025);
}
html[data-skin="clean"] [game-page="task-list"] .task-list .row.list-header {
  background-color: var(--cl-surface-2);
}
html[data-skin="clean"] [game-page="task-list"] .task-list .row.list-header .header-element {
  color: var(--cl-muted);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
html[data-skin="clean"] [game-page="task-list"] .task-list .row:not(.list-header):hover {
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 3px 0 0 #ffffff;
}
html[data-skin="clean"] [game-page="task-list"] .task-list .row:not(.list-header):hover .row-element {
  color: #ffffff;
}

/* ---------- Kérdés: nagyobb, filmfelirat-szerű ---------- */
@media screen and (min-width: 701px) {
  html[data-skin="clean"] [page="game"] [game-page="game"] .question .question-text {
    font-size: 30px;
    line-height: 1.2;
  }
}

/* ---------- Képernyő-billentyűzet: sötét billentyűk ---------- */
html[data-skin="clean"] .osk {
  --osk-bg: #0b0a10;
  --osk-key-bg: #2a2736;
  --osk-key-text: #ffffff;
  --osk-special-bg: #1c1a26;
  --osk-shadow: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--cl-line);
}
html[data-skin="clean"] .osk .osk-row-accent .osk-key {
  background: #332f42;
}
html[data-skin="clean"] .osk .osk-key.osk-down {
  background: #ffffff;
  color: #141218;
}
html[data-skin="clean"] .osk .osk-enter {
  background: #ffffff;
  color: #141218;
}

/* ---------- Zárólap: Globális / Saját eredmények váltó ---------- */
/* Sötét sín, a kiválasztott fül fehér "pirula" (mint a nyitólap fő gombja). */
html[data-skin="clean"] [page="game"] .multi-button {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--cl-line-strong) !important;
  border-radius: 999px !important;
  background: var(--cl-surface) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
html[data-skin="clean"] [page="game"] .multi-button .button.white:not(.color) {
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 16px !important;
  transition: background 0.18s ease;
}
html[data-skin="clean"] [page="game"] .multi-button .button.white:not(.color) h5 {
  color: var(--cl-muted) !important;
  font-weight: 700 !important;
}
html[data-skin="clean"] [page="game"] .multi-button .button.white:not(.color):hover h5 {
  color: #ffffff !important;
}
html[data-skin="clean"] [page="game"] .multi-button .button.white.selected:not(.color) {
  background: #ffffff !important;
}
html[data-skin="clean"] [page="game"] .multi-button .button.white.selected:not(.color) h5 {
  color: #141218 !important;
}

/* Zárólap: a kör eredményeinek sorai halkabbak, a szó-pár olvasható. */
html[data-skin="clean"] [game-page="end"] .end-results .result-row .text {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}