/* =========================================================
   12TailsMemo — Dark Fantasy Nostalgia MMORPG theme
   ========================================================= */
:root {
  --arcane:  #1D4ED8;
  --night:   #0B1020;
  --night2:  #111a33;
  --panel:   rgba(18, 26, 52, .72);
  --cyan:    #4FD1FF;
  --rune:    #6EE7FF;
  --gold:    #D9A441;
  --gold-l:  #f0c773;
  --bronze:  #8B5E34;
  --crimson: #C63C3C;
  --purple:  #7A5AF8;
  --text:    #d6def0;
  --text-dim:#9aa6c4;
}

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px){ html { font-size: 16px; } }

body {
  margin: 0;
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: 'Sarabun','Segoe UI',sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% -5%, rgba(29,78,216,.35), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(122,90,248,.28), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(79,209,255,.18), transparent 60%),
    linear-gradient(180deg, #0B1020 0%, #0d1430 45%, #0a0f22 100%);
  background-attachment: fixed;
  min-height: 100vh; overflow-x: hidden;
}

/* ---- typography ---- */
h1,h2,h3,h4,h5,.fantasy-font {
  font-family:'Cinzel','Mitr',serif; color: var(--gold-l); letter-spacing:.3px;
  text-shadow: 0 0 14px rgba(79,209,255,.25);
}
.logo-font { font-family:'Cinzel','Mitr',serif; font-weight:700; }
a { color: var(--cyan); text-decoration:none; }
a:hover { color: var(--rune); }
.text-muted { color: var(--text-dim) !important; }
.small { color: var(--text-dim); }

/* ---- background decor: rune circle / particles / city / auras ---- */
.sky-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.rune-circle {
  position: fixed; top: 46%; left: 50%; width: min(78vw, 720px); aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none; opacity: .22;
  border-radius: 50%; border: 2px solid var(--rune);
  box-shadow: 0 0 60px rgba(79,209,255,.25), inset 0 0 60px rgba(29,78,216,.3);
}
.rune-circle::before { /* rotating dashed ring */
  content:""; position:absolute; inset: 7%; border-radius:50%;
  border: 3px dashed rgba(110,231,255,.7); animation: spin 60s linear infinite;
}
.rune-circle::after { /* tick ring (conic) rotating the other way */
  content:""; position:absolute; inset: 16%; border-radius:50%;
  background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(217,164,65,.55) 7deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
  animation: spin 90s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.particles { position: fixed; inset:0; z-index:0; pointer-events:none; }
.particles i {
  position:absolute; bottom:-10px; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #d8f6ff, var(--cyan));
  box-shadow: 0 0 10px 3px rgba(79,209,255,.8); opacity:0;
  animation: rise linear infinite;
}
@keyframes rise {
  0%{ transform: translateY(0) scale(.5); opacity:0; }
  12%{ opacity:.95; }
  100%{ transform: translateY(-108vh) scale(1); opacity:0; }
}

.city { position: fixed; bottom:0; left:0; right:0; height:160px; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(4,7,18,.92));
}
.city::before { content:""; position:absolute; bottom:0; left:0; right:0; height:96px;
  background:
    radial-gradient(2px 2px at 12% 40%, rgba(79,209,255,.9), transparent),
    radial-gradient(2px 2px at 27% 60%, rgba(217,164,65,.9), transparent),
    radial-gradient(2px 2px at 41% 35%, rgba(79,209,255,.8), transparent),
    radial-gradient(2px 2px at 63% 55%, rgba(217,164,65,.8), transparent),
    radial-gradient(2px 2px at 78% 45%, rgba(79,209,255,.9), transparent),
    radial-gradient(2px 2px at 90% 62%, rgba(217,164,65,.8), transparent),
    repeating-linear-gradient(90deg, #060a18 0 38px, #0a1024 38px 46px, #070c1c 46px 92px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%);
  clip-path: polygon(0 100%,0 55%,5% 55%,5% 30%,10% 30%,10% 60%,16% 60%,16% 40%,22% 40%,22% 70%,30% 70%,30% 25%,36% 25%,36% 62%,44% 62%,44% 48%,52% 48%,52% 68%,60% 68%,60% 33%,66% 33%,66% 58%,74% 58%,74% 42%,82% 42%,82% 66%,90% 66%,90% 38%,96% 38%,96% 60%,100% 60%,100% 100%);
}

header, main, footer { position: relative; z-index: 2; }
/* sticky footer via flex: main wrapper grows so footer never overlaps content */
body > .container { flex: 1 0 auto; width: 100%; }

/* ---- navbar (dark glass) ---- */
.navbar {
  background: linear-gradient(180deg, rgba(13,20,48,.92), rgba(10,15,34,.82)) !important;
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 22px rgba(79,209,255,.12);
}
.navbar-brand {
  font-family:'Cinzel','Mitr',serif; font-weight:700; font-size:1.25rem;
  color: var(--gold-l) !important; text-shadow:0 0 12px rgba(79,209,255,.5);
}
.navbar-brand::before { content:"🦊 "; }
.navbar .nav-link { color: var(--text) !important; font-weight:600; border-radius:8px; padding:.35rem .7rem; transition:.18s; }
.navbar .nav-link:hover { color:#fff !important; background: rgba(79,209,255,.14); box-shadow:0 0 14px rgba(79,209,255,.4); }
.navbar-toggler { border-color: rgba(217,164,65,.5); }
.navbar-toggler-icon { filter: invert(1) hue-rotate(180deg); }

/* ---- left vertical sidebar nav (replaces the top bar; top bar overflowed) ---- */
.side-nav {
  position: fixed; top:0; left:0; bottom:0; width: 212px; z-index: 1030;
  display:flex; flex-direction:column; overflow-y:auto; padding:.7rem .55rem 1.2rem;
  background: linear-gradient(180deg, rgba(13,20,48,.96), rgba(8,12,28,.97));
  border-right: 2px solid var(--gold);
  box-shadow: 4px 0 18px rgba(0,0,0,.5), 0 0 22px rgba(79,209,255,.10);
}
.side-brand {
  font-family:'Cinzel','Mitr',serif; font-weight:700; font-size:1.2rem;
  color: var(--gold-l); text-shadow:0 0 12px rgba(79,209,255,.5);
  text-decoration:none; padding:.3rem .55rem .7rem; display:block;
}
.side-brand::before { content:"🦊 "; }
.side-links { display:flex; flex-direction:column; gap:.12rem; }
.side-links a, .side-user {
  color: var(--text); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.5rem .7rem; border-radius:8px; transition:.18s; white-space:nowrap;
}
.side-links a:hover { color:#fff; background: rgba(79,209,255,.14); box-shadow:0 0 14px rgba(79,209,255,.4); }
.side-links a.active { background: rgba(217,164,65,.18); color: var(--gold-l); box-shadow:0 0 12px rgba(217,164,65,.25); }
.side-user { color: var(--gold-l); font-size:.85rem; opacity:.9; }
.side-sep { border-color: rgba(217,164,65,.3); margin:.5rem .3rem; }

.app-main { flex:1 0 auto; margin-left: 212px; padding-top: 1rem; }
.app-main > .container { width:100%; }

.nav-toggle { display:none; }
.nav-backdrop { display:none; }

@media (max-width: 991.98px) {
  .side-nav { transform: translateX(-100%); transition: transform .22s ease; width: 240px; }
  .side-nav.open { transform: translateX(0); }
  .app-main { margin-left: 0; padding-top: 3.4rem; }
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    position: fixed; top:.55rem; left:.55rem; z-index:1041; width:42px; height:38px;
    font-size:1.3rem; line-height:1; color: var(--gold-l); cursor:pointer;
    background: linear-gradient(180deg, rgba(13,20,48,.96), rgba(10,15,34,.9));
    border:2px solid var(--gold); border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .nav-backdrop.show { display:block; position:fixed; inset:0; z-index:1029; background:rgba(0,0,0,.5); }
}

/* ---- panels = dark glass + gold rune trim ---- */
.card, .auth-card {
  background: var(--panel); backdrop-filter: blur(8px);
  border: 1px solid rgba(217,164,65,.55); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(79,209,255,.07) inset, 0 0 22px rgba(29,78,216,.18);
  color: var(--text);
}
.card-header {
  background: linear-gradient(180deg, rgba(29,78,216,.5), rgba(13,20,48,.6));
  color: var(--gold-l); font-weight:700; border-bottom:1px solid rgba(217,164,65,.5);
  border-radius: 13px 13px 0 0 !important; text-shadow:0 0 8px rgba(79,209,255,.3);
}
.card-body { color: var(--text); }
.list-group-item { background: rgba(13,20,44,.6); color: var(--text); border-color: rgba(217,164,65,.18); }
.list-group-item-action:hover { background: rgba(79,209,255,.1); color:#fff; }
.list-group-item.active { background: var(--arcane); border-color: var(--gold); color:#fff; }

/* ---- buttons: dark blue, gold outline, cyan glow ---- */
.btn { border-radius: 10px; font-weight:600; transition:.18s; }
.btn-primary, .btn-rpg {
  background: linear-gradient(180deg, #2a55c8, #16265e);
  border: 1.5px solid var(--gold); color: #eaf4ff; text-shadow:0 0 6px rgba(79,209,255,.5);
  box-shadow: 0 0 0 rgba(79,209,255,0);
}
.btn-primary:hover, .btn-rpg:hover {
  background: linear-gradient(180deg, #3a6ae6, #1d39a0); color:#fff;
  transform: translateY(-2px); border-color: var(--gold-l);
  box-shadow: 0 6px 18px rgba(29,78,216,.6), 0 0 18px rgba(79,209,255,.7);
}
.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
  border:1.5px solid var(--gold); color: var(--gold-l); background: rgba(255,255,255,.03);
}
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover {
  background: rgba(217,164,65,.16); color:#fff; box-shadow:0 0 16px rgba(217,164,65,.5);
}
/* outline buttons sitting ON a (light) parchment panel: light-gold text is unreadable there
   → dark text + darker border for contrast (e.g. the "ล้าง" reset btn in the admin log pages) */
.parchment .btn-outline-primary, .parchment .btn-outline-secondary, .parchment .btn-outline-dark {
  color:#5a3a14; border-color:#8a6a39; background:rgba(255,251,240,.5);
}
.parchment .btn-outline-primary:hover, .parchment .btn-outline-secondary:hover, .parchment .btn-outline-dark:hover {
  background:rgba(138,106,57,.18); color:#3a2510; box-shadow:0 2px 8px rgba(138,106,57,.4);
}
/* ===== unified filter/selector chips (rounded pills) — admin editors + wiki filters ===== */
.cf-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.cf-chip {
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; user-select:none;
  font-size:.8rem; font-weight:600; line-height:1; padding:.36rem .72rem;
  border-radius:999px; border:1.5px solid #8a6a39; color:#5a3a14; text-decoration:none;
  background:linear-gradient(170deg,#f0ddb8,#e2c692); transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.cf-chip:hover { border-color:var(--gold); box-shadow:0 2px 8px rgba(217,164,65,.4); color:#824e12; }
.cf-chip.active {
  background:linear-gradient(180deg,#3a6ae6,#1d39a0); color:#fff;
  border-color:var(--gold-l); box-shadow:0 2px 10px rgba(29,78,216,.45);
}
.cf-chip .cf-count { opacity:.72; font-weight:500; }
/* guild emblem = frame (a) layered over emblem (b), same as the in-game composite */
.guild-emblem { position:relative; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.guild-emblem img { position:absolute; left:0; top:0; image-rendering:pixelated; object-fit:contain; }

/* pagination (admin log pages) — match the dark/gold theme */
.pagination .page-link { background:rgba(8,12,28,.7); border-color:rgba(217,164,65,.35); color:var(--gold-l); }
.pagination .page-link:hover { background:rgba(217,164,65,.16); color:#fff; border-color:var(--gold); }
.pagination .page-item.active .page-link { background:linear-gradient(180deg,#3a6ae6,#1d39a0); border-color:var(--gold-l); color:#fff; }
.pagination .page-item.disabled .page-link { background:rgba(8,12,28,.4); color:var(--text-dim); border-color:rgba(217,164,65,.2); }

.btn-danger { background: var(--crimson); border-color:#9e2e2e; }
.btn-outline-danger { color:#ff9b9b; border-color: var(--crimson); }
.form-control, .form-range { background: rgba(8,12,28,.7); border:1px solid rgba(217,164,65,.35); color: var(--text); }
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus { background: rgba(8,12,28,.85); border-color: var(--cyan); box-shadow:0 0 0 .2rem rgba(79,209,255,.25); color:#fff; }

/* ---- hero banner ---- */
.hero {
  text-align:center; padding: 3.4rem 1rem 2.8rem; margin:.5rem 0 2rem; border-radius: 22px;
  background:
    radial-gradient(ellipse at top, rgba(79,209,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(18,26,54,.78), rgba(10,15,34,.7));
  border: 2px solid rgba(217,164,65,.6);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(29,78,216,.22), 0 0 30px rgba(79,209,255,.18);
  position: relative; overflow: hidden; animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{ box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(29,78,216,.22), 0 0 28px rgba(79,209,255,.16);} 50%{ box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 0 70px rgba(29,78,216,.3), 0 0 46px rgba(79,209,255,.4);} }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin-bottom:.3rem;
  background: linear-gradient(180deg, var(--gold-l), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: 0 0 30px rgba(79,209,255,.35); }
.hero .lead { color: var(--text); font-size:1.12rem; }
.hero .soon { display:inline-block; margin-top:.6rem; padding:.35rem 1.2rem; border-radius:999px;
  background: linear-gradient(180deg, var(--purple), var(--arcane)); color:#fff; font-weight:700;
  box-shadow:0 0 18px rgba(122,90,248,.7); border:1px solid rgba(110,231,255,.5); }

.mascots { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:1.3rem; }
.mascots img { height:56px; image-rendering:pixelated;
  filter: drop-shadow(0 0 8px rgba(79,209,255,.5)); animation: bob 3s ease-in-out infinite; }
.mascots img:nth-child(2n){ animation-delay:.5s; } .mascots img:nth-child(3n){ animation-delay:1s; } .mascots img:nth-child(4n){ animation-delay:1.5s; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* ---- feature section cards ---- */
.section-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1rem; }
.feature {
  background: var(--panel); backdrop-filter: blur(6px);
  border:1px solid rgba(217,164,65,.5); border-radius:16px; padding:1.2rem; height:100%;
  box-shadow:0 6px 20px rgba(0,0,0,.45); transition:.2s; text-decoration:none; color:var(--text); display:block;
}
.feature:hover { transform: translateY(-5px); color:#fff;
  border-color: var(--cyan); box-shadow:0 12px 28px rgba(29,78,216,.5), 0 0 22px rgba(79,209,255,.5); }
.feature .ico { font-size:2.2rem; filter: drop-shadow(0 0 10px rgba(79,209,255,.5)); }
.feature h5 { margin:.4rem 0 .3rem; }
.feature .tag { font-size:.72rem; background: var(--arcane); color:#fff; padding:.07rem .55rem; border-radius:999px; box-shadow:0 0 10px rgba(29,78,216,.6); }
.feature .tag.soon { background: rgba(217,164,65,.85); color:#2a1c08; box-shadow:0 0 10px rgba(217,164,65,.5); }

/* ---- pre-register progress ---- */
.prereg { text-align:center; }
.prereg .count { font-family:'Cinzel','Mitr',serif; font-size: clamp(1.8rem,5vw,2.8rem); font-weight:700;
  color: var(--gold-l); text-shadow:0 0 18px rgba(79,209,255,.45); }
.prereg .count b { color: var(--cyan); }
.prereg-bar { position:relative; height:24px; border-radius:999px; margin:1.4rem 0 .4rem;
  background: rgba(8,12,28,.8); border:1px solid rgba(217,164,65,.5); overflow:hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.prereg-fill { height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--arcane), var(--cyan));
  box-shadow: 0 0 16px rgba(79,209,255,.8); transition: width 1s ease; min-width: 2px; }
.prereg-ticks { position:relative; height:1.4rem; }
.prereg-ticks .mk { position:absolute; transform:translateX(-50%); font-size:.72rem; color:var(--text-dim); white-space:nowrap; }
.prereg-ticks .mk i { display:block; width:2px; height:9px; background:var(--gold); margin:0 auto 2px; box-shadow:0 0 6px var(--rune); }
.prereg-ms { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; margin-top:1.2rem; }
.prereg-ms .ms { padding:.6rem .4rem; border-radius:12px; border:1px solid rgba(217,164,65,.4);
  background: rgba(13,20,44,.6); font-size:.82rem; }
.prereg-ms .ms.hit { border-color: var(--cyan); box-shadow:0 0 14px rgba(79,209,255,.5); background: rgba(29,78,216,.25); }
.prereg-ms .ms .at { font-family:'Cinzel',serif; font-weight:700; color:var(--gold-l); }

/* ---- timeline ---- */
.timeline { border-left:2px solid var(--gold); margin-left:.6rem; padding-left:1.3rem; }
.timeline .tl { position:relative; margin-bottom:1rem; }
.timeline .tl::before { content:""; position:absolute; left:-1.73rem; top:.25rem; width:13px;height:13px;
  border-radius:50%; background: var(--cyan); box-shadow:0 0 12px var(--rune); border:2px solid var(--gold); }
.timeline .tl b { color: var(--gold-l); }

/* prereg + timeline when the card uses the parchment skin (readable on tan bg) */
.parchment .prereg .count { color:#5a3a14; text-shadow:none; }
.parchment .prereg .count b { color:#9a5410; }
.parchment .prereg-bar { background:rgba(138,106,57,.28); border-color:rgba(138,106,57,.5); box-shadow:inset 0 1px 4px rgba(0,0,0,.25); }
.parchment .prereg-fill { background:linear-gradient(90deg,#c8902f,var(--gold)); box-shadow:0 0 10px rgba(217,164,65,.6); }
.parchment .prereg-ticks .mk { color:#7a6038; }
.parchment .prereg-ticks .mk i { background:#8a6a39; box-shadow:none; }
.parchment .prereg-ms .ms { background:rgba(255,251,240,.55); border-color:rgba(138,106,57,.45); color:#4a3518; }
.parchment .prereg-ms .ms.hit { border-color:#2e8a2e; box-shadow:0 0 12px rgba(46,138,46,.4); background:rgba(46,138,46,.14); }
.parchment .prereg-ms .ms .at { color:#5a3a14; }
.parchment .timeline { border-left-color:#8a6a39; }
.parchment .timeline .tl b { color:#9a5410; }
.parchment .timeline .tl::before { background:var(--gold); border-color:#8a6a39; box-shadow:none; }

/* ---- footer ---- */
.footer { flex-shrink:0; width:100%;
  background: linear-gradient(180deg, rgba(10,15,34,.6), rgba(6,9,20,.92));
  border-top:2px solid var(--gold); color: var(--text-dim); padding:.8rem 0; margin-top:1.5rem; }
.footer a { color: var(--gold-l); font-weight:600; }
.footer .logo-font { color: var(--gold-l); text-shadow:0 0 10px rgba(79,209,255,.4); }

/* ---- tables / badges compatibility on dark ---- */
.table { color: var(--text); }
.table-hover>tbody>tr:hover>* { background: rgba(79,209,255,.08); color:#fff; }
.table thead th, .table td, .table th { border-color: rgba(217,164,65,.18); }
.badge.bg-light { background: rgba(255,255,255,.1) !important; color: var(--text) !important; border:1px solid rgba(217,164,65,.3); }
.badge.bg-secondary { background: #2a3658 !important; }
.border-bottom { border-color: rgba(217,164,65,.3) !important; }
.alert-success { background: rgba(79,209,255,.12); border-color: var(--cyan); color: var(--text); }
.alert-info { background: rgba(122,90,248,.14); border-color: var(--purple); color: var(--text); }
.nav-tabs { border-bottom-color: rgba(138,106,57,.45); }
.nav-tabs .nav-link { color: var(--text-dim); border:1.5px solid transparent; border-radius:9px 9px 0 0; font-weight:600; }
.nav-tabs .nav-link:hover { color: var(--gold-l); border-color: rgba(138,106,57,.35) rgba(138,106,57,.35) transparent; background:rgba(138,106,57,.12); }
.nav-tabs .nav-link.active {
    background: linear-gradient(170deg,#f0ddb8,#e2c692); color:#4a3518; font-weight:700;
    border-color:#8a6a39 #8a6a39 transparent; }
.auth-card { max-width: 420px; margin: 2rem auto; padding: 1.6rem; }

/* ---- in-game item tooltip card (parchment) — shared by /Tails + /Item via _ItemCard ---- */
.ig-card { background: linear-gradient(170deg,#f0ddb8,#e2c692); color:#4a3518; border:2px solid #8a6a39;
           border-radius:8px; padding:.5rem .6rem; box-shadow:0 3px 10px rgba(0,0,0,.45); font-size:.8rem; }
.ig-namebar { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
              border-bottom:1px solid rgba(138,106,57,.5); padding-bottom:.25rem; margin-bottom:.35rem; }
.ig-name { color:#5a3a14; font-weight:700; line-height:1.15; }
.ig-lv { font-size:.7rem; color:#6a5230; white-space:nowrap; }
.ig-lv.ig-rank { font-weight:700; color:#8a5a12; }
.ig-top { display:flex; gap:.55rem; align-items:center; margin-bottom:.4rem; }
.ig-icon img { height:46px; width:46px; image-rendering:pixelated; background:rgba(0,0,0,.07); border-radius:5px; display:block; }
.ig-meta { font-size:.72rem; border-collapse:collapse; }
.ig-meta td { padding:0 .1rem; }
.ig-meta td:first-child { color:#7a6038; padding-right:.7rem; }
.ig-meta td:last-child { font-weight:600; }
.ig-stats { display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; margin-bottom:.25rem; }
.ig-stat { display:flex; justify-content:space-between; border-bottom:1px dotted rgba(138,106,57,.3); padding:1px 0; }
.ig-stat .k { color:#6a5025; }
.ig-stat .v { font-weight:700; color:#3a2a10; }
.ig-stat.z .v { color:#b29a6c; font-weight:400; }
.ig-hpmp { font-size:.74rem; font-weight:600; color:#2e6a2e; margin-bottom:.1rem; }
.ig-desc { font-style:italic; color:#5c4422; font-size:.72rem; border-top:1px solid rgba(138,106,57,.4); padding-top:.25rem; margin-top:.15rem; }
.ig-special { color:#9a5410; font-weight:700; font-size:.74rem; margin-top:.15rem; }
.ig-foot { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(138,106,57,.4);
           margin-top:.3rem; padding-top:.2rem; font-size:.7rem; color:#7a6038; }
/* whole card as a link (e.g. /Tails equipment) — keep parchment colors, glow on hover */
a.ig-cardlink { display:block; text-decoration:none; }
a.ig-cardlink .ig-card { transition:box-shadow .15s, border-color .15s; }
a.ig-cardlink:hover .ig-card { border-color:var(--gold); box-shadow:0 4px 16px rgba(217,164,65,.45); }

/* ---- generic parchment card skin (monsters / skills / race portraits) ---- */
.parchment { background:linear-gradient(170deg,#f0ddb8,#e2c692) !important; color:#4a3518 !important;
             border:2px solid #8a6a39 !important; border-radius:9px !important; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.parchment .card-header, .parchment > .card-header {
    background:rgba(120,90,45,.20) !important; color:#5a3a14 !important; border-bottom:1px solid rgba(138,106,57,.55) !important; }
.parchment .card-body, .parchment .card-footer { background:transparent !important; color:#4a3518; }
.parchment h1,.parchment h5,.parchment h6,.parchment .fw-bold,.parchment b,.parchment strong { color:#5a3a14; }
.parchment .text-muted,.parchment .small { color:#7a6038 !important; }
.parchment a { color:#7a4a14; }
.parchment a:hover { color:#9a5410; }
.parchment .text-success { color:#2e6a2e !important; }
.parchment .text-warning { color:#9a5410 !important; }
.parchment .text-info, .parchment .text-secondary { color:#5c4422 !important; }
.parchment .table { color:#4a3518; --bs-table-color:#4a3518; }
.parchment .table td, .parchment .table th { border-color:rgba(138,106,57,.3); }
.parchment .badge.bg-light, .parchment .badge.bg-secondary { background:rgba(120,90,45,.18) !important; color:#4a3518 !important; border:1px solid rgba(138,106,57,.5) !important; }
.parchment .border-bottom, .parchment .border { border-color:rgba(138,106,57,.4) !important; }
.parchment .list-group, .parchment .list-group-flush { background:transparent; }
.parchment .list-group-item { background:transparent !important; color:#4a3518 !important; border-color:rgba(138,106,57,.3) !important; }
.parchment .list-group-item-action:hover, .parchment .list-group-item-action:focus { background:rgba(138,106,57,.14) !important; color:#3a2a10 !important; }
.parchment .table-hover > tbody > tr:hover > * { background:rgba(138,106,57,.12) !important; color:#3a2a10 !important; }
.parchment .badge.bg-dark { background:rgba(74,53,24,.85) !important; color:#f0ddb8 !important; }
a.parchment, a .parchment { text-decoration:none; }
a.parchment-link { text-decoration:none; display:block; }
a.parchment-link:hover .parchment,
a.parchment.parchment-hover:hover, .parchment-hover:hover {
    border-color:var(--gold) !important; box-shadow:0 4px 16px rgba(217,164,65,.45) !important; }
/* small parchment chip w/ icon (e.g. used-in-craft list) */
.item-chip { background:linear-gradient(170deg,#f0ddb8,#e2c692); color:#5a3a14; border:1.5px solid #8a6a39;
             border-radius:7px; padding:.22rem .5rem .22rem .32rem; font-size:.8rem; font-weight:600; transition:.15s; }
.item-chip:hover { border-color:var(--gold); box-shadow:0 2px 8px rgba(217,164,65,.4); color:#824e12; }
/* inner card sitting on a parchment panel (brighter, so it stands out) */
.inset-card { background:rgba(255,251,240,.55); border:1px solid rgba(138,106,57,.45); border-radius:7px; color:#4a3518; transition:.15s; }
.inset-card .fw-bold { color:#5a3a14; }
.inset-cardlink { color:inherit; }
.inset-cardlink:hover .inset-card { border-color:var(--gold); box-shadow:0 2px 10px rgba(217,164,55,.4); }
/* sidebar tab lists as individual parchment cards (Wiki chapters / Shop NPCs / Craft stations / slot tabs) */
.parchment-tabs { background:transparent; }
.parchment-tabs .list-group-item {
    background:linear-gradient(170deg,#f0ddb8,#e2c692) !important; color:#4a3518 !important;
    border:1.5px solid #8a6a39 !important; border-radius:8px !important; margin-bottom:.4rem; font-weight:600; transition:.15s; }
.parchment-tabs .list-group-item:hover { border-color:var(--gold) !important; box-shadow:0 2px 8px rgba(217,164,65,.35); color:#824e12 !important; }
.parchment-tabs .list-group-item.active {
    background:linear-gradient(170deg,#ffe9b8,#ecc877) !important; color:#4a3518 !important;
    border-color:var(--gold) !important; box-shadow:0 0 0 2px var(--gold), 0 2px 10px rgba(217,164,65,.4); }
.parchment-tabs .badge { background:rgba(74,53,24,.85) !important; color:#f0ddb8 !important; }
a.ig-cardlink:hover .ig-name { text-decoration:underline; }

/* ===== ตลาดกลาง (/Market) ===== */
.market-section-label { font-size:.8rem; font-weight:700; color:#7a6038; margin:.4rem 0 .25rem; text-transform:uppercase; letter-spacing:.03em; }
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.5rem; }
.market-chip { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; text-decoration:none;
    background:linear-gradient(170deg,#f6e8c8,#ecd6a8); border:1.5px solid #8a6a39; border-radius:8px;
    color:#4a3518; position:relative; transition:box-shadow .15s,border-color .15s; }
.market-chip:hover { border-color:var(--gold); box-shadow:0 3px 12px rgba(217,164,65,.4); }
.market-chip .mc-icon { position:relative; flex:0 0 auto; width:42px; height:42px; display:flex; align-items:center;
    justify-content:center; background:rgba(74,53,24,.1); border-radius:6px; }
.market-chip .mc-icon img { max-width:38px; max-height:38px; image-rendering:auto; }
.market-chip .mc-noicon { font-size:1.4rem; }
.market-chip .mc-qty { position:absolute; right:-4px; bottom:-4px; background:#4a3518; color:#f0ddb8;
    font-size:.7rem; font-weight:700; padding:0 .3rem; border-radius:6px; min-width:16px; text-align:center; }
.market-chip .mc-nu { position:absolute; right:-4px; bottom:-4px; font-size:.6rem; font-weight:800; line-height:1;
    color:#fff; border-radius:3px; padding:1px 3px; }
.market-chip .mc-nu.n { background:#1a7f37; }
.market-chip .mc-nu.u { background:#c0392b; }
.market-chip .mc-body { min-width:0; flex:1 1 auto; }
.market-chip .mc-name { display:block; font-weight:700; color:#5a3a14; font-size:.86rem; line-height:1.15;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.market-chip .mc-sub { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-top:.1rem; }
.market-chip .mc-lv,.market-chip .mc-price,.market-chip .mc-slot { font-size:.72rem; color:#7a6038; }
.market-chip .mc-price { color:#9a5410; font-weight:600; }
.market-chip .mc-slot { background:rgba(74,53,24,.12); padding:0 .35rem; border-radius:5px; }
.market-chip .mc-sell { position:absolute; top:.3rem; right:.4rem; font-size:.66rem; color:#7a6038;
    opacity:0; transition:opacity .15s; white-space:nowrap; }
.market-chip:hover .mc-sell { opacity:.85; }

/* ===== inventory slot grid (Admin ปรับปรุงของ) ===== */
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill, 48px); gap:4px; }
.inv-cell { width:48px; height:48px; border:1.5px solid #8a6a39; border-radius:6px;
    background:rgba(74,53,24,.08); position:relative; cursor:pointer;
    display:flex; align-items:center; justify-content:center; }
.inv-cell.filled { background:linear-gradient(170deg,#f6e8c8,#ecd6a8); }
.inv-cell:hover { border-color:var(--gold); box-shadow:0 0 0 2px rgba(217,164,65,.45); }
.inv-cell img { max-width:38px; max-height:38px; }
.inv-cell .ic { font-size:1.3rem; }
.inv-cell .q { position:absolute; right:-3px; bottom:-3px; font-size:.62rem; font-weight:700; color:#f0ddb8;
    background:#4a3518; padding:0 .25rem; border-radius:6px; min-width:15px; text-align:center; line-height:1.35; }
.inv-cell .sn { position:absolute; left:2px; top:0; font-size:.55rem; color:#7a6038; }
.inv-cell .sn.empty { color:#b9a878; }
/* N/U mark (gear binding), mirrors the in-game corner letter: N=new(green), U=used(red) */
.inv-cell .nu { position:absolute; right:1px; bottom:0; font-size:.6rem; font-weight:800; line-height:1.15;
    padding:0 3px; border-radius:3px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.inv-cell .nu.n { background:#1a7f37; }
.inv-cell .nu.u { background:#c0392b; }
/* equip slot hover card (admin char info) */
/* fixed floating item tooltip (JS-positioned) — never extends the page, flips into view */
.ig-tip { position:fixed; z-index:3000; width:240px; display:none; pointer-events:none; }
.eq-wrap { position:relative; display:inline-block; }
.eq-wrap .eq-card { display:none; position:absolute; z-index:60; top:100%; left:0; width:240px; margin-top:4px; }
.eq-wrap:hover .eq-card { display:block; }
/* search dropdowns: solid background so they don't blend into content behind them */
#searchResults, .search-pop { box-shadow:0 6px 18px rgba(0,0,0,.35); border-radius:6px; overflow:hidden; }
#searchResults .list-group-item, .search-pop .list-group-item { background:#f6e8c8 !important; color:#4a3518 !important;
    border-color:#cbb483 !important; }
#searchResults .list-group-item:hover, .search-pop .list-group-item:hover { background:#ffe9b8 !important; }
/* chips with an icon (dungeon editor) */
.item-chip img { vertical-align:-4px; }
/* real currency icons (gil/jil/rp) inline with text */
.cur-ic { height:1.15em; width:auto; vertical-align:-0.22em; image-rendering:auto; }

/* admin nested reorder list (Shop/Craft/Exchange) — big list of collapsible type groups */
.ord-root { border:1px solid rgba(138,106,57,.3); border-radius:6px; padding:.4rem; }
.ord-group { border:1px solid rgba(138,106,57,.35); border-radius:6px; margin-bottom:.5rem; background:rgba(255,255,255,.4); }
.ord-ghead { display:flex; align-items:center; gap:.35rem; padding:.3rem .5rem; background:rgba(138,106,57,.15);
             border-radius:6px 6px 0 0; cursor:pointer; user-select:none; position:sticky; top:0; z-index:2; }
.ord-ghead .ord-caret { transition:transform .12s; font-size:.8rem; }
.ord-group.ord-collapsed .ord-ghead { border-radius:6px; }
.ord-group.ord-collapsed .ord-ghead .ord-caret { transform:rotate(-90deg); }
.ord-group.ord-collapsed .ord-items { display:none; }
.ord-items { padding:.25rem .4rem; }
.ord-item { display:flex; align-items:center; gap:.4rem; padding:.25rem .2rem; border-bottom:1px dotted rgba(138,106,57,.25); cursor:pointer; }
.ord-item:hover { background:rgba(217,164,65,.12); }
.ord-item:last-child { border-bottom:none; }
.ord-item.ord-dragging, .ord-group.ord-dragging { opacity:.45; }
.ord-group.ord-dragging { outline:2px dashed var(--gold, #d9a441); }
.ord-item .ord-mv { display:flex; flex-direction:column; line-height:.7; }
.ord-item .ord-mv button { font-size:.6rem; padding:0 .25rem; }

/* admin editor modal (Craft / Exchange / Gacha) — เด้งกลางจอ ไม่ต้องเลื่อนหา */
.cm-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1060;
               display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem 2rem; overflow:auto; }
.cm-box { position:relative; width:100%; max-width:640px; margin:auto; }
.cm-box .parchment { margin:0 !important; }
.cm-close { position:absolute; top:-.6rem; right:-.6rem; z-index:2; width:34px; height:34px; border-radius:50%;
            border:2px solid var(--gold,#d9a441); background:#3a2a14; color:#ffe9b8; font-size:1.1rem; line-height:1;
            cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.5); }
.cm-close:hover { background:#5a3a14; }