:root{
  --purple:#a855f7;
  --violet:#7c3cff;
  --pink:#ff39b7;
  --orange:#ff9a2e;
  --cyan:#28d7ff;
  --green:#45ff6a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:#03050b;scrollbar-gutter:stable both-edges}
body{
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -12%,rgba(168,85,247,.18),transparent 34%),
    radial-gradient(circle at 0% 20%,rgba(255,57,183,.08),transparent 22%),
    radial-gradient(circle at 100% 18%,rgba(40,215,255,.06),transparent 24%),
    linear-gradient(180deg,#05030b 0%,#02030a 100%);
}
.mockup-page{
  position:relative;
  width:100vw;
  max-width:3840px;
  margin:0 auto;
  line-height:0;
  isolation:isolate;
}
.mockup-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}
.seo-fallback{
  position:absolute!important;
  width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.hot{position:absolute;display:block;text-decoration:none;color:inherit;z-index:8}
.hot,.fill{cursor:pointer}
.fill{position:absolute;inset:0;display:block;z-index:2}
.hot:focus-visible,.nav-menu:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:10px}

/* invisible hotspots */
.hot:hover:not(.nav-menu),.hot:active:not(.nav-menu){background:transparent;box-shadow:none}

.logo-link{left:1.2%;top:1.15%;width:17%;height:7.8%}
.nav-home{left:22.55%;top:2.15%;width:4.4%;height:6.7%;z-index:11}
.nav-menu{top:2.15%;height:6.7%;z-index:20}
.nav-servers{left:28.1%;width:5.6%}
.nav-radio{left:34.5%;width:4.7%}
.nav-plex{left:40.2%;width:4.1%}
.nav-forum{left:45.1%;width:5.3%}
.nav-services{left:51.1%;width:6.3%}
.nav-gridos{left:58%;width:5.5%}
.nav-contact{left:64.2%;width:6%}
.status-link{left:73.4%;top:2.05%;width:12.6%;height:5.5%;border-radius:10px;z-index:11}
.discord-link{left:87.1%;top:2.05%;width:11.3%;height:5.5%;border-radius:10px;z-index:11}
.explore-link{left:3%;top:40.8%;width:15.9%;height:5.5%;border-radius:10px}
.services-button-link{left:20.1%;top:40.8%;width:12.6%;height:5.5%;border-radius:10px}
.card-servers{left:1.8%;top:49.1%;width:15.4%;height:26.2%;border-radius:14px}
.card-radio{left:17.9%;top:49.1%;width:15.4%;height:26.2%;border-radius:14px}
.card-plex{left:33.5%;top:49.1%;width:15.5%;height:26.2%;border-radius:14px}
.card-forum{left:49.5%;top:49.1%;width:15.3%;height:26.2%;border-radius:14px}
.card-services{left:65.1%;top:49.1%;width:15.2%;height:26.2%;border-radius:14px}
.card-gridos{left:80.8%;top:49.1%;width:16%;height:26.2%;border-radius:14px}
.status-page-link{left:84.2%;top:80.9%;width:12.4%;height:4.6%;border-radius:10px}

/* footer */
.footer-logo-link{left:1.7%;top:92.05%;width:13.8%;height:5.4%}
.footer-rules-link{left:39.2%;top:93.0%;width:4.0%;height:2.9%}
.footer-privacy-link{left:46.0%;top:93.0%;width:5.8%;height:2.9%}
.footer-terms-link{left:54.0%;top:93.0%;width:6.0%;height:2.9%}
.footer-acceptable-link{left:63.3%;top:93.0%;width:6.5%;height:2.9%}
.footer-discord-link{left:84.5%;top:91.8%;width:2.6%;height:4.3%;border-radius:8px}
.footer-youtube-link{left:89.7%;top:91.8%;width:2.6%;height:4.3%;border-radius:8px}
.footer-twitch-link{left:94.4%;top:91.8%;width:2.4%;height:4.3%;border-radius:8px}
.footer-tiktok-link{left:97.35%;top:91.8%;width:1.8%;height:4.3%;border-radius:8px}

.dropdown{
  position:absolute;
  left:50%;
  top:calc(100% + 12px);
  width:250px;
  transform:translateX(-50%) translateY(-7px) scale(.985);
  opacity:0;visibility:hidden;pointer-events:none;
  padding:10px;
  border:1px solid rgba(168,85,247,.48);
  border-radius:15px;
  background:
    radial-gradient(circle at 15% 0%,rgba(168,85,247,.20),transparent 35%),
    linear-gradient(145deg,rgba(10,13,26,.985),rgba(5,7,15,.965));
  box-shadow:0 18px 50px rgba(0,0,0,.62),0 0 32px rgba(168,85,247,.24),inset 0 0 28px rgba(255,255,255,.03);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  z-index:80;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  line-height:1.2;
}
.dropdown:before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.dropdown:after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:rgba(10,13,26,.98);border-left:1px solid rgba(168,85,247,.42);border-top:1px solid rgba(168,85,247,.42)}
.dropdown a{
  position:relative;display:flex;align-items:center;gap:9px;min-height:38px;padding:0 12px;border-radius:10px;
  color:rgba(255,255,255,.86);font-size:.92rem;font-weight:800;letter-spacing:.005em;text-decoration:none;
}
.dropdown a:hover,.dropdown a:focus-visible{background:linear-gradient(90deg,rgba(168,85,247,.22),rgba(255,57,183,.12));color:#fff;outline:none}
.dropdown a:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));box-shadow:0 0 10px rgba(168,85,247,.55)}
.nav-services .dropdown a:last-child{margin-top:5px;border:1px solid rgba(40,215,255,.28);background:linear-gradient(90deg,rgba(40,215,255,.11),rgba(168,85,247,.11));color:#e7fbff}
.nav-services .dropdown a:last-child:before{background:linear-gradient(135deg,var(--cyan),var(--green));box-shadow:0 0 12px rgba(40,215,255,.75)}
.dropdown-wide{width:310px}


@media (max-width: 900px){
  html,body{overflow-x:hidden}
  .mockup-page{width:100vw;max-width:100vw}
}
@media (max-width: 700px){
  .mockup-page{
    width:100%;
    min-height:100vh;
    padding:12px 14px 28px;
    line-height:1.4;
  }
  .mockup-image,
  .hot,
  .service-live-status,
  .live-status-button{
    display:none!important;
  }
  .seo-fallback{
    position:relative!important;
    width:auto!important;
    height:auto!important;
    padding:18px!important;
    margin:0!important;
    overflow:visible!important;
    clip:auto!important;
    white-space:normal!important;
    border:1px solid rgba(168,85,247,.28)!important;
    border-radius:16px;
    background:
      radial-gradient(circle at 85% 12%,rgba(168,85,247,.24),transparent 34%),
      linear-gradient(145deg,rgba(10,13,27,.95),rgba(4,6,14,.96));
    box-shadow:0 20px 70px rgba(0,0,0,.42),inset 0 0 28px rgba(255,255,255,.025);
  }
  .seo-fallback:before{
    content:"";
    display:block;
    width:210px;
    height:76px;
    margin:0 0 18px;
    background:url('../img/FlaroCity_Wordmark.png') left center / contain no-repeat;
    filter:drop-shadow(0 0 10px rgba(255,57,183,.35));
  }
  .seo-fallback h1{
    margin:0;
    color:#fff;
    font-size:clamp(2.35rem,12vw,4rem);
    line-height:1.02;
    letter-spacing:0;
  }
  .seo-fallback p{
    margin:16px 0 0;
    color:rgba(255,255,255,.76);
    font-size:1rem;
    line-height:1.55;
  }
  .seo-fallback nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
  }
  .seo-fallback nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-weight:850;
    text-decoration:none;
  }
  .seo-fallback nav a:first-child,
  .seo-fallback nav a:nth-child(5){
    border-color:rgba(168,85,247,.45);
    background:linear-gradient(135deg,rgba(168,85,247,.94),rgba(255,57,183,.72));
  }
}
@media (prefers-reduced-motion:reduce){.dropdown{transition:none}}



/* Patch 01N: cleaner menu behavior + exact status light overlay.
   Dropdowns only open when JS adds .menu-open, preventing stuck/stacked menus. */
.nav-menu .dropdown{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-50%) translateY(-7px) scale(.985)!important;
}
.nav-menu.menu-open .dropdown{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(0) scale(1)!important;
}
.nav-menu.menu-closing .dropdown{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Header status button: keep the mockup button art, replace only the printed light.
   The cover sits directly on top of the original green dot so it does not look doubled. */
.live-status-button{
  position:absolute;
  left:73.4%;
  top:2.05%;
  width:12.6%;
  height:5.5%;
  z-index:60;
  display:block;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:10px;
  text-decoration:none;
  pointer-events:auto;
}
.live-status-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.live-status-label{
  position:absolute!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
}
.live-status-button::before{
  content:"";
  position:absolute;
  left:11.56%;
  top:59.1%;
  width:8.5%;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:radial-gradient(circle, rgba(5,21,17,.98) 0 48%, rgba(5,21,17,.82) 62%, transparent 74%);
  z-index:1;
}
.live-status-dot{
  position:absolute;
  left:11.56%;
  top:59.1%;
  width:5.9%;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  border-radius:999px;
  z-index:2;
  background:var(--green);
  box-shadow:0 0 .42vw var(--green),0 0 .95vw rgba(69,255,106,.52);
  animation:fc-status-blink 1.45s ease-in-out infinite;
}
.live-status-button.status-ok .live-status-dot{background:var(--green);box-shadow:0 0 .42vw var(--green),0 0 .95vw rgba(69,255,106,.52)}
.live-status-button.status-warn .live-status-dot{background:#ffd340;box-shadow:0 0 .42vw #ffd340,0 0 .95vw rgba(255,211,64,.55)}
.live-status-button.status-down .live-status-dot{background:#ff4056;box-shadow:0 0 .42vw #ff4056,0 0 .95vw rgba(255,64,86,.60)}
@keyframes fc-status-blink{
  0%,100%{opacity:1;filter:brightness(1.2);transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.42;filter:brightness(.82);transform:translate(-50%,-50%) scale(.76)}
}
@media (prefers-reduced-motion:reduce){.live-status-dot{animation:none}}


/* Patch 01O: live status-strip lights.
   These cover the printed green status dots/text on the 4K mockup and replace them with real status states. */
.service-live-status{
  position:absolute;
  top:83.58%;
  width:6.25%;
  height:4.85%;
  z-index:59;
  line-height:normal;
  pointer-events:none;
  font-family:Inter,Arial,sans-serif;
  font-weight:800;
}
.service-live-status .service-status-cover{
  position:absolute;
  left:-0.8%;
  top:2.5%;
  width:76%;
  height:84%;
  border-radius:.18vw;
  background:linear-gradient(180deg, rgba(7,12,22,.985), rgba(6,10,19,.985));
  box-shadow:none;
}
.service-live-status .service-status-dot{
  position:absolute;
  left:9.0%;
  top:21.0%;
  width:4.8%;
  min-width:6px;
  max-width:16px;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#ffd340;
  box-shadow:0 0 .10vw rgba(255,211,64,.55);
  animation:fc-status-blink 1.45s ease-in-out infinite;
}
.service-live-status .service-status-text{
  position:absolute;
  left:15.2%;
  top:5.5%;
  color:#ffd340;
  font-size:clamp(10px,.84vw,34px);
  letter-spacing:-.02em;
  text-shadow:none;
  white-space:nowrap;
}
.service-live-status .service-status-percent{
  position:absolute;
  left:15.2%;
  top:50.5%;
  color:rgba(255,255,255,.78);
  font-size:clamp(10px,.84vw,34px);
  font-weight:700;
  text-shadow:none;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.service-live-status.status-ok .service-status-dot{background:var(--green);box-shadow:0 0 .10vw rgba(69,255,106,.45)}
.service-live-status.status-ok .service-status-text{color:var(--green);text-shadow:none}
.service-live-status.status-warn .service-status-dot{background:#ffd340;box-shadow:0 0 .10vw rgba(255,211,64,.45)}
.service-live-status.status-warn .service-status-text{color:#ffd340;text-shadow:none}
.service-live-status.status-down .service-status-dot{background:#ff4056;box-shadow:0 0 .10vw rgba(255,64,86,.50)}
.service-live-status.status-down .service-status-text{color:#ff4056;text-shadow:none}
.status-website{left:23.35%}
.status-radio{left:37.42%}
.status-plex{left:49.66%}
.status-games{left:61.74%;width:7.1%}
.status-api{left:76.88%}
@media (prefers-reduced-motion:reduce){.service-live-status .service-status-dot{animation:none}}