/* ===== Знакомство с МАК — конструктор смысла (комната ресурсов) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body.mak-room {
  font-family: 'Nunito', system-ui, sans-serif;
  color: #f3ecf6;
  line-height: 1.6;
  min-height: 100vh;
  background:
    radial-gradient(760px 480px at 16% 14%, rgba(127,199,192,.18) 0%, transparent 62%),
    radial-gradient(720px 520px at 86% 20%, rgba(196,166,226,.24) 0%, transparent 62%),
    radial-gradient(780px 560px at 70% 92%, rgba(143,168,224,.18) 0%, transparent 64%),
    radial-gradient(900px 480px at 50% -8%, #5a3f6e 0%, transparent 58%),
    linear-gradient(180deg, #2c2236 0%, #261d30 50%, #1f1828 100%) fixed;
  overflow-x: hidden;
}

.mak-exit {
  position: fixed; top: 14px; left: 14px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-size: 1.5rem; line-height: 1;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  transition: background .2s;
}
.mak-exit:hover { background: rgba(255,255,255,.22); }

.mak-wrap {
  position: relative; z-index: 2;
  max-width: 560px; margin: 0 auto;
  padding: 70px 22px 90px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* индикатор прогресса */
.mak-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.mak-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18); transition: all .3s;
}
.mak-dots span.on { background: #b79cf0; box-shadow: 0 0 12px rgba(183,156,240,.8); transform: scale(1.15); }
.mak-dots span.done { background: rgba(183,156,240,.55); }

/* экран (сцена) */
.mak-screen { animation: makIn .5s ease; }
@keyframes makIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mak-tag {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: #d8b8a0;
  background: rgba(245,184,106,.14); border: 1px solid rgba(245,184,106,.28);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
}
.mak-title {
  font-family: 'Comfortaa', sans-serif; font-weight: 700;
  font-size: 1.7rem; color: #fff; margin: 0 0 8px; line-height: 1.25;
}
.mak-lead { color: #cbbcd9; font-size: 1.05rem; margin: 0 0 22px; }

/* ===== интро ===== */
.intro-text { color: #d4c7e0; }
.intro-text p { margin: 0 0 14px; }
.intro-text b { color: #fff; }
.intro-steps { list-style: none; margin: 18px 0 26px; padding: 0; }
.intro-steps li {
  position: relative; padding: 11px 14px 11px 46px; margin-bottom: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; color: #e6dcf0; font-size: .96rem;
}
.intro-steps li .n {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #2a2236;
  background: linear-gradient(135deg, #c9b0f5, #b79cf0);
}

/* ===== карта ===== */
.card-stage { display: flex; flex-direction: column; align-items: center; margin: 4px 0 22px; }
.mak-cardbox {
  width: 200px; height: 290px; border-radius: 20px; position: relative;
  perspective: 900px; margin-bottom: 14px;
}
.mak-card {
  position: absolute; inset: 0; border-radius: 20px;
  transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.9,.4,1);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.mak-card.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-back {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(150deg, #4a3a63, #34284a);
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; color: #cdb8ee;
}
.card-back .cb-mark { font-size: 2.4rem; opacity: .9; }
.card-back .cb-dots { position: absolute; inset: 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.18); }
.card-front { transform: rotateY(180deg); border: 1px solid rgba(255,255,255,.18); background: #2a2236; }
.card-front .card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== выбор карты в открытую (поля 1–2) ===== */
.pick-hint { color: #cbbcd9; font-size: 1rem; margin: 2px 0 14px; transition: color .2s; }
.pick-hint.nudge { color: #f3c98a; font-weight: 700; }
.card-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.pick-card {
  padding: 0; margin: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: #2a2236; aspect-ratio: 29 / 41; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, border-color .2s, box-shadow .25s, opacity .2s;
}
.pick-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.4); }
.pick-card.sel {
  border-color: #b79cf0; transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(183,156,240,.35), 0 12px 28px rgba(0,0,0,.45);
}
.card-pick.chosen .pick-card:not(.sel) { opacity: .42; }
.card-pick.chosen .pick-card:not(.sel):hover { opacity: .85; }
@media (max-width: 520px) { .card-pick { gap: 8px; } }
@media (max-width: 340px) { .card-pick { grid-template-columns: repeat(2, 1fr); } }

.draw-btn {
  border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: .98rem;
  padding: 13px 26px; border-radius: 999px; color: #3a2a1a;
  background: linear-gradient(135deg, #ffe7a0, #f5b86a);
  box-shadow: 0 10px 26px rgba(245,184,106,.38);
  transition: transform .15s, box-shadow .25s;
}
.draw-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(245,184,106,.5); }
.draw-hint { font-size: .82rem; color: #a596ba; margin-top: 2px; }
.redraw {
  border: none; background: rgba(255,255,255,.1); color: #d8cce8; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .82rem; padding: 7px 15px;
  border-radius: 999px; transition: background .15s;
}
.redraw:hover { background: rgba(255,255,255,.2); }

/* ===== вопросы ===== */
.q-block { margin: 6px 0 20px; }
.q-label {
  font-size: .74rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #b6a3d6; margin-bottom: 10px;
}
.q-list { list-style: none; margin: 0; padding: 0; }
.q-list li {
  position: relative; padding: 9px 4px 9px 22px; color: #e3d8f0; font-size: 1rem;
}
.q-list li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: #b79cf0;
}
.q-list .q-q { display: block; }
.q-list .q-ex { display: block; margin-top: 3px; font-size: .82rem; color: #a596ba; font-style: italic; }

/* ===== ввод слова ===== */
.stem-box { margin: 4px 0 8px; }
.stem-label {
  font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 1.12rem;
  color: #fff; margin-bottom: 12px;
}
.mak-input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  font-family: inherit; font-size: 1.05rem; color: #fff;
}
.mak-input::placeholder { color: #9486ab; }
.mak-input:focus { outline: none; border-color: #b79cf0; box-shadow: 0 0 0 4px rgba(183,156,240,.18); }
.input-note { font-size: .8rem; color: #a596ba; margin: 8px 2px 0; min-height: 1em; }

/* ===== навигация шага ===== */
.mak-nav { display: flex; gap: 12px; margin-top: 26px; }
.mak-btn {
  flex: 1; border: none; cursor: pointer; font-family: inherit; font-weight: 800;
  font-size: 1rem; padding: 14px 22px; border-radius: 14px; transition: transform .15s, opacity .2s;
  text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.mak-btn.solid { color: #fff; background: linear-gradient(135deg, #b58fd8, #8f6fc4); box-shadow: 0 8px 22px rgba(143,111,196,.4); }
.mak-btn.solid:hover { transform: translateY(-2px); }
.mak-btn.ghost { color: #d8cce8; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); flex: 0 0 auto; padding: 14px 20px; }
.mak-btn.ghost:hover { background: rgba(255,255,255,.16); }

/* ===== финал: код ресурса ===== */
.code-card {
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
  padding: 26px 24px; margin: 6px 0 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
}
.code-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 1.06rem; color: #d8cce8;
}
.code-line:last-child { border-bottom: none; }
.code-line b { font-family: 'Comfortaa', sans-serif; color: #fff; font-weight: 700; }
.code-line .ci {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #2a2236; margin-right: 4px;
  background: var(--ci, #b79cf0);
}
.integr {
  background: rgba(245,184,106,.1); border: 1px solid rgba(245,184,106,.26);
  border-radius: 16px; padding: 18px 18px; margin-bottom: 16px;
}
.integr p { margin: 0 0 12px; color: #f3d9b8; font-weight: 700; }
.mak-textarea {
  width: 100%; min-height: 84px; resize: vertical; padding: 13px 15px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); font-family: inherit; font-size: 1rem; color: #fff; line-height: 1.5;
}
.mak-textarea::placeholder { color: #9486ab; }
.mak-textarea:focus { outline: none; border-color: #f5b86a; box-shadow: 0 0 0 4px rgba(245,184,106,.16); }

.final-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.saved-msg { text-align: center; color: #a8e0c0; font-weight: 700; font-size: .92rem; min-height: 1.1em; }

.mak-foot { margin-top: auto; padding-top: 30px; text-align: center; color: #8c7da4; font-size: .8rem; }

@media (max-width: 520px) {
  .mak-wrap { padding: 64px 18px 80px; }
  .mak-title { font-size: 1.45rem; }
  .mak-cardbox { width: 180px; height: 262px; }
}
@media (prefers-reduced-motion: reduce) {
  .mak-screen { animation: none; }
  .mak-card, .pick-card { transition: none; }
  .pick-card:hover, .pick-card.sel { transform: none; }
}
.zen-reduced .mak-screen { animation: none; }
.zen-reduced .mak-card, .zen-reduced .pick-card { transition: none; }