.avatar .portrait{width:100%;height:100%;display:block;border-radius:50%;overflow:hidden}.seat .avatar,.you-marker .avatar{padding:0;overflow:visible}.seat.active .avatar::after{content:'';position:absolute;inset:-5px;border:1px solid #e8cd7c;border-radius:50%;animation:turn-ripple 1.4s ease-out 2;pointer-events:none}.avatar{position:relative}.table-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:8}.table-effects i{position:absolute;display:block;pointer-events:none}.landing-ring{width:56px;height:56px;border:2px solid #af913a70;border-radius:50%;animation:landing-ripple .5s ease-out both;transform:translate(-50%,-50%)}.result-ring{width:100px;height:100px;border:2px solid #c99c3b;border-radius:50%;animation:result-ripple .85s ease-out both}.result-ring-away{border-color:#a68cbb}.celebration-particle{width:7px;height:11px;border-radius:2px;animation:celebration-burst 1.1s cubic-bezier(.15,.65,.35,1) var(--delay) both}.table-flourishes{position:absolute;inset:14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none;color:#9e833a55;font:24px Georgia,serif}.table-flourishes span:nth-child(even){justify-self:end}.table-flourishes span:nth-child(n+3){align-self:end}.table-flourishes span:nth-child(2),.table-flourishes span:nth-child(4){color:#af76594a}
.center-mark{filter:none;text-shadow:0 1px #fff7}.center-mark::before,.center-mark::after{content:'';position:absolute;width:112px;height:112px;border:1px solid #a8903740;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.center-mark::after{width:94px;height:94px;border-style:dashed;opacity:.65}.trick-result:not([hidden]){animation:result-pop .28s cubic-bezier(.2,.8,.3,1.3) both}.trick-result>span{background:linear-gradient(135deg,#d3b666,#9b854a);color:#fff1bc;box-shadow:inset 0 1px #f8e9b16b,0 2px 4px #0003}.trump-announcement:not([hidden]) .trump-reveal-symbol{animation:trump-emerge .7s cubic-bezier(.2,.8,.25,1.2) both}.trump-reveal{position:relative}.trump-reveal::before{content:'';position:absolute;inset:12%;border:1px solid #d5bb6c50;border-radius:50%;pointer-events:none;animation:trump-halo 1.4s ease-out both}.dealing-card{box-shadow:0 4px 8px #031b1590,0 0 0 1px #e7d39455}.picker-cards .card{transition:transform .18s ease,box-shadow .18s ease}.picker-cards .card:active{transform:translateY(-5px)}
@keyframes turn-ripple{0%{transform:scale(.94);opacity:.85}100%{transform:scale(1.3);opacity:0}}@keyframes landing-ripple{0%{opacity:0;scale:.55}30%{opacity:.7}100%{opacity:0;scale:1.6}}@keyframes result-ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:.75}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}@keyframes celebration-burst{0%{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin));opacity:0}}@keyframes result-pop{from{scale:.85;opacity:0}to{scale:1;opacity:1}}@keyframes trump-emerge{from{transform:scale(.65) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes trump-halo{from{transform:scale(.65);opacity:0}30%{opacity:.8}to{transform:scale(1.2);opacity:0}}
@media(max-width:700px){.table-flourishes{inset:10px;font-size:19px}.center-mark::before{width:86px;height:86px}.center-mark::after{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){.seat.active .avatar::after,.table-effects,.trump-reveal::before{display:none}.trick-result:not([hidden]),.trump-announcement:not([hidden]) .trump-reveal-symbol{animation:none}.picker-cards .card{transition:none}}

/* Seat labels and card backs stay outside the measured playing surface. */
.table-ring{inset:var(--board-top,24%) var(--board-right,20%) var(--board-bottom,15%) var(--board-left,20%)}
.north{top:2%}.west{left:2%}.east{right:2%}.north strong,.north small{background:transparent;padding:0}
.seat strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Give the playing surface more room and keep North's hand to his right. */
.north .backs{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);display:flex;margin:0;white-space:nowrap}
#hand{--hand-card-width:min(24cqw,calc(22dvh / 1.45),108px);height:calc(var(--hand-card-height) + 23px);padding-top:8px}
.hand-zone{padding-top:6px;padding-bottom:10px}
@media(orientation:landscape) and (max-height:600px){#hand{--hand-card-width:min(20cqw,calc(20dvh / 1.45),88px);height:calc(var(--hand-card-height) + 18px);padding-top:6px}.hand-zone{padding-top:4px;padding-bottom:7px}}
@media(orientation:portrait) and (max-height:650px){#hand{--hand-card-width:min(24cqw,calc(20dvh / 1.45),94px);height:calc(var(--hand-card-height) + 20px)}.hand-zone{padding-top:4px;padding-bottom:7px}}

/* Jewel colours and a gold edge make the trump reveal clear against the felt. */
#trumpAnnouncement{--suit-light:#a4ecff;--suit-mid:#299fe8;--suit-dark:#1850a8;--suit-glow:#47baff70;background:radial-gradient(ellipse at 50% 44%,#24645aeb,#062d29f5 75%)}
#trumpAnnouncement[data-suit=H]{--suit-light:#ffbbc1;--suit-mid:#ff375c;--suit-dark:#ad123a;--suit-glow:#ff496c70}
#trumpAnnouncement[data-suit=D]{--suit-light:#ffd199;--suit-mid:#ff714b;--suit-dark:#c62749;--suit-glow:#ff965670}
#trumpAnnouncement[data-suit=C]{--suit-light:#c0ffd2;--suit-mid:#42d691;--suit-dark:#087b66;--suit-glow:#59e8a070}
#trumpAnnouncement .trump-reveal-symbol{position:relative;z-index:1;color:var(--suit-mid);text-shadow:none;filter:drop-shadow(0 3px 0 #70501c) drop-shadow(0 7px 2px #001e27b0) drop-shadow(0 0 20px var(--suit-glow));-webkit-text-stroke:1.5px #f9d383;padding:0 .08em}
@supports(background-clip:text){#trumpAnnouncement .trump-reveal-symbol{background:linear-gradient(145deg,#fff9dc 3%,var(--suit-light) 20%,var(--suit-mid) 48%,var(--suit-dark) 76%,var(--suit-light) 100%);background-clip:text;-webkit-background-clip:text;color:transparent}}
#trumpAnnouncement .trump-reveal-name{color:#ffe5a2;text-shadow:0 2px 0 #806031,0 4px 12px #001b1c}
#trumpAnnouncement .trump-reveal-label{color:#eee5bc}
#trumpAnnouncement .trump-reveal-caller{color:#d3e9d2}
#trumpAnnouncement .trump-reveal::before{border:2px solid #f4cf6c55;background:radial-gradient(ellipse,var(--suit-glow),transparent 68%);box-shadow:0 0 36px var(--suit-glow),inset 0 0 24px #d9be5930}