/* ============================================================
   BASE LAYOUT — shared skeleton for every theme.
   Structure only (positions, sizes, flex, keyframes).
   All paint 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}

/* row/column of recent check-in cards */
#cards{position:absolute;left:32px;right:32px;bottom:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
#cards.col{flex-direction:column;align-items:flex-start;right:auto;top:32px;bottom:32px;overflow:hidden}
#cards.top{bottom:auto;top:32px}

.cic{position:relative;display:flex;align-items:center;gap:13px;padding:13px 18px 13px 13px;border-radius:18px;
  min-width:230px;animation:cardIn .55s cubic-bezier(.2,.9,.25,1)}
@keyframes cardIn{0%{opacity:0;transform:translateY(24px) scale(.9)}60%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
.cic.bump{animation:bump .5s ease}
@keyframes bump{0%,100%{transform:none}40%{transform:translateY(-8px) scale(1.04)}}

.av{position:relative;width:58px;height:58px;flex:0 0 58px;border-radius:50%;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av .ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none}
.info{min-width:0}
.nm{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.st{font-size:12.5px;margin-top:1px;letter-spacing:.4px}
.chips{display:flex;gap:7px;margin-top:7px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}

/* big celebration card (milestone / VIP / level-up) */
#feature{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;text-align:center;pointer-events:none;width:380px}
#feature.show{animation:featIn 3.8s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes featIn{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)}84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}}
.feat-card{position:relative;padding:30px 34px 26px;border-radius:26px;overflow:hidden}
.feat-kind{font-size:15px;letter-spacing:6px;text-transform:uppercase;font-weight:700}
.feat-av{width:128px;height:128px;border-radius:50%;margin:16px auto 12px;position:relative;overflow:hidden}
.feat-av img{width:100%;height:100%;object-fit:cover}
.feat-av .ring{position:absolute;inset:-6px;border-radius:50%}
.feat-num{font-size:64px;font-weight:900;line-height:1}
.feat-lab{font-size:17px;letter-spacing:1px;margin-top:4px}
.feat-name{font-size:17px;font-weight:700;margin-top:8px}
.rays{position:absolute;top:50%;left:50%;width:560px;height:560px;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;animation:spin 10s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* particles layer */
#parts{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pt{position:absolute;will-change:transform;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(110vh) rotate(0)}100%{transform:translateY(-15vh) rotate(360deg)}}

/* leaderboard streak bar */
#bar{position:absolute;top:30px;left:50%;transform:translateX(-50%);display:flex;gap:14px;padding:10px 18px;border-radius:30px;font-size:15px;font-weight:700}
#bar .b{display:inline-flex;gap:6px;align-items:center}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important}}