:root{--g:#2F4A2E;--gd:#1f331f;--gl:#3d5e3b;--cream:#F4E6C4;--y:#C98E10;--yl:#e3ab2e;--ink:#1d2e1c;--cw:64px;--ch:90px;--mw:86px;--mh:120px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Trebuchet MS",Verdana,sans-serif;color:var(--cream);min-height:100vh;background-color:var(--g);
background-image:radial-gradient(ellipse at 50% 40%,#ffffff14,#0000 60%,#00000055),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F4E6C4' opacity='.05'%3E%3Cellipse cx='30' cy='42' rx='10' ry='15'/%3E%3Cellipse cx='20' cy='22' rx='7' ry='10' transform='rotate(-25 20 22)'/%3E%3Cellipse cx='40' cy='22' rx='7' ry='10' transform='rotate(25 40 22)'/%3E%3Ccircle cx='20' cy='11' r='3' fill='%23C98E10'/%3E%3Ccircle cx='41' cy='11' r='3' fill='%23C98E10'/%3E%3Cpath d='M70 100l8-14-2-10 6 6 10 1 9 6-2 4h-9l-4 9z'/%3E%3C/g%3E%3C/svg%3E")}
header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--gd);border-bottom:3px solid #142214;flex-wrap:wrap}
.key{display:inline-block;background:linear-gradient(#f8eed6,#dccfae);color:var(--g);font:bold 16px/1 "Courier New",monospace;letter-spacing:2px;padding:9px 26px;border-radius:8px;box-shadow:0 4px 0 #9c9070,0 6px 8px #0008;user-select:none}
.title{font-size:20px;letter-spacing:1px;color:var(--yl)}header .sp{flex:1}.tag{font:12px "Courier New",monospace;opacity:.85}
button{font:bold 15px "Trebuchet MS",sans-serif;background:linear-gradient(#f8eed6,#dccfae);color:var(--g);border:0;border-radius:9px;padding:10px 16px;min-height:44px;box-shadow:0 4px 0 #9c9070;cursor:pointer;margin:3px;touch-action:manipulation}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #9c9070}button:disabled{opacity:.35;cursor:default;transform:none}
button.ic{width:44px;padding:0;font-size:20px;border-radius:50%}button.ic.on{background:linear-gradient(#f0c35e,var(--y));}
button.brakk,button.big.brakk{background:linear-gradient(#f0c35e,var(--y));color:#1d2e1c;box-shadow:0 4px 0 #7d5808}
button.big{font-size:18px;padding:12px 24px;min-height:52px}
a.buy{font:bold 14px sans-serif;background:var(--cream);color:var(--g);text-decoration:none;padding:12px 14px;border-radius:9px;box-shadow:0 4px 0 #9c9070;margin:3px}
main{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:12px;max-width:1300px;margin:auto}
@media(max-width:850px){main{grid-template-columns:1fr}}
.panel{background:#0000002e;border:1px solid #F4E6C422;border-radius:12px;padding:10px;margin-bottom:10px}
#table{background:radial-gradient(ellipse at center,#ffffff10,#0000 70%);border-radius:24px;border:2px solid #F4E6C41a;padding:10px;box-shadow:inset 0 0 40px #0006}
.opps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.seat{background:#00000026;border-radius:12px;padding:6px 8px 8px;text-align:center;border:2px solid transparent;transition:border-color .3s,box-shadow .3s}
.seat.active{border-color:var(--y);box-shadow:0 0 18px #C98E1066}
.seat h3{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:6px;justify-content:center;font-weight:bold}
.seat .tot{font-size:12px;opacity:.75;font-weight:normal}.called{background:var(--y);color:#1d2e1c;border-radius:6px;padding:1px 6px;font-size:11px}
.av{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:var(--y);flex:none}.av svg{width:22px;height:22px}
.av.a1{background:#6E7F3A}.av.a2{background:#C4502B}.av.a3{background:#8a6d3b}.av.a4{background:#4f7a6a}.av.a5{background:#a1731a}
.grid{display:grid;grid-template-columns:repeat(2,auto);gap:6px;justify-content:center}
.card{width:var(--cw);height:var(--ch);border-radius:6px;overflow:hidden;position:relative;box-shadow:0 2px 5px #0008;user-select:none;transition:filter .25s,transform .2s}
.mine .card,.slot .card{width:var(--mw);height:var(--mh)}
.slot{width:var(--mw);height:var(--mh);border-radius:8px;border:2px dashed #F4E6C433;position:relative}
.slot.held{border-color:#C98E1077}
.card.back{background:url(img/back.png) center/cover no-repeat,var(--g)}
.card.face{background:#F4E6C4 center/cover no-repeat}
.card.pick{cursor:pointer;box-shadow:0 0 0 3px var(--y),0 0 16px #C98E10aa;animation:pulse 1.4s ease-in-out infinite}
.card.pick:hover{transform:translateY(-4px)}.card.sel{box-shadow:0 0 0 4px var(--cream),0 0 20px #F4E6C4;transform:translateY(-6px)}
.picking .seat .card:not(.pick):not(.sel){filter:brightness(.55) saturate(.6)}
.slot.off .card{filter:brightness(.7)}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--yl),0 0 24px #e3ab2ecc}}
.eye{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0008}
.eye svg{width:15px;height:15px}.eye b{position:absolute;left:-18px;top:2px;background:var(--cream);color:var(--g);font-size:11px;border-radius:4px;padding:0 3px}
.flipin{animation:flip .45s cubic-bezier(.3,.7,.3,1) both}@keyframes flip{0%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
.glow{animation:glow .9s ease-in-out 2}@keyframes glow{50%{box-shadow:0 0 0 4px var(--cream),0 0 26px var(--cream);transform:translateY(-6px)}}
.ghost{position:fixed;z-index:60;margin:0;transform-origin:0 0;pointer-events:none;box-shadow:0 10px 22px #000a}
.centre{display:flex;gap:18px;justify-content:center;align-items:flex-start;margin:14px 0 8px}
.pile{text-align:center}.lbl{font-size:12px;margin-top:4px;opacity:.85}
#prompt{text-align:center;font-size:18px;font-weight:bold;margin:6px auto;padding:10px 14px;max-width:640px;min-height:48px;background:#0000003a;border-radius:12px;border-left:5px solid var(--y)}
#prompt small{display:block;font-weight:normal;font-size:13px;opacity:.85;margin-top:2px}
#actions{text-align:center;min-height:56px}
.mehand{margin-top:8px}
#scores h4{margin:0 0 8px;color:var(--yl)}.sc{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px}.sc.cur{background:#C98E1022}
.sc .n{flex:1;font-size:14px}.sc .p{font-weight:bold;font-size:16px}.bar{height:5px;background:#ffffff18;border-radius:3px;margin-top:3px}.bar i{display:block;height:100%;background:var(--y);border-radius:3px}
.small{font-size:12px;opacity:.8}
#log{height:260px;overflow:auto;font:12px/1.35 "Courier New",monospace}#log div{border-bottom:1px solid #ffffff12;padding:2px 0}
.ov{position:fixed;inset:0;background:#0d180dcc;display:flex;align-items:center;justify-content:center;z-index:40;padding:14px;backdrop-filter:blur(3px)}
.ov .box{background:var(--cream);color:var(--ink);border-radius:16px;padding:18px 20px;max-width:440px;width:100%;text-align:center;box-shadow:0 20px 50px #000a;max-height:92vh;overflow:auto;animation:pop .3s ease-out}
.ov .box.wide{max-width:620px}@keyframes pop{from{transform:scale(.9);opacity:0}}
.ov h2{margin:10px 0 6px;color:var(--g)}.ov .key{box-shadow:0 3px 0 #9c9070}
.ov button{background:#fff8e6;box-shadow:0 4px 0 #b9ab85}.btns{margin-top:12px}
.row{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.prow{display:flex;align-items:center;gap:6px;margin:6px 0;justify-content:center}
.prow input,.prow select,.row select{font:15px sans-serif;padding:9px;border-radius:8px;border:2px solid #2F4A2E55;min-height:44px;background:#fff}.prow input{width:140px}
#nP button{width:48px;padding:0}#nP button.on{background:var(--g);color:var(--cream);box-shadow:0 4px 0 #142214}
.chk{display:flex;align-items:center;gap:6px;font-weight:bold}.chk input{width:22px;height:22px}
.tcards{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}.tcards .card{width:70px;height:98px}.tcards figure{margin:0;font-size:12px;font-weight:bold;color:var(--g)}
.dots{margin-top:8px}.dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2F4A2E44;margin:0 3px}.dots i.on{background:var(--g)}
.pwimg .card{width:120px;height:168px;margin:auto;animation:flip .5s both}
.rp{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;margin:4px 0;background:#2F4A2E14;flex-wrap:wrap;justify-content:center;text-align:left}
.rp.win{background:#C98E1033;outline:2px solid var(--y)}.rp .nm{min-width:90px;font-weight:bold}.rp .cs{display:flex;gap:4px}.rp .cs .card{width:38px;height:53px;animation:flip .4s both}
.rp .num{font-size:20px;font-weight:bold;min-width:40px}.pen{background:#C4502B;color:#fff;border-radius:6px;padding:3px 8px;font-weight:bold}.rt{font-size:13px;opacity:.85}
.crown{color:var(--y);font-size:20px}.note{font-weight:bold;color:var(--g)}
.banner{position:fixed;left:50%;top:40%;z-index:70;font:900 64px/1 "Trebuchet MS",sans-serif;color:var(--y);letter-spacing:4px;text-shadow:0 4px 0 #1d2e1c,0 0 30px #000;pointer-events:none;transform:translate(-50%,-50%)}
.banner.go{animation:ban 1.4s cubic-bezier(.2,.8,.3,1) both}@keyframes ban{0%{transform:translate(-50%,-50%) scale(.2) rotate(-10deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg);opacity:1}75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.conf{position:fixed;top:-12px;width:10px;height:14px;z-index:80;pointer-events:none;border-radius:2px}
.hidden{display:none!important}
dialog{background:var(--cream);color:var(--ink);border-radius:12px;border:0;max-width:520px;width:95%}dialog label{display:block;margin:6px 0}dialog input[type=number]{width:70px}
body.public .pto{display:none!important}
.opps.many{--cw:52px;--ch:73px}
@media(max-width:600px){:root{--cw:46px;--ch:64px;--mw:72px;--mh:101px}.opps.many{--cw:40px;--ch:56px}.opps{gap:6px}.seat{padding:4px}.seat h3{font-size:12px}.av{width:22px;height:22px}.av svg{width:17px}
 main{padding:6px}#table{padding:6px;border-radius:16px}.centre{gap:10px}#prompt{font-size:16px}.key{padding:8px 14px}.title{display:none}a.buy{display:none}.pt-l{display:none}.banner{font-size:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.banner.sm{font-size:40px;letter-spacing:1px;white-space:nowrap}
@media(max-width:600px){.banner.sm{font-size:26px}}
button.match{background:linear-gradient(#f8eed6,#e3ab2e);color:#1d2e1c;box-shadow:0 4px 0 #7d5808;animation:pulse 1.2s ease-in-out infinite}
button.match.on{background:var(--cream);animation:none}
.empty{width:var(--cw);height:var(--ch);border:2px dashed #F4E6C466;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;opacity:.85;grid-column:1/-1;margin:auto}
.mine .empty{width:var(--mw);height:var(--mh)}
.empty b{font-size:26px;color:var(--yl)}
.empty.pick{cursor:pointer;box-shadow:0 0 0 3px var(--y),0 0 16px #C98E10aa}
.grid.wide{grid-template-columns:repeat(3,auto)}
fieldset{border:1px solid #0003;border-radius:8px;margin:8px 0}

.pile{position:relative}
.mwt{position:absolute;top:-14px;right:-18px;width:46px;height:46px;border-radius:50%;z-index:5;display:grid;place-items:center;
background:conic-gradient(var(--y) calc(var(--f,1)*360deg),#1d2e1c 0);box-shadow:0 2px 8px #000a}
.mwt::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gd)}
.mwt b{position:relative;font-size:20px;color:var(--cream)}
.mwt.hidden{display:none}

.wm,.wm img{display:inline-block;height:30px;width:auto;line-height:0}