.wd-page { --j1: #ffd98a; --j2: #ffb24a; --j3: #ff7a12; --jdark: #241005; --pink: #ffb24a; --jam: #ff8a1f; --jline: rgba(255, 170, 90, .2); --jline-2: rgba(255, 170, 90, .4); --wd-cream: #fff2e4; --wd-cream-2: rgba(255, 228, 205, .72); --wd-cream-3: rgba(255, 228, 205, .48); --wd-glass: rgba(22, 11, 6, .78); --wd-teal: #4fe0bf; }
body.wd-page { background: #0d0604; color: var(--wd-cream); }
.wd-page ::selection { background: rgba(255, 138, 31, .45); color: #fff; }
.wd-page .t-sec { border-bottom-color: rgba(255, 170, 90, .12); }
.wd-page .jam-idx { color: var(--j2); }
.wd-page .t-head p { color: var(--wd-cream-2); }
.wd-page a:not(.label):not(.jam-cta) { text-underline-offset: 3px; }

.wd-logs { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 0%, transparent 35%, rgba(6, 3, 1, .78) 100%),
  linear-gradient(90deg, rgba(6, 3, 1, .7), transparent 18%, transparent 82%, rgba(6, 3, 1, .7)),
  repeating-linear-gradient(180deg, #1c0e06 0, #2a160a 7px, #34200f 20px, #2c180b 38px, #1e0f06 50px, #120802 54px, #0a0501 56px);
  opacity: .95; }
.wd-logs::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 330px, rgba(0, 0, 0, .22) 330px 333px, transparent 333px 520px, rgba(0, 0, 0, .16) 520px 522px, transparent 522px 900px); -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 26px, transparent 26px 56px); mask-image: repeating-linear-gradient(180deg, #000 0 26px, transparent 26px 56px); opacity: .7; }
.wd-page .page-bg { z-index: 0; }
.wd-page .page-bg--jam .haze i { background: radial-gradient(circle, rgba(255, 170, 50, .22), rgba(255, 170, 50, 0) 70%); }
.wd-page .page-bg--jam .haze i:nth-child(2) { background: radial-gradient(circle, rgba(255, 90, 20, .16), rgba(255, 90, 20, 0) 70%); }
.wd-page .page-bg--jam .haze i:nth-child(3) { background: radial-gradient(circle, rgba(140, 62, 18, .3), rgba(140, 62, 18, 0) 70%); }
.wd-page .page-bg--jam .page-bg__glow { background: radial-gradient(closest-side, rgba(255, 150, 40, .2), rgba(255, 80, 0, .05) 60%, transparent); }
.wd-page .site { position: relative; z-index: 1; }

.wd-title { margin: 18px 0 0; line-height: 0; }
.wd-title img { display: block; width: clamp(230px, 22vw, 320px); height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(255, 170, 60, .28)) drop-shadow(0 6px 12px rgba(0, 0, 0, .7)); }
.wd-beta { display: inline-block; margin-top: 22px; padding: 5px 12px; color: var(--wd-cream); border: 1px solid rgba(255, 138, 31, .6); background: rgba(255, 125, 20, .14); letter-spacing: .2em; }
.wd-page .fh-early { color: var(--jdark); background: linear-gradient(90deg, var(--j2), var(--j3)); box-shadow: 0 0 22px rgba(255, 170, 40, .4); }
.wd-page .fh-early-note { color: var(--wd-cream-2); }
.wd-page .fh-early-note a { color: var(--j2); }

.wd-page .fh-live { min-width: 280px; border-color: var(--jline); background: linear-gradient(180deg, rgba(48, 22, 9, .94), rgba(22, 11, 6, .94)); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .07), 0 18px 50px rgba(0, 0, 0, .4); }
.wd-page .fh-live__row b { color: var(--wd-cream); }
.wd-page .fh-live__row .label { color: var(--wd-cream-2); }
.wd-live__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--jline); }
.wd-live__row .label { color: var(--wd-cream-3); }
.wd-live__row b { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--j2); font-weight: 700; font-size: 13px; }
.wd-discord { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 10px 14px; border: 0; background: #5865f2; color: #fff; font: 700 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .15s, box-shadow .15s; }
.wd-discord svg { width: 18px; height: 18px; flex: none; }
.wd-discord:hover { background: #6672f5; box-shadow: 0 0 22px rgba(88, 101, 242, .45); }
.wd-discord:focus-visible { outline: 2px solid var(--j2); outline-offset: 3px; }
.wd-telegram { background: #2aabee; }
.wd-telegram:hover { background: #45b6f0; box-shadow: 0 0 22px rgba(42, 171, 238, .45); }
.wd-discord.is-on { background: rgba(88, 101, 242, .16); color: #dfe3ff; box-shadow: 0 0 0 1px rgba(120, 132, 255, .5) inset; }
.wd-telegram.is-on { background: rgba(42, 171, 238, .16); color: #dff3ff; box-shadow: 0 0 0 1px rgba(42, 171, 238, .5) inset; }

.wd-page .fh-frame { border-color: var(--jline-2); background: #0e0703; box-shadow: 0 0 60px rgba(255, 125, 20, .2), 0 30px 80px rgba(0, 0, 0, .5); }
.wd-page .fh-screen, .wd-page .fh-frame iframe { background: #0e0703; }
.wd-page .fh-frame__bar { gap: 8px; flex-wrap: wrap; background: rgba(20, 9, 3, .96); border-top-color: var(--jline); }
.wd-page .fh-frame__bar a, .wd-page .fh-frame__bar button, .wd-soon { color: var(--wd-cream-2); border-color: var(--jline); }
.wd-page .fh-frame__bar a:hover, .wd-page .fh-frame__bar button:hover { color: #fff; border-color: var(--j2); background: rgba(255, 138, 30, .1); }
.wd-page .fh-frame__bar #goFull { margin-left: auto; }
.wd-page .fh-frame__bar { align-items: center; }
.wd-soon { display: inline-flex; align-items: center; gap: .45em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--jline); cursor: default; opacity: .6; }
.wd-soon em { font-style: normal; color: var(--j2); }

.wd-page .fh-chat { border-color: var(--jline); background: linear-gradient(180deg, rgba(40, 19, 8, .95), rgba(20, 9, 4, .95)); }
.wd-page .fh-chat__head { border-bottom-color: var(--jline); }
.wd-page .fh-chat__head .label { color: var(--j3); }
.wd-page .fh-chat__head b { color: var(--wd-cream); }
.wd-page .fh-chat__list { scrollbar-width: thin; scrollbar-color: rgba(255, 138, 30, .5) transparent; }
.wd-page .fh-chat__list::-webkit-scrollbar-thumb { background: rgba(255, 138, 30, .5); }
.wd-page .fh-msg { background: rgba(255, 236, 210, .035); }
.wd-page .fh-msg b { color: var(--j2); }
.wd-page .fh-msg span { color: var(--wd-cream); }
.wd-page .fh-msg--feed { background: linear-gradient(90deg, rgba(255, 138, 30, .16), rgba(255, 210, 63, .05)); box-shadow: 0 0 0 1px var(--jline) inset; }
.wd-page .fh-msg--feed span { color: #ffe6c2; }
.wd-page .fh-msg__icon { color: #ffd23f; }
.wd-page .fh-chat__form { border-top-color: var(--jline); }
.wd-page .fh-chat__form input { border-color: var(--jline-2); background: rgba(0, 0, 0, .35); color: var(--wd-cream); }
.wd-page .fh-chat__form input::placeholder { color: rgba(255, 228, 205, .45); }
.wd-page .fh-chat__form input:focus { outline: none; border-color: var(--j2); box-shadow: 0 0 0 3px rgba(255, 138, 30, .2); }
.wd-page .fh-chat__form .jam-cta, .wd-page .fh-mobile-play.jam-cta { color: var(--jdark); background: linear-gradient(180deg, var(--j1), var(--j2) 55%, var(--j3)); box-shadow: 0 0 20px rgba(255, 138, 30, .35); }
.wd-page .fh-chat__note { color: var(--wd-cream-3); }
.wd-page .fh-mobile-play.jam-cta { display: none; }

.wd-page .lb-chips { border-color: var(--jline); background: rgba(0, 0, 0, .35); }
.wd-page .lb-chips button { color: rgba(255, 228, 205, .62); }
.wd-page .lb-chips button:hover { color: #fff; }
.wd-page .lb-chips button.is-on { color: var(--jdark); background: linear-gradient(180deg, var(--j1), var(--j2) 60%, var(--j3)); }
.wd-chips { max-width: 900px; }
.wd-chips-row { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-start; }
.wd-page .lb-board { border-color: var(--jline); background: rgba(22, 10, 4, .95); }
.wd-page .lb-rows li + li { border-top-color: rgba(255, 220, 170, .06); }
.wd-page .lb-rows li:hover { background: rgba(255, 138, 30, .06); }
.wd-page .lb-rows li.is-me { background: rgba(255, 138, 30, .13); }
.wd-page .lb-rows .n { color: var(--j2); border-color: var(--jline-2); background: rgba(255, 138, 30, .07); }
.wd-page .lb-rows li.is-1 .n { color: var(--jdark); background: linear-gradient(180deg, #ffe680, #ffb23e); border-color: #ffd23f; box-shadow: 0 0 22px rgba(255, 210, 63, .5); }
.wd-page .lb-rows li.is-2 .n { color: var(--jdark); background: linear-gradient(180deg, #f9f6f1, #c2b6aa); border-color: #e1d9cc; }
.wd-page .lb-rows li.is-3 .n { color: var(--jdark); background: linear-gradient(180deg, #ffc28a, #c7773a); border-color: #e39b5c; }
.wd-page .lb-rows .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wd-page .lb-rows .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff7ea; }
.wd-page .lb-rows li.is-guest .nm b { color: var(--wd-cream-3); font-weight: 500; }
.wd-page .lb-rows .sc { color: #fff; font-variant-numeric: tabular-nums; }
.wd-page .lb-empty { color: rgba(255, 228, 205, .55); }
.wd-av { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(88, 101, 242, .8); }
.wd-tg { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2aabee; color: #fff; }
.wd-tg svg { width: 12px; height: 12px; }
.wd-dc { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #5865f2; color: #fff; }
.wd-dc svg { width: 12px; height: 12px; }
.wd-tag { flex: none; padding: 2px 7px; border: 1px solid rgba(255, 228, 205, .2); color: var(--wd-cream-3); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-tier { flex: none; display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.wd-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 14px 2px 0; color: var(--wd-cream-3); font-size: 13px; }
.wd-legend span { display: inline-flex; align-items: center; gap: 8px; }

.wd-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.wd-area { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px; overflow: hidden; border: 1px solid var(--jline); background: linear-gradient(180deg, rgba(40, 19, 8, .92), rgba(18, 8, 3, .94)); box-shadow: inset 0 2px 0 var(--ac); }
.wd-area__n { color: var(--ac); }
.wd-area h3 { margin: 0; font-size: 26px; color: #fff7ea; }
.wd-area p { margin: 0; color: var(--wd-cream-2); font-size: 14px; line-height: 1.55; }
.wd-area__boss { margin-top: 4px; color: var(--wd-cream-3); font-size: 13px; }
.wd-area__boss b { color: var(--wd-cream); font-weight: 600; }

.wd-page .wd-how > div { border-color: var(--jline); background: rgba(22, 10, 4, .85); }
.wd-page .fh-mode { border-color: var(--jline); background: rgba(22, 10, 4, .75); }
.wd-page .fh-mode b { color: var(--j2); }
.wd-page .fh-mode span { color: var(--wd-cream-2); }
.wd-credit { margin: 22px 2px 0; color: var(--wd-cream-3); font-size: 13px; }

.wd-pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(12, 5, 1, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wd-pop[hidden] { display: none; }
.wd-pop__box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 28px 26px; border: 1px solid rgba(255, 179, 90, .4); background: radial-gradient(120% 80% at 0% 0%, rgba(255, 125, 20, .18), transparent 60%), linear-gradient(180deg, #2a1308, #120702); box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 60px rgba(255, 125, 20, .2); scrollbar-width: thin; scrollbar-color: rgba(255, 138, 30, .5) transparent; }
body .wd-pop__box::-webkit-scrollbar { width: 6px; }
body .wd-pop__box::-webkit-scrollbar-thumb { background: rgba(255, 138, 30, .5); border-radius: 3px; }
.wd-pop__body { display: grid; gap: 12px; }
.wd-pop__box h3 { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1; color: #fff; }
.wd-pop__box p { margin: 0; color: var(--wd-cream-2); line-height: 1.5; }
.wd-pop__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.wd-pop__row button, .wd-pop__row a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border: 0; font: 700 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.wd-pop__go { background: #5865f2; color: #fff; }
.wd-pop__go:hover { background: #6672f5; }
.wd-pop__ghost { background: transparent; color: var(--wd-cream-2); box-shadow: 0 0 0 1px var(--jline-2) inset; }
.wd-pop__ghost:hover { color: #fff; background: rgba(255, 138, 30, .1); }
.wd-pop__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid rgba(255, 179, 90, .32); background: rgba(255, 255, 255, .04); color: var(--wd-cream); cursor: pointer; }
.wd-pop__x:hover { background: rgba(255, 138, 30, .2); }

@media (max-width: 700px) {
  .wd-page .fh-live { min-width: 0; width: 100%; }
  .wd-page .fh-frame__bar #goFull { margin-left: 0; }
  .wd-page .fh-mobile-play.jam-cta { display: flex; }
}