body {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  background: #fdf6ec (""); /* warm beige */
  background-size: 32px 32px;
  color: #2d1e16;
  padding: 20px;
}

body {
  background: #d89162 url() repeat;
  image-rendering: pixelated;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: auto;
}

.card {
  background: #fffaf3; /* soft cream */
  border: 3px solid #4a3b2e; /* warm brown border */
  padding: 12px;
  box-shadow: 4px 4px 0 #2d1e16;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.card h3 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #6c5f53;
  text-decoration: underline;
  transition: transform 0.2s ease;
}

.title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px;
  background: #d4b07d; /* cozy orange highlight */
}

.intro {
  grid-column: 1 / -1;
  text-align: center;
  background: #80966a; /* soft green */
}

ul {
  list-style: square;
  margin: 0;
  padding-left: 20px;
}

/* Character Sprite */
.character {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.character img {
  image-rendering: pixelated;
  width: 200px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #d4a373); /* warm orange glow */
  transform: translateX(50px); /* move image right */
}
.character {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end; /* push to right */
  margin: 20px 0;
  padding-right: 40px;       /* adjust spacing from edge */
}

/* ✦ Animations ✦ */
.float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.blink::after {
  content: "_";
  animation: blinkCursor 1s step-end infinite;
  color: #d17842; /* warm orange cursor */
}
@keyframes blinkCursor {
  50% { opacity: 0; }
}

.card:hover {
  animation: shake 0.25s linear;
}
@keyframes shake {
  0% { transform: translate(1px, 1px); }
  25% { transform: translate(-1px, -1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Glow title */
.glow {
  border-color: #d17842;
  box-shadow: 0 0 6px #d17842, 0 0 12px #d17842 inset;
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 6px #d17842, 0 0 12px #d17842 inset; }
  50% { box-shadow: 0 0 12px #f2b880, 0 0 24px #f2b880 inset; }
}
/* Social Links */
.socials {
  grid-column: 1 / -1;
  text-align: center;
  margin: 10px 0 20px;
}
.btn {
  display: inline-block;
  margin: 0 8px;
  padding: 8px 14px;
  font-size: 12px;
  text-decoration: none;

  /* ✦ Change text color here ✦ */
  color: #2d1e16;          /* dark brown text instead of white */

  background: #ffdfb2;     /* soft orange */
  border: 3px solid #4a3b2e;
  box-shadow: 3px 3px 0 #2d1e16;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: #4a7856;     /* cozy green on hover */
  color: #fffaf3;          /* cream text on hover */
  transform: translateY(-2px);
}
.character {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;   /* keep her centered above header */
  position: relative;
  z-index: 2;                /* make sure she’s above */
  margin-bottom: -40px;      /* pull sprite down into the header */
}

.character img {
  width: 160px;
  image-rendering: pixelated;
}
.character {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;   /* push sprite to the right */
  position: relative;
  z-index: 2;                  /* make sure sprite is above header */
  margin-bottom: -40px;        /* overlap so she “sits” on the bar */
  padding-right: 20px;         /* small gap from edge */
}

.character img {
  width: 160px;                /* adjust size */
  image-rendering: pixelated;
}