.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#hand-count{align-items:center}
#hand-count-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #faf7f2;background:linear-gradient(145deg,#faf7f2,#e8e0e2);box-shadow:0 2px 5px #80607517}
#turn-status.your-turn{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #765063;border-radius:20px;background:#654455;color:#fff8f4;font-weight:650;letter-spacing:.04em;box-shadow:0 2px 7px #66435325;line-height:1.2}
#turn-status.your-turn:before{margin:0;background:#f0d9af;width:5px;height:5px;box-shadow:0 0 0 2px #f0d9af28}
.hand-meta:has(.your-turn) #hand-count-number{border-color:#a78193;color:#633e53}
.player .seat-hand{padding:0;cursor:pointer}
.player .seat-hand:disabled{cursor:default;opacity:1}
.player .seat-hand:not(:disabled):hover{border-color:#ae8299;box-shadow:0 0 0 3px #a581941c}
.player-name{max-width:74px;text-align:center;line-height:1.26;letter-spacing:.02em}
.player-nickname{max-width:none;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.seat-identity strong,.room-table.compact .seat-identity strong{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;line-height:1.28}
.result-rank{display:grid;grid-template-columns:44px minmax(0,1fr) max-content;gap:8px;align-items:baseline}
.result-rank b,.record-ranking b{overflow-wrap:anywhere;min-width:0}
.record-ranking li>span,.record-ranking small{flex:none}
#reaction-picker{margin:0;padding:5px;position:fixed;inset:auto;overflow:visible;border:1px solid #bb9fab70;border-radius:16px;background:#fbf7f2;color:#654455;box-shadow:0 9px 26px #54404b25}
#reaction-picker:popover-open{display:flex;gap:3px}
#reaction-picker button{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-size:19px}
#reaction-picker button:is(:hover,:focus-visible){background:#e8dbe3}
.reaction-flight{position:fixed;z-index:90;display:grid;place-items:center;width:36px;height:36px;border:1px solid #c6a5b4;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffaf5,#eadbe2);color:#81425e;font-size:21px;box-shadow:0 6px 16px #78516338;pointer-events:none}
.ace-award{position:relative;display:grid;place-items:center;width:146px;height:132px;margin:6px auto 13px;isolation:isolate}
.ace-award:before{content:"";position:absolute;inset:7px 14px;border:1px solid #bea58178;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#fff9e6,#e7dce7 65%,#f0e5dc);box-shadow:inset 0 0 0 5px #fcf6ef80,0 8px 28px #8e668420;z-index:-2}
.ace-award i,.ace-award span{position:absolute;width:51px;height:74px;border:1px solid #aa887c;border-radius:6px;box-shadow:0 5px 12px #64435438;transform-origin:50% 72%;transform:translate(var(--spread-x,0px),var(--spread-y,0px)) rotate(var(--angle,0deg))}
.ace-award i:first-child{--angle:-23deg;--spread-x:-10px;--unfold-delay:90ms;background:linear-gradient(145deg,#a97b94,#6a455d)}
.ace-award i:nth-child(2){--angle:19deg;--spread-x:10px;--spread-y:2px;--unfold-delay:240ms;background:linear-gradient(145deg,#e5c999,#a78062)}
.ace-award span{display:grid;align-content:center;justify-items:center;gap:1px;background:linear-gradient(150deg,#fffdf4,#f4e7d5);color:#743951;outline:1px solid #b58d6970;outline-offset:-5px}
.ace-award b{font:38px/.95 Georgia,serif}
.ace-award small{font-size:15px}
body:not(.no-motion) .ace-award :is(i,span){animation:ace-unfold .57s cubic-bezier(.17,.8,.24,1) var(--unfold-delay,0ms) both}
@keyframes ace-unfold{from{transform:translate(0,11px) rotate(0deg) scale(.88);opacity:.1}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body:not(.no-motion) .ace-award :is(i,span){animation:none}}
#history-round{width:calc(100% - 44px);min-height:34px;margin:9px 22px;padding:5px 9px;border:1px solid #c0aeb87a;border-radius:7px;background:#f6f0eb;color:#694b5b;font:inherit;font-size:12px}
.history-row{grid-template-columns:23px minmax(0,1fr);column-gap:9px;row-gap:5px;padding:11px 0}
.history-row .step{grid-row:1 / span 2;margin:0;color:#78666f;font-variant-numeric:tabular-nums}
.history-row .who{grid-column:2;color:#554852;line-height:1.4;overflow-wrap:anywhere}
.history-row.ours .who{color:#6f4059}
.history-row .what{grid-column:2;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;word-break:normal}
.history-row .what em{color:#78666f;margin:0;min-width:34px}
.history-cards{display:flex;flex-wrap:wrap;align-items:center;gap:3px;--card-w:25px;--card-h:34px}
.history-cards .card{width:var(--card-w);height:var(--card-h);border-radius:4px;box-shadow:0 1px 2px #64445223;flex:none}
.history-cards .card-corner{top:3px;left:3px;font-size:10px;line-height:.9}
.history-cards .card-corner>span{font-size:8px}
.history-cards .card.joker .card-corner{font-size:9px}
.history-cards .card-symbol{position:absolute;right:3px;bottom:2px;font-size:13px;line-height:1}
.history-cards .wild-tag{display:none}
@media(max-width:700px){.player-name{max-width:61px;font-size:10px}.hand-meta{gap:7px}#hand-count-number{width:25px;height:25px}}
@media(max-width:360px){.player-left .player-name,.player-right .player-name{max-width:50px}}
@media(max-height:500px) and (orientation:landscape){.player-name{max-width:65px}}

.card.joker{
 --joker-metal:#718084;
 --joker-wash:#e6ebea;
 color:#424e54;
 background:radial-gradient(ellipse at 56% 47%,#f8faf8,transparent 80%),linear-gradient(148deg,#fdfcf7,#edf0ed);
}
.card.joker.red{
 --joker-metal:#a47b4f;
 --joker-wash:#f3e4d2;
 color:#8c3e53;
 background:radial-gradient(ellipse at 56% 47%,#fffcf5,transparent 80%),linear-gradient(148deg,#fffaf2,#f4e6e2);
}
.card.joker .card-corner{font-weight:700}
.joker-mark{
 position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
 width:56%;display:grid;justify-items:center;gap:3px;
}
.joker-seal{width:100%;height:auto;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.joker-rim{fill:var(--joker-wash);fill-opacity:.56;stroke:var(--joker-metal)}
.joker-inset{stroke:var(--joker-metal);stroke-width:.6}
.joker-emblem{fill:currentColor;fill-opacity:.11}
.joker-word{font:600 clamp(6px,calc(var(--card-w,80px) * .10),9px)/1 Georgia,serif;letter-spacing:.13em}
.card.joker.small .joker-mark{left:auto;top:auto;right:7%;bottom:8%;width:57%;transform:none}
.card.joker.small .card-corner{top:8%;left:9%;font-size:clamp(7px,calc(var(--card-w,var(--play-w)) * .24),11px);line-height:1;letter-spacing:.1em}

#round-number,.scoreboard{color:#776770;font-size:13px;font-weight:500}
.team-badge{font-size:12px}
.result-sub,.result-rank>span:last-child,.record-heading>b,.record-outcome,.record-ranking small{font-size:13px}
.result-rank>span:last-child,.result-sub{color:#775568}
@media(max-width:700px){
 .header-title{flex-direction:column;align-items:flex-start;gap:3px}
 #round-number{display:block;padding:0;border:0;font-size:11px;line-height:1.1}
 .scoreboard{font-size:12px}
}
@media(max-height:500px) and (orientation:landscape){
 .header-title{flex-direction:row;align-items:center;gap:7px}
 #round-number{display:block;padding-left:7px;font-size:11px}
 .seat-hand>.team-badge{font-size:11px}
}
@media(max-width:360px){
 #room-label{display:none}
}
@media(max-height:740px) and (max-width:700px) and (orientation:portrait){
 .player-top{top:7px}
}

.court-portrait{
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:59%;height:auto;max-height:81%;
 --court-metal:#657778;--court-wash:#dce6e3;
 stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;
}
.card.red .court-portrait{--court-metal:#9f784c;--court-wash:#f1e2c9}
.court-frame{fill:var(--court-wash);fill-opacity:.33;stroke:var(--court-metal);stroke-width:.65}
.court-divider{stroke:var(--court-metal);stroke-width:.7}
.court-ink{fill:currentColor;fill-opacity:.14}
.court-accent{fill:var(--court-wash);stroke:var(--court-metal)}
.card.small .court-portrait{left:auto;top:auto;right:6%;bottom:5%;transform:none;width:60%;stroke-width:1.45}