/* mc.css - тема CatCraft (вид Minecraft на чистом CSS, без картинок).
   Классы: .mc-panel .mc-btn(.green/.red) .mc-sign .mc-bubble .mc-bar .mc-heart
           .mc-emerald .mc-diamond .mc-title. Шрифт: если есть /static/fonts/PressStart2P.woff2 */

/* @font-face для Press Start 2P отдаёт сервер (app/main.py): только если файл шрифта есть,
   иначе пустой CSS - никаких 404 в консоли. */
@import url('/static/css/pixelfont.css');

:root {
  --mc-font: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --mc-title-font: 'Press Start 2P', ui-monospace, Consolas, 'Courier New', monospace;
  --dirt: #6b4a2f;
  --dirt-dark: #593c25;
  --dirt-light: #7d5a3a;
  --grass: #5aa332;
  --grass-dark: #3f7a22;
  --stone: #8a8a8a;
  --stone-light: #b4b4b4;
  --stone-dark: #4a4a4a;
  --panel: #7b7b7b;
  --panel-text: #101010;
  --ink: #f4f4f4;
  --wood: #b8905a;
  --wood-dark: #6e4a24;
  --green: #2f7d22;
  --red: #c0392b;
  --gold: #f3c623;
  --emerald: #17dd62;
  --diamond: #4aedd9;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mc-font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  overflow-x: hidden;
  background-color: var(--dirt);
  /* пиксельный шум "земли" из градиентов */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.14) 50%, transparent 50%),
    linear-gradient(0deg, rgba(255,255,255,.07) 50%, transparent 50%),
    radial-gradient(circle at 25% 30%, rgba(0,0,0,.22) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 85%, rgba(0,0,0,.18) 0 3px, transparent 4px);
  background-size: 32px 32px, 32px 32px, 64px 64px, 48px 48px, 56px 56px, 40px 40px;
}

img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- каркас страницы ---------- */
.mc-grass {
  height: 28px;
  background:
    linear-gradient(180deg, #7ccf4a 0 8px, var(--grass) 8px 16px, var(--grass-dark) 16px 22px, #5b3d24 22px 28px);
  border-bottom: 4px solid #2b1d10;
}
.mc-wrap { max-width: 880px; margin: 0 auto; padding: 16px 16px 150px; }
.mc-wrap.narrow { max-width: 480px; }
h1, h2, h3 { margin: 0 0 8px; }
a { color: #9fe8ff; }

/* ---------- заголовки ---------- */
.mc-title {
  font-family: var(--mc-title-font);
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
  line-height: 1.3;
  color: #fff;
  font-size: 18px;
  word-break: break-word;
}
.mc-title.big { font-size: 24px; }

/* ---------- панель из камня ---------- */
.mc-panel {
  position: relative;
  background-color: var(--panel);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.06) 50%, transparent 50%),
    linear-gradient(0deg, rgba(255,255,255,.05) 50%, transparent 50%);
  background-size: 8px 8px;
  color: var(--panel-text);
  border: 4px solid;
  border-color: #c6c6c6 #3a3a3a #3a3a3a #c6c6c6;
  box-shadow: 0 0 0 4px #000, 4px 4px 0 4px rgba(0,0,0,.35);
  padding: 12px;
  margin: 8px 4px 20px;
}
.mc-panel .mc-title { color: #fff; }
.mc-panel.dark { background-color: #3b3b3b; color: var(--ink); }
.mc-panel.dark a { color: #9fe8ff; }

/* ---------- кнопка-хотбар ---------- */
.mc-btn {
  display: inline-block;
  font-family: var(--mc-font);
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  text-shadow: 2px 2px 0 #3a3a3a;
  text-decoration: none;
  text-align: center;
  background: #6b6b6b;
  border: 4px solid;
  border-color: #d8d8d8 #3a3a3a #3a3a3a #d8d8d8;
  outline: 3px solid #000;
  outline-offset: 0;
  margin: 3px;
  padding: 8px 14px;
  min-height: 44px;
  cursor: pointer;
}
.mc-btn:hover, .mc-btn:focus-visible { background: #6e6e98; border-color: #fff #4a4a6a #4a4a6a #fff; }
.mc-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #000; }
.mc-btn:active {
  border-color: #3a3a3a #d8d8d8 #d8d8d8 #3a3a3a;
  padding-top: 10px; padding-bottom: 6px;
}
.mc-btn.green { background: var(--green); border-color: #8be07a #1d5e12 #1d5e12 #8be07a; }
.mc-btn.green:hover { background: #3a9a2b; }
.mc-btn.green:active { border-color: #1d5e12 #8be07a #8be07a #1d5e12; }
.mc-btn.red { background: var(--red); border-color: #ef8a7e #6a150c #6a150c #ef8a7e; }
.mc-btn.red:hover { background: #c8402f; }
.mc-btn.big { font-size: 22px; padding: 12px 26px; }
.mc-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- поля ввода на табличках ---------- */
.mc-input, .mc-select {
  width: 100%;
  font-family: var(--mc-font);
  font-size: 18px;
  color: #2b1a0a;
  background: #d9b27a;
  border: 4px solid;
  border-color: #6e4a24 #f0d4a4 #f0d4a4 #6e4a24;
  padding: 8px 10px;
  min-height: 44px;
}
.mc-input:focus, .mc-select:focus { outline: 3px solid #fff; outline-offset: 1px; }
.mc-label { display: block; font-weight: bold; margin: 10px 0 4px; }
.mc-panel .mc-label { color: #fff; text-shadow: 1px 1px 0 #000; }

/* ---------- деревянная табличка (tooltip) ---------- */
.mc-sign {
  position: absolute;
  z-index: 3000;
  max-width: min(280px, calc(100vw - 24px));
  background: var(--wood);
  color: #24140a;
  border: 4px solid;
  border-color: #e3c08c #6e4a24 #6e4a24 #e3c08c;
  box-shadow: 0 0 0 3px #000, 4px 4px 0 3px rgba(0,0,0,.4);
  padding: 8px 10px;
  font-size: 16px;
}
.mc-sign::before {  /* стрелочка вверх */
  content: ''; position: absolute; top: -14px; left: var(--arrow-x, 20px);
  border: 7px solid transparent; border-bottom: 7px solid #000;
}
.mc-sign .sign-word { font-weight: bold; font-size: 18px; }
.mc-sign .sign-ru { font-size: 18px; margin: 2px 0 6px; }
.mc-sign .sign-ru.none { color: #6a3a1a; font-style: italic; font-size: 14px; }
.mc-sign .mc-btn { font-size: 14px; min-height: 36px; padding: 4px 8px; margin: 2px 2px 0 0; }

/* слово, на которое можно кликнуть */
.w { cursor: help; border-bottom: 1px dotted rgba(255,255,255,.45); }
.w:hover { background: rgba(255,255,255,.22); }
.mc-panel:not(.dark) .w { border-bottom-color: rgba(0,0,0,.4); }
.mc-panel:not(.dark) .w:hover { background: rgba(255,255,0,.35); }
.scroll-btn { font-size: 13px; min-height: 30px; padding: 2px 8px; }
.scroll-ru { margin-top: 6px; padding: 6px 8px; background: rgba(0,0,0,.25); border-left: 4px solid var(--gold); font-style: italic; }

/* ---------- пузырь речи кота ---------- */
.mc-bubble {
  position: relative;
  background: #fff;
  color: #111;
  border: 4px solid #111;
  padding: 10px 14px;
  margin: 8px 4px 18px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}
.mc-bubble::after {
  content: ''; position: absolute; left: 28px; bottom: -18px;
  border: 7px solid transparent; border-top: 11px solid #111;
}

/* ---------- xp, сердца, изумруды ---------- */
.mc-bar {
  position: relative;
  height: 18px;
  background: #1a1a1a;
  border: 3px solid;
  border-color: #3a3a3a #aaa #aaa #3a3a3a;
  min-width: 80px;
}
.mc-bar > i {
  display: block; height: 100%;
  background: linear-gradient(180deg, #a8ff6a 0 40%, #4cc22a 40%);
  width: 0; transition: width .5s steps(10);
}
.mc-heart, .mc-emerald, .mc-diamond {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 3px;
  image-rendering: pixelated;
}
/* пиксель-арт из box-shadow: клетка = 2px */
.mc-heart { position: relative; width: 16px; height: 14px; margin-right: 4px; }
.mc-heart::before {
  content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent;
  box-shadow:
    2px 0 #c0141c, 4px 0 #c0141c, 10px 0 #c0141c, 12px 0 #c0141c,
    0 2px #c0141c, 2px 2px #ff4a4a, 4px 2px #ff4a4a, 6px 2px #c0141c, 8px 2px #c0141c, 10px 2px #ff4a4a, 12px 2px #c0141c, 14px 2px #c0141c,
    0 4px #c0141c, 2px 4px #ff4a4a, 4px 4px #c0141c, 6px 4px #c0141c, 8px 4px #c0141c, 10px 4px #c0141c, 12px 4px #c0141c, 14px 4px #c0141c,
    0 6px #c0141c, 2px 6px #c0141c, 4px 6px #c0141c, 6px 6px #c0141c, 8px 6px #c0141c, 10px 6px #c0141c, 12px 6px #c0141c, 14px 6px #c0141c,
    2px 8px #c0141c, 4px 8px #c0141c, 6px 8px #c0141c, 8px 8px #c0141c, 10px 8px #c0141c, 12px 8px #c0141c,
    4px 10px #c0141c, 6px 10px #c0141c, 8px 10px #c0141c, 10px 10px #c0141c,
    6px 12px #c0141c, 8px 12px #c0141c;
}
.mc-heart.off::before { filter: grayscale(1) brightness(.5); }
.mc-emerald, .mc-diamond {
  width: 14px; height: 14px; margin-right: 6px;
  transform: rotate(45deg) scale(.8);
  border: 2px solid;
}
.mc-emerald { background: linear-gradient(135deg, #7dffae, var(--emerald) 50%, #0c8a3b); border-color: #0a5a28; }
.mc-diamond { background: linear-gradient(135deg, #d4fffa, var(--diamond) 50%, #1c9c93); border-color: #0f6660; }

/* ---------- HUD ---------- */
.hud {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: rgba(0,0,0,.65); border: 4px solid #000; padding: 8px 12px; margin: 8px 4px 16px;
}
.hud .hud-name { font-weight: bold; }
.hud .hud-rank { color: var(--gold); font-weight: bold; }
.hud .hud-xp { flex: 1 1 140px; min-width: 120px; }
.hud .hud-xp small { display: block; font-size: 12px; color: #ddd; }
.hud-item { white-space: nowrap; font-weight: bold; }

/* ---------- нижний хотбар ---------- */
.hotbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
  background: #1c1c1c; border-top: 4px solid #000; padding: 4px 8px;
}
.hotbar .mc-btn { flex: 1 1 70px; max-width: 160px; padding: 6px 4px; font-size: 14px; }
.hotbar .mc-btn.here { background: #a8a8d8; border-color: #fff #4a4a8a #4a4a8a #fff; }

/* ---------- карта биомов ---------- */
.biome { margin-bottom: 26px; }
.biome-head {
  margin: -12px -12px 12px; padding: 10px 12px; color: #fff; text-shadow: 2px 2px 0 #000;
  background-size: cover; background-position: center;
}
.biome-head small { display: block; font-size: 13px; opacity: .9; }
.biome-meadow .biome-head { background-color: #4f9b2c; }
.biome-desert .biome-head { background-color: #c9ae5c; }
.biome-village .biome-head { background-color: #8a6a3a; }
.biome-dark_forest .biome-head { background-color: #2d4a22; }
.biome-frozen_lake .biome-head { background-color: #6aa8d8; }
.biome-mushroom_caves .biome-head { background-color: #7a3a5a; }
.biome-redstone .biome-head { background-color: #8a1c1c; }
.biome-nether .biome-head { background-color: #6a1a12; }
.biome-end .biome-head { background-color: #2c1a4a; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.level {
  display: block; position: relative; text-align: center; text-decoration: none; color: #fff;
  background: #5c4a2e; border: 4px solid; border-color: #b8905a #3a2a14 #3a2a14 #b8905a;
  padding: 8px 6px; min-height: 96px; font-weight: bold; cursor: pointer;
}
.level .lv-icon { font-size: 28px; display: block; line-height: 1.2; }
.level .lv-title { display: block; font-size: 14px; margin-top: 2px; text-shadow: 1px 1px 0 #000; }
.level.open { background: #7a5a2a; box-shadow: 0 0 12px 2px #ffb12a; }
.level.passed_clean { background: #6a5a1a; }
.level.passed_hints { background: #4a4e5a; }
.level.failed { background: #5a3030; }
.level.locked { background: #3a3a3a; border-color: #777 #1a1a1a #1a1a1a #777; color: #999; cursor: not-allowed; }
.level.boss { grid-column: 1 / -1; min-height: 120px; background-color: #4a1a1a; border-color: #c06060 #2a0a0a #2a0a0a #c06060; }
.level.boss.locked { background-color: #333; }
.level.boss .lv-icon { font-size: 40px; }
.level.unavailable { opacity: .5; }
.level .quiz-mark { position: absolute; right: 4px; top: 2px; font-size: 12px; color: var(--gold); }

.today-card { display: block; text-decoration: none; color: #fff; margin: 6px 0; padding: 10px 12px;
  background: #3b3b3b; border: 4px solid; border-color: #999 #1a1a1a #1a1a1a #999; font-weight: bold; }
.today-card:hover { background: #4a4a60; }
.today-card.next { background: #2f6a22; border-color: #8be07a #143a0c #143a0c #8be07a; }
.today-card.repair { background: #6a4a22; border-color: #e3c08c #3a2208 #3a2208 #e3c08c; }
.today-card small { display: block; font-weight: normal; color: #ddd; }

/* ---------- таблицы ---------- */
.mc-table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,.35); color: var(--ink); font-size: 14px; }
.mc-table th, .mc-table td { border: 2px solid #222; padding: 4px 6px; text-align: left; vertical-align: top; }
.mc-table th { background: rgba(0,0,0,.5); }
.table-scroll { overflow-x: auto; max-width: 100%; }
pre.code { background: #111; color: #e8ffe8; padding: 8px; margin: 4px 0; overflow-x: auto; max-width: 100%; font-size: 13px; white-space: pre; }

/* ---------- мелочи ---------- */
/* плавный 3D-портрет кота: без пиксельного сглаживания */
.cat-peek, .ls-body .ls-portrait img, .ls-body .ls-portrait-canvas { image-rendering: auto; }
.cat-peek { position: fixed; right: 0; bottom: 0; width: 120px; max-width: 28vw; z-index: 1; pointer-events: none; }
.toast-host { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2000;
  display: flex; flex-direction: column; gap: 6px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: #222; color: #fff; border: 4px solid; border-color: #aaa #444 #444 #aaa; padding: 8px 12px; font-weight: bold; box-shadow: 0 0 0 3px #000; }
.toast.ok { background: #1f5a1f; }
.toast.error { background: #6a1f1f; }
.muted { color: #cfcfcf; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.err { color: #ffb0a8; font-weight: bold; min-height: 1.4em; }
.mc-panel:not(.dark) .muted { color: #1c1c1c; }
.mc-panel:not(.dark) .err { color: #5a0a0a; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* карточки памяти */
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mem-card { min-height: 64px; font-size: 15px; background: #555; color: #fff; }
.mem-card.sel { background: #8a8ad8; }
.mem-card.done { background: #2f6a22; opacity: .6; cursor: default; }
.mem-card.wrong { background: #8a2a2a; }

@media (max-width: 480px) {
  body { font-size: 15px; }
  .mc-title { font-size: 14px; }
  .mc-title.big { font-size: 18px; }
  .levels { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mc-bar > i { transition: none; } }

/* баннер на логине */
.mc-wrap.narrow:has(.title-banner) { max-width: min(900px, 100%); }
.mc-wrap.narrow .sign-board { max-width: 480px; margin-left: auto; margin-right: auto; }
.title-banner { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; image-rendering: pixelated;
  border: 4px solid; border-color: #b4b4b4 #4a4a4a #4a4a4a #b4b4b4; box-shadow: 0 0 0 4px #000; box-sizing: border-box; }
.title-banner[hidden] { display: none; }
/* картинка биома на карте: cover, 120px / 180px */
.biome-head { background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 120px;
  display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; }
@media (min-width: 700px) { .biome-head { min-height: 180px; } }

/* Кнопки «scroll» (перевод всего абзаца) пока скрыты: ребёнок переводит отдельные слова кликом.
   Чтобы вернуть, удалите это правило. */
.scroll-btn, .scroll-ru { display: none !important; }
/* Русские подписи под сообщениями скрыты (ребёнок читает по-английски, переводит слова кликом).
   Чтобы вернуть, удалите это правило. */
li > small.ru, .ls-error-ru, .ls-code-note-ru, .cb-ru { display: none !important; }