/* Eggly egg shop (egg-shop.js): gacha cards in a swipe row, the hatch reveal. Phone first (280 px up). */
.gacha { margin: 20px 0 0; }
.gc-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 2px 10px; }
.gc-h h2 { margin: 0; font: 400 clamp(22px, 7vw, 26px)/1 'Lilita One', sans-serif; letter-spacing: .02em; color: var(--gold, #ffc23a);
  text-shadow: 2px 0 #120a24, -2px 0 #120a24, 0 2px #120a24, 0 -2px #120a24, 1.5px 1.5px #120a24, -1.5px 1.5px #120a24, 0 4px 0 #120a24, 0 0 18px rgba(255, 150, 40, .4); }
.gc-h small { color: var(--muted, #c2b6e6); font-size: 12px; }
/* phone: one compact card per row (egg · name · best · odds toggle, then 4 buy buttons); 700 px up: a 3-column grid */
.gc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gacha { container-type: inline-size; }
@container (min-width: 440px) {
  .gc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gc-info { align-items: center; }
  .gc-best { font-size: 12px; }
  .gc-egg { width: 100%; height: 104px; }
}
@container (min-width: 620px) { .gc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; overflow: hidden; min-width: 0;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gc1) 50%, #1a0e3a), color-mix(in srgb, var(--gc2) 55%, #0f0826) 80%);
  border: 3px solid #120a24; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 70%, rgba(255, 210, 110, .55)), 0 5px 0 #120a24, 0 0 22px color-mix(in srgb, var(--rc) 30%, transparent); }
.gc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background: repeating-linear-gradient(0deg, transparent 0 15px, #000 15px 17px), repeating-linear-gradient(90deg, transparent 0 31px, #000 31px 33px); }
.gc-top { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.gc-egg { position: relative; width: 76px; height: 84px; }
.gc-egg canvas { position: absolute; inset: 0; width: 100%; height: 100%; animation: gcBreath 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.gc-halo { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 70%, transparent), transparent); animation: gcHalo 2.6s ease-in-out infinite; }
@keyframes gcBreath { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.05) rotate(2deg); } }
@keyframes gcHalo { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
.gc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gc h3 { margin: 0; font: 400 clamp(19px, 6vw, 22px)/1 'Lilita One', sans-serif; letter-spacing: .02em; color: #fff; white-space: nowrap;
  text-shadow: 2px 0 #120a24, -2px 0 #120a24, 0 2px #120a24, 0 -2px #120a24, 0 3px 0 #120a24, 0 0 14px color-mix(in srgb, var(--rc) 70%, transparent); }
.gc-best { margin: 0; font-size: clamp(11px, 3.5vw, 13px); font-weight: 600; color: #e8e2ff; white-space: nowrap; }
.gc-best b { font-weight: 700; }
.gc-best small { color: #bdb5ea; font-weight: 600; }
.gc-ot { min-height: 28px; padding: 3px 12px; border-radius: 999px; border: 2px solid #120a24; background: rgba(10, 4, 26, .6); color: #ffcf3a;
  font: 400 12px/1 'Lilita One', sans-serif; letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgba(255, 210, 110, .35); }
.gc-odds { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gc-odds li { display: inline-flex; gap: 4px; align-items: baseline; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: rgba(8, 5, 22, .65);
  border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent); white-space: nowrap; }
.gc-odds b { color: var(--rc); font-weight: 700; }
.gc-odds span { color: #fff; font-weight: 600; }
.gc-buy { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.gc-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 48px; padding: 5px 2px; border: 2.5px solid #120a24; border-radius: 13px; color: #fff;
  background: linear-gradient(180deg, #4a2f8a, #2a1856); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .35), inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 #120a24; }
.gc-b:nth-child(n+3) { color: #2a1400; border-color: #5a2c00; background: linear-gradient(180deg, #fff1a8, #ffcf3a 45%, #f59a12); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #8a4300; }
.gc-b b { font: 400 clamp(14px, 4.4vw, 17px)/1 'Lilita One', sans-serif; letter-spacing: .03em; }
.gc-b small { display: inline-flex; align-items: center; gap: 2px; font-size: clamp(9.5px, 3vw, 11px); font-weight: 700; white-space: nowrap; }
.gc-b small .ic { width: 11px; height: 11px; }
.gc-b:active { transform: translateY(2px); box-shadow: 0 1px 0 #120a24; }
.gc-b.poor { filter: saturate(.35) brightness(.8); }
.gc-b:disabled { opacity: .6; }

.hatch { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.hatch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hatch-ui { position: relative; width: min(100%, 420px); padding: 0 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hatch-rar { margin: 0; font: 400 clamp(34px, 11vw, 52px)/1 'Lilita One', sans-serif; color: var(--rc); letter-spacing: .03em;
  text-shadow: 3px 0 #120a24, -3px 0 #120a24, 0 3px #120a24, 0 -3px #120a24, 2px 2px #120a24, -2px -2px #120a24, 0 5px 0 #120a24, 0 0 24px var(--rc); }
.hatch-name { margin: 0; font: 600 18px/1.3 Fredoka, sans-serif; color: #fff; }
.hatch-name small { color: #bdb5ea; font-weight: 600; }
.hatch-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 30vh; overflow: auto; margin: 4px 0; padding: 0; list-style: none; }
.hatch-list li { display: flex; flex-direction: column; padding: 5px 10px; border-radius: 12px; background: rgba(20, 12, 44, .85); border: 1.5px solid var(--rc); font-size: 13px; }
.hatch-list b { color: var(--rc); }
.hatch-list small { color: #cfc6ff; font-size: 11px; }
.hatch-ok { margin-top: 6px; width: min(100%, 300px); padding: 13px 18px; border: 0; border-radius: 16px; font: 400 22px/1 'Lilita One', sans-serif; letter-spacing: .04em; color: #2a1400;
  background: linear-gradient(180deg, #fff1a8, #ffcf3a 40%, #f59a12); box-shadow: 0 0 0 2px #5a2c00, 0 5px 0 #8a4300; }
@media (prefers-reduced-motion: reduce) { .gc-egg canvas, .gc-halo { animation: none; } }