:root{
  --ink:#1f3350;
  --ink-2:#35496a;
  --paper:#f7f4ee;
  --panel:#fffdf8;
  --line:#ddd5c6;
  --line-2:#cfc6b4;
  --gold:#c99a3f;
  --gold-soft:#f3e3c1;
  --red:#b23a48;
  --green:#2f7d4f;
  --muted:#8a8273;
  --shadow:0 8px 24px rgba(31,51,80,.10);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Serif SC",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #fbf8f2 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #f2ece0 0%, transparent 55%),
    #ece7dd;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit}
.hidden{display:none !important}
.screen{display:none}
.screen.on{display:block}
h1,h2,h3,h4{margin:0}
code{background:#eee8da;border-radius:5px;padding:1px 6px;font-size:.92em}

/* ---------- 通用控件 ---------- */
.btn{
  border:1px solid var(--line-2);background:#fff;color:var(--ink);
  border-radius:10px;padding:9px 16px;font-size:14px;cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{background:#f6f1e6;transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,51,80,.10)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#f8f4ea}
.btn.primary:hover{background:#28405f}
.btn.ghost{background:transparent}
.btn.big{padding:12px 18px;font-size:15px;width:100%}
.btn.small{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a1f07}
.msg{min-height:20px;font-size:13px;color:var(--red);margin:10px 0 0}
.msg.ok{color:var(--green)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:13px;color:var(--muted)}
.field input{
  border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font-size:15px;
  background:#fff;color:var(--ink);outline:none;
}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,63,.15)}
.seg{display:flex;gap:6px}
.seg button{
  flex:1;border:1px solid var(--line-2);background:#fff;border-radius:9px;padding:9px 0;
  font-size:13.5px;cursor:pointer;color:var(--ink);
}
.seg button.on{background:var(--ink);color:#f8f4ea;border-color:var(--ink)}

/* ---------- 开始界面 ---------- */
#screen-home{max-width:1280px;margin:0 auto;padding:26px 24px 40px}
.hero{
  position:relative;overflow:hidden;border-radius:22px;
  background:linear-gradient(135deg,#1f3350 0%,#2b4568 55%,#1b2c46 100%);
  color:#f5f1e7;padding:34px 38px 30px;box-shadow:var(--shadow);
}
.hero::after{
  content:"";position:absolute;right:-40px;top:-60px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(201,154,63,.34), transparent 65%);
}
.hero-inner{position:relative;z-index:2}
.seal{
  display:inline-block;border:1px solid rgba(245,241,231,.45);border-radius:6px;
  padding:3px 10px;font-size:12px;letter-spacing:6px;color:#e9dcc0;margin-bottom:14px;
}
.hero h1{font-size:56px;letter-spacing:18px;font-weight:700;line-height:1.05;text-indent:12px}
.tagline{margin:12px 0 4px;font-size:15px;letter-spacing:5px;color:#e6d9bd}
.meta-line{margin:0;font-size:12.5px;color:rgba(245,241,231,.62);letter-spacing:1px}
.kiln{position:absolute;right:34px;bottom:0;display:flex;align-items:flex-end;gap:7px;height:88px;z-index:1}
.kiln span{display:block;width:12px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,rgba(201,154,63,.9),rgba(201,154,63,.15))}
.kiln span:nth-child(1){height:34px;opacity:.55}
.kiln span:nth-child(2){height:58px;opacity:.7}
.kiln span:nth-child(3){height:82px}
.kiln span:nth-child(4){height:64px;opacity:.75}
.kiln span:nth-child(5){height:44px;opacity:.6}
.kiln span:nth-child(6){height:26px;opacity:.45}

.home-grid{display:grid;grid-template-columns:370px minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:0 2px 10px rgba(31,51,80,.04);
}
.panel h2{font-size:16px;letter-spacing:2px;margin-bottom:16px}
.enter-panel{position:sticky;top:20px}
.or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.join-row .btn{width:auto;flex:none}
.code-input{
  flex:1;border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;
  font-size:18px;letter-spacing:6px;text-transform:uppercase;text-align:center;
  background:#fff;outline:none;min-width:0;
}
.code-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,63,.15)}
.resume-box{
  margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--gold-soft);border:1px solid #e7cf9c;border-radius:11px;padding:10px 12px;font-size:12.5px;
}
.resume-box b{display:block;font-size:13px;margin-bottom:2px}
.resume-box span{color:#6b5a33}
.share-tip{
  margin-top:18px;font-size:12px;line-height:1.75;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:14px;
}
.share-tip b{display:block;color:var(--ink);margin-bottom:4px;font-size:12.5px}

.rules-panel{padding-bottom:8px}
.rules-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.rules-sub{font-size:11.5px;color:var(--muted)}
.rules{font-size:13.5px;line-height:1.85;max-height:none}
.rules h3{
  font-size:16px;letter-spacing:2px;margin:26px 0 10px;padding-left:12px;
  border-left:4px solid var(--gold);line-height:1.4;
}
.rules h3:first-child{margin-top:8px}
.rules h4{font-size:13.5px;margin:16px 0 6px;color:var(--ink-2);letter-spacing:1px}
.rules p{margin:8px 0}
.rules ul,.rules ol{margin:8px 0;padding-left:22px}
.rules li{margin:4px 0}
.rules .formula{
  background:var(--gold-soft);border:1px solid #e7cf9c;border-radius:10px;
  padding:10px 14px;font-weight:700;letter-spacing:1px;color:#6b4a12;
}
.rules .note{font-size:12.5px;color:var(--muted)}
.rule-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px;background:#fff}
.rule-table th{background:var(--ink);color:#f4efe4;padding:7px 9px;text-align:left;font-weight:600}
.rule-table td{border:1px solid #e6dfd1;padding:6px 9px;vertical-align:top}
.rule-table tr:nth-child(even) td{background:#faf7f0}
.rep-table td:first-child{text-align:center;font-weight:700;color:var(--gold)}
.home-footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;font-size:11.5px;color:var(--muted);letter-spacing:.5px;
}

/* ---------- 房间 ---------- */
#screen-room{max-width:820px;margin:0 auto;padding:22px 20px 40px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;background:var(--ink);color:#f5f1e7;border-radius:16px;
}
.brand{font-size:17px;letter-spacing:6px}
.topbar-right{display:flex;gap:8px}
.topbar .btn.ghost{color:#f5f1e7;border-color:rgba(245,241,231,.35)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.1)}
.room-main{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;margin-top:16px;align-items:start}
.room-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.room-code-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding-bottom:16px}
.room-code-box span{font-size:12px;color:var(--muted);letter-spacing:2px}
.room-code-box strong{font-size:34px;letter-spacing:10px;color:var(--ink);font-weight:800}
.room-code-box .btn{margin-left:auto}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.seat{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;background:#fff;
}
.seat .dot{width:12px;height:12px;border-radius:50%;flex:none}
.seat .who{font-size:14px;font-weight:600}
.seat .tag{margin-left:auto;font-size:11.5px;color:var(--muted)}
.seat .tag.ready{color:var(--green);font-weight:700}
.seat.empty{border-style:dashed;color:var(--muted);justify-content:center;font-size:12.5px;background:transparent}
.room-actions{display:flex;gap:10px}
.room-side{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.room-side h3{font-size:13.5px;letter-spacing:1px;margin-bottom:10px}
.room-side ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.9;color:#5c5546}
.hint{font-size:12px;color:var(--muted);margin:12px 0 0}

/* ---------- 对局 ---------- */
#screen-game{max-width:1400px;margin:0 auto;padding:14px 16px 120px}
.game-topbar{position:sticky;top:10px;z-index:30;box-shadow:0 6px 18px rgba(31,51,80,.18)}
.round-info{display:flex;flex-direction:column;align-items:center;line-height:1.35}
.round-info b{font-size:13.5px;letter-spacing:1px}
.round-info span{font-size:11.5px;color:rgba(245,241,231,.7)}
.game-main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-top:14px;align-items:start}
.section-title{
  font-size:12px;letter-spacing:3px;color:var(--muted);margin:4px 2px 9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.section-title span{letter-spacing:0;font-size:11.5px;color:#9a9284}

.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.region{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px 12px;
  min-height:104px;display:flex;flex-direction:column;gap:6px;position:relative;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.region.act{cursor:pointer}
.region.act:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold)}
.region.pick{border-color:var(--gold);background:#fff8e9}
.region .rg-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}
.region .rg-head em{font-style:normal;font-size:11px;color:var(--muted);font-weight:400}
.region .dice{display:flex;flex-wrap:wrap;gap:3px;min-height:18px}
.region .tokens{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;min-height:14px}
.region .empty-note{font-size:11px;color:#b3aa99}
.region .rg-effect{font-size:10.5px;color:#9a9284;line-height:1.45}

.die{
  width:15px;height:15px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:2px;background:#fff;border:1px solid #c9c2b2;border-radius:3.5px;flex:none;
}
.die i{width:2.8px;height:2.8px;border-radius:50%;background:#4a4436;align-self:center;justify-self:center;visibility:hidden}
.die i.on{visibility:visible}
.tok{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:#5c5546}
.tok b{width:8px;height:8px;border-radius:2px;display:inline-block}

/* 我的工坊 */
.me-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.me-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.me-head .dot{width:12px;height:12px;border-radius:50%}
.me-head b{font-size:15px;letter-spacing:1px}
.me-head .turnpill{
  margin-left:auto;font-size:11.5px;padding:3px 10px;border-radius:999px;
  background:#eef2f7;color:var(--ink-2);border:1px solid #dbe3ee;
}
.me-head .turnpill.mine{background:var(--gold);color:#2a1f07;border-color:var(--gold)}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.stat{
  background:#faf7f0;border:1px solid var(--line);border-radius:9px;padding:6px 10px;
  font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;
}
.stat b{font-size:15px;color:var(--ink)}
.rep-track{display:flex;gap:4px;margin:6px 0 4px;max-width:330px}
.rep-cell{
  flex:1;height:26px;border-radius:5px;background:#f0ebdf;font-size:10.5px;color:#9a9284;
  display:flex;align-items:center;justify-content:center;cursor:help;position:relative;
}
.rep-cell.on{background:var(--gold);color:#fff;font-weight:700}
.rep-label{font-size:11px;color:var(--muted);margin-bottom:10px}
.me-body{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-bottom:14px}
.me-left{flex:1 1 300px;min-width:280px}
.me-board{flex:0 0 auto;padding:6px 10px;border-left:1px dashed var(--line)}
.board{display:flex;flex-direction:column;gap:3px;align-items:center;margin:0}
.brow{display:flex;gap:3px}
.cell{width:18px;height:18px;border:1px solid #e2dbcb;border-radius:3px;background:#fff}
.cell.on{background:var(--ink);border-color:var(--ink)}
.cell.new{background:var(--gold);border-color:var(--gold)}
.hand-wrap{border-top:1px dashed var(--line);padding-top:11px}
.hand-label{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:8px}
.hand{display:flex;flex-wrap:wrap;gap:6px}
.hand-hint{font-size:11px;color:#a09889;margin-top:9px;line-height:1.6}
.card-chip{
  border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:5px 9px 6px;
  font-size:11.5px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:92px;
  transition:transform .12s ease, box-shadow .15s ease;
}
.card-chip:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(31,51,80,.12)}
.card-chip b{font-size:12.5px;font-weight:700}
.card-chip i{font-style:normal;font-size:10px;color:var(--muted)}
.card-chip.cont{border-color:#c9d8e8;background:#f7fbff}
.card-chip.set{border-color:#e7d3a6;background:#fffaf0}
.card-chip.ach{border-color:#e3c6cb;background:#fff7f8}

.opponents{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.opp{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
}
.opp.current{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,154,63,.18)}
.opp .oh{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin-bottom:5px}
.opp .oh .dot{width:9px;height:9px;border-radius:50%}
.opp .oh .handn{margin-left:auto;font-size:10.5px;color:var(--muted);font-weight:400}
.opp .oline{display:flex;flex-wrap:wrap;gap:9px;font-size:10.5px;color:#6b6353}
.opp .oline b{color:var(--ink);font-size:12px}
.opp .oboard{display:flex;flex-direction:column;gap:2px;margin-top:6px;align-items:flex-start}
.opp .oboard .cell{width:9px;height:9px;border-radius:2px}

.log{
  margin-top:4px;
  background:#fffdf8;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  height:300px;overflow:auto;font-size:11.5px;line-height:1.7;color:#5c5546;
}
.log div{padding:2px 0;border-bottom:1px dotted #eee7d8}
.log div:last-child{border-bottom:none}
.log .hl{color:var(--ink);font-weight:600}

/* 行动条 */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(247,244,238,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
}
.actionbar .ab-text{font-size:12.5px;color:#5c5546;margin-right:auto}
.actionbar .ab-text b{color:var(--ink)}
.actionbar .btn{padding:10px 16px;font-size:13.5px}
.actionbar .boost-toggle{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:#5c5546;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;cursor:pointer;
}
.actionbar .boost-toggle input{width:15px;height:15px;accent-color:var(--gold)}

/* 弹层 */
.modal{
  position:fixed;inset:0;z-index:100;background:rgba(20,30,45,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(3px);
}
.modal-card{
  background:var(--panel);border-radius:18px;max-width:560px;width:100%;
  max-height:88vh;overflow:auto;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal-card h3{font-size:17px;letter-spacing:1px;margin-bottom:6px}
.modal-card .mdesc{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.modal-card .mopts{display:flex;flex-direction:column;gap:8px}
.opt{
  text-align:left;border:1px solid var(--line-2);background:#fff;border-radius:11px;
  padding:11px 13px;font-size:13px;cursor:pointer;color:var(--ink);line-height:1.55;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:hover{border-color:var(--gold);background:#fffaf0;transform:translateX(2px)}
.opt.disabled{opacity:.45;cursor:not-allowed;background:#f5f1e8}
.opt.disabled:hover{transform:none;border-color:var(--line-2);background:#f5f1e8}
.modal-close{
  margin-top:14px;width:100%;border:1px dashed var(--line-2);background:transparent;
  border-radius:10px;padding:9px;font-size:12.5px;color:var(--muted);cursor:pointer;
}
.card-detail{font-size:13px;line-height:1.8}
.card-detail .cd-type{
  display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;
  background:var(--gold-soft);color:#6b4a12;margin-bottom:8px;
}
.card-detail .cd-effect{
  background:#faf7f0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;
}
.score-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.score-table th{background:var(--ink);color:#f4efe4;padding:8px;text-align:left;font-size:12px}
.score-table td{border-bottom:1px solid #ece6d8;padding:8px}
.score-table tr.win td{background:#fff6e0;font-weight:700}
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:200;
  background:rgba(31,51,80,.94);color:#f6f1e7;padding:10px 18px;border-radius:999px;
  font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:86vw;text-align:center;
}
.toast.err{background:rgba(178,58,72,.95)}

/* ---------- 移动端 ---------- */
@media (max-width:980px){
  .home-grid{grid-template-columns:1fr}
  .enter-panel{position:static}
  .room-main{grid-template-columns:1fr}
  .game-main{grid-template-columns:1fr}
  .side-col{order:3}
}
@media (max-width:640px){
  #screen-home{padding:14px 12px 30px}
  .hero{padding:24px 22px 22px;border-radius:18px}
  .hero h1{font-size:38px;letter-spacing:12px}
  .tagline{letter-spacing:3px;font-size:13px}
  .meta-line{font-size:11px}
  .kiln{display:none}
  .panel{padding:16px}
  .rules{font-size:13px}
  #screen-game{padding:8px 10px 132px}
  .game-topbar{top:6px;padding:10px 12px}
  .brand{font-size:14px;letter-spacing:4px}
  .regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .region{min-height:96px;padding:9px}
  .actionbar{padding:9px 10px calc(9px + env(safe-area-inset-bottom));justify-content:stretch}
  .actionbar .ab-text{width:100%;margin:0 0 2px}
  .actionbar .btn{flex:1;padding:11px 8px;font-size:13px}
  .actionbar .boost-toggle{flex:1;justify-content:center}
  .me-head .turnpill{margin-left:0}
  .me-board{border-left:none;padding:0;margin-top:2px}
  .rep-track{max-width:none}
  .rep-cell{height:22px;font-size:10px}
  .cell{width:15px;height:15px}
  .stat{padding:5px 9px;font-size:11px}
  .stat b{font-size:14px}
  .me-panel{padding:12px 13px}
  .me-body{gap:10px}
  .me-left{min-width:0;flex-basis:100%}
  .modal-card{padding:18px}
  .opt{font-size:13.5px;padding:12px}
  .seats{grid-template-columns:1fr}
  .room-code-box strong{font-size:28px}
}

.end-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.end-actions .modal-close{margin-top:0}

/* 横置牌与起始标记 */
.tap-wrap{border-top:1px dashed var(--line);margin-top:11px;padding-top:11px}
.tap-list{display:flex;flex-wrap:wrap;gap:6px}
.tap-chip{
  border:1px solid #b9c9dd;background:#f4f9ff;border-radius:9px;padding:7px 11px;font-size:11.5px;
  cursor:pointer;display:flex;flex-direction:column;gap:2px;text-align:left;min-width:106px;color:var(--ink);
  transition:transform .12s ease, box-shadow .15s ease;
}
.tap-chip b{font-size:12.5px}
.tap-chip i{font-style:normal;font-size:10px;color:var(--muted)}
.tap-chip span{font-size:10px;color:#2f6fb0}
.tap-chip:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px rgba(31,51,80,.12);border-color:var(--gold)}
.tap-chip.tapped{background:#efede6;border-color:var(--line);color:#9a9282}
.tap-chip.tapped span{color:#a09889}
.tap-chip:disabled{cursor:not-allowed;opacity:.75}
.marker-badge{
  font-size:10px;padding:2px 8px;border-radius:999px;background:var(--gold);color:#2a1f07;font-weight:700;
  letter-spacing:.5px;white-space:nowrap;
}