/* ===== Header ===== */
header {
  position: sticky;
  top: 0;
  z-index: 9;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  background: rgba(253, 246, 240, .78);
  padding: 18px 20px;
  margin: 0 -16px 0;
  border-bottom: 1px solid rgba(212, 114, 122, .08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.header-left {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-right {
  display: none;
}

@media (max-width: 440px) {
  .tabs {
    width: 100%;
  }
}

.title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.6px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--ink) 20%, var(--rose) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.5;
  width: 100%;
}

/* ===== Unlock Page ===== */
.unlock-page {
  display: none;
  padding: 32px 0 16px;
}

.unlock-page.active {
  display: block;
}

/* ===== Pack Stage & 3D Slab ===== */
.pack-stage {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Light-based pit shadow vars */
.pack-slab {
  --pit-shadow-x: 0px;
  --pit-shadow-y: 2px;
  --pit-shadow-blur: 12px;
  --pit-shadow-opacity: .18;
  position: relative;
  width: 100%;
  padding: 32px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(60, 35, 35, .12) 0%, rgba(60, 35, 35, .04) 100%);
  box-shadow:
    inset var(--pit-shadow-x) var(--pit-shadow-y) var(--pit-shadow-blur) rgba(60, 35, 35, var(--pit-shadow-opacity)),
    inset 0 1px 3px rgba(60, 35, 35, .12),
    0 2px 8px rgba(60, 35, 35, .06);
  border: 1.5px solid rgba(212, 114, 122, .10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: box-shadow .15s ease;
}

/* Breathing ambient glow behind the pack — cycles through rarity colors */
.pack-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Rectangular glow layers — sized so at peak breathing (scale 1.0) they are
   5px smaller in width and height than the pack card (80% of slab). */
.pack-glow-layer {
  position: absolute;
  width: calc(80% - 5px);
  aspect-ratio: 1428 / 2000;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 12px;
  filter: blur(18px);
}

.pack-glow-layer:nth-child(1) { background: rgba(176, 160, 144, .80); animation: packBreathe 3s ease-in-out infinite, packColorCycle 12s linear infinite; animation-delay: 0s, 0s; }
.pack-glow-layer:nth-child(2) { background: rgba(123, 174, 212, .80); animation: packBreathe 3s ease-in-out infinite, packColorCycle 12s linear infinite; animation-delay: 0s, -9.6s; }
.pack-glow-layer:nth-child(3) { background: rgba(168, 123, 212, .80); animation: packBreathe 3s ease-in-out infinite, packColorCycle 12s linear infinite; animation-delay: 0s, -7.2s; }
.pack-glow-layer:nth-child(4) { background: rgba(212, 162, 76,  .80); animation: packBreathe 3s ease-in-out infinite, packColorCycle 12s linear infinite; animation-delay: 0s, -4.8s; }
.pack-glow-layer:nth-child(5) { background: rgba(212, 106, 142, .80); animation: packBreathe 3s ease-in-out infinite, packColorCycle 12s linear infinite; animation-delay: 0s, -2.4s; }

@keyframes packBreathe {
  0%, 100% { transform: scale(.90); }
  50%      { transform: scale(1.0); }
}

@keyframes packColorCycle {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  20%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* The pack card sitting in the slab */
.pack-card {
  --light-x: 50%;
  --light-y: 30%;
  --light-intensity: 0.4;
  --shadow-x: 0px;
  --shadow-y: 6px;
  --shadow-blur: 18px;
  position: relative;
  z-index: 2;
  width: 80%;
  transition: box-shadow .4s ease;
  will-change: box-shadow;
  border-radius: 12px;
}

/* Light reflection on pack surface */
.pack-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(
    ellipse at var(--light-x) var(--light-y),
    rgba(255, 255, 255, calc(var(--light-intensity) * 0.8)) 0%,
    rgba(255, 255, 255, calc(var(--light-intensity) * 0.3)) 20%,
    transparent 55%
  );
  mix-blend-mode: soft-light;
  transition: opacity .3s ease;
}

.pack-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(60, 35, 35, .25),
    0 2px 6px rgba(60, 35, 35, .10);
  display: block;
  transition: box-shadow .15s ease;
}

/* Particles container */
.pack-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.pack-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Reveal card overlay — explicitly centred over the pack card */
.pack-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  /* Abs-pos width % resolves against the padding box (content + 2×32 px padding).
     Pack-card is a flex item whose 80% resolves against the content area only.
     Subtract 0.8 × 64 px = 51.2 px to match the pack-card width exactly. */
  width: calc(80% - 51.2px);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Default: centred + 30 px above rest, scaled down — matches pack explosion height */
  transform: translateX(-50%) translateY(calc(-50% - 30px)) scale(.7);
  transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}

.pack-reveal img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(60, 35, 35, .25);
}

/* Pack animation states */
.pack-card.rising {
  transform: translateY(-30px) scale(1.04);
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}

.pack-card.exploding {
  transform: translateY(-30px) scale(0);
  opacity: 0;
  transition: transform .35s cubic-bezier(.6,0,.4,1), opacity .25s ease-out;
}

.pack-card.hidden {
  opacity: 0;
  pointer-events: none;
}

.pack-reveal.visible {
  opacity: 1;
  /* Appear at the explosion height (30 px above rest) at full scale */
  transform: translateX(-50%) translateY(calc(-50% - 30px)) scale(1);
}

.pack-reveal.settling {
  /* Settle to the exact centre of the slab = pack's original rest position */
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}

/* Flash overlay during explosion */
.pack-flash {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(232,145,122,.4) 40%, transparent 70%);
  z-index: 4;
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}

.pack-flash.active {
  animation: packFlash .5s ease-out forwards;
}

@keyframes packFlash {
  0%   { opacity: 1; transform: scale(.3); }
  40%  { opacity: .8; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Particle burst keyframe — each particle gets unique direction via inline style */
.pack-particle.burst {
  animation: particleBurst .6s cubic-bezier(.2,.8,.4,1) forwards;
}

@keyframes particleBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  60%  { opacity: .8; }
  100% { opacity: 0; transform: var(--p-end) scale(0); }
}

/* ===== Page Content Wrapper (tab transitions) ===== */
.page-content {
  position: relative;
  overflow: hidden;
}

.page-content.slide-out-left  { animation: slideOutLeft  .32s ease-in forwards; }
.page-content.slide-out-right { animation: slideOutRight .32s ease-in forwards; }
.page-content.slide-in-left   { animation: slideInLeft   .32s ease-out forwards; }
.page-content.slide-in-right  { animation: slideInRight  .32s ease-out forwards; }

@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-40%); opacity: 0; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(40%); opacity: 0; }
}
@keyframes slideInLeft {
  from { transform: translateX(-40%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(40%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.controls input[type=text] {
  width: 100%;
  border: 1.5px solid var(--rose-soft);
  background: var(--panel);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 14px;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s, transform .15s;
}

.controls input[type=text]:focus {
  box-shadow: 0 0 0 3px rgba(212, 114, 122, .12), 0 4px 16px rgba(212, 114, 122, .08);
  border-color: var(--accent-soft);
  transform: translateY(-1px);
}

.controls input[type=text]::placeholder {
  color: var(--muted);
  opacity: .65;
  font-weight: 400;
}

/* ===== Page Bar (progress + reset) ===== */
.page-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 4px;
}

.page-bar .hint {
  font-size: 12px;
  color: var(--muted);
}

/* ===== Selection Mode ===== */
.page-bar .selection-actions {
  display: none;
  gap: 8px;
  align-items: center;
}

.page-bar.selection-mode .selection-actions {
  display: flex;
}

.page-bar.selection-mode #resetBtn {
  display: none;
}

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--blush);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.tab-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 11px;
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.tab-btn:hover { color: var(--ink-soft); }

.tab-btn.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(80, 40, 40, .08);
}

.tab-btn.hidden { display: none; }

/* Year 2 shimmer animation — subtle shimmer without breathing */
.tab-btn.shimmer {
  background: linear-gradient(135deg, var(--rose), var(--accent));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(212, 114, 122, .30);
  border: 0;
}

.tab-btn.shimmer.active {
  box-shadow: 0 2px 12px rgba(212, 114, 122, .30), 0 2px 10px rgba(80, 40, 40, .08);
}

.tab-btn.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(255, 255, 255, .4) 45%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .4) 55%,
    transparent 75%
  );
  animation: tabShimmer 2.5s linear infinite;
}

@keyframes tabShimmer {
  0%   { transform: translate(-100%, -100%); }
  100% { transform: translate(100%, 100%); }
}

/* ===== Selection Mode Checkbox ===== */
.card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Push rarity badge right when checkbox is present */
.card.selectable .rarity {
  left: 38px;
}

.card-checkbox input {
  display: none;
}

.card-checkbox .checkmark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--rose-soft);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.card-checkbox input:checked + .checkmark {
  background: linear-gradient(135deg, var(--accent), var(--rose));
  border-color: var(--rose);
}

.card-checkbox input:checked + .checkmark::after {
  content: '✓';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.card.selectable {
  cursor: default;
}

/* Small button variant */
.btn-sm {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 10px;
}

/* ===== Grid ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

/* Year 2 tab: 2-col layout where letter card fills right column spanning both rows */
.grid--year2 {
  grid-template-rows: 1fr 1fr;
}

/* ===== Secret Section ===== */
.secret-wrap {
  display: none;
  margin: 16px 0 12px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--panel);
  border: 1.5px solid var(--rose-soft);
}

.secret-head {
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
}

.secret-body {
  aspect-ratio: 16/9;
  width: 100%;
  background: var(--bg-warm);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.secret-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel);
  color: var(--ink);
  border: 1.5px solid var(--rose-soft);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  box-shadow: var(--shadow);
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Animations ===== */
.decode-scramble { animation: inputPop .25s ease; }
@keyframes inputPop { 0% { transform: scale(.98); } 100% { transform: scale(1); } }

.glow-stabilize { animation: glowSettle 1.2s ease-out; }
@keyframes glowSettle {
  0% { box-shadow: 0 0 0 1px rgba(212, 114, 122, 0), var(--shadow); }
  65% { box-shadow: 0 0 0 3px rgba(212, 114, 122, .20), 0 0 32px rgba(212, 114, 122, .18), var(--shadow); }
  100% {}
}

.secret-pulse { animation: secretPulse 1200ms ease-out 1; }
@keyframes secretPulse {
  0% { box-shadow: var(--shadow); transform: scale(1); }
  40% { box-shadow: 0 0 0 4px rgba(212, 114, 122, .15), var(--shadow-lg); transform: scale(1.005); }
  100% { box-shadow: var(--shadow); transform: scale(1); }
}