/* ════════════════════════════════════════════════
   DCS WORLD 教學 — 疊在 /blog/blog.css 之上（導覽列、頁尾、配色變數都沿用它）
   機型類別各有一個主色：--accent / --rgb 由 .t-* 這組 class 設定
   ════════════════════════════════════════════════ */
.t-fighter { --accent: #00cfff; --rgb: 0,207,255; }
.t-attack  { --accent: #f5a623; --rgb: 245,166,35; }
.t-trainer { --accent: #b48cff; --rgb: 180,140,255; }
.t-prop    { --accent: #e6c97e; --rgb: 230,201,126; }
.t-heli    { --accent: #39ff8e; --rgb: 57,255,142; }

.g-main {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 2rem) 5rem;
}
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-lang {
  background: transparent; border: 1px solid var(--glass-border); color: #c8d8e8;
  padding: 4px 8px; border-radius: 4px; font-family: 'Rajdhani', sans-serif;
  font-weight: 500; font-size: 0.92rem; cursor: pointer; outline: none;
}
.g-lang option { background: var(--panel-dark); color: #c8d8e8; }
:focus-visible { outline: 2px solid var(--hud-blue); outline-offset: 2px; }

/* ─── 麵包屑 ─── */
.g-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: 'Rajdhani', sans-serif; font-size: 0.92rem; letter-spacing: 0.04em; color: #6f8296;
  margin-bottom: 1.4rem;
}
.g-crumbs a { color: #8ea3b8; text-decoration: none; }
.g-crumbs a:hover { color: var(--hud-blue); }
.g-crumbs i { font-style: normal; opacity: 0.5; }
.g-crumbs [aria-current] { color: #dbe8f4; }

/* ─── 樞紐頁：標題區 ─── */
.g-hero { text-align: center; padding: clamp(1rem, 4vw, 2.2rem) 0 1.6rem; }
.g-hero h1, .g-craft-head h1 {
  font-family: 'Orbitron', sans-serif; font-weight: 900; color: #fff; margin: 0 0 0.7rem;
  text-shadow: 0 0 34px rgba(0,207,255,0.35);
}
.g-hero h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); letter-spacing: 0.04em; }
.g-lede { margin: 0 auto; max-width: 56ch; color: #8ea3b8; font-size: 1.04rem; }

/* ─── 搜尋框 ─── */
.g-search {
  position: relative; display: flex; align-items: center;
  background: rgba(4,6,10,0.72); border: 1px solid var(--glass-border);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color 0.2s, background 0.2s;
}
.g-search:focus-within { border-color: var(--hud-blue); background: rgba(0,207,255,0.07); }
.g-search::before {
  content: ''; flex: none; width: 1.05rem; height: 1.05rem; margin-left: 1rem;
  border: 2px solid #5c7a94; border-radius: 50%; position: relative;
  box-shadow: 0.55rem 0.55rem 0 -0.42rem #5c7a94;     /* 把手 */
}
.g-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff;
  font: inherit; font-size: 1rem; padding: 0.8rem 0.9rem; line-height: 1.4;
}
.g-search input::placeholder { color: #5c7a94; }
.g-search input::-webkit-search-cancel-button { filter: invert(0.8); }
.g-search kbd {
  margin-right: 0.8rem; padding: 0.05rem 0.5rem; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  color: #6f8296; border: 1px solid var(--glass-border); border-radius: 4px;
}
.g-search:focus-within kbd { display: none; }
.g-search--hero { max-width: 680px; margin: 1.8rem auto 1.1rem; }
.g-search--hero input { font-size: 1.1rem; padding: 1rem 0.9rem; }

/* ─── 篩選 chip ─── */
.g-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.g-chip {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em;
  cursor: pointer; padding: 0.35rem 0.95rem; color: #b6c8d8; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 999px; transition: all 0.2s;
}
.g-chip b { margin-left: 0.45rem; font-weight: 600; color: #6f8296; }
.g-chip:hover { border-color: var(--hud-blue); color: #fff; }
.g-chip[aria-pressed="true"] { background: var(--hud-blue); border-color: var(--hud-blue); color: #000; }
.g-chip[aria-pressed="true"] b { color: rgba(0,0,0,0.6); }

.g-section-title {
  display: flex; align-items: baseline; gap: 0.8rem; margin: 2rem 0 1rem;
  font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.12em; color: #dbe8f4;
}
.g-section-title small { font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; letter-spacing: 0.06em; color: #6f8296; }

/* ─── 機型方塊 ─── */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.g-tile {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  min-height: 264px; padding: 1.15rem 1.2rem 1rem; overflow: hidden;
  text-decoration: none; color: #c8d8e8;
  background: linear-gradient(160deg, rgba(var(--rgb),0.09), rgba(4,6,10,0.78) 62%);
  border: 1px solid rgba(var(--rgb),0.26);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transform: perspective(900px) rotateX(calc(var(--ry, 0) * -7deg)) rotateY(calc(var(--rx, 0) * 7deg));
  transition: transform 0.18s ease-out, border-color 0.2s, background 0.2s;
  animation: g-rise 0.5s both calc(var(--i, 0) * 35ms);
}
.g-tile[hidden] { display: none; }
/* 掃描線：hover 時由上往下掃過；游標光暈：跟著指標位置 */
.g-tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.3) * 100%), rgba(var(--rgb),0.2), transparent 65%);
  transition: opacity 0.25s;
}
.g-tile::after {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 38%; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(var(--rgb),0.16), transparent);
}
.g-tile:hover, .g-tile:focus-visible { border-color: var(--accent); background: linear-gradient(160deg, rgba(var(--rgb),0.15), rgba(4,6,10,0.82) 62%); }
.g-tile:hover::before, .g-tile:focus-visible::before { opacity: 1; }
.g-tile:hover::after { opacity: 1; animation: g-scan 1.3s linear infinite; }
.g-tile-no { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(var(--rgb),0.7); }
.g-tile-full-badge {
  position: absolute; top: 1.05rem; left: 3rem; padding: 0 0.45rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em;
  color: #000; background: var(--accent);
}
.g-glyph { color: var(--accent); fill-opacity: 0.16; }

/* ─── 機型照片（縮圖與標題區）─── */
.g-tile-photo {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10;
  margin: -1.15rem -1.2rem 0.8rem; background: rgba(var(--rgb),0.05);
  border-bottom: 1px solid rgba(var(--rgb),0.3);
}
.g-tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.82); transition: transform 0.5s, filter 0.3s; }
.g-tile-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,6,10,0.55), transparent 40%, rgba(4,6,10,0.7)); pointer-events: none; }
.g-tile-photo img.is-wide { object-fit: contain; }
.g-tile:hover .g-tile-photo img { transform: scale(1.06); filter: saturate(1.05) brightness(0.95); }
.g-tile.is-stub .g-tile-photo img { filter: saturate(0.5) brightness(0.7); }
.g-tile-photo .g-tile-no { position: absolute; top: 0.8rem; left: 1.2rem; z-index: 1; }
.g-tile-photo .g-tile-full-badge { top: 0.75rem; left: 3.1rem; z-index: 1; }
.g-tile-photo > .g-glyph { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); }
.g-tile:hover .g-tile-photo > .g-glyph { transform: translate(-50%, -52%) scale(1.06); }
.g-craft-head.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.g-craft-photo { margin: 0; }
.g-craft-photo img { display: block; width: 100%; height: auto; border: 1px solid rgba(var(--rgb),0.35);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.g-craft-photo figcaption, .g-credits li { font-size: 0.78rem; line-height: 1.5; color: #6f8296; }
.g-craft-photo figcaption { margin-top: 0.4rem; text-align: right; }
.g-craft-photo a, .g-credits a { color: #8ea3b8; }
.g-credits { margin-top: 1.4rem; font-size: 0.9rem; color: #8ea3b8; }
.g-credits summary { cursor: pointer; }
.g-credits ul { columns: 2 320px; padding-left: 1.2rem; }
.g-credits li b { color: #b6c8d8; font-weight: 600; }
.g-tile .g-glyph { transition: transform 0.3s, fill-opacity 0.3s; }
.g-tile:hover .g-glyph { fill-opacity: 0.3; }
.g-tile-name {
  margin: 0; font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.5rem;
  line-height: 1.15; color: #fff; letter-spacing: 0.03em; overflow-wrap: anywhere;
}
.g-tile-full { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.05em; color: var(--accent); }
.g-tile-tag {
  flex: 1; font-size: 0.9rem; line-height: 1.6; color: #8ea3b8; margin-top: 0.2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-tile-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.g-tile-meta em, .g-tags li {
  font-style: normal; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.04em; padding: 0 0.55rem; color: #b6c8d8;
  border: 1px solid rgba(var(--rgb, 0,207,255),0.3); border-radius: 3px;
}
.g-tile-meta em.g-badge, .g-tags li.g-badge { color: var(--hud-amber); border-color: rgba(245,166,35,0.45); }
.g-tile-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px dashed rgba(var(--rgb),0.25);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.06em; font-size: 0.92rem;
}
.g-tile-go { margin-left: auto; color: var(--accent); }
.g-tile.is-stub { background: linear-gradient(160deg, rgba(var(--rgb),0.04), rgba(4,6,10,0.7) 62%); border-color: rgba(var(--rgb),0.15); }
.g-tile.is-stub .g-glyph { fill-opacity: 0.08; }
.g-tile.is-stub .g-tile-go { color: #6f8296; }

.g-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.g-pips i { width: 7px; height: 14px; background: rgba(255,255,255,0.1); transform: skewX(-18deg); }
.g-pips i.on { background: var(--accent, var(--hud-blue)); box-shadow: 0 0 6px rgba(var(--rgb, 0,207,255),0.55); }

.g-empty { padding: 2rem 1rem; text-align: center; color: #6f8296; }
.g-empty a { color: var(--hud-blue); }

/* ─── 搜尋結果 ─── */
.g-results[hidden] { display: none; }
.g-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0.8rem; color: #8ea3b8; }
.g-results-head b { color: #fff; font-family: 'Orbitron', sans-serif; letter-spacing: 0.08em; }
.g-clear { background: none; border: 0; color: var(--hud-blue); cursor: pointer; font: inherit; text-decoration: underline; }
.g-result-craft { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; margin-bottom: 1.2rem; }
.g-result-craft a {
  display: block; padding: 0.7rem 1rem; text-decoration: none; color: #c8d8e8;
  background: var(--glass); border: 1px solid var(--glass-border); border-left: 3px solid var(--hud-amber);
}
.g-result-craft a:hover { background: rgba(0,207,255,0.11); }
.g-result-craft b { display: block; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 1rem; }
.g-result-craft span { font-size: 0.86rem; color: #8ea3b8; }
.g-hit {
  display: block; padding: 0.85rem 1.1rem; margin-bottom: 0.6rem; text-decoration: none; color: #c8d8e8;
  background: var(--glass); border: 1px solid var(--glass-border); border-left: 3px solid var(--hud-blue);
  transition: background 0.2s, transform 0.2s;
}
.g-hit:hover, .g-hit:focus-visible { background: rgba(0,207,255,0.11); transform: translateX(4px); }
.g-hit-meta { display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--hud-blue); }
.g-hit b { display: block; color: #fff; }
.g-hit p { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.6; color: #8ea3b8; }
mark { background: rgba(245,166,35,0.3); color: #fff; border-radius: 2px; padding: 0 1px; }

/* ─── 「資料庫怎麼分」說明 ─── */
.g-how { margin-top: 3rem; padding: 1.4rem 1.6rem; background: var(--glass); border: 1px solid var(--glass-border); }
.g-how .g-section-title { margin-top: 0; }
.g-how p { margin: 0.5rem 0; color: #8ea3b8; }
.g-how a { color: var(--hud-blue); }
.g-how-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.8rem 0; counter-reset: c; }
.g-how-list li { counter-increment: c; padding: 0.2rem 0.8rem; border: 1px solid var(--glass-border); font-family: 'Rajdhani', sans-serif; font-weight: 600; color: #dbe8f4; }
.g-how-list li::before { content: counter(c, decimal-leading-zero) ' '; color: var(--hud-blue); font-family: 'Orbitron', sans-serif; font-size: 0.72rem; margin-right: 0.3rem; }

/* ─── 機型頁：標題 ─── */
.g-craft-head { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: 0.6rem 0 1.6rem; }
.g-craft-head .g-glyph { flex: none; width: clamp(72px, 12vw, 120px); height: auto; fill-opacity: 0.2; filter: drop-shadow(0 0 14px rgba(var(--rgb),0.4)); }
.g-craft-head h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.g-craft-head .g-lede { margin: 0; max-width: 62ch; }
.g-craft .archive-kicker { color: var(--accent); }
.g-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.g-tags li { padding: 0.05rem 0.65rem; }
.g-tags .g-diff { display: inline-flex; align-items: center; gap: 0.5rem; border-color: rgba(var(--rgb),0.3); }
.g-stub { margin-bottom: 1.4rem; }

/* ─── 機型頁：側欄＋內容 ─── */
.g-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.g-side { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.g-count { min-height: 1.4em; margin: 0; font-size: 0.88rem; color: #8ea3b8; }
.g-toc { display: flex; flex-direction: column; border-left: 1px solid var(--glass-border); }
.g-toc a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; margin-left: -1px;
  text-decoration: none; color: #8ea3b8; border-left: 2px solid transparent;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.g-toc a i { font-style: normal; font-family: 'Orbitron', sans-serif; font-size: 0.68rem; color: #5c7a94; }
.g-toc a b { margin-left: auto; font-weight: 600; font-size: 0.82rem; color: #5c7a94; }
.g-toc a:hover { color: #fff; background: var(--glass); }
.g-toc a.is-active { color: var(--accent); border-left-color: var(--accent); background: rgba(var(--rgb),0.07); }
.g-toc a.is-active i, .g-toc a.is-active b { color: var(--accent); }
.g-toc a.is-dim { opacity: 0.35; }

/* ─── 內容：分類與條目 ─── */
.g-cat { scroll-margin-top: 5rem; margin-bottom: 2.6rem; }
.g-cat[hidden], .g-entry[hidden] { display: none; }
.g-cat > h2 {
  display: flex; align-items: baseline; gap: 0.8rem; margin: 0 0 1rem; padding-bottom: 0.6rem;
  font-family: 'Noto Sans TC', sans-serif; font-weight: 700; font-size: 1.45rem; color: #fff;
  border-bottom: 1px solid var(--glass-border);
}
.g-cat > h2 i { font-style: normal; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.15em; color: var(--accent); }
.g-entry {
  position: relative; scroll-margin-top: 5rem; margin-bottom: 1rem; padding: 1.15rem 1.4rem 0.9rem;
  background: var(--glass); border: 1px solid var(--glass-border); border-left: 3px solid var(--accent);
}
.g-entry:target { background: rgba(var(--rgb),0.1); border-color: var(--accent); }
.g-entry h3 { margin: 0 0 0.6rem; font-size: 1.12rem; color: #fff; }
.g-anchor { position: absolute; left: 0.55rem; color: var(--accent); text-decoration: none; opacity: 0; transition: opacity 0.2s; }
.g-entry:hover .g-anchor, .g-anchor:focus-visible { opacity: 0.8; }
.g-entry p { margin: 0 0 0.7rem; }
.g-entry ul, .g-entry ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
.g-entry li { margin-bottom: 0.35rem; }
.g-entry li::marker { color: var(--accent); }
.g-entry strong { color: #fff; }
.g-entry a { color: var(--hud-blue); }
kbd {
  display: inline-block; padding: 0 0.45em; margin: 0 0.1em; font-family: 'Rajdhani', 'Noto Sans TC', monospace;
  font-weight: 700; font-size: 0.92em; line-height: 1.5; color: #fff; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22); border-bottom-width: 2px; border-radius: 4px;
}
.g-tablewrap { overflow-x: auto; margin: 0 0 0.8rem; }
.g-entry table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.g-entry th, .g-entry td { padding: 0.5rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(0,207,255,0.12); }
.g-entry th { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; border-bottom-color: var(--glass-border); }
.g-entry td:first-child { white-space: nowrap; color: #dbe8f4; }
.g-entry tr:last-child td { border-bottom: 0; }

.g-note { display: flex; gap: 0.8rem; align-items: baseline; margin: 0.3rem 0 0.8rem; padding: 0.6rem 0.9rem; border-left: 3px solid; }
.g-note p { margin: 0; font-size: 0.95rem; }
.g-note-tag { flex: none; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; }
.g-note a { color: var(--hud-blue); }
.g-tip { background: rgba(57,255,142,0.07); border-color: var(--hud-green); }
.g-tip .g-note-tag { color: var(--hud-green); }
.g-warn { background: rgba(245,166,35,0.08); border-color: var(--hud-amber); }
.g-warn .g-note-tag { color: var(--hud-amber); }

.g-links { list-style: none; padding: 0 !important; display: grid; gap: 0.5rem; }
.g-links li { margin: 0; }
.g-links a { display: flex; flex-direction: column; padding: 0.6rem 0.9rem; text-decoration: none; border: 1px solid var(--glass-border); transition: background 0.2s, border-color 0.2s; }
.g-links a:hover { background: rgba(0,207,255,0.09); border-color: var(--hud-blue); }
.g-links b { color: #fff; }
.g-links span { font-size: 0.86rem; color: #8ea3b8; }
/* 中文資源：琥珀色邊框呼吸發光＋光帶掃過，一眼找到中文教學 */
.g-links .g-zh a { position: relative; overflow: hidden; border-color: var(--hud-amber); background: rgba(245,166,35,0.07); animation: g-zh-glow 2.4s ease-in-out infinite; }
.g-links .g-zh a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(245,166,35,0.22) 50%, transparent 65%); transform: translateX(-100%); animation: g-zh-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.g-zh-tag { font-style: normal; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; color: #1a1200; background: var(--hud-amber); padding: 0.05rem 0.4rem; margin-right: 0.5rem; }
@keyframes g-zh-glow { 0%, 100% { box-shadow: 0 0 0 rgba(245,166,35,0); } 50% { box-shadow: 0 0 12px rgba(245,166,35,0.45); } }
@keyframes g-zh-sweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .g-links .g-zh a, .g-links .g-zh a::after { animation: none; } }

/* ─── 上一台／下一台 ─── */
.g-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: stretch; margin-top: 3rem; }
.g-pg {
  display: flex; flex-direction: column; justify-content: center; padding: 0.8rem 1.1rem; text-decoration: none; color: #fff;
  font-family: 'Orbitron', sans-serif; border: 1px solid var(--glass-border); background: var(--glass); transition: background 0.2s, border-color 0.2s;
}
.g-pg small { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.08em; color: #6f8296; }
.g-pg:hover { background: rgba(0,207,255,0.1); border-color: var(--hud-blue); }
.g-pg.is-next { text-align: right; }
.g-pg.is-hub { align-items: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--hud-blue); }
.g-pg.is-off { visibility: hidden; }
.g-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; width: 2.6rem; height: 2.6rem; cursor: pointer;
  color: var(--hud-blue); background: rgba(4,6,10,0.9); border: 1px solid var(--glass-border); font-size: 1.2rem;
}
.g-top:hover { background: var(--hud-blue); color: #000; }
.g-top[hidden] { display: none; }

@keyframes g-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes g-scan { to { top: 110%; } }

/* ─── 窄螢幕：側欄變成橫向捲動的分類列 ─── */
@media (max-width: 900px) {
  .g-craft-head.has-photo { grid-template-columns: minmax(0, 1fr); }
  .g-layout { grid-template-columns: minmax(0, 1fr); }
  .g-side { position: static; }
  .g-toc { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--glass-border); scrollbar-width: thin; }
  .g-toc a { flex: none; margin-left: 0; border-left: 0; border-bottom: 2px solid transparent; padding: 0.6rem 0.8rem; }
  .g-toc a.is-active { border-bottom-color: var(--accent); }
  .g-toc a b { display: none; }
}
@media (max-width: 560px) {
  .g-craft-head { flex-direction: column; align-items: flex-start; }
  .g-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .g-tile { min-height: 232px; padding: 0.9rem 0.85rem 0.8rem; }
  .g-tile-photo { margin: -0.9rem -0.85rem 0.6rem; aspect-ratio: 4 / 3; }
  .g-tile-photo .g-tile-no { left: 0.85rem; }
  .g-tile-photo .g-tile-full-badge { left: 2.6rem; }
  .g-tile-name { font-size: 1.12rem; }
  .g-tile-tag { font-size: 0.82rem; }
  .g-entry { padding: 1rem 1rem 0.7rem; }
  .g-pager { grid-template-columns: 1fr 1fr; }
  .g-pg.is-hub { grid-column: 1 / -1; order: 3; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .g-tile { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .g-tile { animation: none; }
  .g-tile:hover::after { animation: none; }
}

/* Markdown 內文的圖片：一張或一列並排，點圖開原尺寸 */
.g-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.8rem; margin: 0.3rem 0 0.8rem; }
.g-figs figure { margin: 0; }
.g-figs img { display: block; width: 100%; height: auto; border: 1px solid rgba(var(--rgb),0.35); }
.g-figs figcaption { margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.5; color: #8ea3b8; text-align: center; }

/* 出處標示 */
.g-credit { margin: 0 0 1rem; }
.g-credit p { font-size: 0.88rem; line-height: 1.6; }
.g-credit a, .g-srcnote a { color: var(--hud-blue); }
.g-srcnote { margin: 1.5rem 0 0.8rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--hud-green); font-size: 0.85rem; line-height: 1.65; color: #8ea3b8; }
.g-srcnote b { color: #c5d3e0; }

/* ════════ 武器掛載配置器（仿 ME PAINT AND LOADOUT；邏輯在 loadout.js）════════
   頁面上只有入口（按鈕＋預設掛載一覽），真正的配置器在彈出的寬視窗裡。 */
.g-lo { margin: 1.4rem 0 0; padding: 1rem 1.1rem; background: rgba(4,6,10,0.72); border: 1px solid var(--glass-border); }
.g-lo-title { margin: 0 0 0.3rem; font-family: 'Orbitron', sans-serif; font-size: 1.05rem; color: #fff; letter-spacing: 0.04em; }
.g-lo-note, .g-lo-credit { margin: 0 0 0.8rem; font-size: 0.88rem; color: #7f93a8; }
.g-lo-credit { margin: 0.9rem 0 0; font-size: 0.78rem; }
.g-lo-open {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.65rem 1.5rem; cursor: pointer;
  font: 700 1rem 'Rajdhani', sans-serif; letter-spacing: 0.08em; color: #04080c; background: var(--accent); border: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: filter 0.2s, transform 0.2s;
}
.g-lo-open:hover { filter: brightness(1.15); transform: translateY(-1px); }
.g-lo-static { margin: 0; font-size: 0.85rem; color: #8ea3b8; }
.g-lo-static summary { cursor: pointer; padding: 0.2rem 0; }
.g-lo-scroll { overflow-x: auto; margin-top: 0.5rem; }
.g-lo-static table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.g-lo-static caption { text-align: left; color: #8ea3b8; padding: 0 0 0.4rem; }
.g-lo-static th, .g-lo-static td { border: 1px solid rgba(255,255,255,0.1); padding: 0.3rem 0.45rem; vertical-align: top; }
.g-lo-static thead th { color: var(--accent); font-family: 'Rajdhani', sans-serif; }

/* ── 彈出視窗 ── */
html.g-lo-lock { overflow: hidden; }
.g-lo-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 2vw, 1.4rem);
  background: rgba(2,4,8,0.82); backdrop-filter: blur(3px); animation: g-lo-fade 0.18s ease-out; }
.g-lo-modal[hidden] { display: none; }
@keyframes g-lo-fade { from { opacity: 0; } }
.g-lo-win { position: relative; display: flex; flex-direction: column; width: min(1870px, 100%); height: min(100%, 980px);
  background: #070c12; border: 1px solid rgba(var(--rgb),0.55); box-shadow: 0 0 60px rgba(var(--rgb),0.14); color: #dbe8f4;
  font-family: 'Rajdhani', sans-serif; animation: g-lo-rise 0.22s ease-out; }
@keyframes g-lo-rise { from { transform: translateY(14px); opacity: 0; } }
.g-lo-head { flex: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.12); background: rgba(var(--rgb),0.06); }
.g-lo-tag { font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent); }
.g-lo-name { font-size: 1.05rem; font-weight: 700; color: #fff; margin-right: auto; }
.g-lo-lbl { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.88rem; color: #8ea3b8; }
.g-lo-x { all: unset; cursor: pointer; width: 2.2rem; height: 2.2rem; text-align: center; line-height: 2.1rem; font-size: 1.6rem; color: #8ea3b8; border: 1px solid transparent; }
.g-lo-x:hover, .g-lo-x:focus-visible { color: #fff; border-color: var(--accent); }
.g-lo-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0.9rem; gap: 0.9rem; overflow: auto; }
.g-lo-foot { flex: none; font-size: 0.76rem; color: #6f8296; }

.g-lo-modal select, .g-lo-modal input[type=number], .g-lo-modal input[type=text], .g-lo-modal textarea {
  background: rgba(255,255,255,0.06); color: #e6f0fa; border: 1px solid var(--glass-border); padding: 0.3rem 0.5rem; font: inherit; font-size: 0.92rem; min-width: 0;
}
.g-lo-modal select option { background: #0b1118; }
.g-lo-modal input[type=number] { width: 5.4rem; text-align: right; }
.g-lo-btn { background: rgba(var(--rgb),0.12); border: 1px solid rgba(var(--rgb),0.5); color: #e6f0fa; padding: 0.32rem 0.85rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.g-lo-btn:hover { background: rgba(var(--rgb),0.28); }


/* 武器圖示是深色線稿＋透明底：深色介面上反相成淺色線稿，不用白底方塊 */
.g-lo-ico, .g-lo-mico, .g-lo-sico { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.g-lo-keep { filter: none !important; }

.g-lo-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.2rem 0; color: #8ea3b8; }
.g-lo-row b { color: #fff; font-variant-numeric: tabular-nums; }
.g-lo-row.is-total b { color: var(--accent); }
.g-lo-row.is-over b { color: #ff5d5d; }
.g-lo-col { flex-direction: column; align-items: stretch; }
.g-lo-meter { height: 5px; background: rgba(255,255,255,0.1); margin: 0.3rem 0 0.7rem; }
.g-lo-meter i { display: block; height: 100%; background: var(--accent); transition: width 0.25s; }
.g-lo-meter.is-over i { background: #ff5d5d; }

.g-lo-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.85rem; }
.g-lo-table th, .g-lo-table td { border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0; text-align: center; }
.g-lo-table thead th { position: sticky; top: 0; z-index: 3; color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 0.72rem; padding: 0.4rem 0.2rem; background: #0d1a24; min-width: 5.2rem; height: 1.95rem; box-sizing: border-box; }
.g-lo-table thead th:first-child { left: 0; z-index: 4; }
.g-lo-table thead th.is-hot, .g-lo-table td.is-hot { background: rgba(var(--rgb),0.2); }
.g-lo-table tbody th { text-align: left; padding: 0.3rem 0.6rem; min-width: 24rem; white-space: nowrap; color: #c8d8e8; font-weight: 600; font-size: 0.85rem; position: sticky; left: 0; background: #0a1017; z-index: 1; }
.g-lo-table .g-lo-mrow th, .g-lo-table .g-lo-mrow td { position: sticky; top: 1.95rem; z-index: 2; background: #0a1822; }
.g-lo-table .g-lo-mrow th { left: 0; z-index: 3; color: var(--accent); }
.g-lo-pname { all: unset; cursor: pointer; display: block; color: #c8d8e8; white-space: nowrap; }
.g-lo-pname:hover, .g-lo-pname:focus-visible { color: var(--accent); }
.g-lo-prow:hover td { background: rgba(255,255,255,0.03); }
.g-lo-cell { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 4rem; padding: 3px; cursor: pointer; color: #dbe8f4; }
.g-lo-cell:disabled { cursor: default; }
.g-lo-cell:focus-visible { outline: 2px solid var(--hud-blue, #00cfff); outline-offset: -2px; }
.g-lo-mrow .g-lo-cell:not(.has):hover { background: rgba(var(--rgb),0.18); }
.g-lo-ico { width: 40px; height: 40px; object-fit: contain; }
.g-lo-cname { font-size: 0.64rem; line-height: 1.1; max-width: 5.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fb3c6; }
.g-lo-cell.flash { animation: g-lo-flash 0.9s ease-out; }
@keyframes g-lo-flash { 0% { box-shadow: inset 0 0 0 3px var(--accent), 0 0 14px var(--accent); } 100% { box-shadow: none; } }
.g-lo-none { padding: 0.8rem; color: #6f8296; }

.g-lo-menu { position: fixed; z-index: 20; width: 300px; overflow-y: auto; background: #0b1118; border: 1px solid var(--accent); box-shadow: 0 10px 34px rgba(0,0,0,0.7); padding: 0.25rem 0; animation: g-lo-pop 0.14s ease-out; }
@keyframes g-lo-pop { from { opacity: 0; transform: translateY(-4px); } }
.g-lo-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,0.14); margin: 0.25rem 0; }
.g-lo-mi { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.3rem 0.7rem; cursor: pointer; color: #dbe8f4; font-size: 0.9rem; min-height: 2.1rem; }
.g-lo-mi span { flex: 1; min-width: 0; }
.g-lo-mi:hover, .g-lo-mi:focus-visible { background: rgba(var(--rgb),0.22); }
.g-lo-mi.is-cur { background: rgba(var(--rgb),0.34); color: #fff; }
.g-lo-cat i { font-style: normal; transition: transform 0.15s; }
.g-lo-grp.is-open > .g-lo-cat i { transform: rotate(90deg); }
.g-lo-cat.is-sel { color: var(--accent); }
.g-lo-sub { background: rgba(255,255,255,0.04); }
.g-lo-sub .g-lo-mi { padding-left: 1.1rem; }
.g-lo-sub .g-lo-sub .g-lo-mi { padding-left: 1.7rem; }
.g-lo-mico { width: 30px; height: 30px; object-fit: contain; flex: none; }
.g-lo-rm { color: #ff9b9b; }

.g-lo-dlg { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.g-lo-dlg[hidden] { display: none; }
.g-lo-dbox { background: #0b1118; border: 1px solid var(--accent); padding: 1rem; width: min(40rem, 100%); max-height: 100%; overflow: auto; }
.g-lo-dbox h4 { margin: 0 0 0.4rem; color: #fff; }
.g-lo-dbox p { font-size: 0.88rem; color: #8ea3b8; margin: 0 0 0.6rem; }
.g-lo-dbox textarea { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: 0.78rem; margin: 0.5rem 0; }
.g-lo-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.g-lo-toast { position: absolute; left: 50%; bottom: 1.2rem; transform: translate(-50%, 2rem); opacity: 0; pointer-events: none; background: var(--accent); color: #000; padding: 0.4rem 1rem; font-weight: 700; transition: all 0.25s; z-index: 40; }
.g-lo-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .g-lo-modal { padding: 0; }
  .g-lo-win { height: 100%; }
  .g-lo-menu.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh; border-width: 1px 0 0; animation-name: g-lo-sheet; }
  @keyframes g-lo-sheet { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .g-lo-modal, .g-lo-modal *, .g-lo-open { animation: none !important; transition: none !important; }
}

/* ── 版面：上方圖區（固定高度）→ 數值面板（橫向一排）→ 掛載表（吃剩下的高度）── */
.g-lo-view { flex: none; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.7rem; height: clamp(180px, 30vh, 330px); }
.g-lo-view.no-pic { grid-template-columns: 1fr; }
.g-lo-pic { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.1);
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--rgb),0.09), transparent 72%), rgba(255,255,255,0.015); }
.g-lo-pich { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 10px; }
.g-lo-pich img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--rgb),0.25)); }
.g-lo-pic figcaption { flex: none; font-size: 0.74rem; letter-spacing: 0.08em; color: #6f8296; padding: 0.2rem 0.7rem; border-top: 1px solid rgba(255,255,255,0.06); }

.g-lo-panel { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.7rem; padding: 0; border: 0; background: none; font-size: 1rem; }
.g-lo-tile { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025); padding: 0.45rem 0.8rem 0.6rem; min-width: 0; }
.g-lo-tile h4 { margin: 0 0 0.3rem; font: 700 0.7rem 'Orbitron', sans-serif; letter-spacing: 0.12em; color: var(--accent); }
.g-lo-tile.is-fuel { grid-column: span 2; }
.g-lo-tile input[type=range] { width: 100%; accent-color: var(--accent); margin: 0.25rem 0 0.35rem; height: 1.2rem; cursor: pointer; }
.g-lo-fuelrow { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center; justify-content: space-between; }
.g-lo-in { display: inline-flex; align-items: center; gap: 0.4rem; color: #8ea3b8; font-size: 0.9rem; }
.g-lo-in em { font-style: normal; }
.g-lo-modal .g-lo-in input[type=number] { width: 5.6rem; }
.g-lo-big { font: 700 1.7rem 'Rajdhani', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.g-lo-bigpct { margin-left: 0.7rem; font: 700 1.2rem 'Rajdhani', sans-serif; color: var(--accent); }
.g-lo-bigrow { display: flex; align-items: baseline; }
.g-lo-tile.is-over .g-lo-big, .g-lo-tile.is-over .g-lo-bigpct { color: #ff5d5d; }
.g-lo-tile.is-over .g-lo-meter i { background: #ff5d5d; }
.g-lo-tile .g-lo-meter { margin: 0.35rem 0 0; }

.g-lo-tablewrap { flex: 1 1 20rem; min-height: 12rem; }
.g-lo-prow.is-active th { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: rgba(var(--rgb),0.12); }
.g-lo-prow.is-active td { background: rgba(var(--rgb),0.07); }
.g-lo-mrow .g-lo-cell:not(.has)::before { content: '+'; font-size: 1.5rem; line-height: 1; color: rgba(var(--rgb),0.4); }
.g-lo-mrow .g-lo-cell:not(.has):hover::before { color: var(--accent); }

@media (max-width: 980px) {
  .g-lo-tile.is-fuel { grid-column: auto; }
}
@media (max-width: 700px) {
  .g-lo-view { grid-template-columns: 1fr; height: auto; }
  .g-lo-pich { height: 36vh; flex: none; }
  .g-lo-sum { max-height: 40vh; }
  .g-lo-sumlist li { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .g-lo-sst, .g-lo-sw { grid-column: 2 / span 2; text-align: left; }
  .g-lo-sw { margin-top: -0.3rem; }
}

/* ── 目前掛載摘要 ── */
.g-lo-sum { min-height: 0; overflow: auto; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 0.45rem 0.8rem 0.6rem; }
.g-lo-sum h4 { margin: 0 0 0.35rem; font: 700 0.7rem 'Orbitron', sans-serif; letter-spacing: 0.12em; color: var(--accent); }
.g-lo-empty { margin: 1.2rem 0; color: #6f8296; font-size: 0.92rem; line-height: 1.6; }
.g-lo-sumlist { list-style: none; margin: 0; padding: 0; }
.g-lo-sumlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 2.6rem minmax(3rem, 7rem) 5.2rem; gap: 0.6rem; align-items: center; padding: 0.22rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; }
.g-lo-sumlist li.is-hot { background: rgba(var(--rgb),0.14); }
.g-lo-sico { width: 30px; height: 30px; object-fit: contain; }
.g-lo-sname { color: #dbe8f4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-lo-sn { color: var(--accent); font-variant-numeric: tabular-nums; }
.g-lo-sst { color: #8ea3b8; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-lo-sw { color: #c8d8e8; text-align: right; font-variant-numeric: tabular-nums; }

/* 日文版：內文改用 Noto Sans JP（漢字字形與假名都跟繁中版的 Noto Sans TC 不同），TC 當後備 */
html:lang(ja) body, html:lang(ja) .g-main input, html:lang(ja) .g-lo-win { font-family: 'Noto Sans JP', 'Noto Sans TC', sans-serif; }
html:lang(ja) .g-entry p, html:lang(ja) .g-entry li { line-break: strict; }
/* 日文選單標籤比繁中長，不能一個字一個字折行：不換行、縮小間距 */
html:lang(ja) .blog-nav ul { gap: clamp(0.5rem, 1.1vw, 1.1rem); font-size: 0.92rem; letter-spacing: 0; }
html:lang(ja) .blog-nav li, html:lang(ja) .blog-nav a { white-space: nowrap; }

/* ════════════════════════════════════════════════
   武器資料庫（/dcs-guide/weapons/，由 build_weapons.py 渲染）。沿用上面的磚塊／頁首／條目樣式，這裡只補差異
   武器大類各一個主色（--accent / --rgb）
   ════════════════════════════════════════════════ */
.w-aam { --accent: #00cfff; --rgb: 0,207,255; }
.w-sam { --accent: #39ff8e; --rgb: 57,255,142; }
.w-agm { --accent: #f5a623; --rgb: 245,166,35; }
.w-asm { --accent: #4d8dff; --rgb: 77,141,255; }
.w-atgm { --accent: #e6c97e; --rgb: 230,201,126; }
.w-gbomb { --accent: #b48cff; --rgb: 180,140,255; }
.w-bomb { --accent: #ff7a59; --rgb: 255,122,89; }
.w-rocket { --accent: #ff5fa2; --rgb: 255,95,162; }
.w-misc { --accent: #8ea3b8; --rgb: 142,163,184; }
/* 地面與海上單位資料庫（/dcs-guide/units/，build_units.py）：沿用上面的版型，只多十個類別色與 chips 的群組標籤 */
.w-tank { --accent: #f5a623; --rgb: 245,166,35; }
.w-ifv { --accent: #e6c97e; --rgb: 230,201,126; }
.w-arty { --accent: #ff7a59; --rgb: 255,122,89; }
.w-ad { --accent: #39ff8e; --rgb: 57,255,142; }
.w-log { --accent: #8ea3b8; --rgb: 142,163,184; }
.w-pers { --accent: #b48cff; --rgb: 180,140,255; }
.w-cv { --accent: #00cfff; --rgb: 0,207,255; }
.w-ship { --accent: #4d8dff; --rgb: 77,141,255; }
.w-sub { --accent: #2fd1c5; --rgb: 47,209,197; }
.w-aux { --accent: #6f8296; --rgb: 111,130,150; }
.g-chip-group { align-self: center; padding: 0 0.2rem 0 0.6rem; font: 600 0.78rem 'Rajdhani', sans-serif; letter-spacing: 0.14em; color: #6f8296; }
.g-wp-body code { font-family: ui-monospace, Consolas, monospace; color: var(--accent); }

.g-wp-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.4rem; margin-top: 1.1rem; }
.g-wp-filters label { display: flex; align-items: center; gap: 0.5rem; font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.06em; color: #8ea3b8; }
.g-wp-filters select {
  padding: 0.38rem 0.7rem; background: rgba(255,255,255,0.05); color: #dbe8f4; border: 1px solid var(--glass-border);
  font: inherit; letter-spacing: 0; cursor: pointer;
}
.g-wp-filters select:focus-visible { outline: 0; border-color: var(--hud-blue); }
.g-wp-filters select:disabled { opacity: 0.4; cursor: not-allowed; }
.g-wp-filters option { background: var(--panel-dark); color: #c8d8e8; }
.g-wp-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.g-wt { min-height: 0; }
.g-wt-ico { display: flex; align-items: center; justify-content: center; height: 88px; margin-bottom: 0.3rem; border: 1px solid rgba(var(--rgb),0.18); background: rgba(var(--rgb),0.06); }
/* ME 圖示是深色線稿（給任務編輯器的亮底用），反相成淺色；帶色的（keep）維持原色 */
.g-wp-img { width: 64px; height: 64px; object-fit: contain; filter: invert(1) hue-rotate(180deg) brightness(1.05); transition: transform 0.3s; }
.g-wp-img.keep { filter: none; }
.g-wp-glyph { color: var(--accent); fill-opacity: 0.16; transition: transform 0.3s; }
.g-wt:hover .g-wp-img, .g-wt:hover .g-wp-glyph { transform: scale(1.08); }
.g-wt-stats { display: flex; gap: 1.1rem; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); min-height: 2.6rem; }
.g-wt-stats span { font-size: 0.72rem; letter-spacing: 0.06em; color: #6f8296; }
.g-wt-stats b { display: block; font-family: 'Rajdhani', sans-serif; font-size: 1rem; letter-spacing: 0.03em; color: #e3eef8; }
.g-wt .g-tile-name { font-size: 1.05rem; overflow-wrap: anywhere; }
.g-wpage .g-wp-bigico { flex: none; display: grid; place-items: center; width: clamp(88px, 14vw, 132px); aspect-ratio: 1; border: 1px solid rgba(var(--rgb),0.35); background: rgba(var(--rgb),0.08); }
.g-wpage .g-wp-bigico .g-wp-img, .g-wpage .g-wp-bigico .g-wp-glyph { width: 76%; height: 76%; }
.g-wp-body { display: grid; gap: 1rem; max-width: 880px; }
.g-wp-body .g-entry td small { display: block; font-size: 0.74rem; color: #6f8296; }
.g-wp-body .g-entry td:first-child { min-width: 9rem; }
.g-wp-tag { margin-left: 0.5rem; padding: 0.05rem 0.55rem; font: 600 0.72rem 'Rajdhani', sans-serif; letter-spacing: 0.08em; vertical-align: middle; color: var(--hud-amber); border: 1px solid rgba(245,166,35,0.45); }
.g-wp-orig { margin-top: 0.8rem; color: #8ea3b8; }
.g-wp-orig summary { cursor: pointer; color: var(--hud-blue); }
.g-wp-orig div { margin-top: 0.6rem; }
.g-entry ul.g-wp-crafts, .g-entry ul.g-wp-carriers, .g-entry ul.g-wp-related { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding-left: 0; }
.g-wp-crafts li, .g-wp-carriers li, .g-wp-related li { margin: 0; }
.g-wp-crafts a, .g-wp-related a, .g-wp-carriers li {
  display: inline-block; padding: 0.15rem 0.75rem; border: 1px solid rgba(var(--rgb),0.35); background: rgba(var(--rgb),0.07);
  color: #dbe8f4; text-decoration: none; font-size: 0.92rem;
}
.g-wp-carriers li { border-color: var(--glass-border); background: transparent; color: #8ea3b8; }
.g-wp-crafts a:hover, .g-wp-related a:hover { background: rgba(var(--rgb),0.2); color: #fff; }
.g-wpage .g-srcnote { margin-top: 1.6rem; }
.g-wp .g-srcnote { margin-top: 2.4rem; }
/* 機型教學首頁／機型頁通往武器資料庫的入口 */
.g-wp-banner { display: flex; align-items: center; gap: 0.9rem; margin: 1.3rem auto 0; max-width: 680px; padding: 0.7rem 1.1rem; text-align: left; text-decoration: none; color: #c8d8e8; background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.4); }
.g-wp-banner + .g-wp-banner { margin-top: 0.6rem; }
.g-wp-banner:hover { background: rgba(245,166,35,0.14); border-color: var(--hud-amber); }
.g-wp-banner b { color: var(--hud-amber); font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; letter-spacing: 0.06em; }
.g-wp-banner span { flex: 1; font-size: 0.92rem; color: #8ea3b8; }
.g-wp-banner i { font-style: normal; color: var(--hud-amber); }
.g-wp-ac { margin-top: 1.2rem; }
.g-wp-ac h4 { margin: 0 0 0.5rem; font: 700 0.78rem 'Orbitron', sans-serif; letter-spacing: 0.14em; color: var(--accent); }
.g-wp-ac ul { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.g-wp-ac a { display: inline-block; padding: 0.1rem 0.65rem; font-size: 0.88rem; color: #dbe8f4; text-decoration: none; border: 1px solid rgba(var(--rgb),0.35); background: rgba(var(--rgb),0.07); }
.g-wp-ac a:hover { background: rgba(var(--rgb),0.2); color: #fff; }
@media (max-width: 700px) {
  .g-wp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
  .g-wt { padding: 0.8rem 0.8rem 0.7rem; }
  .g-wt-ico { height: 72px; }
  .g-wp-filters label { width: 100%; justify-content: space-between; }
  .g-wp-filters select { flex: 1; max-width: 62%; }
}
.g-wp-ac p { margin: 0.8rem 0 0.35rem; font-size: 0.82rem; letter-spacing: 0.06em; color: #8ea3b8; }
.g-wp-ac h4 a { padding: 0; border: 0; background: none; color: var(--hud-blue); text-decoration: underline; font-size: inherit; }

/* 武器真實照片（guide-data/weapons/photos；沒有經過驗證的照片就維持 ME 圖示／剪影） */
.g-wt-ico.has-photo { padding: 0; height: 120px; overflow: hidden; background: #060a10; }
.g-wp-photo { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.9) brightness(0.92); transition: transform 0.3s, filter 0.3s; }
.g-wt:hover .g-wp-photo { filter: none; }
.g-wp-photo-fig { flex: none; margin: 0; width: clamp(220px, 34vw, 420px); }
.g-wp-photo-fig .g-wp-photo { height: auto; max-height: 300px; border: 1px solid rgba(var(--rgb),0.35); transform: none; }
.g-wp-photo-fig figcaption { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.5; color: #6f8296; }
.g-wp-photo-fig figcaption a { color: #8ea3b8; }
.g-wpage .g-craft-head { align-items: flex-start; }