:root{
  --ink:#221a12; --paper:#f3e7cd; --paper2:#e8d7b5; --line:#c9b48d;
  --wall:#2c2118; --red:#a63227; --gold:#b8893b; --jade:#2e7d62;
  --shadow:0 10px 30px rgba(20,12,5,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:"Noto Serif SC","Songti SC","STSong",Georgia,serif;
  color:var(--ink); background:#17110c;
  background-image:radial-gradient(circle at 20% 0%,#3a2a1b 0,transparent 55%),radial-gradient(circle at 90% 100%,#332113 0,transparent 50%);
}
.ink-bg{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,240,200,.08) 22px 23px)}
.hidden{display:none!important}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,4vw,48px);color:#f7ead0;border-bottom:1px solid rgba(200,160,100,.35);background:rgba(18,12,8,.6)}
.brand{display:flex;align-items:center;gap:14px}
.seal{width:52px;height:52px;display:grid;place-items:center;border-radius:8px;background:var(--red);color:#fff5df;font-size:30px;font-weight:700;box-shadow:inset 0 0 0 3px rgba(255,235,200,.45)}
.brand h1{margin:0;font-size:clamp(22px,3.2vw,32px);letter-spacing:.22em}
.brand p{margin:2px 0 0;font-size:10px;letter-spacing:.18em;opacity:.65}
.room-badge{font-size:14px;padding:8px 12px;border:1px solid rgba(220,190,140,.4);border-radius:8px;background:rgba(0,0,0,.2)}
.room-badge b{font-family:monospace;font-size:18px;letter-spacing:.16em;color:#f2cf8b;margin:0 8px}
button{cursor:pointer;font-family:inherit;font-size:14px;border:1px solid var(--line);border-radius:7px;padding:9px 14px;background:#fbf3e1;color:var(--ink);transition:.15s}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
button:disabled{opacity:.42;cursor:not-allowed}
button.primary{background:var(--red);border-color:#7d2119;color:#fff3dd;font-weight:700;letter-spacing:.08em;width:100%;padding:12px}
button.ghost{background:transparent;border-color:var(--gold);color:#7a5a25}
button.small{padding:6px 12px;font-size:12px}
main{position:relative;max-width:1280px;margin:0 auto;padding:clamp(16px,3vw,32px)}
.panel{background:linear-gradient(160deg,var(--paper),var(--paper2));border:1px solid #d2bb91;border-radius:14px;padding:clamp(18px,3vw,32px);box-shadow:var(--shadow)}
.panel h2{margin:0 0 6px;font-size:24px;letter-spacing:.1em}
.hero{border-left:5px solid var(--red);padding:4px 0 4px 18px;margin-bottom:24px}
.hero h2{margin:0 0 8px}
.hero p{margin:0;line-height:1.9;font-size:14px;max-width:900px}
.hero b{color:var(--red)}
.home-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:rgba(255,250,235,.66);border:1px solid #d9c49c;border-radius:12px;padding:20px}
.card h3{margin:0 0 16px;font-size:19px;letter-spacing:.1em;color:#6d241c}
label{display:block;font-size:13px;margin:0 0 12px;color:#5b472d}
input,select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #cbb188;border-radius:7px;background:#fffaf0;color:var(--ink);font-family:inherit;font-size:14px}
input:focus,select:focus{outline:2px solid rgba(166,50,39,.35);border-color:var(--red)}
.hint{font-size:12px;line-height:1.7;color:#7a6647;margin:8px 0 14px}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:#937951;font-size:12px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:#d4bf99}
.ai-picker{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:12px;color:#5b472d}
.seg{display:flex;gap:6px}
.seg button{padding:6px 12px;font-size:12px}
.seg button.active{background:var(--red);color:#fff3dd;border-color:#7d2119}
.card .ghost{width:100%}
.rules-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:24px}
.rules-mini div{border-top:2px solid rgba(166,50,39,.45);padding-top:10px;font-size:12px;line-height:1.7;color:#6b5638}
.rules-mini b{display:block;color:#7d2a20;font-size:14px;margin-bottom:4px}
.code{font-family:monospace;font-size:18px;letter-spacing:.16em;color:var(--red)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}
.seat{border:1px solid #d1ba92;border-radius:10px;padding:14px;background:rgba(255,250,235,.7);border-top:4px solid var(--seat)}
.seat b{font-size:16px}.seat small{display:block;color:#7a6647;margin:4px 0 8px}
.seat .general{font-size:14px;color:#7d2a20}
.lobby-settings{max-width:340px}
/* 对局 */
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.board-wrap,.side>div,.rules-book{background:linear-gradient(160deg,var(--paper),var(--paper2));border:1px solid #d2bb91;border-radius:14px;box-shadow:var(--shadow)}
.board-wrap{padding:14px}
.board-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:#5b472d;margin-bottom:10px;min-height:20px}
.board-head b{color:var(--red)}
.board{display:grid;grid-template-columns:repeat(10,1fr);width:100%;aspect-ratio:10/9;border:4px solid var(--wall);border-radius:4px;overflow:hidden;background:#f6ecd4;user-select:none}
.cell{position:relative;border-right:1px solid rgba(120,95,60,.24);border-bottom:1px solid rgba(120,95,60,.24);display:flex;align-items:center;justify-content:center;font-size:clamp(12px,2vw,22px);color:#9d8255;cursor:default}
.cell.reachable{cursor:pointer;background:rgba(120,180,120,.24);box-shadow:inset 0 0 0 2px rgba(46,125,98,.55)}
.cell.reachable:hover{background:rgba(120,180,120,.45)}
.cell.portal-dest{cursor:pointer;background:rgba(180,140,220,.28);box-shadow:inset 0 0 0 2px rgba(120,70,160,.6)}
.cell.portal-dest:hover{background:rgba(180,140,220,.45)}
.cell.mine{background:rgba(240,205,120,.28)}
.cell.glyph-portal{color:#7651a8}.cell.glyph-chest{color:#b18220}.cell.glyph-med{color:#b5342b}
.cell.taken{opacity:.32}
.cell.spawn-mark:after{content:attr(data-seat);position:absolute;left:2px;top:1px;font-size:9px;color:rgba(90,65,35,.5)}
.tokens{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;padding:3px;pointer-events:none}
.token{pointer-events:auto;width:min(28px,3.4vw);height:min(28px,3.4vw);min-width:16px;min-height:16px;border-radius:50%;display:grid;place-items:center;color:#fff8e8;font-size:11px;font-weight:700;line-height:1;border:2px solid rgba(255,245,220,.9);box-shadow:0 2px 5px rgba(0,0,0,.35);cursor:default}
.token.enemy{cursor:crosshair;outline:2px solid rgba(166,50,39,.7)}
.token.dead{opacity:.25;filter:grayscale(1)}
.token .hp{position:absolute;transform:translate(11px,-12px);font-size:9px;background:#241a10;border-radius:6px;padding:0 3px;color:#ffe9a8}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:#6b5638;margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:4px}
.lg{font-style:normal;font-size:15px}.lg.portal{color:#7651a8}.lg.chest{color:#b18220}.lg.med{color:#b5342b}
.lg.wall{width:14px;height:3px;background:var(--wall)}
.side{display:flex;flex-direction:column;gap:14px}
.players,.actions,.log-wrap,.rules-book{padding:14px}
.players{display:flex;flex-direction:column;gap:8px}
.pcard{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;border:1px solid #dcc7a1;background:rgba(255,250,235,.6);font-size:12px}
.pcard.active{border-color:var(--red);box-shadow:0 0 0 2px rgba(166,50,39,.18)}
.pcard.dead{opacity:.45;filter:grayscale(.8)}
.pdot{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
.pcard .info{flex:1;min-width:0}
.pcard .info b{font-size:13px}.pcard .info small{display:block;color:#7a6647;line-height:1.5}
.hpbar{height:5px;border-radius:4px;background:#d9c7a6;margin-top:3px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--red)}
.actions h3,.log-wrap h3{margin:0 0 10px;font-size:15px;letter-spacing:.1em;color:#7d2a20}
.actions .tip{font-size:12px;line-height:1.7;color:#6b5638;margin:0 0 10px}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-grid button{font-size:12px;padding:8px 6px}
.btn-grid button.wide{grid-column:1/-1}
.btn-grid button.hot{background:var(--red);color:#fff3dd;border-color:#7d2119}
.btn-grid button.jade{background:var(--jade);color:#fff;border-color:#1f5d48}
.offer{border:1px dashed #b99050;border-radius:8px;padding:10px;margin-bottom:10px;background:rgba(255,245,215,.7);font-size:12px;line-height:1.6}
.offer b{color:#7d2a20;font-size:14px}
.offer .row{margin:8px 0 0}
.offer button{font-size:12px;padding:6px 10px}
.log{height:210px;overflow-y:auto;font-size:11.5px;line-height:1.7;color:#5b472d;display:flex;flex-direction:column;gap:3px}
.log div{border-bottom:1px dashed rgba(150,120,80,.3);padding-bottom:3px}
.rules-book summary{cursor:pointer;font-size:14px;color:#7d2a20}
.rules-book div{font-size:11.5px;line-height:1.7;margin-top:10px;max-height:260px;overflow-y:auto}
.rules-book p{margin:0 0 6px}.rules-book b{color:#7d2a20}
.overlay{position:fixed;inset:0;background:rgba(15,9,5,.78);display:grid;place-items:center;z-index:20;padding:20px}
.over-card{background:var(--paper);border:2px solid var(--gold);border-radius:14px;padding:32px;text-align:center;max-width:420px;box-shadow:var(--shadow)}
.over-card h2{margin:0 0 10px;color:var(--red);font-size:28px;letter-spacing:.15em}
.over-card p{font-size:14px;line-height:1.8}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:30;background:#241a10;color:#ffe9bb;border:1px solid var(--gold);border-radius:8px;padding:10px 18px;font-size:13px;box-shadow:var(--shadow);max-width:90vw;text-align:center}
@media(max-width:980px){.game-layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}.log-wrap,.rules-book{grid-column:1/-1}}
@media(max-width:620px){.side{display:flex}.token{width:20px;height:20px;font-size:9px}.legend{font-size:10px}}