/* =========================================================================
   Lousy Legends — shared styles (design tokens, buttons, icons, page layout)
   Used by index.html; game.html & moshpit.html pull the tokens + .btn + icons.
   ========================================================================= */
/* Vendored font — the whole project is self-contained (no external CDNs), so it
   works fully offline / when handed to any AI or host. Path is relative to this
   CSS file (src/) → ../assets/vendor/. */
@font-face{
  font-family:'Press Start 2P'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/vendor/PressStart2P.ttf') format('truetype');
}
:root{
  --bg:#0f0d16; --bg2:#161320; --stone:#2b2b30; --stone-lite:#3b3b44; --stone-edge:#565664; --stone-dark:#1a1a1e;
  --gold:#e0b432; --green:#6fdc4f; --red:#ff5a4d; --purple:#c479ff; --cream:#f4ecd8; --muted:#9a93a8; --blue:#59b6ff;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{min-height:100%; background:var(--bg); color:var(--cream); font-family:'Press Start 2P',monospace; -webkit-font-smoothing:none; line-height:1.7;}
a{color:inherit;}
.ll-ico{display:inline-block;} .ico{display:inline-flex; align-items:center;}

/* buttons */
.btn{font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; justify-content:center; text-align:center; text-decoration:none;
  padding:16px 26px; font-size:13px; color:#111; background:linear-gradient(var(--gold),#c9971f);
  border:3px solid #7a5c12; border-radius:8px; box-shadow:0 5px 0 #6a4f10; transition:transform .06s;}
.btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(3px); box-shadow:0 2px 0 #6a4f10;}
.btn.ghost{color:var(--cream); background:var(--stone-lite); border-color:var(--stone-edge); box-shadow:0 5px 0 var(--stone-dark);}
.btn.ghost:active{box-shadow:0 2px 0 var(--stone-dark);}
.btn.sm{padding:11px 16px; font-size:10px; box-shadow:0 4px 0 #6a4f10;}
.btn.ghost.sm{box-shadow:0 4px 0 var(--stone-dark);}

/* screens / router */
.screen{display:none;} .screen.active{display:block;}
#select.active,#login.active,#shop.active,#moshpit.active,#leaderboard.active{display:flex; min-height:100vh; flex-direction:column;}

/* nav */
nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:14px 5%; background:rgba(15,13,22,.94); border-bottom:2px solid var(--stone-dark); backdrop-filter:blur(4px);}
.brand{font-size:15px; color:#fff; text-shadow:2px 2px 0 #000; cursor:pointer; white-space:nowrap;}
.brand span{color:var(--gold);}
.brand-emblem{height:40px; width:auto; display:block; cursor:pointer; image-rendering:auto; align-self:center;}
.navlinks{display:flex; align-items:center; gap:18px; font-size:10px;}
.navlinks a{color:var(--muted); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;} .navlinks a:hover{color:var(--cream);}
#userchip{font-size:8px; color:var(--green); display:inline-flex; align-items:center; gap:5px;}
#userchip.admin{color:var(--gold);}
@media(max-width:860px){ .navlinks a.hidem{display:none;} }
/* hamburger menu */
.navmenu{position:relative; display:inline-flex;}
.menubtn{font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:7px 9px;
  background:var(--stone); border:2px solid var(--stone-edge); border-radius:8px; color:var(--cream);}
.menubtn:hover{border-color:var(--gold);}
.menudrop{position:absolute; top:calc(100% + 10px); right:0; z-index:60; display:none; flex-direction:column; gap:2px; min-width:170px;
  background:var(--bg2); border:2px solid var(--stone-edge); border-radius:10px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.5);}
.menudrop.open{display:flex;}
.menudrop a{color:var(--muted); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:9px; padding:10px 10px; border-radius:6px;}
.menudrop a:hover{color:var(--cream); background:var(--stone);}
/* lousy-potion gamble note */
.pgamble{font-size:7px; color:var(--gold); line-height:1.7; margin:2px 0 4px; display:inline-flex; align-items:center; gap:4px; text-align:center;}
/* ---- creature Level & Skills panel (profile + #legend) ---- */
.levelpanel h3{font-size:11px; color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.lvlrow{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.lvlbadge{flex:none; font-size:15px; color:#fff; background:var(--stone); border:2px solid var(--gold); border-radius:8px; padding:8px 12px; text-shadow:2px 2px 0 #000;}
.lvlbadge small{font-size:9px; color:var(--muted);}
.xpwrap{flex:1; min-width:0;}
.xpbar{height:14px; background:#111; border:2px solid var(--stone-edge); border-radius:6px; padding:2px; overflow:hidden;}
.xpfill{display:block; height:100%; background:linear-gradient(90deg,#8affb0,#4fbf2f); border-radius:3px; transition:width .3s;}
.xpnum{font-size:8px; color:var(--muted); margin-top:6px;}
.formsroster{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.formchip{display:inline-flex; align-items:center; gap:7px; background:var(--stone); border:2px solid var(--stone-edge); border-radius:8px; padding:7px 10px; font-size:8px; color:var(--cream);}
.formchip .fcico{display:inline-flex; color:var(--gold);}
.formchip .fclv{color:var(--muted); font-size:7px;}
.formchip.locked{opacity:.4; filter:grayscale(1);}
.slotshead{font-size:9px; color:var(--muted); margin-bottom:8px;}
.formslots{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:10px;}
.formslot{font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; background:var(--stone-dark); border:2px solid var(--stone-edge); border-radius:8px; padding:10px 6px; color:var(--cream); min-height:74px; justify-content:center;}
.formslot:hover{border-color:var(--gold);}
.formslot.set{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.formslot .fsnum{font-size:9px; color:var(--gold);}
.formslot .fsico{display:inline-flex;}
.formslot .fsname{font-size:6px; color:#c9c2b0; line-height:1.4; text-align:center;}
.formslot .fsempty{font-size:7px; color:#5a5466;}
.slotshint{font-size:8px; color:var(--muted); line-height:1.8;} .slotshint b{color:var(--gold);}
@media(max-width:520px){ .formslots{grid-template-columns:repeat(3,1fr);} }

/* coming-soon placeholder */
.comingsoon{max-width:460px; margin:0 auto; text-align:center;}
.comingsoon .csico{color:var(--gold); margin-bottom:10px;}
.comingsoon p{color:var(--muted); line-height:1.9; font-size:9px;}

/* hero */
.hero{position:relative; text-align:center; padding:64px 5% 74px; overflow:hidden; background:radial-gradient(circle at 50% 0%, #241b3a 0%, var(--bg) 60%);}
.hero .logo{font-size:clamp(30px,7vw,66px); line-height:1.15; color:#fff; text-shadow:3px 3px 0 #000, 7px 7px 0 var(--purple);}
.hero .logo span{color:var(--gold);}
.hero .logo-emblem{display:block; margin:0 auto; width:min(88%,500px); max-width:500px; height:auto; image-rendering:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));}
.hero .tag{margin:24px auto 0; max-width:640px; font-size:clamp(9px,1.6vw,13px); color:#cfc7dd;}
.hero .cta{margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.hero .note{margin-top:20px; font-size:9px; color:var(--muted);}
.floaty{position:absolute; opacity:.55;}

section{padding:60px 5%;}
.h2{font-size:clamp(15px,2.4vw,24px); color:#fff; text-align:center; text-shadow:2px 2px 0 #000; margin-bottom:10px;}
.sub{font-size:10px; color:var(--muted); text-align:center; max-width:580px; margin:0 auto 40px; line-height:1.9;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto;}
@media(max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--bg2); border:2px solid var(--stone-dark); border-radius:12px; padding:26px 22px; text-align:center;}
.step .n{font-size:11px; color:var(--gold);} .step .stepico{margin:14px 0; display:flex; justify-content:center;}
.step h3{font-size:12px; color:#fff; margin-bottom:12px;} .step p{font-size:9px; color:var(--muted); line-height:1.9;}

.feat{background:linear-gradient(180deg,#1c1830,#141020);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1040px; margin:0 auto;}
@media(max-width:760px){ .grid{grid-template-columns:1fr;} }
.card{background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; padding:22px; box-shadow:inset 0 2px 0 var(--stone-lite), inset 0 -2px 0 var(--stone-dark);}
.card.clk{cursor:pointer;} .card.clk:hover{border-color:var(--gold);}
.card .cico{margin-bottom:12px; display:flex;} .card h3{font-size:11px; color:var(--gold); margin:0 0 10px;} .card p{font-size:9px; color:#c9c2b0; line-height:1.9;}

.plans{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:0 auto;}
@media(max-width:680px){ .plans{grid-template-columns:1fr;} }
.plan{background:var(--bg2); border:2px solid var(--stone-edge); border-radius:14px; padding:30px 26px; position:relative;}
.plan.pro{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset, 0 8px 30px rgba(224,180,50,.14);}
.plan .pt{font-size:13px; color:#fff; display:flex; align-items:center; gap:8px;} .plan.pro .pt{color:var(--gold);}
.plan .price{font-size:22px; color:#fff; margin:16px 0 4px;} .plan .price small{font-size:9px; color:var(--muted);}
.plan ul{list-style:none; margin:20px 0 24px;} .plan li{font-size:9px; color:#c9c2b0; padding:8px 0; border-bottom:1px dashed #2c2740;}
.plan li::before{content:'+ '; color:var(--green);} .plan li.no::before{content:'x '; color:#5a5466;} .plan li.no{color:#6a6478;}
.klarna{margin-top:14px; font-size:8px; color:var(--muted); text-align:center;} .klarna b{color:#ffb3c7;}

footer{background:#0a0810; padding:44px 5% 60px; border-top:2px solid var(--stone-dark);}
.flinks{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; max-width:900px; margin:0 auto 24px; font-size:8px;}
.flinks a{color:var(--muted); text-decoration:none;} .flinks a:hover{color:var(--cream);}
.fcopy{text-align:center; font-size:8px; color:#5a5466; line-height:2;}

/* login */
.panel{margin:auto; width:min(440px,92vw); background:var(--bg2); border:2px solid var(--stone-edge); border-radius:14px; padding:36px 30px; text-align:center;}
.panel h2{font-size:16px; color:#fff; margin-bottom:8px;} .panel .sub{margin-bottom:22px;}
.field{text-align:left; margin-bottom:16px;}
.field label{display:block; font-size:9px; color:var(--muted); margin-bottom:8px;}
.field input{width:100%; font-family:inherit; font-size:11px; color:#fff; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:6px; padding:13px;}
.field input:focus{outline:none; border-color:var(--gold);}
.panel .btn{width:100%; margin-top:6px;}
.autherr{color:var(--red); font-size:9px; min-height:13px; margin-top:10px;}
.altlink{margin-top:16px; font-size:9px; color:var(--muted);} .altlink a{color:var(--gold); text-decoration:none; cursor:pointer;}

.pagehead{text-align:center; padding:34px 5% 4px;}
.pagehead h1{font-size:clamp(16px,3vw,26px); color:#fff; text-shadow:2px 2px 0 #000;}
.pagehead p{font-size:10px; color:var(--muted); margin-top:12px;}
.wrap{max-width:1100px; margin:0 auto; padding:30px 5% 70px; width:100%;}

/* rarity colors */
.r-common{color:#b9b2c4} .r-uncommon{color:#6fdc4f} .r-rare{color:#59b6ff} .r-epic{color:#c479ff} .r-legendary{color:var(--gold)}
/* "ONE OF A KIND" = legendary-orange treatment (reuses --gold, no new hex) */
.hcard .hr.r-legendary{color:var(--gold); text-shadow:0 0 8px rgba(224,180,50,.4);}
.ccard-btns{display:flex; gap:8px; justify-content:center;} .ccard-btns .btn{flex:1;}

/* character select */
.roster{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:900px){ .roster{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .roster{grid-template-columns:1fr;} }
.hcard{position:relative; background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; padding:16px; text-align:center; box-shadow:inset 0 2px 0 var(--stone-lite), inset 0 -2px 0 var(--stone-dark);}
.hcard .pf{width:100%; aspect-ratio:1; background:linear-gradient(#22202e,#171522); border:2px solid var(--stone-dark); border-radius:8px; image-rendering:pixelated; display:block;}
.hcard .hn{font-size:11px; color:#fff; margin:12px 0 6px;} .hcard .hr{font-size:8px; margin-bottom:12px;}
/* badge + level as a tidy vertical stack in one corner (top-left) */
.hcard-badges{position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.hcard-lvl{font-size:7px; color:var(--gold); background:rgba(0,0,0,.55); border:1px solid var(--gold); padding:2px 5px; border-radius:4px; text-shadow:0 0 6px rgba(224,180,50,.5);}
.free-badge{font-size:7px; color:#111; background:var(--green); padding:3px 6px; border-radius:4px;}
.admin-badge{font-size:7px; color:#111; background:var(--gold); padding:3px 6px; border-radius:4px;}
.badge-custom{font-size:7px; color:#111; background:var(--blue); padding:3px 6px; border-radius:4px;}
.lockbadge{display:inline-flex;}

/* large, centered character sprite showcase on the profile/#legend page */
.legend-showcase{display:block; margin:0 auto 6px; width:220px; max-width:100%; height:auto; image-rendering:pixelated; background:linear-gradient(#22202e,#171522); border:2px solid var(--stone-dark); border-radius:12px; box-shadow:inset 0 2px 0 var(--stone-lite), inset 0 -2px 0 var(--stone-dark);}
.upload{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-style:dashed;}
.upload .uico{margin-top:6px;} .upload p{font-size:8px; color:var(--muted); line-height:1.8;}

/* shop */
.gembalance{display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; color:var(--cream);
  background:var(--bg2); border:2px solid var(--gold); border-radius:12px; padding:16px 20px; margin-bottom:24px;
  box-shadow:0 0 0 2px rgba(224,180,50,.18) inset;}
.gembalance b{color:var(--gold);}
.shopsection{background:var(--stone-dark); border:2px solid var(--stone-edge); border-radius:14px; padding:22px 20px; margin-bottom:24px;}
.sectionhead{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.sectionhead h2{font-size:15px; color:#fff;}
.sectionsub{font-size:9px; color:var(--muted); line-height:1.8; margin-bottom:18px;}
.shopbar{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:8px; font-size:9px; color:var(--muted);}
.shopbar select{font-family:inherit; font-size:9px; color:#fff; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:6px; padding:8px 10px;}
.shopgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .shopgrid{grid-template-columns:1fr;} }
.prod{background:var(--stone); border:2px solid var(--stone-edge); border-radius:12px; padding:20px; text-align:center; box-shadow:inset 0 2px 0 var(--stone-lite), inset 0 -2px 0 var(--stone-dark);}
.prod canvas{width:180px; height:180px; image-rendering:pixelated; background:#e9e6df; border-radius:10px; border:2px solid var(--stone-dark);}
.prod h3{font-size:12px; color:#fff; margin:14px 0 6px;} .prod .price{font-size:13px; color:var(--gold); margin-bottom:6px;}
.prod p{font-size:8px; color:var(--muted); margin-bottom:14px; line-height:1.7;}
.cartnote{text-align:center; font-size:8px; color:var(--green); min-height:14px; margin-top:18px;}

/* Gems + potion shop */
.potiongrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
@media(max-width:820px){ .potiongrid{grid-template-columns:1fr;} }
.potioncard{position:relative; background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; padding:16px; text-align:center; box-shadow:inset 0 2px 0 var(--stone-lite), inset 0 -2px 0 var(--stone-dark);}
.potioncard .ptier{position:absolute; top:10px; right:10px; font-size:7px; text-transform:uppercase; letter-spacing:1px;}
.potioncard .picon{width:68px; height:68px; margin:6px auto 12px; padding:8px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:var(--stone-dark); border:2px solid var(--stone-edge);}
.potioncard h4{font-size:11px; color:#fff; margin:0 0 8px;}
.potioncard p{font-size:8px; color:var(--muted); line-height:1.7; min-height:44px;}
.potioncard .pcost{font-size:11px; color:var(--gold); margin:8px 0;}
.potioncard .powned{font-size:8px; color:var(--green); margin-bottom:8px; min-height:11px;}

/* mosh pit landing */
.moshhero{max-width:760px; margin:0 auto; text-align:center;}
.mosharena{width:100%; max-width:640px; margin:22px auto; aspect-ratio:16/9; border:3px solid var(--stone-edge); border-radius:10px; image-rendering:pixelated; display:block; background:#20161f;}
.moshinfo{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:24px auto;}
@media(max-width:640px){ .moshinfo{grid-template-columns:1fr;} }
.moshinfo .card{text-align:center;} .moshinfo .card .cico{justify-content:center;}
.lock-note{font-size:9px; color:#e79aa0; margin-top:16px;}
.mystat{font-size:9px; color:var(--muted); margin-top:14px;} .mystat b{color:var(--cream);}

/* leaderboard */
.lbwrap{max-width:640px; margin:0 auto; width:100%;}
.lbme{background:var(--bg2); border:2px solid var(--gold); border-radius:12px; padding:20px; text-align:center; margin-bottom:22px;}
.lbme .rank{font-size:26px; color:#fff;} .lbme .title{font-size:12px; margin:10px 0 4px;}
.lbme .title.LEGENDARY{color:var(--gold);} .lbme .title.PLEB{color:var(--green);}
.lbme .meta{font-size:8px; color:var(--muted);}
.lbtable{background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; overflow:hidden;}
.lbrow{display:flex; align-items:center; gap:12px; padding:11px 16px; font-size:9px; color:#c9c2b0; border-bottom:1px solid #22202a;}
.lbrow .pos{width:34px; color:var(--muted);} .lbrow .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .lbrow .fr{color:var(--gold);}
.lbrow.leg .nm{color:var(--gold);} .lbrow.pleb .nm{color:var(--green);}
.lbrow.me{background:rgba(224,180,50,.12);} .lbrow.me .nm{color:#fff;}
.lbsep{text-align:center; font-size:9px; color:var(--muted); padding:8px;}

/* profile */
.profwrap{max-width:720px; margin:0 auto; width:100%;}
.profhead{display:flex; gap:20px; align-items:center; background:var(--bg2); border:2px solid var(--stone-edge); border-radius:14px; padding:22px; margin-bottom:18px; flex-wrap:wrap;}
.profhead canvas{width:88px; height:88px; background:linear-gradient(#22202e,#171522); border:2px solid var(--stone-dark); border-radius:10px; image-rendering:pixelated;}
.profhead .who{flex:1; min-width:200px;}
.profhead .uname{display:flex; align-items:center; gap:10px; font-size:18px; color:#fff;}
.profhead .uname input{font-family:inherit; font-size:15px; color:#fff; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:6px; padding:8px;}
.iconbtn{cursor:pointer; background:var(--stone-lite); border:2px solid var(--stone-edge); border-radius:6px; padding:6px 9px; display:inline-flex; align-items:center; gap:6px; color:var(--cream); font-family:inherit; font-size:9px;}
.iconbtn:hover{border-color:var(--gold);}
.profhead .sub2{margin-top:12px; font-size:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.badge{display:inline-block; font-size:8px; padding:4px 8px; border-radius:4px;}
.badge.prem{background:var(--gold); color:#111;} .badge.free{background:var(--stone-lite); color:var(--cream);} .badge.adm{background:var(--purple); color:#111;}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
@media(max-width:600px){ .statgrid{grid-template-columns:repeat(2,1fr);} }
.sbox{background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; padding:16px; text-align:center;}
.sbox .v{font-size:18px; color:#fff; display:flex; justify-content:center;} .sbox .l{font-size:8px; color:var(--muted); margin-top:8px;}
.acct{background:var(--bg2); border:2px solid var(--stone-edge); border-radius:12px; padding:20px;}
.acct h3{font-size:11px; color:var(--gold); margin-bottom:14px;}
.acct .arow{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed #2c2740; font-size:10px; flex-wrap:wrap;}
.acct .arow:last-child{border-bottom:none;}
.acct .arow .lbl{color:var(--muted);} .acct .arow .val{color:var(--cream); overflow:hidden; text-overflow:ellipsis;}
.emailform{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 10px; width:100%;}
.emailform input{font-family:inherit; font-size:10px; color:#fff; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:6px; padding:10px; flex:1; min-width:150px;}
.emailform input:focus{outline:none; border-color:var(--gold);}
.codehint{font-size:8px; color:var(--gold); width:100%; line-height:1.8;}

/* generic utility */
.hidden{display:none !important;}

/* nav avatar (click -> profile, shows "your Lousy Legend") */
.navavatar{cursor:pointer; background:linear-gradient(#22202e,#171522); border:2px solid var(--stone-edge); border-radius:50%; image-rendering:pixelated;}
.navavatar:hover{border-color:var(--gold);}

/* your Lousy Legend (profile hero showcase) */
.mylegend{display:flex; gap:22px; align-items:center; background:var(--bg2); border:2px solid var(--stone-edge); border-radius:14px; padding:22px; margin-bottom:18px; flex-wrap:wrap;}
.mylegend canvas{width:140px; height:140px; background:linear-gradient(#22202e,#171522); border:2px solid var(--stone-dark); border-radius:10px; image-rendering:pixelated;}
.mlinfo{flex:1; min-width:200px;}
.mlinfo .mlname{font-size:15px; color:#fff; margin-bottom:8px;}
.mlinfo .mlstats{font-size:9px; color:var(--muted); margin:10px 0 12px; line-height:1.9;}
.mlpick{display:flex; align-items:center; gap:10px; font-size:9px; color:var(--muted); flex-wrap:wrap;}
.mlpick select{font-family:inherit; font-size:9px; color:#fff; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:6px; padding:8px;}

/* profile tabs */
.tabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.tabbtn{font-family:inherit; cursor:pointer; font-size:9px; color:var(--muted); background:var(--stone); border:2px solid var(--stone-edge); border-radius:8px; padding:11px 16px;}
.tabbtn.active{color:#111; background:var(--gold); border-color:#7a5c12;}
.tabpanel.hidden{display:none;}

/* inventory (WoW-style backpack) */
.baggems{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--cream);} .baggems b{color:var(--gold);}
.baggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:10px;}
.bagslot{position:relative; aspect-ratio:1; background:var(--stone-dark); border:2px solid var(--stone-edge); border-radius:8px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;}
.bagslot.filled{border-width:2px;}
.bagslot.filled.r-common{border-color:#b9b2c4; box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px rgba(185,178,196,.4);}
.bagslot.filled.r-uncommon{border-color:var(--green); box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px rgba(111,220,79,.45);}
.bagslot.filled.r-rare{border-color:var(--blue); box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px rgba(89,182,255,.45);}
.bagslot.filled.r-epic{border-color:var(--purple); box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px rgba(196,121,255,.45);}
.bagslot.filled.r-legendary{border-color:var(--gold); box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 9px rgba(224,180,50,.5);}
.bagslot .bagchip{width:46px; height:46px; padding:6px; border-radius:50%; display:grid; place-items:center; background:var(--stone); border:2px solid var(--stone-edge);}
.bagslot .bagcount{position:absolute; bottom:3px; right:4px; font-size:8px; color:#fff; text-shadow:1px 1px 0 #000; background:rgba(0,0,0,.55); border-radius:4px; padding:1px 3px;}
.bagslot .bagname{position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap;
  font-size:8px; color:var(--cream); background:var(--bg2); border:2px solid var(--stone-edge); border-radius:6px; padding:5px 8px;
  opacity:0; pointer-events:none; transition:opacity .1s; z-index:5;}
.bagslot.filled:hover .bagname{opacity:1;}

/* friends / guild chat */
.friendrow{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed #2c2740; font-size:9px;}
.friendrow:last-child{border-bottom:none;}
.friendrow .st{font-size:8px; padding:4px 8px; border-radius:4px;}
.friendrow .st.pending{background:var(--stone-lite); color:var(--muted);}
.friendrow .st.accepted{background:var(--green); color:#111;}
.chatlog{max-height:220px; overflow-y:auto; background:#0d0b14; border:2px solid var(--stone-edge); border-radius:8px; padding:12px; margin-bottom:10px; font-size:9px; line-height:1.9;}
.chatlog .msg{margin-bottom:8px;} .chatlog .msg .from{color:var(--gold);} .chatlog .empty{color:var(--muted);}

/* solo/multiplayer play modal */
.modalbg{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:5%;
  background:radial-gradient(circle at 50% 40%, rgba(30,16,34,.82), rgba(6,4,10,.96));}
.modalpanel{background:var(--bg2); border:2px solid var(--stone-edge); border-radius:14px; padding:32px 28px; width:min(420px,92vw); text-align:center;}
.modalpanel h2{font-size:14px; color:#fff; margin-bottom:8px;}
.modalpanel .sub{margin-bottom:18px;}
.modechoice{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.modechoice .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important;}
.mppicker{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
.mppicker .btn{width:100%; justify-content:flex-start;}
.modalpanel #playModalClose{margin-top:16px; width:100%;}
.mpnote{font-size:9px; color:var(--muted); margin-bottom:14px;}
.mpnote a{color:var(--gold); cursor:pointer;}

/* ===== tournament ===== */
.tourwrap{max-width:720px; margin:0 auto; width:100%;}
/* top gold-framed grand boss */
.tboss{text-align:center; margin-bottom:34px;}
.tboss-frame{display:inline-block; padding:14px; border-radius:16px; background:radial-gradient(circle at 50% 35%, rgba(224,180,50,.14), rgba(16,13,22,.6));
  border:3px solid var(--gold); box-shadow:0 0 0 2px rgba(224,180,50,.25) inset, 0 0 34px rgba(224,180,50,.35), 0 10px 40px rgba(0,0,0,.5);}
.tboss-cv{display:block; image-rendering:pixelated;}
.tboss-title{font-size:16px; color:#fff; margin:18px 0 6px; text-shadow:2px 2px 0 #000;}
.tboss-sub{font-size:9px; color:var(--muted); letter-spacing:.5px;}
.tboss-sub .live{color:var(--red);}
/* countdown clock */
.tclock{margin:20px auto 0; display:inline-block; background:var(--bg2); border:2px solid var(--gold); border-radius:12px; padding:14px 26px;}
.tclock-lab{font-size:8px; color:var(--muted); margin-bottom:8px; letter-spacing:1px;}
.tclock-time{font-size:20px; color:var(--gold); text-shadow:2px 2px 0 #000;}
/* live team-up block */
.tlive{margin:24px auto 0; max-width:520px; background:var(--bg2); border:2px solid var(--stone-edge); border-radius:12px; padding:20px;}
.tlive-cta{font-size:11px; color:#fff; display:flex; align-items:center; gap:8px; justify-content:center; line-height:1.8;}
.treward{margin:16px 0; font-size:8px; color:var(--muted); line-height:2.2;}
.treward-row{display:flex; align-items:center; gap:6px; justify-content:center;} .treward b{color:var(--gold);}
.treward-tries b{color:var(--green);}
.tparty{display:flex; flex-direction:column; gap:6px; margin:14px 0 4px; text-align:left;}
.tparty-empty{font-size:8px; color:var(--muted); text-align:center; padding:10px;}
.tmember{display:flex; align-items:center; gap:8px; font-size:9px; padding:7px 10px; background:var(--stone); border-radius:8px;}
.tm-dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted);}
.tm-accepted .tm-dot{background:var(--green);} .tm-declined .tm-dot{background:var(--red);} .tm-pending .tm-dot{background:var(--gold);}
.tm-nm{flex:1; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tm-st{font-size:7px; color:var(--muted); text-transform:uppercase;}
.tparty-tally{font-size:8px; color:var(--muted); text-align:center; margin:8px 0 4px;}
.tlive-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.tlive-btns .btn{flex:1; min-width:160px;} .tlive-btns .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important;}
.tnotlive{margin:22px auto 0; max-width:440px; font-size:9px; color:var(--muted); display:flex; align-items:center; gap:8px; justify-content:center; line-height:1.9;}
/* previous bosses — greyed & expiring */
.tprevrow{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;}
.tprev{text-align:center;}
.tprev-frame{position:relative; display:inline-block; padding:8px; border:2px solid var(--stone-edge); border-radius:12px; background:var(--stone-dark);}
.tprev-cv{display:block; filter:grayscale(1) brightness(.6); image-rendering:pixelated;}
.tprev-lab{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-14deg);
  font-size:11px; color:#fff; background:rgba(255,90,77,.85); padding:5px 12px; border-radius:4px; letter-spacing:1px; white-space:nowrap; text-shadow:1px 1px 0 #000;}
.tprev-name{font-size:9px; color:var(--muted); margin-top:10px;} .tprev-wk{font-size:7px; color:var(--stone-edge); margin-top:4px;}
/* fastest legions leaderboard */
.tlb{max-width:520px; margin:0 auto;}
.tlb-head{font-size:12px; color:var(--gold); display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:16px;}
.tlb-table{background:var(--stone); border:2px solid var(--stone-edge); border-radius:10px; overflow:hidden;}
.tlbrow{display:flex; align-items:center; gap:12px; padding:11px 16px; font-size:9px; color:#c9c2b0; border-bottom:1px solid #22202a;}
.tlbrow:last-child{border-bottom:none;} .tlbrow .pos{width:34px; color:var(--muted);} .tlbrow .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .tlbrow .fr{color:var(--gold);}
.tlbrow.top{background:rgba(224,180,50,.12);} .tlbrow.top .nm{color:#fff;}
.tlb-empty{font-size:8px; color:var(--muted); text-align:center; padding:16px;}