:root {
  --bg-dark: #1d1738;
  --top-card: rgba(35, 23, 46, 0.96);
  --wood-overlay: rgba(59, 20, 0, 0.18);
  --text: #f5f7ff;
  --muted: #c9cbda;
  --green: #34d710;
  --green-2: #2cc00f;
  --panel: #7f9aad;
  --panel-dark: #50616f;
  --chip: #111216;
  --chip-line: #39353f;
  --danger: #ff6b7c;
  --win: #4cff83;
  --tie: #ffd36a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); font-family: Tahoma, Arial, sans-serif; background: #160f2d; }
.rps-shell { min-height: 100dvh; background: linear-gradient(180deg, rgba(26, 16, 46, 0.95), rgba(20, 12, 34, 0.98)); }
.topbar { height: 62px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; padding: 0 12px; gap: 12px; background: #221739; border-bottom: 1px solid rgba(255,255,255,0.08); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.11); color: #fff; font-size: 18px; line-height: 1; }
.logo-wrap { display: grid; place-items: center; }
.logo-wrap img { height: 40px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.contact-btn { background: #1f78f0; border: 0; color: #fff; font-weight: 700; border-radius: 12px; height: 38px; padding: 0 14px; font-size: 14px; }
.meta-row { background: #2a1a2f; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(0,0,0,0.25); padding: 6px 8px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 6px; }
.meta-cell { height: 18px; border-radius: 4px; background: rgba(135, 76, 39, 0.55); }
.clock { font-size: 13px; color: #dad9e5; display: grid; place-items: center; padding-inline: 10px; }
.board { position: relative; min-height: calc(100dvh - 62px - 30px); padding: 12px 12px 182px; background: linear-gradient(var(--wood-overlay), var(--wood-overlay)), url('./background.jpg') center/cover no-repeat; }
.odds-wrap { width: min(620px, 100%); margin: 0 auto; display: grid; grid-template-columns: 34px 1fr 34px; gap: 7px; align-items: center; }
.odds-arrow { height: 42px; border: 0; border-radius: 10px; background: rgba(59, 36, 29, 0.9); color: #fff; font-size: 24px; }
.odds-strip { background: rgba(17, 13, 16, 0.88); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.odd { text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.odd:last-child { border-right: 0; }
.odd .step { font-size: 13px; color: #d5d8e6; line-height: 1.1; }
.odd .mx { font-size: 15px; color: #fff; font-weight: 700; line-height: 1.2; }
.stage { width: min(620px, 100%); margin: 12px auto 0; position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.hand { position: absolute; width: 48%; max-width: 240px; height: auto; top: 16px; filter: drop-shadow(0 12px 12px rgba(0,0,0,0.32)); transform-origin: top center; transition: transform .2s ease; }
.hand.left { left: 6%; }
.hand.right { right: 6%; }
.stage.playing .hand.left { animation: hitL .45s ease; }
.stage.playing .hand.right { animation: hitR .45s ease; }
@keyframes hitL { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(10px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0deg); } }
@keyframes hitR { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(10px) rotate(6deg); } 100% { transform: translateY(0) rotate(0deg); } }

/* Hand choice animations based on skeleton data */
.hand.chosen {
  filter: drop-shadow(0 12px 12px rgba(0,0,0,0.32)) drop-shadow(0 0 8px rgba(52, 215, 16, 0.4));
}

.hand[data-choice="rock"] {
  clip-path: polygon(0% 30%, 15% 20%, 30% 25%, 40% 15%, 50% 18%, 55% 25%, 60% 20%, 75% 30%, 100% 35%, 100% 100%, 0% 100%);
}

.hand[data-choice="paper"] {
  clip-path: polygon(0% 20%, 20% 15%, 40% 12%, 60% 10%, 80% 15%, 100% 20%, 100% 100%, 0% 100%);
}

.hand[data-choice="scissors"] {
  clip-path: polygon(10% 20%, 25% 15%, 40% 18%, 50% 10%, 60% 18%, 75% 15%, 90% 20%, 95% 35%, 100% 40%, 100% 100%, 0% 100%, 5% 40%);
}

/* Spine animation states */
.hand[data-animation="closing_ball_L"] {
  animation: spineClosed 0.4s ease-in-out forwards;
}

.hand[data-animation="showing_ball_L"] {
  animation: spineOpen 0.4s ease-in-out forwards;
}

.hand[data-animation="hover-L"] {
  animation: spineHover 0.5s ease-in-out forwards;
}

@keyframes spineClosed {
  0% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes spineOpen {
  0% { opacity: 0.8; transform: scale(0.95); }
  50% { opacity: 0.95; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes spineHover {
  0%, 100% { filter: drop-shadow(0 8px 8px rgba(0,0,0,0.3)); }
  50% { filter: drop-shadow(0 12px 12px rgba(0,0,0,0.4)) drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
}
.pick-labels { display: none; }
.pick { text-align: center; background: rgba(12,11,13,0.72); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 6px 9px; font-size: 16px; font-weight: 700; }
.vs { font-size: 19px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.bottom-panel { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(430px, calc(100% - 22px)); z-index: 100; }
.bet-title { margin: 0 auto 9px; width: min(350px, 100%); text-align: center; background: #161113; border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px; font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.stake-row { margin: 0 auto 9px; width: min(350px, 100%); background: linear-gradient(180deg, #95a9b8, #6e8698); border: 2px solid #93a8b6; box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 5px 14px rgba(0,0,0,.28); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.stake-btn { border: 0; border-radius: 10px; background: linear-gradient(180deg, #9cb2c1, #6f8492); color: #2f3c45; font-size: 22px; font-weight: 800; }
.bet-input-wrap { display: flex; align-items: center; background: #060607; border-radius: 9px; border: 1px solid #1f2125; padding: 0 9px; gap: 7px; }
.bet-input-wrap .dollar { font-size: 22px; font-weight: 800; color: #fff; }
.bet-input { width: 100%; height: 40px; border: 0; outline: none; background: transparent; color: #fff; font-size: 26px; font-weight: 700; }
.bet-main { margin: 0 auto 7px; width: min(350px, 100%); height: 56px; border: 0; border-radius: 14px; background: linear-gradient(96deg, var(--green), #28c308 70%, #44e61f); color: #fff; font-size: 32px; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.25); box-shadow: inset 0 -6px 0 rgba(0,0,0,.16), 0 7px 16px rgba(0,0,0,.3); }
#wrapper-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: inherit;
  opacity: 1;
  z-index: 2;
}
.result { margin: 6px auto 0; width: min(350px, 100%); min-height: 24px; text-align: center; font-size: 15px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.result.win { color: var(--win); }
.result.loss { color: var(--danger); }
.result.tie { color: var(--tie); }
.footer-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: rgba(50, 20, 22, 0.95); border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 12px; font-weight: 700; }
.footer-strip .left img { height: 26px; vertical-align: middle; margin-inline-end: 8px; }
@media (max-width: 900px) {
  .odd .step { font-size: 12px; }
  .odd .mx { font-size: 14px; }
  .stage { min-height: 520px; }
  .hand { width: 50%; max-width: 200px; top: 12px; }
  .pick-labels { display: none; }
  .bet-title { font-size: 26px; padding: 10px; }
  .stake-btn { font-size: 24px; }
  .bet-input-wrap .dollar { font-size: 24px; }
  .bet-input { font-size: 24px; height: 44px; }
  .bet-main { height: 68px; font-size: 34px; }
  #wrapper-canvas { max-height: none; }
  .result { font-size: 17px; }
  .footer-strip { font-size: 14px; height: 40px; }
}

@media (max-width: 640px) {
  .topbar {
    height: 56px;
    grid-template-columns: 44px 1fr auto;
    padding: 0 8px;
    gap: 8px;
  }
  .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .logo-wrap img { height: 34px; }
  .contact-btn {
    height: 34px;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 10px;
  }
  .meta-row {
    grid-template-columns: 1fr 1fr auto;
    gap: 4px;
    padding: 5px 6px;
  }
  .meta-cell:nth-child(3),
  .meta-cell:nth-child(4) { display: none; }
  .clock { font-size: 12px; padding-inline: 6px; }
  .board { min-height: calc(100dvh - 56px - 30px); padding: 8px 7px 164px; }
  .odds-wrap {
    grid-template-columns: 30px 1fr 30px;
    gap: 5px;
  }
  .odds-arrow {
    height: 38px;
    font-size: 24px;
    border-radius: 9px;
  }
  .odds-strip {
    padding: 6px;
    gap: 4px;
    border-radius: 9px;
  }
  .odd .step { font-size: 10px; }
  .odd .mx { font-size: 11px; }
  .stage { min-height: 360px; margin-top: 8px; }
  .hand { width: 52%; max-width: 190px; top: 4px; }
  .pick-labels { top: auto; bottom: 72px; width: 100%; gap: 4px; }
  .pick { font-size: 11px; padding: 4px 6px; }
  .vs { font-size: 13px; }
  .bottom-panel { width: calc(100% - 10px); bottom: 6px; }
  .bet-title { width: 100%; font-size: 15px; padding: 6px; border-radius: 10px; margin-bottom: 6px; }
  .stake-row { width: 100%; grid-template-columns: 48px 1fr 48px; gap: 6px; padding: 6px; margin-bottom: 6px; }
  .stake-btn { font-size: 15px; border-radius: 8px; }
  .bet-input-wrap { border-radius: 7px; padding: 0 6px; }
  .bet-input-wrap .dollar { font-size: 14px; }
  .bet-input { font-size: 15px; height: 30px; }
  .bet-main { width: 100%; height: 42px; font-size: 21px; border-radius: 10px; }
  #wrapper-canvas { width: 100%; max-height: 92px; border-radius: 7px; }
  .result { width: 100%; margin-top: 5px; min-height: 18px; font-size: 11px; }
  .footer-strip {
    height: 30px;
    padding: 0 8px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
  }
  .footer-strip .left img { height: 14px; margin-inline-end: 4px; }
}