/* ── Phase Instruction ────────────────────────────────────── */
.phase-instruction {
  text-align: center; font-size: 0.54rem; color: #fff; min-height: 1.1em;
  background: var(--accent-orange); padding: 7px 12px; border-radius: 2px;
  box-shadow: 4px 4px 0 #000; line-height: 1.6;
}

/* ── THE 2.5D FIELD ───────────────────────────────────────── */
.field {
  position: relative;
  width: 100%;
  height: clamp(360px, 52vh, 480px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 4px 4px 0 #000;
  border: 2px solid #2a5a2a;
  flex-shrink: 0;
  background: #1b4a1b;  /* match field green so scroll edges blend */
}

/* Tall scrollable inner field — panned by FieldLayout via transform */
.field__virtual {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 1;            /* below logo-cover (4) and card rows (2) */
  will-change: transform;
}
/* Logo cover — sits above everything, masks the conveyor belt */
.field__logo-cover {
  position: absolute; top: 0; left: 0; right: 0;
  height: 22%;
  z-index: 4;
  background: #0a1a3a;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid #FFD700;
}
.field__logo-cover__text {
  color: #FFD700;
  font-family: var(--font-logo, monospace);
  font-size: 4.2rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-shadow: 0 0 16px rgba(255,215,0,0.6), 3px 3px 0 #000;
}

/* SVG background built by FieldLayout */
.field__bg {
  position: absolute; top: 0; left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

/* Card rows — STATIC in viewport, field scrolls behind them */
.field__row {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;            /* above field__virtual (1), below logo-cover (4) */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 9%;
  gap: 6px;
  justify-items: center;
  z-index: 2;
}

/* Defense: smaller cards = "farther away" perspective.
   Bottom edge sits at viewport center − 4px gap. */
.field__row--defense {
  --card-width: 50px;
  bottom: calc(50% + 4px);
}
/* Offense: normal cards = "closer".
   Top edge sits at viewport center + 4px gap. */
.field__row--offense {
  --card-width: 64px;
  top: calc(50% + 4px);
}

/* Dim the inactive row during card placement */
.field--offense-placing .field__row--defense {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.4);
  transition: opacity 0.2s;
}
.field--defense-placing .field__row--offense {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.4);
  transition: opacity 0.2s;
}

.field__slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; position: relative;
}
.field__slot-label {
  font-size: 0.38rem; text-transform: uppercase;
  color: rgba(255,255,255,0.8); letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  font-weight: bold; line-height: 1;
}
.field__row--defense .field__slot-label { font-size: 0.34rem; }

/* Empty slot on the field */
.card-slot {
  width: var(--card-width); height: calc(var(--card-width) * 1.4);
  border: 2px dashed rgba(255,255,255,0.4); border-radius: var(--card-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; color: rgba(255,255,255,0.55); text-transform: uppercase;
  transition: border-color var(--fade-duration), background var(--fade-duration);
  background: rgba(0,0,0,0.25);
}
.field__row--defense .card-slot { font-size: 0.38rem; }
/* Orange highlight: solid border + glow to draw attention to interactive slots */
.card-slot--highlight {
  border-style: solid;
  border-color: var(--accent-orange);
  background: rgba(255,136,0,0.12);
  animation: pulse-slot 0.9s ease-in-out infinite;
}
@keyframes pulse-slot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,136,0,0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(255,136,0,0); }
}
/* Defense phase: empty CB/DB slots use dashed gold instead of solid orange */
.field--defense-placing .card-slot--highlight {
  border-style: dashed;
  border-color: var(--text-gold);
  background: rgba(255,204,0,0.08);
  animation: pulse-slot-gold 0.9s ease-in-out infinite;
}
@keyframes pulse-slot-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,204,0,0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(255,204,0,0); }
}
/* Hover over an empty defense slot while a card is selected */
.field--defense-placing .field__row--defense .field__slot:hover .card-slot--highlight {
  border-color: var(--text-gold);
  background: rgba(255,204,0,0.18);
}

/* Play indicator — football on offense slots */
.rock {
  display: none; position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 2.2rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
  z-index: 12;
  pointer-events: none;
}
/* Pre-pick: single ball sitting well below cards in open field */
.rock--ready {
  display: block;
  bottom: -120px; opacity: 0.7;
  animation: rock-idle 1.6s ease-in-out infinite;
}
@keyframes rock-idle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
.rock--ready::after {
  content: 'PICK YOUR PLAY';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; white-space: nowrap;
  font-family: var(--font-main); font-size: 0.5rem; color: var(--text-gold);
  text-shadow: 0 0 8px rgba(255,200,0,0.5);
  letter-spacing: 0.08em; text-transform: uppercase;
  animation: pick-pulse 1.6s ease-in-out infinite;
}
@keyframes pick-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
/* Selected football: moves up below card, full opacity + bounce */
.rock--visible {
  display: block; opacity: 1;
  bottom: -60px;
  animation: rock-bounce 0.8s ease-in-out infinite;
}
@keyframes rock-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

/* Bet badge (absolute positioned inside .field__slot) */
/* Offense badges sit below the slot (away from LOS line); defense badges above */
.bet-badge {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent-orange); color: #fff; font-family: var(--font-score);
  font-size: 0.44rem; font-weight: bold; padding: 3px 7px; border-radius: 2px;
  z-index: 5; white-space: nowrap; line-height: 1.3;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.field__row--defense .bet-badge {
  bottom: auto; top: -14px;
}
.bet-badge--raise { background: #e65c00; color: #fff; }
.bet-badge--pass { background: var(--accent-red); color: #fff; opacity: 0.85; }
.bet-badge--locked { background: #4a90e2; color: #fff; }
.field__slot--folded .card { opacity: 0.35; filter: grayscale(0.7); }
.field__slot--locked .card { box-shadow: 0 0 0 2px #4a90e2 inset; }

/* ── Announce Banner (inside the field) ───────────────────── */
.announce-banner {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  text-align: center; font-size: 0.75rem; font-weight: bold;
  letter-spacing: 0.06em; text-transform: uppercase;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.12s, padding 0.12s, opacity 0.15s;
}
.announce-banner--visible { max-height: 48px; padding: 10px 16px; opacity: 1; }
.announce-banner--gold  { background: rgba(50,38,0,0.96); color: var(--text-gold); }
.announce-banner--green { background: rgba(20,50,24,0.96); color: var(--accent-green); }
.announce-banner--red   { background: rgba(50,8,8,0.96); color: var(--accent-red); }
.announce-banner--blue  { background: rgba(8,20,50,0.96); color: #6ab0ff; }

/* ── Ball-carrier slot: pulsing gold border on the center RB slot ── */
.field__slot--carrier .card-slot,
.field__slot--carrier .card {
  box-shadow: 0 0 0 2px rgba(255,200,0,0.9);
  animation: carrier-pulse 1.2s ease-in-out infinite;
}
@keyframes carrier-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,200,0,0.9), 0 0 0 0 rgba(255,200,0,0.3); }
  50%       { box-shadow: 0 0 0 2px rgba(255,200,0,0.9), 0 0 8px 4px rgba(255,200,0,0); }
}

/* ── First-empty slot pulse: stronger orange beacon ── */
.slot--pulse .card-slot {
  border-style: solid !important;
  border-color: var(--accent-orange) !important;
  animation: slot-pulse 0.65s ease-in-out infinite;
}
@keyframes slot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,136,0,0.7); }
  50%       { box-shadow: 0 0 0 12px rgba(255,136,0,0); }
}

/* ── Ball Tracker (compact) ───────────────────────────────── */
.field-strip {
  background: rgba(0,0,0,0.4); border: 1px solid #1a3a1a;
  border-radius: 2px; padding: 3px 8px;
  display: flex; align-items: center; gap: 6px;
}
.field-strip__endzone {
  font-size: 0.34rem; font-weight: bold; color: var(--accent-red);
  letter-spacing: 0.04em; min-width: 14px; text-align: center;
}
.field-strip__track {
  flex: 1; height: 10px; background: #2a5224; border-radius: 2px;
  position: relative; border: 1px solid #3a7232; overflow: visible;
}
.field-strip__firstdown {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent-orange); opacity: 0.8;
  transition: left 0.9s ease-in-out; pointer-events: none;
}
.field-strip__ball {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-size: 0.75rem; line-height: 1;
  transition: left 0.9s cubic-bezier(.4,0,.2,1);
  will-change: left; pointer-events: none;
}
.field-strip__label {
  font-size: 0.38rem; color: #aab0cc; min-width: 28px;
  text-align: right; font-family: var(--font-score);
}

/* ── Dice ─────────────────────────────────────────────────── */
.dice-area {
  background: var(--panel-bg); border: 2px solid var(--panel-border);
  border-radius: 2px; padding: 22px 10px 12px;
  display: none; justify-content: space-around; align-items: center;
  box-shadow: 4px 4px 0 #000;
}
.dice-area--visible { display: flex; }
.dice-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dice-group__label { font-size: 0.5rem; color: var(--text-secondary); text-transform: uppercase; width: 100%; text-align: center; }
.die {
  width: var(--dice-size); height: var(--dice-size);
  background: linear-gradient(150deg, #ffffff 0%, #eef0f4 55%, #d4d6de 100%);
  border-radius: 22%;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.95),
    inset -3px -3px 5px rgba(60,60,80,0.30),
    0 5px 7px rgba(0,0,0,0.45);
  display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
  padding: 16%; gap: 0; border: 1px solid rgba(0,0,0,0.12);
}
.die__pip {
  width: 8px; height: 8px; min-width: 6px; min-height: 6px;
  background: radial-gradient(circle at 35% 30%, #4a4a52 0%, #111114 75%);
  border-radius: 50%; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  align-self: center; justify-self: center; display: none;
}
.die--1 .die__pip:nth-child(5) { display: block; }
.die--2 .die__pip:nth-child(3), .die--2 .die__pip:nth-child(7) { display: block; }
.die--3 .die__pip:nth-child(3), .die--3 .die__pip:nth-child(5), .die--3 .die__pip:nth-child(7) { display: block; }
.die--4 .die__pip:nth-child(1), .die--4 .die__pip:nth-child(3), .die--4 .die__pip:nth-child(7), .die--4 .die__pip:nth-child(9) { display: block; }
.die--5 .die__pip:nth-child(1), .die--5 .die__pip:nth-child(3), .die--5 .die__pip:nth-child(5), .die--5 .die__pip:nth-child(7), .die--5 .die__pip:nth-child(9) { display: block; }
.die--6 .die__pip:nth-child(1), .die--6 .die__pip:nth-child(3), .die--6 .die__pip:nth-child(4), .die--6 .die__pip:nth-child(6), .die--6 .die__pip:nth-child(7), .die--6 .die__pip:nth-child(9) { display: block; }
@keyframes dice-bounce {
  0%   { transform: translateY(0) scale(1.10, 0.90) rotate(0deg);
         box-shadow: inset 2px 2px 3px rgba(255,255,255,0.95), inset -3px -3px 5px rgba(60,60,80,0.30), 0 4px 4px rgba(0,0,0,0.5); }
  25%  { transform: translateY(-13px) scale(0.95, 1.07) rotate(9deg); }
  50%  { transform: translateY(-17px) scale(1, 1) rotate(-7deg);
         box-shadow: inset 2px 2px 3px rgba(255,255,255,0.95), inset -3px -3px 5px rgba(60,60,80,0.30), 0 20px 11px rgba(0,0,0,0.22); }
  75%  { transform: translateY(-5px) scale(1.04, 0.96) rotate(5deg); }
  100% { transform: translateY(0) scale(1.10, 0.90) rotate(0deg);
         box-shadow: inset 2px 2px 3px rgba(255,255,255,0.95), inset -3px -3px 5px rgba(60,60,80,0.30), 0 4px 4px rgba(0,0,0,0.5); }
}
.die--rolling { animation: dice-bounce 0.5s ease-in-out infinite; }
.die--landed { animation: none; }
.dice-total { font-family: var(--font-score); font-size: 0.8rem; font-weight: bold; color: var(--text-gold); min-width: 2em; text-align: center; }

/* ── Card Value Key ───────────────────────────────────────── */
.card-key {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; font-family: var(--font-main);
  font-size: 0.48rem; color: var(--text-secondary); padding: 2px 0;
}
.card-key__label { color: var(--text-gold); font-weight: bold; margin-right: 2px; }
.card-key__item { white-space: nowrap; }
.card-key__val { color: var(--text-gold); }

/* ── Result Toast ─────────────────────────────────────────── */
.result-display {
  text-align: center; padding: 8px 14px; font-size: 0.65rem; font-weight: bold;
  border-radius: 2px; display: none;
  background: var(--panel-bg); border: 2px solid var(--panel-border);
  box-shadow: 4px 4px 0 #000;
}
.result-display--visible { display: block; }

/* ── Celebrate Overlay ────────────────────────────────────── */
.celebrate-overlay {
  /* Absolute inside .main-panel so it centres on the FIELD, matching the
     message overlay (not the whole window). */
  position: absolute; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.25s;
}
/* Dim the field (transparent above the logo so BALLCRAP stays lit) so the big centred text owns the moment */
.celebrate-overlay--visible {
  opacity: 1; pointer-events: auto;
  background: linear-gradient(to bottom, transparent var(--logo-bottom), rgba(0,0,0,0.66) var(--logo-bottom));
}
.celebrate-overlay__text {
  font-family: var(--font-score); font-weight: bold;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  text-align: center; padding: 0.4em 0.65em; border-radius: 12px;
  box-shadow: 8px 8px 0 #000; letter-spacing: 0.01em;
  animation: celebrate-pop 0.5s cubic-bezier(.2,1.4,.35,1);
}
.celebrate-overlay--td   .celebrate-overlay__text { position: relative; background: #3d2e00; color: var(--text-gold); border: 4px solid var(--text-gold); }
.celebrate-overlay--stop .celebrate-overlay__text { background: #3d0a0a; color: var(--accent-red);  border: 4px solid var(--accent-red); }
.celebrate-overlay--fg   .celebrate-overlay__text { background: #072e12; color: var(--accent-green); border: 4px solid var(--accent-green); }

/* ── Jackpot marquee — chasing bulbs around the TOUCHDOWN box ─────────
   A frame of light bulbs that crawl clockwise around the box, like a
   casino jackpot win. Bulbs sit in the margin OUTSIDE the text box
   (z-index:-1 keeps the ring behind the box, so only the outer edge shows). */
.celebrate-overlay--td .celebrate-overlay__text::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 18px;
  pointer-events: none;
  --bulb: #ffe27a;          /* lit bulb */
  --bw: 26px;               /* bulb cell pitch */
  --bd: 13px;               /* bulb track thickness */
  background-image:
    radial-gradient(circle at 50% 50%, var(--bulb) 0 28%, rgba(255,190,40,0.18) 32%, transparent 38%),
    radial-gradient(circle at 50% 50%, var(--bulb) 0 28%, rgba(255,190,40,0.18) 32%, transparent 38%),
    radial-gradient(circle at 50% 50%, var(--bulb) 0 28%, rgba(255,190,40,0.18) 32%, transparent 38%),
    radial-gradient(circle at 50% 50%, var(--bulb) 0 28%, rgba(255,190,40,0.18) 32%, transparent 38%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0;       /* top, bottom, left, right */
  background-size: var(--bw) var(--bd), var(--bw) var(--bd), var(--bd) var(--bw), var(--bd) var(--bw);
  filter: drop-shadow(0 0 5px rgba(255,210,70,0.85));
  animation: marquee-chase 0.7s linear infinite;
}
/* Travel one bulb-cell per cycle: top→right, bottom→left, left→up, right→down,
   so the whole ring reads as rotating clockwise. */
@keyframes marquee-chase {
  to {
    background-position:
      var(--bw) 0,
      calc(-1 * var(--bw)) 100%,
      0 calc(-1 * var(--bw)),
      100% var(--bw);
  }
}

/* Play-by-play outcome screen — smaller than the touchdown moment */
.celebrate-overlay--play .celebrate-overlay__text {
  font-family: var(--font-logo);
  font-size: clamp(1.6rem, 4.6vw, 2.8rem);
  letter-spacing: 0.02em;
  padding: 0.3em 0.7em; border-radius: 10px;
  box-shadow: 5px 5px 0 #000; border-width: 3px;
}
/* Snappier fade-in for the outcome screen so the coloured box appears solid
   right away (no translucent "filling in" frame). */
.celebrate-overlay--play.celebrate-overlay--visible { transition: opacity 0.1s; }
.celebrate-overlay--gain    .celebrate-overlay__text { background: #07320f; color: var(--accent-green); border: 3px solid var(--accent-green); }
.celebrate-overlay--loss    .celebrate-overlay__text { background: #3d0a0a; color: var(--accent-red);   border: 3px solid var(--accent-red); }
.celebrate-overlay--neutral .celebrate-overlay__text { background: #2a2a2a; color: var(--text-gold);    border: 3px solid var(--text-gold); }
@keyframes celebrate-pop {
  0%  { transform: scale(0.3); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: scale(1.12); opacity: 1; }
  100%{ transform: scale(1);   opacity: 1; }
}

/* Your own dice pair — gold + bold so you can tell at a glance which roll is
   yours, rather than decoding OFF/DEF mid-play. */
.dice-group__label--mine { color: var(--text-gold); font-weight: bold; }