:root{--ink:#fff2cf;--range-accent:#ffe58d;--range-accent-fill:#f1cf77;--muted:#cbbd9e;--paper:#f3e2bd;--paper-ink:#392619;--gold:#e0b85e;--red:#a84334;--panel:#17130fe8;font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif;color:var(--ink);background:#100d0b}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{overflow-x:hidden;background:#100d0b}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}[hidden]{display:none!important}.app-shell{min-height:100dvh}.dust{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{position:sticky;top:0;z-index:50;min-height:62px;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:linear-gradient(#38271f,#1d1511);border-bottom:2px solid #c0944e;box-shadow:0 5px 18px #0009}.icon-btn{width:44px;min-height:44px;display:grid;place-items:center;border:1px solid #d3ad6855;border-radius:8px;background:#fff1}.icon-btn svg{width:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.brand{text-align:center;line-height:1}.brand-kicker{display:block;margin-bottom:2px;color:#d7c8a7;font-size:9px;letter-spacing:.25em}.brand-main{font:900 26px/1 Georgia,serif;letter-spacing:.06em;text-shadow:2px 2px #702b22}.brand-main span{color:#ef7661}.round-badge{text-align:center}.round-badge span{display:block;color:var(--muted);font-size:9px}.round-badge strong{font:700 21px Georgia,serif}
.game-board{min-height:calc(100dvh - 62px);max-width:1500px;margin:auto;padding:10px 10px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto auto;gap:10px;background:linear-gradient(#0b120db5,#0b120d8c),url('./assets/saloon-table-v1.png') center 42%/cover fixed}.table-heading{display:none}
.opponents{display:flex;gap:8px;overflow-x:auto;padding:4px 3px 10px;scrollbar-width:none;scroll-snap-type:x proximity}.opponents::-webkit-scrollbar{display:none}.opponent{position:relative;flex:0 0 142px;min-width:0;min-height:116px;overflow:hidden;scroll-snap-align:center;display:grid;grid-template-columns:50px minmax(0,1fr);align-items:stretch;padding:0;border:2px solid #8d7049;border-radius:9px;background:#ead7af;color:var(--paper-ink);text-align:left;box-shadow:0 5px 16px #0008;transition:.18s}.opponent .portrait{width:50px;min-height:100%;border-right:1px solid #8f744e}.opponent-body{min-width:0;display:flex;flex-direction:column;gap:3px;padding:7px 6px}.opponent-name,.character-name{display:block;overflow-wrap:anywhere;line-height:1.25}.opponent-name{font-size:12px;font-weight:900}.character-name{color:#6d5138;font-size:10px}.opponent-stats{display:flex;gap:6px;align-items:center;font-size:10px}.health{color:#a72f29}.cards-count{display:inline-flex;align-items:center;gap:3px}.mini-card{width:8px;height:11px;border:1px solid;border-radius:1px}.relation-chip,.distance-chip{width:max-content;max-width:100%;border-radius:999px;font-size:9px;line-height:1.4;white-space:nowrap}.relation-chip{padding:2px 5px;background:#443225;color:#f7ddb0}.distance-chip{display:flex;gap:2px;padding:2px 5px;border:1px solid #9d8157;background:#ddc69a;font-weight:900}.distance-chip small{font-size:8px;opacity:.7}.distance-chip.reachable{border-color:#44725b;background:#cfe0bd;color:#24503b}.opponent-equipment{display:flex;flex-wrap:wrap;gap:2px;min-height:16px}.opponent-equip,.no-equipment{position:relative;padding:1px 4px;border:1px solid #80663f66;border-radius:3px;font-size:8px}.no-equipment{opacity:.48}.opponent.in-range:not(.targetable){border-color:#96aa69}.opponent.current{z-index:3;border-color:#ffe19a;animation:currentSeat 1s ease-in-out infinite alternate}.opponent.current::before{content:'現在回合';position:absolute;z-index:4;top:0;right:0;padding:3px 6px;border-radius:0 0 0 6px;background:#8d3026;color:#fff2d0;font-size:9px;font-weight:900}.opponent.current .opponent-body{padding-top:21px}.opponent.targetable{z-index:4;border-color:#ffe58d;animation:targetSeat .8s ease-in-out infinite alternate}.opponent.targetable::after{content:'點我攻擊';position:absolute;inset:auto 0 0;padding:3px;background:#f1cf77;color:#322116;text-align:center;font-size:9px;font-weight:900}.opponent.eliminated{opacity:.38;filter:grayscale(1)}
.portrait,.self-portrait,.onboarding-portrait{display:block;position:relative;background-color:#aa895a;background-image:url('icon.svg#portrait-bart');background-size:cover;background-position:center 25%}.role-chip{position:absolute;left:3px;bottom:3px;min-width:23px;min-height:23px;display:grid;place-items:center;border:2px solid #60472d;border-radius:50%;background:#f5d68b;color:#362416;font-size:9px;font-weight:900}.role-chip.hidden-role{background:#332b24;color:#f1dfb9;border-color:#a58e68}
.table-center{position:relative;min-height:166px;display:grid;grid-template-columns:62px 1fr 62px;grid-template-rows:1fr 40px;gap:8px;align-items:center;padding:8px;border:1px solid #d1a96133;border-radius:16px;background:#0a1d1699;box-shadow:inset 0 0 35px #0007}.table-mark{grid-column:2;text-align:center;color:#d8c295aa}.table-mark span{display:block;font:900 18px/1.1 Georgia,serif;letter-spacing:.07em}.table-mark small{display:block;margin-top:4px;font-size:8px;letter-spacing:.08em}.pile{grid-row:1;width:62px;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;border:2px solid #d0a65d;border-radius:5px;box-shadow:3px 3px #3b2a1c,0 7px 16px #0006}.pile strong{font:700 17px Georgia,serif;text-align:center}.pile small{margin-top:3px;font-size:9px}.draw-pile{grid-column:1;background:repeating-linear-gradient(45deg,#733229 0 3px,#53241e 3px 9px)}.discard-pile{grid-column:3;background:var(--paper);color:var(--paper-ink)}.discard-pile>span{font:21px Georgia,serif}.discard-pile strong{font-size:9px;line-height:1.3}.log-peek{grid-column:1/-1;grid-row:2;min-width:0;width:100%;min-height:38px;display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #d3b87644;border-radius:6px;background:#130f0bcc;color:#e6d6b4;text-align:left;font-size:10px}.log-peek>span:nth-child(2){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.log-peek svg{width:14px;fill:none;stroke:currentColor;stroke-width:2}.live-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#f0c865;box-shadow:0 0 8px #f0c865}
.action-stage{position:absolute;z-index:8;inset:auto 8px 49px;min-height:32px;display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid #d1ac6555;border-radius:5px;background:#120f0ce8;color:#f5e1b7;pointer-events:none}.action-kicker{display:none}.action-stage strong{font-size:9px}#action-card{padding:3px 6px;border-radius:3px;background:#e6ca92;color:#3b281b;font-size:9px;font-weight:900}#action-target{margin-left:auto;font-size:8px;color:#d3bd91}.effect-stage{position:absolute;z-index:12;inset:4px;min-height:142px;display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,132px);gap:8px;align-items:center;padding:9px 10px;border:2px solid #d5ac62;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#182a21f7,#101812fa);box-shadow:0 14px 38px #0009;pointer-events:none}.effect-copy{min-width:0;display:grid;gap:3px;align-content:center}.effect-kicker{color:#cfb77f;font-size:8px;font-weight:900;letter-spacing:.08em}.effect-copy>strong{font-size:15px;line-height:1.15}.effect-rule{width:max-content;max-width:100%;padding:2px 5px;border:1px solid #d8b96677;border-radius:3px;background:#e2c67d1c;color:#f1d486;font-size:8px;font-weight:900;line-height:1.3}.effect-verdict{margin-top:2px;color:#b9ddac;font-size:13px;font-weight:900;line-height:1.15;animation:verdictReveal .28s .82s ease-out both}#effect-outcome{color:#dce8d6;font-size:9px;font-weight:800;line-height:1.35}.effect-stage[data-tone='failure'] .effect-verdict,.effect-stage[data-tone='failure'] #effect-outcome{color:#ffad96}.effect-visual{position:relative;display:grid;grid-template-columns:40px 9px minmax(0,1fr);align-items:center;gap:3px}.effect-source-card{width:40px;height:68px;display:flex;align-items:flex-end;justify-content:center;padding:3px;border:2px solid #d0a159;border-radius:4px;background:#e1c78f url('./assets/card-effects-v1.png') 0 0/400% 300% no-repeat;color:#fff4cf;font-size:7px;font-weight:900;line-height:1.1;text-align:center;text-shadow:0 1px 2px #000,0 0 4px #000}.effect-stage[data-card='barrel'] .effect-source-card{background-position:100% 0}.effect-stage[data-card='dynamite'] .effect-source-card{background-position:0 50%}.effect-stage[data-card='jail'] .effect-source-card{background-position:33.333% 50%}.effect-flow{position:relative;height:2px;border-radius:99px;background:#d7b866}.effect-flow::after{content:'';position:absolute;right:-1px;top:50%;width:6px;height:6px;transform:translateY(-50%) rotate(45deg);border-top:2px solid #d7b866;border-right:2px solid #d7b866}.effect-cards{display:flex;justify-content:center;gap:3px;min-width:0}.effect-check-card{position:relative;width:54px;height:76px;display:grid;place-items:center;align-content:center;padding:3px;border:2px solid #74583b;border-radius:4px;background:linear-gradient(145deg,#f7e6bd,#d8bc84);color:#251a12;box-shadow:2px 3px #3b2a1c,0 6px 10px #0007;animation:flipCheck .68s .2s ease both}.effect-check-card small{position:absolute;inset:3px 3px auto;color:#74583b;font-size:6px;font-weight:900}.effect-check-card strong{font:900 18px Georgia,serif}.effect-check-card strong.red{color:#a5322d}.effect-check-card em{font-size:7px;font-style:normal;font-weight:900}.effect-check-card.chosen{border-color:#ffe08a;box-shadow:0 0 0 2px #d4a63e,0 0 14px #ffd76577}.effect-stage[data-card='dynamite'][data-tone='failure']{border-color:#ff7957;box-shadow:0 0 24px #ff4d2c88,0 14px 38px #0009}.effect-stage[data-card='dynamite'][data-tone='failure']::after{content:'';position:absolute;z-index:-1;inset:-45%;opacity:0;background:radial-gradient(circle,#fff3a8 0 4%,#ff9b3d 5% 11%,#d53826 12% 20%,transparent 34%);animation:blastFlash .75s .7s ease-out both}.effect-stage[data-card='barrel'][data-tone='success'] .effect-source-card{animation:shieldPulse .75s .65s ease-out}.effect-stage[data-card='jail'][data-tone='failure'] .effect-source-card{filter:grayscale(.45) brightness(.72)}.effect-stage:not([hidden]){animation:effectStage 2.3s ease both}
.player-zone{position:relative;display:grid;grid-template-columns:1fr 92px;gap:8px;padding:9px;border:1px solid #d2ab6355;border-radius:13px;background:#17120fe8;box-shadow:0 -8px 28px #0007}.turn-banner{grid-column:1/-1;min-height:39px;display:flex;align-items:center;padding:7px 10px;border-left:4px solid #e2b558;border-radius:5px;background:#ead299;color:#362317;font-size:11px;font-weight:900;line-height:1.45}.player-mat{grid-column:1/-1;position:relative;min-width:0;display:grid;grid-template-columns:54px minmax(0,1fr);gap:7px;padding:7px;border:1px solid #d1ae6a33;border-radius:7px;background:#0c1713cc}.self-portrait{width:54px;min-height:76px;border:1px solid #c49f5d;border-radius:4px}.self-info{min-width:0}.self-info h2{margin:0 0 2px;font-size:13px;line-height:1.3}.self-info p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}.self-vitals{display:flex;gap:3px;margin:5px 0}.bullet{width:8px;height:15px;border:1px solid #f0ce7d;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#92672e,#e8c774,#9a6c31)}.bullet.empty{border-color:#78684e;background:#3c3429}.self-equipment{display:flex;flex-wrap:wrap;gap:3px}.equip-tag{position:relative;padding:2px 5px;border:1px solid #bea15f55;border-radius:3px;color:#ead7ab;font-size:8px}.range-guide{display:flex;flex-wrap:wrap;gap:3px 7px;margin-top:4px;padding:4px 5px;border-radius:3px;background:#254334}.range-guide b{color:#f2d584;font-size:9px}.range-guide span{color:#d4c7a6;font-size:8px;line-height:1.4}.identity{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:center;padding:6px 7px;border-top:1px solid #d3b16a44}.identity>span:first-child{color:var(--muted);font-size:8px}.identity>strong{color:#f2ce76;font-size:11px}.identity>span:last-of-type{grid-column:1/-1;color:#d9c9a7;font-size:8px;line-height:1.4}.team-guide{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 6px;padding:4px 6px;border-left:3px solid #d5aa59;background:#20382d}.team-guide b{color:#f1d589;font-size:8px}.team-guide span{font-size:8px}.team-guide small{width:100%;color:#bfb397;font-size:7px;line-height:1.35}.self-turn-marker{display:none}.player-mat.current-turn{border-color:#f3d078;box-shadow:0 0 0 2px #f3d07855,0 0 20px #e9ba4e33}.player-mat.current-turn .self-turn-marker{display:block;position:absolute;z-index:4;right:5px;top:-9px;padding:2px 7px;border-radius:999px;background:#f0cc73;color:#362416;font-size:8px;font-weight:900}
.hand-wrap{grid-column:1;min-width:0}.hand-header{min-height:29px;display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;font-size:10px;font-weight:900}.hand-header strong{color:#f1cd75}.text-btn{min-height:29px;padding:4px 7px;border:1px solid #c9a76666;border-radius:4px;background:transparent;color:#f0cf80;font-size:9px}.hand{min-height:142px;display:flex;align-items:stretch;gap:7px;overflow-x:auto;overflow-y:visible;padding:13px 4px 5px;scroll-snap-type:x proximity;scrollbar-color:#b48d50 #241a14}.game-card{position:relative;flex:0 0 94px;min-width:0;min-height:132px;display:flex;flex-direction:column;padding:4px;border:1px solid #b28c55;border-radius:6px;background:linear-gradient(135deg,#fff1cd,#dfc493);color:var(--paper-ink);box-shadow:2px 4px #493522,0 7px 14px #0006;text-align:center;scroll-snap-align:center;transition:.16s}.game-card:hover:not(:disabled),.game-card:focus-visible:not(:disabled){z-index:10;transform:translateY(-8px);border-color:#fff0aa;box-shadow:0 0 0 3px #f0ce75,0 12px 24px #0008}.game-card.selected{transform:translateY(-9px);box-shadow:0 0 0 3px #f3d77e,0 12px 24px #0008}.game-card:disabled{filter:grayscale(.65) brightness(.63)}.card-inner{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:1px solid #9a754377;border-radius:3px}.card-name{width:100%;min-height:18px;display:block;font-size:10px;font-weight:900;line-height:1.4;overflow-wrap:anywhere}.card-icon{width:100%;height:48px;flex:none;display:block;background:url('icon.svg#card-gun') center/contain no-repeat;color:transparent;font-size:0}.card-help{width:100%;display:block;color:#543c29;font-size:8px;line-height:1.4;text-align:left}.card-corner{align-self:flex-end;padding:1px 2px;font:9px Georgia,serif}.card-corner.red{color:#a52e2a}[data-kind='missed'] .card-icon{background-image:url('icon.svg#card-missed')}[data-kind='beer'] .card-icon,[data-kind='saloon'] .card-icon{background-image:url('icon.svg#card-beer')}[data-kind='barrel'] .card-icon{background-image:url('icon.svg#card-barrel')}[data-kind='dynamite'] .card-icon{background-image:url('icon.svg#card-dynamite')}[data-kind='jail'] .card-icon{background-image:url('icon.svg#card-jail')}[data-kind='mustang'] .card-icon{background-image:url('icon.svg#card-horse')}[data-kind='scope'] .card-icon{background-image:url('icon.svg#card-scope')}[data-kind='stagecoach'] .card-icon,[data-kind='wellsfargo'] .card-icon,[data-kind='generalstore'] .card-icon,[data-kind='catbalou'] .card-icon,[data-kind='panic'] .card-icon{background-image:url('icon.svg#card-cards')}[data-kind='indians'] .card-icon{background-image:url('icon.svg#card-arrow')}.hand-guidance{margin:3px 0 0;color:var(--muted);font-size:8px;line-height:1.4}.empty-hand{margin:auto;color:var(--muted);font-size:10px}.end-turn{grid-column:2;align-self:end;width:92px;min-height:64px;padding:8px;border:1px solid #efc77a;border-radius:7px;background:linear-gradient(#a74936,#752b23);color:#fff1cf;box-shadow:0 4px #381712;font-size:11px;font-weight:900}.end-turn:disabled{border-color:#665a48;background:#40352c;color:#9e927e;box-shadow:none}
.game-card.defense-ready{z-index:14;filter:none!important;transform:translateY(-10px);border-color:#fff1a0;box-shadow:0 0 0 4px #f3d16d,0 0 30px #f2cb4daa;animation:defenseCard .65s ease-in-out infinite alternate}.game-card.defense-ready::before{content:'可防禦';position:absolute;z-index:3;left:50%;top:-12px;transform:translateX(-50%);width:max-content;padding:2px 6px;border-radius:999px;background:#f2cf70;color:#362417;font-size:8px;font-weight:900}.prompt-modal[open]{position:fixed;z-index:90;top:calc(68px + env(safe-area-inset-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 18px),460px);max-height:32dvh;padding:12px 14px}.prompt-modal[open] .prompt-art{display:none}.prompt-modal[open] h2{margin:3px 0;font-size:17px}.prompt-modal[open] p{margin:3px 0;font-size:10px}.prompt-actions{display:flex;gap:7px;margin-top:8px}.prompt-actions>*{flex:1;min-height:40px!important;padding:6px!important}
.flying-card{position:fixed;z-index:85;left:0;top:0;width:76px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:3px double #9d713d;border-radius:6px;background:linear-gradient(135deg,#fff0ca,#d9bc87);color:#392519;box-shadow:0 14px 30px #000c;pointer-events:none;will-change:transform,opacity}.flying-card span{max-width:68px;font-size:12px;font-weight:900;line-height:1.3;text-align:center}.flying-card b{color:#9d392c;font:900 27px Georgia,serif}.opponent.action-source,.player-mat.action-source{outline:3px solid #fff0a0;outline-offset:3px}.opponent.action-target,.player-mat.action-target{box-shadow:0 0 0 4px #eb826d,0 0 24px #e84f3d88}.taking-damage{animation:seatDamage .58s ease both!important}.damage-burst{position:fixed;z-index:96;transform:translate(-50%,-50%);color:#ffe09a;font:900 44px Georgia,serif;text-shadow:0 3px #8d251e,0 0 18px #ff392b;pointer-events:none;animation:damageNumber .78s ease-out both}.screen-hit .game-board{animation:screenImpact .42s ease-out}.screen-hit::after{content:'';position:fixed;z-index:88;inset:0;background:#c52d2433;pointer-events:none;animation:hitFlash .42s ease-out both}
[data-tooltip]{position:relative}.game-card[data-tooltip]::after,.equip-tag[data-tooltip]::after,.opponent-equip[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:100;left:50%;bottom:calc(100% + 7px);width:min(230px,78vw);padding:8px 9px;border:1px solid #d9b875;border-radius:5px;background:#15110ef5;color:#fff0ca;box-shadow:0 9px 25px #000b;font-size:10px;font-weight:500;line-height:1.55;text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:.14s;pointer-events:none}.game-card[data-tooltip]:hover::after,.game-card[data-tooltip]:focus-visible::after,.equip-tag[data-tooltip]:hover::after,.equip-tag[data-tooltip]:focus-visible::after,.opponent-equip[data-tooltip]:hover::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.scrim{position:fixed;z-index:60;inset:0;background:#080604bd}.drawer,.log-panel{position:fixed;z-index:70;inset:0 auto 0 0;width:min(90vw,380px);overflow-y:auto;padding:calc(22px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));background:#281e19;box-shadow:0 0 45px #000b;visibility:hidden;transform:translateX(-105%);transition:.22s}.log-panel{inset:0 0 0 auto;transform:translateX(105%)}.drawer.open,.log-panel.open{visibility:visible;transform:none}.drawer-head,.rules-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #d2af6755}.drawer-head h2,.rules-head h2{margin:3px 0 0}.eyebrow{color:#d8b86f;font-size:9px;font-weight:900;letter-spacing:.13em}.menu-row{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border:0;border-bottom:1px solid #e7d5b022;background:transparent;text-align:left}.menu-row small{color:var(--muted)}.danger-row span{color:#f2a58f}.fan-note{color:var(--muted);font-size:10px;line-height:1.7}.log-list{list-style:none;margin:0;padding:0}.log-list li{padding:10px 0;border-bottom:1px solid #e7d5b022;color:var(--muted);font-size:11px;line-height:1.65}.log-list .danger,.log-list .eliminated{color:#ffad98}.log-list .ability{color:#bde0b8}.log-list .victory{color:#f1ce79;font-weight:900}
.modal{width:min(calc(100% - 20px),560px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:2px solid #b99660;border-radius:10px;background:#f1e0bd;color:var(--paper-ink);box-shadow:0 22px 75px #000c;overscroll-behavior:contain}.modal::backdrop{background:#0d0a08d5;backdrop-filter:blur(3px)}.modal h1,.modal h2,.modal h3{line-height:1.35}.modal h2{margin:6px 0 10px}.modal p{color:#604a36;font-size:12px;line-height:1.7}.modal .icon-btn{border-color:#80613d55;background:#e2cda6;color:#3d2a1e}.setup-modal{padding:0;text-align:center}.setup-illustration{height:188px;position:relative;overflow:hidden;background:linear-gradient(#0005,#0006),url('./assets/saloon-table-v1.png') center 18%/cover;border-bottom:4px solid #69412a}.cover-portrait{position:absolute;bottom:-22px;width:125px;height:170px;border:2px solid #e5c88f;background-size:cover;background-position:center;box-shadow:0 8px 20px #0007}.cover-left{left:-12px;transform:rotate(-9deg);background-image:url('icon.svg#portrait-blackjack')}.cover-right{right:-12px;transform:rotate(9deg);background-image:url('icon.svg#portrait-calamity')}.cover-center{left:50%;width:140px;height:190px;transform:translateX(-50%);background-image:url('icon.svg#portrait-bart')}.cover-wordmark{position:absolute;z-index:3;inset:auto 0 18px;color:#fff0c6;font:900 48px/1 Georgia,serif;text-shadow:3px 4px #7e3025,0 6px 16px #000}.cover-caption{position:absolute;z-index:3;inset:auto 0 4px;color:#f6ddb1;font:700 8px Georgia,serif;letter-spacing:.12em}.setup-content{padding:20px}.setup-content h1{margin:5px 0 8px}.modal-lead{margin:0 0 16px}fieldset{min-width:0;margin:0 0 14px;padding:0;border:0;text-align:left}legend{margin-bottom:6px;font-size:11px;font-weight:900}.segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.segmented.difficulty{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented label{position:relative}.segmented input{position:absolute;width:1px;height:1px;opacity:0}.segmented span{min-height:43px;display:grid;place-items:center;padding:5px;border:1px solid #927450;border-radius:5px;background:#f7ecd4;color:#60472f;font-size:11px}.segmented input:checked+span{border-color:#315244;background:#315244;color:#fff0d0;box-shadow:inset 0 0 0 2px #b9a16e}.setup-note{margin:0 0 12px;text-align:left;font-size:10px!important}.primary-btn,.secondary-btn,.continue-btn{min-height:48px;padding:10px 14px;border-radius:6px;font-size:12px;font-weight:900}.primary-btn{width:100%;border:1px solid #6c291f;background:linear-gradient(#a94936,#7f3026);color:#fff1d2;box-shadow:0 3px #54231c}.secondary-btn,.continue-btn{border:1px solid #977552;background:#e3cfaa;color:#493322}.continue-btn{width:100%;margin-top:9px}.field-label{display:block;color:#795737;font-size:9px;font-weight:900}
.onboarding-heading p{margin:0 0 14px}.onboarding-identity{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid #a9885d66}.onboarding-portrait{width:76px;min-height:96px;border:2px solid #88663e;border-radius:5px}.onboarding-identity strong{display:block;color:#913728;font-size:24px}.onboarding-identity h3{margin:3px 0;font-size:14px}.onboarding-goal,.onboarding-ability,.onboarding-team{margin-top:11px;padding:9px}.onboarding-goal{border-left:4px solid #8d5f33;background:#e5c992}.onboarding-team{border-radius:5px;background:#315246;color:#fff0d0}.onboarding-team .field-label{color:#e3c982}.onboarding-team>div{display:grid;gap:3px;margin-top:4px}.onboarding-team span,.onboarding-team small{font-size:10px;line-height:1.5}.onboarding-goal p,.onboarding-ability p{margin:2px 0 0;color:#473321}.onboarding-steps h3,.onboarding-hand h3{margin:14px 0 8px;font-size:12px}.onboarding-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:5px;counter-reset:step}.onboarding-steps li{counter-increment:step;display:grid;grid-template-columns:20px 34px 1fr;gap:6px;align-items:start;font-size:10px;line-height:1.5}.onboarding-steps li::before{content:counter(step);width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#436353;color:white}#onboarding-hand-preview{display:flex;gap:7px;overflow-x:auto;padding:4px}#onboarding-hand-preview .game-card{flex-basis:86px;min-height:128px}.onboarding-reaction-note{margin:12px 0!important;padding:8px;border-radius:4px;background:#e2cfaa;font-size:10px!important}.rules-modal{width:min(calc(100% - 20px),760px)}.rules-content{display:grid;gap:12px}.rules-content section{padding-left:9px;border-left:3px solid #a5753f}.rules-content h3{margin:0 0 4px;font-size:14px}.rules-content p{margin:0}.card-legend{display:grid;gap:8px}.legend-card{padding:9px;border:1px solid #a98b6355;border-radius:4px;background:#fbedcf}.legend-card strong{display:block;color:#8e3929;font-size:11px}.legend-card span{display:block;margin-top:2px;color:#5b4430;font-size:10px;line-height:1.6}.result-modal{text-align:center}.reveal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;text-align:left}.reveal-item{padding:9px;border:1px solid #b99a7055;border-radius:4px;font-size:9px;line-height:1.5}.reveal-item strong{display:block;color:#8d3829}.toast{position:fixed;z-index:110;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,12px);width:max-content;max-width:calc(100vw - 20px);padding:9px 12px;border:1px solid #c4a36c;border-radius:5px;background:#f4e3bf;color:#3b291c;box-shadow:0 14px 38px #0009;font-size:10px;opacity:0;pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}
.effect-copy,.effect-visual{position:relative;z-index:1}.effect-stage:not([hidden]){animation-duration:var(--effect-duration,2300ms)}.effect-stage[data-card='dynamite'][data-tone='failure']::after{z-index:0}.effect-cards.multiple .effect-check-card{width:36px}.effect-cards.multiple .effect-check-card strong{font-size:14px}.effect-cards.multiple .effect-check-card small{font-size:5px}.effect-cards.multiple .effect-check-card em{font-size:6px}.effect-result-card{width:68px;height:76px;display:grid;place-items:center;align-content:center;gap:5px;padding:5px;border:2px solid #d7b965;border-radius:5px;background:linear-gradient(145deg,#263f31,#15271f);color:#f8e9bd;box-shadow:0 0 14px #bdda8c44;text-align:center;animation:verdictReveal .3s .55s ease-out both}.effect-result-card small{font-size:6px;line-height:1.2}.effect-result-card strong{font-size:10px;line-height:1.25}.effect-stage[data-tone='failure'] .effect-result-card{border-color:#d2765f;background:linear-gradient(145deg,#572c25,#2f1b18);box-shadow:0 0 16px #ef5d3d55}.effect-stage[data-card='bang'] .effect-source-card,.effect-stage[data-card='gatling'] .effect-source-card,.effect-stage[data-card='volcanic'] .effect-source-card,.effect-stage[data-card='schofield'] .effect-source-card,.effect-stage[data-card='remington'] .effect-source-card,.effect-stage[data-card='carabine'] .effect-source-card,.effect-stage[data-card='winchester'] .effect-source-card{background-position:0 0}.effect-stage[data-card='missed'] .effect-source-card{background-position:33.333% 0}.effect-stage[data-card='beer'] .effect-source-card{background-position:66.666% 0}.effect-stage[data-card='mustang'] .effect-source-card{background-position:66.666% 50%}.effect-stage[data-card='scope'] .effect-source-card{background-position:100% 50%}.effect-stage[data-card='stagecoach'] .effect-source-card,.effect-stage[data-card='wellsfargo'] .effect-source-card,.effect-stage[data-card='generalstore'] .effect-source-card,.effect-stage[data-card='catbalou'] .effect-source-card,.effect-stage[data-card='panic'] .effect-source-card{background-position:0 100%}.effect-stage[data-card='indians'] .effect-source-card{background-position:33.333% 100%}.effect-stage[data-card='duel'] .effect-source-card{background-position:66.666% 100%}.effect-stage[data-card='saloon'] .effect-source-card{background-position:100% 100%}

.draw-pile{position:relative;isolation:isolate;justify-content:flex-end;overflow:visible;padding-bottom:4px}.pile-back{position:absolute;z-index:0;inset:4px 5px 20px;border:2px solid #ddb86e;border-radius:4px;background:repeating-linear-gradient(45deg,#79372d 0 3px,#4e211c 3px 7px);box-shadow:-3px 3px 0 #bf9555,-6px 6px 0 #39271d,0 8px 13px #0007}.pile-back::after{content:'';position:absolute;inset:6px;border:1px solid #e1bf7977;border-radius:2px;background:radial-gradient(circle,#d3a856 0 7%,transparent 8%),repeating-conic-gradient(from 45deg,#c99b51 0 8deg,transparent 8deg 18deg)}.draw-pile strong{position:relative;z-index:2;min-width:27px;padding:1px 4px;border-radius:99px;background:#1d1713dc;color:#fff0bd}.draw-pile small{position:relative;z-index:2}.discard-pile{position:relative;display:grid;grid-template-rows:1fr auto;gap:2px;padding:3px;background:#2b211a;color:#f7e8bd}.discard-face{position:relative;width:100%;min-width:0;height:100%;display:grid;grid-template-rows:auto 1fr auto;place-items:center;padding:4px 3px;border:2px solid #9c753f;border-radius:4px;overflow:hidden;background:linear-gradient(145deg,#f7e6bd,#d8bc84);color:#281c13;box-shadow:2px 2px #0e0a08}.discard-face>strong{z-index:2;font-size:8px!important;line-height:1.15}.discard-art{width:100%;min-height:34px;background:url('./assets/card-effects-v1.png') 0 0/400% 300% no-repeat}.discard-effect{z-index:2;font-size:6px!important;font-weight:800;line-height:1.15}.discard-corner{position:absolute;z-index:3;right:2px;bottom:2px;padding:1px;background:#f5e0b8dd;font:7px Georgia,serif!important}.discard-corner.red{color:#a5322d}.discard-pile[data-kind='bang'] .discard-art,.discard-pile[data-kind='gatling'] .discard-art,.discard-pile[data-kind='volcanic'] .discard-art,.discard-pile[data-kind='schofield'] .discard-art,.discard-pile[data-kind='remington'] .discard-art,.discard-pile[data-kind='carabine'] .discard-art,.discard-pile[data-kind='winchester'] .discard-art{background-position:0 0}.discard-pile[data-kind='missed'] .discard-art{background-position:33.333% 0}.discard-pile[data-kind='beer'] .discard-art{background-position:66.666% 0}.discard-pile[data-kind='barrel'] .discard-art{background-position:100% 0}.discard-pile[data-kind='dynamite'] .discard-art{background-position:0 50%}.discard-pile[data-kind='jail'] .discard-art{background-position:33.333% 50%}.discard-pile[data-kind='mustang'] .discard-art{background-position:66.666% 50%}.discard-pile[data-kind='scope'] .discard-art{background-position:100% 50%}.discard-pile[data-kind='stagecoach'] .discard-art,.discard-pile[data-kind='wellsfargo'] .discard-art,.discard-pile[data-kind='generalstore'] .discard-art,.discard-pile[data-kind='catbalou'] .discard-art,.discard-pile[data-kind='panic'] .discard-art{background-position:0 100%}.discard-pile[data-kind='indians'] .discard-art{background-position:33.333% 100%}.discard-pile[data-kind='duel'] .discard-art{background-position:66.666% 100%}.discard-pile[data-kind='saloon'] .discard-art{background-position:100% 100%}.discard-pile.empty .discard-art,.discard-pile.empty .discard-corner{display:none}.discard-pile.empty .discard-face{place-content:center;background:#dbc79e55;color:#d8c39b}.discard-pile.empty .discard-effect{font-size:6px!important;text-align:center}

@keyframes currentSeat{from{box-shadow:0 0 0 2px #f0cc7166,0 5px 16px #0008}to{box-shadow:0 0 0 5px #ffe397aa,0 0 26px #efbe5066}}@keyframes targetSeat{from{box-shadow:0 0 0 2px #f0cc7166}to{box-shadow:0 0 0 6px #ffe397bb,0 0 28px #f0c34f88}}@keyframes defenseCard{from{transform:translateY(-7px)}to{transform:translateY(-14px)}}@keyframes effectStage{0%{opacity:0;transform:scale(.94)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}@keyframes flipCheck{from{opacity:0;transform:rotateY(90deg) scale(.7)}55%{transform:rotateY(-8deg) scale(1.06)}to{opacity:1;transform:none}}@keyframes verdictReveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes blastFlash{0%{opacity:0;transform:scale(.35)}22%{opacity:.9}100%{opacity:0;transform:scale(1.2)}}@keyframes shieldPulse{0%,100%{filter:none}45%{filter:brightness(1.45) drop-shadow(0 0 12px #c9ef9e);transform:scale(1.08)}}@keyframes seatDamage{0%,100%{transform:none;filter:none}20%{transform:translateX(-7px);filter:brightness(1.7) sepia(1)}42%{transform:translateX(6px)}65%{transform:translateX(-3px)}82%{transform:translateX(2px)}}@keyframes screenImpact{0%,100%{transform:none}15%{transform:translate(-7px,3px)}35%{transform:translate(6px,-3px)}58%{transform:translate(-4px,2px)}78%{transform:translate(3px,-1px)}}@keyframes hitFlash{from{opacity:1}to{opacity:0}}@keyframes damageNumber{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-130%) scale(.92)}}
@media(min-width:700px){.game-board{padding:14px 20px 18px;grid-template-rows:auto 1fr auto}.opponents{justify-content:center;overflow:visible;flex-wrap:wrap}.opponent{flex-basis:158px;min-height:130px;grid-template-columns:58px minmax(0,1fr)}.opponent .portrait{width:58px}.table-center{width:min(680px,100%);min-height:208px;justify-self:center;grid-template-columns:78px 1fr 78px}.pile{width:78px;min-height:106px}.table-mark span{font-size:30px}.player-zone{grid-template-columns:280px minmax(0,1fr) 120px;padding:12px}.turn-banner{grid-column:1/-1}.player-mat{grid-column:1}.hand-wrap{grid-column:2}.end-turn{grid-column:3;width:120px;min-height:72px}.hand{min-height:155px}.game-card{flex-basis:102px;min-height:145px}.card-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.game-board{grid-template-columns:1fr minmax(520px,680px) 1fr;grid-template-rows:auto 1fr auto;gap:16px}.opponents{grid-column:1/-1}.table-center{grid-column:2;width:100%;min-height:280px}.player-zone{grid-column:1/-1}.opponent{flex-basis:176px;min-height:142px;grid-template-columns:66px minmax(0,1fr)}.opponent .portrait{width:66px}.game-card{flex-basis:112px;min-height:156px}}
@media(orientation:landscape) and (max-height:600px){.topbar{min-height:52px}.game-board{min-height:calc(100dvh - 52px);grid-template-columns:38% 1fr;grid-template-rows:auto 1fr}.opponents{grid-column:1;grid-row:1}.table-center{grid-column:2;grid-row:1;min-height:152px}.player-zone{grid-column:1/-1;grid-row:2;grid-template-columns:220px 1fr 92px}.turn-banner{grid-column:1/-1;min-height:31px}.player-mat{grid-column:1}.hand-wrap{grid-column:2}.end-turn{grid-column:3}.hand{min-height:118px}.game-card{flex-basis:84px;min-height:110px}.card-icon{height:34px}.card-help{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.game-card.defense-ready{transform:none}}

/* Q 版頭像與規則角色分開分配：警長固定，其餘同局不重複。
   角色圖是 4×2 sprite；用保留原圖比例的內層裁切，避免窄座位把人物垂直拉長。 */
.cover-portrait{background-image:url('./assets/gunslingers-cute-v2.png');background-size:400% 200%;background-repeat:no-repeat}
.portrait,.self-portrait,.onboarding-portrait,.opponent-detail-portrait{overflow:hidden;background-image:none}
.portrait::before,.self-portrait::before,.onboarding-portrait::before,.opponent-detail-portrait::before{content:'';position:absolute;z-index:0;left:50%;top:var(--portrait-y,-3%);height:212%;aspect-ratio:3/2;background:url('./assets/gunslingers-cute-v2.png') 0 0/100% 100% no-repeat;transform:translateX(var(--portrait-x,-12.5%));pointer-events:none}
[data-portrait='sheriff']{--portrait-x:-12.5%;--portrait-y:-3%;background-position:0 0}
[data-portrait='dandy']{--portrait-x:-37.5%;--portrait-y:-3%;background-position:33.333% 0}
[data-portrait='cowgirl']{--portrait-x:-62.5%;--portrait-y:-3%;background-position:66.666% 0}
[data-portrait='vaquero']{--portrait-x:-87.5%;--portrait-y:-3%;background-position:100% 0}
[data-portrait='young-gun']{--portrait-x:-12.5%;--portrait-y:-109%;background-position:0 100%}
[data-portrait='frontier']{--portrait-x:-37.5%;--portrait-y:-109%;background-position:33.333% 100%}
[data-portrait='veteran']{--portrait-x:-62.5%;--portrait-y:-109%;background-position:66.666% 100%}
[data-portrait='masked']{--portrait-x:-87.5%;--portrait-y:-109%;background-position:100% 100%}
.cover-left{background-position:33.333% 0}.cover-center{background-position:0 0}.cover-right{background-position:66.666% 0}

.card-icon{background-image:url('./assets/card-effects-v1.png')!important;background-size:400% 300%!important;background-repeat:no-repeat!important;background-position:0 0}
[data-kind='bang'] .card-icon,[data-kind='gatling'] .card-icon,[data-kind='volcanic'] .card-icon,[data-kind='schofield'] .card-icon,[data-kind='remington'] .card-icon,[data-kind='carabine'] .card-icon,[data-kind='winchester'] .card-icon{background-position:0 0}
[data-kind='missed'] .card-icon{background-position:33.333% 0}
[data-kind='beer'] .card-icon{background-position:66.666% 0}
[data-kind='barrel'] .card-icon{background-position:100% 0}
[data-kind='dynamite'] .card-icon{background-position:0 50%}
[data-kind='jail'] .card-icon{background-position:33.333% 50%}
[data-kind='mustang'] .card-icon{background-position:66.666% 50%}
[data-kind='scope'] .card-icon{background-position:100% 50%}
[data-kind='stagecoach'] .card-icon,[data-kind='wellsfargo'] .card-icon,[data-kind='generalstore'] .card-icon,[data-kind='catbalou'] .card-icon,[data-kind='panic'] .card-icon{background-position:0 100%}
[data-kind='indians'] .card-icon{background-position:33.333% 100%}
[data-kind='duel'] .card-icon{background-position:66.666% 100%}
[data-kind='saloon'] .card-icon{background-position:100% 100%}
.discard-pile[data-tooltip]{position:relative}.discard-pile[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:100;right:0;bottom:calc(100% + 8px);width:min(230px,75vw);padding:8px 9px;border:1px solid #d9b875;border-radius:5px;background:#15110ff5;color:#fff0ca;box-shadow:0 9px 25px #000b;font-size:10px;line-height:1.55;text-align:left;opacity:0;visibility:hidden;transition:.14s;pointer-events:none}.discard-pile[data-tooltip]:hover::after,.discard-pile[data-tooltip]:focus-visible::after{opacity:1;visibility:visible}.log-card-effect{display:grid;gap:2px;margin-top:5px;padding:6px;border-left:3px solid #caa75e;background:#0e1814;color:#d8c9a8;font-size:9px;line-height:1.5}.log-card-effect b{color:#efce7a}.log-card-effect.detailed{grid-template-columns:auto minmax(0,1fr);gap:7px;padding:8px;border-left-width:4px}.log-card-effect.detailed[data-tone='failure']{border-left-color:#dc7057;background:#291714}.log-judgment-cards{display:flex;gap:3px;align-items:start}.log-judgment-card{min-width:34px;padding:5px 3px;border:1px solid #967440;border-radius:3px;background:#efdab0;color:#2e2016;font:900 11px Georgia,serif;text-align:center}.log-judgment-card.red{color:#a5322d}.log-judgment-card.chosen{outline:2px solid #efc759;outline-offset:1px}.log-effect-source{display:grid;place-items:center;width:36px;min-height:36px;padding:3px;border:1px solid #b69555;border-radius:50%;background:#293b30;color:#f1d383;font-size:7px;font-weight:900}.log-effect-copy{min-width:0;display:grid;gap:2px}.log-effect-copy>b{font-size:10px}.log-effect-copy>span{color:#c9b991}.log-effect-copy>strong{color:#f1dfb5;font-size:9px;line-height:1.45}

/* Card-specific combat choreography */
.portrait,.self-portrait{transition:filter .18s,transform .18s}.opponent.current .portrait,.player-mat.current-turn .self-portrait{filter:saturate(1.12) brightness(1.08);animation:portraitReady 1.5s ease-in-out infinite alternate}.is-firing{z-index:6;animation:gunRecoil .72s cubic-bezier(.2,.8,.3,1) both!important;filter:brightness(1.45) saturate(1.25)!important}.under-fire{animation:underFire 1.15s ease both!important}.muzzle-flash,.bullet-tracer,.impact-spark,.dodge-swoosh{position:fixed;z-index:94;display:block;pointer-events:none}.muzzle-flash{width:54px;height:54px;transform:translate(-50%,-50%);background:conic-gradient(from 10deg,transparent 0 10%,#ffd169 12% 17%,transparent 19% 32%,#fff2a0 34% 40%,transparent 43% 60%,#ff7a35 62% 68%,transparent 70%);filter:drop-shadow(0 0 9px #ff9b37);animation:muzzleBurst .48s ease-out both}.bullet-tracer{height:4px;transform-origin:left center;transform:rotate(var(--shot-angle)) scaleX(0);border-radius:99px;background:linear-gradient(90deg,#fff7bd,#ffb43c 45%,#ff552c 80%,transparent);box-shadow:0 0 7px #ffc04d,0 0 16px #ff6038;animation:bulletTravel .42s .06s cubic-bezier(.1,.75,.2,1) both}.impact-spark{width:68px;height:68px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff8bd 0 6%,#ffb43f 7% 16%,#d73e27 18% 25%,transparent 28%),conic-gradient(transparent 0 5%,#ffd76b 6% 8%,transparent 9% 18%,#ff6f37 19% 22%,transparent 23% 36%,#ffe18b 37% 40%,transparent 41% 56%,#ff6534 57% 60%,transparent 61%);filter:drop-shadow(0 0 10px #ff6a33);animation:impactBurst .5s ease-out both}.dodge-swoosh{width:92px;height:58px;transform:translate(-50%,-50%) rotate(-18deg);border-top:5px solid #eaf5e1;border-radius:50%;box-shadow:0 -4px 10px #b7e9d5;animation:dodgeWind .78s ease-out both}.dodge-swoosh::after{content:'';position:absolute;inset:10px 8px auto;border-top:2px solid #f5fff0;border-radius:50%}.is-dodging{animation:dodgePortrait .72s ease both!important}
@keyframes portraitReady{from{transform:scale(1)}to{transform:scale(1.025)}}@keyframes gunRecoil{0%{transform:translateX(0) scale(1)}36%{transform:translateX(7px) scale(1.06)}54%{transform:translateX(-4px) scale(.99)}100%{transform:none}}@keyframes underFire{0%,100%{filter:none}48%{filter:brightness(1.6) sepia(1);box-shadow:0 0 0 4px #ff9e59,0 0 30px #e34f36}}@keyframes muzzleBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(12deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(24deg)}}@keyframes bulletTravel{0%{opacity:0;transform:rotate(var(--shot-angle)) scaleX(0)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--shot-angle)) scaleX(1)}}@keyframes impactBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(15deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(30deg)}}@keyframes dodgeWind{0%{opacity:0;transform:translate(-25%,-20%) rotate(-18deg) scale(.5)}35%{opacity:1}100%{opacity:0;transform:translate(-85%,-75%) rotate(-18deg) scale(1.2)}}@keyframes dodgePortrait{0%,100%{transform:none}45%{transform:translateX(-12px) rotate(-2deg)}}

@media(prefers-reduced-motion:reduce){.muzzle-flash,.bullet-tracer,.impact-spark,.dodge-swoosh{display:none!important}.is-firing,.under-fire,.is-dodging{animation:none!important}}

/* Mobile: every opponent remains visible; no hidden horizontal seat carousel. */
@media(max-width:699px){
  .opponents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding:2px 0 5px;scroll-snap-type:none}
  .opponent{width:auto;min-width:0;min-height:100px;display:grid;grid-template-columns:36px minmax(0,1fr);border-radius:6px}
  .opponent .portrait{width:36px;min-height:100%;background-size:400% 200%}
  .opponent-body{gap:2px;padding:5px 4px}
  .opponent-name{font-size:9px}.character-name{font-size:7px}.opponent-stats{font-size:8px}.relation-chip,.distance-chip{font-size:7px;padding:1px 3px}.distance-chip small{display:none}.opponent-equip,.no-equipment{font-size:6px;padding:1px 2px}
  .opponent.current .opponent-body{padding-top:18px}.opponent.current::before{font-size:7px;padding:2px 4px}.opponent.targetable::after{font-size:7px;padding:2px}
}

@media(max-width:699px) and (min-height:650px){
  html,body,.app-shell{height:100%;overflow:hidden}
  .game-board{height:calc(100dvh - 62px);min-height:0;overflow:hidden;padding:6px;gap:6px;grid-template-rows:auto 150px minmax(0,1fr)}
  .opponents{align-self:start;grid-auto-rows:94px;gap:5px}.opponent{min-height:94px;height:94px}
  .table-center{min-height:0;height:150px;grid-template-columns:58px 1fr 58px;grid-template-rows:1fr 34px;padding:6px}.pile{width:58px;min-height:76px}.table-mark span{font-size:15px}.log-peek{min-height:32px}.action-stage{inset:auto 6px 40px}
  .player-zone{min-height:0;overflow:visible;grid-template-columns:minmax(0,1fr) 78px;grid-template-rows:36px 106px minmax(0,1fr);gap:5px;padding:6px}
  .turn-banner{grid-row:1;min-height:36px;padding:5px 8px;font-size:9px}
  .player-mat{grid-row:2;height:106px;overflow:hidden;grid-template-columns:44px minmax(0,1fr) 112px;gap:5px;padding:5px}
  .self-portrait{width:44px;min-height:64px}.self-info h2{font-size:10px}.self-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:7px}.self-vitals{margin:3px 0}.bullet{width:6px;height:11px}.equip-tag{font-size:6px;padding:1px 3px}.range-guide{margin-top:2px;padding:2px 4px}.range-guide b{font-size:7px}.range-guide span{display:none}
  .identity{grid-column:3;grid-row:1;padding:3px 4px;border-top:0;border-left:1px solid #d3b16a44;align-self:stretch;display:block}.identity>span:first-child{display:block}.identity>strong{display:block;margin:2px 0;font-size:9px}.identity>span:last-of-type{display:none}.team-guide{display:block;padding:3px 4px}.team-guide b,.team-guide span{display:block;font-size:7px;line-height:1.35}.team-guide small{display:none}
  .hand-wrap{grid-row:3;align-self:end}.hand-header{min-height:20px;margin:0}.hand{height:139px;min-height:139px}.hand .game-card{top:7px;min-height:125px}.card-icon{height:42px}.end-turn{grid-row:3;width:78px;min-height:56px;margin-bottom:6px}.hand-guidance{display:none}
}

@media(orientation:landscape) and (max-height:600px){
  html,body,.app-shell{height:100%;overflow:hidden}.topbar{height:52px;min-height:52px;padding:4px 10px}.brand-main{font-size:20px}.brand-kicker{font-size:7px}.icon-btn{width:38px;min-height:38px}
  .game-board{height:calc(100dvh - 52px);min-height:0;overflow:hidden;padding:4px 6px 5px;gap:5px;display:grid;grid-template-columns:40% 60%;grid-template-rows:142px minmax(0,1fr)}
  .opponents{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,68px);gap:4px;overflow:visible;padding:0}
  .opponent{width:auto;min-width:0;min-height:68px;height:68px;display:grid;grid-template-columns:28px minmax(0,1fr);border-radius:5px}.opponent .portrait{width:28px;min-height:68px}.opponent-body{gap:1px;padding:3px}.opponent-name{font-size:7px}.character-name{display:none}.opponent-stats{font-size:6px}.relation-chip,.distance-chip{font-size:5px;padding:1px 2px}.distance-chip small,.opponent-equipment{display:none}.opponent.current .opponent-body{padding-top:13px}.opponent.current::before{font-size:5px;padding:1px 2px}.role-chip{min-width:16px;min-height:16px;font-size:6px}
  .table-center{grid-column:2;grid-row:1;width:auto;height:142px;min-height:0;align-self:stretch;grid-template-columns:52px 1fr 52px;grid-template-rows:1fr 30px;padding:5px}.pile{width:52px;min-height:70px}.table-mark span{font-size:15px}.log-peek{min-height:28px;font-size:7px}.range-summary strong{font-size:7px}.range-summary span{font-size:5px}.action-stage{inset:auto 5px 34px}.effect-stage{min-height:128px}
  .player-zone{grid-column:1/-1;grid-row:2;min-height:0;height:auto;overflow:hidden;display:grid;grid-template-columns:205px minmax(0,1fr) 76px;grid-template-rows:29px minmax(0,1fr);gap:4px;padding:5px}
  .turn-banner{grid-column:1/-1;grid-row:1;min-height:29px;padding:4px 7px;font-size:7px}.player-mat{grid-column:1;grid-row:2;height:100%;min-height:0;overflow:hidden;grid-template-columns:38px minmax(0,1fr) 72px;gap:3px;padding:3px}.self-portrait{width:38px;min-height:52px}.self-info h2{font-size:8px}.self-info p{font-size:6px;line-height:1.25}.self-vitals{margin:2px 0}.bullet{width:5px;height:9px}.equip-tag{font-size:5px;padding:1px 2px}.range-guide{margin-top:1px;padding:2px}.range-guide b{font-size:6px}.range-guide span{display:none}.identity{grid-column:3;grid-row:1;padding:2px;border-top:0;border-left:1px solid #d3b16a44;display:block}.identity>span:first-child,.identity>strong{display:block;font-size:6px}.identity>span:last-of-type{display:none}.team-guide{display:block;padding:2px}.team-guide b,.team-guide span{display:block;font-size:5px}.team-guide small{display:none}
  .hand-wrap{grid-column:2;grid-row:2;min-width:0;overflow:hidden}.hand-header{min-height:12px;margin:0;font-size:7px}.hand{height:108px;min-height:0;display:flex;gap:3px;overflow-x:auto;overflow-y:visible;padding:5px 1px}.game-card{position:relative;left:auto;top:auto;flex:1 1 0;width:auto;min-width:0;min-height:98px;transform:none}.card-name{font-size:7px;min-height:12px}.card-icon{height:34px}.card-help{font-size:5px}.card-corner{font-size:6px}.card-lock{font-size:5px;inset:auto 2px 17px}.hand-guidance{display:none}.end-turn{grid-column:3;grid-row:2;width:76px;min-height:48px;align-self:end;margin-bottom:4px;font-size:8px}
}
.card-lock{position:absolute;z-index:4;inset:auto 3px 25px;padding:3px;border-radius:3px;background:#2c231dde;color:#ffe6b3;font-size:7px;font-weight:900;line-height:1.3;text-align:center}.card-lock.discard-label{background:#9a3d2e;color:#fff1cf}.game-card.discard-ready{filter:none!important;border-color:#f0c66f;box-shadow:0 0 0 2px #e7b95d,0 8px 18px #0008}.game-card.discard-ready:hover{transform:translateY(-8px)}.end-turn.needs-discard{border-color:#ffe096;background:linear-gradient(#9b642d,#74401f);box-shadow:0 0 0 2px #e8bd5b55,0 4px #381712;color:#fff0bd}
.range-summary{grid-column:2;grid-row:1;align-self:end;justify-self:center;display:grid;gap:1px;padding:4px 7px;border:1px solid #cbaa6555;border-radius:5px;background:#14271fdb;text-align:center}.range-summary strong{color:#f0cd73;font-size:9px}.range-summary span{color:#d1c29f;font-size:7px}.range-lines{display:none}

/* Desktop: a single-screen oval table. Seats encode circular distance spatially. */
@media(min-width:1000px) and (min-height:700px){
  html,body,.app-shell{height:100%;overflow:hidden}.topbar{height:62px}.game-board{position:relative;display:block;height:calc(100dvh - 62px);min-height:0;overflow:hidden;padding:0;background-position:center}
  .opponents{position:absolute;z-index:6;inset:0;display:block;overflow:visible;padding:0;pointer-events:none}
  .opponent{position:absolute;left:var(--seat-x);top:var(--seat-y);width:172px;height:126px;min-height:0;transform:translate(-50%,-50%);pointer-events:auto;grid-template-columns:58px minmax(0,1fr)}
  .opponent .portrait{width:58px}.opponent.current{transform:translate(-50%,-50%) scale(1.04)}
  .table-center{position:absolute;z-index:3;left:50%;top:34%;transform:translate(-50%,-50%);width:min(510px,38vw);height:250px;min-height:0;grid-template-columns:82px 1fr 82px;border-color:#d4b16c66;background:#0a1d16ad}
  .pile{width:82px;min-height:112px}.table-mark span{font-size:30px}.range-summary{padding:7px 12px}.range-summary strong{font-size:12px}.range-summary span{font-size:9px}
  .player-zone{position:absolute;z-index:7;left:50%;bottom:10px;transform:translateX(-50%);width:min(940px,76vw);height:254px;display:grid;grid-template-columns:265px minmax(0,1fr) 112px;grid-template-rows:38px 1fr;gap:8px;padding:9px}
  .turn-banner{grid-column:1/-1;grid-row:1;min-height:38px}.player-mat{grid-column:1;grid-row:2;align-self:stretch;overflow:hidden}.hand-wrap{grid-column:2;grid-row:2;overflow:hidden}.end-turn{grid-column:3;grid-row:2;width:112px;min-height:70px;align-self:end}.hand{height:176px;min-height:0;padding-top:13px}.game-card{flex-basis:96px;min-height:150px}.hand-guidance{display:none}
  .range-lines{position:absolute;z-index:4;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}.range-lines .range-arc-group{opacity:0}.range-lines:not(.leaving) .range-arc-group{animation:rangeGroupIn .3s ease-out forwards;animation-delay:var(--delay,0ms)}.range-lines.leaving .range-arc-group{animation:rangeGroupOut .14s ease-in forwards}.range-lines .range-route-backdrop,.range-lines .range-arc{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.range-lines .range-route-backdrop{stroke:#050705c4;stroke-width:5;opacity:.42}.range-lines .range-arc{stroke-width:1.9;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px #f2ce6855)}.range-lines:not(.leaving) .range-arc{animation:rangeArcDraw .3s ease-out forwards;animation-delay:var(--delay,0ms)}.range-lines .range-reticle-dot{fill:#fff0a6}.range-lines .range-reticle-ring{fill:#14271fe6;stroke:#ffe58d;stroke-width:2}.range-lines:not(.leaving) .range-reticle-pop{transform-box:fill-box;transform-origin:center;animation:rangeReticlePop .25s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--delay,0ms) + 80ms)}@keyframes rangeGroupIn{from{opacity:0}to{opacity:1}}@keyframes rangeGroupOut{from{opacity:1}to{opacity:0}}@keyframes rangeArcDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes rangeReticlePop{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:1}}.game-board.is-aiming .opponent:not(.targetable):not(.eliminated){opacity:.55;filter:saturate(.55)}.game-board.is-aiming .opponent:not(.targetable) .distance-chip{opacity:.4}.game-board.is-aiming .opponent.targetable .distance-chip{opacity:1}
}

@media(max-width:699px){
  .hand{position:relative;height:154px;min-height:154px;display:block;overflow:visible;padding:10px 0 0}
  .hand .game-card{position:absolute;left:calc((100% - 88px) * var(--card-spread));top:9px;width:88px;min-height:136px;z-index:calc(10 + var(--card-index));transform:rotate(calc((var(--card-spread) - .5) * 7deg));transform-origin:50% 115%}
  .hand .game-card:hover:not(:disabled),.hand .game-card:focus-visible:not(:disabled),.hand .game-card.selected,.hand .game-card.previewing{z-index:40;transform:translateY(-13px) rotate(0) scale(1.04)}
  .hand .game-card.defense-ready{z-index:45;transform:translateY(-15px) rotate(0)}
  .hand .empty-hand{position:absolute;inset:0;display:grid;place-items:center}
}

/* ── 桌機自適應縮放系統（2026-09-06）──────────────────────────────
   原本桌機版所有尺寸都是寫死 px，1280x720 到 2560x1440 元件大小完全不變，
   造成兩個症狀：小視窗把玩家區內容裁掉 21px/20px、大視窗畫面空曠到要縮到 90% 才舒服。
   改法：定義版面單位 --u，所有盒子尺寸都用它的倍數表示，字級跟著長但只跟 30%。

   --u 錨點 1u=16px @ 1440x900；下限 14px（對應本斷點的最低支援 1000x700），
   上限 22px（極端長寬比的保險絲）。寬度那一項用 18.65px 封頂，對齊 .game-board
   的 max-width:1680px，否則超寬螢幕會依全視窗寬繼續放大、跟被封頂的畫面盒子對不上。
   （設計規格原本建議 container query 單位，但 --u 是宣告在 .game-board 上、
   而容器無法查詢自己，cqw/cqh 會退回視窗解析，所以改用等效的視窗公式。）*/
@media(min-width:1000px) and (min-height:700px){
  .game-board{
    max-width:1680px;
    --u:clamp(14px, min(1.11vw, 18.65px, calc(0.019 * (100dvh - 62px))), 22px);
  }

  .opponent{width:calc(11 * var(--u));height:calc(8 * var(--u));grid-template-columns:calc(3.625 * var(--u)) minmax(0,1fr)}
  .opponent .portrait{width:calc(3.625 * var(--u))}
  .opponent-name{font-size:calc(8.4px + 0.225 * var(--u))}
  .character-name{font-size:calc(7.0px + 0.1875 * var(--u))}
  .opponent-stats,.relation-chip,.distance-chip{font-size:calc(6.3px + 0.16875 * var(--u))}
  .distance-chip small{font-size:calc(5.6px + 0.15 * var(--u))}
  .opponent-equip,.no-equipment{font-size:calc(5.6px + 0.15 * var(--u))}

  .table-center{width:calc(32 * var(--u));height:calc(16 * var(--u));grid-template-columns:calc(5.125 * var(--u)) 1fr calc(5.125 * var(--u))}
  .pile{width:calc(5.125 * var(--u));min-height:calc(7 * var(--u))}
  .table-mark span{font-size:calc(21.0px + 0.5625 * var(--u))}
  .range-summary strong{font-size:calc(8.4px + 0.225 * var(--u))}
  .range-summary span{font-size:calc(6.3px + 0.16875 * var(--u))}

  .player-zone{
    width:calc(59 * var(--u));
    height:calc(190px + 5.5 * var(--u));
    padding:calc(0.5 * var(--u));
    gap:calc(0.5 * var(--u));
    grid-template-columns:calc(16.5 * var(--u)) minmax(0,1fr) calc(7 * var(--u));
    grid-template-rows:calc(2.375 * var(--u)) 1fr;
  }
  .turn-banner{min-height:calc(2.375 * var(--u));font-size:calc(7.7px + 0.20625 * var(--u))}
  .end-turn{width:calc(7 * var(--u));min-height:calc(4.375 * var(--u))}

  /* 手牌區不再自己裁一次：.hand 本身已有橫向捲動，外層再 overflow:hidden 只會
     把卡片下緣與花色角標切掉，且擋住 hover 抬升動畫。*/
  .hand-wrap{overflow:visible}
  .hand{height:calc(11 * var(--u));padding-top:calc(0.8125 * var(--u))}
  .game-card{flex-basis:calc(6 * var(--u));min-height:calc(9.375 * var(--u))}
  .card-name{font-size:calc(7.0px + 0.1875 * var(--u))}
  .card-help{font-size:calc(5.6px + 0.15 * var(--u))}
  .card-corner{font-size:calc(6.3px + 0.16875 * var(--u))}

  .self-portrait{width:calc(3.375 * var(--u));min-height:calc(4.75 * var(--u))}
  .self-info h2{font-size:calc(9.1px + 0.24375 * var(--u))}
  .self-info p{font-size:calc(6.3px + 0.16875 * var(--u))}
  .equip-tag{font-size:calc(5.6px + 0.15 * var(--u))}
  .range-guide b{font-size:calc(6.3px + 0.16875 * var(--u))}
  .range-guide span{font-size:calc(5.6px + 0.15 * var(--u))}
  .identity>span:first-child{font-size:calc(5.6px + 0.15 * var(--u))}
  .identity>strong{font-size:calc(7.7px + 0.20625 * var(--u))}
  .identity>span:last-of-type{font-size:calc(5.6px + 0.15 * var(--u))}
  .team-guide b,.team-guide span{font-size:calc(5.6px + 0.15 * var(--u))}
  .team-guide small{font-size:calc(4.9px + 0.13125 * var(--u))}


  /* 玩家墊內部間距同步縮放：盒子縮了但內距沒縮的話，小螢幕會擠不下 */
  .self-vitals{margin:calc(0.3 * var(--u)) 0;gap:calc(0.19 * var(--u))}
  .range-guide{margin-top:calc(0.25 * var(--u));padding:calc(0.25 * var(--u)) calc(0.31 * var(--u))}
  .identity{padding:calc(0.375 * var(--u)) calc(0.44 * var(--u));gap:calc(0.125 * var(--u)) calc(0.44 * var(--u))}
  .team-guide{padding:calc(0.25 * var(--u)) calc(0.375 * var(--u));gap:calc(0.125 * var(--u)) calc(0.375 * var(--u))}
  .equip-tag{padding:calc(0.125 * var(--u)) calc(0.31 * var(--u))}
  /* 安全網：角色能力與陣營備註的字數會隨角色/身分浮動，限制行數避免
     某個特別長的組合又把容器撐破；被截斷時滑鼠停留可看全文。*/
  .self-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .team-guide small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}


/* ── 自訂玩家名字（開局設定畫面）─────────────────────────
   沿用 .segmented span 既有的紙面配色與圓角，不新增第二套表單語言。*/
.name-input,.rival-grid input{
  width:100%;min-height:38px;padding:6px 9px;border:1px solid #927450;border-radius:5px;
  background:#f7ecd4;color:#4a3420;font-family:inherit;font-size:12px;
}
.name-input::placeholder,.rival-grid input::placeholder{color:#a38a68}
.name-input:focus-visible,.rival-grid input:focus-visible{outline:2px solid #315244;outline-offset:1px;border-color:#315244}
.self-alias{display:block;margin-top:1px;color:#d8c49a;font-size:9px;font-weight:500;letter-spacing:.02em;overflow-wrap:anywhere}
.rival-names{margin-top:9px}
.rival-names summary{
  display:inline-block;padding:3px 8px;border:1px solid #92745077;border-radius:999px;
  color:#6b5136;font-size:10px;font-weight:900;cursor:pointer;list-style:none;
}
.rival-names summary::-webkit-details-marker{display:none}
.rival-names summary::before{content:'＋ ';font-weight:900}
.rival-names[open] summary::before{content:'－ '}
.rival-names summary:hover{background:#e7d6b4}
.rival-names summary:focus-visible{outline:2px solid #315244;outline-offset:1px}
.rival-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.rival-grid label{display:grid;gap:3px;min-width:0}
.rival-grid label span{color:#6b5136;font-size:9px;font-weight:900}
.rival-grid input{min-height:32px;font-size:11px}
.rival-hint{margin:8px 0 0;color:#7a6244;font-size:9px;line-height:1.5;text-align:left}
@media(max-width:420px){.rival-grid{grid-template-columns:1fr}}


/* ── 規則頁的角色與特殊能力說明 ─────────────────────────
   沿用 .legend-card 既有的紙面卡片語言，不新增第二套配色。*/
.ability-guide{margin-bottom:14px}
.timing-abilities{display:grid;gap:5px;margin:0 0 12px;padding:0;list-style:none}
.timing-abilities li{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:baseline;
  padding:5px 8px;border-left:3px solid #d5aa59;border-radius:0 4px 4px 0;background:#efe0c0;
}
.timing-abilities b{color:#6d4f2c;font-size:10px;font-weight:900}
.timing-abilities span{color:#4d3a26;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.character-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
.legend-character{
  display:grid;gap:3px;padding:7px 9px;border:1px solid #c2a271;border-radius:6px;
  background:#f7ecd4;color:var(--paper-ink);
}
.legend-character-head{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:baseline;justify-content:space-between}
.legend-character strong{font-size:11px;overflow-wrap:anywhere}
.legend-hp{
  flex:none;padding:1px 6px;border-radius:999px;background:#8f3027;color:#ffeccb;
  font-size:9px;font-weight:900;white-space:nowrap;
}
.legend-character>span{color:#5b4530;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.legend-abilities{display:grid;gap:3px;margin:6px 0 0;padding:6px 0 0;border-top:1px dashed #b2925f88;list-style:none}
.legend-abilities li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:baseline}
.legend-abilities b{color:#8f3027;font-size:9px;font-weight:900;white-space:nowrap}
.legend-abilities span{color:#6b5238;font-size:9px;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:420px){
  .timing-abilities li{grid-template-columns:1fr;gap:2px}
  .character-legend{grid-template-columns:1fr}
}


/* ── 開局角色選擇：自製 listbox 取代原生下拉 ─────────────────
   原生 option 無法換行或分層，名字＋完整能力擠一行最長 28 字，讀不了。
   清單只放名字＋生命＋單行能力預覽，完整敘述唯一來源是上方那張大卡片。*/
.character-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;font-weight:900;color:var(--ink);text-align:left}
.character-list-current b{color:var(--range-accent,#ffe58d)}
.character-list{
  list-style:none;margin:0;padding:6px;display:grid;gap:6px;
  max-height:clamp(120px,calc(100dvh - 450px),340px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  border:1px solid #d7b464;border-radius:8px;background:#1d110ed9;scrollbar-width:thin;
}
.character-list:focus-visible{outline:3px solid var(--range-accent,#ffe58d);outline-offset:2px}
.character-option{
  display:grid;grid-template-columns:5px 1fr;align-items:stretch;gap:10px;min-height:44px;
  padding:8px 10px;border:1px solid transparent;border-radius:8px;background:#241a12;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.character-option:hover{background:#2f2116}
.character-option[aria-selected='true']{border-color:var(--range-accent,#ffe58d);background:#3a2a17;box-shadow:inset 0 0 0 1px #ffe58d55}
.character-option[aria-selected='true'] .character-option-name{color:#ffe9b0}
.character-option-swatch{align-self:stretch;width:5px;margin:2px 0;border-radius:999px;background:var(--tone,#8d7049)}
.character-option-body{min-width:0;display:grid;gap:2px;text-align:left}
.character-option-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.character-option-name{overflow-wrap:anywhere;color:var(--ink);font-size:13px;font-weight:900;line-height:1.3}
.character-option-hp{flex:0 0 auto;font-size:11px;letter-spacing:1px;white-space:nowrap}
.character-option-hp span{color:#ff8a75}
.character-option-ability{overflow:hidden;color:var(--muted);font-size:11.5px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.character-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;padding-top:8px;border-top:1px solid #4a3620}

@media(prefers-reduced-motion:reduce){.range-lines .range-arc-group,.range-lines .range-arc,.range-lines .range-reticle-pop{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}.game-board.is-aiming .opponent:not(.targetable):not(.eliminated){transition:none}}

/* ── 可讀性與效果分類（2026-09-06）────────────────────────────── */
.game-card{-webkit-user-select:none;user-select:none}
.game-card:focus-visible,.opponent:focus-visible{outline:3px solid #fff0a0;outline-offset:3px}
.card-duration,.duration-badge{width:max-content;max-width:100%;display:inline-flex;align-items:center;justify-content:center;padding:2px 5px;border:1px solid currentColor;border-radius:999px;font-size:9px;font-weight:900;line-height:1.2;white-space:nowrap}
.card-duration{align-self:flex-start;margin:-1px 0 1px}
.card-duration.instant,.duration-badge.instant{background:#f2d0bb;color:#883323}
.card-duration.persistent,.duration-badge.persistent{background:#cfe1c0;color:#315d35}
.card-duration.delayed,.duration-badge.delayed{background:#ddd1e4;color:#5d4167}
.cards-count{min-height:18px;padding:1px 4px;border:1px solid #80643f55;border-radius:4px;background:#f5e4bf}
.cards-count b{font-size:inherit;line-height:1;white-space:nowrap}
.mini-cards{position:relative;width:14px;height:13px;display:inline-block;flex:none}
.mini-cards::before,.mini-cards::after{content:'';position:absolute;width:8px;height:10px;border:1px solid #5c432d;border-radius:2px;background:#fff0ca}
.mini-cards::before{left:1px;top:0;transform:rotate(-8deg)}
.mini-cards::after{left:4px;top:2px;box-shadow:2px 1px 0 #d8b878}
.opponent-equipment{min-width:0;flex-wrap:nowrap;overflow:hidden}
.opponent-equip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opponent-equip-more{flex:none;padding:1px 3px;border-radius:3px;background:#80663f26;font-size:8px;font-weight:900}
.opponent-detail-hint{color:#775e41;font-size:8px;font-weight:800;line-height:1.2}
.opponent.current .opponent-detail-hint,.opponent.targetable .opponent-detail-hint{display:none}

.opponent-modal{width:min(calc(100% - 20px),580px)}
.opponent-detail-hero{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;margin-bottom:16px;padding:12px;border-radius:8px;background:#dfc89c}
.opponent-detail-portrait{width:92px;min-height:116px;border:2px solid #85643c;border-radius:6px}
.detail-role{display:inline-flex;padding:4px 8px;border-radius:999px;background:#3f3125;color:#f5dfb5;font-size:12px;font-weight:900}
.opponent-detail-hero p{margin:8px 0 0;font-size:14px!important;font-weight:800}
.opponent-detail-section{margin-top:12px;padding:12px;border-left:4px solid #9a7040;background:#f8e8c7}
.opponent-detail-section h3{margin:0 0 7px;font-size:16px}
.opponent-detail-ability{display:grid;gap:4px;margin:0!important}
.opponent-detail-ability strong{color:#893a2d;font-size:15px}
.opponent-detail-ability span{font-size:14px;line-height:1.65}
.opponent-detail-effects{display:grid;gap:8px}
.effect-detail{display:grid;grid-template-columns:max-content 1fr;gap:4px 8px;align-items:center;padding:9px;border:1px solid #9c7d5144;border-radius:6px;background:#fff1d2}
.effect-detail strong{font-size:15px}.effect-detail p{grid-column:1/-1;margin:0!important;font-size:14px!important}
.empty-effect{margin:0!important}
.timing-guide p{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.legend-card{position:relative}.legend-card .duration-badge{display:inline-flex;margin:0 0 5px;font-size:9px}.legend-card strong{font-size:13px}.legend-card>span:last-child{font-size:12px;line-height:1.65}

.card-detail-modal{width:min(calc(100% - 20px),560px)}.card-detail-modal[open]{position:fixed;z-index:58;inset:auto auto auto 50%;margin:0;transform:translateX(-50%);overflow:auto;box-shadow:0 18px 48px #000c}.game-card.previewing{z-index:10;transform:translateY(-9px);border-color:#fff0a5;box-shadow:0 0 0 3px #f0c85d,0 10px 24px #0009}
.card-detail-layout{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center}
.card-detail-preview .game-card{width:132px;min-height:188px;margin:auto;pointer-events:none;transform:none!important;box-shadow:3px 5px #493522,0 10px 22px #0005}
.card-detail-preview .card-icon{height:62px}.card-detail-preview .card-name{font-size:15px}.card-detail-preview .card-help{font-size:11px}.card-detail-preview .card-duration{font-size:9px}
.card-detail-copy h2{margin:7px 0 15px;font-size:27px}.card-detail-copy h3{margin:0 0 5px;font-size:14px}.card-detail-copy p{margin:0;color:#392619;font-size:16px;line-height:1.7}
.card-detail-notice{margin:16px 0 0!important;padding:11px 12px;border-left:4px solid #a57836;background:#e2cca0;color:#49331f!important;font-weight:800}
.card-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.card-detail-actions button{min-height:50px}
.primary-btn.danger-action{background:linear-gradient(#a74936,#752b23);color:#fff1cf}

.turn-notice-modal{text-align:center;width:min(calc(100% - 20px),500px);border-color:#c66b51}
.turn-notice-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:#8d3026;color:#fff2d0;font-size:12px;font-weight:900;letter-spacing:.06em}
.turn-notice-modal h2{margin:12px 0 15px;font-size:28px;color:#762d24}
.turn-notice-result{display:grid;gap:6px;place-items:center;padding:14px;border:2px solid #9b7140;border-radius:8px;background:#e5c992}
.turn-notice-result span{font-size:12px;font-weight:900}.turn-notice-check{font:900 34px Georgia,serif}.turn-notice-check.red{color:#a52e2a}
.turn-notice-modal>p{font-size:16px;line-height:1.7}.turn-notice-consequence{padding:11px;border-left:4px solid #a43c30;background:#ead0a6;color:#542b23!important;font-weight:900;text-align:left}
.turn-notice-modal .primary-btn{width:100%;min-height:52px;margin-top:8px}

/* 一般文字先提升；壓縮版型再用下方斷點微調。 */
.turn-banner{font-size:13px}
.self-info h2{font-size:15px}.self-info p{font-size:11px}.equip-tag{font-size:10px}.range-guide b{font-size:11px}.range-guide span{font-size:10px}
.identity>span:first-child{font-size:10px}.identity>strong{font-size:13px}.identity>span:last-of-type{font-size:10px}.team-guide b,.team-guide span{font-size:10px}.team-guide small{font-size:9px}
.hand-header{font-size:12px}.text-btn{min-height:40px;font-size:11px}.card-name{font-size:12px}.card-help{font-size:10px;line-height:1.5}.card-corner{font-size:10px}.hand-guidance{font-size:10px}.end-turn{font-size:13px}
.modal p{font-size:14px}.rules-content h3{font-size:16px}.onboarding-steps li{font-size:13px}.onboarding-team span,.onboarding-team small{font-size:13px}.onboarding-goal p,.onboarding-ability p{font-size:14px}

@media(max-width:699px){
  .hand{touch-action:pan-x;overscroll-behavior-x:contain}
  .opponent-body{gap:2px}
  .opponent-name{font-size:10.5px}.character-name{font-size:8.5px}.opponent-stats{gap:4px;font-size:9px}.relation-chip,.distance-chip{font-size:8px}.opponent-equip,.no-equipment,.opponent-equip-more{font-size:7px}.opponent-detail-hint{font-size:7px}
  .cards-count{padding:1px 3px}.mini-cards{width:12px;transform:scale(.88);transform-origin:left center}
  .turn-banner{font-size:10.5px}
  .self-info h2{font-size:12px}.self-info p{font-size:8.5px}.equip-tag{font-size:7.5px}.range-guide b{font-size:8.5px}
  .identity>span:first-child{font-size:7.5px}.identity>strong{font-size:10.5px}.team-guide b,.team-guide span{font-size:8px}
  .hand-header{font-size:11px}.text-btn{min-height:32px;font-size:10px}.card-name{font-size:11.5px}.card-duration{font-size:7.5px;padding:1px 4px}.card-help{font-size:8.5px}.card-corner{font-size:9px}.end-turn{font-size:11px}
  .opponent-detail-hero{grid-template-columns:76px 1fr;padding:10px}.opponent-detail-portrait{width:76px;min-height:98px}
  .card-detail-modal[open]{inset:auto auto auto 50%;margin:0;width:calc(100% - 12px);padding:16px;transform:translateX(-50%)}
  .card-detail-layout{grid-template-columns:110px minmax(0,1fr);gap:13px}.card-detail-preview .game-card{width:110px;min-height:158px}.card-detail-preview .card-icon{height:48px}.card-detail-preview .card-name{font-size:13px}.card-detail-preview .card-help{font-size:9px}
  .card-detail-copy h2{font-size:23px}.card-detail-copy h3{font-size:13px}.card-detail-copy p{font-size:15px}.card-detail-notice{font-size:14px!important}.card-detail-actions{grid-template-columns:1fr;gap:8px}.card-detail-actions button{min-height:48px}
  .turn-notice-modal h2{font-size:25px}.turn-notice-modal>p{font-size:15px}
}

@media(orientation:landscape) and (max-height:600px){
  .opponent-name{font-size:9.5px}.opponent-stats{font-size:7.5px}.relation-chip,.distance-chip{font-size:6.8px}.opponent-detail-hint{display:none}
  .turn-banner{font-size:9px}.self-info h2{font-size:10px}.self-info p{font-size:7.5px}.equip-tag{font-size:6.5px}.range-guide b{font-size:7.5px}.identity>span:first-child,.identity>strong{font-size:7.5px}.team-guide b,.team-guide span{font-size:6.5px}
  .hand-header{font-size:8.5px}.hand .game-card{flex:0 0 78px;width:78px}.card-name{font-size:9px}.card-duration{font-size:6.5px;padding:1px 2px}.card-help{font-size:7px;line-height:1.35}.card-corner{font-size:7.5px}
  .card-detail-modal[open]{inset:auto auto auto 50%;margin:0;width:min(calc(100% - 8px),650px);padding:10px;transform:translateX(-50%)}.card-detail-layout{grid-template-columns:86px 1fr;gap:10px}.card-detail-preview .game-card{width:82px;min-height:108px}.card-detail-preview .card-icon{height:32px}.card-detail-preview .card-help{font-size:7px}.card-detail-copy h2{margin:3px 0 5px;font-size:18px}.card-detail-copy h3{margin:0;font-size:11px}.card-detail-copy p{font-size:12px;line-height:1.45}.card-detail-notice{margin-top:7px!important;padding:6px;font-size:11px!important}.card-detail-actions{grid-template-columns:1fr 1fr;margin-top:7px}.card-detail-actions button{min-height:42px}.turn-notice-modal h2{font-size:21px}.turn-notice-result{padding:7px}.turn-notice-check{font-size:25px}.turn-notice-modal>p{font-size:12px}
}

@media(min-width:1000px) and (min-height:700px){
  .player-zone{height:calc(198px + 5.5 * var(--u))}
  .player-mat{overflow:visible}
  .hand{overflow-y:hidden}
  .opponent-name{font-size:calc(9.3px + 0.23 * var(--u))}.character-name{font-size:calc(7.8px + 0.19 * var(--u))}.opponent-stats,.relation-chip,.distance-chip{font-size:calc(7.1px + 0.18 * var(--u))}.distance-chip small{font-size:calc(6.4px + 0.16 * var(--u))}.opponent-equip,.no-equipment,.opponent-equip-more{font-size:calc(6.2px + 0.16 * var(--u))}.opponent-detail-hint{font-size:calc(5.9px + 0.15 * var(--u))}
  .turn-banner{font-size:calc(9px + 0.22 * var(--u))}
  .card-name{font-size:calc(8.5px + 0.22 * var(--u))}.card-duration{font-size:calc(6.2px + 0.15 * var(--u))}.card-help{font-size:calc(7.2px + 0.17 * var(--u))}.card-corner{font-size:calc(7.2px + 0.17 * var(--u))}
  .self-info h2{font-size:calc(10px + 0.3 * var(--u))}.self-info p{font-size:calc(7.5px + 0.19 * var(--u))}.equip-tag{font-size:calc(6.8px + 0.17 * var(--u))}.range-guide b{font-size:calc(7.4px + 0.19 * var(--u))}.range-guide span{font-size:calc(6.8px + 0.17 * var(--u))}
  .identity>span:first-child{font-size:calc(6.8px + 0.17 * var(--u))}.identity>strong{font-size:calc(8.6px + 0.22 * var(--u))}.identity>span:last-of-type{font-size:calc(6.8px + 0.17 * var(--u))}.team-guide b,.team-guide span{font-size:calc(6.8px + 0.17 * var(--u))}.team-guide small{font-size:calc(6.1px + 0.15 * var(--u))}
}

/* Press-and-slide hand preview plus non-blocking opponent details. */
.hand{touch-action:pan-y}
.hand.is-scrubbing{cursor:grabbing;scroll-snap-type:none;user-select:none}
.hand.is-scrubbing .game-card{transition:none}
.hand.is-scrubbing .game-card:not(.previewing):not(.selected):not(.defense-ready){z-index:auto;transform:none}
.opponent-modal[open]{position:fixed;z-index:57;margin:0;box-shadow:0 18px 48px #000c}
.opponent.previewing{border-color:#fff0a5;box-shadow:0 0 0 3px #f0c85d,0 10px 24px #0009}

/* Clear, seat-linked card resolution choreography. */
.action-stage{z-index:18;min-height:54px;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-areas:"kicker card target" "actor card target";gap:2px 9px;padding:8px 10px;border-width:2px;background:linear-gradient(135deg,#17110df5,#2a1b11f2);box-shadow:0 10px 28px #000b,0 0 0 1px #e3bd6c33}
.action-stage.is-playing{animation:actionStage var(--action-duration,1650ms) ease both}.action-kicker{grid-area:kicker;display:block;color:#d4ad62;font-size:7px;font-weight:900;letter-spacing:.12em}.action-stage>strong{grid-area:actor;font-size:12px}.action-stage #action-card{grid-area:card;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;border:2px solid #e3c47e;border-radius:5px;font-size:12px}.action-stage #action-card strong{font-size:13px}.action-stage #action-card span{font-size:16px}.action-stage #action-target{grid-area:target;align-self:center;max-width:108px;margin:0;color:#f2d79f;font-size:9px;font-weight:900;line-height:1.35;text-align:right}
.effect-focus{z-index:46!important;animation:effectSeatFocus .85s ease-in-out infinite alternate!important;filter:saturate(1.2) brightness(1.08)}
.defense-steps{display:grid;gap:2px;margin:2px 0}.defense-steps>span{padding:2px 4px;border-left:3px solid #6f766d;background:#ffffff0c;color:#b8b3a4;font-size:6px;font-weight:900;line-height:1.35}.defense-steps>span.done{border-left-color:#77976d;color:#c8dcbd}.defense-steps>span.active{border-left-color:#f0cb6f;background:#e9bd4720;color:#ffe09a}.defense-steps>span.danger{border-left-color:#e8785c;background:#d54f2f20;color:#ffb49f}
.effect-seat-callout{position:fixed;z-index:98;transform:translate(-50%,calc(-100% - 10px));width:max-content;max-width:min(250px,calc(100vw - 16px));display:grid;gap:2px;padding:7px 9px;border:2px solid #f0cf7d;border-radius:6px;background:#17120ff5;color:#fff0c7;box-shadow:0 8px 24px #000c,0 0 18px #e4b55244;pointer-events:none;text-align:center;animation:seatCallout 2.7s ease both}.effect-seat-callout.below{transform:translate(-50%,10px);animation-name:seatCalloutBelow}.effect-seat-callout strong{color:#ffe28c;font-size:11px;line-height:1.25}.effect-seat-callout small{font-size:8px;font-weight:800;line-height:1.35}.effect-seat-callout[data-kind='dynamite'],.effect-seat-callout[data-kind='jail'],.effect-seat-callout[data-kind='catbalou']{border-color:#ef8063;background:#2a1714f5}.effect-seat-callout[data-kind='dynamite'] strong,.effect-seat-callout[data-kind='jail'] strong,.effect-seat-callout[data-kind='catbalou'] strong{color:#ffb397}
.effect-transfer{position:fixed;z-index:99;width:72px;min-height:92px;display:grid;place-items:center;align-content:center;gap:4px;padding:5px;border:3px double #d7b464;border-radius:6px;background:linear-gradient(145deg,#f6dfae,#cfae73);color:#3b281b;box-shadow:0 12px 28px #000c;pointer-events:none}.effect-transfer>span,.effect-hazard-mark>span{width:48px;height:50px;display:block;background:url('./assets/card-effects-v1.png') 0 100%/400% 300% no-repeat}.effect-transfer>b{font-size:8px;line-height:1.25;text-align:center}.effect-transfer[data-kind='panic']>span,.effect-transfer[data-kind='catbalou']>span{background-position:0 100%}.effect-transfer[data-kind='dynamite']>span{background-position:0 50%}
.effect-hazard-mark{position:fixed;z-index:97;transform:translate(-50%,-50%);width:86px;height:86px;display:grid;place-items:center;align-content:center;gap:2px;border:3px solid #e1bd67;border-radius:50%;background:#17120eea;color:#ffe0a0;box-shadow:0 0 0 7px #f0cc7133,0 0 34px #f1b64b88;pointer-events:none;animation:hazardArrival 2.8s ease both}.effect-hazard-mark>span{width:54px;height:49px}.effect-hazard-mark>b{font-size:10px}.effect-hazard-mark[data-kind='jail']{border-color:#bfc3ca;background:#161b1fea;box-shadow:0 0 0 7px #c5d1da33,0 0 34px #c8d2da66}.effect-hazard-mark[data-kind='jail']>span{background-position:33.333% 50%}.effect-hazard-mark[data-kind='dynamite']>span{background-position:0 50%}.effect-hazard-mark.exploding{width:138px;height:138px;border-color:#ffb04f;background:radial-gradient(circle,#fff4a7 0 6%,#ff9a37 7% 18%,#c83021 19% 35%,#35110ce8 58%);box-shadow:0 0 24px #ffdf78,0 0 64px #ff4b2ccc;animation:hazardExplosion 2.4s ease-out both}.effect-hazard-mark.exploding>span{opacity:.2}.effect-hazard-mark.exploding>b{color:#fff3b3;font-size:17px;text-shadow:0 2px #8f2418}
@keyframes actionStage{0%{opacity:0;transform:translateY(8px) scale(.96)}10%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}@keyframes effectSeatFocus{from{box-shadow:0 0 0 3px #f0cf7777,0 0 14px #e9ba5166}to{box-shadow:0 0 0 7px #ffe399cc,0 0 32px #efb843aa}}@keyframes seatCallout{0%{opacity:0;transform:translate(-50%,calc(-100% + 4px)) scale(.9)}10%,82%{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1)}100%{opacity:0;transform:translate(-50%,calc(-100% - 16px)) scale(.96)}}@keyframes seatCalloutBelow{0%{opacity:0;transform:translate(-50%,-2px) scale(.9)}10%,82%{opacity:1;transform:translate(-50%,10px) scale(1)}100%{opacity:0;transform:translate(-50%,16px) scale(.96)}}@keyframes hazardArrival{0%{opacity:0;transform:translate(-50%,-95%) scale(.45) rotate(-12deg)}18%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-45%) scale(.9)}}@keyframes hazardExplosion{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}38%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}

@media(max-width:699px){
  .hand.is-scrubbing .game-card:not(.previewing):not(.selected):not(.defense-ready){z-index:calc(10 + var(--card-index));transform:rotate(calc((var(--card-spread) - .5) * 7deg))}
  .effect-seat-callout{max-width:min(180px,calc(100vw - 12px));padding:5px 7px}.effect-seat-callout strong{font-size:9px}.effect-seat-callout small{font-size:7px}.effect-hazard-mark{width:66px;height:66px}.effect-hazard-mark>span{width:42px;height:39px}.effect-hazard-mark.exploding{width:104px;height:104px}.defense-steps>span{font-size:5.5px}
}
@media(orientation:landscape) and (max-height:600px){.action-stage{min-height:46px;padding:5px 7px}.action-stage>strong{font-size:9px}.action-stage #action-card{font-size:9px}.action-stage #action-card strong{font-size:10px}.effect-seat-callout{max-width:160px}.effect-hazard-mark{width:58px;height:58px}.effect-hazard-mark>span{width:38px;height:34px}.effect-hazard-mark.exploding{width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.action-stage.is-playing,.effect-focus,.effect-seat-callout,.effect-hazard-mark{animation:none!important}.effect-seat-callout,.effect-seat-callout.below{opacity:1}.effect-hazard-mark{opacity:1}.effect-transfer{transition:none!important}}

/* The draw number is a current pile size, not an exhaustion countdown. */
.draw-pile>em{position:relative;z-index:3;width:max-content;max-width:72px;margin-top:2px;padding:2px 4px;border:1px solid #e4c27488;border-radius:999px;background:#281812e8;color:#ffe2a0;font-size:6px;font-style:normal;font-weight:900;line-height:1.25;text-align:center}.draw-pile.near-shuffle{border-color:#f1cb72;box-shadow:3px 3px #3b2a1c,0 0 18px #e8b95155}.draw-pile.reshuffling .pile-back{animation:pileShuffle 1.4s ease-in-out 2}.shuffle-announcement{position:fixed;z-index:101;transform:translate(-50%,-50%);width:min(290px,calc(100vw - 24px));display:grid;grid-template-columns:72px minmax(0,1fr);gap:3px 10px;align-items:center;padding:12px;border:2px solid #efca78;border-radius:10px;background:linear-gradient(135deg,#17120ff8,#2a1a11f8);color:#fff0c8;box-shadow:0 18px 48px #000d,0 0 32px #eebd5555;pointer-events:none;animation:shuffleAnnouncement 2.8s ease both}.shuffle-announcement>strong{font-size:14px;line-height:1.3}.shuffle-announcement>small{grid-column:2;color:#d8c49c;font-size:9px;font-weight:800;line-height:1.4}.shuffle-cards{grid-row:1/3;position:relative;width:64px;height:72px}.shuffle-cards i{position:absolute;inset:5px 11px;width:42px;height:60px;border:2px solid #e2bd69;border-radius:5px;background:repeating-linear-gradient(45deg,#79372d 0 4px,#4e211c 4px 8px);box-shadow:0 8px 16px #0008}.shuffle-cards i:first-child{animation:shuffleCardLeft 1.2s ease-in-out 2}.shuffle-cards i:last-child{animation:shuffleCardRight 1.2s ease-in-out 2}
@keyframes pileShuffle{0%,100%{transform:none}35%{transform:translateX(-7px) rotate(-4deg)}70%{transform:translateX(7px) rotate(4deg)}}@keyframes shuffleAnnouncement{0%{opacity:0;transform:translate(-50%,-45%) scale(.9)}9%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}}@keyframes shuffleCardLeft{0%,100%{transform:translateX(0) rotate(-5deg)}45%{transform:translateX(-17px) rotate(-13deg)}}@keyframes shuffleCardRight{0%,100%{transform:translateX(0) rotate(5deg)}45%{transform:translateX(17px) rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.draw-pile.reshuffling .pile-back,.shuffle-announcement,.shuffle-cards i{animation:none!important}}

/* Flying cards follow one direct arc; artwork replaces symbolic glyphs. */
.flying-card{gap:4px;padding:5px}.flying-card>strong{max-width:66px;color:#3a271b;font-size:10px;font-weight:900;line-height:1.2;text-align:center}.flying-card .flight-art{width:100%;height:66px;max-width:none;display:block;background:url('./assets/card-effects-v1.png') 0 0/400% 300% no-repeat}.flying-card[data-kind='missed'] .flight-art{background-position:33.333% 0}.flying-card[data-kind='beer'] .flight-art{background-position:66.666% 0}.flying-card[data-kind='barrel'] .flight-art{background-position:100% 0}.flying-card[data-kind='dynamite'] .flight-art{background-position:0 50%}.flying-card[data-kind='jail'] .flight-art{background-position:33.333% 50%}.flying-card[data-kind='mustang'] .flight-art{background-position:66.666% 50%}.flying-card[data-kind='scope'] .flight-art{background-position:100% 50%}.flying-card[data-kind='stagecoach'] .flight-art,.flying-card[data-kind='wellsfargo'] .flight-art,.flying-card[data-kind='generalstore'] .flight-art,.flying-card[data-kind='catbalou'] .flight-art,.flying-card[data-kind='panic'] .flight-art{background-position:0 100%}.flying-card[data-kind='indians'] .flight-art{background-position:33.333% 100%}.flying-card[data-kind='duel'] .flight-art{background-position:66.666% 100%}.flying-card[data-kind='saloon'] .flight-art{background-position:100% 100%}

/* Own-player inspection and clear card movement vocabulary. */
.player-mat[role='button']{cursor:pointer}.player-mat[role='button']:focus-visible,.player-mat.previewing{outline:3px solid #f0cc70;outline-offset:2px;box-shadow:0 0 24px #e8b64d66}.self-detail-hint{display:block;margin-top:3px;color:#f0cf83;font-size:6.5px;font-weight:900;line-height:1.3}.draw-focus{z-index:47!important;box-shadow:0 0 0 4px #9fd4a077,0 0 26px #78c77a88!important}.discard-focus{z-index:47!important;box-shadow:0 0 0 4px #df765f77,0 0 26px #d94d3688!important}.draw-card-flight,.discard-card-flight{position:fixed;z-index:102;transform:translate(-50%,-50%);width:54px;height:76px;padding:5px;border:3px double #e7c46f;border-radius:6px;background:linear-gradient(145deg,#4d211d,#7a382f);box-shadow:0 12px 28px #000c;pointer-events:none}.draw-card-flight>span,.discard-card-flight>span{width:100%;height:100%;display:block;border:1px solid #e9c87b88;border-radius:3px;background:radial-gradient(circle,#d3a856 0 7%,transparent 8%),repeating-conic-gradient(from 45deg,#c99b51 0 8deg,transparent 8deg 18deg)}.draw-card-flight>b,.discard-card-flight>b{position:absolute;right:-9px;top:-10px;min-width:27px;padding:4px;border:2px solid #fff1bc;border-radius:999px;background:#30723d;color:#fff;font-size:11px;text-align:center}.discard-card-flight{border-color:#e8866d;filter:saturate(.78)}.discard-card-flight>b{background:#9e3328}.draw-seat-callout,.discard-seat-callout{position:fixed;z-index:101;transform:translate(-50%,calc(-100% - 10px));width:max-content;max-width:min(245px,calc(100vw - 16px));display:grid;gap:2px;padding:7px 9px;border:2px solid #a9d39e;border-radius:6px;background:#132218f5;color:#e9ffe6;box-shadow:0 8px 24px #000c,0 0 18px #72bc7044;pointer-events:none;text-align:center;animation:seatCallout 2.1s ease both}.draw-seat-callout.below,.discard-seat-callout.below{transform:translate(-50%,10px);animation-name:seatCalloutBelow}.draw-seat-callout strong,.discard-seat-callout strong{color:#c8f3bd;font-size:10px;line-height:1.25}.draw-seat-callout small,.discard-seat-callout small{font-size:7.5px;font-weight:800;line-height:1.35}.discard-seat-callout{border-color:#e6836b;background:#2b1714f5;color:#ffe5de;box-shadow:0 8px 24px #000c,0 0 18px #df5b4444}.discard-seat-callout strong{color:#ffb5a3}

/* Special cards pause the table with a full-screen, actor-led intro. */
.special-intro{position:fixed;z-index:110;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.78fr) minmax(0,1fr);place-items:center;gap:18px;padding:max(30px,7vh) max(18px,6vw);overflow:hidden;background:radial-gradient(circle at center,#5f281fe8 0,#22130ff5 48%,#090706fb 100%);color:#fff0c8;pointer-events:none;animation:specialIntro var(--special-duration,2800ms) ease both}.special-intro::before,.special-intro::after{content:'';position:absolute;inset:-25%;background:repeating-linear-gradient(108deg,transparent 0 38px,#f1be5720 39px 42px);animation:specialStreaks 1.4s linear infinite}.special-intro::after{transform:scaleX(-1);opacity:.55}.special-intro>*{position:relative;z-index:1}.special-combatant{width:min(280px,100%);display:grid;justify-items:center;gap:7px}.cinematic-portrait{position:relative;width:min(27vw,250px);aspect-ratio:3/4;display:block;overflow:hidden;border:4px solid #e8c36f;border-radius:14px;background:#2b1b14;box-shadow:0 20px 50px #000d,0 0 32px #d4923c55}.cinematic-portrait::before{content:'';position:absolute;left:50%;top:var(--portrait-y,-3%);height:212%;aspect-ratio:3/2;background:url('./assets/gunslingers-cute-v2.png') 0 0/100% 100% no-repeat;transform:translateX(var(--portrait-x,-12.5%))}.special-combatant strong{font-size:clamp(18px,3vw,34px);line-height:1.1;text-align:center;text-shadow:0 3px #38130d}.special-combatant small{padding:4px 9px;border:1px solid #e2bd6d;border-radius:999px;background:#28130dcc;font-size:clamp(10px,1.5vw,15px);font-weight:900}.special-title{display:grid;justify-items:center;gap:7px;text-align:center}.special-title>span{color:#e1b85f;font-size:clamp(9px,1.4vw,14px);font-weight:900;letter-spacing:.18em}.special-title>strong{font-size:clamp(25px,5vw,58px);line-height:1;text-shadow:0 4px #6c1d13,0 0 24px #f4a53d99}.special-title>b{font:900 clamp(48px,9vw,104px)/.9 Georgia,serif;color:#ffcf59;text-shadow:0 5px #801f17,0 0 34px #ff9f31}.special-title>small{max-width:240px;font-size:clamp(11px,1.7vw,17px);font-weight:900;line-height:1.4}.special-mass-attack{grid-template-columns:minmax(0,1fr) minmax(180px,1fr)}.special-card-art{width:min(24vw,210px);aspect-ratio:1;display:block;background:url('./assets/card-effects-v1.png') 0 0/400% 300% no-repeat;filter:drop-shadow(0 14px 22px #000b)}.special-intro[data-kind='gatling'] .special-card-art{background-position:0 0}.special-intro[data-kind='indians'] .special-card-art{background-position:33.333% 100%}
/* 武器牌各自使用獨立輪廓，讓射程與裝備不只靠文字辨識。 */
[data-kind='volcanic'] .card-icon,[data-kind='volcanic'] .flight-art,[data-kind='volcanic'] .discard-art,[data-kind='volcanic'] .effect-source-card,[data-kind='volcanic'] .combat-card-art{background-image:url('./assets/weapon-volcanic.svg')!important;background-position:center!important;background-size:contain!important}
[data-kind='schofield'] .card-icon,[data-kind='schofield'] .flight-art,[data-kind='schofield'] .discard-art,[data-kind='schofield'] .effect-source-card,[data-kind='schofield'] .combat-card-art{background-image:url('./assets/weapon-schofield.svg')!important;background-position:center!important;background-size:contain!important}
[data-kind='remington'] .card-icon,[data-kind='remington'] .flight-art,[data-kind='remington'] .discard-art,[data-kind='remington'] .effect-source-card,[data-kind='remington'] .combat-card-art{background-image:url('./assets/weapon-remington.svg')!important;background-position:center!important;background-size:contain!important}
[data-kind='carabine'] .card-icon,[data-kind='carabine'] .flight-art,[data-kind='carabine'] .discard-art,[data-kind='carabine'] .effect-source-card,[data-kind='carabine'] .combat-card-art{background-image:url('./assets/weapon-carabine.svg')!important;background-position:center!important;background-size:contain!important}
[data-kind='winchester'] .card-icon,[data-kind='winchester'] .flight-art,[data-kind='winchester'] .discard-art,[data-kind='winchester'] .effect-source-card,[data-kind='winchester'] .combat-card-art{background-image:url('./assets/weapon-winchester.svg')!important;background-position:center!important;background-size:contain!important}
[data-card='volcanic'] .effect-source-card,[data-card='volcanic'] .combat-card-art{background-image:url('./assets/weapon-volcanic.svg')!important;background-position:center!important;background-size:contain!important}
[data-card='schofield'] .effect-source-card,[data-card='schofield'] .combat-card-art{background-image:url('./assets/weapon-schofield.svg')!important;background-position:center!important;background-size:contain!important}
[data-card='remington'] .effect-source-card,[data-card='remington'] .combat-card-art{background-image:url('./assets/weapon-remington.svg')!important;background-position:center!important;background-size:contain!important}
[data-card='carabine'] .effect-source-card,[data-card='carabine'] .combat-card-art{background-image:url('./assets/weapon-carabine.svg')!important;background-position:center!important;background-size:contain!important}
[data-card='winchester'] .effect-source-card,[data-card='winchester'] .combat-card-art{background-image:url('./assets/weapon-winchester.svg')!important;background-position:center!important;background-size:contain!important}
@keyframes specialIntro{0%{opacity:0;transform:scale(1.08)}9%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}@keyframes specialStreaks{to{transform:translateX(80px)}}
@media(max-width:699px){.self-detail-hint{font-size:5.8px}.draw-seat-callout,.discard-seat-callout{max-width:min(180px,calc(100vw - 12px));padding:5px 7px}.draw-seat-callout strong,.discard-seat-callout strong{font-size:8.5px}.special-intro{gap:8px;padding:44px 10px 70px;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}.special-mass-attack{grid-template-columns:minmax(0,1fr) minmax(130px,1fr)}.cinematic-portrait{width:min(31vw,132px);border-width:3px;border-radius:9px}.special-title{gap:5px}.special-title>strong{font-size:clamp(21px,8vw,34px)}.special-title>b{font-size:clamp(42px,15vw,68px)}.special-card-art{width:min(35vw,145px)}}
@media(max-width:699px){.hand[data-count='1'] .game-card{left:calc(50% - 44px);transform:rotate(0)}.hand[data-count='2'] .game-card{left:calc(50% - 92px + var(--card-index) * 96px);transform:rotate(calc((var(--card-spread) - .5) * 3deg))}.hand[data-count='3'] .game-card{left:calc(50% - 118px + var(--card-index) * 74px);transform:rotate(calc((var(--card-spread) - .5) * 5deg))}.hand[data-count='1'] .game-card:hover:not(:disabled),.hand[data-count='1'] .game-card:focus-visible:not(:disabled),.hand[data-count='1'] .game-card.selected,.hand[data-count='1'] .game-card.previewing,.hand[data-count='2'] .game-card:hover:not(:disabled),.hand[data-count='2'] .game-card:focus-visible:not(:disabled),.hand[data-count='2'] .game-card.selected,.hand[data-count='2'] .game-card.previewing,.hand[data-count='3'] .game-card:hover:not(:disabled),.hand[data-count='3'] .game-card:focus-visible:not(:disabled),.hand[data-count='3'] .game-card.selected,.hand[data-count='3'] .game-card.previewing{transform:translateY(-13px) rotate(0) scale(1.04)}}
@media(orientation:landscape) and (max-height:600px){.hand[data-count='1'],.hand[data-count='2'],.hand[data-count='3']{justify-content:center}.hand[data-count='1'] .game-card,.hand[data-count='2'] .game-card,.hand[data-count='3'] .game-card{flex:0 0 78px;width:78px}}
@media(orientation:landscape) and (max-height:600px){.special-intro{padding:12px 38px;gap:16px}.cinematic-portrait{width:min(19vw,120px)}.special-title>strong{font-size:28px}.special-title>b{font-size:52px}.special-card-art{width:min(22vh,110px)}}
@media(prefers-reduced-motion:reduce){.draw-seat-callout,.discard-seat-callout,.special-intro,.special-intro::before,.special-intro::after{animation:none!important}.special-intro{opacity:1}.draw-seat-callout,.discard-seat-callout{opacity:1}}

/* Basic combat cards belong to the actor; only the bullet crosses between seats. */
.combat-card-cue{position:fixed;z-index:99;transform:translate(-50%,calc(-100% - 8px));width:max-content;max-width:min(176px,calc(100vw - 12px));display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:7px;padding:5px 8px 5px 5px;border:2px solid #efc36d;border-radius:7px;background:#21140ff5;color:#fff0c8;box-shadow:0 9px 25px #000c,0 0 18px #efb54c55;pointer-events:none;animation:combatCardCue 1.45s ease both}.combat-card-cue.below{transform:translate(-50%,8px);animation-name:combatCardCueBelow}.combat-card-art{width:38px;height:48px;display:block;border:1px solid #e4c172;border-radius:4px;background:#e3c58c url('./assets/card-effects-v1.png') 0 0/400% 300% no-repeat;box-shadow:0 4px 8px #0008}.combat-card-cue>span:last-child{display:grid;gap:1px}.combat-card-cue small{color:#cdbb95;font-size:7px;font-weight:900;line-height:1.2}.combat-card-cue strong{font-size:12px;line-height:1.15}.combat-card-cue[data-kind='missed']{border-color:#a9d6ba;background:#14231cf5;box-shadow:0 9px 25px #000c,0 0 18px #7fc49c55}.combat-card-cue[data-kind='missed'] .combat-card-art{background-position:33.333% 0}.combat-card-cue[data-kind='missed'] strong{color:#c9f0d6}
@keyframes combatCardCue{0%{opacity:0;transform:translate(-50%,calc(-100% + 5px)) scale(.82)}14%,76%{opacity:1;transform:translate(-50%,calc(-100% - 8px)) scale(1)}100%{opacity:0;transform:translate(-50%,calc(-100% - 15px)) scale(.94)}}@keyframes combatCardCueBelow{0%{opacity:0;transform:translate(-50%,-4px) scale(.82)}14%,76%{opacity:1;transform:translate(-50%,8px) scale(1)}100%{opacity:0;transform:translate(-50%,15px) scale(.94)}}
@media(max-width:699px){.combat-card-cue{grid-template-columns:31px minmax(0,1fr);gap:5px;padding:4px 6px 4px 4px}.combat-card-art{width:31px;height:40px}.combat-card-cue small{font-size:6px}.combat-card-cue strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){.combat-card-cue{animation:none!important;opacity:1}.combat-card-cue.below{transform:translate(-50%,8px)}}

/* Equipment stays attached to its owner; judgment reveals the drawn card before its verdict. */
.portrait-effect-badge{position:absolute;z-index:4;top:3px;right:2px;width:30px;display:grid;justify-items:center;gap:1px;padding:2px;border:1px solid #f0d184;border-radius:5px;background:#20150ee8;color:#fff0c3;box-shadow:0 4px 10px #000a;pointer-events:none}.portrait-effect-badge>i{width:24px;height:24px;aspect-ratio:1;border-radius:3px;background:#d7b474 url('./assets/card-effects-v1.png') 100% 0/400% 300% no-repeat}.portrait-effect-badge>b{font-size:6px;line-height:1;white-space:nowrap}.portrait-effect-badge.resolving{animation:barrelBadgePulse 1.6s ease both}.combat-card-cue[data-kind='barrel']{border-color:#efce78;background:#2a1a10f5;box-shadow:0 9px 25px #000c,0 0 22px #efbf5f77}.combat-card-cue[data-kind='barrel'] .combat-card-art{background-position:100% 0}.combat-card-cue[data-kind='barrel'] strong{color:#ffe29a}
.portrait-effect-badges{position:absolute;z-index:4;top:3px;right:2px;display:grid;gap:2px;pointer-events:none}.portrait-effect-badges .portrait-effect-badge{position:relative;top:auto;right:auto}
.portrait-effect-badge[data-kind='jail']{border-color:#bfc9d0;background:#171b20ee;color:#e4edf2}.portrait-effect-badge[data-kind='jail']>i{background-position:33.333% 50%;filter:grayscale(.35) brightness(.9)}.portrait-effect-badge[data-kind='jail']>i::after{content:'';display:block;width:100%;height:100%;background:repeating-linear-gradient(90deg,transparent 0 5px,#d8e3e8 5px 7px);opacity:.8}.discard-pile.judgment-pending .discard-face{visibility:hidden}.discard-pile.judgment-pending::after{content:'判定後進棄牌堆';position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:4px;border:2px solid #9c753f;border-radius:4px;background:repeating-linear-gradient(45deg,#5d2a25 0 3px,#3e1e1b 3px 8px);color:#f9dfa0;font-size:7px;font-weight:900;line-height:1.2;text-align:center}
.portrait.jail-locked::after,.self-portrait.jail-locked::after{content:' ';position:absolute;z-index:3;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,#d8e3e8cc 9px 12px);box-shadow:inset 0 0 0 2px #bfc9d099;pointer-events:none}
.portrait-effect-badge[data-kind='dynamite']{border-color:#f08b55;background:#2a1711ee;color:#ffe1a8}.portrait-effect-badge[data-kind='dynamite']>i{background-position:0 50%}.special-intro[data-kind='jail'] .special-title>b{color:#d8e4ea;text-shadow:0 4px #33434a,0 0 30px #c3d5dc}.special-intro[data-kind='dynamite'] .special-card-art{background-position:0 50%}.judgment-prompt-modal{text-align:center;width:min(calc(100% - 20px),440px);border-color:#d4ac5f}.judgment-prompt-modal h2{margin:10px 0 8px;font-size:26px;color:#7b3025}.judgment-prompt-modal p{margin:0 0 14px;line-height:1.7}.judgment-prompt-modal .primary-btn{width:100%;min-height:54px}.judgment-prompt-art{width:82px;height:106px;margin:2px auto 8px;padding:7px;border:3px double #d7b464;border-radius:7px;background:repeating-linear-gradient(45deg,#79372d 0 4px,#4e211c 4px 8px);box-shadow:0 10px 22px #0008;transform:rotate(-4deg)}.judgment-prompt-art span{display:block;width:100%;height:100%;border:1px solid #e9c87b88;border-radius:3px;background:radial-gradient(circle,#d3a856 0 7%,transparent 8%),repeating-conic-gradient(from 45deg,#c99b51 0 8deg,transparent 8deg 18deg)}
.effect-cards.awaiting-reveal .effect-check-card{opacity:0;transform:rotateY(90deg) scale(.7);animation:none}.effect-cards.revealing .effect-check-card{animation:flipCheck .68s ease both}.effect-stage[data-kind='judgment'] .effect-verdict,.effect-stage[data-kind='judgment'] #effect-outcome,.effect-stage[data-kind='judgment'] .defense-steps>span:last-child{animation:verdictReveal .3s 1.58s ease-out both}
@keyframes barrelBadgePulse{0%,100%{transform:none;filter:none}24%,70%{transform:scale(1.16);filter:brightness(1.45);box-shadow:0 0 0 3px #f3cd6477,0 0 22px #f0bd54}} 
@media(max-width:699px){.portrait-effect-badges{top:2px;right:1px;gap:1px}.portrait-effect-badge{width:25px;padding:1px}.portrait-effect-badge>i{width:21px;height:21px}.portrait-effect-badge>b{font-size:5px}}
@media(orientation:landscape) and (max-height:600px){.portrait-effect-badge{width:21px}.portrait-effect-badge>i{width:17px;height:17px}.portrait-effect-badge>b{font-size:4px}}
@media(prefers-reduced-motion:reduce){.portrait-effect-badge.resolving,.effect-stage[data-kind='judgment'] .effect-verdict,.effect-stage[data-kind='judgment'] #effect-outcome,.effect-stage[data-kind='judgment'] .defense-steps>span:last-child{animation:none!important;opacity:1}.effect-cards.awaiting-reveal .effect-check-card{opacity:1;transform:none}}
.death-choice-modal{text-align:center;width:min(calc(100% - 20px),440px)}.death-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.death-choice-actions button{min-height:48px}
.special-intro[data-kind='gatling'] .special-card-art{animation:gatlingSpin 1.1s cubic-bezier(.2,.8,.3,1) both}.special-intro[data-kind='indians'] .special-card-art{animation:indiansBurst 1.15s ease-out both}.special-intro[data-kind='gatling'] .special-title>strong{text-shadow:0 4px #6c1d13,0 0 28px #ffd36b}.special-intro[data-kind='indians'] .special-title>strong{text-shadow:0 4px #6c1d13,0 0 28px #9be3b0}@keyframes gatlingSpin{from{transform:rotate(-24deg) scale(.6);filter:drop-shadow(0 0 0 transparent)}45%{transform:rotate(10deg) scale(1.08);filter:drop-shadow(0 0 24px #ffd36b)}to{transform:rotate(0) scale(1);filter:drop-shadow(0 14px 22px #000b)}}@keyframes indiansBurst{from{transform:scale(.5);filter:drop-shadow(0 0 0 transparent)}45%{transform:scale(1.12);filter:drop-shadow(0 0 26px #9be3b0)}to{transform:scale(1);filter:drop-shadow(0 14px 22px #000b)}}
.portrait.jail-escaped::after,.self-portrait.jail-escaped::after{content:'逃脫成功';position:absolute;inset:50% auto auto 50%;z-index:6;padding:4px 7px;border:2px solid #bde7b0;border-radius:999px;background:#24513de8;color:#e8ffe1;font-size:10px;font-weight:900;white-space:nowrap;transform:translate(-50%,-50%);animation:jailEscape .9s ease both}@keyframes jailEscape{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}to{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.game-start-intro{position:fixed;z-index:120;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:radial-gradient(circle,#6b3024f2,#160c09fa 70%);color:#fff0c8;animation:gameStartIntro 1.9s ease both;pointer-events:none}.game-start-intro strong{font-size:clamp(30px,7vw,72px);text-shadow:0 5px #6c1d13,0 0 24px #f4a53d99}.game-start-intro small{font-size:clamp(13px,2vw,20px);font-weight:900;color:#e3c98e}@keyframes gameStartIntro{0%{opacity:0}15%,78%{opacity:1}100%{opacity:0}}
.tutorial-modal{width:min(calc(100% - 20px),560px)}.tutorial-steps{display:grid;gap:8px;margin:14px 0}.tutorial-steps section{padding:9px 11px;border-left:3px solid #b47b42;background:#f3e2bd}.tutorial-steps b{color:#8b3428}.tutorial-steps p{margin:3px 0 0;color:#4c3827;font-size:12px;line-height:1.55}
.tutorial-modal{padding:20px}.tutorial-progress{height:7px;margin:10px 0 16px;overflow:hidden;border-radius:99px;background:#d9c093}.tutorial-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b392a,#d7943b);transition:width .24s ease}.tutorial-copy{min-height:72px;margin:0;line-height:1.65}.tutorial-practice{display:grid;gap:9px;margin:18px 0;padding:14px;border:2px solid #b8894c;border-radius:8px;background:#f6e6c3;text-align:center}.tutorial-practice>span{font-size:11px;font-weight:900;color:#74502c}.tutorial-practice small{min-height:18px;color:#5b4330;font-size:12px}.tutorial-action{min-height:52px;padding:9px;border:2px solid #863126;border-radius:7px;background:linear-gradient(#b44936,#7b291f);color:#fff1ce;font-size:15px;font-weight:900;box-shadow:0 3px #48150f;touch-action:manipulation}.tutorial-action:active{transform:translateY(2px);box-shadow:0 1px #48150f}.tutorial-actions{display:flex;justify-content:space-between;gap:8px}.tutorial-actions .text-btn{min-height:44px;font-weight:900}.tutorial-actions .text-btn:disabled{opacity:.4}
.identity-draw{position:fixed;z-index:125;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;background:radial-gradient(circle,#6a2e24f2,#130a08fb 72%);color:#fff0c8;text-align:center;animation:identityScene .5s ease both}.identity-draw>p{margin:0;font-size:15px;font-weight:900}.identity-card{position:relative;width:176px;height:244px;transform-style:preserve-3d;animation:identityFlip 2.15s .25s ease-in-out both}.identity-card-back,.identity-card-face{position:absolute;inset:0;display:grid;place-content:center;gap:13px;padding:16px;border:4px double #edcd7d;border-radius:12px;backface-visibility:hidden;box-shadow:0 18px 38px #000b}.identity-card-back{background:repeating-linear-gradient(45deg,#753127 0 4px,#3c1815 4px 9px);font:900 34px Georgia,serif;letter-spacing:.06em}.identity-card-face{background:linear-gradient(145deg,#fff0c8,#dcb975);color:#3b1f18;transform:rotateY(180deg)}.identity-card-face small{font-size:12px;font-weight:900}.identity-card-face strong{color:#8b3026;font-size:34px}.identity-card-face em{font-style:normal;font-size:12px;line-height:1.5}@keyframes identityFlip{0%,42%{transform:rotateY(0) scale(.82)}58%{transform:rotateY(90deg) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}@keyframes identityScene{from{opacity:0}to{opacity:1}}
.identity-confirm,.character-choice-controls button{min-height:48px;padding:9px 14px;border:2px solid #edc66e;border-radius:7px;background:#8b3327;color:#fff0c8;font-weight:900;box-shadow:0 3px #40130e}.identity-lineup{max-width:420px;padding:8px;border:1px solid #d7b464;border-radius:5px;background:#1d110ed9;font-size:12px;line-height:1.55}.character-choice-controls{display:grid;gap:10px;width:min(100%,480px);padding:12px;border:1px solid #d7b464;border-radius:8px;background:#1d110ed9}.character-choice-controls button:last-child{background:#b44936}
.special-gatling,.special-indians{grid-template-columns:minmax(0,1fr) minmax(190px,1fr)}.gatling-showcase,.indians-showcase,.target-card-showcase{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}.gatling-showcase>strong,.indians-showcase>strong,.target-card-showcase>strong{font-size:clamp(28px,5vw,58px);line-height:1;text-shadow:0 4px #6c1d13,0 0 24px #f4a53d99}.gatling-showcase>small,.indians-showcase>small,.target-card-showcase>small{font-size:clamp(11px,1.7vw,17px);font-weight:900}.gatling-showcase .special-card-art{animation:gatlingSpin .9s cubic-bezier(.2,.8,.3,1) both}.gatling-rings{position:absolute;width:min(30vw,240px);aspect-ratio:1;border:4px dotted #ffd36b;border-radius:50%;animation:ringPulse 1s ease-in-out infinite}.indians-showcase .special-card-art{animation:indiansBurst 1.1s ease-out both}.arrow-flight{position:absolute;width:min(31vw,260px);height:3px;background:#e2c06e;box-shadow:0 0 8px #ffd36baa;transform-origin:left center;animation:arrowRush 1s ease-out infinite}.a1{transform:rotate(-18deg);animation-delay:.05s}.a2{transform:rotate(0);animation-delay:.2s}.a3{transform:rotate(18deg);animation-delay:.35s}.special-panic,.special-catbalou{grid-template-columns:minmax(0,1fr) minmax(145px,.8fr) minmax(0,1fr)}.target-card-showcase .special-card-art{width:min(18vw,170px)}.special-panic .target-card-token{position:absolute;width:50px;height:68px;border:2px solid #f6deb0;border-radius:5px;background:repeating-linear-gradient(45deg,#743128 0 4px,#351513 4px 8px);animation:stealToken 1.6s ease both}.special-catbalou .target-card-token{position:absolute;width:50px;height:68px;border:2px solid #f6deb0;border-radius:5px;background:repeating-linear-gradient(45deg,#743128 0 4px,#351513 4px 8px);animation:discardToken 1.55s ease both}@keyframes ringPulse{50%{transform:scale(1.13);opacity:.25}}@keyframes arrowRush{from{opacity:0;transform:translateX(-35%) scaleX(.35)}35%{opacity:1}to{opacity:0;transform:translateX(45%) scaleX(1)}}@keyframes stealToken{from{opacity:0;transform:translateX(70px) rotate(12deg)}35%{opacity:1}to{opacity:0;transform:translateX(-100px) rotate(-14deg) scale(.65)}}@keyframes discardToken{from{opacity:0;transform:translateY(45px) rotate(-8deg)}40%{opacity:1}to{opacity:0;transform:translateY(110px) rotate(18deg) scale(.55)}}
.special-panic .special-card-art,.special-catbalou .special-card-art{background-position:0 100%}.special-catbalou .special-card-art{filter:drop-shadow(0 0 18px #ef7657)}.identity-draw{animation:none}@media(prefers-reduced-motion:reduce){.identity-draw,.identity-card,.gatling-showcase .special-card-art,.indians-showcase .special-card-art,.gatling-rings,.arrow-flight,.special-panic .target-card-token,.special-catbalou .target-card-token{animation:none!important}.identity-card{transform:rotateY(180deg)}.identity-draw{opacity:1}}
.muzzle-flash.mass-volley,.bullet-tracer.mass-volley{z-index:126}.bullet-tracer.mass-volley.indians{background:linear-gradient(90deg,#fff7bd,#d9eec3 45%,#82bd79 80%,transparent);box-shadow:0 0 7px #d8f4bc,0 0 16px #67b66a}.bullet-tracer.mass-volley.gatling{height:5px}
.turn-transition{position:fixed;z-index:121;left:50%;top:50%;display:grid;justify-items:center;gap:7px;width:min(calc(100% - 32px),420px);padding:20px;border:2px solid #edc66e;border-radius:11px;background:#241510f5;color:#fff0c8;text-align:center;box-shadow:0 18px 48px #000c;transform:translate(-50%,-50%);animation:turnTransition var(--turn-notice-duration,2s) ease both;pointer-events:none}.turn-transition>span{color:#e6bf6b;font-size:11px;font-weight:900;letter-spacing:.16em}.turn-transition>strong{font-size:27px;line-height:1.1}.turn-transition>small{font-size:13px;line-height:1.5}.turn-transition.start{border-color:#9fd39b;background:#173123f5}.turn-transition.end{border-color:#d9a76a;background:#3c2119f5}@keyframes turnTransition{0%{opacity:0;transform:translate(-50%,-42%) scale(.9)}12%,85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.97)}}@media(prefers-reduced-motion:reduce){.turn-transition{animation:none}}
.portrait.jail-released::before,.self-portrait.jail-released::before{filter:brightness(1.25) saturate(1.15)}.portrait.jail-released,.self-portrait.jail-released{animation:jailReleased .7s ease both!important}@keyframes jailReleased{0%{filter:brightness(.65) grayscale(.6)}55%{filter:brightness(1.35) saturate(1.3)}100%{filter:brightness(1) saturate(1)}}
.setup-note + #tutorial-button{display:block;width:100%;margin:8px 0;border-color:#e3bd62;background:#493222;color:#ffe7a6;font-weight:900;box-shadow:0 3px 0 #24170f}
@media(prefers-reduced-motion:reduce){.character-list{scroll-behavior:auto}.character-option{transition:none}}

/* ── 開局角色選擇的手機調整 ─────────────────────────────
   注意：這一段必須排在 .identity-draw／.identity-card 的基礎樣式「之後」，
   否則會被基礎樣式蓋掉（第一版放在檔案中段，實測 padding 仍是 24px 就是這個原因）。*/
@media(max-width:699px){
  .character-list{max-height:min(30vh,220px);padding:5px;gap:5px}
  .character-option{padding:7px 8px;gap:8px}
  .character-option-name{font-size:12px}
  .character-option-ability{font-size:10.5px}
  .character-option-hp{font-size:10px}
  .character-choice-actions button{font-size:12px;line-height:1.25}
  .identity-draw{padding:16px;gap:10px}
  .identity-draw>p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .identity-card{width:150px;height:208px}
  .identity-card-face strong{font-size:26px}
}

/* 手機橫向只有 375px 高，實測直式那套排下來需要 676px。
   這裡改成兩欄：左邊身份／角色卡，右邊說明與清單，用寬度換高度。*/
@media(orientation:landscape) and (max-height:600px){
  .identity-draw{
    padding:10px 14px;gap:6px 16px;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
    align-items:start;justify-items:stretch;place-content:center;
  }
  .identity-draw>.eyebrow{grid-column:1/-1;grid-row:1;justify-self:center}
  .identity-draw>.identity-card{grid-column:1;grid-row:2/span 2;width:112px;height:156px;align-self:center}
  .identity-draw>p{grid-column:2;grid-row:2;font-size:11px;line-height:1.35;text-align:left}
  .identity-draw>.identity-lineup{grid-column:2;font-size:9px;line-height:1.3}
  .identity-draw>.identity-confirm{grid-column:2;justify-self:start;min-height:38px;font-size:12px}
  .identity-draw>.character-choice-controls{grid-column:2;grid-row:3;width:100%;padding:8px;gap:6px}
  .identity-card-face strong{font-size:20px}
  .identity-card-face small,.identity-card-face em{font-size:10px}
  .identity-card-face{gap:6px;padding:10px}
  .identity-card-back{font-size:22px}
  .character-list{max-height:132px;padding:4px;gap:4px}
  .character-option{min-height:36px;padding:5px 7px;gap:7px}
  .character-option-name{font-size:11px}
  .character-option-ability{font-size:10px}
  .character-option-hp{font-size:9px}
  .character-list-head{font-size:11px}
  .character-choice-actions{gap:6px;padding-top:6px}
  .character-choice-actions button{min-height:36px;padding:6px 8px;font-size:11px}
}

/* 陣營配置在身份卡那一步已經完整看過；選角色這步收起來，把垂直空間讓給清單。
   （原本只在手機橫向隱藏，但 1000x700 這類矮桌機視窗同樣擠不下。）*/
.identity-draw.choosing-character>.identity-lineup{display:none}

/* 教學中的監獄牌只會出現一張，置中並加大，避免被手牌橫向捲動藏到邊緣。 */
.tutorial-hand.jail-focus{justify-content:center;overflow:visible}.tutorial-hand.jail-focus .tutorial-hand-card{flex-basis:min(180px,100%);min-height:72px;border:3px solid #8e8998;background:linear-gradient(145deg,#eee5da,#b9b1b6);box-shadow:0 0 0 3px #563d62,0 8px 18px #0008;transform:translateY(-4px)}.tutorial-hand.jail-focus .tutorial-hand-card strong{font-size:15px;color:#453247}.tutorial-hand.jail-focus .tutorial-hand-card small{font-size:11px}.tutorial-hand.discard-focus .tutorial-hand-card:not(.disabled){box-shadow:0 0 0 2px #d64a35,0 4px 10px #0008;animation:tutorialDiscardPulse .9s ease-in-out infinite}.tutorial-player small{font-weight:800}.tutorial-player small::first-letter{color:#fff4c4}@keyframes tutorialDiscardPulse{50%{transform:translateY(-3px);filter:brightness(1.09)}}@media(prefers-reduced-motion:reduce){.tutorial-hand.discard-focus .tutorial-hand-card:not(.disabled){animation:none}}

/* 新手教學：用一張可操作的練習牌桌取代只有說明文字的假按鈕。 */
.tutorial-battle{margin:14px 0;border:2px solid #80502d;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at center,#6e3823,#25150f 72%);box-shadow:inset 0 0 0 2px #d7ae62aa;color:#fff0cb}.tutorial-battle>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#180e0bd9;font-size:11px}.tutorial-battle>header span{color:#e7c975;font-weight:900}.tutorial-battle>header strong{font-size:12px;text-align:center}.tutorial-battle>header small{color:#f7d896;font-weight:900}.tutorial-arena{display:grid;grid-template-columns:minmax(92px,1fr) minmax(80px,.8fr) minmax(92px,1fr);align-items:center;gap:7px;min-height:112px;padding:12px}.tutorial-enemy{display:grid;justify-items:center;gap:4px;min-height:94px;padding:8px;border:2px solid #c49c65;border-radius:8px;background:#3b2119;color:#fff1ca;text-align:center;transition:transform .18s,box-shadow .18s}.tutorial-enemy.targetable{border-color:#ffdc6e;box-shadow:0 0 0 3px #ca4029,0 0 20px #ffcc52;animation:tutorialTargetPulse .9s ease-in-out infinite}.tutorial-enemy.jailed{border-color:#9e9ca4;background:#343039}.tutorial-enemy:disabled{cursor:default}.tutorial-portrait{display:grid;place-items:center;width:39px;height:39px;border:2px solid #f2cd76;border-radius:50%;font-size:10px;font-weight:900}.tutorial-portrait.enemy{background:#96352b}.tutorial-portrait.player{background:#315b59}.tutorial-enemy small,.tutorial-player small{font-size:10px}.tutorial-attack-lane{color:#f8d06d;font-size:11px;font-weight:900;line-height:1.4;text-align:center}.tutorial-defense{display:grid;place-items:center;min-height:62px;text-align:center}.tutorial-defense-card{display:grid;gap:3px;min-height:58px;padding:7px;border:2px solid #e0c279;border-radius:7px;background:#e6d1a0;color:#4c2c20;box-shadow:0 3px #6b3d25;font-size:12px}.tutorial-defense-card:active{transform:translateY(2px);box-shadow:0 1px #6b3d25}.tutorial-defense-card small,.tutorial-defense-wait,.tutorial-defense-result{font-size:10px;line-height:1.35}.tutorial-defense-result{padding:6px;border-radius:5px;background:#46704b;color:#fff4cc;font-weight:900}.tutorial-defense-wait{color:#d6b890}.tutorial-player{display:flex;align-items:center;gap:7px;padding:8px 12px;border-top:1px solid #d7a96d66;background:#25140ed9}.tutorial-player strong{font-size:12px}.tutorial-player small{margin-right:auto;color:#edcea1}.tutorial-player b{padding:4px 6px;border:1px solid #cfa76c;border-radius:4px;background:#43645d;color:#fff2cc;font-size:10px}.tutorial-controls{display:grid;grid-template-columns:72px minmax(0,1fr) 78px;gap:7px;align-items:stretch;padding:9px;background:#160d0ad9}.tutorial-deck,.tutorial-end-turn{min-height:60px;border:2px solid #e1bd69;border-radius:7px;background:linear-gradient(145deg,#7e3026,#3b1714);color:#ffebae;font-weight:900}.tutorial-deck{display:grid;gap:3px;place-content:center}.tutorial-deck small{font-size:9px}.tutorial-deck:not(:disabled){animation:tutorialTargetPulse .9s ease-in-out infinite}.tutorial-deck:disabled,.tutorial-end-turn:disabled{opacity:.42;cursor:default}.tutorial-hand{display:flex;min-width:0;gap:5px;overflow-x:auto;padding:2px}.tutorial-hand-card{flex:0 0 83px;display:grid;align-content:space-between;gap:5px;min-height:60px;padding:6px;border:1px solid #e6c77a;border-radius:6px;background:#f7e5bb;color:#502a20;text-align:left}.tutorial-hand-card strong{font-size:11px}.tutorial-hand-card small{font-size:9px;line-height:1.25}.tutorial-hand-card.selected{border:3px solid #bd392b;transform:translateY(-7px);box-shadow:0 6px 0 #5b1a16}.tutorial-hand-card.disabled{opacity:.46}.tutorial-empty-hand{display:grid;place-items:center;min-width:190px;color:#d8b78c;font-size:10px;text-align:center}.tutorial-end-turn:not(:disabled){background:linear-gradient(#5c7e5c,#28472e);animation:tutorialTargetPulse .9s ease-in-out infinite}.tutorial-hint{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;margin:11px 0;padding:9px 10px;border-left:4px solid #ba4430;border-radius:4px;background:#f6e5bf;color:#503525;font-size:12px;line-height:1.45}.tutorial-hint b{color:#8d3027;font-size:11px}.result-modal{overflow:hidden}.result-confetti{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}.result-confetti i{position:absolute;top:-16px;left:var(--x);width:9px;height:16px;background:#e3b94b;animation:resultConfetti 2.7s var(--delay) cubic-bezier(.18,.67,.45,1) infinite}.result-confetti i:nth-child(3n){background:#b74034}.result-confetti i:nth-child(3n + 1){background:#4c8b7c}.result-modal>*:not(.result-confetti){position:relative;z-index:1}@keyframes tutorialTargetPulse{50%{transform:scale(1.035);filter:brightness(1.16)}}@keyframes resultConfetti{0%{transform:translate3d(0,-18px,0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate3d(calc(var(--turn) * .32),360px,0) rotate(var(--turn));opacity:0}}@media(prefers-reduced-motion:reduce){.tutorial-enemy.targetable,.tutorial-deck:not(:disabled),.tutorial-end-turn:not(:disabled),.result-confetti i{animation:none}}@media(max-width:500px){.tutorial-battle>header{align-items:flex-start;flex-wrap:wrap}.tutorial-battle>header strong{order:3;flex-basis:100%;text-align:left}.tutorial-arena{grid-template-columns:1fr 82px;gap:6px}.tutorial-defense{grid-column:1/-1;min-height:42px}.tutorial-controls{grid-template-columns:64px minmax(0,1fr)}.tutorial-end-turn{grid-column:1/-1;min-height:45px}.tutorial-hand-card{flex-basis:78px}}

/* 五人局：四名對手採對稱兩列，讓名字、生命與裝備不再被壓縮。 */
@media(max-width:699px){
  .opponents[data-count='4']{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,94px);gap:6px;padding:2px 0 8px;overflow:visible}
  .opponents[data-count='4'] .opponent{z-index:1;min-width:0;height:94px;min-height:94px}
  .opponents[data-count='4'] .opponent:nth-child(1){grid-column:1;grid-row:1}
  .opponents[data-count='4'] .opponent:nth-child(2){grid-column:2;grid-row:1}
  .opponents[data-count='4'] .opponent:nth-child(3){grid-column:1;grid-row:2}
  .opponents[data-count='4'] .opponent:nth-child(4){grid-column:2;grid-row:2}
  .opponents[data-targeting='false'] .distance-chip{display:none}
  .opponents[data-targeting='true'] .distance-chip{display:flex}
}
@media(max-width:699px) and (min-height:650px){.opponents[data-count='4']{grid-auto-rows:94px;grid-template-rows:repeat(2,94px)}}

/* ── 新手實戰：監獄判定抽牌 ＋ 章節切換提示 ───────────────────
   判定這一步分兩段（翻牌 → 看結果 → 繼續），所以動畫只做進場，
   不用 both 收到透明，避免像先前回合提示那樣元素還在卻看不見。*/
.tutorial-judge-draw,.tutorial-judge-next{
  display:grid;gap:2px;padding:9px 12px;border:2px solid #edc66e;border-radius:8px;
  background:#8b3327;color:#fff0c8;font-weight:900;cursor:pointer;
}
.tutorial-judge-draw small,.tutorial-judge-next small{font-weight:500;font-size:10px;opacity:.85}
.tutorial-judge-draw:hover,.tutorial-judge-next:hover{background:#a03c2e}
.tutorial-judge-draw:focus-visible,.tutorial-judge-next:focus-visible{outline:3px solid #ffe58d;outline-offset:2px}
.tutorial-judge{display:grid;justify-items:center;gap:5px;text-align:center}
.tutorial-judge strong{color:#ffb9a6;font-size:12px}
.tutorial-judge small{color:#d6c6a6;font-size:10px;line-height:1.45}
.tutorial-judge-card{
  display:grid;place-items:center;width:44px;height:62px;
  border:2px solid #d9b875;border-radius:6px;background:#f7ecd4;
  color:#2f2a28;font:900 15px Georgia,serif;font-style:normal;
  animation:tutorialJudgeFlip .34s ease-out;
}
.tutorial-judge-next{margin-top:2px;padding:6px 10px}
@keyframes tutorialJudgeFlip{from{transform:rotateY(90deg) scale(.85)}to{transform:rotateY(0) scale(1)}}

/* 章節切換：讓玩家知道「監獄那段結束了」。只閃邊框與底色，文字全程可見。*/
#tutorial-modal .eyebrow.chapter-flash{
  display:inline-block;padding:3px 10px;border:2px solid transparent;border-radius:999px;
  animation:tutorialChapterFlash .62s ease-in-out 4;
}
@keyframes tutorialChapterFlash{
  0%,100%{border-color:transparent;background:transparent}
  50%{border-color:#e2503c;background:#e2503c33}
}
@media(prefers-reduced-motion:reduce){
  .tutorial-judge-card{animation:none}
  #tutorial-modal .eyebrow.chapter-flash{animation:none;border-color:#e2503c;background:#e2503c22}
}