/* ========================================
   基本設定
======================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html {
    background: #f8dffc;
}

body {
    overflow: hidden;

    font-family:
        "Hiragino Maru Gothic ProN",
        "Hiragino Maru Gothic Pro",
        "Yu Gothic",
        sans-serif;

    background: #f8dffc;
}


/* ========================================
   端末側の表示領域
======================================== */

.world-viewport {
    width: 100vw;

    height: 100vh;
    height: 100dvh;

    overflow-x: auto;
    overflow-y: hidden;

    background: #f8dffc;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}


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

.world-viewport::-webkit-scrollbar {
    height: 8px;
}

.world-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.25);
}

.world-viewport::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(163, 66, 133, 0.45);
}


/* ========================================
   全端末共通のフェアリーランド画面
======================================== */

.world-screen {
    position: relative;

    /*
       基準画面は1440×900＝8:5です。

       PC・横画面：
       横幅と高さの両方に収まるサイズになります。
    */
    width: min(100vw, calc(100dvh * 1.6));
    aspect-ratio: 8 / 5;

    /*
       画面より小さい場合は横方向中央。
       画面より大きい場合は左端から表示されます。
    */
    margin-inline: auto;

    /*
       上下方向は画面中央に配置します。
    */
    top: 50%;
    transform: translateY(-50%);

    overflow: hidden;
    isolation: isolate;

    /*
       子要素でcqwを使えるようにします。
       1cqw＝world-screenの横幅の1%です。
    */
    container-type: inline-size;
}


/* ========================================
   縦向きタッチ端末
======================================== */

@media (orientation: portrait) and (pointer: coarse) {

    .world-screen {
        /*
           高さをスマホ画面と同じにします。

           横幅は高さの1.6倍になるため、
           画面右側へ横スクロールできます。
        */
        width: calc(100dvh * 1.6);
        max-width: none;

        /*
           最初にPC画面の左側を表示します。
        */
        margin-left: 0;
        margin-right: 0;
    }
}


/* ========================================
   背景
======================================== */

.world-background {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    user-select: none;
    pointer-events: none;
}


/* 背景の薄いフィルター */

.world-screen::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 221, 246, 0.08)
        );

    pointer-events: none;
}


/* ========================================
   アイコン配置エリア
======================================== */

.world-icons {
    position: absolute;
    inset: 0;

    z-index: 10;
}


/* ========================================
   アイコン共通
======================================== */

.world-icon {
    position: absolute;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    cursor: pointer;

    transform: translate(-50%, -50%);
    transform-origin: center;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.world-icon img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    filter:
        drop-shadow(
            0 0.56cqw 0.83cqw
            rgba(121, 66, 142, 0.18)
        );
}


/* PCのホバー・キーボード操作 */

.world-icon:hover,
.world-icon:focus-visible,
.world-icon.is-selected {
    z-index: 20;

    transform:
        translate(-50%, -50%)
        translateY(-0.49cqw)
        scale(1.07);

    filter:
        brightness(1.07)
        saturate(1.05);
}

.world-icon:focus-visible {
    border-radius: 1.67cqw;

    outline:
        0.28cqw solid
        rgba(255, 255, 255, 0.95);

    outline-offset: 0.35cqw;
}

.world-icon:active {
    transform:
        translate(-50%, -50%)
        scale(0.96);
}


/* ========================================
   アイコンごとの位置と大きさ

   今後の配置変更はここだけです。
   PC・スマホ両方へ反映されます。
======================================== */

.icon-rilanyan {
    left: 15%;
    top: 52%;

    width: 30%;
}

.icon-house {
    left: 55%;
    top: 68%;

    width: 20%;
}

.icon-castle {
    left: 55%;
    top: 35%;

    width: 25%;
}

.icon-youtube {
    left: 35%;
    top: 28%;

    width: 14%;
}

.icon-x {
    left: 45%;
    top: 18%;

    width: 14%;
}

.icon-line {
    left: 57%;
    top: 13%;

    width: 12.5%;
}

.icon-goods {
    left: 69%;
    top: 16%;

    width: 12.5%;
}


/* ========================================
   ホームバー
======================================== */

.home-bar {
    position: absolute;

    left: 50%;
    bottom: 1.39cqw;

    z-index: 30;

    width: 91.67%;

    /* 横は中央揃え、縦は50px下へ移動 */
    transform: translateX(-50%) translateY(30%);

    pointer-events: none;
}

.home-bar-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
}

.home-bar-message {
    position: absolute;

    /*
       ホームバー画像内の文字表示領域です。
    */
    left: 18%;
    right: 5%;
    top: 30%;
    bottom: 8%;

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

    margin: 0;
    padding-inline: 0.97cqw;

    color: #a34285;

    font-size: 1.6cqw;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.03em;

    text-align: center;

    text-shadow:
        0 0.14cqw 0 rgba(255, 255, 255, 0.95),
        0 0 0.56cqw rgba(255, 255, 255, 0.9);

    transition:
        opacity 120ms ease,
        transform 120ms ease;
}

.home-bar-message.is-changing {
    opacity: 0;
    transform: scale(0.98);
}


/* ========================================
   BGMプレイヤー
======================================== */

.bgm-player {
    position: absolute;

    right: -1.94cqw;
    top: -6.25cqw;

    z-index: 40;

    width: 27.78%;
    aspect-ratio: 1 / 1;
}

.bgm-player-wing {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.bgm-control-button {
    position: absolute;

    z-index: 2;

    width: 28%;
    aspect-ratio: 1 / 1;

    padding: 0;
    border: none;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.bgm-control-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.bgm-start-button {
    left: 21%;
    top: 38%;
}

.bgm-stop-button {
    right: 30%;
    top: 28%;

    width: 18%;
}

.bgm-control-button:hover,
.bgm-control-button:focus-visible {
    transform: scale(1.12);
    filter: brightness(1.08);
}

.bgm-control-button:active {
    transform: scale(0.94);
}

.bgm-control-button:focus-visible {
    outline: 0.21cqw solid white;
    outline-offset: 0.21cqw;
}


/* ========================================
   コピーライト
======================================== */

.site-credit {
    position: absolute;

    left: 50%;
    bottom: 0.49cqw;

    z-index: 35;

    transform: translateX(-50%);

    color: #666;
    text-align: center;

    pointer-events: none;
    user-select: none;
}

.site-credit p {
    margin: 0;

    font-size: 0.76cqw;
    line-height: 1.4;

    white-space: nowrap;
}


/* ========================================
   タッチ端末
======================================== */

@media (hover: none) and (pointer: coarse) {

    /*
       スマホで:hoverが残る現象を防ぎます。
    */
    .world-icon:hover {
        z-index: auto;

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

        filter: none;
    }

    /*
       1回目にタップしたアイコンだけ強調します。
    */
    .world-icon.is-selected {
        z-index: 20;

        transform:
            translate(-50%, -50%)
            translateY(-0.49cqw)
            scale(1.07);

        filter:
            brightness(1.07)
            saturate(1.05);
    }
}


/* ========================================
   動きを減らす設定
======================================== */

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

    .world-icon,
    .home-bar-message,
    .bgm-control-button {
        transition: none;
    }
}