/* Poker Texas Hold'em — daftar meja & meja hijau berbingkai kayu pada kanvas 1280×720. */

html[data-screen='poker'] body, html[data-screen='pokerLobby'] body {
  background: radial-gradient(ellipse at 50% 40%, #1c2a20, #070b08 70%) fixed;
}

/* ---- Kartu ---- */
.pc { display: inline-block; width: 46px; height: 64px; border-radius: 5px; overflow: hidden; vertical-align: top; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); background: #fff; }
.pc svg { width: 100%; height: 100%; display: block; }
.pc.slot { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.pc.hl { box-shadow: 0 0 0 3px #ffd84d, 0 0 16px 4px rgba(255, 216, 77, 0.8); transform: translateY(-6px); }
.pc.mini { width: 30px; height: 42px; border-radius: 3px; margin-right: 2px; }

/* ---- Kartu game di lobi ---- */
.mini-felt { position: relative; width: 190px; height: 130px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #1f9a4f, #0b5a2c 70%); box-shadow: 0 0 0 8px #6b3a12, 0 0 0 11px #c9a227, 0 10px 18px rgba(0, 0, 0, 0.6); }
.mini-felt .mc { position: absolute; top: 22px; width: 60px; height: 84px; left: 40px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.mini-felt .mc + .mc { left: 88px; }
.mini-felt .mc svg { width: 100%; height: 100%; display: block; }
.mini-felt .chip { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 4px dashed #fff; }
.mini-felt .c1 { background: #e0172f; left: 14px; top: 70px; }
.mini-felt .c2 { background: #1f62d1; right: 16px; top: 74px; }
.mini-felt .c3 { background: #111; right: 30px; top: 50px; }

/* ---- Daftar meja ---- */
.pl-bar { position: absolute; left: 40px; right: 40px; top: 128px; height: 58px; display: flex; align-items: center; gap: 16px; }
.pl-bar h2 { margin: 0; font: 900 26px var(--ui); color: #ffe27a; letter-spacing: 1px; }
.pl-tabs { display: flex; gap: 6px; margin-left: 10px; }
.pl-tabs button { height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font: 800 17px var(--ui); color: #ffe9a8; background: #1a1408; box-shadow: inset 0 0 0 2px #5a4a20; }
.pl-tabs button[aria-selected='true'] { color: #1b1405; background: linear-gradient(180deg, var(--yellow-1), var(--yellow-2) 55%, var(--yellow-3)); }
.pl-wallet { margin-left: auto; font: 700 18px var(--ui); color: #ffe9a8; padding: 8px 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); border: 2px solid #e0a51b; }
.pl-wallet b { color: var(--green); font-size: 24px; margin-left: 6px; }
.pl-list { position: absolute; left: 40px; right: 40px; top: 196px; bottom: 50px; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-content: start; padding: 4px; }
.pl-card {
  border: 0; border-radius: 14px; padding: 10px 10px 12px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(180deg, #13361f, #08180d); box-shadow: inset 0 0 0 2px #2f6b40, 0 6px 12px rgba(0, 0, 0, 0.5);
}
.pl-card svg { width: 140px; height: 88px; }
.pl-card b { font: 900 20px var(--ui); color: #ffe27a; }
.pl-card .pl-seats { font: 800 13px var(--ui); color: #062200; background: #8cff6a; padding: 1px 10px; border-radius: 99px; }
.pl-card small { font: 600 14px var(--ui); color: #d8e8d8; }
.pl-card i { margin-top: 6px; font: 900 16px/36px var(--ui); font-style: normal; padding: 0 26px; border-radius: 99px; color: #1b1405; background: linear-gradient(180deg, var(--yellow-1), var(--yellow-2) 55%, var(--yellow-3)); }
.pl-card:hover, .pl-card:focus-visible { box-shadow: inset 0 0 0 2px #ffd84d, 0 8px 16px rgba(0, 0, 0, 0.6); }

/* ---- Meja: karpet merah bermotif ---- */
html[data-screen='poker'] body {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.6)),
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 22%, transparent 23%) 0 0 / calc(44px * var(--s, 1)) calc(44px * var(--s, 1)),
    radial-gradient(circle, rgba(255, 140, 140, 0.1) 0 10%, transparent 11%) calc(22px * var(--s, 1)) calc(22px * var(--s, 1)) / calc(44px * var(--s, 1)) calc(44px * var(--s, 1)),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 calc(2px * var(--s, 1)), transparent calc(2px * var(--s, 1)) calc(22px * var(--s, 1))),
    #7a1016;
}
.poker { background: transparent; }

/* Bilah atas */
.pk-top { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 10px; z-index: 8;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35)); }
.pk-icon { width: 44px; height: 36px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pk-icon i { width: 22px; height: 3px; border-radius: 2px; background: #fff; }
.pk-title { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.pk-title b { font: 800 19px var(--ui); color: #f2f2f2; }
.pk-title small { font: 600 12px var(--ui); color: #f4c9c9; }
.pk-top .pk-ticker:empty { display: flex; }
.pk-top .pk-ticker { position: relative; flex: 1; left: auto; right: auto; bottom: auto; height: 28px; font-size: 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); }
.pk-best { display: flex; align-items: center; gap: 8px; }
.pk-best span { font: 900 12px/1.05 Georgia, 'Times New Roman', serif; color: #ffd84d; letter-spacing: 1px; width: 92px; text-align: right; text-shadow: 0 1px 2px #000; }
.pk-best b { min-width: 150px; padding: 3px 12px; border-radius: 6px; background: linear-gradient(180deg, #222, #050505); box-shadow: inset 0 0 0 2px #8a6a1a, 0 0 10px rgba(255, 216, 77, 0.25);
  font: 400 20px/1.2 'Press Start 2P', monospace; color: #fff; text-align: right; letter-spacing: 2px; }
.pk-me { display: flex; align-items: center; gap: 8px; }
.pk-me b { font: 800 17px var(--ui); color: #fff; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-me span { min-width: 110px; padding: 3px 10px; border-radius: 4px; background: #fff; color: #111; font: 900 18px var(--ui); text-align: right; }

/* Meja stadion berbingkai kayu */
.pk-table { position: absolute; left: 0; right: 0; top: 0; height: 556px; }
.felt {
  position: absolute; left: 290px; top: 150px; width: 700px; height: 280px; border-radius: 140px;
  background: radial-gradient(ellipse at 50% 45%, #3f9a3a, #2a7a2a 55%, #1d5a1e);
  box-shadow: 0 0 0 4px #2a1406, 0 0 0 16px #8a5424, 0 0 0 18px #c8873e, 0 0 0 22px #4a2a0e, 0 18px 34px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.45);
}
.felt::before { content: ''; position: absolute; inset: -16px; border-radius: 156px; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255, 220, 160, 0.08) 0 3px, transparent 3px 11px); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); }
.felt::after { content: ''; position: absolute; inset: 22px; border-radius: 118px; border: 2px solid rgba(255, 255, 255, 0.13); }
.felt-logo { position: absolute; left: 0; right: 0; top: 196px; text-align: center; font: 400 30px 'Lobster', cursive; color: rgba(0, 0, 0, 0.22); }

/* Kursi kulit */
.chair { position: absolute; width: 108px; height: 118px; z-index: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); }
.chair svg { width: 100%; height: 100%; display: block; }
.ps-sit {
  position: absolute; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 0; z-index: 3;
  background: radial-gradient(circle at 40% 30%, #9a9a9a, #4a4a4a 55%, #2a2a2a); box-shadow: 0 0 0 3px #1a1a1a, 0 0 0 5px #6a6a6a, 0 6px 12px rgba(0, 0, 0, 0.6);
  font: 800 15px var(--ui); color: #f2f2f2; text-shadow: 0 1px 2px #000;
}
.ps-sit:hover, .ps-sit:focus-visible { background: radial-gradient(circle at 40% 30%, #c8c8c8, #6a6a6a 55%, #3a3a3a); }

/* Dealer */
.pk-dealer { position: absolute; left: 640px; top: 4px; transform: translateX(-50%); width: 132px; height: 176px; z-index: 9; }
.dl-art img { width: 132px; height: 176px; display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.dl-bubble { position: absolute; left: 100%; top: 18px; margin-left: -10px; width: 210px; padding: 8px 12px; border-radius: 12px 12px 12px 2px; background: #fff; color: #222; font: 700 14px var(--ui); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); z-index: 6; }

/* Kartu meja & pot */
.pk-board { position: absolute; left: 640px; top: 262px; transform: translate(-50%, -50%); display: flex; gap: 6px; z-index: 2; }
.pk-board .pc { width: 60px; height: 84px; border-radius: 6px; }
.pk-pot { position: absolute; left: 640px; top: 330px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.pk-pot:empty { display: none; }
.pk-pot span, .ps-bet span { padding: 1px 12px; border-radius: 99px; background: #111; color: #fff; font: 800 15px var(--ui); box-shadow: 0 0 0 1.5px #555; }
.pk-msg { position: absolute; left: 440px; right: 440px; top: 206px; text-align: center; font: 800 13px var(--ui); color: rgba(255, 255, 255, 0.75); letter-spacing: 2px; z-index: 2; }

/* Tumpukan chip */
.chips { display: block; width: 30px; height: 26px; position: relative; }
.chips::before, .chips::after { content: ''; position: absolute; left: 0; width: 30px; height: 10px; border-radius: 50%; background: #3b62c4; box-shadow: 0 0 0 2px #fff inset, 0 3px 0 #22408a, 0 6px 0 #3b62c4, 0 9px 0 #22408a; }
.chips::before { top: 0; }
.chips::after { top: 8px; background: #c43b3b; box-shadow: 0 0 0 2px #fff inset, 0 3px 0 #8a2222; }
.chips.big { width: 36px; transform: scale(1.2); }

/* Kursi pemain */
.ps { position: absolute; transform: translate(-50%, -50%); width: 140px; display: flex; flex-direction: column; align-items: center; z-index: 3; }
.ps-name { margin-bottom: 3px; font: 800 16px var(--ui); color: #fff; text-shadow: 0 2px 3px #000, 0 0 6px #000; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-av { position: relative; width: 62px; height: 62px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222, 0 6px 10px rgba(0, 0, 0, 0.6); background: #ddd; }
.ps-av svg:first-child { width: 100%; height: 100%; display: block; }
.ps-av .ring { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; transform: rotate(-90deg); display: none; pointer-events: none; }
.ps-av .ring circle { fill: none; stroke: #3ddc5a; stroke-width: 9; stroke-dasharray: 283; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(61, 220, 90, 0.8)); }
.ps.turn .ps-av .ring { display: block; }
.ps-bar { margin-top: 6px; display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.88); box-shadow: 0 0 0 1px #555; }
.ps-bar i { font: 800 14px/24px var(--ui); font-style: normal; padding: 0 8px; background: #3a3a3a; color: #fff; }
.ps-bar span { font: 800 16px/24px var(--ui); padding: 0 12px; color: #fff; min-width: 80px; text-align: center; }
.ps-act { margin-top: 3px; padding: 1px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.75); font: 800 13px var(--ui); font-style: normal; color: #fff; }
.ps-act.hot { color: #ffd84d; }
.ps-act.off { color: #aaa; }
.ps.me .ps-name { visibility: hidden; }
.ps.folded .ps-av { opacity: 0.45; }
.ps.sitout .ps-av { opacity: 0.6; }
.ps.winner .ps-av { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ffd84d, 0 0 22px 6px rgba(255, 216, 77, 0.8); }
.ps-win { position: absolute; top: -34px; padding: 3px 12px; border-radius: 99px; font: 900 16px var(--ui); color: #062200; background: linear-gradient(180deg, #8cff6a, #35b51b); white-space: nowrap; text-align: center; animation: pop 0.4s ease-out; z-index: 4; }
.ps-win small { display: block; font: 800 11px var(--ui); }
.ps.me .ps-win { top: 8px; left: 100%; margin-left: 4px; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.ps-dealer { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; font: 900 13px/24px var(--ui); font-style: normal; text-align: center; color: #111; background: #fff; box-shadow: 0 0 0 2px #111, 0 2px 4px rgba(0, 0, 0, 0.6); z-index: 4; }
.ps-cards { position: absolute; transform: translate(-50%, -50%); display: flex; z-index: 2; }
.ps-cards.back .pc { width: 26px; height: 36px; border-radius: 3px; }
.ps-cards.back .pc + .pc { margin-left: -14px; transform: rotate(14deg); }
.ps-cards.back .pc:first-child { transform: rotate(-6deg); }
.ps-cards.open .pc { width: 40px; height: 56px; }
.ps-cards.open .pc + .pc { margin-left: -8px; }
.ps-cards.big { gap: 4px; }
.ps-cards.big .pc { width: 56px; height: 78px; border-radius: 6px; }
.ps-cards .pc.hl { transform: translateY(-6px); }
.ps-bet { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 2; }
.ps-bubble {
  position: absolute; bottom: 100%; margin-bottom: 4px; max-width: 200px; padding: 6px 12px; border-radius: 14px; background: #fff; color: #222;
  font: 700 15px var(--ui); text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); z-index: 7; overflow-wrap: anywhere; animation: pop 0.25s ease-out;
}

/* Panel bawah */
.pk-panel { position: absolute; left: 0; right: 0; top: 556px; bottom: 0; display: flex; gap: 8px; padding: 6px 8px 8px; z-index: 6;
  background: linear-gradient(180deg, #2a0a0c, #140405); box-shadow: 0 -2px 0 #4a1418, 0 -8px 16px rgba(0, 0, 0, 0.5); }
.pk-log { width: 330px; display: flex; flex-direction: column; }
.pk-log-h { display: flex; align-items: center; gap: 4px; height: 26px; }
.pk-log-h [data-lt] { position: relative; height: 24px; padding: 0 10px; border: 0; border-radius: 6px 6px 0 0; background: #3a1418; color: #c9a0a0; font: 800 13px var(--ui); letter-spacing: 1px; }
.pk-log-h [data-lt][aria-selected='true'] { background: #f4f4f4; color: #111; }
.pk-log-h [data-badge]:not([data-badge=''])::after { top: -8px; right: -10px; min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; padding: 0 5px; }
.pk-tip { margin-left: auto; height: 24px; padding: 0 12px; border: 0; border-radius: 99px; font: 900 12px var(--ui); color: #1b1405; background: linear-gradient(180deg, #ffe680, #e0a800); box-shadow: 0 2px 0 #7a5a00; }
.pk-log-b { flex: 1; overflow-y: auto; padding: 4px 10px; border-radius: 0 6px 6px 6px; background: #f4f4f4; color: #222; font: 600 13.5px/1.35 var(--ui); user-select: text; }
.pk-log-b p { margin: 0; overflow-wrap: anywhere; }
.pk-log-b p.sep { color: #999; font-size: 12px; }
.pk-log-b p.win { color: #0a7a1a; font-weight: 800; }
.pk-log-b time { color: #999; font-size: 11px; }
.pk-log-b b { color: #1f4fd1; }
.pk-log-b p.dl b { color: #b8101e; }
.pk-actions { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #0a0a0a; box-shadow: inset 0 0 0 2px #2a2a2a; }
.pa-btns { display: flex; gap: 8px; }
.pab { flex: 1; height: 56px; border: 0; border-radius: 10px; color: #fff; font: 900 19px/1.05 var(--ui); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 var(--d), 0 6px 8px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, var(--l), var(--c)); }
.pab small { font: 800 13px var(--ui); }
.pab.fold { --l: #ff7a7a; --c: #c41818; --d: #6b0808; }
.pab.call { --l: #6ab4ff; --c: #1662c4; --d: #0a3270; }
.pab.raise { --l: #8cff6a; --c: #2f9e1a; --d: #145a08; }
.pab:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--d); }
.pab:disabled { opacity: 0.5; }
.pa-raise { display: flex; align-items: center; gap: 8px; height: 40px; }
.pa-raise.empty { visibility: hidden; }
.pa-quick { display: flex; gap: 5px; }
.pa-quick button { height: 32px; padding: 0 10px; border: 0; border-radius: 6px; font: 800 13px var(--ui); color: #1b1405; background: linear-gradient(180deg, var(--yellow-1), var(--yellow-2)); }
.pa-raise input[type='range'] { flex: 1; height: 30px; padding: 0; border: 0; background: none; accent-color: #4ade80; }
.pa-wait { margin: auto; padding: 0 10px; text-align: center; font: 700 16px/1.5 var(--ui); color: #ddd; }
.pa-wait .ybtn { margin-left: 8px; vertical-align: middle; }
.pk-side { width: 132px; display: flex; flex-direction: column; gap: 6px; }
.pk-sbtn { flex: 1; border: 0; border-radius: 6px; font: 900 15px var(--ui); letter-spacing: 1px; color: #e8e8e8; background: linear-gradient(180deg, #3a3a3a, #161616); box-shadow: inset 0 1px 0 #555, 0 2px 4px rgba(0, 0, 0, 0.6); }
.pk-sbtn:active:not(:disabled) { filter: brightness(1.3); }
.pk-sbtn:disabled { opacity: 0.4; }
.pk-chat { width: 262px; display: flex; flex-direction: column; gap: 5px; }
.pc-form { display: flex; gap: 4px; }
.pc-form input { flex: 1; height: 30px; padding: 0 10px; font-size: 15px; border-radius: 4px; background: #fff; color: #111; border: 0; }
.pc-form button { width: 38px; height: 30px; border: 0; border-radius: 4px; background: #e8e8e8; font-size: 16px; }
.pc-emoji { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pc-emoji button { border: 0; border-radius: 6px; background: transparent; font-size: 24px; line-height: 1; padding: 0; }
.pc-emoji button:hover, .pc-emoji button:focus-visible { background: rgba(255, 255, 255, 0.12); }
.phrases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.phrases button { height: 40px; border: 2px solid #5a4a20; border-radius: 6px; background: #1a1408; color: #ffe9a8; font: 700 15px var(--ui); }

/* Dialog */
.buy-amt { text-align: center; margin: 10px 0 4px; }
.buy-amt b { display: block; font: 900 2.2em var(--ui); color: #6dff5a; }
.buy-amt small { color: #ccc; }
#buyRangeInput { width: 100%; height: 34px; padding: 0; border: 0; background: none; accent-color: #d9b440; }
.buy-quick { display: flex; gap: 8px; margin-top: 6px; }
.buy-quick button { flex: 1; height: 40px; border: 2px solid #5a4a20; border-radius: 6px; background: #1a1408; color: #ffe9a8; font: 800 16px var(--ui); }
.gm-actions.two { grid-template-columns: 1fr 1fr; }
.ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.rk { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 6px 8px; border-radius: 6px; background: #111; }
.rk b { color: #ffe27a; font-size: 0.95em; }
.rk small { color: #bbb; font-size: 0.8em; }
@media (max-width: 560px) { .ranks { grid-template-columns: 1fr; } }