* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0d1f18;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

canvas { display: block; cursor: crosshair; touch-action: none; }

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

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

#scoreBox {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  text-shadow: 0 2px 10px rgba(0, 20, 10, 0.85);
}

.label {
  font-size: 11px;
  letter-spacing: 2.5px;
  opacity: 0.75;
}

/* Two rows, four pips a side. Best out of seven means first to four, so four
   lit pips is the whole match — the score is readable without reading. */
.side {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
}

.side .tag {
  font-size: 11px;
  letter-spacing: 2px;
  width: 44px;
  opacity: 0.85;
}

.pips { display: flex; gap: 5px; }

.pip {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.you .pip.on { background: #d8f24a; border-color: #f0ffa6; }
.them .pip.on { background: #ff7043; border-color: #ffc4ac; }

.num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

/* Question 7 made visible: they get hotter every time you win, so the heat has
   to be something you can watch climbing, not a hidden number. */
#heatBox { margin-top: 16px; }

#heatBar {
  margin-top: 5px;
  width: 148px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 30, 20, 0.4);
}

#heatFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd166, #ff7043 60%, #ff2d2d);
  transition: width 0.5s ease;
}

#soundBtn {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  touch-action: none;
  pointer-events: auto;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(8, 40, 28, 0.35);
  color: #fff;
  font: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

#soundBtn:hover { border-color: #fff; }
#soundBtn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.9); color: #0d2a1e; }

#message {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 62px;
  font-weight: 700;
  letter-spacing: -1px;
  white-space: nowrap;
  text-shadow: 0 4px 26px rgba(0, 20, 10, 0.9);
  opacity: 0;
  transition: opacity 0.22s;
}

#message.on { opacity: 1; }
#message.small { font-size: 34px; }
#message.good { color: #e8ff6a; }
#message.bad { color: #ff8a6a; }

#hint {
  position: absolute;
  bottom: calc(46px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: 2.5px;
  opacity: 0;
  transition: opacity 0.3s;
  text-shadow: 0 2px 10px rgba(0, 20, 10, 0.9);
}

#hint.on { opacity: 0.9; }

/* ---------- touch ---------- */
/* Only on an iPad or a phone. The body gets .touch from game.js the moment the
   device says it is a touch screen, or the first time a finger lands. */

.only-touch { display: none; }
body.touch .only-touch { display: revert; }
body.touch .only-desk { display: none; }

body.touch #soundBtn { font-size: 13px; padding: 14px 18px; }

/* The left thumb. It rests up off the bottom-left corner (the site's back link
   lives down there) and jumps to wherever the thumb actually lands. */
#stick {
  display: none;
  position: fixed;
  left: max(44px, calc(env(safe-area-inset-left) + 24px));
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(8, 40, 28, 0.3);
  backdrop-filter: blur(4px);
  opacity: 0.45;
  pointer-events: none;
}

#stick.on { opacity: 1; }

#knob {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(216, 242, 74, 0.85);
  box-shadow: 0 4px 16px rgba(0, 20, 10, 0.5);
}

/* The right thumb. The whole right half of the screen swings — this just marks
   where to put it, and flashes when it goes. */
#swingBtn {
  display: none;
  position: fixed;
  right: max(34px, calc(env(safe-area-inset-right) + 20px));
  bottom: calc(70px + env(safe-area-inset-bottom));
  width: 108px;
  height: 108px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(216, 242, 74, 0.28);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-shadow: 0 2px 8px rgba(0, 20, 10, 0.8);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: transform 0.08s, background 0.08s;
}

#swingBtn.pressed { transform: scale(0.9); background: rgba(216, 242, 74, 0.75); color: #16301f; text-shadow: none; }

body.touch #stick { display: block; }
body.touch #swingBtn { display: flex; }

/* ---------- start / end card ---------- */

#start {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 35%, rgba(28, 96, 62, 0.72), rgba(6, 18, 13, 0.95));
  backdrop-filter: blur(3px);
}

#start.hidden { display: none; }

#start h1 {
  margin: 0;
  font-size: 68px;
  letter-spacing: 5px;
}

#start .tag {
  margin: 6px 0 22px;
  font-size: 17px;
  opacity: 0.9;
  letter-spacing: 1px;
}

#start .keys {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.92;
}

#start .keys b {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 1px;
}

#start .note {
  max-width: 560px;
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0 0 26px;
}

#start .note .hot { color: #ff9a76; }

#startBtn {
  cursor: pointer;
  border: none;
  background: #d8f24a;
  color: #16301f;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  padding: 15px 38px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(216, 242, 74, 0.3);
}

#startBtn:hover { background: #e6ff6a; }