:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --ui-margin: 12px;

  /* theme defaults (override per game in cfg.js by setting CSS variables) */
  --bg: #0b0f14;
  --text: #e7eef7;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
  --overlay: rgba(0,0,0,0.62);
  --card: rgba(15, 21, 29, 0.94);
  --lane-left: rgba(255,255,255,0.04);
  --lane-right: rgba(255,255,255,0.02);
  --divider: rgba(255,255,255,0.10);
  --danger: rgba(255,255,255,0.10);
  --player: rgba(255, 235, 120, 0.95);

  --easy: rgba(70, 220, 140, 0.75);
  --normal: rgba(255, 210, 80, 0.75);
  --hard: rgba(255, 110, 110, 0.75);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
}

canvas {
  display: block;
  touch-action: none; /* prevents browser panning/zoom gestures */
  user-select: none;
  -webkit-user-select: none;
}

button{ touch-action: manipulation; }

.hud{
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(560px, calc(100vw - (var(--safe-left) + var(--safe-right) + 24px)));
  padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 12px) 10px calc(var(--safe-left) + 12px);
  pointer-events: none;
  z-index: 10;
  gap: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.pill{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: clamp(4px, 1.2vw, 6px) clamp(6px, 2.0vw, 10px);
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(10px, 2.6vw, 14px);
  text-align: center;
  max-width: 100%;
}
.pill span{
  display:inline-block;
  min-width: 6ch;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.pauseDock{
  position: fixed;
  left: calc(var(--safe-left) + var(--ui-margin));
  bottom: calc(var(--safe-bottom) + var(--ui-margin));
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(231, 238, 247, 0.94);
  font-weight: 950;
  user-select: none;
  z-index: 10;
}
.pauseDock.right { left: auto; right: calc(var(--safe-right) + var(--ui-margin)); }
.pauseDock.topRight { left:auto; right: calc(var(--safe-right) + var(--ui-margin)); bottom:auto; top: calc(var(--safe-top) + var(--ui-margin)); }

.pauseDockBtn{
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.14);
  color: var(--text);
  font-size: 22px;
  font-weight: 1000;
  cursor: pointer;
  pointer-events: auto;
}
.pauseDockBtn:active{ transform: scale(0.98); }

.soundBtn{ width:48px; height:48px; font-size:18px; }
.soundBtn.muted{ opacity:0.75; filter: grayscale(1); }

.pauseDockText{
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0.95;
  white-space: nowrap;
  pointer-events: none;
}

.pauseDock.paused{
  background: rgba(120,40,40,0.55);
  border-color: rgba(255,120,120,0.45);
}
@keyframes pausePulse{
  0%{ box-shadow: 0 0 0 rgba(255,120,120,0.0);}
  50%{ box-shadow: 0 0 18px rgba(255,120,120,0.65);}
  100%{ box-shadow: 0 0 0 rgba(255,120,120,0.0);}
}
.pauseDock.paused .pauseDockBtn{
  animation: pausePulse 1.6s ease-in-out infinite;
  background: rgba(255,120,120,0.25);
  border-color: rgba(255,120,120,0.65);
}

.overlay{
  position: fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--overlay);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-in-out;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.card{
  width: min(480px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.62);
  text-align: center;
  user-select: none;
  max-height: calc(100vh - (var(--safe-top) + var(--safe-bottom) + 32px));
  overflow: auto;
}

.title{ font-size: 26px; font-weight: 1000; margin-bottom: 6px; letter-spacing: 0.2px; }
.sub{ opacity: 0.92; margin-bottom: 14px; line-height: 1.35; white-space: pre-line; }
.small{ font-size: 12px; opacity: 0.88; margin-top: 10px; line-height: 1.35; white-space: pre-line; }

.row{ display:flex; gap: 10px; justify-content:center; }
button.action{
  flex: 1;
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 1000;
  cursor:pointer;
}
button.action:active{ transform: scale(0.99); }

.diffWrap{ margin-top: 10px; }
.diffLabel{ font-size: 12px; opacity: 0.9; font-weight: 950; letter-spacing: 0.2px; margin-bottom: 8px; }
.diffButtons{ display:flex; gap:10px; }
.diffBtn{
  flex:1;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 1000;
  cursor: pointer;
}
.diffBtn.selected{
  outline: 3px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.diffBtn[data-k="easy"]{ border-color: rgba(70, 220, 140, 0.35); }
.diffBtn[data-k="normal"]{ border-color: rgba(255, 210, 80, 0.35); }
.diffBtn[data-k="hard"]{ border-color: rgba(255, 110, 110, 0.35); }
.diffBtn.selected[data-k="easy"]{ outline-color: var(--easy); background: rgba(70,220,140,0.14); }
.diffBtn.selected[data-k="normal"]{ outline-color: var(--normal); background: rgba(255,210,80,0.14); }
.diffBtn.selected[data-k="hard"]{ outline-color: var(--hard); background: rgba(255,110,110,0.14); }

.countdownWrap{ display:none; text-align:center; }
.countdownNumber{ font-size: 76px; font-weight: 1000; letter-spacing: 1px; margin: 8px 0 6px; }
.countdownLabel{ font-size: 13px; font-weight: 950; opacity: 0.92; }

.devPanel{
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(360px, calc(100vw - 24px));
  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  z-index: 40;
  display:none;
  pointer-events:auto;
  user-select:text;
}
.devPanel strong{ font-family: inherit; }
.devRow{ display:flex; justify-content:space-between; gap:12px; }
.devTitle{ font-weight: 1000; margin-bottom: 6px; }
.devHint{ opacity: 0.85; margin-top: 6px; line-height: 1.25; }

@media (max-width: 420px){
  .hud{ gap:6px; }
  .pill{ padding: 5px 6px; font-size: 11px; }
}
@media (max-width: 360px){
  .pill{ padding: 4px 5px; font-size: 10px; }
}