/* Kuriosi — Question Packs (the expansion shelf)
   Mobile-first (390×844 target). Uses --k-* design tokens and the .btn lacquer family.

   Replaces the old Study Mode sheet: packs are a way to PLAY, so this file
   styles a shelf of playable packs, the make-your-own flow, and the generation
   loading screen — plus the "what you missed" list the run summary shows after
   a pack run. */

#packs-layer {
  position: fixed;
  inset: 0;
  z-index: 62;
  pointer-events: none;
  font-family: var(--kuriosi-ui-font, 'Trebuchet MS', system-ui, sans-serif);
  color: var(--kuriosi-cyan-soft, #bff8ff);
}
#packs-layer.packs-active { pointer-events: auto; }

.packs-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding:
    calc(var(--k-space-3, 12px) + env(safe-area-inset-top, 0px))
    calc(var(--k-space-3, 12px) + env(safe-area-inset-right, 0px))
    calc(var(--k-space-3, 12px) + env(safe-area-inset-bottom, 0px))
    calc(var(--k-space-3, 12px) + env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 50% 60%, rgba(33, 219, 255, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(1, 4, 13, 0.92), rgba(2, 5, 16, 0.98));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.packs-panel {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: var(--k-screen-pad-y, 24px) var(--k-screen-pad-x, 16px);
  border-radius: var(--k-screen-radius, 18px);
  border: 1px solid rgba(255, 226, 143, 0.28);
  background:
    linear-gradient(180deg, rgba(12, 28, 52, 0.98), rgba(4, 10, 22, 0.99));
  box-shadow: var(--k-shadow-panel, 0 22px 66px rgba(0, 0, 0, 0.74));
}

.packs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--k-screen-gap, 12px);
  margin-bottom: var(--k-space-2, 8px);
}
.packs-heading {
  flex: 1;
  font-size: var(--k-type-xl, clamp(24px, 6vw, 36px));
  font-weight: 900;
  line-height: 1.1;
  color: #fff7dc;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* Beat .btn min-width/padding without !important — scope under the layer. */
#packs-layer .packs-close.btn {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: var(--k-touch-floor, 44px);
  margin-top: 0;
  padding: 8px 14px;
  font-size: var(--k-type-sm, 13px);
}
.packs-sub {
  margin-bottom: var(--k-space-4, 16px);
  color: var(--meta-muted, rgba(200, 210, 242, 0.78));
  font-size: var(--k-type-sm, 13px);
}
.packs-kicker {
  margin: var(--k-space-4, 16px) 0 var(--k-space-3, 12px);
  font-size: var(--k-type-kicker, 10px);
  font-weight: 800;
  letter-spacing: var(--k-type-kicker-track, 0.14em);
  text-transform: uppercase;
  color: var(--kuriosi-gold-hot, #ffe08a);
}
.packs-kicker:first-child { margin-top: 0; }
.packs-copy {
  margin: 0 0 var(--k-space-4, 16px);
  font-size: var(--k-type-md, 15px);
  line-height: 1.4;
  color: rgba(230, 238, 255, 0.9);
}
.packs-price {
  margin-bottom: var(--k-space-4, 16px);
  padding: var(--k-space-3, 12px);
  border-radius: var(--k-radius-md, 12px);
  border: 1px solid rgba(53, 223, 255, 0.35);
  background: rgba(10, 40, 64, 0.55);
  color: #dcfaff;
  font-weight: 800;
  text-align: center;
}

.packs-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-screen-gap-tight, 8px);
  align-items: center;
  margin-bottom: var(--k-space-4, 16px);
}
.packs-status {
  flex: 1 1 auto;
  min-height: var(--k-touch-floor, 44px);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--k-radius-md, 12px);
  background: rgba(8, 20, 40, 0.7);
  border: 1px solid rgba(75, 224, 255, 0.25);
  font-size: var(--k-type-sm, 13px);
}
.packs-status.is-pro {
  border-color: rgba(255, 200, 80, 0.45);
  color: #ffe8a8;
}

.packs-actions {
  display: flex;
  flex-direction: column;
  gap: var(--k-screen-gap-tight, 8px);
  margin-bottom: var(--k-space-4, 16px);
}
.packs-actions .btn {
  width: 100%;
  margin-top: 0;
  min-height: var(--k-btn-min-height, 56px);
}

/* ---- Subject chips (make your own) ---------------------------------- */
.packs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--k-space-4, 16px);
}
.packs-chip {
  min-height: var(--k-touch-floor, 44px);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--k-radius-pill, 999px);
  border: 1px solid rgba(75, 224, 255, 0.45);
  background: linear-gradient(180deg, rgba(13, 35, 62, 0.95), rgba(3, 11, 25, 0.98));
  color: #dcfaff;
  font-size: var(--k-type-sm, 13px);
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--k-press-ms, 90ms) var(--k-ease-out, ease);
}
.packs-chip:active { transform: scale(var(--k-press-scale, 0.98)); }
.packs-chip:focus-visible {
  outline: 3px solid var(--kuriosi-cyan, #35dfff);
  outline-offset: 2px;
}

.packs-form { display: flex; flex-direction: column; gap: 10px; }
.packs-prompt {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: var(--k-radius-md, 12px);
  border: 1px solid rgba(75, 224, 255, 0.35);
  background: rgba(3, 10, 22, 0.9);
  color: #eef6ff;
  font: inherit;
  font-size: var(--k-type-md, 15px);
}
.packs-prompt:focus {
  outline: 2px solid var(--kuriosi-cyan, #35dfff);
  outline-offset: 1px;
}
.packs-hint {
  margin: 0;
  font-size: var(--k-type-xs, 12px);
  line-height: 1.4;
  color: rgba(190, 205, 235, 0.72);
}

/* ---- The shelf ------------------------------------------------------- */
.packs-shelf {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3, 12px);
}
.packs-card {
  padding: var(--k-space-3, 12px);
  border-radius: var(--k-radius-md, 12px);
  border: 1px solid rgba(255, 226, 143, 0.22);
  background: rgba(8, 18, 36, 0.85);
}
.packs-card.is-locked { opacity: 0.88; border-color: rgba(255, 120, 90, 0.35); }
.packs-card.is-soon { opacity: 0.72; border-style: dashed; }
.packs-card-title {
  font-size: var(--k-type-lg, 18px);
  font-weight: 900;
  color: #fff7dc;
}
.packs-card-meta {
  margin-top: 4px;
  font-size: var(--k-type-xs, 12px);
  color: rgba(190, 205, 235, 0.75);
}
.packs-card-best {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--k-radius-pill, 999px);
  border: 1px solid rgba(255, 200, 80, 0.4);
  background: rgba(52, 38, 8, 0.55);
  font-size: var(--k-type-xs, 12px);
  font-weight: 800;
  color: #ffe8a8;
}
.packs-card-error {
  margin-top: 6px;
  font-size: var(--k-type-xs, 12px);
  color: #ffb4a8;
}
.packs-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.packs-card-actions .btn {
  flex: 1 1 40%;
  min-width: 0;
  min-height: var(--k-touch-min, 48px);
  margin-top: 0;
  padding: 10px 12px;
  font-size: var(--k-type-sm, 13px);
}
/* Play is the point of the card — it takes the full first row. */
.packs-card-actions .btn.packs-play { flex: 1 1 100%; }
.packs-empty {
  padding: 20px 12px;
  text-align: center;
  color: rgba(190, 205, 235, 0.7);
  font-size: var(--k-type-md, 15px);
  line-height: 1.4;
}

/* ---- Building a pack: the loading screen ---------------------------- */
/* Deliberately the same language as the boot loading bar (.start-loading) so
   waiting for questions reads as "the game is loading", not "a job is queued". */
.packs-building {
  padding: var(--k-space-4, 16px) 0 var(--k-space-2, 8px);
  text-align: center;
}
.packs-building-title {
  font-size: var(--k-type-lg, 18px);
  font-weight: 900;
  color: #fff7dc;
}
.packs-building-sub {
  margin-top: 6px;
  min-height: 2.6em;
  font-size: var(--k-type-sm, 13px);
  line-height: 1.3;
  color: rgba(200, 215, 245, 0.82);
}
.packs-bar-track {
  margin: var(--k-space-4, 16px) auto var(--k-space-2, 8px);
  width: min(360px, 100%);
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(75, 224, 255, 0.35);
  background: rgba(3, 10, 22, 0.9);
  overflow: hidden;
}
.packs-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #35dfff, #ffe08a);
  box-shadow: 0 0 12px rgba(53, 223, 255, 0.6);
  transition: width 380ms var(--k-ease-out, ease);
}
.packs-bar-label {
  font-size: var(--k-type-kicker, 10px);
  font-weight: 800;
  letter-spacing: var(--k-type-kicker-track, 0.14em);
  text-transform: uppercase;
  color: var(--kuriosi-gold-hot, #ffe08a);
}

/* ---- "What you missed" (rendered into the run summary) -------------- */
.meta-missed {
  margin: var(--k-space-3, 12px) 0;
  padding: var(--k-space-3, 12px);
  border-radius: var(--k-radius-md, 12px);
  border: 1px solid rgba(255, 226, 143, 0.25);
  background: rgba(6, 14, 28, 0.75);
}
.meta-missed-title {
  margin-bottom: 8px;
  font-size: var(--k-type-kicker, 10px);
  font-weight: 800;
  letter-spacing: var(--k-type-kicker-track, 0.14em);
  text-transform: uppercase;
  color: var(--kuriosi-gold-hot, #ffe08a);
}
.meta-missed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.meta-missed-item {
  padding: 10px 12px;
  border-radius: var(--k-radius-md, 12px);
  border: 1px solid rgba(255, 100, 80, 0.35);
  background: rgba(10, 16, 30, 0.8);
}
.meta-missed-q {
  font-size: var(--k-type-sm, 13px);
  font-weight: 800;
  color: #eef4ff;
}
.meta-missed-a {
  margin-top: 4px;
  font-size: var(--k-type-xs, 12px);
  color: rgba(200, 220, 255, 0.85);
}
.meta-missed-x {
  margin-top: 4px;
  font-size: var(--k-type-xs, 12px);
  line-height: 1.35;
  color: #ffe8b0;
}

@media (prefers-reduced-motion: reduce) {
  .packs-chip { transition: none; }
  .packs-bar-fill { transition: none; }
}

/* Pack name on the run summary's chip row. */
.meta-chip.meta-chip-pack {
  border-color: rgba(168, 93, 255, 0.5);
  background: rgba(40, 18, 72, 0.55);
  color: #e8d6ff;
}