/* ============================================================
   UPDATES HUB  /assets/css/pages/updates.css
   prefix: up-
   ============================================================ */

:root {
    --up-red:      #e05a5a;
    --up-red-dim:  rgba(224,90,90,0.18);
    --up-red-line: rgba(224,90,90,0.25);
    --up-bg:       #0c0c0e;
    --up-card:     #101013;
    --up-card-hov: #161619;
    --up-border:   rgba(255,255,255,0.07);
    --up-text:     #f0ece4;
    --up-text-sub: rgba(240,236,228,0.5);
    --up-text-dim: rgba(240,236,228,0.28);
}

/* ============================================================
   HERO
   ============================================================ */
.up-hero {
    position: relative;
    width: 100%;
    height: 45vh;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #08080a;
}

/* /assets/img/pages/updates/hero-bg.jpg */
.up-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/pages/updates/hero-bg.jpg');
    background-size: cover;
    background-position: 50% 30%;
    background-color: #180c0c;
    opacity: .38;
    z-index: 1;
}

.up-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(224,90,90,.15)  0%,
        rgba(8,8,12,.52)    55%,
        rgba(8,8,12,.90)   100%);
    z-index: 2;
}

.up-hero__text {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}

.up-hero__label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .5em;
    color: var(--up-red);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.up-hero__title {
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .12em;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.up-hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    letter-spacing: .08em;
    margin: 0;
}

.up-hero__scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* ============================================================
   DIVIDER（全幅横線）
   ============================================================ */
.up-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px;
    height: 52px;
    background: var(--up-bg);
    border-top:    1px solid var(--up-border);
    border-bottom: 1px solid var(--up-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}

.up-divider__line {
    flex: 1;
    height: 1px;
    background: var(--up-red-line);
    opacity: .4;
}

.up-divider__label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--up-red);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   PRIMARY SECTION  ─  NEWS | PATCH NOTES (全幅・均等2列)
   ============================================================ */
.up-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: var(--up-bg);
    border-bottom: 1px solid var(--up-border);
    align-items: stretch;
    /* 全幅背景を維持しつつ内側に余白 */
    padding-left:  clamp(80px, 14vw, 240px);
    padding-right: clamp(80px, 14vw, 240px);
    box-sizing: border-box;
}

.up-block {
    display: flex;
    flex-direction: column;
}

.up-block--news {
    border-right: 1px solid var(--up-border);
    border-left:  1px solid var(--up-border);
}

.up-block--patch {
    border-right: 1px solid var(--up-border);
}

/* ────────────────────────────────────────────────────────────
   ブロックヘッダー
   「01  NEWS  ─────────  VIEW ALL →」を中央に収める。
   justify-content: center で 01+NEWS を中央寄せ。
   VIEW ALL は absolute で右端に固定。
   ────────────────────────────────────────────────────────── */
.up-block__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 100px;          /* VIEW ALL(absolute右端)に被らない余白 */
    border-bottom: 1px solid var(--up-border);
    background: rgba(255,255,255,.015);
    flex-shrink: 0;
}

.up-block__num {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--up-text-dim);
}

.up-block__tag {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .35em;
    color: var(--up-red);
    text-transform: uppercase;
    /* flex:1 を削除 → これがあると右に伸びて中央にならない */
}

.up-block__more {
    position: absolute;           /* 右端に固定 */
    right: 24px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--up-text-dim);
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s;
}
.up-block__more:hover { color: var(--up-text); }

/* ============================================================
   NEWS LIST
   背景はブロック全体（up-card）。
   中身に左右パディングを付けてスペースを確保。
   ============================================================ */
.up-newslist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--up-card);
    flex: 1;
    padding: 16px 20px 20px;
}

/* アイテム共通 */
.up-nitem {
    display: block;
    text-decoration: none;
    background: var(--up-card);
    position: relative;
    overflow: hidden;
    transition: background .25s;
}
.up-nitem:hover { background: var(--up-card-hov); }

.up-nitem::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 0;
    background: var(--up-red);
    transition: height .3s;
    z-index: 1;
}
.up-nitem:hover::before { height: 100%; }

/* フィーチャード（1件目・画像あり） */
.up-nitem--feat {
    display: grid;
    grid-template-columns: 150px 1fr;
    margin-bottom: 1px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--up-border);
}

.up-nitem__eye {
    width: 150px;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a1e;
    flex-shrink: 0;
}
.up-nitem__eye img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .88;
    display: block;
    transition: transform .5s, opacity .3s;
}
.up-nitem--feat:hover .up-nitem__eye img { transform: scale(1.06); opacity: 1; }
.up-nitem__eye--ph {
    background: rgba(255,255,255,.05);
    animation: up-pulse 1.6s ease-in-out infinite;
}

.up-nitem__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.up-nitem__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.up-nitem__date {
    font-size: .65rem;
    color: var(--up-text-dim);
    font-weight: 600;
    letter-spacing: .05em;
}

.up-nitem__type {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--up-red);
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--up-red-line);
    background: var(--up-red-dim);
    white-space: nowrap;
}

.up-nitem__title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--up-text);
    line-height: 1.5;
    margin: 0;
}

/* スモール（2〜4件目） */
.up-nitem--sm {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--up-border);
}
.up-nitem--sm:last-child { border-bottom: none; }

.up-nitem--sm .up-nitem__meta {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 76px;
}

.up-nitem--sm .up-nitem__title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--up-text-sub);
    flex: 1;
    margin: 0;
}
.up-nitem--sm:hover .up-nitem__title { color: var(--up-text); }

.up-nitem--ph { pointer-events: none; }

/* ============================================================
   PATCH NOTES LIST
   背景はブロック全体。中身に左右パディング。
   ============================================================ */
.up-patchlist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--up-card);
    flex: 1;
    padding: 16px 20px 20px;
}

.up-pitem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 36px 14px 12px;  /* 右余白は→矢印用 */
    background: rgba(255,255,255,.02);
    border: 1px solid var(--up-border);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .25s;
    margin-bottom: 1px;
}
.up-pitem:last-child { margin-bottom: 0; }
.up-pitem:hover { background: var(--up-card-hov); }

.up-pitem::after {
    content: '→';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--up-text-dim);
    transition: color .2s, right .2s;
}
.up-pitem:hover::after { color: var(--up-red); right: 10px; }

.up-pitem--latest {
    background: rgba(224,90,90,.06);
    border-color: rgba(224,90,90,.2);
    border-left: 2px solid var(--up-red);
}

.up-pitem__new {
    display: inline-block;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--up-red);
    background: rgba(224,90,90,.12);
    padding: 2px 7px;
    align-self: flex-start;
    margin-bottom: 2px;
}

.up-pitem__date {
    font-size: .65rem;
    font-weight: 600;
    color: var(--up-text-dim);
    letter-spacing: .05em;
}

.up-pitem__title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--up-text);
    line-height: 1.45;
}

.up-pitem--ph { pointer-events: none; }

/* ============================================================
   PLACEHOLDER
   ============================================================ */
.up-ph {
    display: inline-block;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    color: transparent !important;
    animation: up-pulse 1.6s ease-in-out infinite;
}
.up-ph--xs { width: 40px;  height: 12px; }
.up-ph--sm { width: 72px;  height: 12px; }
.up-ph--md { width: 130px; height: 13px; }
.up-ph--lg { width: 200px; height: 13px; max-width: 88%; }

@keyframes up-pulse {
    0%,100% { opacity: .32; }
    50%     { opacity: .60; }
}

/* ============================================================
   CHANGES FROM DOA6
   ============================================================ */
.up-changes {
    background: var(--up-bg);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 64px 0;
    border-bottom: 1px solid var(--up-border);
}

.up-changes__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
}

.up-changes__en {
    display: block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--up-red);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.up-changes__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 900;
    color: var(--up-text);
    line-height: 1.35;
    margin: 0 0 16px;
}

.up-changes__desc {
    font-size: .82rem;
    color: var(--up-text-sub);
    line-height: 1.8;
    margin: 0 0 24px;
}

.up-changes__btn {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .25em;
    color: var(--up-text);
    text-decoration: none;
    padding: 10px 28px;
    border: 1px solid var(--up-border);
    transition: background .3s, border-color .3s, color .3s;
}
.up-changes__btn:hover { background: var(--up-red); border-color: var(--up-red); color: #fff; }

.up-changes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--up-border);
}

.up-ccard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 22px 20px;
    background: var(--up-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease, background .25s ease;
}
.up-ccard.is-vis       { opacity: 1; transform: translateY(0); }
.up-ccard:nth-child(2) { transition-delay: .07s; }
.up-ccard:nth-child(3) { transition-delay: .14s; }
.up-ccard:nth-child(4) { transition-delay: .21s; }
.up-ccard:nth-child(5) { transition-delay: .28s; }
.up-ccard:hover        { background: var(--up-card-hov); }

.up-ccard::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--up-red);
    transition: width .35s;
}
.up-ccard:hover::after { width: 100%; }

.up-ccard__icon {
    font-size: 1rem;
    font-weight: 700;
    color: var(--up-red);
    line-height: 1;
}
.up-ccard__label {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .4em;
    color: var(--up-red);
    text-transform: uppercase;
}
.up-ccard__title {
    font-size: .9rem;
    font-weight: 800;
    color: var(--up-text);
    margin: 4px 0 0;
    line-height: 1.3;
}
.up-ccard__desc {
    font-size: .75rem;
    color: var(--up-text-dim);
    line-height: 1.65;
    margin: 0;
}

/* カラーバリアント */
.up-ccard--new .up-ccard__icon,
.up-ccard--new .up-ccard__label     { color: #6ab04c; }
.up-ccard--new::after               { background: #6ab04c; }
.up-ccard--balance .up-ccard__icon,
.up-ccard--balance .up-ccard__label { color: #f0a500; }
.up-ccard--balance::after           { background: #f0a500; }
.up-ccard--system .up-ccard__icon,
.up-ccard--system .up-ccard__label  { color: #4a9eff; }
.up-ccard--system::after            { background: #4a9eff; }
.up-ccard--ui .up-ccard__icon,
.up-ccard--ui .up-ccard__label      { color: #b08cff; }
.up-ccard--ui::after                { background: #b08cff; }

/* ============================================================
   EMPTY
   ============================================================ */
.up-empty {
    font-size: .78rem;
    color: var(--up-text-dim);
    text-align: center;
    padding: 32px 0;
    letter-spacing: .1em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .up-primary {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }
    .up-block--news { border-right: none; border-bottom: 1px solid var(--up-border); }
    .up-changes__wrap { grid-template-columns: 1fr; gap: 36px; }
    .up-divider { padding: 0 20px; }
}

@media (max-width: 768px) {
    .up-hero { height: 40vh; min-height: 280px; }
    .up-nitem--feat { grid-template-columns: 110px 1fr; }
    .up-nitem__eye  { width: 110px; }
    .up-newslist,
    .up-patchlist   { padding: 12px 16px 20px; }
    .up-changes__wrap { padding: 0 20px; }
    .up-changes__grid { grid-template-columns: 1fr 1fr; }
    .up-block__head { padding: 16px 80px; }
}

@media (max-width: 480px) {
    .up-nitem--feat { grid-template-columns: 1fr; }
    .up-nitem__eye  { width: 100%; aspect-ratio: 16/8; }
    .up-changes__grid { grid-template-columns: 1fr; }
}