/* Color Plug 3D — reference style: clean, soft, blue-gray studio (NOT the package §8 kit) */

html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: system-ui, sans-serif;
  /* sky gradient behind the transparent WebGL canvas */
  background: linear-gradient(180deg, #b2bdc9 0%, #93a9c4 48%, #7c9ac0 100%);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- HUD ---- */
#hud {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 5;
}
#hudLevel {
  color: #ffffff; font-size: 24px; font-weight: 800; letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(60, 80, 110, 0.45);
}
#hudDots { display: flex; justify-content: center; gap: 9px; margin-top: 8px; }
#hudDots .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 2px rgba(50, 70, 100, 0.25);
  transition: background 0.25s ease, transform 0.25s ease;
}
#hudDots .dot.on { transform: scale(1.25); box-shadow: 0 2px 6px rgba(50, 70, 100, 0.4); }

/* ---- gesture hint ---- */
#hint { position: fixed; z-index: 6; pointer-events: none; text-align: center; width: 220px; margin-left: -110px; }
#hint.hidden { display: none; }
#hintHand {
  width: 74px; height: 86px; display: block; margin: 0 auto;
  filter: drop-shadow(0 6px 8px rgba(50, 70, 100, 0.45));
  animation: hintBob 1.4s ease-in-out infinite;
}
#hintRipple { animation: hintRipple 1.4s ease-out infinite; transform-origin: 14px 12px; }
#hintText {
  margin-top: 2px; color: #fff; font-size: 17px; font-weight: 800;
  text-shadow: 0 2px 6px rgba(60, 80, 110, 0.55);
}
@keyframes hintBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-6deg); } }
@keyframes hintRipple { 0% { opacity: 0.9; transform: scale(0.4); } 70% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---- win screen (clean soft card, per reference style) ---- */
#winOverlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(90, 110, 140, 0.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#winOverlay.hidden { display: none; }
#winCard {
  background: #ffffff; border-radius: 30px; padding: 34px 40px 30px; text-align: center;
  width: min(320px, 82vw);
  box-shadow: 0 24px 60px rgba(40, 60, 90, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: cardPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#winDots { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
#winDots .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.18); animation: dotJump 0.8s ease infinite alternate; }
#winDots .dot:nth-child(2) { animation-delay: 0.12s; }
#winDots .dot:nth-child(3) { animation-delay: 0.24s; }
@keyframes dotJump { from { transform: translateY(0); } to { transform: translateY(-7px); } }
#winCard h1 { margin: 0 0 6px; color: #3d4a5c; font-size: 27px; font-weight: 800; letter-spacing: 0.5px; }
#winCard p { margin: 0 0 22px; color: #8a99ad; font-size: 15px; font-weight: 600; }
#winRetry {
  border: none; cursor: pointer; padding: 14px 40px; border-radius: 999px;
  background: linear-gradient(#5bb8f5, #2f8fd9);
  box-shadow: 0 5px 0 #206ba8, 0 10px 18px rgba(40, 90, 140, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  color: #fff; font-size: 19px; font-weight: 800; letter-spacing: 1px; font-family: inherit;
}
#winRetry:active { transform: translateY(4px); box-shadow: 0 1px 0 #206ba8, 0 4px 8px rgba(40, 90, 140, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.45); }

/* ---- dev tools (strip for ad build) ---- */
#tuneBtn {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 20;
  border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  background: rgba(40, 50, 65, 0.55); color: #dfe7f2; font-size: 13px; font-weight: 700;
}
#tunePanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: min(320px, 88vw);
  overflow-y: auto; padding: 14px; box-sizing: border-box;
  background: rgba(24, 30, 40, 0.94); color: #dfe7f2; font-size: 12px;
}
#tunePanel h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 1px; color: #8fb7e8; text-transform: uppercase; }
#tunePanel .row { margin: 7px 0; }
#tunePanel .row label { display: flex; justify-content: space-between; margin-bottom: 2px; }
#tunePanel .row input[type=range] { width: 100%; }
#tunePanel .btns { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
#tunePanel button {
  border: none; border-radius: 7px; padding: 8px 12px; cursor: pointer;
  background: #33507a; color: #fff; font-weight: 700; font-size: 12px;
}
#tunePanel textarea { width: 100%; height: 130px; background: #101520; color: #b9e08f; border: 1px solid #33507a; border-radius: 6px; font-family: monospace; font-size: 11px; }
#tunePanel .copied { color: #9be93d; font-weight: 700; margin: 4px 0; }
.hidden { display: none !important; }