/* The games (/games/pinpoint/, /games/flag-guessr/; the owner, 2026-10-29). A round is the map across the whole window
   (assets/game-map.js) with glass over it, as the app's floating controls are glass: the back circle, the clock
   and counters and End along the top, the zoom buttons at the side, and at the foot the pill that says what to
   find, the download pill (/shared/components/download-pill.css) a size up. The start and the results are cards over
   the map; the results print the round as the app's scorecard (`PinpointScoreCard`), paper in both appearances.
   The menus (/games/pinpoint/, /games/flag-guessr/) are the free tools' column (tools.css) with the regions as cards. */

/* MARK: The map */

.gm{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  cursor:grab;background:#64aee6;outline:none}
.gm.is-panning{cursor:grabbing}
.gm.is-over-country{cursor:pointer}
.gm-svg,.gm-over{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.gm-over{pointer-events:none}
.gm-svg rect,.gm-svg image,.gm-dots,.gm-shore,.gm-context,.gm-resolved,.gm-lit{pointer-events:none}
.gm-dots{fill-opacity:.15}
.gm-shore{display:none}
.gm.is-close:not(.is-moving) .gm-shore{display:inline}
.gm-shore use{fill:none;stroke:#fff;stroke-linejoin:round}
.gm-shore-wide use{stroke-opacity:.1;stroke-width:7px}
.gm-shore-narrow use{stroke-opacity:.28;stroke-width:2.6px}
.gm-context use{stroke:rgba(12,34,44,.16);stroke-width:.6px;stroke-linejoin:round}
.gm-play use{stroke:rgba(14,46,24,.36);stroke-width:.8px;stroke-linejoin:round;transition:fill .3s var(--ease)}
/* found: the app's green, a shade deeper on the map; wrong: the visited red; each with a white inner edge */
.gm-play use.is-found{fill:#188a4b}
.gm-play use.is-wrong{fill:#d9453b}
.gm-edge{fill:none;stroke:#fff;stroke-width:4.8px;stroke-linejoin:round}
.gm-lit{fill:#fff;fill-opacity:0;stroke:#fff;stroke-opacity:0;stroke-width:2px;stroke-linejoin:round;transition:fill-opacity .15s,stroke-opacity .15s}
.gm-lit.is-on{fill-opacity:.2;stroke-opacity:.95}
.gm.is-off .gm-lit{display:none}

.gm-marker-dot{stroke:#fff;stroke-width:2px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.gm-marker.is-hover .gm-marker-dot{stroke-width:3px}
.gm-flag-shadow{fill:rgba(0,0,0,.2)}
.gm-flag-ring{fill:#fff}
.gm-flag.is-found .gm-flag-ring{fill:#fff;stroke:#188a4b;stroke-width:1.6px}
.gm-flag.is-wrong .gm-flag-ring{fill:#fff;stroke:#d9453b;stroke-width:1.6px}
.gm-pulse circle{fill:none;stroke-width:3px;transform-box:fill-box;transform-origin:center;animation:gm-pulse 1s var(--ease) forwards}
.gm-pulse.is-found circle{stroke:#fff}
.gm-pulse.is-wrong circle{stroke:#ffd5d0}
@keyframes gm-pulse{from{transform:scale(1);opacity:1}to{transform:scale(3.6);opacity:0}}

/* MARK: A round's page */

body.game{position:fixed;inset:0;overflow:hidden;margin:0;background:#64aee6;color:var(--text-dark);overscroll-behavior:none;
  --glass:rgba(250,250,252,.84);--glass-fg:var(--text-dark);--glass-line:rgba(0,0,0,.08);--glass-shadow:0 12px 32px -8px rgba(10,30,60,.32);
  --found:#1e9e58;--wrong:#d9453b;--top:calc(env(safe-area-inset-top) + 12px)}
@media (prefers-color-scheme:dark){
  body.game{--glass:rgba(22,22,26,.78);--glass-fg:#f3f4f8;--glass-line:rgba(255,255,255,.1);--glass-shadow:0 12px 32px -8px rgba(0,0,0,.6);
    --found:#3cc47a;--wrong:#ff6b5e}
}
.g-stage{position:absolute;inset:0}
.glass{color:var(--glass-fg);background:var(--glass);-webkit-backdrop-filter:saturate(150%) blur(20px);backdrop-filter:saturate(150%) blur(20px);
  box-shadow:0 0 0 1px var(--glass-line),var(--glass-shadow)}
.g-stage .ic{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

.g-top{position:absolute;z-index:5;top:var(--top);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.g-top > *{pointer-events:auto}
.g-circle,.g-capsule{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:800;text-decoration:none;transition:transform .12s var(--ease)}
.g-circle{width:44px;flex:none;font-size:22px}
.g-capsule{padding:0 18px}
.g-circle:active,.g-capsule:active{transform:scale(.96)}
.g-circle:focus-visible,.g-capsule:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.g-status{display:flex;align-items:center;gap:14px;height:44px;padding:0 18px;border-radius:999px;font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.g-status > span{display:inline-flex;align-items:center;gap:5px;transition:color .25s var(--ease)}
.g-status .ic{font-size:15px;opacity:.6}
.g-clock{font-size:18px}
.g-clock .ic{opacity:.45}
.g-status .is-lit-found{color:var(--found)}
.g-status .is-lit-wrong{color:var(--wrong)}
.g-status .is-lit-found .ic,.g-status .is-lit-wrong .ic{opacity:1}
@media (max-width:420px){.g-status{gap:11px;padding:0 14px;font-size:15px}.g-clock{font-size:17px}.g-capsule{padding:0 14px}}

.g-zoom{position:absolute;z-index:4;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden}
.g-zoom button{width:44px;height:44px;border:0;background:none;color:inherit;font:inherit;font-size:22px;font-weight:700;cursor:pointer;display:grid;place-items:center}
.g-zoom button + button{border-top:1px solid var(--glass-line)}
.g-zoom button:hover{background:rgba(127,127,127,.12)}
.g-zoom button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (pointer:coarse){.g-zoom{display:none}}

/* The pill: what to find, a size up from the download pill. */
.g-pill{position:absolute;z-index:5;left:0;right:0;margin-inline:auto;width:min(620px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  bottom:calc(16px + env(safe-area-inset-bottom) + var(--kb,0px));min-height:76px;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 14px;border-radius:40px;transition:transform .45s var(--ease),opacity .3s var(--ease),bottom .2s var(--ease)}
.g-pill[hidden]{display:flex;opacity:0;visibility:hidden;transform:translateY(calc(100% + 28px));pointer-events:none}
.g-pill-flag{flex:none;width:54px;height:39px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12);background:#fff}
.g-pill-text{flex:1;min-width:0;margin:0;font-size:clamp(20px,1.6vw + 12px,26px);font-weight:800;line-height:1.12;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.g-pill-text .find{color:color-mix(in srgb,var(--glass-fg) 52%,transparent);font-weight:700}
.g-pill-text.is-new{animation:g-slide .34s var(--ease)}
@keyframes g-slide{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.g-pill .toy-btn{flex:none;min-height:54px;padding:0 22px;font-size:17px}
.g-pill .toy-btn .ic{font-size:16px}
.g-pill.is-shake{animation:g-shake .42s}
@keyframes g-shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (max-width:420px){
  .g-pill{gap:10px;padding:8px 8px 8px 10px;min-height:68px}
  .g-pill-flag{width:44px;height:32px}
  .g-pill .toy-btn{min-height:48px;padding:0 16px;font-size:16px}
}

/* The words after a tap, over the map under the bar: "Portugal", "That's Spain". */
.g-caption{position:absolute;z-index:5;left:50%;top:calc(var(--top) + 56px);transform:translate(-50%,-6px);padding:9px 16px;border-radius:999px;
  font-size:16px;font-weight:800;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .25s var(--ease);
  display:inline-flex;align-items:center;gap:8px}
.g-caption.is-shown{opacity:1;transform:translate(-50%,0)}
.g-caption.is-found{color:var(--found)}
.g-caption.is-wrong{color:var(--wrong)}
.g-caption img{width:24px;height:17px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* Flag Guessr's words stand over the pill: the top is the flag's. */
.g-stage[data-game="flag-guessr"] .g-caption{top:auto;bottom:calc(104px + env(safe-area-inset-bottom) + var(--kb,0px));transform:translate(-50%,6px)}
.g-stage[data-game="flag-guessr"] .g-caption.is-shown{transform:translate(-50%,0)}

/* Play without the map: for a keyboard or a screen reader, the target and three countries near it as buttons
   (the app's VoiceOver choices, `PinpointHUD.choices`). Out of sight until its switch has the focus. */
.g-access{position:absolute;z-index:6;left:12px;bottom:calc(100px + env(safe-area-inset-bottom));padding:10px 14px;border-radius:14px;font-size:14px;font-weight:800;border:0;cursor:pointer;
  transform:translateX(-200%)}
.g-access:focus-visible{transform:none;outline:3px solid var(--accent);outline-offset:2px}
.g-choices{position:absolute;z-index:5;left:0;right:0;margin-inline:auto;width:min(620px,calc(100vw - 24px));bottom:calc(104px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:24px}
.g-choices[hidden]{display:none}
.g-choices button{min-height:48px;border:0;border-radius:14px;background:var(--card);color:var(--text-dark);font:inherit;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 0 0 1.5px var(--card-edge) inset,0 3px 0 var(--card-lip)}
.g-choices button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* MARK: Start and results */

.g-sheet{position:absolute;z-index:8;inset:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 16px) 14px calc(env(safe-area-inset-bottom) + 16px);
  background:rgba(8,24,48,.3);overflow:auto;transition:opacity .3s var(--ease)}
.g-sheet[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}
.g-card{width:min(470px,100%);padding:clamp(22px,4vw,30px);border-radius:30px;background:var(--card);color:var(--text-dark);
  box-shadow:0 0 0 1.5px var(--card-edge) inset,0 24px 60px -20px rgba(0,20,60,.5);animation:g-rise .45s var(--ease)}
.g-sheet[hidden] .g-card{animation:none}
@keyframes g-rise{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.g-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mid)}
.g-kicker .ic{font-size:18px;color:var(--found)}
.g-card h1{margin:10px 0 0;font-size:clamp(32px,6vw,44px);line-height:1.04;letter-spacing:-.03em;font-weight:900}
.g-card h2{margin:10px 0 0;font-size:clamp(26px,5vw,34px);line-height:1.08;letter-spacing:-.025em;font-weight:900}
.g-lead{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--text-mid)}
.g-rules{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.g-rules li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;color:var(--text-dark)}
.g-rules .ic{flex:none;margin-top:3px;font-size:16px;color:var(--text-mid)}
.g-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0}
.g-actions .toy-btn{min-height:50px;padding:0 22px;font-size:16.5px;text-decoration:none}
.g-actions .toy-btn.big{min-height:56px;padding:0 30px;font-size:18px}
.g-actions .toy-btn.prominent{color:#fff}
.g-best{margin:0 0 0 auto;font-size:15px;font-weight:800;color:var(--text-mid);font-variant-numeric:tabular-nums}
.g-small{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-mid)}
.g-small a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.g-results{width:min(560px,100%)}
@media (min-width:900px){.g-results{width:min(1000px,100%)}}
.g-app{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:14px;border-radius:20px;background:var(--paper)}
.g-app img{flex:none;width:44px;height:44px;border-radius:10px}
.g-app span{flex:1;font-size:14.5px;line-height:1.4;color:var(--text-mid)}
.g-app b{color:var(--text-dark)}
.g-app a{flex:none;font-size:15px;font-weight:800;color:var(--accent);text-decoration:none}

/* The scorecard: card stock, a bold green edge, a fairway-green band, a ruled grid of the region's flags (found:
   a green ring and a tick; lost to a wrong tap or a miss: a red cross; never reached: faint), boxed totals, and a
   rubber stamp. Paper in both appearances, as the app's artifacts are. */
.sc{position:relative;margin:18px 0 0;border-radius:22px;background:#f7f4ee;color:#1c1a18;box-shadow:0 0 0 3px #2b7334 inset,0 4px 12px rgba(0,0,0,.12);
  overflow:hidden;font-family:var(--font)}
.sc-head{display:flex;align-items:center;gap:10px;padding:13px 18px 12px;background:#2f8c3a;color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;border-bottom:3px solid #2b7334}
.sc-head span{opacity:.85}
.sc-head time{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.02em;opacity:.9}
.sc-sub{display:flex;justify-content:space-between;gap:10px;padding:10px 18px 4px;font-size:13px;font-weight:800;color:#77706a;letter-spacing:.04em;text-transform:uppercase}
.sc-sub b{color:#1c1a18}
.sc-grid{display:grid;grid-template-columns:repeat(9,1fr);margin:6px 14px 0;border-top:1.5px solid #e2dccf;border-left:1.5px solid #e2dccf}
.sc-cell{position:relative;aspect-ratio:1;border-right:1.5px solid #e2dccf;border-bottom:1.5px solid #e2dccf;display:grid;place-items:center}
.sc-cell img{width:62%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sc-cell.is-open img{opacity:.28;filter:grayscale(.6)}
.sc-cell.is-found img{box-shadow:0 0 0 2px #1e9e58}
.sc-cell::after{position:absolute;right:6%;bottom:6%;width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;color:#fff;line-height:1}
.sc-cell.is-found::after{content:"✓";background:#1e9e58}
.sc-cell.is-missed::after{content:"✕";background:#d9453b}
.sc-totals{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 14px 16px}
.sc-box{padding:8px 6px 7px;border:1.5px solid #cfc7b8;border-radius:10px;text-align:center;min-width:0}
.sc-box span{display:block;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#77706a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-box b{display:block;margin-top:3px;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sc-box.is-score{border:3px double #2b7334;background:#fff}
.sc-stamp{position:absolute;right:22px;top:38%;padding:6px 12px 5px;border:3px solid currentColor;border-radius:10px;font-size:22px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;transform:rotate(-11deg);opacity:.86;mix-blend-mode:multiply;animation:sc-thump .5s .55s var(--ease) both}
.sc-stamp.is-best{color:#1e8a4a}
.sc-stamp.is-unranked{color:#d9453b}
@keyframes sc-thump{from{transform:rotate(-11deg) scale(1.9);opacity:0}70%{transform:rotate(-11deg) scale(.96);opacity:.9}to{transform:rotate(-11deg) scale(1);opacity:.86}}
@media (max-width:480px){
  .sc-head span,.sc-sub span:last-child{display:none}
  .sc-grid{grid-template-columns:repeat(7,1fr)}
  .sc-totals{grid-template-columns:repeat(3,1fr)}
  .sc-box.is-score{grid-column:span 1}
}

/* MARK: Flag Guessr */

.fg-flag{position:absolute;z-index:4;left:50%;top:calc(var(--top) + 60px);transform:translateX(-50%);width:min(300px,64vw,calc((100dvh - 330px) * 1.4));
  padding:10px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset,0 18px 40px -14px rgba(0,20,60,.45);transition:opacity .3s var(--ease)}
.fg-flag[hidden]{display:block;opacity:0;visibility:hidden}
.fg-flag img{display:block;width:100%;aspect-ratio:21/15;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.fg-flag.is-new img{animation:fg-in .4s var(--ease)}
@keyframes fg-in{from{transform:translateX(30px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
.fg-flag.is-right{animation:fg-right .45s var(--ease)}
@keyframes fg-right{40%{transform:translateX(-50%) scale(1.04)}}
.fg-input{flex:1;min-width:0;height:54px;padding:0 6px 0 12px;border:0;background:none;color:inherit;font:inherit;font-size:21px;font-weight:800;letter-spacing:-.01em;outline:none}
.fg-input::placeholder{color:color-mix(in srgb,var(--glass-fg) 45%,transparent);font-weight:700}
.g-pill:has(.fg-input:focus){box-shadow:0 0 0 2px var(--accent),var(--glass-shadow)}
.fg-suggest{position:absolute;z-index:6;left:0;right:0;margin-inline:auto;width:min(620px,calc(100vw - 24px));
  bottom:calc(100px + env(safe-area-inset-bottom) + var(--kb,0px));margin-top:0;padding:6px;border-radius:22px;list-style:none;max-height:min(300px,42vh);overflow:auto}
.fg-suggest[hidden]{display:none}
.fg-suggest li{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:14px;font-size:17px;font-weight:800;cursor:pointer}
.fg-suggest li[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.fg-suggest li span{margin-left:auto;font-size:13px;font-weight:700;color:color-mix(in srgb,var(--glass-fg) 50%,transparent)}
@media (max-width:420px){.fg-input{font-size:19px;height:48px}.fg-suggest{bottom:calc(88px + env(safe-area-inset-bottom) + var(--kb,0px))}}

/* MARK: The menus: a title screen (the owner, 29 October: "the app menu should look a bit more like a game. It's too
   plain"). The game's name big over the night ocean, a screen where a crosshair hunts countries by itself (attract
   mode; still under Reduce Motion), the app's continent stamps, your best and the record, and Play; then the
   leaderboard, how to play and every region as a card. Each game wears its ink: Pinpoint the app's green (`Ink.now`),
   Flag Guessr the wishlist violet. */

body.game-menu{--ink:#1e9e58;--ink-deep:#126b3a;--night:#0d2f5c}
body.game-menu[data-game="flag-guessr"],.gl-game[data-game="flag-guessr"]{--ink:#7c5be6;--ink-deep:#5537b8}
.game-menu .ic{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

.mn-hero{position:relative;overflow:hidden;color:#fff;padding:calc(var(--nav-h) + clamp(30px,6vh,64px)) var(--pad) clamp(44px,8vh,88px);
  background:radial-gradient(900px 520px at 78% 30%,rgba(110,185,255,.32),transparent 65%),radial-gradient(700px 420px at 10% 100%,rgba(30,158,88,.18),transparent 70%),
    linear-gradient(180deg,#0b2850 0%,#123f78 60%,#18528f 100%)}
.game-menu[data-game="flag-guessr"] .mn-hero{background:radial-gradient(900px 520px at 78% 30%,rgba(110,185,255,.32),transparent 65%),
    radial-gradient(700px 420px at 10% 100%,rgba(124,91,230,.28),transparent 70%),linear-gradient(180deg,#0b2850 0%,#123f78 60%,#18528f 100%)}
/* the map's lines of latitude and longitude, faint, fading out at the edges */
.mn-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.07) 1.5px,transparent 1.5px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.mn-hero-in{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.mn-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.mn-kicker .ic{font-size:17px;color:var(--ink);filter:brightness(1.35)}
a.mn-kicker{color:#fff;text-decoration:none;transition:background .2s var(--ease)}
a.mn-kicker:hover{background:rgba(255,255,255,.2)}
a.mn-kicker:focus-visible{outline:3px solid #fff;outline-offset:3px}
.game-menu .mn-title{margin:18px 0 0;font-size:clamp(58px,8.6vw,118px);line-height:.9;font-weight:900;letter-spacing:-.04em;color:#fff;
  text-shadow:0 5px 0 var(--ink-deep),0 9px 0 rgba(0,0,0,.18),0 22px 44px rgba(0,0,0,.35)}
.mn-tagline{margin:18px 0 0;max-width:24ch;font-size:clamp(19px,1.7vw,24px);line-height:1.3;font-weight:800;color:rgba(255,255,255,.86)}
.mn-pick{margin:26px 0 0}
.mn-label{margin:0 0 10px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.mn-stamps{display:flex;flex-wrap:wrap;gap:10px}
/* the app's rubber stamps: two letters in a ring, each a little turned; the chosen one inked */
.mn-stamp{display:grid;place-items:center;width:58px;height:58px;padding:0;border:3px solid rgba(255,255,255,.8);border-radius:50%;background:transparent;color:#fff;
  font:inherit;font-size:16px;font-weight:900;letter-spacing:.02em;cursor:pointer;transform:rotate(var(--tilt,0deg));box-shadow:inset 0 0 0 3px rgba(255,255,255,.14);
  transition:transform .3s var(--spring),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.mn-stamp .ic{font-size:25px}
.mn-stamp:hover{transform:rotate(var(--tilt,0deg)) scale(1.07);border-color:#fff}
.mn-stamp[aria-checked="true"]{background:var(--ink);border-color:#fff;transform:rotate(var(--tilt,0deg)) scale(1.14);box-shadow:0 4px 0 var(--ink-deep),0 10px 22px rgba(0,0,0,.3)}
.mn-stamp:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mn-chosen{margin:22px 0 0;padding:18px 18px 18px;border-radius:28px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.mn-chosen-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.mn-chosen-head b{font-size:28px;font-weight:900;letter-spacing:-.02em}
.mn-chosen-head > span{font-size:15px;font-weight:800;color:rgba(255,255,255,.72)}
.mn-chosen .r-stars{margin-left:auto;font-size:17px}
.mn-chosen .r-stars i{color:rgba(255,255,255,.22)}
.mn-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.mn-scores div{padding:10px 14px;border-radius:18px;background:rgba(5,20,45,.32);min-width:0}
.mn-scores dt{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.mn-scores dt .ic{color:#f2b33d}
.mn-scores dd{margin:3px 0 0;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-scores dd.is-none{font-size:15px;color:rgba(255,255,255,.62)}
.mn-play{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 0;min-height:68px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:23px;font-weight:900;letter-spacing:-.01em;text-decoration:none;
  box-shadow:0 5px 0 var(--ink-deep),0 16px 32px rgba(0,0,0,.32);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.mn-play .ic{font-size:22px}
.mn-play::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:3px solid var(--ink);opacity:0;animation:mn-glow 2.4s var(--ease) infinite}
@keyframes mn-glow{0%{opacity:.7;transform:scale(.97)}70%,100%{opacity:0;transform:scale(1.06)}}
.mn-play:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink-deep),0 18px 34px rgba(0,0,0,.34)}
.mn-play:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink-deep),0 8px 18px rgba(0,0,0,.3)}
.mn-play:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* the screen: a round's map, a little turned, where the crosshair plays by itself */
.mn-screen{position:relative;padding:10px;border-radius:32px;background:#081a35;transform:rotate(1.4deg);
  box-shadow:0 0 0 3px rgba(255,255,255,.13),0 9px 0 #061328,0 34px 70px rgba(0,0,0,.45)}
.mn-screen-top{display:flex;align-items:center;gap:7px;padding:3px 8px 10px}
.mn-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.mn-dot:first-child{background:var(--ink)}
.mn-clock{display:inline-flex;align-items:center;margin-left:auto;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;
  font:800 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.mn-map{display:block;width:100%;aspect-ratio:4/3;border-radius:22px;background:#64aee6}
.mn-map image{transition:opacity .35s var(--ease)}
.mn-map.is-swapping image{opacity:0}
.mn-cross{transition:transform .85s cubic-bezier(.55,0,.2,1)}
.mn-cross path{stroke:#fff;stroke-width:5;stroke-linecap:round;fill:none}
.mn-cross-ring{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:5}
.mn-cross-dot{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.mn-cross-ping{fill:none;stroke:#fff;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
.mn-cross.is-hit .mn-cross-ping{animation:mn-ping .7s var(--ease)}
@keyframes mn-ping{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
.mn-mark circle{fill:var(--ink);stroke:#fff;stroke-width:4}
.mn-mark path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.mn-mark,.mn-badge{animation:mn-pop .45s var(--spring) both;transform-box:fill-box;transform-origin:center}
@keyframes mn-pop{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
.mn-marks-out .mn-mark,.mn-marks-out .mn-badge{animation:mn-out .35s var(--ease) forwards}
@keyframes mn-out{to{opacity:0}}
/* what the screen asks: the round's pill, small */
/* max-content: placed from the middle, it would otherwise shrink to the half of the screen right of it ("Find Bela…") */
.mn-ask{position:absolute;left:50%;bottom:24px;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 40px);padding:7px 16px 7px 7px;border-radius:999px;
  background:rgba(250,250,252,.92);color:#16171c;font-size:17px;font-weight:800;white-space:nowrap;transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 12px 26px -8px rgba(0,0,0,.4)}
.mn-ask:empty{display:none}
.mn-ask img{width:40px;height:29px;border-radius:7px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.mn-ask img.is-big{width:64px;height:46px;border-radius:9px}
.mn-ask span{color:#77757d}
.mn-ask b{overflow:hidden;text-overflow:ellipsis}
.mn-ask.is-new{animation:mn-ask .4s var(--ease)}
@keyframes mn-ask{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.mn-ask .mn-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px}
.mn-found{display:inline-flex;align-items:center;margin-left:auto;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:800 14px/1 var(--font);font-variant-numeric:tabular-nums}
.mn-found + .mn-clock{margin-left:6px}

/* Flag Guessr's screen plays its own round: the flag card on top, the answer box at the foot being typed into, the
   list as it types, and each country named landing on the map as a round flag, as in the game. */
[data-game="flag-guessr"] .mn-cross{display:none}
.mn-badge-ring{fill:#fff}
.mn-badge-edge{fill:none;stroke:var(--ink);stroke-width:2}
.mn-fg-flag{position:absolute;left:50%;top:62px;width:min(34%,200px);margin:0;padding:6px;border-radius:14px;background:#fff;transform:translateX(-50%) rotate(-1.5deg);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.06),0 14px 28px -10px rgba(0,20,60,.55)}
.mn-fg-flag img{display:block;width:100%;aspect-ratio:21/15;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.mn-fg-flag.is-new img{animation:fg-in .4s var(--ease)}
.mn-fg-flag.is-right{animation:mn-right .45s var(--ease)}
@keyframes mn-right{40%{transform:translateX(-50%) rotate(-1.5deg) scale(1.07)}}
.mn-fg-input{position:absolute;left:50%;bottom:22px;display:flex;align-items:center;gap:8px;width:min(80%,420px);padding:6px 6px 6px 16px;border-radius:999px;
  background:rgba(250,250,252,.95);transform:translateX(-50%);box-shadow:0 0 0 2px var(--accent),0 14px 28px -8px rgba(0,0,0,.45)}
.mn-fg-input.is-shake{animation:mn-shake .42s}
@keyframes mn-shake{20%{transform:translateX(calc(-50% - 9px))}40%{transform:translateX(calc(-50% + 8px))}60%{transform:translateX(calc(-50% - 5px))}80%{transform:translateX(calc(-50% + 3px))}}
.mn-fg-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:#16171c;font-size:17px;font-weight:800;line-height:34px}
/* the caret after what's typed; empty, before the placeholder */
.mn-fg-text::after,.mn-fg-text:empty::before{content:"";display:inline-block;width:2px;height:20px;margin-left:1px;vertical-align:-4px;background:var(--accent);animation:mn-caret 1s steps(1) infinite}
.mn-fg-text:empty::before{margin:0 2px 0 0}
.mn-fg-text:empty::after{content:"Which country?";width:auto;height:auto;margin:0;vertical-align:baseline;background:none;animation:none;color:#9a98a0;font-weight:700}
.mn-fg-input.is-still .mn-fg-text::after{display:none}
@keyframes mn-caret{50%{opacity:0}}
.mn-fg-skip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:8px 13px 7px;border-radius:999px;background:#fff;color:#16171c;font-size:13.5px;font-weight:800;
  box-shadow:0 0 0 1.5px #e8e3d9 inset,0 2px 0 #e1dbcf}
.mn-fg-skip .ic{font-size:12px}
.mn-fg-list{position:absolute;left:50%;bottom:74px;width:min(80%,420px);margin:0;padding:5px;list-style:none;border-radius:16px;background:rgba(250,250,252,.97);
  transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 14px 28px -10px rgba(0,0,0,.45)}
.mn-fg-list:empty{display:none}
.mn-fg-list li{padding:7px 12px;border-radius:10px;color:#16171c;font-size:15px;font-weight:800}
.mn-fg-list li.is-on{background:color-mix(in srgb,var(--accent) 16%,#fff)}
.mn-fg-caption{position:absolute;left:50%;bottom:76px;width:max-content;max-width:calc(100% - 40px);display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;background:rgba(250,250,252,.95);
  font-size:15px;font-weight:800;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .2s var(--ease),transform .25s var(--ease);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.mn-fg-caption.is-shown{opacity:1;transform:translate(-50%,0)}
.mn-fg-caption.is-found{color:#1e9e58}
.mn-fg-caption.is-wrong{color:#d9453b}
.mn-fg-caption img{width:22px;height:16px;border-radius:4px;object-fit:cover}
@media (max-width:480px){
  .mn-fg-flag{top:52px;width:40%}
  .mn-fg-input{bottom:16px;width:86%;padding-left:12px}
  .mn-fg-text{font-size:15px}
  .mn-fg-list{bottom:64px;width:86%}
  .mn-fg-list li{padding:5px 10px;font-size:14px}
  .mn-fg-caption{bottom:64px}
}

@media (max-width:900px){
  .mn-hero-in{grid-template-columns:minmax(0,1fr);gap:0}
  .mn-side{display:contents}
  .mn-kicker{order:1;justify-self:start}
  .mn-title{order:2}
  .mn-tagline{order:3}
  .mn-hero-in .mn-screen{order:4;margin:26px 0 0;transform:rotate(.8deg)}
  .mn-pick{order:5}
  .mn-chosen{order:6}
}
@media (max-width:480px){
  .mn-stamps{gap:6px;flex-wrap:nowrap}
  .mn-stamp{width:44px;height:44px;border-width:2.5px;font-size:13.5px}
  .mn-stamp .ic{font-size:20px}
  .mn-ask{bottom:16px;font-size:15px}
  .mn-ask img.is-big{width:52px;height:37px}
  .mn-play{font-size:21px;min-height:62px}
}
@media (prefers-reduced-motion:reduce){
  .mn-play::after{animation:none}
  .mn-cross{transition:none}
  .mn-stamp{transition:background .2s,border-color .2s}
}

/* below it: the board, how to play, and every region */
.tool .col.mn-col{padding-top:clamp(34px,6vh,56px)}
.mn-two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:760px){.mn-two{grid-template-columns:minmax(0,1fr)}}
.mn-two h2{display:flex;align-items:center;gap:8px;margin:0;font-size:22px}
.mn-two h2 .ic{color:#e0a21a;font-size:20px}
.mn-two h2 span{margin-left:auto;font-size:15px;font-weight:800;color:var(--text-mid)}
.mn-board .lb-box{margin:12px 0 0;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset}
.mn-board .lb-box > .lb-head{display:none}
.mn-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:step}
.mn-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"icon title" "icon text";column-gap:14px;align-items:center;padding:14px 16px;border-radius:22px;
  background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset}
.mn-step-icon{grid-area:icon;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;box-shadow:0 3px 0 var(--ink-deep)}
.mn-steps b{grid-area:title;font-size:17px;font-weight:900}
.mn-steps span:not(.mn-step-icon){grid-area:text;font-size:15px;line-height:1.4;color:var(--text-mid)}
.mn-levels-title{margin:48px 0 0}

/* every region, as the cards of a level select */
.regions{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.regions a{display:flex;flex-direction:column;height:100%;border-radius:26px;overflow:hidden;background:var(--card);color:var(--text-dark)!important;text-decoration:none!important;
  box-shadow:0 0 0 2px var(--card-edge) inset,0 5px 0 var(--card-lip);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.regions a:hover{transform:translateY(-3px);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 55%,var(--card-edge)) inset,0 8px 0 var(--card-lip)}
.regions a:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--card-edge) inset,0 1px 0 var(--card-lip)}
.regions a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.r-pic{position:relative;display:block;overflow:hidden}
.regions img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#64aee6;transition:transform .4s var(--ease)}
.regions a:hover img{transform:scale(1.04)}
.r-pic::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(6,24,48,.62));pointer-events:none}
.regions .r-name{position:absolute;z-index:1;left:16px;bottom:11px;color:#fff;font-size:23px;font-weight:900;letter-spacing:-.02em;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.r-stamp{position:absolute;z-index:1;top:11px;right:11px;display:grid;place-items:center;width:42px;height:42px;border:2.5px solid #fff;border-radius:50%;background:var(--ink);
  color:#fff;font-size:12.5px;font-weight:900;transform:rotate(var(--tilt,0deg));box-shadow:0 3px 0 var(--ink-deep)}
.r-stamp .ic{font-size:19px}
.regions .r-text{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:13px 16px 15px;flex:1}
.regions .r-count{font-size:14.5px;font-weight:800;color:var(--text-mid)}
.r-stars{font-size:14px;letter-spacing:1px;color:#f2a60c;white-space:nowrap}
.r-stars i{font-style:normal;color:var(--card-edge)}
.regions .r-best{width:100%;font-size:14px;font-weight:800;color:var(--text-mid);font-variant-numeric:tabular-nums}
.regions .r-best.is-set{color:#1e8a4a}
@media (prefers-color-scheme:dark){.regions .r-best.is-set{color:#5cc24e}}
.regions .r-record{display:flex;align-items:center;gap:5px;width:100%;min-width:0;font-size:13.5px;font-weight:800;color:var(--text-mid)}
.regions .r-record .ic{flex:none;font-size:14px;color:#e0a21a}
.r-go{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 14px 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:900;
  box-shadow:0 3px 0 var(--ink-deep)}
.r-go .ic{font-size:12px}
.regions li.is-wide{grid-column:1 / -1}
.regions li.is-wide a{flex-direction:row;align-items:stretch}
.regions li.is-wide .r-pic{width:min(55%,460px);flex:none}
.regions li.is-wide img{aspect-ratio:2/1;height:100%}
.regions li.is-wide .r-text{align-content:center;padding:18px 20px}
@media (max-width:560px){
  .regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .regions li.is-wide a{flex-direction:column}
  .regions li.is-wide .r-pic{width:100%}
  .regions .r-name{left:12px;bottom:8px;font-size:18px}
  .r-stamp{width:34px;height:34px;font-size:11px;top:8px;right:8px}
  .regions .r-text{padding:11px 12px 13px}
  .r-go{margin-left:0}
}

/* MARK: The start card's list of countries, and what only a screen reader hears */

.g-list{margin:16px 0 0;border-radius:16px;background:var(--paper)}
.g-list summary{padding:12px 16px;font-size:15px;font-weight:800;cursor:pointer;color:var(--text-dark)}
.g-list summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:16px}
.g-list p{margin:0;padding:0 16px 14px;font-size:14.5px;line-height:1.55;color:var(--text-mid);max-height:180px;overflow:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* MARK: The leaderboards (games.js, scores): each region's, from mksvrcek.com/g */

.g-results-grid{display:grid;gap:0 22px;align-items:start}
@media (min-width:900px){
  .g-results-grid{grid-template-columns:1.05fr 1fr}
  .g-results-card{order:-1}
}
.lb-box,.lb-mini{margin:18px 0 0;padding:16px 16px 14px;border-radius:22px;background:var(--paper)}
.lb-mini{padding:12px 14px 10px}
.lb-mini[hidden]{display:none}
.lb-head{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mid)}
.lb-head .ic{font-size:17px;color:#e0a21a}
.lb-head span{margin-left:auto;font-size:13px;font-weight:800;letter-spacing:0;text-transform:none}
.lb-line{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--text-dark)}
.lb-empty{margin:10px 0 2px;font-size:15px;line-height:1.45;color:var(--text-mid)}
.lb{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.lb li{display:grid;grid-template-columns:30px 26px minmax(0,1fr) auto;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 6px;border-radius:12px;font-size:15.5px}
.lb li:nth-child(1) .lb-rank{background:#e0a21a;color:#fff}
.lb li:nth-child(2) .lb-rank{background:#a7b0bc;color:#fff}
.lb li:nth-child(3) .lb-rank{background:#c98a5a;color:#fff}
.lb .lb-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12.5px;font-weight:900;color:var(--text-mid);font-variant-numeric:tabular-nums}
.lb .lb-flag{display:block;width:22px;height:16px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.lb span.lb-flag{box-shadow:none}
.lb .lb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;color:var(--text-dark)}
.lb .lb-name em{margin-left:4px;padding:1px 7px 2px;border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-style:normal;font-weight:900;vertical-align:1px}
.lb .lb-score{font-weight:900;font-variant-numeric:tabular-nums;color:var(--text-dark)}
.lb li.is-you{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.lb .lb-gap{display:block;min-height:0;padding:0 0 0 14px;color:var(--text-mid);font-weight:900;line-height:1}
.lb-mini .lb li{min-height:32px;font-size:15px}
.lb-form{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
/* the name: the shared field (mk-input, /shared/components/fields.css), a card on the board's paper */
.lb-form .mk-input{flex:1 1 180px;width:auto;--mk-field-bg:var(--card);--mk-field-weight:800}
.lb-form .toy-btn{min-height:48px;color:#fff}
.lb-error{flex-basis:100%;margin:0;font-size:14px;font-weight:700;color:var(--wrong)}
.lb-error:empty{display:none}

/* Start, while the map loads: the same word, quietly unready (busy, not a new label, so it doesn't change width). The
   keyboard ring stands clear of the lip under the button rather than across it. */
.g-actions .toy-btn[aria-busy="true"]{opacity:.55;cursor:progress}
.g-actions .toy-btn:disabled:active{transform:none}
.g-actions .toy-btn:focus-visible{outline-offset:6px}

/* MARK: The menus' foot: the other game */
.mn-other{margin:26px 0 0;font-size:16px;font-weight:700;color:var(--text-mid)}
.tool .col .mn-other a{font-weight:800}

/* MARK: The games' landing page (/games/; the owner, 29 October: "add a landing page to games"). The title screen's
   night sky, with each game a cabinet: its screen playing it by itself (going round the regions), its name in its
   ink, and Play. */
.gl-in{position:relative;max-width:1180px;margin:0 auto;text-align:center}
.gl-hero .mn-title{text-shadow:0 5px 0 #061a38,0 9px 0 rgba(0,0,0,.18),0 22px 44px rgba(0,0,0,.35)}
.gl-games{list-style:none;margin:clamp(34px,6vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,44px);text-align:left}
.gl-game{display:flex;flex-direction:column;padding:16px 16px 22px;border-radius:36px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.gl-game[data-game="pinpoint"]{--tip:-1.1deg}
.gl-game[data-game="flag-guessr"]{--tip:1.1deg}
.gl-game .mn-screen{transform:rotate(var(--tip))}
.gl-info{display:flex;flex-direction:column;padding:22px 8px 0}
.gl-game .gl-name{display:flex;align-items:center;gap:12px;margin:0;color:#fff;font-size:clamp(32px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1;
  text-shadow:0 3px 0 var(--ink-deep)}
.gl-name .ic{font-size:.7em;color:var(--ink);filter:brightness(1.3)}
.gl-tagline{margin:10px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.35;font-weight:800;color:rgba(255,255,255,.84)}
.gl-facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.gl-facts span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(5,20,45,.32);font-size:14px;font-weight:800;color:rgba(255,255,255,.86)}
.gl-facts .ic{color:#f2b33d}
.gl-game .mn-play{margin-top:20px}
.gl-best{margin:12px 0 0;min-height:1.4em;text-align:center;font-size:14.5px;font-weight:800;color:rgba(255,255,255,.66)}
.gl-best:empty{display:none}
@media (max-width:900px){
  .gl-games{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
}
@media (max-width:480px){
  .gl-game{padding:10px 10px 18px;border-radius:30px}
  .gl-info{padding:18px 6px 0}
}

/* /games/ is one blade (the owner, 1 November 2026: "even tho /games/ is two blades it should still have the unified
   background"): the title screen's sky runs on under the cabinets, the app on it as one more glass card, down to the
   footer, which takes the sky's last blue. The green's glow sits low but ends before the foot, so there's no seam. */
.gl-page main{background:radial-gradient(700px 380px at 10% calc(100% - 320px),rgba(30,158,88,.18),transparent 70%),
  linear-gradient(180deg,#0b2850 0%,#123f78 52%,#18528f 100%)}
.gl-page .gl-hero{background:radial-gradient(900px 520px at 78% 30%,rgba(110,185,255,.32),transparent 65%);padding-bottom:0}
.tool.gl-page .col.mn-col{max-width:1180px;padding-top:clamp(28px,5vh,48px)}
.tool.gl-page .col > .app-card{margin:0;color:#fff;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.gl-page .app-card span{color:rgba(255,255,255,.78)}
.gl-page .app-card img{box-shadow:0 8px 22px rgba(0,0,0,.3)}
/* the page under the rubber band at its foot, too */
body.tool.gl-page{background:#18528f}