#hand .card.prepared{transform:translateY(calc(var(--rise) - 18px)) rotate(var(--angle))!important;box-shadow:0 0 0 2px #ffe1a0,0 0 12px #ffd27780!important;filter:none!important;opacity:1!important}
#prepare-undo:disabled{opacity:.4}
@media(max-width:700px),(max-height:500px){#prepare-undo{display:none!important}#hand .card.prepared{transform:translateY(calc(var(--rise) - 12px)) rotate(var(--angle))!important}}

.turn-spark{display:none;position:absolute;inset:-6px;border-radius:50%;transform:rotate(var(--seat-progress,0deg));pointer-events:none;z-index:5}
.timed-turn .turn-spark{display:block}


@media(max-width:700px){.turn-spark{inset:-5px}}
@media(prefers-reduced-motion:reduce){}

/* Default portrait rim; only the remaining timer arc carries the timer color. */
.seat.active .avatar,.seat.timed-turn .avatar{border-color:#e7e1d3!important;box-shadow:0 4px 8px #000a!important}
.turn-spark:before{content:'';position:absolute;left:50%;top:0;width:4px;height:7px;transform:translate(-50%,-50%) rotate(25deg);background:#fff4c2;clip-path:polygon(50% 0,75% 48%,100% 70%,55% 100%,0 75%,30% 40%);filter:drop-shadow(0 0 2px #ff9c28)}
.turn-spark i{position:absolute;left:50%;top:0;width:2px;height:7px;border-radius:1px;background:linear-gradient(#fffde0,#ffd35b 45%,#fa792200);transform-origin:50% 0;animation:spark-scatter var(--life) linear infinite;animation-delay:var(--delay);pointer-events:none}
@keyframes spark-scatter{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--direction)) translateY(-1px) scaleY(.4)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--direction)) translateY(var(--travel)) scaleY(.2)}}
@media(max-width:700px){.turn-spark i{width:1.5px;height:5px}}
@media(prefers-reduced-motion:reduce){.turn-spark i{animation:none;opacity:.8;transform:translate(-50%,-50%) rotate(var(--direction)) translateY(-6px)}}

/* Larger spark head for the local preview. */
.turn-spark:before{width:6px;height:10px}
.turn-spark i{width:2.5px;height:10px}
@keyframes spark-scatter{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--direction)) translateY(-1px) scaleY(.4)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--direction)) translateY(calc(var(--travel) * 1.5)) scaleY(.2)}}
@media(max-width:700px){.turn-spark:before{width:5px;height:8px}.turn-spark i{width:2px;height:7px}}

/* Paint countdown over the portrait rim, not outside it. */
.seat.timed-turn .avatar::after{inset:-3px;padding:3px;background:conic-gradient(var(--ring-color,#f4cf70) var(--seat-progress,0deg),transparent 0)}
.turn-spark{inset:-1.5px}
@media(max-width:700px){.seat.timed-turn .avatar::after{inset:-2px;padding:2px}.turn-spark{inset:-1px}}

:root{--preview-ring:#f4cf70;--preview-ember:#fff4c2;--preview-spark:#ffd35b;--preview-flare:#ff9c28;--preview-tail:#fa792200;--preview-rim:#e7e1d3;--preview-ready:#ffe1a0;--preview-ready-glow:#ffd27780}
:root[data-theme="3"]{--preview-ring:#168795;--preview-ember:#fff8e8;--preview-spark:#f2a56f;--preview-flare:#dc785d;--preview-tail:#dc785d00;--preview-rim:#e7e1d3;--preview-ready:#168795;--preview-ready-glow:#16879566}
.seat.timed-turn{--ring-color:var(--preview-ring)}
.seat.timer-urgent{--ring-color:#e78066}
.seat.active .avatar,.seat.timed-turn .avatar{border-color:var(--preview-rim)!important}
.turn-spark:before{background:var(--preview-ember);filter:drop-shadow(0 0 2px var(--preview-flare))}
.turn-spark i{background:linear-gradient(var(--preview-ember),var(--preview-spark) 45%,var(--preview-tail))}
#hand .card.prepared{box-shadow:0 0 0 2px var(--preview-ready),0 0 12px var(--preview-ready-glow)!important}

/* Darker timer track and ember core; bright tips preserve the spark effect. */
:root{--preview-ring:#ba852d;--preview-core:#b44816;--preview-core-edge:#79300e;--preview-flare:#cf6c24}
:root[data-theme="3"]{--preview-ring:#08616c;--preview-core:#a0442d;--preview-core-edge:#6c2b20;--preview-flare:#bd6948}
.turn-spark:before{background:linear-gradient(25deg,var(--preview-core-edge),var(--preview-core) 65%,var(--preview-flare));filter:drop-shadow(0 0 1px var(--preview-flare));z-index:1}

/* A single thicker countdown arc, with no portrait rim underneath. */
.seat.timed-turn .avatar{border-color:var(--preview-rim,#e7e1d3)!important}
.seat.timed-turn .avatar::after{padding:5px}
.turn-spark{inset:-.5px}
@media(max-width:700px){.seat.timed-turn .avatar::after{padding:4px}.turn-spark{inset:0}}

/* Warm copper contrasts with the turquoise felt. */
:root[data-theme="3"]{--preview-ring:#ad4f23;--preview-ready:#ad4f23;--preview-ready-glow:#ad4f235c}

/* Flame-shaped timer head: dark outline, orange body, warm inner flame. */
.turn-spark:before{display:none}
.timer-flame{position:absolute;left:50%;top:0;width:26px;height:39px;transform:translate(-50%,-86%);transform-origin:50% 86%;filter:drop-shadow(0 0 2px #81310b) drop-shadow(0 0 4px #ff812766);animation:timer-fire .42s ease-in-out infinite alternate}
.timer-flame svg{display:block;width:100%;height:100%;overflow:visible}
.turn-spark i{opacity:.6;height:4px;width:1.5px}
@keyframes timer-fire{from{transform:translate(-50%,-86%) skewX(-5deg) scale(.96,1)}to{transform:translate(-50%,-86%) skewX(5deg) scale(1.04,.92)}}
@media(max-width:700px){.timer-flame{width:20px;height:30px}}
@media(prefers-reduced-motion:reduce){.timer-flame{animation:none}}

/* Small living ember: independently flickering tongues, no static flame icon. */
.timer-flame{width:14px;height:19px;transform:translate(-50%,-75%);filter:none;animation:none}
.timer-flame b{position:absolute;bottom:2px;left:4px;width:7px;height:15px;background:linear-gradient(0deg,#d14d16 10%,#ff9729 48%,#ffd276 80%,transparent);border-radius:65% 25% 50% 50%;transform-origin:50% 100%;animation:live-flame .31s ease-in-out infinite alternate;opacity:.92}
.timer-flame b:nth-child(2){left:1px;width:6px;height:12px;animation-duration:.23s;animation-delay:-.12s;rotate:-22deg}
.timer-flame b:nth-child(3){left:8px;width:5px;height:13px;animation-duration:.37s;animation-delay:-.24s;rotate:19deg}
.timer-flame b:nth-child(4){left:5px;width:4px;height:10px;background:linear-gradient(0deg,#f88022,#ffe6a7 60%,transparent);animation-duration:.19s;animation-delay:-.08s}
.timer-flame em{position:absolute;bottom:1px;left:4px;width:7px;height:5px;border-radius:55%;background:#ce571e;box-shadow:0 0 3px #fca43b80;animation:ember-breathe .43s ease-in-out infinite alternate}
@keyframes live-flame{0%{transform:skewX(-14deg) scale(.8,.65);opacity:.7}45%{transform:skewX(9deg) scale(1.05,1);opacity:1}100%{transform:skewX(-3deg) scale(.75,.83);opacity:.85}}
@keyframes ember-breathe{to{background:#ee8028;transform:scale(.85,1.1)}}
.turn-spark i{height:3px;width:1px}
@media(max-width:700px){.timer-flame{width:14px;height:19px;scale:.85;transform-origin:50% 75%}}
@media(prefers-reduced-motion:reduce){.timer-flame b,.timer-flame em{animation:none}}

/* Counter-rotate at the ignition point so the flame always rises upwards. */
.timer-flame{transform-origin:50% 75%;transform:translate(-50%,-75%) rotate(calc(0deg - var(--seat-progress,0deg)))}

/* Monochrome recessed stamp: white background disappears into the felt. */
.table-label.with-brand{mix-blend-mode:multiply}
.table-label.with-brand>span{border-radius:0;filter:grayscale(1) contrast(8) invert(1);opacity:.23;mix-blend-mode:multiply;background-color:transparent}
@media(min-width:901px) and (min-height:501px){.table-label.with-brand>span{width:180px;height:180px}}
@media(min-width:901px) and (max-height:700px){.table-label.with-brand>span{width:144px;height:144px}}

/* Recessed felt impression: transparent silhouette plus inner bevel only. */
.table-label.with-brand{mix-blend-mode:normal}
.table-label.with-brand>span{filter:url(#felt-deboss);opacity:1;mix-blend-mode:normal}

/* Persistent felt stamp: remains beneath live cards in both table themes. */
.game-shell .table-label.with-brand,.game-shell .table-label.with-brand.hidden,.game-shell .table-label.with-brand.trix-brand{opacity:1;visibility:visible;top:45%;z-index:0;pointer-events:none;transition:none}
#trick,#trix-board{z-index:1}
@media(max-width:700px){.game-shell .table-label.with-brand,.game-shell .table-label.with-brand.trix-brand{top:48%}}

/* Prepared cards lean right; both cancellation paths ease back to the fan. */
#hand .card{transition:transform .32s cubic-bezier(.22,.7,.25,1),box-shadow .25s ease,filter .17s,border-color .17s}
#hand .card.prepared{transform:translateY(calc(var(--rise) - 18px)) rotate(8deg)!important}
@media(max-width:700px),(max-height:500px){#hand .card.prepared{transform:translateY(calc(var(--rise) - 12px)) rotate(8deg)!important}}
@media(prefers-reduced-motion:reduce){#hand .card{transition:none}}

.seat .flag-badge.image-country-flag{font-size:0!important;width:22px;height:16px;min-width:0;line-height:0;border:0;border-radius:2px;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:0 0 1px #0008;z-index:6}
@media(max-width:700px){.seat .flag-badge.image-country-flag{width:18px;height:14px}.seat.south{bottom:calc(58px + var(--hand-size)*1.75 + 29px)}}
@media(min-width:560px) and (max-height:500px){.seat.south{bottom:calc(var(--desktop-south-bottom,82px) + 20px)}}

/* A clearly visible, gentle return after the incoming suit rejects a prepared card. */
#hand .card.prepared-return{transition:transform .62s cubic-bezier(.4,0,.2,1),box-shadow .62s ease,filter .62s ease!important}
.prepared-flight{animation:none!important;box-shadow:0 3px 8px #0003!important}
@media(prefers-reduced-motion:reduce){#hand .card.prepared-return{transition:none!important}}

/* The shared flight owns arrival; do not stack the old pop animation on it. */
#trick .card{animation:none!important}

.double-impact-ring{position:fixed;pointer-events:none;z-index:999;border:2px solid #dfb273;border-radius:50%;box-shadow:0 0 8px #dba45a55;opacity:0}

/* Tight contact shadow, not a glowing game-effect ring. */
.double-impact-ring{border:0;box-shadow:none;background:radial-gradient(ellipse,#0007,transparent 70%)}
/* Keep the Trix stamp in its own upper lane through all thirteen ranks. */
.game-shell .table-label.with-brand.trix-brand{top:var(--trix-logo-top,32%);visibility:visible;opacity:1}
.game-shell .table-label.with-brand.trix-brand>span{width:var(--trix-logo-size,64px);height:var(--trix-logo-size,64px);margin:0}
#auction .kingdom-owner{margin:4px 0;font-weight:700;font-size:clamp(15px,4vw,21px);overflow-wrap:anywhere}
@media(max-width:700px) and (min-height:571px){.seat .avatar,.seat.north .avatar,.seat.south .avatar{width:48px;height:48px}}
@media(max-width:700px) and (min-height:700px){.seat .avatar,.seat.north .avatar,.seat.south .avatar{width:54px;height:54px}}
@media(max-width:559px) and (max-height:570px){.seat .avatar,.seat.north .avatar,.seat.south .avatar{width:38px;height:38px}}
@media(max-width:700px) and (min-height:501px),(max-width:559px){#trix-board{top:var(--phone-trix-y,48%);transform:translate(-50%,-50%) scale(var(--phone-trix-scale,1));transform-origin:center}}

@media(min-width:560px) and (max-height:500px){.game-shell .table-label.with-brand.trix-brand{left:40%;top:48px}.game-shell .table-label.with-brand.trix-brand>span{width:44px;height:44px}}

/* A larger felt brand scales with the table, preserving its engraved finish. */
.game-shell .table-label.with-brand:not(.trix-brand)>span{width:clamp(112px,24vw,260px);height:clamp(112px,24vw,260px);margin:0}
@media(max-width:700px){.game-shell .table-label.with-brand:not(.trix-brand)>span{width:clamp(88px,30vw,170px);height:clamp(88px,30vw,170px)}}
@media(max-height:500px){.game-shell .table-label.with-brand:not(.trix-brand)>span{width:90px;height:90px}}