/* CoreLab Studios website: one shared style, each page picks a theme class on <body>. */
:root {
  --bg: #071226;
  --bg2: #0d1f3d;
  --panel: #12284d;
  --line: #1fd6ff;
  --accent: #ffb52e;
  --text: #eaf6ff;
  --muted: #9fb8d6;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--line); }
main { flex: 1; }
.wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 18, 38, .88);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(31, 214, 255, .35);
}
.top .wrap { display: flex; align-items: center; gap: 16px; padding: 10px 0; flex-wrap: wrap; }
.top .brand img { height: 46px; width: auto; }
.top nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a {
  color: var(--text); text-decoration: none; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; font-size: 16px;
}
.top nav a:hover, .top nav a[aria-current] { background: rgba(31, 214, 255, .18); color: #fff; }

/* Shared blocks */
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(34px, 6vw, 60px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 22px; }
section { padding: 56px 0; }
.lead { font-size: clamp(19px, 2.4vw, 23px); color: var(--muted); max-width: 720px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.panel {
  background: var(--panel);
  border: 2px solid rgba(31, 214, 255, .3);
  border-radius: var(--radius);
  padding: 26px;
}
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pill {
  display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: .04em;
  padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #2a1600;
}
.pill.ghost { background: transparent; color: var(--line); border: 2px solid var(--line); }
.btn {
  display: inline-block; font-weight: 700; text-decoration: none; font-size: 19px;
  padding: 14px 26px; border-radius: 999px; background: var(--accent); color: #2a1600;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
}
.btn:hover { transform: translateY(-2px); }
.stores { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.glow-strip { height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 0 auto; width: 60%; opacity: .8; }

/* Footer */
footer { border-top: 2px solid rgba(31, 214, 255, .25); background: rgba(0, 0, 0, .25); padding: 26px 0; font-size: 16px; color: var(--muted); }
footer .wrap { display: flex; gap: 14px 26px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--text); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .copy { margin-left: auto; }

/* ---------- Home (CoreLab, sci-fi navy with cyan and orange strips) ---------- */
.t-home body, body.t-home {
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(31, 214, 255, .22), transparent 70%),
    linear-gradient(180deg, #071226, #0a1a35 60%, #071226);
}
.hero-home { padding: 70px 0 40px; text-align: center; }
.hero-home .logo { width: min(520px, 90%); margin: 0 auto 24px; filter: drop-shadow(0 0 26px rgba(31, 214, 255, .35)); }
.game-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; color: var(--text); transition: transform .15s; }
.game-card:hover { transform: translateY(-4px); }
.game-card .art { height: 200px; display: grid; place-items: center; position: relative; overflow: hidden; }
.game-card .body { padding: 20px 22px 24px; }
.game-card p { color: var(--muted); margin: 6px 0 14px; }
.art.ff { background: linear-gradient(180deg, #7fd3ff, #bdf0a0); }
.art.ff img { width: 78%; }
.art.dt { background: radial-gradient(circle at 50% 120%, #2b6cff55, transparent 60%), linear-gradient(180deg, #0a0f2a, #101a44); }
.art.tt { background: radial-gradient(circle at 50% 100%, #ff8a2a88, transparent 65%), linear-gradient(180deg, #13284f, #1b3a6e); }
.art .word { font-size: 38px; font-weight: 700; letter-spacing: .06em; text-align: center; }

/* ---------- Fruit Faces (bright cartoon) ---------- */
body.t-fruit {
  --bg: #5cc8ff; --panel: #ffffff; --text: #2b1b4a; --muted: #5b4a7a; --line: #8b3fd9; --accent: #ffd02e;
  background: linear-gradient(180deg, #6fd0ff 0, #a8e6ff 420px, #bff19a 900px, #8fdc6a);
}
body.t-fruit .top { background: rgba(43, 27, 74, .9); border-bottom-color: #ffd02e; }
body.t-fruit .top nav a { color: #fff; }
body.t-fruit .panel { border: 4px solid #2b1b4a; box-shadow: 0 6px 0 #2b1b4a; }
body.t-fruit footer { background: #2b1b4a; color: #d9cdf2; border-top: 4px solid #ffd02e; }
body.t-fruit footer a { color: #fff; }
.hero-fruit { text-align: center; padding: 46px 0 20px; position: relative; }
.hero-fruit .logo { width: min(560px, 92%); margin: 0 auto; filter: drop-shadow(0 8px 0 rgba(43, 27, 74, .25)); }
.hero-fruit .lead { color: #2b1b4a; font-weight: 600; margin: 10px auto; }
.fruit-row { display: flex; justify-content: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.fruit-row img { width: 58px; height: 58px; animation: bob 2.4s ease-in-out infinite; }
.fruit-row img:nth-child(2n) { animation-delay: -.6s; }
.fruit-row img:nth-child(3n) { animation-delay: -1.2s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.shots { display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; }
.shots img { height: 460px; width: auto; border-radius: 18px; border: 4px solid #2b1b4a; box-shadow: 0 6px 0 #2b1b4a; scroll-snap-align: center; flex: none; }
.shots img.wide { height: 260px; align-self: center; }
.mode h3 { color: #8b3fd9; }
.mode .tag { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.mode p { margin: 0; }
body.t-fruit .pill.ghost { color: #2b1b4a; border-color: #2b1b4a; background: #fff; }

/* ---------- Deep Trouble (deep cave blues with crystal glow) ---------- */
body.t-deep {
  --bg: #050816; --panel: #0e1533; --line: #46e0ff; --accent: #ff4fd8; --muted: #a3b0e0;
  background:
    radial-gradient(700px 400px at 20% 110%, rgba(70, 224, 255, .18), transparent 70%),
    radial-gradient(600px 400px at 85% 100%, rgba(255, 79, 216, .16), transparent 70%),
    linear-gradient(180deg, #0a1030, #050816);
}
body.t-deep .pill { color: #fff; }
/* ---------- Tiny Titans (arena orange and teal) ---------- */
body.t-titans {
  --bg: #0c1a33; --panel: #13284d; --line: #2fe0c8; --accent: #ff8a2a; --muted: #b7c9e6;
  background:
    radial-gradient(900px 420px at 50% 115%, rgba(255, 138, 42, .35), transparent 70%),
    linear-gradient(180deg, #0f2448, #0c1a33);
}
.soon { text-align: center; padding: 80px 0 40px; }
.soon .big { font-size: clamp(46px, 10vw, 104px); font-weight: 700; letter-spacing: .04em; margin: 16px 0 8px; }
.t-deep .soon .big { color: #fff; text-shadow: 0 0 22px rgba(70, 224, 255, .7), 0 0 60px rgba(255, 79, 216, .35); }
.t-titans .soon .big { color: #fff; text-shadow: 0 6px 0 #c2410c, 0 0 40px rgba(255, 138, 42, .6); }
.crystals { display: flex; justify-content: center; gap: 22px; margin: 26px 0; }
.crystals i { width: 26px; height: 44px; background: linear-gradient(160deg, #b9f6ff, #46e0ff 50%, #1a4cff); clip-path: polygon(50% 0, 100% 35%, 75% 100%, 25% 100%, 0 35%); filter: drop-shadow(0 0 10px #46e0ff); animation: pulse 2.6s ease-in-out infinite; }
.crystals i:nth-child(2) { background: linear-gradient(160deg, #ffd6f6, #ff4fd8 50%, #7a1fff); filter: drop-shadow(0 0 10px #ff4fd8); animation-delay: -.9s; height: 56px; }
.crystals i:nth-child(3) { animation-delay: -1.7s; }
@keyframes pulse { 50% { opacity: .55; transform: translateY(-4px); } }
.shield { width: 120px; height: 140px; margin: 10px auto 0; background: linear-gradient(160deg, #ffb066, #ff8a2a 55%, #c2410c); clip-path: polygon(50% 0, 100% 15%, 92% 70%, 50% 100%, 8% 70%, 0 15%); display: grid; place-items: center; font-size: 54px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 #7c2d12; }
.notify { max-width: 640px; margin: 30px auto 0; }

/* Game logos and art (Deep Trouble, Tiny Titans) */
.art.dt { background: url(img/dt-bg.jpg) center/cover; }
.art.tt { background: url(img/tt-hero.jpg) center/cover; }
.art.dt img, .art.tt img { width: 82%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.soon-hero { padding: 50px 0 30px; text-align: center; }
.t-deep .soon-hero { background: linear-gradient(180deg, rgba(5, 8, 22, .1), #050816), url(img/dt-bg.jpg) center top/cover; }
.soon-hero .logo { width: min(640px, 94%); margin: 18px auto 10px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.t-titans .soon-hero .logo { width: min(700px, 96%); }
.tt-banner { width: 100%; border-radius: var(--radius); border: 3px solid rgba(47, 224, 200, .5); box-shadow: 0 0 40px rgba(255, 138, 42, .25); margin: 10px 0 0; }
.worlds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.worlds img { width: 100%; image-rendering: pixelated; }
.arenas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.arenas figure { margin: 0; }
.arenas img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 16px; border: 2px solid rgba(47, 224, 200, .4); }
.arenas figcaption { font-weight: 600; margin-top: 6px; color: var(--muted); }

/* ---------- Text pages (privacy, support) ---------- */
.doc { max-width: 820px; }
.doc h2 { margin-top: 1.6em; font-size: 26px; color: #fff; }
.doc p, .doc li { color: #d3e3f5; }
.doc .updated { color: var(--muted); }
.faq details { background: var(--panel); border: 2px solid rgba(31, 214, 255, .25); border-radius: 16px; padding: 14px 20px; margin: 12px 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 19px; }
.faq details p { margin: 10px 0 2px; }
.mail { font-size: clamp(20px, 3.4vw, 28px); font-weight: 700; word-break: break-all; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .top .wrap { justify-content: center; }
  .top nav { margin: 0; justify-content: center; }
  .top nav a { padding: 7px 10px; font-size: 15px; }
  section { padding: 40px 0; }
  .shots img { height: 380px; }
  .shots img.wide { height: 200px; }
  footer .copy { margin-left: 0; }
}

/* Studio story (home) */
.story { display: grid; gap: 28px; grid-template-columns: 1.3fr 1fr; align-items: start; }
.story > div { min-width: 0; }
.story p { color: #d3e3f5; }
.story strong { color: var(--accent); }
.pillars { display: grid; gap: 14px; }
.pillars .panel { padding: 18px 22px; }
.pillars h3 { color: var(--line); margin-bottom: 4px; }
.pillars p { margin: 0; color: var(--muted); }
@media (max-width: 800px) { .story { grid-template-columns: 1fr; } }