/* v1.8.9 What's new page (/play/whatsnew). Standalone: the game's style.css locks the page height, this page scrolls. */
:root{--ink:#fff;--muted:#c4bdf0;--gold:#ffd23f;--orange:#ff8a00;--red:#ff5d5d;--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.13);
  --g:#7dff9a;--l:#ff9ad5;--s:#7dd3fc;--f:#ffb86b;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#120b2e;scroll-padding-top:16px}
body.wn{margin:0;min-height:100vh;color:var(--ink);font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:800;overflow-x:hidden}
.wn-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#3b1e8f 0%,#1b0f4a 45%,#0c0722 100%)}
.wn-bg i{position:absolute;width:40vmax;height:40vmax;border-radius:50%;filter:blur(60px);opacity:.24;animation:wnDrift 24s ease-in-out infinite alternate}
.wn-bg i:nth-child(1){background:#e5262a;left:-12vmax;top:-12vmax}
.wn-bg i:nth-child(2){background:#1f6fe5;right:-14vmax;top:22vh;animation-delay:-6s}
.wn-bg i:nth-child(3){background:#f7c51e;left:8vw;bottom:-20vmax;opacity:.15;animation-delay:-11s}
.wn-bg i:nth-child(4){background:#22a447;right:-6vmax;bottom:-12vmax;opacity:.18;animation-delay:-3s}
@keyframes wnDrift{to{transform:translate(7vmax,5vmax) scale(1.12)}}
.wn-wrap{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;padding:calc(10px + var(--safe-t)) 14px calc(28px + var(--safe-b))}
.wn-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin:0 -14px 10px;padding:8px 14px;
  background:linear-gradient(#170e3dee,#170e3dcc 70%,#170e3d00);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wn-top h1{margin:0;text-align:center;font-family:'Lilita One',Nunito,sans-serif;font-weight:400;font-size:26px;letter-spacing:.5px;
  background:linear-gradient(#fffbe0,#ffd23f 45%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.wn-back,.wn-share{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:#fff;
  font:900 20px Nunito,sans-serif;text-decoration:none;cursor:pointer}
.wn-back:active,.wn-share:active{transform:scale(.94)}
.wn-back:focus-visible,.wn-share:focus-visible,.wn-chip:focus-visible,.wn-more:focus-visible,.wn-play:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* hero */
.wn-hero{position:relative;overflow:hidden;border-radius:24px;padding:18px 18px 16px;margin-bottom:16px;
  background:linear-gradient(155deg,rgba(255,210,63,.22),rgba(255,93,93,.14) 45%,rgba(59,30,143,.55));border:1px solid rgba(255,210,63,.45);
  box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)}
.wn-hero-glow{position:absolute;inset:-40% -20% auto auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.45),transparent 65%);pointer-events:none}
.anim .wn-hero-glow{animation:wnPulse 4s ease-in-out infinite alternate}
@keyframes wnPulse{to{transform:scale(1.25) translate(-10px,10px);opacity:.7}}
.wn-hero-meta{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.wn-new{background:linear-gradient(#ff7a7a,#e5262a);color:#fff;font-weight:900;font-size:11px;letter-spacing:1px;padding:3px 8px;border-radius:999px;box-shadow:0 0 14px rgba(229,38,42,.6)}
.wn-ver{font-weight:900;color:#1b0f4a;background:var(--gold);padding:2px 9px;border-radius:999px;font-size:13px}
.wn-date{color:var(--muted);font-weight:700;font-size:13px}
.wn-hero h2{position:relative;margin:10px 0 4px;font-family:'Lilita One',Nunito,sans-serif;font-weight:400;font-size:clamp(24px,7vw,32px);line-height:1.08;letter-spacing:.3px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.wn-hero-line{position:relative;margin:0 0 12px;color:#fff5d6;font-size:16px;line-height:1.35}
.wn-hl{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wn-hl li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.35;font-weight:700}
.wn-hl .em{flex:0 0 32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:17px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.wn-hl .em.dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.wn-hl li span{padding-top:5px;min-width:0;overflow-wrap:anywhere}
.wn-hl.small li{font-size:14px}.wn-hl.small .em{flex-basis:28px;height:28px;font-size:15px;border-radius:9px}.wn-hl.small li span{padding-top:4px}
.wn-play{position:relative;display:block;margin-top:14px;text-align:center;padding:12px;border-radius:16px;text-decoration:none;color:#2a1600;font-weight:900;font-size:16px;
  background:linear-gradient(#ffe680,#ffd23f 50%,#ff9d00);box-shadow:0 5px 0 #b35f00,0 10px 20px rgba(0,0,0,.35)}
.wn-play:active{transform:translateY(3px);box-shadow:0 2px 0 #b35f00}
.anim .wn-hero{animation:wnRise .55s cubic-bezier(.2,.8,.2,1) both}
.anim .wn-hero .wn-hl li{animation:wnRise .5s cubic-bezier(.2,.8,.2,1) both}
.anim .wn-hero .wn-hl li:nth-child(1){animation-delay:.12s}.anim .wn-hero .wn-hl li:nth-child(2){animation-delay:.2s}.anim .wn-hero .wn-hl li:nth-child(3){animation-delay:.28s}.anim .wn-hero .wn-hl li:nth-child(4){animation-delay:.36s}
@keyframes wnRise{from{opacity:0;transform:translateY(14px)}}

/* chips */
.wn-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.wn-chip{border:1px solid var(--line);background:var(--card);color:#fff;font:800 14px Nunito,sans-serif;padding:8px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,border-color .2s,transform .1s}
.wn-chip b{font-size:11px;background:rgba(255,255,255,.14);border-radius:999px;padding:1px 6px;font-weight:900}
.wn-chip.on{background:linear-gradient(#ffe680,#ffb000);color:#2a1600;border-color:transparent;box-shadow:0 3px 0 #a05600}
.wn-chip.on b{background:rgba(0,0,0,.15)}
.wn-chip:active{transform:scale(.96)}

/* timeline */
.wn-tl{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.wn-tl:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--gold),#ff5d8f 30%,#7d6bff 70%,rgba(125,107,255,.15))}
.wn-item{position:relative;margin:0 0 14px}
.wn-node{position:absolute;left:-23px;top:18px;width:15px;height:15px;border-radius:50%;background:#1b0f4a;border:3px solid #b9a8ff;box-shadow:0 0 0 4px rgba(27,15,74,.9)}
.wn-item.latest .wn-node{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px rgba(27,15,74,.9),0 0 16px rgba(255,210,63,.8)}
.wn-card{border-radius:18px;padding:12px 14px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.wn-item.latest .wn-card{border-color:rgba(255,210,63,.4)}
.wn-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wn-card .wn-ver{background:rgba(255,255,255,.14);color:#fff}
.wn-item.latest .wn-card .wn-ver{background:var(--gold);color:#1b0f4a}
.wn-latest{font-size:11px;font-weight:900;color:var(--gold);letter-spacing:.6px;text-transform:uppercase}
.wn-card h3{margin:6px 0 6px;font-size:18px;line-height:1.2;font-weight:900}
.wn-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.wn-tag{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.wn-tag.t-gameplay{color:var(--g)}.wn-tag.t-looks{color:var(--l)}.wn-tag.t-social{color:var(--s)}.wn-tag.t-fixes{color:var(--f)}
.wn-more{margin-top:10px;border:0;background:none;color:var(--gold);font:900 14px Nunito,sans-serif;padding:6px 0;cursor:pointer}
.wn-more span{display:inline-block;transition:transform .25s}
.wn-more[aria-expanded=true] span{transform:rotate(180deg)}
.wn-det{overflow:hidden}
.wn-det ul{margin:4px 0 2px;padding:10px 12px 10px 28px;border-radius:12px;background:rgba(0,0,0,.2);color:#e8e4ff;font-weight:600;font-size:14px;line-height:1.45}
.wn-det li+li{margin-top:6px}
.anim .wn-item{opacity:0;transform:translateY(16px)}
.anim .wn-item.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 40ms)}
.wn-item.flash .wn-card{animation:wnFlash 2s ease}
@keyframes wnFlash{0%,40%{box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(255,210,63,.6)}}
.wn-empty{text-align:center;color:var(--muted)}
.wn-foot{margin:22px 0 0;text-align:center;color:var(--muted);font-weight:700;font-size:14px}
.wn-foot a{color:var(--gold);text-decoration:none;font-weight:900}
.wn-toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:10;
  background:#241552;border:1px solid var(--line);padding:10px 16px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:.25s;max-width:90vw;overflow-wrap:anywhere}
.wn-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:340px){.wn-wrap{padding-left:10px;padding-right:10px}.wn-top{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}.wn-chip{padding:7px 10px;font-size:13px}.wn-hero{padding:16px 14px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.wn-item{opacity:1!important;transform:none!important}}