/* =====================================================================
   ROCK PAPER SCISSORS — NEON ARENA
   Stylesheet
   ===================================================================== */

/* =====================================================================
   1. CSS CUSTOM PROPERTIES / DESIGN TOKENS
   ===================================================================== */
:root {
  /* Colours */
  --bg-dark: #0a0a1a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border-glow: rgba(255, 255, 255, 0.08);
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2d95;
  --neon-green: #39ff14;
  --neon-yellow: #ffe600;
  --neon-purple: #b14aed;
  --text-primary: #eef0ff;
  --text-secondary: #8a8fa8;
  --glass-bg: rgba(15, 15, 35, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing — fluid scale */
  --space-xs: clamp(4px, 1vw, 8px);
  --space-sm: clamp(8px, 2vw, 14px);
  --space-md: clamp(14px, 3vw, 24px);
  --space-lg: clamp(20px, 4vw, 36px);
  --space-xl: clamp(28px, 5vw, 48px);

  /* Radius */
  --radius: 18px;
  --radius-pill: 60px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(.4, 0, .2, 1);
  --transition-med: 0.45s cubic-bezier(.4, 0, .2, 1);

  /* Component sizing — fluid */
  --arena-icon-size: clamp(64px, 14vw, 110px);
  --arena-icon-font: clamp(1.6rem, 4vw, 3rem);
  --choice-btn-width: clamp(100px, 22vw, 150px);
  --choice-btn-height: clamp(115px, 26vw, 170px);
  --choice-icon-font: clamp(2rem, 5vw, 3.4rem);
}


/* =====================================================================
   2. RESET & BASE
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100dvh; /* dynamic viewport height for mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  position: relative;
}


/* =====================================================================
   3. ANIMATED BACKGROUND BLOBS
   ===================================================================== */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

body::before {
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  background: radial-gradient(circle, var(--neon-cyan), transparent 70%);
  top: -150px;
  left: -100px;
  animation: blobMove1 18s ease-in-out infinite alternate;
}

body::after {
  width: min(500px, 70vw);
  height: min(500px, 70vw);
  background: radial-gradient(circle, var(--neon-pink), transparent 70%);
  bottom: -120px;
  right: -80px;
  animation: blobMove2 20s ease-in-out infinite alternate;
}

@keyframes blobMove1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(120px, 80px) scale(1.15); }
}

@keyframes blobMove2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-100px, -60px) scale(1.1); }
}


/* =====================================================================
   4. LAYOUT WRAPPER
   ===================================================================== */
.game-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}


/* =====================================================================
   5. HEADER / TITLE
   ===================================================================== */
.game-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.game-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 5vw, 2.6rem);
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink), var(--neon-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: titlePulse 3s ease-in-out infinite alternate;
  line-height: 1.2;
}

@keyframes titlePulse {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.25); }
}

.game-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  color: var(--text-secondary);
  letter-spacing: 1px;
}


/* =====================================================================
   6. MODE SELECTOR
   ===================================================================== */
.mode-selector {
  display: flex;
  gap: var(--space-xs);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
  padding: 5px;
}

.mode-btn {
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.8vw, 0.72rem);
  font-weight: 700;
  padding: clamp(8px, 2vw, 12px) clamp(14px, 3vw, 24px);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.mode-btn:hover {
  color: var(--text-primary);
}

.mode-btn.active {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  color: #fff;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}


/* =====================================================================
   7. SCOREBOARD
   ===================================================================== */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-lg);
  width: 100%;
  max-width: 460px;
}

.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.score-label {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.6vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.score-value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  transition: var(--transition-fast);
}

.score-value.player-score  { color: var(--neon-cyan); }
.score-value.computer-score { color: var(--neon-pink); }

.score-value.pop {
  animation: scorePop 0.4s ease;
}

@keyframes scorePop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.score-divider {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--text-secondary);
  opacity: 0.4;
  justify-self: center;
}


/* =====================================================================
   8. ROUND DOTS (Best-of-5 indicator)
   ===================================================================== */
.round-dots {
  display: flex;
  gap: clamp(6px, 1.5vw, 10px);
  align-items: center;
  justify-content: center;
}

.round-dot {
  width: clamp(10px, 2.5vw, 14px);
  height: clamp(10px, 2.5vw, 14px);
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  transition: var(--transition-fast);
}

.round-dot.won {
  background: var(--neon-green);
  border-color: var(--neon-green);
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}
.round-dot.lost {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  box-shadow: 0 0 8px rgba(255, 45, 149, 0.5);
}
.round-dot.draw-dot {
  background: var(--neon-yellow);
  border-color: var(--neon-yellow);
  box-shadow: 0 0 8px rgba(255, 230, 0, 0.4);
}


/* =====================================================================
   9. ARENA — WHERE CHOICES ARE DISPLAYED
   ===================================================================== */
.arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: clamp(110px, 22vw, 180px);
  position: relative;
}

.arena-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.arena-icon {
  width: var(--arena-icon-size);
  height: var(--arena-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--arena-icon-font);
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition-med);
  position: relative;
  flex-shrink: 0;
}

/* Thinking animation */
.arena-icon.thinking {
  animation: thinking 0.5s ease-in-out infinite;
}

@keyframes thinking {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  25%      { transform: rotate(8deg) scale(1.05); }
  50%      { transform: rotate(-6deg) scale(0.95); }
  75%      { transform: rotate(6deg) scale(1.02); }
}

/* Reveal bounce */
.arena-icon.reveal {
  animation: revealBounce 0.5s ease;
}

@keyframes revealBounce {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Winner / loser states */
.arena-icon.winner-glow {
  border-color: var(--neon-green);
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.5), 0 0 60px rgba(57, 255, 20, 0.2);
}

.arena-icon.loser-dim {
  opacity: 0.45;
  filter: grayscale(0.5);
}

.arena-label {
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.vs-badge {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--neon-yellow);
  text-shadow: 0 0 12px rgba(255, 230, 0, 0.5);
  flex-shrink: 0;
}


/* =====================================================================
   10. RESULT TEXT
   ===================================================================== */
.result-text {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.5vw, 1.6rem);
  font-weight: 900;
  text-align: center;
  min-height: clamp(32px, 6vw, 48px);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-text.win        { color: var(--neon-green); text-shadow: 0 0 18px rgba(57, 255, 20, 0.5); }
.result-text.lose       { color: var(--neon-pink);  text-shadow: 0 0 18px rgba(255, 45, 149, 0.5); }
.result-text.draw       { color: var(--neon-yellow); text-shadow: 0 0 18px rgba(255, 230, 0, 0.5); }
.result-text.series-win { color: var(--neon-green); text-shadow: 0 0 24px rgba(57, 255, 20, 0.6); }
.result-text.series-lose{ color: var(--neon-pink);  text-shadow: 0 0 24px rgba(255, 45, 149, 0.6); }

.result-text.fade-in {
  animation: resultFadeIn 0.4s ease;
}

@keyframes resultFadeIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* =====================================================================
   11. CHOICE BUTTONS
   ===================================================================== */
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2.5vw, 22px);
  width: 100%;
  max-width: 500px;
}

.choice-btn {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 8;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  transition: var(--transition-fast);
  overflow: hidden;
  color: var(--text-primary);
}

.choice-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.03));
  transition: var(--transition-fast);
}

/* Hover — base */
.choice-btn:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--neon-cyan);
  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.2), 0 0 12px rgba(0, 240, 255, 0.15);
}

.choice-btn:hover::before {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), transparent);
}

.choice-btn:active {
  transform: translateY(-2px) scale(0.97);
}

.choice-btn.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.choice-btn .icon {
  font-size: var(--choice-icon-font);
  line-height: 1;
  transition: var(--transition-fast);
}

.choice-btn:hover .icon {
  transform: scale(1.15);
}

.choice-btn .label {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.choice-btn:hover .label {
  color: var(--neon-cyan);
}

/* Per-button neon accent on hover */
.choice-btn[data-choice="rock"]:hover {
  border-color: var(--neon-pink);
  box-shadow: 0 8px 32px rgba(255, 45, 149, 0.2);
}
.choice-btn[data-choice="rock"]:hover .label {
  color: var(--neon-pink);
}
.choice-btn[data-choice="rock"]:hover::before {
  background: linear-gradient(135deg, rgba(255, 45, 149, 0.08), transparent);
}

.choice-btn[data-choice="paper"]:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.2);
}

.choice-btn[data-choice="scissors"]:hover {
  border-color: var(--neon-yellow);
  box-shadow: 0 8px 32px rgba(255, 230, 0, 0.2);
}
.choice-btn[data-choice="scissors"]:hover .label {
  color: var(--neon-yellow);
}
.choice-btn[data-choice="scissors"]:hover::before {
  background: linear-gradient(135deg, rgba(255, 230, 0, 0.08), transparent);
}

/* Click ripple effect */
.choice-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.5s ease-out;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}


/* =====================================================================
   12. ACTION BUTTONS (Reset)
   ===================================================================== */
.actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.reset-btn {
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: clamp(10px, 2vw, 14px) clamp(24px, 5vw, 40px);
  border: 1.5px solid var(--neon-pink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--neon-pink);
  cursor: pointer;
  transition: var(--transition-fast);
}

.reset-btn:hover {
  background: var(--neon-pink);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 45, 149, 0.4);
}


/* =====================================================================
   13. CONFETTI CANVAS
   ===================================================================== */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}


/* =====================================================================
   14. FOOTER
   ===================================================================== */
.footer {
  margin-top: var(--space-xs);
  font-size: clamp(0.6rem, 1.5vw, 0.72rem);
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.5;
}


/* =====================================================================
   15. RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* --- Extra-small: very narrow phones (≤ 360px) --- */
@media (max-width: 360px) {
  .game-wrapper {
    gap: clamp(10px, 3vw, 16px);
    padding: 12px 8px 24px;
  }

  .choices {
    gap: 8px;
  }

  .choice-btn {
    border-radius: 12px;
  }

  .scoreboard {
    padding: 10px 16px;
    gap: 12px;
    border-radius: 12px;
  }

  .arena {
    gap: 8px;
  }

  .mode-btn {
    padding: 6px 10px;
    font-size: 0.55rem;
  }
}

/* --- Small phones (361px – 480px) --- */
@media (min-width: 361px) and (max-width: 480px) {
  .game-wrapper {
    gap: 16px;
    padding: 16px 12px 28px;
  }

  .scoreboard {
    padding: 12px 20px;
    gap: 16px;
  }
}

/* --- Tablets & small laptops (481px – 768px) --- */
@media (min-width: 481px) and (max-width: 768px) {
  .game-wrapper {
    gap: 22px;
  }
}

/* --- Large screens (769px+) --- */
@media (min-width: 769px) {
  .game-wrapper {
    padding: 32px 24px 48px;
    gap: 28px;
  }

  .choices {
    max-width: 520px;
  }

  .choice-btn:hover {
    transform: translateY(-8px) scale(1.06);
  }
}

/* --- Very large screens (1200px+) — cap width, centre beautifully --- */
@media (min-width: 1200px) {
  .game-wrapper {
    max-width: 820px;
  }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .game-wrapper {
    gap: 10px;
    padding: 8px 16px 16px;
  }

  .game-header {
    gap: 2px;
  }

  .game-subtitle {
    display: none;
  }

  .arena {
    min-height: 80px;
  }

  .result-text {
    min-height: 24px;
  }

  .choice-btn {
    aspect-ratio: 1 / 1;
  }
}

/* --- Touch devices: remove hover transforms that feel janky --- */
@media (hover: none) {
  .choice-btn:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--glass-border);
  }

  .choice-btn:hover::before {
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.03));
  }

  .choice-btn:hover .icon {
    transform: none;
  }

  .choice-btn:hover .label {
    color: var(--text-secondary);
  }

  /* Active state for touch feedback */
  .choice-btn:active {
    transform: scale(0.95);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
  }

  .choice-btn[data-choice="rock"]:active {
    border-color: var(--neon-pink);
    box-shadow: 0 0 16px rgba(255, 45, 149, 0.25);
  }

  .choice-btn[data-choice="scissors"]:active {
    border-color: var(--neon-yellow);
    box-shadow: 0 0 16px rgba(255, 230, 0, 0.25);
  }
}

/* --- Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}