:root{
  --bg: #070b12;
  --ok: #34d399;   /* yes  */
  --bad: #f87171;  /* no   */
  --weird: #f59e0b;/* mid  */
}

* { -webkit-user-select:none; user-select:none; }

html, body {
  height:100%;
  margin:0;
  background: radial-gradient(1200px 800px at 70% 10%, #0b1220 0%, var(--bg) 55%);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}

.stage {
  width:100vw; height:100vh;
  display:grid; place-items:center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* =========================================================
   8-BALL LOOK (realistic black sphere)
   ========================================================= */

.ball-wrap {
  width: 100vmin; height: 100vmin;
  display:grid; place-items:center;
  filter: drop-shadow(0 30px 110px rgba(0,0,0,.8));
  perspective: 1200px;
}

.ball {
  width:100%; height:100%;
  position:relative; overflow:hidden; border-radius:50%;
  transform-style:preserve-3d;

  /* Deep black body with soft rim falloff and ground bounce */
  background:
    radial-gradient(circle at 30% 28%,
      #2b3241 0%,
      #151c2a 20%,
      #0d1421 34%,
      #070d17 48%,
      #050a12 62%,
      #03070d 76%,
      #02060b 86%,
      #000408 100%),
    radial-gradient(180% 110% at 50% 86%, rgba(0,0,0,.45), transparent 60%);
}

/* Specular highlight cluster (8-ball studio light) */
.gloss {
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    /* wide soft highlight */
    radial-gradient(42% 30% at 27% 22%, rgba(255,255,255,.18), transparent 70%),
    /* concentrated hot spot */
    radial-gradient(12% 9% at 24% 19%, rgba(255,255,255,.35), transparent 60%),
    /* tiny spark */
    radial-gradient(4% 3% at 30% 17%, rgba(255,255,255,.6), transparent 60%);
}

/* Edge vignette to sell curvature */
.ball::before {
  content:"";
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background: radial-gradient(75% 75% at 50% 58%, transparent 63%, rgba(0,0,0,.25) 100%);
}

/* VERY subtle micro-texture to avoid “flat plastic” */
.ball::after {
  content:"";
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.03), transparent 55%),
    repeating-radial-gradient(circle at 58% 64%,
      rgba(255,255,255,.006), rgba(255,255,255,.006) 2px,
      transparent 3px, transparent 7px);
  opacity:.14;
  filter: blur(.6px);
}

/* Inner window: hidden by JS until answer; sits “inside” the ball */
.window {
  position:absolute; inset:0; display:grid; place-items:center;
}
.window-inner {
  width:46%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle at 50% 55%, #00101a, #000813 65%);
  border:3px solid #0b2030;
  box-shadow: inset 0 0 40px rgba(0,0,0,.75);
  display:grid; place-items:center; transform: translateZ(32px);
}

canvas {
  width: 96%; height: 96%;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.25));
}

/* =========================================================
   Shake animation (when “thinking”)
   ========================================================= */
@keyframes shake {
  0%,100% { transform:rotate(0deg) translateX(0); }
  10%{ transform:rotate(2deg) translateX(-6px);}
  20%{ transform:rotate(-2deg) translateX(8px);}
  30%{ transform:rotate(2deg) translateX(-8px);}
  40%{ transform:rotate(-2deg) translateX(8px);}
  50%{ transform:rotate(2deg) translateX(-6px);}
  60%{ transform:rotate(2deg) translateX(6px);}
  70%{ transform:rotate(1.5deg) translateX(-4px);}
  80%{ transform:rotate(-1.5deg) translateX(4px);}
  90%{ transform:rotate(1deg) translateX(-3px);}
}
.shaking .ball { animation: shake .65s ease-in-out infinite; }

/* =========================================================
   First-visit intro overlay
   ========================================================= */
.intro{
  position:fixed; inset:0; display:grid; place-items:center;
  background: radial-gradient(1200px 800px at 70% 10%, rgba(9,14,24,.85), rgba(7,11,18,.9));
  backdrop-filter: blur(6px);
  z-index: 9999;
}
.intro.hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.intro-card{
  width:min(92vw, 520px);
  background: rgba(0,0,0,.55);
  border:1px solid rgba(120,180,230,.35);
  box-shadow: 0 20px 80px rgba(0,0,0,.5), inset 0 0 40px rgba(120,200,255,.08);
  border-radius:18px; padding:22px 20px; color:#d8ebff; text-align:center;
}
.intro-card h1{ margin:0 0 6px; font-weight:900; letter-spacing:.4px; font-size:28px; }
.intro-sub{ margin:0 0 10px; opacity:.95; }
.intro-steps{ margin:0 0 16px; padding-left:1.2rem; text-align:left; }
.intro-card kbd{
  padding:2px 6px; border-radius:6px; background:#0f172a; border:1px solid #1e293b; font-weight:700;
}
.intro-btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  background: linear-gradient(#1f6edb, #1456b6);
  color:white; box-shadow:0 8px 25px rgba(31,110,219,.35);
}
.intro-btn:active{ transform: translateY(1px); }

/* =========================================================
   SR-only helper
   ========================================================= */
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   Floating Rescan button
   ========================================================= */
.rescan-btn{
  position:fixed; right:16px; bottom:16px; z-index:10001;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(120,180,230,.35);
  background:linear-gradient(#132334, #0c1726);
  color:#d8ebff; font-weight:800; letter-spacing:.2px;
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 0 20px rgba(120,200,255,.08);
  cursor:pointer;
}
.rescan-btn:hover{ filter:brightness(1.08); }
.rescan-btn:active{ transform:translateY(1px); }

/* =========================================================
   Modern viewport units (mobile safe areas)
   ========================================================= */
@supports (height: 100dvh) { .stage { width:100dvw; height:100dvh; } }
@supports (height: 100svh) { .stage { width:100svw; height:100svh; } }
@supports (width: 1svw) and (height: 1svh) {
  .ball-wrap { width: min(92svw, 92svh) !important; height: min(92svw, 92svh) !important; }
}
@supports (width: 1dvw) and (height: 1dvh) {
  .ball-wrap { width: min(92dvw, 92dvh) !important; height: min(92dvw, 92dvh) !important; }
}

.intro {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.intro-hide {
  opacity: 0;
  pointer-events: none;
}