@font-face {
    font-family: Alphasmoke;
    src: url('../assets/Alphasmoke.ttf');
}

@font-face {
    font-family: Alphacloud;
    src: url('../assets/Alphacloud.ttf');
}

@font-face {
    font-family: Timer;
    src: url('../assets/Timer.ttf');
}

/* Matrix theme - monospace everywhere, no proprietary webfont required.
   Dropping Amazon Ember also removes the licensing problem it carried. */
:root {
    --font-display: "Courier New", Courier, "DejaVu Sans Mono", monospace;
    --font-ui: Consolas, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;

    /* Matrix palette */
    --m-black: #000500;
    --m-panel: rgba(0, 18, 6, 0.86);
    --m-panel-solid: #001206;
    --m-line: #00632a;
    --m-dim: #008f27;
    --m-green: #00ff41;
    --m-bright: #d7ffe4;

    /* Accents - Sonar crimson doubles as the "wrong answer" red */
    --m-red: #fd3456;
    --m-amber: #ffb000;
    --m-cyan: #00d9ff;

    --m-glow: 0 0 0.35em rgba(0, 255, 65, 0.65);
}

body {
    font-family: var(--font-display);
    padding: 0px !important;
    margin: 0px !important;

    touch-action: manipulation;
    color: var(--m-green);
    overflow: hidden;
    background-color: var(--m-black);
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    text-shadow: var(--m-glow);
}

#root input {
    color: var(--m-green);
    font-family: var(--font-ui);
}

body::-webkit-scrollbar {
    display: none;
}

#root::-webkit-scrollbar {
    display: none;
}

#root {
    /*
     * The game is designed for a 1080x1920 portrait kiosk. Rather than reflow
     * every screen for every window size, the design is kept as a centred
     * "stage" with that aspect ratio, scaled to fit whatever window it gets.
     *
     * container-type: size makes the stage a query container, so everything
     * inside sizes itself in cqh / cqw instead of vh / vw. At exactly 9:16,
     * 1cqh == 1vh, so the original tuning is preserved at the design size.
     */
    --stage-w: 1080;
    --stage-h: 1920;

    position: fixed;
    inset: 0;
    margin: auto !important;
    padding: 0px !important;
    width: min(100vw, 100vh * (var(--stage-w) / var(--stage-h)));
    height: min(100vh, 100vw * (var(--stage-h) / var(--stage-w)));
    container-type: size;
    container-name: stage;

    font-family: var(--font-display);
    user-select: none;
    overflow-y: auto;
    display: flex;
    place-items: center;
    font-size: 3cqh;
    background: var(--m-black);
}

/*
 * The rain and the CRT overlay cover the whole window rather than just the
 * stage, so the letterbox around it is never a dead black bar. They hang off
 * <body> because container-type implies contain, which would otherwise trap a
 * fixed-position child inside the stage.
 */
body > #matrix-rain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 0;
    pointer-events: none;
    background: var(--m-black);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, 0.22) 0px,
            rgba(0, 0, 0, 0.22) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.55) 100%);
}

/** For large screens - desktop / laptop */
/** For iphone */
/**
@media only screen
  and (min-width: 1024px)
  and (max-height: 1366px)
  and (-webkit-min-device-pixel-ratio: 1.5) {
    #root {
        transform: scale(0.91);
        margin-left: -3cqh;
        margin-top: -5cqh;
    }
}
*/

input[type=button] {
    font-family: var(--font-display);
    cursor: pointer;
}

input[type=text] {
    font-family: var(--font-display);
}

#game-container {
    /* No z-index here. This div is full-screen and empty on the menu screens,
       so lifting it above the sibling screens makes it swallow every click.
       The canvas is first in the DOM, so the game already paints over it. */
    text-align: center;
    font-family: var(--font-display);
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden !important;
}

#countdown-screen {
    font-size: 8em;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: bold;
    color: var(--m-green);
    text-shadow: 0 0 0.12em #fff, 0 0 0.35em var(--m-green), 0 0 0.9em var(--m-green);
    width: 100%;
    position: absolute;
    animation: zoom-out-text 0.9s forwards 1;
    pointer-events: none;
    overflow: hidden;
}

.question-initial-position {
    position: absolute;
}


.question {
    /* Never black: the panel is near-black, so a lost accent class used to
       make the text invisible mid-drag. */
    color: var(--m-bright);
    font-size: 0.58em;
    padding: 1.6cqh 2cqh;
    border-radius: 0;
    max-width: 34cqh;
    z-index: 100;
    position: inherit;
    touch-action: none;
    text-shadow: none;
}

/* Just enough lift to show the panel is in hand. The "which bucket am I over"
   signal is the bucket's own border lighting up, not the panel ballooning.
   Capped so the dragged panel still fits *inside* a bucket - at 1.08 it ended up
   wider than the bucket and the two borders crossed over each other on the drop. */
.scale {
    transform: scale(1.05) !important;
}

.question-text {
    padding: 0.1cqh 0.5cqh;
    font-size: 1em;
    line-height: 1.35;
    margin-top: 0;
    text-shadow: 0 1px 2px #000;
    position: relative;
    z-index: 2;
    /* Questions quote identifiers like "sonar.coverage.exclusions". A dot is not
       a break opportunity, so the whole token counts as one word and used to
       spill past the panel's right border. Break inside it only when it cannot
       fit a line on its own, so ordinary prose still breaks at spaces. */
    overflow-wrap: break-word;
}

.falling {
    animation-name: falling-down-animation;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.falling-super-fast {
    animation-duration: 12s;
}

.falling-fast {
    animation-duration: 15s;
}

.falling-medium {
    animation-duration: 25s;
}

.falling-slow {
    animation-duration: 30s;
}

.falling-super-slow {
    animation-duration: 45s;
}

@keyframes falling-down-animation {
    90% {
        transform: translateY(100cqh);
    }

    100% {
        transform: translateY(110cqh);
    }
}

/* A falling question is a terminal panel, not a cloud. The cloud class name is
   kept so existing question sets and the drag/drop code keep working. */
.cloud {
    background: var(--m-panel-solid);
    /* Narrow enough that the panel, plus its 2cqh side padding and the 1.05 drag
       scale, still sits inside a 26cqh bucket. Both buckets have to fit the
       56.25cqh stage side by side, so widening them instead is not an option. */
    width: 20cqh;
    min-height: 6cqh;
    border: 1px solid var(--m-line);
    border-left: 3px solid var(--m-green);
    border-radius: 0;
    box-shadow: 0 0 1.2cqh rgba(0, 255, 65, 0.25), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
    transform: none;
    font-family: var(--font-ui);
    letter-spacing: 0.02em;
}

/* Scanline sheen across the panel */
.cloud:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            rgba(0, 255, 65, 0.055) 0px,
            rgba(0, 255, 65, 0.055) 1px,
            transparent 1px,
            transparent 3px);
    z-index: 1;
}

/* Corner bracket, so each panel reads as a captured packet */
.cloud:after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 1.1cqh;
    height: 1.1cqh;
    border-top: 2px solid var(--m-green);
    border-right: 2px solid var(--m-green);
    background: none;
    border-radius: 0;
    z-index: 2;
}

.fill-green {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(85deg);
}

.fill-red {
    filter: invert(0.9) sepia(1) saturate(100) hue-rotate(0deg);
}

.missed-question {
    width: 5cqh;
    height: 5cqh;
}

.move-question {
    animation: move-question 4s forwards infinite;
}

.move-hand {
    animation: move-hand 4s forwards infinite;
}

.hand-touch {
    background: url(../assets/svg/touch.svg) center center no-repeat;
    background-size: contain;
    display: block;
    position: relative;
    height: 11cqh;
    width: 11cqh;
    /* Sits over the example panel, then travels with it */
    margin: -7cqh auto 0;
    z-index: 9999;
    /* Purely decorative: without this the hand's box swallows clicks on
       whatever is underneath it. */
    pointer-events: none;
}

/* Buckets become terminal drop targets: a dashed frame with corner brackets
   instead of the old bucket artwork. */
.bucket {
    display: table-cell;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 255, 65, 0.03) 0%, rgba(0, 255, 65, 0.11) 100%);
    border: 2px dashed var(--m-line);
    color: var(--m-green);
    padding: 0px;
    min-width: 30%;
    vertical-align: bottom;
    z-index: 10;
    font-size: 1em;
    font-family: var(--font-display);
    /* Wide enough to contain a dragged panel. Two of these plus a visible gap
       have to fit the 56.25cqh stage, which caps this at roughly 26cqh. */
    width: 21cqh;
    height: 23cqh;
    opacity: 0.9;
    box-shadow: inset 0 0 3cqh rgba(0, 255, 65, 0.12);
}

#false-bucket {
    border-color: rgba(253, 52, 86, 0.55);
    color: var(--m-red);
    background: linear-gradient(180deg, rgba(253, 52, 86, 0.03) 0%, rgba(253, 52, 86, 0.11) 100%);
    box-shadow: inset 0 0 3cqh rgba(253, 52, 86, 0.12);
}

.start-screen-instructions {
    font-size: 0.8em !important;
    text-shadow: none;
}

p.large {
    font-size: 1.5em;
}

p.medium {
    font-size: 0.8em;
}

p.small {
    font-size: 0.65em;
    text-shadow: none;
}

#start-screen .bucket {
    position: absolute;
    bottom: 0;
    width: 45%;
    height: 17cqh;
}

#start-screen .bucket-text {
    font-size: 0.62em;
}

#start-screen .left-bucket {
    left: 0;
}

/* Matches the in-game FALSE bucket, so the demo teaches the real colours */
#start-screen .right-bucket {
    right: 0;
    border-color: rgba(253, 52, 86, 0.55);
    color: var(--m-red);
    background: linear-gradient(180deg, rgba(253, 52, 86, 0.03) 0%, rgba(253, 52, 86, 0.11) 100%);
    box-shadow: inset 0 0 3cqh rgba(253, 52, 86, 0.12);
}

/* Centre the label in the bucket instead of nudging it with margins, and keep
   the brackets on the same line as the word at any size. */
.bucket-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-ui);
    font-weight: bold;
    letter-spacing: 0.12em;
    text-shadow: 0 0 0.5em currentColor;
}

.bucket-text:before {
    content: '[';
    opacity: 0.55;
}

.bucket-text:after {
    content: ']';
    opacity: 0.55;
}

.screen-bottom,
.screen-middle,
.screen-top {
    width: 100%;
    max-width: 56cqw;
    position: relative;
    margin-top: 3.5cqh;
    margin-left: auto;
    margin-right: auto;
}

/* The how-to-play column was narrow enough to cramp the demo panel against the
   two buckets. Scoped to #start-screen so the category picker, which shares these
   classes, keeps its narrower column. */
#start-screen .screen-top,
#start-screen .screen-middle,
#start-screen .screen-bottom {
    max-width: 82cqw;
}

.start-screen-bottom,
.selection-screen-bottom {
    height: 25cqh;
}

/* The markup uses class="screen-middle", not .start-screen-middle, so the old
   rule never applied and the section collapsed to the height of the example
   panel - which put the demo buckets directly underneath it. */
#start-screen .screen-middle {
    height: 34cqh;
}

.start-screen-topm {
    height: 23cqh;
    /** margin-top: 10cqh; */
}

#true-bucket {
    bottom: 7cqh;
    left: 5cqw;
}

#false-bucket {
    bottom: 7cqh;
    right: 5cqw;
}

/* Hovering a bucket used to blow it up to 1.8x, which shoved the other bucket and
   the falling panels around. The size change is now a nudge and the real feedback
   is the border lighting up and pulsing. currentColor keeps that glow green on the
   TRUE bucket and red on FALSE, since each sets its own colour. */
.bucket-hover {
    animation: zoom-in-bucket 0.18s forwards 1,
               bucket-glow 0.85s ease-in-out infinite;
    border-style: solid;
    border-color: currentColor;
}

@keyframes bucket-glow {
    0%, 100% {
        box-shadow: 0 0 0.9cqh currentColor,
                    inset 0 0 1.6cqh rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow: 0 0 2.4cqh currentColor,
                    0 0 5cqh currentColor,
                    inset 0 0 3cqh rgba(255, 255, 255, 0.18);
    }
}

.bucket-score {
    color: green;
    font-size: 1em;
    margin-top: -30cqh;
    text-shadow: black 0.1cqh 0.1cqh;
}

#intro-screen {
    position: relative;
    width: 100%;
    text-align: center;
}

#intro-screen h1 {
    font-size: 1.7em;
    color: var(--m-green);
    font-family: var(--font-ui);
    text-shadow: 0 0 0.4em rgba(0, 255, 65, 0.7);
    line-height: 1.4;
    font-weight: bold;
    letter-spacing: 0.04em;
}

/* Blinking terminal cursor after the headline */
#intro-screen h1:after {
    content: '_';
    animation: terminal-blink 1.05s steps(1) infinite;
    color: var(--m-green);
}

@keyframes terminal-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#start-area {
    /* Below the 10cqh HUD band, so falling panels never cover the score / timer */
    top: 11cqh;
    left: 0;
    text-align: center;
    margin: auto;
    height: 2cqh;
    width: 56cqh;
    z-index: 999;
    position: absolute;
}

#timer,
#score {
    position: absolute;
    top: 0px;
    margin: auto;
    background: rgba(0, 10, 4, 0.85);
    border: 1px solid var(--m-line);
    color: var(--m-green);
    padding: 1cqh 2cqh 0.6cqh 2cqh;
    font-family: var(--font-ui);
    font-size: 0.7em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-grid;
    text-shadow: 0 0 0.4em rgba(0, 255, 65, 0.6);
}

#score {
    right: 0px;
    text-align: right;
}

#score-value {
    font-size: 2em;
    font-family: Timer;
}

#timer {
    left: 0px;
    text-align: left;
}

#timer-value {
    font-family: Timer;
    font-size: 2em;
}

.hide {
    display: none;
    visibility: hidden;
}

.show {
    display: block;
    visibility: inherit;
}

#start-screen,
#selection-screen {
    position: absolute;
    top: 0px;
    width: 90%;
    padding: 0% 5% 0% 5%;
    text-align: center;
}

#start-screen h1 {
    font-size: 1.6em;
}

#start-screen p {
    font-size: 1em;
    color: var(--m-green);
    margin-top: 0px;
}

#start-button,
#show-button,
/* Terminal buttons: sharp corners, bracketed label, glow on press */
.next-button,
#start-button,
#show-button,
#add-to-leaderboard,
#skip,
#next-player,
#toggle-summary-button-1,
#toggle-summary-button-2,
#close-architecture {
    position: relative;
    margin: 1cqh auto;
    border: 1px solid var(--m-green);
    border-radius: 0;
    padding: 0.35em 1.4em;
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: bold;
    font-family: var(--font-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(0, 255, 65, 0.08);
    color: var(--m-green);
    cursor: pointer;
    transition: background .15s, box-shadow .15s, color .15s;
    text-shadow: 0 0 0.4em rgba(0, 255, 65, 0.8);
    box-shadow: 0 0 1cqh rgba(0, 255, 65, 0.25), inset 0 0 1.5cqh rgba(0, 255, 65, 0.08);
    -webkit-appearance: none;
    appearance: none;
}

.next-button:hover,
#start-button:hover,
#show-button:hover,
#add-to-leaderboard:hover,
#next-player:hover,
#toggle-summary-button-1:hover,
#toggle-summary-button-2:hover,
#close-architecture:hover,
.next-button:active,
#start-button:active,
#show-button:active {
    background: rgba(0, 255, 65, 0.2);
    color: var(--m-bright);
    box-shadow: 0 0 2.2cqh rgba(0, 255, 65, 0.55), inset 0 0 2cqh rgba(0, 255, 65, 0.15);
}

.next-button {
    top: 2cqh;
    margin-bottom: 2cqh;
    width: 46cqw;
    max-width: 80%;
}

#start-button {
    top: 0px !important;
    margin-bottom: 2cqh;
}

/* A secondary, quieter action */
#skip {
    border-color: var(--m-line);
    color: var(--m-dim);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    font-size: 1em;
}

#skip:hover {
    color: var(--m-green);
    border-color: var(--m-green);
}

#top-menu {
    position: initial;
    top: 0;
    left: 0;
    color: var(--m-green);
    height: 10cqh;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 20, 7, 0.95) 0%, rgba(0, 5, 0, 0.8) 100%);
    border-bottom: 1px solid var(--m-line);
    font-family: var(--font-ui);
    letter-spacing: 0.08em;
    text-shadow: 0 0 0.4em rgba(0, 255, 65, 0.6);
}

#logo {
    position: relative;
    top: 0px;
    width: 100%;
}

/* Per-question accent colours - the question set's "color" field picks one.
   In this theme the colour is the border and the text, not a fill. */

.cloud-green {
    color: var(--m-bright);
    border-left-color: var(--m-green);
    background: linear-gradient(180deg, #002f10 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(0, 255, 65, 0.30), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-green:after {
    border-top-color: var(--m-green);
    border-right-color: var(--m-green);
}

.cloud-blue {
    color: var(--m-bright);
    border-left-color: var(--m-cyan);
    background: linear-gradient(180deg, #001f28 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(0, 217, 255, 0.28), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-blue:after {
    border-top-color: var(--m-cyan);
    border-right-color: var(--m-cyan);
}

.cloud-cyan {
    color: var(--m-bright);
    border-left-color: var(--m-cyan);
    background: linear-gradient(180deg, #001f28 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(0, 217, 255, 0.28), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-cyan:after {
    border-top-color: var(--m-cyan);
    border-right-color: var(--m-cyan);
}

.cloud-navy {
    color: var(--m-bright);
    border-left-color: var(--m-dim);
    background: linear-gradient(180deg, #001206 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(0, 143, 39, 0.28), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-navy:after {
    border-top-color: var(--m-dim);
    border-right-color: var(--m-dim);
}

.cloud-yellow {
    color: var(--m-bright);
    border-left-color: var(--m-amber);
    background: linear-gradient(180deg, #231700 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(255, 176, 0, 0.26), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-yellow:after {
    border-top-color: var(--m-amber);
    border-right-color: var(--m-amber);
}

.cloud-orange {
    color: var(--m-bright);
    border-left-color: var(--m-amber);
    background: linear-gradient(180deg, #2a1800 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(255, 176, 0, 0.26), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-orange:after {
    border-top-color: var(--m-amber);
    border-right-color: var(--m-amber);
}

.cloud-gray {
    color: var(--m-bright);
    border-left-color: #7f9c88;
    background: linear-gradient(180deg, #0c1410 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(127, 156, 136, 0.24), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-gray:after {
    border-top-color: #7f9c88;
    border-right-color: #7f9c88;
}

.cloud-white {
    color: var(--m-bright);
    border-left-color: var(--m-bright);
    background: linear-gradient(180deg, #0d1f14 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(215, 255, 228, 0.24), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-white:after {
    border-top-color: var(--m-bright);
    border-right-color: var(--m-bright);
}

.cloud-red {
    color: var(--m-bright);
    border-left-color: var(--m-red);
    background: linear-gradient(180deg, #2a000a 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(253, 52, 86, 0.28), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-red:after {
    border-top-color: var(--m-red);
    border-right-color: var(--m-red);
}

.cloud-black {
    color: var(--m-bright);
    border-left-color: var(--m-dim);
    background: linear-gradient(180deg, #000500 0%, #000a04 100%);
    box-shadow: 0 0 1.2cqh rgba(0, 143, 39, 0.28), inset 0 0 2cqh rgba(0, 255, 65, 0.06);
}

.cloud-black:after {
    border-top-color: var(--m-dim);
    border-right-color: var(--m-dim);
}
#summary-screen {
    position: absolute;
    top: 0px;
    width: 90cqw;
    margin-left: 5%;
    text-align: center;
    padding-bottom: 8cqh;
}

#summary-chart {
    background-color: #8d9ff7;
    width: 30cqh;
    height: 20cqh;
}

#summary-top-part {
    display: inline-block;
    margin-top: 5cqh;
    text-shadow: none;
}

#summary-recap {
    margin-bottom: 4cqh;
    width: 100%;
}

#save-screen {
    text-align: center;
    margin: 0 5% 0 5%;
}

#qr-code {
    width: 100%;
    margin-top: 3cqh;
    position: relative;
    right: 0px;
}

#qr-code canvas {
    width: 30cqh;
    height: 30cqh;
}

.summary-item {
    font-family: var(--font-ui);
    font-size: 0.5em;
    text-align: center;
    color: var(--m-dim);
    letter-spacing: 0.08em;
    font-weight: bolder;
    margin-bottom: 5cqh;
    padding: 0.5cqh;
    display: inline-grid;
    width: 12cqh;
}

.summary-item-score {
    width: 20cqh !important;
}

#summary-score {
    font-size: 3em;
    color: var(--m-green);
    text-shadow: 0 0 0.25em rgba(0, 255, 65, 0.8);
}

/* The big numbers read in their status colour, the label stays dim */
#summary-good-answers,
#summary-bad-answers,
#summary-no-answers,
#summary-longest-streak,
#summary-average-answer-time {
    color: var(--m-green);
    text-shadow: 0 0 0.25em rgba(0, 255, 65, 0.6);
}

#summary-bad-answers {
    color: var(--m-red);
    text-shadow: 0 0 0.25em rgba(253, 52, 86, 0.6);
}

#summary-no-answers {
    color: #7f9c88;
    text-shadow: none;
}

#summary-longest-streak,
#summary-bad-answers,
#summary-good-answers,
#summary-average-answer-time,
#summary-no-answers {
    font-size: 2em;
}

#summary-questions {
    color: var(--m-green);
    font-size: 1em;
    user-select: auto;
    margin-top: 0px;
}

.row {
    width: 100%;
}

.summary-questions-table {
    font-family: var(--font-ui);
    color: var(--m-green);
    color: white;
    font-size: 0.6em;
    min-width: 100%;
    text-shadow: none;
}

h1,
h2,
h1,
h2,
h3 {
    color: var(--m-green);
    text-align: center;
    width: 100%;
    font-family: var(--font-ui);
    font-weight: bold;
    letter-spacing: 0.06em;
    text-shadow: 0 0 0.35em rgba(0, 255, 65, 0.7);
}

h1 {
    text-transform: uppercase;
}

/* Terminal section marker on screen titles */
h1:before {
    content: '> ';
    color: var(--m-dim);
}

h3 {
    font-size: 0.8em;
}

h2 {
    font-size: 1.2em;
}

h1 {
    font-size: 2em;
}

path.arrow {
    stroke: #fff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-questions-arrow path.arrow {
    stroke: var(--m-green);
    fill: none;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.8));
}

.summary-questions-arrow {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    height: 15cqh;
    overflow: hidden;
    align-items: center;
    pointer-events: none;
    animation: move-down 1s ease-in alternate infinite;
}

.hg-button {
    background: rgba(0, 255, 65, 0.07) !important;
    border: 1px solid var(--m-line) !important;
    border-bottom-width: 1px !important;
    border-radius: 0 !important;
    color: var(--m-green) !important;
    font-family: var(--font-ui) !important;
    text-shadow: 0 0 0.3em rgba(0, 255, 65, 0.6);
    font-size: 1.8em !important;
    height: 2.6cqh !important;
    font-weight: bold !important;
}

.hg-button-backspace span img {
    /* The icon ships white - tint it to the terminal green */
    filter: brightness(0) saturate(100%) invert(62%) sepia(85%) saturate(2500%) hue-rotate(96deg) brightness(115%) contrast(105%);
    width: 4cqh;
}

.summary-questions-table td {
    padding: 0px 0.5cqw 2.6cqh 0.5cqw;
    /* Recap rows repeat the question label and its explanation, so they carry the
       same long identifiers as the falling panels. */
    overflow-wrap: break-word;
}

.summary-questions-table span.correct-answer {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.25em;
    color: #fff9;
    font-size: .8em;
}

.bad-answer {
    background-color: #d31400;
    color: white;
}

.good-answer-text {
    color: #2fcf8f;
}

.bad-answer-text {
    color: #ff5166;
}

.miss-answer-text {
    color: #fff;
}

.good-answer {
    background-color: green;
    color: white;
}

.no-answer {
    background-color: #8d8b8b;
    color: white;
}

.icon-answer {
    max-width: 5cqh;
    max-height: 5cqh;
}

/* Sizing only - the terminal skin for these lives in the button block above */
#toggle-summary-button-1,
#toggle-summary-button-2,
#next-player,
#skip,
#add-to-leaderboard {
    font-size: 1.2em;
    line-height: 1.5;
    margin: 2cqh auto;
}

#skip {
    font-size: 2rem !important;
    margin-top: 3cqh;
    opacity: 0.5;
}

#save-game-screen {
    text-align: center;
    width: 95%;
    margin: auto;
    z-index: 99;
}

#player-name {
    background: var(--m-panel-solid);
    border: 1px solid var(--m-green);
    border-radius: 0;
    color: var(--m-green) !important;
    font-family: var(--font-ui);
    letter-spacing: 0.25em;
    text-align: center;
    box-shadow: 0 0 1.5cqh rgba(0, 255, 65, 0.25), inset 0 0 1.5cqh rgba(0, 255, 65, 0.08);
    font-size: 2em;
    text-align: center;
    margin-bottom: 1cqh;
    margin-top: 2vhs;
    width: 99%;
    min-height: 3%;
}

.simple-keyboard {
    background-color: transparent !important;
    font-size: 1.3em;
}

.hg-standardBtn,
.hg-functionBtn {
    height: 5cqh !important;
    font-size: 0.6em !important;
}

/* The animated cloud layers are gone; js/matrix-rain.js paints this canvas. */
/* Dim the rain while a question is on screen so text stays readable */
#matrix-rain.dimmed {
    opacity: 0.35;
    transition: opacity 0.6s ease;
}

#matrix-rain.clouds,
#matrix-rain.show {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* A CRT vignette + scanlines over everything, under the UI */
.color-orange {
    color: orange;
}

.color-green {
    color: var(--m-green);
}

.color-red {
    color: var(--m-red);
}

.color-gray {
    color: #7f9c88;
}

.upper_case {
    text-transform: uppercase;
}

/* Short share code shown under the QR - the handle a player can read out */
#game-code {
    margin-top: 2cqh;
    text-align: center;
}

.game-code-caption {
    font-size: 0.6em !important;
    color: var(--m-dim) !important;
    text-shadow: none !important;
    margin-bottom: 1cqh;
}

#game-code-link {
    display: inline-block;
    padding: 1cqh 2.5cqw;
    border: 1px solid var(--m-green);
    background: rgba(0, 255, 65, 0.08);
    box-shadow: 0 0 1.4cqh rgba(0, 255, 65, 0.3), inset 0 0 1.5cqh rgba(0, 255, 65, 0.08);
    font-family: var(--font-ui);
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.1em;
    cursor: pointer;
    white-space: nowrap;
}

#game-code-link:hover,
#game-code-link:active {
    background: rgba(0, 255, 65, 0.2);
    box-shadow: 0 0 2.4cqh rgba(0, 255, 65, 0.55), inset 0 0 2cqh rgba(0, 255, 65, 0.15);
}

/* The event name is context; the code is the thing you read out */
#game-code-event {
    color: var(--m-dim);
    font-size: 0.6em;
    text-transform: uppercase;
}

#game-code-value {
    color: var(--m-bright);
    font-size: 1em;
    text-shadow: 0 0 0.4em rgba(0, 255, 65, 0.9);
}

#thank-you-screen {
    text-align: center;
    z-index: 99;
    width: 90%;
    margin: auto;
}

@keyframes move-down {
    0% {
        transform: translateY(-15%);
        opacity: .7
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes moving-right-animation {
    to {
        transform: translateX(-180cqh);
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(.3);
        opacity: 0
    }
}

.fade-in {
    animation: fade-in 2s linear 1;
}

.fade-in-2 {
    animation: fade-in-2 3s linear 1;
}

.fade-in-3 {
    animation: fade-in-3 1s linear 1;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(5cqh);
    }

    10% {
        transform: translateY(0cqh);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-2 {
    0% {
        opacity: 0;
        transform: translateY(60cqh);
    }

    40% {
        transform: translateY(0cqh);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-3 {
    0% {
        opacity: 0;
        transform: translateY(-20cqh);
    }

    40% {
        transform: translateY(0cqh);
    }

    100% {
        opacity: 1;
    }
}

@keyframes move-question {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    35% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    80% {
        transform: translate(-14cqw, 13cqh) scale(0.6);
        opacity: 0.95;
    }

    100% {
        transform: translate(-14cqw, 16cqh) scale(0.5);
        opacity: 0;
    }
}

@keyframes move-hand {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    25% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    35% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    80% {
        transform: translate(-14cqw, 13cqh) scale(0.85);
        opacity: 1;
    }

    100% {
        transform: translate(-14cqw, 16cqh) scale(0.8);
        opacity: 0;
    }
}

@keyframes zoom-in-bucket {
    from {
        transform: scale(1);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes zoom-in-text {
    from {
        transform: scale(0);
        opacity: 0.5;
    }

    80% {
        transform: scale(1.8);
        opacity: 1;
    }

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

@keyframes zoom-out-text {
    from {
        transform: scale(2);
        opacity: 1;
    }

    80% {
        transform: scale(0);
        opacity: 0;
    }

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

.fade-score {
    animation: fade-score 1s forwards 1;
}

@keyframes fade-score {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translateY(-15cqh) scale(1.3);
    }

    100% {
        opacity: 0;
    }
}

@keyframes show-top-menu {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.hg-theme-default .hg-row {
    margin-bottom: 20px !important;
}

.hg-theme-default {
    background: rgba(0, 12, 4, 0.9) !important;
    border: 1px solid var(--m-line);
    border-radius: 0 !important;
    max-width: 100%;
    text-shadow: none;
    margin: auto;
}

.stars2 {
    opacity: 0;
    animation: show-stars 0.5s linear 1;
}

@keyframes show-stars {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(2) translateY(-10cqh);
    }

    100% {
        opacity: 0;
        transform: scale(2) translateY(-10cqh);
    }
}

.star-particles {
    width: 15cqh;
    height: 15cqh;
    position: absolute;
    border-radius: 50%;
    color: #eee;
    font-family: monospace;
    z-index: 5;
    left: 5cqh;
    top: -7cqh;
}

.stars_shape {
    position: absolute;
    width: 4cqh;
    height: 4cqh;
    transform: scale(0.8);
}

.stars_cir {
    position: absolute;
    border-radius: 50%;
    z-index: 5;
}

.explanation {
    font-size: 0.8em;
    color: white;
    font-style: italic;
}

.hard-mode {
    font-size: 0.75em;
    margin-top: 5cqh;

}

#enable-hard-mode {
    font-size: 1em;
}

.hard-mode input {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 18px;
    width: 1.1em;
    height: 1.1em;
    border: 1px solid var(--m-green);
    background: rgba(0, 255, 65, 0.08);
    position: relative;
    top: 0.15em;
    cursor: pointer;
}

.hard-mode input:checked {
    background: rgba(0, 255, 65, 0.25);
    box-shadow: 0 0 1cqh rgba(0, 255, 65, 0.6);
}

.hard-mode input:checked:after {
    content: 'x';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-green);
    font-family: var(--font-ui);
    font-weight: bold;
    line-height: 1;
}

.hard-mode label {
    cursor: pointer;
}

#admin-toolbar {
    /* Absolute, not fixed: container-type does not make the stage a containing
       block for fixed children, so a fixed toolbar would float off into the
       letterbox area when the window is not 9:16. */
    position: absolute;
    right: 0px;
    text-align: left;
    width: 100%;
    z-index: 99999;
    top: 0px;
}

.admin-architecture {
    /* Official Sonar logo is 256x64, so size on width and let height follow */
    width: 18cqw;
    height: auto;
    margin: 1cqh 0 0 1.6cqw;
    cursor: pointer;
}

#architecture-diagram {
    height: 70%;
    width: 90%;
    margin: auto;
    border: 1px solid var(--m-green);
    box-shadow: 0 0 3cqh rgba(0, 255, 65, 0.35);
    background-color: white;
    z-index: 99999;
    position: relative;
}

#architecture-diagram img {
    max-width: 100%;
}

#close-architecture {
    font-size: 1.6cqh;
    padding: 1cqh 2cqw;
    border-radius: 0;
    background-color: cornsilk;
    margin: 20px auto;
    text-align: center;
    position: relative;
    display: flow;
    border: 2px solid black;
    background: white;
    color: black;
    font-weight: bold;
}