:root {
  color-scheme: dark;
  --page: #121813;
  --ink: #f3f0de;
  --muted: #b0b7a5;
  --quiet: #83917f;
  --accent: #f0ce7d;
  --line: #384338;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-width: 280px; min-height: 100vh;
  background: radial-gradient(ellipse at 50% 21%, #263429 0%, #172119 42%, var(--page) 73%);
  color: var(--ink); -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button:disabled { opacity: .5; cursor: wait; }
.club {
  width: min(100%, 750px); margin: auto;
  padding: max(15px, env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px)) clamp(12px, 4.1vw, 35px)
    max(16px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
}
.masthead, .title-row, #control-head, .sheet-head, footer { display: flex; justify-content: space-between; align-items: center; }
.masthead { min-height: 44px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; font-size: 16px; letter-spacing: -.7px; }
.brand-type { letter-spacing: 1.4px; font-size: 10px; color: #c4ae78; margin-left: 1px; }
.brand-chip {
  display: grid; place-items: center; height: 28px; width: 28px; border-radius: 50%;
  background: #e7c781; color: #263220; outline: 1px dashed #283723; outline-offset: -3px;
  font: bold italic 20px/1 Georgia, serif; transform: rotate(-8deg);
}
.text-button, .menu-button, .close-button { border: 0; background: transparent; color: var(--muted); }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 1px 8px 10px; font-size: 12px; }
.help-ring { border: 1px solid #92a18f; border-radius: 50%; width: 16px; height: 16px; line-height: 14px; text-align: center; font-size: 11px; font-weight: 650; }
.title-row { margin: 22px 0 17px; gap: 12px; }
h1, h2, p { margin: 0; }
h1 { font: 500 clamp(42px, 8.7vw, 67px)/.94 Georgia, "Times New Roman", serif; letter-spacing: -.057em; }
.title-suit { color: var(--accent); vertical-align: top; display: inline-block; margin: 4px 0 0 5px; font: 24px/.9 Georgia, serif; transform: rotate(12deg); }
.subtitle { margin: 8px 0 0 2px; color: var(--muted); font-size: 12px; }
.mode { white-space: nowrap; display: flex; align-items: center; gap: 6px; border: 1px solid #41583c; background: #243724; color: #c7d6b3; border-radius: 100px; padding: 6px 9px; font-size: 10px; font-weight: 600; }
.mode-light, footer i { display: inline-block; height: 6px; width: 6px; border-radius: 100%; background: #a4c682; }
.table-wrap { padding: 2px 0; isolation: isolate; }
.felt {
  position: relative; height: clamp(296px, 39.2vh, 390px); overflow: hidden;
  border: 6px solid #3b4031; border-radius: 43% / 29%;
  background-color: #295344;
  background-image: repeating-linear-gradient(38deg, #aad6aa07 0 1px, transparent 1px 3px), repeating-linear-gradient(123deg, #020f090c 0 1px, transparent 1px 4px), radial-gradient(ellipse at 46% 36%, #41785e 0%, #2b5b47 43%, #1d4435 76%, #17372b 100%);
  box-shadow: inset 0 0 0 2px #171e18, inset 0 0 0 4px #8b8057, inset 0 0 24px #07170f88, 0 0 0 1px #665f43, 0 7px 0 #0a100b, 0 10px 18px #0004;
}
.felt-edge { position: absolute; inset: 13px; border: 1px solid #d4cb812c; border-radius: inherit; pointer-events: none; }
.felt-stamp {
  position: absolute; bottom: 17%; right: 15%; color: #b1ce9a15; border: 2px solid #bbd49814; border-radius: 50%;
  width: 40px; height: 40px; display: grid; place-items: center; transform: rotate(-18deg);
  font: italic bold 28px/1 Georgia, serif; pointer-events: none;
}
.deck { position: absolute; left: 12.8%; top: 23%; width: 20px; height: 29px; border-radius: 2px; border: 1px solid #a99e75; background: repeating-linear-gradient(45deg,#354c42 0 2px,#667c68 2px 3px); transform: rotate(-16deg); box-shadow: 1px 2px #c8bda1, 2px 3px #3a4436, 2px 4px #aeac8e, 3px 6px 5px #0005; }
.rack { position: absolute; right: 13%; top: 27%; width: 27px; height: 23px; transform: rotate(14deg); }
.rack i { position: absolute; top: 7px; left: 0; width: 13px; height: 9px; border: 2px dashed #e5c37d; border-radius: 50%; background:#ad713e; box-shadow: 0 2px #8e532c,0 3px #d1aa64,0 5px #614b2d; }
.rack i:nth-child(2){ left:10px; top:10px; }
.rack i:nth-child(3){ left:7px; top:3px; }
.seat { position: absolute; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; width: 75%; z-index: 2; }
.opponent { top: 12px; }
.self { bottom: 11px; }
.seat-label { display: flex; align-items:center; justify-content:center; gap:5px; max-width:100%; padding:5px 10px; border-radius:40px; background:#142e25f2; color:#f0efdb; border:1px solid #7498786e; font-weight:600; font-size:12px; line-height:1.2; }
.seat-label.turn { border-color:#e7c77b; box-shadow: 0 0 0 2px #d8b25218; }
.seat-label .seat-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: min(30vw,162px); }
.seat-label .stack { color:#e9c879; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:4px; border-left:1px solid #819b7a55; }
.seat-bet { font-size:10px; color:#b8cdae; white-space:nowrap; }
.dealer { font: 800 8px/12px Arial,sans-serif; color:#2e3627; background:#cca960; width:12px; height:12px; text-align:center; border-radius:50%; flex:none; }
.seat.empty .seat-label { color:#c3cfb9; background:#173b2ea8; border-style:dashed; }
.hand { display:flex; align-items:center; justify-content:center; }
.hand .card:first-child { transform:translateX(3px) rotate(-7deg); }
.hand .card:nth-child(2) { transform:translateX(-3px) rotate(7deg); }
.opponent .hand { margin: 5px 0 -2px; }
.self .hand { margin: 0 0 5px; }
.middle { position:absolute; z-index:1; top:49%; left:50%; translate:-50% -50%; display:flex; width:94%; flex-direction:column; align-items:center; }
.pot { display:flex; justify-content:center; align-items:center; gap:6px; font-variant-numeric:tabular-nums; color:#fff1c7; line-height:1; font-size:14px; font-weight:700; min-height:17px; margin-bottom:9px; }
.coin { display:inline-block; width:13px; height:11px; border-radius:50%; border:2px dashed #e5ce8b; background:#95723b; box-shadow:0 2px #846637; flex:none; }
.board { display:flex; align-items:center; justify-content:center; gap:clamp(3px,1.3vw,8px); }
.card { flex:none; display:inline-flex; align-items:center; justify-content:center; flex-direction:column; position:relative;
  width:clamp(34px,9.9vw,60px); aspect-ratio: .70; border-radius:5px; background:linear-gradient(135deg,#fff9e9,#eae7d4);
  box-shadow: 0 3px 0 #c3bfaa,0 5px 6px #09221966; color:#20362b; user-select:none; }
.card .rank { font-family:Georgia, "Times New Roman", serif; font-weight:700; font-size:clamp(20px,5.8vw,32px); line-height:.98; letter-spacing:-.07em; }
.card .suit { font-family:Georgia,serif; font-size:clamp(14px,3.6vw,21px); line-height:1.05; }
.card.red { color:#a6413b; }
.card.back { background:repeating-linear-gradient(45deg, transparent 0 4px,#b9cc9a3b 4px 5px),repeating-linear-gradient(-45deg,#315c48 0 4px,#9bb48b 4px 5px); border:2px solid #ddd3aa; }
.card.back::after { content:"♠"; color:#d4c898; line-height:1; display:grid; place-items:center; background:#315744; border:1px solid #95ab83; width:45%; height:45%; border-radius:50%; font-size:15px; }
.card.empty-card { box-shadow:none; background:#10291c20; border:1px dashed #c3cea34f; }
.opponent .card { width:20px; border-radius:3px; }
.opponent .card.back::after { font-size:7px; }
.opponent .rank { font-size:12px; }
.opponent .suit { font-size:9px; }
.self .card { width:clamp(35px,10.4vw,53px); }
.street { margin-top:9px; min-height:11px; font-size:9px; color:#cedeac; letter-spacing:1.35px; text-transform:uppercase; font-weight:650; text-align:center; }
.preview .pot:empty, .eyebrow:empty { display:none; }
.preview .board { gap:0; margin-top:15px; }
.preview .board .card { width:clamp(46px,13vw,68px); border-radius:5px; }
.preview .board .card:nth-child(1) { transform:translate(2px,3px) rotate(-11deg); }
.preview .board .card:nth-child(2) { transform:translateY(-3px); z-index:1; }
.preview .board .card:nth-child(3) { transform:translate(-2px,3px) rotate(11deg); }
.preview .street { margin-top:17px; }
.preview .self { bottom:19px; }
.preview .opponent { top:19px; }
.controls { margin:23px 1px 0; }
#control-head { gap:10px; }
.eyebrow { color:#d8ba76; font-weight:650; font-size:9px; text-transform:uppercase; letter-spacing:1.6px; line-height:1.5; }
.controls h2, .sheet-head h2 { font-size:clamp(22px,4.2vw,29px); font-weight:650; letter-spacing:-.045em; line-height:1.12; margin-top:3px; }
.menu-button, .close-button { min-height:36px; min-width:36px; border:1px solid #424f40; border-radius:50%; font-size:16px; background:#263025; }
.description { color:var(--muted); font-size:13px; line-height:1.45; margin-top:5px; max-width:58ch; }
.description:empty {display:none;}
.actions, .sheet-actions { display:flex; align-items:stretch; gap:8px; margin-top:14px; }
.act { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:46px; border:1px solid #53604b; color:var(--ink); background:#2a362a; border-radius:11px; padding:8px 10px; text-align:center; font-weight:650; font-size:14px; }
.act.primary { color:#2b2718; background:var(--accent); border-color:#f5d991; box-shadow:inset 0 1px 0 #fff3; }
.act.quiet { color:#dbbfad; border-color:#5e4e42; background:#322e26; }
.act:active:enabled { transform:translateY(1px); }
.act:hover:enabled,.text-button:hover,.menu-button:hover,.close-button:hover { filter:brightness(1.08); }
.btn-icon { font-size:20px; line-height:.7; }
.notice { margin-top:9px; font-size:12px; line-height:1.4; color:#f2c792; }
footer { padding-top:13px; border-top:1px solid var(--line); margin:20px 1px 0; font-size:10px; color:#97a391; gap:8px; }
#connection { display:flex; align-items:center; gap:6px; }
#connection i { width:5px; height:5px; background:#bac17b; }
#connection.pending i { background:#f2bd72; }
dialog { width:min(400px,calc(100% - 28px)); max-height:86vh; background:#1e2a21; border:1px solid #65705a; border-radius:18px; padding:0; color:var(--ink); box-shadow:0 24px 80px #0009; }
dialog::backdrop { background:#08110bd9; }
.sheet { padding:20px; }
.sheet-head { gap:12px; margin-bottom:15px; }
.sheet-head h2 { font-size:24px; }
.close-button { font-size:22px; }
.sheet p,.sheet li { line-height:1.55; font-size:14px; color:#c4cbb9; }
.sheet ul { padding-left:18px; margin:8px 0 0; }
.sheet li + li { margin-top:7px; }
.sheet label { display:block; color:var(--muted); font-size:13px; }
.sheet input[type="number"], .sheet input[type="text"] { box-sizing:border-box; width:100%; padding:12px; margin:7px 0; color:var(--ink); background:#18241c; border:1px solid #7a8a6c; border-radius:9px; font-size:16px; }
.sheet input[type="range"] { width:100%; accent-color:var(--accent); min-height:30px; }
@media(min-width:680px) {
  .club { padding-top:23px; }
  .title-row { margin:26px 0 20px; }
  .felt { border-width:8px; }
  .opponent { top:15px; }
  .self { bottom:15px; }
  .controls { margin:24px 1px 0; }
  .act { min-height:48px; }
}
@media(max-height:710px) and (max-width:679px) {
  .club {padding-top:max(7px,env(safe-area-inset-top),var(--tg-content-safe-area-inset-top,0px));}
  .masthead {min-height:35px;padding-bottom:4px;} .title-row{margin:12px 0;}
  h1 { font-size:39px; }.subtitle {margin-top:5px;}
  .felt {height:clamp(248px,43vh,285px);}
  .self {bottom:7px;} .opponent {top:8px;}
  .controls {margin-top:16px;} footer {margin-top:12px;}
}
@media(max-width:350px) {
  .mode{font-size:9px;padding:5px 6px;} .act {padding:7px 4px;font-size:12px;}
}

.hand-tools { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:9px 2px 0; min-height:44px; border-bottom:1px solid var(--line); }
#my-hand { font-size:13px; font-weight:600; }
.combo-button { flex:none; min-height:44px; padding:7px 4px 7px 12px; border:0; background:none; color:var(--accent); font-size:13px; font-weight:650; }
.combo-button::after { content:" ↗"; }
body[data-scene="table"] .controls { margin-top:12px; }
body[data-scene="table"] .middle { top:47%; }
body[data-scene="table"] .act, .menu-button, .close-button, .text-button { min-width:44px; min-height:44px; }
.card.made-card { outline:1px solid #d6b967; outline-offset:1px; }
.card.win-card,.card.split-card { outline:2px solid #ffcd69; outline-offset:1px; }
.card.split-card { outline-color:#a6ddd1; }
.seat-label.winner { border-color:#ffcc70; }
.seat-label.winner::before { content:"★"; font-size:10px; color:#ffcc70; }
.seat-label.split-winner {border-color:#a6ddd1;}
.seat-label.split-winner::before {color:#a6ddd1;}
dialog[data-purpose="combos"] {width:min(435px,calc(100% - 18px)); max-height:min(90dvh,790px); overflow:auto;}
dialog[data-purpose="combos"] .sheet {padding:14px 17px;}
dialog[data-purpose="combos"] .sheet-head {position:sticky; top:-14px; z-index:1; padding:3px 0; margin-bottom:5px; background:#1e2a21;}
.rank-list {list-style:none; padding:0; margin:6px 0; counter-reset:hand-rank;}
.sheet .rank-list li + li {margin:0;}
.rank-row {counter-increment:hand-rank; display:flex; gap:6px; align-items:center; min-height:40px; padding:3px 5px; border-bottom:1px solid #465242; border-radius:4px;}
.rank-row::before {content:counter(hand-rank, decimal-leading-zero); color:#9aa393; font:600 10px/1 Arial,sans-serif; width:16px; flex:none;}
.rank-name {font-size:13px; color:var(--ink); flex:1;}
.rank-row.is-current {background:#354734; box-shadow:inset 3px 0 var(--accent);}
.rank-row.is-current .rank-name {color:var(--accent); font-weight:650;}
.rank-cards {display:flex; gap:2px;}
.rank-sample {display:inline-flex; flex-direction:column; justify-content:center; align-items:center; width:20px; height:28px; border-radius:3px; background:#ede9d7; color:#243629; font:700 13px/.94 Georgia,serif;}
.rank-sample.red {color:#a6413b;}
.rank-sample .mini-suit {font-size:11px;}
.rank-hint {font-size:12px!important;}
@media(prefers-reduced-motion:no-preference) {
  .card.new-card {animation:deal-in 270ms ease-out both;}
  .pot.pot-changed .coin {animation:chips-in 320ms ease-out both;}
  @keyframes deal-in {from {opacity:.3; translate:0 -7px;} to {opacity:1; translate:0 0;}}
  @keyframes chips-in {0% {transform:translateY(-6px);opacity:.45;} 66% {transform:translateY(1px);} 100% {transform:translateY(0);opacity:1;}}
}
@media(max-height:710px) and (max-width:679px) {
  body[data-scene="table"] .title-row {margin:6px 0 9px;}
  body[data-scene="table"] h1 {font-size:32px;}
  body[data-scene="table"] .hand-tools {margin-top:5px;}
  body[data-scene="table"] .controls {margin-top:7px;}
}
@media(max-width:340px) {
  .rank-sample {width:16px;} .rank-name{font-size:12px;}
}

.rank-row.is-current .rank-name::after {content:"Ваша рука"; display:block; width:max-content; color:#d4dabe; font-size:9px; font-weight:500; line-height:1.2;}

.moving-chip { pointer-events:none; position:absolute; z-index:4; width:15px; height:10px; margin:-5px 0 0 -7px; border-radius:50%; border:2px dashed #f8db91; background:#a26e37; box-shadow:0 2px #765023,0 3px #dcb879; }
@media(prefers-reduced-motion:no-preference) {
  .moving-chip { animation:chip-flight 360ms cubic-bezier(.3,.02,.35,1) forwards; }
  @keyframes chip-flight {0% {transform:translate(0,0) scale(.65);opacity:0;} 18% {opacity:.95;} 80% {opacity:1;} 100% {transform:translate(var(--chip-x),var(--chip-y)) scale(.8);opacity:0;}}
}
@media(prefers-reduced-motion:reduce) {.moving-chip {display:none;}}

dialog[data-purpose="combos"] .sheet-head { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:3px 6px; align-items:center; }
dialog[data-purpose="combos"] .sheet-head h2 { min-width:0; }
.combo-return { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; min-height:44px; width:100%; border:1px solid #9d8b57; border-radius:8px; background:#3c3d2c; padding:6px 12px; color:#ffe2a5; font-size:13px; font-weight:650; }
@media(max-width:340px) {
  dialog[data-purpose="combos"] .sheet {padding:11px;}
  dialog[data-purpose="combos"] .sheet-head {top:-11px;}
}

.header-actions { display:flex; align-items:center; gap:6px; }
.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.palette-field select { max-width:95px; min-height:44px; border:0; background:transparent; color:var(--ink); font:600 11px/1 inherit; cursor:pointer; }
.palette-field option {background:#17241c;}
.wing {display:contents;}
.opponent[data-position] {width:26%; max-width:154px; top:auto; bottom:auto;}
.opponent[data-position="north"] {left:50%;top:4%;}
.opponent[data-position="northwest"] {left:21%;top:11%;}
.opponent[data-position="northeast"] {left:79%;top:11%;}
.opponent[data-position="west"] {left:16%;bottom:11%;}
.opponent[data-position="east"] {left:84%;bottom:11%;}
.seat .hand:empty {display:none;}
.seat .seat-state {font-size:9px; font-weight:600; line-height:1.1; color:#f1e4b4; text-shadow:0 1px 2px #000; }
.seat.folded .seat-label, .seat.left .seat-label, .seat.out .seat-label {opacity:.7;}
.seat.all-in .seat-state {color:#ffe29e;}
.opponent .seat-label {max-width:100%; gap:3px;padding-inline:6px;}
.opponent .stack {padding-left:3px;}
.opponent .seat-name {min-width:0; max-width:none;}
.opponent .seat-bet {flex:none;}
.opponent .hand {margin:3px 0 0;}
.side-pots {display:flex;flex-wrap:wrap;gap:2px 5px;justify-content:center;margin:0 0 3px;}
.side-pot { color:#ffebbd; font-size:9px; line-height:1.16; padding:2px 3px; border-radius:3px; background:#15251cba; white-space:nowrap; }
button.side-pot { border:1px solid var(--line); min-height:24px; padding:3px 6px; }
button.side-pot[aria-pressed="true"] { border-color:var(--accent); color:var(--ink); }
.pot-results {margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35; overflow-wrap:anywhere;}
.pot-results p+p {margin-top:3px;}
[data-seats="6"] .rack, [data-seats="5"] .rack, [data-seats="6"] .deck, [data-seats="5"] .deck {display:none;}
@media(max-width:380px) {
 .header-actions {gap:3px;}
 .opponent .seat-label {font-size:10px; padding:3px 4px;}
 .opponent .seat-bet {font-size:9px;}
}