/* Тренажёр школы ИИ — детский крупный UI. Тач — первый класс. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f2f6ff; color: #1c2340; font-size: 18px;
}
button { font: inherit; cursor: pointer; border: none; border-radius: 14px; }
.hidden { display: none !important; }

/* ---------- каркас ---------- */
.screen { max-width: 760px; margin: 0 auto; padding: 16px; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 0 0 16px 16px; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(28,35,64,.08);
}
.topbar .step-title { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 26px;
  padding: 4px 14px; border-radius: 12px; background: #eef2ff; color: #3450d2;
}
.timer.warn { background: #fff1e6; color: #d2691e; }
.timer.over { background: #ffe6e6; color: #c0392b; }

/* ---------- хаб входа ---------- */
.hub { display: flex; flex-direction: column; gap: 18px; padding-top: 8vh; }
.hub h1 { font-size: 26px; margin: 0; text-align: center; }
.hub .card {
  background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 4px 16px rgba(28,35,64,.08);
}
.hub .stepnum { display: inline-block; background: #3450d2; color: #fff; border-radius: 50%;
  width: 30px; height: 30px; text-align: center; line-height: 30px; font-weight: 800; margin-right: 8px; }
.hub .done .stepnum { background: #27ae60; }
.btn-big {
  display: block; width: 100%; padding: 16px; font-size: 20px; font-weight: 700;
  background: #3450d2; color: #fff; text-align: center; text-decoration: none; border-radius: 14px;
}
.btn-big.secondary { background: #eef2ff; color: #3450d2; }
.hub input {
  width: 100%; padding: 14px; font-size: 22px; border: 2px solid #d6def5; border-radius: 12px; margin-top: 8px;
}
.hub input#code { text-transform: uppercase; letter-spacing: 6px; font-weight: 800; text-align: center; }
.fallback-note { font-size: 14px; color: #7a839f; margin-top: 10px; }
.fallback-note a { color: #3450d2; }
.error { color: #c0392b; font-weight: 600; min-height: 24px; }

/* ---------- контент шага ---------- */
.slide { background: #fff; border-radius: 18px; padding: 26px; margin-top: 16px;
  box-shadow: 0 4px 16px rgba(28,35,64,.06); font-size: 21px; line-height: 1.5; }
.slide h2 { margin-top: 0; }
.slide li { margin: 10px 0; }

.emoji-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.emoji-btn { background: #fff; padding: 18px 8px; font-size: 34px; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(28,35,64,.08); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.emoji-btn .lbl { font-size: 14px; color: #4a5270; }
.emoji-btn.mine { outline: 4px solid #3450d2; }
.board-picks { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.board-picks .pick { background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 16px;
  box-shadow: 0 1px 4px rgba(28,35,64,.1); }

/* сортировка: тап-тап */
.sort-progress { margin: 12px 4px; font-weight: 700; color: #4a5270; }
.cards-tray { display: flex; flex-wrap: wrap; gap: 10px; }
.card-chip { background: #fff; padding: 14px 18px; font-size: 19px; font-weight: 600;
  border-radius: 14px; box-shadow: 0 2px 8px rgba(28,35,64,.1); touch-action: none; user-select: none; }
.card-chip.selected { outline: 4px solid #f5a623; transform: scale(1.04); }
.card-chip.dragging { position: relative; z-index: 40; box-shadow: 0 10px 26px rgba(28,35,64,.3);
  pointer-events: none; opacity: .95; }
.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.bucket { min-height: 130px; border: 3px dashed #b9c4e8; border-radius: 18px; padding: 12px; background: #fafbff; }
.bucket.target { border-color: #f5a623; background: #fff8ec; }
.bucket h3 { margin: 0 0 8px; font-size: 17px; color: #3450d2; }
.bucket .card-chip { font-size: 16px; padding: 8px 12px; margin: 4px 4px 0 0; display: inline-block; }

/* choice — вопрос заметно контрастнее вариантов (кегль + вес + цвет) */
.choice-progress { margin: 12px 4px; font-weight: 700; color: #4a5270; }
.prompt { background: #fff; border-radius: 18px; padding: 22px 24px; font-size: 25px; font-weight: 800;
  line-height: 1.35; color: #1c2340; box-shadow: 0 4px 16px rgba(28,35,64,.06); margin-top: 12px; }
.options { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.opt-btn { background: #fff; padding: 18px; font-size: 18px; font-weight: 400; color: #3a4160;
  line-height: 1.45; text-align: left;
  border-radius: 16px; box-shadow: 0 2px 10px rgba(28,35,64,.1); border: 3px solid transparent; }
.opt-btn:active { border-color: #3450d2; }
.opt-btn.picked { border-color: #27ae60; background: #f0fbf4; }
.ack { text-align: center; font-size: 20px; font-weight: 800; color: #27ae60; margin-top: 14px; min-height: 28px; }
.bank-done { text-align: center; font-size: 24px; font-weight: 800; color: #27ae60; margin-top: 30px; }

/* рефлексия */
.phrases { list-style: none; padding: 0; }
.phrases li { background: #fff; border-radius: 14px; padding: 14px 18px; margin: 10px 0;
  font-size: 20px; box-shadow: 0 2px 8px rgba(28,35,64,.06); }
.phrase-big { font-size: 30px; font-weight: 800; text-align: center; padding: 44px 30px; }
.host-phrases { background: #fff; border-radius: 16px; padding: 12px; }
.host-phrases .phrase-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 16px; }
.host-phrases .phrase-item:hover { background: #eef2ff; }
.host-phrases .phrase-item.picked { background: #3450d2; color: #fff; font-weight: 700; }

/* подтверждение ответа + подсказки */
.confirm-btn { margin-top: 16px; }
.confirm-btn.disabled { opacity: .4; pointer-events: none; }
.hint { margin-top: 14px; font-size: 14px; color: #7a839f; text-align: center; }

/* звонок из тренажёра */
.call-btn { font-size: 24px; background: #eef2ff; border-radius: 12px; padding: 6px 12px; }
.call-menu { position: fixed; top: 64px; left: 12px; z-index: 25; background: #fff; border-radius: 16px;
  padding: 14px; box-shadow: 0 8px 26px rgba(28,35,64,.25); display: flex; flex-direction: column; gap: 10px; width: 260px; }
.call-banner { position: sticky; top: 56px; z-index: 9; margin: 10px auto 0; max-width: 720px;
  background: #eafbef; border: 2px solid #27ae60; border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 700; }
.call-banner button { background: #27ae60; color: #fff; padding: 8px 14px; font-weight: 700; }
.call-banner #call-banner-close { background: transparent; color: #4a5270; font-size: 16px; margin-left: auto; }

/* рука + оверлеи */
.hand-btn { position: fixed; right: 16px; bottom: 16px; z-index: 20; font-size: 28px;
  width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(28,35,64,.2); }
.hand-btn.raised { background: #f5a623; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(28,35,64,.55);
  display: flex; align-items: center; justify-content: center; }
.overlay .msg { background: #fff; border-radius: 22px; padding: 34px 40px; font-size: 26px;
  font-weight: 800; text-align: center; }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #27ae60; color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 700; }
.toast.off { background: #7a839f; }
.undo-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #1c2340; color: #fff; border-radius: 999px; padding: 10px 12px 10px 22px;
  font-weight: 700; display: flex; align-items: center; gap: 12px; }
.undo-bar button { background: #f5a623; color: #1c2340; border-radius: 999px; padding: 8px 16px; font-weight: 800; }

/* ---------- пульт ---------- */
.host-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 16px; }
@media (max-width: 800px) { .host-layout { grid-template-columns: 1fr; } }
.steps-list { background: #fff; border-radius: 16px; padding: 10px; align-self: start; }
.steps-list .step-item { padding: 10px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.steps-list .step-item.current { background: #3450d2; color: #fff; font-weight: 700; }
.host-main { display: flex; flex-direction: column; gap: 14px; }
.host-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: #fff; border-radius: 16px; padding: 12px; }
.host-controls button { padding: 12px 18px; font-weight: 700; background: #eef2ff; color: #3450d2; }
.host-controls button.primary { background: #3450d2; color: #fff; }
.host-controls button.danger { background: #ffe6e6; color: #c0392b; }
.host-controls button.active { outline: 3px solid #f5a623; }
.bigstat { background: #fff; border-radius: 16px; padding: 18px; display: flex; gap: 26px; align-items: center; }
.bigstat .num { font-size: 44px; font-weight: 900; color: #3450d2; }
.bigstat .cap { color: #4a5270; }
.students-strip { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border-radius: 16px; padding: 12px; }
.stud { border-radius: 999px; padding: 8px 16px; font-weight: 600; background: #eef2ff; }
.stud.off { opacity: .45; }
.stud.stuck { background: #fff1e6; color: #d2691e; }
.stud.hand { background: #f5a623; color: #fff; }
.host-note { background: #fffbe8; border-left: 5px solid #f5a623; border-radius: 10px;
  padding: 12px 16px; font-size: 15px; line-height: 1.45; color: #5c5330; }
.review-panel { background: #fff; border-radius: 16px; padding: 16px; }
.review-panel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.review-panel td, .review-panel th { padding: 8px 10px; border-bottom: 1px solid #eef1f8; text-align: left; }
.review-panel tr.controversial { background: #fff8ec; }
.mark-btn { background: #eef2ff; color: #3450d2; padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.mark-btn.marked { background: #f5a623; color: #fff; }
/* превью детского экрана в пульте (iframe ?preview=1) */
body.preview .hand-btn, body.preview .call-btn, body.preview .call-banner, body.preview .call-menu { display: none !important; }
body.preview #step-content { pointer-events: none; }
.preview-wrap { background: #fff; border-radius: 16px; padding: 10px; }
.preview-wrap .preview-cap { font-size: 13px; color: #7a839f; margin: 2px 6px 8px; }
.preview-wrap iframe { width: 100%; height: 420px; border: 2px solid #d6def5; border-radius: 12px; background: #f2f6ff; }

/* онбординг-тур пульта */
.tour-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(28,35,64,.55); }
.tour-target { position: relative; z-index: 51; outline: 4px solid #f5a623; border-radius: 12px; background: #fff; }
.tour-tip { position: fixed; z-index: 52; width: 320px; background: #fff; border-radius: 16px;
  padding: 16px; box-shadow: 0 10px 34px rgba(28,35,64,.35); font-size: 16px; line-height: 1.45; }
.tour-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tour-count { color: #7a839f; font-size: 13px; margin-left: auto; }
.tour-next { background: #3450d2; color: #fff; padding: 8px 18px; font-weight: 700; }
.tour-skip { background: transparent; color: #7a839f; padding: 8px 0; font-size: 14px; }

.setup-form { max-width: 520px; margin: 8vh auto; background: #fff; border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 20px rgba(28,35,64,.1); }
.setup-form input, .setup-form select { padding: 12px; font-size: 17px; border: 2px solid #d6def5; border-radius: 10px; }
.room-share { background: #fff; border-radius: 16px; padding: 16px; }
.room-share .code-big { font-size: 40px; letter-spacing: 10px; font-weight: 900; color: #3450d2; }