/*
 * PFLabs game identities. Load after legacy page/theme styles.
 * Identity changes the game canvas; shared chrome/settings keep their own layout.
 * The classic selectors intentionally outrank pflabs-theme.css's legacy palette.
 * No selectors in this file affect FlipFeud or persist player preferences.
 */

/* The hub: a quiet, blue-grey directory. */
:root[data-pf-identity="hub"]:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="pink"]) {
  color-scheme: dark;
  --bg: #121922; --glow: #202e3e; --text: #f2f5f8; --muted: #b3c0cf; --subtle: #a1b0c2;
  --surface: #1b2632; --surface-raised: #253444; --surface-hover: #304256;
  --border: #415369; --border-strong: #7289a2;
  --accent: #a7c6e7; --accent-ink: #152638; --invite: #b7d7c7; --invite-ink: #182e23;
  --selected: #29445d; --selected-text: #d2e5f7; --selected-border: #88b3df;
  --nav: #18222e; --nav-glass: #18222ef5; --nav-line: #91aac83d;
  --highlight: #eef5ff0b; --shadow: #050a124d; --danger: #ffc0b7; --danger-bg: #963f3a;
  --back-a: #29415a; --back-b: #355570; --back-edge: #89a4bf; --back-ink: #d9e7f3; --back-shadow: #182c40;
  --pf-atmosphere: #8bb2e210; --pf-pattern: #a4bed60a;
}
:root[data-pf-identity="hub"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1017; --glow: #152335; --text: #eff4fa; --muted: #adbed0; --subtle: #98abc1;
  --surface: #141d28; --surface-raised: #1d2b3b; --surface-hover: #293c50;
  --border: #384b62; --border-strong: #6e87a4;
  --accent: #9dbfe6; --accent-ink: #112237; --invite: #b1d3c2; --invite-ink: #12271d;
  --selected: #233c57; --selected-text: #d3e7ff; --selected-border: #80addd;
  --nav: #101923; --nav-glass: #101923f5; --nav-line: #8ea9c439;
  --highlight: #e2edff09; --shadow: #0008; --danger: #ffb8b0; --danger-bg: #933c37;
  --back-a: #1b3047; --back-b: #2a4563; --back-edge: #7592b1; --back-ink: #cddff1; --back-shadow: #0b1929;
  --pf-atmosphere: #719ed00b; --pf-pattern: #9dbbe507;
}
:root[data-pf-identity="hub"][data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f7; --glow: #ffffff; --text: #223246; --muted: #53677c; --subtle: #5d7084;
  --surface: #ffffff; --surface-raised: #e8eef4; --surface-hover: #dce6f0;
  --border: #bccad8; --border-strong: #758ba3;
  --accent: #365d84; --accent-ink: #ffffff; --invite: #35694e; --invite-ink: #ffffff;
  --selected: #e0eaf5; --selected-text: #254c75; --selected-border: #5a83ad;
  --nav: #ffffff; --nav-glass: #fffffff5; --nav-line: #8a9db64d;
  --highlight: #ffffffb3; --shadow: #213e6012; --danger: #a53831; --danger-bg: #a53831;
  --back-a: #d5e1ed; --back-b: #b7cbdf; --back-edge: #6b88a6; --back-ink: #284c71; --back-shadow: #9bafc5;
  --pf-atmosphere: #8cafd916; --pf-pattern: #476b8f0a;
}
:root[data-pf-identity="hub"][data-theme="pink"] {
  color-scheme: dark;
  --bg: #2a2029; --glow: #443242; --text: #fcf1f7; --muted: #d5becd; --subtle: #c4a9bb;
  --surface: #382b37; --surface-raised: #493848; --surface-hover: #5b4659;
  --border: #73596e; --border-strong: #ab829d;
  --accent: #e4bbd3; --accent-ink: #392535; --invite: #bbd7ce; --invite-ink: #21332d;
  --selected: #594153; --selected-text: #f9dce9; --selected-border: #dba9c8;
  --nav: #322630; --nav-glass: #322630f5; --nav-line: #d0a9c13b;
  --highlight: #fff0fa0b; --shadow: #140c174d; --danger: #ffc6bf; --danger-bg: #983e4b;
  --back-a: #553d50; --back-b: #705168; --back-edge: #b58da8; --back-ink: #f3d9e9; --back-shadow: #352431;
  --pf-atmosphere: #d7a4cf12; --pf-pattern: #e7c0d60a;
}

/* Card Wager: amber, warm ink, crisp geometry. */
:root[data-pf-identity="card-wager"]:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="pink"]) {
  color-scheme: dark;
  --bg: #191816; --glow: #30291e; --text: #f6f1e6; --muted: #c3b9a5; --subtle: #afa48e;
  --surface: #24221d; --surface-raised: #343024; --surface-hover: #433c2d;
  --border: #59503e; --border-strong: #978465;
  --accent: #edbb68; --accent-ink: #302211; --invite: #d8cd9c; --invite-ink: #2d2a19;
  --selected: #473721; --selected-text: #f5d8a6; --selected-border: #dba65a;
  --nav: #211f1a; --nav-glass: #211f1af5; --nav-line: #c5b18b36;
  --highlight: #fff6dc0b; --shadow: #08070566; --danger: #ffb4a1; --danger-bg: #983f34;
  --back-a: #3f3322; --back-b: #57452d; --back-edge: #b29a70; --back-ink: #f0d8a8; --back-shadow: #241e15;
  --pf-atmosphere: #dba65a0f; --pf-pattern: #debd7910;
  --pf-table-a: #2b2922; --pf-table-b: #21211d; --pf-table-line: #c4a97a14;
}
:root[data-pf-identity="card-wager"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1011; --glow: #27231d; --text: #f5f0e8; --muted: #c2b8a8; --subtle: #aaa08e;
  --surface: #191b1c; --surface-raised: #282925; --surface-hover: #36362e;
  --border: #514b3e; --border-strong: #8e7d61;
  --accent: #e5b06c; --accent-ink: #281e12; --invite: #cbc99b; --invite-ink: #242719;
  --selected: #3d3020; --selected-text: #f2d3a7; --selected-border: #d7a15e;
  --nav: #151718; --nav-glass: #151718f5; --nav-line: #b9a58533;
  --highlight: #fff3d609; --shadow: #0009; --danger: #ffb3a5; --danger-bg: #973d33;
  --back-a: #2b2c27; --back-b: #3d3a2e; --back-edge: #9b855e; --back-ink: #e8c995; --back-shadow: #131512;
  --pf-atmosphere: #d1a16009; --pf-pattern: #d0aa6c0b;
  --pf-table-a: #1e2221; --pf-table-b: #171b1a; --pf-table-line: #c9b58710;
}
:root[data-pf-identity="card-wager"][data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe5; --glow: #fffaf0; --text: #302a21; --muted: #6b604d; --subtle: #756852;
  --surface: #fffbf2; --surface-raised: #eae1ce; --surface-hover: #dfd1b6;
  --border: #c6b99d; --border-strong: #99805a;
  --accent: #855016; --accent-ink: #fff9ed; --invite: #58603a; --invite-ink: #ffffff;
  --selected: #f1dfbb; --selected-text: #704215; --selected-border: #9d6a2b;
  --nav: #faf6ed; --nav-glass: #faf6edf5; --nav-line: #8f78524d;
  --highlight: #ffffffb3; --shadow: #53422618; --danger: #a1332b; --danger-bg: #a1332b;
  --back-a: #dbc69e; --back-b: #cbb17f; --back-edge: #96733d; --back-ink: #654417; --back-shadow: #b39a70;
  --pf-atmosphere: #be8b3720; --pf-pattern: #8e682313;
  --pf-table-a: #f4eddf; --pf-table-b: #eae3d5; --pf-table-line: #876a3010;
}
:root[data-pf-identity="card-wager"][data-theme="pink"] {
  color-scheme: dark;
  --bg: #2c2025; --glow: #513439; --text: #fff0eb; --muted: #d9bebc; --subtle: #c8a6a6;
  --surface: #3b2a30; --surface-raised: #50383c; --surface-hover: #64464a;
  --border: #825a5c; --border-strong: #b8827e;
  --accent: #e9b4a7; --accent-ink: #3c2528; --invite: #dbd1a7; --invite-ink: #332d1e;
  --selected: #634047; --selected-text: #fbd7ca; --selected-border: #e1a295;
  --nav: #34252b; --nav-glass: #34252bf5; --nav-line: #d8a29b40;
  --highlight: #fff0e70d; --shadow: #190b1166; --danger: #ffc3b0; --danger-bg: #9c3c42;
  --back-a: #56353c; --back-b: #754b50; --back-edge: #c28d80; --back-ink: #f5d3bd; --back-shadow: #38242a;
  --pf-atmosphere: #e0a18b12; --pf-pattern: #e9c0ae10;
  --pf-table-a: #453037; --pf-table-b: #35272d; --pf-table-line: #e4b39d14;
}

/* Poker and Stud: an emerald club, with warm paper and editorial type. */
:root[data-pf-identity="poker"]:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="pink"]) {
  color-scheme: dark;
  --bg: #101b17; --glow: #1c3429; --text: #f3f0e3; --muted: #b7c8ba; --subtle: #a3b6a8;
  --surface: #192b22; --surface-raised: #263d30; --surface-hover: #334f3d;
  --border: #496552; --border-strong: #859c7e;
  --accent: #ddc58d; --accent-ink: #233224; --invite: #bed5b0; --invite-ink: #1a2c1c;
  --selected: #304d38; --selected-text: #e2e6c9; --selected-border: #a4bc8e;
  --nav: #16251e; --nav-glass: #16251ef5; --nav-line: #adc49d36;
  --highlight: #f5ffdf09; --shadow: #040d0866; --danger: #ffc0ae; --danger-bg: #963f37;
  --back-a: #244636; --back-b: #345e47; --back-edge: #93a579; --back-ink: #e2e0b9; --back-shadow: #132e21;
  --pf-atmosphere: #72a78610; --pf-pattern: #a8c3a609;
  --pf-table-a: #28513d; --pf-table-b: #1c382c; --pf-table-line: #c1d7b52b; --pf-seat: #0b261b40; --pf-brass: #ddc58d;
}
:root[data-pf-identity="poker"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1210; --glow: #152d22; --text: #eff2e7; --muted: #aec3b4; --subtle: #9ab2a2;
  --surface: #111f19; --surface-raised: #1d3327; --surface-hover: #2b4735;
  --border: #3e5c49; --border-strong: #77927a;
  --accent: #bed5b0; --accent-ink: #17291c; --invite: #d9c38c; --invite-ink: #25291b;
  --selected: #284532; --selected-text: #dbe9cf; --selected-border: #92b280;
  --nav: #101c16; --nav-glass: #101c16f5; --nav-line: #9eba9b33;
  --highlight: #edffe00a; --shadow: #0009; --danger: #ffbbaa; --danger-bg: #943e35;
  --back-a: #18392b; --back-b: #28513d; --back-edge: #7f9b72; --back-ink: #c8d8af; --back-shadow: #0d241a;
  --pf-atmosphere: #7cb18a0b; --pf-pattern: #aac8ae07;
  --pf-table-a: #1d3b2d; --pf-table-b: #132b20; --pf-table-line: #b4cda32b; --pf-seat: #04160c40; --pf-brass: #d9c38c;
}
:root[data-pf-identity="poker"][data-theme="light"] {
  color-scheme: light;
  --bg: #f1f1e7; --glow: #fffcf4; --text: #21372a; --muted: #536a57; --subtle: #61725f;
  --surface: #fffcf4; --surface-raised: #e3e9d9; --surface-hover: #d3dfc7;
  --border: #b8c3a7; --border-strong: #7b906e;
  --accent: #285640; --accent-ink: #fffcf3; --invite: #775b24; --invite-ink: #fffaf0;
  --selected: #dce8cd; --selected-text: #284c30; --selected-border: #6c8a59;
  --nav: #fafbf3; --nav-glass: #fafbf3f5; --nav-line: #83956e4d;
  --highlight: #ffffffb3; --shadow: #2c45231a; --danger: #a5382d; --danger-bg: #a5382d;
  --back-a: #c1d1b7; --back-b: #acc39d; --back-edge: #718c5d; --back-ink: #365133; --back-shadow: #8fa881;
  --pf-atmosphere: #95ad7d1c; --pf-pattern: #54744a0a;
  --pf-table-a: #e3eadb; --pf-table-b: #d1dec8; --pf-table-line: #61815130; --pf-seat: #fcfff24d; --pf-brass: #775b24;
}
:root[data-pf-identity="poker"][data-theme="pink"] {
  color-scheme: dark;
  --bg: #291c24; --glow: #4a2d3b; --text: #fbf0eb; --muted: #d7bec9; --subtle: #c4a6b5;
  --surface: #382731; --surface-raised: #4a3441; --surface-hover: #5b4250;
  --border: #795568; --border-strong: #b6859d;
  --accent: #ebbacd; --accent-ink: #3a2631; --invite: #d6cfab; --invite-ink: #302d21;
  --selected: #5d3c50; --selected-text: #f6dce6; --selected-border: #dca5c2;
  --nav: #32232c; --nav-glass: #32232cf5; --nav-line: #d4a4bd3b;
  --highlight: #fff1df0a; --shadow: #160b1266; --danger: #ffc3b3; --danger-bg: #9a3e47;
  --back-a: #4f3041; --back-b: #694356; --back-edge: #b4879c; --back-ink: #f0d1cd; --back-shadow: #321d29;
  --pf-atmosphere: #c389ae12; --pf-pattern: #dfb3c509;
  --pf-table-a: #513344; --pf-table-b: #392732; --pf-table-line: #d6b1bc2b; --pf-seat: #250f2040; --pf-brass: #e0c39e;
}

/* Common canvas and accessible form treatment, scoped away from shared chrome. */
:root[data-pf-identity] {
  --panel: var(--surface);
  --pf-blue: var(--accent); --pf-bg: var(--bg); --pf-text: var(--text); --pf-muted: var(--muted);
  --pf-paper: #fffaf0; --pf-paper-ink: #26352f; --pf-card-red: #a93839;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-pf-identity] body,
:root[data-pf-identity]:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="pink"]) body {
  margin: 0;
  min-width: 0;
  color: var(--text);
  background: radial-gradient(ellipse at 50% 0, var(--pf-atmosphere), transparent 65%), var(--bg);
  line-height: 1.6;
}
:root[data-pf-identity] body::before,
:root[data-pf-identity] body::after {
  display: none;
  animation: none;
  transform: none;
}
:root[data-pf-identity] :where(main, main *, .release-footer, .release-footer *) { box-sizing: border-box; }
:root[data-pf-identity] main { min-width: 0; }
:root[data-pf-identity] main > [data-pf-panel] { margin-top: 0; }
:root[data-pf-identity] #matchesView > h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; letter-spacing: -.04em; margin: .5rem 0 1rem; }
:root[data-pf-identity] :where(main) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%; min-width: 0; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 11px 12px; color: var(--text); background: var(--bg); font: inherit;
}
:root[data-pf-identity] :where(main) :is(input, select, textarea)::placeholder { color: var(--subtle); opacity: 1; }
:root[data-pf-identity] :where(main) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--selected-border); outline-offset: 4px;
}
:root[data-pf-identity] :where(main) a { color: var(--selected-text); text-underline-offset: .2em; }
:root[data-pf-identity] :where(main) a:hover { text-decoration-thickness: 2px; }
:root[data-pf-identity] :where(main) :is(#welcome, #invitePanel) {
  margin: 20px 0; padding: 22px;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
}
:root[data-pf-identity] :where(main) #welcome > :first-child { margin-top: 0; }
:root[data-pf-identity] :where(main) #welcome > :last-child { margin-bottom: 0; }
:root[data-pf-identity] :where(main) #welcome h2 { color: var(--text); font-size: 1.25rem; }
:root[data-pf-identity] :where(main) #startForm { gap: 12px; }
:root[data-pf-identity] :where(main) #startForm label { color: var(--text); font-size: .8125rem; font-weight: 650; }
:root[data-pf-identity] :where(main) #startForm + p { font-size: .75rem; line-height: 1.6; }
:root[data-pf-identity] :where(main) :is(#startError, #error) { color: var(--danger); }
:root[data-pf-identity] :where(main) :is(#connection, #inviteNotice, #copyStatus) { color: var(--selected-text); }
:root[data-pf-identity] :where(main) :is(#inviteLink, #myMatches, #matches) { overflow-wrap: anywhere; }
:root[data-pf-identity] :where(main) :is(#startButton, #friendsButton, #joinButton, #copyInvite, #cancelInvite, #refreshMatches, #pf-refresh-matches, #backButton) {
  min-height: 44px; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 11px 17px; font: 650 .875rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text); background: var(--surface-raised); cursor: pointer;
}
:root[data-pf-identity] :where(main) :is(#startButton, #joinButton, #copyInvite) {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
:root[data-pf-identity] :where(main) :is(#startButton, #friendsButton, #joinButton, #copyInvite, #cancelInvite, #refreshMatches, #pf-refresh-matches, #backButton):disabled {
  cursor: default; opacity: .55;
}
:root[data-pf-identity] .release-footer { background: transparent; box-shadow: none; color: var(--muted); }
:root[data-pf-identity] :is(.release-brand img, .topbar img) { background: transparent; box-shadow: none; }

/* Hub / poker directory structure: a restrained, responsive game shelf. */
body[data-pf-game="hub"] main { max-width: 1060px; padding: 48px 28px; }
body[data-pf-game="hub"] :is(main, #playView) > header { max-width: 700px; }
body[data-pf-game="hub"] :is(main, #playView) > header h1 {
  font-size: clamp(3rem, 8vw, 4.75rem); line-height: 1.05; letter-spacing: -.065em; font-weight: 750;
}
body[data-pf-game="hub"] :is(main, #playView) > header > p:not(.eyebrow) { font-size: clamp(1.1rem, 3vw, 1.4rem); }
body[data-pf-game="hub"] :is(main, #playView) > :is(.pf-game-grid, section:has(> .game)) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
body[data-pf-game="hub"] :is(main, #playView) > :is(.pf-game-grid, section:has(> .game)) > h2 { grid-column: 1 / -1; margin: 0 0 4px; }
:root[data-pf-identity] .pflabs-hub .notice {
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  padding: 16px 20px; font-size: .875rem; color: var(--muted); line-height: 1.6;
}
:root[data-pf-identity] .pflabs-hub .game {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: none; min-width: 0; margin: 0; padding: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: 0 8px 24px var(--shadow); color: var(--text); text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
:root[data-pf-identity] .pflabs-hub .game > span { color: var(--accent); font-size: 1.5rem; letter-spacing: .15em; }
:root[data-pf-identity] .pflabs-hub .game h3 { margin: 22px 0 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.035em; }
:root[data-pf-identity] .pflabs-hub .game p { color: var(--muted); font-size: .875rem; line-height: 1.7; margin-bottom: 24px; }
:root[data-pf-identity] .pflabs-hub .game b { margin-top: auto; color: var(--selected-text); font-size: .8125rem; }
body[data-pf-game="hub"] #playView h2 { font-size: 1.125rem; letter-spacing: -.02em; }
body[data-pf-game="hub"] #matches { padding-left: 20px; }
body[data-pf-game="hub"] main > footer { font-size: .8125rem; }

/* Final collection markup: compact SVG marks and recognizable game tiles. */
:root[data-pf-identity] .pf-collection-intro { margin-bottom: 28px; }
:root[data-pf-identity] .pf-collection-intro .eyebrow {
  margin: 0 0 18px; color: var(--accent); font-size: .6875rem; line-height: 1.5;
  font-weight: 750; letter-spacing: .17em; text-transform: uppercase;
}
:root[data-pf-identity] .pf-game-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
:root[data-pf-identity] .pflabs-hub .game .game-symbol {
  display: block; width: 48px; height: 48px; min-width: 48px; flex: 0 0 48px;
  fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
  color: var(--pf-tile-accent, var(--accent)); overflow: visible;
}
:root[data-pf-identity] .pflabs-hub .game.poker-game .game-symbol path {
  fill: currentColor; fill-opacity: .12;
}
:root[data-pf-identity] .pflabs-hub .game .eyebrow {
  margin: 22px 0 10px; color: var(--pf-tile-accent, var(--accent));
  font-size: .625rem; font-weight: 750; letter-spacing: .13em; line-height: 1.5;
}
:root[data-pf-identity] .pflabs-hub .game .eyebrow + h3 { margin-top: 0; }
:root[data-pf-identity] .pflabs-hub .game > p:not(.eyebrow) { margin: 12px 0 26px; }
:root[data-pf-identity] .pf-collection-note { margin: 26px 0 0; color: var(--muted); font-size: .8125rem; }
:root[data-pf-identity="hub"] .pflabs-hub .game { border-top: 3px solid var(--pf-tile-accent, var(--accent)); }
:root[data-pf-identity="hub"] .flipfeud-game { --pf-tile-accent: #9cc8ff; }
:root[data-pf-identity="hub"] .poker-game { --pf-tile-accent: #bed5b0; }
:root[data-pf-identity="hub"] .card-wager-game { --pf-tile-accent: #edbb68; }
:root[data-pf-identity="hub"][data-theme="light"] .flipfeud-game { --pf-tile-accent: #2857a3; }
:root[data-pf-identity="hub"][data-theme="light"] .poker-game { --pf-tile-accent: #285640; }
:root[data-pf-identity="hub"][data-theme="light"] .card-wager-game { --pf-tile-accent: #855016; }
:root[data-pf-identity="hub"][data-theme="pink"] .flipfeud-game { --pf-tile-accent: #c9c7f0; }
:root[data-pf-identity="hub"][data-theme="pink"] .poker-game { --pf-tile-accent: #dbcfb5; }
:root[data-pf-identity="hub"][data-theme="pink"] .card-wager-game { --pf-tile-accent: #e9b4a7; }
:root[data-pf-identity="poker"] .poker-game { --pf-tile-accent: var(--pf-brass); }
:root[data-pf-identity] .release-brand > a { display: inline-flex; background: transparent; border: 0; }
:root[data-pf-identity] .release-brand > a:focus-visible { outline: 3px solid var(--selected-border); outline-offset: 4px; border-radius: 8px; }

/* Card Wager's playing surface reads like a deliberate strategy board. */
body[data-pf-game="card-wager"] main { max-width: 980px; padding: 32px 24px; }
body[data-pf-game="card-wager"] .eyebrow { letter-spacing: .18em; color: var(--accent); }
body[data-pf-game="card-wager"] .intro h1 { font-weight: 850; letter-spacing: -.055em; font-size: clamp(2.15rem, 6vw, 3.2rem); }
body[data-pf-game="card-wager"] .intro h1 span { border-radius: 4px; letter-spacing: .05em; }
body[data-pf-game="card-wager"] .notice { border-radius: 8px; border-left: 3px solid var(--accent); line-height: 1.7; }
body[data-pf-game="card-wager"] .table {
  position: relative; border-radius: 13px; border-color: var(--border-strong); padding: 24px 32px;
  background:
    linear-gradient(135deg, transparent 49.7%, var(--pf-table-line) 50%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--pf-table-line) 50%, transparent 50.3%),
    linear-gradient(155deg, var(--pf-table-a), var(--pf-table-b));
  box-shadow: inset 0 0 0 6px var(--highlight), 0 20px 60px var(--shadow);
}
body[data-pf-game="card-wager"] .player { gap: 12px; }
body[data-pf-game="card-wager"] .identity { min-width: 0; }
body[data-pf-game="card-wager"] .identity strong { overflow-wrap: anywhere; }
body[data-pf-game="card-wager"] .avatar {
  flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 11px;
  color: var(--accent); background: var(--surface-raised);
}
body[data-pf-game="card-wager"] .counts { flex-shrink: 0; }
body[data-pf-game="card-wager"] .counts strong { font-weight: 750; }
body[data-pf-game="card-wager"] .instructions > span { color: var(--accent); font-weight: 700; }
body[data-pf-game="card-wager"] .instructions h2 { letter-spacing: -.035em; }
body[data-pf-game="card-wager"] .pot { border-block: 1px solid var(--pf-table-line); padding: 14px 4px; }
body[data-pf-game="card-wager"] .pot strong { color: var(--text); font-variant-numeric: tabular-nums; }
body[data-pf-game="card-wager"] .deck-visual { border-radius: 5px; transform: rotate(-4deg); }
body[data-pf-game="card-wager"] .deck-visual:last-child { transform: rotate(4deg); }
body[data-pf-game="card-wager"] .card:not(.back) {
  background: var(--pf-paper); border-color: #ddd3bd; color: var(--pf-paper-ink); border-radius: 7px;
}
body[data-pf-game="card-wager"] .card.red:not(.back) { color: var(--pf-card-red); }
body[data-pf-game="card-wager"] .back {
  border-radius: 6px;
  background:
    linear-gradient(45deg, transparent 42%, var(--back-b) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--back-b) 42% 58%, transparent 58%), var(--back-a);
  background-size: 18px 18px;
}
body[data-pf-game="card-wager"] .table .primary { border-radius: 7px; letter-spacing: .01em; box-shadow: 0 3px 0 var(--shadow); }
body[data-pf-game="card-wager"] .table .primary:hover { background: var(--accent); filter: brightness(1.08); color: var(--accent-ink); }
body[data-pf-game="card-wager"] #wager { accent-color: var(--accent); }
body[data-pf-game="card-wager"] .you { border-top-color: var(--border); }

/* Poker's type and felt differ from Wager, while the chrome stays familiar. */
body[data-pf-game="poker"] main { max-width: 940px; padding: 42px 28px; }
body[data-pf-game="poker"] :is(main, #playView) > header h1 {
  font: 500 clamp(3.7rem, 10vw, 6rem)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em; margin: 18px 0;
}
body[data-pf-game="poker"] :is(main, #playView) > header > p:not(.eyebrow) { color: var(--muted); font-size: 1.2rem; }
body[data-pf-game="poker"] #playView h2 { font-size: 1rem; letter-spacing: -.015em; }
:root[data-pf-identity="poker"] body[data-pf-game="poker"] .game { max-width: 640px; padding: 32px; border-radius: 20px; }
:root[data-pf-identity="poker"] body[data-pf-game="poker"] .game h3 { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 500; }
:root[data-pf-identity="poker"] body[data-pf-game="poker"] .game > span { color: var(--pf-brass); }
body[data-pf-game="poker"] #playView > section:last-of-type { color: var(--muted); }
body[data-pf-game="stud"] main { max-width: 960px; padding: 28px 28px 0; }
body[data-pf-game="stud"] :is(main, #playView) > h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1.12; letter-spacing: -.045em;
}
body[data-pf-game="stud"] .intro { margin-top: 12px; line-height: 1.7; }
body[data-pf-game="stud"] .stakes { color: var(--pf-brass); letter-spacing: .025em; }
body[data-pf-game="stud"] .table {
  border: 1px solid var(--border-strong); border-radius: 24px; padding: 24px;
  background: radial-gradient(ellipse at 50% 15%, var(--pf-table-a), var(--pf-table-b));
  box-shadow: inset 0 0 0 5px var(--pf-table-line), inset 0 0 45px var(--shadow), 0 16px 48px var(--shadow);
}
body[data-pf-game="stud"] .seat { background: var(--pf-seat); border-color: var(--pf-table-line); border-radius: 12px; }
body[data-pf-game="stud"] .seat.own-seat { border-color: var(--pf-brass); }
body[data-pf-game="stud"] .seat h2 { color: var(--text); font-weight: 650; }
body[data-pf-game="stud"] .seat h2 span { color: var(--pf-brass); }
body[data-pf-game="stud"] .empty-seat { color: var(--muted); }
body[data-pf-game="stud"] .center { padding: 16px 0 25px; color: var(--muted); }
body[data-pf-game="stud"] .center strong { font-family: Georgia, "Times New Roman", serif; font-size: 3rem; font-weight: 500; color: var(--pf-brass); }
body[data-pf-game="stud"] #street { text-transform: uppercase; letter-spacing: .15em; font-size: .6875rem; }
body[data-pf-game="stud"] .card { color: var(--pf-paper-ink); background: var(--pf-paper); border-color: #ddd3bd; }
body[data-pf-game="stud"] .card.red { color: var(--pf-card-red); }
body[data-pf-game="stud"] .card.down {
  color: var(--back-ink); border-color: var(--back-edge);
  background: repeating-linear-gradient(45deg, var(--back-a), var(--back-a) 3px, var(--back-b) 3px, var(--back-b) 5px);
  box-shadow: inset 0 0 0 3px var(--back-a), 0 3px 8px #0003;
}
body[data-pf-game="stud"] .card.private { border-bottom-color: var(--pf-brass); }
body[data-pf-game="stud"] #actions { gap: 10px; }
body[data-pf-game="stud"] #actions button { min-height: 48px; border-radius: 8px; }
body[data-pf-game="stud"] :is(main, #playView) > details { border-color: var(--border); margin-top: 10px; }
body[data-pf-game="stud"] :is(main, #playView) > details summary { min-height: 44px; display: list-item; padding: 10px 0; font-weight: 600; }
body[data-pf-game="stud"] #matches button { background: var(--surface-raised); color: var(--text); border-color: var(--border); }

/* The support screen inherits hub tokens without borrowing a game's visual theme. */
body[data-pf-game="support"] main { max-width: 820px; }
body[data-pf-game="support"] .bug-report-card { border-radius: 14px; }

@media (hover: hover) {
  :root[data-pf-identity] .pflabs-hub .game:hover { border-color: var(--accent); background: var(--surface-raised); transform: translateY(-3px); }
  :root[data-pf-identity] :where(main) :is(#friendsButton, #cancelInvite, #refreshMatches, #pf-refresh-matches, #backButton):hover { background: var(--surface-hover); }
}
@media (max-width: 800px) {
  body[data-pf-game="hub"] :is(main, #playView) > :is(.pf-game-grid, section:has(> .game)) { grid-template-columns: 1fr; }
  :root[data-pf-identity="hub"] body[data-pf-game="hub"] .game { padding: 24px; }
  :root[data-pf-identity="hub"] body[data-pf-game="hub"] .game h3 { margin-top: 16px; }
}
@media (max-width: 620px) {
  body:is([data-pf-game="hub"], [data-pf-game="poker"], [data-pf-game="stud"], [data-pf-game="card-wager"], [data-pf-game="support"]) main { padding: 24px 16px; }
  :root[data-pf-identity] :where(main) :is(#welcome, #invitePanel) { padding: 18px 16px; border-radius: 12px; }
  :root[data-pf-identity] :where(main) #startForm { align-items: stretch; }
  :root[data-pf-identity] :where(main) :is(input, select, textarea) { font-size: 1rem; }
  :root[data-pf-identity] :where(main) #startForm > label { flex-basis: 100%; }
  :root[data-pf-identity] :where(main) #startForm > :is(input, select) { width: 100%; flex-basis: 100%; }
  :root[data-pf-identity] :where(main) #startForm > button { flex: 1 1 auto; }
  :root[data-pf-identity] .pflabs-hub .notice { padding: 14px 16px; }
  :root[data-pf-identity="poker"] body[data-pf-game="poker"] .game { padding: 25px; }
  body[data-pf-game="card-wager"] .table { padding: 18px 12px; border-radius: 10px; }
  body[data-pf-game="card-wager"] .intro { align-items: flex-start; }
  body[data-pf-game="card-wager"] .intro h1 { font-size: 2rem; }
  body[data-pf-game="card-wager"] .intro .secondary { flex-shrink: 0; }
  body[data-pf-game="card-wager"] .center { gap: 14px; }
  body[data-pf-game="card-wager"] .pot { width: 170px; }
  body[data-pf-game="card-wager"] .your-hand { gap: 5px; }
  body[data-pf-game="card-wager"] .your-hand .card { width: clamp(43px, 13.9vw, 70px); height: clamp(72px, 20vw, 98px); flex: 0 1 auto; }
  body[data-pf-game="card-wager"] .counts { gap: 10px; }
  body[data-pf-game="card-wager"] .identity small { max-width: 160px; font-size: 10px; line-height: 1.5; }
  body[data-pf-game="stud"] .table { padding: 20px 12px; border-radius: 18px; }
  body[data-pf-game="stud"] .seat { padding: 12px 10px; }
  body[data-pf-game="stud"] .cards { gap: 4px; }
  body[data-pf-game="stud"] .card { min-width: 0; flex: 0 1 48px; height: 65px; font-size: 19px; }
  body[data-pf-game="stud"] .card small { font-size: 14px; }
  body[data-pf-game="stud"] #actions button { flex: 1 1 auto; padding: 13px 15px; }
}
@media (max-width: 380px) {
  body[data-pf-game="card-wager"] .identity { gap: 8px; }
  body[data-pf-game="card-wager"] .avatar { width: 32px; height: 36px; flex-basis: 32px; font-size: 21px; }
  body[data-pf-game="card-wager"] .identity strong { font-size: 12px; }
  body[data-pf-game="card-wager"] .identity small { max-width: 132px; }
  body[data-pf-game="card-wager"] .counts small { font-size: 8px; }
  body[data-pf-game="card-wager"] .counts strong { font-size: 16px; }
  body[data-pf-game="card-wager"] .center { gap: 11px; }
  body[data-pf-game="card-wager"] .deck-visual { width: 36px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-pf-identity] body::before, :root[data-pf-identity] body::after,
  :root[data-pf-identity] main *, :root[data-pf-identity] main *::before, :root[data-pf-identity] main *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  :root[data-pf-identity] .pflabs-hub .game:hover { transform: none; }
}