* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1030;
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif; color: #ffe9d6; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; top: 10px; left: 12px; right: 12px; pointer-events: none; z-index: 5; }
.hud-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hud-label { font-size: 10px; letter-spacing: 2px; opacity: .65; }
.score, .time { font-size: 20px; font-weight: 700; color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, .6); min-width: 30px; }
.lives { font-size: 20px; color: #ff6f61; text-shadow: 0 0 12px rgba(255,111,97,.6); }
.progress { margin-top: 6px; height: 8px; max-width: 260px; border-radius: 4px;
  background: rgba(255,255,255,.14); overflow: hidden; }
#bar-fill { height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, #46e0d0, #7cf7c8); transition: width .3s; }
#toast { margin-top: 12px; display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: rgba(26,16,48,.75); border: 1px solid rgba(124,247,200,.4);
  color: #7cf7c8; font-size: 13px; opacity: 0; transition: opacity .4s; }
/* overlays */
#start-overlay, #end-overlay { position: fixed; inset: 0; z-index: 10; display: flex;
  align-items: center; justify-content: center; background: rgba(16,9,32,.72); }
#end-overlay { display: none; }
.panel { max-width: 430px; margin: 16px; padding: 26px 30px; text-align: center;
  border-radius: 16px; background: rgba(30,18,54,.92);
  border: 1px solid rgba(255,180,94,.35); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.panel h1 { font-size: 34px; letter-spacing: 6px; color: #ffb45e;
  text-shadow: 0 0 24px rgba(255,180,94,.5); }
.panel h2 { font-size: 26px; letter-spacing: 3px; margin-bottom: 10px; }
h2.win { color: #7cf7c8; text-shadow: 0 0 20px rgba(124,247,200,.6); }
h2.lose { color: #ff6f61; text-shadow: 0 0 20px rgba(255,111,97,.6); }
.tag { margin: 8px 0 14px; font-size: 14px; color: #cfa8ff; }
#controls-help p { font-size: 13px; margin: 5px 0; color: #ffe9d6; opacity: .9; }
.cta { margin-top: 16px; padding: 12px 34px; font-size: 16px; font-weight: 700;
  letter-spacing: 2px; border: none; border-radius: 30px; cursor: pointer;
  color: #2a1440; background: linear-gradient(120deg, #ffb45e, #ff6f61);
  box-shadow: 0 6px 22px rgba(255,140,90,.45); }
.hint { margin-top: 8px; font-size: 12px; opacity: .6; }
/* touch controls */
#joystick { position: fixed; left: 18px; bottom: 18px; width: 110px; height: 110px;
  z-index: 8; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,209,102,.16), rgba(255,209,102,.05));
  border: 2px solid rgba(255,209,102,.35); }
#joystick .knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #ffe9a8, #ff9a5e);
  box-shadow: 0 4px 14px rgba(0,0,0,.4); }
#jump-btn { position: fixed; right: 18px; bottom: 22px; width: 92px; height: 92px; z-index: 8;
  border-radius: 50%; border: 2px solid rgba(124,247,200,.5); cursor: pointer;
  font-weight: 800; letter-spacing: 1px; font-size: 14px; color: #123; touch-action: none;
  background: radial-gradient(circle at 35% 35%, #a9ffe0, #46e0d0); }
@media (min-width: 900px) { #joystick, #jump-btn { opacity: .28; } }