:root{--ink:#0a111c;--ink2:#111c2c;--card:#182536;--line:#243244;--paper:#efe4cc;--dim:#7f8da3;--brass:#c9a35a;--lamp:#f2b65c;--red:#d6503c;--green:#5fb47a;--serif:"Noto Serif SC",serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#1a2a44 0%,var(--ink) 60%) fixed,var(--ink);color:var(--paper);font-family:"Noto Sans SC",system-ui,sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
.serif{font-family:var(--serif);font-weight:900}
#app{max-width:430px;margin:0 auto;min-height:100dvh;position:relative;background:var(--ink2);box-shadow:0 0 60px rgba(0,0,0,.45)}
.scr{height:100dvh;min-height:560px;display:flex;flex-direction:column;overflow:hidden}
.scr.center{align-items:center;justify-content:center;gap:28px;padding:24px}
.notice{font-size:24px;letter-spacing:.14em;text-align:center}

/* buttons */
.big{display:block;width:100%;min-height:52px;background:var(--brass);color:#1a1206;border-radius:14px;padding:14px;text-align:center;font-weight:700;font-size:17px;letter-spacing:.2em}
.big:disabled{background:#2a3546;color:var(--dim)}
.big:active:not(:disabled){filter:brightness(1.1)}
.ghost{display:block;min-height:48px;padding:12px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-weight:500;font-size:15px;letter-spacing:.16em;text-align:center}
.ghost.no{color:#f0a090;border-color:#5a2a22;background:#2a1512}

/* shared header / footer */
.hd{padding:22px 22px 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hd .t{font-size:24px;letter-spacing:.14em}
.hd .code{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.2em;color:var(--lamp)}
.hd .cd{text-align:right}
.hd .cd b{display:block;font-family:var(--serif);font-weight:900;font-size:30px;color:var(--lamp);letter-spacing:.04em;line-height:1;font-variant-numeric:tabular-nums}
.hd .cd small{font-size:11px;color:var(--dim)}
.prog{margin:0 22px 12px;height:6px;border-radius:3px;background:#1b2636;overflow:hidden;flex:none}
.prog i{display:block;height:100%;background:var(--lamp);border-radius:3px;transition:width 1s linear}
.foot{padding:10px 22px 18px;padding-bottom:max(18px,env(safe-area-inset-bottom));flex:none}
.foot .row{display:flex;gap:10px;align-items:center}
.foot .row .big{flex:1}
.foot .s{text-align:center;color:var(--dim);font-size:12px;margin-top:10px}
.chatbtn{flex:none;width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:22px;display:flex;align-items:center;justify-content:center}

/* home */
.home{justify-content:space-between}
.home-top{padding:120px 28px 0;text-align:center}
.logo{font-size:64px;letter-spacing:.2em;margin:0 0 0 .2em;color:var(--paper)}
.lede{color:var(--dim);font-size:15px;letter-spacing:.12em;margin:14px 0 0}
.togs{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px}
.tog{min-height:96px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tog b{font-family:var(--serif);font-weight:900;font-size:24px}
.tog small{font-size:12px;color:var(--dim)}
.tog.on{border-color:var(--brass);background:#2a2112;color:var(--lamp)}

/* board */
.form{flex:1;overflow-y:auto;padding:8px 22px 0;display:flex;flex-direction:column;gap:16px}
.name{width:100%;height:56px;border-radius:14px;border:1px solid var(--line);background:var(--card);padding:0 18px;font-size:20px;font-family:var(--serif);font-weight:700;letter-spacing:.1em;outline:none}
.name:focus{border-color:var(--brass)}
.name::placeholder{color:var(--dim);font-weight:500}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avpick{height:64px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-size:30px}
.avpick:disabled{opacity:.25}
.avpick.on{border-color:var(--brass);background:#2a2112;box-shadow:0 0 0 2px rgba(201,163,90,.35)}
.cnt{font-family:var(--serif);font-size:15px;color:var(--dim);letter-spacing:.1em}
.cnt b{font-size:36px;color:var(--lamp);margin-right:4px}
.aboard{font-family:var(--serif);font-size:15px;color:var(--dim);letter-spacing:.1em;text-align:center}
.pax{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.pax .p{display:flex;flex-direction:column;align-items:center;gap:6px}
.pax .n{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbox{width:100%;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--ink);padding:0 12px;font-size:13px}

/* lobby */
.av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:#24344a;flex:none}
.bar{margin:2px 22px 10px;display:flex;gap:10px;flex:none}
.bar div{flex:1;border-radius:14px;padding:12px 14px;text-align:center;min-width:0}
.bar .b1{background:#2a1512;border:1px solid #5a2a22}
.bar .b2{background:#2a2112;border:1px solid #5a4620}
.bar small{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.bar b{font-family:var(--serif);font-size:22px;font-weight:900;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b1 b{color:#f0a090}.b2 b{color:var(--lamp)}
.with-banner .bar div{padding:8px 14px}
.banner{flex:none;margin:0 22px 10px;min-height:44px;border-radius:14px;background:#1f3a2c;border:1px solid #2e5a42;color:#9fe0b4;font-weight:700;font-size:15px;letter-spacing:.12em;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 14px rgba(95,180,122,.45)}}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px;padding:0 22px;align-content:stretch;max-height:520px}
.grid.dead .seat{opacity:.35}
.grid.dead .seat.me{opacity:1}
.seat{min-height:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px 6px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden}
.seat.me{border-color:var(--brass);background:#20231b}
.seat.low{border-color:#8a3a2e;background:#241612}
.seat.out{opacity:.35}
.seat.wait{border-style:dashed;border-color:var(--brass)}
.seat.ask{animation:ask 1.2s ease-in-out infinite}
@keyframes ask{50%{box-shadow:0 0 0 3px var(--lamp)}}
.grid.hint .seat.can{animation:hint .5s ease-in-out 3}
@keyframes hint{50%{border-color:var(--lamp);box-shadow:0 0 0 2px var(--lamp)}}
.seat .n{font-size:13px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .k{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--lamp);line-height:1.1}
.seat.low .k{color:#f0a090}
.seat .on{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.m{display:flex;gap:3px;margin-top:2px}
.m i{width:9px;height:9px;border-radius:50%;display:block}
.m .f{background:var(--green)}.m .t{background:var(--red)}.m .x{background:#3a4658}

/* sheets */
.sheet-bg{position:fixed;inset:0;z-index:20;background:rgba(3,6,12,0);display:flex;align-items:flex-end;justify-content:center;transition:background .2s}
.sheet-bg.in{background:rgba(3,6,12,.6)}
.sheet{width:100%;max-width:430px;background:var(--ink2);border:1px solid #2b3a50;border-bottom:0;border-radius:24px 24px 0 0;padding:22px 22px max(22px,env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .2s;max-height:90dvh;overflow-y:auto}
.sheet-bg.in .sheet{transform:none}
.sheet.tall{height:70dvh;display:flex;flex-direction:column}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:56px;height:56px;font-size:30px}
.who .n{font-size:22px;letter-spacing:.08em}
.who .k{color:var(--lamp);font-size:14px;margin-top:2px}
.inv,.inc{display:flex;flex-direction:column;gap:16px}
.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game{border-radius:18px;padding:16px 12px;background:var(--card);border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;gap:8px;min-height:110px}
.game b{font-size:26px;letter-spacing:.2em}
.game small{font-size:12px;color:var(--dim);line-height:1.5}
.game.on{border-color:var(--brass);background:#2a2112}
.game.on b{color:var(--lamp)}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pill{min-height:52px;border-radius:26px;background:var(--card);border:1px solid var(--line);display:flex;align-items:baseline;justify-content:center;gap:4px;padding-top:8px}
.pill b{font-family:var(--serif);font-weight:900;font-size:24px}
.pill small{font-size:12px;color:var(--dim)}
.pill.on{border-color:var(--brass);background:#2a2112;color:var(--lamp)}
.pill:disabled{opacity:.3}
.line{width:100%;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);padding:0 16px;font-size:15px;outline:none}
.line:focus{border-color:var(--brass)}
.line::placeholder{color:var(--dim)}
.offer{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 4px}
.offer b{font-size:28px;letter-spacing:.2em}
.offer .amt{font-size:32px;color:var(--lamp)}
.offer .was{margin-left:auto;margin-right:12px;color:var(--dim);text-decoration:line-through;font-size:18px}
.gline{color:var(--dim);font-size:12px;margin-top:-8px}
.bub{max-width:85%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bub.them{background:#1c2a3d;border-bottom-left-radius:4px;align-self:flex-start}
.three{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px}
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.three .ghost,.two .ghost{padding:12px 0}
.counter{display:flex;flex-direction:column;gap:12px}
.confirm{display:flex;flex-direction:column;gap:10px;text-align:center}
.confirm .q{font-size:24px;letter-spacing:.12em}
.confirm .sub{color:var(--dim);font-size:13px;margin-bottom:12px}

/* chat drawer */
.drawer{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.clist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.cm{display:flex;flex-direction:column;gap:2px;max-width:85%}
.cm .who{font-size:12px;color:var(--dim);display:block}
.cm .tx{background:#1c2a3d;padding:8px 12px;border-radius:14px;border-top-left-radius:4px;font-size:14px;line-height:1.45;align-self:flex-start}
.cm.mine{align-self:flex-end;align-items:flex-end}
.cm.mine .tx{background:#3a2e17;border:1px solid #5a4620;border-radius:14px;border-top-right-radius:4px}
.empty{color:var(--dim);text-align:center;margin:auto}
.cin{display:flex;gap:10px}
.send{flex:none;width:56px;height:48px;border-radius:14px;background:var(--brass);color:#1a1206;font-weight:700}

.banner small{margin-left:10px;font-size:12px;font-weight:500;color:#7fbf95;letter-spacing:.06em}

/* match: shared */
.match .mhd{flex:none;display:flex;align-items:center;gap:6px;padding:10px 16px 0}
.match .mhd .back{width:44px;height:44px;font-size:34px;line-height:1;color:var(--dim);display:flex;align-items:center;justify-content:center;margin-left:-8px}
.match .mhd .t{font-size:18px;letter-spacing:.2em;color:var(--dim)}
.opp{flex:none;display:flex;align-items:center;gap:14px;padding:4px 22px 10px}
.opp .av{position:relative;width:52px;height:52px;font-size:28px}
.opp .av .on{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--ink2)}
.opp .n{font-size:20px;letter-spacing:.08em}
.opp .k{color:var(--lamp);font-size:14px;margin:2px 0 4px}
.match.split .opp{flex-direction:column;gap:6px;padding:0 22px 4px;text-align:center}
.match.split .opp .av{width:76px;height:76px;font-size:42px}
.match.split .opp .n{font-size:24px}
.match.split .opp .m{justify-content:center}
.match.split .opp .k{margin:2px 0 6px}
.opp .m i{width:11px;height:11px}
.mbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 22px 18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.mchat{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px 0}
.mlist{gap:8px}
.mchat .cin .line{height:44px}
.mchat .send{height:44px}
.res,.gdone{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sum{font-size:15px;color:var(--paper);letter-spacing:.08em}
.dl{font-size:56px;line-height:1.05;font-variant-numeric:tabular-nums}
.dl.pos{color:var(--lamp)}.dl.neg{color:var(--red)}
.res .big,.gdone .big{margin-top:6px}

/* match: 独吞 */
.timer{flex:none;text-align:center;padding:2px 0 12px;position:relative}
.timer .tm{display:block;font-size:72px;line-height:1;color:var(--lamp);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timer .tbar{margin:12px auto 0;width:78%;height:7px;border-radius:4px;background:#1b2636;overflow:hidden}
.timer .tbar i{display:block;height:100%;background:var(--lamp);border-radius:4px;transition:width .25s linear}
.timer.idle{opacity:.35}
.timer .away{font-size:17px;color:var(--dim);letter-spacing:.14em;padding:22px 0 14px}
.timer .nudge{position:absolute;left:0;right:0;bottom:-8px;font-size:13px;color:#f0a090;letter-spacing:.2em}
.stake{flex:none;display:flex;align-items:baseline;justify-content:center;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.stake small{font-size:13px;color:var(--dim)}
.stake b{font-size:26px}
.mvs{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mv{min-height:92px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.mv b{font-size:30px;letter-spacing:.2em;margin-left:.2em}
.mv small{font-size:13px}
.mv.f{background:#1f3a2c;border:1px solid #2e5a42;color:#9fe0b4}
.mv.t{background:#3a1813;border:1px solid #6a2a20;color:#f0a090}
.mv:disabled{opacity:.6}
.mv:active:not(:disabled){filter:brightness(1.15)}
.mvs.shake{animation:shake .45s ease-in-out}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.waitln{flex:none;min-height:56px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--brass);border-radius:16px;color:var(--lamp);letter-spacing:.2em;font-size:16px}
.reveal{flex:none;display:flex;flex-direction:column;gap:16px;padding-top:6px}
.flip{display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:800px}
.fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.fc small{font-size:12px;color:var(--dim)}
.fi{position:relative;width:100%;height:96px;transform-style:preserve-3d;transition:transform .6s ease}
.flip.on .fi{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:30px;letter-spacing:.2em}
.ff{background:var(--card);border:1px solid var(--line);color:var(--dim)}
.fb{transform:rotateY(180deg)}
.fb.f{background:#1f3a2c;border:1px solid #2e5a42;color:#9fe0b4}
.fb.t{background:#3a1813;border:1px solid #6a2a20;color:#f0a090}

/* match: 暗标 */
.match.gops .opp{padding-bottom:6px}
.gtop{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 0 14px}
.gline2{flex:none;width:100%;display:flex;justify-content:space-between;align-items:baseline}
.rnd{font-size:13px;color:var(--dim);letter-spacing:.1em}
.ost{font-size:13px;color:var(--dim);letter-spacing:.1em}
.ost.in{color:#9fe0b4}
.prize{width:140px;height:180px;border-radius:18px;background:linear-gradient(160deg,#2f2614,#1d170c);border:1px solid var(--brass);box-shadow:0 0 30px rgba(201,163,90,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.prize small{font-size:12px;color:var(--brass);letter-spacing:.3em}
.prize b{font-size:88px;line-height:1;color:var(--lamp);font-variant-numeric:tabular-nums}
.scores{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scores div{border-radius:14px;background:var(--card);border:1px solid var(--line);padding:8px;text-align:center}
.scores div:first-child{border-color:#5a4620;background:#2a2112}
.scores small{display:block;font-size:11px;color:var(--dim)}
.scores b{font-size:26px;color:var(--lamp);font-variant-numeric:tabular-nums}
.scores div:last-child b{color:var(--paper)}
.hist{flex:none;display:flex;flex-direction:column;gap:4px;padding:10px 2px 14px;min-height:88px}
.hr{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--dim)}
.hr .hp{color:var(--paper);min-width:52px}
.hr b{margin-left:auto;font-weight:500}
.hr .w{color:var(--lamp)}.hr .l{color:#f0a090}.hr .x{color:var(--dim)}
.fold{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--dim);text-align:left;margin-bottom:8px}
.fold .peek{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold[aria-expanded="true"]{border-color:var(--brass)}
.gchat{flex:none;margin-bottom:8px}
.gchat .mchat{padding:0}
.gchat .mlist{max-height:150px}
.hand{flex:none;display:grid;grid-template-columns:repeat(13,1fr);gap:2px;margin:0 -12px}
.hand .cd{height:56px;border-radius:7px;background:#e8dcbf;color:#1a1206;font-family:var(--serif);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #9c8a62;transition:transform .12s}
.hand .cd.used{background:#243244;color:#3c4a5e;box-shadow:none}
.hand .cd.sel{transform:translateY(-10px);background:var(--lamp);box-shadow:0 0 0 2px var(--lamp),0 6px 12px rgba(0,0,0,.4)}
.hand .cd.sent{transform:translateY(-10px);background:#9fe0b4;box-shadow:0 0 0 2px var(--green)}
.hand .cd:disabled:not(.used):not(.sent){opacity:.55}
.gdone{flex:1;justify-content:center}
.gdone .tot{font-size:48px;display:flex;gap:14px;align-items:baseline}
.gdone .tot span:first-child{color:var(--lamp)}
.gdone .tot i{font-style:normal;color:var(--dim);font-size:32px}

/* settlement overlay */
.stl{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:30;background:var(--ink2);display:flex;flex-direction:column;overflow-y:auto;animation:stlin .25s ease-out}
@keyframes stlin{from{opacity:0}}
.st{flex:1;padding:34px 22px 10px;display:flex;flex-direction:column}
.st h2{margin:0;font-size:30px;letter-spacing:.16em;text-align:center}
.st .d{color:var(--dim);font-size:14px;text-align:center;margin-top:8px}
.st .off{margin-top:30px;text-align:center}
.st .off small{display:block;font-size:12px;color:#f0a090;letter-spacing:.3em;margin-bottom:14px}
.st .off .p{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px}
.st .off .p>div{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px;max-width:96px}
.st .off .p .av{width:64px;height:64px;font-size:32px;background:#3a1f1a;border:1px solid #6b2a21}
.st .off .p b{font-family:var(--serif);font-size:18px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st .off .p span{font-size:12px;color:var(--dim)}
.st .off .none{font-family:var(--serif);font-size:20px;color:var(--dim);letter-spacing:.2em}
.st .you{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st .you div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 12px;text-align:center}
.st .you b{display:block;font-family:var(--serif);font-size:36px;font-weight:900;color:var(--lamp);line-height:1.1}
.st .you span{font-size:12px;color:var(--dim)}
.st .next{margin-top:auto;padding-top:24px;text-align:center}
.st .next b{display:block;font-family:var(--serif);font-weight:900;font-size:56px;color:var(--lamp);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.st .next .land{letter-spacing:.3em;margin-left:.3em}
.st .next small{display:block;margin-top:10px;font-size:13px;color:var(--dim);letter-spacing:.1em}
.stl .acts{flex:none;padding:16px 22px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.stl .shut{min-height:44px;padding:0 24px;color:var(--dim);font-size:14px;letter-spacing:.3em}

/* toast */
.toast{position:fixed;left:50%;bottom:140px;transform:translate(-50%,20px);opacity:0;z-index:40;background:#2a2112;border:1px solid #5a4620;color:var(--lamp);padding:10px 18px;border-radius:22px;font-size:14px;transition:transform .25s,opacity .25s;pointer-events:none;white-space:nowrap}
.toast.show{transform:translate(-50%,0);opacity:1}