*{box-sizing:border-box}body{margin:0;background:#0b1021;color:#f3f6ff;font-family:system-ui,Segoe UI,Roboto,sans-serif}
header{padding:16px;background:linear-gradient(180deg,#19275a,#0b1021);border-bottom:1px solid #21306a}
h1{margin:0 0 8px;font-size:1.4rem}
.stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;opacity:.95}
.status{margin-right:auto;color:#ffdf7e;font-weight:600}
nav{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
button{background:#2b3f92;color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
select,input{background:#0f1a40;border:1px solid #22316a;color:#cfe0ff;padding:8px 10px;border-radius:8px}
main{padding:16px}.hidden{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.grid.collection{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{perspective:1000px;width:100%;aspect-ratio:63/88;border-radius:14px}
.card .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}
.card.revealed .inner{transform:rotateY(180deg)}
.card .front,.card .back{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;background:#09122d;border:1px solid #20336e;display:flex;align-items:center;justify-content:center}
.card .front img{width:80%;opacity:.95}.card .back{transform:rotateY(180deg)}.card .back img{width:100%;height:100%;object-fit:contain;background:#0b1433;padding:6px;border-radius:10px}
.thumb{position:relative;background:#0f1a40;border:1px solid #22316a;border-radius:12px;padding:10px}
.thumb img{width:100%;height:100%;object-fit:contain;background:#0b1433;border-radius:8px;border:1px solid #34478e;display:block;padding:6px}
.count-badge{position:absolute;top:6px;right:6px;background:rgba(12,18,40,.9);color:#ffd700;border:1px solid #364a94;border-radius:999px;padding:2px 8px;font-weight:800;font-size:12px}
/* Shiny */
.card.revealed.shiny .back, .thumb.shiny { box-shadow: 0 0 0 3px rgba(255,215,0,.8), 0 0 18px rgba(255,215,0,.35) inset }

/* Shiny reveal glow */
.card.revealed.shiny .back { animation: shinyGlow 900ms ease-out; }
@keyframes shinyGlow { 0%{ box-shadow: 0 0 0 0 rgba(255,215,0,0); } 100%{ box-shadow: 0 0 0 3px rgba(255,215,0,.8), 0 0 18px rgba(255,215,0,.35) inset; } }
.shiny-badge{position:absolute;top:6px;left:6px;background:linear-gradient(135deg,#ffd700,#ff9d00);color:#2b1a00;font-weight:900;font-size:12px;padding:4px 6px;border-radius:8px;z-index:3}
@keyframes shinySpin{0%{transform:rotate(0);opacity:.45}50%{opacity:.7}100%{transform:rotate(360deg);opacity:.45}}
.card .back .shiny-overlay{position:absolute;inset:0;pointer-events:none;background:conic-gradient(from 0deg,rgba(255,215,0,.15),rgba(255,255,255,.08),rgba(255,215,0,.15));mix-blend-mode:screen;animation:shinySpin 6s linear infinite}
.thumb.shiny::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;background:conic-gradient(from 0deg,rgba(255,215,0,.10),rgba(255,255,255,.06),rgba(255,215,0,.10));animation:shinySpin 8s linear infinite;mix-blend-mode:screen}
#setLogo{height:28px;border-radius:6px;border:1px solid #22316a;padding:2px;background:#0f1a40}


/* Missing image fallback */
.img-missing {
  display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(45deg, #0f1a40, #0f1a40 8px, #152457 8px, #152457 16px);
  color:#ffb3b3; font-weight:700; font-size:12px; text-transform:uppercase;
  border: 1px dashed #6b7bbb;
}
.card .back .img-missing { border-radius:10px; }
.thumb .img-missing { border-radius:8px; height:100%; }

#verifyBtn { background:#3653c7; }

/* Hide debug Verify Images button */
#verifyBtn { display: none !important; }

/* === Top-right vertical counters (Base Set 2, Fossil, Shinies) === */
#rightCounters {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
#rightCounters #setCounters { display: block; text-align: right; line-height: 1.15; }
#rightCounters #shinyCounter { display: block; text-align: right; }
#setCounters .set-count-row { margin: 2px 0; }



/* Flip All hidden by default; shown only when pack is active */
#flipAllBtn { display: none; }


/* === Image Modal (Collection zoom & rotate) === */
.img-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.img-modal:not(.hidden) { display: block; }
.img-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.75); }
.img-modal__content { position:relative; max-width:min(90vw, 900px); max-height:90vh; margin: 5vh auto; background:#0f1533; border:1px solid #243a8a; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:10px; padding:12px; }
.img-modal__close { position:absolute; top:8px; right:10px; background:#1d2760; color:#cfe0ff; border:1px solid #2e45a8; border-radius:10px; padding:4px 8px; cursor:pointer; }
.img-modal__stage { flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; background:radial-gradient( circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 60% ); border-radius:10px; }
.img-modal__stage img { max-width:100%; max-height:80vh; transform: rotate(var(--rot, 0deg)); transition: transform .15s ease; border-radius:10px; }
.img-modal__toolbar { display:flex; gap:10px; justify-content:center; }
.img-modal__btn { background:#1d2760; color:#cfe0ff; border:1px solid #2e45a8; border-radius:10px; padding:6px 10px; cursor:pointer; text-decoration:none; }
.img-modal__btn:hover { filter:brightness(1.1); }



/* === Card back image override === */
.card .front {
  background-image: url('card-back.webp');
  background-size: cover;
  background-position: center;
}

/* === Modal pan styles === */
.img-modal__stage img {
  cursor: grab;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1));
}
.img-modal__stage img:active { cursor: grabbing; }



/* === Show only card-back on front side === */
.card .front > * { display: none !important; }  /* hide any text/img inside front */

/* === Modal image: no drag/pan styling === */
.img-modal__stage img {
  cursor: default !important;
  transform: none !important;
}



/* Cross-device save text color */
#xsaveBar, #xsaveBar a { color: #ffffff !important; }



/* === Collection hover enlarge === */
.grid.collection .thumb {
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
  transform-origin: center;
  will-change: transform;
}
.grid.collection .thumb:hover {
  transform: scale(1.08);
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* Ensure hover isn't clipped by grid ancestors */
#collectionGrid { overflow: visible; }



/* Extra breathing room below Collection filters */
#collectionArea .filters { margin-bottom: 20px; }
#collectionGrid { margin-top: 4px; } /* tiny buffer just in case */



/* === Collection filter spacing === */
#collectionArea .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px; /* row gap, column gap */
}
#collectionArea .filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;            /* space between label text and control */
  margin-right: 8px;   /* buffer to the next group */
}
#collectionArea .filters select,
#collectionArea .filters input[type="text"] {
  margin-left: 0;      /* prevent double margins if any */
}



/* === Pack chooser UI (horizontal) === */
.pack-chooser{display:flex;flex-wrap:nowrap;gap:14px;margin-top:6px;overflow-x:auto;padding:6px 4px 10px 2px;scroll-snap-type:x proximity}
.pack-chooser::-webkit-scrollbar{height:10px}
.pack-chooser::-webkit-scrollbar-thumb{background:#1f2b58;border-radius:8px}
.pack-card{flex:0 0 auto;min-width:140px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:flex-start;background:#0f1a40;border:1px solid #22316a;border-radius:12px;padding:10px 10px 12px;cursor:pointer;transition:transform .08s ease, box-shadow .08s ease;scroll-snap-align:start}
.pack-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.pack-card img{width:140px;height:180px;object-fit:cover;border-radius:8px;border:1px solid #1e2b5a;background:#0b1021}
.pack-card span{font-weight:600;font-size:.95rem}
.pack-card.active{outline:2px solid #5aa7ff;box-shadow:0 0 0 3px rgba(90,167,255,.2)}
.pack-card[data-value="ALL"] img{object-fit:contain;padding:10px;background:#0b1021}
@media (max-width:480px){ .pack-card{min-width:120px} .pack-card img{width:120px;height:150px} }

/* Status row below chooser */
.pack-status{display:flex;gap:14px;align-items:center;margin:6px 2px 6px 2px;opacity:.95;flex-wrap:wrap}
.pack-status .status{margin-left:0}
.pack-status .countdown{font-weight:700;color:#b2d6ff}


/* Pack Points badge */
.pack-points{margin-left:auto;background:#132863;border:1px solid #284a9e;border-radius:999px;padding:6px 10px;font-weight:700}
@media (max-width:640px){ .pack-points{margin-left:0} }


/* Compact controls inside status row */
.pack-status .small{padding:6px 10px;border-radius:8px}


/* Bonus packs badge */
.bonus-packs{background:#1a3a7a;border:1px solid #2b55a8;border-radius:999px;padding:4px 8px;font-weight:700;display:none}