/* ===========================================
   EQ Ninjas — Badges (fit exactly 6 in view, no scroll)
   =========================================== */

html, body { height: 100%; margin: 0; }

/* Fluid tokens */
:root{
  --ink:#0f172a; --body:#475569; --bg:#fff; --shadow:rgba(0,0,0,.12);
  --accent:#22c55e; --focus:#60a5fa;

  /* Base (comfortable devices) */
  --gap: clamp(6px,1.2vmin,12px);
  --radius: clamp(10px,1.6vmin,14px);
  --pad-x: clamp(8px,2vmin,14px);
  --pad-y: clamp(6px,1.6vmin,10px);
  --bar-h: clamp(3px,.6vmin,6px);
  --medal: clamp(48px,10vmin,88px);

  --title: clamp(1rem,2.2vmin,1.25rem);
  --sub:   clamp(.85rem,1.8vmin,.95rem);
  --name:  clamp(.95rem,2.1vmin,1.05rem);
  --desc:  clamp(.8rem,1.8vmin,.9rem);
  --meta:  clamp(.72rem,1.6vmin,.82rem);

  --safe-bottom: calc(env(safe-area-inset-bottom,0px) + clamp(8px,2vmin,20px));
}

/* Page */
.bdg-page{
  height:100dvh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 600px at 10% -10%, #f3f7ff 0%, var(--bg) 60%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, #f8fafc 100%);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* Header */
.bdg-hero{
  position:relative;
  padding: .6rem clamp(10px,3vmin,18px) 0;  /* compact */
  display:grid; gap:.5rem; text-align:center; flex-shrink:0;
}
.bdg-hero-art{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 180px at 85% -60px, rgba(96,165,250,.28), transparent 60%),
    radial-gradient(480px 220px at -20% -120px, rgba(244,114,182,.22), transparent 60%);
}

/* Top row: centered logo + settings pinned */
.bdg-hero-top{
  position:relative; display:flex; justify-content:center; align-items:center;
}
.bdg-logo{
  width:80%; max-width:320px; height:auto; margin:0 auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.settings-btn{
  position:absolute; top:0; right:0;
  background:transparent; border:0; font-size:1.6rem;
  cursor:pointer; color:#0f172a; line-height:1;
}
.settings-btn:hover{ transform:scale(1.08); }

.bdg-hero-content{
    position: relative;
    z-index: 1;

}
.bdg-title{ margin:0; font-weight:800; color:var(--ink); font-size:var(--title); }
.bdg-sub{   margin:0; color:var(--body); font-size:var(--sub); }

/* Grid: force exactly 6 equal rows; NO scroll */
.bdg-grid{
    /* flex: 1 0 0; */
    min-height: 0;
    overflow: hidden;
    padding: var(--gap) clamp(10px,3vmin,16px) var(--safe-bottom);
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);

}

/* Card — FLEX so it can compress gracefully */
.bdg-card{
    position: relative;
    isolation: isolate;
    /* height: 100%; */
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: clamp(8px,2vmin,12px);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px var(--shadow);
    padding: var(--pad-y) var(--pad-x);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;

}
.bdg-card:active{ transform:scale(.98); }
.bdg-card:not([aria-disabled="true"]):focus-visible{
  box-shadow:0 0 0 3px var(--focus), 0 6px 18px var(--shadow);
}
.bdg-card.locked{ opacity:.96; cursor:not-allowed; }
.bdg-card.earned{ border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Checkmark */
.wm-check{
  position:absolute; top:6px; right:6px; width:20px; height:20px;
  display:grid; place-items:center; background:#10b981; border-radius:999px;
  font-size:.9rem; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.18);
  user-select:none; pointer-events:none;
}

/* Medal */
.bdg-medal{
  position:relative; width:var(--medal); height:var(--medal);
  display:grid; place-items:center; border-radius:999px; flex:0 0 auto;
  background: radial-gradient(96px 44px at 50% 10%, rgba(99,102,241,.10), transparent 60%), #f8fafc;
  box-shadow: inset 0 0 0 2px rgba(15,23,42,.06), 0 4px 12px rgba(0,0,0,.05);
}
.bdg-card.earned .bdg-medal{ background:transparent; box-shadow:none; }
.bdg-img{
  width:82%; height:82%; object-fit:contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
}
.bdg-card.locked .bdg-img{
  filter: grayscale(1) opacity(.9) drop-shadow(0 1px 1px rgba(0,0,0,.06));
}

/* Lock */
.bdg-lock{
  position:absolute; right:-4px; bottom:-4px;
  font-size:.85rem; background:#0f172a; color:#fff;
  border-radius:999px; padding:2px 6px; box-shadow:0 3px 10px rgba(0,0,0,.18);
}

/* Info */
.bdg-info{
  min-width:0; display:grid; gap: clamp(2px,.6vmin,4px); /* flexible text stack */
}
.bdg-name{
  margin:0; font-weight:800; color:var(--ink); font-size:var(--name);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bdg-desc{
  margin:0; color:var(--body); line-height:1.2; font-size:var(--desc);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.bdg-progress{
  margin-top: clamp(2px,.5vmin,4px);
  width:100%; height:var(--bar-h); background:#e6eef7;
  border-radius:999px; overflow:hidden;
}
.bdg-progress-bar{
  height:100%; background:var(--accent); border-radius:999px; transition:width .2s ease;
}
.bdg-progress-label{
  font-size:var(--meta); color:#0f172a; opacity:.8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Pulse (no scale to avoid clipping in fixed rows) */
.bdg-card.pulse{
  animation: bdgPulse 1.2s ease-out infinite;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent),
    0 8px 20px rgba(0,0,0,.18);
  transform: none;
  border-color: var(--accent);
}
@keyframes bdgPulse{
  0%{   box-shadow:0 0 0 0   color-mix(in srgb, var(--accent) 45%, transparent); }
  70%{  box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 0%,  transparent); }
  100%{ box-shadow:0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .bdg-card,.bdg-progress-bar{ transition:none!important; }
  .bdg-card.pulse{ animation:none!important; }
}

/* =========================================================
   COMPACT "FIT MODE" — progressively shrink on short heights
   ========================================================= */

/* Step 1: hide secondary text (subtitle, desc, progress label) */


/* Step 2: tighten tokens */
@media (max-height: 700px){
  :root{
    --gap: 6px;
    --pad-x: 8px;
    --pad-y: 6px;
    --medal: 56px;
    --title: 1rem;
    --name: .95rem;
    --meta: .74rem;
  }
  .bdg-card{ box-shadow:0 4px 12px var(--shadow); }
}

/* Step 3: extra compact for small phones */
@media (max-height: 660px){
  :root{
    --gap: 5px;
    --pad-x: 6px;
    --pad-y: 5px;
    --medal: 48px;
    --title: .95rem;
    --name: .9rem;
    --bar-h: 3px;
  }
  .bdg-logo{ width:72%; max-width:260px; }
}

/* Step 4: extreme compact (last resort to prevent overlap) */
@media (max-height: 600px){
  :root{
    --gap: 4px;
    --pad-x: 6px;
    --pad-y: 4px;
    --medal: 42px;
    --title: .9rem;
    --name: .85rem;
  }
  .wm-check{ width:18px; height:18px; font-size:.8rem; }
  .bdg-lock{ font-size:.75rem; padding:2px 5px; }
}