/* =========================================================================
   Steal a Dragon Egg — SE.PanelKit primitives (.pk-*) + collection panels:
   'index' (.col-ix-*), 'dragons' (.col-dr-*), 'eggs' (.col-eg-*).
   Panels adapt to their own width with container queries on .pk-root.
   Variant looks: .pk-v1 golden, .pk-v2 crystal, .pk-v3 rainbow, .pk-v4 galaxy.
   ========================================================================= */

/* ---------------- kit ---------------- */
.pk-root { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.pk-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #a86d2a rgba(120, 70, 20, .15); }
.pk-scroll::-webkit-scrollbar { width: 9px; }
.pk-scroll::-webkit-scrollbar-thumb { background: linear-gradient(#c58337, #8a4b1f); border-radius: 6px; border: 2px solid rgba(255, 243, 214, .7); }
.pk-ic { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.pk-ic.is-missing, .pk-img.is-missing { visibility: hidden; }

.pk-art { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pk-art .pk-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(42, 20, 7, .3)); }
.pk-sil .pk-img { filter: brightness(0) opacity(.42); }
/* fallback variant tint of the static renders (model thumbnails replace them when available) */
.pk-v1 .pk-img.pk-tint { filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(-6deg) brightness(1.12) drop-shadow(0 0 6px rgba(255, 201, 40, .85)); }
.pk-v2 .pk-img.pk-tint { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(148deg) brightness(1.18) drop-shadow(0 0 6px rgba(111, 232, 255, .9)); }
.pk-v3 .pk-img.pk-tint { animation: pk-rainbow 3s linear infinite; }
.pk-v4 .pk-img.pk-tint { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(218deg) brightness(.78) contrast(1.25) drop-shadow(0 0 8px rgba(122, 77, 255, .95)); }
@keyframes pk-rainbow { from { filter: saturate(1.7) hue-rotate(0deg) drop-shadow(0 0 6px rgba(255, 106, 213, .8)); } to { filter: saturate(1.7) hue-rotate(360deg) drop-shadow(0 0 6px rgba(106, 138, 255, .8)); } }
.pk-v1 { --vglow: rgba(255, 201, 40, .8); }
.pk-v2 { --vglow: rgba(111, 232, 255, .85); }
.pk-v3 { --vglow: rgba(255, 106, 213, .8); }
.pk-v4 { --vglow: rgba(122, 77, 255, .9); }

.pk-rays {
  position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 245, 190, .55) 0 9deg, rgba(255, 245, 190, 0) 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 52%); mask: radial-gradient(circle, #000 8%, transparent 52%);
  animation: pk-spin 16s linear infinite; pointer-events: none;
}
@keyframes pk-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.pk-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px 1px 3px; min-height: 26px; border-radius: 999px;
  background: #fff6dc; border: 2px solid #7a4a1c;
  font: 900 14px/1 var(--font); color: var(--parch-ink); white-space: nowrap;
}
.pk-cash .pk-cur { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, #8ff05a, #2f9a14); border: 2px solid #173f08; color: #fff; font: 900 11px/1 var(--font); }
.pk-cash .pk-num { color: #23720f; }
.pk-gem .pk-gem-ic { width: 22px; height: 22px; object-fit: contain; }
.pk-gem .pk-num { color: #6b3fd0; }
.pk-chip.pk-small { min-height: 22px; font-size: 12px; }

.pk-tag, .pk-rar {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
  padding: 1px 7px 2px; border-radius: 7px; border: 2px solid var(--ink);
  font: 900 11px/1.25 var(--font); color: #fff; text-shadow: var(--ts-sm); white-space: nowrap;
  background: var(--vc, #7a4a1c);
}
.pk-rar { background: var(--rc, #7a4a1c); }
.pk-tag-v1 { background: linear-gradient(#ffd84d, #e09b00); }
.pk-tag-v2 { background: linear-gradient(#8ff1ff, #2aa8d8); }
.pk-tag-v3 { background: linear-gradient(90deg, #ff5a5a, #ffb84d, #f9f871, #66e07a, #5cc1ff, #b48bff, #ff6ad5); }
.pk-tag-v4 { background: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(#7a4dff, #2a1670); }
.pk-tag-own { background: #3fae1f; }
.pk-tag-own.is-none { background: #8f7a5c; }
.pk-tag-team { background: linear-gradient(#ffd84d, #e09b00); }
.pk-tag .pk-tag-ic { width: 13px; height: 13px; }
.pk-tag.pk-small, .pk-rar.pk-small { font-size: 10px; padding: 0 5px 1px; }

.pk-bar { position: relative; display: block; height: 14px; border-radius: 8px; background: rgba(90, 50, 10, .22); border: 2px solid #7a4a1c; overflow: hidden; }
.pk-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(180deg, #9cf26a, #3fae1f 60%, #2f8a12); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); transition: width .25s linear; }

/* kit buttons share the look of SE.UI.btn (.ui-btn) */
.pk-btn {
  --c1: #f3e7cc; --c2: #c4b08c; --c3: #7b6a4c;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 4px 14px 8px;
  font: 900 16px/1.05 var(--font); color: #fff; text-shadow: var(--ts-sm); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0 42%, rgba(255, 255, 255, 0) 43%), linear-gradient(180deg, var(--c1), var(--c2));
  border: 3px solid var(--ink); border-radius: 13px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 var(--c3), 0 3px 0 var(--ink), 0 6px 10px rgba(0, 0, 0, .2);
  cursor: pointer; transition: transform .07s ease, filter .15s ease; touch-action: manipulation;
}
.pk-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 var(--c3), 0 0 0 var(--ink); }
.pk-btn:hover:not(:disabled) { filter: brightness(1.07); }
.pk-btn:disabled { filter: saturate(.2) brightness(.9); cursor: default; }
.pk-green { --c1: #78e64a; --c2: #3fae1f; --c3: #23720f; }
.pk-red { --c1: #ff7a63; --c2: #e0321f; --c3: #8c1a0f; }
.pk-blue { --c1: #5cc1ff; --c2: #1f7fe6; --c3: #124f9c; }
.pk-gold { --c1: #ffe36b; --c2: #f2ad14; --c3: #a26600; }
.pk-rw, .pk-purple { --c1: #c08bff; --c2: #7b3fd0; --c3: #4a1f8c; }
.pk-ghost { --c1: #f3e7cc; --c2: #c4b08c; --c3: #7b6a4c; }
.pk-btn .pk-btn-ic { width: 26px; height: 26px; margin: -3px 0 -3px -3px; filter: drop-shadow(0 2px 0 rgba(42, 20, 7, .55)); }
.pk-btn .pk-chip { text-shadow: none; }
.pk-btn-text { display: inline-flex; flex-direction: column; align-items: center; }
.pk-btn-sub { font: 800 11px/1.1 var(--font); opacity: .95; margin-top: 1px; }
.pk-btn.pk-small { min-height: 40px; padding: 3px 10px 6px; font-size: 14px; border-radius: 11px; }
.pk-btn.pk-small .pk-btn-ic { width: 22px; height: 22px; }
.pk-btn.is-busy { pointer-events: none; }
.pk-btn.is-busy > * { visibility: hidden; }
.pk-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -13px 0 0 -11px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .8s linear infinite; }
.pk-btn.is-poor .pk-btn-label { color: #ffd6cc; }
.pk-pulse:not(:disabled) { animation: pk-pulse 1.3s ease-in-out infinite; }
@keyframes pk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); filter: brightness(1.12); } }

.pk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 12px; text-align: center; color: rgba(74, 42, 16, .8); font: 900 17px/1.3 var(--font); }
.pk-empty-art { width: 96px; height: 96px; }
.pk-empty-title { font-size: 20px; color: var(--parch-ink); }
.pk-empty-text { font: 800 14px/1.35 var(--font); max-width: 360px; }

.pk-confirm { position: absolute; inset: -6px; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; background: rgba(42, 20, 7, .58); animation: fade-in .15s ease both; }
.pk-confirm.is-out { animation: fade-out .15s ease both; }
@keyframes fade-out { to { opacity: 0; } }
.pk-confirm-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 14px 16px;
  border-radius: 18px; border: 3px solid var(--ink);
  background: linear-gradient(var(--parch-1), var(--parch-2));
  box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .4);
  animation: pop-in .25s cubic-bezier(.2, 1.4, .4, 1) both;
}
.pk-confirm-card.is-danger { border-color: #8c1a0f; }
.pk-confirm-ic, .pk-confirm-art { width: 64px; height: 64px; }
.pk-confirm-title { font: 900 19px/1.2 var(--font); }
.pk-confirm-text { font: 800 14px/1.35 var(--font); color: rgba(74, 42, 16, .85); }
.pk-confirm-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

.pk-float { position: absolute; z-index: 30; transform: translate(-50%, -50%); font: 900 26px/1 var(--font); color: var(--cash); text-shadow: var(--ts); pointer-events: none; animation: float-up 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }

/* ---------------- shared header strip (dark wood) ---------------- */
.col-ix-head, .col-dr-top, .col-eg-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #74411a, #4d260b);
  border: 3px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, .25), 0 3px 0 rgba(42, 20, 7, .5);
  color: #fff; text-shadow: var(--ts-sm);
}

/* ================= 'index' ================= */
.col-ix-prog { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.col-ix-prog-label { font: 900 12px/1 var(--font); text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.col-ix-prog-num b { font: 900 30px/1 var(--font); color: var(--gold-1); }
.col-ix-prog-num span { font: 900 18px/1 var(--font); }
.col-ix-track { position: relative; flex: 1 1 200px; height: 40px; margin: 0 16px 0 10px; }
.col-ix-bar { position: absolute; left: 0; right: 0; top: 13px; height: 14px; border-color: var(--ink); background: rgba(0, 0, 0, .35); }
.col-ix-bar .pk-bar-fill { background: linear-gradient(180deg, #ffe27a, #f2ad14 60%, #c98a00); }
.col-ix-mile { position: absolute; top: 0; width: 32px; height: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.col-ix-mile-gem { width: 30px; height: 30px; object-fit: contain; filter: grayscale(1) brightness(.75) drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.col-ix-mile-n { font: 900 11px/1 var(--font); margin-top: -2px; }
.col-ix-mile.is-ready .col-ix-mile-gem { filter: drop-shadow(0 0 6px #e0c3ff); animation: badge-bob 1s ease-in-out infinite; }
.col-ix-mile.is-done .col-ix-mile-gem { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); opacity: .9; }
.col-ix-reward { display: flex; align-items: center; gap: 8px; }
.col-ix-reward-text { font: 900 14px/1.15 var(--font); max-width: 160px; }
.col-ix-reward-text.is-complete { color: var(--gold-1); }

.col-ix-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; }
.col-ix-list { flex: 1.6 1 0; display: flex; flex-direction: column; gap: 8px; padding: 2px 6px 4px 2px; }
.col-ix-row {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border-radius: 14px; border: 3px solid #7a4a1c;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 34%, #fff8e6), #fff8e6 62%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #7a4a1c;
}
.col-ix-sp { display: flex; align-items: center; gap: 6px; width: 184px; flex: 0 0 auto; min-width: 0; }
.col-ix-sp-art { width: 66px; height: 66px; }
.col-ix-sp-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.col-ix-sp-name { font: 900 16px/1.05 var(--font); color: var(--parch-ink); }
.col-ix-sp-lair { display: flex; align-items: center; gap: 3px; font: 800 11.5px/1.15 var(--font); color: rgba(74, 42, 16, .8); }
.col-ix-sp-lair.is-locked { color: #a0522d; }
.col-ix-lock { width: 14px; height: 14px; object-fit: contain; }
.col-ix-sp-count { font: 900 13px/1 var(--font); color: rgba(74, 42, 16, .85); }
.col-ix-sp-count.is-full { color: #23720f; }
.col-ix-vars { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.col-ix-tile {
  position: relative; aspect-ratio: 1 / 1.05; min-width: 0; max-height: 110px; padding: 2px 2px 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 3px solid color-mix(in srgb, var(--vc) 55%, #7a4a1c);
  background: radial-gradient(circle at 50% 38%, #ffffff, #f3e2bb 75%);
  box-shadow: 0 3px 0 rgba(42, 20, 7, .45);
  cursor: pointer; transition: transform .1s ease;
}
.col-ix-tile .pk-art { width: 86%; height: 86%; }
.col-ix-tile:active { transform: translateY(2px); }
.col-ix-tile.is-found.pk-v1 { background: radial-gradient(circle at 50% 38%, #fffbe0, #ffd85a 90%); box-shadow: 0 0 10px var(--vglow), 0 3px 0 rgba(42, 20, 7, .45); }
.col-ix-tile.is-found.pk-v2 { background: radial-gradient(circle at 50% 38%, #f0fdff, #9feeff 90%); box-shadow: 0 0 10px var(--vglow), 0 3px 0 rgba(42, 20, 7, .45); }
.col-ix-tile.is-found.pk-v3 { background: radial-gradient(circle at 50% 38%, #fff, rgba(255, 255, 255, .6) 45%, transparent 70%), linear-gradient(135deg, #ff9a9a, #ffe08a, #a8f5a0, #9ad8ff, #d9a8ff); box-shadow: 0 0 10px var(--vglow), 0 3px 0 rgba(42, 20, 7, .45); }
.col-ix-tile.is-found.pk-v4 { background: radial-gradient(circle at 25% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 75%, #fff 0 1px, transparent 2px), radial-gradient(circle at 50% 45%, #5a3fc0, #160c3a 80%); box-shadow: 0 0 12px var(--vglow), 0 3px 0 rgba(42, 20, 7, .45); }
.col-ix-tile.is-unknown { background: radial-gradient(circle at 50% 40%, #77634b, #3d2d1c 80%); border-color: #3d2d1c; }
.col-ix-tile.is-sel { outline: 3px solid var(--gold-2); outline-offset: 1px; transform: translateY(-2px); }
.col-ix-tile-q { position: absolute; top: 32%; left: 0; right: 0; text-align: center; font: 900 26px/1 var(--font); color: #fff7df; text-shadow: var(--ts); pointer-events: none; }
.col-ix-tile-count { position: absolute; top: 3px; right: 3px; padding: 1px 5px; border-radius: 8px; background: #fff6dc; border: 2px solid var(--ink); font: 900 11px/1.1 var(--font); color: var(--parch-ink); }
.col-ix-tile-name { position: absolute; left: 0; right: 0; bottom: 1px; padding: 0 1px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 900 9.5px/1.2 var(--font); letter-spacing: -.02em; color: #fff; text-shadow: var(--ts-sm); }
.col-ix-new { position: absolute; top: -8px; left: -6px; z-index: 2; padding: 1px 5px; border-radius: 7px; background: linear-gradient(#ff6a55, #e5271a); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--ink); font: 900 10px/1.2 var(--font); color: #fff; animation: badge-bob 1.4s ease-in-out infinite; }

.col-ix-detail {
  flex: 1 1 0; min-width: 270px; max-width: 380px;
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  border-radius: 16px; border: 3px solid #7a4a1c;
  background: linear-gradient(#fffaf0, #f3dfb0);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #7a4a1c;
  scrollbar-width: thin;
}
.col-ix-back { display: none !important; align-self: flex-start; }
.col-ix-stage {
  position: relative; flex: 0 0 auto; height: 150px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--vc) 45%, #fff6dc), color-mix(in srgb, var(--sc) 55%, #2a1407) 85%);
}
.col-ix-stage.pk-v4 { background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 80% 25%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 65% 80%, #fff 0 1px, transparent 2px), radial-gradient(circle at 50% 55%, #6a4ad8, #12082e 80%); }
.col-ix-stage.is-unknown { background: radial-gradient(circle at 50% 60%, #6b5a45, #2a1d10 85%); }
.col-ix-stage.is-unknown .pk-rays { display: none; }
.col-ix-stage-art { position: relative; z-index: 1; width: 140px; height: 140px; animation: pk-float 3s ease-in-out infinite; }
@keyframes pk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.col-ix-stage-q { position: absolute; z-index: 2; font: 900 56px/1 var(--font); color: #fff7df; text-shadow: var(--ts-lg); }
.col-ix-d-name { font: 900 20px/1.1 var(--font); }
.col-ix-d-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.col-ix-d-desc { margin: 0; font: 700 14px/1.35 var(--font); color: rgba(74, 42, 16, .9); }
.col-ix-d-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.col-ix-d-stat { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 10px; background: rgba(122, 74, 28, .1); border: 2px solid rgba(122, 74, 28, .35); }
.col-ix-d-stat-l { font: 800 11px/1.1 var(--font); text-transform: uppercase; letter-spacing: .03em; color: rgba(74, 42, 16, .7); }
.col-ix-d-stat-v { font: 900 16px/1.15 var(--font); }
.col-ix-d-stat.is-income .col-ix-d-stat-v { color: #23720f; }
.col-ix-d-stat .pk-chip { align-self: flex-start; }
.col-ix-d-vars { display: flex; flex-direction: column; gap: 3px; }
.col-ix-d-vars-title { font: 900 13px/1.2 var(--font); margin-bottom: 2px; }
.col-ix-d-var {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 6px; align-items: center;
  padding: 4px 6px; border-radius: 8px; border: 2px solid transparent; background: rgba(255, 255, 255, .55);
  font: 800 12.5px/1.15 var(--font); color: var(--parch-ink); text-align: left; cursor: pointer;
}
.col-ix-d-var.is-sel { border-color: color-mix(in srgb, var(--vc) 70%, #7a4a1c); background: #fff; }
.col-ix-d-var.is-unknown { opacity: .62; }
.col-ix-d-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vc); border: 2px solid var(--ink); }
.col-ix-d-dot.pk-v3 { background: conic-gradient(#ff5a5a, #ffd84d, #66e07a, #5cc1ff, #b48bff, #ff5a5a); }
.col-ix-d-var-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-ix-d-var-mult { font-weight: 900; color: #7b3fd0; }
.col-ix-d-var-inc { font-weight: 900; color: #23720f; }
.col-ix-d-var-time { grid-column: 2 / -1; font-size: 11px; opacity: .72; margin-top: -2px; }
.col-ix-d-lair { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 35%, #fff6dc), #fff6dc); border: 2px solid rgba(122, 74, 28, .45); }
.col-ix-d-lair-art { width: 56px; height: 56px; }
.col-ix-d-lair-name { font: 900 15px/1.15 var(--font); }
.col-ix-d-lair-sub { font: 800 12px/1.25 var(--font); color: rgba(74, 42, 16, .85); }
.col-ix-d-lair-lock { font: 900 12px/1.25 var(--font); color: #b03a1e; }

@container (max-width: 820px) {
  .col-ix-detail { position: absolute; inset: 0; z-index: 8; max-width: none; min-width: 0; display: none; }
  .col-ix.has-detail .col-ix-detail { display: flex; animation: pop-in .22s ease both; }
  .col-ix-back { display: inline-flex !important; }
  .col-ix-stage { height: 130px; }
}
@container (max-width: 820px) and (min-width: 600px) {
  .col-ix.has-detail .col-ix-detail { display: grid; grid-template-columns: minmax(190px, 36%) minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; column-gap: 12px; row-gap: 6px; }
  .col-ix-detail > * { grid-column: 2; }
  .col-ix-detail > .col-ix-back { grid-column: 1; grid-row: 1; }
  .col-ix-detail > .col-ix-stage { grid-column: 1; grid-row: 2 / span 6; align-self: start; height: 150px; }
}
@container (max-width: 560px) {
  .col-ix-row { flex-direction: column; align-items: stretch; }
  .col-ix-tile { padding: 2px; }
  .col-ix-tile .pk-art { width: 96%; height: 96%; }
  .col-ix-tile-name { display: none; }
  .col-ix-tile-count { top: auto; bottom: 2px; right: 2px; font-size: 10px; padding: 0 3px; }
  .col-ix-tile-q { top: 28%; font-size: 22px; }
  .col-ix-sp { width: auto; }
  .col-ix-sp-art { width: 48px; height: 48px; }
  .col-ix-sp-info { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .col-ix-sp-name { font-size: 15px; }
  .col-ix-track { order: 3; flex-basis: 100%; margin: 0 14px; height: 38px; }
  .col-ix-reward { margin-left: auto; }
  .col-ix-tile-name { font-size: 9px; }
}

/* ================= 'dragons' ================= */
.col-dr-team { display: flex; align-items: center; gap: 8px; }
.col-dr-team-label { display: flex; flex-direction: column; align-items: center; font: 900 12px/1 var(--font); text-transform: uppercase; }
.col-dr-team-label b { font: 900 22px/1.05 var(--font); color: var(--gold-1); }
.col-dr-slots { display: flex; gap: 5px; }
.col-dr-slot {
  width: 50px; height: 50px; padding: 2px; flex: 0 0 auto;
  border-radius: 50%; border: 3px solid var(--rc, #6b4a2a);
  background: radial-gradient(circle at 50% 35%, #fffbe9, #e9d3a0);
  box-shadow: 0 2px 0 var(--ink); cursor: pointer;
}
.col-dr-slot .pk-art { width: 100%; height: 100%; }
.col-dr-slot:disabled { cursor: default; background: rgba(255, 255, 255, .1); border: 2px dashed rgba(255, 246, 220, .5); box-shadow: none; }
.col-dr-slot-plus { font: 900 22px/1 var(--font); color: rgba(255, 246, 220, .55); text-shadow: none; }
.col-dr-slot.pk-v1, .col-dr-slot.pk-v2, .col-dr-slot.pk-v3, .col-dr-slot.pk-v4 { box-shadow: 0 0 8px var(--vglow), 0 2px 0 var(--ink); }
.col-dr-totals { display: flex; flex-direction: column; gap: 1px; }
.col-dr-income { display: flex; flex-direction: column; line-height: 1; }
.col-dr-income-l { font: 800 11px/1 var(--font); text-transform: uppercase; opacity: .85; }
.col-dr-income-v { font: 900 21px/1.1 var(--font); color: var(--cash); }
.col-dr-count { font: 800 12px/1.1 var(--font); opacity: .9; }
.col-dr-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-dr-x2, .col-eg-x2 {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; min-height: 40px;
  border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(#78e64a, #3fae1f);
  font: 900 15px/1 var(--font); color: #fff;
}
.col-dr-x2-ic, .col-eg-x2-ic { width: 30px; height: 30px; }
.col-eg-x2-t { display: flex; flex-direction: column; line-height: 1.05; }
.col-eg-x2-t b { font-size: 13px; }

.col-dr-list { flex: 1 1 auto; grid-auto-rows: max-content; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); align-content: start; gap: 8px; padding: 2px 6px 4px 2px; }
.col-dr-row {
  position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 10px 6px 6px; border-radius: 14px;
  border: 3px solid color-mix(in srgb, var(--rc) 55%, #7a4a1c);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 24%, #fffaf0), #fffaf0 58%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #7a4a1c;
  color: var(--parch-ink); text-align: left; cursor: pointer;
  font-family: var(--font);
}
.col-dr-row.is-sel { outline: 3px solid var(--gold-2); outline-offset: 1px; background: #fff; }
.col-dr-row.is-team::before { content: ''; position: absolute; left: -3px; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; background: var(--gold-2); }
.col-dr-thumb { position: relative; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 12px; border: 2px solid rgba(122, 74, 28, .5); background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--sc) 30%, #f3e2bb)); }
.col-dr-thumb .pk-art { width: 100%; height: 100%; }
.col-dr-row.pk-v1 .col-dr-thumb, .col-dr-row.pk-v2 .col-dr-thumb, .col-dr-row.pk-v3 .col-dr-thumb, .col-dr-row.pk-v4 .col-dr-thumb { box-shadow: 0 0 9px var(--vglow); }
.col-dr-thumb-count { position: absolute; right: -7px; bottom: -6px; padding: 1px 5px; border-radius: 8px; background: #fff6dc; border: 2px solid var(--ink); font: 900 12px/1.1 var(--font); }
.col-dr-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.col-dr-name { font: 900 15px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-dr-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.col-dr-nums { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.col-dr-inc { font: 900 15px/1.1 var(--font); color: #23720f; }
.col-dr-each { font: 800 10px/1 var(--font); opacity: .7; }
.col-dr-empty { grid-column: 1 / -1; }

.col-dr-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 14px;
  border: 3px solid color-mix(in srgb, var(--rc, #7a4a1c) 60%, #7a4a1c);
  background: linear-gradient(#fffdf6, #f6e4b8);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #7a4a1c;
}
.col-dr-bar-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; }
.col-dr-bar-art { width: 54px; height: 54px; }
.col-dr-bar-info { min-width: 0; }
.col-dr-bar-name { font: 900 17px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-dr-bar-sub { font: 800 12px/1.2 var(--font); opacity: .8; }
.col-dr-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

@container (max-width: 640px) {
  .col-dr-top { gap: 6px; padding: 6px 8px; }
  .col-dr-team { width: 100%; }
  .col-dr-slots { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .col-dr-slot { width: auto; height: auto; aspect-ratio: 1; max-width: 46px; }
  .col-dr-totals { flex-direction: row; align-items: baseline; gap: 10px; }
  .col-dr-income { flex-direction: row; align-items: baseline; gap: 6px; }
  .col-dr-acts { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 6px; }
  .col-dr-acts .pk-btn { flex: 1 1 0; min-width: 0; padding: 3px 6px 6px; font-size: 13px; white-space: normal; }
  .col-dr-acts .pk-btn-ic { width: 22px; height: 22px; }
  .col-dr-acts .pk-btn-sub { font-size: 10px; }
  .col-dr-list { grid-template-columns: 1fr; }
  .col-dr-name { white-space: normal; font-size: 14px; }
  .col-dr-bar-art { width: 40px; height: 40px; }
  .col-dr-bar-btns { width: 100%; margin: 0; }
  .col-dr-bar-btns .pk-btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
}

/* ================= 'eggs' ================= */
.col-eg-sum { display: flex; align-items: center; gap: 8px; }
.col-eg-sum-ic { width: 46px; height: 46px; object-fit: contain; }
.col-eg-sum-t { display: flex; flex-direction: column; line-height: 1.15; }
.col-eg-sum-t b { font: 900 18px/1.1 var(--font); color: var(--gold-1); }
.col-eg-sum-t span { font: 800 13px/1.2 var(--font); }
.col-eg-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.col-eg-grid { flex: 1 1 auto; grid-auto-rows: max-content; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px; padding: 2px 6px 6px 2px; }
.col-eg-slot {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 16px; border: 3px solid #7a4a1c; overflow: hidden;
  background: linear-gradient(#fffaf0, #f3e0b4);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #7a4a1c;
}
.col-eg-slot.is-focus { outline: 3px solid var(--gold-2); outline-offset: 1px; }
.col-eg-slot.is-ready { border-color: #2f8a12; box-shadow: 0 0 0 3px rgba(95, 210, 58, .35), 0 3px 0 #23720f; }
.col-eg-slot.is-egg { border-color: color-mix(in srgb, var(--rc) 60%, #7a4a1c); }
.col-eg-num { position: absolute; top: 6px; left: 7px; z-index: 4; padding: 1px 6px; border-radius: 8px; background: rgba(42, 20, 7, .72); font: 900 12px/1.25 var(--font); color: #fff; }
.col-eg-stage {
  position: relative; height: 112px; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 3px solid #7a4a1c;
  background: radial-gradient(ellipse at 50% 92%, rgba(255, 226, 122, .6), rgba(255, 226, 122, 0) 55%), linear-gradient(#a7dcff, #d8f1c0 80%);
}
.col-eg-slot.is-locked .col-eg-stage { background: linear-gradient(#8a7d6a, #b8aa90); }
.col-eg-slot.pk-v1 .col-eg-stage { background: radial-gradient(ellipse at 50% 70%, rgba(255, 216, 77, .9), rgba(255, 216, 77, 0) 60%), linear-gradient(#a7dcff, #d8f1c0 80%); }
.col-eg-slot.pk-v2 .col-eg-stage { background: radial-gradient(ellipse at 50% 70%, rgba(111, 232, 255, .9), rgba(111, 232, 255, 0) 60%), linear-gradient(#a7dcff, #d8f1c0 80%); }
.col-eg-slot.pk-v3 .col-eg-stage { background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 45%), linear-gradient(135deg, #ffb3b3, #ffe9a3, #b9f5b0, #a9dcff, #e2b9ff); }
.col-eg-slot.pk-v4 .col-eg-stage { background: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 60% 15%, #fff 0 1px, transparent 2px), radial-gradient(ellipse at 50% 75%, #7a4dff, #1a0f45 75%); }
.col-eg-nest { position: absolute; left: 50%; bottom: -26px; width: 132px; height: 132px; transform: translateX(-50%); object-fit: contain; }
.col-eg-nest.is-dim { filter: grayscale(.8) brightness(.7); }
.col-eg-slot.is-empty .col-eg-nest { filter: grayscale(.9) brightness(1.08) opacity(.55); }
.col-eg-slot.is-empty .col-eg-stage::after {   /* "put an egg here" placeholder over the baked-in egg */
  content: '+'; position: absolute; left: 50%; bottom: 30px; z-index: 2; transform: translateX(-50%);
  width: 52px; height: 64px; display: flex; align-items: center; justify-content: center;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 3px dashed rgba(74, 42, 16, .55);
  background: rgba(255, 246, 220, .82); font: 900 30px/1 var(--font); color: rgba(74, 42, 16, .6);
}
.col-eg-egg { position: relative; z-index: 2; width: 66px; height: 66px; margin-bottom: 30px; transform-origin: 50% 92%; animation: egg-wobble 2.6s ease-in-out infinite; }
@keyframes egg-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 84% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
.col-eg-baby { position: relative; z-index: 2; width: 86px; height: 86px; margin-bottom: 18px; animation: pk-float 2.2s ease-in-out infinite; }
.col-eg-rays { width: 210%; }
.col-eg-lock { position: absolute; z-index: 2; top: 22px; left: 50%; width: 54px; height: 54px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 3px 0 rgba(42, 20, 7, .5)); }
.col-eg-vtag { position: absolute; z-index: 3; top: 6px; right: 6px; }
.col-eg-new { top: 6px; left: auto; right: 6px; }
.col-eg-info { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; padding: 7px 8px 8px; }
.col-eg-name { font: 900 14px/1.15 var(--font); text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.col-eg-timer { display: flex; align-items: center; justify-content: center; gap: 4px; font: 900 18px/1 var(--font); }
.col-eg-timer-ic { width: 22px; height: 22px; }
.col-eg-ready { text-align: center; font: 900 15px/1.1 var(--font); color: #23720f; }
.col-eg-hint { text-align: center; font: 800 12px/1.25 var(--font); color: rgba(74, 42, 16, .75); }
.col-eg-info .pk-btn { width: 100%; margin-top: auto; }

@container (max-width: 860px) { .col-eg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 620px) {
  .col-eg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .col-eg-top { padding: 6px 8px; }
  .col-eg-acts { margin-left: 0; width: 100%; }
  .col-eg-acts > * { flex: 1 1 auto; }
  .col-eg-stage { height: 96px; }
  .col-eg-nest { width: 112px; height: 112px; bottom: -22px; }
  .col-eg-egg { width: 56px; height: 56px; margin-bottom: 26px; }
  .col-eg-baby { width: 72px; height: 72px; }
}

/* short landscape phones: compact headers */
@media (max-height: 520px) {
  .pk-root { gap: 6px; }
  .col-ix-head, .col-dr-top, .col-eg-top { padding: 4px 10px; gap: 6px 10px; }
  .col-ix-prog-num b { font-size: 22px; }
  .col-ix-track { height: 34px; }
  .col-ix-mile-gem { width: 24px; height: 24px; }
  .col-ix-bar { top: 10px; height: 12px; }
  .col-ix-tile { max-height: 84px; }
  .col-ix-stage { height: 104px; }
  .col-ix-stage-art { width: 100px; height: 100px; }
  .col-dr-slot { width: 36px; height: 36px; }
  .col-dr-slots { gap: 4px; }
  .col-dr-team-label span { display: none; }
  .col-dr-team-label b { font-size: 18px; }
  .col-eg-stage { height: 82px; }
  .col-eg-nest { width: 104px; height: 104px; bottom: -22px; }
  .col-eg-egg { width: 50px; height: 50px; margin-bottom: 22px; }
  .col-eg-baby { width: 62px; height: 62px; margin-bottom: 14px; }
  .col-eg-lock { width: 42px; height: 42px; top: 14px; }
  .col-eg-slot.is-empty .col-eg-stage::after { width: 40px; height: 50px; bottom: 22px; font-size: 24px; }
  .col-eg-info { padding: 5px 6px 6px; gap: 3px; }
  .col-dr-income-v { font-size: 17px; }
  .col-dr-bar { padding: 4px 8px; }
  .col-dr-totals { display: none; }
  .col-dr-acts .pk-btn { min-height: 38px; padding: 2px 8px 5px; font-size: 13px; }
  .col-dr-acts .pk-btn-ic { width: 22px; height: 22px; }
  .col-dr-acts .pk-btn:not(.pk-rw) .pk-btn-sub { display: none; }
  .col-dr-bar-who .col-dr-bar-sub { display: none; }
  .col-dr-bar-btns .pk-btn { min-height: 38px; padding: 2px 10px 5px; font-size: 14px; }
  .col-dr-bar-art { width: 40px; height: 40px; }
  .col-dr-bar-name { font-size: 15px; }
  .col-eg-sum-ic { width: 36px; height: 36px; }
  .col-eg-sum-t b { font-size: 15px; }
}

/* ---------- every aspect ratio (qa/ui-overlap.cjs): nothing truncated or squeezed, 44 px touch targets ---------- */
/* touch: every kit button / team slot / variant row is a >= 44 px target (also over the compact short-screen sizes) */
:root body.touch .pk-btn { min-height: 44px; }
:root body.touch .col-dr-slot:not(:disabled) { min-width: 44px; min-height: 44px; }
:root body.touch .col-ix-d-var { min-height: 44px; }
.col-dr-income-v { white-space: nowrap; }
.col-dr-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.col-dr-bar-name { white-space: normal; overflow-wrap: anywhere; }
.col-ix-stage-art { width: min(140px, calc(100% - 12px)); height: min(140px, calc(100% - 10px)); }
@container (max-width: 820px) { .col-ix-stage-art { width: 118px; height: 118px; } }
@media (max-height: 520px) { .col-ix-stage-art { width: 92px; height: 92px; } }
/* variant tiles: the name follows the tile width (container units) and hides on the smallest tiles */
.col-ix-tile { container-type: inline-size; }
.col-ix-tile-name { font-size: clamp(7.5px, calc((100cqw - 4px) / 7.4), 9.5px); text-overflow: clip; }
@container (max-width: 58px) { .col-ix-tile-name { display: none; } }
/* eggs: names wrap freely (no clamp), the hint stays readable */
.col-eg-name { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.col-eg-hint { font-size: 11.5px; }
@container (max-width: 620px) {
  .col-eg-name { font-size: 12.5px; }
  .col-eg-egg { width: 48px; height: 48px; margin-bottom: 28px; }
  .col-eg-vtag .pk-tag, .col-eg-vtag.pk-tag { font-size: 9px; padding: 0 4px 1px; }
}
.col-ix-new { top: -7px; left: 3px; }
@container (max-width: 640px) {
  /* dragons: the numbers go under the name so a long name has the full row */
  .col-dr-row { flex-wrap: wrap; row-gap: 4px; }
  .col-dr-info { flex-basis: calc(100% - 67px); }
  .col-dr-nums { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
  .col-dr-name { overflow-wrap: anywhere; }
}
@container (max-width: 420px) {
  .col-dr-team { flex-wrap: wrap; }
  .col-dr-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-dr-acts { flex-wrap: wrap; }
  .col-dr-acts .pk-btn { flex: 1 1 calc(50% - 3px); }
  .col-dr-acts .col-dr-x2 { flex: 1 1 100%; justify-content: center; }
  .col-dr-acts .pk-btn-label { white-space: normal; font-size: 12.5px; line-height: 1.05; text-align: center; }
  .col-ix-row { padding: 4px; }
  .col-ix-vars { gap: 4px; }
}
/* team slots on narrow touch screens: two rows of three so every slot keeps 44 px */
@container (max-width: 330px) {
  :where(body.touch) .col-dr-slots { grid-template-columns: repeat(3, 44px); justify-content: start; }
  :where(body.touch) .col-dr-slot { max-width: none; width: 44px; height: 44px; }
}
/* the narrowest phones: one hatchery per row, so long names keep whole words per line */
@container (max-width: 300px) {
  .col-eg-grid { grid-template-columns: minmax(0, 1fr); }
}