@charset "UTF-8";

:root{
    --design-w: 490;
    --w: min(76vw, calc(var(--design-w) * 1px));
}

html, body{
    margin: 0;
    padding: 0;
}
body{
    overflow-x: hidden;
}

.main_cont{
    position: relative;
    width: 100%;
    height: calc(870 * var(--w) / var(--design-w));
    margin: 0 auto;
    background-image: url('../Links/bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.gacha-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(870 * var(--w) / var(--design-w));
}

img{
    width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/*ガチャ部分*/
.main_cont .top .bg{
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 40;
}

/* bg2, bg3, bg4 は初期非表示 */
.main_cont .top .bg.bg2,
.main_cont .top .bg.bg3,
.main_cont .top .bg.bg4{
    display: none;
}

/* 残り回数（通常モードでは非表示）*/
.main_cont .under .remaining-count{
    position: absolute;
    top: calc(10 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    margin: 0;
    font-size: clamp(13px, 3.8vw, 18px);
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    white-space: nowrap;
    background: rgba(0,0,0,0.35);
    padding: 4px 16px;
    border-radius: 999px;
}
.main_cont .under .remaining-count .remaining-num{
    font-size: 1.5em;
    font-weight: bold;
    vertical-align: baseline;
}

/* 通常モードでは不要な要素を非表示 */
.mode-normal .remaining-count,
.mode-normal .used-message,
.mode-normal .show-result-btn {
    display: none !important;
}

/* おみくじカウンター（通常モードのみ）*/
.omikuji-counter {
    display: none;
    position: absolute;
    top: calc(10 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    background: rgba(0,0,0,0.45);
    border-radius: 8px;
    padding: 5px 10px;
    white-space: nowrap;
}
.omikuji-counter span {
    display: inline-block;
    font-size: clamp(9px, 2.6vw, 12px);
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #fff;
    margin: 0 5px;
}
.omikuji-counter span b {
    font-size: 1.2em;
}
.mode-normal .omikuji-counter {
    display: block;
}

/* メルマガバナー（mailmagモードのみ表示）*/
.mailmag-banner {
    display: none;
    position: absolute;
    top: calc(70 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    margin: 0;
    text-align: center;
    font-size: clamp(14px, 4.2vw, 20px);
    font-weight: bold;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow:
        0 0 8px rgba(0,0,0,0.9),
        0 2px 4px rgba(0,0,0,0.8);
    background: rgba(180, 0, 0, 0.65);
    padding: 8px 20px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
}
.mode-mailmag .mailmag-banner {
    display: block;
}

/*土台*/
.main_cont .under .bg_under.under1{
    position: absolute;
    width: 70%;
    top: calc(549 * var(--w) / var(--design-w));
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
    z-index: 50;
}

/*出口*/
.main_cont .under .bg_under.under2{
    position: absolute;
    width: 37%;
    top: calc(650 * var(--w) / var(--design-w));
    left: 50.6%;
    transform: translateX(-50%);
    z-index: 20;
}

/*回転*/
.main_cont .under .bg_under.rotate {
    position: absolute;
    width: 14%;
    top: calc(571 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    cursor: pointer;
    transition: opacity 0.3s ease;
    animation: rotateGlow 1.5s ease-in-out infinite;
}

@keyframes rotateGlow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4))
                drop-shadow(0 0 6px rgba(255, 240, 240, 0.2));
        opacity: 1;
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 16px rgba(255, 230, 230, 0.5))
                drop-shadow(0 0 28px rgba(255, 200, 200, 0.3));
        opacity: 0.95;
    }
}

.main_cont .under .bg_under.rotate.used,
.main_cont .under .bg_under.rotate.rotating,
.main_cont .under .bg_under.rotate.clicked {
    animation: none;
}

.main_cont .under .bg_under.rotate.used{
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

/* 使用済みメッセージ */
.used-message{
    display: none;
    position: absolute;
    width: 100%;
    top: calc(600 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    text-align: center;
    font-size: clamp(12px, 3.5vw, 16px);
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #555;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    margin: 0;
}
.used-message.show{
    display: block;
}

/* 結果を表示ボタン */
.main_cont .under .show-result-btn{
    display: none;
    position: absolute;
    top: calc(660 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    appearance: none;
    border: none;
    background: #025bab;
    color: #fff;
    font-size: clamp(13px, 3.5vw, 16px);
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    padding: 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.08em;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.main_cont .under .show-result-btn:hover{
    background: #0271eb;
}
.main_cont .under .show-result-btn.show{
    display: block;
}

.main_cont .under .bg_under.rotate.rotating{
    animation: rotateHandle 0.9s cubic-bezier(0.55, 0.06, 0.7, 0.25) forwards;
}

@keyframes rotateHandle{
    0%   { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/*カプセル top:685px(基準)まで落ちる*/
.main_cont .under .bg_under.balls .ball{
    position: absolute;
    width: 19%;
    top: calc(400 * var(--w) / var(--design-w));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    --drop-start:   calc(400 * var(--w) / var(--design-w));
    --drop-bounce:  calc(693 * var(--w) / var(--design-w));
    --drop-rebound: calc(679 * var(--w) / var(--design-w));
    --drop-end:     calc(685 * var(--w) / var(--design-w));
}

.main_cont .under .bg_under.balls .ball.dropping{
    display: block;
    animation: dropBall 0.85s cubic-bezier(0.55, 0, 0.85, 0.25) forwards;
}

@keyframes dropBall{
    0%   { top: var(--drop-start); }
    78%  { top: var(--drop-bounce); }
    88%  { top: var(--drop-rebound); }
    100% { top: var(--drop-end); }
}

/* === アタリ確定演出（キラキラ） === */
.main_cont .under .bg_under.balls .ball.sparkle{
    filter: drop-shadow(0 0 10px rgba(255, 225, 120, 0.9))
            drop-shadow(0 0 22px rgba(255, 190, 60, 0.7));
    animation: dropBall 0.85s cubic-bezier(0.55, 0, 0.85, 0.25) forwards,
               ballGlow 0.7s ease-in-out infinite alternate;
}

@keyframes ballGlow{
    0%   { filter: drop-shadow(0 0 6px rgba(255, 225, 120, 0.6))
                   drop-shadow(0 0 14px rgba(255, 190, 60, 0.4)); }
    100% { filter: drop-shadow(0 0 16px rgba(255, 225, 120, 1))
                   drop-shadow(0 0 28px rgba(255, 190, 60, 0.9)); }
}

/* キラキラ */
.sparkle-particle{
    position: absolute;
    top: 50%;
    left: 50%;
    width:  calc(14 * var(--w) / var(--design-w));
    height: calc(14 * var(--w) / var(--design-w));
    margin: calc(-7 * var(--w) / var(--design-w)) 0 0
            calc(-7 * var(--w) / var(--design-w));
    pointer-events: none;
    background: radial-gradient(circle, #fff 0%, #ffe680 35%, rgba(255, 200, 60, 0) 70%);
    border-radius: 50%;
    --dist: calc(var(--dist-base, -50) * var(--w) / var(--design-w));
    transform: rotate(var(--angle)) translateY(var(--dist)) scale(0);
    animation: sparkleTwinkle 1.1s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    z-index: 31;
}
.sparkle-particle::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(26 * var(--w) / var(--design-w));
    height: 2px;
    margin: -1px 0 0 calc(-13 * var(--w) / var(--design-w));
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 100%);
    box-shadow: 0 0 6px rgba(255, 230, 120, 0.9);
}
.sparkle-particle::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: calc(26 * var(--w) / var(--design-w));
    margin: calc(-13 * var(--w) / var(--design-w)) 0 0 -1px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 100%);
    box-shadow: 0 0 6px rgba(255, 230, 120, 0.9);
}

@keyframes sparkleTwinkle{
    0%, 100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(1);
    }
}

/* === ポップアップ === */
.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.overlay.show{
    opacity: 1;
    pointer-events: auto;
}

.popup{
    position: fixed;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    padding: clamp(24px, 6vw, 36px) clamp(20px, 3vw, 42px) clamp(18px, 5vw, 28px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    z-index: 101;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popup.show{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.popup .result-text{
    margin: 0 0 16px;
    font-size: clamp(32px, 11vw, 48px);
    font-weight: bold;
    letter-spacing: 0.08em;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
.popup .result-text.win{
    color: #e8362c;
    text-shadow: 0 0 12px rgba(232, 54, 44, 0.25);
}
.popup .result-text.lose{
    color: #555;
}

/* おみくじ結果の色 */
.popup .result-text.daidaikichi {
    color: #b8860b;
    text-shadow: 0 0 14px rgba(255, 200, 0, 0.7),
                 0 0 28px rgba(255, 160, 0, 0.4);
}
.popup .result-text.daikichi {
    color: #e8362c;
    text-shadow: 0 0 12px rgba(232, 54, 44, 0.25);
}
.popup .result-text.chukichi {
    color: #d97706;
}
.popup .result-text.shokichi {
    color: #16a34a;
}
.popup .result-text.kichi {
    color: #2563eb;
}
.popup .result-text.suekichi {
    color: #6b7280;
}

/* キーワード表示 */
.popup .popup-keyword {
    margin: 0 0 20px;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: bold;
    letter-spacing: 0.12em;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #e8362c;
    background: #fff5f5;
    border: 2px solid #e8362c;
    border-radius: 8px;
    padding: 10px 24px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.popup .popup-keyword:empty {
    display: none;
}

.popup.lose .popup-keyword {
    display: none;
}

/* キーワード下の説明文（メルマガモード・アタリのみ）*/
.popup .popup-message {
    margin: 0 0 20px;
    font-size: clamp(11px, 3vw, 13px);
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #444;
    line-height: 1.6;
}
.mode-normal .popup-message,
.popup.lose .popup-message {
    display: none;
}

.popup .popup-close{
    appearance: none;
    border: none;
    background: #333;
    color: #fff;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.1em;
}
.popup .popup-close:hover{
    background: #555;
}

/* === 紙吹雪 === */
.confetti-piece {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 14px;
    opacity: 0;
    animation: confettiFall linear forwards;
    z-index: 200;
    pointer-events: none;
    border-radius: 2px;
}

@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}