/* ==============================
   BASE RESET
============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#FFD700;--gold2:#FFA000;--gold3:#FF6F00;
  --red:#FF1744;--red2:#D50000;
  --blue:#00E5FF;--blue2:#0091EA;
  --green:#00E676;
  --dark:#07070F;--dark2:#0D0D20;--dark3:#12122A;
  --silver:#C0C0C0;--silver2:#9E9E9E;
  --white:#FFFFFF;
  --radius:14px;
  --font:'Noto Sans JP',sans-serif;
}
html,body{
  height:100%;overflow:hidden;
  font-family:var(--font);
  background:var(--dark);color:var(--white);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ==============================
   SCREENS
============================== */
.screen{
  display:none;position:fixed;inset:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.screen.active{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.screen-enter{animation:fadeScale .3s cubic-bezier(.4,0,.2,1) both}
@keyframes fadeScale{
  from{opacity:0;transform:scale(.97)}
  to{opacity:1;transform:scale(1)}
}

/* ==============================
   PACHINKO BG
============================== */
.pachinko-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(255,160,0,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(0,229,255,.07) 0%,transparent 50%),
    linear-gradient(160deg,#07071A 0%,#0D0D20 100%);
}
.pachinko-bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(255,215,0,.08) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.5;
}

/* BG lights (home) */
.bg-lights{
  position:absolute;inset:0;overflow:hidden;
}
.bg-lights::before,.bg-lights::after{
  content:'';position:absolute;
  border-radius:50%;filter:blur(60px);
  animation:lightFloat 4s ease-in-out infinite alternate;
}
.bg-lights::before{
  width:260px;height:260px;
  top:-60px;left:-60px;
  background:rgba(255,160,0,.15);
}
.bg-lights::after{
  width:220px;height:220px;
  bottom:-40px;right:-40px;
  background:rgba(0,229,255,.12);
  animation-delay:.8s;
}
@keyframes lightFloat{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(20px,20px) scale(1.1)}
}

/* ==============================
   BUTTONS
============================== */
.btn-gold{
  width:100%;padding:16px 20px;
  background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3));
  color:#1A0A00;font-size:1.15rem;font-weight:900;
  border:none;border-radius:var(--radius);cursor:pointer;
  box-shadow:0 4px 24px rgba(255,160,0,.45),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .1s,box-shadow .1s;
  letter-spacing:.04em;
}
.btn-gold:active{transform:scale(.96);box-shadow:0 2px 8px rgba(255,160,0,.3)}
.btn-gold .btn-icon{font-size:1.2em}

.btn-silver{
  width:100%;padding:14px 20px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  color:var(--white);font-size:1rem;font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);cursor:pointer;
  transition:background .15s;
}
.btn-silver:active{background:rgba(255,255,255,.22)}

.btn-back{
  background:transparent;border:none;color:var(--blue);
  font-size:.95rem;font-weight:700;cursor:pointer;
  padding:4px 8px;white-space:nowrap;
}

.btn-round{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:2px solid rgba(255,255,255,.25);
  color:var(--white);font-size:2rem;font-weight:900;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .1s;
}
.btn-round:active{background:rgba(255,255,255,.3)}

.btn-red{
  width:100%;padding:16px 20px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:var(--white);font-size:1.1rem;font-weight:900;
  border:none;border-radius:var(--radius);cursor:pointer;
  box-shadow:0 4px 24px rgba(255,23,68,.55);
  letter-spacing:.04em;
}
.btn-red:active{transform:scale(.96)}

.btn-hide{
  flex:1;padding:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--white);font-size:1rem;font-weight:700;
  border-radius:var(--radius);cursor:pointer;
}

/* pulse animations */
.pulse-glow{animation:pulseGold 2s infinite}
@keyframes pulseGold{
  0%,100%{box-shadow:0 4px 24px rgba(255,160,0,.45)}
  50%{box-shadow:0 4px 50px rgba(255,200,0,.9),0 0 80px rgba(255,150,0,.35)}
}
.pulse-red{animation:pulseRed 1s infinite}
@keyframes pulseRed{
  0%,100%{box-shadow:0 4px 24px rgba(255,23,68,.55)}
  50%{box-shadow:0 4px 50px rgba(255,23,68,1),0 0 60px rgba(255,0,0,.4)}
}

/* ==============================
   PANEL HEADER
============================== */
.panel-header{
  width:100%;max-width:420px;
  display:flex;align-items:center;gap:12px;
  padding:16px 16px 4px;flex-shrink:0;
}
.panel-title{
  font-size:1.2rem;font-weight:900;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ==============================
   HOME
============================== */
#screen-home{justify-content:center}
.home-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:24px;padding:40px 28px;
  width:100%;max-width:400px;
}
.home-logo{text-align:center}
.logo-marquee{
  font-size:.8rem;letter-spacing:.4em;color:var(--gold);
  animation:marqueeFlash .6s infinite alternate;
}
@keyframes marqueeFlash{from{opacity:.5}to{opacity:1}}
.logo-main{
  font-size:3.8rem;font-weight:900;line-height:1;
  background:linear-gradient(160deg,#FFF8DC,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,215,0,.6));
  margin:.4rem 0;
}
.logo-joker{
  font-size:2.2rem;letter-spacing:.15em;
  background:linear-gradient(90deg,var(--red),#FF6B6B,var(--red));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-sub{font-size:.85rem;color:rgba(255,255,255,.5);letter-spacing:.1em}
.home-coin-display{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,215,0,.08);
  border:1px solid rgba(255,215,0,.2);
  border-radius:30px;padding:8px 20px;
  font-size:.9rem;font-weight:700;color:var(--gold);
}
.coin-label{letter-spacing:.05em}
.home-btns{display:flex;flex-direction:column;gap:14px;width:100%}

/* ==============================
   PLAYERS
============================== */
#screen-players{justify-content:flex-start}
.panel-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;width:100%;max-width:400px;
  padding-bottom:40px;
}
.panel-wrap>.btn-gold{max-width:340px;margin:0 20px}
.player-pick{
  display:flex;align-items:center;gap:28px;
  margin-top:8px;
}
.player-big{
  font-size:5.5rem;font-weight:900;
  background:linear-gradient(160deg,#FFF8DC,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,215,0,.5));
  min-width:110px;text-align:center;
}
.player-unit{font-size:1.6rem;font-weight:700;color:rgba(255,255,255,.6)}
.deck-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;padding:10px 20px;
  font-size:.9rem;color:rgba(255,255,255,.7);
  width:calc(100% - 40px);justify-content:center;
  flex-wrap:wrap;gap:6px;
}
.baba-rate{
  background:rgba(255,23,68,.2);
  border:1px solid rgba(255,23,68,.35);
  border-radius:20px;padding:2px 10px;
  color:var(--red);font-weight:700;font-size:.85rem;
}

/* ==============================
   HANDOVER
============================== */
#screen-handover{background:#05051A}
.handover-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:40px 28px;
  text-align:center;width:100%;max-width:380px;
}
.handover-num{
  font-size:2.4rem;font-weight:900;
  color:var(--blue);
  text-shadow:0 0 24px rgba(0,229,255,.7);
}
.handover-arrow{
  font-size:2rem;color:var(--gold);
  animation:arrowBob .8s ease-in-out infinite alternate;
}
@keyframes arrowBob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
.handover-msg{font-size:1.3rem;font-weight:700;color:rgba(255,255,255,.85)}
.handover-caution{
  font-size:.9rem;font-weight:700;
  color:var(--gold2);
  background:rgba(255,160,0,.1);
  border:1px solid rgba(255,160,0,.25);
  border-radius:10px;padding:8px 18px;
}
/* 長押しボタン */
.btn-hold{
  width:160px;height:160px;border-radius:50%;
  border:none;background:transparent;
  cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;
}
.hold-ring{
  position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 0 50px rgba(0,229,255,.5);
  animation:holdPulse 1.4s infinite;
}
@keyframes holdPulse{
  0%,100%{box-shadow:0 0 40px rgba(0,229,255,.4);transform:scale(1)}
  50%{box-shadow:0 0 70px rgba(0,229,255,.8),0 0 100px rgba(0,229,255,.3);transform:scale(1.05)}
}
.hold-text{
  position:relative;z-index:1;
  font-size:1.2rem;font-weight:900;
  color:var(--white);text-align:center;line-height:1.3;
  pointer-events:none;
}
.hold-sub{font-size:.8rem;color:rgba(255,255,255,.35)}
/* 押している間 */
.btn-hold.pressing .hold-ring{
  animation:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 0 80px rgba(255,200,0,.8);
  transform:scale(.92);
}

/* ==============================
   FLIP
============================== */
#screen-flip{background:#07071A}
.flip-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:24px;padding:40px 28px;
  width:100%;
}
.flip-label{
  font-size:1.3rem;font-weight:700;color:var(--gold);
  text-shadow:0 0 12px rgba(255,215,0,.5);
}
/* 3D card */
.card3d-stage{
  width:200px;height:280px;
  perspective:900px;cursor:pointer;
}
.card3d{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.card3d.flipped{transform:rotateY(180deg)}
.card3d-front,.card3d-back{
  position:absolute;inset:0;
  border-radius:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* 裏面 */
.card3d-front{
  background:linear-gradient(135deg,#1A1A4A,#2D1A5A);
  border:2px solid rgba(0,229,255,.3);
  box-shadow:0 8px 40px rgba(0,0,0,.6),inset 0 0 60px rgba(0,229,255,.04);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.card-face-back{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.card-question{
  font-size:5rem;font-weight:900;
  color:rgba(0,229,255,.25);
  text-shadow:0 0 30px rgba(0,229,255,.4);
}
.card-suit-tl{
  position:absolute;top:10px;left:12px;
  font-size:1.2rem;opacity:.4;
}
.card-suit-br{
  position:absolute;bottom:10px;right:12px;
  font-size:1.2rem;opacity:.4;transform:rotate(180deg);
}
/* 表面 */
.card3d-back{
  transform:rotateY(180deg);
  border-radius:18px;
  overflow:hidden;
}
.card-face-front-inner{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:16px;text-align:center;
  font-size:1rem;font-weight:700;
}
.card-face-front-inner.safe{
  background:linear-gradient(135deg,#0A2A0A,#0A3A1A);
  border:2px solid rgba(0,230,118,.3);
}
.card-face-front-inner.baba{
  background:linear-gradient(135deg,#2A0000,#3A0010);
  border:2px solid rgba(255,23,68,.4);
}
.flip-tap-hint{
  font-size:.95rem;color:rgba(255,255,255,.35);
  display:flex;align-items:center;gap:6px;
  animation:blinkOpacity 1.2s infinite;
}
@keyframes blinkOpacity{0%,100%{opacity:1}50%{opacity:.2}}
.tap-icon{font-size:1.2rem}

/* ==============================
   SLOT SCREEN
============================== */
.slot-screen{
  background:#020208;
}
.slot-outer{
  width:100%;max-width:400px;
  display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:20px 16px;
  position:relative;z-index:1;
}

/* LED frame */
.led-frame{
  position:absolute;inset:0;pointer-events:none;
  border-radius:20px;overflow:hidden;
}
.led-frame::before{
  content:'';position:absolute;inset:0;
  border:3px solid transparent;
  border-radius:20px;
  background:linear-gradient(#020208,#020208) padding-box,
             linear-gradient(90deg,var(--gold),var(--red),var(--blue),var(--gold)) border-box;
  animation:ledRotate 2s linear infinite;
}
@keyframes ledRotate{
  0%{background:linear-gradient(#020208,#020208) padding-box,
              linear-gradient(0deg,var(--gold),var(--red),var(--blue),var(--gold)) border-box}
  100%{background:linear-gradient(#020208,#020208) padding-box,
              linear-gradient(360deg,var(--gold),var(--red),var(--blue),var(--gold)) border-box}
}

/* タイトル */
.slot-title-row{
  width:100%;
  background:linear-gradient(90deg,var(--dark),#1A1A00,var(--dark));
  border:2px solid var(--gold);border-radius:10px;
  padding:8px 0;text-align:center;
  box-shadow:0 0 20px rgba(255,215,0,.2);
}
.slot-title-text{
  font-size:1.8rem;font-weight:900;letter-spacing:.35em;
  background:linear-gradient(90deg,var(--gold),#FFF,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,215,0,.8));
  animation:titleShimmer 1.5s infinite;
}
@keyframes titleShimmer{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,215,0,.8))}
  50%{filter:drop-shadow(0 0 22px rgba(255,215,0,1))}
}

/* スロット本体 */
.slot-machine-body{
  width:100%;
  background:linear-gradient(180deg,#1A1A00,#222200);
  border:3px solid var(--gold);
  border-radius:16px;
  padding:14px 14px 0;
  box-shadow:0 0 40px rgba(255,200,0,.15),inset 0 0 30px rgba(0,0,0,.6);
  overflow:hidden;
}
.slot-machine-inner{
  position:relative;
  background:#000;
  border-radius:12px;
  border:2px solid rgba(255,215,0,.4);
  overflow:hidden;
}
.reel-window-row{
  display:flex;align-items:stretch;height:120px;
}
.reel-window{
  flex:1;overflow:hidden;position:relative;
  background:#050505;
}
.reel-window::before,.reel-window::after{
  content:'';position:absolute;left:0;right:0;height:36px;z-index:3;pointer-events:none;
}
.reel-window::before{top:0;background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent)}
.reel-window::after{bottom:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.reel-sep{width:3px;background:rgba(255,215,0,.3);flex-shrink:0}
.reel-strip{
  display:flex;flex-direction:column;
  width:100%;
  will-change:transform;
}
.reel-cell{
  height:120px;width:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;font-weight:900;
  color:var(--gold);
  text-shadow:0 0 10px rgba(255,215,0,.5);
  flex-shrink:0;
}
.reel-cell.sym-baba{
  color:var(--red);
  text-shadow:0 0 16px rgba(255,23,68,.7);
}
.reel-cell.sym-bar{
  font-size:2rem;color:var(--silver);
  text-shadow:0 0 8px rgba(200,200,200,.5);
}
/* 中央ペイライン */
.pay-line{
  position:absolute;top:50%;transform:translateY(-50%);
  left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--red),var(--red),transparent);
  opacity:.7;z-index:4;pointer-events:none;
  box-shadow:0 0 8px var(--red);
}
/* STOPボタン */
.stop-btn-row{
  display:flex;gap:6px;
  padding:10px 6px;
  background:linear-gradient(180deg,#1A1500,#0A0A00);
}
.stop-btn{
  flex:1;padding:12px 0;
  border-radius:8px;
  font-size:.85rem;font-weight:900;letter-spacing:.12em;
  text-align:center;cursor:pointer;
  transition:transform .1s,filter .1s;
  border:none;color:var(--white);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);
}
.stop-btn:active{transform:translateY(2px);filter:brightness(.85)}
.stop-left{background:linear-gradient(180deg,#FF4444,#CC0000)}
.stop-center{background:linear-gradient(180deg,#FF8800,#CC5500)}
.stop-right{background:linear-gradient(180deg,#4488FF,#0044CC)}
.stop-btn.disabled{
  opacity:.4;filter:grayscale(.8);cursor:default;pointer-events:none;
}
.stop-btn.pressed{
  transform:translateY(3px);
  filter:brightness(.7);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}

/* バナー */
.slot-banner-area{
  min-height:52px;display:flex;align-items:center;justify-content:center;
}
.slot-banner{
  font-size:1.9rem;font-weight:900;letter-spacing:.18em;
  color:var(--gold);
  text-shadow:0 0 20px var(--gold),0 0 40px rgba(255,200,0,.5);
  text-align:center;min-height:1em;
}
.slot-banner.chance{
  animation:chancePop .45s infinite alternate;
  background:linear-gradient(90deg,var(--gold),#FFF,var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,200,0,.9));
}
@keyframes chancePop{
  from{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,200,0,.8))}
  to{transform:scale(1.09);filter:drop-shadow(0 0 24px rgba(255,200,0,1))}
}
.slot-banner.hazure{
  color:rgba(255,255,255,.5);font-size:1.4rem;
  animation:none;
}
.slot-banner.lose-banner{
  animation:loseBannerPulse .4s infinite alternate;
  color:var(--red);
  text-shadow:0 0 30px var(--red),0 0 60px rgba(255,0,0,.5);
  filter:none!important;-webkit-text-fill-color:var(--red)!important;
}
@keyframes loseBannerPulse{
  from{transform:scale(1)}to{transform:scale(1.07)}
}

/* メッセージ */
.slot-msg{
  font-size:1.1rem;font-weight:700;
  color:rgba(255,255,255,.6);
  min-height:28px;text-align:center;
  letter-spacing:.06em;
}

/* ==============================
   SAFE SCREEN
============================== */
.safe-screen{background:#030F03}
.safe-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,230,118,.08) 0%,transparent 65%);
}
.safe-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:40px 28px;
  width:100%;max-width:380px;
}
.safe-win-label{
  font-size:1rem;font-weight:900;letter-spacing:.5em;
  color:var(--green);opacity:.6;
}
.safe-icon{font-size:3.5rem}
.safe-result-row{
  display:flex;gap:10px;
  background:#0A1A0A;
  border:2px solid rgba(0,230,118,.3);
  border-radius:12px;padding:12px 20px;
  box-shadow:0 0 20px rgba(0,230,118,.15);
}
.safe-sym{
  font-size:2.2rem;font-weight:900;
  color:var(--green);
  text-shadow:0 0 12px rgba(0,230,118,.6);
  width:44px;text-align:center;
}
.safe-title{
  font-size:2.4rem;font-weight:900;
  color:var(--green);
  text-shadow:0 0 28px rgba(0,230,118,.7);
}
.safe-sub{
  font-size:1rem;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.05);
  border-radius:10px;padding:10px 20px;
  width:100%;text-align:center;
}
.safe-wrap>.btn-gold{max-width:100%}

/* ==============================
   LOSE SCREEN
============================== */
.lose-screen{background:#070000}
.lose-flash{
  position:fixed;inset:0;z-index:10;pointer-events:none;
  background:transparent;
}
.lose-flash.on{animation:redFlash .18s ease-out 3}
@keyframes redFlash{
  0%{background:rgba(255,0,0,.7)}
  100%{background:transparent}
}
.lose-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:24px 20px;
  width:100%;max-width:400px;
}
.lose-title-row{
  background:linear-gradient(90deg,var(--dark),rgba(255,0,0,.1),var(--dark));
  width:100%;text-align:center;padding:10px 0;
  border-top:2px solid rgba(255,23,68,.5);
  border-bottom:2px solid rgba(255,23,68,.5);
}
.lose-title{
  font-size:2rem;font-weight:900;letter-spacing:.15em;
  color:var(--red);
  text-shadow:0 0 30px var(--red),0 0 60px rgba(255,0,0,.4);
  animation:loseTitleAnim .7s infinite alternate;
}
@keyframes loseTitleAnim{
  from{text-shadow:0 0 20px var(--red);transform:scale(1)}
  to{text-shadow:0 0 40px var(--red),0 0 80px rgba(255,0,0,.5);transform:scale(1.03)}
}
.baba-card-area{
  position:relative;width:190px;
  animation:babaEntrance .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes babaEntrance{
  from{transform:scale(.25) rotate(-12deg);opacity:0}
  to{transform:scale(1) rotate(0deg);opacity:1}
}
.baba-img{
  width:100%;border-radius:16px;
  box-shadow:0 0 60px rgba(255,0,0,.5),0 16px 50px rgba(0,0,0,.85);
}
.holo-layer{
  position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,215,0,.08) 25%,
    rgba(0,229,255,.1) 50%,
    rgba(255,68,204,.08) 75%,
    rgba(255,255,255,0) 100%);
  animation:holoShift 3s linear infinite;
  pointer-events:none;
}
@keyframes holoShift{
  0%{background-position:0% 0%}
  100%{background-position:200% 200%}
}
.lose-desc{
  font-size:1rem;font-weight:700;color:var(--gold);
  background:rgba(255,200,0,.06);
  border:1px solid rgba(255,200,0,.2);
  border-radius:12px;padding:10px 20px;
  width:100%;text-align:center;
}
.lose-btns{display:flex;gap:12px;width:100%}
.lose-btns .btn-red{flex:2}
.lose-btns .btn-hide{flex:1}

/* ==============================
   REVEAL SCREEN
============================== */
.reveal-screen{background:radial-gradient(ellipse at 50% 30%,#2A0000 0%,#050000 70%)}
#confettiCanvas{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
}
.reveal-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:24px 24px;
  width:100%;max-width:420px;
}
.reveal-marquee{
  font-size:.75rem;font-weight:700;letter-spacing:.4em;
  color:var(--red);opacity:.7;
  white-space:nowrap;overflow:hidden;
  animation:marqueeScroll 4s linear infinite;
}
@keyframes marqueeScroll{
  0%{transform:translateX(60%)}
  100%{transform:translateX(-100%)}
}
.reveal-person{
  font-size:1.7rem;font-weight:900;color:var(--gold);
  text-shadow:0 0 20px rgba(255,215,0,.6);
}
.reveal-baba-img{
  width:160px;border-radius:16px;
  box-shadow:0 0 60px rgba(255,0,0,.45),0 12px 40px rgba(0,0,0,.8);
  animation:revealHolo 4s linear infinite;
}
@keyframes revealHolo{
  0%,100%{filter:saturate(1) brightness(1)}
  50%{filter:saturate(1.3) brightness(1.1) hue-rotate(15deg)}
}
.reveal-punishment{
  font-size:1.2rem;font-weight:900;color:var(--white);
  text-align:center;
  background:rgba(255,23,68,.15);
  border:2px solid rgba(255,23,68,.4);
  border-radius:12px;padding:12px 20px;width:100%;
}
.reveal-btns{
  display:flex;flex-direction:column;
  gap:12px;width:100%;
}

/* ==============================
   FINISH
============================== */
.finish-screen.active{justify-content:flex-start}
.finish-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:40px 24px;
  width:100%;max-width:420px;
}
.finish-title{
  font-size:1.9rem;font-weight:900;color:var(--gold);
  letter-spacing:.1em;
}
.finish-list{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  max-height:50vh;overflow-y:auto;
}
.finish-row{
  display:flex;align-items:center;gap:10px;
  font-size:.95rem;
}
.finish-row.loser{
  color:var(--red);font-weight:700;
  background:rgba(255,23,68,.08);
  border-radius:8px;padding:6px 10px;
}
.finish-row.safe{color:rgba(255,255,255,.65)}
.finish-btns{
  display:flex;flex-direction:column;gap:12px;width:100%;
}

/* ==============================
   DECK EDIT
============================== */
.deck-screen.active{justify-content:flex-start}
.deck-wrap{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  width:100%;height:100%;
  max-width:460px;
}
.deck-list{
  width:100%;flex:1;overflow-y:auto;
  padding:8px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.deck-card{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px 14px;
}
.deck-card.is-baba{
  background:rgba(255,23,68,.07);
  border-color:rgba(255,23,68,.25);
}
.dk-badge{font-size:1.4rem;flex-shrink:0;width:36px;text-align:center}
.dk-info{flex:1;min-width:0}
.dk-name{
  font-size:.95rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dk-desc{
  font-size:.8rem;color:rgba(255,255,255,.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dk-acts{display:flex;gap:8px;flex-shrink:0}
.dk-btn{
  background:rgba(255,255,255,.07);border:none;
  color:rgba(255,255,255,.65);
  border-radius:8px;padding:6px 10px;
  font-size:.8rem;cursor:pointer;font-family:var(--font);
}
.dk-btn.del{color:var(--red)}
.btn-add{max-width:340px;margin:12px 16px 32px}

/* ==============================
   MODAL
============================== */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.8);
  z-index:1000;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:#14142A;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:24px;
  width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:14px;
}
.modal-title{
  font-size:1.2rem;font-weight:700;color:var(--gold);text-align:center;
}
.modal-box label{
  display:flex;flex-direction:column;gap:6px;
  font-size:.85rem;color:rgba(255,255,255,.65);
}
.modal-box input[type=text],.modal-box select{
  padding:10px 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:var(--white);font-size:.95rem;font-family:var(--font);
}
.modal-box input[type=text]:focus,.modal-box select:focus{
  outline:none;border-color:var(--blue);
}
.modal-box select{background-color:#14142A;cursor:pointer}
.chk-label{flex-direction:row!important;align-items:center!important;gap:10px!important}
.chk-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}
.modal-btns{display:flex;gap:12px}
.modal-btns .btn-gold,.modal-btns .btn-silver{flex:1;padding:12px;font-size:.95rem}