/* ===== Пиксель-художник: общие стили ===== */
:root{
  --paper:#f6f3ec; --card:#fffdf8; --ink:#1d1b18; --muted:#6f6858;
  --line:#e0d8c8; --line-strong:#c9bda6;
  --accent:#2f6df6; --accent-soft:#e6eeff;
  --ok:#1f9d55; --ok-soft:#e3f6ea;
  --bad:#d7392f; --bad-soft:#fdeae8;
  --warn:#e08a0b; --warn-soft:#fdf2dd;
  --cell-on:#1d1b18; --cell-off:#ffffff;
  --radius:14px;
  --shadow:0 1px 2px rgba(29,27,24,.06), 0 8px 24px rgba(29,27,24,.06);
  --mono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .4em; line-height:1.2; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(22px,3vw,32px)}
h2{font-size:clamp(18px,2.2vw,23px)}
h3{font-size:16px}
p{margin:0 0 .8em}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* ---- каркас ---- */
.wrap{max-width:1180px;margin:0 auto;padding:18px 20px 48px}
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(246,243,236,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;white-space:nowrap}
.logo-mark{width:26px;height:26px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:1.5px}
.logo-mark i{background:var(--line-strong);border-radius:1px}
.logo-mark i:nth-child(1),.logo-mark i:nth-child(3),.logo-mark i:nth-child(5),
.logo-mark i:nth-child(7),.logo-mark i:nth-child(9){background:var(--ink)}
.spacer{flex:1 1 auto}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card + .card{margin-top:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1 1 300px;min-width:0}

/* ---- кнопки ---- */
.btn{
  appearance:none;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
  font:inherit;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
  display:inline-flex;align-items:center;gap:8px;line-height:1.2;
}
.btn:hover{background:#fff;border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#2159d8;border-color:#2159d8}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-ok:hover{background:#188144;border-color:#188144}
.btn-bad{background:var(--card);border-color:var(--bad);color:var(--bad)}
.btn-bad:hover{background:var(--bad-soft)}
.btn-lg{padding:14px 26px;font-size:18px;border-radius:12px}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:#0000000a;border-color:var(--line)}

input[type=text],input[type=password],input[type=number],select,textarea{
  font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;
  background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field + .field{margin-top:12px}

/* ---- бейджи и плашки ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-bad{background:var(--bad-soft);color:var(--bad)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-grey{background:#efeade;color:var(--muted)}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 10px 10px 0;font-size:14px}
.note-ok{border-color:var(--ok);background:var(--ok-soft)}
.note-bad{border-color:var(--bad);background:var(--bad-soft)}
.note-warn{border-color:var(--warn);background:var(--warn-soft)}

/* ---- пиксельная сетка ---- */
.grid{
  --cs:38px;
  display:grid;gap:2px;background:var(--line-strong);border:2px solid var(--line-strong);
  border-radius:6px;width:max-content;flex:0 0 auto;touch-action:none;user-select:none;
}
.grid .cell{
  width:var(--cs);height:var(--cs);min-width:var(--cs);background:var(--cell-off);
  cursor:pointer;position:relative;transition:background .08s ease;
}
.grid.readonly .cell{cursor:default}
.grid .cell.on{background:var(--cell-on)}
.grid .cell.wrong{box-shadow:inset 0 0 0 3px var(--bad)}
.grid .cell.hit{box-shadow:inset 0 0 0 3px var(--ok)}
.grid .cell.hl{box-shadow:inset 0 0 0 3px var(--warn)}
.grid.big{--cs:54px}
.grid.small{--cs:24px}
.grid.tiny{--cs:13px}

.grid-wrap{--cs:38px;display:flex;gap:10px;align-items:flex-start}
.ruler-left{--cs:38px;display:grid;gap:2px;padding-top:2px}
.ruler-left.big{--cs:54px}
.ruler-left.small{--cs:24px}
.ruler-left.tiny{--cs:13px}
.ruler-left span{height:var(--cs);display:flex;align-items:center;justify-content:flex-end;
  font:600 12px var(--mono);color:var(--muted);width:20px}
.ruler-top{display:grid;gap:2px;padding-left:2px;margin-bottom:4px}
.ruler-top span{width:var(--cs);text-align:center;font:600 12px var(--mono);color:var(--muted)}

/* ---- блок кода ---- */
.code{font-family:var(--mono);font-size:clamp(15px,1.6vw,20px);line-height:1.65;letter-spacing:.14em;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:inline-block}
.code .r{display:block;white-space:pre;cursor:default;border-radius:4px;padding:0 4px}
.code .r.active{background:var(--accent-soft)}
.code .r.done{color:var(--muted)}
.code b{font-weight:700;border-radius:3px}
.code b.hl{background:var(--warn);color:#fff}
.code-stream{display:grid;grid-template-columns:repeat(4,max-content);gap:7px 16px;letter-spacing:.22em}
.code-stream .g{font-weight:600;position:relative}
.code-stream.marked{padding-top:18px;row-gap:20px}
.code-stream.marked .g[data-row]::before{content:attr(data-row);position:absolute;top:-15px;left:0;
  font-size:11px;font-weight:700;color:var(--accent);letter-spacing:0}
.code-stream.marked .row-end{border-right:3px solid var(--accent);padding-right:9px}
.code-stream.split{grid-template-columns:repeat(2,max-content)}

/* ---- шаги задания и список ответов (раунд «Гонка») ----
   Раунд на скорость: ребёнок не должен вычитывать порядок действий из текста,
   номер в кружке видно боковым зрением. */
.step-h{display:flex;align-items:center;gap:8px}
.step-h .step-n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  font:700 13px/1 var(--mono);flex:0 0 auto}
.answers{display:flex;gap:10px;flex-wrap:wrap}
/* Отвергнутый вариант остаётся на месте, но явно вычеркнут */
.answers .btn.used{text-decoration:line-through;opacity:.45}
.code-num{color:var(--muted);opacity:.7;padding-right:9px;margin-right:11px;border-right:1px solid var(--line);user-select:none}

/* ---- финальный раунд: числа пикселей рядом с картинкой ----
   Высота строки чисел равна клетке сетки (--cs), отступ сверху — как у
   линейки номеров. Только так строка чисел стоит ровно напротив своей
   строки клеток, а в этом вся мысль раунда. */
.bytes{--cs:38px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding-top:2px;min-width:0;overflow-x:auto}
.bytes .brow{height:var(--cs);display:flex;align-items:center;gap:5px;flex:0 0 auto}
.bytes .bpx{display:flex;gap:3px;padding:4px 5px;border-radius:6px;background:#fff;
  border:1px solid var(--line);cursor:pointer;line-height:1;white-space:nowrap}
.bytes .bpx:hover{border-color:var(--ink)}
.bytes b{font:700 clamp(10px,1.05vw,13px)/1 var(--mono);border-radius:3px;padding:1px}
.bytes b.hl{background:var(--warn);color:#fff}

/* ---- один пиксель крупно: число и его короткая запись друг под другом ---- */
.pxcard{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pxcard .sw{width:60px;height:60px;border-radius:10px;border:2px solid var(--line-strong);flex:0 0 auto}
.pxcard .cols{display:grid;grid-template-columns:auto repeat(3,minmax(58px,auto));
  gap:4px 16px;align-items:center;text-align:center}
.pxcard .cols span{font-size:13px;color:var(--muted);text-align:right;white-space:nowrap}
.pxcard .cols span:nth-child(4n+2),.pxcard .cols span:nth-child(4n+3),.pxcard .cols span:nth-child(4n){text-align:center}
.pxcard .cols i{font:700 clamp(17px,2vw,22px)/1.2 var(--mono);font-style:normal}
.pxcard .cols u{font:700 clamp(17px,2vw,22px)/1.2 var(--mono);text-decoration:none;color:var(--accent)}
.pxsay{flex:1 1 220px;min-width:190px}

/* ---- таймер ---- */
.timer{font:800 clamp(20px,2.4vw,28px)/1 var(--mono);letter-spacing:.02em;padding:6px 12px;border-radius:10px;background:#fff;border:1px solid var(--line-strong)}
.timer.low{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* ---- таблица ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:var(--mono)}
.rank{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:7px;background:#efeade;font:700 13px var(--mono)}
tr.me{background:var(--accent-soft)}
tr.me .rank{background:var(--accent);color:#fff}
.rank.g1{background:#f6d365;color:#6b4c00}
.rank.g2{background:#dfe3e8;color:#4b5258}
.rank.g3{background:#e9c39b;color:#6b4324}

/* ---- палитра цветов ---- */
.palette{display:flex;gap:8px;flex-wrap:wrap}
.swatch{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:#fff;
  border-radius:10px;padding:6px 12px 6px 8px;cursor:pointer;font-weight:600;font-size:14px}
.swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.swatch i{width:20px;height:20px;border-radius:5px;border:1px solid #0002;display:block}
.swatch .k{font-family:var(--mono);color:var(--muted)}

/* ---- прогресс ---- */
.bar{height:8px;background:#e9e3d5;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.bar.ok i{background:var(--ok)}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:4px;background:#e2dbc9;display:block}
.dots i.done{background:var(--ok)}
.dots i.now{background:var(--accent)}

.stat{display:flex;flex-direction:column;gap:2px;min-width:92px}
.stat b{font:700 24px/1 var(--mono);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stats{display:flex;gap:22px;flex-wrap:wrap}

/* ---- всплывающий результат ---- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(120%);
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;z-index:200;
  transition:transform .25s cubic-bezier(.2,.8,.3,1);box-shadow:0 10px 30px #0003;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)}

@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.pop{animation:pop .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake .3s ease}

@media (max-width:760px){
  .wrap{padding:14px 14px 40px}
  .grid{--cs:32px}
  .grid.big{--cs:36px}
  .ruler-left{--cs:32px}
  .ruler-left.big{--cs:36px}
  .stats{gap:14px}
  /* на телефоне числа не помещаются рядом с картинкой — переносим под неё */
  .grid-wrap.pair{flex-wrap:wrap}
  .bytes{--cs:32px;flex:1 0 100%}
}

/* ---- общий старт раунда ---- */
.countdown{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(246,243,236,.96);text-align:center;padding:20px}
.countdown b{display:block;font:800 clamp(90px,26vw,260px)/1 var(--mono);color:var(--ink);
  animation:cd-pop .5s cubic-bezier(.2,1.4,.5,1)}
.countdown.go b{font-size:clamp(40px,11vw,130px);color:var(--ok)}
@keyframes cd-pop{from{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}
.countdown.pause b{font-size:clamp(46px,11vw,130px);animation:none}
.countdown.pause p{margin-top:12px;font-size:clamp(15px,2.2vw,22px);color:var(--muted)}