@font-face{font-family:"Rye";src:url(fonts/rye.woff2) format("woff2");font-display:block}
@font-face{font-family:"Permanent Marker";src:url(fonts/permanentmarker.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(fonts/patrickhand.woff2) format("woff2");font-display:swap}
:root{
  --felt:#3E6E47; --felt-lo:#2A5032; --metal:#9aa1a7; --metal-lo:#4b5157; --tape:#E8D9A8; --paper:#F4F1E8; --ink:#1D1D1D;
  --pad:#F7E36A; --cup:#D7263D; --cardboard:#C9A46A; --bar:#1a1c1b; --grass:#1f3818; --gold:#F7E36A; --gold2:#e0b93c; --red:#D7263D; --cream:#F4F1E8;
  --hand:"Patrick Hand","Comic Sans MS","Chalkboard SE",cursive; --mark:"Permanent Marker","Patrick Hand","Comic Sans MS",cursive;
  --cw:min(14.4vw,62px); --ch:calc(var(--cw)*1.42);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0d150c;color:var(--paper);
  font-family:var(--hand);font-size:16px;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;touch-action:manipulation}
#app{position:fixed;inset:0;max-width:560px;margin:0 auto;overflow:hidden;background:url(art/yard.svg) center top/cover no-repeat,var(--grass)}
.art #app{background:url(art/yard-bg.webp) center 40px/100% auto no-repeat,linear-gradient(#070b10,#0d140e 60px,#1a2a14 120px)}
/* warm string-light glow over the scene (halos + light spill), gently flickering */
.glow{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;animation:flick 5s ease-in-out infinite;
  background:radial-gradient(26px 22px at 4% 50px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 13% 53px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 23% 57px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 33% 60px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 44% 63px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 52% 62px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 60% 60px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 69% 64px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 79% 67px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 89% 70px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),radial-gradient(26px 22px at 97% 72px,#ffe2a6cc,#ffb34d55 40%,#0000 75%),
  radial-gradient(140% 70px at 50% 60px,#ff9d3a50,#0000 75%),radial-gradient(90% 220px at 50% 140px,#ffb45a24,#0000 75%)}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.86}50%{opacity:.97}53%{opacity:.88}}
.screen{z-index:1}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
.hidden{display:none!important}
/* domain move notice (online.js shows it on dompe.pages.dev only) */
.moved-bar{position:fixed;left:0;right:0;top:0;z-index:9999;max-width:560px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:#f3e3b5;color:#1d2a14;font-size:15px;line-height:1.35;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.moved-bar .moved-go{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:999px;background:#1d2a14;color:#f3e3b5;font-weight:700;text-decoration:none;white-space:nowrap}
.moved-note{margin-top:8px}

/* ---------- buttons: chunky cardboard/marker ---------- */
.btn{border:2.5px solid var(--ink);border-radius:9px;min-height:50px;padding:0 14px;font:400 18px/1.05 var(--mark);letter-spacing:.3px;color:var(--ink);
  background:var(--paper);box-shadow:3px 3px 0 #000;transition:transform .08s,filter .15s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn.gold{background:var(--pad);color:var(--ink)}
.btn.red{background:var(--cup);color:#fff}
.btn.ghost{background:var(--cardboard);color:var(--ink)}
.btn.small{min-height:46px;padding:0 10px;font-size:16px}
.btn:disabled{filter:grayscale(.7) brightness(.75);opacity:.75}
.icon{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:400 19px var(--mark);display:grid;place-items:center;padding:0;box-shadow:2px 2px 0 #000}
.x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:inherit;font-size:18px}
.row{display:flex;gap:10px;justify-content:center;margin-top:14px}.row .btn{flex:1}
.round{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);font:400 26px/1 var(--mark);color:var(--ink);box-shadow:2px 2px 0 #000;padding:0}
.round.sm{width:40px;height:40px;font-size:22px}
.jar-ico{display:inline-block;width:18px;height:23px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Crect x='5' y='1' width='14' height='5' rx='1.5' fill='%239AA3AD' stroke='%23222' stroke-width='1.2'/%3E%3Cpath d='M4 7H20Q22 8 22 11V26Q22 29 19 29H5Q2 29 2 26V11Q2 8 4 7Z' fill='%23cfe8ff55' stroke='%23F4F1E8' stroke-width='1.6'/%3E%3Cellipse cx='8' cy='25' rx='4' ry='1.8' fill='%23C87533'/%3E%3Cellipse cx='15' cy='25.5' rx='4.5' ry='1.8' fill='%23D9DDE2'/%3E%3Cellipse cx='11' cy='22' rx='4' ry='1.7' fill='%23E2A548'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- lobby ---------- */
#lobby{align-items:center;justify-content:flex-start;padding:calc(54px + var(--safe-t)) 18px calc(18px + var(--safe-b));overflow-y:auto;background:linear-gradient(#0000 0,#00000055 40%,#000000a0)}
.lobby-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;align-items:stretch;margin:auto 0;padding-top:10px} /* auto margins centre it when it fits and keep the top reachable when it scrolls */
.logo{position:relative;text-align:center;align-self:center;background:var(--cardboard);color:var(--ink);padding:10px 30px 8px;transform:rotate(-2deg);box-shadow:4px 5px 0 #0008;border-radius:2px 6px 3px 5px}
.logo::before,.logo::after{content:"";position:absolute;top:-4px;width:58px;height:18px;background:var(--tape);opacity:.92}
.logo::before{left:-12px;transform:rotate(-24deg)}.logo::after{right:-12px;transform:rotate(22deg)}
.logo h1{margin:0;font:400 64px/1 var(--mark);letter-spacing:1px;color:var(--ink);text-shadow:3px 3px 0 #ffffff55}
.logo .tag{margin:2px 0 0;font:400 18px var(--hand)}
.bank-row{display:flex;gap:10px;align-items:stretch}
.bank-pill{flex:1;display:flex;align-items:center;gap:6px;background:#000000b0;padding:6px 12px;border-radius:10px;border:2px dashed #F4F1E870;font-size:17px;flex-wrap:wrap}
.bank-pill b{color:var(--pad);font:400 20px var(--mark)}
.bank-pill small{opacity:.7;font-size:13px}
.chipsbtn{position:relative;background:#7AC74F;min-height:48px;font-size:17px;flex:none}
.chipsbtn .dot{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--cup);border:2px solid var(--ink)}
.seat-pick{display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:6px;box-shadow:3px 3px 0 #0008;transform:rotate(.6deg);flex-wrap:wrap;
  background-image:repeating-linear-gradient(transparent 0 23px,#7aa0d655 23px 24px)}
.sp-lbl{font:400 15px var(--mark);flex:1 1 100%}
.seat-pick b{font:400 30px/1 var(--mark);min-width:28px;text-align:center}
.sp-sub{font-size:16px;opacity:.75}
.table-btn{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;border:2.5px solid var(--ink);border-radius:8px;padding:14px 16px;color:var(--ink);
  background:var(--paper);box-shadow:4px 4px 0 #000;font-family:var(--hand)}
.table-btn::after{content:"";position:absolute;right:14px;top:-9px;width:46px;height:16px;background:var(--tape);transform:rotate(6deg);opacity:.9}
.table-btn.high{background:#232323;color:var(--paper)}
.table-btn.high::after{transform:rotate(-5deg)}
.tb-name{font:400 23px var(--mark)}.table-btn.high .tb-name{color:var(--pad)}
.tb-sub{font-size:17px;opacity:.85}
.ante-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.ante-row label{font:400 17px var(--mark)}
.ante-row input{width:92px;height:48px;border-radius:8px;border:2.5px solid var(--paper);padding:0 10px;font:400 22px var(--mark);text-align:center;background:var(--paper);color:var(--ink)}
.ante-row .btn{flex:1}
.ante-err{color:#ffb3b3;font-size:15px;min-height:16px}
.table-btn.reg .ante-row input{border-color:var(--ink)}
.table-btn.reg .ante-err{color:#b3261e}
.lobby-row{display:flex;gap:10px}.lobby-row .btn{flex:1;font-size:15px;white-space:nowrap;padding:0 8px}
.fine{text-align:center;font-size:14px;opacity:.75;margin:0;text-shadow:0 1px 2px #000}

/* ---------- table ---------- */
.topbar{display:flex;align-items:center;gap:8px;padding:calc(6px + var(--safe-t)) 12px 4px;position:relative;z-index:6;background:linear-gradient(#00000080,#0000)}
.brand{font:400 26px/1 var(--mark);color:var(--pad);transform:rotate(-3deg);text-shadow:2px 2px 0 #000}
.spacer{flex:1}
.board{position:relative;flex:1;min-height:0}
.ftable{position:absolute;left:4%;right:4%;top:23%;bottom:1%;border-radius:36px;padding:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg stroke='%23fff' stroke-width='.6' opacity='.35'%3E%3Cpath d='M4 10 l30 3'/%3E%3Cpath d='M60 40 l40 -6'/%3E%3Cpath d='M20 50 l18 2'/%3E%3Cpath d='M80 12 l25 4'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(4px 4px at 22px 22px,#2b2f33 60%,#0000 70%),radial-gradient(4px 4px at calc(100% - 22px) 22px,#2b2f33 60%,#0000 70%),
  radial-gradient(4px 4px at 22px calc(100% - 22px),#2b2f33 60%,#0000 70%),radial-gradient(4px 4px at calc(100% - 22px) calc(100% - 22px),#2b2f33 60%,#0000 70%),
    linear-gradient(160deg,#c9ced3,var(--metal) 30%,#6c7378 60%,#a7adb2 80%,var(--metal-lo));
  box-shadow:0 26px 40px -6px #000e,0 8px 0 #2a2e31,0 9px 0 #111,inset 0 0 0 1.5px #2b2f33,inset 0 2px 0 #ffffff70,inset 0 -3px 0 #00000060}
.ftable::before{content:"";position:absolute;inset:-2px;border-radius:38px;pointer-events:none;box-shadow:inset 0 0 0 3px #00000030;background:radial-gradient(60% 30% at 50% 0%,#ffcf8a40,#0000 70%);mix-blend-mode:screen}
.tfelt{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 36%,#ffc46a38,#0000 70%),radial-gradient(60% 40% at 50% 45%,#4f8558,transparent 75%),radial-gradient(100% 80% at 50% 50%,var(--felt),var(--felt-lo));
  box-shadow:inset 0 0 0 2px #1b2e1d,inset 0 8px 26px #000c,inset 0 0 70px #000000a0}
.tfelt .pool{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffc06a40,#0000 35%),radial-gradient(70% 45% at 50% 32%,#ffd08a66,#0000 70%),radial-gradient(120% 90% at 50% 55%,#0000 55%,#00000085);mix-blend-mode:soft-light}
.tfelt .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 95% at 50% 45%,#0000 58%,#000000a6)}
.tfelt::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.tfelt::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='520' viewBox='0 0 340 520'%3E%3Cg fill='none' stroke='%23F4F1E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.16'%3E%0A%3Cpath d='M40 420 v44 M54 418 v46 M68 420 v44 M82 419 v45 M34 446 l56 -16'/%3E%3Cpath d='M104 420 v44 M118 419 v45'/%3E%0A%3Cpath d='M236 424 h54 M236 442 h54 M254 408 v52 M272 408 v52'/%3E%3Cpath d='M241 412 l8 8 M249 412 l-8 8'/%3E%3Ccircle cx='281' cy='452' r='5'/%3E%3Cpath d='M258 446 l9 9 M267 446 l-9 9'/%3E%0A%3Cpath d='M150 470c-10-8-16-14-12-20 3-5 9-3 12 1 3-4 9-6 12-1 4 6-2 12-12 20z'/%3E%0A%3Cpath d='M40 120c-4-22 34-22 30 0 0 8-6 10-8 10v8H48v-8c-2 0-8-2-8-10z'/%3E%3Ccircle cx='49' cy='120' r='3'/%3E%3Ccircle cx='61' cy='120' r='3'/%3E%0A%3Cpath d='M282 112 l6 -18 8 12 6 -16 6 16 8 -12 6 18z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.stain{position:absolute;border-radius:50%}
.stain.s1{width:62px;height:62px;left:62%;top:66%;border:5px solid #5a3e1a50;border-right-color:#5a3e1a18}
.stain.s2{width:48px;height:48px;left:12%;top:16%;border:4px solid #5a3e1a40;border-bottom-color:#5a3e1a10}
.stain.s3{width:120px;height:70px;left:18%;top:50%;background:radial-gradient(#2a3d2240,transparent 70%)}

/* seats: name tags with doodle markers */
#seats{position:absolute;inset:0;z-index:3;pointer-events:none}
.seat{position:absolute;transform:translateX(-50%);width:92px;display:flex;flex-direction:column;align-items:center;gap:2px}
.seat .nm{position:relative;display:flex;align-items:center;gap:3px;font:400 15px/1 var(--mark);color:var(--ink);background:var(--paper);padding:4px 8px 3px;border-radius:3px;white-space:nowrap;
  box-shadow:2px 2px 0 #0009;transform:rotate(var(--tilt,-2deg))}
.seat .nm svg,.me-info .nm svg{width:16px;height:16px;flex:none}
.seat .bkrow{display:flex;align-items:flex-end;gap:4px;margin-top:2px}
.seat .bk{font:400 16px/1 var(--hand);color:var(--pad);text-shadow:0 1px 2px #000}
.seat .tag{font:400 11px var(--mark);margin-top:2px;padding:0 6px;background:var(--tape);color:var(--ink);transform:rotate(-4deg);white-space:nowrap}
.seat.turn .nm{background:var(--pad);box-shadow:0 0 0 2px var(--ink),0 0 16px #F7E36Acc;animation:wig 1.4s ease-in-out infinite}
@keyframes wig{50%{transform:rotate(2deg) scale(1.05)}}
.seat.folded{opacity:.45}
.dealer{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--cup);color:#fff;font:400 10px/1 var(--mark);border:1.5px solid var(--ink)}
.backs{display:flex;height:27px;margin-top:3px}
.backs .card{width:19px;height:27px;margin-left:-10px;border-radius:3px}
.backs .card:first-child{margin-left:0}
.seat .bubble{position:absolute;z-index:6;top:100%;white-space:nowrap;background:var(--paper);color:var(--ink);font:400 15px var(--mark);padding:3px 9px;border-radius:10px;border:2px solid var(--ink);box-shadow:2px 2px 0 #000;animation:pop .25s}
@keyframes pop{from{transform:scale(.6);opacity:0}}

/* chip stacks (regular chips: $1 white, $5 red, $25 green, $100 black) */
.cstacks{display:inline-flex;align-items:flex-end;gap:1px}
.cstack{position:relative;display:inline-block;width:18px;height:calc(7px + var(--n)*3px)}
.chip{position:absolute;left:0;bottom:calc(var(--i)*3px);width:18px;height:7px;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--c) 0 30%,#fff 31% 40%,var(--c) 41%);box-shadow:0 2px 0 var(--e),0 2px 2px #0008}
.chip.d1{--c:#ECE8DD;--e:#8f8a7e;background:radial-gradient(ellipse at center,#ECE8DD 0 30%,#3a6fd0 31% 40%,#ECE8DD 41%)}
.chip.d5{--c:#C8323A;--e:#6e1218}.chip.d25{--c:#2E8B57;--e:#14472a}.chip.d100{--c:#262626;--e:#000;background:radial-gradient(ellipse at center,#262626 0 30%,#F7E36A 31% 40%,#262626 41%)}

/* centre: coin jar pot, piles, message */
.center{position:absolute;left:50%;top:30.5%;transform:translateX(-50%);width:176px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2}
.jarwrap{position:relative;width:150px;height:96px;display:flex;justify-content:center}
.art .jarwrap{height:116px}
.jar{position:relative;width:72px;height:92px;margin-top:4px}
.jglass{position:absolute;inset:8px 0 0 0;border-radius:12px 12px 16px 16px;border:3px solid #eaf4ffcc;background:linear-gradient(90deg,#ffffff30 0 14%,#ffffff08 18%,#cfe8ff14 80%,#ffffff26);box-shadow:0 6px 10px #0008}
.jlid{position:absolute;left:12px;right:12px;top:0;height:12px;border-radius:3px;background:linear-gradient(#c9ced3,#7b8389);border:2px solid #3b4146}
.jfill{position:absolute;left:5px;right:5px;bottom:5px;height:var(--fill,10%);border-radius:3px 3px 11px 11px;transition:height .5s;background-color:#7a5428;
  background-image:radial-gradient(ellipse 6px 3px at 5px 3px,#E2A548 85%,#0000 100%),radial-gradient(ellipse 6px 3px at 15px 6px,#D9DDE2 85%,#0000 100%),radial-gradient(ellipse 6px 3px at 9px 9px,#C87533 85%,#0000 100%),radial-gradient(ellipse 6px 3px at 19px 1px,#C8323A 85%,#0000 100%),radial-gradient(ellipse 5px 2.5px at 1px 8px,#9aa1a8 85%,#0000 100%);
  background-size:20px 11px;box-shadow:inset 0 3px 0 #0003}
.jlabel{position:absolute;left:-6px;right:-6px;top:38%;background:var(--tape);color:var(--ink);font:400 11px/1 var(--mark);text-align:center;padding:3px 0 2px;transform:rotate(-5deg);box-shadow:1px 1px 0 #0005}
.jlabel b{display:block;font:400 16px/1 var(--mark);color:var(--cup)}
.jarwrap.bump .jar{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.12) rotate(-3deg)}}
.loose i{position:absolute;border-radius:50%;box-shadow:0 2px 0 #0007}
.loose .lc1{width:18px;height:8px;left:6px;bottom:6px;background:radial-gradient(ellipse,#C8323A 0 30%,#fff 31% 40%,#C8323A 41%)}
.loose .lc2{width:14px;height:6px;left:22px;bottom:-2px;background:radial-gradient(ellipse at 40% 40%,#E39A5A,#B8642A)}
.loose .lc3{width:16px;height:7px;right:10px;bottom:2px;background:repeating-conic-gradient(#e6e9ec 0 14deg,#8f969c 14deg 28deg)}
.loose .lc4{width:18px;height:8px;right:24px;bottom:-6px;background:radial-gradient(ellipse,#2E8B57 0 30%,#fff 31% 40%,#2E8B57 41%)}
.loose .lc5{width:13px;height:6px;left:0;bottom:20px;background:radial-gradient(ellipse at 40% 40%,#eef0f2,#9aa1a8)}
.loose .lc6{width:14px;height:6px;right:0;bottom:22px;background:radial-gradient(ellipse at 40% 40%,#E39A5A,#9c5a26)}
.piles{display:flex;gap:22px;align-items:flex-end}
.stack{position:relative;width:52px;height:74px;border-radius:7px}
.stack .card{position:absolute;inset:0;width:52px;height:74px}
.stack .card .ci{font-size:16px}.stack .card .pip{font-size:28px}
.stack .card:nth-child(2){transform:translate(-2px,-2px) rotate(-2deg)}.stack .card:nth-child(3){transform:translate(-4px,-4px) rotate(2deg)}
.stack .count{position:absolute;right:-10px;top:-12px;background:var(--tape);color:var(--ink);font:400 13px/1 var(--mark);padding:3px 6px 2px;z-index:3;transform:rotate(8deg)}
.plabel{position:absolute;left:-20px;right:-20px;bottom:-22px;text-align:center;font:400 13px var(--mark);color:#F4F1E8d0;white-space:nowrap;text-shadow:0 1px 2px #000}
.pile .slot{position:absolute;inset:0;border-radius:7px;border:2px dashed rgba(255,255,255,.35)}
.pile .slot .card{position:absolute;inset:0;width:52px;height:74px}
.stack.can{cursor:pointer}
.stack.can::after{content:"";position:absolute;inset:-6px;border-radius:10px;box-shadow:0 0 0 3px var(--pad),0 0 18px var(--pad);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}
.msg{margin-top:22px;padding:4px 12px;background:var(--pad);color:var(--ink);font:400 16px/1.15 var(--hand);text-align:center;max-width:176px;transform:rotate(-1.5deg);box-shadow:2px 3px 0 #0008;
  background-image:repeating-linear-gradient(transparent 0 17px,#7aa0d655 17px 18px)}

.me{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center}
.me-info{display:flex;gap:6px;align-items:center;white-space:nowrap}
.me-info .nm{display:flex;gap:3px;align-items:center;font:400 16px/1 var(--mark);background:var(--paper);color:var(--ink);padding:4px 9px 3px;border-radius:3px;box-shadow:2px 2px 0 #0009;transform:rotate(-2deg)}
.me-info .bk{font:400 18px var(--hand);color:var(--pad);text-shadow:0 1px 2px #000}
.me-info .tag{font:400 12px var(--mark);padding:0 6px;background:var(--tape);color:var(--ink);transform:rotate(3deg)}
.me.turn .me-info .nm{background:var(--pad);box-shadow:0 0 0 2px var(--ink),0 0 16px #F7E36Acc}
.hand{position:relative;z-index:5;display:flex;gap:4px;justify-content:center;min-height:calc(var(--ch) + 16px);padding-top:14px;margin-top:-22px}
.hand .card{width:var(--cw);height:var(--ch);transition:transform .18s}
.hand .card:nth-child(2){transform:rotate(-1.5deg)}.hand .card:nth-child(4){transform:rotate(1.5deg) translateY(1px)}
.hand .card.sel{transform:translateY(-14px) rotate(2deg);box-shadow:0 0 0 3px var(--pad),0 8px 18px #000a}
.hand .card.new{animation:newc .5s}
@keyframes newc{0%{box-shadow:0 0 0 3px #7df,0 0 20px #7df}}
.hand.locked .card{filter:brightness(.93)}
.dompe-btn{position:absolute;z-index:8;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) rotate(-2deg);border:3px solid var(--ink);border-radius:10px;padding:10px 24px 8px;
  font:400 30px var(--mark);letter-spacing:1px;color:var(--ink);background:var(--pad);box-shadow:4px 4px 0 #000,0 0 30px #F7E36A;animation:glow 1s infinite;display:flex;flex-direction:column;align-items:center;line-height:1;white-space:nowrap}
.dompe-btn small{font:400 14px var(--hand)}
@keyframes glow{50%{box-shadow:4px 4px 0 #000,0 0 50px #F7E36A;transform:translateX(-50%) rotate(1deg) scale(1.05)}}

/* bottom bar */
.bar{position:relative;z-index:6;background:linear-gradient(#232625,var(--bar));border-top:3px solid #0a0a0a;box-shadow:0 -4px 14px #0009;padding:8px 10px calc(10px + var(--safe-b))}
.strip{display:flex;gap:8px;margin-bottom:8px}
.tinfo,.pot{display:flex;align-items:center;gap:6px;border:2px solid #4a4f4c;border-radius:8px;background:#121413;padding:3px 10px;min-height:36px}
.tinfo{flex:1;min-width:0;gap:8px}
.tinfo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tinfo span:first-child{font:400 16px var(--mark);color:var(--pad)}.tinfo span:last-child{font-size:16px;opacity:.85}
.pot span{font:400 14px var(--mark);opacity:.8}.pot b{font:400 22px/1 var(--mark);color:var(--pad)}
.pot.bump{animation:bump .5s}
.actions{display:flex;gap:8px}
.actions .btn{flex:1;min-height:56px;white-space:nowrap}
.actions #sortBtn{flex:.85;font-size:16px}
#extraBtn{line-height:1.05}#extraBtn small.cap{display:block;font:400 13px var(--hand);opacity:.85}

/* ---------- cards ---------- */
.card{position:relative;width:var(--cw);height:var(--ch);border-radius:9px;background:var(--paper);color:var(--ink);
  box-shadow:0 1px 0 #cfc6ae,0 4px 8px rgba(0,0,0,.45);overflow:hidden;flex:none}
.card.red{color:var(--cup)}
.card .ci{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.95;font:400 calc(var(--cw)*.3) var(--mark)}
.card .ci span{font-size:.8em}
.card .tl{left:4px;top:4px}.card .br{right:4px;bottom:4px;transform:rotate(180deg)}
.card .pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.55)}
.card.joker{background:linear-gradient(160deg,#fff7d6,#ffe08a);color:#7a2a8a}
.card.joker .pip{font:400 calc(var(--cw)*.2) var(--mark);letter-spacing:1px;writing-mode:vertical-rl;transform:rotate(180deg)}
.card.joker .tl,.card.joker .br{font-size:calc(var(--cw)*.26)}
.card .as{position:absolute;left:0;right:0;bottom:-1px;background:#7a2a8a;color:#fff;font:800 11px system-ui;text-align:center;padding:2px 0}
.card.back{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='xMidYMid slice'%3E%0A%3Cdefs%3E%3Cpattern id='p' width='12' height='12' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='12' height='12' fill='%232C5AA0'/%3E%3Cpath d='M0 6H12M6 0V12' stroke='%23F4F1E8' stroke-width='1.2' opacity='.8'/%3E%3Ccircle cx='6' cy='6' r='2' fill='%23F4F1E8'/%3E%3C/pattern%3E%3C/defs%3E%0A%3Crect width='100' height='140' fill='%23F4F1E8'/%3E%3Crect x='7' y='7' width='86' height='126' rx='5' fill='url(%23p)'/%3E%0A%3Ccircle cx='66' cy='92' r='19' fill='none' stroke='%237A4A1E' stroke-width='5' opacity='.35'/%3E%3Ccircle cx='66' cy='92' r='15' fill='%237A4A1E' opacity='.12'/%3E%0A%3Crect x='14' y='18' width='34' height='12' fill='%23E8D9A8' opacity='.92' transform='rotate(-12 31 24)'/%3E%3C/svg%3E") center/cover;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.mini{--cw:34px;--ch:48px}
.mini .card{width:34px;height:48px;border-radius:5px}
.mini .card .ci{font-size:12px}.mini .card .pip{font-size:18px}
.mini .card.joker .pip{font-size:7px}
.flycard{position:fixed;z-index:50;pointer-events:none;will-change:transform}
.flycard .card{width:var(--cw);height:var(--ch)}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.panel{position:relative;width:100%;max-width:420px;background:#FBF7EA;color:var(--ink);border-radius:6px;padding:20px 20px 20px 30px;box-shadow:6px 6px 0 #000,0 10px 40px #000a;border:2px solid var(--ink);font-family:var(--hand);font-size:17px;
  background-image:linear-gradient(90deg,#0000 18px,#e0525a70 18px 20px,#0000 20px),repeating-linear-gradient(transparent 0 25px,#7aa0d640 25px 26px)}
.panel h3{margin:0 0 6px;font:400 26px var(--mark)}
.sm{font-size:15px;opacity:.8;margin:6px 0}
.sheet{align-self:flex-end;margin-bottom:var(--safe-b)}
.bet-amt{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0}
.bet-amt span{font:400 42px var(--mark);min-width:110px;text-align:center}
input[type=range]{width:100%;height:36px;accent-color:#2C5AA0}
.prov{font-size:14px;color:#5a4300;background:var(--tape);padding:5px 8px;margin:12px 0 0;text-align:center;transform:rotate(-.6deg)}
.win{text-align:center}
.shout{font:400 50px/1.05 var(--mark);color:var(--cup);letter-spacing:1px;text-shadow:3px 3px 0 #F7E36A;animation:shout .6s cubic-bezier(.2,1.6,.4,1)}
.shout.comi{font-size:62px;color:#7a2a8a;text-shadow:3px 3px 0 #F7E36A,0 0 30px #F7E36A}
@keyframes shout{from{transform:scale(.3);opacity:0}}
.win-sub{font-size:19px;opacity:.8;margin-top:2px}
.win-cards{display:flex;justify-content:center;gap:4px;margin:16px 0 10px;--cw:min(13vw,56px);--ch:calc(var(--cw)*1.42)}
.win-cards .card{animation:deal .45s both}
.win-cards .card:nth-child(2){animation-delay:.07s}.win-cards .card:nth-child(3){animation-delay:.14s}.win-cards .card:nth-child(4){animation-delay:.21s}.win-cards .card:nth-child(5){animation-delay:.28s}.win-cards .card:nth-child(6){animation-delay:.35s}
@keyframes deal{from{transform:translateY(-30px) rotate(-8deg);opacity:0}}
.win-who{font-size:21px}
.win-who b{font:400 21px var(--mark);color:#2E6E45}
.rules{max-height:calc(100% - 20px);overflow-y:auto;-webkit-user-select:text;user-select:text;padding-top:12px}
.rules h2{font:400 28px var(--mark);margin:4px 0 8px;color:var(--ink);transform:rotate(-1deg)}
.rules h4{margin:16px 0 6px;font:400 19px var(--mark);color:#2C5AA0}
.rules p,.rules li{font-size:17px;line-height:1.3}
.rules ol,.rules ul{padding-left:20px;margin:4px 0}
.rk{display:flex;gap:8px;align-items:flex-start;margin:10px 0;padding:8px;border-radius:4px;background:#00000008;border:1.5px dashed #0003}
.rk .n{font:400 22px var(--mark);color:var(--cup);width:22px}
.rk .t b{display:block}.rk .t i{font-size:12px;opacity:.75;font-style:normal}
.rk .mini{display:flex;gap:2px;margin-top:6px;flex-wrap:wrap}
.house{background:#7AC74F22;border:1.5px dashed #2E6E4580;padding:8px 12px}
#toasts{position:absolute;left:0;right:0;top:calc(64px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:45}
.toast{background:var(--paper);color:var(--ink);padding:6px 14px;border-radius:6px;border:2px solid var(--ink);box-shadow:3px 3px 0 #000;font:400 16px var(--mark);animation:pop .2s}
@media (max-height:700px){:root{--cw:min(13vw,52px)}.logo h1{font-size:48px}.stack,.stack .card,.pile .slot .card{width:44px;height:62px}.jarwrap{height:80px}.jar{transform:scale(.85);transform-origin:top}}


/* store */
.store h3{transform:rotate(-1deg)}
.bank-now{font-size:18px;margin:4px 0 10px}.bank-now b{font:400 22px var(--mark);color:#2E6E45}
.offer{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1.5px dashed #0003}
.offer .oi{width:40px;height:40px;flex:none;display:grid;place-items:center;font:400 20px var(--mark);border:2px solid var(--ink);border-radius:50%;background:var(--pad);transform:rotate(-6deg)}
.offer .ot{flex:1;min-width:0;line-height:1.1}.offer .ot b{display:block;font:400 18px var(--mark)}.offer .ot span{font-size:15px;opacity:.75}
.offer .btn{min-height:44px;font-size:16px;padding:0 12px;flex:none}
.offer .btn:disabled{filter:none;opacity:1;background:#e6e1d2;color:#555;box-shadow:none;border-style:dashed;font:400 15px var(--hand)}

/* painted art layers (enabled once art/jar.webp loads: html.art) */
.art .jglass,.art .jlid,.art .jfill{display:none}
.art .jar{width:96px;height:116px;margin-top:0;background:url(art/jar.webp) center bottom/contain no-repeat;filter:drop-shadow(0 10px 8px #000c) drop-shadow(0 0 14px #ffb45a40)}
.art .jlabel{top:46%;left:6px;right:6px}
.art .loose i{background:none!important;box-shadow:none;border-radius:0;width:26px;height:26px;background-size:contain!important;filter:drop-shadow(0 3px 2px #000a)}
.art .loose .lc1{background:url(art/loose-0.webp) center/contain no-repeat!important}.art .loose .lc2{background:url(art/loose-1.webp) center/contain no-repeat!important}
.art .loose .lc3{background:url(art/loose-2.webp) center/contain no-repeat!important}.art .loose .lc4{background:url(art/loose-3.webp) center/contain no-repeat!important}
.art .loose .lc5{background:url(art/loose-4.webp) center/contain no-repeat!important}.art .loose .lc6{background:url(art/loose-5.webp) center/contain no-repeat!important}
.art .card.back{background:url(art/cardback.webp) center/cover;box-shadow:0 2px 5px #0009,inset 0 0 0 1px #0002}
.scatter{position:absolute;inset:0;pointer-events:none;z-index:1}
.scatter i{position:absolute;width:24px;height:24px;background:center/contain no-repeat;filter:drop-shadow(0 3px 2px #000a);display:none}
.art .scatter i{display:block}
/* worn card faces: aged paper, soft grime at the edges */
.card:not(.back)::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 50%,#0000 60%,#8a6a3a2e),radial-gradient(30% 20% at 85% 92%,#8a6a3a22,#0000),radial-gradient(25% 18% at 12% 8%,#8a6a3a1c,#0000)}

/* your bankroll: big, bold, animated */
.me{flex-direction:row!important;align-items:flex-end;gap:8px}
.mybank{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:8px;
  padding:3px 12px 2px;box-shadow:4px 4px 0 #000,0 0 18px #ffcf8a55;transform:rotate(2deg);min-width:112px}
.mybank::before{content:"";position:absolute;top:-9px;left:50%;width:44px;height:15px;margin-left:-22px;background:var(--tape);opacity:.92;transform:rotate(-4deg)}
.mybank .mb-l{font:400 11px/1 var(--mark);letter-spacing:1px;opacity:.7;margin-top:2px}
.mybank b{font:400 32px/1.05 var(--mark);color:#1f7a3a;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.mybank.up{animation:bankUp 1.1s ease-out}.mybank.down{animation:bankDown .9s ease-out}
.mybank.up b{animation:inkUp 1.1s}.mybank.down b{animation:inkDown .9s}
@keyframes bankUp{0%{box-shadow:4px 4px 0 #000,0 0 0 0 #3ddc6aee}25%{transform:rotate(-2deg) scale(1.14);box-shadow:4px 4px 0 #000,0 0 0 8px #3ddc6a99,0 0 34px #3ddc6a}100%{box-shadow:4px 4px 0 #000,0 0 18px #ffcf8a55}}
@keyframes bankDown{0%{box-shadow:4px 4px 0 #000,0 0 0 0 #ff4b4bee}20%{transform:rotate(4deg) translateX(-3px);box-shadow:4px 4px 0 #000,0 0 0 7px #ff4b4b99,0 0 26px #ff4b4b}40%{transform:rotate(0) translateX(3px)}100%{box-shadow:4px 4px 0 #000,0 0 18px #ffcf8a55}}
@keyframes inkUp{0%,60%{color:#16a34a}}@keyframes inkDown{0%,60%{color:var(--cup)}}
.bdelta{position:absolute;right:-6px;top:-24px;font:400 20px/1 var(--mark);padding:2px 7px 1px;border:2px solid var(--ink);border-radius:5px;box-shadow:2px 2px 0 #000;white-space:nowrap;animation:floatUp 1.4s ease-out forwards;pointer-events:none}
.bdelta.up{background:#7AE08F;color:var(--ink)}.bdelta.down{background:#FF7A7A;color:var(--ink)}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.me-info .bk{display:none}
.art .ftable{background-image:radial-gradient(4px 4px at 22px 22px,#2b2f33 60%,#0000 70%),radial-gradient(4px 4px at calc(100% - 22px) 22px,#2b2f33 60%,#0000 70%),
  radial-gradient(4px 4px at 22px calc(100% - 22px),#2b2f33 60%,#0000 70%),radial-gradient(4px 4px at calc(100% - 22px) calc(100% - 22px),#2b2f33 60%,#0000 70%),
  linear-gradient(160deg,#ffffff55,#0000 30%,#00000040 60%,#ffffff30 80%,#00000066),url(art/rim.webp);background-size:auto,auto,auto,auto,auto,260px auto;background-position:0 0,0 0,0 0,0 0,0 0,center}
.art .tfelt{background:radial-gradient(80% 60% at 50% 36%,#ffc46a38,#0000 70%),url(art/felt.webp) center/cover}
.art .tfelt .stain{display:none}
.art .scatter .s6{background-image:url(art/loose-6.webp)}.art .scatter .s7{background-image:url(art/loose-7.webp)}.art .scatter .s8{background-image:url(art/loose-8.webp)}.art .scatter .s9{background-image:url(art/loose-4.webp)}
.art #lobby{background:linear-gradient(#0000 0,#00000055 40%,#000000a0),url(art/yard-side.webp) center top/100% auto no-repeat}

/* ---------- side pots & all-in ---------- */
.center.has-side{gap:8px}
.sidepots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;max-width:200px;margin:-6px 0 10px}
.sidepots .sp{display:flex;flex-direction:column;align-items:center;padding:2px 7px 1px;background:var(--paper);color:var(--ink);border-radius:3px;box-shadow:2px 2px 0 #0009;transform:rotate(-2deg);line-height:1}
.sidepots .sp:nth-child(2){transform:rotate(2deg)}
.sidepots .sp b{font:400 12px var(--mark);color:#8a2b1f}
.sidepots .sp i{font:400 12px var(--hand);font-style:normal;opacity:.75;white-space:nowrap}
.tag.allin,.seat .tag.allin,.me-info .tag.allin{background:#C8323A;color:#fff;box-shadow:0 0 0 1.5px #fff8,0 0 10px #ff6a4a99;animation:allinPulse 1.6s ease-in-out infinite}
@keyframes allinPulse{50%{box-shadow:0 0 0 1.5px #fff8,0 0 2px #ff6a4a33}}
.seat.folded .tag.allin{opacity:1}
.win-who .potres{display:flex;flex-direction:column;gap:2px;margin-top:8px;font:400 15px/1.2 var(--hand);opacity:.92}
.win-who .potres span{display:block}
.win-who .potres .rf{font-size:13px;opacity:.75}

/* ---------- logo: the Backyard bet jar ---------- */
.logo-jar{position:absolute;right:-24px;top:-12px;width:42px;height:auto;transform:rotate(9deg);filter:drop-shadow(3px 5px 3px #000a) drop-shadow(0 0 10px #ffb45a55);pointer-events:none}
.brand{display:flex;align-items:center;gap:5px}
.brand-jar{width:17px;height:auto;transform:rotate(6deg);filter:drop-shadow(1px 2px 1px #000) drop-shadow(0 0 5px #ffb45a66)}

.art .jar-ico{background:url(art/jar.webp) center/contain no-repeat}

/* ---------- Install app (lobby) ---------- */
.install-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-size:17px;transform:rotate(-.6deg)}
.install-btn .jar-ico{width:16px;height:22px;vertical-align:0}
.install-hint{position:relative;margin-top:10px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:10px;
  box-shadow:4px 4px 0 #000;padding:12px 52px 12px 14px;font-size:16px;line-height:1.3;text-align:left;transform:rotate(.4deg)}
.install-hint b{font-weight:700}
.install-hint ol{margin:6px 0 0;padding-left:22px}
.install-hint li{margin:3px 0}
.install-hint .ih-ico{display:inline-block;min-width:20px;text-align:center;font-weight:700;border:1.5px solid var(--ink);border-radius:5px;padding:0 3px;line-height:1.2}
.install-hint .x{position:absolute;top:6px;right:6px}
.auth-install{margin-top:12px;min-height:46px;font-size:16px}

/* ---------- El Comi’s Dompe title ---------- */
.logo h1 .pre{display:block;font:400 25px/1 var(--mark);color:#7a2f1f;letter-spacing:.5px;margin:0 0 -2px;transform:rotate(-3deg) translateX(-6px);text-shadow:2px 2px 0 #ffffff55}
.logo h1 .big{display:block}
.brand small{font:400 13px/1 var(--mark);color:#F4F1E8d0;margin-right:5px;align-self:center;transform:translateY(1px)}
@media (max-height:700px){.logo h1 .pre{font-size:20px}}

/* ---------- Live Play (lobby card + gate screens) ---------- */
.table-btn.live{background:var(--cardboard);transform:rotate(-.5deg)}
.table-btn.live::after{transform:rotate(-4deg);left:16px;right:auto}
.live-head{display:flex;align-items:center;gap:10px}
.live-txt{display:flex;flex-direction:column}
.live-mini{flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff2b0,#e2b448 45%,#8a5a14);border:2px dashed #1d1d1d66;display:flex;align-items:center;justify-content:center}
.live-mini.has{background:none;border:0}
.live-mini svg{display:block}
.live-note{font-size:15px;opacity:.8;margin-top:2px}
.live-msg{font:400 15px var(--hand);color:#1d4d1d;min-height:0}
.live-msg:empty{display:none}
.live-screen{align-items:center;justify-content:flex-start;padding:calc(54px + var(--safe-t)) 18px calc(18px + var(--safe-b));overflow-y:auto;background:linear-gradient(#0000 0,#00000066 40%,#000000b0)}
.live-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;margin:auto 0}
.live-sign{align-self:center;text-align:center;background:var(--cardboard);color:var(--ink);padding:8px 22px 6px;transform:rotate(-1.5deg);box-shadow:4px 5px 0 #0008;border-radius:2px 6px 3px 5px;position:relative}
.live-sign::before{content:"";position:absolute;top:-8px;left:50%;width:62px;height:16px;margin-left:-31px;background:var(--tape);transform:rotate(-3deg);opacity:.92}
.live-sign h2{margin:0;font:400 27px/1.1 var(--mark)}
.live-sign p{margin:2px 0 0;font-size:15px;opacity:.8}
.paper-card{display:flex;flex-direction:column;gap:4px;background:var(--paper);color:var(--ink);padding:14px 16px;border:2.5px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 #000;
  background-image:repeating-linear-gradient(transparent 0 25px,#7aa0d640 25px 26px)}
.paper-card .lbl{font:400 17px var(--mark);margin-top:6px}
.paper-card input{height:50px;border-radius:8px;border:2.5px solid var(--ink);padding:0 12px;font:400 21px var(--hand);background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
.paper-card .hint{font-size:14px;opacity:.7}
.field-err{color:#b3261e;font-size:15px;min-height:18px}
.paper-card .note{font-size:15px;margin:6px 0 0;padding:6px 10px;background:#F7E36A88;border-left:4px solid var(--ink);transform:rotate(-.4deg)}
.paper-card .row{margin-top:10px}
.coin-stage{display:flex;flex-direction:column;align-items:center;gap:4px}
#coinPreview{width:190px;height:190px;filter:drop-shadow(0 6px 10px #000a)}
.coin-cap{font:400 20px var(--mark);color:var(--pad);text-shadow:0 2px 3px #000;min-height:24px}
.coin-cap.empty{opacity:.55}
.pick{display:flex;gap:8px;flex-wrap:wrap}
.pick button{flex:1 1 0;min-width:0;min-height:46px;border:2.5px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);font:400 15px var(--hand);box-shadow:2px 2px 0 #000;padding:3px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.pick button[aria-checked="true"]{background:var(--pad);transform:translate(1px,1px);box-shadow:1px 1px 0 #000;outline:2px dashed var(--ink);outline-offset:-6px}
.pick.sym{display:grid;grid-template-columns:repeat(3,1fr)}
.pick.sym button{min-height:62px}
.pick.sym .pick-h{grid-column:1/-1;margin:8px 0 0;font:400 17px var(--hand);color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px}
.pick.sym .pick-h small{font-size:13px;opacity:.7}
.pick .back-thumb{content-visibility:auto}
.pick .back-thumb{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#c99a45,#8a6322);box-shadow:inset 0 0 0 1.5px #5a3a0c}
.pick button small{display:block;font-size:12px;opacity:.8;line-height:1.05}
.pick .sw{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block}
.me-info .nm .seat-coin{display:inline-flex;width:22px;height:22px;margin:-4px 2px -4px -4px}
.me-info .nm .seat-coin svg{width:22px;height:22px}
/* compact coin step so the whole form fits a 390x844 phone */
.live-screen{padding-top:calc(22px + var(--safe-t))}
#liveCoin .live-inner{gap:8px}
#liveCoin .live-sign h2{font-size:25px}
#liveCoin .live-sign p{font-size:14px}
#coinPreview{width:156px;height:156px}
#coinPreview svg{width:156px;height:156px}
.coin-cap{font-size:18px;min-height:22px}
#liveCoin .paper-card{padding:10px 14px 12px;gap:2px}
#liveCoin .paper-card .lbl{margin-top:4px;font-size:16px}
#liveCoin .paper-card input{height:44px}
#liveCoin .field-err{min-height:16px;font-size:14px}
#liveCoin .hint{display:none}
#liveCoin .pick{gap:6px}
#liveCoin .pick.sym button{min-height:52px}
#liveCoin .pick button{min-height:40px;flex-direction:row;gap:5px}
#liveCoin .pick.sym button{flex-direction:column;gap:0}
#liveCoin .pick.sym button svg{width:28px;height:28px}
#liveCoin .note{margin-top:6px;font-size:14px}
#liveCoin .row{margin-top:8px}

/* ---- v12 core live: gate, two bankrolls, live lobby/table, ante picker, bonus, stake ---- */
.center-t{text-align:center}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 17px var(--mark)}
.btn.small{height:34px;padding:0 12px;font-size:15px}
.btn.wide{width:100%}
.two-banks{flex-wrap:wrap}
.two-banks .bank-pill{min-width:150px}
.bank-pill.live{border-color:#F7E36A;background:#2a1600cc}
.bank-pill.sm{flex:0 0 auto;font-size:14px;padding:4px 8px}
.bonus-tag{display:inline-block;background:#F7E36A;color:#1a1a1a;font:400 13px var(--mark);padding:1px 7px;border-radius:6px;border:2px solid #1a1a1a;transform:rotate(-2deg);white-space:nowrap}
.bonus-pop{margin-top:8px;font:400 30px var(--mark);color:#F7E36A;text-shadow:2px 2px 0 #000;animation:bonuspop .9s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bonuspop{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:confall 2.6s linear forwards}
.confetti i:nth-child(3n){background:#E2342B}.confetti i:nth-child(3n+1){background:#F7E36A}.confetti i:nth-child(3n+2){background:#21B8A6}
@keyframes confall{to{transform:translateY(110vh) rotate(720deg)}}
.coin-stage{display:flex;justify-content:center;gap:14px;margin:6px 0}
.coin-stage svg{width:150px;height:150px;filter:drop-shadow(3px 4px 0 #000)}
.coin-cap{text-align:center;font:400 17px var(--mark)}
.minted-card{align-items:center}
.minted-meta{display:flex;flex-direction:column;align-items:center;font:400 19px var(--mark)}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 10px;border:2.5px solid var(--ink);border-radius:8px;background:#fff;font:400 16px var(--hand);color:var(--ink)}
.pick button[aria-checked="true"]{background:#F7E36A;box-shadow:2px 2px 0 #000}
.pick.sym button svg{width:30px;height:30px}
.sw{display:inline-block;width:22px;height:22px;border-radius:50%;border:4px solid;background:#d9b75a}
.ring-red{border-color:#C8231C}.ring-turquoise{border-color:#21B8A6}.ring-black{border-color:#111}
.field-err{color:#B3140D;font-size:15px;min-height:18px}
.ll-head{display:flex;align-items:center;gap:10px;width:100%}
.ll-head h2{flex:1;margin:0;font:400 26px var(--mark)}
.seg{display:flex;width:100%;border:2.5px solid #F4F1E8;border-radius:10px;overflow:hidden;margin:10px 0}
.seg button{flex:1;height:42px;background:#0009;color:#F4F1E8;border:0;font:400 16px var(--mark)}
.seg button[aria-pressed="true"]{background:#F7E36A;color:#111}
#tablesList{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px}
.ltable{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:8px;padding:10px 12px;box-shadow:3px 3px 0 #000}
.ltable>div{display:flex;flex-direction:column}
.ltable b{font:400 20px var(--mark)}
.ltable.high{background:#FBE9B5}
.lt-type{font-size:14px;font-weight:700}
.lt-sub{font-size:14px;opacity:.75}
#liveTable{display:none;flex-direction:column}
#liveTable.active{display:flex}
.lv-title{flex:1;display:flex;flex-direction:column;line-height:1.1}
.lv-title b{font:400 20px var(--mark)}
.lv-title small{font-size:13px;opacity:.85}
.lv-hud{text-align:center;font:400 17px var(--mark);color:#F7E36A;padding:2px 0}
.lv-note{margin:4px 12px;padding:6px 10px;background:#F7E36A;color:#111;border:2px solid #111;border-radius:8px;font-size:15px;text-align:center}
.lv-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px;padding:6px 10px}
.lseat{background:#000000a8;border:2px solid #F4F1E860;border-radius:8px;padding:5px 7px;font-size:14px;position:relative}
.lseat .nm{display:flex;align-items:center;gap:4px;font:400 15px var(--mark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lseat .bk{color:#F7E36A}.lseat .cnt{opacity:.7;font-size:12px}
.lseat.turn{border-color:#F7E36A;box-shadow:0 0 0 2px #F7E36A}
.lseat.mine{background:#1d3a2acc}
.lseat.folded{opacity:.5}
.lseat .dealer{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#fff;color:#111;font-size:12px}
.lseat .tag{font-size:11px;background:#E2342B;color:#fff;border-radius:4px;padding:0 4px;display:inline-block}
.lv-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.lv-pot{display:flex;gap:8px;align-items:baseline;font:400 18px var(--mark)}
.lv-pot b{font-size:30px;color:#F7E36A}
.lv-side,.lv-coins{font-size:14px;text-align:center}
.coin-in{display:inline-flex;align-items:center;gap:6px;background:#2a1600cc;border:2px dashed #F7E36A;border-radius:8px;padding:3px 8px;animation:bonuspop .6s both}
.coin-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(#ffe48a,#b98a1e);border:2px solid #C8231C}
.clock{font:400 18px var(--mark);color:#E2342B;margin-left:6px}
.panel.warn{border-color:#E2342B}
.row.col{flex-direction:column}
#betMaxLbl,#lvBetMax{font:400 15px var(--hand);opacity:.8;margin-left:6px}
#lvBet{line-height:1.05}#lvBet small.cap{display:block;font:400 13px var(--hand);opacity:.85}
.auth-links{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:10px}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;font-size:15px;color:var(--ink);text-decoration:underline;cursor:pointer}
.help-link{font-size:15px;color:var(--ink);text-decoration:underline}
.rec-msg{font-size:15px;margin:4px 0}
.rec-pane.hidden{display:none}
.privacy-link{display:inline-block;margin-top:8px;font-size:15px;color:var(--ink);text-decoration:underline}.privacy-link.hidden{display:none}

/* ---------- live table = the free-play table (scratch build) ---------- */
#lvSeats{position:absolute;inset:0;z-index:3;pointer-events:none}
#lvSeats .seat{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lvSeats .seat:active .nm{filter:brightness(.92)}
.seat .nm .seat-coin{display:inline-flex;width:20px;height:20px;margin:-4px 2px -4px -4px}
.seat .nm .seat-coin svg{width:20px;height:20px}
#lvMeInfo .nm{cursor:pointer}
#lvBet{line-height:1.05}#lvBet small.cap{display:block;font:400 13px var(--hand);opacity:.85}
#liveTable .lv-coins{font-size:13px;text-align:center;max-width:220px}
.prof{text-align:center;position:relative}
.prof .prof-coins{display:flex;justify-content:center;gap:10px;margin:6px 0}
.prof .prof-coin svg{width:150px;height:150px;max-width:40vw;max-height:40vw;filter:drop-shadow(0 6px 8px #0009)}
.prof .prof-cap{font:400 17px var(--mark);margin:2px 0 8px}
.prof .prof-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.prof .prof-stats span{display:flex;flex-direction:column;align-items:center;background:#0002;border-radius:6px;padding:4px 10px;min-width:62px}
.prof .prof-stats b{font:400 20px var(--mark)}.prof .prof-stats i{font-style:normal;font-size:12px;opacity:.8}
.prof .prof-held h4{margin:10px 0 4px;font:400 16px var(--mark)}
.prof .held-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-height:30vh;overflow:auto}
.prof .held-coin{margin:0;display:flex;flex-direction:column;align-items:center;width:84px;font-size:12px;line-height:1.15}
.prof .held-coin svg{width:64px;height:64px}
.prof .held-coin[data-bfig]{cursor:pointer}.prof .held-coin .bounty-btn{margin-top:4px;font-size:12px;padding:4px 8px}
.prof .bounty-confirm{margin:10px 0;padding:10px;border:2px solid #2b2b2b;border-radius:10px;background:#fff8e1}.prof .bounty-confirm p{margin:0 0 8px}
.prof .held-coin b{display:block;font:400 13px var(--mark)}.prof .held-coin small{display:block;opacity:.75}
.prof.panel{max-height:92vh;overflow:auto}
#profOv{z-index:60}

/* ---- test copy: practice table, test tools, voluntary coin, jar coins, alerts ---- */
.ll-extra{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ltable.practice{border-style:dashed}
#lvMenuOv,#ttOv,#ttLogOv{z-index:70}
.tt h3 small{font:400 12px var(--ui,system-ui);opacity:.7;margin-left:6px}
.tt .tt-sec{margin:8px 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.tt .tt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tt .tt-grid .btn{font-size:13px;padding:8px 6px;min-height:0}
.tt .tt-grid .btn.wide2{grid-column:span 2}
.tt .tt-grid .btn.on{outline:3px solid #F7E36A}
.tt-log{font-size:12px;line-height:1.35;max-height:56vh;overflow:auto}
.tt-log table{width:100%;border-collapse:collapse}
.tt-log td,.tt-log th{border-bottom:1px solid #ffffff22;padding:3px 4px;text-align:left;vertical-align:top}
.tt-log th{font-weight:600;opacity:.8}
.tt-log .ev-lost{color:#ffb347;font-weight:700}
.tt-log .ev-staked{color:#F7E36A}
.jar-coins{position:absolute;left:50%;top:22%;transform:translateX(-50%);display:flex;gap:2px;z-index:6;pointer-events:none}
.jar-coins .jc{display:flex;flex-direction:column;align-items:center;animation:bonuspop .6s both;filter:drop-shadow(0 2px 2px #0008)}
.jar-coins .jc small{font-size:9px;background:#111c;color:#F7E36A;border-radius:4px;padding:0 3px;margin-top:-2px;white-space:nowrap}
#lvCoinIn{font-size:13px}
.alert-card{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:90;max-width:340px;width:calc(100% - 24px);background:#F7E36A;color:#111;border:2px solid #111;border-radius:10px;padding:8px 12px;font-size:14px;box-shadow:0 4px 14px #0009}
.alert-card b{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
#liveTable .actions #lvCoinIn{font-size:12px;line-height:1.05;white-space:normal;max-width:78px;padding:4px 6px}
#lostOv{z-index:66}

/* ---- signup v2 (verify, 18+, notifications) ---- */
.logo.small h1 .big{font-size:44px}.logo.small{margin-bottom:0}
.ob-card .ob-keep{background:#fff6d6;border:2px dashed #c9a640;border-radius:10px;padding:8px 10px;margin:0 0 10px;font-size:14px}
.ob-code{font-size:28px;letter-spacing:10px;text-align:center}
.ob-sent{margin:0 0 6px}
.ob-test{margin-top:12px;padding:8px;border:2px dashed #b23;border-radius:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.ob-test b{font-size:18px;letter-spacing:3px}
.ob-stop{font:400 22px var(--mark);color:#b23;margin:0 0 8px}
.ob-tog{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid #0002;cursor:pointer}
.ob-tog span{display:flex;flex-direction:column}.ob-tog small{font-size:12px;opacity:.75}
.ob-tog input{position:absolute;opacity:0;pointer-events:none}
.ob-tog i{flex:none;width:50px;height:28px;border-radius:14px;background:#bbb;position:relative;border:2px solid #222;transition:background .15s}
.ob-tog i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #222;transition:left .15s}
.ob-tog input:checked+i{background:#2e8b57}.ob-tog input:checked+i::after{left:22px}
/* ---- rewarded ads ---- */
.btn.ads-home{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;background:#fff6d6;color:#222;border:2px solid #222;padding:8px 12px;height:auto}
.ads-home .ads-ico{width:34px;height:34px;border-radius:50%;background:#c0392b;color:#fff;display:grid;place-items:center;font-size:15px;flex:none}
.ads-home span{display:flex;flex-direction:column}.ads-home small{font-size:12px;opacity:.75;font-family:inherit}
.bonus-home .ads-ico{background:#d4a017;color:#222}.btn.bonus-home.wait,.btn.bonus-home:disabled{opacity:1;background:#f1f1ec;cursor:default}.btn.bonus-home.wait .ads-ico{background:#999;color:#fff}
.ads-sheet{position:relative}.ads-sheet .x{position:absolute;right:10px;top:10px}
.ads-dots{display:flex;gap:10px;justify-content:center;margin:8px 0}
.ads-dots i{width:34px;height:34px;border-radius:50%;border:3px solid #222;display:grid;place-items:center;font-style:normal;font-weight:700;background:#fff}
.ads-dots i.done{background:#2e8b57;color:#fff}.ads-dots i.next{background:#e2b448}
.ads-prog{text-align:center;font:400 22px var(--mark);margin:0 0 6px}
#testAdOv{z-index:90;background:#000}
.test-ad{position:fixed;inset:0;background:linear-gradient(160deg,#1b2a4a,#0b0f1a);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.test-ad .x{position:absolute;right:14px;top:calc(14px + var(--safe-t,0px));background:#fff;color:#000;opacity:.35}
.test-ad .x.ready{opacity:1}
.test-ad-tag{position:absolute;left:14px;top:calc(18px + var(--safe-t,0px));background:#e2b448;color:#000;font-weight:700;padding:3px 8px;border-radius:6px;font-size:12px;letter-spacing:1px}
.test-ad-art{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.test-ad-art b{font:400 30px var(--mark)}.test-ad-art small{opacity:.7;max-width:260px}
.test-ad-count{font-size:64px;font-weight:700;width:110px;height:110px;border-radius:50%;border:5px solid #e2b448;display:grid;place-items:center}
.test-ad-what{font:400 22px var(--mark)}
/* house ads: full-screen promo clip, letterboxed, no controls */
#houseAdOv{z-index:90;background:#000}
.house-ad{position:fixed;inset:0;background:#000;color:#fff}
.house-ad video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none}
.had-top{position:absolute;left:0;right:0;top:0;padding:calc(14px + var(--safe-t,0px)) 14px 10px;display:flex;align-items:center;gap:8px;background:linear-gradient(#000a,#0000)}
.had-tag{background:#e2b448;color:#000;font-weight:700;padding:3px 8px;border-radius:6px;font-size:12px;letter-spacing:1px}
.had-title{flex:1;font-weight:700;font-size:14px;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.house-ad .x{position:static;background:#fff;color:#000;opacity:.55}
.had-sound,.had-resume{position:absolute;left:50%;transform:translateX(-50%);border:0;border-radius:999px;background:#000b;color:#fff;font:700 15px system-ui,sans-serif;padding:10px 18px;box-shadow:0 0 0 2px #e2b448}
.had-sound{top:calc(64px + var(--safe-t,0px))}.had-sound.on{box-shadow:none;opacity:.75}
.had-resume{top:45%;font-size:18px;padding:14px 22px}
.had-hold{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--safe-b,0px));background:#000b;color:#e2b448;font:700 13px system-ui,sans-serif;padding:6px 12px;border-radius:999px;white-space:nowrap}
.had-bot{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(16px + var(--safe-b,0px));background:linear-gradient(#0000,#000c)}
.had-bar{height:6px;border-radius:3px;background:#ffffff33;overflow:hidden}.had-bar i{display:block;height:100%;width:0;background:#e2b448}
.had-what{margin-top:8px;font:400 18px var(--mark);text-align:center}
.had-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000b;padding:24px}
.had-end .panel{max-width:340px;width:100%;text-align:center}
.had-got{font:400 26px var(--mark);color:var(--ink,#1a1c1b)}.had-end-title{margin:6px 0 12px;font-weight:700}
.had-end a.btn{text-decoration:none;display:block}

/* one-coin: empty disc for a coinless seat / profile */
.coin-none{display:inline-block;border-radius:50%;border:2px solid rgba(244,241,232,.45);background:rgba(0,0,0,.25);box-sizing:border-box;vertical-align:middle;margin-right:4px;flex:none}

/* table chat: preset picker, seat bubbles, muted tag */
#lvBubbles{position:absolute;inset:0;z-index:6;pointer-events:none}
.chat-bub-w{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:180px}
.chat-bub{position:relative;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:4px 10px;font:400 15px/1.15 var(--mark);box-shadow:2px 2px 0 #000;text-align:center;animation:pop .2s}
.chat-bub::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}
.chat-bub.emoji{font-size:30px;line-height:1;padding:4px 8px;border-radius:50%}
.chat-bub.mine{rotate:-1.5deg}
#lvSeats .seat .chat-muted{position:absolute;top:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 11px/1.3 var(--mark);background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;padding:0 6px}
.chat-sheet{max-height:82vh;display:flex;flex-direction:column}
.chat-tabs{display:flex;gap:6px;margin:4px 0 8px}
.chat-tabs button{flex:1;padding:7px 0;border:2px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font:400 16px var(--mark);cursor:pointer}
.chat-tabs button.on{background:var(--gold,#e2b448)}
.chat-grid{overflow:auto;-webkit-overflow-scrolling:touch;display:grid;gap:6px;padding-bottom:4px}
.chat-grid.lines{grid-template-columns:1fr 1fr}
.chat-grid.emoji{grid-template-columns:repeat(5,1fr)}
.chat-l{padding:8px 6px;border:2px solid var(--ink);border-radius:8px;background:#fffdf5;color:var(--ink);font:400 14px/1.15 var(--mark);text-align:left;cursor:pointer}
.chat-e{padding:8px 0;border:2px solid var(--ink);border-radius:10px;background:#fffdf5;font-size:28px;line-height:1;cursor:pointer}
.chat-l:active,.chat-e:active{filter:brightness(.92)}
#lvChatBtn.hidden{display:none}

/* affiliate (test stack): offer sheet + dashboard */
.aff-home{display:block;margin:6px auto 0}
.aff .aff-terms{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:16px}
.aff .aff-terms input{width:22px;height:22px}
.aff .aff-err{color:#b3261e;min-height:1em}
.aff .aff-link{display:flex;gap:8px;align-items:center;margin:6px 0}
.aff .aff-link input{flex:1;min-width:0;font:inherit;font-size:15px;padding:8px;border:2px solid #2b2b2b;border-radius:8px;background:#fff}
.aff dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0}
.aff dt{opacity:.75}
.aff dd{margin:0;font-weight:700}
.aff .aff-scope{font-size:13px;opacity:.75}