/* ==========================================================================
   game/css/game.css — the chrome around Skyland Survival (V21.118)
   ==========================================================================

   Loaded by game/js/boot.js alongside game/js/game.js. It styles the frame
   around the game and nothing inside it: the canvas paints itself.

   The game's own classes are `.idle-` (it is an idle game). The shared
   controls it uses — `.sl-btn`, `.sl-btn--primary`, `.sl-icon-btn` — and every
   token read here (`--ink`, `--paper`, `--indigo`, the `--sp-*` scale, the
   `--md-*` corners and motion) come from game/css/theme.css. This file only
   sizes and places them.

   THE ONE LAYOUT RULE WORTH STATING, AND ITS EXCEPTION (V21.113). The game is
   authored for a thumb: the stage is capped at a phone's measure and
   letterboxed on a wide screen rather than stretched, so a tablet and a phone
   get the same game. A DESKTOP does not — a wide window with a mouse in it is
   a different room, and `.is-desk` (game/js/game.js, DESK_Q) lays the same furniture
   out for it:

     .idle-frame    the game's measure, 30rem or 80rem, and the thing every
                    control over the map is positioned inside
     .idle-zone     the Icon Zone, in the bottom-right corner of the frame
     .idle-keys     what the keyboard does, said out loud, on the one kind of
                    screen that has one

   Nothing else changes: same rows, same order, same prices, same tokens.
   ========================================================================== */

/* ── What the page underneath is not allowed to do to it ─────────────────
   The game can be opened on any page, and that page's own element rules reach
   inside it: a site stylesheet that gives every `h2` a border, padding or an
   accent bar would turn up under every card heading here. So this file resets
   every heading the game paints, once, at the top.

   The reset is written with :where(), so it carries no specificity of its own:
   it beats a bare `h2` by being the later stylesheet, and every class in this
   file beats it back. A heading's own rule below is what decides its rule,
   its padding and its margin. */
:where(.idle-overlay) h1,
:where(.idle-overlay) h2,
:where(.idle-overlay) h3,
:where(.idle-overlay) h4 {
  margin: 0;
  border: 0;
  padding: 0;
  text-transform: none;
}

/* The accent bar is a pseudo-element, so nothing in this file can restate it
   away by accident: it is switched off outright. */
.idle-overlay h2::after,
.idle-overlay h3::after,
.idle-overlay h4::after { content: none; }

/* ── A hidden thing is hidden (V21.118) ─────────────────────────────────────
   The other half of the same rule, and it was a real bug rather than a tidy-up.
   Four things in here are toggled with the `hidden` attribute and four of them
   set a `display` of their own — `.idle-cards`, `.idle-tabs`, `.idle-door` and
   `.idle-key` — and a class beats the browser's own `[hidden]` rule on
   specificity. Whether that bit depended on the HOST PAGE: one with a global
   `[hidden] { display: none !important }` hid them and one without left the
   card scrim up, with the game stuck behind it.

   An overlay cannot depend on the page under it for that, so it states it
   itself, scoped to its own subtree and with the one `!important` in this
   file, because beating a class on `display` is exactly what it is for. */
.idle-overlay [hidden] { display: none !important; }

.idle-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;                 /* over anything a host page is likely to open */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Inline, in a host element (V21.132) ─────────────────────────────────
   `open({ host })` mounts the SAME overlay inside an element on the page
   instead of over the whole window. Everything below is the two things that
   have to change for that: it stops being fixed, and it takes a height from
   the host rather than from the viewport. Full screen is this rule set coming
   off again — see `setFull()` in game/js/game.js — so there is one layout in
   this file and not two.

   The height is a viewport fraction with a floor, because a game in a card has
   to be big enough to read a map on and small enough that the page around it is
   still a page. It is clamped so a short window does not hand it the whole
   screen by accident. */
.idle-overlay.is-inline {
  position: relative;
  inset: auto;
  z-index: 1;
  height: clamp(22rem, 62vh, 40rem);
  border: 1px solid var(--hairline);
  border-radius: 0 var(--md-corner-m) 0 var(--md-corner-m);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

/* While it is full screen the page behind it does not scroll under it. The
   class is put on the body by setFull() and taken off by close(). */
body.idle-full { overflow: hidden; }

/* ── The bar ─────────────────────────────────────────────────────────────
   The camp's standing numbers on the left, its three controls on the right.
   It is a surface like any other panel here: card ground, hairline edge.

   IT IS AS WIDE AS THE GAME WINDOW (V21.140, and again in V21.142). The bar
   is the head of the map, so it takes the frame's measure (`--game-w`, stated
   on the overlay so the two read one number) and stands centred over it.
   V21.141 stretched it across the whole browser window, which was the wrong
   reading of "the size of the game window". */

.idle-overlay { --game-w: 30rem; }
.idle-overlay.is-desk { --game-w: 80rem; }

.idle-bar {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(100%, var(--game-w));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--header-h);
  padding: var(--sp-1) var(--sp-2);
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
}

.idle-stats {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.idle-stat {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--slate);
  white-space: nowrap;
}

.idle-stat--held { color: var(--ink); }
.idle-stat--best { color: var(--slate); opacity: 0.75; }

/* THE CLOCK (V21.110; the meter V21.112; back from a dial in V21.138). The
   day's name, then a bar of the whole cycle in four bands laid out in
   proportion to the four phases, with one mark riding across it, then the
   countdown to the next phase. One glance answers both questions: what time
   is it, and how long until that changes.

   The bands take the Pattern colours the game already means these hours by,
   Light for the day, Land for the evening, Sky for the night and Life for the
   morning, and the mark is a small sun (a moon after dark) on an ink ring.
   No transition anywhere: a bar that eased would lie about the time. */
.idle-stat--day { color: var(--slate); }
.idle-stat--day.is-dark { color: var(--indigo); }
.idle-stat--next { min-width: 6.5em; opacity: 0.85; font-variant-numeric: tabular-nums; }
.idle-stat--next.is-dark { color: var(--indigo); opacity: 1; }

.idle-clock {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  gap: 1px;
  width: 7rem;
  height: 8px;
  border-radius: var(--md-corner-xs);
  background: var(--hairline);
}

.idle-clock-seg { display: block; height: 100%; }
.idle-clock-seg:first-child { border-radius: var(--md-corner-xs) 0 0 var(--md-corner-xs); }
.idle-clock-seg:nth-last-child(2) { border-radius: 0 var(--md-corner-xs) var(--md-corner-xs) 0; }
.idle-clock-seg.is-day { background: var(--light-solid); }
.idle-clock-seg.is-dusk { background: var(--land-solid); }
.idle-clock-seg.is-night { background: var(--sky-solid); }
.idle-clock-seg.is-dawn { background: var(--life-solid); }

.idle-clock-mark {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--light-tint);
  border: 2px solid var(--ink);
  border-radius: var(--md-corner-full);
}
.idle-clock-mark.is-moon { background: var(--sky-tint); }

/* What goes when the bar runs out of room, in order. The METER never goes: it
   is the one readout with a deadline in it, and a player who cannot see it
   cannot plan a walk home. Best is decoration, the countdown repeats what the
   meter shows, and the day number is legible from the sky. */
@media (max-width: 30rem) {
  .idle-stat--best { display: none; }
}
@media (max-width: 26rem) {
  .idle-stat--next { display: none; }
}
@media (max-width: 22rem) {
  .idle-stat--day { display: none; }
}

.idle-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
}

/* HOW LOUD (V21.133). A plain range beside the mute button, narrow enough to
   live in a bar and gone on the narrowest screens, where the bar has already
   dropped the best run and the clock for the same reason. */
.idle-vol {
  width: 4.5rem;
  accent-color: var(--indigo);
  flex: none;
  margin: 0;
}

@media (max-width: 30rem) {
  .idle-vol { display: none; }
}

/* ── What the keyboard does (V21.113) ────────────────────────────────────
   Shown only on a desktop, because it is only true there — a phone has no
   keys to press, and a legend for controls you do not have is furniture. It
   sits in the bar rather than on the stage: the bar is where the game puts
   the things it can do, and the stage is the game.

   A key is a `<kbd>` on a hairline chip at the tag step of the shape scale
   (2px), the size for a small standing label. */

.idle-keys { display: none; }

.is-desk .idle-keys {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-right: var(--sp-2);
}

.idle-keyhint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--slate);
  white-space: nowrap;
}

.idle-key {
  display: inline-block;
  padding: 1px var(--sp-1);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--md-corner-xs);
}

/* The legend is the first thing to go when the bar runs out of room: every
   key it names still works, and the numbers beside it do not repeat anywhere
   else. V21.114 added the mouse's verbs to it, which are the ones a player
   cannot guess, so it needs a little more room before it goes. */
@media (max-width: 76rem) {
  .is-desk .idle-keys { display: none; }
}

.idle-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── The stage ───────────────────────────────────────────────────────────
   One canvas, centred and capped. `touch-action: none` is what lets a thumb
   on the stage steer the walker instead of scrolling the page behind the
   overlay. */

.idle-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* On a wide screen the game is letterboxed rather than stretched, so the
     ground either side is the page's deep paper and the stage reads as a
     panel standing on it. */
  background: var(--paper-deep);
}

/* ── The frame ───────────────────────────────────────────────────────────
   The game's own measure, and the box every control that stands over the map
   is positioned inside: the canvas, the door, the menu, the placement bar. One
   element holds the difference between the two layouts, so nothing downstream
   restates it.

   `--rail` is how much of the frame's right-hand edge the menu is standing on,
   and it is 0 unless a desktop rail is open. Things that centre themselves on
   the map read it, so they centre on the part of the map that is still
   visible. The modal cards are deliberately NOT in here: their scrim covers
   the whole stage, letterbox and all. */

.idle-frame {
  --rail-w: 24rem;
  --rail: 0px;
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--game-w));
  z-index: 0;
}


.idle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* THE CURSOR IS NOT A GRAB HANDLE (V21.114). `grab` and `grabbing` were here
     while the mouse was steering a virtual thumbstick, and they promised a map
     that could be dragged about. It cannot: a click sends the walker, a click
     on a building opens it, and game/js/game.js says so from the state it is in —
     `pointer` over a thing that opens, `crosshair` while something is being
     placed, and this plain arrow over the open snow. */
  cursor: default;
  /* A hairline rather than a border, so the edge costs the canvas no pixels. */
  box-shadow: 0 0 0 1px var(--hairline);
}

/* ── Cards: title, pause, camp, end ─────────────────────────────────────── */

.idle-cards {
  position: absolute;
  inset: 0;
  /* Over the station menu and the placement bar: the rename card is the one
     modal that opens on top of a sheet, and a modal behind the thing that
     opened it is a modal nobody can reach. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* A browser without color-mix still gets a readable scrim. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .idle-cards { background: var(--paper); opacity: 0.97; }
}

.idle-card {
  width: min(100%, 22rem);
  max-height: 100%;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  /* The trim diagonal: sharp at top-left and bottom-right, rounded at the
     other two, the same corner as .sl-btn. */
  border-radius: 0 var(--md-corner-l) 0 var(--md-corner-l);
  padding: var(--sp-4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.idle-card-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink);
}

.idle-card-body {
  margin: 0 0 var(--sp-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
}

.idle-card-body p { margin: 0 0 var(--sp-2); }
.idle-card-body p:last-child { margin-bottom: 0; }

.idle-how {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.idle-how li { color: var(--slate); }

.idle-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.idle-card-acts .sl-btn { flex: 1 1 auto; justify-content: center; }

/* The title card leads with the game's name, so it gets the accent rule the
   site gives a section head. */
.idle-card--title .idle-card-title {
  border-bottom: 2px solid var(--indigo);
  padding-bottom: var(--sp-1);
}

/* THE DAY'S BOARD (V21.112). One card at every dawn saying what the day just
   gone did, so it wears the same accent rule as the title card: it is a heading
   over a set of figures, which is exactly what a section head is.

   Its lines are FIGURES rather than prose, so each one is ruled off like a row
   on a sheet, and the scrim behind it is lighter than the other cards': the
   camp is still running underneath and the board is a thing you read past. */
.idle-card--board .idle-card-title {
  border-bottom: 2px solid var(--indigo);
  padding-bottom: var(--sp-1);
}

.idle-card--board .idle-card-body p {
  margin: 0;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

.idle-card--board .idle-card-body p:last-child {
  border-bottom: 0;
  color: var(--slate);
}

.idle-note {
  margin: var(--sp-2) 0;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--slate);
}

/* ── Saving the camp (V21.133) ───────────────────────────────────────────
   A block inside the Paused card: when it last wrote, the four things you can
   do about it, and the switch that says whether it keeps doing it. The buttons
   wrap, because there are four of them and a phone is narrow. */

.idle-save {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
}

.idle-save-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-2) 0;
}

.idle-save-acts .sl-btn { flex: 1 1 auto; justify-content: center; }

.idle-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--slate);
  cursor: pointer;
}

.idle-check-box { accent-color: var(--indigo); margin: 0; }

/* The file input the import opens. It is never seen: it is clicked the moment
   it is made and taken off the page as soon as the picker has answered. */
.idle-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.idle-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.idle-field-lab {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.idle-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.25rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--md-corner-s);
  padding: var(--sp-1) var(--sp-2);
}

/* The rename card is the one modal that appears while the world is still
   running, so it is deliberately small. */
.idle-card--ask { width: min(100%, 18rem); }

/* ── The live region ─────────────────────────────────────────────────────
   A canvas game cannot be played by ear, but what happened to the crew can be
   announced, so a screen reader following along is told the outcome of every
   gate, drift and camp. Visually hidden, never display:none (which would take
   it out of the accessibility tree with it). */

.idle-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A game is not a document. If someone prints the page under it, it is gone. */
@media print {
  .idle-overlay { display: none !important; }
}

/* The game's extra brightness and saturation is baked into its sheets and its
   palette (V21.142), so the canvas carries no filter: a filter here is a second
   full-screen pass on every frame. A browser whose canvas cannot filter keeps
   it here instead; game/js/game.js marks the canvas `.is-baked` when it has baked. */
.idle-canvas:not(.is-baked) { filter: brightness(1.08) saturate(1.16); }

/* V21.126: map overlays preserve the full canvas when menus open. */
.idle-map { position: absolute; inset: 0; }
.idle-dock { display: contents; }
/* The strip that says what just happened, back at the foot of the map where
   it always stood (V21.138, after a version at the top). It stops short of the
   Icon Zone's column on the right, and it is under the zone, so a long toast
   never covers a button. */
.idle-notice { position: absolute; left: var(--sp-4); right: calc(var(--sp-4) + 3.25rem + var(--sp-2)); bottom: 5rem; margin: 0 auto; max-width: 34rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--md-corner-m); background: #182a37ed; color: #fff9e9; font-size: 0.8125rem; line-height: 1.4; text-align: center; pointer-events: none; z-index: 1; }
.idle-notice[hidden] { display: none; }
.idle-night { position: absolute; top: var(--sp-3); right: var(--sp-3); min-height: 44px; background: #ffe67a; color: #182a37; }
@media (max-height: 32rem) { .idle-overlay, .idle-overlay.is-desk { --game-w: 100%; } .idle-notice { max-width: 25rem; } }


/* ── THE ICON ZONE (V21.137) ──────────────────────────────────────────────────
   Every action in the game is either a place you stand or an icon here: a
   COLUMN of round buttons up the right-hand side of the frame, the primary one
   at the bottom where a thumb already is, each with a one-word caption beside
   it. Over the column, a chip naming what the icons are about; over that,
   when an action needs a value, a small panel with the control on it. It is
   one component on a phone and on a desktop: the frame decides how wide the
   map is, and the zone stands on its right edge either way.

   THE BUTTONS WEAR THE OLD ROD BUTTON'S BACKING: a butter-yellow disc with a
   dark ink icon, the one control the game already had on the map. A column up
   the side (rather than a row across the foot) leaves the bottom of the map,
   where the walker usually is, clear, and it is where a right thumb rests.

   Sizes: a 3.25rem disc is 52px, over the 48px touch target; captions are the
   fine-print step. */

.idle-zone {
  --zone-disc: #ffe67a;
  --zone-ink: #182a37;
  position: absolute;
  right: var(--sp-3);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  top: var(--sp-12);
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--sp-2);
  z-index: 2;
  /* The zone's box spans the frame so it can stand on its right edge; only
     what is in it takes a touch. */
  pointer-events: none;
}

.idle-zone > * { pointer-events: auto; }

.idle-zone-title {
  margin: 0;
  max-width: min(100%, 16rem);
  padding: var(--sp-1) var(--sp-3);
  display: grid;
  justify-items: end;
  text-align: right;
  background: #182a37ed;
  color: #fff9e9;
  border-radius: var(--md-corner-m);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.idle-zone-name {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
}

.idle-zone-sub {
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.85;
}

/* The column: primary at the bottom, the rest stacked up above it. */
.idle-zone-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--sp-2);
  max-height: 100%;
}

.idle-zone-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  font: inherit;
  color: var(--zone-ink);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.idle-zone-disc {
  order: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--md-corner-full);
  background: var(--zone-disc);
  color: var(--zone-ink);
  border: 2px solid var(--zone-ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: box-shadow var(--md-dur-short, 120ms) var(--md-ease-standard, ease);
}

.idle-zone-disc svg { width: 1.9rem; height: 1.9rem; display: block; }

/* The caption sits to the LEFT of its disc, on the same dark chip the title
   wears, so a column of them reads as a list of labelled buttons. */
.idle-zone-cap {
  order: 1;
  max-width: 11rem;
  padding: var(--sp-0h) var(--sp-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff9e9;
  background: #182a37d9;
  border-radius: var(--md-corner-xs);
}

.idle-zone-cap:empty { display: none; }

/* The one thing to do here: the same yellow, with a heavier ring. */
.idle-zone-btn.is-go .idle-zone-disc { box-shadow: 0 0 0 3px #182a3740, 0 3px 10px rgba(0, 0, 0, 0.28); }

/* Priced and not yet affordable: still pressable (it says what it is short
   by), but it reads as waiting rather than as ready. */
.idle-zone-btn.is-poor .idle-zone-disc { background: #efe3b4; color: #5d6770; border-color: #5d6770; }
.idle-zone-btn.is-poor .idle-zone-cap { color: #d8d2c0; }

/* Backing out of something: the cross and the stop sign, on the same disc. */
.idle-zone-btn.is-stop .idle-zone-disc { color: #b2352a; }

.idle-zone-btn[aria-disabled='true'] .idle-zone-disc { opacity: 0.6; }

/* M3 state layers, never an invert. */
.idle-zone-btn:hover .idle-zone-disc { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), inset 0 0 0 999px color-mix(in srgb, currentColor 10%, transparent); }
.idle-zone-btn:active .idle-zone-disc { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset 0 0 0 999px color-mix(in srgb, currentColor 16%, transparent); }
.idle-zone-btn:focus-visible { outline: none; }
.idle-zone-btn:focus-visible .idle-zone-disc { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* The key that presses it, on a machine that has keys: on the disc's top
   right, clear of the caption. */
.idle-zone-key {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 1;
  min-width: 1.1rem;
  padding: 0 3px;
  font: 700 0.625rem/1.1rem var(--sans);
  text-align: center;
  color: var(--zone-ink);
  background: #fff9e9;
  border: 1px solid var(--zone-ink);
  border-radius: var(--md-corner-xs);
}

.idle-zone-panel {
  width: min(100%, 17rem);
  padding: var(--sp-3);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 0 var(--md-corner-l) 0 var(--md-corner-l);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* The colour ring (V21.138): a hue ring with the colour you have filling its
   middle, two sliders under it, and the last five colours you kept. */
.idle-wheel { display: grid; justify-items: center; gap: var(--sp-2); }
.idle-wheel-disc {
  width: 9.25rem;
  height: 9.25rem;
  border-radius: var(--md-corner-full);
  touch-action: none;
  cursor: pointer;
}
.idle-wheel-disc:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.idle-wheel-slide {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--slate);
}
.idle-wheel-slide input { width: 100%; min-width: 0; margin: 0; accent-color: var(--md-primary); }
.idle-wheel-recent { display: flex; gap: var(--sp-2); padding-top: var(--sp-1); }
.idle-wheel-swatch {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid var(--card);
  border-radius: var(--md-corner-full);
  box-shadow: 0 0 0 1px var(--hairline), 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.idle-wheel-swatch:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* How long to mine (V21.141): the zone's own dress, stood on end. A
   butter-yellow track with the ink edge the discs wear, a disc for a thumb,
   the part below the thumb a shade deeper, and each of the eight stops named
   on the captions' dark chip, longest at the top. The panel under it drops
   its card: this is a control on the map, like the buttons beside it. */
.idle-zone-panel.is-bare {
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.idle-minebox {
  --thumb: 2.5rem;
  display: grid;
  justify-items: end;
  gap: var(--sp-2);
}
.idle-minebox-read {
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  display: grid;
  justify-items: end;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff9e9;
  background: #182a37ed;
  border-radius: var(--md-corner-m);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.idle-minebox-read strong { font-family: var(--serif); font-size: 1.05rem; }
.idle-minebox-body {
  display: grid;
  grid-template-columns: auto 3.25rem;
  gap: var(--sp-2);
  height: 15rem;
}
.idle-minebox-marks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* The chips' middles sit on the thumb's stops: the thumb's centre runs
     from half a thumb in from each end of the track. */
  padding: calc(var(--thumb) / 2 - 0.65rem + 2px) 0;
}
.idle-minebox-mark {
  height: 1.3rem;
  padding: 0 var(--sp-2);
  font: 700 0.75rem/1.3rem var(--sans);
  color: #fff9e9;
  background: #182a37d9;
  border: 0;
  border-radius: var(--md-corner-xs);
  cursor: pointer;
}
.idle-minebox-mark.is-on { color: #182a37; background: #ffe67a; box-shadow: 0 0 0 1px #182a37; }
.idle-minebox-range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  box-sizing: border-box;
  width: 3.25rem;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(to top, #f0c94a var(--fill), #ffe67a var(--fill));
  border: 2px solid #182a37;
  border-radius: var(--md-corner-l);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.idle-minebox-range:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.idle-minebox-range::-webkit-slider-runnable-track { background: none; border: 0; }
.idle-minebox-range::-moz-range-track { background: none; border: 0; }
.idle-minebox-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: var(--md-corner-full);
  background: #fff9e9;
  border: 2px solid #182a37;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.idle-minebox-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: var(--md-corner-full);
  background: #fff9e9;
  border: 2px solid #182a37;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.idle-minebox-note {
  margin: 0;
  padding: var(--sp-0h) var(--sp-2);
  font-size: 0.75rem;
  font-style: italic;
  color: #fff9e9;
  background: #182a37d9;
  border-radius: var(--md-corner-xs);
}

/* A card button the width of the card: Continue. */
.idle-card-acts .idle-btn-wide {
  flex: 1 0 100%;
  min-height: 3rem;
  font-size: 1.05rem;
}

/* The town pond's log. */
.idle-log { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.idle-log li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--hairline);
}
.idle-log-name { color: var(--ink); font-weight: 700; }
.idle-log-where { grid-column: 1; font-size: 0.75rem; }
.idle-log-pay { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .idle-zone-disc { transition: none; }
}

@media print {
  .idle-zone { display: none; }
}