:root { color-scheme: dark; }

/* Keep everything inside the viewport */
html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: #0d0d12;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #e5e7eb;
  overflow: hidden; /* no vertical scroll */
}

/* Center the whole game column */
#hollyhill-game {
  max-width: 100%;
  margin: 12px auto;
  display: flex;               /* NEW */
  flex-direction: column;      /* NEW */
  align-items: center;         /* NEW: centers the canvas/HUD/dpad horizontally */
  text-align: center;
  overflow: hidden;
}

/* Canvas is sized by JS, make its visual width include the border and center it */
#game {
  margin: 0 auto;              /* NEW: center in case parent text-align changes */
  box-sizing: border-box;      /* NEW: include 2px border in width calc */
  background: #0d0d12;
  border: 2px solid #222;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

#hud {
  font-size: 12px;
  line-height: 1.4;
  color: #d5d7e0;
  margin-top: 6px;
}

/* D-pad */
#dpad, #dpad * { user-select: none; -webkit-user-select: none; }

#dpad {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  gap: 8px;
  justify-content: center;
  align-items: center;
  touch-action: none;
}
#dpad [data-dir="up"]    { grid-area: up; }
#dpad [data-dir="left"]  { grid-area: left; }
#dpad [data-dir="right"] { grid-area: right; }
#dpad [data-dir="down"]  { grid-area: down; }

#dpad button {
  width: clamp(40px, 8.5vw, 56px);
  height: clamp(40px, 8.5vw, 56px);
  border: 1px solid #333; border-radius: 8px;
  background: #1a1c24; color: #e5e7eb;
  font: 18px ui-monospace, Menlo, Consolas, monospace;
}

/* Header tightened to free vertical space */
#music-header {
  text-align: center;
  margin: 8px 12px 12px;
}
#music-header h1 {
  margin: 6px;
  font-size: 28px;
  color: #e5e7eb;
}
#music-header .subtitle {
  margin: 2px 0 10px;
  font-size: 16px;
  font-style: italic;
  color: #9ca3af;
}

/* Link row that wraps on small screens */
#music-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  flex-wrap: wrap;
  padding: 0 8px;
}
#music-links a {
  color: #b2f5ea;
  text-decoration: none;
  font-weight: bold;
}
#music-links a:hover {
  text-decoration: underline;
}

/* Instruction line under header links */
#play-help {
  margin-top: 8px;
  font-size: 14px;
  color: #b7beca;
}

/* Big room name above the canvas */
#room-name {
  margin: 6px 0 8px;
  font-size: clamp(18px, 3.2vw, 28px);
  font-weight: 700;
  color: #e8ecf4;
  text-align: center;
  letter-spacing: 0.5px;
}