/* Fonts
Copyright 2012 The Libre Caslon Text Project Authors (https://github.com/impallari/Libre-Caslon-Text)
Copyright 2017 IBM Corp. All rights reserved.
Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
*/
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-400-normal.29310efc10.woff2) format("woff2");size-adjust:90%}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-400-italic.20eac03c05.woff2) format("woff2");size-adjust:90%}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-normal.08949f728d.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-normal.01d2854474.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-normal.8909904ab6.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-normal.f3779f1efc.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-normal.f9a06e79cd.woff2) format("woff2")}
/* The look: a light space by day, a dark one after dark. A globe
   with hand-tinted countries in a brass meridian ring; a Caslon for names, ink for what can be pressed. */
:root {
  color-scheme: light;
  --paper: #f3eee2;
  --paper-2: #ebe4d3;
  --paper-3: #e1d8c4;
  --sheet: #f8f5ee;
  --raised: #fbf9f4;
  --ink: #1e1b16;
  --ink-2: #4f483d;
  --ink-3: #73695a;
  --rule: #d6ccb8;
  --rule-2: #b0a38b;
  --accent: #8e5426;
  --accent-tint: #f0e2d0;
  --water: #2c6382;
  --good: #46693a;
  --near: #86631a;
  --far: #a35515;
  --bad: #a23b2a;
  --ring: #b68235;
  --ring-hi: #ecd39a;
  --ring-lo: #84591c;
  --ring-edge-hi: #f6e6c0;
  --ring-edge-lo: #5f3f12;
  --tick: #33230bd0;
  /* a light space: a pale dawn behind the globe, deepening to clear sky blue at the edges, with stars at different depths */
  --space: linear-gradient(90deg, #f3eee2e0 0, #f3eee200 38%), radial-gradient(90% 110% at 64% 50%, #fbf8f1 0%, #eef2f2 34%, #cfe0ea 64%, #9fc3dc 100%);
  --star: #1f4a6b;
  --star-2: #2f6a8e;
  --star-3: #7a5f3c;
  --star-alpha: .72;
  --star-every: 4200;
  --dust-every: 2600;
  --star-glow: 1;
  --star-halo: #ffffff;
  --star-cross: 1;
  --nebula: 1;
  --sky-line: #1f4a6b40;
  --haze-a: #7fb4dc;
  --haze-b: #9ad0d8;
  --haze-c: #eccb94;
  --haze-hex: 40;
  --meteor: #1f4a6b;
  --meteor-strength: .6;
  --glow: #fdfbf5;
  --sea: #a8c9d0;
  --grid: #24536426;
  --grid-strong: #24536455;
  --sea-ink: #1f4a5cb8;
  --sea-ink-soft: #1f4a5c70;
  --rim: #16323f88;
  --air: #7fbce078;
  --air-out: #7fbce000;
  --air-drop: 0;
  --border: #4b3a2a7a;
  --coast: #2f3f47b4;
  --edge: #254252;
  --shade-rgb: 16 38 62;
  --shade-max: .78;
  --shade-side: .62;
  --shine-max: .5;
  --limb-rgb: 226 240 246;
  --limb-max: .3;
  --c-africa: #b5683f;
  --c-asia: #ab8a2f;
  --c-europe: #668a52;
  --c-namerica: #75689f;
  --c-samerica: #2f7a8b;
  --c-oceania: #a3587a;
  --ice: #eef1ee;
  --t0: #e3b9a4;
  --t1: #e8cf8e;
  --t2: #bccb9d;
  --t3: #c2bbd2;
  --t4: #efe2c0;
  --land: #e7dab6;
  /* the home page's night side, and what moves on its globe */
  --night-rgb: 7 14 32;
  --night-alpha: .9;
  --lights: 1;
  --craft: #fffaf0;
  --hull: #fff4d6;
  --wake: #dfeefb;
  --serpent: #f2dc9f;
  --station: #cfe8ff;
  --mark-good: #6f9a58;
  --mark-ask: #d9a441;
  --mark-bad: #c8604c;
  --unseen: #f1ead9;
  --lv0: #cf8d7a;
  --lv1: #dfd08f;
  --lv2: #9dbd83;
  --lv3: #b68235;
  --p1: #99600f;
  --p2: #2c6382;
  --label-bg: #fbf9f4f0;
  --shadow-sm: 0 1px 2px rgb(60 45 20 / .07), 0 0 0 .5px rgb(60 45 20 / .05);
  --shadow: 0 2px 6px rgb(60 45 20 / .06), 0 8px 24px rgb(60 45 20 / .07);
  --shadow-pop: 0 4px 12px rgb(40 30 15 / .08), 0 24px 60px rgb(40 30 15 / .18);
  --grain: .05;
  --display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f151b;
  --paper-2: #131b23;
  --paper-3: #1b252f;
  --sheet: #0c1116;
  --raised: #27333f;
  --ink: #e9ddc3;
  --ink-2: #b6aa91;
  --ink-3: #91887a;
  --rule: #232e38;
  --rule-2: #3b4956;
  --accent: #d39760;
  --accent-tint: #2b2219;
  --water: #89b9d1;
  --good: #9fc48a;
  --near: #dcc06a;
  --far: #e0a267;
  --bad: #e5826c;
  --ring: #b98b4c;
  --ring-hi: #eccb96;
  --ring-lo: #6a4a22;
  --ring-edge-hi: #f4dcae;
  --ring-edge-lo: #33220d;
  --tick: #1a1205d8;
  --space: none;
  --star-halo: ;
  --star-cross: 0;
  --nebula: 0;
  --star: #e9ddc3;
  --star-2: #bfd4ea;
  --star-3: #f0c9a2;
  --star-alpha: .9;
  --star-every: 3400;
  --dust-every: 1600;
  --star-glow: 1;
  --sky-line: #bcd8e01f;
  --haze-a: #38679c;
  --haze-b: #6c4f94;
  --haze-c: #a4733f;
  --haze-hex: 26;
  --meteor: #fff1d0;
  --meteor-strength: .8;
  --glow: #18222c;
  --sea: #1a4e66;
  --grid: #d8e8ee18;
  --grid-strong: #d8e8ee38;
  --sea-ink: #bcd8e0a0;
  --sea-ink-soft: #bcd8e055;
  --rim: #a6d4ea90;
  --air: #6fb2d65c;
  --air-out: #6fb2d600;
  --air-drop: 0;
  --border: #10181f80;
  --coast: #0b1218b0;
  --edge: #06121a;
  --shade-rgb: 3 9 18;
  --shade-max: .92;
  --shade-side: .95;
  --shine-max: .2;
  --limb-rgb: 124 188 226;
  --limb-max: .62;
  --c-africa: #dc9268;
  --c-asia: #d3b45c;
  --c-europe: #93bb7c;
  --c-namerica: #a79ad0;
  --c-samerica: #6db6c6;
  --c-oceania: #d68bab;
  --ice: #d3dee0;
  --t0: #d09783;
  --t1: #d6bb72;
  --t2: #9db982;
  --t3: #a49dc6;
  --t4: #dccd9d;
  --land: #cfc29a;
  --mark-good: #8cc276;
  --mark-ask: #e7b65a;
  --mark-bad: #d9705c;
  --unseen: #3b4956;
  --lv0: #a65e50;
  --lv1: #b9ad72;
  --lv2: #7fa96b;
  --lv3: #dcaa66;
  --p1: #e7b65a;
  --p2: #89b9d1;
  --label-bg: #0c1116ec;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .35), 0 0 0 .5px rgb(255 255 255 / .04);
  --shadow: 0 2px 6px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  --shadow-pop: 0 4px 12px rgb(0 0 0 / .35), 0 24px 60px rgb(0 0 0 / .55);
  --grain: .03;
}
/* by day the home page's globe belongs on the paper: the game's pale sea, one warm gold for the land, and night only a soft shadow */
:root[data-theme="light"][data-wall] {
  --land: #dcc48f;
  --ice: #f3efe3;
  --coast: #5d441ea8;
  --border: #5d441e4a;
  --edge: #7a5a24;
  --night-rgb: 44 54 84;
  --night-alpha: .46;
  --lights: .6;
  --craft: #ffffff;
  --hull: #ffffff;
  --wake: #ffffff;
  --serpent: #5d3f12;
  --station: #ffffff;
}
/* after dark it hangs in space: no countries, no politics, only a navy sea and land laid in gold leaf */
:root[data-theme="dark"][data-wall] {
  --sea: #0e2a42;
  --land: #cfb27a;
  --ice: #ece3cd;
  --coast: #f4e2ad90;
  --border: #5c3f1658;
  --edge: #e6cd92;
  --grid: #e6cd9218;
  --grid-strong: #e6cd9234;
  --sea-ink: #e6cd9266;
  --sea-ink-soft: #e6cd9230;
  --rim: #a6d4ea70;
  --air: #6fb2d650;
  --shade-max: .62;
  --limb-rgb: 128 186 226;
  --limb-max: .55;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--space) var(--paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--body);
  font-feature-settings: "cv05", "cv08";
  -webkit-font-smoothing: antialiased;
}
/* the tooth of the paper, and a pool of light where the globe sits */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(70% 90% at 66% 50%, var(--glow), transparent 72%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: var(--grain);
  pointer-events: none;
  z-index: 9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
canvas#sky, canvas#meteor, canvas#base, canvas#swap, canvas#fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#fx { touch-action: none; cursor: grab; }
#vh { position: fixed; top: 0; left: 0; width: 0; height: 100vh; pointer-events: none; visibility: hidden; }
canvas#fx.dragging { cursor: grabbing; }
/* a navigator's sight */
canvas#fx.aiming { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fbf9f4' stroke-width='3.4' opacity='.85'%3E%3Ccircle cx='16.5' cy='16.5' r='7.5'/%3E%3Cpath d='M16.5 3v6M16.5 24v6M3 16.5h6M24 16.5h6'/%3E%3C/g%3E%3Cg stroke='%231e1b16' stroke-width='1.3'%3E%3Ccircle cx='16.5' cy='16.5' r='7.5'/%3E%3Cpath d='M16.5 3v6M16.5 24v6M3 16.5h6M24 16.5h6'/%3E%3C/g%3E%3Ccircle cx='16.5' cy='16.5' r='1' fill='%238e5426' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid color-mix(in srgb, var(--water) 70%, transparent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--water) 22%, transparent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.primary {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .08);
  transition: background-color .15s var(--ease), transform .1s var(--ease);
}
.primary:hover { background: var(--accent); }
.primary:active { transform: scale(.98); }
/* at night the main action is brass, not a bright patch of paper */
:root[data-theme="dark"] .primary { background: var(--ring); color: #1a1205; }
:root[data-theme="dark"] .primary:hover { background: var(--ring-hi); }
.ghost {
  background: var(--raised);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.ghost:hover { background: var(--paper-2); border-color: var(--rule-2); }
.ghost[disabled] { opacity: .5; cursor: default; }
.round { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--ink-2); }

/* ---------- the corner switches and readouts ---------- */
.corner { position: fixed; right: var(--gutter-r); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; z-index: 6; }
.corner svg { width: 16px; height: 16px; display: block; }
/* a map's scale and where you are on it */
.readout { position: fixed; left: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 3px; z-index: 2; pointer-events: none; color: var(--ink-3); font-size: 10.5px; }
body.playing .readout, body.map-under .readout { background: var(--label-bg); padding: 5px 9px 4px; border-radius: 7px; }
/* stacked above the corner's switches, clear of the ring at any window size */
body:not(.playing) .readout { left: auto; right: var(--gutter-r); bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 42px); justify-items: end; }
/* during a game only what you might need mid-question stays; search belongs to the home page */
body.playing .corner .size, body:not(.home) .find, body:has(#trip:not([hidden])) .find { display: none; }
.corner .size svg { width: 13px; height: 13px; }
.find { position: relative; }
.find-box { position: absolute; right: 0; bottom: calc(100% + 6px); width: 220px; padding: 6px; background: var(--raised); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
.find-box[hidden] { display: none; }
.find-box input { width: 100%; max-width: none; height: 32px; padding: 0 9px; font-size: 13px; }
.find-box .wall-say { margin: 6px 3px 1px; }
.size { display: flex; align-items: center; height: 34px; background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; color: var(--ink-3); }
.size button { width: 28px; height: 100%; font-size: 16px; line-height: 1; color: var(--ink-2); transition: background-color .15s var(--ease); }
.size button:hover:not([disabled]) { background: var(--paper-2); color: var(--ink); }
.size button[disabled] { opacity: .35; cursor: default; }
.coords { white-space: pre; }
/* the magnifying glass's key, kept with the scale, where a map keeps its legend; a finger has no keys */
.lens-legend { margin-bottom: 4px; font-size: 11px; white-space: nowrap; transition: color .2s var(--ease); }
.lens-legend[hidden] { display: none; }
.lens-legend kbd { margin: 0 1px; padding: 0 4px; font-size: 9.5px; opacity: .8; }
.lens-legend.on { color: var(--ink); }
.lens-legend.on kbd { opacity: 1; }
@media (hover: none) { .lens-legend { display: none; } }
.scale { display: flex; align-items: flex-end; gap: 6px; }
.scale i { display: block; height: 5px; border: 1px solid var(--ink-3); border-top: 0; }

/* ---------- side panel: menu, setup, results, Atlas ---------- */
#panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(424px, 42vw);
  z-index: 4;
  overflow-y: auto;
  padding-block: 34px 28px;
  padding-left: max(36px, env(safe-area-inset-left, 0px));
  padding-right: 16px;
  transition: transform .6s var(--ease), opacity .45s ease;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
/* what the panel holds: on a wide window just a column, on a phone the sheet of paper itself */
#sheet { display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
#sheet > * { flex-shrink: 0; }
#panel::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: min(490px, 48vw); z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--paper) 76%, transparent); opacity: 0; transition: opacity .45s ease; }
body.map-under #panel::before { opacity: 1; }
#panel:hover { scrollbar-color: var(--rule) transparent; }
#panel.middle #sheet { justify-content: safe center; }
#panel.reveal #sheet > * { animation: rise .7s var(--ease) backwards; }
#panel.reveal #sheet > :nth-child(2) { animation-delay: .08s; }
#panel.reveal #sheet > :nth-child(3) { animation-delay: .16s; }
#panel.reveal #sheet > :nth-child(4) { animation-delay: .24s; }
#panel.reveal #sheet > :nth-child(5) { animation-delay: .32s; }
#panel.reveal #sheet > :nth-child(6) { animation-delay: .4s; }
#panel.gone { transform: translateX(-24px); opacity: 0; pointer-events: none; visibility: hidden; }

.brand h1 { font: 500 clamp(48px, 5.2vw, 68px)/.95 var(--display); letter-spacing: -.022em; margin: 0; }
.brand p { margin: 8px 0 0; font: italic 400 18px/1.3 var(--display); color: var(--ink-2); max-width: 32ch; text-wrap: balance; }
/* who made it: small, under the name */
#sheet .byline { margin: 5px 0 0; font: 400 11px/1.2 var(--mono); font-style: normal; letter-spacing: .02em; color: var(--ink-3); }
#sheet .sheet-title + .byline { margin-top: -12px; }

.rank { display: grid; gap: 7px; }
.rank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rank b { font: 500 17px var(--display); }
.rank small { color: var(--ink-3); font: 400 11px var(--mono); }
.bar { height: 3px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ring); border-radius: 2px; transition: width .8s var(--ease); }

.daily {
  display: grid;
  gap: 6px;
  text-align: left;
  width: 100%;
  padding: 16px 18px 15px;
  border-radius: 12px;
  background: var(--raised);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 45%, transparent);
  transition: background-color .18s var(--ease), transform .14s var(--ease);
}
.daily:hover { background: var(--paper-2); transform: translateY(-1px); }
:root[data-theme="dark"] .daily { background: linear-gradient(160deg, #1d2935, #131a22); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 60%, transparent), var(--shadow); }
:root[data-theme="dark"] .daily:hover { background: linear-gradient(160deg, #26364a, #18222c); }
/* by day the card is paper from the start, played or not, like Today's path; five circles say how today's five stand */
:root[data-theme="light"] .daily .eyebrow { color: var(--accent); opacity: 1; }
.daily .eyebrow { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.daily strong { font: 500 30px/1.05 var(--display); letter-spacing: -.012em; }
.daily span.note { font-size: 13px; opacity: .86; }
.day-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.day-circles { display: flex; gap: 6px; }
.day-circles i { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px var(--ring); }
.day-circles i[class] { box-shadow: none; }
.day-note { font-size: 12px; opacity: .8; white-space: nowrap; }

/* the contents page of an atlas: name, a dotted leader, your best */
.modes { display: grid; }
.mode {
  display: grid;
  grid-template-columns: 26px auto 1fr auto;
  gap: 0 8px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 8px 2px;
  border-radius: 6px;
  transition: transform .15s var(--ease);
}
.mode:hover { transform: translateX(3px); }
.mode:hover b { color: var(--accent); }
.mode b { font: 500 20px/1.2 var(--display); letter-spacing: -.005em; transition: color .15s var(--ease); }
.mode i.leader { border-bottom: 1px dotted var(--rule-2); transform: translateY(-4px); min-width: 12px; }
.mode em { font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); }
.mode span { grid-column: 2 / -1; color: var(--ink-2); font-size: 12.5px; }
.mode svg { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; color: var(--ring-lo); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .mode svg { color: var(--ring); }
.links { display: flex; gap: 6px; flex-wrap: wrap; }

.back { align-self: flex-start; }
.sheet-title { font: 500 40px/1 var(--display); letter-spacing: -.018em; margin: 0; }
.sheet-lede { color: var(--ink-2); margin: 0; font-size: 14px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.field > span:first-child, .field > legend { font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--paper-2); border-radius: 9px; padding: 3px; width: fit-content; max-width: 100%; }
.seg button { padding: 5px 13px; border-radius: 7px; font-size: 13px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
select, input[type="text"] {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  max-width: 280px;
}
select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23967f5b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.500l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
.check { display: grid; grid-template-columns: auto 1fr; gap: 0 9px; align-items: start; cursor: pointer; }
.check input { appearance: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 3px 0 0; background: var(--raised); border: 1px solid var(--rule-2); border-radius: 4px; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.check input:checked { background: var(--ring); border-color: var(--ring-lo); }
.check input:checked::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 1.7px solid #fff8e8; border-bottom: 1.7px solid #fff8e8; transform: rotate(-45deg); }
.check small { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.hint { color: var(--ink-3); font-size: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions:empty { display: none; }

/* results */
.final { display: grid; gap: 3px; }
.final .eyebrow { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.final .big { font: 500 clamp(64px, 7.5vw, 96px)/.95 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.final .big.say { font-size: clamp(40px, 5vw, 60px); letter-spacing: -.02em; }
.final p { margin: 4px 0 0; font: italic 400 18px/1.3 var(--display); color: var(--ink-2); }
.final .best, .rank .best { color: var(--accent); font: italic 500 18px var(--display); margin: 0; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows li + li { border-top: 1px solid var(--rule); }
.stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; }
.stats div { display: grid; gap: 1px; }
.stats dt { font: 400 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 0; font: 500 22px/1.1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.seal { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 500 10.5px var(--mono); color: #fbf9f4; }
:root[data-theme="dark"] .seal { color: #0f151b; }
.rows button {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 7px 4px;
  border-radius: 6px;
  transition: background-color .12s var(--ease);
}
.rows button:hover { background: var(--paper-2); }
.rows .swatch { width: 10px; height: 10px; border-radius: 3px; }
.rows .n { overflow-wrap: anywhere; min-width: 0; font: 500 16px/1.2 var(--display); }
.rows .km { font: 400 11px var(--mono); color: var(--ink-3); }
.rows .pts { font: 500 12px var(--mono); min-width: 42px; text-align: right; }
.k-found { background: var(--good); } .k-near { background: var(--near); } .k-far { background: var(--far); } .k-lost { background: var(--bad); }
.share { position: relative; overflow: hidden; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-sm); }
.share canvas { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--rule); }
.share-body { display: grid; gap: 7px; padding: 9px 12px 11px; }
.share-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.share-title b { font: 500 17px/1.2 var(--display); }
.share-title .mono { font-size: 11px; color: var(--ink-3); }
.share-copy { margin-left: auto; display: inline-flex; align-items: center; background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; }
.share-copy svg { width: 13px; height: 13px; flex: none; margin: 0 2px 0 8px; color: var(--ink-3); }
.share-copy button { padding: 4px 8px; font-size: 12px; font-weight: 500; transition: background-color .15s var(--ease); }
.share-copy button + button { border-left: 1px solid var(--rule); }
.share-copy button:hover { background: var(--paper-2); }
.share-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--ink-2); }
.share-legend span { display: inline-flex; align-items: center; gap: 5px; }
.share-legend i { width: 8px; height: 8px; border-radius: 50%; }
/* a laptop's height: a little less air, so nothing important needs scrolling to */
@media (max-height: 820px) and (min-width: 861px) {
  #panel { padding-block: 22px 16px; }
  #sheet { gap: 11px; }
  .final .big { font-size: 60px; }
  .brand h1 { font-size: 46px; }
}
.share-legend em { margin-left: auto; font: italic 400 14px/1.1 var(--display); color: var(--accent); }
/* read by the Copy button; the map is what you look at */
.share pre { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: pre; }

/* Atlas and achievements */
.legend { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.conts { display: grid; gap: 7px; }
.cont { display: grid; gap: 4px; width: 100%; padding: 2px 0; text-align: left; transition: transform .15s var(--ease); }
button.cont:hover { transform: translateX(3px); }
.cont div.t, .cont span.t { display: flex; justify-content: space-between; gap: 8px; font: 500 16px var(--display); }
.cont .mono { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.cont .bar { display: block; height: 5px; border-radius: 3px; }
.cont .bar i { background: var(--c, var(--ring)); border-radius: 3px; }
.legend i.unseen { box-shadow: inset 0 0 0 1px var(--rule-2); }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 14px; display: grid; gap: 2px; box-shadow: var(--shadow-sm); }
.card b { font: 500 20px var(--display); }
.card .tries { font: italic 400 15px var(--display); color: var(--accent); }
.card span { font-size: 13px; color: var(--ink-2); }
/* a tray of medals: those earned struck in brass, the rest only an engraving of what could be */
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.awards li { display: grid; grid-template-columns: 34px 1fr; gap: 0 9px; align-items: start; padding: 7px 0; }
.medal { grid-row: 1 / 3; width: 34px; height: 34px; }
.medal .disc { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.medal .star { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-linejoin: round; }
.awards li.on .medal .disc { fill: var(--ring); stroke: var(--ring-lo); }
.awards li.on .medal .rim { fill: none; stroke: var(--ring-hi); stroke-width: 1; opacity: .75; }
.awards li.on .medal .star { fill: var(--ring-edge-hi); stroke: var(--ring-lo); }
.medal .rim { fill: none; stroke: none; }
.awards b { font: 500 15.5px/1.2 var(--display); }
.awards span { grid-column: 2; font-size: 11.5px; line-height: 1.32; color: var(--ink-2); }
.awards li:not(.on) b { color: var(--ink-3); }
.awards li:not(.on) span { color: var(--ink-3); }
@media (max-width: 420px) { .awards { grid-template-columns: 1fr; } }

/* ---------- in game ---------- */
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#hud button { pointer-events: auto; }
#hud:not([hidden]) .plate { animation: settle .7s var(--ease); }
@keyframes settle { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.hud-left { position: absolute; top: 16px; left: var(--gutter); display: flex; align-items: center; gap: 12px; }
.hud-label { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--label-bg); padding: 3px 8px; border-radius: 6px; }
.hud-score {
  position: absolute;
  top: 12px;
  right: var(--gutter-r);
  display: grid;
  justify-items: end;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 6px 12px 7px;
  min-width: 78px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.hud-score small { grid-column: 1 / -1; font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
#score { grid-column: 2; grid-row: 2; font: 500 clamp(28px, 3vw, 38px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
#score .p1 { color: var(--p1); }
#score .p2 { color: var(--p2); }
.streak { grid-column: 1; grid-row: 2; font: 500 13px var(--mono); color: var(--accent); background: var(--accent-tint); padding: 3px 9px; border-radius: 999px; transition: box-shadow .5s ease; }
.streak.hot { color: #2a1b06; background: var(--ring-hi); box-shadow: 0 0 0 1px var(--ring), 0 0 14px color-mix(in srgb, var(--ring-hi) 70%, transparent); }
.streak.pop { animation: pop .6s var(--ease); }
@keyframes pop { from { transform: scale(1.1); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* the title block of a map: the question, on its own framed plate above the globe */
.plate-wrap { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; width: max-content; max-width: min(620px, calc(100vw - 32px)); }
.plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 250px;
  max-width: 100%;
  padding: 11px 30px 13px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.plate::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--rule); border-radius: 9px; pointer-events: none; }
.plate::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--ring); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--paper); }
/* in a Duel the plate wears the colour of whoever's turn it is */
.plate.p1 { border-color: var(--p1); box-shadow: 0 0 0 1px var(--p1), var(--shadow); }
.plate.p1 .kicker { color: var(--p1); }
.plate.p1::after { background: var(--p1); }
.plate.p2 { border-color: var(--p2); box-shadow: 0 0 0 1px var(--p2), var(--shadow); }
.plate.p2 .kicker { color: var(--p2); }
.plate.p2::after { background: var(--p2); }
.cover-box h2 .p1 { color: var(--p1); }
.cover-box h2 .p2 { color: var(--p2); }
.plate-text { display: grid; justify-items: center; text-align: center; gap: 1px; flex: 1; min-width: 0; }
.kicker { font: italic 400 15.5px/1.2 var(--display); color: var(--ink-2); min-height: 1.2em; }
.plate h1 {
  margin: 0;
  font: 500 clamp(28px, 3.5vw, 46px)/1.04 var(--display);
  letter-spacing: -.018em;
  text-wrap: balance;
  min-height: 1.04em;
}
.plate h1.fresh { animation: rise .6s var(--ease); }
@keyframes rise { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
.pips { display: flex; gap: 3px; flex-wrap: nowrap; justify-content: center; margin-top: 5px; max-width: 100%; }
.pips:empty { display: none; }
.pips i { width: 7px; height: 7px; flex: 0 1 7px; min-width: 3px; border-radius: 50%; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule-2); transition: background-color .5s ease; }
.pips i.now { background: var(--ink); box-shadow: none; }
.pips i.k-found { background: var(--good); box-shadow: none; }
.pips i.k-near { background: var(--near); box-shadow: none; }
.pips i.k-far { background: var(--far); box-shadow: none; }
.pips i.k-lost { background: var(--bad); box-shadow: none; }
.pips:has(.life) { gap: 6px; margin-top: 6px; }
.pips i.life {
  width: 17px;
  height: 15px;
  flex-basis: 17px;
  border-radius: 0;
  background: var(--bad);
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.500S1 14.700 1 7a6 6 0 0 1 11-3.300A6 6 0 0 1 23 7c0 7.700-11 14.500-11 14.500z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.500S1 14.700 1 7a6 6 0 0 1 11-3.300A6 6 0 0 1 23 7c0 7.700-11 14.500-11 14.500z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pips i.life.gone { background: var(--rule-2); opacity: .55; }
.sub { margin: 0; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.ask-tools { display: flex; gap: 6px; flex: none; }
.ask-tools:empty { display: none; }
.ask-tools button { font-size: 12.5px; padding: 6px 11px; white-space: nowrap; }
#shape {
  flex: none;
  width: clamp(92px, 16vh, 138px);
  height: clamp(92px, 16vh, 138px);
  margin-left: -14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
/* a clock you can feel: a brass dial that runs out, and warms as it does */
.dial { flex: none; position: relative; z-index: 1; width: 66px; height: 66px; margin-left: -16px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--dial, var(--ring)) calc(var(--left, 1) * 360deg), var(--paper-3) 0); }
.dial::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.dial span { position: relative; font: 500 21px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.dial.warm { --dial: var(--far); }
.dial.low { --dial: var(--bad); }
.dial.low span { color: var(--bad); }

.foot { position: absolute; left: var(--gutter); right: var(--gutter-r); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px)); display: flex; justify-content: center; }
.foot-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(760px, 100%);
  padding: 9px 10px 9px 18px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  animation: rise .45s var(--ease);
  pointer-events: auto;
}
.foot-bar:has(#next[hidden]):has(.ask-tools:empty) { padding-right: 18px; }
.verdict { margin: 0; font-size: 14px; min-width: 0; }
.verdict b { font: 500 18px var(--display); margin-right: 2px; }
.verdict.found b:first-child { color: var(--good); }
.verdict.near b:first-child { color: var(--near); }
.verdict.far b:first-child { color: var(--far); }
.verdict.lost b:first-child { color: var(--bad); }
.verdict #km-count { font-family: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.verdict .gain { margin-left: 6px; font: 500 16px var(--display); font-variant-numeric: lining-nums; color: var(--accent); white-space: nowrap; }
.verdict .run { margin-left: 6px; font: italic 400 14.5px var(--display); color: var(--ink-3); white-space: nowrap; }
.foot-bar .primary { flex: none; padding: 8px 16px; font-size: 13.5px; white-space: nowrap; }
.zoom {
  position: absolute;
  right: var(--gutter-r);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 34px;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.zoom button { height: 34px; font-size: 17px; line-height: 1; color: var(--ink-2); transition: background-color .15s var(--ease); }
.zoom button + button { border-top: 1px solid var(--rule); }
.zoom button:hover { background: var(--paper-2); color: var(--ink); }

.links .ghost { padding-inline: 9px; font-size: 12.5px; }
.about-link { align-self: flex-start; margin-top: -8px; padding: 2px 0; font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-2); }
.about-link:hover { color: var(--ink); }
#sheet a { color: var(--accent); }
/* ---------- your record, past days, challenges ---------- */
.atlas-tabs button { flex: 1 1 auto; font-size: 12px; }
.sub-title { margin: 4px 0 -4px; font: 500 17px var(--display); }
.card small.fact, .verdict small.fact { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.verdict small.fact { max-width: 58ch; }
.stats.record { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.mixes .n em { font: italic 400 14px var(--display); color: var(--ink-3); }
.mixes button { grid-template-columns: 1fr auto; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal i { font-style: normal; }
.cal i.dow { text-align: center; font: 400 10px var(--mono); color: var(--ink-3); }
.cal i.off { display: grid; place-items: center; height: 32px; font: 400 11.5px var(--mono); color: var(--ink-3); opacity: .55; }
.day { height: 32px; border-radius: 6px; font: 400 11.5px var(--mono); background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .15s var(--ease), transform .12s var(--ease); }
.day:hover { background: var(--paper-2); transform: translateY(-1px); }
.day.played { background: color-mix(in srgb, var(--ring) 28%, var(--raised)); box-shadow: inset 0 0 0 1px var(--ring); }
.day.full { background: var(--ring); color: #1a1205; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.send input { max-width: none; flex: 1 0 100%; font-size: 12px; }
kbd { margin-left: 8px; padding: 1px 5px; font: 400 10px var(--mono); border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; opacity: .62; }
@media (hover: none) { #next kbd { display: none; } }
.keys { display: grid; gap: 5px; margin: 0 0 4px; text-align: left; }
.keys div { display: grid; grid-template-columns: 72px 1fr; align-items: baseline; }
.keys dd { margin: 0; font-size: 13px; }
.keys kbd { margin: 0; }
/* a laptop's height: the seven modes lose their descriptions, which are also in their tooltips, rather than scroll away */
@media (max-height: 820px) and (min-width: 861px) {
  .mode { padding-block: 3px; }
  .mode span { display: none; }
  .mode svg { grid-row: 1; }
}

/* ---------- the home page ---------- */
/* the home page: the menu withdraws when left alone, in two steps, and comes straight back at a touch */
body.home #panel { transition: transform .6s var(--ease), opacity .3s ease, visibility .6s; }
body.home-dim #panel { opacity: .2; transition: opacity 1.6s ease; }
body.home-gone #panel { transform: translateX(-24px); opacity: 0; pointer-events: none; visibility: hidden; }
.corner, .readout { transition: opacity .7s ease; }
body.home-dim .corner, body.home-dim .readout { opacity: .35; }
body.home-gone .corner, body.home-gone .readout, body.home-gone #toasts { opacity: 0; pointer-events: none; }
body.home-held.wall-quiet canvas#fx { cursor: none; }
/* the moon hangs in the sky in the corner; the clock is set small beside the scale, like a map's date */
canvas#moon { position: fixed; right: max(22px, env(safe-area-inset-right, 0px)); top: 20px; width: 104px; height: 104px; pointer-events: none; }
#wall-clock { position: fixed; right: var(--gutter-r); bottom: 132px; z-index: 3; display: grid; gap: 3px; justify-items: end; pointer-events: none; color: var(--ink); }
:root[data-theme="dark"] #wall-clock { text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
#wall-time { font: 500 clamp(24px, 2.4vw, 34px)/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
#wall-date { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 860px) {
  #wall-clock { right: auto; left: 28px; bottom: 74px; justify-items: start; }
  canvas#moon { right: auto; left: calc(50% - 52px); top: 3vh; }
  /* with the menu up on a phone there is only room for the globe above it */
  body.home:not(.home-gone) canvas#moon, body.home:not(.home-gone) #wall-clock { opacity: 0; }
}
body:not(.home-held) #wall-hint { display: none; }
#wall-hint { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .7s ease; }
#wall-hint span { font-size: 10.5px; color: var(--ink-3); margin-left: 4px; }
body.wall-quiet #wall-hint { opacity: 0; pointer-events: none; }
canvas#moon, #wall-clock { transition: opacity .7s ease; }
/* a moon in the daytime is an engraver's: its lit part in ink, its dark part the paper showing through */
:root[data-theme="light"] canvas#moon { filter: invert(1) sepia(.45) opacity(.72); mix-blend-mode: multiply; }
canvas#moon.off, #wall-clock.off, body.wall-close canvas#moon, body:has(#wall-panel:not([hidden])) canvas#moon { opacity: 0; }
/* the switches, like the key to a map; with the menu hidden they go when you leave the pointer alone, unless it is on them */
#wall-panel { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); top: 18px; z-index: 6; width: 222px; max-height: calc(100vh - 190px); overflow-y: auto; padding: 10px 8px 8px; display: grid; gap: 1px; background: var(--raised); box-shadow: var(--shadow); border: 1px solid var(--rule); border-radius: 10px; scrollbar-width: thin; transition: opacity .7s ease; }
body.wall-quiet.home-held #wall-panel:not(:hover):not(:has(:focus-visible)) { opacity: 0; pointer-events: none; }
#wall-panel h3 { margin: 9px 8px 3px; font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wall-new { margin: 0 4px; }
.wall-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 4px 6px 8px; font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wall-top .round { flex: none; width: 26px; height: 26px; font-size: 16px; }
.wall-say { font-size: 12px; color: var(--bad); }
#go-hide { margin-top: 8px; }
.wall-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.25; text-align: left; color: var(--ink-3); transition: color .2s var(--ease), background-color .15s var(--ease); }
.wall-sw:hover { background: var(--paper-2); color: var(--ink); }
.wall-sw[aria-checked="true"] { color: var(--ink); }
.wall-sw i { flex: none; position: relative; width: 25px; height: 14px; border-radius: 999px; background: var(--rule-2); transition: background-color .25s var(--ease); }
.wall-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.wall-sw[aria-checked="true"] i { background: var(--accent); }
.wall-sw[aria-checked="true"] i::after { transform: translateX(11px); background: var(--paper); }
/* today's journey, under the Daily Five, and the card that tells it */
.path-card { display: grid; gap: 2px; text-align: left; width: 100%; padding: 11px 18px 11px; border-radius: 12px; color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 45%, transparent); transition: background-color .18s var(--ease), transform .14s var(--ease); }
.path-card:hover { background: var(--paper-2); transform: translateY(-1px); }
.path-card .eyebrow { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.path-card strong { font: 500 20px/1.15 var(--display); }
.path-card .note { font-size: 12.5px; color: var(--ink-2); }
#trip { position: fixed; left: calc(min(424px, 42vw) + (100vw - min(424px, 42vw)) / 2); bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 7; width: min(430px, calc(58vw - 24px)); max-height: 46vh; overflow-y: auto; padding: 12px 16px 12px; background: var(--raised); box-shadow: var(--shadow-pop); border: 1px solid var(--rule); border-radius: 10px; }
#trip h2 { margin: 3px 0 0; font: 500 22px/1.15 var(--display); }
#trip p { margin: 4px 0 0; font-size: 13px; line-height: 1.42; color: var(--ink-2); }
#trip p.mono { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
#trip p b { font-weight: 600; color: var(--ink); }
#trip h3 { margin: 10px 0 3px; font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#trip .people { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
#trip .people b { font-weight: 600; color: var(--ink); }
#trip p.sources { margin-top: 9px; font-size: 11.5px; color: var(--ink-3); }
#trip p.when { margin-top: 1px; font-size: 12px; font-style: italic; font-family: var(--display); color: var(--ink-3); }
#trip p.last { padding-top: 7px; border-top: 1px solid var(--rule); margin-top: 8px; color: var(--ink); }
#trip p.last em { color: var(--ink-3); font-size: 12px; }
/* its buttons stay in reach however little room the window leaves */
.trip-tools { position: sticky; bottom: -12px; display: flex; gap: 6px; margin: 9px 0 -12px; padding: 6px 0 12px; background: var(--raised); }
.trip-tools { align-items: center; }
.trip-tools .ghost { padding: 3px 9px; font-size: 12px; }
.trip-tools .primary { padding: 5px 14px; font-size: 13px; }
@media (hover: none) { .trip-tools kbd { display: none; } }
@media (max-width: 860px) { #trip { left: 50%; width: calc(100vw - 24px); bottom: 10px; max-height: 44vh; } }
/* a card for the country you clicked */
#wall-card { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: 104px; z-index: 6; width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow-y: auto; padding: 14px 16px; background: var(--raised); box-shadow: var(--shadow); border: 1px solid var(--rule); border-radius: 10px; }
body:has(#wall-panel:not([hidden])) #wall-card { right: 250px; }
body:has(#wall-card:not([hidden])) #wall-clock { opacity: 0; }
body:has(#trip:not([hidden])) #wall-clock { opacity: 0; }
#wall-card h2 { margin: 0 26px 2px 0; font: 500 25px/1.1 var(--display); }
#wall-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.42; color: var(--ink-2); }
#wall-card p.mono { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
#wall-card p.place { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
#wall-card .near { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
#wall-card .near .ghost, #wall-card > .ghost:not(.round) { padding: 3px 8px; font-size: 12px; }
#wall-card > .ghost:not(.round) { margin-top: 10px; }
#wall-card .near + .ghost { margin-top: 0; }
#wall-card-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1; }
/* on a phone the card sits below the globe, so what you picked stays in view */
@media (max-width: 760px) {
  #wall-card, body:has(#wall-panel:not([hidden])) #wall-card { right: 16px; bottom: 70px; max-height: 34vh; padding: 10px 12px; }
  #wall-card h2 { font-size: 21px; }
  #wall-card .near { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px 0; }
  #wall-card .near .ghost { flex: none; }
  body:has(#wall-card:not([hidden])) #wall-clock { display: none; }
  #wall-panel { top: 12px; right: 12px; width: 200px; max-height: calc(100vh - 90px); }
}
@media (max-width: 760px) { #wall-hint span { display: none; } }
@media (max-width: 460px) { #wall-full { display: none; } }

/* ---------- moments ---------- */
#floats { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.float {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 500 30px var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 8px var(--paper), 0 0 2px var(--paper);
  animation: drift-up 1.5s ease-out forwards;
}
@keyframes drift-up { from { opacity: 0; margin-top: 4px; } 22% { opacity: 1; } 60% { opacity: 1; } to { opacity: 0; margin-top: -34px; } }
#toasts { position: fixed; top: 88px; right: var(--gutter-r); z-index: 8; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast {
  background: var(--raised);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 9px 14px;
  display: grid;
  max-width: 280px;
  box-shadow: var(--shadow-pop);
  animation: slide-in .7s var(--ease);
}
.toast small { font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.toast b { font: 500 19px/1.2 var(--display); }
.toast span { font-size: 12px; color: var(--ink-2); }
@keyframes slide-in { from { transform: translateX(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
body.opening canvas#base { animation: appear 1.4s ease; }
body.opening #sheet > * { animation: rise 1s var(--ease) backwards; }
body.opening #sheet > :nth-child(1) { animation-delay: .25s; }
body.opening #sheet > :nth-child(2) { animation-delay: .4s; }
body.opening #sheet > :nth-child(3) { animation-delay: .55s; }
body.opening #sheet > :nth-child(4) { animation-delay: .7s; }
body.opening #sheet > :nth-child(5) { animation-delay: .85s; }
#hud:not([hidden]) { animation: appear .5s ease; }
#cover {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(10px);
  padding: 24px;
  animation: appear .35s ease;
}
.cover-box {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  max-width: 460px;
  padding: 26px 38px 28px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  animation: settle .6s var(--ease);
}
.cover-box::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--rule); border-radius: 10px; pointer-events: none; }
.cover-box > * { position: relative; }
.cover-box h2 { font: 500 clamp(34px, 5vw, 50px)/1.05 var(--display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.cover-box p { margin: 0; color: var(--ink-2); }

/* a phone is played upright: a website can't lock the screen, so turned on its side it asks to be turned back, and the clocks wait */
#turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #turn { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--paper); color: var(--ink); text-align: center; }
  #turn svg { width: 40px; height: 40px; color: var(--ring); }
  #turn p { margin: 0; font: 400 20px var(--display); }
}

/* ---------- phones and narrow windows: the globe on top, the panel below ---------- */
@media (max-width: 860px) {
  /* the menu is one sheet of paper lying over the lower half of the globe. Scrolling is the page's own, the only kind a phone can always
     do smoothly: it slides the whole sheet up, over the globe and off the top of the screen, where it fades softly. Above the sheet,
     touches pass through to the globe. The address bar comes and goes as the page scrolls, so all that stays behind the paper is sized
     by vh, which ignores it. */
  html { overflow-x: hidden; overscroll-behavior-y: none; }
  html, body { height: auto; min-height: 100vh; }
  body { overflow: visible; background: none; }
  body.playing { height: 100vh; min-height: 0; overflow: hidden; }
  body::before { bottom: auto; height: 100vh; background: radial-gradient(90% 40% at 50% 15%, var(--glow), transparent 72%), var(--space) var(--paper); }
  canvas#sky, canvas#meteor, canvas#base, canvas#swap, canvas#fx { bottom: auto; height: 100vh; }
  #panel {
    position: relative;
    inset: auto;
    width: auto;
    padding: 52vh 0 0;
    overflow: visible;
    pointer-events: none;
  }
  #panel::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 30px; pointer-events: none; background: linear-gradient(var(--sheet), transparent); opacity: 0; transition: opacity .2s ease; }
  body.paper-up #panel::after { opacity: 1; }
  #sheet {
    pointer-events: auto;
    min-height: 100vh;
    gap: 10px;
    padding: 14px var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter);
    background: var(--sheet);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -1px 0 var(--rule), 0 -14px 34px rgb(20 14 6 / .16);
  }
  /* out of the page's flow, so a game has nothing to scroll; app.js keeps it where it was as it fades */
  #panel.gone { position: fixed; left: 0; right: 0; transform: translateY(36px); }
  .brand h1 { font-size: 28px; }
  .brand p:not(.byline) { display: none; }
  #sheet .byline { margin-top: 2px; font-size: 10.5px; }
  #sheet .sheet-title + .byline { margin-top: -7px; }
  .rank b { font-size: 14px; }
  .rank small { font-size: 10px; }
  .daily { padding: 10px 14px; }
  .daily strong { font-size: 20px; }
  .daily span.note { font-size: 12px; }
  .daily .eyebrow, .path-card .eyebrow { font-size: 9.5px; }
  .day-circles i { width: 13px; height: 13px; }
  .day-row { margin-top: 3px; }
  .path-card { padding: 8px 14px; }
  .path-card strong { font-size: 15px; }
  .path-card .note { font-size: 11.5px; }
  .mode b { font-size: 15.5px; }
  .mode span { display: none; }
  .sheet-title { font-size: 26px; }
  .links .ghost { padding: 3px 8px; font-size: 11.5px; }
  .readout { display: none; }
  .hud-label { display: none; }
  .plate-wrap { top: 52px; max-width: calc(100vw - 24px); }
  .plate { min-width: 220px; padding: 8px 22px 10px; }
  .plate h1 { font-size: 28px; }
  #shape { width: 66px; height: 66px; margin-left: -8px; }
  #toasts { top: max(6px, env(safe-area-inset-top, 0px)); left: 88px; right: 88px; justify-items: center; }
  .toast { padding: 3px 12px 4px; border-radius: 9px; max-width: 100%; text-align: center; }
  .toast small { font-size: 8.5px; }
  .toast b { font-size: 14px; }
  .toast span { display: none; }
  .foot { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .foot-bar { width: 100%; padding-left: 14px; gap: 8px 10px; justify-content: space-between; flex-wrap: wrap; }
  .hud-score { padding: 3px 10px 4px; min-width: 0; }
  .hud-score small { display: none; }
  #score { font-size: 24px; }
  .verdict { font-size: 13px; }
  .verdict b { font-size: 16px; }
  .corner { bottom: auto; top: 12px; z-index: 3; }
  .find { position: static; }
  .find-box { bottom: auto; top: calc(100% + 6px); }
  body.playing .corner { display: none; }
}
@media (max-height: 620px) {
  .plate { padding-block: 6px 8px; }
  .plate h1 { font-size: clamp(24px, 4.4vw, 34px); }
  #shape { width: 60px; height: 60px; }
}
/* set from the Animation switch in the menu */
.calm *, .calm *::before, .calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }