/* =====================================================================
   Rune Paths (js/runes.js) — แถวเลือกรูนใต้สกิลในหน้าต่างสกิล
   ใช้ตัวแปรสีของหน้าต่าง (--ink / --line / --cy …) → เข้ากับธีมมืดและกระดาษครีม (ui_art.css) เอง ไม่ทับสไตล์หน้าต่างเดิม
   ===================================================================== */
.rn-help { font-size: 11.5px; line-height: 1.45; color: var(--ink-dim, #b8c4d8); padding: 6px 10px; border-radius: 10px;
  border: 1px dashed var(--line-2, rgba(160, 200, 255, .3)); background: var(--fill, rgba(120, 160, 255, .06)); }
.rn-help b { color: var(--cy, #6ff3ff); letter-spacing: .5px; }
.rn-help .rn-busy-t { font-style: normal; font-weight: 700; color: var(--bad, #ff6a6a); }

.rn-row { margin: -2px 0 4px 26px; padding: 5px 7px 7px; border-left: 2px solid var(--line-2, rgba(160, 200, 255, .3)); border-radius: 0 0 10px 10px;
  background: var(--fill, rgba(120, 160, 255, .05)); }
.rn-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; margin-bottom: 4px; min-width: 0; }
.rn-tier { font-weight: 800; letter-spacing: 1px; color: var(--cy, #6ff3ff); flex: none; font-family: Cinzel, Kanit, serif; }
.rn-state { color: var(--ink-dim, #b8c4d8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rn-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 6px 8px; border-radius: 9px; cursor: pointer; min-width: 0;
  font: inherit; color: var(--ink, #e8eef8); background: var(--glass, rgba(14, 26, 46, .55)); border: 1px solid var(--line, rgba(160, 200, 255, .2));
  transition: border-color .15s, background .15s, box-shadow .15s; }
.rn-opt:hover:not([disabled]) { border-color: var(--line-hi, #6ff3ff); }
.rn-opt.on { border-color: var(--cy, #6ff3ff); background: var(--glass-2, rgba(60, 140, 200, .2)); box-shadow: var(--glow-soft, 0 0 0 2px rgba(111, 243, 255, .35)); }
.rn-opt[disabled] { cursor: default; opacity: .45; filter: grayscale(.6); }
.rn-row.busy .rn-opt:not(.on) { opacity: .7; }
.rn-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rn-g { font-style: normal; font-size: 15px; line-height: 1; width: 18px; text-align: center; flex: none; text-shadow: 0 0 6px currentColor; }
.rn-n { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rn-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 0 6px; border-radius: 8px; letter-spacing: .3px; line-height: 15px;
  border: 1px solid currentColor; opacity: .9; vertical-align: 1px; }
.rn-tag.single { color: #e07a3a; }
.rn-tag.pack { color: #3a9ad0; }
.rn-tag.both { color: #6aa85a; }
.rn-d { font-size: 11px; line-height: 1.4; color: var(--ink-dim, #b8c4d8); }
.rn-opt.on .rn-d { color: var(--ink, #e8eef8); }
.rn-opt.on .rn-n::after { content: ' ✓'; color: var(--cy, #6ff3ff); }

@media (max-width: 520px) {
  .rn-row { margin-left: 10px; }
  .rn-opts { grid-template-columns: 1fr; }
}
.rn-tip { border-top: 1px dashed var(--line-2, rgba(160, 200, 255, .3)); padding-top: 4px; margin-top: 4px; }
.rn-tip b { color: var(--cy, #6ff3ff); }