/* Flying Bears Association — palette lifted from the crest artwork:
   near-black field, parchment cream, tan gold, sage green, steel blue. */

:root{
  --bg:#080b10;
  --bg-glow:#141d29;
  --panel:#111823;
  --panel-hover:#161f2c;
  --line:#232f3e;
  --cream:#e8dcc0;
  --ink:#dfd6c4;
  --muted:#8a94a3;
  --gold:#d9a441;
  --gold-soft:rgba(217,164,65,.12);
  --sage:#7d9b6a;
  --steel:#5b7fa3;
  --danger:#b4614e;
}

*{box-sizing:border-box}

html{color-scheme:dark}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 560px at 50% -10%, var(--bg-glow) 0%, transparent 64%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------------- hero ---------------- */

.hero{padding:52px 0 30px;text-align:center}

.crest{
  width:min(300px,72vw);
  height:auto;
  margin:0 auto;
  display:block;
  animation:bob 7s ease-in-out infinite;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.6));
}

@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.tagline{
  margin:22px 0 0;
  color:var(--muted);
  font-size:1.02rem;
}

/* ---------------- cards ---------------- */

main{padding:14px 0 8px}

/* Two groups, because the interactions differ: services open in a browser,
   game servers get their address copied into a game client. */
.group{display:grid;gap:13px}
.group + .group{margin-top:34px}

.group-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 3px 2px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
}
.group-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(to right,var(--line),transparent);
}

.card{
  display:flex;
  align-items:center;
  gap:17px;
  padding:19px 21px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

a.card:hover,a.card:focus-visible{
  border-color:var(--gold);
  background:var(--panel-hover);
  transform:translateY(-2px);
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.ico{
  flex:0 0 48px;height:48px;
  display:grid;place-items:center;
  background:var(--gold-soft);
  border-radius:12px;
}
.ico svg{width:27px;height:27px}

/* icon vocabulary borrowed from the crest's own icon row */
.s-line{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-led{fill:var(--sage)}
.s-gold{fill:var(--gold);opacity:.85}

.body{flex:1;min-width:0}

.name{
  display:block;
  font-weight:640;
  font-size:1.06rem;
  color:var(--cream);
}

.desc{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}

.addr{
  display:block;
  margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;
  color:var(--gold);
  word-break:break-all;
}

.go{flex:0 0 auto;color:var(--muted);font-size:1.15rem;transition:color .18s ease}
a.card:hover .go,a.card:focus-visible .go{color:var(--gold)}

/* live status pill */

.status{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:9px;
  padding:3px 9px;
  border-radius:20px;
  background:#0c1219;
  border:1px solid var(--line);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--muted);
  vertical-align:middle;
}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.dot-idle{background:var(--muted);animation:pulse 1.4s ease-in-out infinite}
.dot-up{background:var(--sage);box-shadow:0 0 7px var(--sage)}
.dot-down{background:var(--danger)}
.status.up{color:var(--sage);border-color:rgba(125,155,106,.35)}
.status.down{color:var(--danger);border-color:rgba(180,97,78,.3)}

@keyframes pulse{50%{opacity:.35}}

/* copy button — game addresses aren't URLs, so this beats a dead link */

.copy{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font:inherit;font-size:.83rem;
  padding:7px 13px;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.copy.done{border-color:var(--sage);color:var(--sage);background:rgba(125,155,106,.1)}

.card.soon{opacity:.48}

.tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:20px;
  background:var(--line);
  color:var(--muted);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* ---------------- ridgeline + footer ---------------- */

.ridge{
  display:block;
  width:100%;
  height:110px;
  margin-top:56px;
}
.r-far{fill:#0d141c}
.r-near{fill:#0a1017}
.r-tree{fill:#070c12}

footer{
  text-align:center;
  color:var(--muted);
  font-size:.83rem;
  background:#070c12;
  padding:6px 24px 32px;
}
.paw{margin-right:5px}
.colophon{margin:0;opacity:.85}

/* ---------------- 404 ---------------- */

.notfound-code{
  margin:26px 0 0;
  font-size:clamp(2.6rem,9vw,3.6rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--cream);
  line-height:1;
}
.notfound-back{margin:22px 0 0}
.notfound-back a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.notfound-back a:hover,.notfound-back a:focus-visible{border-bottom-color:var(--gold)}

/* The admin card is a working link, so it stays at full brightness — dimming
   is reserved for .soon (not available yet), and using it here made an active
   service read as disabled. The "admin" tag carries that distinction instead. */

/* ---------------- responsive ---------------- */

@media (max-width:520px){
  .hero{padding:36px 0 22px}
  .card{padding:16px;gap:13px}
  .ico{flex-basis:42px;height:42px}
  .ico svg{width:24px;height:24px}
  .copy{padding:6px 10px;font-size:.78rem}
  .status{margin-left:0;margin-top:5px}
  .name{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .ridge{height:72px;margin-top:38px}
}

@media (prefers-reduced-motion:reduce){
  .crest{animation:none}
  .dot-idle{animation:none}
  *{transition-duration:.01ms !important}
}