/* Layout and screens. Colors come from CONFIG.colors.ui in game.js
   (the values below are only fallbacks used before the script runs). */
:root {
  --ui-page: #8fd3dc;
  --ui-cream: #fff3d6;
  --ui-brown: #5b3a22;
  --ui-brown-dark: #3d2615;
  --ui-accent: #e8743b;
  --ui-leaf: #6fae4e;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;

  /* PLAY COLUMN SIZE: the tree, character, buttons and top bar sit in a
     centered column this wide. The landscape always fills the window.
     column-ratio = column width as a share of the window height. */
  --column-max: 520px;
  --column-ratio: 0.6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ui-page);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  color: var(--ui-brown);
}

/* Fills the whole window. */
#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: pointer;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Frame-rate counter (press F) */
#fps {
  position: absolute;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(30, 18, 10, 0.72);
  color: #fff3d6;
  font: 700 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  pointer-events: none;
}
#fps[hidden] { display: none; }

/* The centered play column. game.js reads its size, so the canvas lines up. */
#column {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, calc(var(--column-ratio) * 100vh), var(--column-max));
  width: min(100%, calc(var(--column-ratio) * 100dvh), var(--column-max));
  transform: translateX(-50%);
  padding-top: env(safe-area-inset-top);
  container-type: inline-size;
}

/* ---------- Mute button ---------- */
#mute {
  position: absolute;
  top: calc(3.2cqw + env(safe-area-inset-top));
  right: 3.5cqw;
  width: 11.5cqw;
  height: 11.5cqw;
  padding: 2.4cqw;
  border-radius: 50%;
  border: 0.8cqw solid var(--ui-brown);
  background: var(--ui-cream);
  color: var(--ui-brown);
  box-shadow: 0 0.8cqw 0 var(--ui-brown-dark);
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
#mute svg { width: 100%; height: 100%; display: block; }
#mute .off { display: none; }
#mute.muted .on { display: none; }
#mute.muted .off { display: block; }
#mute:active { transform: translateY(0.5cqw); box-shadow: 0 0.3cqw 0 var(--ui-brown-dark); }

/* ---------- Arrow buttons ---------- */
.btn {
  position: absolute;
  bottom: calc(5.5cqw + env(safe-area-inset-bottom));
  width: 24cqw;
  height: 24cqw;
  padding: 5.5cqw;
  border-radius: 50%;
  border: 1.1cqw solid var(--ui-brown);
  background: var(--ui-cream);
  color: var(--ui-brown);
  box-shadow: 0 1.6cqw 0 var(--ui-brown-dark), 0 3cqw 4cqw rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.btn.left { left: 6cqw; }
.btn.right { right: 6cqw; }
.btn svg { width: 100%; height: 100%; display: block; }
.btn.pressed {
  transform: translateY(1.2cqw);
  box-shadow: 0 0.4cqw 0 var(--ui-brown-dark);
  background: #ffe2a8;
}

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(27cqw + env(safe-area-inset-top));
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.screen.show { visibility: visible; opacity: 1; }
#start { padding-top: calc(16cqw + env(safe-area-inset-top)); transition: opacity 0.12s; }
#start:not(.show) { transition: opacity 0.12s, visibility 0s 0.12s; }

.sign {
  width: 80cqw;
  padding: 6cqw 6cqw 5cqw;
  text-align: center;
  background: var(--ui-cream);
  border: 1.1cqw solid var(--ui-brown);
  border-radius: 7cqw;
  box-shadow: 0 2cqw 0 var(--ui-brown-dark), 0 5cqw 8cqw rgba(0, 0, 0, 0.22);
}
#over.show .sign { animation: pop 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

.title {
  margin: 0 0 3cqw;
  font-size: 19cqw;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--ui-accent);
  text-shadow: 0 0.9cqw 0 var(--ui-brown);
}
.title span { display: block; }
.title span:first-child { transform: rotate(-3deg) translateX(-3cqw); }
.title span:last-child { transform: rotate(2deg) translateX(3cqw); color: var(--ui-leaf); }

.headline {
  margin: 0;
  font-size: 9cqw;
  font-weight: 900;
  color: var(--ui-accent);
}
.score {
  margin: 0;
  font-size: 26cqw;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.best {
  display: inline-block;
  margin: 2cqw 0 0;
  padding: 1.2cqw 4.5cqw;
  font-size: 4.6cqw;
  font-weight: 800;
  border-radius: 99px;
  background: rgba(91, 58, 34, 0.12);
}
.best b { font-weight: 900; font-variant-numeric: tabular-nums; }
.how {
  margin: 4cqw 0 0;
  font-size: 4.4cqw;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.new {
  display: none;
  width: max-content;
  margin: -10.5cqw auto 3cqw;
  padding: 1.4cqw 5cqw;
  font-size: 4.6cqw;
  font-weight: 900;
  color: var(--ui-cream);
  background: var(--ui-accent);
  border: 0.9cqw solid var(--ui-brown);
  border-radius: 99px;
  transform: rotate(-3deg);
}
#over.is-new .new { display: block; }

.hint {
  margin: 5cqw 0 0;
  padding: 2cqw 5.5cqw;
  max-width: 92cqw;
  font-size: 4.4cqw;
  font-weight: 900;
  white-space: nowrap;
  color: var(--ui-cream);
  background: var(--ui-brown);
  border-radius: 99px;
  opacity: 0;
}
.hint.ready { opacity: 1; animation: pulse 1.1s ease-in-out infinite; }

@keyframes pop {
  from { transform: scale(0.7) translateY(6cqw); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}