@font-face {
  font-family: "Digital-7";
  src: url("/shared/fonts/Digital7-Regular.ttf") format("truetype");
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Discrete by default; a second tap within the window brightens it briefly
   as confirmation before the home navigation actually fires. */
.home-link.confirm {
  background: rgba(255, 204, 51, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 204, 51, 0.6);
}

/* Stacked directly under the home button — same discreet circle, only
   shown while ARMING (no point tuning a bomb that's already ticking). */
.settings-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px + 44px + 10px);
  left: calc(env(safe-area-inset-left) + 12px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 1000;
  border: none;
  color: inherit;
  padding: 0;
  display: none;
}
.settings-btn.visible { display: flex; }
.settings-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

.settings-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 2000;
  display: none;
}
.settings-panel.open { display: flex; }

.settings-card {
  background: #14161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  width: min(84vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  touch-action: auto;
}
.settings-card h2 {
  margin: 0;
  font-size: 20px;
}
.settings-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: rgba(242, 244, 248, 0.8);
}
.settings-card input {
  font-family: inherit;
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0b0d12;
  color: #f2f4f8;
  touch-action: auto;
}
.settings-done {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 204, 51, 0.14);
  border: 2px solid #ffcc33;
  color: #ffcc33;
}
.settings-done:active {
  background: rgba(255, 204, 51, 0.3);
}

/* Reroll (ARMING) and Reset (DISARMED/BOOM) are never on screen at the same
   time, so they share one big, obvious look. */
.reroll-btn,
.reset-btn {
  font-family: inherit;
  font-size: clamp(18px, 3.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 16px 32px;
  border-radius: 16px;
  background: rgba(255, 204, 51, 0.14);
  border: 2px solid #ffcc33;
  color: #ffcc33;
  display: none;
}
.reroll-btn.visible,
.reset-btn.visible {
  display: inline-block;
}
.reroll-btn:active,
.reset-btn:active {
  background: rgba(255, 204, 51, 0.3);
  transform: scale(0.97);
}

#banner {
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.06em;
  min-height: 1.4em;
  text-align: center;
}
#banner.disarmed { color: #3ddc84; }
#banner.boom { color: #ff4d5a; }

#banner.countdown {
  font-family: "Digital-7", "SF Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #ff2a2a;
  text-shadow: 0 0 6px rgba(255, 40, 40, 0.9), 0 0 16px rgba(255, 30, 30, 0.6), 0 0 34px rgba(255, 20, 20, 0.35);
  background: #150404;
  border: 2px solid rgba(255, 70, 70, 0.4);
  border-radius: 10px;
  padding: 0.02em 0.35em;
  display: inline-block;
}
#banner.countdown.pulse {
  animation: pulse-scale 0.5s ease-in-out infinite;
}

#stage {
  position: relative;
  width: min(78vh, 90vw, 600px);
  height: min(78vh, 90vw, 600px);
}

#ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#ring path {
  fill: none;
  stroke-linecap: round;
}

/* Unburnt fuse track — always fully drawn, thin grey, marks the whole path. */
#ring-track {
  stroke: #4a4f5c;
  stroke-width: 2;
}

/* Burnt trail — thick glowing red, grows from the start pin up to the spark. */
#ring-path {
  stroke: #e2192b;
  stroke-width: 6;
  filter: drop-shadow(0 0 4px rgba(255, 40, 40, 0.85)) drop-shadow(0 0 10px rgba(255, 20, 20, 0.5));
  transition: stroke 0.2s linear;
}
#ring-path.pulse {
  animation: pulse-stroke 0.5s ease-in-out infinite;
}

/* Fixed markers at the two open ends of the fuse path (no top edge — the
   path runs the long way around, left/bottom/right). */
#fuse-start,
#fuse-end {
  position: absolute;
  font-size: clamp(20px, 4vw, 30px);
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(255, 140, 40, 0.8));
  display: none;
}
#fuse-start { left: 10%; top: 3%; }
#fuse-end { left: 90%; top: 3%; }

/* The fuse tip: JS positions this every frame along the burning edge of the ring. */
#fuse-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0%, #ffcc33 35%, #ff5a1a 65%, transparent 75%);
  box-shadow: 0 0 10px 3px rgba(255, 170, 40, 0.9), 0 0 22px 8px rgba(255, 90, 20, 0.5);
  display: none;
  animation: spark-flicker 0.18s steps(2, end) infinite;
}

@keyframes spark-flicker {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.75); opacity: 0.75; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.9; }
}

#board {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  border-radius: 12px;
  touch-action: none;
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); color: #ff2a2a; }
  50% { transform: scale(1.1); color: #ff8080; }
}
@keyframes pulse-stroke {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, -6px); }
  80% { transform: translate(4px, 6px); }
}
body.screen-shake {
  animation: screen-shake 0.4s ease-in-out;
}