/*
 * MECI QUIZ
 * PASUL 1H
 *
 * Strict local.
 * Nu modifică stilurile celorlalte jocuri.
 */

.match-quiz-page {
  --mq-charcoal: #25211f;
  --mq-charcoal-soft: #342e2a;
  --mq-red: #c62b2f;
  --mq-red-dark: #9f2024;
  --mq-cream: #f6f0e5;
  --mq-cream-light: #fffaf2;
  --mq-ink: #282321;
  --mq-muted: #776b63;
  --mq-border: rgba(58, 46, 39, .15);
  --mq-green: #2f714c;
  --mq-shadow: 0 22px 60px rgba(48, 37, 31, .12);
}

.match-quiz-page [hidden] {
  display: none !important;
}

.mq-main {
  width: 100%;
}

.match-quiz-page .mq-page-hero {
  margin-bottom: clamp(26px, 4vw, 48px);
}

.match-quiz-app {
  width: min(100%, 980px);
  margin: 0 auto clamp(54px, 8vw, 90px);
}

.mq-loading,
.mq-error,
.mq-start,
.mq-game,
.mq-rules {
  box-sizing: border-box;
}

.mq-loading {
  min-height: 230px;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 42px 20px;
  text-align: center;
  color: var(--mq-charcoal);
}

.mq-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(198, 43, 47, .18);
  border-top-color: var(--mq-red);
  border-radius: 50%;
  animation: mq-spin .8s linear infinite;
}

@keyframes mq-spin {
  to {
    transform: rotate(360deg);
  }
}

.mq-kicker,
.mq-stage-kicker {
  display: inline-block;
  color: var(--mq-red);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mq-start {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(198, 43, 47, .24),
      transparent 34%
    ),
    var(--mq-charcoal);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 30px;
  box-shadow: var(--mq-shadow);
}

.mq-start-copy {
  padding:
    clamp(30px, 5vw, 58px)
    clamp(26px, 5vw, 58px);
  color: var(--mq-cream-light);
}

.mq-start-copy .mq-kicker {
  margin-bottom: 14px;
  color: #f05a5e;
}

.mq-start-copy h2 {
  max-width: 650px;
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.mq-start-copy > p {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 250, 242, .78);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.7;
}

.mq-start-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0;
}

.mq-start-facts > div {
  min-width: 0;
  padding: 14px 12px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
}

.mq-start-facts strong,
.mq-start-facts span {
  display: block;
}

.mq-start-facts strong {
  margin-bottom: 3px;
  color: #fff;
  font-size: 1.28rem;
}

.mq-start-facts span {
  color: rgba(255, 250, 242, .68);
  font-size: .78rem;
  line-height: 1.25;
}

.mq-start-copy small {
  display: block;
  max-width: 560px;
  margin-top: 13px;
  color: rgba(255, 250, 242, .58);
  line-height: 1.45;
}

.mq-start-visual {
  display: flex;
  align-items: stretch;
  padding: 18px 18px 18px 0;
}

.mq-start-image-frame {
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  border-radius: 22px;
  background: #171413;
}

.mq-start-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.mq-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    opacity .16s ease;
}

.mq-button:hover {
  transform: translateY(-1px);
}

.mq-button:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.mq-button-primary {
  background: var(--mq-red);
  color: #fff;
  box-shadow: 0 10px 28px rgba(198, 43, 47, .22);
}

.mq-button-primary:hover {
  background: var(--mq-red-dark);
}

.mq-button-secondary {
  background: transparent;
  color: var(--mq-charcoal);
  border: 1px solid rgba(37, 33, 31, .22);
}

.mq-start .mq-button-secondary {
  color: var(--mq-cream-light);
  border-color: rgba(255, 255, 255, .18);
}

.mq-start-button {
  min-width: min(100%, 245px);
}

.mq-game {
  overflow: hidden;
  background: var(--mq-cream-light);
  border: 1px solid var(--mq-border);
  border-radius: 28px;
  box-shadow: var(--mq-shadow);
}

.mq-scorebar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px clamp(20px, 4vw, 34px);
  background:
    linear-gradient(
      110deg,
      var(--mq-charcoal),
      var(--mq-charcoal-soft)
    );
  color: #fff;
}

.mq-scorebar-copy {
  min-width: 0;
}

.mq-scorebar-copy > span {
  display: block;
  margin-bottom: 4px;
  color: #f05a5e;
  font-size: .71rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.mq-scorebar-copy > strong {
  display: block;
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.mq-scorebar-copy b {
  color: #fff;
}

.mq-goal-icons {
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  font-size: 1.22rem;
}

.mq-arena {
  min-height: 430px;
  padding:
    clamp(28px, 5vw, 50px)
    clamp(22px, 5vw, 52px)
    clamp(30px, 5vw, 52px);
}

.mq-stage-head {
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.mq-action-label {
  display: block;
  max-width: 670px;
  margin-top: 6px;
  color: var(--mq-charcoal);
  font-size: clamp(.95rem, 2vw, 1.08rem);
}

.mq-question-timer {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--mq-charcoal);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37, 33, 31, .15);
}

.mq-question-timer strong,
.mq-question-timer small {
  display: block;
  line-height: 1;
}

.mq-question-timer strong {
  font-size: 1.22rem;
}

.mq-question-timer small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .66);
  font-size: .62rem;
}

.mq-question-timer.is-urgent {
  background: var(--mq-red);
}

.mq-narrative {
  display: flex;
  align-items: center;
  min-height: 150px;
  margin-bottom: 22px;
  padding:
    clamp(24px, 4vw, 36px)
    clamp(22px, 4vw, 38px);
  background: var(--mq-cream);
  border: 1px solid rgba(75, 59, 48, .12);
  border-left: 5px solid var(--mq-red);
  border-radius: 20px;
}

.mq-narrative p {
  margin: 0;
  color: var(--mq-ink);
  font-size: clamp(1.28rem, 3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -.015em;
}

.mq-question {
  margin: 0 0 22px;
}

.mq-question h2 {
  margin: 0;
  color: var(--mq-charcoal);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  line-height: 1.38;
}

.mq-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mq-option {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  padding: 14px 16px;
  text-align: left;
  background: #fff;
  color: var(--mq-charcoal);
  border: 1px solid rgba(65, 51, 43, .16);
  border-radius: 15px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color .14s ease,
    transform .14s ease,
    background .14s ease;
}

.mq-option:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 43, 47, .55);
  background: #fffdf9;
}

.mq-option-index {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: var(--mq-charcoal);
  color: #fff;
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 900;
}

.mq-option.is-attack .mq-option-index {
  background: var(--mq-red);
}

.mq-option:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.mq-feedback-status {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  text-align: center;
}

.mq-feedback-status.is-correct {
  background: rgba(47, 113, 76, .1);
  color: var(--mq-green);
}

.mq-feedback-status.is-wrong {
  background: rgba(198, 43, 47, .09);
  color: var(--mq-red-dark);
}

.mq-arena.is-goal .mq-narrative {
  border-left-color: var(--mq-green);
}

.mq-arena.is-miss .mq-narrative {
  border-left-color: var(--mq-red);
}

.mq-final {
  padding: 8px 0 0;
  text-align: center;
}

.mq-final .mq-kicker {
  margin-bottom: 10px;
}

.mq-final h2 {
  margin: 0 0 14px;
  color: var(--mq-charcoal);
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.mq-final > p {
  max-width: 690px;
  margin: 0 auto;
  color: var(--mq-muted);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.65;
}

.mq-login-prompt {
  max-width: 610px;
  margin: 26px auto 0;
  padding: 20px;
  background: var(--mq-cream);
  border: 1px solid var(--mq-border);
  border-radius: 17px;
}

.mq-login-prompt strong {
  display: block;
  margin-bottom: 5px;
  color: var(--mq-charcoal);
}

.mq-login-prompt p {
  margin: 0 0 14px;
  color: var(--mq-muted);
  line-height: 1.5;
}

.mq-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.mq-error {
  padding: clamp(28px, 5vw, 46px);
  background: #fff7f2;
  border: 1px solid rgba(198, 43, 47, .2);
  border-radius: 22px;
  text-align: center;
}

.mq-error h2 {
  margin: 8px 0 8px;
  color: var(--mq-charcoal);
}

.mq-error p {
  margin: 0 0 20px;
  color: var(--mq-muted);
}

.mq-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mq-error-actions .mq-button {
  min-width: min(100%, 190px);
}

.mq-error-actions [hidden] {
  display: none !important;
}

.mq-rules {
  margin-top: 24px;
  padding:
    clamp(24px, 4vw, 34px)
    clamp(22px, 4vw, 36px);
  background: rgba(255, 250, 242, .78);
  border: 1px solid var(--mq-border);
  border-radius: 22px;
}

.mq-rules h2 {
  margin: 0 0 10px;
  color: var(--mq-charcoal);
  font-size: 1.25rem;
}

.mq-rules p {
  margin: 7px 0 0;
  color: var(--mq-muted);
  line-height: 1.65;
}

.match-quiz-app.is-busy {
  cursor: progress;
}

@media (max-width: 760px) {
  .mq-start {
    grid-template-columns: 1fr;
  }

  .mq-start-copy {
    padding: 28px 22px 24px;
  }

  .mq-start-visual {
    order: -1;
    padding: 14px 14px 0;
  }

  .mq-start-image-frame {
    max-height: 225px;
  }

  .mq-start-image-frame img {
    min-height: 0;
    aspect-ratio: 16 / 8;
  }

  .mq-start-facts {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .mq-start-facts > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .mq-start-facts strong {
    margin: 0;
  }

  .mq-start-button {
    width: 100%;
  }

  .mq-scorebar {
    align-items: flex-start;
  }

  .mq-goal-icons {
    max-width: 42%;
  }

  .mq-arena {
    min-height: 395px;
    padding: 25px 18px 28px;
  }

  .mq-narrative {
    min-height: 135px;
    padding: 22px 19px;
  }

  .mq-stage-head {
    margin-bottom: 14px;
  }

  .mq-question-timer {
    width: 54px;
    height: 54px;
  }

  .mq-option {
    min-height: 55px;
    padding: 13px 14px;
  }

  .mq-final-actions {
    flex-direction: column;
  }

  .mq-final-actions .mq-button,
  .mq-login-prompt .mq-button {
    width: 100%;
  }
}

/* MF-MQ-ATTACK-CARDS-20260914 */
.mq-option.mq-attack-option {
  min-height: 82px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.mq-attack-option .mq-option-index {
  width: 31px;
  height: 31px;
}

.mq-attack-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.mq-attack-title {
  color: var(--mq-red-dark);
  font-size: clamp(.7rem, 1.7vw, .8rem);
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: .05em;
}

.mq-attack-action {
  color: var(--mq-charcoal);
  font-size: clamp(.92rem, 2.2vw, 1rem);
  font-weight: 850;
  line-height: 1.28;
}

.mq-attack-meta {
  margin-top: 2px;
  color: rgba(65, 51, 43, .72);
  font-size: clamp(.71rem, 1.8vw, .79rem);
  font-weight: 850;
  line-height: 1.25;
}

/* ============================================================
   MF-MQ-VIEWPORT-FIT-17-1:START

   PASUL 17.1
   - ecran de joc stabil;
   - gameplay fără scroll vertical;
   - înălțime elastică raportată la viewport;
   - scorebar fix în geometrie;
   - arena ocupă restul;
   - fără modificarea logicii motorului.
   ============================================================ */

.match-quiz-app {
    --mq-game-height:
        clamp(
            500px,
            calc(100dvh - 168px),
            650px
        );
}


/* ============================================================
   JOC ACTIV
   ============================================================ */

.mq-game {
    height: var(--mq-game-height);
    min-height: 0;
    max-height: var(--mq-game-height);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/*
 * Scorebarul nu crește și nu împinge arena.
 */
.mq-scorebar {
    flex: 0 0 auto;

    min-height: 0;

    padding-top:
        clamp(
            11px,
            1.7dvh,
            18px
        );

    padding-bottom:
        clamp(
            11px,
            1.7dvh,
            18px
        );
}


/*
 * Arena ocupă exact restul jocului.
 */
.mq-arena {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding:
        clamp(18px, 2.8dvh, 34px)
        clamp(18px, 3.4vw, 42px)
        clamp(18px, 2.8dvh, 34px);
}


/*
 * Antetul fazei rămâne compact.
 * Timerul poate apărea fără să schimbe geometria exterioară.
 */
.mq-stage-head {
    flex: 0 0 auto;

    min-height: 50px;

    margin-bottom:
        clamp(
            10px,
            1.8dvh,
            18px
        );
}


/*
 * Zona narativă este elastică.
 * Nu mai forțăm 150px indiferent de viewport.
 */
.mq-narrative {
    flex: 0 1 auto;

    min-height:
        clamp(
            96px,
            19dvh,
            150px
        );

    margin-bottom:
        clamp(
            10px,
            1.8dvh,
            22px
        );

    padding:
        clamp(16px, 2.8dvh, 30px)
        clamp(18px, 3vw, 34px);
}


/*
 * Întrebarea și opțiunile trebuie să rămână în arena stabilă.
 */
.mq-question {
    flex: 0 0 auto;

    margin-bottom:
        clamp(
            10px,
            1.7dvh,
            18px
        );
}

.mq-options {
    flex: 0 1 auto;

    min-height: 0;

    gap:
        clamp(
            7px,
            1.2dvh,
            10px
        );
}

.mq-option {
    min-height:
        clamp(
            46px,
            7dvh,
            58px
        );

    padding:
        clamp(9px, 1.5dvh, 14px)
        16px;
}

.mq-option.mq-attack-option {
    min-height:
        clamp(
            62px,
            10dvh,
            82px
        );

    padding:
        clamp(9px, 1.4dvh, 12px)
        14px;
}


/*
 * Feedbackul nu trebuie să introducă salturi mari.
 */
.mq-feedback-status {
    flex: 0 0 auto;

    margin-top:
        clamp(
            8px,
            1.4dvh,
            18px
        );
}


/* ============================================================
   LAPTOP / ECRAN MAI SCUND
   ============================================================ */

@media
    (min-width: 761px)
    and (max-height: 760px) {

    .match-quiz-app {
        --mq-game-height:
            calc(100dvh - 138px);
    }

    .mq-arena {
        padding:
            16px
            clamp(18px, 3vw, 34px)
            16px;
    }

    .mq-stage-head {
        min-height: 42px;
        margin-bottom: 9px;
    }

    .mq-narrative {
        min-height: 88px;
        margin-bottom: 10px;
        padding: 14px 20px;
    }

    .mq-narrative p {
        font-size:
            clamp(
                1.08rem,
                2.5vw,
                1.5rem
            );
    }

    .mq-option {
        min-height: 44px;
        padding: 8px 13px;
    }

    .mq-option.mq-attack-option {
        min-height: 60px;
        padding: 8px 12px;
    }
}


/* ============================================================
   TABLETĂ / MOBIL
   ============================================================ */

@media (max-width: 760px) {

    .match-quiz-app {
        --mq-game-height:
            calc(100dvh - 92px);
    }

    .mq-game {
        border-radius: 20px;
    }

    .mq-scorebar {
        padding:
            10px
            14px;

        gap: 12px;
    }

    .mq-arena {
        padding:
            14px
            14px
            16px;
    }

    .mq-stage-head {
        min-height: 44px;
        gap: 10px;
        margin-bottom: 9px;
    }

    .mq-narrative {
        min-height:
            clamp(
                82px,
                17dvh,
                125px
            );

        margin-bottom: 9px;

        padding:
            14px
            15px;
    }

    .mq-narrative p {
        font-size:
            clamp(
                1.02rem,
                4.5vw,
                1.34rem
            );

        line-height: 1.3;
    }

    .mq-question {
        margin-bottom: 9px;
    }

    .mq-question h2 {
        font-size:
            clamp(
                1.02rem,
                4.3vw,
                1.35rem
            );

        line-height: 1.3;
    }

    .mq-options {
        gap: 7px;
    }

    .mq-option {
        min-height:
            clamp(
                43px,
                6.6dvh,
                52px
            );

        padding:
            8px
            11px;
    }

    .mq-option.mq-attack-option {
        min-height:
            clamp(
                57px,
                8.8dvh,
                72px
            );

        padding:
            8px
            10px;
    }

    .mq-feedback-status {
        margin-top: 7px;
    }
}


/* ============================================================
   MOBIL SCUND
   ============================================================ */

@media
    (max-width: 760px)
    and (max-height: 700px) {

    .match-quiz-app {
        --mq-game-height:
            calc(100dvh - 76px);
    }

    .mq-scorebar {
        padding:
            8px
            12px;
    }

    .mq-arena {
        padding:
            10px
            12px
            12px;
    }

    .mq-stage-head {
        min-height: 38px;
        margin-bottom: 6px;
    }

    .mq-narrative {
        min-height: 72px;
        margin-bottom: 7px;
        padding: 11px 13px;
    }

    .mq-options {
        gap: 5px;
    }

    .mq-option {
        min-height: 40px;
        padding: 7px 10px;
    }

    .mq-option.mq-attack-option {
        min-height: 52px;
        padding: 6px 9px;
    }
}

/* MF-MQ-VIEWPORT-FIT-17-1:END */

/* ============================================================
   MF-MQ-GAMEPLAY-VIEWPORT-17-1-B:START

   Gameplay activ:
   - header global rămâne vizibil;
   - hero / mode nav / reguli / footer ies din layout;
   - zona jocului ocupă exact viewportul rămas;
   - fără scroll al paginii;
   - înălțimea headerului este măsurată live de JS.
   ============================================================ */

body.mq-gameplay-active {
    overflow: hidden !important;
}

body.mq-gameplay-active .mq-page-hero,
body.mq-gameplay-active .mq-mode-nav,
body.mq-gameplay-active .mq-rules,
body.mq-gameplay-active .mf-site-footer {
    display: none !important;
}

body.mq-gameplay-active .mq-main {
    width: 100%;

    height:
        calc(
            100dvh
            - var(--mq-live-header-height, 90px)
        );

    min-height: 0;

    overflow: hidden;

    padding:
        clamp(8px, 1.5dvh, 14px)
        clamp(10px, 2vw, 20px);

    display: grid;
    place-items: center;
}

body.mq-gameplay-active .match-quiz-app {
    width: min(100%, 980px);

    height: 100%;
    min-height: 0;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

body.mq-gameplay-active .mq-game {
    flex: 1 1 auto;

    width: 100%;

    height: 100%;
    min-height: 0;
    max-height: 100%;
}

@media (max-width: 960px) {

    body.mq-gameplay-active .mq-main {
        height:
            calc(
                100dvh
                - var(--mq-live-header-height, 68px)
            );

        padding:
            clamp(6px, 1.2dvh, 10px)
            clamp(7px, 2.4vw, 12px);
    }
}

@media (max-height: 650px) {

    body.mq-gameplay-active .mq-main {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* MF-MQ-GAMEPLAY-VIEWPORT-17-1-B:END */

/* ============================================================
   MF-MQ-PRESTART-17-2:START

   PASUL 17.2 — PRE-START
   - structură clară înainte de meci;
   - CTA START MECI dominant;
   - desktop 2 coloane;
   - mobil 1 coloană;
   - fără modificarea motorului.
   ============================================================ */


/* ------------------------------------------------------------
   CARD PRINCIPAL
   ------------------------------------------------------------ */

.mq-start {
    position: relative;

    overflow: hidden;

    grid-template-columns:
        minmax(0, 1fr)
        clamp(250px, 31vw, 340px);

    min-height:
        clamp(
            390px,
            49dvh,
            470px
        );

    border:
        1px solid
        rgba(38, 31, 28, .20);

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #221e1c 0%,
            #2e2825 58%,
            #1d1917 100%
        );

    box-shadow:
        0 24px 60px
        rgba(45, 35, 30, .16);
}


/*
 * Accent foarte discret.
 * Nu este încă fundalul de teren din gameplay.
 */
.mq-start::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 14%,
            rgba(198, 43, 47, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 73% 85%,
            rgba(255, 250, 242, .055),
            transparent 34%
        );
}


/* ------------------------------------------------------------
   COPY
   ------------------------------------------------------------ */

.mq-start-copy {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(30px, 4.5vw, 52px)
        clamp(28px, 4.5vw, 54px);

    color:
        var(--mq-cream-light);
}


.mq-start-copy .mq-kicker {
    margin-bottom:
        12px;

    color:
        #f05a5e;
}


.mq-start-copy h2 {
    max-width:
        620px;

    margin:
        0
        0
        14px;

    color:
        #ffffff;

    font-size:
        clamp(
            2rem,
            3.4vw,
            3rem
        );

    line-height:
        1.04;

    letter-spacing:
        -.035em;
}


.mq-start-copy > p {
    max-width:
        610px;

    margin:
        0;

    color:
        rgba(255, 250, 242, .77);

    font-size:
        clamp(
            .98rem,
            1.45vw,
            1.08rem
        );

    line-height:
        1.6;
}


/* ------------------------------------------------------------
   3 INFORMAȚII
   ------------------------------------------------------------ */

.mq-start-facts {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        9px;

    margin:
        clamp(21px, 3dvh, 27px)
        0;
}


.mq-start-facts > div {
    min-width: 0;

    padding:
        12px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, .055);

    text-align:
        center;
}


.mq-start-facts strong {
    margin-bottom:
        4px;

    color:
        #ffffff;

    font-size:
        1.2rem;

    line-height:
        1;
}


.mq-start-facts span {
    color:
        rgba(255, 250, 242, .68);

    font-size:
        .73rem;

    font-weight:
        800;

    line-height:
        1.25;
}


/* ------------------------------------------------------------
   CTA
   ------------------------------------------------------------ */

.mq-start-button {
    width:
        min(
            100%,
            260px
        );

    min-height:
        54px;

    padding:
        13px
        25px;

    border-radius:
        15px;

    font-size:
        1rem;

    letter-spacing:
        .035em;

    box-shadow:
        0 13px 28px
        rgba(198, 43, 47, .28);
}


.mq-start-button:hover {
    transform:
        translateY(-1px);
}


.mq-start-copy small {
    max-width:
        540px;

    margin-top:
        13px;

    color:
        rgba(255, 250, 242, .54);

    font-size:
        .78rem;

    line-height:
        1.4;
}


/* ------------------------------------------------------------
   IMAGINE
   ------------------------------------------------------------ */

.mq-start-visual {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: stretch;

    padding:
        16px
        16px
        16px
        0;
}


.mq-start-image-frame {
    position: relative;

    overflow: hidden;

    width:
        100%;

    min-height:
        100%;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius:
        21px;

    background:
        #171413;

    box-shadow:
        0 16px 36px
        rgba(0, 0, 0, .20);
}


.mq-start-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(15, 12, 11, .20)
        );
}


.mq-start-image-frame img {
    display: block;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        cover;

    object-position:
        center;
}


/* ============================================================
   TABLETĂ
   ============================================================ */

@media
    (min-width: 761px)
    and (max-width: 980px) {

    .mq-start {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 290px);
    }

    .mq-start-copy {
        padding:
            30px
            28px;
    }

    .mq-start-copy h2 {
        font-size:
            clamp(
                1.9rem,
                4vw,
                2.55rem
            );
    }
}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 760px) {

    .mq-start {
        grid-template-columns:
            1fr;

        min-height:
            0;

        border-radius:
            22px;
    }


    .mq-start-visual {
        order:
            -1;

        padding:
            12px
            12px
            0;
    }


    .mq-start-image-frame {
        width:
            100%;

        min-height:
            0;

        max-height:
            190px;

        border-radius:
            16px;
    }


    .mq-start-image-frame img {
        width:
            100%;

        height:
            190px;

        min-height:
            0;

        aspect-ratio:
            auto;

        object-fit:
            cover;

        object-position:
            center;
    }


    .mq-start-copy {
        padding:
            23px
            20px
            24px;
    }


    .mq-start-copy .mq-kicker {
        margin-bottom:
            9px;
    }


    .mq-start-copy h2 {
        margin-bottom:
            11px;

        font-size:
            clamp(
                1.72rem,
                8vw,
                2.15rem
            );
    }


    .mq-start-copy > p {
        font-size:
            .94rem;

        line-height:
            1.5;
    }


    .mq-start-facts {
        gap:
            6px;

        margin:
            18px
            0;
    }


    .mq-start-facts > div {
        padding:
            10px
            6px;

        border-radius:
            12px;
    }


    .mq-start-facts strong {
        font-size:
            1.08rem;
    }


    .mq-start-facts span {
        font-size:
            .66rem;
    }


    .mq-start-button {
        width:
            100%;

        min-height:
            52px;

        margin:
            0;
    }


    .mq-start-copy small {
        margin-top:
            11px;

        font-size:
            .72rem;
    }
}


/* ============================================================
   MOBIL MIC
   ============================================================ */

@media
    (max-width: 390px) {

    .mq-start-visual {
        padding:
            10px
            10px
            0;
    }

    .mq-start-image-frame,
    .mq-start-image-frame img {
        height:
            158px;

        max-height:
            158px;
    }

    .mq-start-copy {
        padding:
            19px
            16px
            21px;
    }

    .mq-start-facts span {
        font-size:
            .62rem;
    }
}

/* MF-MQ-PRESTART-17-2:END */

/* ============================================================
   MF-MQ-RUN-EXPIRED-24H-V2:START
   ============================================================ */

.mq-expired-overlay {
    position: fixed;
    inset: 0;
    z-index: 12050;

    display: grid;
    place-items: center;

    padding:
        clamp(14px, 3vw, 28px);

    background:
        rgba(26, 22, 20, .58);

    -webkit-backdrop-filter:
        blur(7px);

    backdrop-filter:
        blur(7px);
}

.mq-expired-overlay[hidden] {
    display: none !important;
}

.mq-expired-dialog {
    width:
        min(
            560px,
            calc(100vw - 28px)
        );

    max-height:
        calc(100dvh - 28px);

    overflow-y: auto;

    padding:
        clamp(28px, 5vw, 42px);

    border:
        1px solid
        rgba(198, 40, 45, .18);

    border-radius: 26px;

    background:
        #fffaf2;

    box-shadow:
        0 28px 80px
        rgba(20, 18, 17, .28);

    text-align: center;
}

.mq-expired-dialog .mq-kicker {
    display: block;
    margin-bottom: 11px;
    color: #c6282d;
}

.mq-expired-dialog h2 {
    max-width: 470px;

    margin:
        0 auto 14px;

    color: #211d1b;

    font-family:
        "Fredoka",
        "Nunito",
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            5vw,
            2.6rem
        );

    line-height: 1.05;
    letter-spacing: -.035em;
}

.mq-expired-dialog > p {
    max-width: 450px;

    margin:
        0 auto;

    color: #665e59;

    font-size:
        clamp(
            .96rem,
            2vw,
            1.08rem
        );

    line-height: 1.6;
}

.mq-expired-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 26px;
}

.mq-expired-actions .mq-button {
    min-width: 190px;
}

@media (max-width: 560px) {

    .mq-expired-dialog {
        padding:
            26px 18px 22px;

        border-radius: 21px;
    }

    .mq-expired-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .mq-expired-actions .mq-button {
        width: 100%;
        min-width: 0;
    }
}

/* MF-MQ-RUN-EXPIRED-24H-V2:END */

/*
 * ==========================================================
 * MF-MQ-AUTO-NARRATIVE-17-3:START
 *
 * PASUL 17.3
 *
 * intro / narrative_a / narrative_b:
 *
 * - teren stilizat și blurat în fundal;
 * - card narativ centrat vertical;
 * - border complet, fără accent lateral;
 * - kicker integrat în card;
 * - text centrat;
 * - fără modificări pentru attack_choice / question.
 * ==========================================================
 */

.mq-arena.is-auto-narrative {
    position: relative;

    isolation: isolate;

    justify-content: center;

    background:
        #1d5136;
}


/*
 * Terenul.
 *
 * Este construit exclusiv din CSS:
 * gazon în benzi + tușe + linia de centru + cerc central.
 *
 * Blur-ul îl ține în plan secund și evită aspectul
 * de diagramă tehnică.
 */

.mq-arena.is-auto-narrative::before {
    content: "";

    position: absolute;

    inset: -2%;

    z-index: -2;

    pointer-events: none;

    background-image:
        url("/jocuri/meci-quiz/assets/football-pitch-bg.svg?v=20260917-pitch-v1");

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        100% 100%;

    filter:
        blur(1.8px)
        saturate(.90);

    transform:
        scale(1.02);

    opacity:
        .94;
}



/*
 * Vignetare subtilă.
 * Cardul trebuie să rămână punctul focal.
 */
.mq-arena.is-auto-narrative::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.035) 32%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(17,45,31,.22),
            rgba(10,32,22,.42)
        );
}


/*
 * În fazele automate phase-head-ul exterior nu mai consumă
 * spațiu. Kicker-ul este mutat vizual în cardul narativ.
 */
.mq-arena.is-auto-narrative
.mq-stage-head {
    display: none;
}


/*
 * Cardul fazei automate.
 */
.mq-arena.is-auto-narrative
.mq-narrative {
    flex:
        0 0 auto;

    box-sizing:
        border-box;

    width:
        min(
            860px,
            100%
        );

    min-height:
        clamp(
            155px,
            28dvh,
            238px
        );

    margin:
        0 auto;

    padding:
        clamp(
            24px,
            4.2dvh,
            40px
        )
        clamp(
            22px,
            5vw,
            58px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            9px,
            1.5dvh,
            14px
        );

    text-align:
        center;

    background:
        rgba(
            255,
            250,
            242,
            .925
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .62
        );

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .62
        );

    border-radius:
        24px;

    box-shadow:
        0 24px 65px
        rgba(
            8,
            27,
            18,
            .30
        );

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);
}


/*
 * "MECI ÎN DESFĂȘURARE" / "FLUIER DE START"
 * este acum parte din fluxul vizual al cardului.
 */
.mq-arena.is-auto-narrative
.mq-narrative::before {
    content:
        attr(
            data-phase-label
        );

    display:
        block;

    color:
        var(--mq-red);

    font-size:
        clamp(
            .70rem,
            1.3vw,
            .78rem
        );

    font-weight:
        950;

    line-height:
        1.15;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


/*
 * Text narativ.
 */
.mq-arena.is-auto-narrative
.mq-narrative p {
    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;

    color:
        var(--mq-ink);

    font-size:
        clamp(
            1.30rem,
            2.7vw,
            1.82rem
        );

    font-weight:
        850;

    line-height:
        1.38;

    letter-spacing:
        -.016em;
}


/*
 * Mobile.
 */
@media (max-width: 760px) {

    .mq-arena.is-auto-narrative
    .mq-narrative {
        width:
            100%;

        min-height:
            clamp(
                132px,
                25dvh,
                205px
            );

        padding:
            clamp(
                20px,
                3.6dvh,
                29px
            )
            clamp(
                17px,
                5vw,
                25px
            );

        border-radius:
            20px;
    }


    .mq-arena.is-auto-narrative
    .mq-narrative p {
        font-size:
            clamp(
                1.10rem,
                5vw,
                1.42rem
            );

        line-height:
            1.34;
    }

}


/*
 * Ecrane joase.
 * Păstrăm criteriul 17.1: fără scroll vertical.
 */
@media (max-height: 700px) {

    .mq-arena.is-auto-narrative
    .mq-narrative {
        min-height:
            clamp(
                108px,
                22dvh,
                155px
            );

        padding:
            clamp(
                15px,
                2.4dvh,
                22px
            )
            clamp(
                18px,
                4vw,
                38px
            );

        gap:
            7px;
    }


    .mq-arena.is-auto-narrative
    .mq-narrative p {
        font-size:
            clamp(
                1.04rem,
                2.4vw,
                1.38rem
            );

        line-height:
            1.30;
    }

}


/*
 * Mobile + ecran jos.
 */
@media
    (max-width: 760px)
    and (max-height: 700px) {

    .mq-arena.is-auto-narrative
    .mq-narrative {
        min-height:
            105px;

        padding:
            14px
            15px;
    }


    .mq-arena.is-auto-narrative
    .mq-narrative p {
        font-size:
            clamp(
                1rem,
                4.4vw,
                1.22rem
            );
    }

}

/* MF-MQ-AUTO-NARRATIVE-17-3:END */

/*
 * ==========================================================
 * MF-MQ-PITCH-RESPONSIVE-17-3
 *
 * Desktop + tabletă:
 * SVG landscape elastic pe întreaga arenă.
 *
 * Mobil:
 * SVG portrait dedicat, elastic după dimensiunile
 * reale ale arenei.
 *
 * Fără crop și fără rotire CSS.
 * ==========================================================
 */


/*
 * Desktop + tabletă.
 *
 * SVG-ul se adaptează independent pe ambele axe.
 */
.mq-arena.is-auto-narrative::before {
    background-size:
        100% 100%;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/*
 * Mobil.
 *
 * Terenul trece fizic pe verticală:
 * porțile sus/jos, careurile sus/jos,
 * linia de centru orizontală.
 *
 * preserveAspectRatio="none" + 100% 100%
 * îl face elastic exact după dimensiunea arenei.
 */
@media (max-width: 760px) {

    .mq-arena.is-auto-narrative::before {
        background-image:
            url(
                "/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg?v=20260917-pitch-mobile-v1"
            );

        background-size:
            100% 100%;

        background-position:
            center;

        background-repeat:
            no-repeat;
    }

}

/*
 * ==========================================================
 * MF-MQ-ATTACK-CHOICE-17-4:START
 *
 * attack_choice:
 * - aceeași arenă ca fazele automate
 * - textul B centrat în card narativ
 * - variantele centrate sub el
 * - fără kicker-ele mari
 * - titlurile variantelor în roșu
 * - subtitluri simplificate
 * ==========================================================
 */

.mq-arena.is-attack-choice {
    position: relative;
    isolation: isolate;
    justify-content: center;
    background: #1d5136;
}

.mq-arena.is-attack-choice::before {
    content: "";

    position: absolute;
    inset: -2%;
    z-index: -2;
    pointer-events: none;

    background-image:
        url("/jocuri/meci-quiz/assets/football-pitch-bg.svg?v=20260917-pitch-v1");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    filter:
        blur(1.8px)
        saturate(.90);

    transform: scale(1.02);
    opacity: .94;
}

.mq-arena.is-attack-choice::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.035) 32%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(17,45,31,.22),
            rgba(10,32,22,.42)
        );
}

.mq-arena.is-attack-choice .mq-stage-head {
    display: none;
}

.mq-arena.is-attack-choice .mq-narrative {
    flex: 0 0 auto;
    box-sizing: border-box;

    width:
        min(
            860px,
            100%
        );

    min-height:
        clamp(
            128px,
            22dvh,
            180px
        );

    margin: 0 auto 16px;
    padding:
        clamp(22px, 3.8dvh, 34px)
        clamp(22px, 5vw, 58px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(9px, 1.4dvh, 14px);

    text-align: center;

    background:
        rgba(255, 250, 242, .925);

    border:
        1px solid
        rgba(255,255,255,.62);

    border-radius: 24px;

    box-shadow:
        0 24px 65px
        rgba(8,27,18,.30);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mq-arena.is-attack-choice .mq-narrative::before {
    content: attr(data-phase-label);

    display: block;

    color: var(--mq-red);

    font-size:
        clamp(.70rem, 1.3vw, .78rem);

    font-weight: 950;
    line-height: 1.15;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mq-arena.is-attack-choice .mq-narrative p {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;

    text-align: center;
    color: var(--mq-ink);

    font-size:
        clamp(1.28rem, 2.6vw, 1.82rem);

    font-weight: 850;
    line-height: 1.36;
    letter-spacing: -.016em;
}

/* lista variantelor */
.mq-arena.is-attack-choice .mq-options {
    width:
        min(
            860px,
            100%
        );

    margin: 0 auto;

    display: grid;
    gap: 12px;
}

/* cardurile variantelor */
.mq-arena.is-attack-choice .mq-option {
    position: relative;

    min-height: 0;
    padding:
        18px 20px 18px 76px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(255,255,255,.62);

    box-shadow:
        0 16px 42px
        rgba(8,27,18,.18);

    text-align: left;
}

/* badge-ul cu 1/2/3 rămâne */
.mq-arena.is-attack-choice .mq-option:hover {
    transform: none;
}

/* ascundem kicker-ele route */
.mq-arena.is-attack-choice .mq-option :is(
    .mq-option-kicker,
    .mq-option-eyebrow,
    .mq-option-route,
    .mq-option-lead,
    .mq-option-topline
) {
    display: none !important;
}

/* titlul variantei */
.mq-arena.is-attack-choice .mq-option :is(
    .mq-option-title,
    .mq-option-main,
    .mq-option-text strong,
    strong
) {
    color: var(--mq-red);
}

/* ascundem descrierea veche */
.mq-arena.is-attack-choice .mq-option :is(
    .mq-option-meta,
    .mq-option-subtitle,
    .mq-option-summary,
    .mq-option-description,
    .mq-option-note,
    small
) {
    display: none !important;
}

/* adăugăm textele noi */
.mq-arena.is-attack-choice .mq-option::after {
    display: block;
    margin-top: 6px;

    color: #615955;

    font-size:
        clamp(.92rem, 1.6vw, 1rem);

    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.mq-arena.is-attack-choice .mq-option:nth-child(1)::after {
    content: "1 întrebare grea";
}

.mq-arena.is-attack-choice .mq-option:nth-child(2)::after {
    content: "2 întrebări medii";
}

.mq-arena.is-attack-choice .mq-option:nth-child(3)::after {
    content: "2 întrebări ușoare și 1 medie";
}

/* mobil: pitch portrait */
@media (max-width: 760px) {

    .mq-arena.is-attack-choice::before {
        background-image:
            url("/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg?v=20260917-pitch-mobile-v1");

        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mq-arena.is-attack-choice .mq-narrative {
        width: 100%;
        min-height:
            clamp(
                120px,
                23dvh,
                175px
            );

        padding:
            clamp(18px, 3.5dvh, 28px)
            clamp(16px, 5vw, 24px);

        border-radius: 20px;
    }

    .mq-arena.is-attack-choice .mq-narrative p {
        font-size:
            clamp(
                1.06rem,
                4.8vw,
                1.38rem
            );

        line-height: 1.34;
    }

    .mq-arena.is-attack-choice .mq-options {
        width: 100%;
        gap: 10px;
    }

    .mq-arena.is-attack-choice .mq-option {
        padding:
            16px 16px 16px 68px;

        border-radius: 18px;
    }

    .mq-arena.is-attack-choice .mq-option::after {
        font-size:
            clamp(
                .88rem,
                3.6vw,
                .98rem
            );
    }
}

@media (max-height: 700px) {

    .mq-arena.is-attack-choice .mq-narrative {
        min-height:
            clamp(
                102px,
                20dvh,
                145px
            );

        padding:
            clamp(14px, 2.3dvh, 20px)
            clamp(18px, 4vw, 36px);
    }

    .mq-arena.is-attack-choice .mq-narrative p {
        font-size:
            clamp(
                1.02rem,
                2.3vw,
                1.30rem
            );
    }

    .mq-arena.is-attack-choice .mq-options {
        gap: 8px;
    }

    .mq-arena.is-attack-choice .mq-option {
        padding:
            14px 16px 14px 64px;
    }
}

/* MF-MQ-ATTACK-CHOICE-17-4:END */

/*
 * ==========================================================
 * MF-MQ-ATTACK-CHOICE-TEXT-FIX:START
 *
 * Fix textual pentru cele 3 variante de atac.
 * ==========================================================
 */

.mq-arena.is-attack-choice .mq-option--attack-choice .mq-option-attack-title {
    color: var(--mq-red) !important;
}

.mq-arena.is-attack-choice .mq-option--attack-choice .mq-option-attack-summary {
    margin-top: 6px;

    color: #615955;

    font-size:
        clamp(.92rem, 1.6vw, 1rem);

    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

@media (max-width: 760px) {
    .mq-arena.is-attack-choice .mq-option--attack-choice .mq-option-attack-summary {
        font-size:
            clamp(.88rem, 3.6vw, .98rem);
    }
}

/* MF-MQ-ATTACK-CHOICE-TEXT-FIX:END */



/*
 * ==========================================================
 * MF-MQ-ATTACK-CHOICE-REAL-TEXT-FIX:START
 * ==========================================================
 */

/*
 * Textul principal al variantei:
 * Lob..., Centrare..., Pasă...
 */
.mq-arena.is-attack-choice
.mq-attack-action {
    color: var(--mq-red) !important;
    font-weight: 900;
}


/*
 * Meta simplificat:
 * 1 întrebare grea / 2 întrebări medii / etc.
 */
.mq-arena.is-attack-choice
.mq-attack-meta {
    margin-top: 5px;

    color: #615955;

    font-size:
        clamp(.88rem, 1.55vw, .98rem);

    font-weight: 700;
    line-height: 1.3;
}


/*
 * Siguranță:
 * vechiul titlu de categorie nu mai trebuie să existe
 * după patch, dar îl ascundem și CSS dacă apare din cache.
 */
.mq-arena.is-attack-choice
.mq-attack-title {
    display: none !important;
}


/*
 * Eliminăm pseudo-content-ul experimental din primul patch,
 * responsabil pentru cifrele rătăcite sub carduri.
 */
.mq-arena.is-attack-choice
.mq-option::after {
    content: none !important;
    display: none !important;
}


/*
 * Helper-ul vechi nu mai există.
 * Dacă browserul păstrează temporar un DOM vechi,
 * nici summary-ul lui nu trebuie afișat.
 */
.mq-arena.is-attack-choice
.mq-option-attack-summary {
    display: none !important;
}

/* MF-MQ-ATTACK-CHOICE-REAL-TEXT-FIX:END */

/*
 * ==========================================================
 * MF-MQ-SCOREBAR-17-4B:START
 *
 * Scorebar:
 * LEFT  = titlul partidei
 * RIGHT = Goluri marcate + mingi
 *
 * Attack:
 * texte centrate + hover.
 * ==========================================================
 */

.mq-scorebar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(
            12px,
            2.5vw,
            28px
        );
}


.mq-scorebar-copy {
    min-width: 0;

    overflow: hidden;
}


.mq-scorebar-copy > span,
.mq-scorebar-title {
    display: block;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    color: #f05a5e;

    font-size:
        clamp(
            .76rem,
            1.45vw,
            .92rem
        );

    font-weight: 950;

    line-height: 1.25;

    letter-spacing: .045em;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.mq-scorebar-goals {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap:
        clamp(
            7px,
            1vw,
            11px
        );

    white-space: nowrap;
}


.mq-scorebar-goals > strong {
    color: #fff;

    font-size:
        clamp(
            .86rem,
            1.45vw,
            1rem
        );

    font-weight: 850;

    line-height: 1;
}


.mq-scorebar-goals > [data-goals] {
    display: none !important;
}


.mq-scorebar-goals
.mq-goal-icons {
    min-height: 0;

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-end;

    gap:
        clamp(
            2px,
            .35vw,
            5px
        );

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.24rem
        );

    line-height: 1;
}


/*
 * ----------------------------------------------------------
 * Attack choices — text perfect centrat
 * ----------------------------------------------------------
 */

.mq-arena.is-attack-choice
.mq-option.mq-attack-option {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left:
        58px;

    padding-right:
        58px;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.mq-arena.is-attack-choice
.mq-option.mq-attack-option
.mq-option-index {
    position: absolute;

    left: 16px;

    top: 50%;

    transform:
        translateY(-50%);
}


.mq-arena.is-attack-choice
.mq-attack-copy {
    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    text-align: center;
}


.mq-arena.is-attack-choice
.mq-attack-action,
.mq-arena.is-attack-choice
.mq-attack-meta {
    width: 100%;

    text-align: center;
}


/*
 * Hover doar pe dispozitive care au hover real.
 */
@media (hover: hover) and (pointer: fine) {

    .mq-arena.is-attack-choice
    .mq-option.mq-attack-option:hover:not(:disabled) {
        transform:
            translateY(-2px);

        border-color:
            rgba(
                198,
                43,
                47,
                .72
            );

        background:
            #fffaf6;

        box-shadow:
            0 12px 28px
            rgba(
                41,
                29,
                23,
                .16
            );
    }

}


.mq-arena.is-attack-choice
.mq-option.mq-attack-option:focus-visible {
    outline:
        3px solid
        rgba(
            198,
            43,
            47,
            .24
        );

    outline-offset:
        2px;

    border-color:
        rgba(
            198,
            43,
            47,
            .72
        );
}


/*
 * ----------------------------------------------------------
 * Responsive scorebar + attack
 * ----------------------------------------------------------
 */

@media (max-width: 760px) {

    .mq-scorebar {
        gap:
            8px;

        padding-left:
            13px;

        padding-right:
            13px;
    }


    .mq-scorebar-title,
    .mq-scorebar-copy > span {
        font-size:
            clamp(
                .62rem,
                2.7vw,
                .74rem
            );

        letter-spacing:
            .025em;
    }


    .mq-scorebar-goals {
        gap:
            4px;
    }


    .mq-scorebar-goals > strong {
        font-size:
            clamp(
                .68rem,
                2.65vw,
                .78rem
            );
    }


    .mq-scorebar-goals
    .mq-goal-icons {
        gap:
            2px;

        font-size:
            clamp(
                .82rem,
                3.4vw,
                1rem
            );
    }


    .mq-arena.is-attack-choice
    .mq-option.mq-attack-option {
        padding-left:
            50px;

        padding-right:
            50px;
    }


    .mq-arena.is-attack-choice
    .mq-option.mq-attack-option
    .mq-option-index {
        left:
            13px;
    }

}


/*
 * Telefoane foarte înguste:
 * păstrăm label-ul complet "Goluri marcate:"
 * și dăm prioritate score-ului.
 */
@media (max-width: 390px) {

    .mq-scorebar {
        gap:
            6px;

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .mq-scorebar-goals > strong {
        font-size:
            .66rem;
    }


    .mq-scorebar-goals
    .mq-goal-icons {
        font-size:
            .82rem;
    }


    .mq-scorebar-title,
    .mq-scorebar-copy > span {
        font-size:
            .62rem;
    }

}

/* MF-MQ-SCOREBAR-17-4B:END */

/*
 * ==========================================================
 * MF-MQ-QUESTION-UI-17-5:START
 *
 * PASUL 17.5 — QUESTION UI
 *
 * - teren în fundal;
 * - pas centrat;
 * - action/difficulty ascuns;
 * - timer păstrat în dreapta;
 * - întrebare centrată;
 * - răspunsuri mai înguste și elastice;
 * - răspunsurile lungi fac wrap, fără truncare;
 * - mobil = pitch portrait.
 * ==========================================================
 */


/*
 * ----------------------------------------------------------
 * ARENA
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui {
    position: relative;
    isolation: isolate;

    background:
        #1d5136;
}


.mq-arena.is-question-ui::before {
    content: "";

    position: absolute;
    inset: -2%;

    z-index: -2;

    pointer-events: none;

    background-image:
        url(
            "/jocuri/meci-quiz/assets/football-pitch-bg.svg?v=20260917-pitch-v1"
        );

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        100% 100%;

    filter:
        blur(1.8px)
        saturate(.90);

    transform:
        scale(1.02);

    opacity:
        .94;
}


.mq-arena.is-question-ui::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.035) 34%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            rgba(17,45,31,.20),
            rgba(10,32,22,.40)
        );
}


/*
 * ----------------------------------------------------------
 * HEAD — PASUL + TIMER
 *
 * Pasul este matematic centrat în arenă.
 * Timerul este absolut în dreapta și nu îl împinge.
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-stage-head {
    position: relative;

    flex:
        0 0 auto;

    width:
        min(
            860px,
            100%
        );

    min-height:
        clamp(
            54px,
            8dvh,
            68px
        );

    margin:
        0 auto
        clamp(
            12px,
            2dvh,
            20px
        );

    display:
        grid;

    place-items:
        center;
}


.mq-arena.is-question-ui
.mq-stage-head > div:first-child {
    position:
        absolute;

    inset:
        0;

    box-sizing:
        border-box;

    display:
        grid;

    place-items:
        center;

    padding:
        0
        76px;

    text-align:
        center;

    pointer-events:
        none;
}


.mq-arena.is-question-ui
.mq-stage-kicker {
    display:
        block;

    margin:
        0;

    text-align:
        center;

    color:
        #ff6668;

    font-size:
        clamp(
            .72rem,
            1.35vw,
            .84rem
        );

    font-weight:
        950;

    line-height:
        1.25;

    letter-spacing:
        .12em;
}


/*
 * Nu mai afișăm:
 *
 * "Schimbare de joc (dificultate redusă)"
 * etc.
 *
 * Datele pot rămâne în payload.
 */
.mq-arena.is-question-ui
.mq-action-label {
    display:
        none !important;
}


/*
 * Timerul nu participă la centrarea pasului.
 */
.mq-arena.is-question-ui
.mq-question-timer {
    position:
        absolute;

    top:
        50%;

    right:
        0;

    transform:
        translateY(-50%);

    margin:
        0;
}


/*
 * Narativul este deja ascuns din JS în question.
 * Siguranță vizuală suplimentară.
 */
.mq-arena.is-question-ui
.mq-narrative {
    display:
        none !important;
}


/*
 * ----------------------------------------------------------
 * ÎNTREBAREA
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-question {
    flex:
        0 0 auto;

    box-sizing:
        border-box;

    width:
        min(
            860px,
            92%
        );

    margin:
        0 auto
        clamp(
            20px,
            3.1dvh,
            30px
        );

    padding:
        clamp(
            17px,
            2.8dvh,
            25px
        )
        clamp(
            20px,
            4vw,
            42px
        );

    text-align:
        center;

    background:
        rgba(
            255,
            250,
            242,
            .94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .65
        );

    border-radius:
        22px;

    box-shadow:
        0 18px 48px
        rgba(
            8,
            27,
            18,
            .23
        );

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.mq-arena.is-question-ui
.mq-question h2 {
    max-width:
        780px;

    margin:
        0 auto;

    text-align:
        center;

    color:
        var(--mq-ink);

    font-size:
        clamp(
            1.18rem,
            2.45vw,
            1.62rem
        );

    font-weight:
        900;

    line-height:
        1.35;

    letter-spacing:
        -.015em;

    overflow-wrap:
        anywhere;
}


/*
 * ----------------------------------------------------------
 * GRUPUL CELOR 4 RĂSPUNSURI
 *
 * Desktop:
 * mai îngust decât arena, max 760px.
 *
 * Nicio truncare.
 * Textele lungi merg pe 2+ rânduri.
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-options {
    flex:
        0 1 auto;

    width:
        min(
            760px,
            84%
        );

    min-height:
        0;

    margin:
        0 auto;

    display:
        grid;

    gap:
        clamp(
            8px,
            1.35dvh,
            11px
        );
}


/*
 * ----------------------------------------------------------
 * CARD RĂSPUNS
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-option[data-mq-action="answer"] {
    position:
        relative;

    width:
        100%;

    min-height:
        clamp(
            48px,
            7dvh,
            58px
        );

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        clamp(
            10px,
            1.5dvh,
            14px
        )
        58px;

    text-align:
        center;

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .64
        );

    border-radius:
        17px;

    box-shadow:
        0 10px 28px
        rgba(
            8,
            27,
            18,
            .14
        );

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


/*
 * Litera A / B / C / D rămâne în stânga,
 * fără să împingă textul din centru.
 */
.mq-arena.is-question-ui
.mq-option[data-mq-action="answer"]
.mq-option-index {
    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    flex:
        0 0 auto;
}


/*
 * Span-ul cu răspunsul.
 *
 * overflow-wrap:anywhere garantează că și un text
 * neobișnuit de lung rămâne în card.
 */
.mq-arena.is-question-ui
.mq-option[data-mq-action="answer"]
> span:not(.mq-option-index) {
    display:
        block;

    width:
        100%;

    min-width:
        0;

    text-align:
        center;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

    color:
        var(--mq-charcoal);

    font-size:
        clamp(
            .93rem,
            1.8vw,
            1.04rem
        );

    font-weight:
        850;

    line-height:
        1.30;
}


/*
 * Hover desktop.
 */
@media (hover: hover) and (pointer: fine) {

    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"]:hover:not(:disabled) {
        transform:
            translateY(-2px);

        background:
            #fffaf6;

        border-color:
            rgba(
                198,
                43,
                47,
                .68
            );

        box-shadow:
            0 14px 34px
            rgba(
                8,
                27,
                18,
                .20
            );
    }

}


.mq-arena.is-question-ui
.mq-option[data-mq-action="answer"]:focus-visible {
    outline:
        3px solid
        rgba(
            198,
            43,
            47,
            .25
        );

    outline-offset:
        2px;

    border-color:
        rgba(
            198,
            43,
            47,
            .70
        );
}


/*
 * ==========================================================
 * LAPTOP / VIEWPORT SCUND
 * ==========================================================
 */

@media
    (min-width: 761px)
    and (max-height: 760px) {

    .mq-arena.is-question-ui
    .mq-stage-head {
        min-height:
            48px;

        margin-bottom:
            9px;
    }


    .mq-arena.is-question-ui
    .mq-question {
        margin-bottom:
            10px;

        padding:
            14px
            24px;
    }


    .mq-arena.is-question-ui
    .mq-question h2 {
        font-size:
            clamp(
                1.05rem,
                2vw,
                1.38rem
            );

        line-height:
            1.28;
    }


    .mq-arena.is-question-ui
    .mq-options {
        gap:
            7px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"] {
        min-height:
            44px;

        padding-top:
            8px;

        padding-bottom:
            8px;
    }

}


/*
 * ==========================================================
 * MOBIL
 *
 * Pitch vertical.
 * Răspunsurile folosesc aproape toată lățimea.
 * ==========================================================
 */

@media (max-width: 760px) {

    .mq-arena.is-question-ui::before {
        background-image:
            url(
                "/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg?v=20260917-pitch-mobile-v1"
            );

        background-size:
            100% 100%;

        background-position:
            center;

        background-repeat:
            no-repeat;
    }


    .mq-arena.is-question-ui
    .mq-stage-head {
        width:
            100%;

        min-height:
            52px;

        margin-bottom:
            10px;
    }


    .mq-arena.is-question-ui
    .mq-stage-head > div:first-child {
        padding:
            0
            59px;
    }


    .mq-arena.is-question-ui
    .mq-stage-kicker {
        font-size:
            clamp(
                .66rem,
                3vw,
                .76rem
            );

        letter-spacing:
            .075em;
    }


    .mq-arena.is-question-ui
    .mq-question-timer {
        width:
            50px;

        height:
            50px;
    }


    .mq-arena.is-question-ui
    .mq-question {
        width:
            100%;

        margin-bottom:
            10px;

        padding:
            15px
            16px;

        border-radius:
            18px;
    }


    .mq-arena.is-question-ui
    .mq-question h2 {
        font-size:
            clamp(
                1rem,
                4.6vw,
                1.28rem
            );

        line-height:
            1.28;
    }


    .mq-arena.is-question-ui
    .mq-options {
        width:
            100%;

        gap:
            7px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"] {
        min-height:
            clamp(
                44px,
                6.5dvh,
                54px
            );

        padding:
            9px
            50px;

        border-radius:
            15px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"]
    .mq-option-index {
        left:
            11px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"]
    > span:not(.mq-option-index) {
        font-size:
            clamp(
                .88rem,
                3.8vw,
                .98rem
            );

        line-height:
            1.25;
    }

}


/*
 * ==========================================================
 * MOBIL SCUND
 * ==========================================================
 */

@media
    (max-width: 760px)
    and (max-height: 700px) {

    .mq-arena.is-question-ui
    .mq-stage-head {
        min-height:
            44px;

        margin-bottom:
            6px;
    }


    .mq-arena.is-question-ui
    .mq-question-timer {
        width:
            44px;

        height:
            44px;
    }


    .mq-arena.is-question-ui
    .mq-question {
        margin-bottom:
            7px;

        padding:
            11px
            13px;
    }


    .mq-arena.is-question-ui
    .mq-question h2 {
        font-size:
            clamp(
                .94rem,
                4vw,
                1.12rem
            );
    }


    .mq-arena.is-question-ui
    .mq-options {
        gap:
            5px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"] {
        min-height:
            40px;

        padding:
            7px
            46px;
    }


    .mq-arena.is-question-ui
    .mq-option[data-mq-action="answer"]
    > span:not(.mq-option-index) {
        font-size:
            clamp(
                .82rem,
                3.5vw,
                .92rem
            );
    }

}

/* MF-MQ-QUESTION-UI-17-5:END */


/* MF-MQ-QUESTION-17-5-FINAL-TUNE:START */

/*
 * ==========================================================
 * PASUL 17.5 — TIMER 12s + GAP TUNE
 *
 * - badge pas negru cu text alb
 * - timer alb cu text roșu
 * - timer puțin mai mare
 * - cifre bold
 * - pulse la ultimele 5 secunde
 * - gap mai mare între întrebare și variante
 * ==========================================================
 */


/*
 * ----------------------------------------------------------
 * STEP BADGE
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-stage-kicker {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    padding: 0;
    margin: 0;

    background: rgba(27, 22, 21, .98);
    color: #ffffff;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

    box-shadow:
        0 10px 28px rgba(8,27,18,.22);

    font-size: .95rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
}


/*
 * ----------------------------------------------------------
 * TIMER
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-stage-head {
    min-height: 82px;
    margin-bottom: 8px;
}

.mq-arena.is-question-ui
.mq-question-timer {
    width: 82px;
    height: 82px;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;

    transform: none;
    transform-origin: center;
    margin: 0;

    background: rgba(255,255,255,.98);
    color: var(--mq-red);

    border: 1px solid rgba(255,255,255,.88);
    border-radius: 50%;

    box-shadow:
        0 12px 30px rgba(8,27,18,.20);
}

.mq-arena.is-question-ui
.mq-question-timer strong,
.mq-arena.is-question-ui
.mq-question-timer small {
    color: var(--mq-red);
}

.mq-arena.is-question-ui
.mq-question-timer strong {
    font-size: 1.68rem;
    font-weight: 950;
}

.mq-arena.is-question-ui
.mq-question-timer small {
    margin-top: 4px;
    font-size: .66rem;
    font-weight: 800;
}

.mq-arena.is-question-ui
.mq-question-timer {
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.mq-arena.is-question-ui
.mq-question-timer.is-urgent {
    background: var(--mq-red);
    color: #ffffff;
    border-color: rgba(211, 46, 53, .96);
    animation:
        mq-question-timer-pulse .85s ease-in-out infinite;
}

.mq-arena.is-question-ui
.mq-question-timer.is-urgent strong,
.mq-arena.is-question-ui
.mq-question-timer.is-urgent small {
    color: #ffffff;
}

@keyframes mq-question-timer-pulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 12px 30px rgba(211, 46, 53, .24);
    }

    50% {
        transform: scale(1.09);
        box-shadow:
            0 18px 40px rgba(211, 46, 53, .42);
    }

    100% {
        transform: scale(1);
        box-shadow:
            0 12px 30px rgba(211, 46, 53, .24);
    }
}


/*
 * ----------------------------------------------------------
 * QUESTION → ANSWERS GAP
 * ----------------------------------------------------------
 */

.mq-arena.is-question-ui
.mq-question {
    margin-bottom:
        clamp(
            38px,
            6.2dvh,
            62px
        ) !important;
}


/*
 * ----------------------------------------------------------
 * ATTACK META
 * ----------------------------------------------------------
 */

.mq-arena.is-attack-choice
.mq-attack-meta {
    color: var(--mq-ink) !important;
}


/*
 * ----------------------------------------------------------
 * LAPTOP / VIEWPORT MAI SCUND
 * ----------------------------------------------------------
 */

@media (max-height: 760px) {

    .mq-arena.is-question-ui
    .mq-stage-head {
        min-height: 72px;
    }

    .mq-arena.is-question-ui
    .mq-stage-kicker {
        width: 50px;
        height: 50px;
        font-size: .88rem;
    }

    .mq-arena.is-question-ui
    .mq-question-timer {
        width: 72px;
        height: 72px;
    }

    .mq-arena.is-question-ui
    .mq-question-timer strong {
        font-size: 1.46rem;
        font-weight: 950;
    }

    .mq-arena.is-question-ui
    .mq-question-timer small {
        font-weight: 800;
    }

    .mq-arena.is-question-ui
    .mq-question {
        margin-bottom:
            clamp(
                22px,
                4.4dvh,
                36px
            ) !important;
    }
}


/*
 * ----------------------------------------------------------
 * MOBILE
 * ----------------------------------------------------------
 */

@media (max-width: 760px) {

    .mq-arena.is-question-ui
    .mq-stage-head {
        min-height: 64px;
        margin-bottom: 6px;
    }

    .mq-arena.is-question-ui
    .mq-stage-kicker {
        width: 46px;
        height: 46px;
        font-size: .82rem;
    }

    .mq-arena.is-question-ui
    .mq-question-timer {
        width: 62px;
        height: 62px;
        top: 0;
        right: 0;
    }

    .mq-arena.is-question-ui
    .mq-question-timer strong {
        font-size: 1.28rem;
        font-weight: 950;
    }

    .mq-arena.is-question-ui
    .mq-question-timer small {
        margin-top: 3px;
        font-size: .58rem;
        font-weight: 800;
    }

    .mq-arena.is-question-ui
    .mq-question {
        margin-bottom:
            clamp(
                18px,
                3.4dvh,
                28px
            ) !important;
    }
}


/*
 * ----------------------------------------------------------
 * MOBILE / DISPLAY FOARTE SCUND
 * ----------------------------------------------------------
 */

@media
(max-width: 760px)
and (max-height: 680px) {

    .mq-arena.is-question-ui
    .mq-stage-head {
        min-height: 58px;
    }

    .mq-arena.is-question-ui
    .mq-stage-kicker {
        width: 42px;
        height: 42px;
        font-size: .78rem;
    }

    .mq-arena.is-question-ui
    .mq-question-timer {
        width: 56px;
        height: 56px;
    }

    .mq-arena.is-question-ui
    .mq-question-timer strong {
        font-size: 1.12rem;
        font-weight: 950;
    }

    .mq-arena.is-question-ui
    .mq-question-timer small {
        font-weight: 800;
    }

    .mq-arena.is-question-ui
    .mq-question {
        margin-bottom:
            clamp(
                12px,
                2.6dvh,
                18px
            ) !important;
    }
}

/* MF-MQ-QUESTION-17-5-FINAL-TUNE:END */

/* MF-MQ-FEEDBACK-UI-17-6:START */

/*
 * ==========================================================
 * PASUL 17.6 — FEEDBACK DUPĂ RĂSPUNS
 *
 * answer_reveal:
 * - greșit / timeout;
 * - afișează răspunsul corect.
 *
 * feedback:
 * - consecința narativă a răspunsului;
 * - corect / greșit / timeout.
 *
 * Aceeași geometrie Daily + H2H.
 * ==========================================================
 */


/*
 * ----------------------------------------------------------
 * ARENA + TEREN
 * ----------------------------------------------------------
 */

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
) {
    position: relative;
    isolation: isolate;

    background:
        #1d5136;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)::before {
    content: "";

    position: absolute;
    inset: -2%;

    z-index: -2;

    pointer-events: none;

    background-image:
        url(
            "/jocuri/meci-quiz/assets/football-pitch-bg.svg?v=20260917-pitch-v1"
        );

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        100% 100%;

    filter:
        blur(1.8px)
        saturate(.90);

    transform:
        scale(1.02);

    opacity:
        .94;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.035) 34%,
            transparent 61%
        ),
        linear-gradient(
            180deg,
            rgba(17,45,31,.20),
            rgba(10,32,22,.40)
        );
}


/*
 * ----------------------------------------------------------
 * HEAD
 * ----------------------------------------------------------
 */

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-stage-head {
    flex:
        0 0 auto;

    width:
        min(
            860px,
            100%
        );

    min-height:
        clamp(
            44px,
            6.5dvh,
            58px
        );

    margin:
        0 auto
        clamp(
            10px,
            1.8dvh,
            17px
        );

    display:
        grid;

    place-items:
        center;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-stage-head > div:first-child {
    text-align:
        center;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-stage-kicker {
    color:
        #ff6668;

    font-size:
        clamp(
            .72rem,
            1.35vw,
            .84rem
        );

    font-weight:
        950;

    line-height:
        1.25;

    letter-spacing:
        .12em;

    text-align:
        center;
}


/*
 * În feedback nu avem nevoie de action/difficulty sau timer.
 */

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-action-label,

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-question-timer,

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-question,

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-options {
    display:
        none !important;
}


/*
 * ----------------------------------------------------------
 * CARDUL CENTRAL
 * ----------------------------------------------------------
 */

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-narrative {
    flex:
        0 0 auto;

    box-sizing:
        border-box;

    width:
        min(
            780px,
            88%
        );

    min-height:
        clamp(
            112px,
            18dvh,
            165px
        );

    margin:
        0 auto;

    padding:
        clamp(
            20px,
            3.4dvh,
            30px
        )
        clamp(
            22px,
            4vw,
            44px
        );

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    background:
        rgba(
            255,
            250,
            242,
            .95
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .68
        ) !important;

    border-radius:
        22px;

    box-shadow:
        0 18px 48px
        rgba(
            8,
            27,
            18,
            .23
        );

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-narrative [data-text] {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        var(--mq-ink);

    font-size:
        clamp(
            1.08rem,
            2.2vw,
            1.48rem
        );

    font-weight:
        850;

    line-height:
        1.42;

    letter-spacing:
        -.012em;

    text-align:
        center;

    overflow-wrap:
        anywhere;
}


/*
 * answer_reveal este explicit despre răspunsul corect.
 */

.mq-arena.is-answer-reveal-ui
.mq-narrative {
    border-color:
        rgba(
            198,
            43,
            47,
            .24
        ) !important;
}


/*
 * ----------------------------------------------------------
 * STATUS — CORECT / GREȘIT / TIMEOUT
 * ----------------------------------------------------------
 */

.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-feedback-status {
    flex:
        0 0 auto;

    width:
        fit-content;

    max-width:
        min(
            520px,
            88%
        );

    margin:
        clamp(
            11px,
            1.8dvh,
            17px
        )
        auto 0;

    padding:
        9px 17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .22
        );

    border-radius:
        999px;

    box-shadow:
        0 10px 24px
        rgba(
            8,
            27,
            18,
            .18
        );

    font-size:
        clamp(
            .76rem,
            1.4vw,
            .9rem
        );

    font-weight:
        950;

    line-height:
        1.2;

    letter-spacing:
        .075em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-feedback-status.is-correct {
    background:
        #2f714c;

    color:
        #ffffff;
}


.mq-arena:is(
    .is-answer-reveal-ui,
    .is-feedback-ui
)
.mq-feedback-status.is-wrong {
    background:
        var(--mq-red);

    color:
        #ffffff;
}


/*
 * ----------------------------------------------------------
 * LAPTOP / VIEWPORT SCUND
 * ----------------------------------------------------------
 */

@media
    (min-width: 761px)
    and (max-height: 760px) {

    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-stage-head {
        min-height:
            40px;

        margin-bottom:
            8px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-narrative {
        min-height:
            92px;

        padding:
            16px
            24px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-feedback-status {
        margin-top:
            8px;

        padding:
            7px 14px;
    }

}


/*
 * ----------------------------------------------------------
 * MOBIL — pitch portrait
 * ----------------------------------------------------------
 */

@media (max-width: 760px) {

    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )::before {
        background-image:
            url(
                "/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg?v=20260917-pitch-mobile-v1"
            );
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-stage-head {
        width:
            100%;

        min-height:
            44px;

        margin-bottom:
            9px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-stage-kicker {
        font-size:
            clamp(
                .66rem,
                3vw,
                .76rem
            );

        letter-spacing:
            .075em;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-narrative {
        width:
            100%;

        min-height:
            clamp(
                105px,
                18dvh,
                145px
            );

        padding:
            18px
            17px;

        border-radius:
            18px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-narrative [data-text] {
        font-size:
            clamp(
                1rem,
                4.5vw,
                1.24rem
            );

        line-height:
            1.38;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-feedback-status {
        max-width:
            94%;

        margin-top:
            10px;

        padding:
            8px
            14px;

        font-size:
            clamp(
                .7rem,
                3vw,
                .82rem
            );
    }

}


/*
 * Telefoane / viewport foarte scund.
 */

@media
    (max-width: 760px)
    and (max-height: 700px) {

    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-stage-head {
        min-height:
            38px;

        margin-bottom:
            6px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-narrative {
        min-height:
            88px;

        padding:
            13px
            14px;
    }


    .mq-arena:is(
        .is-answer-reveal-ui,
        .is-feedback-ui
    )
    .mq-feedback-status {
        margin-top:
            7px;

        padding:
            6px
            12px;
    }

}

/* MF-MQ-FEEDBACK-UI-17-6:END */

/* MF-MQ-FEEDBACK-CORRECT-REFINE-17-6-1:START */

/*
 * ==========================================================
 * PASUL 17.6.1 — CORECT FEEDBACK REFINEMENT
 *
 * Doar pentru feedback_status = correct:
 * - ascunde „FAZA CONTINUĂ”
 * - păstrează doar badge-ul „RĂSPUNS CORECT”
 * - badge mai mare cu border alb
 * - card narativ identic ca geometrie/stil cu fazele neutre
 * ==========================================================
 */


/*
 * Detectăm doar feedback-ul corect.
 * Funcționează bine în Chrome / Edge / Safari moderne.
 */

.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden])) {
    justify-content: center;
    gap: 0;
}


/*
 * Scoatem complet head-ul de sus în feedback corect.
 */

.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
.mq-stage-head {
    display: none !important;
}


/*
 * Badge-ul „RĂSPUNS CORECT” urcă sus și devine elementul principal.
 */

.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
.mq-feedback-status.is-correct {
    order: 1;

    width: fit-content;
    max-width: min(460px, 88%);

    margin:
        0 auto
        clamp(14px, 2.2dvh, 22px);

    padding:
        11px 24px;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #2f714c;
    color: #ffffff;

    border: 2px solid rgba(255,255,255,.90);
    border-radius: 999px;

    box-shadow:
        0 12px 28px rgba(8,27,18,.20);

    font-size: clamp(.92rem, 1.55vw, 1.05rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-align: center;
}


/*
 * Cardul narativ revine la stilul din fazele neutre:
 * mare, centrat, curat, premium.
 */

.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
.mq-narrative {
    order: 2;

    width: min(900px, 88%);
    min-height: clamp(120px, 18dvh, 168px);

    margin: 0 auto;
    padding:
        clamp(24px, 3.7dvh, 32px)
        clamp(26px, 4.2vw, 44px);

    display: grid;
    place-items: center;

    text-align: center;

    background: rgba(255,250,242,.96);

    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 22px;

    box-shadow:
        0 18px 48px rgba(8,27,18,.23);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
.mq-narrative [data-text] {
    max-width: 760px;
    margin: 0 auto;

    color: var(--mq-ink);

    font-size: clamp(1.12rem, 2.25vw, 1.5rem);
    font-weight: 850;
    line-height: 1.42;
    letter-spacing: -.012em;
    text-align: center;
    overflow-wrap: anywhere;
}


/*
 * Pe feedback corect nu vrem extra spațiu sub badge.
 */

.mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
.mq-feedback-status.is-correct + * {
    margin-top: 0;
}


/*
 * TABLET / LAPTOP MAI SCUND
 */

@media (min-width: 761px) and (max-height: 760px) {

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-feedback-status.is-correct {
        margin-bottom: 12px;
        padding: 10px 20px;
        min-height: 42px;
    }

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-narrative {
        min-height: 102px;
        padding: 18px 26px;
    }
}


/*
 * MOBILE
 */

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-feedback-status.is-correct {
        max-width: 94%;
        margin-bottom: 12px;
        padding: 10px 16px;
        min-height: 40px;

        font-size: clamp(.8rem, 3.1vw, .92rem);
        letter-spacing: .07em;
    }

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-narrative {
        width: 100%;
        min-height: clamp(108px, 18dvh, 148px);
        padding: 18px 16px;
        border-radius: 18px;
    }

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-narrative [data-text] {
        font-size: clamp(1rem, 4.5vw, 1.24rem);
        line-height: 1.38;
    }
}


/*
 * MOBILE FOARTE SCUND
 */

@media (max-width: 760px) and (max-height: 700px) {

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-feedback-status.is-correct {
        margin-bottom: 8px;
        min-height: 36px;
        padding: 8px 14px;
    }

    .mq-arena.is-feedback-ui:has(.mq-feedback-status.is-correct:not([hidden]))
    .mq-narrative {
        min-height: 90px;
        padding: 14px 14px;
    }
}

/* MF-MQ-FEEDBACK-CORRECT-REFINE-17-6-1:END */

/* MF-MQ-ANSWER-REVEAL-REFINE-17-6-2:START */

/*
 * ==========================================================
 * PASUL 17.6.2 — ANSWER REVEAL REFINEMENT
 *
 * Pentru răspuns greșit / timeout:
 * - ascunde head-ul „RĂSPUNS”
 * - badge mare roșu cu border alb
 * - dedesubt cardul clasic crem cu răspunsul corect
 * ==========================================================
 */

.mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden])) {
    justify-content: center;
    gap: 0;
}

.mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
.mq-stage-head {
    display: none !important;
}

.mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
.mq-feedback-status.is-wrong {
    order: 1;

    width: fit-content;
    max-width: min(460px, 88%);

    margin:
        0 auto
        clamp(14px, 2.2dvh, 22px);

    padding:
        11px 24px;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--mq-red);
    color: #ffffff;

    border: 2px solid rgba(255,255,255,.90);
    border-radius: 999px;

    box-shadow:
        0 12px 28px rgba(8,27,18,.20);

    font-size: clamp(.92rem, 1.55vw, 1.05rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-align: center;
}

.mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
.mq-narrative {
    order: 2;

    width: min(900px, 88%);
    min-height: clamp(120px, 18dvh, 168px);

    margin: 0 auto;
    padding:
        clamp(24px, 3.7dvh, 32px)
        clamp(26px, 4.2vw, 44px);

    display: grid;
    place-items: center;

    text-align: center;

    background: rgba(255,250,242,.96);

    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 22px;

    box-shadow:
        0 18px 48px rgba(8,27,18,.23);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
.mq-narrative [data-text] {
    max-width: 760px;
    margin: 0 auto;

    color: var(--mq-ink);

    font-size: clamp(1.12rem, 2.25vw, 1.5rem);
    font-weight: 850;
    line-height: 1.42;
    letter-spacing: -.012em;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (min-width: 761px) and (max-height: 760px) {

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-feedback-status.is-wrong {
        margin-bottom: 12px;
        padding: 10px 20px;
        min-height: 42px;
    }

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-narrative {
        min-height: 102px;
        padding: 18px 26px;
    }
}

@media (max-width: 760px) {

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-feedback-status.is-wrong {
        max-width: 94%;
        margin-bottom: 12px;
        padding: 10px 16px;
        min-height: 40px;

        font-size: clamp(.8rem, 3.1vw, .92rem);
        letter-spacing: .07em;
    }

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-narrative {
        width: 100%;
        min-height: clamp(108px, 18dvh, 148px);
        padding: 18px 16px;
        border-radius: 18px;
    }

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-narrative [data-text] {
        font-size: clamp(1rem, 4.5vw, 1.24rem);
        line-height: 1.38;
    }
}

@media (max-width: 760px) and (max-height: 700px) {

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-feedback-status.is-wrong {
        margin-bottom: 8px;
        min-height: 36px;
        padding: 8px 14px;
    }

    .mq-arena.is-answer-reveal-ui:has(.mq-feedback-status.is-wrong:not([hidden]))
    .mq-narrative {
        min-height: 90px;
        padding: 14px 14px;
    }
}

/* MF-MQ-ANSWER-REVEAL-REFINE-17-6-2:END */

/* MF-MQ-WRONG-UNIFIED-17-6-4:START */

/*
 * ==========================================================
 * PASUL 17.6.4
 * GREȘIT / TIMEOUT — UN SINGUR ECRAN
 *
 * 1. RĂSPUNS GREȘIT / TIMP EXPIRAT
 * 2. consecința narativă
 * 3. răspunsul corect
 *
 * Feedback-ul corect rămâne neatins.
 * ==========================================================
 */


/*
 * Centrare generală.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
) {
    justify-content:
        center;

    gap:
        0;
}


/*
 * Fără FAZA CONTINUĂ.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-stage-head {
    display:
        none !important;
}


/*
 * ----------------------------------------------------------
 * 1. BADGE GREȘIT / TIMEOUT
 * ----------------------------------------------------------
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-status.is-wrong {
    order:
        1;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    max-width:
        min(
            460px,
            90%
        );

    min-height:
        46px;

    margin:
        0 auto
        clamp(
            13px,
            2dvh,
            19px
        );

    padding:
        11px
        24px;

    background:
        var(--mq-red);

    color:
        #ffffff;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            .92
        );

    border-radius:
        999px;

    box-shadow:
        0 12px 28px
        rgba(
            8,
            27,
            18,
            .20
        );

    font-size:
        clamp(
            .92rem,
            1.55vw,
            1.05rem
        );

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        .085em;

    text-align:
        center;

    text-transform:
        uppercase;
}


/*
 * ----------------------------------------------------------
 * 2. CONSECINȚA
 *
 * Cardul principal, identic ca limbaj vizual cu
 * feedback-ul corect / fazele narative.
 * ----------------------------------------------------------
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-narrative {
    order:
        2;

    width:
        min(
            900px,
            88%
        );

    min-height:
        clamp(
            100px,
            15dvh,
            135px
        );

    margin:
        0 auto;

    padding:
        clamp(
            20px,
            3dvh,
            28px
        )
        clamp(
            24px,
            4vw,
            42px
        );

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    background:
        rgba(
            255,
            250,
            242,
            .96
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .72
        ) !important;

    border-radius:
        22px;

    box-shadow:
        0 18px 48px
        rgba(
            8,
            27,
            18,
            .23
        );

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-narrative [data-text] {
    max-width:
        760px;

    margin:
        0 auto;

    color:
        var(--mq-ink);

    font-size:
        clamp(
            1.08rem,
            2.15vw,
            1.45rem
        );

    font-weight:
        850;

    line-height:
        1.4;

    letter-spacing:
        -.012em;

    text-align:
        center;

    overflow-wrap:
        anywhere;
}


/*
 * ----------------------------------------------------------
 * 3. RĂSPUNSUL CORECT
 *
 * Refolosim questionWrap ca al doilea card.
 * ----------------------------------------------------------
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-question {
    order:
        3;

    display:
        grid !important;

    place-items:
        center;

    box-sizing:
        border-box;

    width:
        min(
            900px,
            88%
        );

    min-height:
        clamp(
            68px,
            10dvh,
            88px
        );

    margin:
        clamp(
            12px,
            2dvh,
            18px
        )
        auto 0 !important;

    padding:
        16px
        clamp(
            22px,
            4vw,
            40px
        );

    background:
        rgba(
            255,
            250,
            242,
            .96
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .72
        );

    border-radius:
        20px;

    box-shadow:
        0 14px 36px
        rgba(
            8,
            27,
            18,
            .19
        );

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-question h2 {
    max-width:
        780px;

    margin:
        0 auto;

    color:
        var(--mq-ink);

    font-size:
        clamp(
            1rem,
            1.95vw,
            1.28rem
        );

    font-weight:
        900;

    line-height:
        1.35;

    letter-spacing:
        -.012em;

    text-align:
        center;

    overflow-wrap:
        anywhere;
}


/*
 * Răspunsurile A/B/C/D rămân ascunse.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-options {
    display:
        none !important;
}


/*
 * ----------------------------------------------------------
 * LAPTOP / TABLETĂ CU ÎNĂLȚIME MICĂ
 * ----------------------------------------------------------
 */

@media
(min-width: 761px)
and (max-height: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        min-height:
            40px;

        margin-bottom:
            10px;

        padding:
            9px
            19px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-narrative {
        min-height:
            86px;

        padding:
            15px
            24px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-question {
        min-height:
            58px;

        margin-top:
            9px !important;

        padding:
            12px
            22px;
    }

}


/*
 * ----------------------------------------------------------
 * MOBILE
 * ----------------------------------------------------------
 */

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        max-width:
            94%;

        min-height:
            40px;

        margin-bottom:
            10px;

        padding:
            9px
            16px;

        font-size:
            clamp(
                .8rem,
                3.1vw,
                .92rem
            );

        letter-spacing:
            .07em;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-narrative {
        width:
            100%;

        min-height:
            clamp(
                88px,
                15dvh,
                118px
            );

        padding:
            16px;

        border-radius:
            18px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-narrative [data-text] {
        font-size:
            clamp(
                .96rem,
                4.2vw,
                1.18rem
            );

        line-height:
            1.36;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-question {
        width:
            100%;

        min-height:
            58px;

        margin-top:
            10px !important;

        padding:
            12px
            15px;

        border-radius:
            17px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-question h2 {
        font-size:
            clamp(
                .92rem,
                4vw,
                1.08rem
            );

        line-height:
            1.32;
    }

}


/*
 * MOBILE FOARTE SCUND
 */

@media
(max-width: 760px)
and (max-height: 680px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        min-height:
            35px;

        margin-bottom:
            7px;

        padding:
            7px
            13px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-narrative {
        min-height:
            72px;

        padding:
            12px
            13px;
    }


    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-question {
        min-height:
            50px;

        margin-top:
            7px !important;

        padding:
            9px
            12px;
    }

}

/* MF-MQ-WRONG-UNIFIED-17-6-4:END */

/* MF-MQ-WRONG-COMBINED-LABEL-17-6-5:START */

/*
 * Greșit / timeout:
 *
 * badge-ul de sus conține acum și răspunsul corect.
 * Cardul separat de jos dispare complet.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-status.is-wrong {
    width:
        fit-content;

    max-width:
        min(
            760px,
            88%
        );

    min-height:
        48px;

    padding:
        11px
        26px;

    line-height:
        1.25;

    text-transform:
        none;

    white-space:
        normal;

    overflow-wrap:
        anywhere;
}


/*
 * Nu mai există card separat pentru răspunsul corect.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-question {
    display:
        none !important;
}


/*
 * Mobil.
 */

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        max-width:
            94%;

        min-height:
            42px;

        padding:
            9px
            16px;

        line-height:
            1.3;
    }

}

/* MF-MQ-WRONG-COMBINED-LABEL-17-6-5:END */

/* MF-MQ-ANSWER-EMPHASIS-17-6-6:START */

/*
 * Badge greșit / timeout:
 *
 * răspunsul corect era:  LAURENȚIU REGHECAMPF
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-status.is-wrong {
    gap:
        8px;

    flex-wrap:
        wrap;

    text-transform:
        none;
}


/*
 * Eticheta explicativă.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-prefix {
    font-size:
        1em;

    font-weight:
        850;

    line-height:
        1.2;

    letter-spacing:
        .015em;

    text-transform:
        none;
}


/*
 * Răspunsul propriu-zis.
 */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-answer {
    font-size:
        1.12em;

    font-weight:
        950;

    line-height:
        1.2;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


/* Mobil */

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        gap:
            6px;
    }

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-prefix {
        font-size:
            .92em;
    }

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-answer {
        font-size:
            1.08em;
    }

}

/* MF-MQ-ANSWER-EMPHASIS-17-6-6:END */

/* MF-MQ-FEEDBACK-NARRATIVE-FIRST-17-6-7:START */

/*
 * PASUL 17.6.7
 *
 * În feedback citim întâi consecința fotbalistică,
 * apoi verdictul quizului.
 *
 * CORECT:
 *   consecință -> RĂSPUNS CORECT
 *
 * GREȘIT / TIMEOUT:
 *   consecință -> Răspunsul corect era: X
 */


/* ==========================================================
 * CORECT
 * ========================================================== */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-correct:not([hidden])
)
.mq-narrative {
    order: 1;
    margin: 0 auto !important;
}

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-correct:not([hidden])
)
.mq-feedback-status.is-correct {
    order: 2;

    margin:
        clamp(14px, 2.2dvh, 22px)
        auto
        0 !important;
}


/* ==========================================================
 * GREȘIT / TIMEOUT
 * ========================================================== */

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-narrative {
    order: 1;
    margin: 0 auto !important;
}

.mq-arena.is-feedback-ui:has(
    .mq-feedback-status.is-wrong:not([hidden])
)
.mq-feedback-status.is-wrong {
    order: 2;

    margin:
        clamp(13px, 2dvh, 19px)
        auto
        0 !important;
}


/* ==========================================================
 * LAPTOP / VIEWPORT SCUND
 * ========================================================== */

@media
(min-width: 761px)
and (max-height: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-correct:not([hidden])
    )
    .mq-feedback-status.is-correct,

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        margin:
            10px
            auto
            0 !important;
    }

}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-correct:not([hidden])
    )
    .mq-feedback-status.is-correct,

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        margin:
            10px
            auto
            0 !important;
    }

}


/* ==========================================================
 * MOBILE FOARTE SCUND
 * ========================================================== */

@media
(max-width: 760px)
and (max-height: 700px) {

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-correct:not([hidden])
    )
    .mq-feedback-status.is-correct,

    .mq-arena.is-feedback-ui:has(
        .mq-feedback-status.is-wrong:not([hidden])
    )
    .mq-feedback-status.is-wrong {
        margin:
            7px
            auto
            0 !important;
    }

}

/* MF-MQ-FEEDBACK-NARRATIVE-FIRST-17-6-7:END */

/* MF-MQ-NETWORK-WAIT-17-6-API:START */

/*
 * Requesturile lente nu mai înlocuiesc jocul.
 * Arena rămâne în spate, ușor estompată,
 * iar userul vede numai spinnerul.
 */

.match-quiz-app {
    position:
        relative;
}


.mq-network-wait[hidden] {
    display:
        none !important;
}


.mq-network-wait {
    position:
        absolute;

    inset:
        0;

    z-index:
        120;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    box-sizing:
        border-box;

    background:
        rgba(
            246,
            240,
            229,
            .24
        );

    -webkit-backdrop-filter:
        blur(1.6px);

    backdrop-filter:
        blur(1.6px);

    cursor:
        progress;

    pointer-events:
        all;
}


.mq-network-wait
.mq-spinner {
    width:
        52px;

    height:
        52px;

    box-sizing:
        border-box;

    flex:
        0 0 auto;

    margin:
        0;

    background:
        rgba(
            255,
            250,
            242,
            .94
        );

    border:
        5px solid
        rgba(
            211,
            46,
            53,
            .20
        );

    border-top-color:
        var(--mq-red);

    border-right-color:
        var(--mq-red);

    border-radius:
        50%;

    box-shadow:
        0 12px 32px
        rgba(
            8,
            27,
            18,
            .20
        );

    animation:
        mq-network-spin
        .75s
        linear
        infinite;
}


.mq-network-wait-note {
    display:
        none;

    max-width:
        min(
            320px,
            82%
        );

    padding:
        7px
        13px;

    background:
        rgba(
            255,
            250,
            242,
            .94
        );

    color:
        var(--mq-ink);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .80
        );

    border-radius:
        999px;

    box-shadow:
        0 8px 22px
        rgba(
            8,
            27,
            18,
            .14
        );

    font-size:
        .82rem;

    font-weight:
        850;

    line-height:
        1.2;

    text-align:
        center;
}


.mq-network-wait.is-slow
.mq-network-wait-note {
    display:
        block;
}


@keyframes mq-network-spin {

    to {
        transform:
            rotate(360deg);
    }

}


@media (max-width: 760px) {

    .mq-network-wait
    .mq-spinner {
        width:
            46px;

        height:
            46px;

        border-width:
            4px;
    }

    .mq-network-wait-note {
        font-size:
            .78rem;
    }

}


@media (prefers-reduced-motion: reduce) {

    .mq-network-wait
    .mq-spinner {
        animation-duration:
            1.4s;
    }

}

/* MF-MQ-NETWORK-WAIT-17-6-API:END */


/* MF-MQ-GOAL-SVG-17-8B:START */

/*
 * PASUL 17.8B — GOL
 *
 * Ordine vizuală:
 *
 *   SVG poartă + minge
 *   consecința fotbalistică
 *   RĂSPUNS CORECT
 *
 * Animația nu creează o fază nouă în motor.
 * Rulează în interiorul feedback-ului existent de 4s.
 */

.mq-goal-visual[hidden] {
    display:
        none !important;
}


.mq-goal-visual {
    order:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(
            250px,
            34vw,
            390px
        );

    max-width:
        82%;

    margin:
        0
        auto
        clamp(
            7px,
            1.5dvh,
            15px
        );

    flex:
        0 0 auto;

    pointer-events:
        none;
}


.mq-goal-svg {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        clamp(
            118px,
            22dvh,
            180px
        );

    overflow:
        visible;

    filter:
        drop-shadow(
            0
            10px
            18px
            rgba(
                8,
                27,
                18,
                .18
            )
        );
}


.mq-goal-net-fill {
    fill:
        rgba(
            246,
            240,
            229,
            .10
        );

    stroke:
        none;
}


.mq-goal-net-lines {
    fill:
        none;

    stroke:
        rgba(
            246,
            240,
            229,
            .55
        );

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


.mq-goal-frame {
    fill:
        none;

    stroke:
        #f6f0e5;

    stroke-width:
        7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0
            3px
            3px
            rgba(
                0,
                0,
                0,
                .22
            )
        );
}


.mq-goal-ball {
    transform-box:
        fill-box;

    transform-origin:
        center;

    transform:
        scale(.78)
        rotate(300deg);
}


.mq-goal-ball-shell {
    fill:
        #f6f0e5;

    stroke:
        #1f1b18;

    stroke-width:
        3;

    vector-effect:
        non-scaling-stroke;
}


.mq-goal-ball-panel {
    fill:
        #1f1b18;
}


.mq-goal-ball-accent {
    fill:
        none;

    stroke:
        #c92c33;

    stroke-width:
        2.4;

    stroke-linecap:
        round;

    vector-effect:
        non-scaling-stroke;
}


.mq-goal-net {
    transform-box:
        fill-box;

    transform-origin:
        center;
}


.mq-goal-visual.is-playing
.mq-goal-ball {
    animation:
        mq-goal-ball-flight
        1.1s
        cubic-bezier(
            .2,
            .74,
            .28,
            1
        )
        both;
}


.mq-goal-visual.is-playing
.mq-goal-net {
    animation:
        mq-goal-net-hit
        1.1s
        ease-out
        both;
}


@keyframes mq-goal-ball-flight {

    0% {
        opacity:
            .25;

        transform:
            translate(
                -170px,
                50px
            )
            scale(1.20)
            rotate(-90deg);
    }

    13% {
        opacity:
            1;
    }

    68% {
        transform:
            translate(
                -30px,
                8px
            )
            scale(.88)
            rotate(200deg);
    }

    84% {
        transform:
            translate(
                7px,
                -2px
            )
            scale(.76)
            rotate(264deg);
    }

    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(.78)
            rotate(300deg);
    }

}


@keyframes mq-goal-net-hit {

    0%,
    68% {
        transform:
            scale(1);
    }

    82% {
        transform:
            scale(
                1.035,
                .975
            );
    }

    100% {
        transform:
            scale(1);
    }

}


/*
 * Narativul rămâne sub SVG.
 * Regula existentă 17.6.7 îi dă deja order:1,
 * iar statusul RĂSPUNS CORECT order:2.
 */
.mq-arena.is-feedback-ui.is-goal
.mq-narrative {
    margin:
        0
        auto !important;
}


/* laptop / viewport scund */
@media
(min-width: 761px)
and (max-height: 760px) {

    .mq-goal-visual {
        width:
            clamp(
                220px,
                29vw,
                330px
            );

        margin-bottom:
            7px;
    }

    .mq-goal-svg {
        max-height:
            132px;
    }

}


/* mobil */
@media (max-width: 760px) {

    .mq-goal-visual {
        width:
            min(
                76vw,
                300px
            );

        max-width:
            86%;

        margin-bottom:
            7px;
    }

    .mq-goal-svg {
        max-height:
            132px;
    }

}


/* mobil foarte scund */
@media
(max-width: 760px)
and (max-height: 700px) {

    .mq-goal-visual {
        width:
            min(
                64vw,
                240px
            );

        margin-bottom:
            4px;
    }

    .mq-goal-svg {
        max-height:
            104px;
    }

}


/*
 * Accesibilitate:
 * SVG-ul rămâne în poziția finală fără zbor.
 */
@media (prefers-reduced-motion: reduce) {

    .mq-goal-visual.is-playing
    .mq-goal-ball,
    .mq-goal-visual.is-playing
    .mq-goal-net {
        animation:
            none;
    }

}

/* MF-MQ-GOAL-SVG-17-8B:END */


/* MF-MQ-GOAL-CINEMATIC-17-8C-CSS:START */

.mq-arena.is-feedback-ui.is-goal {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background: #101b16;
}

.mq-arena.is-feedback-ui.is-goal > .mq-stage-head,
.mq-arena.is-feedback-ui.is-goal > .mq-narrative,
.mq-arena.is-feedback-ui.is-goal > .mq-question,
.mq-arena.is-feedback-ui.is-goal > .mq-options,
.mq-arena.is-feedback-ui.is-goal > .mq-feedback-status,
.mq-arena.is-feedback-ui.is-goal > .mq-final {
    display: none !important;
}

.mq-arena.is-feedback-ui.is-goal > .mq-goal-visual {
    position: absolute;
    inset: 0;
    z-index: 40;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    max-width: none;
    height: 100%;

    margin: 0;
    padding:
        0
        clamp(16px, 4vw, 56px)
        clamp(26px, 5dvh, 52px);

    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.01) 0%,
            rgba(0,0,0,.03) 55%,
            rgba(0,0,0,.34) 100%
        ),
        url("/jocuri/meci-quiz/assets/mq-goal-cinematic.webp?v=20260917-step17-8c-v1");

    background-size: cover;
    background-position: 58% center;
    background-repeat: no-repeat;
}

.mq-arena.is-feedback-ui.is-goal
.mq-goal-card {
    width: min(830px, 88%);

    padding:
        clamp(18px, 3dvh, 29px)
        clamp(22px, 5vw, 52px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: clamp(6px, 1dvh, 10px);

    text-align: center;

    background: rgba(255,250,242,.97);

    border: 1px solid rgba(255,255,255,.72);
    border-radius: clamp(18px, 2vw, 25px);

    box-shadow:
        0 24px 56px rgba(0,0,0,.30),
        0 -2px 18px rgba(201,44,51,.16);
}

.mq-goal-title {
    margin: 0;

    color: #211d1a;

    font-size: clamp(2.7rem, 6vw, 4.8rem);
    font-weight: 950;
    line-height: .92;
    letter-spacing: -.055em;
}

.mq-goal-strike {
    display: block;

    width: clamp(150px, 29vw, 280px);
    height: 5px;

    background: #c92c33;
    border-radius: 999px;

    transform: rotate(-1deg) skewX(-17deg);
}

.mq-goal-copy {
    max-width: 720px;
    margin: 0;

    color: #211d1a;

    font-size: clamp(1rem, 2vw, 1.28rem);
    font-weight: 850;
    line-height: 1.3;

    text-wrap: balance;
}

.mq-goal-visual.is-playing {
    animation:
        mq-goal-cinematic-in
        .32s
        ease-out
        both;
}

.mq-goal-visual.is-playing
.mq-goal-card {
    animation:
        mq-goal-card-in
        .44s
        cubic-bezier(.18,.78,.24,1)
        both;
}

@keyframes mq-goal-cinematic-in {
    from { opacity: .35; }
    to   { opacity: 1; }
}

@keyframes mq-goal-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.975);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {

    .mq-arena.is-feedback-ui.is-goal
    > .mq-goal-visual {
        padding:
            0
            13px
            clamp(16px, 4dvh, 30px);

        background-position: 63% center;
    }

    .mq-arena.is-feedback-ui.is-goal
    .mq-goal-card {
        width: 94%;
        padding: 15px 18px;
        border-radius: 19px;
    }

    .mq-goal-title {
        font-size: clamp(2.25rem, 13vw, 3.4rem);
    }

    .mq-goal-copy {
        font-size: clamp(.9rem, 4.1vw, 1.05rem);
    }

}

@media
(max-width: 760px)
and (max-height: 700px) {

    .mq-arena.is-feedback-ui.is-goal
    > .mq-goal-visual {
        padding-bottom: 11px;
    }

    .mq-arena.is-feedback-ui.is-goal
    .mq-goal-card {
        padding: 10px 14px;
    }

    .mq-goal-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

}

/* MF-MQ-GOAL-CINEMATIC-17-8C-CSS:END */

/* MF-MQ-FINAL-17-11:START */

/*
 * PASUL 17.11 — FINAL INDIVIDUAL
 *
 * H2H este exclus explicit.
 */

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden])) {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    place-items: center;

    padding:
        clamp(24px, 5dvh, 52px)
        clamp(18px, 4vw, 46px);

    background:
        linear-gradient(
            180deg,
            rgba(12, 32, 24, .54),
            rgba(12, 32, 24, .76)
        ),
        url("/jocuri/meci-quiz/assets/football-pitch-bg.svg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-stage-head,

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-narrative,

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-question,

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-options,

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-feedback-status,

body:not(.match-quiz-h2h-page)
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-goal-visual {
    display: none !important;
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden]) {
    position: relative;
    z-index: 2;

    width: min(760px, 92%);
    box-sizing: border-box;

    padding:
        clamp(30px, 5dvh, 48px)
        clamp(24px, 5vw, 58px);

    text-align: center;

    background:
        rgba(255, 250, 242, .97);

    border:
        1px solid rgba(255, 255, 255, .70);

    border-radius:
        clamp(22px, 3vw, 30px);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(201, 44, 51, .05);
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
.mq-kicker {
    display: block;

    margin:
        0
        0
        clamp(12px, 2dvh, 18px);

    color: var(--mq-red);

    font-size:
        clamp(.72rem, 1.4vw, .82rem);

    font-weight: 950;

    letter-spacing: .16em;
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
h2 {
    margin: 0;

    color: var(--mq-charcoal);

    font-size:
        clamp(2.4rem, 5.8vw, 4.4rem);

    font-weight: 950;

    line-height: .98;

    letter-spacing: -.05em;
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
h2::after {
    content: "";

    display: block;

    width:
        clamp(120px, 20vw, 210px);

    height: 5px;

    margin:
        clamp(16px, 2.5dvh, 24px)
        auto
        0;

    background: var(--mq-red);

    border-radius: 999px;

    transform:
        rotate(-1deg)
        skewX(-18deg);
}


/*
 * ending_text nu mai este afișat în finalul individual.
 * Golul/ratarea au fost deja prezentate în gameplay.
 */

body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
> [data-final-message] {
    display: none !important;
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
.mq-final-actions {
    margin-top:
        clamp(22px, 4dvh, 34px);

    gap: 12px;
}


body:not(.match-quiz-h2h-page)
.mq-arena
> .mq-final:not([hidden])
.mq-button {
    min-width: 145px;
}


@media (max-width: 760px) {

    body:not(.match-quiz-h2h-page)
    .mq-arena:has(> .mq-final:not([hidden])) {
        padding:
            18px
            13px;

        background-image:
            linear-gradient(
                180deg,
                rgba(12, 32, 24, .52),
                rgba(12, 32, 24, .78)
            ),
            url("/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg");
    }


    body:not(.match-quiz-h2h-page)
    .mq-arena
    > .mq-final:not([hidden]) {
        width: 96%;

        padding:
            27px
            19px;

        border-radius: 22px;
    }


    body:not(.match-quiz-h2h-page)
    .mq-arena
    > .mq-final:not([hidden])
    h2 {
        font-size:
            clamp(2.15rem, 11vw, 3.15rem);
    }

}


@media
(max-width: 760px)
and (max-height: 700px) {

    body:not(.match-quiz-h2h-page)
    .mq-arena
    > .mq-final:not([hidden]) {
        padding:
            20px
            16px;
    }


    body:not(.match-quiz-h2h-page)
    .mq-arena
    > .mq-final:not([hidden])
    .mq-final-actions {
        margin-top: 18px;
    }

}

/* MF-MQ-FINAL-17-11:END */


/* MF-MQ-H2H-FINAL-17-12:START */

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden])) {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    place-items: center;

    padding:
        clamp(24px, 5dvh, 52px)
        clamp(18px, 4vw, 46px);

    background:
        linear-gradient(
            180deg,
            rgba(12, 32, 24, .54),
            rgba(12, 32, 24, .76)
        ),
        url("/jocuri/meci-quiz/assets/football-pitch-bg.svg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-stage-head,

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-narrative,

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-question,

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-options,

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-feedback-status,

.match-quiz-h2h-page
.mq-arena:has(> .mq-final:not([hidden]))
> .mq-goal-visual {
    display: none !important;
}


.match-quiz-h2h-page
.mq-arena
> .mq-final:not([hidden]) {
    position: relative;
    z-index: 2;

    width: min(760px, 92%);
    box-sizing: border-box;

    padding:
        clamp(30px, 5dvh, 48px)
        clamp(24px, 5vw, 58px);

    text-align: center;

    background:
        rgba(255, 250, 242, .97);

    border:
        1px solid rgba(255,255,255,.70);

    border-radius:
        clamp(22px, 3vw, 30px);

    box-shadow:
        0 28px 70px rgba(0,0,0,.30),
        0 0 0 1px rgba(201,44,51,.05);
}


.match-quiz-h2h-page
.mq-final:not([hidden])
.mq-kicker {
    display: block;

    margin:
        0
        0
        clamp(12px, 2dvh, 18px);

    color: var(--mq-red);

    font-size:
        clamp(.72rem, 1.4vw, .82rem);

    font-weight: 950;
    letter-spacing: .16em;
}


.match-quiz-h2h-page
.mq-final:not([hidden])
h2 {
    margin: 0;

    color: var(--mq-charcoal);

    font-size:
        clamp(2.4rem, 5.8vw, 4.4rem);

    font-weight: 950;
    line-height: .98;
    letter-spacing: -.05em;
}


.match-quiz-h2h-page
.mq-final:not([hidden])
h2::after {
    content: "";

    display: block;

    width:
        clamp(120px, 20vw, 210px);

    height: 5px;

    margin:
        clamp(16px, 2.5dvh, 24px)
        auto
        0;

    background: var(--mq-red);
    border-radius: 999px;

    transform:
        rotate(-1deg)
        skewX(-18deg);
}


.match-quiz-h2h-page
.mq-final:not([hidden])
> [data-final-message] {
    max-width: none;

    margin:
        clamp(20px, 3dvh, 28px)
        auto
        0;

    color: var(--mq-charcoal);

    line-height: 1.15;
}


.match-quiz-h2h-page
.mq-final.is-h2h-waiting
> [data-final-message] {
    font-size:
        clamp(1.05rem, 2.1vw, 1.3rem);

    font-weight: 850;
}


.mq-h2h-final-score {
    display: block;

    color: var(--mq-charcoal);

    font-size:
        clamp(3.2rem, 8vw, 5.6rem);

    font-weight: 950;
    line-height: .9;
    letter-spacing: -.06em;
}


.match-quiz-h2h-page
.mq-final:not([hidden])
.mq-final-actions {
    margin-top:
        clamp(24px, 4dvh, 34px);
}


@media (max-width: 760px) {

    .match-quiz-h2h-page
    .mq-arena:has(> .mq-final:not([hidden])) {
        padding:
            18px
            13px;

        background-image:
            linear-gradient(
                180deg,
                rgba(12,32,24,.52),
                rgba(12,32,24,.78)
            ),
            url("/jocuri/meci-quiz/assets/football-pitch-bg-mobile.svg");
    }


    .match-quiz-h2h-page
    .mq-arena
    > .mq-final:not([hidden]) {
        width: 96%;

        padding:
            27px
            19px;

        border-radius: 22px;
    }


    .match-quiz-h2h-page
    .mq-final:not([hidden])
    h2 {
        font-size:
            clamp(2.15rem, 11vw, 3.15rem);
    }


    .mq-h2h-final-score {
        font-size:
            clamp(3rem, 18vw, 4.6rem);
    }

}

/* MF-MQ-H2H-FINAL-17-12:END */



/* MF-MQ-TEXT-SPEED-20260918 */

.mq-scorebar-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.mq-text-speed {
  flex: 0 0 auto;
  appearance: none;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease,
    opacity .16s ease;
}

.mq-text-speed:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .48);
  transform: translateY(-1px);
}

.mq-text-speed:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
}

.mq-text-speed:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

@media (max-width: 760px) {
  .mq-scorebar {
    gap: 8px;
  }

  .mq-text-speed {
    min-height: 29px;
    padding: 5px 8px;
    font-size: .68rem;
  }
}

@media (max-width: 390px) {
  .mq-text-speed {
    padding-left: 7px;
    padding-right: 7px;
    font-size: .64rem;
  }
}


/* MF-MQ-SCOREBAR-ADAPTIVE-20260918 */

/*
 * DESKTOP NORMAL
 *
 *   Viteză        TITLU PERFECT CENTRAT        Goluri
 *
 * Coloanele laterale sunt egale (1fr / auto / 1fr),
 * deci centrul titlului este centrul scorebarului,
 * nu centrul spațiului rămas.
 */
.mq-scorebar {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  row-gap: 8px;
}

.mq-scorebar-copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  min-width: 0;
  text-align: center;
}

.mq-scorebar-copy > span,
.mq-scorebar-title {
  margin-bottom: 0;
}

.mq-scorebar-title {
  display: block;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}

.mq-text-speed {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

.mq-scorebar-goals {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.mq-scorebar-goals strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

/*
 * Marginea dreaptă a grupului rămâne fixă.
 * Pe măsură ce apar mingi, grupul crește spre stânga.
 */
.mq-goal-icons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
}


/*
 * H2H — FALLBACK ADAPTIV
 *
 * Dacă JS detectează că titlul + lateralele
 * nu mai încap confortabil:
 *
 *              USER A — USER B
 *
 *   Viteză                         Goluri
 */
.mq-scorebar-h2h.is-h2h-stacked {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "speed goals";
  column-gap: 16px;
  row-gap: 10px;
}

.mq-scorebar-h2h.is-h2h-stacked
.mq-scorebar-copy {
  grid-area: title;
  width: 100%;
  justify-self: stretch;
}

.mq-scorebar-h2h.is-h2h-stacked
.mq-scorebar-title {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.mq-scorebar-h2h.is-h2h-stacked
.mq-text-speed {
  grid-area: speed;
  justify-self: start;
}

.mq-scorebar-h2h.is-h2h-stacked
.mq-scorebar-goals {
  grid-area: goals;
  justify-self: end;
}


/*
 * MOBIL
 *
 * Folosim direct forma sigură în două rânduri:
 *
 *              TITLU
 *   Viteză                  Goluri
 */
@media (max-width: 760px) {
  .mq-scorebar {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "speed goals";
    column-gap: 10px;
    row-gap: 9px;
    align-items: center;
  }

  .mq-scorebar-copy {
    grid-area: title;
    width: 100%;
    justify-self: stretch;
  }

  .mq-scorebar-title {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .mq-text-speed {
    grid-area: speed;
    justify-self: start;
  }

  .mq-scorebar-goals {
    grid-area: goals;
    justify-self: end;
  }
}

@media (max-width: 430px) {
  .mq-scorebar {
    column-gap: 7px;
  }

  .mq-scorebar-goals {
    gap: 5px;
    font-size: .78rem;
  }

  .mq-goal-icons {
    gap: 3px;
    font-size: 1rem;
  }
}