:root{--paper:#fbf8f3;--surface:#fff;--ink:#1c1714;--mute:#5c524b;--rule:#e2dbd1;--red:#c8161d;--red-dark:#8f0f14;--gold:#f6c744;--gold-soft:#fdf0c4;--ok:#14772e;--bad:#b3121a;--bad-soft:#fbe0e0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper);min-height:100vh;min-height:100dvh;overflow-x:hidden}
h1,h2,h3{margin:.2em 0;line-height:1.15}
.top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--rule);background:var(--paper)}
.wordmark img{display:block;height:1.4em;width:auto;margin:0 auto}
.wordmark{grid-column:2;font-size:clamp(20px,5vw,30px);line-height:1.2;min-height:1.2em}
.top .help{grid-column:3;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;background:var(--surface);font-size:1.2em;line-height:1}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:6px 16px;font-size:.85em;font-weight:600;color:var(--mute);border-bottom:1px solid var(--rule)}
.bar span{min-width:0;overflow-wrap:anywhere}.bar span:last-child{color:var(--ink)}
.howto{width:calc(100% - 32px);max-width:520px;max-height:calc(100% - 32px);padding:0;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink)}
.howto .in{padding:24px 20px 20px}
.howto::backdrop{background:rgba(28,23,20,.5)}
.howto .x{position:absolute;top:8px;right:8px;width:44px;height:44px;min-height:0;padding:0;border:0;background:transparent;font-size:1.8rem;line-height:1}
.howto h2{margin-right:44px}.howto h3{margin-top:1em}
.howto ol,.howto ul{padding-left:1.3em;margin:.5em 0}.howto li{margin:.4em 0}
.wrap{max-width:900px;margin:0 auto;padding:16px}
.card{background:var(--surface);border-radius:14px;padding:18px;border:2px solid var(--rule);margin:12px 0}
.code{font-size:clamp(56px,14vw,120px);font-weight:900;letter-spacing:.1em;color:var(--red);line-height:1}
button,input,select{font:inherit;border-radius:12px;border:2px solid var(--ink);padding:12px 14px;max-width:100%}
button,.btn{background:var(--surface);font-weight:800;cursor:pointer;min-height:52px;color:var(--ink)}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,.btn:focus-visible,a.link:focus-visible{outline:3px solid var(--red);outline-offset:2px}
button.opt{width:100%;margin:6px 0;text-align:left}
button[aria-pressed=true]{background:var(--gold);box-shadow:inset 0 0 0 2px var(--ink)}
button[aria-pressed=true]::before{content:"\2713  "}
button.go,.btn.go{background:var(--red);color:#fff;border-color:var(--red-dark)}
button:disabled{opacity:.45;cursor:not-allowed}
input,select{width:100%;margin:6px 0;background:var(--surface);min-width:0}
.big{font-size:clamp(24px,5vw,52px);font-weight:800;overflow-wrap:anywhere}
.mute{color:var(--mute);font-size:.9rem}
.row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row>span{min-width:0;overflow-wrap:anywhere}
.dice{display:flex;gap:12px}
.die{background:#fffdf7;border:2px solid var(--ink);border-radius:18%;width:80px;height:80px;padding:10%}
.pips{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:100%;height:100%}
.pips i{border-radius:50%;margin:14%}.pips i.p{background:var(--ink)}.pips.red i.p{background:var(--red)}.pips.v1 i.p{transform:scale(1.5)}
.cup-stage{--d:44px;display:flex;justify-content:center;padding-top:calc(var(--d)*1.7);margin:8px 0 12px}
.cup-table{position:relative;width:calc(var(--d)*4.6);height:calc(var(--d)*3.2)}
.plate{position:absolute;inset:0;perspective:calc(var(--d)*14)}
.plate-in{position:absolute;left:0;top:calc(50% - var(--d)*2.3);width:calc(var(--d)*4.6);height:calc(var(--d)*4.6);border-radius:50%;transform:rotateX(58deg);transform-style:preserve-3d;
 background:radial-gradient(circle,#fff 0 60%,#efe8dd 66%,#fffdf8 72%,#e6ded2 100%);box-shadow:inset 0 0 0 calc(var(--d)*.1) var(--red-dark)}
.die3{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);transform-style:preserve-3d;
 transform:translate3d(calc(var(--x)*var(--d)),calc(var(--y)*var(--d)),calc(var(--d)/2))}
.die3 .shadow{position:absolute;inset:-6%;border-radius:50%;background:rgba(28,23,20,.3);filter:blur(calc(var(--d)*.08));transform:translateZ(calc(var(--d)/-2 + 1px))}
.cube{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;padding:10%;border-radius:16%;background:#fffdf7;border:1px solid rgba(28,23,20,.25);box-shadow:inset 0 0 calc(var(--d)*.12) rgba(28,23,20,.22);backface-visibility:hidden}
.cup{position:absolute;left:calc(var(--d)*.2);top:calc(var(--d)*-1.55);width:calc(var(--d)*4.2);pointer-events:none;transform-origin:50% 80%}
.cup svg{display:block;width:100%;height:auto}
.cup-stage.live{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.pill{display:inline-block;background:var(--gold);color:var(--ink);padding:2px 10px;border-radius:99px;font-weight:700;margin:2px 0 2px 6px}
.pill.neg{background:var(--bad-soft);color:var(--bad)}
.ok{color:var(--ok);font-weight:800}.bad{color:var(--bad);font-weight:800}
.cards{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;align-items:center}
.pc{background:var(--surface);border:2px solid var(--ink);border-radius:10px;width:64px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:26px;line-height:1.1}
.pc.red{color:var(--bad)}.pc.back{background:repeating-linear-gradient(45deg,var(--red) 0 8px,var(--red-dark) 8px 16px);color:transparent}
.pc.q{background:var(--paper);border-style:dashed;color:var(--mute)}
.stake{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.stake input{flex:1 1 90px;margin:0}.stake button{flex:1 1 90px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rules{margin:8px 0 0;padding-left:1.2em;font-size:.9rem}.rules li{margin:3px 0}
.qr{background:#fff;padding:6px;border-radius:12px;border:2px solid var(--ink);width:min(100%,320px);aspect-ratio:1}
.qr img{width:100%;height:100%;display:block}
.lobby{display:grid;gap:16px;grid-template-columns:1fr}
.host .wrap{max-width:1600px}
.host .layout{display:grid;grid-template-columns:1fr;gap:0 24px}
@media(min-width:1000px){
 .host{font-size:clamp(18px,1.5vw,28px)}
 .host .wordmark{font-size:1.6em}.host .top .help,.host .howto .x{width:52px;height:52px}.host .top{grid-template-columns:52px minmax(0,1fr) 52px}
 .host .layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
 .host .lobby{grid-template-columns:auto 1fr;align-items:center}
 .host .mute{font-size:.8em}.host .rules{font-size:.75em}
 .host .pc{width:90px;height:128px;font-size:38px}.host .die{width:100px;height:100px}.host .cup-stage{--d:min(72px,6vh)}
 .host button{font-size:1em;padding:14px 28px}
 /* A TV can't scroll, so the da xiao board sits beside the bowl instead of under it. */
 .host .card:has(>.spots){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto repeat(8,auto) 1fr;column-gap:24px;align-items:start}
 .host .card:has(>.spots)>*{grid-column:1;justify-self:start}
 /* Grid items' margins don't collapse, so the default 1em above and below would double. */
 .host .card:has(>.spots)>p{margin:.5em 0}
 .host .card:has(>.spots)>:nth-child(-n+2){grid-column:1/-1}
 .host .card>.spots{grid-column:2;grid-row:3/-1;justify-self:stretch;margin:0}
 /* Ban Luck reveal: each player's name and hand sit side by side, two players to a line. */
 .host .card:has(>.row~.cards){display:grid;grid-template-columns:repeat(2,auto minmax(0,1fr));column-gap:16px;align-items:center}
 .host .card:has(>.row~.cards)>*{grid-column:1/-1}
 .host .card>.row~.mute,.host .card>.row~.cards{grid-column:auto;margin:4px 0}
 .host .card:has(>.row~.cards) .pc{width:72px;height:102px;font-size:30px}
 /* Hands are fanned so a five-card hand still fits its half of the line. */
 .host .card>.row~.cards{flex-wrap:nowrap;gap:0}.host .card>.row~.cards .pc+.pc{margin-left:-12px}
 .host .card:has(>.row~.cards)>.row{padding:5px 0}
 .host .card:has(>.row~.cards)>.go{justify-self:start;margin-top:8px}
 .host .rules{columns:2;column-gap:32px}.host .rules li{break-inside:avoid}
 .host .qr{width:min(320px,26vh)}.host .code{font-size:min(120px,8vh)}.host .lobby .big{font-size:min(52px,4vh)}
 .host .games{margin:8px 0}.host .game .art{padding:12px 12px 8px}.host .game .body{gap:6px;padding:10px 14px 14px}
 /* After the first game the games lead, so the join card moves under the points. */
 .host .layout:has(>div>.card+.lobby)>div:first-child{display:contents}
 .host .layout:has(>div>.card+.lobby)>div>.card:first-child{grid-column:1;grid-row:1/span 2}
 .host .layout:has(>div>.card+.lobby)>.card{grid-column:2;grid-row:1}
 .host .layout>div>.card+.lobby{grid-column:2;grid-row:2;margin-top:0;gap:12px}
 .host .card+.lobby .qr{width:6.5em}.host .card+.lobby .big{font-size:1.1em}.host .card+.lobby .code{font-size:2.8em}.host .card+.lobby h2{font-size:1.2em}
 .host .howto{max-width:760px}
}
@media(min-width:1000px) and (max-height:800px){
 .host .wrap{padding-top:8px;padding-bottom:0}.host .card{margin:8px 0;padding:14px 18px}
 .host .card:has(>.row~.cards) .pc{width:60px;height:86px;font-size:26px}.host .card>.row~.cards .pc+.pc{margin-left:-10px}
 .host .rules{font-size:.7em}
 .host .top .help{width:44px;height:44px}
 .host .big{font-size:40px}.host .spot{min-height:36px}.host .sp-h{margin-top:6px}.host .sp-row{margin:3px 0}
 .host .game .art{padding:8px 8px 4px;gap:4px}.host .game .body{padding:8px 12px 12px}.host .game .body p{font-size:.9em}
 .host .game .art .cards,.host .game .art .dice{min-height:0}.host .game .art .pc{width:36px;height:50px;font-size:15px}.host .game .art .die{width:40px;height:40px}
 .host .game button{min-height:44px;padding:8px 16px}
 .host .pc{width:72px;height:102px;font-size:30px}
}
@media(max-width:400px){.wrap{padding:12px}.card{padding:14px}.pc{width:54px;height:80px;font-size:22px}}
.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:400px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;font-size:1.1rem;text-decoration:none}
a.link{display:inline-block;padding:10px 4px;font-weight:600;color:var(--ink);text-underline-offset:3px}
/* Landing: a red paper-cut of the blossom stuck on the inside of a daylight window, so the glare sits over the paper. Red is the paper and the Start button, nothing else. */
.landing{--glass-top:#d3e3ec;--glass-mid:#e8f0f4;--glass-low:#f7f9fa;--metal:#b9c3c9;display:flex;flex-direction:column;
 background:linear-gradient(180deg,var(--glass-top) 0%,var(--glass-mid) 55%,var(--glass-low) 100%)}
.landing ::selection{background:var(--red);color:#fff}
.landing .top{position:absolute;top:0;left:0;right:0;z-index:2;border-bottom:0;background:transparent}.landing .top .wordmark{visibility:hidden}
.landing .top .help{background:rgba(255,255,255,.75)}
.hero{position:relative;flex:1;display:grid;grid-template-rows:auto minmax(min(300px,72vw,30vh),1fr) auto;width:100%;padding:60px 24px 24px;overflow:hidden}
.pane{position:fixed;inset:0;pointer-events:none}
.pane .mullion{display:none;position:absolute;top:0;bottom:0;left:62%;width:12px;background:linear-gradient(90deg,#a3aeb5,#e4e9ec 40%,#c3cbd0 70%,#97a3aa)}
.hero .glare{position:fixed;inset:0;pointer-events:none;background:linear-gradient(106deg,transparent 38%,rgba(255,255,255,.45) 47%,transparent 56%),linear-gradient(106deg,transparent 62%,rgba(255,255,255,.3) 70%,transparent 78%)}
.intro,.actions{position:relative;z-index:1}
.hero .name{margin:4px 0 0}.hero .name img{display:block;width:min(100%,340px);height:auto}
.hero .tagline{max-width:15em;margin:16px 0 0;font-size:clamp(1.25rem,5.4vw,1.75rem);line-height:1.2;font-weight:750;letter-spacing:-.01em;text-wrap:balance}
/* The flower fills the middle row and bleeds off the right edge; its box is the row's height, so it never covers the type above or the buttons below.
   On short phones the row, and so the flower, is small: it moves right so at least 40% of it still runs off the edge. */
.flower{position:relative;min-height:0;margin:14px -24px 26px 0;container-type:size}
.flower svg{position:absolute;top:50%;left:max(32%,100% - .6*min(132cqh,124vw));width:auto;height:min(132cqh,124vw);aspect-ratio:1;margin-top:calc(min(132cqh,124vw)/-2);overflow:visible;transform-origin:50% 0;animation:settle 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes settle{from{transform:rotate(-7deg) translateY(-10px)}to{transform:none}}
.actions{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:440px}
.actions .btn{max-width:none;border-radius:16px}
.actions .btn.go{min-height:70px;font-size:clamp(1.6rem,7.5vw,2rem);border:0;box-shadow:0 14px 26px -14px rgba(143,15,20,.75)}
.actions .btn.go:hover{background:#b3121a}
.actions .btn:not(.go){min-height:56px;margin-top:12px;font-size:1.35rem;border-width:3px;background:rgba(255,255,255,.72)}
.actions .btn:not(.go):hover{background:#fff}
.actions .tv{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:12px;padding:8px 0;font-size:1.05rem;color:var(--mute);text-underline-offset:5px}
.actions .tv:hover{color:var(--ink)}
@media(min-width:860px){
 .hero{grid-template-columns:minmax(0,440px) 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:48px;padding:0 0 48px max(48px,calc(50vw - 600px))}
 .intro{grid-column:1;grid-row:2}.actions{grid-column:1;grid-row:3;margin-top:44px}
 .hero .name img{width:min(100%,420px)}
 .hero .tagline{font-size:1.9rem}
 .flower{grid-column:2;grid-row:1/-1;margin:0}
 .flower svg{top:44%;left:12%;height:min(124cqh,118cqw);margin-top:calc(min(124cqh,118cqw)/-2)}
 .pane .mullion{display:block}
}
/* A phone on its side: words and buttons on the left, the flower on the right, so Start is visible without scrolling. */
@media(max-height:500px) and (orientation:landscape){
 .hero{grid-template-columns:minmax(0,min(380px,48vw)) 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:32px;padding:12px 0 12px max(24px,env(safe-area-inset-left))}
 .intro{grid-column:1;grid-row:2}.actions{grid-column:1;grid-row:3;margin-top:16px}
 .hero .name img{width:min(100%,260px)}
 .hero .tagline{margin-top:8px;font-size:1.25rem}
 .actions .btn.go{min-height:56px;font-size:1.5rem}
 .actions .btn:not(.go){min-height:48px;margin-top:8px;font-size:1.15rem}
 .actions .tv{margin-top:4px;padding:6px 0}
 .flower{grid-column:2;grid-row:1/-1;margin:0}
 .flower svg{left:18%;height:118cqh;margin-top:-59cqh}
 .pane .mullion{display:block}
}
@media(prefers-reduced-motion:reduce){.flower svg{animation:none}}
body:not(.host) .qr{width:min(100%,200px)}
.card.mine{border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
button.chip{width:52px;height:52px;min-height:0;padding:0;border-radius:50%;border:3px dashed var(--ink);background:var(--surface)}
button.chip[aria-pressed=true]{background:var(--gold);border-style:solid;box-shadow:inset 0 0 0 2px var(--surface)}
button.chip[aria-pressed=true]::before{content:none}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:12px 0}
.game{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--surface)}
.game .art{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px 12px;background:var(--tint)}
.game .art .cards,.game .art .dice{margin:0;justify-content:center;align-items:center;gap:6px;min-height:62px}
.game .art .pc{width:44px;height:62px;font-size:18px;border-radius:8px}.game .art .die{width:48px;height:48px;font-size:28px;border-radius:10px}
.game h3{text-align:center}
.game .body{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;text-align:center}
.game .body p{flex:1;margin:0}
.game .tag{font-weight:700;color:var(--ok)}
button.timer{min-height:44px;padding:8px 14px}
.countdown{font-size:1.1em}.countdown b{font-variant-numeric:tabular-nums;color:var(--red)}
.tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:12px 0}
button.table{width:100%;text-align:left;padding:14px 16px}button.table b{font-size:1.2em}button.table span{display:block;font-weight:600}
.g-inbetween{--tint:var(--gold-soft)}.g-banluck{--tint:#dde8f6}.g-daxiao{--tint:#fbdcd3}
.spots{margin:8px 0}
.sp-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;margin:4px 0}
.sp-h{font-size:.85em;margin:10px 0 0;color:var(--mute)}.sp-h span{font-weight:600}
.spot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;min-width:0;padding:2px;overflow:hidden;border:2px solid var(--ink);border-radius:10px;background:var(--surface);font:inherit;font-weight:800;font-size:.9em;line-height:1.1;text-align:center;color:var(--ink)}
.spot small{display:block;font-weight:600;font-size:.78em;color:var(--mute)}
.spot .od{font-size:.72em;font-weight:600;color:var(--mute)}
.spot .stk{margin-top:1px;padding:0 6px;border-radius:99px;background:var(--red);color:#fff;font-size:.78em;line-height:1.3}
.spot.staked{background:var(--gold-soft)}
.spot.win{background:var(--gold);box-shadow:0 0 0 3px var(--red)}
.spot.dim{border-color:var(--rule);background:var(--paper);font-weight:600}
@media(max-width:400px){.sp-total{grid-template-columns:repeat(5,minmax(0,1fr))}}
.row>span:last-child{flex-shrink:0;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}