:root{
  --stage-a:#1E2766;--stage-b:#0C1130;--ink:#F3F1FF;--ink-soft:#B4B8E2;--paper:rgba(255,255,255,.07);--line:rgba(255,255,255,.14);
  --edge:rgba(255,210,74,.45);--gold:#FFD24A;--red:#F0364A;--green:#3DDC97;--navy:#14204F;
  --font:"Huninn","Noto Sans HK","PingFang HK","Microsoft JhengHei",system-ui,sans-serif;--num:"Inter",var(--font);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--stage-b);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
.stage{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,220,140,.18),transparent 70%),
  repeating-conic-gradient(from 0deg at 50% -10%,rgba(255,255,255,.035) 0 6deg,transparent 6deg 15deg),
  linear-gradient(180deg,var(--stage-a),var(--stage-b) 70%)}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:16px 16px 96px}
.card{background:var(--paper);border:1px solid var(--edge);border-radius:18px;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn{appearance:none;border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(180deg,#FF5A67,var(--red));box-shadow:0 5px 0 #A3141F;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #A3141F}
.btn:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 5px 0 #555}
.btn.gold{background:linear-gradient(180deg,#FFE27A,var(--gold));color:var(--navy);box-shadow:0 5px 0 #B98A12}
.btn.alt{background:rgba(255,255,255,.1);box-shadow:0 5px 0 rgba(0,0,0,.35);border:1px solid var(--line)}
.btn.sm{padding:8px 14px;border-radius:12px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip.ghost{background:transparent}
/* lobby */
.brand{text-align:center;margin:24px 0 20px}
.brand h1{font-size:44px;margin:8px 0 0;letter-spacing:.06em;text-shadow:0 3px 0 #A3141F,0 8px 24px rgba(0,0,0,.5)}
.tag{color:var(--ink-soft);margin:4px 0 0}
.logo{display:flex;justify-content:center;gap:10px}
.logo .die{width:54px;height:54px;transform:rotate(-8deg)}.logo .die+.die{transform:rotate(10deg) translateY(6px)}
#lobby .card{max-width:440px;margin:0 auto}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs button{flex:1;padding:10px;border-radius:999px;border:1px solid var(--line);background:transparent;font-weight:900;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.form input{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);font-size:17px;color:var(--ink)}
.form input:focus,.chat-form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.msg{color:#FF9AA2;min-height:1.5em;margin:10px 0 0;font-weight:700}
.foot{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:18px}
/* room */
.bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.grow{flex:1}
.code b{font-family:var(--num);font-weight:900;letter-spacing:.12em;color:var(--gold);font-size:18px}
.code .lbl,.code .cp{font-size:13px;color:var(--ink-soft)}
.seats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:0 0 12px}
.seat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;align-items:center;gap:8px;min-width:0;position:relative}
.seat.turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,74,.35),0 0 18px rgba(255,210,74,.25)}
.seat.empty{opacity:.4;border-style:dashed;justify-content:center;font-size:13px}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;color:var(--navy)}
.seat .nm{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.seat .sub{font-size:12px;color:var(--ink-soft)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px}.dot.off{background:#777}
.crown{position:absolute;top:-9px;left:6px;font-size:14px}
.kick{margin-left:auto;background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:14px;padding:2px 4px}
.layout{display:grid;grid-template-columns:1fr 340px;gap:12px;align-items:start}
.table{min-height:420px}
.chat{display:flex;flex-direction:column;height:min(70vh,640px);padding:12px;position:sticky;top:12px}
.chat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#chat-close,.chat-fab{display:none}
.chat-log{list-style:none;margin:0;padding:0 2px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:6px}
.chat-log li{max-width:88%;padding:7px 11px;border-radius:14px;background:rgba(255,255,255,.09);word-break:break-word;align-self:flex-start}
.chat-log li .who{display:block;font-size:12px;color:var(--gold);font-weight:900}
.chat-log li.me{align-self:flex-end;background:rgba(255,210,74,.18)}
.chat-log li.sys{align-self:center;background:none;color:var(--ink-soft);font-size:13px;text-align:center;max-width:100%}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.quick button{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:14px}
.chat-form{display:flex;gap:6px}
.chat-form input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--gold);color:var(--navy);font-weight:900;padding:10px 18px;border-radius:999px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:calc(100vw - 32px)}
/* game picker */
.pick h2,.table h2{margin:0 0 10px;font-size:20px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.game{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.05);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.game b{font-size:18px}.game span{font-size:13px;color:var(--ink-soft)}
.game:disabled{opacity:.45;cursor:not-allowed}
.game:not(:disabled):hover{border-color:var(--gold)}
.wait{color:var(--ink-soft);text-align:center;padding:40px 0}
/* dice */
.die{display:inline-block;width:44px;height:44px;border-radius:10px;background:#fff;position:relative;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.35);flex:none}
.die i{position:absolute;width:18%;height:18%;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%)}
.die.d1 i{background:var(--red);width:26%;height:26%}
.die.sm{width:30px;height:30px;border-radius:7px}
.die.hit{box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(255,210,74,.7)}
.die.dim{opacity:.35}
.status{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;color:var(--ink-soft);font-size:14px}
.timer{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:14px}
.timer i{display:block;height:100%;background:var(--gold);transition:width 1s linear}
.bidbox{text-align:center;padding:14px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line);margin-bottom:14px}
.bidbox .big{font-family:var(--num);font-size:46px;font-weight:900;line-height:1.1;display:flex;align-items:center;justify-content:center;gap:12px}
.bidbox .by{color:var(--ink-soft);font-size:14px}
.zai{display:inline-block;background:var(--red);color:#fff;font-size:15px;padding:2px 10px;border-radius:999px;font-family:var(--font);vertical-align:middle}
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.opp{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.04)}
.opp .row{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.cup{font-size:26px}
.mine{display:flex;gap:10px;justify-content:center;margin:6px 0 14px;flex-wrap:wrap}
.ctrl{display:flex;flex-direction:column;gap:10px;align-items:center}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);font-size:22px;font-weight:900;cursor:pointer}
.stepper output{font-family:var(--num);font-size:34px;font-weight:900;min-width:56px;text-align:center}
.faces{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.faces button{padding:4px;border-radius:12px;border:2px solid transparent;background:none;cursor:pointer}
.faces button[aria-pressed=true]{border-color:var(--gold);background:rgba(255,210,74,.15)}
.toggle{display:flex;align-items:center;gap:8px;font-weight:900;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--red)}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.acts .btn{min-width:120px;font-size:18px}
.hint{font-size:13px;color:var(--ink-soft);text-align:center;min-height:1.3em}
.result{text-align:center;padding:12px;border-radius:14px;background:rgba(240,54,74,.18);border:1px solid rgba(240,54,74,.5);margin-bottom:14px;font-weight:900}
.hist{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-soft)}
.hist li{border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.score{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-size:14px}
.score span{background:rgba(255,255,255,.06);border-radius:999px;padding:4px 12px}
.hostbar{display:flex;justify-content:flex-end;margin-top:14px}
@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .chat{position:fixed;inset:auto 0 0 0;height:70vh;border-radius:18px 18px 0 0;z-index:40;transform:translateY(105%);transition:transform .25s;background:#141A44;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.chat-on .chat{transform:none}
  #chat-close{display:inline-flex}
  .chat-fab{display:inline-flex;background:var(--gold);color:var(--navy);border-color:var(--gold)}
  .bar{position:sticky;top:0;z-index:20;padding:8px 0;background:linear-gradient(var(--stage-a) 70%,transparent)}
  .faces .die{width:36px;height:36px}
  .faces{gap:4px}
  .code .cp{display:none}
  .seats{grid-template-columns:repeat(2,1fr)}
  .die{width:40px;height:40px}
}
.badge{background:var(--red);color:#fff;border-radius:999px;font-size:12px;padding:0 7px;min-width:20px;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.note{font-size:12px;color:var(--ink-soft);line-height:1.4}
.invited{margin:0;color:var(--green);font-weight:900}
.pwchip span{font-weight:700}
/* clearer guidance */
body{font-size:17px}
:root{--ink-soft:#C9CCF0}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);opacity:.6}
.steps li::before{content:counter(s);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.12);font-family:var(--num)}
.steps li.now{opacity:1;border-color:var(--gold);background:rgba(255,210,74,.1)}
.steps li.now::before{background:var(--gold);color:var(--navy)}
.steps li.done{opacity:.85}.steps li.done::before{content:'✓';background:var(--green);color:var(--navy)}
.steps li span{font-size:14px;color:var(--ink-soft)}
.steps .num{color:var(--gold);font-family:var(--num)}
.status .chip.sm{padding:4px 12px;font-size:14px}
.rules{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px;background:rgba(0,0,0,.25)}
.rules h3{margin:0 0 6px;font-size:17px;color:var(--gold)}
.rules ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.rules li.sub{list-style:none;margin-left:-4px;color:var(--gold)}
.yourturn{background:linear-gradient(90deg,#FFE27A,var(--gold));color:var(--navy);font-weight:900;font-size:24px;border-radius:14px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;animation:pulse 1.4s ease-in-out infinite;scroll-margin-top:70px}
.yourturn span,.theirturn span{font-family:var(--num);font-size:18px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,74,.6)}50%{box-shadow:0 0 0 10px rgba(255,210,74,0)}}
.theirturn{border:1px solid var(--line);border-radius:14px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:18px}
.bidbox .mean{font-size:14px;color:var(--ink-soft);margin-top:4px}
.bidbox .by{font-size:13px}
.section-t{font-size:13px;color:var(--ink-soft);margin:4px 0 6px;font-weight:700}
.opp.on{border-color:var(--gold);background:rgba(255,210,74,.08)}
.thinking{font-size:12px;color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
.choose{margin:0;text-align:center;font-size:16px}
.big-open{font-size:20px;min-width:240px}
.or{font-size:13px;color:var(--ink-soft);margin-top:4px}
.step{display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px;margin-top:6px}
.sn{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-family:var(--num);font-size:14px}
.big-bid{font-size:20px;min-width:240px}
.hint{font-size:14px}
.result{background:rgba(0,0,0,.3);border:1px solid var(--gold);text-align:center}
.result .r1{font-size:20px;color:var(--gold);margin-bottom:6px}
.result .r2{font-weight:700;margin:2px 0}
.result .big{font-family:var(--num);font-size:28px;color:var(--gold)}
.result .ok{color:var(--green)}.result .bad{color:#FF8A95}
.result .r3{font-size:24px;margin-top:6px}
.result .sub{font-size:13px;color:var(--ink-soft);font-weight:500;margin-top:4px}

.bar .chip{white-space:nowrap}
.theirturn em{font-style:normal}
@media (max-width:520px){
  .bar{gap:6px}
  .bar .chip{padding:7px 10px;font-size:14px}
  .code .lbl{display:none}
  .code b{font-size:16px;letter-spacing:.08em}
}