:root{
  --bg:#0b1020; --card:#12182c; --text:#e9f0ff; --soft:#9fb3ff; --ring:rgba(159,179,255,0.25);
  --accent1:#13b37f; --accent2:#11a3c8;
  --btn:#1b2340; --btnBorder:rgba(159,179,255,0.25);
  --sold:#7b859f;
}

*{box-sizing:border-box}

html, body {
  margin: 0;
  min-height: 100%;   /* body grows as tall as content */
}

body {
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -20%, #17305a 0%, transparent 60%),
              radial-gradient(1000px 700px at 120% 20%, #122448 0%, transparent 60%),
              var(--bg);
  background-attachment: fixed; /* keeps it fixed while scrolling */
  background-repeat: no-repeat;
  background-size: cover;       /* ensures it stretches */
  font: 16px/1.45 monospace,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
}


.header{
  position:sticky; top:0; z-index:10;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:0.75rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(11,16,32,0.9), rgba(11,16,32,0.6) 60%, rgba(11,16,32,0));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(159,179,255,0.12);
  flex-wrap: wrap;
}

h1{ margin:0; font-size:clamp(1.05rem, 2vw, 1.35rem); letter-spacing:.3px; }

.controls{ display:flex; gap:.75rem; align-items:center; }
#search{
  width:min(56vw, 360px); padding:.55rem .8rem; border-radius:12px;
  background:#0f1630; color:var(--text);
  border:1px solid rgba(159,179,255,0.22); outline:none;
}
#search:focus{ border-color:var(--soft); box-shadow:0 0 0 6px var(--ring); }
.count{ opacity:.9; font-size:.95rem; }

.grid{
  padding:0.8rem clamp(0.75rem, 3vw, 2rem) 1.5rem;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:.85rem;
}

/* Bubble card */
.bubble{
  position:relative; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), var(--card);
  border:1px solid rgba(159,179,255,0.16);
  box-shadow: 0 10px 18px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.bubble:hover{ transform: translateY(-1px); border-color: rgba(159,179,255,0.28); }

.bubble-inner{
  display:flex; flex-direction:column; align-items:center;
  padding:.8rem .9rem; min-height:120px; /* tighter than before */
  gap:.35rem; /* less space between number & name */
  text-align:center;
}

.bubble-number{
  font-weight:700; font-size:1.0rem; letter-spacing:.2px;
  padding:.28rem .55rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(19,179,127,0.12), rgba(17,163,200,0.12));
  border:1px solid rgba(159,179,255,0.2);
  max-width:100%; word-break:break-all;
}

/* Name just below the number, now with tighter spacing */
.bubble-name{
  font-size:.98rem; line-height:1.15; max-width:100%; word-break:break-word; opacity:.95;
}

/* Actions row (Buy / Sold) */
.bubble-actions{
  display:flex; gap:.5rem; margin-top:.4rem;
}

/* Bubble UI*/

/* ==== EPIC GOLD & RARE BUBBLES ==== */

/* Base animation */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 10px var(--glow-color), 0 0 25px rgba(255,255,255,0.05); }
  50% { box-shadow: 0 0 20px var(--glow-color), 0 0 40px rgba(255,255,255,0.08); }
  100% { box-shadow: 0 0 10px var(--glow-color), 0 0 25px rgba(255,255,255,0.05); }
}

/* GOLD bubble */
.bubble.gold {
  --glow-color: #ffd700;
  background: linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)), #1c1a10;
  border: 1px solid rgba(255,215,0,0.35);
  animation: pulse-glow 2s infinite ease-in-out;
}
.bubble.gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 25px rgba(255, 215, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* RARE bubble */
.bubble.rare {
  --glow-color: #c43fff;
  background: linear-gradient(180deg, rgba(196,63,255,0.08), rgba(196,63,255,0.02)), #170c22;
  border: 1px solid rgba(196,63,255,0.35);
  animation: pulse-glow 2s infinite ease-in-out;
}
.bubble.rare:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 25px rgba(196, 63, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Optional: smooth animation entry for all bubbles */
.bubble {
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.4s ease;
}

/* Slight shimmer across gold & rare when hovered */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.bubble.gold:hover, .bubble.rare:hover {
  background-size: 300% 100%;
  animation: shimmer 2.5s linear infinite, pulse-glow 3s infinite ease-in-out;
}


/* Buttons */

.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .65rem; border-radius:10px;
  background:var(--btn); color:var(--text); border:1px solid var(--btnBorder);
  text-decoration:none; font-weight:600; font-size:.9rem; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }

.btn.buy .tg-icon{ display:inline-flex; }

.btn.sold{
  background:rgba(123,133,159,0.2); border-color:rgba(123,133,159,0.35); color:var(--sold);
  cursor:not-allowed;
}

/* Small screens */
@media (max-width: 420px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .bubble-inner{ min-height:112px; }
}

/* --- NEW: segmented radio group styling --- */
.title-wrap { display:flex; flex-direction:column; gap:.15rem; }

.segmented{
  display:inline-grid;
  grid-auto-flow:column;
  gap:0;
  align-items:center;
  padding:.25rem;
  border-radius:14px;
  background: rgba(15, 22, 48, 0.7);
  border:1px solid rgba(159,179,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  margin-left: 150px;
}

.segmented input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.segmented label{
  position:relative;
  padding:.5rem .9rem;
  border-radius:10px;
  font-weight:700;
  font-size:.92rem;
  color: var(--text);
  opacity:.8;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, opacity .15s ease, background .2s ease, box-shadow .2s ease;
}

.segmented label:hover{ opacity:1; }

.segmented input[type="radio"]:focus + label{
  box-shadow: 0 0 0 6px var(--ring);
}

.segmented input[type="radio"]:checked + label{
  opacity:1;
  background: linear-gradient(180deg, rgba(19,179,127,0.18), rgba(17,163,200,0.18));
  box-shadow:
    0 6px 12px -6px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

/* make header wrap nicely on small screens */
.header { flex-wrap: wrap; gap: .75rem; }
.header .controls { margin-left: auto; }
@media (max-width: 720px){
  .header .controls { width:100%; display:flex; justify-content:space-between; }
  #search { flex:1; min-width: 0; }
}

/* Optional tiny chip showing Gold/Rare on a card */
.tier-chip{
  position:absolute; top:8px; left:8px;
  padding: .18rem .45rem; font-size: .72rem; font-weight: 700;
  border-radius: 999px;
  color: var(--text);
  background: rgba(19,179,127,0.22);
  border: 1px solid rgba(159,179,255,0.18);
}
.bubble { position: relative; } /* ensure chip anchors to card */
.tier-chip:has(+ .bubble-inner .bubble-name){ /* if Rare instead of Gold override via JS by text */
}
.tier-chip:where(:not(:empty)) { /* if text is 'Rare', tint slightly bluish via JS if desired */ }

/* --- Fixed bottom pagination --- */
.pager{
  position: fixed;
  inset: auto 0 0 0; /* stick to bottom */
  z-index: 20;
  background: linear-gradient(180deg, rgba(11,16,32,0.15), rgba(11,16,32,0.65));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(159,179,255,0.15);
  padding: .45rem .75rem;
}
.pager-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}

.page-btn{
  appearance: none; border: 1px solid rgba(159,179,255,0.25);
  background: rgba(17,24,48,0.6);
  color: var(--text);
  padding: .42rem .6rem; border-radius: 10px;
  font-weight: 700; cursor: pointer;
}
.page-btn:disabled{ opacity:.45; cursor:not-allowed; }

.page-numbers{
  display: inline-flex; align-items: center; gap: .35rem;
}
.page-num{
  appearance: none; border: 1px solid rgba(159,179,255,0.25);
  background: rgba(17,24,48,0.55);
  color: var(--text);
  padding: .42rem .6rem; border-radius: 10px;
  font-weight: 700; cursor: pointer;
}
.page-num.current{
  background: linear-gradient(180deg, rgba(19,179,127,0.22), rgba(17,163,200,0.22));
  box-shadow: 0 6px 12px -6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
  cursor: default;
}
.page-num.ellipsis{
  cursor: default; opacity: .6; border-style: dashed;
}

/* Add bottom padding so content isn't hidden behind pager */
.grid{ padding-bottom: 5.5rem; }

/* Animations */

/* --- Micro-animations --- */
@media (prefers-reduced-motion: no-preference) {
  .bubble {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, box-shadow .2s ease;
    will-change: opacity, transform;
  }
  .bubble.reveal {
    opacity: 1;
    transform: translateY(0);
  }

  /* gentle lift on hover */
  .bubble:hover {
    transform: translateY(-2px);
  }

  /* button polish + ripple host */
  .btn {
    position: relative;
    overflow: hidden;            /* contains the ripple */
    transform: translateZ(0);    /* avoids blurring on some GPUs */
    transition: filter .15s ease, transform .15s ease;
  }
  .btn:hover { filter: brightness(1.05); }
  .btn:active { transform: scale(0.98); }

  /* ripple element */
  .btn .ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    inset: 0 auto auto 0;
    width: 8px; height: 8px;
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1);
    animation: btn-ripple .5s ease-out forwards;
    background: currentColor; /* matches button text/icon color */
    mix-blend-mode: screen;
  }

  @keyframes btn-ripple {
    from { opacity: .25; transform: translate(var(--rx, -50%), var(--ry, -50%)) scale(1); }
    to   { opacity: 0;    transform: translate(var(--rx, -50%), var(--ry, -50%)) scale(40); }
  }

  /* optional. a bit more pop for tier chip */
  .tier-chip {
    transition: transform .15s ease;
  }
  .bubble:hover .tier-chip {
    transform: translateY(-1px);
  }
}