:root {
  --pink: #ff7fa8;
  --pink-deep: #e85a86;
  --cream: #fff7ef;
  --mint: #8fe3c4;
  --sky: #bfe9ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1b2740; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
canvas { display: block; touch-action: none; }
.hidden { display: none !important; }

/* ===== Join screen ===== */
#join {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #ffd9e6 0%, #ff9ebf 45%, #c86b9a 100%);
  padding: 16px;
}
.join-card {
  width: min(420px, 94vw);
  background: var(--cream);
  border-radius: 26px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  text-align: center;
  animation: pop .5s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confetti-emoji { font-size: 34px; letter-spacing: 4px; }
.join-card h1 { font-size: 34px; line-height: 1.05; color: var(--pink-deep); margin: 8px 0 4px; text-shadow: 1px 2px 0 #fff; }
.join-card .sub { color: #8a6b78; font-size: 14px; margin-bottom: 18px; }
.join-card label { display: block; text-align: left; font-size: 12px; font-weight: bold; color: #a06; margin: 12px 4px 6px; text-transform: uppercase; letter-spacing: .5px; }
#nameInput, #chatInput {
  width: 100%; padding: 12px 14px; border: 2px solid #ffc9da; border-radius: 14px;
  font-size: 16px; background: #fff; color: #3a2a31; outline: none;
}
#nameInput:focus { border-color: var(--pink); }
#swatches { display: flex; gap: 8px; justify-content: space-between; }
.swatch { flex: 1; aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
.swatch.sel { border-color: #3a2a31; transform: scale(1.12); }
#enterBtn {
  margin-top: 20px; width: 100%; padding: 14px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, var(--pink), var(--pink-deep));
  color: #fff; font-size: 18px; font-weight: bold; cursor: pointer;
  box-shadow: 0 8px 18px rgba(232,90,134,.45); transition: transform .1s;
}
#enterBtn:active { transform: translateY(2px); }
.tiny { font-size: 12px; color: #b08; margin-top: 12px; }

/* ===== HUD ===== */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: linear-gradient(180deg, rgba(27,39,64,.65), transparent);
  color: #fff; font-weight: bold; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#players { background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 20px; font-size: 13px; }

#chatbox { position: absolute; left: 12px; bottom: 12px; width: min(320px, 70vw); }
#chatlog { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow: hidden; margin-bottom: 6px; }
.chatline { background: rgba(27,39,64,.6); color: #fff; align-self: flex-start; padding: 5px 10px; border-radius: 12px; font-size: 13px; max-width: 100%; animation: fade .3s; }
.chatline b { color: var(--mint); }
.chatline.sys { background: rgba(255,180,80,.85); color: #3a2a31; font-style: italic; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
#chatInput { background: rgba(255,255,255,.92); }

#cakeBtn {
  position: absolute; top: 56px; right: 12px;
  padding: 10px 14px; border: none; border-radius: 14px;
  background: linear-gradient(180deg, #ffd36e, #ff9f43); color: #5a3000;
  font-weight: bold; font-size: 14px; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
#cakeBtn:active { transform: translateY(2px); }

#hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 12px; background: rgba(27,39,64,.5); padding: 6px 12px;
  border-radius: 20px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* on-screen run/jump (mobile only) */
#touch-controls { position: absolute; right: 16px; bottom: 80px; display: none; flex-direction: column; gap: 12px; }
body.touch #touch-controls { display: flex; }
body.touch #hint { display: none; }
#touch-controls button {
  width: 92px; height: 64px; border: none; border-radius: 18px; font-size: 16px; font-weight: bold;
  color: #fff; background: linear-gradient(180deg, var(--pink), var(--pink-deep));
  box-shadow: 0 6px 14px rgba(0,0,0,.3); touch-action: none; user-select: none;
}
#touch-controls button:active { transform: translateY(2px); }
#runBtn.on { background: linear-gradient(180deg, #8fe3c4, #34b487); }

/* Mobile joystick (hidden on desktop) */
#joystick {
  position: absolute; bottom: 30px; left: 30px; width: 110px; height: 110px;
  border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35);
  display: none; touch-action: none;
}
#stick { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,255,255,.7); }
body.touch #joystick { display: block; }
body.touch #hint { display: none; }

/* ===== Celebrate banner ===== */
#celebrateBanner {
  position: fixed; top: 30%; left: 50%; transform: translate(-50%,-50%) scale(.5);
  z-index: 40; font-size: clamp(28px, 7vw, 64px); font-weight: bold; color: #fff;
  text-shadow: 0 0 18px #ff7fa8, 0 4px 0 var(--pink-deep); pointer-events: none;
  animation: cheer 3s ease forwards;
}
@keyframes cheer {
  0% { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  15% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
  80% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-60%) scale(1); opacity: 0; }
}

/* Floating name tags rendered in DOM over the canvas */
.nametag {
  position: absolute; transform: translate(-50%,-100%); pointer-events: none;
  background: rgba(27,39,64,.7); color: #fff; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 2px #000;
}
.bubble {
  position: absolute; transform: translate(-50%,-100%); pointer-events: none;
  background: #fff; color: #2a2a2a; padding: 5px 10px; border-radius: 12px;
  font-size: 13px; max-width: 180px; box-shadow: 0 4px 10px rgba(0,0,0,.3); animation: fade .25s;
}