:root {
  --cream: #f2e8d5;
  --cream-dark: #e3d3ab;
  --ink: #2b1e12;
  --red: #c53a2e;
  --red-dark: #8a2419;
  --gold: #e8b23d;
  --sky-blue: #6ec6ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #6ec6ff;
  font-family: 'Bangers', cursive;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- vintage film overlays --- */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(20,12,5,0.35) 100%);
}

#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  animation: grain-shift 0.4s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0,0); }
  50% { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, -2%); }
}

/* --- generic screen --- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #fff6e0 0%, var(--cream) 60%, var(--cream-dark) 100%);
  transition: opacity 0.6s ease;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
  display: none;
}

/* --- title text, Cuphead-ish rubber hose look --- */
.game-title {
  font-family: 'Luckiest Guy', cursive;
  margin: 0;
  line-height: 0.95;
  display: flex;
  flex-direction: column;
  letter-spacing: 2px;
}

.game-title span {
  color: var(--red);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    4px 4px 0 var(--gold),
    8px 8px 0 rgba(43,30,18,0.25);
}

.title-line1 { font-size: 4.2rem; }
.title-line2 { font-size: 5.4rem; }

.game-title.small {
  flex-direction: row;
  font-size: 3.2rem;
}
.game-title.small span,
.game-title.small { color: var(--red); }
.game-title.small.crash { }

.subtitle {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(232,178,61,0.6);
}

.cuphead-btn {
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: var(--cream);
  background: var(--red);
  border: 4px solid var(--ink);
  border-radius: 40px;
  padding: 14px 44px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--red-dark), 0 10px 14px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cuphead-btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--red-dark), 0 8px 10px rgba(0,0,0,0.25); }
.cuphead-btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--red-dark); }

.controls-hint {
  font-family: 'Bangers', cursive;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.85;
  margin-top: 6px;
}

/* corner deco - simple rubber-hose style dots/swirls */
.corner-deco {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 6px solid var(--ink);
  opacity: 0.15;
  border-radius: 50%;
}
.corner-deco.tl { top: 24px; left: 24px; }
.corner-deco.tr { top: 24px; right: 24px; }
.corner-deco.bl { bottom: 24px; left: 24px; }
.corner-deco.br { bottom: 24px; right: 24px; }

/* floating cloud puffs behind title, pure CSS */
.title-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.title-clouds::before, .title-clouds::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 60px;
  background: #fff;
  border-radius: 50px;
  opacity: 0.5;
  box-shadow: 60px 20px 0 -10px #fff, -50px 10px 0 -6px #fff;
}
.title-clouds::before { top: 15%; left: -200px; animation: drift 22s linear infinite; }
.title-clouds::after { top: 65%; left: -260px; animation: drift 30s linear infinite; animation-delay: -10s; }

@keyframes drift {
  from { transform: translateX(-10vw); }
  to { transform: translateX(110vw); }
}

/* --- intro caption --- */
#intro-caption {
  background: transparent;
  justify-content: flex-end;
  padding-bottom: 8vh;
}
.caption-text {
  font-family: 'Bangers', cursive;
  font-size: 1.8rem;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 20px;
  padding: 14px 30px;
  max-width: 70vw;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
}

/* --- top-left cluster: character icon (altitude bar aligns beside it during play) --- */
#top-left-panel {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 15;
  font-family: 'Bangers', cursive;
  pointer-events: none;
}

.icon-frame {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 4px solid var(--ink);
  background: var(--cream-dark);
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.25);
}
.icon-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- bottom-left cluster: volume control --- */
#bottom-left-panel {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 15;
  font-family: 'Bangers', cursive;
  pointer-events: none;
}

.volume-panel {
  min-width: 168px;
  padding: 8px 14px;
}
.volume-hint {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  color: var(--ink);
  opacity: 0.7;
  margin-top: 4px;
  white-space: nowrap;
}
.meter-fill.muted { background: var(--cream-dark); }

@media (max-width: 700px) {
  .icon-frame { width: 48px; height: 48px; border-radius: 12px; }
  .volume-panel { min-width: 130px; padding: 6px 10px; }
  .volume-hint { font-size: 0.55rem; }
}

/* --- HUD --- */
#hud {
  pointer-events: none;
  font-family: 'Bangers', cursive;
}
#hud.hidden { display: none; }

.altitude-panel {
  position: fixed;
  top: 18px;
  left: 92px;
  z-index: 8;
}

.distance-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 8;
}

.hud-panel {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  min-width: 220px;
}

.hud-label {
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.meter {
  width: 100%;
  height: 14px;
  background: var(--cream-dark);
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transition: width 0.2s ease;
}

.bounce-prompt {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-family: 'Luckiest Guy', cursive;
  font-size: 2.2rem;
  color: var(--gold);
  -webkit-text-stroke: 3px var(--ink);
  min-width: unset;
  padding: 6px 18px;
  animation: pop 0.35s ease;
}
.bounce-prompt.hidden { display: none; }

@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
  .title-line1 { font-size: 2.6rem; }
  .title-line2 { font-size: 3.4rem; }
  .subtitle { font-size: 1.1rem; }
  .hud-panel { min-width: 140px; padding: 6px 10px; }
  .altitude-panel { left: 76px; }
}