/* ==========================================================================
   ARCADE LAYER, the video-game half of the direction.

   The reference is Madden / NFL Blitz: a real broadcast frame with a game
   HUD living on top of it. Everything here is additive, namespaced .hud-*
   and .arcade-*, so it never fights broadcast.css for specificity.
   ========================================================================== */

/* --- CRT: scanlines, phosphor glow, and a barely-there aperture grille --- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px,
      transparent 1px, transparent 3px
    );
  mix-blend-mode: multiply;
}

.crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 60, 0.028) 0px, rgba(255, 0, 60, 0.028) 1px,
    rgba(0, 255, 120, 0.028) 1px, rgba(0, 255, 120, 0.028) 2px,
    rgba(60, 120, 255, 0.028) 2px, rgba(60, 120, 255, 0.028) 3px
  );
}

/* A slow rolling scan bar, like a monitor slightly out of sync */
.crt__roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 26vh;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.032), transparent);
  animation: crt-roll 7.5s linear infinite;
}

@keyframes crt-roll {
  0%   { transform: translateY(-30vh); }
  100% { transform: translateY(130vh); }
}

/* --- Screen shake and hit-stop (the two things that sell game feel) ------ */

.shake-sm { animation: shake 220ms cubic-bezier(.36,.07,.19,.97) both; }
.shake-md { animation: shake 380ms cubic-bezier(.36,.07,.19,.97) both; }
.shake-lg { animation: shake-big 700ms cubic-bezier(.36,.07,.19,.97) both; }

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 2px, 0); }
  40%, 60% { transform: translate3d(7px, -1px, 0); }
}

@keyframes shake-big {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  10% { transform: translate3d(-14px, 6px, 0) rotate(-0.7deg); }
  20% { transform: translate3d(16px, -9px, 0) rotate(0.7deg); }
  30% { transform: translate3d(-19px, 5px, 0) rotate(-0.9deg); }
  40% { transform: translate3d(17px, -7px, 0) rotate(0.6deg); }
  50% { transform: translate3d(-13px, 8px, 0) rotate(-0.5deg); }
  60% { transform: translate3d(11px, -5px, 0) rotate(0.4deg); }
  70% { transform: translate3d(-8px, 3px, 0) rotate(-0.3deg); }
  80% { transform: translate3d(5px, -2px, 0) rotate(0.2deg); }
  90% { transform: translate3d(-2px, 1px, 0) rotate(0); }
}

/* Chromatic split on heavy impacts */
.chroma { animation: chroma-split 320ms steps(2, end) 3; }
@keyframes chroma-split {
  0%   { filter: none; }
  50%  { filter: drop-shadow(4px 0 0 rgba(255,0,64,0.75)) drop-shadow(-4px 0 0 rgba(0,225,255,0.75)); }
  100% { filter: none; }
}

/* --- HUD corner brackets ------------------------------------------------- */

.hud-frame {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
}

.hud-frame span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--gold);
  opacity: 0.5;
}
.hud-frame span:nth-child(1) { top: 64px;    left: 12px;  border-right: 0; border-bottom: 0; }
.hud-frame span:nth-child(2) { top: 64px;    right: 12px; border-left: 0;  border-bottom: 0; }
.hud-frame span:nth-child(3) { bottom: 60px; left: 12px;  border-right: 0; border-top: 0; }
.hud-frame span:nth-child(4) { bottom: 60px; right: 12px; border-left: 0;  border-top: 0; }

/* --- Power meter: charges through the scramble, empties on the lock ------ */

.hud-power {
  width: min(100%, 34rem);
  display: grid;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 240ms;
}
.hud-power.is-live { opacity: 1; }

.hud-power__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.hud-power__pct { color: var(--gold); font-variant-numeric: tabular-nums; }

.hud-power__track {
  position: relative;
  height: 15px;
  background: rgba(5, 13, 8, 0.85);
  border: 2px solid var(--chalk-line);
  overflow: hidden;
  /* clipped corners read as a game HUD, not a web progress bar */
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.hud-power__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  box-shadow: 0 0 18px rgba(233, 179, 65, 0.85);
  transition: width 90ms linear;
}

.hud-power__fill.is-max {
  background: linear-gradient(90deg, var(--down-orange), #FFF3C4, var(--down-orange));
  animation: power-max 260ms steps(2) infinite;
}
@keyframes power-max { 50% { filter: brightness(1.9); } }

/* Segmented overlay so the bar reads as discrete cells */
.hud-power__track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 12px,
    rgba(5, 13, 8, 0.9) 12px, rgba(5, 13, 8, 0.9) 15px
  );
  pointer-events: none;
}

/* --- Combo / streak counter --------------------------------------------- */

/* Left rail of the stage, the right side belongs to the board, and the two
   collided there. */
.hud-combo {
  position: fixed;
  top: 104px;
  left: 26px;
  z-index: 70;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 260ms, transform 260ms;
}
.hud-combo.is-live { opacity: 1; transform: translateX(0); }

.hud-combo__label {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.hud-combo__value {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.85;
  color: var(--gold-bright);
  text-shadow: 0 0 26px rgba(233, 179, 65, 0.9), 3px 3px 0 var(--pigskin);
  font-variant-numeric: tabular-nums;
}
.hud-combo__value.is-bump { animation: combo-bump 420ms var(--ease-slam) both; }
@keyframes combo-bump {
  0%   { transform: scale(2.1) rotate(-9deg); color: #FFF; }
  60%  { transform: scale(0.92) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* --- Impact text bursts -------------------------------------------------- */

.impact-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.impact-word {
  position: absolute;
  font-family: var(--display);
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  -webkit-text-stroke: 3px var(--turf-void);
  paint-order: stroke fill;
  text-shadow: 0 0 44px rgba(233, 179, 65, 0.95), 7px 7px 0 var(--pigskin);
  animation: impact-pop 1150ms var(--ease-slam) both;
  white-space: nowrap;
}

@keyframes impact-pop {
  0%   { transform: scale(0.2) rotate(-16deg); opacity: 0; }
  22%  { transform: scale(1.28) rotate(4deg); opacity: 1; }
  38%  { transform: scale(1) rotate(-2deg); }
  74%  { transform: scale(1.04) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.5) rotate(0deg); opacity: 0; }
}

/* --- Rank badge ---------------------------------------------------------- */

.rank-badge {
  display: inline-grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--turf-void);
  background: linear-gradient(150deg, var(--gold-bright), var(--gold-deep));
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  text-shadow: none;
}
.rank-badge[data-rank="S"] {
  background: linear-gradient(150deg, #FFF6D8, var(--gold), var(--down-orange));
  animation: rank-shimmer 1.5s ease-in-out infinite;
}
@keyframes rank-shimmer { 50% { filter: brightness(1.35) saturate(1.3); } }

/* --- Achievement toast --------------------------------------------------- */

.achievement {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  z-index: 85;
  transform: translateX(-50%) translateY(160%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1.4rem;
  background: linear-gradient(120deg, rgba(10, 26, 14, 0.97), rgba(22, 51, 29, 0.97));
  border: 2px solid var(--gold);
  box-shadow: 0 0 44px rgba(233, 179, 65, 0.5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
  max-width: min(92vw, 34rem);
  /* Hidden until an achievement actually fires. Opacity does the hiding so a
     short toast can never peek above the lower third on a tall viewport. */
  opacity: 0;
  visibility: hidden;
}
.achievement.is-shown {
  visibility: visible;
  animation: achievement-in 4200ms var(--ease-out) both;
}

@keyframes achievement-in {
  0%   { transform: translateX(-50%) translateY(220%); opacity: 0; }
  10%  { transform: translateX(-50%) translateY(0); opacity: 1; }
  88%  { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(220%); opacity: 0; }
}

.achievement__icon { font-size: 1.6rem; line-height: 1; flex: none; }
.achievement__label {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.achievement__text {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--chalk);
}

/* --- Attract screen ------------------------------------------------------ */

.press-start {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  text-indent: 0.34em;
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.12; } }

/* --- Scoreboard digits (segmented display) ------------------------------- */

.scoreboard {
  display: inline-flex;
  gap: 3px;
  padding: 0.3rem 0.5rem;
  background: #060D07;
  border: 1px solid var(--chalk-line);
}
.scoreboard__digit {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--down-orange);
  text-shadow: 0 0 12px rgba(255, 122, 24, 0.9);
  font-variant-numeric: tabular-nums;
  min-width: 0.72em;
  text-align: center;
}

/* --- Glitch-in for scene changes ---------------------------------------- */

.glitch-in { animation: glitch-in 480ms steps(3, end) both; }
@keyframes glitch-in {
  0%   { opacity: 0; transform: translateX(-14px) skewX(11deg); filter: brightness(3); }
  33%  { opacity: 1; transform: translateX(9px) skewX(-7deg); }
  66%  { transform: translateX(-4px) skewX(3deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crt__roll,
  .hud-power__fill.is-max,
  .rank-badge[data-rank="S"],
  .press-start { animation: none !important; }
  .shake-sm, .shake-md, .shake-lg, .chroma, .glitch-in { animation: none !important; }
  .impact-word { animation: impact-pop-reduced 1100ms ease both; }
  @keyframes impact-pop-reduced {
    0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }
  }
}

@media (max-width: 900px) {
  .hud-frame { display: none; }

  /* The combo counter is duplicate information on a phone: the board header
     already reads '1 / 12'. It was also landing on top of the board rows.
     Screen space wins over the flourish here. */
  .hud-combo { display: none; }

  /* Lift the toast clear of the board, which occupies the bottom 30vh once
     the draw starts. Anchored above it rather than over it. */
  .achievement { bottom: calc(30vh + 1.25rem); }
  body[data-phase='lobby'] .achievement,
  body[data-phase='armed'] .achievement { bottom: 5rem; }
  .achievement__text { font-size: 1rem; }
}

@media (max-width: 620px) {
  .achievement { max-width: calc(100vw - 1.5rem); padding: 0.6rem 1rem; gap: 0.65rem; }
  .achievement__icon { font-size: 1.3rem; }
  .achievement__label { font-size: 0.62rem; letter-spacing: 0.2em; }
  .achievement__text { font-size: 0.95rem; }
}