@font-face {
  font-family: 'Pixel';
  src: url('/fonts/NormalFont.ttf') format('truetype');
  font-display: swap;
  /* Its space has no width, so words run together. Leave the space to the fallback font. */
  unicode-range: U+0021-007E, U+00A0-017F, U+2000-206F, U+2190-21FF, U+2600-27BF;
}

:root {
  --bg: #16171f;
  --panel: #23252f;
  --panel-2: #2d303c;
  --line: #3b3f4e;
  --ink: #f3eedf;
  --muted: #a8a596;
  --accent: #f2b544;
  --accent-ink: #231a06;
  --good: #72c86a;
  --bad: #e25a4c;
  --ember: #ef7d45;
  --tide: #4aa3e0;
  --grove: #7cc255;
  --gale: #c7b8f0;
  --r0: #cfcab8;
  --r1: #6fc4e8;
  --r2: #c38cf2;
  --r3: #f2b544;
  --bar-h: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* A display rule must never beat the hidden attribute. */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  /* The pack's pixel font only reads at heading sizes; everything else is plain. */
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body { overflow: hidden; }
canvas { image-rendering: pixelated; display: block; }
button { font: inherit; color: inherit; }

.btn {
  appearance: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: calc(3px * var(--ui, 3));
  border-image: url('/art/ui/wood/button_normal.png') 3 fill repeat;
  image-rendering: pixelated;
  color: var(--wood-ink, #f7e7c3);
  padding: calc(3px * var(--ui, 3)) calc(5px * var(--ui, 3));
  min-height: 52px;
  font-size: 17px;
  line-height: 1.1;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.btn:active { border-image-source: url('/art/ui/wood/button_pressed.png'); transform: translateY(1px); }
.btn:disabled { border-image-source: url('/art/ui/wood/button_disabled.png'); color: #c2a882; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--gold, #f2b544); outline-offset: 2px; }
.btn.main { color: #fff6df; }
.btn.big { font-size: 21px; min-height: 64px; }
.btn.good { color: #d8f6cf; }
.btn.bad { color: #ffd0c8; }

/* ---- minigame shell ---- */
.mg {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 50;
}
.mg-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) 12px 0;
  background: #241a12;
  border-bottom: calc(2px * var(--ui, 3)) solid #120c08;
}
.mg-bar .face { width: 38px; height: 38px; image-rendering: pixelated; }
.mg-bar .title { flex: 1; min-width: 0; }
.mg-bar .title b { display: block; font-size: 17px; font-weight: normal; }
.mg-bar .title small { color: var(--muted); font-size: 13px; }
.mg-stage {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
/* The strip under the stage: one instruction, then the controls. */
.mg-prompt {
  flex: none;
  padding: 12px 14px;
  background: #241a12;
  border-top: calc(2px * var(--ui, 3)) solid #120c08;
  color: #f7e7c3;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
}
.mg-controls {
  flex: none;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 10px calc(10px + var(--safe-b));
  background: #241a12;
}
.mg-controls .btn { flex: 1 1 0; max-width: 220px; font-size: 20px; padding: 16px 10px; }

.mg-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(22, 23, 31, 0.92);
  text-align: center;
  padding: 24px;
}
.mg-result h2 { margin: 0; font-size: 34px; font-weight: normal; }
.mg-result p { margin: 0; color: var(--muted); font-size: 16px; }

.rar-0 { color: var(--r0); }
.rar-1 { color: var(--r1); }
.rar-2 { color: var(--r2); }
.rar-3 { color: var(--r3); }