/* ============================================================
   CSS Variables — Game8-inspired
   White header · Light gray body · Orange accent · Bold typography
   ============================================================ */
:root {
    --g8-orange:      #f5820a;
    --g8-orange-dk:   #d9700a;
    --g8-orange-lt:   #fff4e8;
    --g8-dark:        #1a1a1a;
    --g8-dark2:       #2e2e2e;
    --g8-gray:        #f2f3f5;
    --g8-gray2:       #e8e9ec;
    --g8-surface:     #ffffff;
    --g8-border:      #e2e3e8;
    --g8-text:        #1a1a1a;
    --g8-text2:       #4a4a4a;
    --g8-text3:       #888;
    --g8-radius:      6px;
    --g8-radius-lg:   10px;
    --g8-shadow:      0 1px 4px rgba(0,0,0,0.09);
    --g8-shadow-md:   0 4px 16px rgba(0,0,0,0.13);
    --g8-font:        'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
    --g8-ease:        0.16s ease;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: var(--g8-font);
    background: var(--g8-gray);
    color: var(--g8-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--g8-orange); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ===== Layout ===== */
.gx {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 14px;
}

.clearfix::after { content: ''; display: table; clear: both; }

/* ===== SITE HEADER ===== */
.site-hd {
    background: var(--g8-surface);
    border-bottom: 1px solid var(--g8-border);
    padding: 9px 0;
    box-shadow: var(--g8-shadow);
}

.site-hd-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Brand name */
.hd-brand {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--g8-dark);
    font-style: normal;
    text-decoration: none;
    border: none;
    letter-spacing: -0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.hd-brand:hover { color: var(--g8-orange); }

/* Domain badge */
.hd-domain-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--g8-orange-lt);
    border: 1px solid #fcd9a8;
    border-radius: 18px;
    padding: 3px 12px;
    flex-shrink: 0;
}
.hd-domain-lbl {
    font-size: 0.68rem;
    color: var(--g8-orange-dk);
    white-space: nowrap;
    font-weight: 500;
}
.hd-domain-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--g8-orange);
}

/* ===== CATEGORY NAV ===== */
.cat-nav-wrap {
    background: var(--g8-surface);
    border-bottom: 2px solid var(--g8-border);
}

.cat-nav-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--g8-border);
    min-height: 36px;
}
.cat-nav-row:last-child { border-bottom: none; }

.cat-zone-tag {
    width: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g8-orange);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
    padding: 4px 2px;
    line-height: 1.2;
}

.cat-zone-links {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 3px 6px;
    gap: 2px;
}

.cat-zone-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: var(--g8-radius);
    font-size: 0.83rem;
    color: var(--g8-text2);
    transition: background var(--g8-ease), color var(--g8-ease);
    white-space: nowrap;
    flex: 1;
    text-align: center;
    min-width: 0;
    font-weight: 500;
}
.cat-zone-links a:hover {
    background: var(--g8-orange);
    color: #fff;
}
.cat-zone-links a.active {
    background: var(--g8-orange);
    color: #fff;
    font-weight: 700;
}

/* ===== SEARCH BAR ===== */
.srch-bar {
    background: var(--g8-surface);
    padding: 9px 0;
    border-bottom: 1px solid var(--g8-border);
}

.srch-form {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.srch-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
    border: 1.5px solid var(--g8-border);
    border-radius: 20px;
    font-size: 0.88rem;
    font-family: var(--g8-font);
    color: var(--g8-text);
    background: var(--g8-gray);
    outline: none;
    transition: border-color var(--g8-ease);
}
.srch-form input[type="text"]:focus {
    border-color: var(--g8-orange);
    background: var(--g8-surface);
}

.srch-form button {
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    font-size: 0.82rem;
    font-family: var(--g8-font);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--g8-ease);
    flex-shrink: 0;
    font-weight: 600;
}
.srch-form button:not([value]) {
    background: var(--g8-dark);
    color: #fff;
}
.srch-form button[value="1"] {
    background: var(--g8-orange);
    color: #fff;
}
.srch-form button[value="2"] {
    background: var(--g8-dark2);
    color: #fff;
}
.srch-form button:hover { opacity: 0.82; }

/* ===== HOT TAGS ===== */
.hot-panel {
    background: var(--g8-surface);
    border-radius: var(--g8-radius-lg);
    border: 1px solid var(--g8-border);
    padding: 8px 12px;
    margin: 5px 0;
    box-shadow: var(--g8-shadow);
}
.hot-panel-ttl {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g8-text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hot-panel-ttl::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--g8-orange);
    border-radius: 2px;
}
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
}
.tag-lnk {
    display: inline-block;
    padding: 3px 10px;
    background: var(--g8-gray);
    border: 1px solid var(--g8-border);
    border-radius: 14px;
    font-size: 0.77rem;
    color: var(--g8-text2);
    transition: all var(--g8-ease);
}
.tag-lnk:hover {
    background: var(--g8-orange);
    color: #fff;
    border-color: var(--g8-orange);
}

/* ===== SECTION CARD ===== */
.content-block {
    background: var(--g8-surface);
    border-radius: var(--g8-radius-lg);
    border: 1px solid var(--g8-border);
    box-shadow: var(--g8-shadow);
    margin: 6px 0;
    overflow: hidden;
}

.block-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px 8px;
    border-bottom: 2px solid var(--g8-border);
}

.block-ttl {
    font-size: 0.97rem;
    font-weight: 800;
    color: var(--g8-text);
    padding-left: 10px;
    position: relative;
}
.block-ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1em;
    background: var(--g8-orange);
    border-radius: 2px;
}
.block-ttl a { color: inherit; }
.block-ttl a:hover { color: var(--g8-orange); }

/* ===== FILM GRID ===== */
.film-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    list-style: none;
}

.film-entry {
    display: flex;
    flex-direction: column;
    border-radius: var(--g8-radius);
    overflow: hidden;
    background: var(--g8-gray);
    border: 1px solid var(--g8-border);
    transition: transform var(--g8-ease), box-shadow var(--g8-ease);
}
.film-entry:hover {
    transform: translateY(-2px);
    box-shadow: var(--g8-shadow-md);
}

.film-snap {
    display: block;
    position: relative;
    overflow: hidden;
    background: #ccc;
    aspect-ratio: 600 / 350;
}
.film-snap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.26s ease;
}
.film-entry:hover .film-snap img {
    transform: scale(1.05);
}

.film-caption {
    padding: 5px 7px 6px;
}
.film-caption h5 {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--g8-text);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.film-caption h5 a { color: inherit; }
.film-caption h5 a:hover { color: var(--g8-orange); }

/* ===== DETAIL TITLE BAR ===== */
.detail-title-bar {
    background: var(--g8-dark);
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    border-radius: var(--g8-radius-lg);
    margin: 7px 0;
    font-size: 1rem;
    line-height: 1.75;
    word-break: break-all;
}
.detail-title-bar .cat-ref {
    color: var(--g8-orange);
    font-weight: 700;
    margin-right: 8px;
}
.detail-title-bar .cat-ref:hover { color: #ffa040; }

.detail-info-box {
    background: var(--g8-surface);
    border: 1px solid var(--g8-border);
    border-radius: var(--g8-radius-lg);
    padding: 18px 20px;
    font-size: 0.92rem;
    line-height: 1.95;
    margin: 6px 0;
    box-shadow: var(--g8-shadow);
}

.preview-zone { margin-top: 10px; }
.preview-zone picture,
.preview-zone img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--g8-radius);
}

/* ===== DOWNLOAD BUTTONS ===== */
.dl-btns-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
}
.dl-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: var(--g8-font);
    transition: opacity var(--g8-ease);
    text-decoration: none;
}
.dl-action-btn:hover { opacity: 0.85; }
.dl-btn-dark    { background: var(--g8-dark);   color: #fff; }
.dl-btn-orange  { background: var(--g8-orange);  color: #fff; }
.dl-btn-dark2   { background: var(--g8-dark2);   color: #fff; }
.dl-btn-outline {
    background: transparent;
    color: var(--g8-orange);
    border: 2px solid var(--g8-orange);
}
.dl-btn-outline:hover { background: var(--g8-orange); color: #fff; opacity: 1; }

/* ===== CLIENT DOWNLOAD ===== */
.client-link { text-align: center; padding: 7px 0; }
.client-link a { color: var(--g8-orange); font-size: 0.85rem; font-weight: 600; }
.client-link a:hover { text-decoration: underline; }

/* ===== SHARE STRIP ===== */
.share-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--g8-gray);
    border: 1px solid var(--g8-border);
    border-radius: var(--g8-radius-lg);
    margin: 7px 0;
    flex-wrap: wrap;
}
.share-url-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}
.share-ttl { font-size: 0.74rem; color: var(--g8-text3); white-space: nowrap; flex-shrink: 0; }
.share-url-str {
    font-size: 0.78rem;
    color: var(--g8-text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: var(--g8-orange);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--g8-font);
    transition: background var(--g8-ease);
    flex-shrink: 0;
}
.share-copy-btn:hover { background: var(--g8-orange-dk); }

/* ===== PAGINATION ===== */
.pager-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 13px 0 5px;
}
.pg-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--g8-radius);
    font-size: 0.84rem;
    background: var(--g8-surface);
    border: 1px solid var(--g8-border);
    color: var(--g8-text2);
    font-weight: 600;
    transition: all var(--g8-ease);
}
.pg-item:hover { background: var(--g8-orange); border-color: var(--g8-orange); color: #fff; }
.pg-item-active {
    background: var(--g8-orange);
    border-color: var(--g8-orange);
    color: #fff;
    font-weight: 700;
    pointer-events: none;
}

/* ===== FOOTER LINKS ===== */
.ftr-links-block {
    background: var(--g8-surface);
    border-radius: var(--g8-radius-lg);
    border: 1px solid var(--g8-border);
    margin: 6px 0;
    overflow: hidden;
    box-shadow: var(--g8-shadow);
}
.ftr-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    margin: 0;
}
.ftr-links-list dd { margin: 0; }
.ftr-links-list a {
    display: inline-block;
    padding: 3px 9px;
    font-size: 0.77rem;
    color: var(--g8-text2);
    border-radius: 4px;
    transition: all var(--g8-ease);
}
.ftr-links-list a:hover { background: var(--g8-orange); color: #fff; }

/* ===== SITE FOOTER ===== */
.site-ft {
    background: var(--g8-dark);
    color: rgba(255,255,255,0.45);
    padding: 12px 0;
    margin-top: 8px;
}
.site-ft-copy {
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.75;
}

/* ===== VISIBILITY ===== */
.pc-only     { display: block; }
.mobile-only { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile ≤767px */
@media (max-width: 767px) {
    .pc-only     { display: none !important; }
    .mobile-only { display: block !important; }

    .hd-brand        { font-size: 1.05rem; }
    .hd-domain-val   { font-size: 0.85rem; }
    .hd-domain-lbl   { font-size: 0.62rem; }

    /* Zone nav: 15% label / 85% links, 4 per row */
    .cat-zone-tag {
        width: 15%;
        min-width: 0;
        font-size: 10px;
        letter-spacing: 0;
        padding: 3px 1px;
        line-height: 1.2;
    }
    .cat-zone-links {
        width: 85%;
        flex: none;
        padding: 3px 3px;
        gap: 2px;
    }
    .cat-zone-links a {
        flex: 0 0 calc(25% - 2px);
        font-size: 12px;
        padding: 4px 1px;
        text-align: center;
    }

    /* Search: no wrap */
    .srch-form { flex-wrap: nowrap; gap: 4px; }
    .srch-form input[type="text"] { font-size: 0.78rem; padding: 6px 10px; }
    .srch-form button { font-size: 0.72rem; padding: 6px 6px; flex-shrink: 0; }

    /* Film grid: 2 cols */
    .film-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
        padding: 8px;
    }
    .film-caption h5 { font-size: 0.72rem; }
}

/* Large phones 480-767 */
@media (min-width: 480px) and (max-width: 767px) {
    .cat-zone-links a { font-size: 13px; }
}
@media (max-width: 479px) {
    .cat-zone-links a { font-size: 12px; }
}

/* PC ≥768px */
@media (min-width: 768px) {
    .film-list { grid-template-columns: repeat(4, 1fr); }
    .cat-zone-tag   { width: 70px; font-size: 0.74rem; }
    .cat-zone-links { display: flex; flex-wrap: nowrap; }
    .cat-zone-links a { flex: 1; font-size: 0.86rem; }
}