/* Mississippi Stud table: a 1920x1080 stage (780x1400 on an upright phone) over a photographed peacock-teal riverboat felt, scaled to fit. */
.tablewrap{position:relative;margin:0 auto;overflow:hidden;border-radius:18px;background:#062224;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:#0d5a5c url(assets/felt-teal.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:.92}

/* betting spots, printed in gold like the real felt; the one you are betting on glows */
.spot{position:absolute;width:112px;height:112px;padding:0;border:0;background:none;z-index:5}
button.spot{cursor:pointer}
.spot svg{width:112px;height:112px;display:block;overflow:visible}
.spot text.sm{font:800 17px Inter,Arial;fill:#ffb59c;letter-spacing:1px}
.spot circle,.spot rect{fill:rgba(255,255,255,.04);stroke:#e3b25e;stroke-width:4}
.spot circle.in{fill:none;stroke-width:1.5;stroke-dasharray:4 5;opacity:.7}
.spot text{fill:#ffe2c8;font:800 21px Inter,Arial;letter-spacing:2px;text-anchor:middle;opacity:.92}
.spot.s5{left:584px;top:330px}.spot.s4{left:584px;top:455px}.spot.s3{left:584px;top:580px}.spot.ante{left:584px;top:705px}
.spot.sel circle:first-child{stroke:#ffd0bd;stroke-width:6;filter:drop-shadow(0 0 12px rgba(255,138,107,.95))}
.spot.st.on rect{stroke:#ffd0bd;stroke-width:6;filter:drop-shadow(0 0 12px rgba(255,138,107,.9))}
.spot.st.next rect{stroke:#ff8a6b;stroke-dasharray:10 7;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-34}}
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}
#chipsS5{left:598px;top:344px}#chipsS4{left:598px;top:469px}#chipsS3{left:598px;top:594px}#chipsAnte{left:598px;top:719px}
.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:104px;top:26px;transform:none;padding:3px 11px;border-radius:999px;background:rgba(4,24,26,.9);color:#fff3c4;font:800 19px Inter;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.stage.settled .chips .amt{opacity:0}
.flychip{position:absolute;left:0;top:0;width:70px;height:70px;z-index:65;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.25,1),opacity .4s ease;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.flychip svg{width:70px;height:70px;display:block}

/* cards (same drawing as freeblackjack.fun), with a red back on the purple felt */
.card{position:absolute;left:0;top:0;width:180px;height:252px;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease,filter .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 #5e0a17;
  background:radial-gradient(circle at 50% 50%,#f3d27a 0 9px,transparent 10px),repeating-linear-gradient(45deg,#b3142b 0 6px,#8f0f22 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}
/* at the showdown the winning five lift and glow; the rest step back */
.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)}
.card.dim{filter:brightness(.55) saturate(.7) drop-shadow(0 6px 8px rgba(0,0,0,.4))}

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

/* payouts that pop on a spot */
.pay{position:absolute;transform:translate(-50%,-50%) scale(.6);padding:5px 14px;border-radius:999px;font:900 23px Inter;white-space:nowrap;z-index:31;opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,1.5,.4,1)}
.pay.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pay.win{background:#16a34a;color:#fff}.pay.lose{background:#7f1d1d;color:#fecaca}.pay.push{background:#475057;color:#fff}
.pay.big{background:linear-gradient(180deg,#ffe48a,#d9a521);color:#2a1a00;box-shadow:0 0 22px rgba(255,214,90,.8)}

.banner{position:absolute;left:1080px;top:552px;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 42px Inter;padding:8px 26px 10px;border-radius:18px;background:rgba(4,24,26,.88);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
.banner small{display:block;font:800 19px 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}
.banner.big{color:#2a1a00;background:linear-gradient(180deg,#ffe2a8,#e3a85e);background:linear-gradient(180deg,#ffe9a3,#e0ad2a);box-shadow:0 0 0 4px #fff3c4,0 0 50px rgba(255,214,90,.85)}
.banner.big small{color:#5a3a00}
.tip{position:absolute;left:820px;top:680px;transform:translateY(-50%);font:700 24px Inter;color:#ffe2c8;opacity:.9;z-index:6;max-width:520px}
.tip[hidden]{display:none}
.street{display:block;position:absolute;left:1080px;top:552px;transform:translate(-50%,-50%);font:800 18px Inter;letter-spacing:3px;color:#ffe2c8;opacity:.85;z-index:6;white-space:nowrap}
.street[hidden]{display:none}
.note{position:absolute;left:1080px;top:990px;transform:translateX(-50%);padding:8px 18px;border-radius:12px;background:rgba(4,24,26,.92);font:700 21px Inter;color:#e2e8f0;z-index:60;width:max-content;max-width:900px;text-align:center}
.note.ok{color:#86efac}.note.miss{color:#fcd34d}.note.hint{color:#ffe2c8}
.note[hidden]{display:none}

/* right panel, like the other tables' */
.panel{position:absolute;left:1480px;top:400px;width:370px;padding:18px 22px;border-radius:20px;background:rgba(4,24,26,.8);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:#cfe9e4}
.panel .bank{font:900 52px Inter;color:#fff3c4;margin:0;font-variant-numeric:tabular-nums}
.panel .hand{font:600 18px Inter;color:#cfe9e4;margin:2px 0 8px}
.panel .row{display:flex;justify-content:space-between;font:600 20px Inter;color:#cfe9e4;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}
#last.win{color:#4ade80}#last.lose{color:#ff8a8a}

/* controls on the felt */
.controls{position:absolute;left:740px;width:680px;top:800px;height:92px;display:flex;justify-content:center;align-items:center;gap:16px;z-index:80}
.controls [hidden]{display:none!important}
.btn{font:900 25px Inter;letter-spacing:1px;padding:16px 30px;border-radius:16px;border:2px solid rgba(230,194,92,.6);background:rgba(4,24,26,.92);color:#f8f3e1;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.45);white-space:nowrap}
.btn:hover{background:rgba(10,60,62,.96)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:linear-gradient(180deg,#ffe2a8,#e3b25e 55%,#c48a3a);border-color:#8a6510;color:#2a1503}
.btn.coral{background:linear-gradient(180deg,#ffa184,#f0684a);border-color:#a8402a;color:#2a0d05}
.btn small{display:block;font:800 15px Inter;letter-spacing:.5px;opacity:.85;margin-top:2px}
.btn:disabled{opacity:.4;cursor:default}
.btn.hint{box-shadow:0 0 0 4px #fff3c4,0 0 26px rgba(255,214,90,.85)}
.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:#cfe9e4;font:800 15px Inter;letter-spacing:2px;cursor:pointer}
.mode button.on{background:linear-gradient(180deg,#ffe2a8,#e3b25e 55%,#c48a3a);color:#2a1503}
.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:#ffe2c8;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:#ffe2c8;font:800 15px Inter;letter-spacing:1.5px;cursor:pointer}
.pbtn:hover{background:rgba(230,194,92,.12)}

/* 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:780px;max-height:92%;overflow:auto;padding:34px 40px;border-radius:24px;background:#06272a;border:1.5px solid rgba(230,194,92,.55);box-shadow:0 30px 80px rgba(0,0,0,.6);font:500 24px Inter;color:#effaf7}
.sheet .x{position:absolute;right:16px;top:12px;width:52px;height:52px;border:0;background:none;color:#cfe9e4;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:#a9cdc7;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:#031416;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:#a9cdc7;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:#effaf7}
.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:#a9cdc7}
.tiles b{font-size:30px;color:#fff3c4}.tiles b.acc{color:#86efac}

/* ---- 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,.stage.tall .spot svg{width:118px;height:118px}
.stage.tall .spot{top:801px}
.stage.tall .spot.ante{left:46px}.stage.tall .spot.s3{left:236px}.stage.tall .spot.s4{left:426px}.stage.tall .spot.s5{left:616px}
.stage.tall .spot text{font-size:23px}
.stage.tall #chipsAnte{left:63px;top:818px}.stage.tall #chipsS3{left:253px;top:818px}.stage.tall #chipsS4{left:443px;top:818px}.stage.tall #chipsS5{left:633px;top:818px}
.stage.tall .chips .amt{left:42px;top:-44px!important;transform:translateX(-50%);font-size:21px}
.stage.tall .hp{font-size:27px;padding:7px 20px}
.stage.tall .pay{font-size:23px}
.stage.tall .banner{left:390px;top:500px;font-size:42px}
.stage.tall .tip{left:390px;top:560px;transform:translate(-50%,-50%);text-align:center;width:640px;max-width:none;font-size:27px}
.stage.tall .street{display:block;left:390px;top:500px;font-size:19px}
.stage.tall .street[hidden]{display:none}
.stage.tall .note{left:390px;top:952px;font-size:21px;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:1196px;height:196px;flex-wrap:wrap;align-content:center;gap:14px 14px;padding:0 10px}
.stage.tall .btn{font-size:28px;padding:18px 28px}
.stage.tall .chipbtn,.stage.tall .chipbtn svg{width:104px;height:104px}
.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}