:root {
  --bg: #f7f4ef;
  --panel: rgba(255, 255, 255, .78);
  --panel2: rgba(255, 255, 255, .94);
  --text: #1f2024;
  --muted: #65615b;
  --gold: #bd8423;
  --purple: #7552d8;
  --cyan: #168bac;
  --blue: #9b6a18;
  --green: #23855e;
  --orange: #bc681b;
  --border: rgba(89, 69, 38, .16);
}

html {
  background: #f7f4ef;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(218, 181, 111, .24), transparent 30rem),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .98), transparent 34rem),
    linear-gradient(180deg, #fcfbf9 0%, #f1ede7 58%, #faf8f4 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at -8% 104%, transparent 0 55%, rgba(255,255,255,.8) 55.2% 55.7%, transparent 55.9%),
    radial-gradient(110% 88% at -2% 105%, transparent 0 63%, rgba(185,132,40,.48) 63.1% 63.35%, rgba(255,255,255,.9) 63.5% 64%, transparent 64.2%),
    radial-gradient(104% 84% at 101% -8%, transparent 0 65%, rgba(192,139,49,.4) 65.1% 65.35%, rgba(255,255,255,.82) 65.5% 66%, transparent 66.2%),
    repeating-radial-gradient(ellipse at 0 100%, transparent 0 17px, rgba(128,122,113,.12) 18px 19px, transparent 20px 26px);
  opacity: .78;
}

body > * { position: relative; z-index: 1; }

.nav {
  background: rgba(252, 251, 249, .92);
  border-bottom-color: rgba(164, 116, 37, .2);
  box-shadow: 0 10px 36px rgba(75, 58, 34, .06);
}

.brand, .links a, h1, h2, h3, a, footer a { color: var(--text); }
.links a:hover { color: #a76f18; }

.brand-mark {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(177, 126, 38, .25) !important;
  border-radius: 13px !important;
  background: #f7f4ef url('/assets/lieta-studios/favicon.png') center / cover no-repeat !important;
  box-shadow: 0 7px 18px rgba(65, 49, 27, .12) !important;
  object-fit: cover;
  opacity: 1;
  color: transparent;
}

img.brand-mark { object-position: -9999px -9999px; }

.hero-logo-stage {
  position: relative;
  width: min(330px, 72vw);
  margin: 0 0 24px;
  perspective: 900px;
  isolation: isolate;
}

.hero-logo-stage::before {
  content: "";
  position: absolute;
  inset: 20% 19%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 170, 60, .34), rgba(223, 170, 60, 0) 68%);
  filter: blur(13px);
  animation: ls-glow 3.8s ease-in-out infinite;
}

.hero-logo-stage::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,0) 42%, rgba(255,248,218,.62) 49%, rgba(255,255,255,0) 56%, transparent 68%);
  background-size: 240% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  animation: ls-sweep 6.5s ease-in-out infinite;
}

.hero-logo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid rgba(177, 126, 38, .2);
  border-radius: 28px;
  box-shadow: 0 28px 75px rgba(68, 53, 30, .16), 0 2px 0 rgba(255,255,255,.8) inset;
  transform-origin: 50% 55%;
  will-change: transform, filter;
  animation: ls-float 7s ease-in-out infinite;
}

@keyframes ls-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
  25% { transform: translate3d(0, -5px, 0) rotateX(1.2deg) rotateY(-1.6deg); }
  50% { transform: translate3d(0, -9px, 0) rotateX(-.8deg) rotateY(1.4deg); }
  75% { transform: translate3d(0, -4px, 0) rotateX(.7deg) rotateY(.8deg); }
}

@keyframes ls-sweep {
  0%, 20% { background-position: 150% 0; opacity: 0; }
  35% { opacity: .75; }
  55% { background-position: -60% 0; opacity: .2; }
  56%, 100% { background-position: -60% 0; opacity: 0; }
}

@keyframes ls-glow {
  0%, 100% { opacity: .42; transform: scale(.92); }
  50% { opacity: .88; transform: scale(1.08); }
}

.card {
  background: rgba(255,255,255,.8);
  border-color: rgba(113, 85, 43, .16);
  box-shadow: 0 16px 44px rgba(75, 57, 32, .07);
  backdrop-filter: blur(14px);
}

.card.highlight {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,225,201,.58));
  border-color: rgba(181, 127, 38, .28);
}

.badge, .pill, .policy-nav a, .secondary {
  background: rgba(255,255,255,.68);
  border-color: rgba(166, 117, 36, .25);
  color: #805817;
}

.primary {
  background: linear-gradient(135deg, #d8a744, #a86e16);
  color: #241a0b !important;
  box-shadow: 0 9px 22px rgba(143, 93, 20, .2);
}

main a:not(.button):not(.social-pill),
main h2 a {
  color: #714a10;
}

main h2 { color: #1f2024 !important; }

p, .feature-list, footer { color: var(--muted); }
footer { border-top-color: rgba(113, 85, 43, .15); }

/* High-contrast controls for legacy game pages on the light studio theme. */
details {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(166,117,36,.28) !important;
  box-shadow: 0 10px 28px rgba(75,57,32,.05);
}

summary {
  color: #2a2722 !important;
}

summary::marker { color: #a86e16; }

.social-pill {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(166,117,36,.3) !important;
  color: #2a2722 !important;
  box-shadow: 0 7px 18px rgba(75,57,32,.06);
}

.social-pill:hover,
.social-pill:focus-visible {
  background: #f4e7cb !important;
  color: #68440e !important;
  border-color: rgba(166,117,36,.55) !important;
}

@media (max-width: 950px) {
  .nav-inner { gap: 8px; padding: 12px 0 10px; }
  .brand-mark { width: 44px !important; height: 44px !important; }
  .links {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 22px 7px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a { white-space: nowrap; font-size: 13px; }
  .hero { padding-top: 28px; }
  .hero-logo-stage {
    width: min(260px, 70vw);
    margin-left: auto;
    margin-right: auto;
  }
  .hero-logo,
  .hero-logo-stage::after {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-logo-stage::before,
  .hero-logo-stage::after {
    animation: none !important;
  }
  .hero-logo { transform: none !important; }
  .hero-logo-stage::after { opacity: 0; }
}