/* Every Country. Sits on top of site.css and follows the design system: bone, graphite, ash, one red;
   hairlines instead of cards; square corners; Garamond for what you read and type, sans for the chrome.

   The map gets its own few role colours, each a mix of the site's tokens so the dark page sets them
   itself. Vermillion marks where you are (the country just named, the route, what you missed) and nothing
   else: the map stays monochrome, and the red means "here". Filling a country with it is design system
   deviation 11. */
.ec {
  --ec-land: var(--field);
  --ec-other: color-mix(in srgb, var(--ash) 16%, var(--bone));
  --ec-named: color-mix(in srgb, var(--ash) 46%, var(--bone));
  --ec-line: color-mix(in srgb, var(--graphite) 52%, var(--bone));
  --ec-line-soft: var(--line-muted);
  --ec-grat: color-mix(in srgb, var(--ash) 20%, var(--bone));
  --ec-vh: 100dvh;
  --ec-top: 12rem;
}

.ec [hidden] { display: none !important; }

.ec-folio { padding-block: 0.75rem; }
.ec-foot { padding: 1.5rem var(--pad-x) 2.5rem; border-top: var(--rule-faint); }
.ec-foot .fine-note { max-width: 72ch; margin: 0; }
.ec-noscript { padding: 2rem var(--pad-x); font-family: var(--sans); }

/* ---- Choosing a game: the form down the left, the map it will play on beside it. */
.ec-layout { display: grid; grid-template-columns: minmax(20rem, calc(24rem + var(--pad-x))) minmax(0, 1fr); align-items: start; }
.ec-setup { padding: 1.25rem 1.5rem 0 var(--pad-x); border-right: var(--rule-muted); min-height: calc(var(--ec-vh) - var(--ec-top)); }
.ec-title { font-size: clamp(2.25rem, 2rem + 1.5vw, 3rem); line-height: 0.95; font-weight: 400; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
.ec-lede { margin: 0 0 0.875rem; font-size: 1.0625rem; line-height: 1.3; }

.ec-resume { border: var(--rule-strong); padding: 0.875rem 1rem; margin-bottom: 1.75rem; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.4; }
.ec-resume p { margin: 0 0 0.75rem; }
.ec-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.ec-field { border: 0; padding: 0; margin: 0 0 0.75rem; min-width: 0; }
.ec-field legend { padding: 0; margin-bottom: 0.3125rem; }
.ec-opts { display: flex; gap: 0 1.75rem; flex-wrap: wrap; align-items: flex-start; }
.ec-opts .ec-check { min-height: 2.25rem; align-items: center; }
.ec-opts .ec-check input { transform: none; }

.ec-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: var(--rule-strong); border-left: var(--rule-strong); }
.ec-pick { display: block; cursor: pointer; position: relative; }
.ec-places .ec-pick > span { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.3125rem 0.75rem; border-right: var(--rule-strong); border-bottom: var(--rule-strong); font-family: var(--sans); font-size: 0.9375rem; }
.ec-places .ec-pick b { font-weight: 400; }
.ec-places .ec-pick small { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ash); }
.ec-places .ec-pick:first-child { grid-column: 1 / -1; }

.ec-pick input, .ec-how input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ec-pick input:checked + span, .ec-how input:checked + span { background: var(--graphite); color: var(--bone); }
.ec-pick input:checked + span small { color: var(--bone); }
.ec-pick input:focus-visible + span, .ec-how input:focus-visible + span { outline: 2px solid var(--graphite); outline-offset: 2px; position: relative; z-index: 1; }
@media (hover: hover) {
  .ec-pick:hover input:not(:checked) + span, .ec-how:hover input:not(:checked) + span { background: var(--shade); }
}

.ec-hows { border: var(--rule-strong); border-bottom: 0; }
.ec-how { display: block; cursor: pointer; position: relative; }
.ec-how > span { display: block; padding: 0.3125rem 0.75rem 0.375rem; border-bottom: var(--rule-strong); font-family: var(--sans); }
.ec-how b { display: block; font-weight: 400; font-size: 0.9375rem; }
.ec-how small { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--ash); margin-top: 0.0625rem; }
.ec-how input:checked + span small { color: var(--bone); }

.ec-check { display: flex; gap: 0.625rem; align-items: baseline; cursor: pointer; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.35; }
.ec-check input { accent-color: var(--graphite); flex: none; margin: 0; width: 1rem; height: 1rem; transform: translateY(0.125rem); }
.ec-check strong { font-weight: 400; display: block; }
.ec-check small { display: block; font-size: 0.8125rem; color: var(--ash); margin-top: 0.125rem; }

.ec-clocks { display: flex; border: var(--rule-strong); width: fit-content; }
.ec-clocks .ec-pick > span { display: block; padding: 0.4375rem 0.875rem; font-family: var(--sans); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ec-clocks .ec-pick + .ec-pick { border-left: var(--rule-strong); }

/* However tall the form runs on a short window, Start stays on screen. */
.ec-go { position: sticky; bottom: 0; background: var(--bone); padding-block: 0.25rem 0.75rem; }
.ec-start { width: 100%; padding-block: 0.6875rem; font-size: 1.0625rem; }
.ec-best { font-family: var(--sans); font-size: 0.875rem; color: var(--ash); margin: 0.375rem 0 0; font-variant-numeric: tabular-nums; }
.ec-best:empty { display: none; }

/* ---- The map */
.ec-stage { position: sticky; top: 0; height: calc(var(--ec-vh) - var(--ec-top)); min-height: 15rem; overflow: hidden; background: var(--bone); }
.ec-stage canvas { display: block; touch-action: pan-y; cursor: grab; position: absolute; inset: 0; outline: 0; }
.ec-stage canvas:active { cursor: grabbing; }

.ec-loading { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); margin: 0; font-family: var(--sans); font-size: 0.875rem; color: var(--ash); max-width: 32ch; text-align: center; }

.ec-tip { position: absolute; left: 0; top: 0; padding: 0.125rem 0.5rem; background: var(--bone); border: var(--rule-strong); font-family: var(--sans); font-size: 0.8125rem; white-space: nowrap; pointer-events: none; z-index: 3; }

.ec-cover { position: absolute; inset: 0; background: var(--bone); display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; z-index: 4; }
.ec-cover p { font-size: 1.375rem; margin: 0; }
body[data-paused] .ec-roster-body { visibility: hidden; }
body[data-paused] #map { visibility: hidden; }

.ec-tools { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; pointer-events: none; z-index: 2; }
.ec-tools > * { pointer-events: auto; }
.ec-zoom { display: flex; background: var(--bone); border: var(--rule-strong); }
.ec-zoom button { background: transparent; border: 0; border-right: var(--rule-strong); width: 2.25rem; height: 2.25rem; font-family: var(--sans); font-size: 1.125rem; line-height: 1; color: var(--graphite); cursor: pointer; }
.ec-zoom button:last-child { border-right: 0; }
.ec-zoom .ec-fit { width: auto; padding-inline: 0.625rem; font-size: 0.8125rem; letter-spacing: 0.02em; }
.ec-zoom button:hover { background: var(--graphite); color: var(--bone); }

.ec-chips { display: flex; flex-wrap: wrap; background: var(--bone); border: var(--rule-strong); }
.ec-chips button { background: transparent; border: 0; border-right: var(--rule-faint); height: 2.25rem; padding-inline: 0.625rem; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--graphite); cursor: pointer; white-space: nowrap; }
.ec-chips button:last-child { border-right: 0; }
.ec-chips button:hover { background: var(--graphite); color: var(--bone); }
.ec-chips span { font-variant-numeric: tabular-nums; color: var(--ash); }
.ec-chips button:hover span { color: var(--bone); }

.ec-spot select { height: 2.25rem; width: auto; font-size: 0.8125rem; padding: 0 0.5rem; background: var(--bone); letter-spacing: 0.02em; cursor: pointer; }

/* ---- Playing: the bar stays put at the top, over the map and the list alike. */
body[data-phase="play"] .ec-layout, body[data-phase="end"] .ec-layout { display: block; }

.ec-bar {
  position: sticky; top: 0; z-index: 10; background: var(--bone); border-bottom: var(--rule-strong);
  padding: 0.625rem var(--pad-x);
  display: grid; grid-template-columns: minmax(12rem, 38rem) auto auto minmax(0, 1fr) auto;
  gap: 0.375rem 1.25rem; align-items: center;
}
.ec-bar-main, .ec-bar-rule { display: contents; }
.ec-typing { position: relative; min-width: 0; grid-area: 1 / 1; }
.ec-score { grid-area: 1 / 2; }
.ec-clock { grid-area: 1 / 3; }
.ec-msg { grid-area: 1 / 4; }
.ec-acts { grid-area: 1 / 5; }
.ec-rule { grid-column: 1 / -1; grid-row: 2; }
.ec-end { grid-column: 1 / -1; grid-row: 1; }
input.ec-input { font-family: var(--serif); font-size: 1.625rem; line-height: 1.2; padding: 0.3125rem 0.75rem; height: 3rem; }
input.ec-input::placeholder { color: var(--ash); opacity: 1; font-style: italic; }
input.ec-input:disabled { color: var(--ash); }

/* The name is waiting to see whether you are still typing: a hairline under the box, running out. */
.ec-hold { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vermillion); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.ec-hold.is-on { animation: ec-hold 700ms linear forwards; }
@keyframes ec-hold { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.ec-score { margin: 0; font-size: 1.625rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ec-of { font-family: var(--sans); font-size: 0.875rem; color: var(--ash); }
.ec-clock { margin: 0; font-family: var(--sans); font-size: 1rem; font-variant-numeric: tabular-nums; min-width: 3.25em; }
.ec-clock.is-short { border-bottom: 2px solid var(--vermillion); width: fit-content; }
.ec-acts { display: flex; gap: 0.5rem; }

.ec-rule { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; align-items: baseline; font-family: var(--sans); font-size: 0.875rem; line-height: 1.35; }
.ec-rule:empty { display: none; }
.ec-rule b { font-family: var(--serif); font-weight: 400; font-size: 1.125rem; font-style: italic; }
.ec-rule-stat { color: var(--ash); font-variant-numeric: tabular-nums; }
.ec-msg { margin: 0; font-family: var(--sans); font-size: 0.875rem; line-height: 1.3; color: var(--graphite); }
.ec-msg[data-tone="no"]::before { content: '×'; color: var(--vermillion); margin-right: 0.375em; font-weight: 700; }

.ec-letters { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; border: var(--rule-muted); font-size: 0.75rem; align-self: center; }
.ec-letters li { width: 1.125rem; text-align: center; line-height: 1.25rem; font-variant-numeric: tabular-nums; }
.ec-letters li.is-done { color: var(--ash); text-decoration: line-through; }
.ec-letters li.is-now { background: var(--graphite); color: var(--bone); }

.ec-end { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; }
body[data-phase="end"] .ec-bar-main, body[data-phase="end"] .ec-bar-rule { display: none; }
body[data-phase="end"] .ec-bar { display: block; }
.ec-end-line { font-size: 1.75rem; line-height: 1.1; margin: 0; font-variant-numeric: lining-nums; }
.ec-end-sub { font-family: var(--sans); font-size: 0.875rem; margin: 0.25rem 0 0; color: var(--ash); max-width: 72ch; }

body[data-phase="play"] .ec-stage, body[data-phase="end"] .ec-stage { position: relative; border-bottom: var(--rule-strong); }

/* The word itself, on its way from the box to its place on the map. */
.ec-fly { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; transform-origin: 0 0; white-space: nowrap; font-family: var(--serif); font-size: 1.625rem; line-height: 1.2; color: var(--graphite); paint-order: stroke fill; -webkit-text-stroke: 4px var(--bone); will-change: transform; }

/* ---- The list: a gazetteer with blanks, each in the place its name will fill. */
.ec-roster { padding: 2.5rem var(--pad-x) 3rem; }
.ec-roster > h2 { margin: 0 0 1.25rem; }
.ec-roster-body { columns: 12.5rem; column-gap: 2rem; }
.ec-group { margin-bottom: 1.5rem; }
.ec-group h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.15; margin: 0; padding-bottom: 0.25rem; border-bottom: var(--rule-strong); break-after: avoid; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ec-group-n { font-family: var(--sans); font-size: 0.75rem; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-group ol { list-style: none; margin: 0; padding: 0; }
.ec-slot { position: relative; break-inside: avoid; border-bottom: var(--rule-faint); min-height: 1.75rem; }
.ec-slot button { display: block; width: 100%; min-height: 1.75rem; padding: 0.125rem 0; background: none; border: 0; text-align: left; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--graphite); cursor: pointer; }
.ec-slot button:disabled { cursor: default; }
.ec-slot button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 0.16em; }
.ec-slot.is-current::before { content: '✳'; position: absolute; left: -1.125rem; top: 0.25rem; color: var(--vermillion); font-family: var(--sans); font-size: 0.75rem; }
.ec-slot.is-missed button { color: var(--ash); font-style: italic; }
.ec-slot.is-missed::before { content: '×'; position: absolute; left: -0.875rem; top: 0.1875rem; color: var(--vermillion); font-family: var(--sans); font-size: 0.875rem; font-weight: 700; }

/* A short window gives up the sentence before it gives up the choices. */
@media (max-height: 780px) and (min-width: 901px) {
  .ec-lede { display: none; }
}

/* ---- Narrow windows */
@media (max-width: 900px) {
  .ec-layout { display: block; }
  .ec-setup { border-right: 0; min-height: 0; padding: 1.25rem var(--pad-x) 0; }
  body[data-phase="setup"] .ec-stage { position: relative; height: 62vw; min-height: 18rem; border-top: var(--rule-strong); }
  body[data-phase="setup"] .ec-tools { display: none; }
}

@media (max-width: 700px) {
  body[data-phase="play"] .ec-folio { display: none; }
  .ec-bar { padding: 0.4375rem 0.75rem; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.25rem 0.75rem; }
  .ec-typing { grid-area: 1 / 1 / 2 / -1; }
  .ec-score { grid-area: 2 / 1; }
  .ec-clock { grid-area: 2 / 2; }
  .ec-acts { grid-area: 2 / 3; justify-self: end; gap: 0.375rem; }
  .ec-rule { grid-row: 3; font-size: 0.8125rem; }
  .ec-msg { grid-area: 4 / 1 / 5 / -1; font-size: 0.8125rem; }
  .ec-msg:empty { display: none; }
  input.ec-input { height: 2.625rem; font-size: 1.375rem; }
  .ec-score { font-size: 1.25rem; }
  .ec-clock { font-size: 0.875rem; min-width: 0; }
  .ec-acts .btn.mini { padding: 0.1875rem 0.5rem; font-size: 0.8125rem; }
  .ec-rule b { font-size: 1rem; }
  .ec-letters { width: 100%; }
  .ec-letters li { flex: 1 1 0; width: auto; }
  .ec-tools { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ec-tools::-webkit-scrollbar { display: none; }
  .ec-tools > * { flex: none; }
  .ec-chips { flex-wrap: nowrap; }
  .ec-roster { padding: 1.5rem 1.5rem 2rem; }
  .ec-end-line { font-size: 1.375rem; }
}

@media (pointer: coarse) {
  .ec-zoom button, .ec-chips button, .ec-spot select { height: 2.5rem; }
  .ec-zoom button { width: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-hold.is-on { animation: none; transform: scaleX(1); }
}