/* ==========================================================================
   poster-kit.css —— 手绘画报风格公共样式（直升机 / 鹈鹕骑车 / 跳一跳 共用）
   配色：#f6ecd7 米 · #b5533c 砖红 · #e8a23f 芥黄 · #8f3a2a 暗红 · #503a28 深棕
   ========================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  margin:0; padding:20px; background:#2b241f;
  font-family:"Kaiti SC","STKaiti","KaiTi","DFKai-SB",serif;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
a{ color:inherit; text-decoration:none; }

/* ===== 海报卡片外壳（视口自适应：永不出现页面级滚动条） =====
   注意：宽度只用视口单位（100vw / 100vh）而不用 100%，因为挂载容器是 flex 居中项、
   宽度收缩贴合内容，若用 100% 会与自身宽度形成循环依赖，导致海报被压扁。 */
.poster{
  position:relative; background:#f6ecd7; padding:16px 16px 34px;
  border-radius:6px; box-shadow:0 30px 70px rgba(0,0,0,.5);
  width:min(1020px, calc(100vw - 40px), calc((100vh - 92px) * 1.5));
  margin:0 auto; touch-action:manipulation;
}
.poster > svg{ display:block; width:100%; height:auto; border-radius:3px; user-select:none; touch-action:manipulation; }
.hud{
  position:absolute; left:28px; right:28px; bottom:8px;
  font-size:13px; letter-spacing:.16em; color:#a5896a;
}
.hud .stat{ position:absolute; right:0; bottom:0; color:#c4a87f; }
.hud .stat b{ color:#5c4632; font-weight:normal; }
@media (max-width:560px){ .hud{ font-size:11px; } .hud .hint{ display:none; } }

/* ===== 设置 / 玩法入口按钮 ===== */
.gear{
  position:absolute; top:26px; right:26px; z-index:7;
  font-family:inherit; font-size:13px; letter-spacing:.08em;
  color:#5c4632; background:#f6ecd7; border:2.5px solid #503a28;
  border-radius:20px; padding:5px 13px; cursor:pointer;
  box-shadow:0 3px 0 rgba(80,58,40,.35);
}
.gear2{ right:122px; }
.gear:hover{ background:#efe0c2; }
.gear:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(80,58,40,.35); }

/* ===== 设置面板（chip 式键位编辑器） ===== */
.panelWrap{
  position:absolute; left:16px; right:16px; top:16px; bottom:52px; z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:rgba(43,36,31,.5); border-radius:6px;
}
.panelWrap[hidden]{ display:none; }
.panel{
  width:min(440px,94%); max-height:calc(100% - 6px); overflow:auto;
  background:#f6ecd7; color:#5c4632;
  border:3px solid #503a28; border-radius:8px; padding:14px 16px 12px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.phead{
  display:flex; align-items:center; justify-content:space-between;
  font-size:19px; letter-spacing:.1em;
  border-bottom:2px solid #d8c7a6; padding-bottom:8px; margin-bottom:10px;
}
.xbtn{
  font-family:inherit; font-size:14px; line-height:1; color:#5c4632;
  background:#e8dcc0; border:2px solid #503a28; border-radius:6px;
  width:26px; height:26px; cursor:pointer;
}
.psec{ margin-bottom:10px; }
.pnote{ font-size:12px; color:#a5896a; letter-spacing:.04em; margin-bottom:8px; line-height:1.6; }
.prow{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.pname{ width:46px; flex:none; font-size:15px; padding-top:5px; }
.klist{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; color:#5c4632; background:#efe3c8;
  border:2px solid #503a28; border-radius:14px;
  padding:3px 5px 3px 10px; cursor:pointer; min-height:26px; line-height:1;
}
.chip:hover{ background:#e6d6b4; }
.chip.binding{ background:#e8a23f; color:#3b2f24; }
.chip .kx{ font-family:inherit; font-size:13px; color:#8f3a2a; padding:0 2px; cursor:pointer; }
.chip .kx:hover{ color:#b5533c; }
.chip.solo .kx{ display:none; }
.kadd{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-size:14px; color:#5c4632; background:#e8dcc0;
  border:2px dashed #503a28; border-radius:14px;
  padding:3px 11px; cursor:pointer; min-height:26px; line-height:1;
}
.kadd:hover{ background:#efe3c8; }
.kadd.binding{ background:#e8a23f; color:#3b2f24; border-style:solid; font-size:11px; }
.mbtn{
  font-family:inherit; font-size:12px; color:#5c4632; background:#e8dcc0;
  border:2px solid #503a28; border-radius:6px; padding:5px 8px;
  cursor:pointer; white-space:nowrap; flex:none;
}
.chk{ display:inline-flex; align-items:center; gap:6px; font-size:15px; cursor:pointer; }
.psec .mbtn{ margin-left:10px; }
.pfoot{
  font-size:12px; color:#a5896a; letter-spacing:.04em;
  border-top:2px solid #d8c7a6; padding-top:8px;
}

/* ===== 玩法引导层（精简单屏、无滚动） ===== */
.guideWrap{
  position:absolute; left:16px; right:16px; top:16px; bottom:52px; z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:rgba(43,36,31,.52); border-radius:6px;
}
.guideWrap[hidden]{ display:none; }
.guide{
  width:min(540px,96%); max-height:min(360px,100%); overflow:hidden;
  background:#f6ecd7; color:#5c4632; text-align:center;
  border:3px solid #503a28; border-radius:10px; padding:15px 20px 13px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.gtitle{ font-size:22px; letter-spacing:.08em; margin:0 0 4px; }
.glead{ font-size:16px; color:#8f7550; margin-bottom:9px; }
.krow{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px 11px;
  font-size:13px; color:#8f7550;
  border-top:2px solid #d8c7a6; border-bottom:2px solid #d8c7a6;
  padding:7px 0; margin-bottom:9px;
}
.krow b{
  font-weight:normal; font-family:Georgia,serif; font-size:12px; color:#5c4632;
  background:#efe3c8; border:1.5px solid #503a28; border-radius:5px; padding:1px 6px;
}
.glegend{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px 10px; margin-bottom:7px; }
.gleg{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#5c4632; }
.gleg.bad{ color:#8f3a2a; }
.gic{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.gic svg{ display:block; }
.gtags{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; margin-bottom:10px; }
.gtag2{
  font-size:11px; color:#8f3a2a; background:#f9f2e2;
  border:1.5px solid #d8c7a6; border-radius:12px; padding:2px 9px;
}
.gbtn{
  font-family:inherit; font-size:15px; letter-spacing:.12em; color:#f6ecd7;
  background:#b5533c; border:2.5px solid #503a28; border-radius:8px;
  padding:8px 34px; cursor:pointer; box-shadow:0 3px 0 rgba(80,58,40,.35);
}
.gbtn:hover{ background:#c26043; }
.gbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(80,58,40,.35); }
.gfootSmall{ margin-top:8px; font-size:11px; color:#a5896a; letter-spacing:.06em; }

/* ===== 结算卡片（无内部滚动） ===== */
.resultCard{
  position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
  z-index:5; width:min(348px,88%); max-height:calc(100% - 12px); overflow:hidden;
  background:#f6ecd7; color:#5c4632;
  border:3px solid #503a28; border-radius:10px;
  padding:13px 18px 15px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  text-align:center; display:none;
}
.resultCard.on{ display:block; }
.rcTag{ font-size:11px; letter-spacing:.26em; color:#a5896a; }
.rcMain{ font-family:Georgia,serif; font-size:46px; line-height:1.15; color:#b5533c; }
.rcMain small{ font-size:12px; letter-spacing:.2em; color:#a5896a; margin-left:5px; }
.rcRow{ display:flex; justify-content:space-around; gap:6px; margin:9px 0 3px; font-size:11px; color:#8f7550; }
.rcRow span{ flex:1; min-width:0; }
.rcRow b{ display:block; font-family:Georgia,serif; font-size:16px; color:#5c4632; font-weight:normal; margin-top:2px; }
.rcLv{ margin:10px 0 0; padding-top:9px; border-top:2px solid #d8c7a6; font-size:11px; text-align:left; color:#8f7550; }
.rcLv .rn{ display:flex; justify-content:space-between; margin-bottom:4px; }
.rcLv .rn b{ font-weight:normal; color:#8f3a2a; }
.rcBar{ height:8px; border-radius:4px; background:#d8c7a6; border:1.5px solid #503a28; overflow:hidden; }
.rcBar i{ display:block; height:100%; width:0; background:#e8a23f; border-radius:3px; }
.rcBtn{
  margin-top:13px; width:100%;
  font-family:inherit; font-size:15px; letter-spacing:.14em; color:#f6ecd7;
  background:#b5533c; border:2.5px solid #503a28; border-radius:8px;
  padding:9px 0; cursor:pointer; box-shadow:0 3px 0 rgba(80,58,40,.3);
}
.rcBtn:hover{ background:#c26043; }
.rcBtn:disabled{ background:#cbb99b; cursor:default; box-shadow:none; }
.rcTip{ margin-top:7px; font-size:11px; color:#a5896a; letter-spacing:.06em; }

/* ===== 主入口（index.html） ===== */
.menuWrap{ width:min(1020px, calc(100vw - 40px), calc((100vh - 92px) * 1.5)); margin:0 auto; }
.menuHead{ text-align:center; margin-bottom:14px; padding:10px 16px 0; }
.menuTag{ font-size:11px; letter-spacing:.32em; color:#a5896a; }
.menuTitle{ font-size:34px; letter-spacing:.1em; color:#5c4632; margin:2px 0 4px; }
.menuSub{ font-size:14px; color:#8f7550; }
.menuGrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#f6ecd7; color:#5c4632; border:3px solid #503a28; border-radius:12px;
  padding:18px 14px 16px; cursor:pointer; outline:none;
  box-shadow:0 6px 0 rgba(80,58,40,.28);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.card:hover,.card:focus-visible{ background:#f9f2e2; transform:translateY(-4px); box-shadow:0 10px 0 rgba(80,58,40,.28); }
.card:active{ transform:translateY(0); box-shadow:0 3px 0 rgba(80,58,40,.28); }
.cardIc{ width:120px; height:96px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.cardN{ font-size:19px; letter-spacing:.08em; color:#8f3a2a; margin-bottom:5px; }
.cardD{ font-size:12px; color:#8f7550; line-height:1.5; min-height:36px; }
.cardBest{ margin-top:8px; font-size:12px; color:#a5896a; }
.cardBest b{ font-family:Georgia,serif; font-size:16px; color:#5c4632; font-weight:normal; }
@media (max-width:820px){
  .menuGrid{ grid-template-columns:1fr; gap:12px; }
  .card{ flex-direction:row; text-align:left; padding:12px 14px; }
  .cardIc{ width:88px; height:64px; margin:0 12px 0 0; flex:none; }
  .cardBody{ flex:1; min-width:0; }
  .cardD{ min-height:0; }
}

/* ===== 窄屏：引导 / 结算视口居中，杜绝内部滚动条 ===== */
@media (max-width:640px){
  body{ padding:10px; }
  .poster{ width:min(1020px, calc(100vw - 20px), calc((100vh - 92px) * 1.5)); }
  .guideWrap{
    position:fixed; left:0; right:0; top:0; bottom:0; border-radius:0; padding:14px;
  }
  .guide{ width:min(540px,100%); max-height:calc(100vh - 28px); }
  .resultCard{ position:fixed; left:50%; top:50%; max-height:calc(100vh - 24px); }
  .guideWrap .guide, .resultCard{ overflow:hidden; }
}
@media (max-height:520px){
  .guide{ padding:10px 16px 9px; }
  .gtitle{ font-size:19px; margin-bottom:2px; }
  .glead{ font-size:14px; margin-bottom:6px; }
  .krow{ padding:5px 0; margin-bottom:6px; }
  .glegend{ gap:4px 8px; margin-bottom:5px; }
  .gtags{ margin-bottom:7px; }
}