/* ==========================================================
   入侵 · INVASION — 白色主题 / 棕色渐变
   ========================================================== */
:root{
  --ink:#3b2a1c;
  --ink2:#7a6049;
  --ink3:#a08a72;
  --line:#e7d8c4;
  --paper:#fffdfa;
  --brown-d:#5c3b23;
  --brown:#8a5a34;
  --brown-l:#b3855b;
  --cell:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(130% 80% at 50% -20%, #ffffff 0%, #fdf8f1 34%, #f6ece0 62%, #efe1cf 100%);
  overflow:hidden;overscroll-behavior:none;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer}
#app{display:flex;flex-direction:column;height:100dvh;height:100vh}

/* ---------------- HUD ---------------- */
.hud{
  flex:0 0 auto;
  padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;
  background:linear-gradient(180deg,#fffdfa 0%,#fdf7ef 60%,#f9efe2 100%);
  border-bottom:1px solid #ead9c3;
  box-shadow:0 4px 16px rgba(120,85,50,.07);
  position:relative;z-index:20;
}
.hud-row{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0}
.brand h1{
  font-size:21px;letter-spacing:2px;font-weight:800;
  background:linear-gradient(150deg,#4a2f1b,#8a5a34 55%,#b98a5c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand span{font-size:9px;letter-spacing:2.4px;color:var(--ink3);font-weight:600}
.turnbox{text-align:right;line-height:1.15}
.chip{
  display:inline-block;font-size:11px;font-weight:700;color:#fff6ea;
  padding:3px 9px;border-radius:20px;
  background:linear-gradient(135deg,#9d6c42,#633f26);
  box-shadow:0 2px 6px rgba(99,63,38,.25);
}
.chip.red{background:linear-gradient(135deg,#b5784a,#8a4123)}
.chip.blue{background:linear-gradient(135deg,#7d95a4,#425a68)}
.round{font-size:10px;color:var(--ink3);margin-top:3px;letter-spacing:.5px}
.round b{color:var(--brown);font-size:11px}
.iconbtn{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  border:1px solid #e3d2bc;background:#fffdfa;color:var(--brown);
  font-size:14px;font-weight:700;line-height:1;
}
.resbar{display:flex;gap:8px;margin-top:7px}
.res{
  flex:1;display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:10px;font-size:11px;
  background:linear-gradient(180deg,#fffdfa,#fbf2e5);
  border:1px solid #ecdec9;
}
.res .dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.res.red .dot{background:#a9502c}
.res.blue .dot{background:#4f6c7d}
.res .rname{color:var(--ink2)}
.res b{font-size:14px;letter-spacing:.4px;margin-left:auto;color:var(--brown-d)}
.res small{font-size:9px;color:var(--ink3);margin-left:1px}

/* ---------------- 主区 ---------------- */
main{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:8px 10px 0;gap:8px;
}
.boardArea{flex:1 1 auto;min-height:180px;display:flex;flex-direction:column;gap:6px}
#boardViewport{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  border-radius:12px;background:
    linear-gradient(180deg,#fdfaf4,#f7eee1);
  border:1px solid #e6d5be;
  box-shadow:inset 0 1px 0 #fff, 0 6px 20px rgba(120,85,50,.09);
  touch-action:none;
}
#boardStage{
  position:absolute;left:0;top:0;
  width:calc(var(--cell) * 19);
  height:calc(var(--cell) * 27);
  will-change:transform;
}
#board{
  display:grid;
  grid-template-columns:repeat(19,var(--cell));
  grid-auto-rows:var(--cell);
  background:
    repeating-linear-gradient(90deg, rgba(186,156,120,.26) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(0deg, rgba(186,156,120,.26) 0 1px, transparent 1px var(--cell)),
    #fffdf8;
}
.cell{position:relative;display:flex;align-items:center;justify-content:center}

/* 城墙 */
#wallLayer{position:absolute;inset:0;pointer-events:none;z-index:1}
.wall{
  position:absolute;border-radius:2px;
  background:linear-gradient(180deg,#8a6440,#5c3f27);
  box-shadow:0 1px 2px rgba(80,52,30,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.wall.h{background:linear-gradient(180deg,#8d6743,#5a3d26)}
.wall.v{background:linear-gradient(90deg,#8d6743,#5a3d26)}

/* 补给点 */
#markLayer{position:absolute;inset:0;pointer-events:none;z-index:1}
.smark::after{
  content:"◍";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell) * .62);color:rgba(186,148,102,.55);
}

/* 高亮 */
.cell.mv::after{
  content:"";position:absolute;inset:3px;border-radius:4px;
  border:1.5px dashed rgba(150,105,60,.6);background:rgba(196,150,96,.14);
}
.cell.atk::after{
  content:"";position:absolute;inset:1px;border-radius:4px;
  border:1.5px solid rgba(163,66,40,.6);
  background:repeating-linear-gradient(45deg,rgba(176,80,50,.16) 0 3px,transparent 3px 7px);
}
.cell.bok::after{
  content:"";position:absolute;inset:2px;border-radius:4px;
  border:1.5px solid rgba(96,132,96,.7);background:rgba(120,150,110,.16);
}
.cell.ld::after{
  content:"";position:absolute;inset:2px;border-radius:4px;
  border:1.5px dotted rgba(140,110,60,.7);
}

/* 棋子 */
.tk{
  position:relative;z-index:2;
  width:calc(var(--cell) - 3px);height:calc(var(--cell) - 3px);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell) * .52);font-weight:700;color:#fff8ef;
  box-shadow:0 1px 3px rgba(74,48,28,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
.tk.red{background:linear-gradient(160deg,#c47d4f,#8b4324)}
.tk.blue{background:linear-gradient(160deg,#8ba2b0,#4b6371)}
.tk.bld{border-radius:3px}
.tk.bld.red{background-image:linear-gradient(160deg,#a97250,#71432a)}
.tk.bld.blue{background-image:linear-gradient(160deg,#7b909d,#435c69)}
.tk .hpb{position:absolute;left:2px;right:2px;bottom:1.5px;height:2px;border-radius:2px;background:rgba(0,0,0,.3);overflow:hidden}
.tk .hpb i{display:block;height:100%;background:#f6e4c8;border-radius:2px}
.tk .flag{position:absolute;top:-3px;right:-2px;font-size:8px;line-height:1;color:#ffe9c2;text-shadow:0 0 2px #000}
.cell.sel .tk{box-shadow:0 0 0 2px #4d3120, 0 0 0 4px rgba(255,255,255,.9)}
.tk.dug::after{content:"";position:absolute;inset:-2px;border-radius:6px;border:1.5px dashed rgba(255,244,224,.85)}

/* 提示 + 缩放 */
.hint{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  font-size:10.5px;color:#6b5442;background:rgba(255,253,248,.9);
  border:1px solid #ecdec9;border-radius:14px;padding:3px 11px;
  white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;z-index:5;
}
.hint b{color:var(--brown)}
.zoombar{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.zbtn{
  border:1px solid #e3d2bc;background:#fffdfa;color:#6b4a2c;
  width:30px;height:26px;border-radius:8px;font-size:14px;line-height:1;
  box-shadow:0 2px 5px rgba(120,85,50,.06);
}
.zbtn.wide{width:auto;padding:0 10px;font-size:11px;font-weight:600}

/* ---------------- 面板 ---------------- */
#panel{
  flex:0 0 auto;max-height:34vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:2px;
}
.card{
  background:linear-gradient(180deg,#fffdfa,#fbf4e9);
  border:1px solid #ecdecb;border-radius:14px;
  padding:9px 11px 10px;
  box-shadow:0 4px 14px rgba(120,85,50,.07);
}
.card-top{display:flex;align-items:center;gap:9px}
.tok{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;
  color:#fff8ef;font-weight:700;font-size:15px;
  box-shadow:0 2px 6px rgba(74,48,28,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.tok.red{background:linear-gradient(160deg,#c47d4f,#8b4324)}
.tok.blue{background:linear-gradient(160deg,#8ba2b0,#4b6371)}
.tok.bld{border-radius:7px;background:linear-gradient(160deg,#8d7256,#5a4430)}
.card-id{flex:1;min-width:0}
.card-name{font-size:14px;font-weight:700;letter-spacing:.3px}
.card-sub{font-size:10px;color:var(--ink3);margin-top:1px}
.card-hp{font-size:15px;font-weight:700;color:var(--brown-d);font-variant-numeric:tabular-nums}
.card-hp small{font-size:10px;color:var(--ink3);font-weight:500}
.bar{height:4px;border-radius:4px;background:#efe2d1;margin:7px 0 8px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#b3855b,#8a5a34)}
.card-stats{display:flex;gap:5px;margin-bottom:7px}
.card-stats>div{flex:1;text-align:center;background:#fffdfa;border:1px solid #efe2d0;border-radius:8px;padding:3px 2px}
.card-stats b{display:block;font-size:12.5px;color:var(--brown-d);line-height:1.2}
.card-stats small{font-size:9px;color:var(--ink3)}
.card-desc{font-size:10.5px;line-height:1.55;color:var(--ink2)}
.obrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.ob{
  font-size:9.5px;padding:2px 7px;border-radius:10px;color:#8a7460;
  background:#f6ecdd;border:1px solid #ecdecb;
}
.ob.red{color:#fff6ea;background:linear-gradient(135deg,#b5784a,#8a4123);border-color:transparent}
.ob.blue{color:#fff6ea;background:linear-gradient(135deg,#7d95a4,#425a68);border-color:transparent}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn{border:0;border-radius:11px;padding:11px 10px;font-size:14px;font-weight:600;letter-spacing:.4px}
.btn.sm{padding:6px 11px;font-size:11.5px;border-radius:9px;flex:0 0 auto}
.btn.primary{background:linear-gradient(160deg,#8f5e37,#5d3b23);color:#fff8ee;box-shadow:0 5px 14px rgba(93,59,35,.26)}
.btn.ghost{background:#fffdfa;color:#6b4a2c;border:1px solid #e6d5c0}
.btn.soft{background:linear-gradient(160deg,#f7ead8,#efdcc4);color:#6b4a2c;border:1px solid #e6d2b8}
.btn:disabled{opacity:.4}
.btn:active{transform:translateY(1px)}
.card-empty{font-size:11px;color:var(--ink3);text-align:center;padding:6px 0;line-height:1.6}

/* 采购 / 建造 */
.list{display:flex;flex-direction:column;gap:5px;max-height:190px;overflow-y:auto;margin-top:2px}
.row{display:flex;align-items:center;gap:8px;background:#fffdfa;border:1px solid #eedfcb;border-radius:10px;padding:5px 7px}
.row .ric{
  width:24px;height:24px;flex:0 0 24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff8ef;
  background:linear-gradient(160deg,#a8805a,#6d4a2d);
}
.row .rbody{flex:1;min-width:0}
.row .rname{font-size:12px;font-weight:600}
.row .rsub{font-size:9px;color:var(--ink3);margin-top:1px}
.row .rbtn{
  flex:0 0 auto;border:0;border-radius:8px;padding:6px 10px;font-size:11px;
  background:linear-gradient(160deg,#8f5e37,#5d3b23);color:#fff8ee;font-weight:600;
}
.row .rbtn:disabled{background:#e8dccb;color:#a08a72}
.sect-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--brown-d);margin-bottom:2px;letter-spacing:.5px}
.sect-title .x{font-size:10.5px;color:var(--ink3);font-weight:500;background:none;border:0}

.log{
  background:linear-gradient(180deg,#fffdfa,#faf2e6);
  border:1px solid #ecdecb;border-radius:11px;
  padding:6px 9px;font-size:10px;line-height:1.6;color:#7d6552;
  max-height:62px;overflow-y:auto;
}
.log div:last-child{color:#5d3b23;font-weight:600}

/* ---------------- 底部操作条 ---------------- */
#actionBar{
  flex:0 0 auto;display:flex;gap:8px;
  padding:7px 12px calc(env(safe-area-inset-bottom) + 7px);
  background:linear-gradient(180deg,rgba(255,253,250,.55),#fffdfa 42%);
  border-top:1px solid #ecdcc7;
}
#actionBar .btn{flex:1}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:rgba(61,42,26,.94);color:#fff6e9;font-size:12.5px;
  padding:9px 16px;border-radius:20px;z-index:60;max-width:78vw;text-align:center;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------- 弹层 ---------------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(58,40,26,.34)}
.modal.hidden{display:none}
.sheet{
  width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;
  background:linear-gradient(180deg,#fffdfa,#fbf4e9);
  border-radius:20px 20px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow:0 -10px 40px rgba(70,45,25,.28);
  animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(24px)}to{transform:translateY(0)}}
.sheet h2{font-size:17px;color:var(--brown-d);letter-spacing:1px;margin-bottom:4px}
.sheet .lead{font-size:12px;color:var(--ink2);line-height:1.7;margin-bottom:12px}
.sheet h3{font-size:13px;color:var(--brown-d);margin:14px 0 6px;letter-spacing:.6px;display:flex;align-items:center;gap:6px}
.sheet h3::before{content:"";width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#b3855b,#5d3b23)}
.sheet p,.sheet li{font-size:12px;line-height:1.75;color:#6b5442}
.sheet ul{margin:2px 0;padding-left:17px}
.sheet em{font-style:normal;color:#8a5a34;font-weight:600}
.sheet .kv{display:flex;gap:8px;font-size:11.5px;color:#6b5442;line-height:1.7}
.sheet .kv b{color:#8a5a34;flex:0 0 62px;font-weight:600}
.closeRow{margin-top:16px;display:flex;gap:8px}
.closeRow .btn{flex:1}

/* 开始页 */
.start{text-align:center;padding:6px 2px 2px}
.start .big{
  font-size:38px;font-weight:800;letter-spacing:10px;line-height:1.15;
  background:linear-gradient(150deg,#4a2f1b 10%,#8a5a34 55%,#c79a6c);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px;
}
.start .sub{font-size:10px;letter-spacing:5px;color:var(--ink3);margin-bottom:16px}
.start .flag{display:flex;justify-content:center;margin-bottom:14px}
.start .seal{
  width:62px;height:62px;border-radius:50%;
  border:1.5px solid #d8bf9e;display:flex;align-items:center;justify-content:center;
  color:#8a5a34;font-size:25px;font-weight:700;letter-spacing:2px;
  background:radial-gradient(circle at 35% 30%,#fffdfa,#f3e5d1);
  box-shadow:0 8px 22px rgba(120,85,50,.15), inset 0 0 0 4px #fffdfa;
}
.start .pick{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.sidebtn{
  display:flex;align-items:center;gap:10px;text-align:left;
  border:1px solid #e7d6c0;border-radius:14px;padding:11px 14px;
  background:linear-gradient(160deg,#fffdfa,#fbf3e7);
  box-shadow:0 3px 10px rgba(120,85,50,.06);
}
.sidebtn .em{width:36px;height:36px;border-radius:10px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;color:#fff8ef;font-size:16px;font-weight:700}
.sidebtn.red .em{background:linear-gradient(160deg,#c47d4f,#8b4324)}
.sidebtn.blue .em{background:linear-gradient(160deg,#8ba2b0,#4b6371)}
.sidebtn .t{flex:1}
.sidebtn .t b{display:block;font-size:13.5px;color:var(--brown-d)}
.sidebtn .t small{font-size:10px;color:var(--ink3)}
.sidebtn .ar{color:#c0a583;font-size:16px}
.start .foot{font-size:10px;color:var(--ink3);margin-top:14px;letter-spacing:.5px}

/* 结算 */
.result{text-align:center;padding:10px 4px 4px}
.result .tag{font-size:11px;letter-spacing:4px;color:var(--ink3)}
.result .win{
  font-size:30px;font-weight:800;letter-spacing:6px;margin:6px 0 4px;
  background:linear-gradient(150deg,#4a2f1b,#8a5a34 60%,#c79a6c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.result .why{font-size:12.5px;color:var(--ink2);margin-bottom:18px}

/* 联机面板 */
.netinp{width:100%;border:1px solid #e6d5c0;border-radius:10px;padding:10px 12px;font-size:12.5px;font-family:inherit;color:#3b2a1c;background:#fffdfa;outline:none}
.netinp:focus{border-color:#c19a70;box-shadow:0 0 0 3px rgba(185,140,95,.12)}
.ktr{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

@media (min-width: 900px){
  main{flex-direction:row;align-items:stretch;gap:14px;padding:12px}
  .boardArea{flex:1 1 auto}
  #panel{flex:0 0 330px;max-height:none}
  #actionBar{max-width:520px;margin:0 auto;width:100%;border-radius:14px 14px 0 0}
}