/*
 * Database detail pages - monsters and items - layout v2.
 *
 * Everything a player looks up at a glance sits in one compact overview on the first screen; the long lists (drops,
 * spawn locations, where an item comes from) follow. Loaded after page-redesign.css by database/monsters/detail.php
 * and database/items/detail.php.
 */
body.rmr-db-detail{--dd-ac:248,113,113;--dd-ac2:56,189,248}
body.rmr-page-items{--dd-ac:56,189,248;--dd-ac2:168,85,247}

/* Hero: one compact block */
body.rmr-db-detail .dd-hero-pad{padding-top:18px!important;padding-bottom:12px!important}
body.rmr-db-detail #hero{max-width:none;padding:16px 20px}
body.rmr-db-detail #hero>h1,body.rmr-page-items #hero h1{margin:0 0 2px;font-size:clamp(28px,3.2vw,40px);line-height:1.1}
body.rmr-db-detail #hero p#sub,body.rmr-page-items #hero p#isub{margin:0 0 10px}
body.rmr-db-detail .dd-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
body.rmr-db-detail .dd-hero-row #badges{margin:0}
body.rmr-db-detail .dd-hero-row .share-bar{margin:0 0 0 auto}
body.rmr-page-items #hero>.flex{align-items:center;gap:18px}
body.rmr-page-monsters #sprite-wrap{width:52px;height:52px}
body.rmr-page-monsters #sprite{width:auto;height:auto;max-width:46px!important;max-height:46px!important}
body.rmr-page-items #col-img-wrap{width:104px!important;height:104px!important}
body.rmr-page-items #col-img-wrap img{max-width:88px;max-height:88px}
.dd-mode{display:inline-flex;border:1px solid rgba(255,255,255,.12);background:rgba(8,11,20,.72)}
.dd-mode a{padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.03em;color:rgba(203,213,225,.7);text-decoration:none;transition:color .15s,background .15s}
.dd-mode a:hover{color:#fff}
.dd-mode a.is-on{color:#fff;background:rgba(var(--dd-ac),.2);box-shadow:inset 0 -2px 0 rgb(var(--dd-ac))}
/* Only one database has this entry: the switch is a label ("Renewal only"), not a link to a page that does not exist */
.dd-mode span.is-on{padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(var(--dd-ac),.2);box-shadow:inset 0 -2px 0 rgb(var(--dd-ac));cursor:default}

/* Page body */
.dd-content{padding:16px 0 56px}
.dd-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.dd-panel{position:relative;min-width:0;padding:14px 14px 13px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(17,22,36,.95),rgba(9,12,21,.97));box-shadow:0 16px 36px rgba(0,0,0,.38)}
.dd-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(var(--dd-ac),.75),rgba(var(--dd-ac2),.5),transparent)}
.dd-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,232,240,.78)}
.dd-h::before{content:"";flex-shrink:0;width:3px;height:12px;background:rgb(var(--dd-ac))}
.dd-h em{font-style:normal;padding:1px 6px;font-size:10px;letter-spacing:.04em;color:rgba(203,213,225,.85);background:rgba(255,255,255,.07)}
.dd-sub{margin-top:14px}
.dd-wide{grid-column:1/-1}
.dd-note{margin:0;max-width:760px;font-size:13.5px;line-height:1.6;color:rgba(226,232,240,.9)}

/* Key / value grid */
.dd-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.05)}
.dd-kv-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:6px 9px;background:rgba(9,12,21,.95)}
.dd-kv-row span{font-size:11px;color:rgba(148,163,184,.88);white-space:nowrap}
.dd-kv-row b{min-width:0;font-size:13.5px;font-weight:700;color:#f1f5f9;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dd-kv-row small{font-size:10.5px;font-weight:600;color:rgba(148,163,184,.85)}

/* Attributes and element damage tiles */
.dd-attr,.dd-elem{display:grid;gap:4px}
.dd-attr{grid-template-columns:repeat(6,minmax(0,1fr))}
.dd-elem{grid-template-columns:repeat(5,minmax(0,1fr))}
.dd-attr div,.dd-elem div{min-width:0;padding:6px 2px;text-align:center;border:1px solid rgba(255,255,255,.06);background:rgba(9,12,21,.92)}
.dd-attr span,.dd-elem span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:rgba(148,163,184,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-attr b{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.dd-elem b{font-size:13.5px;color:#e2e8f0;font-variant-numeric:tabular-nums}
.dd-elem div.weak{border-color:rgba(248,113,113,.32);background:rgba(127,29,29,.34)}
.dd-elem div.weak b{color:#fca5a5}
.dd-elem div.resist{border-color:rgba(74,222,128,.26);background:rgba(20,83,45,.3)}
.dd-elem div.resist b{color:#86efac}
.dd-elem div.immune b{color:rgba(148,163,184,.7)}
.dd-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:10.5px;color:rgba(148,163,184,.8)}
.dd-legend i{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:0}

/* Chips */
.dd-chips{display:flex;flex-wrap:wrap;gap:5px}
.dd-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:11px;font-weight:600;line-height:1.35;color:rgba(148,163,184,.55);border:1px solid rgba(255,255,255,.06);background:rgba(9,12,21,.85)}
.dd-chip.on{color:#fecaca;border-color:rgba(248,113,113,.35);background:rgba(127,29,29,.3)}
.dd-chip.on::before{content:"\2713";font-weight:800;color:#4ade80}
.dd-chip.info{color:#cbd5e1;border-color:rgba(255,255,255,.1)}
.dd-chip.srv{color:#bfdbfe;border-color:rgba(96,165,250,.26);background:rgba(30,58,138,.2)}
.dd-chip.srv small{font-size:9.5px;font-weight:500;color:rgba(148,163,184,.8)}

/* Tabs */
.dd-tabs{margin-bottom:14px;box-shadow:0 16px 36px rgba(0,0,0,.38)}
.dd-tabbar{display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.08);border-bottom:0;background:rgba(9,12,21,.94)}
.dd-tab{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;font-family:inherit;font-size:12px;font-weight:700;color:rgba(203,213,225,.72);background:none;border:0;border-right:1px solid rgba(255,255,255,.06);cursor:pointer;transition:color .15s,background .15s}
.dd-tab:hover{color:#fff}
.dd-tab em{font-style:normal;padding:0 5px;font-size:10.5px;color:rgba(203,213,225,.85);background:rgba(255,255,255,.07)}
.dd-tab[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,rgba(var(--dd-ac),.2),rgba(var(--dd-ac),.04));box-shadow:inset 0 2px 0 rgb(var(--dd-ac))}
.dd-pane{border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(17,22,36,.95),rgba(9,12,21,.97))}
.dd-pane[hidden]{display:none}
.dd-pane-pad{padding:12px 14px}
.dd-scroll{max-height:300px;overflow:auto}

/* Tables */
.dd-tablewrap{overflow-x:auto}
.dd-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dd-table th{position:sticky;top:0;z-index:1;padding:7px 10px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:rgba(148,163,184,.88);background:rgba(13,17,29,.99);border-bottom:1px solid rgba(255,255,255,.08)}
.dd-table td{padding:5px 10px;color:#e2e8f0;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.dd-table .r{text-align:right}
.dd-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-table .dim{color:rgba(148,163,184,.85)}
.dd-table .nowrap{white-space:nowrap}
.dd-table small{display:block;font-size:10.5px;color:rgba(148,163,184,.8)}
.dd-table tr.link{cursor:pointer}
.dd-table tr.link:hover td{background:rgba(var(--dd-ac2),.07)}
.dd-table a{color:#7dd3fc;text-decoration:none}
.dd-table a:hover{text-decoration:underline}
.dd-table .dd-more-row{display:none}
.dd-table.is-open .dd-more-row{display:table-row}
.dd-name{display:flex;align-items:center;gap:8px;min-width:0}
.dd-name>span{min-width:0}
.dd-ico{flex-shrink:0;width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.dd-map{flex-shrink:0;width:30px;height:30px;object-fit:cover;border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.6)}
.dd-more{display:block;width:100%;padding:8px;font-family:inherit;font-size:12px;font-weight:700;color:#7dd3fc;background:rgba(9,12,21,.92);border:0;border-top:1px solid rgba(255,255,255,.06);cursor:pointer}
.dd-more:hover{color:#fff;background:rgba(var(--dd-ac2),.09)}
.dd-empty{padding:16px;text-align:center;font-size:12.5px;color:rgba(148,163,184,.85)}
.dd-tag{display:inline-block;margin-left:6px;padding:0 5px;font-size:9.5px;font-weight:800;letter-spacing:.06em;vertical-align:1px;color:#facc15;border:1px solid rgba(250,204,21,.35);background:rgba(113,63,18,.32)}
.c-hi{color:#4ade80!important}.c-mid{color:#38bdf8!important}.c-lo{color:#c084fc!important}
.c-red{color:#f87171!important}.c-blue{color:#7dd3fc!important}.c-purple{color:#c084fc!important}.c-gold{color:#facc15!important}.c-green{color:#4ade80!important}

/* Drops and spawn locations side by side */
.dd-loot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:18px}
.dd-loot .dd-panel{padding:0}
.dd-loot .dd-h{margin:0;padding:12px 14px 10px}

/* Item page */
.dd-desc{max-height:236px;overflow:auto;font-size:13px;line-height:1.6;color:rgba(226,232,240,.92);white-space:pre-line;overflow-wrap:anywhere}
.dd-jobs{max-height:104px;overflow:auto}
.dd-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.dd-flag{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 8px;font-size:11.5px;color:rgba(226,232,240,.92);border:1px solid rgba(255,255,255,.06);background:rgba(9,12,21,.92)}
.dd-flag i{font-style:normal;font-weight:800;color:#4ade80}
.dd-flag.no{color:rgba(148,163,184,.7)}
.dd-flag.no i{color:#f87171}
.dd-cardimg{display:block;max-width:112px;width:100%;height:auto;margin:12px 0 0;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.dd-script{margin-bottom:14px;padding:0}
.dd-script summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;list-style:none;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,232,240,.78)}
.dd-script summary::-webkit-details-marker{display:none}
.dd-script summary::before{content:"";width:3px;height:12px;background:rgb(var(--dd-ac))}
.dd-script summary::after{content:"+";margin-left:auto;font-size:16px;line-height:1;color:#7dd3fc}
.dd-script[open] summary::after{content:"\2212"}
.dd-script pre{max-height:200px;overflow:auto;margin:0;padding:0 14px 14px;font-size:12px;line-height:1.6;color:#d8b4fe;white-space:pre-wrap;word-break:break-all}

/* Explore links */
.dd-explore{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.dd-explore-h{margin-right:6px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(148,163,184,.85)}
.dd-explore a{padding:5px 10px;font-size:12px;color:rgba(203,213,225,.88);text-decoration:none;border:1px solid rgba(255,255,255,.08);background:rgba(9,12,21,.85);transition:color .15s,border-color .15s}
.dd-explore a:hover{color:#fff;border-color:rgba(var(--dd-ac),.5)}

@media(max-width:1100px){.dd-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.dd-loot{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .dd-overview{grid-template-columns:minmax(0,1fr)}
  .dd-attr{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.rmr-db-detail .dd-hero-row .share-bar{margin-left:0}
  body.rmr-db-detail #hero{padding:14px 14px}
  .dd-tab{padding:8px 10px;font-size:11.5px}
  .dd-scroll{max-height:360px}
  #dd-pane-skills .dd-table{min-width:720px}
  .dd-kv-row{padding:5px 8px}
}

/* Map page */
.dd-mapimg{display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;aspect-ratio:1/1;margin:0 auto;border:1px solid rgba(255,255,255,.08);background:rgba(4,7,14,.9)}
.dd-mapimg img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.dd-audio{display:block;width:100%;height:34px;margin-top:10px}
.dd-kv-row code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:#7dd3fc}
button.dd-chip,a.dd-chip{font-family:inherit;text-decoration:none}
.dd-chip.link{cursor:pointer;color:#cbd5e1;transition:border-color .15s,color .15s}
.dd-chip.link:hover{color:#fff;border-color:rgba(var(--dd-ac2),.5)}
.dd-chip b{color:#fff}
.dd-chip img{width:18px;height:18px;object-fit:contain}
.dd-mobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.dd-mob{display:flex;align-items:center;gap:7px;min-width:0;padding:4px 7px;font-size:12px;color:#fca5a5;text-decoration:none;border:1px solid rgba(255,255,255,.06);background:rgba(9,12,21,.92);transition:border-color .15s}
.dd-mob:hover{border-color:rgba(248,113,113,.4)}
.dd-mob img{flex-shrink:0;width:26px;height:26px;object-fit:contain}
.dd-mob span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-mob b{flex-shrink:0;font-size:11px;color:#7dd3fc;font-variant-numeric:tabular-nums}
.dd-npc{display:inline-block;flex-shrink:0;width:30px;height:30px;object-fit:contain}
.dd-copy{padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#7dd3fc;white-space:nowrap;background:rgba(9,12,21,.9);border:1px solid rgba(125,211,252,.25);cursor:pointer;transition:color .15s,border-color .15s}
.dd-copy:hover{color:#fff;border-color:rgba(125,211,252,.6)}
.dd-copy.is-done{color:#4ade80;border-color:rgba(74,222,128,.5)}
.dd-panel .dd-tabs{margin:0;box-shadow:none}
.dd-panel .dd-tabbar{border-left:0;border-right:0}
.dd-panel .dd-pane{border:0;background:none}

/* Skill page */
.dd-desc-box{max-height:250px;overflow:auto}
.dd-lvlist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin-top:10px;font-size:12.5px;line-height:1.5}
.dd-lvlist b{color:#7dd3fc;white-space:nowrap;font-variant-numeric:tabular-nums}
.dd-lvlist span{color:rgba(226,232,240,.9)}
.dd-levels{margin-bottom:14px;padding:0}
.dd-levels .dd-h{margin:0;padding:12px 14px 10px}
.dd-lvl td:first-child,.dd-lvl th:first-child{position:sticky;left:0;z-index:2;background:rgba(13,17,29,.99)}
body.rmr-page-skills{--dd-ac:168,85,247;--dd-ac2:56,189,248}
body.rmr-page-maps{--dd-ac:56,189,248;--dd-ac2:74,222,128}
body.rmr-page-skills #skill-img-wrap{width:72px!important;height:72px!important}
body.rmr-page-skills #skill-img-wrap img{width:48px;height:48px;image-rendering:pixelated}
body.rmr-page-skills #hero>.flex{align-items:center;gap:18px}
body.rmr-page-skills #hero h1{margin:0 0 2px;font-size:clamp(28px,3.2vw,40px);line-height:1.1}
body.rmr-page-skills #hero p#ssub,body.rmr-page-maps #hero p#mapsub{margin:0 0 10px}
@media(max-width:700px){.dd-mobs{grid-template-columns:minmax(0,1fr)}}

/* In-game sprite viewer (includes/pages/ingame-sprite.src.js): the entry animated the way the
   client draws it, standing on a map it spawns on. Square edges and an opaque panel, like every
   other card on these pages. Nothing loads until Start is pressed. */
.dd-ingame{margin-bottom:14px}
.ig-card{position:relative;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(17,22,36,.97),rgba(9,12,21,.99));box-shadow:0 16px 36px rgba(0,0,0,.38)}
.ig-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(var(--dd-ac),.75),rgba(var(--dd-ac2),.5),transparent)}
.ig-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px 0}
.ig-title{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,232,240,.78)}
.ig-title::before{content:"";width:3px;height:12px;background:rgb(var(--dd-ac))}
.ig-sub{font-size:12px;color:rgba(148,163,184,.9)}
.ig-stage{position:relative;height:250px;margin:12px 14px 0;border:1px solid rgba(255,255,255,.06);background:#06080e;overflow:hidden;cursor:grab;touch-action:pan-y}
.ig-stage:active{cursor:grabbing}
/* The map it spawns on, pushed back so the sprite stays the subject. */
.ig-bg{position:absolute;inset:-14px;background-position:center;background-size:cover;filter:blur(2px) brightness(.5) saturate(.85);opacity:0;transition:opacity .45s ease}
.ig-stage.has-bg .ig-bg{opacity:1}
/* The real map in 3D behind the sprite; it replaces the flat picture once it is up. */
.ig-3d{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s}
.ig-stage.has-3d .ig-3d{opacity:1}
.ig-stage.has-3d .ig-bg{opacity:0}
.ig-3d canvas,.m3-backdrop{display:block;width:100%;height:100%}
.ig-vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,transparent 18%,rgba(4,6,12,.55) 72%,rgba(4,6,12,.9) 100%)}
.ig-map{position:absolute;left:8px;bottom:8px;display:flex;align-items:baseline;gap:6px;padding:3px 8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:rgba(226,232,240,.92);background:rgba(6,9,16,.82);border:1px solid rgba(255,255,255,.1)}
.ig-map i{font-style:normal;font-size:9.5px;color:rgba(148,163,184,.85)}
.ig-canvas{position:relative;display:block;width:100%;height:100%;image-rendering:pixelated}
/* Before Start */
.ig-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px}
.ig-poster-img{max-width:92px;max-height:92px;image-rendering:pixelated;opacity:.62}
.ig-start{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(var(--dd-ac),.3);border:1px solid rgba(var(--dd-ac),.6);cursor:pointer}
.ig-start:hover{background:rgba(var(--dd-ac),.45)}
.ig-start[disabled]{cursor:default;opacity:.85}
.ig-start-off{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(203,213,225,.8)}
.ig-note{font-size:10.5px;letter-spacing:.03em;color:rgba(148,163,184,.75)}
.ig-spin{width:12px;height:12px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:igsp .6s linear infinite;display:inline-block}
@keyframes igsp{to{transform:rotate(360deg)}}
/* Controls */
.ig-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.ig-btn{min-width:32px;height:28px;padding:0 9px;font-family:inherit;font-size:12px;line-height:1;color:rgba(226,232,240,.92);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer}
.ig-btn:hover{background:rgba(var(--dd-ac),.22);border-color:rgba(var(--dd-ac),.5)}
.ig-seg{display:flex;border:1px solid rgba(255,255,255,.1)}
.ig-seg-btn{height:28px;padding:0 11px;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:rgba(203,213,225,.85);background:rgba(255,255,255,.04);border:0;border-right:1px solid rgba(255,255,255,.08);cursor:pointer}
.ig-seg-btn:last-child{border-right:0}
.ig-seg-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.ig-seg-btn.on{background:rgba(var(--dd-ac),.28);color:#fff}
.ig-turn{display:flex;align-items:center;gap:8px}
.ig-dir{min-width:26px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:rgba(226,232,240,.9);font-variant-numeric:tabular-nums}
@media(max-width:700px){.ig-stage{height:200px}.ig-bar{gap:8px}}
@media(prefers-reduced-motion:reduce){.ig-bg{transition:none}}