/* Flash Rush arena: HUD, charge bar, canvas stage and overlays. */

.fr-arena {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(60, 240, 255, .45), 0 0 0 1px rgba(60, 240, 255, .06) inset;
}

/* HUD ----------------------------------------------------------------- */
.fr-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; }
.fr-hud__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; margin: 0; flex: 1 1 auto; justify-content: start; }
.fr-stat dt { font: 600 .68rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fr-stat dd { margin: 0; font: 700 1.1rem/1.3 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-stat dd small { font: 400 .75rem/1 var(--body); color: var(--muted); }
.fr-stat--score dd { color: var(--gold); min-width: 4.2ch; }
#fr-chain { color: var(--lime); }
.fr-hud__btns { display: flex; gap: 8px; }
.fr-fuses { display: flex; gap: 5px; align-items: center; height: 1.43rem; }
.fr-fuse { width: 12px; height: 18px; background: var(--volt); clip-path: polygon(60% 0, 0 58%, 45% 58%, 30% 100%, 100% 38%, 55% 38%); transition: opacity .3s, background-color .3s; }
.fr-fuse--gone { background: var(--line-2); opacity: .7; }

@media (max-width: 560px) {
  .fr-hud { padding: 8px 10px; }
  .fr-hud__stats { grid-template-columns: repeat(4, auto); gap: 2px 12px; flex-basis: 100%; justify-content: space-between; }
  .fr-stat dd { font-size: 1rem; }
  .fr-stat dd small { display: none; }
  .fr-hud__btns { width: 100%; }
  .fr-hud__btns .sq-btn { flex: 1; min-height: 34px; }
}

/* Charge -------------------------------------------------------------- */
.fr-charge { position: relative; height: 22px; background: #0a1322; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.fr-charge__fill { height: 100%; background: linear-gradient(90deg, #1aa9c4, var(--volt) 70%, #d9fcff); box-shadow: 0 0 18px rgba(60, 240, 255, .7); transition: width .12s linear; }
.fr-charge__label { position: absolute; inset: 0; display: flex; align-items: center; gap: .5em; padding-left: 12px; font: 600 .75rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.fr-charge--low .fr-charge__fill { background: linear-gradient(90deg, #a3122f, var(--danger)); box-shadow: 0 0 18px rgba(255, 77, 109, .8); }
@media (prefers-reduced-motion: no-preference) {
  .fr-charge--low .fr-charge__fill { animation: fr-blink .5s ease-in-out infinite alternate; }
}
@keyframes fr-blink { to { opacity: .55; } }

/* Stage --------------------------------------------------------------- */
.fr-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: calc(100svh - var(--top-h) - 120px);
  min-height: 300px;
  background: #060a13;
}
.fr-arena--tall .fr-stage { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--top-h) - 118px); min-height: 380px; }
.fr-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: crosshair; outline: none;
}
.fr-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--volt); }

.fr-nojs { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; margin: 0; text-align: center; color: var(--muted); }
.fr-arena--ready .fr-nojs { display: none; }
.fr-arena:not(.fr-arena--ready) .fr-layer { display: none; }

.fr-layer {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 16px;
  background: rgba(6, 10, 19, .66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
}
.fr-layer[hidden] { display: none; }
#fr-count { background: rgba(6, 10, 19, .35); backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }

.fr-box {
  width: 100%; max-width: 440px; text-align: center;
  background: rgba(15, 24, 41, .94); border: 1px solid var(--line-2); border-radius: 16px;
  padding: clamp(18px, 4vw, 28px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.fr-box h3 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: .35em; }
.fr-box p { color: #c8d4ea; font-size: .98rem; }
.fr-box__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.fr-best { margin: 16px 0 0; font-size: .95rem; }
.fr-best strong { color: var(--gold); font: 700 1.1rem/1 var(--display); margin-left: 6px; }
.fr-keys { margin: 12px 0 0; font-size: .82rem !important; color: var(--muted) !important; }
.fr-keys--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .fr-keys--touch { display: inline; }
  .fr-keys--mouse { display: none; }
}

.fr-count { margin: 0; font: 700 clamp(4rem, 16vw, 8rem)/1 var(--display); color: var(--volt); text-shadow: 0 0 40px rgba(60, 240, 255, .7); }

.fr-box--result { max-width: 460px; }
.fr-cause { margin-bottom: 6px; }
.fr-record { display: inline-block; margin: 4px 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--ink) !important; font-weight: 600; font-size: .85rem !important; }
.fr-record[hidden] { display: none; }
.fr-final { margin: 4px 0 2px; font: 700 1rem/1.2 var(--display); color: var(--muted) !important; }
.fr-final span { display: block; font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--gold); line-height: 1.05; }
.fr-rank strong { color: var(--lime); }
.fr-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.fr-sum div { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; }
.fr-sum dt { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fr-sum dd { margin: 2px 0 0; font: 700 1rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.fr-sum .fr-sum__wide { grid-column: 1 / -1; border-color: rgba(198, 255, 74, .4); }
.fr-sum__wide dd { color: var(--lime); }

@media (max-height: 640px), (max-width: 400px) {
  .fr-box { padding: 14px; }
  .fr-box h3 { font-size: 1.25rem; }
  .fr-box p { font-size: .9rem; margin-bottom: .6em; }
  .fr-sum { gap: 6px; margin-top: 10px; }
  .fr-box__btns { margin-top: 10px; }
}

.fr-toast {
  position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(198, 255, 74, .14); border: 1px solid var(--lime); color: var(--lime);
  font: 700 .9rem/1.2 var(--display); width: max-content; max-width: calc(100% - 24px); text-align: center; pointer-events: none;
}
.fr-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fr-toast--in { animation: fr-toast 1.6s ease both; }
}
@keyframes fr-toast {
  0% { opacity: 0; transform: translate(-50%, -12px); }
  12%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}