/* =============================================================
   Bet modal
   ============================================================= */
.veil {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.veil.open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Closed state: centered horizontally, parked below the viewport.
     Open state: centered horizontally + vertically. The transition
     interpolates between the two transforms so the modal slides up into
     the middle of the screen. */
  transform: translate(-50%, 60vh);
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 28px;
  z-index: 110;
  transition: transform .35s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 30px 80px -10px rgba(10,10,10,0.3);
}
.modal.open { transform: translate(-50%, -50%); }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 0;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-2);
  transition: all .15s;
}
.modal-close:hover { background: var(--ink); color: white; }
.modal-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 700;
}
.modal-pick {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin-bottom: 6px;
}
.modal-odds {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--pink-2);
  margin-bottom: 22px;
}
.stake-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
.stake-label .bal { font-family: var(--mono); color: var(--ink-2); letter-spacing: 0; text-transform: none; font-size: 12px; }
.stake-input {
  display: flex;
  align-items: center;
  background: var(--paper-2);
  border: 2px solid var(--paper-3);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: all .15s;
}
.stake-input:focus-within { border-color: var(--pink); background: var(--pink-veil); }
.stake-input input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  outline: none;
  width: 100%;
  min-width: 0;
}
.stake-input .unit {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 1px;
  font-weight: 700;
}
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
.quick button {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  color: var(--ink-2);
  padding: 8px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.quick button:hover { border-color: var(--pink); color: var(--pink-2); background: var(--pink-veil); }
.payout {
  background: var(--green-veil);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payout-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--green-2);
  font-weight: 700;
}
.payout-v { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--green-2); }
.confirm {
  width: 100%;
  background: var(--ink);
  color: white;
  border: 0;
  padding: 16px;
  border-radius: var(--r-md);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.confirm:hover:not(:disabled) { background: var(--pink); box-shadow: var(--shadow-pink); }
.confirm:disabled { background: var(--paper-3); color: var(--ink-3); cursor: not-allowed; }

/* Lock countdown — visible below odds. Calm grey, turns pink in the last
   60 seconds, becomes a flat ink banner when the market closes. */
.modal-lock {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  text-align: center;
  margin: -8px 0 14px;
  padding: 4px 0;
}
.modal-lock.urgent {
  color: var(--pink-2);
  font-weight: 700;
}
.modal-lock.locked {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin: 4px 0 14px;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0;
}

/* Existing-bet flow — info banner + cancel link inside the modal. */
.existing-note {
  background: var(--pink-veil);
  color: var(--pink-2);
  border: 1px solid var(--pink);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
.cancel-bet {
  width: 100%;
  background: transparent;
  color: var(--ink-3);
  border: 0;
  padding: 10px 16px;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  transition: color .15s;
}
.cancel-bet:hover:not(:disabled) { color: var(--ink); }
.cancel-bet:disabled { cursor: wait; opacity: 0.5; }

/* =============================================================
   Welcome onboarding modal — first signup only. Pink veil + pink
   amount headline so it reads as a celebratory welcome, then a calm
   disclaimer paragraph so the play-money rule is unmissable before
   the user dismisses.
   ============================================================= */
.welcome-veil {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 170;
  animation: winVeilIn .25s ease-out;
}
.welcome-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 36px 32px 24px;
  z-index: 180;
  text-align: center;
  box-shadow: 0 30px 80px -10px rgba(255, 45, 126, 0.35);
  animation: winPop .4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.welcome-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pink);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.welcome-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  letter-spacing: -1.2px;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1;
}
.welcome-amount {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 52px;
  color: var(--pink-2);
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 4px 0 18px;
}
.welcome-amount .welcome-unit {
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  margin-left: 4px;
}
.welcome-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.welcome-disclaimer {
  background: var(--paper-2);
  border-left: 3px solid var(--pink);
  font-size: 12px;
  color: var(--ink-2);
  text-align: left;
  padding: 10px 14px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  line-height: 1.5;
  margin: 0 0 20px;
}
.welcome-disclaimer strong { color: var(--ink); }
.welcome-form { margin: 0; }
.welcome-cta {
  width: 100%;
  background: var(--pink);
  color: #fff;
  border: 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.welcome-cta:hover { background: var(--pink-2); }
.welcome-foot {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--ink-3);
}
.welcome-foot a { color: var(--ink-3); text-decoration: underline; }
.welcome-foot a:hover { color: var(--ink); }

/* =============================================================
   Win celebration modal — surfaces once per resolved-win on page load.
   ============================================================= */
.win-veil {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 150;
  animation: winVeilIn .25s ease-out;
}
@keyframes winVeilIn { from { opacity: 0; } to { opacity: 1; } }
.win-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 36px 28px 24px;
  z-index: 160;
  text-align: center;
  box-shadow: 0 30px 80px -10px rgba(255, 45, 126, 0.35);
  animation: winPop .35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes winPop {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
.win-confetti {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}
.win-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pink);
  font-weight: 800;
  margin-bottom: 8px;
}
.win-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1;
}
.win-pick {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 20px;
  line-height: 1.4;
}
.win-pick .win-game {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ink-3);
  margin-right: 4px;
}
.win-pick strong { color: var(--ink); }
.win-payout {
  background: var(--green-veil);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.win-payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.win-payout-row .lbl {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.win-payout-row .val {
  font-family: var(--mono);
  font-weight: 700;
}
.win-payout-row .val.pos { color: var(--green); }
.win-payout-row.total {
  border-top: 1px solid rgba(30, 122, 29, 0.25);
  margin-top: 6px;
  padding-top: 10px;
}
.win-payout-row.total .val {
  font-size: 22px;
  color: var(--green);
}
.win-when { color: var(--ink-3); margin: 0 0 18px; }

.win-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.win-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  background: #000;
  color: #fff;
  border-radius: var(--r-md);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.win-share:hover { background: #1d1d1d; }
.win-ack { margin: 0; }
.win-continue {
  width: 100%;
  background: var(--pink);
  color: #fff;
  border: 0;
  padding: 13px 18px;
  border-radius: var(--r-md);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.win-continue:hover { background: var(--pink-2); }
.modal-foot {
  text-align: center;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =============================================================
   Toast
   ============================================================= */
.toast {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--ink);
  color: white;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  z-index: 200;
  opacity: 0;
  transition: all .3s;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.pink { background: var(--pink); }
.toast.green { background: var(--green); }

/* =============================================================
   Mobile (<= 980px) — bump touch targets inside the bet modal.
   ============================================================= */
@media (max-width: 980px) {
  .quick button { padding: 12px 8px; }
  .modal-close { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 20px; }
}