/* The studio's home: calmer than the game pages. Flat panels, thin borders and plenty of space, so the logo
   and the games stand out. The chunky game look (thick outlines, 3D buttons) stays on the game pages.
   Fonts are served from this site (no third-party font service). */
@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
:root {
  --floor: #14161f;
  --panel: #1d2030;
  --line: #2b2f44;
  --text: #eef0f8;
  --muted: #9aa1bd;
  --red: #f0393f;          /* the lever knob: the studio colour, used sparingly */
  --red-hi: #ff5a5f;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--floor);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
.wrap { max-width: 1000px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; text-wrap: balance; margin: 0; font-weight: 800; }
p { margin: 0; }
a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-hi); }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; border-radius: 6px; }

/* ---------- Hero: the logo with room around it ---------- */
.hero {
  padding-block: 72px 40px; display: grid; gap: 22px; justify-items: center; text-align: center;
  background: radial-gradient(closest-side, rgba(240, 57, 63, .10), transparent) center 38% / 640px 520px no-repeat;
}
.logo { width: min(300px, 70vw); height: auto; }
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the logo says it */
.tagline { font: 700 clamp(1.35rem, 4vw, 1.75rem)/1.3 var(--display); }
.sub { color: var(--muted); max-width: 46ch; }

.button {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: 700 1.05rem/1 var(--display); color: #fff; background: var(--red);
  border-radius: 14px; padding: 13px 20px 11px; transition: background .15s;
}
.button:hover { background: var(--red-hi); color: #fff; }

/* ---------- Sections ---------- */
section { padding-block: 56px 0; }
.section-head { display: grid; gap: 6px; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
.label { font: 700 .85rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lead { color: var(--muted); max-width: 60ch; }

/* ---------- Games: one big card per game, the game's own art does the talking ---------- */
.games { display: grid; gap: 18px; }
.game {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  transition: transform .2s, border-color .2s;
}
.game:hover { transform: translateY(-3px); border-color: #3a3f5a; }
@media (min-width: 820px) { .game { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.game > a { display: grid; align-content: center; min-width: 0; background: #1a1d2b; } /* the art is never cropped */
.game-art { width: 100%; height: auto; aspect-ratio: 1024 / 500; display: block; }
.game-body { padding: clamp(20px, 3.5vw, 32px); display: grid; gap: 14px; align-content: center; }
.game-title { display: flex; align-items: center; gap: 14px; }
.game-title img { width: 60px; height: 60px; border-radius: 15px; }
.game-title h3 { font-size: 2rem; }
.meta { color: var(--muted); font-size: .95rem; }
.meta b { color: var(--text); font-weight: 600; }
.game p.desc { color: var(--muted); }
.game-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 4px; }

.next {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px 22px;
  display: flex; align-items: center; gap: 14px; color: var(--muted);
}
.next svg { width: 36px; height: 36px; flex: none; }
.next b { color: var(--text); font-family: var(--display); font-size: 1.15rem; font-weight: 700; }

/* ---------- About / contact ---------- */
.two { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.about p { color: var(--muted); max-width: 58ch; }
.about p + p { margin-top: 12px; }
.contact { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; }
.contact h3 { font-size: 1.35rem; }
.contact p { color: var(--muted); }
.mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mail code { font: 600 1rem/1.2 var(--body); color: var(--text); background: var(--floor); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; user-select: all; overflow-wrap: anywhere; }
.copy { cursor: pointer; border: 0; font: 700 .95rem/1 var(--display); padding: 11px 16px 9px; border-radius: 10px; background: var(--line); color: var(--text); }
.copy:hover { background: #3a3f5a; }
.copy-status { color: var(--muted); font-size: .9rem; min-height: 1.2em; }

footer { margin-top: 72px; padding-block: 28px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
footer strong { font-family: var(--display); color: var(--text); font-size: 1.05rem; }
footer a { color: var(--muted); }

/* ---------- Language switcher ---------- */
.topbar { display: flex; justify-content: flex-end; padding-top: 18px; }
.langs { display: flex; gap: 4px; }
.langs a { color: var(--muted); text-decoration: none; font: 700 .95rem/1 var(--display); padding: 9px 11px 7px; border-radius: 10px; border: 1px solid transparent; }
.langs a:hover { color: var(--text); }
.langs a[aria-current="page"] { color: var(--text); background: var(--panel); border-color: var(--line); }