/* ===== 卡牌恶魔轮盘 · Balatro 式 CRT 霓虹像素风 ===== */
:root{
  --bg1:#1a1a2e; --bg2:#16213e; --bg3:#0f0f23;
  --red:#ff3355; --cyan:#33ccff; --gold:#ffcc00; --green:#44ff88;
  --ink:#f5f0e6; --dark:#0a0a14; --purple:#bb66ff;
}
*{box-sizing:border-box; margin:0; padding:0; user-select:none;}
html,body{height:100%; overflow:hidden; background:var(--dark); color:var(--ink);
  font-family:"Courier New", ui-monospace, monospace;}

/* 迷幻流动背景 */
#bg,#bg2{position:fixed; inset:-20%; z-index:0; pointer-events:none;}
#bg{background:
  radial-gradient(ellipse 60% 50% at 30% 40%, #2a1a4e 0%, transparent 60%),
  radial-gradient(ellipse 50% 60% at 70% 60%, #101c3f 0%, transparent 60%),
  linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  animation:bgdrift 18s ease-in-out infinite alternate;}
#bg2{background:
  radial-gradient(ellipse 35% 30% at 60% 30%, rgba(255,51,85,.10) 0%, transparent 70%),
  radial-gradient(ellipse 40% 35% at 35% 70%, rgba(51,204,255,.08) 0%, transparent 70%);
  animation:bgdrift 13s ease-in-out infinite alternate-reverse;}
@keyframes bgdrift{from{transform:translate(-2%,-1%) scale(1.02);}to{transform:translate(2%,1.5%) scale(1.06);}}

/* CRT 层：扫描线 + 暗角 + 噪点闪 */
#crt{position:fixed; inset:0; z-index:99; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;}
#crt::after{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 90% 85% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  animation:crtflicker 4s steps(2) infinite;}
@keyframes crtflicker{0%,96%{opacity:1;}97%{opacity:.86;}98%{opacity:1;}99%{opacity:.92;}}

/* 命中红闪 */
#flash{position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0; transition:opacity .35s;}
#flash.red{background:radial-gradient(circle, rgba(255,51,85,.45), rgba(255,0,40,.25));}
#flash.cyan{background:radial-gradient(circle, rgba(51,204,255,.3), transparent 70%);}
#flash.green{background:radial-gradient(circle, rgba(68,255,136,.3), transparent 70%);}
#flash.gold{background:radial-gradient(circle, rgba(255,204,0,.3), transparent 70%);}
#flash.show{opacity:1; transition:opacity .05s;}

#app{position:relative; z-index:2; height:100vh; display:flex; flex-direction:column;}
#app.shake{animation:shake .45s;}
@keyframes shake{
  0%,100%{transform:translate(0,0);} 15%{transform:translate(-10px,6px) rotate(-.6deg);}
  30%{transform:translate(9px,-7px) rotate(.5deg);} 45%{transform:translate(-7px,-5px);}
  60%{transform:translate(6px,6px) rotate(.4deg);} 80%{transform:translate(-4px,3px);}}

/* 顶栏 */
#topbar{display:flex; align-items:center; gap:20px; padding:10px 22px;
  border-bottom:2px solid rgba(255,204,0,.25); background:rgba(10,10,20,.55);}
.logo{font-size:22px; font-weight:bold; letter-spacing:2px;
  text-shadow:2px 2px 0 #000, 0 0 12px rgba(255,204,0,.6);}
#round-info{font-size:15px; font-weight:bold;}
.counter{margin-left:auto; font-size:14px; color:var(--ink); opacity:.9;}

.neon-red{color:var(--red); text-shadow:0 0 8px var(--red), 2px 2px 0 #000;}
.neon-cyan{color:var(--cyan); text-shadow:0 0 8px var(--cyan), 2px 2px 0 #000;}
.neon-gold{color:var(--gold); text-shadow:0 0 10px var(--gold), 2px 2px 0 #000;}
.neon-green{color:var(--green); text-shadow:0 0 8px var(--green), 2px 2px 0 #000;}

/* 桌面布局 */
#table{flex:1; display:flex; flex-direction:column; min-height:0;}
.zone{padding:8px 26px;}
#dealer-zone{border-bottom:2px dashed rgba(255,51,85,.25); background:rgba(255,51,85,.04);}
#player-zone{border-top:2px dashed rgba(51,204,255,.25); background:rgba(51,204,255,.04);}
.side-head{display:flex; align-items:center; gap:14px;}
.face{font-size:52px; filter:drop-shadow(0 0 10px rgba(255,51,85,.7));
  animation:bob 3s ease-in-out infinite;}
#player-face{filter:drop-shadow(0 0 10px rgba(51,204,255,.7));}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}
.side-name{font-size:16px; font-weight:bold; letter-spacing:1px;}
.hp{font-size:22px; letter-spacing:3px; margin-top:2px;}
.hp .heart{color:var(--red); text-shadow:0 0 8px var(--red); display:inline-block;}
.hp .heart.off{color:#3a3a4a; text-shadow:none;}
.hp .heart.pop{animation:heartpop .5s;}
@keyframes heartpop{40%{transform:scale(1.8) rotate(15deg);}}
.badges{display:flex; gap:6px; margin-left:8px;}
.badge{font-size:13px; padding:2px 8px; border:1px solid var(--gold); color:var(--gold);
  border-radius:10px; background:rgba(0,0,0,.5); animation:glowpulse 1s infinite alternate;}
@keyframes glowpulse{from{box-shadow:0 0 2px var(--gold);}to{box-shadow:0 0 12px var(--gold);}}

/* 道具牌 */
.items-row{display:flex; gap:8px; margin-top:8px; min-height:74px; flex-wrap:wrap;}
.item-card{width:88px; height:68px; border-radius:8px; padding:5px 6px; position:relative;
  background:linear-gradient(165deg, #22223a, #12121f);
  border:2px solid #555; box-shadow:0 3px 0 #000, inset 0 0 12px rgba(0,0,0,.6);
  font-size:11px; line-height:1.25; transition:transform .15s, box-shadow .15s;}
.item-card .ic{font-size:20px; position:absolute; top:4px; left:6px;}
.item-card .nm{font-weight:bold; text-align:right; display:block; text-shadow:1px 1px 0 #000;}
.item-card .ds{position:absolute; bottom:4px; left:6px; right:6px; opacity:.85; font-size:10px;}
.item-card.info{border-color:var(--cyan); box-shadow:0 3px 0 #000, 0 0 8px rgba(51,204,255,.35);}
.item-card.viol{border-color:var(--red); box-shadow:0 3px 0 #000, 0 0 8px rgba(255,51,85,.35);}
.item-card.heal{border-color:var(--green); box-shadow:0 3px 0 #000, 0 0 8px rgba(68,255,136,.35);}
.item-card.special{border-color:var(--purple); box-shadow:0 3px 0 #000, 0 0 8px rgba(187,102,255,.4);}
.item-card.usable{cursor:pointer; animation:cardglow 1.2s infinite alternate;}
.item-card.usable:hover{transform:translateY(-8px) rotate(-2deg) scale(1.08); z-index:5;}
@keyframes cardglow{from{filter:brightness(1);}to{filter:brightness(1.35);}}
.item-card.dim{opacity:.45;}
.item-card.bye{animation:bye .4s forwards;}
@keyframes bye{to{transform:translateY(-30px) rotate(8deg); opacity:0;}}
.items-empty{font-size:12px; opacity:.4; align-self:center;}

/* 中央 */
#center-zone{flex:1; min-height:0; display:flex;}
#board{flex:1; display:flex; align-items:center; justify-content:center; gap:36px; padding:6px;}
#deck-area{position:relative; text-align:center;}
.deck{width:110px; height:150px; margin:0 auto; position:relative;}
.deck .shell-back{position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(150deg, #3a2a1a, #1c1410 60%);
  border:2px solid var(--gold); box-shadow:0 4px 0 #000, 0 0 14px rgba(255,204,0,.25);}
.deck .shell-back::after{content:"🔩"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:34px; opacity:.8;}
.deck .cnt{position:absolute; right:-12px; top:-12px; background:var(--red); color:#fff;
  border-radius:50%; width:30px; height:30px; line-height:30px; font-weight:bold;
  border:2px solid #fff; box-shadow:0 0 10px var(--red); z-index:3;}
.deck-label{margin-top:8px; font-size:13px; font-weight:bold;}
.deck.empty{opacity:.25;}
.top-known{position:absolute; left:50%; transform:translateX(-50%); top:-34px; z-index:4;
  font-size:13px; font-weight:bold; padding:2px 12px; border-radius:12px; white-space:nowrap;
  background:rgba(0,0,0,.7); animation:glowpulse 1s infinite alternate;}
.top-known.live{color:var(--red); border:1px solid var(--red);}
.top-known.blank{color:var(--cyan); border:1px solid var(--cyan);}
.saw-badge{margin-top:6px; font-size:12px; color:var(--red); border:1px solid var(--red);
  border-radius:10px; padding:2px 8px; display:inline-block; animation:glowpulse .8s infinite alternate;}

/* 抽牌槽 */
#draw-slot{width:130px; height:170px; display:flex; align-items:center; justify-content:center;}
.shell-card{width:110px; height:150px; border-radius:10px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:3px solid; font-weight:bold; animation:drawpop .45s cubic-bezier(.2,1.6,.4,1);}
.shell-card .big{font-size:44px;}
.shell-card.live{border-color:var(--red); background:linear-gradient(160deg,#4a0d1c,#1a050c);
  color:var(--red); box-shadow:0 0 24px rgba(255,51,85,.7);}
.shell-card.blank{border-color:var(--cyan); background:linear-gradient(160deg,#0d2a3a,#050e14);
  color:var(--cyan); box-shadow:0 0 24px rgba(51,204,255,.55);}
@keyframes drawpop{0%{transform:translateY(-90px) rotate(-14deg) scale(.4); opacity:0;}
  60%{transform:translateY(6px) rotate(3deg) scale(1.12);} 100%{transform:none; opacity:1;}}
.shell-card.out{animation:bye .35s forwards;}

/* 日志 */
#log-panel{width:300px; height:190px; background:rgba(5,5,12,.7); border:1px solid #333;
  border-radius:8px; padding:8px 10px; overflow:hidden; box-shadow:inset 0 0 20px #000;}
#log{height:100%; overflow-y:auto; font-size:12px; line-height:1.6;}
#log::-webkit-scrollbar{width:4px;} #log::-webkit-scrollbar-thumb{background:#444;}
#log .l-sys{color:#999;} #log .l-you{color:var(--cyan);} #log .l-dealer{color:var(--red);}
#log .l-good{color:var(--green);} #log .l-gold{color:var(--gold);}

/* 行动按钮 */
#actions{margin-left:auto; display:flex; gap:10px;}
.btn{font-family:inherit; font-weight:bold; color:var(--ink); cursor:pointer;
  background:linear-gradient(180deg,#2c2c44,#14141f); border:2px solid #666; border-radius:8px;
  padding:8px 16px; font-size:14px; text-shadow:1px 1px 0 #000;
  box-shadow:0 4px 0 #000; transition:transform .1s, filter .15s;}
.btn:hover:not(:disabled){filter:brightness(1.3); transform:translateY(-2px);}
.btn:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 #000;}
.btn:disabled{opacity:.35; cursor:not-allowed;}
.btn small{font-size:10px; opacity:.8; font-weight:normal;}
.btn-cyan{border-color:var(--cyan);} .btn-red{border-color:var(--red);}
.btn-gold{border-color:var(--gold); color:var(--gold);}
.btn.big{font-size:20px; padding:14px 44px; margin-top:18px;}
.hint{font-size:12px; color:var(--gold); margin-top:6px; min-height:16px; opacity:.9;}

/* 覆盖层 */
.overlay{position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,15,.82); backdrop-filter:blur(3px);}
.hidden{display:none !important;}
.panel{background:linear-gradient(170deg,#1e1e32,#0e0e1a); border:3px solid var(--gold);
  border-radius:14px; padding:34px 48px; text-align:center;
  box-shadow:0 0 40px rgba(255,204,0,.35), inset 0 0 30px rgba(0,0,0,.7);
  animation:panelin .4s cubic-bezier(.2,1.5,.4,1);}
@keyframes panelin{from{transform:scale(.7) translateY(40px); opacity:0;}}
.title-glitch{font-size:40px; letter-spacing:6px; color:var(--ink);
  text-shadow:3px 0 0 var(--red), -3px 0 0 var(--cyan), 0 0 20px rgba(255,204,0,.5);
  animation:glitch 2.5s infinite;}
@keyframes glitch{0%,92%,100%{transform:none;} 93%{transform:translate(2px,-1px) skewX(2deg);}
  95%{transform:translate(-2px,1px);} 97%{transform:translate(1px,0) skewX(-2deg);}}
.subtitle{margin:10px 0 22px; font-size:14px; letter-spacing:3px;}
.menu-row{display:flex; align-items:center; gap:14px; margin:12px 0; justify-content:center;}
.menu-label{font-size:14px; color:var(--gold); width:44px; text-align:right;}
.seg{display:flex; gap:6px;}
.seg button{font-family:inherit; padding:7px 14px; font-size:13px; cursor:pointer;
  background:#14141f; color:#888; border:2px solid #444; border-radius:6px;}
.seg button.on{color:var(--gold); border-color:var(--gold); background:#241f08;
  box-shadow:0 0 10px rgba(255,204,0,.4);}
.menu-tip{margin-top:16px; font-size:11px; opacity:.55; max-width:420px; line-height:1.6;}
.modal-list{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;}
.modal-list .item-card{cursor:pointer; width:100px; height:76px;}
.modal-list .item-card:hover{transform:translateY(-6px) scale(1.06);}

/* 中央提示 toast */
#toast{position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) scale(.7); z-index:98;
  pointer-events:none; max-width:70vw; text-align:center; font-size:20px; font-weight:bold;
  padding:14px 26px; border-radius:10px; border:2px solid var(--gold); color:var(--ink);
  background:rgba(8,8,18,.92); box-shadow:0 0 24px rgba(255,204,0,.4), inset 0 0 18px #000;
  opacity:0; transition:opacity .18s, transform .18s;}
#toast.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
#toast small{display:block; font-size:12px; font-weight:normal; opacity:.75; margin-top:6px;}

/* 粒子与飘字 */
.particle{position:fixed; z-index:96; pointer-events:none; border-radius:2px;}
.float-txt{position:fixed; z-index:97; pointer-events:none; font-size:30px; font-weight:bold;
  text-shadow:2px 2px 0 #000; animation:floatup 1.1s forwards;}
@keyframes floatup{0%{transform:translateY(0) scale(.6); opacity:0;}
  20%{opacity:1; transform:translateY(-10px) scale(1.25);}
  100%{transform:translateY(-70px) scale(1); opacity:0;}}

@media (max-width:900px){ #log-panel{display:none;} }