/* Nitronedge Live — shared brand layer */
:root {
  --ink: #111519;
  --ink-2: #181d23;
  --slate: #2d333a;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f6f2ec;
  --muted: #a3acb6;
  --orange: #f26522;
  --amber: #f7941d;
  --peach: #fdd9b0;
  --grad: linear-gradient(120deg, #f26522 0%, #f7941d 55%, #fbb86a 100%);
  --good: #19b36b;
  --bad: #e5484d;
  --a0: #e8492b; /* triangle */
  --a1: #2f6fde; /* diamond */
  --a2: #d48a00; /* circle */
  --a3: #169a64; /* square */
  --r: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 85% -10%, rgba(242, 101, 34, 0.18), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(247, 148, 29, 0.12), transparent 60%),
              var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
[hidden] { display: none !important; }

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

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.4em; border-radius: 14px; font-weight: 800; letter-spacing: .01em;
  background: var(--grad); color: #1b0f06; box-shadow: 0 6px 0 #a8420f, 0 12px 24px rgba(242, 101, 34, .35);
  transition: transform .08s ease, box-shadow .08s ease, filter .2s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a8420f, 0 6px 12px rgba(242, 101, 34, .3); }
.btn:disabled { filter: grayscale(.8) brightness(.7); pointer-events: none; }
.btn.ghost { background: var(--panel-2); color: var(--text); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.btn.ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,.35); }

.shape { width: 1em; height: 1em; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }

/* ── answer colours ── */
.c0 { --c: var(--a0); } .c1 { --c: var(--a1); } .c2 { --c: var(--a2); } .c3 { --c: var(--a3); }

/* ── motion ── */
@keyframes pop { 0% { transform: scale(.3); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes rise { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes zoomIn { from { transform: scale(.85); opacity: 0; filter: blur(6px) } to { transform: none; opacity: 1; filter: none } }
@keyframes shake { 0%,100% { transform: none } 20% { transform: translateX(-10px) rotate(-2deg) } 40% { transform: translateX(9px) rotate(2deg) } 60% { transform: translateX(-6px) } 80% { transform: translateX(4px) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
@keyframes flame { 0%,100% { transform: scale(1) rotate(-4deg) } 50% { transform: scale(1.18) rotate(5deg) } }

.anim-pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.anim-rise { animation: rise .5s cubic-bezier(.2,.9,.3,1) both; }
.anim-zoom { animation: zoomIn .6s cubic-bezier(.2,.9,.3,1) both; }
.anim-shake { animation: shake .5s ease both; }
.flame { display: inline-block; animation: flame .6s ease-in-out infinite; }

.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px;
  background: #fff; color: #1b1f24; font-weight: 700; box-shadow: var(--shadow); animation: rise .3s both;
}
.toast.err { background: #ffe1df; color: #7a1411; }

.net-dot { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 40;
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: #7a1411; color: #fff; animation: fade .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}