/* liddat.com's landing page: the big wordmark and the shelves of tools and games */
.home { max-width: 1040px; }
.splash { text-align: center; padding: 28px 0 8px; }
.big-mark { margin: 0; font-family: var(--font); font-weight: 700; font-size: clamp(64px, 17vw, 150px); line-height: .95; letter-spacing: -3px; color: #fff; text-shadow: 0 7px 0 var(--ink), 0 14px 28px rgba(0,0,0,.25); }
.big-mark span { display: inline-block; animation: hop 2.8s ease-in-out infinite; }
.big-mark span:nth-child(2) { animation-delay: .1s; } .big-mark span:nth-child(3) { animation-delay: .2s; }
.big-mark span:nth-child(4) { animation-delay: .3s; } .big-mark span:nth-child(5) { animation-delay: .4s; } .big-mark span:nth-child(6) { animation-delay: .5s; }
.big-mark .y { color: var(--yellow); }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-14px) rotate(-4deg); } 90% { transform: translateY(0) rotate(2deg); } }
.tagline { font-family: var(--font); font-weight: 500; font-size: clamp(19px, 3.4vw, 26px); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); margin: 16px auto 18px; max-width: 640px; }
.tagline em { font-style: normal; font-weight: 700; color: var(--yellow); }
.shake { font-family: var(--font); font-weight: 600; font-size: 18px; border: 4px solid var(--ink); border-radius: 999px; background: #fff; padding: 8px 20px; cursor: pointer; box-shadow: 0 5px 0 var(--ink); }
.shake:hover { animation: wiggle .4s ease-in-out; }
.shake:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

.shelf { font-family: var(--font); font-weight: 700; font-size: 28px; color: #fff; text-shadow: 0 3px 0 var(--ink); margin: 34px 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.app {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 190px; padding: 18px 16px 16px;
  background: var(--paper); border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.app::after { content: ''; position: absolute; right: -32px; top: -32px; width: 100px; height: 100px; border-radius: 50%; background: var(--c, var(--pink)); opacity: .9; }
.app > * { position: relative; z-index: 1; }
a.app:hover, a.app:focus-visible { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 13px 0 rgba(27,27,58,.18); outline: none; }
a.app:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(27,27,58,.18); }
.app .emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.app .name { font-family: var(--font); font-weight: 700; font-size: 22px; }
.app .blurb { font-weight: 700; font-size: 14px; color: var(--muted); flex: 1; }
.app .host { align-self: flex-start; font-family: var(--font); font-weight: 600; font-size: 13px; background: var(--yellow); border-radius: 999px; padding: 2px 10px; }
.app.new .name::after { content: 'NEW'; font-size: 11px; font-weight: 700; background: var(--pink); color: #fff; border-radius: 6px; padding: 2px 6px; margin-left: 8px; vertical-align: 4px; }
.app.soon { background: rgba(255,250,243,.55); border-style: dashed; box-shadow: none; }
.app.soon::after { display: none; }
.app.soon .emoji { opacity: .7; }

@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .app { min-height: 0; }
  .shelf { font-size: 24px; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { .big-mark span, .shake:hover { animation: none; } }