/* CS2list.net / server detail layout. */
.detail-page { max-width:1440px; margin:auto; padding:2.6rem 3.5rem 5.5rem; min-height:650px; }
.detail-context { max-width:900px; margin:4.5rem 0 0; padding-top:2rem; border-top:1px solid var(--line); }
.detail-context h2 { max-width:760px; margin:.7rem 0 1.3rem; color:var(--text); font:700 clamp(1.8rem,3.5vw,3.2rem)/.98 var(--mono); letter-spacing:-.07em; }
.detail-context p { max-width:820px; margin:0 0 1.15rem; color:#8fa396; font:15px/1.8 var(--mono); }
.detail-context strong { color:var(--lime); font-weight:700; }
html[data-theme="light"] .detail-context p { color:#405148; }
.detail-breadcrumb { display:flex; align-items:center; gap:.65rem; margin-bottom:2rem; color:#6f7f73; font:12px var(--mono); }
.detail-breadcrumb a { color:var(--lime); text-decoration:none; }.detail-breadcrumb a:hover { text-decoration:underline; }
.detail-breadcrumb strong { color:var(--text); font-weight:400; }
.detail-hero { display:grid; grid-template-columns:minmax(390px,.95fr) minmax(420px,1.05fr); gap:4.5rem; align-items:center; }
.map-visual { position:relative; min-height:440px; overflow:hidden; border:1px solid var(--line-strong); background-image:linear-gradient(135deg,rgba(19,40,31,.84),rgba(13,21,17,.7) 64%),var(--detail-map-image),linear-gradient(135deg,#13281f,#0d1511 64%); background-position:center; background-size:cover; }
.map-visual::before { content:""; position:absolute; inset:0; opacity:.65; background:radial-gradient(circle at 52% 45%,rgba(0,229,160,.16),transparent 33%),linear-gradient(135deg,transparent 25%,rgba(0,229,160,.07) 26%,transparent 27%),linear-gradient(42deg,transparent 45%,rgba(0,229,160,.07) 46%,transparent 47%); }
.map-visual.map-de_dust2 { background:linear-gradient(135deg,#342b17,#121611 68%); }.map-visual.map-de_inferno { background:linear-gradient(135deg,#351d17,#111512 68%); }.map-visual.map-de_nuke { background:linear-gradient(135deg,#152e37,#101617 68%); }.map-visual.map-de_ancient { background:linear-gradient(135deg,#263421,#101612 68%); }
.map-grid { position:absolute; inset:12%; opacity:.28; background-image:linear-gradient(rgba(0,229,160,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,160,.24) 1px,transparent 1px); background-size:48px 48px; transform:rotate(8deg) scale(1.14); }
.map-compass { position:absolute; top:1.4rem; right:1.4rem; display:grid; place-items:center; width:33px; height:33px; color:var(--lime); border:1px solid rgba(0,229,160,.36); font:700 12px var(--mono); }
.map-route { position:absolute; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); transform-origin:left center; opacity:.74; }.route-a { top:45%; left:29%; width:53%; transform:rotate(22deg); }.route-b { top:64%; left:25%; width:58%; transform:rotate(-27deg); opacity:.35; }.map-node { position:absolute; width:8px; height:8px; border:2px solid var(--lime); background:var(--bg); border-radius:50%; box-shadow:0 0 0 5px rgba(0,229,160,.11); }.node-a { top:43%; left:26%; }.node-b { top:63%; left:77%; }.node-c { top:26%; left:71%; background:var(--lime); }.map-caption { position:absolute; right:1.2rem; bottom:1.2rem; left:1.2rem; display:flex; flex-direction:column; gap:.32rem; padding:1rem; border:1px solid rgba(0,229,160,.25); background:rgba(7,16,12,.78); backdrop-filter:blur(12px); }.map-caption span,.map-caption small { color:#789589; font:10px var(--mono); }.map-caption strong { color:#effaf3; font:700 33px var(--mono); letter-spacing:-.08em; }.detail-copy { min-width:0; }.detail-eyebrow { display:flex; align-items:center; gap:.45rem; margin-bottom:1.2rem; color:var(--lime); font:12px var(--mono); }.detail-eyebrow .live-dot { width:5px; height:5px; }.detail-copy h1 { max-width:660px; margin:0; color:var(--text); font:700 clamp(2.7rem,5.5vw,6.1rem)/.88 var(--mono); letter-spacing:-.09em; overflow-wrap:anywhere; }.detail-address { display:flex; align-items:center; gap:.55rem; margin:1.35rem 0 0; color:#8fa396; font:16px var(--mono); }.detail-address button { padding:0; color:var(--lime); border:0; background:transparent; font:18px var(--mono); }.detail-actions { display:flex; gap:.6rem; margin-top:1.55rem; }.detail-join { flex:0 0 auto; min-width:190px; min-height:45px; }.detail-actions .outline-cta { min-height:45px; color:var(--lime); background:transparent; }.detail-state { display:flex; flex-direction:column; gap:.55rem; margin-top:1.35rem; color:#718277; font:11px var(--mono); }.detail-state span { display:flex; align-items:center; gap:.45rem; }.detail-state .live-dot { width:5px; height:5px; }.detail-info-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4.3rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }.detail-stat { min-height:128px; padding:1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.detail-stat > span { display:block; color:#687b6f; font:11px var(--mono); letter-spacing:.05em; }.detail-stat strong { display:block; margin-top:.75rem; color:var(--text); font:700 22px var(--mono); letter-spacing:-.07em; }.detail-stat strong small { color:#738478; font-size:13px; letter-spacing:0; }.detail-stat > small { display:block; margin-top:.4rem; color:#718277; font:11px var(--mono); }.detail-meter { height:5px; margin-top:.9rem; background:rgba(0,229,160,.12); }.detail-meter i { display:block; height:100%; background:var(--lime); }.detail-note { display:flex; gap:1rem; align-items:start; max-width:680px; margin-top:2.2rem; padding:1rem; border:1px solid rgba(0,229,160,.18); background:rgba(0,229,160,.04); }.detail-note > span { color:var(--lime); font:11px var(--mono); white-space:nowrap; }.detail-note p { margin:0; color:#7f9084; font:12px/1.6 var(--mono); }.detail-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:500px; text-align:center; }.detail-empty > span { color:var(--lime); font-size:34px; }.detail-empty h1 { margin:.5rem 0; color:var(--text); font:700 50px var(--mono); }.detail-empty p { color:#809087; font:13px var(--mono); }
html[data-theme="light"] .map-visual { background-image:linear-gradient(135deg,rgba(220,239,231,.78),rgba(239,246,239,.76) 68%),var(--detail-map-image),linear-gradient(135deg,#dcefe7,#eff6ef 68%); }.map-caption { background:rgba(245,253,247,.86); }.map-caption strong { color:#18281e; }.detail-copy h1, .detail-stat strong, .detail-empty h1 { color:var(--text); }
@media (max-width:1100px) { .detail-page { padding-left:2rem; padding-right:2rem; }.detail-hero { gap:2.5rem; }.detail-info-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .detail-page { padding:2rem 1rem 4rem; }.detail-hero { display:flex; flex-direction:column; align-items:stretch; gap:2rem; }.map-visual { min-height:360px; }.detail-copy h1 { font-size:clamp(2.6rem,12vw,4.2rem); }.detail-actions { align-items:stretch; flex-direction:column; }.detail-join,.detail-actions .outline-cta { width:100%; }.detail-info-grid { grid-template-columns:1fr 1fr; margin-top:3rem; }.detail-stat { min-height:115px; padding:.8rem; }.detail-stat strong { font-size:17px; }.detail-stat > span,.detail-stat > small { font-size:10px; }.detail-note { flex-direction:column; gap:.55rem; }.detail-context { margin-top:3.2rem; }.detail-context p { font-size:14px; line-height:1.7; }.detail-breadcrumb { overflow:hidden; white-space:nowrap; }.detail-breadcrumb strong { overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:430px) { .detail-info-grid { grid-template-columns:1fr; }.map-caption strong { font-size:27px; } }