* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #151515;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 30px;
}

.container {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 60px);
  padding: 32px;
  background-color: #191a1a;
  border: 1px solid #292b2b;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  --grid-color: rgba(120, 128, 128, 0.20);
  background-image:
    linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%);
  background-size: 55px 55px;
}

.content { position: relative; z-index: 1; }
.secret-link { position: absolute; z-index: 5; right: 23%; bottom: 0; width: 10px; height: 20px; cursor: pointer; }
.secret-link:focus-visible { outline: 1px solid rgba(255, 255, 255, .45); outline-offset: 4px; }
.ambient-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  top: -230px;
  left: -160px;
  pointer-events: none;
  opacity: .24;
  background: radial-gradient(circle, rgba(88, 101, 242, .34) 0%, rgba(88, 101, 242, .09) 34%, transparent 68%);
  filter: blur(5px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(150px, 70px, 0); } }

p { margin: 0 0 5px; font-size: 1rem; }
.wip { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #d0d0d0; font-size: 13px; letter-spacing: .01em; }
.wip span { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, .7); }

.links { display: flex; flex-direction: column; gap: 7px; margin-bottom: 34px; }
.links a { width: max-content; color: #fff; font-size: 15px; font-weight: bold; text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.links a::after { content: ' ↗'; opacity: 0; transition: opacity .18s ease; }.links a:hover { transform: translateX(3px); filter: brightness(1.2); }.links a:hover::after { opacity: 1; }
.links .discord { color: #5865f2; }
.links .github { color: #2ea44f; }

.stats { max-width: 540px; padding: 18px 19px; background: rgba(18, 19, 19, .56); border: 1px solid rgba(255, 255, 255, .09); border-radius: 9px; backdrop-filter: blur(3px); }
.stats-title { font-size: 12px; font-weight: bold; color: #d7d7d7; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.stat-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 14px; }.stat-row:last-child { border-bottom: 0; }
.stat-row span:first-child { color: #969696; }
.stat-row a { color: #fff; text-decoration: none; width: max-content; max-width: 100%; transition: color .18s ease; }
.stat-row a:hover { color: #8fa5ff; text-decoration: underline; }

#toast-container { position: fixed; top: 20px; right: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: 320px; max-width: calc(100vw - 40px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 12px; border-left: 4px solid; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.28); transition: opacity .3s, transform .3s; }
.toast svg { width: 20px; height: 20px; flex: 0 0 auto; }.toast p { margin: 0; font-size: 12px; font-weight: bold; }
.success { color: #bbf7d0; background: #14532d; border-color: #22c55e; }.info { color: #bfdbfe; background: #1e3a8a; border-color: #3b82f6; }.warning { color: #fef08a; background: #713f12; border-color: #eab308; }.error { color: #fecaca; background: #7f1d1d; border-color: #ef4444; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-animate { animation: slideIn .3s cubic-bezier(.16, 1, .3, 1) forwards; }.toast-out { opacity: 0; transform: translateX(100%); }

@media (max-width: 600px) { body { padding: 15px; }.container { min-height: calc(100vh - 30px); padding: 22px; }.ambient-glow { animation-duration: 22s; }.secret-link { right: 18%; bottom: 0; width: 150px; height: 105px; } }
@media (prefers-reduced-motion: reduce) { .ambient-glow { animation: none; }.links a, .links a::after { transition: none; } }