/* The Halloween takeover: midnight plum, candlelight, and a few things in the dark. */
body.halloween {
  --bg:#100d16;
  --panel:#1b1522;
  --line:#3a2a40;
  --muted:#b8a8bd;
  --text:#f7eee4;
  --lime:#ffb365;
  --season-purple:#c3a1ef;
  background:
    radial-gradient(ellipse at 83% 14%,#4b214425,transparent 33%),
    radial-gradient(ellipse at 0 38%,#6e361711,transparent 29%),
    var(--bg);
  color:var(--text);
  accent-color:var(--lime);
}

/* A quiet seasonal scene; all illustration stays behind the readable copy. */
body.halloween .halloween-banner {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:158px;
  margin:24px 56px 0;
  padding:24px 30px;
  border:1px solid #785139;
  border-radius:12px;
  background:linear-gradient(105deg,#302032 0%,#251a31 43%,#1c1728 100%);
  box-shadow:inset 0 1px 0 #ffcc9b0b,0 12px 38px #0002;
}
body.halloween .halloween-banner:before {
  content:'';
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,#302032 0%,#302032f5 26%,#30203266 50%,transparent 70%);
}
body.halloween .halloween-banner:after {
  content:'';
  pointer-events:none;
  position:absolute;
  top:-41px;
  left:-41px;
  width:124px;
  height:124px;
  border-radius:50%;
  border:1px solid #ffca9226;
  background:repeating-radial-gradient(circle at 0 0,transparent 0 22px,#ffca921b 23px 24px,transparent 25px 42px);
  opacity:.5;
  transform:rotate(-7deg);
  z-index:2;
}
body.halloween .season-copy {position:relative;z-index:2;min-width:0;max-width:465px}
body.halloween .season-kicker {display:block;margin-bottom:6px;color:#ffd0a0;font-size:9px;font-weight:750;letter-spacing:2px}
body.halloween .season-copy .season-title {margin:0;color:#fff2e2;font-family:var(--display);font-size:27px;font-weight:750;letter-spacing:-.7px;line-height:1.18}
body.halloween .season-copy .season-note {margin:8px 0 0;color:#d2bfc8;font-size:11px;line-height:1.6}
body.halloween .season-art {position:absolute;inset:0 64px 0 auto;z-index:0;width:min(77%,1000px);height:100%;max-width:none;object-fit:contain;object-position:right bottom;pointer-events:none}
body.halloween .season-date {position:relative;z-index:2;margin-left:auto;padding-left:24px;color:#ffc184;font-family:var(--display);font-size:12px;line-height:1.9;font-weight:750;letter-spacing:2px;white-space:nowrap;text-align:right;text-shadow:0 2px 12px #100d16}
body.halloween .season-date span {display:block}
body.halloween .season-date b {display:block;font-size:38px;font-weight:650;line-height:1;letter-spacing:-1px}

/* The familiar hub, lit with warmer controls and violet shadows. */
body.halloween .site-header {background:#100d16f5;border-bottom-color:#3b2b42;box-shadow:0 5px 24px #00000012}
body.halloween .brand-mark {filter:drop-shadow(0 0 12px #e8753a20)}
body.halloween .main-nav {color:#c0afc6;scrollbar-color:#76527d transparent}
body.halloween .main-nav::-webkit-scrollbar-thumb {background:#76527d}
body.halloween .main-nav>a.active {color:#fff1e0}
body.halloween #favorite-count {border-color:#62456a;color:#dfcae8;background:#241c2c}
body.halloween .header-cta {border-color:#654331;color:#f4d2b3;background:#241a21}
body.halloween .header-cta:hover {background:#39252a;border-color:#b47748}
body.halloween .hero {padding-top:42px}
body.halloween .hero .eyebrow {color:#cbb9d0}
body.halloween .hero h1 {color:#fff1e4;font-size:clamp(46px,4.6vw,70px)}
body.halloween .hero-copy>p {color:#c4b3c7}
body.halloween .play-word {text-shadow:0 0 30px #ef7a3514}
body.halloween .status-dot {box-shadow:0 0 9px #ff9c3426}
body.halloween .primary {background:var(--lime);color:#291509;box-shadow:0 3px 18px #d56c2110}
body.halloween .primary:hover {background:#ffc58b;color:#291509}
body.halloween .text-button {color:#d8c5dc}
body.halloween .text-button:hover {background:#281e31;color:#f7e6ff}
body.halloween .hero-caption {color:#aa96b1}
body.halloween .hero-caption b {color:#d9c8df}
body.halloween .spotlight {background:#2b1e32;border-color:#7b513f66;box-shadow:0 16px 55px #0005,0 0 0 4px #ffad5f03}
body.halloween .spotlight-shade {background:linear-gradient(180deg,#160d2533,transparent 27%,#160e1d33 43%,#120c19f5 100%)}
body.halloween .feature-badge {background:#211427db;color:#efdfef;border-color:#d0b4d33b}
body.halloween .season-badge {display:inline-flex;align-items:center;gap:7px;border:1px solid #e9a06499;border-radius:4px;padding:6px 9px;background:#2c1b14e8;color:#ffd7ad;font-size:9px;font-weight:700;letter-spacing:1.2px;line-height:1.55;white-space:nowrap;box-shadow:0 3px 15px #0002}
body.halloween .season-badge>span {background:#ffb365;box-shadow:0 0 7px #ff9d4c66}
body.halloween .spotlight-top:has(.season-badge) .feature-badge:not(.season-badge) {display:none}
body.halloween .feature-index {color:#ead8eb}
body.halloween .spotlight p {color:#e0cfe1}
body.halloween .white {background:#fff0df;color:#291827}
body.halloween .white:hover {background:var(--lime);color:#291509}
body.halloween .feature-dot {background-color:#a18fa9}
body.halloween .feature-dot.selected {background-color:var(--lime)}
body.halloween .collection-strip {color:#bdaac4}
body.halloween .collection-strip svg {color:#c3a1ef}
body.halloween .collection-strip .strip-note {color:#a58bad}
body.halloween .strip-note b {color:#cebad6}
body.halloween .muted {color:#b59abb}
body.halloween .section-top sup {border-color:#5c4066;color:#d4bddf;background:#241b2c}
body.halloween .library-caption,body.halloween .results-bar,body.halloween .library-bottom {color:#b4a0bb}
body.halloween .collection-picks>span {color:#ae95b7}
body.halloween .collection-picks button {background:#251b2e;color:#d4bfe2;border-color:#51365f}
body.halloween .collection-picks button:hover {background:#35223d;color:#f2d7ff;border-color:#906ba3}
body.halloween .collection-picks .season-horror {background:#39251d;border-color:#9e6337;color:#ffd0a0;box-shadow:inset 0 1px 0 #ffcb7b0b}
body.halloween .collection-picks .season-horror:hover {background:#4a2e20;border-color:#ec9a53;color:#ffe1be}
body.halloween .search {background:#1c1524;border-color:#50345a;color:#ba9ec6}
body.halloween .search input {color:#f7eaf9}
body.halloween .search input::placeholder {color:#ad96b6}
body.halloween .search kbd {border-color:#65486f;color:#c7aed1}
body.halloween .search:focus-within {border-color:var(--lime);background:#251b2d;box-shadow:0 0 0 3px #ffb36512}
body.halloween .sort-label {color:#bda5c5}
body.halloween .sort-label select {color:#e9d9ed;border-color:#5e4167;background:#1c1524}
body.halloween .sort-label select option {background:#21182b}
body.halloween .genre-filters,body.halloween .recent-list {scrollbar-color:#76527d transparent}
body.halloween .genre-filters::-webkit-scrollbar-thumb,body.halloween .recent-list::-webkit-scrollbar-thumb {background:#76527d}
body.halloween .filter {color:#c2acca}
body.halloween .filter:hover {background:#2b1e35;color:#efdef5}
body.halloween .filter.active {background:#39271f;border-color:#9b663c;color:#ffd0a0}
body.halloween .favorite-filter {color:#c6afcf;border-left-color:#52365e}
body.halloween .favorite-filter[aria-pressed=true] {color:var(--lime)}

/* Covers remain true to their games; the surrounding gallery gets the season. */
body.halloween .card-art {background:#251a2f;border-color:#8e63702e;box-shadow:0 6px 22px #0003}
body.halloween .card-art:after {background:linear-gradient(180deg,#130b1e08,transparent 40%,#180d2638)}
body.halloween .card-art:hover {border-color:#f5a76b99;box-shadow:0 9px 25px #0006,0 0 16px #d86e1d0d}
body.halloween .card-play-overlay {background:#170a234d}
body.halloween .card-play-overlay span {color:#291509}
body.halloween .card-favorite {color:#ecd7f1;background:#1a1023e8;border-color:#b797c047}
body.halloween .card-favorite:hover,body.halloween .card-favorite[aria-pressed=true] {color:var(--lime);background:#39251fed;border-color:#dda06b99}
body.halloween .card-number {color:#f0dff5;background:#1b1027c9}
body.halloween .card-launch {color:#bc9fc8}
body.halloween .card-launch:hover {color:var(--lime);background:#30203a}
body.halloween .card-description {color:#c0acc8}
body.halloween .card-meta,body.halloween .card-access {color:#b7a0c1}
body.halloween .genre-tag {background:#281c32;border-color:#573b64;color:#d4bce0}
body.halloween .quiet-button {color:#d3b7df}
body.halloween .quiet-button:hover {color:var(--lime)}
body.halloween .recent-card {background:#22182b;border-color:#4b3159}
body.halloween .recent-card:hover {background:#32213b;border-color:#9869a7}
body.halloween .recent-card small {color:#c4a7d0}
body.halloween .empty-state,body.halloween .updates-empty {background:#1c1425;border-color:#6e497b}
body.halloween .empty-state p,body.halloween .updates-empty p {color:#c0a9ca}
body.halloween .updates-empty>span {color:#d4a9ec}
body.halloween .updates-empty a {color:#ffd0a0}

/* Seasonal treatment reaches the secondary views and every form. */
body.halloween .hub-tabs {background:#1a1321;border-color:#493153;box-shadow:inset 0 1px 0 #f6dcff05}
body.halloween .hub-tabs [role=tab] {color:#c5afcf}
body.halloween .hub-tabs [role=tab]:hover {background:#2d1f37;color:#f2e0f9}
body.halloween .hub-tabs [aria-selected=true] {background:var(--lime);border-color:var(--lime);color:#291509;box-shadow:0 2px 12px #0003}
body.halloween .hub-tabs [aria-selected=true]:hover {background:#ffc58b;color:#291509}
body.halloween #alpha-count {border-color:#70517b;color:inherit}
body.halloween .hub-tabs [aria-selected=true] #alpha-count {border-color:#6e3e2266;background:#41200f0a}
body.halloween .panel-intro {color:#c1adca}
body.halloween .alpha-empty {border-color:#694674;background:radial-gradient(ellipse at 50% 0,#5b315b55,transparent 58%),#1b1423}
body.halloween .alpha-empty:before,body.halloween .alpha-empty:after {border-color:#e4acff0e}
body.halloween .alpha-symbol {background:linear-gradient(145deg,#553460,#2b1b3b);border-color:#af78be66;box-shadow:0 16px 38px #0003,inset 0 1px 0 #f0c2ff17}
body.halloween .alpha-symbol>span {border-color:#392245}
body.halloween .alpha-empty .eyebrow {color:#d3afe1}
body.halloween .alpha-empty>p {color:#c4adcd}
body.halloween .alpha-footnote {color:#b498bf}
body.halloween .alpha-footnote .status-dot {background:#c3a1ef}
body.halloween .release-badge {color:#efd3ff;background:#3b254a;border-color:#a271b3}
body.halloween .updates-tools {background:#201728;border-color:#4e345b}
body.halloween .updates-tools label>span {color:#d0b5dc}
body.halloween .updates-tools select {background:#160f1e;color:#f0e0f6;border-color:#6b4779}
body.halloween .updates-tools select:hover {border-color:#bd8bce}
body.halloween .updates-tools select option {background:#21162c}
body.halloween #updates-count {color:#baa1c7}
body.halloween .update-card {border-color:#4f355c;background:linear-gradient(120deg,#261a2d,#1b1423);box-shadow:0 4px 15px #0002}
body.halloween .update-meta,body.halloween .update-meta time {color:#b99cc4}
body.halloween .update-meta>span:not(.update-type) {color:#cdb1d9}
body.halloween .update-type,body.halloween .update-type.update {background:#40291c;border-color:#a16b3b;color:#ffd09a}
body.halloween .update-type.fix {background:#352343;border-color:#866098;color:#e4c1fa}
body.halloween .update-title {color:#f6e9ed}
body.halloween .update-changes {color:#cbb4d2}
body.halloween .update-changes li::marker {color:#cf9ae8}
body.halloween .update-game-link {color:#ffd0a1;border-bottom-color:#9e663e}
body.halloween .update-site {color:#c4a9d0}

body.halloween .about {border-color:#53385e}
body.halloween .about-mark {background:radial-gradient(circle at 40% 30%,#4f2c43,#281b31);border-color:#99674d;box-shadow:0 0 35px #dd69200a}
body.halloween .about-mark:after {border-color:#b87b4e66}
body.halloween .about .eyebrow,body.halloween .contact-block .eyebrow {color:#c8a2d8}
body.halloween .about p {color:#c2accb}
body.halloween .text-link {color:#ead1f4;border-bottom-color:#7a518c}
body.halloween .text-link:hover {color:var(--lime);border-bottom-color:var(--lime)}
body.halloween .about-stats {border-left-color:#573b62}
body.halloween .about-stats span {color:#c5a9d0}
body.halloween .contact-block {border-top-color:#4b3258}
body.halloween .contact-email {color:#f1c599;text-decoration-color:#b27b4c}
body.halloween .contact-email:hover {color:#ffe0bd}
body.halloween footer p {color:#b098ba}
body.halloween footer>a:last-of-type {color:#d4b7df}
body.halloween .footer-note {color:#b099ba;border-top-color:#3a2846}

body.halloween dialog {background:#1c1425;border-color:#895f8e;box-shadow:0 30px 100px #000b;scrollbar-color:#886395 #1c1425}
body.halloween dialog::backdrop {background:#08040ce0}
body.halloween .dialog-close {color:#f4e1f9;background:#1c1129ed;border-color:#d3acdf66}
body.halloween .dialog-close:hover {background:#40294a;border-color:var(--lime)}
body.halloween .dialog-content>p {color:#cfb8d7}
body.halloween .dialog-tags {color:#e4c4ef}
body.halloween .detail-eyebrow>span {color:#b99bc5}
body.halloween .dialog-info {color:#c5a9d1;border-top-color:#52365e}
body.halloween .secondary {border-color:#9168a1;color:#ecd1f7;background:#281b32}
body.halloween .secondary:hover {background:#3a2547;border-color:#c195d2}
body.halloween .dialog-content>.dialog-note {color:#bca1c8}
body.halloween .add-dialog form>p {color:#c5adcf}
body.halloween .add-dialog form>label,body.halloween .form-row>label {color:#e0c4eb}
body.halloween .add-dialog input,body.halloween .add-dialog select {background:#140e1c;border-color:#725080;color:#f4e1fc}
body.halloween .add-dialog input::placeholder {color:#a286af}
body.halloween .add-dialog .form-error {color:#ffc0ac}
body.halloween .backup-tools {border-top-color:#50345d}
body.halloween .share-button {border-color:#9168a1;color:#ffd0a0;background:#281b32}
body.halloween .share-button:hover {background:#3e2a44}
body.halloween .share-copy-field {color:#d3b5df}
body.halloween .share-copy-field input {background:#140d1c;color:#f1d9fc;border-color:#9b6caf}
body.halloween .toast {background:#ffd09b;color:#2d170d;box-shadow:0 8px 50px #0008}
body.halloween .skip-link {color:#291509}
body.halloween .card-art:focus-visible {box-shadow:0 0 0 6px #ffb3651c}
body.halloween ::selection {background:#a65b32;color:#fff2e4}

@media(min-width:1450px) {
  body.halloween .hero h1 {font-size:70px}
}
@media(max-width:1100px) {
  body.halloween .halloween-banner {margin-left:32px;margin-right:32px;padding:24px;min-height:152px}
  body.halloween .season-copy {max-width:390px}
  body.halloween .season-copy .season-title {font-size:25px}
  body.halloween .season-art {width:75%;right:52px}
  body.halloween .hero {padding-top:34px}
  body.halloween .hero h1 {font-size:52px;letter-spacing:-2.7px}
}
@media(max-width:780px) {
  body.halloween .halloween-banner {min-height:155px;margin:20px 22px 0;padding:21px 23px}
  body.halloween .halloween-banner:before {background:linear-gradient(90deg,#302032 0%,#302032eb 31%,#30203277 68%,#21182a22)}
  body.halloween .season-copy {max-width:360px}
  body.halloween .season-kicker {font-size:8px;letter-spacing:1.5px}
  body.halloween .season-copy .season-title {font-size:26px}
  body.halloween .season-copy .season-note {max-width:280px;font-size:10px}
  body.halloween .season-art {width:90%;right:0;opacity:.72}
  body.halloween .season-date {font-size:10px;letter-spacing:1.2px;padding-left:15px;align-self:flex-start}
  body.halloween .season-date b {font-size:32px}
  body.halloween .hero {padding-top:31px}
  body.halloween .hero h1 {font-size:clamp(46px,8vw,62px);letter-spacing:-2.8px}
}
@media(max-width:558px) {
  body.halloween .halloween-banner {min-height:148px;padding:20px}
  body.halloween .season-copy {max-width:calc(100% - 38px)}
  body.halloween .season-copy .season-title {font-size:24px;letter-spacing:-.55px}
  body.halloween .season-copy .season-note {max-width:240px;line-height:1.6}
  body.halloween .season-art {width:125%;right:-20%;opacity:.5}
  body.halloween .season-date {position:absolute;right:17px;top:19px;padding:0;font-size:8px;letter-spacing:1px}
  body.halloween .season-date b {font-size:27px}
  body.halloween .halloween-banner:before {background:linear-gradient(90deg,#302032f5 0%,#302032d9 40%,#30203255 100%)}
  body.halloween .hero h1 {font-size:clamp(42px,9.8vw,54px);letter-spacing:-2.2px}
}
@media(max-width:420px) {
  body.halloween .halloween-banner {min-height:146px;padding:20px 17px}
  body.halloween .season-kicker {font-size:7px;letter-spacing:1.05px;margin-bottom:7px}
  body.halloween .season-copy .season-title {font-size:21px;line-height:1.2;letter-spacing:-.5px}
  body.halloween .season-copy .season-note {font-size:10px;max-width:218px;margin-top:8px}
  body.halloween .season-date {right:13px;top:19px;font-size:7px;letter-spacing:.65px}
  body.halloween .season-date b {font-size:24px}
  body.halloween .season-art {opacity:.42;right:-24%}
  body.halloween .hero h1 {font-size:clamp(39px,10vw,44px);letter-spacing:-2px}
  body.halloween .season-badge {font-size:8px;letter-spacing:.9px;padding:6px 8px}
}
@media(prefers-reduced-motion:reduce) {
  body.halloween .brand-mark {filter:none}
  body.halloween .card-art img,body.halloween .spotlight>img {transform:none!important}
}
