/* Partida: canvas a pantalla completa y HUD encima (en el escenario escalado). */

.gamecanvas { position: absolute; left: 0; top: 0; touch-action: none; }
body.ingame #bg { background: radial-gradient(ellipse 75% 70% at 50% 55%, #1a2a3a 0%, #0b1320 60%, #05080f 100%); }
.game-screen { pointer-events: none; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud button, .hud .tube, .hud .wheel, .hud .chatmenu { pointer-events: auto; }

/* Jugadores */
.pcard { position: absolute; top: 5px; display: flex; align-items: flex-start; gap: 9px; }
.pcard.left { left: 10px; }
.pcard.right { right: 58px; flex-direction: row-reverse; }
.pcard .av.big { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.pcard .ring { position: absolute; left: -4px; top: -4px; width: 48px; height: 48px; overflow: visible; }
.pcard .ring .rp { transition: stroke .3s; }
.pcard .av .star { left: -8px; bottom: -8px; }
.pcard.right .av .star { left: auto; right: -8px; }
.pcard .pinfo { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.pcard.right .pinfo { align-items: flex-end; }
.pname { font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.9); display: flex; align-items: center; gap: 5px; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.botbadge { font-size: 8px; font-weight: 900; padding: 1px 4px; border-radius: 3px; background: #3a4a66; color: #cfe2ff; letter-spacing: .5px; }
.pgroups { display: flex; gap: 2px; }
.pgroups img { width: 16px; height: 16px; }
.pgroups img.off { opacity: .2; filter: grayscale(1); }
.pgroups .slot { width: 14px; height: 14px; margin: 1px; border-radius: 50%; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.pcard.turn .av.big { box-shadow: 0 0 14px rgba(70,224,90,.55), 0 2px 6px rgba(0,0,0,.6); }
.bubble { position: absolute; top: 48px; left: 0; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.96); color: #0b2458; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.5); animation: pop .2s; }
.pcard.right .bubble { left: auto; right: 0; }

.pot { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); min-width: 104px; height: 28px; padding: 0 14px 0 30px; border-radius: 14px; background: linear-gradient(#0b1a3a, #050d20); box-shadow: inset 0 0 0 1px rgba(255,210,80,.6), 0 2px 6px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pot img { position: absolute; left: -6px; top: -2px; width: 32px; height: 32px; }

.spinbtn { position: absolute; right: 8px; top: 5px; width: 42px; height: 42px; border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.spinbtn img { width: 42px; height: 42px; display: block; }
.spindot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #d8201a 60%, #8a0e08); }

/* Potencia y ajuste fino */
.power, .fine { position: absolute; top: 58px; bottom: 50px; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.power { left: 12px; }
.fine { right: 12px; bottom: 58px; }
.hud .cap { font-size: 8.5px; font-weight: 800; color: rgba(255,255,255,.65); letter-spacing: .8px; }
.tube, .wheel { position: relative; flex: 1; width: 38px; border-radius: 10px; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(20,30,50,.4) 50%, rgba(0,0,0,.6)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.6); touch-action: none; cursor: ns-resize; }
.pfill { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 0; border-radius: 7px; background: linear-gradient(0deg, rgba(80,230,90,.7), rgba(255,210,50,.7) 60%, rgba(255,90,40,.8)); }
.pcue { position: absolute; left: 50%; top: 50%; width: 300px; height: 9px; margin: -4.5px 0 0 -150px; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); pointer-events: none; }
.pgloss { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,0) 40%); pointer-events: none; }
.hud:not(.myturn) .tube { opacity: .45; }
.ridges { position: absolute; left: 5px; right: 5px; top: 4px; bottom: 4px; border-radius: 14px; background: linear-gradient(90deg, #2f343c, #c9ced6 30%, #eef1f5 50%, #a8aeb8 72%, #2a2f37), repeating-linear-gradient(180deg, rgba(0,0,0,.6) 0 2px, rgba(0,0,0,0) 2px 7px); background-blend-mode: multiply; }
.wshade { position: absolute; left: 5px; right: 5px; top: 4px; bottom: 4px; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.85)); pointer-events: none; }
.hud:not(.myturn) .wheel { opacity: .45; }

.hud .chatbtn { position: absolute; right: 16px; bottom: 12px; width: 36px; height: 36px; }
.hud .menubtn { position: absolute; left: 16px; bottom: 10px; width: 36px; height: 34px; }
.chatmenu { position: absolute; right: 60px; bottom: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; z-index: 5; }
.chatmenu .btn { min-height: 30px; font-size: 11px; text-transform: none; }

.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); opacity: 0; padding: 10px 26px; border-radius: 10px; font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 2px 0 rgba(0,0,0,.45); background: rgba(4,17,43,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 20px rgba(0,0,0,.6); transition: opacity .2s, transform .2s; white-space: nowrap; pointer-events: none; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner.me { background: linear-gradient(#2f9a16, #1f6a0e); }
.banner.foul { background: linear-gradient(#e0382a, #9a160c); }
.banner.info { background: linear-gradient(#2a74dd, #154a9e); }
.gstatus { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: rgba(4,17,43,.9); font-size: 12px; font-weight: 800; }
.gstatus[hidden] { display: none; }

/* Selector de efecto */
.spinbox { display: flex; flex-direction: column; align-items: center; }
.sball { position: relative; border-radius: 50%; touch-action: none; cursor: crosshair; }
.sball img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); pointer-events: none; }
.sball .sv, .sball .sh { position: absolute; background: rgba(20,40,80,.28); pointer-events: none; }
.sball .sv { left: 50%; top: 8%; bottom: 8%; width: 2px; margin-left: -1px; }
.sball .sh { top: 50%; left: 8%; right: 8%; height: 2px; margin-top: -1px; }
.sball .szone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(20,40,80,.35); pointer-events: none; }
.sball .sdot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a8a, #e0261b 55%, #8a0e08); box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.55); pointer-events: none; }
/* Durante la partida el escenario deja pasar los toques al canvas, salvo controles y ventanas. */
body.ingame #stage { pointer-events: none; }
body.ingame .modal-bg, body.ingame .vs-intro { pointer-events: auto; }