/* danmaku-effects.css */
@charset "utf-8";

.danmaku-item {
}

/* Hidari / Migi Fixed */
.dm-hidari-fixed {
    transform-origin: center center;
    transform: rotate(-90deg); 
    white-space: nowrap;
}
.dm-migi-fixed {
    transform-origin: center center;
    transform: rotate(90deg); 
    white-space: nowrap;
}

/* Alignment */
.dm-migi { left: auto !important; right: 5% !important; transform: none !important; text-align: right !important; }
.dm-hidari { left: 5% !important; transform: none !important; text-align: left !important; }

/* Color & Decoration */

/* ニュースハイライト */
.news-highlight {
    background-color: rgba(255, 152, 0, 0.4); 
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
}
.news-highlight:hover {
    background-color: rgba(255, 152, 0, 0.7);
}

/* Font Styles */
.dm-italic { font-style: italic; }
.dm-bold { font-weight: bold; }

/* Amikake */
.dm-amikake {
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 2px, transparent 2px, transparent 4px),
                      repeating-linear-gradient(-45deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 2px, transparent 2px, transparent 4px);
    background-color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none !important;
    font-weight: bold;
}
@supports not (background-clip: text) {
    .dm-amikake {
        background: none;
        color: inherit !important;
    }
}

/* Rainbow */
@keyframes rainbow-anim {
    0% { color: #ff0000; }
    14% { color: #ff7f00; }
    28% { color: #ffff00; }
    42% { color: #00ff00; }
    57% { color: #0000ff; }
    71% { color: #4b0082; }
    85% { color: #9400d3; }
    100% { color: #ff0000; }
}
.dm-rainbow { animation: rainbow-anim 3s linear infinite; }

/* Blur */
.dm-blur-weak { filter: blur(2px); }
.dm-blur-strong { filter: blur(5px); }

/* Glow */
.dm-glow { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5) !important; }

/* Vertical */
.dm-vertical { writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }

/* Harf */
.dm-harf-up { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); display: inline-block; }
.dm-harf-down { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); display: inline-block; }
.dm-harf-left { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); display: inline-block; }
.dm-harf-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); display: inline-block; }

/* Animations */

/* Shake */
@keyframes shake-anim {
    0% { transform: translate(0, 0); }
    25% { transform: translate(var(--shake-amp, 2px), var(--shake-amp, 2px)); }
    50% { transform: translate(calc(var(--shake-amp, 2px) * -1), calc(var(--shake-amp, 2px) * -1)); }
    75% { transform: translate(var(--shake-amp, 2px), calc(var(--shake-amp, 2px) * -1)); }
    100% { transform: translate(0, 0); }
}
.dm-shake { display: inline-block; animation: shake-anim 0.1s linear infinite; }

@keyframes shake-fixed-anim {
    0% { transform: translateX(-50%) translate(0, 0); }
    25% { transform: translateX(-50%) translate(var(--shake-amp, 2px), var(--shake-amp, 2px)); }
    50% { transform: translateX(-50%) translate(calc(var(--shake-amp, 2px) * -1), calc(var(--shake-amp, 2px) * -1)); }
    75% { transform: translateX(-50%) translate(var(--shake-amp, 2px), calc(var(--shake-amp, 2px) * -1)); }
    100% { transform: translateX(-50%) translate(0, 0); }
}
.dm-shake-fixed { animation: shake-fixed-anim 0.1s linear infinite; }

/* Dance */
@keyframes dance-anim {
    0% { transform: skew(0deg, 0deg); }
    25% { transform: skew(calc(var(--dance-x, 15deg) * -1), 0deg); }
    37% { transform: skew(0deg, calc(var(--dance-mag, 15deg) * -0.5)); }
    50% { transform: skew(0deg, 0deg); }
    63% { transform: skew(0deg, calc(var(--dance-mag, 15deg) * 0.5)); }
    75% { transform: skew(var(--dance-x, 15deg), 0deg); }
    100% { transform: skew(0deg, 0deg); }
}
.dm-dance {
    display: inline-block;
    transform-origin: bottom center; 
    animation: dance-anim 0.5s ease-in-out infinite;
}

/* Hirahira */
@keyframes hirahira-anim {
    0% { transform: perspective(500px) rotate3d(var(--hh-x), var(--hh-y), 0, 0deg); }
    25% { transform: perspective(500px) rotate3d(var(--hh-x), var(--hh-y), 0, var(--hh-amp)); }
    50% { transform: perspective(500px) rotate3d(var(--hh-x), var(--hh-y), 0, 0deg); }
    75% { transform: perspective(500px) rotate3d(var(--hh-x), var(--hh-y), 0, calc(var(--hh-amp) * -1)); }
    100% { transform: perspective(500px) rotate3d(var(--hh-x), var(--hh-y), 0, 0deg); }
}
.dm-hirahira {
    display: inline-block;
    animation-name: hirahira-anim;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Glitchnoize */
@keyframes glitch-anim {
    0% { transform: translate(0); text-shadow: none; }
    20% { transform: translate(-2px, 2px); text-shadow: 2px 0 red, -2px 0 blue; }
    40% { transform: translate(2px, -2px); text-shadow: -2px 0 red, 2px 0 blue; }
    60% { transform: translate(-2px, -2px); text-shadow: 0 0 transparent; }
    80% { transform: translate(2px, 2px); text-shadow: 1px 0 red, -1px 0 blue; }
    100% { transform: translate(0); }
}
.dm-glitch {
    display: inline-block;
    animation: glitch-anim 0.2s steps(2) infinite;
}

/* Scratch */
/* 修正: ハイライト(影)なし、黒背景、黒文字 */
.dm-scratch {
    background-color: black !important;
    color: black !important;
    text-shadow: none !important;
    transition: color 0.3s ease;
    user-select: none; /* テキスト選択ハイライト防止 */
    pointer-events: auto !important;
    padding: 0 4px;
    border-radius: 2px;
    cursor: pointer;
}
/* クリック時のみ文字を白く */
.dm-scratch-revealed {
    color: white !important;
}

/* Hacker */
@keyframes blink-cursor {
    50% { opacity: 0; }
}
.dm-hacker {
    background-color: black !important;
    color: #00ff00 !important;
    font-family: 'Courier New', monospace !important;
    padding: 2px 5px;
    display: inline-block;
    border: 1px solid #00ff00;
}
.dm-hacker::after {
    content: '_';
    display: inline-block;
    margin-left: 2px;
    animation: blink-cursor 0.8s step-end infinite;
}

/* Karaoke */
@keyframes karaoke-fill {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
.dm-karaoke {
    background-image: linear-gradient(var(--k-dir), var(--primary-orange) 50%, white 50%);
    background-size: 200% 200%; 
    background-position: 100% 0; 
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none !important; 
    
    animation: karaoke-fill var(--k-dur) linear forwards;
}

/* Hall Backgrounds */
@keyframes rainbow-bg-anim {
    0% { background-color: rgba(255,0,0,0.3); }
    20% { background-color: rgba(255,255,0,0.3); }
    40% { background-color: rgba(0,255,0,0.3); }
    60% { background-color: rgba(0,255,255,0.3); }
    80% { background-color: rgba(0,0,255,0.3); }
    100% { background-color: rgba(255,0,255,0.3); }
}
.rainbow-bg { animation: rainbow-bg-anim 2s linear infinite !important; }

.red-bg { background-color: rgba(255, 0, 0, 0.3) !important; }
.blue-bg { background-color: rgba(0, 0, 255, 0.3) !important; }
.green-bg { background-color: rgba(0, 128, 0, 0.3) !important; }
.orange-bg { background-color: rgba(255, 165, 0, 0.3) !important; }
.pink-bg { background-color: rgba(255, 192, 203, 0.3) !important; }
.white-bg { background-color: rgba(255, 255, 255, 0.3) !important; }
.black-bg { background-color: rgba(0, 0, 0, 0.5) !important; }
.yellow-bg { background-color: rgba(255, 255, 0, 0.3) !important; }
.cyan-bg { background-color: rgba(0, 255, 255, 0.3) !important; }
.purple-bg { background-color: rgba(128, 0, 128, 0.3) !important; }