/* Lost Crafters Night shift theme. Ported from mockups/v2/nightshift.html. */
:root{
  --g:#4DDC32; --g-ink:#06150a; --g-dim:rgba(77,220,50,.14); --g-line:rgba(77,220,50,.45);
  --bg:#0d0e10; --bg2:#131417; --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --tx:#eef0f2; --mu:#a9aeb6; --mu2:#8f959d;
  --r:18px; --r-s:12px;
  --display:'Sora',system-ui,sans-serif; --text:'Manrope',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark;scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:500 16px/1.55 var(--text);font-variant-numeric:tabular-nums;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:-2;background:
  radial-gradient(900px 520px at 78% -6%,rgba(77,220,50,.17),transparent 65%),
  radial-gradient(700px 480px at 4% 38%,rgba(77,220,50,.07),transparent 65%),
  var(--bg)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:8px;box-shadow:0 0 0 5px rgba(77,220,50,.25)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.1}
.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.g{color:var(--g)}
svg{flex:none}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(13,14,16,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,3vw,40px);min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;padding:6px 0}
.brand img{height:50px;width:auto;filter:drop-shadow(0 0 14px rgba(77,220,50,.35))}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font:600 14px var(--display);color:var(--mu);white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover{color:var(--tx);background:var(--panel2)}
.nav a[aria-current=page]{color:var(--g-ink);background:var(--g);box-shadow:0 0 24px rgba(77,220,50,.4)}
.nav .cnt{font:700 11px var(--mono);background:rgba(255,255,255,.12);padding:2px 7px;border-radius:99px}
.nav a[aria-current=page] .cnt{background:rgba(0,0,0,.18)}
@media(max-width:700px){.hdr .wrap{min-height:0;padding-top:6px}.nav{margin-left:0;width:100%;padding-bottom:8px;gap:0}.nav a{padding:9px 12px}.brand img{height:42px}}

/* panels */
.pan{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.35)}
.gl::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(77,220,50,.2),transparent 62%)}
.gl:hover::after{opacity:1}
.lift{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.lift:hover{transform:translateY(-4px);border-color:var(--g-line)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:700 14px var(--display);border:1px solid var(--line2);background:var(--panel);transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--panel2);transform:translateY(-1px)}
.btn.pri{background:var(--g);color:var(--g-ink);border-color:var(--g);box-shadow:0 0 28px rgba(77,220,50,.35)}
.btn.pri:hover{background:#6af04f}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font:600 13px var(--text);color:var(--mu);transition:all .2s;white-space:nowrap}
button.chip:hover{color:var(--tx);border-color:var(--line2)}
.chip[aria-pressed=true],.chip[aria-selected=true]{background:var(--g);color:var(--g-ink);border-color:var(--g);box-shadow:0 0 18px rgba(77,220,50,.3)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font:600 12px var(--text);background:var(--panel2);color:var(--tx);border:1px solid var(--line)}
.tag.gr{background:var(--g-dim);color:var(--g);border-color:var(--g-line)}

/* live */
.dot{width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(77,220,50,.7),0 0 12px var(--g);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(77,220,50,0),0 0 12px var(--g)}100%{box-shadow:0 0 0 0 rgba(77,220,50,0),0 0 12px var(--g)}}
.livebadge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:99px;background:var(--g);color:var(--g-ink);font:800 11px var(--display);letter-spacing:.1em;box-shadow:0 0 22px rgba(77,220,50,.55)}
.livebadge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--g-ink);animation:blink 1.4s infinite}
.livebadge::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);animation:shim 2.6s infinite}
@keyframes shim{60%,100%{transform:translateX(120%)}}
@keyframes blink{50%{opacity:.25}}

/* media card */
.mc{display:flex;flex-direction:column;overflow:hidden;height:100%}
.mc.live{border-color:var(--g-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(77,220,50,.25),0 0 46px rgba(77,220,50,.2),0 14px 40px rgba(0,0,0,.4)}
.th{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1a1c20}
.th img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);transition:transform .6s cubic-bezier(.2,.8,.2,1);filter:saturate(1.05)}
.mc:hover .th img{transform:scale(1.72)}
.th::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.65))}
.th>*{z-index:2}
.th .tl{position:absolute;top:12px;left:12px}
.th .tr{position:absolute;top:12px;right:12px}
.th .bl{position:absolute;bottom:10px;left:12px;font:700 13px var(--text)}
.th .br{position:absolute;bottom:10px;right:12px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);font:700 12px var(--text);color:#fff}
.mb{display:flex;gap:12px;padding:14px 16px 16px;align-items:flex-start;flex:1}
.mb img{border-radius:10px;border:1px solid var(--line2);background:#1c1e22}
.mb h3{font:700 16px/1.3 var(--display);letter-spacing:-.01em}
.mb p{color:var(--mu);font-size:13.5px;margin-top:4px}
.mb p b{color:var(--tx);font-weight:700}
.plat{display:inline-flex;align-items:center;gap:5px}

/* sections */
main{flex:1;outline:none}
.sec{padding-top:clamp(32px,5vw,64px)}
.sh{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sh h2{font-size:clamp(24px,2.6vw,34px)}
.sh .mono{margin-bottom:8px;display:block}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.pagehead{padding-top:clamp(28px,4vw,56px)}
.pagehead h1{font-size:clamp(34px,4.6vw,64px)}
.pagehead p{color:var(--mu);margin-top:10px;max-width:60ch}

/* hero */
.hero{position:relative;padding-top:clamp(28px,5vw,64px)}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,84px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--g);text-shadow:0 0 38px rgba(77,220,50,.55)}
.hero .logo{width:min(300px,62%);margin-bottom:22px;filter:drop-shadow(0 0 40px rgba(77,220,50,.4))}
.invite{margin-top:18px;color:var(--mu);font-size:14.5px;display:flex;align-items:center;gap:10px}
.invite::before{content:'';width:22px;height:2px;background:var(--g);box-shadow:0 0 10px var(--g)}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.livemod{padding:clamp(14px,1.6vw,22px)}
.livemod>header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.livemod>header h2{font-size:20px}
.livemod>header .mono{margin-left:auto}
.offair{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:14px;margin-bottom:14px}
.offair i{width:9px;height:9px;border-radius:50%;border:2px solid var(--mu2)}
@media(max-width:980px){.hero-in{grid-template-columns:1fr}}

/* stats */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px)}
.bento>*{padding:clamp(18px,2vw,28px)}
.n-big{font:800 clamp(36px,4.4vw,64px)/1 var(--display);letter-spacing:-.04em;color:var(--g);text-shadow:0 0 30px rgba(77,220,50,.35);margin:8px 0 6px}
.n-mid{font:800 clamp(28px,3vw,42px)/1 var(--display);letter-spacing:-.03em;margin:8px 0 6px}
.unit{font:600 14px var(--text);color:var(--mu)}
.bars{display:grid;gap:12px;margin-top:16px}
.bar{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;font-size:14px}
.bar .t{height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.bar .t i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2fa81b,var(--g));box-shadow:0 0 14px rgba(77,220,50,.6);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar.in .t i{width:var(--w)}
.bar span:last-child{font-weight:700;min-width:5ch;text-align:right}
@media(max-width:520px){.bar{grid-template-columns:84px 1fr auto;gap:8px}}
.b-a{grid-column:span 5}.b-b{grid-column:span 7}.b-c{grid-column:span 3}.b-d{grid-column:span 3}.b-e{grid-column:span 3}.b-f{grid-column:span 3}
@media(max-width:1100px){.b-a,.b-b{grid-column:span 12}.b-c,.b-d,.b-e,.b-f{grid-column:span 6}}
@media(max-width:560px){.b-c,.b-d,.b-e,.b-f{grid-column:span 12}}

/* awards */
/* Award card: tier badge and title on top, details under, the tier's certificate scroll hanging off the bottom-right corner */
.awards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px;padding-bottom:26px}
@media(max-width:1000px){.awards-grid{gap:26px 16px}}
@media(max-width:700px){.awards-grid{grid-template-columns:1fr}}
.award{container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 18px 22px;min-height:190px;overflow:visible;text-align:left}
.award-head{display:flex;align-items:center;gap:12px;padding-right:6px}
.award-head h3{font:700 16px/1.2 var(--display);color:var(--tx);letter-spacing:0}
.award-badge{flex:none;filter:drop-shadow(0 0 10px rgba(77,220,50,.2))}
.award .who{display:flex;align-items:center;gap:8px;font:700 16px var(--display);margin-top:6px}
.award .who img{border-radius:7px;image-rendering:pixelated}
.award .v{font:800 24px var(--display);color:var(--g)}
.award .v small{font:600 12px var(--text);color:var(--mu)}
.award .ru{list-style:none;padding:0;margin-top:6px;width:calc(100% + 24px - clamp(52px,34cqw,92px));display:grid;gap:4px}
.award .ru li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:13px;color:var(--mu)}
.award .ru a{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.award .ru a:hover{color:var(--g)}
.award .ru img{flex:none;border-radius:5px;image-rendering:pixelated}
.award .ru .rk{font:600 11px var(--mono)}
.award .ru b{font-weight:700;color:var(--tx)}
.award-cert{position:absolute;right:-14px;bottom:-22px;width:clamp(52px,34cqw,92px);height:auto;image-rendering:pixelated;pointer-events:none;transform:rotate(7deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
a.award{color:inherit}
/* live stats: compact "who is leading" tiles for a server that is running */
.leaders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.leader{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px 14px;container-type:inline-size}
.leader .award-head h3{font:700 15px/1.2 var(--display);color:var(--tx);letter-spacing:0}
.leader .who{display:flex;align-items:center;gap:8px;font:700 15px var(--display);margin-top:4px;min-width:0}
.leader .who img{border-radius:6px;image-rendering:pixelated;flex:none}
.leader .v{font:800 22px var(--display);color:var(--g)}
.leader .v small{font:600 12px var(--text);color:var(--mu)}
.leader .lead{font:600 12px var(--text);color:var(--mu)}
.upd{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--g-line);border-radius:999px;background:var(--g-dim);font:600 13px var(--text);color:var(--tx);white-space:nowrap}
.upd .dot{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
.upd.stale{border-color:rgba(255,196,77,.5);background:rgba(255,196,77,.1)}
.upd.stale .dot{background:#ffc44d;box-shadow:0 0 8px #ffc44d}
.more-leaders,.more-awards{margin-top:18px}
.more-leaders summary,.more-awards summary{cursor:pointer;display:inline-block;padding:8px 16px;border:1px solid var(--line2);border-radius:999px;font:600 13px var(--text);color:var(--mu);margin-bottom:16px}
.more-leaders summary:hover,.more-awards summary:hover{color:var(--tx)}
@media(max-width:1000px){.leaders{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.leaders{grid-template-columns:1fr}}
/* the card sheds detail as its column narrows: names go first (faces and numbers stay), then sizes shrink */
@container (max-width:215px){
  .award-head{gap:9px;padding-right:0}
  .award-head h3{font-size:14px}
  .award .v{font-size:20px}
  .award .who{font-size:14px;gap:6px}
  .award .ru a{font-size:0;gap:0}
  .award .ru img{width:20px;height:20px}
  .award .ru li{font-size:12px}
}
@container (max-width:150px){
  .award-badge{width:34px;height:34px}
  .award-head h3{font-size:13px}
  .award .v{font-size:18px}
}
@media(max-width:700px){.award-cert{right:-4px;width:64px}.award .ru{width:calc(100% - 78px)}}
.tier-label{margin:28px 0 14px}

/* members */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 22px}
.search{position:relative;flex:1 1 260px;max-width:420px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mu)}
.search input{width:100%;padding:12px 16px 12px 42px;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--tx);font:500 15px var(--text)}
.search input::placeholder{color:var(--mu2)}
.search input:focus{outline:2px solid var(--g);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mem{display:flex;gap:14px;align-items:center;padding:16px;height:100%}
.mem .av{position:relative;flex:none}
.mem .av img{border-radius:14px;border:1px solid var(--line2);background:#1b1d21}
.mem.live{border-color:var(--g-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 34px rgba(77,220,50,.18),0 14px 40px rgba(0,0,0,.35)}
.mem .av .dot{position:absolute;right:-3px;top:-3px;border:2px solid var(--bg)}
.mem h3{font:700 17px var(--display);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mem p{font-size:13px;color:var(--mu);margin-top:2px}
.mem .mt{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.empty{padding:40px;text-align:center;color:var(--mu)}

/* profile */
.prof{display:grid;grid-template-columns:minmax(300px,clamp(300px,29vw,440px)) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);padding-top:clamp(24px,3vw,44px)}
/* the player is a large figure standing on the page, not a picture in a box; it stays in view while the profile scrolls */
.stage{container-type:inline-size;position:sticky;top:72px;align-self:start;display:flex;align-items:flex-start;justify-content:flex-start;padding:0;overflow:visible;min-height:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage::before{content:'';position:absolute;inset:-12% -35% -5% -35%;background:radial-gradient(42% 48% at 50% 46%,rgba(77,220,50,.22),transparent 72%);pointer-events:none}
.stage::after{display:none}
.stage .skin{position:relative;z-index:2;width:auto;max-width:none;height:min(820px,calc(100vh - 110px),190cqw);margin-left:-14%;object-fit:contain;filter:drop-shadow(0 34px 60px rgba(0,0,0,.75));-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
@keyframes float{50%{transform:translateY(-8px)}}
.stage .stat-live{position:absolute;top:16px;left:16px;z-index:3}
.id{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.id img{border-radius:18px;border:1px solid var(--g-line);box-shadow:0 0 30px rgba(77,220,50,.3)}
.id h1{font-size:clamp(34px,4.4vw,60px)}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.bio{font-size:18px;margin-top:18px;max-width:60ch}
.cols{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,1.6vw,22px);margin-top:26px}
.feat{padding:18px;margin-top:26px;border-color:var(--g-line)}
.feat>header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.feat>header h2{font-size:18px}
.feat-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center}
@media(max-width:760px){.feat-in{grid-template-columns:1fr}}
.feat .th{border-radius:14px}
.feat h3{font:700 22px/1.25 var(--display)}
.feat p{color:var(--mu);margin-top:8px;font-size:14.5px}
.socials{padding:20px}
.socials h2,.statp h2{font-size:18px;margin-bottom:14px;display:flex;gap:10px;align-items:center}
.sl{list-style:none;padding:0;display:grid;gap:8px}
.sl a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:all .2s;font-weight:600}
.sl a:hover{border-color:var(--g-line);background:var(--g-dim)}
.sl a svg{color:var(--g)}
.sl small{margin-left:auto;color:var(--mu);font-weight:500}
.statp{padding:20px}
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.st{padding:14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.st b{display:block;font:800 26px/1.1 var(--display);letter-spacing:-.02em;margin-top:4px}
.st .sub{font-size:12.5px;color:var(--mu);margin-top:4px;display:block}
.st .t{height:5px;border-radius:5px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.st .t i{display:block;height:100%;width:0;background:var(--g);box-shadow:0 0 10px var(--g);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.st.in .t i{width:var(--w)}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
@media(max-width:900px){.prof{grid-template-columns:1fr}.stage{position:relative;top:0;justify-content:center}.stage .skin{height:420px;margin-left:0}}

/* detail pages */
.dh{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);margin-top:clamp(20px,3vw,36px);min-height:320px;display:flex;align-items:flex-end;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.dh>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.62)}
.dh::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(13,14,16,.96) 8%,rgba(13,14,16,.35) 60%,rgba(77,220,50,.12)),radial-gradient(60% 80% at 90% 0%,rgba(77,220,50,.3),transparent 70%)}
.dh-in{position:relative;z-index:2;padding:clamp(20px,3vw,40px);width:100%;display:flex;gap:24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.dh h1{font-size:clamp(36px,5vw,72px)}
.dh .meta{margin-top:14px}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--mu);font:600 13px var(--text);margin-top:clamp(20px,3vw,32px)}
.crumb:hover{color:var(--g)}
.kv{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.kv div b{display:block;font:800 clamp(24px,2.6vw,36px) var(--display);letter-spacing:-.03em}
.kv div b.g{text-shadow:0 0 24px rgba(77,220,50,.5)}
.tw{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(12px,1.4vw,18px)}
.tile{padding:18px}
.tile b{display:block;font:800 28px/1.1 var(--display);letter-spacing:-.03em;margin:6px 0 2px}
.rl{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.rl a{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-weight:700;transition:all .2s}
.rl a:hover{border-color:var(--g-line);background:var(--g-dim)}
.rl img{border-radius:8px}

/* world cards */
.wc{display:flex;flex-direction:column;overflow:hidden;height:100%}
.wc .th::after{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(13,14,16,.85))}
.wc .th img{transform:none;filter:saturate(.9) brightness(.8)}
.wc:hover .th img{transform:scale(1.06)}
.wc .bd{padding:16px 18px 18px;display:grid;gap:6px}
.wc h3{font:700 20px var(--display)}
.wc .d{color:var(--mu);font-size:14px}

/* table */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:12px 14px;text-align:right;white-space:nowrap}
th:nth-child(1),td:nth-child(1){text-align:center;width:56px}
th:nth-child(2),td:nth-child(2){text-align:left}
thead th{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mu);border-bottom:1px solid var(--line2);padding-top:16px}
thead th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:6px}
thead th button:hover,thead th button[data-on=true]{color:var(--g)}
tbody tr{border-bottom:1px solid rgba(255,255,255,.06);transition:background .2s}
tbody tr:hover{background:var(--g-dim)}
tbody tr:first-child td:first-child{color:var(--g);text-shadow:0 0 14px var(--g)}
td.nm a{display:flex;gap:10px;align-items:center;font-weight:700}
td.nm img{border-radius:7px}
td.lv{min-width:220px}
.lvb{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.lvb .t{flex:1;height:7px;border-radius:7px;background:rgba(255,255,255,.09);overflow:hidden;min-width:90px}
.lvb .t i{display:block;height:100%;background:linear-gradient(90deg,#2fa81b,var(--g));box-shadow:0 0 12px var(--g);border-radius:7px}
.lvb b{font:800 16px var(--display);color:var(--g);min-width:3ch}
.soon{padding:clamp(26px,4vw,56px);border:1.5px dashed var(--line2);border-radius:var(--r);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 12px,transparent 12px 24px);display:grid;gap:18px;justify-items:start}
.soon h3{font-size:24px}
.skel{width:100%;display:grid;gap:10px}
.skel i{display:block;height:34px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:sk 2.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

/* footer */
.ftr{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line);background:rgba(0,0,0,.35)}
.ftr .wrap{display:flex;gap:18px 40px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-top:30px;padding-bottom:34px;color:var(--mu);font-size:14px}
.ftr strong{font:700 15px var(--display);color:var(--tx)}
.ftr .small{font-size:13px;color:var(--mu2)}
.ftr a:hover{color:var(--g)}
.ftr .small a{color:var(--mu)}


/* round 2 */
.band{margin-top:clamp(56px,8vw,110px);background:var(--g);color:var(--g-ink);position:relative;overflow:hidden}
.band::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 200% at 85% 0%,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
.band .wrap{position:relative;z-index:1;padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(28px,4vw,52px);display:flex;gap:16px 40px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.band p{font:800 clamp(24px,3.6vw,52px)/1.05 var(--display);letter-spacing:-.035em;max-width:30ch;text-wrap:balance}
.band .logo{width:clamp(96px,12vw,170px);filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.ftr{margin-top:0}
.pan.solid{background:linear-gradient(160deg,#63ec49,var(--g) 55%,#3fc427);color:var(--g-ink);border-color:#8bf478;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 60px rgba(77,220,50,.35),0 14px 40px rgba(0,0,0,.35)}
.pan.solid .mono,.pan.solid .unit{color:rgba(6,21,10,.78)}
.pan.solid .n-big{color:var(--g-ink);text-shadow:none}
.pan.solid b{color:var(--g-ink)!important;text-shadow:none!important}
.pan.solid .bar .t{background:rgba(0,0,0,.2)}
.pan.solid .bar .t i{background:var(--g-ink);box-shadow:none}
.pan.solid::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.4),transparent 62%)}
.conn{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sync{font:500 11px var(--mono);letter-spacing:.04em;color:var(--mu);margin-left:2px}
.tag.gr .sync{color:rgba(77,220,50,.85)}
.nores{display:flex;gap:16px;align-items:center;padding:22px;border:1.5px dashed var(--line2);border-radius:14px;color:var(--mu);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px)}
.nores b{display:block;color:var(--tx);font:700 17px var(--display)}
.feat>header.solidhd{margin:-18px -18px 16px;padding:12px 18px;background:var(--g);color:var(--g-ink);border-radius:var(--r) var(--r) 0 0}
.feat>header.solidhd .mono{color:rgba(6,21,10,.8)}
.feat>header.solidhd .tag{background:rgba(0,0,0,.14);color:var(--g-ink);border-color:rgba(0,0,0,.2)}
.nest{position:relative;margin-left:clamp(10px,2vw,28px);padding-left:clamp(18px,2.4vw,34px);border-left:3px solid var(--g);box-shadow:-10px 0 24px -14px var(--g)}
.nest .grid{gap:14px}
.sw{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 18px 18px;height:100%}
.sw::before{content:'';position:absolute;left:calc(-1 * clamp(18px,2.4vw,34px) - 3px);top:34px;width:clamp(18px,2.4vw,34px);height:3px;background:var(--g)}
.sw h3{font:700 22px var(--display);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sw .d{color:var(--mu);font-size:14px}
.sw.spc{border-color:var(--g-line);background:linear-gradient(180deg,rgba(77,220,50,.14),rgba(255,255,255,.03))}
.state{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--mu)}
.state.on{background:var(--g);color:var(--g-ink);border-color:var(--g)}
.state.on::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g-ink)}
.ball{display:inline-block;vertical-align:middle}
.dn{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.pk{display:grid;gap:12px;margin-top:14px;list-style:none;padding:0}
.pk li{display:grid;grid-template-columns:28px 130px 1fr auto;gap:12px;align-items:center;font-size:14px}
.pk .t{height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.pk .t i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2fa81b,var(--g));box-shadow:0 0 14px rgba(77,220,50,.6);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pk li.in .t i{width:var(--w)}
.pk b{min-width:6ch;text-align:right}
@media(max-width:520px){.pk li{grid-template-columns:24px 92px 1fr auto;gap:8px}.dn{grid-template-columns:1fr;justify-items:center;text-align:center}}
.jc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:1000px){.jc{grid-template-columns:1fr}}
.jstrip{padding:18px 20px;margin-top:26px;display:flex;gap:16px 22px;flex-wrap:wrap;align-items:center}
.jstrip .it b{display:block;font:800 26px/1.1 var(--display);letter-spacing:-.02em}
.jstrip .it{min-width:64px}
.jstrip .ttl{display:flex;gap:12px;align-items:center;margin-right:auto;flex:1 1 210px}
.jstrip .ttl h2{font-size:18px}
.pk.in,.pk li.in{}


/* vault hunters detail */
.th{height:auto;width:100%;contain:layout paint}
.abil{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ab{padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);display:grid;gap:6px}
.ab b{font:700 15px var(--display)}
.ab .lvl{font:800 22px/1 var(--display);color:var(--g)}
.ab .lvl small{font:600 11px var(--mono);color:var(--mu);letter-spacing:.08em;margin-left:4px}
.spec{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.spec.has{color:var(--g)}
.tal{list-style:none;padding:0;display:grid;gap:9px}
.tal li{display:grid;grid-template-columns:22px minmax(0,150px) 1fr 2.5ch;gap:10px;align-items:center;font-size:14px}
.tal .t{height:7px;border-radius:7px;background:rgba(255,255,255,.09);overflow:hidden}
.tal .t i{display:block;height:100%;background:linear-gradient(90deg,#2fa81b,var(--g));box-shadow:0 0 10px var(--g)}
.tal .rk{font:600 11px var(--mono);color:var(--mu)}
.tal b{text-align:right}
.gods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.god{text-align:center;display:grid;justify-items:center;gap:4px}
.god span{font:600 12px var(--text);color:var(--mu)}
@media(max-width:520px){.gods{grid-template-columns:repeat(2,1fr)}.tal li{grid-template-columns:20px minmax(0,110px) 1fr 2.5ch}}
.drawer-bg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-bg.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(620px,100vw);background:linear-gradient(180deg,#17191c,#0f1012);border-left:1px solid var(--g-line);box-shadow:-30px 0 80px rgba(0,0,0,.6),-1px 0 40px rgba(77,220,50,.15);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto;padding:24px clamp(16px,3vw,28px) 40px}
.drawer.on{transform:none}
.drawer header{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.drawer header img{border-radius:14px;border:1px solid var(--g-line)}
.drawer header h2{font-size:26px}
.drawer .x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;background:var(--panel)}
.drawer .x:hover{border-color:var(--g);color:var(--g)}
.drawer h3{font:700 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin:24px 0 12px;font-weight:500}
.drawer .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
td.nm button{display:flex;gap:10px;align-items:center;font:700 16px var(--text);padding:4px 6px;border-radius:8px;text-align:left}
td.nm button:hover{color:var(--g)}
.use{display:flex;gap:8px;flex-wrap:wrap}
.use .chip b{color:var(--g);font-weight:800}
.vhs{padding:18px 20px;margin-top:26px}
.vhs .row{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}
.vhs .it b{display:block;font:800 26px/1.1 var(--display);letter-spacing:-.02em}
.vhs .sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .bar .t i,.st .t i,.pk .t i{width:var(--w)!important}
}

/* ---- site additions for the PHP app (user menu, live maps menu) ---- */
.nav details{position:relative}
.nav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font:600 14px var(--display);color:var(--mu);white-space:nowrap}
.nav summary::-webkit-details-marker{display:none}
.nav summary:hover,.nav details[open] summary{color:var(--tx);background:var(--panel2)}
.nav summary img{width:20px;height:20px;border-radius:5px;image-rendering:pixelated}
.nav .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-s);padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:40}
.nav .menu a{display:flex;border-radius:8px;padding:9px 12px;width:100%}
.nav{overflow:visible}
@media(max-width:700px){.nav{overflow-x:auto}.nav .menu{position:fixed;left:16px;right:16px;top:70px}}

/* the season page's "Show all N awards": the label swaps while it is open; summary markers stay hidden */
.more-awards summary{list-style:none}
.more-awards summary::-webkit-details-marker{display:none}
.more-awards .when-open{display:none}
.more-awards[open] .when-closed{display:none}
.more-awards[open] .when-open{display:inline}