:root {
  --bg: #14101a;
  --bg-2: #1e1827;
  --bg-3: #2a2234;
  --ink: #f3e9d2;
  --ink-2: #cfc4ad;
  --accent: #ff7a1f;
  --accent-ink: #14101a;
  --blood: #e5383b;
  --ghost: #a9c7ff;
  --good: #8fd16a;
  --line: rgba(243, 233, 210, 0.16);
  --line-2: rgba(243, 233, 210, 0.3);
  --display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.blood { color: var(--blood); }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The animated night sky ---------- */
.night { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; transform: translateZ(0); background: radial-gradient(120% 80% at 70% 0%, #2a1c38 0%, #14101a 55%, #0d0a12 100%); }
.night .stars, .night .stars2 { position: absolute; inset: -10%; background-repeat: repeat; }
.night .stars { background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 51%), radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 51%), radial-gradient(1.2px 1.2px at 200px 160px, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 51%), radial-gradient(1px 1px at 60px 200px, rgba(255,255,255,.33) 50%, rgba(255,255,255,0) 51%); background-size: 240px 240px; animation: twinkle 6s ease-in-out infinite; }
.night .stars2 { background-image: radial-gradient(1.4px 1.4px at 90px 40px, rgba(255,217,176,.55) 50%, rgba(255,217,176,0) 51%), radial-gradient(1px 1px at 170px 120px, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 51%), radial-gradient(1px 1px at 30px 140px, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 51%); background-size: 300px 300px; animation: twinkle 9s ease-in-out infinite reverse; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

.night .moon { position: absolute; will-change: box-shadow; top: var(--moon-top, 6vh); right: var(--moon-right, 8vw); width: var(--moon-size, 32vmin); height: var(--moon-size, 32vmin); border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ffb066 0%, #ff8a2e 45%, #e9620e 100%); box-shadow: 0 0 60px 18px rgba(255, 122, 31, 0.35), 0 0 160px 60px rgba(255, 122, 31, 0.15); animation: moonglow 7s ease-in-out infinite; }
.night .moon::before, .night .moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(20, 16, 26, 0.12); }
.night .moon::before { width: 22%; height: 22%; top: 22%; left: 58%; }
.night .moon::after { width: 30%; height: 30%; top: 58%; left: 22%; }
@keyframes moonglow { 0%, 100% { box-shadow: 0 0 60px 18px rgba(255, 122, 31, 0.32), 0 0 160px 60px rgba(255, 122, 31, 0.12); } 50% { box-shadow: 0 0 80px 26px rgba(255, 122, 31, 0.45), 0 0 220px 90px rgba(255, 122, 31, 0.18); } }

.night .cloud { position: absolute; height: 9vmin; width: 60vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 16, 26, 0.85), rgba(20, 16, 26, 0.4) 55%, rgba(20, 16, 26, 0)); will-change: transform; animation: cloud 70s linear infinite; }
.night .cloud.c1 { top: calc(var(--moon-top, 6vh) + 6vmin); animation-duration: 80s; }
.night .cloud.c2 { top: calc(var(--moon-top, 6vh) + 18vmin); animation-duration: 110s; animation-delay: -50s; width: 80vmin; }
@keyframes cloud { from { transform: translateX(110vw); } to { transform: translateX(-90vmin); } }

.night .fog { position: absolute; left: -50%; width: 200%; height: 52vh; bottom: -14vh; will-change: transform;
  background:
    radial-gradient(22% 48% at 18% 66%, rgba(176, 156, 214, 0.26), rgba(176, 156, 214, 0.11) 48%, rgba(176, 156, 214, 0) 72%),
    radial-gradient(18% 40% at 42% 58%, rgba(176, 156, 214, 0.2), rgba(176, 156, 214, 0.08) 50%, rgba(176, 156, 214, 0) 72%),
    radial-gradient(24% 52% at 68% 70%, rgba(176, 156, 214, 0.24), rgba(176, 156, 214, 0.1) 48%, rgba(176, 156, 214, 0) 72%),
    radial-gradient(20% 44% at 90% 62%, rgba(176, 156, 214, 0.2), rgba(176, 156, 214, 0.08) 50%, rgba(176, 156, 214, 0) 72%);
  animation: fogdrift 46s ease-in-out infinite alternate; }
.night .fog.f2 { bottom: -22vh; height: 46vh; opacity: 0.85; animation-name: fogdrift2; animation-duration: 63s; animation-delay: -21s; }
.night .fog.f3 { bottom: 16vh; height: 34vh; opacity: 0.5; animation-duration: 88s; animation-delay: -40s; }
@keyframes fogdrift { from { transform: translate3d(-14%, 0, 0); } to { transform: translate3d(14%, -2vh, 0); } }
@keyframes fogdrift2 { from { transform: translate3d(12%, 1vh, 0); } to { transform: translate3d(-16%, -1vh, 0); } }

.night .bat { position: absolute; left: 0; top: 0; width: var(--bw, 46px); animation: batfly var(--bd, 22s) linear infinite; animation-delay: var(--bdelay, 0s); }
.night .bat .bob { animation: batbob 2.2s ease-in-out infinite alternate; }
.night .bat svg { display: block; width: 100%; height: auto; fill: #0b0810; animation: flap 0.28s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes batfly { from { transform: translate(-10vw, var(--by, 20vh)); } to { transform: translate(110vw, calc(var(--by, 20vh) - 8vh)); } }
@keyframes batbob { from { transform: translateY(-10px); } to { transform: translateY(14px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }

.night .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%); }
/* Fine grain dithers the dark gradients so they do not band. */
.night .grain { position: absolute; inset: 0; opacity: 0.09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; }

.night .ember { position: absolute; bottom: -10px; width: var(--es, 5px); height: var(--es, 5px); border-radius: 50%; background: #ffc27a; box-shadow: 0 0 10px 3px rgba(255, 122, 31, 0.75), 0 0 22px 6px rgba(255, 122, 31, 0.25); animation: ember var(--ed, 12s) linear infinite; animation-delay: var(--edelay, 0s); opacity: 0; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translate(var(--ex, 40px), -90vh); opacity: 0; } }

body.ghost .night { filter: hue-rotate(180deg) saturate(0.6) brightness(0.85); }

@media (prefers-reduced-motion: reduce) {
  .night .bat svg { animation: none; }
  .night .fog { animation-duration: 120s; }
}

/* ---------- Common pieces ---------- */
.btn { appearance: none; border: 0; border-radius: 999px; padding: 14px 22px; min-height: 48px; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.12s ease, filter 0.12s; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghosty { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn.danger { background: var(--blood); color: #fff; }
.btn.small { min-height: 36px; padding: 8px 14px; font-size: 14px; }
.btn.block { width: 100%; }
.card { background: rgba(30, 24, 39, 0.9); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-weight: 700; font-size: 15px; }
.input { width: 100%; background: rgba(20, 16, 26, 0.85); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px; font-size: 17px; outline: none; }
.input:focus { border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: rgba(20, 16, 26, 0.7); font-weight: 600; font-size: 15px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.toast { position: fixed; left: 50%; top: 16px; transform: translate(-50%, -140%); z-index: 100; background: var(--bg-3); border: 1px solid var(--line-2); padding: 12px 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); }
.qr { background: #fff; padding: 10px; border-radius: 12px; line-height: 0; display: inline-block; }
.qr svg { display: block; width: 100%; height: auto; }
.has-ver { flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; }
.clock-row { display: inline-flex; align-items: center; gap: 0.3em; }
.ver { font-size: 11px; line-height: 1; color: var(--ink-2); opacity: 0.75; letter-spacing: 0.04em; }
.b-clock .ver { font-size: 0.28em; }
.ver-tag { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 10px; z-index: 30; font-size: 11px; color: var(--ink-2); opacity: 0.7; pointer-events: none; }
.sim-badge { font-family: var(--mono); font-size: 12px; font-weight: 500; background: var(--blood); color: #fff; border-radius: 6px; padding: 2px 7px; letter-spacing: 0.04em; }

/* Rules */
.rules { display: flex; flex-direction: column; }
.rules .rule { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rules .rule:last-child { border-bottom: 0; }
.rules .num { font-family: var(--display); font-size: 26px; color: var(--accent); line-height: 1; }
.rules h3 { margin: 0 0 4px; font-size: 17px; }
.rules p { margin: 0; line-height: 1.45; color: var(--ink-2); }
.rules .golden { margin-top: 12px; border: 2px dashed var(--accent); border-radius: 14px; padding: 14px 16px; }
.rules .golden h3 { font-family: var(--display); font-weight: 400; font-size: 22px; }