.zapp{max-width:520px;margin:0 auto;padding:14px 16px 40px;min-height:100vh;min-height:100dvh;color:var(--ink)}
.zmsg{text-align:center;color:var(--muted);margin:30vh 0 0}
.zhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.zhead b{font:700 15px var(--sans,inherit);color:var(--pri);display:inline-flex;align-items:center;gap:8px}
.zhead b::before{content:"";flex:0 0 24px;width:24px;height:24px;border-radius:6px;background:url(/icon-192.png) center/cover}
.zsnd{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;min-height:36px}
.zcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.zcard h2{margin:0 0 8px;font:700 13px var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--accd)}
.zbanner{border-radius:12px;padding:12px 14px;margin:10px 0;font-weight:600}
.zbanner.warn{background:var(--warnbg);color:var(--warn)}.zbanner.info{background:var(--infobg);color:var(--info)}.zbanner.ok{background:var(--okbg);color:var(--ok)}.zbanner.bad{background:var(--badbg);color:var(--bad)}
.zbanner.zflush{margin:0 0 8px}

/* the board: square cells placed by classes (gcN = column, grN = row counted from the top), a ladders-and-snakes layer above them */
.sqwrap{position:relative;max-width:480px;margin:0 auto}
.sqgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:1}
.g10{grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}
.g12{grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr)}
.g15{grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr)}
.gc1{grid-column:1}.gc2{grid-column:2}.gc3{grid-column:3}.gc4{grid-column:4}.gc5{grid-column:5}.gc6{grid-column:6}.gc7{grid-column:7}.gc8{grid-column:8}.gc9{grid-column:9}.gc10{grid-column:10}.gc11{grid-column:11}.gc12{grid-column:12}.gc13{grid-column:13}.gc14{grid-column:14}.gc15{grid-column:15}
.gr1{grid-row:1}.gr2{grid-row:2}.gr3{grid-row:3}.gr4{grid-row:4}.gr5{grid-row:5}.gr6{grid-row:6}.gr7{grid-row:7}.gr8{grid-row:8}.gr9{grid-row:9}.gr10{grid-row:10}.gr11{grid-row:11}.gr12{grid-row:12}.gr13{grid-row:13}.gr14{grid-row:14}.gr15{grid-row:15}
.sq{position:relative;background:var(--sunk);min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.sq.a{background:#DCEAE8}
.sq.lb{background:#D3EEDB}.sq.sh{background:#F6D9D9}
.sq.ms{box-shadow:inset 0 0 0 2px var(--accd)}
.sq.end{background:var(--acc)}
.sq.me{box-shadow:inset 0 0 0 2px var(--pri)}
.sq.ms.me{box-shadow:inset 0 0 0 2px var(--pri),inset 0 0 0 4px var(--accd)}
.sq b{position:absolute;top:1px;left:2px;font:700 clamp(7px,2.1vw,11px)/1 var(--sans,inherit);color:var(--ink2);font-variant-numeric:tabular-nums}
.sq .mk{position:absolute;font-size:clamp(7px,2vw,10px);line-height:1}
.sq .mk1{top:1px;right:2px;color:#7A4F00}
.sq .mk2{bottom:1px;right:2px}
.sq.lb .mk2{color:#116B33}.sq.sh .mk2{color:#A31B1B}
.pawn{display:block;width:52%;height:52%;border-radius:50%;background:var(--acc);border:2px solid var(--deep);box-sizing:border-box;position:relative;z-index:1}
.pawn.me{background:var(--acc);border-color:#000}
.pawn.t{width:44%;height:44%;margin:0 1px;background:var(--pri);border-color:#fff;color:#fff;font:800 clamp(6px,1.9vw,10px)/1 var(--sans,inherit);display:flex;align-items:center;justify-content:center;font-style:normal}
.pawn.t.me{background:var(--acc);color:#000;border-color:#000}
.pawn.t.more{background:var(--ink2)}
.sqsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sqsvg .rail{stroke:#15803D;stroke-width:.08;stroke-linecap:round}
.sqsvg .rung{stroke:#15803D;stroke-width:.06;stroke-linecap:round}
.sqsvg .snk{fill:none;stroke:#B91C1C;stroke-width:.14;stroke-linecap:round;opacity:.85}
.sqsvg .snkhead{fill:#7F1D1D}
.sqsvg .snkdot{fill:#B91C1C}
.zpos{margin:0 0 8px;font-size:14px}
.zleg{margin:8px 0 0}
.zlist2{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}

/* the dice card */
.zdicetop{display:flex;align-items:center;gap:14px}
.zring{position:relative;width:76px;height:76px;flex:0 0 76px}
.zring svg{width:100%;height:100%;display:block}
.zring .bg{fill:none;stroke:var(--sunk);stroke-width:5}
.zring .fg{fill:none;stroke:var(--pri);stroke-width:5;stroke-linecap:round}
.zring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 24px var(--sans,inherit);font-variant-numeric:tabular-nums}
.zstate{min-width:0}
.zstate b{font-size:16px;line-height:1.3}
.zthrow{display:flex;gap:12px;align-items:center;margin-top:12px}
.zrolled{font-size:18px}
.die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:64px;height:64px;flex:0 0 64px;padding:8px;gap:2px;background:#fff;border:2px solid var(--pri);border-radius:12px;box-sizing:border-box}
.pip{display:block;border-radius:50%}
.pip.on{background:var(--pri)}
.zmissed{margin:8px 0 0}

/* the crowd strip: ten bars, one per band of the board */
.zcrowd{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;height:150px}
.cbar{display:grid;grid-template-rows:18px 1fr 16px;justify-items:center;min-width:0}
.cbar em{font:700 12px var(--sans,inherit);font-style:normal;color:var(--ink2);font-variant-numeric:tabular-nums}
.cbar small{font:600 10px var(--sans,inherit);color:var(--muted)}
.bh{display:block;width:100%;align-self:end;background:var(--pri2);border-radius:4px 4px 0 0}
.cbar.me .bh{background:var(--acc);box-shadow:inset 0 0 0 2px var(--deep)}
.bh0{height:2px;background:var(--line)}.bh1{height:5%}.bh2{height:10%}.bh3{height:15%}.bh4{height:20%}.bh5{height:25%}.bh6{height:30%}.bh7{height:35%}.bh8{height:40%}.bh9{height:45%}.bh10{height:50%}.bh11{height:55%}.bh12{height:60%}.bh13{height:65%}.bh14{height:70%}.bh15{height:75%}.bh16{height:80%}.bh17{height:85%}.bh18{height:90%}.bh19{height:95%}.bh20{height:100%}
.zcrowdtxt{margin:8px 0 0}

/* standings and teams */
.zstand{list-style:none;padding:0;margin:0}
.zrk{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:7px 0;border-top:1px solid var(--line2);font-size:14px;align-items:baseline}
.zrk:first-child{border-top:0}
.zrk.you{background:var(--okbg);border-radius:8px;padding-left:6px;padding-right:6px}
.zrk em{font-style:normal;color:var(--ok);font-weight:700}
.zr{font-weight:800;color:var(--pri)}
.zq{color:var(--muted);font-variant-numeric:tabular-nums}
.zmyrank{margin:8px 0 0}
.ztable{width:100%;border-collapse:collapse;font-size:14px}
.ztable th,.ztable td{text-align:left;padding:6px 4px;border-top:1px solid var(--line2);font-weight:600}
.ztable thead th{font-size:12px;color:var(--muted);border-top:0}
.ztable tr.you{background:var(--okbg)}

.l0{--lc:#1D4ED8}.l1{--lc:#B91C1C}.l2{--lc:#374151}.l3{--lc:#15803D}.l4{--lc:#C2410C}
.zmode{font:700 11px var(--sans,inherit);letter-spacing:.06em;text-transform:none;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;margin-left:6px}
.zrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:14px}
.zrow:first-of-type{border-top:0}
.zrow em{font-style:normal;color:var(--ok);font-weight:700}
.zrow i{font-style:normal;color:var(--muted)}
.zform label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.zform input[type=text],.zform input:not([type]),.zform input[type=tel]{width:100%;box-sizing:border-box;min-height:46px;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
/* the consent boxes (consent.js draws them with inline styles, which this page's style policy blocks: the same look is set here) */
.cbc{border:0;padding:0;margin:8px 0;min-width:0}
.cbc .cbc-box{display:flex;gap:10px;align-items:flex-start;margin:8px 0;line-height:1.35;font-size:14px;color:var(--ink)}
.cbc-tick{width:22px;height:22px;flex:none;margin-top:2px}
.cbc-links{margin:4px 0 0}
.cbc legend.sr{position:absolute;left:-9999px}
.zbtn{width:100%;min-height:48px;margin-top:14px;border:0;border-radius:12px;background:var(--pri);color:#fff;font:700 16px var(--sans,inherit)}
.zbtn:disabled,.zbtn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.zbtn.s{width:auto;min-height:40px;margin-top:8px;padding:8px 14px;font-size:14px}
.zbtn.alt{background:var(--surface);color:var(--pri);border:1px solid var(--pri)}
.zsmall{font-size:12px;color:var(--muted);margin-top:8px}
/* small helpers (the page runs without inline styles) */
.zflush{margin:0}
.zgap{margin-bottom:8px}
.zbigline{font:700 20px var(--sans,inherit);margin:2px 0 4px}
.zmt{margin-top:10px}
.zbigger{font-size:15px;margin:6px 0 10px}
.zlink{word-break:break-all;background:var(--sunk);border-radius:8px;padding:8px;font-size:12px;margin-top:8px}
.zhow{display:block}
.zref{display:inline-block;margin-top:10px;padding:8px 2px;min-height:24px;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* link buttons look and align like real buttons */
a.zbtn{display:flex!important;align-items:center;justify-content:center;text-align:center;text-decoration:none;box-sizing:border-box}
a.zbtn.s,.zlinkbtn{display:inline-flex!important;align-items:center;text-decoration:none}

/* waiting room, announcements, scratch cards */
.zwait h3{margin:14px 0 4px;font-size:15px}
.zwait .zcount{font:700 44px/1.1 var(--sans,inherit);margin:6px 0}
.zlist{margin:4px 0 8px;padding-left:20px;font-size:15px}
.zlist li{margin:2px 0}
.zrules{list-style:none;padding-left:0}
.zann{border:2px solid #FFC93C}
.zscratch{border:0;border-radius:10px;padding:10px 16px;font:700 14px var(--sans,inherit);color:#555;cursor:pointer;background:repeating-linear-gradient(135deg,#c9c9c9,#ececec 6px,#bdbdbd 12px)}
a.zbtn#addcal{margin-left:6px}

/* winners, hurray, final thank-you, in-page media */
.zwin{background:linear-gradient(90deg,#fff6d6,#ffe9a8);border:1px solid #FFC93C;color:#5a4300;border-radius:10px;padding:10px 12px;margin:0;font:700 15px/1.35 var(--sans,inherit)}
.zcard.zwon{border-color:#FFC93C;box-shadow:0 0 0 2px #f1dca0}
.zprizes{border-color:#FFC93C}
.zfinal{background:linear-gradient(180deg,#FBFFFE,#fff);border-color:#FFC93C;text-align:center}
.zfinal .zfbig{font:700 22px/1.3 var(--serif,Georgia,serif);color:var(--pri);margin:4px 0}
.zhurray{position:fixed;inset:0;z-index:100;background:rgba(11,61,145,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.zhurray .zconf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zhcard{position:relative;background:#fffdf9;border-radius:18px;padding:22px 20px;text-align:center;max-width:380px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.35)}
.zhbig{font:800 44px/1.1 var(--serif,Georgia,serif);color:#FFC93C;text-shadow:0 1px 0 #8a6b1b}
.zhsub{font:600 15px var(--sans,inherit);color:#444;margin-top:6px}
.zhwhat{font:800 26px/1.2 var(--sans,inherit);color:var(--pri);margin:6px 0 10px}
.zhp{font:600 15px var(--sans,inherit);color:#333;margin:0 0 10px}
.zmslot{width:100%;aspect-ratio:16/9;max-height:42vh;margin:10px 0 6px}
@media (prefers-reduced-motion:no-preference){.zhbig{animation:zpop .6s ease-out}@keyframes zpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}}
.zsetup{font:700 17px/1.35 var(--sans,inherit);color:var(--pri);background:#fff6d6;border:1px solid #FFC93C;border-radius:10px;padding:10px 12px;margin:6px 0 8px}
.zcount{font-variant-numeric:tabular-nums;letter-spacing:.04em}

.zchips{display:flex;flex-wrap:wrap;gap:6px}

.zchip{border:1px solid #FFC93C;background:#fff;color:var(--pri);border-radius:99px;padding:6px 12px;font:600 13px var(--sans,inherit);cursor:pointer}

.zchip.on{background:var(--pri);color:#fff;border-color:var(--pri)}

.zinvite{border-color:#FFC93C}


/* small, quiet Privacy Policy link under forms that collect a number or an email */
.spriv{margin:8px 0 0;text-align:center;font-size:12px;line-height:1.3;font-weight:400}.spriv a{color:var(--muted,#6b7385);font-weight:400;text-decoration:underline}

.spriv.accept{font-size:12px}
.zdemotag{display:inline-block;background:#E4572E;color:#fff;font:800 12px/1 system-ui,sans-serif;letter-spacing:.12em;padding:4px 7px;border-radius:6px;vertical-align:middle}
.zdemo{border:2px dashed #E4572E}

/* the organizer's company strip at the top of the page (colours are set from the script) and the small credit under it */
.zbrand{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--pri);color:#fff;font:700 16px/1.25 var(--sans,inherit);min-width:0}
.zbrand b{min-width:0;overflow-wrap:anywhere}
.zblogo{width:auto;height:30px;max-width:96px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.9);padding:2px;flex:0 0 auto}
.zpow{margin:4px 2px 8px;font-size:12px;line-height:1.3;color:var(--muted,#6b7385);text-align:right}
/* My invites */
.zmi{align-items:flex-start;gap:8px;flex-wrap:wrap}
.zmia{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.gwrap{margin:12px 0 4px;display:flex;justify-content:center;min-height:44px}.gwrap[hidden],.gor[hidden]{display:none}
.gor{margin:6px 0;text-align:center;font-size:13px;color:var(--muted,#6b7385)}.ggnote{margin:0;text-align:center}
.zmia .zbtn{width:auto;flex:1 1 auto;min-height:40px;margin-top:0;padding:8px 12px;font-size:14px}
#mine .zform .zbtn{margin-top:10px}
/* a phone held sideways: the dice on the left, the board and the rest on the right, so the board is visible without scrolling */
@media (orientation:landscape) and (max-height:520px){
.zapp{max-width:none;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);column-gap:12px;align-content:start;padding:8px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left));min-height:0}
.zapp>*{grid-column:2;margin-top:0}
.zapp>.zbrand,.zapp>.zhead{grid-column:1/-1}
.zapp>.zbrand{padding:6px 12px;margin-bottom:6px}
.zapp>.zhead{margin-bottom:6px}
.zapp>.zdice{grid-column:1;grid-row:3/span 6;position:sticky;top:8px;align-self:start}
}

.pbrand{margin:0 0 12px;padding:18px 16px;border-radius:16px;text-align:center;color:#fff;background:linear-gradient(135deg,#8a0f3c 0%,#e8590c 62%,#f59f00 100%);box-shadow:0 6px 18px rgba(138,15,60,.28)}
.pb-name{font:800 30px/1.1 var(--sans,inherit);letter-spacing:.06em}
.pb-sub{font:500 12px var(--sans,inherit);opacity:.95;margin-top:3px}
.pb-own{font:500 13px/1.45 var(--sans,inherit);margin-top:10px}.pb-own b{font:800 16px var(--sans,inherit);letter-spacing:.04em}
.pb-pay{font:600 12px/1.4 var(--sans,inherit);margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.45)}
.prcpt{margin:10px 0;padding:12px 14px;border-radius:12px;background:#e8f8ee;border:2px solid #1f9d55;color:#0b3d22}.prcpt p{margin:6px 0;font-size:14px;line-height:1.5}.prcpt .mono{word-break:break-all}
.pb-own span{font-size:12px;font-weight:600;opacity:.95}
.pgame{margin:10px 0;padding:12px 14px;border-radius:12px;background:#fff7e0;border:2px solid #f59f00}.pgame b.mono{font-size:15px;word-break:break-all}

.pbrand{padding:20px 18px 18px}
.pb-name{font-size:32px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.pb-sub{font:600 13px var(--sans,inherit);opacity:.95;margin:4px 0 14px}
.pb-pay{font:600 14px/1.5 var(--sans,inherit);margin:0;padding:14px 4px;border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4)}
.pb-pay b{display:block;font:800 16px var(--sans,inherit);margin-bottom:4px}
.pb-pay span{display:block;font-weight:500;max-width:640px;margin:0 auto}
.pb-own{margin:0;padding-top:14px}
.pb-own i{display:block;font:500 13px var(--sans,inherit)}
.pb-own b{display:block;font:800 19px var(--sans,inherit);letter-spacing:.05em;margin:2px 0 8px}
.pb-own em{display:inline-block;font:600 12px var(--sans,inherit);font-style:normal;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.2)}

input.pfill{color:#8a8f98!important}

.pstmt{margin:0 0 10px;padding:12px 14px;border-radius:12px;background:#fff7e0;border:2px solid #f59f00;font:600 15px/1.5 var(--sans,inherit);color:#4a2c00}.pstmt .mono{word-break:break-all}

/* a small sample board (the "see what guests see" preview) */
.pvboard{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:360px;margin:0 auto}
.pvboard div{aspect-ratio:1;background:var(--sunk);display:flex;align-items:center;justify-content:center;font:600 clamp(7px,2vw,11px) var(--sans,inherit);color:var(--ink2)}
.pvboard div.a{background:#DCEAE8}.pvboard div.lb{background:#D3EEDB}.pvboard div.sh{background:#F6D9D9}.pvboard div.end{background:var(--acc)}