/* Bitkub Metaverse Database — poringchain.com/bitkub-metaverse/
   Design: deep-space dark theme matching the PoringChain brand system. */

@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=Mitr:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#0A0E1A;
  --bg2:#0F1524;
  --panel:#151B2C;
  --panel2:#1B2338;
  --panel3:#212B44;
  --border:#262F48;
  --border-soft:#1D2540;
  --ink:#EEF1FA;
  --ink2:#98A2C0;
  --ink3:#5C6689;
  --primary:#8B5CF6;
  --primary-dark:#7C3AED;
  --primary-light:#2A2050;
  --sky:#38BDF8;
  --sky-light:#132A38;
  --gold:#FBBF24;
  --gold-dark:#D89B0A;
  --green:#34D399;
  --green-light:#0F2C26;
  --coral:#FB7185;
  --coral-light:#3A1A28;
  --shadow: 0 20px 45px -18px rgba(0,0,0,0.55);
  --shadow-sm: 0 6px 18px -8px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(139,92,246,0.25), 0 12px 30px -10px rgba(139,92,246,0.35);
  --radius: 20px;
  --radius-sm: 12px;
}

:root[data-theme="light"]{
  --bg:#F5F6FB;
  --bg2:#EDEFF7;
  --panel:#FFFFFF;
  --panel2:#F2F3FA;
  --panel3:#E7E9F5;
  --border:#DFE2F0;
  --border-soft:#E7E9F5;
  --ink:#1A1F33;
  --ink2:#5C6480;
  --ink3:#8991AD;
  --primary:#7C3AED;
  --primary-dark:#6D28D9;
  --primary-light:#EFE7FE;
  --sky:#0EA5E9;
  --sky-light:#E0F4FE;
  --gold:#D89B0A;
  --gold-dark:#B57F05;
  --green:#0FA36F;
  --green-light:#E1F8EF;
  --coral:#E11D48;
  --coral-light:#FDE4E9;
  --shadow: 0 20px 45px -18px rgba(30,32,60,0.18);
  --shadow-sm: 0 6px 18px -8px rgba(30,32,60,0.12);
  --glow: 0 0 0 1px rgba(124,58,237,0.18), 0 12px 30px -10px rgba(124,58,237,0.22);
}

*{box-sizing:border-box;min-width:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  width:100%;
  background:var(--bg);
  background-image:
    radial-gradient(600px 300px at 15% -5%, rgba(139,92,246,0.12), transparent 60%),
    radial-gradient(500px 260px at 100% 0%, rgba(56,189,248,0.10), transparent 60%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Mitr',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#1A1300;}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%;}

h1,h2,h3,h4{font-family:'Mitr',sans-serif;font-weight:600;margin:0;color:var(--ink);text-wrap:balance;}
.display{font-family:'Chonburi',cursive;font-weight:400;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,26,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.hd-row{
  display:flex;align-items:center;gap:18px;
  padding:14px 20px;max-width:1180px;margin:0 auto;
}
.hd-logo{display:flex;align-items:center;gap:10px;font-family:'Chonburi',cursive;font-size:1.1rem;color:var(--ink);white-space:nowrap;}
.hd-logo img{height:26px;width:auto;display:block;}
.hd-logo .ico{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--sky));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:var(--glow);
}
.hd-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;justify-content:center;}
.hd-nav a{
  padding:9px 14px;border-radius:999px;font-size:0.9rem;color:var(--ink2);
  transition:all .15s ease;display:flex;align-items:center;gap:6px;
}
.hd-nav a:hover{background:var(--panel2);color:var(--ink);}
.hd-nav a.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:500;}
.hd-back{
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--border);
  font-size:0.86rem;color:var(--ink2);white-space:nowrap;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.hd-back:hover{transform:translateY(-1px);border-color:var(--gold);color:var(--gold);}

.hd-search{
  display:flex;align-items:center;gap:8px;
  background:var(--panel2);border:1px solid var(--border);border-radius:999px;
  padding:8px 14px;min-width:170px;flex-shrink:0;
}
.hd-search input{
  border:none;background:transparent;outline:none;color:var(--ink);
  font-family:'Mitr';font-size:0.85rem;width:100%;
}
.hd-search input::placeholder{color:var(--ink3);}
.hd-search button{border:none;background:none;color:var(--ink3);cursor:pointer;display:flex;padding:0;font-size:0.95rem;}
.hd-search button:hover{color:var(--primary);}

.hd-theme-toggle{
  display:flex;align-items:center;background:var(--panel2);border:1px solid var(--border);
  border-radius:999px;padding:3px;gap:2px;flex-shrink:0;
}
.hd-theme-toggle button{
  border:none;background:transparent;color:var(--ink3);width:30px;height:30px;border-radius:999px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.95rem;
  transition:background .15s, color .15s;
}
.hd-theme-toggle button.active{background:var(--primary);color:#fff;}

@media(max-width:1080px){.hd-search{display:none;}}
@media(max-width:880px){
  .hd-row{flex-wrap:wrap;}
  .hd-nav{order:3;width:100%;justify-content:flex-start;gap:2px;overflow-x:auto;padding-bottom:4px;}
  .hd-nav a{white-space:nowrap;padding:8px 12px;font-size:0.86rem;}
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:64px;padding:38px 20px 44px;
  background:var(--bg2);border-top:1px solid var(--border-soft);
  color:var(--ink3);text-align:center;font-size:0.85rem;
}
.site-footer a{color:var(--gold);}
.site-footer .fw{opacity:.6;margin-top:6px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(56,189,248,0.22), transparent 55%),
    linear-gradient(180deg,#111834 0%, var(--bg) 100%);
  padding:56px 20px 70px;color:#fff;
  border-bottom:1px solid var(--border-soft);
}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,255,255,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 15%, rgba(255,255,255,0.4) 50%, transparent 51%);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;text-align:center;}
.hero-flex{display:flex;align-items:center;gap:36px;text-align:left;}
.hero-text{flex:1;min-width:0;}
.hero-figure{
  flex-shrink:0;width:340px;height:340px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.hero-figure::before{
  content:'';position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.45), transparent 68%);
  filter:blur(6px);
}
.hero-figure img{position:relative;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,0.45));}
@media(max-width:820px){
  .hero-flex{flex-direction:column;text-align:center;}
  .hero-figure{width:240px;height:240px;}
}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--panel2);border:1px solid var(--border);padding:6px 16px;border-radius:999px;
  font-size:0.85rem;margin-bottom:18px;letter-spacing:.02em;color:var(--ink2);
}
.hero h1{font-family:'Chonburi',cursive;font-weight:400;
  background:linear-gradient(100deg,var(--green) 0%, #fff 45%, var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.25;margin-bottom:14px;}
.hero p{max-width:640px;margin:0 auto;color:var(--ink2);font-size:1.02rem;line-height:1.7;}
.hero-flex .hero-text p{max-width:480px;margin:0;}
@media(max-width:820px){.hero-flex .hero-text p{margin:0 auto;}}
.hero-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;}
.hero-flex .hero-stats{justify-content:flex-start;}
@media(max-width:820px){.hero-flex .hero-stats{justify-content:center;}}
.hero-stat{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:16px;padding:12px 22px;min-width:100px;
}
.hero-stat b{display:block;font-size:1.5rem;font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--gold);}
.hero-stat span{font-size:0.78rem;opacity:.75;color:var(--ink2);}

/* ---------- Category grid (home) ---------- */
.section{padding:54px 0;}
.section-head{text-align:center;margin-bottom:32px;}
.section-head h2{font-size:1.7rem;margin-bottom:8px;}
.section-head p{color:var(--ink2);font-size:0.95rem;}
.tag-pill{
  display:inline-block;background:var(--gold);color:#1A1300;
  font-size:0.72rem;font-weight:700;padding:3px 12px;border-radius:999px;margin-bottom:10px;
  letter-spacing:.04em;
}

.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:-30px;position:relative;z-index:2;}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
.cat-card{
  background:var(--panel);border-radius:16px;padding:16px 12px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--glow);border-color:var(--primary);}
.cat-card .cat-ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;position:relative;overflow:hidden;flex-shrink:0;
}
.cat-card .cat-ico img{width:100%;height:100%;object-fit:cover;}
.cat-card .cat-ico .emoji-badge{
  position:absolute;bottom:-3px;right:-3px;font-size:0.66rem;line-height:1;
  background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:1px 3px;
}
.cat-card h3{font-size:0.92rem;}
.cat-card .cnt{font-size:0.7rem;color:var(--ink3);font-weight:500;letter-spacing:.03em;text-transform:uppercase;}

/* ---------- Two-column home layout (popular / quick-links) ---------- */
.home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
@media(max-width:900px){.home-grid{grid-template-columns:1fr;}}
.link-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
@media(max-width:900px){.link-grid-3{grid-template-columns:1fr;}}
.panel-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px 22px;box-shadow:var(--shadow-sm);
}
.panel-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-card-head h3{font-size:1.02rem;display:flex;align-items:center;gap:8px;}
.panel-card-head a{font-size:0.78rem;color:var(--ink3);}
.panel-card-head a:hover{color:var(--gold);}

.mini-row{
  display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:12px;
  transition:background .15s;cursor:pointer;
}
.mini-row:hover{background:var(--panel2);}
.mini-row .thumb{
  width:44px;height:44px;border-radius:10px;background:var(--panel2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.mini-row .thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.mini-row .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mini-row .info .name{font-size:0.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-row .info .sub{font-size:0.72rem;color:var(--ink3);}
.mini-row .tag{font-size:0.68rem;padding:2px 8px;border-radius:999px;background:var(--panel3);color:var(--ink2);flex-shrink:0;}
.mini-row .loc-tag{font-size:0.68rem;color:var(--ink3);display:flex;align-items:center;gap:3px;margin-top:2px;}
.mini-row .view-btn{
  font-size:0.76rem;font-weight:500;padding:6px 14px;border-radius:999px;flex-shrink:0;
  background:var(--primary-light);color:var(--primary);transition:background .15s,color .15s;
}
.mini-row:hover .view-btn{background:var(--primary);color:#fff;}

/* ---------- Tool grid (2x2 real external links) ---------- */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tool-card{
  display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--border);
  transition:transform .15s, border-color .15s;
}
.tool-card:hover{transform:translateY(-2px);border-color:var(--gold);}
.tool-card .ico{font-size:1.2rem;}
.tool-card b{font-size:0.8rem;color:var(--ink);}
.tool-card span{font-size:0.68rem;color:var(--ink3);}

/* ---------- 4-col footer ---------- */
.footer-grid{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;
  text-align:left;padding-bottom:28px;
}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:0.82rem;color:var(--ink);margin-bottom:12px;font-weight:600;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.footer-grid a{font-size:0.82rem;color:var(--ink3);transition:color .15s;}
.footer-grid a:hover{color:var(--gold);}
.footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.footer-brand img{height:22px;width:auto;}
.footer-brand b{font-family:'Chonburi',cursive;font-weight:400;color:var(--ink);font-size:0.95rem;}
.footer-social{display:flex;gap:8px;margin-top:14px;}
.footer-social a{
  width:32px;height:32px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--ink2);
  transition:background .15s,color .15s;
}
.footer-social a:hover{background:var(--primary);color:#fff;}
.footer-bottom{
  border-top:1px solid var(--border-soft);padding-top:20px;text-align:center;
  font-size:0.78rem;color:var(--ink3);
}

/* ---------- Scroll to top ---------- */
.scroll-top-btn{
  position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--coral));color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(0,0,0,0.5);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .15s;
}
.scroll-top-btn.show{opacity:1;pointer-events:auto;}
.scroll-top-btn:hover{transform:translateY(-3px);}

.link-card{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  background:var(--panel2);border:1px solid var(--border);margin-bottom:10px;
  transition:transform .15s, border-color .15s;
}
.link-card:hover{transform:translateX(3px);border-color:var(--gold);}
.link-card .ico{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;flex-shrink:0;background:var(--panel3);
}
.link-card .info b{font-size:0.86rem;display:block;color:var(--ink);}
.link-card .info span{font-size:0.72rem;color:var(--ink3);}
.link-card .go{margin-left:auto;color:var(--ink3);font-size:0.85rem;}

/* ---------- Official media strip (real screenshots / NFT character cards) ---------- */
.media-scroll{
  display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;
  scroll-snap-type:x proximity;
}
.media-scroll::-webkit-scrollbar{height:6px;}
.media-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.media-card{
  flex:0 0 auto;width:170px;border-radius:14px;overflow:hidden;
  background:var(--panel2);border:1px solid var(--border);cursor:zoom-in;scroll-snap-align:start;
  transition:transform .15s, border-color .15s;
}
.media-card:hover{transform:translateY(-3px);border-color:var(--primary);}
.media-card img{width:100%;height:170px;object-fit:cover;}
.media-card.tall{width:150px;}
.media-card.tall img{height:220px;object-fit:contain;background:var(--panel3);}
.media-card.wide{width:260px;}
.media-card.wide img{height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--panel3);}
.media-card .cap{padding:8px 10px;font-size:0.7rem;color:var(--ink3);}
.media-group-label{font-size:0.72rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px;}
.media-group-label:first-child{margin-top:0;}
.source-note{font-size:0.74rem;color:var(--ink3);margin-top:2px;}
.source-note a{color:var(--sky);}

/* ---------- Generic card grid (list pages) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.card{
  background:var(--panel);border-radius:16px;overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--glow);}
.card .thumb{
  aspect-ratio:1/1;background:var(--panel2);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;font-size:2rem;
}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:10px;}
.card .thumb.ph-normal{background:linear-gradient(160deg,var(--panel2),var(--sky-light));}
.card .thumb.ph-elite{background:linear-gradient(160deg,var(--panel2),var(--primary-light));}
.card .thumb.ph-boss{background:linear-gradient(160deg,var(--panel2),var(--coral-light));}
.card .badge{
  position:absolute;top:8px;left:8px;background:var(--primary);color:#fff;
  font-size:0.66rem;font-weight:600;padding:3px 8px;border-radius:999px;
}
.card .badge.lv{background:rgba(10,14,26,0.75);left:auto;right:8px;color:var(--gold);font-family:'JetBrains Mono',monospace;}
.card .badge.boss{background:var(--coral);}
.card .badge.elite{background:var(--gold);color:#1A1300;}
.card .badge.new{background:var(--sky);color:#04222E;left:8px;top:auto;bottom:8px;}
.card-body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:4px;}
.card-body .name{font-size:0.88rem;font-weight:500;line-height:1.35;color:var(--ink);}
.card-body .sub{font-size:0.74rem;color:var(--ink3);}
.rarity-chip{
  display:inline-block;font-size:0.66rem;font-weight:600;padding:2px 8px;border-radius:999px;
  background:var(--sky-light);color:#67D4FB;width:fit-content;
}

/* ---------- Sidebar filter layout (list pages) ---------- */
.filter-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}
@media(max-width:840px){.filter-layout{grid-template-columns:1fr;}}

.filter-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:20px;position:sticky;top:90px;
}
.filter-panel h3{
  font-size:0.78rem;letter-spacing:.08em;color:var(--ink2);text-transform:uppercase;
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.filter-group{margin-bottom:18px;}
.filter-group label{display:block;font-size:0.78rem;color:var(--ink2);margin-bottom:7px;}
.filter-panel input[type=search], .filter-panel select{
  width:100%;border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  font-family:'Mitr';font-size:0.86rem;background:var(--panel2);color:var(--ink);
}
.filter-panel select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2398A2C0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.check-row{display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--ink2);padding:5px 0;cursor:pointer;}
.check-row input{accent-color:var(--primary);width:15px;height:15px;}
.check-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.filter-btn-primary{
  width:100%;padding:11px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-family:'Mitr';font-weight:500;font-size:0.9rem;cursor:pointer;margin-top:4px;
  transition:filter .15s;
}
.filter-btn-primary:hover{filter:brightness(1.1);}
.filter-btn-reset{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;
  background:transparent;color:var(--ink2);font-family:'Mitr';font-size:0.86rem;cursor:pointer;margin-top:8px;
}
.filter-btn-reset:hover{border-color:var(--ink3);color:var(--ink);}

.chip-row{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:7px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);
  font-size:0.82rem;color:var(--ink2);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.chip:hover:not(.active){border-color:var(--primary);color:var(--ink);}
.result-count{font-size:0.82rem;color:var(--ink3);margin:2px 2px 16px;}

/* ---------- Modal ---------- */
.modal-bg{
  display:none;position:fixed;inset:0;background:rgba(4,6,14,0.72);
  z-index:200;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
  backdrop-filter:blur(4px);
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--panel);border-radius:24px;max-width:640px;width:100%;
  padding:0;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,0.7);
  border:1px solid var(--border);
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{
  background:linear-gradient(135deg,var(--primary),var(--sky));padding:24px;color:#fff;position:relative;
  display:flex;gap:16px;align-items:center;
}
.modal-head .thumb{
  width:88px;height:88px;border-radius:18px;background:rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:2.2rem;
}
.modal-head .thumb img{width:100%;height:100%;object-fit:contain;padding:8px;}
.modal-head h3{color:#fff;font-size:1.25rem;}
.modal-head .sub{font-size:0.85rem;opacity:.9;margin-top:4px;}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(255,255,255,0.32);}
.modal-body{padding:22px 24px 26px;}
.modal-body h4{font-size:0.78rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;margin-top:18px;}
.modal-body h4:first-child{margin-top:0;}
.modal-body p{font-size:0.9rem;line-height:1.7;color:var(--ink);margin:0;white-space:pre-line;}
.note-box{
  background:var(--sky-light);border:1px solid #1A3A4A;border-radius:10px;padding:9px 12px;
  font-size:0.78rem;color:#7FD3F5;margin-top:14px;
}
.drop-row,.recipe-row{display:flex;flex-wrap:wrap;gap:8px;}
.drop-chip,.recipe-chip{
  display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--border);
  border-radius:12px;padding:6px 10px 6px 6px;font-size:0.8rem;color:var(--ink);
}
.drop-chip img,.recipe-chip .ic{width:28px;height:28px;object-fit:contain;border-radius:6px;background:#0A0E1A;}
.drop-chip .rate{color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:0.72rem;margin-left:2px;}
.skill-item{background:var(--panel2);border-radius:12px;padding:10px 14px;margin-bottom:8px;}
.skill-item b{font-size:0.86rem;}
.skill-item p{font-size:0.82rem;color:var(--ink2);margin-top:3px;}

/* ---------- Section chapters (monster/map pages) ---------- */
.chapter-block{margin-bottom:44px;}
.chapter-title{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size:1.08rem;font-weight:600;
}
.chapter-title .num{
  width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--sky));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;
}
.chapter-title .zone-note{font-size:0.74rem;color:var(--ink3);font-weight:400;}

/* ---------- Map images ---------- */
.map-figure{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.map-figure img{width:100%;cursor:zoom-in;}
.map-figure .cap{padding:12px 16px;font-size:0.85rem;color:var(--ink2);}
.map-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:14px;}
.map-gallery img{
  aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--panel2);
  border:1px solid var(--border);cursor:zoom-in;
}

/* ---------- Info / guide page ---------- */
.info-card{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.info-card h3{font-size:1rem;margin-bottom:8px;color:var(--sky);}
.info-card p{font-size:0.9rem;line-height:1.8;color:var(--ink2);white-space:pre-line;}

/* ---------- World stat table cards ---------- */
.stat-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;}
.stat-list span{font-size:0.76rem;color:var(--ink2);}
.stat-list b{color:var(--ink);font-weight:500;}

/* ---------- Tribe tabs (skill page) ---------- */
.tribe-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}

/* ---------- Lightbox ---------- */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(2,4,10,0.92);z-index:300;
  align-items:center;justify-content:center;padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:90vh;border-radius:12px;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:60px 20px;color:var(--ink3);}
.empty-state .ico{font-size:2.4rem;margin-bottom:10px;}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-size:0.9rem;font-weight:500;box-shadow:var(--glow);
  transition:transform .15s;
}
.btn-primary:hover{transform:translateY(-2px);}

@media(max-width:600px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
  .modal-head{flex-direction:column;text-align:center;}
}