/**
 * conan-exiles-explorer-guide/explorer.css – banrado.de
 * Conan Exiles Entdecker-Guide. Früher als <style> in conan-exiles-explorer-guide/index.php, ausgelagert 09.10.2026.
 */
/* ── Conan Exiles Explorer – Scoped Styles ── */
.ce-explorer{--ce-bg0:#070b0f;--ce-bg1:#0c1118;--ce-bg2:#121820;--ce-bg3:#1a2030;--ce-border:rgba(255,255,255,0.07);--ce-border2:rgba(255,255,255,0.13);--ce-blue:#3b82f6;--ce-blue-dim:rgba(59,130,246,0.15);--ce-gold:#f59e0b;--ce-gold-dim:rgba(245,158,11,0.15);--ce-red:#c0392b;--ce-red-dim:rgba(192,57,43,0.15);--ce-green:#22c55e;--ce-green-dim:rgba(34,197,94,0.12);--ce-purple:#a78bfa;--ce-purple-dim:rgba(167,139,250,0.15);--ce-orange:#d85a30;--ce-orange-dim:rgba(216,90,48,0.15);--ce-text:rgba(255,255,255,0.75);--ce-text-dim:rgba(255,255,255,0.32);--ce-text-hi:rgba(255,255,255,0.96);--ce-gap:14px;--ce-radius:10px;font-size:14px;line-height:1.5;padding-bottom:40px;}
body.light-theme .ce-explorer{--ce-bg0:#e8edf5;--ce-bg1:#f0f4fb;--ce-bg2:#ffffff;--ce-bg3:#e4eaf4;--ce-border:rgba(0,0,0,0.08);--ce-border2:rgba(0,0,0,0.15);--ce-text:rgba(0,0,0,0.72);--ce-text-dim:rgba(0,0,0,0.38);--ce-text-hi:rgba(0,0,0,0.93);--ce-blue-dim:rgba(59,130,246,0.08);--ce-gold-dim:rgba(245,158,11,0.1);--ce-red-dim:rgba(192,57,43,0.08);--ce-green-dim:rgba(34,197,94,0.08);--ce-purple-dim:rgba(167,139,250,0.08);--ce-orange-dim:rgba(216,90,48,0.08);}
.ce-explorer .ce-page{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}

/* Header */
.ce-explorer .ce-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ce-explorer .ce-header-brand{display:flex;align-items:center;gap:12px;}
.ce-explorer .ce-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#d85a30,#7f77dd);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.ce-explorer .ce-brand-name{font-size:18px;font-weight:700;color:var(--ce-text-hi);letter-spacing:-0.02em;}
.ce-explorer .ce-brand-sub{font-size:11px;color:var(--ce-text-dim);display:block;}
.ce-explorer .ce-header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ce-explorer .ce-badge-pill{display:flex;align-items:center;gap:5px;background:var(--ce-orange-dim);border:0.5px solid rgba(216,90,48,0.3);border-radius:99px;padding:4px 12px;}
.ce-explorer .ce-badge-text{font-size:11px;font-weight:500;color:var(--ce-orange);}

/* Section card */
.ce-explorer .ce-card{background:var(--ce-bg1);border:0.5px solid var(--ce-border);border-radius:var(--ce-radius);overflow:hidden;}
.ce-explorer .ce-card-head{padding:12px 16px;border-bottom:0.5px solid var(--ce-border);display:flex;align-items:center;gap:8px;}
.ce-explorer .ce-card-title{font-size:13px;font-weight:600;color:var(--ce-text-hi);}
.ce-explorer .ce-card-sub{font-size:11px;color:var(--ce-text-dim);margin-left:auto;}
.ce-explorer .ce-card-body{padding:16px;}

/* Map */
.ce-explorer .ce-map-wrap{position:relative;border-radius:8px;overflow:hidden;cursor:crosshair;user-select:none;background:#1a1208;}
.ce-explorer .ce-map-wrap img{width:100%;display:block;}
.ce-explorer .ce-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:transform .15s;z-index:10;}
.ce-explorer .ce-pin:hover{transform:translate(-50%,-100%) scale(1.2);}
.ce-explorer .ce-pin-dot{width:28px;height:28px;border-radius:50% 50% 50% 0;background:var(--ce-purple);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,0.6);}
.ce-explorer .ce-pin-dot span{transform:rotate(45deg);display:block;}
.ce-explorer .ce-pin.active .ce-pin-dot{background:var(--ce-orange);}
.ce-explorer .ce-pin-tooltip{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:var(--ce-bg0);border:0.5px solid var(--ce-border2);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--ce-text-hi);white-space:nowrap;pointer-events:none;display:none;}
.ce-explorer .ce-pin:hover .ce-pin-tooltip{display:block;}

/* Detail */
.ce-explorer .ce-detail-box{display:none;}
.ce-explorer .ce-detail-box.visible{display:block;}
.ce-explorer .ce-detail-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.ce-explorer .ce-detail-num{width:32px;height:32px;border-radius:50%;background:var(--ce-orange-dim);border:1px solid var(--ce-orange);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--ce-orange);flex-shrink:0;}
.ce-explorer .ce-detail-title{font-size:16px;font-weight:600;color:var(--ce-text-hi);margin-bottom:3px;}
.ce-explorer .ce-detail-coord{font-size:11px;color:var(--ce-text-dim);background:var(--ce-bg2);padding:2px 8px;border-radius:99px;border:0.5px solid var(--ce-border);display:inline-block;}
.ce-explorer .ce-detail-why{list-style:none;margin:12px 0;}
.ce-explorer .ce-detail-why li{font-size:13px;color:var(--ce-text);padding:5px 0 5px 18px;position:relative;border-bottom:0.5px solid var(--ce-border);}
.ce-explorer .ce-detail-why li:last-child{border-bottom:none;}
.ce-explorer .ce-detail-why li::before{content:'→';position:absolute;left:0;color:var(--ce-purple);font-size:11px;top:6px;}
.ce-explorer .ce-tip-box{font-size:12px;color:var(--ce-gold);background:var(--ce-gold-dim);border-left:2px solid var(--ce-gold);padding:8px 12px;border-radius:0 6px 6px 0;line-height:1.5;}

/* Location grid */
.ce-explorer .ce-loc-btn{background:var(--ce-bg2);border:0.5px solid var(--ce-border);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s;font-family:inherit;width:100%;}
.ce-explorer .ce-loc-btn:hover{border-color:var(--ce-border2);background:var(--ce-bg3);}
.ce-explorer .ce-loc-btn.active{border-color:var(--ce-purple);background:var(--ce-purple-dim);}
.ce-explorer .ce-loc-btn-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.ce-explorer .ce-loc-btn-num{width:22px;height:22px;border-radius:50%;background:var(--ce-purple-dim);border:0.5px solid var(--ce-purple);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ce-purple);flex-shrink:0;}
.ce-explorer .ce-loc-btn.active .ce-loc-btn-num{background:var(--ce-orange-dim);border-color:var(--ce-orange);color:var(--ce-orange);}
.ce-explorer .ce-loc-btn-name{font-size:12px;font-weight:600;color:var(--ce-text-hi);line-height:1.3;}
.ce-explorer .ce-loc-btn-coord{font-size:10px;color:var(--ce-text-dim);margin-bottom:4px;}
.ce-explorer .ce-loc-btn-preview{font-size:11px;color:var(--ce-text-dim);line-height:1.4;}

/* Action row */
.ce-explorer .ce-action-row{display:flex;gap:8px;flex-wrap:wrap;}
.ce-explorer .ce-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ce-bg2);border:0.5px solid var(--ce-border);border-radius:8px;padding:8px 14px;cursor:pointer;font-size:12px;color:var(--ce-text);font-family:inherit;transition:border-color .15s,background .15s;text-decoration:none;}
.ce-explorer .ce-btn:hover{border-color:var(--ce-border2);background:var(--ce-bg3);}
.ce-explorer .ce-btn-primary{background:var(--ce-purple-dim);border-color:var(--ce-purple);color:var(--ce-purple);}
.ce-explorer .ce-btn-primary:hover{background:rgba(167,139,250,0.25);}

/* SEO block */
.ce-explorer .ce-seo-block{background:var(--ce-bg1);border:0.5px solid var(--ce-border);border-radius:var(--ce-radius);padding:28px 32px;}
.ce-explorer .ce-seo-block h2{font-size:18px;font-weight:700;color:var(--ce-text-hi);margin-bottom:12px;}
.ce-explorer .ce-seo-block h3{font-size:14px;font-weight:600;color:var(--ce-text-hi);margin:16px 0 6px;}
.ce-explorer .ce-seo-block p{font-size:13px;color:var(--ce-text-dim);line-height:1.75;margin-bottom:10px;}
.ce-explorer .ce-seo-block a{color:var(--ce-blue);text-decoration:none;}
.ce-explorer .ce-seo-block a:hover{text-decoration:underline;}
.ce-explorer .ce-seo-block strong{color:var(--ce-text);}

/* Tool footer */
.ce-explorer .ce-tool-foot{font-size:11px;color:var(--ce-text-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.ce-explorer .ce-tool-foot a{color:var(--ce-text-dim);text-decoration:none;}

@media(max-width:700px){
  .ce-explorer .ce-pin-dot{width:22px;height:22px;font-size:9px;}
  .ce-explorer .ce-map-grid{grid-template-columns:1fr !important;}
  .ce-explorer .ce-seo-block{padding:18px 16px;}
}