:root {
    --bg1: #3a3a37;
    --bg2: #1f1f1d;

    --cardTop: #ffffff;
    --cardMid: #fbfaf7;
    --cardBot: #f2f0ea;

    --stroke: #e7e2d7;
    --ink: #222;
    --muted: #6b7280;

    --accent: #f0a90f;
    --accent2: #ffca43;

    --shadow: 0 22px 70px rgba(0, 0, 0, .28);

    /* リアルなゴールドコイン用の色 */
    --coinGold1: #fef3c0;
    --coinGold2: #f5d742;
    --coinGold3: #d4a012;
    --coinGold4: #b8860b;
    --coinGold5: #8b6914;
    --coinEdge: #aa7a0c;

    /* Safari用のプレフィックスと設定 */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN";
    color: var(--ink);
    min-height: 100svh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 900px at 50% 15%, rgba(255, 255, 255, .20), transparent 55%),
        radial-gradient(900px 900px at 50% 85%, rgba(255, 206, 64, .10), transparent 58%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
    padding: 24px 14px;
}

.phone {
    width: min(430px, 100%);
    border-radius: 40px;
    padding: 14px;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08));
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, .22);
}

.card {
    position: relative;
    border-radius: 32px;
    background:
        radial-gradient(120% 120% at 50% 0%, var(--cardTop), var(--cardMid) 60%, var(--cardBot));
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    overflow: hidden;
    padding: 16px 18px 92px;
}

/* .card::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto -60px;
    height: 220px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent 70%);
    pointer-events: none;
} */

/* Header: 黒、グラデ無し */
.header {
    text-align: center;
    padding: 6px 6px 2px;
    z-index: 99999;
}

.header .small {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    z-index: 9999;
}

.header .big {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 900;
    color: #333;
    letter-spacing: .02em;
    z-index: 999;
}

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 12px;
}

input {
    flex: 1;
    height: 54px;
    border-radius: 14px;
    padding: 0 14px;
    border: 1px solid var(--stroke);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    font-size: 18px;
    outline: none;
}

input:focus {
    border-color: rgba(240, 169, 15, .65);
    box-shadow: 0 0 0 4px rgba(240, 169, 15, .18);
}

.stage {
    margin-top: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .5);
    height: 290px;
    position: relative;
    perspective: 900px;
    -webkit-perspective: 900px;
    overflow: hidden;
    padding-top: 18px;
    /* Safari ライブテキスト対策 */
    -webkit-user-select: none;
    user-select: none;
}

.stage-title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.hand {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 76%;
    max-width: 320px;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18));
}

.hand.swap {
    opacity: 0
}

/* Coin */
.coin {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 120px;
    height: 120px;
    transform:
        translate(-50%, -50%) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    border: none;
    outline: none;
}

.coin .face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(1px);
    -webkit-transform: translateZ(1px);
    /* Safari互換の金属グラデーション */
    background:
        /* 上部ハイライト */
        radial-gradient(ellipse 80% 50% at 50% 5%, rgba(255, 255, 255, 0.6), transparent 50%),
        /* 左上ハイライト */
        radial-gradient(ellipse 60% 60% at 25% 25%, rgba(255, 255, 255, 0.4), transparent 50%),
        /* メイングラデーション（Safari互換） */
        radial-gradient(circle at 30% 30%, var(--coinGold1), transparent 60%),
        radial-gradient(circle at 70% 70%, var(--coinGold4), transparent 60%),
        /* ベース色 */
        linear-gradient(135deg, var(--coinGold1) 0%, var(--coinGold2) 30%, var(--coinGold3) 50%, var(--coinGold2) 70%, var(--coinGold4) 100%);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, .35),
        0 8px 16px rgba(0, 0, 0, .25),
        inset 0 2px 4px rgba(255, 255, 255, .5),
        inset 0 -4px 8px rgba(0, 0, 0, .2);
    border: none;
    outline: none;
}

.coin .front {
    transform: translateZ(2px);
    -webkit-transform: translateZ(2px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: none;
    outline: none;
}

.coin .back {
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: none;
    outline: none;
}

.coin::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    /* Safari互換の外周リング */
    background: linear-gradient(180deg,
            var(--coinGold1) 0%,
            var(--coinGold3) 25%,
            var(--coinGold4) 50%,
            var(--coinGold3) 75%,
            var(--coinGold1) 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .4),
        inset 0 -2px 4px rgba(0, 0, 0, .3),
        0 4px 8px rgba(0, 0, 0, .2);
    pointer-events: none;
    z-index: -1;
    border: none;
    outline: none;
}

.coin::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    /* Safari互換の内側リング */
    background: transparent;
    border: 3px solid var(--coinGold4);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .5),
        inset 0 -1px 2px rgba(0, 0, 0, .3),
        0 1px 1px rgba(255, 255, 255, .3);
    pointer-events: none;
    outline: none;
}

/* コインの文字（エンボス効果） */
.coin .mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 44px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 立体的なエンボス効果 */
    color: var(--coinGold4);
    text-shadow:
        /* 上側ハイライト */
        0 -1px 1px rgba(255, 255, 255, .7),
        0 -2px 2px rgba(255, 255, 255, .3),
        /* 下側シャドウ */
        0 1px 1px rgba(0, 0, 0, .4),
        0 2px 3px rgba(0, 0, 0, .2),
        /* 奥行き */
        0 0 8px rgba(180, 140, 20, .3);
    border: none;
    outline: none;
    /* Safari ライブテキスト対策 */
    pointer-events: none;
}

/* 裏面の文字 - 親.backが既に180度回転しているので追加回転不要 */
.coin .back .mark {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    border: none;
    outline: none;
}

/* Safari での不要な UI 要素を非表示 */
.coin,
.coin .face,
.coin .mark {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}



/* idle: 平面に置いた状態 */
.coin.idle {
    top: 65%;
    transform:
        translate(-50%, -50%) rotateY(var(--ry, 0deg)) rotateX(78deg) scale(1.05);
}

/* 結果表示時のコイン */
.coin.result-coin {
    transform:
        translate(-50%, -50%) rotateY(var(--ry, 0deg)) scale(1.05);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: popCoin 0.25s ease-out;
    /* filter は 3D空間を破壊するため削除 */
}

/* ポンっと強調アニメーション */
@keyframes popCoin {
    0% {
        transform: translate(-50%, -50%) rotateY(var(--ry, 0deg)) scale(1);
    }

    60% {
        transform: translate(-50%, -50%) rotateY(var(--ry, 0deg)) scale(1.05);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(var(--ry, 0deg)) scale(1.05);
    }
}

.btn {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    height: 66px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    color: white;
    font-weight: 1000;
    font-size: 22px;
    letter-spacing: .05em;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(240, 169, 15, .35);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: saturate(.8);
}

.btn.reset {
    bottom: -54px;
    height: 48px;
    font-size: 16px;
    background: linear-gradient(180deg, #e5e7eb, #cbd5e1);
    color: #374151;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
}

/* Bubble: triangle + center */
.bubble {
    margin-top: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    border: 2px solid rgba(230, 225, 210, .9);
    padding: 14px 16px 16px;
    position: relative;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
    overflow: hidden;
}

.bubble::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgba(255, 255, 255, .92);
    filter: drop-shadow(0 -1px 0 rgba(230, 225, 210, .9));
}

.bubble-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
    font-size: 18px;
    color: #2b2b2b;
    text-align: center;
}

.pill {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 1000;
    color: white;
    background: #7cc54b;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
    flex: 0 0 auto;
}

.pill.hidden {
    display: none;
}

.bubble-main {
    text-align: center;
    font-size: 44px;
    font-weight: 1000;
    margin-top: 10px;
    color: #3a3a3a;
    letter-spacing: .04em;
}

.bubble-sub {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
    text-align: center;
}

/* アプリバナー */
.banner-parent {
    display: flex;
    gap: 16px;
    align-items: stretch;
    /* 念のため */
    justify-content: space-between;
    margin: 10px auto 0 auto;
    padding: 0;
}

.banner-parent .banner-child {
    flex: 1 1 0;
    /* 2つを均等幅にする */
    height: 48px;
    /* ←揃えたい高さ */
    overflow: hidden;
    /* はみ出しを隠す */
}

.banner-parent .banner-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠いっぱいに、比率維持しつつトリミング */
    display: block;
}

.banner-parent .banner-child a:hover {
    opacity: 0.75;
}

/* SNSアイコン */
.bubble-sub ul {
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    flex-grow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin: 12px auto;
    padding: 0;
}

.bubble-sub li {
    list-style: none;
    width: 32px;
    height: auto;
    text-align: center;
    margin: 0 auto;
    padding: 8px;
}

.bubble-sub a:hover {
    opacity: 0.75;
}

.bubble-sub ul li a img {
    width: 32px;
    height: auto;
}

/* Confetti */
.confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.confetti i {
    position: absolute;
    width: 10px;
    height: 6px;
    border-radius: 2px;
    opacity: .9;
    transform: translateY(-30px) rotate(0deg);
    animation: fall 0.85s ease-in forwards;
}

@keyframes fall {
    to {
        transform: translateY(320px) rotate(220deg);
        opacity: 0.15;
    }
}

/* Animation */
.flipping .coin {
    animation: toss3d 1.25s ease-in-out forwards;
    transform-style: preserve-3d;
    /* ← 追加 */
    -webkit-transform-style: preserve-3d;
}

.flipping .hand.base {
    opacity: 0
}

.flipping .hand.swap {
    opacity: 1;
    animation: flick 0.25s ease-out forwards;
}

@keyframes toss3d {
    0% {
        transform: translate(-50%, -50%) rotateX(78deg) translateY(26px) scale(1.05);
    }

    10% {
        transform: translate(-50%, -50%) rotateX(40deg) translateY(-10px) scale(1.02);
    }

    25% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(360deg) translateY(-70px) scaleY(.20) scale(1.00);
    }

    45% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(900deg) translateY(-98px) scaleY(.14) scale(1.00);
    }

    70% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(1350deg) translateY(-55px) scaleY(.20) scale(1.00);
    }

    85% {
        transform: translate(-50%, -50%) rotateX(40deg) rotateY(1620deg) translateY(-5px) scale(1.02);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(0deg) rotateY(var(--ry, 0deg)) translateY(26px) scale(1.02);
    }
}

@keyframes flick {
    0% {
        transform: translateX(-50%) translateY(0)
    }

    100% {
        transform: translateX(-50%) translateY(-8px)
    }
}

.sr {
    position: absolute;
    left: -9999px
}

footer {
    text-align: center;
    margin: 36px auto 0 auto;
    padding: 0;
    font-size: 0.7em;
    color: #fff;
}

footer a {
    color: #fff;
}

@media (max-width: 380px) {
    .bubble-main {
        font-size: 38px
    }

    .btn {
        font-size: 20px
    }

    input {
        font-size: 16px
    }
}

/* Safari: 画像の枠線/アウトライン（壊れた画像アイコンの枠も含む）を抑止 */
img {
    border: 0;
    outline: none;
    display: block;
}

/* Safari: 不要なフォーカス枠が出るのを抑止（入力欄以外） */
.stage *:focus {
    outline: none;
}