/* Landing page styles for remimade.com — Remi's game portfolio.
   Playful, kid-friendly flamingo-pink + unicorn-rainbow theme.
   This file styles the homepage only; the game has its own css/styles.css
   inside the FlamingoPop/ folder. */

:root {
  --pink: #ff6fae;
  --pink-deep: #e0428a;
  --purple: #a86bff;
  --sky: #8fd6ff;
  --sun: #ffd166;
  --ink: #3a2b3f;
  --cream: #fff6fb;

  /* Mermaid Tail dyes its two racers, because the emoji set has neither a green
     goblin nor a purple mermaid. The card below has to dye them the same way or
     they look like different characters here than they do in the game.
     Kept identical to MermaidTail/css/styles.css — change both together. */
  --goblin-tint: hue-rotate(110deg) saturate(1.15);
  --mermaid-tint: grayscale(1) sepia(1) hue-rotate(230deg) saturate(3) brightness(0.7);
}

/* Each racer must be wrapped on its own. A filter set on a shared parent dyes
   every emoji inside it, so the 🏰 and ✨ standing next to them would go too. */
.gob-emoji,
.mer-emoji { display: inline-block; }

.gob-emoji { filter: var(--goblin-tint); }
.mer-emoji { filter: var(--mermaid-tint); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffe3f3 0%, rgba(255,227,243,0) 60%),
    radial-gradient(1000px 500px at -10% 20%, #e6e1ff 0%, rgba(230,225,255,0) 55%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  -webkit-font-smoothing: antialiased;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 72px) 20px clamp(36px, 7vw, 80px);
  background:
    linear-gradient(135deg, rgba(255,111,174,0.18), rgba(168,107,255,0.18) 50%, rgba(143,214,255,0.18));
  text-align: center;
}

.hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.hero-badge {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: 0.3em;
  margin-bottom: 0.2em;
}

.hero-title {
  margin: 0.1em 0 0.15em;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
}

.hero-title .name {
  background: linear-gradient(90deg, var(--pink-deep), var(--purple), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  margin: 0 0 1.2em;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  font-weight: 700;
  color: var(--pink-deep);
}

.hero-card {
  background: #fff;
  border: 4px solid var(--pink);
  border-radius: 26px;
  padding: clamp(18px, 4vw, 30px) clamp(20px, 5vw, 40px);
  box-shadow: 0 18px 50px rgba(224, 66, 138, 0.18);
  text-align: left;
}

.hero-card p {
  margin: 0.5em 0;
  font-size: clamp(1.02rem, 3vw, 1.22rem);
  line-height: 1.55;
}

.hero-quote {
  color: var(--purple);
  font-weight: 700;
}

/* ===================== BUTTONS ===================== */
.cta {
  display: inline-block;
  margin-top: clamp(20px, 4vw, 30px);
  padding: 0.75em 2.2em;
  font-family: inherit;
  font-size: clamp(1.1rem, 3.6vw, 1.45rem);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: var(--pink);
  border-radius: 999px;
  box-shadow: 0 7px 0 var(--pink-deep);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

.cta:hover { transform: translateY(-2px); }
.cta:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--pink-deep);
}

/* ===================== PAGE SECTIONS ===================== */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 20px;
}

.section { margin-bottom: clamp(40px, 8vw, 72px); }

.section-title {
  margin: 0 0 0.2em;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 800;
  color: var(--pink-deep);
  text-align: center;
}

.section-lead {
  margin: 0 0 1.4em;
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--ink);
}

/* ===================== GAMES GRID ===================== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 26px);
}

.game-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid #ffd0e6;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(58, 43, 63, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

a.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
  box-shadow: 0 18px 40px rgba(224, 66, 138, 0.22);
}

.game-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.5rem, 12vw, 5rem);
  padding: clamp(20px, 5vw, 34px);
  background: linear-gradient(135deg, #ffe3f3, #e9e1ff);
}

.game-info { padding: clamp(16px, 3vw, 22px); }

.game-name {
  margin: 0 0 0.3em;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 800;
  color: var(--pink-deep);
}

.game-desc {
  margin: 0 0 0.9em;
  font-size: clamp(0.98rem, 2.8vw, 1.08rem);
  line-height: 1.5;
}

.game-play {
  font-weight: 800;
  color: var(--purple);
}

/* "Coming soon" placeholder card is calmer and non-clickable. */
.game-card--soon {
  border-style: dashed;
  border-color: #d9d2e6;
  opacity: 0.85;
}
.game-card--soon .game-thumb {
  background: linear-gradient(135deg, #f1ecff, #eaf6ff);
}
.game-card--soon .game-name { color: var(--purple); }
.game-play--soon { color: #9a8fb0; }

/* ===================== "HOW IT'S MADE" NOTE ===================== */
.note-card {
  background: linear-gradient(160deg, #fffdf6, #fff3fa);
  border: 3px solid var(--sun);
  border-radius: 22px;
  padding: clamp(20px, 4vw, 32px) clamp(22px, 5vw, 40px);
  box-shadow: 0 10px 30px rgba(58, 43, 63, 0.08);
}

.note-card p {
  margin: 0.6em 0;
  font-size: clamp(1rem, 2.9vw, 1.15rem);
  line-height: 1.6;
}

/* ===================== FOOTER ===================== */
.footer {
  text-align: center;
  padding: clamp(28px, 5vw, 44px) 20px;
  background: linear-gradient(0deg, rgba(255,111,174,0.12), transparent);
  color: var(--ink);
}

.footer p { margin: 0.2em 0; }
.footer-emoji { font-size: 1.2rem; }
.footer-site {
  font-weight: 800;
  color: var(--pink-deep);
  letter-spacing: 0.02em;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .game-card { transition: none; }
}