/* =========================================================
   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; } }

/* พื้นหลังเว็บ = กระดาษเข้ม (ย้อมจาก tooltip_common ของเกม แล้วต่อเป็น tile ไร้รอยต่อ) —
   ใช้เฉพาะบนเบราว์เซอร์: ในเกม _Layout ทับด้วย transparent อยู่แล้ว (ดู html.webview-overlay) */
body {
  margin: 0;
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: 'Sarabun','Segoe UI',sans-serif;
  color: var(--text);
  background: url('/img/ui/bg_paper_dark.png') repeat, #241d14;
  background-size: 512px 512px;
  background-attachment: fixed;
  min-height: 100vh; overflow-x: hidden;
}
/* ของประดับธีมเก่า (วงรูน/เมือง/อนุภาค) ขัดกับพื้นกระดาษ — ปิดบนเบราว์เซอร์ (ในเกมปิดอยู่แล้ว) */
.rune-circle, .city, .particles { display: none !important; }

/* ---- 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: url('/img/ui/bg_paper_dark.png') repeat; background-size: 256px 256px;
  border-right: 2px solid #8a6a39;
  box-shadow: 4px 0 18px rgba(0,0,0,.55);
}
.side-brand {
  font-family:'Cinzel','Mitr',serif; font-weight:700; font-size:1.05rem; color:#4a3518;
  text-decoration:none; display:block; text-align:center; text-shadow:none;
  border-style:solid; border-color:transparent; border-width:14px 38px; border-radius:0;
  border-image:url('/img/ui/title.png') 28 86 fill stretch; padding:0 .2rem; margin-bottom:.5rem;
}
/* the global a:hover (site.css:45) outranks .side-brand — pin the wood-sign brown on hover too */
.side-brand:hover { color:#4a3518; filter:brightness(1.08); }
.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 { color:#e6d6b4; }
.side-links a:hover { color:#e6d6b4; background: rgba(217,164,65,.16); box-shadow:none; }
.side-links a.active { background: rgba(217,164,65,.32); color:#fff6e2; box-shadow:inset 0 0 0 1px #d9a441; }
.side-user { color:#d9a441; font-size:.85rem; opacity:.95; }
.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; }
/* ชิปกรอง = แผ่นกระดาษ tooltip (เดิม gradient ครีม + ขอบน้ำตาล = ธีมเว็บเก่า) */
.cf-chip {
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; user-select:none;
  font-size:.8rem; font-weight:700; line-height:1; padding:0 .35rem; color:#5a3a14; text-decoration:none;
  background:none; border:11px solid transparent; border-radius:0;
  border-image:url('/img/ui/paper.png') 16 fill stretch;
  filter:grayscale(.35) brightness(.97); transition:filter .15s, color .15s;
}
.cf-chip:hover { filter:none; color:#824e12; }
/* ชิปที่เลือกอยู่ = กระดาษเต็มสี + เรืองทอง (เดิมเป็นน้ำเงิน bootstrap ซึ่งตอนนี้หลุดโทน) */
.cf-chip.active {
  color:#7a4a10; filter:drop-shadow(0 0 5px rgba(217,164,65,.85));
}
.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 — shared by /Tails + /Item via _ItemCard ----
   พื้น = กระดาษ tooltip ของเกมจริง (tooltip_common) แบบ 9-slice ⇒ การ์ด hover หน้าตาเท่ากับ tooltip
   ไอเทมในเกมเป๊ะ (เดิมเป็น gradient ครีม + ขอบน้ำตาล 2px). เงาไม่ใช้ box-shadow เพราะจะเป็นสี่เหลี่ยม
   คร่อมขอบกระดาษที่ขาดเป็นริ้ว — #ig-hoverpop ใส่ drop-shadow ให้แล้วใน site.js */
.ig-card { background:none; color:#4a3518; border:13px solid transparent; border-radius:0;
           border-image:url('/img/ui/paper.png') 16 fill stretch; box-shadow:none;
           padding:.15rem .25rem; 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; }
/* ไอคอนวางในช่องไอเทมของเกม (icons/common/item_normal) แทนกล่องเทาโปร่ง */
.ig-icon img { height:46px; width:46px; image-rendering:pixelated; display:block; padding:3px;
               background:url('/img/ui/slot.png') center/100% 100% no-repeat; border-radius:0; }
.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; }
/* ป้ายไอเทม/ของดรอปพร้อมไอคอน = แผ่นกระดาษ tooltip (เดิม gradient ครีม + ขอบน้ำตาล) */
.item-chip { background:none; color:#5a3a14; border:11px solid transparent; border-radius:0;
             border-image:url('/img/ui/paper.png') 16 fill stretch;
             padding:0 .2rem; font-size:.8rem; font-weight:700; transition:filter .15s; }
.item-chip:hover { filter:brightness(1.05) drop-shadow(0 0 4px rgba(217,164,65,.6)); color:#824e12; }
/* % ในป้ายไอเทม = ตัวเลขเปล่า ไม่ต้องมีกรอบซ้อนกรอบ (user 29/7) */
.item-chip .rate { color:#9a5410; font-weight:800; }
/* 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); }
/* เมนู/แท็บด้านข้าง (ร้าน NPC · สถานีคราฟ · หมวดแลกเปลี่ยน · ช่องสวมใส่) = แผ่นกระดาษ tooltip ใบเดียว
   แถวข้างในโปร่ง คั่นด้วยเส้นประ — ชุดเดียวกับรายการกิลด์/เมนูบทในหน้าด่าน (user 29/7).
   ⚠️ กฎเก่าที่ทำแต่ละแถวเป็น "การ์ดครีม" ถูกแทนที่ตรงนี้ ไม่ใช่เพิ่มกฎใหม่ท้ายไฟล์ — ของเดิมใช้
   !important ทุกบรรทัด การเพิ่มท้ายไฟล์จึงถูกกฎเก่าคาไว้ (เสียเวลาไป 3 รอบเพราะข้อนี้) */
.parchment-tabs { background:transparent; border:13px solid transparent; border-radius:0;
    border-image:url('/img/ui/paper.png') 16 fill stretch;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); padding:.1rem .15rem; }
.parchment-tabs .list-group-item {
    background:transparent !important; color:#4a3518 !important; font-weight:700;
    border:0 !important; border-bottom:1px dotted rgba(138,106,57,.45) !important; border-radius:0 !important;
    margin-bottom:0; padding:.35rem .4rem; transition:background .15s; }
.parchment-tabs .list-group-item:last-child { border-bottom:0 !important; }
.parchment-tabs .list-group-item:hover { background:rgba(217,164,65,.16) !important; color:#3a2a10 !important; box-shadow:none; }
.parchment-tabs .list-group-item.active {
    background:rgba(217,164,65,.32) !important; color:#3a2a10 !important;
    box-shadow:inset 0 0 0 1px #d9a441; }
.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; }

/* ===== game-texture skin (.gpanel) — เท็กซ์เจอร์จริงจากบันเดิลเกม =====
   พื้นการ์ด = typefield (ช่องพิมพ์ในเกม) · ป้ายหัวข้อ = noticebar2 (ป้ายกรอบไม้แกะสลัก, ลบคำ "Message" ออก)
   ทุกอันวาดด้วย **border-image 9-slice** ไม่ใช่ background-size:100% — ไม่งั้นขอบ/กรอบไม้ถูกยืดจนเบลอ.
   ใช้คู่กับ .parchment (`class="card parchment gpanel"`): .parchment คุมสีตัวอักษร, .gpanel คุมพื้น/ขอบ. */
.gpanel { background:none !important; border:15px solid transparent !important; border-radius:0 !important;
          border-image:url('/img/ui/paper.png') 16 fill stretch !important;
          box-shadow:none !important; filter:drop-shadow(0 3px 9px rgba(0,0,0,.45)); }
/* ป้ายหัวข้อ = กว้างพอ ๆ ข้อความ (ไม่ยืดเต็มการ์ด) + อยู่กลาง + คร่อมขอบบนของการ์ด */
.gpanel > .card-header {
    background:none !important; border-style:solid !important; border-color:transparent !important;
    border-width:15px 40px !important; border-radius:0 !important;
    border-image:url('/img/ui/title.png') 28 86 fill stretch !important;
    align-self:center; max-width:100%; min-width:170px; padding:0 .35rem !important; margin:-1.1rem 0 -.1rem !important;
    color:#4a3518 !important; font-weight:800; font-size:1rem; line-height:1.25; text-align:center; text-shadow:none; }
.gpanel > .card-body { padding:.45rem .7rem .6rem; }
/* พื้นกระดาษอ่อน → ตัวรองต้องเข้มกว่าค่าเริ่มต้น ไม่งั้นจาง */
.gpanel .text-muted, .gpanel .small.text-muted { color:#6a5124 !important; }
/* ช่องกรอกในการ์ด = typefield เหมือนกัน แต่ทึบกว่าเล็กน้อยให้เห็นว่าพิมพ์ได้ */
.gpanel .form-control { background:#fbf3df; border:1px solid #a98b57; color:#3a2a10; box-shadow:inset 0 1px 3px rgba(0,0,0,.18); }
.gpanel .form-control:focus { border-color:#d9a441; box-shadow:0 0 0 .18rem rgba(217,164,65,.35); }

/* ---- ปุ่มหลัก = ปุ่มไม้ของเกม (common/button_ok ที่ลบคำ "Okay" ออก) แทนปุ่มน้ำเงินเดิม ---- */
.btn-primary, .btn-rpg {
    background:none !important; border-style:solid !important; border-color:transparent !important;
    border-width:7px 9px 9px 22px !important; border-radius:0 !important;
    border-image:url('/img/ui/btn_wood.png') 9 11 11 26 fill stretch !important;
    color:#f6e8c8 !important; text-shadow:0 1px 2px rgba(0,0,0,.8) !important; font-weight:700;
    padding:.22rem .5rem .1rem !important; line-height:1.15; box-shadow:none !important; }
.btn-primary:hover, .btn-rpg:hover {
    filter:brightness(1.14) drop-shadow(0 0 4px rgba(255,214,140,.55)); color:#fff6e2 !important;
    transform:translateY(-1px); box-shadow:none !important; }
.btn-primary:active, .btn-rpg:active { transform:translateY(0); filter:brightness(.94); }

/* ---- character grid (หน้า /Me) — การ์ดต่อตัว ไม่ใช่แถวยาว: 12 ช่อง = 2 แถวจบ ---- */
.ch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:.6rem; }
.ch-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:.15rem;
           padding:.1rem .2rem .25rem; text-align:center; color:#4a3518;
           border:13px solid transparent; border-radius:0; border-image:url('/img/ui/paper.png') 16 fill stretch;
           filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); transition:filter .15s; }
.ch-card:hover { filter:drop-shadow(0 0 5px rgba(217,164,65,.8)) drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
/* รูปตัวละคร = วงกลม วางบนจานวงกลมของเกม (charselect/inactive) · hover = วงเรืองแสง (charselect/hover) */
.ch-por { width:84px; height:84px; border-radius:50%; overflow:hidden; flex:0 0 auto;
          background:url('/img/ui/circle.png') center/contain no-repeat; }
.ch-por img { width:100%; height:100%; object-fit:contain; object-position:center bottom; padding:6px 4px 2px; }
.ch-card:hover .ch-por { background-image:url('/img/ui/circle_h.png'); }
.ch-name { font-weight:800; color:#4a3518; line-height:1.15; word-break:break-word; }
.ch-meta { font-size:.78rem; color:#6a5124; line-height:1.15; }
.ch-edit { margin-top:.3rem; font-size:.72rem; font-weight:700; cursor:pointer; color:#f6e8c8;
           text-shadow:0 1px 2px rgba(0,0,0,.8); padding:.16rem .32rem .06rem; line-height:1.15; background:none;
           border-style:solid; border-color:transparent; border-width:6px 8px 8px 18px; border-radius:0;
           border-image:url('/img/ui/btn_wood.png') 9 11 11 26 fill stretch; }
.ch-edit:hover { filter:brightness(1.14); color:#fff6e2; }
.ch-form { display:none; width:100%; margin-top:.3rem; }
.ch-card.editing .ch-form { display:block; }
.ch-card.editing .ch-edit { display:none; }
.ch-form .form-control { font-size:.8rem; text-align:center; }

/* ---- floating back button = ปุ่ม Back ไม้ของเกมเอง (optionmenu/button_back_h) ---- */
#ovlBack { position:fixed; top:8px; left:10px; z-index:1035; width:99px; height:40px; padding:0;
           border:0; border-radius:0; background:url('/img/ui/btn_back.png') center/contain no-repeat;
           font-size:0; box-shadow:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
           transition:filter .1s ease, transform .1s ease; }
#ovlBack:hover { filter:brightness(1.12) drop-shadow(0 0 4px rgba(255,220,140,.6)); transform:translateY(-1px); }
#ovlBack:active { transform:translateY(0); filter:brightness(.95); }
/* เว็บนอกเกม (sidebar 212px + hamburger บนมือถือ) → หลบให้พ้น ไม่ทับเมนู */
body:not(.ingame) #ovlBack { left:224px; }
@media (max-width: 991.98px) { body:not(.ingame) #ovlBack { left:56px; } }
/* ปุ่มลอยทับคอนเทนต์แถวแรก → เว้นที่ให้มันเสมอเมื่อมีปุ่ม */
body.has-back .app-main { padding-top:3.4rem !important; }

/* ป้ายไม้เดี่ยว ๆ สำหรับหัวข้อกลุ่มที่ไม่ได้อยู่ในการ์ด (เช่น "รางวัล 7 วัน" ในหน้าเควสรายวัน)
   = ป้ายเดียวกับ .gpanel > .card-header แต่ยืนเองได้ ไม่ต้องมีการ์ดครอบ */
.gplate { display:inline-block; border-style:solid; border-color:transparent; border-width:15px 40px;
          border-image:url('/img/ui/title.png') 28 86 fill stretch; min-width:170px; padding:0 .35rem;
          color:#4a3518; font-weight:800; font-size:1rem; line-height:1.25; text-align:center; }
/* ปุ่มไม้ตอนกดไม่ได้ = จางลง ไม่เด้ง (ไม่งั้นดูเหมือนกดได้) */
.btn-primary:disabled, .btn-rpg:disabled, .btn-primary.disabled, .btn-rpg.disabled {
    filter:grayscale(.55) brightness(.82); opacity:.75; transform:none !important; cursor:not-allowed; }

/* กล่องข้อความบนกระดาษ tooltip (คำอธิบายหัวหน้า/หมายเหตุท้ายหน้า) — วัสดุเดียวกับ tile หน้าเมนู */
.gpaper { border:13px solid transparent; border-radius:0; border-image:url('/img/ui/paper.png') 16 fill stretch;
          color:#4a3518; padding:.1rem .3rem; filter:drop-shadow(0 2px 7px rgba(0,0,0,.4)); }
.gpaper b { color:#5a3a14; }

/* ชิป/ป้ายกระดาษ (สถานะ · ชนิดไอเทม · จำนวน) — แผ่นกระดาษ tooltip ย่อ ไม่ใช่ pill สี
   (กฎ user 29/7: กรอบทุกอันเป็น tooltip เป็นค่าเริ่มต้น) */
.gchip { display:inline-block; font-size:.74rem; font-weight:700; color:#5a3a14; white-space:nowrap;
         padding:0 .25rem; background:none; border:9px solid transparent; border-radius:0;
         border-image:url('/img/ui/paper.png') 16 fill stretch; }
/* "ใช้ไปแล้ว" = จมลง (กระดาษหม่นกว่า) แทนการเปลี่ยนสีพื้น */
.gchip.done { color:#6a5124; filter:grayscale(.35) brightness(.94); }
/* "รับแล้ว" = ชิปกระดาษที่ดู "ใช้ไปแล้ว" (จม+ทึบ) — เดิมเป็นเขียวอ่อนซึ่งหลุดโทนบนพื้นกระดาษ (user 29/7) */

/* ข้อความรอง (.small / .text-muted) ของธีมเว็บเป็นเทาอมฟ้า ทำมาสำหรับพื้นน้ำเงินเข้ม —
   บนแผ่นกระดาษมันจางจนอ่านไม่ออก ⇒ บังคับเป็นน้ำตาลทุกที่ที่อยู่บน .gpaper/.gpanel */
.gpaper, .gpaper .small, .gpaper .text-muted, .gpanel .small { color:#4a3518 !important; }
.gpaper .text-muted { color:#6a5124 !important; }

/* ข้อความบรรทัดรองในปุ่มไม้ — ต้องอยู่ท้ายสุดและเจาะจงกว่ากฎ .gpanel/.gpaper ข้างบน
   ไม่งั้นสีน้ำตาลของพื้นกระดาษจะชนะแล้วตัวหนังสือจมหายไปในเนื้อไม้ */
.btn-rpg .small, .btn-primary .small, .btn-rpg small, .btn-primary small,
.gpanel .btn-rpg .small, .gpanel .btn-primary .small,
.gpaper .btn-rpg .small, .gpaper .btn-primary .small {
    color:#f0dcae !important; opacity:.95; text-shadow:0 1px 2px rgba(0,0,0,.85); }

/* หน้าข้อมูลในเมนู (ไอเทม/มอน/ด่าน/ร้าน/คราฟ/แลก/กาชา/12หาง/ตาราง): ข้อความรองบนกระดาษต้องเป็นน้ำตาล
   — .text-muted/.small ของธีมเป็นเทาอมฟ้าสำหรับพื้นเข้ม ซึ่งจางหายบนแผ่นกระดาษ */
.gpaper .text-muted, .gpanel .text-muted, .gpaper .fst-italic, .gpanel .fst-italic { color:#6a5124 !important; }
.gpanel .table { color:#4a3518; --bs-table-color:#4a3518; }
.gpanel .table thead tr, .gpanel .table thead th { color:#7a5a1e !important; }
.gpanel .table th, .gpanel .table td { border-color:rgba(138,106,57,.35); }
.gpanel .table-hover > tbody > tr:hover > * { background:rgba(217,164,65,.16) !important; color:#3a2a10 !important; }
.gpanel .form-control, .gpanel .form-select, .gpaper .form-control {
    background:#fbf3df; border:1px solid #a98b57; color:#3a2a10; }

/* โทนสีชนิดมอนบนชิปกระดาษ (แทนพื้นสี bootstrap เดิม) */
.tier-common { color:#6a5124 !important; }
.tier-elite { color:#2a4d8f !important; }
.tier-miniboss { color:#8a5a12 !important; }
.tier-boss { color:#a3341c !important; }
.tier-structure { color:#2e6a2e !important; }

/* โทนสถานะบนชิปกระดาษ (ด่าน/ออเดอร์/ทั่วไป) — st-ok/wait/info/off มีอยู่แล้วในหน้า TopUpHistory */
.st-ok { color:#2e6a2e !important; }
.st-wait { color:#8a5a12 !important; }
.st-bad { color:#a3341c !important; }
.st-off { color:#6a5124 !important; }

/* กล่องแจ้ง/เน้นข้อความ = แถบ noticebar ของเกม (ต่างจาก .gpaper ที่เป็นกระดาษเปล่า) */
.gnotice { border:11px solid transparent; border-left-width:46px; border-right-width:46px; border-radius:0;
           border-image:url('/img/ui/noticebar.png') 11 46 fill stretch; color:#4a3518;
           padding:.1rem .2rem; margin:.25rem 0; }
.gnotice b { color:#5a3a14; }

/* ช่องค้นหา/ช่องกรอกในหน้าเมนูย่อย = ช่องกระดาษเดียวกับหน้ากิลด์ (เดิมเป็น input ธีมเข้ม พื้นน้ำเงิน) */
.app-main .form-control, .app-main .form-select {
    background:#fbf3df; border:1px solid #a98b57; color:#3a2a10; }
.app-main .form-control::placeholder { color:#8a7448; }
.app-main .form-control:focus, .app-main .form-select:focus {
    background:#fffaf0; border-color:#d9a441; color:#3a2a10; box-shadow:0 0 0 .18rem rgba(217,164,65,.35); }

/* ลิงก์ที่อยู่บนกระดาษ (ชื่อไอเทมที่คราฟได้/ชื่อสูตร/ของในกล่อง) = น้ำตาลเข้ม — ไม่ใช่ฟ้าของธีมพื้นเข้ม */
.gpaper a, .gpanel a, .parchment-tabs a, .item-chip, .gnotice a { color:#5a3a14; }
.gpaper a:hover, .gpanel a:hover, .parchment-tabs a:hover, .gnotice a:hover { color:#9a5410; }

/* ---- Admin: ให้เข้าธีมเท่าที่จำเป็น (GM ใช้เอง — เน้นอ่านออก ไม่ต้องสวยเท่าหน้าผู้เล่น) ----
   ตารางและฟอร์มที่อยู่บนกระดาษได้โทนน้ำตาลจากกฎ .gpanel/.gpaper อยู่แล้ว ตรงนี้เก็บที่เหลือ:
   หัวข้อย่อย h2-h6 ในพาเนล + ป้ายสถานะที่ยังใช้สีตัวอักษรของธีมเข้ม */
.gpanel h2, .gpanel h3, .gpanel h4, .gpanel h5, .gpanel h6,
.gpaper h2, .gpaper h3, .gpaper h4, .gpaper h5, .gpaper h6 { color:#5a3a14; text-shadow:none; }
.gpanel .text-success, .gpaper .text-success { color:#2e6a2e !important; }
.gpanel .text-danger,  .gpaper .text-danger  { color:#a3341c !important; }
.gpanel .text-warning, .gpaper .text-warning { color:#8a5a12 !important; }
.gpanel .text-info,    .gpaper .text-info    { color:#2a4d8f !important; }
.gpanel code, .gpaper code { color:#7a4a14; }
.gpanel .form-check-label, .gpaper .form-check-label { color:#4a3518; }
.gpanel hr, .gpaper hr { border-color:rgba(138,106,57,.45); }

/* ป้ายกำกับฟอร์มบนกระดาษ (หน้า login / ฟอร์มแอดมิน) — .form-label ของธีมเป็นเทาอมฟ้า จมบนกระดาษ */
.gpanel .form-label, .gpaper .form-label, .auth-card .form-label { color:#5a3a14; font-weight:700; }

/* ตารางที่วางบน .gpaper (ไม่ใช่ .gpanel) — เช่น /Admin/Members: ตัวหนังสือยังเป็นสีของธีมพื้นเข้ม
   เลยจางจนอ่านไม่ออกบนกระดาษ. ครอบให้เหมือน .gpanel ทุกอย่าง */
.gpaper .table { color:#4a3518; --bs-table-color:#4a3518; }
.gpaper .table thead tr, .gpaper .table thead th { color:#7a5a1e !important; }
.gpaper .table th, .gpaper .table td { border-color:rgba(138,106,57,.35); }
.gpaper .table-hover > tbody > tr:hover > * { background:rgba(217,164,65,.16) !important; color:#3a2a10 !important; }
/* ข้อความในเซลล์ที่ถูกห่อด้วย div/span ต้องสืบสีจากตาราง ไม่ใช่จาก body ของธีมเข้ม */
.gpaper .table td div, .gpaper .table td span:not(.gchip):not([class*="st-"]),
.gpanel .table td div, .gpanel .table td span:not(.gchip):not([class*="st-"]) { color:inherit; }