/* fixes.css — control layout overrides (loaded LAST so it wins). * Table visuals belong to codex (style.css/ui.js); this only fixes control layering/position. */ /* Kill the accidental double-tap-to-zoom on phones (iOS ignores user-scalable=no, so this is what actually stops it). `manipulation` still allows normal scrolling in lists. */ html, body { touch-action: manipulation; } /* the game table never scrolls — lock it down harder so no stray gesture zooms/pans it */ #screen-table { touch-action: none; } /* table needs a positioning context for the floating chat */ #screen-table #table { position: relative; } /* ---- player ranking (real people) on the stats screen ---- */ .rank-card .rank-sub { font-size: .62em; opacity: .6; font-weight: 600; } .rank-list { list-style: none; margin: 8px auto 0; padding: 0; max-width: 560px; } .rank-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 14px; cursor: pointer; transition: background .12s; } .rank-row:hover { background: rgba(255,255,255,.07); } .rank-row + .rank-row { margin-top: 6px; } .rank-pos { flex: none; width: 26px; text-align: center; font-weight: 800; font-size: 19px; color: #c9a227; } .rank-row:nth-child(1) .rank-pos { color: #ffd23f; } .rank-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; } .rank-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-rec { font-size: 12px; opacity: .6; } .rank-money { flex: none; font-weight: 800; font-size: 18px; color: #4ad07a; white-space: nowrap; } .rank-row.is-me { background: rgba(255,210,63,.12); outline: 1px solid rgba(255,210,63,.35); } .rank-me-tag { font-size: 11px; opacity: .7; font-weight: 600; } .rank-empty { list-style: none; padding: 12px; text-align: center; opacity: .55; font-size: 13px; } /* ---- lobby footer: Main Menu + Sign Out side by side ---- */ .lob-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .lob-foot .logout { margin: 0; } /* ---- game-speed stepper in the table menu ---- */ .tm-speed { padding: 10px 12px; margin: 4px 0; border-radius: 12px; background: rgba(255,255,255,.06); } .tm-speed-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; } .tm-speed-top b { font-size: 18px; color: #ffd23f; min-width: 28px; text-align: right; } .tm-speed-ctl { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .tm-speed-ctl input[type=range] { flex: 1 1 auto; accent-color: #ffd23f; height: 22px; } .tm-spd-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; font-weight: 800; line-height: 1; } .tm-spd-btn:hover { background: rgba(255,255,255,.26); } .tm-spd-btn:active { transform: scale(.94); } .tm-speed-lbl { display: flex; justify-content: space-between; font-size: 11px; opacity: .55; margin-top: 6px; } /* bigger rank + suit on cards (desktop/tablet; phone keeps its own tuned sizes) */ @media (min-width: 700px) { #board .card { width: 80px; height: 112px; } #board .card span { font-size: 46px; font-weight: 800; line-height: 1; } #board .card small { font-size: 38px; } #felt .seat.me .cards .card span { font-size: 40px; font-weight: 800; } #felt .seat.me .cards .card small { font-size: 33px; } #felt .seat:not(.me) .cards .card span { font-size: 28px; font-weight: 800; } #felt .seat:not(.me) .cards .card small { font-size: 23px; } } /* lift hole cards up so the enlarged suit symbol isn't tucked/clipped behind the seat */ #felt .seat.me .cards { transform: translate(-50%, -6%) !important; } #felt .seat:not(.me) .cards { transform: translate(-50%, 8%) !important; } /* ---- blue "tournament clock" board on level-up ---- */ #tclock { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); cursor: pointer; padding: 16px; } #tclock .tc-board { position: relative; width: min(888px, 97vw); max-height: 94vh; overflow-y: auto; color: #fff; background: linear-gradient(160deg, #1f7ce0, #0a3a86); border: 3px solid rgba(255,255,255,.28); border-radius: 18px; padding: 22px 24px; box-shadow: 0 20px 70px rgba(0,0,0,.6); text-shadow: 0 1px 2px rgba(0,0,0,.45); font-family: "Arial Black", Impact, system-ui, sans-serif; } .tc-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.32); color: #fff; font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; text-shadow: none; transition: background .15s, transform .1s; } .tc-x:hover { background: rgba(0,0,0,.55); transform: scale(1.08); } .tc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 9px; margin-bottom: 14px; } .tc-head .tc-title { font-size: 16px; letter-spacing: 2px; opacity: .85; } .tc-head .tc-name { font-size: 22px; font-weight: 900; color: #ffe680; text-align: right; } .tc-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; } .tc-lab { font-size: 14px; letter-spacing: 1px; opacity: .8; margin-bottom: 7px; } .tc-payrow { display: flex; justify-content: space-between; font-size: 18px; padding: 3px 0; } .tc-payrow b { color: #ffe680; } .tc-center { text-align: center; } .tc-level { font-size: 25px; font-weight: 900; letter-spacing: 1px; } .tc-up { color: #ffd23f; font-weight: 900; font-size: 19px; margin: 5px 0 12px; animation: tcPulse 1s infinite; } .tc-blinds div { display: flex; justify-content: space-between; font-size: 19px; padding: 4px 0; } .tc-blinds b { color: #ffe680; font-size: 24px; } .tc-right .tc-row { display: flex; justify-content: space-between; font-size: 17px; padding: 4px 0; } .tc-right .tc-row b { color: #ffe680; } .tc-right .tc-row.next b { color: #7CFC7C; } .tc-you { margin-top: 16px; text-align: center; background: rgba(0,0,0,.3); border-radius: 12px; padding: 14px; } .tc-you .tc-rank-big { font-size: 30px; font-weight: 900; letter-spacing: .5px; } .tc-you .tc-rank-big b { color: #ffd23f; font-size: 40px; } .tc-you .tc-rank-big span { opacity: .6; font-size: 22px; } .tc-you .tc-you-sub { font-size: 15px; opacity: .8; margin-top: 4px; } .tc-tap { text-align: center; font-size: 11px; opacity: .6; margin-top: 8px; letter-spacing: 1px; } @keyframes tcPulse { 50% { opacity: .45; } } @media (max-width: 640px) { #tclock .tc-board { padding: 14px; } .tc-grid { grid-template-columns: 1fr; gap: 10px; } .tc-center { order: -1; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 10px; } } /* ---- hide the in-game chat/log window (bottom-left) ---- */ #screen-table .chat { display: none !important; } /* ---- "MY RANK" stands out in the top bar (your current place) ---- */ .fi-block.fi-rank #tw-myrank { color: #ffd23f; } .fi-block.fi-prize #tw-prize { color: #8a9099; } .fi-block.fi-prize #tw-prize.in-money { color: #35d07f; } /* cash game: hide the tournament-only field stats (entries/left/rank/tables/bounty) */ #table.cash .fieldinfo { display: none; } /* rebuy prompt after busting a cash game */ .cash-rebuy { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); padding: 18px; } .cash-rebuy .cr-box { width: min(420px, 94vw); background: linear-gradient(160deg, #22262e, #14171d); border: 2px solid rgba(255,210,74,.4); border-radius: 16px; padding: 24px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .cash-rebuy .cr-title { font-size: 22px; font-weight: 900; color: #ff6a5f; margin-bottom: 6px; } .cash-rebuy .cr-sub { font-size: 15px; color: #cfd3da; margin-bottom: 18px; } .cash-rebuy .cr-sub b { color: #ffd23f; } .cash-rebuy .cr-row { display: flex; flex-direction: column; gap: 10px; } .cash-rebuy .cr-yes, .cash-rebuy .cr-no { padding: 13px; border-radius: 11px; font-size: 15px; font-weight: 800; cursor: pointer; border: none; } .cash-rebuy .cr-yes { background: linear-gradient(135deg, #ffe27a, #f5b820); color: #4a2c00; } .cash-rebuy .cr-no { background: rgba(255,255,255,.1); color: #e7e9ee; border: 1px solid rgba(255,255,255,.2); } .cash-rebuy .cr-yes:hover { filter: brightness(1.06); } /* ---- big hands hit, on the career screen ---- */ .bighands { display: flex; flex-direction: column; gap: 5px; } .bh-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 15px; opacity: .5; } .bh-row.hit { opacity: 1; background: rgba(255,210,63,.12); } .bh-row b { color: #ffd23f; font-weight: 800; font-size: 17px; } /* ---- bigger, easier-to-tap close/back button on the tournament list ---- */ #tourney-back.app-back { font-size: 26px; min-width: 54px; height: 44px; padding: 0 14px; } .app-head { align-items: center; } .app-head .app-title { flex: 1 1 auto; min-width: 0; } .app-x { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 17px; font-weight: 800; line-height: 1; } .app-x:hover { background: rgba(255,90,90,.55); } .app-x:active { transform: scale(.92); } /* ---- tournament map header: only the subtitle, made bigger ---- */ .app-title .app-sub-only { display: block; font-size: 18px; font-weight: 800; opacity: 1; color: #fff; letter-spacing: .2px; } /* ---- readable text on the gold "TOURNAMENTS" card (dark text on gold bg) ---- */ .menu-card.primary .mc-tx b { color: #17120a !important; } .menu-card.primary .mc-tx i { color: rgba(23,18,10,.8) !important; } .menu-card.primary .mc-arrow { color: rgba(23,18,10,.65) !important; } /* ---- player ranking card at the bottom of the lobby ---- */ .lob-rank-card { margin: 16px auto 4px; max-width: 640px; width: 100%; box-sizing: border-box; background: rgba(0,0,0,.5); border: 1px solid rgba(255,210,63,.22); border-radius: 16px; padding: 14px 12px; } .lob-rank-card h3 { margin: 0 0 6px; font-size: 15px; color: #ffd23f; text-align: left; padding-left: 6px; } .lob-rank-card .rank-sub { font-size: .7em; opacity: .6; font-weight: 600; } .lob-rank-card .rank-list { max-width: none; } /* ---- full-screen tournament report ---- */ .result-modal.show { display: flex; } .result-modal .report-card { width: min(560px, 94vw); max-height: 94vh; overflow-y: auto; background: linear-gradient(180deg, #1c1f2b, #12141d); border: 1px solid rgba(255,210,63,.35); border-radius: 22px; padding: 26px 24px; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.6); } .report-hero { margin-bottom: 14px; } .report-hero .rh-medal { font-size: clamp(54px, 15vw, 84px); line-height: 1; } .report-hero .rh-place { font-size: clamp(40px, 12vw, 64px); font-weight: 900; color: #fff; line-height: 1.05; } .report-hero .rh-place.champ { color: #ffd23f; text-shadow: 0 0 26px rgba(255,210,63,.7); } .report-hero .rh-of { font-size: 14px; opacity: .6; margin-top: 2px; } .report-hero .rh-tour { font-size: 15px; font-weight: 700; opacity: .85; margin-top: 8px; } .report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; } .rs-chip { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .rs-chip .rs-ic { font-size: 20px; } .rs-chip .rs-val { font-size: 22px; font-weight: 900; color: #ffd23f; } .rs-chip .rs-lab { font-size: 11px; opacity: .65; } .res-lines { list-style: none; margin: 14px 0; padding: 0; text-align: left; } .res-lines li { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; } .res-none { opacity: .6; margin: 14px 0; } .report-totals { margin: 16px 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; } .report-totals .rt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 4px; font-size: 15px; } .report-totals .rt-row.big { font-size: 20px; font-weight: 800; } .report-totals .rt-row.net { font-size: 22px; font-weight: 900; border-top: 1px dashed rgba(255,255,255,.18); margin-top: 4px; padding-top: 10px; } .report-totals b.pos { color: #4ad07a; } .report-totals b.neg { color: #ff6b6b; } .report-bal { display: flex; justify-content: space-between; background: rgba(255,210,63,.1); border-radius: 12px; padding: 12px 14px; font-size: 16px; font-weight: 700; } .report-bal b { color: #ffd23f; } .report-btn { margin-top: 18px; width: 100%; padding: 15px; border: none; border-radius: 14px; cursor: pointer; background: #ffd23f; color: #1a1a1a; font-size: 17px; font-weight: 800; } .report-btn:hover { background: #ffdf6b; } /* ---- bounty KO / drawing impact effect ---- */ #fx-layer .fx-flash { position: fixed; inset: 0; z-index: 58; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(255,235,150,.95), rgba(255,255,255,.35) 55%, transparent 75%); } #fx-layer .fx-bounty { position: fixed; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 60; pointer-events: none; text-align: center; will-change: transform, opacity; } .fx-bounty .fb-icon { font-size: clamp(56px, 13vw, 92px); line-height: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); } .fx-bounty .fb-title { font-size: clamp(34px, 9vw, 56px); font-weight: 900; color: #ffd23f; letter-spacing: 1px; text-shadow: 0 3px 0 #b8860b, 0 0 26px rgba(255,210,63,.9); } .fx-bounty .fb-amt { font-size: clamp(30px, 8vw, 48px); font-weight: 900; color: #4ad07a; text-shadow: 0 2px 0 #145a32, 0 0 18px rgba(74,208,122,.7); } .fx-bounty .fb-who { font-size: clamp(15px, 4vw, 21px); font-weight: 700; color: #fff; opacity: .92; margin-top: 4px; } .fx-bounty.jackpot .fb-title { color: #ff5a5a; text-shadow: 0 3px 0 #7a1010, 0 0 32px rgba(255,90,90,.95); } #fx-layer .fx-coin { position: fixed; left: 50%; top: 47%; z-index: 59; pointer-events: none; font-size: clamp(22px, 5vw, 32px); } /* ---- keyboard-shortcut hint badges on the action buttons ---- */ .act kbd { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.28); font-size: .6em; font-weight: 800; vertical-align: middle; opacity: .85; font-family: inherit; } /* ---- clearer blinds + level display in the top bar ---- */ #blinds-line { font-size: 15px; font-weight: 700; } #blinds-line b { color: #ffd23f; font-size: 1.15em; } #level-line { font-size: 12px; opacity: .8; } #blinds-line.blinds-bump { animation: blindsBump .7s ease; } @keyframes blindsBump { 0% { transform: scale(1); } 30% { transform: scale(1.25); color: #ffd23f; text-shadow: 0 0 12px rgba(255,210,63,.8); } 100% { transform: scale(1); } } /* ---- language switch on the landing screen ---- */ .lang-switch { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .lang-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; opacity: .7; } .lang-btn:hover { opacity: 1; } .lang-btn.on { background: #ffd23f; color: #1a1a1a; border-color: #ffd23f; opacity: 1; } /* flag language buttons */ .lang-btn.flagbtn { padding: 5px 7px; line-height: 0; border-radius: 8px; opacity: .5; } .lang-btn.flagbtn:hover { opacity: .85; } .lang-btn.flagbtn.on { opacity: 1; background: #ffd23f; border-color: #ffd23f; box-shadow: 0 0 10px rgba(255,210,63,.6); } .lang-btn .flag { width: 28px; height: 18px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; } /* ---- auth form (signup / login) ---- */ #auth-modal .signup-input { display: block; width: 100%; margin: 8px 0; box-sizing: border-box; } .auth-hint { font-size: 12px; opacity: .7; margin: 2px 2px 8px; } #g-signin, #g-signin-modal { display: flex; justify-content: center; margin: 8px 0; min-height: 4px; } #auth-switch { margin-top: 6px; } /* ---- nickname edit on the stats screen ---- */ .edit-name-btn { font-size: 14px; line-height: 1; padding: 4px 8px; margin-left: 6px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: inherit; cursor: pointer; vertical-align: middle; } .edit-name-btn:hover { background: rgba(255,255,255,.22); } .edit-name-btn.ok { background: #2e9d5b; color: #fff; } .edit-name-btn.cancel { background: rgba(255,80,80,.35); } .edit-name-input { font-size: 20px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); color: inherit; width: min(60vw, 220px); vertical-align: middle; } /* bottom bar + action buttons ALWAYS above the felt (no more tucked under the board) */ #screen-table .bottombar { position: relative; z-index: 200; } #screen-table .actionbar { position: relative; z-index: 201; } #screen-table .acts, #screen-table .act, #screen-table .sizer, #screen-table .quick { position: relative; z-index: 202; } /* ===== BET SIZER (Claude) — horizontal bar that lives in the bottom control bar ===== */ /* sits in-flow inside #actionbar, to the RIGHT of the FOLD/CALL/RAISE buttons */ #screen-table .betsizer { position: static; flex: 1 1 auto; min-width: 0; z-index: 320; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 7px 14px; border-radius: 16px; margin: 0; background: linear-gradient(180deg, rgba(26,22,15,.97), rgba(11,9,6,.98)); border: 1px solid rgba(230,195,104,.28); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .bs-bubble { position: relative; flex: none; padding: 8px 18px; border-radius: 999px; background: #0e0c08; border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(230,195,104,.5); font-weight: 800; font-size: 19px; color: var(--gold); white-space: nowrap; } .bs-bubble span { color: var(--muted); font-size: 12px; font-weight: 600; } .bs-bubble::after { display: none; } /* no speech pointer in the horizontal bar */ .bs-body { display: flex; flex: 1 1 auto; min-width: 0; gap: 16px; align-items: center; } /* horizontal slider: left = min, right = max */ .bs-slidewrap { position: relative; flex: 1 1 auto; min-width: 120px; height: 44px; display: flex; align-items: center; } .bs-range { width: 100%; height: 44px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .bs-range::-webkit-slider-runnable-track { height: 12px; border-radius: 8px; background: linear-gradient(to right, #f4d24a, #ef9a3c 48%, #e0554f); } .bs-range::-moz-range-track { height: 12px; border-radius: 8px; background: linear-gradient(to right, #f4d24a, #ef9a3c 48%, #e0554f); } .bs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 40px; margin-top: -14px; border-radius: 9px; background: repeating-linear-gradient(#3a3a3a 0 3px, #2a2a2a 3px 6px); border: 2px solid #ffd24a; box-shadow: 0 2px 7px rgba(0,0,0,.55); } .bs-range::-moz-range-thumb { width: 26px; height: 40px; border-radius: 9px; background: #2f2f2f; border: 2px solid #ffd24a; } .bs-buttons { display: flex; flex-direction: row; gap: 10px; align-items: center; flex: none; } .bs-q { width: 58px; height: 52px; border-radius: 12px; cursor: pointer; border: 1px solid #3c382f; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .3px; background: radial-gradient(circle at 50% 32%, #2c271f, #16120b); box-shadow: 0 3px 10px rgba(0,0,0,.4); } .bs-q:active { transform: translateY(1px); } .bs-q[data-q="max"] { border-color: rgba(230,195,104,.55); color: var(--gold); } .bs-pm { display: flex; flex-direction: row; gap: 9px; margin: 0; flex: none; } .bs-step { width: 52px; height: 52px; border-radius: 12px; cursor: pointer; border: 1px solid #3c382f; background: #16120b; color: var(--gold); font-size: 26px; font-weight: 800; line-height: 1; } .bs-step:active { transform: translateY(1px); } /* pre-action chips — shown in the bottom bar while it's NOT your turn */ #screen-table .preaction { display: flex; align-items: center; gap: 10px; margin-left: auto; } #screen-table .preaction[hidden] { display: none; } .pre-label { font-size: 12px; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; } .pre-btn { height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 14px; letter-spacing: .3px; color: #d9dde3; background: #1b1f26; border: 2px solid #333a44; } .pre-btn.pre-fold { color: #ffb3ad; border-color: #5a2f2c; background: #241614; } .pre-btn.pre-call { color: #9fe6b8; border-color: #2c5a3c; background: #142418; } .pre-btn.pre-call.armed { background: linear-gradient(180deg,#2e8a52,#1c6b3c); color: #fff; border-color: #9fe6b8; box-shadow: 0 0 16px rgba(88,214,141,.55); } .pre-btn:active { transform: translateY(1px); } .pre-btn.armed { color: #fff; border-color: #f0d477; box-shadow: 0 0 0 2px rgba(230,195,104,.35), 0 0 16px rgba(230,195,104,.45); } .pre-btn.pre-fold.armed { background: linear-gradient(180deg,#a5352e,#7d211c); color: #fff; border-color: #ffb3ad; box-shadow: 0 0 16px rgba(224,85,79,.6); } /* one bottom row: FOLD/CALL/RAISE on the left, bet sizer filling the rest */ #screen-table .actionbar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; } #screen-table .acts { flex: none; } #screen-table .act { min-width: 108px; height: 58px; padding: 0 16px; font-size: 16px; } @media (max-width: 1000px) { #screen-table .act { min-width: 84px; height: 54px; font-size: 14px; padding: 0 10px; } #screen-table .betsizer { gap: 10px; padding: 6px 10px; } .bs-body { gap: 10px; } .bs-q { width: 48px; height: 46px; font-size: 11px; } .bs-step { width: 44px; height: 46px; font-size: 22px; } .bs-bubble { font-size: 15px; padding: 6px 12px; } } /* progress / chat log floated UP onto the lower-left (over the felt's empty left area) */ #screen-table .chat { position: absolute; left: 20px; bottom: 108px; width: 320px; height: 230px; z-index: 210; background: rgba(10,8,5,.82); backdrop-filter: blur(3px); border: 1px solid #2c2618; border-radius: 12px; overflow: hidden; } #screen-table .chatlog { flex: 1; max-height: none; } /* lobby background fallback (app.js sets the wealth-progression room inline). */ #screen-lobby { background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('../assets/rooms/room1.webp') center / cover no-repeat; } /* ===== LOBBY REDESIGN (Claude) — top bar + centered 3-button menu ===== */ #screen-lobby { padding: 0 !important; flex-direction: column; } /* top bar */ .lob-head { width: 100%; flex: 0 0 auto; position: relative; padding: 13px clamp(14px, 3vw, 32px); background: linear-gradient(180deg, rgba(8,6,4,.94), rgba(8,6,4,.6)); border-bottom: 1px solid rgba(230,195,104,.18); backdrop-filter: blur(6px); margin: 0; } /* lobby settings (⚙️) button + dropdown panel */ .lob-settings { position: absolute; top: 10px; right: 10px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.4); color: #e7c368; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s, background .15s; } .lob-settings:hover { background: rgba(0,0,0,.65); transform: rotate(45deg); } .settings-panel { position: absolute; top: 56px; right: 10px; z-index: 30; width: 220px; background: linear-gradient(160deg, #22262e, #14171d); border: 1px solid rgba(255,210,74,.35); border-radius: 14px; padding: 14px 15px; box-shadow: 0 16px 44px rgba(0,0,0,.6); } .settings-panel .sp-title { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #8a9099; margin-bottom: 12px; } .settings-panel .sp-sec { margin-bottom: 14px; } .settings-panel .sp-lab { font-size: 13px; color: #cfd3da; margin-bottom: 7px; } .settings-panel .lang-switch { margin-bottom: 0; justify-content: flex-start; } .settings-panel .sp-signout { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,120,110,.4); background: rgba(255,90,80,.12); color: #ff8a80; font-weight: 800; font-size: 14px; cursor: pointer; } .settings-panel .sp-signout:hover { background: rgba(255,90,80,.2); } .lob-head .av { width: 44px; height: 44px; } .lob-head .lob-bank { margin-right: 48px; } /* clear the ⚙️ settings button */ .bank-label { letter-spacing: 1px; text-transform: uppercase; } .bank-amt { text-shadow: 0 1px 8px rgba(0,0,0,.6); } /* centered main menu */ .lob-menu { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; padding: 24px; } .menu-card { width: min(440px, 86vw); display: flex; align-items: center; gap: 15px; padding: 17px 20px; border-radius: 16px; border: 1px solid rgba(230,195,104,.22); background: rgba(13,10,6,.74); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; text-align: left; box-shadow: 0 14px 34px rgba(0,0,0,.45); transition: transform .12s ease, border-color .12s ease, background .12s ease; } .menu-card:hover { transform: translateY(-2px); border-color: rgba(230,195,104,.6); background: rgba(20,16,10,.84); } .menu-card:active { transform: translateY(0); } .menu-card.primary { border-color: transparent; color: #241c05; background: linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow: 0 16px 42px rgba(230,195,104,.3); } .menu-card.primary:hover { background: linear-gradient(180deg, #f0d078, var(--gold2)); } .mc-ic { width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 23px; border-radius: 12px; background: rgba(0,0,0,.24); } .menu-card.primary .mc-ic { background: rgba(0,0,0,.14); } .mc-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mc-tx b { font-size: 18px; font-weight: 800; letter-spacing: .5px; } .mc-tx i { font-style: normal; font-size: 12.5px; color: var(--muted); } .menu-card.primary .mc-tx i { color: #5a4708; } .mc-arrow { flex: 0 0 auto; font-size: 26px; opacity: .5; } /* ===== TOURNAMENT LIST — full-screen phone app ===== */ .lob-tourneys { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; } .phone { width: 100%; height: 100%; display: flex; } .phone-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #0d0b08 0%, #100c07 100%); } /* on wider screens, show it as an actual phone device */ @media (min-width: 560px) { .lob-tourneys { padding: 14px; } .phone { width: min(430px, 96vw); height: min(880px, 94%); margin: auto; border: 9px solid #17140f; border-radius: 40px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 2px #2a251a; overflow: hidden; } .phone-screen { border-radius: 30px; } } .app-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px 4px; font-size: 12px; color: var(--muted); flex: 0 0 auto; } .app-sig { letter-spacing: 1px; } .app-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 6px 16px 12px; border-bottom: 1px solid rgba(230,195,104,.16); } .app-back { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: rgba(230,195,104,.1); border: 1px solid rgba(230,195,104,.28); color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; } .app-back:hover { border-color: var(--gold); } .app-title { font-size: 17px; font-weight: 800; letter-spacing: .5px; display: flex; flex-direction: column; } .app-title span { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .3px; margin-top: 2px; } .app-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 20px; } /* tournament rows */ .trow { display: flex; gap: 11px; align-items: stretch; padding: 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20,16,10,.7); } .trow.locked { opacity: .5; filter: grayscale(.5); } .trow-dot { width: 4px; flex: 0 0 auto; border-radius: 3px; background: var(--gold); align-self: stretch; } .trow.theme-strip .trow-dot { background: #59a6ff; } .trow.theme-highroller .trow-dot { background: #b98cff; } .trow.theme-whale .trow-dot { background: #57c98a; } .trow.theme-champ .trow-dot { background: #ff6f6f; } .trow-mid { flex: 1 1 auto; min-width: 0; } .trow-top { display: flex; align-items: center; gap: 8px; } .trow-casino { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .3px; } .trow-day { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #ffd479; border: 1px solid rgba(255,190,90,.5); border-radius: 5px; padding: 1px 5px; } .trow-name { font-size: 15.5px; font-weight: 800; margin: 2px 0 5px; } .trow-meta { font-size: 11px; color: var(--muted); line-height: 1.5; } .trow-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; min-width: 66px; } .trow-buyin { font-size: 19px; font-weight: 800; color: var(--gold); } .trow-enter { border: none; border-radius: 9px; padding: 8px 14px; font-weight: 800; font-size: 12px; letter-spacing: .5px; cursor: pointer; color: #241c05; background: linear-gradient(180deg, var(--gold), var(--gold2)); } .trow-enter:active { transform: translateY(1px); } .trow-lock { font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; } /* sign out + toast */ #screen-lobby .logout { flex: 0 0 auto; margin: 6px auto 14px; } .toast { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(10px); background: rgba(10,8,5,.95); color: var(--text); border: 1px solid rgba(230,195,104,.4); padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.55); opacity: 0; pointer-events: none; z-index: 400; transition: opacity .2s ease, transform .2s ease; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== TOURNAMENT INFO / SEATING ===== */ #screen-tourney { background: radial-gradient(130% 100% at 50% -10%, #241f14 0%, #0a0806 60%); overflow-y: auto; align-items: flex-start; justify-content: center; } .tinfo { width: min(1320px, 95vw); margin: 0 auto; padding: 18px clamp(16px,3vw,40px) 48px; } .tinfo-back { background: rgba(13,10,6,.7); border: 1px solid rgba(230,195,104,.3); color: var(--text); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; margin: 8px 0 18px; } .tinfo-back:hover { border-color: var(--gold); } .tinfo-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; } .tinfo-casino { color: var(--gold); font-weight: 700; letter-spacing: .5px; font-size: 16px; } .tinfo-name { font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; margin: 5px 0 13px; } .tinfo-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tinfo-tags span { font-size: 13px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; } .tinfo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .tinfo-stat { background: rgba(20,16,10,.7); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .tinfo-stat span { display: block; font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 7px; } .tinfo-stat b { font-size: 25px; color: var(--gold); } /* special-events banner on the info screen */ .tinfo-events { background: linear-gradient(135deg, rgba(46,34,12,.9), rgba(24,18,9,.9)); border: 1px solid rgba(230,195,104,.4); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05); } .tinfo-events h3 { font-size: 15px; letter-spacing: .5px; color: var(--gold); margin-bottom: 13px; text-transform: uppercase; } .ti-ev-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; } .ev-badge { font-size: 13px; font-weight: 800; letter-spacing: .4px; padding: 6px 14px; border-radius: 999px; color: #150f04; background: var(--bc, linear-gradient(135deg, #f0d477, #cfa536)); box-shadow: 0 2px 8px rgba(0,0,0,.35); } #ti-formats { list-style: none; } #ti-formats li { font-size: 15px; color: var(--text); padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); } #ti-formats li:last-child { border-bottom: none; } #ti-formats li b { color: var(--bc, var(--gold)); margin-right: 6px; } #ti-formats li.ti-ev-note { color: var(--goldsoft); font-style: italic; } /* event badges on the tournament list rows */ .trow-evs { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 4px; } .trow-ev { font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 8px; border-radius: 6px; color: #150f04; background: var(--bc, linear-gradient(135deg, #f0d477, #cfa536)); } .trow.locked .trow-ev { opacity: .5; } /* per-event badge colors (shared by info badges, inline labels, and list chips) */ .ev-bounty { --bc: #43b56f; } /* cash bounty — green */ .ev-mystery { --bc: #b071e0; } /* mystery — purple */ .ev-pko { --bc: #eb8140; } /* progressive KO — orange */ .ev-ticket { --bc: #37b7ac; } /* KO drawing — teal */ .ev-survivor { --bc: #5199e6; } /* survivor — blue */ .ev-highhand { --bc: #e75a52; } /* high hand — red */ .ev-bubble { --bc: #eb6fa6; } /* bubble — pink */ .ev-cashdraw { --bc: #74c65e; } /* cash draw — lime */ .ev-giftdraw { --bc: #bd85e6; } /* gift draw — violet */ .ev-seatdraw { --bc: #e0a838; } /* seat draw — amber */ .ev-golden { --bc: #f5d64e; } /* golden ticket — bright gold */ .ev-flight { --bc: #59bcd6; } /* flight bonus — sky */ /* result modal breakdown */ .res-total { font-size: 20px; margin-bottom: 10px; } .res-lines { list-style: none; margin: 0 0 12px; text-align: left; display: inline-block; } .res-lines li { font-size: 13.5px; color: var(--text); padding: 4px 0; } .res-lines li b { color: var(--gold); margin-left: 8px; } .res-bal { margin-top: 6px; } /* player profile popup (tap a seat) */ #screen-table .seat:not(.me) { cursor: pointer; } .ppop { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); } .ppop[hidden] { display: none; } .ppop-card { position: relative; width: min(340px, 90vw); background: linear-gradient(180deg, rgba(26,22,15,.98), rgba(12,10,7,.98)); border: 1px solid rgba(230,195,104,.35); border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 26px 60px rgba(0,0,0,.6); } .ppop-x { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--muted); font-size: 24px; cursor: pointer; } .ppop-av { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; background: #14100a; } .ppop-name { font-size: 22px; font-weight: 800; margin-top: 10px; } .ppop-style { font-size: 13px; color: var(--goldsoft); margin: 4px 0 16px; } .ppop-stats { display: flex; flex-direction: column; text-align: left; } .pp-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; color: var(--text); } .pp-row:last-child { border-bottom: none; } .pp-row b { color: var(--gold); font-size: 15px; } /* bigger, bolder SB / BB / D position markers */ #screen-table .posbadge { width: 72px; height: 72px; font-size: 26px; top: -11px; left: -11px; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 3px 9px rgba(0,0,0,.6); } #screen-table .dealerbtn { width: 36px; height: 36px; font-size: 18px; border-width: 3px; box-shadow: 0 3px 9px rgba(0,0,0,.6), 0 0 12px rgba(230,195,104,.5); } #screen-table .seat.me .posbadge { width: 84px; height: 84px; } #screen-table .seat.me .dealerbtn { width: 42px; height: 42px; } #screen-table .seat.me .posbadge { font-size: 30px; } #screen-table .seat.me .dealerbtn { font-size: 21px; } /* bounty marker on each player's head (bounty tournaments) */ .bounty-tag { position: absolute; top: -10px; right: -10px; z-index: 4; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; background: linear-gradient(135deg, #e0554f, #b3352f); border: 1.5px solid #ffb3ad; font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 12px rgba(224,85,79,.55); animation: btPulse 1.7s ease-in-out infinite; } .bounty-tag .bt-ic { font-size: 14px; } @keyframes btPulse { 0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 8px rgba(224,85,79,.4); } 50% { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 18px rgba(224,85,79,.95); } } #screen-table .seat.me .bounty-tag { font-size: 13px; top: -8px; right: -6px; } /* MY ⭐ tally — sticks on my seat, one star per bounty I knock out */ .my-stars { position: absolute; top: -10px; left: -10px; z-index: 5; display: inline-flex; align-items: center; padding: 2px 9px 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffe27a, #f5b820); border: 1.5px solid #fff2c0; font-size: 12px; font-weight: 900; color: #4a2c00; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 14px rgba(255,210,74,.7); } #screen-table .seat.me .my-stars { font-size: 14px; top: -8px; left: -6px; } /* per-seat bet amount — bigger, chip-like, easy to read */ /* bet/blind chips placed in front of each seat, facing the pot (chip disc + amount) */ #felt .betchip { display: flex; align-items: center; gap: 5px; font-size: 15px !important; font-weight: 800; color: #fff; background: rgba(8,10,18,.6); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 10px 3px 4px; min-width: 0; white-space: nowrap; z-index: 7; box-shadow: 0 3px 8px rgba(0,0,0,.5); letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.6); } #felt .betchip .chip-ico { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 50% 38%, #7cc0ff 0 28%, #2f7fd6 30% 100%); border: 2px dashed #eaf2ff; box-shadow: 0 1px 3px rgba(0,0,0,.55); } /* table dropdown menu (☰): leave / forfeit */ .table-menu { position: absolute; top: 62px; right: 14px; z-index: 550; width: 264px; background: rgba(15,12,8,.97); border: 1px solid rgba(230,195,104,.3); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 46px rgba(0,0,0,.62); } .table-menu[hidden] { display: none; } .tm-btn { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; } .tm-btn:hover { border-color: rgba(230,195,104,.5); } .tm-btn.danger { color: #ffb3ad; border-color: rgba(224,85,79,.4); background: rgba(224,85,79,.12); } .tm-btn.danger:hover { background: rgba(224,85,79,.22); } .tm-confirm { border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .tm-confirm[hidden] { display: none; } .tm-q { font-size: 14px; color: var(--text); font-weight: 700; } .tm-q span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 3px; } .tm-row { display: flex; gap: 8px; } .tm-row .tm-btn { flex: 1; text-align: center; } /* sound on/off toggle (hidden on the table so it never covers the action buttons) */ .mute-btn { position: fixed; left: 14px; bottom: 14px; z-index: 600; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(15,12,8,.82); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); } .mute-btn.off { opacity: .55; } body:has(#screen-table.active) .mute-btn { display: none; } #screen-table #tw-mytable { color: var(--goldsoft); font-weight: 700; } /* ===== top-bar career stats + career screen ===== */ .lv-badge { font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 2px 9px; border-radius: 999px; color: #241c05; background: linear-gradient(135deg,#f0d477,#cfa536); vertical-align: middle; margin-left: 8px; } #screen-lobby .lob-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; } .st-chip { font-size: 12px; font-weight: 700; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px 10px; } .st-chip.win { color: #ffe9a8; background: rgba(230,195,104,.14); border-color: rgba(230,195,104,.3); } .st-more { font-size: 12px; font-weight: 800; color: var(--gold); margin-left: 2px; } #screen-stats { overflow-y: auto; align-items: flex-start; } .career { width: min(1100px, 95vw); margin: 0 auto; padding: 16px clamp(16px,3vw,36px) 60px; } .career-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 20px; } .career-head .av { width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--gold); } .career-name { font-size: 27px; font-weight: 800; } .career-sub { font-size: 13px; color: var(--muted); margin-top: 3px; } .career-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 20px; } .ctile { background: rgba(20,16,10,.7); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .ctile span { display: block; font-size: 12px; color: var(--muted); letter-spacing: .5px; margin-bottom: 6px; } .ctile b { font-size: 23px; color: var(--text); } .ctile b.win { color: var(--gold); } .ctile b.loss { color: #ff6a5f; } .ctile-head { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .8px; margin: 8px 2px 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .ctile-head:first-child { margin-top: 0; } /* ---- GTO hand replay (notebook) ---- */ .career-replay { display: flex; flex-direction: column; gap: 10px; } .rp-empty { color: var(--muted); font-size: 14px; padding: 10px 4px; } .rp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rp-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(20,16,10,.7); border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; color: var(--text); cursor: pointer; transition: border-color .15s, transform .1s; } .rp-cat:hover { border-color: var(--gold); transform: translateY(-2px); } .rp-cic { font-size: 30px; } .rp-cat b { font-size: 17px; } .rp-cat i { font-size: 12px; color: var(--muted); font-style: normal; } .rp-back { align-self: flex-start; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); padding: 6px 12px; cursor: pointer; font-size: 13px; } .rp-back:hover { color: var(--gold); border-color: var(--gold); } .rp-games { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .rp-game { display: flex; align-items: center; gap: 10px; background: rgba(20,16,10,.7); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; } .rp-game:hover { border-color: var(--gold); } .rp-gname { font-weight: 700; color: var(--text); flex: 1; } .rp-gmeta { font-size: 12px; color: var(--muted); } .rp-arrow { color: var(--gold); font-size: 20px; } .rp-gtitle { font-weight: 700; color: var(--gold); margin: 10px 2px; } .rp-hands { display: flex; flex-direction: column; gap: 8px; } .rp-hand { background: rgba(20,16,10,.7); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .rp-review { margin-left: 12px; background: rgba(230,195,104,.14); border: 1px solid rgba(230,195,104,.42); color: var(--gold); border-radius: 9px; padding: 7px 14px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; flex: none; } .rp-review:hover { background: rgba(230,195,104,.26); } .rp-review:disabled { opacity: .65; cursor: default; } .rp-hrow { display: flex; align-items: center; gap: 6px; padding: 10px 12px; flex-wrap: wrap; } .rp-hno { color: var(--muted); font-size: 12px; min-width: 30px; } .rp-hb { display: inline-flex; gap: 2px; margin-left: 4px; } .rp-mine { display: inline-flex; gap: 2px; } .rp-won { margin-left: auto; color: #58d68d; font-weight: 700; font-size: 13px; } .rp-lost { margin-left: auto; color: #ff6a5f; font-weight: 700; font-size: 13px; } .rp-detail { display: none; padding: 0 12px 12px; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); } .rp-hand.open .rp-detail { display: flex; } .rp-dwin { font-size: 13px; color: var(--text); margin-top: 8px; } .rp-seat { display: flex; align-items: center; gap: 8px; font-size: 13px; } .rp-seat.w { color: var(--gold); } .rp-seat.me .rp-sn { color: #6fb3ff; font-weight: 700; } .rp-sn { min-width: 84px; color: var(--muted); } .rp-tag { margin-left: 2px; } .rp-gto { font-size: 12px; color: var(--muted); background: rgba(255,255,255,.03); border-radius: 8px; padding: 8px 10px; margin-top: 4px; } .rc-card { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; padding: 0 4px; background: #fff; color: #111; border-radius: 5px; font-weight: 700; font-size: 15px; box-shadow: 0 1px 2px rgba(0,0,0,.4); } .rc-card.red { color: #d81e2c; } .rc-card.back { background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 4px, #9c2733 4px, #9c2733 8px); } .rc-muck { color: var(--muted); font-size: 12px; font-style: italic; } /* GTO coaching cards (study view) */ .rp-gto { padding: 0 !important; background: none !important; } .cx-card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; } .cx-good { border-left-color: #58d68d; } .cx-ok { border-left-color: #e0a83a; } .cx-bad { border-left-color: #ff6a5f; } .cx-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .cx-street { font-size: 16px; font-weight: 800; color: var(--gold); letter-spacing: .5px; } .cx-tag { font-size: 15px; font-weight: 800; } .cx-good .cx-tag { color: #58d68d; } .cx-ok .cx-tag { color: #e0a83a; } .cx-bad .cx-tag { color: #ff6a5f; } .cx-cardsrow { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 14px; } .cx-cb { display: flex; flex-direction: column; gap: 7px; } .cx-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .cx-cards { display: inline-flex; gap: 6px; align-items: center; } .cx-cards .rc-card { min-width: 36px; height: 50px; font-size: 22px; border-radius: 7px; } .cx-pre { color: var(--muted); font-size: 16px; } .cx-made { font-size: 16px; color: var(--text); margin-bottom: 14px; } .cx-made b { color: #fff; font-weight: 800; } .cx-eqwrap { margin-bottom: 14px; } .cx-eqbar { position: relative; height: 16px; background: rgba(255,255,255,.09); border-radius: 8px; margin-bottom: 7px; } .cx-eqfill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; } .cx-eqfill.hi { background: linear-gradient(90deg, #3aa76d, #58d68d); } .cx-eqfill.lo { background: linear-gradient(90deg, #c0392b, #ff6a5f); } .cx-eqneed { position: absolute; top: -4px; width: 3px; height: 24px; background: #fff; border-radius: 2px; box-shadow: 0 0 5px rgba(0,0,0,.7); } .cx-eqnum { font-size: 15px; color: var(--muted); } .cx-eqnum b { color: #fff; font-size: 18px; } .cx-picks { display: flex; gap: 28px; font-size: 15px; color: var(--muted); margin-bottom: 12px; } .cx-picks b { color: #fff; font-size: 17px; margin-left: 4px; } .cx-why { font-size: 15px; line-height: 1.55; font-weight: 600; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); } .cx-good .cx-why { color: #7fe0a4; } .cx-ok .cx-why { color: #f0c674; } .cx-bad .cx-why { color: #ff8a80; } .cx-note { color: var(--muted); font-size: 14px; } .cx-freqhead { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 8px; } .cx-fbar { display: flex; height: 20px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); margin-bottom: 8px; } .cx-fseg { height: 100%; } .cx-fseg.fold { background: #d64545; } .cx-fseg.pass { background: #e0a83a; } .cx-fseg.aggro { background: #3aa76d; } .cx-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .cx-lg { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 2px solid transparent; } .cx-lg.fold { color: #ff8a80; } .cx-lg.pass { color: #f0c674; } .cx-lg.aggro { color: #7fe0a4; } .cx-lg.sel { border-color: #fff; background: rgba(255,255,255,.08); } .cx-you { font-size: 15px; color: var(--muted); margin-bottom: 10px; } .cx-you b { color: #fff; font-size: 17px; margin-left: 4px; } .cx-why { font-size: 15px; line-height: 1.55; font-weight: 600; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 12px; } .cx-good .cx-why { color: #7fe0a4; } .cx-ok .cx-why { color: #f0c674; } .cx-bad .cx-why { color: #ff8a80; } .cx-threats { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 10px; } .cx-tlabel { font-size: 14px; color: #ff9a72; font-weight: 700; margin-bottom: 8px; } .cx-tlist { display: flex; flex-wrap: wrap; gap: 8px; } .cx-tchip { font-size: 14px; padding: 5px 11px; border-radius: 8px; background: rgba(214,69,69,.14); border: 1px solid rgba(214,69,69,.35); color: #ffd0c4; } .cx-tchip b { color: #fff; margin-left: 3px; } .cx-tdraw { font-size: 13px; color: var(--muted); margin-top: 8px; } .cx-eqnote { font-size: 13px; color: var(--muted); } .career-graph { width: 100%; } .graph-empty { color: var(--muted); font-size: 14px; padding: 24px 4px; text-align: center; } .pg-svg { width: 100%; height: auto; display: block; background: rgba(0,0,0,.22); border-radius: 10px; } .pg-path { fill: none; stroke: rgba(230,195,104,.7); stroke-width: 2; } .g-line { stroke: rgba(255,255,255,.12); stroke-width: 1; } .g-lab { fill: var(--muted); font-size: 12px; } .d-win { fill: #f5d64e; } .d-cash { fill: #43b56f; } .d-out { fill: #7f8590; } .career-log { list-style: none; } .career-log li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; } .career-log li:last-child { border-bottom: none; } .clog-empty { color: var(--muted); justify-content: center; } .clog-medal { font-size: 20px; width: 26px; text-align: center; } .clog-mid { flex: 1; min-width: 0; } .clog-mid b { color: var(--goldsoft); } .clog-mid i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; } .clog-won { font-weight: 800; color: var(--gold); white-space: nowrap; } .clog-won.neg { color: #ff6a5f; } .career-log li.clog-win { background: rgba(230,195,104,.08); border-radius: 8px; padding-left: 8px; padding-right: 8px; } .tinfo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; } .tinfo-card { background: rgba(15,12,8,.66); border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .tinfo-card h3 { font-size: 14px; letter-spacing: .5px; color: var(--goldsoft); margin-bottom: 11px; text-transform: uppercase; } .tinfo-card ul { list-style: none; } .tinfo-card li { font-size: 15px; color: var(--text); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; justify-content: space-between; gap: 10px; } .tinfo-card li:last-child { border-bottom: none; } #ti-structure li { display: list-item; color: var(--muted); position: relative; padding-left: 14px; } #ti-structure li::before { content: "·"; position: absolute; left: 3px; color: var(--gold); } #ti-structure .ti-blinds { color: var(--goldsoft); font-size: 13.5px; } #ti-payouts li b, .ti-pool b { color: var(--gold); } .ti-pool { color: var(--muted); } #ti-rules li { display: list-item; color: var(--muted); position: relative; padding-left: 16px; } #ti-rules li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-size: 11px; } .tinfo-seat { text-align: center; font-size: 17px; color: var(--text); margin-bottom: 18px; background: rgba(230,195,104,.08); border: 1px solid rgba(230,195,104,.25); border-radius: 12px; padding: 16px; } .tinfo-seat b { color: var(--gold); } .tinfo-start { display: block; width: min(440px, 100%); margin: 0 auto; height: 62px; border: none; border-radius: 14px; font-size: 19px; font-weight: 800; letter-spacing: .5px; cursor: pointer; color: #241c05; background: linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow: 0 14px 34px rgba(230,195,104,.28); } .tinfo-start:active { transform: translateY(1px); } .tinfo-start:disabled { background: #2a2519; color: var(--muted); box-shadow: none; cursor: not-allowed; } @media (max-width: 720px) { .tinfo-grid { grid-template-columns: repeat(2, 1fr); } .tinfo-cols { grid-template-columns: 1fr; } } /* ===== top-bar field counters (replaces the jackpot) ===== */ .topbar .fieldinfo { display: flex; align-items: center; gap: 16px; } .fi-block { text-align: center; } .fi-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; } .fi-val { font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--gold); } #tw-left { color: var(--green); } .fi-sep { width: 1px; height: 28px; background: rgba(255,255,255,.14); } /* ===== TABLE ANIMATIONS (Claude, additive — driven by js/anim.js) ===== */ /* welcome screen: "tournament in progress" hint above CONTINUE */ .welcome-resume { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #ffe9a8; text-align: center; background: rgba(230,195,104,.12); border: 1px solid rgba(230,195,104,.35); } #fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 500; } /* big winning-hand-rank banner at showdown (Flush / Two Pair / …) */ .fx-rank { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 8; text-align: center; pointer-events: none; padding: 6px 26px; border-radius: 16px; background: rgba(8,6,4,.5); } .fx-rank .fr-cat { font-size: clamp(30px, 5vw, 54px); font-weight: 900; letter-spacing: 1px; line-height: 1.05; color: #ffe9a8; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 28px rgba(230,195,104,.85); } .fx-rank .fr-who { font-size: 15px; font-weight: 700; color: #fff; margin-top: 3px; text-shadow: 0 2px 6px rgba(0,0,0,.75); } @media (orientation: portrait) and (max-width: 640px) { .fx-rank { top: 30%; padding: 5px 18px; } .fx-rank .fr-cat { font-size: 34px; } } /* "Next Hand" gate button — holds the table at showdown so cards are readable */ .fx-next-btn { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); pointer-events: auto; cursor: pointer; z-index: 520; display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border: none; border-radius: 999px; font-size: 19px; font-weight: 800; letter-spacing: .4px; color: #241c05; background: linear-gradient(135deg, #f0d477 0%, #cfa536 100%); box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 2px rgba(255,223,119,.5), 0 0 26px rgba(230,195,104,.5); animation: fxNextPulse 1.3s ease-in-out infinite; } .fx-next-btn em { font-style: normal; font-size: 15px; } .fx-next-btn:active { transform: translate(-50%,-50%) scale(.96); } /* fold-only hands: same button, quieter (auto-advances shortly) */ .fx-next-btn.subtle { padding: 10px 22px; font-size: 16px; color: #f0d477; animation: none; background: linear-gradient(135deg, #3a3320, #241f12); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(230,195,104,.4); } @keyframes fxNextPulse { 0%,100% { box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 2px rgba(255,223,119,.5), 0 0 22px rgba(230,195,104,.45); } 50% { box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 2px rgba(255,223,119,.8), 0 0 40px rgba(230,195,104,.8); } } .fx-chip { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, var(--gold2)); border: 2px solid #7a5f16; box-shadow: 0 2px 6px rgba(0,0,0,.5); } /* action / winner speech bubbles over avatars */ .fx-bubble { position: absolute; z-index: 6; transform: translate(-50%,-108%); display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; height: auto; line-height: 1; padding: 11px 22px; border-radius: 13px; font-weight: 800; font-size: 23px; letter-spacing: .5px; white-space: nowrap; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2); } .fx-bubble .amt { font-size: 21px; opacity: .95; } .fx-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: inherit; } .fx-bubble.fxa.raise { background: linear-gradient(180deg,#e6c368,#b8912f); color: #241c05; border-color: #f0d477; } .fx-bubble.fxa.call { background: linear-gradient(180deg,#3f7bd6,#2b5aa6); } .fx-bubble.fxa.check { background: linear-gradient(180deg,#5a6472,#3c4450); } .fx-bubble.fxa.fold { background: linear-gradient(180deg,#6d6d6d,#4a4a4a); color:#e6e6e6; } .fx-bubble.fxa.allin { background: linear-gradient(180deg,#e0554f,#b3352f); border-color:#ff8a84; } .fx-bubble.winner { font-size: 17px; padding: 7px 16px; border-radius: 15px; color: #241c05; background: linear-gradient(180deg,#ffe9a8,#e6c368 60%,#b8912f); border: 2px solid #fff2c8; box-shadow: 0 0 20px rgba(230,195,104,.7), 0 5px 14px rgba(0,0,0,.5); } .fx-bubble.winner::after { border-top-color: #e6c368; } /* hole cards dealt in — a little toss + pop so it feels alive */ @keyframes fxDealIn { 0% { transform: translateY(-54px) scale(.35) rotate(-9deg); opacity: 0; } 70% { transform: translateY(3px) scale(1.1) rotate(0); opacity: 1; } 100% { transform: none; opacity: 1; } } #felt .cards.deal-in .card { animation: fxDealIn .36s cubic-bezier(.2,.8,.3,1.35) both; } /* community cards: pop out big, then settle (dramatic reveal) */ @keyframes fxFlipIn { 0% { transform: rotateY(90deg) scale(.6); opacity: 0; } 55% { transform: rotateY(0deg) scale(1.28); opacity: 1; } 78% { transform: scale(.93); } 100% { transform: scale(1); opacity: 1; } } #board .card.flip-in { animation: fxFlipIn .52s cubic-bezier(.2,.9,.3,1.4) both; transform-origin: center; box-shadow: 0 0 22px rgba(230,195,104,.55); } /* showdown: opponents' cards pop as they flip face-up */ @keyframes fxRevealPop { 0% { transform: scale(.55); opacity: .2; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } #felt .card.reveal-pop { animation: fxRevealPop .44s cubic-bezier(.2,.9,.3,1.4) both; } /* winner glow */ @keyframes fxWinGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(230,195,104,0); } 50% { box-shadow: 0 0 22px 6px rgba(230,195,104,.6); } } #felt .seat.winner .avatar { animation: fxWinGlow 1s ease-in-out 2; border-color: var(--gold) !important; } /* active player's action-timer ring (depletes around the avatar, real-poker style). * duration comes from --turn-dur set by anim.js (human ~22s, AI = think time). */ @property --pang { syntax: ''; inherits: false; initial-value: 360deg; } @keyframes fxRing { from { --pang: 360deg; } to { --pang: 0deg; } } #felt .seat.turn .avatar::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: 3; pointer-events: none; background: conic-gradient(from -90deg, var(--turn-col, #ffd24a) var(--pang), rgba(0,0,0,.45) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); animation: fxRing var(--turn-dur, 1s) linear forwards; } /* the human's ring runs hot as it empties */ #felt .seat.turn.me .avatar { --turn-col: #ffd24a; } #felt .seat.turn.me .avatar::after { animation: fxRing var(--turn-dur, 22s) linear forwards, fxRingHot var(--turn-dur, 22s) linear forwards; } @keyframes fxRingHot { 0%,60% { --turn-col: #ffd24a; } 100% { --turn-col: #e0554f; } } /* GTO practice: no turn-timer ring anywhere — study at your own pace, no time pressure */ #table.practice #felt .seat.turn .avatar::after { display: none !important; } @property --turn-col { syntax: ''; inherits: true; initial-value: #ffd24a; } /* ===== CODEX LOBBY PASS: persistent menu + rising iPhone ===== */ #screen-lobby { overflow: hidden; isolation: isolate; } #screen-lobby .lob-menu { position: relative; z-index: 10; flex: 0 0 auto; justify-content: flex-start; gap: 10px; padding: 18px 24px 12px; } #screen-lobby .menu-card { width: min(470px, 88vw); min-height: 72px; padding: 12px 18px; border-radius: 18px; border-color: rgba(230,195,104,.2); background: linear-gradient(135deg, rgba(21,17,11,.92), rgba(10,8,6,.86)); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 14px 38px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } #screen-lobby .menu-card:hover { transform: translateY(-2px); border-color: rgba(230,195,104,.62); background: linear-gradient(135deg, rgba(30,24,14,.95), rgba(13,10,7,.92)); } #screen-lobby .menu-card.primary { border-color: transparent; color: #241c05; background: linear-gradient(135deg, #f0d477 0%, #cfa536 100%); box-shadow: 0 18px 46px rgba(230,195,104,.24), inset 0 1px rgba(255,255,255,.35); } #screen-lobby .menu-card.is-active { box-shadow: 0 0 0 2px rgba(255,223,119,.42), 0 18px 50px rgba(0,0,0,.44); } #screen-lobby .mc-ic { width: 48px; height: 48px; } #screen-lobby .mc-tx b { font-size: 19px; font-weight: 850; letter-spacing: .7px; } #screen-lobby .mc-tx i { color: #a99f8e; } #screen-lobby .lob-tourneys[hidden] { display: none !important; } #screen-lobby .lob-tourneys { position: absolute; z-index: 20; inset: 74px 0 0; width: 100%; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding: 230px 14px 14px; pointer-events: none; } #screen-lobby .phone { position: relative; width: min(458px, 94vw); height: min(630px, calc(100vh - 326px)); min-height: 360px; display: flex; pointer-events: auto; margin: 0; border: 10px solid #090909; border-radius: 48px; background: #090909; box-shadow: 0 36px 90px rgba(0,0,0,.72), 0 0 0 1px #343434, inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; animation: phone-rise .58s cubic-bezier(.18,.82,.22,1) both; } #screen-lobby .phone::before { content: ""; position: absolute; z-index: 8; left: 50%; top: 9px; width: 116px; height: 27px; transform: translateX(-50%); border-radius: 18px; background: #020202; box-shadow: inset 0 -1px rgba(255,255,255,.06); } #screen-lobby .phone::after { content: ""; position: absolute; z-index: 9; left: 50%; bottom: 7px; width: 116px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: rgba(255,255,255,.68); } #screen-lobby .phone-screen { padding-top: 28px; border-radius: 38px; overflow: hidden; background: radial-gradient(circle at 50% 0, rgba(205,160,48,.1), transparent 28%), linear-gradient(180deg, #0c0c0c 0%, #100c07 100%); } #screen-lobby .app-status { padding: 4px 22px 6px; font-size: 11px; color: #b7afa2; } #screen-lobby .app-head { padding: 7px 16px 13px; gap: 11px; } #screen-lobby .app-title { font-size: 18px; font-weight: 850; letter-spacing: .65px; } #screen-lobby .app-list { padding: 12px 12px 30px; scrollbar-width: thin; scrollbar-color: #8d722e transparent; } #screen-lobby .logout { position: absolute; z-index: 30; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; } @keyframes phone-rise { from { opacity: 0; transform: translateY(110px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-height: 760px) { #screen-lobby .lob-menu { gap: 7px; padding-top: 10px; } #screen-lobby .menu-card { min-height: 60px; padding-top: 7px; padding-bottom: 7px; } #screen-lobby .mc-ic { width: 42px; height: 42px; } #screen-lobby .lob-tourneys { padding-top: 194px; } #screen-lobby .phone { height: calc(100vh - 278px); min-height: 330px; border-radius: 40px; } #screen-lobby .phone-screen { border-radius: 30px; } } @media (max-width: 559px) { #screen-lobby .lob-head { padding-top: 9px; padding-bottom: 9px; } #screen-lobby .lob-menu { padding-left: 12px; padding-right: 12px; } #screen-lobby .menu-card { width: 94vw; } #screen-lobby .lob-tourneys { inset: 66px 0 0; padding-left: 8px; padding-right: 8px; } #screen-lobby .phone { width: 96vw; border-width: 7px; border-radius: 38px; } } @media (prefers-reduced-motion: reduce) { #screen-lobby .phone { animation-duration: .01ms; } } /* ===== CODEX LOBBY PASS 2: unified account card + full-height titanium phone ===== */ #screen-lobby .lob-head { position: relative; z-index: 40; width: min(560px, 94vw); min-height: 64px; margin: 12px auto 0; padding: 9px 14px; border: 1px solid rgba(232,202,119,.34); border-radius: 22px; background: linear-gradient(135deg, rgba(28,23,16,.97), rgba(10,9,8,.95)); box-shadow: 0 18px 50px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(16px) saturate(1.15); } #screen-lobby .lob-me { min-width: 0; } #screen-lobby .lob-head .av { width: 48px; height: 48px; border: 2px solid #e2bc51; box-shadow: 0 0 0 3px rgba(226,188,81,.1); } #screen-lobby .lob-name { font-size: 17px; line-height: 1.2; } #screen-lobby .lob-stats { margin-top: 4px; font-size: 11.5px; color: #aaa18f; } #screen-lobby .lob-bank { min-width: 112px; margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(230,195,104,.2); } #screen-lobby .bank-label { font-size: 10px; } #screen-lobby .bank-amt { font-size: 22px; line-height: 1.15; } #screen-lobby .lob-menu { gap: 8px; padding: 12px 24px 10px; } #screen-lobby .menu-card { width: min(560px, 94vw); min-height: 62px; padding: 8px 15px; border-radius: 16px; } #screen-lobby .mc-ic { width: 44px; height: 44px; border-radius: 12px; } #screen-lobby .mc-tx b { font-size: 18px; } #screen-lobby .lob-tourneys { inset: 0; padding: 300px 14px 10px; align-items: flex-start; justify-content: center; } #screen-lobby .phone { width: min(590px, 94vw); height: calc(100vh - 310px); min-height: 430px; max-height: none; border: 11px solid #050505; border-radius: 58px; outline: 5px solid #a89d88; background: #050505; box-shadow: 0 0 0 1px #e0d7c4, 0 38px 110px rgba(0,0,0,.84), -7px 80px 0 -4px #817765, 7px 142px 0 -4px #817765, inset 0 0 0 1px rgba(255,255,255,.12); } #screen-lobby .phone::before { top: 10px; width: 126px; height: 30px; border: 1px solid #181818; } #screen-lobby .phone::after { bottom: 8px; width: 132px; background: rgba(255,255,255,.82); } #screen-lobby .phone-screen { padding-top: 31px; border-radius: 45px; background: radial-gradient(circle at 50% 0, rgba(218,174,62,.13), transparent 30%), linear-gradient(180deg, #171716 0%, #0c0b09 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); } #screen-lobby .app-head { background: rgba(7,7,7,.45); } #screen-lobby .app-title { color: #fff8e9; } #screen-lobby .trow { background: linear-gradient(135deg, rgba(31,26,17,.96), rgba(17,15,11,.96)); border-color: rgba(220,181,77,.22); } #screen-lobby .trow:hover { border-color: rgba(230,195,104,.5); background: linear-gradient(135deg, rgba(39,31,18,.98), rgba(20,17,12,.98)); } @media (max-height: 760px) { #screen-lobby .lob-head { min-height: 56px; margin-top: 7px; padding-top: 6px; padding-bottom: 6px; } #screen-lobby .lob-head .av { width: 42px; height: 42px; } #screen-lobby .lob-menu { gap: 6px; padding-top: 7px; } #screen-lobby .menu-card { min-height: 54px; } #screen-lobby .mc-ic { width: 38px; height: 38px; } #screen-lobby .lob-tourneys { inset: 0; padding-top: 248px; } #screen-lobby .phone { height: calc(100vh - 258px); min-height: 400px; border-radius: 48px; } #screen-lobby .phone-screen { border-radius: 37px; } } @media (max-width: 620px) { #screen-lobby .lob-head, #screen-lobby .menu-card { width: 95vw; } #screen-lobby .lob-bank { min-width: 96px; margin-left: 10px; padding-left: 10px; } #screen-lobby .lob-tourneys { padding-left: 9px; padding-right: 9px; } #screen-lobby .phone { width: 95vw; outline-width: 3px; border-width: 8px; } } /* ============================================================ PORTRAIT PHONE — play the table held vertically (Claude) declutter (no log/positions), give the controls real room, keep YOU fully on-screen. ============================================================ */ @media (orientation: portrait) and (max-width: 640px) { /* --- declutter: no chat/log window, no positions legend --- */ #screen-table .chat { display: none !important; } #screen-table .positions { display: none !important; } #screen-table .brand-logo, #screen-table .brand-name { display: none !important; } /* --- compact top bar (was wrapping onto 2 lines) --- */ #screen-table .topbar { padding: 6px 10px; gap: 8px; align-items: center; flex-wrap: nowrap; } #screen-table .ginfo { font-size: 10.5px; line-height: 1.25; min-width: 0; } #screen-table .ginfo .g1 { font-size: 12px; } #screen-table .fieldinfo { gap: 8px; min-width: 0; overflow: hidden; flex-shrink: 1; } #screen-table .fi-val { font-size: 15px; } #screen-table .fi-label { font-size: 8px; } #screen-table .bal-amt { font-size: 15px; } #screen-table .bal-label { font-size: 8px; } /* keep the ☰ menu (leave-the-game) ALWAYS on-screen and tappable */ #screen-table .topright { flex-shrink: 0; } #screen-table .menu-btn { flex-shrink: 0; width: 40px; height: 40px; font-size: 22px; border: 1px solid var(--line); background: #17130c; } /* --- table: cap felt height so the control bar keeps its room --- */ #screen-table .felt-area { flex: 1 1 auto; padding: 4px 6px 0; align-items: center; } #screen-table .felt { width: min(94vw, 460px); height: min(58vh, 520px); } /* board + pot lifted into the empty top-center (no seats there now) */ #screen-table .felt-center { top: 17%; } /* bigger community cards + text for phone readability (top-center has room) */ #screen-table #board .card { width: 50px; height: 72px; border-radius: 8px; } #screen-table #board .card span { font-size: 24px; font-weight: 800; } #screen-table #board .card small { font-size: 19px; } #screen-table .potbox { font-size: 12px; padding: 4px 12px; } /* pull YOU up + shrink so the big avatar/cards clear the buttons */ #screen-table .seat.me .avatar { width: 68px; height: 68px; } #screen-table .seat.me .seatbox { min-width: 0; padding: 5px 12px; gap: 8px; } #screen-table .seat.me .pname { font-size: 15px; } #screen-table .seat.me .pstack { font-size: 16px; } /* bigger own hole cards + text too */ #screen-table .seat.me .cards .card { width: 54px; height: 76px; border-radius: 8px; } #screen-table .seat.me .cards .card span { font-size: 25px; font-weight: 800; } #screen-table .seat.me .cards .card small { font-size: 19px; } /* --- bottom controls: full-width action buttons, always tappable --- */ #screen-table .bottombar { min-height: 92px; flex-wrap: wrap; align-items: flex-end; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); gap: 8px; } #screen-table .actionbar { width: 100%; order: 1; justify-content: center; flex-wrap: wrap; gap: 8px; } #screen-table .acts { width: 100%; display: flex; gap: 8px; } #screen-table .act { flex: 1 1 0; min-width: 0; height: 52px; font-size: 15px; padding: 0 6px; border-radius: 12px; } /* --- compact opponent seats so they don't get clipped at the table edges --- */ #screen-table .seat:not(.me) .seatbox { min-width: 0; padding: 4px 10px 4px 4px; gap: 6px; border-radius: 15px; } #screen-table .seat:not(.me).right .seatbox { padding: 4px 4px 4px 10px; } #screen-table .seat:not(.me) .avatar { width: 46px; height: 46px; border-width: 2px; } #screen-table .seat:not(.me) .numbadge { min-width: 17px; height: 17px; font-size: 10px; padding: 0 3px; } #screen-table .seat:not(.me) .pname { font-size: 12px; } #screen-table .seat:not(.me) .pstack { font-size: 12px; } #screen-table .seat:not(.me) .cards .card { width: 42px; height: 58px; border-radius: 7px; box-shadow: 0 3px 9px rgba(0,0,0,.6); } /* SHOWDOWN FIX: hole cards default to z-index:-1 (tucked behind the avatar). On a small phone the seat is tiny so revealed cards vanish — bring them to the front + lift them clear of the avatar so you can actually read the hands at showdown. */ #screen-table .seat .cards { z-index: 6 !important; } #screen-table .seat:not(.me) .cards { transform: translate(-50%, -6%) !important; } #screen-table .seat:not(.me) .cards .card span { font-size: 22px; font-weight: 800; } #screen-table .seat:not(.me) .cards .card small { font-size: 17px; } #screen-table .seat.turn .avatar::after { inset: -4px; } /* --- bet sizer: HORIZONTAL bar pinned to the bottom (clears the players) --- */ #screen-table .betsizer { position: absolute; left: 8px; right: 8px; bottom: 98px; top: auto; flex: none; flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 12px 11px; border-radius: 16px; } #screen-table .betsizer .bs-bubble { align-self: center; font-size: 15px; padding: 4px 15px; } #screen-table .betsizer .bs-bubble::after { display: none; } #screen-table .betsizer .bs-body { flex-direction: row; align-items: center; gap: 10px; } #screen-table .betsizer .bs-slidewrap { position: relative; width: auto; flex: 1 1 auto; height: 34px; } #screen-table .betsizer .bs-range { position: static; transform: none; width: 100%; height: 34px; } #screen-table .betsizer .bs-range::-webkit-slider-thumb { width: 22px; height: 28px; margin-top: -8px; } #screen-table .betsizer .bs-buttons { display: grid; grid-template-columns: repeat(3, 46px); gap: 6px; width: auto; } #screen-table .betsizer .bs-q { width: 46px; height: 34px; border-radius: 10px; font-size: 12px; } #screen-table .betsizer .bs-pm { display: contents; } #screen-table .betsizer .bs-step { width: 46px; height: 34px; border-radius: 10px; font-size: 19px; } #screen-table .betsizer .bs-bubble { font-size: 15px; } } /* per-session cash bar graph */ .cashgraph { grid-column: 1 / -1; background: rgba(20,16,10,.55); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; margin-bottom: 6px; } .cg-frame { display: flex; gap: 8px; } .cg-axis { display: flex; flex-direction: column; justify-content: space-between; width: 58px; height: 440px; text-align: right; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); flex: none; } .cg-axis.tg-axis { height: 320px; } .cg-axis .cg-axl.z { color: rgba(255,255,255,.8); } .cg-plot { position: relative; height: 440px; flex: 1 1 auto; min-width: 0; } .cg-plot.tg-plot { height: 320px; } .cg-grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.08); z-index: 1; } .cg-grid.z { background: rgba(255,255,255,.32); } .cg-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 3px; overflow-x: auto; z-index: 2; } .cg-col { position: relative; flex: 1 1 0; min-width: 5px; } .cg-bar { position: absolute; left: 0; right: 0; border-radius: 3px; min-height: 2px; } .cg-bar.up { bottom: 50%; background: linear-gradient(180deg, #5fce86, #3f9c63); } .cg-bar.dn { top: 50%; background: linear-gradient(0deg, #e0605b, #b23e3a); } /* tournament cumulative-winnings line */ .tg-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .tg-area { fill: rgba(95,206,134,.14); stroke: none; } .tg-line { fill: none; stroke: #5fce86; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .tg-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%); z-index: 3; border: 2px solid rgba(0,0,0,.5); box-shadow: 0 1px 4px rgba(0,0,0,.5); } .tg-dot.d-win { background: #ffd23f; } .tg-dot.d-cash { background: #5fce86; } .tg-dot.d-out { background: #e0605b; } .cg-cap { text-align: center; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.6); } .cg-cap .cg-total { font-weight: 800; font-size: 16px; } .cg-cap .cg-total.win { color: #5fce86; } .cg-cap .cg-total.loss { color: #e0605b; } .cg-empty { text-align: center; color: rgba(255,255,255,.45); padding: 22px 8px; font-size: 14px; } /* showdown medals: gold star = winner, silver star = runner-up */ .seat .seatbox { position: relative; } .seat .wstar { position: absolute; top: -56px; left: -4px; z-index: 8; line-height: 1; pointer-events: none; } .seat .wstar.gold { font-size: 64px; color: #ffd23f; text-shadow: 0 1px 3px rgba(0,0,0,.8); filter: drop-shadow(0 0 10px rgba(255,205,60,.9)); animation: wstar-pop .35s ease-out; } .seat .wstar.silver { font-size: 48px; color: #dbe2ea; text-shadow: 0 1px 3px rgba(0,0,0,.8); filter: drop-shadow(0 0 8px rgba(205,215,230,.7)); animation: wstar-pop .35s ease-out; } @keyframes wstar-pop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } } .seat .prank { font-size: 11px; font-weight: 800; color: #f0d27a; margin-top: 2px; line-height: 1.05; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* big showdown result bubble: made hand + this hand's +/- */ /* sits BELOW the name box so the hole cards (which are above the box) stay fully visible */ .seat .pbubble { position: absolute; left: 50%; top: calc(100% + 14px); bottom: auto; transform: translateX(-50%); z-index: 14; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; background: rgba(14,11,7,.97); border: 2px solid var(--gold); border-radius: 16px; padding: 9px 18px; box-shadow: 0 8px 22px rgba(0,0,0,.65); animation: pb-pop .28s cubic-bezier(.2,1.4,.5,1); } .seat .pbubble::after { content: ''; position: absolute; bottom: 100%; top: auto; left: 50%; transform: translateX(-50%); border: 9px solid transparent; border-bottom-color: var(--gold); } .seat .pb-rank { font-size: 23px; font-weight: 900; color: #f0d27a; letter-spacing: .5px; line-height: 1; } .seat .pb-net { font-size: 19px; font-weight: 800; line-height: 1; } .seat .pb-net.up { color: #5fce86; } .seat .pb-net.dn { color: #e0605b; } .seat.me .pb-rank { font-size: 26px; } .seat.me .pb-net { font-size: 22px; } /* the YOU box sits at the very bottom of the screen, so a bubble BELOW it gets cut off. For the human seat, flip the bubble ABOVE the box (clearing the hole cards) with the tail pointing down, and layer it on top so nothing clips it. */ .seat.me .pbubble { top: auto; bottom: calc(100% + 104px); z-index: 40; } .seat.me .pbubble::after { top: 100%; bottom: auto; border-top-color: var(--gold); border-bottom-color: transparent; } /* side-seat bubbles hang below the box near the middle and can cover the community board — nudge them OUTWARD (right seats → right, left seats → left) to clear the board cards. Uses `left` (not transform) so it doesn't fight the pop-in animation. */ .seat.right .pbubble { left: calc(50% + 92px); } .seat.left .pbubble { left: calc(50% - 92px); } @keyframes pb-pop { 0% { transform: translateX(-50%) scale(.5); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .seat.me .prank { color: #7fe6a0; } #build-ver { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); z-index: 99999; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #f0d27a; background: rgba(0,0,0,.6); padding: 3px 12px; border-radius: 11px; border: 1px solid rgba(230,195,104,.5); box-shadow: 0 1px 6px rgba(0,0,0,.4); pointer-events: none; font-family: ui-monospace, monospace; } /* ===== GTO PRACTICE — analyse-my-spot button + popup ===== */ /* sits up beside the human's two hole cards (which are above the YOU box), in the open felt to their right — not over the box */ #gto-btn.gto-btn { position: fixed; left: calc(50% + 82px); bottom: 34%; z-index: 46; background: linear-gradient(#f4d97e, #c9a53c); color: #2a1e05; font-weight: 800; font-size: 17px; letter-spacing: 1px; border: 2px solid #fff3cf; border-radius: 13px; padding: 10px 15px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.5); } #gto-btn.gto-btn::before { content: "🧠 "; } #gto-btn.gto-btn:active { transform: scale(.94); } #gto-btn[hidden] { display: none; } .gto-pop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 62; padding: 16px; } .gto-pop[hidden] { display: none; } .gto-pop-card { width: min(94vw, 420px); background: #141821; border: 1px solid rgba(230,195,104,.4); border-radius: 16px; padding: 16px; color: #eef2f8; box-shadow: 0 14px 44px rgba(0,0,0,.65); } .gto-pop-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #f0d27a; font-size: 16px; margin-bottom: 10px; } .gto-pop-x { background: none; border: none; color: #9fb0c8; font-size: 26px; line-height: 1; cursor: pointer; } .gto-head { display: flex; justify-content: space-between; align-items: baseline; } .gto-street { font-size: 12px; color: #9fb0c8; text-transform: uppercase; letter-spacing: .6px; } .gto-hand { font-size: 22px; font-weight: 800; } .gto-rec { text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 1px; padding: 10px; border-radius: 12px; margin: 10px 0; } .gto-rec.aggro { background: rgba(95,206,134,.16); color: #5fce86; border: 1px solid rgba(95,206,134,.5); } .gto-rec.call { background: rgba(240,210,122,.16); color: #f0d27a; border: 1px solid rgba(240,210,122,.5); } .gto-rec.fold { background: rgba(224,96,91,.16); color: #e0605b; border: 1px solid rgba(224,96,91,.5); } .gto-rows { margin: 6px 0; } .gto-row { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; } .gto-row b { color: #fff; } .gto-why { font-size: 14px; line-height: 1.55; color: #c8d4e6; margin-top: 8px; } .gto-wait { text-align: center; color: #9fb0c8; padding: 18px; } .gto-pop-btn { width: 100%; margin-top: 12px; padding: 12px; background: #2a3140; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #eef2f8; font-weight: 700; font-size: 15px; cursor: pointer; } /* GTO wizard loading spinner (while the home-server solver runs) */ .gto-loading { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 30px 10px; } .gto-spin { width: 48px; height: 48px; border-radius: 50%; border: 5px solid rgba(240,210,122,.22); border-top-color: #f0d27a; animation: gtospin .8s linear infinite; } @keyframes gtospin { to { transform: rotate(360deg); } } .gto-loadtx { text-align: center; color: #eef2f8; font-weight: 700; font-size: 16px; line-height: 1.5; } .gto-loadtx span { color: #9fb0c8; font-size: 12px; font-weight: 500; } /* ===== CODEX PHONE SAFETY + IPAD DESKTOP MODE ===== */ @media (max-width: 699px) { /* The two middle edge seats used 6%/94%; pull them into the phone safe area. */ #screen-table .seat.slot-2 { left: 15% !important; } #screen-table .seat.slot-7 { left: 85% !important; } #screen-table .seat.slot-3 { left: 20% !important; } #screen-table .seat.slot-6 { left: 80% !important; } #screen-table .seat.slot-1 { left: 24% !important; } #screen-table .seat.slot-8 { left: 76% !important; } #fx-layer { overflow: hidden; } .fx-bubble { max-width: calc(100vw - 16px); padding: 8px 13px; border-radius: 11px; font-size: 16px; letter-spacing: .2px; overflow-wrap: anywhere; text-align: center; } .fx-bubble .amt { font-size: 15px; } .fx-bubble.winner { max-width: calc(100vw - 16px); font-size: 14px; padding: 6px 11px; } /* lay the showdown bubble out HORIZONTALLY (hand name + / − amount side by side) so it reads as one short line instead of a tall skinny column — much easier on left seats. The JS viewport clamp nudges a wide bubble back on-screen near the edges. */ #screen-table .seat .pbubble { left: 50% !important; max-width: min(320px, calc(100vw - 16px)); padding: 7px 13px; border-radius: 12px; flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; overflow-wrap: normal; text-align: center; } #screen-table .seat .pb-rank { font-size: 17px; line-height: 1.1; } #screen-table .seat .pb-net { font-size: 15px; } #screen-table .seat.me .pb-rank { font-size: 19px; } #screen-table .seat.me .pb-net { font-size: 17px; } #screen-table .seat .posbadge { width: 32px; height: 32px; font-size: 11px; top: -6px; left: -6px; border-width: 1px; } #screen-table .seat .dealerbtn { width: 28px; height: 28px; font-size: 12px; border-width: 1px; } } /* Phone in LANDSCAPE: the portrait card-lift rule above doesn't apply here, so the hole cards fall back to their base z-index:-1 and get buried under the name box. Short screens are phones (tablets/desktops are taller), so lift the cards to the very top there too. */ @media (orientation: landscape) and (max-height: 640px) { #screen-table .seat .cards { z-index: 6 !important; } } /* iPad and similarly-sized tablets intentionally use the desktop table UI. */ @media (min-width: 700px) and (max-width: 1180px) { #screen-table .topbar { flex-wrap: nowrap; } #screen-table .ginfo { display: block; } #screen-table .positions { display: block; } #screen-table .bottombar { flex-wrap: nowrap; } #screen-table .actionbar { order: initial; flex-wrap: nowrap; } #screen-table .chat { display: none !important; } #screen-table .felt { width: min(82vw, 960px); } } @media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) { #screen-table .topbar { min-height: 92px; padding: 8px 10px; gap: 8px; flex-wrap: nowrap; } #screen-table .brand { gap: 7px; min-width: 0; flex-shrink: 1; } #screen-table .brand-logo { width: 36px; height: 36px; } #screen-table .brand-name { display: none; } #screen-table .ginfo { padding-left: 10px; } #screen-table .ginfo .g1 { font-size: 13px; } #screen-table .ginfo .g2 { font-size: 12px; } #screen-table .ginfo .g3 { font-size: 10px; } #screen-table .fieldinfo { gap: 8px; min-width: 0; overflow: hidden; flex-shrink: 1; } #screen-table .fi-label { font-size: 7px; letter-spacing: .4px; } #screen-table .fi-val { font-size: 15px; } #screen-table .fi-sep { height: 24px; } #screen-table .topright { gap: 6px; flex-shrink: 0; } #screen-table .bal { padding-left: 7px; gap: 6px; } #screen-table .bal-chip { width: 20px; height: 20px; } #screen-table .bal-label { font-size: 8px; } #screen-table .bal-amt { font-size: 15px; } #screen-table .menu-btn { width: 36px; height: 36px; font-size: 20px; flex-shrink: 0; border: 1px solid var(--line); background: #17130c; } #screen-table .felt-area { padding: 12px 24px 8px; align-items: center; } #screen-table .felt { width: 92vw; height: min(68vw, 560px); min-height: 430px; margin-top: 0; } #screen-table .seat.slot-2 { left: 14% !important; } #screen-table .seat.slot-7 { left: 86% !important; } #screen-table .seat.slot-3 { left: 19% !important; } #screen-table .seat.slot-6 { left: 81% !important; } #screen-table .seat.slot-1 { left: 23% !important; } #screen-table .seat.slot-8 { left: 77% !important; } #screen-table .seatbox { transform: scale(.78); } #screen-table .seat .cards { transform: translate(-50%, 2%) scale(.82) !important; } #screen-table .seat.me .cards { transform: translate(-50%, -8%) scale(.86) !important; } #screen-table .seat .posbadge { width: 34px; height: 34px; font-size: 12px; } #screen-table .seat .dealerbtn { width: 30px; height: 30px; font-size: 13px; } #screen-table .felt-center { top: 39%; } } /* GTO adherence rank shown under each opponent's name (skill = how closely they follow GTO) */ #felt .seat .info .pgto { font-size: 10px; font-weight: 800; line-height: 1.1; margin-top: 1px; color: #7fe0b0; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; } #felt .seat.me .info .pgto { display: none; } @media (max-width: 640px) { #felt .seat .info .pgto { font-size: 8.5px; } } /* ============ MULTIPLAYER (js/mp.js) ============ */ #screen-mp { overflow-y: auto; background: radial-gradient(120% 90% at 50% 0%, #12100a, #0a0906 60%); color: #efe9da; } .mp-wrap, .mp-table { max-width: 860px; margin: 0 auto; padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; } .mp-head, .mp-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .mp-head h2, .mp-code-tag { flex: 1; font-size: 18px; font-weight: 800; color: var(--gold, #e6c368); } .mp-code-tag { text-align: center; font-size: 14px; color: #cfc7b6; } .mp-bal { font-size: 13px; color: #9fe6b8; font-weight: 700; } .mp-back { background: #17130c; color: #efe9da; border: 1px solid #3a3220; border-radius: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; } .mp-create, .mp-join, .mp-rooms { background: rgba(20,16,9,.7); border: 1px solid #2a2416; border-radius: 14px; padding: 14px; margin-bottom: 14px; } .mp-create h3, .mp-join h3, .mp-rooms h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: 1px; color: #cfc7b6; } .mp-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; } .mp-row label { width: 120px; font-size: 13px; color: #b8b09c; } .mp-row input, .mp-row select { flex: 1; min-width: 90px; background: #0e0b06; color: #fff; border: 1px solid #3a3220; border-radius: 9px; padding: 9px 11px; font-size: 15px; } .mp-hint { width: 100%; font-size: 12px; color: #8a8470; } .mp-btn { background: linear-gradient(180deg, #2a2416, #1a160d); color: #f0e6c8; border: 1px solid #5a4a22; border-radius: 10px; padding: 9px 14px; font-size: 14px; font-weight: 700; cursor: pointer; } .mp-btn.primary { background: linear-gradient(180deg, #f4d97e, #c9a53c); color: #2a1e05; border-color: #f0d477; } .mp-btn.ghost { background: transparent; border-color: #3a3220; color: #cfc7b6; } .mp-btn:active { transform: scale(.96); } .mp-room-list { display: flex; flex-direction: column; gap: 8px; } .mp-room-row { display: flex; align-items: center; gap: 10px; background: #0e0b06; border: 1px solid #2a2416; border-radius: 11px; padding: 10px 12px; } .mp-room-info { flex: 1; display: flex; flex-direction: column; } .mp-room-info b { font-size: 15px; } .mp-room-info span { font-size: 12px; color: #9a927e; } .mp-empty { color: #8a8470; font-size: 13px; padding: 8px 2px; } /* --- room table --- */ .mp-felt { position: relative; background: radial-gradient(120% 130% at 50% 40%, #1c7a52, #0d4a33 65%, #08301f); border: 10px solid #241d12; border-radius: 26px; box-shadow: inset 0 0 60px rgba(0,0,0,.5); padding: 16px; min-height: 300px; } .mp-center { text-align: center; margin: 6px 0 16px; } .mp-board { display: flex; gap: 6px; justify-content: center; min-height: 62px; align-items: center; } .mp-preflop { color: #bfe8d2; letter-spacing: 3px; font-size: 13px; } .mp-pot { margin-top: 8px; color: #d9f2e4; font-size: 13px; } .mp-pot b { color: #ffe08a; font-size: 18px; margin-left: 6px; } .mp-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mp-seat { background: rgba(8,10,9,.7); border: 1.5px solid #34383f; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; justify-content: center; position: relative; } .mp-seat.you { border-color: var(--gold, #e6c368); box-shadow: 0 0 0 1px var(--gold, #e6c368), 0 0 18px rgba(230,195,104,.35); } .mp-seat.acting { border-color: #5fce86; box-shadow: 0 0 0 2px #5fce86, 0 0 20px rgba(95,206,134,.5); } .mp-seat.empty { cursor: pointer; border-style: dashed; color: #8fb0a0; } .mp-seat.empty:active { background: rgba(95,206,134,.12); } .mp-seat-plus { font-size: 24px; font-weight: 800; color: #5fce86; } .mp-cards { display: flex; gap: 3px; min-height: 34px; } .mp-name { font-size: 13px; font-weight: 700; color: #fff; text-align: center; } .mp-stack { font-size: 13px; color: #ffe08a; font-weight: 700; } .mp-bet { position: absolute; top: -10px; right: -6px; background: #c9a53c; color: #2a1e05; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 10px; } .mp-fold { color: #e0605b; font-size: 11px; } .mp-allin { color: #ff8a84; font-size: 11px; font-weight: 800; } .mp-out { color: #9a927e; font-size: 11px; } .mp-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 26px; height: 36px; background: #fbf7ee; color: #1a1a1a; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,.5); line-height: 1; } .mp-card b { font-size: 15px; font-weight: 800; } .mp-card i { font-size: 13px; font-style: normal; } .mp-card.red { color: #d4143a; } .mp-card.back { background: repeating-linear-gradient(45deg, #6a2230, #6a2230 4px, #8a3040 4px, #8a3040 8px); width: 26px; height: 36px; border-radius: 5px; } /* --- action bar --- */ .mp-actions { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px 0 4px; background: linear-gradient(180deg, transparent, #0a0906 30%); } .mp-act { flex: 1 1 90px; max-width: 160px; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 800; border: none; cursor: pointer; color: #fff; } .mp-act.fold { background: linear-gradient(180deg, #6d6d6d, #4a4a4a); } .mp-act.check { background: linear-gradient(180deg, #5a6472, #3c4450); } .mp-act.call { background: linear-gradient(180deg, #3f7bd6, #2b5aa6); } .mp-act.raise { background: linear-gradient(180deg, #e0554f, #b3352f); } .mp-raise { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 4px; } .mp-raise input[type=range] { flex: 1; max-width: 260px; } .mp-status { text-align: center; color: #bfe8d2; font-size: 13px; min-height: 20px; margin-top: 8px; } /* --- seat menu + invite popups --- */ .mp-menu, .mp-invite-pop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 800; padding: 18px; } .mp-menu-card, .mp-invite-box { background: #16130c; border: 1px solid #5a4a22; border-radius: 16px; padding: 18px; width: 320px; max-width: 92vw; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .mp-menu-card h4, .mp-invite-title { margin: 0 0 4px; color: var(--gold, #e6c368); font-size: 16px; text-align: center; } .mp-invite-sub { text-align: center; color: #cfc7b6; font-size: 14px; } .mp-invite-note { text-align: center; color: #b8b09c; font-size: 12px; } .mp-invite-row { display: flex; gap: 10px; margin-top: 6px; } .mp-invite-row .mp-btn { flex: 1; } .mp-invite-panel input, .mp-search-res .mp-btn { width: 100%; margin-top: 6px; box-sizing: border-box; } .mp-invite-panel input { background: #0e0b06; color: #fff; border: 1px solid #3a3220; border-radius: 9px; padding: 9px 11px; } .mp-search-res { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; margin-top: 6px; } @media (max-width: 560px) { .mp-seats { grid-template-columns: repeat(2, 1fr); } .mp-row label { width: 100%; } } /* MP: reuse the real game table — just a Leave button + tappable open seats */ .mp-leave-btn { position: fixed; top: 8px; left: 10px; z-index: 60; background: #17130c; color: #efe9da; border: 1px solid #5a4a22; border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.5); } .mp-leave-btn:active { transform: scale(.95); } #felt .seat.mp-open { z-index: 5; } #felt .seat.mp-open .mp-open-seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 74px; height: 74px; border-radius: 50%; border: 2px dashed #5fce86; background: rgba(20,40,30,.55); color: #7fe6a0; font-size: 30px; font-weight: 800; cursor: pointer; line-height: 1; } #felt .seat.mp-open .mp-open-seat small { font-size: 11px; font-weight: 700; letter-spacing: .5px; } #felt .seat.mp-open .mp-open-seat:active { transform: scale(.94); background: rgba(95,206,134,.2); } /* ===== live tournament schedule board (PokerAtlas-style flavor) ===== */ .tsched-hdr { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(230,195,104,.18); } .tsched-live { color: #ff6b6b; font-weight: 800; font-size: 13px; letter-spacing: .5px; } .tsched-clock { color: #cfc7b6; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .trow-status { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 2px 7px; border-radius: 6px; margin-left: 7px; vertical-align: middle; } .trow-status.reg { background: rgba(53,208,127,.18); color: #4fe08a; border: 1px solid rgba(53,208,127,.5); } .trow-status.run { background: rgba(63,123,214,.18); color: #6ea8f0; border: 1px solid rgba(63,123,214,.5); } .trow-status.soon { background: rgba(240,210,120,.18); color: #f0d278; border: 1px solid rgba(240,210,120,.5); } .trow-when { color: #f0d278; font-weight: 800; } .trow-count { color: #9fe0b8; font-weight: 700; } .trow.trow-livenow { box-shadow: inset 3px 0 0 #35d07f; } .trow.trow-livenow .trow-dot { background: #35d07f; box-shadow: 0 0 8px #35d07f; animation: tdot 1.4s ease-in-out infinite; } @keyframes tdot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ---- multiplayer lobby: center the column (parent .screen is flex, which left-shifts it) ---- */ #screen-mp.screen.active { display: block; } #screen-mp #mp-root { width: 100%; } .mp-wrap { max-width: 560px; } /* in-table "add chips" button, stacked under the Leave button */ .mp-addchips-btn { position: fixed; top: 48px; left: 10px; z-index: 60; background: #123020; color: #8fe6b0; border: 1px solid #2f7d4e; border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.5); } .mp-addchips-btn:active { transform: scale(.95); } /* tournament schedule: re-entry status + locked prize once reg closes */ .trow-prize { color: #f0d278; font-weight: 800; } .trow-reentry { color: #6ea8f0; font-weight: 700; } /* leaderboard "playing now" badge next to a player's name */ .rank-live { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; line-height: 1.4; background: rgba(53,208,127,.16); color: #5fe0a0; border: 1px solid rgba(53,208,127,.45); animation: rlpulse 1.8s ease-in-out infinite; } .rank-live.tournament { background: rgba(240,210,120,.16); color: #f0d278; border-color: rgba(240,210,120,.45); } .rank-live.mp { background: rgba(110,168,240,.16); color: #8fb8f2; border-color: rgba(110,168,240,.45); } @keyframes rlpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* my seat (and my hole cards) always on the top layer, so a neighbour's name plate can never cover my cards — matters most on narrow phone screens */ #felt .seat.me { z-index: 25; } #felt .seat.me .cards { z-index: 30 !important; } /* phones: hide the build-version chip (keep it on desktop) */ @media (max-width: 768px) { #build-ver { display: none; } }