/* Rainbow Magic Pro — External CSS (extracted from inline for cacheability) */

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-classic.woff2') format('woff2');
    font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-modern.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('fonts/dancing-playful.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/cinzel-luxury.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat-handwritten.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

#rmp-text { text-wrap: balance !important; word-break: keep-all !important; }
#br-canvas, .rmp-thumb, .rmp-nav-btn, .rmp-topic-badge { will-change: transform, opacity; }

.SkeletonBackground {
    background-color: #1c1a17;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
}

.f-classic #rmp-text { font-family: 'Playfair Display', serif !important; font-style: italic; font-weight: 600; }
.f-classic #rmp-author { font-family: 'Playfair Display', serif !important; font-style: normal; font-weight: 700; letter-spacing: 3px; }
.f-modern #rmp-text { font-family: 'Inter', sans-serif !important; font-style: normal; font-weight: 800; letter-spacing: -0.5px; }
.f-modern #rmp-author { font-family: 'Inter', sans-serif !important; font-weight: 700; letter-spacing: 2px; }
.f-playful #rmp-text { font-family: 'Dancing Script', cursive !important; font-weight: 700; }
.f-playful #rmp-author { font-family: 'Dancing Script', cursive !important; font-weight: 700; letter-spacing: 1px; }
.f-bold #rmp-text { font-family: 'Montserrat', sans-serif !important; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; line-height: 1.3; }
.f-bold #rmp-author { font-family: 'Montserrat', sans-serif !important; font-weight: 800; letter-spacing: 2px; }
.f-luxury #rmp-text { font-family: 'Cinzel', serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.f-luxury #rmp-author { font-family: 'Cinzel', serif !important; font-weight: 700; letter-spacing: 4px; }
.f-handwritten #rmp-text { font-family: 'Caveat', cursive !important; font-weight: 700; line-height: 1.2; }
.f-handwritten #rmp-author { font-family: 'Caveat', cursive !important; font-weight: 700; letter-spacing: 2px; }

#quote-glass-box { padding: 0; border-radius: 16px; transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease; }
.s-none #quote-glass-box { background: transparent; }
.s-glass #quote-glass-box { background: rgba(20,15,10,0.40); border: 1px solid rgba(255,255,255,0.16); padding: 7cqw 6cqw; box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.s-amber #quote-glass-box { background: rgba(245,158,11,0.93); padding: 7cqw 6cqw; box-shadow: 0 8px 30px rgba(0,0,0,0.28); }
.s-amber #rmp-text { color: #1c1410 !important; text-shadow: none !important; }
.s-amber #rmp-author { color: #3a2a08 !important; text-shadow: none !important; opacity: 1; }
.s-highlight #quote-glass-box { background: transparent; }
.s-highlight #rmp-text { display: inline; background: rgba(20,15,10,0.82); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.15em 0.4em; line-height: 1.9 !important; text-shadow: none !important; }
.s-mark #quote-glass-box { background: transparent; position: relative; padding-top: 8cqw; }
.s-mark #quote-glass-box::before { content: '\201C'; position: absolute; top: -2cqw; left: 50%; transform: translateX(-50%); font-family: 'Playfair Display', serif; color: #f59e0b; font-size: 16cqw; line-height: 0.7; pointer-events: none; }
.s-mark #quote-glass-box::after { content: ''; position: absolute; bottom: -3.5cqw; left: 50%; transform: translateX(-50%); width: 9cqw; height: 0.6cqw; min-height: 3px; background: #f59e0b; border-radius: 2px; }

.rmp-thumb { border: 2px solid transparent; border-radius: 14px; padding: 2px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.06); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; }
.rmp-thumb:hover { transform: scale(1.06); }
.rmp-thumb.active { border-color: #f59e0b; transform: scale(1.03); }

.rmp-nav-btn { background: #fff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 3px 8px rgba(0,0,0,0.05); transition: all 0.2s ease; }
.rmp-nav-btn svg { width: 22px; height: 22px; fill: #495057; transition: fill 0.2s; }
.rmp-nav-btn:hover { background: #f59e0b; border-color: #f59e0b; transform: scale(1.08); }
.rmp-nav-btn:hover svg { fill: #fff; }

.rmp-topic-badge { background: rgba(0,0,0,0.04); color: #57534e !important; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: 20px; text-decoration: none !important; border: 1px solid transparent; text-transform: lowercase; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.rmp-topic-badge:hover { background: #f59e0b !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,0.28); }

.rmp-topic-badge:nth-child(n+4) { display: none !important; }
@media (min-width: 481px) {
    .rmp-topic-badge:nth-child(n+4) { display: inline-block !important; }
    .rmp-canvas-outer-container { border-radius: 24px !important; }
}
@media (max-width: 480px) {
    .rmp-canvas-outer-container { border-radius: 18px !important; }
}