/* =========================================================
   Jekpoti — overlays
   Modal dialogs (stats, settings, nickname, languages), toasts
   and the big-win celebration.
   ========================================================= */
/* ---------- modal ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6,2,15,.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg,#2a1856,#1b0f38);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: in .25s ease;
}
@keyframes in {
  from {
    transform: scale(.92);
    opacity: 0;
  }
}
.modal h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: var(--gold);
}
.modal p {
  line-height: 1.55;
  color: #e8ddff;
}
.modal .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.btn {
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.btn.primary {
  background: linear-gradient(180deg,#ffe08a,#ffb703);
  color: #2b1500;
  border: 0;
}
.btn.green {
  background: linear-gradient(180deg,#7df59a,#2fbf5a);
  color: #06240f;
  border: 0;
}
.btn.danger {
  background: #5c1a2a;
  border-color: #ff5a5f88;
}
.stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  margin: 14px 0;
}
.stat {
  background: rgba(0,0,0,.25);
  border-radius: 14px;
  padding: 12px;
}
.stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.stat b {
  font-size: 22px;
}
.stat.neg b {
  color: var(--red);
}
.stat.pos b {
  color: var(--green);
}
.ach {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.ach div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  opacity: .4;
}
.ach div.got {
  opacity: 1;
  background: rgba(255,209,102,.12);
}
.ach .i {
  font-size: 24px;
}
.ach small {
  display: block;
  color: var(--muted);
}
label.field {
  display: block;
  font-weight: 800;
  margin-top: 10px;
}
label.field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f0820;
  color: var(--text);
  font-size: 18px;
  font-family: inherit;
}
/* the language list in the 🌐 dialog */
.langs {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap: 8px;
  margin: 14px 0;
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(92vw,460px);
}
.toast {
  background: #2a1856;
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: tin .3s ease;
  text-align: center;
}
@keyframes tin {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
}

/* ---------- big win ---------- */
.bigwin {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.bigwin h1 {
  font-size: clamp(44px,12vw,120px);
  margin: 0;
  color: var(--gold);
  text-shadow: 0 6px 0 #b35b00, 0 0 40px #ffb703;
  animation: zoom .6s cubic-bezier(.2,1.6,.4,1);
}
.bigwin p {
  font-size: clamp(18px,4vw,28px);
  font-weight: 900;
  margin: 6px 0 0;
  text-shadow: 0 2px 10px #000;
}
@keyframes zoom {
  from {
    transform: scale(0) rotate(-20deg);
  }
}
.rain {
  position: fixed;
  top: -60px;
  z-index: 39;
  pointer-events: none;
  font-size: 32px;
  animation: fall linear forwards;
}
@keyframes fall {
  to {
    transform: translateY(115vh) rotate(720deg);
  }
}