/* ============================================================================
 * styles.css — «Степь и небо»: графит, песок, бирюза.
 * База — из прототипа; добавлены статус-бар, навигация уровней, доступность.
 * ==========================================================================*/
:root{
  --ink:#22201b; --paper:#efe7d6; --paper2:#e6dcc6;
  --steppe:#2f5d57; --steppe-dk:#1f3f3b;
  --sand:#c9a24a; --sand-dk:#a07d2c;
  --clay:#b05a37; --ok:#3f7d4f; --no:#b5462f;
  --line:#cdbf9f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;
  background:radial-gradient(120% 80% at 50% -10%, #f6efe0 0%, var(--paper) 55%, var(--paper2) 100%);
  color:var(--ink);min-height:100vh;padding:24px 16px 60px}
.wrap{max-width:780px;margin:0 auto}
header{text-align:center;margin-bottom:8px}
.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--sand-dk);font-family:Verdana,sans-serif}
h1{font-size:40px;letter-spacing:1px;color:var(--steppe-dk);margin:4px 0 2px}
.sub{font-size:15px;color:#6b6354;font-style:italic}
.author{font-size:11px;color:#8a8170;margin-top:6px;font-family:Verdana,sans-serif}

/* статус игрока — три равные карточки, по центру */
.status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  max-width:460px;margin:16px auto 4px}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#fbf6ea;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
  min-width:0;text-align:center}
.stat-v{min-width:0}
.stat-k{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#8a8170;font-family:Verdana,sans-serif}
.stat-v{font-size:15px;font-weight:bold;color:var(--steppe-dk)}

.keybar{display:flex;justify-content:center;gap:10px;margin:16px 0 10px}
.ktile{width:54px;height:54px;border-radius:10px;background:var(--steppe);color:#f3ead7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--steppe-dk)}
.ktile b{font-size:24px;line-height:1}
.ktile span{font-size:10px;opacity:.8;font-family:Verdana,sans-serif;margin-top:2px}
.ipsilon{text-align:center;font-size:13px;color:#6b6354;font-family:Verdana,sans-serif;margin-bottom:14px}
.ipsilon b{color:var(--clay)}

/* навигация по уровням — заголовок строго по центру, кнопки по краям равные */
.levelnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:12px}
.level-title{font-size:13px;color:#6b6354;font-family:Verdana,sans-serif;text-align:center}
.navbtn{font-family:Verdana,sans-serif;font-size:12px;border:1px solid var(--steppe);
  color:var(--steppe-dk);background:#fbf6ea;border-radius:8px;padding:8px 12px;cursor:pointer;
  white-space:nowrap;min-width:92px;text-align:center}
#btnPrev{justify-self:start}
#btnNext{justify-self:end}
.navbtn:hover:not(:disabled){background:#f0e7d3}
.navbtn:disabled{opacity:.4;cursor:not-allowed}

.card{background:#fbf6ea;border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 10px;box-shadow:0 10px 30px rgba(60,50,30,.08);margin-bottom:18px}
.root-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.root-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--clay);font-family:Verdana,sans-serif}
.root{font-size:30px;color:var(--steppe-dk);font-weight:bold;letter-spacing:2px}
.root-note{font-size:13px;color:#6b6354;margin-bottom:14px;line-height:1.5}
.root-note .hl{color:var(--clay);font-weight:bold}
.task{font-size:14px;color:#4a4536;background:#f0e7d3;border-left:4px solid var(--sand);
  padding:10px 14px;border-radius:0 8px 8px 0;margin-bottom:16px;font-family:Verdana,sans-serif;line-height:1.5}
.placeholder{font-size:14px;color:#8a8170;font-family:Verdana,sans-serif;font-style:italic;
  text-align:center;padding:24px 10px}

.chain{display:flex;flex-direction:column;gap:8px}
.link{background:#fff;border:1px solid #e7dcc2;border-radius:10px;padding:11px 14px;
  transition:border-color .15s,background .15s}
.link.proven{border-color:var(--ok);background:#f3f8f1}
.link.added{border-style:dashed;border-color:var(--sand);background:#fbf7ec}
.hypothesis{font-size:11px;font-family:Verdana,sans-serif;color:var(--sand-dk);
  border:1px dashed var(--sand);border-radius:20px;padding:4px 8px;white-space:nowrap;align-self:center}
.row1{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center}
.lang{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--steppe);
  padding:4px 6px;border-radius:6px;text-align:center;font-family:Verdana,sans-serif}
.word{font-size:18px;color:var(--ink)}
.word .tr{font-size:13px;color:#8a8170;font-style:italic;margin-left:6px}
.word .mean{display:block;font-size:13px;color:#6b6354;margin-top:2px}
.badge{font-size:11px;font-family:Verdana,sans-serif;padding:4px 8px;border-radius:20px;
  border:1px solid var(--steppe);color:var(--steppe-dk);cursor:pointer;background:transparent;white-space:nowrap}
.link.proven .badge{background:var(--ok);color:#fff;border-color:var(--ok)}

.proof{margin-top:10px;padding:10px 12px;background:#f6f1e6;border-radius:8px;font-size:13px;
  font-family:Verdana,sans-serif;color:#4a4536;line-height:1.6;display:none}
.proof.show{display:block}
.transform{font-family:'DejaVu Sans Mono',monospace;font-size:14px;color:var(--steppe-dk);margin:6px 0;letter-spacing:.5px}
.transform .ar{color:var(--clay);margin:0 6px}
.transform .drop{color:var(--no);text-decoration:line-through}
.transform .keep{color:var(--ok);font-weight:bold}
.verdict{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.vbtn{font-family:Verdana,sans-serif;font-size:12px;border-radius:7px;padding:7px 12px;cursor:pointer;border:1px solid;font-weight:bold;background:#fff}
.vbtn.yes{border-color:var(--ok);color:var(--ok)}
.vbtn.no{border-color:var(--no);color:var(--no)}
.vbtn.sel-yes{background:var(--ok);color:#fff}
.vbtn.sel-no{background:var(--no);color:#fff}

.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.controls .main{min-width:240px;text-align:center}
button.main{font-family:Verdana,sans-serif;font-size:13px;border:none;border-radius:9px;
  padding:11px 16px;cursor:pointer;font-weight:bold;letter-spacing:.3px}
.btn-check{background:var(--clay);color:#fff;box-shadow:0 3px 0 #8a4527}
.btn-add{background:transparent;color:var(--steppe-dk);border:1px solid var(--steppe)!important}
button.main:active{transform:translateY(2px);box-shadow:none}

.result{margin-top:14px;font-size:15px;padding:12px 14px;border-radius:9px;display:none;line-height:1.5}
.result.show{display:block}
.result.win{background:#e3f0e3;border:1px solid var(--ok);color:#2c5a38}
.result.miss{background:#f4e2dc;border:1px solid var(--no);color:#8a3520}
.progress{font-size:11px;color:#8a8170;text-align:center;margin-top:10px;font-family:Verdana,sans-serif}
.add-row{display:none;margin-top:12px;gap:8px}
.add-row.show{display:flex}
.add-row input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:Verdana,sans-serif;font-size:13px}
footer{text-align:center;font-size:11px;color:#9a917e;margin-top:24px;font-family:Verdana,sans-serif;line-height:1.6}

/* доступность: видимый фокус */
button:focus-visible, input:focus-visible{outline:3px solid var(--sand);outline-offset:2px}

/* адаптив: узкие экраны */
@media (max-width:480px){
  h1{font-size:32px}
  .row1{grid-template-columns:1fr auto;grid-template-areas:"lang badge" "word word";row-gap:8px}
  .lang{grid-area:lang;justify-self:start}
  .badge{grid-area:badge;justify-self:end}
  .word{grid-area:word}
  .status{gap:7px}
  .stat{padding:8px 6px}
  .stat-k{font-size:9px;letter-spacing:.5px}
  .stat-v{font-size:13px}
  .controls{flex-direction:column}
  .controls .main{min-width:0;width:100%}
  .navbtn{min-width:78px;padding:8px 8px}
}

/* меньше движения по системной настройке */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  button.main:active{transform:none}
}