/* ─────────────────────────────────────────────────────────────────────
   Pop-art bőr a szótanuláshoz (Szódolgozat). Csak akkor töltődik be, ha a
   head.ejs a tartalom szabálya alapján kiteszi a html[data-skin="popart"]
   jelzőt. Elv: a pop-art a KERETBEN él (raszterpontos háttér, vastag
   kontúr, eltolt árnyék, vastag, keskeny betűs gombok, Füzi), az olvasnivaló
   (kérdés, válaszmező, visszajelzés) sima, nyugodt felületen marad.
   Minden szín token; sötét témában ([theme="dark"]) a papír mély lila, a
   kontúr fekete marad, az eltolt árnyék sárgára vált.
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./Bangers-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./Bangers-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* saját betű a gombokhoz és címekhez (a 7streak NotoSansCondBlack-je, latin részhalmaz); a Bangers csak Füzi hangutánzó feliratain marad */
@font-face {
  font-family: "PopartCondBlack";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./NotoSansCondBlack-latin.woff2") format("woff2");
}

html[data-skin="popart"] {
  --pa-ink: #17111f;
  --pa-bg-top: #ffe45c;
  --pa-bg-bottom: #ffd0e4;
  --pa-dot: rgba(123, 60, 240, 0.16);
  --pa-line: #17111f;
  --pa-shadow: #17111f;
  --pa-card: #fff8e7;
  --pa-text: #17111f;
  --pa-muted: #5d5468;
  --pa-field: #ffffff;
  --pa-field-empty: #b9b0c4;
  --pa-label-bg: #17111f;
  --pa-label-text: #ffd42e;
  --pa-primary: #7b3cf0;
  --pa-primary-text: #ffffff;
  --pa-control: #ffffff;
  --pa-control-text: #17111f;
  --pa-bubble: #ffffff;
  --pa-speech: #ffffff;
  --pa-speech-text: #17111f;
  --pa-speech-sol: #15803d;
  --pa-sol: #16a34a;
  --pa-good-bg: #dcfce7;
  --pa-good-line: #16a34a;
  --pa-good-text: #0f5e2c;
  --pa-bad: #e11d48;
  --pa-struck: #9a91a6;
  --pa-header: #7b3cf0;
  --pa-osk-bg: #efe6ff;
  --pa-key: #ffffff;
  --pa-key-text: #17111f;
  --pa-key-special: #ddd0f7;
  --pa-accent-key: #fff3c4;
  --pa-display: "PopartCondBlack", "Arial Narrow", sans-serif;
  --pa-fx: "Bangers", "Impact", sans-serif;
}
html[data-skin="popart"][theme="dark"] {
  --pa-bg-top: #2a1650;
  --pa-bg-bottom: #140b26;
  --pa-dot: rgba(255, 212, 46, 0.14);
  --pa-line: #07040c;
  --pa-shadow: #ffd42e;
  --pa-card: #2b2146;
  --pa-text: #f5efff;
  --pa-muted: #c3b8d8;
  --pa-field: #1a1330;
  --pa-field-empty: #5d5178;
  --pa-label-bg: #ffd42e;
  --pa-label-text: #17111f;
  --pa-primary: #8f55ff;
  --pa-control: #3a2d5c;
  --pa-control-text: #f5efff;
  --pa-bubble: #3a2d5c;
  --pa-sol: #4ade80;

  --pa-good-bg: #123b27;
  --pa-good-line: #4ade80;
  --pa-good-text: #bbf7d0;
  --pa-bad: #fb7185;
  --pa-struck: #8d82a5;
  --pa-header: #1d1234;
  --pa-osk-bg: #1d1532;
  --pa-key: #3a2d5c;
  --pa-key-text: #f5efff;
  --pa-key-special: #2a2044;
  --pa-accent-key: #4a3a18;
}

/* ── Lap és fejléc ───────────────────────────────────────────────────── */
html[data-skin="popart"],
html[data-skin="popart"] body {
  background:
    radial-gradient(circle, var(--pa-dot) 1.6px, transparent 2px) 0 0 / 13px 13px,
    linear-gradient(180deg, var(--pa-bg-top) 0%, var(--pa-bg-bottom) 100%) fixed;
}
html[data-skin="popart"] .header.game {
  background: var(--pa-header);
  border-bottom: 3px solid var(--pa-line);
}
/* a lapon a fehér (sötét háttérre szánt) feliratok a papíron sötétek */
html[data-skin="popart"] [page="game"] .color-lightest-all,
html[data-skin="popart"] [page="game"] .color-lighter-all,
html[data-skin="popart"] [page="game"] .color-white-all {
  color: var(--pa-text);
}
html[data-skin="popart"] [page="game"] h6.color-lighter-all,
html[data-skin="popart"] .content-info h6 {
  color: var(--pa-muted);
}
html[data-skin="popart"] .game-close-x {
  background-color: var(--pa-control) !important;
  border: 2.5px solid var(--pa-line) !important;
  box-shadow: 2px 2px 0 var(--pa-shadow) !important;
  --header-icon-color: var(--pa-control-text) !important;
}

/* ── Gombok ──────────────────────────────────────────────────────────── */
html[data-skin="popart"] [page="game"] .button.white:not(.color) {
  background: var(--pa-control);
  border: 3px solid var(--pa-line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
}
html[data-skin="popart"] [page="game"] .button.white:not(.color)::before {
  display: none;
}
html[data-skin="popart"] [page="game"] .button.white:not(.color) h5 {
  color: var(--pa-control-text);
}
html[data-skin="popart"] [page="game"] .button.white:not(.color):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pa-shadow);
}
/* elsődleges gombok: mód-indítás, OK/Tovább, új kör */
html[data-skin="popart"] [page="game"] .button.white:is([action="learning"], [action="next"], [action="new_game"]),
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .button:not(.color) {
  background: var(--pa-primary);
}
html[data-skin="popart"] [page="game"] .button.white:is([action="learning"], [action="classic"], [action="next"], [action="new_game"], [action="back"]) h5,
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .button h5 {
  font-family: var(--pa-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1.5px;
  line-height: 1;
}
html[data-skin="popart"] [page="game"] .button.white:is([action="learning"], [action="next"], [action="new_game"]) h5,
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .button h5 {
  color: var(--pa-primary-text);
}

/* ── Nyitólap ────────────────────────────────────────────────────────── */
html[data-skin="popart"] .fuzi-stage {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
html[data-skin="popart"] .fuzi-bubble {
  position: relative;
  margin: 0;
  max-width: 320px;
  padding: 9px 14px;
  background: var(--pa-speech);
  color: var(--pa-speech-text);
  border: 3px solid var(--pa-line);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
  font: 800 15px/1.3 var(--main-font, "Outfit"), sans-serif;
  text-align: center;
}
html[data-skin="popart"] .fuzi-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 18px;
  height: 14px;
  translate: -50% 0;
  background: var(--pa-line);
  clip-path: polygon(0 0, 100% 0, 55% 100%);
}
html[data-skin="popart"] .fuzi-big {
  width: 170px;
  max-width: 50vw;
}
/* mobilon nincs fejléc, a bezáró X lebeg a bal felső sarokban: a buborék alá kerüljön */
@media screen and (max-width: 700px) {
  html[data-skin="popart"] [game-page="opening"] .fuzi-stage {
    padding-top: 40px;
  }
}
html[data-skin="popart"] .fuzi-big .fuzi {
  display: block;
  width: 100%;
  height: auto;
}
/* a tananyag kártyája a látványterv szerint: balra kép, mellette cím és
   szerző, alul címke és széles haladás-sáv. A közös kártya-DOM marad, csak
   a rács más (a .content-main "display: contents"-szel feloldódik). */
html[data-skin="popart"] [game-page="opening"] .content-container .content {
  width: min(340px, 100%);
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "image header" "image data" "footer footer";
  gap: 2px 12px;
  padding: 12px;
  overflow: visible;
  background: var(--pa-card);
  color: var(--pa-text);
  border: 3px solid var(--pa-line);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--pa-shadow);
}
html[data-skin="popart"] [game-page="opening"] .content-container .content:has(.no-image) {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "data" "footer";
}
html[data-skin="popart"] [game-page="opening"] .content .content-main {
  display: contents;
}
html[data-skin="popart"] [game-page="opening"] .content .content-main .content-image {
  grid-area: image;
  align-self: start;
  width: 96px;
  height: 72px;
  border: 2.5px solid var(--pa-line);
  border-radius: 10px;
}
html[data-skin="popart"] [game-page="opening"] .content .content-header {
  grid-area: header;
  padding: 0;
  align-items: start;
}
html[data-skin="popart"] [game-page="opening"] .content .content-title {
  color: var(--pa-text);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-skin="popart"] [game-page="opening"] .content .content-menu-button {
  fill: var(--pa-text);
}
html[data-skin="popart"] [game-page="opening"] .content .content-main .content-main-data {
  grid-area: data;
  justify-items: start;
  align-content: start;
  gap: 2px;
  padding: 0;
}
html[data-skin="popart"] [game-page="opening"] .content .content-creator {
  color: var(--pa-muted);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}
html[data-skin="popart"] [game-page="opening"] .content .content-description {
  display: none;
}
html[data-skin="popart"] [game-page="opening"] .content .content-footer {
  grid-area: footer;
  grid-template-columns: auto 1fr;
  padding: 10px 0 0;
  gap: 8px;
}
html[data-skin="popart"] [game-page="opening"] .content .content-footer.has-visibility {
  grid-template-columns: auto auto 1fr;
}
html[data-skin="popart"] [game-page="opening"] .content .game-type {
  justify-self: start;
  padding: 4px 9px;
  color: var(--pa-text);
  background: var(--pa-control);
  border: 2px solid var(--pa-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
html[data-skin="popart"] [game-page="opening"] .content .game-results {
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 6px;
}
html[data-skin="popart"] [game-page="opening"] .content .percent-result {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}
html[data-skin="popart"] :is([game-page="opening"] .content, [game-page="task-list"]) .percent-progress-bar {
  height: 12px;
}
html[data-skin="popart"] :is([game-page="opening"] .content, [game-page="task-list"]) .percent-progress-bar-frame {
  width: 100%;
  min-width: 70px;
  border: 2px solid var(--pa-line);
  border-radius: 999px;
  background: var(--pa-field);
}
html[data-skin="popart"] :is([game-page="opening"] .content, [game-page="task-list"]) .percent-progress-bar-fill {
  background: repeating-linear-gradient(45deg, #34d399 0 8px, #22c55e 8px 16px);
}
html[data-skin="popart"] :is([game-page="opening"] .content, [game-page="task-list"]) .percent-value {
  color: var(--pa-text);
  font-weight: 900;
  font-size: 14px;
}
html[data-skin="popart"] .trophy-streak {
  fill: var(--pa-field-empty);
}
html[data-skin="popart"] .trophy-streak.done {
  fill: var(--pa-text);
}
/* a Tanulandók lap trófeája maszkolt elem (mask-image + háttérszín): a
   körvonal-szűrőt a maszk levágná, ezért a sárga papíron lila a jelzés */
html[data-skin="popart"] [game-page="task-list"] .trophy-streak {
  filter: none;
  background-color: color-mix(in srgb, var(--pa-text) 25%, transparent);
}
html[data-skin="popart"] [game-page="task-list"] .trophy-streak.done {
  background-color: var(--pa-primary);
}
/* a mód-gombok alatti magyarázat: jól olvasható, nem halvány */
html[data-skin="popart"] [game-page="opening"] .content-buttons h6 {
  color: var(--pa-text);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}
html[data-skin="popart"] [game-page="opening"] .content-buttons .button.white {
  min-width: 220px;
}
/* ritkán használt műveletek (vissza, nullázás, nyomtatás): szerény linkek,
   ahogy a látványterven */
html[data-skin="popart"] [game-page="opening"] .content-main-buttons {
  margin-top: 16px;
  gap: 18px;
}
html[data-skin="popart"] [game-page="opening"] .content-main-buttons .button.white:not(.color) {
  min-height: 0;
  height: auto;
  padding: 4px 2px;
  background: none;
  border: 0;
  box-shadow: none;
}
html[data-skin="popart"] [page="game"] [game-page="opening"] .content-main-buttons .button.white:not(.color):not(.subpage-button) h5 {
  color: var(--pa-muted);
  font-family: var(--main-font, "Outfit"), sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Játéklap: kártya ────────────────────────────────────────────────── */
html[data-skin="popart"] [game-page="game"] .question-container {
  background: var(--pa-card);
  color: var(--pa-text);
  border: 3px solid var(--pa-line);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--pa-shadow);
}
html[data-skin="popart"] [game-page="game"] .mobile-card-title {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--pa-label-bg);
  color: var(--pa-label-text);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  line-height: 1.3;
}
/* a 90 px-es Füzi mellett egy hosszú szó ("környezetvédelmi") már nem fér ki
   egy sorban 375 px-en — elválasztjuk/tördeljük, a kártya ne szélesedjen */
html[data-skin="popart"] [game-page="game"] .question .question-text {
  min-width: 0;
  color: var(--pa-text);
  font-weight: 900;
  overflow-wrap: anywhere;
  hyphens: auto;
}
html[data-skin="popart"] [game-page="game"] .question-container {
  padding-inline: 12px;
}
/* Füzi az arc helyén: 90 px széles (a szárnyak miatt lapos, ~58 px magas) */
html[data-skin="popart"] [page="game"] [game-page="game"] .streak-face {
  flex: 0 0 var(--pa-face-size, 90px);
  width: var(--pa-face-size, 90px);
  opacity: 1;
}
html[data-skin="popart"] .streak-face.is-fuzi .fuzi {
  display: block;
  width: 100%;
  height: auto;
}
/* súgó-betű Füzi buborékjában (60 mp tétlenség után) */
html[data-skin="popart"] .fuzi-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  translate: -50% 0;
  min-width: 34px;
  padding: 2px 8px 0;
  background: var(--pa-speech);
  color: var(--pa-speech-text);
  border: 2.5px solid var(--pa-line);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--pa-shadow);
  font: 400 26px/1.1 var(--pa-display);
  text-align: center;
  z-index: 2;
}

/* ── Válaszmező: sima, nagy betű ─────────────────────────────────────── */
html[data-skin="popart"] [game-page="game"] .answer [answer="answer"] {
  background: var(--pa-field);
  border: 3px solid var(--pa-line);
  border-radius: 12px;
  caret-color: var(--pa-primary);
}
/* a színezett kijelzés a (most már átlátszatlan) mező FÖLÖTT legyen — a DOM-ban
   előbb áll, ezért magától a mező alá kerülne és eltűnne */
html[data-skin="popart"] [game-page="game"] .answer [answer="feedback"] {
  position: relative;
  z-index: 1;
  color: var(--pa-text);
  font-weight: 800;
  border: 3px solid transparent;
}
html[data-skin="popart"] .pattern-input .pattern-character {
  border-bottom-width: 3px;
  border-bottom-color: var(--pa-field-empty);
}
html[data-skin="popart"] .pattern-input .pattern-character:not(:empty) {
  border-bottom-color: var(--pa-text);
}
html[data-skin="popart"] .pattern-input .pattern-character.pattern-current {
  border-bottom-color: var(--pa-primary);
  background: color-mix(in srgb, var(--pa-primary) 14%, transparent);
}
html[data-skin="popart"] [game-page="game"][data-answer="correct"] .answer [answer="answer"] {
  background: var(--pa-good-bg);
  border-color: var(--pa-good-line);
}
html[data-skin="popart"] [game-page="game"][data-answer="correct"] .answer [answer="feedback"] {
  color: var(--pa-good-text);
}
html[data-skin="popart"] [game-page="game"][data-answer="wrong"] .answer [answer="feedback"] {
  color: var(--pa-struck);
  text-decoration: line-through 2px var(--pa-bad);
}

/* ── Vezérlősor és a visszajelzés mint Füzi buboréka ─────────────────── */
html[data-skin="popart"] [game-page="game"] .mobile-controls-row {
  flex-wrap: wrap;
  row-gap: 12px;
}
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .hint {
  background: var(--pa-control);
  border: 3px solid var(--pa-line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
  --hint-icon-color: var(--pa-control-text);
}
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .button:not(.color) {
  border: 3px solid var(--pa-line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
}
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .timer {
  background: var(--pa-field);
  color: var(--pa-text);
  border: 2.5px solid var(--pa-line);
  border-radius: 12px;
}
/* A visszajelzés Füzi buboréka: a script.js (pop-art bőrben) a kérdéssor
   ALÁ teszi, a csőr felfelé, Füzire mutat — mintha a szájából jönne. A
   buborék mindkét témában fehér (képregény-szín). */
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:empty {
  display: none;
}
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:not(:empty) {
  position: relative;
  margin: 6px 0 2px;
  padding: 9px 12px;
  display: grid;
  gap: 2px;
  background: var(--pa-speech);
  color: var(--pa-speech-text);
  border: 3px solid var(--pa-line);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
  font-weight: 800;
  text-align: left;
}
/* a csőr két rétegből: kontúr-háromszög + a buborék színével kitöltve, hogy
   a keret a csőr tövénél megszakadjon; Füzi (a 90 px-es oszlop közepe) felé */
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:not(:empty)::before,
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:not(:empty)::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:not(:empty)::before {
  top: -15px;
  right: 30px;
  width: 24px;
  height: 15px;
  background: var(--pa-line);
}
html[data-skin="popart"] [game-page="game"] .question-container > .feedback:not(:empty)::after {
  top: -9px;
  right: 34px;
  width: 16px;
  height: 12px;
  background: var(--pa-speech);
}
html[data-skin="popart"] [game-page="game"] .question-container > .feedback > :is(span, div) {
  color: var(--pa-speech-sol);
  font-size: 22px;
}
/* a megoldásban: az eltalált rész sötét, a javítandó rész sárga kiemelést kap */
html[data-skin="popart"] [game-page="game"] .question-container > .feedback .eval_gray {
  color: var(--pa-speech-text);
}
html[data-skin="popart"] [game-page="game"] .question-container > .feedback .eval_green {
  color: #17111f;
  background: #ffd42e;
  border-radius: 4px;
  padding: 0 2px;
}
/* kiértékelés után az időzítő eltűnik (eddig a buborék ült a helyén) */
html[data-skin="popart"] [game-page="game"] .question-container:has(> .feedback:not(:empty)) .mobile-controls-row .timer {
  display: none !important;
}

/* ── Alsó rész: utasítás, csillagok ──────────────────────────────────── */
html[data-skin="popart"] [game-page="game"] .hud .instruction {
  background: var(--pa-bubble);
  color: var(--pa-text);
  border: 2.5px solid var(--pa-line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
}

/* ── Zárólap ─────────────────────────────────────────────────────────── */
html[data-skin="popart"] [game-page="end"] > .background-white {
  background: var(--pa-card);
  color: var(--pa-text);
  border: 3px solid var(--pa-line);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--pa-shadow);
  padding: 16px;
}
html[data-skin="popart"] [game-page="end"] .fuzi-end {
  justify-self: center;
  margin-bottom: 4px;
}
html[data-skin="popart"] [game-page="end"] .end-timer {
  color: var(--pa-text);
  font-weight: 900;
}

/* ── Képernyő-billentyűzet pop-art változata ─────────────────────────── */
html[data-skin="popart"] .osk {
  --osk-bg: var(--pa-osk-bg);
  --osk-key-bg: var(--pa-key);
  --osk-key-text: var(--pa-key-text);
  --osk-special-bg: var(--pa-key-special);
  --osk-shadow: var(--pa-line);
  border-top: 3px solid var(--pa-line);
}
html[data-skin="popart"] .osk .osk-key {
  border: 2px solid var(--pa-line);
  box-shadow: 0 2px 0 var(--pa-line);
  font-weight: 800;
}
html[data-skin="popart"] .osk .osk-row-accent .osk-key {
  background: var(--pa-accent-key);
}
html[data-skin="popart"] .osk .osk-key.osk-down {
  background: var(--pa-primary);
  color: var(--pa-primary-text);
  transform: translateY(2px);
  box-shadow: none;
}
html[data-skin="popart"] .osk .osk-enter {
  background: var(--pa-primary);
  color: var(--pa-primary-text);
}
html[data-skin="popart"] .osk-toggle.game-osk-toggle {
  background-color: var(--pa-control);
  color: var(--pa-control-text);
  border: 2.5px solid var(--pa-line);
  box-shadow: 2px 2px 0 var(--pa-shadow);
}

/* ── Füzi rétegei és mozgása ─────────────────────────────────────────── */
.fuzi { overflow: visible; }
.fuzi .bob { animation: fuzi-bob 2.6s ease-in-out infinite alternate; }
.fuzi .wing { transform-box: view-box; }
.fuzi .wl { transform-origin: 380px 400px; animation: fuzi-flap-l 0.9s ease-in-out infinite alternate; }
.fuzi .wr { transform-origin: 1000px 390px; animation: fuzi-flap-r 0.9s ease-in-out infinite alternate; }
.fuzi.excited .wl,
.fuzi.excited .wr { animation-duration: 0.18s; }
.fuzi.excited .bob { animation: fuzi-hop 0.35s ease-in-out 3 alternate; }
@keyframes fuzi-bob { to { transform: translateY(-16px); } }
@keyframes fuzi-hop { to { transform: translateY(-48px); } }
@keyframes fuzi-flap-l { from { transform: rotate(6deg); } to { transform: rotate(-9deg); } }
@keyframes fuzi-flap-r { from { transform: rotate(-6deg); } to { transform: rotate(9deg); } }
.fuzi .brow, .fuzi .eye, .fuzi .pupil, .fuzi .blush, .fuzi .hand-inner, .fuzi .mouth, .fuzi .fx-pop {
  transform-box: fill-box;
  transform-origin: center;
}
.fuzi .brow { transition: transform 180ms ease; }
.fuzi .eye { transition: transform 110ms ease, opacity 120ms; }
.fuzi .pupil { transition: transform 160ms ease; }
.fuzi .blush { transition: opacity 200ms, transform 200ms; }
.fuzi .alt-eyes, .fuzi .sweat { transition: opacity 150ms; }
.fuzi .face.tremble { animation: fuzi-tremble 90ms linear infinite; }
@keyframes fuzi-tremble { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(2px, 2px); } }
.fuzi .hand { display: none; }
.fuzi .hand.on { display: inline; }
.fuzi .hand .pose { display: none; }
.fuzi .hand[data-pose="thumb"] .p-thumb,
.fuzi .hand[data-pose="palm"] .p-palm,
.fuzi .hand[data-pose="back"] .p-back { display: inline; }
.fuzi .hand.waving .hand-inner { transform-origin: 50% 90%; animation: fuzi-wave 0.32s ease-in-out infinite alternate; }
@keyframes fuzi-wave { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.fuzi .fx-text { font-family: var(--pa-fx, "Bangers", Impact, sans-serif); }
@media (prefers-reduced-motion: reduce) {
  .fuzi .bob, .fuzi .wl, .fuzi .wr, .fuzi .face.tremble, .fuzi .hand.waving .hand-inner { animation: none !important; }
}

/* ── Visszajelző ikonok és csillagok ──────────────────────────────────
   Az ikonok és a csillagok MASZKOLT elemek (mask-image + háttérszín). A
   szűrő (drop-shadow) a maszk ELŐTT fut, ezért magán az elemen a körvonal
   levágódna — a kontúrt a SZÜLŐ kapja, ahol a szülőben csak ikon van. A
   színek erősebbek: a sárga agy és a fehér izom a krém/sárga felületen elveszett. */
html[data-skin="popart"] {
  --pa-k0: #e11d48;
  --pa-k1: #d97706;
  --pa-k2: #16a34a;
  --pa-k3: #7b3cf0;
  --pa-star-on: #ffc21a;
  --pa-star-off: #ffffff;
  --pa-outline-color: var(--pa-line);
  --pa-outline:
    drop-shadow(1.3px 0 0 var(--pa-outline-color)) drop-shadow(-1.3px 0 0 var(--pa-outline-color))
    drop-shadow(0 1.3px 0 var(--pa-outline-color)) drop-shadow(0 -1.3px 0 var(--pa-outline-color));
}
html[data-skin="popart"][theme="dark"] {
  --pa-k0: #fb7185;
  --pa-k1: #fbbf24;
  --pa-k2: #4ade80;
  --pa-k3: #a78bfa;
  --pa-star-off: #3a2d5c;
  /* sötét papíron a fekete kontúr eltűnne: világos levendula */
  --pa-outline-color: #cdbff0;
}
html[data-skin="popart"] .knowledge-icon:is([knowledge="0"], [knowledge="-1"]),
html[data-skin="popart"] [game-page="end"] .end-results .end-result-list .result-row .icon.s0 { --knowledge-icon-color: var(--pa-k0); }
html[data-skin="popart"] .knowledge-icon[knowledge="1"],
html[data-skin="popart"] [game-page="end"] .end-results .end-result-list .result-row .icon.s1 { --knowledge-icon-color: var(--pa-k1); }
html[data-skin="popart"] .knowledge-icon[knowledge="2"],
html[data-skin="popart"] [game-page="end"] .end-results .end-result-list .result-row .icon.s2 { --knowledge-icon-color: var(--pa-k2); }
html[data-skin="popart"] .knowledge-icon[knowledge="3"],
html[data-skin="popart"] [game-page="end"] .end-results .end-result-list .result-row .icon.s3 { --knowledge-icon-color: var(--pa-k3); }
/* kontúr a csak-ikont tartalmazó szülőkön */
html[data-skin="popart"] :is(.question-knowledge, .flashcard-knowledge, .star-container) {
  filter: var(--pa-outline);
}
/* sötét témában a SZÍNES szint-ikonok sötét kontúrt kapnak: a világos
   levendula a narancs agy körül vakított. A világos kontúr csak a sötét
   (üres) csillagoknak és díjaknak kell, azok nélküle eltűnnének. */
html[data-skin="popart"][theme="dark"] :is(.question-knowledge, .flashcard-knowledge) {
  /* a --pa-outline a gyökéren már kiértékelődött, ezért itt teljes filter kell */
  filter:
    drop-shadow(1.3px 0 0 var(--pa-line)) drop-shadow(-1.3px 0 0 var(--pa-line))
    drop-shadow(0 1.3px 0 var(--pa-line)) drop-shadow(0 -1.3px 0 var(--pa-line));
}

/* segítség-gomb várakozás közben: a visszaszámláló szám fix sötétszürke volt,
   a gomb félig átlátszó — sötét témán eltűnt. Szín a gomb felületéhez. */
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .hint::after {
  color: var(--pa-control-text);
}
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .hint.inactive {
  opacity: 0.75;
}
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .hint.inactive::after {
  font-weight: 800;
  font-size: 20px;
}
/* a tanulókártyák ikonja eddig fehér SVG háttérkép volt — itt is maszk + szín */
html[data-skin="popart"] .flashcard-knowledge .knowledge-icon {
  width: 18px;
  height: 18px;
  background-image: none;
  background-color: var(--knowledge-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
html[data-skin="popart"] .flashcard-knowledge .knowledge-icon:is([knowledge="0"], [knowledge="-1"]) { -webkit-mask-image: url(../images/danger.svg); mask-image: url(../images/danger.svg); }
html[data-skin="popart"] .flashcard-knowledge .knowledge-icon[knowledge="1"] { -webkit-mask-image: url(../images/orange_brain.svg); mask-image: url(../images/orange_brain.svg); }
html[data-skin="popart"] .flashcard-knowledge .knowledge-icon[knowledge="2"] { -webkit-mask-image: url(../images/heart.svg); mask-image: url(../images/heart.svg); }
html[data-skin="popart"] .flashcard-knowledge .knowledge-icon[knowledge="3"] { -webkit-mask-image: url(../images/muscle.svg); mask-image: url(../images/muscle.svg); }
/* csillagok: üres = fehér, teljesített = arany, mindkettő fekete kontúrral */
html[data-skin="popart"] .star-container {
  --star-empty-color: var(--pa-star-off);
  --star-done-color: var(--pa-star-on);
}

/* ── Feladatjelzők a játéklap alján: kontúr, hogy a papíron is látsszanak ── */
html[data-skin="popart"] [game-page="game"] .results .result-color {
  border: 1.5px solid var(--pa-outline-color, var(--pa-line));
  box-sizing: border-box;
}
/* A közös stílus 50%-ra veszi a telítést és a tudásszinteket a kéket/zöldet/sárgát
   használja — a pop-art papíron ettől a szintek összemosódtak (a sárga barnás lett,
   a zöld és a kék alig vált el). Itt a szint-színek (--pa-k0..k3) jönnek, teljes
   telítéssel, nagyobb pöttyel, és minden szintnek külön MINTÁJA van, hogy ne csak
   a szín különböztesse meg (színtévesztőknek, kinyomtatva is). */
html[data-skin="popart"] [game-page="game"] .results {
  gap: 4px 3px;
}
html[data-skin="popart"] [game-page="game"] .results .result-element {
  --base-width: 26px;
  --base-height: 14px;
  filter: none;
}
html[data-skin="popart"] [game-page="game"] .results .result-element[status="-1"] .result-color,
html[data-skin="popart"] [game-page="game"] .results .result-element:not([status]) .result-color {
  /* sosem látott: üres, szaggatott keret */
  background-color: transparent;
  border-style: dashed;
}
@media screen and (max-width: 500px) {
  html[data-skin="popart"] [game-page="game"] .results .result-element {
    --base-width: 19px;
    --base-height: 11px;
  }
}
/* 0 – rontott: tömör piros */
html[data-skin="popart"] [game-page="game"] .results .result-element[status="0"] .result-color {
  background-color: var(--pa-k0);
}
/* 1 – agy: borostyán, átlós csíkokkal */
html[data-skin="popart"] [game-page="game"] .results .result-element[status="1"] .result-color {
  background-color: var(--pa-k1);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 7px);
}
/* 2 – szív: tömör zöld */
html[data-skin="popart"] [game-page="game"] .results .result-element[status="2"] .result-color {
  background-color: var(--pa-k2);
}
/* 3 – izom: lila, fehér ponttal középen */
html[data-skin="popart"] [game-page="game"] .results .result-element[status="3"] .result-color {
  background-color: var(--pa-k3);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.5px);
}
/* a közös CSS a kijelöltet 150%-ra telíti (a többi 50%) — a világoszöld ettől
   neon lett; itt csak enyhén élénkebb, a méret és a lila keret jelöl */
html[data-skin="popart"] [game-page="game"] .results .result-element.selected {
  filter: none;
}
html[data-skin="popart"] [game-page="game"] .results .result-element.selected .result-color {
  outline: 2px solid var(--pa-primary);
  outline-offset: 1px;
}

/* ── Tanulandók lista ───────────────────────────────────────────────── */
html[data-skin="popart"] [game-page="task-list"] .task-container {
  background: var(--pa-card);
  border: 3px solid var(--pa-line);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--pa-shadow);
  overflow: hidden;
}
html[data-skin="popart"] [game-page="task-list"] .list-header {
  background: var(--pa-primary);
  border-bottom: 3px solid var(--pa-line);
}
html[data-skin="popart"] [game-page="task-list"] .list-header .header-element {
  color: var(--pa-primary-text);
  font-weight: 800;
}
html[data-skin="popart"] [game-page="task-list"] .row:not(.list-header) {
  border-bottom: 1.5px dashed color-mix(in srgb, var(--pa-line) 22%, transparent);
}
html[data-skin="popart"] [game-page="task-list"] .row-element {
  color: var(--pa-text);
  font-weight: 600;
}
html[data-skin="popart"] [game-page="task-list"] .game-results {
  align-items: center;
  gap: 8px;
}

/* ── Felugró ablakok (gyorsteszt, tippek, tanulókártyák) ─────────────── */
html[data-skin="popart"] .popup > .content {
  max-width: calc(100% - 28px);
  margin-inline: auto;
  background: var(--pa-card);
  color: var(--pa-text);
  border: 3px solid var(--pa-line);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--pa-shadow);
}
html[data-skin="popart"] .popup > .content :is(h1, h2, h3, h4, h5, h6, p, b, span):not(.button *) {
  color: var(--pa-text);
}
html[data-skin="popart"] .popup > .content h4:first-child,
html[data-skin="popart"] .popup > .content > :first-child > h4:first-child {
  font-family: var(--pa-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--pa-primary);
}
html[data-skin="popart"] .popup .button.white:not(.color) {
  background: var(--pa-control);
  border: 3px solid var(--pa-line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pa-shadow);
}
html[data-skin="popart"] .popup .button.white:not(.color)::before {
  display: none;
}
html[data-skin="popart"] .popup .button.white:not(.color) h5 {
  color: var(--pa-control-text);
  font-weight: 800;
}
html[data-skin="popart"] .popup .buttons .button.white:not(.color):last-child {
  background: var(--pa-primary);
}
html[data-skin="popart"] .popup .buttons .button.white:not(.color):last-child h5 {
  color: var(--pa-primary-text);
}
html[data-skin="popart"] .popup .flashcard :is(.flashcard-front, .flashcard-back) {
  border: 2.5px solid var(--pa-line);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--pa-line);
}

/* Tanulókártyák: két oszlop a rendelkezésre álló szélességben. A közös CSS
   150 px-es minimum-szélessége 360 px-en (az ablak oldalmargójával) kilógatta
   a jobb oldali oszlopot. Függőlegesen a tároló legfeljebb a képernyő 60%-a. */
html[data-skin="popart"] .popup .flashcards-container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: hidden;
  padding: 8px 4px 8px 0;
}
html[data-skin="popart"] .popup .flashcard {
  grid-template-columns: minmax(0, 1fr) 20px;
  min-width: 0;
}
html[data-skin="popart"] .popup .flashcard-inner {
  min-width: 0;
}
html[data-skin="popart"] .popup .flashcard :is(.flashcard-front, .flashcard-back) {
  padding: 6px;
  font-weight: 700;
  line-height: 1.2;
  hyphens: auto;
}
html[data-skin="popart"] .popup .flashcard-front {
  background-color: var(--pa-primary);
  color: var(--pa-primary-text);
}
html[data-skin="popart"] .popup .flashcard-back {
  background-color: var(--pa-field);
  color: var(--pa-text);
}


/* zárólap: a kör szavainak listája jól olvasható */
html[data-skin="popart"] [game-page="end"] .end-results .end-result-list .result-row .text,
html[data-skin="popart"] [game-page="end"] .end-results .end-result-info {
  color: var(--pa-text);
  font-weight: 600;
}

/* ── Billentyűzet melletti nagyítás: a JS (sizePopartFace) a feladatsor
   összes kérdéséből számolja, mennyit nőhet Füzi és a kérdés betűje (a szöveg a
   főszereplő, mérsékelten követi Füzit), az ikon marad ── */
html[data-skin="popart"] [game-page="game"][style*="--pa-question-scale"] .question .question-text {
  font-size: calc(20px * var(--pa-question-scale));
  line-height: 1.25;
}

/* ── Díjak a felugró ablakban (trófea, korona): fehér SVG háttérkép volt,
   krém alapon eltűnt — maszk + szín, a kontúrt a szülő kapja ── */
html[data-skin="popart"] .achievements {
  filter: var(--pa-outline);
}
html[data-skin="popart"] .achievements .achievement {
  opacity: 1;
  background-image: none;
  background-color: var(--pa-star-off);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
html[data-skin="popart"] .achievements .achievement.done { background-color: var(--pa-star-on); }
html[data-skin="popart"] .achievements .achievement.streak { -webkit-mask-image: url(../images/trophy_7.svg); mask-image: url(../images/trophy_7.svg); }
html[data-skin="popart"] .achievements .achievement.percent { -webkit-mask-image: url(../images/crown.svg); mask-image: url(../images/crown.svg); }

/* ── Toplista-fülek (Globális / Saját): egy keretes kapcsoló, a kijelölt
   szegmens lila — a gombonkénti pop-art keret egymásra torlasztotta őket ── */
html[data-skin="popart"] [page="game"] .multi-button {
  gap: 0 !important;
  padding: 0 !important;
  border: 3px solid var(--pa-line) !important;
  border-radius: 12px !important;
  background: var(--pa-control) !important;
  box-shadow: 3px 3px 0 var(--pa-shadow);
  overflow: hidden;
}
html[data-skin="popart"] [page="game"] .multi-button .button.white:not(.color) {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 14px !important;
  transform: none;
}
html[data-skin="popart"] [page="game"] .multi-button .button.white:not(.color) + .button {
  border-left: 3px solid var(--pa-line) !important;
}
html[data-skin="popart"] [page="game"] .multi-button .button.white.selected:not(.color) {
  background: var(--pa-primary) !important;
}
html[data-skin="popart"] [page="game"] .multi-button .button.white.selected:not(.color) h5 {
  color: var(--pa-primary-text) !important;
}

/* ── Szint-ikon a segítség-gomb fölött középen: az első oszlop a gombbal
   azonos széles (--controls-height), az ikon benne középen ── */
html[data-skin="popart"] [game-page="game"] .question {
  grid-template-columns: var(--controls-height, 52px) minmax(0, 1fr) auto;
}
html[data-skin="popart"] [game-page="game"] .question > .question-knowledge {
  justify-self: center;
}

/* ── Egységes gombfeliratok: minden valódi gomb (nyitólap, lista, játék,
   zárólap, felugró ablak) ugyanazzal a betűvel és mérettel. 22 px: így a
   „Na, még egyet?” is egy sorban marad. A nyitólap szöveges linkjei
   (.content-main-buttons) és a toplista-fülek (.subpage-button) kivételek. ── */
html[data-skin="popart"] {
  --pa-button-font: 22px;
}
html[data-skin="popart"] :is([page="game"], .popup) .button.white:not(.color):not(.subpage-button) h5,
html[data-skin="popart"] [game-page="game"] .mobile-controls-row .button h5 {
  font-family: var(--pa-display);
  font-weight: 400;
  font-size: var(--pa-button-font);
  letter-spacing: 1px;
  line-height: 1.05;
}