* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #070910;
  --surface: #0d111c;
  --surface-2: #111827;
  --text: #f4f7ff;
  --muted: #9aa5bb;
  --cyan: #78e8ff;
  --purple: #b59cff;
  --border: rgba(255,255,255,.09);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 80% 10%, rgba(120,232,255,.08), transparent 28rem),
    radial-gradient(circle at 10% 40%, rgba(181,156,255,.07), transparent 25rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 7%;
  background: rgba(7,9,16,.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.logo { font-weight: 900; letter-spacing: .14em; }
.logo span { color: var(--cyan); }

nav { display: flex; gap: 1.4rem; }
nav a { color: var(--muted); font-size: .9rem; transition: .2s; }
nav a:hover { color: var(--text); }

.menu-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.4rem; }

.hero {
  min-height: 88vh;
  display: grid;
  place-items: center;
  padding: 6rem 7%;
  position: relative;
  overflow: hidden;
}

.hero-content { max-width: 900px; position: relative; z-index: 2; }

.eyebrow {
  color: var(--cyan);
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 800;
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.07em;
}

h1 span {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}

.hero-text {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 650px;
  margin: 1.5rem 0;
}

.hero-buttons { display: flex; gap: .8rem; flex-wrap: wrap; }

.button {
  padding: .8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: .9rem;
}

.primary { background: var(--text); color: var(--bg); }
.secondary { background: rgba(255,255,255,.04); }

.currently {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}

.currently > div {
  padding: 1rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.currently small { display: block; color: var(--muted); font-size: .7rem; }

.bubble {
  position: absolute;
  border: 1px solid rgba(120,232,255,.15);
  border-radius: 50%;
  filter: blur(.2px);
}
.bubble-one { width: 320px; height: 320px; right: -80px; top: 8%; }
.bubble-two { width: 170px; height: 170px; left: -60px; bottom: 5%; }

.section { padding: 7rem 7%; max-width: 1250px; margin: auto; scroll-margin-top: 5rem; }
.section h2 { font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.05em; margin-bottom: 2rem; }

.about-grid, .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.about-grid .large { grid-column: span 2; }

.card {
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.5rem;
  transition: transform .2s, border-color .2s;
}

.card:hover { transform: translateY(-4px); border-color: rgba(120,232,255,.25); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); }

.project-number { color: var(--cyan); font-size: .75rem; }
.tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--cyan);
}

.game-card span:first-child { font-size: 2rem; display: block; margin-bottom: 1rem; }

.gallery-placeholder {
  min-height: 320px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}

.gallery-placeholder p { color: var(--text); font-size: 1.2rem; margin-bottom: .4rem; }

.links-list { display: grid; gap: .8rem; max-width: 700px; }
.link-card { display: flex; justify-content: space-between; width: 100%; font: inherit; text-align: left; cursor: pointer; }

footer {
  border-top: 1px solid var(--border);
  padding: 2rem 7%;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}

@media (max-width: 760px) {
  .menu-toggle { display: block; }
  nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    padding: 1rem 7%;
    flex-direction: column;
    background: rgba(7,9,16,.96);
    border-bottom: 1px solid var(--border);
  }
  nav.open { display: flex; }
  .currently, .about-grid, .cards { grid-template-columns: 1fr; }
  .about-grid .large { grid-column: auto; }
  .hero { min-height: 80vh; }
  footer { flex-direction: column; gap: .4rem; }
}

/* ---------- Added for the multi-page version ---------- */

/* Keeps the footer at the bottom of short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Highlights the menu link for the page you're on */
nav a[aria-current="page"] { color: var(--text); }

/* Makes a whole card clickable (used on the Home page) */
.card-link { display: block; }

/* Spacing tweaks for the About page */
.about-currently { margin-top: 1rem; }
.section.section-tight { padding-top: 0; }

/* ---------- Trading page ---------- */

/* A shorter version of the big top section */
.hero-short { min-height: 60vh; }

/* Makes something look switched off (used on "Coming soon" buttons) */
.is-disabled { opacity: .5; cursor: not-allowed; }

/* The "Preview only" message boxes */
.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: .9rem;
  background: rgba(255,255,255,.03);
}

/* The three demo boxes in the preview section */
.stat-card small { display: block; color: var(--cyan); font-size: .7rem; letter-spacing: .12em; }
.stat-card strong { display: block; font-size: 2.4rem; margin: .4rem 0; }
.stat-card span { color: var(--muted); }

/* The FAQ list */
.faq { display: grid; gap: .8rem; max-width: 700px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,.035);
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { color: var(--muted); margin-top: .6rem; }
.faq details a { color: var(--cyan); }
/* ---------- Added for the extra pages (v3.3) ---------- */
/* Paste this at the very bottom of style.css. Don't replace the file. */

/* Footer link row (Lab, Gallery, Support, Trading) */
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.footer-links a:hover { color: var(--text); }

/* Smaller headings used inside a section */
.sub-heading { margin: 2.5rem 0 1rem; font-size: 1.1rem; }

/* Four stat boxes in a row (Dashboard page) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Game preview box, and the game inside it later */
.preview-frame {
  min-height: 320px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}
.preview-frame p { color: var(--text); font-size: 1.2rem; margin-bottom: .4rem; }
.preview-frame iframe { width: 100%; height: 520px; border: 0; border-radius: 28px; }

/* Gallery pictures (used once you add images) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.gallery-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--border);
}

/* Dev log on the Updates page */
.log { display: grid; gap: 1rem; max-width: 800px; }
.log-entry .tag { margin-bottom: .8rem; }
.log-entry ul { margin: .8rem 0 0 1.1rem; color: var(--muted); }
.log-entry li { margin: .3rem 0; }

/* Phones */
@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .preview-frame iframe { height: 420px; }
}
/* ==========================================================
   v3.5 MOTION  (paste at the very BOTTOM of style.css)
   Smooth reveals and hover effects. Respects reduced motion.
   Nothing here changes your layout or colors.
   ========================================================== */

/* Header gets a soft shadow once you scroll (script.js adds .is-scrolled) */
.nav { transition: box-shadow .25s ease; }
.nav.is-scrolled { box-shadow: 0 10px 28px var(--shadow, rgba(0,0,0,.28)); }

/* Smoother cards and buttons */
.card { transition: transform .2s, border-color .2s, box-shadow .25s; }
.button { transition: transform .15s, background .2s, box-shadow .2s; }

/* Mouse devices: lift, glow, and an underline that slides under menu links */
@media (hover: hover) {
  .card:hover { box-shadow: 0 16px 36px var(--shadow, rgba(0,0,0,.28)); }
  .button:hover { transform: translateY(-2px); }
  .button.is-disabled:hover { transform: none; }

  nav a { position: relative; }
  nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  nav a:hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Touch devices have no hover, so give a small press effect instead */
@media (hover: none) {
  .card:active, .button:active { transform: scale(.98); }
  .button.is-disabled:active { transform: none; }
}

/* Movement. Skipped completely if the visitor asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  /* Scroll reveal: script.js adds .reveal, then .is-visible as each item scrolls in */
  .reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .6s ease calc(var(--i, 0) * 70ms),
                translate .6s ease calc(var(--i, 0) * 70ms);
  }
  .reveal.is-visible { opacity: 1; translate: 0 0; }

  /* Cards keep their own hover transitions as well */
  .card.reveal {
    transition: opacity .6s ease calc(var(--i, 0) * 70ms),
                translate .6s ease calc(var(--i, 0) * 70ms),
                transform .2s, border-color .2s, box-shadow .25s;
  }

  /* Hero text rises in on page load */
  .hero-content { animation: rise .8s ease both; }
  @keyframes rise {
    from { opacity: 0; translate: 0 16px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* The two circles in the hero drift slowly */
  .bubble-one { animation: drift 14s ease-in-out infinite alternate; }
  .bubble-two { animation: drift 18s ease-in-out infinite alternate-reverse; }
  @keyframes drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(-24px, 28px); }
  }
}
/* ==========================================================
   v3.6 THEMES  (paste at the very BOTTOM of style.css, after the motion block)
   Dark stays the default, so nothing changes until someone picks a theme.
   Part 1 gives every hard-coded color a name. Part 2 defines the themes.
   Part 3 swaps the old hard-coded colors for those names.
   ========================================================== */

/* ---- Part 1: new color names (values = your current dark look) ---- */
:root {
  color-scheme: dark;
  --nav-bg: rgba(7,9,16,.78);
  --nav-bg-solid: rgba(7,9,16,.96);
  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.035);
  --card-top: rgba(255,255,255,.055);
  --card-bottom: rgba(255,255,255,.018);
  --dashed: rgba(255,255,255,.14);
  --glow-1: rgba(120,232,255,.08);
  --glow-2: rgba(181,156,255,.07);
  --accent-line: rgba(120,232,255,.25);
  --bubble: rgba(120,232,255,.15);
  --shadow: rgba(0,0,0,.28);
  --spot: rgba(120,232,255,.10);
  --pattern: rgba(255,255,255,.07);
}

/* ---- Part 2: the other themes ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc; --surface: #ffffff; --surface-2: #eef2f9;
  --text: #0f1626; --muted: #526077;
  --cyan: #07768f; --purple: #6b4fd8;
  --border: rgba(15,22,38,.12);
  --nav-bg: rgba(246,248,252,.82); --nav-bg-solid: rgba(246,248,252,.97);
  --glass: rgba(15,22,38,.05); --glass-2: rgba(15,22,38,.04);
  --card-top: rgba(255,255,255,.95); --card-bottom: rgba(255,255,255,.7);
  --dashed: rgba(15,22,38,.2);
  --glow-1: rgba(7,118,143,.10); --glow-2: rgba(107,79,216,.08);
  --accent-line: rgba(7,118,143,.35); --bubble: rgba(7,118,143,.25);
  --shadow: rgba(15,22,38,.14); --spot: rgba(7,118,143,.12);
  --pattern: rgba(15,22,38,.08);
}

:root[data-theme="pink"] {
  --bg: #12060f; --surface: #1c0b18; --surface-2: #26101f;
  --text: #fff2f9; --muted: #c9a3b8;
  --cyan: #ff7ac8; --purple: #ffb3e1;
  --border: rgba(255,200,230,.12);
  --nav-bg: rgba(18,6,15,.80); --nav-bg-solid: rgba(18,6,15,.96);
  --glass: rgba(255,255,255,.05); --glass-2: rgba(255,255,255,.04);
  --card-top: rgba(255,170,220,.08); --card-bottom: rgba(255,170,220,.02);
  --dashed: rgba(255,200,230,.2);
  --glow-1: rgba(255,122,200,.12); --glow-2: rgba(255,179,225,.08);
  --accent-line: rgba(255,122,200,.4); --bubble: rgba(255,122,200,.25);
  --shadow: rgba(0,0,0,.35); --spot: rgba(255,122,200,.14);
  --pattern: rgba(255,170,220,.10);
}

/* ---- Part 3: use the names where the old CSS had fixed colors ---- */
.nav { background: var(--nav-bg); }
.secondary { background: var(--glass); }
.currently > div, .faq details, .notice { background: var(--glass-2); }
.card { background: linear-gradient(145deg, var(--card-top), var(--card-bottom)); }
.card:hover { border-color: var(--accent-line); }
.gallery-placeholder, .preview-frame { border-color: var(--dashed); }
.bubble { border-color: var(--bubble); }
body {
  background:
    radial-gradient(circle at 80% 10%, var(--glow-1), transparent 28rem),
    radial-gradient(circle at 10% 40%, var(--glow-2), transparent 25rem),
    var(--bg);
}
@media (max-width: 760px) { nav { background: var(--nav-bg-solid); } }

/* Background styles from the theme panel (the html tag gets data-bg) */
html[data-bg="solid"] body { background: var(--bg); }
html[data-bg="dots"] body {
  background: radial-gradient(var(--pattern) 1px, transparent 1px) 0 0 / 22px 22px, var(--bg);
}
html[data-bg="grid"] body {
  background:
    linear-gradient(var(--pattern) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--pattern) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg);
}

/* ---- The theme button and panel (script.js builds them) ---- */
.theme-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--nav-bg-solid); color: var(--text);
  font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 8px 24px var(--shadow);
}
.theme-panel {
  position: fixed; right: 1rem; bottom: 4.6rem; z-index: 30;
  width: min(92vw, 320px); padding: 1.1rem;
  border-radius: 22px; border: 1px solid var(--border);
  background: var(--nav-bg-solid); color: var(--text);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px var(--shadow);
}
.theme-panel[hidden] { display: none; }
.theme-title { font-weight: 800; }
.theme-label {
  color: var(--muted); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; margin: .9rem 0 .4rem;
}
.theme-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.theme-row button {
  font: inherit; font-size: .8rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--glass); color: var(--text);
  border-radius: 999px; padding: .45rem .8rem;
}
.theme-row button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.theme-row input[type="color"] {
  width: 44px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: none;
}
.theme-fab:focus-visible, .theme-row button:focus-visible, .theme-row input:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
/* ==========================================================
   v3.7 PARTNERS  (paste at the very BOTTOM of style.css)
   Labels and cards for partners.html
   ========================================================== */
.badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .25rem .65rem;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  border: 1px solid var(--accent-line, rgba(120,232,255,.25));
  border-radius: 999px;
  color: var(--cyan);
}
.badge.featured { color: var(--purple); }
.partner-card .button { display: inline-block; margin-top: 1rem; }

.checklist { list-style: none; display: grid; gap: .6rem; max-width: 700px; }
.checklist li { position: relative; padding-left: 1.6rem; color: var(--muted); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); }
/* ==========================================================
   v3.7 / v3.8 ADS + SERVICES  (paste at the very BOTTOM of style.css)
   Needs the Partners block (3-partners.css) pasted first, because the
   labels use .badge from there.
   ========================================================== */

/* ---- Ad cards (ads.js builds them) ---- */
.ad-one { max-width: 560px; }
.ad-card .ad-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.ad-card .button { display: inline-block; margin-top: 1rem; }
.section[hidden] { display: none; }

/* ---- Services page ---- */
.currency-toggle { display: flex; gap: .4rem; margin: 0 0 2rem; }
.currency-toggle button {
  font: inherit; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--border);
  background: var(--glass, rgba(255,255,255,.04));
  color: var(--text);
  border-radius: 999px; padding: .5rem 1rem;
}
.currency-toggle button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.currency-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: .8rem 0 .2rem; color: var(--text); }
.price-note { color: var(--muted); font-size: .8rem; }

.service-list { list-style: none; display: grid; gap: .45rem; margin-top: .8rem; }
.service-list li { position: relative; padding-left: 1.2rem; color: var(--muted); font-size: .92rem; }
.service-list li::before { content: "•"; position: absolute; left: .2rem; color: var(--cyan); }
/* ==========================================================
   v3.8 SIGNATURE EFFECTS  (paste at the very BOTTOM of style.css,
   after the other blocks). Mouse devices only, never with reduced motion.
   ========================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* Home + Trading: a soft spotlight follows the mouse in the hero */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 28%),
                var(--spot, rgba(120,232,255,.10)), transparent 60%);
  }

  /* Projects, Games, Lab, Trading: cards tilt a little toward the mouse */
  .card[data-tilt] {
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  }
  .card[data-tilt]:hover { --lift: -4px; }
}

/* ---------- Page fade between pages (v2.1.1, restored) ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* ---------- About page gaming library ---------- */
.gaming-intro { color: var(--muted); max-width: 620px; margin: -1.2rem 0 2.5rem; }
.game-shelf { margin: 3.2rem 0; }
.game-shelf-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.game-shelf-heading .eyebrow { margin-bottom:.25rem; }
.game-shelf-heading h3 { font-size:clamp(1.35rem,3vw,1.9rem); letter-spacing:-.035em; }
.shelf-note { color:var(--muted); font-size:.75rem; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:.9rem; }
.game-tile { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,var(--card-top),var(--card-bottom)); }
.game-art { aspect-ratio:1 / 1; display:grid; place-items:center; overflow:hidden; color:#fff; font-weight:900; font-size:2rem; letter-spacing:-.06em; background:linear-gradient(135deg,#24324d,#101522); }
.game-art span { text-shadow:0 2px 16px rgba(0,0,0,.35); }
.game-tile-copy { padding:.75rem .8rem .25rem; }
.game-tile h4 { font-size:.88rem; line-height:1.3; }
.game-tile-copy p,.game-details { color:var(--muted); font-size:.72rem; }
.game-details { margin:0 .8rem .8rem; }
.game-details summary { cursor:pointer; color:var(--cyan); }
.game-details p { margin-top:.35rem; }
.game-featured { border-color:var(--accent-line); }
.game-featured .game-art { aspect-ratio:1.08 / 1; }
.art-roblox { background:linear-gradient(145deg,#59677c,#252d3a); }
.art-rio { background:linear-gradient(145deg,#d96d4d,#512b4c); }
.art-cod { background:linear-gradient(145deg,#a67b43,#242d2b); }
.art-minecraft { background:linear-gradient(145deg,#4b8c53,#263d55); }
.art-ml { background:linear-gradient(145deg,#3976a7,#342c66); }
.art-mech { background:linear-gradient(145deg,#6b777e,#343c52); }
.art-pvz { background:linear-gradient(145deg,#6b9d46,#285b4b); }
.art-brawl { background:linear-gradient(145deg,#e0a53f,#a43d35); }
.art-among { background:linear-gradient(145deg,#c85a62,#4b283e); }
.art-plato { background:linear-gradient(145deg,#4f82b8,#27385c); }
.art-monopoly { background:linear-gradient(145deg,#4c9d7d,#244d49); }
.art-clash { background:linear-gradient(145deg,#5589c5,#4d386f); }
.art-darkrise { background:linear-gradient(145deg,#564b72,#191b31); }
.art-mob { background:linear-gradient(145deg,#d28b4a,#594070); }
.art-word { background:linear-gradient(145deg,#6e9cbd,#385078); }
.art-battlebay { background:linear-gradient(145deg,#3b8baf,#24415c); }
.art-stickhero { background:linear-gradient(145deg,#9d6b4c,#46334c); }
.art-idlecat { background:linear-gradient(145deg,#bd8c64,#59405a); }
.art-bling { background:linear-gradient(145deg,#c69a4f,#644b8d); }
.art-dislyte { background:linear-gradient(145deg,#bd477b,#3b3478); }
.art-snacky { background:linear-gradient(145deg,#d38a50,#a84f67); }
.art-coin { background:linear-gradient(145deg,#c5a34a,#66532e); }
.art-foodie { background:linear-gradient(145deg,#d36f58,#7b3d65); }
.art-alchemy { background:linear-gradient(145deg,#5a9b85,#3a4777); }
.emulator-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.75rem; }
.emulator-chip { display:flex; align-items:center; gap:.8rem; padding:.85rem; border:1px solid var(--border); border-radius:15px; background:var(--glass-2); }
.emulator-mark { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:12px; background:var(--glass); color:var(--cyan); font-weight:900; }
.emulator-chip strong,.emulator-chip small { display:block; }
.emulator-chip strong { font-size:.85rem; }
.emulator-chip small { color:var(--muted); font-size:.7rem; }
.now-playing-card { display:flex; align-items:center; gap:.7rem; min-width:0; width:100%; padding:1rem; text-align:left; color:var(--text); font:inherit; border:1px solid var(--border); border-radius:18px; background:var(--glass-2); cursor:pointer; }
.now-playing-card:hover { border-color:var(--accent-line); }
.now-playing-copy { min-width:0; flex:1; }
.now-playing-copy > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now-playing-album { color:var(--muted); font-size:.72rem; }
.now-playing-artwork { width:52px; height:52px; object-fit:cover; border-radius:10px; }
.now-playing-open { color:var(--cyan); }
.spotify-confirm { width:min(92vw,390px); margin:auto; padding:1.5rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:22px; }
/* Keep every native prompt centred, contained, and scrollable without moving the page behind it. */
dialog[open] { margin:auto; max-height:90vh; max-height:90dvh; overflow-y:auto; overscroll-behavior:contain; }
body.modal-scroll-locked { overscroll-behavior:none; }
.spotify-confirm::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(4px); }
.spotify-confirm h3 { margin-bottom:.5rem; }
.spotify-confirm form > p:not(.eyebrow) { color:var(--muted); }
.spotify-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.4rem; }
.spotify-actions button { cursor:pointer; font:inherit; }
@media (max-width:760px) {
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .game-shelf { margin:2.4rem 0; }
  .game-shelf-heading { align-items:flex-start; }
  .shelf-note { text-align:right; }
}

/* Keep the two About status cards balanced on wider screens. */
@media (min-width: 761px) { .about-currently { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------- Services: How it works / game-library style ---------- */
.service-process-intro { color:var(--muted); max-width:620px; margin:-1rem 0 2rem; }
.service-process-shelf { margin:2.2rem 0 0; }
.service-process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.service-step { transition:transform .2s,border-color .2s,box-shadow .25s; }
.service-step-art {
  aspect-ratio:1.55 / 1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:1rem 1.1rem;
  position:relative;
  isolation:isolate;
}
.service-step-art::after {
  content:"";
  position:absolute;
  width:118px;height:118px;
  right:-22px;bottom:-35px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(255,255,255,.035),0 0 0 34px rgba(255,255,255,.025);
  z-index:-1;
}
.service-step-art span { font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; letter-spacing:-.08em; }
.service-step-art small { font-size:.62rem; font-weight:800; letter-spacing:.16em; opacity:.82; }
.service-step .game-tile-copy { padding:1rem 1rem 1.1rem; }
.service-step h4 { font-size:1rem; margin-bottom:.35rem; }
.service-step .game-tile-copy p { font-size:.82rem; line-height:1.55; }
.service-step-brief .service-step-art { background:linear-gradient(135deg,#287f83,#193d55); }
.service-step-quote .service-step-art { background:linear-gradient(135deg,#5b65a8,#302d63); }
.service-step-deposit .service-step-art { background:linear-gradient(135deg,#9a7041,#533d35); }
.service-step-build .service-step-art { background:linear-gradient(135deg,#347d62,#214c49); }
.service-step-revisions .service-step-art { background:linear-gradient(135deg,#a45d79,#553b69); }
.service-step-delivery .service-step-art { background:linear-gradient(135deg,#477b9e,#293e65); }
@media(max-width:760px) {
  .service-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
  .service-step-art { aspect-ratio:1.35 / 1; padding:.85rem; }
  .service-step .game-tile-copy { padding:.8rem .85rem 1rem; }
}
@media(max-width:420px) {
  .service-process-grid { grid-template-columns:1fr 1fr; }
  .service-step-art span { font-size:2.5rem; }
}
@media(prefers-reduced-motion:reduce) {
  .service-step { transition:none; }
}

 
/* ---------- Gaming library: Need to play again artwork ---------- */
.art-genshin { background:linear-gradient(145deg,#4f9c8a,#274d68); }
.art-starrail { background:linear-gradient(145deg,#5866a6,#282f55); }
.art-solo { background:linear-gradient(145deg,#4b547d,#171d32); }
.art-seven { background:linear-gradient(145deg,#bd8a4e,#69434b); }
.art-clashofclans { background:linear-gradient(145deg,#4b9a62,#285b43); }
.art-ark { background:linear-gradient(145deg,#9a744b,#394c3e); }
.art-skullgirls { background:linear-gradient(145deg,#a85e77,#50304e); }


/* ---------- Support page: WiPay QR prompt ---------- */
.wipay-dialog { max-height: min(90vh, 760px); overflow-y: auto; }
.wipay-dialog form { display: grid; gap: .7rem; }
.wipay-dialog .eyebrow { margin: 0; }
.wipay-dialog h3 { margin: 0; }
.wipay-dialog form > p:not(.eyebrow) { color: var(--muted); }
.wipay-qr { display: block; width: min(100%, 320px); height: auto; margin: .35rem auto; border-radius: 12px; background: #fff; }

/* ---------- Portfolio, case study, and roadmap (v2.8.0) ---------- */
.section-lead{max-width:760px;color:var(--muted);font-size:1.05rem;margin-top:-1rem;line-height:1.8}
.project-status-key{display:flex;flex-wrap:wrap;gap:.65rem 1.2rem;margin-top:1.8rem;color:var(--muted);font-size:.78rem}
.project-status-key span{display:inline-flex;align-items:center;gap:.45rem}
.status-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--muted)}
.status-dot.status-live{background:#65d6a1}.status-dot.status-progress{background:var(--cyan)}.status-dot.status-concept{background:#b59cff}.status-dot.status-planned{background:#e5b86c}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.project-card{display:flex;flex-direction:column;min-height:290px}
.project-card-top,.roadmap-heading{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.project-status{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.3rem .6rem;font-size:.62rem;font-weight:800;letter-spacing:.09em;white-space:nowrap}
.project-status.status-live{color:#65d6a1}.project-status.status-progress{color:var(--cyan)}.project-status.status-concept{color:#b59cff}.project-status.status-planned{color:#e5b86c}
.project-card h3{margin:1.1rem 0 .5rem;font-size:1.45rem}
.project-card p,.project-note p,.roadmap-footer-note p{color:var(--muted)}
.project-tech{color:var(--muted);font-size:.72rem;letter-spacing:.04em;margin-top:1rem}
.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin-top:auto;padding-top:1.4rem}
.project-actions .button{font-size:.76rem;padding:.65rem .85rem}
.project-text-link{color:var(--cyan);font-size:.82rem;font-weight:700}.project-text-link:hover{text-decoration:underline;text-underline-offset:4px}
.project-note{max-width:800px}.project-note h3{margin-bottom:.5rem}.project-note .project-text-link{display:inline-block;margin-top:1rem}
.roadmap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.roadmap-column h3{margin:1rem 0 .8rem}.roadmap-column ul,.case-study-section ul{padding-left:1.2rem;color:var(--muted)}
.roadmap-column li,.case-study-section li{margin:.55rem 0}.roadmap-index{color:var(--cyan);font-size:.78rem;font-weight:800;letter-spacing:.12em}
.roadmap-note{max-width:780px;margin-top:1.4rem;color:var(--muted);font-size:.85rem}
.roadmap-footer-note{max-width:800px;margin-top:1rem}.roadmap-footer-note h3{margin-bottom:.5rem}.roadmap-footer-note .project-text-link{display:inline-block;margin-top:1rem}
.case-study{max-width:1000px}.case-study-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2rem 0 3rem}
.case-study-meta div{display:grid;gap:.3rem}.case-study-meta span{color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.12em}.case-study-meta strong{font-size:.9rem}
.case-study-section{max-width:780px;margin:2.5rem 0}.case-study-section h3{margin-bottom:.8rem;font-size:1.35rem}.case-study-section p{color:var(--muted);margin:.75rem 0;line-height:1.85}
.case-study-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:3rem}.case-study-actions .button{font-size:.8rem}
@media(max-width:760px){.project-grid,.roadmap-grid{grid-template-columns:1fr}.case-study-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card{min-height:0}.project-actions{padding-top:1rem}}
@media(max-width:420px){.case-study-meta{grid-template-columns:1fr}.project-card-top{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}