@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root {
  color-scheme: light;
  --bg: #f7f3ff;
  --paper: #fff5df;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-2: rgba(248, 241, 255, 0.62);
  --text: #221829;
  --muted: #6a5f72;
  --line: rgba(86, 58, 114, 0.18);
  --amethyst: #7b3cc8;
  --obsidian: #24152f;
  --violet: #9257cc;
  --rose: #d8629d;
  --gold: #d6a13b;
  --wood: #9a6b3f;
  --shadow: 0 20px 54px rgba(49, 24, 70, 0.16);
}

* { box-sizing: border-box; }

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  padding-bottom: calc(4.55rem + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(236,247,255,.12), rgba(247,243,255,.32) 48%, rgba(255,250,239,.58)),
    url("./assets/hero-voxel-gfj.png") center top / cover no-repeat fixed,
    linear-gradient(180deg, #ecf7ff, var(--bg));
  color: var(--text);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(123, 60, 200, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 60, 200, .04) 1px, transparent 1px);
  background-size: 26px 26px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(255,255,255,.25)),
    radial-gradient(circle at 12% 18%, rgba(111,209,255,.14), transparent 11rem),
    radial-gradient(circle at 88% 12%, rgba(226,102,190,.14), transparent 12rem),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.2) 52%, rgba(255,248,237,.58));
  pointer-events: none;
}

#sky-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { overflow-wrap: break-word; }
p { margin: .42rem 0 0; color: var(--muted); }
h1 { margin: .3rem 0 0; font-size: clamp(1.65rem, 5vw, 3.3rem); line-height: .98; letter-spacing: 0; }
h2 { margin: .35rem 0 0; font-size: 1.08rem; line-height: 1.12; letter-spacing: 0; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.96)),
    var(--bg);
  transition: opacity .32s ease, visibility .32s ease;
}

.site-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-card {
  display: grid;
  justify-items: center;
  gap: .48rem;
  min-width: min(15rem, 100%);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 1.05rem 1.2rem;
  background: rgba(255,255,255,.78);
  box-shadow: 0 26px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(145%);
}

.site-loader-card strong {
  color: #111827;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: .86rem;
}

.site-loader-card small {
  color: #64748b;
  font-weight: 850;
}

.loader-logo {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(45,212,191,.88), rgba(99,102,241,.86)),
    url("./assets/gfj-network-logo.png") center / cover no-repeat;
  box-shadow: 0 16px 38px rgba(79,70,229,.18);
  animation: loaderBreath 1.15s ease-in-out infinite;
}

body.logo-guard img[src$="gfj-network-logo.png"] {
  background:
    linear-gradient(135deg, rgba(45,212,191,.16), rgba(123,60,200,.16)),
    rgba(255,255,255,.72);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

body.logo-guard img[src$="gfj-network-logo.png"].is-loaded {
  opacity: 1;
  transform: scale(1);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .54rem .7rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(130%);
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .52rem;
}

.brand img {
  width: 2.18rem;
  height: 2.18rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  contain: paint;
  box-shadow: 0 6px 14px rgba(123, 60, 200, .18);
}

.brand strong,
.brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand strong {
  font-size: .94rem;
  line-height: 1;
  font-family: "Press Start 2P", "Courier New", monospace;
}

.brand small {
  color: var(--muted);
  font-size: .68rem;
}

.desktop-nav { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: .32rem;
}

.collab-bridge {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto 1.38rem;
  align-items: center;
  gap: .32rem;
  min-height: 2.16rem;
  border: 1px solid rgba(123, 60, 200, .24);
  border-radius: 14px;
  padding: .34rem .42rem .34rem .56rem;
  color: #24152f;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62)),
    linear-gradient(135deg, rgba(139,217,255,.38), rgba(242,195,95,.28));
  box-shadow: 0 10px 22px rgba(36,21,47,.1), inset 0 0 0 1px rgba(255,255,255,.58);
  font-size: .58rem;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
}

.collab-bridge::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  transform: skewX(-18deg);
  transition: transform .42s ease;
}

.collab-bridge:hover::after {
  transform: translateX(310%) skewX(-18deg);
}

.collab-bridge img {
  width: 1.38rem;
  height: 1.38rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(36,21,47,.14);
}

.language-switch {
  display: flex;
  gap: .24rem;
}

.language-switch button,
.soft,
.tabs button,
.chips button {
  min-height: 2.16rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .46rem .62rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  color: #31543b;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(36,33,25,.08), inset 0 0 0 1px rgba(255,255,255,.42);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.soft:hover,
.primary:hover,
.language-switch button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}

.language-switch button.active,
.tabs button.active {
  border-color: rgba(123, 60, 200, .32);
  background: #f1e7ff;
  color: var(--amethyst);
}

.account-link { display: none; }

.mobile-menu-toggle { display: none; }

.mobile-nav {
  position: fixed;
  left: .7rem;
  right: .7rem;
  bottom: calc(.58rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .24rem;
  padding: .32rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(130%);
}

.mobile-nav a {
  display: grid;
  min-height: 2.55rem;
  place-items: center;
  gap: .06rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 850;
}

.mobile-nav span { font-size: .95rem; line-height: 1; }

.mobile-nav-icon svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-nav a.active {
  background: #f1e7ff;
  color: var(--amethyst);
}

.collab-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.44), transparent 8rem),
    radial-gradient(circle at 50% 54%, rgba(242,195,95,.2), transparent 13rem),
    radial-gradient(circle at 50% 120%, rgba(139,217,255,.34), transparent 18rem),
    linear-gradient(135deg, #10081a, #342052 54%, #07040b);
  animation: collabFade 2.25s ease both;
}

.collab-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(5.8rem, 10.4rem) auto minmax(5.8rem, 10.4rem);
  gap: clamp(.75rem, 4vw, 2rem);
  align-items: center;
  width: min(42rem, calc(100vw - 2rem));
}

.collab-logo-card {
  display: grid;
  gap: .7rem;
  justify-items: center;
  animation: collabCard 1.12s cubic-bezier(.2, .9, .24, 1.2) both;
}

.collab-logo-card:nth-child(3) {
  animation-delay: .08s;
}

.collab-logo-card img {
  width: clamp(5.1rem, 18vw, 9.4rem);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 28%;
  object-fit: contain;
  padding: .6rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 2rem rgba(139,217,255,.48), 0 0 4.6rem rgba(242,195,95,.32);
  animation: collabLogoPulse 1.9s ease-in-out infinite alternate;
}

.collab-logo-card strong,
.collab-transition p {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(.52rem, 1.6vw, .72rem);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}

.collab-x {
  display: grid;
  place-items: center;
  width: clamp(2.8rem, 10vw, 4.8rem);
  aspect-ratio: 1;
  border-radius: 18px;
  color: #24152f;
  background: linear-gradient(135deg, #8bd9ff, #f2c35f);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(1.35rem, 5vw, 2.8rem);
  box-shadow: 0 0 2rem rgba(139,217,255,.6);
  animation: collabX 1.55s ease both;
}

.collab-beam,
.collab-particles {
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

.collab-beam {
  z-index: 1;
  background:
    linear-gradient(112deg, transparent 36%, rgba(139,217,255,.52) 43%, rgba(255,255,255,.88) 50%, rgba(242,195,95,.54) 57%, transparent 64%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 9rem),
    repeating-linear-gradient(90deg, transparent 0 2.2rem, rgba(139,217,255,.18) 2.2rem 2.32rem, transparent 2.32rem 4.5rem);
  transform: translateX(-36%) rotate(-9deg);
  animation: collabBeam 2.05s ease-out both;
}

.collab-particles {
  z-index: 2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 .08rem, transparent .1rem),
    radial-gradient(circle, rgba(139,217,255,.95) 0 .08rem, transparent .11rem),
    radial-gradient(circle, rgba(242,195,95,.95) 0 .07rem, transparent .1rem);
  background-size: 3rem 3rem, 4.4rem 4.4rem, 5.2rem 5.2rem;
  filter: drop-shadow(0 0 .65rem rgba(139,217,255,.62));
  animation: collabParticles 2.15s linear both;
}

.collab-transition p {
  position: absolute;
  bottom: clamp(2rem, 8vh, 4.5rem);
  z-index: 4;
  letter-spacing: 0;
  opacity: .82;
}

@keyframes collabFade {
  0% { opacity: 0; }
  16%, 78% { opacity: 1; }
  100% { opacity: .98; }
}

@keyframes collabCard {
  0% { opacity: 0; transform: translateY(1rem) scale(.82); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes collabX {
  0% { opacity: 0; transform: scale(.2) rotate(-120deg); }
  55% { opacity: 1; transform: scale(1.15) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes collabBeam {
  to { transform: translateX(36%) rotate(-9deg); }
}

@keyframes collabParticles {
  to { transform: translate3d(8%, -8%, 0) scale(1.08); opacity: .35; }
}

@keyframes collabLogoPulse {
  to { box-shadow: 0 0 2.5rem rgba(255,255,255,.72), 0 0 5.8rem rgba(139,217,255,.58), 0 0 8rem rgba(242,195,95,.34); }
}

.page-shell {
  width: min(1080px, calc(100% - 1.1rem));
  margin: 0 auto;
  padding: .75rem 0 1.6rem;
}

.domain-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  margin: 0 0 .85rem;
  border: 1px solid rgba(123, 60, 200, .22);
  border-radius: 18px;
  padding: .82rem .95rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,241,255,.78)),
    linear-gradient(90deg, rgba(139,217,255,.32), rgba(242,195,95,.28));
  box-shadow: 0 14px 34px rgba(49, 24, 70, .1), inset 0 1px 0 rgba(255,255,255,.86);
}

.domain-notice-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(123, 60, 200, .1);
  color: #6d2fbd;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.domain-notice-close:hover,
.domain-notice-close:focus-visible {
  background: rgba(123, 60, 200, .18);
  transform: scale(1.08);
}

.domain-notice strong {
  display: block;
  color: #24152f;
  font-size: .9rem;
  font-weight: 950;
}

.domain-notice p {
  margin-top: .18rem;
  color: #5f5368;
  font-size: .86rem;
}

.domain-notice span {
  display: inline-block;
  border-radius: 999px;
  padding: .08rem .42rem;
  background: rgba(123, 60, 200, .12);
  color: #6d2fbd;
  font-weight: 950;
}

.site-footer {
  display: grid;
  gap: .8rem;
  width: min(1080px, calc(100% - 1.1rem));
  margin: 0 auto 1.1rem;
  border-top: 1px solid rgba(86, 58, 114, .18);
  padding: 1rem 0 0;
  color: #5f5368;
}

.site-footer strong {
  display: block;
  color: #221829;
  font-size: .86rem;
}

.site-footer p {
  margin-top: .18rem;
  font-size: .78rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.site-footer a {
  border: 1px solid rgba(86, 58, 114, .16);
  border-radius: 999px;
  padding: .42rem .62rem;
  background: rgba(255,255,255,.58);
  color: #4f425a;
  font-size: .78rem;
  font-weight: 850;
}

.site-footer a:hover {
  background: #f1e7ff;
  color: var(--amethyst);
}

.picture-workshop {
  display: grid;
  gap: 1rem;
}

.picture-eyebrow {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(45, 157, 130, .22);
  border-radius: 999px;
  padding: .22rem .52rem;
  background: rgba(45, 157, 130, .08);
  color: #166c60;
  font-size: .68rem;
  font-weight: 950;
}

.picture-head,
.picture-rules,
.picture-card,
.picture-link-required {
  border: 1px solid rgba(86, 58, 114, .14);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 42px rgba(35, 25, 66, .09);
}

.picture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem;
}

.picture-console {
  position: relative;
  overflow: hidden;
  border-color: rgba(42, 96, 87, .16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
    linear-gradient(135deg, rgba(45,157,130,.16), rgba(104,215,255,.12));
}

.picture-console::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2d9d82, #28bad0, #7b3cc8);
}

.picture-head h3,
.picture-rules h3,
.picture-link-required h3 {
  margin: 0 0 .25rem;
  color: #221829;
}

.picture-head p,
.picture-rules p,
.picture-link-required p,
.picture-quality {
  margin: 0;
  color: #5f5368;
  font-size: .9rem;
  line-height: 1.55;
}

.picture-rules,
.picture-link-required {
  display: grid;
  gap: 1rem;
  padding: 1.05rem;
}

.picture-form-head {
  display: grid;
  gap: .35rem;
}

.checkline {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #372a42;
  font-weight: 800;
}

.picture-wizard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.picture-wizard label,
.crop-controls label {
  display: grid;
  gap: .35rem;
  color: #372a42;
  font-size: .78rem;
  font-weight: 900;
}

.picture-wizard input,
.picture-wizard select {
  min-height: 44px;
  border: 1px solid rgba(86, 58, 114, .18);
  border-radius: 14px;
  padding: .6rem .72rem;
  background: rgba(255,255,255,.86);
  color: #221829;
  font: inherit;
}

.crop-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.picture-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: .8rem;
}

.picture-preview-grid figure {
  display: grid;
  gap: .45rem;
  margin: 0;
  min-width: 0;
}

.picture-preview-grid span {
  color: #5f5368;
  font-size: .78rem;
  font-weight: 900;
}

.picture-preview-grid img,
.picture-preview-grid canvas,
.picture-card img {
  width: 100%;
  border: 1px solid rgba(86, 58, 114, .14);
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
}

.picture-preview-grid img {
  aspect-ratio: 1 / 1;
}

.picture-preview-grid canvas {
  height: auto;
  image-rendering: pixelated;
}

.picture-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
}

.picture-inline-note {
  border: 1px solid rgba(214, 161, 59, .22);
  border-radius: 12px;
  padding: .72rem .82rem;
  background: rgba(255, 248, 232, .84);
  color: #785216;
  font-weight: 800;
}

.picture-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .85rem 0;
}

.picture-summary article {
  border: 1px solid rgba(42, 96, 87, .16);
  border-radius: 12px;
  padding: .72rem .78rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.68)),
    linear-gradient(135deg, rgba(45, 157, 130, .12), rgba(104, 215, 255, .12));
  box-shadow: 0 10px 24px rgba(35, 25, 66, .08);
}

.picture-summary span,
.picture-summary b {
  display: block;
}

.picture-summary span {
  color: #52606b;
  font-size: .72rem;
  font-weight: 900;
}

.picture-summary b {
  margin-top: .1rem;
  color: #18212b;
  font-size: 1.45rem;
  line-height: 1;
}

.picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
}

.picture-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  min-width: 0;
  border: 1px solid rgba(42, 96, 87, .14);
  border-radius: 14px;
  padding: .82rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  box-shadow: 0 14px 34px rgba(35, 25, 66, .1);
}

.picture-card.is-ready {
  border-color: rgba(20, 184, 166, .28);
}

.picture-card figure {
  position: relative;
  margin: 0;
  min-width: 0;
}

.picture-card img {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

.picture-card figcaption {
  position: absolute;
  left: .35rem;
  bottom: .35rem;
  border-radius: 999px;
  padding: .16rem .42rem;
  background: rgba(15, 23, 42, .72);
  color: white;
  font-size: .64rem;
  font-weight: 950;
}

.picture-card-main {
  min-width: 0;
}

.picture-card strong,
.picture-card span,
.picture-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.picture-card strong {
  color: #221829;
  line-height: 1.15;
}

.picture-card span,
.picture-card small {
  margin-top: .16rem;
  color: #5f5368;
  font-size: .78rem;
}

.picture-statuses {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.picture-placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}

.picture-placement-actions button {
  min-height: 2.1rem;
  padding: .38rem .62rem;
  font-size: .78rem;
}

.picture-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.picture-empty {
  grid-column: 1 / -1;
}

.admin-body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,242,255,.78)),
    radial-gradient(circle at 10% 10%, rgba(216,98,157,.14), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(123,60,200,.14), transparent 30%);
}

.gfj-admin-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0;
}

.gfj-admin-login {
  width: min(460px, 100%);
  margin: min(12vh, 5rem) auto 0;
  border: 1px solid rgba(86, 58, 114, .16);
  border-radius: 24px;
  padding: clamp(1.1rem, 4vw, 1.55rem);
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 80px rgba(31, 21, 45, .14);
}

.gfj-admin-login > img {
  width: 4rem;
  height: 4rem;
  border-radius: 14px;
  object-fit: cover;
}

.gfj-admin-login h1 {
  margin: .35rem 0 .35rem;
  color: #20152a;
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: .95;
}

.gfj-admin-login p:not(.kicker),
.gfj-admin-login small {
  color: #665672;
}

.gfj-admin-login form {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}

.gfj-admin-login input,
.gfj-admin-tools input,
.gfj-admin-tools select,
.gfj-admin-actions input,
.gfj-admin-actions select,
.gfj-admin-actions textarea,
.gfj-admin-section-head > input {
  min-height: 44px;
  border: 1px solid rgba(86, 58, 114, .18);
  border-radius: 14px;
  padding: .62rem .74rem;
  background: rgba(255,255,255,.9);
  color: #221829;
  font: inherit;
}

.gfj-admin-login [data-error="true"] {
  color: #b42318;
  font-weight: 900;
}

.gfj-admin-panel[hidden] {
  display: none;
}

.gfj-admin-topbar {
  position: sticky;
  top: .65rem;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(86, 58, 114, .16);
  border-radius: 20px;
  padding: .65rem;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 45px rgba(31, 21, 45, .12);
  backdrop-filter: blur(14px);
}

.gfj-admin-topbar > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .5rem;
  align-items: center;
}

.gfj-admin-topbar span {
  color: #665672;
  font-size: .82rem;
  font-weight: 900;
}

.gfj-admin-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}

.gfj-admin-metrics article,
.gfj-admin-row,
.gfj-admin-log-grid section {
  border: 1px solid rgba(86, 58, 114, .14);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 40px rgba(31, 21, 45, .08);
}

.gfj-admin-metrics article {
  padding: .78rem;
}

.gfj-admin-metrics span,
.gfj-admin-row p,
.admin-log-item span,
.admin-empty {
  color: #665672;
  font-size: .78rem;
}

.gfj-admin-metrics strong {
  display: block;
  margin-top: .2rem;
  color: #20152a;
  font-size: 1.7rem;
  line-height: 1;
}

.gfj-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
  margin: 0 0 1rem;
}

.gfj-admin-tabs button {
  border: 1px solid rgba(86, 58, 114, .16);
  border-radius: 999px;
  padding: .62rem .85rem;
  background: rgba(255,255,255,.72);
  color: #4f425a;
  font-weight: 950;
}

.gfj-admin-tabs button.is-active {
  background: linear-gradient(135deg, var(--amethyst), var(--rose));
  color: white;
}

.gfj-admin-section {
  display: none;
}

.gfj-admin-section.is-active {
  display: grid;
  gap: .8rem;
}

.gfj-admin-section-head {
  display: flex;
  justify-content: space-between;
  gap: .85rem;
  align-items: end;
}

.gfj-admin-section-head h2,
.gfj-admin-log-grid h3 {
  margin: 0;
  color: #20152a;
}

.gfj-admin-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .5rem;
}

.gfj-admin-list {
  display: grid;
  gap: .72rem;
}

.gfj-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: start;
  padding: .82rem;
}

.gfj-admin-row.admin-photo-row {
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

.admin-row-main {
  min-width: 0;
}

.admin-row-main strong,
.admin-code,
.admin-log-item strong {
  display: block;
  color: #20152a;
}

.admin-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: #8b35d6;
  overflow-wrap: anywhere;
}

.admin-row-main p {
  margin: .18rem 0 0;
  overflow-wrap: anywhere;
}

.admin-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .35rem;
}

.admin-flags span {
  border-radius: 999px;
  padding: .32rem .48rem;
  background: rgba(123,60,200,.08);
  color: #4f425a;
  font-size: .72rem;
  font-weight: 950;
}

.admin-flags .is-ok {
  background: rgba(20,184,166,.12);
  color: #0f766e;
}

.admin-flags .is-bad {
  background: rgba(225,29,72,.1);
  color: #be123c;
}

.gfj-admin-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .45rem;
  align-items: center;
}

.gfj-admin-actions.account-admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gfj-admin-actions label {
  display: grid;
  gap: .2rem;
  color: #5f5368;
  font-size: .75rem;
  font-weight: 900;
}

.gfj-admin-actions textarea {
  min-height: 70px;
  resize: vertical;
  flex: 1 1 260px;
}

.gfj-admin-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: .55rem .75rem;
  background: #23162d;
  color: #fff;
  font-weight: 950;
}

.gfj-admin-actions .danger,
.gfj-admin-topbar .danger,
.gfj-admin-tools .danger {
  background: #fff1f2;
  color: #be123c;
}

.admin-photo-preview {
  width: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.admin-photo-preview img {
  width: 112px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(86, 58, 114, .12);
}

.gfj-admin-row details {
  margin-top: .35rem;
}

.gfj-admin-row summary {
  color: #4f425a;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 950;
}

.gfj-admin-row code,
.admin-log-item code {
  display: block;
  max-height: 12rem;
  overflow: auto;
  margin-top: .35rem;
  border-radius: 12px;
  padding: .62rem;
  background: #1f1726;
  color: #f7ecff;
  font-size: .72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gfj-admin-log-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.gfj-admin-log-grid section {
  padding: .78rem;
}

.admin-log-item {
  border-top: 1px solid rgba(86, 58, 114, .12);
  padding: .55rem 0;
}

.picture-admin-toolbar {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 12rem minmax(14rem, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(86, 58, 114, .12);
  border-radius: 16px;
  padding: .72rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(35, 25, 66, .08);
}

.picture-admin-toolbar input,
.picture-admin-toolbar select {
  min-height: 44px;
  border: 1px solid rgba(86, 58, 114, .18);
  border-radius: 14px;
  padding: .6rem .72rem;
  background: rgba(255,255,255,.86);
  color: #221829;
  font: inherit;
}

.picture-admin-list {
  display: grid;
  gap: .8rem;
}

.picture-admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}

.picture-admin-metrics article,
.picture-admin-diagnostics article {
  border: 1px solid rgba(86, 58, 114, .14);
  border-radius: 12px;
  padding: .75rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
    linear-gradient(135deg, rgba(45,157,130,.12), rgba(104,215,255,.1));
  box-shadow: 0 10px 24px rgba(35, 25, 66, .08);
}

.picture-admin-diagnostics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: -0.25rem 0 1rem;
}

.picture-admin-diagnostics article.ok {
  border-color: rgba(20, 184, 166, .24);
}

.picture-admin-diagnostics article.warn {
  border-color: rgba(214, 161, 59, .28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
    linear-gradient(135deg, rgba(214,161,59,.16), rgba(225,29,72,.08));
}

.picture-admin-metrics span,
.picture-admin-metrics b,
.picture-admin-diagnostics span,
.picture-admin-diagnostics p {
  display: block;
}

.picture-admin-metrics span,
.picture-admin-diagnostics span {
  color: #5f5368;
  font-size: .74rem;
  font-weight: 900;
}

.picture-admin-diagnostics p {
  margin: .18rem 0 0;
  color: #221829;
  font-size: .84rem;
  line-height: 1.4;
}

.picture-admin-metrics b {
  margin-top: .16rem;
  color: #221829;
  font-size: 1.5rem;
}

.admin-picture-card {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) minmax(9rem, auto);
  gap: 1rem;
  align-items: start;
  min-width: 0;
  border: 1px solid rgba(42, 96, 87, .14);
  border-radius: 16px;
  padding: .95rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76));
  box-shadow: 0 16px 42px rgba(35, 25, 66, .1);
}

.admin-picture-preview {
  width: 136px;
  padding: 0;
  border: 1px solid rgba(42, 96, 87, .16);
  border-radius: 14px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}

.admin-picture-card img {
  display: block;
  width: 136px;
  aspect-ratio: 1 / 1;
  border-radius: 13px;
  object-fit: cover;
}

.admin-picture-main {
  min-width: 0;
}

.admin-picture-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .65rem;
}

.admin-picture-card strong,
.admin-picture-card span,
.admin-picture-card small,
.admin-picture-card p {
  display: block;
  margin: 0 0 .22rem;
  overflow-wrap: anywhere;
}

.admin-picture-card strong {
  color: #1f1726;
  font-size: 1.02rem;
  line-height: 1.15;
}

.admin-picture-card span,
.admin-picture-card small,
.admin-picture-card p {
  color: #5f5368;
  font-size: .78rem;
}

.admin-picture-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .45rem 0;
}

.admin-picture-badges span {
  border-radius: 999px;
  padding: .28rem .48rem;
  background: rgba(104, 215, 255, .14);
  color: #155e75;
  font-size: .7rem;
  font-weight: 950;
}

.admin-picture-badges .ok {
  background: rgba(20,184,166,.13);
  color: #0f766e;
}

.admin-picture-badges .warn {
  background: rgba(214,161,59,.16);
  color: #8a5a12;
}

.admin-picture-badges .danger {
  background: rgba(225,29,72,.1);
  color: #be123c;
}

.admin-picture-actions {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: .4rem;
}

.admin-picture-actions button {
  min-height: 2.35rem;
  border-radius: 12px;
  padding-inline: .72rem;
  white-space: nowrap;
}

.admin-picture-card textarea {
  width: 100%;
  min-height: 72px;
  margin-top: .55rem;
  border: 1px solid rgba(86, 58, 114, .18);
  border-radius: 10px;
  padding: .65rem;
  background: rgba(255,255,255,.86);
  color: #221829;
  font: inherit;
  resize: vertical;
}

.admin-picture-card details {
  margin-top: .35rem;
}

.admin-picture-card summary {
  color: #4f425a;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 900;
}

.picture-review-modal img {
  width: min(760px, 86vw);
  max-height: 72vh;
  border-radius: 18px;
  object-fit: contain;
  background: #fff;
}

.cookie-consent {
  position: fixed;
  left: .85rem;
  right: .85rem;
  bottom: calc(.85rem + env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  gap: .8rem;
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 8px;
  padding: .85rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 26px 80px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(150%);
  max-height: min(64svh, 25rem);
  overflow: auto;
}

.cookie-consent strong {
  color: #111827;
}

.cookie-consent p {
  max-width: 48rem;
  font-size: .86rem;
}

.cookie-consent nav {
  display: grid;
  gap: .45rem;
}

.privacy-grid {
  display: grid;
  gap: .75rem;
  margin-top: .85rem;
}

.privacy-card {
  display: grid;
  gap: .52rem;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  padding: .88rem;
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 48px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(14px) saturate(130%);
}

.privacy-card > span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #111827, #2dd4bf);
  color: white;
  font-weight: 950;
}

.privacy-card ul {
  display: grid;
  gap: .36rem;
  margin: .22rem 0 0;
  padding-left: 1.1rem;
  color: #4f425a;
}

.hero-stage {
  display: grid;
  gap: 1rem;
  align-items: center;
  min-height: min(42rem, calc(100svh - 7.8rem));
  padding: .8rem 0;
  max-width: 100%;
  overflow: hidden;
}

.hero-copy {
  display: grid;
  gap: .2rem;
}

.hero-copy p,
.panel-intro p,
.product p,
.support p {
  max-width: 36rem;
  font-size: .94rem;
  color: #5f5368;
}

.kicker {
  color: var(--amethyst);
  font-size: .69rem;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-actions {
  display: grid;
  gap: .48rem;
  margin-top: .92rem;
}

.primary,
.soft {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  max-width: 100%;
  border-radius: 16px;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.primary {
  min-height: 2.62rem;
  border: 2px solid rgba(34, 24, 41, .28);
  padding: .66rem .86rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(135deg, #2f6f52, #36a4b4 48%, #8b55d7);
  color: white;
  font-weight: 950;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.22), 0 14px 30px rgba(47, 111, 82, .24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.wide { width: 100%; margin-top: .65rem; }

.logo-stage {
  display: grid;
  justify-items: center;
  gap: .64rem;
  padding: .85rem;
}

.logo-stage img {
  width: clamp(5.4rem, 22vw, 8.6rem);
  max-width: 8.6rem;
  aspect-ratio: 1;
  display: block;
  border: 5px solid rgba(255,255,255,.8);
  border-radius: 50%;
  object-fit: cover;
  contain: paint;
  box-shadow: 0 22px 50px rgba(78, 54, 113, .16);
  animation: logoFloat 5.2s ease-in-out infinite;
}

.gfj-writer {
  display: grid;
  width: min(18rem, calc(100vw - 1rem));
  min-height: 7.7rem;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: .36rem .44rem;
  color: #33251a;
  font-family: "Press Start 2P", "Courier New", ui-monospace, monospace;
  font-size: clamp(1.05rem, 6vw, 2.1rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(255,255,255,.72);
}

.gfj-writer span {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 1.7rem;
  place-items: center;
  color: #6d6177;
  white-space: nowrap;
  animation: stackWord 6s ease-in-out infinite;
}

.gfj-writer span::before {
  content: attr(data-short);
  position: absolute;
  color: var(--amethyst);
  opacity: 0;
  transform: scale(1.12);
  animation: initialsOnly 6s ease-in-out infinite;
}

.gfj-writer span:nth-child(2),
.gfj-writer span:nth-child(2)::before { animation-delay: .18s; }
.gfj-writer span:nth-child(3),
.gfj-writer span:nth-child(3)::before { animation-delay: .36s; }

@keyframes stackWord {
  0%, 15% {
    max-width: 1ch;
    color: transparent;
    letter-spacing: 0;
    transform: translateY(0) scale(.96);
  }
  30%, 72% {
    max-width: 9ch;
    color: #6d6177;
    letter-spacing: 0;
    transform: translateY(0) scale(1);
  }
  88%, 100% {
    max-width: 1ch;
    color: transparent;
    transform: scale(.96);
  }
}

@keyframes initialsOnly {
  0%, 15%, 88%, 100% { opacity: 1; }
  30%, 72% { opacity: 0; }
}

@keyframes loaderBreath {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(1); }
  50% { transform: translateY(-3px) scale(1.04); filter: saturate(1.18); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes softRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.quick-grid,
.story-strip,
.account-grid,
.perk-grid,
.mode-map {
  display: grid;
  gap: .72rem;
  margin-top: .75rem;
}

.quick-card,
.mini,
.minecraft-window,
.book-panel,
.product,
.support,
.real-data,
.full-scroll,
.policy-screen {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(130%);
}

.quick-card,
.mini,
.minecraft-window,
.support,
.real-data,
.full-scroll,
.policy-screen {
  padding: .82rem;
}

.perk-grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.mode-map {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.mode-node {
  position: relative;
  min-height: 10rem;
  border: 1px solid rgba(123,60,200,.18);
  border-radius: 8px;
  padding: .85rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(241,231,255,.76));
  box-shadow: var(--shadow);
}

.mode-node > span,
.policy-screen article > span {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--amethyst), var(--rose));
  color: white;
  font-weight: 950;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}

.full-scroll,
.policy-screen {
  margin-top: .8rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,245,223,.84)),
    linear-gradient(90deg, rgba(123,60,200,.08), rgba(216,98,157,.06));
}

.full-scroll p {
  max-width: 72ch;
  color: #4f425a;
}

.policy-screen {
  display: grid;
  gap: .62rem;
}

.policy-screen article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  border: 1px solid rgba(123,60,200,.16);
  border-radius: 8px;
  padding: .65rem;
  background: rgba(255,255,255,.62);
}

.big-copy {
  margin-top: .75rem;
}

.help-actions {
  display: grid;
  gap: .5rem;
  margin-top: .8rem;
}

.info-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  padding: clamp(1rem, 4vw, 1.55rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,249,255,.7)),
    linear-gradient(120deg, rgba(45,212,191,.12), rgba(214,161,59,.14));
  box-shadow: 0 24px 70px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.88);
}

.info-hero h1 {
  max-width: 13ch;
  color: #111827;
}

.info-toolbar {
  display: grid;
  gap: .55rem;
  margin-top: .9rem;
}

.info-toolbar label {
  color: #405064;
}

.info-toolbar input {
  min-height: 2.85rem;
  border-radius: 16px;
}

.info-grid,
.rules-board,
.decision-grid {
  display: grid;
  gap: .72rem;
  margin-top: .85rem;
}

.info-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.info-card,
.interactive-panel,
.rule-card,
.term-section,
.terms-index,
.decision-grid article {
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 48px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(14px) saturate(130%);
}

.info-card {
  display: grid;
  align-content: start;
  gap: .55rem;
  min-height: 13rem;
  padding: .9rem;
}

.info-card .soft {
  width: fit-content;
  margin-top: auto;
}

.interactive-panel {
  margin-top: .85rem;
  padding: .82rem;
}

.step-list {
  display: grid;
  gap: .55rem;
}

.step-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  border: 1px solid rgba(123,60,200,.14);
  border-radius: 8px;
  padding: .72rem;
  background: rgba(255,255,255,.62);
}

.step-list b,
.decision-grid span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #111827, #2dd4bf);
  color: white;
}

.rule-card {
  overflow: hidden;
}

.rule-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  border: 0;
  padding: .78rem .85rem;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(241,245,249,.66));
  color: #111827;
  text-align: left;
}

.rule-toggle span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 8px;
  background: #f1e7ff;
}

.rule-toggle small {
  border-radius: 999px;
  padding: .28rem .5rem;
  background: rgba(47,111,82,.12);
  color: #2f6f52;
  font-weight: 950;
}

.rule-body {
  display: none;
  padding: 0 .85rem .85rem;
}

.rule-body.open {
  display: block;
}

.rule-body ul,
.term-section ul {
  display: grid;
  gap: .38rem;
  margin: .65rem 0 0;
  padding-left: 1.1rem;
  color: #4f425a;
}

.decision-grid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.decision-grid article {
  padding: .82rem;
}

.terms-layout {
  display: grid;
  gap: .75rem;
  margin-top: .85rem;
}

.terms-index {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding: .65rem;
}

.terms-index a {
  border-radius: 8px;
  padding: .54rem .6rem;
  color: #405064;
  font-weight: 850;
}

.terms-index a:hover {
  background: #f1e7ff;
  color: var(--amethyst);
}

.terms-stack {
  display: grid;
  gap: .72rem;
}

.term-section {
  scroll-margin-top: 5rem;
  padding: .9rem;
}

.term-section > span {
  color: var(--amethyst);
  font-weight: 950;
}

.quick-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .68rem .75rem;
  min-height: 6.2rem;
  align-items: start;
}

.quick-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent),
    linear-gradient(135deg, rgba(17,24,39,.92), rgba(45,212,191,.88));
  box-shadow: 0 12px 28px rgba(15,23,42,.13), inset 0 -2px 0 rgba(0,0,0,.12);
}

.quick-icon svg {
  width: 1.22rem;
  height: 1.22rem;
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-card h2 {
  margin-top: .18rem;
}

.quick-card p {
  grid-column: 2;
  margin-top: -.22rem;
}

.book-panel {
  display: grid;
  gap: .72rem;
  margin-top: .82rem;
  padding: .62rem;
  border: 3px solid rgba(39, 24, 52, .32);
  background:
    linear-gradient(135deg, rgba(42,22,56,.12), rgba(226,102,190,.08)),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,244,223,.7));
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.65), inset 0 -6px 0 rgba(36,21,47,.08);
}

.book-scene {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(75,47,31,.44) 49.5%, rgba(75,47,31,.44) 50.5%, transparent 50.5%),
    radial-gradient(circle at 50% 52%, rgba(255,222,151,.32), transparent 12rem),
    linear-gradient(135deg, #24152f, #503265);
  box-shadow: inset 0 0 0 4px #2b1837, inset 0 0 0 8px #8bd9ff, inset 0 0 0 12px #6d3fb2;
}

.book-scene > img {
  display: none;
}

.book-pages {
  position: absolute;
  inset: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  perspective: 800px;
}

.book-page {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 2px solid #8f6745;
  border-radius: 8px;
  padding: .82rem;
  color: #3b291c;
  background:
    linear-gradient(90deg, rgba(102,65,35,.08), transparent 1.4rem),
    repeating-linear-gradient(0deg, transparent 0 1.25rem, rgba(111,72,38,.08) 1.25rem calc(1.25rem + 1px)),
    linear-gradient(180deg, #fff0bd, #f4d996);
  text-shadow: 0 1px rgba(255,255,255,.5);
  box-shadow: inset 0 -4px 0 rgba(111,72,38,.14), 0 10px 18px rgba(19, 10, 25, .2);
  animation: pageEnter .3s ease both;
}

.book-page ul {
  display: grid;
  gap: .34rem;
  margin: .58rem 0 0;
  padding: 0;
  list-style: none;
}

.book-page li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .38rem;
  align-items: start;
  color: #3b291c;
  font-size: clamp(.68rem, 1.35vw, .86rem);
  line-height: 1.28;
}

.book-page li::before {
  content: "";
  width: .74rem;
  height: .74rem;
  margin-top: .16rem;
  background: linear-gradient(135deg, #6f3ec7, #f2c35f);
  box-shadow: .13rem .13rem 0 #5b3a27;
}

.book-page h3 {
  margin: .46rem 0 0;
  color: #5e327b;
  font-family: "Press Start 2P", "Courier New", ui-monospace, monospace;
  font-size: clamp(.82rem, 2vw, 1.15rem);
  line-height: 1.08;
}

.page-icon {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 2px solid rgba(34,24,41,.28);
  border-radius: 8px;
  background: linear-gradient(135deg, #6f3ec7, #d35aa5);
  color: white;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: .64rem;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22);
}

.book-page p {
  margin-top: .48rem;
  color: #4b3a2d;
  font-size: clamp(.72rem, 1.55vw, .94rem);
  line-height: 1.38;
}

.book-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
}

.book-controls span {
  color: var(--muted);
  font-weight: 950;
}

.mode-cover {
  display: grid;
  width: 7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid rgba(34,24,41,.24);
  border-radius: 8px;
  background: linear-gradient(135deg, #3b2750, #8c4bb5);
  color: #ffe5a6;
  font-weight: 950;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.22);
}

.mode-cover img {
  width: 3.4rem;
  border-radius: 6px;
}

.mc-button {
  min-height: 2.4rem;
  border: 2px solid rgba(34,24,41,.3);
  border-radius: 8px;
  padding: .52rem .65rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 42%),
    linear-gradient(135deg, #7552a9, #b85c9a);
  color: white;
  font-weight: 950;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.2);
}

@keyframes pageEnter {
  from { opacity: 0; transform: rotateY(10deg) translateY(6px); }
  to { opacity: 1; transform: rotateY(0) translateY(0); }
}

details {
  margin-top: .62rem;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
}

summary {
  min-height: 2.5rem;
  padding: .62rem .72rem;
  color: var(--text);
  font-weight: 900;
}

details p,
details .inventory,
details .moves {
  padding: 0 .72rem .72rem;
}

.panel-intro,
.product {
  display: grid;
  gap: .8rem;
  align-items: center;
}

.panel-logo,
.product img {
  width: 4.8rem;
  max-width: 4.8rem;
  aspect-ratio: 1;
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  contain: paint;
}

.store-closed {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  padding: clamp(1rem, 4vw, 1.55rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,245,249,.66)),
    linear-gradient(90deg, rgba(45,212,191,.16), rgba(255,209,102,.14));
  box-shadow: 0 22px 70px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.88);
}

.store-closed img {
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15,23,42,.14);
}

.store-closed h1 {
  margin-bottom: .35rem;
  color: #111827;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
}

.store-closed-list {
  display: grid;
  gap: .75rem;
  margin-top: .8rem;
}

.store-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(17rem, .92fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.4rem);
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  padding: clamp(1.05rem, 4vw, 2.2rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,248,246,.78)),
    linear-gradient(120deg, rgba(36,162,133,.18), rgba(255,198,72,.16) 48%, rgba(121,64,202,.16));
  box-shadow: 0 24px 76px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.store-hero::after {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem 20%;
  height: 11rem;
  background: linear-gradient(90deg, rgba(36,162,133,.12), rgba(198,40,40,.12), rgba(255,198,72,.15));
  transform: rotate(-4deg);
  pointer-events: none;
}

.store-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .85rem;
}

.store-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: #111827;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: .96;
}

.store-hero p {
  max-width: 42rem;
  margin: 0;
  color: #4b5563;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.store-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .3rem;
}

.store-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 20rem;
}

.store-orbit img {
  width: min(64vw, 16.5rem);
  aspect-ratio: 1;
  border-radius: 30%;
  object-fit: cover;
  box-shadow: 0 28px 70px rgba(22,35,54,.24), 0 0 0 10px rgba(255,255,255,.62);
  animation: storeFloat 5.8s ease-in-out infinite;
}

.spark {
  position: absolute;
  width: 3.2rem;
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
  animation: sparkOrbit 7s ease-in-out infinite;
}

.spark::before {
  content: "";
  position: absolute;
  inset: .82rem;
  border-radius: 50%;
  background: #24a285;
}

.spark-a { left: 8%; top: 16%; }
.spark-b { right: 2%; top: 44%; animation-delay: -1.9s; }
.spark-b::before { background: #c62828; }
.spark-c { left: 18%; bottom: 10%; animation-delay: -3.4s; }
.spark-c::before { background: #ffc648; }

.store-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .9rem;
}

.rank-shop {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1rem);
  align-items: stretch;
}

.rank-card {
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.09);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255,255,255,.83);
  box-shadow: 0 18px 54px rgba(15,23,42,.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rank-card:hover,
.rank-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(15,23,42,.16);
}

.rank-card.featured {
  border-color: rgba(255,198,72,.7);
  box-shadow: 0 24px 78px rgba(107,75,10,.17), inset 0 0 0 1px rgba(255,255,255,.72);
}

.rank-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .35rem;
  background: #24a285;
}

.rank-gold::before { background: linear-gradient(90deg, #ffc648, #c62828); }
.rank-violet::before { background: linear-gradient(90deg, #7940ca, #24a285); }

.rank-topline {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
}

.rank-topline span {
  display: inline-grid;
  place-items: center;
  min-height: 2rem;
  border-radius: 999px;
  padding: .28rem .6rem;
  background: rgba(36,162,133,.11);
  color: #176f62;
  font-weight: 900;
  font-size: .8rem;
}

.rank-gold .rank-topline span {
  background: rgba(255,198,72,.18);
  color: #7a5100;
}

.rank-violet .rank-topline span {
  background: rgba(121,64,202,.13);
  color: #52318d;
}

.rank-topline b {
  color: #111827;
  font-size: 1.25rem;
  white-space: nowrap;
}

.rank-topline small {
  margin-left: .1rem;
  color: #6b7280;
  font-size: .75rem;
}

.rank-card h3 {
  margin: .15rem 0 0;
  color: #111827;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.rank-card p,
.rank-card > small {
  margin: 0;
  color: #4b5563;
}

.rank-card ul {
  display: grid;
  gap: .48rem;
  margin: .1rem 0;
  padding: 0;
  list-style: none;
}

.rank-card li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .45rem;
  color: #273042;
  font-weight: 750;
}

.rank-card li::before {
  content: "✓";
  color: #24a285;
  font-weight: 950;
}

.rank-card button {
  align-self: end;
  margin-top: .35rem;
}

.rank-card button.chosen {
  outline: 3px solid rgba(36,162,133,.24);
  outline-offset: 3px;
}

.checkout-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .78fr);
  gap: clamp(1rem, 4vw, 2rem);
  align-items: center;
  margin-top: 1.1rem;
  border-radius: 22px;
  padding: clamp(1rem, 4vw, 1.65rem);
  background:
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(35,44,55,.94)),
    linear-gradient(90deg, rgba(36,162,133,.28), rgba(255,198,72,.22));
  color: #fff;
  box-shadow: 0 24px 74px rgba(15,23,42,.22);
}

.checkout-showcase h2 {
  max-width: 15ch;
  margin: .3rem 0 .6rem;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1;
}

.checkout-showcase p {
  color: rgba(255,255,255,.78);
}

.store-legal {
  border-left: 3px solid #ffc648;
  padding-left: .8rem;
}

.checkout-card {
  border-radius: 18px;
  padding: .7rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.checkout-screen {
  display: grid;
  gap: .7rem;
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,255,255,.96);
  color: #111827;
}

.checkout-screen > span {
  color: #6b7280;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.checkout-screen strong {
  font-size: 1.9rem;
  line-height: 1;
}

.checkout-screen > b {
  color: #176f62;
  font-size: 1.25rem;
}

.checkout-screen ol {
  display: grid;
  gap: .55rem;
  margin: .2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: checkout;
}

.checkout-screen li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .58rem;
  align-items: start;
}

.checkout-screen li::before {
  counter-increment: checkout;
  content: counter(checkout);
  display: grid;
  place-items: center;
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.checkout-screen li b,
.checkout-screen li span {
  grid-column: 2;
}

.checkout-screen li b {
  margin-top: -.1rem;
}

.checkout-screen li span {
  color: #5b6473;
  font-size: .92rem;
}

@keyframes storeFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes sparkOrbit {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(8px, -10px, 0) rotate(7deg); }
}

.auth-launch {
  display: grid;
  gap: .75rem;
  margin-top: .8rem;
}

.window-title {
  margin: -.82rem -.82rem .72rem;
  border-bottom: 1px solid rgba(0,0,0,.15);
  border-radius: 8px 8px 0 0;
  padding: .5rem .68rem;
  background: linear-gradient(180deg, #f1e7ff, #ead6ff);
  color: #4c2974;
  font-weight: 950;
}

.login-box {
  display: grid;
  gap: .52rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .82rem;
  background: rgba(255,255,255,.7);
}

label {
  display: grid;
  gap: .28rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.bot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.check {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: var(--text);
}

input,
textarea {
  width: 100%;
  min-height: 2.58rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .64rem .72rem;
  background: rgba(255,255,255,.9);
  color: var(--text);
  outline: none;
}

input:focus,
textarea:focus {
  border-color: rgba(123,60,200,.5);
  box-shadow: 0 0 0 3px rgba(123,60,200,.12);
}

input[type="checkbox"] {
  width: 1.05rem;
  min-height: 1.05rem;
  accent-color: var(--amethyst);
}

textarea { min-height: 6rem; resize: vertical; }

.state,
.flow-note {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: .26rem .58rem;
  font-size: .76rem;
  font-weight: 900;
}

.state.ok,
.flow-note.ok { background: rgba(123,60,200,.12); color: var(--amethyst); }
.state.warn,
.flow-note.warn { background: rgba(185,115,35,.14); color: #9b651e; }

.code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  margin-top: .65rem;
}

.recaptcha-box {
  display: grid;
  gap: .5rem;
  margin: .95rem 0 .7rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(0);
  transition: filter .24s ease, opacity .24s ease;
}

.recaptcha-box > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.recaptcha-box strong {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: #21112e;
  font-size: .92rem;
  font-weight: 950;
}

.recaptcha-box strong::before {
  content: "";
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #44e0b6 20% 56%, #7b3cc8 58% 100%);
  box-shadow: 0 0 0 4px rgba(68,224,182,.12), 0 0 20px rgba(123,60,200,.2);
}

.recaptcha-box small,
.recaptcha-status {
  color: #0d6f58;
  font-size: .82rem;
  font-weight: 800;
}

.recaptcha-widget {
  min-height: 78px;
  width: min(100%, 320px);
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
  opacity: 0;
  transform: translateY(16px);
  filter: drop-shadow(0 16px 26px rgba(28,13,48,.13));
  transition: opacity .36s ease, transform .36s cubic-bezier(.2,.85,.2,1), filter .24s ease;
}

.recaptcha-widget iframe {
  border-radius: 18px !important;
}

.recaptcha-loading .recaptcha-widget {
  position: relative;
  background: linear-gradient(90deg, rgba(68,224,182,.08), rgba(255,255,255,.82), rgba(123,60,200,.08));
  background-size: 220% 100%;
  animation: recaptcha-loading-sheen 1.05s linear infinite;
}

.recaptcha-loading .recaptcha-widget::after {
  content: "";
  position: absolute;
  inset: 12px auto auto 12px;
  width: min(280px, calc(100% - 24px));
  height: 54px;
  border: 1px solid rgba(68,224,182,.18);
  border-radius: 16px;
  background:
    linear-gradient(#fff,#fff) 46px 18px / 120px 10px no-repeat,
    linear-gradient(#fff,#fff) 46px 34px / 82px 8px no-repeat,
    rgba(255,255,255,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.recaptcha-ready .recaptcha-widget {
  opacity: 1;
  transform: translateY(0);
}

.recaptcha-highlight {
  animation: recaptcha-attention 2.4s ease both;
}

.recaptcha-solved {
  filter: saturate(1.06);
}

.recaptcha-solved small {
  color: #08745b;
}

.recaptcha-failed {
  filter: saturate(.95);
}

.recaptcha-failed .recaptcha-widget {
  min-height: 0;
  opacity: 1;
  transform: none;
}

.recaptcha-status {
  min-height: 1.1rem;
  margin: 0;
}

@keyframes recaptcha-loading-sheen {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes recaptcha-attention {
  0% { filter: drop-shadow(0 12px 20px rgba(28,13,48,.1)); }
  32% { filter: drop-shadow(0 0 0 rgba(68,224,182,.2)) drop-shadow(0 18px 30px rgba(28,13,48,.16)); }
  100% { filter: drop-shadow(0 16px 26px rgba(28,13,48,.13)); }
}

@media (prefers-reduced-motion: reduce) {
  .recaptcha-widget,
  .recaptcha-box {
    transition: none;
  }

  .recaptcha-loading .recaptcha-widget,
  .recaptcha-highlight {
    animation: none;
  }
}

/* GFJ Network™ visual refresh: calmer surfaces, clearer hierarchy and the
   official circular GFJ Network™ identity. */
:root {
  --bg: #f5f7ff;
  --surface: rgba(255, 255, 255, .88);
  --surface-2: rgba(244, 241, 255, .74);
  --text: #17132a;
  --muted: #655f76;
  --line: rgba(51, 37, 92, .14);
  --amethyst: #6d3bd1;
  --violet: #8756dc;
  --rose: #d653a1;
  --shadow: 0 24px 70px rgba(43, 28, 84, .14);
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(115, 196, 255, .2), transparent 25rem),
    radial-gradient(circle at 92% 18%, rgba(212, 117, 224, .16), transparent 24rem),
    linear-gradient(180deg, #f7fbff 0%, #f8f5ff 54%, #fffaf6 100%);
}

.topbar {
  min-height: 4rem;
  border-bottom-color: rgba(61, 40, 108, .11);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 35px rgba(37, 25, 73, .07);
}

.brand img {
  width: 2.72rem;
  height: 2.72rem;
  border: 1px solid rgba(109, 59, 209, .12);
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  box-shadow: 0 8px 20px rgba(109, 59, 209, .15);
}

.brand strong {
  color: #35205c;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: -.04em;
}

.brand small { color: #786c8e; font-weight: 700; }

.page-shell { padding-top: 1rem; }

.dev-hero {
  position: relative;
  isolation: isolate;
  min-height: min(42rem, calc(100svh - 6rem));
  padding: clamp(1.4rem, 5vw, 4.2rem) 0 1.5rem;
}

.dev-hero::before {
  content: "";
  position: absolute;
  inset: 4% -8% 0;
  z-index: -1;
  border: 1px solid rgba(109, 59, 209, .1);
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(242,238,255,.46));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.95);
}

.dev-hero-copy { padding: clamp(.3rem, 2vw, 1rem); }
.dev-hero h1 { color: #21143d; letter-spacing: -.055em; }
.dev-hero p { color: #5d566d; }

.dev-status-row {
  border-color: rgba(109, 59, 209, .16);
  background: rgba(255,255,255,.84);
}

.dev-status-row b {
  background: linear-gradient(135deg, #6d3bd1, #bf4ea8);
}

.primary {
  border: 1px solid rgba(58, 29, 117, .28);
  background: linear-gradient(135deg, #6134c6, #9c4bc1 58%, #ed8d77);
  box-shadow: 0 14px 28px rgba(109, 59, 209, .24), inset 0 -3px 0 rgba(43, 18, 86, .2);
}

.soft {
  border-color: rgba(109, 59, 209, .16);
  color: #4c3278;
  background: rgba(255,255,255,.78);
}

.dev-device {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(241,237,255,.76));
  box-shadow: 0 34px 95px rgba(68, 35, 119, .18), inset 0 0 0 1px rgba(255,255,255,.86);
}

.dev-device img {
  width: min(14rem, 54vw);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(109, 59, 209, .12);
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  padding: 0;
}

.dev-device .gfj-writer { display: none; }

.dev-account-strip,
.dev-timeline {
  border-color: rgba(109, 59, 209, .12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 20px 60px rgba(50, 32, 91, .09), inset 0 1px 0 rgba(255,255,255,.92);
}

.quick-card,
.mini,
.info-card,
.privacy-card,
.rule-card,
.term-section,
.liquid-card,
.game-panel {
  border-color: rgba(109, 59, 209, .12);
  box-shadow: 0 16px 40px rgba(50, 32, 91, .08), inset 0 1px 0 rgba(255,255,255,.9);
}

.panel-logo,
.product img,
.logo-stage img {
  border: 1px solid rgba(109, 59, 209, .14);
  border-radius: 20px;
  object-fit: contain;
  background: #fff;
  padding: .35rem;
}

.logo-stage img { animation: none; }

body.logo-guard img[src$="gfj-network-logo.png"] {
  background: #fff;
  opacity: 0;
}

body.logo-guard img[src$="gfj-network-logo.png"].is-loaded { opacity: 1; }

/* GFJ Network visual refresh — liquid glass / deep space edition */
:root {
  --bg: #070817;
  --paper: rgba(255,255,255,.08);
  --surface: rgba(19, 22, 48, .56);
  --surface-2: rgba(255,255,255,.075);
  --text: #f7f5ff;
  --muted: #b8b8d3;
  --line: rgba(255,255,255,.16);
  --amethyst: #a879ff;
  --obsidian: #080916;
  --violet: #7657ff;
  --rose: #ff5fc7;
  --gold: #ffd36d;
  --shadow: 0 28px 90px rgba(0,0,0,.32);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(98, 164, 255, .22), transparent 22rem),
    radial-gradient(circle at 85% 10%, rgba(255, 88, 210, .18), transparent 24rem),
    radial-gradient(circle at 52% 74%, rgba(122, 82, 255, .14), transparent 34rem),
    linear-gradient(135deg, #050611 0%, #11102a 48%, #090b1a 100%);
  color: var(--text);
}

body::before {
  opacity: .48;
  background-image:
    linear-gradient(rgba(156,128,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,128,255,.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body::after {
  background:
    radial-gradient(circle at 18% 30%, rgba(73, 227, 255, .11), transparent 15rem),
    radial-gradient(circle at 80% 40%, rgba(255, 95, 199, .11), transparent 18rem),
    linear-gradient(115deg, rgba(255,255,255,.045), transparent 42%, rgba(255,255,255,.04));
}

.topbar {
  margin: .8rem auto 0;
  width: min(1180px, calc(100% - 1.3rem));
  min-height: 4rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(255,255,255,.16), rgba(255,255,255,.055) 48%, rgba(140,108,255,.12));
  box-shadow: 0 18px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  overflow: hidden;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.12) 45%, transparent 62%);
  transform: translateX(-90%);
  animation: glassSweep 9s ease-in-out infinite;
}

.brand, .header-actions { position: relative; z-index: 1; }
.brand img { box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 8px 24px rgba(117,87,255,.45); }
.brand strong { color: #fff; text-shadow: 0 0 24px rgba(176,134,255,.7); }
.brand small { color: #c9c3e8; }
.header-actions { gap: .45rem; }
.collab-bridge, .language-switch, .account-link, .mobile-menu-toggle {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.1) !important;
  color: #f7f4ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(14px);
}

.page-shell { width: min(1180px, calc(100% - 1.3rem)); padding-top: 1.25rem; }
.domain-notice, .dev-account-strip, .dev-timeline, .quick-grid > *, .game-section, .panel-card, .access-card, .store-card, .info-card {
  border-color: rgba(255,255,255,.15) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.17) !important;
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}
.domain-notice strong, .dev-hero h1, h1, h2, h3 { color: #fff !important; }
.domain-notice p, .dev-hero p, .dev-timeline p, .dev-account-strip p, .quick-grid p, .panel-card p, .info-card p { color: #bbb9d6 !important; }
.domain-notice-close { color: #fff !important; background: rgba(255,255,255,.13) !important; }

.dev-hero {
  position: relative;
  isolation: isolate;
  min-height: 35rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
  gap: clamp(1rem, 4vw, 4rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 38px;
  padding: clamp(1.3rem, 4vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 50%, rgba(136,90,255,.28), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 55%, rgba(255,97,204,.08)) !important;
  box-shadow: 0 35px 120px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.2) !important;
  backdrop-filter: blur(28px) saturate(160%);
}
.dev-hero::before {
  content: "";
  position: absolute;
  inset: -45% -15% auto auto;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(166,132,255,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(166,132,255,.035), 0 0 0 5rem rgba(166,132,255,.025), inset 0 0 70px rgba(130,100,255,.2);
  animation: orbitSpin 24s linear infinite;
  pointer-events: none;
}
.dev-hero-copy { position: relative; z-index: 2; padding: 0; }
.dev-status-row { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.08); color: #ddd8f6; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.dev-status-row b { color: #171126; background: linear-gradient(135deg, #ffd36d, #ff9fcf); box-shadow: 0 0 26px rgba(255,159,207,.35); }
.kicker { color: #c2a9ff; letter-spacing: .14em; }
.dev-hero h1 { max-width: 12ch; font-size: clamp(2.7rem, 6vw, 5.6rem); letter-spacing: -.075em; line-height: .91; text-wrap: balance; text-shadow: 0 8px 40px rgba(94,54,175,.45); }
.dev-hero h1::after { content: ""; display: block; width: 4.5rem; height: .28rem; margin-top: 1.1rem; border-radius: 99px; background: linear-gradient(90deg, #67e8f9, #a879ff, #ff5fc7); box-shadow: 0 0 26px rgba(168,121,255,.8); }
.dev-hero p { max-width: 40rem; color: #c4c1d9 !important; font-size: 1.03rem; }
.brand-meaning { color: #e6c6ff !important; font-weight: 850; }
.hero-actions { gap: .7rem; }
.primary, .soft { border-radius: 999px !important; border-color: rgba(255,255,255,.2) !important; }
.primary { color: #161023 !important; background: linear-gradient(135deg, #f7d77d, #ff98d0 54%, #aa8aff) !important; box-shadow: 0 14px 34px rgba(180,111,255,.3), inset 0 1px 0 rgba(255,255,255,.72) !important; }
.soft { color: #f7f4ff !important; background: rgba(255,255,255,.095) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(0,0,0,.12) !important; }
.primary:hover, .soft:hover { transform: translateY(-3px) scale(1.025); filter: brightness(1.08); }

.dev-orbit { position: relative; min-height: 30rem; display: grid; place-items: center; }
.dev-orbit::before, .dev-orbit::after { content: ""; position: absolute; border: 1px solid rgba(142,117,255,.28); border-radius: 50%; animation: orbitSpin 18s linear infinite; }
.dev-orbit::before { width: 23rem; height: 23rem; transform: rotate(42deg) skewX(-14deg); box-shadow: 0 0 70px rgba(90,204,255,.16); }
.dev-orbit::after { width: 29rem; height: 11rem; transform: rotate(-28deg); animation-direction: reverse; border-color: rgba(255,95,199,.2); }
.dev-device { position: relative; z-index: 2; width: min(24rem, 90%); border-color: rgba(255,255,255,.22) !important; border-radius: 30px !important; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.045)) !important; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 80px rgba(121,84,255,.2), inset 0 1px 0 rgba(255,255,255,.28) !important; backdrop-filter: blur(25px); transform: rotate(3deg); animation: deviceFloat 6s ease-in-out infinite; }
.dev-device img { filter: drop-shadow(0 18px 30px rgba(113,77,255,.4)); animation: logoPulse 4s ease-in-out infinite; }
.device-top { border-bottom-color: rgba(255,255,255,.1) !important; }
.build-bar { background: rgba(255,255,255,.1) !important; }
.build-bar span { background: linear-gradient(90deg, #5ee7ff, #a879ff, #ff5fc7) !important; box-shadow: 0 0 18px #a879ff; }

.dev-account-strip { margin-top: 1rem; border-radius: 26px; }
.dev-timeline { margin-top: 1rem; border-radius: 30px; padding: clamp(1.2rem, 3vw, 2rem); }
.dev-timeline > div { gap: .8rem; }
.dev-timeline article { min-height: 8rem; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.065); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
.dev-timeline article:hover { transform: translateY(-8px); background: rgba(255,255,255,.12); box-shadow: 0 18px 35px rgba(0,0,0,.18); }
.dev-timeline article > span { color: #8be9ff; }
.quick-grid { gap: 1rem; }
.quick-grid > * { border-radius: 24px; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease; }
.quick-grid > *:hover { transform: translateY(-8px) rotate(-.5deg); border-color: rgba(197,161,255,.5) !important; }

@keyframes glassSweep { 0%, 68% { transform: translateX(-90%); } 82%, 100% { transform: translateX(120%); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes deviceFloat { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-14px); } }
@keyframes logoPulse { 0%,100% { filter: drop-shadow(0 18px 30px rgba(113,77,255,.35)); } 50% { filter: drop-shadow(0 18px 42px rgba(255,95,199,.55)) saturate(1.12); } }

/* Public project pages: semantic, lightweight and built on the existing GFJ glass system. */
.project-page { display:grid; gap:1rem; padding-bottom:2rem; }
.project-hero,.project-intro,.project-section,.project-status,.project-preview { border:1px solid rgba(255,255,255,.15); border-radius:28px; padding:clamp(1.2rem,4vw,3rem); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); box-shadow:0 22px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.17); backdrop-filter:blur(22px) saturate(155%); }
.project-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(13rem,.42fr); align-items:center; gap:2rem; overflow:hidden; background:radial-gradient(circle at 85% 20%,rgba(255,95,199,.24),transparent 20rem),linear-gradient(135deg,rgba(255,255,255,.14),rgba(121,84,255,.09)); }
.project-hero h1 { max-width:11ch; margin:.25rem 0 .9rem; font-size:clamp(3rem,8vw,6.4rem); line-height:.86; letter-spacing:-.08em; }
.project-lead { max-width:45rem; font-size:clamp(1.08rem,2vw,1.3rem); color:#f1ecff!important; }
.project-monogram { display:grid; place-items:center; min-height:17rem; border:1px solid rgba(209,185,255,.35); border-radius:50%; aspect-ratio:1; background:radial-gradient(circle,rgba(177,121,255,.32),rgba(89,61,166,.08) 55%,transparent 68%); box-shadow:0 0 0 1.5rem rgba(170,121,255,.04),0 0 6rem rgba(168,121,255,.25); animation:deviceFloat 7s ease-in-out infinite; }
.project-monogram b { font-size:clamp(3.5rem,9vw,7rem); line-height:.8; letter-spacing:-.1em; color:#fff; text-shadow:0 0 35px #b282ff; }
.project-monogram span { margin-top:.7rem; color:#f8d584; font-size:.7rem; font-weight:900; letter-spacing:.2em; line-height:1.55; text-align:center; }
.project-intro h2,.project-section h2 { margin:.3rem 0 .8rem; font-size:clamp(1.8rem,4vw,3rem); }
.project-intro p,.project-section p,.project-status p,.project-preview p { max-width:75ch; color:#d0cde2!important; line-height:1.75; }
.project-intro blockquote { margin:1.4rem 0 0; max-width:50rem; padding:1rem 1.2rem; border-left:3px solid #f7d77d; color:#fff; font-size:1.1rem; font-weight:800; background:rgba(255,255,255,.055); }
.project-section h3 { margin:.25rem 0 .7rem; }
.history-fact { display:grid; gap:.4rem; margin:1.35rem 0; padding:1rem; border:1px solid rgba(247,215,125,.3); border-radius:16px; background:rgba(247,215,125,.08); color:#f8e5a7; }
.history-fact span { color:#ddd7ee; }
.project-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; margin:1.7rem 0 0; padding:0; list-style:none; }
.project-timeline li { position:relative; min-height:11rem; padding:1rem; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(15,11,35,.3); }
.project-timeline li:not(:last-child)::after { content:"→"; position:absolute; right:-.62rem; top:42%; z-index:1; color:#f7d77d; font-weight:900; }
.project-timeline span,.system-grid span { color:#f7d77d; font-size:.63rem; font-weight:900; letter-spacing:.1em; }
.project-timeline h3 { font-size:1.05rem; }.project-timeline p { font-size:.9rem; }
.letter-grid,.fact-grid,.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.3rem; }
.letter-grid article,.fact-grid>div,.system-grid article { padding:1.1rem; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(255,255,255,.055); }
.letter-grid b { color:#f7d77d; font-size:3rem; line-height:1; }.letter-grid h3 { margin:.4rem 0; }.letter-grid p { font-size:.9rem; }
.fact-grid { grid-template-columns:repeat(4,1fr); }.fact-grid dt { color:#c5b0ff; font-size:.72rem; font-weight:900; text-transform:uppercase; }.fact-grid dd { margin:.4rem 0 0; color:#fff; font-size:1.05rem; font-weight:900; }
.system-grid { grid-template-columns:repeat(3,1fr); }.system-grid article { min-height:13rem; }.system-grid h3 { margin:.5rem 0; }.system-grid p { font-size:.91rem; }
.two-col,.project-contact { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }.two-col ul { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; padding:0; list-style:none; }.two-col li { padding:.65rem .75rem; border-radius:12px; background:rgba(255,255,255,.07); color:#e8e3f6; }
.project-status { text-align:center; background:radial-gradient(circle at center,rgba(255,95,199,.18),rgba(121,84,255,.12),rgba(255,255,255,.045)); }.project-status>span { color:#f7d77d; font-size:.72rem; font-weight:950; letter-spacing:.16em; }.project-status h2 { margin:.3rem 0; font-size:clamp(2rem,5vw,4rem); }.project-status p { margin:auto; }
.project-contact a { display:block; margin-top:.65rem; color:#f7d77d; font-size:1.1rem; font-weight:850; }.faq-section details { margin-top:.65rem; padding:.85rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.055); }.faq-section summary { color:#fff; cursor:pointer; font-weight:850; }.faq-section details p { margin:.75rem 0 0; }
.project-preview { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-top:1rem; }.project-preview h2 { margin:.3rem 0 .7rem; }.project-preview-actions { display:grid; min-width:14rem; gap:.55rem; }
@media (max-width:820px) { .project-hero { grid-template-columns:1fr; }.project-monogram { min-height:12rem; width:min(14rem,80%); margin:auto; }.project-timeline,.letter-grid,.fact-grid,.system-grid,.two-col,.project-contact { grid-template-columns:1fr; }.project-timeline li { min-height:0; }.project-timeline li:not(:last-child)::after { content:"↓"; left:50%; right:auto; bottom:-.95rem; top:auto; }.two-col ul { grid-template-columns:1fr; }.project-preview { display:grid; }.project-preview-actions { min-width:0; } }

@media (max-width: 820px) {
  body { padding-bottom: calc(6.8rem + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: .55rem; width: calc(100% - 1rem); min-height: 3.7rem; margin-top: .55rem; padding: .48rem .58rem; border-radius: 999px; }
  .brand img { width: 2.25rem; height: 2.25rem; }
  .brand small { color: #c9c3e8; }
  .page-shell { width: calc(100% - 1rem); padding-top: 1rem; }
  .dev-hero { display: flex; flex-direction: column; min-height: 0; gap: .2rem; border-radius: 30px; padding: 1.15rem; }
  .dev-hero-copy { order: 1; }
  .dev-orbit { order: 2; min-height: 20rem; margin: -.5rem -1rem -1rem; }
  .dev-hero h1 { max-width: 10ch; font-size: clamp(2.55rem, 13vw, 4.2rem); }
  .dev-hero p { font-size: .95rem; }
  .dev-orbit::before { width: 17rem; height: 17rem; }
  .dev-orbit::after { width: 20rem; height: 8rem; }
  .dev-device { width: min(21rem, 88vw); }
  .dev-account-strip { border-radius: 24px; }
  .dev-timeline { border-radius: 24px; }
  .dev-timeline > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-timeline article { min-height: 7.5rem; }
  .mobile-nav { border-color: rgba(255,255,255,.2) !important; background: rgba(19,22,48,.64) !important; box-shadow: 0 18px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; backdrop-filter: blur(26px) saturate(175%); }
  .mobile-nav a { color: #aca9c7; }
  .mobile-nav a.active { color: #fff; background: linear-gradient(135deg, rgba(139,112,255,.6), rgba(255,95,199,.34)) !important; box-shadow: 0 0 24px rgba(139,112,255,.25), inset 0 1px 0 rgba(255,255,255,.22) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar::before, .dev-hero::before, .dev-orbit::before, .dev-orbit::after, .dev-device, .dev-device img { animation: none !important; }
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(103,232,249,.95);
  outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(2px))) {
  .topbar, .dev-hero, .dev-account-strip, .dev-timeline, .quick-grid > *, .game-section, .panel-card, .access-card, .store-card, .info-card {
    background: rgba(20, 22, 48, .96) !important;
  }
}

.real-data { margin-top: .75rem; }
.real-data.locked { opacity: .82; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.player-hub {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  overflow: hidden;
  margin-top: .75rem;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 24px;
  padding: 1rem;
  background:
    linear-gradient(120deg, rgba(255,255,255,.34), rgba(255,255,255,.08)),
    radial-gradient(circle at 14% 16%, rgba(119, 209, 255, .42), transparent 12rem),
    radial-gradient(circle at 78% 10%, rgba(255, 213, 106, .28), transparent 10rem),
    linear-gradient(135deg, rgba(36,21,47,.86), rgba(47,81,54,.82));
  color: white;
  box-shadow: 0 26px 80px rgba(22, 24, 18, .28), inset 0 0 0 1px rgba(255,255,255,.25);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: liquidRise .58s cubic-bezier(.2,.9,.2,1) both;
}

.player-hub::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    conic-gradient(from 130deg, transparent, rgba(255,255,255,.3), transparent 34%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px);
  animation: panelSweep 9s linear infinite;
}

.player-halo {
  display: grid;
  width: 6.5rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)),
    linear-gradient(135deg, rgba(255,213,106,.72), rgba(75, 186, 103, .64));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 16px 38px rgba(0,0,0,.25);
  animation: avatarFloat 3.8s ease-in-out infinite;
}

.player-halo img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 18px;
  image-rendering: pixelated;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(27,31,24,.32);
}

.player-hub-copy {
  display: grid;
  gap: .24rem;
  min-width: 0;
}

.player-hub-copy .kicker {
  color: #ffe49d;
}

.player-hub-copy h2 {
  margin: 0;
  font-size: clamp(1.65rem, 6vw, 3.8rem);
  line-height: .95;
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(0,0,0,.26);
}

.player-hub-copy p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-top: .36rem;
}

.player-hub .state.ok {
  background: rgba(219, 255, 214, .82);
  color: #245432;
}

.player-hub .state.warn {
  background: rgba(255, 236, 177, .86);
  color: #6f4a12;
}

.quick-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.quick-actions button {
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.liquid-card {
  margin-top: .7rem;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 20px;
  padding: .85rem;
  background: rgba(255,255,255,.54);
  box-shadow: 0 16px 44px rgba(36, 33, 25, .12), inset 0 0 0 1px rgba(255,255,255,.42);
  backdrop-filter: blur(14px);
  animation: liquidRise .48s cubic-bezier(.2,.9,.2,1) both;
}

.liquid-card h2 {
  margin: 0 0 .45rem;
}

.game-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 24px;
  padding: .85rem;
  background:
    linear-gradient(140deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    linear-gradient(180deg, rgba(235,247,255,.62), rgba(232,222,195,.64));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46), 0 24px 70px rgba(36, 33, 25, .18);
  backdrop-filter: blur(18px) saturate(1.1);
  animation: liquidRise .6s cubic-bezier(.2,.9,.2,1) .08s both;
}

.game-panel .section-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.game-panel .section-head span {
  border-radius: 999px;
  padding: .3rem .58rem;
  background: rgba(34,24,41,.08);
  color: rgba(34,24,41,.7);
  font-size: .72rem;
  font-weight: 950;
}

.game-section {
  overflow: hidden;
  margin-top: .65rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 20px;
  background: rgba(255,255,255,.46);
  box-shadow: 0 12px 30px rgba(36, 33, 25, .1), inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
  animation: modulePop .5s cubic-bezier(.2,.9,.2,1) both;
}

.game-section:nth-of-type(2) { animation-delay: .05s; }
.game-section:nth-of-type(3) { animation-delay: .1s; }
.game-section:nth-of-type(4) { animation-delay: .15s; }

.game-section:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 42px rgba(36, 33, 25, .16), inset 0 0 0 1px rgba(255,255,255,.45);
}

.game-section summary {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: .2rem .58rem;
  align-items: center;
  min-height: 3.7rem;
  padding: .7rem .78rem;
  background:
    linear-gradient(120deg, rgba(43, 64, 41, .95), rgba(48, 91, 98, .9)),
    linear-gradient(90deg, rgba(255, 213, 106, .22), transparent);
  color: #fff9e8;
  cursor: pointer;
  list-style: none;
  transition: filter .2s ease;
}

.game-section[open] summary {
  filter: saturate(1.18);
}

.game-section summary::-webkit-details-marker { display: none; }

.game-section summary span {
  display: grid;
  grid-row: 1 / 3;
  width: 2.1rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(20, 24, 18, .38);
  border-radius: 12px;
  background: rgba(26, 33, 24, .62);
  color: #ffd56a;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}

.game-section summary b {
  min-width: 0;
  font-size: .92rem;
  line-height: 1.1;
}

.game-section summary small {
  min-width: 0;
  color: rgba(255,249,232,.76);
  font-size: .68rem;
  font-weight: 800;
}

.source-note {
  margin: .65rem .72rem 0;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.stats,
.inventory,
.homes-list,
.social-list,
.mail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: 0;
  padding: .72rem;
}

.game-section .stats,
.game-section .inventory,
.game-section .homes-list,
.game-section .social-list,
.game-section .mail-list {
  padding: .72rem;
}

.stats article,
.item-card {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  padding: .62rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  box-shadow: 0 10px 24px rgba(36, 33, 25, .08), inset 0 0 0 1px rgba(255,255,255,.42);
  transition: transform .22s ease, box-shadow .22s ease;
}

.stats article:hover,
.item-card:hover,
.home-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 34px rgba(36, 33, 25, .15), inset 0 0 0 1px rgba(255,255,255,.52);
}

.stats span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.item-card {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
}

.item-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  position: relative;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(218,236,255,.68)),
    linear-gradient(135deg, rgba(75, 186, 103, .28), rgba(255,213,106,.28));
  box-shadow: inset 0 -3px 0 rgba(42,25,64,.09), 0 8px 18px rgba(36,33,25,.1);
}

.item-icon img {
  width: 2rem;
  height: 2rem;
  image-rendering: pixelated;
  object-fit: contain;
}

.item-icon b {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 7px;
  color: var(--amethyst);
}

.item-icon small {
  position: absolute;
  right: -.18rem;
  bottom: -.18rem;
  min-width: 1.1rem;
  padding: .08rem .2rem;
  border-radius: 999px;
  background: rgba(25,16,38,.92);
  color: #fff;
  text-align: center;
  font-size: .68rem;
  font-weight: 950;
}

.item-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card span {
  display: block;
  margin-top: .12rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.home-card {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: .55rem;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 18px;
  padding: .68rem;
  background:
    linear-gradient(180deg, rgba(255,249,232,.9), rgba(231,239,217,.72)),
    linear-gradient(135deg, rgba(154,107,63,.18), transparent);
  box-shadow: 0 10px 24px rgba(36, 33, 25, .08), inset 0 0 0 1px rgba(255,255,255,.44);
  transition: transform .22s ease, box-shadow .22s ease;
}

.home-rune {
  display: grid;
  width: 2.45rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent),
    linear-gradient(180deg, #9a6b3f, #4d6f41);
  color: #ffe4a3;
  font-weight: 950;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}

.home-card strong,
.home-card span,
.home-card small {
  display: block;
  min-width: 0;
}

.home-card strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card span,
.home-card small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.home-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto auto;
  align-items: center;
  gap: .35rem;
}

.home-actions button {
  min-height: 2.1rem;
  padding: .35rem .42rem;
  font-size: .72rem;
}

.home-actions input {
  min-height: 2.1rem;
  border-radius: 12px;
  padding: .35rem .5rem;
  font-size: .72rem;
}

.social-list,
.mail-list {
  grid-template-columns: 1fr;
}

.system-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.system-metrics article,
.friend-card,
.mail-card,
.activity-thread {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  padding: .62rem;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  box-shadow: 0 10px 24px rgba(36, 33, 25, .08), inset 0 0 0 1px rgba(255,255,255,.42);
}

.system-metrics span {
  display: block;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.system-metrics b {
  display: block;
  margin-top: .1rem;
  color: var(--text);
  font-size: 1rem;
}

.friend-grid,
.mail-stack {
  display: grid;
  gap: .45rem;
}

.friend-grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.friend-card {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
}

.friend-card img {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 12px;
  image-rendering: pixelated;
  object-fit: cover;
}

.friend-card strong,
.mail-card strong,
.activity-thread strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-card span,
.mail-card small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
}

.mail-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .58rem;
}

.mail-card.unread {
  border-color: rgba(123,60,200,.35);
  background: linear-gradient(180deg, rgba(241,231,255,.92), rgba(255,255,255,.58));
}

.mail-stamp {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6f52, #36a4b4);
  color: white;
  font-size: .64rem;
  font-weight: 950;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}

.mail-card p,
.activity-thread p {
  margin-top: .14rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 760;
}

.activity-thread {
  display: grid;
  gap: .25rem;
}

.settings-modal {
  border: 0;
  width: min(calc(100vw - 1rem), 42rem);
  max-width: none;
  margin: auto;
  padding: 0;
  background: transparent;
}

.settings-modal::backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(123,60,200,.24), transparent 18rem),
    rgba(13, 17, 15, .46);
  backdrop-filter: blur(10px);
}

.settings-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.26)),
    linear-gradient(135deg, rgba(36,21,47,.86), rgba(47,81,54,.72));
  color: var(--text);
  box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.35);
  backdrop-filter: blur(20px) saturate(1.2);
  animation: liquidRise .32s cubic-bezier(.2,.9,.2,1) both;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  gap: .75rem;
  padding: .95rem;
}

.settings-grid section {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 18px;
  padding: .82rem;
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

.settings-grid h2 {
  margin: 0 0 .55rem;
  font-size: 1rem;
}

@keyframes liquidRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes modulePop {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panelSweep {
  to { transform: rotate(360deg); }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

.empty-list {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.moves p {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
  margin: 0;
  padding: .5rem 0;
  border-top: 1px solid var(--line);
}

.flow-dialog,
.plus-modal {
  border: 0;
  width: min(calc(100vw - 1rem), 31rem);
  max-width: none;
  margin: auto;
  padding: 0;
  background: transparent;
}

body.flow-modal-open {
  overflow: hidden;
}

.flow-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800000000;
  display: none;
  background: rgba(32, 36, 28, .36);
  backdrop-filter: blur(7px);
}

body.flow-modal-open .flow-backdrop {
  display: block;
}

.flow-dialog[open] {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 1800000001;
}

.flow-dialog::backdrop,
.plus-modal::backdrop {
  background: rgba(32, 36, 28, .36);
  backdrop-filter: blur(7px);
}

iframe[src*="recaptcha/api2/bframe"],
iframe[src*="google.com/recaptcha/api2/bframe"] {
  position: fixed !important;
  z-index: 2147483647 !important;
  left: 50% !important;
  top: 50% !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: calc(100svh - 1rem) !important;
  border: 2px solid rgba(123,60,200,.38) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 30px 90px rgba(22,12,38,.34), 0 0 0 8px rgba(255,255,255,.58) !important;
  transform: translate(-50%, -50%) !important;
}

.flow-window,
.plus-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-height: min(42rem, calc(100svh - 1rem));
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(123, 60, 200, .24);
  border-radius: 14px;
  padding: 0;
  background:
    radial-gradient(circle at 12% 0, rgba(216,98,157,.16), transparent 10rem),
    radial-gradient(circle at 100% 12%, rgba(123,60,200,.16), transparent 12rem),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,245,223,.94));
  color: var(--text);
  box-shadow: 0 30px 90px rgba(49, 24, 70, .26), inset 0 0 0 1px rgba(255,255,255,.7);
}

#flow-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.window-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .12rem;
  min-height: 2.8rem;
  padding: .62rem 3rem .62rem .78rem;
  border-bottom: 1px solid rgba(123, 60, 200, .18);
  background:
    linear-gradient(90deg, rgba(36,21,47,.94), rgba(95,45,132,.9) 48%, rgba(216,98,157,.72));
  color: white;
  user-select: none;
}

.window-chrome small {
  color: rgba(255,255,255,.72);
  font-size: .66rem;
  font-weight: 850;
  white-space: nowrap;
}

.window-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-dialog.dragging,
.flow-dialog.dragging * {
  cursor: grabbing;
}

.plus-card {
  padding: .95rem;
  overflow: auto;
}

.window-close {
  position: absolute;
  z-index: 2;
  top: .45rem;
  right: .55rem;
  width: 2rem;
  min-height: 2rem;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  color: white;
  font-weight: 950;
}

.flow-screen {
  display: grid;
  gap: .72rem;
  padding: .95rem;
}

.flow-step-head {
  display: grid;
  gap: .22rem;
}

.flow-step-head > span {
  width: fit-content;
  border: 1px solid rgba(123,60,200,.18);
  border-radius: 999px;
  padding: .2rem .5rem;
  background: rgba(255,255,255,.68);
  color: var(--amethyst);
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.password-meter {
  display: grid;
  gap: .34rem;
  border: 1px solid rgba(123,60,200,.14);
  border-radius: 8px;
  padding: .62rem;
  background: rgba(255,255,255,.66);
}

.password-meter span {
  display: block;
  overflow: hidden;
  height: .5rem;
  border-radius: 999px;
  background: rgba(15,23,42,.1);
}

.password-meter i {
  display: block;
  width: calc((var(--score, 0) / 5) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #2dd4bf);
  transition: width .18s ease;
}

.password-meter[data-score="0"] { --score: 0; }
.password-meter[data-score="1"] { --score: 1; }
.password-meter[data-score="2"] { --score: 2; }
.password-meter[data-score="3"] { --score: 3; }
.password-meter[data-score="4"] { --score: 4; }
.password-meter[data-score="5"] { --score: 5; }

.password-meter strong {
  color: #1f2937;
  font-size: .8rem;
}

.password-meter small {
  color: var(--muted);
  font-weight: 750;
}

.player-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .68rem;
  align-items: center;
  border: 1px solid rgba(123,60,200,.2);
  border-radius: 12px;
  padding: .68rem;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78);
}

.player-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px solid rgba(36,21,47,.88);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(123,60,200,.94), rgba(216,98,157,.9));
  color: white;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: .62rem;
  box-shadow: 0 7px 0 rgba(36,21,47,.18);
}

.flow-help {
  border: 1px solid rgba(214,161,59,.24);
  border-radius: 10px;
  padding: .58rem .65rem;
  background: rgba(255,250,239,.78);
  color: #6b526f;
  font-size: .82rem;
  font-weight: 750;
}

.player-result:empty {
  display: none;
}

.player-found-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.2rem;
  gap: .9rem;
  align-items: center;
  border: 2px solid rgba(123,60,200,.24);
  border-radius: 14px;
  padding: .74rem;
  background:
    radial-gradient(circle at 100% 0, rgba(216,98,157,.18), transparent 7rem),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,231,255,.82));
  box-shadow: 0 14px 30px rgba(49,24,70,.14), inset 0 0 0 1px rgba(255,255,255,.76);
}

.player-found-card span {
  display: inline-grid;
  width: fit-content;
  border-radius: 999px;
  padding: .18rem .48rem;
  background: rgba(123,60,200,.12);
  color: var(--amethyst);
  font-size: .64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.player-found-card h3 {
  margin: .32rem 0 0;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.05;
}

.player-found-card p {
  margin-top: .24rem;
  font-weight: 800;
}

.player-found-card .primary {
  width: 100%;
  min-height: 2.28rem;
  margin-top: .6rem;
}

.player-found-card img {
  width: 7.1rem;
  height: 7.1rem;
  border: 3px solid rgba(36,21,47,.82);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.92), rgba(234,218,255,.76) 58%, rgba(123,60,200,.24));
  image-rendering: pixelated;
  object-fit: contain;
  padding: .34rem;
  box-shadow: 0 9px 0 rgba(36,21,47,.16), 0 18px 32px rgba(49,24,70,.16);
}

.code-digits {
  display: grid;
  grid-template-columns: repeat(6, minmax(2.2rem, 1fr));
  gap: .55rem;
}

.code-digit {
  min-height: 4.1rem;
  border-width: 2px;
  border-radius: 12px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 950;
  color: var(--amethyst);
  background: rgba(255,255,255,.86);
}

.success-screen {
  min-height: 16rem;
  place-items: center;
  text-align: center;
}

.success-burst {
  display: grid;
  width: 5.3rem;
  height: 5.3rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7b3cc8, #d8629d);
  color: white;
  font-size: 2.55rem;
  font-weight: 950;
  box-shadow: 0 0 0 0 rgba(123,60,200,.26);
  animation: tickPop .9s ease-out infinite;
}

.mc-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  border: 2px solid rgba(123,60,200,.2);
  border-radius: 14px;
  padding: .75rem;
  background: rgba(255,255,255,.74);
}

.mc-status-card span {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--amethyst), var(--rose));
  color: white;
  font-weight: 950;
}

.mc-status-card.warn span { background: linear-gradient(135deg, #a76a22, #d6a13b); }
.mc-status-card.ok span { background: linear-gradient(135deg, #4c9f70, #7bd88f); }

@keyframes tickPop {
  0% { transform: scale(.84); box-shadow: 0 0 0 0 rgba(123,60,200,.3); }
  55% { transform: scale(1.06); box-shadow: 0 0 0 1.2rem rgba(123,60,200,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(123,60,200,0); }
}

.flow-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .48rem;
}

.flow-actions.stacked {
  grid-template-columns: 1fr;
}

.flow-actions.after-found {
  display: none;
}

.skip-player {
  display: grid;
  gap: .12rem;
  width: 100%;
  min-height: 3.05rem;
  border: 1px solid rgba(123,60,200,.22);
  border-radius: 11px;
  padding: .62rem .72rem;
  background: rgba(255,255,255,.76);
  color: var(--amethyst);
  text-align: left;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(49, 24, 70, .08);
}

.danger-zone {
  margin-top: .75rem;
}

.soft.danger {
  border-color: rgba(185, 68, 91, .28);
  color: #a12646;
  background: rgba(255,245,248,.86);
}

.skip-player small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.book-help {
  border-left: 4px solid var(--wood);
  border-radius: 8px;
  padding: .65rem;
  background: rgba(255,255,255,.56);
}

.toast {
  position: fixed;
  left: .9rem;
  right: .9rem;
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
  z-index: 50;
  transform: translateY(1rem);
  opacity: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .72rem .82rem;
  background: rgba(32, 40, 27, .94);
  color: white;
  font-weight: 850;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.pwa-install {
  display: none;
}

.reveal {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  transition: opacity .46s ease, transform .46s ease, filter .46s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body[data-page="plus"] .reveal {
  filter: blur(2px);
  transition-duration: .28s;
}

body[data-page="plus"] .reveal.visible {
  filter: blur(0);
}

.quick-card,
.mini,
.info-card,
.privacy-card,
.rule-card,
.term-section,
.liquid-card,
.game-panel,
.store-closed {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.quick-card:hover,
.mini:hover,
.info-card:hover,
.privacy-card:hover,
.rule-card:hover,
.term-section:hover,
.liquid-card:hover,
.game-panel:hover {
  transform: translateY(-3px);
}

body[data-page="home"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,248,252,.86) 44%, rgba(255,255,255,.96)),
    linear-gradient(135deg, #eef6ff 0%, #ffffff 38%, #fff7ec 100%);
}

body[data-page="home"]::before {
  background-image:
    linear-gradient(rgba(30, 44, 64, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 44, 64, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

body[data-page="home"]::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.7) 52%, rgba(255,255,255,.92)),
    linear-gradient(115deg, rgba(104, 215, 255, .16), transparent 28%, rgba(255, 214, 112, .13) 72%, rgba(255,255,255,.2));
}

.dev-hero {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  min-height: min(43rem, calc(100svh - 6.2rem));
  padding: clamp(1.2rem, 4vw, 3.2rem) 0 1rem;
}

.dev-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .62rem;
  max-width: 45rem;
}

.dev-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  align-items: center;
  width: fit-content;
  border: 1px solid rgba(26, 31, 41, .1);
  border-radius: 999px;
  padding: .34rem .42rem .34rem .5rem;
  background: rgba(255,255,255,.74);
  color: #334155;
  font-size: .74rem;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(30, 41, 59, .08), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(18px) saturate(130%);
}

.dev-status-row b {
  border-radius: 999px;
  padding: .18rem .42rem;
  background: #1f2937;
  color: white;
  font-size: .68rem;
}

.live-dot {
  width: .58rem;
  height: .58rem;
  border-radius: 999px;
  background: #32d583;
  box-shadow: 0 0 0 .28rem rgba(50, 213, 131, .15);
  animation: livePulse 1.8s ease-in-out infinite;
}

.dev-hero h1 {
  max-width: 13ch;
  color: #111827;
  font-size: clamp(2.35rem, 6.2vw, 4.7rem);
  line-height: .96;
}

.dev-hero p {
  max-width: 45rem;
  color: #4b5563;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.58;
}

.dev-hero .brand-meaning {
  width: fit-content;
  border: 1px solid rgba(123, 60, 200, .16);
  border-radius: 999px;
  padding: .28rem .62rem;
  background: rgba(255,255,255,.62);
  color: #6d2fbd;
  font-size: .84rem;
  font-weight: 950;
}

.dev-actions {
  grid-template-columns: minmax(0, auto);
}

.dev-actions .soft {
  min-height: 2.62rem;
}

.dev-orbit {
  position: relative;
  z-index: 0;
  display: grid;
  min-height: 22rem;
  place-items: center;
}

.dev-device {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .85rem;
  width: min(28rem, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 28px;
  padding: 1rem 1rem 1.15rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(246,248,251,.7)),
    linear-gradient(135deg, rgba(104,215,255,.18), rgba(255,214,112,.18));
  box-shadow: 0 34px 95px rgba(15, 23, 42, .14), inset 0 0 0 1px rgba(255,255,255,.78);
  backdrop-filter: blur(22px) saturate(140%);
  animation: deviceFloat 5s ease-in-out infinite;
}

.device-top {
  display: flex;
  width: 100%;
  gap: .42rem;
  padding-bottom: .28rem;
}

.device-top span {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: #ff5f57;
}

.device-top span:nth-child(2) { background: #ffbd2e; }
.device-top span:nth-child(3) { background: #28c840; }

.dev-device img {
  width: min(8rem, 34vw);
  aspect-ratio: 1;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 18px 46px rgba(17,24,39,.16);
}

.dev-device .gfj-writer {
  min-height: 5.3rem;
  color: #111827;
  font-size: clamp(.92rem, 3.5vw, 1.65rem);
}

.build-bar {
  width: 100%;
  height: .7rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
}

.build-bar span {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #32d583, #64d2ff, #ffd166);
  animation: buildGlow 2.4s ease-in-out infinite;
}

.dev-account-strip,
.dev-progress,
.dev-timeline {
  margin-top: .85rem;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 22px 70px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(20px) saturate(130%);
}

.dev-account-strip {
  display: grid;
  gap: .85rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.dev-account-strip h2,
.dev-progress h2,
.dev-timeline h2 {
  color: #111827;
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.dev-account-strip p,
.dev-progress p,
.dev-timeline p {
  color: #4b5563;
  line-height: 1.55;
}

.dev-progress {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.dev-progress .section-head {
  align-items: end;
}

.dev-stage-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.dev-stage-tabs button {
  min-height: 2.7rem;
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 14px;
  padding: .62rem;
  background: rgba(248,250,252,.84);
  color: #334155;
  font-weight: 900;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dev-stage-tabs button:hover {
  transform: translateY(-2px);
}

.dev-stage-tabs button.active {
  border-color: rgba(17,24,39,.32);
  background: #111827;
  color: white;
}

.dev-stage-copy {
  display: grid;
  gap: .8rem;
  border-radius: 18px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(37, 56, 79, .94)),
    linear-gradient(90deg, rgba(100,210,255,.26), rgba(255,209,102,.18));
  color: white;
}

.dev-stage-copy span {
  display: inline-grid;
  width: fit-content;
  border-radius: 999px;
  padding: .25rem .55rem;
  background: rgba(255,255,255,.13);
  color: #a7f3d0;
  font-weight: 950;
}

.dev-stage-copy h3 {
  margin: .5rem 0 0;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.dev-stage-copy p {
  color: rgba(255,255,255,.76);
}

.dev-timeline {
  display: grid;
  gap: .82rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.dev-timeline > div {
  display: grid;
  gap: .62rem;
}

.dev-timeline article {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  gap: .78rem;
  align-items: center;
  min-height: 4.3rem;
  border: 1px solid rgba(17,24,39,.07);
  border-radius: 20px;
  padding: .72rem;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.dev-timeline span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent),
    linear-gradient(135deg, #111827, #2563eb);
  color: white;
  font-size: 1.1rem;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(15,23,42,.18), inset 0 -3px 0 rgba(0,0,0,.14);
}

.dev-timeline span svg {
  width: 1.34rem;
  height: 1.34rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dev-timeline article:nth-child(2) span {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent),
    linear-gradient(135deg, #0f766e, #22c55e);
}

.dev-timeline article:nth-child(3) span {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent),
    linear-gradient(135deg, #7c3aed, #06b6d4);
}

.dev-timeline article:nth-child(4) span {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent),
    linear-gradient(135deg, #334155, #f59e0b);
}

.dev-timeline p {
  margin: 0;
  color: #111827;
  font-weight: 850;
}

.dev-links {
  margin-bottom: 1rem;
}

.access-hero {
  display: grid;
  gap: .55rem;
  padding: clamp(1.15rem, 4vw, 2.4rem) 0 .45rem;
}

.access-hero h1 {
  max-width: 13ch;
  color: #111827;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: .95;
}

.access-hero p {
  max-width: 44rem;
  color: #4b5563;
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.56;
}

.early-access {
  display: grid;
  gap: .8rem;
  margin-top: .85rem;
}

.early-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .42rem;
}

.early-progress span {
  display: grid;
  gap: .22rem;
  min-height: 4.2rem;
  align-content: center;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: .55rem;
  background: rgba(255,255,255,.66);
  color: #64748b;
  font-size: .78rem;
  font-weight: 950;
  box-shadow: 0 12px 34px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(130%);
}

.early-progress b {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-size: .68rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.early-progress span.active {
  background: #111827;
  color: #a7f3d0;
}

.early-progress span.active b {
  color: white;
}

.early-progress span.done {
  background: rgba(236,253,245,.86);
  color: #047857;
}

.early-card {
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,250,252,.76)),
    linear-gradient(135deg, rgba(104,215,255,.12), rgba(255,214,112,.12));
  box-shadow: 0 26px 80px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(140%);
}

.early-screen {
  display: grid;
  gap: .85rem;
  padding: clamp(1rem, 3vw, 1.45rem);
}

.early-screen h2 {
  color: #111827;
  font-size: clamp(1.45rem, 4vw, 2.35rem);
}

.early-screen p {
  max-width: 62rem;
  color: #4b5563;
  line-height: 1.58;
}

.early-fields {
  display: grid;
  gap: .68rem;
}

.early-fields textarea {
  min-height: 9rem;
}

.early-warning {
  display: grid;
  gap: .62rem;
  border-radius: 22px;
  padding: .9rem;
  background: #111827;
  color: white;
}

.early-warning h3 {
  margin: 0;
  font-size: 1.05rem;
}

.early-warning ul {
  display: grid;
  gap: .58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.early-warning li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .52rem;
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

.early-warning li::before {
  content: "!";
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 9px;
  background: #ffd166;
  color: #111827;
  font-weight: 950;
}

.early-terms {
  display: grid;
  gap: .56rem;
}

.early-terms article,
.early-review article {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: .72rem;
  background: rgba(255,255,255,.68);
}

.early-terms span {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 13px;
  background: #111827;
  color: white;
  font-weight: 950;
}

.early-terms p {
  margin: 0;
  color: #334155;
  font-weight: 820;
}

.early-check {
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 18px;
  padding: .72rem;
  background: rgba(236,253,245,.72);
}

.early-review {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.early-review article {
  display: grid;
  grid-template-columns: 1fr;
}

.early-review article.wide {
  grid-column: 1 / -1;
}

.early-review span {
  color: #64748b;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.early-review strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.early-review p {
  margin: 0;
  color: #334155;
}

.early-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.early-actions .primary,
.early-actions .soft {
  min-width: min(100%, 11rem);
}

.early-done {
  justify-items: center;
  min-height: 24rem;
  align-content: center;
  text-align: center;
}

.early-done .success-burst {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(135deg, #32d583, #64d2ff);
  color: white;
  font-size: 2.4rem;
  font-weight: 950;
  box-shadow: 0 18px 50px rgba(50,213,131,.24);
}

.language-gate {
  border: 0;
  width: min(calc(100vw - 1.2rem), 32rem);
  max-width: none;
  margin: auto;
  padding: 0;
  background: transparent;
}

.language-gate::backdrop {
  background: rgba(8, 13, 22, .48);
  backdrop-filter: blur(16px) saturate(130%);
}

.language-gate-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,248,251,.84)),
    linear-gradient(135deg, rgba(104,215,255,.14), rgba(255,214,112,.16));
  box-shadow: 0 34px 110px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.72);
}

.gate-screen {
  display: grid;
  justify-items: center;
  gap: .72rem;
  padding: clamp(1.1rem, 5vw, 1.8rem);
  text-align: center;
}

.gate-screen img {
  width: clamp(4.6rem, 18vw, 5.8rem);
  max-width: 5.8rem;
  aspect-ratio: 1;
  display: block;
  border-radius: 22px;
  object-fit: cover;
  contain: paint;
  box-shadow: 0 20px 46px rgba(15,23,42,.16);
}

.gate-prompt {
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 999px;
  padding: .32rem .58rem;
  background: rgba(255,255,255,.75);
  color: #334155;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.gate-screen h2 {
  margin: .1rem 0 0;
  color: #111827;
  font-size: clamp(1.65rem, 5vw, 2.4rem);
}

.gate-screen p {
  max-width: 26rem;
  color: #4b5563;
  font-size: .98rem;
}

.gate-screen small {
  color: #64748b;
  font-weight: 800;
}

.gate-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  width: 100%;
}

@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .68; }
}

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes buildGlow {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.4) brightness(1.04); }
}

@media (max-width: 980px) {
  body {
    font-size: 13px;
    padding-bottom: calc(6.3rem + env(safe-area-inset-bottom));
    background-attachment: scroll;
    background-position: 52% top;
    background-size: auto 48rem;
  }

  body::after {
    background:
      linear-gradient(180deg, rgba(248,250,255,.5), rgba(255,255,255,.76) 42%, rgba(249,246,255,.88)),
      linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.08) 52%, rgba(255,255,255,.2));
  }

  body[data-page="home"] {
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,248,252,.9) 44%, rgba(255,255,255,.97)),
      linear-gradient(135deg, #f7fbff 0%, #ffffff 52%, #fff9f0 100%);
  }

  .dev-hero {
    min-height: auto;
    padding-top: .75rem;
  }

  .dev-orbit {
    min-height: 17rem;
  }

  .dev-device {
    width: min(24rem, 100%);
    border-radius: 24px;
  }

  .dev-stage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .early-progress {
    grid-template-columns: 1fr;
  }

  .early-progress span {
    grid-template-columns: 2rem minmax(0, 1fr);
    min-height: 3.2rem;
    align-items: center;
  }

  .early-progress b {
    white-space: normal;
  }

  .early-review {
    grid-template-columns: 1fr;
  }

  .early-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topbar {
    min-height: 3.75rem;
    padding: .52rem .82rem;
    background: rgba(255, 255, 255, .9);
  }

  .brand img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .brand strong {
    font-size: .98rem;
  }

  .brand small {
    font-size: .72rem;
  }

  .mobile-nav {
    left: .72rem;
    right: .72rem;
    bottom: calc(.52rem + env(safe-area-inset-bottom));
    gap: .18rem;
    padding: .28rem;
    border-color: rgba(86, 58, 114, .14);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 48px rgba(33, 24, 41, .2), inset 0 1px 0 rgba(255,255,255,.86);
  }

  .mobile-nav a {
    min-height: 2.62rem;
    border-radius: 8px;
    font-size: .62rem;
    line-height: 1;
  }

  .mobile-nav span {
    font-size: .95rem;
  }

  .mobile-nav a.active {
    background: linear-gradient(180deg, #f2e9ff, #ead9ff);
    box-shadow: inset 0 -2px 0 rgba(123,60,200,.1);
  }

  .page-shell {
    width: min(100% - 1rem, 1080px);
    padding-top: .62rem;
    padding-bottom: 1.6rem;
  }

  .hero-stage {
    min-height: auto;
    gap: .7rem;
    padding: .35rem 0 .55rem;
  }

  .hero-copy { order: 2; }

  .logo-stage {
    order: 1;
    gap: .35rem;
    padding: .18rem 0 0;
  }

  .logo-stage img {
    width: 5.15rem;
    border-width: 4px;
    box-shadow: 0 14px 32px rgba(78, 54, 113, .14);
  }

  .gfj-writer {
    width: min(14.5rem, calc(100vw - 1rem));
    min-height: 5.3rem;
    font-size: 1.12rem;
    gap: .18rem;
  }

  .gfj-writer span {
    min-height: 1.18rem;
  }

  h1 {
    font-size: 1.78rem;
    line-height: 1.04;
  }

  h2 {
    font-size: 1.08rem;
  }

  .kicker {
    font-size: .72rem;
    line-height: 1.18;
  }

  .hero-copy p,
  .panel-intro p,
  .product p,
  .support p {
    font-size: .9rem;
    line-height: 1.48;
  }

  .hero-actions {
    grid-template-columns: 1fr;
    gap: .58rem;
    margin-top: .7rem;
  }

  .primary,
  .soft,
  .tabs button,
  .chips button {
    min-height: 2.85rem;
    border-radius: 8px;
    padding: .62rem .78rem;
    line-height: 1.12;
  }

  .soft {
    background: rgba(255,255,255,.9);
  }

  .quick-grid,
  .story-strip,
  .account-grid,
  .perk-grid,
  .mode-map {
    gap: .62rem;
    margin-top: .7rem;
  }

  .quick-card,
  .mini,
  .minecraft-window,
  .support,
  .real-data,
  .full-scroll,
  .policy-screen,
  .product,
  .book-panel {
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 30px rgba(36, 33, 25, .1), inset 0 1px 0 rgba(255,255,255,.74);
  }

  .quick-card,
  .mini,
  .minecraft-window,
  .support,
  .real-data,
  .book-panel {
    padding: .78rem;
  }

  .quick-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem .62rem;
  }

  .product,
  .panel-intro {
    gap: .68rem;
    padding: .72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 30px rgba(36, 33, 25, .1);
  }

  .panel-intro h1 {
    font-size: 1.58rem;
    line-height: 1.04;
  }

  .auth-launch {
    gap: .62rem;
    margin-top: .62rem;
  }

  .login-box {
    gap: .42rem;
    padding: .68rem;
  }

  .login-box h2 {
    font-size: 1.08rem;
  }

  input,
  textarea {
    min-height: 2.45rem;
  }

  .player-hub { grid-template-columns: 1fr; border-radius: 12px; padding: .86rem; text-align: center; }
  .player-halo { width: 5.2rem; margin-inline: auto; border-radius: 19px; }
  .player-halo img { width: 3.95rem; height: 3.95rem; border-radius: 14px; }
  .status-row { justify-content: center; }

  .player-hub-copy h2 {
    font-size: 2.15rem;
    line-height: 1.02;
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-actions button {
    min-height: 2.55rem;
    padding-inline: .5rem;
    font-size: .82rem;
  }

  .home-actions { grid-template-columns: 1fr 1fr; }
  .home-actions input { grid-column: 1 / -1; }

  .game-panel { border-radius: 12px; padding: .72rem; }
  .game-section { border-radius: 10px; }
  .game-section summary { border-radius: 10px 10px 0 0; }

  .stats,
  .inventory,
  .homes-list {
    grid-template-columns: 1fr;
  }

  .system-metrics {
    grid-template-columns: 1fr;
  }

  .home-actions {
    gap: .42rem;
  }

  .home-actions button,
  .home-actions input {
    min-height: 2.35rem;
    font-size: .78rem;
  }

  .settings-grid { grid-template-columns: 1fr; padding: .68rem; }

  .settings-shell,
  .flow-window,
  .plus-card {
    border-radius: 12px;
  }

  .book-panel { grid-template-columns: 1fr; align-items: stretch; }

  .book-scene {
    min-height: 22rem;
  }

  .book-pages { inset: .68rem; grid-template-columns: 1fr; gap: 0; }
  .book-page { padding: .78rem; }
  .book-page.right { display: none; }
  .page-icon { width: 2rem; height: 2rem; font-size: .56rem; }
  .book-page h3 { margin-top: .42rem; font-size: .78rem; line-height: 1.2; }
  .book-page p { font-size: .82rem; line-height: 1.4; }
  .book-page li { font-size: .78rem; line-height: 1.34; }
  .book-controls { gap: .34rem; }

  .mc-button {
    min-height: 2.5rem;
    padding: .48rem .58rem;
    font-size: .78rem;
  }

  .mode-cover { width: 4.4rem; }
  .mode-cover img { width: 2.2rem; }
  .panel-logo,
  .product img { width: 4.2rem; }

  .flow-window,
  .plus-card,
  .settings-shell {
    width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  #flow-body {
    min-height: 0;
    overflow: auto;
  }

  .window-chrome {
    grid-template-columns: 1fr;
    min-height: calc(3.05rem + env(safe-area-inset-top));
    padding: calc(.6rem + env(safe-area-inset-top)) 3.2rem .62rem .88rem;
  }

  .window-close {
    position: fixed;
    z-index: 12;
    top: calc(.52rem + env(safe-area-inset-top));
    right: .72rem;
    width: 2.25rem;
    min-height: 2.25rem;
    border-color: rgba(255,255,255,.72);
    background: rgba(36,21,47,.34);
    box-shadow: 0 10px 24px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.28);
  }

  .window-chrome small { display: none; }
  .flow-screen {
    min-height: calc(100svh - 3.05rem - env(safe-area-inset-top));
    align-content: start;
    padding: .95rem .88rem calc(1.1rem + env(safe-area-inset-bottom));
    gap: .7rem;
  }
  .player-card { grid-template-columns: 1fr; padding: .58rem; }
  .player-icon { width: 2.55rem; height: 2.55rem; }
  .player-found-card { grid-template-columns: minmax(0, 1fr) 5.4rem; gap: .58rem; padding: .62rem; }
  .player-found-card img { width: 5.35rem; height: 5.35rem; }
  .player-found-card h3 { font-size: 1rem; }

  .code-digits {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .32rem;
  }

  .code-digit {
    min-width: 0;
    min-height: 3.35rem;
    border-radius: 10px;
    padding: .3rem;
    font-size: 1.35rem;
  }

  .flow-actions {
    grid-template-columns: 1fr;
  }

  .toast {
    bottom: calc(5.35rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .quick-actions { grid-template-columns: 1fr; }
  .dev-stage-tabs,
  .gate-options {
    grid-template-columns: 1fr;
  }
  .dev-status-row {
    border-radius: 18px;
  }
}

@media (min-width: 981px) {
  body { padding-bottom: 0; }
  .topbar { grid-template-columns: auto 1fr auto; padding-inline: 1.15rem; }
  .desktop-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
  }
  .desktop-nav a,
  .account-link {
    display: inline-grid;
    min-height: 2.1rem;
    place-items: center;
    border-radius: 8px;
    padding: .35rem .54rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
  }
  .desktop-nav a.active {
    background: #f1e7ff;
    color: var(--amethyst);
  }
  .mobile-nav { display: none; }
  .page-shell { padding-top: 1.35rem; }
  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .site-footer nav {
    justify-content: end;
  }
  .picture-wizard,
  .crop-controls,
  .picture-preview-grid,
  .gfj-admin-row,
  .gfj-admin-row.admin-photo-row,
  .gfj-admin-actions.account-admin-form,
  .gfj-admin-log-grid,
  .picture-admin-toolbar,
  .admin-picture-card {
    grid-template-columns: 1fr;
  }
  .gfj-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gfj-admin-topbar,
  .gfj-admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .gfj-admin-topbar > div,
  .gfj-admin-tools,
  .admin-flags,
  .gfj-admin-actions {
    justify-content: start;
  }
  .admin-picture-actions {
    justify-content: start;
  }
  .picture-head {
    align-items: stretch;
    flex-direction: column;
  }
  .cookie-consent {
    left: 50%;
    right: auto;
    bottom: 1rem;
    width: min(980px, calc(100% - 2rem));
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    transform: translateX(-50%);
  }
  .cookie-consent nav {
    grid-template-columns: repeat(3, auto);
    align-items: center;
  }
  .privacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-stage,
  .dev-hero,
  .panel-intro,
  .product {
    grid-template-columns: 1.12fr .88fr;
  }
  .hero-actions { grid-template-columns: auto auto; justify-content: start; }
  .dev-actions { grid-template-columns: auto auto auto; }
  .dev-account-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .dev-stage-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dev-stage-copy { grid-template-columns: minmax(0, 1fr) 14rem; align-items: end; }
  .dev-timeline > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-stage img { width: min(16rem, 30vw); }
  .quick-grid,
  .story-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .store-closed-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .info-toolbar {
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: end;
  }
  .terms-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }
  .terms-index {
    position: sticky;
    top: 5.3rem;
  }
  .book-panel {
    grid-template-columns: minmax(38rem, 1fr) minmax(12rem, .34fr);
    align-items: center;
  }
  .book-scene { width: 100%; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-launch { grid-template-columns: 1.1fr .9fr; }
  .stats,
  .inventory,
  .homes-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :root {
    --mobile-glass: rgba(255, 255, 255, .64);
    --mobile-glass-strong: rgba(255, 255, 255, .82);
    --mobile-ink: #171320;
    --mobile-soft: #5d5968;
    --mobile-line: rgba(255, 255, 255, .58);
    --mobile-blue: #68d7ff;
    --mobile-mint: #62d49e;
    --mobile-violet: #7b61ff;
    --mobile-pink: #ff7ac8;
  }

  html {
    scroll-padding-top: 5.25rem;
  }

  body {
    min-height: 100svh;
    padding-top: calc(4.7rem + env(safe-area-inset-top));
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 12% 0, rgba(104,215,255,.42), transparent 18rem),
      radial-gradient(circle at 90% 8%, rgba(255,122,200,.34), transparent 18rem),
      linear-gradient(155deg, #f7fbff 0%, #eef2ff 46%, #fff8fb 100%);
    background-attachment: fixed;
    background-size: 52rem 52rem, 48rem 48rem, auto;
    color: var(--mobile-ink);
    font-size: 14px;
  }

  body::before {
    inset: -35vh -35vw;
    z-index: -3;
    background:
      linear-gradient(rgba(255,255,255,.38) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, #000, transparent 72%);
  }

  body::after {
    inset: -35vh -35vw;
    z-index: -2;
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.9), transparent 10rem),
      radial-gradient(circle at 80% 88%, rgba(104,215,255,.18), transparent 16rem),
      linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.86) 60%, rgba(248,249,255,.94));
  }

  #sky-canvas {
    opacity: .26;
    filter: saturate(.8) blur(.2px);
  }

  .topbar {
    position: fixed;
    top: calc(.68rem + env(safe-area-inset-top));
    left: .85rem;
    right: .85rem;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 3.45rem;
    border: 1px solid var(--mobile-line);
    border-radius: 999px;
    padding: .42rem .48rem .42rem .52rem;
    background: rgba(255,255,255,.68);
    box-shadow: 0 18px 46px rgba(35, 25, 66, .16), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(24px) saturate(170%);
  }

  .brand {
    gap: .5rem;
    min-width: 0;
  }

  .brand img {
    width: 2.24rem;
    height: 2.24rem;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 10px 24px rgba(65, 52, 117, .18);
  }

  .brand strong {
    color: #201a2c;
    font-size: .9rem;
  }

  .brand small {
    color: var(--mobile-soft);
    font-size: .68rem;
  }

  .header-actions {
    gap: .24rem;
    min-width: max-content;
  }

  .language-switch {
    display: flex;
    gap: .2rem;
  }

  .language-switch button {
    min-height: 2.05rem;
    border-radius: 999px;
    padding: .3rem .42rem;
    font-size: .68rem;
    box-shadow: 0 8px 18px rgba(60, 49, 112, .12), inset 0 1px 0 rgba(255,255,255,.82);
  }

  .cookie-consent {
    left: .55rem;
    right: .55rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom));
    border-radius: 16px;
    padding: .78rem;
    max-height: min(72svh, 28rem);
  }

  .cookie-consent nav {
    grid-template-columns: 1fr;
  }

  .mobile-menu-toggle {
    display: grid;
    width: 2.55rem;
    min-height: 2.55rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    padding: .68rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.58)),
      linear-gradient(135deg, rgba(104,215,255,.24), rgba(123,97,255,.24));
    box-shadow: 0 10px 28px rgba(60, 49, 112, .16), inset 0 1px 0 rgba(255,255,255,.86);
  }

  .mobile-menu-toggle span {
    display: block;
    width: 1rem;
    height: 2px;
    border-radius: 999px;
    background: #342b45;
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobile-menu-toggle span + span {
    margin-top: .18rem;
  }

  body.menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(.2rem) rotate(45deg);
  }

  body.menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-.2rem) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    top: calc(4.7rem + env(safe-area-inset-top));
    left: auto;
    right: .85rem;
    bottom: auto;
    z-index: 55;
    display: grid;
    width: min(16.5rem, calc(100vw - 1.7rem));
    max-height: calc(100svh - 6rem);
    overflow: auto;
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .56rem;
    border: 1px solid var(--mobile-line);
    border-radius: 22px;
    background: rgba(255,255,255,.7);
    box-shadow: 0 24px 70px rgba(31, 24, 62, .24), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(28px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.55rem) scale(.97);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease;
  }

  body.menu-open .mobile-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .mobile-nav a {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    min-height: 3rem;
    place-items: center start;
    gap: .6rem;
    border-radius: 16px;
    padding: .42rem .62rem;
    color: #30283f;
    font-size: .92rem;
    font-weight: 900;
  }

  .mobile-nav span {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 13px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58)),
      linear-gradient(135deg, rgba(104,215,255,.2), rgba(123,97,255,.18));
    color: var(--mobile-violet);
    box-shadow: 0 8px 18px rgba(60,49,112,.1), inset 0 1px 0 rgba(255,255,255,.9);
  }

  .mobile-nav-icon svg {
    width: 1.08rem;
    height: 1.08rem;
  }

  .mobile-nav a.active {
    background: linear-gradient(135deg, rgba(104,215,255,.28), rgba(123,97,255,.22));
    color: #211834;
  }

  .mobile-nav a.active .mobile-nav-icon {
    background:
      linear-gradient(135deg, #2dd4bf, #6366f1);
    color: white;
    box-shadow: 0 10px 24px rgba(99,102,241,.22), inset 0 1px 0 rgba(255,255,255,.42);
  }

  .page-shell {
    width: min(100% - 1.05rem, 32rem);
    padding: .35rem 0 2.2rem;
  }

  h1 {
    font-size: 2.05rem;
    line-height: .98;
    letter-spacing: 0;
  }

  h2 {
    font-size: 1.05rem;
    line-height: 1.12;
  }

  p {
    color: var(--mobile-soft);
    line-height: 1.48;
  }

  .kicker {
    color: #7258e9;
    font-size: .72rem;
    letter-spacing: 0;
  }

  .hero-stage {
    min-height: auto;
    gap: .92rem;
    padding: .25rem 0 .7rem;
  }

  .hero-copy,
  .logo-stage {
    order: initial;
  }

  .hero-copy {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mobile-line);
    border-radius: 30px;
    padding: 1.05rem;
    background:
      linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.42)),
      radial-gradient(circle at 100% 0, rgba(255,122,200,.22), transparent 9rem),
      radial-gradient(circle at 0 100%, rgba(98,212,158,.2), transparent 9rem);
    box-shadow: 0 22px 58px rgba(35, 25, 66, .16), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(26px) saturate(170%);
  }

  .hero-copy::after {
    content: none;
  }

  .hero-copy p {
    max-width: 21rem;
    font-size: .98rem;
  }

  .logo-stage {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: .8rem;
    border: 1px solid var(--mobile-line);
    border-radius: 26px;
    padding: .82rem;
    background: rgba(255,255,255,.58);
    box-shadow: 0 16px 42px rgba(35, 25, 66, .12), inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter: blur(22px) saturate(160%);
  }

  .logo-stage img {
    width: 4.25rem;
    border-width: 2px;
  }

  .gfj-writer {
    width: auto;
    min-height: 3.3rem;
    justify-content: start;
    font-size: 1rem;
    text-align: left;
  }

  .gfj-writer span {
    justify-items: start;
    min-height: 1rem;
  }

  .hero-actions,
  .help-actions,
  .flow-actions {
    grid-template-columns: 1fr;
    gap: .62rem;
  }

  .primary,
  .soft,
  .mc-button {
    min-height: 3rem;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 18px;
    padding: .72rem .92rem;
    box-shadow: 0 12px 28px rgba(49, 38, 95, .14), inset 0 1px 0 rgba(255,255,255,.78);
  }

  .primary {
    background:
      linear-gradient(180deg, rgba(255,255,255,.26), transparent 48%),
      linear-gradient(135deg, #2d9d82, #28bad0 48%, #7456e7);
  }

  .soft,
  .mc-button {
    background: rgba(255,255,255,.72);
    color: #294f3d;
  }

  .quick-grid,
  .story-strip,
  .account-grid,
  .perk-grid,
  .mode-map {
    gap: .72rem;
    margin-top: .72rem;
  }

  .quick-card,
  .mini,
  .minecraft-window,
  .book-panel,
  .product,
  .support,
  .real-data,
  .full-scroll,
  .policy-screen,
  .panel-intro,
  .login-box,
  .liquid-card,
  .mode-node {
    border: 1px solid var(--mobile-line);
    border-radius: 26px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.42));
    box-shadow: 0 18px 48px rgba(35, 25, 66, .13), inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(22px) saturate(165%);
  }

  .quick-card,
  .mini,
  .minecraft-window,
  .support,
  .real-data,
  .full-scroll,
  .policy-screen,
  .panel-intro,
  .product,
  .book-panel,
  .login-box,
  .liquid-card,
  .mode-node {
    padding: .95rem;
  }

  .quick-card {
    min-height: 7rem;
    align-content: center;
    background:
      radial-gradient(circle at 92% 10%, rgba(104,215,255,.34), transparent 5rem),
      linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  }

  .quick-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 15px;
  }

  .book-panel {
    border-width: 1px;
  }

  .book-scene {
    min-height: 19.5rem;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 16px 38px rgba(35,25,66,.16);
  }

  .book-page {
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,246,214,.96), rgba(255,230,163,.84));
  }

  .book-controls {
    grid-template-columns: 1fr auto 1fr;
  }

  .product,
  .panel-intro {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .product img,
  .panel-logo {
    width: 4.15rem;
    box-shadow: 0 12px 30px rgba(35, 25, 66, .14);
  }

  .product h1,
  .panel-intro h1 {
    font-size: 1.75rem;
  }

  .mode-cover {
    width: 4.65rem;
    border-radius: 18px;
  }

  .mode-node {
    min-height: 9rem;
  }

  .mode-node > span,
  .policy-screen article > span {
    border-radius: 16px;
    background: linear-gradient(135deg, var(--mobile-violet), var(--mobile-pink));
  }

  .policy-screen article {
    border-radius: 20px;
    background: rgba(255,255,255,.58);
  }

  .window-title {
    margin: -.95rem -.95rem .85rem;
    border-radius: 26px 26px 0 0;
    background:
      linear-gradient(90deg, rgba(123,97,255,.2), rgba(104,215,255,.15));
    color: #372c56;
  }

  input,
  textarea {
    min-height: 3rem;
    border-color: rgba(82, 64, 120, .16);
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    font-size: 16px;
    line-height: 1.2;
    touch-action: manipulation;
  }

  label {
    gap: .42rem;
    font-size: .78rem;
  }

  .auth-launch {
    display: grid;
    gap: .82rem;
  }

  .guest-intro {
    display: none;
  }

  .auth-launch .login-box {
    order: -1;
  }

  .auth-launch .minecraft-window {
    min-height: 0;
    padding: .9rem;
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.36)),
      radial-gradient(circle at 0 0, rgba(98,212,158,.22), transparent 9rem);
  }

  .auth-launch .minecraft-window .window-title {
    display: none;
  }

  .auth-launch .minecraft-window p {
    margin: 0;
    font-size: .9rem;
  }

  .auth-launch .minecraft-window .primary {
    margin-top: .72rem;
  }

  .login-box {
    position: relative;
    overflow: hidden;
    gap: .72rem;
    border-radius: 30px;
    padding: 1rem;
    background:
      linear-gradient(150deg, rgba(255,255,255,.88), rgba(255,255,255,.48)),
      radial-gradient(circle at 8% 0, rgba(104,215,255,.25), transparent 10rem),
      radial-gradient(circle at 100% 18%, rgba(123,97,255,.18), transparent 10rem);
  }

  .login-box::before {
    content: "GFJ";
    position: absolute;
    right: .85rem;
    top: .65rem;
    color: rgba(123,97,255,.12);
    font-weight: 950;
    font-size: 2.9rem;
    line-height: 1;
    pointer-events: none;
  }

  .login-box h2 {
    max-width: 13rem;
    font-size: 1.35rem;
    line-height: 1.02;
  }

  .login-box p {
    margin-top: 0;
    font-size: .9rem;
  }

  .login-box label {
    color: #332c43;
    font-size: .82rem;
  }

  .login-box input {
    min-height: 3.45rem;
    border-radius: 20px;
    padding-inline: 1rem;
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  }

  .login-box .primary.wide {
    min-height: 3.35rem;
    border-radius: 20px;
  }

  .login-box [data-login-mode],
  .login-box [data-login-back] {
    min-height: 2.85rem;
    border-radius: 18px;
    background: rgba(255,255,255,.66);
    color: #403650;
  }

  .login-box [name="loginCode"],
  .login-box [name="resetCode"] {
    min-height: 4rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 950;
    letter-spacing: .18rem;
  }

  .player-hub,
  .game-panel,
  .settings-shell,
  .flow-window,
  .plus-card {
    border-radius: 28px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34)),
      radial-gradient(circle at 10% 0, rgba(104,215,255,.22), transparent 11rem),
      radial-gradient(circle at 100% 20%, rgba(255,122,200,.18), transparent 12rem);
    box-shadow: 0 22px 60px rgba(35, 25, 66, .16), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(26px) saturate(175%);
  }

  .player-hub {
    color: var(--mobile-ink);
    text-align: left;
  }

  .player-hub::before {
    opacity: .35;
  }

  .player-hub-copy .kicker {
    color: var(--mobile-violet);
  }

  .player-hub-copy p {
    color: var(--mobile-soft);
  }

  .status-row {
    justify-content: start;
  }

  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .game-section {
    border-radius: 22px;
    background: rgba(255,255,255,.54);
  }

  .game-section summary {
    border-radius: 22px 22px 0 0;
    background:
      linear-gradient(135deg, rgba(44, 160, 132, .92), rgba(86, 96, 224, .86));
  }

  .stats,
  .inventory,
  .homes-list,
  .system-metrics {
    grid-template-columns: 1fr;
  }

  .picture-summary,
  .picture-admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }

  .picture-summary article,
  .picture-admin-metrics article {
    border-radius: 18px;
    padding: .62rem;
  }

  .picture-summary b,
  .picture-admin-metrics b {
    font-size: 1.2rem;
  }

  .picture-card {
    grid-template-columns: 4.9rem minmax(0, 1fr);
    border-radius: 20px;
    padding: .72rem;
    background: rgba(255,255,255,.66);
  }

  .picture-card img {
    border-radius: 16px;
  }

  .picture-wizard,
  .crop-controls,
  .picture-preview-grid,
  .picture-admin-toolbar,
  .picture-admin-diagnostics,
  .admin-picture-card {
    grid-template-columns: 1fr;
  }

  .picture-admin-toolbar {
    gap: .48rem;
  }

  .picture-admin-toolbar input,
  .picture-admin-toolbar select,
  .picture-admin-toolbar button {
    width: 100%;
  }

  .admin-picture-card {
    border-radius: 22px;
    padding: .78rem;
    gap: .72rem;
    background: rgba(255,255,255,.68);
  }

  .admin-picture-preview,
  .admin-picture-card img {
    width: 100%;
  }

  .admin-picture-preview {
    max-height: 18rem;
  }

  .admin-picture-card img {
    max-height: 18rem;
    object-fit: contain;
  }

  .admin-picture-title {
    display: grid;
    gap: .18rem;
  }

  .admin-picture-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  .admin-picture-actions button {
    width: 100%;
    white-space: normal;
  }

  .stats article,
  .item-card,
  .home-card,
  .friend-card,
  .mail-card,
  .activity-thread,
  .system-metrics article {
    border-radius: 20px;
    background: rgba(255,255,255,.64);
  }

  .flow-dialog,
  .plus-modal,
  .settings-modal {
    width: 100vw;
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0;
  }

  .flow-dialog[open],
  .plus-modal[open],
  .settings-modal[open] {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: none;
  }

  .window-chrome {
    position: sticky;
    top: 0;
    z-index: 3;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(36,21,47,.9), rgba(103,82,230,.82));
  }

  .pwa-install {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 80;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    border: 1px solid var(--mobile-line);
    border-radius: 24px;
    padding: .74rem;
    background: rgba(255,255,255,.78);
    box-shadow: 0 26px 70px rgba(35, 25, 66, .26), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(26px) saturate(180%);
  }

  .pwa-install[hidden] {
    display: none;
  }

  .pwa-install img {
    width: 3rem;
    height: 3rem;
    display: block;
    flex: 0 0 auto;
    border-radius: 17px;
    object-fit: cover;
    contain: paint;
  }

  .pwa-install strong,
  .pwa-install small {
    display: block;
  }

  .pwa-install strong {
    font-size: .92rem;
    line-height: 1.12;
  }

  .pwa-install small {
    margin-top: .12rem;
    color: var(--mobile-soft);
    font-size: .74rem;
    font-weight: 760;
  }

  .pwa-install-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column: 1 / -1;
    gap: .45rem;
  }

  .pwa-install .window-close {
    position: static;
    width: 2.35rem;
    min-height: 2.35rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #4d435e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    justify-self: end;
  }

  .pwa-install-actions button {
    min-height: 2.35rem;
    border-radius: 15px;
    padding: .42rem .62rem;
    font-weight: 900;
  }

  .pwa-install-actions .soft {
    min-height: 2.35rem;
  }

  .install-guide {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: end center;
    padding: 1rem .75rem calc(1rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 100%, rgba(255,255,255,.72), transparent 18rem),
      rgba(26, 20, 42, .22);
    backdrop-filter: blur(12px) saturate(140%);
  }

  .install-guide-card {
    position: relative;
    width: min(100%, 30rem);
    overflow: hidden;
    border: 1px solid var(--mobile-line);
    border-radius: 30px;
    padding: 1rem;
    background:
      linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.58)),
      radial-gradient(circle at 0 0, rgba(104,215,255,.28), transparent 11rem),
      radial-gradient(circle at 100% 12%, rgba(255,122,200,.18), transparent 11rem);
    box-shadow: 0 28px 80px rgba(23, 19, 32, .28), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(30px) saturate(185%);
  }

  .install-guide-card img {
    width: 3.55rem;
    height: 3.55rem;
    display: block;
    border-radius: 20px;
    object-fit: cover;
    contain: paint;
    box-shadow: 0 12px 30px rgba(35, 25, 66, .18);
  }

  .install-guide-card .window-close {
    top: .82rem;
    right: .82rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #4d435e;
  }

  .install-guide-card h2 {
    max-width: 15rem;
    margin-top: .5rem;
    font-size: 1.55rem;
  }

  .install-guide-card ol {
    display: grid;
    gap: .55rem;
    margin: .85rem 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: install-step;
  }

  .install-guide-card li {
    counter-increment: install-step;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    min-height: 3rem;
    border-radius: 18px;
    padding: .55rem .65rem;
    background: rgba(255,255,255,.62);
    color: #332c43;
    font-weight: 850;
  }

  .install-guide-card li::before {
    content: counter(install-step);
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mobile-mint), var(--mobile-violet));
    color: white;
    font-weight: 950;
  }
}

@media (max-width: 390px) {
  .topbar {
    left: .55rem;
    right: .55rem;
    padding-inline: .42rem;
  }

  .brand {
    gap: .4rem;
  }

  .brand img {
    width: 2.05rem;
    height: 2.05rem;
  }

  .brand small {
    display: none;
  }

  .language-switch button {
    padding-inline: .34rem;
  }

  .mobile-menu-toggle {
    width: 2.32rem;
    min-height: 2.32rem;
  }

  .code-digits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .store-hero,
  .checkout-showcase {
    grid-template-columns: 1fr;
  }

  .store-orbit {
    min-height: 11rem;
    order: -1;
  }

  .store-orbit img {
    width: min(46vw, 9.5rem);
    border-radius: 24%;
  }

  .rank-grid,
  .store-principles {
    grid-template-columns: 1fr;
  }

  .checkout-showcase h2,
  .store-hero h1 {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .store-hero {
    border-radius: 20px;
    padding: .95rem;
    gap: .55rem;
  }

  .store-hero-actions,
  .store-hero-actions a,
  .rank-card button,
  .checkout-screen button {
    width: 100%;
  }

  .store-hero-actions a,
  .rank-card button,
  .checkout-screen button {
    justify-content: center;
  }

  .store-hero h1 {
    font-size: clamp(1.9rem, 12vw, 3rem);
  }

  .store-principles {
    gap: .55rem;
  }

  .rank-card,
  .checkout-showcase {
    border-radius: 18px;
  }

  .rank-topline {
    align-items: flex-start;
  }

  .rank-topline b {
    text-align: right;
    font-size: 1.08rem;
  }

  .checkout-screen li {
    grid-template-columns: 1.85rem minmax(0, 1fr);
  }

  .checkout-screen strong {
    font-size: 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Final cascade: keeps the redesign ahead of the legacy theme overrides. */
:root { --bg:#070817; --text:#f7f5ff; --muted:#b8b8d3; --line:rgba(255,255,255,.16); --amethyst:#a879ff; --violet:#7657ff; --rose:#ff5fc7; --gold:#ffd36d; --shadow:0 28px 90px rgba(0,0,0,.32); }
body { color:var(--text); background:radial-gradient(circle at 12% 8%,rgba(98,164,255,.22),transparent 22rem),radial-gradient(circle at 85% 10%,rgba(255,88,210,.18),transparent 24rem),radial-gradient(circle at 52% 74%,rgba(122,82,255,.14),transparent 34rem),linear-gradient(135deg,#050611,#11102a 48%,#090b1a); }
body::before { opacity:.48; background-image:linear-gradient(rgba(156,128,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(156,128,255,.07) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
body::after { background:radial-gradient(circle at 18% 30%,rgba(73,227,255,.11),transparent 15rem),radial-gradient(circle at 80% 40%,rgba(255,95,199,.11),transparent 18rem),linear-gradient(115deg,rgba(255,255,255,.045),transparent 42%,rgba(255,255,255,.04)); }
.topbar { margin:.8rem auto 0; width:min(1180px,calc(100% - 1.3rem)); min-height:4rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,.055) 48%,rgba(140,108,255,.12)); box-shadow:0 18px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter:blur(26px) saturate(175%); -webkit-backdrop-filter:blur(26px) saturate(175%); overflow:hidden; }
.topbar::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.12) 45%,transparent 62%); transform:translateX(-90%); animation:gfjGlassSweep 9s ease-in-out infinite; }
.brand,.header-actions { position:relative; z-index:1; }
.brand img { box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 24px rgba(117,87,255,.45); }
.brand strong { color:#fff; text-shadow:0 0 24px rgba(176,134,255,.7); }
.brand small { color:#c9c3e8; }
.collab-bridge,.language-switch,.account-link,.mobile-menu-toggle { border-color:rgba(255,255,255,.2)!important; background:rgba(255,255,255,.1)!important; color:#f7f4ff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.16)!important; backdrop-filter:blur(14px); }
.page-shell { width:min(1180px,calc(100% - 1.3rem)); padding-top:1.25rem; }
.domain-notice,.dev-account-strip,.dev-timeline,.quick-grid>*,.game-section,.panel-card,.access-card,.store-card,.info-card { border-color:rgba(255,255,255,.15)!important; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045))!important; box-shadow:0 22px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.17)!important; backdrop-filter:blur(22px) saturate(155%); }
.domain-notice strong,.dev-hero h1,h1,h2,h3 { color:#fff!important; }
.domain-notice p,.dev-hero p,.dev-timeline p,.dev-account-strip p,.quick-grid p,.panel-card p,.info-card p { color:#bbb9d6!important; }
.domain-notice-close { color:#fff!important; background:rgba(255,255,255,.13)!important; }
.dev-hero { position:relative; isolation:isolate; min-height:35rem; grid-template-columns:minmax(0,1.08fr) minmax(22rem,.92fr); gap:clamp(1rem,4vw,4rem); border:1px solid rgba(255,255,255,.14); border-radius:38px; padding:clamp(1.3rem,4vw,4rem); overflow:hidden; background:radial-gradient(circle at 78% 50%,rgba(136,90,255,.28),transparent 18rem),linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 55%,rgba(255,97,204,.08))!important; box-shadow:0 35px 120px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2)!important; backdrop-filter:blur(28px) saturate(160%); }
.dev-hero::before { content:""; position:absolute; inset:-45% -15% auto auto; width:34rem; height:34rem; border:1px solid rgba(166,132,255,.28); border-radius:50%; box-shadow:0 0 0 2rem rgba(166,132,255,.035),0 0 0 5rem rgba(166,132,255,.025),inset 0 0 70px rgba(130,100,255,.2); animation:gfjOrbit 24s linear infinite; pointer-events:none; }
.dev-hero-copy { position:relative; z-index:2; padding:0; }
.dev-status-row { border-color:rgba(255,255,255,.17); background:rgba(255,255,255,.08); color:#ddd8f6; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.dev-status-row b { color:#171126; background:linear-gradient(135deg,#ffd36d,#ff9fcf); box-shadow:0 0 26px rgba(255,159,207,.35); }
.kicker { color:#c2a9ff; letter-spacing:.14em; }
.dev-hero h1 { max-width:12ch; font-size:clamp(2.7rem,6vw,5.6rem); letter-spacing:-.075em; line-height:.91; text-wrap:balance; text-shadow:0 8px 40px rgba(94,54,175,.45); }
.dev-hero h1::after { content:""; display:block; width:4.5rem; height:.28rem; margin-top:1.1rem; border-radius:99px; background:linear-gradient(90deg,#67e8f9,#a879ff,#ff5fc7); box-shadow:0 0 26px rgba(168,121,255,.8); }
.dev-hero p { max-width:40rem; color:#c4c1d9!important; font-size:1.03rem; }
.brand-meaning { color:#e6c6ff!important; font-weight:850; }
.primary,.soft { border-radius:999px!important; border-color:rgba(255,255,255,.2)!important; }
.primary { color:#161023!important; background:linear-gradient(135deg,#f7d77d,#ff98d0 54%,#aa8aff)!important; box-shadow:0 14px 34px rgba(180,111,255,.3),inset 0 1px 0 rgba(255,255,255,.72)!important; }
.soft { color:#f7f4ff!important; background:rgba(255,255,255,.095)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 28px rgba(0,0,0,.12)!important; }
.primary:hover,.soft:hover { transform:translateY(-3px) scale(1.025); filter:brightness(1.08); }
.dev-orbit { position:relative; min-height:30rem; display:grid; place-items:center; }
.dev-orbit::before,.dev-orbit::after { content:""; position:absolute; border:1px solid rgba(142,117,255,.28); border-radius:50%; animation:gfjOrbit 18s linear infinite; }
.dev-orbit::before { width:23rem; height:23rem; transform:rotate(42deg) skewX(-14deg); box-shadow:0 0 70px rgba(90,204,255,.16); }
.dev-orbit::after { width:29rem; height:11rem; transform:rotate(-28deg); animation-direction:reverse; border-color:rgba(255,95,199,.2); }
.dev-device { position:relative; z-index:2; width:min(24rem,90%); border-color:rgba(255,255,255,.22)!important; border-radius:30px!important; background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.045))!important; box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 80px rgba(121,84,255,.2),inset 0 1px 0 rgba(255,255,255,.28)!important; backdrop-filter:blur(25px); transform:rotate(3deg); animation:gfjDeviceFloat 6s ease-in-out infinite; }
.dev-device img { filter:drop-shadow(0 18px 30px rgba(113,77,255,.4)); animation:gfjLogoPulse 4s ease-in-out infinite; }
.build-bar { background:rgba(255,255,255,.1)!important; }
.build-bar span { background:linear-gradient(90deg,#5ee7ff,#a879ff,#ff5fc7)!important; box-shadow:0 0 18px #a879ff; }
.dev-account-strip,.dev-timeline { margin-top:1rem; border-radius:28px; }
.dev-timeline article { min-height:8rem; border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.065); transition:transform .35s ease,background .35s ease,box-shadow .35s ease; }
.dev-timeline article:hover { transform:translateY(-8px); background:rgba(255,255,255,.12); box-shadow:0 18px 35px rgba(0,0,0,.18); }
.quick-grid { gap:1rem; }
.quick-grid>* { border-radius:24px; transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease; }
.quick-grid>*:hover { transform:translateY(-8px) rotate(-.5deg); border-color:rgba(197,161,255,.5)!important; }
@keyframes gfjGlassSweep { 0%,68%{transform:translateX(-90%)} 82%,100%{transform:translateX(120%)} }
@keyframes gfjOrbit { to{transform:rotate(360deg)} }
@keyframes gfjDeviceFloat { 0%,100%{transform:rotate(3deg) translateY(0)} 50%{transform:rotate(-2deg) translateY(-14px)} }
@keyframes gfjLogoPulse { 0%,100%{filter:drop-shadow(0 18px 30px rgba(113,77,255,.35))} 50%{filter:drop-shadow(0 18px 42px rgba(255,95,199,.55)) saturate(1.12)} }
:where(a,button,input,textarea,select,summary):focus-visible { outline:3px solid rgba(103,232,249,.95); outline-offset:3px; }
@media (max-width:820px) {
  body { padding-bottom:calc(6.8rem + env(safe-area-inset-bottom)); }
  .topbar { position:sticky; top:.55rem; width:calc(100% - 1rem); min-height:3.7rem; margin-top:.55rem; padding:.48rem .58rem; border-radius:999px; }
  .page-shell { width:calc(100% - 1rem); padding-top:1rem; }
  .dev-hero { display:flex; flex-direction:column; min-height:0; gap:.2rem; border-radius:30px; padding:1.15rem; }
  .dev-hero-copy { order:1; }
  .dev-orbit { order:2; min-height:20rem; margin:-.5rem -1rem -1rem; }
  .dev-hero h1 { max-width:10ch; font-size:clamp(2.55rem,13vw,4.2rem); }
  .dev-hero p { font-size:.95rem; }
  .dev-orbit::before { width:17rem; height:17rem; }
  .dev-orbit::after { width:20rem; height:8rem; }
  .dev-device { width:min(21rem,88vw); }
  .dev-account-strip,.dev-timeline { border-radius:24px; }
  .dev-timeline>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dev-timeline article { min-height:7.5rem; }
  .mobile-nav { border-color:rgba(255,255,255,.2)!important; background:rgba(19,22,48,.64)!important; box-shadow:0 18px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)!important; backdrop-filter:blur(26px) saturate(175%); }
  .mobile-nav a { color:#aca9c7; }
  .mobile-nav a.active { color:#fff; background:linear-gradient(135deg,rgba(139,112,255,.6),rgba(255,95,199,.34))!important; box-shadow:0 0 24px rgba(139,112,255,.25),inset 0 1px 0 rgba(255,255,255,.22)!important; }
}
@media (prefers-reduced-motion:reduce) { .topbar::before,.dev-hero::before,.dev-orbit::before,.dev-orbit::after,.dev-device,.dev-device img { animation:none!important; } }

.language-gate,
.plus-modal,
#account-flow,
#settings-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}
.language-gate::backdrop,
.plus-modal::backdrop,
#account-flow::backdrop,
#settings-modal::backdrop { background: rgba(3,4,14,.72); backdrop-filter: blur(18px) saturate(135%); }
.language-gate-card,
.plus-card,
.flow-card,
.settings-card { border:1px solid rgba(255,255,255,.2)!important; border-radius:32px!important; background:linear-gradient(145deg,rgba(29,31,67,.92),rgba(11,13,30,.88))!important; color:#f7f5ff!important; box-shadow:0 35px 120px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)!important; backdrop-filter:blur(30px) saturate(165%); }
.gate-screen { padding:clamp(1.25rem,4vw,2.5rem)!important; }
.gate-screen h2,
.gate-screen p,
.gate-screen small,
.plus-card h2,
.plus-card p,
.flow-card h2,
.flow-card p { color:#f7f5ff!important; }
.gate-screen p,.gate-screen small,.plus-card p,.flow-card p { color:#c4c1d9!important; }
.gate-screen img { width:6rem!important; height:6rem!important; border-radius:50%!important; box-shadow:0 0 0 6px rgba(255,255,255,.13),0 0 50px rgba(168,121,255,.55)!important; }
.gate-prompt { color:#c2a9ff!important; border-color:rgba(255,255,255,.2)!important; background:rgba(255,255,255,.1)!important; }
.language-gate .soft,.plus-card .soft,.flow-card .soft { color:#fff!important; }
.cookie-consent,.pwa-install { border-color:rgba(255,255,255,.18)!important; background:linear-gradient(145deg,rgba(29,31,67,.94),rgba(11,13,30,.92))!important; color:#f7f5ff!important; box-shadow:0 24px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)!important; backdrop-filter:blur(26px) saturate(155%); }
.cookie-consent p,.cookie-consent small,.pwa-install p { color:#c4c1d9!important; }

/* GFJ visual system v3 — intentional contrast, editorial surfaces and scroll-led motion. */
:root {
  color-scheme: dark;
  --bg: #070914;
  --surface: rgba(18, 22, 43, .72);
  --surface-strong: rgba(24, 29, 56, .9);
  --surface-soft: rgba(255,255,255,.065);
  --text: #f8f7ff;
  --muted: #b8b9d1;
  --muted-strong: #d6d7e9;
  --line: rgba(255,255,255,.16);
  --amethyst: #aa8aff;
  --violet: #7966ff;
  --rose: #ff71c7;
  --cyan: #6fe8ff;
  --gold: #ffd77a;
  --shadow: 0 28px 90px rgba(0,0,0,.36);
}

html { background: var(--bg); }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 93, 255, .24), transparent 25rem),
    radial-gradient(circle at 92% 8%, rgba(255, 86, 196, .17), transparent 24rem),
    radial-gradient(circle at 50% 80%, rgba(47, 202, 255, .10), transparent 35rem),
    #070914;
}
body::before { opacity: .34; background-size: 54px 54px; }
body::after { background: linear-gradient(180deg, rgba(7,9,20,.08), rgba(7,9,20,.42)); }

h1, h2, h3, strong, b { color: var(--text) !important; }
p, li, small { color: var(--muted) !important; }
.page-shell { padding-bottom: 5rem; }

.domain-notice,
.dev-hero,
.dev-account-strip,
.dev-timeline,
.quick-card,
.panel-intro,
.auth-launch,
.liquid-card,
.game-panel,
.player-hub,
.access-hero,
.store-hero,
.store-principles,
.rank-card,
.checkout-showcase,
.book-panel,
.mode-node,
.minecraft-window,
.info-hero,
.info-card,
.interactive-panel,
.rule-card,
.term-section,
.terms-index,
.decision-grid article,
.full-scroll,
.story-strip > *,
.privacy-card {
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 58%, rgba(153,124,255,.06)) !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.15) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.domain-notice { border-radius: 24px !important; }
.domain-notice p, .dev-hero p, .dev-account-strip p, .dev-timeline p,
.quick-card p, .info-card p, .panel-card p { color: var(--muted) !important; }
.domain-notice strong { color: var(--text) !important; }

.dev-hero {
  min-height: min(45rem, calc(100svh - 7rem));
  border-radius: 42px;
  padding: clamp(1.4rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 78% 48%, rgba(133,103,255,.26), transparent 21rem),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 62%, rgba(255,94,199,.08)) !important;
}
.dev-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.11) 45%, transparent 62%);
  transform: translateX(-110%); animation: gfjGlassSweep 10s ease-in-out infinite;
}
.dev-hero h1 { color: #fff !important; text-shadow: 0 12px 42px rgba(111,84,255,.42); }
.dev-hero p { color: #d1d1e5 !important; }
.dev-status-row { color: #e9e7fb !important; background: rgba(255,255,255,.08) !important; }
.dev-orbit { min-height: 32rem; }
.dev-device { background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.045)) !important; }

.kicker { color: var(--cyan) !important; letter-spacing: .16em; }
.primary { color: #171022 !important; }
.soft { color: #f4f2ff !important; background: rgba(255,255,255,.09) !important; }
.soft:hover { background: rgba(255,255,255,.16) !important; }

.dev-account-strip, .dev-timeline, .store-principles, .story-strip { border-radius: 30px; }
.dev-timeline article { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.12) !important; }
.quick-grid > * { min-height: 13rem; border-radius: 28px; }
.quick-grid > *:hover { transform: translateY(-10px) scale(1.015); }

.panel-intro, .access-hero, .info-hero, .book-panel, .store-hero { border-radius: 34px !important; }
.panel-intro h1, .access-hero h1, .info-hero h1, .book-panel h1, .store-hero h1 { color: #fff !important; }
.auth-launch { padding: 1rem; border-radius: 30px; }
.minecraft-window, .login-box, .code-form, .settings-shell { color: var(--text); }
.minecraft-window p, .login-box p, .code-form p { color: var(--muted) !important; }
input, textarea, select {
  color: #f8f7ff !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(5,7,18,.48) !important;
}
input::placeholder, textarea::placeholder { color: #8587a7 !important; }

.store-hero, .checkout-showcase { min-height: 30rem; }
.rank-grid, .info-grid, .rules-board, .decision-grid { gap: 1rem; }
.rank-card, .info-card, .rule-card, .term-section { border-radius: 26px !important; }
.rank-card small, .rank-card li, .term-section li, .rule-body li { color: var(--muted) !important; }
.mode-node > span, .policy-screen article > span { background: linear-gradient(135deg, var(--violet), var(--rose)); }
.full-scroll p, .policy-screen p { color: var(--muted-strong) !important; }

.mobile-nav {
  border-radius: 999px !important;
  background: rgba(15,18,39,.68) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Progressive enhancement: the JS observer remains the fallback. */
.reveal { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(34px) scale(.985);
    animation: gfjScrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
  .reveal.visible { opacity: 1; transform: none; }
}
@keyframes gfjScrollReveal { to { opacity: 1; transform: translateY(0) scale(1); } }

[data-page="home"] .dev-account-strip,
[data-page="plus"] .store-principles,
[data-page="modos"] .mode-map,
[data-page="normas"] .rules-board,
[data-page="ayuda"] .info-grid { view-timeline-name: --gfj-section; view-timeline-axis: block; }

@media (max-width: 820px) {
  .dev-hero { border-radius: 30px; padding: 1.15rem; }
  .dev-hero h1 { font-size: clamp(2.65rem, 13vw, 4.5rem); max-width: 10ch; }
  .dev-hero p { font-size: .98rem; line-height: 1.65; }
  .dev-orbit { min-height: 22rem; }
  .quick-grid > * { min-height: 10rem; }
  .info-hero, .book-panel, .store-hero, .panel-intro { border-radius: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-hero::after, .topbar::before { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* GFJ experience system — explicit typography first; glass is an accent, never the text layer. */
:root {
  --ink: #fafaff;
  --ink-soft: #d5d8ed;
  --ink-muted: #aeb3cf;
  --night: #070914;
  --panel: rgba(16, 20, 42, .82);
  --panel-solid: #161b36;
  --glass-edge: rgba(255,255,255,.17);
}

body { background-color: var(--night) !important; }
body, body :is(p, li, small, label, summary, .flow-note, .source-note, .store-legal) { color: var(--ink-soft) !important; }
body :is(h1, h2, h3, h4, strong, b, .window-title, .rank-topline b) { color: var(--ink) !important; }
body :is(.kicker, .section-head > span, .dev-status-row, .state) { color: #c6edff !important; }

/* The fixed image background was washing content out on mobile. It now lives only as controlled colour. */
body { background-image: radial-gradient(ellipse 70% 38% at 50% -8%, rgba(122,100,255,.32), transparent 70%), radial-gradient(circle at 88% 28%, rgba(255,94,196,.13), transparent 24rem), linear-gradient(180deg, #090b1b 0%, #080b18 54%, #050711 100%) !important; }
body::after { background: linear-gradient(180deg, rgba(5,7,18,0) 0%, rgba(5,7,18,.16) 45%, rgba(5,7,18,.54) 100%) !important; }

.site-footer { width: min(1180px, calc(100% - 1.3rem)); margin: 0 auto 6rem; color: var(--ink-soft); }
.site-footer p, .site-footer a { color: var(--ink-muted) !important; }

/* Home: a three-act scrollytelling composition. */
[data-page="home"] .page-shell { display: grid; gap: clamp(1.3rem, 4vw, 4rem); }
.story-hero { min-height: min(48rem, calc(100svh - 6.5rem)) !important; align-items: center; }
.story-hero::before { opacity: .8; }
.story-progress { position:absolute; z-index:3; left:clamp(1.2rem, 4vw, 3.5rem); bottom:1.5rem; width:min(15rem, 38%); height:2px; overflow:hidden; background:rgba(255,255,255,.16); border-radius:99px; }
.story-progress span { display:block; width:45%; height:100%; background:linear-gradient(90deg,#75efff,#ad92ff,#ff91cf); box-shadow:0 0 18px #9a80ff; animation:gfjProgress 5s ease-in-out infinite alternate; }
.story-chapter { position:relative; overflow:hidden; }
.story-chapter::after { content:""; position:absolute; width:25rem; height:25rem; right:-12rem; top:-13rem; border:1px solid rgba(155,130,255,.18); border-radius:50%; box-shadow:0 0 0 2rem rgba(117,232,255,.025),0 0 7rem rgba(130,103,255,.14); pointer-events:none; }
.story-chapter-access { padding: clamp(1.4rem, 4vw, 3rem) !important; }
.story-chapter-build { padding: clamp(1.5rem, 4vw, 3.5rem) !important; }
.chapter-number { position:absolute; z-index:0; right:clamp(1rem, 4vw, 4rem); top:-.34em; font:900 clamp(7rem, 20vw, 18rem)/.8 Inter, sans-serif; letter-spacing:-.1em; color:rgba(255,255,255,.045) !important; user-select:none; }
.story-chapter-build > :not(.chapter-number) { position:relative; z-index:1; }
.discovery-intro { max-width:42rem; padding:0 clamp(.3rem, 3vw, 2.5rem); }
.discovery-intro h2 { margin:.5rem 0; font-size:clamp(2rem,5vw,4.25rem); letter-spacing:-.055em; line-height:.96; }
.discovery-intro p { max-width:34rem; font-size:1.05rem; line-height:1.7; }
.story-constellation > * { min-height:15rem; align-content:end; background:linear-gradient(155deg,rgba(32,39,78,.82),rgba(10,14,32,.72)) !important; }
.story-constellation > *:nth-child(2n) { transform: translateY(2.4rem); }
.story-constellation > *:nth-child(3n) { background:linear-gradient(155deg,rgba(65,39,85,.7),rgba(10,14,32,.78)) !important; }
@keyframes gfjProgress { from { transform:translateX(-18%); } to { transform:translateX(122%); } }

/* Individual page identities: readable editorial surfaces, rather than a one-size-fits-all card. */
[data-page="acceso"] .access-hero { min-height: 22rem; display:grid; align-content:end; background:linear-gradient(135deg,rgba(44,57,111,.8),rgba(22,18,51,.88) 62%,rgba(104,43,93,.7)) !important; }
[data-page="panel"] .panel-intro, [data-page="panel"] .player-hub { background:linear-gradient(135deg,rgba(24,53,75,.84),rgba(20,21,48,.92)) !important; }
[data-page="plus"] .store-hero { background:radial-gradient(circle at 76% 35%,rgba(255,202,98,.22),transparent 17rem),linear-gradient(135deg,rgba(45,32,77,.92),rgba(18,19,40,.88)) !important; }
[data-page="plus"] .rank-card.featured { border-color:rgba(255,216,119,.55) !important; background:linear-gradient(160deg,rgba(96,68,111,.84),rgba(28,26,53,.92)) !important; transform:translateY(-.8rem); }
[data-page="modos"] .book-panel { min-height:22rem; background:linear-gradient(135deg,rgba(20,67,76,.88),rgba(13,18,40,.93)) !important; }
[data-page="modos"] .mode-node { position:relative; min-height:14rem; background:linear-gradient(150deg,rgba(18,40,64,.9),rgba(14,17,37,.9)) !important; }
[data-page="modos"] .mode-node:nth-child(even) { background:linear-gradient(150deg,rgba(53,28,75,.87),rgba(14,17,37,.92)) !important; }
[data-page="ayuda"] .info-hero, [data-page="normas"] .info-hero, [data-page="terminos"] .info-hero, [data-page="privacidad"] .info-hero { min-height:21rem; display:grid; align-content:end; background:linear-gradient(135deg,rgba(24,45,80,.88),rgba(17,19,42,.92)) !important; }
[data-page="normas"] .rule-card, [data-page="terminos"] .term-section, [data-page="privacidad"] .privacy-card { background:linear-gradient(150deg,rgba(20,25,52,.91),rgba(13,16,34,.92)) !important; }
[data-page="ayuda"] .info-card:nth-child(3n+1) { background:linear-gradient(155deg,rgba(20,56,70,.86),rgba(14,17,37,.92)) !important; }
[data-page="ayuda"] .info-card:nth-child(3n+2) { background:linear-gradient(155deg,rgba(54,33,77,.86),rgba(14,17,37,.92)) !important; }

/* Scroll-driven animations in supporting browsers; intersection observer remains the reliable fallback. */
@supports (animation-timeline: view()) {
  .story-chapter, .story-constellation > *, .mode-node, .rank-card, .info-card, .rule-card, .term-section, .privacy-card {
    animation: gfjEnter linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  .story-hero .dev-hero-copy { animation:gfjHeroCopy linear both; animation-timeline:scroll(root); animation-range:0 34vh; }
  .story-hero .dev-orbit { animation:gfjHeroOrbit linear both; animation-timeline:scroll(root); animation-range:0 44vh; }
}
@keyframes gfjEnter { from { opacity:.16; transform:translateY(4rem) scale(.965); filter:blur(5px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
/* Keep the opening scene moving on scroll, but never dim it: fading the hero
   made its live actions look disabled. */
@keyframes gfjHeroCopy { to { transform:translateY(-2rem); opacity:1; } }
@keyframes gfjHeroOrbit { to { transform:translateY(4rem) rotate(7deg); opacity:1; } }

@media (max-width:820px) {
  .story-hero { min-height:calc(100svh - 5.6rem) !important; }
  .story-constellation > *:nth-child(n) { transform:none; min-height:11rem; }
  [data-page="plus"] .rank-card.featured { transform:none; }
  .site-footer { width:calc(100% - 1rem); margin-bottom:7.8rem; }
}
@media (prefers-reduced-motion:reduce) {
  .story-progress span, .story-chapter, .story-constellation > *, .mode-node, .rank-card, .info-card, .rule-card, .term-section, .privacy-card, .story-hero .dev-hero-copy, .story-hero .dev-orbit { animation:none !important; transform:none !important; filter:none !important; opacity:1 !important; }
}