/* Mesin Algoritma: kode berbaris, mesin masukan, tabel variabel, jawaban A-D untuk 1 atau 2 pemain */
.ma-wrap { flex: 1; min-height: 0; display: flex; padding: clamp(4px, 1vw, 12px); background: #1e3a8a; }
.ma-stage { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow-y: auto; border: 3px solid #fff; background: linear-gradient(180deg, #eff6ff, #e0e7ff); display: flex; flex-direction: column; gap: clamp(4px, 1vh, 8px); padding: clamp(5px, 1vw, 10px); }
.ma-stage > * { flex-shrink: 0; }
.ma-bottom { display: flex; align-items: center; gap: 10px; }
.ma-bottom .ma-fb { flex: 1; min-width: 0; }
.ma-hud { display: flex; flex-wrap: wrap; gap: 5px; font-weight: 800; font-size: clamp(11px, 1.45vw, 16px); }
.ma-hud span { background: rgba(15,23,42,.78); color: #fff; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.ma-hud .k { background: #2563eb; } .ma-hud .p0 { background: #e11d48; } .ma-hud .p1 { background: #0284c7; }
.ma-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, 1fr); gap: 8px; min-height: 0; }
.ma-code { background: #0f172a; border-radius: 12px; padding: 6px 10px 8px; color: #e2e8f0; min-width: 0; }
.ma-codehead { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; font-size: clamp(11px, 1.4vw, 15px); color: #93c5fd; margin-bottom: 4px; flex-wrap: wrap; }
.ma-inp b { color: #fde047; font-size: 1.15em; }
.ma-lines { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(12px, 1.7vw, 19px); line-height: 1.5; overflow-x: auto; }
.ma-ln { display: flex; gap: 10px; border-radius: 6px; padding: 0 6px; white-space: pre; }
.ma-ln .n { flex: 0 0 1.6em; text-align: right; color: #64748b; user-select: none; }
.ma-ln.run { background: #1d4ed8; color: #fff; }
.ma-ln.yes { background: #166534; color: #fff; } .ma-ln.no { background: #7f1d1d; color: #fff; }
.ma-ln.pick { background: #854d0e; color: #fff; }
.ma-ln .kw { color: #f9a8d4; font-weight: 700; } .ma-ln .st { color: #86efac; } .ma-ln .nm { color: #fde68a; } .ma-ln .blank { color: #fde047; background: #713f12; border-radius: 4px; padding: 0 4px; }
.ma-legend { margin: 6px 0 0; font-size: clamp(10px, 1.2vw, 13px); color: #94a3b8; font-weight: 600; }
.ma-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ma-box { background: #fff; border: 3px solid #bfdbfe; border-radius: 12px; padding: 4px 8px; flex: 1; min-height: 0; }
.ma-box h4 { margin: 0 0 3px; font-size: clamp(11px, 1.3vw, 14px); color: var(--muted); }
.ma-vars { display: flex; flex-wrap: wrap; gap: 4px; font-weight: 800; font-size: clamp(12px, 1.6vw, 18px); }
.ma-vars span { background: #dbeafe; border-radius: 8px; padding: 1px 8px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ma-vars span.chg { background: #fde047; }
.ma-outbox { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: clamp(14px, 2vw, 22px); color: #166534; min-height: 1.4em; word-break: break-word; }
.ma-q { margin: 0; font-weight: 800; font-size: clamp(13px, 1.9vw, 21px); line-height: 1.3; }
.ma-ans { display: grid; gap: 8px; }
.ma-grp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ma-ans.two { grid-template-columns: 1fr 1fr; gap: 14px; }
.ma-grp.p0 { --pc: #e11d48; } .ma-grp.p1 { --pc: #0284c7; } .ma-grp.solo { --pc: #2563eb; }
.ma-opt { display: flex; align-items: center; gap: 8px; min-height: clamp(38px, 7vh, 54px); padding: 2px 10px; border: 3px solid var(--pc); border-radius: 14px; background: #fff; font: inherit; font-weight: 800; font-size: clamp(13px, 1.9vw, 22px); color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.ma-opt i { flex: 0 0 auto; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--pc); color: #fff; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: .85em; }
.ma-opt span { overflow-wrap: anywhere; }
.ma-opt:disabled { cursor: default; }
.ma-opt.ok { background: #bbf7d0; border-color: var(--ok); } .ma-opt.bad { background: var(--rose-100); border-color: var(--bad); } .ma-opt.lock { opacity: .45; }
.ma-fb { margin: 0; min-height: 2.4em; font-weight: 800; font-size: clamp(12px, 1.6vw, 18px); line-height: 1.3; color: #1e3a8a; }
.ma-fb.ok { color: #15803d; } .ma-fb.bad { color: #dc2626; }
.ma-next { flex: 0 0 auto; min-height: 42px; padding: 0 24px; border: 0; border-radius: 999px; background: #7c3aed; color: #fff; font: inherit; font-weight: 900; font-size: clamp(16px, 2.2vw, 24px); cursor: pointer; box-shadow: 0 5px 0 rgba(15,23,42,.3); }
.ma-next[hidden] { display: none; }
.ma-stars { font-size: clamp(32px, 7vh, 60px); color: #f59e0b; letter-spacing: 6px; line-height: 1; } .ma-stars .off { color: #cbd5e1; }
@media (max-height: 520px) { .ma-wrap { padding: 3px 6px; } .ma-stage { border-width: 2px; border-radius: 12px; padding: 4px 6px; gap: 3px; } .ma-lines { font-size: 12px; line-height: 1.35; } .ma-opt { min-height: 34px; } .ma-box { padding: 2px 6px; } }
@media (max-width: 700px) { .ma-main { grid-template-columns: 1fr; } .ma-ans.two { gap: 8px; } }
@media (min-width: 700px) { .ma-ans:not(.two) .ma-grp { grid-template-columns: repeat(4, 1fr); } }
@media (max-height: 520px) { .ma-opt { min-height: 32px; padding: 0 8px; font-size: clamp(12px, 1.7vw, 17px); } .ma-fb { min-height: 1.4em; } .ma-next { min-height: 36px; } .ma-codehead { margin-bottom: 1px; } .ma-legend { display: none; } .ma-box { padding: 2px 6px; } }