/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --bg:#06060e; --surface:#0c0c1e; --cyan:#00f5ff; --pink:#ff006e;
  --gold:#ffd60a; --green:#00ff88; --white:#ffffff;
  --dim:rgba(255,255,255,0.45); --card:rgba(12,12,30,0.92);
  --skin-light:#ffd5b0; --skin-mid:#e8a070; --skin-dark:#c07040;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--white);font-family:'Rajdhani',sans-serif;font-weight:500;user-select:none;cursor:default;}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);pointer-events:none;z-index:9999;}
#bg-canvas{position:fixed;inset:0;z-index:0;}
.corner{position:fixed;width:50px;height:50px;z-index:8;}
.corner-tl{top:16px;left:16px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);}
.corner-tr{top:16px;right:16px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);}
.corner-bl{bottom:16px;left:16px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan);}
.corner-br{bottom:16px;right:16px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);}

/* ============================================================
   SCREEN SYSTEM
   ============================================================ */
.screen{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .55s cubic-bezier(0.4,0,0.2,1);}
.screen.active{opacity:1;pointer-events:all;}

/* ============================================================
   INTRO SCREEN
   ============================================================ */
#intro-screen{background:#000;z-index:100;gap:24px;}
.intro-stage{position:relative;width:520px;height:280px;display:flex;align-items:center;justify-content:center;}
.fighter{position:absolute;font-size:96px;line-height:1;opacity:0;will-change:transform;top:50%;left:50%;}
#f-rock{transform:translate(calc(-50% - 350px),-50%) rotate(-180deg) scale(0.2);filter:drop-shadow(0 0 24px #00f5ff);animation:rIn .9s .2s cubic-bezier(.175,.885,.32,1.275) forwards,rClash .5s 1.4s ease-in-out forwards,rOut .35s 2s ease-in forwards;}
#f-scissors{transform:translate(calc(-50% + 350px),-50%) rotate(180deg) scale(0.2);filter:drop-shadow(0 0 24px #ff006e);animation:sIn .9s .4s cubic-bezier(.175,.885,.32,1.275) forwards,sClash .5s 1.4s ease-in-out forwards,sOut .35s 2s ease-in forwards;}
#f-paper{transform:translate(-50%,calc(-50% - 350px)) rotate(90deg) scale(0.2);filter:drop-shadow(0 0 24px #ffd60a);animation:pIn .9s .6s cubic-bezier(.175,.885,.32,1.275) forwards,pClash .5s 1.4s ease-in-out forwards,pOut .35s 2s ease-in forwards;}
@keyframes rIn{from{opacity:0;transform:translate(calc(-50% - 350px),-50%) rotate(-180deg) scale(.2)}to{opacity:1;transform:translate(calc(-50% - 150px),-50%) rotate(0deg) scale(1)}}
@keyframes sIn{from{opacity:0;transform:translate(calc(-50% + 350px),-50%) rotate(180deg) scale(.2)}to{opacity:1;transform:translate(calc(-50% + 150px),-50%) rotate(0deg) scale(1)}}
@keyframes pIn{from{opacity:0;transform:translate(-50%,calc(-50% - 350px)) rotate(90deg) scale(.2)}to{opacity:1;transform:translate(-50%,calc(-50% - 80px)) rotate(0deg) scale(1)}}
@keyframes rClash{0%{transform:translate(calc(-50% - 150px),-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.6);filter:drop-shadow(0 0 80px #fff) brightness(4)}100%{transform:translate(calc(-50% - 150px),-50%) scale(1)}}
@keyframes sClash{0%{transform:translate(calc(-50% + 150px),-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.6);filter:drop-shadow(0 0 80px #fff) brightness(4)}100%{transform:translate(calc(-50% + 150px),-50%) scale(1)}}
@keyframes pClash{0%{transform:translate(-50%,calc(-50% - 80px)) scale(1)}50%{transform:translate(-50%,-50%) scale(1.6);filter:drop-shadow(0 0 80px #fff) brightness(4)}100%{transform:translate(-50%,calc(-50% - 80px)) scale(1)}}
@keyframes rOut{to{opacity:0;transform:translate(calc(-50% - 500px),calc(-50% + 300px)) scale(0) rotate(720deg)}}
@keyframes sOut{to{opacity:0;transform:translate(calc(-50% + 500px),calc(-50% + 300px)) scale(0) rotate(-720deg)}}
@keyframes pOut{to{opacity:0;transform:translate(-50%,calc(-50% - 500px)) scale(0) rotate(360deg)}}
.clash-burst{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#fff 0%,#ffd60a 30%,#ff006e 60%,transparent 80%);animation:burst .7s 1.65s forwards;}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}40%{opacity:1;transform:translate(-50%,-50%) scale(20)}100%{opacity:0;transform:translate(-50%,-50%) scale(40)}}
.sw{position:absolute;top:50%;left:50%;border-radius:50%;opacity:0;}
.sw:nth-child(1){width:60px;height:60px;border:3px solid var(--cyan);margin-top:-30px;margin-left:-30px;animation:sw .9s 1.7s ease-out forwards}
.sw:nth-child(2){width:60px;height:60px;border:3px solid var(--pink);margin-top:-30px;margin-left:-30px;animation:sw .9s 1.82s ease-out forwards}
.sw:nth-child(3){width:60px;height:60px;border:3px solid var(--gold);margin-top:-30px;margin-left:-30px;animation:sw .9s 1.94s ease-out forwards}
@keyframes sw{from{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(12)}}
.intro-title-area{text-align:center;}
.intro-title{font-family:'Black Ops One',sans-serif;font-size:92px;letter-spacing:10px;line-height:1;background:linear-gradient(135deg,var(--cyan) 0%,#fff 40%,var(--pink) 70%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;filter:drop-shadow(0 0 40px var(--cyan));animation:titleIn 1.3s 2.4s cubic-bezier(.175,.885,.32,1.275) forwards;}
@keyframes titleIn{0%{opacity:0;transform:scale(.2) skewX(-30deg);letter-spacing:80px;filter:drop-shadow(0 0 120px var(--cyan)) blur(30px)}60%{opacity:1;transform:scale(1.08) skewX(3deg);letter-spacing:14px}100%{opacity:1;transform:scale(1) skewX(0);letter-spacing:10px;filter:drop-shadow(0 0 24px var(--cyan))}}
.intro-sub{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:6px;color:var(--dim);text-transform:uppercase;opacity:0;animation:fadeUp .8s 3.4s forwards;margin-top:10px;}
.intro-enter{margin-top:36px;padding:15px 64px;background:transparent;border:2px solid var(--cyan);color:var(--cyan);font-family:'Orbitron',sans-serif;font-size:15px;letter-spacing:4px;text-transform:uppercase;cursor:pointer;opacity:0;animation:fadeUp .8s 3.9s forwards,btnGlow 2s 3.9s infinite;clip-path:polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);transition:background .25s,color .25s,transform .2s;position:relative;overflow:hidden;}
.intro-enter::before{content:'';position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:-1;}
.intro-enter:hover{color:#000;transform:scale(1.06)}
.intro-enter:hover::before{transform:scaleX(1)}
@keyframes btnGlow{0%,100%{box-shadow:0 0 12px var(--cyan),inset 0 0 8px rgba(0,245,255,.1)}50%{box-shadow:0 0 40px var(--cyan),inset 0 0 20px rgba(0,245,255,.2)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   MENU SCREEN
   ============================================================ */
#menu-screen{gap:0;}
.menu-logo{font-family:'Black Ops One',sans-serif;font-size:56px;letter-spacing:8px;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 24px var(--cyan));text-align:center;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.menu-tag{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:5px;color:var(--dim);text-align:center;margin-top:10px;margin-bottom:44px;}
.mode-grid{display:flex;gap:20px;}
.mode-card{width:230px;padding:40px 26px 32px;background:var(--card);border:1px solid rgba(255,255,255,.08);cursor:pointer;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;clip-path:polygon(22px 0%,100% 0%,calc(100% - 22px) 100%,0% 100%);}
.mode-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,245,255,.06) 0%,transparent 50%);opacity:0;transition:opacity .3s;}
.mode-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--cyan);transform:scaleX(0);transition:transform .4s;transform-origin:left;}
.mode-card:nth-child(2)::after{background:var(--pink);}
.mode-card:nth-child(3)::after{background:var(--gold);}
.mode-card:hover{transform:translateY(-10px) scale(1.025);border-color:var(--cyan);box-shadow:0 20px 60px rgba(0,245,255,.15);}
.mode-card:nth-child(2):hover{border-color:var(--pink);box-shadow:0 20px 60px rgba(255,0,110,.15);}
.mode-card:nth-child(3):hover{border-color:var(--gold);box-shadow:0 20px 60px rgba(255,214,10,.15);}
.mode-card:hover::before{opacity:1;}
.mode-card:hover::after{transform:scaleX(1);}
.mode-badge{position:absolute;top:14px;right:-6px;background:var(--cyan);color:#000;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:900;padding:4px 14px 4px 10px;letter-spacing:1.5px;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%,8px 50%);}
.mode-card:nth-child(2) .mode-badge{background:var(--pink);}
.mode-card:nth-child(3) .mode-badge{background:var(--gold);}
.mode-icon{font-size:52px;display:block;margin-bottom:18px;}
.mode-card:nth-child(1) .mode-icon{filter:drop-shadow(0 0 16px var(--cyan));}
.mode-card:nth-child(2) .mode-icon{filter:drop-shadow(0 0 16px var(--pink));}
.mode-card:nth-child(3) .mode-icon{filter:drop-shadow(0 0 16px var(--gold));}
.mode-name{font-family:'Black Ops One',sans-serif;font-size:17px;letter-spacing:2px;margin-bottom:10px;}
.mode-desc{font-size:13px;color:var(--dim);line-height:1.55;}

/* ============================================================
   SETUP SCREEN
   ============================================================ */
#setup-screen{gap:36px;}
.setup-title{font-family:'Black Ops One',sans-serif;font-size:34px;letter-spacing:4px;color:var(--cyan);filter:drop-shadow(0 0 18px var(--cyan));}
.setup-form{display:flex;flex-direction:column;gap:18px;min-width:420px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-label{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:var(--dim);}
.neon-input{background:rgba(0,245,255,.03);border:1px solid rgba(0,245,255,.18);color:var(--white);padding:13px 18px;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:600;letter-spacing:2px;outline:none;transition:border-color .3s,box-shadow .3s;width:100%;}
.neon-input:focus{border-color:var(--cyan);box-shadow:0 0 24px rgba(0,245,255,.2),inset 0 0 12px rgba(0,245,255,.05);}
.seg-btns{display:flex;gap:10px;}
.seg-btn{flex:1;padding:13px;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--dim);font-family:'Orbitron',sans-serif;font-size:13px;cursor:pointer;transition:all .25s;}
.seg-btn.active,.seg-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,245,255,.08);}
.seg-btn.active{background:rgba(0,245,255,.14);}
.action-btn{padding:15px 40px;border:none;cursor:pointer;font-family:'Black Ops One',sans-serif;font-size:17px;letter-spacing:3px;clip-path:polygon(16px 0%,100% 0%,calc(100% - 16px) 100%,0% 100%);transition:transform .2s,box-shadow .2s;}
.action-btn.cyan{background:linear-gradient(135deg,var(--cyan),#0088ff);color:#000;}
.action-btn.cyan:hover{transform:scale(1.05);box-shadow:0 0 36px rgba(0,245,255,.5);}
.action-btn.pink{background:linear-gradient(135deg,var(--pink),#880033);color:#fff;}
.action-btn.pink:hover{transform:scale(1.05);box-shadow:0 0 36px rgba(255,0,110,.5);}
.action-btn.gold{background:linear-gradient(135deg,var(--gold),#bb8800);color:#000;}
.action-btn.gold:hover{transform:scale(1.05);box-shadow:0 0 36px rgba(255,214,10,.5);}
.back-link{background:transparent;border:none;color:var(--dim);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;cursor:pointer;text-transform:uppercase;transition:color .25s;}
.back-link:hover{color:var(--white);}

/* ============================================================
   ONLINE / WAITING SCREENS
   ============================================================ */
#online-screen{gap:32px;}
.online-opts{display:flex;gap:24px;}
.online-opt{width:250px;padding:44px 30px 36px;background:var(--card);border:1px solid rgba(255,255,255,.08);text-align:center;cursor:pointer;transition:all .35s;clip-path:polygon(22px 0%,100% 0%,calc(100% - 22px) 100%,0% 100%);}
.online-opt:hover{border-color:var(--cyan);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,245,255,.15);}
.online-opt .oi{font-size:56px;display:block;margin-bottom:18px;}
.online-opt .on{font-family:'Black Ops One',sans-serif;font-size:20px;}
.online-opt .od{font-size:13px;color:var(--dim);margin-top:8px;line-height:1.4;}
.join-box{display:flex;flex-direction:column;gap:14px;align-items:center;}
.code-input{background:rgba(0,245,255,.03);border:1px solid rgba(0,245,255,.25);color:var(--cyan);padding:16px 24px;font-family:'Orbitron',sans-serif;font-size:36px;font-weight:700;letter-spacing:12px;text-align:center;text-transform:uppercase;outline:none;width:240px;transition:border-color .3s,box-shadow .3s;}
.code-input:focus{border-color:var(--cyan);box-shadow:0 0 30px rgba(0,245,255,.25);}
#waiting-screen{gap:20px;}
.wait-sub{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:4px;color:var(--dim);}
.room-code{font-family:'Black Ops One',sans-serif;font-size:80px;letter-spacing:20px;color:var(--cyan);filter:drop-shadow(0 0 36px var(--cyan));animation:codePulse 1.8s ease-in-out infinite;}
@keyframes codePulse{0%,100%{filter:drop-shadow(0 0 24px var(--cyan))}50%{filter:drop-shadow(0 0 64px var(--cyan)) brightness(1.4)}}
.wait-note{font-family:'Rajdhani',sans-serif;font-size:16px;color:var(--dim);}
.wait-dots{display:flex;gap:8px;margin-top:8px;}
.wait-dots span{width:12px;height:12px;border-radius:50%;background:var(--cyan);animation:dotBounce 1.2s infinite;}
.wait-dots span:nth-child(2){animation-delay:.2s}
.wait-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,80%,100%{transform:scale(.7);opacity:.3}40%{transform:scale(1.2);opacity:1}}

/* ============================================================
   GAME SCREEN
   ============================================================ */
#game-screen{gap:0;justify-content:flex-start;align-items:stretch;padding:0;}
.game-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 48px;border-bottom:1px solid rgba(0,245,255,.1);flex-shrink:0;gap:24px;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);}
.score-panel{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:180px;}
.pname{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:4px;color:var(--dim);}
.score-num{font-family:'Black Ops One',sans-serif;font-size:64px;line-height:1;color:var(--cyan);filter:drop-shadow(0 0 24px var(--cyan));transition:transform .2s;}
.score-num.p2c{color:var(--pink);filter:drop-shadow(0 0 24px var(--pink));}
.score-num.bump{animation:scoreBump .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes scoreBump{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(1)}}
.hdr-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.vs-big{font-family:'Black Ops One',sans-serif;font-size:26px;color:var(--gold);filter:drop-shadow(0 0 14px var(--gold));}
.round-info{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:var(--dim);}
.history-row{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;justify-content:center;}
.hdot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.1);}
.hdot.w1{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.hdot.w2{background:var(--pink);border-color:var(--pink);box-shadow:0 0 8px var(--pink);}
.hdot.dr{background:var(--dim);border-color:var(--dim);}
/* Pause button in header */
.hdr-controls{display:flex;align-items:center;gap:10px;}
.pause-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--dim);width:44px;height:44px;cursor:pointer;font-size:18px;transition:all .25s;display:flex;align-items:center;justify-content:center;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);}
.pause-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,245,255,.1);box-shadow:0 0 16px rgba(0,245,255,.3);}
/* Arena */
.game-arena{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px;position:relative;overflow:hidden;}
.result-band{display:flex;align-items:center;gap:56px;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s;pointer-events:none;}
.result-band.show{opacity:1;transform:translateY(0);pointer-events:all;}
.reveal-slot{display:flex;flex-direction:column;align-items:center;gap:12px;}
.reveal-emoji{font-size:88px;line-height:1;filter:drop-shadow(0 0 20px rgba(0,245,255,.4));transition:filter .4s,transform .4s;}
.reveal-emoji.winner{animation:winPulse 1s ease-in-out infinite alternate;}
.reveal-emoji.loser{filter:grayscale(1) brightness(.3);transform:scale(.75);}
@keyframes winPulse{from{filter:drop-shadow(0 0 20px var(--gold));transform:scale(1)}to{filter:drop-shadow(0 0 70px var(--gold)) brightness(1.5);transform:scale(1.12)}}
.reveal-pname{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:var(--dim);}
.result-center{display:flex;flex-direction:column;align-items:center;gap:8px;}
.result-vs{font-family:'Black Ops One',sans-serif;font-size:20px;color:rgba(255,255,255,.15);}
.result-text{font-family:'Black Ops One',sans-serif;font-size:38px;letter-spacing:4px;text-align:center;transition:all .4s;min-width:220px;}
.result-text.win{color:var(--gold);filter:drop-shadow(0 0 24px var(--gold));}
.result-text.lose{color:var(--pink);filter:drop-shadow(0 0 24px var(--pink));}
.result-text.draw{color:var(--dim);}
.choices-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;}
.choices-row{display:flex;gap:20px;}
.cbtn{position:relative;cursor:pointer;background:rgba(12,12,30,.85);border:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;clip-path:polygon(18px 0%,100% 0%,calc(100% - 18px) 100%,0% 100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;overflow:visible;}
.cbtn-lg{width:150px;height:150px;}
.cbtn-sm{width:100px;height:100px;}
.cbtn::before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg,var(--cyan),var(--pink),var(--gold));z-index:-1;opacity:0;transition:opacity .3s;clip-path:polygon(18px 0%,100% 0%,calc(100% - 18px) 100%,0% 100%);}
.cbtn:hover{transform:translateY(-14px) scale(1.1);border-color:transparent;box-shadow:0 20px 50px rgba(0,245,255,.25);}
.cbtn:hover::before{opacity:1;}
.cbtn.locked{border-color:var(--gold);background:rgba(255,214,10,.1);transform:scale(1.06);}
.cbtn.locked::before{opacity:1;}
.cbtn:disabled{cursor:default;pointer-events:none;opacity:.5;}
.cicon{font-size:52px;line-height:1;transition:transform .3s;display:block;}
.cbtn-sm .cicon{font-size:36px;}
.clabel{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;color:var(--dim);transition:color .25s;}
.cbtn:hover .clabel{color:var(--white);}
.pvp-layout{display:flex;gap:60px;align-items:flex-start;}
.parea{display:flex;flex-direction:column;align-items:center;gap:12px;}
.parea-name{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);}
.parea-status{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;color:var(--gold);height:18px;text-align:center;}
.pvp-vs-divider{font-family:'Black Ops One',sans-serif;font-size:28px;color:var(--gold);margin-top:36px;}
.status-bar{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);text-align:center;}
.countdown-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:20;transition:opacity .3s;}
.countdown-overlay.on{opacity:1;pointer-events:all;}
.count-num{font-family:'Black Ops One',sans-serif;font-size:220px;color:var(--gold);filter:drop-shadow(0 0 80px var(--gold));animation:countPop .75s cubic-bezier(.34,1.56,.64,1);}
@keyframes countPop{0%{transform:scale(2.5);opacity:0}40%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}

/* ============================================================
   HAND ANIMATION OVERLAY — 3D BOUNCING HANDS
   ============================================================ */
#hand-anim-overlay{
  z-index:150;background:rgba(0,0,4,.97);
  flex-direction:column;gap:24px;
}
#hand-anim-overlay .ha-title{
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:6px;
  color:var(--dim);text-transform:uppercase;
}
.ha-count-text{
  font-family:'Black Ops One',sans-serif;font-size:62px;letter-spacing:6px;
  color:var(--cyan);filter:drop-shadow(0 0 30px var(--cyan));text-align:center;
  min-height:90px;display:flex;align-items:center;justify-content:center;
}
.ha-count-text.shoot-mode{
  color:var(--gold);font-size:80px;
  filter:drop-shadow(0 0 50px var(--gold));
  animation:shootPop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes shootPop{from{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.25) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}

.hands-stage{
  display:flex;align-items:flex-end;justify-content:center;gap:100px;
  height:280px;perspective:800px;
}
.hand-wrap{
  display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;
}
#hw-p1{transform:perspective(500px) rotateY(22deg) rotateX(5deg);}
#hw-p2{transform:perspective(500px) rotateY(-22deg) rotateX(5deg);}

.hand-wrap.do-bounce .hand-inner{animation:handBounce .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes handBounce{
  0%{transform:translateY(0) rotateX(0deg);}
  30%{transform:translateY(-90px) rotateX(-20deg);}
  65%{transform:translateY(8px) rotateX(8deg);}
  85%{transform:translateY(-12px) rotateX(-5deg);}
  100%{transform:translateY(0) rotateX(0deg);}
}
.hand-wrap.do-reveal .hand-inner{animation:handReveal .5s cubic-bezier(.175,.885,.32,1.275) forwards;}
@keyframes handReveal{
  0%{transform:translateY(-60px) scale(0.7) rotateX(-25deg);opacity:.3;}
  60%{transform:translateY(10px) scale(1.15) rotateX(5deg);opacity:1;}
  100%{transform:translateY(0) scale(1) rotateX(0deg);opacity:1;}
}
.hand-inner{width:180px;height:240px;display:flex;align-items:center;justify-content:center;}
.hand-inner svg{width:100%;height:100%;filter:drop-shadow(-8px 14px 18px rgba(0,0,0,0.7));}

.ha-player-label{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;
  color:var(--dim);margin-top:10px;text-align:center;
}
#hw-p1 .ha-player-label{color:rgba(0,245,255,.6);}
#hw-p2 .ha-player-label{color:rgba(255,0,110,.6);}

.ha-separator{
  width:2px;height:180px;margin-bottom:20px;align-self:center;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.15),transparent);
}

/* ============================================================
   PAUSE OVERLAY
   ============================================================ */
#pause-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,10,.88);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;opacity:0;pointer-events:none;
  transition:opacity .3s;
}
#pause-overlay.visible{opacity:1;pointer-events:all;}
.pause-title{
  font-family:'Black Ops One',sans-serif;font-size:60px;letter-spacing:8px;
  color:var(--cyan);filter:drop-shadow(0 0 40px var(--cyan));
  animation:float 3s ease-in-out infinite;margin-bottom:16px;
}
.pause-sub{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:4px;color:var(--dim);margin-bottom:32px;}
.pause-menu{display:flex;flex-direction:column;gap:14px;min-width:320px;}
.pause-item{
  padding:18px 36px;background:transparent;
  border:1px solid rgba(255,255,255,.12);color:var(--white);
  font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:4px;
  text-transform:uppercase;cursor:pointer;text-align:center;
  clip-path:polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);
  transition:all .25s;position:relative;overflow:hidden;
}
.pause-item::before{content:'';position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:-1;}
.pause-item.resume::before{background:var(--cyan);}
.pause-item.restart::before{background:var(--gold);}
.pause-item.quit::before{background:var(--pink);}
.pause-item.resume{border-color:rgba(0,245,255,.3);}
.pause-item.restart{border-color:rgba(255,214,10,.3);}
.pause-item.quit{border-color:rgba(255,0,110,.3);}
.pause-item:hover{color:#000;transform:scale(1.02);}
.pause-item:hover::before{transform:scaleX(1);}
.pause-item.resume:hover{color:#000;}
.pause-item.restart:hover{color:#000;}
.pause-item.quit:hover{color:#fff;}
.pause-item.quit:hover::before{background:var(--pink);}
.pause-item.quit:hover{color:#fff;}
.pause-esc-hint{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.2);margin-top:24px;}
.pause-decoration{display:flex;gap:16px;margin-bottom:8px;}
.pd-line{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--cyan));margin-top:4px;}
.pd-diamond{width:8px;height:8px;background:var(--cyan);transform:rotate(45deg);filter:drop-shadow(0 0 6px var(--cyan));}

/* ============================================================
   GAME OVER SCREEN
   ============================================================ */
#gameover-screen{gap:24px;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);z-index:10;}
.go-title{font-family:'Black Ops One',sans-serif;font-size:76px;letter-spacing:8px;animation:goEntry .8s cubic-bezier(.34,1.56,.64,1);}
@keyframes goEntry{from{transform:scale(0) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.go-title.won{background:linear-gradient(135deg,var(--gold),#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 50px var(--gold));}
.go-title.lost{color:var(--pink);filter:drop-shadow(0 0 50px var(--pink));}
.go-title.tied{color:var(--dim);}
.go-sub{font-family:'Rajdhani',sans-serif;font-size:20px;letter-spacing:3px;color:var(--dim);}
.go-scores{font-family:'Black Ops One',sans-serif;font-size:60px;display:flex;gap:24px;align-items:center;}
.go-s1{color:var(--cyan);filter:drop-shadow(0 0 16px var(--cyan));}
.go-s2{color:var(--pink);filter:drop-shadow(0 0 16px var(--pink));}
.go-sep{color:var(--gold);}
.go-actions{display:flex;gap:14px;margin-top:8px;}

/* ============================================================
   FX / STREAK / TOAST / UTILS
   ============================================================ */
#fx-layer{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;}
.pfx{position:absolute;border-radius:50%;animation:pfxAnim var(--d,.8s) ease-out forwards;}
@keyframes pfxAnim{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--tx,80px),var(--ty,-80px)) scale(0);opacity:0}}
.streak-badge{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Black Ops One',sans-serif;font-size:36px;color:var(--gold);filter:drop-shadow(0 0 40px var(--gold));letter-spacing:4px;opacity:0;pointer-events:none;z-index:200;text-align:center;white-space:nowrap;}
.streak-badge.on{animation:streakAnim 2s forwards;}
@keyframes streakAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%)}}
#toast-box{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:500;pointer-events:none;display:flex;flex-direction:column;gap:8px;}
.toast{background:rgba(0,0,0,.92);border:1px solid var(--cyan);color:var(--white);padding:11px 26px;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;text-align:center;white-space:nowrap;animation:toastIn .3s ease,toastOut .3s 2.7s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}
.online-badge{position:fixed;top:22px;right:90px;z-index:100;background:var(--green);color:#000;font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;padding:5px 12px;display:flex;align-items:center;gap:6px;}
.ob-dot{width:6px;height:6px;border-radius:50%;background:#000;animation:blinkDot 1s infinite;}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:0}}
@keyframes glitch1{0%,92%,100%{clip-path:inset(0 0 95% 0);transform:translateX(-3px);opacity:0}93%{clip-path:inset(40% 0 40% 0);transform:translateX(3px);opacity:.8}95%{clip-path:inset(20% 0 60% 0);transform:translateX(-2px);opacity:.6}97%{clip-path:inset(60% 0 20% 0);transform:translateX(4px);opacity:.9}}
@keyframes glitch2{0%,88%,100%{clip-path:inset(95% 0 0 0);transform:translateX(3px);opacity:0}89%{clip-path:inset(50% 0 30% 0);transform:translateX(-3px);opacity:.7}91%{clip-path:inset(70% 0 10% 0);transform:translateX(2px);opacity:.5}}
.glitch-wrap{position:relative;display:inline-block;}
.glitch-wrap::before,.glitch-wrap::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font:inherit;background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.glitch-wrap::before{animation:glitch1 5s infinite;color:var(--cyan);}
.glitch-wrap::after{animation:glitch2 5s .2s infinite;color:var(--pink);}
.hidden{display:none !important;}