* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #050a16;
  color: #f3ead2;
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.hidden { display: none !important; }

#hud {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-weight: 800;
  text-shadow: 0 1px 0 #000, 0 0 2px #000;
}
#score { font-size: 32px; font-variant-numeric: tabular-nums; }
#lives { display: flex; gap: 6px; min-width: 70px; }
#lives i {
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffd36b; box-shadow: 0 0 8px #ffb42e;
}
#lives i.out { background: #2a3140; box-shadow: none; }
#oil { display: flex; align-items: center; gap: 6px; min-width: 70px; justify-content: flex-end; font-size: 18px; }
.drop { width: 12px; height: 16px; background: #e7a83a; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

#banner {
  position: fixed;
  top: 22%;
  left: 0; right: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
#banner.show { opacity: 1; }
#hint {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
  text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
@keyframes pulse { 50% { opacity: 0.45; } }

.panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px));
  padding: 24px 22px;
  border-radius: 20px;
  background: rgba(8, 16, 34, 0.86);
  border: 1px solid rgba(255, 220, 140, 0.25);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.panel h1, .panel h2 { margin: 0 0 6px; font-size: 34px; color: #ffd36b; }
.panel p { margin: 0 0 12px; opacity: 0.85; }
.panel ul { text-align: left; padding-left: 18px; margin: 0 0 18px; line-height: 1.45; font-size: 15px; }
.panel li { margin-bottom: 6px; }
.red { color: #ff6a5c; font-weight: 700; }
.panel button {
  font: inherit;
  font-weight: 800;
  font-size: 18px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: #ffd36b;
  color: #1a1405;
  cursor: pointer;
}
.panel button:active { transform: scale(0.97); }
.best { margin-top: 12px; opacity: 0.7; font-size: 14px; }
.big { font-size: 56px; font-weight: 900; margin: 4px 0 8px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; text-align: left; margin: 0 auto 18px; max-width: 220px; font-size: 15px; }
.stats span:nth-child(even) { text-align: right; font-weight: 800; }

#debug {
  position: fixed;
  left: 8px;
  bottom: 8px;
  font: 11px ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 6px;
  pointer-events: none;
}