/* Inline horizontal layout + responsive */
.sse-title{margin:0 0 12px;font-weight:700}

/* Row of items in a single line (scrollable on small screens) */
.sse-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:stretch;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.sse-grid::-webkit-scrollbar{height:8px}
.sse-grid::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}

/* Item card */
.sse-item{
  scroll-snap-align:start;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:12px;
  border:none;border-radius:8px;
  background:var(--sse-color,#ccc);
  padding:14px 18px;
  cursor:pointer;
  height:var(--sse-bar-h,auto); /* we reuse existing control as height */
  color:#fff;text-align:left;
  transition:transform .1s ease,filter .15s ease;
  flex:0 0 240px; /* width on small screens (scroll) */
}
.sse-item:hover{transform:translateY(-2px);filter:brightness(1.05)}
.sse-item:active{transform:translateY(0);filter:brightness(.95)}
.sse-emoji{line-height:1;display:inline-block}
.sse-number{font-size:18px;font-weight:800;line-height:1}
.sse-label{font-size:14px;font-weight:600;opacity:.95}
.sse-thanks{margin-top:10px;font-weight:600}

/* Desktop: fit all 5 items in one row without scroll */
@media (min-width:1024px){
  .sse-grid{overflow:visible}
  .sse-item{flex:1 1 0;height:auto}
}

/* Tablet tweaks */
@media (min-width:768px) and (max-width:1023px){
  .sse-item{flex:0 0 calc((100% - 4*12px)/3)} /* visible 3 cards approx, scroll for the rest */
}

/* Very small screens: slightly smaller text */
@media (max-width:480px){
  .sse-number{font-size:16px}
  .sse-label{font-size:13px}
}

/* Mobile: stack vertically to avoid horizontal overflow */
@media (max-width:640px){
  .sse-grid{display:flex;flex-wrap:wrap;overflow:visible;padding-bottom:0;gap:10px}
  .sse-item{flex:1 1 100%; height:auto;}
}