/* ========================================
   おうちページの基本設定
======================================== */

.house-screen {
    /*
       おうち内で使用する代表的な色です。
    */
    --house-message-color: #a34285;
}


/* ========================================
   お部屋の背景
======================================== */

.house-background {
    /*
       PCと縦スマホは、画面を埋めるように表示します。
       表示位置は部屋の中央です。
    */
    object-fit: cover;
    object-position: center 100%;
}


/* ========================================
   おうちアイコン共通
======================================== */

.house-icon {
    /*
       基本的なアニメーションなどは
       style.cssの.world-iconを使用します。
    */

    -webkit-user-drag: none;
}


/* ========================================
   家具・キャラクターの位置

   背景画像に合わせて調整するときは、
   基本的にこの項目だけを変更します。

   left：横位置
   top：縦位置
   width：画像の大きさ
======================================== */


/* 扉 */

.house-gate {
    left: 50%;
    top: 25%;

    width: 42%;
}


/* りらにゃん */

.house-rilanyan {
    left: 50%;
    top: 70%;

    width: 30%;
}


/* フルーツバスケット */

.house-fruits-basket {
    left: 75%;
    top: 75%;

    width: 25%;
}


/* 本棚 */

.house-bookshelf {
    left: 25%;
    top: 42%;

    width: 40%;
}


/* PCデスク */

.house-pc-desk {
    left: 75%;
    top: 50%;

    width: 20%;
}


/* ========================================
   出現する果物
======================================== */

.house-fruit {
    position: absolute;

    /*
       JavaScriptからleftとtopを指定し、
       果物の中心を基準に配置します。
    */
    left: 0;
    top: 0;

    z-index: 25;

    display: block;

    width: 8.5cqw;
    height: 8.5cqw;

    object-fit: contain;

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

    cursor: grab;

    touch-action: none;

    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;

    filter:
        drop-shadow(
            0 0.42cqw 0.63cqw
            rgba(121, 66, 142, 0.25)
        );

    transition:
        filter 160ms ease,
        scale 160ms ease;
}


/*
   hidden属性が付いているときは、
   確実に非表示にします。
*/

.house-fruit[hidden] {
    display: none;
}


/* 果物をつかんでいる最中 */

.house-fruit.is-dragging {
    z-index: 60;

    cursor: grabbing;

    scale: 1.12;

    filter:
        brightness(1.06)
        drop-shadow(
            0 0.7cqw 0.9cqw
            rgba(121, 66, 142, 0.32)
        );
}


/* ========================================
   食べたときのハート
======================================== */

.house-emotion-love {
    position: absolute;

    /*
       りらにゃんの右上付近です。

       りらにゃんの位置を変更した場合は、
       このleftとtopも調整してください。
    */
    left: 45%;
    top: 42%;

    z-index: 28;

    display: block;

    width: 18%;
    height: auto;

    object-fit: contain;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 0.42cqw 0.7cqw
            rgba(255, 94, 173, 0.3)
        );

    animation:
        houseLoveFloat 850ms
        ease-in-out
        infinite alternate;
}


.house-emotion-love[hidden] {
    display: none;
}


/* ハートのふわふわアニメーション */

@keyframes houseLoveFloat {

    from {
        transform:
            translateY(0)
            rotate(-4deg)
            scale(1);
    }

    to {
        transform:
            translateY(-0.7cqw)
            rotate(5deg)
            scale(1.08);
    }

}


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

.house-home-bar {
    /*
       基本設定はstyle.cssの.home-barを使用します。
    */
}


/* ========================================
   横向きスマホ
======================================== */

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

    .house-background {
        /*
           トップページと同様に、
           基準画面全体へ背景を表示します。
        */
        object-fit: cover;
        object-position: center center;
    }

}


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

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

    /*
       果物を操作している最中に、
       ブラウザ標準の画像操作を出さないようにします。
    */
    .house-fruit {
        -webkit-touch-callout: none;
    }

}


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

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

    .house-fruit {
        transition: none;
    }

    .house-emotion-love {
        animation: none;
    }

}