/* Base Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow-x:hidden; }

/* Theme */
:root {
  --bg: #0b0d12;
  --surface: #141823;
  --surface-2: #0f131d;
  --border: #262b38;
  --text: #e8edf7;
  --muted: #9aa3b2;
  --blue: #1976d2;
  --blue-2: #2b82df;
  --header-h: 60px;
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-2); text-decoration: underline; }

/* Layout */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
.site-header { background: var(--surface); border-bottom:1px solid var(--border); position: sticky; top:0; z-index: 1000; left:0; right:0; }
.header-inner { display:flex; align-items:center; gap:16px; padding:12px 0; }
.logo { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background: var(--surface-2); text-decoration:none; }
.logo-img { width:24px; height:24px; object-fit:contain; display:block; }
.logo-text { font-weight:800; font-size:20px; letter-spacing:0.3px; white-space:nowrap; }
.logo-porn { color:#fff; }
.logo-uma { color:#1976d2; }
.search-wrap { position: relative; flex:1; min-width:0; }
.search-input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background: var(--surface-2); color: var(--text); min-width:0; }
.search-input::placeholder { color: var(--muted); }


.search-suggestions { position:absolute; top:100%; left:0; right:0; background: var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; padding:8px; display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; box-shadow:0 10px 24px rgba(0,0,0,0.35); z-index: 1010; }
.search-suggestions[hidden] { display: none !important; }
.search-suggestions .sugg { position:relative; width:100%; aspect-ratio:1/1; border-radius:6px; overflow:hidden; cursor:pointer; }
.search-suggestions .sugg img { width:100%; height:100%; object-fit:cover; display:block; }
.search-suggestions .sugg .overlay { position:absolute; inset:auto 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color:#fff; font-size:12px; padding:6px 8px; }

.hero { background: var(--surface); border-bottom:1px solid var(--border); }
.hero-inner { padding:20px 0 10px; }
.hero-slider { position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--border); background: var(--surface-2); }
.hero-track { display:flex; transition: transform 0.6s ease; }
.hero-slide { min-width:100%; padding:12px; display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.hero-card { position:relative; width:100%; aspect-ratio: 4/3; border-radius:8px; overflow:hidden; background:#1a1f2b; border:1px solid var(--border); }
.hero-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-nav { position:absolute; inset:0 0 0 0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.hero-btn { pointer-events:auto; background: var(--surface-2); color: var(--text); border:1px solid var(--border); border-radius:20px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin:0 6px; box-shadow:0 4px 10px rgba(0,0,0,0.25); }
.hero-btn:hover { border-color: var(--blue); color:#fff; }

.section { padding:16px 0 24px; }
.section-title { font-size:18px; font-weight:700; margin:8px 0 12px; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.card { position:relative; width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:#1a1f2b; border:1px solid var(--border); }
.card:hover { border-color: var(--blue); }
.card img { width:100%; height:100%; object-fit:cover; display:block; }
.card .pill { position:absolute; left:8px; top:8px; background:rgba(0,0,0,0.55); color:#fff; padding:2px 6px; font-size:12px; border-radius:999px; border:1px solid var(--border); }

/* Content with sidebar */
.content-row { display:grid; grid-template-columns: 1fr 320px; gap:16px; align-items:start; }
.sidebar { position:relative; }
.about-card { position:sticky; top:72px; background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,0.25); z-index: 0; }
.about-title { margin:0 0 8px; font-size:16px; font-weight:700; }
.about-card p { margin:0; color: var(--text); line-height:1.4; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.about-grid { display:grid; grid-template-columns: 1fr; gap:8px; margin-top:10px; }
.about-grid a { display:block; width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:#1a1f2b; }
.about-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.break-img { width:100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius:8px; border:1px solid var(--border); display:block; }

.site-footer { margin-top:auto; background: var(--surface); border-top:1px solid var(--border); }
.site-footer .container { padding:16px 0; }
.site-footer p { margin:0; color: var(--muted); font-size:14px; }

/* Detail */
.detail-wrap { display:grid; grid-template-columns: 1fr; gap:16px; }
.detail-img { width:100%; max-height:80vh; object-fit:contain; background:#000; }
.detail-img-box { position: relative; }
.meta { background: var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { background: rgba(25,118,210,0.15); border:1px solid rgba(25,118,210,0.35); color:#69a7f0; padding:2px 6px; border-radius:999px; font-size:12px; }

.detail-size { position:absolute; right:8px; bottom:8px; background: rgba(0,0,0,0.6); color:#fff; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1; }

/* Responsive */
@media (max-width: 900px) {
  .hero-slide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .search-suggestions { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .site-header { position: fixed; top:0; left:0; right:0; }
  body { padding-top: var(--header-h); }
  .header-inner { gap:8px; padding:10px 0; }
  .logo-text { font-size:18px; }

}
@media (max-width: 460px) {
  .hero-slide { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 360px) {
  .search-suggestions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .content-row { grid-template-columns: 1fr; }
  .about-card { position:relative; top:auto; }
}

/* Blur control removed */

/* Responsive */
@media (max-width: 680px) {
  .site-header { position: fixed; top:0; left:0; right:0; padding-top: env(safe-area-inset-top); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
  .site-header .container { padding: 0 16px; }
  body { padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
  .header-inner { gap:10px; padding:12px 0; align-items: center; }
  .logo-text { font-size:18px; }
  .search-suggestions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 460px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 360px) {
  .search-suggestions { grid-template-columns: repeat(2, 1fr); }
}