.main {
  & .content-buttons {
    gap: 15px;
    grid-auto-flow: column;
    justify-self: center;
    width: min-content;
    margin-top: 30px;
    & .button {
      min-width: 125px;
    }
    & > div {
      align-content: start;
      & h6 {
        justify-self: center;
      }
    }
  }
}
@media screen and (max-width: 500px) {
  .main {
    & .content-buttons {
      gap: 15px;
      grid-auto-flow: initial;
      width: auto;
    }
  }
}
[game-page="end"] {
  & .end-results {
    --iconsize: 30px;
    margin-top: 30px;
    display: grid;
    gap: 10px;
    justify-content: center;
    & .end-result-info {
      margin: 0;
      color: var(--color-lightest-all);
    }
    & .end-result-list {
      display: grid;
      justify-content: center;
      & .result-row {
        display: grid;
        gap: 5px;
        grid-template-columns: var(--iconsize) 1fr;
        align-items: center;
        & .icon {
          width: var(--iconsize);
          height: var(--iconsize);
          background-size: 75%;
          background-repeat: no-repeat;
          background-position: center;
          &.s0 {
            background-image: url(./images/danger.svg);
          }
          &.s1 {
            background-image: url(./images/orange_brain.svg);
          }
          &.s2 {
            background-image: url(./images/heart.svg);
          }
        }
        & .text {
          margin: 0;
          color: var(--color-lighter-all);
          font-weight: 200;
        }
      }
    }
  }
}
[game-page="task-list"] {
  min-height: 100%;
  grid-template-rows: auto auto 1fr;
  & .game-results {
    width: fit-content;
    justify-self: center;
    gap: 10px;
    & .trophy-streak {
      background-image: url(./images/trophy_7.svg);
      width: 48px;
      height: 48px;
      opacity: 0.3;
      &.done {
        opacity: 1;
      }
    }
    & .percent-result {
      gap: 3px;
      & .percent-value {
        color: var(--color-lightest-all);
      }
      & .percent-progress-bar {
        width: 100%;
        height: 12px;
        & .percent-progress-bar-frame {
          width: 60px;
          border-color: var(--color-lightest-all);
          & .percent-progress-bar-fill {
            background-color: var(--color-lightest-all);
          }
        }
      }
    }
  }
  & .task-container {
    padding: 0;
    overflow: hidden;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  & .task-list {
    --infobutton-size: 40px;
    --columns: 2;
    &.has-uncertainty {
      & .row {
        grid-template-columns: 40px repeat(var(--columns), 1fr) 40px;
      }
    }
    & .row {
      display: grid;
      gap: 10px;
      grid-template-columns: 40px repeat(var(--columns), 1fr);
      align-items: center;
      padding: 0 10px;
      border-bottom: 1px solid var(--border-white-all);
      &:nth-child(even) {
        background-color: var(--overlay-faint);
      }
      &:last-child {
        border: none;
      }
      &:hover {
        background-color: var(--gradient-purple);
      }

      &.list-header {
        background-color: var(--gradient-purple);
        border-bottom: 1px solid var(--border-white-all);
        & .header-element {
          padding: 20px 0;
          color: var(--color-white-all);
          font-weight: 600;
          margin: 0;
          text-align: center;
        }
      }
      & .row-element {
        padding: 12px 0;
        color: var(--color-white-all);
        font-weight: 200;
        margin: 0;
        text-align: center;
      }
      & .input-container {
        display: grid;
        & .input-element {
          grid-area: 1 / 1;
          width: 100%;
          font-family: var(--main-font);
          font-size: var(--font-size-small);
          font-weight: 400;
          color: var(--color-darkest-all);
          background-color: var(--color-lightest-all);
          text-align: center;
          margin: 8px 0;
          padding: 8px;
          border-radius: 4px;
          border: 1px solid transparent;
          &:focus-visible {
            background-color: var(--gradient-purple);
            color: var(--color-lightest-all);
            border-color: var(--border-white-all);
            outline: none;
            filter: brightness(110%);
          }
          &.disabled {
            pointer-events: none;
          }
          &.feedback-input {
            color: var(--color-light-all);
            & .eval_green {
              color: var(--color-lightgreen);
            }
            & .eval_red {
              color: var(--color-red);
            }
            & .eval_gray {
              color: var(--color-lightgreen);
            }
          }
        }

        & .feedback-text {
          display: none;
          margin: 0 0 8px 0;
          text-align: center;
          font-weight: 300;
          color: var(--color-lighter-all);
        }
      }
      &.check {
        background-color: var(--gradient-purple);
      }
      & .knowledge-icon {
        --infobutton-size: 25px;
      }
    }
    & .uncertainty-btn {
      width: 30px;
      height: 30px;
      background-image: url(./images/danger.svg);
      background-size: 22px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      opacity: 0.5;
      border-radius: 4px;
      place-self: center;
      transition: opacity 0.2s, background-color 0.2s;
      &:hover {
        opacity: 1;
        background-color: var(--overlay-medium);
      }
    }
    & .audio-hint {
      margin: 8px 0;
    }
  }
}
.sticky-actions {
  position: sticky;
  bottom: 0px;
  background-color: var(--border-color);
  padding: 20px;
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
  place-content: center;
  z-index: 10;
  backdrop-filter: blur(10px);
  width: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid var(--border-color);
  border-top: none;
  max-height: 84px;

  & .button {
    &.hidden {
      display: none;
    }
  }
}

.achievements {
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
  margin: 30px;
  justify-content: center;
  & .achievement {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    &.streak {
      background-image: url(./images/trophy_7.svg);
    }
    &.percent {
      background-image: url(./images/crown.svg);
    }
    &.done {
      opacity: 1;
    }
  }
}

.info-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 10px;

  & .star-container {
    --star-duration: 250ms;
    width: 180px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    gap: 5px;
    & .streak-star {
      width: 40px;
      height: 40px;
      background-image: url(./images/star.svg);
      background-size: contain;
      background-repeat: no-repeat;
      transition-duration: var(--star-duration);
      filter: grayscale(1) opacity(0.5);
      &.done {
        animation: starDone 0.5s ease-in-out;
        animation-iteration-count: 1;
        animation-iteration-count: 1;
        transform: scale(1) rotate(0deg);
        filter: none;
      }
    }
  }

  & .timer {
    color: var(--color-lightest-all);
    margin: 0;
    place-self: center;
    min-width: 130px;
    font-weight: 800;
  }
}
@media screen and (max-width: 415px) {
  .info-container {
    grid-auto-flow: initial;
    & .timer {
      text-align: center;
    }
  }
}

.results {
  place-self: center;
  place-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
  & .result-element {
    --base-width: 24px;
    --base-height: 12px;
    --current-width: 30px;
    --current-height: 20px;
    width: var(--current-width);
    height: var(--current-height);
    display: grid;
    place-content: center;
    filter: saturate(50%);
    & .result-color {
      width: var(--base-width);
      height: var(--base-height);
      border-radius: 5px;
      transition-duration: 250ms;
      border: 1px solid transparent;
    }
    &.selected {
      filter: saturate(150%);
      & .result-color {
        width: var(--current-width);
        height: var(--current-height);
        animation: selectResultBox 0.75s linear;
        animation-delay: 0.25s;
      }
    }
    &[status="-1"] {
      & .result-color {
        border-color: var(--border-white-all);
        background-color: var(--background-white-all);
      }
    }
    &[status="0"] {
      & .result-color {
        background-color: var(--color-red);
      }
    }
    &[status="1"] {
      & .result-color {
        background-color: var(--color-yellow);
      }
    }
    &[status="2"] {
      & .result-color {
        background-color: var(--color-lightgreen);
      }
    }
  }
}

.table {
  font-size: var(--font-size-xs);
  border-collapse: collapse;
  background-color: var(--color-white);
  color: var(--color-darker);
  border: 2px solid var(--color-lightest);
  & td {
    border: 1px solid var(--border-color);
    padding: 5px;
    width: 30px;
    height: 30px;
    font-weight: 400;
  }
  & .table_header {
    font-weight: 600;
    background-color: var(--color-lighter);
  }
  & .table_marked {
    background-color: var(--gradient-green);
    color: var(--color-white);
  }
}

@keyframes starDone {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.5) rotate(72deg);
  }
  100% {
    transform: scale(1) rotate(72deg);
  }
}
@keyframes selectResultBox {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.2;
  }

  50% {
    scale: 0.8;
  }

  70% {
    scale: 1.1;
  }

  85% {
    scale: 0.9;
  }

  95% {
    scale: 1.05;
  }

  100% {
    scale: 1;
  }
}
& .question-knowledge {
  display: grid;
  place-content: center;
  width: var(--infobutton-size);
  height: var(--infobutton-size);
  & .knowledge-icon {
    width: var(--infobutton-size);
    height: var(--infobutton-size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    &[knowledge="0"],
    &[knowledge="-1"] {
      background-image: url(./images/danger.svg);
    }
    &[knowledge="1"] {
      background-image: url(./images/orange_brain.svg);
    }
    &[knowledge="2"] {
      background-image: url(./images/heart.svg);
    }
    &.knowledge-hide {
      animation: knowledge-hide 0.25s ease-in-out forwards;
    }
    &.knowledge-show {
      animation: knowledge-show 0.25s linear forwards;
    }
  }
}
.question {
  --infobutton-size: 45px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 30px;
  &[rule="spelling"] {
    & .answer {
      margin: 0;
    }
  }
  & .question-text {
    color: var(--color-white-all);
    margin: 0;
  }
}

.hint {
  position: relative;
  width: var(--infobutton-size);
  height: var(--infobutton-size);
  background-color: var(--color-lightest-all);
  border-radius: 5px;
  background-image: url(./images/listen.svg);
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;

  &.free {
    justify-self: center;
    background-position: center;
  }
  &::after {
    content: var(--counter);
    position: absolute;
    right: 3px;
    bottom: 0px;
    font-family: var(--main-font);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-darker-all);
  }
  &.inactive {
    opacity: 0.5;
    pointer-events: none;
    background-image: none;
    &::after {
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: var(--font-size-body);
    }
  }
  &.locked {
    opacity: 0.5;
    pointer-events: none;
    &::after {
      --counter: "🔒";
      right: -3px;
      filter: brightness(0) opacity(0.4);
    }
  }
  &.text-hint {
    background-image: url(./images/texthint.svg);
  }
}

.question-element {
  display: grid;
  justify-items: center;
}

@keyframes knowledge-hide {
  0% {
    width: var(--infobutton-size);
    height: var(--infobutton-size);
  }

  100% {
    width: 0;
    height: 0;
  }
}

@keyframes knowledge-show {
  0% {
    width: 0;
    height: 0;
  }

  75% {
    width: calc(var(--infobutton-size) + 5px);
    height: calc(var(--infobutton-size) + 5px);
  }

  100% {
    width: var(--infobutton-size);
    height: var(--infobutton-size);
  }
}

.answer {
  width: 100%;
  display: grid;
  margin-bottom: 30px;
  & [answer] {
    grid-area: 1/1;
    width: 100%;
    text-align: center;
    font-weight: 400;
    &[answer="answer"] {
      background-color: var(--border-white-all);
      color: transparent;
      caret-color: var(--color-white-all);
      border: none;
      outline: none;
      &::placeholder {
        font-weight: 200;
        font-size: var(--font-size-xs);
      }
      &:disabled {
        pointer-events: none;
      }
    }
    &[answer="feedback"] {
      pointer-events: none;
    }
  }
}

.feedback {
  font-family: var(--main-font);
  font-size: var(--font-size-small);
  text-align: center;
  color: var(--color-lightest-all);
}

.eval_gray {
  color: var(--color-white-all);
}
.eval_green {
  color: var(--color-lightgreen);
}
.eval_red {
  color: var(--color-red);
}

/* Tanulókártyák a Tanulandók popupban */
.flashcards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.flashcard {
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  perspective: 600px;
}
.flashcard.flippable {
  cursor: pointer;
  gap: 5px;
}
.flashcard-knowledge {
  display: grid;
  place-content: center;
  pointer-events: none;
}
.flashcard-knowledge .knowledge-icon {
  --infobutton-size: 16px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.flashcard-knowledge .knowledge-icon[knowledge="0"],
.flashcard-knowledge .knowledge-icon[knowledge="-1"] {
  background-image: url(./images/danger.svg);
}
.flashcard-knowledge .knowledge-icon[knowledge="1"] {
  background-image: url(./images/orange_brain.svg);
}
.flashcard-knowledge .knowledge-icon[knowledge="2"] {
  background-image: url(./images/heart.svg);
}
.flashcard-inner {
  display: grid;
  min-height: var(--card-height, auto);
  min-width: 150px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-front,
.flashcard-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: grid;
  place-content: center;
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--main-font);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-align: center;
  box-sizing: border-box;
  word-break: break-word;
  overflow: hidden;
}
.flashcard-front {
  background-color: var(--gradient-purple);
  color: var(--color-white-all);
  border: 1px solid var(--border-white-all);
}
.flashcard-back {
  background-color: var(--color-lightest-all);
  color: var(--color-darker-all);
  transform: rotateY(180deg);
}

/* Mobilon a popup magasabb legyen, hogy a tanulókártyák elférjenek */
@media screen and (max-width: 500px) {
  .popup .content {
    max-height: 90vh;
  }
}

/*
 * Popup tipográfia — a popup document.body-ba kerül, [page="game"]-en kívül,
 * ezért külön kell kezelni. 3 méret: 12px / 15px / 18px
 */
.popup h1, .popup h2, .popup h4 {
  font-size: var(--font-size-h6);
  font-family: var(--main-font);
}
.popup h3, .popup h5 {
  font-size: var(--font-size-small);
  font-family: var(--main-font);
}
.popup h6 {
  font-size: var(--font-size-xs);
  font-family: var(--main-font);
}
.popup .button h5 {
  font-size: var(--font-size-small);
}

/*
 * Egységes tipográfia a játékoldalon — pontosan 3 betűméret
 * --game-font-l: kiemelés (timer, popup cím)
 * --game-font-m: alap szöveg (kérdés, válasz, feedback, gomb)
 * --game-font-s: másodlagos szöveg (placeholder, hint, flashcard)
 * Betűtípus: mindenhol var(--main-font) = Outfit
 * Méretek a main.css [theme] blokkjában vannak definiálva
 * Scope: [page="game"] — a streak-tár (streaks oldal) érintetlen marad
 */
[page="game"] {
  /* --- Heading méretek felülírása a játékoldalon --- */
  & h1 { font-size: var(--game-font-l); font-family: var(--main-font); }
  & h2 { font-size: var(--game-font-l); font-family: var(--main-font); }
  & h3 { font-size: var(--game-font-m); font-family: var(--main-font); }
  & h4 { font-size: var(--game-font-l); font-family: var(--main-font); }
  & h5 { font-size: var(--game-font-m); font-family: var(--main-font); }
  & h6 { font-size: var(--game-font-s); font-family: var(--main-font); }

  /* --- Input mezők --- */
  & .input {
    font-size: var(--font-size-small);
    font-family: var(--main-font);
    padding: 8px 20px;
  }
  & .input::placeholder,
  & .input::-webkit-input-placeholder {
    font-size: var(--game-font-s);
  }
  & .textarea {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }

  /* --- Játéktér: instrukció, kérdés, válasz, feedback --- */
  & .instruction {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }
  & .question-text {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }
  & .answer [answer] {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }
  & .answer [answer="answer"]::placeholder {
    font-size: var(--game-font-s);
  }
  & .feedback {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }

  /* --- Timer — kiemelés --- */
  & .timer {
    font-size: var(--game-font-l);
    font-family: var(--main-font);
  }

  /* --- Hint számláló --- */
  & .hint::after {
    font-size: var(--game-font-s);
  }

  /* --- Popup szövegek --- */
  & .popup .title {
    font-size: var(--game-font-l);
    font-family: var(--main-font);
  }
  & .popup .info {
    font-size: var(--game-font-m);
    font-family: var(--main-font);
  }

  /* --- Feedback popup --- */
  & .feedback-popup .input {
    font-size: var(--game-font-m);
  }
  & .feedback-popup .input option {
    font-size: var(--game-font-m);
  }

  /* --- Task lista szövegek --- */
  & [game-page="task-list"] .row .header-element {
    font-size: var(--game-font-m);
  }
  & [game-page="task-list"] .row .row-element {
    font-size: var(--game-font-m);
  }
  & [game-page="task-list"] .row .input-element {
    font-size: var(--game-font-m);
  }
  & [game-page="task-list"] .row .feedback-text {
    font-size: var(--game-font-s);
  }

  /* --- Flashcard szövegek --- */
  & .flashcard-front,
  & .flashcard-back {
    font-size: var(--game-font-s);
  }

  /* --- Végeredmény oldal (end page) --- */
  & [game-page="end"] .end-results .text {
    font-size: var(--game-font-m);
  }

  /* --- Content info (opening page) --- */
  & .content-info h6 {
    font-size: var(--game-font-s);
  }

  /* --- Rating szövegek --- */
  & .rate [rates] {
    font-size: var(--game-font-s);
  }
  & .rate [rate_value] {
    font-size: var(--game-font-m);
  }
}

/* Kompakt elrendezés mobilon — margók, paddinggok, csillagok, eredménysáv */
@media screen and (max-width: 500px) {
  [game-page="game"] > [panel] {
    margin-top: 10px;
    gap: 10px;
  }

  /* --- Szegélyek: panelek border eltávolítása --- */
  [game-page="game"] .hud,
  [game-page="game"] .question-container {
    padding: 10px;
    border: none;
  }

  [game-page="game"] .instruction {
    margin-bottom: 6px;
  }

  /* --- Eredménysáv és csillagok kompakt méret --- */
  [game-page="game"] .results {
    margin-bottom: 6px;
  }

  [game-page="game"] .results .result-element {
    --base-width: 18px;
    --base-height: 8px;
    --current-width: 22px;
    --current-height: 14px;
  }

  [game-page="game"] .info-container {
    gap: 4px;
  }

  [game-page="game"] .star-container {
    width: 200px;
    gap: 3px;
  }

  [game-page="game"] .star-container .streak-star {
    width: 25px;
    height: 25px;
  }

  [game-page="game"] .timer {
    min-width: auto;
  }

  /* --- Kérdés terület kompakt --- */
  [game-page="game"] .question {
    --infobutton-size: 30px;
    margin-bottom: 10px;
    gap: 6px;
  }

  [game-page="game"] .question .question-text {
    margin-bottom: 0;
  }

  [game-page="game"] .answer {
    margin-bottom: 10px;
  }

  [game-page="game"] .button {
    padding: 8px 16px;
  }
}

/* ============================================
   DARK MODE — gombok, panelek, mezők láthatósága
   ============================================ */
[theme="dark"] {
  /* Panelek: finom fehér körvonal + enyhe háttér */
  & .background-white {
    border-color: var(--overlay-medium);
    background-color: var(--overlay-faint);
  }

  /* Gombok (HSL rendszer): világos körvonal + enyhe fénylés */
  & .button.white {
    --background-brightness: 8%;
    --border-brightness: 35%;
    outline-color: var(--overlay-strong);
    box-shadow: 0 0 8px 0 var(--overlay-faint);
    &:hover {
      --background-brightness: 15%;
      --border-brightness: 50%;
      box-shadow: 0 0 12px 0 var(--overlay-medium);
    }
  }
  & .button:not(.white) {
    outline-color: hsla(var(--h), var(--saturation), var(--border-brightness), 0.7);
    box-shadow: 0 0 8px 0 hsla(var(--h), var(--saturation), 50%, 0.15);
  }

  /* Válasz input mező: finomabb körvonal */
  & .answer [answer="answer"] {
    background-color: var(--overlay-medium);
    box-shadow: inset 0 0 0 1px var(--overlay-border);
  }

  /* HUD és kérdés panel */
  & .hud {
    border-color: var(--overlay-medium);
  }
  & .question-container {
    border-color: var(--overlay-medium);
  }

  /* Hint és knowledge ikonok */
  & .hint {
    border: 1px solid var(--overlay-medium);
  }

  /* Task list input */
  & .input-element {
    box-shadow: 0 0 0 1px var(--overlay-medium);
  }

  /* Flashcard kártyák — dark módban nincs extra keret */
  & .flashcard {
    border-color: transparent;
    box-shadow: none;
  }
}