/* NinjaSMP Season 5 - Status
   Cinematic dark, shared language with the main + stats sites. */

@font-face { font-family:'MinecraftTitle'; src:url('MinecraftTitle.ttf') format('truetype'); font-display:swap; }

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

:root {
  --sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'MinecraftTitle', var(--sans);
  --mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  --bg:#070A0E; --bg-2:#0B1017; --card:#10151D; --card-2:#141B25;
  --border:rgba(255,255,255,.08); --border-h:rgba(56,189,248,.45);
  --text:#EAF1F8; --muted:#93A1B2; --faint:#5D6A78;
  --aqua:#38BDF8; --aqua-dim:#0EA5E9; --aqua-faint:rgba(56,189,248,.10); --glow:0 0 40px rgba(56,189,248,.3);
  --gold:#FBBF24; --green:#34D399; --red:#F87171; --amber:#FBBF24; --orange:#FB923C; --discord:#5865F2;
  --r:16px; --r-sm:11px; --r-xs:8px;
}

html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--text);
  min-height:100vh; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow-x:hidden;
}
.page-bottom { margin-top:auto; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#232f3d; border-radius:6px; border:2px solid var(--bg); }
::selection { background:rgba(56,189,248,.3); }

.reveal { opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0)*80ms); }
.reveal.in { opacity:1; transform:none; }

/* ══ HEADER ══ */
header {
  position:sticky; top:0; z-index:200;
  background:rgba(7,10,14,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner { max-width:960px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; gap:20px; }
.logo-link { display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.logo { height:32px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.logo-text { font-family:var(--display); font-size:16px; letter-spacing:1px; color:var(--text); }
nav { display:flex; align-items:center; gap:3px; margin-left:auto; }
.nav-link { font-size:13.5px; color:var(--muted); text-decoration:none; padding:8px 13px; border-radius:var(--r-xs); transition:color .16s, background .16s; display:inline-flex; align-items:center; gap:6px; }
.nav-link:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-discord { color:#c7ccff; background:rgba(88,101,242,.14); border:1px solid rgba(88,101,242,.3); }
.nav-discord svg { display:block; flex-shrink:0; }
.nav-discord:hover { background:rgba(88,101,242,.26); color:#fff; box-shadow:0 0 24px rgba(88,101,242,.3); }

/* ══ STATUS DOT ══ */
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--faint); flex-shrink:0; transition:background .3s; }
.status-dot.online  { background:var(--green); box-shadow:0 0 0 3px rgba(52,211,153,.22), 0 0 14px rgba(52,211,153,.6); animation:dotPulse 2.4s ease-in-out infinite; }
.status-dot.offline { background:var(--red); box-shadow:0 0 0 3px rgba(248,113,113,.2), 0 0 12px rgba(248,113,113,.5); }
@keyframes dotPulse { 0%,100% { box-shadow:0 0 0 3px rgba(52,211,153,.22), 0 0 10px rgba(52,211,153,.5); } 50% { box-shadow:0 0 0 5px rgba(52,211,153,.14), 0 0 20px rgba(52,211,153,.8); } }

/* ══ CINEMATIC HEADER BAND ══ */
.status-hero { position:relative; overflow:hidden; text-align:center; padding:72px 24px 60px; }
.status-hero .cine-bg {
  position:absolute; inset:-18% 0; z-index:0;
  background:url('background.png') center/cover no-repeat; opacity:.6;
}
.status-hero .cine-scrim {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,10,14,.55) 0%, rgba(7,10,14,.6) 40%, var(--bg) 100%);
}
.status-hero-inner { position:relative; z-index:2; animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.status-h1 { font-family:var(--display); font-size:clamp(30px, 6vw, 46px); color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.status-h1 .hl-accent { color:var(--aqua); text-shadow:0 0 40px rgba(56,189,248,.5); }
.status-sub { font-size:15px; color:#c9d5e1; margin-top:12px; text-shadow:0 1px 12px rgba(0,0,0,.5); }

/* ══ PAGE ══ */
.status-page { flex:1; width:100%; max-width:820px; margin:0 auto; padding:0 24px 90px; }

/* Overall banner */
.overall {
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--border); border-radius:var(--r);
  background:linear-gradient(180deg, var(--card-2), var(--card)); padding:24px 26px; margin-bottom:30px;
  border-left:3px solid var(--faint);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.overall.ok      { border-left-color:var(--green); box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 50px rgba(52,211,153,.08); }
.overall.partial { border-left-color:var(--amber); box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 50px rgba(251,191,36,.08); }
.overall.outage  { border-left-color:var(--red);   box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 50px rgba(248,113,113,.1); }
.overall-dot .status-dot { width:13px; height:13px; }
.overall-text { flex:1; min-width:0; }
.overall-title { font-family:var(--display); font-size:19px; color:var(--text); }
.overall.ok .overall-title      { color:var(--green); }
.overall.partial .overall-title { color:var(--amber); }
.overall.outage .overall-title  { color:var(--red); }
.overall-meta { font-size:13.5px; color:var(--muted); margin-top:5px; }

/* Monitor cards */
.monitors { display:flex; flex-direction:column; gap:14px; }
.mon-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:22px 24px; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mon-card:hover { border-color:var(--border-h); box-shadow:0 16px 40px rgba(0,0,0,.4), var(--glow); transform:translateY(-2px); }
.mon-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.mon-id { display:flex; align-items:center; gap:13px; min-width:0; }
.mon-names { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mon-name { font-size:15.5px; font-weight:600; color:var(--text); }
.mon-sub  { font-family:var(--mono); font-size:12px; color:var(--faint); }
.mon-stat { text-align:right; flex-shrink:0; }
.mon-state { font-size:13px; font-weight:700; display:block; margin-bottom:2px; }
.mon-state.ok   { color:var(--green); }
.mon-state.down { color:var(--red); }
.mon-uptime { font-size:12px; color:var(--muted); }

/* Hourly bars */
.hb-row { display:flex; align-items:stretch; gap:3px; height:36px; margin-bottom:10px; }
.hb { flex:1; min-width:4px; max-width:12px; border-radius:3px; background:#1a2432; cursor:default; transition:transform .12s, filter .18s, box-shadow .18s; }
.hb:hover { transform:scaleY(1.1); filter:brightness(1.25); }
.hb-green  { background:var(--green);  box-shadow:0 0 8px rgba(52,211,153,.35); }
.hb-yellow { background:var(--amber);  box-shadow:0 0 8px rgba(251,191,36,.35); }
.hb-orange { background:var(--orange); box-shadow:0 0 8px rgba(251,146,60,.4); }
.hb-red    { background:var(--red);    box-shadow:0 0 8px rgba(248,113,113,.45); }
.hb-empty  { background:#1a2432; }

/* Tooltip */
.hb-tip { position:fixed; z-index:9999; pointer-events:none; background:#10151D; border:1px solid var(--border-h); border-radius:var(--r-sm); padding:11px 13px; min-width:150px; max-width:250px; box-shadow:0 18px 50px rgba(0,0,0,.6); font-family:var(--sans); }
.tip-hour { font-size:12px; color:var(--text); margin-bottom:7px; }
.tip-status { font-weight:700; font-size:13px; margin-bottom:6px; }
.tip-status.tip-green { color:var(--green); } .tip-status.tip-yellow { color:var(--amber); }
.tip-status.tip-orange { color:var(--orange); } .tip-status.tip-red { color:var(--red); } .tip-status.tip-empty { color:var(--muted); }
.tip-row { font-size:12px; color:var(--muted); line-height:1.7; } .tip-row b { color:var(--text); font-weight:600; }
.tip-ok { color:var(--green); } .tip-muted { color:var(--muted); }

.mon-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mon-info { font-size:12px; color:var(--faint); }
.status-foot { text-align:center; font-size:12.5px; color:var(--faint); margin-top:32px; }

/* ══ FOOTER ══ */
footer { border-top:1px solid var(--border); padding:52px 0 38px; text-align:center; }
.container { max-width:960px; margin:0 auto; padding:0 24px; }
.footer-logo { height:30px; width:auto; margin-bottom:18px; opacity:.6; }
footer .container p { font-size:13px; color:var(--muted); }
.footer-disclaimer { font-size:12px; color:var(--faint); margin-top:6px; }
.footer-links { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.footer-link { font-size:13px; color:var(--muted); text-decoration:none; transition:color .16s; }
.footer-link:hover { color:var(--aqua); }
.footer-sep { color:var(--border); }
.footer-discord-row { display:flex; justify-content:center; margin-top:22px; }
.footer-discord { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#c7ccff; text-decoration:none; border:1px solid rgba(88,101,242,.3); background:rgba(88,101,242,.14); padding:10px 20px; border-radius:var(--r-sm); transition:background .16s, color .16s, box-shadow .16s; }
.footer-discord:hover { background:rgba(88,101,242,.26); color:#fff; box-shadow:0 0 24px rgba(88,101,242,.3); }
.footer-discord svg { flex-shrink:0; }

/* ══ LEGAL ══ */
.legal-page { flex:1; max-width:780px; margin:0 auto; padding:70px 24px 90px; }
.legal-page h1 { font-family:var(--display); font-size:34px; color:var(--text); margin-bottom:8px; }
.legal-sub { font-size:14px; color:var(--muted); margin-bottom:46px; }
.legal-page h2 { font-family:var(--display); font-size:18px; color:var(--text); margin:40px 0 12px; border-top:1px solid var(--border); padding-top:32px; }
.legal-page h2:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.legal-page p, .legal-page address, .legal-page li { font-size:14.5px; color:var(--muted); line-height:1.8; margin-bottom:10px; }
.legal-page ul { padding-left:22px; margin-bottom:10px; }
.legal-page a { color:var(--aqua); text-decoration:none; }
.legal-page a:hover { text-decoration:underline; }
.legal-page address { font-style:normal; }
.legal-page strong { color:var(--text); font-weight:600; }
.legal-page code { font-family:var(--mono); font-size:13px; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:1px 6px; color:var(--aqua); }

/* ══ PARALLAX (progressive enhancement) ══ */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .status-hero .cine-bg { animation:cineParallax linear both; animation-timeline:scroll(root); animation-range:0 70vh; }
    @keyframes cineParallax { from { transform:translateY(0) scale(1.05); } to { transform:translateY(16%) scale(1.05); } }
  }
}

/* ══ RESPONSIVE ══ */
@media (max-width:680px) {
  .header-inner { padding:0 16px; }
  .status-hero { padding:52px 16px 44px; }
  .status-page { padding:0 16px 64px; }
  .overall { flex-wrap:wrap; }
  .hb { max-width:none; }
  .mon-top { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}