/* PATH: /public/css/games/rps.css */
:root{
  --vx-casino-green:#0f766e;
  --vx-casino-green-2:#115e59;
  --vx-casino-gold:#f59e0b;
  --vx-casino-ink:#0f172a;
}

#roomStateWrap{
  display: none !important;
}

.vx-room-screen{
  display:grid;
  gap:14px;
}

.vx-room-mode .vx-bottomnav{
  display: none !important;
}

.vx-room-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  background:
    radial-gradient(140% 95% at 110% -10%, rgba(245,158,11,.2), transparent 55%),
    radial-gradient(120% 85% at -10% 110%, rgba(20,184,166,.2), transparent 58%),
    linear-gradient(170deg,#ffffff 0%,#f4f9ff 100%);
  box-shadow:0 18px 38px rgba(15,23,42,.11);
}

.vx-room-card::before{
  content:"";
  position:absolute;
  inset:-55% -35% auto;
  height:250px;
  background:conic-gradient(from 180deg, rgba(16,185,129,.14), rgba(245,158,11,.1), rgba(14,165,233,.14), rgba(16,185,129,.14));
  filter:blur(32px);
  pointer-events:none;
  animation:vxRoomGlow 8s linear infinite;
}

.vx-hud{
  border-radius:18px;
  border:1px solid rgba(14,116,144,.2);
  background:linear-gradient(130deg, rgba(15,118,110,.12), rgba(14,165,233,.08));
  box-shadow:0 10px 24px rgba(8,47,73,.16);
  margin-top: 20px;
}

.vx-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.12);
}

.vx-room-players{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.vx-room-player{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.1);
  background:linear-gradient(160deg,#ffffff,#f2f7ff);
  padding:12px;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.vx-player-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.vx-player-head .min-w-0{
  flex: 1;
}

.vx-player-avatar{
  width:46px;
  height:46px;
  border-radius:14px;
  background:#0f172a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  overflow:hidden;
  box-shadow:0 8px 16px rgba(15,23,42,.2);
}

.vx-player-stats{
  display:flex;
  gap:8px;
}

.vx-player-stat{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.1);
  background:rgba(255,255,255,.9);
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}

.vx-player-actions{
  display:flex;
}

.vx-room-friendBtn{
  width:100%;
  border-radius:12px;
  font-weight:800;
}

#rpsBox{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  /* border:1px solid rgba(15,23,42,.12); */
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.9)),
    radial-gradient(100% 140% at 50% 0%, rgba(15,118,110,.15), rgba(15,118,110,.02));
  perspective:1300px;
}

/* #rpsBox::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  pointer-events:none;
} */

.rps-scoreboard{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
}

.rps-score{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.1);
  background:rgba(255,255,255,.92);
  padding:8px 10px;
  text-align:center;
}

.rps-score.vs{
  min-width:98px;
  font-weight:900;
  color:var(--vx-casino-ink);
  background:linear-gradient(145deg,#fef3c7,#fde68a);
  border-color:rgba(245,158,11,.45);
}

.rps-score.vs span{
  display:block;
  margin-top:2px;
  font-size:17px;
  letter-spacing:-.35px;
}

#rpsArena{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  transform-style:preserve-3d;
}

.vx-rps-hand{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.14);
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(14,165,233,.14), rgba(255,255,255,.96) 54%),
    linear-gradient(175deg,#ffffff,#edf5ff);
  padding:10px;
  text-align:center;
  box-shadow:0 14px 24px rgba(15,23,42,.12);
  transform-style:preserve-3d;
}

.vx-rps-hand.me{
  transform:rotateY(-14deg) rotateX(6deg);
  animation:vxHandIdleMe 2.4s ease-in-out infinite;
}

.vx-rps-hand.op{
  transform:rotateY(14deg) rotateX(6deg);
  animation:vxHandIdleOp 2.4s ease-in-out infinite;
}

.vx-rps-handIcon{
  height:92px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:50px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98), rgba(226,232,240,.92));
  border:1px solid rgba(148,163,184,.42);
  box-shadow:
    inset 0 -8px 14px rgba(148,163,184,.28),
    0 16px 20px rgba(148,163,184,.22);
  transform:translateZ(16px);
}

.vx-rps-vs{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(145deg,var(--vx-casino-green),var(--vx-casino-green-2));
  border:2px solid rgba(255,255,255,.45);
  box-shadow:
    0 14px 24px rgba(15,118,110,.32),
    inset 0 -4px 0 rgba(15,23,42,.2);
  transform:translateZ(24px);
}

#rpsArena.is-reveal .vx-rps-hand.me{
  animation:vxHandStrikeMe .7s cubic-bezier(.22,.83,.26,1);
}

#rpsArena.is-reveal .vx-rps-hand.op{
  animation:vxHandStrikeOp .7s cubic-bezier(.22,.83,.26,1);
}

#rpsBtns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.rps-btn{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  background:
    linear-gradient(180deg,#ffffff,#ecf4ff);
  box-shadow:
    inset 0 -4px 0 rgba(148,163,184,.38),
    0 10px 16px rgba(15,23,42,.09);
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.1px;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.rps-btn:hover{
  border-color:rgba(15,118,110,.55);
  box-shadow:0 12px 20px rgba(15,118,110,.22);
  transform:translateY(-1px);
}

.rps-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.rps-btn.is-picked{
  border-color:rgba(245,158,11,.72);
  background:linear-gradient(155deg,#fff7dd,#fef3c7);
  box-shadow:0 12px 22px rgba(245,158,11,.28);
}

.rps-ico{ font-size:22px; }

#rpsResult{
  border-radius:12px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.9);
  padding:10px;
}

.rps-win,
.rps-lose,
.rps-draw{
  font-weight:900;
  font-size:17px;
  letter-spacing:-.25px;
}

.rps-shake{
  animation:vxRpsShake .35s linear;
}

.vx-fx-float{
  position:fixed;
  left:50%;
  top:42%;
  transform:translate(-50%, -50%);
  z-index:1062;
  font-size:36px;
  pointer-events:none;
  animation:vxFxFloat .95s ease forwards;
}

.vx-room-chatDock{
  position:fixed;
  right:16px;
  bottom:102px;
  z-index:1061;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.vx-room-chatFab{
  position:relative;
  width:58px;
  height:58px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.34);
  background:linear-gradient(145deg,#0d9488,#0f766e);
  color:#fff;
  box-shadow:0 16px 24px rgba(15,118,110,.36);
}

.vx-room-chatFab i{ font-size:20px; }

.vx-room-chatFab.is-unread{
  animation:vxFabPulse 1.2s ease infinite;
}

.vx-room-chatPanel{
  width:min(94vw, 368px);
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:linear-gradient(180deg,#ffffff,#f0f9ff);
  box-shadow:0 18px 30px rgba(15,23,42,.18);
  padding:10px;
}

#chatMiniBar{
  padding:2px;
}

#emojiQuick button{
  border:1px solid rgba(148,163,184,.28);
  border-radius:10px;
  background:#fff;
}

.vx-room-chatPanel .btn-light{
  border:1px solid rgba(148,163,184,.32);
  background:#fff;
}

.vx-chat-box{
  height:190px;
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.92);
  padding:8px;
}

.vx-chat-line{
  font-size:13px;
  color:#0f172a;
  margin-bottom:6px;
  word-break:break-word;
}

.vx-chat-line b{ color:#0f766e; }

.vx-emoji-fx{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.6);
  font-size:72px;
  line-height:1;
  pointer-events:none;
  z-index:3000;
  text-shadow:
    0 10px 30px rgba(15,23,42,.25),
    0 0 24px rgba(255,255,255,.85);
  animation:vxEmojiCenter 1.35s ease forwards;
}

@keyframes vxRoomGlow{
  from{ transform:translateX(-8%) rotate(0deg); }
  to{ transform:translateX(8%) rotate(360deg); }
}

@keyframes vxHandIdleMe{
  0%,100%{ transform:rotateY(-14deg) rotateX(6deg) translateY(0); }
  50%{ transform:rotateY(-14deg) rotateX(8deg) translateY(-2px); }
}

@keyframes vxHandIdleOp{
  0%,100%{ transform:rotateY(14deg) rotateX(6deg) translateY(0); }
  50%{ transform:rotateY(14deg) rotateX(8deg) translateY(-2px); }
}

@keyframes vxHandStrikeMe{
  0%{ transform:rotateY(-14deg) rotateX(6deg) translateZ(0); }
  45%{ transform:rotateY(-6deg) rotateX(11deg) translateZ(24px); }
  100%{ transform:rotateY(-14deg) rotateX(6deg) translateZ(0); }
}

@keyframes vxHandStrikeOp{
  0%{ transform:rotateY(14deg) rotateX(6deg) translateZ(0); }
  45%{ transform:rotateY(6deg) rotateX(11deg) translateZ(24px); }
  100%{ transform:rotateY(14deg) rotateX(6deg) translateZ(0); }
}

@keyframes vxRpsShake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  50%{ transform:translateX(5px); }
  75%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}

@keyframes vxFxFloat{
  0%{ opacity:0; transform:translate(-50%,-28%) scale(.55); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-105%) scale(1.24); }
}

@keyframes vxFabPulse{
  0%{ box-shadow:0 16px 24px rgba(15,118,110,.36), 0 0 0 0 rgba(15,118,110,.34); }
  70%{ box-shadow:0 16px 24px rgba(15,118,110,.36), 0 0 0 16px rgba(15,118,110,0); }
  100%{ box-shadow:0 16px 24px rgba(15,118,110,.36), 0 0 0 0 rgba(15,118,110,0); }
}

@keyframes vxEmojiCenter{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(.5); }
  20%{ opacity:1; transform:translate(-50%, -52%) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -66%) scale(1.24); }
}

@media (max-width: 760px){
  /* .vx-room-players{ grid-template-columns:1fr; } */
  #rpsArena{ gap:8px; }
  .vx-rps-handIcon{ height:78px; font-size:42px; }
  /* #rpsBtns{ grid-template-columns:1fr; } */
  .vx-room-chatDock{ right:10px; bottom:92px; }
  .vx-emoji-fx{ font-size:62px; }
}