* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #05060f;
  color: #f5f1e8;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(#05060fcc, #05060f00);
  flex-wrap: wrap;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.logo {
  color: #f5f1e8;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e;
}
.count { margin: 0; font-size: 14px; color: #c9c3b8; }
.count b { color: #ffd166; font-variant-numeric: tabular-nums; }
.ctrls { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctrls button {
  background: #ffffff14;
  color: #f5f1e8;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ctrls button:hover { background: #ffffff22; }
.ctrls #wishbtn { background: #ffb547; border-color: #ffb547; color: #1a0d00; font-weight: 800; }
.introwish { font: inherit; font-weight: 700; font-size: 16px; padding: 10px 20px; border-radius: 999px; border: 1px solid #ffb54788; background: #ffb5471a; color: #ffd8a0; cursor: pointer; }
.introwish:hover { background: #ffb54733; }
.ctrls button[aria-pressed="true"] { background: #f97316; border-color: #f97316; color: #1a0d02; }
.vol {
  display: flex; align-items: center; gap: 8px;
  background: #ffffff14; border: 1px solid #ffffff22; border-radius: 999px; padding: 3px 12px 3px 3px;
}
.vol button { border: 0; padding: 5px 8px; display: flex; }
.vol input { width: 110px; accent-color: #f97316; }
.vol output { width: 2.2em; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: #c9c3b8; }

.hint {
  position: fixed;
  left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  background: #0b0c1ccc;
  border: 1px solid #ffffff22;
  border-radius: 16px;
  padding: 14px 18px;
  text-align: center;
  max-width: min(92vw, 460px);
  pointer-events: none;
  transition: opacity .4s;
  display: grid;
  gap: 4px;
  font-size: 14px;
  color: #c9c3b8;
}
.hint b { color: #fff; font-size: 16px; }
.hint.gone { opacity: 0; }

.tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  overflow-x: auto;
  background: linear-gradient(#05060f00, #05060fee 30%);
  scrollbar-width: thin;
}
.card {
  flex: 0 0 auto;
  width: 92px;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 4px 7px;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  color: #f5f1e8;
  font: inherit;
  cursor: pointer;
  position: relative;
}
.card:hover { background: #ffffff1a; }
.card[aria-checked="true"] {
  background: #f9731626;
  border-color: #f97316;
  box-shadow: 0 0 0 1px #f97316, 0 0 18px #f9731655;
}
.card img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; margin-bottom: 3px; pointer-events: none; }
.card .hi { font-size: 13px; font-weight: 700; line-height: 1.2; }
.card .en { font-size: 11px; color: #c9c3b8; line-height: 1.2; white-space: nowrap; }
.card .key {
  position: absolute; top: 4px; left: 6px;
  font-size: 10px; color: #8a857c;
}
.loud { display: flex; gap: 2px; margin-top: 2px; }
.loud i { width: 9px; height: 3px; border-radius: 2px; background: #ffffff26; }
.loud i.on { background: #f97316; }

.intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 10;
  cursor: pointer;
  background: radial-gradient(ellipse at 50% 45%, #05060f55 0%, #05060fcc 70%);
  transition: opacity .5s, visibility .5s;
}
.intro.gone { opacity: 0; visibility: hidden; }
.intro-card { text-align: center; display: grid; justify-items: center; gap: 10px; max-width: 560px; }
.intro-bomb { position: relative; width: 170px; animation: bomb-in .7s cubic-bezier(.2,1.6,.4,1) both, rock 2.6s ease-in-out .7s infinite; transform-origin: 50% 90%; }
.intro-bomb img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 30px #f9731655); }
/* Tip of the fuse in sutli.svg sits at (66, 24) of a 120x140 viewBox. */
.fuse-spark {
  position: absolute;
  left: 55%; top: 17%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ffd23f 30%, #f97316 55%, #f9731600 72%);
  box-shadow: 0 0 24px 8px #ffb34788;
  animation: fizz .14s steps(2) infinite;
}
.intro h1 {
  margin: 0;
  font-size: clamp(44px, 9vw, 84px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .95;
  text-shadow: 0 0 40px #f9731688;
}
.intro h1 span {
  background: linear-gradient(90deg, #ffd23f, #f97316, #ef4444, #ffd23f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
.intro-lead { margin: 0; font-size: clamp(16px, 2.6vw, 20px); color: #f5f1e8; font-weight: 600; }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 6px; padding: 0; }
.chips li { padding: 5px 11px; border-radius: 999px; background: #ffffff14; border: 1px solid #ffffff26; font-size: 13px; font-weight: 700; }
.go {
  margin-top: 4px;
  padding: 16px 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb347, #f97316 55%, #ea580c);
  color: #1a0d02;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 0 0 #f97316aa, 0 10px 30px #f9731666;
  animation: pulse 1.6s ease-out infinite;
}
.go:hover { filter: brightness(1.08); }
.go:focus-visible { outline: 3px solid #ffd23f; outline-offset: 4px; }
.intro-note { margin: 2px 0 0; font-size: 13px; color: #c9c3b8; }
.intro-note a { color: #ffd166; }
@keyframes shimmer { to { background-position: 300% 0; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 18px #f9731600, 0 10px 30px #f9731666; } 100% { box-shadow: 0 0 0 0 #f9731600, 0 10px 30px #f9731666; } }
@keyframes bomb-in { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes rock { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes fizz { 50% { transform: scale(.65) rotate(30deg); opacity: .8; } }
.wishbox { border: 1px solid #ffffff26; border-radius: 18px; background: #0d0f1f; color: #f5f1e8; padding: 22px; width: min(420px, 92vw); }
.wishbox::backdrop { background: #05060fcc; }
.wishbox form { display: grid; gap: 12px; }
.wishbox label { font-weight: 800; font-size: 18px; }
.wishbox input { font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff33; background: #ffffff10; color: inherit; }
.wishrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wishrow .go { padding: 12px 30px; animation: none; margin: 0; }
.soundtap { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 6; font: inherit; font-weight: 800; font-size: 18px; padding: 14px 26px; border: 0; border-radius: 999px; background: #ffb547; color: #1a0d00; box-shadow: 0 0 30px #ffb54788; cursor: pointer; animation: throb 1.4s ease-in-out infinite; }
@keyframes throb { 50% { transform: translateX(-50%) scale(1.07); } }
.wishrow .wa { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: #25d366; color: #05140a; font-weight: 800; text-decoration: none; }
.soundtap:disabled { animation: none; opacity: .85; cursor: default; }
.wishrow #wishshare, .wishrow #wishvideo { font: inherit; padding: 11px 16px; border-radius: 999px; border: 1px solid #ffffff33; background: #ffffff14; color: inherit; cursor: pointer; }
.wishnote { margin: 0; font-size: 13px; color: #c9c3b8; }

@media (prefers-reduced-motion: reduce) { .intro-bomb, .fuse-spark, .intro h1 span, .go, .soundtap { animation: none; } }

@media (max-width: 720px) {
  .intro-bomb { width: 124px; }
  .count { order: 3; width: 100%; font-size: 12px; }
  .ctrls { gap: 6px; }
  .ctrls button { padding: 6px 9px; font-size: 12px; }
  .vol input { width: 80px; }
  .card { width: 78px; }
  .card img { width: 44px; height: 44px; }
  .card .key { display: none; }
}