/* perk-center-theme.css - member page (perk-center.html) ONLY - 2026-10-12
   Follows PERK-CENTER-MIGRATION-PROTOCOL.txt. Linked LAST, after perk-theme.css.
   perk-theme.css is not edited, so the Perk Control console is unaffected.
   Undo: remove the one <link> line from perk-center.html. */

/* ---------- A. header nudge: tile 15px lower, animated title 40px higher and 15 percent larger ---------- */
html body .card-stack { margin-top: 15px !important; }
html body .card-stack .menu-rect-label {
  top: -50px !important;
  scale: 1.15;
  transform-origin: 50% 50%;
}

/* ---------- B. the four tabs as glowing tiles (one row of four, two by two on phones) ---------- */
html body #lbSlider {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  margin-bottom: .9em !important;
}
html body #lbSlider .lb-slider-btn {
  flex: none !important;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal !important;
  padding: .55em .5em !important;
  font-size: .78em !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #ffffff !important;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 214, 10, .16), transparent 62%),
    linear-gradient(165deg, #151515, #050505) !important;
  border: 1px solid rgba(255, 214, 10, .5) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 14px -2px rgba(255, 214, 10, .45),
    0 0 34px -8px rgba(255, 214, 10, .35),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s ease, background .35s ease, color .35s ease !important;
  animation: pcTabBreathe 7s ease-in-out infinite;
}
html body #lbSlider .lb-slider-btn:hover:not(.active) {
  transform: translateY(-2px);
  color: #ffd60a !important;
}
html body #lbSlider .lb-slider-btn.active {
  color: #000000 !important;
  background: linear-gradient(135deg, #fff3a8 0%, #ffd60a 45%, #e0b800 100%) !important;
  border-color: #fff3a8 !important;
  box-shadow:
    0 0 22px rgba(255, 214, 10, .75),
    0 0 52px -4px rgba(255, 214, 10, .55),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}
@keyframes pcTabBreathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }

/* ---------- C. ONE stacked tile: name row, one proportional row of three stats, countdown ---------- */
html body .nav-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
  gap: 0;
  padding: .35em 1em .6em 1.2em !important;
  margin-top: .2em;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 214, 10, .14), transparent 55%),
    linear-gradient(165deg, #141414, #050505) !important;
  box-shadow:
    inset 6px 0 0 #ffd60a,
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 22px 40px -18px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 214, 10, .3),
    0 0 26px -6px rgba(255, 214, 10, .35) !important;
}
/* row 1: the name button takes two cells, Sync Points takes the third (when it is shown) */
html body .nav-meta .name-btn {
  grid-row: 1;
  grid-column: 1 / -1;
  width: auto;
  margin: .5em 0 !important;
  border-radius: 10px !important;
  min-height: 40px;
  font-size: .62rem !important;
  letter-spacing: .1em;
}
/* when Sync Points is shown (a name is saved) the name button gives it the third cell */
html body .nav-meta:has(.name-refresh-btn[style*="flex"]) .name-btn { grid-column: 1 / span 2; }
html body .nav-meta .name-refresh-btn {
  grid-row: 1;
  grid-column: 3;
  width: auto;
  margin: .5em 0 .5em .6em !important;
  border-radius: 10px !important;
  min-height: 40px;
  font-size: .56rem !important;
}
html body .nav-meta .name-entry {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0 0 .5em !important;
}
html body .nav-meta .name-entry .name-input { border-radius: 10px !important; min-height: 38px; }
/* row 2: the three point cells share ONE row; label on top, value under it */
html body .nav-meta .meta-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "value";
  row-gap: 6px;
  align-content: center;
  justify-items: start;
  min-height: 64px;
  padding: .7em .8em !important;
  font-size: .62rem !important;
  font-weight: 650;
  letter-spacing: .1em;
  color: #a8a8a8;
  border-top: 1px solid rgba(255, 214, 10, .22);
  border-right: 1px solid rgba(255, 214, 10, .14);
}
html body .nav-meta .meta-row > span:first-child { grid-area: label; }
html body .nav-meta .meta-row > .pill,
html body .nav-meta .meta-row > .clock { grid-area: value; }
html body .nav-meta .meta-week { grid-row: 3; grid-column: 1; }
html body .nav-meta .meta-build { grid-row: 3; grid-column: 2; }
html body .nav-meta .meta-life { grid-row: 3; grid-column: 3; border-right: 0; }
html body .nav-meta .meta-row .pill {
  font-size: 1.05rem !important;
  border-radius: 999px !important;
  padding: .1em .75em !important;
  background: #ffd60a !important;
  color: #000 !important;
  border: 0 !important;
}
/* row 3: the countdown spans the full width, steady monospace digits */
html body .nav-meta .meta-cashout {
  grid-row: 4;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label value";
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
  border-right: 0;
}
html body .nav-meta .meta-row .clock {
  font-family: 'Courier New', Consolas, monospace !important;
  font-size: 1rem !important;
  color: #ffd60a !important;
  letter-spacing: .06em;
  justify-self: end;
}

/* ---------- D. the stacked tile HANGS while the lists scroll under it ---------- */
/* body was overflow-x:hidden / overflow-y:auto, a scroll container that never scrolls, which blocks sticky */
html body { overflow-x: clip !important; overflow-y: visible !important; }
/* a sticky element only sticks inside its parent, so the left column dissolves into the screen */
html body .nav-col { display: contents !important; }
html body .nav-meta { position: sticky; top: 10px; z-index: 60; }

/* ---------- E. phones ---------- */
@media (max-width: 560px) {
  html body #lbSlider { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .nav-meta { top: 6px; padding-left: 1em !important; }
  html body .nav-meta .meta-row { padding: .6em .55em !important; }
}
@media (pointer: coarse), (max-width: 560px) {
  html body #nameInput { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #lbSlider .lb-slider-btn { animation: none !important; transition: none !important; }
}

/* ---------- badge and icon spots on Rewards and Store tiles ---------- */
html body .pk-icon {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  object-fit: cover;
  flex: none;
  margin-right: .55em;
  vertical-align: middle;
  border: 1px solid rgba(255, 214, 10, .6);
  box-shadow: 0 0 10px -2px rgba(255, 214, 10, .45);
  background: #0b0b0b;
}
html body .pk-badge {
  display: inline-block;
  margin-left: .55em;
  padding: .12em .65em;
  border-radius: 999px !important;
  background: #ffd60a;
  color: #000;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
html body .chip-tag-store.has-badge {
  background: #ffd60a !important;
  color: #000 !important;
  border-radius: 999px !important;
  padding: .15em .7em !important;
  letter-spacing: .08em;
}
html body .default-rewards .chip-name,
html body .collab-rewards .chip-name,
html body #storeList .chip-name { display: flex; align-items: center; flex-wrap: wrap; }