/* manual.css — B17 遊戲手冊（manual.mjs）＋首次 3 秒教學卡。變數來自 game.css :root（--ui-*）。 */
.mn-wrap{position:fixed;inset:0;z-index:1010;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  box-sizing:border-box;background:#0008;font:var(--ui-fs,13px)/1.5 var(--ui-font,system-ui,sans-serif);color:#eef3f8}
.mn-panel{display:flex;flex-direction:column;width:min(860px,100%);max-height:100%;border-radius:16px;background:#151a23f2;box-shadow:0 12px 48px #000b;overflow:hidden;
  border:1px solid var(--ui-line,#fff2)}
.mn-head{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--ui-line,#fff2);background:#1d2430}
.mn-head h2{margin:0;font-size:17px;white-space:nowrap}
.mn-tabs{display:flex;gap:4px;flex:1;min-width:0}
.mn-tab,.mn-segbtn,.mn-chip{border:0;border-radius:999px;padding:6px 14px;background:#ffffff14;color:#dfe7ef;font:600 13px/1.2 var(--ui-font,system-ui,sans-serif);cursor:pointer;white-space:nowrap}
.mn-tab:hover,.mn-segbtn:hover,.mn-chip:hover{background:#ffffff26}
.mn-tab.on,.mn-segbtn.on{background:var(--ui-accent,#ffd23f);color:#222}
.mn-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#ffffff14;color:#fff;font-size:18px;cursor:pointer}
.mn-close:hover{background:#ffffff2a}
.mn-body{overflow:auto;padding:14px 18px 18px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mn-seg{display:inline-flex;gap:4px;padding:3px;margin-bottom:12px;border-radius:999px;background:#0004}
.mn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mn-chip{padding:5px 11px;font-size:12px}
.mn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.mn-card{padding:10px 14px 12px;border-radius:var(--ui-r,12px);background:#ffffff0d;border:1px solid #ffffff12;scroll-margin-top:8px}
.mn-card.flash{animation:mn-flash 1s ease-out}
@keyframes mn-flash{from{background:#ffd23f40}}
.mn-card h3{margin:0 0 6px;font-size:14px;color:#ffe27a}
.mn-card ul{margin:0;padding-left:18px}
.mn-card li{margin:3px 0}
.mn-card p{margin:6px 0}
.mn-card a{color:#9cc8ff}
.mn-keys{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0;align-items:baseline}
.mn-keys dt{white-space:nowrap}
.mn-keys dd{margin:0;color:#cfd9e3}
.mn-wrap kbd,.mn-quick kbd{display:inline-block;min-width:1.4em;padding:1px 6px;border-radius:6px;background:#eef2f6;color:#1b2330;font:700 12px/1.5 var(--ui-font,system-ui,sans-serif);
  text-align:center;box-shadow:inset 0 -2px 0 #b8c2cd}
.mn-or{margin:0 3px;color:#8796a6}
.mn-about{max-width:620px}
.mn-ver{color:#9fb0c0;font:12px ui-monospace,Menlo,Consolas,monospace}
#manualBtn.on{background:var(--ui-accent,#ffd23f);color:#222}

/* 首次 3 秒教學卡：上方置中（toast 下面），不擋準心；✕ 關、3 秒自動收起 */
.mn-quick{position:fixed;left:50%;top:calc(var(--ui-edge-t,12px) + 64px);transform:translateX(-50%);z-index:1009;width:min(560px,calc(100vw - 2 * 240px));box-sizing:border-box;
  padding:10px 14px 12px;border-radius:14px;background:var(--ui-bg-strong,#141820e8);box-shadow:var(--ui-shadow,0 2px 10px #0006);border:1px solid var(--ui-line,#fff2);
  font:13px/1.4 var(--ui-font,system-ui,sans-serif);color:#fff;animation:mn-in .25s ease-out;transition:opacity .3s;overflow:hidden;
  -webkit-backdrop-filter:var(--ui-blur);backdrop-filter:var(--ui-blur)}
.mn-quick.out{opacity:0}
@keyframes mn-in{from{opacity:0;transform:translate(-50%,-8px)}}
.mn-quick-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.mn-quick-t{font-size:14px;color:#ffe27a}
.mn-quick-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff1c;color:#fff;font-size:15px;cursor:pointer}
.mn-quick-x:hover{background:#ffffff33}
.mn-quick ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;margin:0 0 8px;padding:0;list-style:none}
.mn-quick li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.mn-quick-btn{border:0;border-radius:999px;padding:5px 12px;background:var(--ui-accent,#ffd23f);color:#222;font:700 12px/1.2 var(--ui-font,system-ui,sans-serif);cursor:pointer}
.mn-quick-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ui-accent,#ffd23f);transform-origin:left;animation:mn-bar var(--ms,3000ms) linear forwards}
@keyframes mn-bar{to{transform:scaleX(0)}}

@media (max-width:640px),(max-height:520px){
  .mn-head{flex-wrap:wrap;gap:8px;padding:8px 10px 8px 14px}
  .mn-head h2{font-size:15px}
  .mn-tabs{order:3;flex-basis:100%}
  .mn-close{margin-left:auto}
  .mn-body{padding:10px 12px 14px}
  .mn-grid{grid-template-columns:1fr}
  .mn-quick ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:520px) and (min-width:641px){
  .mn-grid{grid-template-columns:repeat(2,1fr)}
  .mn-tabs{order:0;flex-basis:auto}
  .mn-head{flex-wrap:nowrap}
  .mn-quick{top:26%;width:min(460px,calc(100vw - 2 * 170px))}
  .mn-quick ul{grid-template-columns:repeat(3,1fr)}
}
@media (orientation:portrait) and (max-width:640px){.mn-quick{top:32%;width:calc(100vw - 24px)}}