@font-face{font-family:"Pirata One";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pirata-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/caveat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/unbounded-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}
:root{color-scheme:dark;--void:#07050a;--deep:#120c16;--panel:rgba(255,240,220,.04);--line:rgba(255,220,170,.13);--fg:#f6eee2;--dim:#a99a8c;
--gold:#f2c14e;--gold2:#b9792a;--flame:#ff7a2f;--hot:#ffd23f;--mog:#ff3d7f;--blood:#c8243b;--a:#ff7a2f;--b:#2bd4a0;--teal:#2bd4a0;
--bl:"Pirata One","UnifrakturCook",serif;--display:"Unbounded","Arial Black",system-ui,sans-serif;--body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--void);color:var(--fg)}
body{font-family:var(--body);font-size:16px;line-height:1.55;min-height:100vh;overflow-x:hidden;
background:radial-gradient(70% 45% at 80% -5%,rgba(200,36,59,.28),transparent 60%),radial-gradient(60% 40% at 0% 25%,rgba(242,193,78,.10),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(255,122,47,.12),transparent 60%),var(--void);background-repeat:no-repeat}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55));z-index:0}
body>*{position:relative;z-index:1}
a{color:var(--gold)}
.bl{font-family:var(--bl);font-weight:400;letter-spacing:.01em}
.gut{padding-left:16px;padding-right:16px}
.max{max-width:1120px;margin:0 auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mono{font-family:var(--mono)} .dim{color:var(--dim)} .small{font-size:13px}
.eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.8;margin:0 0 10px;font-weight:400}
/* embers */
.embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.embers i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--flame);box-shadow:0 0 8px 2px rgba(255,122,47,.7);opacity:0;animation:ember var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(40px,-105vh);opacity:0}}
/* header */
.top{padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line);backdrop-filter:blur(6px);background:rgba(7,5,10,.5)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--fg)}
.logo .lg{font-family:var(--bl);font-size:32px;line-height:1;color:var(--gold);text-shadow:0 0 18px rgba(242,193,78,.35)}
.logo .lr{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.3em}
nav{display:flex;gap:16px;align-items:center} nav a{color:var(--fg);text-decoration:none;font-weight:600}
footer{border-top:1px solid var(--line);padding-top:24px;padding-bottom:40px;color:var(--dim);font-size:13px;margin-top:80px}
footer .bl{font-size:18px;color:var(--gold)}
/* buttons */
.btn,button{font:600 14px var(--body);color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .2s,border-color .2s,transform .12s,box-shadow .2s}
.btn:hover{background:rgba(255,240,220,.09);border-color:rgba(242,193,78,.4)} .btn:active{transform:scale(.96)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,#ffd979,#f2a93b 55%,#c9731f);border-color:#ffd979;color:#2a1405;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:0 6px 24px rgba(242,169,59,.28),inset 0 -2px 0 rgba(0,0,0,.15)}
.btn.primary:hover{box-shadow:0 8px 32px rgba(242,169,59,.45);transform:translateY(-1px)}
.btn.big{padding:14px 26px;font-size:16px} .btn.sm{padding:7px 14px;font-size:13px}
.btn.ghost{background:transparent} .btn.on{border-color:var(--teal);color:var(--teal);background:rgba(43,212,160,.12)}
.die{font-size:18px;padding:6px 12px} .die:hover{transform:rotate(-14deg) scale(1.1)}
/* hero */
.hero{padding-top:56px;padding-bottom:32px;position:relative;overflow:hidden}
.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:-1}
.herogrid{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center}
@media (max-width:820px){.herogrid{grid-template-columns:1fr}.herogaunt{display:none}}
h1{margin:0;font-size:clamp(58px,10vw,128px);line-height:.88;text-wrap:balance;color:var(--fg);text-shadow:0 4px 0 rgba(0,0,0,.4)}
h1 em{font-style:normal;background:linear-gradient(180deg,#fff6d6,var(--gold) 45%,var(--flame) 80%,var(--blood));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,122,47,.45))}
.h1sm{font-size:clamp(40px,6vw,64px);margin-bottom:24px}
h2{font-family:var(--display);font-weight:700;font-size:24px;margin:0 0 16px}
h2.bl,h3.bl{font-family:var(--bl);font-weight:400}
.h2sm{font-size:26px;margin:36px 0 12px;color:var(--gold)}
.lede{color:var(--dim);max-width:58ch;font-size:18px;margin:22px 0 0} .lede b{color:var(--fg)} .lede .mog{color:var(--mog)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.herogaunt{position:relative;display:grid;place-items:center;height:360px}
.herogaunt svg{width:220px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(242,193,78,.25));animation:hover 4s ease-in-out infinite}
.herogaunt .shadow{position:absolute;bottom:20px;width:160px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(8px);animation:shadow 4s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(-10px) rotate(-8deg)}50%{transform:translateY(10px) rotate(-3deg)}}
@keyframes shadow{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1);opacity:.8}}
.loop{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin-top:36px;list-style:none;font-size:13px}
.loop li{border:1px solid var(--line);border-radius:99px;padding:7px 14px;background:rgba(0,0,0,.25)}
.loop b{font-family:var(--bl);font-weight:400;color:var(--gold);font-size:16px;margin-right:4px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
/* scroll / contract */
.scroll{position:relative;display:grid;gap:16px;padding:clamp(22px,4vw,40px);border-radius:6px;
background:linear-gradient(180deg,rgba(255,236,200,.07),rgba(255,236,200,.025)),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px),#140e12;
border:1px solid rgba(242,193,78,.35);box-shadow:0 0 0 6px rgba(20,14,18,.9),0 0 0 7px rgba(242,193,78,.22),0 30px 80px rgba(0,0,0,.5)}
.scroll::before,.scroll::after{content:"❦";position:absolute;font-size:22px;color:var(--gold);opacity:.6}
.scroll::before{top:8px;left:12px} .scroll::after{bottom:8px;right:12px;transform:rotate(180deg)}
.scroll-h h2{font-size:clamp(34px,5vw,48px);margin:0;color:var(--gold);line-height:1}
.scroll label,.scroll .label{color:var(--fg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:560px){.two{grid-template-columns:1fr}}
label,.label{display:grid;gap:6px;font-weight:600;font-size:14px} label small{color:var(--dim);font-weight:400}
input,textarea,select{font:16px var(--body);color:var(--fg);background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
textarea{resize:vertical}
.rollrow{display:flex;gap:8px;align-items:center} .rollrow input{flex:1}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
code{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.45);padding:3px 6px;border-radius:6px;word-break:break-all;cursor:pointer;color:var(--gold)}
details summary{cursor:pointer;margin:4px 0}
/* signature pad */
.sigpad{position:relative;border-radius:10px;background:linear-gradient(180deg,rgba(255,236,200,.05),rgba(255,236,200,.02));border:1px dashed rgba(242,193,78,.45);height:140px;touch-action:none}
.sigpad canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.sigpad::after{content:"";position:absolute;left:16px;right:16px;bottom:30px;border-bottom:1px solid rgba(242,193,78,.35);pointer-events:none}
.sighint{position:absolute;left:16px;bottom:8px;font-family:var(--mono);font-size:11px;color:var(--dim);pointer-events:none;letter-spacing:.08em;text-transform:uppercase}
.sigpad.has .sighint{opacity:0}
.sigpad [data-clear]{position:absolute;right:8px;top:8px}
.sigpad.err{animation:shake .4s;border-color:var(--mog)}
/* contract page */
.contract{margin-top:32px}
.parties{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.party{display:grid;justify-items:center;text-align:center;gap:8px}
.party .pname{display:grid} .party b{font-family:var(--display);font-size:clamp(18px,2.6vw,28px);line-height:1.1}
.handle{font-family:var(--mono);color:var(--dim);font-size:12px}
.dares{font-size:clamp(28px,4vw,44px);color:var(--flame);text-shadow:0 0 20px rgba(255,122,47,.4)}
.trash{font-family:var(--bl);font-size:clamp(26px,3.6vw,40px);line-height:1.1;text-align:center;margin:4px 0;color:var(--fg)}
.terms{display:grid;gap:12px}
.terms>div{display:grid;gap:4px;padding:14px 16px;border-radius:8px;background:rgba(0,0,0,.3);border-left:3px solid var(--gold)}
.terms .forfeit{border-left-color:var(--blood)}
.terms .eyebrow{margin:0} .terms b{font-family:var(--display);font-weight:700;font-size:clamp(16px,2.1vw,21px);line-height:1.25}
.fine{margin:0;text-align:center;font-style:italic}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:6px;align-items:end} @media (max-width:640px){.sigs{grid-template-columns:1fr}}
.sigline{display:grid;gap:6px}
.sig{position:relative;height:110px;border-bottom:1px solid rgba(242,193,78,.5);color:#ffe7a8;display:flex;align-items:flex-end}
.sigsvg{height:100%;width:auto;max-width:85%;filter:drop-shadow(0 0 6px rgba(255,210,120,.25))}
.typed{font-family:"Caveat",cursive;font-weight:700;font-size:42px}
.seal{position:absolute;right:0;bottom:-26px;width:76px;height:76px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both;transform:rotate(-12deg)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(-12deg);opacity:1}}
.accept{display:grid;gap:12px}
.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,44px);color:var(--mog);border:4px solid var(--mog);border-radius:10px;padding:2px 14px;opacity:.92;pointer-events:none;mix-blend-mode:screen}
.stamp.big{font-size:clamp(56px,10vw,120px);border-width:8px}
/* crests */
.crest{position:relative;width:72px;height:84px;display:grid;place-items:center;clip-path:path("M0 0 H72 V44 C72 66 54 78 36 84 C18 78 0 66 0 44 Z");background:linear-gradient(160deg,var(--a),#7a2a08)}
.crest.b{background:linear-gradient(160deg,var(--b),#0b4a39)}
.crest span{font-family:var(--bl);font-size:34px;color:rgba(255,255,255,.9);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.crest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crest.lg{width:110px;height:128px;clip-path:path("M0 0 H110 V66 C110 100 82 118 55 128 C28 118 0 100 0 66 Z")} .crest.lg span{font-size:52px}
.crest.sm{width:30px;height:35px;clip-path:path("M0 0 H30 V18 C30 27 22 32 15 35 C8 32 0 27 0 18 Z")} .crest.sm span{font-size:15px}
.crest.xs{width:22px;height:26px;clip-path:path("M0 0 H22 V13 C22 20 16 24 11 26 C6 24 0 20 0 13 Z")} .crest.xs span{font-size:12px}
/* cards */
.feed{display:grid;gap:12px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rcard{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:12px;background:rgba(20,14,18,.75);color:var(--fg);text-decoration:none;transition:border-color .2s,transform .2s}
.rcard:hover{border-color:var(--gold);transform:translateY(-2px) rotate(-.3deg)}
.rcard .claim{font-family:var(--bl);font-size:22px;line-height:1.15}
.vs{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .vs b{font-weight:600} .vs i{font-style:normal;color:var(--flame);font-family:var(--display);font-size:12px}
.pill{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:4px 10px}
.pill.pending{color:var(--gold)} .pill.live{color:var(--teal)} .pill.ducked,.pill.mogged{color:var(--mog)}
.page{padding-top:32px}
.toprow{margin-top:8px}
.status{color:var(--dim);font-size:17px;margin:14px 0 0;text-align:center} .status b{color:var(--fg)}
/* joust */
.joust{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-top:24px}
.banner{position:relative;display:grid;justify-items:center;gap:8px;padding:26px 16px 48px;text-align:center;clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);background:linear-gradient(180deg,rgba(255,122,47,.32),rgba(255,122,47,.08));border-top:4px solid var(--a);animation:wave 5s ease-in-out infinite;transform-origin:top center}
.banner.b{background:linear-gradient(180deg,rgba(43,212,160,.28),rgba(43,212,160,.06));border-top-color:var(--b);animation-delay:-2.5s}
.banner .bname{font-size:clamp(26px,4vw,44px);line-height:1}
.banner.won{filter:drop-shadow(0 0 30px rgba(242,193,78,.4))} .banner.lost{filter:grayscale(.6) brightness(.7)}
.crown{position:absolute;top:-6px;font-size:34px;animation:hover 3s ease-in-out infinite}
@keyframes wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-1.2deg)}}
.score{display:flex;align-items:center;gap:10px;padding-bottom:40px} .score span{font-size:clamp(56px,9vw,96px);line-height:1;color:var(--gold)} .score i{font-style:normal;font-size:28px}
@media (max-width:600px){.joust{grid-template-columns:1fr 1fr}.score{grid-column:1/-1;order:-1;justify-content:center;padding:0}}
/* rounds */
.rounds{display:grid;gap:18px;margin-top:28px}
.round{border:1px solid var(--line);border-radius:12px;padding:20px;background:rgba(20,14,18,.8);display:grid;gap:14px}
.roundno{font-size:30px;color:var(--gold);line-height:1}
.dare{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,24px);line-height:1.2;margin:0}
.entries{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch} @media (max-width:700px){.entries{grid-template-columns:1fr}.swords{display:none}}
.swords{align-self:center;font-size:26px;opacity:.7}
.entry{border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:10px;align-content:start;border-top:3px solid var(--a);background:rgba(0,0,0,.3)}
.entry.b{border-top-color:var(--b)} .entry.lead{box-shadow:0 0 0 1px var(--gold),0 0 30px rgba(242,193,78,.15)}
.entry p{margin:0} .entry .sub,.rule{display:grid;gap:8px}
.who-sm{display:flex;gap:8px;align-items:center}
.banner-btn{width:100%;border-width:2px} .banner-btn.a{border-color:rgba(255,122,47,.6)} .banner-btn.b{border-color:rgba(43,212,160,.6)}
.banner-btn.a:hover{background:rgba(255,122,47,.18)} .banner-btn.b:hover{background:rgba(43,212,160,.16)}
.banner-btn.on.a{background:var(--a);color:#1b0a02;border-color:var(--a)} .banner-btn.on.b{background:var(--b);color:#03261c;border-color:var(--b)}
.meter{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b));opacity:.25;position:relative;overflow:hidden}
.meter{opacity:1;background:rgba(43,212,160,.55)} .meter .ma{display:block;height:100%;background:linear-gradient(90deg,#ffb27a,var(--a));transition:width .6s}
.rulings{list-style:none;margin:0;padding:12px 14px;border-radius:8px;background:rgba(242,193,78,.06);border:1px solid rgba(242,193,78,.2);display:grid;gap:6px;font-size:14px}
.rulings .bl{color:var(--gold);font-size:18px}
.embed{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000} .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shot{max-width:100%;border-radius:8px}
/* herald panels */
.herald{display:grid;gap:12px;padding:18px 20px;border-radius:12px;border:1px solid rgba(242,193,78,.4);background:linear-gradient(90deg,rgba(242,193,78,.10),rgba(242,193,78,.02));margin-bottom:18px}
.herald h3{margin:0;font-size:28px;color:var(--gold);line-height:1.05}
.herald.owed{border-color:rgba(255,61,127,.5);background:linear-gradient(90deg,rgba(255,61,127,.12),transparent);margin-top:18px} .herald.owed h3{color:var(--mog)}
.proofform{display:flex;gap:8px;flex-wrap:wrap} .proofform input{flex:1;min-width:220px}
.panel{background:rgba(20,14,18,.75);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:14px}
.panel p{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:16px} @media (max-width:860px){.cols{grid-template-columns:1fr}}
.receipts,.timeline{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.rc{padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:rgba(20,14,18,.75);border-left:3px solid var(--a)}
.rc.b{border-left-color:var(--b)} .rc p{margin:6px 0} .rc .meta{font-size:13px}
.tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.tag.vouch{background:rgba(43,212,160,.18);color:var(--teal)}
.timeline li{font-size:14px}
.share{display:flex;flex-wrap:wrap;gap:8px}
form.inline{display:inline}
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:60;padding:12px 18px;border-radius:99px;background:#1c1410;border:1px solid var(--gold);animation:fadeout 5s forwards}
/* gauntlet drop intro */
.drop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 45%,rgba(200,36,59,.35),rgba(7,5,10,.96) 70%);backdrop-filter:blur(4px);text-align:center;padding:16px}
.drop-in{display:grid;justify-items:center;gap:10px;max-width:760px}
.drop-g svg{width:min(190px,40vw);animation:slam 1s cubic-bezier(.5,0,.75,0) both;filter:drop-shadow(0 30px 30px rgba(0,0,0,.7)) drop-shadow(0 0 50px rgba(242,193,78,.35))}
@keyframes slam{0%{transform:translateY(-120vh) rotate(-40deg)}70%{transform:translateY(0) rotate(-6deg)}80%{transform:translateY(-14px) rotate(-10deg)}100%{transform:translateY(0) rotate(-8deg)}}
.drop .dust{width:320px;height:40px;margin-top:-30px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,220,170,.5),transparent);opacity:0;animation:dust .9s .7s ease-out both}
@keyframes dust{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.drop h2{font-size:clamp(40px,7vw,84px);line-height:.95;margin:0;color:var(--fg);opacity:0;animation:rise .6s 1s both}
.drop h2 span{color:var(--gold)}
.drop .eyebrow{opacity:0;animation:rise .5s .9s both}
.drop-to{font-family:var(--mono);color:var(--hot);letter-spacing:.08em;margin:0;opacity:0;animation:rise .5s 1.25s both}
.drop .btn{opacity:0;animation:rise .5s 1.5s both;margin-top:10px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.shake{animation:shake .45s .72s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
.drop.out{animation:fadeout .4s forwards}
/* big moment overlays */
.mogged-intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(7,5,10,.86);backdrop-filter:blur(6px);text-align:center}
.mogged-intro>div{display:grid;gap:16px;justify-items:center;padding:16px}
.mogged-intro b{font-family:var(--display);font-weight:900;font-size:clamp(44px,11vw,130px);line-height:.9;letter-spacing:-.03em;background:linear-gradient(180deg,#fff 0%,var(--hot) 45%,var(--mog) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,61,127,.55));animation:mog .9s cubic-bezier(.2,.9,.2,1)}
.mogged-intro b.bl{font-family:var(--bl);font-weight:400;letter-spacing:0}
.mogged-intro span{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mogged-intro.auto{pointer-events:none;animation:fadeout 2.8s forwards}
@keyframes mog{0%{opacity:0;transform:scale(.5) rotate(-4deg)}40%{opacity:1;transform:scale(1.08) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes fadeout{0%,75%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}.embers{display:none}}
/* rally */
.rally{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:20px 22px;margin:0 0 18px;border-radius:12px;border:1px solid rgba(255,122,47,.45);background:linear-gradient(90deg,rgba(255,122,47,.14),rgba(200,36,59,.06))}
@media (max-width:640px){.rally{grid-template-columns:1fr}}
.rally-n{display:grid;justify-items:center;text-align:center;min-width:120px}
.rally-n .bl{font-size:72px;line-height:.9;color:var(--flame);text-shadow:0 0 24px rgba(255,122,47,.5)}
.rally-n small{font-size:12px;color:var(--dim);max-width:160px}
.rally-body{display:grid;gap:10px} .rally-body p{margin:0}
.clock{font-size:14px;color:var(--hot)} .clock .mono{font-weight:600}
/* most wanted / ducks */
.wanted{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(20,14,18,.75);color:var(--fg);text-decoration:none;transition:border-color .2s}
.wanted:hover{border-color:var(--flame)} .wanted .wn{font-size:30px;color:var(--flame)} .wanted.duck .wn{font-size:24px}
/* ranks */
.ranks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ranks a{display:grid;grid-template-columns:28px auto 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(20,14,18,.75);color:var(--fg);text-decoration:none}
.ranks a:hover{border-color:var(--gold)}
.ranks .pos{font-size:22px;color:var(--gold)} .ranks .rn{display:grid;line-height:1.2} .ranks .honor{font-size:24px;color:var(--gold)}
.rank{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)} .rank.mog{color:var(--hot);text-shadow:0 0 10px rgba(255,210,63,.6)}
.rank.big{font-size:14px;margin-top:6px}
.boards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} @media (max-width:960px){.boards{grid-template-columns:1fr}}
.prof{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center} @media (max-width:600px){.prof{grid-template-columns:auto 1fr}.prof form{grid-column:1/-1}}
.statgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:24px} @media (max-width:760px){.statgrid{grid-template-columns:repeat(3,1fr)}}
.statgrid div{display:grid;justify-items:center;padding:14px 8px;border-radius:10px;border:1px solid var(--line);background:rgba(20,14,18,.75)}
.statgrid b{font-size:40px;line-height:1;color:var(--gold)} .statgrid span{font-size:12px;color:var(--dim);text-align:center}
.plink{color:inherit;text-decoration:none} .plink:hover b{color:var(--gold)}
a.banner{color:inherit;text-decoration:none}
.meter.sanc{height:10px;background:rgba(255,255,255,.08)} .meter.sanc .ma{background:linear-gradient(90deg,var(--gold),var(--flame))}
.stakes{color:var(--fg)} .stakes b{color:var(--gold)}