/* static/css/stickers.css */

.buy-btn {
    background: #ffd700;
    border: 1px solid #e6b800;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: auto;
}

.close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 1rem;
    cursor: pointer;
    color: #aa0000;
}

.sticker-subtext {
    font-size: 0.75rem;
    color: #555;
    padding: 4px 8px;
    text-align: left;
}

.sticker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-auto-rows: 50px;
  gap: 5px;
  justify-content: center;
  padding-bottom: 6px;
}

.sticker {
    width: 50px;
    height: 50px;
    margin: 0;
    cursor: grab;
    background-repeat: no-repeat;
    background-size: 100% 300%;
    background-position: 0 0.5%;
    display: block;
}

/* 3-row sprites: 0% = default, 50% = hover/active, 100% = used */
.sticker { background-position-y: 0%; }

.sticker:hover:not(.used),
.sticker:active:not(.used) {
  background-position-y: 50%;
}

.sticker.used {
  background-position-y: 100%;
}

.sticker-smiley { background-color: #EAF8F9; }
.sticker-frowny { background-color: #f6e8e8; }
.sticker-monocle { background-color: #F1E8DE; }
.sticker-lol { background-color: #e9fdf6; }
.sticker-question { background-color: #f0f0f0; }
.sticker-num1 { background-color: #faf8f2; }
.sticker-cookie { background-color: #fef6e8; }
.sticker-heart { background-color: #f0f0f0; }
.sticker-based { background-color: #eeeeee; }
.sticker-sealofapproval { background-color: #EAF8F9; }
.sticker-harp { background-color: #faf8f2; }
.sticker-duck { background-color: #f0f0f0; }
.sticker-tophat { background-color: #f0f0f0; }
.sticker-robot { background-color: #F5EEE9; }
.sticker-fuckyeah { background-color: #e9fdf6; }
.sticker-hellyeah { background-color: #f0f0f0; }
.sticker-pot { background-color: #ecfaf2; }
.sticker-wtf { background-color: hsl(277, 100%, 96%); }
.sticker-dealwithit { background-color: #f0f0f0; }
.sticker-tacocat { background-color: #f0f0f0; }
.sticker-pint { background-color: #faf6ef; }
.sticker-dinoegg { background-color: #faf6ef; }
.sticker-joint { background-color: #eeeeee; }
.sticker-martini { background-color: #faf6ef; }
.sticker-greenhat { background-color: #d6e1d1; }

.top-sticker .sticker-badge,
.top-sticker .badge {
  position: absolute;
  bottom: 0px;
  right: 0px;

  height: 14px;
  min-width: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #333;
  font-size: 0.65rem;
  font-weight: bold;

  border-radius: 50%;
  line-height: 1;
  padding: 0;                 /* stays circle for short labels */

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 21;
}

/* Roundy badge for 3+ chars (100, 999, 1K, 1.1K, 10K, 1M) */
.top-sticker .sticker-badge.len-3,
.top-sticker .sticker-badge.len-4,
.top-sticker .sticker-badge.len-5,
.top-sticker .badge.len-3,
.top-sticker .badge.len-4,
.top-sticker .badge.len-5 {
  border-radius: 8px;      /* <-- roundy corners, not a pill */
  padding: 0 4px;          /* less horizontal stretch */
  min-width: 16px;         /* keeps it from becoming too skinny */
  max-width: 24px;         /* prevents long pill look */
}


.sticker-tag {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background-size: 100% 300%;
    background-position: 0 33.33%;
    pointer-events: none;
}

.image-container.highlight {
    background-blend-mode: lighten;
    transition: background-color 0.3s ease;
}


.image-container.hover:not(.dimmed) {
    outline: 0;
}

body.sticker-dragging .image-container.dimmed {
    filter: grayscale(1) saturate(0) brightness(.92);
    opacity: .55;
    pointer-events: none;
}

.image-container .drag-dim{
    position:absolute; inset:0;
    border-radius: 12px;
    pointer-events:none;       /* overlay never blocks clicks */
    opacity:0;                 /* hidden baseline */
    transition: opacity .12s ease;
    box-shadow:
      0 4px 12px #333,
      0 0 0 2px #6f9af0,
      0 0 18px #f7fbff,
      0 0 32px #9db7f2;
}

/* injected once per card; only show on non-targets during a drag */
.image-container .drag-dim { display: none; pointer-events: none; }
body.sticker-dragging .image-container.dimmed .drag-dim { display: block; }


/* Floating mode: sticker rail docks bottom-right if clipped */
.sticker-sidebar.is-floating {
  position: fixed !important;
  right: 12px;
  bottom: 12px;
  width: auto;                 /* shrink to fit */
  max-width: min(92vw, 360px);
  max-height: 55vh;            /* keep it out of the way */
  overflow: auto;
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-radius: 12px;
}

/* Slightly tighter grid when floating so it fits better */
.sticker-sidebar.is-floating .sticker-grid {
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: auto;
  gap: 6px;
}

/* Minimized pill (tap to expand) */
.sticker-sidebar.is-floating.is-minimized {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sticker-sidebar.is-floating.is-minimized .sticker-header,
.sticker-sidebar.is-floating.is-minimized .sticker-subtext,
.sticker-sidebar.is-floating.is-minimized .sticker-grid {
  display: none;
}
.sticker-sidebar.is-floating.is-minimized::after {
  content: "Stickers";
  font-weight: 700;
}
.sticker-sidebar.is-floating .close-btn {
  cursor: pointer;
}


/* Float sticker rail bottom-right on small screens */
@media (max-width: 899px) {
  .sticker-sidebar {
    position: fixed !important;
    right: 12px;
    bottom: 12px;
    width: auto;                         /* shrink to fit */
    max-width: min(92vw, 360px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    z-index: 500;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    border-radius: 12px;
  }

  /* Tighter grid so it fits better when floating */
  .sticker-sidebar .sticker-grid {
    grid-template-columns: repeat(3, 50px);
    grid-auto-rows: 50px;
    gap: 6px;
  }
}

/* Footer strips must never get borders (match home.css) */
.image-container .container-footer-img {      
  width: 100%;
  border: 0 !important;    /* cancel global 3px transparent border */
  margin: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-sizing: border-box;
}

/* grid items are positioned so we can place the "×N" beside #1 */
.sticker-grid .sticker {
  position: relative;
}

.sticker-count {
  font-size: 12px;
  font-weight: 700;
  color: #333;
}

/* “×N” shown NEXT to the #1 sticker (not a round badge) */
.sticker-count-inline {
  position: absolute;
  right: -8px;           /* sits just outside the chip */
  bottom: -2px;
  font: 700 12px/1 system-ui, sans-serif;
  color: #333;
  background: none;
  padding: 0;
  pointer-events: none;
}

.sticker-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticker-epics{
  display: grid; 
  grid-template-columns: repeat(3, 50px);
  grid-auto-rows: 50px;
  gap: 2px;
  margin-top: 8px;
  padding-top: 6px;
}


/* footer strip = full width; button uses the same yellow */
.sticker-footer{
  /* keep your flush positioning from earlier */
  margin: 8px -6px -6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;

  /* gold bar */
  border-radius: 0 0 10px 10px;
  background: #feeb83;
  background-image: linear-gradient(-30deg,#fff1a6,#ffe682 20%,#fef4ad 35%,#f6e097 55%,#f9eb9d);
  color: #562904;                                  /* text color */
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-sizing: border-box;
  white-space: nowrap;
}

.sticker-footer .footer-title{
  flex: 1 1 auto;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  color: #562904;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.sticker-footer .footer-btn{
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #C48B38;
  background: #feeb83;
  background-image: linear-gradient(-30deg,#fff1a6,#e8d175 20%,#fef4ad 35%,#f6e097 55%,#f9eb9d);
  color: #562904;  
  font-weight: 700;
  font-size: 11px;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.sticker-footer .footer-btn:hover { filter: brightness(0.98); }

.count-br {
  position: absolute;
  right: -4px;     /* push further out from the coin */
  bottom: 1px;
  font-size: 10px; 
  font-weight: 400;
  line-height: 1;
  color: #2b2b2b;
  pointer-events: none;
}

/* each icon sits in a 50×50 positioned cell */
.sticker-cell{ position:relative; width:50px; height:50px; }

.sticker-grid .sticker-cell > .count-br{
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: -5px;   /* move a bit to the right */
  bottom: -5px;  /* move a bit downward */
  font-size: 9.5px;
  letter-spacing: 0.1px;
  font-weight: 600;
  line-height: 1;
  color: #6e6e6e;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.sticker-footer .footer-btn,
.sticker-footer .footer-btn:hover,
.sticker-footer .footer-btn:focus,
.sticker-footer .footer-btn:active,
.sticker-footer .footer-btn:visited {
  text-decoration: none !important;
}

/* --- Hover sticker strip (bottom-left row) --- */
.image-container { position: relative; }

.image-container .sticker-strip{
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 1000;                  /* under .top-sticker (20), above artwork */
  opacity: 0;                   /* hidden until hover */
  pointer-events: none;         /* don’t eat hover until visible */
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}

/* show when hovering the badge */
.image-container .top-sticker:hover ~ .sticker-strip,
.image-container .sticker-strip:hover{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* pill + icon match the examples */
.sticker-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.sticker-pill .sticker-icon{
  width: var(--frame);
  height: var(--frame);
  background-size: 100% 300%;
  background-repeat: no-repeat;
  border-radius: 50%;
}

/* small white count badge, bottom-right */
.sticker-pill .sticker-count{
  position: absolute;
  right: 0;
  bottom: 0;

  height: 12.5px;
  min-width: 12.5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;                 /* circle by default */
  border-radius: 50%;

  font-weight: bold;
  font-size: 0.65rem;
  line-height: 1;

  background: #fff;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* 3+ chars → pill */
.sticker-pill .sticker-count.len-3,
.sticker-pill .sticker-count.len-4,
.sticker-pill .sticker-count.len-5 {
  border-radius: 999px;
  padding: 0 3px;
}


/* hide by default */
.image-container .sticker-pill.hidden,
.image-container .sticker-pill.is-hidden { display: none; }

/* reveal on hover */
.image-container .top-sticker:hover ~ .sticker-strip .sticker-pill.hidden,
.image-container .top-sticker:hover ~ .sticker-strip .sticker-pill.is-hidden,
.image-container .sticker-strip:hover .sticker-pill.hidden,
.image-container .sticker-strip:hover .sticker-pill.is-hidden {
  display: inline-flex;
}

/* also reveal when hovering the whole card */
.image-container:hover .sticker-strip .sticker-pill.hidden,
.image-container:hover .sticker-strip .sticker-pill.is-hidden {
  display: inline-flex;
}


/* iOS safe-area quirk: ensure no phantom inset */
@supports (-webkit-touch-callout: none) {
  .topbar { top: env(safe-area-inset-top, 0); }
}

/* the pack shows its own "×N" via .count-br; hide pill/circle badges in the sidebar */
.sticker-sidebar .top-sticker,
.sticker-sidebar .sticker-badge,
.sticker-sidebar .sticker-count { display: none !important; }


/* subtle divider above purchased row */
#sticker-purchased {
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 6px;
  padding-top: 6px;
}

.sticker-epics .sticker-cell .count-br {
  opacity: 0.8;
  font-weight: 600;
}

/* keep ONLY conditional hiding */
#sticker-seasonals:empty { display:none; }
#sticker-seasonals:not(:has(.sticker)) { display:none; }


/* --- 1) Purchased epics visibility ------------------------------------ */
#sticker-purchased:empty { display: none; }   /* only hide if empty */
/* Remove any inline style="display:none" on #sticker-purchased markup */

/* --- 2) “Epic” baseline shared site-wide ------------------------------- */
.sticker.epic {
  width: 50px;
  height: 50px;
  --frame: 50px !important;     /* ⬅️ force correct frame size for epics */
  background-repeat: no-repeat;
  background-position: 0 0;
  /* background-size is per-sticker (depends on columns) */
}

.sticker-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 8px 0;
}

.hidden { display: none !important; }

/* --- Party epic styling --- */

/* Make sure parents are positioned */
.image-container,
.image-wrap,
.img-wrap,
.image-card { position:relative; overflow:hidden; }

/* Keep the column’s width so the center stays the same */
.sticker-sidebar.sticker-spacer {
  visibility: hidden;   /* occupies space, nothing visible */
  pointer-events: none; /* fully inert */
}


/* --- 1) Frame-size switch (home=35px, thread=50px) -------------------- */
:root { --frame: 50px;
  --footer-space: 15px; }              /* default */

.image-container.highlight[class*="sticker-"]{
  position: relative;          /* needed for pseudo-elements */
  overflow: hidden;            /* clip overlays */
}


html body.thread-page {
  --frame: 50px !important;
}

/* Clamp the actual badge + icon box sizes as a safety net */
html body.home-page .top-sticker,
html body.tag-feed-page .top-sticker,
html body.tags-page .top-sticker,
html body.profile-page .top-sticker {
  width: 35px !important;
  height: 35px !important;
}

html body.home-page .top-sticker .sticker-icon,
html body.tag-feed-page .top-sticker .sticker-icon,
html body.tags-page .top-sticker .sticker-icon,
html body.profile-page .top-sticker .sticker-icon {
  width: 35px !important;
  height: 35px !important;
  display: block;
}

/* Only regular (non-epic) badges use 3-row sheets */
html body.home-page .top-sticker .sticker-icon:not(.epic),
html body.tag-feed-page .top-sticker .sticker-icon:not(.epic),
html body.tags-page .top-sticker .sticker-icon:not(.epic),
html body.profile-page .top-sticker .sticker-icon:not(.epic) {
  background-size: 100% 300%;
  background-position: 0 0;
}

.sticker-strip { --frame: 28px; }

.top-sticker{
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: var(--frame);
  height: var(--frame);
  z-index: 999;
}

/* --- 2) Single place for image mappings (grid + badge + strip) -------- */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="smiley"]   { background-image:url('/static/stickers/smiley.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="frowny"]   { background-image:url('/static/stickers/frowny.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="monocle"]  { background-image:url('/static/stickers/monocle.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="lol"]      { background-image:url('/static/stickers/lol.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="wow"]      { background-image:url('/static/stickers/wow.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="question"] { background-image:url('/static/stickers/question.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="num1"]     { background-image:url('/static/stickers/num1.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="cookie"]   { background-image:url('/static/stickers/cookie.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="heart"]    { background-image:url('/static/stickers/heart.png'); }
/* epics */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="based"]   { background-image:url('/static/stickers/based.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="fuckyeah"] { background-image:url('/static/stickers/fuckyeah.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="duck"]     { background-image:url('/static/stickers/duck.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="harp"]  { background-image:url('/static/stickers/harp.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="pot"]      { background-image:url('/static/stickers/pot.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="wtf"]      { background-image:url('/static/stickers/wtf.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="dealwithit"]     { background-image:url('/static/stickers/dealwithit.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="tacocat"]  { background-image:url('/static/stickers/tacocat.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="sealofapproval"]   { background-image:url('/static/stickers/sealofapproval.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="tophat"]   { background-image:url('/static/stickers/tophat.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="hellyeah"]   { background-image:url('/static/stickers/hellyeah.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="rofls"]   { background-image:url('/static/stickers/rofls.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="robot"]   { background-image:url('/static/stickers/robot.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="takethis"]   { background-image:url('/static/stickers/takethis.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="payout"]   { background-image:url('/static/stickers/payout.png'); }


/* --- 3) Badge/strip sizing driven by --frame (no page-specific dupes) -- */
.top-sticker .sticker-icon,
.sticker-strip .sticker-icon {
  width: var(--frame);
  height: var(--frame);
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* Ensure badge icon sizes actually apply */
.top-sticker .sticker-icon {
  display: block;                 /* <-- critical for width/height to work */
  background-repeat: no-repeat;
}

/* Static epics (1×3 sheets): one rule covers grid + badges + strip */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="duck"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="harp"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="pot"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="wtf"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="joint"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="dealwithit"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="tophat"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="sealofapproval"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="robot"]{
  animation: none !important;
  background-size: var(--frame) calc(3 * var(--frame));
  background-position: 0 0;
}

/* 4) Hover guard for animated ones (prevents Y-shift from global :hover) */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="fuckyeah"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="tacocat"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="hellyeah"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="rofls"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="payout"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="based"]{
  background-position-y: 0 !important;
}

/* A) Looping sheets — go full width (cols * frame) */
@keyframes sprite-x-full {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--cols) * var(--frame)); }
}

/* B) Ping-pong sheets — stop at last visible frame (cols - 1) */
@keyframes sprite-x-edge {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * (var(--cols) - 1) * var(--frame)); }
}

/* Rofls (10 cols), ping-pong */
.sticker[data-sticker="rofls"],
.top-sticker .sticker-icon[data-sticker="rofls"],
.sticker-strip .sticker-icon[data-sticker="rofls"],
.tb-list .tb-item .ico.spr[data-sticker="rofls"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-edge 1.5s steps(9) infinite alternate !important; /* 10 cols => 9 steps across */
}

/* Payout (10 cols), ping-pong */
.sticker[data-sticker="payout"],
.top-sticker .sticker-icon[data-sticker="payout"],
.sticker-strip .sticker-icon[data-sticker="payout"],
.tb-list .tb-item .ico.spr[data-sticker="payout"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-edge 1.5s steps(9) infinite alternate !important; /* 10 cols => 9 steps across */
}

/* Based (17 cols), loop */
.sticker[data-sticker="based"],
.top-sticker .sticker-icon[data-sticker="based"],
.sticker-strip .sticker-icon[data-sticker="based"],
.tb-list .tb-item .ico.spr[data-sticker="based"] {
  --cols: 17;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-full 2.2s steps(17) infinite !important;
}

/* Fuckyeah (7 cols) */
.sticker[data-sticker="fuckyeah"],
.top-sticker .sticker-icon[data-sticker="fuckyeah"],
.sticker-strip .sticker-icon[data-sticker="fuckyeah"],
.tb-list .tb-item .ico.spr[data-sticker="fuckyeah"] {
  --cols: 7;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-full .9s steps(7) infinite !important;
}

/* Hellyeah (7 cols) */
.sticker[data-sticker="hellyeah"],
.top-sticker .sticker-icon[data-sticker="hellyeah"],
.sticker-strip .sticker-icon[data-sticker="hellyeah"],
.tb-list .tb-item .ico.spr[data-sticker="hellyeah"] {
  --cols: 7;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-full .9s steps(7) infinite !important;
}

/* Tacocat (10 cols) */
.sticker[data-sticker="tacocat"],
.top-sticker .sticker-icon[data-sticker="tacocat"],
.sticker-strip .sticker-icon[data-sticker="tacocat"],
.tb-list .tb-item .ico.spr[data-sticker="tacocat"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  animation: sprite-x-full 3s steps(10) infinite !important;
}

/* Hide epic rows when they do NOT contain any sticker tiles (even if whitespace exists) */
#sticker-purchased:empty,
#sticker-purchased:not(:has(.sticker)),
#sticker-seasonals:empty,
#sticker-seasonals:not(:has(.sticker)) {
  display: none;
}

/* Optional: only show the divider if at least one epic row has tiles */
.epic-divider { display: none; }

.sticker-sidebar:has(#sticker-purchased .sticker) .epic-divider,
.sticker-sidebar:has(#sticker-seasonals .sticker) .epic-divider {
  display: block;
}

/* --- New Epic Stickers (Static, Non-Animated) -------------------- */

/* Shared background-image map */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="dinoegg"]       { background-image:url('/static/stickers/dino-egg.png'); }
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="martini"]         { background-image:url('/static/stickers/martini.png'); }

/* Static sheet framing — single frame (1×3 sprite compatibility) */
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="dinoegg"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="pint"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="greenhat"],
:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon)[data-sticker="martini"]{
  animation: none !important;
  background-size: var(--frame) calc(3 * var(--frame)); /* match 3-row format */
  background-position: 0 0;
}

.image-container.sticker-wowold.highlight::before {
  background-image:url('/static/img/banners/wtf.png');
}

body.sticker-dragging .sticker.is-dragging,
body.sticker-dragging .sticker-icon.is-dragging {
  /* Ensure 3-row sprites land on the bottom row regardless of size */
  background-position-y: 100% !important;  /* bottom of 3-row sheet */
  filter: saturate(.9);                     /* same tone as shop */
  /* NOTE: do not disable animation here—shop keeps epics animating */
}

/* Prevent mid-row hover from fighting during drag */
body.sticker-dragging .sticker:hover,
body.sticker-dragging .sticker-icon:hover {
  background-position-y: 100% !important;
}

body.sticker-dragging .sticker.is-dragging[data-sticker="fuckyeah"],
body.sticker-dragging .sticker-icon.is-dragging[data-sticker="fuckyeah"] {
  animation: none !important;
  background-position-x: 0 !important; /* freeze on first frame */
  background-position-y: 100% !important; /* bottom row, “picked-up” state */
}

body.sticker-dragging .sticker.is-dragging[data-sticker="hellyeah"],
body.sticker-dragging .sticker-icon.is-dragging[data-sticker="hellyeah"] {
  animation: none !important;
  background-position-x: 0 !important; /* freeze on first frame */
  background-position-y: 100% !important; /* bottom row, “picked-up” state */
}

:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="pint"] {
  background-image:url('/static/stickers/pint.png');
}

:where(.sticker, .top-sticker .sticker-icon, .sticker-strip .sticker-icon, .tb-list .tb-item .ico.spr)[data-sticker="greenhat"] {
  background-image:url('/static/stickers/greenhat.png');
}

/* Rofls (10 cols), ping-pong */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="rofls"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-edge 1.5s steps(9) infinite alternate !important;
}

/* Payout (10 cols), ping-pong */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="payout"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-edge 1.5s steps(9) infinite alternate !important;
}

/* Based (17 cols), loop */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="based"] {
  --cols: 17;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-full 2.2s steps(17) infinite !important;
}

/* Fuckyeah (7 cols), loop */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="fuckyeah"] {
  --cols: 7;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-full .9s steps(7) infinite !important;
}

/* Hellyeah (5 cols), loop */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="hellyeah"] {
  --cols: 5;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-full .6s steps(5) infinite !important;
}

/* Tacocat (17 cols), loop */
:where(.sticker,
       .top-sticker .sticker-icon,
       .sticker-strip .sticker-icon,
       .tb-list .tb-item .ico.spr)[data-sticker="tacocat"] {
  --cols: 10;
  background-size: calc(var(--cols) * var(--frame)) calc(3 * var(--frame)) !important;
  background-position-y: 0 !important;
  animation: sprite-x-full 3s steps(10) infinite !important;
}

#tbActivityMenu .tb-item .ico.spr[data-sticker] {
  background-size: auto 300% !important; /* use native width, keep 3-row layout */
  background-position-y: 0 !important;

}

/* base sidebar – keep its z-index modest */
.sticker-sidebar {
    width: 154px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    height: fit-content;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 6px;
    font-size: 0.8rem;
    text-align: center;
    overflow: hidden;
    z-index: 400;               /* BELOW topbar menus */
    --frame: 50px;
}

/* Floating mode: still below dropdowns */
.sticker-sidebar.is-floating {
  position: fixed !important;
  right: 12px;
  bottom: 12px;
  width: auto;
  max-width: min(92vw, 360px);
  max-height: 55vh;
  overflow: auto;
  z-index: 400;                 /* was 500 */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-radius: 12px;
}

/* Mobile float: also capped at 400 */
@media (max-width: 899px) {
  .sticker-sidebar {
    position: fixed !important;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: min(92vw, 360px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    z-index: 400;               /* was 500 */
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    border-radius: 12px;
  }
}

body.home-page .top-sticker {
  --frame: 35px !important;
}
/* Profile page: badges should be 35px like home */
html body.profile-page {
  --frame: 35px !important;
}

/* Safety clamp (in case something sets explicit px later) */
html body.profile-page .top-sticker,
html body.profile-page .top-sticker .sticker-icon{
  width: 35px !important;
  height: 35px !important;
}

/* WOW — full-cover overlay, NO REPEAT */
.image-container.sticker-wow.highlight{
  position: relative;
  overflow: hidden;
}

.image-container.sticker-wow.highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/img/banners/wow.jpg') center/cover no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-wow.highlight::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: url('/static/img/banners/wow.jpg') repeat-x left bottom;
  background-size: auto;
  border-radius: 0 0 12px 12px;
  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-wow.highlight{
  background-blend-mode: normal !important;
  background-color: transparent !important;
}


.top-sticker .count-br { display: none !important; }

.image-container.sticker-hellyeah.highlight{
  position: relative;
  overflow: hidden;
}

.image-container.sticker-hellyeah.highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/img/banners/hellyeah.jpg') center/cover no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-hellyeah.highlight::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: url('/static/img/banners/hellyeah.jpg') repeat-x left bottom;
  background-size: auto;
  border-radius: 0 0 12px 12px;
  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-hellyeah.highlight{
  background-blend-mode: normal !important;
  background-color: transparent !important;
}

/* WOW — full-cover overlay, NO REPEAT */
.image-container.sticker-wtf.highlight{
  position: relative;
  overflow: hidden;
}

.image-container.sticker-wtf.highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/img/banners/wtf.jpg') center/cover no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-wtf.highlight::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: url('/static/img/banners/wtf.jpg') repeat-x left bottom;
  background-size: auto;
  border-radius: 0 0 12px 12px;
  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-wtf.highlight{
  background-blend-mode: normal !important;
  background-color: transparent !important;
}

/* Make sure the container can host absolutely-positioned layers */
.image-container.sticker-rofls.highlight{
  position: relative;
  overflow: hidden;             /* keeps overlay/strip clipped to the card */
}

/* 1) Full-cover overlay (behind everything) */
.image-container.sticker-rofls.highlight::before{
  content: "";
  position: absolute;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  background: url('/static/img/banners/rofls.jpg') center/cover no-repeat;
  opacity: .2;                  /* adjust to taste */
  z-index: 0;                   /* under badges/strip */
  pointer-events: none;
}


/* 2) Footer strip (15px at the bottom, above overlay) */
.image-container.sticker-rofls.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:15px;

  background-image:url('/static/img/banners/rofls.jpg');

  background-position:center bottom;    /* ✅ anchor */
  background-size:cover;                /* ✅ fill without “stretching” */

  border-radius:0 0 12px 12px;
  z-index:2;
  pointer-events:none;
}

/* Sticker UI must NEVER affect card height */
.image-container .sticker-strip,
.image-container .container-footer,
.image-container .container-footer-img {
  margin: 0 !important;
  padding: 0 !important;
  height: auto;
}

/* If any footer is positioned at the bottom, it must overlay */
.image-container .container-footer,
.image-container .container-footer-img{
  position:absolute;
  left:0; right:0; bottom:0;
}

/* Footer strips must never affect layout (match home.css) */
.image-container .container-footer-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 15px;
  width: 100%;
  object-fit: cover;

  border: 0 !important;
  margin: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;

  box-sizing: border-box;
  pointer-events: none;
}

/* Masonry/columns safety: cards must never stretch */
.image-container {
  min-height: 0 !important;
  height: auto !important;
}

.image-container .container-footer-img{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: var(--footer-space);
  object-fit: cover;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* LOL — add footer strip using ::after (minimal change) */
.image-container.sticker-lol.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);
  background-image:url('/static/img/banners/lol.jpg');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;
  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index: 2;
}

/* HEART — footer strip */
.image-container.sticker-heart.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);
  background-image:url('/static/img/banners/heart.png');
  background-repeat: round;
  background-position: left bottom;
  background-size: 800px 15px;
  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index: 2;
}

/* MONOCLE — footer strip */
.image-container.sticker-monocle.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);
  background-image:url('/static/img/banners/monocle.jpg');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto;
  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index: 2;
}

.image-container.sticker-fuckyeah.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/fuckyeah-metal.gif');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-duck.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/default.png');
  background-repeat: round;
  background-position: left bottom;
  background-size: 800px 15px;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-sealofapproval.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/seal-of-approval.jpg');
  background-repeat: round;
  background-position: left bottom;
  background-size: 800px 15px;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-num1.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/num1.jpg');
  background-repeat: round;
  background-position: left bottom;
  background-size: 800px 15px;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}


.image-container.sticker-sealofapproval.highlight{
  height: auto;
}

.image-container.sticker-question.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/question.png');
  background-repeat: repeat;
  background-position: left bottom;
  background-size: auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-question.highlight{
  height: auto;
}

.image-container.sticker-tophat.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/default.png');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-tophat.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-robot.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/robot.jpg');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-robot.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-harp.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/harp.jpg');
  background-repeat: round;
  background-position: left bottom;
  background-size: 800px 15px;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-harp.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-pot.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/weed.jpg');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-joint.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/default.png');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-joint.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-dealwithit.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/dealwithit.png');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-dealwithit.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-smiley.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/smiley.png');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-smiley.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-based.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-based.highlight::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 15px; /* stop where the footer begins */
  background: url('/static/img/banners/based.png') repeat left top;
  background-size: auto; /* keep natural repeating pattern */
  opacity: 0.2; /* 80% opacity */
  z-index: 0; /* behind content but above page bg */
  pointer-events: none;
}

.image-container.sticker-frowny.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/frowny.png');
  background-repeat:repeat;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-frowny.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-cookie.highlight::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space, 15px);

  background-image:url('/static/img/banners/cookie.png');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto;

  border-radius:0 0 12px 12px;
  pointer-events:none;
  z-index:2;
}

.image-container.sticker-cookie.highlight{
  height:auto;
  min-height:0;
}

.image-container.sticker-dinoegg.highlight::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--footer-space,15px);
  background:url('/static/img/banners/skull.png') repeat-x left bottom;
  border-radius:0 0 12px 12px;
  pointer-events:none; z-index:2;
}

.image-container.sticker-pint.highlight::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--footer-space,15px);
  background:url('/static/img/banners/martini.jpg') repeat-x left bottom;
  border-radius:0 0 12px 12px;
  pointer-events:none; z-index:2;
}

.image-container.sticker-greenhat.highlight::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--footer-space,15px);
  background:url('/static/img/banners/paddysday.jpg') repeat-x left bottom;
  border-radius:0 0 12px 12px;
  pointer-events:none; z-index:2;
}

.image-container.sticker-martini.highlight::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--footer-space,15px);
  background:url('/static/img/banners/martini.jpg') repeat-x left bottom;
  border-radius:0 0 12px 12px;
  pointer-events:none; z-index:2;
}

/* 2) Remove baseline whitespace under inline media */
.image-container img,
.image-container video,
.image-container canvas,
.image-container iframe{
  display: block;
}

/* 3) In case titles/footers have default <p>/<h*> margins */
.image-container :where(p, h1, h2, h3, h4, h5, h6){
  margin: 0;
}


/* 3) Make sure media never adds baseline whitespace */
.gallery .image-container img,
.gallery .image-container video,
.gallery .image-container canvas,
.gallery .image-container iframe{
  display: block !important;
}

/* 4) If any footer elements exist, they MUST overlay and MUST NOT affect height */
.gallery .image-container .container-footer,
.gallery .image-container .container-footer-img{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Your decorative sticker strips must never contribute to layout */
.gallery .image-container .sticker-strip{
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* footer image does NOT affect layout */
.image-container .container-footer-img{
  position: absolute;
  bottom: 0;
  height: var(--footer-space);
}

.image-container.highlight[class*="sticker-"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--footer-space);

  background-size: auto;
  border-radius: 0 0 12px 12px;
  pointer-events:none;
  z-index: 2;
}


/* Pack-only count badge */
.num1-count,
[data-num1-count] {
  position: absolute;
  right: -5px;          /* nudged out like your current count-br */
  bottom: -5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.1px;
  font-weight: 600;
  line-height: 1;
  color: #6e6e6e;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  z-index: 5;           /* above tile bg, below any global overlays */
}

/* Optional: hide when empty/0 using [hidden] or .hidden */
.num1-count[hidden],
[data-num1-count][hidden],
.num1-count.hidden,
[data-num1-count].hidden {
  display: none !important;
}

/* If you keep .count-br for styling elsewhere, DO NOT let it leak into top-sticker */
.top-sticker .count-br,
.top-sticker .num1-count,
.top-sticker [data-num1-count] {
  display: none !important;
}

.sticker-grid .sticker-cell > .num1-count{
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: -5px;   /* move a bit to the right */
  bottom: -5px;  /* move a bit downward */
  font-size: 9.5px;
  letter-spacing: 0.1px;
  font-weight: 600;
  line-height: 1;
  color: #6e6e6e;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.image-container.sticker-fuckyeah.highlight{
  position: relative;
  overflow: hidden;
}

.image-container.sticker-fuckyeah.highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/img/banners/fuckyeah-beams.jpg') center/cover no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-fuckyeah.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;

  background-image: url('/static/img/banners/fuckyeah-beams.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-fuckyeah.highlight{
  background-blend-mode: normal !important;
  background-color: transparent !important;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-robot.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;

  background-image: url('/static/img/banners/robot.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-based.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;

  background-image: url('/static/img/banners/based-footer.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-joint.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;

  background-image: url('/static/img/banners/default.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;
}

.image-container.sticker-tophat.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;

  background-image: url('/static/img/banners/default.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;
}

/* show the strip when hovering the whole card */
.image-container:hover .sticker-strip{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.image-container .sticker-strip{ z-index: 1100; }
.image-container .top-sticker{ z-index: 1200; }

/* Divider + countdown row */
.seasonal-countdown{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 6px 0 2px;
  margin: 6px 0 2px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(0,0,0,0.35);
  white-space: nowrap;   /* 🚀 prevents stacking */
}

/* add subtle divider lines on both sides */
.seasonal-countdown::before,
.seasonal-countdown::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

#sticker-seasonals{
  margin-top: 2px;   /* was likely 6–8px */
}

/* Repeating background above footer (80% opacity) */
.image-container.sticker-tacocat.highlight::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 15px; /* stop where the footer begins */
  background: url('/static/img/banners/tacocat.jpg') repeat left top;
  background-size: auto; /* keep natural repeating pattern */
  opacity: 0.2; /* 80% opacity */
  z-index: 0; /* behind content but above page bg */
  pointer-events: none;
}

.image-container.sticker-tacocat.highlight{
  height:auto;
  min-height:0;
}

/* footer strip (can still repeat-x if you want the “tape” look) */
.image-container.sticker-tacocat.highlight::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-space);
  background: url('/static/img/banners/tacocat.jpg') repeat-x left bottom;
  background-size: auto;
  border-radius: 0 0 12px 12px;
  z-index: 0;
  pointer-events: none;
}

.epic-msg-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}


.epic-msg-title{
  font-weight:700;
  font-size:16px;
  margin-bottom:4px;
}

.epic-msg-sub{
  font-size:13px;
  color:#666;
  margin-bottom:12px;
}

.epic-msg-text{
  width:100%;
  height:110px;              /* fixed size */
  max-height:180px;
  resize:none;               /* prevents drag balloon */
  box-sizing:border-box;     /* prevents overflow */
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}

.epic-msg-text:focus{
  border-color:#3a3a3a;
  box-shadow:0 0 0 2px rgba(0,0,0,.08);
}

.epic-msg-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin:12px 0 0;
  font-size:13px;
  color:#444;
}

.epic-msg-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

.epic-msg-actions button{
  border:1px solid #ddd;
  background:#f5f5f5;
  border-radius:10px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600;
  transition:all .15s ease;
}

.epic-msg-actions button:hover{
  background:#eaeaea;
}

.epic-msg-actions .epic-msg-send{
  background:#3a3a3a;
  color:#fff;
  border-color:#3a3a3a;
}

.epic-msg-actions .epic-msg-send:hover{
  background:#3a3a3a;
}

/* ===== THREAD: FINAL OVERRIDE (works for thread-page OR thread-view) ===== */
:is(body.thread-page, body.thread-view) .image-container{
  position: relative;
}

/* Force the strip to be an overlay and sit above banners/footers */
:is(body.thread-page, body.thread-view) .image-container .sticker-strip{
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;

  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;

  z-index: 9999 !important;      /* above ::before/::after and footer strip */
  opacity: 0 !important;
  pointer-events: none !important;

  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}

/* Show on card hover (NOT dependent on sibling order like .top-sticker:hover ~ .sticker-strip) */
:is(body.thread-page, body.thread-view) .image-container:hover .sticker-strip,
:is(body.thread-page, body.thread-view) .image-container:focus-within .sticker-strip,
:is(body.thread-page, body.thread-view) .image-container .sticker-strip:hover{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0);
}

/* If pills are being marked hidden by default, still reveal them on hover */
:is(body.thread-page, body.thread-view) .image-container:hover .sticker-strip .sticker-pill.hidden,
:is(body.thread-page, body.thread-view) .image-container:hover .sticker-strip .sticker-pill.is-hidden{
  display: inline-flex !important;
}

/* =========================================================
   Epic Sticker Message Modal — match Thread Composer styling
   (Place at very bottom of stickers.css)
   ========================================================= */

/* overlay can stay the same, but soften it a touch */
.epic-msg-overlay{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* Modal card = same vibe as .thread-composer */
.epic-msg-modal{
  width: min(520px, 94vw);
  max-height: 80vh;
  overflow: auto;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Header text = like composer head */
.epic-msg-title{
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
  color: #3a3a3a;
}

.epic-msg-sub{
  margin: 0 0 10px 0;
  font-size: .9rem;
  color: #444;
}

/* Textarea = like #thread-composer textarea */
.epic-msg-text{
  width: 100%;
  box-sizing: border-box;

  padding: 10px;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  background: #fff;

  font-size: 14px;
  line-height: 1.4;

  resize: vertical;     /* matches composer behavior */
  min-height: 110px;
  max-height: 220px;

  outline: none;
  box-shadow: none;
}

.epic-msg-text:hover,
.epic-msg-text:focus,
.epic-msg-text:focus-visible{
  outline: none !important;
  border-color: #c9c9c9 !important;
  box-shadow: none !important;
}

/* Row under textarea (checkbox etc.) */
.epic-msg-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: .9rem;
  color: #444;
}

/* Footer buttons = use the same neutral "cbtn" look */
.epic-msg-actions{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Base button style (matches your thread .cbtn final override) */
.epic-msg-actions button{
  border: 1px solid #bbb;
  border-radius: 6px;
  background: linear-gradient(#fff, #f0f0f0);
  color: #333;

  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 12px;
  line-height: 1;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.epic-msg-actions button:hover{
  background: linear-gradient(#f6f6f6, #e6e6e6);
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* "Send" stays neutral (thread composer primary is neutral too) */
.epic-msg-actions .epic-msg-send{
  /* intentionally identical to others for matching */
}

/* optional: tighten modal spacing on tiny screens */
@media (max-width: 420px){
  .epic-msg-modal{ padding: 14px; }
}

/* Make Send match the light grey style */
.epic-msg-actions .epic-msg-send{
  background: linear-gradient(#fff, #f0f0f0);
  border: 1px solid #bbb;
  color: #333;
}

.epic-msg-actions .epic-msg-send:hover{
  background: linear-gradient(#f6f6f6, #e6e6e6);
  color: #111;
}

/* Any epic should NOT inherit the 1×3 background-size */
.sticker.epic{
  background-size: auto !important; /* will be overridden by per-sticker rules */
}