/* =====================================================
 * XENOの真夏のナイトメア CSS
 * ショートコード [xeno_nightmare] と合わせて使用
 * ===================================================== */

/* テキスト選択無効 */
body, canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ゲームコンテナ */
#game-container {
    width: 100%;
    max-width: 345px;
    height: auto;
    overflow: hidden;
    position: relative;
    background: url('assets/haikei03.webp') no-repeat center center;
    background-size: cover;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#game-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg, rgba(0, 0, 0, 0));
    z-index: 1;
    pointer-events: none;
    transition: background 0.5s;
}

#game-canvas {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    position: relative;
    z-index: 2;
}

#score {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 24px;
    z-index: 3;
}

.object-shadow {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* 上部ボタン */
.top-buttonbox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}
.top-buttonbox .buttonbox-button .swell-block-button__link {
    height: 30px;
    padding: 4px 8px;
}

.top-buttonbox a.btn-border {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
    padding: 6px 10px;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    color: #fff;
    border: 3px solid #000;
    border-radius: 0;
    background: #555;
    overflow: hidden;
}
.top-buttonbox a.btn-border:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #aaa;
    top: 0;
    bottom: 0;
    left: -100%;
    margin: auto 0;
    z-index: -1;
    transition: 0.2s;
}
.top-buttonbox a.btn-border:hover:before {
    left: 0;
}

/* BGMボタン */
.bgmselect {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 42px;
}
.bgmselect .bgmicon {
    width: 26px;
}
.bgmselect .bgmtext {
    font-size: 10px;
}

/* アコーディオン */
.acd01,
.acd02 {
    position: relative;
}
.swell-block-accordion .swell-block-accordion__icon {
    color: #FACE75;
}

@media screen and (max-width: 500px) {
    .acd01:before {
        position: absolute;
        content: "";
        background-image: url('assets/xeno-ue-01.png');
        background-size: contain;
        background-position: center;
        width: 70px;
        height: 70px;
        bottom: -4px;
        left: 2%;
    }
    .acd01:after {
        position: absolute;
        content: "";
        background-image: url('assets/boss01.png');
        background-size: contain;
        background-position: center;
        width: 50px;
        height: 50px;
        bottom: 10px;
        left: 22%;
    }
    .acd02:before {
        position: absolute;
        content: "";
        background-image: url('assets/ghost01.png');
        background-size: contain;
        background-position: center;
        width: 100px;
        height: 100px;
        bottom: -30px;
        right: 20%;
    }
    .acd02:after {
        position: absolute;
        content: "";
        background-image: url('assets/koushien01.png');
        background-size: contain;
        background-position: center;
        width: 55px;
        height: 55px;
        bottom: -9px;
        right: 2%;
    }
}

/* 背景 */
#lp-content {
    background-color: #f4fffe;
    background-image: radial-gradient(#e3e2d2 30%, transparent 30%);
    background-size: 14px 14px;
    background-attachment: fixed;
}

/* 浮遊ツキモノ画像 */
.tukimonoimg {
    position: fixed;
    transform-origin: center center;
    z-index: 0;
}
.tukimonoimg.tukimonoimg01 { top: 2%; left: 10%; width: 200px; transform: rotate(15deg); }
.tukimonoimg.tukimonoimg02 { top: 77%; left: 65%; width: 220px; transform: rotate(-10deg); }
.tukimonoimg.tukimonoimg03 { top: 36%; left: 84%; width: 160px; transform: rotate(-8deg); }
.tukimonoimg.tukimonoimg04 { top: 10%; left: 86%; width: 180px; transform: rotate(4deg); }
.tukimonoimg.tukimonoimg05 { top: 19%; left: -3%; width: 180px; transform: rotate(30deg); }
.tukimonoimg.tukimonoimg06 { top: 30%; left: 63%; width: 180px; transform: rotate(22deg); }
.tukimonoimg.tukimonoimg07 { top: 70%; left: 23%; width: 220px; transform: rotate(-15deg); }
.tukimonoimg.tukimonoimg08 { top: 1%; left: 66%; width: 180px; transform: rotate(-15deg); }
.tukimonoimg.tukimonoimg09 { top: 84%; left: 83%; width: 100px; transform: rotate(22deg); }
.tukimonoimg.tukimonoimg10 { top: 15%; left: calc(100% - 27%); width: 100px; transform: rotate(-30deg) scale(-1, 1); }
.tukimonoimg.tukimonoimg11 { top: 66%; left: calc(100% - 85%); width: 100px; transform: rotate(20deg); }
.tukimonoimg.tukimonoimg12 { top: 43%; left: 68%; width: 280px; transform: rotate(0deg); }
.tukimonoimg.tukimonoimg13 { top: 56%; left: 85%; width: 260px; transform: rotate(-17deg); }
.tukimonoimg.tukimonoimg14 { top: 11%; left: calc(100% - 78%); width: 200px; transform: rotate(-5deg); }
.tukimonoimg.tukimonoimg15 { top: 20%; left: calc(100% - 100%); width: 380px; transform: rotate(-10deg); }
.tukimonoimg.tukimonoimg16 { top: 42%; left: calc(100% - 79%); width: 200px; transform: rotate(-25deg) scale(-1, 1); }
.tukimonoimg.tukimonoimg17 { top: 79%; left: calc(100% - 102%); width: 240px; transform: rotate(5deg); }

/* メインボックス */
.tsukimonolp-mainbox {
    position: relative;
    max-width: 500px;
    width: 100%;
    border-left: 10px solid #a6b7c8;
    border-right: 10px solid #a6b7c8;
    padding: 10px !important;
    margin: 0 auto;
    z-index: 1;
}

/* IGUNFT誘導リンク */
.igunft-link {
    max-width: 345px;
    margin: 10px auto 0;
}
.igunft-link a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #e94560;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    transition: background 0.3s, border-color 0.3s;
    transform: skew(-4deg);
}
.igunft-link a:hover {
    background: linear-gradient(135deg, #2a1a3e 0%, #1a2a4e 100%);
    border-color: #ff6b81;
}
.igunft-link__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #e94560;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    transform: skew(4deg);
    flex-shrink: 0;
}
.igunft-link__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: skew(4deg);
}
.igunft-link__arrow {
    margin-left: auto;
    font-size: 20px;
    color: #e94560;
    transform: skew(4deg);
}

/* レスポンシブ */
@media screen and (max-width: 500px) {
    #lp-content,
    .lp-content__postContent {
        padding: 0;
    }
    .top-buttonbox {
        width: 100%;
    }
}