/* =========================================================
   まほら UI改善（2026-07-22）
   ・タイトルの控えめなシマー
   ・テーマ別アイコン
   ・ボタンの角丸と弱いGlow
   ========================================================= */

/* ---------- タイトル：シマーエフェクト（TOPタイトルのみ） ---------- */
.tarot-menu-page #page-title::after {
    position: absolute;
    z-index: 2;
    top: -18%;
    bottom: -18%;
    left: -42%;
    display: block;
    width: 20%;
    content: "";
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 252, 225, 0.08) 28%,
        rgba(255, 255, 255, 0.58) 50%,
        rgba(255, 241, 181, 0.14) 68%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(0.6px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-20%) skewX(-18deg);
    animation: mahora-title-shimmer 11s ease-in-out 3.8s infinite;
    mix-blend-mode: screen;
}

@keyframes mahora-title-shimmer {
    0%, 7% {
        opacity: 0;
        transform: translateX(-20%) skewX(-18deg);
    }

    9% {
        opacity: 0.68;
    }

    21% {
        opacity: 0.68;
        transform: translateX(610%) skewX(-18deg);
    }

    23%, 100% {
        opacity: 0;
        transform: translateX(610%) skewX(-18deg);
    }
}

/* ---------- 「選べるテーマ」：内容別アイコン ---------- */
.theme-list .theme-item::before {
    width: 1.46em;
    height: 1.46em;
    margin-right: 0.42em;
    flex: 0 0 1.46em;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 0 rgba(104, 55, 9, 0.24));
    transform: translateY(-0.01em);
}

.theme-item--sun::before {
    background-image: url("../images/menu/theme-icons/icon-sun.png");
    background-image: -webkit-image-set(
        url("../images/menu/theme-icons/icon-sun-32.webp") 1x,
        url("../images/menu/theme-icons/icon-sun-64.webp") 2x
    );
    background-image: image-set(
        url("../images/menu/theme-icons/icon-sun-32.webp") type("image/webp") 1x,
        url("../images/menu/theme-icons/icon-sun-64.webp") type("image/webp") 2x
    );
}

.theme-item--heart::before {
    background-image: url("../images/menu/theme-icons/icon-heart.png");
    background-image: -webkit-image-set(
        url("../images/menu/theme-icons/icon-heart-32.webp") 1x,
        url("../images/menu/theme-icons/icon-heart-64.webp") 2x
    );
    background-image: image-set(
        url("../images/menu/theme-icons/icon-heart-32.webp") type("image/webp") 1x,
        url("../images/menu/theme-icons/icon-heart-64.webp") type("image/webp") 2x
    );
}

.theme-item--briefcase::before {
    background-image: url("../images/menu/theme-icons/icon-briefcase.png");
    background-image: -webkit-image-set(
        url("../images/menu/theme-icons/icon-briefcase-32.webp") 1x,
        url("../images/menu/theme-icons/icon-briefcase-64.webp") 2x
    );
    background-image: image-set(
        url("../images/menu/theme-icons/icon-briefcase-32.webp") type("image/webp") 1x,
        url("../images/menu/theme-icons/icon-briefcase-64.webp") type("image/webp") 2x
    );
}

.theme-item--talk-heart::before {
    background-image: url("../images/menu/theme-icons/icon-talk-heart.png");
    background-image: -webkit-image-set(
        url("../images/menu/theme-icons/icon-talk-heart-32.webp") 1x,
        url("../images/menu/theme-icons/icon-talk-heart-64.webp") 2x
    );
    background-image: image-set(
        url("../images/menu/theme-icons/icon-talk-heart-32.webp") type("image/webp") 1x,
        url("../images/menu/theme-icons/icon-talk-heart-64.webp") type("image/webp") 2x
    );
}

.theme-item--crystal-ball::before {
    background-image: url("../images/menu/theme-icons/icon-crystal-ball.png");
    background-image: -webkit-image-set(
        url("../images/menu/theme-icons/icon-crystal-ball-32.webp") 1x,
        url("../images/menu/theme-icons/icon-crystal-ball-64.webp") 2x
    );
    background-image: image-set(
        url("../images/menu/theme-icons/icon-crystal-ball-32.webp") type("image/webp") 1x,
        url("../images/menu/theme-icons/icon-crystal-ball-64.webp") type("image/webp") 2x
    );
}

/* ---------- ボタン：視認性を維持したまま立体感とGlowを追加 ---------- */
.menu-start-button,
.top-menu-link,
.back-to-menu-button,
.top-menu-button,
.button-area button,
#repeat-button,
.replay-modal-buttons button,
.retry-button,
.retry-confirm-button,
.retry-cancel-button,
.retry-confirm-submit,
.retry-confirm-cancel,
.site-info-back a,
.contact-mail-button {
    color: #211008;
    border-radius: 13px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease,
        background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .menu-start-button:hover,
    .button-area button:not(:disabled):hover,
    #repeat-button:hover,
    .replay-modal-buttons button:hover,
    .retry-button:hover,
    .retry-confirm-button:hover,
    .retry-confirm-submit:hover,
    .contact-mail-button:hover {
        filter: brightness(1.035) saturate(1.04);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.90),
            0 5px 0 rgba(153, 85, 42, 0.96),
            0 0 13px rgba(224, 153, 43, 0.48);
    }

    .top-menu-link:hover,
    .back-to-menu-button:hover,
    .top-menu-button:hover,
    .site-info-back a:hover,
    .retry-cancel-button:hover,
    .retry-confirm-cancel:hover,
    .cancel-replay-button:hover {
        filter: brightness(1.025);
        box-shadow:
            0 4px 0 rgba(205, 163, 96, 0.86),
            0 0 11px rgba(218, 164, 66, 0.30);
    }
}

/* タップ時は発光ではなく、押し込まれる感触を優先 */
.menu-start-button:active,
.top-menu-link:active,
.back-to-menu-button:active,
.top-menu-button:active,
.button-area button:not(:disabled):active,
#repeat-button:active,
.replay-modal-buttons button:active,
.retry-button:active,
.retry-confirm-button:active,
.retry-cancel-button:active,
.retry-confirm-submit:active,
.retry-confirm-cancel:active,
.site-info-back a:active,
.contact-mail-button:active {
    filter: brightness(0.99);
}

@media (prefers-reduced-motion: reduce) {
    .tarot-menu-page #page-title::after {
        display: none;
        animation: none;
    }
}