.reference-table{container-type:inline-size;padding:0;min-height:0;aspect-ratio:16/9;overflow:hidden}
.reference-table>.scene{position:absolute;object-fit:fill;inset:0;width:100%;height:100%}
.table-back{position:absolute;left:2%;top:3%;z-index:3}
.table-heading{position:absolute;top:3%;left:25%;width:50%;text-align:center;text-shadow:0 2px 7px #000;background:linear-gradient(90deg,transparent,#10142680,transparent);padding:.3rem}
.table-heading h2{font-size:clamp(16px,2.2cqw,30px);margin:0 0 .35rem;color:#f1dec0}
.table-heading p{font-size:clamp(12px,1.35cqw,19px);line-height:1.6;margin:0;max-height:3.2em;overflow:auto}
.table-heading small{font-size:clamp(11px,1.05cqw,15px)}
.table-card{position:absolute;filter:brightness(.67);pointer-events:none;isolation:isolate}
.table-card img{width:100%;height:100%;object-fit:fill;display:block;transform-origin:0 0}
.table-card.is-selected{filter:brightness(1.12) drop-shadow(0 0 5px #e2c599)}
.table-position{position:absolute;transform:translateX(-50%);white-space:nowrap;color:#d3c6b0;font-size:clamp(10px,1.05cqw,16px);font-family:var(--serif);text-shadow:0 2px 5px #000,0 0 5px #000;background:#10152688;padding:.15rem .35rem;border-radius:3px}
.table-position.is-selected{color:#ffe4a8}
.table-proceed{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);min-height:0;padding:.55em 1.7em;font-size:clamp(12px,1.2cqw,18px);z-index:2}
.table-deck{position:absolute;top:14%;left:23%;width:54%;height:21%;background:#101629a8;backdrop-filter:blur(3px);border:1px solid #bca17966;border-radius:8px;padding:.4%;z-index:2}
.table-deck .deck-row{height:80%;padding:0 0 .35rem;gap:.5rem}
.table-deck .deck-card{flex:0 0 auto;height:100%;width:auto;aspect-ratio:2/3;min-width:0}
.table-deck p{height:20%;margin:0;text-align:center;font-size:clamp(10px,1cqw,14px);line-height:1.5;color:#e2d3bd}
.table-error{position:absolute;bottom:1%;right:1%;max-width:35%;font-size:12px}
.selection-fan{position:absolute;inset:0;pointer-events:none}
.selection-pick{position:absolute;width:6.4%;height:19%;border:1px solid #c8af85;border-radius:4%;background:#181426;min-width:0;min-height:0;padding:0;pointer-events:auto;transform:translate(-50%,-50%) rotate(var(--fan-angle));transition:filter .2s,box-shadow .2s;cursor:pointer;box-shadow:0 2px 4px #0009}
.selection-pick img{display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.selection-pick:hover,.selection-pick:focus-visible{outline:2px solid #ffe2ab;filter:brightness(1.5)}
.selection-pick:focus-visible{z-index:2}
/* 已选牌：沿屏幕向上浮起，并带一圈金紫描边光；序号徽标同步上浮。 */
.selection-pick.is-chosen,.selection-pick:disabled.is-chosen{translate:0 -1.6cqw;z-index:2;outline:1.5px solid #fff0cf;outline-offset:1px;filter:brightness(1.35);opacity:1;box-shadow:0 0 .5cqw .15cqw #ffe2abcc,0 0 1.4cqw .3cqw #c89dff99,0 1.2cqw 1.4cqw #000a;animation:chosen-glow 2.6s ease-in-out .4s infinite}
@keyframes chosen-glow{0%,100%{box-shadow:0 0 .5cqw .15cqw #ffe2abcc,0 0 1.4cqw .3cqw #c89dff99,0 1.2cqw 1.4cqw #000a}50%{box-shadow:0 0 .7cqw .2cqw #ffe9bfee,0 0 2cqw .5cqw #d2acffbb,0 1.2cqw 1.4cqw #000a}}
.selection-pick.is-chosen:after{content:'';position:absolute;inset:0;background:#c89dff44;border-radius:inherit}
.is-dealing .selection-pick{animation:fan-deal .65s cubic-bezier(.2,.7,.2,1) var(--deal-delay) both;pointer-events:none}
@keyframes fan-deal{from{opacity:0;transform:translate(calc(-50% + var(--deal-x)),calc(-50% + var(--deal-y))) rotate(0deg) scale(.7)}20%{opacity:1}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--fan-angle))}}
.selection-pick:disabled{cursor:default}
.selection-order{position:absolute;transform:translate(-50%,-50%);translate:0 -1.6cqw;box-shadow:0 0 .6cqw #ffe2ab99;color:#fff5d2;background:#342346df;border:1px solid #e5c68d;border-radius:50%;width:1.8em;height:1.8em;display:grid;place-items:center;font-size:clamp(10px,1.3cqw,20px);pointer-events:none;z-index:3}
.selection-chosen{position:absolute;left:27%;top:46%;width:46%;height:20%;display:flex;justify-content:center;gap:2%;pointer-events:none}
.selection-chosen-card{height:100%;width:15%;text-align:center;animation:selection-lift .35s ease-out both}
.selection-chosen-card img{height:85%;width:100%;object-fit:contain;filter:drop-shadow(0 5px 6px #090716)}
.selection-chosen-card span{display:block;color:#ffe4b7;font-size:clamp(9px,1cqw,15px);white-space:nowrap;text-shadow:0 2px 4px #000}
.selection-proceed{position:absolute;left:50%;top:68%;transform:translateX(-50%);z-index:4;font-size:clamp(12px,1.4cqw,22px);padding:.55em 2em}
.table-card.is-flying{animation:table-card-arrive 1000ms cubic-bezier(.18,.7,.25,1) var(--flight-delay) both}
.table-placing .table-position{opacity:0;animation:table-label-arrive .5s 1.9s forwards}
@keyframes table-card-arrive{0%{transform:translate(var(--flight-x),var(--flight-y)) scale(.6) rotate(-8deg);opacity:0}12%{opacity:1}100%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1}}
@keyframes table-label-arrive{to{opacity:1}}
@keyframes selection-lift{from{opacity:0;transform:translateY(12%) scale(.9)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.is-dealing .selection-pick,.selection-pick.is-chosen{animation:none}.table-card.is-flying{animation-duration:80ms;animation-delay:0ms}.table-placing .table-position{animation:none;opacity:1}.selection-chosen-card{animation:none}}