@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Подключение Unifont для основного текста */
@font-face {
  font-family: 'Unifont';
  src: local('Unifont'), local('GNU Unifont'), url('https://stgiga.github.io/UnifontEX/UnifontExMono.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0a0a0d;
  --bg-2:#131317;
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);

  --gold-1:#ffe9a8;
  --gold-2:#f0bd51;
  --gold-3:#c9922e;
  --gold-4:#8a5f16;
  --gold-grad:linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);

  --text:#f3f1ea;
  --muted:#928d82;
  --online:#5fd37a;
  --offline:#e2665a;

  /* Пиксельному сайту — строгие прямоугольные формы */
  --radius:0px;
  --radius-lg:0px;

  --fs-2xs:10px;
  --fs-xs:12px;
  --fs-sm:15px;
  --fs-base:17px;
  --fs-md:18px;
  --fs-lg:20px;
  --fs-hero:clamp(28px, 4vw, 42px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family: 'Unifont', 'Courier New', monospace;
  font-size: var(--fs-md);
  image-rendering: pixelated;
  background:var(--bg);
  background-image:
    radial-gradient(700px 420px at 15% -8%, rgba(240,189,81,.14), transparent 60%),
    radial-gradient(600px 380px at 90% 10%, rgba(240,189,81,.08), transparent 60%);
  background-repeat:no-repeat;
  line-height:1.5;
}

a{color:inherit; text-decoration:none}
::selection{background:rgba(240,189,81,.35)}

a:focus-visible, button:focus-visible, .link-card:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
}

/* Стилизация всех заголовков под Minecraft */
h1, h2, h3, h4, h5, h6, .display {
  font-family: 'Press Start 2P', monospace;
  font-weight: normal;
  letter-spacing: 0px;
  line-height: 1.4;
}

.mono{font-family: 'Unifont', 'Courier New', monospace}
.pixel{
  font-family:'Press Start 2P', monospace;
  letter-spacing: 0px;
}

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --- Панели --- */
.panel{
  background:linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:2px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.panel-gold{
  border:2px solid var(--gold-2);
  background: linear-gradient(160deg, #17171b, #101013);
  box-shadow:0 10px 45px rgba(201,146,46,.12), 0 10px 40px rgba(0,0,0,.4);
}

/* --- Кнопки --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:12px 20px;
  border:2px solid var(--border);
  background:var(--glass-strong);
  color:var(--text);
  font-family: 'Press Start 2P', monospace;
  font-size:var(--fs-xs);
  cursor:pointer;
  transition: background .15s ease;
}
.btn:hover{background:rgba(255,255,255,.11);}
.btn:active{transform: translateY(1px);}

.btn-accent{
  background:var(--gold-grad);
  border:2px solid var(--gold-1);
  color:#241a05;
}
.btn-accent:hover{
  background: var(--gold-1);
}

.btn[disabled], .btn.is-disabled{cursor:not-allowed; opacity:.5}

/* --- Hero блок --- */
.hero{
  max-width:1180px;
  margin:0 auto;
  padding:5rem 1.5rem 3rem;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:3rem;
  align-items:start;
}
.hero-copy{text-align:left}
.hero h1{
  font-size: var(--fs-hero);
  margin:0 0 1.2rem;
}
.hero p.lead{
  color:var(--text);
  opacity:.85;
  max-width:46ch;
  margin:0 0 2rem;
  font-size:var(--fs-md);
  line-height:1.6;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

/* --- Исправленная статус-карточка (Больше не кривая) --- */
.status-card{
  width:100%;
  max-width:340px;
  margin:0 auto;
  padding:1.3rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.status-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:.6rem;
  text-align:center;
  font-size:var(--fs-base);
}
.status-title-wrapper {
  display:flex;
  align-items:center;
  gap:0.5em;
  font-size:var(--fs-base);
}
.status-label{
  text-transform:capitalize;
}
.status-dot{
  width:10px;
  height:10px;
  background:var(--muted);
  display:inline-block;
  flex:none;
}
.status-dot.online{background:var(--online); box-shadow:0 0 8px var(--online)}
.status-dot.offline{background:var(--offline)}

.status-count{
  font-family: 'Press Start 2P', monospace;
  font-size:var(--fs-base);
  color:var(--gold-2);
}
.status-count .max{color:var(--muted); font-size:var(--fs-xs);}
.status-sub{color:var(--muted); font-size:var(--fs-sm); text-align:center; min-height: 1.2em;}

/* IP плашка */
.ip-row{
  display:flex;
  flex-direction:row;
  gap:.6rem;
  width:100%;
}
.ip-field{
  flex:1;
  min-width:0;
  padding:12px;
  background:rgba(0,0,0,.45);
  border:2px solid var(--border);
  color:var(--gold-1);
  font-family: 'Press Start 2P', monospace;
  font-size:var(--fs-xs);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btn-icon{
  flex:none;
  width:44px;
  padding:0;
}

/* --- Особенности --- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem;
}
.feature-card{
  padding:1.8rem;
  border:2px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.feature-head{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.feature-icon{
  width:40px;height:40px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad);
  font-size:var(--fs-lg);
  color: black;
}
.feature-title{
  font-size:var(--fs-lg);
  color:var(--gold-2);
  line-height:1.3;
  text-transform:capitalize;
}
.feature-desc{font-size:var(--fs-base); color:var(--muted); line-height:1.5}

/* --- FAQ --- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  max-width:760px;
}
.faq-item{
  border:2px solid var(--border);
  padding:0;
}
.faq-item summary{
  padding:1.1rem 1.4rem;
  cursor:pointer;
  font-family: 'Press Start 2P', monospace;
  font-size:var(--fs-xs);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  color:var(--gold-2);
}
.faq-item[open] summary::after{content:'-'}
.faq-item .faq-content{
  padding:0 1.4rem 1.3rem;
  color:var(--muted);
  font-size:var(--fs-base);
}

/* --- Правила --- */
.rules-page{
  max-width:860px;
  padding-top:2.5rem;
}
.rules-title{
  font-size:var(--fs-hero);
  margin:0 0 1.5rem;
}
.rules-intro{
  padding:1.2rem 1.4rem;
  color:var(--muted);
  font-size:var(--fs-base);
  line-height:1.6;
  margin:0 0 2.5rem;
}
.rule-section-title{
  display:flex;
  align-items:center;
  font-family:'Press Start 2P', monospace;
  font-size:var(--fs-md);
  color:var(--gold-2);
  margin:2.5rem 0 1rem;
}
.rule-section-title::before{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  background:var(--gold-grad);
  margin-right:12px;
  flex:none;
}
.rule-block{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  padding:1.5rem 1.6rem;
  margin-bottom:1rem;
}
.rule-num{
  flex:none;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Press Start 2P', monospace;
  font-size:var(--fs-xs);
  color:#241a05;
  background:var(--gold-grad);
}
.rule-body{flex:1; min-width:0}
.rule-body h3{
  font-size:var(--fs-lg);
  color:var(--text);
  margin:0 0 .8rem;
}
.rule-body h4{
  font-size:var(--fs-xs);
  color:var(--gold-2);
  margin:1rem 0 .6rem;
}
.rule-body p{
  font-size:var(--fs-md);
  color:var(--muted);
  line-height:1.6;
  margin:0 0 .8rem;
}
.rule-body ul{
  margin:0 0 .8rem;
  padding:0;
  list-style:none;
}
.rule-body ul li{
  position:relative;
  padding-left:1.2em;
  font-size:var(--fs-md);
  color:var(--muted);
  line-height:1.6;
}
.rule-body ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  background:var(--gold-2);
}
.penalty{
  margin-top:1rem;
  padding:.8rem 1rem;
  border:2px solid var(--offline);
  background:rgba(226,102,90,.08);
  color:var(--offline);
  font-family:'Unifont', 'Courier New', monospace;
  font-size:var(--fs-sm);
}

@media (max-width:560px){
  .rule-block{flex-direction:column; gap:.8rem}
  .rule-num{width:auto; height:auto; padding:.4rem .7rem; align-self:flex-start}
}

/* --- Секции --- */
.section{
  max-width:1180px;
  margin:0 auto;
  padding:3rem 1.5rem;
}
.section h2{
  font-size:var(--fs-md);
  margin-bottom:2rem;
  display:flex;
  align-items:center;
}
.section h2 .bar{
  display:inline-block;
  width:16px;
  height:16px; /* Квадратный маркер вместо полоски */
  background:var(--gold-grad);
  margin-right:12px;
}

/* --- Footer --- */
footer{
  border-top:2px solid var(--border);
  padding:3rem 1.5rem;
  margin-top:4rem;
  background: var(--bg-2);
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.footer-logo{
  font-size:var(--fs-xs);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.8rem;
}
.footer-links a{
  color:var(--muted);
  font-family: 'Press Start 2P', monospace;
  font-size:var(--fs-2xs);
  transition:color .15s ease;
}
.footer-links a:hover{color:var(--gold-2)}
.footer-copy{
  color:var(--muted);
  font-size:var(--fs-sm);
  opacity:.6;
}

/* --- Адаптивность --- */
@media (max-width:960px){
  .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:3rem;
  }
  .hero-copy{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero p.lead{margin-inline:auto; text-align: center;}
  .hero-cta{justify-content:center}
}

@media (max-width:480px) {
  .hero h1 { font-size: 22px; }
  .btn { width: 100%; }
}