:root{
  --bg:#070a12;
  --text:#eaf2ff;
  --muted:#9bb0d1;
  --ring:#7c4dff;
  --primary:#8056ff;
  --primary-2:#6e46e6;
  --window:#0a0f1a;
  --tri:#8a5bff;
  --tri-glow:rgba(164, 120, 255, .65);
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:#b3a3ff;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:16px}
.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}

/* HEADER */
.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(7,10,18,.9),rgba(7,10,18,.55));border-bottom:1px solid #0f1730;backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-wrap{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand{font-size:22px;margin:0;white-space:nowrap}
.tagline{font-size:13px;color:var(--muted);white-space:nowrap}
.top-nav{display:flex;gap:16px;align-items:center}
.top-nav a{color:var(--muted)}
.nav-toggle{display:none;background:#121a2d;color:#d6e1ff;border:1px solid #1b294a;border-radius:10px;padding:8px 10px}

/* MOBILE NAV */
@media (max-width:760px){
  .top-nav{display:none;position:absolute;right:16px;top:58px;background:#0b1222;border:1px solid #132144;border-radius:12px;padding:10px 12px;flex-direction:column}
  .top-nav.open{display:flex}
  .nav-toggle{display:block}
}

/* HERO SECTION */
.hero{display:grid;gap:14px;justify-items:center;padding:14px;text-align:center}
.hero-title{font-size:34px;margin:10px 0 0}
.hero-subtitle{color:var(--muted);margin:0 0 6px}
.question-input{width:min(720px,100%);background:#0e1426;border:1px solid #162344;color:var(--text);padding:14px 16px;border-radius:14px}
.question-input:focus{outline:none;border-color:#5c48b7;box-shadow:0 0 0 3px rgba(128,86,255,.18)}

/* BALL UI */
.ball-wrap{display:grid;gap:14px;justify-items:center}
.actions{display:flex;gap:10px}
.btn{border:none;border-radius:12px;padding:12px 16px;font-weight:600}
.btn-primary{background:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-2)}
.btn-secondary{background:#121a2d;color:#d6e1ff;border:1px solid #1b294a}

.ball{position:relative;width:min(420px,85vw);aspect-ratio:1;border-radius:50%;
  background:black;display:grid;place-items:center;
  box-shadow:inset 0 0 60px rgba(0,0,0,.75), 0 20px 70px rgba(0,0,0,.5);}
.ball::after{content:"";position:absolute;inset:8%;border-radius:50%;
  box-shadow:0 0 0 3px rgba(124,77,255,.35),0 0 25px rgba(124,77,255,.25) inset}
.glare{position:absolute;top:11%;left:43%;width:7%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.16), rgba(255,255,255,0) 66%);filter:blur(2px)}

.window{position:absolute;inset:0;display:grid;place-items:center}
.window::before{content:"";position:absolute;width:68%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 55%, #0f1629 0%, #0a0f1a 62%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.85)}

/* --- Triangle: smaller, fits inside ball --- */
.tri-svg{
  position:absolute;
  width:85%;      /* was 62% */
  height:65%;     /* was 62% */
  top:10%;        /* was 6% */
  left:50%;
  transform:translateX(-50%);
  filter: drop-shadow(0 0 18px var(--tri-glow)) drop-shadow(0 0 6px var(--tri-glow));
  pointer-events:none;
}
.tri-shape{
  fill: rgba(138,91,255,.92);
}

/* --- Answer text: wraps to 2–3 lines nicely --- */
.answer{
  position:relative;
  z-index:1;
  max-width:58%;         /* narrower so text stays inside the triangle */
  text-align:center;
  color:#f1eaff;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  font-size:.84rem;
  line-height:1.18;
  white-space:pre-line;  /* preserve \n inserted by JS */
  text-wrap:balance;     /* modern browsers balance lines */
  hyphens:auto;          /* graceful long words */
}

.badge{position:absolute;right:-12px;top:-12px;width:54px;height:54px;border-radius:50%;
  background:white;color:black;font-weight:900;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.4);user-select:none}

/* EFFECTS */
@keyframes shake {0%{transform:rotate(0) translateX(0)} 15%{transform:rotate(-6deg) translateX(-5px)} 30%{transform:rotate(6deg) translateX(5px)} 45%{transform:rotate(-4deg) translateX(-3px)} 60%{transform:rotate(4deg) translateX(3px)} 75%{transform:rotate(-2deg) translateX(-2px)} 100%{transform:rotate(0) translateX(0)}}
.ball.shaking{animation:shake .6s ease-in-out both}

/* FAQ */
.faq{background:linear-gradient(180deg,#0a0f1a,#0b1220);border:1px solid #111a2e;border-radius:14px;padding:16px;margin:14px 0}
.disclaimer{color:#8aa0c9}

/* FOOTER */
.site-footer{border-top:1px solid #0f1730;margin-top:8px;padding-top:8px;text-align:center;color:var(--muted)}

/* NOSCRIPT */
.noscript{margin:1rem;padding:1rem;border:1px solid #1c2540;border-radius:12px;background:#0a0f1a;color:#dbeafe;text-align:center}

/* RESPONSIVE */
@media (max-width:480px){
  .hero-title{font-size:28px}
  .answer{font-size:.8rem}
  .badge{width:48px;height:48px;right:-10px;top:-10px}
}

/* ===== Language dropdown (top-right) ===== */
.lang-select{
  background:#121a2d;
  color:#d6e1ff;
  border:1px solid #1b294a;
  border-radius:10px;
  padding:8px 10px;
}

/* ===== Region suggest modal (no auto-redirect) ===== */
.region-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  z-index:50; /* above sticky header */
}

.region-modal[hidden] {
  display: none;
}

.region-modal__card{
  width:min(420px, 92vw);
  background:#0b1220;
  border:1px solid #132144;
  border-radius:14px;
  padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.region-modal__card h4{
  margin:0 0 6px;
}

.region-modal__card p{
  margin:0 0 12px;
  color:var(--muted);
}

.region-modal__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ===== Close button for modal ===== */
.region-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #8493b9;
  font-size: 22px;
  cursor: pointer;
  transition: 0.2s;
}
.region-modal__close:hover {
  color: #ffffff;
}