/* ================================================================
   Hegalot Wiki — Frontend CSS v2
   Design: Dark Fantasy MMORPG — Professional Edition
   ================================================================ */

/* -- Variables --------------------------------------------------- */
:root {
    --bg:           #07080e;
    --surface:      #0d1020;
    --surface-2:    #131828;
    --surface-3:    #1a2035;
    --border:       #1e2640;
    --border-2:     #2a3558;
    --text:         #7a86a0;
    --text-md:      #a0aabf;
    --text-bright:  #d0dae8;
    --heading:      #eaf0f8;
    --gold:         #c8922a;
    --gold-light:   #e8b84a;
    --gold-text:    #f0c060;
    --gold-glow:    rgba(200,146,42,0.14);
    --c-monster:    #b52432;
    --c-boss:       #c8922a;
    --c-item:       #1a6db5;
    --c-npc:        #1a8a50;
    --c-quest:      #c07810;
    --c-zone:       #6535a0;
    --c-misc:       #4a5570;
    --g-monster:    rgba(181,36,50,0.14);
    --g-boss:       rgba(200,146,42,0.18);
    --g-item:       rgba(26,109,181,0.14);
    --g-npc:        rgba(26,138,80,0.14);
    --g-quest:      rgba(192,120,16,0.14);
    --g-zone:       rgba(101,53,160,0.14);
    --g-misc:       rgba(74,85,112,0.14);
    --topnav-h:     58px;
    --sidebar-w:    262px;
    --sidebar-w-collapsed: 78px;
    --radius:       6px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --shadow:       0 4px 28px rgba(0,0,0,0.6);
    --shadow-sm:    0 2px 14px rgba(0,0,0,0.4);
    --tr:           0.15s ease;
    --font:         'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* -- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-md);font-family:var(--font);line-height:1.65;min-height:100vh}
a{color:var(--gold-light);text-decoration:none;transition:color var(--tr)}
a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{color:var(--heading);line-height:1.3}
hr{border:none;border-top:1px solid var(--border)}

/* -- Top Navigation ---------------------------------------------- */
.topnav{position:sticky;top:0;z-index:200;height:var(--topnav-h);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 20px rgba(0,0,0,.5)}
.topnav-inner{max-width:1400px;margin:0 auto;height:100%;display:flex;align-items:center;gap:1.25rem;padding:0 1.5rem}
.topnav-logo{display:flex;align-items:center;flex-shrink:0}
.topnav-logo-img{height:44px;width:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(200,146,42,0.5));transition:filter var(--tr)}
.topnav-logo:hover .topnav-logo-img{filter:drop-shadow(0 0 16px rgba(200,146,42,0.8))}
.brand-reveal{display:inline-block;opacity:0;transform:translateX(-10px) scale(.92);filter:blur(3px);background:linear-gradient(90deg,#f4cd63 0%,#ffd98a 40%,#ff914a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(255,169,76,.45);animation:brand-reveal-in .9s cubic-bezier(.2,.8,.2,1) 4s forwards,brand-reveal-pulse 2.6s ease-in-out 5.2s infinite}
.brand-reveal--top{font-size:1.05rem;font-weight:900;letter-spacing:.02em;margin-left:.45rem}

@keyframes brand-reveal-in{
    0%{opacity:0;transform:translateX(-10px) scale(.92);filter:blur(3px)}
    70%{opacity:1;transform:translateX(2px) scale(1.03);filter:blur(0)}
    100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}
@keyframes brand-reveal-pulse{
    0%,100%{text-shadow:0 0 12px rgba(255,169,76,.38),0 0 0 rgba(255,255,255,0)}
    50%{text-shadow:0 0 18px rgba(255,201,110,.65),0 0 24px rgba(255,145,74,.45)}
}
.topnav-nav{display:flex;align-items:center;gap:.1rem;flex:1;justify-content:center;flex-wrap:wrap}
.topnav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:var(--radius);font-size:.82rem;font-weight:600;color:var(--text-md);border:1px solid transparent;transition:all var(--tr);white-space:nowrap}
.topnav-link:hover{color:#fff;background:var(--surface-2);border-color:var(--border)}
.topnav-link--active{background:var(--surface-2);border-color:var(--border-2);color:var(--text-bright)}
.topnav-link--monster:hover,.topnav-link--monster.topnav-link--active{color:var(--c-monster)}
.topnav-link--boss:hover,.topnav-link--boss.topnav-link--active{color:var(--c-boss)}
.topnav-link--item:hover,.topnav-link--item.topnav-link--active{color:var(--c-item)}
.topnav-link--npc:hover,.topnav-link--npc.topnav-link--active{color:var(--c-npc)}
.topnav-link--quest:hover,.topnav-link--quest.topnav-link--active{color:var(--c-quest)}
.topnav-link--zone:hover,.topnav-link--zone.topnav-link--active{color:var(--c-zone)}
.topnav-link--misc:hover,.topnav-link--misc.topnav-link--active{color:var(--c-misc)}
.topnav-link--streamer:hover,.topnav-link--streamer.topnav-link--active{color:var(--c-streamer)}
.topnav-link--videos:hover,.topnav-link--videos.topnav-link--active{color:#ffd98a}
.topnav-link--topplayers:hover,.topnav-link--topplayers.topnav-link--active{color:var(--gold-light)}
.topnav-link-icon{font-size:1rem}
.topnav-link-text{font-size:.82rem}
/* -- Topnav social icons ---------------------------------------- */
.topnav-socials{display:flex;align-items:center;gap:.25rem;flex-shrink:0;margin-left:auto}
.topnav-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius);border:1px solid transparent;color:var(--text-md);transition:all var(--tr)}
.topnav-social:hover{background:var(--surface-2);border-color:var(--border);color:#fff}
.topnav-social--youtube:hover{color:#ff0000}
.topnav-social--discord:hover{color:#5865f2}
.topnav-social--instagram:hover{color:#e1306c}
.topnav-social--facebook:hover{color:#1877f2}
.topnav-donate-btn{display:inline-flex;align-items:center;gap:.38rem;padding:.3rem .75rem;border-radius:999px;background:rgba(0,112,210,.18);border:1px solid rgba(0,112,210,.45);color:#5db8ff;font-size:.75rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;transition:all var(--tr);flex-shrink:0}
.topnav-donate-btn:hover{background:rgba(0,112,210,.32);border-color:rgba(0,140,255,.7);color:#fff;text-decoration:none}
.footer-donate-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .9rem;border-radius:999px;background:rgba(0,112,210,.15);border:1px solid rgba(0,112,210,.38);color:#5db8ff;font-size:.76rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;transition:all var(--tr)}
.footer-donate-btn:hover{background:rgba(0,112,210,.28);border-color:rgba(0,140,255,.65);color:#fff;text-decoration:none}
.topnav-social--website{padding:0}
.topnav-social-logo{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(200,146,42,.4));transition:filter var(--tr)}
.topnav-social--website:hover .topnav-social-logo{filter:drop-shadow(0 0 12px rgba(200,146,42,.75))}

/* -- Layout ------------------------------------------------------ */
.wiki-layout{display:flex;min-height:calc(100vh - var(--topnav-h))}

/* -- Sidebar ----------------------------------------------------- */
.wiki-sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:var(--topnav-h);height:calc(100vh - var(--topnav-h));overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.sidebar-header{padding:.75rem .8rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.5rem;transition:background var(--tr)}
.sidebar-header:hover{background:var(--surface-2)}
.sidebar-logo{display:flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;color:var(--gold-light)}
.sidebar-logo-text{white-space:nowrap}
.brand-reveal--side{font-size:.9rem;font-weight:800;letter-spacing:.015em}
.sidebar-toggle{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-bright);cursor:pointer;line-height:1;font-size:.95rem;transition:all var(--tr)}
.sidebar-toggle:hover{border-color:var(--gold);color:var(--gold-light)}
.sidebar-nav{flex:1;padding:.6rem 0 1rem}
.sidebar-quicklinks{display:flex;flex-direction:column;gap:.05rem;padding:0 .5rem .5rem}
.sidebar-ql{display:flex;align-items:center;gap:.5rem;padding:.38rem .75rem;border-radius:var(--radius);font-size:.84rem;color:var(--text-md);transition:all var(--tr)}
.sidebar-ql:hover{background:var(--surface-2);color:var(--text-bright)}
.sidebar-divider{height:1px;background:var(--border);margin:.4rem 0}
.sidebar-group{margin-bottom:.2rem}
.sidebar-group-header{display:flex;align-items:center;gap:.45rem;width:100%;padding:.38rem .75rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;border-left:2px solid transparent;background:transparent;text-align:left;cursor:pointer;transition:all var(--tr)}
.sidebar-group-header:hover{color:var(--text-bright)}
.sidebar-group-header--monster{color:var(--c-monster);border-left-color:var(--c-monster)}
.sidebar-group-header--boss{color:var(--c-boss);border-left-color:var(--c-boss)}
.sidebar-group-header--item{color:var(--c-item);border-left-color:var(--c-item)}
.sidebar-group-header--npc{color:var(--c-npc);border-left-color:var(--c-npc)}
.sidebar-group-header--quest{color:var(--c-quest);border-left-color:var(--c-quest)}
.sidebar-group-header--zone{color:var(--c-zone);border-left-color:var(--c-zone)}
.sidebar-group-header--misc{color:var(--c-misc);border-left-color:var(--c-misc)}
.sidebar-group-header--streamer{color:var(--c-streamer);border-left-color:var(--c-streamer)}
.sidebar-group-icon{font-size:.9rem}.type-icon-img{width:1em;height:1em;object-fit:contain;vertical-align:middle}
.sidebar-group-label{flex:1}
.sidebar-group-count{background:var(--surface-3);border:1px solid var(--border);border-radius:9999px;padding:0 .4rem;font-size:.62rem;color:var(--text)}
.sidebar-group-caret{font-size:.72rem;opacity:.85;transition:transform var(--tr)}
.sidebar-group-header[aria-expanded="false"] .sidebar-group-caret{transform:rotate(-90deg)}
.sidebar-list{list-style:none}
.sidebar-item{display:flex;align-items:center;gap:.48rem;padding:.24rem .75rem .24rem 1.45rem;font-size:.83rem;color:var(--text);border-left:2px solid transparent;transition:all var(--tr);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sidebar-item:hover{color:var(--text-bright);background:rgba(255,255,255,.025)}
.sidebar-item--active{color:var(--gold-light);border-left-color:var(--gold);background:var(--gold-glow)}
.sidebar-item-thumb{width:20px;height:20px;object-fit:contain;image-rendering:auto;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:4px;padding:1px}
.sidebar-item-label{display:block;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{padding:.7rem 1rem;border-top:1px solid var(--border)}
.sidebar-admin-link{font-size:.78rem;color:var(--text)}
.sidebar-admin-link:hover{color:var(--text-bright)}

/* -- Sidebar collapsed ------------------------------------------ */
body.sidebar-collapsed .wiki-sidebar{width:var(--sidebar-w-collapsed)}
body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .sidebar-group-label,
body.sidebar-collapsed .sidebar-group-count,
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .sidebar-footer{display:none}
body.sidebar-collapsed .sidebar-header{justify-content:center;flex-direction:column;padding:.6rem .45rem}
body.sidebar-collapsed .sidebar-quicklinks{padding:0 .2rem .5rem}
body.sidebar-collapsed .sidebar-ql{justify-content:center;padding:.42rem .35rem;font-size:0}
body.sidebar-collapsed .sidebar-ql span{font-size:1rem}
body.sidebar-collapsed .sidebar-group-header{justify-content:center;padding:.4rem .25rem;border-left:none}
body.sidebar-collapsed .sidebar-list{display:flex;flex-direction:column;gap:.16rem;padding:.12rem 0}
body.sidebar-collapsed .sidebar-item{justify-content:center;padding:.26rem .2rem;border-left:none}
body.sidebar-collapsed .sidebar-item-thumb{width:22px;height:22px}

/* -- Main content ------------------------------------------------ */
.wiki-content{flex:1;padding:2rem 2.5rem;min-width:0}

/* -- Home Hero --------------------------------------------------- */
.home-hero{background:linear-gradient(135deg,rgba(200,146,42,.07) 0%,transparent 45%,rgba(181,36,50,.05) 100%),var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-xl);padding:2.5rem;margin-bottom:2.25rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.home-hero::after{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(200,146,42,.07) 0%,transparent 65%);pointer-events:none}
.home-hero-content{display:flex;align-items:center;gap:1.75rem;position:relative;z-index:1}
.home-hero-emblem{flex-shrink:0;line-height:1}
.home-hero-logo-img{height:120px;width:auto;object-fit:contain;filter:drop-shadow(0 0 24px rgba(200,146,42,0.6))}
.sidebar-logo-img{height:36px;width:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(200,146,42,0.4))}
.home-hero-title{font-size:2.6rem;font-weight:800;color:var(--gold-text);letter-spacing:-.02em;line-height:1.1;text-shadow:0 0 40px rgba(200,146,42,.3)}
.home-hero-subtitle{font-size:1rem;color:var(--text-md);margin-top:.3rem}
.home-hero-stats{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.hero-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem 1rem;text-align:center;min-width:72px}
.hero-stat-media{display:block;width:30px;height:30px;object-fit:contain;object-position:center center;margin:0 auto .2rem;filter:drop-shadow(0 0 8px rgba(200,146,42,.35))}
.hero-stat-value{display:block;font-size:1.35rem;font-weight:700;color:var(--gold-light);line-height:1.1}
.hero-stat-label{font-size:.66rem;color:var(--text);text-transform:uppercase;letter-spacing:.08em}
.hero-stat--monster .hero-stat-value{color:var(--c-monster)}
.hero-stat--boss .hero-stat-value{color:var(--c-boss)}
.hero-stat--item .hero-stat-value{color:var(--c-item)}
.hero-stat--npc .hero-stat-value{color:var(--c-npc)}
.hero-stat--quest .hero-stat-value{color:var(--c-quest)}
.hero-stat--zone .hero-stat-value{color:var(--c-zone)}
.hero-stat--misc .hero-stat-value{color:var(--c-misc)}
.hero-stat--videos .hero-stat-value{color:#ffd98a}

/* -- Boosted Creatures Widget ------------------------------------ */
.boosted-widget{margin-left:auto;flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid rgba(200,146,42,.25);border-radius:var(--radius-lg);padding:1rem 1.2rem;min-width:180px;max-width:230px}
.boosted-widget-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.85rem}
.boosted-widget-icon{font-size:1rem;line-height:1}
.boosted-widget-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-light)}
.boosted-widget-cards{display:flex;flex-direction:column;gap:.75rem}
.boosted-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:rgba(0,0,0,.2);border-radius:var(--radius);padding:.6rem .75rem;position:relative}
.boosted-type-badge{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.1rem .45rem;border-radius:20px;align-self:flex-start}
.boosted-type-badge--creature{background:rgba(80,180,80,.18);color:#6fcf6f;border:1px solid rgba(80,180,80,.3)}
.boosted-type-badge--boss{background:rgba(200,80,80,.18);color:#f07070;border:1px solid rgba(200,80,80,.3)}
.boosted-img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(200,146,42,.3))}
.boosted-img-placeholder{font-size:2.5rem;line-height:1}
.boosted-name{font-size:.8rem;font-weight:600;color:var(--text-hi);text-align:center;line-height:1.2}

/* -- Home sections ----------------------------------------------- */
.home-section{margin-bottom:2.5rem}
.home-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.home-section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* -- Category cards --------------------------------------------- */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.875rem}
.category-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem 1rem;text-align:center;display:block;position:relative;overflow:hidden;transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)}
.category-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--tr);border-radius:inherit}
.category-card:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.category-card:hover::before{opacity:1}
.category-card--monster::before{background:var(--g-monster)}
.category-card--boss::before{background:var(--g-boss)}
.category-card--item::before{background:var(--g-item)}
.category-card--npc::before{background:var(--g-npc)}
.category-card--quest::before{background:var(--g-quest)}
.category-card--zone::before{background:var(--g-zone)}
.category-card--misc::before{background:var(--g-misc)}
.category-card--videos::before{background:linear-gradient(135deg,rgba(200,146,42,.16),rgba(255,121,51,.12))}
.category-card-icon{width:52px;height:52px;margin:0 auto .6rem;display:flex;align-items:center;justify-content:center;font-size:2.25rem;position:relative;z-index:1;line-height:1;text-align:center}
.category-card-media{width:42px;height:42px;object-fit:contain;object-position:center center;image-rendering:auto;display:block}
.category-card--monster .category-card-icon{filter:drop-shadow(0 0 8px var(--c-monster))}
.category-card--boss .category-card-icon{filter:drop-shadow(0 0 8px var(--c-boss))}
.category-card--item .category-card-icon{filter:drop-shadow(0 0 8px var(--c-item))}
.category-card--npc .category-card-icon{filter:drop-shadow(0 0 8px var(--c-npc))}
.category-card--quest .category-card-icon{filter:drop-shadow(0 0 8px var(--c-quest))}
.category-card--zone .category-card-icon{filter:drop-shadow(0 0 8px var(--c-zone))}
.category-card--misc .category-card-icon{filter:drop-shadow(0 0 8px var(--c-misc))}
.category-card--videos .category-card-icon{filter:drop-shadow(0 0 8px rgba(255,180,96,.7))}
.category-card-name{font-size:.9rem;font-weight:700;position:relative;z-index:1}
.category-card--monster .category-card-name{color:var(--c-monster)}
.category-card--boss .category-card-name{color:var(--c-boss)}
.category-card--item .category-card-name{color:var(--c-item)}
.category-card--npc .category-card-name{color:var(--c-npc)}
.category-card--quest .category-card-name{color:var(--c-quest)}
.category-card--zone .category-card-name{color:var(--c-zone)}
.category-card--misc .category-card-name{color:var(--c-misc)}
.category-card--videos .category-card-name{color:#ffd98a}
.category-card-count{font-size:.72rem;color:var(--text);margin-top:.25rem;position:relative;z-index:1}

/* -- Social hub (Videos page) ---------------------------------- */
.social-hub{margin-top:1.2rem}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.85rem}
.social-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem .85rem;min-height:115px;transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)}
.social-card:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.social-card-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:rgba(200,146,42,.12);color:var(--gold-light);font-size:1.2rem;font-weight:700}
.social-card-label{font-size:.82rem;font-weight:700;color:var(--text-bright);text-align:center}
.social-card-logo{width:44px;height:44px;object-fit:contain;object-position:center center;filter:drop-shadow(0 0 8px rgba(200,146,42,.45))}
.social-card--website{border-color:rgba(200,146,42,.45);background:linear-gradient(180deg,rgba(200,146,42,.09),rgba(11,18,40,.92))}

/* -- Recent cards ----------------------------------------------- */
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.75rem}
.recent-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.2rem;display:block;transition:all var(--tr)}
.recent-card:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.recent-card-type{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem}
.recent-card-type--monster{color:var(--c-monster)}
.recent-card-type--boss{color:var(--c-boss)}
.recent-card-type--item{color:var(--c-item)}
.recent-card-type--npc{color:var(--c-npc)}
.recent-card-type--quest{color:var(--c-quest)}
.recent-card-type--zone{color:var(--c-zone)}
.recent-card-type--misc{color:var(--c-misc)}
.recent-card-title{font-size:.9rem;font-weight:600;color:var(--text-bright);margin-bottom:.4rem}
.recent-card-date{font-size:.7rem;color:var(--text)}

/* -- Boss Focus (Homepage) ------------------------------------- */
.boss-focus-wrap{background:linear-gradient(130deg,rgba(200,146,42,.07) 0%,rgba(181,36,50,.04) 52%,rgba(11,17,32,.85) 100%);border:1px solid rgba(200,146,42,.26);border-radius:var(--radius-xl);padding:1.1rem 1.15rem 1.2rem;box-shadow:var(--shadow-sm)}
.boss-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.72rem}
.boss-kpi{background:rgba(10,16,30,.85);border:1px solid rgba(200,146,42,.2);border-radius:10px;padding:.72rem .82rem}
.boss-kpi-label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(224,196,124,.88)}
.boss-kpi-value{display:block;margin-top:.2rem;font-size:1.34rem;font-weight:800;color:#f6d487;line-height:1.1}
.boss-focus-cta{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.82rem}
.boss-focus-btn{display:inline-flex;align-items:center;justify-content:center;padding:.42rem .84rem;border-radius:999px;border:1px solid rgba(200,146,42,.45);background:rgba(200,146,42,.16);color:#f4d483;font-size:.78rem;font-weight:700;letter-spacing:.03em;transition:all var(--tr)}
.boss-focus-btn:hover{background:rgba(200,146,42,.25);color:#fff;border-color:rgba(200,146,42,.75)}
.boss-focus-btn--ghost{background:rgba(13,22,40,.65);border-color:rgba(107,129,172,.35);color:#b7c7ea}
.boss-focus-btn--ghost:hover{background:rgba(23,35,63,.72);border-color:rgba(154,176,220,.45)}
.world-champions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.72rem;margin-top:.82rem}
.world-champion-card{background:rgba(11,18,32,.82);border:1px solid rgba(200,146,42,.2);border-radius:12px;padding:.78rem .88rem}
.world-champion-badge{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .55rem;border-radius:999px;background:rgba(92,152,255,.16);border:1px solid rgba(92,152,255,.28);color:#8ec0ff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.world-champion-body{display:flex;align-items:center;gap:.75rem;margin-top:.55rem}
.world-champion-avatar{width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;flex-shrink:0}
.world-champion-avatar img{width:50px;height:50px;image-rendering:pixelated}
.world-champion-avatar-ph{font-size:1.4rem;opacity:.7}
.world-champion-name{font-size:.96rem;font-weight:800;color:#f2f6ff;line-height:1.2}
.world-champion-meta{margin-top:.14rem;font-size:.75rem;color:rgba(169,186,221,.86)}
.boss-spotlight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.72rem;margin-top:.9rem}
.boss-spotlight-card{display:block;background:rgba(11,18,32,.82);border:1px solid rgba(200,146,42,.2);border-radius:12px;padding:.78rem .88rem;transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.boss-spotlight-card:hover{border-color:rgba(200,146,42,.55);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.boss-spotlight-type{display:flex;align-items:center;gap:.35rem;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#d7b36a;font-weight:700}
.boss-spotlight-title{margin-top:.28rem;font-size:.92rem;font-weight:700;color:#f2f6ff;line-height:1.3}
.boss-spotlight-date{display:block;margin-top:.35rem;font-size:.72rem;color:rgba(169,186,221,.8)}

/* -- Category page header --------------------------------------- */
.category-page-header{display:flex;align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-xl);margin-bottom:1.5rem;box-shadow:var(--shadow-sm);border-left-width:4px}
.type-header--monster{border-left-color:var(--c-monster)}
.type-header--boss{border-left-color:var(--c-boss)}
.type-header--item{border-left-color:var(--c-item)}
.type-header--npc{border-left-color:var(--c-npc)}
.type-header--quest{border-left-color:var(--c-quest)}
.type-header--zone{border-left-color:var(--c-zone)}
.type-header--misc{border-left-color:var(--c-misc)}
.category-page-icon{font-size:2.5rem}
.category-page-header h1{font-size:1.75rem}
.category-page-count{font-size:.85rem;color:var(--text);margin-top:.2rem}

/* -- Article cards ---------------------------------------------- */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:.75rem}
.article-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.9rem 1.1rem;display:flex;align-items:center;gap:.9rem;transition:all var(--tr)}
.article-card:hover{border-color:var(--border-2);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.article-card-icon{font-size:1.35rem;flex-shrink:0;width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius)}
.article-card-thumb{width:44px;height:44px;object-fit:contain}
.article-card-body h3{font-size:.88rem;font-weight:600;color:var(--text-bright)}
.article-card-body time{font-size:.7rem;color:var(--text)}

/* -- Article page ----------------------------------------------- */
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text);margin-bottom:1.25rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text)}
.breadcrumb a:hover{color:var(--gold-light)}
.breadcrumb-sep{opacity:.4}
.article-header{margin-bottom:1.5rem}
.article-header-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.65rem;flex-wrap:wrap}
.article-date{font-size:.76rem;color:var(--text)}
.article-title{font-size:2.1rem;font-weight:800;color:var(--heading);line-height:1.15}
.article-layout{position:relative}

/* -- Creature Hero Card ----------------------------------------- */
.creature-card{display:flex;align-items:flex-start;gap:2rem;padding:1.75rem 2rem;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-xl);margin-bottom:1.75rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* subtle diagonal gradient tint */
.creature-card::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.018) 0%,transparent 60%);pointer-events:none}
/* type accent: left glow stripe */
.creature-card--monster{border-top:1px solid rgba(181,36,50,.45);box-shadow:var(--shadow),inset 3px 0 0 var(--c-monster)}
.creature-card--boss{border-top:1px solid rgba(200,146,42,.45);box-shadow:var(--shadow),inset 3px 0 0 var(--c-boss)}

/* Glow pulse animations */
@keyframes sprite-glow-monster{0%,100%{box-shadow:0 0 14px 3px rgba(181,36,50,.45),0 0 32px 6px rgba(181,36,50,.18),0 0 18px rgba(181,36,50,.2) inset}50%{box-shadow:0 0 22px 7px rgba(181,36,50,.7),0 0 50px 12px rgba(181,36,50,.3),0 0 28px rgba(181,36,50,.35) inset}}
@keyframes sprite-glow-boss{0%,100%{box-shadow:0 0 14px 3px rgba(200,146,42,.5),0 0 32px 6px rgba(200,146,42,.2),0 0 18px rgba(200,146,42,.22) inset}50%{box-shadow:0 0 24px 8px rgba(200,146,42,.8),0 0 52px 14px rgba(200,146,42,.35),0 0 30px rgba(200,146,42,.4) inset}}
@keyframes sprite-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Sprite column */
.creature-card-sprite{flex-shrink:0;width:180px;display:flex;flex-direction:column;align-items:center;gap:.65rem}
.creature-card-sprite-frame{width:168px;height:168px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border-radius:var(--radius-lg);position:relative;overflow:visible}
.creature-card--monster .creature-card-sprite-frame{border:1px solid rgba(181,36,50,.55);animation:sprite-glow-monster 2.8s ease-in-out infinite}
.creature-card--boss .creature-card-sprite-frame{border:1px solid rgba(200,146,42,.6);animation:sprite-glow-boss 2.8s ease-in-out infinite}
/* Radial glow behind sprite (inside frame) */
.creature-card-sprite-frame::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none}
.creature-card--monster .creature-card-sprite-frame::before{background:radial-gradient(circle at 50% 65%,rgba(181,36,50,.35) 0%,transparent 72%)}
.creature-card--boss .creature-card-sprite-frame::before{background:radial-gradient(circle at 50% 65%,rgba(200,146,42,.38) 0%,transparent 72%)}
/* Floating image */
.creature-card-sprite-frame img{max-width:136px;max-height:136px;width:auto;height:auto;image-rendering:pixelated;display:block;position:relative;z-index:1;animation:sprite-float 3.2s ease-in-out infinite}
.creature-card-sprite--empty{opacity:.3;font-size:2.5rem;color:var(--text)}

/* Info column */
.creature-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem;position:relative;z-index:1}
.creature-card-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.1rem}
.creature-card-name{font-size:2.15rem;font-weight:900;color:var(--heading);line-height:1.1;margin:0;letter-spacing:-.01em}
.creature-card-name--monster{text-shadow:0 0 40px rgba(181,36,50,.25)}
.creature-card-name--boss{text-shadow:0 0 40px rgba(200,146,42,.3)}
.creature-card-date{font-size:.72rem;color:var(--text);opacity:.7}
/* thin divider */
.creature-card-divider{height:1px;background:var(--border);margin:.55rem 0}
/* Description below name */
.creature-card-description{font-size:.85rem;color:var(--text);margin:.15rem 0 .4rem;line-height:1.45;font-style:italic;opacity:.85}
/* External reference link */
.creature-card-ref{display:inline-flex;align-items:center;gap:.35rem;margin-top:.65rem;font-size:.78rem;color:var(--gold-light,#e8b84b);border:1px solid rgba(201,146,42,.35);border-radius:var(--radius);padding:.25rem .7rem;transition:all var(--tr);text-decoration:none}
.creature-card-ref:hover{background:rgba(201,146,42,.1);border-color:var(--gold-light,#e8b84b);color:#fff}
.creature-card-compare-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.82rem;font-weight:600;color:var(--text-bright);background:rgba(255,255,255,.06);border:1px solid var(--border-2);border-radius:var(--radius);padding:.3rem .85rem;text-decoration:none;transition:all var(--tr)}
.creature-card-compare-btn:hover{background:var(--gold);color:#111;border-color:var(--gold)}

/* Stats row */
.creature-card-stats{display:flex;flex-wrap:wrap;gap:.5rem}
.creature-stat{display:flex;align-items:center;gap:.55rem;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .85rem;font-size:.85rem}
.creature-stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text);font-weight:600;white-space:nowrap}
.creature-stat-sep{width:1px;height:.9em;background:var(--border-2);flex-shrink:0}
.creature-stat-value{font-size:.9rem;font-weight:700;color:var(--text-bright);white-space:nowrap}
.creature-stat--hp{border-color:rgba(224,92,106,.3)}
.creature-stat--hp .creature-stat-value{color:#e05c6a}
.creature-stat--hp .creature-stat-label{color:#e05c6a;opacity:.8}
.creature-stat--exp{border-color:rgba(240,192,96,.3)}
.creature-stat--exp .creature-stat-value{color:#f0c060}
.creature-stat--exp .creature-stat-label{color:#f0c060;opacity:.8}
.creature-stat--speed{border-color:rgba(106,176,224,.3)}
.creature-stat--speed .creature-stat-value{color:#6ab0e0}
.creature-stat--speed .creature-stat-label{color:#6ab0e0;opacity:.8}
.creature-stat--race{border-color:rgba(144,200,122,.3)}
.creature-stat--race .creature-stat-value{color:#90c87a;text-transform:capitalize}
.creature-stat--race .creature-stat-label{color:#90c87a;opacity:.8}
.creature-stat--location{border-color:rgba(100,180,240,.3)}
.creature-stat--location .creature-stat-value{color:#64b4f0}
.creature-stat--location .creature-stat-label{color:#64b4f0;opacity:.8}
.article-body{font-size:.975rem;line-height:1.82;color:var(--text-md)}
.content-paragraph{margin:.22rem 0 .66rem;max-width:80ch}
.article-body--quest{font-size:1.08rem;line-height:2}
.article-body--quest .content-paragraph--quest{max-width:100ch;color:#d2dcf0}
.content-md-heading{margin:1.1rem 0 .45rem;line-height:1.25;color:#e9eef8}
.content-md-heading--1{font-size:2.05rem;font-weight:900;letter-spacing:-.01em;color:#f4d59a}
.content-md-heading--2{font-size:1.62rem;font-weight:800;color:#f0ddba}
.content-md-heading--3{font-size:1.26rem;font-weight:760;color:#dbe5f8}
.content-section-heading{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-light);margin:1.4rem 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.content-section-heading::before{content:'';display:inline-block;width:3px;height:.9em;background:var(--gold);border-radius:2px;flex-shrink:0}
.content-section-heading--quest{font-size:.82rem;letter-spacing:.08em;color:#f2c36a;margin:1.9rem 0 .7rem;padding:.5rem .75rem;background:linear-gradient(90deg,rgba(192,120,16,.16),rgba(192,120,16,.04));border:1px solid rgba(192,120,16,.28);border-radius:10px;border-bottom-color:rgba(192,120,16,.28)}
.content-section-heading--quest::before{width:8px;height:8px;border-radius:50%;background:#f2c36a;box-shadow:0 0 0 4px rgba(242,195,106,.16)}
.content-list{list-style:none;margin:.2rem 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.22rem}
.content-list li{padding:.28rem .6rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text-bright)}
.content-list li:hover{border-color:var(--border-2);background:var(--surface-3)}
.article-body--quest .content-list li{padding:.5rem .75rem;border-color:rgba(100,134,184,.3);background:linear-gradient(145deg,rgba(20,28,48,.7),rgba(14,21,37,.9))}
.content-kv{margin:.18rem 0;font-size:.9rem}
.content-kv-key{color:var(--text);font-weight:500}
.content-kv-val{color:var(--text-bright)}

.quest-step-title{margin:1rem 0 .55rem;font-size:1.02rem;font-weight:800;color:#f0d9ad;letter-spacing:.01em;display:flex;align-items:center;gap:.55rem}
.quest-step-title::before{content:'➤';color:#d59b2f;font-size:.95rem;line-height:1;filter:drop-shadow(0 0 8px rgba(213,155,47,.35))}

.quest-inline-image{margin:.75rem 0 1.15rem;background:var(--surface-2);border:1px solid rgba(192,120,16,.35);border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.quest-inline-image img{display:block;width:100%;max-height:540px;object-fit:contain;background:linear-gradient(180deg,rgba(19,27,45,.65),rgba(12,18,31,.95))}
.quest-inline-image figcaption{padding:.5rem .8rem;font-size:.78rem;color:#d2b277;background:rgba(0,0,0,.2);border-top:1px solid rgba(192,120,16,.24)}

.quest-image-placeholder{display:flex;align-items:center;gap:.6rem;border:1px dashed rgba(192,120,16,.4);background:rgba(192,120,16,.08);border-radius:10px;padding:.62rem .75rem;margin:.65rem 0 1rem}
.quest-image-placeholder-badge{display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#10131c;background:#f0c060;padding:.15rem .45rem;border-radius:999px}
.quest-image-placeholder-text{font-size:.86rem;color:#e1c895}

.quest-dialogue{margin:.36rem 0;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}
.quest-dialogue-label{font-weight:800;letter-spacing:.02em}
.quest-dialogue--player{border-color:rgba(116,148,226,.35);background:rgba(30,44,77,.35);color:#ceddff}
.quest-dialogue--player .quest-dialogue-label{color:#9bb8ff}
.quest-dialogue--npc{border-color:rgba(220,165,76,.35);background:rgba(78,57,23,.28);color:#f3e4c3}
.quest-dialogue--npc .quest-dialogue-label{color:#f0c060}

.article-html-content{font-size:1.1rem;line-height:1.95;color:#d0daef;max-width:110ch}
.article-html-content h1,.article-html-content h2,.article-html-content h3,.article-html-content h4{line-height:1.22;margin:1rem 0 .55rem}
.article-html-content h1{font-size:2.38rem;color:#f4d59a}
.article-html-content h2{font-size:1.88rem;color:#edd7b1}
.article-html-content h3{font-size:1.42rem;color:#dce6fb}
.article-html-content h4{font-size:1.16rem;color:#cfd8eb}
.article-html-content p{margin:.5rem 0 .72rem}
.article-html-content ul,.article-html-content ol{padding-left:1.2rem;margin:.35rem 0 .8rem}
.article-html-content li{margin:.22rem 0}
.article-html-content a{color:#7cb6ff;text-decoration:underline}
.article-html-content img,.quest-inline-image img,.gallery-figure img,.npc-location-figure img{cursor:zoom-in}
.article-html-content img{max-width:100%;height:auto;border-radius:10px;border:1px solid rgba(107,129,172,.35);background:var(--surface-2);padding:4px;box-shadow:0 12px 30px rgba(0,0,0,.28);margin:.75rem 0}
.article-html-content table{width:100%;border-collapse:collapse;margin:.75rem 0;background:var(--surface-2);border:1px solid var(--border)}
.article-html-content th,.article-html-content td{padding:.45rem .6rem;border:1px solid var(--border);text-align:left}
.article-html-content blockquote{margin:.75rem 0;padding:.7rem .85rem;border-left:3px solid var(--gold);background:rgba(200,146,42,.08);color:#d8e0f0}

.wiki-article--quest .article-title{font-size:2.6rem;line-height:1.08}
.wiki-article--quest .infobox{width:350px}
.wiki-article--quest .infobox-image img{max-height:180px}

.quest-reward-section{margin:1.6rem 0 1.1rem;padding:1rem 1rem 1.15rem;border:1px solid rgba(200,146,42,.22);border-radius:14px;background:linear-gradient(150deg,rgba(192,120,16,.12),rgba(15,22,37,.85))}
.quest-reward-description{font-size:1rem;color:#dce6fb;margin:.3rem 0 1rem}
.quest-reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.95rem}
.quest-reward-card{display:flex;gap:.9rem;background:rgba(16,24,42,.86);border:1px solid rgba(113,130,170,.3);border-radius:14px;padding:.85rem;transition:all var(--tr);cursor:pointer}
.quest-reward-card:hover{transform:translateY(-2px);border-color:rgba(200,146,42,.45);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.quest-reward-card-media{width:112px;height:112px;flex-shrink:0;border-radius:12px;background:linear-gradient(145deg,rgba(40,53,84,.66),rgba(21,31,54,.85));border:1px solid rgba(127,146,188,.36);display:flex;align-items:center;justify-content:center;overflow:hidden}
.quest-reward-card-media img{width:104px;height:104px;object-fit:contain}
.quest-reward-card-noicon{font-size:1.4rem;color:#9ca9c8}
.quest-reward-card-body{min-width:0}
.quest-reward-card-title{font-size:1.12rem;font-weight:800;color:#f1f5ff;line-height:1.2;margin:0 0 .24rem}
.quest-reward-card-description{font-size:.88rem;color:#c7d3ea;line-height:1.5;margin:0 0 .45rem}
.quest-reward-card-link{display:inline-flex;align-items:center;gap:.2rem;font-size:.78rem;color:#f0c060}
.quest-reward-card-link:hover{color:#ffe1a6}
.quest-boss-section{margin:1rem 0 1.2rem;padding:1rem 1rem 1.15rem;border:1px solid rgba(197,54,54,.22);border-radius:14px;background:linear-gradient(150deg,rgba(88,19,19,.12),rgba(15,22,37,.85))}
.quest-boss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.95rem}
.quest-boss-card{display:flex;gap:.9rem;background:rgba(16,24,42,.86);border:1px solid rgba(113,130,170,.3);border-radius:14px;padding:.85rem;transition:all var(--tr)}
.quest-boss-card:hover{transform:translateY(-2px);border-color:rgba(197,54,54,.45);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.quest-boss-card-media{width:112px;height:112px;flex-shrink:0;border-radius:12px;background:linear-gradient(145deg,rgba(40,53,84,.66),rgba(21,31,54,.85));border:1px solid rgba(127,146,188,.36);display:flex;align-items:center;justify-content:center;overflow:hidden}
.quest-boss-card-media img{width:104px;height:104px;object-fit:contain}
.quest-boss-card-noicon{font-size:1.4rem;color:#9ca9c8}
.quest-boss-card-body{min-width:0}
.quest-boss-card-title{font-size:1.12rem;font-weight:800;color:#f1f5ff;line-height:1.2;margin:0 0 .24rem}
.quest-boss-card-description{font-size:.88rem;color:#c7d3ea;line-height:1.5;margin:0 0 .45rem}
.quest-boss-card-link{display:inline-flex;align-items:center;gap:.2rem;font-size:.78rem;color:#f0c060}
.quest-boss-card-link:hover{color:#ffe1a6}
.quest-video-section{margin:1.35rem auto 1.4rem;padding:1rem 1rem 1.15rem;border:1px solid rgba(107,129,172,.26);border-radius:14px;background:linear-gradient(160deg,rgba(18,27,45,.96),rgba(12,18,31,.92));max-width:920px}
.quest-video-header{display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:.6rem 1rem;margin-bottom:.85rem;text-align:center}
.quest-video-description{margin:0;color:#b9c7df;font-size:.95rem}
.quest-video-frame-wrap{position:relative;width:min(100%,760px);margin:0 auto;padding-top:42.75%;border-radius:12px;overflow:hidden;border:1px solid rgba(107,129,172,.28);background:#05070c;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.quest-video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width: 820px){.quest-video-section{max-width:none}.quest-video-frame-wrap{width:100%;padding-top:56.25%}}

.creature-card-howto{margin-top:.8rem;padding:.75rem .8rem .82rem;border-radius:12px;border:1px solid rgba(200,146,42,.3);background:linear-gradient(165deg,rgba(27,19,10,.46),rgba(17,24,40,.78));width:min(100%,520px)}
.creature-card-howto-header{display:flex;align-items:baseline;justify-content:space-between;gap:.65rem;flex-wrap:wrap;margin-bottom:.55rem}
.creature-card-howto-title{margin:0;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:#e9c982;line-height:1.25}
.creature-card-howto-description{margin:0;font-size:.74rem;color:#b7c5dd}
.creature-card-howto-frame-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;border:1px solid rgba(200,146,42,.28);background:#05070c;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.creature-card-howto-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.creature-card-howto-link{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:96px;border-radius:10px;border:1px solid rgba(200,146,42,.35);background:rgba(18,27,45,.88);color:#f0c060;text-decoration:none;font-weight:700}
.creature-card-howto-link:hover{color:#ffe1a6;background:rgba(28,39,61,.9)}

@keyframes item-glow{0%,100%{box-shadow:0 0 5px 1px rgba(200,146,42,.3),0 0 12px 2px rgba(200,146,42,.1)}50%{box-shadow:0 0 10px 3px rgba(200,146,42,.6),0 0 22px 5px rgba(200,146,42,.22)}}
.loot-table-wrap{margin:.25rem 0 1rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.loot-table{width:100%;border-collapse:collapse}
.loot-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);padding:.42rem .65rem;background:var(--surface-3);text-align:left}
.loot-table thead th:last-child{text-align:left}
.loot-table tbody tr+tr{border-top:1px solid var(--border)}
.loot-table tbody tr{transition:background var(--tr)}
.loot-row-clickable{cursor:pointer}
.loot-table tbody tr:hover{background:var(--surface-3)}
.loot-table tbody tr:hover .loot-item-icon{animation:item-glow 1.6s ease-in-out infinite;border-color:rgba(200,146,42,.55)}
.loot-table td{padding:.38rem .65rem;font-size:.86rem;color:var(--text-bright)}
.loot-cell-item{display:flex;align-items:center;gap:.45rem}

.loot-item-icon{width:34px;height:34px;object-fit:contain;image-rendering:auto;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:2px;transition:border-color var(--tr),box-shadow var(--tr)}
.article-clear{clear:both}

/* -- Item Card Popup -------------------------------------------- */
.item-card-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.item-card-overlay--open{opacity:1;pointer-events:all}
.item-card{position:relative;background:linear-gradient(160deg,rgba(22,31,54,.96) 0%,rgba(14,21,40,.98) 55%,rgba(10,17,32,.99) 100%);border:1px solid rgba(113,130,170,.34);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 0 1px rgba(200,146,42,.18),inset 0 1px 0 rgba(255,255,255,.06);width:min(560px,94vw);display:flex;align-items:flex-start;gap:1.35rem;padding:1.75rem 1.75rem 1.5rem;transform:translateY(12px) scale(.98);transition:transform .2s ease;max-height:min(82vh,680px);overflow:auto}
.item-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,rgba(200,146,42,.85),rgba(226,182,84,.45) 60%,rgba(226,182,84,0));border-radius:18px 18px 0 0;pointer-events:none}
.item-card-overlay--open .item-card{transform:translateY(0)}
.item-card.item-card--long{width:min(650px,96vw)}
.item-card.item-card--xlong{width:min(760px,97vw)}
.item-card-close{position:absolute;top:.72rem;right:.75rem;background:rgba(17,24,40,.7);border:1px solid rgba(120,136,176,.25);color:var(--text);font-size:1.15rem;line-height:1;cursor:pointer;padding:.2rem .42rem;border-radius:8px;transition:color var(--tr),background var(--tr),border-color var(--tr)}
.item-card-close:hover{color:#fff;background:rgba(35,48,78,.9);border-color:rgba(200,146,42,.45)}
.item-card-icon-wrap{flex-shrink:0;width:116px;height:116px;background:linear-gradient(145deg,rgba(40,53,84,.66),rgba(21,31,54,.85));border:1px solid rgba(127,146,188,.36);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.item-card-img{width:102px;height:102px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.item-card-no-img{font-size:2rem;color:var(--text)}
.item-card-body{flex:1;min-width:0;padding-top:.12rem}
.item-card-type{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(97,198,255,.9);font-weight:800;margin:0 0 .28rem}
.item-card-name{font-size:clamp(1.22rem,2.15vw,1.72rem);font-weight:800;color:#f3f6ff;margin:0 0 .2rem;line-height:1.12;max-width:28ch;overflow-wrap:anywhere;word-break:break-word;text-wrap:balance}
.item-card.item-card--long .item-card-name,
.item-card.item-card--xlong .item-card-name{max-width:none;text-wrap:pretty}
.item-card-desc{font-size:.9rem;color:rgba(205,216,238,.9);margin:.15rem 0 .82rem;font-style:italic;line-height:1.5}
.item-card-stats{margin:0;display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:.34rem .95rem;background:rgba(10,18,35,.45);border:1px solid rgba(107,124,160,.2);border-radius:12px;padding:.7rem .8rem}
.item-card-stats dt{font-size:.74rem;color:rgba(172,189,220,.86);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.item-card-stats dd{font-size:.82rem;color:#e8eeff;margin:0;font-weight:700;word-break:break-word}

/* -- Image Lightbox ---------------------------------------------- */
.image-lightbox-overlay{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.86);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease;padding:1.25rem}
.image-lightbox-overlay--open{opacity:1;pointer-events:auto}
.image-lightbox-content{position:relative;max-width:min(1400px,96vw);max-height:92vh;display:flex;align-items:center;justify-content:center}
.image-lightbox-img{max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:12px;border:1px solid rgba(185,205,238,.35);box-shadow:0 24px 70px rgba(0,0,0,.75);background:#050914}
.image-lightbox-close{position:absolute;top:-12px;right:-12px;width:34px;height:34px;border:none;border-radius:999px;background:rgba(22,31,54,.95);border:1px solid rgba(185,205,238,.35);color:#e6eeff;font-size:1.25rem;line-height:1;cursor:pointer}
.image-lightbox-close:hover{background:rgba(35,48,78,.95)}

@media (max-width: 680px){
    .item-card{width:calc(100vw - 1rem);padding:1.2rem .95rem .95rem;gap:.82rem}
    .item-card.item-card--long,
    .item-card.item-card--xlong{width:calc(100vw - .8rem)}
    .item-card-icon-wrap{width:84px;height:84px}
    .item-card-img{width:74px;height:74px}
    .item-card-name{font-size:1.24rem;max-width:none;line-height:1.14}
    .item-card-stats{grid-template-columns:auto 1fr;padding:.58rem .62rem}
}

/* -- Infobox ---------------------------------------------------- */
.infobox{float:right;clear:right;width:248px;margin:0 0 1.5rem 2rem;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);font-size:.875rem}
.infobox-header{padding:.65rem 1rem;font-weight:700;font-size:.88rem;text-align:center;color:#fff;letter-spacing:.01em}
.infobox--monster .infobox-header{background:var(--c-monster)}
.infobox--boss .infobox-header{background:var(--c-boss)}
.infobox--item .infobox-header{background:var(--c-item)}
.infobox--npc .infobox-header{background:var(--c-npc)}
.infobox--quest .infobox-header{background:var(--c-quest)}
.infobox--zone .infobox-header{background:var(--c-zone)}
.infobox--misc .infobox-header{background:var(--c-misc)}
.infobox-image{border-bottom:1px solid var(--border);background:var(--surface-3);padding:.6rem;text-align:center}
.infobox-image img{max-height:80px;width:auto;object-fit:contain;margin:0 auto}
.infobox-table{width:100%;border-collapse:collapse}
.infobox-table tr+tr{border-top:1px solid var(--border)}
.infobox-table th{padding:.42rem .85rem;text-align:left;font-size:.76rem;font-weight:600;color:var(--text-md);background:var(--surface-3);width:44%}
.infobox-table td{padding:.42rem .85rem;font-size:.84rem;color:var(--text-bright);font-weight:500}

/* -- Section heading -------------------------------------------- */
.section-heading{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text);margin:2rem 0 1rem;display:flex;align-items:center;gap:.75rem}
.section-heading::after{content:'';flex:1;height:1px;background:var(--border)}

/* -- NPC Location Images ---------------------------------------- */
.npc-location-section{margin-top:2rem}
.npc-location-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.npc-location-figure{margin:0;background:var(--surface-2);border:2px solid var(--border-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.npc-location-figure img{display:block;width:100%;height:320px;object-fit:cover;transition:transform .3s ease}
.npc-location-figure:hover img{transform:scale(1.02)}
.npc-location-caption{display:block;padding:.55rem 1rem;font-size:.8rem;color:var(--text);background:var(--surface-3);border-top:1px solid var(--border);text-align:center}
@media(max-width:680px){.npc-location-grid{grid-template-columns:1fr}}

/* -- NPC Dialogues --------------------------------------------- */
.npc-dialogue-section { margin-top: 2rem; }
.npc-dialogue-log {
    background:    var(--surface-2);
    border:        1px solid var(--border-2);
    border-radius: var(--radius-lg);
    padding:       1rem 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           .1rem;
    font-family:   var(--font-mono, monospace);
    font-size:     .85rem;
    line-height:   1.55;
}
.npc-dialogue-entry { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.npc-dialogue-entry:last-child { border-bottom: none; }
.npc-dialogue-player { color: #c8a0e0; font-style: italic; margin: 0 0 .1rem; }
.npc-dialogue-player-label { font-weight: 700; font-style: normal; color: #9966cc; }
.npc-dialogue-npc { color: var(--text-bright); margin: 0; }
.npc-dialogue-npc-label { font-weight: 700; color: #e8c06a; }


.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.875rem}
.gallery-figure{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.gallery-figure img{width:100%;height:135px;object-fit:cover}
.gallery-figure figcaption{padding:.4rem .65rem;font-size:.76rem;color:var(--text)}

/* -- Related ---------------------------------------------------- */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.6rem}
.related-card{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text-bright);transition:all var(--tr)}
.related-card:hover{background:var(--surface-3);border-color:var(--border-2);color:#fff;transform:translateX(2px)}
.related-card-icon{font-size:1rem;flex-shrink:0}

/* -- Dropped by section ---------------------------------------- */
.dropped-by-section{margin:2rem 0}
.dropped-by-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;margin-top:.8rem}
.dropped-by-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .7rem;background:rgba(16,24,42,.88);border:1px solid rgba(113,130,170,.3);border-radius:14px;text-decoration:none;color:var(--text-bright);transition:all var(--tr);text-align:center}
.dropped-by-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.dropped-by-card--boss:hover{border-color:rgba(197,54,54,.5)}
.dropped-by-card--monster:hover{border-color:rgba(54,140,197,.4)}
.dropped-by-card-img{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(145deg,rgba(40,53,84,.7),rgba(21,31,54,.9));border:1px solid rgba(127,146,188,.3);overflow:hidden;flex-shrink:0}
.dropped-by-card-img img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.dropped-by-card-noimg{font-size:1.8rem}
.dropped-by-card-body{display:flex;flex-direction:column;gap:.22rem;align-items:center}
.dropped-by-card-name{font-size:.82rem;font-weight:700;color:#e8eeff;line-height:1.25;word-break:break-word}
.dropped-by-card-type{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .45rem;border-radius:6px}
.dropped-by-card-type--boss{color:#f0a060;background:rgba(197,100,40,.2);border:1px solid rgba(197,100,40,.35)}
.dropped-by-card-type--monster{color:#7ec8e3;background:rgba(40,130,180,.15);border:1px solid rgba(40,130,180,.3)}
.dropped-by-empty{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;background:rgba(16,24,42,.7);border:1px solid rgba(113,130,170,.25);border-radius:10px;font-size:.92rem;color:#b0bdd8;margin-top:.7rem}
.dropped-by-empty strong{color:#e8eeff}
.dropped-by-subheading{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin:1.2rem 0 .6rem;padding:.28rem .75rem;border-radius:7px;display:inline-flex;align-items:center;gap:.4rem}
.dropped-by-subheading--boss{color:#f0a060;background:rgba(197,100,40,.15);border:1px solid rgba(197,100,40,.3)}
.dropped-by-subheading--monster{color:#7ec8e3;background:rgba(40,130,180,.12);border:1px solid rgba(40,130,180,.25)}

/* -- Type badges ------------------------------------------------ */
.type-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .7rem;border-radius:var(--radius);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap}
.type-badge--monster{color:var(--c-monster);background:var(--g-monster)}
.type-badge--item{color:var(--c-item);background:var(--g-item)}
.type-badge--npc{color:var(--c-npc);background:var(--g-npc)}
.type-badge--quest{color:var(--c-quest);background:var(--g-quest)}
.type-badge--zone{color:var(--c-zone);background:var(--g-zone)}
.type-badge--misc{color:var(--c-misc);background:var(--g-misc)}
.type-badge--streamer{color:var(--c-streamer);background:var(--g-streamer)}

/* -- Streamer card (page.php) ----------------------------------- */
.streamer-card{display:flex;gap:1.5rem;align-items:flex-start;background:var(--surface-2);border:1px solid rgba(199,64,122,.25);border-radius:16px;padding:1.25rem 1.4rem;margin-bottom:1.5rem}
.streamer-card-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;border:3px solid rgba(199,64,122,.4);flex-shrink:0;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.streamer-card-avatar img{width:100%;height:100%;object-fit:cover}
.streamer-card-avatar--empty{border-style:dashed}
.streamer-card-info{flex:1;min-width:0}
.streamer-card-top{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.45rem}
.streamer-card-name{font-size:1.8rem;font-weight:900;color:#f2f6ff;line-height:1.1;margin:0 0 .5rem}
.streamer-card-description{font-size:.92rem;color:var(--text-bright);margin:.3rem 0 .75rem;line-height:1.5}
.streamer-socials{display:flex;flex-wrap:wrap;gap:.45rem}
.streamer-social-btn{display:inline-flex;align-items:center;gap:.38rem;padding:.3rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--sc,#b7c7ea);font-size:.76rem;font-weight:700;transition:all var(--tr)}
.streamer-social-btn:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.streamer-videos-section{margin-top:1.5rem}
.streamer-videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;margin-top:.85rem}
.streamer-video-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.streamer-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.streamer-video-fallback{display:flex;align-items:center;justify-content:center;height:100%;background:rgba(255,255,255,.05);color:#b7c7ea;font-weight:700;text-align:center;padding:1rem}
.streamer-video-fallback:hover{color:#fff}
.section-subtitle{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-md)}

/* -- Search ----------------------------------------------------- */
.search-header{margin-bottom:2rem}
.search-header h1{font-size:1.8rem;color:var(--gold-text);margin-bottom:1rem}
.search-form{display:flex;gap:.5rem;max-width:620px}
.search-form input{flex:1;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text-bright);padding:.65rem 1rem;font-size:1rem;font-family:var(--font);outline:none;transition:border-color var(--tr),box-shadow var(--tr)}
.search-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.search-form button{padding:.65rem 1.5rem;background:var(--gold);border:none;border-radius:var(--radius);color:#000;font-weight:700;font-size:.9rem;font-family:var(--font);cursor:pointer;transition:background var(--tr)}
.search-form button:hover{background:var(--gold-light)}
.search-count-badge{display:inline-block;font-size:.85rem;color:var(--text-md);margin-bottom:1.25rem}
.search-count-badge strong{color:var(--text-bright)}
.search-results{display:flex;flex-direction:column;gap:.6rem}
.search-result{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;display:block;transition:all var(--tr)}
.search-result:hover{border-color:var(--border-2);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.search-result-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem}
.search-result-header h3{font-size:1rem;color:var(--text-bright);font-weight:600}
.search-result-excerpt{font-size:.84rem;color:var(--text);line-height:1.5}
.search-empty{text-align:center;padding:4rem 2rem;color:var(--text)}
.search-empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.4}
.search-empty-hint{font-size:.875rem;margin-top:.4rem;margin-bottom:1.5rem}

/* -- 404 -------------------------------------------------------- */
.error-page{text-align:center;padding:5rem 2rem}
.error-page-code{font-size:9rem;font-weight:900;color:var(--border-2);line-height:1;margin-bottom:1rem}
.error-page h1{font-size:1.5rem;color:var(--text-md);margin-bottom:.75rem}
.error-page p{color:var(--text);margin-bottom:1.5rem}

/* -- Buttons ---------------------------------------------------- */
.btn-outline{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.25rem;background:transparent;border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text-bright);font-size:.875rem;font-family:var(--font);cursor:pointer;transition:all var(--tr);text-decoration:none}
.btn-outline:hover{background:var(--surface-2);border-color:var(--gold);color:var(--gold-light)}
.empty-state{text-align:center;padding:3rem 2rem;color:var(--text)}

/* -- Video grid ------------------------------------------------- */
/* ── Video platform sections ─────────────────────────────── */
.video-platform-section{margin-bottom:2.25rem}
.video-platform-header{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem .55rem 0;margin-bottom:.85rem;border-bottom:2px solid var(--platform-color,var(--border-2))}
.video-platform-icon{display:flex;align-items:center;flex-shrink:0}
.video-platform-title{font-size:1.1rem;font-weight:700;margin:0;flex:1}
.video-platform-count{font-size:.75rem;color:var(--color-text-muted);white-space:nowrap}
/* Instagram link-card fallback */
.video-card-link-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;border-radius:var(--radius);border:2px solid var(--link-color,var(--border-2));text-decoration:none;background:var(--color-surface-alt);transition:background .15s}
.video-card-link-card:hover{background:color-mix(in srgb,var(--link-color,#888) 10%,var(--color-surface-alt))}
.video-card-link-icon{opacity:.85}
.video-card-link-label{font-size:.85rem;font-weight:700;color:var(--link-color,inherit)}
.video-card-link-title{font-size:.78rem;color:var(--color-text-muted);text-align:center;line-height:1.3}
/* Grid */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;padding:.5rem 0 1.5rem}
.video-card{display:flex;flex-direction:column;gap:.45rem}
.video-card-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000;border:2px solid var(--border-2)}
.video-card-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.video-card-title{font-size:.8rem;color:var(--text-bright);text-align:center;padding:0 .25rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:1200px){.video-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.video-grid{grid-template-columns:1fr}}

/* -- Footer ----------------------------------------------------- */
.wiki-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:auto}
.wiki-footer-inner{max-width:1400px;margin:0 auto;padding:1.1rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.wiki-footer-brand{display:flex;align-items:center;gap:.6rem}
.footer-emblem{font-size:1.2rem}
.wiki-footer-brand strong{color:var(--gold-light);font-size:.9rem}
.footer-tagline{display:block;font-size:.7rem;color:var(--text)}
.wiki-footer-meta{font-size:.78rem;color:var(--text)}
.wiki-footer-nav{margin-left:auto;display:flex;gap:1rem}
.wiki-footer-nav a{font-size:.78rem;color:var(--text)}
.wiki-footer-nav a:hover{color:var(--text-bright)}
.wiki-footer-copy{text-align:center;padding:.65rem 1.5rem;font-size:.72rem;color:var(--text);border-top:1px solid var(--border)}

/* -- Responsive ------------------------------------------------- */
@media(max-width:1140px){
    .topnav-link-text{display:none}
    .topnav-link{padding:.35rem .55rem}
}
@media(max-width:860px){
    .wiki-layout{flex-direction:column}
    .wiki-sidebar{width:100%;height:auto;position:static;min-height:auto;border-right:none;border-bottom:1px solid var(--border)}
    body.sidebar-collapsed .wiki-sidebar{width:100%}
    body.sidebar-collapsed .sidebar-logo-text,
    body.sidebar-collapsed .sidebar-logo-img{height:28px}
    body.sidebar-collapsed .sidebar-group-label,
    body.sidebar-collapsed .sidebar-group-count,
    body.sidebar-collapsed .sidebar-item-label,
    body.sidebar-collapsed .sidebar-footer{display:block}
    body.sidebar-collapsed .sidebar-header{justify-content:space-between;flex-direction:row;padding:.75rem .8rem}
    body.sidebar-collapsed .sidebar-ql{font-size:.84rem;justify-content:flex-start;padding:.38rem .75rem}
    body.sidebar-collapsed .sidebar-ql span{font-size:inherit}
    body.sidebar-collapsed .sidebar-group-header{justify-content:flex-start;padding:.38rem .75rem;border-left:2px solid transparent}
    body.sidebar-collapsed .sidebar-item{justify-content:flex-start;padding:.24rem .75rem .24rem 1.45rem}
    .wiki-content{padding:1.25rem}
    .topnav-nav{display:none}
    .topnav-search{flex:1}
    .topnav-search input{width:100%}
    .infobox{float:none;width:100%;margin:0 0 1.5rem 0}
    .home-hero{padding:1.5rem}
    .home-hero-content{flex-direction:column;gap:1rem}
    .home-hero-title{font-size:1.9rem}
    .category-grid{grid-template-columns:repeat(3,1fr)}
    .boss-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .creature-card{flex-direction:column;gap:1rem;padding:1.25rem}
    .creature-card-sprite{width:100%;align-items:flex-start}
    .creature-card-howto{width:100%}
}
@media(max-width:560px){
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .recent-grid{grid-template-columns:1fr}
    .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .article-grid{grid-template-columns:1fr}
    .article-title{font-size:1.65rem}
    .home-hero-stats{gap:.5rem}
    .boss-kpi-grid{grid-template-columns:1fr}
    .world-champions-grid{grid-template-columns:1fr}
}

/* ================================================================
   Drag & Drop Zone (Quest Images)
   ================================================================ */
.drag-drop-zone {
    position: relative;
    border: 2px dashed var(--border-2);
    border-radius: var(--radius-lg);
    background: rgba(192, 120, 16, 0.06);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--tr);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-drop-zone:hover {
    border-color: var(--c-quest);
    background: rgba(192, 120, 16, 0.12);
}

.drag-drop-zone.drag-over {
    border-color: var(--gold);
    background: rgba(200, 146, 42, 0.18);
    box-shadow: 0 0 20px rgba(200, 146, 42, 0.2);
    transform: scale(1.02);
}

.drag-drop-content {
    pointer-events: none;
    user-select: none;
}

.drag-drop-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.7;
}

.drag-drop-text {
    color: var(--text-bright);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.drag-drop-link {
    color: var(--c-quest);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.drag-drop-hint {
    color: var(--text);
    font-size: 0.85rem;
    opacity: 0.8;
}

.quest-image-preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.quest-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.quest-preview-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: all var(--tr);
}

.quest-preview-item:hover {
    border-color: var(--c-quest);
    transform: translateY(-2px);
}

.quest-preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.quest-preview-item-name {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text);
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quest-preview-item-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(181, 36, 50, 0.9);
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--tr);
}

/* ── Quest List Table ──────────────────────────────────────── */
.quest-list-wrapper{display:flex;flex-direction:column;gap:2.5rem;margin-top:1rem}
.quest-group-title{font-size:1.25rem;font-weight:700;color:var(--accent,#c9a227);border-bottom:2px solid rgba(201,162,39,.35);padding-bottom:.45rem;margin-bottom:.9rem}
.quest-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid rgba(255,255,255,.07)}
.quest-table{width:100%;border-collapse:collapse;font-size:.93rem}
.quest-table thead tr{background:#5a1a1a;color:#f0e0b0}
.quest-table thead th{padding:.55rem .75rem;text-align:left;font-weight:600;white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.12)}
.quest-table tbody tr.quest-row-even{background:#d4a96a22}
.quest-table tbody tr.quest-row-odd{background:#b8945522}
.quest-table tbody tr:hover{background:rgba(201,162,39,.12)}
.quest-table td{padding:.45rem .75rem;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.quest-cell-center{text-align:center}
.quest-link{color:var(--accent,#c9a227);text-decoration:none;font-weight:500}
.quest-link:hover{text-decoration:underline}
.quest-prem-yes{color:#4caf50;font-weight:700;font-size:1.05rem}
.quest-prem-no{color:#e55;font-size:1.05rem}
/* ── Items List ─────────────────────────────────────────────────────────── */
.item-list-page{margin:0}
.item-filter-bar{background:rgba(16,22,38,.85);border:1px solid rgba(113,130,170,.22);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.75rem}
.item-search-wrap{}
.item-search-input{width:100%;box-sizing:border-box;padding:.55rem .85rem;border-radius:8px;border:1px solid rgba(107,129,172,.35);background:rgba(10,18,35,.75);color:#e8eeff;font-size:.95rem}
.item-search-input:focus{outline:none;border-color:rgba(200,146,42,.6)}
.item-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem}
.item-filter-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(172,189,220,.7);white-space:nowrap;min-width:68px}
.item-filter-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.item-chip{padding:.28rem .65rem;border-radius:20px;border:1px solid rgba(107,129,172,.28);background:rgba(20,30,52,.7);color:rgba(172,189,220,.82);font-size:.78rem;cursor:pointer;transition:all .14s;white-space:nowrap}
.item-chip:hover{border-color:rgba(200,146,42,.45);color:#f0c060}
.item-chip--active{background:rgba(200,146,42,.16);border-color:rgba(200,146,42,.58);color:#f0c060;font-weight:700}
.item-results-count{font-size:.78rem;color:rgba(172,189,220,.55);padding-top:.2rem}
.item-table-wrap{overflow-x:auto;border-radius:10px;border:1px solid rgba(107,129,172,.18)}
.item-table{width:100%;border-collapse:collapse;font-size:.88rem}
.item-table thead tr{background:rgba(20,30,55,.95);color:#b5c3df}
.item-table thead th{padding:.55rem .75rem;text-align:left;font-weight:600;white-space:nowrap;border-bottom:2px solid rgba(107,129,172,.22)}
.item-th-icon{width:56px;text-align:center}
.item-table tbody tr.item-row:nth-child(even){background:rgba(20,30,55,.32)}
.item-table tbody tr.item-row:hover{background:rgba(200,146,42,.07)}
.item-table td{padding:.4rem .75rem;border-bottom:1px solid rgba(107,129,172,.1);vertical-align:middle}
.item-td-icon{text-align:center}
.item-td-c{text-align:center}
.item-td-stats{font-family:monospace;font-size:.82rem;color:rgba(192,210,240,.8)}
.item-list-icon{width:42px;height:42px;object-fit:contain}
.item-icon-ph{font-size:1.25rem;display:block;text-align:center;color:rgba(172,189,220,.5)}
.item-link{color:#d4b87a;text-decoration:none;font-weight:600}
.item-link:hover{color:#f0c060;text-decoration:underline}
.item-origin-badge{display:inline-block;padding:.17rem .52rem;border-radius:6px;font-size:.71rem;font-weight:700;white-space:nowrap}
.item-origin-badge--hegalot{background:rgba(100,60,200,.18);border:1px solid rgba(130,80,255,.35);color:#b09eff}
.item-origin-badge--tibia-global{background:rgba(30,100,200,.18);border:1px solid rgba(50,130,255,.35);color:#7fbfff}
.item-cat-badge{display:inline-block;padding:.14rem .48rem;border-radius:6px;font-size:.71rem;font-weight:600;background:rgba(200,146,42,.14);border:1px solid rgba(200,146,42,.28);color:#e8c76a;white-space:nowrap}
.item-voc-badge{display:inline-block;padding:.1rem .38rem;border-radius:5px;font-size:.68rem;font-weight:600;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.24);color:#74d89a;white-space:nowrap;margin:.08rem .08rem .08rem 0}
/* Admin: vocation checkboxes */
.item-voc-checkboxes{display:flex;flex-wrap:wrap;gap:.45rem .85rem;padding:.5rem .7rem;background:rgba(10,18,35,.4);border-radius:8px;border:1px solid rgba(107,129,172,.2)}
.voc-check{display:flex;align-items:center;gap:.32rem;font-size:.87rem;color:rgba(192,210,240,.88);cursor:pointer;white-space:nowrap}
.voc-check input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:#f0c060}

/* ================================================================
   NEW FEATURES — Guide type, Filter bar, Compare, 404 page
   ================================================================ */

/* -- Guide color variables ---------------------------------------- */
:root {
    --c-guide:    #2ea87e;
    --g-guide:    rgba(46,168,126,0.14);
    --c-streamer: #7c4dff;
    --g-streamer: rgba(124,77,255,0.14);
}

/* -- Guide / Streamer type badges & nav --------------------------- */
.topnav-link--guide:hover,
.topnav-link--guide.topnav-link--active  { color: var(--c-guide); }
.topnav-link--streamer:hover,
.topnav-link--streamer.topnav-link--active { color: var(--c-streamer); }
.topnav-link--compare:hover,
.topnav-link--compare.topnav-link--active { color: var(--gold-light); }

.sidebar-group-header--guide    { border-left-color: var(--c-guide);    color: var(--c-guide); }
.sidebar-group-header--streamer { border-left-color: var(--c-streamer); color: var(--c-streamer); }

.type-badge--guide    { background: var(--g-guide);    color: var(--c-guide); }
.type-badge--streamer { background: var(--g-streamer); color: var(--c-streamer); }

.category-card--guide    { --cc-color: var(--c-guide);    --cc-bg: var(--g-guide); }
.category-card--streamer { --cc-color: var(--c-streamer); --cc-bg: var(--g-streamer); }

.type-header--guide    { background: linear-gradient(135deg, var(--g-guide) 0%, transparent 60%); border-left: 4px solid var(--c-guide); }
.type-header--streamer { background: linear-gradient(135deg, var(--g-streamer) 0%, transparent 60%); border-left: 4px solid var(--c-streamer); }

.recent-card-type--guide    { background: var(--g-guide);    color: var(--c-guide); }
.recent-card-type--streamer { background: var(--g-streamer); color: var(--c-streamer); }

/* -- Creature filter bar ----------------------------------------- */
.creature-filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.creature-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    color: var(--text-bright);
    padding: .5rem .85rem;
    font-size: .9rem;
    outline: none;
    transition: border-color .18s;
}
.creature-search-input:focus { border-color: var(--gold); }
.creature-search-input::placeholder { color: var(--text); }
.creature-search-count {
    font-size: .8rem;
    color: var(--text);
    white-space: nowrap;
}
.creature-compare-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--gold-light);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s;
}
.creature-compare-link:hover {
    background: var(--gold-glow);
    border-color: var(--gold);
}

/* -- Compare page ------------------------------------------------- */
.compare-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}
.compare-header {
    text-align: center;
    margin-bottom: 2rem;
}
.compare-title {
    font-size: 2rem;
    color: var(--heading);
    font-family: 'Cinzel', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.compare-subtitle {
    color: var(--text);
    margin-top: .35rem;
}
/* Selector form */
.compare-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}
.compare-selectors {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}
.compare-selector-group {
    flex: 1;
    min-width: 220px;
}
.compare-selector-label {
    display: block;
    font-size: .8rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .4rem;
}
.compare-select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    color: var(--text-bright);
    padding: .55rem .85rem;
    font-size: .9rem;
    outline: none;
    transition: border-color .18s;
}
.compare-select:focus { border-color: var(--gold); }
.compare-vs-badge {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    padding-bottom: .2rem;
    flex-shrink: 0;
}
.compare-submit-btn {
    display: block;
    margin: 0 auto;
    padding: .6rem 2.5rem;
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .1s;
}
.compare-submit-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
/* Result */
.compare-creatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.compare-creature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.compare-creature--A { border-top: 3px solid #4a90e2; }
.compare-creature--B { border-top: 3px solid #e24a4a; }
.compare-creature-sprite-wrap {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-creature-sprite {
    max-width: 96px;
    max-height: 96px;
    image-rendering: pixelated;
    animation: floatSprite 3.5s ease-in-out infinite;
}
.compare-creature-sprite-ph {
    font-size: 3rem;
}
.compare-creature-name {
    font-size: 1.2rem;
    color: var(--heading);
    font-family: 'Cinzel', serif;
    margin: .2rem 0;
}
.compare-creature-link {
    font-size: .8rem;
    color: var(--gold-light);
    text-decoration: none;
}
.compare-creature-link:hover { text-decoration: underline; }
/* Stats table */
.compare-stats-table-wrap { overflow-x: auto; margin-bottom: 2rem; }
.compare-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.compare-stats-table thead th {
    background: var(--surface-2);
    color: var(--text-md);
    padding: .65rem 1rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.compare-th-a { border-top: 3px solid #4a90e2; text-align: left; }
.compare-th-b { border-top: 3px solid #e24a4a; text-align: right; }
.compare-th-stat { text-align: center; }
.compare-row { border-bottom: 1px solid var(--border); }
.compare-row:last-child { border-bottom: none; }
.compare-td-val {
    padding: .6rem 1rem;
    font-size: .9rem;
    color: var(--text-md);
    width: 38%;
}
.compare-td-val--a { text-align: left; }
.compare-td-val--b { text-align: right; }
.compare-td-val--win { color: #4caf7d; font-weight: 700; }
.compare-td-val--lose { color: var(--text); }
.compare-td-val--tie { color: var(--text-md); }
.compare-td-label {
    padding: .6rem .5rem;
    color: var(--text);
    font-size: .78rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    width: 24%;
}
.compare-unknown { color: var(--border-2); }
/* Loot comparison */
.compare-loot { margin-bottom: 2rem; }
.compare-section-title {
    font-size: 1.1rem;
    color: var(--heading);
    font-family: 'Cinzel', serif;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.compare-loot-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.compare-loot-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.compare-loot-header {
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: .75rem;
    font-size: .9rem;
}
.compare-loot-item {
    padding: .3rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-md);
    font-size: .85rem;
}
.compare-loot-item:last-child { border-bottom: none; }
.compare-loot-empty { color: var(--text); font-style: italic; font-size: .85rem; }
.compare-error {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    color: var(--text);
}
@media (max-width: 640px) {
    .compare-creatures { grid-template-columns: 1fr; }
    .compare-loot-cols { grid-template-columns: 1fr; }
    .compare-selectors { flex-direction: column; }
    .compare-vs-badge { text-align: center; }
}

/* -- 404 Not Found page ------------------------------------------- */
.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 4rem;
    text-align: center;
}
.not-found-emblem {
    position: relative;
    margin-bottom: 1.5rem;
}
.not-found-code {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 700;
    color: var(--surface-3);
    line-height: 1;
    text-shadow: 0 2px 40px rgba(200,146,42,.15);
    letter-spacing: -.04em;
}
.not-found-skull {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    animation: floatSprite 4s ease-in-out infinite;
}
.not-found-body { max-width: 540px; }
.not-found-title {
    font-size: 1.7rem;
    color: var(--heading);
    font-family: 'Cinzel', serif;
    margin-bottom: .75rem;
}
.not-found-desc {
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.not-found-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.not-found-btn {
    padding: .6rem 1.6rem;
    border-radius: 20px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .12s, background .18s;
}
.not-found-btn:hover { transform: translateY(-2px); }
.not-found-btn--primary {
    background: var(--gold);
    color: #000;
}
.not-found-btn--primary:hover { background: var(--gold-light); }
.not-found-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--text-md);
}
.not-found-btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.not-found-suggestions { text-align: left; width: 100%; }
.not-found-suggestions-title {
    font-size: 1rem;
    color: var(--text-md);
    margin-bottom: 1rem;
    font-family: 'Cinzel', serif;
}
.not-found-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .75rem;
}

/* ================================================================
   Compare page — Enriched Loot (icons + prices)
   ================================================================ */

/* Loot totals banner */
.compare-loot-totals {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(200,146,42,.1) 0%, rgba(200,146,42,.04) 100%);
    border: 1px solid rgba(200,146,42,.3);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.compare-loot-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.compare-loot-total--a { align-items: flex-start; }
.compare-loot-total--b { align-items: flex-end; }
.compare-loot-total-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
}
.compare-loot-total-val {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
}
.compare-loot-total-vs {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}
.compare-gold-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    vertical-align: middle;
    flex-shrink: 0;
}
.compare-loot-price-note {
    font-size: .72rem;
    color: var(--text);
    margin-bottom: 1rem;
    font-style: italic;
}

/* Loot column header */

/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES — Search autocomplete, Boosted hero, Bestiary, Loot related,
   Dark/Light mode, Calc, Item lvl slider
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topnav search ───────────────────────────────────────────────────────── */
.topnav-search { position: relative; flex-shrink: 1; }
.topnav-search-form { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; transition: border-color .18s; }
.topnav-search-form:focus-within { border-color: var(--gold); }
.topnav-search-input { background: transparent; border: none; color: var(--text-bright); padding: .4rem 1rem; font-size: .82rem; width: 160px; outline: none; transition: width .2s; }
.topnav-search-input:focus { width: 210px; }
.topnav-search-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: .4rem .7rem; display: flex; align-items: center; transition: color .15s; }
.topnav-search-btn:hover { color: var(--gold); }
.topnav-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); z-index: 300; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5); list-style: none; padding: 0; margin: 0; }
.tns-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; cursor: pointer; transition: background .1s; }
.tns-item:hover, .tns-item--active { background: var(--surface-2); }
.tns-icon { font-size: .95rem; flex-shrink: 0; }
.tns-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tns-title { font-size: .88rem; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tns-type { font-size: .7rem; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }

/* ── Dark/Light mode toggle button ──────────────────────────────────────── */
.topnav-theme-toggle { background: none; border: 1px solid var(--border-2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-md); flex-shrink: 0; transition: color .18s, border-color .18s, background .18s; }
.topnav-theme-toggle:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-glow); }

/* ── Light mode overrides ────────────────────────────────────────────────── */
body.light-mode {
    --bg:          #f0f2f7;
    --surface:     #ffffff;
    --surface-2:   #eaedf5;
    --surface-3:   #e0e4ef;
    --border:      #d0d6e5;
    --border-2:    #b8c0d8;
    --text:        #6e7a96;
    --text-md:     #4a5470;
    --text-bright: #1a2040;
    --heading:     #0e1530;
    --gold:        #9c6a14;
    --gold-light:  #b57e1e;
    --gold-text:   #7a5010;
    --gold-glow:   rgba(156,106,20,0.1);
    --shadow:      0 4px 24px rgba(0,0,0,0.12);
    --shadow-sm:   0 2px 10px rgba(0,0,0,0.08);
}
body.light-mode .topnav { box-shadow: 0 2px 12px rgba(0,0,0,.1); }

/* ── Boosted hero widget ─────────────────────────────────────────────────── */
.boosted-widget--hero { border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; margin-bottom: 1.5rem; }
.boosted-widget-refresh { margin-left: auto; font-size: .72rem; color: var(--text); font-style: italic; }
.boosted-card--hero { position: relative; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; transition: transform .18s, box-shadow .18s; }
.boosted-card--hero:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.boosted-card--creature { border-color: var(--c-monster); }
.boosted-card--boss { border-color: var(--c-boss); }
.boosted-card-sprite { display: flex; align-items: center; justify-content: center; height: 80px; }
.boosted-img--hero { height: 72px; width: auto; image-rendering: pixelated; }
.boosted-name--link { font-size: .95rem; font-weight: 700; color: var(--gold-light); text-align: center; }
.boosted-name--link:hover { color: #fff; }
.boosted-stats { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.boosted-stat { background: var(--surface-3); border-radius: 999px; padding: .22rem .7rem; font-size: .72rem; color: var(--text-md); }
.boosted-stat--bonus { background: var(--c-boss); color: #fff; font-weight: 700; }

/* ── Bestiary page ───────────────────────────────────────────────────────── */
.bestiary-page { padding: 1.5rem 0 3rem; }
.bestiary-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); margin-bottom: 1.2rem; }
.bestiary-search { width: 220px; flex-shrink: 0; }
.bestiary-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-2); }
.bestiary-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bestiary-table thead th { background: var(--surface-2); color: var(--text); padding: .65rem .8rem; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bestiary-table thead th:first-child { width: 52px; }
.bst-row { border-bottom: 1px solid var(--border); transition: background .1s; }
.bst-row:hover { background: var(--surface-2); }
.bst-td-img { padding: .4rem .6rem; }
.bst-sprite { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.bst-sprite-ph { font-size: 1.5rem; }
.bst-td-c { text-align: center; padding: .5rem .8rem; }
.bst-name-link { color: var(--text-bright); font-weight: 600; }
.bst-name-link:hover { color: var(--gold-light); }
.bst-sortable { cursor: pointer; user-select: none; }
.bst-sortable:hover { color: var(--gold); }
.bst-sort-icon { opacity: .5; font-size: .75rem; margin-left: .25rem; }

/* ── Loot related items (page.php criatura) ──────────────────────────────── */
.loot-related-section { margin-top: 2rem; }
.loot-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; margin-top: .8rem; }
.loot-related-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: .75rem .5rem; text-align: center; transition: transform .18s, background .15s; text-decoration: none; color: var(--text-md); }
.loot-related-card:hover { transform: translateY(-2px); background: var(--surface-3); color: var(--text-bright); }
.loot-related-card-icon { display: flex; align-items: center; justify-content: center; height: 36px; }
.loot-related-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.loot-related-icon-ph { font-size: 1.5rem; }
.loot-related-name { font-size: .75rem; font-weight: 600; line-height: 1.3; }
.loot-related-price { font-size: .7rem; color: var(--gold); }

/* ── Item level slider ───────────────────────────────────────────────────── */
.item-filter-group--lvl { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.item-lvl-slider { flex: 1 1 120px; max-width: 200px; accent-color: var(--gold); }
.item-lvl-reset { padding: .2rem .6rem !important; font-size: .75rem !important; border-radius: 999px !important; }
.compare-loot-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .85rem;
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-bright);
    border-bottom: 1px solid var(--border);
}
.compare-loot-count {
    font-size: .72rem;
    color: var(--text);
    font-weight: 400;
}

/* Loot row */
.compare-loot-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .85rem;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.compare-loot-row:last-child { border-bottom: none; }
.compare-loot-row:hover { background: var(--surface-2); }

/* Item icon */
.compare-loot-icon-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.compare-loot-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    object-fit: contain;
}
.compare-loot-icon-ph {
    font-size: 1rem;
    line-height: 1;
    opacity: .5;
}

/* Item info */
.compare-loot-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.compare-loot-name {
    font-size: .85rem;
    color: var(--text-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compare-loot-name--link {
    text-decoration: none;
    color: var(--text-bright);
}
.compare-loot-name--link:hover {
    color: var(--gold-light);
    text-decoration: underline;
}
.compare-loot-price {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--gold-text);
    font-weight: 600;
}