:root {
  --bg: #f5f2e9;
  --panel: #fffdf7;
  --line: #d4ccb6;
  --ink: #182019;
  --muted: #5e655f;
  --frog: #1f6e46;
  --flappy: #2e72b8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 0%, rgba(45, 143, 109, 0.1), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(46, 114, 184, 0.12), transparent 40%),
    var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
  min-height: 100dvh;
  padding: 20px;
}

.home-layout {
  max-width: 1200px;
  margin: 0 auto;
}

.home-header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
}

.home-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.apps-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.app-card {
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(24, 32, 25, 0.14);
}

.app-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.frog-image {
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.35), transparent 42%),
    linear-gradient(180deg, #6eb8df 0%, #3f8fc2 62%, #2e6f9d 100%);
  font-size: clamp(4rem, 12vw, 8rem);
}

.flappy-image {
  background:
    linear-gradient(180deg, rgba(138, 208, 248, 0.9) 0%, rgba(138, 208, 248, 0.65) 100%),
    var(--flappy);
}

.flappy-icon {
  width: 16px;
  height: 16px;
  transform: scale(6);
  transform-origin: center;
  background-image: url("/flappy/Flappy%20Bird%20Assets/Player/StyleBird1/Bird1-1.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 16px;
  image-rendering: pixelated;
}

.app-meta {
  padding: 14px;
}

.app-meta h2 {
  margin: 0;
  font-size: 1.3rem;
}

.app-meta p {
  margin: 6px 0 0;
  color: var(--muted);
}

@media (max-width: 860px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }
}