/* free3cardpoker.fun table: a 1920x1080 stage (780x1400 on an upright phone) over a photographed red felt, scaled to fit. */
.tablewrap{position:relative;margin:0 auto;overflow:hidden;border-radius:18px;background:#1a0a0c;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:#4a0d12 url(assets/felt-red.jpg) 0 0/1920px 1280px no-repeat;user-select:none;-webkit-user-select:none;overflow:hidden}
.print{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none}
.print-tall{display:none}
.ink{opacity:.9}

/* betting spots, printed in gold like the real felt; the one you are betting on glows */
.spot{position:absolute;left:675px;width:130px;height:130px;padding:0;border:0;background:none;z-index:5}
button.spot{cursor:pointer}
.spot svg{width:130px;height:130px;display:block;overflow:visible}
.spot circle,.spot rect{fill:rgba(255,255,255,.03);stroke:#e6c25c;stroke-width:4}
.spot circle.in{fill:none;stroke-width:1.5;stroke-dasharray:4 5;opacity:.7}
.spot text{fill:#f3e3b0;font:800 21px Inter,Arial;letter-spacing:2px;text-anchor:middle;opacity:.9}
.spot.pp{top:535px}.spot.ante{top:670px}.spot.play{top:805px}
.spot.sel circle:first-child{stroke:#fff3c4;stroke-width:6;filter:drop-shadow(0 0 10px rgba(255,214,90,.9))}
.spot.play.on rect{stroke:#fff3c4;stroke-width:6}
button.spot:disabled{cursor:default}

/* chips */
.chips{position:absolute;width:84px;height:84px;z-index:12;pointer-events:none;transition:transform .35s ease,opacity .35s ease}
#chipsPP{left:698px;top:558px}#chipsAnte{left:698px;top:693px}#chipsPlay{left:698px;top:828px}
.chip{position:absolute;left:0;width:84px;height:84px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.chip svg{width:84px;height:84px;display:block}
.chips .amt{position:absolute;left:96px;top:24px;padding:5px 12px;border-radius:999px;background:rgba(14,6,7,.88);color:#fff3c4;font:800 22px Inter;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.4)}

/* cards (same drawing as freeblackjack.fun) */
.card{position:absolute;left:0;top:0;width:180px;height:252px;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;z-index:20;filter:drop-shadow(0 9px 10px rgba(0,0,0,.5))}
.face,.back{position:absolute;inset:0;border-radius:14px}
.face,.back{transition:opacity .2s ease}
.card.down .face{opacity:0}.card:not(.down) .back{opacity:0}
.card.flip .face,.card.flip .back{transition:none}
.card.deal{z-index:45;transition:transform .5s cubic-bezier(.22,.75,.25,1),opacity .35s ease}
.card.flip{transition:transform .17s ease-in}
.face{background:linear-gradient(170deg,#fffefb,#f0ede4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.back{background:#fff;padding:9px}
.back::after{content:"";display:block;width:100%;height:100%;border-radius:9px;box-sizing:border-box;border:2px solid #0f2e6e;
  background:radial-gradient(circle at 50% 50%,#f3d27a 0 9px,transparent 10px),repeating-linear-gradient(45deg,#1d4fb8 0 6px,#163f96 6px 12px)}
.red{color:#b5121b}.black{color:#121212}
.idx{position:absolute;left:10px;top:8px;width:34px;text-align:center;line-height:.95;font-family:Georgia,"Times New Roman",serif;font-weight:700}
.idx.flip{left:auto;top:auto;right:10px;bottom:8px;transform:rotate(180deg)}
.idx .r{font-size:40px}.idx .r.ten{letter-spacing:-4px}.idx .s{font-size:32px}
.pip{position:absolute;width:40px;height:44px;text-align:center;font-size:40px;line-height:44px}
.pip.down{transform:rotate(180deg)}
.pip.ace{font-size:92px;width:100px;height:100px;line-height:100px}
.court{position:absolute;left:44px;top:46px;right:44px;bottom:46px;border:3px solid currentColor;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;line-height:1}
.court .r{font-size:70px}.court .s{font-size:44px}
.card.lit .face{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 5px #ffd65a,0 0 28px rgba(255,214,90,.7)}

/* hand labels under each hand */
.hp{position:absolute;transform:translate(-50%,-50%);padding:6px 16px;border-radius:999px;font:800 24px Inter;white-space:nowrap;background:rgba(14,6,7,.9);color:#fff3c4;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:30}
.hp.side{transform:translate(0,-50%)}
.hp.win{background:#16a34a;color:#fff}.hp.lose{background:#b3262e;color:#fff}.hp.push{background:#5d6670;color:#fff}

/* payouts that pop next to a spot */
.pay{position:absolute;transform:translate(0,-50%);padding:5px 14px;border-radius:999px;font:900 24px Inter;white-space:nowrap;z-index:31;opacity:0;transition:opacity .3s ease,transform .3s ease}
.pay.show{opacity:1;transform:translate(8px,-50%)}
.pay.win{background:#16a34a;color:#fff}.pay.lose{background:#7f1d1d;color:#fecaca}.pay.push{background:#475057;color:#fff}

.banner{position:absolute;left:1210px;top:582px;text-align:center;line-height:1.05;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .25s ease;z-index:70;font:900 50px Inter;padding:10px 30px 12px;border-radius:18px;background:rgba(14,6,7,.86);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
.banner small{display:block;font:800 22px Inter;letter-spacing:2px;opacity:.9}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner.win{color:#4ade80}.banner.lose{color:#ff6b6b}.banner.push{color:#e2e8f0}
.tip{position:absolute;left:860px;top:735px;transform:translateY(-50%);font:700 24px Inter;color:#f3e3b0;opacity:.85;z-index:6;max-width:420px}
.tip[hidden]{display:none}
.note{position:absolute;left:1150px;top:1012px;transform:translateX(-50%);padding:8px 18px;border-radius:12px;background:rgba(14,6,7,.9);font:700 22px Inter;color:#e2e8f0;z-index:60;white-space:nowrap}
.note.ok{color:#86efac}.note.miss{color:#fcd34d}
.note[hidden]{display:none}

/* right panel, like the blackjack table's */
.panel{position:absolute;left:1480px;top:392px;width:370px;padding:18px 22px;border-radius:20px;background:rgba(14,6,7,.78);border:1px solid rgba(230,194,92,.35);box-shadow:0 14px 40px rgba(0,0,0,.45);z-index:40;backdrop-filter:blur(3px)}
.panel .lbl{font:800 16px Inter;letter-spacing:4px;color:#ead6d0}
.panel .bank{font:900 52px Inter;color:#fff3c4;margin:0;font-variant-numeric:tabular-nums}
.panel .hand{font:600 18px Inter;color:#ead6d0;margin:2px 0 8px}
.panel .row{display:flex;justify-content:space-between;font:600 20px Inter;color:#ead6d0;padding:3px 0}
.panel .row b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.panel .rule{height:1px;background:rgba(230,194,92,.3);margin:10px 0}
.panel .small{margin-top:10px;font:500 15px Inter;color:#c4a8a2}
#last.win{color:#4ade80}#last.lose{color:#ff8a8a}

/* controls on the rail */
.controls{position:absolute;left:830px;width:640px;top:898px;height:92px;display:flex;justify-content:center;align-items:center;gap:18px;z-index:80}
.controls [hidden]{display:none!important}
.btn{font:900 26px Inter;letter-spacing:1px;padding:16px 34px;border-radius:16px;border:2px solid rgba(230,194,92,.6);background:rgba(14,6,7,.92);color:#f8f3e1;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.btn:hover{background:rgba(40,14,17,.96)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:linear-gradient(180deg,#f2cf62,#c9971f);border-color:#8a6510;color:#1d1503}
.btn:disabled{opacity:.4;cursor:default}
.chipbtn{width:92px;height:92px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));transition:transform .1s ease}
.chipbtn:hover{transform:translateY(-4px)}
.chipbtn:disabled{opacity:.35;cursor:default;transform:none}
.chipbtn svg{width:92px;height:92px;display:block}
.print text{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* panel: mode switch, buttons, trainer */
.mode{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);margin-bottom:14px}
.mode button{flex:1;padding:9px 0;border:0;border-radius:9px;background:none;color:#ead6d0;font:800 15px Inter;letter-spacing:2px;cursor:pointer}
.mode button.on{background:linear-gradient(180deg,#f2cf62,#c9971f);color:#1d1503}
.mode button:disabled{cursor:default}
.panel .rp{margin-top:4px}
.trainer{display:flex;align-items:center;gap:10px;margin-top:8px;font:600 18px Inter;color:#f3e3b0;cursor:pointer}
.trainer[hidden]{display:none}
.trainer input{width:22px;height:22px;accent-color:#c9971f}
.pbtns{display:flex;gap:8px;margin-top:12px}
.pbtn{flex:1;padding:10px 0;border-radius:10px;border:1.5px solid rgba(230,194,92,.55);background:rgba(0,0,0,.3);color:#f3e3b0;font:800 15px Inter;letter-spacing:1.5px;cursor:pointer}
.pbtn:hover{background:rgba(230,194,92,.12)}
.note.hint{color:#f3e3b0}

/* sheets inside the table: game over, Top 25, stats, pays */
.sheet{position:absolute;inset:0;z-index:300;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.sheet[hidden]{display:none}
.sheet .box{position:relative;width:760px;max-height:92%;overflow:auto;padding:34px 40px;border-radius:24px;background:#1a0a0c;border:1.5px solid rgba(230,194,92,.55);box-shadow:0 30px 80px rgba(0,0,0,.6);font:500 24px Inter;color:#f6ece6}
.sheet .x{position:absolute;right:16px;top:12px;width:52px;height:52px;border:0;background:none;color:#ead6d0;font:400 44px/1 Inter;cursor:pointer}
.sheet h2{margin:0 0 4px;font:900 40px "Playfair Display",Georgia,serif;color:#f3d27a}
.sheet .sub{margin:4px 0 14px;color:#cdb3ad;font-size:22px}
.sheet .final{font:900 72px Inter;color:#fff3c4;margin:4px 0}
.sheet .form{display:flex;gap:12px;margin:16px 0}
.sheet .form input,.sheet .form select{font:800 28px Inter;padding:12px 16px;border-radius:12px;border:2px solid #c9971f;background:#0d0607;color:#fff;min-width:0}
.sheet .form input{width:150px;text-transform:uppercase;letter-spacing:6px}
.sheet .row2{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.sheet .btn{font-size:22px;padding:14px 24px}
.lb{width:100%;border-collapse:collapse;font-size:24px}
.lb td,.lb th{padding:9px 6px;border-top:1px solid rgba(230,194,92,.2)}
.lb th{text-align:left;color:#f3d27a;font-weight:800;padding-top:18px}
.lb td:first-child{color:#cdb3ad;width:52px}
.lb td:last-child{text-align:right;font-weight:800;color:#fff3c4;font-variant-numeric:tabular-nums}
.lb.pays td:first-child{width:auto;color:#f6ece6}
.lb tr.me td{background:rgba(242,207,98,.16)}
.lb .cc{font:700 14px Inter;padding:2px 4px;border-radius:4px;background:rgba(255,255,255,.12)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 16px}
.tiles div{padding:12px;border-radius:14px;background:rgba(0,0,0,.35)}
.tiles small{display:block;font-size:16px;color:#cdb3ad}
.tiles b{font-size:30px;color:#fff3c4}.tiles b.acc{color:#86efac}
.pay.c{transform:translate(-50%,-50%)}.pay.c.show{transform:translate(-50%,-50%)}

/* ---- an upright phone: the 780x1400 table ---- */
.stage.tall{background-size:auto 1400px;background-position:center top}
.stage.tall .print{display:none}
.stage.tall .print-tall{display:block;position:absolute;inset:0;width:780px;height:1400px;pointer-events:none}
.stage.tall .spot{top:625px}
.stage.tall .spot.pp{left:105px}.stage.tall .spot.ante{left:325px}.stage.tall .spot.play{left:545px}
.stage.tall .spot text{font-size:23px}
.stage.tall #chipsPP{left:128px;top:648px}.stage.tall #chipsAnte{left:348px;top:648px}.stage.tall #chipsPlay{left:568px;top:648px}
.stage.tall .chips .amt{left:42px;top:auto!important;bottom:-54px;transform:translateX(-50%);font-size:24px}
.stage.tall .hp{font-size:28px;padding:8px 20px}
.stage.tall .pay{font-size:24px}
.stage.tall .banner{left:390px;top:582px;font-size:52px}
.stage.tall .banner small{font-size:22px}
.stage.tall .tip{left:390px;top:800px;transform:translate(-50%,-50%);text-align:center;width:680px;max-width:none;font-size:26px}
.stage.tall .note{left:390px;top:1146px;font-size:22px;white-space:normal;width:max-content;max-width:740px;text-align:center}
.stage.tall .panel{left:14px;top:14px;width:752px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center}
.stage.tall .panel .mode{grid-column:1/-1;margin-bottom:10px}
.stage.tall .panel .mode button{font-size:20px;padding:10px 0}
.stage.tall .panel .lbl{display:none}
.stage.tall .panel .bank{font-size:46px;grid-column:1}
.stage.tall .panel .hand{grid-column:1;font-size:19px;margin:0}
.stage.tall .panel .rows{display:none}
.stage.tall .panel .rp{grid-column:2;grid-row:2/4;flex-direction:column;align-items:flex-end;margin:0;font-size:18px}
.stage.tall .panel .rp b{font-size:26px}
.stage.tall .panel .trainer{grid-column:1/-1;font-size:20px}
.stage.tall .panel .pbtns{grid-column:1/-1;margin-top:10px}
.stage.tall .panel .pbtn{font-size:18px;padding:11px 0}
.stage.tall .controls{left:0;width:780px;top:1180px;height:210px;flex-wrap:wrap;align-content:center;gap:14px 16px;padding:0 10px}
.stage.tall .btn{font-size:30px;padding:18px 34px}
.stage.tall .chipbtn,.stage.tall .chipbtn svg{width:108px;height:108px}
.stage.tall .sheet .box{width:740px;max-height:94%;padding:30px 30px}
.stage.tall .tiles{grid-template-columns:repeat(2,1fr)}
.stage,.sheet h2,.sheet .final{font-variant-numeric:lining-nums}