/* ════════════════════════════════════════════════════════════
   YOUGHURT SMP — style.css
   Стили публичного сайта (index.html)
   Шрифты: Press Start 2P (пиксельный) + Rajdhani (основной)
════════════════════════════════════════════════════════════ */

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

:root {
  --bg:     #0a0010;
  --deep:   #110020;
  --purple: #7c3aed;
  --violet: #a855f7;
  --pink:   #e040fb;
  --cyan:   #22d3ee;
  --gold:   #fbbf24;
  --text:   #f3e8ff;
  --muted:  #a78bfa;
  --card:   rgba(17, 0, 32, .9);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ── Background stars ── */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.10) 0%, transparent 60%);
}
.stars::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px   1px   at 8%  18%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 62%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 60% 14%, rgba(255,255,255,.80) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(168,85,247,.85)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 38%, rgba(34,211,238,.75)  0%, transparent 100%),
    radial-gradient(1px   1px   at 85% 55%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 44% 90%, rgba(255,255,255,.50) 0%, transparent 100%);
  background-size: 240px 240px;
}

/* ── Floating pixels ── */
.pixel-field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.pixel {
  position: absolute;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0;   }
  10%  { opacity: .18; }
  90%  { opacity: .12; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0;   }
}

/* ── Navigation ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 38px;
  background: rgba(10, 0, 16, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(124, 58, 237, .3);
}
.nav-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: var(--violet);
  text-shadow: 0 0 12px var(--purple);
}
.nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  transition: color .2s; cursor: pointer;
}
.nav-links a:hover { color: var(--pink); }

/* ── Hero ── */
.hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 120px 24px 60px;
}
.hero-badge {
  display: inline-block;
  background: rgba(124, 58, 237, .2);
  border: 1px solid rgba(168, 85, 247, .4);
  border-radius: 4px; padding: 6px 15px;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: var(--cyan); margin-bottom: 26px;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(34,211,238,.3); }
  50%       { box-shadow: 0 0 22px rgba(34,211,238,.7); }
}
.hero-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 5vw, 50px); line-height: 1.5;
  color: #fff; margin-bottom: 12px;
  text-shadow: 0 0 20px var(--purple), 4px 4px 0 rgba(80,0,120,.8);
  animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { text-shadow: 0 0 20px var(--purple), 4px 4px 0 rgba(80,0,120,.8); }
  to   { text-shadow: 0 0 40px var(--violet), 0 0 80px rgba(168,85,247,.55), 4px 4px 0 rgba(80,0,120,.8); }
}
.hero-sub {
  font-size: clamp(12px, 2vw, 16px); color: var(--muted);
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 44px; font-weight: 600;
}

/* IP box */
.ip-box {
  display: flex; align-items: center;
  background: rgba(17, 0, 32, .97);
  border: 2px solid var(--purple); border-radius: 6px;
  overflow: hidden; margin-bottom: 36px;
  box-shadow: 0 0 30px rgba(124,58,237,.4);
  transition: box-shadow .3s;
}
.ip-box:hover { box-shadow: 0 0 50px rgba(168,85,247,.6); }
.ip-label {
  padding: 13px 16px;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--muted); background: rgba(124,58,237,.15);
  border-right: 1px solid rgba(124,58,237,.4); white-space: nowrap;
}
.ip-value {
  padding: 13px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 2vw, 12px);
  color: var(--gold); letter-spacing: 2px;
}
.ip-copy {
  padding: 13px 18px; background: var(--purple);
  border: none; color: #fff;
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  cursor: pointer; transition: background .2s;
}
.ip-copy:hover { background: var(--violet); }

.hero-cta {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; padding: 15px 38px; border-radius: 4px;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  border: none; cursor: pointer;
  box-shadow: 0 0 28px rgba(224,64,251,.4);
  transition: transform .2s, box-shadow .2s;
}
.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(224,64,251,.6);
}

/* ── Section layout ── */
.section {
  position: relative; z-index: 1;
  padding: 78px 24px; max-width: 1100px; margin: 0 auto;
}
.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 2vw, 16px); color: var(--violet);
  text-align: center; margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(168,85,247,.45);
}
.section-line {
  width: 76px; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  margin: 0 auto 46px; border-radius: 2px;
}
.divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.4), transparent);
  position: relative; z-index: 1;
}

/* ── Features grid ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.feature-card {
  background: var(--card);
  border: 1px solid rgba(124,58,237,.3); border-radius: 8px;
  padding: 26px 20px; text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.feature-card:hover {
  border-color: var(--violet);
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(124,58,237,.24);
}
.feature-icon {
  font-size: 32px; margin-bottom: 12px; display: block;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.5));
}
.feature-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px; color: var(--gold); margin-bottom: 10px;
}
.feature-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── News grid (публичный) ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.news-card {
  background: var(--card);
  border: 1px solid rgba(124,58,237,.3); border-radius: 8px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.news-card:hover {
  border-color: var(--violet);
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(124,58,237,.24);
}
.nc-body { padding: 18px 20px 12px; }
.tag-badge {
  display: inline-block; color: #fff;
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  padding: 4px 9px; border-radius: 3px; margin-bottom: 11px;
}
.tag-badge.announcement { background: linear-gradient(135deg, var(--purple), var(--pink)); }
.tag-badge.update        { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.tag-badge.event         { background: linear-gradient(135deg, #d97706, #fbbf24); color: #1a0a00; }
.nc-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; line-height: 1.4; }
.nc-text  { font-size: 13px; color: var(--muted); line-height: 1.6; }
.nc-foot  { padding: 9px 20px; border-top: 1px solid rgba(124,58,237,.2); }
.nc-date  {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: rgba(167,139,250,.42);
}
.news-empty {
  text-align: center; color: var(--muted);
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  padding: 38px; border: 1px dashed rgba(124,58,237,.3);
  border-radius: 8px; line-height: 2.5;
}

/* ── How to join ── */
.join-wrapper {
  background: var(--card);
  border: 1px solid rgba(124,58,237,.3); border-radius: 12px;
  padding: 44px 40px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
@media (max-width: 660px) { .join-wrapper { grid-template-columns: 1fr; padding: 26px 18px; } }
.join-steps { display: flex; flex-direction: column; gap: 18px; }
.step { display: flex; align-items: flex-start; gap: 14px; }
.step-num {
  font-family: 'Press Start 2P', monospace; font-size: 11px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--purple), var(--pink));
  width: 33px; height: 33px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 0 12px rgba(168,85,247,.4);
}
.step-text h4 {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 2px; text-transform: uppercase;
}
.step-text p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.step-text code {
  background: rgba(124,58,237,.2);
  border: 1px solid rgba(124,58,237,.4);
  padding: 1px 6px; border-radius: 3px;
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: var(--gold);
}

/* Minecraft console window */
.mc-window {
  background: #1a1a2e; border: 3px solid #2d2d5e;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 28px rgba(124,58,237,.4);
}
.mc-titlebar { background: #2d2d5e; padding: 6px 10px; display: flex; gap: 6px; align-items: center; }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; }
.mc-body { padding: 14px; font-family: 'Press Start 2P', monospace; font-size: 7px; }
.mc-line              { color: #a0a0c0; margin: 4px 0; }
.mc-line.text-green   { color: #4ade80; }
.mc-line.text-gold    { color: var(--gold); }
.mc-line.text-violet  { color: var(--violet); }
.mc-line.text-cyan    { color: var(--cyan); }

/* ── Rules ── */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 13px;
}
.rule-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(17, 0, 32, .6);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 6px; padding: 15px;
  transition: border-color .2s;
}
.rule-item:hover { border-color: rgba(168,85,247,.5); }
.rule-num { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--pink); flex-shrink: 0; }
.rule-item p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.rule-item p strong { color: var(--text); }

/* ── Footer ── */
footer {
  position: relative; z-index: 1;
  text-align: center; padding: 28px 24px;
  border-top: 1px solid rgba(124,58,237,.2);
}
footer p { color: rgba(167,139,250,.38); font-size: 12px; margin-bottom: 10px; }
footer span { color: var(--pink); }
.admin-portal-link {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: rgba(124,58,237,.28); background: none; border: none;
  cursor: pointer; transition: color .2s; text-decoration: none;
}
.admin-portal-link:hover { color: var(--violet); }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; font-family: 'Press Start 2P', monospace; font-size: 8px;
  padding: 11px 22px; border-radius: 4px; z-index: 9999;
  box-shadow: 0 8px 28px rgba(168,85,247,.5);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Spinner ── */
.spinner {
  display: inline-block; width: 10px; height: 10px;
  border: 2px solid rgba(124,58,237,.3);
  border-top-color: var(--violet); border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scroll animations ── */
.fade-in { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 580px) {
  nav { padding: 12px 14px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 11px; }
}