/*
 * ============================================================
 * NovelGame Collection
 * Reaction Stream
 *
 * prefix : ngcr-
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * 共通
 * ------------------------------------------------------------
 */

#ngcReactionStream,
#ngcReactionModal {

    --ngcr-accent: #ef7654;
    --ngcr-accent-dark: #df6242;
    --ngcr-accent-soft: #fff3ee;

    --ngcr-text: #444;
    --ngcr-text-light: #8a8a8a;

    --ngcr-border: #e8e5e2;
    --ngcr-bg: #fff;
    --ngcr-bg-soft: #faf8f6;

    font-family: inherit;
}


#ngcReactionStream *,
#ngcReactionModal * {
    box-sizing: border-box;
}


/*
 * ============================================================
 * メインエリア
 * ============================================================
 */

#ngcReactionStream {

    position: relative;

    width: 100%;

    margin: 32px 0;

    overflow: hidden;

    border: 1px solid var(--ngcr-border);
    border-radius: 10px;

    background: var(--ngcr-bg);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .04);
}


#ngcReactionStream::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--ngcr-accent),
            #f6a85d
        );
}


/*
 * ============================================================
 * ヘッダー
 * ============================================================
 */

#ngcReactionStream .ngcr-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        24px
        26px
        17px;
}


#ngcReactionStream .ngcr-header-main {

    display: flex;
    align-items: center;

    min-width: 0;

    gap: 12px;
}


#ngcReactionStream .ngcr-title-icon {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--ngcr-accent-soft);

    color:
        var(--ngcr-accent);

    font-size: 18px;
}


#ngcReactionStream .ngcr-title {

    margin: 0;
    padding: 0;

    border: 0;

    color:
        var(--ngcr-text);

    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}


#ngcReactionStream .ngcr-description {

    margin:
        3px
        0
        0;

    padding: 0;

    color:
        var(--ngcr-text-light);

    font-size: 11px;
    line-height: 1.5;
}


#ngcReactionStream .ngcr-count {

    display: flex;
    align-items: baseline;

    flex-shrink: 0;

    gap: 4px;

    color: #aaa;

    font-size: 10px;
}


#ngcReactionStream .ngcr-count strong {

    color:
        var(--ngcr-accent);

    font-size: 20px;
    font-weight: 700;
}


/*
 * ============================================================
 * 横スクロール
 * ============================================================
 */

#ngcReactionStream .ngcr-flow {

    position: relative;

    overflow: hidden;

    padding:
        12px
        0
        20px;

    background:
        linear-gradient(
            180deg,
            #fff,
            var(--ngcr-bg-soft)
        );
}


#ngcReactionStream .ngcr-flow::before,
#ngcReactionStream .ngcr-flow::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 5;

    width: 42px;

    pointer-events: none;
}


#ngcReactionStream .ngcr-flow::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            #fbf9f7,
            rgba(251,249,247,0)
        );
}


#ngcReactionStream .ngcr-flow::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            #fbf9f7,
            rgba(251,249,247,0)
        );
}


#ngcReactionStream .ngcr-track {

    display: flex;

    width: max-content;

    gap: 14px;

    padding-left: 14px;

    will-change: transform;
}


#ngcReactionStream .ngcr-group {

    display: flex;

    gap: 14px;
}


/*
 * ============================================================
 * カード
 * ============================================================
 */

#ngcReactionStream .ngcr-card {

    display: flex;
    align-items: center;

    width: 305px;
    height: 94px;

    flex-shrink: 0;

    padding: 8px;

    overflow: hidden;

    border:
        1px solid
        #e9e5e1;

    border-radius: 8px;

    background: #fff;

    color:
        var(--ngcr-text);

    text-align: left;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .04);

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


#ngcReactionStream .ngcr-card:hover,
#ngcReactionStream .ngcr-card:focus-visible {

    z-index: 2;

    outline: none;

    border-color:
        var(--ngcr-accent);

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .09);

    transform:
        translateY(-3px);
}


/*
 * ============================================================
 * サムネイル
 * ============================================================
 */

#ngcReactionStream .ngcr-thumb {

    position: relative;

    width: 108px;
    height: 72px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 6px;

    background: #ddd;
}


#ngcReactionStream .ngcr-thumb-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease,
        filter .3s ease;
}


#ngcReactionStream
.ngcr-card:hover
.ngcr-thumb-image {

    transform:
        scale(1.04);
}


/*
 * 絵文字
 */

#ngcReactionStream .ngcr-emoji {

    position: absolute;

    left: 5px;
    bottom: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border:
        2px solid #fff;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, .18);

    font-size: 16px;
}


/*
 * ============================================================
 * カード本文
 * ============================================================
 */

#ngcReactionStream .ngcr-card-body {

    min-width: 0;
    flex: 1;

    padding:
        2px
        5px
        0
        11px;
}


#ngcReactionStream .ngcr-comment {

    display: -webkit-box;

    height: 38px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color:
        var(--ngcr-text);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/*
 * ネタバレ時も高さを合わせる
 */

#ngcReactionStream .ngcr-spoiler-area {

    display: flex;
    align-items: center;

    height: 38px;
}


#ngcReactionStream .ngcr-spoiler-badge {

    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding:
        4px
        8px;

    border-radius: 20px;

    background:
        #f2f0ee;

    color: #777;

    font-size: 10px;
    font-weight: 600;
}


/*
 * ============================================================
 * カード下部
 * ============================================================
 */

#ngcReactionStream .ngcr-card-footer {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 5px;

    margin-top: 5px;
}


#ngcReactionStream .ngcr-meta {

    min-width: 0;

    overflow: hidden;

    color: #aaa;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/*
 * ============================================================
 * ネタバレ画像
 * ============================================================
 */

#ngcReactionStream
.ngcr-card.is-spoiler
.ngcr-thumb-image {

    filter:
        blur(7px)
        brightness(.72);

    transform:
        scale(1.13);
}


/*
 * ============================================================
 * いいね
 * ============================================================
 */

#ngcReactionStream .ngcr-like-button,
#ngcReactionModal .ngcr-like-button {

    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    flex-shrink: 0;

    margin: 0;

    border:
        1px solid
        #e5e1de;

    border-radius: 20px;

    background: #fff;

    color: #999;

    font-family: inherit;
    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


#ngcReactionStream .ngcr-like-button {

    min-width: 42px;

    padding:
        4px
        7px;

    font-size: 10px;
}


#ngcReactionStream .ngcr-like-button:hover,
#ngcReactionModal .ngcr-like-button:hover {

    color:
        var(--ngcr-accent);

    border-color:
        var(--ngcr-accent);

    background:
        var(--ngcr-accent-soft);
}


#ngcReactionStream .ngcr-like-icon,
#ngcReactionModal .ngcr-like-icon {

    display: inline-block;

    color: #bbb;

    font-size: 13px;

    transform-origin: center;

    transition:
        color .2s ease;
}


#ngcReactionStream
.ngcr-like-button:hover
.ngcr-like-icon,
#ngcReactionModal
.ngcr-like-button:hover
.ngcr-like-icon {

    color:
        var(--ngcr-accent);
}


#ngcReactionStream .ngcr-like-count,
#ngcReactionModal .ngcr-like-count {

    font-weight: 700;
}


/*
 * 一覧では「いいね」の文字は表示しない
 */

#ngcReactionStream .ngcr-like-label {

    display: none;
}


/*
 * ------------------------------------------------------------
 * いいね済み
 * ------------------------------------------------------------
 */

#ngcReactionStream .ngcr-like-button.is-liked,
#ngcReactionModal .ngcr-like-button.is-liked {

    color:
        var(--ngcr-accent);

    border-color:
        #f4c1b3;

    background:
        var(--ngcr-accent-soft);

    cursor: default;
}


#ngcReactionStream
.ngcr-like-button.is-liked
.ngcr-like-icon,
#ngcReactionModal
.ngcr-like-button.is-liked
.ngcr-like-icon {

    color:
        var(--ngcr-accent);
}


#ngcReactionStream .ngcr-like-button:disabled,
#ngcReactionModal .ngcr-like-button:disabled {

    opacity: 1;
}


/*
 * ------------------------------------------------------------
 * いいねアニメーション
 * ------------------------------------------------------------
 */

#ngcReactionStream
.ngcr-like-button.ngcr-like-pop,
#ngcReactionModal
.ngcr-like-button.ngcr-like-pop {

    animation:
        ngcrLikeButtonPop
        .42s
        cubic-bezier(.34, 1.56, .64, 1);
}


#ngcReactionStream
.ngcr-like-button.ngcr-like-pop
.ngcr-like-icon,
#ngcReactionModal
.ngcr-like-button.ngcr-like-pop
.ngcr-like-icon {

    animation:
        ngcrLikeHeartPop
        .5s ease;
}


@keyframes ngcrLikeButtonPop {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.22);
    }

    65% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1);
    }

}


@keyframes ngcrLikeHeartPop {

    0% {

        transform:
            scale(1);
    }

    35% {

        transform:
            scale(1.7)
            rotate(-10deg);
    }

    60% {

        transform:
            scale(.9)
            rotate(5deg);
    }

    100% {

        transform:
            scale(1)
            rotate(0);
    }

}


/*
 * ============================================================
 * フッター
 * ============================================================
 */

#ngcReactionStream .ngcr-footer {

    padding:
        11px
        24px
        13px;

    border-top:
        1px solid
        #eeeae7;

    color: #999;

    font-size: 10px;
    line-height: 1.6;

    text-align: right;
}


#ngcReactionStream .ngcr-footer-icon {

    margin-right: 3px;
}


/*
 * ============================================================
 * モーダル
 * ============================================================
 */

#ngcReactionModal {

    position: fixed;

    inset: 0;

    z-index: 100000;

    margin: 0;
    padding: 0;
}


#ngcReactionModal[hidden] {

    display: none !important;
}


#ngcReactionModal .ngcr-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(20,18,17,.78);

    backdrop-filter:
        blur(3px);
}


#ngcReactionModal .ngcr-modal-window {

    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            820px,
            calc(100% - 34px)
        );

    max-height:
        calc(100vh - 40px);

    overflow: auto;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.35);

    transform:
        translate(-50%, -50%);
}


/*
 * 閉じる
 */

#ngcReactionModal .ngcr-modal-close {

    appearance: none;

    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(0,0,0,.62);

    color: #fff;

    font-size: 22px;

    cursor: pointer;
}


/*
 * ============================================================
 * モーダル画像
 * ============================================================
 */

#ngcReactionModal .ngcr-modal-capture {

    position: relative;

    width: 100%;

    overflow: hidden;

    aspect-ratio:
        16 / 9;

    background: #111;
}


#ngcReactionModal .ngcr-modal-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        filter .35s ease,
        transform .35s ease;
}


/*
 * ============================================================
 * モーダル本文
 * ============================================================
 */

#ngcReactionModal .ngcr-modal-body {

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding:
        22px
        26px
        25px;
}


#ngcReactionModal .ngcr-modal-emoji {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--ngcr-accent-soft);

    font-size: 27px;
}


#ngcReactionModal .ngcr-modal-content {

    min-width: 0;

    flex: 1;
}


#ngcReactionModal .ngcr-modal-label {

    margin-bottom: 4px;

    color:
        var(--ngcr-accent);

    font-size: 10px;
    font-weight: 700;
}


#ngcReactionModal .ngcr-modal-comment {

    margin: 0;
    padding: 0;

    color:
        var(--ngcr-text);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.75;
}


#ngcReactionModal .ngcr-modal-bottom {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 15px;
}


#ngcReactionModal .ngcr-modal-time {

    color: #aaa;

    font-size: 10px;
}


/*
 * モーダルいいね
 */

#ngcReactionModal .ngcr-modal-like {

    padding:
        8px
        14px;

    font-size: 12px;
}


/*
 * ============================================================
 * モーダルネタバレ
 * ============================================================
 */

#ngcReactionModal
.ngcr-modal-spoiler {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    padding: 30px;

    background:
        rgba(25,23,22,.3);

    color: #fff;

    text-align: center;
}


#ngcReactionModal.is-spoiler
.ngcr-modal-spoiler {

    display: flex;
}


#ngcReactionModal.is-spoiler
.ngcr-modal-image {

    filter:
        blur(18px)
        brightness(.52);

    transform:
        scale(1.08);
}


#ngcReactionModal
.ngcr-modal-spoiler-icon {

    margin-bottom: 7px;

    font-size: 31px;
}


#ngcReactionModal
.ngcr-modal-spoiler-title {

    font-size: 16px;
    font-weight: 700;
}


#ngcReactionModal
.ngcr-modal-spoiler-text {

    margin-top: 4px;

    color:
        rgba(255,255,255,.75);

    font-size: 11px;
}


#ngcReactionModal
.ngcr-btn-show-spoiler {

    appearance: none;

    margin-top: 15px;

    padding:
        9px
        18px;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 5px;

    background:
        rgba(0,0,0,.35);

    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


#ngcReactionModal
.ngcr-btn-show-spoiler:hover {

    background:
        var(--ngcr-accent);

    border-color:
        var(--ngcr-accent);
}


/*
 * ============================================================
 * スマートフォン
 * ============================================================
 */

@media screen and (max-width: 600px) {

    #ngcReactionStream {

        margin:
            22px
            0;

        border-radius: 7px;
    }


    #ngcReactionStream .ngcr-header {

        padding:
            19px
            17px
            12px;
    }


    #ngcReactionStream .ngcr-title-icon {

        width: 34px;
        height: 34px;

        font-size: 16px;
    }


    #ngcReactionStream .ngcr-title {

        font-size: 16px;
    }


    #ngcReactionStream .ngcr-description {

        font-size: 10px;
    }


    #ngcReactionStream .ngcr-count {

        display: none;
    }


    #ngcReactionStream .ngcr-card {

        width: 280px;
        height: 90px;
    }


    #ngcReactionStream .ngcr-thumb {

        width: 98px;
        height: 68px;
    }


    #ngcReactionStream .ngcr-comment {

        font-size: 11px;
    }


    #ngcReactionStream .ngcr-footer {

        padding:
            9px
            15px
            11px;

        text-align: left;
    }


    #ngcReactionModal .ngcr-modal-window {

        width:
            calc(100% - 18px);

        max-height:
            calc(100vh - 18px);

        border-radius: 7px;
    }


    #ngcReactionModal .ngcr-modal-body {

        padding: 18px;
    }


    #ngcReactionModal .ngcr-modal-emoji {

        width: 42px;
        height: 42px;

        font-size: 23px;
    }


    #ngcReactionModal .ngcr-modal-comment {

        font-size: 14px;
    }

}


/*
 * ============================================================
 * アニメーション軽減
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {

    #ngcReactionStream .ngcr-flow {

        overflow-x: auto;
    }


    #ngcReactionStream .ngcr-flow::before,
    #ngcReactionStream .ngcr-flow::after {

        display: none;
    }


    #ngcReactionStream .ngcr-card {

        transition: none;
    }

}



/*
 * ============================================================
 * 前へ・次へボタン
 * ============================================================
 */

#ngcReactionStream .ngcr-nav-button {

    appearance: none;

    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(0, 0, 0, .08);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .94);

    color:
        #666;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, .15);

    font-family: inherit;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        opacity .2s ease;
}


#ngcReactionStream .ngcr-nav-prev {

    left: 10px;
}


#ngcReactionStream .ngcr-nav-next {

    right: 10px;
}


#ngcReactionStream .ngcr-nav-button:hover {

    color:
        var(--ngcr-accent);

    border-color:
        var(--ngcr-accent);

    background:
        #fff;

    transform:
        translateY(-50%)
        scale(1.08);
}


#ngcReactionStream .ngcr-nav-button:active {

    transform:
        translateY(-50%)
        scale(.94);
}


/*
 * 手動移動時だけ
 * なめらかにスライド
 */

#ngcReactionStream
.ngcr-track.is-manual-moving {

    transition:
        transform .35s
        cubic-bezier(.22, .61, .36, 1);
}


/*
 * スマホ
 */

@media screen and (max-width: 600px) {

    #ngcReactionStream .ngcr-nav-button {

        width: 34px;
        height: 34px;

        font-size: 25px;
    }


    #ngcReactionStream .ngcr-nav-prev {

        left: 5px;
    }


    #ngcReactionStream .ngcr-nav-next {

        right: 5px;
    }

}