/* Bangkok Typing — Halloween skin (body.skin-halloween / body.theme-halloween)
 * Works on home, ranking, member, and light legal pages.
 * Classic look = remove these classes; light/dark resume as usual.
 */
body.skin-halloween,
body.theme-halloween{
  --verm:#FF7A18;
  --c:#FF7A18;
  --tint:#FF7A18;
  --hw-orange:#FF7A18;
  --hw-amber:#FFB347;
  --hw-glow:0 0 0 1px rgba(255,122,24,.42),0 0 22px rgba(255,122,24,.28),0 18px 40px rgba(0,0,0,.45);
  --paper:transparent;
  --ink:#F8F0E4;
  --ink2:rgba(248,240,228,.74);
  --ink3:rgba(248,240,228,.48);
  --rule:rgba(255,122,24,.32);
  --card:rgba(16,8,28,.78);
  --tile:rgba(16,8,28,.68);
  --bg:transparent;
  --txt:#F8F0E4;
  --txt2:rgba(248,240,228,.65);
  --sep:rgba(255,122,24,.22);
  --shadow:var(--hw-glow);
  --net:.4;
  color:#F8F0E4;
  background:
    linear-gradient(165deg,rgba(18,6,32,.62) 0%,rgba(18,6,32,.28) 38%,rgba(12,4,24,.55) 72%,rgba(10,4,20,.78) 100%),
    url(/halloween_bg.png) center center / cover no-repeat fixed;
}

/* ranking / member shells */
body.skin-halloween .page,
body.theme-halloween .page{
  background:transparent;
  color:var(--ink);
}
body.skin-halloween .grain,
body.theme-halloween .grain{
  opacity:.28;
  background-image:
    radial-gradient(rgba(255,180,80,.07) 1px,transparent 1.4px),
    linear-gradient(180deg,transparent 60%,rgba(255,100,20,.08));
  background-size:16px 16px,100% 100%;
  mix-blend-mode:screen;
}
body.skin-halloween .net,
body.theme-halloween .net{opacity:.26;filter:drop-shadow(0 0 8px rgba(255,122,24,.35))}

body.skin-halloween .iconbtn,
body.skin-halloween .rankchip,
body.skin-halloween .ghost,
body.skin-halloween .card,
body.skin-halloween .filters,
body.skin-halloween .board,
body.skin-halloween .kick,
body.skin-halloween .kickbar,
body.skin-halloween .rhead .players,
body.skin-halloween .segsm,
body.skin-halloween .acctpop .authpill,
body.theme-halloween .iconbtn,
body.theme-halloween .rankchip,
body.theme-halloween .ghost,
body.theme-halloween .card,
body.theme-halloween .filters,
body.theme-halloween .board,
body.theme-halloween .kick,
body.theme-halloween .kickbar,
body.theme-halloween .rhead .players,
body.theme-halloween .segsm,
body.theme-halloween .acctpop .authpill{
  background:rgba(16,8,28,.78)!important;
  border-color:rgba(255,122,24,.38)!important;
  box-shadow:var(--hw-glow);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  color:var(--ink);
}
body.skin-halloween .iconbtn:hover,
body.skin-halloween .rankchip:hover,
body.skin-halloween .ghost:hover,
body.theme-halloween .iconbtn:hover,
body.theme-halloween .rankchip:hover,
body.theme-halloween .ghost:hover{
  border-color:#FF9A3C!important;
  color:#FFB347;
}
body.skin-halloween .brand,
body.skin-halloween .mkrow,
body.theme-halloween .brand,
body.theme-halloween .mkrow{color:#FFF6E8;text-shadow:0 0 16px rgba(255,122,24,.3)}
body.skin-halloween .brand .mk [fill="#111111"],
body.skin-halloween .mkrow .mk [fill="#111111"],
body.theme-halloween .brand .mk [fill="#111111"],
body.theme-halloween .mkrow .mk [fill="#111111"]{fill:#1a0a28}
body.skin-halloween .brand .mk [fill="#FAFAFA"],
body.skin-halloween .mkrow .mk [fill="#FAFAFA"],
body.theme-halloween .brand .mk [fill="#FAFAFA"],
body.theme-halloween .mkrow .mk [fill="#FAFAFA"]{fill:#FFB347}
body.skin-halloween .brand .mk [fill="#141414"],
body.theme-halloween .brand .mk [fill="#141414"]{fill:#1a0a28}

body.skin-halloween h1,
body.skin-halloween .rhead h1,
body.theme-halloween h1,
body.theme-halloween .rhead h1{
  color:#FFF6E8;
  text-shadow:0 0 22px rgba(255,122,24,.4),0 2px 14px rgba(0,0,0,.5);
}
body.skin-halloween a.inl,
body.theme-halloween a.inl{color:#FF9A3C;border-bottom-color:rgba(255,122,24,.4)}
body.skin-halloween .foot,
body.theme-halloween .foot{color:rgba(248,240,228,.45);border-top-color:rgba(255,122,24,.25)}
body.skin-halloween .foot a,
body.theme-halloween .foot a{color:rgba(255,180,100,.65);border-bottom-color:rgba(255,122,24,.3)}

/* legal / contact cards */
body.skin-halloween .wrap,
body.theme-halloween .wrap{color:var(--ink)}
body.skin-halloween .introbox,
body.skin-halloween #body .box,
body.skin-halloween .card,
body.theme-halloween .introbox,
body.theme-halloween #body .box,
body.theme-halloween .card{
  background:rgba(16,8,28,.78)!important;
  border-color:rgba(255,122,24,.35)!important;
  box-shadow:var(--hw-glow);
  color:#F8F0E4;
}
body.skin-halloween section,
body.theme-halloween section{border-bottom-color:rgba(255,122,24,.22)}
body.skin-halloween h2,
body.theme-halloween h2{color:#FF9A3C}

/* settings sheet while halloween */
body.skin-halloween .modal .sheet,
body.theme-halloween .modal .sheet{
  background:rgba(18,8,30,.96)!important;
  color:#F8F0E4;
  border:1px solid rgba(255,122,24,.35);
  box-shadow:var(--hw-glow);
}

@media(max-width:920px){
  body.skin-halloween,
  body.theme-halloween{
    background-attachment:scroll;
    background-position:center 20%;
  }
}