/* ======================
   ルーレット専用スタイル
====================== */

/* ルーレットキャンバス */
.roulette-canvas {
    transition: transform 0.1s ease;
    will-change: transform;
    max-width: 90vw;
    max-height: 70vh;
}

/* ルーレットサイズバリエーション */
.roulette-canvas.size-small {
    width: 300px;
    height: 300px;
}

.roulette-canvas.size-medium {
    width: 400px;
    height: 400px;
}

.roulette-canvas.size-large {
    width: 500px;
    height: 500px;
}

/* デフォルトサイズ */
.roulette-canvas {
    width: 400px;
    height: 400px;
}

/* ルーレット回転中のエフェクト */
.roulette-wrapper.spinning .roulette-canvas {
    transform-origin: center center;
}

.roulette-wrapper.spinning .center-point {
    box-shadow: 
        0 0 10px rgba(33, 150, 243, 0.5),
        0 0 20px rgba(33, 150, 243, 0.3),
        0 0 30px rgba(33, 150, 243, 0.1);
}

.roulette-wrapper.spinning .pointer {
    animation: pointerBounce 0.3s ease-in-out infinite alternate;
}

@keyframes pointerBounce {
    from { 
        transform: translateY(0) scale(1); 
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    to { 
        transform: translateY(-3px) scale(1.1); 
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    }
}

/* セグメントハイライト効果 */
.roulette-wrapper.highlight {
    position: relative;
}

.roulette-wrapper.highlight::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.3) 30deg,
        transparent 60deg,
        transparent 300deg,
        rgba(255, 215, 0, 0.3) 330deg,
        transparent 360deg
    );
    animation: highlightRotate 2s linear infinite;
    z-index: -1;
}

@keyframes highlightRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ルーレットのグラデーション背景 */
.roulette-canvas.gradient-bg {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 245, 245, 1) 70%,
        rgba(220, 220, 220, 1) 100%
    );
}

/* ルーレットの影エフェクト */
.roulette-canvas.shadow-effect {
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(0, 0, 0, 0.05),
        inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

/* セグメント数に応じた視覚的調整 */
.roulette-canvas.segments-few {
    /* 8セグメント以下 */
    border: 3px solid #ddd;
}

.roulette-canvas.segments-many {
    /* 20セグメント以上 */
    border: 1px solid #ddd;
}

.roulette-canvas.segments-extreme {
    /* 50セグメント以上 */
    border: none;
    filter: contrast(1.1);
}

/* 中心点のバリエーション */
.center-point.active {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    transform: scale(1.2);
    box-shadow: 
        0 0 10px rgba(255, 107, 107, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.2);
}

.center-point.pulse {
    animation: centerPulse 1s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
    }
    50% { 
        transform: scale(1.3); 
        opacity: 0.8;
    }
}

/* ポインター（矢印）のバリエーション */
.pointer.animated {
    animation: pointerWobble 2s ease-in-out infinite;
}

@keyframes pointerWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

/* 当選時のエフェクト */
.roulette-wrapper.winner {
    animation: winnerGlow 1s ease-in-out;
}

@keyframes winnerGlow {
    0%, 100% { 
        filter: brightness(1) saturate(1); 
    }
    50% { 
        filter: brightness(1.2) saturate(1.3); 
    }
}

/* 結果表示のアニメーション */
.result-display.show-result {
    animation: resultSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.7) rotateX(-10deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px) scale(1.15) rotateX(2deg);
    }
    75% {
        transform: translateY(2px) scale(1.02) rotateX(-1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.05) rotateX(0deg);
    }
}

/* セグメントテキストのプレビュー */
.segment-preview {
    max-width: 200px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    margin-top: 10px;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.segment-preview-item {
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 2px;
}

/* ルーレット読み込み中のスケルトン */
.roulette-skeleton {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 2s infinite;
}

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* パフォーマンス最適化 */
.roulette-canvas {
    /* GPUアクセラレーション */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 回転中のパフォーマンス最適化 */
.spinning .roulette-canvas {
    will-change: transform;
}

/* 停止時のパフォーマンス最適化 */
.stopped .roulette-canvas {
    will-change: auto;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
    .roulette-canvas {
        border: 2px solid #000;
        filter: contrast(1.5);
    }
    
    .center-point {
        border: 2px solid #000;
    }
    
    .pointer {
        text-shadow: 1px 1px 0 #000;
    }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
    .roulette-canvas,
    .center-point,
    .pointer,
    .roulette-wrapper.spinning .center-point,
    .roulette-wrapper.spinning .pointer {
        animation: none;
        transition: none;
    }
    
    .spinning .roulette-canvas {
        /* 回転の代わりに点滅で状態を示す */
        animation: reduceMotionBlink 0.5s infinite alternate;
    }
}

@keyframes reduceMotionBlink {
    from { opacity: 1; }
    to { opacity: 0.7; }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .roulette-canvas {
        background: #2a2a2a;
        border-color: #444;
    }
    
    .center-point {
        background: linear-gradient(135deg, #555, #777);
        border-color: #666;
    }
    
    .segment-preview {
        background: #333;
        border-color: #555;
        color: #fff;
    }
}