@font-face {
  font-family: "Fredoka"; src: url("fonts/fredoka-latin.woff") format("woff");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito"; src: url("fonts/nunito-latin.woff") format("woff");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
:root {
  --abyss: #061630;      /* page water, bottom */
  --surface: #12406e;    /* page water, lit top */
  --navy: #0a1f3d;       /* logo outline */
  --foam: #f4fbff;       /* sticker face */
  --sun: #fcd82a;        /* logo yellow */
  --tide: #8fdcf5;       /* light cyan text */
  --kelp: #9db6cf;       /* muted text */
  --shadow: #020a18;
  --display: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
html { background: var(--abyss); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--surface) 0%, transparent 70%),
    linear-gradient(180deg, #0c2c55 0%, var(--abyss) 75%);
  background-color: var(--abyss);
  color: var(--foam);
  font-family: var(--body);
  font-size: 16px;
  overflow-x: hidden;
}
.water { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  border: 2px solid rgba(143, 220, 245, 0.45);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0 18%, rgba(143,220,245,0.08) 40%);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(14px, -55vh); }
  100% { transform: translate(-6px, -115vh); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; display: none; } }
/* bubbles */
.bubble:nth-child(1) { width: 16px; height: 16px; left: 56%; animation-duration: 20s; animation-delay: -9s; }
.bubble:nth-child(2) { width: 16px; height: 16px; left: 59%; animation-duration: 11s; animation-delay: -10s; }
.bubble:nth-child(3) { width: 20px; height: 20px; left: 79%; animation-duration: 10s; animation-delay: -6s; }
.bubble:nth-child(4) { width: 8px; height: 8px; left: 81%; animation-duration: 17s; animation-delay: -1s; }
.bubble:nth-child(5) { width: 28px; height: 28px; left: 96%; animation-duration: 17s; animation-delay: -12s; }
.bubble:nth-child(6) { width: 8px; height: 8px; left: 2%; animation-duration: 15s; animation-delay: -1s; }
.bubble:nth-child(7) { width: 10px; height: 10px; left: 24%; animation-duration: 9s; animation-delay: -9s; }
.bubble:nth-child(8) { width: 16px; height: 16px; left: 84%; animation-duration: 15s; animation-delay: -13s; }
.bubble:nth-child(9) { width: 16px; height: 16px; left: 66%; animation-duration: 14s; animation-delay: -6s; }
.bubble:nth-child(10) { width: 28px; height: 28px; left: 100%; animation-duration: 19s; animation-delay: -14s; }
.bubble:nth-child(11) { width: 12px; height: 12px; left: 23%; animation-duration: 12s; animation-delay: -1s; }
.bubble:nth-child(12) { width: 24px; height: 24px; left: 40%; animation-duration: 19s; animation-delay: -8s; }
.bubble:nth-child(13) { width: 28px; height: 28px; left: 85%; animation-duration: 9s; animation-delay: -4s; }
.bubble:nth-child(14) { width: 26px; height: 26px; left: 47%; animation-duration: 21s; animation-delay: -8s; }
.bubble:nth-child(15) { width: 8px; height: 8px; left: 63%; animation-duration: 18s; animation-delay: -5s; }
.bubble:nth-child(16) { width: 8px; height: 8px; left: 33%; animation-duration: 21s; animation-delay: -15s; }


main {
  position: relative; z-index: 1;
  max-width: 440px; margin: 0 auto;
  padding-inline: 18px; padding-block: 44px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
header { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.logo { width: min(250px, 70vw); height: auto; filter: drop-shadow(0 8px 0 rgba(2,10,24,0.55)); }
.logo-wrap { animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .logo-wrap { animation: none; } }
h1 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: 0.01em; color: var(--sun); text-wrap: balance;
}
.pitch { margin: 0; max-width: 32ch; color: var(--tide); line-height: 1.5; font-weight: 500; text-wrap: balance; }

nav { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--foam); color: var(--navy);
  border: 3px solid var(--navy); border-radius: 22px;
  box-shadow: 0 6px 0 var(--shadow);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.link:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: 0 9px 0 var(--shadow); }
.link:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--shadow); }
.link:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.icon {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  background: var(--navy); color: var(--foam);
}
.icon svg, .icon img { width: 26px; height: 26px; }
.text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.15; }
.handle { font-size: 0.85rem; font-weight: 700; color: #4d6684; overflow-wrap: anywhere; }
.go { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }

.link.steam {
  background: var(--sun); padding-block: 18px; border-radius: 26px;
  animation: glow 2.6s ease-in-out infinite;
}
.link.steam .icon { width: 56px; height: 56px; border-radius: 18px; }
.link.steam .icon img { width: 32px; height: 32px; }
.link.steam .name { font-size: 1.4rem; font-weight: 700; }
.link.steam .handle { color: #5b4a06; }
@keyframes glow {
  0%, 100% { box-shadow: 0 6px 0 var(--shadow), 0 0 0 0 rgba(252, 216, 42, 0.45); }
  50% { box-shadow: 0 6px 0 var(--shadow), 0 0 26px 6px rgba(252, 216, 42, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .link.steam { animation: none; } }
.link.steam:hover { box-shadow: 0 9px 0 var(--shadow), 0 0 30px 8px rgba(252, 216, 42, 0.5); }
.badge {
  align-self: flex-start; margin-top: 3px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--navy); color: var(--sun); padding: 2px 8px; border-radius: 999px;
}

footer { color: var(--kelp); font-size: 0.82rem; text-align: center; line-height: 1.6; }
footer b { color: var(--tide); font-weight: 700; }

@media (max-width: 380px) {
  .link { gap: 11px; }
  .icon { width: 40px; height: 40px; border-radius: 13px; }
  .name { font-size: 1.05rem; }
  .link.steam .icon { width: 48px; height: 48px; }
  .link.steam .name { font-size: 1.25rem; }
}