html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  /* no grey flash when a finger touches the screen */
  -webkit-tap-highlight-color: transparent;
}
/* the canvas is tapped constantly to walk -- it must never flash or
   show a focus ring, and a long press must not pop the callout menu */
#game {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
  /* iOS Safari ignores user-scalable=no, so two quick taps in one spot --
     exactly how you pick a student, or an option -- would be read as
     double-tap-to-zoom. 'manipulation' turns that off while leaving pinch
     alone, so anyone already stuck zoomed can still pinch back out. */
  touch-action: manipulation;
}

#game-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* no double-tap-to-zoom anywhere in the play area, including the black
     margins around the canvas */
  touch-action: manipulation;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  cursor: pointer; /* mouse students: click a teacher or object to walk over */
  /* sizing is handled by fit() in main.js (fills phones, snaps to crisp
     whole-number scales on big screens) */
}

/* two switches, stacked in the corner: the music (top) and the sound
   effects (below it) */
#mute-btn, #sfx-btn {
  position: fixed;
  left: 8px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: #14522f;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.85;
}
#mute-btn { top: 8px; }
#sfx-btn { top: 54px; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
#mute-btn.muted, #sfx-btn.muted { color: #667; text-decoration: line-through; }

/* the volume slider, which slides out beside whichever button was clicked */
#vol-pop {
  position: fixed;
  left: 54px;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: #14522f;
  opacity: 0.95;
}
#vol-pop[hidden] { display: none; }
#vol-label {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  color: #f7d84d;
  letter-spacing: 1px;
  white-space: nowrap;
}
#vol-range {
  width: 110px;
  accent-color: #f7d84d;   /* the game's gold, on the browser's own slider */
  cursor: pointer;
}
/* phones already have a volume rocker -- no need to spend screen on ours */
body.touch #vol-pop { display: none; }

#touch-controls {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
body.touch #touch-controls { display: block; }

/* d-pad on the LEFT thumb (sideways phone grip), clear of notches */
#dpad {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 216px;
  height: 216px;
  pointer-events: auto;   /* the PAD takes the touch, so a finger can slide
                             between directions without lifting off */
  touch-action: none;
}
.dbtn {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 14px;
  background: rgba(20, 82, 47, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* ...so the buttons themselves are just artwork */
  touch-action: none;
}
/* one size for every arrow -- font glyphs rendered the four triangles at
   wildly different sizes on phones (emoji vs text presentation) */
.dbtn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
#d-up    { left: 72px;  top: 0; }
#d-left  { left: 0;     top: 72px; }
#d-right { left: 144px; top: 72px; }
#d-down  { left: 72px;  top: 144px; }
/* whichever direction the finger is over, lit by the pad handler */
.dbtn.pressed { filter: brightness(1.6); }

/* TALK on the RIGHT thumb */
#a-btn {
  position: absolute;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  width: 92px;
  height: 92px;
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  background: rgba(160, 30, 40, 0.6);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.7;
  pointer-events: auto;
  touch-action: none;
}
.dbtn:active, #a-btn:active { filter: brightness(1.6); }
/* the buttons give their own press feedback -- suppress the browser's
   grey tap box on top of it, and the focus ring a tap leaves behind */
.dbtn, #a-btn, #mute-btn, #sfx-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}
.dbtn:focus, #a-btn:focus, #mute-btn:focus, #sfx-btn:focus { outline: none; }

/* Held upright, the game gets its own proper layout (stats stacked above
   and below by drawStackedHud), so there is nothing to apologise for and
   no reason to ask anyone to turn their phone. */
#rotate-hint { display: none; }

/* Upright: game on top, thumbs underneath -- laid out as a normal column
   so the controls sit BELOW the canvas by construction. (They used to be
   positioned from the viewport height, which slides around as a phone's
   URL bar hides and shows, making everything jump and overlap.) */
body.portrait #game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: env(safe-area-inset-top, 0px);
}
body.portrait #game {
  display: block;
  flex: 0 0 auto;
}
body.portrait #touch-controls {
  position: static;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.portrait #dpad {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
}
body.portrait #a-btn {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
}
/* phones already have a volume rocker -- no need to spend screen on ours */
body.touch #mute-btn, body.touch #sfx-btn { display: none; }