/* Игровая задача в курсе.
   Шапка, номера задач, карточка модуля и колонка рекламы — общие стили курса
   (css/main.css, dist/css), разметка как у CourseTask_B / CourseTask_F.
   Здесь только то, чего у них нет: номера-ссылки, строка заголовка с баллами
   и игровая часть (.sg-task из GameTask.css), подогнанная под карточку курса. */

/* ── Каркас страницы ─────────────────────────────────────────────────────── */
.sg-course-page .sg-course-main,
.sg-course-page .col-task,
.sg-course-page .task-content{min-width:0}
.sg-course-page .task-content{width:100%}
.sg-course-page .go-back{display:block;text-decoration:none}

/* Номера задач: те же .btn.btn-task, что у DataList_Course на других страницах. */
.sg-course-page .sg-course-steps{display:inline;margin:0;padding:0;list-style:none}
.sg-course-page .sg-course-steps li{display:inline}
.sg-course-page .sg-course-step{background-color:LightGray;border:0;color:#212529}
.sg-course-page .sg-course-step.is-complete{background-color:LightGreen}
.sg-course-page a.sg-course-step:hover{color:#212529;filter:brightness(.95)}
.sg-course-page .sg-course-step.is-current{outline:3px solid #87cefa;outline-offset:1px;font-weight:700;cursor:default}
.sg-course-page .sg-course-step.is-locked{cursor:not-allowed;opacity:.6}
.sg-course-page a.sg-course-step:focus-visible{outline:3px solid #084298;outline-offset:2px;box-shadow:none}

/* Заголовок задачи: «3. Название» и справа язык и баллы, как «Баллы» в CourseTask_F. */
.sg-course-page .sg-task-title-row{align-items:baseline;justify-content:space-between;gap:8px 16px}
.sg-course-page .sg-task-title-row .card-title{flex:1 1 260px;min-width:0;overflow-wrap:anywhere}
.sg-course-page .sg-task-meta{flex:0 0 auto;margin:0 0 .75rem;padding:.3rem .75rem;border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;color:#495057;font-size:.9rem;white-space:nowrap}
.sg-course-page .sg-course-warning{margin:1rem 0 0;font-size:.9rem;overflow-wrap:anywhere}

.sg-course-page .sg-course-next{text-align:right;margin:14px 0}
.sg-course-page .sg-course-next .btn{margin:0}
.sg-course-page .card-footer .small{display:inline-block;margin-bottom:.4rem}
.sg-course-progress p{margin:0;color:#6c757d;font-size:.875rem;line-height:1.5}
.sg-course-progress #sg-course-completed{color:#155724;font-weight:600;margin-top:.25rem}
.sg-course-progress a{display:inline-block;margin-top:.25rem}
.sg-course-page .sgt-footnote{margin:.5rem 0 0;font-size:.75rem;color:#8a9098;text-align:left}

/* ── Игровая часть внутри карточки ───────────────────────────────────────── */
.sg-task.sg-course-task{--sg-blue:#368cbf;--sg-line:#dee2e6;max-width:none;margin:1rem 0 0;padding:0;font-family:inherit;font-size:14px;color:#212529}
.sg-course-task [hidden]{display:none!important}
.sg-course-task .sgt-notice{border-radius:4px;padding:.75rem 1rem;margin:0 0 1rem;font-size:.9rem}

.sg-course-task .sgt-workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.sg-course-task .sgt-world-column,.sg-course-task .sgt-code-column{display:flex;flex-direction:column;gap:14px;min-width:0}
/* main.css даёт каждому section margin:2em 0 — внутри колонок отступы задаёт gap. */
.sg-course-task .sgt-card{margin:0;border-radius:4px;box-shadow:none;border-color:var(--sg-line)}
.sg-course-task .sgt-card-heading{padding:8px 12px;min-height:42px;background:#f8f9fa;border-bottom-color:var(--sg-line);gap:10px;flex-wrap:wrap}
.sg-course-task h5{font-size:14px;font-weight:600;letter-spacing:0;color:#1d1e22}
.sg-course-task .sgt-meta{font-size:11px}
.sg-course-task .sgt-card-heading .sgt-meta{max-width:none;text-align:left}
.sg-course-task .sgt-control,.sg-course-task .sgt-fullscreen-button,.sg-course-task .sgt-select{border-radius:.2rem}

.sg-course-task .sgt-viewer-tools{gap:10px;flex-wrap:wrap}
.sg-course-task #sg-viewer-status{max-width:160px;font-size:11px;text-align:right}
.sg-course-task .sgt-stage{min-height:0}
.sg-course-task .sgt-stage iframe{height:clamp(380px,53vh,560px)}
.sg-course-task .sgt-replay{flex-wrap:wrap;gap:8px;padding:10px 12px}
.sg-course-task .sgt-replay input[type=range]{min-width:65px}
.sg-course-task #sg-scene-position:empty,.sg-course-task #sg-scene-notice:empty{display:none}
.sg-course-task #sg-scene-notice{margin:0;padding:0 12px 9px;font-size:11px;overflow-wrap:anywhere}
.sg-course-task .sgt-cutscene-tools{padding:8px 12px}
.sg-course-task .sgt-cutscene-hint{display:none}

.sg-course-task .sgt-statement-card{margin:0}
.sg-course-task .sgt-statement-card iframe{height:clamp(170px,23vh,220px);min-height:0;display:block;width:100%;border:0;background:#fff}
.sg-course-task .sgt-statement-tools{display:flex;align-items:center;gap:10px}
.sg-course-task .sgt-statement-tools .sgt-meta{display:none}
.sg-course-task .sgt-statement-card.sgt-statement-expanded iframe{height:60vh;min-height:300px}

.sg-course-task .sgt-command-palette-compact{position:relative;padding:10px 12px;background:#fff;border-bottom:1px solid var(--sg-line)}
.sg-course-task .sgt-palette-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.sg-course-task .sgt-command-button{padding:6px 10px;min-height:34px;border-radius:.2rem;max-width:100%;background:#f4f8fb;border:1px solid #d7e4ee;gap:0}
.sg-course-task .sgt-command-button code{font:600 13px/1.5 Consolas,"Liberation Mono",monospace;color:#2d668c;background:none;padding:0}
.sg-course-task .sgt-command-button span{display:none}
.sg-course-task .sgt-command-button:hover:enabled,.sg-course-task .sgt-command-button:focus-visible{background:#e7f2fa;border-color:#7cabc9}
.sg-course-task .sgt-command-tooltip{position:absolute;left:10px;right:10px;top:calc(100% - 2px);z-index:4;margin:0;padding:9px 12px;border:1px solid #cbdde9;border-radius:4px;box-shadow:0 3px 10px #20394d15;background:#f4f8fb;color:#3d556a;font-size:12px;line-height:1.5;overflow-wrap:anywhere;pointer-events:none}
.sg-course-task .sgt-command-tooltip:empty{display:none}

.sg-course-task .sgt-source,.sg-course-task .sgt-code-card .CodeMirror{height:280px!important;min-height:220px;font:14px/1.65 Consolas,"Liberation Mono",monospace!important}
.sg-course-task .sgt-code-card .CodeMirror-scroll{min-height:0}
.sg-course-task .sgt-editor-footer{font-size:10px;padding:7px 12px;flex-wrap:wrap;gap:4px 12px}

/* Кнопка проверки — как «Проверить ответ» (btn-success) на других страницах. */
.sg-course-task .sgt-run-bar{padding:12px;align-items:flex-end;gap:10px;flex-wrap:wrap}
.sg-course-task .sgt-test-label{flex:1 1 150px;font-size:11px;min-width:0}
.sg-course-task .sgt-select{font-size:13px!important;min-height:36px;padding-right:24px;border-color:#ced4da}
.sg-course-task .sgt-button{border-radius:.2rem;min-height:36px;font-size:.875rem!important;font-weight:400!important;white-space:normal;text-align:center}
.sg-course-task #sg-run{flex:0 1 auto;background:#28a745;border-color:#28a745;color:#fff;box-shadow:none}
.sg-course-task #sg-run:hover:enabled{background:#218838;border-color:#1e7e34}
.sg-course-task .sgt-result{font-size:13px;padding:10px 12px;min-height:42px}

.sg-course-task .sgt-console-card{min-height:0}
.sg-course-task .sgt-output{min-height:70px;max-height:180px;font-size:13px;padding:12px 14px}
.sg-course-task .sgt-commands-card summary{padding:10px 12px;font-size:13px}
.sg-course-task .sgt-commands{padding:0 12px 10px}
.sg-course-task .sgt-text-button{font-size:12px!important;min-height:24px}

/* Без права запуска остаётся только условие (TaskPanel получает класс sgt-readonly). */
.sgt-readonly .sg-course-task .sgt-code-column{display:flex}
.sgt-readonly .sg-course-task .sgt-world-column,
.sgt-readonly .sg-course-task .sgt-code-card,
.sgt-readonly .sg-course-task .sgt-commands-card{display:none}
.sgt-readonly .sg-course-task .sgt-statement-card{max-width:none}
.sgt-readonly .sg-course-task .sgt-statement-card iframe{height:65vh;min-height:300px}

/* Колонка контента на 10/12 уже, чем прежняя страница, поэтому
   игровая часть переходит в одну колонку раньше. */
@media (max-width:1399.98px){
    .sg-course-task .sgt-workspace{gap:14px}
    .sg-course-task #sg-run{flex:1 1 100%}
    .sg-course-task #sg-viewer-status{max-width:125px}
}
@media (max-width:1199.98px){
    .sg-course-task .sgt-workspace{grid-template-columns:1fr}
    .sg-course-task .sgt-world-column,.sg-course-task .sgt-code-column{display:contents}
    .sg-course-task .sgt-statement-card{order:0}
    .sg-course-task .sgt-viewer-card{order:1}
    .sg-course-task .sgt-code-card{order:2}
    .sg-course-task .sgt-console-card{order:3}
    .sg-course-task .sgt-commands-card{order:4}
    .sg-course-task .sgt-stage iframe{height:clamp(300px,55vh,500px)}
    .sg-course-task .sgt-statement-card iframe{height:190px}
    .sg-course-task #sg-run{flex:0 1 auto}
    .sg-course-task .sgt-source,.sg-course-task .sgt-code-card .CodeMirror{height:300px!important}
    .sg-course-task #sg-viewer-status{max-width:none}
}
/* Как в CourseTask_F: на узком экране реклама уходит под задачу. */
@media (max-width:991.98px){
    .sg-course-page .sg-course-main,.sg-course-page .sg-course-ad{flex:0 0 100%;max-width:100%}
    .sg-course-page .sg-course-ad{margin-top:1rem}
}
@media (max-width:560px){
    .sg-course-task #sg-viewer-status{display:none}
    .sg-course-task .sgt-card-heading{padding:8px 10px}
    .sg-course-task .sgt-editor-footer span:last-child{display:none}
    .sg-course-task #sg-run{flex:1 1 100%}
    .sg-course-task .sgt-test-label{flex-basis:100%}
    .sg-course-task .sgt-commands-card summary .sgt-meta{float:none;margin-left:10px}
}