:root{--pink:#ff28ac;--cyan:#19e7ef;--purple:#a826ff;--dark:#070713;--panel:#11121d;--text:#fff;--muted:#c9cad6;--gold:#ffd65d;--danger:#ff4264}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 12% 8%,rgba(255,40,172,.25),transparent 30%),radial-gradient(circle at 90% 5%,rgba(25,231,239,.18),transparent 27%),linear-gradient(145deg,#040409,#0d0d1d 55%,#060611)}
a{color:inherit;text-decoration:none}.container{width:min(1180px,94%);margin:auto;padding:18px 0 70px}.nav{position:sticky;top:0;z-index:20;display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:12px;background:rgba(5,5,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,40,172,.35)}.nav a{padding:10px 14px;border:1px solid #ffffff2e;border-radius:999px;font-weight:800;background:#080914}.nav a:hover{border-color:var(--cyan);box-shadow:0 0 15px #19e7ef55}.hero-img{width:100%;display:block;border:2px solid #ff28ac;border-radius:20px;box-shadow:0 0 35px #ff28ac55}.hero-card{position:relative;margin:18px 0}.live-ribbon{position:absolute;left:24px;bottom:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.live-pill{padding:13px 18px;border-radius:999px;background:linear-gradient(90deg,#e91738,#ff4a67);font-weight:1000;box-shadow:0 0 20px #ff304f99}.live-pill.offline{background:#292b3b}.btn,button{display:inline-block;border:0;border-radius:12px;padding:13px 18px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;font-weight:900;font-size:16px;cursor:pointer}.btn.cyan,button.cyan{background:linear-gradient(90deg,#08a6b8,var(--cyan));color:#031012}.btn.dark,button.dark{background:#2a2c3e}.btn.danger,button.danger{background:linear-gradient(90deg,#bd1734,var(--danger))}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:rgba(17,18,29,.95);border:2px solid rgba(255,40,172,.65);border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 0 25px rgba(255,40,172,.12)}.card.cyan{border-color:rgba(25,231,239,.75)}.label{color:var(--muted);font-weight:900}.stat{font-size:40px;font-weight:1000}.progress{height:13px;border-radius:99px;background:#27293a;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan))}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.social{padding:18px;border-radius:16px;border:1px solid #ffffff2b;background:linear-gradient(150deg,#191a2a,#0c0d17);font-weight:900}.social:hover{border-color:var(--pink);transform:translateY(-2px)}h1,h2,h3{margin-top:0}.page-title{text-align:center;font-size:clamp(38px,6vw,68px);text-transform:uppercase;text-shadow:0 0 22px #ff28ac;margin:24px 0 5px}.subtitle{text-align:center;color:var(--cyan);font-weight:900;letter-spacing:2px;margin-bottom:26px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-weight:900;margin-bottom:6px}input,select,textarea{width:100%;padding:13px;border-radius:10px;border:1px solid #55586b;background:#090a12;color:#fff;font-size:16px}textarea{min-height:110px}.status{min-height:24px;margin-top:12px;font-weight:900}.good{color:#78ffad}.bad{color:#ff7c90}.notice{padding:12px;border-radius:11px;background:#ffd65d20;border:1px solid #ffd65d75;color:#ffe99e;margin-bottom:14px}.queue-row{display:grid;grid-template-columns:55px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #303143}.pos{font-size:22px;font-weight:1000;color:var(--pink)}.name{font-size:18px;font-weight:900}.meta,.small{color:var(--muted);font-size:14px}.sprite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sprite{position:relative;min-height:220px;padding:15px;border-radius:16px;border:1px solid #414458;background:linear-gradient(160deg,#1b1d2e,#0d0e18);overflow:hidden}.sprite-art{height:90px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle,#ff28ac33,transparent 65%),#080914;font-size:48px}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#2a2c3e;font-size:12px;font-weight:900;margin-right:5px}.mastered{color:var(--gold)}.owned{color:#8fffc3}.filters{display:flex;gap:10px;flex-wrap:wrap}.filters input,.filters select{max-width:260px}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.gallery-grid img{width:100%;border-radius:16px;border:2px solid #ff28ac80}.login-box{width:min(520px,94%);margin:70px auto}.hidden{display:none!important}.admin-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px}.admin-panel{display:none}.admin-panel.active{display:block}.overlay-body{margin:0;background:transparent!important}
@media(max-width:850px){.grid,.social-grid,.sprite-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.grid,.social-grid,.sprite-grid,.gallery-grid,.two{grid-template-columns:1fr}.queue-row{grid-template-columns:42px 1fr}.row-actions{grid-column:2}.live-ribbon{position:static;margin-top:12px}}
.activity-row{padding:10px 0;border-bottom:1px solid #303143}.activity-row:last-child{border-bottom:0}
.admin-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}.admin-sidebar{position:sticky;top:78px;display:flex;flex-direction:column;gap:9px;padding:16px;border:1px solid #ffffff22;border-radius:18px;background:#0d0e18}.admin-sidebar button,.admin-sidebar .btn{width:100%;text-align:left}.admin-brand{font-size:22px;font-weight:1000;color:var(--pink);padding:8px}.admin-brand span{font-size:11px;letter-spacing:2px;color:var(--cyan)}.admin-content{min-width:0}.admin-title{text-align:left;font-size:clamp(34px,5vw,56px)}.admin-content>.subtitle{text-align:left}.admin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.check-grid{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px}.check-grid label{display:flex;align-items:center;gap:7px}.check-grid input{width:auto}.row-actions{display:flex;gap:7px;flex-wrap:wrap}.sprite-thumb,.gallery-thumb{width:58px;height:58px;border-radius:12px;background:#080914;display:grid;place-items:center;overflow:hidden;font-size:28px}.sprite-thumb img,.gallery-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr)}.admin-brand{grid-column:1/-1}.admin-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.admin-sidebar,.admin-stats{grid-template-columns:1fr}.admin-title,.admin-content>.subtitle{text-align:center}}
.sprite-locked{opacity:.78;filter:saturate(.55)}.gallery-grid article img{width:100%;border-radius:14px}

/* Sprite collection card layout fix: keep artwork inside its own area and all labels below it. */
.sprite-grid{
  align-items:stretch;
}
.sprite{
  display:flex;
  flex-direction:column;
  min-height:360px;
  padding:14px;
  overflow:hidden;
}
.sprite-art{
  width:100%;
  height:180px;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  padding:8px;
  box-sizing:border-box;
}
.sprite-art img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain;
  object-position:center;
}
.sprite .badge{
  position:static;
}
.sprite h3{
  min-height:24px;
}
.sprite .actions{
  margin-top:auto;
}
.sprite .actions .btn{
  width:100%;
  text-align:center;
  box-sizing:border-box;
}
@media(max-width:850px){
  .sprite{min-height:350px}
  .sprite-art{height:170px;min-height:170px}
}
@media(max-width:620px){
  .sprite{min-height:0}
  .sprite-art{height:220px;min-height:220px}
}


/* Laura30906 Queue typography — bold condensed gamer lettering */
#queueState,
#current .name,
#queue .name,
#queue .pos,
#joinBtn,
#leaveBtn,
#queuePanel h2,
#queuePanel .name,
#queuePanel .pos,
#queuePanel button,
#dashQueue,
#dashQueueState {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: .8px;
}
#queue .name, #current .name {
  font-size: 21px;
}
#queue .pos {
  font-size: 25px;
  text-shadow: 0 0 10px rgba(255,40,172,.65);
}
#queueState {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(25,231,239,.55);
}