:root{font-family:Inter,Arial,'Malgun Gothic',sans-serif;color:#e8eee9;background:#0c1614}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;background:#101f1b;border-bottom:1px solid #315044;padding:18px max(22px,calc((100vw - 1200px)/2));gap:15px}.brand{font-size:22px;font-weight:900;letter-spacing:2px;color:#e5c17d}.brand span{color:#fff}main{max-width:1200px;margin:auto;padding:30px 18px;min-height:calc(100vh - 140px)}h1{font-size:30px;margin:4px 0 10px}h3{margin:0 0 14px;color:#e8c889}p,.small{color:#aabeb5;font-size:13px;line-height:1.6}.panel{background:#172923;border:1px solid #345347;border-radius:15px;padding:22px;margin:14px 0}#login{max-width:430px;margin:8vh auto;text-align:center}input,select{background:#0d1c17;border:1px solid #496456;border-radius:8px;color:#fff;padding:12px;max-width:100%;margin:6px 0}#login>input:not([type=checkbox]){width:100%}button{cursor:pointer;border:0;background:#cda866;color:#122019;border-radius:8px;padding:11px 17px;font-weight:700;margin:5px}button:hover{filter:brightness(1.15)}button.ghost{background:#253e33;color:#d5e6d9}.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.tile{background:#1a3028;border:1px solid #385949;border-radius:14px;padding:20px;cursor:pointer}.tile:hover{border-color:#d6b479;transform:translateY(-2px)}.tile .mini{height:105px;background:radial-gradient(ellipse at center,#146047 0 50%,#9d7746 51% 54%,#0e2019 55%);border-radius:50%;margin:16px 0;display:flex;align-items:center;justify-content:center;color:#d9b878;font-weight:bold}.tag{float:right;color:#c6ac77;font-size:11px}.game-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:18px}.felt{height:500px;border-radius:46%;border:14px solid #755737;background:radial-gradient(ellipse,#196b4c,#10513c 75%,#083524);position:relative;box-shadow:0 0 0 8px #192a23,inset 0 0 30px #052c1c;margin:24px 0 35px}.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}.cards{display:flex;gap:5px;justify-content:center}.card{width:39px;height:55px;border-radius:5px;background:#fff;color:#171717;display:inline-flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 2px 4px #0005}.red{color:#c53035}.back{background:repeating-linear-gradient(45deg,#233b65,#233b65 4px,#b2c4e1 5px,#233b65 7px);border:2px solid white}.seat{position:absolute;transform:translate(-50%,-50%);background:#13241f;border:1px solid #53725d;padding:8px;border-radius:11px;min-width:116px;text-align:center;font-size:12px;box-shadow:0 4px 10px #0008}.seat.turn{border:2px solid #e7bd70}.seat.folded{opacity:.5}.seat .cards{margin:5px}.seat .card{width:26px;height:35px;font-size:12px}.seat b{display:block;white-space:nowrap}.seat em{color:#d8b87e;font-style:normal}.action-row{display:flex;flex-wrap:wrap;align-items:center}.action-row input{width:130px}#logs{font-size:12px;max-height:320px;overflow:auto;color:#b6cabf}#logs div{padding:7px 0;border-bottom:1px solid #345145}#preview{color:#e4ca9c;font-size:13px;line-height:1.8}#chipPlayer{width:100%}footer{text-align:center;padding:22px;color:#799184;font-size:11px}#identity{font-size:12px;color:#dfc18a}@media(max-width:800px){.game-layout{grid-template-columns:1fr}.felt{height:360px;border-width:8px;margin:35px 10px}.seat{min-width:80px;font-size:10px;padding:5px}.seat .card{width:20px;height:27px;font-size:10px}.card{width:29px;height:43px}.heading{flex-wrap:wrap}} /* Casino lobby polish and common service guide */ .tile{background:linear-gradient(155deg,#213b30,#10251e);box-shadow:0 12px 28px #0003;transition:transform .18s,border-color .18s} .tile .mini{box-shadow:inset 0 0 18px #0009,0 4px 18px #0004} .footer-link{background:none;color:#d7bd8c;text-decoration:underline;padding:0;margin:0;font-size:inherit} .guide-dialog{max-width:490px;width:calc(100% - 32px);background:#172923;color:#f3eee0;border:1px solid #97794c;border-radius:16px;padding:26px;box-shadow:0 24px 70px #0009} .guide-dialog::backdrop{background:#000b} .guide-dialog h2{margin-top:0;color:#e8c889} .guide-dialog p{font-size:14px;line-height:1.75} .footer-link{border:0;background:transparent;color:#cdb17b;text-decoration:underline;padding:2px 5px;font-size:11px}.footer-sep{padding:0 6px}.notice-overlay{position:fixed;inset:0;background:#020b08d9;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.notice-overlay[hidden]{display:none}.notice-dialog{position:relative;background:#182c25;border:1px solid #806a43;border-radius:18px;padding:32px;max-width:520px;width:100%;box-shadow:0 18px 60px #0009}.notice-dialog h2{color:#f1d49c;margin:6px 0 18px}.notice-dialog p{font-size:14px;color:#d1ded5}.notice-kicker{color:#c8a96b;font-size:11px;letter-spacing:3px;font-weight:800}.notice-close{position:absolute;right:14px;top:12px;background:transparent;color:#e4e8e0;font-size:18px} /* POKERJOY — dark gold casino visual system */ :root{--gold:#d9b875;--gold-bright:#f4dca6;--gold-dark:#94713d;--ink:#090e0d;--surface:#111a17;--line:#594b31;color:#f1ede3;background:radial-gradient(ellipse at 50% -20%,#243123 0%,#0b1210 50%,#080c0b 100%)} body{min-height:100vh;background:radial-gradient(ellipse at 80% 0%,#1b271e 0,transparent 40%)} header{background:#0c1210e8;border-bottom:1px solid #6d57352b;backdrop-filter:blur(16px);position:relative;z-index:5;padding-top:15px;padding-bottom:15px} .brand{font-family:Georgia,'Times New Roman',serif;font-size:23px;letter-spacing:2.4px;color:#f5dfb3;line-height:1}.brand>span:not(.brand-icon){color:#fff8e7}.brand .brand-icon{font-size:30px;vertical-align:middle;color:var(--gold)}.brand small{display:block;margin-left:43px;margin-top:7px;color:#988b70;font:8px Arial,sans-serif;letter-spacing:3px} main{max-width:1320px;padding-top:26px}.panel{background:linear-gradient(140deg,#19241e,#101915);border:1px solid #6653384d;box-shadow:0 16px 48px #0003}.panel h3{color:#f0d19a} button{background:linear-gradient(125deg,#f4dda6,#c29a59);color:#20190f;box-shadow:inset 0 1px #fff5;border-radius:7px;transition:transform .2s,filter .2s,box-shadow .2s}button:hover{transform:translateY(-2px);box-shadow:0 7px 25px #d6aa5c36}button.ghost{background:#ffffff09;color:#e8d7b5;border:1px solid #9b7a4b60;box-shadow:none}button.ghost:hover{background:#c5a05a20} .lobby-hero{position:relative;overflow:hidden;min-height:315px;display:flex;align-items:center;padding:45px clamp(22px,5vw,65px);border-radius:19px;border:1px solid #93734560;background:radial-gradient(ellipse at 75% 60%,#304335 0%,transparent 45%),linear-gradient(120deg,#101814 8%,#1d291f 70%,#0d1511);box-shadow:0 22px 75px #0006,inset 0 1px #f6db9824} .lobby-hero:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 70px,#c3a46807 71px 72px);pointer-events:none}.hero-copy{position:relative;z-index:2;max-width:620px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;color:#c9ab71}.hero-copy h1{font:clamp(40px,6vw,74px)/.98 Georgia,serif;letter-spacing:1px;color:#fff5e8;margin:20px 0}.hero-copy h1 em{font-style:normal;color:#dbb975}.hero-copy p{color:#c3c8bc;font-size:14px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-art{position:absolute;right:4%;top:5%;height:290px;width:36%;display:grid;place-items:center;opacity:.8}.hero-spade{font:230px Georgia,serif;color:#d8b36c;text-shadow:0 0 45px #e5c0753a;animation:spadeFloat 6s ease-in-out infinite}.hero-orbit{position:absolute;border:1px solid #b99a6155;border-radius:50%;width:250px;height:250px;transform:rotate(-25deg) scaleX(.75)}.orbit-two{width:310px;height:310px;transform:rotate(40deg) scaleX(.65);opacity:.5}.hero-spark{position:absolute;color:#e7c37d;font-size:26px;animation:twinkle 3s ease-in-out infinite}.spark-a{right:9%;top:12%}.spark-b{left:5%;bottom:10%;animation-delay:1.2s} .lobby-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:40px 0 20px}.lobby-toolbar h2{font:32px Georgia,serif;letter-spacing:1px;color:#f5e5c5;margin:8px 0 2px}.lobby-toolbar p{margin:0}.lobby-status{display:flex;align-items:center;gap:9px;color:#bcb8a7;font-size:12px}.live-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#80c9a2;box-shadow:0 0 0 3px #80c9a21b,0 0 11px #80c9a2a0;animation:liveGlow 2.5s ease-in-out infinite} .grid{grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px}.tile{position:relative;overflow:hidden;background:linear-gradient(155deg,#1b2921 0%,#101915 72%);border:1px solid #7b664438;border-radius:14px;padding:19px;min-height:305px;box-shadow:0 14px 35px #0004;animation:tileRise .5s both;animation-delay:calc(var(--tile-index)*60ms);transition:transform .25s,border-color .25s,box-shadow .25s}.tile:hover,.tile:focus-visible{transform:translateY(-5px);border-color:#d5ae69;box-shadow:0 20px 45px #0008,0 0 0 1px #b8955d30;outline:none}.tile.featured{border-color:#b493595e}.tile-top,.tile-meta,.tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.tile-index{color:#9e927a;font-size:10px;letter-spacing:2px;font-weight:800}.tile-status{color:#a4c6b0;font-size:10px;letter-spacing:1px;display:flex;align-items:center;gap:7px}.tile h3{font:21px Georgia,serif;letter-spacing:.5px;color:#f0dbb5;margin:17px 0 8px}.tile-meta{color:#8e9b8e;font-size:10px;letter-spacing:.5px}.tile-meta strong{color:#e7d4aa;font-size:12px}.tile-bottom{border-top:1px solid #bca16b25;padding-top:13px;margin-top:12px;color:#958c79;font-size:11px}.tile-enter{color:#e9c68a;font-weight:800}.tile-enter span{font-size:17px;margin-left:4px;transition:transform .2s;display:inline-block}.tile:hover .tile-enter span{transform:translate(3px,-3px)} .mini-table{height:148px;position:relative;display:grid;place-items:center;margin:4px 0 14px}.mini-rim{height:106px;width:220px;max-width:85%;border-radius:50%;padding:9px;background:linear-gradient(135deg,#a98a51,#50391e 40%,#dbb979 70%,#5c411f);box-shadow:0 9px 17px #000a,0 0 0 3px #080d0b}.mini-felt{width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse,#1d674b 0%,#104330 70%,#0c2a20 100%);border:2px solid #10271b;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 20px #0008}.mini-felt>span{font:35px Georgia,serif;color:#e7c47d2e}.mini-player{position:absolute;left:calc(50% + 42% * cos(360deg * var(--seat)/var(--total)));top:calc(50% + 43% * sin(360deg * var(--seat)/var(--total)));width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8dfb1,#997545);border:2px solid #101914;box-shadow:0 2px 7px #0009;animation:playerBreathe 3.4s ease-in-out infinite;animation-delay:calc(var(--seat)*-0.35s)}.mini-card{position:absolute;top:40%;left:47%;width:12px;height:17px;background:#f5f0e4;border-radius:2px;box-shadow:0 1px 3px #0007;transform:rotate(-12deg);animation:cardShimmer 5s ease-in-out infinite}.mini-card-b{left:54%;transform:rotate(13deg);animation-delay:.35s}.mini-chip{position:absolute;left:27%;top:45%;width:11px;height:11px;border:3px dashed #f3dcb0;background:#a03431;border-radius:50%;box-shadow:0 2px #541b19}.mini-chip-b{left:68%;top:50%;background:#224d83;border-color:#d5e6e7} .customize{margin:20px 0 24px;padding:0}.customize summary{cursor:pointer;padding:16px 20px;color:#dec18c;font-size:13px;font-weight:700;list-style:none}.customize summary::-webkit-details-marker{display:none}.customize summary:after{content:'⌄';float:right}.customize[open] summary:after{content:'⌃'}.customize summary span{font-weight:400;color:#9c9b8b;margin-left:8px}.customize-body{border-top:1px solid #67543c40;padding:18px 20px}.customize-body label{font-size:12px;color:#c5c5b6} .felt{border-color:#9c7a46;background:radial-gradient(ellipse at 50% 45%,#1b7655,#0e4a35 75%,#092c20);box-shadow:0 0 0 8px #1b1d15,0 18px 50px #0008,inset 0 0 42px #031f14}.felt-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e0c58c19;font:100px Georgia,serif;text-align:center;pointer-events:none}.felt-watermark small{display:block;font:9px Arial,sans-serif;letter-spacing:4px}.center{z-index:1}.center #pot{margin-top:12px;color:#f0d4a2;font-size:13px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 5px #000}.seat{border-color:#947b50;background:linear-gradient(#1b2a21,#101b17);box-shadow:0 5px 15px #0008}.seat.turn{border-color:#f5ce83;box-shadow:0 0 0 3px #e1ba6033,0 0 22px #e7c16a5a;animation:turnGlow 2s ease-in-out infinite}.card{box-shadow:0 3px 7px #0006;animation:dealCard .35s both}.cards.dealing .card{animation:dealCard .4s both}.cards.dealing .card:nth-child(2){animation-delay:.07s}.cards.dealing .card:nth-child(3){animation-delay:.14s}.cards.dealing .card:nth-child(4){animation-delay:.21s}.cards.dealing .card:nth-child(5){animation-delay:.28s}.table-fx{pointer-events:none;position:absolute;inset:0}.table-fx.chip-pulse:after{content:'●';color:#eac47b;position:absolute;left:50%;top:50%;font-size:24px;animation:chipPulse .6s both} #phase{color:#dfc084;font-size:12px;letter-spacing:1px}#logs div{border-bottom-color:#b4a07724}footer{border-top:1px solid #a58c5424;margin-top:40px;padding:28px} @keyframes spadeFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-13px) rotate(1deg)}}@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes liveGlow{50%{box-shadow:0 0 0 5px #80c9a210,0 0 17px #80c9a2}}@keyframes tileRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes playerBreathe{50%{filter:brightness(1.35)}}@keyframes cardShimmer{50%{filter:brightness(1.25)}}@keyframes dealCard{from{opacity:0;transform:translateY(-26px) rotate(-10deg) scale(.85)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes chipPulse{from{opacity:1;transform:translateY(-25px) scale(1.5)}to{opacity:0;transform:translateY(0) scale(.5)}}@keyframes turnGlow{50%{box-shadow:0 0 0 4px #e1ba6044,0 0 28px #e7c16a77}} @media(max-width:800px){.hero-art{opacity:.18;right:-5%;width:60%}.lobby-hero{min-height:285px}.lobby-toolbar{align-items:start;flex-direction:column}.lobby-status{flex-wrap:wrap}.mini-player{left:calc(50% + 39% * cos(360deg * var(--seat)/var(--total)))}.felt-watermark{font-size:60px}} @media(max-width:480px){.hero-copy h1{font-size:43px}.lobby-hero{padding:30px 23px}.hero-art{right:-30%}.grid{grid-template-columns:1fr}.tile{min-height:290px}.lobby-toolbar h2{font-size:28px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}} /* Real seat-to-pot and dealer-to-seat animation overlay */ .felt{isolation:isolate;overflow:visible} .flying-token{position:absolute;z-index:30;pointer-events:none;display:grid;place-items:center;will-change:transform,opacity;box-shadow:0 7px 15px #0009} .flying-card{width:26px;height:37px;border:2px solid #f4e8cf;border-radius:5px;background:repeating-linear-gradient(45deg,#243a5c 0 4px,#d5bc8d 5px 6px,#243a5c 7px 10px);color:#e9d9b7;font-size:16px} .flying-chip{width:25px;height:25px;border-radius:50%;background:radial-gradient(circle,#c89b50 0 34%,#482f1a 36% 45%,#e6d5b4 47% 54%,#a33530 56%);border:2px dashed #f7e6c3;box-shadow:0 3px 0 #6a2620,0 7px 12px #0009} @media(prefers-reduced-motion:reduce){.flying-token{display:none}} /* Stability fixes: hidden panels never occupy space; motion only on state change. */ [hidden]{display:none!important} .table-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #soundToggle{font-size:12px;padding:9px 12px} /* Seat and board cards must not replay their entrance animation on every poll. */ .seat .card{animation:none} #board:not(.dealing) .card{animation:none} /* Premium table upgrades: readable cards, betting stacks, dealer puck and timer */ .felt{height:540px} #board .card{width:61px;height:86px;font-size:23px} .seat{min-width:135px;z-index:4} .seat .card{width:41px;height:59px;font-size:16px} .card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffefa,#e6e1d7);border:1px solid #fff;box-shadow:0 4px 10px #0008;flex:none} .card-rank{position:absolute;top:4px;left:5px;line-height:1;font-family:Georgia,serif;font-weight:900;text-align:center;font-size:1em} .card-rank small{display:block;font-size:.85em;margin-top:2px} .card-pip{font-family:Georgia,serif;font-size:1.7em;line-height:1;margin-top:12px} .card.back{background:repeating-linear-gradient(45deg,#1d3453 0 5px,#b99a61 6px 7px,#1d3453 8px 12px);color:#e5c88f} .seat.premium-seat{border:2px solid #ffdb72;box-shadow:0 0 0 2px #ffd36d45,0 0 25px #f4bd4d88;animation:premiumGlow 2s ease-in-out infinite} .premium-label{display:block;color:#ffe2a0;font-weight:900;font-size:10px;letter-spacing:1px;text-shadow:0 0 9px #ffbd4d;margin:3px 0} @keyframes premiumGlow{50%{box-shadow:0 0 0 4px #ffd36d66,0 0 36px #ffcc66cc}} .table-decor{position:absolute;inset:0;pointer-events:none;z-index:3} .bet-stack{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;filter:drop-shadow(0 3px 4px #000a)} .bet-stack strong{font-size:12px;color:#fff0bc;background:#0c1815d9;border:1px solid #c49a4b;padding:2px 7px;border-radius:12px;white-space:nowrap} .chip-stack{position:relative;width:29px;height:29px;display:block} .chip-stack i{position:absolute;width:29px;height:29px;border-radius:50%;background:repeating-conic-gradient(#f4e4c5 0 15deg,#bd3b35 15deg 45deg);border:4px solid #b92c2d;box-shadow:inset 0 0 0 5px #b72b2b,0 2px 0 #6d1515,0 4px 0 #f2d9bd,0 6px 0 #6d1515} .chip-stack i:nth-child(1){top:6px}.chip-stack i:nth-child(2){top:3px}.chip-stack i:nth-child(3){top:0} .dealer-puck{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#ded8c8);border:4px solid #b99b5e;box-shadow:0 4px 8px #000b,inset 0 0 0 1px #fff;color:#27211b;font-size:9px;font-weight:900;display:grid;place-items:center} .turn-clock{min-width:140px;padding:6px 10px;background:#1a251e;border:1px solid #bb9457;border-radius:9px;text-align:center;color:#e8c788;font-size:11px} .turn-clock strong{font-size:18px;display:block;color:#fff1c6} .clock-track{height:5px;background:#3b3b30;border-radius:10px;overflow:hidden;margin-top:4px}.clock-track>div{height:100%;background:linear-gradient(90deg,#a67b39,#ffe29a);transition:width .12s linear} .turn-clock.urgent{border-color:#e65a50}.turn-clock.urgent strong{color:#ff7770}.turn-clock.urgent .clock-track>div{background:#e65a50} @media(max-width:800px){.felt{height:420px}#board .card{width:43px;height:61px;font-size:17px}.seat{min-width:94px}.seat .card{width:30px;height:43px;font-size:12px}.bet-stack strong{font-size:10px}.dealer-puck{width:35px;height:35px;font-size:7px}.chip-stack,.chip-stack i{width:21px;height:21px}} @media(prefers-reduced-motion:reduce){.seat.premium-seat{animation:none}} /* 3-second hands: readable personal cards, bankroll and per-player turn clock */ .felt{height:600px;margin-top:32px;margin-bottom:75px} .seat{min-width:160px;padding:9px 12px;overflow:visible} .seat.my-seat{min-width:190px;background:linear-gradient(150deg,#2d271b,#101b17);border-color:#d8b16a;z-index:8} .seat .cards{gap:5px;margin:7px 0 4px} .seat .card{width:53px;height:75px;font-size:20px;border-radius:8px} .seat.my-seat .card{width:69px;height:96px;font-size:26px;border-radius:9px} #board .card{width:69px;height:97px;font-size:26px;border-radius:8px} .seat .card-rank{top:5px;left:6px} .seat .card-pip{font-size:1.8em} .seat-bankroll{display:flex;align-items:center;justify-content:center;gap:6px;margin:5px 0 2px;color:#e8c98c} .seat-bankroll span{font-size:10px;font-weight:700;white-space:nowrap} .seat-bankroll strong{font-size:18px;font-weight:900;color:#ffe2a0;letter-spacing:.2px;text-shadow:0 2px 8px #000} .seat.my-seat .seat-bankroll strong{font-size:23px} .seat-bet{font-size:11px;color:#d1d6ca;font-weight:700} .seat-timer{position:absolute;right:-17px;top:-18px;z-index:10;width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:1px;background:radial-gradient(circle at center,#171d18 57%,transparent 59%),conic-gradient(#e7bc64 var(--clock-progress,100%),#4d493b 0);border:2px solid #edc46c;color:#ffe7b0;box-shadow:0 4px 14px #0009;font-weight:900} .seat-timer[hidden]{display:none!important} .seat-timer-value{font-size:19px;font-variant-numeric:tabular-nums} .seat-timer small{font-size:9px} .seat-timer.urgent{border-color:#f3695b;color:#ff8a7d;background:radial-gradient(circle at center,#211719 57%,transparent 59%),conic-gradient(#f3695b var(--clock-progress,100%),#4d3434 0)} @media(max-width:800px){.felt{height:470px;margin-bottom:85px}.seat{min-width:108px;padding:6px}.seat.my-seat{min-width:142px}.seat .card{width:35px;height:49px;font-size:14px}.seat.my-seat .card{width:48px;height:68px;font-size:18px}#board .card{width:46px;height:65px;font-size:18px}.seat-bankroll strong{font-size:14px}.seat.my-seat .seat-bankroll strong{font-size:17px}.seat-timer{width:38px;height:38px;right:-12px;top:-13px}.seat-timer-value{font-size:15px}} /* POKERJOY premium table visual refinement — presentation only */ @media (min-width: 1050px){ main{max-width:1580px} .game-layout{grid-template-columns:minmax(0, 2.35fr) minmax(310px, .95fr);gap:28px;align-items:start} .felt{height:clamp(590px,43vw,720px);margin:54px 18px 125px;border-width:15px;border-radius:46%;background:radial-gradient(ellipse at 46% 40%,#1d7857 0%,#126046 55%,#093d2e 100%);border-color:#b08a4e;box-shadow:0 0 0 8px #342716,0 0 0 12px #141711,0 24px 65px #000b,inset 0 0 75px #042b1c} .seat{min-width:194px;padding:12px 15px;border-radius:15px;background:linear-gradient(160deg,#24352c,#101c18 82%);border:1px solid #b3975b;box-shadow:0 12px 28px #000b, inset 0 1px #ffffff12} .seat.my-seat{min-width:230px;padding:14px 17px;background:linear-gradient(155deg,#342c1e,#14231c 75%)} .seat .card{width:67px;height:94px;font-size:25px;border-radius:10px} .seat.my-seat .card{width:83px;height:116px;font-size:31px;border-radius:11px} #board .card{width:76px;height:108px;font-size:29px;border-radius:10px} #board{gap:9px;white-space:nowrap} .seat-bankroll strong{font-size:24px}.seat.my-seat .seat-bankroll strong{font-size:28px} .seat-bankroll span{font-size:11px}.seat-bet{font-size:13px} .center{top:49%;z-index:2} .center #pot{display:inline-block;margin-top:18px;padding:9px 22px;background:linear-gradient(135deg,#192c22ef,#0a1713ef);border:1px solid #d3ab60;border-radius:999px;color:#ffe2a0;font-size:20px;letter-spacing:1.4px;box-shadow:0 8px 22px #0009,0 0 22px #d8aa4930} .chip-stack,.chip-stack i{width:36px;height:36px}.bet-stack strong{font-size:15px;padding:4px 11px} .dealer-puck{width:58px;height:58px;font-size:10px;border-width:5px} .seat-timer{width:58px;height:58px;right:-24px;top:-23px}.seat-timer-value{font-size:23px} .felt-watermark{opacity:.5} } @media (min-width: 801px) and (max-width:1049px){ .felt{height:570px;margin-bottom:105px} .seat.my-seat .card{width:73px;height:101px;font-size:27px} #board .card{width:62px;height:88px;font-size:23px} .center #pot{font-size:17px} } @media(max-width:800px){ .felt{margin-left:15px;margin-right:15px;margin-top:55px;margin-bottom:100px} .seat{border-radius:11px} .center #pot{font-size:15px;padding:5px 10px;background:#101f19df;border:1px solid #b8955d;border-radius:12px} .seat.my-seat .card{width:52px;height:73px;font-size:19px} } @media(max-width:480px){ .felt{height:400px;border-width:8px;margin-left:8px;margin-right:8px} .seat{min-width:100px;padding:5px} .seat.my-seat{min-width:135px} .seat .card{width:31px;height:44px;font-size:12px} .seat.my-seat .card{width:44px;height:62px;font-size:16px} #board .card{width:37px;height:53px;font-size:14px} #board{gap:3px} .seat-bankroll strong{font-size:13px} .seat.my-seat .seat-bankroll strong{font-size:16px} .dealer-puck{width:30px;height:30px;font-size:6px} } /* Screen-fit game view: preserve premium design while keeping action controls visible. */ @media (min-width: 1050px) { body:has(#game:not([hidden])) header {padding-top:7px;padding-bottom:7px} body:has(#game:not([hidden])) main {padding-top:7px;padding-bottom:4px;max-width:1580px} #game .heading {margin-bottom:3px;align-items:center} #game .heading h1 {font-size:clamp(19px,2vw,26px);margin:2px 0 2px} #game .heading p {margin:0;font-size:11px} #game .heading button {padding:5px 10px;margin:2px} #game .game-layout {gap:20px} #game .felt {height:clamp(310px,52vh,510px);margin:34px 12px 54px;border-width:11px} #game .seat {min-width:145px;padding:7px 9px;border-radius:12px} #game .seat.my-seat {min-width:175px;padding:8px 10px} #game .seat .card {width:47px;height:66px;font-size:18px} #game .seat.my-seat .card {width:59px;height:82px;font-size:23px} #game #board .card {width:clamp(43px,4vw,62px);height:clamp(61px,5.8vw,87px);font-size:22px} #game .seat-bankroll strong {font-size:18px} #game .seat.my-seat .seat-bankroll strong {font-size:21px} #game .seat-bankroll {margin:2px 0} #game .seat .cards {margin:4px 0 2px} #game .seat-bet {font-size:11px} #game .seat-timer {width:44px;height:44px;right:-17px;top:-16px} #game .seat-timer-value {font-size:18px} #game .dealer-puck {width:40px;height:40px;font-size:8px;border-width:3px} #game .chip-stack,#game .chip-stack i {width:27px;height:27px} #game .bet-stack strong {font-size:11px;padding:2px 6px} #game .center #pot {font-size:16px;padding:6px 15px;margin-top:10px} #game #actions {padding:9px 12px;margin:2px 0 5px} #game #actions h3 {font-size:14px;margin-bottom:3px} #game #actions button {padding:7px 10px;margin:3px} #game #actions input {padding:7px;margin:3px} #game #result {padding:8px 12px;margin:5px 0} #game aside .panel {padding:13px 15px;margin:5px 0 10px} #game aside #logs {max-height:min(30vh,230px)} body:has(#game:not([hidden])) footer {margin-top:5px;padding:7px} } @media (min-width:1050px) and (max-height:760px) { #game .felt {height:clamp(270px,46vh,390px);margin-top:27px;margin-bottom:44px} #game .seat .card {width:38px;height:54px;font-size:15px} #game .seat.my-seat .card {width:48px;height:67px;font-size:19px} #game .seat {min-width:128px;padding:5px 7px} #game .seat.my-seat {min-width:150px;padding:6px 8px} #game .seat-bankroll strong {font-size:16px} #game .seat.my-seat .seat-bankroll strong {font-size:18px} } /* Compact table layout with on-demand game records and settings */ #game .game-layout{grid-template-columns:minmax(0,1fr);gap:0} #game aside{display:none} #game:has(#masterPanel:not([hidden])) .game-layout{grid-template-columns:minmax(0,2.3fr) minmax(240px,.85fr);gap:16px} #game:has(#masterPanel:not([hidden])) aside{display:block} #game .felt{max-width:1100px;margin-left:auto!important;margin-right:auto!important} #game #actions,#game #result{max-width:1100px;margin-left:auto!important;margin-right:auto!important} #game .table-controls{gap:6px} #game .menu-btn{font-size:12px;padding:8px 12px} .game-menu-overlay{position:fixed;inset:0;z-index:1100;background:#020907d9;display:flex;align-items:center;justify-content:center;padding:18px} .game-menu-overlay[hidden]{display:none!important} .game-menu-dialog{width:min(650px,100%);max-height:min(78vh,720px);display:flex;flex-direction:column;min-height:180px;overflow:hidden;border:1px solid #bd965a;border-radius:18px;background:linear-gradient(155deg,#203128,#101a16);box-shadow:0 25px 90px #000c;padding:20px;color:#f3e9d2} .game-menu-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #aa875047;padding-bottom:10px;margin-bottom:15px} .game-menu-head h2{font-size:20px;color:#f3d69d;margin:0} .record-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px} .record-tabs button{font-size:12px;padding:8px 12px;background:#24372d;color:#e6d5b6;border:1px solid #96784d;margin:0} .record-tabs button.active{background:#e3bc76;color:#1c211a} #recordMenuContent{min-height:0;display:flex;flex-direction:column} #recordMenuContent[hidden],#settingsMenuContent[hidden]{display:none!important} .record-menu-list{min-height:90px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;border:1px solid #6d644a66;border-radius:10px;background:#0c1713;padding:8px 12px} .record-entry{font-size:13px;color:#d5dfd4;padding:10px 3px;border-bottom:1px solid #667b6040;overflow-wrap:anywhere} .record-entry:last-child{border-bottom:0} .record-empty{color:#aebeb2;text-align:center;padding:22px} #settingsMenuContent p{color:#e1d5b9} @media(max-width:800px){#game:has(#masterPanel:not([hidden])) .game-layout{grid-template-columns:1fr}#game .heading{gap:8px}.game-menu-dialog{padding:14px}.record-tabs button{padding:7px 9px}} /* Poker-table style live chat: compact and anchored at bottom left. */ #game .inline-chat{position:fixed;left:8px;bottom:64px;width:min(320px,calc(100vw - 16px));z-index:35;background:linear-gradient(180deg,#241719ee,#120e10f2);border:1px solid #82613f;border-radius:10px;padding:8px;box-shadow:0 8px 26px #0009;backdrop-filter:blur(8px)} #game .inline-chat[hidden]{display:none!important} .inline-chat-title{font-size:12px;color:#e8c98c;font-weight:800;display:flex;justify-content:space-between;margin-bottom:5px} #inlineChatStatus{color:#b6a58d;font-weight:400;font-size:10px} .inline-chat-messages{height:106px;overflow-y:auto;overscroll-behavior:contain;padding:4px 5px;background:#0b0b0b7a;border-radius:5px;font-size:12px;line-height:1.5;overflow-wrap:anywhere} .inline-chat-message{padding:2px 0;color:#f0e7dc}.inline-chat-message strong{color:#f0c46b}.inline-chat-empty{margin:0;color:#aa9e92} #inlineChatForm{display:flex;gap:4px;align-items:center;margin-top:5px} #inlineChatInput{flex:1;min-width:0;width:100%;height:34px;padding:6px 8px;margin:0;background:#140f11;border:1px solid #a28b72;color:#fff;font-size:12px} #inlineChatForm button{margin:0;padding:5px 10px;height:34px;font-size:15px} @media(max-width:800px){#game .inline-chat{width:min(260px,calc(100vw - 16px));bottom:48px}.inline-chat-messages{height:76px}} /* Hand history: card-sized visual summaries inside the existing record menu */ .history-hand{border:1px solid #8c734c75;border-radius:11px;background:#14251d;margin:8px 0;overflow:hidden} .history-hand summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px;color:#f5dca9;font-size:13px} .history-hand summary strong{color:#ffe0a0}.history-hand summary small{color:#a9b8aa;font-size:11px} .history-detail{border-top:1px solid #8c734c55;padding:12px;display:grid;gap:10px} .history-winner{font-size:13px;color:#f1d59a}.history-winner strong{color:#ffe3a1} .history-label{font-size:11px;color:#aebcb0;font-weight:700} .history-cards{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .history-cards .card{width:39px;height:54px;font-size:15px;border-radius:5px;animation:none!important} .history-cards .card-rank{top:3px;left:4px}.history-cards .card-pip{font-size:1.5em} .history-player{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff13;padding-top:8px;font-size:12px} .history-private{color:#a9b7ab;font-size:12px} @media(max-width:600px){.history-hand summary{flex-wrap:wrap}.history-player{align-items:flex-start;flex-direction:column}.history-cards .card{width:35px;height:49px}} /* Single large suit symbol on each face-up card; no duplicate suit in rank corner */ .card-rank small{display:none!important} .card-pip{font-size:2em;margin-top:10px} .history-cards .card-pip{font-size:1.8em;margin-top:8px} /* Larger community cards, without enlarging hole cards or history cards. */ #game #board .card{width:clamp(48px,4.7vw,74px);height:clamp(68px,6.65vw,104px);font-size:clamp(20px,1.8vw,27px)} @media(max-width:600px){#game #board .card{width:clamp(38px,10vw,51px);height:clamp(54px,14vw,72px);font-size:18px}} /* Opponent hole cards in history: two matching card backs, never reveal hidden data. */ .history-card-backs{display:inline-flex;gap:5px;align-items:center} .history-card-backs .card.back{color:#e8c783;background:repeating-linear-gradient(45deg,#182f53 0 5px,#b68d48 6px 7px,#182f53 8px 13px);border:2px solid #cba968;box-shadow:0 2px 5px #0008} /* 2026-10-30: Separate player identity/chips from hole cards, and clickable empty seats. */ #game #seats .seat{overflow:visible;min-width:142px;min-height:60px;padding:7px 9px;background:transparent!important;border:0!important;box-shadow:none!important;display:flex;align-items:center;flex-direction:column;gap:5px;isolation:isolate} #game #seats .seat .seat-info{min-width:142px;max-width:175px;padding:8px 12px;background:linear-gradient(160deg,#27342b,#111b17);border:1px solid #b39659;border-radius:12px;box-shadow:0 7px 20px #000a;white-space:nowrap} #game #seats .seat.my-seat .seat-info{border:2px solid #e7bd70;background:linear-gradient(155deg,#352b1b,#14231c)} #game #seats .seat.turn .seat-info{box-shadow:0 0 0 3px #e1ba6040,0 0 19px #e7c16a55} #game #seats .seat .seat-bankroll{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:4px} #game #seats .seat .seat-bankroll strong{font-size:19px;color:#f4d69a} #game #seats .seat.my-seat .seat-bankroll strong{font-size:21px} #game #seats .seat .seat-hole-cards{display:flex;position:relative;gap:5px;margin:0!important;padding:0;z-index:2;background:none;border:0;box-shadow:none} #game #seats .seat .seat-hole-cards .card{width:46px;height:65px;font-size:18px} #game #seats .seat.my-seat .seat-hole-cards .card{width:55px;height:76px;font-size:22px} #game #seats .seat .seat-timer{z-index:5;right:-10px;top:-10px} #game #seats .seat .seat-fold-label{font-size:10px;color:#e7b77c} #game #seats .empty-seat{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:74px;height:66px;margin:0;padding:4px;border:2px dashed #d2b071a8;border-radius:50%;background:#102d23c9;color:#f4d79c;box-shadow:0 0 12px #0007;font-weight:700;cursor:pointer} #game #seats .empty-seat span{font-size:22px;line-height:1} #game #seats .empty-seat small{font-size:11px} #game #seats button.empty-seat:hover{background:#275440;border-color:#ffe0a3;transform:translate(-50%,-50%) scale(1.08)} #game #seats .empty-seat-disabled{opacity:.55;cursor:default} #game .bet-stack{z-index:8;white-space:nowrap;pointer-events:none} #game .bet-stack strong{background:#14251f;border:1px solid #d5b06c;border-radius:999px;padding:2px 6px;color:#ffe1a4;font-size:12px;box-shadow:0 2px 8px #0009} @media(max-width:800px){#game #seats .seat .seat-info{min-width:96px;max-width:120px;padding:5px}#game #seats .seat .seat-bankroll strong{font-size:14px}#game #seats .seat.my-seat .seat-bankroll strong{font-size:16px}#game #seats .seat .seat-hole-cards .card{width:29px;height:42px;font-size:13px}#game #seats .seat.my-seat .seat-hole-cards .card{width:38px;height:54px;font-size:16px}#game #seats .empty-seat{width:55px;height:51px}#game #seats .empty-seat small{font-size:9px}} /* Premium dealer/blind medals; preserve standalone cards and action clock. */ #game #seats .seat .seat-info{position:relative;min-width:142px;padding:9px 15px 10px;border:1.5px solid #d0a45c;border-radius:15px;background:linear-gradient(155deg,#1d2922 0%,#0c1512 100%);box-shadow:inset 0 1px #f8dc9730,0 8px 22px #000b} #game #seats .seat .seat-info>b{display:block;overflow:hidden;text-overflow:ellipsis;max-width:170px;font-size:13px;color:#fff2d9;letter-spacing:.1px} #game #seats .seat .seat-bankroll strong{color:#ffe0a1;text-shadow:0 1px 6px #d2a65b40;font-variant-numeric:tabular-nums} #game #seats .seat .seat-role-badges{position:absolute;z-index:12;left:calc(100% - 9px);top:-7px;display:flex;align-items:center;gap:3px;pointer-events:none} #game #seats .seat .role-medal{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:50%;border:2px solid #ffe1a3;color:#ffe8b7;background:radial-gradient(circle at 35% 25%,#806137,#241b13 75%);font-size:11px;font-weight:900;letter-spacing:-.5px;box-shadow:0 0 0 2px #131e19,0 3px 9px #000c,inset 0 1px #fff5} #game #seats .seat .role-sb{background:radial-gradient(circle at 35% 25%,#358d9c,#153f56 78%);border-color:#80d9df;color:#f1ffff} #game #seats .seat .role-bb{background:radial-gradient(circle at 35% 25%,#637dd5,#1c315c 78%);border-color:#a8bfff;color:#fff} #game #seats .seat .role-dealer{background:radial-gradient(circle at 35% 25%,#b18b46,#3c2910 78%);border-color:#f5d27c;color:#fff0bd} #game #seats .seat .seat-timer{z-index:15;right:-22px;top:24px} #game #seats .seat .seat-hole-cards{margin-top:5px!important} #game .bet-stack{z-index:20} #game .bet-stack strong{font-size:14px;padding:4px 9px;background:#0d1a15;border:1.5px solid #d6b069;color:#ffdf96} @media(max-width:800px){#game #seats .seat .seat-info{min-width:96px;padding:6px 8px}#game #seats .seat .role-medal{width:23px;height:23px;font-size:9px}#game #seats .seat .seat-timer{right:-15px;top:16px}} /* 2026-10-30: Fix wager stack clipping / overlap at every seat orientation. Place wagers inside the felt, away from seat cards and role medals. */ #game .table-decor{overflow:visible!important;z-index:7;pointer-events:none} #game .bet-stack{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:78px;min-height:42px;padding:5px 9px 5px 6px;border:1px solid #b9985a9c;border-radius:999px;background:#0a2018ee;box-shadow:0 5px 15px #0009;filter:none;overflow:visible!important;transform:translate(-50%,-50%);z-index:9} #game .bet-stack .chip-stack{width:31px;height:31px;flex:0 0 31px;overflow:visible!important} #game .bet-stack .chip-stack i{width:27px;height:27px;left:2px} #game .bet-stack strong{font-size:13px!important;line-height:1.1;white-space:nowrap;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#ffe1a4} @media(max-width:800px){#game .bet-stack{min-width:60px;min-height:34px;padding:3px 6px;gap:4px}#game .bet-stack .chip-stack{width:23px;height:24px;flex-basis:23px}#game .bet-stack .chip-stack i{width:21px;height:21px;left:1px}#game .bet-stack strong{font-size:11px!important}} /* POKERJOY original 2026 character and betting upgrade */ #game .seat{background:transparent!important;border:0!important;box-shadow:none!important;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0!important;min-width:145px} #game .seat.my-seat{min-width:185px} #game .seat .avatar-wrap{position:relative;display:flex;justify-content:center;width:86px;height:77px;flex:none} #game .seat .seat-avatar{width:76px;height:76px;object-fit:cover;border-radius:50%;border:3px solid #cda761;box-shadow:0 4px 12px #0009;background:#172521} #game .seat.my-seat .seat-avatar{width:86px;height:86px;border-color:#f3d78d} #game .seat .player-action{position:absolute;z-index:19;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:99px;padding:3px 11px;font-weight:900;font-size:12px;color:#fff;background:#26658e;border:1px solid #72b6d8;box-shadow:0 3px 8px #0009} #game .seat .action-raise,#game .seat .action-allin{background:#9b6527;border-color:#edbf6c} #game .seat .action-fold{background:#555c59;border-color:#abb4ad} #game .seat.folded{opacity:1!important} #game .seat.folded .seat-avatar{opacity:.28;filter:grayscale(1)} #game .seat.folded .seat-info,#game .seat.folded .seat-hole-cards{opacity:.55;filter:grayscale(.9)} #game .seat.folded .seat-fold-label{display:none} #game .seat .seat-hole-cards .card{width:27px!important;height:39px!important;font-size:12px!important} #game .seat.my-seat .seat-hole-cards .card{width:56px!important;height:80px!important;font-size:22px!important} #game .seat .seat-info{padding:5px 10px!important;min-width:125px!important;max-width:180px} #game .seat.my-seat .seat-info{min-width:155px!important} #game .seat .seat-timer{right:-10px!important;top:55px!important} #game .seat .seat-role-badges{top:73px!important;left:calc(100% - 25px)!important} #game .seat .seat-bankroll{margin:0!important} #game .seat .seat-bankroll strong{font-size:17px!important} #game .seat.my-seat .seat-bankroll strong{font-size:21px!important} #game #actions{padding:12px 18px!important;border:1px solid #8f7448;border-radius:15px;background:#101b17} #game .bet-panel-head,#game .bet-slider-row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#dfcba5;font-size:12px} #game .bet-panel-head strong{color:#f0d39c;font-size:15px} #game .bet-slider-row strong{color:#ffe4a1;font-size:20px} #game #raiseAmount{width:100%;accent-color:#d9b16c;margin:9px 0;padding:0} #game .bet-presets{display:flex;justify-content:space-between;gap:7px} #game .bet-presets button{flex:1;padding:6px 5px;margin:0;font-size:11px} #game .bet-main-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr .6fr;gap:8px;margin-top:10px} #game .bet-main-actions button{margin:0;min-height:53px;font-size:16px;color:#fff;border:1px solid #fff3} #game .bet-main-actions button small{display:block;font-size:9px;opacity:.7} #game .bet-main-actions .bet-fold{background:#414b47} #game .bet-main-actions .bet-call{background:#18587a} #game .bet-main-actions .bet-raise{background:linear-gradient(120deg,#aa7d35,#e5bd65);color:#17170f} #game .bet-main-actions .bet-allin{background:#7a3332} #game .bet-main-actions button:disabled{opacity:.4;cursor:default} .club-settings h3{margin:18px 0 10px}.club-settings label{display:inline-flex;align-items:center;gap:4px;margin-right:20px;color:#eee} .setting-choices,.avatar-choices{display:flex;gap:10px;flex-wrap:wrap} .setting-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;background:#22362c;color:#e8dfc9;border:1px solid #806b4a} .setting-swatch i{display:block;width:38px;height:26px;border-radius:15px} .setting-swatch.selected,.avatar-choice.selected{outline:2px solid #f4d18a} .avatar-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .avatar-choice{background:#20362d;border:1px solid #9a8050;margin:0;padding:7px} .avatar-choice img{display:block;width:100%;max-width:95px;aspect-ratio:1;border-radius:50%} .avatar-confirm{width:100%;margin:18px 0 0} #felt[data-felt-theme="blue"]{background:radial-gradient(ellipse,#2679b2,#145184 75%,#092b4a)!important} #felt[data-felt-theme="red"]{background:radial-gradient(ellipse,#9a4555,#702c3a 75%,#3c1722)!important} #felt[data-felt-theme="black"]{background:radial-gradient(ellipse,#424b4e,#292e30 75%,#161b1d)!important} #felt[data-felt-theme="purple"]{background:radial-gradient(ellipse,#695196,#48336d 75%,#25193c)!important} body[data-card-theme="gold"] .card:not(.back){background:#26231d!important;color:#e8c781!important;border-color:#ae8a4d!important} body[data-card-theme="gold"] .card.red{color:#e6a765!important} body[data-card-theme="modern"] .card:not(.back){background:#f5f7fa!important;border-color:#c6d4e1!important} body[data-card-theme="royal"] .card:not(.back){background:#edf4ff!important;border-color:#a2bfe5!important} body[data-card-theme="gold"] .card.back{background:repeating-linear-gradient(45deg,#15171a 0 5px,#b89959 6px 7px,#15171a 8px 12px)} body[data-card-theme="modern"] .card.back{background:repeating-linear-gradient(45deg,#364e66 0 5px,#f1f5fb 6px 7px,#364e66 8px 12px)} body[data-card-theme="royal"] .card.back{background:repeating-linear-gradient(45deg,#143d86 0 5px,#b9d5ff 6px 7px,#143d86 8px 12px)} .card .royal-portrait{font-family:Georgia,serif;font-size:1.3em;line-height:1} @media(max-width:800px){#game .seat .seat-avatar{width:49px;height:49px}#game .seat .avatar-wrap{width:54px;height:50px}#game .seat.my-seat .seat-avatar{width:55px;height:55px}#game .seat .seat-info{min-width:92px!important;padding:4px!important}#game .seat.my-seat .seat-info{min-width:115px!important}#game .seat .seat-hole-cards .card{width:21px!important;height:30px!important;font-size:10px!important}#game .seat.my-seat .seat-hole-cards .card{width:39px!important;height:56px!important;font-size:16px!important}#game .seat .seat-role-badges{top:50px!important}#game .seat .seat-timer{top:38px!important}#game .bet-main-actions button{font-size:12px;min-height:44px}#game .bet-main-actions{gap:4px}} /* POKERJOY compact betting dock — approved reference proportions (2026-10-30). Layout-only: existing server-side betting rules and handlers remain unchanged. */ @media (min-width:1050px){ #game .game-layout{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:0!important} #game .game-layout>div:first-child{min-width:0} #game .felt{width:min(100%,1040px);height:clamp(320px,47vh,440px)!important;margin:32px auto 54px!important} #game #actions{width:min(690px,calc(100vw - 375px))!important;max-width:690px!important;margin:-1px max(12px,calc((100% - 1110px)/2)) 12px auto!important;padding:9px 12px!important;border-radius:9px!important;box-shadow:0 7px 24px #0008} #game .bet-panel-head{font-size:11px!important;line-height:1.25} #game .bet-panel-head strong{font-size:12px!important} #game .bet-slider-row{margin-top:2px;font-size:10px!important;line-height:1.2} #game .bet-slider-row strong{font-size:14px!important} #game #raiseAmount{height:13px;margin:4px 0!important;cursor:pointer} #game .bet-presets{gap:5px} #game .bet-presets button{padding:3px 5px!important;min-height:26px;font-size:10px!important} #game .bet-main-actions{grid-template-columns:1fr 1.15fr 1.45fr .66fr;gap:5px!important;margin-top:6px!important} #game .bet-main-actions button{min-height:40px!important;padding:5px 7px!important;font-size:13px!important;border-radius:6px} #game .bet-main-actions button small{font-size:8px!important} #game .inline-chat{left:12px!important;bottom:54px!important;width:290px!important} #game .inline-chat-messages{height:85px!important} } @media (min-width:1050px) and (max-width:1250px){ #game #actions{width:min(630px,calc(100vw - 325px))!important} #game .inline-chat{width:270px!important} } @media (max-width:1049px){ #game #actions{width:min(100%,680px);margin:0 auto 10px!important;padding:9px 10px!important} #game .bet-main-actions button{min-height:42px!important;font-size:12px!important} #game .bet-slider-row strong{font-size:15px!important} #game .bet-presets button{padding:4px!important} } /* Character-mounted countdown ring: keeps the existing clock badge and turn logic. */ #game #seats .seat .avatar-wrap{position:relative;isolation:isolate} #game #seats .seat.avatar-clock-active .avatar-wrap::before{ content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;pointer-events:none; background:conic-gradient(from 0deg,#f7d781 0deg,#e3a84a var(--avatar-clock-angle,360deg),#493a2b var(--avatar-clock-angle,360deg),#493a2b 360deg); box-shadow:0 0 11px #f5c66599,0 0 3px #ffdf99; } #game #seats .seat.avatar-clock-active .seat-avatar{position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 2px #151a16} #game #seats .seat.avatar-clock-urgent .avatar-wrap::before{ background:conic-gradient(from 0deg,#ff9b73 0deg,#ff3f37 var(--avatar-clock-angle,360deg),#49302e var(--avatar-clock-angle,360deg),#49302e 360deg); box-shadow:0 0 15px #ff554dba,0 0 4px #ff6d58; } #game #seats .seat.avatar-clock-critical .avatar-wrap::before{animation:avatarClockAlarm .42s ease-in-out infinite alternate} #game #seats .seat.avatar-clock-critical .seat-timer{animation:avatarClockAlarm .42s ease-in-out infinite alternate} @keyframes avatarClockAlarm{from{filter:brightness(1);opacity:.75}to{filter:brightness(1.6);opacity:1}} @media(prefers-reduced-motion:reduce){#game #seats .seat.avatar-clock-critical .avatar-wrap::before,#game #seats .seat.avatar-clock-critical .seat-timer{animation:none}} /* Fix: dock the compact betting controls to the far right, away from own hole cards. Desktop screenshots previously showed cards crossing the top edge of the controls. */ @media (min-width:1050px){ #game #actions{ width:min(690px,calc(100vw - 375px))!important; margin:-1px 18px 12px auto!important; position:relative; z-index:2; } } /* On narrower screens, let the panel flow below the cards with breathing room. */ @media (max-width:1049px){ #game #actions{margin:70px auto 12px!important;position:relative} } /* ===== 6-seat perimeter layout / single-screen desktop (2026-10-31) ===== Seats deliberately overhang the outer rail. The felt is NOT the seat container. */ @media (min-width:1050px){ html,body{width:100%;min-height:100%;overflow-x:hidden} body:has(#game:not([hidden])){height:100dvh;overflow-y:hidden} body:has(#game:not([hidden])) header{height:45px;min-height:45px;padding-top:3px;padding-bottom:3px} body:has(#game:not([hidden])) header .brand{font-size:19px} body:has(#game:not([hidden])) main{max-width:none;width:100%;height:calc(100dvh - 45px);min-height:0;padding:7px 22px 0;overflow:visible} body:has(#game:not([hidden])) footer{display:none} #game{height:100%;position:relative} #game .heading{max-width:1480px;margin:0 auto 2px;min-height:68px} #game .heading h1{font-size:23px;margin:2px 0} #game .game-layout{display:block!important;height:calc(100% - 72px);position:relative} #game .game-layout>div:first-child{height:100%;position:relative} #game .felt{width:min(82vw,1250px)!important;max-width:1250px!important;height:clamp(340px,52dvh,570px)!important;margin:70px auto 0!important;overflow:visible!important;position:relative} #game #seats{position:absolute;inset:0;overflow:visible!important;pointer-events:none} #game #seats .seat,#game #seats .empty-seat{pointer-events:auto} #game #seats .seat{width:140px!important;min-width:0!important;min-height:0!important;gap:1px!important;transform:translate(-50%,-50%);z-index:12} #game #seats .seat.my-seat{width:162px!important;z-index:16} #game #seats .seat .avatar-wrap{width:76px;height:75px} #game #seats .seat .seat-avatar{width:72px;height:72px} #game #seats .seat.my-seat .avatar-wrap{width:91px;height:90px} #game #seats .seat.my-seat .seat-avatar{width:88px;height:88px} #game #seats .seat .seat-info{width:130px;min-width:130px!important;padding:4px 7px!important} #game #seats .seat.my-seat .seat-info{width:156px;min-width:156px!important} #game #seats .seat .seat-info>b{font-size:12px} #game #seats .seat .seat-bankroll strong{font-size:16px!important} #game #seats .seat.my-seat .seat-bankroll strong{font-size:19px!important} #game #seats .seat .seat-hole-cards{position:absolute!important;top:24px;left:calc(100% - 7px);margin:0!important;gap:4px;white-space:nowrap} #game #seats .seat .seat-hole-cards .card{width:31px!important;height:44px!important;font-size:14px!important} #game #seats .seat.my-seat .seat-hole-cards{top:30px;left:calc(100% - 1px);gap:5px} #game #seats .seat.my-seat .seat-hole-cards .card{width:73px!important;height:103px!important;font-size:25px!important} #game #seats .seat.slot-1 .seat-hole-cards,#game #seats .seat.slot-2 .seat-hole-cards{left:auto;right:calc(100% - 7px)} #game #seats .seat.slot-1 .seat-hole-cards{top:24px} #game #seats .seat.slot-5 .seat-hole-cards{left:calc(100% - 7px)} #game #seats .seat .seat-role-badges{top:80px!important;left:calc(100% - 16px)!important} #game #seats .seat .seat-timer{top:55px!important;right:-13px!important} #game #seats .seat.my-seat .seat-timer{top:62px!important;right:-12px!important} #game #seats .empty-seat{width:68px;height:62px} #game #seats .empty-seat.slot-0{top:104%!important} #game #seats .empty-seat.slot-3{top:-7%!important} #game #actions{position:fixed!important;right:max(20px,calc((100vw - 1440px)/2))!important;bottom:15px!important;left:auto!important;top:auto!important;width:min(650px,calc(100vw - 390px))!important;max-width:650px!important;margin:0!important;z-index:30!important;padding:8px 11px!important} #game .inline-chat{position:fixed!important;bottom:15px!important;left:16px!important;width:270px!important;z-index:31} #game .inline-chat-messages{height:76px!important} #game #result{position:fixed;bottom:165px;right:24px;width:360px;max-height:90px;overflow:auto;z-index:25;padding:8px;margin:0!important} #game .seat .card-rank{font-size:1em} #game .seat .card-pip{font-size:1.8em} } @media (min-width:1050px) and (max-height:740px){ #game .felt{height:clamp(310px,48dvh,400px)!important;margin-top:55px!important} #game #seats .seat.my-seat .seat-hole-cards .card{width:62px!important;height:88px!important} #game #actions{bottom:9px!important} } /* Keep the enlarged personal hand entirely clear of the lower-right betting dock. */ @media (min-width:1050px){ #game #seats .seat.my-seat .seat-hole-cards{left:auto!important;right:calc(100% + 4px)!important;top:22px!important} #game #seats .seat.slot-2 .seat-hole-cards{right:calc(100% + 8px)!important} #game #seats .seat.slot-4 .seat-hole-cards{left:calc(100% + 8px)!important} } /* Approved six-player table: two top, two sides, two bottom. All nameplates and portraits overhang the rail. Own cards ALWAYS to the right. Do not alter server betting or the 15-second clock. */ @media (min-width:1050px){ #game .felt{ width:min(76vw,1110px)!important; height:clamp(330px,48dvh,490px)!important; margin:86px auto 0!important; } #game #seats .seat{width:124px!important;gap:0!important} #game #seats .seat.my-seat{width:140px!important} #game #seats .seat .avatar-wrap{width:78px!important;height:78px!important} #game #seats .seat .seat-avatar{width:76px!important;height:76px!important} #game #seats .seat.my-seat .avatar-wrap{width:104px!important;height:104px!important} #game #seats .seat.my-seat .seat-avatar{width:101px!important;height:101px!important} #game #seats .seat .seat-info{width:120px!important;min-width:120px!important;padding:4px 6px!important;border-radius:10px!important} #game #seats .seat.my-seat .seat-info{width:140px!important;min-width:140px!important} #game #seats .seat .seat-info>b{font-size:12px!important} #game #seats .seat .seat-bankroll strong{font-size:16px!important} #game #seats .seat.my-seat .seat-bankroll strong{font-size:20px!important} #game #seats .seat .seat-hole-cards{top:23px!important;left:calc(100% + 2px)!important;right:auto!important;gap:4px!important} #game #seats .seat .seat-hole-cards .card{width:34px!important;height:48px!important;font-size:15px!important} #game #seats .seat.my-seat .seat-hole-cards{top:34px!important;left:calc(100% + 5px)!important;right:auto!important;gap:5px!important} #game #seats .seat.my-seat .seat-hole-cards .card{width:82px!important;height:116px!important;font-size:27px!important} /* Side-right seats place their small backs to the left to stay inside viewport. */ #game #seats .seat.slot-4 .seat-hole-cards, #game #seats .seat.slot-5:not(.my-seat) .seat-hole-cards{left:auto!important;right:calc(100% + 2px)!important} #game #seats .seat .seat-role-badges{top:85px!important;left:calc(100% - 12px)!important} #game #seats .seat.my-seat .seat-role-badges{top:105px!important} #game #seats .seat .seat-timer{top:54px!important;right:-14px!important} #game #seats .seat.my-seat .seat-timer{top:79px!important;right:-14px!important} #game #actions{width:min(650px,calc(100vw - 385px))!important;bottom:14px!important;right:22px!important} #game .inline-chat{bottom:14px!important} } @media (min-width:1050px) and (max-height:780px){ #game .felt{height:clamp(300px,44dvh,390px)!important;margin-top:60px!important} #game #seats .seat.my-seat .seat-hole-cards .card{width:70px!important;height:99px!important} #game #actions{bottom:8px!important} } /* 2026-10-31: badges on the LEFT of every player; cards stay on the RIGHT. */ #game #seats .seat .seat-role-badges, #game #seats .seat.my-seat .seat-role-badges{ left:-36px!important;right:auto!important;top:77px!important; flex-direction:column!important;align-items:center!important;gap:3px!important; } #game #seats .seat .seat-timer, #game #seats .seat.my-seat .seat-timer{ left:-42px!important;right:auto!important;top:34px!important; } /* Keep the timer and role medals distinct even when both are shown. */ #game #seats .seat.avatar-clock-active .seat-role-badges{top:91px!important} @media (min-width:1050px){ /* Compact betting dock sits in the LOWER RIGHT, beneath the player's hand. */ #game #actions{ width:min(590px,calc(100vw - 405px))!important; max-width:590px!important; right:24px!important;bottom:9px!important; top:auto!important;left:auto!important; padding:7px 10px!important; } #game #actions .bet-main-actions button{min-height:38px!important} #game #actions .bet-panel-head{line-height:1.1!important} } @media (min-width:1050px) and (max-height:780px){ #game #actions{width:min(550px,calc(100vw - 405px))!important;bottom:5px!important} } @media (max-width:1049px){ #game #seats .seat .seat-role-badges,#game #seats .seat.my-seat .seat-role-badges{left:-24px!important;top:52px!important} #game #seats .seat .seat-timer,#game #seats .seat.my-seat .seat-timer{left:-27px!important;top:18px!important} } /* FINAL 6-SEAT ALIGNMENT — shared rules for every player, not just "my-seat". All medals and turn clocks on the LEFT; every player's hole cards on the RIGHT. The action dock is below the hero cards, in the lower-right free space. */ #game #seats .seat .seat-role-badges, #game #seats .seat.my-seat .seat-role-badges { position:absolute!important;left:-36px!important;right:auto!important;top:86px!important; display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important; z-index:18!important;pointer-events:none!important; } #game #seats .seat .seat-timer, #game #seats .seat.my-seat .seat-timer { position:absolute!important;left:-46px!important;right:auto!important;top:35px!important; z-index:19!important; } #game #seats .seat.avatar-clock-active .seat-role-badges {top:97px!important} @media (min-width:1050px){ #game #seats .seat .seat-hole-cards, #game #seats .seat.my-seat .seat-hole-cards, #game #seats .seat.slot-1 .seat-hole-cards, #game #seats .seat.slot-2 .seat-hole-cards, #game #seats .seat.slot-4 .seat-hole-cards, #game #seats .seat.slot-5:not(.my-seat) .seat-hole-cards { position:absolute!important;left:calc(100% + 7px)!important;right:auto!important;top:22px!important; } #game #seats .seat.my-seat .seat-hole-cards {top:32px!important} #game #actions { position:fixed!important;top:auto!important;bottom:16px!important; left:calc(50vw + 60px)!important;right:auto!important; width:min(590px,calc(50vw - 90px))!important;max-width:590px!important; box-sizing:border-box!important;margin:0!important;z-index:40!important; padding:7px 10px!important; } } @media (min-width:1050px) and (max-height:780px){ #game #actions {bottom:8px!important;left:calc(50vw + 45px)!important; width:min(570px,calc(50vw - 65px))!important} } @media (max-width:1049px){ #game #seats .seat .seat-role-badges,#game #seats .seat.my-seat .seat-role-badges{left:-27px!important;top:58px!important} #game #seats .seat .seat-timer,#game #seats .seat.my-seat .seat-timer{left:-31px!important;top:19px!important} } /* APPROVED 6-SEAT RING: one bottom-center hero + five balanced perimeter seats. Earlier incremental placement overrides are intentionally superseded here. */ @media (min-width:1050px){ #game #seats .seat.slot-1 .seat-hole-cards, #game #seats .seat.slot-2 .seat-hole-cards{ left:auto!important;right:calc(100% + 7px)!important;top:22px!important; } #game #seats .seat.slot-0.my-seat .seat-hole-cards{ left:calc(100% + 7px)!important;right:auto!important;top:32px!important; } #game #seats .seat.slot-3 .seat-hole-cards, #game #seats .seat.slot-4 .seat-hole-cards, #game #seats .seat.slot-5 .seat-hole-cards{ left:calc(100% + 7px)!important;right:auto!important;top:22px!important; } /* Keep the compact controls docked in the approved lower-right whitespace. */ #game #actions{right:24px!important;left:auto!important;width:min(590px,calc(50vw - 60px))!important} } /* Approved six-seat layout: only top-right toolbar changes. */ #game .heading{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important} #game .table-controls{margin-left:auto!important;justify-content:flex-end!important;flex-wrap:nowrap!important;gap:8px!important} #game #turnClock{display:none!important} @media(max-width:800px){#game .table-controls{gap:3px!important}#game .table-controls button{padding:5px 6px!important;font-size:10px!important}} /* SHOWDOWN ONLY — no changes to approved 6-seat coordinates or action bar. */ #game #seats .seat.showdown-reveal:not(.my-seat) .seat-hole-cards .card { width:70px!important;height:99px!important;font-size:25px!important; box-shadow:0 5px 17px #0009; /* Neutral reveal: only .showdown-gold may add a gold halo. */ /* Reveal at the final large size immediately; no small-card flip or scale. */ animation:none; } #game #seats .seat.showdown-reveal:not(.my-seat) .seat-hole-cards { z-index:30!important;gap:5px!important;top:20px!important; } /* Both showdown faces appear together at full size. */ #game #seats .seat.showdown-winner {z-index:35!important} #game #seats .seat.showdown-winner .avatar-wrap { border-radius:50%;box-shadow:0 0 0 3px #f8cf6c,0 0 22px 6px #f0bd4780!important; animation:hcWinnerGlow 1.1s ease-in-out infinite alternate; } #game #seats .seat .showdown-winner-badge { position:absolute;z-index:45;top:-46px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap; background:linear-gradient(140deg,#493415,#21180d);border:1px solid #f4cc72; border-radius:9px;padding:4px 10px;color:#ffdf83;box-shadow:0 4px 15px #000b; pointer-events:none;animation:hcWinnerEnter .5s ease-out both; } #game #seats .seat .showdown-winner-badge span{font-weight:900;font-size:13px;letter-spacing:1px} #game #seats .seat .showdown-winner-badge strong{font-size:12px;color:#fff4c6} @keyframes hcShowdownFlip {0%{transform:rotateY(88deg) scale(.72);opacity:.3}65%{transform:rotateY(-9deg) scale(1.06)}100%{transform:rotateY(0) scale(1);opacity:1}} @keyframes hcWinnerGlow {from{filter:brightness(1);box-shadow:0 0 0 3px #f8cf6c,0 0 12px 3px #f0bd4770}to{filter:brightness(1.16);box-shadow:0 0 0 4px #ffe8a6,0 0 26px 9px #f0bd4799}} @keyframes hcWinnerEnter{from{opacity:0;transform:translate(-50%,9px) scale(.85)}to{opacity:1;transform:translate(-50%,0) scale(1)}} @media(prefers-reduced-motion:reduce){#game #seats .seat.showdown-reveal .seat-hole-cards .card,#game #seats .seat.showdown-winner .avatar-wrap,#game #seats .seat .showdown-winner-badge{animation:none!important}} /* Left-side seats only: avatar left, hole cards right. Keep all other seats unchanged. */ @media (min-width:1050px){ #game #seats .seat.slot-1 .seat-hole-cards, #game #seats .seat.slot-2 .seat-hole-cards{ left:calc(100% + 7px)!important;right:auto!important;top:22px!important; } } /* Approved badge placement: overlap avatar LOWER LEFT, not the turn clock. Seat avatar is centered in the seat; anchor the badge to its bottom-left edge. */ #game #seats .seat .seat-role-badges, #game #seats .seat.my-seat .seat-role-badges, #game #seats .seat.avatar-clock-active .seat-role-badges { left:calc(50% - 46px)!important;right:auto!important;top:65px!important; display:flex!important;flex-direction:row!important;gap:0!important; z-index:21!important;pointer-events:none!important; } #game #seats .seat .seat-role-badges .role-medal {width:27px;height:27px;font-size:10px} @media(max-width:1049px){ #game #seats .seat .seat-role-badges, #game #seats .seat.my-seat .seat-role-badges, #game #seats .seat.avatar-clock-active .seat-role-badges {left:calc(50% - 33px)!important;top:48px!important} #game #seats .seat .seat-role-badges .role-medal {width:23px;height:23px;font-size:9px} } /* Final approved placement: medals overlap the lower-left AVATAR EDGE. The turn countdown is on the upper-left, and nameplates are below. */ #game #seats .seat .seat-role-badges, #game #seats .seat.my-seat .seat-role-badges, #game #seats .seat.avatar-clock-active .seat-role-badges{ left:calc(50% - 48px)!important; top:55px!important; right:auto!important; display:flex!important; flex-direction:row!important; gap:2px!important; z-index:23!important; } #game #seats .seat.my-seat .seat-role-badges, #game #seats .seat.my-seat.avatar-clock-active .seat-role-badges{ left:calc(50% - 61px)!important; top:81px!important; } #game #seats .seat .seat-role-badges .role-medal{ width:25px!important;height:25px!important;font-size:9px!important; } @media(max-width:1049px){ #game #seats .seat .seat-role-badges, #game #seats .seat.avatar-clock-active .seat-role-badges{left:calc(50% - 34px)!important;top:40px!important} #game #seats .seat.my-seat .seat-role-badges, #game #seats .seat.my-seat.avatar-clock-active .seat-role-badges{left:calc(50% - 37px)!important;top:45px!important} #game #seats .seat .seat-role-badges .role-medal{width:21px!important;height:21px!important;font-size:8px!important} } /* Showdown winner cards only: independent of seat and blinds positioning. */ #game .card.showdown-gold,#game #board .card.showdown-gold{border:3px solid #ffda68!important;box-shadow:0 0 0 1px #fff0ae,0 0 15px 4px #e6a52dbb,0 3px 7px #0008!important;animation:showdownGoldPulse 1.2s ease-in-out infinite alternate!important} @keyframes showdownGoldPulse{to{box-shadow:0 0 0 2px #fff0ae,0 0 25px 7px #f6c44cdd,0 3px 7px #0008}} #showdownHandName:not([hidden]){display:block;position:relative;margin-top:10px;color:#ffdc7b;font-weight:900;font-size:20px;letter-spacing:2px;text-shadow:0 2px 6px #000,0 0 14px #e6ad65;white-space:nowrap;pointer-events:none} #showdownHandName[hidden]{display:none!important} @media(prefers-reduced-motion:reduce){#game .card.showdown-gold{animation:none!important}} /* One face image is the only card interior in every context. */ .card > img.card-face {all:initial!important;position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;pointer-events:none!important;user-select:none!important;} .card:has(> .card-face){position:relative!important;overflow:hidden!important;padding:0!important;line-height:0!important;} /* Felt-level corner peel: the card body stays still. Only the upper-right tip lifts, exposing the actual, unmodified card face progressively. */ #game #board .card.board-flip-reveal{ position:relative!important;isolation:isolate; transform:none!important; animation:none!important; } #game #board .card.board-flip-reveal > .card-face{ opacity:1!important;animation:none!important; } /* The card back retracts along a diagonal crease from the grabbed corner. The face below is the original card image, never a substitute. */ #game #board .card.board-flip-reveal::after{ content:'♠';position:absolute;inset:0;z-index:2; display:grid;place-items:center;box-sizing:border-box; border:2px solid #e2c17c;border-radius:inherit; background:repeating-linear-gradient(45deg,#1d3453 0 5px,#b99a61 6px 7px,#1d3453 8px 12px); color:#e8ce95;font:700 24px Georgia,serif;pointer-events:none; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); animation:hcPeelBack .42s cubic-bezier(.3,.08,.2,1) both!important; } /* Only the bent triangular tip: pale face underside and crease shadow. The triangle grows toward the direction of the reveal, not away from it. */ #game #board .card.board-flip-reveal::before{ content:'';position:absolute;z-index:3;top:0;right:0; width:100%;height:100%;pointer-events:none; background:linear-gradient(137deg,#ffffff 0%,#f4f1e6 43%,#c2c4be 59%,#6a747a 70%,transparent 73%); clip-path:polygon(100% 0,100% 0,100% 0); filter:drop-shadow(-2px 3px 2px #0008); animation:hcPeelTip .42s cubic-bezier(.3,.08,.2,1) both!important; } @keyframes hcPeelBack{ 0%,13%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} 27%{clip-path:polygon(0 0,87% 0,100% 13%,100% 100%,0 100%)} 43%{clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)} 64%{clip-path:polygon(0 0,15% 0,100% 85%,100% 100%,0 100%)} 87%{clip-path:polygon(0 0,0 0,0 0,0 0,0 0)} 100%{opacity:0;clip-path:polygon(0 0,0 0,0 0,0 0,0 0)} } @keyframes hcPeelTip{ 0%,13%{opacity:0;clip-path:polygon(100% 0,100% 0,100% 0)} 27%{opacity:1;clip-path:polygon(87% 0,100% 0,100% 13%)} 43%{opacity:1;clip-path:polygon(60% 0,100% 0,100% 40%)} 64%{opacity:.92;clip-path:polygon(15% 0,100% 0,100% 85%)} 87%,100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%)} } /* River keeps the small corner pinched for a beat before the peel. */ #game #board .card.board-flip-reveal.board-river-reveal::after{ animation-name:hcRiverPeelBack!important;animation-duration:1.05s!important; } #game #board .card.board-flip-reveal.board-river-reveal::before{ animation-name:hcRiverPeelTip!important;animation-duration:1.05s!important; } @keyframes hcRiverPeelBack{ 0%,18%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} 27%,43%{clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,0 100%)} 56%{clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)} 75%{clip-path:polygon(0 0,15% 0,100% 85%,100% 100%,0 100%)} 93%,100%{opacity:0;clip-path:polygon(0 0,0 0,0 0,0 0,0 0)} } @keyframes hcRiverPeelTip{ 0%,18%{opacity:0;clip-path:polygon(100% 0,100% 0,100% 0)} 27%,43%{opacity:1;clip-path:polygon(88% 0,100% 0,100% 12%)} 56%{opacity:1;clip-path:polygon(60% 0,100% 0,100% 40%)} 75%{opacity:.92;clip-path:polygon(15% 0,100% 0,100% 85%)} 93%,100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%)} } @media(prefers-reduced-motion:reduce){ #game #board .card.board-flip-reveal::before, #game #board .card.board-flip-reveal::after{display:none!important} } /* JS-controlled corner reveal: a single timeline, no competing CSS peel. Keep the actual card face hidden behind the full back until the crease advances. */ #game #board .card.board-flip-reveal::before, #game #board .card.board-flip-reveal::after{display:none!important;animation:none!important} #game #board .card.board-flip-reveal > .board-curl-layer{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; display:block!important;z-index:5!important;pointer-events:none!important; overflow:visible!important; } /* All-in opponents use the approved showdown card dimensions without changing seat positions. */ #game #seats .seat.allin-reveal:not(.my-seat) .seat-hole-cards .card { width:70px!important;height:99px!important;font-size:25px!important; } #game #seats .seat.allin-reveal:not(.my-seat) .seat-hole-cards { z-index:30!important;gap:5px!important;top:20px!important; } /* GOLD & BLACK PRIVATE LOUNGE — visual-only skin; retain approved seat geometry. */ :root{--gold:#d5ad60;--gold-bright:#ffdf97;--gold-dark:#76501e;--ink:#090807;--surface:#15110e;--line:#a17b42;color:#f4e8cf;background:#080807} body{background:radial-gradient(ellipse at 50% -15%,#382718 0%,#130f0b 34%,#070707 78%)!important;color:#f5ead5} body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 145px,#c99b3d08 146px 148px),radial-gradient(circle at 80% 5%,#bd7b2630,transparent 35%)} header{background:linear-gradient(90deg,#090909f5,#1c140ef5,#090909f5)!important;border-bottom:1px solid #b98a3d69;box-shadow:0 6px 30px #000b} .brand{font-family:Georgia,serif;letter-spacing:3px;color:#e9c783!important;text-shadow:0 1px 12px #aa742455} .brand span{color:#ffe5a8!important} .panel,.tile,.game-menu-dialog,.notice-dialog,.guide-dialog{background:linear-gradient(155deg,#221910,#0e0c0b 75%)!important;border-color:#b18b4d88!important;box-shadow:0 12px 34px #0008,inset 0 1px #ffe4a310} button:not(.ghost){background:linear-gradient(125deg,#ffe4a2,#b88434)!important;color:#241709!important} button.ghost{background:linear-gradient(#261e16,#100e0b)!important;color:#f3d99f!important;border-color:#9d743f!important} input,select{background:#15110e!important;border-color:#96713d!important;color:#f5e6cb!important} .lobby-hero{background:radial-gradient(ellipse at 72% 48%,#62401f 0%,transparent 45%),linear-gradient(120deg,#090807,#24180e 70%,#0b0908)!important;border-color:#b48b4e!important} .lobby-hero::before{background:repeating-linear-gradient(115deg,transparent 0 70px,#d3a3530b 71px 72px)!important} .hero-spade{color:#eac074!important;text-shadow:0 0 75px #db9d4670!important} .tile,.customize{border-color:#a87c4366!important} .mini-felt{background:radial-gradient(ellipse,#443326 0%,#211810 70%,#100e0b 100%)!important;border-color:#b48b4e!important} /* Approved six-seat positions, card sizes and board animations are untouched. */ #game .felt{background:radial-gradient(ellipse at 45% 38%,#443126 0%,#2b2019 45%,#100e0c 100%)!important;border-color:#c7a05a!important;box-shadow:0 0 0 3px #ffe0a383,0 0 0 9px #2c1a0b,0 0 0 14px #0b0907,0 23px 55px #000d,inset 0 0 65px #000b,inset 0 0 0 3px #6e4c27!important} #game .felt::before{content:'';position:absolute;inset:8px;border:1px solid #e0b96a48;border-radius:inherit;pointer-events:none} #game .felt-watermark{color:#b98d4d25!important} #game .felt-watermark small{color:#d9b16e6e!important} #game .center #pot{background:linear-gradient(#21170eef,#080807f2)!important;border-color:#e1b75f!important;color:#ffe6a5!important;box-shadow:0 4px 17px #000b,0 0 18px #c18b2c22!important} #game #seats .seat .seat-avatar{border-color:#e2b96d!important;box-shadow:0 0 0 3px #1a110a,0 5px 18px #000c!important;background:#1b1511!important} #game #seats .seat.my-seat .seat-avatar{border-color:#ffe2a1!important} #game #seats .seat .seat-info{background:linear-gradient(160deg,#24190ff5,#080808f5)!important;border-color:#c89d54!important;box-shadow:0 7px 17px #000b,inset 0 1px #ffe3a31f!important} #game .bet-stack{background:linear-gradient(#241a11ee,#090807f5)!important;border-color:#d5a85a!important} #game .bet-stack strong{color:#ffe0a1!important} #game .bet-main-actions .bet-call{background:linear-gradient(#385270,#17243b)!important;color:#fff!important} #game .bet-main-actions .bet-fold{background:linear-gradient(#57514b,#28221d)!important;color:#fff!important} #game .bet-main-actions .bet-allin{background:linear-gradient(#a44943,#541e1c)!important;color:#fff!important} #game #actions{background:linear-gradient(150deg,#20170e,#0d0b09)!important;border-color:#b88d4a!important} #game .table-controls button{border-color:#a77b40!important} #game .inline-chat{background:linear-gradient(#23180ef0,#0b0908f5)!important;border-color:#a87b43!important} /* Do not tint or rescale the face artwork, deal cards, showdown effects or folded state. */ /* Private table invite action */ #inviteTableButton{white-space:nowrap;border-color:#cba75b;color:#f5d999} /* Pot-based bet sizing: compact exact-entry field and six presets. */ #game .bet-exact-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0;color:#dfcba5;font-size:12px} #game .bet-exact-row input{width:125px;max-width:45%;padding:5px 8px;background:#12120f;color:#ffe4a1;border:1px solid #9d7938;border-radius:7px;font:inherit;font-size:14px} #game .bet-presets{flex-wrap:wrap;justify-content:center} #game .bet-presets button{flex:1 1 27%;min-width:0} /* Victory glow is payout-only. Legacy premium-seat glow is disabled. */ #game #seats .seat.premium-seat:not(.showdown-winner){animation:none!important;box-shadow:none!important;border-color:transparent!important} /* 2026-11-01: settings swatches override the final brown table rule above. Match the live game's #game .felt specificity and preserve the gold rim. */ #game #felt[data-felt-theme="brown"]{background:radial-gradient(ellipse at 45% 38%,#443126 0%,#2b2019 45%,#100e0c 100%)!important} #game #felt[data-felt-theme="green"]{background:radial-gradient(ellipse at 45% 38%,#31614b 0%,#234537 55%,#10251e 100%)!important} #game #felt[data-felt-theme="blue"]{background:radial-gradient(ellipse at 45% 38%,#36566c 0%,#243e50 55%,#111f2b 100%)!important} #game #felt[data-felt-theme="red"]{background:radial-gradient(ellipse at 45% 38%,#6d3b40 0%,#4c282d 55%,#28171b 100%)!important} #game #felt[data-felt-theme="black"]{background:radial-gradient(ellipse at 45% 38%,#414042 0%,#2b2b2d 55%,#161618 100%)!important} #game #felt[data-felt-theme="purple"]{background:radial-gradient(ellipse at 45% 38%,#55435e 0%,#3b2c46 55%,#211923 100%)!important} /* Flat illustrated chip stacks: same stylization as the existing avatars/table. */ #game .bet-stack .chip-stack i{background:#29231d!important;border:2px solid #c8a65d!important;box-shadow:inset 0 0 0 2px #473624,0 2px 0 #9c783d,0 3px 0 #231b13!important} #game .bet-stack .chip-stack i:nth-child(3)::after{content:'♠';position:absolute;inset:0;display:grid;place-items:center;color:#e7c783;font:700 14px Georgia,serif;line-height:1} #game .bet-stack{background:#17100ce8!important;border-color:#b38c50a8!important} @media(max-width:800px){#game .bet-stack .chip-stack i:nth-child(3)::after{font-size:11px}} /* MASTER VIEW: only the authenticated master sees pre-dealt future cards. Normal mode and existing showdown dimensions are untouched. */ #game.master-view #board .card, #game.master-view #board .master-empty-card { border:2px solid #e43b35!important;box-shadow:0 0 0 1px #a71f1c,0 0 9px #e43b3560!important; } #game.master-view #board .master-empty-card { display:inline-block;flex:none;width:clamp(48px,4.7vw,74px);height:clamp(68px,6.65vw,104px); border-radius:8px;background:transparent; } #game.master-view #seats .seat.master-reveal .seat-hole-cards .card { width:70px!important;height:99px!important;font-size:25px!important; border:2px solid #e43b35!important;box-shadow:0 0 0 1px #a71f1c,0 0 8px #e43b3550!important; animation:none!important; } #game.master-view #seats .seat.master-reveal .seat-hole-cards {z-index:30!important;gap:5px!important;top:20px!important} @media(max-width:800px){ #game.master-view #seats .seat.master-reveal .seat-hole-cards .card{width:44px!important;height:62px!important;font-size:18px!important} #game.master-view #board .master-empty-card{width:clamp(38px,10vw,51px);height:clamp(54px,14vw,72px)} } /* Master-only learning panel */ .study-panel{display:grid;gap:10px;font-size:13px}.study-street,.study-final,.study-player,.study-stage{padding:10px;border:1px solid rgba(201,159,84,.45);border-radius:9px;background:rgba(0,0,0,.18)}.study-street strong{color:#e8bf70;font-size:18px;margin-left:8px}.study-street small{display:block;opacity:.7}.study-cards,.study-player>div{display:flex;gap:4px;flex-wrap:wrap;margin:5px 0}.study-card{display:inline-flex;align-items:center;justify-content:center;background:#f5f0e6;color:#161616;border:1px solid #ae413a;border-radius:5px;min-width:31px;height:43px;font-size:16px;font-weight:bold}.study-final strong{color:#f2c675}.study-final small,.study-player small{display:block;opacity:.8;margin-top:5px}.study-stage{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.study-stage span{color:#dcb46d}.study-stage small{opacity:.7}.study-panel h4{margin:8px 0 0} /* Always-visible master study information; never shown to ordinary players. */ /* Master-only visual learning overlay; never use payout/winner gold classes. */ #game.master-view .seat.master-predicted-winner .seat-avatar{outline:4px solid #b57cff!important;outline-offset:3px;box-shadow:0 0 0 7px #51287970,0 0 22px #a86dff!important} #game.master-view .seat.master-predicted-winner .seat-hole-cards .card{outline:3px solid #a76bff!important;outline-offset:1px;filter:drop-shadow(0 0 5px #a56cff88)} #game.master-view .seat.master-predicted-winner .seat-info{border-color:#b57cff!important;box-shadow:0 0 0 2px #9d66ee80,0 0 15px #9d66ee70!important} #game .master-prediction-crown{position:absolute;top:-21px;left:50%;transform:translateX(-50%);z-index:9;display:grid;place-items:center;width:33px;height:29px;border:2px solid #c39bff;border-radius:50%;background:#341c51;color:#f5e5ff;font-size:23px;font-weight:900;box-shadow:0 0 15px #a86dff;pointer-events:none} #game .master-prediction-summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center} #game .master-prediction-name{padding:5px 12px;border:2px solid #b57cff;border-radius:8px;background:#3b2058;color:#fff;font-size:15px;box-shadow:0 0 12px #ab70f877} #game .master-reversal{font-size:11px;color:#8cc8ff} #game:not(.master-view) .master-prediction-crown{display:none!important} /* Master study: future community cards remain legible but translucent until dealt. */ #game.master-view #board .master-board-slot{display:inline-flex;align-items:center;justify-content:center;flex:none;position:relative;} #game.master-view #board .master-board-slot.is-revealed{opacity:1;} #game.master-view #board .master-board-slot.is-future{opacity:.27;} #game.master-view #board .master-board-slot .card{flex:none;} /* Room entry and host-only first hand start */ #entryOverlay{z-index:1200}#entryOverlay .game-menu-dialog{max-width:470px}#entryNickname{display:block;width:100%;box-sizing:border-box;margin:12px 0 18px;padding:12px;border:1px solid #9e7d46;border-radius:8px;background:#15100d;color:#fff}#entryAvatars{margin:12px 0 18px}.host-waiting{margin:12px auto;padding:13px;text-align:center;max-width:520px;border:1px solid #876a36;border-radius:12px;color:#e0c38b;background:#17110b}.host-start{display:block;margin:10px auto;padding:13px 42px;background:linear-gradient(#e9c47c,#bd8a3a);color:#211407;font-weight:800;border:1px solid #f5d58d;border-radius:9px;cursor:pointer}.host-start:disabled{opacity:.45;cursor:not-allowed}.host-start[hidden],.host-waiting[hidden]{display:none!important} /* Seat management: keep the control outside the felt and clear of avatars. */ .stand-up{display:block;margin:14px auto 6px;padding:9px 20px;border:1px solid #9a7841;border-radius:9px;background:#17120e;color:#e2c58f;cursor:pointer;font-weight:600}.stand-up:hover{background:#2c2116}.stand-up:disabled{opacity:.55;cursor:default}.stand-up[hidden]{display:none!important} /* Waiting state: overlay positions approved on the real table screenshot. */ #game #felt > #hostWaiting {position:absolute;left:50%;top:17%;transform:translateX(-50%);z-index:20;width:min(360px,62%);max-width:none;margin:0;padding:15px 22px;display:flex;flex-direction:column;align-items:center;gap:7px;background:linear-gradient(135deg,#211a12f5,#100f0cf5);border:1px solid #b18c4e;border-radius:13px;box-shadow:0 10px 30px #0008;color:#e9d09d;text-align:center;pointer-events:none} #game #felt > #hostWaiting strong{font-size:19px;color:#f3d38d} #game #felt > #hostWaiting span{font-size:12px} #game #felt > #hostStart {position:absolute;left:50%;top:72%;transform:translateX(-50%);z-index:21;display:block;width:200px;max-width:50%;margin:0;padding:13px 22px;border-radius:12px;font-size:16px;box-shadow:0 4px 18px #0008,0 0 20px #d3a74e44} #game #felt > #hostStart:hover{transform:translateX(-50%);filter:brightness(1.12)} #game #felt > #hostStart[hidden],#game #felt > #hostWaiting[hidden]{display:none!important} #game .table-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end} #game .table-controls #standUp[hidden]{display:none!important} #game .table-controls #standUp{margin:5px} @media(max-width:700px){#game #felt > #hostWaiting{top:20%;width:min(300px,70%);padding:10px}#game #felt > #hostWaiting strong{font-size:15px}#game #felt > #hostStart{top:74%;font-size:13px;width:150px;padding:10px}} .room-create-dialog{display:flex;flex-direction:column;gap:12px;max-width:460px}.room-create-dialog input,.room-create-dialog select{width:100%;padding:12px;background:#1a1815;color:#f8e6c7;border:1px solid #8c744a;border-radius:8px}.room-create-dialog label{font-weight:600}.room-create-dialog [hidden]{display:none!important}.lobby-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .room-create-dialog{max-height:88vh;overflow-y:auto;width:min(520px,95vw)}.room-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.room-setting-grid label{display:flex;flex-direction:column;gap:6px}.room-setting-grid input,.room-setting-grid select{width:100%;box-sizing:border-box}.room-check{display:flex;align-items:center;gap:8px;margin:12px 0} /* Showdown defeat is independent of chip balance: zero-chip all-in losers remain seated. */ #game #seats .seat.showdown-defeated .avatar-wrap{filter:grayscale(.85) brightness(.67);animation:hcDefeatDrop .7s ease-out both;} #game #seats .seat.showdown-defeated .seat-hole-cards{opacity:.65;filter:saturate(.55);} #game #seats .seat .showdown-defeat-badge{position:absolute;z-index:46;left:50%;top:-43px;transform:translateX(-50%);background:linear-gradient(145deg,#4d2227,#251417);color:#ffd5d5;border:1px solid #b96b72;border-radius:9px;padding:4px 10px;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 4px 12px #0009;pointer-events:none;} @keyframes hcDefeatDrop{0%{transform:translateY(0) scale(1);opacity:1}55%{transform:translateY(8px) scale(.92);opacity:.7}100%{transform:translateY(5px) scale(.94);opacity:1}} @media(prefers-reduced-motion:reduce){#game #seats .seat.showdown-defeated .avatar-wrap{animation:none!important;transform:none!important}} /* Countdown badge: decimal seconds must fit fully inside the circular border. */ #game #seats .seat .seat-timer, #game #seats .seat.my-seat .seat-timer { box-sizing:border-box!important; width:48px!important;height:48px!important; min-width:48px!important;min-height:48px!important; padding:0 3px!important;gap:0!important; align-items:center!important;justify-content:center!important; overflow:hidden!important;white-space:nowrap!important; } #game #seats .seat .seat-timer-value { display:block!important;flex:none!important; font-size:14px!important;line-height:1!important; font-weight:900!important;letter-spacing:-0.5px!important; font-variant-numeric:tabular-nums!important; } #game #seats .seat .seat-timer small {display:none!important} @media(max-width:800px){ #game #seats .seat .seat-timer, #game #seats .seat.my-seat .seat-timer{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important} #game #seats .seat .seat-timer-value{font-size:12px!important;letter-spacing:-0.5px!important} } /* Shared whole-second timer (20초) for live play and bot spectators. */ /* Revealed right-side cards stay inside the viewport; approved seat coordinates remain. */ @media(min-width:1050px){ #game #seats .seat.slot-4.showdown-reveal .seat-hole-cards, #game #seats .seat.slot-5.showdown-reveal .seat-hole-cards, #game #seats .seat.slot-4.allin-reveal .seat-hole-cards, #game #seats .seat.slot-5.allin-reveal .seat-hole-cards{left:auto!important;right:calc(100% + 7px)!important} } /* Narrow-screen containment: same six-seat ring, with room for labels and controls. */ @media(max-width:1049px){ #game .table-controls{flex-wrap:wrap!important} #game #felt{margin-top:115px!important;margin-bottom:180px!important} #game #seats .perimeter-slot.slot-1,#game #seats .perimeter-slot.slot-2{left:14%!important} #game #seats .perimeter-slot.slot-4,#game #seats .perimeter-slot.slot-5{left:86%!important} #game #seats .seat{min-width:0!important;width:96px!important} #game #seats .seat .seat-info,#game #seats .seat.my-seat .seat-info{min-width:0!important;width:96px!important;max-width:96px!important} #game #seats .seat .seat-info b{max-width:100%;overflow:hidden;text-overflow:ellipsis} #game #seats .seat .seat-timer,#game #seats .seat.my-seat .seat-timer{left:-3px!important;top:14px!important} #game #seats .seat .seat-hole-cards,#game #seats .seat.my-seat .seat-hole-cards{position:absolute!important;left:50%!important;right:auto!important;top:100%!important;transform:translateX(-50%);margin:5px 0!important} /* Keep opponent cards full-size when their faces are revealed, including narrow viewports. */ #game #seats .seat.showdown-reveal:not(.my-seat) .seat-hole-cards .card,#game #seats .seat.allin-reveal:not(.my-seat) .seat-hole-cards .card{width:70px!important;height:99px!important;font-size:25px!important;animation:none!important;transition:none!important} #game .inline-chat{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;height:180px!important;margin:20px 0!important} #game #actions{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;margin:20px 0!important} } /* In compact layouts, public hole cards occupy their own row below the nameplate. */ @media(max-width:1049px){ #game #felt{margin-top:150px!important;min-height:440px!important} #game #seats .seat .seat-hole-cards, #game #seats .seat.my-seat .seat-hole-cards, #game #seats .seat.showdown-reveal:not(.my-seat) .seat-hole-cards, #game #seats .seat.allin-reveal:not(.my-seat) .seat-hole-cards, #game.master-view #seats .seat.master-reveal .seat-hole-cards{ position:static!important;left:auto!important;right:auto!important;top:auto!important; transform:none!important;margin:5px 0!important;flex:none!important; } } /* A single face asset for stationary stacks, wagers, pot collection and payouts. */ #game .bet-stack .chip-stack i, #game .flying-chip, #game #pot::before{ background:transparent url('/chips/club-chip.svg') center/100% 100% no-repeat!important; border:0!important;box-shadow:0 2px 0 #9c783d,0 3px 0 #231b13!important; } #game .bet-stack .chip-stack i:nth-child(3)::after{content:none!important} /* The shared table renderer also serves master spectating. */ #game #pot::before{content:"";display:inline-block;width:24px;height:24px;vertical-align:middle;margin-right:7px;border-radius:50%;flex:0 0 24px} @media(max-width:800px){#game #pot::before{width:20px;height:20px;flex-basis:20px;margin-right:5px}} /* Keep the approved card back visible until a cold face image is decoded. */ .card[data-card]:not(.face-ready){background:repeating-linear-gradient(45deg,#1d3453 0 5px,#b99a61 6px 7px,#1d3453 8px 12px)!important} .card[data-card]:not(.face-ready) > img.card-face{opacity:0!important} .card[data-card]:not(.face-ready) > .board-curl-layer{visibility:hidden} /* Element-level decode gate. Higher specificity than the legacy reveal rule. Pending and failed faces retain the full, existing back above every layer. */ .card[data-card]:not(.face-ready)::after, .card[data-card].reveal-pending::after, #game #board .card[data-card]:not(.face-ready)::after, #game #board .card[data-card].reveal-pending::after{ content:'♠'!important;position:absolute!important;inset:0!important;z-index:50!important; display:grid!important;place-items:center!important;box-sizing:border-box!important; border:2px solid #e2c17c!important;border-radius:inherit!important; background:repeating-linear-gradient(45deg,#1d3453 0 5px,#b99a61 6px 7px,#1d3453 8px 12px)!important; color:#e8ce95!important;font:700 24px Georgia,serif!important; clip-path:none!important;animation:none!important;opacity:1!important;pointer-events:none!important; } #game #board .card[data-card]:not(.face-ready) > .card-face, #game #board .card[data-card].reveal-pending > .card-face{opacity:0!important} #game #board .card.reveal-pending > .board-curl-layer{visibility:hidden!important} /* Choice frames stay mounted; only selection and decoded-image visibility change. */ .avatar-choice{position:relative} .avatar-placeholder{position:absolute;inset:7px;display:grid;place-items:center;aspect-ratio:1;max-width:95px;margin:auto;border-radius:50%;background:#253b32;color:#d8b87e;font-size:28px;pointer-events:none} .avatar-choice:not(.avatar-loading) .avatar-placeholder{display:none} .avatar-choice.avatar-loading img{opacity:0} .avatar-choice.avatar-failed .avatar-placeholder{color:#ad9973} #actions[data-action-message]:not([data-action-message=""])::after{content:attr(data-action-message);position:absolute;right:0;top:-25px;padding:3px 9px;border-radius:6px;background:#21190fea;color:#e9cd8c;font-size:12px;pointer-events:none} #actions.action-awaiting .bet-main-actions button{opacity:.72;cursor:wait} .bet-action-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* Keep intrinsic dimensions as a reservation, not a stretched 256px display height. */ .avatar-choice img{height:auto} /* Immediate local feedback on all bets; actual game state remains server-authoritative. */ #actions.action-awaiting .bet-main-actions{pointer-events:none} #actions.action-awaiting .bet-main-actions button{opacity:.52} #actions.action-awaiting::after{border:1px solid #d2ae65;box-shadow:0 2px 12px #0007} /* Prevent accidental blue text/image selection while dragging the poker table. */ body { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"] { -webkit-user-select: text; user-select: text; } img { -webkit-user-drag: none; }