/* One shared, non-blocking card conveyor at the centre of the table. */
#actionStage{top:auto;bottom:6px;transform:translateX(-50%);width:min(680px,var(--action-width,64vw));height:176px;display:block;min-height:0;isolation:isolate}
body.modal-open #actionStage{opacity:1}
/* 牌桌中央的候选牌区（五谷丰登亮出的那一排）原来在台面正中，传送带搬到底部之后
   两者就叠在了一起。候选牌是要看着选的，压在上面。 */
#playZone{z-index:30}
.table-card{position:absolute;left:50%;top:0;width:var(--card-width,96px);transition:transform 300ms cubic-bezier(.22,1,.36,1);will-change:transform}
.table-card-face{animation:tableCardIn 240ms cubic-bezier(.16,1,.3,1) both}
.table-card.arriving .table-card-face{visibility:hidden;animation:none}
.table-card.has-flight:not(.leaving) .table-card-face{animation:none}
.table-flight-track{position:fixed;left:0;top:0;pointer-events:none;z-index:100;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
.table-flight-clip{position:fixed;inset:0;pointer-events:none;z-index:100}
.table-flight-clip>.table-flight-track{position:absolute}
.card.table-flight{position:relative;margin:0;pointer-events:none;transition:none;animation:none;will-change:transform;transform-origin:center;box-shadow:0 8px 24px #0009,0 0 0 2px #f4d08e,0 0 18px #e6bb6955}
#actionStage .table-card .card.mini{width:var(--card-width,96px);height:calc(var(--card-width,96px)*1.452);cursor:default;box-shadow:0 8px 22px #0008,0 0 0 1px #e3c28499}
.table-card-caption{margin-top:7px;color:#f3ddb5;font-size:12px;text-align:center;line-height:1.4;text-shadow:0 2px 4px #000,0 0 8px #000;overflow-wrap:anywhere}
.table-card.leaving{pointer-events:none}
.table-card.leaving .table-card-face{animation:tableCardOut 300ms ease-out both}
.table-skill-banner{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);width:max-content;max-width:100%;padding:12px 30px;display:flex;align-items:center;justify-content:center;gap:15px;background:linear-gradient(90deg,transparent,#162736ed 24%,#273b4bea 75%,transparent);color:#f4deb5;text-shadow:0 2px 6px #000;animation:tableSkillIn 350ms ease-out both;z-index:100;text-align:center}
.table-skill-banner::before,.table-skill-banner::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#f5d992,transparent);box-shadow:0 0 12px #e7bc6c}
.table-skill-banner::before{top:0}.table-skill-banner::after{bottom:0}
.table-skill-banner span{font-size:14px}.table-skill-banner strong{font:700 28px 'STKaiti','KaiTi',serif;letter-spacing:.12em;color:#ffe3a0;text-shadow:0 0 18px #efb24999}
@keyframes tableCardIn{from{opacity:0;transform:translate(32px,18px) scale(.9) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes tableCardOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
@keyframes tableSkillIn{from{opacity:0;filter:brightness(2);translate:35px 0}to{opacity:1;filter:brightness(1);translate:0 0}}
@media(max-width:600px){#actionStage{top:auto;bottom:6px;height:136px;transform:translateX(-50%);width:calc(100% - 28px)}.table-skill-banner{gap:8px;padding:8px 14px;bottom:calc(100% + 8px)}.table-skill-banner strong{font-size:22px}.table-skill-banner span{font-size:12px}.table-card-caption{font-size:10px}}
/* 触屏上横幅进场只滑入淡入：亮度滤镜动画会让带光晕的大字每帧重画 */
@keyframes tableSkillInLite{from{opacity:0;translate:35px 0}to{opacity:1;translate:0 0}}
@media(any-pointer:coarse){.table-skill-banner{animation-name:tableSkillInLite}}
@media(prefers-reduced-motion:reduce){.table-card{transition:none}.table-card-face,.table-skill-banner{animation:none}.table-card.leaving .table-card-face{animation:actionFade 150ms linear both}}

/* Keep prompts and controls compact, leaving more space for the card lane. */
#controlPanel{padding:4px 8px;gap:4px;min-width:0;width:min(360px,calc(100% - 2 * var(--seat-width,176px) - 48px))}
#controlPanel #promptText{font-size:15px;line-height:1.35;letter-spacing:.04em;max-height:2.7em}
#controlPanel .ctrl-btns{display:flex;justify-content:center;gap:8px;width:max-content;max-width:none}
#controlPanel .ctrl-btns button,#controlPanel .ctrl-btns #btnRecast{flex:0 0 106px;width:106px}
#controlPanel .ctrl-btns button,#controlPanel .ctrl-btns #btnRecast{min-width:88px;min-height:36px;padding:6px 12px;font-size:18px}
@media(min-width:901px) and (min-height:601px){
 #controlPanel{bottom:max(calc(var(--card-h) + 40px),var(--controls-bottom,0px))}
 #actionStage{bottom:-24px}
}
@media(max-width:900px) and (min-height:601px){#controlPanel{width:100%}}
@media(max-width:900px){
 #controlPanel .ctrl-btns button,#controlPanel .ctrl-btns #btnRecast{min-width:0;min-height:40px;font-size:16px;padding:5px 10px}
}

/* Recast takes extra room instead of squeezing the other three tokens. Only where
   the panel is the centred, width-capped variant: portrait phones already give it
   the full width, and widening it there would shrink it instead. */
@media(min-width:901px),(max-height:600px){
 #controlPanel:has(#btnRecast:not(.hidden)){width:min(472px,calc(100% - 2 * var(--seat-width,176px) - 48px))}
}
@media(max-width:900px){
 /* Four equal tokens plus their three gaps stay inside the panel's padding. */
 #controlPanel .ctrl-btns button,#controlPanel .ctrl-btns #btnRecast{flex-basis:min(92px,calc((100vw - 72px)/4));width:min(92px,calc((100vw - 72px)/4));padding-inline:5px;font-size:14px}
}
@media(max-height:600px){
 #controlPanel{padding:0;gap:2px}
 #controlPanel #promptText{font-size:13px;max-height:18px;line-height:18px}
 #controlPanel .ctrl-btns button,#controlPanel .ctrl-btns #btnRecast{min-height:32px;padding:4px 10px;font-size:15px}
}