/*
  Desktop-only overrides.
  Keep kiosk/tablet/mobile styling in style.css. Put computer preview changes here.
*/

@media (min-width: 1100px) and (orientation: landscape) and (pointer: fine) {
  :root {
    --desktop-content-width: min(100%, 78rem);
  }

  .screen-intro .intro-card,
  .screen-question .screen-body,
  .screen-answers .screen-body,
  .screen-wheel .wheel-content,
  .screen-success .screen-body,
  .screen-second-chance .screen-body,
  .screen-end .screen-body,
  .screen-prize .screen-body {
    max-width: var(--desktop-content-width);
  }

  .screen-intro {
    justify-content: center;
  }

  .screen::after {
    bottom: clamp(4rem, 7vh, 5.8rem);
  }

  .screen-intro .intro-card {
    width: min(88vw, 78rem);
    display: grid;
    grid-template-columns: minmax(18rem, 31rem) minmax(0, 36rem);
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-content: center;
    justify-items: start;
    column-gap: clamp(3rem, 7vw, 6.5rem);
    row-gap: 0;
    text-align: left;
    padding: 0;
    margin-block: auto;
  }

  .screen-intro .brand-logo {
    grid-column: 1;
    grid-row: 1 / 4;
    width: min(31rem, 33vw, 58svh);
    height: min(31rem, 33vw, 58svh);
    justify-self: end;
  }

  .screen-intro .intro-title {
    grid-column: 2;
    grid-row: 1;
    max-width: 13ch;
    margin: 0;
    align-self: end;
    font-size: clamp(3.6rem, 5.2vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: 0.05rem;
  }

  .screen-intro .intro-title-line {
    white-space: nowrap;
  }

  .screen-intro .lead {
    grid-column: 2;
    grid-row: 2;
    width: max-content;
    max-width: none;
    margin: clamp(1.4rem, 2.8vh, 2.2rem) 0 0;
    align-self: center;
    font-size: clamp(1.2rem, 1.5vw, 1.65rem);
    line-height: 1.18;
    white-space: nowrap;
  }

  .screen-intro .primary-btn {
    grid-column: 2;
    grid-row: 3;
    margin-top: clamp(1.7rem, 3.5vh, 3rem);
    margin-bottom: 0;
    align-self: start;
  }

  .screen-question .game-header,
  .screen-answers .game-header {
    left: clamp(3.2rem, 5vw, 5.5rem);
    top: clamp(2.6rem, 4.2vh, 4rem);
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    column-gap: clamp(1rem, 1.6vw, 1.6rem);
  }

  .screen-question .game-header .brand-logo,
  .screen-answers .game-header .brand-logo {
    width: clamp(4.8rem, 7vw, 6.4rem);
  }

  .screen-question .game-header__logo,
  .screen-answers .game-header__logo {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .screen-question .game-header .round-pill,
  .screen-answers .game-header .round-pill {
    grid-column: 2;
    grid-row: 1;
    margin-top: clamp(3.4rem, 6.4vh, 5.2rem);
    align-self: flex-start;
  }

  .screen-question .game-header .category,
  .screen-answers .game-header .category {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.45rem;
    align-self: flex-start;
    text-align: left;
    white-space: nowrap;
  }

  .screen-answers .screen-body {
    align-content: center;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 5rem;
    min-height: auto;
    position: relative;
  }

  .screen-answers .question-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .screen-answers .answers-block {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(44rem, 42vw);
    height: min(72vh, 39rem);
    min-height: 28rem;
    padding-bottom: 0;
    transform: translateY(calc(-50% + clamp(-2rem, -3.2vh, -1rem)));
  }

  .screen-answers .answers-list {
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--answer-rows, 3), minmax(0, 1fr));
  }

  .screen-answers .answer-btn,
  .screen-answers .wrong-btn {
    width: 100%;
    min-height: 0;
    height: 100%;
  }

  .screen-question .question-title,
  .screen-answers .question-title {
    font-size: clamp(3.4rem, 5vw, 6rem);
  }

  .screen-answers .question-title.compact {
    font-size: clamp(3.4rem, 5vw, 6rem);
    max-width: 18ch;
    line-height: 1.14;
  }

  .screen-question .question-title.is-medium,
  .screen-answers .question-title.is-medium {
    font-size: clamp(3rem, 4.4vw, 5.2rem);
  }

  .screen-answers .question-title.compact.is-medium {
    font-size: clamp(3rem, 4.4vw, 5.2rem);
    max-width: 22ch;
  }

  .screen-question .question-title.is-long,
  .screen-answers .question-title.is-long {
    font-size: clamp(2.55rem, 3.8vw, 4.45rem);
  }

  .screen-answers .question-title.compact.is-long {
    font-size: clamp(2.55rem, 3.8vw, 4.45rem);
    max-width: 26ch;
  }

  .screen-question .question-timer-block {
    --desktop-timer-y: clamp(-4.2rem, -7vh, -2.4rem);
    transform: translateY(var(--desktop-timer-y));
  }

  .screen-question.is-timer-waiting .question-timer-block {
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--desktop-timer-y));
  }

  .screen-question.is-timer-revealing .question-timer-block {
    animation: desktopTimerIn 560ms ease both;
  }

  .screen-question .timer-wrap {
    width: min(30vw, 26rem);
  }

  .screen-answers .screen-body.is-body-entering {
    animation: none;
  }
}

@keyframes desktopTimerIn {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--desktop-timer-y));
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(var(--desktop-timer-y));
  }
}