/* The answer screen every game shares (D-032, D-035). The class names are the block game's, from before
   the screen moved to the platform, and the end-to-end tests select on them. */

/* The gate is a focus target when it opens, so it can answer Escape and be announced. It is inset:0 in
   a fixed overlay, so its box is the viewport and a ring drawn outside it would be off screen: no visible
   focus at all. Hence the inset ring, also on [data-focus-visible], which app.css pairs with the
   pseudo-class for engines without native :focus-visible. */
.block-game-gate:focus-visible,
.block-game-gate[data-focus-visible] {
    outline: 3px solid var(--accent-primary);
    outline-offset: -3px;
}

@keyframes game-answer-pop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* The gate covers the play area rather than sitting beside it: the board is frozen and dimmed
   underneath, so competing for the same vertical space would leave neither readable on a phone. */
.block-game-gate {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    /* Both insets are paid here rather than inherited: absolute inset:0 resolves against the overlay's
       padding box, so the gate covers the overlay's own safe-area padding as well as the header that
       pays the top one. Without these its first and last rows sit under the status bar and the home
       indicator, and so does the top of its focus ring. */
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: var(--bg-primary);
}

.block-game-gate-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

/* The only part that scrolls, and the only part that changes height. The button below therefore
   stays where the finger left it: whatever a verdict adds is absorbed here. Top-aligned, so the
   question sits right under the header where the eye lands; centred, a short question floated a
   third of the way down with nothing above it. */
.block-game-gate-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

/* Written mode: the phone keyboard covers the lower half of the screen, so the buttons follow the field
   instead of sitting at the bottom. The middle stops growing, which is what puts them there. */
.block-game-gate.is-written .block-game-gate-scroll {
    flex: 0 1 auto;
}

/* Only a layout box in written mode. Elsewhere it is transparent to the column's gap, so an empty one
   adds no space. */
.block-game-gate-verdict-slot {
    display: contents;
}

.block-game-gate.is-written .block-game-gate-verdict-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 2.75rem;
}

.block-game-gate-title {
    margin: 0;
    font-size: 1.125rem;
}

/* How close the round is to paying out, which is the only thing on this screen that connects the
   question to the game. It was the same weight as the title beside it. */
.block-game-gate-progress {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #fde047;
    white-space: nowrap;
}

.block-game-gate-question {
    font-weight: 600;
    line-height: 1.4;
}

/* Quieter than the question but in the payout's own colour, so it reads as the reason to answer
   rather than as another instruction. */
.block-game-gate-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fde047;
    opacity: 0.9;
}

.block-game-gate-close {
    background: none;
    border: none;
    color: inherit;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.block-game-gate-question {
    font-size: 1.25rem;
}

/* Named for the gate rather than shared with MultipleChoicePlayer's practice-test-option: that
   component's option styling lives only in a <style> block inside its own markup, not in a linked
   stylesheet, so it never reaches a page where MultipleChoicePlayer itself has not rendered. Visual
   appearance is copied to look familiar; the letter bullets and correct/wrong icons are not, because
   those belong to a scored test result, not a gate question. */
.block-game-gate-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-game-gate-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.block-game-gate-option:not(.disabled):hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

.block-game-gate-option.selected:not(.correct):not(.wrong) {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--accent-blue);
}

.block-game-gate-option.correct {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-green);
}

.block-game-gate-option.wrong {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-danger);
}

.block-game-gate-option.disabled {
    cursor: default;
}

.block-game-gate-option-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .block-game-gate-option-text {
        font-size: 1rem;
    }
}

.block-game-gate-no-more-questions {
    color: var(--text-secondary);
}

.block-game-gate-error {
    color: var(--accent-danger);
}

/* Fixed at the bottom of the gate, outside the scrolling middle. Tapping the same place twice is
   how a child gets through a round, and anything that moves the button between those two taps
   costs them the rhythm. */
.block-game-gate-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
}

.block-game-gate-actions .btn {
    flex: 1;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 0.75rem;
}

/* A written answer: large enough to read at arm's length, and coloured by the verdict like the options. */
.block-game-gate-input {
    padding: 0.9rem 1rem;
    font-size: 1.25rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
}

.block-game-gate-input:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

/* Neutral rather than the app's green ring, which around a wrong answer's red border said both. */
.block-game-gate-input:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 3px;
}

/* Read-only once ruled on, and Bootstrap paints a read-only field light grey with a selector that
   outranks the one above, under text that stays white. */
.block-game-gate-input[readonly] {
    background-color: rgba(255, 255, 255, 0.06);
}

.block-game-gate-input.correct {
    border-color: #4ade80;
}

.block-game-gate-input.wrong {
    border-color: #fca5a5;
}

/* The verdict when there is nothing to explain: a pill under the options rather than a box. */
.block-game-gate-verdict {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem auto 0;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    animation: game-answer-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.block-game-gate-verdict.correct {
    background: rgba(16, 185, 129, 0.15);
    color: #4ade80;
}

.block-game-gate-verdict.incorrect {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* What an answer was made of. Compact and wrapping, so in written mode, where the buttons sit right
   under the verdict, a short list grows the slot by a line rather than by a row each. */
.game-reward-rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.game-reward-row {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(253, 224, 71, 0.12);
    color: #fde047;
    font-size: 0.85rem;
    font-weight: 600;
    animation: game-reward-row-in 260ms ease-out both;
    animation-delay: calc(150ms + var(--reward-row-index, 0) * 220ms);
}

.game-reward-row-amount {
    font-weight: 800;
}

@keyframes game-reward-row-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
    }
}

/* The universal rule shortens animations but keeps their delay, which would leave the rows invisible
   for a moment and then pop them in one by one all the same. */
@media (prefers-reduced-motion: reduce) {
    .game-reward-row {
        animation: none;
    }
}

/* The box keeps its job when there is an explanation, with less air than the practice test gives it. */
.block-game-gate .practice-test-feedback {
    margin-top: 1rem;
    padding: 1rem;
}

.block-game-gate .practice-test-feedback-header {
    margin-bottom: 0.5rem;
}

/* The lesser choice beside answering on: outlined, lighter and narrower than the action button. */
.block-game-gate-actions .block-game-gate-back {
    flex: 0 1 38%;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* The action button keeps its label on one line however long the lesser choice's label runs. */
.block-game-gate-actions .btn-primary {
    white-space: nowrap;
}

/* What the next question is worth, on a line of its own under the label: beside it, the two did not
   fit next to the way back on a phone. */
.game-answer-next-worth {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.block-game-gate-actions .block-game-gate-back:hover,
.block-game-gate-actions .block-game-gate-back:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* Disabled until an option is picked, which is right, but the app's own 0.6 on a dark overlay
   left the green reading as grey, so the button looked switched off rather than waiting. Raised
   until the colour survives, which is what says where to go once an option is chosen. */
.block-game-gate-actions .btn:disabled {
    /* Bootstrap's own btn-primary:disabled swaps the background for its grey, which on a dark
       overlay makes the button look switched off instead of waiting for a choice. The app's green
       is restored and only dimmed, so the eye still knows where it is going. */
    background-color: #15803d;
    border-color: #15803d;
    color: #fff;
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .block-game-gate-verdict {
        animation: none;
    }
}

/* The transition every game gets, from TestDetail's wrapper. It is on the overlay the player renders as its
   root, which is fixed over the page, rather than on the wrapper: a transform on the wrapper would become
   the containing block of the fixed overlay. The scale is what makes it readable, since in the dark theme
   the overlay is the colour of the page behind it and opacity alone barely shows. The length is
   GameFadeMilliseconds in TestDetail.Players.cs. */
.game-host > * {
    animation: game-host-in 400ms ease-out;
}

.game-host.is-closing > * {
    animation: game-host-out 400ms ease-in forwards;
    pointer-events: none;
}

@keyframes game-host-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes game-host-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .game-host > *,
    .game-host.is-closing > * {
        animation: none;
    }
}

/* The question screen comes up over the board and goes back down the same way, rather than switching: the
   board is dimmed behind it, so a crossfade shows where the child is going and coming back to. The length is
   FadeOutMilliseconds in GameAnswerScreen.razor. */
.block-game-gate {
    animation: game-gate-in 300ms ease-out;
}

.block-game-gate.is-leaving {
    animation: game-gate-out 300ms ease-in forwards;
    pointer-events: none;
}

@keyframes game-gate-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes game-gate-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
    .block-game-gate,
    .block-game-gate.is-leaving {
        animation: none;
    }
}

/* The choice after a won round (D-048), shared by every game that offers one so it looks the same in all. */
.game-round-continue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.game-round-continue .btn {
    min-height: 2.75rem;
}