:root {
  --bg: #0e0b12;
  --ink: #f7f2e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 9:16 portrait stage, letterboxed to fit any viewport */
.stage {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  /* LEVEL 2 VISUAL PROOF: the 2D canvas sits between the living room and the
     cockroach. It is transparent wherever the background is not drawn, which
     is how the room shows through. */
  position: relative;
  z-index: 1;
}

/* LEVEL 2 VISUAL PROOF: the living room, furthest back and never interactive */
canvas#room3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* MOBILE 3D PROOF ONLY: sits exactly over the game canvas, never takes input */
canvas#roach3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- START SCREEN ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8vh;
  background: radial-gradient(120% 80% at 50% 30%, #2b2340 0%, #140f1c 70%, #0b0810 100%);
  z-index: 5;
}

.screen[hidden] { display: none; }

.title {
  margin: 0;
  font-size: clamp(38px, 13vw, 90px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe86b;
  text-shadow: 0 5px 0 #a4761b, 0 10px 22px rgba(0, 0, 0, 0.55);
  transform: rotate(-3deg);
}

.play-btn {
  font-family: inherit;
  font-size: clamp(24px, 7vw, 42px);
  font-weight: 900;
  letter-spacing: 3px;
  color: #23180c;
  background: linear-gradient(#ffe06b, #f4b431);
  border: none;
  border-radius: 999px;
  padding: 0.55em 2.2em;
  cursor: pointer;
  box-shadow: 0 8px 0 #a4711b, 0 14px 26px rgba(0, 0, 0, 0.5);
  transition: transform 70ms ease, box-shadow 70ms ease;
}

.play-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #a4711b, 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* ---------- DEBUG ---------- */
.hud {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre;
  color: #9dff9d;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 9px;
  border-radius: 6px;
  pointer-events: none;
}

.hud[hidden] { display: none; }

.mute-btn {
  position: absolute;
  top: 8px;
  right: 40px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.mute-btn.is-muted { opacity: 0.55; }

.end-screen {
  background: radial-gradient(120% 80% at 50% 35%, #2c4030 0%, #16201a 70%, #0b100c 100%);
}

.end-title {
  color: #a8f07a;
  text-shadow: 0 5px 0 #3f7028, 0 10px 22px rgba(0, 0, 0, 0.55);
}

/* ---------- RESULTS ---------- */
.end-screen { gap: 4vh; }

.results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vh;
  width: 78%;
  max-width: 340px;
}

.results[hidden] { display: none; }

.res-label {
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(247, 242, 232, 0.62);
  text-align: center;
}

.res-big {
  font-size: clamp(46px, 15vw, 76px);
  font-weight: 900;
  line-height: 1.05;
  color: #ffe86b;
  text-align: center;
  text-shadow: 0 4px 0 #8f6a15, 0 8px 18px rgba(0, 0, 0, 0.5);
}

.res-mid {
  font-size: clamp(26px, 8vw, 40px);
  font-weight: 900;
  color: #f7f2e8;
  text-align: center;
}

.res-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7vh;
  padding: 1.4vh 0;
  border-top: 2px solid rgba(247, 242, 232, 0.16);
  border-bottom: 2px solid rgba(247, 242, 232, 0.16);
}

.res-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(13px, 4vw, 19px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(247, 242, 232, 0.78);
}

.res-row b {
  font-size: clamp(18px, 5.4vw, 26px);
  font-weight: 900;
  color: #f7f2e8;
}

.new-best {
  font-size: clamp(22px, 7vw, 36px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff9a3c;
  text-shadow: 0 3px 0 #8a4a12, 0 8px 16px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
  animation: newbest 0.9s ease-in-out infinite alternate;
}

.new-best[hidden] { display: none; }

@keyframes newbest {
  from { transform: rotate(-3deg) scale(1); }
  to   { transform: rotate(-3deg) scale(1.07); }
}

.dbg-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
}

/* LEVEL 2 ONLY: the broken-kitchenware row on the results card. Level 1 never
   un-hides it, so nothing about the Level 1 results changes. */
.res-row-bad b { color: #ff6a5a; }