/* ============================================================
   NEFERON v3 — character view rebuild + site-wide effects
   Loaded after neferon.css (see index.php).
   ============================================================ */

/* ---------- section headers (pixel icon + gold) ---------- */
/* The content column, rather than the viewport, controls the character sheet. */
#ContentColumn { container-type: inline-size; }
.nf-h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 14px;
  font: bold 12px/1.2 'Cinzel', Georgia, serif; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--nf-gold-hi);
  background: linear-gradient(180deg, rgba(200,155,75,.16), transparent);
  border-bottom: 1px solid rgba(200,155,75,.22);
  position: relative; overflow: hidden;
}
.nf-h2 svg { width: 14px; height: 14px; color: var(--nf-gold); image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(200,155,75,.5)); }
.nf-h2::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(240,212,122,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: nf-sweep 6s ease-in-out infinite;
}
@keyframes nf-sweep { 0%, 55% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }

/* ---------- generic card ---------- */
.nf-char-card {
  background: linear-gradient(180deg, var(--nf-card), var(--nf-card2));
  border: 1px solid var(--nf-border); border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,200,126,.05);
  animation: nf-rise .55s cubic-bezier(.2,.7,.3,1) both;
}
.nf-char-card:nth-child(2) { animation-delay: .08s; }
.nf-char-card:nth-child(3) { animation-delay: .16s; }
.nf-char-wide { animation-delay: .1s; }
@keyframes nf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nf-char-card-body { padding: 12px 14px; }
.nf-empty { color: var(--nf-text-dim); font: 12px/1.7 Verdana, sans-serif; text-align: center; padding: 18px 6px; }

/* ---------- character sheet banner ---------- */
.nf-char-sheet {
  position: relative; border: 1px solid var(--nf-border); border-radius: 8px;
  overflow: hidden; margin: 4px 0 12px;
  background: #0e0c09;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: nf-rise .55s cubic-bezier(.2,.7,.3,1) both;
}
.nf-char-sheet-bg {
  position: absolute; inset: 0;
  background: url("../images/content/neferon-stone.jpg") repeat;
  background-size: 512px auto;
  filter: brightness(.55) saturate(.75);
}
.nf-char-sheet-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(85% 130% at 10% 0%, rgba(200,155,75,.18), transparent 55%),
    linear-gradient(180deg, rgba(11,9,8,.45), rgba(11,9,8,.82)),
    linear-gradient(90deg, rgba(11,9,8,.15) 0%, rgba(11,9,8,.7) 72%, rgba(11,9,8,.92) 100%);
}
.nf-char-sheet-inner {
  position: relative; display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 22px 14px;
}
.nf-char-medallion {
  position: relative; flex: 0 0 158px; width: 158px; height: 176px;
  border-radius: 8px;
  display: grid; place-items: end center;
  background:
	linear-gradient(180deg, rgba(200,155,75,.10), rgba(0,0,0,0) 38%),
	radial-gradient(ellipse at 50% 26%, #2c251a, #14100b 74%);
  border: 1px solid var(--nf-border);
  border-bottom: 2px solid var(--nf-gold-dim);
  box-shadow: 0 10px 28px rgba(0,0,0,.6), inset 0 0 34px rgba(0,0,0,.75);
  padding-bottom: 8px;
  overflow: hidden;
}
.nf-char-medallion::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(200,155,75,.28); border-radius: 5px;
  pointer-events: none;
}
.nf-char-medallion::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--nf-gold), transparent);
  opacity: .55;
}
.nf-char-sheet.is-online .nf-char-medallion { border-bottom-color: var(--nf-gold); box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 30px rgba(200,155,75,.22), inset 0 0 34px rgba(0,0,0,.7); }
.nf-char-outfit { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.85));
  /* outfit-proxy.php serves the sprite normalized + centered on its 64x64 canvas;
     object-fit: contain scales the square to the card and can never clip the
     character, at any card size or DPI */ }
.nf-char-outfit-none::after { content: "?"; font: bold 56px/158px 'Cinzel', Georgia, serif; color: rgba(200,155,75,.35); }
.nf-char-badge {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: bold 9px/1 Verdana, sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 10px; border: 1px solid var(--nf-border);
  background: rgba(11,9,8,.94);
  box-shadow: 0 2px 10px rgba(0,0,0,.7);
  z-index: 3;
}
.nf-char-badge.is-online { color: #8fd98f; border-color: rgba(127,201,127,.5);
  animation: nf-badge-pulse 2.4s ease-in-out infinite; }
.nf-char-badge.is-offline { color: var(--nf-text-dim); }
@keyframes nf-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127,201,127,.35); }
  50% { box-shadow: 0 0 12px 2px rgba(127,201,127,.22); }
}
.nf-char-main { flex: 1 1 auto; min-width: 0; }
.nf-char-name {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px; font: bold 30px/1.15 'Cinzel', Georgia, serif; letter-spacing: 2px;
  color: var(--nf-gold-hi); text-shadow: 0 2px 14px rgba(200,155,75,.35), 0 1px 2px #000;
}
.nf-char-sex { color: var(--nf-gold); font-size: 20px; }
.nf-char-sub { font: 14px/1.5 Verdana, sans-serif; color: var(--nf-text); margin-bottom: 8px; }
.nf-char-sub b { color: var(--nf-ember); }
.nf-char-voc { color: var(--nf-text-dim); }
.nf-char-skull { color: #c96a5a; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; }
.nf-char-frags { color: var(--nf-text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; }
.nf-char-banned { color: #c96a5a; font-size: 10px; text-transform: uppercase; }
.nf-char-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  margin-top: 8px; max-width: 600px;
}
.nf-char-info .nf-kv-row { padding: 5px 2px; }
.nf-premium { color: var(--nf-gold-hi) !important; }
.nf-char-edit { float: right; font: 11px Verdana, sans-serif; color: var(--nf-text-dim) !important; }
.nf-char-paperdoll {
  flex: 0 0 auto; text-align: center;
  background: rgba(10,8,7,.62);
  border: 1px solid var(--nf-border); border-radius: 8px;
  padding: 10px 12px 12px;
}
.nf-paperdoll-title { font: bold 10px/1 Verdana, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--nf-text-dim); margin-bottom: 8px; }
.nf-char-vitals-strip {
  position: relative; display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 10px 22px; border-top: 1px solid rgba(200,155,75,.18);
  background: rgba(11,9,8,.55);
}
.nf-vital { font: 10px/1.4 Verdana, sans-serif; color: var(--nf-text-dim); text-transform: uppercase; letter-spacing: 1px; }
.nf-vital b { color: var(--nf-ember); margin-left: 6px; letter-spacing: 0; font-size: 12px; }

/* ---------- layout grids ---------- */
.nf-char-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.nf-char-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* equipment — real Tibia client inventory layout (banner paperdoll) */
.nf-eq-head-row { display: flex; justify-content: center; margin-bottom: 5px; }
.nf-eq-head-row .nf-slot { width: 46px; height: 46px; }
.nf-eq-grid {
  display: grid; grid-template-columns: repeat(2, 46px); grid-auto-rows: 46px;
  gap: 5px; justify-content: center;
}
.nf-eq-grid .nf-slot { width: 100%; height: 100%; }
.nf-eq-grid .nf-slot-blank { visibility: hidden; }
.nf-slot { transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.nf-slot:hover { border-color: var(--nf-gold-dim);
  box-shadow: inset 1px 1px 0 rgba(232,200,126,.3), inset -1px -1px 0 rgba(0,0,0,.6), 0 0 14px rgba(200,155,75,.25);
  transform: translateY(-2px); z-index: 2; }
.nf-eq-grid .nf-slot img, .nf-eq-head-row .nf-slot img { max-width: 40px; max-height: 40px; }

/* skills — game-icon tiles */
.nf-skillbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px;
  margin-bottom: 12px;
}
.nf-skill-tile {
  display: grid; justify-items: center; gap: 4px;
  background: linear-gradient(180deg, var(--nf-card), var(--nf-card2));
  border: 1px solid var(--nf-border); border-radius: 6px;
  padding: 12px 8px 10px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  animation: nf-rise .55s cubic-bezier(.2,.7,.3,1) both;
}
.nf-skill-tile:hover { border-color: var(--nf-gold-dim); box-shadow: 0 0 16px rgba(200,155,75,.2); transform: translateY(-2px); }
.nf-skill-ico { height: 36px; display: grid; place-items: center; }
.nf-skill-ico img { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(200,155,75,.35)); }
.nf-skill-ico svg { width: 30px; height: 30px; color: var(--nf-gold); }
.nf-skill-num { font: bold 24px/1 'Cinzel', Georgia, serif; color: var(--nf-gold-hi); text-shadow: 0 1px 8px rgba(200,155,75,.35); }
.nf-skill-name { font: 9px/1.3 Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--nf-text-dim); text-align: center; }

/* quests */
.nf-quests { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nf-quest {
  display: flex; align-items: center; gap: 8px;
  font: 11px/1.4 Verdana, sans-serif; color: var(--nf-text-dim);
  background: rgba(14,12,9,.7); border: 1px solid var(--nf-border); border-radius: 4px;
  padding: 6px 9px; transition: color .16s ease, border-color .16s ease;
}
.nf-quest.done { color: var(--nf-text); }
.nf-quest.done:hover { border-color: rgba(200,155,75,.4); }
.nf-quest-mark { flex: 0 0 16px; text-align: center; color: #4a4336; font-weight: bold; }
.nf-quest.done .nf-quest-mark { color: var(--nf-gold); text-shadow: 0 0 8px rgba(200,155,75,.55); }

/* timelines (deaths / victims) */
.nf-timeline { list-style: none; margin: 0; padding: 0; }
.nf-tl-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 4px; font: 12px/1.6 Verdana, sans-serif;
  border-bottom: 1px solid rgba(200,155,75,.08);
  transition: background .15s ease, transform .15s ease;
}
.nf-tl-row:last-child { border-bottom: 0; }
.nf-tl-row:hover { background: linear-gradient(90deg, rgba(200,155,75,.08), transparent 70%); transform: translateX(2px); }
.nf-tl-date { flex: 0 0 128px; color: var(--nf-text-dim); font-size: 11px; white-space: nowrap; }
.nf-tl-icon { flex: 0 0 16px; align-self: center; }
.nf-tl-icon svg { width: 13px; height: 13px; }
.nf-tl-icon-skull { color: #c96a5a; filter: drop-shadow(0 0 4px rgba(201,106,90,.4)); }
.nf-tl-icon-frag { color: var(--nf-gold); filter: drop-shadow(0 0 4px rgba(200,155,75,.4)); }
.nf-tl-text { min-width: 0; }
.nf-tl-unjust { color: #c96a5a; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.nf-tl-just { color: #6a8f6a; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* key-value + roster */
.nf-kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px;
  border-bottom: 1px solid rgba(200,155,75,.08); font: 12px/1.5 Verdana, sans-serif; }
.nf-kv-row:last-child { border-bottom: 0; }
.nf-kv-row span { color: var(--nf-text-dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding-top: 2px; white-space: nowrap; }
.nf-kv-row b { color: var(--nf-text); font-weight: normal; text-align: right; }
.nf-kv-comment b { text-align: right; word-break: break-word; }
.nf-roster { display: flex; flex-direction: column; gap: 6px; }
.nf-roster-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,12,9,.7); border: 1px solid var(--nf-border); border-radius: 4px;
  padding: 7px 10px; font: 12px/1.4 Verdana, sans-serif;
}
.nf-roster-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-roster-meta { color: var(--nf-text-dim); font-size: 11px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nf-roster-view { padding: 3px 10px; font-size: 10px; }

/* ---------- site-wide v3 effects ---------- */
.nf-hero { position: relative; }

.BorderTitleText { position: relative; overflow: hidden; }
.BorderTitleText::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(240,212,122,.22) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: nf-sweep 7s ease-in-out 1.2s infinite;
}
.Box .Title { animation: nf-title-glow 5s ease-in-out infinite; }
@keyframes nf-title-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
  50% { filter: drop-shadow(0 0 7px rgba(240,212,122,.5)); }
}

.nf-menu-btn:hover .Label { text-shadow: 0 0 10px rgba(240,212,122,.8), 0 1px 2px #000; }
.Submenuitem:hover .SubmenuitemLabel { text-shadow: 0 0 8px rgba(240,212,122,.65); }

.nf-dot.is-online { animation: nf-dot-pulse 2.2s ease-in-out infinite; }
@keyframes nf-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127,201,127,.45); }
  50% { box-shadow: 0 0 7px 2px rgba(127,201,127,.25); }
}

.Themebox, #RightArtwork { animation: nf-rise .55s cubic-bezier(.2,.7,.3,1) both; }
.Themebox:nth-of-type(2) { animation-delay: .07s; }
.Themebox:nth-of-type(3) { animation-delay: .14s; }
.Themebox:nth-of-type(4) { animation-delay: .21s; }
.Themebox:nth-of-type(5) { animation-delay: .28s; }
.Themebox:nth-of-type(6) { animation-delay: .35s; }

@media (prefers-reduced-motion: no-preference) {
  .nf-reveal { opacity: 0; transform: translateY(16px); }
  .nf-reveal.nf-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
}

@media (prefers-reduced-motion: reduce) {
  .nf-h2::after, .BorderTitleText::after, .Box .Title { animation: none !important; }
  .nf-char-card, .Themebox, #RightArtwork, .nf-char-sheet, .nf-skill-tile { animation: none !important; }
  .nf-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- v4: compact, responsive game sheet ---------- */
.nf-char-sheet-inner {
  display: grid; grid-template-columns: 158px minmax(0, 1fr) 122px;
  grid-template-areas: "portrait details equipment";
  gap: 18px; padding: 18px;
}
.nf-char-medallion { grid-area: portrait; box-sizing: border-box; margin: 6px auto 14px; }
.nf-char-main { grid-area: details; min-width: 0; }
.nf-char-paperdoll { grid-area: equipment; padding: 10px; border-radius: 3px; }
.nf-char-name { flex-wrap: wrap; overflow-wrap: anywhere; font-size: clamp(22px, 3cqi, 30px); }
.nf-char-sub { font-size: 12px; }
.nf-char-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; max-width: none; }
.nf-char-info .nf-kv-row { display: block; min-width: 0; padding: 7px 0; }
.nf-char-info .nf-kv-row > span { display: block; font-size: 9px; letter-spacing: .7px; }
.nf-char-info .nf-kv-row > b { display: block; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.nf-kv-comment { grid-column: 1 / -1; }
/* the second .nf-char-outfit block was retired: fixed 252px + absolute centering
   is replaced by the 100%/object-fit rule above — object-fit can never clip. */
.nf-char-medallion img[src*="outfit"].nf-char-outfit,
.nf-char-medallion .nf-char-outfit {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
.nf-char-vitals-strip { gap: 10px 18px; padding: 10px 16px; }
.nf-vital { display: grid; gap: 3px; flex: 1; min-width: 105px; font-size: 9px; letter-spacing: .5px; }
.nf-vital b { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nf-skillbar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.nf-skill-tile { border-radius: 3px; padding: 9px 3px; gap: 5px; }
.nf-skill-ico { width: 36px; height: 36px; }
.nf-skill-num { font-size: 23px; }
.nf-skill-name { font-size: 9px; letter-spacing: .2px; overflow-wrap: anywhere; }
.nf-char-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nf-char-card { border-radius: 3px; margin-bottom: 10px; }
.nf-char-card-body { padding: 10px 12px; }
.nf-roster-row { flex-wrap: wrap; padding: 7px; }
.nf-roster-name { white-space: normal; overflow-wrap: anywhere; }
.nf-roster-meta { white-space: normal; }
.nf-h2::after { pointer-events: none; }
@container (max-width: 740px) {
  .nf-char-sheet-inner {
    grid-template-columns: minmax(0, 1fr) 122px;
    grid-template-areas: "portrait equipment" "details equipment";
    gap: 12px 18px;
  }
  .nf-char-medallion { justify-self: start; margin: 3px 0 12px; }
  .nf-char-paperdoll { align-self: start; }
  .nf-char-info { gap: 0 10px; }
}
@container (max-width: 440px) {
  .nf-char-sheet-inner {
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas: "portrait equipment" "details details";
    padding: 12px; gap: 12px;
  }
  .nf-char-medallion { width: 144px; height: 160px; max-width: 100%; align-self: center; }
  .nf-char-paperdoll { padding: 8px 6px; }
  .nf-char-grid-2, .nf-quests { grid-template-columns: 1fr; }
  .nf-char-search table, .nf-char-search tbody, .nf-char-search tr, .nf-char-search td { display: block; width: auto !important; }
  .nf-char-search td { padding: 5px 8px; }
  .nf-char-search input[type="text"] { width: 100%; }
  .nf-skillbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nf-tl-row { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 4px 8px; }
  .nf-tl-date { grid-column: 2; }
  .nf-tl-icon { grid-column: 1; grid-row: 2; }
  .nf-tl-text { grid-column: 2; }
}

/* Common data views retain their real sprites and classic table chrome. */
.TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer { height: auto; }
.Submenuitem[aria-current="page"] { background: rgba(201,162,39,.12); }
#ContentColumn table { font-variant-numeric: tabular-nums; }
#ContentColumn .TableContent td { padding: 6px 8px; font-size: 12px; line-height: 1.45; }
#ContentColumn .TableContent tr:hover > td { background-color: rgba(201,162,39,.055); }
#ContentColumn .TableContent th { color: var(--nf-gold-hi); }
#ContentColumn img[src*="/catalog/"], #ContentColumn img[src*="/catalog-outfits/"] { image-rendering: pixelated; }
.nf-news-card { margin-bottom: 12px; }
.nf-news-head { flex-wrap: wrap; gap: 6px 10px; }
.nf-news-body { padding: 12px 14px; font-size: 12px; line-height: 1.65; }
.nf-news-title:hover { color: #fff0b9; text-shadow: 0 0 10px rgba(201,162,39,.35); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--nf-gold-hi); outline-offset: 3px;
}
.Submenuitem:has(.ActiveSubmenuItemIcon[style*="visible"]) { background: rgba(201,162,39,.12); }
@media (max-width: 720px) {
  #Bodycontainer { padding-inline: 10px; }
  .nf-news-author { margin-left: 0; }
  .nf-news-body { padding: 10px; }
  #ContentColumn .BoxContent { overflow-wrap: anywhere; }
  #ContentColumn input:not([type="checkbox"]):not([type="radio"]), #ContentColumn select { max-width: 100%; box-sizing: border-box; }
}
.nf-ranking { border: 1px solid var(--nf-border); background: rgba(14,12,9,.7); }
.nf-ranking-filters { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 12px; }
.nf-ranking-filters label { display: flex; align-items: center; gap: 8px; color: var(--nf-text-dim); font-size: 11px; }
.nf-data-scroll { overflow-x: auto; }
.nf-ranking-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nf-ranking-table th { background: rgba(201,162,39,.12); color: var(--nf-gold-hi); font: bold 10px 'Cinzel', Georgia, serif; text-align: left; letter-spacing: .7px; }
.nf-ranking-table td, .nf-ranking-table th { padding: 8px 10px; border-bottom: 1px solid var(--nf-border); }
.nf-ranking-table tr:hover td { background: rgba(201,162,39,.055); }
.nf-ranking-player { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.nf-ranking-player small { display: block; color: var(--nf-text-dim); margin-top: 4px; }
.nf-ranking-outfit { width: 40px; height: 44px; overflow: hidden; position: relative; flex: 0 0 40px; display: flex; align-items: flex-end; justify-content: center; }
/* proxy sprites are centered 64x64 — render 2x (32px char) bottom-anchored */
.nf-ranking-outfit img { position: static; height: 40px !important; width: 40px !important; max-width: none; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.nf-ranking-rank { color: var(--nf-gold-hi); font: bold 18px 'Cinzel', Georgia, serif; }
/* proxy sprites in plain table cells (who-is-online rows, legacy hs template) */
.nf-online-outfit, .nf-hs-outfit { height: 44px !important; width: 44px !important; max-width: none; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.nf-ranking-pages { display: flex; justify-content: space-between; padding: 10px; font-size: 11px; }
.nf-prem-card, .nf-sys-card, .nf-contact-card, .nf-killers-card { border-radius: 3px; padding: 14px; }
.nf-sys-card p, .nf-prem-card p, .nf-contact-card p { font-size: 12px; line-height: 1.6; }
/* Static glows cost no animation frames; only transform/opacity motion remains. */
.Box .Title, .nf-dot.is-online, .nf-char-badge.is-online, #NeferonLogo img { animation: none; }
#NeferonHeader { padding: 14px 0 12px; }
#NeferonLogo img { width: min(460px, 80vw); }
.nf-logo-tagline { margin-top: 4px; }
.nf-hero { padding-top: 20px; padding-bottom: 18px; }
.nf-char-sheet-bg { filter: brightness(.85) saturate(.75); }
@media (max-width: 720px) {
  #NeferonLogo img { width: min(340px, 88vw); }
  .nf-logo-tagline { font-size: 9px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* icon sizing inside non-.nf-h2 card headers */
.nf-prem-card h3 svg, .nf-sys-card h2 svg, .nf-contact-card h3 svg,
.nf-killers-card h2 svg, .nf-raids-title svg, .nf-discordbox-head svg {
  width: 12px; height: 12px; color: var(--nf-gold);
  image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(200,155,75,.5));
  vertical-align: -1px; margin-right: 2px;
}

/* ============================================================
   GILDED CHRONICLE v4.1 (2026-10-04) — dense chronicle pass:
   wordmark halo, compact inner masthead, utility strip, mobile
   menu disclosure, phone card-tables, rank medals, quest seals,
   ember accents. All motion below is transform/opacity only and
   every animation is covered by the reduced-motion guard above.
   ============================================================ */

/* --- masthead: halo so the dark-gold mark reads at a glance --- */
#NeferonHeader { position: relative; }
#NeferonHeader::after {
  content: ""; position: absolute; inset: -12px 0 -6px; pointer-events: none; z-index: -1;
  background: radial-gradient(58% 72% at 50% 46%, rgba(201,162,39,.10), rgba(176,86,42,.05) 55%, transparent 78%);
}

/* --- compact masthead on inner pages (home keeps the full mark) --- */
#NeferonHeader.nf-inner { padding: 6px 0 2px; }
#NeferonHeader.nf-inner #NeferonLogo img { width: min(300px, 44vw); height: auto; }
#NeferonHeader.nf-inner .nf-logo-tagline { font-size: 8px; letter-spacing: 1.6px; }

/* --- utility strip: live-world chrome on inner pages --- */
.nf-utility {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 22px; padding: 5px 10px 9px; margin-bottom: 4px;
  font: 11px/1.4 Verdana, sans-serif; color: var(--nf-text-dim);
}
.nf-utility-status { display: inline-flex; align-items: center; gap: 6px; color: var(--nf-text); text-decoration: none; }
.nf-utility-status strong { color: var(--nf-gold-hi); font-size: 13px; }
.nf-utility-status.is-offline strong { color: var(--nf-text-dim); }
.nf-utility-status:hover strong { text-decoration: underline; }
.nf-utility-save { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .4px; }
.nf-utility-save strong { color: var(--nf-body, #e8dcc0); }
.nf-utility-save svg { width: 12px; height: 12px; color: var(--nf-ember); image-rendering: pixelated; }
.nf-utility-discord {
  color: var(--nf-gold); text-decoration: none; letter-spacing: .4px;
  border-bottom: 1px solid rgba(201,162,39,.35); padding-bottom: 1px;
}
.nf-utility-discord:hover { color: var(--nf-gold-hi); border-color: var(--nf-gold-hi); }

/* --- mobile menu disclosure (button only exists with JS; nf-js set at boot) --- */
#nf-menu-toggle {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 11px 12px;
  font: bold 12px/1 Verdana, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--nf-gold-hi); background: linear-gradient(180deg, var(--nf-card), var(--nf-card2));
  border: 1px solid var(--nf-border); border-radius: 4px; cursor: pointer;
}
.nf-menu-toggle-bars, .nf-menu-toggle-bars::before, .nf-menu-toggle-bars::after {
  content: ""; width: 15px; height: 2px; background: var(--nf-gold); display: block;
  box-shadow: 0 0 4px rgba(201,162,39,.5);
}
.nf-menu-toggle-bars { position: relative; }
.nf-menu-toggle-bars::before { position: absolute; top: -5px; left: 0; }
.nf-menu-toggle-bars::after { position: absolute; top: 5px; left: 0; }
@media (max-width: 768px) {
  .nf-js #nf-menu-toggle { display: flex; }
  .nf-js body:not(.nf-menu-open) #Menu { display: none; }
  .nf-js body.nf-menu-open #Menu { display: block; }
}

/* --- section header counter chip (quests X/Y, equipment N/M) --- */
.nf-h2-count {
  margin-left: auto; font: bold 10px/1 Verdana, sans-serif; letter-spacing: .8px;
  color: var(--nf-text-dim); text-transform: uppercase;
  border: 1px solid var(--nf-border); border-radius: 3px; padding: 3px 7px;
  background: rgba(11,9,8,.6);
}

/* --- quest seals: three truthful states --- */
.nf-quest-mark svg { width: 14px; height: 14px; image-rendering: pixelated; display: block; }
.nf-quest.is-none { color: var(--nf-text-dim); }
.nf-quest.is-progress { color: var(--nf-text); border-color: rgba(176,86,42,.4); }
.nf-quest.is-progress .nf-quest-name { color: var(--nf-text); }
.nf-quest.is-done { color: var(--nf-text); }
.nf-quest.is-done .nf-quest-mark { filter: drop-shadow(0 0 5px rgba(201,162,39,.5)); }
.nf-quest.is-progress:hover, .nf-quest.is-done:hover { border-color: rgba(200,155,75,.4); }

/* --- equipment: 56px slots on wide sheets (paperdoll column grows with them) --- */
.nf-eq-head-row .nf-slot { width: 52px; height: 52px; }
.nf-eq-grid { grid-template-columns: repeat(2, 52px); grid-auto-rows: 52px; gap: 6px; }
.nf-eq-grid .nf-slot img, .nf-eq-head-row .nf-slot img { max-width: 44px; max-height: 44px; }
.nf-paperdoll-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nf-paperdoll-title .nf-h2-count { margin-left: 0; }
@media (min-width: 769px) {
  .nf-char-sheet-inner { grid-template-columns: 168px minmax(0, 1fr) 150px; }
  .nf-eq-head-row .nf-slot { width: 56px; height: 56px; }
  .nf-eq-grid { grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; }
  .nf-eq-grid .nf-slot img, .nf-eq-head-row .nf-slot img { max-width: 48px; max-height: 48px; }
}

/* --- rankings: medals + phone card rows --- */
.nf-ranking-table th, .nf-sys-table th { white-space: nowrap; }
.nf-ranking-rank svg { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; margin-right: 5px; }
.nf-ranking-rank span { font: bold 18px/1 'Cinzel', Georgia, serif; }
tr.nf-rank-1 td { background: rgba(201,162,39,.07); }
tr.nf-rank-2 td { background: rgba(207,212,221,.045); }
tr.nf-rank-3 td { background: rgba(208,138,78,.05); }
@media (max-width: 560px) {
  .nf-ranking-table thead { display: none; }
  .nf-ranking-table, .nf-ranking-table tbody { display: block; }
  .nf-ranking-table tr {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px;
    border: 1px solid var(--nf-border); border-radius: 4px;
    padding: 8px 10px; margin-bottom: 7px; background: rgba(14,12,9,.7);
  }
  .nf-ranking-table tr td { border: 0; padding: 0; }
  .nf-ranking-table td[class]::before {
    content: attr(data-label); display: block;
    font: bold 8px/1 Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase;
    color: var(--nf-text-dim); margin-bottom: 2px;
  }
  .nf-ranking-table td.nf-ranking-rank { grid-row: 1 / span 2; align-self: center; }
  .nf-ranking-table td.nf-ranking-rank span { font-size: 15px; }
  .nf-ranking-table td.nf-ranking-rank svg { width: 20px; height: 20px; margin: 0 0 2px; vertical-align: baseline; display: block; }
  .nf-ranking-table td[data-label="Experience"], .nf-ranking-table td[data-label]:not(.nf-ranking-rank):nth-last-child(-n+2) { display: inline-flex; flex-direction: column; }
}
@media (max-width: 560px) {
  /* game-systems tier table: each row becomes a labeled mini-card */
  .nf-sys-table thead { display: none; }
  .nf-sys-table, .nf-sys-table tbody { display: block; }
  .nf-sys-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px;
    border: 1px solid var(--nf-border); border-radius: 4px;
    padding: 8px 10px; margin-bottom: 7px; background: rgba(14,12,9,.7);
  }
  .nf-sys-table td { border: 0; padding: 0; font-size: 12px; }
  .nf-sys-table td::before {
    content: attr(data-label); display: block;
    font: bold 8px/1 Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase;
    color: var(--nf-text-dim); margin-bottom: 2px;
  }
  .nf-sys-table td[data-label="Tier"] { grid-column: 1 / -1; font-weight: bold; }
}

/* --- ember accents: raid log edge + live entries (restrained, <=5% of any screen) --- */
.Themebox.nf-raids { border-left: 3px solid var(--nf-ember); }
.nf-raids-date { color: var(--nf-ember); }

/* --- deaths timeline: ember dates read as warnings --- */
.nf-tl-row:has(.nf-tl-icon-skull) .nf-tl-date { color: var(--nf-ember); }

@media (prefers-reduced-motion: reduce) {
  #nf-menu-toggle, .nf-utility, .nf-h2-count { transition: none; }
}

/* ============================================================
   GILDED CHRONICLE v4.2 (2026-10-04, owner review of Dojna) —
   one composed banner: vitals + six skill tiles moved INTO the
   middle column so a data-empty character still fills the sheet
   (no empty stone slab), medallion can never be overflowed by a
   small sprite, and the paperdoll column is optional.
   ============================================================ */
.nf-char-medallion { overflow: hidden; }
.nf-char-sheet-inner {
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-areas: "portrait details";
}
.nf-char-sheet-inner.has-paperdoll {
  grid-template-columns: 168px minmax(0, 1fr) 150px;
  grid-template-areas: "portrait details equipment";
}
/* vitals + skills are now children of .nf-char-main */
.nf-char-main .nf-char-vitals-strip {
  margin: 12px 0 0; padding: 9px 14px;
  border: 1px solid rgba(200,155,75,.18); border-radius: 6px;
  background: rgba(11,9,8,.55);
}
.nf-char-main .nf-skillbar { margin: 10px 0 0; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nf-char-main .nf-skill-tile { padding: 8px 4px 7px; }
.nf-char-main .nf-skill-ico img { width: 28px; height: 28px; }
.nf-char-main .nf-skill-num { font-size: 20px; }
.nf-char-main .nf-skill-name { font-size: 8px; }
.nf-char-paperdoll { align-self: start; }

@container (max-width: 740px) {
  .nf-char-sheet-inner,
  .nf-char-sheet-inner.has-paperdoll {
    grid-template-columns: minmax(0, 1fr) 130px;
    grid-template-areas: "portrait equipment" "details equipment";
    gap: 12px 16px;
  }
  .nf-char-medallion { justify-self: start; margin: 3px 0 10px; }
}
@container (max-width: 440px) {
  .nf-char-sheet-inner,
  .nf-char-sheet-inner.has-paperdoll {
    grid-template-columns: minmax(0, 1fr) 118px;
    grid-template-areas: "portrait equipment" "details details";
    padding: 12px; gap: 12px;
  }
  .nf-char-medallion { width: 144px; height: 160px; max-width: 100%; align-self: center; }
  .nf-char-paperdoll { padding: 8px 6px; }
  .nf-char-grid-2, .nf-quests { grid-template-columns: 1fr; }
  .nf-char-search table, .nf-char-search tbody, .nf-char-search tr, .nf-char-search td { display: block; width: auto !important; }
  .nf-char-search td { padding: 5px 8px; }
  .nf-char-search input[type="text"] { width: 100%; }
  .nf-char-main .nf-skillbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nf-tl-row { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 4px 8px; }
  .nf-tl-date { grid-column: 2; }
  .nf-tl-icon { grid-column: 1; grid-row: 2; }
  .nf-tl-text { grid-column: 2; }
}

/* ============================================================
   GILDED CHRONICLE v4.3 (2026-10-04, owner order) — equipment
   = the REAL client inventory: exact retro 7.4 slot arrangement
   (center Head/Armor/Legs/Feet; left Necklace/Left/Ring; right
   Backpack/Right/Ammo) with the client's own 34px slot art as
   the slot background, like the game renders it.
   ============================================================ */
.nf-char-paperdoll { --eq-size: 51px; }
@media (min-width: 769px) {
  .nf-char-paperdoll { --eq-size: 51px; }
  .nf-char-sheet-inner.has-paperdoll { grid-template-columns: 168px minmax(0, 1fr) 208px; }
}
.nf-eq-grid { grid-template-columns: repeat(3, var(--eq-size)); grid-auto-rows: var(--eq-size); gap: 6px; }
.nf-eq-grid .nf-slot img { max-width: calc(var(--eq-size) - 8px); max-height: calc(var(--eq-size) - 8px); }
.nf-eq-spacer { width: 100%; height: 100%; visibility: hidden; }
/* the client art IS the slot frame — render cells like the game inventory:
   art at full strength, hairline seams, warm floor, item art at client scale */
.nf-char-paperdoll { background: rgba(10,8,7,.8); }
.nf-char-paperdoll .nf-slot {
  background-color: #2a2318;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: 0;
  outline: 1px solid rgba(0,0,0,.85);
  outline-offset: -1px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.45);
}
.nf-char-paperdoll .nf-slot img { image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.nf-char-paperdoll .nf-eq-grid { gap: 3px; }
.nf-char-paperdoll .nf-eq-grid .nf-slot img { max-width: calc(var(--eq-size) - 10px); max-height: calc(var(--eq-size) - 10px); }
.nf-char-paperdoll .nf-slot.empty::before { display: none; }
.nf-char-paperdoll .nf-slot.empty::after { display: none; }
/* skill tiles now carry the Neferon pixel icon set (svg), not item sprites */
.nf-char-main .nf-skill-ico svg { width: 26px; height: 26px; image-rendering: pixelated; }
@container (max-width: 740px) {
  .nf-char-paperdoll { --eq-size: 44px; }
  .nf-char-sheet-inner.has-paperdoll { grid-template-columns: minmax(0, 1fr) 162px; }
}
@container (max-width: 440px) {
  .nf-char-paperdoll { --eq-size: 36px; padding: 8px 6px; }
  .nf-char-sheet-inner.has-paperdoll { grid-template-columns: minmax(0, 1fr) 132px; }
}

/* ============================================================
   GILDED CHRONICLE v4.4 — site-wide control + empty-state pass
   (visual audit 2026-10-04: native controls + bare empty states)
   ============================================================ */

/* --- 1. Site-wide native control restyle (Content column only) --- */
#ContentColumn input[type="text"],
#ContentColumn input[type="password"],
#ContentColumn input[type="email"],
#ContentColumn select {
	background: #12100c;
	border: 1px solid var(--nf-border);
	color: var(--nf-text);
	font: 12px/1.4 Verdana, sans-serif;
	padding: 6px 8px;
	border-radius: 3px;
}
#ContentColumn input[type="text"]:focus,
#ContentColumn input[type="password"]:focus,
#ContentColumn input[type="email"]:focus,
#ContentColumn select:focus {
	outline: none;
	border-color: var(--nf-gold);
	box-shadow: 0 0 0 1px rgba(201, 162, 39, .25);
}
#ContentColumn input[type="radio"],
#ContentColumn input[type="checkbox"] { accent-color: var(--nf-gold); }
#ContentColumn input[type="submit"],
#ContentColumn input[type="button"],
#ContentColumn button,
#ContentColumn .Button {
	background: linear-gradient(180deg, var(--nf-gold), #a8861d);
	border: 1px solid #6b5511;
	color: #14100a;
	font: bold 11px/1 Verdana, sans-serif;
	letter-spacing: .8px;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 3px;
	cursor: pointer;
}
#ContentColumn input[type="submit"]:hover,
#ContentColumn input[type="button"]:hover,
#ContentColumn button:hover,
#ContentColumn .Button:hover {
	background: linear-gradient(180deg, var(--nf-gold-hi), var(--nf-gold));
}

/* --- 2. Gilded panel (shared, replaces stock table chrome) --- */
.nf-panel {
	background: linear-gradient(180deg, var(--nf-card), var(--nf-card2, #171310));
	border: 1px solid var(--nf-border);
	border-radius: 6px;
	padding: 16px 18px;
	margin: 12px 0;
}
.nf-panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font: bold 14px/1.3 'Cinzel', Georgia, serif;
	color: var(--nf-gold-hi);
	letter-spacing: 1.2px;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(200, 155, 75, .22);
}
.nf-panel-title svg { width: 16px; height: 16px; flex: none; }

/* --- 3. Intentional empty state --- */
.nf-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 34px 20px;
	margin: 12px 0;
	border: 1px dashed rgba(200, 155, 75, .3);
	border-radius: 6px;
	background: rgba(29, 24, 18, .45);
	color: var(--nf-text-dim);
	font: 13px/1.7 Verdana, sans-serif;
}
.nf-empty svg { width: 30px; height: 30px; opacity: .8; }
.nf-empty b { color: var(--nf-gold); font-weight: bold; }
.nf-empty small { font-size: 11px; }

/* --- 4. Exp stages: centered gilded rate panel --- */
.nf-stages-panel { max-width: 560px; margin: 12px auto; }
.nf-stages-panel .nf-stage-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 4px;
	border-bottom: 1px solid rgba(200, 155, 75, .12);
	font: 12px/1.4 Verdana, sans-serif;
	color: var(--nf-text);
}
.nf-stages-panel .nf-stage-row:last-child { border-bottom: 0; }
.nf-stages-panel .nf-stage-rate {
	font: bold 14px/1 'Cinzel', Georgia, serif;
	color: var(--nf-gold-hi);
	letter-spacing: 1px;
}
.nf-stages-note {
	text-align: center;
	font: 11px/1.7 Verdana, sans-serif;
	color: var(--nf-text-dim);
	margin-top: 10px;
}

/* --- v4.4.1: Cap + Store tiles (client bottom corners, owner correction) --- */
.nf-slot-cap,
.nf-slot-store {
	background-position: center bottom;
	background-repeat: no-repeat;
}
.nf-slot-capval {
	position: absolute;
	left: 0; right: 0; bottom: 3px;
	text-align: center;
	font: bold 10px/1 Verdana, sans-serif;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

/* item sprites arrive centered on the client 32x32 grid (item-image.php) —
   render every slot at one uniform 1.5x client scale, like the game inventory */
.nf-eq-grid .nf-slot img.item_image { width: 48px; height: 48px; max-width: none; max-height: none; image-rendering: pixelated; }

/* hover like the client: the tile never moves, a light outline + inner glow
   marks the hovered slot (the generic .nf-slot:hover lift is web behaviour) */
.nf-char-paperdoll .nf-slot:hover {
	transform: none;
	outline: 1px solid rgba(240, 220, 170, .9);
	outline-offset: -1px;
	box-shadow: inset 0 0 8px rgba(0,0,0,.45), inset 0 0 12px rgba(255, 236, 190, .22);
}
.nf-char-paperdoll .nf-slot { cursor: default; }

/* ============================================================
   GILDED CHRONICLE v4.8 (2026-10-08, owner order) — phone rescue
   + one-line skills + living spirits.
   Owner report: char page "on the phone is all broken", skills
   must be ONE line, all outfit spirits site-wide should move.
   Root causes found:
   1) The char-sheet phone layout is @container-only. Browsers
      without container queries (older phone WebKits) apply NONE
      of the mobile tiers -> desktop 3-column grid inside a
      390px viewport = overlapping, clipped sheet. Fix: a
      @supports-not fallback that mirrors the tiers with media
      queries (page column ~= viewport on phones).
   2) Skill tiles wrapped to 2 rows everywhere (4+4 desktop,
      6+2 phone). Owner order: ONE line, always -> 8 columns.
   3) Eq item sprites hard-coded 48px while phone cells shrink
      to 36px -> art overflows the slot. Fix: fluid item size
      tied to --eq-size (desktop keeps the exact 48/51 ratio).
   4) Vitals strip wraps to 3 rows on phones -> one scrollable
      line instead.
   ============================================================ */

/* --- 1. one-line skillbar: 8 tiles, always (later layer wins) --- */
.nf-char-main .nf-skillbar { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.nf-char-main .nf-skill-tile { padding: 7px 2px 6px; gap: 3px; min-width: 0; }
.nf-char-main .nf-skill-ico img { width: 26px; height: 26px; }
.nf-char-main .nf-skill-ico svg { width: 22px; height: 22px; }
.nf-char-main .nf-skill-num { font-size: 17px; }
.nf-char-main .nf-skill-name { font-size: 7.5px; letter-spacing: .1px; }

@container (max-width: 740px) {
	.nf-char-main .nf-skillbar { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.nf-char-main .nf-skill-tile { padding: 6px 1px 5px; }
	.nf-char-main .nf-skill-ico img { width: 22px; height: 22px; }
	.nf-char-main .nf-skill-num { font-size: 15px; }
	.nf-char-main .nf-skill-name { font-size: 6.5px; }
}
@container (max-width: 440px) {
	.nf-char-main .nf-skillbar { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.nf-char-main .nf-skill-tile { padding: 5px 1px 4px; }
	.nf-char-main .nf-skill-ico img { width: 20px; height: 20px; }
	.nf-char-main .nf-skill-num { font-size: 13px; }
	.nf-char-main .nf-skill-name { font-size: 6px; }
}

/* --- 2. vitals: one scrollable line on phones --- */
.nf-char-main .nf-char-vitals-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nf-char-main .nf-char-vitals-strip::-webkit-scrollbar { display: none; }
.nf-char-main .nf-vital { flex: 0 0 auto; min-width: 0; }

/* --- 3. eq item art scales with its cell (1.5x client ratio kept) --- */
.nf-eq-grid .nf-slot img.item_image {
	width: calc(var(--eq-size, 51px) - 3px);
	height: calc(var(--eq-size, 51px) - 3px);
}

/* --- 4. OLD-PHONE FALLBACK: no container queries -> media tiers.
   Mirrors the @container geometry (page column ~= viewport on
   phones, sidebars stacked above by the base mobile CSS). --- */
@supports not (container-type: inline-size) {
	@media (max-width: 768px) {
		.nf-char-sheet-inner,
		.nf-char-sheet-inner.has-paperdoll {
			grid-template-columns: minmax(0, 1fr) 140px;
			grid-template-areas: "portrait equipment" "details equipment";
			gap: 12px 14px;
			display: grid;
		}
		.nf-char-medallion { width: 144px; height: 160px; justify-self: start; }
		.nf-char-paperdoll { --eq-size: 40px; }
	}
	@media (max-width: 480px) {
		.nf-char-sheet-inner,
		.nf-char-sheet-inner.has-paperdoll {
			grid-template-columns: minmax(0, 1fr) 118px;
			grid-template-areas: "portrait equipment" "details details";
			padding: 12px;
		}
		.nf-char-paperdoll { --eq-size: 36px; }
		.nf-char-main .nf-skillbar { grid-template-columns: repeat(8, minmax(0, 1fr)); }
		.nf-char-main .nf-skill-tile { padding: 5px 1px 4px; }
		.nf-char-main .nf-skill-ico img { width: 20px; height: 20px; }
		.nf-char-main .nf-skill-num { font-size: 13px; }
		.nf-char-main .nf-skill-name { font-size: 6px; }
		.nf-char-main .nf-char-vitals-strip { flex-wrap: nowrap; overflow-x: auto; }
		.nf-char-grid-2, .nf-quests { grid-template-columns: 1fr; }
		.nf-tl-row { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 4px 8px; }
		.nf-tl-date { grid-column: 2; }
		.nf-tl-text { grid-column: 2; }
	}
}

/* --- 5. LIVING SPIRITS (owner order: "the real movement of the spirits") ---
   REAL walk movement comes from outfit-proxy v4: it now serves the 2-frame
   7.4 walk-cycle APNGs extracted from the client dat (catalog-outfits-walk/,
   all outfit looktypes + addon variants). The CSS translateY bob is RETIRED —
   sprites move with their authentic frames now, like in the game.
   What remains here: the char-page spirit card breathes gold while online. --- */
@keyframes nf-spirit-glow {
	0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 30px rgba(200,155,75,.22), inset 0 0 34px rgba(0,0,0,.7); }
	50% { box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 44px rgba(200,155,75,.4), inset 0 0 34px rgba(0,0,0,.7); }
}
.nf-char-sheet.is-online .nf-char-medallion { animation: nf-spirit-glow 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.nf-char-sheet.is-online .nf-char-medallion { animation: none; }
}

/* ============================================================
   GILDED CHRONICLE v4.10 (2026-10-08, owner order) — vitals as
   icon bars under the spirit card + cap-slot polish.
   HP/Mana leave the text strip (still shows Bank/Capacity) and
   become game-style bars beneath the portrait: heart icon +
   red track, mana-drop icon + blue track, gold numbers.
   ============================================================ */

/* --- portrait column: medallion + vitals bars stacked --- */
.nf-char-portrait { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nf-char-sheet-inner .nf-char-portrait { grid-area: portrait; }
.nf-char-portrait .nf-char-medallion { flex: 0 0 auto; }

/* --- the bars --- */
.nf-char-vitals-bars { display: flex; flex-direction: column; gap: 5px; width: 158px; }
.nf-vital-bar {
	display: grid; grid-template-columns: 16px minmax(0,1fr) auto;
	align-items: center; gap: 6px;
}
.nf-vbar-ico { width: 16px; height: 16px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.nf-vbar-ico svg { width: 16px; height: 16px; display: block; }
.nf-vital-bar.hp .nf-vbar-ico svg path { fill: #c0392b; stroke: #f5d9b8; stroke-width: 1.1; }
.nf-vital-bar.mp .nf-vbar-ico svg path { fill: #2e7dd1; stroke: #cfe6ff; stroke-width: 1.1; }
.nf-vbar-track {
	display: block; height: 10px; border-radius: 5px; overflow: hidden;
	background: rgba(0,0,0,.72);
	border: 1px solid rgba(200,155,75,.35);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,236,190,.06);
}
.nf-vbar-fill {
	display: block; height: 100%; border-radius: 5px;
	transition: width .6s ease;
}
.nf-vital-bar.hp .nf-vbar-fill {
	background: linear-gradient(180deg, #e05545, #a02818 78%);
	box-shadow: inset 0 1px 0 rgba(255,200,180,.35), 0 0 6px rgba(200,60,40,.25);
}
.nf-vital-bar.mp .nf-vbar-fill {
	background: linear-gradient(180deg, #4a9be8, #1e5aa8 78%);
	box-shadow: inset 0 1px 0 rgba(190,225,255,.4), 0 0 6px rgba(60,130,220,.25);
}
.nf-vbar-num {
	font: bold 9px/1 Verdana, sans-serif; color: var(--nf-gold-hi);
	letter-spacing: .3px; text-shadow: 0 1px 2px #000;
	font-variant-numeric: tabular-nums; white-space: nowrap;
	min-width: 64px; text-align: right;
}

/* --- cap slot polish: subtle gold pulse on the soulcap tile --- */
.nf-slot-cap {
	border-radius: 4px;
	transition: box-shadow .3s ease;
}
.nf-char-paperdoll .nf-slot-cap {
	box-shadow: inset 0 0 8px rgba(0,0,0,.45), inset 0 0 10px rgba(200,155,75,.12);
}
.nf-char-paperdoll .nf-slot-cap:hover {
	box-shadow: inset 0 0 8px rgba(0,0,0,.45), inset 0 0 14px rgba(200,155,75,.3),
		0 0 8px rgba(200,155,75,.25);
}

/* --- mobile tiers: bars match the shrinking medallion --- */
@container (max-width: 740px) {
	.nf-char-vitals-bars { width: 144px; }
	.nf-vbar-num { font-size: 8px; }
}
@container (max-width: 440px) {
	.nf-char-vitals-bars { width: 144px; }
	.nf-vbar-num { font-size: 7.5px; }
}
/* old-phone twin (no container queries) */
@supports not (container-type: inline-size) {
	@media (max-width: 768px) {
		.nf-char-vitals-bars { width: 144px; }
		.nf-vbar-num { font-size: 8px; }
	}
	@media (max-width: 480px) {
		.nf-char-vitals-bars { width: 144px; }
		.nf-vbar-num { font-size: 7.5px; }
	}
}

/* ===== GILDED CHRONICLE v4.12 — FOOTER COMMUNITY ROW (2026-10-10) ===== */
.nf-foot-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 18px;
	margin: 0 0 10px;
}
.nf-foot-social a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--nf-gold, #c9a659);
	text-decoration: none;
	font-size: 11px;
	letter-spacing: 0.04em;
	opacity: 0.85;
	transition: opacity 0.18s ease;
}
.nf-foot-social a:hover { opacity: 1; }
.nf-foot-social-svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: none;
}

/* ===== GILDED CHRONICLE v4.13 — LEGACY PAGE REPAIR (2026-10-11) =====
   Stock MyAAC pages still carry tibiacom's parchment rules from basic.css:
   dark-red #5A2800 body text (unreadable on stone), 2px #55636c slate frames,
   cream #faf0d7 cell grids, and 100%-wide containers with 3px margins or
   borders that overflow the card by 2-3px (a scrollbar under every table). */
.Content .BoxContent,
.Content .BoxContent td,
.Content .BoxContent p { color: var(--nf-text); }

.TableContainer { border: 0 !important; }
.TableContainer .CaptionContainer .CaptionInnerContainer { box-sizing: border-box; }
.TableContainer .CaptionContainer [class^="CaptionEdge"],
.TableContainer .CaptionContainer [class^="CaptionBorder"],
.TableContainer .CaptionContainer [class^="CaptionVertical"] { display: none !important; }

.TableContainer .Table1, .TableContainer .Table2, .TableContainer .Table3,
.TableContainer .Table4, .TableContainer .Table5 {
	background: rgba(0,0,0,.25) !important;
	border: 1px solid var(--nf-border) !important;
	border-radius: 0 0 6px 6px;
}
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer { width: auto !important; margin: 4px 0 0 !important; }
.TableContainer .Table2 .InnerTableContainer td,
.TableContainer .Table3 .TableContentAndRightShadow td,
.TableContainer .InnerTableContainer td[style*="border"] { border-color: rgba(200,155,75,.14) !important; }
.TableContentContainer { border-color: rgba(200,155,75,.18) !important; margin-right: 0 !important; }
.TableShadowContainerRightTop, .TableShadowRightTop, .TableShadowContainer,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow { background: none !important; }
.TableContentAndRightShadow { background-image: none !important; margin-right: 0 !important; }
.Content .BoxContent .nf-info-list li a { display: inline; padding: 0; }
.nf-page-team tr[style*="height"] { height: 46px !important; }
.nf-page-team img[alt="player outfit"] {
	position: static !important; display: block;
	width: 56px; height: 56px; margin: -16px auto -8px !important;
}

/* ===== v4.13 — NEFERON ICON SET =====
   Original 24x24 pixel art in the oldschool 7.4 manner (images/icons/make_icons.py draws it and
   writes the 2x sheet + css/nf-icons.css). One class; --s picks the size - keep it 24px or 48px
   so every art pixel lands on whole screen pixels. */
.nfi {
	--s: 24px;
	display: inline-block; flex: 0 0 auto;
	width: var(--s); height: var(--s);
	vertical-align: middle;
	background-repeat: no-repeat;
	background-size: calc(var(--cols) * var(--s)) calc(var(--rows) * var(--s));
	background-position: calc(var(--x, 0) * var(--s) * -1) calc(var(--y, 0) * var(--s) * -1);
	image-rendering: auto; /* painted art (make_icons_from_art.py) */
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.9));
}
.nfi-none { background-image: none !important; }
.nf-cat-icon { transition: filter .2s ease; }
.menuitem:hover .nf-cat-icon { filter: drop-shadow(0 0 5px rgba(232,200,126,.8)); }
.nf-sub-icon { margin-right: 7px; opacity: .9; transition: opacity .15s ease, filter .15s ease; }
.Submenuitem:hover .nf-sub-icon, .Submenuitem.is-hover .nf-sub-icon { opacity: 1; filter: drop-shadow(0 0 4px rgba(232,200,126,.8)); }
.nf-title-icon { --s: 48px; margin: -14px 12px -14px 0; }
.nf-card-icon { margin: 0 8px 0 0; }
/* card heads: the icon sits in the flow - nothing to clip */
.nf-top3-head { align-items: center !important; }
.nf-top3-head .nf-top3-title { overflow: visible; line-height: 24px; }
/* the active-page bead rides the submenu's gold rail, so labels keep their width */
.Submenuitem { position: relative; }
.Submenuitem .ActiveSubmenuItemIcon { position: absolute !important; left: -3px; top: 50%; margin: -2.5px 0 0 !important; }
/* create account: labels sit on the same line as their field */
.nf-page-account-create .TableContentContainer td { vertical-align: middle !important; }
.nf-page-account-create .TableContentContainer td.LabelV,
.nf-page-account-create .TableContentContainer td:first-child { padding-top: 6px; padding-bottom: 6px; }
.nf-lost-intro { margin: 2px 0 12px; line-height: 1.6; }
/* basic.css pins the submenu at 160px: on phones the drawer is full-width, on desktop the column is wider */
.Submenu { width: auto !important; margin-right: 0 !important; }

/* ===== 2026-10-21 — client item card on the character sheet =====
   Mirrors the game tooltip (gameinterface.otui tooltipItem + item_tooltip.lua):
   #1c181d card, 1px #8a6a2c frame, 64px sprite box with the text column beside it,
   thin separators between sections. Hover or keyboard/tap focus opens it. */
.nf-slot[tabindex] { cursor: help; outline: none; }
.nf-slot[tabindex]:focus-visible { box-shadow: 0 0 0 1px var(--nf-gold-hi); }
.nf-tip {
  position: absolute; z-index: 60; left: calc(100% + 8px); top: -4px;
  display: none; flex-direction: column; min-width: 230px; max-width: 300px; padding: 5px;
  background: #1c181d; border: 1px solid #8a6a2c; border-radius: 2px;
  box-shadow: 0 8px 22px rgba(0,0,0,.75); text-align: left; pointer-events: none;
  font: 12px/1.35 Verdana, sans-serif; color: #dfdfdf; white-space: normal;
}
.nf-slot:hover > .nf-tip, .nf-slot:focus > .nf-tip, .nf-slot:focus-within > .nf-tip { display: flex; }
.nf-tip-top { display: flex; gap: 8px; min-height: 70px; }
.nf-tip-sprite {
  position: relative; flex: 0 0 64px; width: 64px; height: 64px; margin: 1px;
  display: grid; place-items: center; background: #120f12; border: 1px solid #2c2416;
}
.nf-tip-sprite img { width: 64px; height: 64px; max-width: none; max-height: none; image-rendering: pixelated; }
.nf-tip-sprite b { position: absolute; right: 3px; bottom: 1px; font: bold 11px Verdana, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.nf-tip-head { display: flex; flex-direction: column; min-width: 0; }
.nf-tip-head .nf-tip-row:first-child { font-weight: bold; }
.nf-tip-row { display: block; overflow-wrap: anywhere; }
.nf-tip-sep { display: block; height: 1px; margin: 5px 0 4px; background: linear-gradient(90deg, transparent, #8a6a2c 18%, #8a6a2c 82%, transparent); }
/* right-hand column cards open to the left so they stay on screen */
.nf-eq-grid > .nf-slot:nth-child(3n) > .nf-tip { left: auto; right: calc(100% + 8px); }

/* the owner's backpack, drawn like the client container window */
.nf-container-win {
  position: relative; margin: 0 18px 18px; border: 1px solid #8a6a2c; border-radius: 3px;
  background: linear-gradient(180deg, #1c181d, #141114);
}
.nf-container-head {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-bottom: 1px solid rgba(138,106,44,.6); background: linear-gradient(180deg, rgba(200,155,75,.14), transparent);
}
.nf-container-icon img { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
.nf-container-title { font: bold 12px/1 'Cinzel', Georgia, serif; letter-spacing: 1px; color: var(--nf-gold-hi); }
.nf-container-cap { margin-left: auto; font: 10px/1 Verdana, sans-serif; color: var(--nf-text-dim); }
.nf-container-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 40px); grid-auto-rows: 40px; gap: 3px;
  padding: 8px;
}
.nf-cslot img { max-width: 32px; max-height: 32px; }
.nf-cslot.empty:before, .nf-cslot.empty:after { display: none; }
.nf-hero-invite { margin: 10px 0 0; font: 11px/1.5 Verdana, sans-serif; color: var(--nf-text-dim); }
.nf-hero-invite b { color: var(--nf-gold-hi); }
.nf-hero-invite a { color: var(--nf-gold); }