/* =============================================================================
   game.css - Bridge Shooter's pages
   =============================================================================
   The game under the top bar: the canvas with its control bar, the side
   cards (shop, achievements, cheat codes, the arena's spawn panel) and the
   reset of all progress under them, the full guide card and the picture
   editor, plus the bits of the leaderboard, replay, progress, moderation,
   Full access, access codes and privacy pages theme.css does not already
   style. Everything uses the style.css and theme.css tokens, so it follows
   the brand and both color modes. The game world itself is drawn on the
   canvas in its own colors.

   Contents
     0. Tokens        the game pages' elevations, accent, focus ring, motion
     1. Layout        the game row: the game and the side column (note,
                      cards)
     2. Canvas        the playfield and its width steps, the mode picker, the
                      Full access tag, the control bar, fullscreen
     3. Cards         the side cards, their folding headings and icons,
                      small controls
     4. Shop          rows and cells, notices, resets
     5. Checklists    achievements and cheat codes
     6. Dialogs       How to play and the picture editor
     7. Pages         the game pages' titles, numbers and buttons (primary,
                      secondary, danger), surfaces, notes, notices, tabs,
                      board rows (medals, initials, the viewer's row),
                      moderation actions, the notice pages (a replay that is
                      gone, an unknown address), the access, access codes and
                      privacy pages
     8. Engagement    the game over buttons over the canvas, the golden skin
                      row, name marks and season badges, the
                      replay's call to play, the access page's options with
                      the recommended one, prices and checklists, gifts
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Tokens
   The game pages' own scale on top of the theme's. One radius scale: the
   theme's --radius for controls, --radius-lg for surfaces, and a pill for
   tags. Two elevations for surfaces at rest and raised, the accent and its
   soft wash, the focus ring and the length of every transition. Each is
   built on tokens that flip with the color mode by themselves (--black-rgb)
   or never flip (--shadow-rgb, --amber-rgb), so none needs a rule of its
   own for dark or light.
   -------------------------------------------------------------------------- */

:root {
    --game-radius-pill: 999px;
    --game-elevation-1: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 4px 12px -4px rgba(var(--shadow-rgb), .14);
    --game-elevation-2: 0 2px 4px rgba(var(--shadow-rgb), .08), 0 12px 28px -8px rgba(var(--shadow-rgb), .28);
    --game-accent: var(--amber-strong);
    --game-accent-soft: rgba(var(--amber-rgb), .12);
    --game-wash: rgba(var(--black-rgb), .05);
    --game-motion: .15s ease-out;
}

/* -----------------------------------------------------------------------------
   1. Layout
   A grid row of two cells: the game, and the side column (the note on
   how progress is kept, then the side cards with the reset of all
   progress under them). Row > .custom-column > .inner-column: the inner
   column pads half the 16px gutter and the row takes the outer half
   back.
   By default the cells stack in that order, each centred and as wide as
   the canvas, so the canvas and its control bar come first and the note
   sits under them. From 1024px wide, wherever the canvas at its size and
   a side column of at least 360px fit side by side (game-layout-split,
   set by game.js), the side column moves to the game's right with the
   play page's mode picker at its top, 400px wide, and the game stays
   centred in the rest whatever the cards do; an open card only lengthens
   the page.
   -------------------------------------------------------------------------- */

.game-root {
    margin-top: 8px;
}

/* The game pages keep their title tight, so the canvas starts high */
.game-page .page-header {
    margin-bottom: 16px;
}

/* The play page gives the first screen to the game: its title stays in
   the page for screen readers and search engines but takes no room (the
   usual visually hidden pattern), and the canvas starts 8px under the top
   bar. The replay page does the same, the player's name heading its side
   panel. */
#app > .custom-container.game-play-page,
#app > .custom-container.game-replay-page {
    padding-top: 8px;
}

.game-play-page .page-header,
.game-replay-page .page-header {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.game-play-page .game-root,
.game-replay-page .game-root {
    margin-top: 0;
}

.game-layout {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.game-layout > .custom-column {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.game-layout > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 8px;
}

/* Side by side (game-layout-split, set by game.js, fitGameToWindow(),
   from 1024px wide wherever the canvas at its size and a 360px side
   column both fit): the side column takes a fixed 400px, shrinking to no
   less than 360px, and the game column the rest, the canvas centred in
   it. */
.game-layout.game-layout-split {
    flex-wrap: nowrap;
}

.game-layout-split > .game-layout-side {
    flex: 0 1 400px;
    width: 400px;
    min-width: 360px;
}

.game-layout-split > .game-layout-main {
    flex: 1 1 0%;
    width: auto;
}

.game-layout-split .game-layout-side > .inner-column {
    align-items: stretch;
}

.game-layout-split .game-layout-side .game-sized {
    max-width: none;
}

/* On the play page side by side, the page itself never scrolls: the game
   column (canvas and control bar) fills the window under the top bar, and
   the side column is a panel as tall as it with a scroll of its own (its
   inner column laid over it), a thin scrollbar, and a soft fade at its
   bottom edge while more lies below (game-panel-more, game.js,
   updateSidePanel()). The footer leaves the play page there, so nothing
   makes the page scroll. */
.game-play-page .game-layout-split > .game-layout-side {
    position: relative;
}

.game-play-page .game-layout-split .game-layout-side > .inner-column {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--black-rgb), .25) transparent;
}

.game-play-page .game-layout-split .game-layout-side::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 32px;
    background: linear-gradient(rgba(var(--light-rgb), 0), var(--light));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--game-motion);
}

.game-play-page .game-layout-split .game-layout-side.game-panel-more::after {
    opacity: 1;
}

body:has(.game-play-page .game-layout-split) .footer {
    display: none;
}

/* The Credits card's text (game-pages.js, getGameCreditsCardHTML()) */
.game-credits p {
    margin: 0 0 10px 0;
    font-size: .9rem;
    line-height: 1.5;
}

.game-credits p:last-child {
    margin-bottom: 0;
}

/* The copyright line and footer_links under the cards, small and muted,
   only in the split layout, where the footer is gone */
.game-side-credits-footer {
    display: none;
    margin: 8px 0 0 0;
    color: var(--gray);
    font-size: .8rem;
}

.game-play-page .game-layout-split .game-side-credits-footer {
    display: block;
}

.game-side-credits-footer p {
    margin: 0;
}

.game-side-credits-footer .footer-links {
    margin-top: 4px;
}

.game-side-credits-footer a {
    color: inherit;
}

#app > .custom-container.game-play-page:has(.game-layout-split) {
    padding-bottom: 8px;
}

/* Focus mode (game-focus, game.js, updateFocusMode()): while a run is
   played on the play page side by side, the side column fades out and
   gives its width back, so the canvas, at the same size, glides to the
   middle of the page; a pause, the game over screen or the start screen
   bring the column back. Hidden, its cards keep their state and leave the
   tab order. Still for reduced motion (section 8). */
.game-play-page .game-layout-split > .game-layout-side {
    transition: flex-basis .2s ease-out, min-width .2s ease-out, opacity .2s ease-out, visibility .2s;
}

.game-play-page .game-layout-split.game-focus > .game-layout-side {
    flex-basis: 0px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
}

/* On big screens the game pages widen past the public pages' 1440px
   container, so the canvas a tall window calls for fits its column. The
   top bar and the footer widen with them, so the page's edges line up
   with the logo. */
@media (min-width: 1920px) {
    .custom-container.game-page,
    body:has(.game-page) .header .custom-container,
    body:has(.game-page) .footer .custom-container {
        max-width: 1856px;
    }
}

@media (min-width: 2560px) {
    .custom-container.game-page,
    body:has(.game-page) .header .custom-container,
    body:has(.game-page) .footer .custom-container {
        max-width: 2496px;
    }
}

/* The cards column holds its cards one under the other */
.game-cards {
    width: 100%;
    min-width: 0;
}

/* While a signed-in player's progress loads, the mount keeps its room */
.game-loading {
    min-height: 320px;
}

/* -----------------------------------------------------------------------------
   2. Canvas
   The canvas keeps its internal 480 px width and is shown as wide as its
   column allows, up to the width the window's height calls for: game.js
   (fitGameToWindow) puts a game-w-<pixels> class on the layout row, in
   16px steps from 304px to 1600px - on the play page the size that fills
   the height under the top bar with the canvas and its control bar, never
   past the stand-alone game's size (the window's height less 60px, in the
   canvas's shape); on the replay and arena pages the larger of that and
   the stand-alone size up to 720px. Everything marked .game-sized takes
   that width as its maximum: the canvas, and where the columns stack the
   mode picker, the note and the cards.
   -------------------------------------------------------------------------- */

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* The stage: the canvas, and what is laid over it (the loader, the Start
   button, the game over buttons), in one box as wide as the canvas. A game
   is tapped fast and often: no tap flashes the stage grey (iOS Safari's tap
   highlight), and a long press neither selects anything nor opens the
   copy callout. */
.game-stage {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The fields on the stage (the Offline name entry) stay typeable and
   selectable: iOS Safari will not type into a field under user-select:
   none */
.game-stage input,
.game-stage textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

#game-canvas {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Dragging steers the player; the browser must not treat it as
       scrolling or zooming. */
    touch-action: none;
}

/* A ring only for keyboard focus */
#game-canvas:focus {
    outline: none;
}

#game-canvas:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* The mode picker above the canvas on the play page: Ranked, Daily
   Challenge or Offline, three thirds of one segmented control on a
   soft track; the chosen third sits on the accent with a check. Each
   option holds a label and at most one short line under it (the
   challenge's format), both kept to one line with an ellipsis, so no
   language or format name ever wraps or is cut off. Below 768px the labels
   are the short ones ("Normal", "Daily", "Offline"). During a run and on
   its game over screen it takes no room (game.js, updateModePicker), so no
   empty band stays above the canvas; from 1024px it sits at the top of the
   side column instead. */
.game-mode-picker {
    position: relative;
    display: flex;
    width: 100%;
    height: 48px;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--game-wash);
    overflow: hidden;
}

.game-mode-picker-away {
    display: none;
}

/* From 1024px the picker heads the side column (game.js,
   placeModePicker), as wide as the column's content */
.game-layout-side .game-mode-picker {
    margin-bottom: 12px;
}

.game-root button.game-mode-option {
    position: relative;
    display: flex;
    flex: 0 0 33.333%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33.333%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--black);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    transition: color var(--game-motion), background-color var(--game-motion);
}

/* The chosen mode: lit on the accent, which reads as chosen in both
   color modes */
.game-root button.game-mode-option[aria-pressed="true"] {
    background: var(--game-accent);
    box-shadow: var(--game-elevation-1);
    color: var(--on-accent);
}

.game-root button.game-mode-option[aria-pressed="false"]:not([disabled]):hover {
    background: var(--game-wash);
}

.game-root button.game-mode-option:not([disabled]):active {
    background-image: linear-gradient(rgba(var(--shadow-rgb), .12), rgba(var(--shadow-rgb), .12));
}

.game-root button.game-mode-option:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 0;
}

/* The option's two lines: each one line at most, ending in an ellipsis */
.game-mode-label,
.game-mode-sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-mode-sub {
    margin-top: 2px;
    font-size: .7rem;
    font-weight: 400;
}

/* Tighter in the picker, so the longest tag (es "Acceso completo") fits
   a third of a 390px screen */
.game-mode-sub .game-access-tag {
    margin-inline-start: 0;
    padding: 0 4px;
    font-size: .62rem;
    line-height: 1.3;
}

.game-mode-lock {
    margin-inline-end: 4px;
}

/* The small tag beside a feature only Full access has: the mode picker's
   Daily Challenge, the full guide card's rows */
.game-access-tag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 0 8px;
    border: 1px solid var(--amber);
    border-radius: var(--game-radius-pill);
    background: var(--game-accent-soft);
    color: var(--amber-strong);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* In a How to play row the tag always takes its own line under the title,
   flush with the title and the text, whatever the width */
.tut-row-title .game-access-tag {
    display: table;
    margin: 4px 0 0 0;
}

.game-sized {
    width: 100%;
    max-width: 480px;
}

.game-w-304 .game-sized {
    max-width: 304px;
}

.game-w-320 .game-sized {
    max-width: 320px;
}

.game-w-336 .game-sized {
    max-width: 336px;
}

.game-w-352 .game-sized {
    max-width: 352px;
}

.game-w-368 .game-sized {
    max-width: 368px;
}

.game-w-384 .game-sized {
    max-width: 384px;
}

.game-w-400 .game-sized {
    max-width: 400px;
}

.game-w-416 .game-sized {
    max-width: 416px;
}

.game-w-432 .game-sized {
    max-width: 432px;
}

.game-w-448 .game-sized {
    max-width: 448px;
}

.game-w-464 .game-sized {
    max-width: 464px;
}

.game-w-480 .game-sized {
    max-width: 480px;
}

.game-w-496 .game-sized {
    max-width: 496px;
}

.game-w-512 .game-sized {
    max-width: 512px;
}

.game-w-528 .game-sized {
    max-width: 528px;
}

.game-w-544 .game-sized {
    max-width: 544px;
}

.game-w-560 .game-sized {
    max-width: 560px;
}

.game-w-576 .game-sized {
    max-width: 576px;
}

.game-w-592 .game-sized {
    max-width: 592px;
}

.game-w-608 .game-sized {
    max-width: 608px;
}

.game-w-624 .game-sized {
    max-width: 624px;
}

.game-w-640 .game-sized {
    max-width: 640px;
}

.game-w-656 .game-sized {
    max-width: 656px;
}

.game-w-672 .game-sized {
    max-width: 672px;
}

.game-w-688 .game-sized {
    max-width: 688px;
}

.game-w-704 .game-sized {
    max-width: 704px;
}

.game-w-720 .game-sized {
    max-width: 720px;
}

/* Past 720px the canvas grows only on tall screens, filling the height
   under the top bar (gameWidthUnderHeader() in game.js) */

.game-w-736 .game-sized {
    max-width: 736px;
}

.game-w-752 .game-sized {
    max-width: 752px;
}

.game-w-768 .game-sized {
    max-width: 768px;
}

.game-w-784 .game-sized {
    max-width: 784px;
}

.game-w-800 .game-sized {
    max-width: 800px;
}

.game-w-816 .game-sized {
    max-width: 816px;
}

.game-w-832 .game-sized {
    max-width: 832px;
}

.game-w-848 .game-sized {
    max-width: 848px;
}

.game-w-864 .game-sized {
    max-width: 864px;
}

.game-w-880 .game-sized {
    max-width: 880px;
}

.game-w-896 .game-sized {
    max-width: 896px;
}

.game-w-912 .game-sized {
    max-width: 912px;
}

.game-w-928 .game-sized {
    max-width: 928px;
}

.game-w-944 .game-sized {
    max-width: 944px;
}

.game-w-960 .game-sized {
    max-width: 960px;
}

.game-w-976 .game-sized {
    max-width: 976px;
}

.game-w-992 .game-sized {
    max-width: 992px;
}

.game-w-1008 .game-sized {
    max-width: 1008px;
}

.game-w-1024 .game-sized {
    max-width: 1024px;
}

.game-w-1040 .game-sized {
    max-width: 1040px;
}

.game-w-1056 .game-sized {
    max-width: 1056px;
}

.game-w-1072 .game-sized {
    max-width: 1072px;
}

.game-w-1088 .game-sized {
    max-width: 1088px;
}

.game-w-1104 .game-sized {
    max-width: 1104px;
}

.game-w-1120 .game-sized {
    max-width: 1120px;
}

.game-w-1136 .game-sized {
    max-width: 1136px;
}

.game-w-1152 .game-sized {
    max-width: 1152px;
}

.game-w-1168 .game-sized {
    max-width: 1168px;
}

.game-w-1184 .game-sized {
    max-width: 1184px;
}

.game-w-1200 .game-sized {
    max-width: 1200px;
}

.game-w-1216 .game-sized {
    max-width: 1216px;
}

.game-w-1232 .game-sized {
    max-width: 1232px;
}

.game-w-1248 .game-sized {
    max-width: 1248px;
}

.game-w-1264 .game-sized {
    max-width: 1264px;
}

.game-w-1280 .game-sized {
    max-width: 1280px;
}

.game-w-1296 .game-sized {
    max-width: 1296px;
}

.game-w-1312 .game-sized {
    max-width: 1312px;
}

.game-w-1328 .game-sized {
    max-width: 1328px;
}

.game-w-1344 .game-sized {
    max-width: 1344px;
}

.game-w-1360 .game-sized {
    max-width: 1360px;
}

.game-w-1376 .game-sized {
    max-width: 1376px;
}

.game-w-1392 .game-sized {
    max-width: 1392px;
}

.game-w-1408 .game-sized {
    max-width: 1408px;
}

.game-w-1424 .game-sized {
    max-width: 1424px;
}

.game-w-1440 .game-sized {
    max-width: 1440px;
}

.game-w-1456 .game-sized {
    max-width: 1456px;
}

.game-w-1472 .game-sized {
    max-width: 1472px;
}

.game-w-1488 .game-sized {
    max-width: 1488px;
}

.game-w-1504 .game-sized {
    max-width: 1504px;
}

.game-w-1520 .game-sized {
    max-width: 1520px;
}

.game-w-1536 .game-sized {
    max-width: 1536px;
}

.game-w-1552 .game-sized {
    max-width: 1552px;
}

.game-w-1568 .game-sized {
    max-width: 1568px;
}

.game-w-1584 .game-sized {
    max-width: 1584px;
}

.game-w-1600 .game-sized {
    max-width: 1600px;
}

/* The bar under the canvas: How to play, sound, volume, fullscreen. It
   stays compact, so canvas and bar share the first screen:
   - small buttons, two lines at most on a phone, under 700px high;
   - one line of compact buttons, 36px high, from 700px high;
   - the same line led by the movement hint on a big screen, from 1280px
     wide and 1200px high, where the canvas is wide enough for both. */
.game-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 480px;
    margin-top: 0;
    font-size: .75rem;
}

/* From 1280px the bar may be wider than the canvas, so its four controls
   keep to one line in every language */
@media (min-width: 1280px) {
    .game-controls {
        max-width: 560px;
    }
}

.game-controls > * {
    margin-top: 4px;
    margin-inline-end: 8px;
}

.game-controls > *:last-child {
    margin-inline-end: 0;
}

/* The movement hint is about keys and mice: phones leave it out, and so
   do short screens, where the full guide card tells it */
.game-controls-hint {
    display: none;
    flex: 0 0 100%;
    text-align: center;
    color: var(--gray);
}

/* The bar's buttons are quiet secondary buttons, so the canvas stays the
   one thing that calls for attention */
.game-root .game-controls button.game-control {
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.game-root .game-controls button.game-control:not([disabled]):hover {
    border-color: rgba(var(--black-rgb), .3);
    background-image: linear-gradient(var(--game-wash), var(--game-wash));
}

.game-volume {
    display: flex;
    align-items: center;
}

.game-volume > * {
    margin-inline-end: 4px;
}

.game-volume > *:last-child {
    margin-inline-end: 0;
}

/* The core gives every input a field's padding, border and background;
   on a slider they shrink the track inside the box, so at 100% the
   thumb stops short of the end. The slider drops them and keeps only
   its native track. */
#volume-slider {
    width: 64px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    accent-color: var(--brand);
}

#volume-slider:focus {
    box-shadow: none;
}

#volume-value {
    width: 32px;
    text-align: end;
}

/* On a phone the core's floating theme button sits over the bottom end
   corner of the screen, which the bar under the canvas can reach (on a
   short screen the canvas cannot shrink further, so the bar may stand
   anywhere near the bottom): on the play page the bar keeps the button's
   column free, 56px (the button's 48px and its 16px offset, less the
   column's 8px padding), on both sides so the bar stays centred under
   the canvas. In the rest it is two tidy rows of finger-sized controls:
   How to play and Mute side by side, as wide as each other, then the
   volume, its slider taking the room left, and Fullscreen where the
   browser has it (never on an iPhone). From 768px the bar is one centred
   line, well away from that corner. */
.game-play-page .game-controls {
    margin-top: 8px;
    padding-inline: 56px;
}

.game-play-page .game-controls > #tutorial-button,
.game-play-page .game-controls > #mute-button {
    flex: 1 1 40%;
}

/* The volume starts the second row (its basis leaves no room beside the
   two buttons) and leaves Fullscreen its 120px there; on a screen too
   narrow for both, Fullscreen goes to a third row of its own */
.game-play-page .game-controls > .game-volume {
    flex: 1 1 calc(100% - 120px);
}

.game-play-page .game-controls #volume-slider {
    flex: 1 1 auto;
    width: auto;
    min-width: 48px;
}

.game-play-page .game-controls #volume-value {
    width: auto;
    min-width: 32px;
}

.game-play-page .game-root .game-controls button.game-control {
    min-height: 36px;
    padding: 4px 12px;
    font-size: .8rem;
}

@media (min-width: 768px) {
    .game-play-page .game-controls {
        margin-top: 0;
        padding-inline: 0;
    }

    .game-play-page .game-controls > #tutorial-button,
    .game-play-page .game-controls > #mute-button,
    .game-play-page .game-controls > .game-volume {
        flex: 0 0 auto;
    }

    .game-play-page .game-controls #volume-slider {
        flex: 0 0 auto;
        width: 64px;
        min-width: 0;
    }

    .game-play-page .game-controls #volume-value {
        width: 32px;
    }

    .game-play-page .game-root .game-controls button.game-control {
        min-height: 0;
        padding: 0 8px;
        font-size: .75rem;
    }
}

@media (min-width: 768px) and (min-height: 700px) {
    .game-play-page .game-root .game-controls button.game-control {
        padding: 4px 12px;
        font-size: .8rem;
    }
}

@media (min-height: 700px) {
    .game-controls {
        min-height: 36px;
        font-size: .8rem;
    }

    .game-root .game-controls button.game-control {
        padding: 4px 12px;
        font-size: .8rem;
    }
}

@media (min-width: 1280px) and (min-height: 1200px) {
    .game-controls {
        max-width: none;
        flex-wrap: nowrap;
    }

    .game-controls-hint {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        margin-inline-end: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* The replay controls, in place of the bar above while a replay is
   watched (game.js, replayControlsBuild): the power line, the timeline
   with its marks under it, then one row: play or pause, the time, the
   speeds as one segmented control, Jump to the end and Restart. As wide
   as the canvas. The timeline's thumb is 16px wide and its centre travels
   from 8px inside one end of the track to 8px inside the other, so the
   power line and the marks are inset by those 8px on both sides: a mark
   sits exactly where the thumb stands at its moment. */
.game-replay {
    margin-top: 4px;
    font-size: .8rem;
}

.game-replay-track {
    width: 100%;
}

.game-replay-power,
.game-replay-marks {
    display: block;
    width: calc(100% - 16px);
    height: 16px;
    margin: 0 8px;
    overflow: visible;
}

.game-replay-power polyline {
    fill: none;
    stroke: var(--game-accent);
    stroke-width: 1.5;
    opacity: .7;
    vector-effect: non-scaling-stroke;
}

.game-root .game-replay input.game-replay-seek {
    display: block;
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.game-replay-seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--black-rgb), .18);
}

.game-replay-seek::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--black-rgb), .18);
}

.game-replay-seek::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--game-accent);
}

.game-replay-seek::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--game-accent);
    box-shadow: var(--game-elevation-1);
    -webkit-appearance: none;
    appearance: none;
}

.game-replay-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--game-accent);
    box-sizing: border-box;
}

.game-replay-seek:focus {
    outline: none;
}

.game-replay-seek:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.game-replay-seek:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.game-replay-mark {
    cursor: pointer;
}

.game-replay-mark:focus {
    outline: none;
}

.game-replay-mark-area {
    fill: transparent;
}

.game-replay-mark:hover .game-replay-mark-area {
    fill: var(--game-wash);
}

.game-replay-mark:focus-visible .game-replay-mark-area {
    fill: var(--game-accent-soft);
    stroke: var(--amber);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* The marks' colours, the same in the legend: level ups green, the Blorb
   King purple, the biggest hit survived orange */
.game-replay-mark-level .game-replay-mark-tick,
.game-replay-key-level::before {
    fill: var(--green);
    background: var(--green);
}

.game-replay-mark-boss .game-replay-mark-tick,
.game-replay-key-boss::before {
    fill: var(--purple);
    background: var(--purple);
}

.game-replay-mark-hit .game-replay-mark-tick,
.game-replay-key-hit::before {
    fill: var(--orange);
    background: var(--orange);
}

.game-replay-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}

.game-replay-row > * {
    margin-top: 4px;
    margin-inline-end: 8px;
}

.game-replay-row > *:last-child {
    margin-inline-end: 0;
}

/* The speeds: one segmented control, the buttons joined, the chosen one
   on the accent */
.game-replay-speeds {
    display: inline-flex;
}

.game-root .game-replay .game-replay-speeds > button.game-replay-speed {
    border-radius: 0;
    margin-inline-start: -1px;
}

.game-root .game-replay .game-replay-speeds > button.game-replay-speed:first-child {
    margin-inline-start: 0;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}

.game-root .game-replay .game-replay-speeds > button.game-replay-speed:last-child {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}

/* Beside the side panel the row stays on one line, its gaps and paddings
   a little tighter */
@media (min-width: 1024px) {
    .game-replay-row {
        flex-wrap: nowrap;
    }

    .game-replay-row > * {
        margin-inline-end: 6px;
    }

    .game-root .game-replay .game-replay-row > button.game-control {
        padding-right: 8px;
        padding-left: 8px;
    }
}

.game-replay-time {
    min-width: 72px;
    color: var(--gray);
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.game-root .game-replay button.game-control {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.game-root .game-replay button.game-control:not([disabled]):hover {
    border-color: rgba(var(--black-rgb), .3);
    background-image: linear-gradient(var(--game-wash), var(--game-wash));
}

.game-root .game-replay button.game-replay-speed {
    position: relative;
    padding: 4px 8px;
    font-variant-numeric: tabular-nums;
}

.game-root .game-replay button.game-replay-speed[aria-pressed="true"] {
    z-index: 1;
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
}

.game-root .game-replay button.game-replay-play {
    min-width: 72px;
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
}

/* The replay page's side panel (game-pages.js, getGameReplayPanelHTML):
   the player with their marks, the run in four figures, the Daily
   Challenge it was played in with its rules, the moments of the run with
   how many of each, then Share, Play and the leaderboard. Beside the game
   from 1024px, under it on smaller screens. */
.game-replay-panel {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
}

.game-replay-player {
    display: flex;
    align-items: center;
}

.game-replay-avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline-end: 12px;
    border-radius: 50%;
    background: var(--game-accent);
    color: var(--on-accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.game-replay-who {
    min-width: 0;
}

.game-replay-name {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.game-replay-when {
    margin: 2px 0 0;
    color: var(--gray);
    font-size: .8rem;
}

.game-replay-panel .game-replay-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 12px -4px 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.game-replay-stat {
    flex: 1 1 calc(50% - 8px);
    margin: 4px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--game-wash);
}

.game-replay-panel .game-replay-stat dt {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.game-replay-panel .game-replay-stat dd {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.game-replay-stat-note {
    display: block;
    color: var(--gray);
    font-size: .75rem;
    font-weight: 400;
}

.game-replay-panel-heading {
    margin: 16px 0 6px;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.game-replay-challenge p {
    margin: 0 0 4px;
}

.game-replay-rules {
    margin: 4px 0 0;
    padding-inline-start: 18px;
    color: var(--gray);
    font-size: .85rem;
}

.game-replay-keys {
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-replay-key {
    display: flex;
    align-items: center;
    padding: 3px 0;
    font-size: .85rem;
}

.game-replay-key::before {
    content: "";
    display: inline-block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-inline-end: 8px;
    border-radius: 50%;
}

.game-replay-key-name {
    flex: 1 1 auto;
}

.game-replay-key-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.game-replay-actions {
    display: flex;
    flex-wrap: wrap;
    margin: 16px -4px 0;
}

.game-replay-actions > button {
    flex: 1 1 auto;
    margin: 4px;
}

.game-screen .game-replay-actions > button:not(.button-alt) {
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
    font-weight: 600;
}

.game-replay-panel .game-replay-cta {
    margin: 16px 0 0;
}

.game-replay-panel .game-fine-print {
    margin: 12px 0 0;
}

/* Fullscreen shows the game alone: no bar, no frame, the canvas centred
   on a dark surround. The canvas size comes from game.js, which reads the
   real screen shape. The rules stay separate because a browser drops a
   whole rule when it does not know one selector. */
#game-container:fullscreen {
    justify-content: center;
    background-color: var(--navy);
}

#game-container:-webkit-full-screen {
    justify-content: center;
    background-color: var(--navy);
}

#game-container:fullscreen .game-controls,
#game-container:fullscreen .game-replay {
    display: none;
}

#game-container:-webkit-full-screen .game-controls,
#game-container:-webkit-full-screen .game-replay {
    display: none;
}

#game-container:fullscreen #game-canvas {
    max-width: none;
    border: none;
    border-radius: 0;
}

#game-container:-webkit-full-screen #game-canvas {
    max-width: none;
    border: none;
    border-radius: 0;
}

#game-container:fullscreen .game-stage {
    width: auto;
    max-width: none;
}

#game-container:-webkit-full-screen .game-stage {
    width: auto;
    max-width: none;
}

/* -----------------------------------------------------------------------------
   3. Cards
   -------------------------------------------------------------------------- */

/* A soft surface at rest: hairline edge, the surfaces' radius and the
   first elevation; an open card is raised a step */
.side-card {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
    color: var(--black);
    font-size: .85rem;
    transition: box-shadow var(--game-motion), border-color var(--game-motion);
}

.side-card:last-child {
    margin-bottom: 0;
}

/* A folding card (missions, shop, achievements, cheat codes): the whole
   heading is its button, the card's icon, title and summary on the left,
   the chevron on the right. The button carries the card's padding, so the
   full width is clickable; the body follows with the same side padding. */
.game-card {
    padding: 0;
}

.game-card.game-card-open {
    border-color: rgba(var(--black-rgb), .16);
    box-shadow: var(--game-elevation-2);
}

.game-card-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.side-card .game-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--black);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    white-space: normal;
    text-align: start;
    cursor: pointer;
}

.side-card .game-card-toggle:hover {
    background: var(--game-wash);
}

.side-card .game-card-toggle:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: -2px;
}

/* The card's icon, in the accent on its soft wash */
.game-card-icon {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-end: 12px;
    border-radius: var(--radius);
    background: var(--game-accent-soft);
    color: var(--amber);
}

.game-card-icon .game-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.game-card-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 12px;
}

/* The count beside the title: coins, achievements earned, cheats on */
.game-card-count {
    margin-inline-start: 8px;
    color: var(--gray);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cheats switched on: worth seeing while the card is folded */
.game-card-count.game-card-warning {
    color: var(--error-text);
}

/* The chevron: a bordered square turned to point down, up when open */
.game-card-chevron {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-inline-end: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--game-motion), margin-top var(--game-motion);
}

.game-card-open .game-card-chevron {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.game-card-body {
    padding: 0 16px 16px 16px;
}

/* A card's body fades and slides in as it opens and out as it folds
   (shop.js, toggleGameCard()); still for reduced motion (section 8) */
.game-card-body.game-card-reveal {
    animation: game-card-reveal .22s ease-out;
}

.game-card-body.game-card-folding {
    animation: game-card-fold .12s ease-in forwards;
}

@keyframes game-card-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes game-card-fold {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* The heading button's press */
.side-card .game-card-toggle:active {
    background: rgba(var(--black-rgb), .1);
}

/* Small buttons inside the cards: one compact brick for prices, uploads,
   resets and toggles (the shop's own actions: section "Shop rows" at the
   end) */
.side-card button {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid var(--black);
    border-radius: var(--radius);
    font-size: .8rem;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
}

/* The arena's spawn panel: one button per row */
.game-arena-panel strong {
    display: block;
    margin: 8px 0 4px 0;
}

.game-arena-panel strong:first-child {
    margin-top: 0;
}

.game-arena-panel button {
    display: block;
    width: 100%;
    margin-bottom: 4px;
}

/* -----------------------------------------------------------------------------
   4. Shop
   -------------------------------------------------------------------------- */

/* The coins in the shop card's heading */
.game-card-count.shop-coins {
    color: var(--amber);
    font-weight: 700;
}

/* The first line of each card's body, under its heading */
.shop-hint {
    margin: 0 0 12px 0;
    color: var(--gray);
}

.shop-legend {
    margin: 0 0 8px 0;
    color: var(--gray);
    font-size: .75rem;
}

/* Why an upload was refused, or that it went in */
.shop-notice {
    margin: 0 0 12px 0;
    padding: 8px;
    border: 1px solid var(--error-text);
    border-radius: var(--radius);
    color: var(--error-text);
}

.shop-notice-ok {
    border-color: var(--green);
    color: var(--black);
}

.shop-section {
    display: block;
    margin: 12px 0 8px 0;
    font-size: .9rem;
}

.side-card .shop-reset {
    display: block;
    width: 100%;
    margin-top: 12px;
}

/* Reset all progress, under the three cards and as wide as them: a small
   outlined danger button, and when pressed an inline question with a
   safe answer and a red one */
.game-wipe button {
    display: block;
    padding: 4px 8px;
    border: 1px solid var(--black);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-size: .8rem;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
}

/* The danger button, as on the game's pages: the error color's outline,
   tinted on hover */
.game-wipe .game-wipe-button {
    width: 100%;
    padding: 8px 12px;
    border-color: var(--error-text);
    background: transparent;
    color: var(--error-text);
    font-weight: 600;
}

.game-wipe .game-wipe-button + .game-wipe-button {
    margin-top: 8px;
}

.game-wipe .game-wipe-button:not([disabled]):hover {
    background-color: rgba(var(--rose-rgb), .1);
    background-image: none;
}

.shop-wipe-ask {
    padding: 8px 12px;
    border: 1px solid var(--error-text);
    border-radius: var(--radius);
    background: var(--white);
    font-size: .85rem;
}

.shop-wipe-warning {
    margin: 0 0 8px 0;
    color: var(--error-text);
}

.shop-wipe-choices {
    display: flex;
}

.shop-wipe-choices button {
    flex: 1 1 0;
    margin-inline-end: 8px;
}

.shop-wipe-choices button:last-child {
    margin-inline-end: 0;
}

.game-wipe .shop-wipe-yes {
    border-color: var(--red);
    background: var(--red);
    color: var(--on-accent);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   5. Checklists
   -------------------------------------------------------------------------- */

.ach-row,
.cheat-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.ach-box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-inline-end: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .7rem;
    line-height: 14px;
    text-align: center;
}

.ach-done .ach-box {
    border-color: var(--amber-strong);
    background: var(--amber-strong);
    color: var(--on-accent);
    font-weight: 700;
}

.ach-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ach-name {
    font-weight: 700;
}

.ach-hint {
    color: var(--gray);
}

.ach-cheat {
    color: var(--amber);
    font-size: .75rem;
}

/* A mission on one line: its progress at the end, in figures that line up */
.mission-progress {
    flex: 0 0 auto;
    margin-inline-start: 8px;
    color: var(--gray);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ach-done .mission-progress {
    color: var(--amber-strong);
}

.side-card .cheat-toggle {
    flex: 0 0 48px;
    width: 48px;
    margin-inline-end: 8px;
    padding: 4px 0;
    background: var(--white);
    color: var(--black);
}

.side-card .cheat-on {
    border-color: var(--amber-strong);
    background: var(--amber-strong);
    color: var(--on-accent);
    font-weight: 700;
}

.cheat-locked {
    opacity: .45;
}

/* -----------------------------------------------------------------------------
   6. Dialogs
   The How to play walkthrough, the full guide card and the picture editor
   are native <dialog> elements opened with showModal() (tutorial.js,
   imageeditor.js), with the core .modal class. game-dialog gives each the
   modal's surface and backdrop as well, since the source edition loads
   game.css without theme.css; each one's own class sets its size,
   narrower than a core modal, and the card inside fills it.
   -------------------------------------------------------------------------- */

/* The walkthrough: the title and the step count, one large scene, its
   sentence, and a row of buttons, Skip at the start and Next at the end */
.game-walkthrough {
    max-width: 360px;
    overflow-y: auto;
}

#walkthrough-card {
    padding: 20px 20px 16px 20px;
}

.walk-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

#walkthrough-card h2 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.walk-count {
    margin: 0;
    margin-inline-start: 12px;
    color: var(--gray);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The scene keeps the canvases' shape, centred, up to 240px wide */
.walk-scene {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 16px auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--game-elevation-1);
}

/* Room for the longest sentence, so the buttons never jump between steps */
.walk-text {
    min-height: 96px;
    margin: 0 0 16px 0;
    font-size: .95rem;
    line-height: 1.45;
}

.walk-buttons {
    display: flex;
    align-items: center;
}

.walk-buttons button {
    margin-inline-start: 8px;
}

.game-root .walk-buttons button.walk-skip {
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding-inline-start: 0;
    padding-inline-end: 0;
    border-color: transparent;
    background: transparent;
    color: var(--gray);
}

.game-root .walk-buttons button.walk-next {
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
    font-weight: 600;
}

.walk-buttons button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.game-dialog {
    width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-2);
    color: var(--black);
    font-size: .9rem;
}

.game-dialog::backdrop {
    background: rgba(var(--shadow-rgb), .6);
}

/* The full guide card is a column: a scrolling body over a footer that
   never scrolls away */
.game-tutorial {
    max-width: 400px;
    overflow: hidden;
}

.game-tutorial[open] {
    display: flex;
    flex-direction: column;
}

#tutorial-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#tutorial-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 24px 8px 24px;
}

#tutorial-card h2 {
    margin: 0 0 12px 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.tut-story {
    margin: 0 0 12px 0;
    color: var(--gray);
    font-style: italic;
}

/* The one-line brief above the scenes: what the player is here to do */
.tut-goal {
    margin: 0 0 16px 0;
    padding: 8px 12px;
    border-inline-start: 4px solid var(--amber);
    border-radius: var(--radius);
    background: rgba(var(--amber-rgb), .1);
}

/* A row: its picture beside its text. Every row of the card, the
   gameplay ones with their animated scene and the "Beyond the bridge"
   ones with their still picture, has the same picture: 108px wide, in the
   canvases' shape, at the top of the row (tutorial.js draws them) */
.tut-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.tut-row p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    margin-inline-start: 16px;
}

.tut-scene,
.tut-icon {
    display: block;
    flex: 0 0 108px;
    width: 108px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--game-elevation-1);
}

/* The "Beyond the bridge" group: a heading, then rows of a still picture
   beside a title, with the Full access tag where it applies, the text
   and, for a free player, what they have instead */
.tut-group {
    margin: 24px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 1.05rem;
    font-weight: 700;
}

.tut-text {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: 16px;
}

.tut-row .tut-text p {
    margin: 0 0 4px 0;
}

/* The Daily Challenge row's list of formats, a quieter line */
.tut-row .tut-text p.tut-formats {
    color: var(--gray);
    font-size: .85rem;
}

.tut-row .tut-text p.tut-free-note {
    padding: 4px 8px;
    border-inline-start: 4px solid var(--amber);
    background: rgba(var(--amber-rgb), .1);
    font-size: .8rem;
}

/* The footer holds the way in, a thumb-sized button */
#tutorial-footer {
    flex: 0 0 auto;
    padding: 12px 24px 16px 24px;
    border-top: 1px solid var(--border);
}

#tutorial-close {
    display: block;
    width: 100%;
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
    font-weight: 600;
}

#tutorial-close:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* The picture editor: the square crop view, the zoom and two buttons */
.game-editor {
    max-width: 320px;
    overflow-y: auto;
}

#image-editor-card {
    padding: 16px 20px;
}

#image-editor-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.editor-hint {
    margin: 0 0 8px 0;
    color: var(--gray);
    font-size: .8rem;
}

/* The view canvas holds twice its shown pixels, for crispness */
#image-editor-canvas {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px auto;
    border-radius: var(--radius);
    /* Dragging moves the picture, not the page */
    touch-action: none;
    cursor: grab;
}

.editor-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.editor-row span {
    flex: 0 0 64px;
    width: 64px;
}

/* Like the volume slider, the zoom drops the core's field padding,
   border and background so its track runs the whole width */
#image-editor-zoom {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    accent-color: var(--brand);
}

#image-editor-zoom:focus {
    box-shadow: none;
}

.editor-buttons {
    display: flex;
}

.editor-buttons button {
    flex: 1 1 0;
    margin-inline-end: 8px;
}

.editor-buttons button:last-child {
    margin-inline-end: 0;
}

/* -----------------------------------------------------------------------------
   7. Pages
   Every game page's container carries game-screen (game-pages.js; the
   Digital downloads addon's pages get it after they render), the scope of
   the rules below that change the theme's own look.
   -------------------------------------------------------------------------- */

/* Page titles keep the theme's one size on every page, the game's and the
   core's alike (theme.css, .page-header h1); section headings in display
   weight, tight; numbers that line up */
.game-screen h2 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.game-num,
.game-screen .detail-list dd,
.game-screen td {
    font-variant-numeric: tabular-nums;
}

/* Buttons. Primary: the accent fill, for the one thing a block asks for.
   Secondary: the theme's quiet surface button (button-alt). Danger: the
   error color's outline (game-danger-button). All of them show the same
   ring for keyboard focus only. */
.game-screen .form-actions > button:not(.button-alt),
.game-screen td.actions-col > button:not(.button-alt),
.game-screen .game-replay-cta-button {
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
    font-weight: 600;
}

.game-screen .form-actions > button.button-alt {
    font-weight: 600;
}

/* The moderation schedule's controls of a later day: format, target and
   twist selects, then Save and Draw again, wrapping on narrow screens */
.game-schedule-controls > select,
.game-schedule-controls > button {
    width: auto;
    margin: 0 6px 6px 0;
    vertical-align: middle;
}

.game-screen button:focus-visible,
.game-screen a:focus-visible,
.game-root button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* Surfaces at rest share the first elevation */
.game-screen .panel,
.game-screen .table-wrapper,
.game-screen .detail-list,
.game-screen fieldset {
    box-shadow: var(--game-elevation-1);
}

/* How the player's progress is kept, at the top of the side column: as
   wide as the game under 1280px, the column's width beside it. A player
   with Full access reads one quiet line (game-note-paid); a guest or an
   account without access one card on the side cards' surface: a small
   heading, a line on where the progress stays, the offer of Full access
   on the accent's wash with a normal size button, and a row of links
   (getGamePlayNoteHTML() in game-pages.js). */
.game-note {
    width: 100%;
    margin-bottom: 16px;
}

.game-note p {
    margin: 0;
}

.game-note-paid {
    color: var(--gray);
    font-size: .9rem;
}

.game-note-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
    color: var(--black);
    font-size: .9rem;
    line-height: 1.5;
}

.game-screen .game-note-card h2.game-note-title {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.game-note .game-note-line {
    color: var(--gray);
}

.game-note-offer {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--game-accent-soft);
}

.game-note .game-note-price {
    margin-bottom: 8px;
    font-weight: 600;
}

.game-root .game-note-offer button.game-note-button {
    padding: 8px 16px;
    border-color: var(--game-accent);
    background: var(--game-accent);
    color: var(--on-accent);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

.game-note .game-note-links {
    margin-top: 12px;
    color: var(--gray);
    font-size: .85rem;
}

.game-note-links a,
.game-note-paid a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.game-note-dot {
    margin: 0 4px;
}

/* A status line at the top of a page: a payment confirmed, a code
   applied */
.game-flash {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--green);
    border-inline-start-width: 4px;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
}

/* The leaderboard's boards as one line of tabs over a hairline, the board
   shown in strong text over the brand's underline. The line never wraps:
   on a narrow screen it scrolls sideways, its scrollbar hidden. */
.game-screen .game-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}

.game-screen .game-tabs::-webkit-scrollbar {
    display: none;
}

.game-screen .game-tabs > button.game-tab {
    flex: 0 0 auto;
    margin: 0 0 -1px 0;
    padding: 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--gray);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--game-motion), border-color var(--game-motion);
}

@media (min-width: 768px) {
    .game-screen .game-tabs > button.game-tab {
        padding: 12px 16px;
        font-size: .95rem;
    }
}

.game-screen .game-tabs > button.game-tab:not([disabled]):hover {
    background-image: none;
    color: var(--black);
}

.game-screen .game-tabs > button.game-tab-active {
    border-bottom-color: var(--game-accent);
    color: var(--black);
}

/* The daily board's days (Today, Yesterday): a small segmented control
   under the tabs, a step quieter than them */
.game-screen .game-tabs.game-tabs-sub {
    width: fit-content;
    margin-top: 16px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--game-wash);
}

.game-screen .game-tabs.game-tabs-sub > button.game-tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .85rem;
}

.game-screen .game-tabs.game-tabs-sub > button.game-tab-active {
    border-color: rgba(var(--amber-rgb), .5);
    background: var(--game-accent-soft);
    color: var(--black);
}

/* The daily board's challenge: its format and goal in bold, then the
   twist and the day's line, muted */
.game-board-day {
    margin-top: 16px;
}

.game-board-day-title {
    margin: 0;
    color: var(--black);
    font-size: 1rem;
    font-weight: 700;
}

.game-board-day .game-board-reset {
    margin-top: 4px;
}

/* The board: a rank column with medals for the top three, each player's
   initial in a circle, numbers that line up, soft zebra rows, and the
   viewer's own row in the accent's wash with its edge marked */
/* A board's cells keep to one line. On a phone the table fits its card
   with fixed columns: the rank, the player (the name cut short with an
   ellipsis, its marks always shown) and the score; the level and the
   replay (game-col-extra) move to a second line under the name
   (game-board-sub). From 768px every column is back and the second line
   is hidden. */
.game-board table {
    table-layout: fixed;
}

.game-board th,
.game-board td {
    padding: 12px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-board .game-col-rank {
    width: 48px;
}

.game-board .game-col-value {
    width: 96px;
}

.game-board .game-col-extra {
    display: none;
}

@media (min-width: 768px) {
    .game-board table {
        table-layout: auto;
    }

    .game-board th,
    .game-board td {
        padding: 12px 16px;
    }

    .game-board .game-col-rank {
        width: 64px;
    }

    .game-board .game-col-value {
        width: auto;
    }

    .game-board .game-col-extra {
        display: table-cell;
    }
}

.game-player-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.game-player-line {
    display: flex;
    align-items: center;
    min-width: 0;
}

.game-player-line .medal-stack,
.game-player-line .game-you-tag {
    flex: 0 0 auto;
}

.game-board-sub {
    display: flex;
    align-items: center;
    margin-top: 4px;
    color: var(--gray);
    font-size: .8rem;
}

.game-board-sub .game-watch-link {
    margin-inline-start: 8px;
    padding: 4px 8px;
}

@media (min-width: 768px) {
    .game-board-sub {
        display: none;
    }
}

.game-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.game-medal {
    width: 28px;
    border: 2px solid;
    border-radius: 50%;
    font-size: .8rem;
}

.game-medal-1 {
    border-color: var(--yellow);
    background: rgba(var(--yellow-rgb), .22);
}

.game-medal-2 {
    border-color: var(--gray);
    background: rgba(var(--gray-rgb), .2);
}

.game-medal-3 {
    border-color: var(--orange);
    background: rgba(var(--orange-rgb), .2);
}

.game-player {
    display: flex;
    align-items: center;
    min-width: 0;
}

.game-avatar {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-end: 8px;
    border: 1px solid;
    border-radius: 50%;
    color: var(--black);
    font-size: .85rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .game-avatar {
        margin-inline-end: 12px;
    }
}

.game-avatar-0 {
    border-color: rgba(var(--indigo-rgb), .5);
    background: rgba(var(--indigo-rgb), .2);
}

.game-avatar-1 {
    border-color: rgba(var(--teal-rgb), .5);
    background: rgba(var(--teal-rgb), .2);
}

.game-avatar-2 {
    border-color: rgba(var(--rose-rgb), .5);
    background: rgba(var(--rose-rgb), .2);
}

.game-avatar-3 {
    border-color: rgba(var(--amber-rgb), .5);
    background: rgba(var(--amber-rgb), .2);
}

.game-avatar-4 {
    border-color: rgba(var(--sky-rgb), .5);
    background: rgba(var(--sky-rgb), .2);
}

.game-avatar-5 {
    border-color: rgba(var(--violet-rgb), .5);
    background: rgba(var(--violet-rgb), .2);
}

.game-player-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-board .game-score {
    font-weight: 700;
}

/* "You", beside the viewer's own name */
.game-you-tag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 0 8px;
    border-radius: var(--game-radius-pill);
    background: var(--game-accent);
    color: var(--on-accent);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: middle;
}

.game-board tbody tr:nth-child(even) td {
    background-color: var(--white);
    background-image: linear-gradient(rgba(var(--black-rgb), .03), rgba(var(--black-rgb), .03));
}

.game-board tbody tr:hover td {
    background-color: var(--light);
    background-image: none;
}

.game-board tbody tr.game-board-viewer td {
    background-color: var(--white);
    background-image: linear-gradient(var(--game-accent-soft), var(--game-accent-soft));
    font-weight: 600;
}

.game-board tbody tr.game-board-viewer td:first-child {
    box-shadow: inset 4px 0 0 var(--amber);
}

/* The viewer's row, brought into view: a moment's glow */
.game-board tbody tr.game-board-found td {
    animation: game-row-found 1.6s ease-out;
}

@keyframes game-row-found {
    from {
        background-color: rgba(var(--amber-rgb), .45);
    }

    to {
        background-color: var(--white);
    }
}

/* Watch: a quiet link with the play icon */
.game-watch-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius);
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.game-watch-link:hover {
    background: var(--game-wash);
}

.game-watch-link .game-icon {
    width: 16px;
    height: 16px;
    margin-inline-end: 4px;
}

/* The viewer's place above the board: the rank large, the line, and the
   way to the row */
.game-board-you {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-inline-start: 4px solid var(--amber);
}

.game-board-you-rank {
    margin-inline-end: 16px;
}

.game-board-you .game-rank {
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--game-wash);
    font-size: 1.25rem;
}

.game-board-you .game-medal {
    width: 48px;
    border-width: 3px;
}

.game-board-you .game-medal-1 {
    background: rgba(var(--yellow-rgb), .22);
}

.game-board-you .game-medal-2 {
    background: rgba(var(--gray-rgb), .2);
}

.game-board-you .game-medal-3 {
    background: rgba(var(--orange-rgb), .2);
}

.game-board-you-text {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    font-weight: 600;
}

.game-board-you .game-board-find {
    margin: 8px 0 0 0;
    font-weight: 600;
}

@media (min-width: 768px) {
    .game-board-you .game-board-find {
        margin: 0;
        margin-inline-start: 16px;
    }
}

/* A friendly full-page notice: a replay that is gone, an address that
   leads nowhere */
.game-notice-page {
    padding: 48px 24px;
    text-align: center;
}

.game-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--game-accent-soft);
    color: var(--amber);
}

.game-notice-icon .game-icon {
    width: 32px;
    height: 32px;
}

.game-screen .game-notice-page h2 {
    margin: 0 0 8px 0;
    font-size: 1.375rem;
}

.game-notice-page p {
    max-width: 480px;
    margin: 0 auto;
    color: var(--gray);
}

.game-notice-page .form-actions {
    justify-content: center;
}

/* A notice that something did not go through (a cancelled payment, a
   payment still on its way) */
.game-flash-warning {
    border-color: var(--amber);
}

/* Small print: where data goes, what is public */
.game-fine-print {
    margin: 8px 0 0 0;
    color: var(--gray);
    font-size: .8rem;
}

/* The offer of Full access on the leaderboard, instead of a rank */
.game-board-offer p {
    margin: 0 0 8px 0;
}

/* Near the price: progress made without Full access stays in the browser */
.game-access-fresh {
    margin: 0 0 8px 0;
    padding: 8px 12px;
    border-inline-start: 4px solid var(--amber);
    border-radius: var(--radius);
    background: rgba(var(--amber-rgb), .1);
    font-size: .9rem;
}

/* The access page: price, what comes with it, the consent box. The price
   line's amount is set large in display weight, the rest of its line
   quiet beside it. */
.game-access-price {
    margin: 4px 0 12px 0;
    color: var(--gray);
    font-size: .9rem;
}

.game-price-amount {
    color: var(--black);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.game-access-page h2 {
    margin: 24px 0 8px 0;
    font-size: 1.1rem;
}

/* What a card includes, each line after a check in a soft green circle,
   and what it leaves out, after a quiet cross */
.game-checklist {
    margin: 0 0 16px 0;
    padding: 0;
    list-style: none;
}

.game-checklist li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.game-checklist-icon {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-inline-end: 12px;
    border-radius: 50%;
}

/* Drawn at 14px, the icon's stroke is thickened to read as heavy as the
   20px icons elsewhere */
.game-checklist-icon .game-icon {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.game-checklist-check .game-checklist-icon {
    background: rgba(var(--green-rgb), .2);
    color: var(--green);
}

.game-checklist-cross .game-checklist-icon {
    background: var(--game-wash);
    color: var(--gray);
}

/* The row wraps so the core's error (showFieldError(), placed right after
   the box) drops to a full line of its own under the box and its text,
   instead of squeezing between them */
.game-access-consent {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.game-access-consent > .field-error {
    order: 1;
    flex: 0 0 100%;
    margin-top: 8px;
}

/* The 16px box sits centred on the label's first 24px line */
.game-access-consent input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 4px 0 0 0;
    margin-inline-end: 12px;
}

.game-access-consent label {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-weight: 400;
}

/* A card's discount code field (the Coupons addon's own look, above the
   consent box) changes the price: the price before the code is struck
   through beside the new one */
.game-price-was {
    margin-inline-end: 8px;
    color: var(--gray);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: line-through;
}

.game-price-was[hidden] {
    display: none;
}

/* Danger: resetting all progress and deleting the account */
.game-screen button.game-danger-button {
    border-color: var(--error-text);
    background: transparent;
    color: var(--error-text);
    font-weight: 600;
}

.game-screen button.game-danger-button:not([disabled]):hover {
    border-color: var(--error-text);
    background-color: rgba(var(--rose-rgb), .1);
    background-image: none;
}

/* The privacy and terms page: each part a soft card */
.game-privacy-page {
    max-width: 800px;
}

.game-privacy-section {
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
}

.game-screen .game-privacy-section h2 {
    margin: 0 0 12px 0;
    font-size: 1.125rem;
}

.game-privacy-section ul {
    margin: 0;
    padding-inline-start: 24px;
}

.game-privacy-section li {
    margin-bottom: 8px;
}

.game-privacy-section li:last-child {
    margin-bottom: 0;
}

/* The footer's links (footer_links in app.js): privacy and terms and the
   credits, under the copyright line */
.footer .footer-links {
    margin: 4px 0 0 0;
}

/* -----------------------------------------------------------------------------
   8. Engagement
   -------------------------------------------------------------------------- */

/* The buttons of the game over screen: Play again (the main one), share
   the run, watch its replay, unlock rankings, and what the last share
   did. They show only once a run is over (game.js, updateRunActions),
   laid over the bottom of the canvas, where the game over screen keeps
   room for them, so the control bar under the canvas never moves. They
   wrap to a second line on a narrow canvas. */
/* Laid over the canvas, centred, right under the game over report (game.js
   positionRunActions() sets top; bottom holds them until the first frame) */
.game-run-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 8px 12px 8px;
    font-size: .85rem;
}

.game-run-actions > * {
    margin-top: 8px;
    margin-inline-end: 8px;
}

.game-run-actions > *:last-child {
    margin-inline-end: 0;
}

.game-root .game-run-actions button.game-run-button {
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    background: rgba(var(--shadow-rgb), .55);
    color: var(--on-accent);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
}

.game-root .game-run-actions button.game-control-primary {
    border-color: var(--green-strong);
    background: var(--green-strong);
    color: var(--on-accent);
    font-weight: 700;
}

.game-root .game-run-actions button.game-run-button:not([disabled]):active {
    background-image: linear-gradient(rgba(var(--shadow-rgb), .2), rgba(var(--shadow-rgb), .2));
}

.game-run-status {
    color: var(--on-accent);
}

/* The game over buttons sit in a row of their own under the offline name
   entry; each block takes the holder's whole width */
.game-run-actions > .game-offline-entry,
.game-run-actions > .game-run-buttons {
    flex: 0 0 100%;
    margin-inline-end: 0;
}

.game-run-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.game-run-buttons > * {
    margin-top: 8px;
    margin-inline-end: 8px;
}

.game-run-buttons > *:last-child {
    margin-inline-end: 0;
}

/* The arcade name entry of a run that made the offline top 10: the amber
   headline NEW OFFLINE HIGH SCORE! #N, pulsing a few times, ENTER YOUR
   NAME under it, then the field with Save and Skip, on a dark plate with
   an amber frame over the canvas. The page's own font, made arcade-like by
   weight and letter spacing (no pulse with reduced motion). */
.game-offline-form {
    max-width: 360px;
    margin: 0 auto;
    padding: 8px;
    border: 2px solid var(--amber);
    border-radius: var(--radius-lg);
    background: rgba(var(--shadow-rgb), .78);
    box-shadow: 0 4px 16px rgba(var(--shadow-rgb), .4);
    color: var(--on-accent);
    font-family: inherit;
    text-align: center;
}

.game-offline-title {
    margin: 0;
    color: var(--yellow);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .5px;
    text-transform: uppercase;
    animation: game-offline-pulse .9s ease-in-out 4;
}

@keyframes game-offline-pulse {
    50% {
        transform: scale(1.06);
    }
}

.game-offline-label {
    display: block;
    margin: 4px 0 8px 0;
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* The name field and its two buttons share one height and one line */
.game-offline-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.game-offline-row > * {
    margin: 0 4px 4px 4px;
}

/* The id outweighs the theme's field rules, focus included */
#game-offline-entry input.game-offline-input,
#game-offline-entry input.game-offline-input:focus {
    flex: 1 1 96px;
    min-width: 0;
    max-width: 200px;
    height: auto;
    margin: 0 4px 4px 4px;
    padding: 8px;
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    background: rgba(var(--shadow-rgb), .6);
    color: var(--yellow);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.game-root .game-run-actions button.game-offline-save {
    border-color: var(--amber-strong);
    background: var(--amber-strong);
    color: var(--on-accent);
}

.game-offline-saved {
    margin: 0;
    color: var(--yellow);
    font-weight: 700;
    text-align: center;
}

@media (min-width: 768px) {
    .game-offline-form {
        padding: 16px 12px;
    }

    .game-offline-title {
        font-size: 1.25rem;
        letter-spacing: 1px;
    }

    .game-offline-label {
        font-size: .8rem;
        letter-spacing: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-offline-title {
        animation: none;
    }
}

/* The loader over the canvas while the game starts (game.js,
   gameLoaderStart()): the icon, a line and a progress bar, on the
   canvas's own night blue. While loading it takes no taps. */
.game-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--on-accent);
    pointer-events: none;
    animation: game-fade-in .3s ease-out;
}

.game-loader-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    animation: game-loader-breathe 1.6s ease-in-out infinite;
}

.game-loader-text {
    margin: 0 0 12px 0;
    font-size: .9rem;
    font-weight: 600;
}

.game-loader-bar {
    display: block;
    width: 160px;
    height: 8px;
    border: none;
    border-radius: 4px;
    background: rgba(var(--shadow-rgb), .45);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.game-loader-bar::-webkit-progress-bar {
    border-radius: 4px;
    background: rgba(var(--shadow-rgb), .45);
}

.game-loader-bar::-webkit-progress-value {
    border-radius: 4px;
    background: var(--amber);
}

.game-loader-bar::-moz-progress-bar {
    border-radius: 4px;
    background: var(--amber);
}

/* The title card the loader becomes on the play page (game.js,
   gameSplashShow()): the icon, the game's name, the Play button sized to
   its label that gently pulses, the "or press Enter" hint where there is
   a keyboard, the sign-in line for a visitor who is not signed in and the
   sound switch with the mute state, centred on the canvas's night blue
   with 16px between them. It covers the whole canvas and takes taps: a
   tap anywhere on it presses Play. The name, the button and the hint
   stay on one line: their sizes step up with the width the canvas is
   shown at (the game-splash-w-* class, gameSplashFit()), from the
   narrowest canvas, written first, up. */
.game-splash {
    display: none;
}

.game-loader.game-loader-ready {
    padding: 16px;
    pointer-events: auto;
    cursor: pointer;
}

.game-loader-ready .game-loader-wait {
    display: none;
}

.game-loader-ready .game-loader-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    animation: none;
}

.game-loader-ready .game-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.game-splash-title {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}

.game-root button.game-splash-play {
    display: inline-block;
    max-width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: var(--game-radius-pill);
    background: var(--amber-strong);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .45);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    animation: game-splash-pulse 1.8s ease-in-out infinite;
}

/* The Play button has the focus from the start, so its ring shows only
   once the player moves the focus with Tab (game-splash-keys) */
.game-root button.game-splash-play:focus-visible {
    outline: none;
}

.game-splash-keys button.game-splash-play:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: 2px;
}

.game-splash-hint {
    margin: 8px 0 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: .8;
    white-space: nowrap;
}

.game-root button.game-splash-sound {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 4px 12px;
    border: none;
    border-radius: var(--game-radius-pill);
    background: rgba(var(--shadow-rgb), .45);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* The line under Play for a visitor who is not signed in (game-pages.js,
   getGameSplashSignInHTML()): one line where the canvas is wide enough,
   two on the narrowest. Its Sign in button reads as a link and takes the
   press for itself, so it never counts as Play. */
.game-splash-sign-in {
    max-width: 100%;
    margin: 16px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.game-root button.game-splash-sign-in-link {
    display: inline;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--on-accent);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.game-root button.game-splash-sign-in-link:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: 2px;
}

.game-splash-speaker {
    flex: 0 0 16px;
    margin-inline-end: 8px;
}

.game-splash-slash,
.game-splash-muted .game-splash-wave {
    display: none;
}

.game-splash-muted .game-splash-slash {
    display: inline;
}

/* A canvas shown 352px wide or more */
.game-splash-w-352 .game-splash-title {
    font-size: 26px;
}

.game-splash-w-352 button.game-splash-play {
    font-size: 16px;
}

/* 432px or more */
.game-splash-w-432 .game-loader-icon {
    width: 64px;
    height: 64px;
}

.game-splash-w-432 .game-splash-title {
    font-size: 30px;
}

.game-splash-w-432 button.game-splash-play {
    font-size: 17px;
}

.game-splash-w-432 .game-splash-hint {
    font-size: 13px;
}
.game-splash-w-432 .game-splash-sign-in {
    font-size: 14px;
}

/* 512px or more */
.game-splash-w-512 .game-loader-icon {
    width: 64px;
    height: 64px;
}

.game-splash-w-512 .game-splash-title {
    font-size: 34px;
}

.game-splash-w-512 button.game-splash-play {
    padding: 12px 32px;
    font-size: 18px;
}

.game-splash-w-512 .game-splash-hint {
    font-size: 13px;
}
.game-splash-w-512 .game-splash-sign-in {
    font-size: 14px;
}

/* 640px or more */
.game-splash-w-640 .game-loader-icon {
    width: 72px;
    height: 72px;
}

.game-splash-w-640 .game-splash-title {
    font-size: 40px;
}

.game-splash-w-640 button.game-splash-play {
    padding: 12px 32px;
    font-size: 20px;
}

.game-splash-w-640 .game-splash-hint {
    font-size: 14px;
}
.game-splash-w-640 .game-splash-sign-in {
    font-size: 14px;
}

/* The start screen's Start button (game.js, updateStartButton()) with the
   "or press Enter" hint under it where there is a keyboard: in the title
   card's Play style, centred on the canvas where the start screen leaves
   its place (game-start-at-<percent> of the canvas's height) and sized by
   the width the canvas is shown at (game-start-w-<step>). Hidden during a
   run, while paused and on the game over screen. */
.game-start {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100% - 32px);
    transform: translate(-50%, -50%);
    color: var(--on-accent);
}

.game-start.hidden {
    display: none;
}

.game-start-at-36 {
    top: 36%;
}

.game-start-at-44 {
    top: 44%;
}

.game-start-at-48 {
    top: 48%;
}

.game-start-at-52 {
    top: 52%;
}

.game-start-at-56 {
    top: 56%;
}

.game-start-at-60 {
    top: 60%;
}

.game-start-at-64 {
    top: 64%;
}

.game-root button.game-start-button {
    max-width: 100%;
    margin: 0;
    padding: 8px 24px;
    border: none;
    border-radius: var(--game-radius-pill);
    background: var(--amber-strong);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .45);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.game-root button.game-start-button:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--white-rgb), .12), rgba(var(--white-rgb), .12));
}

.game-root button.game-start-button[disabled] {
    opacity: .8;
    cursor: default;
}

.game-root button.game-start-button:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: 2px;
}

.game-start-hint {
    margin: 4px 0 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: .8;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(var(--shadow-rgb), .6);
}

.game-start-w-352 button.game-start-button {
    font-size: 16px;
}

.game-start-w-432 button.game-start-button {
    padding: 12px 32px;
    font-size: 17px;
}

.game-start-w-512 button.game-start-button {
    padding: 12px 32px;
    font-size: 18px;
}

.game-start-w-640 button.game-start-button {
    padding: 12px 40px;
    font-size: 20px;
}

.game-start-w-432 .game-start-hint,
.game-start-w-512 .game-start-hint {
    font-size: 13px;
}

.game-start-w-640 .game-start-hint {
    font-size: 14px;
}

@keyframes game-splash-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

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

@keyframes game-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes game-loader-breathe {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}

/* A player who asks for less motion gets the loader, the title card's
   Play button, the folding cards, the mode picker's thumb, the
   side column's focus mode, the tabs and the board's found row without
   their movement */
@media (prefers-reduced-motion: reduce) {
    .game-loader,
    .game-loader-icon,
    .game-root button.game-splash-play,
    .game-card-body.game-card-reveal,
    .game-card-body.game-card-folding,
    .game-board tbody tr.game-board-found td {
        animation: none;
    }

    .game-play-page .game-layout-split > .game-layout-side,
    .game-root button.game-mode-option,
    .game-card-chevron,
    .shop-tips-chevron,
    .side-card,
    .game-screen .game-tabs > button.game-tab {
        transition: none;
    }
}

/* The moderation page's player access panel: the player, then one row
   per product with whether they have it and its button */
.game-player-access-who {
    margin: 16px 0 8px 0;
}

.game-player-access-table {
    width: 100%;
    border-collapse: collapse;
}

.game-player-access-table th,
.game-player-access-table td {
    padding: 8px;
    border-top: 1px solid var(--border);
    text-align: start;
    vertical-align: middle;
}

.game-player-access-table td:last-child {
    text-align: end;
}

/* The field a copy falls back on is kept off screen */
.game-copy-field {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Fullscreen shows the game alone, without these buttons either; the
   offline name entry stays, over the bottom of the canvas */
#game-container:fullscreen .game-run-buttons {
    display: none;
}

#game-container:-webkit-full-screen .game-run-buttons {
    display: none;
}

/* The marks beside a name are all the Leaderboards addon's medal stack
   (leaderboards.css): the supporter's heart medal (.game-mark-supporter),
   then the best other medal; next to each other they keep the stack's own
   4px apart. The game shows the best medal alone, never the addon's muted
   "+N" for the rest: the full collection is on the profile's trophy shelf. */
.game-mark-supporter + .medal-stack {
    margin-inline-start: 4px;
}

.medal-stack-more {
    display: none;
}

/* The heart medal in the access page's Supporter heading and in the
   Become a Supporter button */
.game-option-medal {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: -4px;
}

.game-supporter-cta-medal {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-end: 4px;
}

.game-option-medal .medal,
.game-supporter-cta-medal .medal {
    display: block;
    width: 100%;
    height: 100%;
}

/* A public profile's Career panel: six tiles, two by two on a phone and
   three across from 768px (row > custom-column > inner-column > tile),
   then the streaks, missions and achievements as rows */
.game-career-tiles {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
    padding: 0;
    list-style: none;
}

.game-career-tiles .custom-column {
    display: flex;
    flex: 0 0 50%;
    min-width: 0;
}

@media (min-width: 768px) {
    .game-career-tiles .custom-column {
        flex: 0 0 33.333%;
    }
}

.game-career-tiles .inner-column {
    display: flex;
    flex: 1 1 auto;
    padding: 4px;
}

.game-career-tile {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--light);
}

.game-career-value {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.game-career-label {
    margin: 4px 0 0 0;
    color: var(--gray);
    font-size: .85rem;
}

.game-career-tile .game-watch-link,
.game-career-tile .leaderboards-result-button {
    max-width: 100%;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .game-career-tile {
        padding: 12px 16px;
    }
}

/* The rows under the tiles: flat inside the panel, a hairline above */
.game-screen .game-career .detail-list {
    margin: 16px 0 0 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.game-career .detail-list dt:first-of-type {
    margin-top: 12px;
}

@media (min-width: 768px) {
    .game-career .detail-list dt {
        flex-basis: 40%;
        width: 40%;
    }

    .game-career .detail-list dd {
        flex-basis: 60%;
        width: 60%;
    }

    .game-career .detail-list dt:first-of-type {
        margin-top: 0;
    }
}

/* The achievements row: the count, then See all, which opens every
   achievement under the rows (a disclosure of ui.js: the grid shows while
   it holds the class open, and the button's words follow aria-expanded) */
.game-screen .game-achievements-toggle {
    width: auto;
    margin: 0 0 0 8px;
    padding: 2px 10px;
    font-size: .8125rem;
    font-weight: 600;
    vertical-align: baseline;
}

.game-achievements-toggle[aria-expanded="true"] .game-achievements-show,
.game-achievements-toggle[aria-expanded="false"] .game-achievements-hide {
    display: none;
}

.game-achievements-all {
    display: none;
    margin-top: 12px;
}

.game-achievements-all.open {
    display: block;
}

/* Earned ones in the game's amber (the theme's brand is plain black or
   white), still to earn ones greyed by the addon */
.game-achievements-all .achievements-compact-item:not(.achievements-compact-locked) {
    border-color: var(--amber);
    background: var(--game-accent-soft);
}

.game-achievements-all .achievements-compact-item:not(.achievements-compact-locked) .achievements-compact-icon {
    background: var(--game-accent);
    color: var(--on-accent);
}

/* The Ranking panel's lines and their place medals */
.game-career-days {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* On a phone the place sits beside what it was for, with the value and
   the Watch replay button on the line under it; from 576px all in one */
.game-career-day {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.game-career-day:last-child {
    border-bottom: 0;
}

.game-career-day-text {
    grid-column: 2 / 4;
    min-width: 0;
}

/* Under a line's text: today's place is provisional until the day closes */
.game-career-day-note {
    display: block;
    color: var(--gray);
    font-size: .8rem;
}

/* The Ranking panel's Show more, under the first daily lines */
.game-ranking-more {
    margin-top: 12px;
    text-align: center;
}

.game-ranking-rest {
    margin-top: 0;
}

.game-career-day strong {
    grid-column: 2;
}

.game-career-day .leaderboards-result-button,
.game-career-day .game-watch-link {
    grid-column: 3;
    justify-self: end;
}

@media (min-width: 576px) {
    .game-career-day {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .game-career-day-text {
        grid-column: 2;
    }

    .game-career-day strong {
        grid-column: 3;
    }

    .game-career-day .leaderboards-result-button,
    .game-career-day .game-watch-link {
        grid-column: 4;
    }
}

/* What only the player sees on their own profile: the rows flat inside
   the panel, the source code, gifts and Start over as quiet blocks */
.game-screen .game-self .detail-list {
    margin: 0 0 16px 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.game-screen .game-self fieldset {
    margin: 16px 0 0 0;
    padding: 16px 0 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.game-self .game-fine-print {
    margin: 16px 0 0 0;
}

/* How long a board still runs */
.game-board-reset {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .9rem;
}

/* The replay page's way into the game, for a visitor */
.game-replay-cta {
    margin: 0 0 16px 0;
    padding: 24px;
    border: 1px solid var(--amber);
    border-radius: var(--radius-lg);
    background: var(--game-accent-soft);
    box-shadow: var(--game-elevation-1);
}

.game-replay-cta p {
    margin: 0 0 8px 0;
}

.game-replay-cta .game-replay-cta-button {
    width: 100%;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .game-replay-cta .game-replay-cta-button {
        width: auto;
    }
}

/* The access page's two options, Full access first: a row of two cards,
   stacked on phones */
.game-access-page {
    max-width: 960px;
}


/* The gap between a board's top and the viewer's neighbourhood loaded
   under it (Show my row) */
.game-board-gap {
    margin: 8px 0;
    color: var(--gray);
    text-align: center;
}

.game-access-options {
    margin: 8px -8px 16px -8px;
}

/* The line on playing for free between the options and the gift, with the same
   room around it as the cards have */
.game-access-page > p {
    margin: 8px 0 24px 0;
}

/* An empty board, or the Career of a player's own profile before their
   first run: a friendly line and the way to play,
   centred in its panel */
.game-empty {
    margin-bottom: 16px;
    text-align: center;
}

.game-empty p {
    margin: 0 0 12px 0;
}

.game-empty .form-actions {
    justify-content: center;
}

.game-access-options > .custom-column {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.game-access-options > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.game-access-options > .custom-column > .inner-column > .card {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--game-elevation-1);
}

/* The recommended option, Full access: its edge in the accent, raised a
   step, and its Most popular label at the top */
.game-access-options > .custom-column > .inner-column > .game-option-featured {
    border: 2px solid var(--amber);
    box-shadow: var(--game-elevation-2);
}

.game-option-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0 0 8px 0;
    padding: 4px 12px;
    border-radius: var(--game-radius-pill);
    background: var(--game-accent);
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.game-option-badge .game-icon {
    width: 14px;
    height: 14px;
    margin-inline-end: 4px;
    fill: currentColor;
}

/* The source code card's two lists, side by side from 768px: a row of
   two columns that takes back only the horizontal gutter */
.game-source-lists {
    margin: 0 -8px;
}

.game-source-lists > .custom-column {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.game-source-lists > .custom-column > .inner-column {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
}

@media (min-width: 768px) {
    .game-source-lists > .custom-column {
        flex-basis: 50%;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .game-access-options > .custom-column {
        flex-basis: 50%;
        width: 50%;
    }
}

.game-option h2 {
    margin: 0 0 4px 0;
    font-size: 1.375rem;
}

.game-option h3 {
    margin: 16px 0 12px 0;
    color: var(--gray);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.game-access-options > .custom-column > .inner-column > .game-option-supporter {
    border-color: rgba(var(--rose-rgb), .4);
}

/* The source code card, last on the access page: a row of its own with
   one card as wide as the page, apart from the game's options */
.game-source-offer {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .game-source-offer > .custom-column {
        flex-basis: 100%;
        width: 100%;
    }
}


.game-supporter-upgrade {
    margin: 4px 0 0 0;
    font-weight: 600;
}

/* The small line over a card's title, in the same voice as its badge */
.game-option-kicker {
    margin: 0 0 8px 0;
    padding: 4px 0;
    color: var(--gray);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.game-option-owned p {
    margin: 0 0 8px 0;
}

/* The buy button keeps 16px from the consent box above it (the shop
   addons' cards push their actions down with margin-top: auto, which
   leaves none here) */
.card .game-buy-form .form-actions,
.game-buy-form .form-actions {
    margin-top: 16px;
}

.game-buy-form .form-actions button {
    margin-top: 0;
    white-space: normal;
}

/* A list of gifts (the gift just bought, on the access page), by the row rule: the code, its state, dates and
   whom it went to on the left; Copy (a small button) or the actions menu
   (Copy code, Send to a player) at the row's end */
.game-gift-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-gift {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.game-gift-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.game-gift-main > * {
    margin-inline-end: 8px;
    margin-bottom: 4px;
}

.game-gift > .row-action,
.game-gift > .actions-menu-holder {
    flex: 0 0 auto;
    margin-inline-start: 8px;
}

.game-gift-code {
    padding: 4px 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    word-break: break-all;
}

.game-gift-state {
    font-weight: 600;
}

.game-gift-state-unused {
    color: var(--green-strong);
}

.game-gift-state-refunded,
.game-gift-state-disabled,
.game-gift-state-expired {
    color: var(--error-text);
}

.game-gift-dates,
.game-gift-sent {
    flex: 0 0 100%;
    color: var(--gray);
}

/* The gift card's optional address, above its consent box */
.game-gift-send-to {
    margin-bottom: 16px;
}

/* The send dialog: the code it sends, then the address */
.game-gift-send-modal .game-gift-code {
    display: inline-block;
}

.game-gift-ready {
    border-color: var(--green);
}


/* The source code card's notice that only the offline edition is sold, so
   nobody buys it expecting the online server side */
.game-source-warning {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--game-accent);
    border-radius: 8px;
    background-color: var(--game-accent-soft);
}

/* -----------------------------------------------------------------------------
   Shop rows (shop.js, renderShop()): the short intro, the folded upload
   tips, the group headings, and one stacked row per color, picture or
   sound slot. The card lives in the narrow side column, so the rows stay
   stacked at every screen width: the preview and the full name on one
   line, the actions under them.
   -------------------------------------------------------------------------- */

.shop-intro {
    margin: 0 0 12px 0;
    color: var(--gray);
    font-size: .85rem;
    line-height: 1.5;
}

.side-card .shop-section {
    margin: 24px 0 8px 0;
    font-size: 1rem;
    line-height: 1.3;
}

/* A group heading: You, Blorbs, Obstacles, The bridge; Effects, Ambience,
   Music */
.shop-group {
    margin: 16px 0 0 0;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* One row, rows parted by a hairline */
.shop-item {
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.shop-group + .shop-item {
    border-top: 0;
}

.shop-item-head {
    display: flex;
    align-items: center;
}

/* The row's lead: the preview circle, or a sound's play button */
.shop-item-lead {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-end: 12px;
}

.shop-thumb {
    display: block;
    width: 32px;
    height: 32px;
}

.shop-gold-thumb {
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid var(--amber-strong);
    border-radius: 50%;
    background: var(--yellow);
}

/* A supporter's two looks, Normal and Golden: one outlined brick each
   with its small circle, the one worn filled with the accent wash */
.side-card .shop-skin-option {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--game-radius-pill);
    background: var(--white);
    color: var(--black);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.side-card .shop-skin-option:hover {
    background: var(--game-wash);
}

.side-card .shop-skin-option:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.side-card .shop-skin-option.is-chosen {
    border-color: var(--amber);
    background: var(--game-accent-soft);
    color: var(--amber-strong);
    cursor: default;
}

.shop-skin-dot {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
}

.shop-skin-dot .shop-thumb {
    width: 20px;
    height: 20px;
}

.shop-skin-dot .shop-gold-thumb {
    width: 16px;
    height: 16px;
}

/* The full name, never cut: a long one wraps */
.shop-item-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.shop-item-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.shop-item-note {
    color: var(--gray);
    font-size: .75rem;
    line-height: 1.4;
}

/* The actions, on their own line, lined up under the name */
.shop-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 44px;
}

.shop-item-actions > * {
    margin-top: 8px;
    margin-inline-end: 8px;
}

.shop-item-actions:empty {
    display: none;
}

/* An upload or color action: one outlined brick */
.shop-action {
    display: inline-flex;
    position: relative;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.shop-action:hover {
    background: var(--game-wash);
}

.shop-action:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* A buy button: one amber pill holding the label, the coin and the
   price. Without the coins for it (aria-disabled) it stays readable,
   in the neutral colors, and its title says what it needs. */
.side-card .shop-buy {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--amber);
    border-radius: var(--game-radius-pill);
    background: var(--white);
    color: var(--amber-strong);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.side-card .shop-buy:hover {
    background: var(--game-accent-soft);
}

.side-card .shop-buy:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.side-card .shop-buy[aria-disabled="true"] {
    border-color: var(--border);
    background: var(--white);
    color: var(--gray);
    cursor: not-allowed;
}

.shop-buy[aria-disabled="true"] .shop-coin circle {
    stroke: var(--gray);
}

.shop-buy-label {
    margin-inline-start: 4px;
    margin-inline-end: 8px;
}

/* The price inside a buy button: the coin and the number */
.shop-chip {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.shop-coin {
    display: block;
    width: 12px;
    height: 12px;
    margin-inline-end: 4px;
}

.shop-coin circle {
    fill: none;
    stroke: var(--amber);
    stroke-width: 2;
}

/* The file and color inputs are hidden from view but not from the
   keyboard: each keeps a 1px footprint inside its label, so Tab still
   reaches it and Enter opens the picker */
.shop-hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Reset: a quiet text button */
.side-card .shop-text-button {
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--gray);
    font-size: .8rem;
    text-decoration: underline;
}

.side-card .shop-text-button:hover {
    color: var(--black);
}

/* A sound's play button: a round button with a triangle, a square while
   it plays */
.side-card .shop-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
}

.side-card .shop-play:hover {
    background: var(--game-wash);
}

.shop-play-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
}

.side-card .shop-playing {
    border-color: var(--amber);
    color: var(--amber-strong);
}

.shop-playing .shop-play-icon {
    width: 10px;
    height: 10px;
    margin-left: 0;
    border: 0;
    background: currentColor;
}

/* The info button that unfolds what a sound slot wants */
.side-card .shop-info {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-inline-start: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: none;
    color: var(--gray);
    font-family: Georgia, serif;
    font-size: .8rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.side-card .shop-info[aria-expanded="true"] {
    border-color: var(--amber);
    color: var(--amber-strong);
}

.shop-item-about {
    margin: 8px 0 0 0;
    padding-inline-start: 44px;
    color: var(--gray);
    font-size: .8rem;
    line-height: 1.5;
}

/* The folded upload tips */
.shop-tips {
    margin: 0 0 8px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* The heading: a bulb, the label on the left and the side cards' chevron
   on the right, turned up when open (the play triangle is kept for the
   sound previews) */
.shop-tips summary {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: .8rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.shop-tips summary::-webkit-details-marker {
    display: none;
}

.shop-tips-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-inline-end: 8px;
    fill: none;
    stroke: var(--amber-strong);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-tips-label {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-tips-chevron {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-inline-start: 8px;
    margin-inline-end: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--game-motion), margin-top var(--game-motion);
}

.shop-tips[open] .shop-tips-chevron {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.shop-tips summary:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: -2px;
}

.shop-tips-body {
    padding: 0 12px 8px 12px;
    color: var(--gray);
    font-size: .8rem;
    line-height: 1.5;
}

.shop-tips-body p {
    margin: 0 0 8px 0;
}

.shop-tips-body p:last-child {
    margin-bottom: 0;
}

/* Links in the tips and notes: the text's own color, underlined */
.shop-tips-body a,
.shop-item-note a {
    color: inherit;
    text-decoration: underline;
}

.shop-tips-body a:hover,
.shop-item-note a:hover {
    color: var(--black);
}

/* The per size skins step back while a whole-player picture is set */
.shop-dim .shop-item-head {
    opacity: .5;
}

.shop-dim .shop-item-actions {
    opacity: .5;
    pointer-events: none;
}

/* The own profile's way to the Supporter tier: a small amber pill with
   the heart (in the profile's "Only you see this" panel, .game-self) */
.game-screen .game-supporter-cta,
.game-self .game-supporter-cta {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 8px;
    padding: 4px 12px;
    border: 1px solid var(--amber);
    border-radius: var(--game-radius-pill);
    background: var(--white);
    color: var(--amber-strong);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.game-screen .game-supporter-cta:hover,
.game-self .game-supporter-cta:hover {
    background: var(--game-accent-soft);
}

.game-screen .game-supporter-cta:focus-visible,
.game-self .game-supporter-cta:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* The "Only you see this" rows hold a button beside their value (the
   Supporter pill), so each label is centred on its row from 768px, where
   the label and the value share a line */
@media (min-width: 768px) {
    .game-self .detail-list dt {
        display: flex;
        align-items: center;
    }
}