:root{
  --bg-top:#232B4C;
  --bg-bottom:#0E1424;
  --cream:#F3EAD9;
  --muted:#9AA0C4;
  --amber:#E8A33D;
  --brick:#C2574B;
  --teal:#3E6E63;
}
html,body{min-height:100%;}
html{ background:var(--bg-bottom); }
body{
  background-color:var(--bg-bottom);
  background-image:radial-gradient(120% 90% at 50% -10%, var(--bg-top) 0%, var(--bg-bottom) 65%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:'Inter', sans-serif;
  color:var(--cream);
}
.font-display{ font-family:'Fraunces', serif; }

.stars{
  position:fixed; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 22%, rgba(243,234,217,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 15%, rgba(243,234,217,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 32%, rgba(243,234,217,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 45%, rgba(243,234,217,0.2) 50%, transparent 100%),
    radial-gradient(1px 1px at 12% 48%, rgba(243,234,217,0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 8%, rgba(243,234,217,0.3) 50%, transparent 100%);
  pointer-events:none;
}

.needle{ transform-origin:50% 50%; animation:spin 50s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.spinner{
  width:40px; height:40px; border-radius:9999px;
  border:3px solid rgba(243,234,217,0.15);
  border-top-color:var(--amber);
  animation:spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .needle{ animation:none; }
  .spinner{ animation-duration:2.5s; }
}

.joke-text{ transition:opacity 0.6s ease, transform 0.6s ease; }
.joke-hidden{ opacity:0; transform:translateY(4px); }

.stamp{ transform:rotate(-7deg); }

.screen{ display:none; }
.screen.active{ display:flex; }

.fade-in{ animation:fadeIn .5s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.btn{
  font-family:'Inter', sans-serif;
  border:1px solid var(--teal);
  color:var(--cream);
  background:rgba(62,110,99,0.12);
  transition:all .2s ease;
}
.btn:hover{ background:rgba(232,163,61,0.14); border-color:var(--amber); }
.btn:active{ transform:scale(0.98); }

.btn-primary{
  border:1px solid var(--amber);
  background:rgba(232,163,61,0.16);
}
.btn-primary:hover{ background:rgba(232,163,61,0.28); }

.btn[disabled]{
  opacity:0.35;
  pointer-events:none;
}

.opt-selected{
  border-color:var(--amber) !important;
  background:rgba(232,163,61,0.22) !important;
}