/* =========================================================================
   spawn.css  —  გაჩენის ადგილის არჩევა (CEF.SPAWN = 36 / page-spawn)
   -------------------------------------------------------------------------
   პროექტის ფერები: წითელი #ff4747 · ღია #eaeaea · მუქი შავი.
   ყველა სელექტორი დასკოპულია #page-spawn-ზე, კლასები იწყება sp- პრეფიქსით.
   ========================================================================= */

#page-spawn {
  --red: #ff4747;
  --red-dark: #d93030;
  --light: #eaeaea;
  --muted: #eaeaea8c;
  --black: #0a0a0a;
  --panel: #eaeaea0a;
  --line: #eaeaea1f;
  --radius: 14px;
  --font-head: "Rajdhani", "Noto Sans Georgian", "Segoe UI", Arial, sans-serif;
  --font-body: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;

  font-family: var(--font-body);
  color: var(--light);
  background: var(--black);
  backdrop-filter: none;
  overflow: hidden;
}
#page-spawn * { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- ფონი ---------- */
#page-spawn .sp-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, #ff474729, transparent 70%),
    radial-gradient(40% 40% at 12% 90%, #ff474714, transparent 70%),
    radial-gradient(40% 40% at 90% 85%, #eaeaea0a, transparent 70%),
    linear-gradient(180deg, #0d0d10 0%, #060607 100%);
}
#page-spawn .sp-grid {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(#eaeaea08 1px, transparent 1px),
    linear-gradient(90deg, #eaeaea08 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
#page-spawn .sp-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%);
}

/* ---------- კონტეინერი ---------- */
#page-spawn .sp-wrap {
  position: relative; z-index: 2;
  width: min(1180px, 94vw);
  display: flex; flex-direction: column; align-items: center;
}

#page-spawn .sp-head { text-align: center; margin-bottom: clamp(22px, 4.5vh, 44px); }
#page-spawn .sp-brand {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(26px, 3.2vh, 34px); letter-spacing: .1em; line-height: 1;
  margin-bottom: 18px;
}
#page-spawn .sp-brand span { color: var(--red); text-shadow: 0 0 22px #ff474788; }
#page-spawn .sp-title {
  font-size: clamp(22px, 3.4vh, 30px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
#page-spawn .sp-title span { color: var(--red); }
#page-spawn .sp-sub { color: var(--muted); font-size: 13px; margin-top: 8px; }
#page-spawn .sp-name { color: var(--light); font-weight: 700; }

/* ---------- ბარათები ---------- */
#page-spawn .sp-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
@media (max-width: 1000px) { #page-spawn .sp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #page-spawn .sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#page-spawn .sp-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 26px 14px 20px;
  min-height: clamp(210px, 30vh, 270px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--light);
  font: inherit;
  cursor: pointer;
  transition: transform .18s, border-color .2s, box-shadow .25s, background .2s;
  opacity: 0; transform: translateY(14px);
}
#page-spawn.visible .sp-card { animation: spIn .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes spIn { to { opacity: 1; transform: none; } }

#page-spawn .sp-card::before {            /* წითელი ნათება ბარათის ზემოთ */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, #ff474733, transparent 70%);
  opacity: 0; transition: opacity .25s;
}
#page-spawn .sp-card:hover:not(.off) { border-color: #ff474799; transform: translateY(-4px); }
#page-spawn .sp-card:hover:not(.off)::before { opacity: 1; }

#page-spawn .sp-card.sel {
  border-color: var(--red);
  background: #ff47470f;
  box-shadow: 0 0 0 3px #ff474726, 0 14px 38px #ff474740;
  transform: translateY(-4px);
}
#page-spawn .sp-card.sel::before { opacity: 1; }

#page-spawn .sp-key {
  position: absolute; top: 12px; left: 12px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  font: 700 11px/1 var(--font-head); letter-spacing: .04em; color: var(--muted);
}
#page-spawn .sp-card.sel .sp-key { background: var(--red); border-color: var(--red); color: #fff; }

#page-spawn .sp-check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  transform: scale(0); transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
#page-spawn .sp-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#page-spawn .sp-card.sel .sp-check { transform: scale(1); }

#page-spawn .sp-ic {
  width: 74px; height: 74px; margin-top: 8px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1px solid var(--line);
  color: var(--light);
  transition: color .2s, border-color .2s, box-shadow .25s;
}
#page-spawn .sp-ic svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#page-spawn .sp-card:hover:not(.off) .sp-ic,
#page-spawn .sp-card.sel .sp-ic { color: var(--red); border-color: #ff474799; box-shadow: 0 0 26px #ff474740; }

#page-spawn .sp-t {
  font-family: var(--font-head); font-weight: 700;
  font-size: 22px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1;
}
#page-spawn .sp-d { color: var(--muted); font-size: 11.5px; line-height: 1.5; max-width: 190px; }

#page-spawn .sp-tag {
  margin-top: auto;
  padding: 4px 10px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #eaeaea12; color: var(--muted);
}
#page-spawn .sp-card.sel .sp-tag { background: #ff474726; color: var(--red); }

/* მიუწვდომელი */
#page-spawn .sp-card.off { cursor: not-allowed; }
#page-spawn .sp-card.off .sp-ic,
#page-spawn .sp-card.off .sp-t,
#page-spawn .sp-card.off .sp-d { opacity: .35; }
#page-spawn .sp-card.off .sp-tag { background: #ff47471a; color: var(--red); }
#page-spawn .sp-card.off.shake { animation: spShake .35s; }
@keyframes spShake { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }

/* ---------- ქვედა ზოლი ---------- */
#page-spawn .sp-foot {
  margin-top: clamp(22px, 4vh, 38px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#page-spawn .sp-go {
  min-width: 300px; height: 54px; padding: 0 36px;
  border: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: #fff;
  font: 800 14px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px #ff474759;
  transition: transform .15s, box-shadow .2s, filter .2s, opacity .2s;
}
#page-spawn .sp-go:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 12px 36px #ff474780; }
#page-spawn .sp-go:active:not(:disabled) { transform: translateY(1px); }
#page-spawn .sp-go:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }

#page-spawn .sp-hint { color: var(--muted); font-size: 11.5px; }
#page-spawn .sp-hint kbd {
  display: inline-block; min-width: 20px; padding: 2px 6px; margin: 0 2px;
  border: 1px solid var(--line); border-radius: 5px;
  font: 700 10.5px/1.2 var(--font-head); color: var(--light); text-align: center;
}

/* არჩევის შემდეგ */
#page-spawn.done .sp-card:not(.sel) { opacity: .25 !important; filter: grayscale(1); pointer-events: none; }
#page-spawn.done .sp-go { pointer-events: none; }

#page-spawn :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #page-spawn *, #page-spawn .sp-card { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}