/* Seasonal edition. The classic soundboard keeps its existing layout. */
:root{--c-halloween:#ff9e50}
.edition-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:22px;padding-bottom:19px}
.edition-label{margin:0 auto 0 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.edition-switch{order:2;flex:1 1 100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;border:1px solid var(--line);background:var(--panel);padding:6px;border-radius:12px;min-width:0}
.edition-switch button,.edition-switch a,.edition-share{appearance:none;cursor:pointer;font:600 13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;border:0;border-radius:8px;padding:10px 12px;background:transparent;color:var(--muted);min-height:44px}
.edition-switch button,.edition-switch a{display:flex;justify-content:center;align-items:center;gap:7px;min-width:0;text-align:center;text-decoration:none}
.edition-switch a{border:1px solid color-mix(in srgb,var(--edition-color) 24%,transparent);background:color-mix(in srgb,var(--edition-color) 8%,transparent);color:var(--edition-color)}
.edition-quiz{--edition-color:#d3adff}.edition-funny{--edition-color:#ffdb70}.edition-dj{--edition-color:#78e3df}
.edition-switch a span{font-size:12px;opacity:.7}
.edition-switch button[aria-pressed="true"]{background:#33303b;color:#fff4e9;box-shadow:0 1px 4px #0003}
.edition-switch button:hover,.edition-share:hover{color:var(--text)}
.edition-switch a:hover{border-color:var(--edition-color);background:color-mix(in srgb,var(--edition-color) 15%,transparent)}
.edition-share{border:1px solid var(--line);background:var(--panel);white-space:nowrap}
.edition-switch button:focus-visible,.edition-switch a:focus-visible,.edition-share:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.haunt-art{display:none}
.haunt-board-heading[hidden]{display:none!important}
.pad-detail{font-size:10px;font-weight:500;line-height:1.35;opacity:.7}
.emo .halloween-sound-icon{display:block;width:42px;height:42px;flex:none;overflow:visible}
body[data-season="classic"] .emo .halloween-sound-icon{width:1em;height:1em}
.season-inline{appearance:none;background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.edition-share-link{flex:1 1 100%;min-width:0;width:100%;padding:9px 12px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;font:12px system-ui}

/* Keep board navigation beside the pads without a separate masthead. */
#board{scroll-margin-top:72px}
#board>.edition-bar{max-width:none;padding:0 0 12px;margin:0 0 12px;gap:0;border-bottom:1px solid var(--line)}
#board .edition-switch{order:0;flex:1 1 100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:4px;border-radius:10px}
#board .edition-switch button,#board .edition-switch a{min-height:44px;padding:8px 6px;font-size:12px;gap:4px}
#board .edition-share{font-size:12px;padding:8px 10px;min-height:36px}
#board .edition-share-link{order:1;margin-top:8px}
@media(max-width:800px){#board .edition-switch{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){#board>.edition-bar{padding:0 0 10px;margin-bottom:10px}#board .edition-switch button,#board .edition-switch a{font-size:11px;padding:7px 5px}#board .edition-switch a{grid-column:auto}#board .controls .btn{flex:1 1 calc(33.333% - 7px);min-width:0;min-height:36px;font-size:12px;padding:8px 7px;gap:4px;white-space:nowrap}}
@media(max-width:359px){#board .edition-switch{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-season="halloween"]{
  --bg:#100d15;--panel:#19151f;--panel2:#231d2b;--line:#382d42;
  --text:#f6efdf;--muted:#aaa0b5;--accent:#ffae62;--c-halloween:#ff9e50;
  background:radial-gradient(850px 650px at 84% 9%,#35203b66,transparent 74%),radial-gradient(900px 800px at 8% 35%,#4c24251a,transparent 80%),var(--bg);
}
body[data-season="halloween"] .edition-label{color:#b9a7bd}
body[data-season="halloween"] .edition-switch{border-color:#443346;background:#19141e}
body[data-season="halloween"] .edition-switch button[aria-pressed="true"]{background:#df813d;color:#160f11;box-shadow:inset 0 1px #ffc08155}
body[data-season="halloween"] .edition-share{border-color:#443346;background:#1c1622;color:#d5c6d8}
body[data-season="halloween"] .hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:0;margin-bottom:30px;max-width:1148px;min-height:352px;
  padding:36px 44px 32px;border:1px solid #4f3544;border-radius:24px;
  background:radial-gradient(ellipse at 88% 35%,#58334366,transparent 56%),linear-gradient(115deg,#231a2b 3%,#2a1a30 55%,#342031);
  box-shadow:inset 0 1px #f9d7ba08,0 20px 65px #0002;
}
body[data-season="halloween"] .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 46% 22%,#ffe4b6 0 1px,transparent 1.7px),radial-gradient(circle at 54% 77%,#db9560 0 1px,transparent 1.7px),radial-gradient(circle at 95% 72%,#ffe4b6 0 1px,transparent 1.7px);opacity:.5}
body[data-season="halloween"] .hero>.eyebrow{position:relative;z-index:1;display:table;margin-bottom:17px;padding:4px 9px;border:1px solid #b27c4b55;border-radius:5px;color:#ffd0a0;font-size:10px;font-weight:700;letter-spacing:.16em;background:#6d392024}
body[data-season="halloween"] .hero h1{position:relative;z-index:1;max-width:62%;font-size:clamp(40px,4.6vw,62px);line-height:1.03;letter-spacing:-.045em;color:#fff1dc;margin-bottom:16px;font-weight:800}
body[data-season="halloween"] .hero h1 span{color:#ffac62;font-size:.55em;letter-spacing:-.025em;margin-top:8px;line-height:1.18}
body[data-season="halloween"] .hero .lede{position:relative;z-index:1;width:54%;max-width:510px;font-size:14px;line-height:1.7;color:#c6b6ca;margin-bottom:21px}
body[data-season="halloween"] .hero .jump{position:relative;z-index:1;max-width:59%;gap:7px}
body[data-season="halloween"] main .jump a{font-size:11px;background:#1b1424a8;border-color:#614253;color:#e6cfcb;padding:6px 10px}
body[data-season="halloween"] main .jump a:first-child{background:#ee974d;border-color:#ee974d;color:#24141a;font-weight:750}
body[data-season="halloween"] main .jump a:hover{border-color:#ffbd7d}
body[data-season="halloween"] .haunt-art{display:block;position:absolute;inset:0 0 0 auto;width:49%;z-index:0;background:url("../images/soundboard-halloween.svg") right bottom/contain no-repeat;pointer-events:none}
body[data-season="halloween"] .board{background:linear-gradient(155deg,#1b1621,#151119);border:1px solid #3e3046;border-radius:22px;padding:23px;box-shadow:0 18px 60px #0003}
body[data-season="halloween"] .haunt-board-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 24px}
body[data-season="halloween"] .haunt-board-heading .eyebrow{font-size:9px;letter-spacing:.16em;font-weight:700;color:#ca986b;margin-bottom:5px}
body[data-season="halloween"] .haunt-board-heading h2{font-size:28px;letter-spacing:-.04em;line-height:1.1;margin:0;font-weight:750;color:#f5e8da}
body[data-season="halloween"] .haunt-board-heading>p{color:#a395ae;font-size:11px;line-height:1.5;margin:0 0 3px;text-align:right}
body[data-season="halloween"] .bar{gap:16px;margin-bottom:15px}
body[data-season="halloween"] .tabs{gap:5px}
body[data-season="halloween"] .tab{font-size:11px;line-height:1.1;padding:9px 12px;border-radius:7px;background:transparent;border-color:transparent;color:#b0a0bb}
body[data-season="halloween"] .tab:hover{background:#302238;color:#f4e8dc}
body[data-season="halloween"] .tab[aria-selected="true"]{color:#ffe0b8;background:#473026;border-color:#855332}
body[data-season="halloween"] .search{font-size:12px;background:#100e15;border-color:#392b41;border-radius:8px;padding:9px 13px;max-width:210px}
body[data-season="halloween"] .search::placeholder{color:#8f819a}
body[data-season="halloween"] .controls{padding:12px 13px;margin-bottom:18px;font-size:12px;background:#100e15;border-color:#34273b;border-radius:9px;color:#b5a7bd;gap:10px 20px}
body[data-season="halloween"] .controls .btn{font-size:11px;border-radius:6px;padding:8px 11px;background:#241b2b;border-color:#46304a;color:#d3bfd9}
body[data-season="halloween"] .controls .btn.stop{color:#ffa597;border-color:#743e45;background:#382029}
body[data-season="halloween"] .controls .btn.rec[aria-pressed="true"]{background:#a22c3b;color:#fff;border-color:#ce4557}
body[data-season="halloween"] .controls input[type=range]{height:4px;width:100px}
body[data-season="halloween"] .controls input[type=checkbox]{width:13px;height:13px}
body[data-season="halloween"] kbd{font-size:10px;padding:2px 4px;background:#312339;border-color:#59405f;color:#d9c6dd}
body[data-season="halloween"] .grid[data-seasonal="true"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
body[data-season="halloween"] .grid[data-seasonal="true"] .pad{aspect-ratio:auto;min-height:157px}
body[data-season="halloween"] .pad{--tile-bg:#2e2029;--tile-line:#694338;--tile-accent:#f7b276}
body[data-season="halloween"] .pad:nth-child(4n+2){--tile-bg:#292032;--tile-line:#58436c;--tile-accent:#c8a1e9}
body[data-season="halloween"] .pad:nth-child(4n+3){--tile-bg:#23302b;--tile-line:#405d4d;--tile-accent:#a3c993}
body[data-season="halloween"] .pad:nth-child(4n+4){--tile-bg:#302329;--tile-line:#73454b;--tile-accent:#e8a197}
body[data-season="halloween"] .pad-hit{padding:37px 12px 16px;gap:9px;align-items:center;justify-content:center;color:#f7e9dd;border:1px solid var(--tile-line);border-radius:12px;background:radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--tile-accent) 9%,transparent),transparent 78%),var(--tile-bg);box-shadow:inset 0 1px #fff1e509,0 3px 0 #08060c;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
body[data-season="halloween"] .pad-hit:hover{border-color:var(--tile-accent);filter:none;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--tile-accent) 16%,transparent),transparent 90%),var(--tile-bg);box-shadow:inset 0 1px #fff1e509,0 3px 0 #08060c,0 5px 20px #0002;transform:translateY(-2px)}
body[data-season="halloween"] .pad-hit:active,body[data-season="halloween"] .pad.playing .pad-hit,body[data-season="halloween"] .pad.looping .pad-hit{transform:translateY(2px);border-color:var(--tile-accent);background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--tile-accent) 26%,transparent),transparent 95%),var(--tile-bg);box-shadow:inset 0 0 20px #0001,0 1px 0 #08060c;filter:none}
body[data-season="halloween"] .pad.playing::after,body[data-season="halloween"] .pad.looping::after{inset:-3px;border-radius:15px;border:1px solid var(--tile-accent);opacity:.5;animation:none}
body[data-season="halloween"] .pad .emo{font-size:37px;filter:drop-shadow(0 3px 8px #0003);line-height:1.1}
body[data-season="halloween"] .pad .nm{font-size:14px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
body[data-season="halloween"] .pad .pad-detail{color:var(--tile-accent);font-size:9px;font-weight:500;letter-spacing:.05em;opacity:.78;margin-top:-3px}
body[data-season="halloween"] .pad .key{top:10px;left:11px;font-size:9px;padding:4px 5px;border:1px solid #ffffff13;background:#0002;color:#b2a2ba;min-width:20px}
body[data-season="halloween"] .pad-dl,body[data-season="halloween"] .pad-fav{top:8px;width:25px;height:25px;color:#b9a7bd;background:transparent;opacity:.75;font-size:13px;border-radius:5px}
body[data-season="halloween"] .pad-dl{right:8px}
body[data-season="halloween"] .pad-fav{right:34px;font-size:15px}
body[data-season="halloween"] .pad-dl:hover,body[data-season="halloween"] .pad-fav:hover{background:#0003;color:#fff1d9;opacity:1}
body[data-season="halloween"] .pad-fav[aria-pressed="true"]{background:#c7864122;color:#ffca74;opacity:1}
body[data-season="halloween"] .pad.looping .pad-hit::after{font-size:8px;bottom:6px;color:var(--tile-accent)}
body[data-season="halloween"] .hint{font-size:11px;line-height:1.8;color:#9d8ca7;margin-top:18px}
body[data-season="halloween"] .content p,body[data-season="halloween"] .content li{color:#c4b6ca}
body[data-season="halloween"] .cat,body[data-season="halloween"] .content details{background:#1b1520}
body[data-season="halloween"] .sb-ad{background:#130f19}
body[data-season="halloween"]>.homepage-content{background:#18131e;border-color:#382b42}
body[data-season="halloween"] .toast{background:#302039;border-color:#6a4470;color:#f8e6d5}
body[data-season="halloween"] main :is(button,input,a):focus-visible{outline:2px solid #ffbe7e;outline-offset:4px}

@media (max-width:1200px){
  body[data-season="halloween"] .hero{margin-left:16px;margin-right:16px}
}
@media (max-width:800px){
  .edition-bar{gap:12px}
  body[data-season="halloween"] .hero{padding:30px;min-height:340px}
  body[data-season="halloween"] .hero h1{font-size:45px;max-width:65%}
  body[data-season="halloween"] .hero .lede{width:58%;font-size:13px}
  body[data-season="halloween"] .hero .jump{max-width:66%}
  body[data-season="halloween"] .haunt-art{width:48%;right:-4%;opacity:.85}
  body[data-season="halloween"] .board{padding:18px}
  body[data-season="halloween"] .grid[data-seasonal="true"]{gap:11px}
  body[data-season="halloween"] .grid[data-seasonal="true"] .pad{min-height:146px}
  body[data-season="halloween"] .bar{gap:12px}
  body[data-season="halloween"] .tabs{flex:1 1 100%}
  body[data-season="halloween"] .search{max-width:100%;flex:1}
  body[data-season="halloween"] .controls{gap:12px}
}
@media (max-width:560px){
  .edition-bar{padding-top:17px;padding-bottom:17px;gap:9px;flex-wrap:wrap}
  .edition-label{flex:1 1 auto;font-size:9px;letter-spacing:.14em}
  .edition-switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .edition-switch button,.edition-switch a{font-size:12px;padding:10px 8px}
  .edition-quiz{grid-column:1/-1}
  .edition-share{font-size:11px;padding:11px}
  body[data-season="halloween"] .hero{margin-left:16px;margin-right:16px;margin-bottom:22px;padding:26px 22px 205px;min-height:0;border-radius:18px}
  body[data-season="halloween"] .hero>.eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:16px}
  body[data-season="halloween"] .hero h1{max-width:100%;font-size:43px;margin-bottom:14px;letter-spacing:-.045em}
  body[data-season="halloween"] .hero h1 span{font-size:.48em;margin-top:8px;line-height:1.2;letter-spacing:-.02em}
  body[data-season="halloween"] .hero .lede{width:100%;max-width:100%;font-size:12px;line-height:1.65;margin-bottom:17px}
  body[data-season="halloween"] .hero .jump{max-width:100%;gap:6px}
  body[data-season="halloween"] main .jump a{font-size:10px;padding:5px 8px}
  body[data-season="halloween"] .haunt-art{height:227px;inset:auto -10px 0 auto;width:100%;background-position:center bottom;background-size:auto 255px;opacity:1}
  body[data-season="halloween"] .board{padding:15px 12px;border-radius:16px;margin-top:0}
  body[data-season="halloween"] .haunt-board-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:19px;padding:3px 3px 0}
  body[data-season="halloween"] .haunt-board-heading h2{font-size:27px}
  body[data-season="halloween"] .haunt-board-heading>p{text-align:left;font-size:10px;margin:0}
  body[data-season="halloween"] .haunt-board-heading .eyebrow{font-size:8px}
  body[data-season="halloween"] .tabs{gap:3px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  body[data-season="halloween"] .tab{font-size:11px;padding:9px 10px}
  body[data-season="halloween"] .bar{margin-bottom:12px}
  body[data-season="halloween"] .search{width:100%;max-width:100%;min-width:0}
  body[data-season="halloween"] .controls{gap:12px 10px;padding:11px 10px;margin-bottom:14px;font-size:11px}
  body[data-season="halloween"] .controls label.vol{gap:12px}
  body[data-season="halloween"] .controls input[type=range]{width:auto;height:4px}
  body[data-season="halloween"] .controls .btn{padding:9px 10px;font-size:11px}
  body[data-season="halloween"] .grid[data-seasonal="true"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  body[data-season="halloween"] .grid[data-seasonal="true"] .pad{min-height:149px}
  body[data-season="halloween"] .pad-hit{padding:30px 8px 15px;gap:8px}
  body[data-season="halloween"] .pad .emo{font-size:35px}
  body[data-season="halloween"] .pad .nm{font-size:13px}
  body[data-season="halloween"] .pad .pad-detail{font-size:8px}
  body[data-season="halloween"] .pad-dl,body[data-season="halloween"] .pad-fav{top:7px;width:25px;height:25px;font-size:13px}
  body[data-season="halloween"] .pad-dl{right:6px}
  body[data-season="halloween"] .pad-fav{right:32px;left:auto;font-size:15px}
  body[data-season="halloween"] .pad.looping .pad-hit::after{content:"⟳ looping";font-size:8px;bottom:5px}
  body[data-season="halloween"] .hint{font-size:10px;line-height:1.8;margin:16px 3px 0}
}
@media (prefers-reduced-motion:reduce){
  html[data-season="halloween"]{scroll-behavior:auto!important}
  body[data-season="halloween"] *,body[data-season="halloween"] *::before,body[data-season="halloween"] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}