.match-progress {
  flex: 0 0 auto; width: max-content; max-width: 100%; margin: 0;
  padding: 4px 8px; border: 1px solid #8fa68f3b; border-radius: 5px;
  background: #102e2b; color: #c8d7bc; font-size: 11px; line-height: 1.4;
}
body.game-active #game-shell .match-progress {
  position: absolute; top: 43px;
  left: max(calc(var(--safe-left) + 99px), calc(var(--scene-w) * .125));
  z-index: 8; max-width: 19%; padding: 3px 5px; margin: 0;
  background: #053d3bd4; color: #eadbb5; font-size: 10px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.match-progress[data-finished='true'] { color: #ffe091; border-color: #d0b46877; }
.match-summary { min-width: 0; margin: 18px 0 6px; }
.match-summary h3.match-summary-title {
  margin: 0 0 6px; color: #e9d8a9; font-size: 16px; line-height: 1.5; font-weight: 600;
}
.panel .match-summary p.match-summary-note,
.panel .match-summary p.match-score-note,
.panel .match-summary p.match-empty,
.panel .match-summary p.match-hand-meta {
  margin: 5px 0 9px; color: #abc4b1; font-size: 11px; line-height: 1.6;
}
.match-table-caption { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.match-player-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.match-player-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 320px; padding: 18px 20px 16px;
  border: 1px solid #d8c99e; border-radius: 9px; background: linear-gradient(165deg, #fff7e1, #fff4da 58%, #f3e5c6);
  color: #704a32; text-align: left; box-shadow: 0 5px 16px #00181655; overflow: hidden;
}
.match-player-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid #a39b7145; border-radius: 6px; pointer-events: none; }
.match-player-card.match-you { border-color: #efd990; box-shadow: 0 0 0 2px #d0a94f55, 0 5px 16px #00181655; }
.match-player-header { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.match-avatar { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border: 2px solid #a48a50; border-radius: 7px; background: #245446 center / cover no-repeat; box-shadow: 0 2px 5px #30443766; }
.match-avatar-0 { background-image: url('./art/avatar-you.svg'); }
.match-avatar-1 { background-image: url('./art/avatar-rice.svg'); }
.match-avatar-2 { background-image: url('./art/avatar-kiwi.svg'); }
.match-avatar-3 { background-image: url('./art/avatar-fish.svg'); }
.match-player-identity { flex: 1 1 0; min-width: 0; }
.match-player-name { margin: 0; color: #704a32; font-size: 20px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.match-player-rank { display: block; margin-top: 3px; color: #947a58; font-size: 12px; line-height: 1.5; }
.match-player-stats { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 0; margin: 18px 0 15px; }
.match-player-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; padding: 4px 0; }
.match-player-stat dt { color: #704a32; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.match-player-stat dd { margin: 0; color: #704a32; font-size: 16px; line-height: 1.3; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.match-player-score { position: relative; z-index: 1; margin-top: auto; padding-top: 8px; border-top: 1px solid #b7a07e42; text-align: left; }
.panel .match-summary .match-player-total { margin: 2px 0 1px; font-size: 40px; line-height: 1.12; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.panel .match-summary .match-player-total.match-gain { color: #b9392f; }
.panel .match-summary .match-player-total.match-loss { color: #1c6d73; }
.panel .match-summary .match-player-total.match-even { color: #506f5d; }
.match-player-total-label { display: block; color: #704a32; font-size: 15px; line-height: 1.3; }
.panel .match-summary .match-player-counts { margin: 5px 0 0; color: #947a58; font-size: 11px; line-height: 1.4; }
.match-gain { color: #ffe3a5; }
.match-loss { color: #eea6a1; }
.match-even { color: #c0d3c2; }
.match-records, .match-history { margin-top: 15px; border-top: 1px solid #68876d66; padding-top: 8px; }
.match-summary summary { min-height: 32px; padding: 6px 1px; cursor: pointer; color: #d4ddc9; font-size: 12px; line-height: 1.55; }
.match-summary summary::marker { color: #b7c495; }
.match-summary summary:focus-visible { outline: 2px solid #d9be73; outline-offset: 3px; border-radius: 3px; }
.match-hand-list { margin: 4px 0 0; padding: 0; list-style: none; }
.match-hand { padding: 3px 8px 4px; margin: 4px 0; border: 1px solid #63816b55; border-radius: 6px; background: #08282070; }
.match-hand-index { margin-right: 8px; color: #adc3ac; white-space: nowrap; }
.match-hand-result { color: #e8dcb7; }
.match-deltas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 8px 0 10px; }
.match-delta-pair { display: grid; gap: 4px; padding: 6px 2px; background: #6382681c; border-radius: 4px; text-align: center; }
.match-deltas dt { margin: 0; color: #b8cbb8; font-size: 10px; overflow-wrap: anywhere; }
.match-deltas dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.match-events { margin: 6px 0; padding: 2px 7px; border-left: 2px solid #a1a87977; }
.match-events summary { font-size: 11px; color: #aebf9f; }
.panel .match-summary .match-event-label { margin: 4px 0 0; font-size: 11px; color: #c6c9a2; }
.match-event .match-deltas { margin: 4px 0 8px; }
.match-history-round { margin-top: 4px; padding: 4px 8px; border: 1px solid #77906a55; border-radius: 6px; }
.match-history-round .match-summary-title { margin-top: 6px; font-size: 14px; }
#panel-match { place-items: center; }
#panel-match .panel-card,
#panel-result:has(#result-match-stats[data-finished='true']) .panel-card {
  width: min(1080px, 96vw); min-width: 0; max-height: calc(100dvh - 32px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: linear-gradient(150deg, #354a4e, #2d4147 70%); border: 1px solid #899b94;
  box-shadow: inset 0 0 0 4px #ffffff09, 0 18px 70px #001717a6;
}
#panel-match .panel-card { position: relative; display: flex; flex-direction: column; }
#panel-match #match-title,
#panel-result:has(#result-match-stats[data-finished='true']) #result-title {
  align-self: center; width: max-content; max-width: 100%; min-width: 176px; margin: 0 auto 3px; padding: 9px 34px;
  border: 1px solid #ded7ba; border-radius: 2px; color: #b96a3c;
  background: linear-gradient(#fffbed, #ede3c4 48%, #d0c4a6); font: 700 26px/1.2 'KaiTi', 'DFKai-SB', serif;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  letter-spacing: .15em; text-align: center; filter: drop-shadow(0 3px 2px #10292d70);
  box-shadow: inset 0 2px 1px #fffef7, inset 0 -3px 2px #b8ab8b;
}
#panel-match #match-title { font-size: 28px; }
#panel-match .panel-actions { position: absolute; top: 24px; left: 24px; margin: 0; padding: 0; background: transparent; }
#panel-match #btn-match-close { width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 0; color: #fff0c9; background: #132c3180; border-color: #a3a594; }
#panel-match #btn-match-close::before { content: '↶'; font-size: 28px; line-height: 1; }
#panel-result .panel-card { min-width: 0; overflow-x: hidden; }
#panel-result:has(#result-match-stats[data-finished='true']) .panel-card { display: flex; flex-direction: column; }
#panel-result:has(#result-match-stats[data-finished='true']) #result-title { order: 0; }
#panel-result:has(#result-match-stats[data-finished='true']) #result-match-stats { order: 1; margin-top: 12px; }
#panel-result .result-hand-details-title { display: none; }
#panel-result:has(#result-match-stats[data-finished='true']) #result-hand-details { order: 2; padding-top: 8px; margin-top: 8px; border-top: 1px solid #7c92835c; }
#panel-result:has(#result-match-stats[data-finished='true']) .result-hand-details-title { display: list-item; min-height: 32px; padding: 6px 0; color: #b8ccb7; font-size: 12px; cursor: pointer; }
#panel-result:has(#result-match-stats[data-finished='true']) .panel-actions { order: 3; }
#panel-result:not([data-match-finished='true']) .match-player-card { min-height: 216px; padding: 12px 8px 10px; }
#panel-result:not([data-match-finished='true']) .match-player-header { gap: 5px; }
#panel-result:not([data-match-finished='true']) .match-avatar { width: 38px; height: 38px; flex-basis: 38px; }
#panel-result:not([data-match-finished='true']) .match-player-name { font-size: 12px; }
#panel-result:not([data-match-finished='true']) .match-player-rank { font-size: 10px; }
#panel-result:not([data-match-finished='true']) .match-player-stats { margin: 12px 0 9px; }
#panel-result:not([data-match-finished='true']) .match-player-stat { padding: 3px 0; gap: 4px; }
#panel-result:not([data-match-finished='true']) .match-player-stat dt,
#panel-result:not([data-match-finished='true']) .match-player-stat dd { font-size: 11px; }
#panel-result:not([data-match-finished='true']) .match-player-total-label { font-size: 12px; }
#panel-result:not([data-match-finished='true']) .match-player-total { font-size: 28px; }
#panel-result:not([data-match-finished='true']) .match-player-counts { font-size: 8px; }
@media (max-width: 480px) {
  #panel-match { padding: 12px; }
  #panel-match .panel-card,
  #panel-result:has(#result-match-stats[data-finished='true']) .panel-card { padding: 17px 14px; max-height: calc(100dvh - 24px); }
  .match-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .match-player-card { min-height: 245px; padding: 14px 12px 11px; }
  .match-player-header { gap: 7px; }
  .match-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .match-player-name { font-size: 15px; }
  .match-player-rank { font-size: 10px; }
  .match-player-stats { margin: 14px 0 12px; }
  .match-player-stat dt, .match-player-stat dd { font-size: 13px; }
  .match-player-total-label { font-size: 13px; }
  .panel .match-summary .match-player-total { font-size: 32px; }
  .match-summary h3.match-summary-title { font-size: 15px; }
}
@media (max-height: 440px) and (min-width: 600px) {
  #panel-match { padding: 10px; }
  #panel-match .panel-card,
  #panel-result:has(#result-match-stats[data-finished='true']) .panel-card { padding: 10px 16px; max-height: calc(100dvh - 20px); }
  #panel-match #match-title,
  #panel-result:has(#result-match-stats[data-finished='true']) #result-title { min-width: 142px; margin: 0 auto 2px; padding: 4px 18px; font-size: 22px; line-height: 1.15; }
  #panel-match .match-summary,
  #panel-result:has(#result-match-stats[data-finished='true']) #result-match-stats { margin: 8px 0; }
  .panel .match-summary h3.match-summary-title { margin: 0; font-size: 12px; line-height: 1.3; }
  .panel .match-summary p.match-summary-note,
  .panel .match-summary p.match-score-note { margin: 4px 0; font-size: 9px; line-height: 1.45; }
  .match-player-card { min-height: 205px; padding: 10px 12px 9px; }
  .match-player-header { gap: 8px; }
  .match-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .match-player-name { font-size: 15px; }
  .match-player-rank { margin-top: 1px; font-size: 10px; }
  .match-player-stats { margin: 4px 0; }
  .match-player-stat { padding: 1px 0; }
  .match-player-stat dt, .match-player-stat dd { font-size: 12px; line-height: 1.15; }
  .match-player-score { padding-top: 6px; }
  .match-player-total-label { font-size: 12px; }
  .panel .match-summary .match-player-total { font-size: 30px; }
  .panel .match-summary .match-player-counts { margin-top: 2px; font-size: 9px; line-height: 1.2; }
  #panel-match .panel-actions { position: absolute; top: 12px; left: 16px; margin: 0; padding: 0; }
  #panel-result .panel-actions { position: static; margin-top: 8px; padding: 8px 0 0; }
  #panel-match #btn-match-close { padding: 0; }
  #panel-result #btn-result-ok { min-height: 36px; padding: 6px 12px; }
  #panel-result .panel-card { max-height: calc(100dvh - 20px); }
}
body.landscape-table #panel-match,
body.landscape-table #panel-result {
  position: fixed; inset: auto; left: var(--match-left); top: var(--match-top);
  width: var(--match-width); height: var(--match-height); padding: 10px;
  transform: translate(-50%, -50%) rotate(90deg); transform-origin: center;
}
body.landscape-table #panel-match .panel-card,
body.landscape-table #panel-result .panel-card {
  width: min(1080px, calc(var(--match-width) - 24px)); max-width: 100%;
  max-height: calc(var(--match-height) - 20px); padding: 10px 16px;
}
body.landscape-table #panel-match #match-title,
body.landscape-table #panel-result:has(#result-match-stats[data-finished='true']) #result-title {
  min-width: 142px; margin: 0 auto 2px; padding: 4px 18px; font-size: 22px; line-height: 1.15;
}
body.landscape-table #panel-match .match-summary,
body.landscape-table #panel-result:has(#result-match-stats[data-finished='true']) #result-match-stats { margin: 8px 0; }
body.landscape-table .panel .match-summary h3.match-summary-title { margin: 0; font-size: 12px; line-height: 1.3; }
body.landscape-table .panel .match-summary p.match-summary-note,
body.landscape-table .panel .match-summary p.match-score-note { margin: 4px 0; font-size: 9px; line-height: 1.45; }
body.landscape-table #panel-match .match-player-grid,
body.landscape-table #panel-result .match-player-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body.landscape-table #panel-match .match-player-card,
body.landscape-table #panel-result .match-player-card { min-height: 205px; padding: 10px 12px 9px; }
body.landscape-table #panel-match .match-player-header,
body.landscape-table #panel-result .match-player-header { gap: 8px; }
body.landscape-table #panel-match .match-avatar,
body.landscape-table #panel-result .match-avatar { width: 44px; height: 44px; flex-basis: 44px; }
body.landscape-table #panel-match .match-player-name,
body.landscape-table #panel-result .match-player-name { font-size: 15px; }
body.landscape-table #panel-match .match-player-rank,
body.landscape-table #panel-result .match-player-rank { margin-top: 1px; font-size: 10px; }
body.landscape-table #panel-match .match-player-stats,
body.landscape-table #panel-result .match-player-stats { margin: 4px 0; }
body.landscape-table #panel-match .match-player-stat,
body.landscape-table #panel-result .match-player-stat { padding: 1px 0; }
body.landscape-table #panel-match .match-player-stat dt,
body.landscape-table #panel-match .match-player-stat dd,
body.landscape-table #panel-result .match-player-stat dt,
body.landscape-table #panel-result .match-player-stat dd { font-size: 12px; line-height: 1.15; }
body.landscape-table #panel-match .match-player-score,
body.landscape-table #panel-result .match-player-score { padding-top: 6px; }
body.landscape-table #panel-match .match-player-total-label,
body.landscape-table #panel-result .match-player-total-label { font-size: 12px; }
body.landscape-table #panel-match .match-player-total,
body.landscape-table #panel-result .match-player-total { font-size: 30px; }
body.landscape-table #panel-match .match-player-counts,
body.landscape-table #panel-result .match-player-counts { margin-top: 2px; font-size: 9px; line-height: 1.2; }
body.landscape-table #panel-match .panel-actions { position: absolute; top: 12px; left: 16px; margin: 0; padding: 0; }
body.landscape-table #panel-result .panel-actions { position: static; margin-top: 8px; padding: 8px 0 0; }
body.landscape-table #panel-match #btn-match-close { padding: 0; }
body.landscape-table #panel-result #btn-result-ok { min-height: 36px; padding: 6px 12px; }