@import url("shared.css");
html, body { margin: 0; height: 100%; overflow: hidden; background: #14102b; }
#game-canvas { position: fixed; inset: 0; display: block; touch-action: none; }
.hud-top {
  position: fixed; top: 10px; left: 12px; right: 12px; display: flex; gap: 14px;
  flex-wrap: wrap; pointer-events: none; font-size: 16px; text-shadow: 0 1px 4px #000;
}
.hud-top .chip { background: rgba(20, 14, 40, 0.55); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 5px 10px; }
#hud-lives { color: #ff7d9a; }
#hud-score { color: #ffd23f; }
#toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  font-size: 22px; color: #fff; opacity: 0; transition: opacity .25s;
  text-shadow: 0 2px 8px #000; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }
#joy {
  position: fixed; left: 14px; bottom: 14px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25); touch-action: none; user-select: none;
}
#joy .knob {
  position: absolute; left: 50%; top: 50%; margin: -26px 0 0 -26px;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 231, 190, 0.45); border: 1px solid rgba(255,255,255,0.5);
}
#btn-jump {
  position: fixed; right: 18px; bottom: 18px; width: 86px; height: 86px; border-radius: 50%;
  background: rgba(255, 122, 89, 0.4); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-size: 15px; font-weight: 700; touch-action: none; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 8, 30, 0.72); backdrop-filter: blur(3px); z-index: 10;
}
#overlay.hidden { display: none; }
.panel {
  max-width: 430px; width: calc(100% - 40px); text-align: center;
  background: rgba(28, 18, 56, 0.9); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 26px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.panel h2 { margin: 0 0 8px; font-size: 30px; color: #ffd98a; letter-spacing: 1px; }
.panel p { color: #cfc3e8; font-size: 15px; line-height: 1.55; margin: 8px 0 16px; }
.panel kbd {
  background: #2b2050; border: 1px solid #57407c; border-bottom-width: 3px;
  border-radius: 5px; padding: 1px 7px; font-family: inherit; color: #ffe9c9;
}
#ov-btn {
  display: inline-block; border: none; cursor: pointer; font-size: 17px; font-weight: 800;
  color: #241235; background: linear-gradient(180deg, #ffd23f, #ff8f5e);
  padding: 12px 34px; border-radius: 999px; letter-spacing: 1px;
}