/* Scoped to this game: other card games keep their existing appearance. */
.pdk-table { --gold: #f7d285; --ink: #102d3c; --game-toolbar-bg: #123f4b; --hand-card-width: clamp(80px, 6.7vw, 112px); --trick-card-width: clamp(54px, 4.2vw, 72px); overflow: hidden; padding: 18px 22px 24px; border: 1px solid #bc9d5b; border-radius: 22px; background: radial-gradient(ellipse at 50% 38%, #29878a 0, #175660 46%, #103440 100%); box-shadow: 0 18px 44px #15384925, inset 0 0 0 4px #0b35475e, inset 0 0 70px #081f3790; color: #fff5dd; }
.pdk-table::before { content: ''; position: absolute; inset: 130px 60px 100px; border: 1px solid #e4c78226; border-radius: 50%; pointer-events: none; }
.pdk-topbar { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pdk-room { color: #ffe2a7; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.pdk-room > span { color: #e8c378; font-size: 24px; margin-right: 7px; }
.pdk-room small { color: #bcd7d6; font-size: 11px; letter-spacing: 0; margin-left: 8px; font-weight: 400; }
.pdk-score { margin: 0 0 0 auto; font-size: 12px; white-space: nowrap; color: #d4e6df; }
.pdk-restart { border: 1px solid #c7dfdb42; background: #092f425c; border-radius: 7px; padding: 7px 10px; font-size: 11px; color: #d4e6df; }
.pdk-restart:hover { background: #0d273f; }
.pdk-counter { position: relative; border: 1px solid #deba723f; border-radius: 12px; padding: 10px 14px 8px; background: linear-gradient(120deg, #082d41b8, #133e45cc); box-shadow: 0 4px 12px #081d3529; }
.pdk-counter-caption { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #c3dad7; margin-bottom: 7px; }
.pdk-counter-caption strong { font-size: 12px; letter-spacing: .12em; color: #f7d285; }
.pdk-counter-caption b { color: #ffe2a7; }
.pdk-counter-ranks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.pdk-counter-cell { text-align: center; border-left: 1px solid #93c4c315; line-height: 1.25; }
.pdk-counter-cell:first-child { border: 0; }
.pdk-counter-cell span, .pdk-counter-cell b { display: block; font: 700 15px/1.2 Arial, Helvetica, sans-serif; font-variant-numeric: lining-nums tabular-nums; }
.pdk-counter-cell span { color: #ecf2e7; }
.pdk-counter-cell b { color: #ffdb8e; margin-top: 4px; }
.pdk-counter-cell.is-empty { opacity: .35; }
.pdk-counter-note { margin: 7px 0 0; color: #9fbdbb; font-size: 10px; text-align: right; }
.pdk-board { position: relative; grid-template-columns: 110px minmax(0,1fr) 110px; grid-template-areas: 'left mid right' 'actions actions actions' 'player player player' 'you you you'; gap: 8px 18px; padding-top: 22px; }
.pdk-seat { align-self: start; position: relative; }
.pdk-avatar { position: relative; width: 82px; height: 82px; padding: 3px; margin: 0 auto 10px; border: 2px solid #f0cb7a; border-radius: 22px; background: linear-gradient(135deg,#f8dfa1,#ad7533 48%,#ffe6a1); box-shadow: 0 5px 14px #041e385f,inset 0 0 0 2px #6b5023; }
.pdk-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border: 1px solid #72592e; border-radius: 16px; }
.pdk-avatar-badge { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #e7c375; border-radius: 12px; padding: 0 10px; background: linear-gradient(#635b38,#393d2c); color: #fff1c4; font-size: 9px; }
.pdk-seat.is-turn .pdk-avatar { box-shadow: 0 0 0 3px #f4d78544,0 0 28px #f8d17870; }
.pdk-seat .dd-label { color: #fff4db; font-size: 14px; font-weight: 700; }
.pdk-seat .dd-label span { margin-left: 3px; color: #b4d0cc; font-size: 10px; font-weight: 400; }
.pdk-seat-status { color: #adcdca; font-size: 10px; min-height: 20px; margin-top: 3px; }
.pdk-seat.is-turn .pdk-seat-status { color: #ffe19a; }
.pdk-backs { min-height: 52px; margin-top: 4px; }
.pdk-table .pcard.back { width: 36px; flex: 0 0 36px; height: 50px; margin-left: -18px; border: 2px solid #fdf4dd; border-radius: 5px; background: #154baf url('../game/assets/paodekuai/card-back.svg') center / cover; box-shadow: 0 3px 5px #05172c65; }
.pdk-table .pcard.back:first-child { margin-left: 0; transform: rotate(-9deg); }
.pdk-table .pcard.back:last-child { transform: rotate(9deg); }
.pdk-meta { color: #f4e4b9; margin: 4px 0 0; font-size: 12px; font-weight: 700; }
.pdk-meta.is-warning { color: #ffc76b; }
.pdk-mid { min-width: 0; align-self: center; }
.pdk-table-mark { text-align: center; color: #d7dfb84f; font: 800 30px 'STKaiti','KaiTi',serif; letter-spacing: .18em; margin-bottom: 12px; text-shadow: 0 2px #04354140; }
.pdk-table-mark span { display: block; font: 10px sans-serif; letter-spacing: .18em; margin-top: 5px; }
.pdk-table .dd-trick { min-height: 124px; background: transparent; flex-wrap: wrap; column-gap: 0; row-gap: 9px; margin: 0; padding: 4px 2px 12px; }
.pdk-trick-label { flex: 0 0 100%; text-align: center; font-size: 12px; color: #e3eddf; min-height: 18px; }
/* All face geometry follows the card width; 10 uses the same font as every rank. */
.pdk-trick-cards { display: grid; justify-content: center; width: 100%; min-width: 0; box-sizing: border-box; padding: 3px; row-gap: 8px; }
.pdk-table .pcard { --card-width: var(--hand-card-width); display: block; position: relative; box-sizing: border-box; flex: 0 0 var(--card-width); width: var(--card-width); height: calc(var(--card-width) * 1.43); aspect-ratio: auto; padding: 0; overflow: hidden; border: 1px solid #cbbd98; border-radius: calc(var(--card-width) * .09); color: #17283d; background: linear-gradient(125deg,#fff 15%,#fffdf5 65%,#ede7da); box-shadow: 1px 3px 5px #001b3d55; font-family: Arial, Helvetica, sans-serif; }
.pdk-table .pcard.red { color: #ce273c; }
.pdk-corner { position: absolute; left: calc(var(--card-width) * .03); top: calc(var(--card-width) * .03); display: flex; flex-direction: column; align-items: center; width: calc(var(--card-width) * .31); z-index: 1; }
.pdk-table .pcard .pdk-corner b { display: block; width: 100%; height: calc(var(--card-width) * .31); font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--card-width) * .27); line-height: calc(var(--card-width) * .31); letter-spacing: 0; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.pdk-table .pcard .pdk-corner i { display: block; width: calc(var(--card-width) * .20); text-align: center; height: calc(var(--card-width) * .22); font-size: calc(var(--card-width) * .20); line-height: calc(var(--card-width) * .22); font-style: normal; align-self: center; }
.pdk-corner-bottom { left: auto; top: auto; right: calc(var(--card-width) * .03); bottom: calc(var(--card-width) * .03); transform: rotate(180deg); }
/* The center strip stays outside both corner boxes, including both digits of 10. */
.pdk-pips { position: absolute; inset: calc(var(--card-width) * .22) calc(var(--card-width) * .36); }
.pdk-pip { position: absolute; display: block; width: calc(var(--card-width) * .12); height: calc(var(--card-width) * .13); font-size: calc(var(--card-width) * .13); line-height: 1; text-align: center; transform: translate(-50%,-50%); }
.pdk-pip.is-flipped { transform: translate(-50%,-50%) rotate(180deg); }
.pdk-ace { position: absolute; inset: 0 37%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--card-width) * .32); line-height: 1; text-shadow: 0 2px 1px #9d90742b; }
/* Keep the complete court illustration centered at its native 98:166 ratio.
   Its top clears the rank line and its sides clear the narrower suit boxes. */
.pdk-court { position: absolute; left: 50%; top: 50%; width: 38%; height: auto; aspect-ratio: 98 / 166; transform: translate(-50%, -50%); object-fit: contain; border-radius: 2px; }
.pdk-table .dd-trick .pcard { --card-width: var(--trick-card-width); margin: 0; }
.pdk-action-area { grid-area: actions; text-align: center; min-height: 82px; }
.pdk-table .dd-actions { margin: 5px auto 9px; gap: 13px; flex-wrap: nowrap; }
.pdk-table .dd-actions button, .pdk-replay { min-height: 44px; min-width: 100px; padding: 9px 17px; border: 1px solid #ebd497; border-radius: 24px; background: linear-gradient(#fff9e1,#e9d39b); color: #644826; font-size: 15px; font-weight: 800; box-shadow: inset 0 2px #ffffff9c,0 4px #08273d66; }
.pdk-table #pdk-play, .pdk-replay { color: #6d340d; background: linear-gradient(#ffe495,#f4b54f); border-color: #ffdf89; }
.pdk-table button:disabled { cursor: default; filter: saturate(.45); opacity: .48; }
.pdk-table button:not(:disabled) { cursor: pointer; }
.pdk-table .dd-actions button:not(:disabled):hover, .pdk-replay:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pdk-table button:focus-visible { outline: 3px solid #fff0af; outline-offset: 3px; }
.pdk-table .dd-status { min-height: 20px; font-size: 12px; color: #e0ece1; }
.pdk-replay { min-width: 170px; margin: 5px auto 9px; }
.pdk-table [hidden] { display: none !important; }
.pdk-result { margin: 0 auto 7px; }
.pdk-result strong { color: #ffdf8b; font-size: 29px; text-shadow: 0 2px 6px #143322; }
.pdk-result span { font-size: 11px; color: #eee8ce; }
.pdk-player-line { grid-area: player; display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.pdk-avatar-you { width: 43px; height: 43px; margin: 0; padding: 2px; border-width: 1px; border-radius: 13px; }
.pdk-avatar-you img { border-radius: 9px; }
.pdk-player-line strong { display: block; font-size: 13px; color: #ffedc0; }
.pdk-player-line span { color: #a7c7c4; font-size: 10px; display: block; }
.pdk-gesture-help { margin-left: auto; }
.pdk-hand { grid-area: you; position: relative; display: grid; justify-content: center; row-gap: 25px; min-width: 0; min-height: calc(var(--hand-card-width) * 1.43 + 30px); overflow: visible; padding: 24px 3px 6px; align-items: start; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pdk-hand .pcard { --card-width: var(--hand-card-width); margin: 0; flex-direction: unset; transition: transform .12s ease, box-shadow .12s ease; touch-action: pan-y; }
.pdk-hand .pcard:first-child { margin-left: 0; }
.pdk-table .pcard.is-selected { transform: translateY(-17px); outline: 2px solid #ffd269; outline-offset: 0; box-shadow: 0 0 11px #ffda7055,1px 5px 7px #061d39aa; background: linear-gradient(#fff8db,#fffdf3 55%,#f1e5c2); }
.pdk-table .pcard.is-key:not(.is-selected) { outline: none; }
.pdk-table .pcard.is-key::after { content: '先'; position: absolute; bottom: 3px; left: 4px; padding: 2px; border-radius: 3px; background: #dba645; color: #fff; font: 9px sans-serif; }
.pdk-hand.is-dragging .pcard { transition: none; }
.pdk-dialog { width: min(360px, calc(100vw - 36px)); padding: 25px; border: 1px solid #d6b773; border-radius: 16px; background: #fffaf0; color: #293f45; box-shadow: 0 15px 70px #071d46aa; }
.pdk-dialog::backdrop { background: #061b2db8; backdrop-filter: blur(3px); }
.pdk-dialog h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.pdk-dialog p { color: #637276; font-size: 14px; line-height: 1.7; }
.pdk-dialog > div { display: flex; gap: 10px; margin-top: 24px; }
.pdk-dialog button { flex: 1; border-radius: 8px; padding: 10px 8px; background: #e4ece8; font-size: 13px; }
.pdk-dialog #pdk-restart-confirm { background: #ecd299; color: #66430e; }
@media (max-width: 760px) {
    .pdk-table { --hand-card-width: 68px; --trick-card-width: 48px; padding: 12px 12px 17px; border-radius: 16px; }
    .pdk-topbar { gap: 8px; margin-bottom: 11px; }
    .pdk-room { font-size: 13px; }
    .pdk-room > span { font-size: 18px; margin-right: 2px; }
    .pdk-room small { display: none; }
    .pdk-score { font-size: 10px; }
    .pdk-restart { font-size: 10px; padding: 6px 7px; }
    .pdk-counter { padding: 8px; }
    .pdk-counter-cell span { font-size: 13px; }
    .pdk-counter-cell b { font-size: 13px; margin-top: 3px; }
    .pdk-counter-note { font-size: 9px; }
    .pdk-board { grid-template-columns: 68px minmax(0,1fr) 68px; grid-template-areas: 'left mid right' 'actions actions actions' 'player player player' 'you you you'; column-gap: 5px; row-gap: 6px; padding-top: 17px; }
    .pdk-avatar { width: 56px; height: 56px; border-radius: 16px; padding: 2px; }
    .pdk-avatar img { border-radius: 11px; }
    .pdk-avatar-badge { font-size: 8px; padding: 0 7px; }
    .pdk-seat .dd-label { font-size: 12px; }
    .pdk-seat .dd-label span { font-size: 9px; display: block; margin: 0; }
    .pdk-seat-status { font-size: 9px; margin-top: 1px; }
    .pdk-backs { min-height: 38px; }
    .pdk-table .pcard.back { width: 27px; flex-basis: 27px; height: 38px; margin-left: -15px; }
    .pdk-meta { font-size: 10px; }
    .pdk-table-mark { font-size: 24px; margin-bottom: 5px; }
    .pdk-table-mark span { font-size: 8px; letter-spacing: .06em; }
    .pdk-table .dd-trick { min-height: 100px; padding-bottom: 3px; }
    .pdk-trick-label { font-size: 10px; }
    .pdk-table .dd-actions { gap: 10px; }
    .pdk-table .dd-actions button { min-width: 76px; padding: 8px 12px; font-size: 13px; }
    .pdk-action-area { min-height: 76px; }
    .pdk-table .dd-status { font-size: 11px; }
    .pdk-avatar-you { width: 36px; height: 36px; border-radius: 11px; }
    .pdk-avatar-you img { border-radius: 8px; }
    .pdk-result strong { font-size: 23px; }
    .pdk-result span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pdk-table *, .pdk-table *::before { transition: none !important; animation: none !important; } }

@media (max-width: 520px) {
    /* Long straights need the full table width, even on small phones. */
    .pdk-board { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: 'left right' 'mid mid' 'actions actions' 'player player' 'you you'; row-gap: 8px; }
    .pdk-seat { display: grid; grid-template-columns: 56px minmax(0,1fr); grid-template-areas: 'avatar name' 'avatar state' 'avatar count'; align-items: center; gap: 0 7px; text-align: left; }
    .pdk-seat .pdk-avatar { grid-area: avatar; margin: 0 0 6px; }
    .pdk-seat .dd-label { grid-area: name; align-self: end; }
    .pdk-seat .dd-label span { display: inline; }
    .pdk-seat .pdk-seat-status { grid-area: state; min-height: 14px; }
    .pdk-seat .pdk-meta { grid-area: count; margin: 0; align-self: start; }
    .pdk-seat .pdk-backs { position: absolute; right: 0; top: 65px; transform: scale(.65); transform-origin: top right; opacity: .85; }
    .pdk-mid { padding-top: 10px; }
    .pdk-table-mark { font-size: 22px; margin-bottom: 0; }
    .pdk-table .dd-trick { min-height: 95px; }
}

.pdk-table .game-fullscreen { color: #ffedc0; background: #092f425c; }
.pdk-table .pdk-restart { min-height: 44px; font-size: 12px; }
.pdk-dialog { max-height: calc(100dvh - 32px); overflow: auto; }
@media (max-width: 520px) {
    .pdk-topbar { gap: 6px; }
    .pdk-room { flex: 1 0 55%; }
    .pdk-score { margin-left: auto; }
    .pdk-table .game-fullscreen, .pdk-table .pdk-restart { flex: 1; }
    .pdk-table .dd-actions button { min-height: 44px; }
}
/* Keep play controls and readable cards compact on short phone landscapes.
   The shared expanded view scrolls vertically when the height is insufficient. */
@media (orientation: landscape) and (max-height: 540px) {
    .pdk-table { --hand-card-width: clamp(56px, 7.8vw, 72px); --trick-card-width: 44px; padding: 8px 12px 10px; }
    .pdk-topbar { gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
    .pdk-room { flex: 0 1 auto; font-size: 12px; }
    .pdk-room small { display: inline; font-size: 9px; margin-left: 4px; }
    .pdk-room > span { font-size: 16px; }
    .pdk-score { margin-left: auto; font-size: 11px; }
    .pdk-table .game-fullscreen, .pdk-table .pdk-restart { flex: 0 0 auto; min-height: 44px; font-size: 12px; padding: 6px 9px; }
    .pdk-counter { padding: 5px 8px; }
    .pdk-counter-caption { margin-bottom: 2px; }
    .pdk-counter-cell span, .pdk-counter-cell b { font-size: 12px; line-height: 1.1; }
    .pdk-counter-cell b { margin-top: 1px; }
    .pdk-counter-note { margin-top: 3px; font-size: 9px; }
    .pdk-table-mark, .pdk-seat .pdk-backs { display: none; }
    .pdk-board { grid-template-columns: 88px minmax(0,1fr) 88px; grid-template-areas: 'left mid right' 'actions actions actions' 'player player player' 'you you you'; gap: 3px 8px; padding-top: 6px; }
    .pdk-seat { display: block; text-align: center; }
    .pdk-seat .pdk-avatar { width: 44px; height: 44px; margin: 0 auto 5px; border-radius: 12px; }
    .pdk-avatar img { border-radius: 8px; }
    .pdk-avatar-badge { font-size: 8px; padding: 0 5px; }
    .pdk-seat .dd-label { font-size: 11px; }
    .pdk-seat .dd-label span { display: inline; font-size: 9px; }
    .pdk-seat-status { font-size: 9px; min-height: 12px; margin-top: 1px; }
    .pdk-meta { margin-top: 1px; font-size: 10px; }
    .pdk-mid { padding-top: 0; }
    .pdk-table .dd-trick { min-height: 83px; row-gap: 3px; padding: 0 0 2px; }
    .pdk-trick-label { font-size: 10px; min-height: 14px; }
    .pdk-action-area { min-height: 0; }
    .pdk-table .dd-actions { gap: 10px; margin: 2px auto 4px; }
    .pdk-table .dd-actions button, .pdk-replay { min-height: 44px; min-width: 86px; padding: 5px 12px; font-size: 13px; }
    .pdk-table .dd-status { font-size: 11px; min-height: 15px; margin: 0; }
    .pdk-player-line { gap: 6px; }
    .pdk-avatar-you { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
    .pdk-player-line > div:not(.pdk-avatar-you) { display: flex; align-items: center; gap: 8px; }
    .pdk-player-line strong { font-size: 11px; }
    .pdk-hand { padding-top: 21px; padding-bottom: 3px; min-height: calc(var(--hand-card-width) * 1.43 + 24px); }
    .pdk-result { margin-bottom: 2px; }
    .pdk-result strong { font-size: 20px; }
}

/* Fit the table to the page's remaining viewport. Balanced hand rows retain
   their readable ranks and scroll internally when a phone cannot show both. */
.game-page .pdk-table { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; min-height: 0; padding: 10px 14px; overflow: hidden; --hand-card-width: clamp(68px, 6vw, 96px); }
.pdk-topbar { margin: 0; gap: 6px 10px; }
.pdk-counter { padding: 6px 10px; }
.pdk-counter-caption { margin-bottom: 4px; }
.pdk-counter-note { margin-top: 3px; }
.pdk-board { min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); gap: 5px 12px; padding-top: 0; align-items: stretch; }
.pdk-seat { align-self: center; }
.pdk-avatar { width: 52px; height: 52px; padding: 2px; margin-bottom: 7px; border-radius: 15px; }
.pdk-avatar img { border-radius: 10px; }
.pdk-backs { display: none; }
.pdk-mid { display: flex; flex-direction: column; align-self: stretch; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.pdk-table-mark { display: none; }
.pdk-table .dd-trick { min-height: 0; flex: 1 0 auto; align-content: flex-start; padding: 3px; gap: 3px; }
.pdk-action-area { min-height: 0; }
.pdk-table .dd-actions { margin: 0 0 3px; }
.pdk-table .dd-status { min-height: 0; margin: 0; line-height: 1.4; }
.pdk-player-line { min-height: 28px; gap: 7px; }
.pdk-avatar-you { width: 28px; height: 28px; flex: 0 0 28px; padding: 1px; margin: 0; border-radius: 9px; }
.pdk-avatar-you img { border-radius: 6px; }
.pdk-player-line > div:not(.pdk-avatar-you) { display: flex; align-items: center; gap: 7px; }
.pdk-hand { min-height: 0; height: 100%; align-content: start; padding: 21px 3px 7px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.pdk-replay { margin: 0 auto 3px; }
.pdk-result { flex: 0 0 auto; margin-bottom: 3px; }
.pdk-result strong { font-size: 22px; }
.pdk-dialog button { min-height: 44px; }
@media (max-width: 760px) {
    .game-page .pdk-table { --hand-card-width: 68px; --trick-card-width: 48px; padding: 8px; gap: 5px; }
    .pdk-table .pdk-topbar { gap: 4px 6px; }
    .pdk-board { grid-template-columns: 68px minmax(0, 1fr) 68px; column-gap: 5px; }
    .pdk-counter { padding: 5px 6px; }
    .pdk-counter-note { font-size: 9px; }
    .pdk-seat-status { min-height: 14px; }
    .pdk-table .dd-actions button { min-width: 72px; padding-inline: 10px; }
    .pdk-player-line { min-height: 28px; }
}
@media (max-width: 520px) {
    .pdk-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'left right' 'mid mid' 'actions actions' 'player player' 'you you'; grid-template-rows: auto minmax(66px, .65fr) auto auto minmax(0, 1fr); gap: 5px; }
    .pdk-seat { grid-template-columns: 38px minmax(0, 1fr); gap: 0 5px; }
    .pdk-seat .pdk-avatar { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
    .pdk-avatar-badge { font-size: 7px; padding-inline: 3px; }
    .pdk-seat .dd-label { font-size: 11px; }
    .pdk-seat .pdk-meta { font-size: 11px; }
    .pdk-seat .pdk-seat-status { font-size: 10px; }
    .pdk-mid { padding: 0; }
    .pdk-table .dd-trick { min-height: 0; }
}
@media (max-height: 650px) {
    .game-page .pdk-table { --hand-card-width: 60px; --trick-card-width: 44px; padding-block: 6px; gap: 4px; }
    .pdk-counter-caption { margin-bottom: 2px; }
    .pdk-counter-note { font-size: 9px; line-height: 1.3; }
    .pdk-counter-cell span, .pdk-counter-cell b { font-size: 12px; }
    .pdk-counter-cell b { margin-top: 1px; }
    .pdk-player-line .pdk-avatar { width: 24px; height: 24px; flex-basis: 24px; }
    .pdk-player-line { min-height: 18px; }
}
@media (orientation: landscape) and (max-height: 540px) {
    .game-page .pdk-table { --hand-card-width: 64px; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto minmax(0, 1fr); gap: 4px 10px; padding: 6px 10px; }
    .pdk-topbar { grid-column: 1 / -1; flex-wrap: nowrap; }
    .pdk-counter { grid-column: 2; grid-row: 2; align-self: stretch; min-height: 0; overflow: auto; }
    .pdk-counter-caption { flex-wrap: wrap; gap: 3px; }
    .pdk-counter-ranks { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px 2px; }
    .pdk-board { grid-column: 1; grid-row: 2; grid-template-columns: 70px minmax(0, 1fr) 70px; grid-template-areas: 'left mid right' 'actions actions actions' 'player player player' 'you you you'; grid-template-rows: minmax(55px, .65fr) auto auto minmax(0, 1fr); gap: 3px 5px; padding: 0; }
    .pdk-seat { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: 'avatar name' 'avatar state' 'avatar count'; align-self: center; gap: 0 4px; text-align: left; }
    .pdk-seat .pdk-avatar { grid-area: avatar; width: 28px; height: 28px; margin: 0 0 4px; padding: 1px; border-radius: 8px; }
    .pdk-seat .pdk-avatar img { border-radius: 5px; }
    .pdk-seat .dd-label { grid-area: name; }
    .pdk-seat .pdk-seat-status { grid-area: state; }
    .pdk-seat .pdk-meta { grid-area: count; margin: 0; }
    .pdk-seat .dd-label { font-size: 11px; }
    .pdk-seat-status { font-size: 10px; }
    .pdk-table .dd-trick { min-height: 0; padding: 0 3px 3px; }
    .pdk-table .dd-actions { margin: 0 0 2px; }
    .pdk-hand { padding-top: 20px; }
    .pdk-table .dd-status { font-size: 11px; }
}
@media (max-width: 520px) and (orientation: portrait) {
    .pdk-table .pdk-topbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdk-topbar .pdk-score { justify-self: end; }
    .pdk-board { grid-template-rows: auto minmax(66px, 90px) auto auto minmax(0, 1fr); }
}
.pdk-hand { row-gap: 22px; }
@media (orientation: landscape) and (max-height: 540px) {
    .pdk-board { grid-template-columns: 94px minmax(0, 1fr) 94px; }
}