/* ============================================
   RETROCAT HQ — Landing / Vibe Selector
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0A0010; margin: 0; padding: 0; }

.checker {
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #FF2D9B 0, #FF2D9B 10px,
    #FFE000 10px, #FFE000 20px,
    #00E5CC 20px, #00E5CC 30px,
    #FF7B00 30px, #FF7B00 40px
  );
}
.checker-top { border-bottom: 2px solid #333; }
.checker-bot { border-top: 2px solid #333; }

.landing {
  width: 100%;
  min-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.landing-bg { position: absolute; inset: 0; z-index: 0; }

.bg-left  { position: absolute; top: 0; left: 0;  width: 50%; height: 100%; background: #1A0E00; }
.bg-right { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #0A0010; }

.bg-left-pattern {
  position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  background-image:
    linear-gradient(rgba(201,168,76,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-right-pattern {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background-image:
    linear-gradient(rgba(0,229,204,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,204,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.divider {
  position: absolute; top: 0; left: 50%;
  width: 2px; height: 100%;
  background: #444; z-index: 2;
}
.divider-or {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background: #1A1A2E;
  border: 3px solid #555;
  border-radius: 50%;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Boogaloo', cursive;
  font-size: 16px; font-weight: 700;
  color: #aaa; letter-spacing: 1px;
}

.scanlines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px
  );
}

.inner {
  position: relative; z-index: 10;
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}

.top-badge {
  font-family: 'Boogaloo', cursive;
  font-size: 12px; letter-spacing: 3px;
  color: #666; text-align: center;
}

.cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.vcard {
  padding: 2.5rem 2rem;
  cursor: pointer;
  transition: transform 0.2s;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 1.1rem;
}
.vcard:hover { transform: scale(1.02); }
.vcard:hover .pick-btn { opacity: 1; transform: translateY(0); }

.vcard-med {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,168,76,0.2);
  border-right: none;
}
.vcard-ret {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,45,155,0.2);
  border-left: none;
}

.med-emblem {
  width: 90px; height: 90px; border-radius: 50%;
  border: 2px solid #C9A84C;
  background: #1A0E00;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}
.ret-emblem {
  width: 90px; height: 90px;
  border: 3px solid #FF2D9B;
  background: #0A0010;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}

.vcard-title-med {
  font-family: 'Cinzel', serif;
  font-size: 24px; font-weight: 900; letter-spacing: 3px;
  color: #F5DEB3; line-height: 1.1;
}
.vcard-title-ret {
  font-family: 'Bangers', cursive;
  font-size: 34px; letter-spacing: 3px;
  color: #FFE000;
  -webkit-text-stroke: 1px #FF7B00;
  line-height: 1;
}

.vcard-sub-med {
  font-family: 'Crimson Text', serif;
  font-style: italic; font-size: 15px;
  color: #A0785A; line-height: 1.6;
  max-width: 230px;
}
.vcard-sub-ret {
  font-family: 'Boogaloo', cursive;
  font-size: 14px; letter-spacing: 1px;
  color: rgba(0,229,204,0.85); line-height: 1.6;
  max-width: 230px;
}

.tags-med { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tag-med {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  padding: 3px 10px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  color: #C9A84C;
}

.tags-ret { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tag-ret {
  font-family: 'Black Ops One', cursive; font-size: 10px; letter-spacing: 1px;
  padding: 3px 10px;
  background: rgba(255,45,155,0.1);
  border: 1px solid rgba(255,45,155,0.35);
  color: #FF2D9B;
}

.pick-btn {
  font-size: 13px; letter-spacing: 2px;
  padding: 11px 26px; cursor: pointer; border: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  opacity: 0.75; transform: translateY(5px);
}
.pick-btn-med {
  font-family: 'Cinzel', serif; font-weight: 600;
  background: #3D1C00; color: #F5DEB3;
  border: 1px solid #C9A84C;
}
.pick-btn-med:hover { background: #5C2D00; }
.pick-btn-ret {
  font-family: 'Black Ops One', cursive;
  background: #0A0010; color: #FFE000;
  border: 2px solid #FF2D9B;
}
.pick-btn-ret:hover { background: #1A0033; }

.bottom-label {
  font-family: 'Boogaloo', cursive;
  font-size: 12px; letter-spacing: 2px;
  color: #555; text-align: center;
}

/* PASSWORD GATE */
.pw-gate {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  width: 100%; max-width: 380px;
  text-align: center;
}

.pw-icon { font-size: 56px; line-height: 1; }

.pw-title-med {
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 600; letter-spacing: 2px;
  color: #F5DEB3;
}
.pw-title-ret {
  font-family: 'Bangers', cursive;
  font-size: 30px; letter-spacing: 2px;
  color: #FFE000; -webkit-text-stroke: 0.5px #FF7B00;
}

.pw-sub-med {
  font-family: 'Crimson Text', serif;
  font-style: italic; font-size: 15px; color: #A0785A;
}
.pw-sub-ret {
  font-family: 'Boogaloo', cursive;
  font-size: 14px; letter-spacing: 1px;
  color: rgba(0,229,204,0.75);
}

.pw-input {
  width: 100%; padding: 12px 16px;
  font-size: 16px; text-align: center; letter-spacing: 4px;
  outline: none;
  background: rgba(255,255,255,0.05);
  color: #fff;
  transition: border-color 0.2s;
}
.pw-input-med {
  border: 1px solid #C9A84C;
  font-family: 'Cinzel', serif;
}
.pw-input-med:focus { border-color: #F5DEB3; }
.pw-input-ret {
  border: 2px solid #FF2D9B;
  font-family: 'Black Ops One', cursive;
}
.pw-input-ret:focus { border-color: #FFE000; }

.pw-err {
  font-size: 14px; min-height: 20px; font-style: italic;
}
.pw-err-med { font-family: 'Crimson Text', serif; color: #F09595; }
.pw-err-ret { font-family: 'Boogaloo', cursive; color: #FF2D9B; letter-spacing: 1px; }

.pw-btn {
  width: 100%; padding: 13px;
  font-size: 13px; letter-spacing: 2px;
  cursor: pointer; border: none;
  transition: background 0.15s;
}
.pw-btn-med {
  font-family: 'Cinzel', serif; font-weight: 600;
  background: #3D1C00; color: #F5DEB3;
  border: 1px solid #C9A84C;
}
.pw-btn-med:hover { background: #5C2D00; }
.pw-btn-ret {
  font-family: 'Black Ops One', cursive;
  background: #0A0010; color: #FFE000;
  border: 2px solid #FF2D9B;
}
.pw-btn-ret:hover { background: #1A0033; }

.back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; letter-spacing: 2px;
  color: #555; text-decoration: underline;
  font-family: 'Boogaloo', cursive;
}
.back-btn:hover { color: #888; }

@media (max-width: 560px) {
  .cards-row { grid-template-columns: 1fr; }
  .vcard-med { border-right: 1px solid rgba(201,168,76,0.2); border-bottom: none; }
  .vcard-ret { border-left: 1px solid rgba(255,45,155,0.2); border-top: none; }
  .divider { display: none; }
  .divider-or { top: auto; bottom: 50%; }
}