/* Direction: DESIGN.md. An arcade palette on cream (day) or indigo (night); the detail lives in the pixel drawings and the motion.
   System type for reading, Press Start 2P only for the brand and the big points. Every colour is a token. */
@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
    font-display: swap;
}

/* Colours that do not change with the mode: the medals, the two tones the drawings mix from, and the text on yellow or coral. */
:root {
    --gold: #ffc400;
    --silver: #c9cedb;
    --bronze: #e08a4a;
    --cream: #fff6dc;
    --indigo: #1d1442;
    --primary: var(--gold);
    --on-primary: var(--indigo);
}

:root, :root[data-theme='day'] {
    color-scheme: light;
    --bg: #fff6dc;
    --surface: #ffffff;
    --ink: #1d1442;
    --muted: #5b5380;
    --accent: #ff4d6d;
    --accent-ink: #d81e4a;
    --land: #2bc66b;
    --sea: #bde8ff;
    --sky-2: #7fd3ff;
    --link: #3a2fd0;
    --shape-fill: var(--land);
    --shape-edge: var(--ink);
}

:root[data-theme='night'] {
    color-scheme: dark;
    --bg: #150f33;
    --surface: #221a4d;
    --ink: #fff6dc;
    --muted: #b8b0dc;
    --accent: #ff6b8a;
    --accent-ink: #ff6b8a;
    /* Darkened from #24b866: the cream edge on it was 2.40:1, now 3.05:1. */
    --land: #20a25a;
    --sea: #1b2a6b;
    --sky-2: #0f0a2a;
    --link: #9db2ff;
}

:root {
    --step: 3px;
    --rule: color-mix(in srgb, var(--ink) 16%, var(--bg));
    --display: 'Press Start 2P', ui-monospace, monospace;
    /* Pixel border: four shadows, one per side, so the corners keep a notch. Shadows sit outside the box: keep 6px between neighbours. */
    --edge: 0 calc(var(--step) * -1) 0 0 var(--ink), 0 var(--step) 0 0 var(--ink), calc(var(--step) * -1) 0 0 0 var(--ink), var(--step) 0 0 0 var(--ink);
}

* { box-sizing: border-box; }

body {
    margin: 0 auto;
    padding: 0 16px 32px;
    max-width: 480px;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 system-ui, sans-serif;
}

h1 { margin: 24px 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; }
h2 { margin: 40px 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 12px; }
.lead, #ranking-text, #pick-text, .hint, .note, footer, .today { color: var(--muted); }
a { color: var(--link); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--accent-ink); font: 14px/1 var(--display); text-decoration: none; }
.lang { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

/* Controls. A button is a surface with an ink pixel border. Only the main one (.primary, one per screen) is yellow, with a hard 4 px step under it that sinks when pressed. */
button, .button, input, select {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    box-shadow: var(--edge);
    font: inherit;
    color: var(--ink);
}
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: var(--step);
    padding: 8px 16px;
    background: var(--surface);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .button:hover { background: var(--sea); }
button:active, .button:active { transform: translateY(var(--step)); }
button.primary, .button.primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--edge), 0 calc(var(--step) + 4px) 0 0 var(--ink); }
button.primary:hover, .button.primary:hover { background: color-mix(in srgb, var(--primary) 82%, var(--bg)); }
button.primary:active, .button.primary:active { transform: translateY(4px); box-shadow: var(--edge); }
button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
button:disabled { cursor: not-allowed; }
button:disabled:not([aria-pressed='true']), button:disabled:not([aria-pressed='true']):hover { background: var(--surface); color: var(--muted); }
.lang button.theme { padding: 0; }
.lang button { min-width: 48px; min-height: 48px; margin: 0; padding: 4px 8px; font-size: 14px; }
.lang button.signin { padding-inline: 12px; }

input, select { width: 100%; margin: var(--step) 0; padding: 8px 12px; background: var(--surface); }
select { cursor: pointer; }
input::placeholder { color: var(--muted); }
label, .label { display: block; margin-bottom: 8px; font-weight: 700; }
.row { display: flex; gap: 12px; align-items: center; }
.row input { flex: 1; min-width: 0; }
.error { min-height: 24px; margin-top: 8px; font-weight: 700; }
.status { min-height: 24px; margin: 8px 0 0; color: var(--muted); }

/* The stage has the page background and a pixel border. */
.stage { margin: 24px 0 16px; }
.stage canvas {
    display: block;
    width: calc(100% - var(--step) * 2);
    max-width: 288px;
    aspect-ratio: 1;
    margin: 0 auto;
    background: var(--sea);
    box-shadow: var(--edge);
    image-rendering: pixelated;
}
.stage .status { margin-top: 16px; text-align: center; }

.tries { list-style: none; margin: 16px 0 0; padding: 0; }
.tries li { display: grid; grid-template-columns: 1fr auto 32px auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tries .name { overflow-wrap: anywhere; font-weight: 700; }
.tries .km { color: var(--muted); font-variant-numeric: tabular-nums; }
.tries .arrow { display: grid; place-items: center; font-weight: 700; color: var(--accent-ink); }
.bar { display: flex; gap: 6px; padding: 2px; }
/* Cold to hot, one colour per cell: the more cells, the closer. Empty cells are only a border. Km and arrow say the same in text. */
.bar i { width: 10px; height: 16px; background: transparent; box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); }
.bar i:nth-child(1).on { background: var(--link); }
.bar i:nth-child(2).on { background: var(--land); }
.bar i:nth-child(3).on { background: var(--primary); }
.bar i:nth-child(4).on { background: var(--bronze); }
.bar i:nth-child(5).on { background: var(--accent); }
/* A new try comes in by steps and its bar fills cell by cell. */
.tries li.enter { animation: enter 240ms steps(4) backwards; }
.tries li.enter .bar i.on { animation: fill 120ms steps(1) backwards; animation-delay: calc(240ms + var(--n) * 90ms); }
@keyframes enter { from { transform: translateX(-16px); opacity: 0; } }
@keyframes fill { from { background: transparent; } }
.tries li.hit { background: var(--sea); padding-inline: 8px; }

.points { display: inline-flex; align-items: center; gap: 12px; margin: 8px var(--step) 20px; padding: 12px 16px; background: var(--surface); box-shadow: var(--edge); }
.points span:first-child { color: var(--accent-ink); font: 24px/1 var(--display); }
.practice { margin-right: 8px; padding: 2px 8px; background: var(--sea); color: var(--ink); box-shadow: var(--edge); }
#practice-streak { flex: 0 0 100%; margin: 8px 0 0; padding: 0; background: none; box-shadow: none; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
pre { white-space: pre-wrap; margin: 12px 0 0; padding: 12px; background: var(--surface); outline: 1px solid var(--rule); font: inherit; color: var(--ink); }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking > li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ranking > li::before { content: attr(value); color: var(--accent-ink); font-weight: 700; }
.ranking.plain > li { grid-template-columns: 1fr; }
.ranking.plain > li::before, .ranking > li.medal::before { content: none; }
.who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; }
.who:hover { text-decoration: underline; }
.code { min-width: 2.2em; padding: 2px 6px; background: var(--bg); color: var(--link); font-size: 14px; text-align: center; box-shadow: 0 -2px 0 0 var(--link), 0 2px 0 0 var(--link), -2px 0 0 0 var(--link), 2px 0 0 0 var(--link); }
.tag { padding: 0 6px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 400; }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.today { font-size: 14px; font-weight: 400; }
.ranking > li > .today { grid-column: 2 / -1; }
.ranking > li > .today:empty { display: none; }
.ranking > li.mine { background: var(--sea); padding-inline: 8px; }
.ranking > li.mine, .ranking > li.mine .who, .ranking > li.mine .today, .ranking > li.mine::before { color: var(--ink); }
.ranking > li.mine .tag { background: var(--indigo); color: var(--cream); }
.ranking > li.mine .code { background: var(--surface); }
.side section { margin: var(--step); padding: 16px; background: var(--surface); box-shadow: var(--edge); }
.side h2 { margin-top: 0; }
/* Home headline: bigger, one word in the accent. */
.home h1 { font-size: clamp(28px, 9vw, 40px); line-height: 1.1; }
.hot { color: var(--accent-ink); }
#mine { margin-bottom: 12px; }
.home .lead { font-size: 18px; }
.champion { display: inline-flex; align-items: center; gap: 12px; margin: 4px var(--step) 16px; padding: 8px 12px; background: var(--surface); box-shadow: var(--edge); font-weight: 700; }

/* Drawings: the tone letters of pixels.js map to the tokens. */
.sprite { display: block; flex: none; }
.sprite .o { fill: var(--ink); }
.sprite .d { fill: color-mix(in srgb, var(--accent) 50%, var(--indigo)); }
.sprite .c { fill: var(--accent); }
.sprite .b { fill: color-mix(in srgb, var(--accent) 70%, var(--indigo)); }
.sprite .p { fill: color-mix(in srgb, var(--accent) 45%, var(--cream)); }
.sprite .w { fill: color-mix(in srgb, var(--accent) 30%, var(--cream)); }
/* Per drawing: the same tone letters, mixed from the tokens. Base, shade and light stay three steps of one hue. */
.sun .c, .star .c { fill: var(--gold); }
.sun .b, .star .b { fill: color-mix(in srgb, var(--gold) 70%, var(--bronze)); }
.sun .d, .star .d { fill: color-mix(in srgb, var(--gold) 40%, var(--bronze)); }
.sun .w, .star .w { fill: color-mix(in srgb, var(--gold) 40%, var(--cream)); }
.scene .moon .o { fill: var(--silver); }
.moon .w { fill: var(--cream); }
.moon .c { fill: color-mix(in srgb, var(--cream) 85%, var(--gold)); }
.moon .b { fill: color-mix(in srgb, var(--cream) 60%, var(--silver)); }
.moon .d { fill: color-mix(in srgb, var(--silver) 70%, var(--indigo)); }
.cloud .w { fill: var(--surface); }
.cloud .p { fill: color-mix(in srgb, var(--surface) 75%, var(--sea)); }
.cloud .c { fill: color-mix(in srgb, var(--surface) 50%, var(--sea)); }
.cloud .b { fill: color-mix(in srgb, var(--sea) 70%, var(--link)); }
.flame .b { fill: var(--bronze); }
.flame .w { fill: var(--gold); }
.pause .c, .play .c { fill: var(--surface); }
.pin .w { fill: var(--cream); }
.pause .w, .play .w { fill: var(--cream); }
.pause .d, .play .d { fill: color-mix(in srgb, var(--surface) 60%, var(--sky-2)); }
.hills .o { fill: color-mix(in srgb, var(--land) 40%, var(--indigo)); }
.hills .p { fill: color-mix(in srgb, var(--land) 55%, var(--cream)); }
.hills .c { fill: var(--land); }
.hills .b { fill: color-mix(in srgb, var(--land) 75%, var(--indigo)); }
.trophy .c, .medal1 .c { fill: var(--gold); }
.trophy .b, .medal1 .b { fill: color-mix(in srgb, var(--gold) 65%, var(--bronze)); }
.trophy .d, .medal1 .d { fill: color-mix(in srgb, var(--gold) 35%, var(--bronze)); }
.trophy .w, .medal1 .w { fill: color-mix(in srgb, var(--gold) 40%, var(--cream)); }
.medal2 .w { fill: var(--silver); }
.medal2 .c { fill: color-mix(in srgb, var(--silver) 70%, var(--indigo)); }
.medal2 .b { fill: color-mix(in srgb, var(--silver) 50%, var(--indigo)); }
.medal2 .d { fill: color-mix(in srgb, var(--silver) 25%, var(--indigo)); }
.medal3 .b { fill: var(--bronze); }
.medal3 .c { fill: color-mix(in srgb, var(--bronze) 70%, var(--cream)); }
.medal3 .d { fill: color-mix(in srgb, var(--bronze) 55%, var(--indigo)); }
.medal3 .w { fill: color-mix(in srgb, var(--bronze) 30%, var(--cream)); }

/* Sky strip: sun and clouds by day, moon and stars by night. Everything moves in steps. */
.sky { position: relative; margin: 12px var(--step) 0; }
.sky .pause, .sky .pause:hover, .sky .pause:active, .sky .pause[aria-pressed='true'] { background: none; box-shadow: none; transform: none; color: var(--ink); }
/* Only the drawing shows: no box, no fill. The 44px hit area is invisible, bottom right, just above the hills. */
.sky .pause { position: absolute; right: 8px; bottom: 12px; z-index: 1; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; }
.sky .pause:focus-visible { outline-offset: 0; }
.sky .pause:hover .sprite { transform: translateY(-2px); }
.sky .pause:active .sprite { transform: translateY(2px); }
.scene { position: relative; height: 64px; overflow: hidden; background: linear-gradient(var(--sky-2) 0 16px, var(--sea) 16px); box-shadow: var(--edge); }
/* Hard bands, no soft gradient: a strip of 4 px checks sits where the two skies meet. */
.scene::before { content: ''; position: absolute; inset: 16px 0 auto; height: 8px; background: repeating-conic-gradient(var(--sky-2) 0 25%, var(--sea) 0 50%) 0 0 / 8px 8px; }
.scene > * { position: absolute; }
.scene .sun, .scene .moon { left: min(66%, calc(100% - 120px)); top: 0; }
.scene .moon, :root[data-theme='night'] .scene .sun { transform: translateY(72px); }
:root[data-theme='night'] .scene .moon { transform: none; }
.scene .cloud { left: var(--x); top: var(--y); animation: drift 90s steps(90) infinite; animation-delay: var(--d); }
:root[data-theme='night'] .scene .cloud, .scene .star { opacity: 0; }
:root[data-theme='night'] .scene .star { opacity: 1; }
.scene.ready .sun, .scene.ready .moon { transition: transform 600ms steps(6); }
.scene.ready .cloud, .scene.ready .star { transition: opacity 600ms steps(4); }
.scene .star { left: min(var(--x), calc(100% - 88px)); top: var(--y); width: 16px; height: 16px; }
.scene .star .sprite { position: absolute; inset: 0; }
.scene .star .sprite:first-child { animation: twinkle-a 3s steps(1) infinite; animation-delay: var(--d); }
.scene .star .sprite:last-child { opacity: 0; animation: twinkle-b 3s steps(1) infinite; animation-delay: var(--d); }
.scene .hills { left: 0; bottom: -8px; display: flex; }
/* Six different hills that repeat: each one overlaps the last by its own amount, sits lower or higher, and some are mirrored. */
.hills .sprite:nth-child(6n+2) { margin-left: -24px; transform: translateY(14px) scaleX(-1); }
.hills .sprite:nth-child(6n+3) { margin-left: -6px; transform: translateY(6px); }
.hills .sprite:nth-child(6n+4) { margin-left: -34px; transform: translateY(18px) scaleX(-1); }
.hills .sprite:nth-child(6n+5) { margin-left: -18px; transform: translateY(0); }
.hills .sprite:nth-child(6n) { margin-left: -44px; transform: translateY(10px) scaleX(-1); }
.scene.paused *, .scene.held * { animation-play-state: paused !important; }
@keyframes drift { from { left: -60px; } to { left: 100%; } }
@keyframes twinkle-a { 50% { opacity: 0; } }
@keyframes twinkle-b { 50% { opacity: 1; } 100% { opacity: 0; } }

/* Advert markers: final size reserved (320x100, 728x90 from 768 px), 24px clear of every control so no tap lands on one by accident. */
.ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 320px; max-width: 100%; height: 100px; margin: 24px auto; border: 3px dashed var(--muted); color: var(--muted); font-size: 14px; }
.ad .size::before { content: '320 x 100'; }
@media (min-width: 768px) {
    .ad { width: 728px; max-width: none; height: 90px; margin-inline: calc((100% - 728px) / 2); }
    .ad .size::before { content: '728 x 90'; }
}
.ad.rect { display: none; }

/* The daily round: the setup (country and mode), the outline, the answer field, the tries, and a panel or the result below. */
.setup { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.field { flex: 1 1 150px; min-width: 0; }
.modes { display: flex; gap: 8px; }
.modes button { flex: 1; gap: 6px; margin-inline: var(--step); padding-inline: 8px; }
/* Hard mode burns: flames at the foot of the outline box, behind the outline (the canvas is clear where nothing is painted). Two flames swap places in hard steps.
   The image has one empty row under the flames, pushed out of the box: without it the bottom row bleeds into a hairline above the strip. */
.round { --flame: 48px; }
.round[data-mode='hard'] .stage canvas { background: url(flames.svg) 0 calc(100% + var(--flame) / 16) / var(--flame) calc(var(--flame) * 0.8125) repeat-x, var(--sea); animation: flicker 700ms steps(1) infinite; }
body:has(.scene.paused, .scene.held) .round .stage canvas { animation-play-state: paused; }
@keyframes flicker { 50% { background-position-x: calc(var(--flame) / 2); } }
.hint { flex: 0 0 100%; min-height: 24px; margin: 0; }
.round .stage { margin-top: 16px; }
.panel { margin: 16px var(--step) 0; padding: 16px; background: var(--surface); box-shadow: var(--edge); }
.panel h2 { margin-top: 0; }
/* The celebration for a win: the flag of the player's country waves (a sheet of four frames slid in steps) beside a cheer in that country's own words. Its size is fixed so the result does not jump when the flag loads. */
.celebrate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 16px var(--step) 0; }
.flag { --px: 4px; display: flex; flex: none; height: calc(32 * var(--px)); }
.flag .pole { flex: none; width: var(--px); height: 100%; background: var(--ink); }
.flag .cloth { flex: none; width: calc(32 * var(--px)); height: calc(28 * var(--px)); overflow: hidden; filter: drop-shadow(var(--step) 0 0 var(--ink)) drop-shadow(calc(var(--step) * -1) 0 0 var(--ink)) drop-shadow(0 var(--step) 0 var(--ink)) drop-shadow(0 calc(var(--step) * -1) 0 var(--ink)); }
.flag canvas { display: block; width: calc(128 * var(--px)); height: calc(28 * var(--px)); image-rendering: pixelated; animation: wave 600ms steps(4) infinite; }
body:has(.scene.paused, .scene.held) .flag canvas { animation-play-state: paused; }
@keyframes wave { to { transform: translateX(-100%); } }
.cheer { flex: 1 1 200px; margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; }
@media (min-width: 480px) { .flag { --px: 6px; } }
/* The ad stand-in: a modal on the page colours, same pixel border, a dimmed backdrop. */
.adbox { width: min(360px, calc(100% - 32px)); padding: 24px; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--edge); }
.adbox::backdrop { background: color-mix(in srgb, var(--indigo) 75%, transparent); }
.adbox h2 { margin-top: 0; }
.adbox .primary { margin-top: 8px; }
.note { margin: 12px 0 0; }
.note:empty { display: none; }

/* Side adverts, 160x600, one each side of the 1120 px content with 24 px of air. They exist only from 1520 px: with a 15 px scrollbar that is the width where the
   184 px each side needs (160 + 24) still fits next to the content. The rail runs the height of the page and the advert sticks inside it. */
.rail { display: none; }
@media (min-width: 1520px) {
    body { position: relative; }
    .rail { display: block; position: absolute; top: 140px; bottom: 64px; width: 160px; }
    .rail.l { right: calc(100% - 8px); }
    .rail.r { left: calc(100% - 8px); }
    .rail .ad { position: sticky; top: 16px; display: flex; width: 160px; height: 600px; margin: 0; }
    .rail .ad .size::before { content: '160 x 600'; }
}

/* Home, under 1024 px: the game, then the ranking, then the practice list and the rules, which is the DOM order but for the ranking. */
@media (max-width: 1023px) {
    .home { display: flex; flex-direction: column; }
    .home .side { order: 1; margin-top: 32px; }
    .home .more { order: 2; }
    .home #how { margin-bottom: 0; }
}

/* Sign in: the dialog reuses the ad box (page colours, pixel border, dimmed backdrop) and scrolls when the list of games is long. */
.account { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.account h3 { margin: 24px 0 8px; font-size: 16px; }
.account hr { margin: 24px 0 16px; border: 0; border-top: 1px solid var(--rule); }
.gsi { display: flex; justify-content: center; min-height: 44px; margin-top: 16px; }
.account .status { min-height: 24px; margin: 8px 0 0; text-align: center; }
.account .or { margin: 4px 0 12px; text-align: center; color: var(--muted); }
.account > button { display: flex; margin-inline: auto; }
.account > .note { text-align: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0 var(--step); }
.stats > div { padding: 8px 12px; background: var(--bg); box-shadow: var(--edge); }
.stats dt { color: var(--muted); font-size: 14px; }
.stats dd { margin: 0; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.recent { width: 100%; border-collapse: collapse; }
.recent th, .recent td { padding: 8px 4px; border-bottom: 1px solid var(--rule); text-align: left; }
.recent th { color: var(--muted); font-size: 14px; }
.recent th:last-child, .recent td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.confirm .actions { margin-bottom: 12px; }
/* A button that reads as a link: the guest line under the result. */
button.link, button.link:hover, button.link:active { min-height: 44px; margin: 0; padding: 0; background: none; box-shadow: none; transform: none; color: var(--link); font-weight: 400; text-align: left; text-decoration: underline; }
button.link:hover { text-decoration-thickness: 3px; }
/* The privacy page: one readable column, left aligned with the header. */
main.doc { display: block; max-width: 720px; }
.doc h2 { margin: 32px 0 8px; font-size: 18px; }
.doc ul { margin: 0 0 12px; padding-left: 24px; }
.doc li { margin-bottom: 8px; }
.doc .note { margin: 0 0 16px; }
.doc h3 { margin: 20px 0 4px; font-size: 16px; }
a.privacy, footer a.foot { display: inline-flex; align-items: center; min-height: 44px; }
footer a.foot { margin-right: 16px; }

#all-countries { display: inline-flex; align-items: center; min-height: 48px; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; }

/* Desktop: one 1120 px container. The game on the left, the ranking and a 300x250 advert on the right.
   Reading order is the DOM order: the game first, then the ranking. The top is tight so the 576 px outline and the answer field share a 900 px window. */
@media (min-width: 1024px) {
    :root { --c: 288px; }
    body { max-width: 1184px; padding: 0 32px 64px; font-size: 18px; }
    h1 { margin: 0 0 4px; font-size: 32px; }
    h2 { margin: 48px 0 12px; font-size: 22px; }
    .top { padding: 4px 0; }
    .sky { margin-top: 8px; }
    .scene { height: 56px; }
    main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; column-gap: 52px; align-items: start; padding-top: 16px; }
    .game { grid-column: 1; grid-row: 1; }
    .lead { margin-bottom: 8px; }
    .side { grid-column: 2; grid-row: 1; align-self: start; }
    .home .side { grid-row: 1 / span 2; }
    .more { grid-column: 1; grid-row: 2; }
    .home .more h2:first-child { margin-top: 56px; }
    /* The daily round: outline on the left, status, field and tries on its right, a panel or the result under both. */
    .round { --c: 288px; display: grid; grid-template-columns: calc(var(--c) + var(--step) * 2) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 32px; align-content: start; }
    .round > * { grid-column: 1 / -1; }
    .round > .setup { grid-row: 1; margin: 8px 0 16px; }
    .round > .stage { display: contents; }
    .round .stage canvas { grid-column: 1; grid-row: 2 / span 3; align-self: start; width: var(--c); max-width: none; margin: var(--step); }
    .round .stage .status { grid-column: 2; grid-row: 2; min-height: 0; margin: 16px 0 4px; text-align: left; }
    .round > #guess-form { grid-column: 2; grid-row: 3; }
    .round > #guess-form label { margin-bottom: 4px; }
    .round > .tries { grid-column: 2; grid-row: 4; align-self: start; margin-top: 8px; }
    .round > .panel, .round > #result { grid-row: 5; }
    .round > .panel { margin-top: 24px; }
    .home h1 { font-size: 44px; }
    .home .lead { margin-bottom: 8px; font-size: 18px; }
    .brand { font-size: 16px; }
    .tries li { padding: 10px 0; }
    .ranking > li { padding: 4px 0; }
    .ranking > li > .today { margin-top: -8px; }
    .code, .today, .ad, footer { font-size: 15px; }
    #countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 32px; }
    .ranking.plain .who { flex-wrap: nowrap; }
    .ranking.plain .today { margin-left: auto; white-space: nowrap; }
    .ad.narrow { display: none; }
    .ad.rect { display: flex; width: 300px; height: 250px; margin: 24px auto 0; }
    .ad.rect .size::before { content: '300 x 250'; }
    .ad.foot { grid-column: 1 / -1; grid-row: 2; margin-top: 48px; }
    .ranking > li.mine { margin-inline: -8px; }
    footer { margin-top: 64px; padding-right: max(0px, calc(100% - 760px)); }

    /* A country's page. The outline is 288 px (window under 900 px tall): it sits on the left, and the answer field, Probar and the tries on its right.
       "Intento N de 6" shares the title line. The result and the word search run under both, full width. */
    [data-country] .game { display: grid; grid-template-columns: calc(var(--c) + var(--step) * 2) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 32px; align-content: start; }
    [data-country] .game > * { grid-column: 1 / -1; }
    [data-country] .game > h1 { grid-row: 1; align-self: baseline; padding-right: 15rem; }
    [data-country] .game > .lead { grid-row: 2; }
    [data-country] .stage { display: contents; }
    [data-country] .stage .status { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: baseline; min-height: 0; margin: 0; white-space: nowrap; }
    [data-country] .stage canvas { grid-column: 1; grid-row: 3 / span 2; align-self: start; width: var(--c); max-width: none; margin: var(--step); }
    [data-country] #guess-form { grid-column: 2; grid-row: 3; }
    [data-country] #guess-form label { margin-bottom: 4px; }
    [data-country] .error { min-height: 20px; margin-top: 4px; }
    [data-country] .tries { grid-column: 2; grid-row: 4; align-self: start; margin-top: 8px; }
    [data-country] #result { grid-row: 5; }
    #result h2 { margin-top: 32px; }
    /* Points and share on one line, the text above and the status below at full width. */
    #result { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
    #result > h2, #result > p:not(.points) { flex: 0 0 100%; }
    #result > .celebrate { flex: 1 1 100%; }
    #result .points { margin-block: 8px 0; }
    #result .actions { margin-top: 16px; }
}
/* From 1184 px the game column is 728 px wide: the 728x90 advert sits under it and the ranking column runs beside both. */
@media (min-width: 1184px) {
    .side { grid-row: 1 / span 2; }
    .ad.foot { grid-column: 1; margin-top: 32px; }
}
/* The same query as `big` in play.js: 576 px is 288 times two, so every grid side still divides it. The outline takes the whole row, the field and the tries go under it. */
@media (min-width: 1100px) and (min-height: 900px) {
    :root { --c: 576px; }
    [data-country] .game { grid-template-rows: auto auto auto auto 1fr; }
    [data-country] .stage canvas { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
    [data-country] #guess-form { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
    [data-country] .tries { grid-column: 1 / -1; grid-row: 5; }
    [data-country] #result { grid-row: 6; }
}
/* The home outline is 576 px from the same window as the practice one. The 728 px column has no room beside it, so everything stacks and is packed to leave the answer field
   and Probar in view at 1763x921: the two controls share a row with the progress ("Intento 1 de 6") and the mode hint goes under the outline. */
@media (min-width: 1100px) and (min-height: 900px) {
    .sky { margin-top: 4px; }
    .scene { height: 48px; }
    .sky .pause { bottom: 4px; }
    main.home { padding-top: 8px; }
    .home h1 { margin-bottom: 0; font-size: 36px; }
    .home .lead { margin-bottom: 0; font-size: 16px; }
    .round { --c: 576px; --flame: 96px; grid-template-columns: auto auto 1fr; grid-template-rows: none; column-gap: 16px; align-items: center; }
    .round > .setup { display: contents; }
    .round .setup .field { display: flex; align-items: center; gap: 8px; flex: none; grid-row: 1; min-width: max-content; margin: 0; }
    .round .setup .field:first-child { grid-column: 1; }
    .round .setup .field:nth-child(2) { grid-column: 2; }
    .round .setup label, .round .setup .label { margin: 0; white-space: nowrap; }
    .round #me { width: 200px; margin: var(--step) 0; }
    .round .stage .status { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; margin: 0; }
    .round .stage canvas { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: var(--step); }
    .round .setup .hint { grid-column: 1 / -1; grid-row: 3; min-height: 0; margin: 4px 0 0; font-size: 14px; text-align: center; }
    .round > #guess-form { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; margin-top: 0; }
    .round > #guess-form label { margin: 0; }
    .round > #guess-form .error { grid-column: 1 / -1; min-height: 0; margin-top: 4px; }
    .round > .tries { grid-column: 1 / -1; grid-row: 5; }
    .round > .panel, .round > #result { grid-row: 6; }
}
/* Sticky only when the column fits the window, or its lower part could never be reached. */
@media (min-width: 1024px) and (min-height: 880px) {
    .side { position: sticky; top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    button:active, .button:active { transform: none; }
    .tries li.enter, .tries li.enter .bar i.on { animation: none; }
    .scene.ready * { transition: none !important; }
    .round .stage canvas, .flag canvas { animation: none !important; }
}
.round .stage .status:empty { min-height: 0; margin: 0; }