/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-algorithm-sequencer
 */
.as-stage {
    font-family: 'Nunito', system-ui, sans-serif;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
@media (max-width: 640px) { .as-stage { grid-template-columns: 1fr; } }

.as-goal {
    grid-column: 1 / -1;
    font-weight: 700; font-size: 16px; color: #163a5f;
    background: #eef6ff; border: 1px solid #c7dcf2; border-radius: 10px;
    padding: 10px 14px; margin: 4px 0 0;
}

.as-grid-wrap { display: flex; justify-content: center; }
.as-grid {
    display: grid; gap: 3px; background: #cbd5e1; padding: 3px; border-radius: 8px;
    width: min(360px, 90vw);
}
.as-cell {
    aspect-ratio: 1/1; background: #f1f8f2; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    position: relative;
}
.as-cell.as-obstacle { background: #cfe8ff; }   /* pond */
.as-goal-icon { color: #dc2626; }
.as-sprite {
    color: #1565c0; transition: transform 250ms ease, left 250ms ease, top 250ms ease;
}
.as-sprite i { display: inline-block; }

.as-program-area { font-family: inherit; }
.as-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.as-cmd {
    background: #1565c0; color: #fff; border: none; border-radius: 8px;
    padding: 8px 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.as-cmd:hover { background: #0d4787; }

.as-program-label { font-weight: 700; font-size: 12px; color: #64748b; margin: 4px 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.as-program {
    list-style: none; margin: 0 0 10px; padding: 8px; min-height: 60px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
    counter-reset: step;
}
.as-program li {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-weight: 700; color: #1f2a37;
}
.as-program li::before { counter-increment: step; content: counter(step); color: #94a3b8; font-size: 12px; min-width: 16px; }
.as-program li.as-active { border-color: #1565c0; background: #eef6ff; }
.as-program li button { margin-left: auto; border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 14px; }

.as-run-row { display: flex; gap: 10px; }
.as-result { margin-top: 10px; font-weight: 800; min-height: 22px; }
.as-result.as-win { color: #15803d; }
.as-result.as-lose { color: #b91c1c; }

.activity-container.display-mode .as-cmd,
.activity-container.display-mode .as-program li button { pointer-events: none; opacity: .6; }