:root{
  --ui: "PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --art: "Kaiti SC","STKaiti","KaiTi","Noto Serif SC","Songti SC",serif;
  --fs: 15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100vh;height:100dvh;background:#0b0c10;overflow:hidden;
  font-family:var(--ui);font-size:var(--fs);color:#e8e2d4;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent}
#app{position:relative;width:100vw;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#181a20 0%,#08090c 75%)}
canvas#game{display:block;background:#0d0f13;box-shadow:0 0 60px rgba(0,0,0,.9);touch-action:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(8,9,12,.95),rgba(8,9,12,.985));backdrop-filter:blur(2px);z-index:10;
  padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.screen.show{display:flex}
/* 书法字体只用于标题 */
.game-title,.game-sub,.hub-title,.sec-title,.map-card h3,
.brief-card h2,.result-card h2,.help-card h2,.help-card h3,.tab{font-family:var(--art)}
/* 标题 */
.title-wrap{text-align:center}
.game-title{font-size:86px;letter-spacing:22px;color:#e9dcae;text-shadow:0 0 24px rgba(212,161,55,.35);margin-left:22px}
.game-sub{margin-top:6px;font-size:20px;letter-spacing:8px;color:#8a8271}
.title-poem{margin:26px 0 10px;font-size:16px;line-height:2;color:#6f6a5d;font-family:var(--art)}
.title-btns{margin-top:22px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.title-tip{margin-top:26px;font-size:13px;color:#5c5850}
/* 按钮 */
.btn{cursor:pointer;border:1px solid #6b5f43;background:linear-gradient(180deg,#22242c,#15171c);color:#e5d9b4;
  padding:10px 20px;font-size:16px;letter-spacing:2px;font-family:var(--ui);transition:.15s;border-radius:3px;min-height:44px}
.btn:hover{background:linear-gradient(180deg,#33362f,#1e2026);border-color:#c8a44f;color:#ffeec2;box-shadow:0 0 14px rgba(200,164,79,.25)}
.btn.big{padding:14px 34px;font-size:20px;letter-spacing:6px;font-family:var(--art)}
.btn.ghost{border-color:#3a3a3f;color:#9d968a}
.btn.danger{border-color:#7d3b32;color:#e8a294}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* 据点 */
#screen-hub,#screen-select{justify-content:flex-start;padding:18px 32px}
.hub-head{width:100%;max-width:1180px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1px solid #35322a;padding-bottom:10px;flex-wrap:wrap}
.hub-title{font-size:28px;letter-spacing:6px;color:#e9dcae}
.hub-stats{font-size:14px;color:#a89b7c;letter-spacing:1px}
.hub-stats b{color:#e2c46a}
.tabs{width:100%;max-width:1180px;display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{cursor:pointer;background:#14161b;border:1px solid #2e2b25;border-bottom:none;color:#8d866f;
  padding:9px 20px;font-size:16px;letter-spacing:2px;white-space:nowrap;min-height:42px}
.tab.active{background:#1e2028;color:#e9dcae;border-color:#6b5f43}
.hub-body{width:100%;max-width:1180px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid #2e2b25;background:rgba(16,18,22,.86);padding:16px;min-height:0}
.hub-foot{width:100%;max-width:1180px;display:flex;gap:12px;justify-content:flex-end;padding-top:12px;flex:0 0 auto}
/* 网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.cell{border:1px solid #33302a;background:#14161b;padding:9px;cursor:pointer;transition:.12s;position:relative;min-height:76px}
.cell:hover{border-color:#c8a44f;background:#1c1f26}
.cell .nm{font-size:16px;letter-spacing:.5px;line-height:1.35}
.cell .ty{font-size:12px;color:#8b8574;margin-top:4px}
.cell .vl{position:absolute;right:7px;bottom:6px;font-size:12px;color:#c0a55f}
.cell.sel{border-color:#e2c46a;box-shadow:inset 0 0 12px rgba(226,196,106,.18)}
.slotrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.slot{width:196px;border:1px solid #3b372e;background:#121419;padding:9px 11px;min-height:74px;cursor:pointer}
.slot .lb{font-size:12px;color:#8a8270;letter-spacing:2px}
.slot .vv{font-size:17px;margin-top:5px}
.slot:hover{border-color:#c8a44f}
.sec-title{font-size:18px;color:#c9b57f;letter-spacing:4px;margin:14px 0 8px;border-left:3px solid #6b5f43;padding-left:8px}
.desc{font-size:14px;color:#8e8674}
.hint{font-size:13.5px;color:#8a8371;margin:6px 0 10px;line-height:1.85}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* 地图列表 */
.map-list{width:100%;max-width:1180px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-top:14px;min-height:0}
.map-card{border:1px solid #33302a;background:linear-gradient(180deg,#15171c,#101216);padding:14px;cursor:pointer;transition:.15s}
.map-card:hover{border-color:#c8a44f;transform:translateY(-2px)}
.map-card.locked{opacity:.45;cursor:not-allowed}
.map-card h3{font-size:23px;letter-spacing:4px;color:#e6d7a5}
.map-card .mt{font-size:13px;color:#8f8672;margin:5px 0 8px}
.map-card .md{font-size:14px;color:#9a927e;line-height:1.7;min-height:44px}
.map-card .mf{display:flex;justify-content:space-between;font-size:13px;color:#7b7668;margin-top:8px;flex-wrap:wrap;gap:4px}
.risk{letter-spacing:2px}
/* 卡片 */
.brief-card,.result-card,.bag-card,.help-card{width:min(860px,94vw);max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid #6b5f43;background:linear-gradient(180deg,#15171c,#0e1014);padding:26px 30px;box-shadow:0 0 40px rgba(0,0,0,.8)}
.brief-card h2,.result-card h2,.help-card h2{font-size:30px;letter-spacing:8px;color:#e9dcae;margin-bottom:12px}
.help-card h3{font-size:19px;color:#c9b57f;letter-spacing:4px;margin:16px 0 6px}
.help-card p{font-size:14px;line-height:1.9;color:#9a927e;margin-bottom:6px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;font-size:15px;color:#a49b85}
.help-grid b{color:#e2c46a}
.kv{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #2c2a24;padding:8px 0;font-size:15px;color:#a49b85}
.kv b{color:#e2c46a}
.loot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:10px}
/* 提示 */
#toast{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast-item{background:rgba(10,11,14,.92);border:1px solid #6b5f43;color:#e9dcae;padding:8px 20px;font-size:16px;letter-spacing:1px;animation:tfade 2.4s forwards}
@keyframes tfade{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#tooltip{position:absolute;z-index:80;display:none;max-width:340px;background:rgba(8,9,12,.97);border:1px solid #6b5f43;
  padding:11px 13px;font-size:14px;line-height:1.75;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.8)}
#tooltip .tt-n{font-size:18px;letter-spacing:1px;font-family:var(--art)}
#tooltip .tt-t{font-size:13px;color:#8b8474;margin-bottom:4px}
#tooltip .tt-s{color:#a49b85}
#tooltip .tt-d{color:#8b8574}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3a352c;border-radius:4px}
::-webkit-scrollbar-track{background:#111318}

/* ===== 键盘焦点 ===== */
.kbfocus{outline:2px solid #e2c46a !important;outline-offset:1px;box-shadow:0 0 14px rgba(226,196,106,.35) !important;position:relative;z-index:2}
.tab.kbfocus,.btn.kbfocus{color:#ffeec2}

/* ===== 平板 ===== */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .map-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* ===== 手机 / 窄屏 ===== */
@media (max-width:820px){
  :root{--fs:16px}
  #screen-hub,#screen-select{padding:10px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .hub-head{padding-bottom:8px}
  .hub-title{font-size:22px;letter-spacing:3px}
  .hub-stats{font-size:13px;line-height:1.6}
  .tabs{margin-top:8px;gap:4px}
  .tab{padding:10px 16px;font-size:16px;letter-spacing:1px;min-height:46px}
  .hub-body{padding:10px}
  /* 底部操作条常驻可见 */
  .hub-foot{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(8,9,12,.2),rgba(8,9,12,.96) 40%);
    padding:10px 0 4px;justify-content:center;gap:8px}
  .hub-foot .btn{flex:1;min-width:0;padding:12px 8px;font-size:15px;letter-spacing:1px}
  .grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .cell{min-height:84px;padding:10px}
  .cell .nm{font-size:16px}
  .cell .ty{font-size:12.5px}
  .cell .vl{font-size:12.5px}
  .slot{width:calc(50% - 5px);min-height:72px}
  .slot .vv{font-size:17px}
  .sec-title{font-size:17px;margin:12px 0 7px}
  .hint{font-size:13.5px}
  .map-list{grid-template-columns:1fr;gap:9px;margin-top:10px}
  .map-card{padding:13px}
  .map-card h3{font-size:22px}
  .map-card .md{font-size:14px;min-height:0}
  .map-card .mt,.map-card .mf{font-size:13px}
  .btn{padding:12px 18px;font-size:16px;min-height:48px}
  .btn.big{padding:14px 26px;font-size:19px;letter-spacing:4px}
  .game-title{font-size:52px;letter-spacing:14px;margin-left:14px}
  .game-sub{font-size:15px;letter-spacing:5px}
  .title-poem{font-size:14px;margin:18px 0 6px}
  .title-tip{font-size:12.5px;margin-top:18px}
  .brief-card,.result-card,.bag-card,.help-card{width:96vw;padding:16px 14px;max-height:92vh}
  .brief-card h2,.result-card h2,.help-card h2{font-size:24px;letter-spacing:4px}
  .help-card h3{font-size:17px}
  .help-grid{grid-template-columns:1fr;gap:8px;font-size:15px}
  .kv{font-size:15px}
  .loot-list{grid-template-columns:repeat(2,1fr)}
  #tooltip{max-width:78vw;font-size:13.5px}
  .toast-item{font-size:15px;padding:8px 14px}
}
/* 横屏矮屏 */
@media (max-height:520px) and (orientation:landscape){
  .game-title{font-size:36px;letter-spacing:10px}
  .title-poem{display:none}
  .title-btns{margin-top:12px;gap:10px}
  .hub-title{font-size:19px}
  .hub-body{padding:8px}
  .brief-card,.result-card,.bag-card,.help-card{max-height:94vh;padding:12px}
}