/* Persistent seats and stacked three-row hands, inspired by the supplied gameplay video. */
.comparison-table { position: relative; isolation: isolate; height: calc(100dvh - var(--header-h)); max-width: 1600px; margin: auto; color: #eee6c5; --card-w: clamp(30px,6.1vh,50px); --row-step: calc(var(--card-w)*.86); --seat-w: clamp(158px,21vw,250px); }
.comparison-table-ring { position: absolute; z-index: -1; inset: 8% 6% 7%; border: 2px solid #c5bc7c30; border-radius: 48%; background: radial-gradient(ellipse at 50% 36%,#287b5b45,#174e382b 65%,#052e242e); box-shadow: inset 0 0 0 9px #a5be8c07,0 8px 15px #001c2422; }
.comparison-seat { position: absolute; width: var(--seat-w); display: grid; justify-items: center; gap: 8px; }
.comparison-seat--north { left: 50%; top: 2%; transform: translateX(-50%); }
.comparison-seat--north-west { left: 32%; top: 2%; transform: translateX(-50%); }
.comparison-seat--north-east { left: 68%; top: 2%; transform: translateX(-50%); }
.comparison-seat--west { left: 2%; top: 32%; }
.comparison-seat--east { right: 2%; top: 32%; }
.comparison-seat--self { left: 50%; bottom: 36px; transform: translateX(-50%); }
.comparison-person { display: flex; align-items: center; gap: 7px; width: 100%; justify-content: center; }
.comparison-person .avatar { width: 35px; height: 35px; border-width: 2px; }
.comparison-person > div { min-width: 0; }
.comparison-person strong { display: block; max-width: 160px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparison-person em { color: #f3d996; font-size: 9px; font-style: normal; }
.comparison-person .player-uid { max-width: 148px; font-size: 7px; line-height: 1.25; margin-top: 3px; }
.comparison-three-lanes { height: calc(var(--row-step)*2 + var(--card-w)*1.452); padding-right: 28px; }
.comparison-lane { position: relative; height: var(--row-step); display: flex; align-items: flex-start; gap: 4px; }
.comparison-lane-name { width: 16px; font: 10px/1.3 'KaiTi','STKaiti',serif; margin-top: 6px; color: #c6d2ad; }
.comparison-lane-cards { display: flex; gap: 3px; perspective: 650px; }
.comparison-card-turn { display: block; perspective: 650px; }
.comparison-card-back { display: block; width: var(--card-w); height: calc(var(--card-w)*1.452); border-radius: 4px; border: 1px solid #b8c3a3; box-shadow: 0 2px 4px #001c2699; background: repeating-linear-gradient(45deg,#234e49 0 3px,#34675c 3px 4px); outline: 2px solid #e5dfba66; outline-offset: -4px; }
.comparison-lane-score { position: absolute; left: calc(100% + 5px); top: 4px; font: bold 18px/1.2 Georgia,serif; color: #b8cbb0; }
.comparison-lane.is-shown .comparison-lane-score { text-shadow: 0 1px 3px #002719; }
.comparison-lane-score.positive,.comparison-seat-total.positive { color: #ffdb75; }
.comparison-lane-score.negative,.comparison-seat-total.negative { color: #80d4d3; }
.comparison-lane.is-current { z-index: 4; animation: comparison-row-open .48s ease-out both; }
.comparison-lane.is-current .playing-card { animation: comparison-card-flip .60s cubic-bezier(.2,.65,.3,1) both; animation-delay: calc(65ms*var(--flip-index)); transform-origin: 50% 55%; }
.comparison-lane.is-current .comparison-lane-score { animation: comparison-score-rise .3s ease-out .4s both; }
.comparison-lane.is-current.lane-leader .playing-card { outline: 1px solid #ffe2a2; box-shadow: 0 0 12px #ffdf9544; }
.comparison-hand-type { position: absolute; left: 50%; top: 45%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #dfc27a99; border-radius: 4px; background: #194833ed; padding: 2px 8px; color: #fff1b3; font: bold 13px/1.2 'KaiTi','STKaiti',serif; text-shadow: 0 1px 2px #0e3426; animation: comparison-hand-stamp .90s ease-out both; pointer-events: none; }
.comparison-seat-total { position: relative; font-size: 10px; color: #cfdbbd; text-align: center; min-height: 19px; }
.comparison-seat-total > b { font: bold 18px/1.1 Georgia,serif; margin-left: 4px; }
.comparison-xi { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); max-width: var(--seat-w); color: #ffdf84; font: bold 12px/1.2 'KaiTi','STKaiti',serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 9px #f7d77c77; animation: comparison-xi-burst .5s ease-out both; }
.comparison-xi:before { content: '喜 · '; }
.round-winner .comparison-person .avatar { outline: 2px solid #eecb70; box-shadow: 0 0 17px #f6cd6966; }
.is-summary .comparison-seat-total { animation: comparison-score-rise .35s ease-out both; }
.comparison-table-center { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); width: clamp(145px,23vw,290px); text-align: center; display: grid; justify-items: center; gap: 12px; }
.comparison-center-eyebrow { color: #d3d2a480; font-size: 10px; letter-spacing: 3px; }
.comparison-table-center h2 { font: bold 32px/1.2 'KaiTi','STKaiti',serif; color: #ffe1a0; text-shadow: 0 3px 3px #062e22,0 0 15px #efd17733; letter-spacing: 3px; }
.comparison-table-center ol { display: flex; list-style: none; gap: 5px; margin: 0; padding: 0; }
.comparison-table-center li { color: #8ba58d; border-bottom: 2px solid #829f7044; padding: 4px 8px; font-size: 10px; }
.comparison-table-center li.current { color: #ffe4a5; border-color: #e1bc68; }
.comparison-table-center li.done { color: #cfc58c; }
.comparison-table-center small { color: #b3c9a8; font-size: 10px; }
.comparison-table-center p { width: 100%; max-height: 3em; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; color: #e7dfbb; }
.comparison-crown { color: #f5ce71; font: 50px/1 Georgia,serif; filter: drop-shadow(0 0 10px #f7cc6680); }
.is-summary .comparison-table-center { padding: 12px 5px; border-block: 1px solid #efc76b55; background: radial-gradient(ellipse,#b18b3238,transparent 75%); animation: comparison-winner-burst .5s ease-out both; gap: 8px; }
.comparison-opening { position: absolute; pointer-events: none; z-index: 8; left: 50%; top: 43%; width: 65%; height: 80px; display: grid; place-items: center; transform: translate(-50%,-50%); animation: comparison-opening .48s ease-out both; }
.comparison-opening b { font: bold 44px/1 'KaiTi','STKaiti',serif; color: #ffde80; text-shadow: 0 3px 2px #5d491d,0 0 16px #e3d479; z-index: 1; letter-spacing: 6px; }
.comparison-opening i { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#ffeea6,transparent); box-shadow: 0 0 18px 5px #d2f5a64d; }
[data-comparison-lane="0"] .comparison-lane.is-current .playing-card { animation-delay: calc(200ms + 55ms*var(--flip-index)); }
.comparison-table-footer { position: absolute; bottom: 4px; right: 15px; left: 15px; display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: #bac9a6; }
.comparison-table-footer .btn { min-height: 27px; padding: 4px 13px; font-size: 10px; }
@keyframes comparison-card-flip { from { transform: rotateY(90deg) scale(.94); opacity: .2; } 70% { transform: rotateY(-7deg) scale(1.04); opacity: 1; } to { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes comparison-row-open { from { transform: translateY(-8px); } to { transform: translateY(0); } }
@keyframes comparison-score-rise { from { transform: translateY(9px) scale(.85); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes comparison-hand-stamp { 0%,35% { opacity: 0; scale: 1.4; } 65% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes comparison-opening { 0% { opacity: 0; scale: 1.2; } 28%,70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; visibility: hidden; } }
@keyframes comparison-xi-burst { from { opacity: 0; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes comparison-winner-burst { from { opacity: 0; scale: .7; } 70% { opacity: 1; scale: 1.06; } to { opacity: 1; scale: 1; } }
.reduced-motion .comparison-table *, .reduced .comparison-table * { animation: none!important; }
.reduced-motion .comparison-opening,.reduced .comparison-opening { display: none; }
@media(prefers-reduced-motion:reduce) { .comparison-table * { animation: none!important; } .comparison-opening { display: none; } }
@media(orientation:landscape) and (max-height:600px) {
  .comparison-table { --card-w: clamp(29px,8vh,38px); --seat-w: clamp(148px,20vw,205px); }
  .comparison-seat { gap: 4px; }
  .comparison-person { gap: 5px; }
  .comparison-person .avatar { width: 24px; height: 24px; }
  .comparison-person strong { font-size: 9px; max-width: 112px; }
  .comparison-person .player-uid { font-size: 6px; max-width: 109px; margin-top: 1px; }
  .comparison-lane-name { font-size: 8px; width: 12px; margin-top: 3px; }
  .comparison-lane-score { font-size: 14px; }
  .comparison-seat-total { font-size: 8px; min-height: 14px; }
  .comparison-seat-total > b { font-size: 14px; }
  .comparison-seat--self { bottom: 29px; }
  .comparison-xi { top: 16px; font-size: 9px; }
  .comparison-table-center { gap: 6px; top: 40%; }
  .comparison-table-center h2 { font-size: 23px; letter-spacing: 2px; }
  .comparison-center-eyebrow { font-size: 7px; letter-spacing: 1px; }
  .comparison-table-center li { font-size: 8px; padding: 3px 7px; }
  .comparison-table-center small { font-size: 8px; }
  .comparison-table-center p { font-size: 9px; }
  .comparison-crown { font-size: 30px; }
  .is-summary .comparison-table-center { gap: 4px; padding: 5px; top: 36%; }
  .comparison-opening b { font-size: 32px; }
}
@media(orientation:portrait) and (max-width:700px) {
  .comparison-table { --card-w: clamp(29px,8.5vw,36px); --seat-w: 46vw; }
  .comparison-seat--north-west { left: 25%; top: 3%; }
  .comparison-seat--north-east { left: 75%; top: 3%; }
  .comparison-seat--west { left: 2%; top: 34%; }
  .comparison-seat--east { right: 2%; top: 34%; }
  .comparison-seat--north { top: 4%; }
  .comparison-seat--self { bottom: 40px; }
  .comparison-person .avatar { width: 28px; height: 28px; }
  .comparison-person strong { font-size: 10px; max-width: 120px; }
  .comparison-person .player-uid { font-size: 6px; max-width: 111px; }
  .comparison-seat { gap: 6px; }
  .comparison-lane-name { width: 13px; font-size: 8px; }
  .comparison-lane-score { font-size: 14px; }
  .comparison-table-center { top: 50%; width: 170px; gap: 8px; }
  .comparison-table-center h2 { font-size: 25px; }
  .comparison-table[data-player-count="4"] .comparison-table-center,.comparison-table[data-player-count="5"] .comparison-table-center { top: 61%; }
  .comparison-table-center small { font-size: 9px; }
  .comparison-table-center li { padding-inline: 8px; }
  .comparison-crown { font-size: 30px; }
  .is-summary .comparison-table-center { gap: 4px; padding: 6px; }
  .comparison-table-center p { font-size: 10px; }
  .comparison-table-ring { inset: 2% 1% 6%; border-radius: 45%; }
  .comparison-opening { top: 50%; }
  .comparison-opening b { font-size: 32px; white-space: nowrap; }
}