:root {
  --ink: #2A211A;
  --wood: #B98248;
  --wood-dark: #7B4F2A;
  --wood-deep: #5B3A1F;
  --cap: #F6ECD3;
  --marigold: #F2A03D;
  --marigold-dark: #B06D23;
  --cream: #F7EFDB;
  --key: clamp(22px, 6.2vh, 40px);
  --gauge: clamp(120px, 17vh, 190px);
  --stick: clamp(88px, 14vh, 112px);
  --sprint: clamp(74px, 12vh, 96px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #C99661;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
}

#game canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* ── signboard ───────────────────────────────────────────── */
#signboard {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  width: clamp(142px, 20vh, 238px);
  padding: 7px 12px 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(94deg, rgba(84, 50, 22, 0.13) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(2deg, rgba(255, 231, 178, 0.06) 0 1px, transparent 1px 7px);
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  box-shadow:
    0 4px 0 var(--wood-dark),
    0 8px 16px rgba(42, 33, 26, 0.22),
    inset 0 0 0 3px rgba(255, 235, 190, 0.13);
  transform: rotate(-2.1deg);
  transform-origin: 20% 50%;
}

#signboard::before,
#signboard::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6C4526;
  border: 1px solid rgba(28, 21, 14, 0.7);
  box-shadow: inset 1px 1px 0 rgba(255, 230, 180, 0.25);
}
#signboard::before { left: 5px; top: 5px; }
#signboard::after { right: 5px; bottom: 5px; }

.sign-eyebrow {
  font-family: 'Chivo Mono', monospace;
  font-size: clamp(8px, 1.05vh, 11px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #F7E7C6;
  text-shadow: 0 1px 0 rgba(74, 42, 18, 0.55);
}

.sign-name {
  font-family: 'Bowlby One', display;
  font-size: clamp(20px, 3.2vh, 33px);
  line-height: 0.95;
  letter-spacing: 0.015em;
  color: var(--cream);
  text-shadow: 0 2px 0 #6B3F1D, 0 3px 0 rgba(42, 33, 26, 0.25);
}

.sign-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(6.5px, 0.86vh, 9px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(247, 239, 219, 0.84);
  text-shadow: 0 1px 0 rgba(74, 42, 18, 0.5);
}

.sign-row {
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Chivo Mono', monospace;
  color: var(--cream);
  line-height: 1;
}

.sign-label {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(8px, 1vh, 10px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(247, 239, 219, 0.82);
}

.sign-num {
  font-family: 'Chivo Mono', monospace;
  font-size: clamp(12px, 1.5vh, 17px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.sign-unit {
  font-size: clamp(8px, 1vh, 10px);
  font-weight: 600;
  color: rgba(247, 239, 219, 0.82);
}

/* ── bottom left: stamina and keys ───────────────────────── */
#leftHud {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(7px, 1.3vh, 13px);
}

#staminaWrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: rotate(-1deg);
  transform-origin: 20% 80%;
}

.hud-label {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(7px, 0.95vh, 10px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(42, 33, 26, 0.6);
}

#staminaPlate {
  width: var(--gauge);
  filter: drop-shadow(0 3px 3px rgba(42, 33, 26, 0.22));
  transition: opacity 0.15s ease;
}

#staminaPlate svg {
  display: block;
  width: 100%;
  height: auto;
}

#keycaps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cap-row {
  display: flex;
  gap: 4px;
}

kbd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--key);
  height: var(--key);
  padding: 3px;
  margin: 0;
  background: #8E5B2D;
  border: 2px solid var(--ink);
  border-radius: 7px;
  box-shadow:
    0 4px 0 var(--wood-deep),
    0 6px 7px rgba(42, 33, 26, 0.20);
  font-family: 'Figtree', sans-serif;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

kbd > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--cap);
  border: 1.5px solid rgba(42, 33, 26, 0.55);
  border-radius: 4px;
  font-size: calc(var(--key) * 0.38);
  font-weight: 800;
  line-height: 1;
  color: #4A3423;
  transition: background 0.06s ease, color 0.06s ease;
}

kbd.wide {
  width: calc(var(--key) * 2.15);
}

kbd.active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wood-deep), 0 2px 3px rgba(42, 33, 26, 0.18);
}

kbd.active > span {
  background: var(--marigold);
  color: #3B2A1C;
}

.cap-hint {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(6.5px, 0.82vh, 9px);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(247, 239, 219, 0.9);
  text-shadow: 0 1px 0 rgba(42, 33, 26, 0.62);
  margin-top: 1px;
}

/* ── touch controls ──────────────────────────────────────── */
#touchUI { display: none; }

body.touch #touchUI {
  display: block;
  position: absolute;
  inset: 0;
}

#stick,
#sprintBtn {
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
}

#stick {
  position: absolute;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: var(--stick);
  height: var(--stick);
  border-radius: 50%;
  background: #9A6533;
  border: 3px solid var(--ink);
  box-shadow:
    inset 0 6px 0 rgba(255, 231, 178, 0.13),
    inset 0 -7px 0 rgba(60, 35, 15, 0.25),
    0 5px 0 #6B4527,
    0 9px 16px rgba(42, 33, 26, 0.22);
}

#stick::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 2px dashed rgba(247, 231, 198, 0.30);
  transition: border-color 0.12s ease, background 0.12s ease;
}

#stick.active {
  box-shadow:
    inset 0 6px 0 rgba(255, 231, 178, 0.20),
    inset 0 -7px 0 rgba(60, 35, 15, 0.25),
    0 3px 0 #6B4527,
    0 6px 12px rgba(42, 33, 26, 0.22);
}

#stick.active::before {
  border-color: rgba(247, 231, 198, 0.52);
  background: rgba(255, 222, 150, 0.08);
}

#stick::after {
  content: "MOVE";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(6px, 0.9vh, 9px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(247, 231, 198, 0.55);
}

#stickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--marigold);
  border: 3px solid var(--ink);
  box-shadow:
    0 4px 0 var(--marigold-dark),
    inset 0 3px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

#sprintBtn {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: var(--sprint);
  height: var(--sprint);
  padding: 0;
  border-radius: 50%;
  background: var(--cap);
  border: 3px solid var(--ink);
  box-shadow:
    0 5px 0 var(--wood-deep),
    0 9px 16px rgba(42, 33, 26, 0.22),
    inset 0 3px 0 rgba(255, 246, 214, 0.5),
    inset 0 0 0 6px rgba(142, 91, 45, 0.16);
  font-family: 'Bowlby One', display;
  font-size: clamp(8px, 1.35vh, 13px);
  letter-spacing: 0.03em;
  color: #3B2A1C;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.06s ease;
}

#sprintBtn.active {
  background: var(--marigold);
  box-shadow:
    0 2px 0 var(--marigold-dark),
    0 3px 5px rgba(42, 33, 26, 0.18),
    inset 0 3px 0 rgba(255, 246, 214, 0.45);
  transform: translateY(3px) scale(0.97);
}

#sprintBtn::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(74, 52, 35, 0.28);
  pointer-events: none;
}

#sprintBtn:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

/* touch has no keyboard, so the keycaps and their hint go away */
body.touch #keycaps { display: none; }

body.touch #leftHud {
  bottom: calc(128px + env(safe-area-inset-bottom));
}

/* ── small screens ───────────────────────────────────────── */
@media (max-height: 700px) {
  .sign-sub { display: none; }
  #signboard { padding: 6px 10px 7px; }
  .cap-hint { display: none; }
}

@media (max-width: 370px) {
  :root {
    --key: clamp(20px, 6vh, 34px);
  }
  #signboard { width: 136px; }
  .sign-name { font-size: 19px; }
}

/* ── level intro and round cleared ───────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 42%, rgba(42, 33, 26, 0.24), rgba(42, 33, 26, 0.56));
  animation: overlay-in 0.22s ease-out both;
}

.overlay[hidden] { display: none; }

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel {
  position: relative;
  width: min(430px, 90vw);
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: clamp(18px, 3.6vh, 30px) clamp(20px, 4vw, 34px) clamp(20px, 3.6vh, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(7px, 1.3vh, 12px);
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(94deg, rgba(84, 50, 22, 0.13) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(2deg, rgba(255, 231, 178, 0.06) 0 1px, transparent 1px 7px);
  border: 3px solid var(--ink);
  border-radius: 7px;
  box-shadow:
    0 6px 0 var(--wood-dark),
    0 18px 40px rgba(42, 33, 26, 0.42),
    inset 0 0 0 3px rgba(255, 235, 190, 0.13);
  transform: rotate(-1.1deg);
  animation: panel-in 0.26s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: rotate(-1.1deg) translateY(14px) scale(0.96); }
  to { opacity: 1; transform: rotate(-1.1deg) translateY(0) scale(1); }
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6C4526;
  border: 1px solid rgba(28, 21, 14, 0.7);
  box-shadow: inset 1px 1px 0 rgba(255, 230, 180, 0.25);
}
.panel::before { left: 7px; top: 7px; }
.panel::after { right: 7px; bottom: 7px; }

.panel-kicker {
  font-family: 'Chivo Mono', monospace;
  font-size: clamp(8.5px, 1.1vh, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #F7E7C6;
  text-shadow: 0 1px 0 rgba(74, 42, 18, 0.55);
}

.panel-title {
  margin: 0;
  font-family: 'Bowlby One', display;
  font-size: clamp(28px, 5.6vh, 48px);
  line-height: 0.95;
  letter-spacing: 0.015em;
  color: var(--cream);
  text-shadow: 0 3px 0 #6B3F1D, 0 4px 0 rgba(42, 33, 26, 0.25);
}

#roundCleared .panel-title {
  font-size: clamp(26px, 5.1vh, 44px);
}

.panel-line {
  margin: 0;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(10px, 1.35vh, 13px);
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #FBE9C4;
  text-shadow: 0 1px 0 rgba(74, 42, 18, 0.55);
}

.panel-body {
  margin: 0;
  max-width: 32ch;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(12px, 1.6vh, 15px);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(247, 239, 219, 0.92);
}

.panel-stats {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin: clamp(2px, 0.8vh, 6px) 0 clamp(3px, 0.8vh, 6px);
}

.stat {
  flex: 1 1 0;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px 9px;
  background: #6D4526;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: inset 0 2px 0 rgba(255, 231, 178, 0.12);
}

.stat-label {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(8px, 1.05vh, 10px);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(247, 239, 219, 0.78);
}

.stat-num {
  font-family: 'Chivo Mono', monospace;
  font-size: clamp(18px, 2.7vh, 26px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.panel-btn {
  pointer-events: auto;
  min-width: clamp(150px, 42%, 210px);
  margin-top: clamp(2px, 0.8vh, 6px);
  padding: clamp(10px, 1.7vh, 14px) 26px;
  background: var(--marigold);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow:
    0 5px 0 var(--marigold-dark),
    0 9px 16px rgba(42, 33, 26, 0.24),
    inset 0 3px 0 rgba(255, 246, 214, 0.45);
  font-family: 'Bowlby One', display;
  font-size: clamp(13px, 1.9vh, 18px);
  letter-spacing: 0.04em;
  color: #3B2A1C;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.06s ease;
}

.panel-btn:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    0 2px 0 var(--marigold-dark),
    0 3px 5px rgba(42, 33, 26, 0.18),
    inset 0 3px 0 rgba(255, 246, 214, 0.45);
}

.panel-btn:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

@media (max-height: 520px) {
  .panel { gap: 5px; padding: 13px 22px 15px; }
  .panel-body { font-size: 11px; max-width: 40ch; }
  .panel-line { font-size: 9px; }
  .panel-title { font-size: clamp(22px, 6.4vh, 32px); }
  #roundCleared .panel-title { font-size: clamp(21px, 6.1vh, 30px); }
  .stat-num { font-size: 18px; }
  .panel-btn { padding: 7px 20px; font-size: 13px; }
}