/* Runes, rune verses and keepsakes: rune verse and rune item marks, the forge's rune upgrade and socket warnings, the
   Rune Verse Codex and the rune, rune verse and keepsake tooltip lines. The satchel under the backpack is in
   backpack.css. Linked after town.css. */

/* ---- items: runewords, runes and charms in grids ---- */
.gi.rw, .cw-gear-slot.rw, .forge-slot.rw { box-shadow: inset 0 0 0 1px rgba(238,170,60,.8), inset 0 0 12px rgba(238,170,60,.35); background: rgba(150,100,30,.22); }
.gi.rune-mid { background: rgba(60,110,200,.12); }
.gi.rune-high { background: radial-gradient(circle, rgba(255,120,60,.22), rgba(40,20,10,0) 70%); }
.sock.full.rune { border-radius: 3px; }

/* ---- tooltips ---- */
.tt-runes { margin: -1px 0 2px; font: italic 600 14.5px Georgia, serif; letter-spacing: .04em; }
.tt-rune-note { margin: 5px 0 2px; color: #f3c95b; font: 700 13px Cinzel, Georgia, serif; }
.tt-socket.rune { color: #f0d9a8; }
.tt-socket.rune::before { border-radius: 2px; }
.tt-charm { margin-top: 6px; font: 600 14px Georgia, serif; }
.tt-charm.on { color: #8fe08f; }
.tt-charm.off { color: #ff8a6a; }
.tt-lore { margin-top: 5px; font-style: italic; }
.tt-rw-hint { color: #eeaa3c; font: 700 14px Cinzel, Georgia, serif; }
.tt-rw-miss { margin-top: 4px; color: #d9a46a; font: italic 600 13.5px Georgia, serif; }

/* ---- the Ember Forge: rune upgrades and socket warnings ---- */
.vendor-tabs.four button { font-size: 14px; }
.fr-preview { display: flex; align-items: center; gap: 3px; margin: 3px 0 4px; }
.fr-preview b { color: #f0cf88; font: 700 15px Georgia, serif; padding: 0 2px; }
.fr-stone { width: 30px; height: 30px; }
.fr-stone.result { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgba(255,190,90,.8)); }
.fr-warn { color: #ff9a7a; }
.forge-recipe.destroys { border-color: rgba(220,90,60,.6); }

/* ---- Rune Verse Codex ---- */
.codex { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
body.character-paired #panelL:has(.codex), body.single-panel #panelL:has(.codex) { display: flex; flex-direction: column; overflow: hidden; }
body:not(.mobile) #panelL > .panel-scroll:has(.codex) { display: flex; flex-direction: column; overflow: hidden; }
body:not(.mobile).character-paired #panelL:has(.codex), body:not(.mobile).single-panel #panelL:has(.codex) { overflow: visible; } /* (the close medallion stands on the frame: ui-windows.css) */
#panelL .codex { flex: 1; }
.cx-intro { margin: 0; color: #c9bba0; font-size: 13.5px; line-height: 1.3; }
.cx-held { display: flex; flex-wrap: wrap; gap: 3px; }
.cx-have, .cx-rune { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border: 1px solid #4a3a28; border-radius: 3px; background: #15100a; color: #7c705e; font: 600 12.5px Cinzel, Georgia, serif; }
.cx-have b { color: #fff1c8; font: 600 11px Georgia, serif; }
.cx-have.got.t-low, .cx-rune.got.t-low { border-color: #b9b2a4; color: #e2dccf; }
.cx-have.got.t-mid, .cx-rune.got.t-mid { border-color: #4f8fe8; color: #8fbfff; }
.cx-have.got.t-high, .cx-rune.got.t-high { border-color: #ff6b40; color: #ff8a66; box-shadow: 0 0 5px rgba(255,107,64,.45); }
.cx-filters { display: flex; flex-wrap: wrap; gap: 4px; }
#panelL .cx-filters button { margin: 0; min-height: 0 !important; padding: 3px 8px !important; border: 1px solid rgba(168,122,59,.6) !important; border-image: none !important; background: #20160d !important; color: #e8d4a0; font: 13px Georgia, serif; text-shadow: none; }
#panelL .cx-filters button[aria-pressed="true"] { border-color: #eeaa3c !important; background: #4a2c12 !important; color: #fff; }
.cx-filters b { color: #8fe08f; }
.cx-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #98703c #1b130b; }
.cx-word { padding: 6px 9px 7px; border: 1px solid rgba(168,122,59,.35); background: rgba(24,16,10,.72); }
.cx-word.ready { border-color: #8fe08f; box-shadow: 0 0 10px rgba(120,220,120,.25); }
.cx-word.top { background: linear-gradient(rgba(70,40,14,.72), rgba(24,16,10,.72)); }
.cx-word header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cx-word header b { font: 700 15px Cinzel, Georgia, serif; }
.cx-word header em { padding: 0 5px; border: 1px solid rgba(238,170,60,.6); border-radius: 3px; color: #eeaa3c; font: 600 11px Georgia, serif; font-style: normal; }
.cx-word header em.cx-ready { border-color: #8fe08f; color: #8fe08f; }
.cx-word header small { margin-left: auto; color: #a99b82; font-size: 12.5px; }
.cx-runes { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 4px 0 2px; }
.cx-runes i { color: #6c604c; font-style: normal; }
.cx-base { color: #b7ac95; font-size: 12.5px; }
.cx-base span { color: #8c7f68; }
.cx-stats { margin: 3px 0 0; padding: 0; list-style: none; color: #9fb0ff; font-size: 13px; line-height: 1.3; }
.cx-runeline { margin-top: 2px; color: #a99b82; font-size: 12.5px; line-height: 1.25; }