:root { color-scheme: dark; --gold: #d4af37; --gold2: #f59e0b; --blood: #8b0000; --blood2: #dc2626; --ink: #1d1c22; --ink2: #232229; --fg: #f2ecdd; }
  html, body { background: var(--ink); }
  body { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; color: var(--fg); overflow-x: hidden; min-height: 100%; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }

  .bg-base { position: fixed; inset: 0; z-index: -4; background: linear-gradient(180deg, #1d1c22, #232229); }
  .smoke { position: fixed; z-index: -3; border-radius: 50%; filter: blur(70px); pointer-events: none; }
  .smoke.s1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -20vmax; background: radial-gradient(circle, rgba(212,175,55,.16), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
  .smoke.s2 { width: 80vmax; height: 80vmax; right: -30vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(139,0,0,.32), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
  .smoke.s3 { width: 50vmax; height: 50vmax; left: 30vw; top: 35vh; background: radial-gradient(circle, rgba(200,200,210,.07), transparent 65%); animation: drift1 40s ease-in-out infinite alternate-reverse; }
  @keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
  @keyframes drift2 { to { transform: translate(-16vw, -12vh) scale(1.1); } }
  .bg-overlay { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: transparent; }
  .grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
    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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.2s steps(6) infinite; }
  @keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

  .glass { background: rgba(42,41,48,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; }
  .glass-gold { border-color: rgba(212,175,55,.28); box-shadow: 0 0 0 1px rgba(212,175,55,.05) inset, 0 20px 50px -20px rgba(0,0,0,.8); }
  .section-title { font-family: 'Reem Kufi', 'Cairo', sans-serif; letter-spacing: .02em; }
  .gold-text { background: linear-gradient(180deg, #f3d27a 0%, #d4af37 55%, #a8801c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent); }
  .tnum { font-variant-numeric: tabular-nums; }

  .logo-ring { border: 2px solid var(--gold); box-shadow: 0 0 15px rgba(212,175,55,.3), 0 0 40px rgba(212,175,55,.12) inset; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .9rem; font-weight: 700; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s; user-select: none; cursor: pointer; }
  .btn:active { transform: scale(.96); }
  .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
  .btn:focus-visible, .field:focus-visible { outline: 2px solid #f3d27a; outline-offset: 2px; }
  .btn-gold { background: linear-gradient(180deg, #f0c75e, #d4af37 50%, #b8921f); color: #1a1406; box-shadow: 0 6px 20px -6px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn-gold:hover:not(:disabled) { box-shadow: 0 8px 28px -4px rgba(245,158,11,.75), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn-outline { border: 1px solid rgba(212,175,55,.5); color: #f3d27a; background: rgba(212,175,55,.06); }
  .btn-outline:hover:not(:disabled) { background: rgba(212,175,55,.14); box-shadow: 0 0 18px rgba(212,175,55,.25); }
  .btn-blood { background: linear-gradient(180deg, #b91c1c, #8b0000); color: #fde8e8; box-shadow: 0 6px 20px -6px rgba(220,38,38,.6); border: 1px solid rgba(220,38,38,.4); }
  .btn-blood:hover:not(:disabled) { box-shadow: 0 8px 26px -4px rgba(220,38,38,.75); }
  .btn-ghost { color: #cfc7b0; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
  .btn-ghost:hover:not(:disabled) { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.07); }

  .field { width: 100%; background: #222128; border: 1px solid rgba(255,255,255,.12); border-radius: .85rem; padding: .8rem 1rem; color: #f5efe0; outline: none; transition: border-color .2s, box-shadow .2s; font: inherit; }
  .field::placeholder { color: #77705f; }
  .field:focus { border-color: rgba(212,175,55,.7); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }

  .progress-track { background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.25); border-radius: 999px; overflow: hidden; position: relative; }
  .progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8b0000, #dc2626 30%, #f59e0b 70%, #f3d27a); box-shadow: 0 0 18px rgba(245,158,11,.55); transition: width .9s cubic-bezier(.22,1,.36,1); position: relative; }
  .progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(100%); animation: shine 2.4s infinite; }
  @keyframes shine { to { transform: translateX(-100%); } }
  .progress-ticks { position: absolute; inset: 0; display: flex; pointer-events: none; }
  .progress-ticks span { flex: 1; border-left: 1px solid rgba(0,0,0,.45); }
  .progress-ticks span:first-child { border-left: 0; }

  .pulse-gold { animation: pulseGold 1.8s ease-in-out infinite; }
  @keyframes pulseGold { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); } 50% { box-shadow: 0 0 0 12px rgba(212,175,55,0); } }
  .pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
  @keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  .fade-up { animation: fadeUp .5s ease both; }
  @keyframes fadeUp { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .flicker { animation: flicker 4s infinite; }
  @keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; } 20%,24%,55% { opacity: .55; } }
  .float-pts { position: fixed; z-index: 80; pointer-events: none; font-weight: 900; font-size: 2rem; color: #f3d27a; text-shadow: 0 0 18px rgba(245,158,11,.9); animation: floatUp 1.3s ease-out forwards; }
  @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1.2); } }

  .overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(5,5,8,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .spotlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(212,175,55,.18), transparent 45%); animation: sway 5s ease-in-out infinite; }
  @keyframes sway { 0%,100% { transform: translateX(-4%); } 50% { transform: translateX(4%); } }
  .confetti { position: fixed; top: -40px; z-index: 70; pointer-events: none; font-size: 1.6rem; animation: fall linear forwards; }
  @keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }
  .draw-name { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: clamp(2rem, 9vw, 4.5rem); line-height: 1.15; min-height: 1.3em; }
  .draw-name.tick { animation: tick .12s ease; }
  @keyframes tick { from { transform: translateY(-14px); opacity: .3; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
  .winner-glow { text-shadow: 0 0 25px rgba(245,158,11,.9), 0 0 60px rgba(212,175,55,.5); }

  #toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 420px); }
  .toast { padding: .8rem 1rem; border-radius: .9rem; background: rgba(13,13,17,.94); border: 1px solid rgba(212,175,55,.35); box-shadow: 0 10px 30px rgba(0,0,0,.6); font-weight: 600; animation: fadeUp .3s ease; }
  .toast.err { border-color: rgba(220,38,38,.6); }

  .status-chip { font-size: .75rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.55); white-space: nowrap; }
  .status-chip[data-s="saved"] { color: #86efac; border-color: rgba(134,239,172,.35); }
  .status-chip[data-s="dirty"] { color: #fcd34d; border-color: rgba(252,211,77,.4); }
  .status-chip[data-s="saving"] { color: #f3d27a; border-color: rgba(212,175,55,.5); }
  .status-chip[data-s="error"] { color: #fca5a5; border-color: rgba(220,38,38,.5); }
  body.is-saving #adminView [data-action], body.is-saving #adminView .needs-idle { pointer-events: none; opacity: .5; }

  .scroll-thin::-webkit-scrollbar { width: 6px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: rgba(212,175,55,.35); border-radius: 6px; }
  .rank-badge { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 999px; font-weight: 900; flex-shrink: 0; }
  .rule-tile { border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.35); border-radius: 1rem; padding: .9rem; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

  /* Background video (sits above the smoke fallback) */
  #bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; filter: grayscale(.35) contrast(1.1) brightness(.7); }
  .bg-overlay.with-video { background: radial-gradient(ellipse at center, rgba(13,13,17,.35) 0%, rgba(13,13,17,.85) 70%, #0d0d11 100%), linear-gradient(180deg, rgba(13,13,17,.55) 0%, rgba(13,13,17,.75) 50%, rgba(13,13,17,.97) 100%); }
  .login-card { max-width: 380px; }

  /* Keep wide rows (chips, tabs) from stretching grid layouts past the screen */
  main > *, section, form { min-width: 0; }