/**
 * Rock Paper Scissors Lizard Spock — tool styles
 *
 * Layout, the arena readout and the three game-specific keyframes frikwork has
 * no equivalent for. Cards, tabs, tables, buttons and the drop/wobble
 * animations all come from frikwork untouched.
 *
 * Every keyframe declared here is switched off in the reduced-motion block at
 * the bottom, matching what frikwork already does for its own.
 */

.rpsls-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.rpsls-play {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
}

/* --- Segmented selectors ---------------------------------------------------
   .fw-tabs--segmented is an inline-flex track that scrolls when it runs out of
   room. In a 360px sidebar the eight round counts would become a scroll strip,
   so the track is re-laid as a full-width grid and keeps its own chrome. */

.rpsls-seg {
  display: grid;
  grid-template-columns: repeat(var(--rpsls-seg-cols, 2), minmax(0, 1fr));
  overflow-x: visible;
  width: 100%;
}

.rpsls-seg--rounds { --rpsls-seg-cols: 4; }

/* --- Arena ----------------------------------------------------------------- */

.rpsls-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--fw-space-md);
  text-align: center;
}

.rpsls-side__name {
  margin: 0 0 var(--fw-space-sm);
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rpsls-versus {
  color: var(--fw-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Transform and colour live on the container, not the glyph: Font Awesome
   swaps each <i> for an <svg>, so anything keyed to `i` would be lost on the
   first icon change. The svg inherits currentColor. */
.rpsls-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  font-size: clamp(2.5rem, 9vw, 5rem);
  color: var(--fw-text-2);
  transition: color var(--fw-dur) ease, opacity var(--fw-dur) ease, transform var(--fw-dur) ease;
}

.rpsls-icon.is-winner { color: var(--fw-success); transform: scale(1.15); }
.rpsls-icon.is-loser  { color: var(--fw-danger); opacity: 0.55; }
.rpsls-icon.is-tie    { color: var(--fw-warning); }

.rpsls-score {
  margin-top: var(--fw-space-sm);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fw-brand-text);
}

.rpsls-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--fw-space-lg);
}

/* --- Result readout -------------------------------------------------------- */

.rpsls-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 5rem;
  margin-top: var(--fw-space-lg);
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  text-align: center;
}

.rpsls-result--win  { border-color: color-mix(in srgb, var(--fw-success) 45%, transparent); }
.rpsls-result--tie  { border-color: color-mix(in srgb, var(--fw-warning) 45%, transparent); }
.rpsls-result--over {
  border-color: color-mix(in srgb, var(--fw-brand) 55%, transparent);
  background: color-mix(in srgb, var(--fw-brand) 8%, var(--fw-bg-2));
}

.rpsls-result__headline { font-size: 1.2rem; font-weight: 700; color: var(--fw-text); }
.rpsls-result__detail   { color: var(--fw-text-2); }
.rpsls-result__headline:empty,
.rpsls-result__detail:empty { display: none; }

/* --- Round history --------------------------------------------------------- */

.rpsls-history { max-height: 22rem; overflow-y: auto; }

/* --- Rules modal ----------------------------------------------------------- */

.rpsls-rules {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
}

.rpsls-rule {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm) var(--fw-space-md);
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-2);
  transition: background var(--fw-dur-fast) ease;
}

.rpsls-rule:hover { background: var(--fw-bg-hover); }

.rpsls-rule__icon {
  flex: none;
  width: 1.75rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--fw-brand-text);
}

.rpsls-rule__text { flex: 1 1 auto; }
.rpsls-rule__lead { color: var(--fw-text-muted); }

/* --- Tool-specific motion ---------------------------------------------------
   The winner lunges at the loser (frikwork has no directional move), and the
   series winner keeps celebrating until the next match. The loser's reaction
   and the panel entrances use frikwork's own .fw-anim-wobble / .fw-anim-drop.
   The winner's scale(1.15) is repeated inside each keyframe because an
   animated transform replaces the static one for the duration. */

@keyframes rpsls-lunge-right {
  0%, 100% { transform: translateX(0) scale(1.15); }
  50%      { transform: translateX(clamp(12px, 4vw, 30px)) scale(1.15); }
}

@keyframes rpsls-lunge-left {
  0%, 100% { transform: translateX(0) scale(1.15); }
  50%      { transform: translateX(clamp(-30px, -4vw, -12px)) scale(1.15); }
}

@keyframes rpsls-celebrate {
  0%, 100% { transform: scale(1.15) rotate(0deg); }
  25%      { transform: scale(1.35) rotate(-10deg); }
  50%      { transform: scale(1.2) rotate(10deg); }
  75%      { transform: scale(1.35) rotate(-10deg); }
}

@keyframes rpsls-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.rpsls-icon.rpsls-lunge-right { animation: rpsls-lunge-right 0.5s ease-in-out; }
.rpsls-icon.rpsls-lunge-left  { animation: rpsls-lunge-left 0.5s ease-in-out; }
.rpsls-icon.rpsls-celebrate   { animation: rpsls-celebrate 0.6s ease-in-out infinite; }
.rpsls-result.rpsls-pop       { animation: rpsls-pop 0.35s var(--fw-ease-pop, ease-out); }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .rpsls-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .rpsls-arena { gap: var(--fw-space-sm); }
  .rpsls-side__name { font-size: 0.95rem; }
  .rpsls-icon { min-height: 5rem; }
  .rpsls-score { font-size: 1.5rem; }
  .rpsls-result { min-height: 4rem; }
  .rpsls-result__headline { font-size: 1rem; }
  .rpsls-rule { padding: var(--fw-space-xs) var(--fw-space-sm); font-size: 0.9rem; }
  .rpsls-rule__icon { width: 1.4rem; font-size: 1rem; }
}

/* Same contract frikwork honours for its own animations: no motion, but the
   winner/loser/tie colouring and the scale-up still read. */
@media (prefers-reduced-motion: reduce) {
  .rpsls-icon,
  .rpsls-rule,
  .rpsls-result { transition: none; }

  .rpsls-icon.rpsls-lunge-right,
  .rpsls-icon.rpsls-lunge-left,
  .rpsls-icon.rpsls-celebrate,
  .rpsls-result.rpsls-pop { animation: none; }
}