/* 單一深色霓虹世界：刻意不做淺色主題，所有顏色都明確指定 */
:root { color-scheme: dark; background: #05060f;
  /* 介面跟遊戲畫面同一套風格（記憶 art-style）：深色描邊、光從左上來（上緣亮、下緣暗）、金屬藍灰、能量用青色發光 */
  --ink: #03050c;        /* 描邊：所有按鈕、面板、卡片外面一圈 */
  --edge: #34436f;       /* 金屬邊 */
  --energy: #4cc9f0;     /* 能量青：主要按鈕、面板角的刻線、選中 */
  --metal: linear-gradient(180deg, #36446c 0%, #232d50 55%, #182039 100%);
  --metal-hi: linear-gradient(180deg, #46578c 0%, #2c3966 55%, #1e2849 100%);
  --metal-lo: linear-gradient(180deg, #161d35 0%, #24305a 100%);
  --bevel: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -2px 0 rgba(0, 0, 0, .42);
  --plate: linear-gradient(180deg, #10172f 0%, #0a0f22 100%);
  --inset: linear-gradient(180deg, #05070f 0%, #0a0f22 100%);  /* 內框：嵌在面板裡的凹槽 */
  --inset-sh: inset 0 2px 5px rgba(0, 0, 0, .65), inset 0 0 0 1px #1a2444, 0 1px 0 rgba(255, 255, 255, .05); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05060f; color: #dfe7ff;
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; }
/* 只有遊戲操作的部分禁止選取（避免手機長按誤觸）；說明文字都可以選取、複製 */
canvas, button, .chip, .slot, .node, #touchUI { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body { position: relative; }
canvas { display: block; cursor: crosshair; touch-action: none; position: absolute; inset: 0; }
button { background: var(--metal); color: #e3ecff; border: 1px solid var(--edge); border-radius: 4px; padding: 5px 12px;
  box-shadow: 0 0 0 2px var(--ink), var(--bevel); text-shadow: 0 1px 0 var(--ink);
  cursor: pointer; font-size: 12px; font-family: inherit; touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--energy); outline-offset: 3px; }
button:hover:not(:disabled) { background: var(--metal-hi); border-color: #6a8fd0; box-shadow: 0 0 0 2px var(--ink), 0 0 12px rgba(76, 201, 240, .35), var(--bevel); }
button:active:not(:disabled) { background: var(--metal-lo); box-shadow: 0 0 0 2px var(--ink), inset 1px 2px 3px rgba(0, 0, 0, .55); }
button:disabled { opacity: .4; cursor: default; }
.slash { position: relative; }
.slash::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid #ff3b3b; transform: rotate(45deg); }
button.big { font-size: 16px; padding: 10px 28px; border-radius: 5px; letter-spacing: .04em; color: #f2fbff; border-color: #5fd3ff;
  background: linear-gradient(180deg, #2f93c4 0%, #1c6491 52%, #134467 100%); }
button.big:hover:not(:disabled) { background: linear-gradient(180deg, #3aa9df 0%, #2277a8 52%, #175279 100%); border-color: #a8ecff;
  box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(76, 201, 240, .55), inset 1px 1px 0 rgba(255, 255, 255, .3), inset -1px -2px 0 rgba(0, 0, 0, .35); }
button.big:active:not(:disabled) { background: linear-gradient(180deg, #134467, #1c6491); }
.hidden { display: none !important; }

/* ===== 通用畫面（標題 / 航圖 / 獎勵 / 商店 / 結算） ===== */
#screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 15, .55); z-index: 6; }  /* 蓋在靶場工具列（#rangeBar 5）、觸控按鈕上面：以前靶場裡開設定，工具列擋住「返回」按不到 */
.scr { width: 100%; max-width: 1000px; max-height: 94vh; overflow: auto; border: 1px solid var(--edge); border-radius: 4px; padding: 22px 26px;
  background: linear-gradient(var(--energy), var(--energy)) left top / 22px 2px no-repeat, linear-gradient(var(--energy), var(--energy)) left top / 2px 22px no-repeat,
    linear-gradient(var(--energy), var(--energy)) right bottom / 22px 2px no-repeat, linear-gradient(var(--energy), var(--energy)) right bottom / 2px 22px no-repeat, var(--plate);
  box-shadow: 0 0 0 2px var(--ink), inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .6), 0 0 40px rgba(76, 201, 240, .12); }
/* 選飛船／武器／起始晶片：三個畫面同樣大小，換頁時視窗不會忽大忽小 */
.scr.pick { height: min(860px, 94vh); }
.scr h1 { font-size: 26px; color: #bdf0ff; letter-spacing: 3px; text-shadow: 0 0 18px #4cc9f0; }
.scr h2 { font-size: 20px; color: #4cc9f0; letter-spacing: 2px; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(76, 201, 240, .35); }
.scr .sub { color: #8fa3d9; font-size: 13px; margin-top: 6px; line-height: 1.7; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pill { font-size: 13px; background: #060914; border: 1px solid #1d2848; border-radius: 4px; padding: 4px 12px; color: #cfe8ff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05); }
.pill.crystal { color: #9ff0ff; }  /* 晶體（錢）：跟戰場上的晶體同色（青白色；敵人大多是暖色） */
.title-wrap { text-align: center; padding: 30px 10px; position: relative; }
.refresh-corner { position: absolute; top: 12px; right: 12px; }  /* 清暫存重新整理：右上角獨立一顆 */
.refresh-corner button { padding: 8px 14px; font-size: 14px; border-color: #4cc9f0; color: #4cc9f0; }
.title-wrap h1 { font-size: 54px; }
.title-wrap .en { color: #4cc9f0; letter-spacing: 8px; margin: 6px 0 24px; }
.title-wrap .row { justify-content: center; margin: 26px 0 18px; }
.keys { font-size: 12px; color: #6a79ad; line-height: 1.9; }
/* 雙人：斷線等待／重新連線的視窗（蓋在所有畫面上） */
#netOverlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 15, 0.72); padding: 16px; }
#netOverlay[hidden] { display: none; }
#netOverlay .panel { max-width: 520px; text-align: center; display: grid; gap: 12px; }
#netNudge { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 61; pointer-events: none; padding: 8px 18px; border-radius: 8px;
  background: rgba(20, 10, 30, .92); border: 1px solid #ff9dbd; color: #ff9dbd; font-weight: bold; box-shadow: 0 0 16px rgba(255, 157, 189, .45); }
#netNudge[hidden] { display: none; }
.ver { font-size: 11px; color: #4a5886; letter-spacing: .05em; font-variant-numeric: tabular-nums; }

.map { position: relative; width: 100%; height: 440px; margin-top: 14px; background: #070b1a; border-radius: 10px; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.node { position: absolute; width: 50px; height: 50px; border-radius: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px;
  background: #0d1433; border: 2px solid; cursor: default; opacity: .35; padding: 0; box-shadow: 0 0 0 2px var(--ink); text-shadow: none; }
.node:hover:not(:disabled) { background: #13204a; border-color: currentColor; box-shadow: 0 0 0 2px var(--ink), 0 0 12px currentColor; }
.node small { font-size: 9px; margin-top: -2px; }
/* 雙人投票標記：1P 左上、2P 右上 */
.node .vote { position: absolute; top: -9px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 6px; color: #05060f; pointer-events: none; }
.node .vote.v1 { left: -10px; background: #4cc9f0; }
.node .vote.v2 { right: -10px; background: #ff9dbd; }
.node .vote.v3 { left: -10px; top: auto; bottom: -9px; background: #ffd166; }
.node .vote.v4 { right: -10px; top: auto; bottom: -9px; background: #9dff6b; }
.node.reach { opacity: 1; cursor: pointer; animation: pulse 1.2s infinite; }
.node.visited { opacity: .9; background: #1a2550; }
.node.current { opacity: 1; box-shadow: 0 0 18px currentColor; }
@keyframes pulse { 50% { box-shadow: 0 0 16px currentColor; } }
/* 寶藏星域（？事件「星圖情報」標出的戰鬥）：金框＋下方標籤 */
.node.hoard { border-color: #ffd166 !important; box-shadow: 0 0 0 3px rgba(255, 209, 102, .3), 0 0 16px #ffd166; opacity: .85; }
.node.hoard.reach, .node.hoard.visited { opacity: 1; }
.node .hoard-tag { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 6px; color: #05060f; background: #ffd166; pointer-events: none; }
/* ？事件畫面 */
.ev-text { max-width: 720px; margin: 18px auto; padding: 16px 20px; border-left: 3px solid; background: #0a1028; border-radius: 8px; line-height: 1.8; font-size: 15px; color: #dfe6ff; }
.ev-opts { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.ev-opts button { text-align: left; white-space: normal; line-height: 1.5; }
.ev-res { text-align: center; font-size: 26px; font-weight: 700; margin: 6px 0 10px; animation: evpop .35s ease-out; }
.ev-opts .ev-res ~ button { text-align: center; }  /* 結果下面的「繼續」（中間可能隔著投票明細的小字） */
@keyframes evpop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.toast { margin-top: 10px; color: #9dff6b; font-size: 13px; min-height: 18px; }
.nlegs { margin-top: 8px; font-size: 12px; color: #c9d4ff; }
.nlegs summary { cursor: pointer; color: #8fa3d9; font-size: 13px; margin-bottom: 6px; }
.nleg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.nleg { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; background: #070b1a; border-radius: 8px; padding: 6px 8px; }
.nleg-ic { flex: none; width: 24px; height: 24px; border: 1.5px solid; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
@media (max-width: 700px) { .nleg-grid { grid-template-columns: 1fr; } }

.cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 20px 0; }
.card { width: 210px; background: linear-gradient(180deg, #0b1126 0%, #070b1a 100%); border-radius: 6px; padding: 14px; border: 1px solid #22305e;
  box-shadow: 0 0 0 2px var(--ink), inset 1px 1px 0 rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; gap: 8px; }
.card .ttl { font-weight: 700; font-size: 15px; }
.card .ty { font-size: 11px; opacity: .8; }
.card .ds { font-size: 12px; color: #c9d4ff; line-height: 1.6; flex: 1; }
/* 條列說明（descList：武器、飛船）：每條前面一個小方塊，條與條之間空一點 */
.dlist { list-style: none; margin: 0 0 6px; padding: 0; }
.dlist li { position: relative; padding-left: 12px; margin-bottom: 4px; }
.dlist li::before { content: ''; position: absolute; left: 1px; top: .65em; width: 5px; height: 5px; background: currentColor; opacity: .55; transform: rotate(45deg); }
.card .ps { font-size: 11px; color: #2ee6a6; }
.card button { width: 100%; padding: 7px; }
.card.sold { opacity: .35; }

/* ===== 電路編輯器 ===== */
/* 靠上對齊：說明文字長短改變面板高度時，上方的電路不會跟著跳動 */
#editor { position: fixed; inset: 0; background: rgba(3, 5, 15, .82); display: flex;
  align-items: flex-start; justify-content: center; padding-top: 2.5vh; backdrop-filter: blur(3px); z-index: 10; }
.etabs { display: flex; gap: 6px; margin-top: 10px; border-bottom: 1px solid #22305e; }
.etabs button { border-radius: 8px 8px 0 0; border-bottom: none; }
.etabs button.on { background: var(--metal-lo); color: #fff; border-color: var(--energy); box-shadow: 0 0 0 2px var(--ink), inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 10px rgba(76, 201, 240, .3); }
.dmg-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.dmg-table th { text-align: right; color: #8fa3d9; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #22305e; }
.dmg-table th:first-child, .dmg-table td:first-child { text-align: left; }
.dmg-table td { padding: 6px 8px; border-bottom: 1px solid #141c3a; text-align: right; color: #eef2ff;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmg-table td:first-child { white-space: normal; }
.dmg-table .bar { height: 6px; background: #111a3a; border-radius: 3px; margin-top: 4px; }
.dmg-table .bar div { height: 6px; border-radius: 3px; min-width: 1px; }
.dmg-table .pct { color: #6a79ad; margin-left: 6px; display: inline-block; width: 34px; }
.rec-list { display: grid; gap: 8px; margin-top: 12px; }
.rec { background: #070b1a; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #c9d4ff; line-height: 1.6; text-align: left; }
.rec b { color: #fff; }
.rec-copy { width: 100%; height: 120px; margin-top: 10px; background: #070b1a; color: #c9d4ff; border: 1px solid #2a3a7a;
  border-radius: 8px; font: 11px/1.4 monospace; padding: 8px; }
.panel { width: 100%; max-width: 1020px; max-height: 95vh; overflow: auto; border: 1px solid var(--edge); border-radius: 4px; padding: 18px 22px;
  background: linear-gradient(var(--energy), var(--energy)) left top / 22px 2px no-repeat, linear-gradient(var(--energy), var(--energy)) left top / 2px 22px no-repeat,
    linear-gradient(var(--energy), var(--energy)) right bottom / 22px 2px no-repeat, linear-gradient(var(--energy), var(--energy)) right bottom / 2px 22px no-repeat, var(--plate);
  box-shadow: 0 0 0 2px var(--ink), inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .6), 0 0 40px rgba(76, 201, 240, .12); }
.panel h2 { color: #4cc9f0; letter-spacing: 2px; font-size: 19px; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(76, 201, 240, .35); }
.panel h3 { font-size: 13px; color: #8fa3d9; margin: 14px 0 8px; font-weight: 600; }
#editor .panel { max-width: 1400px; }  /* 螢幕寬 1440 時，武器＋電路 8 格（放大後的晶片）排得下一行 */
.chain, .inv { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 14px 12px;
  background: var(--inset); border-radius: 4px; border: 1px solid #1a2444; box-shadow: var(--inset-sh); }
.inv { gap: 10px; }
.slot { width: 108px; height: 76px; border: 2px solid #243159; border-radius: 6px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); display: flex;
  align-items: center; justify-content: center; position: relative; background: #0a1030; }
.inv .slot { border-color: #24506a; background: #08151f; }
.slot.seg1 { background: #1f0d2a; border-color: #6b2d5c; }
.slot.seg2 { background: #2a0d22; border-color: #8a2d55; }
.slot.seg3 { background: #33101c; border-color: #a8304d; }
.slot.over { border-color: #4cc9f0 !important; background: #10224a !important; }
.slot .idx { position: absolute; top: -9px; left: 6px; font-size: 10px; color: #6a79ad; background: #070b1a; padding: 0 4px; white-space: nowrap; }
.slot .empty { font-size: 11px; color: #3e4c80; }
.arrow { color: #4c5a8f; font-size: 18px; width: 22px; text-align: center; }
/* 電路：每一格一欄，晶片卡靠上，下面固定留一排插座（大圓，組件插在裡面；滑鼠移上去看是什麼） */
.chain { align-items: flex-start; }
/* 電路：一條線一排（線頭在最左），排尾的「＋」是共用的空位 */
.chain { flex-direction: column; align-items: stretch; gap: 10px; }
.lrow { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; padding: 10px 8px 6px; border-left: 3px solid #4cc9f0; border-radius: 6px; background: rgba(12, 18, 48, .6); }
.slot .idx:empty { display: none; }  /* 晶片格不編號（一條線一排，看位置就知道順序） */
.slot.head .idx { color: #4cc9f0; font-weight: 700; font-size: 11px; }  /* 線頭：角標寫什麼時候觸發 */
.slot.addslot { border-style: dashed; cursor: pointer; }
.slot.addslot .empty { font-size: 12px; color: #6a79ad; text-align: center; line-height: 1.5; }
#edMain.free #chain { position: sticky; top: -1px; z-index: 3; background: #0b1024; box-shadow: 0 6px 10px -6px #000; }  /* 沙盒／靶場：電路固定在上方 */
.chain .arrow { margin-top: 43px; width: 16px; }
/* 電路、倉庫的晶片放大（晶片庫維持小格，一次看得到全部） */
.chain .slot, .inv .slot { width: 124px; height: 102px; }
.chain .chip, .inv .chip { width: 114px; height: 90px; padding: 6px 8px; }  /* 高度留給最長的名稱排三行（進化＋稀有詞條） */
.chain .chip .nm, .inv .chip .nm { font-size: 15px; }
.chain .chip .top, .inv .chip .top { font-size: 11px; }
.chain .chip .sk, .inv .chip .sk { font-size: 11px; }
.hgroup { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.socks { display: flex; gap: 5px; justify-content: center; align-items: center; height: 42px; padding: 0 6px; border-radius: 21px; }
.hgroup .slot:not(:empty) + .socks:not(:empty) { background: rgba(255, 209, 102, 0.05); }
.sock { --c: #d4a373; position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--c); color: var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-align: center; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #1d2650, #0b1028 70%); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 35%, transparent);
  cursor: grab; user-select: none; transition: transform .1s; }
.sock:hover { transform: scale(1.12); }
.sock.empty { border: 2px solid rgba(255, 209, 102, 0.3); color: rgba(255, 209, 102, 0.55); background: rgba(10, 14, 31, 0.6); box-shadow: none; font-size: 15px; cursor: pointer; }
.sock.over { box-shadow: 0 0 0 3px #4cc9f0; }
.sock.sel { box-shadow: 0 0 0 3px #fff; }
.sock.idle { opacity: .5; border-color: #ff6b6b; color: #ff9d9d; }
.sock.lvonly { opacity: .6; filter: saturate(.4); }  /* 只升級、沒有效果（吸引插鏡像…） */
.socks .nosock { font-size: 11px; color: #4c5a8f; }
/* 供電（能量不夠）：沒電的晶片、組件變暗（跟放錯位置的紅色不同）；第一個沒電的前面畫斷電線 */
.hgroup.nopow .chip.idle { opacity: .3; filter: grayscale(1) brightness(.75); }
.sock.idle.nopow { opacity: .35; border-color: #5a6690; color: #8d98bd; box-shadow: none; }
.hgroup.cut { position: relative; }
.hgroup.cut::before { content: ''; position: absolute; left: -9px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #ff5d73; box-shadow: 0 0 8px #ff5d73; }
.hgroup.cut::after, .cutmark::after { content: '⚡ 斷電'; position: absolute; font-size: 11px; font-weight: 700; color: #ff8a9a; white-space: nowrap; pointer-events: none; }
.hgroup.cut::after { left: -8px; top: calc(100% - 3px); transform: translateX(-50%); }
.cutmark { position: relative; flex: none; width: 3px; height: 34px; border-radius: 2px; background: #ff5d73; box-shadow: 0 0 8px #ff5d73; }
.cutmark::after { top: calc(100% + 1px); left: 50%; transform: translateX(-50%); }
.chaincount { font-size: 12px; color: #8fa3d9; font-weight: 400; margin-left: 12px; }  /* 跟在「電路」標題後面 */
.chaincount span { font-size: 10px; color: #6a79ad; }
.slot.ag { border: 2px solid #9dff6b; box-shadow: 0 0 12px #9dff6b66; }
.slot.ab { border: 2px solid #ff6b6b; box-shadow: 0 0 12px #ff6b6b66; }
.slot .sattr { position: absolute; bottom: -10px; left: 6px; font-size: 12px; font-weight: 700; padding: 0 4px; background: #070b1a; white-space: nowrap; border-radius: 4px; }
.slot .sattr.good { color: #9dff6b; border: 1px solid #3f6b2a; }
.slot .sattr.bad { color: #ff6b6b; border: 1px solid #6b2a2a; }
.card .sockln { color: #d4a373; }  /* 插座、組件：青銅色 */
.chip .sk { display: block; font-size: 10px; color: #d4a373; line-height: 1; }
.bh-slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.bh-slot { border: 1px solid #2f3f78; border-radius: 6px; padding: 2px 8px; }
.chip { width: 98px; height: 64px; border-radius: 7px; padding: 5px 7px; cursor: grab; display: flex;
  flex-direction: column; justify-content: space-between; border: 1px solid; font-size: 13px; background: #0d1433; }
.chip .top { display: flex; justify-content: space-between; font-size: 10px; opacity: .85; }
.chip .nm { font-weight: 600; font-size: 13px; line-height: 1.15; }
.chip .nm small { font-size: .72em; font-weight: 400; opacity: .8; }
.chip .nm small, .chip .nm .rt { display: inline-block; white-space: nowrap; }  /* 整塊換行：不拆成「（迴旋／Lv3）」「淨／空」 */
.chip.idle { opacity: .4; filter: grayscale(.7); }
.t-source { border-color: #4cc9f0; color: #bdf0ff; box-shadow: inset 0 0 14px rgba(76, 201, 240, .22); }
.t-path { border-color: #5ef2d0; color: #c9fff3; box-shadow: inset 0 0 14px rgba(94, 242, 208, .22); }
.t-chip { border-color: #5ef2d0; color: #c9fff3; box-shadow: inset 0 0 14px rgba(94, 242, 208, .22); }
.t-launch { border-color: #ffb347; color: #ffe6c2; box-shadow: inset 0 0 14px rgba(255, 179, 71, .22); }
.t-impact { border-color: #f78cff; color: #fde0ff; box-shadow: inset 0 0 14px rgba(247, 140, 255, .22); }
.t-body { border-color: #9dff6b; color: #e2ffd2; box-shadow: inset 0 0 14px rgba(157, 255, 107, .2); }
.t-mod { border-color: #b388ff; color: #e3d4ff; box-shadow: inset 0 0 14px rgba(179, 136, 255, .22); }
.t-amp { border-color: #ffd166; color: #fff0c7; box-shadow: inset 0 0 14px rgba(255, 209, 102, .2); }
.t-comp { border-color: #d4a373; color: #f3e1cc; background: linear-gradient(160deg, #2a1d12, #110c08); box-shadow: inset 0 0 14px rgba(212, 163, 115, .25); }  /* 組件：青銅色（金色留給稀有晶片） */
.chip.t-comp { border-radius: 26px; border-style: double; border-width: 3px; }
.chip.rare { border-color: #ffd166; box-shadow: 0 0 10px rgba(255, 209, 102, .55), inset 0 0 12px rgba(255, 209, 102, .18); animation: rareGlow 2.4s ease-in-out infinite; }  /* 稀有晶片 */
.chip.rare .nm::before { content: '★ '; color: #ffd166; }
.t-link { border-color: #2ee6a6; color: #c8ffe9; box-shadow: inset 0 0 14px rgba(46, 230, 166, .2); }
.t-composite { border-color: #ff9f1c; color: #ffe2b8; background: linear-gradient(135deg, #2a1a08, #0d1433);
  box-shadow: inset 0 0 16px rgba(255, 159, 28, .35); }
.t-singularity { border-color: #e0aaff; color: #f3e6ff; background: radial-gradient(circle at 30% 25%, #3a1d5c, #0d1433 70%);
  box-shadow: inset 0 0 18px rgba(224, 170, 255, .4); }
.t-scrap { border-color: #555b66; color: #9aa0aa; cursor: not-allowed;
  background: repeating-linear-gradient(45deg, #1a1c22 0 6px, #23262e 6px 12px); }
.card.t-source, .card.t-chip, .card.t-path, .card.t-launch, .card.t-impact, .card.t-body, .card.t-mod, .card.t-amp, .card.t-link, .card.t-comp, .card.t-composite,
.card.t-singularity, .card.t-scrap { border-width: 1px; border-style: solid; }
/* 卡片大類：外框＋頂端色帶（見 screens.js 的 CARD_CAT） */
.card.cat-chip, .card.cat-comp, .card.cat-mech { padding-top: 0; overflow: hidden; border-width: 2px; border-style: solid; }
.card .cat { margin: 0 -14px; padding: 3px 14px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #070b1a; }
.card.cat-chip { border-color: #4cc9f0; } .cat-chip .cat { background: #4cc9f0; }
.card.cat-comp { border-color: #d4a373; } .cat-comp .cat { background: #d4a373; }
.card.cat-mech { border-color: #cfe8ff; } .cat-mech .cat { background: #cfe8ff; }
.card.picked { outline: 2px solid #e0aaff; outline-offset: 3px; }
/* 晶片的插座數當稀有度：框色 1 灰、2 藍、3 紫（上方的類別色帶不變） */
.card.cat-chip.sk1 { border-color: #6b7aa6; }
.card.cat-chip.sk2 { border-color: #4c8dff; box-shadow: 0 0 10px rgba(76, 141, 255, .35); }
.card.cat-chip.sk3 { border-color: #b388ff; box-shadow: 0 0 16px rgba(179, 136, 255, .55); }
.card.sk2 .sockln { color: #8fb8ff; }
.card.sk3 .sockln { color: #c9a6ff; font-weight: 700; }
/* 稀有晶片：金框、金色色帶、流光掃過、外圈呼吸發光（框色不看插座數，插座數看 ◇ 那行） */
.card.rare { position: relative; border-color: #ffd166 !important; box-shadow: 0 0 18px rgba(255, 209, 102, .55), inset 0 0 22px rgba(255, 209, 102, .12);
  background: linear-gradient(170deg, #1c1606, #070b1a 55%); animation: rareGlow 2.4s ease-in-out infinite; }
.card.rare::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 190, .28) 48%, transparent 60%); background-size: 260% 100%; animation: rareSheen 3.2s linear infinite; }
.card .cat.rareband { background: linear-gradient(90deg, #b8860b, #ffd166, #fff3c4, #ffd166, #b8860b); background-size: 200% 100%; color: #2a1d02; animation: rareSheen 3.2s linear infinite; }
.card .rareln { color: #ffd166; font-size: 12px; font-weight: 700; line-height: 1.5; text-shadow: 0 0 8px rgba(255, 209, 102, .5); }
@keyframes rareGlow { 50% { box-shadow: 0 0 30px rgba(255, 209, 102, .85), inset 0 0 26px rgba(255, 209, 102, .2); } }
@keyframes rareSheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
/* 揭曉：每組卡片一起翻開；稀有那格翻出來是蓋著的（醞釀、不能按），最後才揭開 */
.card.flipin { animation: cardFlip .45s ease-out both; }
.cards.flip-hold .card.flipin { animation-play-state: paused; }  /* 畫面先出來，慢一拍才開始翻（screens.js FLIP_BEAT_MS） */
@keyframes cardFlip { from { transform: perspective(700px) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.card.rare-wait > :not(.rare-veil) { visibility: hidden; }
.card.rare-wait .rare-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 54px; color: #ffd166; z-index: 2;
  background: radial-gradient(circle, rgba(255, 209, 102, .25), transparent 65%); text-shadow: 0 0 24px #ffd166; animation: veilPulse .8s ease-in-out infinite; }
@keyframes veilPulse { 50% { transform: scale(1.18) rotate(20deg); text-shadow: 0 0 40px #fff3c4; } }
.card.rare-pop { animation: rarePop .6s cubic-bezier(.2, 1.6, .4, 1) both, rareGlow 2.4s ease-in-out .6s infinite; }
@keyframes rarePop { from { transform: perspective(700px) rotateY(90deg) scale(.9); filter: brightness(2.2); } to { transform: none; filter: none; } }
.bh-core { width: 120px; height: 120px; margin: 8px auto 0; border-radius: 50%;
  background: radial-gradient(circle, #000 38%, #3a1d5c 55%, #b388ff 62%, transparent 72%);
  box-shadow: 0 0 40px #7b2cbf; animation: bhspin 4s linear infinite; }
.bh-core.fusing { animation: bhspin .35s linear infinite; }
@keyframes bhspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bh-core, .node.reach { animation: none; } }
.result { text-align: center; font-size: 18px; margin-top: 14px; font-weight: 700; }
.dock { display: flex; gap: 12px; margin-top: 12px; align-items: stretch; }
.recycle { width: 150px; border: 2px solid #6b2d2d; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink), inset 0 2px 6px rgba(0, 0, 0, .6); display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 12px; color: #ff8a8a; padding: 8px; background: #140a10; }
.recycle.over { border-color: #ff6b6b; background: #2a0f16; }
.library { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #070b1a; border-radius: 10px; }
.libsec h4 { margin: 0 0 6px; font-size: 13px; }
.libgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.stat { background: #070b1a; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #8fa3d9; }
.stat b { display: block; font-size: 18px; color: #fff; margin-top: 2px; }
.layers { margin-top: 8px; font-size: 12px; color: #ff9dbd; min-height: 16px; }
.passives { font-size: 12px; color: #2ee6a6; margin-top: 8px; min-height: 16px; }
.info { margin-top: 12px; height: 172px; overflow-y: auto; font-size: 13px; color: #c9d4ff; background: #070b1a;
  border-radius: 8px; padding: 10px 12px; line-height: 1.6; }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.bar span { font-size: 12px; color: #6a79ad; margin-right: 4px; }
.hint { font-size: 12px; color: #64749f; margin-top: 10px; }
.chip.sel { outline: 2px solid #fff; outline-offset: 2px; }
.selbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.selbar:empty { display: none; }
/* 說明欄貼在面板底部：沙盒／靶場的晶片庫很長，點電路上的晶片時也看得到說明 */
.infodock { position: sticky; bottom: -1px; z-index: 2; background: #0e1530; margin-top: 12px; padding: 8px;
  border: 1px solid #4cc9f0; border-radius: 10px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .6), 0 0 12px rgba(76, 201, 240, .25); }
.infodock .info { margin-top: 0; height: auto; min-height: 44px; max-height: 120px; }  /* 跟著字數伸縮（往上長，不推動版面） */

/* ===== 觸控操作 ===== */
#touchUI { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touchUI button { pointer-events: auto; position: absolute; border-radius: 50%; font-weight: 700;
  background: rgba(19, 32, 74, .6); border: 2px solid rgba(76, 201, 240, .7); color: #bdf0ff; }
#tDash { width: 76px; height: 76px; font-size: 14px;
  right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
#tEdit { width: 58px; height: 58px; font-size: 12px; border-color: rgba(255, 209, 102, .7) !important; color: #ffe7a8 !important;
  right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(140px + env(safe-area-inset-top, 0px)); }
#tAuto { width: 58px; height: 58px; font-size: 12px; line-height: 1.2; border-color: rgba(157, 255, 107, .8) !important; color: #d4ffbf !important;
  right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(208px + env(safe-area-inset-top, 0px)); }
#tMenu { width: 50px; height: 50px; font-size: 12px; border-color: rgba(143, 163, 217, .7) !important; color: #cfd8f5 !important;
  right: calc(22px + env(safe-area-inset-right, 0px)); top: calc(276px + env(safe-area-inset-top, 0px)); }
#tAuto.off { border-color: rgba(106, 121, 173, .7) !important; color: #8fa3d9 !important; background: rgba(10, 14, 30, .6) !important; }

/* ===== 電路總覽 ===== */
#codex { position: fixed; inset: 0; background: rgba(3, 5, 15, .88); display: flex;
  align-items: center; justify-content: center; backdrop-filter: blur(3px); z-index: 20; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.tabs button.on { border-color: var(--energy); color: #bdf0ff; background: var(--metal-lo); box-shadow: 0 0 0 2px var(--ink), inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 10px rgba(76, 201, 240, .3); }
.codex-sec { margin-top: 16px; }
.codex-sec h3 { margin: 0 0 8px; }
.rules { display: grid; gap: 8px; font-size: 13px; line-height: 1.7; color: #c9d4ff; }
.rules > div { background: #070b1a; border-radius: 8px; padding: 10px 12px; }
.rules b { color: #fff; }
.tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.tree > div { background: #070b1a; border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: #c9d4ff; }
.tree .leaf { margin-top: 6px; padding: 6px 8px; background: #0b1330; border: 1px solid #1c2748; border-radius: 6px; }
.tree .wt-stage { font-size: 11px; color: #8fa3d9; letter-spacing: 1px; margin: 8px 0 4px; }
.tree .wt-stage:first-child { margin-top: 0; }
.slotrow { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; background: #070b1a;
  border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: #c9d4ff; }
.slotrow .no { font-size: 11px; color: #6a79ad; font-variant-numeric: tabular-nums; }
.slotrow.idle { opacity: .5; }
@media (max-width: 700px) { .tree { grid-template-columns: 1fr; } }

/* ===== 結算：本局傷害總計 ===== */
.summary { text-align: left; max-width: 560px; margin: 22px auto 4px; background: #070b1a; border-radius: 10px; padding: 16px 18px; }
.sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sum-head span { font-size: 13px; color: #8fa3d9; letter-spacing: 1px; }
.sum-head b { font-size: 34px; color: #fff; }
.sum-rows { display: grid; grid-template-columns: minmax(96px, auto) 1fr 92px; gap: 6px 10px; align-items: center; font-size: 12px; }
.sum-lab { color: #c9d4ff; white-space: nowrap; }
.refresh-corner #refreshBtn.glow { border-color: #ffd166; color: #ffd166; animation: glowPulse 1.2s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 4px rgba(255, 209, 102, 0.4); } 50% { box-shadow: 0 0 16px rgba(255, 209, 102, 0.9); } }
.sum-sub { color: #8fa3d9; font-size: 11px; margin: 8px 0 4px; }
.sum-lab i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.sum-track { height: 10px; background: #111a3a; border-radius: 0 4px 4px 0; }
.sum-track div { height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; }
.sum-val { text-align: right; color: #eef2ff; font-variant-numeric: tabular-nums; }
.sum-val span { color: #6a79ad; margin-left: 6px; display: inline-block; width: 30px; }
.sum-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.sum-tile { background: #0d1433; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #8fa3d9; }
.sum-tile b { display: block; font-size: 17px; color: #fff; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sum-note { font-size: 11px; color: #6a79ad; margin-top: 10px; }
@media (max-width: 700px) { .sum-tiles { grid-template-columns: repeat(2, 1fr); } .sum-rows { grid-template-columns: auto 1fr 84px; } }

/* ===== 機制檢查 ===== */
.mech { display: grid; gap: 6px; }
.mech-row { display: grid; grid-template-columns: 26px minmax(140px, 1.2fr) 1.3fr 1.3fr; gap: 10px; align-items: start;
  background: #070b1a; border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.55; color: #c9d4ff; }
.mech-row .st { font-weight: 700; font-size: 14px; }
.mech-row .st.ok { color: #0ca30c; } .mech-row .st.ng { color: #ff6b6b; }
.mech-row .ex { color: #8fa3d9; }
.mech-head { font-size: 11px; color: #6a79ad; background: transparent; padding-top: 0; padding-bottom: 0; }
@media (max-width: 700px) { .mech-row { grid-template-columns: 22px 1fr; } .mech-row .ex, .mech-row .got { grid-column: 2; } .mech-head { display: none; } }

/* ===== 數值圖表（深色圖表面、色盲安全配色，已驗證） ===== */
.viz { --surface: #070b1a; --ink: #eef2ff; --ink-2: #c9d4ff; --muted: #8fa3d9; --grid: #182244; --axis: #2c3a66;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300;
  position: relative; background: var(--surface); border-radius: 10px; padding: 14px 14px 10px; margin-top: 10px; }
.viz h4 { font-size: 14px; color: var(--ink); margin: 0 0 2px; text-wrap: balance; }
.viz .cap { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.viz svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.viz svg text { font-family: inherit; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin: 4px 0 6px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.legend button { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; cursor: pointer; box-shadow: none; text-shadow: none; }
.legend button:hover:not(:disabled) { background: none; box-shadow: none; }
.legend button:hover, .legend button:focus-visible { border-color: var(--axis); outline: none; }
.legend button.off { opacity: .35; }
.legend button i { width: 9px; height: 9px; border-radius: 50%; }
.legend .hint { color: var(--muted); align-self: center; }
.viz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.viz-tabs button { font: inherit; font-size: 12px; color: var(--ink-2); background: none; border: 1px solid var(--axis); border-radius: 6px; padding: 3px 10px; cursor: pointer; box-shadow: none; text-shadow: none; }
.viz-tabs button.on { background: var(--axis); color: var(--ink); }
.viz-tabs button:focus-visible { outline: 2px solid var(--muted); outline-offset: 1px; }
.viz-tip { position: absolute; pointer-events: none; background: #111a3a; border: 1px solid #2c3a66; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--ink-2); line-height: 1.6; min-width: 140px; z-index: 2; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.viz-tip b { color: var(--ink); }
.viz-tip .v { float: right; margin-left: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 44px; gap: 4px 10px; align-items: center; font-size: 12px; }
.bars .grp { grid-column: 1 / -1; font-size: 12px; font-weight: 700; margin-top: 8px; color: var(--ink); }
.bars .grp i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.bars .lab { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars .track { height: 12px; }
.bars .bfill { height: 12px; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 2px; }
.bars .bfill:hover { filter: brightness(1.25); }
.bars .val { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
/* 武器升級 DPS：每把武器一張卡，照升級樹排 */
.wt-card { border: 1px solid #1c2748; border-left: 3px solid var(--wc); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.wt-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.wt-head > span:first-child { font-weight: 700; color: var(--ink); }
.wt-head i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wc); margin-right: 7px; }
.wt-head b { color: var(--ink); font-size: 15px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.wt-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wt-path { background: #0b1330; border-radius: 8px; padding: 8px 10px 10px; }
.wt-stage { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin: 8px 0 4px; }
.wt-stage:first-child { margin-top: 0; }
.wt-finals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wt-finals .wt-node { background: #070b1a; border: 1px solid #1c2748; border-radius: 6px; padding: 6px 8px; }
.wt-node { font-size: 12px; min-width: 0; }
.wt-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wt-name { color: var(--ink); font-size: 12px; }
.wt-num { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-num em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 5px; }
.wt-track { height: 6px; background: #111a3a; border-radius: 0 3px 3px 0; margin-top: 3px; }
.wt-track div { height: 6px; background: var(--wc); border-radius: 0 3px 3px 0; min-width: 2px; }
.wt-desc { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 3px; }
@media (max-width: 700px) { .wt-paths { grid-template-columns: 1fr; } }
.viz details { margin-top: 8px; font-size: 12px; color: var(--muted); }
.viz details summary { cursor: pointer; }
.viz .tbl { overflow-x: auto; margin-top: 6px; }
.viz table { border-collapse: collapse; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.viz th, .viz td { padding: 3px 10px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
.viz th:first-child, .viz td:first-child { text-align: left; }

#screen, #editor, #codex { padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px); }
@media (max-width: 700px) {
  .scr, .panel { padding: 16px 14px; }
  .title-wrap h1 { font-size: 40px; }
  .refresh-corner { position: static; margin-bottom: 8px; }  /* 手機：放在標題上面，不蓋住標題 */
  .title-wrap .en { letter-spacing: 4px; }
  .map { height: min(440px, 58vh); }
  .node { width: 40px; height: 40px; font-size: 16px; }
  .node small { font-size: 8px; }
  .card { width: 100%; }
  .slot, .chain .slot, .inv .slot { width: 84px; height: 64px; }
  .chip, .chain .chip, .inv .chip { width: 76px; height: 54px; padding: 4px 5px; }
  .chip .nm, .chain .chip .nm, .inv .chip .nm { font-size: 12px; }
  .chip .top, .chain .chip .top, .inv .chip .top { font-size: 9px; }
  .arrow { width: 14px; font-size: 14px; }
  .sock { width: 28px; height: 28px; font-size: 9px; }
  .socks { height: 34px; }
  .chain .arrow { margin-top: 24px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dock { flex-direction: column; }
  .recycle { width: 100%; min-height: 56px; }
}

/* 卡片精簡／詳細說明：平常只顯示 .brief，按 Shift 切換（body.detail）改顯示 .det */
.card .det { display: none; }
body.detail .card .det { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .det .ds { flex: none; }  /* 詳細說明照內容排，空白留在按鈕上方 */
.card button { margin-top: auto; }  /* 按鈕貼在卡片底部：同一排的卡片按鈕高度一樣（展開詳細說明時也是） */
.cards.left { justify-content: flex-start; }
/* 局外成長：鎖住的卡片、總覽列、結算的新達成 */
.card.locked { filter: grayscale(0.85); opacity: .55; }
.card.locked img { opacity: .5; }
.ulk-bar { height: 5px; background: #141c3a; border-radius: 3px; overflow: hidden; }
.ulk-bar div { height: 100%; background: #ffd166; }
.ulk-tiles { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: #9aa6c4; }
.ulk-tiles b { color: #fff; }
.ulk-fresh { margin: 10px auto; padding: 8px 14px; border: 1px solid #ffd166; border-radius: 4px; color: #ffd166; background: linear-gradient(180deg, #241d0b, #15110a);
  box-shadow: 0 0 0 2px var(--ink), inset 1px 1px 0 rgba(255, 255, 255, .08), 0 0 14px rgba(255, 209, 102, .2); display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 720px; }
.ulk-fresh b { color: #fff; }
body.detail .card .brief { display: none; }
.detail-hint { position: fixed; right: 16px; bottom: 12px; font-size: 12px; color: #8fa3d8; opacity: .85; }
.detail-hint button { font-size: 12px; padding: 3px 10px; margin-left: 4px; }
body.detail .detail-hint button { background: #1c3a6e; }

/* 靶場按鈕列：畫面上方中間（1～4 標靶、5 實戰、R、T） */
#rangeBar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; align-items: center;
  background: rgba(7, 11, 26, .75); border: 1px solid #22305e; border-radius: 10px; padding: 6px 8px; }
#rangeBar button { font-size: 12px; padding: 4px 10px; }
#rangeBar { flex-wrap: wrap; justify-content: center; max-width: 96vw; }
#rangeBar .brk { flex-basis: 100%; height: 0; }
#rangeBar .lbl { font-size: 12px; color: #8fa3d9; }
#rangeBar select { font-size: 12px; padding: 3px 4px; background: #0d1530; color: #cfe8ff; border: 1px solid #2a3a7a; border-radius: 6px; }
#rangeBar button.on { background: #1c3a6e; border-color: #4cc9f0; color: #fff; }
#rangeBar button.live.on { background: #5a1f2e; border-color: #ff4d6d; }
#rangeBar .sep { width: 1px; height: 18px; background: #2a3a7a; margin: 0 2px; }

/* 電路編輯器：機體分頁的零件、模組、飛船、武器卡片，和倉庫格都靠左上 */
#edShip .cards { justify-content: flex-start; align-items: flex-start; }
.inv { align-items: flex-start; justify-content: flex-start; }

/* 拖曳或選取時：放了會沒作用（或放不進去）的位置變灰，放得進去的亮起來 */
.slot.nogo, .sock.nogo { opacity: .25; filter: grayscale(1); }
.slot.go { box-shadow: 0 0 0 2px #4cc9f0, 0 0 10px #4cc9f066; }
.slot[data-merge] { box-shadow: 0 0 0 2px #ffd166, 0 0 12px #ffd16688; }  /* 拖過去會合成 */
.slot[data-merge]::after { content: attr(data-merge); position: absolute; top: -9px; right: 6px; font-size: 11px; font-weight: 700;
  color: #ffd166; background: #070b1a; padding: 0 5px; white-space: nowrap; pointer-events: none; }
.sock.go { box-shadow: 0 0 0 3px #4cc9f0; }
/* 數值圖示（assets/ui/stat_*.png）：好處綠、代價紅 */
.si { width: 1.3em; height: 1.3em; vertical-align: -0.32em; margin-right: 2px; }
.sv { white-space: nowrap; font-weight: 600; margin-right: 10px; }
.sv.good { color: #9dff6b; } .sv.bad { color: #ff8f8f; }
.fxl { margin: 4px 0; line-height: 1.7; }
.fxl b { margin-right: 8px; color: #dfe6ff; }
.trl { font-size: 12px; color: #9aa6c4; margin: 4px 0; line-height: 1.5; opacity: .75; }
.trl b { margin-right: 8px; white-space: nowrap; }
.trl.on { opacity: 1; color: #c9d4ff; }
.statl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #dfe6ff; margin: 4px 0; }
.statl.big { font-size: 15px; }
.pips { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.tag { font-size: 11px; margin-left: 8px; padding: 1px 6px; border-radius: 6px; border: 1px solid currentColor; vertical-align: 2px; }
.tag.boss { color: #ff4d6d; }
.card > .ttl:first-child { margin-top: 6px; }  /* 沒有分類標籤的卡片：標題別貼著上框 */
.statl .sv { margin-right: 0; }
.card .statl { gap: 3px 9px; font-size: 12px; }

/* ===== 基地（主畫面）：場景在 WebGL（gl_hub.js），這裡是蓋在上面的 DOM：上方列、說明卡、操作說明（.hub-ui，不擋滑鼠）；門後的面板（.scr.base） ===== */
#screen.hub { background: transparent; pointer-events: none; align-items: stretch; justify-content: stretch; }
.hub-ui { position: relative; width: 100%; height: 100%; }
.hub-ui button, .hub-ui .ulk-fresh { pointer-events: auto; }
.hub-top { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hub-logo h1 { display: inline; font-size: 30px; color: #bdf0ff; letter-spacing: 3px; text-shadow: 0 0 18px #4cc9f0, 0 2px 0 #03050c; }
.hub-logo .en { color: #4cc9f0; letter-spacing: 6px; font-size: 12px; margin-left: 12px; }
.hub-logo .ulk-tiles { margin-top: 6px; text-shadow: 0 1px 2px #03050c; }
.base-sys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.base-sys button { padding: 6px 12px; font-size: 13px; }
.base-sys #refreshBtn:not(:empty) { border-color: #4cc9f0; color: #4cc9f0; }
.hub-ui .ulk-fresh { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; }
.hub-info { position: absolute; right: 18px; bottom: 18px; width: 340px; display: none; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 4px;
  background: linear-gradient(var(--energy), var(--energy)) left top / 18px 2px no-repeat, linear-gradient(var(--energy), var(--energy)) left top / 2px 18px no-repeat,
    linear-gradient(180deg, rgba(16, 23, 47, .96), rgba(10, 15, 34, .96)); border: 1px solid var(--edge);
  box-shadow: 0 0 0 2px var(--ink), inset 1px 1px 0 rgba(255, 255, 255, .07), 0 0 24px rgba(76, 201, 240, .15); }
.hub-info.on { display: flex; }
.hub-info .ttl { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.hub-info .ttl .ty { margin-left: 10px; font-size: 11px; letter-spacing: 3px; color: #6a79ad; }
.hub-info .ds { font-size: 13px; color: #c9d4ff; line-height: 1.7; }
.hub-info .ty { font-size: 12px; color: #8fa3d9; }
.hub-press { font-size: 13px; color: #bdf0ff; }
.hub-press b { display: inline-block; min-width: 20px; padding: 1px 6px; margin-right: 4px; border: 1px solid #bdf0ff; border-radius: 4px; text-align: center; }
.scr.base.compact { height: auto; max-width: 680px; }  /* 發射台、設定：小視窗 */
/* 設定頁 */
.set-body h3 { margin: 16px 0 8px; }
.set-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; font-size: 14px; color: #c9d4ff; padding: 6px 0; cursor: pointer; }
.set-row b { min-width: 44px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.set-row input[type=range] { accent-color: var(--energy); width: 100%; }
.set-row input[type=checkbox] { accent-color: var(--energy); width: 18px; height: 18px; justify-self: start; }
.set-row.chk { grid-template-columns: 150px 18px 1fr; }  /* 勾選框：說明緊跟在框後面 */
.set-keys .key { color: #bdf0ff; font-weight: 600; }
.set-body .row { margin-top: 6px; }
.hub-ui .hub-coop { gap: 8px; padding: 6px 12px; font-size: 13px; white-space: nowrap; flex-wrap: nowrap; }
.hub-coop button { padding: 3px 10px; font-size: 12px; }
.hub-coop .me { text-decoration: underline; text-underline-offset: 3px; }
.hub-coop .code { letter-spacing: .2em; color: #ffd166; }
.hub-coop .ok { color: #9dff6b; } .hub-coop .ty { color: #8fa3d9; font-size: 12px; }
.hg-go .ok { color: #9dff6b; font-size: 14px; }
.scr.base { height: min(860px, 94vh); display: flex; flex-direction: column; gap: 10px; }
.base-body { flex: 1; overflow: auto; padding-right: 4px; }
.base-body h3 { margin: 14px 0 0; font-size: 15px; color: #c9d4ff; }
.base-body .cards { margin: 10px 0; }
i.new { position: absolute; top: -7px; right: -7px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 9px;
  background: #ffd166; color: #1a1205; box-shadow: 0 0 10px rgba(255, 209, 102, .7); pointer-events: none; z-index: 1; }
.card { position: relative; }
/* 說明卡、發射台 */
.hg-desc .det { display: block; }  /* 機庫：一句話＋完整的能力說明都顯示 */
.hg-desc .brief { color: #fff; margin-bottom: 6px; }
.hg-launch { border-top: 1px solid #22305e; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hg-launch .ty { font-size: 12px; color: #8fa3d9; line-height: 1.7; }
.hg-launch .ds { font-size: 13px; color: #c9d4ff; }
.hg-chs { display: flex; gap: 8px; flex-wrap: wrap; }
.hg-ch { font-size: 13px; padding: 6px 14px; }
.hg-ch.on { border-color: var(--energy); color: #bdf0ff; background: var(--metal-lo); box-shadow: 0 0 0 2px var(--ink), inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 10px rgba(76, 201, 240, .3); }
.hg-ch .ok, .st-row .ok { color: #9dff6b; }
.hg-go { margin-top: 4px; }
/* 戰績 */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.st-box { background: #070b1a; border: 1px solid #22305e; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.st-box h3 { margin: 0 0 4px; }
.st-wide { grid-column: 1 / -1; }
.st-row { display: flex; justify-content: space-between; font-size: 13px; color: #c9d4ff; }
.st-row b { color: #8fa3d9; font-weight: 600; }
.st-bar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; color: #c9d4ff; }
.st-bar > div { height: 8px; background: #141c3a; border-radius: 4px; overflow: hidden; }
.st-bar > div > div { height: 100%; background: #4cc9f0; }
.st-bar b { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 內框（嵌在面板裡的凹槽）：數值格、資訊框、航圖底板、結算、規則、戰績…… 統一同一種（凹下去、上緣暗、下緣一點亮） ===== */
.map, .nleg, .rec, .stat, .info, .rules > div, .tree > div, .slotrow, .summary, .sum-tile, .library, .st-box, .wt-path, .wt-finals .wt-node, .mech-row {
  background: var(--inset); box-shadow: var(--inset-sh); border-radius: 4px; }
.sum-track { background: #05070f; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }


/* 新手教學的泡泡框（ui/bubble.js）：金屬底、深色描邊、金色邊和光；箭頭（::after）指著卡片、倉庫格或戰場上的位置，--ax = 箭頭離左邊多遠 */
/* bb-spot：指著的東西那一塊亮著，其他地方用它的大陰影壓暗（點得穿：stay 的時候要能按到底下的按鈕） */
.bb-spot { position: fixed; z-index: 60; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(3, 5, 12, .72), 0 0 16px 4px rgba(255, 209, 102, .55); }
.bb-spot.soft { box-shadow: 0 0 16px 4px rgba(255, 209, 102, .7); }  /* 不壓暗（要從倉庫拖東西過來）：只留亮框 */
.bb-cover { position: fixed; inset: 0; z-index: 61; cursor: pointer; }
.bubble { position: fixed; z-index: 62; width: 260px; padding: 12px 14px; pointer-events: none;
  background: linear-gradient(180deg, #1d2a52 0%, #0c1330 100%); border: 1px solid #ffd166; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(255, 209, 102, .35), inset 1px 1px 0 rgba(255, 255, 255, .12); }
.bubble::after { content: ''; position: absolute; left: calc(var(--ax) - 8px); bottom: -9px; width: 14px; height: 14px; transform: rotate(45deg);
  background: #0c1330; border-right: 1px solid #ffd166; border-bottom: 1px solid #ffd166; }
.bubble.below::after { bottom: auto; top: -9px; background: #1d2a52; border: 0; border-left: 1px solid #ffd166; border-top: 1px solid #ffd166; }
.bubble .bb-ttl { color: #ffd166; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.bubble .bb-txt { color: #e6ecff; font-size: 13px; line-height: 1.6; }
.bubble .bb-next { color: #8fa3d9; font-size: 11px; margin-top: 6px; text-align: right; }