/* Hue Knew? - tokens, reset, the wooden table, type helpers and motion.
   Look: a printed board game. Square-cut card stock, condensed display type,
   mono for numbers and labels, cherry and navy for the two players. */

:root {
  --ink: #3a2414;
  --ink-soft: #6e5640;
  --ink-faint: #a08a6c;
  /* warm white card stock: barely any yellow, so the board's colours read true */
  --card: #faf8f4;
  --card-hi: #fffefb;
  --card-alt: #f1ede6;
  --card-edge: #d9d1c5;
  --card-line: #e6e0d6;
  --field-line: #d8d0c4;
  --dash: #bdb2a3;
  --cherry: #b23a30;
  --cherry-dark: #7e2620;
  --navy: #2f4c80;
  --navy-dark: #1e3258;
  --quiet: #ece7df;
  --gold: #e2a93b;
  --p1: var(--cherry);
  --p2: var(--navy);
  --wood: #7a4a2a;
  --on-wood: #f3dfc0;

  --cell: 28px;
  --gap: 2px;
  --lab: 18px;

  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 5px;
  --card-shadow: 0 3px 0 var(--card-edge), 0 12px 24px rgba(40, 20, 5, .35);
  --box-shadow: 0 4px 0 var(--card-edge), 0 11px 0 #b3925f, 0 12px 0 #8c6c3e, 0 28px 44px rgba(20, 8, 2, .5);
  /* planks, then grain lines at a few uneven spacings, then the warm base */
  --table:
    repeating-linear-gradient(180deg, transparent 0 196px, rgba(28, 12, 3, .55) 196px 198px, rgba(255, 210, 160, .07) 198px 199px, transparent 199px 200px),
    repeating-linear-gradient(180deg, rgba(40, 18, 4, .07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(178.6deg, rgba(50, 22, 6, .10) 0 3px, transparent 3px 53px),
    repeating-linear-gradient(181.2deg, rgba(60, 28, 8, .08) 0 1px, transparent 1px 31px),
    linear-gradient(90deg, #7d4c2b 0%, #8a5631 22%, #74462a 41%, #8d5a34 63%, #7b4b2b 82%, #865331 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.45;
  background-color: var(--wood);
  background-image: var(--table);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- card stock ---------- */

.paper {
  background-color: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

/* ---------- type ---------- */

/* the printed title: condensed, heavy, all caps */
.logo {
  margin: 0;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.logo-big { font-size: clamp(4rem, 12vw, 8rem); }
.logo-small {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--card);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.section-head {
  margin: 0 0 14px;
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.05;
  text-transform: uppercase;
}

/* small printed labels: mono, spaced, all caps */
.caps, .field-label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- motion ---------- */

@keyframes bob { 0%, 100% { transform: translateY(-2px) scale(1.45); } 50% { transform: translateY(-6px) scale(1.45); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px rgba(58, 36, 20, .75); } 50% { box-shadow: 0 0 0 3.5px var(--card), 0 0 0 5.5px rgba(58, 36, 20, .55); } }
@keyframes glow { 0%, 100% { transform: scale(1.18); } 50% { transform: scale(1.3); } }
@keyframes drop { 0% { transform: translateY(-46px) scale(.9); opacity: 0; } 55% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes frame-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(46px) rotate(4deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes deal { from { opacity: 0; transform: translateY(-14px) rotate(-3deg); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cell.sel { transform: scale(1.45); }
}