/* ============================================================
   Cindralore — базальт и угли.
   Палитра взята из нижнего мира: базальт, тлеющий уголь,
   светокамень и холодный огонь душ как редкий контрапункт.
   ============================================================ */
:root{
  --void:#12101A;
  --basalt:#1B1826;
  --basalt-2:#242032;
  --ember:#FF6A2B;
  --glow:#FFC24B;
  --soul:#34D8C4;
  --bone:#EDE7DC;
  --ash:#8E8698;

  --hi:rgba(255,255,255,.07);
  --lo:rgba(0,0,0,.55);
  --bevel: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--lo);
  --bevel-in: inset -3px -3px 0 var(--hi), inset 3px 3px 0 var(--lo);

  --px:"Pixelify Sans", monospace;
  --dsp:"Unbounded", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --gut:clamp(18px, 5vw, 64px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:86px}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* мелкая каменная зернистость поверх фона */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
main,header,footer{position:relative; z-index:1}

img,canvas{display:block; max-width:100%}
a{color:var(--glow); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--ember)}
code,kbd{font-family:var(--mono)}
:focus-visible{outline:3px solid var(--soul); outline-offset:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ember); color:#140d08; padding:12px 18px; font-weight:700;
}
.skip:focus{left:0}

/* ---------------- шапка ---------------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:clamp(12px,3vw,32px);
  padding:12px var(--gut);
  background:rgba(18,16,26,.88);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--basalt-2);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--bone)}
.brand__cube{
  width:22px; height:22px; flex:none;
  background:
    linear-gradient(135deg, var(--glow) 0 50%, var(--ember) 50% 100%);
  box-shadow:var(--bevel);
}
.brand__name{font-family:var(--px); font-size:19px; letter-spacing:.06em}
.nav__links{display:flex; gap:clamp(10px,2vw,26px); margin-left:auto}
.nav__links a{
  color:var(--ash); text-decoration:none; font-size:13px;
  letter-spacing:.04em; padding:6px 2px; border-bottom:2px solid transparent;
}
.nav__links a:hover{color:var(--bone); border-bottom-color:var(--ember)}

.chip{
  font-family:var(--mono); font-size:13px; font-weight:700;
  color:var(--glow); background:var(--basalt); border:0;
  padding:9px 14px; cursor:pointer; box-shadow:var(--bevel);
  letter-spacing:.02em;
}
.chip:hover{background:var(--basalt-2); color:var(--ember)}
.chip:active{box-shadow:var(--bevel-in)}

/* ---------------- слои породы ---------------- */
.layer{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,7vw,86px) var(--gut);
  position:relative;
}
.layer + .layer::before{
  content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:10px;
  background:
    repeating-linear-gradient(90deg,
      var(--basalt-2) 0 20px, transparent 20px 24px,
      #2E2739 24px 44px, transparent 44px 48px),
    repeating-linear-gradient(90deg,
      transparent 0 236px, rgba(255,106,43,.55) 236px 256px,
      transparent 256px 452px, rgba(255,194,75,.4) 452px 472px, transparent 472px 700px);
}
.strata{
  font-family:var(--px); font-size:13px; letter-spacing:.2em;
  color:var(--ash); margin:0 0 clamp(20px,3vw,34px);
  display:flex; align-items:center; gap:12px;
}
.strata__y{
  color:#140d08; background:var(--ember);
  padding:2px 9px 3px; box-shadow:var(--bevel);
}

/* ---------------- герой ---------------- */
.layer--hero{padding-top:clamp(34px,5vw,56px)}
.hero{
  display:grid; gap:clamp(30px,5vw,54px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:start;
}
@media (max-width:960px){ .hero{grid-template-columns:1fr} }

.wordmark{
  font-family:var(--px); font-weight:700;
  font-size:clamp(2.1rem,7.2vw,4.3rem);
  line-height:.92; margin:0 0 20px; letter-spacing:-.01em;
  color:var(--bone);
  display:flex; flex-wrap:nowrap; white-space:nowrap;
}
.wordmark span{
  display:inline-block;
  animation:drop .5s cubic-bezier(.2,.9,.25,1) backwards;
}
.wordmark span:nth-child(1){animation-delay:.02s} .wordmark span:nth-child(2){animation-delay:.06s}
.wordmark span:nth-child(3){animation-delay:.10s} .wordmark span:nth-child(4){animation-delay:.14s}
.wordmark span:nth-child(5){animation-delay:.18s} .wordmark span:nth-child(6){animation-delay:.22s}
.wordmark span:nth-child(7){animation-delay:.26s} .wordmark span:nth-child(8){animation-delay:.30s}
.wordmark span:nth-child(9){animation-delay:.34s} .wordmark span:nth-child(10){animation-delay:.38s}
.wordmark span:nth-child(4),.wordmark span:nth-child(9){color:var(--ember)}
@keyframes drop{ from{ transform:translateY(-46px); opacity:0 } to{ transform:none; opacity:1 } }

.lead{
  font-size:clamp(15px,1.5vw,17px); color:var(--ash);
  max-width:44ch; margin:0 0 30px;
}
.lead b{color:var(--bone)}

/* карточка адреса */
.ipcard{
  background:var(--basalt); box-shadow:var(--bevel);
  padding:clamp(18px,2.4vw,24px); margin-bottom:16px;
}
.ipcard__label{
  font-family:var(--px); font-size:12px; letter-spacing:.2em;
  color:var(--glow); margin:0 0 12px;
}
.ipcard__row{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch}
.ipcard__addr{
  flex:1 1 220px; display:flex; align-items:center;
  background:var(--void); box-shadow:var(--bevel-in);
  padding:12px 16px; font-size:clamp(17px,2.4vw,22px); font-weight:700;
  color:var(--bone); letter-spacing:.02em; user-select:all;
}
.ipcard__hint{margin:12px 0 0; font-size:12.5px; color:var(--ash)}

.btn{
  font-family:var(--mono); font-weight:700; font-size:14px;
  border:0; cursor:pointer; padding:13px 22px;
  box-shadow:var(--bevel); letter-spacing:.02em;
  transition:background .12s, transform .06s;
}
.btn:active{box-shadow:var(--bevel-in); transform:translateY(1px)}
.btn--primary{background:var(--ember); color:#160C05}
.btn--primary:hover{background:var(--glow)}

/* статус сервера */
.status{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ash)}
.status__dot{width:10px; height:10px; flex:none; margin-top:7px; background:var(--ash); box-shadow:var(--bevel)}
.status__dot--on{background:var(--soul)}
.status__dot--off{background:#C4453A}
.status__dot--wait{background:var(--glow)}
.status b{color:var(--bone)}

/* ---------------- мини-игра ---------------- */
.mine{background:var(--basalt); box-shadow:var(--bevel); padding:14px}
.mine__hud{
  display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;
}
.hud{
  flex:1 1 0; min-width:88px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--void); box-shadow:var(--bevel-in); padding:9px 12px;
}
.hud__k{font-family:var(--px); font-size:11px; letter-spacing:.16em; color:var(--ash)}
.hud__v{font-family:var(--px); font-size:23px; line-height:1; color:var(--bone)}
.hud--time .hud__v{color:var(--glow)}
.hud--score .hud__v{color:var(--ember)}
.hud--best .hud__v{color:var(--soul)}
.hud--time.is-low .hud__v{color:#FF5A4D}

.mine__stage{position:relative; background:var(--void); box-shadow:var(--bevel-in)}
#mCanvas{width:100%; height:auto; image-rendering:pixelated; touch-action:manipulation; cursor:crosshair}
.mine__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
  padding:22px; background:rgba(18,16,26,.93);
}
.mine__overlay[hidden]{display:none}
.mine__title{font-family:var(--px); font-size:clamp(26px,4.5vw,38px); margin:0; color:var(--bone); letter-spacing:.05em}
.mine__sub{margin:0; max-width:34ch; font-size:13px; color:var(--ash)}
.mine__legend{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin:12px 0 0;
  font-size:11.5px; color:var(--ash);
}
.ore{display:flex; align-items:center; gap:6px}
.ore::before{content:""; width:11px; height:11px; box-shadow:var(--bevel)}
.ore[data-ore=coal]::before{background:#2C2C31}
.ore[data-ore=copper]::before{background:#C0703F}
.ore[data-ore=iron]::before{background:#D8AF93}
.ore[data-ore=gold]::before{background:#F5C43B}
.ore[data-ore=diamond]::before{background:#4CE0DA}

/* ---------------- заголовки секций ---------------- */
.h2{
  font-family:var(--dsp); font-weight:900;
  font-size:clamp(1.7rem,4.2vw,2.7rem);
  line-height:1.05; margin:0 0 10px; letter-spacing:-.02em;
}
.sub{margin:0 0 clamp(26px,4vw,40px); color:var(--ash); max-width:56ch; font-size:14.5px}

/* ---------------- шаги ---------------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.step{
  background:var(--basalt); box-shadow:var(--bevel); padding:20px;
  transition:transform .14s, background .14s;
}
.step:hover{background:var(--basalt-2); transform:translateY(-3px)}
.step__n{
  font-family:var(--px); font-size:13px; letter-spacing:.14em;
  color:#140d08; background:var(--glow); padding:2px 8px 3px;
  box-shadow:var(--bevel); display:inline-block; margin-bottom:14px;
}
.step__h{font-family:var(--dsp); font-weight:700; font-size:16px; margin:0 0 8px; line-height:1.25}
.step__p{margin:0; font-size:13.5px; color:var(--ash)}
.step__p b{color:var(--bone)}
.step__p code{color:var(--glow); word-break:break-all}

/* ---------------- чат-команды ---------------- */
.chat{background:var(--basalt); box-shadow:var(--bevel); padding:clamp(18px,3vw,28px)}
.chat__line{margin:24px 0 8px}
.chat__line:first-child{margin-top:0}
.chat__who{
  font-family:var(--px); font-size:12px; letter-spacing:.18em; color:var(--glow);
}
.chat__cmd{
  margin:0 0 8px; padding:12px 16px; background:var(--void); box-shadow:var(--bevel-in);
  font-size:clamp(13px,1.9vw,16px); font-weight:700; overflow-x:auto; white-space:nowrap;
}
.c-slash{color:var(--ember)}
.c-arg{color:var(--soul)}
.chat__note{margin:0; font-size:13px; color:var(--ash)}
.chat__note code{color:var(--glow)}
kbd{
  background:var(--basalt-2); box-shadow:var(--bevel); padding:1px 7px 2px;
  font-size:12px; color:var(--bone);
}
.notice{
  margin-top:16px; padding:16px 20px;
  background:var(--basalt); box-shadow:var(--bevel);
  border-left:4px solid var(--ember);
}
.notice p{margin:0; font-size:13.5px; color:var(--ash)}
.notice b{color:var(--bone)}

/* ---------------- факты ---------------- */
.facts{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fact{background:var(--basalt); box-shadow:var(--bevel); padding:16px 18px}
.fact__k{display:block; font-family:var(--px); font-size:11px; letter-spacing:.16em; color:var(--ash); margin-bottom:6px}
.fact__v{display:block; font-family:var(--dsp); font-weight:700; font-size:17px; color:var(--bone)}

/* ---------------- подвал ---------------- */
.foot{
  border-top:2px solid var(--basalt-2);
  padding:clamp(34px,5vw,54px) var(--gut);
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
}
.foot__label{font-family:var(--px); font-size:11px; letter-spacing:.2em; color:var(--ash); margin:0 0 8px}
.foot__addr{
  font-family:var(--mono); font-weight:700; font-size:clamp(16px,3vw,21px);
  color:var(--glow); background:var(--basalt); border:0; cursor:pointer;
  padding:12px 18px; box-shadow:var(--bevel);
}
.foot__addr:hover{color:var(--ember); background:var(--basalt-2)}
.foot__addr:active{box-shadow:var(--bevel-in)}
.foot__note{margin:0; font-size:12.5px; color:var(--ash); max-width:36ch}

/* ---------------- тост ---------------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,26px);
  background:var(--glow); color:#140d08; font-weight:700; font-size:14px;
  padding:12px 22px; box-shadow:var(--bevel); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

@media (max-width:640px){
  .nav__links{display:none}
  .chip{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .wordmark span{animation:none}
}