/* =============================================
   RESET & BASE
============================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #0d0d0f;
  font-family: 'Nunito Sans', sans-serif;
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   SCREEN MANAGEMENT — show/hide two screens
============================================= */
.screen {
  display: none;
  width: 100%;
  max-width: 420px;
  padding: 24px 20px;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

/* =============================================
   SCREEN 1 — PICK YOUR TARGET
============================================= */

.header-text {
  text-align: center;
  margin-bottom: 32px;
}

.header-text .eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

.header-text h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
}

.header-text h1 span {
  /* The £ symbol glows slightly */
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
}

/* =============================================
   THE BUTTON GRID — fruit machine buttons
============================================= */

/*
  Layout: 3 columns, 3 rows
  Row 1: £10  £20  £50
  Row 2: £100 £250 £500
  Row 3: [  Other amount  ]   (spans all 3 cols)
*/
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Each preset button */
.bet-btn {
  position: relative;
  border: none;
  border-radius: 14px;
  padding: 22px 10px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  overflow: hidden;
  /* Raised physical button: thick bottom shadow + ambient glow */
  box-shadow:
    0 6px 0 rgba(0,0,0,0.5),
    0 10px 20px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5),   /* bright top rim — light catching the edge */
    inset 0 -1px 0 rgba(0,0,0,0.3);         /* dark bottom rim — underside in shadow */
  transition: transform 0.08s, box-shadow 0.08s;
}

/*
  LAYER 1 — base gloss wash
  A wide white-to-transparent gradient across the top half.
  This is the "clear coat" base — the whole surface looks lacquered.
*/
.bet-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0)    100%
  );
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  z-index: 1;
}

/*
  LAYER 2 — specular highlight
  A small, soft, bright ellipse in the upper-centre of the button.
  This is the "light reflection" — as if an overhead bulb is catching
  the convex surface of a polished plastic cap.
*/
.bet-btn::after {
  content: '';
  position: absolute;
  top: 6%;
  left: 20%;
  width: 60%;
  height: 30%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0)    100%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* Press down effect */
.bet-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/*
  Individual button colours.
  Each goes from a MID tone at top (where the shine overlays it)
  to a DEEP/DARK tone at bottom (visible below the shine, gives depth).
  The shine layers sit on top, so the top colour matters less —
  the bottom dark tone is what gives the button its "body".
*/
.btn-red    { background: linear-gradient(175deg, #d43535 0%, #6b0000 100%); }
.btn-blue   { background: linear-gradient(175deg, #2272d8 0%, #091f5c 100%); }
.btn-green  { background: linear-gradient(175deg, #22994f 0%, #083d1c 100%); }
.btn-gold   { background: linear-gradient(175deg, #c49010 0%, #5a3a00 100%); }
.btn-purple { background: linear-gradient(175deg, #7d25c8 0%, #2a0560 100%); }
.btn-teal   { background: linear-gradient(175deg, #179e90 0%, #063d37 100%); }

/* The £ symbol is smaller than the number */
.bet-btn .currency {
  font-size: 16px;
  vertical-align: super;
  margin-right: 1px;
  opacity: 0.85;
}

/* "Other" button spans all 3 columns */
.btn-other {
  grid-column: 1 / -1;
  background: linear-gradient(160deg, #3a3a4a, #1a1a24);
  font-size: 20px;
  padding: 18px 10px;
  letter-spacing: 1px;
}

.btn-other .other-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* =============================================
   CUSTOM AMOUNT INPUT (hidden by default)
   Shown when user taps "Other"
============================================= */
.custom-amount-area {
  display: none; /* toggled by JS */
  margin-top: 16px;
  background: #1a1a24;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #333;
}

.custom-amount-area label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

.custom-amount-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.stepper-btn {
  background: #2a2a3a;
  border: 1px solid #444;
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stepper-btn:active {
  background: #3a3a4a;
}

.custom-amount-display {
  flex: 1;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 36px;
  color: #ffd700;
}

.go-btn {
  margin-top: 12px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffd700, #b8860b);
  color: #0d0d0f;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 6px 12px rgba(0,0,0,0.4);
  letter-spacing: 1px;
}

.go-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* =============================================
   REEL SPIN OVERLAY — the fruit machine theatre
============================================= */
#spin-overlay {
  display: none; /* shown by JS during animation */
  position: fixed;
  inset: 0;
  background: #0d0d0f;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

#spin-overlay.visible {
  display: flex;
}

.spin-label {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #888;
}

/* Three reels side by side */
.reels {
  display: flex;
  gap: 12px;
}

.reel {
  width: 72px;
  height: 80px;
  overflow: hidden;
  border-radius: 10px;
  background: #1a1a24;
  border: 2px solid #333;
  position: relative;
}

/* The strip of symbols that scrolls */
.reel-strip {
  display: flex;
  flex-direction: column;
  animation: spin-reel 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Each individual symbol cell */
.reel-symbol {
  width: 72px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

/* The three reels stagger their stop times */
.reel:nth-child(1) .reel-strip { animation-duration: 1.0s; }
.reel:nth-child(2) .reel-strip { animation-duration: 1.3s; }
.reel:nth-child(3) .reel-strip { animation-duration: 1.6s; }

@keyframes spin-reel {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-560px); } /* scrolls through 7 symbols */
}

/* Gold line across the middle of the reels — the "payline" */
.payline {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,0.8);
  pointer-events: none;
}

.spin-target {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 48px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
}

/* =============================================
   SCREEN 2 — RESULTS
============================================= */

.results-header {
  margin-bottom: 28px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a1a24;
  border: 1px solid #333;
  border-radius: 10px;
  color: #aaa;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  margin-bottom: 24px;
}

.back-btn:hover {
  color: #fff;
  border-color: #555;
}

.results-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 4px;
}

.results-title span {
  color: #ffd700;
}

.results-subtitle {
  font-size: 14px;
  color: #888;
}

/* Placeholder result cards */
.result-card {
  background: #1a1a24;
  border: 1px solid #2a2a3a;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}

.result-card-type {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}

.result-card-desc {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}

.result-card-stake {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #ffd700;
}

.result-card-stake span {
  font-size: 13px;
  color: #888;
  font-weight: 400;
  font-family: 'Nunito Sans', sans-serif;
  margin-left: 4px;
}

/* =============================================
   SPIN AGAIN BUTTON
   Sits below the result cards. Styled like the
   fruit machine cabinet's "nudge" button —
   same gloss treatment as the preset buttons,
   gold tone to signal a positive action.
============================================= */
.spin-again-btn {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 20px;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  background: linear-gradient(175deg, #b8860b 0%, #5a3a00 100%);
  box-shadow:
    0 6px 0 rgba(0,0,0,0.5),
    0 10px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  transition: transform 0.08s, box-shadow 0.08s;
}

/* Layer 1 — broad gloss wash */
.spin-again-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0)    100%
  );
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Layer 2 — specular highlight ellipse */
.spin-again-btn::after {
  content: '';
  position: absolute;
  top: 6%; left: 25%;
  width: 50%; height: 35%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0)   100%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.spin-again-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* The icon rotates once on press */
.spin-icon {
  display: inline-block;
}

.spin-again-btn:active .spin-icon {
  animation: spin-once 0.4s ease-out;
}

@keyframes spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}