/* ==========================================================================
   ZART GAMES — Root Studio Landing Styles
   ========================================================================== */

html { overflow-x:hidden; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
.sr-skip-link {
  position:absolute; top:-100px; left:20px; z-index:100;
  padding:10px 16px; background:#F2F3F5; color:#0A0B0D;
  font-weight:700; font-size:13px; text-decoration:none;
  border-radius:4px; transition:top 150ms ease;
}
.sr-skip-link:focus { top:20px; outline:2px solid #0A0B0D; }
button:active, a[role="button"]:active, [data-ks]:active { transform:scale(0.97); transition:transform 80ms ease; }
[data-nav-link]:active, [data-home-link]:active, [data-top-link]:active { opacity:0.7; transition:opacity 80ms ease; }
@keyframes zg-logo-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
[data-top-link] svg, [data-home-link] svg { animation: zg-logo-pulse 5.5s ease-in-out infinite; }
@property --zg-glow-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes zg-glow-spin { to { --zg-glow-ang: 360deg; } }
[data-ks] { position: relative; isolation: isolate; border-color: rgba(5,206,120,0.34) !important; }
[data-ks] > * { position: relative; z-index: 1; }
[data-ks]::before, [data-ks]::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from var(--zg-glow-ang),
    rgba(5,206,120,0) 0deg,
    rgba(5,206,120,0) 228deg,
    rgba(5,206,120,0.25) 252deg,
    rgba(5,206,120,0.75) 274deg,
    rgba(120,255,196,0.95) 292deg,
    rgba(5,206,120,0.75) 310deg,
    rgba(5,206,120,0.25) 332deg,
    rgba(5,206,120,0) 356deg,
    rgba(5,206,120,0) 360deg),
    linear-gradient(rgba(5,206,120,0.34), rgba(5,206,120,0.34));
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: zg-glow-spin 7s linear infinite;
}
[data-ks]::after {
  background:
    conic-gradient(from var(--zg-glow-ang),
    rgba(5,206,120,0) 0deg,
    rgba(5,206,120,0) 228deg,
    rgba(5,206,120,0.25) 252deg,
    rgba(5,206,120,0.75) 274deg,
    rgba(120,255,196,0.95) 292deg,
    rgba(5,206,120,0.75) 310deg,
    rgba(5,206,120,0.25) 332deg,
    rgba(5,206,120,0) 356deg,
    rgba(5,206,120,0) 360deg),
    linear-gradient(rgba(5,206,120,0.16), rgba(5,206,120,0.16));
  filter: blur(4px);
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  [data-top-link] svg, [data-home-link] svg { animation: none; }
  [data-ks]::before { animation: none; background: rgba(5,206,120,0.55); }
  [data-ks]::after { animation: none; background: rgba(5,206,120,0.35); opacity: 0.5; }
}
@media (max-width: 900px) {
  [data-hdr] { gap:10px 0 !important; padding-top:12px !important; padding-bottom:12px !important; }
  [data-hdr-right] { gap:12px !important; }
  [data-nav-wrap] {
    order:3;
    width:100%;
    justify-content:flex-start !important;
    font-size:11px !important;
    letter-spacing:0.08em !important;
    overflow-x:visible;
    padding:4px 0 2px;
  }
  [data-nav-wrap] nav {
    width:100%;
    justify-content:flex-start;
    gap:4px 10px !important;
    flex-wrap:wrap !important;
  }
  [data-nav-wrap] nav a {
    padding:8px 8px !important;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
  }
  [data-lang] {
    padding:8px 6px !important;
    min-width:34px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  [data-ks-nav] { padding:8px 12px !important; letter-spacing:0.08em !important; min-height:36px; box-sizing:border-box; }
  [data-ks-logo] { height:10px !important; }
  [data-ks]::after {
    filter: blur(2px) !important;
  }
}
html, body { margin:0; padding:0; background:#0A0B0D; }
body { -webkit-font-smoothing:antialiased; }
a { color:#F2F3F5; }
a:hover { color:#F2F3F5; }
*:focus-visible { outline:1px solid #F2F3F5; outline-offset:2px; }
::selection { background:#F2F3F5; color:#0A0B0D; }