/* ============================================
       CSS Variables - edit here to retheme
    ============================================ */
    :root {
      --bg-primary:    #080808;
      --bg-secondary:  #101010;
      --bg-card:       #141414;
      --bg-hover:      #1c1c1c;
      --accent:        #e50914;
      --accent-hover:  #ff2020;
      --accent-dim:    rgba(229,9,20,0.15);
      --accent-blue:   #1a6be0;
      --text-primary:  #f0f0f0;
      --text-secondary:#999999;
      --text-muted:    #555555;
      --border:        #1e1e1e;
      --border-hover:  #333333;
      --gold:          #f5c518;
      --font-main:     'Noto Sans JP', 'Helvetica Neue', sans-serif;
      --radius-sm:     4px;
      --radius-md:     8px;
      --radius-lg:     12px;
      --sidebar-width: 180px;
      --transition:    0.18s ease;
    }


    /* Hide Elementor page title */
    .entry-title, .page-title,
    h1.entry-title, .elementor-page-title { display: none !important; }

    /* Force full width (override Elementor container) */
    .elementor-widget-container,
    .elementor-section,
    .elementor-container,
    .e-con, .e-con-inner {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* ============================================
       Reset & Base
    ============================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-family: var(--font-main);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

    /* ============================================
       Age Gate - force override WordPress/Elementor styles
    ============================================ */
    #age-gate {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      z-index: 999999 !important;
      background: rgba(0,0,0,0.97) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }
    #age-gate.hidden { display: none !important; }

    .age-gate-box {
      background: #101010 !important;
      border: 1px solid #2a2a2a !important;
      border-radius: 12px !important;
      padding: 36px 28px 30px !important;
      max-width: 380px !important;
      width: 100% !important;
      text-align: center !important;
      box-sizing: border-box !important;
    }
    .age-gate-logo {
      display: flex !important;
      justify-content: center !important;
      margin-bottom: 22px !important;
    }
    .age-gate-logo img {
      height: 34px !important;
      width: auto !important;
      max-width: 160px !important;
    }
    .age-gate-icon {
      font-size: 38px !important;
      margin-bottom: 14px !important;
      display: block !important;
    }
    .age-gate-title {
      font-size: 21px !important;
      font-weight: 700 !important;
      margin-bottom: 12px !important;
      color: #f0f0f0 !important;
    }
    .age-gate-desc {
      font-size: 11px !important;
      color: #999 !important;
      line-height: 1.9 !important;
      margin-bottom: 26px !important;
    }
    .age-gate-desc a { color: #e50914 !important; text-decoration: underline !important; }
    .age-btn-enter {
      display: block !important;
      width: 100% !important;
      background: #e50914 !important;
      color: #fff !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      padding: 15px !important;
      border-radius: 8px !important;
      border: none !important;
      cursor: pointer !important;
      margin-bottom: 10px !important;
      letter-spacing: 0.5px !important;
      box-sizing: border-box !important;
    }
    .age-btn-enter:hover { background: #ff2020 !important; }
    .age-btn-exit {
      display: block !important;
      width: 100% !important;
      background: transparent !important;
      color: #555 !important;
      font-size: 12px !important;
      padding: 10px !important;
      border-radius: 8px !important;
      border: 1px solid #1e1e1e !important;
      cursor: pointer !important;
      box-sizing: border-box !important;
    }
    .age-btn-exit:hover { color: #999 !important; border-color: #444 !important; }
    .age-gate-note {
      font-size: 10px !important;
      color: #555 !important;
      margin-top: 18px !important;
      line-height: 1.7 !important;
    }

    /* ============================================
       Page wrapper
    ============================================ */
    #page-wrapper { width: 100%; }
    #sidebar-nav { display: none; }

    /* ============================================
       Main content
    ============================================ */
    #main-content { background: var(--bg-primary); padding-bottom: 70px; }

    /* Section header */
    .section-header {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 16px 12px 8px;
    }
    .section-title {
      font-size: 14px; font-weight: 700;
      color: var(--text-primary);
      display: flex; align-items: center; gap: 8px;
    }
    .section-title::before {
      content: '';
      display: inline-block;
      width: 3px; height: 16px;
      background: var(--accent);
      border-radius: 2px;
    }
    .section-more {
      font-size: 11px; color: var(--accent);
      padding: 4px 10px;
      border: 1px solid var(--accent-dim);
      border-radius: 20px;
      transition: background var(--transition);
    }
    .section-more:hover { background: var(--accent-dim); }

    /* ============================================
       Safety Guide CTA
    ============================================ */
    #cta-safety {
      margin: 10px 12px;
      background: linear-gradient(135deg, #1a0500 0%, #0d0000 100%);
      border: 1px solid rgba(229,9,20,0.4);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 10px;
    }
    #cta-safety .cta-text { font-size: 10px; color: var(--text-primary); line-height: 1.6; }
    #cta-safety .cta-text strong {
      color: var(--accent); font-size: 11px; display: block;
      margin-bottom: 1px; white-space: nowrap;
    }
    #cta-safety .cta-btn {
      background: var(--accent); color: #fff;
      font-size: 10px; font-weight: 700;
      padding: 8px 14px; border-radius: 20px;
      white-space: nowrap; flex-shrink: 0;
      transition: background var(--transition), transform var(--transition);
    }
    #cta-safety .cta-btn:hover { background: var(--accent-hover); transform: scale(1.03); }

    /* ============================================
       FEATURED - compact wide banner (mobile)
    ============================================ */
    #featured-section { margin-bottom: 6px; }

    .hero-card {
      margin: 0 12px 10px;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg-card);
      transition: border-color var(--transition);
    }
    .hero-card:hover { border-color: var(--border-hover); }

    .hero-thumb {
      position: relative; width: 100%;
      aspect-ratio: 16 / 9; overflow: hidden;
      background: #0d0d1a;
    }
    .hero-thumb img { transition: transform 0.4s ease; }
    .hero-thumb:hover img { transform: scale(1.04); }

    .play-btn {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(229,9,20,0.9);
      display: flex; align-items: center; justify-content: center;
      z-index: 2; transition: background var(--transition), transform var(--transition);
      box-shadow: 0 0 20px rgba(229,9,20,0.4);
    }
    .play-btn:hover { background: var(--accent-hover); transform: translate(-50%, -50%) scale(1.12); }
    .play-btn svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }

    .badge {
      position: absolute; font-size: 9px; font-weight: 700;
      padding: 2px 6px; border-radius: 3px; z-index: 2; letter-spacing: 0.5px;
    }
    .badge-new  { top: 8px; right: 8px; background: var(--accent); color: #fff; }
    .badge-4k   { top: 8px; left: 8px;  background: var(--accent-blue); color: #fff; }
    .badge-dur  { bottom: 8px; right: 8px; background: rgba(0,0,0,0.85); color: #eee; font-size: 10px; }
    .badge-hot  { top: 8px; right: 8px; background: #ff6b00; color: #fff; }

    .hero-body { padding: 10px 12px 0; display: flex; gap: 10px; align-items: flex-start; }
    .hero-right { display: flex; flex-direction: column; min-width: 0; }
    .hero-cat-icon {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--accent); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; font-size: 14px;
    }
    .hero-info { flex: 1; min-width: 0; }
    .hero-title {
      font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 6px;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cat-tag {
      background: var(--bg-hover); color: var(--text-secondary);
      font-size: 9px; padding: 2px 8px; border-radius: 20px;
      border: 1px solid var(--border);
      transition: border-color var(--transition), color var(--transition);
      cursor: pointer;
    }
    .cat-tag:hover { border-color: var(--accent); color: var(--accent); }
    .rating { color: var(--gold); font-size: 11px; }
    .views  { color: var(--text-muted); font-size: 10px; }

    .card-actions { display: flex; border-top: 1px solid var(--border); margin-top: 10px; }
    .action-btn {
      flex: 1; padding: 9px 0;
      display: flex; align-items: center; justify-content: center; gap: 4px;
      color: var(--text-muted); font-size: 10px;
      border-right: 1px solid var(--border);
      transition: color var(--transition), background var(--transition);
    }
    .action-btn:last-child { border-right: none; }
    .action-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
    .action-btn.primary { color: var(--accent); }
    .action-btn.primary:hover { color: var(--accent-hover); }

    /* ============================================
       POPULAR CONTENT
    ============================================ */
    #popular-section { margin-bottom: 6px; }

    .grid-2col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px; padding: 0 12px 8px;
    }

    .grid-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: border-color var(--transition), transform var(--transition);
    }
    .grid-thumb-link { display: block; }
    .grid-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

    .grid-thumb {
      position: relative;
      aspect-ratio: 16 / 9; overflow: hidden;
      background: #1a1a2e;
    }
    .grid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
    .grid-card:hover .grid-thumb img { transform: scale(1.06); }

    .grid-play {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(229,9,20,0.88);
      display: flex; align-items: center; justify-content: center; z-index: 2;
      opacity: 0; transition: opacity var(--transition), transform var(--transition);
    }
    .grid-card:hover .grid-play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    .grid-play svg { width: 11px; height: 11px; fill: #fff; margin-left: 2px; }

    .grid-overlay {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 20px 8px 6px;
      background: linear-gradient(transparent, rgba(0,0,0,0.95)); z-index: 2;
    }
    .grid-title {
      color: #fff; font-size: 10px; font-weight: 600; line-height: 1.35;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .grid-meta {
      color: var(--text-secondary); font-size: 9px;
      display: flex; justify-content: space-between; margin-top: 3px;
      align-items: center;
    }
    .grid-meta .gold { color: var(--gold); }

    .grid-info {
      padding: 7px 9px 8px;
      border-top: 1px solid var(--border);
    }
    .grid-info-title {
      font-size: 11px; font-weight: 600; color: var(--text-primary);
      line-height: 1.35; margin-bottom: 4px;
      display: -webkit-box; -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .grid-info-meta {
      display: flex; align-items: center; gap: 6px;
      font-size: 9px; color: var(--text-muted);
    }
    .grid-info-meta .cat-pill {
      background: var(--accent-dim); color: var(--accent);
      padding: 1px 6px; border-radius: 20px; font-size: 9px;
    }

    /* ============================================
       WEEKLY RANKING
    ============================================ */
    #ranking-section { margin-bottom: 6px; }

    .rank-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 0 12px 10px;
    }

    .rank-item {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: border-color var(--transition), transform var(--transition);
      text-decoration: none; color: inherit;
    }
    .rank-item:hover { border-color: var(--border-hover); transform: translateY(-2px); }

    .rank-thumb-sm {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #1a1a2e;
    }
    .rank-thumb-sm img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
    .rank-item:hover .rank-thumb-sm img { transform: scale(1.06); }

    .rank-num-badge {
      position: absolute;
      top: 6px; left: 8px;
      font-size: 28px; font-weight: 800;
      line-height: 1; z-index: 2;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    }
    .rank-num-badge.top1 { color: #f5c518; }
    .rank-num-badge.top2 { color: #cccccc; }
    .rank-num-badge.top3 { color: #cd7f32; }

    .mini-play {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.3);
      opacity: 0; transition: opacity var(--transition);
      z-index: 2;
    }
    .rank-item:hover .mini-play { opacity: 1; }
    .mini-play svg { width: 28px; height: 28px; fill: #fff; filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }

    .rank-dur {
      position: absolute;
      bottom: 6px; right: 6px;
      font-size: 9px; font-weight: 600;
      background: rgba(0,0,0,0.82); color: #eee;
      padding: 2px 5px; border-radius: 3px; z-index: 2;
    }

    .rank-info-text {
      padding: 7px 9px 8px;
      border-top: 1px solid var(--border);
    }
    .rank-title {
      font-size: 11px; font-weight: 600; color: var(--text-primary);
      line-height: 1.35; margin-bottom: 4px;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .rank-meta {
      display: flex; align-items: center; gap: 6px;
      font-size: 9px; color: var(--text-muted);
    }
    .rank-meta .gold { color: var(--gold); }
    .rank-meta .cat-pill {
      background: var(--accent-dim); color: var(--accent);
      padding: 1px 6px; border-radius: 20px;
    }

    /* ============================================
       Bottom Navigation (mobile)
    ============================================ */
    #bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--bg-secondary); border-top: 1px solid var(--border);
      display: flex; justify-content: space-around;
      padding: 8px 0 max(10px, env(safe-area-inset-bottom)); z-index: 100;
    }
    .nav-item {
      display: flex; flex-direction: column; align-items: center;
      gap: 3px; color: var(--text-muted); font-size: 9px;
      cursor: pointer; transition: color var(--transition); padding: 0 12px;
    }
    .nav-item:hover { color: var(--text-secondary); }
    .nav-item.active { color: var(--accent); }
    .nav-item svg { width: 20px; height: 20px; }

    /* ============================================
       Footer
    ============================================ */
    #site-footer {
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      padding: 32px 16px 20px;
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .footer-brand {}
    .footer-logo img { height: 28px; width: auto; margin-bottom: 10px; }
    .footer-desc {
      font-size: 11px; color: var(--text-muted);
      line-height: 1.8; max-width: 280px;
    }

    .footer-cols {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .footer-col-title {
      font-size: 11px; font-weight: 700;
      color: var(--text-secondary);
      letter-spacing: 1px; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .footer-col-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
    .footer-col-list a {
      font-size: 12px; color: var(--text-muted);
      transition: color var(--transition);
    }
    .footer-col-list a:hover { color: var(--text-primary); }

    .footer-sns {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .sns-btn {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--text-muted);
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }
    .sns-btn:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-tertiary); }
    .sns-btn svg { width: 16px; height: 16px; }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    .footer-copyright { font-size: 10px; color: var(--text-muted); }
    .footer-legal {
      display: flex; gap: 14px; flex-wrap: wrap;
    }
    .footer-legal a {
      font-size: 10px; color: var(--text-muted);
      transition: color var(--transition);
    }
    .footer-legal a:hover { color: var(--text-secondary); }

    .footer-disclaimer {
      font-size: 10px; color: var(--text-muted);
      line-height: 1.7;
      padding: 10px 12px;
      background: #0d0d0d;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      margin-top: 4px;
    }

    .thumb-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 6px;
    }
    .thumb-placeholder span { color: #2a2a2a; font-size: 9px; }

    /* Loading / empty state */
    .cll-loading {
      color: var(--text-muted); font-size: 12px;
      padding: 20px; text-align: center; grid-column: 1 / -1;
    }
    .cll-empty {
      color: var(--text-muted); font-size: 12px;
      padding: 20px 12px; text-align: center; grid-column: 1 / -1;
    }

    @media (min-width: 768px) {
      #site-footer { padding: 40px 40px 24px; }
      .footer-inner { flex-direction: row; gap: 40px; align-items: flex-start; }
      .footer-brand { flex-shrink: 0; width: 220px; }
      .footer-cols {
        flex: 1;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }
      .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
    }

    @media (min-width: 480px) {
      #cta-safety  { margin: 12px 16px; }
      .hero-card   { margin: 0 16px 12px; }
      .grid-2col   { padding: 0 16px 10px; gap: 8px; }
      .rank-list   { padding: 0 16px 12px; }
    }

    @media (min-width: 768px) {
      #page-wrapper { display: flex; max-width: 100%; margin: 0 auto; min-height: calc(100vh - 94px); }
      #sidebar-nav {
        display: flex; flex-direction: column;
        width: var(--sidebar-width); flex-shrink: 0;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border);
        padding: 16px 0;
        position: sticky;
        top: 94px;
        height: calc(100vh - 94px);
        overflow-y: auto;
      }
      #main-content { flex: 1; min-width: 0; padding-bottom: 40px; }
      .sidebar-nav-item {
        display: flex; align-items: center; gap: 10px;
        color: var(--text-muted); font-size: 12px;
        padding: 9px 16px; cursor: pointer;
        transition: color var(--transition), background var(--transition);
        border-left: 3px solid transparent;
      }
      .sidebar-nav-item:hover { color: var(--text-primary); background: var(--bg-hover); }
      .sidebar-nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
      .sidebar-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
      .sidebar-divider { height: 1px; background: var(--border); margin: 10px 16px; }
      .sidebar-label { font-size: 9px; color: var(--text-muted); padding: 6px 16px 2px; letter-spacing: 1.5px; text-transform: uppercase; }
      #bottom-nav { display: none; }
      #main-content { flex: 1; min-width: 0; padding-bottom: 40px; }
      .section-header { padding: 18px 20px 10px; }
      .section-title { font-size: 15px; }
      #cta-safety { margin: 14px 20px; padding: 12px 20px; }
      #cta-safety .cta-text { font-size: 12px; }
      #cta-safety .cta-text strong { font-size: 13px; }
      #cta-safety .cta-btn { font-size: 12px; padding: 9px 18px; }
      .hero-card {
        margin: 0 20px 16px;
        display: grid;
        grid-template-columns: 60% 40%;
        height: 240px;
        border-radius: var(--radius-lg);
      }
      .hero-thumb { width: 100%; flex-shrink: unset; aspect-ratio: unset; height: 100%; border-radius: 0; }
      .hero-right {
        flex: unset; max-width: unset; width: 100%;
        display: flex; flex-direction: column; justify-content: space-between;
        background: linear-gradient(135deg, #141414 0%, #0e0e0e 100%);
        border-left: 1px solid var(--border);
      }
      .hero-body { padding: 20px 20px 12px; gap: 14px; flex: 1; align-items: flex-start; }
      .hero-cat-icon { width: 38px; height: 38px; font-size: 17px; flex-shrink: 0; align-self: flex-start; }
      .hero-title { font-size: 17px; font-weight: 700; -webkit-line-clamp: 3; line-height: 1.5; margin-bottom: 10px; }
      .cat-tag { font-size: 11px; }
      .rating { font-size: 13px; }
      .views { font-size: 12px; }
      .card-actions { margin-top: 0; border-top: 1px solid var(--border); }
      .action-btn { font-size: 12px; padding: 14px 0; }
      .grid-2col { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0 20px 12px; }
      .grid-card:hover { transform: translateY(-4px); }
      .grid-title { font-size: 11px; }
      .grid-meta { font-size: 9px; }
      .grid-info { padding: 8px 10px 9px; }
      .grid-info-title { font-size: 11px; }
      .grid-play { opacity: 0.7; }
      .grid-card:hover .grid-play { opacity: 1; }
      .rank-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0 20px 14px; }
      .rank-num-badge { font-size: 32px; }
      .rank-title { font-size: 11px; }
      .rank-meta { font-size: 10px; }
    }