/* ComicsPornos — Dark Modern Landing Styles */
:root{
  --bg: #0b0b0f;
  --bg-elev: #121218;
  --card: #151521;
  --accent: #7c5cff;
  --accent-2: #ff4db8;
  --text: #e8e8ef;
  --muted: #a9a9b8;
  --border: #232335;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(255,77,184,.12), transparent 55%),
    var(--bg);
}
body.no-scroll{overflow:hidden}

/* Accessibility helpers */
.visually-hidden{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}

.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
.site-header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; flex-wrap:wrap}
.brand a{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.logo{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:800}
.brand-name{font-weight:700; letter-spacing:.4px}
.primary-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.primary-nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; transition:.2s}
.primary-nav a:hover{color:var(--text); background:rgba(255,255,255,.04)}

/* Header: mobile adjustments */
@media (max-width: 640px){
  .site-header{flex-direction:column; align-items:stretch; gap:12px}
  .brand{width:100%}
  .primary-nav ul{gap:10px; justify-content:space-between}
  .primary-nav li{display:flex; align-items:center}
  .primary-nav select{width:100%; max-width:100%}
}

/* Cards */
.hero{padding:36px 0 10px}
.hero h1{font-size: clamp(28px, 4.2vw, 44px); margin:0 0 10px}
.tagline{color:var(--muted); margin:10px 0 18px}
/* Search form */
.search{position:relative; display:flex; gap:10px; align-items:center; margin:14px 0 10px; padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(20,20,32,.6), rgba(12,12,18,.6)); backdrop-filter: blur(8px) saturate(120%); box-shadow:0 12px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04)}
.search:focus-within{border-color:rgba(124,92,255,.6); box-shadow:0 12px 34px rgba(0,0,0,.38), 0 0 0 3px rgba(124,92,255,.18)}
.search::before{content:""; position:absolute; left:18px; width:18px; height:18px; pointer-events:none; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a9a9b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat}
.search input[type="search"]{flex:1; min-width:0; padding:12px 14px 12px 44px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(18,18,24,.6); color:var(--text); outline:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.search input[type="search"]::placeholder{color:#8f8fa1}
.search input[type="search"]:focus{border-color:rgba(124,92,255,.6); box-shadow:0 0 0 2px rgba(124,92,255,.18), inset 0 0 0 1px rgba(255,255,255,.02)}
.search button{padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); font-weight:800; letter-spacing:.2px; transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
.search button:hover{background:rgba(255,255,255,.06); box-shadow:0 6px 18px rgba(0,0,0,.28)}
.search button:active{transform:translateY(1px)}
@media (max-width:560px){ .search{flex-direction:column} .search button{width:100%} }
.info-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin:14px 0 14px}
@media (max-width: 1000px){ .info-grid{grid-template-columns: repeat(2, 1fr)} }
/* Skeleton */
.skeleton-card{height:100%; min-height:260px; border-radius:16px; background:linear-gradient(90deg, #141421 25%, #1b1b2a 37%, #141421 63%); background-size:400% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position: 200% 0} 100%{background-position: -200% 0}}

/* CTA */
.cta{display:flex; justify-content:center; padding:18px 0 clamp(80px, 12vh, 140px)}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 1000px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr} }

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.card.horizontal{display:flex; gap:0; align-items:center; min-height:80px}
@media (max-width:640px){ .card.horizontal{flex-direction:row} }

.thumb-wrap{display:block; flex:0 0 80px; max-width:80px}
.thumb{display:block; width:80px; height:80px; object-fit:cover; background:#111}

.card-body{padding:8px 12px; display:flex; align-items:center}
.card-title{font-size:15px; line-height:1.35; margin:0}
.card-title a{color:var(--text); text-decoration:none}
.card-title a:hover{color:#fff; text-decoration:underline}

.search{display:flex; gap:10px; align-items:center; margin:10px 0 6px}
.search input[type="search"]{flex:1; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#121218; color:var(--text)}
.search button{padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); font-weight:700}
.search button:hover{background:rgba(255,255,255,.04)}
@media (max-width:560px){ .search{flex-direction:column} .search button{width:100%} }
/* Info cards */
.info-card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px}
.info-title{margin:0 0 6px; font-size:15px}
.info-link{color:#fff; text-decoration:none; font-weight:700}
.info-link:hover{text-decoration:underline}

/* Consent Modal */
.consent-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.8); display:grid; place-items:center; z-index:9999; padding:16px; backdrop-filter:saturate(130%) blur(10px)}
.consent-modal{background:linear-gradient(180deg, rgba(18,18,24,1), rgba(12,12,18,1)); border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); width:min(640px, 100%); transform:translateY(12px) scale(.98); opacity:0; animation:modalIn .28s cubic-bezier(.22,.61,.36,1) forwards}
.consent-modal-body{padding:22px}
.consent-text{color:var(--muted); margin:0 0 14px; line-height:1.5}
.consent-actions{display:flex; justify-content:flex-end; gap:10px}
/* Center actions only for the age-gate modal */
#cp-age .consent-actions{justify-content:center}
@media (max-width:560px){
  .consent-modal-body{padding:16px}
  .consent-actions{justify-content:stretch}
  .consent-actions .btn-primary{width:100%}
}
.btn-ghost{display:inline-block; padding:12px 18px; border-radius:12px; color:var(--text); text-decoration:none; font-weight:700; background:transparent; border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.04)}
@keyframes modalIn{0%{opacity:0; transform:translateY(12px) scale(.98)} 100%{opacity:1; transform:none}}

/* Consent banner bottom-centered */
.consent-banner{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:9998; background:var(--bg-elev); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.45); border-radius:14px; width:min(920px, 94%); opacity:0; animation:bannerIn .24s ease-out .12s forwards}
.consent-inner{display:flex; align-items:center; gap:14px; padding:14px}
@media (max-width:640px){
  .consent-inner{flex-direction:column; align-items:stretch}
  .consent-inner .btn-primary{width:100%}
}
@keyframes bannerIn{from{opacity:0; transform:translate(-50%, 6px)} to{opacity:1; transform:translate(-50%, 0)}}

/* Section head alignment */
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 14px}
.section-head .section-actions{margin-left:auto}
.btn-primary{display:inline-block; padding:14px 22px; border-radius:12px; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.06)}

/* Prevent body scroll when consent modal is open */
.consent-backdrop-open{overflow:hidden}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:clamp(20px, 6vh, 60px); padding:24px 0 46px; color:var(--muted); font-size:14px; background:transparent}