/* The look of Otterly Sorted: blue sea backdrop, cream panels with chunky dark outlines, Lilita One headings, glossy
   orange buttons. Long text sits on the panel, never on the blue, so it stays easy to read. */
:root {
  --sea-top: #1648e2;
  --sea-bottom: #1a78d8;
  --panel: #fff8ec;
  --card: #ffffff;
  --ink: #2a1710;
  --muted: #6e5a50;
  --outline: #2a1710;
  --line: #eadfd2;
  --link: #1648e2;
  --orange: #ff8a1f;
  --orange-light: #ffb057;
  --orange-dark: #c25a00;
  --coral: #f2705f;
  --on-sea: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sea-top: #0b1a5c;
    --sea-bottom: #1238a0;
    --panel: #1f1b2e;
    --card: #2a2540;
    --ink: #f6eee6;
    --muted: #c3b6c9;
    --outline: #07091c;
    --line: #3b3456;
    --link: #8fd8ff;
  }
}

* { box-sizing: border-box; }

html { background: var(--sea-top); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .14) 0 10px, transparent 11px),
    radial-gradient(circle at 86% 30%, rgba(255, 255, 255, .12) 0 16px, transparent 17px),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, .10) 0 8px, transparent 9px),
    radial-gradient(circle at 20% 82%, rgba(255, 255, 255, .10) 0 14px, transparent 15px),
    linear-gradient(180deg, var(--sea-top), var(--sea-bottom)) fixed;
}

a { color: var(--link); font-weight: 600; }

h1, h2, h3, .brand, .btn, .tag {
  font-family: "Lilita One", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}

header, main, footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */

header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  color: var(--on-sea);
  text-decoration: none;
  -webkit-text-stroke: 6px var(--outline);
  paint-order: stroke fill;
}

.brand img { width: 48px; height: 48px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }

nav { display: flex; gap: 8px; flex-wrap: wrap; }

nav a {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(7, 9, 40, .35);
  color: var(--on-sea);
  text-decoration: none;
  font-size: 15px;
}

nav a:hover, nav a[aria-current="page"] { background: rgba(7, 9, 40, .6); }

/* Panel that holds each page's content */

main {
  background: var(--panel);
  border: 4px solid var(--outline);
  border-radius: 28px;
  box-shadow: 0 8px 0 rgba(7, 9, 40, .35);
  padding: 8px 28px 28px;
  max-width: 768px;
  margin-top: 32px;
}

@media (max-width: 800px) {
  main { margin: 20px 16px 0; padding: 4px 18px 22px; }
}

h1 { font-size: 36px; line-height: 1.15; margin: 24px 0 8px; }
h2 { font-size: 25px; line-height: 1.2; margin: 32px 0 8px; }
h3 { font-size: 20px; margin: 20px 0 4px; }

.lead { color: var(--muted); font-size: 19px; margin-top: 0; }

.card {
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--line);
  padding: 20px 22px;
  margin: 20px 0;
}

.card h2 { margin-top: 0; }

.tag {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--outline);
  border-radius: 999px;
  padding: 3px 14px 2px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .06em;
}

/* Glossy orange button, like the game's Level button */
.btn {
  display: inline-block;
  padding: 10px 26px;
  border: 3px solid var(--outline);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--orange-light) 0 50%, var(--orange) 50% 100%);
  box-shadow: inset 0 -5px 0 var(--orange-dark), 0 4px 0 rgba(7, 9, 40, .3);
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  -webkit-text-stroke: 4px var(--outline);
  paint-order: stroke fill;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--orange-dark), 0 2px 0 rgba(7, 9, 40, .3); }

/* Home page */

.hero {
  display: block;
  text-align: center;
  padding-top: 20px;
}

.hero img {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 6px 0 rgba(7, 9, 40, .3));
  animation: bob 3.2s ease-in-out infinite;
}

/* The studio name as a game-style logo: kraken-coral letters in a thick outline with a drop below */
.hero h1 {
  margin: 6px 0 0;
  color: var(--coral);
  font-size: clamp(40px, 11vw, 76px);
  line-height: 1.05;
  letter-spacing: .02em;
  -webkit-text-stroke: 10px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--outline);
}

.tagline {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: "Lilita One", system-ui, sans-serif;
  font-size: clamp(19px, 5vw, 24px);
  letter-spacing: .02em;
}


@keyframes bob {
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero img { animation: none; }
}

.game {
  display: flex;
  gap: 20px;
  align-items: center;
}

.game > img {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  border: 3px solid var(--outline);
}

.game h2 { margin: 6px 0 4px; }
.game p { margin: 0; }

@media (max-width: 520px) {
  .game { flex-direction: column; align-items: flex-start; }
}

/* Lists and tables */

ul, ol { padding-left: 22px; }
li { margin: 4px 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 15px;
}

th, td {
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--line);
  padding: 8px 8px 8px 0;
}

.table-wrap { overflow-x: auto; }

/* Footer */

footer {
  color: var(--on-sea);
  font-size: 14px;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 40px;
}

footer a { color: var(--on-sea); }

/* Every Lilita One text gets the game's look: white letters in a black outline with a small drop */
h2, h3, .tagline, .tag {
  color: #fff;
  letter-spacing: .04em;
  -webkit-text-stroke: 4px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--outline);
}

h2 { font-size: 28px; }
.tagline { font-size: clamp(20px, 5.4vw, 26px); }
.tag { -webkit-text-stroke-width: 3px; text-shadow: 0 1px 0 var(--outline); }