/* The seasonal stage sits above a clear, consistent working surface. */
:root{--season-accent:#995322;--season-light:#fff0da;--season-art:url('./halloween-lavender.webp')}
body{background:#f8f6fa}
body header{padding-top:30px;padding-bottom:30px;min-height:206px;background:linear-gradient(110deg,#fff 0%,#fbf5fd 65%,var(--season-light));border-bottom:1px solid #ddcde5}
body header::before{inset:0 0 0 45%;opacity:1;background-image:linear-gradient(90deg,#fbf5fd 0%,#fbf5fd10 45%),var(--season-art);background-size:100% 100%,auto 390px;background-position:center,right bottom;background-repeat:no-repeat}
body .header-inner{position:relative;z-index:1;align-items:center;justify-content:flex-start;gap:24px}
body header .header-copy p{font-size:.875rem;font-weight:700;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;color:var(--season-accent);margin-bottom:14px;padding:5px 0}
body header .header-copy p::before{display:none}
body header .header-copy h1{font-size:clamp(1.9rem,3.7vw,2.7rem);line-height:1.4;letter-spacing:.015em;max-width:600px;color:#3e244b}
body .header-title-accent{color:#895598}
body header .header-copy small{font-size:.9375rem;color:#725d7c;letter-spacing:.06em;margin-top:13px}
body .header-yukko{width:116px;height:116px;flex:none;margin:0;object-fit:contain;padding:5px;background:#fff;border:1px solid #e5d7ec;border-radius:50%;mix-blend-mode:normal;filter:none;-webkit-mask-image:none;mask-image:none}
body header>.header-birds{width:130px;right:max(24px,calc((100vw - 1000px)/2));bottom:10px;z-index:2;filter:drop-shadow(0 4px 6px #4d244820)}
body .halloween-band{height:54px;background:#432550;position:relative;border:0}
body .halloween-band::before,body .halloween-band::after{display:none}
body .season-caption{display:flex;align-items:center;max-width:1000px;height:100%;margin:auto;padding-right:300px;color:#f8e1bd;font-size:.875rem;font-weight:600;letter-spacing:.12em;position:relative;z-index:1}
body .halloween-candy{width:320px;max-width:none;left:auto;right:max(24px,calc((100vw - 1000px)/2));top:50%;transform:translateY(-50%);opacity:1}
html:not([data-season="halloween"]) .halloween-candy{display:none}
html:not([data-season="halloween"]) .halloween-band{background:var(--season-light)}
html:not([data-season="halloween"]) .season-caption{color:var(--season-accent);padding-right:0}
body main{padding-top:24px}
body .search,body .filters{border:1px solid #e1d5e8;box-shadow:0 12px 35px #40224908;border-radius:16px;border-top:3px solid #694279}
body .search>label,body .filters>label{font-size:1.125rem;letter-spacing:.03em}
body .mood-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body .mood-options button{padding:9px 6px;border-radius:8px;background:#fff;border-color:#dfd0e7;box-shadow:none;white-space:nowrap}
body .mood-options button.active{background:var(--plum);border-color:var(--plum)}
body .tag-entry{background:#eee5f3;border:1px solid #e4d7ec;border-radius:12px;padding:18px 24px}
body .spotlight{gap:20px}
body .spotlight .panel{border-radius:16px;padding:24px}
body .spotlight .panel:first-child{background:linear-gradient(125deg,#392044,#6a407d);position:relative;overflow:hidden;border:1px solid #5d376e}
body .spotlight .panel:first-child::after{content:'♪';position:absolute;right:16px;bottom:0;font-family:serif;font-size:8rem;line-height:1;color:#ffffff09;pointer-events:none}
body .spotlight .panel:first-child h2{color:#e8c6ee;letter-spacing:.07em;font-size:.875rem}
body .spotlight .panel:first-child .featured{font-size:1.5rem;margin-top:20px}
body .spotlight .panel:first-child button{position:relative;z-index:1}
body .roulette-panel{overflow:hidden}
body .roulette-intro{min-height:122px;padding-right:178px}
body .spotlight .roulette-intro h2{font-size:1rem;color:#593166}
body .spotlight .roulette-intro p{margin-bottom:13px}
body .roulette-stage{position:static;margin-top:0;padding:0;display:none}
body .roulette-panel.has-result .roulette-stage{display:block;margin-top:18px;padding:18px 0 0;min-height:0;border-top:1px solid #e4d6eb}
body .roulette-decoration{position:absolute;top:26px;right:14px;bottom:auto;width:172px;height:122px;display:block;opacity:1;gap:0;animation:none;z-index:1;pointer-events:none}
body .roulette-birds{position:absolute;width:172px;height:auto;right:0;bottom:0;filter:drop-shadow(0 8px 7px #623c7520);transform-origin:50% 85%}
body .roulette-sparkles{position:absolute;inset:0;text-align:center;color:var(--season-accent);font-size:1.8rem;letter-spacing:.12em;opacity:0}
body .roulette-panel.has-birds .roulette-decoration{opacity:1;animation:none}
body .roulette-panel.has-birds .roulette-birds{animation:big-bird-bounce 1.2s cubic-bezier(.22,.8,.32,1) both}
body .roulette-panel.is-spinning .roulette-birds{animation:bird-anticipation .36s ease-in-out infinite alternate}
body .roulette-panel.is-festive{border-color:#c2924d;box-shadow:0 8px 30px #8c5a291e;background:linear-gradient(125deg,#fff,var(--season-light))}
body .roulette-panel.is-festive .roulette-sparkles{opacity:1;animation:party-notes 1.7s ease-out both}
body .roulette-panel.is-festive::before{display:none}
body .roulette-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
body .roulette-confetti i{position:absolute;top:12%;left:var(--x);width:6px;height:13px;background:#b079c9;opacity:0;border-radius:1px}
body .roulette-confetti i:nth-child(3n){background:#efad40}
body .roulette-confetti i:nth-child(3n+1){background:#e777ac}
body .roulette-confetti i:nth-child(4n){width:9px;height:5px;background:#62adbd}
body .is-festive .roulette-confetti i{animation:party-confetti 1.8s var(--delay) ease-out both}
body .roulette-motion-choice{font-size:.875rem;margin-top:12px}
body .spotlight .panel #roulette .featured{font-size:1.3rem;line-height:1.6}
body .result-head,body .section-head{border-bottom:2px solid #d4bedf;padding-bottom:14px}
body .artist-heading{color:#634374;letter-spacing:.08em;border-bottom:1px solid #e9dfef;padding-bottom:10px}
body .song,body .song:nth-of-type(even){border-radius:10px;border-color:#e6dceb;box-shadow:0 2px 7px #41214e03}
/* Tag room: the same masthead, with quieter compact tools below it. */
body header .inner{min-height:130px;position:relative;z-index:1;gap:26px;flex-wrap:nowrap}
body .tag-header-copy{flex:1;min-width:0}
body .tag-header-copy .season-eyebrow{margin:0 0 12px;color:var(--season-accent);font-size:.875rem;font-weight:700;letter-spacing:.08em}
body header .inner h1{font-size:clamp(1.9rem,3.7vw,2.7rem);line-height:1.4;letter-spacing:.015em;color:#3e244b}
body header .inner .header-birds{position:static;width:156px;flex:none;height:auto;filter:drop-shadow(0 6px 7px #3d23451a)}
body header .inner a{background:#ffffffeb;border:1px solid #d6bfdf;border-radius:9px;padding:10px 16px;min-height:44px;font-size:.875rem}
body .fast-tags{border-top:3px solid #694279;background:linear-gradient(125deg,#fff,#f9f4fc)}
body .card h2{font-size:1.125rem;color:#593166;letter-spacing:.03em}
body .tag-grid .tag{border-radius:9px;padding:15px 14px;min-height:64px;border-color:#e0d2e7;font-size:1rem}
body .tag span{font-size:.875rem}
body .tag:hover{box-shadow:0 3px 10px #4325500b}
body .song-search,body .kira-section{border-radius:14px}
body .intro{font-size:1rem;color:#6c5975}
body .small{font-size:.875rem}
body .top{gap:20px}
@keyframes big-bird-bounce{0%{transform:translateY(8px) scale(.82) rotate(-8deg)}30%{transform:translateY(-22px) scale(1.12) rotate(5deg)}55%{transform:translateY(0) scale(.97) rotate(-3deg)}75%{transform:translateY(-9px) scale(1.04) rotate(2deg)}100%{transform:translateY(0) scale(1)}}
@keyframes bird-anticipation{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(3deg)}}
@keyframes party-notes{0%{opacity:0;transform:translateY(12px) scale(.5)}30%{opacity:1;transform:translateY(-5px) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
@keyframes party-confetti{0%{opacity:0;transform:translate(0,-20px) rotate(0)}10%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--drift),230px) rotate(var(--turn))}}
@media(max-width:650px){
 body header{min-height:180px;padding:23px 18px}
 body header::before{inset:0 0 0 38%;background-size:100% 100%,auto 285px;background-position:center,right bottom}
 body .header-inner{gap:12px;min-height:122px}
 body header .header-copy h1{font-size:clamp(1.5rem,6.2vw,2rem);max-width:250px;line-height:1.45}
 body header .header-copy p{font-size:.875rem;letter-spacing:0;margin-bottom:10px}
 body header .header-copy p::before{width:14px}
 body header .header-copy small{font-size:.875rem;letter-spacing:0;margin-top:10px}
 body .header-yukko{width:80px;height:80px;margin:0;padding:4px}
 body header>.header-birds{width:92px;right:18px;bottom:6px}
 body .halloween-band{height:44px}
 body .season-caption{font-size:.875rem;padding:0 140px 0 18px;letter-spacing:0;line-height:1.4}
 body .halloween-candy{right:8px;width:148px}
 body main{padding-top:18px}
 body .mood-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 body .mood-options button{font-size:.875rem;padding:9px 3px}
 body .spotlight .panel{padding:20px}
 body .roulette-intro{padding-right:118px;min-height:116px}
 body .roulette-decoration{top:32px;right:9px;width:122px;height:87px}
 body .roulette-birds{width:122px}
 body .roulette-sparkles{font-size:1.25rem}
 body .roulette-panel.has-result .roulette-stage{padding:16px 0 0;margin-top:16px}
 body .spotlight .panel #roulette .featured{font-size:1.25rem}
 body .roulette-motion-choice{font-size:.875rem}
 body header .inner{gap:12px;min-height:132px;flex-wrap:wrap}
 body .tag-header-copy{flex:1 1 180px}
 body header .inner h1{font-size:clamp(1.5rem,6.2vw,2rem)}
 body .tag-header-copy .season-eyebrow{font-size:.875rem;margin-bottom:10px;letter-spacing:0}
 body header .inner .header-birds{width:90px}
 body header .inner a{padding:8px 12px;font-size:.875rem;margin-top:2px}
 body .top{gap:12px}
 body .tag-grid .tag{padding:13px 12px;min-height:60px}
}
@media(max-width:360px){body .roulette-intro{padding-right:106px}body .roulette-decoration,body .roulette-birds{width:110px}body .header-yukko{width:68px;height:68px}body .season-caption{padding-right:125px}body .halloween-candy{width:130px}}
@media(prefers-reduced-motion:reduce){body .roulette-birds,body .roulette-sparkles,body .roulette-confetti i{animation:none!important}body .roulette-confetti{display:none}}

body .hero-break{display:none}
@media(max-width:650px){body .hero-break{display:block}}

/* One plum top edge marks the major tool sections on both pages. */
body .search,body .filters,body .tag-entry,body .spotlight .panel,
body .spotlight .panel:first-child,body .roulette-history,body main .card{
 border-top:3px solid #694279;
}
body .result-head,body .section-head{
 border-top:3px solid #694279;border-bottom:1px solid #ded2e4;padding-top:16px;
}