/* Sock Monkey RP — same palette as SMC Dashboard: night indigo, neon purple/magenta, cyan, gold #FCD376 */
:root {
  --bg: #0b0a1d; --panel: #141230; --panel2: #1b1840; --line: #2b2656; --text: #eeeaff; --muted: #a59fd0;
  --accent: #b14cff; --accent2: #ff4fd8; --cyan: #3fd0ff; --gold: #fcd376; --ok: #3be8a0; --bad: #ff5c7a;
  --grad: linear-gradient(90deg, #b14cff, #ff4fd8);
  --grad-text: linear-gradient(90deg, #3fd0ff, #b14cff 45%, #ff4fd8 70%, #fcd376);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0; color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 700px at 85% -5%, #2a1460 0%, transparent 60%),
              radial-gradient(1000px 600px at -10% 60%, #0d2a5c 0%, transparent 55%), var(--bg);
  background-attachment: fixed;
}
a { color: var(--cyan); }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; margin-top: 18px; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 600; text-decoration: none; color: var(--text); border: 1px solid var(--line); background: transparent; cursor: pointer; transition: box-shadow .2s, border-color .2s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-grad { background: var(--grad); border: 0; color: #fff; box-shadow: 0 0 18px #b14cff55; }
.btn-grad:hover { box-shadow: 0 0 28px #ff4fd899; }
.btn-ghost { background: #ffffff08; }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-lg { padding: 14px 24px; font-size: 17px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: #0b0a1dcc; backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-image: var(--grad) 1; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .3px; }
.brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 12px #b14cff88; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav nav a:hover { color: var(--text); }

/* hero */
.hero { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; padding: 60px 16px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; filter: saturate(1.2); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0a1d55 0%, #0b0a1d 96%); }
.hero-inner { position: relative; z-index: 1; max-width: 820px; }
.hero-logo { width: 220px; height: 220px; border-radius: 50%; filter: drop-shadow(0 0 30px #b14cffaa); animation: float 6s ease-in-out infinite; }
.hero-logo.animated { border-radius: 0; animation: none; filter: drop-shadow(0 0 24px #b14cff77); }
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero h1 { font-size: clamp(38px, 7vw, 72px); line-height: 1.05; margin: 18px 0 10px; letter-spacing: -.5px; }
.tagline { font-size: clamp(17px, 2.2vw, 21px); color: #d9d3ff; margin: 0 auto 22px; max-width: 640px; }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: #141230cc; border: 1px solid var(--line); font-weight: 600; margin-bottom: 24px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.live.on .live-dot { background: var(--ok); box-shadow: 0 0 0 0 #3be8a088; animation: pulse 2s infinite; }
.live.off .live-dot { background: var(--bad); }
.live b { color: var(--gold); font-variant-numeric: tabular-nums; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px #3be8a000; } 100% { box-shadow: 0 0 0 0 #3be8a000; } }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* sections */
.section { max-width: 1120px; margin: 0 auto; padding: 70px 20px; }
.section h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px; text-align: center; }
.section-sub { text-align: center; color: var(--muted); margin: 0 0 34px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, #1b1840, #141230); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 30px #b14cff22; }
.card svg { width: 30px; height: 30px; fill: var(--cyan); }
.card:nth-child(3n+2) svg { fill: var(--accent2); }
.card:nth-child(3n) svg { fill: var(--gold); }
.card h3 { margin: 12px 0 6px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* changelog */
.posts { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
.post { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 22px; }
.post-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.post-date { color: var(--gold); font-weight: 700; }
.post-author { color: var(--muted); font-size: 14px; }
.post-body { color: #ddd8ff; font-size: 15px; overflow-wrap: anywhere; }
.post-body h4 { margin: 10px 0 4px; font-size: 16px; color: var(--text); }
.post-body ul { margin: 6px 0; padding-left: 20px; }
.post-body li { margin: 2px 0; }
.post-body p { margin: 6px 0; }
.post-body code { background: #0b0a1d; padding: 1px 5px; border-radius: 4px; font-size: 14px; }
.post-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.post-imgs img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }

/* photo pile */
.pile { position: relative; height: 560px; margin: 0 auto; max-width: 1040px; }
.photo { position: absolute; width: 270px; padding: 10px 10px 36px; background: #f6f1e7; border-radius: 3px; cursor: zoom-in;
  box-shadow: 0 2px 4px #0006, 0 12px 28px #000a; transform: translate(-50%, -50%) rotate(var(--r)) scale(.92);
  left: var(--x); top: var(--y); transition: transform .35s cubic-bezier(.2,.8,.3,1.2), box-shadow .35s, opacity .4s;
  opacity: 0; }
.pile.ready .photo { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); }
.photo:hover, .photo:focus-visible { z-index: 100 !important; transform: translate(-50%, -54%) rotate(0deg) scale(1.12) !important; box-shadow: 0 6px 10px #0007, 0 26px 50px #000c, 0 0 30px #b14cff44; outline: none; }
.photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #222; }
.photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 8px; color: #3a3355; font: 600 14px/1.2 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: #fcd37699; box-shadow: 0 1px 2px #0003; }
.photo:nth-child(3n)::before { background: #ff4fd877; } .photo:nth-child(3n+1)::before { background: #3fd0ff77; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: #05040fe6; backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 60px #000; }
.lightbox figcaption { margin-top: 10px; color: var(--muted); }
.lightbox button { position: absolute; background: #141230cc; border: 1px solid var(--line); color: var(--text); width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.lightbox button:hover { border-color: var(--accent); }
.lb-close { top: 18px; right: 18px; font-size: 20px !important; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* join */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.step { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px 22px; }
.step .num { position: absolute; top: -16px; left: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 14px #b14cff88; }
.step h3 { margin: 8px 0 6px; }
.step p { color: var(--muted); margin: 0 0 14px; }

.foot { text-align: center; padding: 40px 16px 50px; border-top: 1px solid var(--line); color: var(--muted); }
.foot img { border-radius: 50%; }
.foot p { margin: 8px 0; }

@media (max-width: 720px) {
  .nav { padding: 10px 14px; gap: 10px; }
  .nav nav { display: none; }
  .brand span { font-size: 15px; }
  .nav .btn { margin-left: auto; }
  .hero { min-height: 80vh; padding-top: 40px; }
  .hero-logo { width: 150px; height: 150px; }
  .section { padding: 54px 16px; }
  .btn-lg { width: 100%; justify-content: center; }
  .pile { height: 460px; }
  .photo { width: 170px; padding: 7px 7px 26px; }
  .photo figcaption { font-size: 12px; bottom: 5px; }
  .photo::before { width: 48px; height: 14px; top: -6px; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; }
}