*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page / felt table ───────────────────────────────────────────────────────── */

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #1a2744;
  background-image:
    radial-gradient(ellipse at 50% 0%,   rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.4) 0%, transparent 70%);
  color: #fff;
  min-height: 100vh;
}

/* subtle grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent 0px, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px),
    repeating-linear-gradient(90deg,  transparent 0px, transparent 3px, rgba(255,255,255,0.006) 3px, rgba(255,255,255,0.006) 4px);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 20px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */

header {
  text-align: center;
  margin-bottom: 32px;
  width: 100%;
}

#target-label {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 4px;
}

#target-number {
  font-family: 'Playfair Display', serif;
  font-size: 128px;
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -4px;
  text-shadow: 0 4px 32px rgba(0,0,0,0.4);
  transition: color 0.4s;
}


/* ── Card mat (unified drop surface) ─────────────────────────────────────────── */

#card-mat {
  display: flex;
  height: 168px;
  align-items: stretch;
  margin-bottom: 28px;
  width: 100vw;
  align-self: flex-start;
  margin-left: calc(-50vw + 50%);
  border-top: 1.5px dashed rgba(255,255,255,0.08);
  border-bottom: 1.5px dashed rgba(255,255,255,0.08);
  position: relative; /* for fill overlay */
}

/* ── Multiplier zone (left) ──────────────────────────────────────────────────── */

#multiplier-zone {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border-right: 1.5px solid rgba(255,184,0,0.25);
  background: rgba(255,184,0,0.03);
  transition: background 0.2s, border-color 0.2s;
}

#multiplier-zone.drop-active {
  background: rgba(255,184,0,0.1);
  border-right-color: rgba(255,184,0,0.7);
}

#multiplier-zone.mult-rejected {
  background: rgba(200,16,46,0.08);
}

#multiplier-zone.mult-used #multiplier-display { display: none; }

#multiplier-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

#multiplier-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  line-height: 1;
  color: #FFB800;
  letter-spacing: 3px;
}

#mult-zone-label {
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,184,0,0.35);
  text-transform: uppercase;
}

/* ── Normal zone (right) ─────────────────────────────────────────────────────── */

#normal-zone {
  flex: 1;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
  padding: 0 12px;
  position: relative;
  z-index: 1;
  transition: background 0.2s;
}

#normal-zone.drop-active { background: rgba(255,184,0,0.07); }

#drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.12);
  pointer-events: none;
  transition: color 0.2s, font-size 0.15s;
  user-select: none;
}

#normal-zone.drop-active #drop-hint {
  color: #FFB800;
  font-size: 11px;
}

#play-strip-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* clip-path reveals the gradient left→right without squishing it,
     so the darker end stays anchored at the target pin on the right */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  background: linear-gradient(
    to right,
    rgba(255, 184, 0, 0) 0%,
    rgba(255, 184, 0, 0.38) 100%
  );
  /* duration overridden inline by JS for distance-proportional animation */
  transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

#mat-total {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: left;
  white-space: nowrap;
  transition: left 1.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

#mat-total.visible { opacity: 1; }

#mat-target {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

#mat-target.visible { opacity: 1; }

/* With multiplier zone present, drop labels to the bottom to avoid overlap */
#card-mat.has-multiplier #mat-total,
#card-mat.has-multiplier #mat-target {
  top: auto;
  transform: none;
  bottom: 7px;
}

.played-card {
  width: 120px;
  height: 168px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  padding: 7px;
  box-shadow: 3px 6px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}

/* Wood-grain border on played cards */
.played-card,
.card-front,
.card-back {
  background-color: #16223a;
  background-image:
    repeating-linear-gradient(
      -38deg,
      transparent         0px,
      transparent         5px,
      rgba(255,255,255,0.035) 5px,
      rgba(255,255,255,0.035) 6px,
      transparent         6px,
      transparent        11px,
      rgba(0,0,0,0.12)   11px,
      rgba(0,0,0,0.12)   12px,
      transparent        12px,
      transparent        17px,
      rgba(255,255,255,0.02) 17px,
      rgba(255,255,255,0.02) 18px,
      transparent        18px,
      transparent        23px,
      rgba(0,0,0,0.07)   23px,
      rgba(0,0,0,0.07)   24px
    );
}

/* ── Played card interior ────────────────────────────────────────────────────── */

.played-inner {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1a2744;
}

.played-stripe {
  height: 7px;
  background: #C8102E;
  flex-shrink: 0;
}

.played-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 6px 8px;
  gap: 1px;
}

.played-player {
  font-family: 'Oswald', sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  line-height: 1.3;
}

.played-value {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -1px;
}

.played-stat {
  font-family: 'Oswald', sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #FFB800;
  text-transform: uppercase;
  line-height: 1.3;
}

.played-year {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 7px;
  color: rgba(255,255,255,0.28);
  margin-top: 2px;
}

/* ── Card Stage ──────────────────────────────────────────────────────────────── */

#card-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  perspective: 1400px;
  padding: 20px 0 40px;
  min-height: 520px;
  overflow: visible;
}

/* Cards overlap — light enough to feel spread, not stacked */
.card-wrap + .card-wrap { margin-left: -40px; }

/* Initial fan positions (cleared by JS after entrance; restored if untouched) */
.card-wrap:nth-child(1) { transform: rotate(-7deg) translateY(10px); z-index: 1; }
.card-wrap:nth-child(2) { transform: rotate( 2deg) translateY( 0px); z-index: 2; }
.card-wrap:nth-child(3) { transform: rotate( 6deg) translateY( 8px); z-index: 3; }

/* Selected card floats above its siblings */
.card-wrap.card-selected { z-index: 10; }

.card-wrap {
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
  perspective: 1400px; /* ensures 3D flip works when card is detached from #card-stage */
}

/* Dragging state — transform is driven by JS, we just adjust opacity/cursor */
.card-wrap.is-dragging {
  opacity: 0.88;
  cursor: grabbing;
}

/* Shake on incomplete drop */
@keyframes card-shake {
  0%   { transform: translateX(0)    rotate(0deg); }
  15%  { transform: translateX(-10px) rotate(-2.5deg); }
  30%  { transform: translateX(10px)  rotate(2.5deg); }
  50%  { transform: translateX(-7px)  rotate(-1.5deg); }
  70%  { transform: translateX(7px)   rotate(1.5deg); }
  85%  { transform: translateX(-4px)  rotate(-0.8deg); }
  100% { transform: translateX(0)    rotate(0deg); }
}

.card-wrap.card-shake {
  animation: card-shake 0.5s ease;
}

/* ── Card 3-D container ──────────────────────────────────────────────────────── */

.card {
  width: 310px;
  height: 434px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}

.card.flipped { transform: rotateY(180deg); }

/* ── Shared face rules ───────────────────────────────────────────────────────── */

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* box-shadow is cheaper than filter:drop-shadow — no alpha-mask computation */
  box-shadow: 0 20px 50px rgba(0,0,0,0.72);
}

.card-back {
  transform: rotateY(180deg);
  overflow: hidden;
}

/* ── Card-front interior (cream card stock) ──────────────────────────────────── */

.card-inner {
  flex: 1;
  background: #F5F0E8;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  /* backface-visibility prevents card-inner content from showing through the
     card back as a mirror image during the 3D flip */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* no overflow:hidden — lets dropdowns escape */
}

/* aged-paper line texture */
.card-inner::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 24px,
    rgba(0,0,0,0.03) 24px,
    rgba(0,0,0,0.03) 25px
  );
  pointer-events: none;
  z-index: 0;
}

.card-inner > * { position: relative; z-index: 1; }

/* Every descendant of either face also gets backface-visibility:hidden.
   Without this, child elements that create their own stacking contexts
   (via z-index) can render independently and bleed through during the flip. */
.card-front *,
.card-back * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Topps red top stripe ────────────────────────────────────────────────────── */

.card-top-stripe {
  background: #C8102E;
  padding: 7px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pick-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #fff;
  text-transform: uppercase;
}

/* ── Card fields (stacked column) ────────────────────────────────────────────── */

.card-fields {
  flex: 1;
  padding: 16px 18px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #C8102E;
  text-transform: uppercase;
}

.field-input-wrap {
  position: relative;
}

/* Player name — largest, feels like the card headline */
.field-group--player .player-input {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.field-group--player .player-input::placeholder {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0;
}

.player-input,
.stat-input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid #c4b48e;
  background: transparent;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a2744;
  padding: 3px 2px;
  outline: none;
}

.player-input::placeholder,
.stat-input::placeholder {
  color: #c0ad8c;
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
}

.player-input:focus,
.stat-input:focus { border-bottom-color: #1a2744; }

.player-input:disabled {
  border-bottom-color: transparent;
  font-weight: 700;
  cursor: default;
  color: #1a2744;
}

.stat-input:disabled {
  border-bottom-color: #c4b48e; /* keep the line — matches year field */
  font-weight: 700;
  cursor: default;
  color: #1a2744;
}

.year-select {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid #c4b48e;
  background: transparent;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a2744;
  padding: 3px 2px;
  outline: none;
  cursor: pointer;
  /* remove native dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.year-select:disabled { color: #c0ad8c; border-bottom-color: #e0d0b0; cursor: default; }

/* ── Dropdowns ───────────────────────────────────────────────────────────────── */

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 240px;
  max-height: 190px;
  overflow-y: auto;
  background: #fffdf5;
  border: 1px solid #d4c4a0;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 1000;
}

.dropdown.hidden { display: none; }

.dropdown-item {
  padding: 9px 12px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  color: #1a2744;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item:hover:not(.used):not(.dropdown-empty):not(.dropdown-loading) { background: #f5ead8; }

.dropdown-item.used {
  color: #c0b090;
  font-style: italic;
  cursor: default;
}

.dropdown-item.dropdown-empty,
.dropdown-item.dropdown-loading {
  color: #b0a485;
  font-style: italic;
  cursor: default;
  font-size: 12px;
  justify-content: center;
}

/* Sport badge pills in player search results */
.dropdown-item { display: flex; align-items: center; justify-content: space-between; }

.sport-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-left: 8px;
}
.sport-badge-mlb { background: rgba(200,16,46,0.12);  color: #c8102e; }
.sport-badge-nba { background: rgba(200,140,0,0.15);  color: #a07800; }
.sport-badge-nfl { background: rgba(18,96,46,0.15);   color: #126e2e; }
.sport-badge-nhl { background: rgba(20,60,170,0.15);  color: #143caa; }

/* Touch polish */
button, .lock-btn, .mobile-play-btn, .result-play-again {
  touch-action: manipulation; /* prevent double-tap zoom on buttons */
}

.dropdown {
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
}

/* ── Lock In button (hidden — drag is the primary interaction) ───────────────── */

.card-footer {
  display: none;
}

.lock-btn {
  width: 100%;
  padding: 13px;
  background: #1a2744;
  color: #FFB800;
  border: none;
  border-radius: 3px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lock-btn:hover:not(:disabled) {
  background: #C8102E;
  color: #fff;
}

.lock-btn:disabled {
  background: #d4c9ac;
  color: #a09070;
  cursor: not-allowed;
}

/* ── Card back interior ──────────────────────────────────────────────────────── */

.back-inner {
  flex: 1;
  background: #1a2744;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* pinstripe texture on back */
.back-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 8px,
    rgba(255,255,255,0.025) 8px,
    rgba(255,255,255,0.025) 9px
  );
  pointer-events: none;
}

.back-inner > * { position: relative; z-index: 1; }

.back-top-stripe {
  height: 14px;
  background: #C8102E;
  flex-shrink: 0;
}

.back-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  gap: 6px;
}

.back-multiplier {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #FFB800;
  min-height: 1.2em;
  opacity: 0.9;
}

/* Equation display on flipped multiplier card */
.back-stat-value.is-formula {
  font-size: 80px;
  letter-spacing: 1px;
  line-height: 1;
}

/* Equation display on the small played card in the strip */
.played-value--formula {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  color: #fff;
}

.back-player-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  line-height: 1.3;
}

.back-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 100px;
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -3px;
  margin: 4px 0 8px;
}

/* pop-in after flip */
.card.flipped .back-stat-value {
  animation: value-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

@keyframes value-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.back-stat-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #FFB800;
  text-transform: uppercase;
}

.back-year-tag {
  margin-top: 4px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  padding: 2px 8px;
  display: inline-block;
}

/* ── End Overlay ─────────────────────────────────────────────────────────────── */

#end-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,16,35,0.85);
  z-index: 500;
}

.overlay-card {
  padding: 8px;
  border-radius: 10px;
  max-width: 320px;
  width: 90%;
  /* wood-grain border */
  background-color: #16223a;
  background-image:
    repeating-linear-gradient(
      -38deg,
      transparent         0px, transparent         5px,
      rgba(255,255,255,0.035) 5px, rgba(255,255,255,0.035) 6px,
      transparent         6px, transparent        11px,
      rgba(0,0,0,0.12)   11px, rgba(0,0,0,0.12)   12px,
      transparent        12px, transparent        17px,
      rgba(255,255,255,0.02) 17px, rgba(255,255,255,0.02) 18px,
      transparent        18px, transparent        23px,
      rgba(0,0,0,0.07)   23px, rgba(0,0,0,0.07)   24px
    );
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}

.overlay-inner {
  background: #1a2744;
  border-radius: 5px;
  padding: 44px 40px;
  text-align: center;
  border-top: 5px solid #C8102E;
}

.overlay-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
}

.overlay-title {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: 14px;
}

.overlay-value {
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 900;
  color: #FFB800;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 14px;
}

.overlay-detail {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

.overlay-detail strong { color: #fff; }

/* ── Result screen (slides up from bottom) ───────────────────────────────── */

#result-screen {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
  background: #F5F0E8;
  background-image: repeating-linear-gradient(
    180deg, transparent 0px, transparent 24px,
    rgba(0,0,0,0.025) 24px, rgba(0,0,0,0.025) 25px
  );
  border-top: 10px solid #1a2744;
  border-radius: 14px 14px 0 0;
  max-height: 88vh;
  overflow-y: auto;
}

#result-screen.visible { transform: translateY(0); }

#result-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#result-rating {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 0.9;
  letter-spacing: 4px;
  margin-bottom: 14px;
}

#result-pct {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  opacity: 0.75;
  margin-bottom: 10px;
}

#result-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: #1a2744;
  margin-bottom: 6px;
}

#result-distance {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #a89d7a;
  text-transform: uppercase;
}

.result-divider {
  width: 100%;
  height: 1px;
  background: #ddd5b8;
  margin: 22px 0;
}

#result-picks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 10px 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  border: 1px solid #e8dfc6;
  gap: 12px;
}

.result-pick-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.result-pick-player {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #1a2744;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-pick-detail {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  color: #9a8e78;
}

.result-pick-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #1a2744;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

#result-play-again {
  margin-top: 8px;
  padding: 14px 52px;
  background: #1a2744;
  color: #FFB800;
  border: none;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

#result-play-again:hover { background: #254d87; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  ·  max-width 767px
   All rules below are additive — desktop styles above are untouched.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile-only elements — hidden on desktop ───────────────────────────── */
#mobile-play-area { display: none; }
#mobile-slots     { display: none; }

@media (max-width: 767px) {

  /* ── Background gradient — fills from bottom as score builds ────────────── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    /* Strongest near the target number (top), fading toward the bottom.
       clip-path reveals from the bottom upward as score increases, so
       at low scores only a faint hint appears; at high scores the full
       gradient glows — most intensely near the target. */
    background: linear-gradient(
      to bottom,
      rgba(255,184,0,0.30)  0%,
      rgba(255,184,0,0.18) 35%,
      rgba(255,184,0,0.08) 65%,
      rgba(255,184,0,0.02) 100%
    );
    clip-path: var(--mbg-clip, inset(100% 0 0 0));
    transition: clip-path var(--mbg-dur, 1.4s) cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
    will-change: clip-path;
  }

  /* ── Page shell ──────────────────────────────────────────────────────────── */
  #app {
    max-width: 100%;
    padding: 16px 0 0;
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* dvh accounts for mobile browser chrome */
  }

  header { padding: 0 20px; margin-bottom: 10px; }
  #target-label  { font-size: 8px; letter-spacing: 3px; }
  #target-number { font-size: 76px; letter-spacing: -2px; margin-bottom: 14px; }

  /* ── Hide the desktop strip — replaced by background gradient + bottom slots */
  #card-mat { display: none; }

  /* ── PLAY CARD strip — full-width, below the card stage ────────────────── */
  #mobile-play-area {
    display: flex;
    width: 100%;   /* override align-items:center from #app desktop flex */
    padding: 0;
    margin: 10px 0 0;
  }

  /* Disabled: very muted */
  .mobile-play-btn {
    flex: 1;
    padding: 16px 8px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.2);
    border: none;
    border-top: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    letter-spacing: 3px;
    cursor: not-allowed;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  }

  /* Vertical divider between the two buttons */
  .mobile-play-btn + .mobile-play-btn {
    border-left: 1.5px solid rgba(255,255,255,0.12);
  }

  /* Enabled: gold — unmistakably ready */
  .mobile-play-btn:not(:disabled) {
    background: #FFB800;
    color: #1a2744;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(255,184,0,0.3);
  }

  .mobile-play-btn:not(:disabled):active { background: #e09000; box-shadow: none; }

  /* Two-line multiplier button label */
  .mobile-mult-label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.5px;
    opacity: 0.65;
    margin-top: 3px;
  }

  /* ── Card stage — clearly 3 cards stacked, back ones peeking behind ──────── */
  #card-stage {
    position: relative;
    height: 400px;   /* card(360) + 40px headroom for the peek stack */
    align-items: flex-start;
    min-height: auto;
    padding: 0;
    overflow: hidden;
    perspective: 900px;
  }

  /* Remove desktop fan overlap margins */
  .card-wrap + .card-wrap { margin-left: 0 !important; }

  /* All cards: narrower than viewport for visual breathing room.
     Note: no transform:none here — flyToCenterAndLock uses transform to fly,
     and the nth-child rules below handle the desktop fan override. */
  .card-wrap {
    position: absolute !important;
    left: 52px;
    right: 52px;
    width: calc(100vw - 104px) !important;
    cursor: default;
    touch-action: auto;
    transition: top 0.5s cubic-bezier(0.22,1,0.36,1),
                transform 0.5s cubic-bezier(0.22,1,0.36,1),
                opacity 0.4s ease;
  }

  /* Front card — fully visible, interactive */
  .card-wrap:nth-child(1) {
    top: 36px !important;
    left: 52px !important;
    right: 52px !important;
    width: auto !important;
    z-index: 3 !important;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
  }

  /* Card 2 — shifted right + scaled, 22px of top stripe visible above card 1 */
  .card-wrap:nth-child(2) {
    top: 14px !important;
    left: 64px !important;    /* 12px further right than card 1 */
    right: 40px !important;
    width: auto !important;
    z-index: 2 !important;
    transform: scale(0.97) !important;
    transform-origin: top center;
    opacity: 0.85;
    pointer-events: none;
  }

  /* Card 3 — shifted more right + more scaled, ~10px visible above card 2 */
  .card-wrap:nth-child(3) {
    top: 4px !important;
    left: 76px !important;    /* 24px further right than card 1 */
    right: 28px !important;
    width: auto !important;
    z-index: 1 !important;
    transform: scale(0.94) !important;
    transform-origin: top center;
    opacity: 0.65;
    pointer-events: none;
  }

  /* Card height: fixed to fit one card nicely in the layout */
  .card { width: 100%; height: 360px; }

  /* ── Card fields — touch-friendly ────────────────────────────────────────── */
  .card-fields { gap: 14px; padding: 14px 16px 10px; }
  .field-label { font-size: 9px; letter-spacing: 2px; }

  .field-group--player .player-input { font-size: 22px; min-height: 44px; padding: 8px 2px; }
  .field-group--player .player-input::placeholder { font-size: 15px; }

  .player-input, .stat-input { min-height: 44px; padding: 8px 2px; font-size: 18px; }
  .player-input::placeholder, .stat-input::placeholder { font-size: 14px; }

  .year-select { min-height: 44px; padding: 8px 2px; font-size: 18px; }

  /* ── Dropdowns — full width, 48px tap rows ───────────────────────────────── */
  .dropdown { width: 100%; min-width: 0; max-height: 260px; left: 0 !important; }
  .dropdown-item { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; }

  /* ── Bottom slots — flex-grow to fill remaining space below play button ──── */
  #mobile-slots {
    display: flex;
    width: 100%;
    flex: 1;             /* fills whatever height is left in the viewport */
    min-height: 72px;    /* never collapse to nothing on tiny screens */
    gap: 8px;
    padding: 8px 16px 16px;
    background: rgba(10,15,30,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.07);
  }

  .mobile-slot {
    flex: 1;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4px 3px;
    transition: border-color 0.4s ease, background 0.4s ease;
  }

  .mobile-slot.slot-filled {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
  }

  .slot-player {
    font-family: 'Oswald', sans-serif;
    font-size: 6px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-bottom: 1px;
  }

  .slot-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1;
  }

  .slot-stat {
    font-family: 'Oswald', sans-serif;
    font-size: 5.5px;
    color: #FFB800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-top: 1px;
  }

  /* ── Result screen ───────────────────────────────────────────────────────── */
  #result-inner     { padding: 24px 16px 56px; }
  #result-rating    { font-size: clamp(60px, 20vw, 96px) !important; letter-spacing: 2px; }
  #result-pct       { font-size: 13px; }
  #result-score     { font-size: 13px; letter-spacing: 1px; }
  #result-distance  { font-size: 10px; }
  .result-pick      { padding: 8px 12px; }
  .result-pick-player { font-size: 13px; }
  .result-pick-detail { font-size: 11px; }
  .result-pick-value  { font-size: 17px; }
  #result-play-again  { font-size: 18px; padding: 14px 36px; letter-spacing: 3px; }

  /* ── Overlay ─────────────────────────────────────────────────────────────── */
  .overlay-card   { max-width: calc(100vw - 32px); }
  .overlay-inner  { padding: 32px 24px; }
  .overlay-title  { font-size: 42px; }
  .overlay-value  { font-size: 58px; }
  .overlay-detail { font-size: 13px; }
}