/* ===== 畜生道 · 样式 ===== */
:root{
  --gold:#d9b45a;
  --gold2:#ffe1a0;
  --blood:#a32222;
  --bone:#e9e2d2;
  --panel:rgba(16,13,20,.9);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#040306;overflow:hidden;color:#e9e2d2;
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none}
body{display:grid;place-items:center}

#stage{position:relative;width:min(100vw,160vh);height:min(62.5vw,100vh);
  overflow:hidden;overflow:clip;contain:paint;
  background:radial-gradient(ellipse at 50% 40%,#efe6d2,#ddcfb4 62%,#c9b998);
  box-shadow:0 0 60px rgba(60,44,24,.5)}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.snd-btn{position:absolute;right:8px;bottom:8px;z-index:40;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(217,180,90,.45);background:rgba(16,13,20,.55);color:var(--gold2);
  font-size:16px;line-height:1;cursor:pointer;backdrop-filter:blur(2px)}
.snd-btn.off{opacity:.42}

/* 手机横屏 / 矮屏：舞台铺满整屏，棋盘填满宽度可拖动 */
@media (max-height:620px){
  #stage{width:100vw;height:100vh}
  #players{width:15.5%;top:1%;left:.4%;opacity:.9}
  .pcard{height:7.6vh;padding:0 .4vh}
  .pav{width:4.4vh;height:4.4vh}
  .pname{font-size:2.2vh}
  #actionbar{width:15.5%;right:.4%;opacity:.92}
  .btn-main{height:9vh;font-size:3.2vh}
  .btn-sub{height:6vh;font-size:2.5vh}
  #hud{opacity:.96}
  .snd-btn{width:26px;height:26px;font-size:13px}
}

#hud{position:absolute;inset:0;pointer-events:none}
#hud.hud-off{opacity:0;pointer-events:none!important}
#hud.hud-off>*{pointer-events:none!important}
#hud>*{pointer-events:auto}

/* ---------- 玩家列表 ---------- */
#players{position:absolute;left:.9%;top:2%;width:11.5%;
  display:flex;flex-direction:column;gap:.5vmin}
.pcard{display:flex;align-items:center;gap:.7vmin;padding:.45vmin .7vmin;
  background:linear-gradient(90deg,rgba(12,10,16,.94),rgba(12,10,16,.3));
  border:1px solid rgba(217,180,90,.2);border-left:3px solid rgba(217,180,90,.32);
  box-shadow:0 2px 10px rgba(0,0,0,.65);transition:border-color .25s,box-shadow .25s}
.pcard.on{border-color:rgba(255,225,160,.8);border-left-color:var(--gold2);
  box-shadow:0 0 14px rgba(217,180,90,.4),inset 0 0 18px rgba(217,180,90,.09)}
.pcard.dead{opacity:.38;filter:grayscale(1)}
.pav{width:4.6vmin;height:4.6vmin;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03)}
.pinfo{flex:1;min-width:0}
.pname{font-size:1.5vmin;letter-spacing:.06em;color:#f2e9d6;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pname .idx{color:var(--gold);font-size:1.15vmin;margin-right:.25vmin}
.pitems{display:flex;gap:.55vmin;margin-top:.22vmin;flex-wrap:wrap;min-height:.1vmin}
.pitem{display:flex;align-items:center;gap:.18vmin;font-size:1.1vmin;color:#c9bfa8}
.pitem img{width:1.75vmin;height:1.75vmin;image-rendering:pixelated}
.ptraits{margin-top:.18vmin;display:flex;gap:.5vmin;flex-wrap:wrap}
.trait{font-family:"KaiTi","STKaiti","Palatino Linotype",serif;font-size:1.3vmin;
  color:#ffd265;letter-spacing:.14em;
  text-shadow:0 0 6px rgba(255,190,60,.9),0 0 16px rgba(255,140,20,.6)}

/* ---------- 操作条 ---------- */
#actionbar{position:absolute;right:.9%;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.3vmin;align-items:stretch;justify-content:center;
  width:11.5%}
.btn-main{position:relative;width:100%;height:7.6vmin;font-size:2.1vmin;letter-spacing:.22em;
  color:#ffe9b8;font-family:"KaiTi","STKaiti",serif;cursor:pointer;
  background:linear-gradient(180deg,#3a1010,#1a0808 60%,#2a0c0c);
  border:1px solid rgba(217,180,90,.75);border-radius:2px;
  box-shadow:0 0 18px rgba(170,25,25,.55),inset 0 0 20px rgba(0,0,0,.85);
  text-shadow:0 0 10px rgba(255,180,80,.65);transition:.16s}
.btn-main:hover:not(:disabled){border-color:var(--gold2);color:#fff2cf;
  box-shadow:0 0 26px rgba(220,60,40,.75),inset 0 0 20px rgba(0,0,0,.7)}
.btn-main:active:not(:disabled){transform:translateY(1px) scale(.985)}
.btn-main:disabled{opacity:.35;cursor:default;filter:grayscale(.6)}
.btn-sub{width:100%;height:5.2vmin;font-size:1.6vmin;letter-spacing:.12em;
  color:#cdc2a8;cursor:pointer;background:rgba(18,14,22,.92);
  border:1px solid rgba(217,180,90,.35);border-radius:2px;
  box-shadow:0 2px 10px rgba(0,0,0,.7);transition:.16s}
.btn-sub:hover:not(:disabled){color:var(--gold2);border-color:rgba(217,180,90,.8)}
.btn-sub:disabled{opacity:.32;cursor:default}

/* ---------- 提示 ---------- */
#toast{position:absolute;left:50%;top:2.6%;transform:translateX(-50%) translateY(-8px);
  padding:.55vmin 2vmin;font-size:1.6vmin;letter-spacing:.12em;color:#ffe9b8;
  background:rgba(10,8,12,.86);border:1px solid rgba(217,180,90,.45);
  box-shadow:0 0 18px rgba(0,0,0,.8);opacity:0;transition:.28s;white-space:nowrap;
  pointer-events:none;text-shadow:0 0 10px rgba(255,180,80,.5)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 道具面板 ---------- */
#itemPanel{position:absolute;left:50%;top:50%;width:46vmin;max-width:86vw;
  transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,14,22,.98),rgba(8,6,10,.99));
  border:1px solid rgba(217,180,90,.5);
  box-shadow:0 0 40px rgba(0,0,0,.9),0 0 60px rgba(217,180,90,.12);
  transition:opacity .22s,transform .22s cubic-bezier(.2,.9,.3,1);
  padding:1.6vmin 1.8vmin 1.8vmin;z-index:20}
#itemPanel.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.ip-title{font-size:1.4vmin;letter-spacing:.3em;color:var(--gold);margin-bottom:1vmin;text-align:center}
.ip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1vmin}
.ip-cell{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.3vmin;padding:.9vmin .5vmin;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(217,180,90,.18);
  transition:.16s;min-height:11vmin;justify-content:center}
.ip-cell:hover{border-color:rgba(217,180,90,.6);background:rgba(217,180,90,.08)}
.ip-cell.sel{border-color:var(--gold2);background:rgba(217,180,90,.16);
  box-shadow:0 0 16px rgba(217,180,90,.35),inset 0 0 16px rgba(217,180,90,.12)}
.ip-cell.dis{opacity:.3;cursor:not-allowed;filter:grayscale(.8)}
.ip-cell img{width:4.4vmin;height:4.4vmin;image-rendering:pixelated}
.ip-name{font-size:1.25vmin;color:#e8dcc0;letter-spacing:.06em}
.ip-num{position:absolute;top:.35vmin;right:.6vmin;font-size:1.15vmin;color:var(--gold2)}
.ip-desc{font-size:1.02vmin;color:#8d8472;text-align:center;line-height:1.45;padding:0 .2vmin}
.ip-foot{display:flex;gap:1.2vmin;justify-content:flex-end;margin-top:1.2vmin}
.btn-mini{min-width:8vmin;height:3.6vmin;font-size:1.3vmin;letter-spacing:.14em;cursor:pointer;
  color:#cfc4aa;background:rgba(30,24,34,.9);border:1px solid rgba(217,180,90,.3);
  border-radius:2px;transition:.16s}
.btn-mini:hover{border-color:rgba(217,180,90,.8);color:#ffe9b8}
.btn-mini.primary{color:#ffe9b8;background:linear-gradient(180deg,#3a1010,#1a0808);
  border-color:rgba(217,180,90,.7);box-shadow:0 0 14px rgba(170,25,25,.5)}
.btn-mini:disabled{opacity:.3;cursor:default}

/* ---------- 骰子点数选择 ---------- */
#pipPicker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  display:flex;gap:1vmin;padding:1.4vmin 1.6vmin;background:rgba(10,8,14,.97);
  border:1px solid rgba(217,180,90,.5);box-shadow:0 0 40px rgba(0,0,0,.9),0 0 24px rgba(217,180,90,.18);
  opacity:0;pointer-events:none;transition:.2s;z-index:16}
#pipPicker.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#pipPicker button{width:5.2vmin;height:5.2vmin;font-size:1.9vmin;color:#ffe9b8;cursor:pointer;
  background:linear-gradient(180deg,#2a1414,#150a0a);border:1px solid rgba(217,180,90,.45);
  border-radius:2px;font-family:"KaiTi",serif;transition:.16s}
#pipPicker button:hover{border-color:var(--gold2);background:#3a1414;box-shadow:0 0 14px rgba(217,180,90,.4)}

/* ---------- 菜单 ---------- */
#menu{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(46,12,14,.9),rgba(4,3,7,.985) 66%)}
#menu.hide{opacity:0;pointer-events:none;transition:opacity .5s}
.menu-inner{width:72%;max-width:132vmin;text-align:center;transform:translateY(-1vmin)}
.title{font-family:"KaiTi","STKaiti","Songti SC",serif;font-size:11vmin;letter-spacing:.3em;
  color:#e9dfc6;text-indent:.3em;line-height:1.05;
  text-shadow:0 0 20px rgba(180,25,25,.6),0 4px 0 #2a0a0a,0 8px 0 #120404,0 0 80px rgba(150,0,0,.45);
  animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 20px rgba(180,25,25,.55),0 4px 0 #2a0a0a,0 8px 0 #120404,0 0 70px rgba(150,0,0,.4)}
 50%{text-shadow:0 0 30px rgba(220,45,45,.75),0 4px 0 #2a0a0a,0 8px 0 #120404,0 0 110px rgba(190,0,0,.6)}}
.sub{margin-top:1.4vmin;font-size:1.5vmin;letter-spacing:.42em;color:#7d7462}
.msec{margin-top:2.6vmin}
.mlabel{font-size:1.35vmin;letter-spacing:.3em;color:#8b8170;margin-bottom:.9vmin}
.opts{display:flex;gap:1.2vmin;justify-content:center}
.opt{padding:.85vmin 2.6vmin;font-size:1.5vmin;letter-spacing:.14em;cursor:pointer;
  color:#a99f8b;background:rgba(20,16,26,.85);border:1px solid rgba(217,180,90,.22);
  border-radius:2px;transition:.16s}
.opt:hover{border-color:rgba(217,180,90,.6);color:#e3d8be}
.opt.on{color:#ffe9b8;border-color:var(--gold2);background:rgba(90,22,22,.55);
  box-shadow:0 0 18px rgba(190,40,30,.5)}
.chars{display:flex;gap:1.4vmin;justify-content:center}
.char{position:relative;padding:.8vmin 1.1vmin;cursor:pointer;background:rgba(18,14,24,.8);
  border:1px solid rgba(217,180,90,.18);transition:.16s;display:flex;flex-direction:column;
  align-items:center;gap:.35vmin}
.char:hover{border-color:rgba(217,180,90,.55)}
.char.on{border-color:var(--gold2);background:rgba(90,22,22,.45);
  box-shadow:0 0 18px rgba(190,40,30,.45)}
.char canvas{width:7vmin;height:7vmin;image-rendering:pixelated}
.char span{font-size:1.2vmin;letter-spacing:.14em;color:#cfc4aa}
.btn-start{margin-top:3.2vmin;padding:1.5vmin 6vmin;font-size:2.3vmin;letter-spacing:.34em;
  font-family:"KaiTi","STKaiti",serif;color:#ffe9b8;cursor:pointer;
  background:linear-gradient(180deg,#4a1414,#1c0909 55%,#2e0d0d);
  border:1px solid rgba(217,180,90,.8);border-radius:2px;
  box-shadow:0 0 26px rgba(190,35,25,.6),inset 0 0 26px rgba(0,0,0,.85);
  text-shadow:0 0 12px rgba(255,180,80,.7);transition:.18s}
.btn-start:hover{color:#fff3d2;box-shadow:0 0 42px rgba(230,70,45,.85),inset 0 0 26px rgba(0,0,0,.7);
  border-color:#fff0c4}
.hint{margin-top:2vmin;font-size:1.15vmin;letter-spacing:.28em;color:#5e564a}

/* ---------- 结算 ---------- */
#over{position:absolute;inset:0;z-index:32;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,8,10,.9),rgba(3,2,5,.98) 70%);
  opacity:0;pointer-events:none;transition:opacity .6s}
#over.show{opacity:1;pointer-events:auto}
.over-inner{text-align:center}
.over-title{font-family:"KaiTi","STKaiti",serif;font-size:6vmin;letter-spacing:.4em;color:#ffd98a;
  text-indent:.4em;text-shadow:0 0 30px rgba(255,160,40,.7),0 0 70px rgba(200,60,0,.5)}
.over-sub{margin-top:2vmin;font-size:1.7vmin;letter-spacing:.3em;color:#9a907c}
.btn-again{margin-top:3.4vmin;padding:1.2vmin 4vmin;font-size:1.7vmin;letter-spacing:.26em;
  font-family:"KaiTi",serif;color:#ffe9b8;cursor:pointer;
  background:linear-gradient(180deg,#3a1010,#180707);border:1px solid rgba(217,180,90,.7);
  border-radius:2px;box-shadow:0 0 20px rgba(180,30,20,.5);transition:.18s}
.btn-again:hover{border-color:#fff0c4;box-shadow:0 0 32px rgba(230,70,45,.8)}

.btn-rules{margin-top:1.6vmin;padding:.7vmin 2.2vmin;font-size:1.2vmin;letter-spacing:.2em;
  font-family:"KaiTi","STKaiti",serif;color:#8d8270;cursor:pointer;background:transparent;
  border:1px solid rgba(217,180,90,.28);border-radius:2px;transition:.18s}
.btn-rules:hover{color:#ffe9b8;border-color:rgba(217,180,90,.7)}

/* ---------- 玩法说明 ---------- */
#rules{position:absolute;inset:0;z-index:34;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,8,10,.92),rgba(3,2,5,.98) 70%);
  opacity:0;pointer-events:none;transition:opacity .35s}
#rules.show{opacity:1;pointer-events:auto}
.rules-inner{width:min(88vmin,860px);max-height:78%;overflow-y:auto;padding:2.2vmin 3vmin 1.4vmin;
  background:linear-gradient(180deg,rgba(24,18,26,.97),rgba(12,9,14,.98));
  border:1px solid rgba(217,180,90,.34);border-radius:3px;
  box-shadow:0 0 50px rgba(0,0,0,.9),inset 0 0 40px rgba(120,20,10,.14);
  scrollbar-width:thin;scrollbar-color:rgba(217,180,90,.4) transparent}
.rules-inner::-webkit-scrollbar{width:6px}
.rules-inner::-webkit-scrollbar-thumb{background:rgba(217,180,90,.35);border-radius:3px}
.rules-title{text-align:center;font-family:"KaiTi","STKaiti",serif;font-size:3vmin;letter-spacing:.34em;
  color:#ffd98a;text-indent:.34em;text-shadow:0 0 22px rgba(255,160,40,.6);
  padding-bottom:1.6vmin;border-bottom:1px solid rgba(217,180,90,.22)}
.ru-sec{margin-top:1.35vmin}
.ru-h{font-family:"KaiTi","STKaiti",serif;font-size:1.6vmin;letter-spacing:.28em;color:var(--gold2);
  margin-bottom:.8vmin;text-shadow:0 0 12px rgba(217,180,90,.45)}
.ru-sec p{font-size:1.26vmin;line-height:1.85;color:#b8ae9a;letter-spacing:.03em}
.ru-sec p b{color:#ffe1a0;font-weight:normal}
.ru-close{position:sticky;bottom:0;display:block;margin:1.8vmin auto 0;z-index:2;
  background:linear-gradient(180deg,#3a1010,#1a0808);box-shadow:0 -10px 18px rgba(10,7,12,.95)}

.hidden{display:none !important}

/* ---------- 选角页 ---------- */
#select{position:absolute;inset:0;z-index:32;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 34%,rgba(40,12,16,.94),rgba(4,3,7,.99) 70%)}
#select.hidden{display:none}
.sel-inner{width:88%;max-width:150vmin;text-align:center}
.sel-title{font-family:"KaiTi","STKaiti","Songti SC",serif;font-size:5.4vmin;letter-spacing:.3em;
  color:#f0e6cc;text-indent:.3em;text-shadow:0 0 22px rgba(190,30,20,.65),0 3px 0 #2a0a0a}
.sel-sub{margin-top:1.1vmin;font-size:1.4vmin;letter-spacing:.24em;color:#8b8170}
.sel-grid{margin-top:2.2vmin;display:grid;grid-template-columns:repeat(5,1fr);gap:1.2vmin}
.sel-cell{position:relative;padding:1vmin .6vmin 1.2vmin;cursor:pointer;background:rgba(18,14,24,.82);
  border:1px solid rgba(217,180,90,.2);border-radius:3px;transition:.16s;display:flex;
  flex-direction:column;align-items:center;gap:.2vmin}
.sel-cell:hover{border-color:rgba(217,180,90,.6);transform:translateY(-.3vmin)}
.sel-cell.on{border-color:var(--gold2);background:rgba(96,24,24,.6);
  box-shadow:0 0 22px rgba(200,45,30,.55),inset 0 0 26px rgba(0,0,0,.6)}
.sel-cell canvas{width:12.8vmin;height:15.8vmin}
.sel-name{font-size:1.5vmin;letter-spacing:.16em;color:#efe4c8;font-family:"KaiTi",serif}
.sel-tag{font-size:1.05vmin;letter-spacing:.1em;color:#8f8574}
.sel-cell.on .sel-name{color:#ffe9b8}
.sel-foot{margin-top:2.4vmin;display:flex;gap:2vmin;align-items:center;justify-content:center}
.sel-ok{margin-top:0;padding:1.2vmin 5vmin;font-size:2vmin}



/* ===== 联机：房间 / 大厅 ===== */
#online,#lobby{position:absolute;inset:0;z-index:33;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 34%,rgba(40,12,16,.94),rgba(4,3,7,.99) 70%)}
#online.hidden,#lobby.hidden{display:none !important}
.online-inner,.lobby-inner{width:78%;max-width:96vmin;text-align:center}
.on-row{margin-top:2.6vmin;display:flex;align-items:center;justify-content:center;gap:2vmin}
.on-label{font-size:1.6vmin;letter-spacing:.16em;color:#a99e88;min-width:12vmin;text-align:right}
.on-input{width:34vmin;height:5vmin;padding:0 1.4vmin;border-radius:.9vmin;outline:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(217,180,90,.35);color:#ffe9b8;
  font-size:1.9vmin;letter-spacing:.1em;font-family:inherit}
.on-input:focus{border-color:rgba(217,180,90,.85)}
.on-input.code{text-transform:uppercase;letter-spacing:.34em;text-align:center;font-size:2.1vmin}
.on-msg{margin-top:1.8vmin;min-height:2.2vmin;font-size:1.5vmin;letter-spacing:.1em;color:#ff9aa6}
.on-foot{margin-top:3vmin;display:flex;gap:2vmin;align-items:center;justify-content:center;flex-wrap:wrap}
.on-create{width:auto;padding:0 4vmin}
.lob-code{font-family:"KaiTi","STKaiti",serif;font-size:8vmin;letter-spacing:.34em;color:#ffe9b8;
  margin-top:1.4vmin;text-shadow:0 0 3vmin rgba(217,180,90,.45)}
.lob-count{margin-top:2vmin;display:flex;gap:1.4vmin;justify-content:center}
.lob-seats{margin-top:2.4vmin;display:flex;gap:1.8vmin;justify-content:center;flex-wrap:wrap}
.lob-seat{width:17vmin;padding:1.6vmin .8vmin;border-radius:1.2vmin;background:rgba(255,255,255,.04);
  border:1px solid rgba(217,180,90,.22)}
.lob-seat.on{border-color:rgba(217,180,90,.85);box-shadow:0 0 2vmin rgba(217,180,90,.3)}
.lob-seat canvas{width:9vmin;height:11vmin;display:block;margin:0 auto}
.lob-seat .sn{margin-top:.8vmin;font-size:1.7vmin;color:#ffe9b8;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lob-seat .st{margin-top:.4vmin;font-size:1.3vmin;color:#9c9382;letter-spacing:.1em}
.lob-tip{margin-top:2vmin;font-size:1.5vmin;color:#a99e88;letter-spacing:.14em;min-height:2vmin}
.lob-avatar-empty{width:9vmin;height:11vmin;margin:0 auto;border-radius:50%;
  border:1px dashed rgba(217,180,90,.35);display:flex;align-items:center;justify-content:center;
  color:#6f6657;font-size:2.4vmin}

@media (max-height:620px){
  .online-inner,.lobby-inner{width:92%;max-width:120vmin}
  .on-input{width:30vw;height:7vh;font-size:2.4vh}
  .on-label{font-size:2.2vh;min-width:16vw}
  .lob-code{font-size:9vh}
  .lob-seat{width:15vw}
  .lob-seat canvas{width:8vw;height:10vw}
}