/* Music Theory Poker (web/js/theory/poker-*.js). Every id and class is
   prefixed pk-; the overlay is #poker-screen, a peer of #theory-screen. */
#poker-screen { padding: 0; align-items: stretch; justify-content: stretch; background: radial-gradient(ellipse at 50% 30%, #3a2416 0%, #1c110b 55%, #0a0604 100%); backdrop-filter: none; }
#pk-root { position: relative; width: 100%; height: 100%; overflow: hidden; color: #f3e9d2; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  display: grid; grid-template-rows: 52px 1fr 92px; grid-template-columns: 1fr 260px; grid-template-areas: "top top" "felt log" "you log"; }
#pk-root::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, transparent 3px 26px), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px); }

/* the bar */
#pk-top { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2)); border-bottom: 1px solid rgba(255,215,94,.18); z-index: 3; }
#pk-title { font-size: 18px; font-weight: 900; letter-spacing: 1px; color: #ffd75e; }
#pk-sub { font-size: 12.5px; opacity: .7; flex: 1; }
#pk-topbtns { display: flex; gap: 8px; }
.pk-tb { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #f3e9d2; cursor: pointer; }
.pk-tb:hover { border-color: #ffd75e; }
.pk-tb-warn { border-color: rgba(255,120,120,.5); }

/* the felt */
#pk-felt { grid-area: felt; position: relative; margin: 18px 12px 6px 18px; border-radius: 50% / 50%; min-height: 0;
  background: radial-gradient(ellipse at 50% 45%, #2e6b46 0%, #1f5334 55%, #173f28 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 0 0 14px #4a2c17, 0 0 0 17px #2a170c, 0 18px 50px rgba(0,0,0,.6); }
#pk-felt::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px solid rgba(255,215,94,.14); pointer-events: none; }
#pk-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60%; pointer-events: none; }
#pk-board { display: flex; gap: 7px; min-height: 66px; }
#pk-pot { font-size: 15px; font-weight: 800; color: #ffe58a; display: flex; align-items: center; gap: 6px; min-height: 20px; text-shadow: 0 1px 2px #000; }
#pk-pot span { font-weight: 500; opacity: .75; }
#pk-callout { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; transform: translateY(8px); min-height: 48px; }
#pk-callout.show { opacity: 1; transform: none; }
#pk-callout b { font-size: 26px; font-weight: 900; letter-spacing: 2px; font-style: italic; color: #fff2c2; text-shadow: 0 0 18px rgba(255,215,94,.6), 0 2px 0 #7a4a00; }
#pk-callout.me b { color: #b6ffd1; text-shadow: 0 0 18px rgba(127,227,165,.7), 0 2px 0 #0b5a2a; }
#pk-callout span { font-size: 13px; opacity: .9; text-shadow: 0 1px 2px #000; }

/* cards: white keys are cream, black keys are black */
.pk-card { position: relative; width: 46px; height: 64px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .18s, box-shadow .18s, opacity .2s; }
.pk-card.white { background: linear-gradient(180deg, #fffaf0, #efe4c8); color: #2a1a08; }
.pk-card.black { background: linear-gradient(180deg, #2d2a33, #0f0d14); color: #fff3d6; box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.pk-card.down { background: repeating-linear-gradient(45deg, #7a1f2b 0 4px, #5c1520 4px 8px); box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 2px #e8c27a, inset 0 0 0 3px #5c1520; }
.pk-card.ghost { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pk-card b { font-size: 21px; font-weight: 900; }
.pk-card small { font-size: 10px; opacity: .65; margin-top: 2px; }
.pk-card i { position: absolute; right: 4px; bottom: 3px; font-style: normal; font-size: 12px; opacity: .6; }
.pk-card.lit { transform: translateY(-6px); box-shadow: 0 0 0 2px #ffd75e, 0 0 18px rgba(255,215,94,.8), 0 4px 10px rgba(0,0,0,.5); }
.pk-card.dim { opacity: .45; }

/* seats */
.pk-seat { position: absolute; width: 150px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; transition: opacity .3s; }
.pk-seat.folded { opacity: .45; }
.pk-seat.out { opacity: .3; }
.pk-seat .pk-face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.25); background: #241610; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(0,0,0,.6); transition: border-color .2s, box-shadow .2s; }
.pk-seat .pk-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pk-seat.acting .pk-face { border-color: #ffd75e; box-shadow: 0 0 0 3px rgba(255,215,94,.35), 0 0 22px rgba(255,215,94,.7); }
.pk-seat.me .pk-face { border-color: rgba(127,227,165,.6); }
.pk-name { font-size: 12.5px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pk-lv { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 8px; background: rgba(255,215,94,.2); color: #ffe58a; vertical-align: 1px; }
.pk-stack { font-size: 13px; font-weight: 800; color: #ffe58a; display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 2px #000; }
.pk-chip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #d99a1c 60%, #8f5a0a); box-shadow: 0 1px 2px rgba(0,0,0,.6); vertical-align: -1px; }
.pk-cards { display: flex; gap: 4px; min-height: 48px; }
.pk-seat:not(.me) .pk-card { width: 34px; height: 48px; }
.pk-seat:not(.me) .pk-card b { font-size: 15px; } .pk-seat:not(.me) .pk-card small { font-size: 8px; } .pk-seat:not(.me) .pk-card i { font-size: 9px; right: 3px; bottom: 2px; }
.pk-seat.me .pk-cards { order: -1; margin-bottom: 4px; }
.pk-bet { position: absolute; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pk-seat .pk-bet { top: -22px; }
.pk-seat.me .pk-bet { top: auto; bottom: 100%; margin-bottom: 4px; }
.pk-act { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; min-height: 15px; color: #ddd; text-shadow: 0 1px 2px #000; }
.pk-act.fold { color: #ff8a97; } .pk-act.raise, .pk-act.allin { color: #ffd75e; } .pk-act.call { color: #b6ffd1; }
.pk-act.shown { color: #f3e9d2; font-style: italic; } .pk-act.winner { color: #ffe58a; font-style: normal; }
.pk-dealer { position: absolute; right: 8px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #000; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pk-say { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 170px; padding: 6px 9px; border-radius: 10px; background: #fff8e6; color: #2a1a08; font-size: 12px; line-height: 1.35; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.5); z-index: 5; }
.pk-say::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff8e6; }
.pk-seat.me .pk-dealer { right: -14px; top: 6px; }
.pk-seat.me .pk-say { bottom: auto; top: calc(100% + 6px); } .pk-seat.me .pk-say::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff8e6; }

/* the player's strip */
#pk-you { grid-area: you; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); border-top: 1px solid rgba(255,215,94,.15); z-index: 3; }
#pk-mine { font-size: 14px; min-width: 200px; }
#pk-mine b { color: #ffe58a; font-size: 16px; } #pk-mine span { font-size: 12px; opacity: .65; }
#pk-mine-play { font: inherit; font-size: 11.5px; font-weight: 800; margin-left: 10px; padding: 4px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,215,94,.55); background: rgba(255,215,94,.14); color: #ffe58a; vertical-align: 1px; transition: background .12s, box-shadow .12s; }
#pk-mine-play:hover { background: rgba(255,215,94,.3); box-shadow: 0 0 12px rgba(255,215,94,.4); }
#pk-actions { display: flex; align-items: center; gap: 8px; }
.pk-act-btn { font: inherit; font-size: 15px; font-weight: 900; letter-spacing: .5px; padding: 11px 18px; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.pk-act-btn:hover { transform: translateY(-2px); border-color: #ffd75e; }
.pk-act-call { border-color: rgba(127,227,165,.6); background: rgba(47,193,107,.2); }
.pk-act-raise { border-color: rgba(255,215,94,.7); background: linear-gradient(180deg, #ffe58a, #ffab2e); color: #3a2000; box-shadow: 0 3px 0 #b06a10; }
#pk-raise-box { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.15); }
#pk-presets { display: flex; gap: 4px; }
.pk-preset { font: inherit; font-size: 11px; font-weight: 800; padding: 5px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #ddd; cursor: pointer; }
.pk-preset:hover { border-color: #ffd75e; color: #ffd75e; }
#pk-raise-amt { width: 130px; accent-color: #ffd75e; }

/* the log */
#pk-log { grid-area: log; overflow-y: auto; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; background: rgba(0,0,0,.35); border-left: 1px solid rgba(255,215,94,.12); z-index: 2; }
.pk-line { padding: 2px 0; opacity: .85; border-bottom: 1px solid rgba(255,255,255,.04); }
.pk-line.hand { margin-top: 8px; color: #ffd75e; opacity: 1; }
.pk-line.sys { font-style: italic; opacity: .7; }
.pk-line.street { color: #b6ffd1; }
.pk-line.win { color: #ffe58a; opacity: 1; } .pk-line.lose { opacity: .9; }
.pk-line.fold { opacity: .55; }

/* sheets: lobby, buy-in, ladder, summary */
.pk-sheet { position: absolute; inset: 0; z-index: 8; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; background: rgba(8,4,2,.78); backdrop-filter: blur(4px); }
.pk-panel { width: min(720px, 94vw); margin: auto; padding: 26px 26px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(60,36,20,.97), rgba(24,14,8,.98)); border: 1px solid rgba(255,215,94,.3); box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.pk-panel-narrow { width: min(460px, 94vw); text-align: center; }
.pk-panel-wide { width: min(860px, 96vw); }
.pk-h1 { font-size: 36px; font-weight: 900; font-style: italic; letter-spacing: 1.5px; background: linear-gradient(180deg, #fff2c2, #ffd75e 55%, #d08a1a); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }
.pk-h2 { font-size: 24px; font-weight: 900; letter-spacing: 1px; color: #ffd75e; margin-bottom: 6px; }
.pk-lead { font-size: 13.5px; line-height: 1.55; opacity: .85; margin: 8px 0 14px; }
.pk-wallet { text-align: center; font-size: 14px; margin-bottom: 12px; } .pk-wallet b { color: #ffe58a; }
.pk-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk-table-card { font: inherit; text-align: left; color: #f3e9d2; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); cursor: pointer; transition: border-color .12s, transform .12s; }
.pk-table-card:hover:not(.off) { border-color: #ffd75e; transform: translateY(-2px); }
.pk-table-card.off { opacity: .5; cursor: default; }
.pk-tc-name { font-size: 16px; font-weight: 900; color: #ffe58a; }
.pk-tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: rgba(182,255,209,.2); color: #b6ffd1; vertical-align: 2px; }
.pk-tc-blurb { font-size: 12.5px; line-height: 1.45; opacity: .8; margin: 4px 0 6px; }
.pk-tc-meta { font-size: 11.5px; opacity: .65; }
.pk-tc-gate { font-size: 12px; font-weight: 800; margin-top: 6px; color: #b6ffd1; }
.pk-table-card.off .pk-tc-gate { color: #ff9aa8; }
.pk-row-btns { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pk-btn { font: inherit; font-size: 14px; font-weight: 800; padding: 10px 18px; border-radius: 11px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }
.pk-btn:hover { border-color: #ffd75e; }
.pk-btn-gold { background: linear-gradient(180deg, #ffe58a, #ffab2e); color: #3a2000; border-color: transparent; box-shadow: 0 3px 0 #b06a10; }
.pk-btn-dim { opacity: .7; }
.pk-buyin-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin: 6px 0; }
.pk-buyin-row b { font-size: 22px; color: #ffe58a; display: flex; align-items: center; gap: 6px; }
#pk-buyin-range { width: 100%; accent-color: #ffd75e; }
.pk-buyin-minmax { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .6; }
#pk-ladder-rows { max-height: 56vh; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.1); }
#pk-guide-rows { max-height: 52vh; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.1); }
.pk-grow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pk-gtier { flex: 0 0 24px; font-weight: 900; font-size: 15px; color: #ffd75e; text-align: center; padding-top: 14px; }
.pk-gcards { flex: 0 0 76px; display: flex; gap: 4px; }
.pk-gcards .pk-card { width: 34px; height: 48px; } .pk-gcards .pk-card b { font-size: 15px; } .pk-gcards .pk-card small { font-size: 8px; } .pk-gcards .pk-card i { font-size: 9px; right: 3px; bottom: 2px; }
.pk-gbody { flex: 1; min-width: 0; }
.pk-gname { font-size: 14px; font-weight: 800; }
.pk-gwin { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: rgba(255,215,94,.16); color: #ffe58a; white-space: nowrap; }
.pk-gwhy { font-size: 12.5px; line-height: 1.5; opacity: .8; margin-top: 3px; }
.pk-lrow { display: grid; grid-template-columns: 36px 1fr 200px 90px; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.pk-lrow.none { opacity: .55; }
.pk-lrung { font-weight: 900; color: #ffd75e; text-align: center; }
.pk-lname b { font-weight: 800; } .pk-lname i { font-style: italic; opacity: .6; font-size: 12px; } .pk-lname small { display: block; font-size: 10.5px; opacity: .55; }
.pk-lex { font-family: ui-monospace, monospace; font-size: 12.5px; opacity: .85; letter-spacing: .5px; }
.pk-lodds { text-align: right; font-variant-numeric: tabular-nums; opacity: .75; font-size: 12px; }

@media (max-width: 900px) {
  #pk-root { grid-template-columns: 1fr; grid-template-areas: "top" "felt" "you"; }
  #pk-log { display: none; }
  .pk-tables { grid-template-columns: 1fr; }
  .pk-lrow { grid-template-columns: 30px 1fr 90px; } .pk-lex { display: none; }
}