/* CPU Simulator: what this page adds to Shift One and games.css. */
.machine { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.cpu { border: 2px solid var(--accent-line); border-radius: var(--r-xl); padding: 16px; background: var(--accent-wash); }
.cpu__title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.regs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reg { padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-wash), var(--bg-elevated); border: 1px solid var(--separator-firm); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.reg__name { font-size: 11.5px; font-weight: 700; color: var(--label-2); }
.reg__full { font-size: 10.5px; color: var(--label-3); }
.reg__val { margin-top: 4px; font: 700 20px var(--font-mono); min-height: 28px; }
.reg--wide { grid-column: span 2; }
.reg.flash { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); animation: combo-pop 380ms var(--ease); }
.reg.src { border-color: var(--warning); box-shadow: 0 0 0 4px var(--warning-wash); }
.ram table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-family: var(--font-mono); font-size: 14px; }
.ram td { padding: 5px 10px; background: var(--bg-elevated-2); }
.ram td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--label-3); width: 52px; }
.ram td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; font-weight: 600; }
.ram tr.at td { background: var(--accent-wash); }
.ram tr.at td:first-child { color: var(--accent); }
.ram tr.flash td { background: var(--warning-wash); }
.stage-pill { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--fill); }
.stage-pill span { padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--label-3); }
.stage-pill span.on { background: var(--accent-fill); color: #fff; }
.ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 14px; }
.op { padding: 11px 12px; text-align: left; border-radius: var(--r-lg); background: var(--surface-wash), var(--bg-elevated); border: 1px solid var(--separator-firm); font-size: 13.5px; font-weight: 600; color: var(--label); transition: border-color 140ms var(--ease), transform 140ms var(--ease); }
.op:hover { border-color: var(--accent); transform: translateY(-1px); }
.op small { display: block; font-weight: 500; color: var(--label-3); font-size: 11.5px; margin-top: 2px; }
.op.pulse { border-color: var(--success); box-shadow: 0 0 0 4px var(--success-wash); }
.cpu-log { max-height: 220px; overflow-y: auto; font: 12.5px/1.8 var(--font-mono); color: var(--label-2); }
@media (max-width: 760px) { .machine { grid-template-columns: minmax(0, 1fr); } }