/* Tailwind CSSはindex.htmlのCDNから読み込まれるため、
   以下のカスタムCSSのみを記述します。 */
/* 全体のトーンを明るく、カジュアルでおしゃれに */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(135deg, #f0fbff 0%, #e8fff7 100%);
    color: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

/* カード風のコンテナを明るく丸く */
.container {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 1.25rem;
    padding: 2rem;
    width: 100%;
    max-width: 560px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12), 0 6px 12px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(15,23,42,0.04);
}

/* タイトルを大きく、明るい色で */
.container h1 {
    margin: 0 0 8px 0;
    font-size: 1.9rem;
    color: #0b1220;
    letter-spacing: 0.3px;
}

/* ルーレット領域：余白を取りつつフラットに */
.roulette-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* アスペクト比1:1を維持 */
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas を丸く見せる装飾と影 */
.roulette-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10), inset 0 6px 18px rgba(255,255,255,0.06);
    background: transparent;
    transform-origin: center center;
    will-change: transform;
}

/* 矢印を明るいアクセントカラーに */
.arrow {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid #ffb020; /* 明るいオレンジイエロー */
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(251, 176, 54, 0.2));
}

/* スピンボタンをカジュアルなグラデーションに */
.spin-button {
    background: linear-gradient(90deg, #48c78e 0%, #22c1c3 100%);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(34,193,195,0.18);
    width: 100%;
    border: none;
    margin-top: 8px;
}

.spin-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(34,193,195,0.22);
}

.spin-button:active {
    transform: translateY(-1px) scale(0.997);
}

.spin-button:disabled {
    background: linear-gradient(90deg, #9bd6be 0%, #9bd6d9 100%);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 結果表示をカード風にして目立たせる */
.result {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1220;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.95));
    padding: 0.8rem 1rem;
    border-radius: 10px;
    width: calc(100% - 2rem);
    box-shadow: 0 8px 20px rgba(11,18,32,0.06);
    border: 1px solid rgba(11,18,32,0.03);
    word-break: break-word;
}

/* 微調整：小さい画面での余白確保 */
@media (max-width: 480px) {
    .container {
        padding: 1.25rem;
    }
    .container h1 {
        font-size: 1.5rem;
    }
    .result {
        font-size: 1rem;
        padding: 0.6rem 0.8rem;
    }
}