/* ArenaCast · Layout
   顶部导航 / 主区段网格 / 页脚 / 移动端菜单 */

/* ============ Topbar 顶部导航 ============ */

.ac-topbar {
    align-items: center;
    backdrop-filter: blur(var(--frost-hard));
    -webkit-backdrop-filter: blur(var(--frost-hard));
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--c-edge-glass);
    box-shadow: 0 3px 18px rgba(91, 33, 182, 0.05);
    display: flex;
    height: var(--topbar-h);
    position: sticky;
    top: 0;
    z-index: var(--layer-top);
}

.ac-topbar__inner {
    align-items: center;
    display: flex;
    gap: var(--gap-md);
    justify-content: space-between;
    width: 100%;
}

/* 品牌区 */

.ac-mark-brand {
    align-items: center;
    display: flex;
    gap: var(--gap-xs);
}

.ac-mark-brand__crest {
    height: 34px;
    width: 34px;
}

.ac-mark-brand__name {
    background: linear-gradient(118deg, var(--c-brand) 0%, var(--c-warm) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--type-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 导航链接组 */

.ac-topbar__rail {
    display: none;
    gap: 4px;
}

@media (min-width: 768px) {
    .ac-topbar__rail {
        align-items: center;
        display: flex;
    }
}

.ac-topbar__item {
    align-items: center;
    border-radius: var(--round-pill);
    color: var(--c-ink-mid);
    display: inline-flex;
    font-size: var(--text-md);
    font-weight: 500;
    gap: 7px;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    transition:
        background var(--ease-mid),
        color var(--ease-mid);
    white-space: nowrap;
}

.ac-topbar__item svg {
    height: 17px;
    transition: transform var(--ease-mid);
    width: 17px;
    z-index: 1;
}

.ac-topbar__item::after {
    background: linear-gradient(90deg, var(--c-brand), var(--c-warm));
    border-radius: 2px;
    bottom: 4px;
    content: '';
    height: 2px;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition:
        opacity var(--ease-mid),
        transform var(--ease-slow),
        width var(--ease-mid);
    width: 22px;
}

.ac-topbar__item:hover {
    background: var(--c-brand-tint);
    color: var(--c-brand-deep);
}

.ac-topbar__item:hover svg {
    transform: scale(1.1) rotate(-3deg);
}

.ac-topbar__item--current {
    background: var(--c-brand-tint);
    color: var(--c-brand-deep);
    font-weight: 600;
}

.ac-topbar__item--current::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    width: 60%;
}

/* 右侧 actions */

.ac-topbar__tools {
    align-items: center;
    display: flex;
    gap: var(--gap-sm);
}

.ac-find {
    position: relative;
}

.ac-find__box {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--c-edge-strong);
    border-radius: var(--round-pill);
    box-shadow: 0 2px 8px rgba(91, 33, 182, 0.06);
    color: var(--c-ink);
    font-size: var(--text-md);
    outline: none;
    padding: 9px 16px 9px 38px;
    transition:
        background var(--ease-quick),
        border-color var(--ease-quick),
        box-shadow var(--ease-quick),
        width var(--ease-mid);
    width: 190px;
}

.ac-find__box::placeholder { color: var(--c-ink-low); }

.ac-find__box:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--c-brand-soft);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
    width: 250px;
}

.ac-find__glass {
    color: var(--c-ink-low);
    height: 16px;
    left: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}

/* 移动端汉堡 */

.ac-burger {
    align-items: center;
    border-radius: var(--round-md);
    color: var(--c-ink);
    display: flex;
    height: 42px;
    justify-content: center;
    transition: background var(--ease-quick);
    width: 42px;
}

.ac-burger:hover { background: rgba(28, 25, 23, 0.05); }

@media (min-width: 768px) {
    .ac-burger { display: none; }
}

/* 移动侧滑面板 */

.ac-drawer {
    backdrop-filter: blur(var(--frost-hard));
    background: rgba(250, 247, 242, 0.96);
    bottom: 0;
    display: none;
    left: 0;
    padding: var(--gap-lg);
    position: fixed;
    right: 0;
    top: var(--topbar-h);
    z-index: var(--layer-shade);
}

.ac-drawer--open { display: block; }

.ac-drawer .ac-topbar__item {
    display: flex;
    font-size: var(--text-lg);
    margin-bottom: 4px;
    padding: 14px var(--gap-md);
}

/* ============ Section 通用 ============ */

.ac-band {
    padding-block: var(--gap-xl);
}

.ac-band__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gap-lg);
}

.ac-band__more {
    align-items: center;
    color: var(--c-brand);
    display: inline-flex;
    font-size: var(--text-md);
    font-weight: 500;
    gap: 4px;
    transition: color var(--ease-quick);
}

.ac-band__more:hover { color: var(--c-brand-deep); }
.ac-band__more svg   { height: 16px; width: 16px; }

/* ============ Spotlight (取代 hero) 主区域网格 ============ */

.ac-spot {
    padding-block: var(--gap-lg) var(--gap-xl);
}

.ac-spot__grid {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .ac-spot__grid {
        grid-template-columns: 1fr var(--rail-w);
    }
}

/* 侧栏（共用） */

.ac-rail {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.ac-rail__block {
    padding: var(--gap-md);
}

.ac-rail__head {
    align-items: center;
    display: flex;
    font-family: var(--type-display);
    font-size: var(--text-lg);
    font-weight: 600;
    gap: 8px;
    letter-spacing: 0.04em;
    margin-bottom: var(--gap-md);
    text-transform: uppercase;
}

.ac-rail__head svg { height: 17px; width: 17px; }

/* 主+侧 两列布局，用在播放页 */

.ac-duo {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .ac-duo {
        grid-template-columns: 1fr var(--rail-w);
    }
}

/* ============ Promo 广告位 ============ */

.ac-promo {
    align-items: center;
    background: rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(8px);
    border: 1px dashed var(--c-edge-strong);
    border-radius: var(--round-md);
    color: var(--c-ink-low);
    display: flex;
    font-size: var(--text-md);
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.ac-promo__tag {
    font-size: 10px;
    letter-spacing: 0.18em;
    opacity: 0.55;
    position: absolute;
    right: 10px;
    text-transform: uppercase;
    top: 6px;
}

.ac-promo--banner { height: 96px; width: 100%; }
.ac-promo--rail   { height: 240px; width: 100%; }
.ac-promo--strip  { height: 64px; margin-block: var(--gap-md); width: 100%; }

/* ============ Footer ============ */

.ac-foot {
    border-top: 1px solid var(--c-edge);
    margin-top: var(--gap-3xl);
    padding-block: var(--gap-xl) var(--gap-lg);
}

.ac-foot__grid {
    display: grid;
    gap: var(--gap-xl);
    grid-template-columns: 1fr;
    margin-bottom: var(--gap-xl);
}

@media (min-width: 640px) {
    .ac-foot__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ac-foot__grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
}

.ac-foot__name {
    background: linear-gradient(118deg, var(--c-brand), var(--c-warm));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--type-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: var(--gap-xs);
    text-transform: uppercase;
}

.ac-foot__blurb {
    color: var(--c-ink-mid);
    font-size: var(--text-md);
    max-width: 340px;
}

.ac-foot__col-head {
    color: var(--c-ink);
    font-family: var(--type-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: var(--gap-sm);
    text-transform: uppercase;
}

.ac-foot__link {
    color: var(--c-ink-mid);
    display: block;
    font-size: var(--text-md);
    padding-block: 4px;
    transition: color var(--ease-quick);
}

.ac-foot__link:hover { color: var(--c-brand); }

.ac-foot__rule {
    align-items: center;
    border-top: 1px solid var(--c-edge);
    color: var(--c-ink-low);
    display: flex;
    flex-direction: column;
    font-size: var(--text-xs);
    gap: var(--gap-xs);
    padding-top: var(--gap-md);
}

@media (min-width: 768px) {
    .ac-foot__rule {
        flex-direction: row;
        justify-content: space-between;
    }
}