/* Tokens, page and shared pieces. The player has one finish: light truck-blue. */

:root {
  /* Light truck-blue enamel, matched to reference 07 (sampled #9ab2c7). */
  --blue: #9bb4ca;
  --blue-hi: #b3c9dc;
  --blue-lo: #86a3bd;
  --blue-shade: #5d7a96;

  /* Printed ink: dark navy, as the original logo is dark ink on a light ground. */
  --ink: #17243c;
  --ink-soft: #2b3b58;

  /* Warm off-white keys and paper. */
  --cream: #efe3c6;
  --cream-hi: #f9f1dd;
  --cream-lo: #d8c59e;
  --cream-edge: #a9946a;
  --key-ink: #35261c;
  --sage: #93a688;
  --sage-lo: #74876b;

  --brass: #c69a4c;
  --brass-hi: #f1d590;
  --brass-lo: #7b5624;
  --rust: #a5673a;

  --wood: #24160d;
  --paper: #f4ead2;
  --focus-on-dark: #ffd27a;

  --font-label: 'Avenir Next Condensed', 'Avenir Next', 'Futura', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-hand: 'Bradley Hand', 'Noteworthy', 'Marker Felt', 'Segoe Print', 'Comic Sans MS', cursive;
  --font-script: 'Snell Roundhand', 'Savoye LET', 'Brush Script MT', 'Segoe Script', cursive;
  --font-slab: 'Rockwell', 'American Typewriter', 'Courier New', Georgia, serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-read: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* The player scales as one object. --u is one hundredth of its width. */
  --ratio: 1.7;
  --shelf: 58px;
  --screen-h: 100vh;
  --device-w: max(250px, min(100vw - 20px, (var(--screen-h) - var(--shelf) - 40px) / var(--ratio), 540px));
  --u: calc(var(--device-w) / 100);
}

/* Phones: measure the screen without the browser's sliding toolbars. */
@supports (height: 100dvh) {
  :root {
    --screen-h: 100dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--wood);
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-text);
  color: #ead9b8;
  /* A dark wooden tabletop: quiet, warm, and out of the player's way. */
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 9px, rgba(255, 220, 170, 0.025) 9px 11px, transparent 11px 23px),
    radial-gradient(120% 85% at 50% 30%, #523420 0%, #33200f 52%, #170d07 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

/* ---- the shelf under the player: tape box and storage note (secondary) ---- */

.shelf {
  width: var(--device-w);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shelf__btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(240, 220, 180, 0.28);
  background: rgba(240, 220, 180, 0.07);
  color: #f0e2c4;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: none;
}

.shelf__btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.shelf__btn--quiet {
  border-color: transparent;
  background: none;
  font-weight: 500;
  font-size: 13px;
  color: #cdb992;
  text-align: right;
  white-space: normal;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 6px;
  text-decoration: underline;
  text-decoration-color: rgba(205, 185, 146, 0.45);
  text-underline-offset: 3px;
}

.shelf__btn:hover {
  background: rgba(240, 220, 180, 0.13);
}

.shelf__btn--quiet:hover {
  background: none;
  color: #f0e2c4;
}

.shelf__btn:focus-visible,
.toast__close:focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}

/* ---- messages --------------------------------------------------------------- */

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 10px 12px 16px;
  border-radius: 10px;
  background: var(--paper);
  color: #2a1f16;
  border-left: 6px solid var(--ink-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.4;
}

.toast[data-kind='error'] {
  border-left-color: #a23b23;
}

.toast__text {
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}

.toast__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -8px -4px -8px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #2a1f16;
  font-size: 24px;
  line-height: 1;
}