/* ============================================================
   BASE LAYOUT  —  shared skeleton for every theme.
   Holds ONLY structure: positions, sizes, flex, transitions,
   animation keyframes. All paint (colour, font, texture,
   decoration) lives in themes/<name>.css.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:transparent;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
.hidden{display:none!important}

/* positioning helpers */
.corner-bl{left:32px;bottom:32px}
.corner-br{right:32px;bottom:32px}
.corner-tl{left:32px;top:32px}
.corner-tr{right:32px;top:32px}

/* HUD card */
#hud{position:absolute;width:var(--hud-w,360px);transition:transform .6s cubic-bezier(.2,.9,.25,1),opacity .6s}
#hud.faded{opacity:0;pointer-events:none;transform:translateY(14px)}
.card{position:relative;padding:16px 18px;border-radius:16px;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;pointer-events:none}
.hud-top{display:flex;align-items:center;gap:13px}
.badge{position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:13px;display:grid;place-items:center}
.badge svg{width:28px;height:28px}
.who{flex:1;min-width:0}
.uname{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkname{font-size:16px;font-weight:700;margin-top:3px;text-transform:uppercase}
.lvlbox{flex:0 0 auto;text-align:center;padding:6px 12px;border-radius:11px}
.lvlnum{font-size:26px;line-height:1}
.lvllab{font-size:9px;margin-top:2px}
.xpwrap{margin-top:13px}
.xptrack{height:13px;border-radius:7px;overflow:hidden;position:relative}
.xpfill{height:100%;border-radius:7px;transition:width .8s cubic-bezier(.2,.9,.25,1);position:relative}
.xpfill::after{content:'';position:absolute;inset:0;animation:shimmer 2.4s linear infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
.xpmeta{display:flex;justify-content:space-between;margin-top:6px;font-size:12px}

/* leaderboard */
#board{position:absolute;width:286px;padding:14px 15px;border-radius:14px}
.board-h{font-size:12px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.brow{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px}
.bpos{width:18px}
.bname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxp{font-size:13px}

/* level-up popup */
#popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;width:420px;text-align:center;pointer-events:none}
#popup.show{animation:popIn 3.6s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes popIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  20%{transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}
}
.rays{position:absolute;top:50%;left:50%;width:560px;height:560px;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;animation:spin 9s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.glow{position:absolute;top:50%;left:50%;width:340px;height:340px;transform:translate(-50%,-50%);z-index:-1;border-radius:50%}
.pu-kind{font-size:14px;text-transform:uppercase}
.pu-name{font-size:30px;margin:8px 0 4px}
.pu-nums{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0}
.pu-from{font-size:34px;text-decoration:line-through;opacity:.6}
.pu-arrow{font-size:28px}
.pu-to{font-size:72px}
.pu-rank{font-size:22px;font-weight:700;margin-top:4px;text-transform:uppercase}

/* command toasts */
#toasts{position:absolute;display:flex;flex-direction:column-reverse;gap:8px;width:330px}
.toast{padding:9px 13px;border-radius:11px;font-size:14px;animation:tIn .35s ease, tOut .4s ease 5.6s forwards}
@keyframes tIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateX(20px)}}

/* channel-points boost flag */
#boost{position:absolute;top:32px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:20px;font-size:12px;text-transform:uppercase}

/* sizes */
.size-sm{--hud-w:300px} .size-lg{--hud-w:420px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important}}