@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{min-height:100vh;font-family:"Fredoka",system-ui,sans-serif;color:#2A4A63;
  background:linear-gradient(180deg,#3FB8EE,#7FD4F5 55%,#BDEEFF);
  display:flex;flex-direction:column;align-items:center;padding:48px 20px;}
h1{font-size:min(13vw,72px);font-weight:700;color:#fff;text-shadow:0 6px 0 #FF8A3D,0 12px 22px rgba(42,74,99,.3);margin-bottom:6px;}
p.sub{font-size:18px;font-weight:500;background:rgba(255,249,238,.85);padding:8px 22px;border-radius:999px;box-shadow:0 5px 0 rgba(42,74,99,.15);margin-bottom:36px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;width:100%;max-width:820px;}
a.card{display:block;text-decoration:none;color:inherit;background:rgba(255,249,238,.95);border-radius:22px;padding:22px;
  box-shadow:0 8px 0 rgba(42,74,99,.16),0 16px 26px rgba(42,74,99,.14);transition:transform .1s,box-shadow .1s;}
a.card:hover{transform:translateY(-4px);box-shadow:0 12px 0 rgba(42,74,99,.16),0 22px 30px rgba(42,74,99,.16);}
.emoji{font-size:52px;line-height:1;}
.card h2{font-size:26px;font-weight:700;margin:10px 0 4px;}
.card span{font-size:15px;font-weight:500;opacity:.75;}
.card .ver{display:block;margin-top:8px;font-size:12px;opacity:.45;}
.soon{opacity:.6;cursor:default;pointer-events:none;border:3px dashed rgba(42,74,99,.25);background:rgba(255,249,238,.6);box-shadow:none;}
footer{margin-top:40px;text-align:center;font-size:14px;font-weight:500;opacity:.75;}
footer a{color:#2A4A63;margin:0 10px;text-decoration:none;}
footer a:hover{text-decoration:underline;}