:root{
  --bg:#030303;--panel:#0b0b0c;--panel2:#121214;--soft:#19191c;--line:rgba(255,255,255,.10);
  --text:#f8f8f8;--muted:#9b9ba3;--yellow:#facc15;--yellow2:#ffe781;--green:#4ade80;
  --red:#fb7185;--blue:#60a5fa;--orange:#fb923c;--radius:24px;--shadow:0 26px 90px rgba(0,0,0,.58);
}
*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:
radial-gradient(circle at 12% -5%,rgba(250,204,21,.10),transparent 32rem),
radial-gradient(circle at 95% 80%,rgba(250,204,21,.055),transparent 38rem),var(--bg);
color:var(--text);font:500 15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:
radial-gradient(rgba(255,255,255,.12) .65px,transparent .65px);background-size:18px 18px;
mask-image:linear-gradient(to bottom,#000,transparent 82%)}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{color:inherit}.hidden{display:none!important}
.shell{width:min(1180px,calc(100% - 32px));margin:0 auto;position:relative;z-index:2}
.topbar{width:min(1180px,calc(100% - 32px));margin:18px auto 0;display:flex;align-items:center;
justify-content:space-between;gap:16px;position:relative;z-index:20}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:950;letter-spacing:-.035em}
.bean-mark{width:44px;height:54px;display:grid;place-items:center;border-radius:52% 44% 50% 47%;
background:var(--yellow);border:2px solid #fff;box-shadow:0 0 34px rgba(250,204,21,.33);transform:rotate(-7deg);
transition:.25s}.brand:hover .bean-mark{transform:rotate(8deg) scale(1.05)}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.nav a,.nav button{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);
padding:9px 14px;cursor:pointer;transition:.2s}.nav a:hover,.nav button:hover{border-color:rgba(250,204,21,.65);background:rgba(250,204,21,.06)}
.page{width:min(1180px,calc(100% - 32px));margin:30px auto 60px;position:relative;z-index:2}
.grid{display:grid;gap:18px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),rgba(10,10,11,.92);
box-shadow:var(--shadow);padding:22px;backdrop-filter:blur(16px);transition:.22s}
.card:after{content:"";position:absolute;width:190px;height:190px;right:-115px;bottom:-120px;border-radius:50%;
background:rgba(250,204,21,.055);filter:blur(36px);pointer-events:none}
.card.hover:hover{transform:translateY(-3px);border-color:rgba(250,204,21,.28)}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,8vw,104px);line-height:.88;letter-spacing:-.078em;margin:20px 0}
h2{font-size:clamp(29px,4vw,50px);line-height:1;letter-spacing:-.045em}h3{font-size:20px;letter-spacing:-.025em}
.muted{color:var(--muted)}.yellow{color:var(--yellow)}.green{color:var(--green)}.red{color:var(--red)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(250,204,21,.30);
border-radius:999px;background:rgba(250,204,21,.055);color:var(--yellow2);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(250,204,21,.4);animation:pulse 1.8s infinite}
.lead{max-width:650px;color:var(--muted);font-size:clamp(16px,2vw,20px)}
.btn{border:0;border-radius:15px;background:var(--yellow);color:#090909;padding:12px 18px;font-weight:900;cursor:pointer;
box-shadow:0 12px 34px rgba(250,204,21,.17);transition:.18s;white-space:nowrap}
.btn:hover{background:var(--yellow2);transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:var(--red);color:#190308}.btn.small{padding:8px 12px;border-radius:12px;font-size:13px}
.input,select{width:100%;border:1px solid var(--line);border-radius:14px;background:#070708;color:var(--text);
padding:13px 15px;outline:none;transition:.18s}.input:focus,select:focus{border-color:rgba(250,204,21,.72);box-shadow:0 0 0 3px rgba(250,204,21,.07)}
label>span:first-child{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.status{min-height:24px;margin-top:10px;color:var(--muted)}.status.good{color:var(--green)}.status.bad{color:var(--red)}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.025);font-size:12px}
.statrow{display:flex;gap:12px;flex-wrap:wrap}.stat{flex:1;min-width:120px;border:1px solid var(--line);border-radius:17px;padding:15px;background:rgba(255,255,255,.024)}
.stat strong{display:block;font-size:27px;letter-spacing:-.04em}.sep{height:1px;background:var(--line);margin:18px 0}
.hero{min-height:100vh;width:min(1180px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:42px;position:relative;z-index:2}
.gate{display:flex;gap:10px;max-width:580px;margin-top:30px;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.024)}
.kitchen{min-height:570px;display:grid;place-items:center;position:relative;perspective:900px}
.potwrap{width:min(440px,90vw);height:440px;display:grid;place-items:end center;position:relative;filter:drop-shadow(0 48px 46px rgba(0,0,0,.68))}
.pot{width:280px;height:175px;border-radius:30px 30px 98px 98px;background:linear-gradient(90deg,#151515,#373737 48%,#101010);
border:2px solid rgba(255,255,255,.18);position:relative;z-index:5;animation:potbob 3.6s ease-in-out infinite}
.pot:before{content:"";position:absolute;width:322px;height:44px;left:50%;top:-19px;transform:translateX(-50%);border-radius:50%;background:#070707;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 8px 17px rgba(250,204,21,.17)}
.pot:after{content:"BEAN LAB";position:absolute;left:50%;top:76px;transform:translateX(-50%);font-size:12px;font-weight:950;letter-spacing:.24em;color:rgba(255,255,255,.58)}
.handle{position:absolute;width:92px;height:40px;border:14px solid #1c1c1c;border-radius:999px;top:81px}.handle.left{left:-70px}.handle.right{right:-70px}
.fire{position:absolute;bottom:-17px;width:220px;height:95px;z-index:2}.flame{position:absolute;bottom:0;width:56px;height:80px;border-radius:55% 45% 60% 40%;
background:linear-gradient(#fff8b4,var(--yellow) 52%,#ff7100);transform-origin:bottom;animation:flame .74s ease-in-out infinite alternate;filter:drop-shadow(0 0 18px rgba(250,204,21,.55))}
.flame:nth-child(1){left:18px;animation-delay:-.2s}.flame:nth-child(2){left:82px;height:94px}.flame:nth-child(3){right:18px;animation-delay:-.42s}
.steam{position:absolute;inset:0;pointer-events:none}.steam span{position:absolute;bottom:220px;left:50%;width:22px;height:82px;border-radius:50%;border-left:4px solid rgba(255,255,255,.18);animation:steam 3s ease-in infinite}
.steam span:nth-child(2){margin-left:-74px;animation-delay:-1s}.steam span:nth-child(3){margin-left:76px;animation-delay:-2s}
.orbitbean{position:absolute;font-size:46px;z-index:8;animation:orbit 5.6s linear infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
.orbitbean.two{animation-delay:-2.8s;animation-duration:6.4s}.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 18px var(--yellow);animation:spark 2.2s ease-out infinite}
.spark.s1{top:24%;left:20%}.spark.s2{top:18%;right:19%;animation-delay:-.8s}.spark.s3{bottom:28%;right:10%;animation-delay:-1.5s}
.profile{display:flex;gap:17px;align-items:center}.avatar{width:76px;height:94px;border-radius:50% 44% 52% 46%;border:2px solid #fff;background:var(--yellow);display:grid;place-items:center;font-size:38px;box-shadow:0 0 32px rgba(250,204,21,.25);transform:rotate(-6deg)}
.gamecard{min-height:292px;display:flex;flex-direction:column;justify-content:space-between}.gameicon{font-size:58px;transition:.24s}.gamecard:hover .gameicon{transform:rotate(-6deg) scale(1.06)}
.queuebar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.countdown{font-variant-numeric:tabular-nums}
.arena{min-height:390px;display:grid;align-content:center}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choice{min-height:130px;border:1px solid var(--line);border-radius:22px;background:var(--soft);display:grid;place-items:center;font-size:52px;cursor:pointer;transition:.2s}
.choice:hover{border-color:var(--yellow);transform:translateY(-5px) rotate(-1deg);box-shadow:0 20px 45px rgba(250,204,21,.08)}
.choice.selected{border-color:var(--yellow);background:rgba(250,204,21,.09);box-shadow:0 0 0 3px rgba(250,204,21,.08)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.fighter{text-align:center;border:1px solid var(--line);border-radius:22px;padding:22px;background:rgba(255,255,255,.02)}
.fighter .move{font-size:86px;min-height:120px;display:grid;place-items:center}.versus{font-weight:950;color:var(--yellow);font-size:25px}
.clash .fighter:first-child .move{animation:attackLeft .55s cubic-bezier(.2,.9,.25,1)}
.clash .fighter:last-child .move{animation:attackRight .55s cubic-bezier(.2,.9,.25,1)}
.shake{animation:shake .45s}.winnerglow{box-shadow:0 0 55px rgba(74,222,128,.18);border-color:rgba(74,222,128,.5)}
.board{display:grid;grid-template-columns:repeat(8,minmax(24px,1fr));gap:5px;width:100%}.cell{aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#080809;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:.15s}
.cell:hover{border-color:rgba(250,204,21,.7);transform:scale(1.04)}.cell.ship{background:#263044;border-color:#64748b}.cell.hit{background:rgba(251,113,133,.30);color:#fff}.cell.miss{background:rgba(96,165,250,.15);color:var(--blue)}
.cell.disabled{opacity:.58;cursor:not-allowed;transform:none}.cell.boom{animation:boom .55s}.cell.splash{animation:splash .55s}
.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:13px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px}.rank{font-size:20px;font-weight:950}.rank.top{color:var(--yellow)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:80;padding:18px;backdrop-filter:blur(8px)}
.modalbox{width:min(610px,100%);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);padding:24px}
.toaststack{position:fixed;right:18px;bottom:18px;z-index:100;display:grid;gap:9px}.toast{min-width:260px;max-width:420px;border:1px solid var(--line);border-radius:15px;background:#111;padding:13px 15px;box-shadow:var(--shadow);animation:toastin .3s}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}.confetti i{position:absolute;top:-20px;width:9px;height:15px;background:var(--yellow);animation:confetti 1.8s linear forwards}
.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(250,204,21,0)}100%{box-shadow:0 0 0 0 rgba(250,204,21,0)}}
@keyframes potbob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(.5deg)}}
@keyframes flame{from{transform:scaleY(.82) rotate(-4deg)}to{transform:scaleY(1.14) rotate(4deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(40px) scale(.7) rotate(-8deg)}25%{opacity:.8}100%{opacity:0;transform:translateY(-135px) scale(1.65) rotate(18deg)}}
@keyframes orbit{0%{transform:translate(-165px,30px) rotate(0)}25%{transform:translate(0,-100px) rotate(110deg)}50%{transform:translate(165px,15px) rotate(210deg)}75%{transform:translate(0,83px) rotate(310deg)}100%{transform:translate(-165px,30px) rotate(360deg)}}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.4)}}
@keyframes attackLeft{0%{transform:translateX(0) rotate(0)}55%{transform:translateX(95px) rotate(15deg) scale(1.15)}100%{transform:translateX(0)}}
@keyframes attackRight{0%{transform:translateX(0) rotate(0)}55%{transform:translateX(-95px) rotate(-15deg) scale(1.15)}100%{transform:translateX(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
@keyframes boom{0%{transform:scale(1)}40%{transform:scale(1.35);background:#fff}100%{transform:scale(1);background:rgba(251,113,133,.3)}}
@keyframes splash{0%{transform:scale(1)}40%{transform:scale(1.25);background:rgba(96,165,250,.7)}100%{transform:scale(1)}}
@keyframes toastin{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@keyframes confetti{to{transform:translateY(110vh) rotate(720deg);opacity:.3}}
@media(max-width:880px){.hero,.grid2,.grid3,.grid4{grid-template-columns:1fr}.hero{padding-top:74px}.kitchen{min-height:430px}.duel{grid-template-columns:1fr}.versus{display:none}}
@media(max-width:560px){.gate,.queuebar{flex-direction:column;align-items:stretch}.topbar{align-items:flex-start}.nav{max-width:65%}.choices{grid-template-columns:1fr}.choice{min-height:84px}.card{padding:17px}h1{font-size:58px}.fighter .move{font-size:68px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}

/* =========================================================
   BEANBATTLE VISUAL UPGRADE V3 — collision logo, animated
   lobby previews, cinematic match states and bot controls.
   ========================================================= */
:root{--cyan:#22d3ee;--violet:#a78bfa;--deepblue:#0b1633;--glass:rgba(12,12,14,.82)}
.app-page{background:
 radial-gradient(circle at 8% 0%,rgba(250,204,21,.13),transparent 30rem),
 radial-gradient(circle at 88% 12%,rgba(34,211,238,.07),transparent 34rem),
 radial-gradient(circle at 50% 110%,rgba(167,139,250,.07),transparent 35rem),#020203}
.page-enter{animation:pageRise .52s cubic-bezier(.22,.9,.25,1) both}
.topbar-v3{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(8,8,9,.72);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.28)}

.bean-logo{width:48px;height:58px;position:relative;display:inline-block;border-radius:52% 44% 51% 46%;background:linear-gradient(145deg,var(--yellow2),var(--yellow));border:2px solid #fff;box-shadow:0 0 30px rgba(250,204,21,.28);overflow:hidden;transform:rotate(-7deg);flex:0 0 auto}
.bean-logo .bean-base,.bean-logo .bean-striker{position:absolute;font-size:23px;line-height:1;filter:drop-shadow(0 5px 5px rgba(0,0,0,.45));transform-origin:center}
.bean-logo .bean-base{left:50%;top:51%;animation:logoBaseHit 3.25s ease-in-out infinite}
.bean-logo .bean-striker{left:0;top:48%;animation:logoStriker 3.25s cubic-bezier(.2,.9,.25,1) infinite}
.bean-logo .bean-impact{position:absolute;left:46%;top:39%;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;animation:logoImpact 3.25s ease-out infinite}
.brand:hover .bean-logo{box-shadow:0 0 42px rgba(250,204,21,.46)}

.landing-page{background:#020203;min-height:100vh}
.landing-page:after{content:"";position:fixed;inset:auto 0 0;height:35vh;background:linear-gradient(to top,rgba(250,204,21,.035),transparent);pointer-events:none}
.landing-glow{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.6}.glow-one{width:420px;height:420px;background:rgba(250,204,21,.10);left:-180px;top:-120px}.glow-two{width:520px;height:520px;background:rgba(34,211,238,.055);right:-260px;bottom:-190px}
.landing-nav{width:min(1220px,calc(100% - 34px));margin:18px auto 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;padding:10px 12px}
.landing-status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.11em}
.hero-v3{width:min(1220px,calc(100% - 34px));grid-template-columns:1.02fr .98fr;gap:28px;min-height:calc(100vh - 92px)}
.hero-copy{position:relative;z-index:4}.hero-v3 h1{font-size:clamp(56px,7.7vw,108px);line-height:.84;letter-spacing:-.078em;margin:22px 0 26px;text-wrap:balance}
.hero-outline{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.78);text-shadow:0 0 36px rgba(250,204,21,.12)}
.feature-ticker{display:flex;gap:8px;flex-wrap:wrap;margin:21px 0 0}.feature-ticker span{border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.025);color:#c5c5cc;font-size:12px;animation:tickerFloat 4s ease-in-out infinite}.feature-ticker span:nth-child(2){animation-delay:-1s}.feature-ticker span:nth-child(3){animation-delay:-2s}.feature-ticker span:nth-child(4){animation-delay:-3s}
.gate-v3{max-width:650px;align-items:center;padding:7px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(250,204,21,.025));box-shadow:0 18px 50px rgba(0,0,0,.25)}
.gate-icon{width:44px;height:44px;border-radius:13px;background:rgba(250,204,21,.09);display:grid;place-items:center;font-size:20px;flex:0 0 auto}.gate-copy{display:flex;align-items:center;color:#d4d4d8}.btn-glow{position:relative;overflow:hidden;isolation:isolate}.btn-glow:before{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.75) 45%,transparent 70%);transform:translateX(-140%);animation:buttonShine 3.2s ease-in-out infinite;z-index:-1}.btn-glow b{font-size:18px;margin-left:8px}.returning-link{border:0;background:transparent;color:var(--muted);padding:8px 0;cursor:pointer}.returning-link:hover{color:var(--yellow2)}.returning-link span{display:inline-block;transition:.2s}.returning-link:hover span{transform:translate(3px,-3px)}
.security-note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;max-width:620px;color:var(--muted);font-size:12px}.security-note>span{width:30px;height:30px;border-radius:10px;background:rgba(74,222,128,.08);display:grid;place-items:center}.security-note p{margin:0}
.landing-message{font-weight:700;letter-spacing:.01em}

.kitchen-v3{min-height:620px;isolation:isolate}.kitchen-v3:before{content:"";position:absolute;width:410px;height:410px;border-radius:50%;background:radial-gradient(circle,rgba(250,204,21,.10),transparent 64%);filter:blur(10px);animation:reactorGlow 3.4s ease-in-out infinite}
.radar-ring{position:absolute;border:1px solid rgba(250,204,21,.12);border-radius:50%;animation:ringPulse 3.8s ease-out infinite}.ring-one{width:390px;height:390px}.ring-two{width:505px;height:505px;animation-delay:-1.3s}.ring-three{width:620px;height:620px;animation-delay:-2.6s}
.potwrap-v3{height:470px}.potwrap-v3 .pot{width:300px;height:188px;background:linear-gradient(100deg,#111 0,#343438 42%,#161619 64%,#080809 100%);box-shadow:inset 16px 0 26px rgba(255,255,255,.025),inset -20px -12px 34px rgba(0,0,0,.55)}.potwrap-v3 .pot:before{width:345px;height:49px}.pot-shine{position:absolute;left:40px;top:32px;width:20px;height:90px;border-radius:50%;background:linear-gradient(to bottom,rgba(255,255,255,.18),transparent);filter:blur(5px);transform:rotate(12deg)}
.stirrer{position:absolute;z-index:4;bottom:179px;left:50%;width:16px;height:205px;transform-origin:bottom center;animation:stir 2.8s ease-in-out infinite}.stirrer:before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,#444,#d8d8d8 45%,#515151);box-shadow:0 8px 16px rgba(0,0,0,.35)}.stirrer i{position:absolute;width:62px;height:30px;border-radius:50%;background:#6a6a6a;bottom:-13px;left:50%;transform:translateX(-50%);border:2px solid #aaa}
.orbitbean.three{animation-delay:-1.1s;animation-duration:4.8s;font-size:36px}.bubble{position:absolute;z-index:9;font-size:27px;bottom:185px;animation:bubbleBean 4.1s ease-in infinite;opacity:0}.bubble.b1{left:43%;animation-delay:-.3s}.bubble.b2{left:54%;animation-delay:-1.9s}.bubble.b3{left:49%;animation-delay:-3.1s}
.steam span:nth-child(4){margin-left:15px;animation-delay:-2.45s}.spark.s4{left:8%;bottom:31%;animation-delay:-.5s}
.reactor-meter{position:absolute;right:2%;bottom:12%;width:154px;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:11px;background:rgba(8,8,10,.76);backdrop-filter:blur(12px);z-index:11;animation:floatCard 4s ease-in-out infinite}.reactor-meter>span{font-size:9px;letter-spacing:.16em;color:var(--muted)}.reactor-meter>div{height:6px;border-radius:999px;background:#222;margin:8px 0;overflow:hidden}.reactor-meter i{display:block;width:87%;height:100%;background:linear-gradient(90deg,var(--yellow),#fff3a3);box-shadow:0 0 12px rgba(250,204,21,.6);animation:meterPulse 2s ease-in-out infinite}.reactor-meter b{font-size:19px}
.floating-card{position:absolute;z-index:12;width:150px;border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:13px;background:rgba(9,9,11,.78);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.35);animation:floatCard 4.5s ease-in-out infinite}.floating-card span{font-size:9px;letter-spacing:.16em;color:var(--muted)}.floating-card strong{display:block;font-size:22px;margin:5px 0}.floating-card small{color:var(--yellow)}.floating-rps{left:2%;top:21%;transform:rotate(-5deg)}.floating-navy{right:0;top:28%;animation-delay:-2.2s;transform:rotate(4deg)}
.floor-grid{position:absolute;bottom:10px;width:640px;height:180px;background-image:linear-gradient(rgba(250,204,21,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,204,21,.08) 1px,transparent 1px);background-size:35px 35px;transform:perspective(350px) rotateX(68deg);mask-image:linear-gradient(to top,#000,transparent);z-index:-1}

.hero-profile-card{padding:28px;background:linear-gradient(120deg,rgba(250,204,21,.045),rgba(10,10,11,.94) 48%,rgba(34,211,238,.025));min-height:210px}.profile-beam{position:absolute;inset:-100% auto auto -30%;width:55%;height:250%;background:linear-gradient(90deg,transparent,rgba(250,204,21,.05),transparent);transform:rotate(22deg);animation:profileBeam 6s linear infinite}.avatar-v3{position:relative;width:92px;height:112px;overflow:visible}.avatar-v3 span{animation:avatarBob 3s ease-in-out infinite}.avatar-v3 i{position:absolute;inset:-8px;border:1px solid rgba(250,204,21,.22);border-radius:50%;animation:avatarRing 2.8s linear infinite}.profile-name{font-size:42px;margin:14px 0 7px}.statrow-v3 .stat{position:relative;overflow:hidden;transition:.25s}.statrow-v3 .stat:hover{transform:translateY(-4px);border-color:rgba(250,204,21,.3)}.statrow-v3 .stat small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.stat-balance:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(250,204,21,.09);right:-25px;top:-25px;filter:blur(3px)}
.lobby-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:34px 2px 16px}.lobby-heading h2{margin:12px 0 0}.lobby-live{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.live-wave{width:12px;height:12px;border:2px solid var(--green);border-radius:50%;animation:liveWave 1.8s ease-out infinite}
.game-grid-v3 .gamecard{padding:0;min-height:480px}.gamecard .game-preview{height:210px;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.game-copy{padding:22px 22px 16px;position:relative;z-index:2}.game-copy h3{font-size:31px;margin:7px 0}.game-kicker{font-size:10px;letter-spacing:.17em;color:var(--yellow);font-weight:900}.pill-row{display:flex;gap:7px;flex-wrap:wrap}.game-enter{margin:0 22px 22px;display:flex;align-items:center;justify-content:space-between}.game-enter b{font-size:20px;transition:.2s}.game-enter:hover b{transform:translateX(5px)}.game-card-glow{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(70px);opacity:.12;right:-120px;top:-120px}.gamecard-rps .game-card-glow{background:var(--yellow)}.gamecard-navy .game-card-glow{background:var(--cyan)}
.rps-preview{background:radial-gradient(circle at 50% 45%,rgba(250,204,21,.12),transparent 42%),linear-gradient(135deg,#101012,#080809)}.preview-fighter{position:absolute;font-size:76px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}.preview-fighter.left{left:17%;animation:previewAttackLeft 2.8s cubic-bezier(.2,.9,.25,1) infinite}.preview-fighter.right{right:17%;animation:previewAttackRight 2.8s cubic-bezier(.2,.9,.25,1) infinite}.preview-impact{position:relative;width:78px;height:78px;display:grid;place-items:center}.preview-impact b{z-index:2;color:#111;background:var(--yellow);border-radius:50%;width:50px;height:50px;display:grid;place-items:center;box-shadow:0 0 28px rgba(250,204,21,.5)}.preview-impact i{position:absolute;inset:0;border:2px solid rgba(250,204,21,.4);border-radius:50%;animation:impactRing 1.4s ease-out infinite}
.navy-preview{background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.11),transparent 46%),repeating-radial-gradient(circle at 50% 50%,rgba(34,211,238,.09) 0 1px,transparent 1px 34px),#061018}.radar-sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 78%,rgba(34,211,238,.18) 90%,transparent 100%);animation:radarSpin 3.2s linear infinite;border-radius:50%}.radar-sweep.big{inset:-25%;opacity:.35;pointer-events:none}.mini-ship{font-size:60px;position:absolute;left:22%;bottom:33%;animation:shipFloat 2.4s ease-in-out infinite}.mini-shot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;position:absolute;left:42%;top:46%;animation:torpedo 2.4s ease-in-out infinite}.mini-boom{font-size:42px;position:absolute;right:22%;top:31%;animation:miniBoom 2.4s ease-in-out infinite}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.safety-card{min-height:240px}.safety-orbit{position:absolute;right:28px;top:24px;font-size:44px;animation:safetyFloat 3s ease-in-out infinite}.risk-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:24px}.risk-meter>div{height:7px;background:#222;border-radius:999px;overflow:hidden}.risk-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .6s ease}.modal-icon{width:54px;height:54px;border-radius:17px;background:rgba(250,204,21,.09);display:grid;place-items:center;font-size:26px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}.deposit-ticket{box-shadow:none;background:linear-gradient(145deg,rgba(250,204,21,.04),rgba(255,255,255,.015))}.code-value{font-size:20px;letter-spacing:.08em}

.queue-stage{margin-top:20px}.queue-visual{height:92px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:radial-gradient(circle at center,rgba(250,204,21,.07),transparent 65%),#080809;position:relative;overflow:hidden;margin-bottom:14px}.scan-line{position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(transparent,var(--yellow),transparent);box-shadow:0 0 18px var(--yellow);animation:queueScan 2.6s ease-in-out infinite}.scan-bean{position:absolute;left:50%;top:50%;font-size:34px;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 8px rgba(0,0,0,.45));animation:scanBean 2s ease-in-out infinite}.scan-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}.scan-dot.d1{left:16%;top:35%}.scan-dot.d2{right:18%;top:60%}.scan-dot.d3{left:73%;top:22%}.bet-input-wrap{position:relative}.bet-input-wrap b{position:absolute;right:14px;top:50%;transform:translateY(-50%)}.queue-hint{font-size:12px;color:var(--muted);min-height:18px}.arena-title{font-size:clamp(34px,4vw,56px);margin:14px 0 9px}.match-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.bot-badge{font-style:normal;font-size:9px;background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.4);color:#c4b5fd;border-radius:999px;padding:2px 6px;margin-left:5px;letter-spacing:.11em}.round-track{display:flex;gap:8px;margin-top:12px}.round-track i{height:5px;flex:1;border-radius:999px;background:#202023;transition:.3s}.round-track i.active{background:var(--yellow);box-shadow:0 0 14px rgba(250,204,21,.45)}
.choices-v3 .choice{display:flex;flex-direction:column;gap:5px;padding:14px}.choice-icon{font-size:54px;transition:.24s}.choice b{font-size:12px;letter-spacing:.12em}.choice small{color:var(--muted);font-size:10px}.choice:hover .choice-icon{transform:scale(1.18) rotate(-6deg)}.choice-rock:hover{box-shadow:0 20px 50px rgba(148,163,184,.10)}.choice-paper:hover{box-shadow:0 20px 50px rgba(250,204,21,.10)}.choice-scissors:hover{box-shadow:0 20px 50px rgba(96,165,250,.10)}
.arena-v3{min-height:560px}.arena-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(250,204,21,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(250,204,21,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle,#000,transparent 78%);pointer-events:none}.duel-v3{position:relative;z-index:2}.fighter{overflow:hidden;position:relative}.fighter:before{content:"";position:absolute;inset:auto -20% -70% -20%;height:75%;background:radial-gradient(circle,rgba(250,204,21,.07),transparent 65%)}.fighter-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.fighter-label strong{font-size:28px;color:var(--text)}.versus-core{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;background:#0a0a0b;border:1px solid rgba(250,204,21,.25);box-shadow:0 0 35px rgba(250,204,21,.12)}.versus-core span{font-weight:950;color:var(--yellow);z-index:3}.versus-core i{position:absolute;width:8px;height:8px;background:var(--yellow);border-radius:50%;opacity:.5;animation:vsParticle 2.2s linear infinite}.versus-core i:nth-of-type(1){animation-delay:-.3s}.versus-core i:nth-of-type(2){animation-delay:-1s}.versus-core i:nth-of-type(3){animation-delay:-1.7s}.shockwave{position:absolute;inset:-12px;border:2px solid rgba(250,204,21,.26);border-radius:50%;opacity:0}.duel.clash .shockwave{animation:shockwave .65s ease-out}.duel.clash:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 45px 18px rgba(250,204,21,.55);transform:translate(-50%,-50%);animation:flashPop .55s ease-out forwards;z-index:20}.result-banner{display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:11px 14px;margin:16px 0 0;background:rgba(255,255,255,.025);animation:resultIn .35s cubic-bezier(.2,.9,.25,1)}.result-banner span{font-size:24px}.result-banner strong{font-size:13px;letter-spacing:.11em}.result-banner small{margin-left:auto;color:var(--muted)}.history-head{display:flex;justify-content:space-between;align-items:center}.history-list>div{animation:historySlide .32s ease both}.result-status{font-weight:850;font-size:17px}
.match-found-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(16px);display:grid;place-items:center;z-index:120}.match-found-card{width:min(650px,calc(100% - 30px));min-height:260px;border:1px solid rgba(250,204,21,.28);border-radius:34px;background:radial-gradient(circle at center,rgba(250,204,21,.11),transparent 60%),#0a0a0b;box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 70px rgba(250,204,21,.12);display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;text-align:center;overflow:hidden;animation:matchCardIn .45s cubic-bezier(.2,.9,.25,1)}.match-found-card>div small{display:block;letter-spacing:.18em;color:var(--yellow);font-size:10px}.match-found-card>div strong{display:block;font-size:29px;margin:10px 0}.match-found-card>div b{display:grid;place-items:center;margin:auto;width:62px;height:62px;border-radius:50%;background:var(--yellow);color:#111;font-size:31px;box-shadow:0 0 36px rgba(250,204,21,.45)}.mf-bean{font-size:72px;filter:drop-shadow(0 20px 18px rgba(0,0,0,.5))}.mf-bean.left{animation:mfLeft .7s ease-in-out infinite alternate}.mf-bean.right{animation:mfRight .7s ease-in-out infinite alternate}.navy-match-card{border-color:rgba(34,211,238,.28);background:radial-gradient(circle at center,rgba(34,211,238,.11),transparent 60%),#071016}.navy-match-card>div small{color:var(--cyan)}

.navy-command-card{background:linear-gradient(135deg,rgba(34,211,238,.035),rgba(10,10,11,.96) 45%,rgba(250,204,21,.025));min-height:220px}.navy-radar-bg{position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-280px;background:repeating-radial-gradient(circle,rgba(34,211,238,.08) 0 1px,transparent 1px 40px);opacity:.45}.queuebar-command{align-self:end}.navy-grid .ocean-card{min-height:650px;background:linear-gradient(180deg,rgba(10,22,35,.74),rgba(8,9,12,.96));border-color:rgba(96,165,250,.14)}.ocean-wave{position:absolute;left:-20%;width:140%;height:90px;border-radius:50%;border-top:1px solid rgba(96,165,250,.13);animation:oceanWave 5s ease-in-out infinite;pointer-events:none}.wave-one{top:16%;}.wave-two{top:28%;animation-delay:-2.4s}.board-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative;z-index:2}.timer-pill{font-variant-numeric:tabular-nums}.coordinate-frame{position:relative;padding:25px 0 0 25px;margin-top:8px}.axis{position:absolute;display:grid;color:rgba(255,255,255,.36);font-size:9px;font-weight:900}.axis-top{left:25px;right:0;top:4px;grid-template-columns:repeat(8,1fr);text-align:center}.axis-left{left:5px;top:25px;bottom:0;grid-template-rows:repeat(8,1fr);align-items:center}.board-v3{position:relative;z-index:2}.board-v3 .cell{background:linear-gradient(145deg,rgba(16,37,56,.72),rgba(6,14,23,.86));border-color:rgba(96,165,250,.10);box-shadow:inset 0 0 10px rgba(34,211,238,.02)}.board-v3 .cell:hover{border-color:var(--yellow);box-shadow:0 0 15px rgba(250,204,21,.12),inset 0 0 12px rgba(250,204,21,.06)}.board-v3 .cell.ship{background:linear-gradient(145deg,#3d4b5f,#202b3c);border-color:#8795a8;box-shadow:inset 0 0 15px rgba(255,255,255,.07)}.enemy-target-grid .cell:not(.disabled):hover:after{content:"＋";color:var(--yellow);font-size:20px;animation:targetPulse .7s ease-in-out infinite alternate}.fleet-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.fleet-dock{display:flex;gap:8px;margin-top:18px;padding:12px;border:1px dashed rgba(255,255,255,.10);border-radius:15px;background:rgba(0,0,0,.15)}.dock-ship{filter:grayscale(.55);opacity:.7;animation:dockBob 3s ease-in-out infinite}.dock-ship:nth-child(2){animation-delay:-.7s}.dock-ship:nth-child(3){animation-delay:-1.4s}.dock-ship:nth-child(4){animation-delay:-2.1s}.navy-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:11px}.navy-legend span{display:flex;align-items:center;gap:6px}.navy-legend i{width:12px;height:12px;border-radius:4px}.legend-ship{background:#52627a}.legend-hit{background:var(--red)}.legend-miss{background:rgba(96,165,250,.5)}.cell-fx{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);pointer-events:none;z-index:30}.cell-fx.explosion{font-size:38px;animation:explosionFx .8s ease-out forwards}.cell-fx.water{width:14px;height:14px;border:2px solid var(--cyan);border-radius:50%;animation:waterFx .9s ease-out forwards}.projectile-trail{position:fixed;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 26px var(--yellow);z-index:110;pointer-events:none;animation:projectileFly .45s cubic-bezier(.2,.9,.25,1) forwards}

.bot-toggle-grid{display:grid;gap:10px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:16px;padding:13px;background:rgba(255,255,255,.02)}.switch-row span{display:block}.switch-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.switch-row input{appearance:none;width:48px;height:27px;border-radius:999px;background:#29292e;position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}.switch-row input:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.2s}.switch-row input:checked{background:var(--yellow)}.switch-row input:checked:after{left:24px;background:#111}.bot-orb-card{text-align:center;display:grid;place-items:center;align-content:center;min-height:430px}.bot-orb{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(167,139,250,.18),transparent 67%);margin-bottom:18px}.bot-orb span{font-size:68px;animation:botFloat 2.6s ease-in-out infinite}.bot-orb i{position:absolute;inset:8px;border:1px solid rgba(167,139,250,.28);border-radius:50%;animation:botOrbit 3s linear infinite}.bot-orb i:nth-child(2){inset:25px;animation-direction:reverse;animation-duration:2.1s}.bot-orb i:nth-child(3){inset:-8px;animation-duration:4.4s}

@keyframes logoBaseHit{0%,24%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}33%{transform:translate(-58%,-46%) rotate(-12deg) scale(1.16,.82)}46%{transform:translate(-46%,-56%) rotate(6deg) scale(.94,1.08)}67%{transform:translate(-50%,-50%) rotate(-2deg) scale(1.02)}}
@keyframes logoStriker{0%{opacity:0;transform:translate(-180%,-20%) rotate(-24deg)}14%{opacity:1}31%{opacity:1;transform:translate(33%,-48%) rotate(-7deg) scale(1.12,.86)}47%{opacity:1;transform:translate(95%,-83%) rotate(18deg) scale(.92)}75%,100%{opacity:0;transform:translate(220%,-170%) rotate(42deg) scale(.72)}}
@keyframes logoImpact{0%,26%,100%{opacity:0;transform:scale(.2)}32%{opacity:1;transform:scale(.7)}49%{opacity:0;transform:scale(3.2)}}
@keyframes pageRise{from{opacity:0;transform:translateY(18px) scale(.994)}to{opacity:1;transform:none}}
@keyframes tickerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes buttonShine{0%,52%{transform:translateX(-150%)}75%,100%{transform:translateX(160%)}}
@keyframes reactorGlow{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes ringPulse{0%{transform:scale(.75);opacity:.45}100%{transform:scale(1.08);opacity:0}}
@keyframes stir{0%,100%{transform:translateX(-50%) rotate(-12deg)}50%{transform:translateX(-50%) rotate(13deg)}}
@keyframes bubbleBean{0%{opacity:0;transform:translateY(20px) scale(.55) rotate(0)}18%{opacity:1}72%{opacity:.9}100%{opacity:0;transform:translateY(-180px) translateX(45px) scale(1.1) rotate(220deg)}}
@keyframes floatCard{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes meterPulse{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.4)}}
@keyframes profileBeam{from{transform:translateX(-80%) rotate(22deg)}to{transform:translateX(350%) rotate(22deg)}}
@keyframes avatarBob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes avatarRing{to{transform:rotate(360deg)}}
@keyframes liveWave{0%{box-shadow:0 0 0 0 rgba(74,222,128,.35)}100%{box-shadow:0 0 0 12px rgba(74,222,128,0)}}
@keyframes previewAttackLeft{0%,24%,100%{transform:translateX(0) rotate(-8deg)}45%{transform:translateX(78px) rotate(20deg) scale(1.12)}62%{transform:translateX(15px) rotate(-4deg)}}
@keyframes previewAttackRight{0%,24%,100%{transform:translateX(0) rotate(8deg)}45%{transform:translateX(-78px) rotate(-20deg) scale(1.12)}62%{transform:translateX(-15px) rotate(4deg)}}
@keyframes impactRing{0%{transform:scale(.3);opacity:0}35%{opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes shipFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes torpedo{0%,20%{transform:translate(-30px,35px);opacity:0}35%{opacity:1}72%{transform:translate(85px,-18px);opacity:1}76%,100%{opacity:0}}
@keyframes miniBoom{0%,68%,100%{transform:scale(.2);opacity:0}75%{transform:scale(1.3);opacity:1}90%{transform:scale(.9);opacity:.75}}
@keyframes safetyFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes queueScan{0%{left:-5%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:105%;opacity:0}}
@keyframes scanBean{0%,100%{transform:translate(-50%,-50%) rotate(-5deg) scale(.95)}50%{transform:translate(-50%,-55%) rotate(5deg) scale(1.08)}}
@keyframes vsParticle{from{transform:rotate(0) translateX(36px) rotate(0)}to{transform:rotate(360deg) translateX(36px) rotate(-360deg)}}
@keyframes shockwave{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.7);opacity:0}}
@keyframes flashPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes resultIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes historySlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes matchCardIn{from{opacity:0;transform:scale(.72) rotate(-2deg)}to{opacity:1;transform:scale(1)}}
@keyframes mfLeft{to{transform:translateX(12px) rotate(10deg)}}@keyframes mfRight{to{transform:translateX(-12px) rotate(-10deg)}}
@keyframes oceanWave{0%,100%{transform:translateX(-4%) scaleY(.8)}50%{transform:translateX(4%) scaleY(1.15)}}
@keyframes targetPulse{to{transform:scale(1.25);text-shadow:0 0 12px var(--yellow)}}
@keyframes dockBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes explosionFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(12deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1) rotate(35deg)}}
@keyframes waterFx{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
@keyframes projectileFly{from{opacity:1;transform:translate(var(--from-x),var(--from-y)) scale(.8)}to{opacity:0;transform:translate(var(--to-x),var(--to-y)) scale(1.25)}}
@keyframes botFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes botOrbit{to{transform:rotate(360deg)}}

@media(max-width:980px){.hero-v3{grid-template-columns:1fr}.kitchen-v3{min-height:520px}.floating-rps{left:8%}.floating-navy{right:5%}.reactor-meter{right:8%}.game-grid-v3 .gamecard{min-height:450px}.navy-grid .ocean-card{min-height:auto}}
@media(max-width:700px){.landing-nav{align-items:flex-start}.landing-status{display:none}.hero-v3 h1{font-size:62px}.floating-card{display:none}.reactor-meter{right:1%;bottom:8%}.ring-three{display:none}.profile-name{font-size:34px}.lobby-heading{align-items:flex-start;flex-direction:column}.match-found-card{grid-template-columns:1fr 1.5fr 1fr;min-height:210px}.mf-bean{font-size:45px}.duel-v3{grid-template-columns:1fr}.versus-core{margin:auto}.choices-v3{grid-template-columns:1fr}.navy-grid .ocean-card{padding:15px}.coordinate-frame{padding-left:20px}.axis-top{left:20px}.axis-left{left:2px}.bot-toggle-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bean-logo .bean-base,.bean-logo .bean-striker,.bean-logo .bean-impact{animation:none!important}.bean-logo .bean-base{transform:translate(-50%,-50%)}.bean-logo .bean-striker{display:none}}
.impact-bit{position:absolute;left:50%;top:50%;width:6px;height:18px;border-radius:999px;background:linear-gradient(#fff,var(--yellow));transform-origin:50% 44px;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-42px);animation:impactBit .72s ease-out forwards;pointer-events:none;z-index:25}.result-banner.good-banner{border-color:rgba(74,222,128,.38);background:rgba(74,222,128,.055)}.result-banner.bad-banner{border-color:rgba(251,113,133,.38);background:rgba(251,113,133,.055)}
@keyframes impactBit{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-20px) scaleY(.3)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-100px) scaleY(1.1)}}

/* =========================================================
   V2.2 GAMEPLAY UX — open tables, payout clarity, sounds,
   cinematic RPS, draggable Bean ships, finale scenes
   ========================================================= */
.sound-toggle{min-width:104px;text-align:center}
.payout-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:15px 0 5px;padding:10px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(90deg,rgba(250,204,21,.035),rgba(255,255,255,.018))}
.payout-strip span{padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.022)}.payout-strip small{display:block;color:var(--muted);font-size:10px;letter-spacing:.09em;text-transform:uppercase}.payout-strip strong{display:block;font-size:19px;margin-top:2px}.payout-strip .payout-main{border:1px solid rgba(250,204,21,.27);background:rgba(250,204,21,.065)}.payout-strip .payout-main strong{color:var(--yellow)}
.match-money-card{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 4px}.match-money-card span{display:flex;gap:5px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted);font-size:11px}.match-money-card b{color:var(--text);font-size:12px}.navy-match-money{margin:8px 0 12px}
.open-games-panel{margin-top:18px;border-top:1px solid var(--line);padding-top:17px}.open-games-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.open-games-head small{font-size:9px;letter-spacing:.18em;color:var(--yellow);font-weight:900}.open-games-head h3{margin:3px 0 10px}.open-games-list{display:grid;gap:8px;max-height:290px;overflow:auto;padding-right:3px}.open-empty{border:1px dashed var(--line);border-radius:14px;padding:16px;color:var(--muted);text-align:center}.open-game-row{display:grid;grid-template-columns:minmax(120px,1fr) auto auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.022);transition:.18s}.open-game-row:hover{border-color:rgba(250,204,21,.35);transform:translateX(2px)}.open-game-row strong{display:block}.open-game-row small{display:block;color:var(--muted);font-size:10px}.open-game-money{display:flex;gap:8px}.open-game-money span{font-size:10px;color:var(--muted);text-align:center}.open-game-money b{display:block;color:var(--text);font-size:13px}.navy-open-games{position:relative;z-index:3}.navy-open-row:hover{border-color:rgba(34,211,238,.38)}
.rps-cinematic-layer{position:absolute;inset:0;display:none;place-items:center;pointer-events:none;z-index:60;overflow:hidden;border-radius:22px}.rps-cinematic-layer.active{display:grid}.rps-cinematic{position:absolute;inset:0;background:radial-gradient(circle,rgba(250,204,21,.22),rgba(0,0,0,.91) 65%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;animation:cinematicFade 1.45s ease both}.cinematic-move{font-size:clamp(80px,11vw,145px);filter:drop-shadow(0 20px 24px rgba(0,0,0,.6));z-index:4}.cinematic-caption{font-size:clamp(18px,4vw,42px);font-weight:1000;letter-spacing:.04em;color:var(--yellow);text-shadow:0 0 28px rgba(250,204,21,.5);z-index:6;animation:captionPop 1.1s ease both}.cinematic-debris{position:absolute;left:50%;top:50%}.cinematic-debris i{position:absolute;width:13px;height:7px;background:var(--yellow);border-radius:5px;opacity:0}.cinematic-debris i:nth-child(1){--dx:-130px;--dy:-90px}.cinematic-debris i:nth-child(2){--dx:120px;--dy:-70px}.cinematic-debris i:nth-child(3){--dx:-110px;--dy:80px}.cinematic-debris i:nth-child(4){--dx:135px;--dy:95px}.cinematic-debris i:nth-child(5){--dx:-25px;--dy:-135px}.cinematic-debris i:nth-child(6){--dx:35px;--dy:130px}.rps-cinematic .cinematic-debris i{animation:cinematicDebris .75s .28s ease-out forwards}
.rps-cinematic.rock-crush .cinematic-move[data-move="rock"]{animation:rockCrusher 1.15s cubic-bezier(.2,.9,.25,1) both}.rps-cinematic.rock-crush .cinematic-move[data-move="scissors"]{animation:scissorSmash 1.2s cubic-bezier(.2,.9,.25,1) both}.rps-cinematic.paper-wrap .cinematic-move[data-move="paper"]{animation:paperWrapper 1.25s ease both}.rps-cinematic.paper-wrap .cinematic-move[data-move="rock"]{animation:rockWrapped 1.2s ease both}.rps-cinematic.scissor-cut .cinematic-move[data-move="scissors"]{animation:scissorSnip 1.15s ease both}.rps-cinematic.scissor-cut .cinematic-move[data-move="paper"]{animation:paperCut 1.2s ease both}.rps-cinematic.draw-bump .left-move{animation:drawLeft 1s ease both}.rps-cinematic.draw-bump .right-move{animation:drawRight 1s ease both}.rps-cinematic.winner-left .right-move,.rps-cinematic.winner-right .left-move{filter:grayscale(.5) drop-shadow(0 20px 24px rgba(0,0,0,.6))}.rps-cinematic.rock-crush .right-move[data-move="rock"]{animation-name:rockCrusherRight}.rps-cinematic.paper-wrap .right-move[data-move="paper"]{animation-name:paperWrapperRight}.rps-cinematic.scissor-cut .right-move[data-move="scissors"]{animation-name:scissorSnipRight}
.placement-tutorial{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 3px}.placement-tutorial span{font-size:10px;color:var(--muted);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:999px;padding:6px 9px}.placement-tutorial b{color:var(--yellow)}
.battle-board-shell{position:relative;width:100%}.ship-layer{position:absolute;inset:0;pointer-events:none;z-index:8}.placed-bean-ship{position:absolute;border:0;background:transparent;padding:2px;pointer-events:auto;cursor:grab;z-index:10;filter:drop-shadow(0 8px 8px rgba(0,0,0,.42));transition:filter .16s,transform .16s}.placed-bean-ship:active{cursor:grabbing}.placed-bean-ship.selected{filter:drop-shadow(0 0 12px var(--yellow)) drop-shadow(0 8px 8px rgba(0,0,0,.5));z-index:15}.placed-bean-ship.damaged{filter:sepia(.65) saturate(1.7) drop-shadow(0 0 9px var(--red))}.placed-bean-ship .ship-art{position:absolute;inset:2px;display:grid;place-items:center;overflow:visible}.placed-bean-ship img{width:100%;height:100%;object-fit:fill;pointer-events:none}.placed-bean-ship.vertical .ship-art{left:50%;top:50%;right:auto;bottom:auto;width:calc(100% * var(--ship-length,3));height:calc(100% / var(--ship-length,3));transform:translate(-50%,-50%) rotate(90deg)}.cell.ship-cell{background:linear-gradient(145deg,rgba(61,75,95,.36),rgba(32,43,60,.28));border-color:rgba(135,149,168,.35)}.cell.drop-target{border-color:var(--yellow)!important;background:rgba(250,204,21,.16)!important;box-shadow:inset 0 0 18px rgba(250,204,21,.15)}
.fleet-dock{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}.dock-ship-card{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);padding:8px;cursor:pointer;color:var(--text);transition:.18s;min-height:90px}.dock-ship-card img{display:block;width:100%;height:42px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))}.dock-ship-card span{display:block;font-weight:900;font-size:12px}.dock-ship-card small{display:block;color:var(--muted);font-size:9px}.dock-ship-card:hover,.dock-ship-card.selected{border-color:var(--yellow);transform:translateY(-2px)}.dock-ship-card.placed{opacity:.38;filter:grayscale(.8);cursor:default;transform:none}
.navy-finale{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.88);backdrop-filter:blur(14px);display:grid;place-items:center;padding:18px}.navy-finale-card{width:min(850px,100%);min-height:520px;border:1px solid rgba(96,165,250,.25);border-radius:34px;overflow:hidden;background:#071019;box-shadow:0 50px 160px rgba(0,0,0,.75);display:grid;grid-template-rows:1fr auto}.finale-sea{position:relative;min-height:350px;background:linear-gradient(#071523 0 50%,#07324b 50% 100%);overflow:hidden}.finale-sea:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(250,204,21,.2),transparent 35%)}.finale-waves{position:absolute;left:-10%;right:-10%;top:49%;height:120px;background:repeating-radial-gradient(ellipse at 50% 0,rgba(255,255,255,.16) 0 2px,transparent 3px 45px);animation:finaleWaves 5s linear infinite}.finale-ship{position:absolute;width:72%;left:14%;top:36%;animation:celebrationShip 2.3s ease-in-out infinite}.finale-ship>img{width:100%;filter:drop-shadow(0 22px 16px rgba(0,0,0,.55))}.cheering-beans,.violin-beans{position:absolute;inset:0;pointer-events:none}.cheering-beans span{position:absolute;font-size:48px;animation:beanCheer .55s ease-in-out infinite alternate}.cheering-beans span:nth-child(1){left:18%;top:-12%}.cheering-beans span:nth-child(2){left:37%;top:-20%;animation-delay:-.18s}.cheering-beans span:nth-child(3){right:30%;top:-15%;animation-delay:-.32s}.cheering-beans span:nth-child(4){right:12%;top:-8%;animation-delay:-.44s}.violin-beans{display:none}.violin-beans span{position:absolute;font-size:38px;top:-10%;animation:violinRock 1.4s ease-in-out infinite alternate}.violin-beans span:first-child{left:31%}.violin-beans span:last-child{right:28%;animation-delay:-.7s}.navy-finale.lose .cheering-beans{display:none}.navy-finale.lose .violin-beans{display:block}.navy-finale.lose .finale-ship{animation:sinkingShip 7s ease-in forwards;transform-origin:60% 70%}.navy-finale.lose .finale-sea{background:linear-gradient(#08111c 0 48%,#062238 48% 100%)}.navy-finale.win .finale-sea:after{content:"✨  ✨  🎉  ✨  🎉  ✨";position:absolute;left:0;right:0;top:12%;text-align:center;font-size:28px;letter-spacing:1.2em;animation:skySparkle 1.4s ease-in-out infinite alternate}.finale-copy{padding:22px 25px;background:#090d13;text-align:center}.finale-copy small{letter-spacing:.18em;color:var(--yellow);font-weight:900}.finale-copy h2{margin:8px 0}.finale-copy p{color:var(--muted);max-width:620px;margin:0 auto 17px}
.security-alert{border-left:4px solid var(--yellow)}.security-alert.high,.security-alert.critical{border-left-color:var(--red)}.severity-badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;text-transform:uppercase}.severity-low{background:rgba(96,165,250,.12);color:var(--blue)}.severity-medium{background:rgba(250,204,21,.12);color:var(--yellow)}.severity-high,.severity-critical{background:rgba(251,113,133,.13);color:var(--red)}
@keyframes cinematicFade{0%{opacity:0;transform:scale(1.12)}12%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@keyframes captionPop{0%{opacity:0;transform:scale(.2) rotate(-12deg)}35%{opacity:1;transform:scale(1.2) rotate(4deg)}55%,100%{transform:scale(1) rotate(0)}}
@keyframes cinematicDebris{0%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(440deg)}}
@keyframes rockCrusher{0%{transform:translateX(0) rotate(0)}35%{transform:translateX(55%) rotate(50deg) scale(1.2)}50%{transform:translateX(60%) rotate(75deg) scale(1.35)}100%{transform:translateX(42%) rotate(120deg) scale(1.08)}}@keyframes rockCrusherRight{0%{transform:translateX(0) rotate(0)}35%{transform:translateX(-55%) rotate(-50deg) scale(1.2)}50%{transform:translateX(-60%) rotate(-75deg) scale(1.35)}100%{transform:translateX(-42%) rotate(-120deg) scale(1.08)}}
@keyframes scissorSmash{0%,35%{transform:none}52%{transform:translateY(20px) rotate(25deg) scaleY(.65)}70%,100%{transform:translateY(70px) rotate(85deg) scale(.72);filter:grayscale(1) blur(1px)}}
@keyframes paperWrapper{0%{transform:none}40%{transform:translateX(48%) scale(1.22) rotate(-12deg)}70%,100%{transform:translateX(48%) scale(1.5,1.1) rotate(8deg)}}@keyframes paperWrapperRight{0%{transform:none}40%{transform:translateX(-48%) scale(1.22) rotate(12deg)}70%,100%{transform:translateX(-48%) scale(1.5,1.1) rotate(-8deg)}}
@keyframes rockWrapped{0%,35%{transform:none}65%,100%{transform:scale(.6) rotate(20deg);filter:brightness(.65)}}
@keyframes scissorSnip{0%{transform:none}35%{transform:translateX(45%) rotate(-20deg) scale(1.22)}50%{transform:translateX(50%) rotate(20deg) scale(1.3)}72%,100%{transform:translateX(40%) rotate(-12deg)}}@keyframes scissorSnipRight{0%{transform:none}35%{transform:translateX(-45%) rotate(20deg) scale(1.22)}50%{transform:translateX(-50%) rotate(-20deg) scale(1.3)}72%,100%{transform:translateX(-40%) rotate(12deg)}}
@keyframes paperCut{0%,35%{transform:none}58%{transform:translateY(-8px) skewX(12deg)}75%,100%{transform:translateY(55px) rotate(35deg) scale(.7);filter:opacity(.45)}}
@keyframes drawLeft{0%{transform:none}45%{transform:translateX(65%) rotate(12deg)}62%{transform:translateX(45%) rotate(-8deg)}100%{transform:none}}
@keyframes drawRight{0%{transform:none}45%{transform:translateX(-65%) rotate(-12deg)}62%{transform:translateX(-45%) rotate(8deg)}100%{transform:none}}
@keyframes finaleWaves{to{transform:translateX(90px)}}@keyframes celebrationShip{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}@keyframes beanCheer{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-18px) rotate(9deg)}}@keyframes violinRock{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}@keyframes sinkingShip{0%{transform:translateY(0) rotate(0);opacity:1}22%{transform:translateY(18px) rotate(-7deg)}65%{transform:translateY(155px) rotate(-23deg);opacity:1}100%{transform:translateY(390px) rotate(-38deg);opacity:.12}}@keyframes skySparkle{from{transform:translateY(0);opacity:.6}to{transform:translateY(-12px);opacity:1}}
@media(max-width:900px){.payout-strip{grid-template-columns:repeat(2,1fr)}.payout-strip .payout-main{grid-column:span 2}.open-game-row{grid-template-columns:1fr auto}.open-game-money{grid-column:1/-1;justify-content:space-between}.navy-finale-card{min-height:430px}.finale-sea{min-height:290px}}
@media(max-width:600px){.payout-strip{grid-template-columns:1fr 1fr}.open-game-row{grid-template-columns:1fr}.open-game-row .btn{width:100%}.placement-tutorial span{width:100%}.fleet-dock{grid-template-columns:repeat(2,1fr)!important}.navy-finale-card{min-height:390px}.finale-sea{min-height:240px}.finale-ship{width:92%;left:4%;top:42%}.cheering-beans span{font-size:30px}.violin-beans span{font-size:27px}.cinematic-move{font-size:70px}.cinematic-caption{font-size:18px}}

/* =========================================================
   V2.3 MASCOT CINEMATICS + PREMIUM AUDIO VISUAL SYSTEM
   ========================================================= */
.mascot-logo img,.mascot-match img,.mascot-scan img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.bean-logo .mascot-logo{font-size:0;width:39px;height:48px;background:none!important;border:0!important;box-shadow:none!important}
.mascot-scan{width:78px;height:78px;display:grid;place-items:center;cursor:pointer;position:relative}.mascot-match{width:95px;height:112px;font-size:0!important;display:block}
.mascot-quippy{position:absolute;left:50%;bottom:105%;transform:translateX(-50%);min-width:145px;max-width:220px;background:#fff;color:#1c0d08;border:3px solid #2f160e;border-radius:16px;padding:9px 11px;font-size:12px;font-weight:900;line-height:1.15;text-align:center;box-shadow:0 15px 35px rgba(0,0,0,.35);animation:quippyPop 1.75s ease both;z-index:250;pointer-events:none}.mascot-quippy:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#2f160e}.mascot-poke{animation:mascotPoke .45s cubic-bezier(.2,.9,.2,1)}
.arena-bean{width:150px;height:160px;position:relative;margin:2px auto -16px;cursor:pointer;transform-origin:50% 85%;animation:arenaBeanIdle 2.8s ease-in-out infinite}.arena-bean img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 12px rgba(0,0,0,.5))}.arena-bean.rival-bean{transform:scaleX(-1)}.arena-bean-arm{position:absolute;width:44px;height:17px;border:8px solid #3a160d;border-left:0;border-radius:0 999px 999px 0;right:-9px;top:88px;transform-origin:left center;animation:arenaArm .9s ease-in-out infinite alternate}.move-badge{position:absolute;right:11%;top:41%;width:54px;height:54px;display:grid!important;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#08080a;font-size:30px!important;box-shadow:0 10px 28px rgba(0,0,0,.45);z-index:7}.fighter:last-of-type .move-badge{left:11%;right:auto}
.prop-mini{width:76px;height:76px!important;position:relative;display:block!important;margin:auto;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4))}.rock-mini{border-radius:48% 42% 52% 46%;background:linear-gradient(145deg,#80858e,#333840 62%,#171a20);border:4px solid #a7adb6;transform:rotate(-8deg)}.rock-mini i,.rock-mini b{position:absolute;background:#1b1d22;height:5px;border-radius:9px;transform:rotate(25deg)}.rock-mini i{width:28px;left:13px;top:23px}.rock-mini b{width:18px;right:10px;bottom:19px;transform:rotate(-36deg)}.paper-mini{width:65px;height:76px!important;border-radius:8px;background:linear-gradient(145deg,#fffef0,#d8d8d0);border:4px solid #343434;transform:rotate(6deg)}.paper-mini:before,.paper-mini:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#2c190d;top:24px}.paper-mini:before{left:15px}.paper-mini:after{right:15px}.paper-mini i{position:absolute;width:25px;height:9px;border-bottom:4px solid #2c190d;border-radius:50%;left:16px;top:40px}.scissors-mini:before,.scissors-mini:after{content:"";position:absolute;width:14px;height:63px;background:linear-gradient(90deg,#cbd5e1,#6b7280);border:3px solid #24262c;border-radius:999px 999px 5px 5px;left:31px;top:1px;transform-origin:50% 72%}.scissors-mini:before{transform:rotate(28deg)}.scissors-mini:after{transform:rotate(-28deg)}.scissors-mini i,.scissors-mini b{position:absolute;width:26px;height:26px;border:8px solid #ef4444;border-radius:50%;bottom:-1px;left:5px}.scissors-mini b{left:43px}
.rps-cinematic-layer.active{pointer-events:auto}.rps-story{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(250,204,21,.21),transparent 30%),linear-gradient(180deg,#15100b 0,#090808 68%,#040404 100%);animation:storyIn 2.7s ease both}.cinema-light{position:absolute;width:70%;height:80%;left:15%;top:-20%;background:radial-gradient(ellipse,rgba(255,220,110,.25),transparent 67%);filter:blur(6px);animation:cinemaLightPulse 1.2s ease-in-out infinite alternate}.cinema-floor{position:absolute;left:-10%;right:-10%;bottom:-13%;height:44%;border-radius:50%;background:radial-gradient(ellipse,rgba(250,204,21,.16),rgba(30,16,8,.66) 46%,#020202 72%);transform:perspective(500px) rotateX(64deg)}
.cinema-bean{position:absolute;width:29%;max-width:220px;min-width:125px;bottom:13%;z-index:14;transform-origin:50% 88%;cursor:pointer}.cinema-bean img{width:100%;display:block;filter:drop-shadow(0 22px 15px rgba(0,0,0,.72))}.cinema-bean.bean-left{left:5%;animation:beanEntranceLeft .52s cubic-bezier(.2,.9,.2,1) both}.cinema-bean.bean-right{right:5%;transform:scaleX(-1);animation:beanEntranceRight .52s cubic-bezier(.2,.9,.2,1) both}.cinema-bean .bean-arm{position:absolute;width:48%;height:14%;border:10px solid #3a160d;border-left:0;border-radius:0 999px 999px 0;top:48%;right:-24%;transform-origin:left center;background:#8f3f15}.cinema-bean .arm-two{top:62%;right:-19%;scale:.78}.cinema-bean.bean-winner{animation-name:beanVictoryBounce}.cinema-bean.bean-loser{animation-name:beanLoserRecoil}.cinema-bean.bean-draw{animation-name:beanDrawBonk}.reaction-stars{position:absolute;inset:-15% -15% auto auto;width:90px;height:90px;display:none}.reaction-stars i{position:absolute;color:var(--yellow);font-size:27px;text-shadow:0 0 15px rgba(250,204,21,.5)}.reaction-stars i:nth-child(1){left:4px;top:28px}.reaction-stars i:nth-child(2){right:5px;top:5px}.reaction-stars i:nth-child(3){right:8px;bottom:3px}.bean-loser .reaction-stars,.bean-draw .reaction-stars{display:block;animation:starOrbit .9s linear 1.1s infinite}
.rps-prop{position:absolute;z-index:22;width:155px;height:155px;top:31%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.62));transform-origin:50% 72%}.rps-prop.prop-left{left:27%}.rps-prop.prop-right{right:27%}.rock-core{position:absolute;inset:9%;border-radius:48% 42% 52% 46%;background:radial-gradient(circle at 32% 22%,#a7acb4 0 10%,transparent 11%),linear-gradient(145deg,#777d86,#343941 58%,#16181d);border:7px solid #9da2aa;box-shadow:inset -18px -22px 0 rgba(0,0,0,.18);transform:rotate(-9deg)}.rock-core i{position:absolute;width:32px;height:7px;background:#1b1d22;border-radius:9px}.rock-core i:nth-child(1){left:20%;top:34%;rotate:28deg}.rock-core i:nth-child(2){right:16%;bottom:28%;rotate:-36deg}.rock-core i:nth-child(3){left:38%;bottom:16%;rotate:14deg}.rock-core b{position:absolute;inset:0;background:linear-gradient(100deg,transparent 47%,#f7df8c 49% 51%,transparent 53%);opacity:0}
.prop-scissors .scissor-piece{position:absolute;left:50%;top:6%;width:28px;height:128px;transform-origin:50% 73%}.prop-scissors .blade-a{transform:translateX(-50%) rotate(31deg)}.prop-scissors .blade-b{transform:translateX(-50%) rotate(-31deg)}.scissor-piece .blade{position:absolute;left:4px;top:0;width:20px;height:92px;background:linear-gradient(90deg,#eef3f8,#818a96 48%,#d8dde3);border:4px solid #252830;border-radius:999px 999px 8px 8px;clip-path:polygon(50% 0,100% 100%,0 100%)}.scissor-piece .handle{position:absolute;width:43px;height:43px;border:12px solid #ef2b2d;border-radius:50%;left:-8px;bottom:-3px;box-shadow:inset 0 0 0 3px #581215}.scissor-spring{position:absolute;width:24px;height:24px;border-radius:50%;background:#facc15;border:6px solid #2a1a0c;left:65px;top:83px;z-index:8}
.prop-paper .paper-whole,.prop-paper .paper-half{position:absolute;left:19%;top:6%;width:62%;height:88%;border:6px solid #323232;border-radius:11px;background:linear-gradient(145deg,#fffef2,#d7d6ca);box-shadow:inset -12px -14px 0 rgba(0,0,0,.06)}.paper-eye{position:absolute;width:9px;height:9px;border-radius:50%;background:#2b160b;top:36%}.paper-eye.e1{left:27%}.paper-eye.e2{right:27%}.paper-mouth{position:absolute;width:29%;height:14%;left:35%;top:55%;border-bottom:5px solid #2b160b;border-radius:50%}.crease{position:absolute;width:31%;height:3px;background:#a5a49a}.crease.c1{left:15%;top:17%;rotate:-8deg}.crease.c2{right:12%;bottom:17%;rotate:10deg}.prop-paper .paper-half{opacity:0}.story-impact{position:absolute;left:50%;top:49%;width:80px;height:80px;transform:translate(-50%,-50%);z-index:40;opacity:0}.story-impact span{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,var(--yellow) 9% 24%,rgba(250,204,21,.15) 25% 52%,transparent 53%)}.story-impact i{position:absolute;left:50%;top:50%;width:9px;height:80px;background:linear-gradient(#fff,var(--yellow),transparent);transform-origin:50% 0}.story-impact i:nth-child(2){rotate:0deg}.story-impact i:nth-child(3){rotate:90deg}.story-impact i:nth-child(4){rotate:180deg}.story-impact i:nth-child(5){rotate:270deg}.story-impact b{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:22px;color:#180c05;background:#fff;border:4px solid #32150a;border-radius:999px;padding:5px 10px;white-space:nowrap}.easy-sticker{position:absolute;width:min(38%,300px);right:3%;top:5%;z-index:55;opacity:0;transform:rotate(10deg) scale(.3);filter:drop-shadow(0 16px 13px rgba(0,0,0,.55))}.story-caption{position:absolute;left:50%;bottom:4%;translate:-50% 0;z-index:70;text-align:center;width:92%;opacity:0}.story-caption strong{display:block;color:var(--yellow);font-size:clamp(20px,4vw,43px);line-height:1;font-weight:1000;text-shadow:0 4px 0 #35170a,0 0 24px rgba(250,204,21,.32)}.story-caption small{display:block;margin-top:7px;color:#fff;font-size:13px;font-weight:800}
.story-impact{animation:storyImpact .52s .76s ease-out both}.story-caption{animation:storyCaption .55s 1.58s ease both}.story-rock-crush .rps-prop[data-move="rock"].prop-left{animation:realRockLeft 1.55s cubic-bezier(.16,.82,.22,1) both}.story-rock-crush .rps-prop[data-move="rock"].prop-right{animation:realRockRight 1.55s cubic-bezier(.16,.82,.22,1) both}.story-rock-crush .rps-prop[data-move="scissors"] .blade-a{animation:bladeExplodeA .85s .78s cubic-bezier(.15,.8,.25,1) both}.story-rock-crush .rps-prop[data-move="scissors"] .blade-b{animation:bladeExplodeB .85s .78s cubic-bezier(.15,.8,.25,1) both}.story-rock-crush .rps-prop[data-move="scissors"] .scissor-spring{animation:springPop .8s .78s ease-out both}.story-rock-crush .rock-core b{animation:rockFlash .26s .72s ease both}.story-rock-crush .easy-sticker{animation:stickerSlap .5s 1.37s cubic-bezier(.2,1.3,.3,1) both}.story-scissor-cut .rps-prop[data-move="scissors"].prop-left{animation:realScissorLeft 1.42s ease both}.story-scissor-cut .rps-prop[data-move="scissors"].prop-right{animation:realScissorRight 1.42s ease both}.story-scissor-cut .rps-prop[data-move="scissors"] .blade-a{animation:snipBladeA .58s .38s ease-in-out both}.story-scissor-cut .rps-prop[data-move="scissors"] .blade-b{animation:snipBladeB .58s .38s ease-in-out both}.story-scissor-cut .rps-prop[data-move="paper"] .paper-whole{animation:paperVanish .01s .82s linear forwards}.story-scissor-cut .rps-prop[data-move="paper"] .paper-half{opacity:1}.story-scissor-cut .rps-prop[data-move="paper"] .half-a{clip-path:polygon(0 0,100% 0,46% 100%,0 100%);animation:paperHalfA .9s .82s ease-out both}.story-scissor-cut .rps-prop[data-move="paper"] .half-b{clip-path:polygon(100% 0,100% 100%,46% 100%,0 0);animation:paperHalfB .9s .82s ease-out both}.story-scissor-cut .easy-sticker{animation:stickerSlap .5s 1.38s cubic-bezier(.2,1.3,.3,1) both}.story-paper-wrap .rps-prop[data-move="paper"].prop-left{animation:paperChargeLeft 1.55s ease both}.story-paper-wrap .rps-prop[data-move="paper"].prop-right{animation:paperChargeRight 1.55s ease both}.story-paper-wrap .rps-prop[data-move="rock"]{animation:rockBurrito 1.25s .45s ease both}.story-paper-wrap .rps-prop[data-move="paper"] .paper-whole{animation:paperExpand 1.35s .25s ease both}.story-paper-wrap .easy-sticker{animation:stickerSlap .5s 1.25s cubic-bezier(.2,1.3,.3,1) both}.story-draw-bump .prop-left{animation:propBonkLeft 1.25s ease both}.story-draw-bump .prop-right{animation:propBonkRight 1.25s ease both}.story-draw-bump .story-impact b{font-size:0}.story-draw-bump .story-impact b:after{content:"BONK";font-size:22px}.story-draw-bump .easy-sticker{display:none}
@keyframes quippyPop{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}15%,78%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-7px) scale(.96)}}@keyframes mascotPoke{0%{transform:scale(1)}35%{transform:scale(.91,1.08) rotate(-4deg)}70%{transform:scale(1.08,.92) rotate(4deg)}100%{transform:scale(1)}}@keyframes arenaBeanIdle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes arenaArm{from{rotate:-9deg}to{rotate:12deg}}@keyframes storyIn{0%{opacity:0;filter:blur(8px)}8%,89%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(3px)}}@keyframes cinemaLightPulse{from{opacity:.5;scale:.95}to{opacity:1;scale:1.05}}@keyframes beanEntranceLeft{from{translate:-180% 0;rotate:-18deg}to{translate:0 0}}@keyframes beanEntranceRight{from{translate:180% 0;rotate:18deg}to{translate:0 0;transform:scaleX(-1)}}@keyframes beanVictoryBounce{0%{translate:-150% 0}20%{translate:0 0}54%{translate:0 0;scale:1}65%{translate:0 -18px;scale:1.04 .96}78%{translate:0 0;scale:.98 1.04}100%{translate:0 0}}@keyframes beanLoserRecoil{0%{translate:150% 0}22%{translate:0 0}47%{translate:0 0}58%{translate:0 18px;rotate:10deg;scale:1.14 .7}72%,100%{translate:0 28px;rotate:14deg;scale:1.12 .68;filter:grayscale(.35)}}@keyframes beanDrawBonk{0%{translate:0 0}38%{translate:20px 0;rotate:5deg}52%{translate:0 10px;rotate:-7deg}70%,100%{translate:0 4px;rotate:4deg}}@keyframes starOrbit{to{rotate:360deg}}@keyframes storyImpact{0%{opacity:0;scale:.1;rotate:-25deg}35%{opacity:1;scale:1.45;rotate:7deg}100%{opacity:0;scale:2.2;rotate:22deg}}@keyframes storyCaption{from{opacity:0;translate:-50% 30px;scale:.7}to{opacity:1;translate:-50% 0;scale:1}}
@keyframes realRockLeft{0%{translate:-25px -100px;rotate:-55deg;scale:.7}42%{translate:100px -20px;rotate:32deg;scale:1.15}58%{translate:145px 22px;rotate:80deg;scale:1.34}70%,100%{translate:122px 34px;rotate:115deg;scale:1.2}}@keyframes realRockRight{0%{translate:25px -100px;rotate:55deg;scale:.7}42%{translate:-100px -20px;rotate:-32deg;scale:1.15}58%{translate:-145px 22px;rotate:-80deg;scale:1.34}70%,100%{translate:-122px 34px;rotate:-115deg;scale:1.2}}@keyframes bladeExplodeA{0%{transform:translateX(-50%) rotate(31deg)}28%{transform:translateX(-50%) rotate(5deg) scaleY(.75)}100%{transform:translate(-120px,95px) rotate(-260deg) scale(.72);opacity:.2}}@keyframes bladeExplodeB{0%{transform:translateX(-50%) rotate(-31deg)}28%{transform:translateX(-50%) rotate(-5deg) scaleY(.75)}100%{transform:translate(105px,88px) rotate(280deg) scale(.72);opacity:.2}}@keyframes springPop{0%{scale:1}35%{scale:.4}100%{translate:0 -130px;rotate:520deg;scale:.7;opacity:0}}@keyframes rockFlash{0%,100%{opacity:0}50%{opacity:1}}@keyframes realScissorLeft{0%{translate:-60px 55px;rotate:-35deg;scale:.75}35%{translate:75px -10px;rotate:8deg;scale:1.15}68%,100%{translate:120px 0;rotate:-4deg;scale:1.08}}@keyframes realScissorRight{0%{translate:60px 55px;rotate:35deg;scale:.75}35%{translate:-75px -10px;rotate:-8deg;scale:1.15}68%,100%{translate:-120px 0;rotate:4deg;scale:1.08}}@keyframes snipBladeA{0%,25%{transform:translateX(-50%) rotate(31deg)}60%,100%{transform:translateX(-50%) rotate(2deg)}}@keyframes snipBladeB{0%,25%{transform:translateX(-50%) rotate(-31deg)}60%,100%{transform:translateX(-50%) rotate(-2deg)}}@keyframes paperVanish{to{opacity:0}}@keyframes paperHalfA{0%{translate:0 0;rotate:0}100%{translate:-80px 115px;rotate:-145deg;opacity:.18}}@keyframes paperHalfB{0%{translate:0 0;rotate:0}100%{translate:90px 100px;rotate:132deg;opacity:.18}}@keyframes paperChargeLeft{0%{translate:-30px 15px;rotate:-18deg;scale:.72}42%{translate:95px -8px;rotate:8deg;scale:1.2}72%,100%{translate:130px -5px;rotate:0;scale:1.6 1.18}}@keyframes paperChargeRight{0%{translate:30px 15px;rotate:18deg;scale:.72}42%{translate:-95px -8px;rotate:-8deg;scale:1.2}72%,100%{translate:-130px -5px;rotate:0;scale:1.6 1.18}}@keyframes paperExpand{0%,22%{transform:scale(1)}65%,100%{transform:scale(1.55,1.06);border-radius:45% 14% 45% 14%}}@keyframes rockBurrito{0%,35%{scale:1}62%,100%{scale:.58;rotate:24deg;filter:brightness(.58) blur(.4px)}}@keyframes stickerSlap{0%{opacity:0;transform:rotate(22deg) scale(.22)}68%{opacity:1;transform:rotate(-4deg) scale(1.16)}100%{opacity:1;transform:rotate(3deg) scale(1)}}@keyframes propBonkLeft{0%{translate:-50px 0}45%{translate:115px 0;rotate:25deg}58%{translate:70px 20px;rotate:-20deg}100%{translate:-10px 35px;rotate:18deg}}@keyframes propBonkRight{0%{translate:50px 0}45%{translate:-115px 0;rotate:-25deg}58%{translate:-70px 20px;rotate:20deg}100%{translate:10px 35px;rotate:-18deg}}
@media(max-width:700px){.cinema-bean{width:31%;min-width:95px}.rps-prop{width:105px;height:105px;top:35%}.rps-prop.prop-left{left:24%}.rps-prop.prop-right{right:24%}.story-caption{bottom:3%}.easy-sticker{width:42%;top:9%}.arena-bean{width:118px;height:130px}.move-badge{width:44px;height:44px;font-size:24px!important}.mascot-quippy{min-width:120px;font-size:10px}}

/* Premium Bean Navy interactions */
.ship-deck-mascot{position:absolute;right:11%;top:-22%;width:24%;height:70%;z-index:8;pointer-events:auto;cursor:pointer;transform-origin:50% 85%;animation:deckCaptain 1.2s ease-in-out infinite alternate}.placed-bean-ship .ship-deck-mascot img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 5px 4px rgba(0,0,0,.45))}.ship-speech{position:absolute;right:-6%;top:-45%;background:#fff;color:#25120b;border:2px solid #31150c;border-radius:10px;padding:4px 7px;font-size:8px;font-weight:900;opacity:0;transform:translateY(6px);transition:.18s;white-space:nowrap;pointer-events:none}.placed-bean-ship.selected .ship-speech,.placed-bean-ship:hover .ship-speech{opacity:1;transform:translateY(0)}
.dock-ship-card img{content:url('/assets/bean-ship-premium.svg')}.ship-match{filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}.ship-match.left{animation:shipMatchLeft .8s cubic-bezier(.2,.9,.2,1) infinite alternate}.ship-match.right{animation:shipMatchRight .8s cubic-bezier(.2,.9,.2,1) infinite alternate}
.naval-shot-story{position:fixed;inset:0;z-index:180;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,rgba(3,10,18,.94) 0 48%,rgba(5,45,69,.97) 48% 100%);animation:navalStoryLife 2.3s ease both}.shot-sky{position:absolute;inset:0 0 52%;background:radial-gradient(circle at 50% 20%,rgba(250,204,21,.22),transparent 30%),linear-gradient(#0d1a2a,#102b42)}.shot-sea{position:absolute;left:-10%;right:-10%;top:47%;height:58%;background:repeating-radial-gradient(ellipse at 50% 0,rgba(255,255,255,.18) 0 2px,transparent 3px 45px),linear-gradient(#0a506f,#05253c);animation:shotSeaMove 1.3s linear infinite}.story-ship{position:absolute;width:min(42vw,430px);bottom:25%;z-index:8}.story-ship>img,.story-target>img{width:100%;display:block;filter:drop-shadow(0 28px 18px rgba(0,0,0,.65))}.story-ship.attacker{left:-5%;animation:attackerSail 2.1s ease both}.story-captain{position:absolute;width:19%;right:20%;top:-19%;filter:drop-shadow(0 9px 8px rgba(0,0,0,.45));animation:captainBrace .65s .24s ease both;pointer-events:auto}.cannon-smoke{position:absolute;right:-4%;top:34%;width:90px;height:90px}.cannon-smoke i{position:absolute;width:33px;height:33px;border-radius:50%;background:rgba(232,238,244,.88);filter:blur(2px);opacity:0;animation:smokePuff .9s .3s ease-out both}.cannon-smoke i:nth-child(2){animation-delay:.39s;left:23px;top:-12px}.cannon-smoke i:nth-child(3){animation-delay:.48s;left:48px;top:-24px}.story-cannonball{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#8e99a8,#111827 70%);box-shadow:0 0 0 6px rgba(250,204,21,.08),0 0 22px rgba(250,204,21,.32);left:34%;top:46%;z-index:20;animation:cannonballArc 1.02s .34s cubic-bezier(.2,.6,.2,1) both}.story-cannonball:after{content:"";position:absolute;right:100%;top:50%;width:150px;height:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8));filter:blur(4px);transform:translateY(-50%)}.story-target{position:absolute;width:min(35vw,370px);right:-2%;bottom:26%;z-index:7;transform-origin:58% 72%}.hit-story .story-target{animation:targetHit 1.3s .94s ease both}.miss-story .story-target{animation:targetDodge 1.3s .9s ease both}.target-fire{position:absolute;left:40%;top:35%;width:80px;height:80px;opacity:0;background:radial-gradient(circle,#fff 0 9%,#facc15 10% 24%,#fb4b24 25% 46%,transparent 48%);filter:drop-shadow(0 0 20px rgba(251,75,36,.6));animation:targetExplosion .65s 1.02s ease-out both}.target-splash{position:absolute;left:16%;bottom:-8%;width:110px;height:100px;opacity:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.95) 0 7%,rgba(96,165,250,.8) 8% 28%,transparent 30%);clip-path:polygon(50% 0,62% 37%,94% 17%,75% 56%,100% 68%,62% 73%,52% 100%,42% 72%,5% 82%,28% 52%,0 34%,38% 39%);animation:targetSplash .72s 1.02s ease-out both}.hit-story .target-splash{display:none}.miss-story .target-fire{display:none}.ejected-bean{position:absolute;width:20%;left:46%;top:9%;opacity:0;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}.hit-story .ejected-bean{animation:beanEject .95s 1.02s cubic-bezier(.18,.8,.2,1) both}.life-ring{position:absolute;width:18%;aspect-ratio:1;border-radius:50%;border:12px solid #f97316;box-shadow:inset 0 0 0 5px #fff;left:48%;top:25%;opacity:0}.hit-story .life-ring{animation:lifeRingEject .95s 1.08s cubic-bezier(.18,.8,.2,1) both}.shot-caption{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);text-align:center;z-index:30;opacity:0;animation:shotCaption .55s 1.25s ease both}.shot-caption strong{display:block;color:var(--yellow);font-size:clamp(25px,5vw,56px);font-weight:1000;text-shadow:0 4px 0 #32160c,0 0 24px rgba(250,204,21,.3)}.shot-caption small{color:#fff;font-weight:800;font-size:13px}.premium-projectile{box-shadow:0 0 18px rgba(250,204,21,.65)}.premium-explosion,.premium-water{font-size:0!important;position:absolute!important;inset:-35%!important;display:grid!important;place-items:center!important;z-index:35!important}.premium-explosion i,.premium-water i{position:absolute;width:45%;height:45%;border-radius:50%}.premium-explosion i{background:radial-gradient(circle,#fff,#facc15 22%,#fb4b24 55%,transparent 58%);animation:cellExplosion .8s ease-out both}.premium-explosion i:nth-child(2){animation-delay:.06s;translate:-25% 18%}.premium-explosion i:nth-child(3){animation-delay:.11s;translate:26% -14%}.premium-water i{background:radial-gradient(ellipse,rgba(255,255,255,.96),rgba(96,165,250,.75) 42%,transparent 46%);animation:cellWater .9s ease-out both}.premium-water i:nth-child(2){animation-delay:.08s;translate:-23% 12%}.premium-water i:nth-child(3){animation-delay:.14s;translate:24% -7%}.premium-explosion b,.premium-water b{position:absolute;z-index:4;background:#fff;color:#121212;border:2px solid #151515;border-radius:999px;padding:3px 6px;font-size:8px;font-weight:1000;animation:cellFxLabel .8s ease both}
.premium-finale-card{box-shadow:0 50px 170px rgba(0,0,0,.82),0 0 90px rgba(96,165,250,.08)}.premium-finale-sea{min-height:410px}.finale-moon{position:absolute;width:120px;height:120px;border-radius:50%;right:9%;top:7%;background:radial-gradient(circle at 34% 29%,#fff7ce,#facc15 70%);box-shadow:0 0 70px rgba(250,204,21,.25)}.premium-finale-ship{width:78%;left:11%;top:38%}.premium-finale-ship .finale-vessel{width:100%;filter:drop-shadow(0 24px 18px rgba(0,0,0,.6))}.mascot-crew span{width:13%;height:30%;position:absolute!important;top:-14%!important;font-size:0!important;cursor:pointer}.mascot-crew span img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}.mascot-crew span:nth-child(1){left:18%}.mascot-crew span:nth-child(2){left:36%}.mascot-crew span:nth-child(3){right:32%}.mascot-crew span:nth-child(4){right:14%}.premium-violin-crew .violinist,.premium-violin-crew .lifeboat-bean{position:absolute;width:16%;height:38%;top:-18%;font-size:0!important;cursor:pointer}.premium-violin-crew img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}.premium-violin-crew .violinist{left:34%;animation:violinistSway 1.25s ease-in-out infinite alternate}.premium-violin-crew .lifeboat-bean{right:22%;top:4%;animation:lifeboatDrift 2s ease-in-out infinite alternate}.mini-violin{position:absolute;width:48%;height:32%;right:-12%;top:45%;background:#8b4513;border:4px solid #3b1909;border-radius:55% 45% 55% 45%;rotate:-20deg}.mini-violin:after{content:"";position:absolute;width:78%;height:4px;background:#d7b07e;right:-63%;top:47%;rotate:-8deg}.violin-bow{position:absolute;width:120%;height:4px;background:#e7d4b9;left:35%;top:40%;rotate:-25deg;transform-origin:left center;animation:bowPlay .65s ease-in-out infinite alternate}.finale-life-ring{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;border:13px solid #f97316;box-shadow:inset 0 0 0 6px #fff;left:19%;top:41%;z-index:-1}.finale-bubbles i{position:absolute;width:12px;height:12px;border:2px solid rgba(255,255,255,.75);border-radius:50%;bottom:-10%;opacity:0}.navy-finale.lose .finale-bubbles i{animation:finaleBubble 3.6s linear infinite}.finale-bubbles i:nth-child(1){left:25%;animation-delay:.2s}.finale-bubbles i:nth-child(2){left:39%;animation-delay:1.1s}.finale-bubbles i:nth-child(3){left:55%;animation-delay:2s}.finale-bubbles i:nth-child(4){left:68%;animation-delay:.7s}.finale-bubbles i:nth-child(5){left:78%;animation-delay:1.8s}.navy-finale.lose .premium-finale-ship{animation:premiumSinkingShip 7.7s ease-in forwards;transform-origin:62% 72%}.navy-finale.win .mascot-crew span{animation:premiumBeanCheer .55s ease-in-out infinite alternate}.navy-finale.win .mascot-crew span:nth-child(2){animation-delay:-.16s}.navy-finale.win .mascot-crew span:nth-child(3){animation-delay:-.31s}.navy-finale.win .mascot-crew span:nth-child(4){animation-delay:-.44s}
@keyframes deckCaptain{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-7px) rotate(7deg)}}@keyframes shipMatchLeft{from{transform:translateX(-12px) rotate(-7deg)}to{transform:translateX(5px) rotate(3deg)}}@keyframes shipMatchRight{from{transform:translateX(12px) rotate(7deg) scaleX(-1)}to{transform:translateX(-5px) rotate(-3deg) scaleX(-1)}}@keyframes navalStoryLife{0%{opacity:0}6%,90%{opacity:1}100%{opacity:0}}@keyframes shotSeaMove{to{transform:translateX(80px)}}@keyframes attackerSail{0%{translate:-55% 12px;rotate:-4deg}22%{translate:0 0;rotate:1deg}38%{translate:-6px 13px;rotate:-5deg}52%,100%{translate:0 0;rotate:1deg}}@keyframes captainBrace{0%{transform:rotate(-5deg)}45%{transform:translateX(-14px) rotate(-21deg) scale(.93,1.08)}100%{transform:translateX(4px) rotate(8deg)}}@keyframes smokePuff{0%{opacity:0;scale:.2;translate:0 0}20%{opacity:.9}100%{opacity:0;scale:2.2;translate:70px -45px}}@keyframes cannonballArc{0%{left:34%;top:46%;scale:.65}45%{left:61%;top:23%;scale:1}100%{left:82%;top:48%;scale:.82}}@keyframes targetHit{0%,65%{transform:none}72%{transform:translateX(22px) rotate(7deg) scale(.98)}81%{transform:translateX(-16px) rotate(-5deg)}100%{transform:translateY(18px) rotate(4deg)}}@keyframes targetDodge{0%,58%{transform:none}73%{transform:translateY(-13px) rotate(-2deg)}100%{transform:translateY(0) rotate(1deg)}}@keyframes targetExplosion{0%{opacity:0;scale:.15}45%{opacity:1;scale:1.7}100%{opacity:0;scale:2.6}}@keyframes targetSplash{0%{opacity:0;scale:.2;translate:0 40px}35%{opacity:1;scale:1.25;translate:0 0}100%{opacity:0;scale:1.8;translate:0 -45px}}@keyframes beanEject{0%{opacity:0;translate:0 0;rotate:0}18%{opacity:1}100%{opacity:1;translate:100px -155px;rotate:390deg;scale:.72}}@keyframes lifeRingEject{0%{opacity:0;translate:0 0;rotate:0}20%{opacity:1}100%{opacity:1;translate:99px -148px;rotate:250deg;scale:.75}}@keyframes shotCaption{from{opacity:0;translate:-50% 20px;scale:.75}to{opacity:1;translate:-50% 0;scale:1}}@keyframes cellExplosion{0%{scale:.1;opacity:0}30%{opacity:1}100%{scale:2.2;opacity:0}}@keyframes cellWater{0%{scale:.1;translate:0 30%;opacity:0}35%{opacity:1}100%{scale:2;translate:0 -60%;opacity:0}}@keyframes cellFxLabel{0%{scale:.3;opacity:0}35%,70%{scale:1;opacity:1}100%{scale:.8;opacity:0}}@keyframes premiumBeanCheer{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-24px) rotate(9deg)}}@keyframes violinistSway{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}@keyframes bowPlay{from{transform:rotate(-18deg) translateX(-8px)}to{transform:rotate(7deg) translateX(10px)}}@keyframes lifeboatDrift{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(9px) rotate(6deg)}}@keyframes finaleBubble{0%{bottom:-10%;opacity:0;scale:.5}18%{opacity:.8}100%{bottom:92%;opacity:0;scale:1.4}}@keyframes premiumSinkingShip{0%{transform:translateY(0) rotate(0);opacity:1}20%{transform:translateY(14px) rotate(-5deg)}46%{transform:translateY(95px) rotate(-17deg)}73%{transform:translateY(250px) rotate(-30deg);opacity:1}100%{transform:translateY(520px) rotate(-43deg);opacity:.08}}
@media(max-width:760px){.story-ship{width:50vw;bottom:29%}.story-target{width:43vw;bottom:30%}.shot-caption{bottom:6%;width:95%}.story-caption small,.shot-caption small{font-size:11px}.premium-finale-sea{min-height:310px}.mascot-crew span{width:16%}.premium-violin-crew .violinist,.premium-violin-crew .lifeboat-bean{width:20%}}

/* Mascot-rich landing and lobby previews */
.mascot-orbit,.mascot-bubble{font-size:0!important;cursor:pointer}.mascot-orbit img,.mascot-bubble img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 9px rgba(0,0,0,.4))}.mascot-orbit{width:72px!important;height:82px!important}.mascot-bubble{width:43px!important;height:49px!important}.mascot-avatar{padding:0!important;overflow:visible!important;background:radial-gradient(circle,rgba(250,204,21,.22),transparent 68%)!important;cursor:pointer}.mascot-avatar img{width:105%;height:105%;object-fit:contain;filter:drop-shadow(0 14px 10px rgba(0,0,0,.46))}.preview-mascot{position:absolute;width:100px;height:115px;bottom:7%;z-index:8;cursor:pointer}.preview-mascot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 10px rgba(0,0,0,.48))}.preview-mascot.left{left:2%;animation:previewMascotLeft 2.8s ease-in-out infinite}.preview-mascot.right{right:2%;transform:scaleX(-1);animation:previewMascotRight 2.8s ease-in-out infinite}.premium-rock-preview{width:76px;height:70px;border-radius:48% 42% 52% 46%;background:linear-gradient(145deg,#888e96,#343941 60%,#171a20);border:5px solid #a4aab3;font-size:0!important}.premium-scissor-preview{width:84px;height:84px;font-size:0!important;position:absolute}.premium-scissor-preview:before,.premium-scissor-preview:after{content:"";position:absolute;width:16px;height:72px;background:linear-gradient(90deg,#eef3f8,#7f8792);border:3px solid #252830;border-radius:999px 999px 6px 6px;left:34px;top:1px;transform-origin:50% 73%}.premium-scissor-preview:before{transform:rotate(30deg)}.premium-scissor-preview:after{transform:rotate(-30deg)}.premium-scissor-preview i,.premium-scissor-preview b{position:absolute;width:27px;height:27px;border:8px solid #ef2b2d;border-radius:50%;bottom:0;left:3px}.premium-scissor-preview b{left:50px}.premium-mini-ship{font-size:0!important;width:78%!important;height:auto!important}.premium-mini-ship img{width:100%;height:auto;filter:drop-shadow(0 14px 10px rgba(0,0,0,.55))}.premium-mini-boom{font-size:0!important;width:58px!important;height:58px!important;background:radial-gradient(circle,#fff 0 8%,#facc15 9% 28%,#fb4b24 29% 50%,transparent 52%);animation:premiumMiniBoom 2.5s ease-in-out infinite}.premium-mini-boom i,.premium-mini-boom b{display:none}@keyframes previewMascotLeft{0%,100%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-8px) rotate(4deg)}58%{transform:translateX(10px) rotate(9deg)}}@keyframes previewMascotRight{0%,100%{transform:scaleX(-1) translateY(0) rotate(-3deg)}45%{transform:scaleX(-1) translateY(-8px) rotate(4deg)}58%{transform:scaleX(-1) translateX(10px) rotate(9deg)}}@keyframes premiumMiniBoom{0%,42%{scale:.1;opacity:0}55%{scale:1.4;opacity:1}75%,100%{scale:2.2;opacity:0}}

/* v2.4 — Beanny physical cinematics and living mascot variants */
.rps-story .rps-prop,
.rps-story .rps-prop .blade-a,
.rps-story .rps-prop .blade-b,
.rps-story .rps-prop .scissor-spring,
.rps-story .rps-prop .paper-whole,
.rps-story .rps-prop .paper-half,
.rps-story .cinema-bean,
.rps-story .easy-sticker{animation:none!important}
.rps-story .cinema-bean{opacity:1;transform-origin:50% 88%}
.rps-story .cinema-bean.bean-right{transform:scaleX(-1)}
.rps-story .cinema-bean img{object-fit:contain;max-height:230px;transform:translate(var(--look-x,0),var(--look-y,0));transition:transform .16s ease-out}
.story-impact.physical-hit{opacity:1!important;animation:physicalImpact .5s ease-out both!important}
.physical-debris{position:absolute;left:50%;top:49%;width:1px;height:1px;z-index:60;pointer-events:none}
.physical-debris i{position:absolute;width:13px;height:10px;border-radius:3px;background:#7c3e1c;border:2px solid #2c150c;animation:physicalDebris 1.25s var(--delay,0s) cubic-bezier(.15,.78,.2,1) both;box-shadow:0 3px 4px rgba(0,0,0,.35)}
.physical-debris.paper-bits i{width:18px;height:24px;background:#fffdf0;border:2px solid #57534e;border-radius:2px}
.physical-debris.stars i{width:18px;height:18px;background:var(--yellow);clip-path:polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 34%);border:0}
.wrapped-rock .rock-core:after{content:"";position:absolute;inset:-18%;border:18px solid #fffdf0;border-radius:45% 55% 42% 58%;box-shadow:inset 0 0 0 4px #47433d,0 8px 18px rgba(0,0,0,.35);animation:paperSqueeze .48s ease-in-out infinite alternate}
.cinema-bean.bean-winner:after{content:"BEANNY APPROVES";position:absolute;left:50%;top:-10%;translate:-50% 0;background:var(--yellow);color:#201006;border:3px solid #35170a;border-radius:999px;padding:5px 10px;font-size:9px;font-weight:1000;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.cinema-bean.bean-loser:after{content:"I WANT A RECOUNT";position:absolute;left:50%;top:-8%;translate:-50% 0;background:#fff;color:#35170a;border:3px solid #35170a;border-radius:999px;padding:5px 10px;font-size:9px;font-weight:1000;white-space:nowrap}
@keyframes physicalImpact{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}35%{transform:translate(-50%,-50%) scale(1.5);opacity:1}100%{transform:translate(-50%,-50%) scale(2.15);opacity:0}}
@keyframes physicalDebris{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
@keyframes paperSqueeze{from{transform:rotate(-5deg) scale(.96)}to{transform:rotate(5deg) scale(1.04)}}

.beanny-living{position:relative;transform-origin:50% 92%;animation:beannyBreathe 2.6s ease-in-out infinite}
.beanny-living img{transform:translate(var(--look-x,0),var(--look-y,0));transition:transform .16s ease-out}
.beanny-living:before{content:"";position:absolute;left:27%;right:28%;top:36%;height:8%;border-radius:50%;background:rgba(91,35,14,.96);opacity:0;z-index:5;animation:beannyBlink 5.8s infinite;pointer-events:none}
.beanny-living:after{content:"";position:absolute;right:5%;top:22%;width:18%;height:8%;background:#ef2b2d;border:4px solid #35170a;border-radius:70% 15% 70% 15%;transform-origin:left center;animation:bandanaFlutter .8s ease-in-out infinite alternate;pointer-events:none;z-index:-1}
@keyframes beannyBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015,.985)}}
@keyframes beannyBlink{0%,45%,49%,100%{opacity:0;transform:scaleY(.1)}46%,48%{opacity:1;transform:scaleY(1)}}
@keyframes bandanaFlutter{from{transform:rotate(-5deg) skewX(-8deg)}to{transform:rotate(8deg) skewX(8deg)}}

/* v2.4 — robust drag/touch fleet controls and Beanny crew variations */
.dock-ship-card{touch-action:none;user-select:none;min-width:112px;overflow:visible}
.dock-ship-art{position:relative;display:block;width:92px;height:48px;margin:auto}
.dock-vessel{position:absolute;inset:10px 0 0;width:100%;height:38px;object-fit:fill}
.dock-beanny{position:absolute;width:31px;height:40px;right:16px;top:-3px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5));animation:dockCrewWave 1.6s ease-in-out infinite alternate}
.ship-pointer-ghost{position:fixed;z-index:500;pointer-events:none;width:135px;height:62px;transform:translate(-50%,-50%) rotate(-5deg);filter:drop-shadow(0 16px 13px rgba(0,0,0,.55));opacity:.92}
.ship-pointer-ghost img{width:100%;height:100%;object-fit:fill}
.placed-bean-ship{touch-action:none}
@keyframes dockCrewWave{from{transform:translateY(1px) rotate(-4deg)}to{transform:translateY(-4px) rotate(5deg)}}

.naval-shot-story.naval-physics{animation:navalStoryFade 3s ease both}
.naval-physics .story-ship,.naval-physics .story-target{animation:none!important}
.naval-physics .story-cannonball{animation:none!important;display:block!important;opacity:1!important;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#71717a 10% 38%,#141414 65%);box-shadow:0 0 18px rgba(250,204,21,.55);z-index:25}
.naval-physics .story-cannonball i{position:absolute;right:17px;top:8px;width:90px;height:9px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));filter:blur(2px)}
.naval-physics .story-captain{width:30%;height:auto;object-fit:contain;top:-33%;right:12%;z-index:12}
.naval-physics .target-captain{position:absolute;width:29%;height:auto;right:15%;top:-28%;z-index:8;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.naval-physics .ejected-bean{width:32%;height:auto;object-fit:contain;right:7%;top:-5%;opacity:0;z-index:20}
.naval-physics.hit-story .ejected-bean{animation:beannyOverboard 1.25s 1.02s cubic-bezier(.15,.75,.2,1) both}
.naval-physics.hit-story .target-captain{animation:captainImpact .85s .9s ease-out both}
.naval-physics .muzzle-flash{position:absolute;width:72px;height:72px;border-radius:50%;right:-18px;top:41%;background:radial-gradient(circle,#fff 0 8%,#facc15 12% 32%,#ff6b00 38% 50%,transparent 55%);opacity:0;z-index:30;animation:muzzleFlash .28s .27s ease-out both}
.naval-physics .cannon-smoke{animation:none!important;opacity:0;animation:realSmoke 1.25s .28s ease-out both!important}
.naval-physics.hit-story .target-fire{animation:realTargetFire 1.4s 1s ease-out both!important}
.naval-physics.miss-story .target-splash{animation:realOceanSplash 1.45s .96s ease-out both!important}
@keyframes navalStoryFade{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}}
@keyframes muzzleFlash{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(2)}}
@keyframes realSmoke{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:.9}100%{opacity:0;transform:translate(90px,-70px) scale(2.2)}}
@keyframes captainImpact{0%{transform:translate(0,0) rotate(0)}40%{transform:translate(-15px,-20px) rotate(-24deg)}100%{transform:translate(-50px,75px) rotate(-70deg);opacity:0}}
@keyframes beannyOverboard{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.7)}15%{opacity:1}65%{opacity:1;transform:translate(115px,-155px) rotate(220deg) scale(1)}100%{opacity:1;transform:translate(145px,110px) rotate(360deg) scale(.85)}}
@keyframes realTargetFire{0%{opacity:0;transform:scale(.1)}35%{opacity:1;transform:scale(1.5)}100%{opacity:.75;transform:scale(.9)}}
@keyframes realOceanSplash{0%{opacity:0;transform:scale(.1)}35%{opacity:1;transform:scale(1.7) translateY(-20px)}100%{opacity:0;transform:scale(2.4) translateY(-70px)}}

.navy-finale.win .mascot-crew span:nth-child(1) img{content:url('/assets/mascot/variants/beanny-cheer.png')}
.navy-finale.win .mascot-crew span:nth-child(2) img{content:url('/assets/mascot/variants/beanny-captain.png')}
.navy-finale.win .mascot-crew span:nth-child(3) img{content:url('/assets/mascot/variants/beanny-boxer.png')}
.navy-finale.win .mascot-crew span:nth-child(4) img{content:url('/assets/mascot/variants/beanny-gunner.png')}
.navy-finale.lose .premium-finale-ship{animation:titanicSink 7.6s cubic-bezier(.35,.05,.2,1) forwards!important}
.navy-finale.lose .premium-violin-crew .violinist img{content:url('/assets/mascot/variants/beanny-violin.png')}
.navy-finale.lose .premium-violin-crew .lifeboat-bean img{content:url('/assets/mascot/variants/beanny-lifebuoy.png')}
.navy-finale.lose .finale-sea:after{content:"";position:absolute;left:0;right:0;bottom:-4%;height:38%;background:linear-gradient(180deg,rgba(30,110,180,.08),rgba(6,62,112,.85));animation:waterRise 7.5s ease-in forwards;pointer-events:none;z-index:35}
@keyframes titanicSink{0%,14%{transform:translateY(0) rotate(0)}30%{transform:translateY(22px) rotate(-6deg)}55%{transform:translateY(78px) rotate(-18deg)}78%{transform:translateY(165px) rotate(-38deg)}100%{transform:translateY(310px) rotate(-68deg);opacity:.2}}
@keyframes waterRise{from{height:28%}to{height:72%}}

/* v2.5 — stable RPS rollback (no mascot actors) and reliable Battleship effects */
.rps-classic-page .queue-visual-classic .scan-bean{font-size:56px;filter:drop-shadow(0 14px 12px rgba(0,0,0,.55));animation:bbScanBean 2.2s ease-in-out infinite}
.rps-classic-page .choices-classic .choice-icon{font-size:54px;line-height:1;display:block;filter:drop-shadow(0 13px 10px rgba(0,0,0,.45));transition:transform .2s ease}
.rps-classic-page .choices-classic .choice:hover .choice-icon{transform:translateY(-7px) rotate(-5deg) scale(1.08)}
.rps-classic-page .duel-clean .fighter{min-height:300px;display:grid;grid-template-rows:auto 1fr auto;align-items:center}
.rps-classic-page .duel-clean .move-clean{font-size:clamp(88px,10vw,142px);min-height:170px;filter:drop-shadow(0 25px 22px rgba(0,0,0,.58));transform-origin:50% 75%}
.rps-classic-page .duel-clean.clash .fighter:first-child .move-clean{animation:bbDuelHitLeft .62s cubic-bezier(.2,.8,.2,1)}
.rps-classic-page .duel-clean.clash .fighter:last-of-type .move-clean{animation:bbDuelHitRight .62s cubic-bezier(.2,.8,.2,1)}
.rps-history-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.rps-history-row:last-child{border-bottom:0}

.rps-classic-cinematic-layer{position:absolute;inset:0;display:none;place-items:center;overflow:hidden;border-radius:22px;z-index:80;pointer-events:none}
.rps-classic-cinematic-layer.active{display:grid}
.classic-rps-scene{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 50% 48%,rgba(250,204,21,.18),transparent 28%),
  linear-gradient(180deg,rgba(5,5,6,.94),rgba(0,0,0,.98));animation:bbSceneFade 2.3s ease both}
.classic-scene-grid{position:absolute;inset:0;opacity:.28;background-image:
  linear-gradient(rgba(250,204,21,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,204,21,.08) 1px,transparent 1px);background-size:42px 42px;transform:perspective(500px) rotateX(64deg) scale(1.6);transform-origin:50% 100%}
.classic-rps-object{position:absolute;top:35%;width:170px;height:170px;z-index:8;display:grid;place-items:center;filter:drop-shadow(0 25px 22px rgba(0,0,0,.64));transform-origin:50% 70%}
.classic-rps-object.left-object{left:8%}.classic-rps-object.right-object{right:8%}
.classic-rock{position:relative;width:126px;height:108px;border-radius:48% 42% 52% 44%;background:linear-gradient(145deg,#a1a7ae 0 13%,#5c626b 17% 48%,#282c33 72%,#15171b);border:5px solid #b8bec5;box-shadow:inset -18px -18px 24px rgba(0,0,0,.28),inset 12px 11px 18px rgba(255,255,255,.12)}
.classic-rock i{position:absolute;width:22px;height:13px;border-radius:50%;background:rgba(25,28,34,.58);transform:rotate(-18deg)}
.classic-rock i:nth-child(1){left:22px;top:25px}.classic-rock i:nth-child(2){right:24px;top:42px;width:17px}.classic-rock i:nth-child(3){left:48px;bottom:20px;width:27px}.classic-rock b{position:absolute;left:20px;top:12px;width:44px;height:20px;border-radius:50%;background:rgba(255,255,255,.13);transform:rotate(-22deg)}
.classic-paper-whole{position:relative;width:112px;height:138px;border-radius:8px;background:linear-gradient(145deg,#fff,#d9dde3);border:4px solid #f5f5f5;box-shadow:inset -12px -10px 18px rgba(0,0,0,.12);transform-origin:center}
.classic-paper-whole:before,.classic-paper-whole:after{content:"";position:absolute;left:20px;right:18px;height:5px;border-radius:9px;background:#aeb6c2;opacity:.7}
.classic-paper-whole:before{top:47px;box-shadow:0 19px 0 #aeb6c2,0 38px 0 #aeb6c2}.classic-paper-whole:after{width:28px;left:22px;top:104px}
.classic-paper-whole i,.classic-paper-whole b{display:none}
.classic-paper-half{position:absolute;left:29px;top:16px;width:112px;height:69px;background:linear-gradient(145deg,#fff,#d9dde3);border:4px solid #f5f5f5;opacity:0;z-index:4}
.classic-paper-half.half-one{border-radius:8px 8px 2px 2px}.classic-paper-half.half-two{top:84px;border-radius:2px 2px 8px 8px}
.classic-scissor{position:absolute;left:50%;top:6px;width:28px;height:142px;transform-origin:50% 68%}
.classic-scissor i{position:absolute;left:7px;top:0;width:14px;height:100px;border-radius:999px 999px 5px 5px;background:linear-gradient(90deg,#dce3ea,#77818d 52%,#f8fafc);border:2px solid #2b3037}
.classic-scissor b{position:absolute;left:-8px;bottom:0;width:44px;height:44px;border:11px solid #dc2626;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.classic-scissor.blade-one{transform:translateX(-50%) rotate(31deg)}.classic-scissor.blade-two{transform:translateX(-50%) rotate(-31deg)}
.classic-scissor-pin{position:absolute;left:50%;top:88px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#facc15;border:4px solid #3f3f46;z-index:6}
.classic-impact-core{position:absolute;left:50%;top:50%;width:260px;min-height:150px;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;z-index:20}
.classic-impact-core span{position:absolute;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,#fff 0 7%,#facc15 8% 27%,#fb923c 28% 43%,transparent 45%);opacity:0;filter:drop-shadow(0 0 30px rgba(250,204,21,.55));animation:bbImpactFlash 2.3s ease both}
.classic-impact-core b{font-size:clamp(28px,5vw,58px);font-weight:1000;letter-spacing:-.04em;color:#fff;text-shadow:0 4px 0 #5a3400,0 0 30px rgba(250,204,21,.55);opacity:0;animation:bbImpactText 2.3s ease both}
.classic-impact-core small{position:absolute;top:72%;width:320px;max-width:80vw;color:#d2d2d8;font-weight:800;opacity:0;animation:bbImpactSub 2.3s ease both}
.classic-debris{position:absolute;left:50%;top:50%;z-index:18}.classic-debris i{position:absolute;width:10px;height:7px;border-radius:3px;background:#facc15;opacity:0;animation:bbDebrisFly 1.25s .72s ease-out both}
.classic-debris i:nth-child(3n){background:#9ca3af}.classic-debris i:nth-child(4n){background:#fff}.classic-debris i:nth-child(1){--dx:-180px;--dy:-120px;--r:430deg}.classic-debris i:nth-child(2){--dx:-130px;--dy:100px;--r:-320deg}.classic-debris i:nth-child(3){--dx:150px;--dy:-105px;--r:520deg}.classic-debris i:nth-child(4){--dx:185px;--dy:80px;--r:-430deg}.classic-debris i:nth-child(5){--dx:-45px;--dy:-170px;--r:600deg}.classic-debris i:nth-child(6){--dx:65px;--dy:160px;--r:-520deg}.classic-debris i:nth-child(7){--dx:-230px;--dy:15px;--r:380deg}.classic-debris i:nth-child(8){--dx:225px;--dy:-15px;--r:-410deg}.classic-debris i:nth-child(9){--dx:-90px;--dy:-145px;--r:700deg}.classic-debris i:nth-child(10){--dx:105px;--dy:145px;--r:-650deg}.classic-debris i:nth-child(11){--dx:-205px;--dy:-75px;--r:490deg}.classic-debris i:nth-child(12){--dx:210px;--dy:65px;--r:-540deg}.classic-debris i:nth-child(13){--dx:-20px;--dy:190px;--r:680deg}.classic-debris i:nth-child(14){--dx:15px;--dy:-205px;--r:-690deg}.classic-debris i:nth-child(15){--dx:-155px;--dy:145px;--r:560deg}.classic-debris i:nth-child(16){--dx:165px;--dy:-155px;--r:-610deg}.classic-debris i:nth-child(17){--dx:-250px;--dy:-20px;--r:500deg}.classic-debris i:nth-child(18){--dx:250px;--dy:20px;--r:-500deg}

.classic-rps-scene.rock-crush .left-object.move-rock{animation:bbRockSlamLeft 2.3s cubic-bezier(.18,.75,.15,1) both}.classic-rps-scene.rock-crush .right-object.move-rock{animation:bbRockSlamRight 2.3s cubic-bezier(.18,.75,.15,1) both}
.classic-rps-scene.rock-crush .left-object.move-scissors{animation:bbScissorVictimLeft 2.3s ease both}.classic-rps-scene.rock-crush .right-object.move-scissors{animation:bbScissorVictimRight 2.3s ease both}
.classic-rps-scene.rock-crush .move-scissors .blade-one{animation:bbBladeBreakOne 2.3s .76s ease-out both}.classic-rps-scene.rock-crush .move-scissors .blade-two{animation:bbBladeBreakTwo 2.3s .76s ease-out both}.classic-rps-scene.rock-crush .move-scissors .classic-scissor-pin{animation:bbPinPop 2.3s .76s ease-out both}
.classic-rps-scene.scissor-cut .left-object.move-scissors{animation:bbScissorChargeLeft 2.3s ease both}.classic-rps-scene.scissor-cut .right-object.move-scissors{animation:bbScissorChargeRight 2.3s ease both}
.classic-rps-scene.scissor-cut .move-scissors .blade-one{animation:bbSnipOne 2.3s ease both}.classic-rps-scene.scissor-cut .move-scissors .blade-two{animation:bbSnipTwo 2.3s ease both}
.classic-rps-scene.scissor-cut .left-object.move-paper{animation:bbPaperVictimLeft 2.3s ease both}.classic-rps-scene.scissor-cut .right-object.move-paper{animation:bbPaperVictimRight 2.3s ease both}
.classic-rps-scene.scissor-cut .move-paper .classic-paper-whole{animation:bbPaperDisappear 2.3s ease both}.classic-rps-scene.scissor-cut .move-paper .classic-paper-half{opacity:1}.classic-rps-scene.scissor-cut .move-paper .half-one{animation:bbPaperHalfOne 2.3s ease both}.classic-rps-scene.scissor-cut .move-paper .half-two{animation:bbPaperHalfTwo 2.3s ease both}
.classic-rps-scene.paper-wrap .left-object.move-paper{animation:bbPaperWrapLeft 2.3s ease both}.classic-rps-scene.paper-wrap .right-object.move-paper{animation:bbPaperWrapRight 2.3s ease both}.classic-rps-scene.paper-wrap .left-object.move-rock{animation:bbRockWrappedLeft 2.3s ease both}.classic-rps-scene.paper-wrap .right-object.move-rock{animation:bbRockWrappedRight 2.3s ease both}
.classic-rps-scene.draw-bump .left-object{animation:bbDrawChargeLeft 2.3s ease both}.classic-rps-scene.draw-bump .right-object{animation:bbDrawChargeRight 2.3s ease both}

.board-busy{pointer-events:none;filter:saturate(.8)}
.stable-projectile{animation:bbStableProjectile .48s cubic-bezier(.18,.72,.2,1) forwards!important;transform:translate(0,0);will-change:transform}
.stable-explosion,.stable-water{width:64px!important;height:64px!important;display:grid!important;place-items:center!important;border-radius:50%!important;animation:bbStableFx .9s ease-out forwards!important}
.stable-explosion{background:radial-gradient(circle,#fff 0 8%,#facc15 9% 28%,#fb4b24 29% 52%,transparent 54%)!important}.stable-water{background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(96,165,250,.78) 40%,transparent 44%)!important}
.stable-explosion b,.stable-water b{background:#fff;color:#111;border:2px solid #111;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:1000}
.ship-deck-mascot{position:absolute;width:24%;height:60%;top:-36%;left:39%;pointer-events:none}.ship-deck-mascot img{width:100%;height:100%;object-fit:contain!important;filter:drop-shadow(0 6px 5px rgba(0,0,0,.5))}

@keyframes bbScanBean{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(7deg)}}
@keyframes bbDuelHitLeft{0%{transform:translateX(0) rotate(0)}42%{transform:translateX(58px) rotate(18deg) scale(1.12)}62%{transform:translateX(34px) rotate(-8deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes bbDuelHitRight{0%{transform:translateX(0) rotate(0)}42%{transform:translateX(-58px) rotate(-18deg) scale(1.12)}62%{transform:translateX(-34px) rotate(8deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes bbSceneFade{0%{opacity:0;transform:scale(1.05)}8%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@keyframes bbImpactFlash{0%,31%{opacity:0;transform:scale(.15)}38%{opacity:1;transform:scale(1.7)}55%{opacity:.38;transform:scale(2.45)}100%{opacity:0;transform:scale(2.8)}}
@keyframes bbImpactText{0%,43%{opacity:0;transform:translateY(20px) scale(.55)}52%,78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.92)}}
@keyframes bbImpactSub{0%,55%{opacity:0;transform:translateY(12px)}64%,84%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes bbDebrisFly{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.1)}}
@keyframes bbRockSlamLeft{0%{transform:translate(0,40px) rotate(-20deg) scale(.75)}28%{transform:translate(105px,-95px) rotate(95deg) scale(1.05)}43%{transform:translate(170px,-145px) rotate(155deg) scale(1.18)}49%{transform:translate(190px,40px) rotate(225deg) scale(1.4)}58%,86%{transform:translate(190px,35px) rotate(225deg) scale(1.32)}100%{transform:translate(205px,70px) rotate(250deg) scale(1.08);opacity:.2}}
@keyframes bbRockSlamRight{0%{transform:translate(0,40px) rotate(20deg) scale(.75)}28%{transform:translate(-105px,-95px) rotate(-95deg) scale(1.05)}43%{transform:translate(-170px,-145px) rotate(-155deg) scale(1.18)}49%{transform:translate(-190px,40px) rotate(-225deg) scale(1.4)}58%,86%{transform:translate(-190px,35px) rotate(-225deg) scale(1.32)}100%{transform:translate(-205px,70px) rotate(-250deg) scale(1.08);opacity:.2}}
@keyframes bbScissorVictimLeft{0%,28%{transform:translate(0,0) scale(1)}43%{transform:translate(150px,18px) scale(1)}49%{transform:translate(190px,55px) scale(1.35,.22)}58%,86%{transform:translate(190px,61px) scale(1.55,.13)}100%{opacity:.15;transform:translate(210px,90px) scale(1.2,.08)}}
@keyframes bbScissorVictimRight{0%,28%{transform:translate(0,0) scale(1)}43%{transform:translate(-150px,18px) scale(1)}49%{transform:translate(-190px,55px) scale(1.35,.22)}58%,86%{transform:translate(-190px,61px) scale(1.55,.13)}100%{opacity:.15;transform:translate(-210px,90px) scale(1.2,.08)}}
@keyframes bbBladeBreakOne{0%,18%{transform:translateX(-50%) rotate(31deg)}27%{transform:translate(-160px,-125px) rotate(-330deg)}100%{opacity:0;transform:translate(-230px,80px) rotate(-720deg)}}
@keyframes bbBladeBreakTwo{0%,18%{transform:translateX(-50%) rotate(-31deg)}27%{transform:translate(150px,-105px) rotate(350deg)}100%{opacity:0;transform:translate(235px,95px) rotate(760deg)}}
@keyframes bbPinPop{0%,18%{transform:scale(1)}28%{transform:translateY(-180px) rotate(500deg) scale(.8)}100%{opacity:0;transform:translateY(120px) rotate(920deg) scale(.35)}}
@keyframes bbScissorChargeLeft{0%{transform:translate(-20px,20px) scale(.75)}33%{transform:translate(110px,0) scale(1.08)}48%,78%{transform:translate(185px,0) scale(1.25)}100%{transform:translate(220px,-20px) rotate(10deg);opacity:.2}}
@keyframes bbScissorChargeRight{0%{transform:translate(20px,20px) scale(.75)}33%{transform:translate(-110px,0) scale(1.08)}48%,78%{transform:translate(-185px,0) scale(1.25)}100%{transform:translate(-220px,-20px) rotate(-10deg);opacity:.2}}
@keyframes bbSnipOne{0%,34%{transform:translateX(-50%) rotate(42deg)}48%{transform:translateX(-50%) rotate(5deg)}57%{transform:translateX(-50%) rotate(38deg)}100%{transform:translateX(-50%) rotate(31deg)}}
@keyframes bbSnipTwo{0%,34%{transform:translateX(-50%) rotate(-42deg)}48%{transform:translateX(-50%) rotate(-5deg)}57%{transform:translateX(-50%) rotate(-38deg)}100%{transform:translateX(-50%) rotate(-31deg)}}
@keyframes bbPaperVictimLeft{0%,32%{transform:translate(0,0)}48%,80%{transform:translate(185px,0)}100%{opacity:0;transform:translate(220px,75px)}}
@keyframes bbPaperVictimRight{0%,32%{transform:translate(0,0)}48%,80%{transform:translate(-185px,0)}100%{opacity:0;transform:translate(-220px,75px)}}
@keyframes bbPaperDisappear{0%,48%{opacity:1}51%,100%{opacity:0}}
@keyframes bbPaperHalfOne{0%,48%{opacity:0;transform:translate(0,0) rotate(0)}51%{opacity:1}100%{opacity:0;transform:translate(-150px,170px) rotate(-150deg)}}
@keyframes bbPaperHalfTwo{0%,48%{opacity:0;transform:translate(0,0) rotate(0)}51%{opacity:1}100%{opacity:0;transform:translate(145px,180px) rotate(165deg)}}
@keyframes bbPaperWrapLeft{0%{transform:translate(-20px,10px) scale(.75)}32%{transform:translate(105px,-15px) scale(1.05)}52%{transform:translate(185px,0) scale(1.65,1.25) rotate(20deg)}72%,86%{transform:translate(190px,0) scale(.82,1.45) rotate(370deg)}100%{opacity:.15;transform:translate(215px,30px) scale(.68,1.1) rotate(390deg)}}
@keyframes bbPaperWrapRight{0%{transform:translate(20px,10px) scale(.75)}32%{transform:translate(-105px,-15px) scale(1.05)}52%{transform:translate(-185px,0) scale(1.65,1.25) rotate(-20deg)}72%,86%{transform:translate(-190px,0) scale(.82,1.45) rotate(-370deg)}100%{opacity:.15;transform:translate(-215px,30px) scale(.68,1.1) rotate(-390deg)}}
@keyframes bbRockWrappedLeft{0%,30%{transform:translate(0,0) rotate(0)}52%,82%{transform:translate(190px,20px) rotate(95deg) scale(.82)}100%{opacity:.1;transform:translate(205px,45px) rotate(130deg) scale(.65)}}
@keyframes bbRockWrappedRight{0%,30%{transform:translate(0,0) rotate(0)}52%,82%{transform:translate(-190px,20px) rotate(-95deg) scale(.82)}100%{opacity:.1;transform:translate(-205px,45px) rotate(-130deg) scale(.65)}}
@keyframes bbDrawChargeLeft{0%{transform:translate(-25px,0)}38%{transform:translate(160px,0) scale(1.15)}48%{transform:translate(185px,0) scale(.92,1.18)}58%{transform:translate(55px,-55px) rotate(-25deg)}100%{opacity:.2;transform:translate(-30px,80px) rotate(-80deg)}}
@keyframes bbDrawChargeRight{0%{transform:translate(25px,0)}38%{transform:translate(-160px,0) scale(1.15)}48%{transform:translate(-185px,0) scale(.92,1.18)}58%{transform:translate(-55px,-55px) rotate(25deg)}100%{opacity:.2;transform:translate(30px,80px) rotate(80deg)}}
@keyframes bbStableProjectile{0%{transform:translate(0,0) scale(.7);opacity:0}10%{opacity:1}100%{transform:translate(var(--to-x),var(--to-y)) scale(1.12);opacity:1}}
@keyframes bbStableFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}

@media(max-width:760px){
  .classic-rps-object{width:110px;height:130px;top:37%;transform:scale(.78)}
  .classic-rps-object.left-object{left:1%}.classic-rps-object.right-object{right:1%}
  .classic-impact-core{width:180px}.classic-impact-core small{width:250px;font-size:10px}
  .rps-classic-page .duel-clean .fighter{min-height:230px}.rps-classic-page .duel-clean .move-clean{font-size:78px;min-height:110px}
}

/* v2.6 — Big Muscle Bean + SpectorBean */
.muscle-brand{display:grid;place-items:center;background:linear-gradient(145deg,#facc15,#f59e0b);color:#111;border-radius:14px;width:42px;height:42px;box-shadow:0 10px 30px rgba(250,204,21,.2)}
.muscle-top-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-bottom:18px}.muscle-create-card h2{margin:10px 0 18px}.muscle-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.muscle-mode{border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);border-radius:16px;padding:14px;text-align:left;cursor:pointer;transition:.18s ease}.muscle-mode b{display:block;font-size:18px}.muscle-mode small{color:var(--muted)}.muscle-mode.active{border-color:rgba(250,204,21,.65);background:rgba(250,204,21,.08);transform:translateY(-1px);box-shadow:0 12px 28px rgba(250,204,21,.08)}
.muscle-money-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.muscle-money-preview>div{padding:11px;border-radius:14px;background:#0b0b0d;border:1px solid var(--line)}.muscle-money-preview small{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em}.muscle-money-preview strong{display:block;margin-top:4px;font-size:17px}
.open-games-list{display:grid;gap:8px}.open-game-row{width:100%;display:grid;grid-template-columns:1.5fr .7fr .8fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:#0b0b0d;color:var(--text);padding:12px 13px;border-radius:14px;cursor:pointer;text-align:left;transition:.16s ease}.open-game-row:hover{border-color:rgba(250,204,21,.55);transform:translateY(-1px)}.open-game-row span b,.open-game-row span small{display:block}.open-game-row span small{color:var(--muted);font-size:10px}.open-game-row i{font-style:normal;color:var(--yellow);font-weight:900}.empty-open{padding:28px 12px;text-align:center;border:1px dashed var(--line);border-radius:14px}
.muscle-arena-shell{padding:0;overflow:hidden}.muscle-arena-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}.muscle-arena-head>div{display:flex;flex-direction:column}.muscle-arena-head .right{text-align:right;align-items:flex-end}.muscle-match-meta{text-align:center!important;align-items:center!important;min-width:150px}.muscle-match-meta span{font-size:11px;letter-spacing:.12em;color:var(--yellow);font-weight:900}.muscle-match-meta b{font-size:20px}.muscle-match-meta small{color:var(--muted)}
.muscle-stage{--arm-pos:0;position:relative;min-height:430px;background:radial-gradient(circle at 50% 55%,rgba(250,204,21,.06),transparent 31%),linear-gradient(180deg,#111116,#08090b 72%);overflow:hidden;isolation:isolate}.muscle-stage:before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,#070708),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 44px);transform:perspective(500px) rotateX(58deg);transform-origin:bottom}.muscle-floor-shadow{position:absolute;left:50%;bottom:48px;width:420px;height:42px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);filter:blur(6px)}
.muscle-bean{position:absolute;bottom:108px;width:160px;height:190px;border-radius:52% 48% 48% 52% / 44% 48% 52% 56%;background:linear-gradient(145deg,#7c2d12 0 12%,#9a4315 28%,#5e270d 76%,#311208);border:3px solid rgba(0,0,0,.65);box-shadow:inset 16px 14px 0 rgba(255,255,255,.06),inset -20px -22px 0 rgba(0,0,0,.18),0 26px 35px rgba(0,0,0,.5);transition:transform .12s linear}.muscle-bean.bean-left{left:10%;transform:translateX(calc(var(--arm-pos)*18px)) rotate(calc(var(--arm-pos)*-3deg))}.muscle-bean.bean-right{right:10%;transform:scaleX(-1) translateX(calc(var(--arm-pos)*18px)) rotate(calc(var(--arm-pos)*-3deg))}.muscle-face{position:absolute;left:34px;top:54px;width:88px;height:56px}.muscle-face .eye{position:absolute;top:4px;width:15px;height:8px;background:#1b0c07;border-radius:50%;transition:.15s}.muscle-face .e1{left:8px;transform:rotate(12deg)}.muscle-face .e2{right:8px;transform:rotate(-12deg)}.muscle-face .mouth{position:absolute;left:34px;top:33px;width:22px;height:10px;border-bottom:5px solid #1b0c07;border-radius:50%}.muscle-stage.near-left .bean-right .eye,.muscle-stage.near-right .bean-left .eye{height:15px}.muscle-stage.near-left .bean-right .mouth,.muscle-stage.near-right .bean-left .mouth{border-bottom:0;border-top:5px solid #1b0c07;top:36px}.muscle-sweat{position:absolute;inset:0}.muscle-sweat i{position:absolute;width:8px;height:14px;border-radius:70% 30% 70% 30%;background:#60a5fa;opacity:0}.muscle-sweat i:nth-child(1){right:12px;top:20px}.muscle-sweat i:nth-child(2){right:-5px;top:54px}.muscle-sweat i:nth-child(3){right:21px;top:-7px}.near-left .bean-right .muscle-sweat i,.near-right .bean-left .muscle-sweat i{animation:muscleSweat .7s linear infinite;opacity:1}.muscle-bicep{position:absolute;top:80px;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#a64b18,#6b2a0c);border:3px solid #341405;box-shadow:inset 9px 8px 0 rgba(255,255,255,.05)}.left-bicep{right:-35px}.right-bicep{right:-35px}
.muscle-table{position:absolute;left:50%;bottom:68px;width:390px;height:120px;transform:translateX(-50%);z-index:4}.table-top{position:absolute;left:0;right:0;top:0;height:42px;border-radius:18px;background:linear-gradient(#7a3d18,#4f250f);border:4px solid #2d1208;box-shadow:inset 0 5px 0 rgba(255,255,255,.08),0 12px 20px rgba(0,0,0,.3)}.muscle-table .leg{position:absolute;top:38px;width:24px;height:94px;background:#3b1c0d;border:3px solid #210c05}.muscle-table .l1{left:65px;transform:rotate(4deg)}.muscle-table .l2{right:65px;transform:rotate(-4deg)}
.arm-rig{position:absolute;left:50%;bottom:162px;width:250px;height:130px;transform:translateX(-50%) rotate(calc(var(--arm-pos)*38deg));transform-origin:50% 76%;z-index:8;transition:transform .08s linear;filter:drop-shadow(0 10px 9px rgba(0,0,0,.4))}.forearm{position:absolute;top:47px;width:120px;height:30px;border-radius:999px;background:linear-gradient(#9c4517,#6e2d0e);border:3px solid #381505}.left-arm{left:1px;transform:rotate(-18deg);transform-origin:right center}.right-arm{right:1px;transform:rotate(18deg);transform-origin:left center}.grip{position:absolute;left:50%;top:35px;width:44px;height:50px;transform:translateX(-50%);border-radius:18px;background:#8d3e15;border:3px solid #381505}.grip i{position:absolute;inset:9px;border-radius:12px;border:2px solid rgba(255,255,255,.08)}
.muscle-countdown{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.7);font-size:86px;font-weight:1000;letter-spacing:-.08em;opacity:0;z-index:20;color:#fff;text-shadow:0 8px 0 #3b2500,0 0 40px rgba(250,204,21,.45)}.muscle-countdown.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:countPulse .8s ease both}.muscle-slam-label{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%) rotate(-5deg) scale(.4);font-size:70px;font-weight:1000;color:var(--yellow);opacity:0;z-index:22;text-shadow:0 7px 0 #4a2d00}.muscle-slam-label.show{animation:slamText 1.1s ease both}.muscle-stage.slam-win .arm-rig{animation:slamRight 1s cubic-bezier(.15,.8,.2,1) both}.muscle-stage.slam-loss .arm-rig{animation:slamLeft 1s cubic-bezier(.15,.8,.2,1) both}.muscle-stage.slam-win .bean-left,.muscle-stage.slam-loss .bean-right{animation:flexBounce .7s .55s ease both}.muscle-stage.slam-win .bean-right,.muscle-stage.slam-loss .bean-left{animation:beanFlatten .8s .45s ease both}
.muscle-input-zone{padding:18px;border-top:1px solid var(--line);text-align:center}.mash-button{width:min(430px,90%);height:110px;border:1px solid rgba(250,204,21,.45);border-radius:24px;background:linear-gradient(180deg,#facc15,#dcae05);color:#111;cursor:pointer;box-shadow:0 14px 0 #8d6e00,0 24px 38px rgba(0,0,0,.38);transform:translateY(0);transition:.06s}.mash-button b{display:block;font-size:34px}.mash-button span{font-size:12px;font-weight:900;letter-spacing:.12em}.mash-button.tap,.mash-button:active{transform:translateY(9px);box-shadow:0 5px 0 #8d6e00,0 12px 20px rgba(0,0,0,.3)}
.type-stage-row{display:flex;justify-content:center;gap:24px;color:var(--muted);font-size:12px}.type-sequence{display:flex;justify-content:center;gap:8px;margin:18px 0}.type-sequence span{display:grid;place-items:center;width:46px;height:56px;border:1px solid var(--line);border-radius:12px;background:#0a0a0c;font-size:26px;font-weight:1000;transition:.13s}.type-sequence span.current{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(250,204,21,.08);transform:translateY(-2px)}.type-sequence span.done{color:#111;background:#4ade80;border-color:#4ade80}.type-capture{width:min(520px,92%);padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#09090b;color:#fff;text-align:center;outline:none}.type-capture:focus{border-color:rgba(250,204,21,.7)}.type-capture.penalty{animation:typeError .25s ease;background:rgba(251,113,133,.08);border-color:#fb7185}.muscle-result{padding:18px;text-align:center;border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(250,204,21,.04),transparent)}

.spector-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.spector-score{min-width:140px;border:1px solid var(--line);border-radius:16px;padding:12px 16px;text-align:right;background:#0a0a0c}.spector-score small,.spector-score span{display:block;color:var(--muted)}.spector-score strong{font-size:30px;color:var(--yellow)}.spector-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;margin-top:18px}.spector-stage-card{padding:0;overflow:hidden}.spector-player-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center}.spector-player-row>div{display:flex;flex-direction:column}.spector-player-row .right{text-align:right;align-items:flex-end}.spector-player-row small{color:var(--muted)}.spector-live-pill{align-items:center!important}.spector-live-stage{position:relative;min-height:430px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(250,204,21,.05),transparent 28%),#090a0c;overflow:hidden}.spector-crowd{height:64px;display:flex;align-items:end;justify-content:center;gap:5px;padding:0 14px 8px;background:linear-gradient(transparent,#08090b)}.spector-crowd i{font-style:normal;font-size:25px;animation:crowdBob .8s var(--d) ease-in-out infinite alternate}.reaction-bar{display:flex;justify-content:center;gap:8px;padding:12px;border-top:1px solid var(--line);background:#0a0a0c}.reaction-bar button{width:44px;height:40px;border-radius:12px;border:1px solid var(--line);background:#111;color:#fff;font-size:20px;cursor:pointer}.reaction-bar button:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.5)}.floating-reaction{position:absolute;bottom:12%;font-style:normal;font-size:34px;animation:reactionFloat 1.7s ease-out forwards;z-index:30}.prediction-card{align-self:start;position:sticky;top:18px}.prediction-choice{width:100%;display:flex;justify-content:space-between;align-items:center;margin:8px 0;padding:14px;border-radius:14px;border:1px solid var(--line);background:#0b0b0d;color:#fff;cursor:pointer}.prediction-choice:hover:not(:disabled){border-color:rgba(250,204,21,.6)}.prediction-choice.selected{border-color:#4ade80;background:rgba(74,222,128,.06)}.prediction-choice:disabled{cursor:default;opacity:.65}.prediction-meter{height:8px;border-radius:999px;background:#1b1b1f;overflow:hidden;margin:14px 0}.prediction-meter i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--yellow),#f59e0b);transition:.35s}.spector-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}.spector-rules div{padding:10px 5px;border:1px solid var(--line);border-radius:12px;text-align:center}.spector-rules b,.spector-rules span{display:block}.spector-rules span{color:var(--muted);font-size:9px}.spectator-muscle{--arm-pos:0;position:relative;width:min(640px,92%);height:260px}.sm-bean{position:absolute;bottom:20px;font-size:96px;filter:drop-shadow(0 18px 10px rgba(0,0,0,.45));transition:.1s}.sm-bean.left{left:3%}.sm-bean.right{right:3%;transform:scaleX(-1)}.sm-table{position:absolute;left:50%;bottom:15px;width:300px;height:50px;transform:translateX(-50%);border-radius:18px;background:#5b2d12;border:4px solid #2d1208}.sm-arm{position:absolute;left:50%;top:95px;width:150px;height:36px;transform:translateX(-50%) rotate(calc(var(--arm-pos)*38deg));border-radius:999px;background:linear-gradient(90deg,#8d3e15,#b45a20,#8d3e15);border:3px solid #3b1607;transition:.08s}.spectator-muscle>b{position:absolute;left:50%;top:15px;transform:translateX(-50%);color:var(--yellow);letter-spacing:.12em}.spectator-rps{display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;width:min(650px,90%);text-align:center}.spectator-rps div{padding:28px;border:1px solid var(--line);border-radius:20px;background:#0d0d10}.spectator-rps b{display:block;font-size:50px}.spectator-rps span{display:block;font-size:48px;text-transform:capitalize}.spectator-rps i{font-style:normal;color:var(--muted)}.spectator-battle{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;width:min(700px,94%)}.mini-watch-board{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}.mini-watch-board i{aspect-ratio:1;background:#101218;border-radius:3px}.mini-watch-board i.hit{background:#fb7185}.mini-watch-board i.miss{background:#60a5fa}.versus{font-weight:1000;color:var(--muted)}
.live-battles-card{margin-top:18px}.live-battles-list{display:grid;gap:8px}.live-battle-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#0b0b0d}.live-battle-row .live-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.08)}.live-battle-row small{color:var(--muted)}

@keyframes muscleSweat{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(48px) translateX(18px) scale(1)}}@keyframes countPulse{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}35%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1);opacity:.9}}@keyframes slamText{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.3)}35%{opacity:1;transform:translate(-50%,-50%) rotate(3deg) scale(1.25)}70%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.85)}}@keyframes slamRight{0%{transform:translateX(-50%) rotate(calc(var(--arm-pos)*38deg))}45%{transform:translateX(-50%) rotate(44deg)}62%{transform:translateX(-50%) rotate(34deg)}100%{transform:translateX(-50%) rotate(42deg)}}@keyframes slamLeft{0%{transform:translateX(-50%) rotate(calc(var(--arm-pos)*38deg))}45%{transform:translateX(-50%) rotate(-44deg)}62%{transform:translateX(-50%) rotate(-34deg)}100%{transform:translateX(-50%) rotate(-42deg)}}@keyframes flexBounce{0%{transform:translateY(0)}45%{transform:translateY(-22px) scale(1.05)}100%{transform:translateY(0)}}@keyframes beanFlatten{0%{transform:scale(1)}55%{transform:translateY(25px) scale(1.15,.72) rotate(8deg)}100%{transform:translateY(22px) scale(1.1,.78)}}@keyframes typeError{0%,100%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}}@keyframes crowdBob{to{transform:translateY(-9px) rotate(7deg)}}@keyframes reactionFloat{0%{opacity:0;transform:translateY(20px) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-230px) rotate(18deg) scale(1.25)}}
@media(max-width:900px){.muscle-top-grid,.spector-layout{grid-template-columns:1fr}.prediction-card{position:static}.muscle-bean.bean-left{left:2%}.muscle-bean.bean-right{right:2%}.muscle-stage{min-height:390px}.spector-live-stage{min-height:360px}}@media(max-width:620px){.muscle-money-preview{grid-template-columns:1fr 1fr}.open-game-row{grid-template-columns:1fr 1fr}.open-game-row i{grid-column:1/-1}.muscle-arena-head{grid-template-columns:1fr auto 1fr;padding:10px}.muscle-bean{width:112px;height:142px;bottom:100px}.muscle-face{transform:scale(.76);transform-origin:top left}.muscle-bicep{width:52px;height:52px}.muscle-table{width:270px}.arm-rig{width:190px}.forearm{width:92px}.type-sequence{gap:4px}.type-sequence span{width:36px;height:48px;font-size:21px}.spector-hero{align-items:flex-start}.spector-score{min-width:110px}.spector-player-row{font-size:12px}.spectator-rps span{font-size:36px}.live-battle-row{grid-template-columns:auto 1fr auto}.live-battle-row .watch-link{grid-column:2/-1}}
.gamecard-muscle .game-card-glow{background:radial-gradient(circle at 50% 30%,rgba(250,204,21,.16),transparent 58%)}.muscle-preview{position:relative;min-height:170px;overflow:hidden;background:radial-gradient(circle at 50% 75%,rgba(250,204,21,.08),transparent 55%)}.mini-muscle-bean{position:absolute;bottom:18px;width:78px;height:92px;border-radius:52% 48% 48% 52% / 44% 48% 52% 56%;background:linear-gradient(145deg,#9a4315,#5e270d);border:3px solid #2e1208;box-shadow:inset 8px 8px 0 rgba(255,255,255,.05)}.mini-muscle-bean:before,.mini-muscle-bean:after{content:"";position:absolute;top:34px;width:9px;height:5px;background:#1d0b05;border-radius:50%}.mini-muscle-bean:before{left:20px}.mini-muscle-bean:after{right:20px}.mini-muscle-bean.left{left:18%;animation:miniStrainLeft 1.4s ease-in-out infinite}.mini-muscle-bean.right{right:18%;transform:scaleX(-1);animation:miniStrainRight 1.4s ease-in-out infinite}.mini-muscle-table{position:absolute;left:50%;bottom:12px;width:190px;height:28px;transform:translateX(-50%);border-radius:12px;background:#633116;border:3px solid #2d1208}.mini-muscle-arm{position:absolute;left:50%;bottom:82px;width:110px;height:26px;transform:translateX(-50%) rotate(-8deg);border-radius:999px;background:linear-gradient(90deg,#8f3d14,#b85a20,#8f3d14);border:3px solid #351305;animation:miniArmFight 1.4s ease-in-out infinite}@keyframes miniArmFight{0%,100%{transform:translateX(-50%) rotate(-12deg)}50%{transform:translateX(-50%) rotate(12deg)}}@keyframes miniStrainLeft{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(7px) rotate(2deg)}}@keyframes miniStrainRight{0%,100%{transform:scaleX(-1) translateX(0) rotate(-2deg)}50%{transform:scaleX(-1) translateX(7px) rotate(2deg)}}