/* =========================
   Throw! — Neo Glass RPS
   FULL UI + Cinematic motion
   Hands:
   - Neutral: slam-fist posture ✊
   - Reveal: Rock slam; Paper/Scissors upright (thumb UP) facing opponent
   - Left vs Right face each other cleanly (no weird mirrors)
   ========================= */

/* ---------- Variables ---------- */
:root{
  --bg0: #0b0f1a;
  --bg1: #101a2f;
  --bg2: #0e1322;

  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.12);
  --stroke2: rgba(255,255,255,0.18);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --shadow: 0 18px 50px rgba(0,0,0,0.45);
  --shadow2: 0 10px 24px rgba(0,0,0,0.35);
  --glow: 0 0 0 1px rgba(255,255,255,0.08), 0 14px 40px rgba(0,0,0,0.35);

  --accentA: rgba(255, 63, 172, 0.60);
  --accentB: rgba(0, 255, 255, 0.45);
  --accentC: rgba(255, 204, 51, 0.45);

  --radius: 26px;
  --radius2: 18px;

  --trans: 260ms cubic-bezier(.2,.9,.2,1);

  /* Slam/Realism tuning */
  --slam-base-rot: 92deg;      /* slam posture angle */
  --slam-inward-tilt: 16deg;   /* face toward center */
  --slam-bounce: 10px;         /* shake bounce distance */

  /* Paper/Scissors “real hand” angle:
     Keep thumb UP and face opponent */
  --upright-tilt: 12deg;
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg0: #eef3ff;
  --bg1: #f7fbff;
  --bg2: #e8eefb;

  --card: rgba(255,255,255,0.70);
  --card2: rgba(255,255,255,0.78);
  --stroke: rgba(0,0,0,0.10);
  --stroke2: rgba(0,0,0,0.14);

  --text: rgba(10,12,18,0.92);
  --muted: rgba(10,12,18,0.58);

  --shadow: 0 18px 50px rgba(10,12,18,0.14);
  --shadow2: 0 10px 24px rgba(10,12,18,0.12);
  --glow: 0 0 0 1px rgba(0,0,0,0.06), 0 14px 40px rgba(10,12,18,0.12);

  --accentA: rgba(122, 39, 255, 0.25);
  --accentB: rgba(0, 170, 255, 0.22);
  --accentC: rgba(255, 170, 0, 0.18);
}

/* ---------- Resets ---------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  overflow-x: hidden;
}

/* ---------- Ambient background ---------- */
.bg{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 900px at 20% 10%, var(--bg1), transparent 60%),
    radial-gradient(900px 800px at 90% 30%, var(--bg2), transparent 55%),
    radial-gradient(1100px 900px at 50% 120%, var(--bg0), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  z-index:-2;
}
.blob{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: drift 12s ease-in-out infinite;
}
html[data-theme="light"] .blob{ mix-blend-mode: multiply; opacity: 0.45; }

.b1{ left:-120px; top:-140px; background: radial-gradient(circle at 30% 30%, var(--accentB), transparent 60%); }
.b2{ right:-180px; top:80px; background: radial-gradient(circle at 30% 30%, var(--accentA), transparent 60%); animation-delay:-3s; }
.b3{ left:18%; bottom:-220px; background: radial-gradient(circle at 30% 30%, var(--accentC), transparent 65%); animation-delay:-6s; }

@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px, -28px) scale(1.06); }
}

.grain{
  position:absolute;
  inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:-1;
}

/* ---------- Layout ---------- */
.wrap{
  min-height:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px 18px;
  gap: 18px;
}

/* ---------- Card ---------- */
.card{
  width: min(720px, 94vw);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-color: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 260px at 30% 10%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(520px 260px at 70% 0%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events:none;
}

/* ---------- Top bar ---------- */
.topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;
  padding: 6px 6px 14px;
}

.scorebox{
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 12px 14px;
  box-shadow: var(--glow);
  min-height: 70px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 2px;
}
.scorebox.right{ text-align:right; }

.label{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.score{
  font-size: 44px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.controls{
  display:flex;
  align-items:center;
  gap: 10px;
}

.iconbtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform var(--trans), background var(--trans), border-color var(--trans);
}
.iconbtn:hover{ transform: translateY(-2px); border-color: var(--stroke2); }
.iconbtn:active{ transform: translateY(0px) scale(0.98); }

.resetbtn{
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-weight: 650;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform var(--trans), border-color var(--trans), background var(--trans);
}
.resetbtn:hover{ transform: translateY(-2px); border-color: var(--stroke2); }
.resetbtn:active{ transform: translateY(0px) scale(0.99); }
.resetbtn:disabled{ opacity: 0.55; cursor:not-allowed; transform:none; }

/* ---------- Arena ---------- */
.arena{ padding: 12px 6px 6px; }

.handStage{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 16px;
  padding: 10px 4px 6px;
}

.handWrap{
  position: relative;
  height: 150px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--glow);
  display:grid;
  place-items:center;
  overflow:hidden;
  will-change: transform;
  transform: translateZ(0);
}

/* Shadow */
.handShadow{
  position:absolute;
  bottom: 26px;
  width: 120px;
  height: 26px;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.55), transparent 70%);
  opacity: 0.32;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity var(--trans), transform var(--trans);
}
html[data-theme="light"] .handShadow{
  background: radial-gradient(circle at 50% 40%, rgba(10,12,18,0.30), transparent 72%);
  opacity: 0.22;
}

/* Hand layers */
.handLayer{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 74px;
  line-height: 1;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.28));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  transition: opacity 140ms ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Crossfade */
.handLayer.neutral{ opacity: 1; }
.handLayer.reveal{ opacity: 0; }

/* ===== Neutral slam posture (both sides face inward) ===== */
.handWrap.left  .handLayer.neutral{
  transform: rotate(calc(var(--slam-base-rot) - var(--slam-inward-tilt))) translateY(2px);
}
.handWrap.right .handLayer.neutral{
  transform: rotate(calc(var(--slam-base-rot) * -1 + var(--slam-inward-tilt))) translateY(2px);
}

/* ===== Reveal posture (gesture-specific) ===== */
/* Rock: slam posture */
.handWrap.left  .handLayer.reveal[data-gesture="rock"]{
  transform: rotate(calc(var(--slam-base-rot) - var(--slam-inward-tilt))) translateY(2px);
}
.handWrap.right .handLayer.reveal[data-gesture="rock"]{
  transform: rotate(calc(var(--slam-base-rot) * -1 + var(--slam-inward-tilt))) translateY(2px);
}

/* Paper & Scissors: upright, thumb UP toward opponent */
.handWrap.left  .handLayer.reveal[data-gesture="paper"],
.handWrap.left  .handLayer.reveal[data-gesture="scissors"]{
  transform: rotate(calc(var(--upright-tilt) * -1)) translateY(0px);
}
.handWrap.right .handLayer.reveal[data-gesture="paper"],
.handWrap.right .handLayer.reveal[data-gesture="scissors"]{
  transform: rotate(var(--upright-tilt)) translateY(0px);
}

/* Reveal state class (used by JS) */
.handWrap.showReveal .handLayer.neutral{ opacity: 0; }
.handWrap.showReveal .handLayer.reveal{
  opacity: 1;
  animation: revealPop 220ms cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes revealPop{
  0%{ opacity: 0.85; filter: blur(1px) drop-shadow(0 14px 18px rgba(0,0,0,0.20)); }
  100%{ opacity: 1; filter: blur(0) drop-shadow(0 14px 18px rgba(0,0,0,0.28)); }
}

/* VS */
.vsWrap{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  min-width: 90px;
}
.vsChip{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--stroke);
  box-shadow: var(--glow);
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .08em;
  will-change: transform;
}
.sub{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* Result */
.resultCard{
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--glow);
  padding: 14px 16px;
  min-height: 82px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 6px;
  transform: translateZ(0);
}

.resultTitle{
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .02em;
}
.resultLine{
  color: var(--muted);
  font-size: 14px;
}

/* Choices */
.choices{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 6px 6px;
}

.choice{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--glow);
  padding: 14px 10px 12px;
  cursor:pointer;
  transition: transform var(--trans), border-color var(--trans), background var(--trans), box-shadow var(--trans);
  position: relative;
  overflow:hidden;
  user-select:none;
}

.choice::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: translateX(-120%);
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
}
.choice:hover{
  transform: translateY(-4px);
  border-color: var(--stroke2);
}
.choice:hover::before{ transform: translateX(120%); }
.choice:active{ transform: translateY(-1px) scale(0.99); }

.choiceIcon{
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.24));
}
.choiceLabel{
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 850;
  color: var(--muted);
}

.choice.selected{
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 16px 44px rgba(0,0,0,0.40);
}
html[data-theme="light"] .choice.selected{
  border-color: rgba(10,12,18,0.20);
}

.choice:disabled{
  opacity: 0.55;
  cursor:not-allowed;
  transform:none;
}
.choice.shakeDenied{
  animation: denied 360ms ease-out 1;
}
@keyframes denied{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}

/* VS pulse */
.isShaking .vsChip{ animation: pulse 620ms ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

/* Shadow intensifies */
.isShaking .handShadow,
.isWindup .handShadow{
  opacity: 0.42;
  transform: translateY(6px);
}

/* Slam-like bounce */
.isShaking .handWrap.left,
.isShaking .handWrap.right{
  animation: slamShake 420ms ease-in-out infinite;
}
@keyframes slamShake{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(var(--slam-bounce)); }
}

.isWindup .handWrap.left,
.isWindup .handWrap.right{
  animation: slamWindup 300ms ease-in-out infinite;
}
@keyframes slamWindup{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* Score tick */
.scoreTick{ animation: scoreTick 280ms cubic-bezier(.2,.9,.2,1) 1; }
@keyframes scoreTick{
  0%{ transform: translateY(6px) scale(0.98); opacity: 0.8; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Footer */
.footer{
  width: min(720px, 94vw);
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 8px 10px 16px;
}

/* Modal */
.modalOverlay{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
}
.modalOverlay.show{ display:flex; }

.modal{
  width: min(520px, 94vw);
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  animation: modalIn 220ms cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes modalIn{
  0%{ transform: translateY(10px) scale(0.98); opacity: 0.0; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 8px;
}
.modalTitle{
  font-weight: 900;
  font-size: 18px;
}
.modalBody{
  color: var(--muted);
  padding: 4px 4px 12px;
  line-height: 1.4;
}
.modalActions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  padding: 6px 4px 4px;
}

.btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-weight: 750;
  cursor:pointer;
  transition: transform var(--trans), border-color var(--trans), background var(--trans);
}
.btn:hover{ transform: translateY(-2px); border-color: var(--stroke2); }
.btn:active{ transform: translateY(0) scale(0.99); }
.btn.ghost{ background: rgba(255,255,255,0.06); }
.btn.danger{
  border-color: rgba(255,74,74,0.40);
  background: rgba(255,74,74,0.14);
}
.btn.danger:hover{ border-color: rgba(255,74,74,0.55); }

/* Responsive */
@media (max-width: 520px){
  .score{ font-size: 40px; }
  .handLayer{ font-size: 66px; }
  .handWrap{ height: 140px; }
  .choices{ gap: 10px; }
}