/* PFLabs play-screen contract: the table and its actions own one viewport.
   Only the secondary-information dropdown scrolls. Load after all game styles. */
:root { --pf-play-height:100vh; --pf-play-top:0px; --pf-play-header-height:52px; }
@supports(height:100dvh) { :root { --pf-play-height:100dvh; } }
html.pf-playing-root { min-height:0; overscroll-behavior:none; scroll-padding:0; }
body.pf-page-layout.pf-playing {
  height:var(--pf-play-height); min-height:0; padding:0; margin:0;
  display:flex; flex-direction:column; overscroll-behavior:none;
}
body.pf-page-layout.pf-playing > main {
  flex:1 1 0; min-height:0; height:auto; max-height:none; width:100%;
  margin:0 auto; padding:6px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px));
}
body.pf-playing > .pf-game-header {
  flex:0 0 auto; width:100%; max-width:1100px; min-height:52px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px));
  background:var(--bg);
  gap:8px;
}
body.pf-playing .pf-game-header-actions { gap:4px; }
body.pf-playing .pf-game-eyebrow { display:none; }
body.pf-playing .pf-game-header .pf-game-title { font-size:1rem; }
body.pf-playing .pf-game-brand>img { width:30px; height:30px; flex-basis:30px; }
body.pf-playing > :is(.release-footer,.bug-report-link),body.pf-playing main > footer { display:none; }
body.pf-playing > main > #playView { height:100%; min-height:0; }
body.pf-playing :is(button,input,summary,a):focus-visible { outline-offset:2px; }
body .pf-play-menu-button {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:9px; width:auto; min-width:80px; min-height:44px; white-space:nowrap;
  margin:0; padding:8px 12px; border:1px solid var(--border); border-radius:11px;
  background:var(--surface-raised); color:var(--text); font:650 13px/1.25 system-ui,sans-serif; cursor:pointer;
}
.pf-play-menu-button::after { flex:none; content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 160ms ease; }
.pf-play-menu-button[aria-expanded="true"]::after { transform:translateY(2px) rotate(225deg); }
.pf-play-menu {
  position:fixed; inset:auto; top:var(--pf-play-menu-top,72px); right:max(var(--pf-play-menu-right,12px),env(safe-area-inset-right,0px)); z-index:80;
  width:min(360px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); max-width:360px;
  max-height:var(--pf-play-menu-max-height,65dvh); margin:0; padding:10px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface,var(--bg)); color:var(--text);
  box-shadow:0 16px 44px var(--shadow,#0005); overflow:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity 160ms ease,transform 160ms ease; font-size:13px; line-height:1.45;
}
.pf-play-menu.is-open { opacity:1; transform:none; pointer-events:auto; animation:pf-play-dropdown-in 160ms ease both; }
@keyframes pf-play-dropdown-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
.pf-play-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:0 0 5px 4px; border-bottom:1px solid var(--border); }
.pf-play-menu-heading h2 { font-size:14px; line-height:1.2; margin:0; letter-spacing:-.01em; }
.pf-play-menu-heading button { min-width:44px; min-height:44px; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font:400 24px/1 system-ui,sans-serif; }
.pf-play-menu-actions { display:grid; gap:4px; padding:5px 0; }
.pf-play-menu-actions :is(#new,#backButton) { min-height:44px; width:100%; margin:0; padding:10px; justify-content:flex-start; text-align:left; border:0; border-radius:8px; background:transparent; color:var(--text); font-size:13px; font-weight:600; }
.pf-play-menu-actions :is(#new,#backButton):hover,.pf-play-menu-heading button:hover { background:var(--surface-hover); }
.pf-play-menu-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0; padding:4px 0; border-top:1px solid var(--border); }
.pf-play-menu-navigation:empty { display:none; }
.pf-play-menu-navigation :is(.pf-header-hub,.pf-header-profile) { min-height:44px; padding:6px 9px; font-size:12px; }
.pf-play-menu .pf-header-profile > [data-pf-profile-name] { display:block; max-width:160px; }
.pf-play-menu .pf-header-profile .pf-player-avatar { width:24px; height:24px; flex:0 0 24px; }
.pf-play-menu-details { padding:0; margin:0; border-top:1px solid var(--border); font-size:12px; }
.pf-play-menu-details > summary { min-height:44px; padding:12px 5px; color:var(--muted); font-size:12px; line-height:20px; cursor:pointer; }
.pf-play-menu-content { display:grid; gap:8px; padding:4px; font-size:12px; line-height:1.45; }
.pf-play-menu-content > :is(p,small,section,div,details) { margin:0; }
.pf-play-menu-content :is(.match-info,.save-note) { height:auto; white-space:normal; font-size:12px; line-height:1.45; }
.pf-play-menu-content .match-info { display:block; }
.pf-play-menu-content #connection { white-space:normal; }
.pf-play-menu .match-options { width:100%; }
.pf-play-menu .match-options > summary { min-height:44px; display:flex; align-items:center; gap:8px; padding:10px; font-size:13px; }
.pf-play-menu .match-options > summary::after { content:'Match options'; }
.pf-play-menu .options-panel { position:static; width:100%; margin-top:4px; max-height:none; }
.pf-play-menu #onlineMatch { position:static; }
.pf-play-menu .end-request { max-height:none; overflow:visible; }
.pf-play-menu-content .table-toolbar { margin:0; }
.pf-play-menu-content .table-toolbar h2 { margin:4px 0; font-size:14px; }
.pf-play-menu-content .notice { padding:9px; font-size:12px; }
.pf-play-menu-content .release-footer { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:10px 0 0; font-size:10px; letter-spacing:0; }
.pf-play-menu-content .release-footer img { width:68px; height:24px; }
.pf-play-menu-content :is(#bet-amount-help,#hint,#pot-caption,#betting-owed,#betting-last-action) { display:block; font-size:12px; line-height:1.45; }
/* Use one dock geometry per game on every tab; active play only changes flow. */
body.pf-page-layout > .pf-game-nav {
  padding:0 max(10px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(10px,env(safe-area-inset-left,0px));
}
/* Both bars stay in the active-play flex layout. No hidden navigation or footer spacer. */
body.pf-playing > .pf-game-nav {
  position:relative; inset:auto; flex:0 0 auto; width:100%; margin:0; z-index:40;
  padding:0 max(10px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(10px,env(safe-area-inset-left,0px));
  background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.pf-page-layout .pf-game-nav-inner { padding:4px 0; gap:4px; }
body.pf-page-layout .pf-game-nav .pf-game-nav-link { min-height:44px; min-width:44px; padding:4px 2px; gap:3px; font-size:10px; line-height:12px; }
body.pf-page-layout .pf-game-nav .pf-game-nav-link svg { width:18px; height:18px; flex-basis:18px; }
body.pf-page-layout > .bottom-nav { width:calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); max-width:420px; padding:4px; gap:4px; bottom:max(4px,env(safe-area-inset-bottom,0px)); z-index:40; }
body.pf-playing > .bottom-nav { position:relative; inset:auto; flex:0 0 auto; align-self:center; margin:4px auto max(4px,env(safe-area-inset-bottom,0px)); }
.bottom-nav:has(#pf-nav-rules) { grid-template-columns:repeat(4,minmax(0,1fr)); }
body.pf-page-layout > .bottom-nav button { min-height:44px; min-width:44px; padding:3px 4px; gap:3px; font-size:10px; }
body.pf-page-layout > .bottom-nav svg { width:18px; height:18px; }
/* FlipFeud: two opposing card stacks, a compact message, and always-visible moves. */
body.pf-playing[data-pf-play-game="flipfeud"] > div:first-child:not([class]) { display:none; }
body.pf-page-layout.pf-playing[data-pf-play-game="flipfeud"]:has(#game:not([hidden])) > main {
  max-width:660px; height:auto; min-height:0; display:flex; flex-direction:column;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px); padding-bottom:8px;
}
body.pf-playing #topbar #rules { display:none; }
body.pf-playing #topbar { flex:0 0 auto; min-height:52px; height:auto; margin:0 0 4px; padding:4px 6px 4px 12px; }
body.pf-playing #game {
  --card-h:clamp(52px,calc(var(--pf-play-arena-height,200px) - 64px),150px); --card-w:calc(var(--card-h)*.72);
  display:grid; flex:1 1 0; min-height:0; grid-template-rows:minmax(0,1fr) auto auto; gap:6px;
}
body.pf-playing #game > .game-table { grid-row:1; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; }
body.pf-playing #game .game-table > .player { min-height:44px; height:auto; padding:5px 9px; overflow:visible; }
body.pf-playing #game .arena { min-height:0; padding:4px 0; }
body.pf-playing #game .card-wrap { max-height:none; gap:3px; }
body.pf-playing #game .card-stage,body.pf-playing #game .card-stage.war-with-previous { height:calc(var(--card-h) + 8px); }
body.pf-playing #game .message { grid-row:2; min-height:0; height:auto; padding:0 2px; overflow:visible; font-size:12px; line-height:1.35; }
body.pf-playing #game .controls { grid-row:3; min-height:44px; height:auto; margin:0; gap:8px; }
body.pf-playing #game .controls :is(.primary,.secondary,.send-invitation) { min-height:44px; padding:8px 10px; font-size:13px; }
body.pf-playing #game .table-center { top:4px; gap:4px; }
body.pf-playing #game .win-banner { top:50%; max-width:85%; font-size:13px; }
/* WagerCards: public state, both hands, and the complete action row. */
body.pf-playing[data-pf-game="card-wager"] > main { max-width:1000px; }
body.pf-playing[data-pf-game="card-wager"] #playView > :is(.intro,.notice) { display:none; }
body.pf-playing[data-pf-game="card-wager"] #playView > .table {
  height:100%; min-height:0; padding:8px; overflow:visible; border-radius:16px;
  display:grid; gap:4px; grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(32px,.7fr) auto auto minmax(56px,1.2fr) auto auto auto;
}
body.pf-playing[data-pf-game="card-wager"] .table > .opponent { grid-row:1; }
body.pf-playing[data-pf-game="card-wager"] #opponent-hand { grid-row:2; }
body.pf-playing[data-pf-game="card-wager"] .table > .center { grid-row:3; }
body.pf-playing[data-pf-game="card-wager"] .table > .instructions { grid-row:4; }
body.pf-playing[data-pf-game="card-wager"] #hand { grid-row:5; }
body.pf-playing[data-pf-game="card-wager"] #betting-summary { grid-row:6; }
body.pf-playing[data-pf-game="card-wager"] .table > .actions { grid-row:7; }
body.pf-playing[data-pf-game="card-wager"] .table > .you { grid-row:8; }
body.pf-playing[data-pf-game="card-wager"] .player { min-height:30px; gap:8px; padding:0; }
body.pf-playing[data-pf-game="card-wager"] .identity { gap:6px; min-width:0; }
body.pf-playing[data-pf-game="card-wager"] .identity > div { min-width:0; }
body.pf-playing[data-pf-game="card-wager"] .identity strong { display:block; font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
body.pf-playing[data-pf-game="card-wager"] .identity small { font-size:10px; line-height:1.15; }
body.pf-playing[data-pf-game="card-wager"] .avatar { width:28px; height:28px; flex:0 0 28px; }
body.pf-playing[data-pf-game="card-wager"] .counts { gap:9px; flex:none; }
body.pf-playing[data-pf-game="card-wager"] .counts strong { font-size:15px; line-height:1.15; }
body.pf-playing[data-pf-game="card-wager"] .counts small { display:block; font-size:9px; letter-spacing:0; line-height:1.1; }
body.pf-playing[data-pf-game="card-wager"] .you { border-top:1px solid var(--border); padding-top:3px; }
body.pf-playing[data-pf-game="card-wager"] .you .identity small { display:none; }
body.pf-playing[data-pf-game="card-wager"] .hand {
  height:100%; min-height:0; width:100%; margin:0; padding:3px 0; gap:5px; align-self:center;
}
body.pf-playing[data-pf-game="card-wager"] .hand .card {
  flex:0 1 auto; height:min(100%,126px); width:auto; aspect-ratio: .7; min-width:0; max-width:calc((100% - 20px)/5); min-height:0;
  margin:0; padding:3px; border-radius:7px; font-size:clamp(20px,4vw,32px);
}
body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card { max-height:68px; font-size:20px; }
body.pf-playing[data-pf-game="card-wager"] .hand .card .corner { top:4px; left:4px; font-size:12px; }
body.pf-playing[data-pf-game="card-wager"] .hand .card .corner.bottom { top:auto; left:auto; right:4px; bottom:4px; }
body.pf-playing[data-pf-game="card-wager"] .hand .card.selected,
body.pf-playing[data-pf-game="card-wager"] button.card:hover { transform:translateY(-2px); }
body.pf-playing[data-pf-game="card-wager"] .card.selected::after { content:'TRADE'; bottom:3px; padding:1px 3px; border-radius:3px; background:var(--accent); color:var(--accent-ink); font-size:8px; letter-spacing:.2px; }
body.pf-playing[data-pf-game="card-wager"] .center { min-height:0; margin:0; gap:0; }
body.pf-playing[data-pf-game="card-wager"] .deck-visual { display:none; }
body.pf-playing[data-pf-game="card-wager"] .pot { display:flex; align-items:center; justify-content:center; width:auto; gap:8px; padding:2px 4px; }
body.pf-playing[data-pf-game="card-wager"] .pot .eyebrow { margin:0; font-size:9px; letter-spacing:1px; }
body.pf-playing[data-pf-game="card-wager"] .pot strong { font-size:15px; }
body.pf-playing[data-pf-game="card-wager"] .pot-cards { height:22px; margin:0; }
body.pf-playing[data-pf-game="card-wager"] .pot-cards .card { width:16px; height:22px; font-size:8px; border-radius:3px; }
body.pf-playing[data-pf-game="card-wager"] .instructions { margin:0; }
body.pf-playing[data-pf-game="card-wager"] .instructions > span { display:block; font-size:9px; line-height:1.15; letter-spacing:1px; }
body.pf-playing[data-pf-game="card-wager"] .instructions h2 { margin:2px 0; font-size:clamp(13px,3.6vw,18px); line-height:1.15; }
body.pf-playing[data-pf-game="card-wager"] #play-cue { margin:2px 0; font-size:11px; line-height:1.2; color:var(--selected-text); }
#play-cue:empty { display:none; }
body.pf-playing[data-pf-game="card-wager"] #betting-summary { width:100%; max-width:none; padding:4px 6px; margin:0; border-radius:10px; }
body.pf-playing[data-pf-game="card-wager"] .wc-turn { margin:0 0 2px; padding:0; border:0; line-height:1.2; font-size:10px; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-stats { gap:5px; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-stats strong { font-size:16px; line-height:1.05; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-stats small { margin:1px 0 0; font-size:9px; line-height:1.15; }
body.pf-playing[data-pf-game="card-wager"] .actions { min-height:0; }
body.pf-playing[data-pf-game="card-wager"] .actions .primary { min-width:0; width:100%; min-height:44px; padding:8px; font-size:13px; }
body.pf-playing[data-pf-game="card-wager"] #betting-controls { max-width:none; margin:0; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount { flex-wrap:nowrap; gap:7px; margin:0 0 4px; font-size:11px; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount label { flex:1; text-align:right; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount input { width:64px; min-height:44px; height:44px; padding:6px 3px; font-size:16px; }
body.pf-playing[data-pf-game="card-wager"] #bet-amount-range { flex:1; flex-basis:auto; text-align:left; font-size:10px; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-buttons button { min-width:0; min-height:44px; padding:6px 3px; font-size:12px; line-height:1.15; border-radius:9px; }
body.pf-playing[data-pf-game="card-wager"] #wager-control { margin:0 0 4px; min-height:44px; font-size:12px; }
body.pf-playing[data-pf-game="card-wager"] #status { margin:3px 0 0; min-height:0; font-size:11px; line-height:1.25; }
body.pf-playing[data-pf-game="card-wager"] #status:empty { display:none; }
body.pf-playing[data-pf-game="card-wager"] #betting-wait { margin:0; font-size:12px; }
/* OddPoker: all four seats stay in view, including seventh-street cards. */
body.pf-playing[data-pf-game="stud"] > main { max-width:1000px; }
body.pf-playing[data-pf-game="stud"] #playView { display:flex; flex-direction:column; gap:5px; }
body.pf-playing[data-pf-game="stud"] #playView > :is(h1,.intro) { display:none; }
body.pf-playing[data-pf-game="stud"] #tableView { flex:1 1 0; min-height:0; }
body.pf-playing[data-pf-game="stud"] .table { height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:6px; padding:8px; border-radius:16px; }
body.pf-playing[data-pf-game="stud"] .center { padding:0; gap:1px; font-size:11px; line-height:1.2; }
body.pf-playing[data-pf-game="stud"] .center strong { font-size:23px; line-height:1.1; }
body.pf-playing[data-pf-game="stud"] .center #status { min-height:0; font-size:12px; }
body.pf-playing[data-pf-game="stud"] .seats { min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(var(--pf-seat-count,2),minmax(0,1fr)); gap:5px; }
body.pf-playing[data-pf-game="stud"] .seat { min-height:0; padding:5px 7px; border-radius:10px; display:grid; grid-template-columns:22px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); column-gap:6px; row-gap:3px; }
body.pf-playing[data-pf-game="stud"] .seat > .pf-player-avatar { width:22px; height:22px; grid-row:1; grid-column:1; }
body.pf-playing[data-pf-game="stud"] .seat > h2 { grid-row:1; grid-column:2; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; min-width:0; gap:5px; margin:0; font-size:11px; line-height:1.2; letter-spacing:0; }
body.pf-playing[data-pf-game="stud"] .seat h2 .pf-seat-name { color:var(--text); font-size:12px; min-width:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
body.pf-playing[data-pf-game="stud"] .seat h2 .pf-seat-counts { flex:none; font-size:10px; white-space:nowrap; }
body.pf-playing[data-pf-game="stud"] .cards { grid-column:1/-1; grid-row:2; min-height:0; height:100%; max-height:108px; align-self:center; display:flex; justify-content:center; align-items:stretch; gap:4px; }
body.pf-playing[data-pf-game="stud"] .cards .card { flex:0 1 64px; height:100%; width:auto; min-width:0; max-width:calc((100% - 24px)/7); border-radius:5px; font-size:clamp(16px,3.7vw,25px); line-height:1; }
body.pf-playing[data-pf-game="stud"] .cards .card small { font-size:clamp(12px,3vw,18px); line-height:1.1; }
body.pf-playing[data-pf-game="stud"] .seat > .hint { display:none; }
body.pf-playing[data-pf-game="stud"] #actions { flex:0 0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(68px,1fr)); gap:5px; margin:0; padding:0; }
body.pf-playing[data-pf-game="stud"] #actions button { min-width:0; min-height:44px; padding:7px 4px; font-size:12px; line-height:1.2; }
body.pf-playing[data-pf-game="stud"] :is(#connection,#error) { min-height:0; margin:0; font-size:12px; line-height:1.25; }
body.pf-playing[data-pf-game="stud"] :is(#connection,#error):empty { display:none; }
@media(min-width:700px) and (min-height:601px) {
  body.pf-playing[data-pf-game="stud"] .seats { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  body.pf-playing[data-pf-game="stud"] .seats:has(>.seat:nth-child(2):last-child) { grid-template-rows:minmax(0,1fr); }
}
/* Landscape uses side-by-side table/action zones instead of shrinking touch targets. */
@media(max-height:500px) and (min-width:500px) {
  body.pf-playing > .pf-game-header { min-height:44px; padding-top:calc(env(safe-area-inset-top,0px) + 6px); padding-bottom:3px; }
  body.pf-page-layout .pf-game-nav-inner { padding:2px 0; }
  body.pf-page-layout.pf-playing[data-pf-play-game="flipfeud"]:has(#game:not([hidden])) > main { padding-top:calc(env(safe-area-inset-top,0px) + 6px); padding-bottom:4px; }
  body.pf-page-layout.pf-playing > main { padding-top:3px; padding-bottom:4px; }
  body.pf-playing[data-pf-game="card-wager"] #playView > .table {
    grid-template-columns:minmax(240px,1.1fr) minmax(200px,1fr); grid-template-rows:auto minmax(28px,.6fr) auto minmax(48px,1fr) auto; gap:3px 12px; padding:5px 8px;
  }
  body.pf-playing[data-pf-game="card-wager"] .table > .opponent { grid-column:1; grid-row:1; }
  body.pf-playing[data-pf-game="card-wager"] #opponent-hand { grid-column:1; grid-row:2; }
  body.pf-playing[data-pf-game="card-wager"] .table > .center { grid-column:1; grid-row:3; }
  body.pf-playing[data-pf-game="card-wager"] #hand { grid-column:1; grid-row:4; }
  body.pf-playing[data-pf-game="card-wager"] .table > .you { grid-column:1; grid-row:5; }
  body.pf-playing[data-pf-game="card-wager"] .table > .instructions { grid-column:2; grid-row:1; }
  body.pf-playing[data-pf-game="card-wager"] #betting-summary { grid-column:2; grid-row:2/4; align-self:center; }
  body.pf-playing[data-pf-game="card-wager"] .table > .actions { grid-column:2; grid-row:4/6; align-self:end; }
  body.pf-playing[data-pf-game="card-wager"] .instructions h2 { font-size:12px; line-height:1.1; letter-spacing:-.2px; }
  body.pf-playing[data-pf-game="card-wager"] .hand .card { max-height:80px; }
  body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card { max-height:44px; }
  body.pf-playing[data-pf-game="card-wager"] .hand .card .corner.bottom { display:none; }
  body.pf-playing[data-pf-game="card-wager"] .pot-cards { display:none; }
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-buttons button { font-size:11px; }
  body.pf-playing[data-pf-game="card-wager"] .identity strong { font-size:11px; }
  body.pf-playing[data-pf-game="stud"] .seats { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  body.pf-playing[data-pf-game="stud"] .seats:has(>.seat:nth-child(2):last-child) { grid-template-rows:minmax(0,1fr); }
  body.pf-playing[data-pf-game="stud"] .table { gap:3px; padding:4px 6px; }
  body.pf-playing[data-pf-game="stud"] .center { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 12px; }
  body.pf-playing[data-pf-game="stud"] .center strong { font-size:17px; }
  body.pf-playing[data-pf-game="stud"] .seat { padding:3px 5px; row-gap:2px; }
  body.pf-playing[data-pf-game="stud"] .seat > .pf-player-avatar { width:18px; height:18px; }
  body.pf-playing[data-pf-game="stud"] .seat h2 .pf-seat-name { font-size:10px; }
  body.pf-playing[data-pf-game="stud"] .cards { gap:3px; }
  body.pf-playing[data-pf-game="stud"] .cards .card { font-size:16px; }
  body.pf-playing[data-pf-game="stud"] .cards .card small { font-size:12px; }
  body.pf-playing[data-pf-play-game="flipfeud"] > main { max-width:900px; }
  body.pf-playing #game { --card-h:clamp(48px,calc(var(--pf-play-arena-height,130px) - 36px),110px); grid-template-columns:minmax(0,1fr) minmax(180px,.55fr); grid-template-rows:minmax(0,1fr) auto; gap:4px 12px; }
  body.pf-playing #game > .game-table { grid-column:1; grid-row:1/3; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr); gap:4px; }
  body.pf-playing #game .game-table > .player { grid-row:1; min-height:36px; padding:3px 6px; }
  body.pf-playing #game .game-table > .player[data-side="top"] { grid-column:2; }
  body.pf-playing #game .game-table > .player[data-side="bottom"] { grid-column:1; }
  body.pf-playing #game .arena { grid-row:2; grid-column:1/-1; }
  body.pf-playing #game .card-wrap[data-side="top"],body.pf-playing #game .card-wrap[data-side="bottom"] { top:auto; bottom:0; }
  body.pf-playing #game .table-center { top:0; width:100%; flex-direction:row; gap:8px; }
  body.pf-playing #game .card-wrap > small { display:none; }
  body.pf-playing #game .message { grid-column:2; grid-row:1; align-self:end; font-size:12px; }
  body.pf-playing #game .controls { grid-column:2; grid-row:2; flex-direction:column; }
  body.pf-playing #game .controls .secondary { width:100%; flex:auto; }
  body.pf-playing #game .deck-marker { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .pf-playing *, .pf-playing *::before, .pf-playing *::after { scroll-behavior:auto!important; }
}

/* Card choices keep finger-sized targets even when browser bars reduce the view. */
body.pf-playing[data-pf-game="card-wager"] .your-hand button.card { min-width:44px; min-height:44px; }
body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card { min-width:30px; }
body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card .corner.bottom { display:none; }
body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card:not(.back) > span:not(.corner) { font-size:16px; }

.pf-play-menu-item { display:contents; }
.pf-play-menu summary { min-height:44px; padding:10px 4px; cursor:pointer; }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount input[type="range"] { flex:1; width:auto; min-width:60px; max-width:200px; padding:0; border:0; border-radius:0; background:transparent; accent-color:var(--accent); }
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount label { flex:none; text-align:left; }
body.pf-playing[data-pf-game="card-wager"] #bet-amount-value { min-width:24px; font-size:16px; font-weight:750; font-variant-numeric:tabular-nums; }
body.pf-playing[data-pf-game="card-wager"] #bet-amount-range { flex:none; max-width:66px; }
body.pf-playing[data-pf-game="stud"] .seat.own-seat { order:1; }
@media(max-height:540px) and (max-width:499px) {
  body.pf-playing[data-pf-game="card-wager"] #playView > .table { gap:3px; padding:6px; }
  body.pf-playing[data-pf-game="card-wager"] .instructions h2 { font-size:13px; }
  body.pf-playing[data-pf-game="stud"] .cards .card { font-size:14px; }
  body.pf-playing[data-pf-game="stud"] .cards .card small { font-size:11px; }
}

.pf-play-menu-content #rules svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pf-play-menu .match-options summary svg { width:22px; height:22px; fill:currentColor; flex:none; }
.pf-play-menu-navigation .pf-header-hub svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pf-play-menu .end-request-actions :is(.secondary,.text-btn) { min-height:44px; padding:8px 12px; }
@media(max-height:500px) and (min-width:500px) {
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount { display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,1fr) auto; column-gap:5px; row-gap:0; }
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount label { grid-column:1; grid-row:1; align-self:start; padding-top:6px; font-size:10px; }
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount input { grid-column:2; grid-row:1; }
  body.pf-playing[data-pf-game="card-wager"] #bet-amount-value { grid-column:3; grid-row:1; }
  body.pf-playing[data-pf-game="card-wager"] #bet-amount-range { grid-column:1; grid-row:1; align-self:end; padding-bottom:6px; max-width:none; text-align:left; font-size:9px; line-height:11px; }
}
body.pf-playing:has(#game:not([hidden])) .pf-play-menu .release-footer { display:flex; }

@media(prefers-reduced-motion:reduce) {
  .pf-play-menu,.pf-play-menu.is-open,.pf-play-menu-button::after { animation:none!important; transition:none!important; }
}
/* Short viewports put seat identity beside the cards, preserving card height.
   This also covers landscape with the iOS home-indicator inset. */
@media(max-height:600px) {
  body.pf-playing[data-pf-game="stud"] .seat { grid-template-columns:70px minmax(0,1fr); grid-template-rows:minmax(0,1fr); padding:4px 5px; column-gap:5px; row-gap:0; }
  body.pf-playing[data-pf-game="stud"] .seat > .pf-player-avatar { display:none; }
  body.pf-playing[data-pf-game="stud"] .seat > h2 { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
  body.pf-playing[data-pf-game="stud"] .seat h2 .pf-seat-name { max-width:70px; font-size:11px; }
  body.pf-playing[data-pf-game="stud"] .seat h2 .pf-seat-counts { font-size:10px; white-space:normal; line-height:1.2; }
  body.pf-playing[data-pf-game="stud"] .cards { grid-column:2; grid-row:1; gap:2px; max-height:74px; }
  body.pf-playing[data-pf-game="stud"] .cards .card { max-width:calc((100% - 12px)/7); font-size:clamp(11px,2.4vw,14px); }
  body.pf-playing[data-pf-game="stud"] .cards .card small { font-size:10px; }
}
@media(min-width:700px) {
  body.pf-playing[data-pf-game="stud"] .seats { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  body.pf-playing[data-pf-game="stud"] .seats:has(>.seat:nth-child(2):last-child) { grid-template-rows:minmax(0,1fr); }
}

/* Short portrait combines related public rows instead of shrinking action targets. */
@media(max-height:700px) and (max-width:499px), (min-height:501px) and (max-height:700px) and (min-width:500px) and (max-width:699px) {
  body.pf-playing[data-pf-game="card-wager"] #playView > .table { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto minmax(38px,.5fr) auto minmax(50px,1fr) auto auto; gap:3px 7px; padding:6px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .opponent { grid-column:1; grid-row:1; }
  body.pf-playing[data-pf-game="card-wager"] .table > .you { grid-column:2; grid-row:1; border:0; padding:0; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player { display:grid; gap:2px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .identity { display:block; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .avatar { display:none; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .identity strong { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:11px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .identity small { display:none; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .counts { justify-content:flex-start; gap:7px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .counts > div { display:flex; align-items:baseline; gap:3px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .counts strong { font-size:12px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .player .counts small { font-size:8px; }
  body.pf-playing[data-pf-game="card-wager"] #opponent-hand { grid-column:1; grid-row:2; gap:3px; }
  body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card { min-width:20px; max-width:calc((100% - 12px)/5); max-height:38px; }
  body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card .corner { position:static; font-size:9px; line-height:1; }
  body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card:not(.back) { flex-direction:column; gap:1px; padding:2px; line-height:1; }
  body.pf-playing[data-pf-game="card-wager"] .hidden-hand .card:not(.back) > span:not(.corner) { font-size:11px; line-height:1; }
  body.pf-playing[data-pf-game="card-wager"] .table > .center { grid-column:2; grid-row:2; }
  body.pf-playing[data-pf-game="card-wager"] .pot { flex-wrap:wrap; gap:2px 5px; padding:2px; border:0; }
  body.pf-playing[data-pf-game="card-wager"] .pot-cards { display:none; }
  body.pf-playing[data-pf-game="card-wager"] .pot strong { font-size:13px; }
  body.pf-playing[data-pf-game="card-wager"] .table > .instructions { grid-column:1/-1; grid-row:3; }
  body.pf-playing[data-pf-game="card-wager"] .instructions h2 { font-size:13px; }
  body.pf-playing[data-pf-game="card-wager"] #hand { grid-column:1/-1; grid-row:4; }
  body.pf-playing[data-pf-game="card-wager"] #betting-summary { grid-column:1/-1; grid-row:5; display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:3px; padding:3px 4px; }
  body.pf-playing[data-pf-game="card-wager"] .wc-turn { margin:0; font-size:9px; }
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-stats strong { font-size:13px; }
  body.pf-playing[data-pf-game="card-wager"] .wc-betting-stats small { font-size:8px; line-height:1.1; }
  body.pf-playing[data-pf-game="card-wager"] .table > .actions { grid-column:1/-1; grid-row:6; }
  body.pf-playing[data-pf-game="card-wager"] .your-hand .card .corner.bottom { display:none; }
}

/* Active game interactions must not turn into pinch/double-tap page zoom.
   Allow ordinary pan gestures instead of canceling touch/click events, so native
   buttons, card choices and sliders retain their normal interaction behavior.
   Keep html/body unrestricted: the sibling dropdown and dialogs may still zoom. */
body.pf-playing > :is(main,.pf-game-header,.pf-game-nav,.bottom-nav) {
  touch-action:pan-x pan-y;
}
/* Readable entry text avoids small-text focus zoom on iOS. The rem floor still
   honors a larger browser text preference. Range/checkbox/radio controls are unchanged. */
body.pf-page-layout :is(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],textarea,select) {
  font-size:max(16px,1rem)!important;
}

/* Unavailable moves keep their place in the action tray. Disabled is a native
   interaction state, not merely grey paint; keep labels readable in every theme. */
body.pf-playing[data-pf-play-game="flipfeud"] #controls button:disabled,
body.pf-playing[data-pf-game="stud"] #actions button:disabled,
body.pf-playing[data-pf-game="card-wager"] :is(.wc-betting-buttons button,.actions > .primary):disabled {
  opacity:1; color:var(--muted); background:var(--surface-raised);
  border-color:var(--border); box-shadow:none; filter:none; transform:none; cursor:default;
}
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount:has(input:disabled) {
  color:var(--muted);
}
body.pf-playing[data-pf-game="card-wager"] .wc-betting-amount input:disabled {
  opacity:.5; filter:grayscale(1); cursor:default;
}
/* Waiting is already announced in the turn summary and gameplay cue. Keep the
   additional explanation available to assistive tech without growing the tray. */
body.pf-playing[data-pf-game="card-wager"] #betting-wait {
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  clip-path:inset(50%); white-space:nowrap;
}
body.pf-playing[data-pf-game="card-wager"] #bet-amount-range { line-height:1.15; }

/* Separate player identity from status with real layout gaps, including long names. */
#game .game-table .player > .player-identity { display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; column-gap:8px; row-gap:2px; min-width:0; }
#game .game-table .player > .player-identity > .player-avatar { grid-column:1; grid-row:1/3; margin:0; }
#game .game-table .player > .player-identity > strong { grid-column:2; grid-row:1; min-width:0; max-width:100%; }
#game .player-identity > .player-metadata { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; }
#game .player-metadata > :is(.player-wins,small) { min-width:0; margin:0; font-size:9px; line-height:1.4; overflow-wrap:anywhere; }
/* Rules is a normal tab. The live table stays mounted behind its hidden gate. */
.rules-view { padding:8px 0 16px; color:var(--text); }
.rules-view > h2 { margin:12px 0 24px; }
.rules-view > .muted { font-size:13px; }
#rulesTitle:focus { outline:none; }