:root {
  --ink: #f2ecff; --coral: #ff7f61; --mint: #6ff7c4; --gold: #ffd45e;
  --plum: #241b45; --panel: rgba(24, 17, 48, 0.88);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #120a20; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
canvas.game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#camzone { position: fixed; inset: 0 0 34% 0; z-index: 4; touch-action: none; }

#hud { position: fixed; top: 10px; left: 12px; right: 12px; z-index: 6; display: flex;
  gap: 10px; flex-wrap: wrap; pointer-events: none; }
.hud-item { background: var(--panel); border: 1px solid #3a2c66; border-radius: 10px;
  padding: 6px 12px; font-size: 13px; letter-spacing: 0.08em; }
.hud-item b { color: var(--gold); font-size: 15px; margin-left: 4px; }
#hud-lives { color: #ff5d7e; letter-spacing: 2px; }

.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center;
  justify-content: center; background: rgba(10, 6, 24, 0.55); padding: 16px; }
.overlay.hidden { display: none; }
.panel { background: var(--panel); border: 1px solid #453170; border-radius: 18px;
  padding: 26px 30px; max-width: 560px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.panel h1 { font-size: clamp(28px, 7vw, 44px); letter-spacing: 0.12em; color: var(--coral); }
.panel .tag { margin-top: 8px; color: #bdb0e6; }
.how { list-style: none; margin-top: 16px; text-align: left; font-size: 14px; line-height: 1.9; }
.how b { color: var(--gold); }
.mint { color: var(--mint); } .rose { color: #ff5d7e; }
.score-line { margin-top: 12px; font-size: 18px; }
.score-line b { color: var(--mint); font-size: 24px; }
.btn { display: inline-block; margin-top: 18px; padding: 12px 34px; border: 0;
  border-radius: 999px; background: linear-gradient(135deg, var(--coral), var(--gold));
  color: #23103c; font-weight: 700; font-size: 16px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 127, 97, 0.35); }
.btn:hover { transform: translateY(-2px); }

#joy { position: fixed; left: 18px; bottom: 18px; width: 120px; height: 120px; z-index: 8;
  border-radius: 50%; background: rgba(36, 27, 69, 0.55); border: 1px solid #453170;
  touch-action: none; display: none; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 127, 97, 0.8);
  pointer-events: none; }
#btn-jump { position: fixed; right: 22px; bottom: 26px; z-index: 8; width: 92px; height: 92px;
  border-radius: 50%; border: 1px solid #453170; background: rgba(111, 247, 196, 0.22);
  color: var(--mint); font-weight: 800; font-size: 14px; letter-spacing: 0.1em;
  touch-action: none; display: none; }
#btn-jump.hit { background: rgba(111, 247, 196, 0.6); color: #10241c; }
body.touch #joy, body.touch #btn-jump { display: block; }