@font-face {
  /* fallback handled via font-family stack below; Google Font is linked in index.html */
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0e0d0b;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e0d0b;
}

#stage {
  position: relative;
  aspect-ratio: 1080 / 1920;
  width: min(100vw, 100vh * 1080 / 1920);
  height: min(100vh, 100vw * 1920 / 1080);
  background: #9d9579;
  overflow: hidden;
  --scale: 0.4; /* overwritten by JS to (stage width px / 1080) */
}

#game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  top: 1.05%;
  left: 1.85%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  z-index: 5;
}

#lives-row {
  display: flex;
  gap: calc(13px * var(--scale));
}

.heart-icon {
  width: calc(64px * var(--scale));
  height: auto;
  display: block;
  transition: opacity 0.25s, filter 0.25s;
}

.heart-icon.lost {
  opacity: 0.28;
  filter: grayscale(1);
}

#score-row {
  margin-top: calc(14px * var(--scale));
  display: flex;
  align-items: center;
  gap: calc(12px * var(--scale));
}

#score-cake-icon {
  width: calc(70px * var(--scale));
  height: auto;
  display: block;
}

#score-value {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: calc(58px * var(--scale));
  color: #e5dfbf;
  line-height: 1;
}

#controls-wrap {
  position: absolute;
  bottom: 4.5%;
  left: 1.85%;
  width: 26%;          /* bigger than before so arrows are easy to tap */
  z-index: 5;
  touch-action: none;
}

#controls-hint {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 0.92;
}

/* Invisible tap buttons overlaid on each arrow in controls.png.
   The image is 134×154px. Approximate arrow positions (% of image):
   left arrow  → left 44%, middle rows 33-71%
   up arrow    → right 56%, top rows  0-52%
   down arrow  → right 56%, bottom rows 52-100% */
.ctrl-btn {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ctrl-btn[data-head="left"]   { top: 33%; left: 0%;  width: 44%; height: 38%; }
.ctrl-btn[data-head="top"]    { top: 0%;  left: 44%; width: 56%; height: 52%; }
.ctrl-btn[data-head="bottom"] { top: 52%; left: 44%; width: 56%; height: 48%; }

/* ---------- overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 7, 0.66);
  z-index: 20;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: auto;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26px * var(--scale));
  padding: calc(40px * var(--scale));
  width: 100%;
}

.start-title, .start-sub {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  color: #e5dfbf;
  text-align: center;
  font-size: calc(54px * var(--scale));
  line-height: 1.25;
  max-width: 80%;
}

.start-controls {
  width: 22%;
  height: auto;
}

.text-btn {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: calc(52px * var(--scale));
  color: #1c1a16;
  background: #c1504a;
  border: calc(5px * var(--scale)) solid #1c1a16;
  border-radius: calc(38px * var(--scale)) calc(46px * var(--scale)) calc(42px * var(--scale)) calc(48px * var(--scale));
  padding: calc(14px * var(--scale)) calc(46px * var(--scale));
  cursor: pointer;
  transform: rotate(-1deg);
  transition: transform 0.08s ease;
}

.text-btn:active {
  transform: rotate(-1deg) scale(0.94);
}

.img-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 46%;
  transition: transform 0.08s ease;
}

.img-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.img-btn:active {
  transform: scale(0.93);
}

.lose-text {
  width: 92%;
  height: auto;
}

#final-score-row {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--scale));
}

#final-score-cake-icon {
  width: calc(64px * var(--scale));
  height: auto;
}

#final-score-value {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: calc(58px * var(--scale));
  color: #e5dfbf;
  line-height: 1;
}

/* ---------- miss flash feedback ---------- */

#flash-overlay {
  position: absolute;
  inset: 0;
  background: rgba(170, 30, 30, 0.001);
  pointer-events: none;
  z-index: 15;
}