/* === 小象猜拳机 v0.0.7 === */
:root{
  --bg:#f4ead8; --paper:#fff8ea; --ink:#2e2118; --muted:#7d6858;
  --line:#d8b98a; --accent:#6db7d8; --accent2:#e9866b; --accent3:#8fbf70;
  --dark:#3b2c23; --card:#fffaf0; --kraft:#c9986a; --kraftDark:#8e6435;
  --p1:#6db7d8; --p2:#e9866b;
  --hp:#d45d47; --pressure:#e0b94d; --pressureFull:#c0392b;
}
*{box-sizing:border-box;margin:0;padding:0;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}
body{background:linear-gradient(180deg,#f6eddc,#ead4b5)}
button{font-family:inherit;cursor:pointer;border:3px solid var(--dark);background:#fff8ea;border-radius:12px;padding:10px 18px;font-weight:800;font-size:16px;box-shadow:4px 4px 0 rgba(59,44,35,.2);transition:transform .1s, box-shadow .1s}
button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(59,44,35,.2)}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(59,44,35,.2)}
.big-btn{font-size:24px;padding:16px 36px;background:#ffd24d;border-width:4px;border-radius:18px;box-shadow:6px 6px 0 rgba(59,44,35,.3)}
.big-btn.ghost{background:#fff8ea}
.small-btn{font-size:14px;padding:8px 14px}
.hidden{display:none !important}

#app{position:relative;width:100%;height:100%;overflow:hidden;perspective:1200px}
.screen{position:absolute;inset:0}

/* =========================================================
   LOGIN SCREEN
========================================================= */
#loginScreen{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,#fff3d3,#ead4b5 70%)}
.login-bg-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bg-machine{position:absolute;bottom:0;width:300px;height:240px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 8px,transparent 8px 14px),linear-gradient(180deg,#d6a06a,#a87038);
  border:6px solid var(--dark);border-radius:18px;opacity:.45;
  animation:bgSway 4s ease-in-out infinite alternate;
}
.bg-machine.left{left:5%;transform:rotate(-6deg)}
.bg-machine.right{right:5%;transform:rotate(6deg)}
@keyframes bgSway{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-12px) rotate(-3deg)}}
.bg-machine.right{animation-name:bgSwayRight}
@keyframes bgSwayRight{from{transform:translateY(0) rotate(6deg)}to{transform:translateY(-12px) rotate(3deg)}}

.login-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:34px;z-index:2}
.game-logo{position:relative;text-align:center;padding:18px 40px;background:#fff8ea;border:5px solid var(--dark);border-radius:24px;box-shadow:10px 10px 0 rgba(59,44,35,.25);transform:rotate(-2deg)}
.logo-row1{font-size:48px;font-weight:900;letter-spacing:.1em;color:#7a4e1e}
.logo-row2{font-size:72px;font-weight:900;letter-spacing:.05em;color:#b96d2b;-webkit-text-stroke:4px var(--dark);text-shadow:6px 6px 0 #f0d6a7}
.logo-tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);width:140px;height:26px;background:rgba(109,183,216,.7);border:2px solid rgba(0,0,0,.2)}
.hint-text{color:var(--muted);font-weight:700;font-size:14px}

/* =========================================================
   PLAYER SELECT
========================================================= */
#playerSelectScreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,#fff3d3,#ead4b5 70%);padding:20px}
.select-title{font-size:36px;font-weight:900;margin-bottom:30px;color:#7a4e1e;text-shadow:3px 3px 0 #fff8ea}
.select-wrap{display:flex;gap:60px;margin-bottom:24px}
.select-card{
  width:320px;height:380px;background:#f5e9cf;border:5px solid var(--dark);border-radius:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:24px;
  box-shadow:8px 8px 0 rgba(59,44,35,.22);position:relative;
  transition:background .25s, transform .2s, box-shadow .2s;
  filter:grayscale(.5);
}
.select-card.holding{filter:grayscale(0)}
.select-card.confirmed{background:#fff5c2;border-color:#b96d2b;transform:translate(-3px,-3px);box-shadow:11px 11px 0 rgba(59,44,35,.3);filter:none;animation:confirmPulse .6s ease-out}
@keyframes confirmPulse{0%{transform:scale(.98)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
#p1Card{border-left:12px solid var(--p1)}
#p2Card{border-right:12px solid var(--p2)}
.card-label{font-size:24px;font-weight:900;letter-spacing:.1em;color:#5b3a18}
.card-elephant{width:120px;height:110px;background:url("assets/elephant.svg") center/contain no-repeat}
.card-hint{font-size:14px;color:var(--muted);font-weight:700;text-align:center;line-height:1.4}
.select-card.confirmed .card-hint{color:#3a8a3f;font-weight:800}
.select-card.confirmed .card-hint::before{content:"✓ 已确认 / "}
.hold-ring{position:relative;width:100px;height:100px;margin-top:8px}
.hold-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(0,0,0,.12);stroke-width:8}
.ring-fg{fill:none;stroke:#b96d2b;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:276.46; stroke-dashoffset:276.46; transition:stroke-dashoffset .08s linear}
.ring-percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;color:#7a4e1e;font-size:18px}
.ready-hint{font-size:18px;color:var(--muted);font-weight:800;margin:12px 0 18px;min-height:28px}
.ready-hint.active{color:#3a8a3f;font-size:22px;animation:readyPulse .6s ease-in-out infinite alternate}
@keyframes readyPulse{from{transform:scale(1)}to{transform:scale(1.08)}}

/* =========================================================
   BATTLE SCREEN
========================================================= */
#battleScreen{position:absolute;inset:0}
#world{position:absolute;inset:0}
.arena-table{position:absolute;left:0;right:0;bottom:0;height:36%;
  background:repeating-linear-gradient(90deg,#c9986a 0 18px,#b88555 18px 20px),linear-gradient(180deg,#d6a574,#9e6e3e);
  border-top:6px solid #6b4523;box-shadow:inset 0 14px 32px rgba(0,0,0,.18)}
.background-set{position:absolute;left:0;right:0;top:0;height:64%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,243,219,.6),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 60px,transparent 60px 120px)}

.player-area{position:absolute;bottom:6%;width:46%;height:74%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
#p1Area{left:2%}
#p2Area{right:2%}

/* v0.0.5: .character blobs removed — they served no gameplay role */

/* Slot machine */
.slot-machine{position:relative;width:360px;height:290px;display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.machine-body{position:absolute;left:0;right:0;bottom:0;height:75%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 8px,transparent 8px 14px),linear-gradient(180deg,#d6a06a,#a87038);border:5px solid var(--dark);border-radius:18px;box-shadow:6px 6px 0 rgba(0,0,0,.18), inset 0 0 0 3px rgba(255,255,255,.15)}
.machine-body::before{content:"";position:absolute;top:8px;left:8px;right:8px;height:18px;background:repeating-linear-gradient(90deg,#5b3a1c 0 12px,transparent 12px 24px);opacity:.4;border-radius:8px}

.reel-stage{position:relative;width:260px;height:130px;margin-top:30px;z-index:2;perspective:900px}
.hex-reel{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(0deg)}
.reel-face{position:absolute;left:50%;top:50%;width:200px;height:120px;margin-left:-100px;margin-top:-60px;background:linear-gradient(180deg,#fff8ea,#f3e2bf);border:4px solid var(--dark);border-radius:10px;display:flex;align-items:center;justify-content:center;backface-visibility:visible}
.reel-face[data-face="0"]{transform:rotateX(  0deg) translateZ(104px)}
.reel-face[data-face="1"]{transform:rotateX( 60deg) translateZ(104px)}
.reel-face[data-face="2"]{transform:rotateX(120deg) translateZ(104px)}
.reel-face[data-face="3"]{transform:rotateX(180deg) translateZ(104px)}
.reel-face[data-face="4"]{transform:rotateX(240deg) translateZ(104px)}
.reel-face[data-face="5"]{transform:rotateX(300deg) translateZ(104px)}
.reel-face[data-symbol]::after{content:"";position:absolute;inset:8px;background-position:center;background-repeat:no-repeat;background-size:80% 80%}
.reel-face[data-symbol="rock"]::after{background-image:url("assets/rock.svg")}
.reel-face[data-symbol="scissors"]::after{background-image:url("assets/scissors.svg")}
.reel-face[data-symbol="paper"]::after{background-image:url("assets/paper.svg")}
.result-window{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 3px rgba(59,44,35,.15) inset;border-radius:14px}

.elephant-topper{position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:160px;height:140px;background:url("assets/elephant.svg") center bottom/contain no-repeat;transform-origin:50% 100%;z-index:3;animation:idleSway 2.6s ease-in-out infinite}
.elephant-topper.spin{animation:spinJitter .18s linear infinite}
.elephant-topper.win{animation:winBounce .6s ease-out}
.elephant-topper.lose{animation:loseDroop .6s ease-out forwards}
@keyframes idleSway{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@keyframes spinJitter{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@keyframes winBounce{0%{transform:translateX(-50%) translateY(0) scale(1)}40%{transform:translateX(-50%) translateY(-20px) scale(1.15)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes loseDroop{0%{transform:translateX(-50%) rotate(0) translateY(0)}100%{transform:translateX(-50%) rotate(8deg) translateY(8px)}}

.start-lamp{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8c0,#9c8830);border:3px solid var(--dark);transition:box-shadow .2s, background .2s}
.start-lamp.on{background:radial-gradient(circle at 35% 35%,#fff,#ffd24d);box-shadow:0 0 24px 6px rgba(255,210,80,.7)}

.attack-origin{position:absolute;top:50%;width:1px;height:1px;opacity:0}
#p1AttackOrigin{right:-10px}
#p2AttackOrigin{left:-10px}

.basin-prop{position:absolute;bottom:8px;width:140px;height:80px;background:url("assets/basin.svg") center/contain no-repeat;opacity:0;transform:translateY(20px) rotate(-10deg);transition:opacity .15s, transform .2s ease-out;z-index:5}
#p1Area .basin-prop{left:140px}
#p2Area .basin-prop{right:140px}
.basin-prop.up{opacity:1;transform:translateY(-60px) rotate(0deg) scale(1.1);transition:opacity .15s, transform .35s cubic-bezier(.34,1.6,.64,1)}
.basin-prop.perfect{filter:drop-shadow(0 0 12px #ffe080)}
.basin-prop.success{
  opacity:1;
  animation:basinSuccess 1.4s ease-out;
  filter:drop-shadow(0 0 30px #ffd24d) drop-shadow(0 0 14px #fff) brightness(1.35);
  z-index:9;
}
@keyframes basinSuccess{
  0%  {transform:translateY(-60px) rotate(0)    scale(1.1)}
  12% {transform:translateY(-90px) rotate(-12deg) scale(1.55)}
  28% {transform:translateY(-70px) rotate(10deg)  scale(1.35)}
  45% {transform:translateY(-78px) rotate(-6deg)  scale(1.25)}
  65% {transform:translateY(-68px) rotate(4deg)   scale(1.18)}
  85% {transform:translateY(-62px) rotate(-2deg)  scale(1.12)}
  100%{transform:translateY(-60px) rotate(0)     scale(1.1)}
}

/* "GUARD!" pop-up text near basin on successful block */
.guard-pop{
  position:absolute;font-weight:900;font-size:48px;color:#fff;
  -webkit-text-stroke:5px #b96d2b;text-shadow:0 0 22px #ffd24d, 5px 5px 0 rgba(0,0,0,.3);
  letter-spacing:.1em;pointer-events:none;z-index:18;
  animation:guardPop 1.35s ease-out forwards;
}
@keyframes guardPop{
  0%  {transform:translate(-50%,0) scale(.3) rotate(-8deg); opacity:0}
  18% {transform:translate(-50%,-40px) scale(1.45) rotate(4deg); opacity:1}
  35% {transform:translate(-50%,-58px) scale(1.15) rotate(-2deg); opacity:1}
  75% {transform:translate(-50%,-66px) scale(1.05); opacity:1}
  100%{transform:translate(-50%,-110px) scale(1); opacity:0}
}

/* ---- Water projectile (v0.0.5: bigger, slower, more readable) ---- */
.water-projectile{
  position:absolute;width:220px;height:140px;
  background:url("assets/splash.svg") center/contain no-repeat;
  top:50%;transform:translate(-50%,-50%);
  z-index:18;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(120,200,240,.5));
}
.water-projectile.to-right{
  left:30%;
  animation:travelRight .85s cubic-bezier(.34,.02,.55,1) forwards;
}
.water-projectile.to-left{
  left:70%;
  animation:travelLeft .85s cubic-bezier(.34,.02,.55,1) forwards;
}
@keyframes travelRight{
  0%  {left:30%; transform:translate(-50%,-50%) scale(.35) rotate(-25deg); opacity:0}
  12% {opacity:1; transform:translate(-50%,-55%) scale(.7)  rotate(-15deg)}
  35% {transform:translate(-50%,-72%) scale(.95) rotate(-5deg)}
  60% {transform:translate(-50%,-68%) scale(1.08) rotate(10deg)}
  85% {transform:translate(-50%,-52%) scale(1.18) rotate(20deg)}
  100%{left:70%; transform:translate(-50%,-50%) scale(1.25) rotate(28deg); opacity:1}
}
@keyframes travelLeft{
  0%  {left:70%; transform:translate(-50%,-50%) scale(.35) rotate(25deg); opacity:0}
  12% {opacity:1; transform:translate(-50%,-55%) scale(.7) rotate(15deg)}
  35% {transform:translate(-50%,-72%) scale(.95) rotate(5deg)}
  60% {transform:translate(-50%,-68%) scale(1.08) rotate(-10deg)}
  85% {transform:translate(-50%,-52%) scale(1.18) rotate(-20deg)}
  100%{left:30%; transform:translate(-50%,-50%) scale(1.25) rotate(-28deg); opacity:1}
}
.water-projectile.impact{
  animation:splashImpact .8s ease-out forwards !important;
}
@keyframes splashImpact{
  0%  {transform:translate(-50%,-50%) scale(1.25); opacity:1}
  20% {transform:translate(-50%,-50%) scale(2.0);  opacity:1}
  50% {transform:translate(-50%,-50%) scale(2.8);  opacity:.9}
  100%{transform:translate(-50%,-50%) scale(3.8);  opacity:0}
}
.water-projectile.blocked{
  animation:splashBlocked .85s ease-out forwards !important;
}
@keyframes splashBlocked{
  0%  {transform:translate(-50%,-50%) scale(1.25) rotate(0);     opacity:1}
  25% {transform:translate(-50%,-70%) scale(1.6)  rotate(-15deg); opacity:1}
  55% {transform:translate(-50%,-110%) scale(1.9) rotate(-40deg); opacity:.95}
  100%{transform:translate(-50%,-200%) scale(2.4) rotate(-75deg); opacity:0}
}
/* v0.0.5: brief telegraph flash before the splash launches */
.attack-telegraph{
  position:absolute;left:50%;top:50%;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(109,183,216,.55) 60%,transparent 75%);
  transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:17;pointer-events:none;
  animation:telegraphPulse .35s ease-out forwards;
}
@keyframes telegraphPulse{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(.2)}
  40% {opacity:1; transform:translate(-50%,-50%) scale(1.0)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)}
}

/* ---- Hit reaction: elephant & machine shake + red flash ---- */
.player-area.hit .elephant-topper{
  animation:hitShake .55s ease-in-out, hitRed .55s ease-out;
}
.player-area.hit .slot-machine{
  animation:hitShake .55s ease-in-out, hitRed .55s ease-out;
}
.player-area.crit-hit .elephant-topper{
  animation:hitShakeBig .8s ease-in-out, hitRedDeep .8s ease-out;
}
.player-area.crit-hit .slot-machine{
  animation:hitShakeBig .8s ease-in-out, hitRedDeep .8s ease-out;
}
@keyframes hitShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-10px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-7px)}
  60%{transform:translateX(5px)}
  80%{transform:translateX(-3px)}
}
@keyframes hitShakeBig{
  0%,100%{transform:translateX(0) translateY(0)}
  10%{transform:translateX(-16px) translateY(-4px)}
  25%{transform:translateX(14px) translateY(3px)}
  40%{transform:translateX(-12px) translateY(-3px)}
  55%{transform:translateX(10px) translateY(2px)}
  70%{transform:translateX(-7px)}
  85%{transform:translateX(5px)}
}
@keyframes hitRed{
  0%,100%{filter:none}
  25%{filter:sepia(1) hue-rotate(-50deg) saturate(6) brightness(1.1)}
  60%{filter:sepia(.6) hue-rotate(-50deg) saturate(3) brightness(1.05)}
}
@keyframes hitRedDeep{
  0%,100%{filter:none}
  20%{filter:sepia(1) hue-rotate(-50deg) saturate(8) brightness(1.25)}
  50%{filter:sepia(1) hue-rotate(-50deg) saturate(6) brightness(1.15)}
  80%{filter:sepia(.5) hue-rotate(-50deg) saturate(3)}
}

/* Red full-screen vignette flash when someone is hit */
#hitVignette{
  position:absolute;inset:0;pointer-events:none;z-index:17;opacity:0;
  background:radial-gradient(ellipse at var(--vg-x,50%) 55%, transparent 40%, rgba(212,93,71,.55) 85%);
}
#hitVignette.fire{animation:vignetteFx .5s ease-out}
#hitVignette.fire-crit{animation:vignetteFxBig .8s ease-out}
@keyframes vignetteFx{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@keyframes vignetteFxBig{0%{opacity:0}30%{opacity:1}80%{opacity:.8}100%{opacity:0}}

/* Damage number popup at victim */
.dmg-popup{
  position:absolute;font-weight:900;font-size:42px;color:#fff;
  -webkit-text-stroke:4px #c0392b;text-shadow:0 0 14px #ff7c66, 4px 4px 0 rgba(0,0,0,.25);
  pointer-events:none;z-index:19;
  animation:dmgPop 1s ease-out forwards;
}
.dmg-popup.crit{font-size:64px;-webkit-text-stroke:5px #7a1e10;color:#ffd24d}
@keyframes dmgPop{
  0%  {transform:translate(-50%,0) scale(.5); opacity:0}
  25% {transform:translate(-50%,-30px) scale(1.3); opacity:1}
  70% {transform:translate(-50%,-60px) scale(1); opacity:1}
  100%{transform:translate(-50%,-100px) scale(.9); opacity:0}
}

/* Round flash banner (between-rounds replacement for the countdown) */
.round-flash{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  font-weight:900;font-size:62px;color:#fff8ea;
  -webkit-text-stroke:5px #b96d2b;text-shadow:6px 6px 0 #3b2c23;
  pointer-events:none;z-index:24;
  animation:roundFlash .9s ease-out forwards;
}
@keyframes roundFlash{
  0%  {transform:translate(-50%,-50%) scale(.5); opacity:0}
  25% {transform:translate(-50%,-50%) scale(1.2); opacity:1}
  70% {transform:translate(-50%,-50%) scale(1); opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.1); opacity:0}
}

/* HUD */
#battleHud{position:absolute;inset:0;pointer-events:none;z-index:20}
#topInfoBar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center;background:rgba(255,248,234,.85);border:3px solid var(--dark);border-radius:18px;padding:8px 18px;font-weight:800;box-shadow:4px 4px 0 rgba(59,44,35,.15)}
#stateLabel{color:var(--muted);font-weight:700}
#pauseHint{font-size:12px;color:var(--muted);font-weight:600}

.player-hud{position:absolute;top:80px;width:330px;background:rgba(255,248,234,.94);border:3px solid var(--dark);border-radius:18px;padding:14px 16px;box-shadow:4px 4px 0 rgba(59,44,35,.18)}
#p1Hud{left:20px;border-left:none}
#p2Hud{right:20px;border-right:none}
.hud-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px dashed #d8b98a}
.hud-side-stripe{width:8px;height:32px;border-radius:4px}
.p1-stripe{background:var(--p1);box-shadow:0 0 0 2px var(--dark)}
.p2-stripe{background:var(--p2);box-shadow:0 0 0 2px var(--dark)}
#p2Hud .hud-header{justify-content:space-between}
#p2Hud .name-label{margin-left:auto}
.name-label{font-weight:900;font-size:20px}

.hud-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.hud-row-label{flex:0 0 70px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#5b3a18}
.hud-ico{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:2px solid var(--dark);
  font-size:14px;font-weight:900;line-height:1;background:#fff8ea}
.ico-hp{background:#ffe2db;color:var(--hp)}
.ico-press{background:#fff3c4;color:#b9831a}
.ico-sym{background:#dceefa;color:#1a5a7a}

.grid-row{flex:1;display:flex;gap:6px;height:22px;margin:0}
.grid-cell{flex:1;border:3px solid var(--dark);border-radius:6px;background:#f0dcb6;position:relative;overflow:hidden;transition:background .25s, transform .25s, box-shadow .25s}
.grid-cell.hp.full{background:linear-gradient(180deg,#e57366,var(--hp))}
.grid-cell.hp.lost{background:#d8c39e;animation:hpLost .5s ease-out}
@keyframes hpLost{0%{transform:scale(1.2);background:#fff}100%{transform:scale(1);background:#d8c39e}}
.pressure-row{height:16px}
.pressure-row .grid-cell{height:16px;border-width:2px;border-radius:4px}
.grid-cell.press.full{background:linear-gradient(180deg,#f7d97a,var(--pressure));box-shadow:inset 0 0 6px rgba(255,255,255,.3)}
.grid-cell.press.charging{animation:pressFill .35s ease-out}
@keyframes pressFill{0%{transform:scale(.6);background:#fff}100%{transform:scale(1);background:var(--pressure)}}
.pressure-row.ready .grid-cell.full{background:linear-gradient(180deg,#ff7c66,var(--pressureFull));animation:pressReady .6s ease-in-out infinite alternate}
@keyframes pressReady{from{box-shadow:0 0 0 0 rgba(192,57,43,0)}to{box-shadow:0 0 14px 4px rgba(192,57,43,.7)}}

.sym-row-wrap{margin-top:8px}
.current-symbol{width:42px;height:42px;border-radius:10px;border:3px solid var(--dark);background:#fff8ea center/86% no-repeat;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;color:#7d6858}
.current-symbol.rock{background-image:url("assets/rock.svg");color:transparent}
.current-symbol.scissors{background-image:url("assets/scissors.svg");color:transparent}
.current-symbol.paper{background-image:url("assets/paper.svg");color:transparent}
.basin-icon{width:42px;height:42px;border-radius:10px;border:3px solid var(--dark);background:#fff8ea url("assets/basin.svg") center/78% no-repeat;opacity:.35;transition:opacity .15s, transform .15s}
.basin-icon.active{opacity:1;transform:scale(1.15);background-color:#fff5c2;box-shadow:0 0 12px rgba(255,210,80,.7)}

.hud-keys{margin-top:10px;padding-top:8px;border-top:2px dashed #d8b98a;display:flex;flex-direction:column;gap:5px}
.key-line{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#5b3a18}
.key-cap{display:inline-block;min-width:68px;text-align:center;padding:3px 8px;background:#fff8ea;border:2px solid var(--dark);border-radius:6px;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:11px;box-shadow:2px 2px 0 rgba(59,44,35,.18);color:#3b2c23}
.key-desc{color:var(--muted);font-weight:700}

#centerJudgePanel{position:absolute;top:80px;left:50%;transform:translateX(-50%);width:300px;min-height:120px;background:rgba(255,248,234,.92);border:3px solid var(--dark);border-radius:18px;padding:14px;box-shadow:4px 4px 0 rgba(59,44,35,.15);display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto;gap:8px;align-items:center;justify-items:center;opacity:0;transition:opacity .25s}
#centerJudgePanel.show{opacity:1}
.result-icon{width:56px;height:56px;border:3px solid var(--dark);border-radius:12px;background:#fff8ea center/72% no-repeat;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.result-icon.rock{background-image:url("assets/rock.svg");color:transparent}
.result-icon.scissors{background-image:url("assets/scissors.svg");color:transparent}
.result-icon.paper{background-image:url("assets/paper.svg");color:transparent}
.vs-label{font-weight:900;font-size:22px;color:var(--accent2)}
#judgeText{grid-column:1/4;font-weight:800;font-size:18px;text-align:center}
#damageText{grid-column:1/4;font-weight:700;color:var(--muted);text-align:center}

/* Defense hint banner during window */
#defenseHint{position:absolute;top:230px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,243,200,.95);border:3px solid #d45d47;border-radius:14px;padding:10px 22px;box-shadow:4px 4px 0 rgba(59,44,35,.2);z-index:25;animation:defPulse .5s ease-in-out infinite alternate}
@keyframes defPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.04)}}
.def-text{font-weight:900;color:#d45d47;font-size:18px}
.def-bar{width:200px;height:10px;background:#f0dcb6;border:2px solid var(--dark);border-radius:6px;overflow:hidden}
.def-bar-fill{height:100%;width:100%;background:#d45d47;transition:width .05s linear}

#critBanner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:64px;font-weight:900;color:#c0392b;-webkit-text-stroke:4px #fff;text-shadow:0 0 30px #ff7c66;letter-spacing:.1em;z-index:28;animation:critBoom .9s ease-out}
@keyframes critBoom{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}30%{transform:translate(-50%,-50%) scale(1.3);opacity:1}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}

/* VFX layer */
#vfxRoot{position:absolute;inset:0;pointer-events:none;z-index:15}
#splashFlash,#basinBlockFlash,#critBeamFlash,#roundTransitionFlash{position:absolute;inset:0;opacity:0}
#splashFlash.fire{background:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(120,200,240,.65),transparent 30%);animation:flashFx .35s ease-out}
#basinBlockFlash.fire{background:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(255,230,120,.8),transparent 25%);animation:flashFx .3s ease-out}
#critBeamFlash.fire{background:linear-gradient(var(--fx-deg,90deg),rgba(255,80,60,.65),rgba(60,180,255,.7));mix-blend-mode:screen;animation:critFlash .65s ease-out}
#roundTransitionFlash.fire{background:#fff;animation:flashFx .25s ease-out}
@keyframes flashFx{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes critFlash{0%{opacity:0}10%{opacity:1}80%{opacity:.7}100%{opacity:0}}

/* Countdown */
#countdownOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none}
#dimBackground{position:absolute;inset:0;background:rgba(20,12,6,.55);transition:opacity .25s}
#countdownOverlay.fadeOut #dimBackground{opacity:0}
#centerNumberLabel{position:relative;font-weight:900;font-size:240px;color:#fff8ea;-webkit-text-stroke:6px #3b2c23;text-shadow:6px 6px 0 #3b2c23;animation:popNumber .55s ease-out}
#centerNumberLabel.small{font-size:140px}
@keyframes popNumber{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}

/* Pause */
#pauseMenu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,12,6,.5);z-index:55}
.menu-card{background:#fff8ea;border:4px solid var(--dark);border-radius:24px;padding:30px 40px;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:8px 8px 0 rgba(59,44,35,.2)}
.menu-card h2{font-size:28px}

/* =========================================================
   RESULT SCREEN
========================================================= */
#resultScreen{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 60px;background:radial-gradient(ellipse at 50% 0%,#fff3d3,#ead4b5 70%);overflow:hidden}
.result-bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 60px,transparent 60px 120px)}
.podium-group{position:relative;display:flex;align-items:flex-end;gap:0;margin-bottom:30px;z-index:2}
.podium-pillar{position:relative;width:170px;background:repeating-linear-gradient(90deg,#c9986a 0 18px,#b88555 18px 20px),linear-gradient(180deg,#d6a574,#9e6e3e);border:5px solid var(--dark);border-bottom:none;border-radius:8px 8px 0 0;box-shadow:6px -2px 0 rgba(59,44,35,.18) inset}
.podium-pillar .pillar-num{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:60px;font-weight:900;color:#fff;-webkit-text-stroke:3px var(--dark);text-shadow:4px 4px 0 rgba(0,0,0,.2)}
.podium-pillar.p1{height:280px;z-index:3}
.podium-pillar.p2{height:220px;z-index:2}
.podium-pillar.p3{height:170px;z-index:1;opacity:.75}
.pillar-figure{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;display:flex;flex-direction:column;align-items:center;animation:champFloat 2s ease-in-out infinite}
@keyframes champFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.crown{width:90px;height:60px;background:url("assets/crown.svg") center/contain no-repeat;margin-bottom:-12px;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.leaf{width:60px;height:60px;background:url("assets/leaf.svg") center/contain no-repeat;margin-bottom:-10px;z-index:2}
.figure-elephant{width:140px;height:120px;background:url("assets/elephant.svg") center/contain no-repeat}
.figure-elephant.cry{filter:hue-rotate(-20deg) saturate(.7);animation:cryShake 1s ease-in-out infinite}
@keyframes cryShake{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}

.winner-banner{position:absolute;top:8%;left:50%;transform:translateX(-50%);font-size:46px;font-weight:900;color:#b96d2b;-webkit-text-stroke:3px var(--dark);text-shadow:4px 4px 0 rgba(255,210,80,.6);letter-spacing:.05em;z-index:5}
.result-buttons{display:flex;gap:24px;z-index:5}

/* Confetti */
.confetti{position:absolute;top:0;bottom:0;width:200px;pointer-events:none;overflow:hidden;z-index:4}
.confetti.left{left:0}
.confetti.right{right:0}
.confetti-piece{position:absolute;width:14px;height:18px;opacity:.9;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}

/* =========================================================
   VOLUME WIDGET (shared, bottom-left)
========================================================= */
#volumeWidget{position:absolute;bottom:16px;left:16px;z-index:70}
.vol-btn{width:48px;height:48px;border-radius:50%;font-size:24px;padding:0;line-height:48px}
#volumePopup{position:absolute;bottom:60px;left:0;width:260px;background:#fff8ea;border:3px solid var(--dark);border-radius:16px;padding:14px;box-shadow:6px 6px 0 rgba(59,44,35,.2);display:flex;flex-direction:column;gap:10px}
.vol-row{display:grid;grid-template-columns:54px 1fr 36px;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#3b2c23}
.vol-row input[type=range]{width:100%;accent-color:#b96d2b}
.vol-val{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.vol-note{font-size:11px;color:var(--muted);text-align:center;border-top:1px dashed #d8b98a;padding-top:6px}

#versionBadge{position:absolute;bottom:16px;right:16px;background:rgba(255,255,255,.7);border:2px solid var(--dark);border-radius:999px;padding:4px 12px;font-weight:800;font-size:12px;color:#3b2c23;z-index:70}