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

* {
    box-sizing: border-box;
}

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

html {
    background: #ead9ff;
}

body {
    overflow: hidden;

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

    background: #ead9ff;
}


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

.castle-viewport {
    width: 100vw;

    height: 100vh;
    height: 100dvh;

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

    background: #ead9ff;

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


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

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

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

.castle-viewport::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(151, 100, 190, 0.48);
}


/* ========================================
   お城画面
======================================== */

.castle-screen {
    position: relative;

    /*
       トップページと同じ8:5の比率です。
    */
    width: min(100vw, calc(100dvh * 1.6));
    aspect-ratio: 8 / 5;

    margin-inline: auto;

    top: 50%;
    transform: translateY(-50%);

    overflow: hidden;
    isolation: isolate;

    container-type: inline-size;
}


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

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

    .castle-screen {
        width: calc(100dvh * 1.6);
        max-width: none;

        margin-left: 0;
        margin-right: 0;
    }
}


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

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

    z-index: 1;

    width: 100%;
    height: 100%;

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

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


/*
   背景全体へごく薄いフィルターをかけます。
   元画像の色はほとんど変えません。
*/

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

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(246, 211, 255, 0.07)
        );

    pointer-events: none;
}


/* ========================================
   ガラスパネル共通
======================================== */

.glass-panel {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34),
            rgba(255, 219, 248, 0.17)
        );

    border:
        0.14cqw solid
        rgba(255, 255, 255, 0.68);

    box-shadow:
        0 0.83cqw 2.78cqw
        rgba(100, 58, 153, 0.22),

        0 0 1.39cqw
        rgba(255, 221, 249, 0.38),

        inset 0 0.07cqw 0
        rgba(255, 255, 255, 0.8);

    backdrop-filter:
        blur(1.25cqw)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(1.25cqw)
        saturate(135%);
}


/* ========================================
   時計
======================================== */

.castle-clock {
    position: absolute;

    left: 3.47cqw;
    top: 3.13cqw;

    z-index: 20;

    min-width: 17.36cqw;

    padding:
        1.18cqw
        1.67cqw;

    border-radius: 1.67cqw;

    color: #ffffff;
    text-align: center;

    text-shadow:
        0 0.14cqw 0.42cqw
        rgba(92, 44, 143, 0.4);
}

.clock-time {
    margin: 0;

    font-size: 3.06cqw;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.04em;
}

.clock-greeting {
    margin:
        0.63cqw
        0
        0;

    color: rgba(255, 255, 255, 0.95);

    font-size: 0.97cqw;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* ========================================
   音楽プレイヤー
======================================== */

.castle-music-player {
    position: absolute;

    right: 2.0cqw;
    top: 3.5cqw;

    z-index: 20;

    width: 28.47cqw;

    padding:
        1.53cqw
        1.67cqw
        1.39cqw;

    border-radius: 2.08cqw;

    color: #ffffff;

    text-shadow:
        0 0.14cqw 0.42cqw
        rgba(92, 44, 143, 0.32);
}


/* 見出し */

.music-player-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1.11cqw;
}

.music-player-label {
    margin: 0 0 0.21cqw;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.69cqw;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.music-player-title {
    margin: 0;

    font-size: 1.53cqw;
    line-height: 1.2;
}

.music-note {
    display: grid;
    place-items: center;

    width: 3.19cqw;
    aspect-ratio: 1 / 1;

    border:
        0.14cqw solid
        rgba(255, 255, 255, 0.72);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.22);

    font-size: 1.67cqw;

    box-shadow:
        inset 0 0.07cqw 0.35cqw
        rgba(255, 255, 255, 0.08);
}


/* 現在選択中の曲 */

.current-track {
    margin-bottom: 0.9cqw;
    padding:
        0.83cqw
        1.04cqw;

    border-radius: 1.04cqw;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.27),
            rgba(255, 212, 244, 0.16)
        );

    border:
        0.07cqw solid
        rgba(255, 255, 255, 0.42);
}

.current-track-label {
    margin: 0 0 0.21cqw;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.63cqw;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.current-track-title {
    margin: 0;

    font-size: 1.04cqw;
    font-weight: 700;
}


/* 曲目一覧 */

.track-list {
    display: grid;
    gap: 0.42cqw;

    /*
       曲一覧だけをスクロール可能にします。
    */
    max-height: 15cqw;

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

    padding-right: 0.42cqw;

    /*
       スクロール時の動きを少し滑らかにします。
    */
    scroll-behavior: smooth;

    /*
       スマホでのスクロールを滑らかにします。
    */
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   曲目一覧のスクロールバー
======================================== */

.track-list::-webkit-scrollbar {
    width: 0.56cqw;
}

.track-list::-webkit-scrollbar-track {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.12);
}

.track-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.75),
            rgba(255, 203, 241, 0.55)
        );

    border:
        0.07cqw solid
        rgba(255, 255, 255, 0.45);
}

.track-list::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9),
            rgba(255, 190, 236, 0.72)
        );
}

.track-button {
    display: grid;
    grid-template-columns:
        2.08cqw
        minmax(0, 1fr)
        1.39cqw;

    align-items: center;
    gap: 0.56cqw;

    width: 100%;

    margin: 0;
    padding:
        0.63cqw
        0.83cqw;

    border:
        0.07cqw solid
        rgba(255, 255, 255, 0.28);

    border-radius: 0.83cqw;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.track-button:hover,
.track-button:focus-visible {
    transform: translateX(-0.21cqw);

    border-color: rgba(255, 255, 255, 0.72);

    background: rgba(255, 255, 255, 0.24);

    box-shadow:
        0 0.35cqw 0.83cqw
        rgba(101, 58, 148, 0.13);
}

.track-button.is-active {
    border-color: rgba(255, 255, 255, 0.85);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.33),
            rgba(255, 203, 241, 0.22)
        );

    box-shadow:
        inset 0 0 0.7cqw
        rgba(255, 255, 255, 0.08);
}

.track-button:focus-visible {
    outline:
        0.14cqw solid
        rgba(255, 255, 255, 0.95);

    outline-offset: 0.14cqw;
}

.track-button:active {
    transform: scale(0.98);
}

.track-number {
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.69cqw;
    font-weight: 700;
}

.track-name {
    overflow: hidden;

    font-size: 0.9cqw;
    font-weight: 700;

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

.track-status {
    opacity: 0;

    font-size: 0.97cqw;
    text-align: center;

    transition: opacity 180ms ease;
}

.track-button.is-active .track-status {
    opacity: 1;
}


/* 再生操作 */

.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9cqw;

    margin-top: 1.11cqw;
}

.music-control-button {
    display: grid;
    place-items: center;

    width: 2.71cqw;
    aspect-ratio: 1 / 1;

    padding: 0;

    border:
        0.1cqw solid
        rgba(255, 255, 255, 0.65);

    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);

    font-family: inherit;
    font-size: 0.83cqw;

    cursor: pointer;

    box-shadow:
        0 0.35cqw 0.83cqw
        rgba(86, 48, 132, 0.13);

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.music-control-button:hover,
.music-control-button:focus-visible {
    transform: scale(1.09);

    background: rgba(255, 255, 255, 0.32);

    box-shadow:
        0 0.42cqw 1.04cqw
        rgba(86, 48, 132, 0.2);
}

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

.music-control-button:focus-visible {
    outline:
        0.14cqw solid
        rgba(255, 255, 255, 0.95);

    outline-offset: 0.14cqw;
}

.main-control-button {
    width: 3.61cqw;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45),
            rgba(255, 204, 240, 0.28)
        );

    font-size: 1.18cqw;
}


/* 音量 */

.volume-control {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 0.83cqw;

    margin-top: 1.04cqw;
}

.volume-control label {
    font-size: 0.76cqw;
    font-weight: 700;
}

.volume-control input {
    width: 100%;

    accent-color: #ffffff;
    cursor: pointer;
}


/* ========================================
   トップへ戻るボタン
======================================== */

.castle-back-button {
    position: absolute;

    left: 3.47cqw;
    bottom: 18.03cqw;

    z-index: 20;

    display: inline-flex;
    align-items: center;
    gap: 0.56cqw;

    padding:
        0.76cqw
        1.25cqw;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.9cqw;
    font-weight: 700;

    text-decoration: none;
    text-shadow:
        0 0.14cqw 0.42cqw
        rgba(92, 44, 143, 0.35);

    -webkit-tap-highlight-color: transparent;

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

.castle-back-button:hover,
.castle-back-button:focus-visible {
    transform: translateY(-0.21cqw);
    filter: brightness(1.08);
}

.castle-back-button:active {
    transform: scale(0.97);
}

.castle-back-button:focus-visible {
    outline:
        0.14cqw solid
        rgba(255, 255, 255, 0.95);

    outline-offset: 0.21cqw;
}


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

.home-bar {
    position: absolute;

    left: 50%;
    bottom: 1.39cqw;

    z-index: 30;

    width: 91.67%;

    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 300ms ease,
        transform 300ms ease;
}

.home-bar-message.is-changing {
    opacity: 0;
    transform: translateY(0.28cqw);
}


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

.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 (prefers-reduced-motion: reduce) {

    .track-button,
    .music-control-button,
    .castle-back-button,
    .home-bar-message {
        transition: none;
    }
}