/* Furball SMP: sky-hero / floating-nav theme */
:root{--sky:#3aa9ee;--sky-hi:#8fd6ff;--night:#14172b;--card:#1e2240;--line:#2c3158;--fur:#ff9a3c;--fur-deep:#e8741a;--cream:#fff1dc;--mute:#a9b0d6;
--display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;--body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
--panel:var(--card);--panel-2:#2a2f58;--edge:#0d0f1f;--text:var(--cream);--gold-l:var(--fur);--grass:var(--fur)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--night);color:var(--cream);font:500 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--fur);outline-offset:3px;border-radius:10px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* sky header */
.sky{position:relative;background:linear-gradient(180deg,var(--sky),var(--sky-hi));padding-bottom:150px;overflow:hidden}
.sky.compact{padding-bottom:110px}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.85}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:55%;height:160%;left:12%;top:-70%}.cloud::after{width:40%;height:120%;right:14%;top:-45%}
.c1{width:190px;height:44px;left:6%;top:150px}.c2{width:240px;height:52px;right:5%;top:230px;opacity:.7}
.c3{width:140px;height:34px;left:24%;top:300px;opacity:.55}.c4{width:170px;height:40px;right:26%;top:120px;opacity:.6}
@media(prefers-reduced-motion:no-preference){.c1,.c3{animation:drift 60s linear infinite alternate}.c2,.c4{animation:drift 80s linear infinite alternate-reverse}.mascot{animation:bob 4s ease-in-out infinite}}
@keyframes drift{to{transform:translateX(60px)}}@keyframes bob{50%{transform:translateY(-10px)}}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;display:block}
.strip{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px}
.ipbtn{display:flex;align-items:center;gap:14px;background:#fff;color:var(--night);border:0;border-radius:18px;padding:10px 20px 10px 10px;cursor:pointer;font:inherit;text-align:left}
.pawbox,.dbox{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.pawbox{background:var(--fur)}.pawbox img{width:34px;height:34px;object-fit:contain}
.ipbtn b{display:block;font:800 19px/1.1 var(--display)}
.ipbtn small{display:block;color:#5a6188;font-weight:700;font-size:13px}
.ipbtn:hover{transform:translateY(-1px)}
.discord{display:flex;align-items:center;gap:14px;text-align:right;color:#fff}
.discord b{display:block;font:800 19px/1.1 var(--display)}.discord small{display:block;opacity:.9;font-weight:700;font-size:13px}
.dbox{background:#fff;font-size:22px}
.logo{position:relative;z-index:2;text-align:center;padding:40px 0 0}
.logo h1{font:800 clamp(64px,13vw,132px)/.9 var(--display);color:var(--fur);-webkit-text-stroke:7px #3b1c0a;paint-order:stroke fill;text-shadow:0 7px 0 #3b1c0a,0 16px 24px rgba(20,23,43,.35)}
.logo h1 span{display:block;color:#fff;font-size:.62em;margin-top:2px}
.logo p{margin:28px auto 0;max-width:34ch;color:#fff;font-weight:800;font-size:19px;text-shadow:0 2px 6px rgba(20,60,110,.45)}
.logo.sm{padding-top:22px}.logo.sm h1{font-size:clamp(44px,8vw,72px);-webkit-text-stroke-width:5px}
.mascot{position:absolute;z-index:3;right:6%;bottom:48px;width:120px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.18))}

/* floating nav */
.navwrap{position:sticky;top:12px;z-index:20;margin-top:-62px;padding:0 20px}
nav.main{max-width:1080px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px;display:flex;flex-wrap:wrap;gap:4px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
nav.main a{padding:12px 20px;border-radius:12px;font:700 18px/1 var(--display)}
nav.main a:hover,nav.main a[aria-current]{background:var(--panel-2)}
nav.main a.cta{margin-left:auto;background:var(--fur);color:#2b1204}nav.main a.cta:hover{background:var(--fur-deep)}

/* content */
main{padding-top:56px}section{margin-bottom:76px}
h2{font:800 clamp(30px,5vw,40px)/1.1 var(--display);margin-bottom:10px}
h3{font:800 24px/1.2 var(--display)}
.lede{color:var(--mute);max-width:62ch;margin-bottom:28px}
.grid{display:grid;gap:16px}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.tile .k{color:var(--mute);font-size:15px;font-weight:700}.tile .v{font:800 28px/1.2 var(--display);margin-top:2px}
.tile h3{margin-bottom:8px}.tile p,.tile li{color:var(--mute);font-size:16px}.tile ul{padding-left:1.1em}
.tile .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#14172b;font-size:24px;margin-bottom:12px}
.tile.gold{background:var(--fur);border-color:var(--fur)}.tile.gold h3,.tile.gold p,.tile.gold li{color:#2b1204}.tile.gold .ico{background:#2b1204}
a.tile{display:block;transition:border-color .15s,background .15s}a.tile:hover{border-color:var(--fur);background:#242950}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#6b7194;margin-right:10px;vertical-align:1px}
.on .dot{background:#3ddc84;box-shadow:0 0 0 5px rgba(61,220,132,.2)}.off .dot{background:#ff6b6b}
.sub{color:var(--mute);font-size:15px;margin-top:4px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.row span{color:var(--mute);font-weight:700}
.row code{font:800 17px var(--body);background:#14172b;border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.btn,.mc-btn{display:inline-block;background:var(--fur);color:#2b1204;border:0;border-radius:12px;padding:12px 18px;font:700 17px var(--display);cursor:pointer}
.btn:hover,.mc-btn:hover{background:var(--fur-deep)}.tile .btn{margin-top:16px}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--fur);color:#2b1204;display:grid;place-items:center;font:800 18px var(--display)}
.note{margin-top:18px;color:var(--mute)}.note strong{color:var(--cream)}
.rules{list-style:none;padding:0;display:grid;gap:10px}
.rules li{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--fur);border-radius:14px;padding:14px 18px}
.rules b{display:block;font:800 19px var(--display)}.rules span{color:var(--mute)}
.rules li.ban{border-left-color:#ff6b6b;background:#2a1d2e}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px}
summary{cursor:pointer;font:700 20px/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--fur);font-size:26px;line-height:1}
details[open] summary::after{content:"\2212"}details p{margin-top:10px;color:var(--mute)}
footer{border-top:1px solid var(--line);padding:34px 0 50px;color:var(--mute);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}footer nav a{font-weight:700}footer nav a:hover{color:var(--fur)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,40px);background:#fff;color:var(--night);font-weight:800;padding:12px 20px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* players page */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:26px}
.tiles .tile{display:flex;flex-direction:column-reverse}.tiles .tile b{font:800 30px/1.2 var(--display)}.tiles .tile small{color:var(--mute);font-weight:700;font-size:15px}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.controls input[type=search],.controls select{background:var(--card);color:var(--cream);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font:700 16px var(--body);min-width:220px}
.controls input[type=search]{flex:1;min-width:240px}
.chk{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--mute);cursor:pointer}
.empty,.updated{color:var(--mute);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:12px}
.card{--c:#6b7194;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:20px;
box-shadow:0 10px 24px rgba(0,0,0,.28);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s ease-out}
.card.uncommon{--c:#3ddc84}.card.rare{--c:#4aa3ff}.card.epic{--c:#b565ff}.card.legendary{--c:#ffb02e}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 55%)}
.card:hover::after{opacity:1}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.c-name{font:800 20px/1.2 var(--display);overflow-wrap:anywhere}
.c-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#6b7194}.card.on .c-dot{background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.2)}
.c-art{position:relative;height:230px;border-radius:14px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;background:linear-gradient(180deg,var(--sky),var(--sky-hi))}
.c-art img,.c-art canvas{height:92%;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.c-art img[src="furball.png"]{height:auto;width:55%;margin-bottom:14px;image-rendering:auto}
.c-rarity,.c-rank{position:absolute;top:8px;padding:4px 10px;border-radius:999px;font:800 12px var(--display);text-transform:capitalize}
.c-rarity{left:8px;background:var(--c);color:#14172b}.c-rank{right:8px;background:rgba(20,23,43,.75);color:#fff}
.c-stats{margin:0;padding:0;list-style:none;font-weight:800}
.c-stats li{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line)}.c-stats li span{color:var(--mute);font-weight:700}
.c-foot{font-size:14px;color:var(--mute);font-weight:700;text-align:center}

@media(max-width:700px){.strip{flex-direction:column;align-items:stretch}.discord{justify-content:flex-end}nav.main a{padding:10px 14px;font-size:16px}nav.main a.cta{margin-left:0}.logo h1{-webkit-text-stroke-width:5px}.mascot{display:none}}