/* 真夜中のおもちゃ戦争 — D案「夜更けの物語箱」本番TOP */

.toybox-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.theme-rich .toybox-home {
    display: flex;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 43%, rgba(20, 65, 74, .24), transparent 42%),
        linear-gradient(180deg, #02080d, #06141c 55%, #02070b);
    color: #f5dfaa;
}

.toybox-stage {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    flex: 0 0 auto;
    width: min(100vw, calc(100svh * 1.776833));
    aspect-ratio: 1672 / 941;
    overflow: visible;
    background: #02080c;
    box-shadow: 0 0 80px rgba(0, 0, 0, .68);
}

.toybox-video-window {
    position: absolute;
    z-index: 1;
    top: 14.414cqw;
    left: 11.065%;
    width: 58.792%;
    height: 28.947cqw;
    overflow: hidden;
    border-radius: .72cqw;
    background: #02080c;
}

.toybox-video-window video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #02080c;
}

.toybox-video-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 2.6cqw rgba(0, 4, 8, .58);
    background: linear-gradient(180deg, rgba(2, 9, 14, .08), transparent 22%, transparent 76%, rgba(2, 8, 12, .2));
}

.toybox-video-status {
    position: absolute;
    z-index: 3;
    right: 1.1cqw;
    bottom: .8cqw;
    max-width: 70%;
    padding: .35cqw .65cqw;
    opacity: 0;
    border: 1px solid rgba(228, 185, 92, .5);
    background: rgba(3, 13, 19, .86);
    color: #ead7a2;
    font-family: "Yu Gothic UI", "Hiragino Sans", sans-serif;
    font-size: clamp(7px, .58cqw, 11px);
    letter-spacing: .08em;
    transform: translateY(.35cqw);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}

.toybox-video-status.is-visible {
    opacity: 1;
    transform: none;
}

.toybox-shell {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 56.28cqw;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.toybox-player-panel {
    position: absolute;
    z-index: 5;
    top: 46.65cqw;
    left: 11.48%;
    width: 16.55%;
    height: 8.73cqw;
}

.toybox-player-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.toybox-player-input {
    position: absolute;
    top: 1.76cqw;
    left: .34cqw;
    width: calc(100% - .68cqw);
    height: 2.74cqw;
    min-height: 0;
    padding: 0 1.05cqw;
    border: 0;
    border-radius: .25cqw;
    outline: 0;
    background: url("/images/home-toybox/cutouts/input-paper.webp") center / 100% 100% no-repeat;
    color: #24180f;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(9px, 1.08cqw, 20px);
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    filter: drop-shadow(0 .16cqw .18cqw rgba(0, 0, 0, .42));
}

.toybox-player-input::placeholder { color: rgba(54, 42, 25, .62); }
.toybox-player-input:focus-visible {
    filter: brightness(1.08) drop-shadow(0 0 .45cqw rgba(239, 196, 101, .66));
}

.toybox-identity {
    position: absolute;
    top: 4.82cqw;
    left: .68cqw;
    display: flex;
    align-items: center;
    gap: .48cqw;
}

.toybox-player-icon {
    width: 2.78cqw;
    height: 2.78cqw;
    min-width: 0;
    border: .13cqw solid #d4a949;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 .16cqw .4cqw rgba(0, 0, 0, .58);
}

.toybox-change-button {
    width: 4.18cqw;
    height: 2.12cqw;
    padding: 0 0 .08cqw;
    border: 0;
    background: transparent url("/images/home-toybox/cutouts/button-change-purple.webp") center / 100% 100% no-repeat;
    color: #f3e5bf;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(7px, .82cqw, 15px);
    font-weight: 700;
    text-shadow: 0 1px 2px #08030d;
    cursor: pointer;
    filter: drop-shadow(0 .16cqw .26cqw rgba(0, 0, 0, .5));
    transition: filter .16s ease;
}

.toybox-menu {
    position: absolute;
    z-index: 5;
    top: 13.83cqw;
    left: 70.63%;
    display: grid;
    width: 17.1%;
    height: 31.18cqw;
    grid-template-rows: 1.12fr repeat(3, 1fr) repeat(3, .82fr);
    gap: .29cqw;
    padding: 0;
}

.toybox-action {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 0 1.12cqw 0 .82cqw;
    align-items: center;
    justify-content: center;
    gap: .72cqw;
    border: 0;
    outline: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    color: #f3dfaa;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .76);
    cursor: pointer;
    filter: drop-shadow(0 .22cqw .32cqw rgba(0, 0, 0, .54));
    transition: filter .16s ease;
}

.toybox-action--primary {
    background-image: url("/images/home-toybox/cutouts/button-primary-red.webp");
    font-size: clamp(10px, 1.22cqw, 23px);
}

.toybox-action--secondary {
    background-image: url("/images/home-toybox/cutouts/button-secondary-navy.webp");
    font-size: clamp(9px, 1.04cqw, 20px);
}

.toybox-action--utility {
    background-image: url("/images/home-toybox/cutouts/button-utility-navy.webp");
    font-size: clamp(8px, .9cqw, 17px);
}

.toybox-action__icon {
    flex: 0 0 auto;
    width: 1.48cqw;
    height: 1.48cqw;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .92;
}

.toybox-action--primary .toybox-action__icon {
    width: 1.72cqw;
    height: 1.72cqw;
}

.toybox-action:hover:not(:disabled),
.toybox-change-button:hover,
.toybox-op-button:hover,
.toybox-sound-button:hover {
    filter: brightness(1.16) saturate(1.06) drop-shadow(0 0 .52cqw rgba(237, 188, 83, .42));
}

.toybox-action:active:not(:disabled),
.toybox-change-button:active,
.toybox-op-button:active,
.toybox-sound-button:active { filter: brightness(.9); }

.toybox-action:focus-visible,
.toybox-change-button:focus-visible,
.toybox-op-button:focus-visible,
.toybox-sound-button:focus-visible,
.toybox-debug-button:focus-visible {
    outline: max(2px, .12cqw) solid #fff1b8;
    outline-offset: max(2px, .12cqw);
}

.toybox-action:disabled {
    cursor: wait;
    filter: grayscale(.38) brightness(.7);
    opacity: .72;
}

.toybox-op-button {
    position: absolute;
    z-index: 6;
    top: 43.18cqw;
    left: 34.05%;
    display: flex;
    width: 13.38%;
    height: 2.63cqw;
    padding: 0 .78cqw;
    align-items: center;
    justify-content: center;
    gap: .48cqw;
    border: 0;
    background: transparent url("/images/home-toybox/cutouts/plate-op-movie.webp") center / 100% 100% no-repeat;
    color: #231609;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(7px, .84cqw, 16px);
    font-weight: 700;
    letter-spacing: .12em;
    cursor: pointer;
    filter: drop-shadow(0 .16cqw .26cqw rgba(0, 0, 0, .56));
    transition: filter .16s ease;
}

.toybox-op-button__mark { font-size: .72em; }
.toybox-op-button[aria-pressed="true"] .toybox-op-button__mark { transform: rotate(90deg); }

.toybox-sound-button {
    position: absolute;
    z-index: 6;
    top: 49.9cqw;
    left: 62.05%;
    display: grid;
    width: 2.58cqw;
    height: 2.58cqw;
    padding: 0;
    place-items: center;
    border: .1cqw solid #c9973e;
    border-radius: 50%;
    background: radial-gradient(circle, #1b4050 0 38%, #071c29 40% 68%, #a47632 70% 74%, #07141b 76%);
    color: #f4d786;
    font-size: clamp(8px, 1cqw, 18px);
    cursor: pointer;
    box-shadow: 0 .16cqw .38cqw rgba(0, 0, 0, .56);
    transition: filter .16s ease;
}

.toybox-sound-button[aria-pressed="true"] { color: #fff0ad; box-shadow: 0 0 .7cqw rgba(229, 184, 80, .35); }

.toybox-debug-button {
    position: absolute;
    z-index: 7;
    right: .72cqw;
    bottom: .58cqw;
    display: grid;
    width: 1.7cqw;
    height: 1.7cqw;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(219, 179, 89, .24);
    border-radius: 50%;
    background: rgba(2, 10, 15, .66);
    color: rgba(231, 209, 154, .42);
    font-size: clamp(8px, .72cqw, 14px);
    cursor: pointer;
    opacity: .55;
}

.toybox-debug-button:hover { opacity: 1; color: #f4dc9c; border-color: rgba(219, 179, 89, .68); }

body.theme-rich .toybox-home .deerflow-credit {
    z-index: 20;
    right: 12px;
    bottom: 8px;
    color: rgba(224, 205, 158, .4);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 7px;
    letter-spacing: .16em;
}

body.theme-rich .toybox-home .deerflow-credit:hover,
body.theme-rich .toybox-home .deerflow-credit:focus-visible { color: #f0d892; }

@media (max-width: 720px) {
    body.theme-rich .toybox-home {
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
        align-items: flex-start;
        background: #031018 url("/images/toy-ui/night-panel-source.png") center / 410px 360px;
    }

    .toybox-stage {
        width: 100%;
        min-height: calc(56.28cqw + 660px);
        aspect-ratio: auto;
        padding-bottom: 24px;
        background: transparent;
        box-shadow: none;
    }

    .toybox-player-panel {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 30px);
        height: 112px;
        margin: calc(56.28cqw + 14px) auto 0;
        padding: 30px 14px 12px;
        border: 1px solid rgba(203, 157, 65, .62);
        background: rgba(5, 24, 34, .96) url("/images/toy-ui/night-panel-source.png") center / 350px 305px;
        box-shadow: inset 0 0 0 1px rgba(255, 225, 155, .07), 0 14px 32px rgba(0, 0, 0, .42);
    }

    .toybox-player-label {
        position: absolute;
        top: 10px;
        left: 15px;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        color: #d9c28b;
        font-size: 11px;
        letter-spacing: .08em;
    }

    .toybox-player-input {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 106px);
        height: 48px;
        padding-inline: 20px;
        border-radius: 4px;
        font-size: 15px;
        text-align: left;
    }

    .toybox-identity {
        top: 28px;
        right: 12px;
        left: auto;
        gap: 5px;
    }

    .toybox-player-icon { width: 46px; height: 46px; border-width: 2px; }
    .toybox-change-button { width: 54px; height: 34px; font-size: 11px; }

    .toybox-menu {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 30px);
        height: auto;
        margin: 12px auto 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 58px);
        gap: 7px;
    }

    .toybox-action { padding-inline: 13px; gap: 8px; font-size: 13px; }
    .toybox-action--primary { grid-column: 1 / -1; font-size: 17px; }
    .toybox-action--secondary:nth-of-type(4) { grid-column: 1 / -1; }
    .toybox-action__icon,
    .toybox-action--primary .toybox-action__icon { width: 21px; height: 21px; }

    .toybox-op-button {
        top: 43.18cqw;
        left: 33.4%;
        width: 14.8%;
        height: 3cqw;
        min-height: 18px;
        font-size: clamp(5px, 1.3vw, 8px);
    }

    .toybox-sound-button {
        top: 49.4cqw;
        left: 61.6%;
        width: 3.4cqw;
        height: 3.4cqw;
        min-width: 20px;
        min-height: 20px;
        font-size: 9px;
    }

    .toybox-debug-button {
        position: fixed;
        right: 8px;
        bottom: 8px;
        width: 30px;
        height: 30px;
    }

    body.theme-rich .toybox-home .deerflow-credit {
        position: absolute;
        right: 16px;
        bottom: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toybox-action,
    .toybox-change-button,
    .toybox-op-button,
    .toybox-sound-button,
    .toybox-video-status { transition-duration: .01ms !important; }
}