/* Simple, beginner-friendly styles with unique animations */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e2e8f0;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 800px at 10% 10%, #1d4ed8 0%, rgba(29,78,216,0) 60%),
              radial-gradient(1000px 700px at 90% 20%, #a21caf 0%, rgba(162,28,175,0) 60%),
              radial-gradient(900px 600px at 30% 90%, #059669 0%, rgba(5,150,105,0) 60%),
              linear-gradient(120deg, #0b1020, #0a0d18 60%, #090c16);
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite alternate;
}
.bl {
  font-family: 'Orbitron', sans-serif;
  font: size 10rem;;
  color: #00ffcc;
  text-shadow: 0px 0px 10px #00ffcc, 0px 0px 20px #000;
} 
.title {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  color: #00ffcc;
  text-shadow: 0px 0px 10px #00ffcc, 0px 0px 20px #000;
} 

.app { width: 100%; max-width: 760px; padding: 24px; }

.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.title { margin: 0; font-size: 28px; font-weight: 800; }
.scoreboard { display: flex; gap: 12px; }
.score {
  background: rgba(30, 41, 59, 0.5);
  padding: 8px 12px; border-radius: 12px; font-weight: 700;
  border: 1px solid rgba(148,163,184,.2);
  backdrop-filter: blur(6px);
}
.score .badge { margin-right: 8px; filter: drop-shadow(0 2px 6px rgba(99,102,241,.4)); }

.main {
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid rgba(31,42,68,0.7);
  border-radius: 16px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(99,102,241,.18), 0 12px 60px rgba(99,102,241,.18);
  backdrop-filter: blur(10px);
}

/* Floating orbs decoration */
.decor { position: relative; height: 0; }
.decor .orb { position: absolute; width: 12px; height: 12px; border-radius: 50%; opacity: .6; filter: blur(0.2px);
  box-shadow: 0 0 30px currentColor, 0 0 60px currentColor inset; }
.decor .orb:nth-child(1) { color: #60a5fa; left: 10%; top: -8px; animation: floatY 6s ease-in-out infinite; }
.decor .orb:nth-child(2) { color: #a78bfa; left: 30%; top: -4px; animation: floatY 7s ease-in-out infinite 0.2s; }
.decor .orb:nth-child(3) { color: #34d399; left: 70%; top: -10px; animation: floatY 5.5s ease-in-out infinite 0.35s; }
.decor .orb:nth-child(4) { color: #f472b6; left: 88%; top: -2px; animation: floatY 6.5s ease-in-out infinite 0.5s; }

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

.arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.vs { font-weight: 900; color: #cbd5e1; letter-spacing: 1.5px; text-shadow: 0 0 18px rgba(99,102,241,.45), 0 0 30px rgba(56,189,248,.25); }
.hand {
  display: grid; place-items: center;
  background: radial-gradient(120px 80px at 50% 30%, rgba(59,130,246,.15), rgba(2,6,23,.0)), #0a0f1a;
  border: 1px solid rgba(30,41,59,.7);
  border-radius: 16px; height: 140px;
  position: relative; overflow: hidden;
}
.hand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%);
}
.arena.playing .hand::after { animation: sheen 600ms ease; }
.hand span { font-size: 56px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.placeholder { opacity: 0.6; font-size: 14px; color: #94a3b8; }

.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.choice {
  appearance: none; border: 1px solid rgba(30,41,59,.7);
  background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.9));
  color: #e5e7eb; border-radius: 14px; padding: 12px; cursor: pointer;
  display: grid; place-items: center; gap: 6px; position: relative; isolation: isolate; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.choice:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.35); border-color: rgba(148,163,184,.6); }
.choice:active { transform: translateY(0); }
.choice.selected { box-shadow: 0 0 0 2px rgba(99,102,241,.6) inset, 0 12px 28px rgba(99,102,241,.25); border-color: #6366f1; }
.choice small { color: #cbd5e1; font-weight: 600; }
.choice span { font-size: 24px; }

/* Ripple effect */
.choice::before {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.45), rgba(99,102,241,0) 70%);
  left: var(--rx, 50%); top: var(--ry, 50%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0; pointer-events: none;
}
.choice.rippling::before { animation: ripple 500ms ease-out forwards; }

.result { text-align: center; font-weight: 800; margin: 10px 0; min-height: 28px; letter-spacing: .3px; }
.result.win { color: #34d399; animation: pop 350ms ease; }
.result.lose { color: #fb7185; animation: pop 350ms ease; }
.result.draw { color: #a3e635; animation: pop 350ms ease; }

/* Score bump */
.score.bump { animation: scoreBump 420ms ease; }

.actions { display: flex; justify-content: center; }
.reset { appearance: none; border: 1px solid #1e293b; background: transparent; color: #e2e8f0; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.reset:hover { background: #111827; }

.footer { text-align: center; margin-top: 10px; color: #94a3b8; font-size: 12px; }

@media (max-width: 480px) {
  .hand { height: 110px; }
  .hand span { font-size: 44px; }
}

/* Animations */
@keyframes sheen { to { transform: translateX(100%); } }
@keyframes pop { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@keyframes flipReveal { 0% { transform: rotateX(90deg); opacity: .0; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes pulseVs { 0% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
@keyframes bgShift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.2); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(10); opacity: 0; } }
@keyframes scoreBump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-6px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }

/* Confetti */
.confetti { position: fixed; top: 0; left: 0; width: 8px; height: 12px; pointer-events: none; opacity: 0; border-radius: 2px; }
@keyframes confettiFall { 0% { transform: translate(var(--x,0), -20px) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x,0), 100vh) rotate(720deg); opacity: 0; } }

/* Pre-throw hand shake like real RPS */
@keyframes rpsShake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-14px) rotate(-2deg); }
  40% { transform: translateY(0) rotate(0deg); }
  60% { transform: translateY(-12px) rotate(2deg); }
  80% { transform: translateY(0) rotate(0deg); }
}
.arena.countdown .user-hand span,
.arena.countdown .ai-hand span {
  animation: rpsShake 300ms ease-in-out 3;
  transform-origin: bottom center;
}
.arena.countdown .vs { animation: pulseVs 900ms ease; }

.arena.playing .vs { animation: pulseVs 600ms ease; }
.arena.playing .user-hand span { animation: flipReveal 300ms ease, shake 500ms ease 100ms; transform-origin: bottom center; }
.arena.playing .ai-hand span { animation: flipReveal 300ms ease 120ms both, shake 500ms ease 200ms; transform-origin: bottom center; }