:root {
  --sky: #e8f4fb; --meadow: #dff0d8; --ink: #23324a; --ink-soft: #4e5d75; --card: #fff;
  --leaf: #3fa66b; --sun: #ffb431; --tangerine: #ff7a3d; --sea: #2f86c9; --berry: #d9467a;
  --display: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; color: var(--ink); font-family: var(--body);
  background: linear-gradient(180deg, var(--sky) 0%, #f3f9ee 55%, var(--meadow) 100%);
}
.hub { max-width: 980px; margin: 0 auto; padding: 28px 16px 40px; }
.hub-head { text-align: center; margin-bottom: 26px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 7vw, 3.6rem); margin: 4px 0 0; line-height: 1.05; color: var(--leaf); letter-spacing: .5px; }
.tag { font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); margin: 6px 0 0; }

/* the little sprout logo */
.sprout { position: relative; width: 74px; height: 70px; margin: 0 auto; }
.sprout .stem { position: absolute; left: 34px; bottom: 0; width: 7px; height: 40px; border-radius: 4px; background: var(--leaf); }
.sprout .leaf { position: absolute; top: 6px; width: 34px; height: 22px; background: #5cc285; border: 3px solid var(--leaf); }
.sprout .l { left: 3px; border-radius: 22px 0 22px 0; transform: rotate(-18deg); }
.sprout .r { right: 3px; border-radius: 0 22px 0 22px; transform: rotate(18deg); }
@media (prefers-reduced-motion: no-preference) {
  .sprout { animation: sway 3.5s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes sway { 50% { transform: rotate(4deg); } }
}

.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.app {
  display: flex; flex-direction: column; gap: 12px; min-height: 260px; padding: 20px;
  border-radius: 24px; text-decoration: none; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 8px 0 rgba(0,0,0,.12), 0 14px 26px rgba(35,50,74,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.app:hover, a.app:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 0 rgba(0,0,0,.12), 0 20px 30px rgba(35,50,74,.18); }
a.app:active { transform: translateY(3px); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
a.app:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.chess { background: linear-gradient(145deg, #4bb478, #2e8f59); }
.bricks { background: linear-gradient(145deg, #ff8a3d, #e8503a); }
.soon { background: rgba(255,255,255,.75); color: var(--ink); border: 3px dashed #b9cbb3; box-shadow: none; }

.art { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 64px; position: relative; }
.chess .owl { font-size: 72px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.15)); }
.chess .piece { font-size: 54px; margin-left: 6px; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.18); }
.brk { position: absolute; display: block; height: 26px; border-radius: 5px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.brk::before { content: ""; position: absolute; top: -7px; left: 7px; width: 12px; height: 8px; border-radius: 3px 3px 0 0; background: inherit; box-shadow: 18px 0 0 0 var(--c), 36px 0 0 0 var(--c); }
.b1 { --c: var(--sun); background: var(--sun); width: 72px; left: calc(50% - 74px); top: 58px; }
.b2 { --c: var(--sea); background: var(--sea); width: 72px; left: calc(50% + 2px); top: 58px; }
.b3 { --c: #ffe08a; background: #ffe08a; width: 72px; left: calc(50% - 36px); top: 26px; }
.b4 { --c: var(--berry); background: var(--berry); width: 34px; left: calc(50% - 17px); top: -4px; }
.b4::before { box-shadow: none; }

.txt { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.name { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.about { font-size: 1.02rem; line-height: 1.4; opacity: .95; }
.studs { font-weight: 800; background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 12px; align-self: flex-start; }
.go {
  margin-top: auto; align-self: flex-start; min-height: 48px; display: inline-flex; align-items: center;
  padding: 8px 20px; border-radius: 999px; background: #fff; font-family: var(--display); font-weight: 800; font-size: 1.15rem;
}
.chess .go { color: #2e8f59; }
.bricks .go { color: #d8462f; }
.soon .art { font-size: 56px; }
.soon .about { color: var(--ink-soft); }

.hub-foot { text-align: center; color: var(--ink-soft); margin-top: 30px; font-size: .95rem; }
.hub-foot p { margin: 6px 0; }
.hub-foot a { color: var(--sea); font-weight: 800; }
@media (max-width: 480px) { .hub { padding-top: 18px; } .app { min-height: 0; } }