:root { --ink:#080a09; --panel:#111511; --bone:#e4e0d4; --muted:#8a9289; --blood:#db2d27; --dark-blood:#751d1e; --toxic:#b9e66a; --line:rgba(224,225,205,.18); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--bone); background:radial-gradient(ellipse at 50% 42%, #242a1c 0%, #10130e 37%, #060706 78%); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
body::before { content:""; pointer-events:none; position:fixed; inset:0; opacity:.18; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px); mix-blend-mode:overlay; }
button { font:inherit; cursor:pointer; }
.game-shell { width:min(100% - 32px, 1040px); margin:0 auto; padding:40px 0 46px; }
.masthead { text-align:center; border-bottom:1px solid var(--line); padding-bottom:22px; }
.eyebrow { margin:0 0 8px; color:var(--toxic); font-size:.65rem; letter-spacing:.16em; }
h1,h2 { font-family:STSong,"Songti SC",serif; }
h1 { margin:0; font-size:clamp(2.4rem,7vw,5rem); letter-spacing:.18em; text-indent:.18em; line-height:1; text-shadow:0 0 24px rgba(185,230,106,.28); }
.subtitle { margin:13px 0 0; color:var(--muted); font-size:.78rem; }
.status-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:17px 0; font-size:.76rem; }
.turn-readout { color:var(--toxic); display:flex; align-items:center; gap:9px; }
.indicator { width:8px; height:8px; border-radius:50%; background:var(--toxic); box-shadow:0 0 14px var(--toxic); animation:pulse 1.5s ease-in-out infinite; }
.round-readout { color:var(--muted); }.round-readout strong { color:var(--bone); font-size:1.05rem; }
.stage { min-height:312px; display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%),rgba(8,10,9,.56); }
.stage::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px #000; }
.player-card { z-index:1; padding:22px; text-align:center; transition:opacity .25s,transform .25s; }.player-card:not(.current) { opacity:.52; }.player-card.current { transform:translateY(-3px); }
.player-kicker,.vital-label { margin:0; color:var(--muted); font-size:.62rem; letter-spacing:.15em; }.player-card h2 { font-size:1.4rem; margin:7px 0 12px; }.health { min-height:27px; color:var(--blood); font-size:1.28rem; letter-spacing:.12em; text-shadow:0 0 12px rgba(219,45,39,.7); }.vital-label { margin-top:2px; }
.table { min-height:310px; display:grid; place-items:center; position:relative; overflow:hidden; }.dealer-portrait { position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(8,10,9,.94),transparent 27%,transparent 73%,rgba(8,10,9,.94)),linear-gradient(0deg,rgba(8,10,9,.9),transparent 42%),url("public/demon-dealer.png") center 25%/cover no-repeat; opacity:.58; filter:contrast(1.08) saturate(.8); transition:opacity .35s,filter .35s; }.stage:has(.player-one.current) .dealer-portrait { opacity:.68; filter:contrast(1.16) saturate(.95) drop-shadow(-8px 0 12px rgba(185,230,106,.12)); }.sigil { z-index:1; position:absolute; width:202px; aspect-ratio:1; border:1px solid rgba(185,230,106,.18); border-radius:50%; box-shadow:0 0 42px rgba(185,230,106,.07),inset 0 0 32px rgba(185,230,106,.06); display:grid; place-items:center; transform:rotate(45deg); }.sigil::before,.sigil::after { content:""; position:absolute; inset:17px; border:1px solid rgba(185,230,106,.14); border-radius:50%; }.sigil::after { inset:58px; border-color:rgba(219,45,39,.42); }.sigil span { color:var(--toxic); transform:rotate(-45deg); font-size:2rem; }
.cylinder { width:136px; aspect-ratio:1; border-radius:50%; position:relative; z-index:2; border:11px solid #33382e; background:#151811; box-shadow:0 0 0 4px #060706,0 11px 19px #000,inset 0 0 20px #000; animation:rotate-in .8s ease-out; }.chamber { width:27px; aspect-ratio:1; border-radius:50%; position:absolute; background:#070907; border:3px solid #59604d; box-shadow:inset 0 0 8px #000; }.c1{top:6px;left:48px}.c2{top:20px;right:14px}.c3{top:52px;right:4px}.c4{bottom:16px;right:19px}.c5{bottom:5px;left:49px}.c6{bottom:16px;left:18px}.c7{top:52px;left:4px}.c8{top:20px;left:14px}.c9{top:36px;left:30px;opacity:.7}.c10{top:36px;right:30px;opacity:.7}.hub { position:absolute; inset:43px; border-radius:50%; background:#555b48; border:4px solid #11140f; box-shadow:inset 0 0 6px #000; }
.gun { width:190px; height:22px; position:absolute; z-index:3; right:-19px; top:72%; transform:rotate(-17deg); background:linear-gradient(#777b70,#292c27 55%,#111); border-radius:0 4px 4px 0; box-shadow:0 5px 7px #000; }.gun::after { content:""; position:absolute; height:14px; width:54px; left:-48px; top:4px; border-radius:5px 0 0 5px; background:#20231f; }.gun i { position:absolute; width:44px; height:13px; left:39px; top:17px; background:#1b1e1a; transform:skew(-28deg); }.gun b { position:absolute; width:37px; height:8px; left:72px; top:-7px; background:#10120f; }
.unknown { z-index:2; align-self:end; margin:0 0 23px; color:var(--muted); font-size:.63rem; letter-spacing:.1em; }
.control-deck { margin-top:17px; padding:18px; border:1px solid var(--line); background:rgba(14,17,13,.84); text-align:center; }.action-prompt { margin:0 0 12px; color:var(--muted); font-size:.7rem; letter-spacing:.12em; }.actions { display:flex; gap:12px; justify-content:center; }.action { min-width:min(41vw,235px); border:1px solid; padding:14px 16px; color:var(--bone); font-size:.82rem; letter-spacing:.05em; transition:transform .18s,background .18s,opacity .18s; }.action:hover:not(:disabled),.action:focus-visible { transform:translateY(-2px); outline:2px solid var(--bone); outline-offset:3px; }.action:disabled { cursor:not-allowed; opacity:.35; }.action span { color:var(--toxic); font-size:1.1rem; }.danger { border-color:var(--blood); background:linear-gradient(120deg,#481c1a,#230e0e); }.danger:hover:not(:disabled) { background:#6a201c; }.hollow { border-color:#68705f; background:#151914; }.hollow:hover:not(:disabled) { background:#2b3325; }.result-message { min-height:20px; margin:13px 0 0; color:var(--toxic); font-size:.72rem; }
.intel-log { margin-top:17px; padding:17px 19px; border:1px solid var(--line); background:rgba(10,12,10,.8); }.intel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }.intel-heading h2 { margin:0; font-size:1rem; }.intel-heading button { color:var(--toxic); border:1px solid rgba(185,230,106,.5); background:transparent; padding:7px 11px; font-size:.68rem; }.intel-heading button:hover,.intel-heading button:focus-visible { background:rgba(185,230,106,.12); }.ammo-counts { margin:13px 0 9px; display:flex; gap:18px; color:var(--muted); font-size:.7rem; }.ammo-counts em { font-style:normal; color:var(--bone); } #log { min-height:47px; margin:0; padding-left:20px; color:#aab1a3; font-size:.7rem; line-height:1.8; } #log li:first-child { color:var(--bone); }.live-fire { animation:flash .34s ease-out; }
@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 4px var(--toxic); } } @keyframes rotate-in { from { transform:rotate(-90deg); opacity:0; } } @keyframes flash { 50% { background:rgba(126,18,15,.92); box-shadow:inset 0 0 90px rgba(219,45,39,.95); } }
@media (max-width:700px) { .game-shell { width:min(100% - 20px,600px); padding-top:24px; }.stage { min-height:0; grid-template-columns:1fr 1fr; }.table { order:-1; min-height:218px; grid-column:1 / -1; }.player-card { padding:15px 8px 20px; }.gun { right:-40px; }.actions { gap:8px; }.action { min-width:0; flex:1; padding:13px 6px; font-size:.72rem; }.ammo-counts { gap:8px; flex-wrap:wrap; } }
@media (max-width:380px) { h1 { font-size:2.25rem; }.subtitle { font-size:.66rem; }.stage { grid-template-columns:1fr 1fr; }.player-card h2 { font-size:1.05rem; }.health { font-size:1rem; }.actions { flex-direction:column; }.action { width:100%; }.status-bar { font-size:.65rem; } }

/* 两位赌徒：CSS 小人会随回合亮起。 */
.figure { width:82px; height:116px; margin:0 auto 8px; position:relative; opacity:.48; filter:drop-shadow(0 6px 8px #000); transition:filter .25s,opacity .25s,transform .25s; }
.figure-head { position:absolute; top:4px; left:28px; width:27px; height:31px; border-radius:46% 46% 42% 42%; background:linear-gradient(105deg,#d7d5c8,#72766b 58%,#252823); border:2px solid #0b0d0b; box-shadow:inset -6px -3px 8px rgba(0,0,0,.52); }
.figure-head::before { content:""; position:absolute; top:12px; left:5px; width:4px; height:4px; border-radius:50%; background:var(--toxic); box-shadow:12px 0 0 var(--toxic),0 0 7px var(--toxic),12px 0 7px var(--toxic); }
.figure-body { position:absolute; top:31px; left:20px; width:43px; height:58px; border-radius:10px 10px 6px 6px; background:linear-gradient(90deg,#121611,#3c4338 46%,#151815); border:2px solid #070907; box-shadow:inset 7px 0 9px rgba(255,255,255,.08); }
.figure-body::before,.figure-body::after { content:""; position:absolute; top:8px; width:11px; height:51px; border-radius:8px; background:#242a23; border:2px solid #090b09; transform-origin:top center; }.figure-body::before { left:-13px; transform:rotate(18deg); }.figure-body::after { right:-13px; transform:rotate(-18deg); }
.figure::before,.figure::after { content:""; position:absolute; z-index:-1; top:83px; width:16px; height:33px; border-radius:3px 3px 10px 10px; background:#1a1e19; border:2px solid #080a08; }.figure::before { left:20px; transform:rotate(3deg); }.figure::after { right:20px; transform:rotate(-3deg); }
.figure-two { transform:scaleX(-1); }.figure-two .figure-head,.figure-two .figure-body { transform:scaleX(-1); }.player-card.current .figure { opacity:1; transform:translateY(-4px); filter:drop-shadow(0 0 10px rgba(185,230,106,.78)) drop-shadow(0 7px 8px #000); }.player-card.current .figure-two { transform:scaleX(-1) translateY(-4px); }
@media (max-width:700px) { .figure { width:63px; height:90px; transform:scale(.77); margin:-9px auto -3px; }.player-card.current .figure { transform:scale(.77) translateY(-4px); }.player-card.current .figure-two { transform:scaleX(-1) scale(.77) translateY(-4px); } }

/* 写实赌徒肖像 */
.figure { display:none; }
.player-portrait { width:100px; height:124px; margin:0 auto 8px; border:1px solid rgba(228,224,212,.25); background-color:#090b09; background-position:center 18%; background-size:cover; box-shadow:inset 0 0 28px rgba(0,0,0,.74),0 7px 14px rgba(0,0,0,.55); opacity:.62; filter:saturate(.65) brightness(.72); transition:opacity .25s,filter .25s,transform .25s,box-shadow .25s; }.portrait-one { background-image:linear-gradient(0deg,rgba(8,10,9,.96),transparent 58%),url("public/player-one.png"); }.portrait-two { background-image:linear-gradient(0deg,rgba(8,10,9,.96),transparent 58%),url("public/player-two.png"); }.player-card.current .player-portrait { opacity:1; transform:translateY(-4px); filter:saturate(.9) brightness(1.02); box-shadow:inset 0 0 20px rgba(185,230,106,.19),0 0 15px rgba(185,230,106,.62),0 8px 14px rgba(0,0,0,.68); }
@media (max-width:700px) { .player-portrait { width:76px; height:95px; margin:0 auto 5px; }.player-card.current .player-portrait { transform:translateY(-3px); } }

/* 写实泵动霰弹枪道具 */
.gun { width:270px; height:122px; right:-47px; top:61%; background:url("public/benelli-supernova.png") center/contain no-repeat; border-radius:0; box-shadow:none; filter:drop-shadow(0 7px 7px rgba(0,0,0,.78)); }
.gun::after,.gun i,.gun b { display:none; }
@media (max-width:700px) { .gun { width:208px; height:94px; right:-52px; top:61%; } }

/* 随机道具 */
.restraint { min-height:15px; margin:5px 0 0; color:#e89155; font-size:.58rem; letter-spacing:.04em; }.item-rack { min-height:30px; max-width:165px; display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:7px auto 0; }.item-chip { display:inline-flex; align-items:center; border:1px solid rgba(228,224,212,.28); color:#d7dbd0; background:rgba(8,10,9,.84); padding:3px 5px 3px 3px; font-size:.57rem; line-height:1; letter-spacing:-.03em; transition:transform .16s,background .16s,opacity .16s; }.item-icon { width:22px; height:22px; margin-right:4px; object-fit:cover; border:1px solid rgba(228,224,212,.22); background:#0a0c0a; }.item-chip:hover:not(:disabled),.item-chip:focus-visible { transform:translateY(-2px); background:#283020; outline:1px solid var(--toxic); outline-offset:2px; }.item-chip:disabled { opacity:.35; cursor:not-allowed; }.item-adrenaline { border-color:rgba(219,45,39,.48); }.item-shell-case { border-color:rgba(185,230,106,.48); }.item-handcuffs { border-color:rgba(232,145,85,.52); }.item-cigarette { border-color:rgba(170,177,163,.45); }.shell-hint { min-height:16px; margin:7px 0 0; color:#f0cf70; font-size:.66rem; letter-spacing:.06em; }
@media (max-width:700px) { .item-rack { max-width:132px; gap:3px; }.item-chip { padding:3px 4px; font-size:.5rem; } }

/* 抬枪、后坐与枪口效果 */
.gun { transform-origin:80% 68%; }
.gun::before { content:""; position:absolute; z-index:4; left:-15px; top:43px; width:42px; height:34px; opacity:0; pointer-events:none; clip-path:polygon(100% 43%,52% 32%,34% 0,23% 32%,0 43%,23% 56%,36% 100%,52% 62%); transform:scale(.2); }
.stage.live-fire { animation:stage-live-hit .42s ease-out; }.stage.blank-fire { animation:stage-blank-hit .34s ease-out; }.live-fire .gun { animation:gun-live-shot .42s cubic-bezier(.18,.85,.26,1); }.blank-fire .gun { animation:gun-blank-shot .34s ease-out; }.live-fire .gun::before { background:radial-gradient(circle,#fff9be 0 13%,#ffbd43 18%,#e4461d 48%,transparent 70%); filter:drop-shadow(0 0 16px #ff572d); animation:muzzle-live .18s steps(2,end); }.blank-fire .gun::before { background:radial-gradient(circle,#dfffa3 0 10%,#8bb860 25%,transparent 70%); filter:drop-shadow(0 0 10px #b9e66a); animation:muzzle-blank .14s steps(2,end); }
@keyframes gun-live-shot { 0% { transform:rotate(-17deg); } 22% { transform:rotate(-31deg) translate(5px,-18px); } 38% { transform:rotate(-42deg) translate(15px,-21px); } 58% { transform:rotate(-14deg) translate(-9px,6px); } 100% { transform:rotate(-17deg); } }
@keyframes gun-blank-shot { 0% { transform:rotate(-17deg); } 28% { transform:rotate(-28deg) translate(3px,-12px); } 52% { transform:rotate(-20deg) translate(-4px,3px); } 100% { transform:rotate(-17deg); } }
@keyframes muzzle-live { 0%,100% { opacity:0; transform:scale(.2); } 28% { opacity:1; transform:scale(1.35); } 60% { opacity:.78; transform:scale(.82); } }
@keyframes muzzle-blank { 0%,100% { opacity:0; transform:scale(.15); } 35% { opacity:.8; transform:scale(.62); } }
@keyframes stage-live-hit { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); box-shadow:inset 0 0 90px rgba(245,54,27,.86); } 48% { transform:translateX(6px); box-shadow:inset 0 0 62px rgba(245,54,27,.45); } 70% { transform:translateX(-2px); } }
@keyframes stage-blank-hit { 0%,100% { transform:translateX(0); } 35% { transform:translateX(-2px); box-shadow:inset 0 0 45px rgba(185,230,106,.26); } 65% { transform:translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .stage.live-fire,.stage.blank-fire,.live-fire .gun,.blank-fire .gun,.live-fire .gun::before,.blank-fire .gun::before { animation:none; }.live-fire .gun::before { opacity:.74; transform:scale(.6); }.blank-fire .gun::before { opacity:.45; transform:scale(.38); } }

/* 开枪时同步旋转弹巢 */
.live-fire .cylinder { animation:cylinder-live-spin .42s cubic-bezier(.18,.85,.26,1); box-shadow:0 0 0 4px #060706,0 0 20px rgba(219,45,39,.82),0 11px 19px #000,inset 0 0 20px #000; }.blank-fire .cylinder { animation:cylinder-blank-spin .34s ease-out; box-shadow:0 0 0 4px #060706,0 0 15px rgba(185,230,106,.56),0 11px 19px #000,inset 0 0 20px #000; }
@keyframes cylinder-live-spin { 0% { transform:rotate(0); } 22% { transform:rotate(70deg) scale(1.04); } 62% { transform:rotate(300deg) scale(.98); } 100% { transform:rotate(360deg); } }
@keyframes cylinder-blank-spin { 0% { transform:rotate(0); } 45% { transform:rotate(150deg) scale(1.025); } 100% { transform:rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .live-fire .cylinder,.blank-fire .cylinder { animation:none; } }

/* 明确区分实弹与空包弹 */
.shot-callout { position:absolute; z-index:8; top:20px; left:50%; margin:0; transform:translateX(-50%) scale(.6); opacity:0; pointer-events:none; font-family:STSong,"Songti SC",serif; font-size:1.35rem; letter-spacing:.28em; text-indent:.28em; text-shadow:0 2px 10px #000; }.live-callout { color:#ff6851; animation:callout-live .48s ease-out; }.blank-callout { color:#d7ff8e; animation:callout-blank .52s ease-out; }.blank-fire .gun { filter:drop-shadow(0 0 12px rgba(185,230,106,.78)) drop-shadow(0 7px 7px rgba(0,0,0,.78)); }.blank-fire .gun::before { width:64px; height:52px; left:-25px; top:33px; background:radial-gradient(circle,#f1ffd2 0 7%,#b9e66a 17%,rgba(92,167,83,.65) 35%,transparent 69%); animation:muzzle-blank-strong .3s ease-out; }.blank-fire .cylinder { animation:cylinder-blank-spin-strong .48s cubic-bezier(.18,.85,.26,1); box-shadow:0 0 0 4px #060706,0 0 28px rgba(185,230,106,.9),0 11px 19px #000,inset 0 0 20px #000; }
@keyframes callout-live { 0%{opacity:0;transform:translateX(-50%) scale(.55)} 24%{opacity:1;transform:translateX(-50%) scale(1.15)} 100%{opacity:0;transform:translateX(-50%) scale(1)} } @keyframes callout-blank { 0%{opacity:0;transform:translateX(-50%) scale(.45);filter:blur(3px)} 25%{opacity:1;transform:translateX(-50%) scale(1.22);filter:blur(0)} 100%{opacity:0;transform:translateX(-50%) scale(1);filter:blur(1px)} } @keyframes muzzle-blank-strong { 0%{opacity:0;transform:scale(.1)} 25%{opacity:1;transform:scale(1.45)} 65%{opacity:.75;transform:scale(.9)} 100%{opacity:0;transform:scale(1.7)} } @keyframes cylinder-blank-spin-strong { 0%{transform:rotate(0) scale(1)} 48%{transform:rotate(220deg) scale(1.09)} 100%{transform:rotate(300deg) scale(1)} }
@media (prefers-reduced-motion: reduce) { .live-callout,.blank-callout { animation:none; opacity:1; transform:translateX(-50%); }.blank-fire .gun::before { animation:none; opacity:.75; transform:scale(.8); }.blank-fire .cylinder { animation:none; } }