* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d1117 radial-gradient(ellipse at center, #1b2433 0%, #07090d 100%); color: #e8e8e8; font-family: "Segoe UI", Arial, sans-serif; }
button { font: inherit; cursor: pointer; border: 1px solid #3a4456; background: #232c3b; color: #eee; border-radius: 6px; padding: 6px 12px; }
button:hover:not(:disabled) { background: #2f3a4e; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #1f7a3a; border-color: #2da153; }
button.primary:hover:not(:disabled) { background: #26904a; }
input, select { font: inherit; background: #111722; color: #eee; border: 1px solid #3a4456; border-radius: 6px; padding: 6px 8px; }
.hidden { display: none !important; }
.screen { min-height: 100%; }
/* start page */
#start { display: flex; align-items: center; justify-content: center; padding: 20px; }
.lobby { width: 440px; max-width: 100%; background: #151c28; border: 1px solid #2b3445; border-radius: 14px; padding: 28px; box-shadow: 0 10px 40px #000a; text-align: center; }
.lobby h1 { margin: 0 0 4px; font-size: 32px; color: #f2d16b; }
.lobby h1 small { display: block; font-size: 14px; color: #9aa; font-weight: normal; }
.note { color: #8a9; font-size: 13px; margin: 6px 0 18px; }
.lobby label { display: block; text-align: left; color: #aab; font-size: 14px; }
.lobby label input { width: 100%; margin-top: 4px; font-size: 18px; }
.bank { margin: 16px 0 6px; font-size: 20px; }
.bank b { color: #7ee08f; }
.refill { background: #3a1d1d; border: 1px solid #844; padding: 8px; border-radius: 8px; margin: 8px 0; }
.joininfo { background: #1c2c44; border: 1px solid #36598a; padding: 8px; border-radius: 8px; margin: 8px 0; }
.choices { display: grid; gap: 10px; margin-top: 16px; }
button.big { font-size: 18px; padding: 14px; background: #1d2a3d; }
button.big:hover:not(:disabled) { background: #26405f; }
.msg { color: #f99; min-height: 20px; margin-top: 10px; }
/* modal */
.modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal .box { background: #151c28; border: 1px solid #2b3445; border-radius: 12px; padding: 22px; width: 480px; max-width: 95%; }
.modal h2 { margin-top: 0; color: #f2d16b; }
.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.row > span { width: 170px; color: #aab; }
.row small { color: #889; width: 100%; padding-left: 180px; }
.seg { display: flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: #1f7a3a; border-color: #2da153; }
.btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.err { color: #f88; min-height: 18px; }
/* table */
#table { display: flex; flex-direction: column; height: 100vh; }
.topbar { display: flex; gap: 8px; padding: 8px 12px; align-items: center; background: #0b0f16; border-bottom: 1px solid #222a37; }
.topbar .spacer { flex: 1; }
#tblInfo { color: #aab; }
.linkbox { margin: 0 0 6px; background: #18263a; border: 1px solid #36598a; border-radius: 10px; padding: 10px 14px; width: 100%; }
.linkrow { display: flex; gap: 8px; margin: 6px 0; }
.linkrow input { flex: 1; font-size: 16px; }
.linkbox small { color: #8899aa; }
.felt-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 84px 100px 112px; min-height: 0; }
.felt { position: relative; width: min(100%, calc((100vh - 300px) * 2)); aspect-ratio: 2 / 1; border-radius: 50% / 50%;
  background: radial-gradient(ellipse at center, #2f8a4c 0%, #1e6b37 55%, #134a26 100%);
  border: 14px solid #3b2516; box-shadow: 0 0 0 4px #5a3a22, inset 0 0 50px #0008, 0 20px 60px #000c; }
.logo { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); font-size: clamp(16px, 3vw, 34px); font-weight: bold; color: #ffffff1c; letter-spacing: 3px; font-style: italic; pointer-events: none; }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.pot { color: #fff; font-weight: bold; background: #0006; border-radius: 12px; padding: 2px 12px; display: inline-block; min-height: 22px; margin-bottom: 6px; }
.pot:empty { visibility: hidden; }
.board { display: flex; gap: 6px; justify-content: center; min-height: 74px; }
.banner { margin-top: 8px; color: #ffe27a; font-weight: bold; text-shadow: 0 1px 3px #000; min-height: 22px; max-width: 460px; }
/* cards */
.card { width: 50px; height: 72px; border-radius: 6px; background: #fff; color: #111; position: relative; box-shadow: 0 2px 5px #0008; font-weight: bold; flex: none; }
.card .r { position: absolute; left: 4px; top: 2px; font-size: 18px; line-height: 1; }
.card .s1 { position: absolute; left: 5px; top: 20px; font-size: 13px; }
.card .s { position: absolute; right: 5px; bottom: 3px; font-size: 28px; line-height: 1; }
.card.red { color: #d01818; }
.card.back { background: repeating-linear-gradient(45deg, #9b1c1c 0 4px, #b52a2a 4px 8px); border: 3px solid #fff; }
.card.dim { filter: brightness(.55); }
.card.hl { box-shadow: 0 0 0 3px #ffd84a, 0 0 12px #ffd84a; transform: translateY(-4px); }
.card.small { width: 40px; height: 58px; }
.card.small .r { font-size: 15px; } .card.small .s { font-size: 22px; } .card.small .s1 { top: 17px; font-size: 11px; }
/* seats */
.seat { position: absolute; width: 140px; transform: translate(-50%, -50%); text-align: center; z-index: 3; }
.seat .cards { display: flex; justify-content: center; gap: 2px; height: 58px; margin-bottom: -8px; position: relative; z-index: 1; }
.seat .cards .card.small { height: 58px; }
.seat .plate { position: relative; z-index: 2; display: flex; align-items: center; background: linear-gradient(#2b2f38, #15181e); border: 1px solid #555c6a; border-radius: 10px; padding: 4px 8px 4px 4px; box-shadow: 0 3px 8px #000a; }
.seat .avatar { width: 38px; height: 38px; border-radius: 50%; background: #3d5a80; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; flex: none; border: 2px solid #8aa; }
.seat.bot .avatar { background: #6d4c8a; }
.seat .info { flex: 1; overflow: hidden; padding-left: 6px; text-align: left; }
.seat .name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .stack { font-size: 14px; color: #7ee08f; font-weight: bold; }
.seat.turn .plate { border-color: #ffd84a; box-shadow: 0 0 12px #ffd84a99; }
.seat.folded { opacity: .55; }
.seat.out .plate { opacity: .6; }
.seat.winner .plate { border-color: #7ee08f; box-shadow: 0 0 16px #7ee08f; }
.seat .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: bold; background: #111c; border: 1px solid #fff4; padding: 1px 8px; border-radius: 10px; color: #fff; z-index: 4; box-shadow: 0 1px 4px #000a; }
.seat .tag.k-fold { color: #bbb; opacity: .7; }
.seat .tag.k-check { background: #2c4a6e; }
.seat .tag.k-call { background: #2a5a8a; }
.seat .tag.k-raise { background: #a8781c; }
.seat .tag.k-allin { background: #b02a2a; }
.seat .tag.k-post { background: #444c; color: #ddd; font-weight: normal; }
.seat .tag.k-think { background: #5a3f86; }
.seat .tag.k-status { background: #000b; color: #ffd; font-weight: normal; }
.seat .dots i { font-style: normal; animation: blink 1.2s infinite; }
.seat .dots i:nth-child(2) { animation-delay: .2s; } .seat .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.seat.thinking .plate { border-color: #b48cff; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 4px #b48cff66; } 50% { box-shadow: 0 0 16px #b48cffcc; } }
.seat .hand { font-size: 12px; color: #ffe27a; margin-top: 2px; text-shadow: 0 1px 2px #000; min-height: 15px; }
.timer { height: 5px; background: #0008; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.timer i { display: block; height: 100%; background: #4cd06a; }
.empty-seat { position: absolute; transform: translate(-50%, -50%); color: #ffffff55; border: 1px dashed #ffffff33; border-radius: 10px; padding: 10px 18px; font-size: 13px; }
.bet { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; color: #fff; font-weight: bold; font-size: 13px; text-shadow: 0 1px 2px #000; z-index: 2; }
.chip { width: 18px; height: 18px; border-radius: 50%; background: #d33; border: 3px dashed #fff; box-shadow: 0 1px 2px #000; }
.dealer { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #000; font-weight: bold; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px #000; z-index: 2; }
/* bottom */
.bottom { display: flex; gap: 10px; padding: 8px 12px 12px; height: 170px; flex-shrink: 0; }
.logbox { flex: 1; display: flex; flex-direction: column; background: #0b0f16; border: 1px solid #222a37; border-radius: 8px; min-width: 0; min-height: 0; overflow: hidden; }
.log { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; font-size: 12px; padding: 6px 8px; color: #b8c0cc; }
.log .chat { color: #9ed0ff; }
.log .hdr { color: #f2d16b; }
#chatForm input { width: 100%; border-radius: 0 0 8px 8px; border: 0; border-top: 1px solid #222a37; }
.actions { width: 440px; display: flex; flex-direction: column; justify-content: flex-end; }
.pre { display: flex; gap: 16px; color: #aab; font-size: 14px; padding: 4px; }
.presets { display: flex; gap: 6px; margin-bottom: 6px; }
.presets button { flex: 1; font-size: 13px; padding: 4px; }
.sizer { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.sizer input[type=range] { flex: 1; }
.sizer input[type=number] { width: 100px; }
.mainbtns { display: flex; gap: 6px; }
.act { flex: 1; font-size: 17px; padding: 12px 6px; font-weight: bold; border-radius: 8px; }
.act.fold { background: #8a2a2a; border-color: #b33; }
.act.call { background: #2a5a8a; border-color: #37b; }
.act.raise { background: #a8781c; border-color: #db3; }
.toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: #5a1f1f; border: 1px solid #a44; padding: 8px 16px; border-radius: 8px; z-index: 99; }

.seat.me .cards .card.small { width: 50px; height: 72px; } .seat.me .cards { height: 72px; }
.seat.me .cards .card.small .r { font-size: 18px; } .seat.me .cards .card.small .s { font-size: 28px; }

.timer.urgent { background: #4a0000; }
.timer.urgent i { background: #ff3030 !important; animation: flash .5s steps(2, start) infinite; }
@keyframes flash { to { opacity: .35; } }

/* join box */
.joinbox { margin-top: 16px; padding: 12px; background: #111a27; border: 1px solid #2b3445; border-radius: 10px; text-align: left; }
.joinbox .jt { color: #f2d16b; margin-bottom: 6px; }
.joinrow { display: flex; gap: 6px; }
.joinrow input { flex: 1; min-width: 0; }
/* dealer button inside the seat box (compact layouts) */
.dealer.in-seat { position: absolute; left: -9px; top: auto; bottom: -6px; transform: none; width: 20px; height: 20px; font-size: 11px; z-index: 5; }

/* ---------- phones / small screens ---------- */
body[data-layout=portrait] #table, body[data-layout=compact] #table { height: 100vh; height: 100dvh; }
body[data-layout=portrait] .topbar, body[data-layout=compact] .topbar { flex-wrap: wrap; gap: 4px; padding: 4px 6px; }
body[data-layout=portrait] .topbar button, body[data-layout=compact] .topbar button { padding: 3px 7px; font-size: 13px; }
body[data-layout=portrait] #tblInfo, body[data-layout=compact] #tblInfo { font-size: 11px; width: 100%; }
body[data-layout=compact] #tblInfo { width: auto; }
body[data-layout=portrait] .felt, body[data-layout=compact] .felt { aspect-ratio: auto; border-width: 8px; box-shadow: 0 0 0 2px #5a3a22, inset 0 0 30px #0008; }
body[data-layout=portrait] .felt { border-radius: 46% / 32%; }
body[data-layout=portrait] .felt-wrap { padding: 48px 44px 66px; align-items: center; }
body[data-layout=compact] .felt-wrap { padding: 44px 58px 46px; }
body[data-layout=portrait] .logo, body[data-layout=compact] .logo { font-size: 14px; top: 30%; }
body[data-layout=portrait] .logo { top: 34%; }
body[data-layout=portrait] .seat, body[data-layout=compact] .seat { width: 84px; }
body[data-layout=portrait] .seat .plate, body[data-layout=compact] .seat .plate { padding: 2px 4px 2px 2px; border-radius: 8px; }
body[data-layout=portrait] .seat .avatar, body[data-layout=compact] .seat .avatar { width: 24px; height: 24px; font-size: 12px; border-width: 1px; }
body[data-layout=portrait] .seat .info, body[data-layout=compact] .seat .info { padding-left: 4px; }
body[data-layout=portrait] .seat .name, body[data-layout=compact] .seat .name { font-size: 10px; }
body[data-layout=portrait] .seat .stack, body[data-layout=compact] .seat .stack { font-size: 11px; }
body[data-layout=portrait] .seat .cards, body[data-layout=compact] .seat .cards { height: 36px; margin-bottom: -4px; }
body[data-layout=portrait] .seat .card.small, body[data-layout=compact] .seat .card.small { width: 26px; height: 36px; border-radius: 4px; }
body[data-layout=portrait] .seat .card.small .r, body[data-layout=compact] .seat .card.small .r { font-size: 11px; left: 2px; top: 1px; }
body[data-layout=portrait] .seat .card.small .s, body[data-layout=compact] .seat .card.small .s { font-size: 14px; right: 2px; bottom: 1px; }
body[data-layout=portrait] .seat .card.small .s1, body[data-layout=compact] .seat .card.small .s1 { display: none; }
body[data-layout=portrait] .seat.me .cards, body[data-layout=compact] .seat.me .cards {
  height: 50px;
  margin-bottom: 6px;
  transform: translateY(-12px);
  z-index: 5;
}
body[data-layout=portrait] .seat.me .tag, body[data-layout=compact] .seat.me .tag {
  /* Sit on the name plate, under the hole cards — not on top of them */
  top: auto;
  bottom: 34px;
  z-index: 4;
}
body[data-layout=portrait] .seat.me .cards .card.small, body[data-layout=compact] .seat.me .cards .card.small { width: 36px; height: 50px; }
body[data-layout=portrait] .seat.me .cards .card.small .r, body[data-layout=compact] .seat.me .cards .card.small .r { font-size: 14px; }
body[data-layout=portrait] .seat.me .cards .card.small .s, body[data-layout=compact] .seat.me .cards .card.small .s { font-size: 20px; }
body[data-layout=portrait] .seat .tag, body[data-layout=compact] .seat .tag { font-size: 10px; padding: 0 5px; top: -11px; }
body[data-layout=portrait] .seat .hand, body[data-layout=compact] .seat .hand { font-size: 10px; min-height: 0; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
body[data-layout=portrait] .seat .timer, body[data-layout=compact] .seat .timer { height: 3px; margin-top: 1px; }
body[data-layout=portrait] .empty-seat, body[data-layout=compact] .empty-seat { font-size: 10px; padding: 6px 8px; }
body[data-layout=portrait] .board, body[data-layout=compact] .board { gap: 3px; min-height: 46px; }
body[data-layout=portrait] .board .card, body[data-layout=compact] .board .card { width: 32px; height: 46px; border-radius: 4px; }
body[data-layout=portrait] .board .card .r, body[data-layout=compact] .board .card .r { font-size: 13px; left: 2px; top: 1px; }
body[data-layout=portrait] .board .card .s, body[data-layout=compact] .board .card .s { font-size: 18px; right: 3px; bottom: 2px; }
body[data-layout=portrait] .board .card .s1, body[data-layout=compact] .board .card .s1 { display: none; }
body[data-layout=portrait] .pot, body[data-layout=compact] .pot { font-size: 12px; padding: 1px 8px; margin-bottom: 3px; }
body[data-layout=portrait] .banner, body[data-layout=compact] .banner { font-size: 11px; margin-top: 3px; max-width: 220px; min-height: 0; }
body[data-layout=portrait] .bet, body[data-layout=compact] .bet { font-size: 10px; gap: 2px; white-space: nowrap; }
body[data-layout=portrait] .chip, body[data-layout=compact] .chip { width: 12px; height: 12px; border-width: 2px; }
body[data-layout=portrait] .bottom { flex-direction: column-reverse; height: auto; padding: 4px 6px 6px; gap: 4px; flex-shrink: 0; }
body[data-layout=portrait] .actions {
  width: 100%;
  /* Keep Fold/Call/Raise slot always reserved so the felt does not jump when it is your turn. */
  min-height: 122px;
}
body[data-layout=portrait] .felt-wrap { min-height: 0; }
body[data-layout=portrait] .logbox { height: 72px; max-height: 72px; flex: none; overflow: hidden; }
body[data-layout=portrait] .log { font-size: 10px; padding: 2px 6px; min-height: 0; overflow-y: auto; }
body[data-layout=portrait] #chatForm { display: none; }
body[data-layout=portrait] .act, body[data-layout=compact] .act { font-size: 14px; padding: 9px 4px; }
body[data-layout=portrait] .linkbox, body[data-layout=compact] .linkbox { font-size: 12px; padding: 6px 8px; }
body[data-layout=portrait] .linkbox small, body[data-layout=compact] .linkbox small { display: none; }
body[data-layout=compact] #table { display: grid; grid-template-columns: 1fr 250px; grid-template-rows: auto 1fr; }
body[data-layout=compact] .topbar { grid-column: 1 / 3; }
body[data-layout=compact] .felt-wrap { grid-column: 1; grid-row: 2; min-width: 0; }
body[data-layout=compact] .bottom { grid-column: 2; grid-row: 2; flex-direction: column-reverse; height: auto; padding: 4px; gap: 4px; min-height: 0; }
body[data-layout=compact] .actions {
  width: 100%;
  min-height: 122px;
}
body[data-layout=compact] .logbox { flex: 1; min-height: 0; max-height: none; overflow: hidden; }
body[data-layout=compact] .log { font-size: 10px; min-height: 0; overflow-y: auto; }
body[data-layout=compact] .presets button, body[data-layout=portrait] .presets button { font-size: 11px; padding: 3px; }
@media (max-width: 480px) { .lobby { padding: 18px; } .lobby h1 { font-size: 26px; } button.big { font-size: 16px; padding: 11px; } .row > span { width: 100%; } .row small { padding-left: 0; } }