/* =====================================================================
   三国棋将 · Q版粗描边青绿山水风 · 移动端竖屏优先
   ===================================================================== */
:root{
  --ink:#2a2522;
  --paper:#f8f0dc;
  --paper-2:#efe3c4;
  --teal-900:#236254;
  --teal-700:#2f7d6e;
  --teal-500:#3fa08a;
  --teal-300:#8fc7b4;
  --gold:#f0b93e;
  --gold-deep:#d99a1f;
  --red:#c0392b;
  --red-2:#e05a47;
  --orange:#e8853a;
  --blue:#3f7aa6;
  --purple:#8e62b8;
  --muted:#857a64;
  --line-dash:#d9c9a2;
  --hard-shadow:0 4px 0 var(--ink);
  --soft-shadow:0 10px 22px rgba(35,98,84,.16);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#e9f4ee 0%,#dcebe1 55%,#cfe2d5 100%);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;}
img{display:block;}

/* ---------------- 青绿山水背景 ---------------- */
.bg-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-sun{
  position:absolute;top:4%;right:-34px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fbe8a8,#f3d173 70%);
  border:3px solid rgba(42,37,34,.25);opacity:.55;
}
.bg-cloud{position:absolute;width:150px;height:auto;}
.bg-cloud-1{top:9%;left:-30px;animation:cloud-drift 14s ease-in-out infinite alternate;}
.bg-cloud-2{top:20%;right:-40px;width:120px;animation:cloud-drift 18s ease-in-out infinite alternate-reverse;}
@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(26px)}}
.bg-mountains{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;min-height:180px;}

.page{
  position:relative;z-index:1;
  max-width:640px;margin:0 auto;
  padding:16px 14px 96px;
  display:flex;flex-direction:column;gap:18px;
}

/* ---------------- 通用卡片 ---------------- */
.card,.mode-card,.hero-card,.profile-card,.rank-card,.codex-btn{
  border:3px solid var(--ink);
  border-radius:20px;
  background:var(--paper);
  box-shadow:var(--hard-shadow),var(--soft-shadow);
}

/* ---------------- 1. 顶部横幅 ---------------- */
.banner{display:flex;flex-direction:column;align-items:center;gap:12px;}

.plaque{position:relative;margin-top:4px;padding:8px 38px 10px;}
.plaque{
  background:linear-gradient(180deg,#cf4a3c,#a32f25);
  border:3px solid var(--gold);
  outline:3px solid var(--ink);
  border-radius:14px;
  box-shadow:0 4px 0 var(--ink),0 12px 24px rgba(160,47,37,.35);
}
.plaque h1{
  font-size:34px;font-weight:900;letter-spacing:.12em;
  color:#ffe9a3;
  text-shadow:0 2px 0 #7a2018,2px 3px 0 rgba(42,37,34,.55);
}
.plaque-tassel{
  position:absolute;top:100%;width:7px;height:20px;
  background:var(--gold);border:2px solid var(--ink);border-top:none;border-radius:0 0 4px 4px;
}
.plaque-tassel-l{left:12px;}
.plaque-tassel-r{right:12px;}
.plaque-tassel::after{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--red);border:2px solid var(--ink);
}

.tagline{
  position:relative;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:999px;
  padding:7px 18px 7px 40px;
  font-size:14.5px;font-weight:800;color:var(--teal-900);
  box-shadow:0 3px 0 var(--ink);
}
.tagline::before{
  content:"令";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:7px;
  background:var(--red);color:#ffe9a3;
  border:2px solid var(--ink);
  font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:900;
}

/* 武将横滑卡片 */
.hero-rail{
  display:flex;gap:12px;width:100%;
  overflow-x:auto;padding:8px 4px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.hero-rail::-webkit-scrollbar{display:none;}

.hero-card{
  position:relative;
  flex:0 0 41%;
  scroll-snap-align:start;
  overflow:hidden;
  border-radius:18px;
  background:#fffaf0;
  transition:transform .18s ease,box-shadow .18s ease;
  animation:bob 3s ease-in-out infinite alternate;
}
.hero-card:nth-child(2){animation-delay:.35s;}
.hero-card:nth-child(3){animation-delay:.7s;}
.hero-card:nth-child(4){animation-delay:1.05s;}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}

.hero-card:active{transform:scale(.94);animation:none;}
.hero-card.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold),0 4px 0 var(--gold-deep),var(--soft-shadow);
  transform:translateY(-5px);
  animation:none;
}
.hero-card.selected::after{
  content:"首发";position:absolute;right:-4px;bottom:46px;
  background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:900;padding:2px 10px 2px 8px;
  border:2px solid var(--ink);border-right:none;border-radius:8px 0 0 8px;
  z-index:3;
}

.hero-portrait{
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(160deg,#d8eee5,#b7d9cb);
  overflow:hidden;
}
.hero-portrait img{
  width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
}
.hero-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:900;color:#fff;
  background:linear-gradient(160deg,var(--tone,var(--teal-500)),var(--teal-900));
  text-shadow:2px 2px 0 rgba(42,37,34,.4);
}
.hero-portrait img[hidden]{display:none;}

.hero-role{
  position:absolute;top:7px;left:7px;z-index:2;
  width:27px;height:27px;border-radius:50%;
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff;
  box-shadow:0 2px 0 rgba(42,37,34,.4);
}
.role-战{background:var(--red);}
.role-射{background:var(--orange);}
.role-辅{background:var(--teal-500);}
.role-刺{background:#8e62b8;}
.role-谋{background:#3f7aa6;}
.role-坦{background:#8d7e6a;}
.hero-cost{
  position:absolute;right:6px;bottom:6px;z-index:2;
  border:2px solid var(--ink);border-radius:8px;
  font-size:10px;font-weight:900;color:#fff;padding:1px 6px;
  box-shadow:0 2px 0 rgba(42,37,34,.4);
}
.hero-cost.c1{background:#9b9484;}
.hero-cost.c2{background:#3fa08a;}
.hero-cost.c3{background:#3f7aa6;}
.hero-cost.c4{background:#8e62b8;}
.hero-cost.c5{background:#e8a31f;}

.hero-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 9px 2px;
}
.hero-name{font-size:15.5px;font-weight:900;letter-spacing:.03em;}
.hero-stars{font-size:11px;color:var(--gold);letter-spacing:-1px;text-shadow:0 1px 0 rgba(42,37,34,.25);}
.hero-stars .empty{color:#d8cdb2;text-shadow:none;}
.hero-faction{display:block;padding:0 9px 9px;font-size:10.5px;color:var(--muted);}

.hero-hint{font-size:11.5px;color:var(--teal-700);opacity:.85;letter-spacing:.05em;}

/* ---------------- 2. 游戏入口 ---------------- */
.section-title{display:flex;align-items:baseline;gap:10px;padding:0 2px;}
.section-title h2{
  font-size:21px;font-weight:900;color:var(--teal-900);
  position:relative;padding-bottom:3px;
}
.section-title h2::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;border-radius:3px;
  background:var(--gold);z-index:-1;opacity:.8;
}
.section-title span{font-size:12px;color:var(--muted);}

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.mode-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:5px;
  padding:16px 10px 12px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.mode-card:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink),var(--soft-shadow);}
.mode-card:active{transform:scale(.93);box-shadow:0 2px 0 var(--ink);}

.mode-badge{
  position:absolute;top:-9px;left:-7px;transform:rotate(-7deg);
  background:var(--teal-700);color:#fff;
  font-size:11px;font-weight:900;padding:2px 9px;border-radius:8px;
  border:2px solid var(--ink);box-shadow:0 2px 0 rgba(42,37,34,.3);
}
.mode-badge-hot{background:var(--red);}
.mode-badge-blue{background:var(--blue);}
.mode-badge-gold{background:var(--gold-deep);}

.mode-icon{
  width:58px;height:58px;border-radius:16px;
  background:#e7f3ee;border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(42,37,34,.35);
}
.mode-icon svg{width:42px;height:42px;}
.mode-name{font-size:17px;font-weight:900;letter-spacing:.04em;}
.mode-desc{font-size:12px;color:#6b614e;text-align:center;line-height:1.5;}
.mode-time{
  margin-top:2px;font-size:11px;font-weight:800;color:var(--teal-700);
  border:2px solid var(--teal-700);border-radius:999px;padding:1px 10px;background:rgba(63,160,138,.1);
}

.play-tip{
  display:flex;gap:9px;align-items:flex-start;
  border:2.5px dashed var(--teal-700);
  background:rgba(255,253,245,.7);
  border-radius:16px;padding:10px 12px;
  font-size:12.5px;color:#4d4636;
}
.play-tip-icon{
  flex:0 0 26px;height:26px;border-radius:7px;background:var(--teal-700);color:#ffe9a3;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;
  border:2px solid var(--ink);
}

/* ---------------- 3. 玩家模块 ---------------- */
.player{display:flex;flex-direction:column;gap:13px;}

.profile-card{
  display:flex;align-items:center;gap:12px;
  padding:12px;
}
.avatar{
  position:relative;flex:0 0 58px;width:58px;height:58px;border-radius:50%;
  border:3px solid var(--ink);overflow:hidden;background:var(--teal-300);
  box-shadow:0 3px 0 rgba(42,37,34,.35);
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#fff;text-shadow:1px 2px 0 rgba(42,37,34,.35);
}
.avatar img[hidden]{display:none;}

.profile-info{flex:1;min-width:0;}
.profile-name{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-id{font-size:10.5px;color:var(--muted);font-weight:400;margin-left:6px;}
.profile-badges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap;}
.rank-pill{
  display:inline-flex;align-items:center;gap:3px;
  background:linear-gradient(180deg,#ffe08a,#f0b93e);
  border:2px solid var(--ink);border-radius:999px;padding:1px 9px 2px;
  font-size:11.5px;font-weight:900;
}
.rank-pill svg{width:13px;height:13px;}
.win-pill{
  display:inline-flex;align-items:center;
  border:2px solid var(--teal-700);border-radius:999px;padding:1px 9px;
  font-size:11.5px;font-weight:800;color:var(--teal-700);background:rgba(63,160,138,.08);
}

.gold-box{display:flex;flex-direction:column;align-items:center;gap:1px;padding-left:10px;border-left:2px dashed var(--line-dash);}
.coin{
  width:27px;height:27px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#e9a91c);
  border:2.5px solid var(--ink);position:relative;
  animation:coin-spin 3.2s ease-in-out infinite;
}
.coin::after{
  content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
}
@keyframes coin-spin{0%,85%,100%{transform:rotateY(0)}92%{transform:rotateY(160deg)}}
.gold-num{font-size:15px;font-weight:900;color:var(--gold-deep);}
.gold-label{font-size:10px;color:var(--muted);}

/* 排行榜 */
.rank-card{padding:12px 14px 8px;}
.rank-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.rank-head h3{font-size:16px;font-weight:900;color:var(--teal-900);}
.season-tag{font-size:10.5px;font-weight:800;color:var(--teal-700);border:2px solid var(--teal-700);border-radius:999px;padding:1px 9px;background:rgba(63,160,138,.08);}
.rank-list{list-style:none;}
.rank-list li{
  display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:8px;
  height:37px;border-bottom:1.5px dashed var(--line-dash);font-size:13px;
}
.rank-list li:last-child{border-bottom:none;}
.rank-no{
  width:22px;height:22px;border-radius:50%;border:2px solid #c9b98e;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#9a8d6c;background:#faf3df;
}
.no-1{background:var(--gold);border-color:var(--ink);color:var(--ink);}
.no-2{background:#d9d5cd;border-color:var(--ink);color:var(--ink);}
.no-3{background:#d89a5b;border-color:var(--ink);color:#fff;}
.rank-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-tier{font-size:11.5px;color:var(--muted);}
.rank-score{font-size:12.5px;font-weight:900;color:var(--teal-700);min-width:42px;text-align:right;}
.rank-me{
  grid-template-rows:none;
  background:#fff5d4;border:2px solid var(--gold);border-radius:10px;
  padding:0 6px;margin:5px -2px 2px;height:35px !important;
}

/* 羁绊图鉴按钮 */
.codex-btn{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:linear-gradient(180deg,#fff7df,#fcecc0);
  transition:transform .16s ease,box-shadow .16s ease;
}
.codex-btn:hover{transform:translateY(-2px);}
.codex-btn:active{transform:scale(.97);box-shadow:0 2px 0 var(--ink);}
.codex-btn svg{width:31px;height:31px;flex:0 0 31px;}
.codex-btn{font-size:16.5px;font-weight:900;}
.codex-sub{font-size:11px;font-weight:500;color:var(--muted);}
.codex-arrow{margin-left:auto;font-size:24px;font-weight:900;color:var(--teal-700);line-height:1;}

.page-foot{text-align:center;font-size:11px;color:var(--muted);opacity:.7;padding-bottom:4px;}

/* ---------------- 底部固定导航 ---------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;
  background:#fbf4e2;
  border-top:3px solid var(--ink);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(35,70,60,.12);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  color:#948a75;font-size:11px;padding:4px 2px;
  transition:transform .15s ease,color .15s ease;
}
.tab svg{width:24px;height:24px;}
.tab:active{transform:scale(.88);}
.tab.active{color:var(--teal-700);font-weight:900;transform:translateY(-2px);}
.tab.active::after{
  content:"";width:18px;height:4px;border-radius:3px;background:var(--gold);
  border:1.5px solid var(--ink);margin-top:1px;
}

/* ---------------- 弹窗 ---------------- */
.modal-mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(18,44,38,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade-in .2s ease;
}
.modal-mask[hidden]{display:none;}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;width:100%;max-width:380px;
  background:var(--paper);border:3px solid var(--ink);border-radius:22px;
  padding:20px 18px 18px;
  box-shadow:0 6px 0 var(--ink),0 24px 50px rgba(0,0,0,.35);
  animation:pop .24s cubic-bezier(.34,1.56,.64,1);
  max-height:82vh;overflow-y:auto;
}
@keyframes pop{from{transform:scale(.85) translateY(18px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-close{
  position:absolute;top:9px;right:10px;z-index:2;
  width:31px;height:31px;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--paper);
  font-size:20px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(42,37,34,.4);
  transition:transform .12s ease;
}
.modal-close:active{transform:scale(.85);}
.modal-title{text-align:center;font-size:19px;font-weight:900;color:var(--teal-900);margin-bottom:12px;letter-spacing:.05em;}

/* 羁绊图鉴弹窗 */
.codex-tabs{display:flex;gap:8px;margin-bottom:10px;}
.codex-tab{
  flex:1;padding:8px 0;border-radius:12px;
  border:2.5px solid var(--ink);background:var(--paper-2);
  font-size:13.5px;font-weight:800;color:#7c735f;
  transition:transform .12s ease;
}
.codex-tab:active{transform:scale(.95);}
.codex-tab.active{background:var(--teal-700);color:#ffe9a3;}

.bond-item{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1.5px dashed var(--line-dash);}
.bond-item:last-child{border-bottom:none;}
.bond-emblem{
  flex:0 0 40px;width:40px;height:40px;border-radius:12px;
  border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:900;color:#fff;
  background:var(--bond,#3fa08a);
  box-shadow:0 2px 0 rgba(42,37,34,.35);
}
.bond-body{flex:1;min-width:0;}
.bond-name{font-size:14.5px;font-weight:900;}
.bond-name small{font-size:10.5px;color:var(--muted);font-weight:500;margin-left:5px;}
.bond-tiers{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.tier{
  display:flex;gap:7px;align-items:center;font-size:11.5px;color:#594f3c;
}
.tier b{
  flex:0 0 auto;font-size:10.5px;font-weight:900;color:var(--teal-700);
  border:2px solid var(--teal-700);border-radius:7px;padding:0 6px;background:rgba(63,160,138,.08);
}

/* 匹配弹窗 */
.match-modal{text-align:center;padding-top:28px;}
.vs-emblem{
  width:72px;height:72px;margin:2px auto 12px;border-radius:50%;
  background:linear-gradient(135deg,var(--red-2) 50%,var(--gold) 50%);
  border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#fff;text-shadow:2px 2px 0 rgba(42,37,34,.5);
  position:relative;
}
.vs-emblem::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:3px dashed var(--teal-700);
  animation:spin 2.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.match-status{font-size:13.5px;color:#6b614e;min-height:40px;margin-bottom:14px;padding:0 6px;}
.match-status::after{
  content:"…";display:inline-block;animation:dots 1.2s steps(4) infinite;overflow:hidden;width:14px;text-align:left;vertical-align:bottom;
}
@keyframes dots{0%{width:0}100%{width:16px}}
.match-cancel{
  border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);
  padding:8px 26px;font-size:14px;font-weight:900;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s ease;
}
.match-cancel:active{transform:scale(.94);box-shadow:0 1px 0 var(--ink);}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:102px;transform:translateX(-50%);
  z-index:200;max-width:84vw;
  background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:700;text-align:center;
  padding:10px 20px;border-radius:999px;
  border:2px solid var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  animation:toast-in .25s ease;
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------------- 响应式：平板 / PC 横版 ---------------- */
@media (min-width:760px){
  .page{max-width:920px;gap:26px;padding-top:26px;padding-bottom:40px;}
  .plaque h1{font-size:42px;}
  .tagline{font-size:16px;}
  .hero-rail{justify-content:center;gap:16px;padding-bottom:16px;}
  .hero-card{flex:0 0 160px;width:160px;}
  .hero-fallback{font-size:58px;}
  .mode-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
  .mode-icon{width:66px;height:66px;}
  .mode-icon svg{width:48px;height:48px;}
  .mode-name{font-size:18px;}
  .player{
    display:grid;grid-template-columns:1fr 1.35fr;
    grid-template-areas:"profile rank" "codex codex";gap:16px;
  }
  .profile-card{grid-area:profile;}
  .rank-card{grid-area:rank;}
  .codex-btn{grid-area:codex;}

  /* 悬浮胶囊式底栏 */
  .tabbar{
    left:50%;right:auto;transform:translateX(-50%);
    bottom:20px;width:470px;
    border:3px solid var(--ink);border-radius:22px;
    box-shadow:0 8px 0 var(--ink),0 18px 40px rgba(35,70,60,.25);
    padding:6px 10px;
  }
  .toast{bottom:120px;}
}

@media (min-width:1100px){
  .page{max-width:1060px;}
}

/* 手机横屏：压缩纵向空间 */
@media (max-height:520px) and (orientation:landscape){
  .bg-mountains{height:52vh;}
  .plaque{padding:4px 26px 6px;}
  .plaque h1{font-size:26px;}
  .tagline{padding:4px 14px 4px 34px;font-size:12.5px;}
  .hero-card{flex:0 0 118px;}
  .page{padding-bottom:80px;gap:14px;}
  .tab svg{width:20px;height:20px;}
  .tab{font-size:10px;}
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important;}
}

/* =====================================================================
   玩家操作按钮（棋友 / 组队 / 登录）
   ===================================================================== */
.player-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.pa-btn{
  flex:1;min-width:84px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:2.5px solid var(--ink);border-radius:12px;
  background:linear-gradient(180deg,#fff7df,#f3e2b4);
  padding:6px 8px;box-shadow:0 2.5px 0 rgba(42,37,34,.4);
  font-size:12px;font-weight:900;color:#6b3b12;transition:transform .12s;
}
.pa-btn:active{transform:scale(.93);}
.pa-btn svg{width:22px;height:22px;}
.pa-team{background:linear-gradient(180deg,#ffd27a,#e89a1f);color:#5a2c0a;}
#loginToggle{flex:0 0 70px;background:linear-gradient(180deg,#a9d4c4,#5aa78f);color:#0f3a2c;}

/* =====================================================================
   登录 / 注册弹窗（auth.js 注入）
   ===================================================================== */
.sg-auth-mask{
  position:fixed;inset:0;z-index:9000;
  background:rgba(20,40,35,.62);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  animation:auth-in .18s ease;
}
.sg-auth-mask[hidden]{display:none;}
@keyframes auth-in{from{opacity:0}to{opacity:1}}
.sg-auth-card{
  position:relative;width:100%;max-width:340px;
  background:linear-gradient(180deg,#fffaf0,#f3e6c8);
  border:3.5px solid var(--ink,#232323);border-radius:20px;
  box-shadow:0 8px 0 rgba(42,37,34,.45),0 18px 50px rgba(0,0,0,.3);
  padding:22px 20px 18px;text-align:center;
}
.sg-auth-x{
  position:absolute;top:8px;right:10px;
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--ink);background:#fff;color:#c0392b;
  font-size:20px;font-weight:900;line-height:1;
}
.sg-auth-logo{font-size:26px;font-weight:900;color:#2f7d6e;letter-spacing:.1em;}
.sg-auth-sub{font-size:12px;color:#7c5a2c;margin:4px 0 12px;}
.sg-auth-tabs{display:flex;gap:8px;margin-bottom:12px;background:rgba(0,0,0,.08);border-radius:10px;padding:3px;}
.sg-auth-tab{
  flex:1;border:none;background:transparent;padding:7px;border-radius:8px;
  font-size:14px;font-weight:900;color:#857a64;transition:all .12s;
}
.sg-auth-tab.active{background:#fff;color:#2f7d6e;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.sg-auth-field{display:block;text-align:left;margin:8px 0;}
.sg-auth-field span{display:block;font-size:11px;font-weight:800;color:#6b614e;margin:0 2px 3px;}
.sg-auth-field input{
  width:100%;box-sizing:border-box;
  border:2.5px solid var(--ink);border-radius:10px;
  padding:9px 11px;font-size:14px;background:#fff;outline:none;
}
.sg-auth-field input:focus{border-color:#2f7d6e;box-shadow:0 0 0 2px rgba(47,125,110,.25);}
.sg-auth-mask .sg-reg-only{max-height:0;overflow:hidden;opacity:0;margin:0;transition:all .2s;}
.sg-auth-mask.is-reg .sg-reg-only{max-height:80px;opacity:1;margin:8px 0;}
.sg-auth-err{color:#c0392b;font-size:12px;min-height:16px;font-weight:700;}
.sg-auth-submit{
  width:100%;margin-top:4px;
  border:3px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);
  box-shadow:0 4px 0 rgba(42,37,34,.5);
  padding:11px;font-size:17px;font-weight:900;letter-spacing:.3em;color:#5a2c0a;
  transition:transform .12s;
}
.sg-auth-submit:active{transform:scale(.97);}
.sg-auth-submit:disabled{opacity:.6;}
.sg-auth-tip{font-size:11px;color:#857a64;margin-top:8px;}

/* auth toast */
.sg-toast{
  position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);
  z-index:9100;max-width:80vw;
  background:rgba(35,35,35,.92);color:#fff;
  padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:all .22s;
  border:1.5px solid rgba(255,255,255,.15);
}
.sg-toast.show{opacity:1;transform:translate(-50%,0);}

/* =====================================================================
   棋友弹窗
   ===================================================================== */
.friends-modal{max-width:380px;}
.friend-add{display:flex;gap:6px;margin:10px 0;}
.friend-add input{
  flex:1;border:2.5px solid var(--ink);border-radius:10px;padding:8px 10px;font-size:13px;background:#fff;outline:none;
}
.friend-search{
  border:2.5px solid var(--ink);border-radius:10px;background:linear-gradient(180deg,#a9d4c4,#5aa78f);
  color:#0f3a2c;font-weight:900;padding:0 14px;
}
.friend-search-result{min-height:20px;margin-bottom:8px;}
.fs-loading,.fs-empty{font-size:12px;color:#857a64;}
.fs-item{
  display:flex;align-items:center;gap:8px;
  border:2px solid var(--ink);border-radius:10px;background:#fff;
  padding:6px 8px;margin-bottom:6px;
}
.fs-name{font-weight:900;font-size:13px;}
.fs-id{font-size:11px;color:#857a64;}
.fs-rank{flex:1;font-size:11px;color:#6b614e;text-align:right;}
.fs-add{
  border:2px solid var(--ink);border-radius:8px;background:#ffcf5e;color:#5a2c0a;
  font-weight:900;font-size:12px;padding:4px 10px;
}
.fs-add:disabled{opacity:.6;}
.friend-section-title{font-size:12px;font-weight:900;color:#6b614e;margin:4px 0 6px;}
.friend-list{max-height:240px;overflow:auto;}
.friend-empty{font-size:12px;color:#857a64;text-align:center;padding:14px;}
.friend-item{
  display:flex;align-items:center;gap:8px;
  border:2px solid var(--ink);border-radius:10px;background:#fffaf0;
  padding:8px 10px;margin-bottom:6px;
}
.fi-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid #232323;}
.fi-dot.on{background:#5aa78f;}
.fi-dot.off{background:#bbb;}
.fi-name{font-weight:900;font-size:13px;flex:1;}
.fi-id{font-size:11px;color:#857a64;}
.fi-rank{font-size:11px;color:#6b614e;}

/* =====================================================================
   组队大厅弹窗
   ===================================================================== */
.lobby-modal{max-width:380px;text-align:center;}
.lobby-entry{display:flex;flex-direction:column;gap:10px;padding:6px 0 4px;}
.lobby-create{
  border:3px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);
  box-shadow:0 4px 0 rgba(42,37,34,.5);
  padding:12px;font-size:16px;font-weight:900;color:#5a2c0a;
}
.lobby-join-row{display:flex;gap:6px;}
.lobby-join-row input{
  flex:1;border:2.5px solid var(--ink);border-radius:10px;padding:9px 10px;font-size:14px;
  text-transform:uppercase;letter-spacing:.1em;text-align:center;background:#fff;outline:none;
}
.lobby-join{
  border:2.5px solid var(--ink);border-radius:10px;background:#a9d4c4;color:#0f3a2c;
  font-weight:900;padding:0 16px;
}
.lobby-code{font-size:14px;color:#6b614e;margin:4px 0 10px;}
.lobby-code b{font-size:20px;color:#2f7d6e;letter-spacing:.15em;margin:0 6px;}
.lobby-copy{border:2px solid var(--ink);border-radius:8px;background:#f3e2b4;font-size:11px;font-weight:800;padding:3px 8px;}
.lobby-members{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.lm-item{
  display:flex;justify-content:space-between;align-items:center;
  border:2px solid var(--ink);border-radius:10px;background:#fffaf0;padding:8px 12px;
}
.lm-item.host{background:linear-gradient(180deg,#fff3c8,#ffe27a);}
.lm-name{font-weight:900;font-size:13px;}
.lm-ready{font-size:12px;font-weight:900;padding:2px 9px;border-radius:8px;border:1.5px solid var(--ink);}
.lm-ready.yes{background:#a9d4c4;color:#0f3a2c;}
.lm-ready.no{background:#f1c9c3;color:#7a2a22;}
.lobby-actions{display:flex;gap:8px;justify-content:center;margin-bottom:6px;}
.lobby-ready,.lobby-leave{
  flex:1;border:2.5px solid var(--ink);border-radius:12px;padding:10px;font-weight:900;font-size:14px;
}
.lobby-ready{background:linear-gradient(180deg,#a9d4c4,#5aa78f);color:#0f3a2c;}
.lobby-leave{background:#f1c9c3;color:#7a2a22;}
.lobby-start{
  flex:1.4;border:3px solid var(--ink);border-radius:12px;padding:10px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);color:#5a2c0a;font-weight:900;font-size:15px;letter-spacing:.2em;
  box-shadow:0 4px 0 rgba(42,37,34,.5);
}
.lobby-start:disabled{opacity:.5;box-shadow:none;}
.lobby-tip{font-size:11px;color:#857a64;margin-top:4px;}

/* 排行榜空态 */
.rank-empty{list-style:none;text-align:center;color:#857a64;font-size:12px;padding:14px 0;}

/* =====================================================================
   金币 + 按钮（资料卡）
   ===================================================================== */
.gold-plus{
  margin-left:4px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--ink);background:linear-gradient(180deg,#ffcf5e,#e89a1f);
  color:#5a2c0a;font-weight:900;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(42,37,34,.5);
}
.gold-plus:active{transform:scale(.9);}

/* =====================================================================
   背包弹窗
   ===================================================================== */
.bag-sub{text-align:center;font-size:12px;color:#857a64;margin:-6px 0 12px;}
.bag-list{display:flex;flex-direction:column;gap:9px;}
.bag-item{
  display:flex;align-items:center;gap:11px;
  border:2.5px solid var(--ink);border-radius:14px;background:#fffaf0;
  padding:10px 12px;box-shadow:0 3px 0 rgba(42,37,34,.28);
}
.bag-ico{
  width:42px;height:42px;flex:0 0 42px;border-radius:11px;
  border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:22px;background:linear-gradient(180deg,#dfeee6,#a9d4c4);
}
.bag-ico.bi-exp{background:linear-gradient(180deg,#ffe9b8,#f0b93e);}
.bag-ico.bi-pouch{background:linear-gradient(180deg,#f8d7d2,#e08a7f);}
.bag-body{flex:1;min-width:0;}
.bag-body b{display:block;font-size:14px;font-weight:900;color:var(--teal-900);}
.bag-body span{display:block;font-size:11px;color:#857a64;margin-top:1px;line-height:1.35;}
.bag-num{
  flex:0 0 auto;min-width:26px;text-align:center;font-weight:900;font-size:15px;
  color:#7a2a22;background:#f6e7c4;border:2px solid var(--ink);border-radius:8px;padding:2px 6px;
}
.bag-use{
  flex:0 0 auto;border:2.5px solid var(--ink);border-radius:10px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);color:#5a2c0a;
  font-weight:900;font-size:12px;padding:7px 12px;box-shadow:0 2px 0 rgba(42,37,34,.45);
}
.bag-use:disabled{opacity:.45;box-shadow:none;}
.bag-empty{text-align:center;color:#857a64;font-size:13px;padding:22px 0;}

/* =====================================================================
   设置弹窗
   ===================================================================== */
.set-row{
  display:flex;align-items:center;gap:10px;
  border:2.5px solid var(--ink);border-radius:14px;background:#fffaf0;
  padding:10px 13px;margin-bottom:9px;
}
.set-text{flex:1;}
.set-text b{font-size:14px;color:var(--teal-900);}
.set-text span{display:block;font-size:11px;color:#857a64;margin-top:2px;}
.set-switch{
  flex:0 0 auto;width:52px;height:29px;border-radius:20px;
  border:2.5px solid var(--ink);background:#c9bfa8;padding:0;position:relative;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.18);
}
.set-switch i{
  position:absolute;top:1px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);transition:left .18s ease;
}
.set-switch.on{background:#5aa78f;}
.set-switch.on i{left:24px;}
.set-actions{display:flex;gap:8px;margin-top:4px;}
.set-btn{
  flex:1;border:2.5px solid var(--ink);border-radius:12px;padding:10px 6px;
  font-weight:900;font-size:13px;box-shadow:0 3px 0 rgba(42,37,34,.4);
}
.set-guide{background:linear-gradient(180deg,#a9d4c4,#5aa78f);color:#0f3a2c;}
.set-logout{background:#f1c9c3;color:#7a2a22;}
.set-version{text-align:center;font-size:10px;color:#a99e87;margin-top:10px;}

/* =====================================================================
   大厅武将详情卡
   ===================================================================== */
.lh-card{max-width:400px;max-height:86vh;overflow-y:auto;}
.lh-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
.lh-pic{
  width:74px;height:74px;flex:0 0 74px;border-radius:16px;overflow:hidden;
  border:3px solid var(--ink);position:relative;background:#e8e0cc;
  box-shadow:0 3px 0 rgba(42,37,34,.4);
}
.lh-pic img{width:100%;height:100%;object-fit:cover;}
.lh-pic span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.lh-pic.c1{background:#9b9484;}.lh-pic.c2{background:#3fa08a;}
.lh-pic.c3{background:#3f7aa6;}.lh-pic.c4{background:#8e62b8;}
.lh-pic.c5{background:#e8a31f;}
.lh-id{min-width:0;}
.lh-id b{font-size:20px;font-weight:900;color:var(--teal-900);display:block;}
.lh-tags{font-size:12px;color:#857a64;}
.lh-stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:10px;
}
.lh-stats span{
  text-align:center;border:2px solid var(--ink);border-radius:9px;background:#fffaf0;
  padding:5px 2px;font-size:10px;color:#857a64;
}
.lh-stats b{display:block;font-size:13px;color:var(--teal-900);margin-top:1px;}
.lh-skill{
  border:2.5px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#eef7f3,#dceee5);padding:10px 12px;margin-bottom:9px;
}
.lh-skill b{font-size:14px;color:#0f3a2c;}
.lh-skill-tag{display:block;font-size:11px;color:#4e8f5f;margin:2px 0 5px;font-weight:800;}
.lh-skill p{font-size:12.5px;line-height:1.5;color:#3f3a30;margin:0;}
.lh-usage b{font-size:13px;color:var(--teal-900);}
.lh-usage p{font-size:12.5px;line-height:1.55;color:#4a4438;margin:4px 0 0;}
.lh-job{color:#2f7d6e !important;font-weight:800;}
.lh-pick{
  width:100%;margin-top:12px;border:3px solid var(--ink);border-radius:13px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);color:#5a2c0a;
  font-weight:900;font-size:15px;letter-spacing:.15em;padding:11px;
  box-shadow:0 4px 0 rgba(42,37,34,.5);
}
.lh-pick:active{transform:scale(.97);}
.lh-pick.picked{background:linear-gradient(180deg,#a9d4c4,#5aa78f);color:#0f3a2c;}

/* =====================================================================
   新手训练恢复弹窗
   ===================================================================== */
.guide-resume{max-width:330px;text-align:center;}
.gr-text{font-size:13.5px;line-height:1.65;color:#4a4438;margin:2px 0 14px;}
.gr-text b{color:#c0392b;font-size:17px;}
.gr-btns{display:flex;flex-direction:column;gap:8px;}
.gr-go{
  border:3px solid var(--ink);border-radius:13px;padding:12px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);color:#5a2c0a;
  font-weight:900;font-size:15px;box-shadow:0 4px 0 rgba(42,37,34,.5);
}
.gr-later{
  border:2.5px solid var(--ink);border-radius:12px;padding:9px;
  background:#e6dcc4;color:#5d5342;font-weight:800;font-size:13px;
}

/* =====================================================================
   首页新手引导层（与对局内引导同款）
   ===================================================================== */
.lg-mask{position:fixed;inset:0;z-index:500;pointer-events:none;}
.lg-mask[hidden]{display:none;}
.lg-spot{
  position:fixed;z-index:501;pointer-events:none;
  border:3px solid var(--gold,#e8a31f);border-radius:14px;
  box-shadow:0 0 0 9999px rgba(12,32,27,.66),0 0 22px rgba(240,185,62,.8);
  transition:all .28s cubic-bezier(.34,1.3,.64,1);
  animation:lg-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes lg-pulse{from{box-shadow:0 0 0 9999px rgba(12,32,27,.66),0 0 10px rgba(240,185,62,.5)}
  to{box-shadow:0 0 0 9999px rgba(12,32,27,.66),0 0 26px rgba(240,185,62,1)}}
.lg-card{
  position:fixed;z-index:502;pointer-events:auto;
  width:min(300px,82vw);
  background:linear-gradient(180deg,#fffaf0,#f3e6c8);
  border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 rgba(42,37,34,.5),0 16px 40px rgba(0,0,0,.35);
  padding:14px 15px 13px;
  transition:all .28s cubic-bezier(.34,1.3,.64,1);
}
.lg-progress{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;}
.lg-progress i{
  width:16px;height:5px;border-radius:3px;background:#d8cdb2;border:1px solid rgba(42,37,34,.35);
  font-style:normal;
}
.lg-title{display:block;font-size:16px;font-weight:900;color:#5a2c0a;margin-bottom:5px;}
.lg-text{font-size:13px;line-height:1.6;color:#4a4438;margin:0 0 11px;}
.lg-next{
  width:100%;border:2.5px solid var(--ink);border-radius:12px;
  background:linear-gradient(180deg,#ffcf5e,#e89a1f);
  box-shadow:0 3px 0 rgba(42,37,34,.5);
  padding:9px;font-size:15px;font-weight:900;letter-spacing:.25em;color:#5a2c0a;
}
.lg-next:active{transform:scale(.96);}
.lg-next.final-go{
  background:linear-gradient(180deg,#8fd0bb,#3fa08a);color:#0c3327;
}