/* All styles are prefixed with .mc- to avoid theme/Elementor collisions */
.mc-root * { box-sizing: border-box; }
.mc-root { font-family: monospace; color: #0f0; }
.mc-container { display: flex; flex-direction: row; width: 100%; max-width: 1000px; height: 650px; border: 1px solid #0f0; margin: 0 auto; background:#111; }
.mc-stats { width: 280px; padding: 15px; border-right: 1px solid #0f0; overflow-y: auto; }
.mc-game { flex: 1; display: flex; flex-direction: column; padding: 15px; }
.mc-output { flex-grow: 1; background-color: #000; border: 1px solid #0f0; padding: 10px; overflow-y: auto; white-space: pre-wrap; margin-bottom: 10px; }
.mc-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-btn { flex: 1 1 auto; padding: 10px; font-size: 16px; cursor: pointer; background-color: #222; color: #0f0; border: 1px solid #0f0; }
.mc-btn:hover { background-color: #0f0; color: #000; }
.mc-btn--sm { font-size: 12px; padding: 4px 8px; }
.mc-bold { font-weight: 700; }


/* Timer bar */
.mc-timer { width: 100%; height: 18px; border: 1px solid #0f0; background:#031; margin: 6px 0 10px; position: relative; }
.mc-timer__bar { position:absolute; left:0; top:0; height:100%; background: linear-gradient(90deg,#3f3,#0f0); width:100%; transition: width 100ms linear; }
.mc-timer__label { position:absolute; width:100%; text-align:center; font-size: 12px; color:#021; mix-blend-mode: screen; }


.mc-row { display:flex; gap:8px; align-items:center; }
.mc-input { background:#000; color:#0f0; border:1px solid #0f0; padding:8px; width:120px; }


/* Responsive */
@media (max-width: 700px) {
.mc-container { flex-direction: column; height: auto; border: none; }
.mc-stats { width: 100%; border-right: none; border-bottom: 1px solid #0f0; max-height: 220px; }
.mc-output { height: 320px; }
.mc-btn { flex: 1 1 100%; font-size: 14px; }
}