:root{--bg:#f3f4f2;--fg:#1d2b24;--bar:#fff;--bd:#d5d9d4}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#222;--fg:#e8efe9;--bar:#2e2e2e;--bd:#444}}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:15px system-ui,sans-serif;touch-action:manipulation}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#bar{display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--bar);border-bottom:1px solid var(--bd);min-height:32px}
#msg{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button{font:inherit;padding:6px 14px;border-radius:8px;border:1px solid var(--bd);background:#1c68a6;color:#fff;cursor:pointer}
body{display:flex;flex-direction:column}#main{display:flex;flex:1;min-height:0;position:relative}#wrap{flex:1;min-width:0;height:100%;box-sizing:border-box;padding:10px 0}
#panel{width:190px;box-sizing:border-box;padding:10px 12px;background:var(--bar);border-left:1px solid var(--bd);overflow:auto}
#panel h4{margin:10px 0 4px}.sm{font-size:12px;opacity:.8}.row{display:flex;align-items:center;gap:6px;margin:6px 0}.sq{padding:2px 9px}
#dice img{width:42px;margin:3px}#bc{width:64px;cursor:pointer;display:block}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:-1px}.dot.red{background:#C9414E}.dot.blue{background:#1C68A6}
#pd{display:flex;align-items:center;gap:4px}#pd div{flex:1;padding:4px 6px;border-radius:6px;font-size:13px;color:#1d2b24}.pa{background:#8DC63F}.pg{background:#BCBEC0}#pd small{font-size:10px}.ar{font-size:20px;opacity:.6}
.sr{display:flex;align-items:center;gap:6px;margin:4px 0}.sr span{display:flex}.sr b{width:18px;height:24px;line-height:24px;text-align:center;border:1px solid var(--bd);font-size:13px;cursor:pointer}.sr b.on.red{background:#C9414E;color:#fff}.sr b.on.blue{background:#1C68A6;color:#fff}
.dr{display:flex;gap:4px;margin:4px 0}.dr img{width:36px;transition:opacity .2s}.dr img.dim{opacity:.22}.dr img.pk{outline:3px solid #ff9f1c;border-radius:8px;cursor:pointer}#dg{margin-top:14px}#wrap{position:relative}#pop{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;background:var(--bar);color:var(--fg);border:3px solid #ff9f1c;border-radius:12px;padding:8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.45);max-width:88%;text-align:center;font-size:14px}#pop button{margin:4px;padding:8px 14px}#pop .sm{margin:4px 0}.dr img.act{animation:jump .24s ease-in-out infinite}
@keyframes jump{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-9deg)}60%{transform:translateY(0) rotate(7deg)}80%{transform:translateY(-6px) rotate(-4deg)}}
select{width:100%;margin:6px 0;padding:4px;font:inherit}
.tgl{display:none}

#ctl{display:flex;flex-direction:column;gap:6px}#ctl button{width:100%}
#board{width:150px;box-sizing:border-box;padding:10px;background:var(--bar);border-right:1px solid var(--bd);overflow:auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.ts{display:flex;flex-direction:column;gap:8px;padding-left:8px;border-left:6px solid}.ts.red{border-color:#C9414E}.ts.blue{border-color:#1C68A6}
#sc_red,#sc_blue{display:flex;margin:0}.ad div{padding:6px 8px;border-radius:6px;font-size:13px;color:#1d2b24;text-align:center}
.ini{display:flex;gap:6px}.slot{flex:1;height:78px;border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(127,127,127,.12)}.slot b{font-size:20px}.slot{overflow:hidden}.slot .cd{width:100%;flex:1;display:flex;flex-direction:column;align-self:stretch}.cc{flex:1;display:flex;flex-direction:row}.cc i{flex:1;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#1d2b24;border:1px solid rgba(0,0,0,.3)}.cc.f i{font-weight:800}.g0{background:#fff}.g1{background:#8DC63F}.g2{background:#BCBEC0}.slot.deck{cursor:pointer;color:#fff}.slot.deck.red{background:#C9414E}.slot.deck.blue{background:#1C68A6}.slot small{font-size:10px;opacity:.7}
#rs .rh{margin-bottom:6px;font-size:13px}#rs .rh b{cursor:pointer;text-decoration:underline dotted}
.ph{display:flex;align-items:center;gap:6px;padding:4px 6px;margin:3px 0;border-radius:5px;font-size:12px;cursor:pointer;background:rgba(127,127,127,.15);opacity:.8}.ph .ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.ph img{max-width:22px;max-height:22px}.ph.on{opacity:1;font-weight:700;box-shadow:0 0 0 3px #fff200}svg{width:100%;height:100%;display:block}
.pc{cursor:pointer}.hx{cursor:pointer}
#bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;background:var(--bar);border-top:1px solid var(--bd)}#bot #tb{justify-self:start}#bot #tp{justify-self:end}#nx{grid-column:2;background:#8B5E2B;font-weight:700;font-size:16px;padding:10px 34px;min-width:200px}#bot .tgl{padding:8px 14px}
#fx{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:6;pointer-events:none;text-align:center}#fx.show{display:flex}#fx.goal{pointer-events:auto;cursor:pointer;background:rgba(0,0,0,.25)}
#fx span{font-weight:900;color:#fff;letter-spacing:.04em;text-shadow:0 5px 0 #000,0 0 32px rgba(0,0,0,.8)}#fx.goal span{font-size:min(20vw,140px);animation:shk .08s linear 13}#fx.roll span{font-size:min(8vw,54px);color:#fff200;padding:0 12px}#fx.rp{pointer-events:none;cursor:default;background:none}#rpl{position:fixed;inset:0;z-index:20;display:none}#rpl.on{display:block}#rpbar{position:relative;order:-1;z-index:30;display:none;flex-direction:column;gap:3px;padding:5px 10px 4px;background:var(--bar);border-bottom:2px solid #8B5E2B}#rpbar.on{display:flex}#rpbar .r1{display:flex;flex-wrap:wrap;gap:5px;align-items:center}#rpbar select{width:auto;max-width:210px;margin:0}#rpbar button{padding:4px 8px;margin:0}body.lab #bar{display:none}#rpbar .r2{position:relative}#rp_sc{width:100%;margin:0;display:block;height:20px}#rp_mk{position:relative;height:16px}#rp_mk i{position:absolute;bottom:0;width:4px;margin-left:-2px;height:45%;background:#bbb;cursor:pointer;border-radius:1px}#rp_mk i.g{width:3px;background:#fff}#rp_mk b.mn{position:absolute;top:-2px;margin-left:-6px;color:#ff5a5a;font-size:12px;cursor:pointer;line-height:1}#rpinfo{position:fixed;left:8px;bottom:8px;z-index:25;display:none;background:rgba(0,0,0,.65);color:#fff;padding:4px 10px;border-radius:8px;font-size:13px;pointer-events:none}#rpinfo.on{display:block}#rplab{position:fixed;left:0;right:0;bottom:0;z-index:31;display:none;max-height:40vh;overflow:auto;background:var(--bar);border-top:2px solid #8B5E2B;padding:6px 10px}#rplab.on{display:block}#rplab .lh{display:flex;gap:10px;align-items:center;justify-content:space-between}#rplab .lc{display:flex;flex-wrap:wrap;gap:12px}#rplab .lcol{flex:1 1 320px;min-width:0}#rplab .lrow{display:flex;gap:6px;align-items:center;margin:4px 0;flex-wrap:wrap}#rplab input,#rplab textarea{flex:1;min-width:120px;font:inherit;padding:5px;border-radius:6px;border:1px solid #999}#rplab textarea{width:100%;height:70px;box-sizing:border-box}#rplab .nt{display:flex;gap:6px;align-items:center;margin:3px 0}#rplab .nt span{flex:1;font-size:13px}#rplab button{padding:5px 9px}
#fx2{position:absolute;left:0;right:0;top:27%;display:none;z-index:6;pointer-events:none;text-align:center}#fx2.show{display:block}#fx2 div{text-align:center;margin-bottom:4px}#fx2 span{display:inline-block;max-width:92%;font-weight:900;color:#fff;font-size:min(5vw,38px);line-height:1.15;letter-spacing:.02em;padding:2px 14px;text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.85);}#fx2 span.nw{animation:flp .22s ease-out}@keyframes flp{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#fx small{margin-top:10px;color:#fff;font-size:15px;text-shadow:0 2px 4px #000}
@keyframes shk{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-9px,6px) rotate(-2.5deg)}50%{transform:translate(8px,-7px) rotate(2.5deg)}75%{transform:translate(-6px,-5px) rotate(-1.5deg)}100%{transform:translate(7px,6px) rotate(1.5deg)}}
button:disabled{opacity:.35;cursor:default}#rs.dimmed{opacity:.35;pointer-events:none}.ph.done{opacity:.5}.ph.done::after{content:" ✓"}
@media (min-width:901px){#bot{padding-left:150px;padding-right:190px}}
@media (max-width:900px){
 #bar{flex-wrap:wrap;gap:6px;padding:6px 8px}#msg{white-space:normal;font-size:12px;flex-basis:100%;order:3}
 .tgl{display:inline-block}#bar button{padding:4px 8px;font-size:13px}#nx{padding:8px 20px;min-width:140px}
 #main{overflow:hidden}
 #board,#panel{position:absolute;top:0;bottom:0;z-index:5;box-shadow:0 0 14px rgba(0,0,0,.5);transition:transform .35s ease}
 #board{left:0;transform:translateX(-110%)}#panel{right:0;transform:translateX(110%)}
 #board.open,#panel.open{transform:none}
 #wrap{padding:2px 0}
}

.of{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11px}.ofchip{background:#ff9f1c;color:#1d2b24;border-radius:10px;padding:1px 7px;cursor:pointer;font-weight:600}.ofs{opacity:.75}.dlb{background:#555;color:#fff;border-radius:10px;padding:1px 7px}
.cc.dl{position:relative}.cc.dl::after{content:"";position:absolute;inset:0;background:rgba(45,45,45,.82)}
.ofc{width:118px;background:#fff;color:#1d2b24;border:2px solid #bbb;border-radius:10px;padding:6px 4px;text-align:center;display:inline-block;margin:4px;cursor:pointer;vertical-align:top}.ofc:hover{border-color:#ff9f1c}.ofc b{font-size:15px;display:block}.ofc .nm{font-weight:700;font-size:13px}.ofc .ds{font-size:10px;line-height:1.2}.ofc svg{width:46px;height:44px}
#pop .ofrow{display:flex;justify-content:center;flex-wrap:wrap}
/* ---- online play */
#obar{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}#obar button{padding:3px 10px;font-size:13px;background:#666}
#obar .pr{width:9px;height:9px;border-radius:50%;display:inline-block;background:#999;margin-right:3px}#obar .pr.on{background:#3aa655}
#olobby,#omodal,#oover{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
#olobby.on,#omodal.on,#oover.on{display:flex}#omodal{z-index:320}#oover{z-index:310;background:rgba(0,0,0,.25);pointer-events:none}
#olobby .ob,#omodal .ob{background:var(--bar);color:var(--fg);border:1px solid var(--bd);border-radius:12px;padding:16px 18px;max-width:460px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#olobby h3,#omodal h3{margin:0 0 10px}#olobby label{display:block;font-size:12px;opacity:.8;margin:8px 0 2px}
#olobby input,#olobby select{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);width:100%;box-sizing:border-box}
#olobby .rw{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bd)}#olobby .rw span{flex:1;min-width:0}
#olobby .gr,#omodal .gr{background:#666}#olobby .bt,#omodal .bt{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}#olobby .er{color:#c33;font-size:13px;min-height:18px;margin-top:6px}
#olobby code{font-size:20px;letter-spacing:3px;background:var(--bg);padding:2px 8px;border-radius:6px}
#oover .ob{background:var(--bar);color:var(--fg);padding:10px 16px;border-radius:10px;border:1px solid var(--bd);pointer-events:auto}