/* DeadCurve — Día de Muertos look (on top of rip.css): marigold, rosa mexicano, turquoise, papel picado */
:root{--pumpkin:#ff9f1c;--pumpkin2:#f06414;--candy:#ffd23f;--rosa:#ff3d8b;--turq:#1ec8b8;--witch:#2b1452}
body{background:
  radial-gradient(900px 520px at 82% -6%,#ff9a3d33 0%,transparent 62%),
  radial-gradient(1400px 600px at 50% 110%,#ff7a1a22 0%,transparent 60%),
  linear-gradient(180deg,#3a1f6e 0%,#26134e 35%,#170a33 70%,#0d0620 100%)}
/* header */
.top{border-bottom-color:var(--ink);box-shadow:0 4px 0 #ff8a1f55}
.brand b{color:var(--pumpkin);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.brand img{width:44px;height:48px;display:block;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.08)}
.menu a.on{background:var(--pumpkin)}
.kick{background:var(--pumpkin)}
footer b{color:var(--pumpkin)}
/* header chip: light a candle */
.hchip{display:inline-flex;align-items:center;gap:6px;font:400 15px var(--t);color:var(--ink);background:var(--pumpkin);border:3px solid var(--ink);border-radius:99px;padding:6px 12px 4px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;cursor:pointer;transition:transform .15s}
.hchip:hover{transform:translateY(-2px) rotate(-2deg)}
.hchip:active{transform:translate(2px,2px)}
.hchip b{font-weight:400}
/* ticker: a strip of papel picado colours */
.ticker{background:var(--candy);box-shadow:inset 0 6px 0 var(--rosa),inset 0 -6px 0 var(--turq)}
/* buttons: the main call to action wears orange */
.btn.g{background:var(--pumpkin)}
/* hanging spider + webs (decor only) */
.hw-web{position:fixed;z-index:30;width:150px;pointer-events:none;opacity:.55}
.hw-web.l{left:0;top:74px}.hw-web.r{right:0;top:74px;transform:scaleX(-1)}
.hw-spider{position:fixed;z-index:31;top:74px;right:110px;width:34px;pointer-events:none;transform-origin:50% 0;animation:spider 7s ease-in-out infinite}
.hw-spider svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes spider{0%,100%{transform:translateY(0)}45%{transform:translateY(120px)}55%{transform:translateY(120px) rotate(4deg)}}
/* monarch butterflies crossing the page (desktop) */
.hw-bat{position:fixed;z-index:29;left:0;pointer-events:none;width:52px;animation:hwfly linear forwards}
.hw-bat svg{display:block;width:100%}
@keyframes hwfly{from{transform:translate(-80px,0)}50%{transform:translate(50vw,-50px)}to{transform:translate(105vw,20px)}}
/* low fog along the bottom of the screen */
.hw-fog{position:fixed;left:-10%;right:-10%;bottom:-30px;height:140px;z-index:2;pointer-events:none;background:radial-gradient(50% 70% at 25% 100%,#cbb8ff26,transparent 70%),radial-gradient(50% 70% at 75% 100%,#ffb36b1c,transparent 70%);animation:hwfog 18s ease-in-out infinite alternate}
@keyframes hwfog{to{transform:translateX(5%)}}
/* marigold petals falling when a candle is lit */
.candy{position:fixed;top:-40px;z-index:85;font-size:28px;pointer-events:none;animation:fall linear forwards}
/* candle glow */
.pk-glow{animation:pkglow 1.6s ease-in-out infinite alternate}
@keyframes pkglow{from{opacity:.55}to{opacity:1}}
/* (unused) scare overlay */
.boo{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:#0d0620cc;pointer-events:none;animation:boo 1.5s ease forwards}
.boo svg{width:min(60vw,360px);animation:booz 1.5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes boo{0%{opacity:0}12%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes booz{0%{transform:scale(.2) rotate(-12deg)}30%{transform:scale(1.08) rotate(4deg)}100%{transform:scale(1)}}
/* Día de Muertos band on the home page */
.hw-band{position:relative;overflow:hidden;background:linear-gradient(160deg,#ff9a3d,#f06414);color:var(--ink)}
.hw-band .in{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;padding:30px 36px}
.hw-band h3{font:400 clamp(34px,4vw,54px)/1 var(--t);margin:0 0 8px;color:#fff;text-shadow:4px 5px 0 var(--ink)}
.hw-band p{font:900 17px/1.5 var(--b);margin:0 0 14px}
.hw-count{display:flex;gap:12px;flex-wrap:wrap}
.hw-count div{background:var(--paper);border:4px solid var(--ink);border-radius:16px;padding:8px 14px 6px;box-shadow:4px 5px 0 var(--ink);text-align:center;min-width:92px}
.hw-count b{display:block;font:400 34px/1 var(--t)}
.hw-count span{font:900 11px var(--b);letter-spacing:.06em;text-transform:uppercase;color:#6d5a9e}
.hw-stones{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:end}
.hw-stones a{display:block;text-decoration:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hw-stones a:hover{transform:translateY(-8px) rotate(-2deg)}
.hw-empty{font:400 22px/1.3 var(--t);color:#fff;text-shadow:3px 3px 0 var(--ink);text-align:center;padding:20px}
@media(max-width:1000px){.hw-band .in{grid-template-columns:1fr;padding:24px}.hw-web,.hw-spider{display:none}}
@media(max-width:560px){.hw-stones{grid-template-columns:repeat(2,1fr)}.hchip span{display:none}}
@media(max-width:1000px),(pointer:coarse){.hw-fog{display:none}}
@media(prefers-reduced-motion:reduce){.hw-bat,.hw-spider,.candy{display:none}}
/* header room: the token chip yields to the Halloween chip on mid screens, the wordmark to the logo on phones */
@media(max-width:1320px){.tokchip{display:none}}
@media(max-width:1120px){.hchip span{display:none}}
@media(max-width:480px){.brand b{display:none}.top .wrap{gap:12px}}

/* ---------- scenery: skyline above the footer, moonlit corner by page titles ---------- */
.hw-skyline{position:relative;z-index:1;margin-top:90px;height:160px;overflow:hidden;line-height:0}
.hw-skyline svg{width:100%;height:100%;display:block}
.hw-skyline + footer{margin-top:0;border-top-color:#0d0620}
.hw-ghost{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box}
@keyframes bob{50%{transform:translateY(-10px)}}
.float{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px)}}
.flap{animation:flap .22s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes flap{to{transform:scaleY(.35)}}
.wrap.head{position:relative}
.hw-headart{position:absolute;right:10px;top:14px;width:430px;pointer-events:none;z-index:0}
.hw-headart svg{display:block;width:100%;height:auto}
.wrap.head > *:not(.hw-headart){position:relative;z-index:1}
@media(max-width:1100px){.hw-headart{width:320px;opacity:.75}}
@media(max-width:820px){.hw-headart{display:none}}
@media(max-width:560px){.hw-skyline{height:90px;margin-top:60px}}
/* ---------- details ---------- */
body .tabs button.on{background:var(--pumpkin)}
.how .panel b{background:var(--pumpkin)!important}
.stone-card{transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.stone-card:hover{box-shadow:7px 9px 0 var(--ink),0 0 0 4px var(--pumpkin),0 0 34px #ff8a1f66}
.card{background-image:linear-gradient(180deg,#fff8ec 0%,#fff3e0 100%)}
.hw-band{background-image:linear-gradient(160deg,#ff9a3d,#f06414)!important}
footer .wrap > div:first-child b{display:inline-flex;align-items:center;gap:8px}
footer img.mk{width:34px;height:37px;vertical-align:middle}
h2{letter-spacing:-.005em}
.hw-skyline{background:radial-gradient(70% 120% at 50% 100%,#ff8a1f3d 0%,#ff8a1f14 40%,transparent 70%)}
.hw-skyline svg path[fill="#2a1752"],.hw-skyline svg rect{filter:drop-shadow(0 -2px 0 #ff9a3d55)}
.hw-skyline + footer{background:#2a1752;border-top:none}
.menu a{white-space:nowrap}
@media(max-width:1500px){.top .wrap{gap:14px}.menu{gap:2px}.menu a{font-size:16px;padding:8px 11px 6px}}

/* invitation to the game, on every page but the home and the lobby */
.playstrip{position:relative;z-index:1;margin-top:80px;display:flex;align-items:center;gap:20px;padding:18px 24px;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,#ffb35c,#ff8a1f 55%,#f06414);border:5px solid var(--ink);border-radius:24px;box-shadow:7px 9px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.playstrip:hover{transform:translateY(-4px) rotate(-.5deg)}
.playstrip .ps-g{width:74px;flex:none;animation:bob 3s ease-in-out infinite}.playstrip .ps-g svg{display:block;width:100%}
.playstrip .ps-t{flex:1}.playstrip b{display:block;font:400 30px/1.05 var(--t);color:#fff;text-shadow:3px 4px 0 var(--ink)}
.playstrip small{display:block;font:900 15px/1.4 var(--b);margin-top:4px}
.playstrip .btn{flex:none;background:var(--paper)}
@media(max-width:700px){.playstrip{flex-wrap:wrap;gap:12px;padding:16px}.playstrip .ps-g{width:54px}.playstrip b{font-size:23px}.playstrip .btn{width:100%}}

/* ---------- UI/UX cleanup (2026-10-31) ---------- */
.hw-web{z-index:0;width:110px;opacity:.32}
.hw-spider,.hw-fog{display:none!important}
@media(max-width:1200px){.hw-web{display:none}}
.hw-bat{z-index:3}
/* Halloween band: readable on phones */
.hw-band h3{line-height:1.05}
@media(max-width:700px){.hw-band h3{font-size:30px}.hw-count{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hw-count div{min-width:0}.hw-count b{font-size:28px}}
/* filter buttons: one row that scrolls on phones */
@media(max-width:700px){.tools .tabs{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:6px;scrollbar-width:none}.tools .tabs::-webkit-scrollbar{display:none}.tools .tabs .btn{flex:none}.tools .count{width:100%}}
/* the toast clears the bottom bars */
.toast{bottom:84px}

/* ---------- DeadCurve wordmark: "Dead" in bone white, "Curve" in pumpkin ---------- */
.brand b{font-size:34px;letter-spacing:.03em;color:#f3ecff}
.brand b i{font-style:normal;color:var(--pumpkin)}
footer b i{font-style:normal;color:var(--pumpkin)}
footer .wrap > div:first-child b{color:#f3ecff}
@media(max-width:1500px){.brand b{font-size:30px}}

/* Day of the Dead band: marigold and candlelight */
.hw-band.dotd{background-image:linear-gradient(160deg,#ffb53d,#ff8a1f 55%,#c2480c)!important}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame .18s ease-in-out infinite alternate}

/* ---------- Día de Muertos (2026-11-02) ---------- */
.brand b{letter-spacing:0;text-transform:uppercase;font-size:27px}.brand b i{color:var(--pumpkin);font-style:normal}
footer b{letter-spacing:.02em;text-transform:uppercase}
/* papel picado hanging under the header */
.picado{position:absolute;left:0;right:0;top:var(--hh,78px);height:74px;z-index:20;pointer-events:none;overflow:hidden;line-height:0}
.picado svg{display:block;width:100%;height:74px}
@media(max-width:700px){.picado,.picado svg{height:54px}}
/* monarch wings */
/* wings: the whole butterfly flutters (a transform on the element, done by the GPU), never the paths inside the SVG */
.hw-bat svg,.hero .spr.bt1 svg,.hero .spr.bt2 svg{animation:flut .28s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flut{to{transform:scaleX(.55)}}
.hw-bat{animation-name:hwfly2}
@keyframes hwfly2{from{transform:translate(-80px,0)}25%{transform:translate(25vw,-40px)}50%{transform:translate(50vw,10px)}75%{transform:translate(75vw,-30px)}to{transform:translate(105vw,0)}}
@media (pointer:coarse),(max-width:700px),(prefers-reduced-motion:reduce){.hw-bat svg,.hero .spr svg{animation:none!important}}
/* the event band: marigold into rosa mexicano */
.hw-band,.hw-band.dotd{background-image:linear-gradient(150deg,#ffb53d 0%,#ff8a1f 45%,#ff3d8b 100%)!important}
.hw-band::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--rosa) 0 40px,var(--pumpkin) 40px 80px,var(--turq) 80px 120px,var(--candy) 120px 160px,#a46bff 160px 200px)}
.playstrip{background:linear-gradient(120deg,#ffb35c,#ff8a1f 50%,#ff3d8b)}
.kick{background:var(--pumpkin)}
/* room for the papel picado above the page titles */
.picado ~ .wrap.head,.picado ~ .wrap.page{margin-top:50px}
@media(max-width:700px){.picado ~ .wrap.head,.picado ~ .wrap.page{margin-top:34px}}
footer .wrap > div:first-child b{gap:0}footer img.mk{margin-right:8px}footer b i{color:var(--pumpkin);font-style:normal}
/* the home hero starts below the papel picado on narrow screens; butterflies stay out of the text on phones */
@media(max-width:1000px){.picado ~ .hero .hgrid{padding-top:96px}}
@media(max-width:700px){.picado ~ .hero .hgrid{padding-top:66px}}
@media(max-width:1000px){.hero .spr.bt1,.hero .spr.bt2{display:none}}
/* animations inside big SVG scenes repaint the whole scene every frame: the scenes stay still
   (only HTML elements move, on the GPU: butterflies, clouds, ticker, the live dot) */
.hero svg.l *,.portal svg *,.hw-headart *,.hw-skyline *{animation:none!important}
/* phones: every running CSS animation costs a style pass per frame on a slow CPU; decorations stay still */
@media (pointer:coarse),(max-width:700px){.live i::after,.lobprev .tag i::after{display:none}.playstrip .ps-g,.beat{animation:none!important}}
@media (pointer:coarse),(max-width:700px){.hero .spr{animation:none!important}.ticker{overflow-x:auto;scrollbar-width:none}.ticker::-webkit-scrollbar{display:none}.ticker .run{animation:none!important;padding-left:16px}}
/* the festival palette everywhere: turquoise takes the place of the old slime green
   (the pump.fun pills keep their own green) */
:root{--slime:#4fe3d2;--slime2:#1ec8b8}
.live{background:#c6f6f1}.live i,.live i::after{background:#0fa596}
.lobprev .tag{background:#c6f6f1}.lobprev .tag i,.lobprev .tag i::after{background:#0fa596}
.q.done{color:#8ff3e8}.q.done .bar i{background:#4fe3d2}