/* =========================================================
   まほら 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;
    }
}

/* ========================================
   トップページ PC版 CTA：第1工程 最終上書き
   汎用interaction指定より後に置き、トップCTAだけを整理する。
======================================== */
@media (min-width: 961px) {
    .menu-start-button,
    .menu-start-button:visited {
        color: #291507;
        letter-spacing: 0.005em;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 32%, rgba(255, 255, 255, 0) 54%),
            linear-gradient(180deg, #f7d27a 0%, #e4a039 100%);
        border: 1px solid #8c551d;
        border-radius: 20px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.76),
            inset 0 -1px 0 rgba(119, 66, 17, 0.12),
            0 2px 0 rgba(133, 74, 24, 0.44),
            0 5px 11px rgba(90, 51, 15, 0.18);
        text-shadow: 0 1px 0 rgba(255, 247, 226, 0.40);
        transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            filter 180ms ease;
    }

    .menu-start-button:hover {
        filter: brightness(1.035) saturate(1.015);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.82),
            inset 0 -1px 0 rgba(119, 66, 17, 0.10),
            0 3px 0 rgba(133, 74, 24, 0.40),
            0 6px 13px rgba(90, 51, 15, 0.21);
        transform: translateY(-1px);
    }

    .menu-start-button:active {
        filter: brightness(0.99);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.64),
            inset 0 -1px 0 rgba(119, 66, 17, 0.14),
            0 1px 0 rgba(133, 74, 24, 0.38),
            0 3px 7px rgba(90, 51, 15, 0.16);
        transform: translateY(1px);
    }
}

/* ========================================
   トップページ スマホ版 CTA：第2工程 最終上書き
   2026-08-07
   PC版の上質な金属感を、タッチ操作向けに最適化する。
======================================== */
@media (max-width: 600px) {
    .menu-start-button,
    .menu-start-button:visited {
        color: #291507;
        letter-spacing: 0.005em;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.11) 32%, rgba(255, 255, 255, 0) 54%),
            linear-gradient(180deg, #f8d47f 0%, #e5a13b 100%);
        border: 1px solid #8c551d;
        border-radius: 20px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.78),
            inset 0 -1px 0 rgba(119, 66, 17, 0.12),
            0 2px 0 rgba(133, 74, 24, 0.42),
            0 5px 11px rgba(90, 51, 15, 0.17);
        text-shadow: 0 1px 0 rgba(255, 247, 226, 0.42);
        transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            filter 180ms ease;
    }

    .menu-start-button:active {
        filter: brightness(0.99);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.64),
            inset 0 -1px 0 rgba(119, 66, 17, 0.14),
            0 1px 0 rgba(133, 74, 24, 0.36),
            0 3px 7px rgba(90, 51, 15, 0.15);
        transform: translateY(1px);
    }
}


/* 2026-08-07 final visual correction: top CTA */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .menu-start-button:hover {
        filter: brightness(1.10) saturate(1.06);
        border-color: #a5661f;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.90),
            inset 0 -1px 0 rgba(119, 66, 17, 0.08),
            0 3px 0 rgba(133, 74, 24, 0.42),
            0 9px 18px rgba(90, 51, 15, 0.25);
        transform: translateY(-2px);
    }
}

@media (max-width: 600px) {
    .menu-start-button,
    .menu-start-button:visited {
        width: 210px;
        max-width: calc(100% - 32px);
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }
}

/* ========================================
   2026-08-07 top controls final correction
   - mobile primary/guide CTA width consistency
   - clearer desktop hover feedback
======================================== */
@media (max-width: 600px) {
    .menu-start-button,
    .menu-start-button:visited,
    .menu-guide-entry > a,
    .menu-guide-entry > a:visited {
        width: 210px;
        max-width: calc(100% - 32px);
        white-space: nowrap;
    }
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .menu-start-button:hover {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 54%),
            linear-gradient(180deg, #fbe096 0%, #edae48 100%);
        filter: brightness(1.08) saturate(1.07);
        border-color: #b37122;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.94),
            inset 0 -1px 0 rgba(119, 66, 17, 0.07),
            0 3px 0 rgba(133, 74, 24, 0.40),
            0 10px 20px rgba(90, 51, 15, 0.28);
        transform: translateY(-2px);
    }

    .menu-guide-entry > a:hover {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 224, 181, 0.90) 100%);
        filter: brightness(1.06) saturate(1.04);
        border-color: rgba(169, 108, 29, 0.92);
        box-shadow:
            0 2px 0 rgba(135, 81, 22, 0.18),
            0 7px 14px rgba(93, 54, 17, 0.18);
        transform: translateY(-2px);
    }
}